@codraoss/ui 0.9.4

package/dist/index.js

@@ -0,0 +1,1144 @@
+import {
+  cn
+} from "./chunk-HCQJTSV3.js";
+import {
+  EASE_OUT
+} from "./chunk-OU66JJZD.js";
+import "./chunk-PZ5AY32C.js";
+
+// src/components/alert.tsx
+import * as React from "react";
+import { AlertCircle, CheckCircle2, AlertTriangle, Info } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var variants = {
+  default: {
+    bg: "var(--info-bg)",
+    border: "var(--info-border)",
+    color: "var(--info)",
+    icon: Info
+  },
+  destructive: {
+    bg: "var(--danger-bg)",
+    border: "var(--danger-border)",
+    color: "var(--danger)",
+    icon: AlertCircle
+  },
+  warning: {
+    bg: "var(--warning-bg)",
+    border: "var(--warning-border)",
+    color: "var(--warning)",
+    icon: AlertTriangle
+  },
+  success: {
+    bg: "var(--success-bg)",
+    border: "var(--success-border)",
+    color: "var(--success)",
+    icon: CheckCircle2
+  }
+};
+var Alert = React.forwardRef(
+  ({ className, variant = "default", icon: IconOverride, children, ...props }, ref) => {
+    const config = variants[variant];
+    const Icon = IconOverride || config.icon;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(
+          "flex gap-3 rounded-lg border px-4 py-3 text-sm",
+          className
+        ),
+        style: {
+          backgroundColor: config.bg,
+          borderColor: config.border,
+          color: config.color
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 mt-0.5" }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children })
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+// src/components/badge.tsx
+import "react";
+import "class-variance-authority";
+
+// src/components/badge-variants.ts
+import { cva } from "class-variance-authority";
+var badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/15 text-primary",
+        secondary: "bg-ui-fill/45 text-ui-default",
+        neutral: "bg-ui-fill/45 text-ui-default",
+        info: "bg-info/15 text-info",
+        success: "bg-success/15 text-success",
+        warning: "bg-warning/15 text-warning",
+        danger: "bg-danger/15 text-danger",
+        outline: "text-ui-default ring-1 ring-inset ring-ui-line bg-transparent"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+
+// src/components/badge.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/components/button.tsx
+import * as React3 from "react";
+import { useRender } from "@base-ui/react/use-render";
+import "class-variance-authority";
+import { Loader2 } from "lucide-react";
+
+// src/components/button-variants.ts
+import { cva as cva2 } from "class-variance-authority";
+var buttonVariants = cva2(
+  "relative inline-flex select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "border border-[var(--btn-primary-border)] bg-[var(--btn-primary-surface)] text-[var(--btn-primary-fg)] hover:bg-[var(--btn-primary-hover)]",
+        secondary: "border border-ui-line bg-ui-base text-ui-default hover:bg-ui-fill/60",
+        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:scale-[.98]",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        "destructive-outline": "border border-danger-border bg-danger-bg/40 text-danger shadow-sm hover:bg-destructive hover:text-destructive-foreground hover:border-destructive",
+        "warning-outline": "border border-warning-border bg-warning-bg/40 text-warning shadow-sm hover:bg-warning-bg hover:border-warning",
+        outline: "border border-zinc-200 bg-white shadow-sm hover:bg-zinc-50 hover:text-zinc-900 dark:border-white/10 dark:bg-white/[0.06] dark:hover:bg-white/[0.1] dark:hover:text-foreground",
+        ghost: "hover:bg-secondary hover:text-secondary-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        accent: "bg-accent text-accent-foreground shadow-sm hover:bg-accent/90 active:scale-[.98]"
+      },
+      size: {
+        default: "h-9 rounded-md px-4 py-2 text-sm",
+        sm: "h-8 rounded-md px-3 text-xs",
+        base: "h-9 rounded-md px-3 text-sm",
+        lg: "h-11 rounded-md px-6 text-sm",
+        xs: "h-6 rounded-md px-1.5 text-xs",
+        icon: "h-9 w-9 rounded-md"
+      }
+    },
+    defaultVariants: { variant: "default", size: "default" }
+  }
+);
+
+// src/components/button.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SQUARE_WIDTH = {
+  xs: "w-6 p-0",
+  sm: "w-8 p-0",
+  base: "w-9 p-0",
+  default: "w-9 p-0",
+  lg: "w-11 p-0",
+  icon: "p-0"
+};
+function shapeClass(shape, size) {
+  if (shape === "base") return "";
+  return cn(SQUARE_WIDTH[size ?? "default"], shape === "circle" && "rounded-full");
+}
+var Button = React3.forwardRef(
+  ({ className, variant, size, shape = "base", asChild = false, icon, loading, children, ...props }, ref) => {
+    const classes = cn(buttonVariants({ variant, size }), shapeClass(shape, size), className);
+    return useRender({
+      render: asChild && React3.isValidElement(children) ? children : void 0,
+      defaultTagName: "button",
+      ref,
+      props: {
+        className: classes,
+        ...props,
+        ...asChild ? {} : {
+          disabled: props.disabled || loading,
+          children: /* @__PURE__ */ jsxs2(Fragment, { children: [
+            loading ? /* @__PURE__ */ jsx3(Loader2, { className: "size-4 animate-spin" }) : icon,
+            children
+          ] })
+        }
+      }
+    });
+  }
+);
+Button.displayName = "Button";
+var LinkButton = React3.forwardRef(
+  ({ className, variant, size, shape = "base", icon, external, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+    "a",
+    {
+      ref,
+      className: cn(buttonVariants({ variant, size }), shapeClass(shape, size), className),
+      ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      ...props,
+      children: [
+        icon,
+        children
+      ]
+    }
+  )
+);
+LinkButton.displayName = "LinkButton";
+
+// src/components/confirm-dialog.tsx
+import { Dialog } from "@base-ui/react/dialog";
+import { AlertTriangle as AlertTriangle2 } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Continue",
+  cancelLabel = "Cancel",
+  confirmVariant = "default",
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsx4(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs3(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx4(Dialog.Backdrop, { className: "fixed inset-0 z-40 bg-background/75 backdrop-blur-sm transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0" }),
+    /* @__PURE__ */ jsxs3(Dialog.Popup, { className: "fixed left-1/2 top-1/2 z-50 w-[calc(100vw-1.5rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-ui-line bg-card p-5 shadow-2xl transition-[opacity,transform] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx4("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--warning-bg)] text-[var(--warning)]", children: /* @__PURE__ */ jsx4(AlertTriangle2, { size: 18 }) }),
+        /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx4(Dialog.Title, { className: "text-sm font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx4(Dialog.Description, { className: "mt-1 text-sm text-muted-foreground", children: description })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
+        /* @__PURE__ */ jsx4(Dialog.Close, { render: /* @__PURE__ */ jsx4(Button, { variant: "outline" }), children: cancelLabel }),
+        /* @__PURE__ */ jsx4(
+          Button,
+          {
+            variant: confirmVariant,
+            onClick: () => {
+              onConfirm();
+              onOpenChange(false);
+            },
+            children: confirmLabel
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/components/input.tsx
+import * as React4 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SIZE_CLASS = {
+  xs: "h-6 rounded-md px-1.5 text-xs",
+  sm: "h-8 rounded-md px-2 text-xs",
+  base: "h-9 rounded-md px-3 text-sm",
+  lg: "h-10 rounded-md px-4 text-base"
+};
+var Input = React4.forwardRef(
+  ({ className, size = "base", ...props }, ref) => /* @__PURE__ */ jsx5(
+    "input",
+    {
+      ref,
+      className: cn(
+        "w-full border border-ui-line bg-ui-base text-ui-default transition-colors placeholder:text-ui-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-brand/40 disabled:cursor-not-allowed disabled:opacity-50",
+        SIZE_CLASS[size],
+        className
+      ),
+      ...props
+    }
+  )
+);
+Input.displayName = "Input";
+
+// src/components/layer-card.tsx
+import * as React5 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var LayerCard = React5.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref,
+      className: cn("rounded-lg border border-ui-line bg-ui-base", className),
+      ...props
+    }
+  )
+);
+LayerCard.displayName = "LayerCard";
+
+// src/components/select.tsx
+import { domAnimation, LazyMotion, useReducedMotion } from "motion/react";
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+
+// src/components/select-panel.tsx
+import { Check } from "lucide-react";
+import { m } from "motion/react";
+
+// src/components/select-shared.ts
+var CHEVRON_TRANSITION = { type: "spring", duration: 0.4, bounce: 0.3 };
+var LIST_VARIANTS = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.02, delayChildren: 0.03 } }
+};
+var ITEM_VARIANTS = {
+  hidden: { opacity: 0, y: -5, filter: "blur(2px)" },
+  show: { opacity: 1, y: 0, filter: "blur(0px)" }
+};
+var INSTANT_TRANSITION = { duration: 0 };
+
+// src/components/select-panel.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var REDUCED_TRANSITION = { duration: 0.12 };
+var GAP_TRANSITION_OPEN = { type: "spring", duration: 0.44, bounce: 0.45, delay: 0.09 };
+var GAP_TRANSITION_CLOSED = { type: "spring", duration: 0.26, bounce: 0.1 };
+var RADIUS_TRANSITION_OPEN = { duration: 0.26, ease: EASE_OUT, delay: 0.1 };
+var RADIUS_TRANSITION_CLOSED = { duration: 0.15, ease: EASE_OUT };
+var OPACITY_TRANSITION_OPEN = { duration: 0.18 };
+var OPACITY_TRANSITION_CLOSED = { duration: 0.16, delay: 0.1 };
+var HEIGHT_TRANSITION_OPEN = { type: "spring", duration: 0.4, bounce: 0.14 };
+var HEIGHT_TRANSITION_CLOSED = { duration: 0.24, ease: EASE_OUT, delay: 0.1 };
+function SelectPanel({
+  panelRef,
+  innerRef,
+  optionRefs,
+  listId,
+  triggerId,
+  options,
+  value,
+  highlightedIndex,
+  open,
+  isTop,
+  reduce,
+  height,
+  rect,
+  onSelect,
+  onHighlight
+}) {
+  const nearGap = open ? 8 : 0;
+  const nearRadius = open ? 7 : 0;
+  const gapT = open ? GAP_TRANSITION_OPEN : GAP_TRANSITION_CLOSED;
+  const radiusT = open ? RADIUS_TRANSITION_OPEN : RADIUS_TRANSITION_CLOSED;
+  return /* @__PURE__ */ jsx7(
+    m.div,
+    {
+      ref: panelRef,
+      id: listId,
+      role: "listbox",
+      "aria-labelledby": triggerId,
+      "aria-hidden": !open,
+      initial: false,
+      animate: reduce ? { opacity: open ? 1 : 0, height: open ? height : 0 } : {
+        opacity: open ? 1 : 0,
+        height: open ? height : 0,
+        // gap opens on the side facing the trigger
+        marginTop: isTop ? 0 : nearGap,
+        marginBottom: isTop ? nearGap : 0,
+        // near corners go flat->round; far corners stay rounded
+        borderTopLeftRadius: isTop ? 7 : nearRadius,
+        borderTopRightRadius: isTop ? 7 : nearRadius,
+        borderBottomLeftRadius: isTop ? nearRadius : 7,
+        borderBottomRightRadius: isTop ? nearRadius : 7
+      },
+      transition: reduce ? REDUCED_TRANSITION : {
+        opacity: open ? OPACITY_TRANSITION_OPEN : OPACITY_TRANSITION_CLOSED,
+        height: open ? HEIGHT_TRANSITION_OPEN : HEIGHT_TRANSITION_CLOSED,
+        marginTop: isTop ? INSTANT_TRANSITION : gapT,
+        marginBottom: isTop ? gapT : INSTANT_TRANSITION,
+        borderTopLeftRadius: isTop ? INSTANT_TRANSITION : radiusT,
+        borderTopRightRadius: isTop ? INSTANT_TRANSITION : radiusT,
+        borderBottomLeftRadius: isTop ? radiusT : INSTANT_TRANSITION,
+        borderBottomRightRadius: isTop ? radiusT : INSTANT_TRANSITION
+      },
+      style: {
+        position: "fixed",
+        left: rect?.left ?? 0,
+        width: rect?.width ?? 0,
+        top: isTop ? void 0 : rect?.bottom ?? 0,
+        bottom: isTop ? window.innerHeight - (rect?.top ?? 0) : void 0,
+        transformOrigin: isTop ? "bottom" : "top",
+        overflow: "hidden",
+        pointerEvents: open ? "auto" : "none"
+      },
+      className: "z-50 border border-ui-line bg-ui-base shadow-lg shadow-black/[0.04] dark:shadow-black/40",
+      children: /* @__PURE__ */ jsx7(
+        m.ul,
+        {
+          ref: innerRef,
+          variants: reduce ? void 0 : LIST_VARIANTS,
+          initial: false,
+          animate: open ? "show" : "hidden",
+          className: "max-h-[min(28rem,60vh)] overflow-y-auto p-1",
+          children: options.map((option, index) => {
+            const selected = option.value === value;
+            const highlighted = index === highlightedIndex;
+            return /* @__PURE__ */ jsx7(m.li, { variants: reduce ? void 0 : ITEM_VARIANTS, children: /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                ref: (node) => {
+                  optionRefs.current[index] = node;
+                },
+                id: `${listId}-option-${index}`,
+                type: "button",
+                role: "option",
+                "aria-selected": selected,
+                tabIndex: -1,
+                onMouseEnter: () => onHighlight(index),
+                onClick: () => onSelect(option.value),
+                className: cn(
+                  // `whitespace-nowrap`: on the 72px "rows per page" select, the check icon ate the width and "10" wrapped to stacked digits.
+                  "flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-md px-2.5 py-1.5 text-left text-sm outline-none transition-colors",
+                  selected ? "bg-ui-brand/10 font-medium text-ui-brand" : "text-ui-default hover:bg-ui-fill hover:text-ui-strong focus-visible:bg-ui-fill",
+                  highlighted && !selected && "bg-ui-fill text-ui-strong"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx7("span", { className: "min-w-0 truncate", children: option.label }),
+                  selected ? /* @__PURE__ */ jsx7(Check, { className: "h-3.5 w-3.5 shrink-0" }) : null
+                ]
+              }
+            ) }, option.value);
+          })
+        }
+      )
+    }
+  );
+}
+
+// src/components/select-trigger.tsx
+import { ChevronDown } from "lucide-react";
+import { m as m2 } from "motion/react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var RADIUS_OPEN = [0, 0, 7];
+var RADIUS_CLOSED = [7, 0, 7];
+var RADIUS_TRANSITION_OPEN2 = { duration: 0.46, times: [0, 0.4, 1], ease: EASE_OUT };
+var RADIUS_TRANSITION_CLOSED2 = { duration: 0.34, times: [0, 0.5, 1], ease: EASE_OUT };
+function SelectTrigger({
+  triggerRef,
+  triggerId,
+  listId,
+  labelId,
+  activeDescendantId,
+  open,
+  isTop,
+  reduce,
+  selectedOption,
+  placeholder,
+  leadingIcon,
+  variant,
+  className,
+  style,
+  onToggle,
+  onKeyDown
+}) {
+  const kf = open ? RADIUS_OPEN : RADIUS_CLOSED;
+  const kfT = reduce ? INSTANT_TRANSITION : open ? RADIUS_TRANSITION_OPEN2 : RADIUS_TRANSITION_CLOSED2;
+  return /* @__PURE__ */ jsxs5(
+    m2.button,
+    {
+      ref: triggerRef,
+      type: "button",
+      id: triggerId,
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": listId,
+      "aria-labelledby": labelId ? `${labelId} ${triggerId}` : void 0,
+      "aria-activedescendant": activeDescendantId,
+      onClick: onToggle,
+      onKeyDown,
+      initial: false,
+      animate: {
+        borderTopLeftRadius: isTop ? kf : 7,
+        borderTopRightRadius: isTop ? kf : 7,
+        borderBottomLeftRadius: isTop ? 7 : kf,
+        borderBottomRightRadius: isTop ? 7 : kf
+      },
+      transition: {
+        borderTopLeftRadius: isTop ? kfT : INSTANT_TRANSITION,
+        borderTopRightRadius: isTop ? kfT : INSTANT_TRANSITION,
+        borderBottomLeftRadius: isTop ? INSTANT_TRANSITION : kfT,
+        borderBottomRightRadius: isTop ? INSTANT_TRANSITION : kfT
+      },
+      style,
+      className: cn(
+        "relative z-10 flex h-9 w-full items-center justify-between gap-2 border border-ui-line px-3 py-2 text-sm font-normal text-ui-default outline-none transition-colors",
+        variant === "page" ? "bg-ui-base" : "bg-ui-fill/50",
+        "hover:bg-ui-fill/70 focus-visible:ring-2 focus-visible:ring-ui-brand/40 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        !selectedOption && "text-ui-subtle",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          leadingIcon && /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-primary/70", children: leadingIcon }),
+          /* @__PURE__ */ jsx8("span", { className: "min-w-0 truncate", children: selectedOption ? selectedOption.label : placeholder })
+        ] }),
+        /* @__PURE__ */ jsx8(
+          m2.span,
+          {
+            "aria-hidden": true,
+            animate: { rotate: open ? 180 : 0 },
+            transition: reduce ? INSTANT_TRANSITION : CHEVRON_TRANSITION,
+            className: "shrink-0 text-ui-subtle",
+            children: /* @__PURE__ */ jsx8(ChevronDown, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/select.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function Select({
+  value,
+  onValueChange,
+  options,
+  placeholder = "Select...",
+  label,
+  className,
+  triggerClassName,
+  triggerStyle,
+  leadingIcon,
+  variant = "page"
+}) {
+  const reduce = useReducedMotion() ?? false;
+  const baseId = useId();
+  const triggerId = `${baseId}-trigger`;
+  const listId = `${baseId}-list`;
+  const labelId = `${baseId}-label`;
+  const triggerRef = useRef(null);
+  const labelRef = useRef(null);
+  const panelRef = useRef(null);
+  const innerRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [placement, setPlacement] = useState("bottom");
+  const [height, setHeight] = useState(0);
+  const [rect, setRect] = useState(null);
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const optionRefs = useRef([]);
+  const highlightSource = useRef("keyboard");
+  const selectedOption = options.find((opt) => opt.value === value);
+  useEffect(() => {
+    if (!open) return;
+    highlightSource.current = "keyboard";
+    const idx = options.findIndex((opt) => opt.value === value);
+    setHighlightedIndex(idx >= 0 ? idx : 0);
+  }, [open]);
+  useEffect(() => {
+    if (!open || highlightSource.current !== "keyboard") return;
+    optionRefs.current[highlightedIndex]?.scrollIntoView({ block: "nearest" });
+  }, [open, highlightedIndex]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    const onPointer = (e) => {
+      const target = e.target;
+      if (triggerRef.current?.contains(target)) return;
+      if (panelRef.current?.contains(target)) return;
+      if (labelRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("pointerdown", onPointer);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("pointerdown", onPointer);
+    };
+  }, [open]);
+  useLayoutEffect(() => {
+    const node = innerRef.current;
+    if (!node) return;
+    const measure = () => setHeight(node.offsetHeight);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    let frame = null;
+    const update = () => {
+      frame = null;
+      const r = trigger.getBoundingClientRect();
+      setRect({ left: r.left, width: r.width, top: r.top, bottom: r.bottom });
+      const h = innerRef.current?.offsetHeight ?? 0;
+      const below = window.innerHeight - r.bottom;
+      const above = r.top;
+      setPlacement(below < h + 16 && above > below ? "top" : "bottom");
+    };
+    const scheduleUpdate = (e) => {
+      if (e && e.target instanceof Node && panelRef.current?.contains(e.target)) return;
+      if (frame !== null) return;
+      frame = requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener("scroll", scheduleUpdate, true);
+    window.addEventListener("resize", scheduleUpdate);
+    return () => {
+      if (frame !== null) cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", scheduleUpdate, true);
+      window.removeEventListener("resize", scheduleUpdate);
+    };
+  }, [open]);
+  const moveHighlight = (next) => {
+    highlightSource.current = "keyboard";
+    setHighlightedIndex(Math.min(Math.max(next, 0), options.length - 1));
+  };
+  const onTriggerKeyDown = (e) => {
+    if (!open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        setOpen(true);
+      }
+      return;
+    }
+    if (options.length === 0) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveHighlight(highlightedIndex + 1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveHighlight(highlightedIndex - 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        moveHighlight(0);
+        break;
+      case "End":
+        e.preventDefault();
+        moveHighlight(options.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        onValueChange(options[highlightedIndex].value);
+        setOpen(false);
+        break;
+      case "Tab":
+        setOpen(false);
+        break;
+      default:
+        break;
+    }
+  };
+  const selectOption = (next) => {
+    onValueChange(next);
+    setOpen(false);
+  };
+  const highlightOption = (index) => {
+    highlightSource.current = "pointer";
+    setHighlightedIndex(index);
+  };
+  const isTop = placement === "top";
+  return /* @__PURE__ */ jsx9(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    label && /* @__PURE__ */ jsx9(
+      "label",
+      {
+        ref: labelRef,
+        id: labelId,
+        htmlFor: triggerId,
+        className: "text-[10px] font-bold uppercase tracking-wider text-ui-subtle",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx9("div", { className: "relative", children: /* @__PURE__ */ jsx9(
+      SelectTrigger,
+      {
+        triggerRef,
+        triggerId,
+        listId,
+        labelId: label ? labelId : void 0,
+        activeDescendantId: open && options[highlightedIndex] ? `${listId}-option-${highlightedIndex}` : void 0,
+        open,
+        isTop,
+        reduce,
+        selectedOption,
+        placeholder,
+        leadingIcon,
+        variant,
+        className: triggerClassName,
+        style: triggerStyle,
+        onToggle: () => setOpen((v) => !v),
+        onKeyDown: onTriggerKeyDown
+      }
+    ) }),
+    createPortal(
+      /* @__PURE__ */ jsx9(
+        SelectPanel,
+        {
+          panelRef,
+          innerRef,
+          optionRefs,
+          listId,
+          triggerId,
+          options,
+          value,
+          highlightedIndex,
+          open,
+          isTop,
+          reduce,
+          height,
+          rect,
+          onSelect: selectOption,
+          onHighlight: highlightOption
+        }
+      ),
+      document.body
+    )
+  ] }) });
+}
+
+// src/components/switch.tsx
+import * as React6 from "react";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Switch = React6.forwardRef(
+  ({ className, onCheckedChange, ...props }, ref) => /* @__PURE__ */ jsx10(
+    BaseSwitch.Root,
+    {
+      ref,
+      onCheckedChange: (checked) => onCheckedChange?.(checked),
+      className: cn(
+        // Squarish track + knob (Cloudflare-dashboard switch shape).
+        "relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-[5px] p-[2px] transition-colors duration-200",
+        // Dark mode: lighter zinc when off (reads against the page), deeper lime when on (knob doesn't blend).
+        "bg-ui-fill dark:bg-[oklch(40%_0_0)]",
+        "data-checked:bg-ui-brand dark:data-checked:bg-[oklch(64%_0.21_118)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-brand/40 focus-visible:ring-offset-1 focus-visible:ring-offset-ui-base",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx10(BaseSwitch.Thumb, { className: "h-3 w-3 rounded-[3px] bg-white shadow-sm transition-transform duration-200 data-checked:translate-x-3" })
+    }
+  )
+);
+Switch.displayName = "Switch";
+
+// src/components/text.tsx
+import "react";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var textVariants = cva3("", {
+  variants: {
+    variant: {
+      body: "text-ui-default",
+      secondary: "text-ui-subtle",
+      strong: "text-ui-strong"
+    },
+    size: {
+      sm: "text-sm",
+      base: "text-base"
+    },
+    bold: {
+      true: "font-semibold",
+      false: ""
+    }
+  },
+  defaultVariants: { variant: "body", size: "base", bold: false }
+});
+function Text({ as: Comp = "p", variant, size, bold, className, ...props }) {
+  return /* @__PURE__ */ jsx11(Comp, { className: cn(textVariants({ variant, size, bold }), className), ...props });
+}
+
+// src/components/skeleton.tsx
+import "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Skeleton = ({
+  width,
+  height,
+  borderRadius,
+  className = "",
+  style
+}) => {
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: cn("skeleton", className),
+      style: {
+        width: width ?? "100%",
+        height: height ?? "1rem",
+        borderRadius: borderRadius ?? void 0,
+        ...style
+      }
+    }
+  );
+};
+
+// src/components/empty-state.tsx
+import "react";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, hints, linkAction, action, className }) {
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center gap-4 px-8 py-16 text-center",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx13("div", { className: "flex h-14 w-14 items-center justify-center text-muted-foreground/40 [&_svg]:h-9 [&_svg]:w-9 [&_svg]:stroke-[1.35]", children: icon }),
+        /* @__PURE__ */ jsxs7("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx13("h3", { className: "text-base font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx13("p", { className: "max-w-sm text-sm text-muted-foreground leading-relaxed", children: description })
+        ] }),
+        hints && hints.length > 0 && /* @__PURE__ */ jsx13("ul", { className: "mt-1 flex flex-col gap-1.5 text-left", children: hints.map((hint) => /* @__PURE__ */ jsxs7("li", { className: "flex items-start gap-2.5 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx13("span", { className: "mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-primary opacity-80" }),
+          /* @__PURE__ */ jsx13("span", { children: hint })
+        ] }, hint)) }),
+        linkAction && /* @__PURE__ */ jsx13("div", { className: "mt-3", children: linkAction.href ? /* @__PURE__ */ jsx13(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx13(
+          "a",
+          {
+            href: linkAction.href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: linkAction.label
+          }
+        ) }) : /* @__PURE__ */ jsx13(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: linkAction.onClick,
+            children: linkAction.label
+          }
+        ) }),
+        action && /* @__PURE__ */ jsx13(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: action.onClick,
+            className: "mt-2 text-muted-foreground hover:text-foreground",
+            children: action.label
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/section-card.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+function SectionCard({
+  icon,
+  title,
+  description,
+  action,
+  children
+}) {
+  return /* @__PURE__ */ jsxs8("section", { className: "ui-panel min-w-0 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-4 border-b border-ui-line px-5 py-4", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+        icon && /* @__PURE__ */ jsx14("span", { className: "shrink-0 text-ui-subtle", children: icon }),
+        /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx14("h2", { className: "text-[11px] font-semibold uppercase tracking-[0.14em] text-ui-default", children: title }),
+          description && /* @__PURE__ */ jsx14("p", { className: "mt-0.5 truncate text-xs text-ui-subtle", children: description })
+        ] })
+      ] }),
+      action && /* @__PURE__ */ jsx14("div", { className: "shrink-0", children: action })
+    ] }),
+    children
+  ] });
+}
+
+// src/components/copy-button.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Check as Check2, Copy } from "lucide-react";
+
+// src/lib/constants.ts
+var UI_DURATION_TOOLTIP = 1500;
+
+// src/components/copy-button.tsx
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function CopyButton({
+  value,
+  label = "Copy",
+  className
+}) {
+  const [copied, setCopied] = useState2(false);
+  const timer = useRef2(null);
+  useEffect2(() => () => {
+    if (timer.current !== null) window.clearTimeout(timer.current);
+  }, []);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      if (timer.current !== null) window.clearTimeout(timer.current);
+      timer.current = window.setTimeout(() => setCopied(false), UI_DURATION_TOOLTIP);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs9(
+    "button",
+    {
+      type: "button",
+      onClick: copy,
+      "aria-label": copied ? "Copied" : label,
+      className: cn(
+        "inline-flex shrink-0 items-center gap-1 rounded border border-ui-line px-1.5 py-0.5",
+        "text-[10px] font-medium transition-colors",
+        copied ? "text-emerald-500" : "text-ui-subtle hover:text-foreground",
+        className
+      ),
+      children: [
+        copied ? /* @__PURE__ */ jsx15(Check2, { size: 10 }) : /* @__PURE__ */ jsx15(Copy, { size: 10 }),
+        copied ? "Copied" : label
+      ]
+    }
+  );
+}
+
+// src/components/bar-sparkline.tsx
+import { useMemo } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function bucketize(data, bars) {
+  const out = Array(bars).fill(0);
+  if (data.length === 0) return out;
+  if (data.length >= bars) {
+    const size = data.length / bars;
+    for (let i = 0; i < bars; i++) {
+      const start = Math.floor(i * size);
+      const end = Math.floor((i + 1) * size);
+      out[i] = data.slice(start, end).reduce((sum, v) => sum + v, 0);
+    }
+  } else {
+    for (let i = 0; i < bars; i++) {
+      out[i] = data[Math.floor(i * data.length / bars)];
+    }
+  }
+  return out;
+}
+var BASELINE_PCT = 32;
+function BarSparkline({ data, color, bars = 8, className }) {
+  const buckets = useMemo(() => bucketize(data, bars), [data, bars]);
+  const max = Math.max(...buckets, 1);
+  return /* @__PURE__ */ jsx16("div", { className: cn("flex h-12 items-end justify-end gap-[3px]", className), "aria-hidden": "true", children: buckets.map((value, i) => /* @__PURE__ */ jsx16(
+    "div",
+    {
+      className: "w-[5px] rounded-[2px] transition-[height] duration-500",
+      style: {
+        height: `${BASELINE_PCT + value / max * (100 - BASELINE_PCT)}%`,
+        background: `linear-gradient(to top, ${color}99, ${color})`
+      }
+    },
+    i
+  )) });
+}
+
+// src/components/github-mark.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function GithubMark({ size = 16, className }) {
+  return /* @__PURE__ */ jsx17(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx17("path", { d: "M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55 0-.27-.01-1.17-.02-2.12-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.19 1.76 1.19 1.03 1.76 2.69 1.25 3.34.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 2.89-.39c.98 0 1.97.13 2.89.39 2.2-1.49 3.16-1.18 3.16-1.18.63 1.59.24 2.76.12 3.05.74.81 1.19 1.83 1.19 3.09 0 4.41-2.69 5.38-5.25 5.67.41.35.77 1.05.77 2.12 0 1.53-.01 2.76-.01 3.14 0 .3.2.66.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5Z" })
+    }
+  );
+}
+
+// src/components/load-error.tsx
+import { AlertTriangle as AlertTriangle3, RefreshCw } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+function LoadError({
+  title = "Couldn't load data",
+  detail,
+  hint = "Check your connection, then try again. If this keeps happening, the server may be unreachable.",
+  onRetry,
+  retrying,
+  className
+}) {
+  return /* @__PURE__ */ jsx18(
+    "section",
+    {
+      role: "alert",
+      className: cn(
+        "ui-font-sans rounded-lg border border-ui-line bg-white p-3.5 dark:border-[oklch(0.27_0_0)] dark:bg-black sm:p-4",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-6", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 items-start gap-3", children: [
+          /* @__PURE__ */ jsx18("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-red-500/10 text-red-600 dark:text-red-400", children: /* @__PURE__ */ jsx18(AlertTriangle3, { size: 15, strokeWidth: 2 }) }),
+          /* @__PURE__ */ jsxs10("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx18("h2", { className: "text-[13px] font-medium text-ui-default", children: title }),
+            /* @__PURE__ */ jsx18("p", { className: "mt-0.5 text-xs leading-relaxed text-ui-subtle", children: hint }),
+            detail && /* @__PURE__ */ jsx18("code", { className: "ui-well ui-font-mono mt-2 inline-block max-w-full truncate rounded-[5px] px-2 py-1 text-[11px] text-ui-subtle", children: detail })
+          ] })
+        ] }),
+        onRetry && /* @__PURE__ */ jsx18(
+          Button,
+          {
+            variant: "secondary",
+            size: "sm",
+            onClick: onRetry,
+            disabled: retrying,
+            icon: /* @__PURE__ */ jsx18(RefreshCw, { size: 13, className: retrying ? "animate-spin" : "" }),
+            className: "w-full shrink-0 sm:w-auto",
+            children: "Retry"
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/chart-primitives.tsx
+import { Children } from "react";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+function CardDots() {
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      "aria-hidden": true,
+      className: "pointer-events-none absolute inset-0 opacity-[0.35]",
+      style: {
+        backgroundImage: "radial-gradient(circle, var(--ui-line) 1px, transparent 1px)",
+        backgroundSize: "18px 18px"
+      }
+    }
+  );
+}
+function GraphShell({
+  title,
+  icon,
+  legend,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs11(LayerCard, { className: cn("relative flex flex-col overflow-hidden", className), children: [
+    /* @__PURE__ */ jsx19(CardDots, {}),
+    /* @__PURE__ */ jsxs11("div", { className: "relative flex items-center gap-2 px-4 pt-4 sm:px-5 sm:pt-5", children: [
+      icon && /* @__PURE__ */ jsx19("span", { className: "shrink-0 text-ui-subtle", children: icon }),
+      /* @__PURE__ */ jsx19("h3", { className: "truncate text-[11px] font-semibold uppercase tracking-[0.14em] text-ui-default", children: title })
+    ] }),
+    legend && /* @__PURE__ */ jsx19("div", { className: "relative flex flex-wrap items-center gap-x-4 gap-y-1.5 px-4 pt-3 sm:px-5", children: legend }),
+    /* @__PURE__ */ jsx19("div", { className: "relative flex flex-1 flex-col", children })
+  ] });
+}
+function LegendChip({
+  color,
+  hatched,
+  dashed,
+  label
+}) {
+  return /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-1.5 text-xs text-ui-subtle", children: [
+    dashed ? /* @__PURE__ */ jsx19(
+      "span",
+      {
+        className: "h-0 w-3.5 shrink-0 border-t-2 border-dashed",
+        style: { borderColor: color }
+      }
+    ) : /* @__PURE__ */ jsx19(
+      "span",
+      {
+        className: "h-2.5 w-2.5 shrink-0 rounded-[3px]",
+        style: hatched ? {
+          backgroundImage: "repeating-linear-gradient(45deg, var(--ui-subtle) 0 1.5px, transparent 1.5px 3.5px)",
+          backgroundColor: "color-mix(in oklch, var(--ui-fill) 60%, transparent)"
+        } : { backgroundColor: color }
+      }
+    ),
+    label
+  ] });
+}
+function ChartDefs({ isDark }) {
+  const hatch = isDark ? "rgba(228,228,231,0.5)" : "rgba(63,63,70,0.4)";
+  const hatchBg = isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.04)";
+  return /* @__PURE__ */ jsxs11("defs", { children: [
+    /* @__PURE__ */ jsxs11("pattern", { id: "hatchGray", patternUnits: "userSpaceOnUse", width: "5", height: "5", patternTransform: "rotate(45)", children: [
+      /* @__PURE__ */ jsx19("rect", { width: "5", height: "5", fill: hatchBg }),
+      /* @__PURE__ */ jsx19("line", { x1: "0", y1: "0", x2: "0", y2: "5", stroke: hatch, strokeWidth: "1.4" })
+    ] }),
+    /* @__PURE__ */ jsxs11("linearGradient", { id: "blueBar", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx19("stop", { offset: "0%", stopColor: "#60a5fa" }),
+      /* @__PURE__ */ jsx19("stop", { offset: "100%", stopColor: "#2563eb" })
+    ] }),
+    /* @__PURE__ */ jsxs11("linearGradient", { id: "amberFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx19("stop", { offset: "0%", stopColor: isDark ? "#f59e0b" : "#d97706", stopOpacity: 0.16 }),
+      /* @__PURE__ */ jsx19("stop", { offset: "100%", stopColor: isDark ? "#f59e0b" : "#d97706", stopOpacity: 0.02 })
+    ] })
+  ] });
+}
+var METER_ROW_PX = 20;
+var METER_GAP_PX = 14;
+function MeterList({ visible, children }) {
+  const scrolls = Children.count(children) > visible;
+  return /* @__PURE__ */ jsx19("div", { className: "px-4 pb-5 pt-4 sm:px-5 sm:pb-6 sm:pt-5", children: /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: cn("space-y-3.5", scrolls && "overflow-y-auto pr-3"),
+      style: scrolls ? { maxHeight: visible * METER_ROW_PX + (visible - 1) * METER_GAP_PX } : void 0,
+      children
+    }
+  ) });
+}
+function TickMeter({
+  label,
+  value,
+  max,
+  color,
+  valueLabel
+}) {
+  const SEGMENTS = 26;
+  const filled = value > 0 ? Math.max(1, Math.round(value / Math.max(max, 1) * SEGMENTS)) : 0;
+  return /* @__PURE__ */ jsxs11("div", { className: "flex h-5 items-center gap-3", children: [
+    /* @__PURE__ */ jsx19("span", { className: "w-28 shrink-0 truncate text-[13px] font-medium text-ui-default", title: label, children: label }),
+    /* @__PURE__ */ jsx19("div", { className: "flex h-4 flex-1 items-stretch gap-[2.5px]", "aria-hidden": true, children: Array.from({ length: SEGMENTS }).map((_, i) => /* @__PURE__ */ jsx19(
+      "span",
+      {
+        className: "min-w-[2px] flex-1 rounded-[1px]",
+        style: { backgroundColor: i < filled ? color : "var(--ui-fill)" }
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx19("span", { className: "ui-font-mono w-14 shrink-0 text-right text-xs tabular-nums text-ui-default", children: valueLabel })
+  ] });
+}
+export {
+  Alert,
+  Badge,
+  BarSparkline,
+  Button,
+  CardDots,
+  ChartDefs,
+  ConfirmDialog,
+  CopyButton,
+  EmptyState,
+  GithubMark,
+  GraphShell,
+  Input,
+  LayerCard,
+  LegendChip,
+  LinkButton,
+  LoadError,
+  MeterList,
+  SectionCard,
+  Select,
+  Skeleton,
+  Switch,
+  Text,
+  TickMeter,
+  badgeVariants,
+  buttonVariants
+};
+//# sourceMappingURL=index.js.map