@annondeveloper/ui-kit 0.1.0

package/dist/index.js

@@ -0,0 +1,2812 @@
+import { cn, clamp } from './chunk-5OKSXPWK.js';
+export { Checkbox, FormInput, INPUT_CLS, LABEL_CLS, Select, TEXTAREA_CLS, ToggleSwitch, clamp, cn, defaultUtilColorMap, fmtBps, fmtBytes, fmtCompact, fmtDuration, fmtPct, fmtRelative, fmtSpeed, fmtUptime, fmtUtil, stripCidr, utilColor } from './chunk-5OKSXPWK.js';
+import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { Loader2, Check, Copy, AlertTriangle, Search, X, Filter, List, AlignJustify, LayoutList, Columns3, Download, ChevronUp, ChevronDown, ChevronsUpDown, TrendingUp, TrendingDown, ArrowDown, ChevronRight, GripVertical, Eye, EyeOff } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { Toaster as Toaster$1 } from 'sonner';
+export { toast } from 'sonner';
+import { useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+var variantClasses = {
+  primary: "bg-[hsl(var(--brand-primary))] text-[hsl(var(--text-on-brand))] hover:bg-[hsl(var(--brand-primary)/0.85)] active:bg-[hsl(var(--brand-primary)/0.75)]",
+  secondary: "bg-[hsl(var(--bg-elevated))] text-[hsl(var(--text-primary))] border border-[hsl(var(--border-default))] hover:bg-[hsl(var(--bg-overlay))] active:bg-[hsl(var(--border-subtle))]",
+  danger: "bg-[hsl(var(--status-critical))] text-[hsl(var(--text-on-brand))] hover:bg-[hsl(var(--status-critical)/0.85)] active:bg-[hsl(var(--status-critical)/0.75)]",
+  outline: "bg-transparent text-[hsl(var(--text-primary))] border border-[hsl(var(--border-default))] hover:bg-[hsl(var(--bg-elevated))] active:bg-[hsl(var(--bg-overlay))]",
+  ghost: "bg-transparent text-[hsl(var(--text-secondary))] hover:bg-[hsl(var(--bg-elevated))] hover:text-[hsl(var(--text-primary))] active:bg-[hsl(var(--bg-overlay))]"
+};
+var sizeClasses = {
+  sm: "h-8 px-3 text-xs gap-1.5 rounded-lg",
+  md: "h-9 px-4 text-sm gap-2 rounded-lg",
+  lg: "h-11 px-6 text-sm gap-2 rounded-xl",
+  icon: "h-9 w-9 rounded-lg"
+};
+var Button = forwardRef(
+  ({ variant = "primary", size = "md", loading, disabled, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      disabled: disabled || loading,
+      className: cn(
+        "inline-flex items-center justify-center font-medium transition-colors duration-150",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--brand-primary))] focus-visible:ring-offset-2 focus-visible:ring-offset-[hsl(var(--bg-base))]",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "cursor-pointer select-none",
+        variantClasses[variant],
+        sizeClasses[size],
+        className
+      ),
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+        children
+      ]
+    }
+  )
+);
+Button.displayName = "Button";
+var COLOR_MAP = {
+  brand: "bg-[hsl(var(--brand-primary))]/10 text-[hsl(var(--brand-primary))]",
+  blue: "bg-[hsl(var(--brand-secondary))]/10 text-[hsl(var(--brand-secondary))]",
+  green: "bg-[hsl(var(--status-ok))]/10 text-[hsl(var(--status-ok))]",
+  yellow: "bg-[hsl(var(--status-warning))]/10 text-[hsl(var(--status-warning))]",
+  red: "bg-[hsl(var(--status-critical))]/10 text-[hsl(var(--status-critical))]",
+  orange: "bg-[hsl(var(--status-warning))]/15 text-[hsl(var(--status-warning))]",
+  purple: "bg-[hsl(270,60%,60%)]/10 text-[hsl(270,60%,65%)]",
+  pink: "bg-[hsl(330,60%,60%)]/10 text-[hsl(330,60%,65%)]",
+  teal: "bg-[hsl(180,60%,40%)]/10 text-[hsl(180,60%,55%)]",
+  gray: "bg-[hsl(var(--bg-overlay))] text-[hsl(var(--text-secondary))]"
+};
+function Badge({
+  children,
+  color = "gray",
+  icon: Icon,
+  size = "sm",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: cn(
+    "inline-flex items-center gap-1 rounded-full font-medium whitespace-nowrap",
+    size === "xs" && "px-1.5 py-0.5 text-[10px]",
+    size === "sm" && "px-2 py-0.5 text-xs",
+    size === "md" && "px-2.5 py-1 text-xs",
+    COLOR_MAP[color],
+    className
+  ), children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { className: cn(size === "xs" ? "size-2.5" : "size-3") }),
+    children
+  ] });
+}
+function createBadgeVariant(config) {
+  const { colorMap, labelMap, defaultColor = "gray", defaultSize = "xs" } = config;
+  return function VariantBadge({ value, className }) {
+    const color = colorMap[value] ?? defaultColor;
+    const label = labelMap?.[value] ?? value.replace(/_/g, " ");
+    return /* @__PURE__ */ jsx(Badge, { color, size: defaultSize, className, children: label });
+  };
+}
+function FilterPill({ label, count, active, onClick, className }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "rounded-full px-3 py-1 text-xs transition-colors whitespace-nowrap",
+        active ? "bg-[hsl(var(--brand-primary))]/10 text-[hsl(var(--brand-primary))] font-medium" : "bg-[hsl(var(--bg-elevated))] text-[hsl(var(--text-secondary))] hover:bg-[hsl(var(--bg-overlay))]",
+        className
+      ),
+      children: [
+        label,
+        count != null && /* @__PURE__ */ jsx("span", { className: cn(
+          "ml-1.5 tabular-nums",
+          active ? "text-[hsl(var(--brand-primary))]/70" : "text-[hsl(var(--text-tertiary))]"
+        ), children: count })
+      ]
+    }
+  );
+}
+function EmptyState({ icon: Icon, title, description, actions, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden flex flex-col items-center justify-center rounded-2xl border border-dashed border-[hsl(var(--border-default))]",
+        "bg-[hsl(var(--bg-surface)/0.6)] backdrop-blur-xl px-6 py-12 text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-b from-[hsl(var(--brand-primary)/0.04)] to-transparent" }),
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_50%_0%,hsl(var(--brand-primary)/0.06),transparent_70%)]" }),
+        /* @__PURE__ */ jsx("div", { className: "relative mb-4 flex size-14 items-center justify-center rounded-2xl bg-[hsl(var(--bg-elevated))] border border-[hsl(var(--border-subtle)/0.6)] shadow-[0_1px_3px_hsl(0_0%_0%/0.12)]", children: /* @__PURE__ */ jsx(Icon, { className: "size-6 text-[hsl(var(--text-disabled))]" }) }),
+        /* @__PURE__ */ jsx("h3", { className: "relative text-heading-3 text-[hsl(var(--text-primary))] mb-1", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "relative text-body text-[hsl(var(--text-secondary))] max-w-sm", children: description }),
+        actions && /* @__PURE__ */ jsx("div", { className: "relative mt-6 flex gap-3", children: actions })
+      ]
+    }
+  );
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("skeleton-shimmer rounded-md", className),
+      ...props
+    }
+  );
+}
+function SkeletonText({ lines = 1, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      className: cn("h-3", i === lines - 1 && lines > 1 ? "w-4/5" : "w-full")
+    },
+    i
+  )) });
+}
+function SkeletonCard({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))] p-4 space-y-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "size-8 rounded-md" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-20" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-14 rounded-full" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 flex-1" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 flex-1" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 flex-1" })
+    ] })
+  ] });
+}
+function TruncatedText({ text, maxWidth = "100%", className = "" }) {
+  const ref = useRef(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (el) setIsTruncated(el.scrollWidth > el.clientWidth);
+  }, [text]);
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  const inner = /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: `block truncate ${className}`,
+      style: { maxWidth },
+      children: text
+    }
+  );
+  if (!isTruncated) return inner;
+  return /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: inner }),
+    /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsxs(
+      Tooltip.Content,
+      {
+        side: "top",
+        align: "start",
+        sideOffset: 6,
+        className: "z-50 max-w-[400px] rounded-lg border border-[hsl(var(--border-default))]\n              bg-[hsl(var(--bg-elevated))] px-3 py-2 shadow-lg\n              animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out\n              data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-small text-[hsl(var(--text-primary))] break-all", children: text }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex justify-end", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: handleCopy,
+              className: "flex items-center gap-1 rounded px-2 py-0.5\n                  text-[11px] text-[hsl(var(--brand-primary))]\n                  hover:bg-[hsl(var(--bg-surface))] transition-colors",
+              children: [
+                copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" }),
+                copied ? "Copied" : "Copy"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "fill-[hsl(var(--bg-elevated))]" })
+        ]
+      }
+    ) })
+  ] }) });
+}
+var variantStyles = {
+  danger: {
+    icon: "text-[hsl(var(--status-critical))] bg-[hsl(var(--status-critical))]/10",
+    button: "bg-[hsl(var(--status-critical))] hover:bg-[hsl(var(--status-critical))]/90 text-[hsl(var(--text-on-brand))]"
+  },
+  warning: {
+    icon: "text-[hsl(var(--status-warning))] bg-[hsl(var(--status-warning))]/10",
+    button: "bg-[hsl(var(--status-warning))] hover:bg-[hsl(var(--status-warning))]/90 text-[hsl(var(--text-on-brand))]"
+  },
+  default: {
+    icon: "text-[hsl(var(--brand-primary))] bg-[hsl(var(--brand-primary))]/10",
+    button: "bg-[hsl(var(--brand-primary))] hover:bg-[hsl(var(--brand-primary))]/90 text-[hsl(var(--text-on-brand))]"
+  }
+};
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "danger",
+  loading = false,
+  onConfirm
+}) {
+  const styles = variantStyles[variant];
+  return /* @__PURE__ */ jsx(AlertDialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(AlertDialog.Portal, { forceMount: true, children: [
+    /* @__PURE__ */ jsx(AlertDialog.Overlay, { asChild: true, children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.15 },
+        className: "fixed inset-0 z-50 bg-[hsl(var(--bg-base)/0.7)] backdrop-blur-sm"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AlertDialog.Content, { asChild: true, children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, scale: 0.95, y: 8 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.95, y: 8 },
+        transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
+        className: cn(
+          "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+          "w-full max-w-md p-6 rounded-2xl",
+          "border border-[hsl(var(--border-default))]",
+          "bg-[hsl(var(--bg-elevated))] shadow-2xl",
+          "focus:outline-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+            /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 p-2.5 rounded-xl h-fit", styles.icon), children: /* @__PURE__ */ jsx(AlertTriangle, { className: "w-5 h-5" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx(AlertDialog.Title, { className: "text-base font-semibold text-[hsl(var(--text-primary))]", children: title }),
+              /* @__PURE__ */ jsx(AlertDialog.Description, { className: "mt-2 text-sm text-[hsl(var(--text-secondary))] leading-relaxed", children: description })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3 mt-6", children: [
+            /* @__PURE__ */ jsx(
+              AlertDialog.Cancel,
+              {
+                className: cn(
+                  "px-4 py-2 text-sm font-medium rounded-lg",
+                  "border border-[hsl(var(--border-default))]",
+                  "text-[hsl(var(--text-primary))]",
+                  "hover:bg-[hsl(var(--bg-overlay))] transition-colors",
+                  "focus:outline-none focus:ring-2 focus:ring-[hsl(var(--brand-primary))]"
+                ),
+                children: cancelLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AlertDialog.Action,
+              {
+                onClick: (e) => {
+                  e.preventDefault();
+                  onConfirm();
+                },
+                disabled: loading,
+                className: cn(
+                  "px-4 py-2 text-sm font-medium rounded-lg transition-all",
+                  "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[hsl(var(--bg-elevated))]",
+                  styles.button,
+                  loading && "opacity-70 cursor-not-allowed"
+                ),
+                children: loading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
+                  confirmLabel
+                ] }) : confirmLabel
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] }) }) });
+}
+function easeOutCubic(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+function AnimatedCounter({
+  value,
+  duration = 400,
+  className,
+  format
+}) {
+  const reduced = useReducedMotion();
+  const prevRef = useRef(value);
+  const rafRef = useRef(null);
+  const [displayed, setDisplayed] = useState(value);
+  useEffect(() => {
+    const from = prevRef.current;
+    const to = value;
+    prevRef.current = value;
+    if (reduced || from === to) {
+      setDisplayed(to);
+      return;
+    }
+    const start = performance.now();
+    function tick(now) {
+      const elapsed = now - start;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = easeOutCubic(progress);
+      const current = from + (to - from) * eased;
+      setDisplayed(current);
+      if (progress < 1) {
+        rafRef.current = requestAnimationFrame(tick);
+      } else {
+        setDisplayed(to);
+      }
+    }
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, [value, duration, reduced]);
+  const formatted = format ? format(displayed) : Number.isInteger(value) ? Math.round(displayed).toString() : displayed.toFixed(
+    value.toString().split(".")[1]?.length ?? 1
+  );
+  return /* @__PURE__ */ jsx("span", { className: cn("tabular-nums", className), children: formatted });
+}
+function SuccessCheckmark({ size = 20, className }) {
+  const reduced = useReducedMotion();
+  return /* @__PURE__ */ jsxs(
+    motion.svg,
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      className,
+      initial: reduced ? false : { scale: 0, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      transition: { type: "spring", stiffness: 300, damping: 20 },
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.circle,
+          {
+            cx: "10",
+            cy: "10",
+            r: "9",
+            stroke: "hsl(var(--status-ok))",
+            strokeWidth: "1.5",
+            fill: "none",
+            initial: reduced ? false : { pathLength: 0 },
+            animate: { pathLength: 1 },
+            transition: { duration: 0.4, ease: "easeOut" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.path,
+          {
+            d: "M6 10l2.5 2.5L14 7.5",
+            stroke: "hsl(var(--status-ok))",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            fill: "none",
+            initial: reduced ? false : { pathLength: 0 },
+            animate: { pathLength: 1 },
+            transition: { duration: 0.3, delay: 0.2, ease: "easeOut" }
+          }
+        )
+      ]
+    }
+  );
+}
+var defaultStatusMap = {
+  ok: { label: "OK", dot: "bg-[hsl(var(--status-ok))]", text: "text-[hsl(var(--status-ok))]", bg: "bg-[hsl(var(--status-ok))]/10" },
+  active: { label: "Active", dot: "bg-[hsl(var(--status-ok))]", text: "text-[hsl(var(--status-ok))]", bg: "bg-[hsl(var(--status-ok))]/10" },
+  warning: { label: "Warning", dot: "bg-[hsl(var(--status-warning))]", text: "text-[hsl(var(--status-warning))]", bg: "bg-[hsl(var(--status-warning))]/10" },
+  critical: { label: "Critical", dot: "bg-[hsl(var(--status-critical))]", text: "text-[hsl(var(--status-critical))]", bg: "bg-[hsl(var(--status-critical))]/10" },
+  unknown: { label: "Unknown", dot: "bg-[hsl(var(--status-unknown))]", text: "text-[hsl(var(--status-unknown))]", bg: "bg-[hsl(var(--status-unknown))]/10" },
+  maintenance: { label: "Maintenance", dot: "bg-[hsl(var(--status-maintenance))]", text: "text-[hsl(var(--status-maintenance))]", bg: "bg-[hsl(var(--status-maintenance))]/10" },
+  stale: { label: "Stale", dot: "bg-[hsl(var(--status-warning))]", text: "text-[hsl(var(--status-warning))]", bg: "bg-[hsl(var(--status-warning))]/10" },
+  inactive: { label: "Inactive", dot: "bg-[hsl(var(--text-tertiary))]", text: "text-[hsl(var(--text-tertiary))]", bg: "bg-[hsl(var(--text-tertiary))]/10" },
+  decommissioned: { label: "Decommissioned", dot: "bg-[hsl(var(--text-disabled))]", text: "text-[hsl(var(--text-disabled))]", bg: "bg-[hsl(var(--text-disabled))]/10" },
+  pending: { label: "Pending", dot: "bg-[hsl(var(--status-warning))]", text: "text-[hsl(var(--status-warning))]", bg: "bg-[hsl(var(--status-warning))]/10" }
+};
+function StatusBadge({
+  status,
+  label,
+  size = "md",
+  pulse = false,
+  statusMap,
+  className
+}) {
+  const map = statusMap ?? defaultStatusMap;
+  const fallback = map["unknown"] ?? defaultStatusMap["unknown"];
+  const config = map[status] ?? fallback;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full font-medium",
+        size === "sm" ? "px-1.5 py-0.5 text-[0.6875rem]" : "px-2 py-1 text-[0.75rem]",
+        config.text,
+        config.bg,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("rounded-full shrink-0", size === "sm" ? "size-1.5" : "size-2", config.dot, pulse && "animate-pulse") }),
+        label ?? config.label
+      ]
+    }
+  );
+}
+var defaultPulseConfigMap = {
+  online: { dot: "bg-[hsl(var(--status-ok))]", ring: "bg-[hsl(var(--status-ok))]", pulse: true, fast: false },
+  degraded: { dot: "bg-[hsl(var(--status-warning))]", ring: "bg-[hsl(var(--status-warning))]", pulse: true, fast: true },
+  offline: { dot: "bg-[hsl(var(--status-critical))]", ring: "bg-[hsl(var(--status-critical))]", pulse: false, fast: false },
+  unknown: { dot: "bg-[hsl(var(--text-tertiary))]", ring: "bg-[hsl(var(--text-tertiary))]", pulse: false, fast: false }
+};
+function StatusPulse({ status, label = true, configMap, className }) {
+  const reduced = useReducedMotion();
+  const map = configMap ?? defaultPulseConfigMap;
+  const cfg = map[status] ?? map["unknown"] ?? defaultPulseConfigMap["unknown"];
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex size-2.5 shrink-0", children: [
+      cfg.pulse && !reduced && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "absolute inline-flex size-full rounded-full opacity-75 animate-pulse-ring",
+            cfg.ring,
+            cfg.fast && "[animation-duration:1s]"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          className: cn("relative inline-flex size-2.5 rounded-full", cfg.dot),
+          animate: { scale: 1 },
+          whileHover: { scale: reduced ? 1 : 1.3 },
+          transition: { type: "spring", stiffness: 400, damping: 15 }
+        }
+      )
+    ] }),
+    label && /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        initial: reduced ? {} : { opacity: 0 },
+        animate: { opacity: 1 },
+        className: "text-xs font-medium capitalize text-[hsl(var(--text-secondary))]",
+        children: status
+      },
+      status
+    )
+  ] });
+}
+function Toaster({ theme = "dark", position = "bottom-right", duration = 4e3 }) {
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      theme,
+      position,
+      richColors: true,
+      duration,
+      gap: 8,
+      toastOptions: {
+        style: {
+          background: "hsl(var(--bg-elevated))",
+          color: "hsl(var(--text-primary))",
+          border: "1px solid hsl(var(--border-default))",
+          borderRadius: "0.75rem",
+          boxShadow: "0 8px 32px hsl(0 0% 0% / 0.25)",
+          fontSize: "0.875rem"
+        },
+        classNames: {
+          success: "toast-success",
+          error: "toast-error",
+          warning: "toast-warning",
+          info: "toast-info"
+        }
+      }
+    }
+  );
+}
+var DENSITY_CLASSES = {
+  compact: "py-1.5 px-3",
+  comfortable: "py-3 px-4",
+  spacious: "py-4 px-5"
+};
+var DENSITY_ICONS = [
+  { key: "compact", icon: List, label: "Compact" },
+  { key: "comfortable", icon: AlignJustify, label: "Comfortable" },
+  { key: "spacious", icon: LayoutList, label: "Spacious" }
+];
+var PAGE_SIZES = [10, 25, 50, 100];
+var STORAGE_KEY = "ui-kit-table-density";
+var globalFilterFn = (row, _columnId, filterValue) => {
+  const search = String(filterValue).toLowerCase();
+  return row.getAllCells().some(
+    (cell) => String(cell.getValue() ?? "").toLowerCase().includes(search)
+  );
+};
+function exportToCsv(table, filename) {
+  const headers = table.getAllColumns().filter((c) => c.getIsVisible()).map((c) => c.id);
+  const rows = table.getFilteredRowModel().rows.map(
+    (row) => headers.map((h) => {
+      const val = row.getValue(h);
+      const str = String(val ?? "");
+      return str.includes(",") || str.includes('"') ? `"${str.replace(/"/g, '""')}"` : str;
+    }).join(",")
+  );
+  const csv = [headers.join(","), ...rows].join("\n");
+  const blob = new Blob([csv], { type: "text/csv" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${filename}.csv`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+function ColumnFilterPopover({ column, table }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const currentFilter = column.getFilterValue();
+  const isActive = currentFilter !== void 0 && currentFilter !== "" && !(Array.isArray(currentFilter) && currentFilter.length === 0);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  const { kind, uniqueValues } = useMemo(() => {
+    const rows = table.getPreFilteredRowModel().rows.slice(0, 100);
+    const vals = rows.map((r) => r.getValue(column.id)).filter((v) => v != null);
+    const nums = vals.filter((v) => typeof v === "number" || typeof v === "string" && v !== "" && !isNaN(Number(v)));
+    if (nums.length > vals.length * 0.7 && vals.length > 0) return { kind: "number", uniqueValues: [] };
+    const uniques = [...new Set(vals.map((v) => String(v)))];
+    if (uniques.length > 0 && uniques.length < 20) return { kind: "enum", uniqueValues: uniques.sort() };
+    return { kind: "text", uniqueValues: [] };
+  }, [table, column.id]);
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen((o) => !o);
+        },
+        className: "relative p-0.5 rounded hover:bg-[hsl(var(--bg-elevated)/0.5)] transition-colors",
+        "aria-label": `Filter ${column.id}`,
+        children: [
+          /* @__PURE__ */ jsx(Filter, { className: "h-3 w-3 text-[hsl(var(--text-tertiary))]" }),
+          isActive && /* @__PURE__ */ jsx("span", { className: "absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-[hsl(var(--brand-primary))]" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute top-full left-0 z-50 mt-1 min-w-[200px]\n            bg-[hsl(var(--bg-elevated))] border border-[hsl(var(--border-default))] rounded-lg shadow-lg p-3",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[hsl(var(--text-secondary))] uppercase tracking-wider", children: "Filter" }),
+            isActive && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => {
+                  column.setFilterValue(void 0);
+                  setOpen(false);
+                },
+                className: "text-[11px] text-[hsl(var(--brand-primary))] hover:underline",
+                children: "Clear"
+              }
+            )
+          ] }),
+          kind === "text" && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: currentFilter ?? "",
+              onChange: (e) => column.setFilterValue(e.target.value || void 0),
+              placeholder: "Search\\u2026",
+              className: "w-full rounded-md border border-[hsl(var(--border-subtle))]\n                bg-[hsl(var(--bg-surface))] px-2.5 py-1.5 text-small text-[hsl(var(--text-primary))]\n                placeholder:text-[hsl(var(--text-tertiary))] outline-none\n                focus:border-[hsl(var(--brand-primary))] transition-colors",
+              autoFocus: true
+            }
+          ),
+          kind === "number" && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: currentFilter?.[0] ?? "",
+                onChange: (e) => {
+                  const val = e.target.value === "" ? void 0 : Number(e.target.value);
+                  column.setFilterValue((old) => [val, old?.[1]]);
+                },
+                placeholder: "Min",
+                className: "w-full rounded-md border border-[hsl(var(--border-subtle))]\n                  bg-[hsl(var(--bg-surface))] px-2.5 py-1.5 text-small text-[hsl(var(--text-primary))]\n                  placeholder:text-[hsl(var(--text-tertiary))] outline-none\n                  focus:border-[hsl(var(--brand-primary))] transition-colors"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: currentFilter?.[1] ?? "",
+                onChange: (e) => {
+                  const val = e.target.value === "" ? void 0 : Number(e.target.value);
+                  column.setFilterValue((old) => [old?.[0], val]);
+                },
+                placeholder: "Max",
+                className: "w-full rounded-md border border-[hsl(var(--border-subtle))]\n                  bg-[hsl(var(--bg-surface))] px-2.5 py-1.5 text-small text-[hsl(var(--text-primary))]\n                  placeholder:text-[hsl(var(--text-tertiary))] outline-none\n                  focus:border-[hsl(var(--brand-primary))] transition-colors"
+              }
+            )
+          ] }),
+          kind === "enum" && /* @__PURE__ */ jsx("div", { className: "max-h-[200px] overflow-y-auto space-y-1", children: uniqueValues.map((val) => {
+            const selected = Array.isArray(currentFilter) ? currentFilter.includes(val) : false;
+            return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 rounded px-1.5 py-1\n                    hover:bg-[hsl(var(--bg-surface)/0.5)] cursor-pointer transition-colors", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selected,
+                  onChange: () => {
+                    const prev = Array.isArray(currentFilter) ? currentFilter : [];
+                    const next = selected ? prev.filter((v) => v !== val) : [...prev, val];
+                    column.setFilterValue(next.length > 0 ? next : void 0);
+                  },
+                  className: "rounded border-[hsl(var(--border-default))] accent-[hsl(var(--brand-primary))]"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-small text-[hsl(var(--text-primary))] truncate", children: val })
+            ] }, val);
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+function ColumnPicker({ table, onClose }) {
+  const ref = useRef(null);
+  const [dragIdx, setDragIdx] = useState(null);
+  useEffect(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onClose]);
+  const allColumns = table.getAllLeafColumns();
+  const handleDragStart = (idx) => setDragIdx(idx);
+  const handleDragOver = (e, idx) => {
+    e.preventDefault();
+    if (dragIdx === null || dragIdx === idx) return;
+    const order = table.getState().columnOrder.length > 0 ? [...table.getState().columnOrder] : allColumns.map((c) => c.id);
+    const [moved] = order.splice(dragIdx, 1);
+    if (moved !== void 0) order.splice(idx, 0, moved);
+    table.setColumnOrder(order);
+    setDragIdx(idx);
+  };
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref,
+      initial: { opacity: 0, y: -4 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -4 },
+      transition: { duration: 0.12 },
+      className: cn(
+        "absolute right-0 top-full z-50 mt-1 w-56 rounded-xl overflow-hidden",
+        "border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-elevated))] shadow-xl"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-b border-[hsl(var(--border-subtle)/0.5)]", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-[hsl(var(--text-tertiary))]", children: "Columns" }) }),
+        /* @__PURE__ */ jsx("div", { className: "max-h-72 overflow-y-auto p-1", children: allColumns.map((col, idx) => {
+          if (!col.getCanHide()) return null;
+          const visible = col.getIsVisible();
+          const header = typeof col.columnDef.header === "string" ? col.columnDef.header : col.id;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              draggable: true,
+              onDragStart: () => handleDragStart(idx),
+              onDragOver: (e) => handleDragOver(e, idx),
+              onDragEnd: () => setDragIdx(null),
+              className: cn(
+                "flex items-center gap-2 rounded-lg px-2 py-1.5 text-small cursor-grab",
+                "hover:bg-[hsl(var(--bg-surface)/0.7)] transition-colors",
+                dragIdx === idx && "bg-[hsl(var(--brand-primary)/0.1)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(GripVertical, { className: "h-3 w-3 text-[hsl(var(--text-disabled))] shrink-0" }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => col.toggleVisibility(),
+                    className: "flex items-center gap-2 flex-1 text-left",
+                    children: [
+                      visible ? /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5 text-[hsl(var(--brand-primary))]" }) : /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5 text-[hsl(var(--text-disabled))]" }),
+                      /* @__PURE__ */ jsx("span", { className: cn(
+                        "truncate",
+                        visible ? "text-[hsl(var(--text-primary))]" : "text-[hsl(var(--text-disabled))]"
+                      ), children: header })
+                    ]
+                  }
+                )
+              ]
+            },
+            col.id
+          );
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-t border-[hsl(var(--border-subtle)/0.5)]", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              table.toggleAllColumnsVisible(true);
+              table.setColumnOrder([]);
+            },
+            className: "text-[10px] text-[hsl(var(--brand-primary))] hover:text-[hsl(var(--text-primary))] transition-colors",
+            children: "Reset to defaults"
+          }
+        ) })
+      ]
+    }
+  );
+}
+function DataTable({
+  columns,
+  data,
+  isLoading = false,
+  emptyState: emptyStateProps,
+  searchPlaceholder = "Search...",
+  onRowClick,
+  defaultSort,
+  defaultPageSize = 25,
+  exportFilename,
+  stickyFirstColumn = false,
+  density: densityProp
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const [density, setDensity] = useState(() => {
+    if (densityProp) return densityProp;
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored && stored in DENSITY_CLASSES) return stored;
+    }
+    return "comfortable";
+  });
+  const handleDensity = useCallback((d) => {
+    setDensity(d);
+    localStorage.setItem(STORAGE_KEY, d);
+  }, []);
+  const [sorting, setSorting] = useState(
+    defaultSort ? [{ id: defaultSort.id, desc: defaultSort.desc }] : []
+  );
+  const [columnFilters, setColumnFilters] = useState([]);
+  const [globalFilter, setGlobalFilter] = useState("");
+  const [columnVisibility, setColumnVisibility] = useState({});
+  const [columnOrder, setColumnOrder] = useState([]);
+  const [columnPickerOpen, setColumnPickerOpen] = useState(false);
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting, columnFilters, globalFilter, columnVisibility, columnOrder },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnOrderChange: setColumnOrder,
+    globalFilterFn,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: { pagination: { pageSize: defaultPageSize } }
+  });
+  const activeFilterCount = columnFilters.length;
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const startRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
+  const pageCount = table.getPageCount();
+  const rowVariants = useMemo(() => ({
+    hidden: { opacity: 0, y: 4 },
+    visible: (i) => ({
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: Math.min(i, 20) * 0.02,
+        duration: 0.15
+      }
+    })
+  }), []);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-[hsl(var(--border-subtle)/0.5)]\n        bg-[hsl(var(--bg-surface)/0.6)] backdrop-blur-xl overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4 border-b border-[hsl(var(--border-subtle)/0.3)]", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-64 rounded-lg" }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-24 rounded-lg" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "divide-y divide-[hsl(var(--border-subtle)/0.3)]", children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: cn("flex gap-4", DENSITY_CLASSES.comfortable), children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" })
+      ] }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-[hsl(var(--border-subtle)/0.5)]\n      bg-[hsl(var(--bg-surface)/0.6)] backdrop-blur-xl overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 px-4 py-3\n        border-b border-[hsl(var(--border-subtle)/0.3)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-[200px] max-w-sm", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4\n            text-[hsl(var(--text-tertiary))]" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: globalFilter,
+            onChange: (e) => setGlobalFilter(e.target.value),
+            placeholder: searchPlaceholder,
+            className: "w-full rounded-lg border border-[hsl(var(--border-subtle))]\n              bg-[hsl(var(--bg-surface))] pl-9 pr-3 py-2 text-small\n              text-[hsl(var(--text-primary))] placeholder:text-[hsl(var(--text-tertiary))]\n              outline-none focus:border-[hsl(var(--brand-primary))] transition-colors"
+          }
+        ),
+        globalFilter && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setGlobalFilter(""),
+            className: "absolute right-2.5 top-1/2 -translate-y-1/2 p-0.5 rounded\n                hover:bg-[hsl(var(--bg-elevated)/0.5)] transition-colors",
+            children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 text-[hsl(var(--text-tertiary))]" })
+          }
+        )
+      ] }),
+      activeFilterCount > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full\n            bg-[hsl(var(--brand-primary)/0.15)] px-2.5 py-1 text-[11px] font-medium\n            text-[hsl(var(--brand-primary))]", children: [
+        /* @__PURE__ */ jsx(Filter, { className: "h-3 w-3" }),
+        activeFilterCount,
+        " filter",
+        activeFilterCount > 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-lg border border-[hsl(var(--border-subtle))]\n          bg-[hsl(var(--bg-surface))] p-0.5", children: DENSITY_ICONS.map(({ key, icon: Icon, label }) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => handleDensity(key),
+          title: label,
+          className: cn(
+            "p-1.5 rounded-md transition-colors",
+            density === key ? "bg-[hsl(var(--brand-primary)/0.2)] text-[hsl(var(--brand-primary))]" : "text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-secondary))]"
+          ),
+          children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" })
+        },
+        key
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setColumnPickerOpen((o) => !o),
+            className: cn(
+              "flex items-center gap-1.5 rounded-lg border border-[hsl(var(--border-subtle))]",
+              "bg-[hsl(var(--bg-surface))] px-3 py-1.5 text-small text-[hsl(var(--text-secondary))]",
+              "hover:bg-[hsl(var(--bg-elevated)/0.5)] hover:text-[hsl(var(--text-primary))] transition-colors"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Columns3, { className: "h-3.5 w-3.5" }),
+              "Columns"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: columnPickerOpen && /* @__PURE__ */ jsx(ColumnPicker, { table, onClose: () => setColumnPickerOpen(false) }) })
+      ] }),
+      exportFilename && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => exportToCsv(table, exportFilename),
+          className: "flex items-center gap-1.5 rounded-lg border border-[hsl(var(--border-subtle))]\n              bg-[hsl(var(--bg-surface))] px-3 py-1.5 text-small text-[hsl(var(--text-secondary))]\n              hover:bg-[hsl(var(--bg-elevated)/0.5)] hover:text-[hsl(var(--text-primary))]\n              transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" }),
+            "Export"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-[hsl(var(--text-tertiary))] tabular-nums", children: [
+        totalRows,
+        " row",
+        totalRows !== 1 ? "s" : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("overflow-x-auto", stickyFirstColumn && "relative"), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-small", children: [
+      /* @__PURE__ */ jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "bg-[hsl(var(--bg-elevated)/0.3)]", children: headerGroup.headers.map((header, colIdx) => {
+        const canSort = header.column.getCanSort();
+        const sorted = header.column.getIsSorted();
+        return /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: cn(
+              DENSITY_CLASSES[density],
+              "text-left text-[11px] font-semibold uppercase tracking-wider",
+              "text-[hsl(var(--text-tertiary))] select-none whitespace-nowrap",
+              "border-b border-[hsl(var(--border-subtle)/0.3)]",
+              stickyFirstColumn && colIdx === 0 && "sticky left-0 z-10 bg-[hsl(var(--bg-elevated)/0.8)] backdrop-blur-sm"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              canSort ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: header.column.getToggleSortingHandler(),
+                  className: "flex items-center gap-1 hover:text-[hsl(var(--text-secondary))] transition-colors",
+                  children: [
+                    header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                    sorted === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5 text-[hsl(var(--brand-primary))]" }) : sorted === "desc" ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-[hsl(var(--brand-primary))]" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3 w-3 opacity-40" })
+                  ]
+                }
+              ) : header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+              header.column.getCanFilter() && /* @__PURE__ */ jsx(ColumnFilterPopover, { column: header.column, table })
+            ] })
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "p-0", children: emptyStateProps ? /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          icon: emptyStateProps.icon,
+          title: emptyStateProps.title,
+          description: emptyStateProps.description,
+          className: "border-0 rounded-none"
+        }
+      ) : /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          icon: Search,
+          title: "No results",
+          description: "No rows match your search or filter criteria.",
+          className: "border-0 rounded-none"
+        }
+      ) }) }) : table.getRowModel().rows.map((row, i) => /* @__PURE__ */ jsx(
+        motion.tr,
+        {
+          custom: i,
+          variants: prefersReducedMotion ? void 0 : rowVariants,
+          initial: prefersReducedMotion ? void 0 : "hidden",
+          animate: prefersReducedMotion ? void 0 : "visible",
+          exit: prefersReducedMotion ? void 0 : { opacity: 0 },
+          onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+          className: cn(
+            "border-b border-[hsl(var(--border-subtle)/0.3)]",
+            "transition-colors",
+            onRowClick && "cursor-pointer hover:bg-[hsl(var(--bg-elevated)/0.5)]"
+          ),
+          children: row.getVisibleCells().map((cell, colIdx) => /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cn(
+                DENSITY_CLASSES[density],
+                "text-[hsl(var(--text-primary))]",
+                stickyFirstColumn && colIdx === 0 && "sticky left-0 z-10 bg-[hsl(var(--bg-surface)/0.9)] backdrop-blur-sm"
+              ),
+              children: flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          ))
+        },
+        row.id
+      )) }) })
+    ] }) }),
+    totalRows > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 px-4 py-3\n          border-t border-[hsl(var(--border-subtle)/0.3)]", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-[12px] text-[hsl(var(--text-tertiary))] tabular-nums", children: [
+        "Showing ",
+        startRow,
+        "\u2013",
+        endRow,
+        " of ",
+        totalRows
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: pageSize,
+            onChange: (e) => table.setPageSize(Number(e.target.value)),
+            className: "rounded-md border border-[hsl(var(--border-subtle))]\n                bg-[hsl(var(--bg-surface))] px-2 py-1 text-[12px]\n                text-[hsl(var(--text-secondary))] outline-none\n                focus:border-[hsl(var(--brand-primary))] transition-colors",
+            children: PAGE_SIZES.map((size) => /* @__PURE__ */ jsxs("option", { value: size, children: [
+              size,
+              " / page"
+            ] }, size))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            PaginationButton,
+            {
+              onClick: () => table.setPageIndex(0),
+              disabled: !table.getCanPreviousPage(),
+              children: "First"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PaginationButton,
+            {
+              onClick: () => table.previousPage(),
+              disabled: !table.getCanPreviousPage(),
+              children: "Prev"
+            }
+          ),
+          generatePageNumbers(pageIndex, pageCount).map(
+            (p, idx) => p === -1 ? /* @__PURE__ */ jsx("span", { className: "px-1 text-[hsl(var(--text-tertiary))]", children: "..." }, `ellipsis-${idx}`) : /* @__PURE__ */ jsx(
+              PaginationButton,
+              {
+                onClick: () => table.setPageIndex(p),
+                active: p === pageIndex,
+                children: p + 1
+              },
+              p
+            )
+          ),
+          /* @__PURE__ */ jsx(
+            PaginationButton,
+            {
+              onClick: () => table.nextPage(),
+              disabled: !table.getCanNextPage(),
+              children: "Next"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PaginationButton,
+            {
+              onClick: () => table.setPageIndex(pageCount - 1),
+              disabled: !table.getCanNextPage(),
+              children: "Last"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function PaginationButton({ children, onClick, disabled, active }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: cn(
+        "rounded-md px-2 py-1 text-[12px] font-medium transition-colors tabular-nums",
+        active ? "bg-[hsl(var(--brand-primary)/0.2)] text-[hsl(var(--brand-primary))]" : "text-[hsl(var(--text-secondary))] hover:bg-[hsl(var(--bg-elevated)/0.5)] hover:text-[hsl(var(--text-primary))]",
+        disabled && "opacity-40 pointer-events-none"
+      ),
+      children
+    }
+  );
+}
+function generatePageNumbers(current, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i);
+  const pages = [];
+  const addPage = (p) => {
+    if (!pages.includes(p)) pages.push(p);
+  };
+  addPage(0);
+  for (let i = Math.max(1, current - 1); i <= Math.min(total - 2, current + 1); i++) addPage(i);
+  addPage(total - 1);
+  const result = [];
+  for (let i = 0; i < pages.length; i++) {
+    if (i > 0 && pages[i] - pages[i - 1] > 1) result.push(-1);
+    result.push(pages[i]);
+  }
+  return result;
+}
+var sizeClasses2 = {
+  sm: "text-xs px-3 py-1.5 gap-1.5",
+  md: "text-sm px-4 py-2 gap-2"
+};
+function Tabs({
+  tabs,
+  value,
+  onChange,
+  variant = "underline",
+  size = "md",
+  className
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const tabListRef = useRef(null);
+  const enabledTabs = tabs.filter((t) => !t.disabled);
+  const handleKeyDown = useCallback(
+    (e) => {
+      const currentIdx = enabledTabs.findIndex((t) => t.value === value);
+      if (currentIdx === -1) return;
+      let nextIdx = null;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        nextIdx = (currentIdx + 1) % enabledTabs.length;
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        nextIdx = (currentIdx - 1 + enabledTabs.length) % enabledTabs.length;
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        nextIdx = 0;
+      } else if (e.key === "End") {
+        e.preventDefault();
+        nextIdx = enabledTabs.length - 1;
+      }
+      if (nextIdx !== null) {
+        onChange(enabledTabs[nextIdx].value);
+        const buttons = tabListRef.current?.querySelectorAll('[role="tab"]:not([disabled])');
+        buttons?.[nextIdx]?.focus();
+      }
+    },
+    [enabledTabs, value, onChange]
+  );
+  const listCls = cn(
+    "inline-flex items-center",
+    variant === "underline" && "border-b border-[hsl(var(--border-subtle))] gap-0",
+    variant === "pills" && "gap-1 p-1 rounded-xl bg-[hsl(var(--bg-surface))]",
+    variant === "enclosed" && "gap-0 border-b border-[hsl(var(--border-subtle))]",
+    className
+  );
+  const layoutId = `tabs-indicator-${variant}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: tabListRef,
+      role: "tablist",
+      "aria-orientation": "horizontal",
+      onKeyDown: handleKeyDown,
+      className: listCls,
+      children: tabs.map((tab) => {
+        const isActive = tab.value === value;
+        const Icon = tab.icon;
+        const buttonCls = cn(
+          "relative inline-flex items-center justify-center font-medium transition-colors duration-150",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--brand-primary))] focus-visible:ring-offset-1 focus-visible:ring-offset-[hsl(var(--bg-base))]",
+          "disabled:pointer-events-none disabled:opacity-40",
+          "cursor-pointer select-none whitespace-nowrap",
+          sizeClasses2[size],
+          // variant-specific active/inactive
+          variant === "underline" && [
+            isActive ? "text-[hsl(var(--text-primary))]" : "text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-secondary))]"
+          ],
+          variant === "pills" && [
+            isActive ? "text-[hsl(var(--text-primary))]" : "text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-secondary))] hover:bg-[hsl(var(--bg-elevated)/0.5)]",
+            "rounded-lg"
+          ],
+          variant === "enclosed" && [
+            isActive ? "text-[hsl(var(--text-primary))] bg-[hsl(var(--bg-elevated))]" : "text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-secondary))]",
+            "rounded-t-lg"
+          ]
+        );
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            role: "tab",
+            "aria-selected": isActive,
+            "aria-controls": `tabpanel-${tab.value}`,
+            tabIndex: isActive ? 0 : -1,
+            disabled: tab.disabled,
+            onClick: () => onChange(tab.value),
+            className: buttonCls,
+            children: [
+              Icon && /* @__PURE__ */ jsx(Icon, { className: size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4" }),
+              tab.label,
+              isActive && variant === "underline" && /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  layoutId,
+                  className: "absolute bottom-0 left-0 right-0 h-0.5 bg-[hsl(var(--brand-primary))] rounded-full",
+                  transition: prefersReducedMotion ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 35 }
+                }
+              ),
+              isActive && variant === "pills" && /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  layoutId,
+                  className: "absolute inset-0 rounded-lg bg-[hsl(var(--bg-elevated))] -z-10",
+                  transition: prefersReducedMotion ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 35 }
+                }
+              ),
+              isActive && variant === "enclosed" && /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  layoutId,
+                  className: "absolute bottom-0 left-0 right-0 h-0.5 bg-[hsl(var(--brand-primary))] rounded-full",
+                  transition: prefersReducedMotion ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 35 }
+                }
+              )
+            ]
+          },
+          tab.value
+        );
+      })
+    }
+  );
+}
+var contentVariants = {
+  hidden: { opacity: 0, scale: 0.95, y: -4 },
+  visible: { opacity: 1, scale: 1, y: 0 },
+  exit: { opacity: 0, scale: 0.95, y: -4 }
+};
+function DropdownMenu({ trigger, items, align = "end", className }) {
+  const prefersReducedMotion = useReducedMotion();
+  return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenuPrimitive.Content,
+      {
+        align,
+        sideOffset: 6,
+        asChild: true,
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: "hidden",
+            animate: "visible",
+            exit: "exit",
+            variants: contentVariants,
+            transition: prefersReducedMotion ? { duration: 0 } : { duration: 0.15, ease: [0.16, 1, 0.3, 1] },
+            className: cn(
+              "z-50 min-w-[160px] overflow-hidden rounded-xl p-1",
+              "border border-[hsl(var(--border-default))]",
+              "bg-[hsl(var(--bg-elevated))] shadow-xl",
+              "focus:outline-none",
+              className
+            ),
+            children: items.map((item, i) => {
+              const Icon = item.icon;
+              const isDanger = item.variant === "danger";
+              return /* @__PURE__ */ jsxs(
+                DropdownMenuPrimitive.Item,
+                {
+                  disabled: item.disabled,
+                  onSelect: item.onClick,
+                  className: cn(
+                    "relative flex items-center gap-2.5 px-3 py-2 text-sm rounded-lg",
+                    "outline-none cursor-pointer select-none transition-colors duration-100",
+                    "data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+                    isDanger ? "text-[hsl(var(--status-critical))] data-[highlighted]:bg-[hsl(var(--status-critical)/0.1)]" : "text-[hsl(var(--text-primary))] data-[highlighted]:bg-[hsl(var(--bg-overlay))]"
+                  ),
+                  children: [
+                    Icon && /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        className: cn(
+                          "h-4 w-4 shrink-0",
+                          isDanger ? "text-[hsl(var(--status-critical))]" : "text-[hsl(var(--text-secondary))]"
+                        )
+                      }
+                    ),
+                    item.label
+                  ]
+                },
+                i
+              );
+            })
+          }
+        )
+      }
+    ) }) })
+  ] });
+}
+var slideVariants = {
+  right: { initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" } },
+  left: { initial: { x: "-100%" }, animate: { x: 0 }, exit: { x: "-100%" } },
+  top: { initial: { y: "-100%" }, animate: { y: 0 }, exit: { y: "-100%" } },
+  bottom: { initial: { y: "100%" }, animate: { y: 0 }, exit: { y: "100%" } }
+};
+var positionClasses = {
+  right: "inset-y-0 right-0",
+  left: "inset-y-0 left-0",
+  top: "inset-x-0 top-0",
+  bottom: "inset-x-0 bottom-0"
+};
+function Sheet({
+  open,
+  onClose,
+  side = "right",
+  title,
+  description,
+  width = "max-w-md",
+  children,
+  className
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const panelRef = useRef(null);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose]
+  );
+  useEffect(() => {
+    if (open) {
+      document.addEventListener("keydown", handleKeyDown);
+      const prevOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        document.body.style.overflow = prevOverflow;
+      };
+    }
+  }, [open, handleKeyDown]);
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => {
+        panelRef.current?.focus();
+      });
+    }
+  }, [open]);
+  const isHorizontal = side === "left" || side === "right";
+  const variants = slideVariants[side];
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: prefersReducedMotion ? { duration: 0 } : { duration: 0.2 },
+        className: "absolute inset-0 bg-[hsl(var(--bg-base)/0.6)] backdrop-blur-sm",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: panelRef,
+        tabIndex: -1,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title,
+        initial: variants.initial,
+        animate: variants.animate,
+        exit: variants.exit,
+        transition: prefersReducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 35 },
+        className: cn(
+          "absolute flex flex-col",
+          "bg-[hsl(var(--bg-surface))] border-[hsl(var(--border-default))]",
+          "shadow-2xl focus:outline-none",
+          positionClasses[side],
+          isHorizontal ? cn("w-full h-full", width, side === "right" ? "border-l" : "border-r") : cn("h-auto w-full", side === "top" ? "border-b" : "border-t"),
+          className
+        ),
+        children: [
+          (title || description) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 px-6 pt-6 pb-4 border-b border-[hsl(var(--border-subtle))]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              title && /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[hsl(var(--text-primary))]", children: title }),
+              description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[hsl(var(--text-secondary))]", children: description })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onClose,
+                className: cn(
+                  "shrink-0 p-1.5 rounded-lg transition-colors",
+                  "text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-primary))]",
+                  "hover:bg-[hsl(var(--bg-elevated))]",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--brand-primary))]"
+                ),
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children })
+        ]
+      }
+    )
+  ] }) });
+}
+var variantColors = {
+  default: "bg-[hsl(var(--brand-primary))]",
+  success: "bg-[hsl(var(--status-ok))]",
+  warning: "bg-[hsl(var(--status-warning))]",
+  danger: "bg-[hsl(var(--status-critical))]"
+};
+var sizeClasses3 = {
+  sm: "h-1.5",
+  md: "h-2.5",
+  lg: "h-4"
+};
+function Progress({
+  value,
+  max = 100,
+  label,
+  showValue = false,
+  variant = "default",
+  size = "md",
+  animated = true,
+  indeterminate = false,
+  className
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const pct = Math.min(100, Math.max(0, value / max * 100));
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[hsl(var(--text-secondary))]", children: label }),
+      showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium tabular-nums text-[hsl(var(--text-secondary))]", children: [
+        Math.round(pct),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": indeterminate ? void 0 : pct,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label,
+        className: cn(
+          "w-full overflow-hidden rounded-full bg-[hsl(var(--bg-overlay))]",
+          sizeClasses3[size]
+        ),
+        children: indeterminate ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "h-full w-1/3 rounded-full",
+              variantColors[variant],
+              prefersReducedMotion ? "" : "animate-shimmer"
+            ),
+            style: prefersReducedMotion ? { width: "33%" } : {
+              animation: "indeterminate-slide 1.5s ease-in-out infinite"
+            }
+          }
+        ) : animated && !prefersReducedMotion ? /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: cn("h-full rounded-full", variantColors[variant]),
+            initial: { width: 0 },
+            animate: { width: `${pct}%` },
+            transition: { type: "spring", stiffness: 100, damping: 20 }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("h-full rounded-full transition-[width] duration-300", variantColors[variant]),
+            style: { width: `${pct}%` }
+          }
+        )
+      }
+    ),
+    indeterminate && !prefersReducedMotion && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes indeterminate-slide {
+            0%   { transform: translateX(-100%); }
+            50%  { transform: translateX(200%); }
+            100% { transform: translateX(-100%); }
+          }
+        ` })
+  ] });
+}
+var sizeClasses4 = {
+  xs: { root: "h-6 w-6", text: "text-[10px]", dot: "h-2 w-2 -bottom-0 -right-0 ring-1" },
+  sm: { root: "h-8 w-8", text: "text-xs", dot: "h-2.5 w-2.5 -bottom-0.5 -right-0.5 ring-[1.5px]" },
+  md: { root: "h-10 w-10", text: "text-sm", dot: "h-3 w-3 -bottom-0.5 -right-0.5 ring-2" },
+  lg: { root: "h-12 w-12", text: "text-base", dot: "h-3.5 w-3.5 -bottom-0.5 -right-0.5 ring-2" },
+  xl: { root: "h-16 w-16", text: "text-lg", dot: "h-4 w-4 -bottom-0.5 -right-0.5 ring-2" }
+};
+var statusColors = {
+  online: "bg-[hsl(var(--status-ok))]",
+  offline: "bg-[hsl(var(--text-disabled))]",
+  busy: "bg-[hsl(var(--status-critical))]",
+  away: "bg-[hsl(var(--status-warning))]"
+};
+function deriveInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return name.slice(0, 2).toUpperCase();
+}
+function Avatar({
+  src,
+  alt,
+  fallback,
+  size = "md",
+  status,
+  className
+}) {
+  const [imgError, setImgError] = useState(false);
+  const s = sizeClasses4[size];
+  const initials = fallback ?? deriveInitials(alt);
+  const showImage = src && !imgError;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex shrink-0", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          s.root,
+          "rounded-full overflow-hidden",
+          "flex items-center justify-center",
+          !showImage && "bg-[hsl(var(--bg-overlay))]"
+        ),
+        children: showImage ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt,
+            onError: () => setImgError(true),
+            className: "h-full w-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              s.text,
+              "font-semibold text-[hsl(var(--text-secondary))] select-none"
+            ),
+            children: initials
+          }
+        )
+      }
+    ),
+    status && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute rounded-full ring-[hsl(var(--bg-surface))]",
+          s.dot,
+          statusColors[status]
+        ),
+        "aria-label": status
+      }
+    )
+  ] });
+}
+var contentVariants2 = {
+  hidden: { opacity: 0, scale: 0.96, y: -2 },
+  visible: { opacity: 1, scale: 1, y: 0 },
+  exit: { opacity: 0, scale: 0.96, y: -2 }
+};
+function Popover({ trigger, children, side = "bottom", align = "center", className }) {
+  const prefersReducedMotion = useReducedMotion();
+  return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        side,
+        align,
+        sideOffset: 8,
+        asChild: true,
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: "hidden",
+            animate: "visible",
+            exit: "exit",
+            variants: contentVariants2,
+            transition: prefersReducedMotion ? { duration: 0 } : { duration: 0.15, ease: [0.16, 1, 0.3, 1] },
+            className: cn(
+              "z-50 rounded-xl p-4",
+              "border border-[hsl(var(--border-default))]",
+              "bg-[hsl(var(--bg-elevated))] shadow-xl",
+              "focus:outline-none",
+              className
+            ),
+            children: [
+              children,
+              /* @__PURE__ */ jsx(
+                PopoverPrimitive.Arrow,
+                {
+                  className: "fill-[hsl(var(--bg-elevated))]",
+                  width: 12,
+                  height: 6
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) }) })
+  ] });
+}
+function Slider({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = false,
+  className
+}) {
+  const trackRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const pct = max === min ? 0 : (value - min) / (max - min) * 100;
+  const clampToStep = useCallback(
+    (raw) => {
+      const clamped = Math.min(max, Math.max(min, raw));
+      const stepped = Math.round((clamped - min) / step) * step + min;
+      return Math.min(max, Math.max(min, parseFloat(stepped.toPrecision(10))));
+    },
+    [min, max, step]
+  );
+  const getValueFromPosition = useCallback(
+    (clientX) => {
+      const track = trackRef.current;
+      if (!track) return value;
+      const rect = track.getBoundingClientRect();
+      const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      return clampToStep(min + ratio * (max - min));
+    },
+    [min, max, value, clampToStep]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsDragging(true);
+      onChange(getValueFromPosition(e.clientX));
+      const handleMouseMove = (ev) => {
+        onChange(getValueFromPosition(ev.clientX));
+      };
+      const handleMouseUp = () => {
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [getValueFromPosition, onChange]
+  );
+  const handleTouchStart = useCallback(
+    (e) => {
+      setIsDragging(true);
+      if (e.touches[0]) {
+        onChange(getValueFromPosition(e.touches[0].clientX));
+      }
+      const handleTouchMove = (ev) => {
+        if (ev.touches[0]) {
+          onChange(getValueFromPosition(ev.touches[0].clientX));
+        }
+      };
+      const handleTouchEnd = () => {
+        setIsDragging(false);
+        document.removeEventListener("touchmove", handleTouchMove);
+        document.removeEventListener("touchend", handleTouchEnd);
+      };
+      document.addEventListener("touchmove", handleTouchMove);
+      document.addEventListener("touchend", handleTouchEnd);
+    },
+    [getValueFromPosition, onChange]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      let newValue = value;
+      if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        newValue = clampToStep(value + step);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        newValue = clampToStep(value - step);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        newValue = min;
+      } else if (e.key === "End") {
+        e.preventDefault();
+        newValue = max;
+      }
+      if (newValue !== value) onChange(newValue);
+    },
+    [value, min, max, step, clampToStep, onChange]
+  );
+  const showTooltip = isDragging || isHovering;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[hsl(var(--text-secondary))]", children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium tabular-nums text-[hsl(var(--text-secondary))]", children: value })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: trackRef,
+        role: "slider",
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-label": label,
+        tabIndex: 0,
+        onMouseDown: handleMouseDown,
+        onTouchStart: handleTouchStart,
+        onKeyDown: handleKeyDown,
+        onMouseEnter: () => setIsHovering(true),
+        onMouseLeave: () => setIsHovering(false),
+        className: cn(
+          "relative h-6 w-full cursor-pointer select-none",
+          "focus-visible:outline-none",
+          "group"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 -translate-y-1/2 w-full h-2 rounded-full bg-[hsl(var(--bg-overlay))]", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-y-0 left-0 rounded-full bg-[hsl(var(--brand-primary))]",
+              style: { width: `${pct}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute top-1/2 -translate-y-1/2 -translate-x-1/2",
+                "h-5 w-5 rounded-full",
+                "bg-[hsl(var(--text-on-brand))] border-2 border-[hsl(var(--brand-primary))]",
+                "shadow-md transition-transform duration-100",
+                isDragging && "scale-110",
+                "group-focus-visible:ring-2 group-focus-visible:ring-[hsl(var(--brand-primary))] group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-[hsl(var(--bg-base))]"
+              ),
+              style: { left: `${pct}%` },
+              children: showTooltip && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute -top-8 left-1/2 -translate-x-1/2",
+                    "px-2 py-0.5 rounded-md text-xs font-medium tabular-nums",
+                    "bg-[hsl(var(--bg-elevated))] text-[hsl(var(--text-primary))]",
+                    "border border-[hsl(var(--border-subtle))] shadow-sm",
+                    "pointer-events-none whitespace-nowrap"
+                  ),
+                  children: value
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var variantClasses2 = {
+  default: "bg-[hsl(var(--bg-surface))] border border-[hsl(var(--border-subtle))] shadow-sm",
+  elevated: "bg-[hsl(var(--bg-elevated))] border border-[hsl(var(--border-default))] shadow-lg",
+  outlined: "bg-transparent border border-[hsl(var(--border-default))]",
+  interactive: "bg-[hsl(var(--bg-surface))] border border-[hsl(var(--border-subtle))] shadow-sm hover:bg-[hsl(var(--bg-elevated))] hover:border-[hsl(var(--border-default))] hover:shadow-md transition-all duration-150 cursor-pointer"
+};
+var paddingClasses = {
+  none: "",
+  sm: "p-3",
+  md: "p-5",
+  lg: "p-6"
+};
+var Card = forwardRef(
+  ({ variant = "default", padding = "md", className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("rounded-2xl", variantClasses2[variant], paddingClasses[padding], className),
+      ...props,
+      children
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-start justify-between gap-4", className),
+      ...props,
+      children
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn("text-base font-semibold text-[hsl(var(--text-primary))]", className),
+      ...props,
+      children
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("text-sm text-[hsl(var(--text-secondary))]", className),
+      ...props,
+      children
+    }
+  )
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mt-4", className), ...props, children })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "mt-4 pt-4 flex items-center gap-3 border-t border-[hsl(var(--border-subtle))]",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+function RadioGroup({
+  options,
+  value,
+  onChange,
+  orientation = "vertical",
+  className
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const groupRef = useRef(null);
+  const enabledOptions = options.filter((o) => !o.disabled);
+  const handleKeyDown = useCallback(
+    (e) => {
+      const currentIdx = enabledOptions.findIndex((o) => o.value === value);
+      if (currentIdx === -1) return;
+      const isVertical = orientation === "vertical";
+      const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+      const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+      let nextIdx = null;
+      if (e.key === nextKey) {
+        e.preventDefault();
+        nextIdx = (currentIdx + 1) % enabledOptions.length;
+      } else if (e.key === prevKey) {
+        e.preventDefault();
+        nextIdx = (currentIdx - 1 + enabledOptions.length) % enabledOptions.length;
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        nextIdx = 0;
+      } else if (e.key === "End") {
+        e.preventDefault();
+        nextIdx = enabledOptions.length - 1;
+      }
+      if (nextIdx !== null) {
+        onChange(enabledOptions[nextIdx].value);
+        const radios = groupRef.current?.querySelectorAll('[role="radio"]:not([aria-disabled="true"])');
+        radios?.[nextIdx]?.focus();
+      }
+    },
+    [enabledOptions, value, onChange, orientation]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: groupRef,
+      role: "radiogroup",
+      "aria-orientation": orientation,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "flex",
+        orientation === "vertical" ? "flex-col gap-2" : "flex-row flex-wrap gap-4",
+        className
+      ),
+      children: options.map((option) => {
+        const isSelected = option.value === value;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "radio",
+            "aria-checked": isSelected,
+            "aria-disabled": option.disabled,
+            tabIndex: isSelected ? 0 : -1,
+            onClick: () => {
+              if (!option.disabled) onChange(option.value);
+            },
+            className: cn(
+              "flex items-start gap-3 cursor-pointer select-none group",
+              "focus-visible:outline-none",
+              option.disabled && "opacity-40 pointer-events-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "relative mt-0.5 h-[18px] w-[18px] shrink-0 rounded-full border-2 transition-colors duration-150",
+                    "flex items-center justify-center",
+                    isSelected ? "border-[hsl(var(--brand-primary))]" : "border-[hsl(var(--border-strong))] group-hover:border-[hsl(var(--brand-primary))]",
+                    "group-focus-visible:ring-2 group-focus-visible:ring-[hsl(var(--brand-primary))] group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-[hsl(var(--bg-base))]"
+                  ),
+                  children: isSelected && /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      layoutId: "radio-indicator",
+                      initial: prefersReducedMotion ? false : { scale: 0 },
+                      animate: { scale: 1 },
+                      transition: prefersReducedMotion ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 30 },
+                      className: "h-2.5 w-2.5 rounded-full bg-[hsl(var(--brand-primary))]"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-sm font-medium",
+                      isSelected ? "text-[hsl(var(--text-primary))]" : "text-[hsl(var(--text-secondary))]"
+                    ),
+                    children: option.label
+                  }
+                ),
+                option.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-[hsl(var(--text-tertiary))]", children: option.description })
+              ] })
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+function Tooltip2({
+  content,
+  children,
+  side = "top",
+  delay = 200,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsxs(
+      Tooltip.Content,
+      {
+        side,
+        sideOffset: 6,
+        className: cn(
+          "z-50 px-3 py-1.5 rounded-lg text-xs font-medium",
+          "bg-[hsl(var(--bg-elevated))] text-[hsl(var(--text-primary))]",
+          "border border-[hsl(var(--border-default))] shadow-lg",
+          "animate-in fade-in-0 zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        ),
+        children: [
+          content,
+          /* @__PURE__ */ jsx(
+            Tooltip.Arrow,
+            {
+              className: "fill-[hsl(var(--bg-elevated))]",
+              width: 10,
+              height: 5
+            }
+          )
+        ]
+      }
+    ) })
+  ] }) });
+}
+function buildPoints(data, w, h, pad) {
+  if (data.length < 2) return "";
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const stepX = (w - pad * 2) / (data.length - 1);
+  return data.map((v, i) => {
+    const x = pad + i * stepX;
+    const y = pad + (1 - (v - min) / range) * (h - pad * 2);
+    return `${x},${y}`;
+  }).join(" ");
+}
+function Sparkline({
+  data,
+  width = 80,
+  height = 24,
+  color = "hsl(var(--brand-primary))",
+  fillOpacity = 0.1,
+  showDots = false,
+  className
+}) {
+  if (data.length < 2) return null;
+  const pad = showDots ? 3 : 1;
+  const points = buildPoints(data, width, height, pad);
+  const gradId = `sp-grad-${Math.random().toString(36).slice(2, 8)}`;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const stepX = (width - pad * 2) / (data.length - 1);
+  const firstX = pad;
+  const firstY = pad + (1 - (data[0] - min) / range) * (height - pad * 2);
+  const lastX = pad + (data.length - 1) * stepX;
+  const lastY = pad + (1 - (data[data.length - 1] - min) / range) * (height - pad * 2);
+  const fillPath = fillOpacity > 0 ? `M ${firstX},${height} L ${points.split(" ").join(" L ")} L ${lastX},${height} Z` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("shrink-0", className),
+      "aria-hidden": "true",
+      children: [
+        fillOpacity > 0 && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: fillOpacity }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+        ] }) }),
+        fillPath && /* @__PURE__ */ jsx("path", { d: fillPath, fill: `url(#${gradId})` }),
+        /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            points,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1.5,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        showDots && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("circle", { cx: firstX, cy: firstY, r: 2, fill: color }),
+          /* @__PURE__ */ jsx("circle", { cx: lastX, cy: lastY, r: 2, fill: color })
+        ] })
+      ]
+    }
+  );
+}
+var statusBorder = {
+  ok: "border-l-[hsl(var(--status-ok))]",
+  warning: "border-l-[hsl(var(--status-warning))]",
+  critical: "border-l-[hsl(var(--status-critical))]"
+};
+var trendColors = {
+  good: "text-[hsl(var(--status-ok))]",
+  bad: "text-[hsl(var(--status-critical))]"
+};
+function MetricCard({
+  label,
+  value,
+  format,
+  previousValue,
+  trendDirection,
+  icon: Icon,
+  status,
+  sparklineData,
+  className
+}) {
+  const reduced = useReducedMotion();
+  let trendPct = null;
+  let trendUp = false;
+  let trendColorKey = null;
+  if (previousValue != null && previousValue !== 0) {
+    trendPct = (value - previousValue) / Math.abs(previousValue) * 100;
+    trendUp = trendPct >= 0;
+    if (trendDirection) {
+      const isUp = trendPct >= 0;
+      if (trendDirection === "up-good") trendColorKey = isUp ? "good" : "bad";
+      else if (trendDirection === "up-bad") trendColorKey = isUp ? "bad" : "good";
+      else if (trendDirection === "down-good") trendColorKey = isUp ? "bad" : "good";
+      else if (trendDirection === "down-bad") trendColorKey = isUp ? "good" : "bad";
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: reduced ? false : { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.2, ease: "easeOut" },
+      className: cn(
+        "relative rounded-2xl border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))]",
+        "p-5 shadow-sm border-l-[3px]",
+        status ? statusBorder[status] : "border-l-[hsl(var(--border-subtle))]",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+            Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 text-[hsl(var(--text-tertiary))]" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[0.75rem] font-medium text-[hsl(var(--text-secondary))] truncate", children: label })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-[hsl(var(--text-primary))] tabular-nums", children: /* @__PURE__ */ jsx(AnimatedCounter, { value, format }) }),
+            trendPct != null && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-0.5 text-[0.6875rem] font-medium tabular-nums",
+                  trendColorKey ? trendColors[trendColorKey] : "text-[hsl(var(--text-tertiary))]"
+                ),
+                children: [
+                  trendUp ? /* @__PURE__ */ jsx(TrendingUp, { className: "size-3" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "size-3" }),
+                  Math.abs(trendPct).toFixed(1),
+                  "%"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        sparklineData && sparklineData.length >= 2 && /* @__PURE__ */ jsx(
+          Sparkline,
+          {
+            data: sparklineData,
+            width: 72,
+            height: 28,
+            color: status === "critical" ? "hsl(var(--status-critical))" : status === "warning" ? "hsl(var(--status-warning))" : "hsl(var(--brand-primary))",
+            fillOpacity: 0.15
+          }
+        )
+      ] })
+    }
+  );
+}
+var sizeMap = {
+  sm: "h-1.5",
+  md: "h-2.5",
+  lg: "h-4"
+};
+function getBarColor(value, warning, critical) {
+  if (value >= critical) return "hsl(var(--util-high))";
+  if (value >= warning) return "hsl(var(--util-medium))";
+  return "hsl(var(--util-low))";
+}
+function getTextClass(value, warning, critical) {
+  if (value >= critical) return "text-[hsl(var(--status-critical))]";
+  if (value >= warning) return "text-[hsl(var(--status-warning))]";
+  return "text-[hsl(var(--text-secondary))]";
+}
+function UtilizationBar({
+  value: rawValue,
+  thresholds,
+  label,
+  showValue = true,
+  size = "md",
+  animated = true,
+  className
+}) {
+  const reduced = useReducedMotion();
+  const value = clamp(rawValue, 0, 100);
+  const warning = thresholds?.warning ?? 70;
+  const critical = thresholds?.critical ?? 90;
+  const [displayWidth, setDisplayWidth] = useState(animated && !reduced ? 0 : value);
+  useEffect(() => {
+    if (!animated || reduced) {
+      setDisplayWidth(value);
+      return;
+    }
+    const raf = requestAnimationFrame(() => setDisplayWidth(value));
+    return () => cancelAnimationFrame(raf);
+  }, [value, animated, reduced]);
+  const barColor = getBarColor(value, warning, critical);
+  const textClass = getTextClass(value, warning, critical);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), title: `${value.toFixed(1)}%`, children: [
+    label && /* @__PURE__ */ jsx("span", { className: "text-[0.75rem] font-medium text-[hsl(var(--text-secondary))] shrink-0 min-w-[3rem]", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex-1 rounded-full bg-[hsl(var(--bg-elevated))] overflow-hidden",
+          sizeMap[size]
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full",
+            style: {
+              width: `${displayWidth}%`,
+              backgroundColor: barColor,
+              transition: animated && !reduced ? "width 600ms cubic-bezier(0.4, 0, 0.2, 1)" : "none"
+            }
+          }
+        )
+      }
+    ),
+    showValue && /* @__PURE__ */ jsxs("span", { className: cn("text-[0.75rem] font-medium tabular-nums shrink-0 min-w-[2.5rem] text-right", textClass), children: [
+      value.toFixed(0),
+      "%"
+    ] })
+  ] });
+}
+var ARC_START = 135;
+var ARC_SWEEP = 270;
+function polarToCartesian(cx, cy, r, angleDeg) {
+  const rad = (angleDeg - 90) * Math.PI / 180;
+  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+}
+function describeArc(cx, cy, r, startAngle, endAngle) {
+  const start = polarToCartesian(cx, cy, r, endAngle);
+  const end = polarToCartesian(cx, cy, r, startAngle);
+  const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+  return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArc} 0 ${end.x} ${end.y}`;
+}
+function getArcColor(pct, warning, critical) {
+  if (pct >= critical) return "hsl(var(--util-high))";
+  if (pct >= warning) return "hsl(var(--util-medium))";
+  return "hsl(var(--util-low))";
+}
+function ThresholdGauge({
+  value: rawValue,
+  label,
+  thresholds,
+  size = 120,
+  showValue = true,
+  format,
+  className
+}) {
+  const reduced = useReducedMotion();
+  const value = clamp(rawValue, 0, 100);
+  const warning = thresholds?.warning ?? 70;
+  const critical = thresholds?.critical ?? 90;
+  const [animatedValue, setAnimatedValue] = useState(reduced ? value : 0);
+  useEffect(() => {
+    if (reduced) {
+      setAnimatedValue(value);
+      return;
+    }
+    const start = performance.now();
+    const from = 0;
+    const dur = 600;
+    let raf;
+    function tick(now) {
+      const progress = Math.min((now - start) / dur, 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setAnimatedValue(from + (value - from) * eased);
+      if (progress < 1) raf = requestAnimationFrame(tick);
+    }
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [value, reduced]);
+  const cx = size / 2;
+  const cy = size / 2;
+  const r = (size - 16) / 2;
+  const strokeWidth = Math.max(6, size * 0.08);
+  const warnAngle = ARC_START + warning / 100 * ARC_SWEEP;
+  const critAngle = ARC_START + critical / 100 * ARC_SWEEP;
+  const endAngle = ARC_START + ARC_SWEEP;
+  const greenArc = describeArc(cx, cy, r, ARC_START, warnAngle);
+  const yellowArc = describeArc(cx, cy, r, warnAngle, critAngle);
+  const redArc = describeArc(cx, cy, r, critAngle, endAngle);
+  const valueAngle = ARC_START + animatedValue / 100 * ARC_SWEEP;
+  const valueArc = animatedValue > 0.5 ? describeArc(cx, cy, r, ARC_START, valueAngle) : "";
+  const displayText = format ? format(value) : `${Math.round(value)}%`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex flex-col items-center", className), children: [
+    /* @__PURE__ */ jsxs("svg", { width: size, height: size * 0.75, viewBox: `0 0 ${size} ${size * 0.75}`, "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("path", { d: greenArc, fill: "none", stroke: "hsl(var(--util-low))", strokeWidth, strokeLinecap: "round", opacity: 0.2 }),
+      /* @__PURE__ */ jsx("path", { d: yellowArc, fill: "none", stroke: "hsl(var(--util-medium))", strokeWidth, strokeLinecap: "round", opacity: 0.2 }),
+      /* @__PURE__ */ jsx("path", { d: redArc, fill: "none", stroke: "hsl(var(--util-high))", strokeWidth, strokeLinecap: "round", opacity: 0.2 }),
+      valueArc && /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: valueArc,
+          fill: "none",
+          stroke: getArcColor(animatedValue, warning, critical),
+          strokeWidth,
+          strokeLinecap: "round"
+        }
+      ),
+      showValue && /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: cx,
+          y: cy - 2,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          fill: "hsl(var(--text-primary))",
+          fontSize: size * 0.2,
+          fontWeight: 600,
+          fontFamily: "inherit",
+          className: "tabular-nums",
+          children: displayText
+        }
+      )
+    ] }),
+    label && /* @__PURE__ */ jsx("span", { className: "text-[0.75rem] font-medium text-[hsl(var(--text-secondary))] mt-1", children: label })
+  ] });
+}
+var severityDot = {
+  critical: "bg-[hsl(var(--status-critical))]",
+  warning: "bg-[hsl(var(--status-warning))]",
+  info: "bg-[hsl(var(--brand-primary))]",
+  ok: "bg-[hsl(var(--status-ok))]"
+};
+var severityRing = {
+  critical: "ring-[hsl(var(--status-critical))]/30",
+  warning: "ring-[hsl(var(--status-warning))]/30",
+  info: "ring-[hsl(var(--brand-primary))]/30",
+  ok: "ring-[hsl(var(--status-ok))]/30"
+};
+function formatTime(iso) {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return iso;
+  }
+}
+function SeverityTimeline({
+  events,
+  maxVisible = 20,
+  onEventClick,
+  className
+}) {
+  const reduced = useReducedMotion();
+  const scrollRef = useRef(null);
+  const visible = events.slice(0, maxVisible);
+  if (visible.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scrollRef,
+      className: cn(
+        "relative overflow-x-auto scrollbar-thin py-2",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "flex items-start gap-0 min-w-max", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: visible.map((ev, i) => /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          initial: reduced ? false : { opacity: 0, scale: 0.8 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.8 },
+          transition: { duration: 0.15, delay: reduced ? 0 : i * 0.03 },
+          className: "flex flex-col items-center relative",
+          style: { minWidth: 64 },
+          children: [
+            i < visible.length - 1 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute top-[11px] left-1/2 h-px bg-[hsl(var(--border-default))]",
+                style: { width: 64 }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onEventClick?.(ev),
+                className: cn(
+                  "relative z-10 size-[10px] rounded-full ring-4 shrink-0",
+                  "transition-transform hover:scale-125 cursor-pointer",
+                  severityDot[ev.severity] ?? severityDot.info,
+                  severityRing[ev.severity] ?? severityRing.info
+                ),
+                title: ev.detail ?? ev.label,
+                "aria-label": `${ev.label} \u2014 ${ev.severity}`
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "mt-1.5 text-[0.6875rem] font-medium text-[hsl(var(--text-primary))] text-center max-w-[56px] truncate", children: ev.label }),
+            /* @__PURE__ */ jsx("span", { className: "text-[0.625rem] text-[hsl(var(--text-tertiary))] tabular-nums", children: formatTime(ev.time) })
+          ]
+        },
+        `${ev.time}-${i}`
+      )) }) })
+    }
+  );
+}
+var levelBorder = {
+  error: "border-l-[hsl(var(--status-critical))]",
+  warn: "border-l-[hsl(var(--status-warning))]",
+  info: "border-l-[hsl(var(--brand-primary))]",
+  debug: "border-l-[hsl(var(--text-tertiary))]",
+  trace: "border-l-[hsl(var(--text-disabled))]"
+};
+var levelText = {
+  error: "text-[hsl(var(--status-critical))]",
+  warn: "text-[hsl(var(--status-warning))]",
+  info: "text-[hsl(var(--brand-primary))]",
+  debug: "text-[hsl(var(--text-tertiary))]",
+  trace: "text-[hsl(var(--text-disabled))]"
+};
+var levelLabel = {
+  error: "ERR",
+  warn: "WRN",
+  info: "INF",
+  debug: "DBG",
+  trace: "TRC"
+};
+function formatTs(iso) {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+  } catch {
+    return iso;
+  }
+}
+function LogViewer({
+  entries,
+  maxHeight = 400,
+  autoScroll = true,
+  showTimestamps = true,
+  showLevel = true,
+  onEntryClick,
+  className
+}) {
+  const reduced = useReducedMotion();
+  const containerRef = useRef(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const [filter, setFilter] = useState("");
+  const [newCount, setNewCount] = useState(0);
+  const prevLenRef = useRef(entries.length);
+  const checkAtBottom = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 32;
+    setIsAtBottom(atBottom);
+    if (atBottom) setNewCount(0);
+  }, []);
+  useEffect(() => {
+    const added = entries.length - prevLenRef.current;
+    prevLenRef.current = entries.length;
+    if (added > 0 && !isAtBottom) {
+      setNewCount((prev) => prev + added);
+    }
+    if (autoScroll && isAtBottom && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [entries.length, autoScroll, isAtBottom]);
+  const scrollToBottom = useCallback(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+      setNewCount(0);
+      setIsAtBottom(true);
+    }
+  }, []);
+  const lowerFilter = filter.toLowerCase();
+  const filtered = filter ? entries.filter(
+    (e) => e.message.toLowerCase().includes(lowerFilter) || e.source?.toLowerCase().includes(lowerFilter) || e.level.includes(lowerFilter)
+  ) : entries;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative rounded-xl border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))] overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-elevated))]", children: [
+      /* @__PURE__ */ jsx(Search, { className: "size-3.5 text-[hsl(var(--text-tertiary))] shrink-0" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: filter,
+          onChange: (e) => setFilter(e.target.value),
+          placeholder: "Filter logs...",
+          className: "flex-1 bg-transparent text-[0.75rem] text-[hsl(var(--text-primary))] placeholder:text-[hsl(var(--text-disabled))] outline-none font-mono"
+        }
+      ),
+      filter && /* @__PURE__ */ jsxs("span", { className: "text-[0.6875rem] text-[hsl(var(--text-tertiary))] tabular-nums shrink-0", children: [
+        filtered.length,
+        " / ",
+        entries.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        onScroll: checkAtBottom,
+        className: "overflow-y-auto",
+        style: { maxHeight },
+        children: filtered.map((entry, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: () => onEntryClick?.(entry),
+            className: cn(
+              "flex items-start gap-2 px-3 py-1 border-l-2 font-mono text-[0.75rem] leading-5",
+              "hover:bg-[hsl(var(--bg-elevated))] transition-colors",
+              onEntryClick && "cursor-pointer",
+              levelBorder[entry.level] ?? levelBorder.info
+            ),
+            children: [
+              showTimestamps && /* @__PURE__ */ jsx("span", { className: "text-[hsl(var(--text-tertiary))] tabular-nums shrink-0 select-all", children: formatTs(entry.time) }),
+              showLevel && /* @__PURE__ */ jsx("span", { className: cn("font-semibold shrink-0 w-[2.5ch]", levelText[entry.level] ?? levelText.info), children: levelLabel[entry.level] ?? entry.level.toUpperCase().slice(0, 3) }),
+              entry.source && /* @__PURE__ */ jsxs("span", { className: "text-[hsl(var(--text-secondary))] shrink-0", children: [
+                "[",
+                entry.source,
+                "]"
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-[hsl(var(--text-primary))] break-all min-w-0", children: entry.message })
+            ]
+          },
+          `${entry.time}-${i}`
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: newCount > 0 && !isAtBottom && /* @__PURE__ */ jsxs(
+      motion.button,
+      {
+        type: "button",
+        initial: reduced ? false : { opacity: 0, y: 8 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: 8 },
+        transition: { duration: 0.15 },
+        onClick: scrollToBottom,
+        className: cn(
+          "absolute bottom-3 left-1/2 -translate-x-1/2 z-10",
+          "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full",
+          "bg-[hsl(var(--brand-primary))] text-[hsl(var(--text-on-brand))]",
+          "text-[0.6875rem] font-medium shadow-lg cursor-pointer",
+          "hover:opacity-90 transition-opacity"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(ArrowDown, { className: "size-3" }),
+          newCount,
+          " new ",
+          newCount === 1 ? "entry" : "entries"
+        ]
+      }
+    ) })
+  ] });
+}
+var statusColor = {
+  up: "bg-[hsl(var(--status-ok))]",
+  down: "bg-[hsl(var(--status-critical))]",
+  disabled: "bg-[hsl(var(--text-disabled))]",
+  error: "bg-[hsl(var(--status-warning))]"
+};
+var statusHover = {
+  up: "hover:ring-[hsl(var(--status-ok))]/40",
+  down: "hover:ring-[hsl(var(--status-critical))]/40",
+  disabled: "hover:ring-[hsl(var(--text-disabled))]/40",
+  error: "hover:ring-[hsl(var(--status-warning))]/40"
+};
+var sizeClasses5 = {
+  sm: "size-3 rounded-[2px]",
+  md: "size-5 rounded-[3px]"
+};
+function PortStatusGrid({
+  ports,
+  columns,
+  size = "sm",
+  onPortClick,
+  className
+}) {
+  const reduced = useReducedMotion();
+  const gridStyle = columns ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : { gridTemplateColumns: `repeat(auto-fill, minmax(${size === "sm" ? "12px" : "20px"}, 1fr))` };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid gap-1", className),
+      style: gridStyle,
+      role: "grid",
+      "aria-label": "Port status grid",
+      children: ports.map((port, i) => {
+        const tooltipParts = [port.label];
+        if (port.speed) tooltipParts.push(port.speed);
+        if (port.utilization != null) tooltipParts.push(`${port.utilization.toFixed(0)}%`);
+        tooltipParts.push(port.status);
+        return /* @__PURE__ */ jsx(
+          motion.button,
+          {
+            type: "button",
+            initial: reduced ? false : { opacity: 0, scale: 0.5 },
+            animate: { opacity: 1, scale: 1 },
+            transition: { duration: 0.1, delay: reduced ? 0 : Math.min(i * 8e-3, 0.4) },
+            onClick: () => onPortClick?.(port),
+            title: tooltipParts.join(" \xB7 "),
+            "aria-label": `${port.label}: ${port.status}`,
+            className: cn(
+              "transition-all cursor-pointer ring-0 hover:ring-2",
+              sizeClasses5[size],
+              statusColor[port.status] ?? statusColor.disabled,
+              statusHover[port.status] ?? statusHover.disabled
+            )
+          },
+          port.id
+        );
+      })
+    }
+  );
+}
+var defaultRanges = [
+  { label: "1h", value: "1h", seconds: 3600 },
+  { label: "6h", value: "6h", seconds: 21600 },
+  { label: "24h", value: "24h", seconds: 86400 },
+  { label: "7d", value: "7d", seconds: 604800 },
+  { label: "30d", value: "30d", seconds: 2592e3 }
+];
+function TimeRangeSelector({
+  value,
+  onChange,
+  ranges = defaultRanges,
+  className
+}) {
+  const reduced = useReducedMotion();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center rounded-lg bg-[hsl(var(--bg-elevated))] p-0.5",
+        "border border-[hsl(var(--border-subtle))]",
+        className
+      ),
+      role: "radiogroup",
+      "aria-label": "Time range",
+      children: ranges.map((range) => {
+        const isActive = range.value === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": isActive,
+            onClick: () => onChange(range.value, range),
+            className: cn(
+              "relative px-3 py-1 text-[0.75rem] font-medium rounded-md cursor-pointer",
+              "transition-colors duration-150",
+              isActive ? "text-[hsl(var(--text-on-brand))]" : "text-[hsl(var(--text-secondary))] hover:text-[hsl(var(--text-primary))]"
+            ),
+            children: [
+              isActive && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  layoutId: "time-range-active",
+                  className: "absolute inset-0 rounded-md bg-[hsl(var(--brand-primary))]",
+                  transition: reduced ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "relative z-10", children: range.label })
+            ]
+          },
+          range.value
+        );
+      })
+    }
+  );
+}
+var statusDot = {
+  active: "bg-[hsl(var(--status-ok))]",
+  idle: "bg-[hsl(var(--text-tertiary))]",
+  error: "bg-[hsl(var(--status-critical))]",
+  disabled: "bg-[hsl(var(--text-disabled))]"
+};
+var statusBorder2 = {
+  active: "border-[hsl(var(--status-ok))]/30",
+  idle: "border-[hsl(var(--border-default))]",
+  error: "border-[hsl(var(--status-critical))]/30",
+  disabled: "border-[hsl(var(--border-subtle))]"
+};
+var statusBg = {
+  active: "bg-[hsl(var(--bg-surface))]",
+  idle: "bg-[hsl(var(--bg-surface))]",
+  error: "bg-[hsl(var(--status-critical))]/5",
+  disabled: "bg-[hsl(var(--bg-elevated))]"
+};
+function PipelineStage({
+  stages,
+  onStageClick,
+  className
+}) {
+  const reduced = useReducedMotion();
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-0 overflow-x-auto", className), children: stages.map((stage, i) => {
+    const Icon = stage.icon;
+    const isDisabled = stage.status === "disabled";
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center shrink-0", children: [
+      i > 0 && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: reduced ? false : { opacity: 0, x: -4 },
+          animate: { opacity: 1, x: 0 },
+          transition: { duration: 0.15, delay: reduced ? 0 : i * 0.05 },
+          className: "px-1",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-[hsl(var(--text-tertiary))]" })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        motion.button,
+        {
+          type: "button",
+          initial: reduced ? false : { opacity: 0, y: 6 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.2, delay: reduced ? 0 : i * 0.06 },
+          onClick: () => onStageClick?.(stage, i),
+          disabled: isDisabled && !onStageClick,
+          className: cn(
+            "flex flex-col items-start gap-1.5 px-4 py-3 rounded-xl border",
+            "transition-all min-w-[120px]",
+            statusBorder2[stage.status],
+            statusBg[stage.status],
+            onStageClick && !isDisabled && "cursor-pointer hover:bg-[hsl(var(--bg-elevated))]",
+            isDisabled && "opacity-50"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+              Icon && /* @__PURE__ */ jsx(Icon, { className: cn("size-3.5 shrink-0", isDisabled ? "text-[hsl(var(--text-disabled))]" : "text-[hsl(var(--text-secondary))]") }),
+              /* @__PURE__ */ jsx("span", { className: cn(
+                "text-[0.8125rem] font-medium truncate",
+                isDisabled ? "text-[hsl(var(--text-disabled))]" : "text-[hsl(var(--text-primary))]"
+              ), children: stage.name }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "size-2 rounded-full shrink-0 ml-auto",
+                    statusDot[stage.status],
+                    stage.status === "active" && "animate-pulse"
+                  )
+                }
+              )
+            ] }),
+            stage.metric && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] font-semibold text-[hsl(var(--text-primary))] tabular-nums", children: stage.metric.value }),
+              /* @__PURE__ */ jsx("span", { className: "text-[0.625rem] text-[hsl(var(--text-tertiary))]", children: stage.metric.label })
+            ] })
+          ]
+        }
+      )
+    ] }, `${stage.name}-${i}`);
+  }) });
+}
+var dayColor = {
+  ok: "bg-[hsl(var(--status-ok))]",
+  degraded: "bg-[hsl(var(--status-warning))]",
+  outage: "bg-[hsl(var(--status-critical))]",
+  "no-data": "bg-[hsl(var(--text-disabled))]"
+};
+var dayHover = {
+  ok: "hover:bg-[hsl(var(--status-ok))]/80",
+  degraded: "hover:bg-[hsl(var(--status-warning))]/80",
+  outage: "hover:bg-[hsl(var(--status-critical))]/80",
+  "no-data": "hover:bg-[hsl(var(--text-disabled))]/80"
+};
+function formatDate(dateStr) {
+  try {
+    const d = /* @__PURE__ */ new Date(dateStr + "T00:00:00");
+    return d.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  } catch {
+    return dateStr;
+  }
+}
+function UptimeTracker({
+  days,
+  showPercentage = true,
+  label,
+  onDayClick,
+  className
+}) {
+  const reduced = useReducedMotion();
+  const daysWithUptime = days.filter((d) => d.uptime != null);
+  const overallUptime = daysWithUptime.length > 0 ? daysWithUptime.reduce((sum, d) => sum + (d.uptime ?? 0), 0) / daysWithUptime.length : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+    (label || showPercentage) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] font-medium text-[hsl(var(--text-primary))]", children: label }),
+      showPercentage && overallUptime != null && /* @__PURE__ */ jsxs("span", { className: cn(
+        "text-[0.8125rem] font-semibold tabular-nums",
+        overallUptime >= 99.9 ? "text-[hsl(var(--status-ok))]" : overallUptime >= 99 ? "text-[hsl(var(--status-warning))]" : "text-[hsl(var(--status-critical))]"
+      ), children: [
+        overallUptime.toFixed(2),
+        "% uptime"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-end gap-px h-8", children: days.map((day, i) => {
+      const tooltip = [
+        formatDate(day.date),
+        day.uptime != null ? `${day.uptime.toFixed(1)}%` : day.status
+      ].join(" \u2014 ");
+      return /* @__PURE__ */ jsx(
+        motion.button,
+        {
+          type: "button",
+          initial: reduced ? false : { scaleY: 0 },
+          animate: { scaleY: 1 },
+          transition: { duration: 0.15, delay: reduced ? 0 : Math.min(i * 5e-3, 0.3) },
+          style: { originY: "100%" },
+          onClick: () => onDayClick?.(day),
+          title: tooltip,
+          "aria-label": tooltip,
+          className: cn(
+            "flex-1 min-w-[2px] h-full rounded-[1px] transition-opacity cursor-pointer",
+            dayColor[day.status] ?? dayColor["no-data"],
+            dayHover[day.status] ?? dayHover["no-data"]
+          )
+        },
+        day.date
+      );
+    }) }),
+    days.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[0.625rem] text-[hsl(var(--text-tertiary))]", children: formatDate(days[0].date) }),
+      /* @__PURE__ */ jsx("span", { className: "text-[0.625rem] text-[hsl(var(--text-tertiary))]", children: formatDate(days[days.length - 1].date) })
+    ] })
+  ] });
+}
+
+export { AnimatedCounter, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ConfirmDialog, DataTable, DropdownMenu, EmptyState, FilterPill, LogViewer, MetricCard, PipelineStage, Popover, PortStatusGrid, Progress, RadioGroup, SeverityTimeline, Sheet, Skeleton, SkeletonCard, SkeletonText, Slider, Sparkline, StatusBadge, StatusPulse, SuccessCheckmark, Tabs, ThresholdGauge, TimeRangeSelector, Toaster, Tooltip2 as Tooltip, TruncatedText, UptimeTracker, UtilizationBar, createBadgeVariant, defaultPulseConfigMap, defaultStatusMap };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map