@annondeveloper/ui-kit 0.1.0 → 0.2.1

package/dist/index.js

@@ -1,7 +1,7 @@
-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 { cn, Select, clamp } from './chunk-2DWZVHZS.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-2DWZVHZS.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 { Loader2, Check, Copy, AlertTriangle, Search, X, Filter, List, AlignJustify, LayoutList, Columns3, Download, ChevronUp, ChevronDown, ChevronsUpDown, TrendingUp, TrendingDown, ArrowDown, ChevronRight, Play, Pause, XCircle, CheckCircle2, Info, Plus, Sparkles, Hash, Regex, ArrowUp, Minus, WifiOff, Clock, CornerDownLeft, GripVertical, ChevronLeft, 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';
@@ -328,10 +328,14 @@ function AnimatedCounter({
   const prevRef = useRef(value);
   const rafRef = useRef(null);
   const [displayed, setDisplayed] = useState(value);
+  const decimalPlacesRef = useRef(
+    Number.isInteger(value) ? 0 : value.toString().split(".")[1]?.length ?? 1
+  );
   useEffect(() => {
     const from = prevRef.current;
     const to = value;
     prevRef.current = value;
+    decimalPlacesRef.current = Number.isInteger(to) ? 0 : to.toString().split(".")[1]?.length ?? 1;
     if (reduced || from === to) {
       setDisplayed(to);
       return;
@@ -356,9 +360,7 @@ function AnimatedCounter({
       }
     };
   }, [value, duration, reduced]);
-  const formatted = format ? format(displayed) : Number.isInteger(value) ? Math.round(displayed).toString() : displayed.toFixed(
-    value.toString().split(".")[1]?.length ?? 1
-  );
+  const formatted = format ? format(displayed) : decimalPlacesRef.current === 0 ? Math.round(displayed).toString() : displayed.toFixed(decimalPlacesRef.current);
   return /* @__PURE__ */ jsx("span", { className: cn("tabular-nums", className), children: formatted });
 }
 function SuccessCheckmark({ size = 20, className }) {
@@ -1012,15 +1014,12 @@ function DataTable({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
-          "select",
+          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))
+            value: String(pageSize),
+            onValueChange: (v) => table.setPageSize(Number(v)),
+            options: PAGE_SIZES.map((size) => ({ value: String(size), label: `${size} / page` })),
+            className: "w-[110px] text-[12px]"
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
@@ -2484,6 +2483,8 @@ function LogViewer({
         onScroll: checkAtBottom,
         className: "overflow-y-auto",
         style: { maxHeight },
+        "aria-live": "polite",
+        "aria-atomic": "false",
         children: filtered.map((entry, i) => /* @__PURE__ */ jsxs(
           "div",
           {
@@ -2806,7 +2807,2987 @@ function UptimeTracker({
     ] })
   ] });
 }
+function formatSegments(text) {
+  const segments = [];
+  const regex = /(\*\*(.+?)\*\*|`([^`]+?)`)/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push(text.slice(lastIndex, match.index));
+    }
+    if (match[2]) {
+      segments.push(
+        /* @__PURE__ */ jsx("strong", { className: "font-semibold", children: match[2] }, match.index)
+      );
+    } else if (match[3]) {
+      segments.push(
+        /* @__PURE__ */ jsx(
+          "code",
+          {
+            className: "rounded px-1 py-0.5 text-[0.875em] bg-[hsl(var(--bg-overlay))] text-[hsl(var(--brand-primary))] font-mono",
+            children: match[3]
+          },
+          match.index
+        )
+      );
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    segments.push(text.slice(lastIndex));
+  }
+  return segments;
+}
+function StreamingText({
+  text,
+  isStreaming,
+  speed = 500,
+  showCursor = true,
+  onComplete,
+  className
+}) {
+  const reduced = useReducedMotion();
+  const containerRef = useRef(null);
+  const prevStreamingRef = useRef(isStreaming);
+  const [copied, setCopied] = useState(false);
+  const copyTimerRef = useRef(null);
+  useEffect(() => () => {
+    if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+  }, []);
+  useEffect(() => {
+    if (prevStreamingRef.current && !isStreaming) {
+      onComplete?.();
+    }
+    prevStreamingRef.current = isStreaming;
+  }, [isStreaming, onComplete]);
+  useEffect(() => {
+    if (isStreaming && containerRef.current) {
+      const el = containerRef.current;
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [text, isStreaming]);
+  const handleCopy = useCallback(() => {
+    void navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => setCopied(false), 2e3);
+    });
+  }, [text]);
+  const formatted = formatSegments(text);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "overflow-y-auto text-[hsl(var(--text-primary))] leading-relaxed whitespace-pre-wrap break-words",
+        children: [
+          formatted,
+          showCursor && isStreaming && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "inline-block w-[2px] h-[1.1em] align-text-bottom ml-0.5 bg-[hsl(var(--brand-primary))]",
+              style: reduced ? { opacity: 1 } : {
+                animation: `streaming-cursor-blink ${speed}ms step-end infinite`
+              },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: showCursor && !isStreaming && text.length > 0 && /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              className: "inline-block w-[2px] h-[1.1em] align-text-bottom ml-0.5 bg-[hsl(var(--brand-primary))]",
+              initial: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { duration: reduced ? 0 : 0.4 }
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: !isStreaming && text.length > 0 && /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        type: "button",
+        initial: { opacity: 0, scale: 0.8 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.8 },
+        transition: { duration: reduced ? 0 : 0.2 },
+        onClick: handleCopy,
+        className: cn(
+          "absolute top-0 right-0 p-1.5 rounded-lg",
+          "text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-primary))]",
+          "bg-[hsl(var(--bg-surface))]/80 hover:bg-[hsl(var(--bg-elevated))]",
+          "transition-colors duration-150 cursor-pointer"
+        ),
+        "aria-label": copied ? "Copied" : "Copy to clipboard",
+        children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
+      }
+    ) })
+  ] });
+}
+var DOT_SIZES = { sm: "size-1.5", md: "size-2" };
+var FONT_SIZES = { sm: "text-xs", md: "text-sm" };
+function TypingIndicator({
+  label,
+  variant = "dots",
+  size = "md",
+  className
+}) {
+  const reduced = useReducedMotion();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 text-[hsl(var(--text-secondary))]",
+        FONT_SIZES[size],
+        className
+      ),
+      role: "status",
+      "aria-label": label ?? "Typing",
+      children: [
+        variant === "dots" && /* @__PURE__ */ jsx(BouncingDots, { size, reduced: !!reduced }),
+        variant === "pulse" && /* @__PURE__ */ jsx(PulseRing, { size, reduced: !!reduced }),
+        variant === "text" && /* @__PURE__ */ jsx(AnimatedEllipsis, { reduced: !!reduced }),
+        label && /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+function BouncingDots({ size, reduced }) {
+  const dotClass = cn("rounded-full bg-current", DOT_SIZES[size]);
+  if (reduced) {
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: dotClass }),
+      /* @__PURE__ */ jsx("span", { className: dotClass }),
+      /* @__PURE__ */ jsx("span", { className: dotClass })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: dotClass,
+      animate: { y: [0, -4, 0] },
+      transition: {
+        duration: 0.6,
+        repeat: Infinity,
+        delay: i * 0.15,
+        ease: "easeInOut"
+      }
+    },
+    i
+  )) });
+}
+function PulseRing({ size, reduced }) {
+  const ringSize = size === "sm" ? "size-4" : "size-5";
+  const dotSize = size === "sm" ? "size-2" : "size-2.5";
+  return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex items-center justify-center", ringSize), children: [
+    !reduced && /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        className: cn("absolute inset-0 rounded-full border border-current"),
+        animate: { scale: [1, 1.8], opacity: [0.6, 0] },
+        transition: { duration: 1.2, repeat: Infinity, ease: "easeOut" }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-current", dotSize) })
+  ] });
+}
+function AnimatedEllipsis({ reduced }) {
+  if (reduced) {
+    return /* @__PURE__ */ jsx("span", { children: "..." });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "inline-flex w-[1.2em]", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      animate: { opacity: [0, 1, 0] },
+      transition: {
+        duration: 1.2,
+        repeat: Infinity,
+        delay: i * 0.3,
+        ease: "easeInOut"
+      },
+      children: "."
+    },
+    i
+  )) });
+}
+var SIZE_CLASSES = {
+  sm: "h-1.5",
+  md: "h-2.5"
+};
+function getBarColor2(value, thresholds) {
+  if (value < thresholds.low) return "bg-[hsl(var(--status-critical))]";
+  if (value < thresholds.medium) return "bg-[hsl(var(--status-warning))]";
+  return "bg-[hsl(var(--status-ok))]";
+}
+function getTextColor(value, thresholds) {
+  if (value < thresholds.low) return "text-[hsl(var(--status-critical))]";
+  if (value < thresholds.medium) return "text-[hsl(var(--status-warning))]";
+  return "text-[hsl(var(--status-ok))]";
+}
+function ConfidenceBar({
+  value,
+  label,
+  showPercentage = true,
+  thresholds = { low: 0.3, medium: 0.7 },
+  size = "md",
+  className
+}) {
+  const reduced = useReducedMotion();
+  const [hovered, setHovered] = useState(false);
+  const clamped = Math.min(1, Math.max(0, value));
+  const pct = clamped * 100;
+  const barColor = getBarColor2(clamped, thresholds);
+  const textColor = getTextColor(clamped, thresholds);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-full", className),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: [
+        (label || showPercentage) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+          label && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[hsl(var(--text-secondary))]", children: label }),
+          showPercentage && /* @__PURE__ */ jsxs("span", { className: cn("text-xs font-medium tabular-nums", textColor), children: [
+            pct.toFixed(1),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative w-full overflow-hidden rounded-full bg-[hsl(var(--bg-overlay))]",
+              SIZE_CLASSES[size]
+            ),
+            role: "meter",
+            "aria-valuenow": pct,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": label ?? `Confidence: ${pct.toFixed(1)}%`,
+            children: reduced ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("h-full rounded-full", barColor),
+                style: { width: `${pct}%` }
+              }
+            ) : /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: cn("h-full rounded-full", barColor),
+                initial: { width: 0 },
+                animate: { width: `${pct}%` },
+                transition: { type: "spring", stiffness: 80, damping: 20 }
+              }
+            )
+          }
+        ),
+        hovered && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-[10px] text-[hsl(var(--text-tertiary))] tabular-nums", children: [
+          clamped.toFixed(4),
+          " (",
+          pct.toFixed(2),
+          "%)"
+        ] })
+      ]
+    }
+  );
+}
+var TYPE_BORDER = {
+  info: "border-l-[hsl(var(--brand-secondary))]",
+  success: "border-l-[hsl(var(--status-ok))]",
+  warning: "border-l-[hsl(var(--status-warning))]",
+  error: "border-l-[hsl(var(--status-critical))]"
+};
+function relativeTime(ts) {
+  const diff = (Date.now() - new Date(ts).getTime()) / 1e3;
+  if (diff < 5) return "now";
+  if (diff < 60) return `${Math.floor(diff)}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+function LiveFeed({
+  items,
+  maxVisible = 50,
+  showTimestamps = true,
+  autoScroll: autoScrollProp = true,
+  onItemClick,
+  emptyMessage = "No events yet",
+  className
+}) {
+  const reduced = useReducedMotion();
+  const scrollRef = useRef(null);
+  const [paused, setPaused] = useState(false);
+  const [userScrolled, setUserScrolled] = useState(false);
+  const [newCount, setNewCount] = useState(0);
+  const prevCountRef = useRef(items.length);
+  useEffect(() => {
+    const diff = items.length - prevCountRef.current;
+    if (diff > 0 && (paused || userScrolled)) {
+      setNewCount((c) => c + diff);
+    }
+    prevCountRef.current = items.length;
+  }, [items.length, paused, userScrolled]);
+  useEffect(() => {
+    if (autoScrollProp && !paused && !userScrolled && scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
+  }, [items, autoScrollProp, paused, userScrolled]);
+  const handleScroll = useCallback(() => {
+    if (!scrollRef.current) return;
+    const { scrollTop } = scrollRef.current;
+    setUserScrolled(scrollTop > 40);
+  }, []);
+  const scrollToTop = useCallback(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
+    setUserScrolled(false);
+    setNewCount(0);
+  }, []);
+  const togglePause = useCallback(() => {
+    setPaused((p) => {
+      if (p) {
+        setNewCount(0);
+        setUserScrolled(false);
+      }
+      return !p;
+    });
+  }, []);
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    if (!showTimestamps) return;
+    const id = setInterval(() => setTick((t) => t + 1), 1e4);
+    return () => clearInterval(id);
+  }, [showTimestamps]);
+  const visibleItems = items.slice(0, maxVisible);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-[hsl(var(--border-subtle))]", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-[hsl(var(--text-secondary))]", children: [
+        items.length,
+        " events"
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: togglePause,
+          className: cn(
+            "inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium cursor-pointer",
+            "text-[hsl(var(--text-secondary))] hover:text-[hsl(var(--text-primary))]",
+            "hover:bg-[hsl(var(--bg-overlay))] transition-colors duration-150"
+          ),
+          "aria-label": paused ? "Resume auto-scroll" : "Pause auto-scroll",
+          children: [
+            paused ? /* @__PURE__ */ jsx(Play, { className: "size-3" }) : /* @__PURE__ */ jsx(Pause, { className: "size-3" }),
+            paused ? "Resume" : "Pause"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        onScroll: handleScroll,
+        className: "flex-1 overflow-y-auto",
+        "aria-live": "polite",
+        "aria-atomic": "false",
+        children: visibleItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12 text-sm text-[hsl(var(--text-tertiary))]", children: emptyMessage }) : /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: visibleItems.map((item) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layout: !reduced,
+            initial: reduced ? void 0 : { opacity: 0, y: -12, height: 0 },
+            animate: { opacity: 1, y: 0, height: "auto" },
+            exit: reduced ? void 0 : { opacity: 0, height: 0 },
+            transition: { duration: reduced ? 0 : 0.2 },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: onItemClick ? "button" : void 0,
+                tabIndex: onItemClick ? 0 : void 0,
+                onClick: onItemClick ? () => onItemClick(item) : void 0,
+                onKeyDown: onItemClick ? (e) => {
+                  if (e.key === "Enter" || e.key === " ") onItemClick(item);
+                } : void 0,
+                className: cn(
+                  "flex items-start gap-3 px-3 py-2.5 border-l-2",
+                  "border-b border-b-[hsl(var(--border-subtle))]",
+                  TYPE_BORDER[item.type ?? "info"],
+                  onItemClick && "cursor-pointer hover:bg-[hsl(var(--bg-surface))] transition-colors duration-100"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 text-sm text-[hsl(var(--text-primary))]", children: item.content }),
+                  showTimestamps && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "shrink-0 text-[10px] tabular-nums text-[hsl(var(--text-tertiary))] mt-0.5",
+                      title: new Date(item.timestamp).toISOString(),
+                      children: relativeTime(item.timestamp)
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          item.id
+        )) })
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: newCount > 0 && (userScrolled || paused) && /* @__PURE__ */ jsxs(
+      motion.button,
+      {
+        type: "button",
+        initial: reduced ? void 0 : { opacity: 0, y: 8 },
+        animate: { opacity: 1, y: 0 },
+        exit: reduced ? void 0 : { opacity: 0, y: 8 },
+        transition: { duration: reduced ? 0 : 0.15 },
+        onClick: scrollToTop,
+        className: cn(
+          "absolute top-12 left-1/2 -translate-x-1/2 z-10",
+          "inline-flex items-center gap-1 px-3 py-1.5 rounded-full",
+          "bg-[hsl(var(--brand-primary))] text-white text-xs font-medium",
+          "shadow-lg cursor-pointer hover:brightness-110 transition-[filter] duration-100"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(ChevronUp, { className: "size-3" }),
+          newCount,
+          " new ",
+          newCount === 1 ? "item" : "items"
+        ]
+      }
+    ) })
+  ] });
+}
+var MAX_LINES = 2e3;
+function computeDiff(oldLines, newLines) {
+  if (oldLines.length > MAX_LINES || newLines.length > MAX_LINES) {
+    const result2 = oldLines.map((l, i2) => ({
+      type: l === (newLines[i2] ?? "") ? "unchanged" : "removed",
+      content: l,
+      oldLineNo: i2 + 1,
+      newLineNo: i2 + 1
+    }));
+    for (let i2 = oldLines.length; i2 < newLines.length; i2++) {
+      result2.push({
+        type: "added",
+        content: newLines[i2],
+        oldLineNo: void 0,
+        newLineNo: i2 + 1
+      });
+    }
+    return result2;
+  }
+  const m = oldLines.length;
+  const n = newLines.length;
+  const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+  for (let i2 = 1; i2 <= m; i2++) {
+    for (let j2 = 1; j2 <= n; j2++) {
+      if (oldLines[i2 - 1] === newLines[j2 - 1]) {
+        dp[i2][j2] = dp[i2 - 1][j2 - 1] + 1;
+      } else {
+        dp[i2][j2] = Math.max(dp[i2 - 1][j2], dp[i2][j2 - 1]);
+      }
+    }
+  }
+  const result = [];
+  let i = m;
+  let j = n;
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
+      result.push({ type: "unchanged", content: oldLines[i - 1], oldLineNo: i, newLineNo: j });
+      i--;
+      j--;
+    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+      result.push({ type: "added", content: newLines[j - 1], newLineNo: j });
+      j--;
+    } else {
+      result.push({ type: "removed", content: oldLines[i - 1], oldLineNo: i });
+      i--;
+    }
+  }
+  return result.reverse();
+}
+var TYPE_BG = {
+  added: "bg-[hsl(var(--status-ok))]/10",
+  removed: "bg-[hsl(var(--status-critical))]/10",
+  unchanged: ""
+};
+var TYPE_PREFIX = {
+  added: "+",
+  removed: "-",
+  unchanged: " "
+};
+var TYPE_PREFIX_COLOR = {
+  added: "text-[hsl(var(--status-ok))]",
+  removed: "text-[hsl(var(--status-critical))]",
+  unchanged: "text-[hsl(var(--text-tertiary))]"
+};
+function DiffViewer({
+  oldValue,
+  newValue,
+  mode = "inline",
+  language,
+  showLineNumbers = true,
+  className
+}) {
+  const [expandedSections, setExpandedSections] = useState(/* @__PURE__ */ new Set());
+  const diffLines = useMemo(() => {
+    const oldLines = oldValue.split("\n");
+    const newLines = newValue.split("\n");
+    return computeDiff(oldLines, newLines);
+  }, [oldValue, newValue]);
+  const sections = useMemo(() => {
+    const groups = [];
+    let current = [];
+    let currentType = null;
+    let startIdx = 0;
+    for (let i = 0; i < diffLines.length; i++) {
+      const lineType = diffLines[i].type === "unchanged" ? "unchanged" : "changes";
+      if (lineType !== currentType) {
+        if (current.length > 0 && currentType !== null) {
+          groups.push({ type: currentType, lines: current, startIdx });
+        }
+        current = [diffLines[i]];
+        currentType = lineType;
+        startIdx = i;
+      } else {
+        current.push(diffLines[i]);
+      }
+    }
+    if (current.length > 0 && currentType !== null) {
+      groups.push({ type: currentType, lines: current, startIdx });
+    }
+    return groups;
+  }, [diffLines]);
+  const toggleSection = (idx) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(idx)) {
+        next.delete(idx);
+      } else {
+        next.add(idx);
+      }
+      return next;
+    });
+  };
+  if (mode === "side-by-side") {
+    return /* @__PURE__ */ jsx(SideBySide, { diffLines, showLineNumbers, language, className });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "w-full overflow-x-auto rounded-xl border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))]",
+        "font-mono text-xs leading-5",
+        className
+      ),
+      "data-language": language,
+      children: sections.map((section, sIdx) => {
+        if (section.type === "unchanged" && section.lines.length > 6 && !expandedSections.has(sIdx)) {
+          const topContext = section.lines.slice(0, 3);
+          const bottomContext = section.lines.slice(-3);
+          const hiddenCount = section.lines.length - 6;
+          return /* @__PURE__ */ jsxs("div", { children: [
+            topContext.map((line, i) => /* @__PURE__ */ jsx(InlineLine, { line, showLineNumbers }, `${sIdx}-t-${i}`)),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleSection(sIdx),
+                className: cn(
+                  "w-full px-3 py-1 text-center text-[10px]",
+                  "text-[hsl(var(--text-tertiary))] bg-[hsl(var(--bg-overlay))]/50",
+                  "hover:bg-[hsl(var(--bg-overlay))] cursor-pointer transition-colors duration-100"
+                ),
+                children: [
+                  "... ",
+                  hiddenCount,
+                  " unchanged ",
+                  hiddenCount === 1 ? "line" : "lines",
+                  " ..."
+                ]
+              }
+            ),
+            bottomContext.map((line, i) => /* @__PURE__ */ jsx(InlineLine, { line, showLineNumbers }, `${sIdx}-b-${i}`))
+          ] }, sIdx);
+        }
+        return /* @__PURE__ */ jsxs("div", { children: [
+          section.type === "unchanged" && expandedSections.has(sIdx) && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggleSection(sIdx),
+              className: cn(
+                "w-full px-3 py-0.5 text-center text-[10px]",
+                "text-[hsl(var(--text-tertiary))] bg-[hsl(var(--bg-overlay))]/30",
+                "hover:bg-[hsl(var(--bg-overlay))] cursor-pointer transition-colors duration-100"
+              ),
+              children: [
+                "collapse ",
+                section.lines.length,
+                " unchanged lines"
+              ]
+            }
+          ),
+          section.lines.map((line, i) => /* @__PURE__ */ jsx(InlineLine, { line, showLineNumbers }, `${sIdx}-${i}`))
+        ] }, sIdx);
+      })
+    }
+  );
+}
+function InlineLine({ line, showLineNumbers }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex", TYPE_BG[line.type]), children: [
+    showLineNumbers && /* @__PURE__ */ jsx("span", { className: "shrink-0 w-9 px-1.5 text-right select-none text-[hsl(var(--text-tertiary))]/50 tabular-nums", children: line.oldLineNo ?? "" }),
+    showLineNumbers && /* @__PURE__ */ jsx("span", { className: "shrink-0 w-9 px-1.5 text-right select-none text-[hsl(var(--text-tertiary))]/50 tabular-nums", children: line.newLineNo ?? "" }),
+    /* @__PURE__ */ jsx("span", { className: cn("shrink-0 w-4 text-center select-none font-bold", TYPE_PREFIX_COLOR[line.type]), children: TYPE_PREFIX[line.type] }),
+    /* @__PURE__ */ jsx("span", { className: "flex-1 px-2 whitespace-pre text-[hsl(var(--text-primary))]", children: line.content })
+  ] });
+}
+function SideBySide({
+  diffLines,
+  showLineNumbers,
+  language,
+  className
+}) {
+  const pairs = [];
+  let i = 0;
+  while (i < diffLines.length) {
+    const line = diffLines[i];
+    if (line.type === "unchanged") {
+      pairs.push({ left: line, right: line });
+      i++;
+    } else if (line.type === "removed") {
+      if (i + 1 < diffLines.length && diffLines[i + 1].type === "added") {
+        pairs.push({ left: line, right: diffLines[i + 1] });
+        i += 2;
+      } else {
+        pairs.push({ left: line });
+        i++;
+      }
+    } else {
+      pairs.push({ right: line });
+      i++;
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "w-full overflow-x-auto rounded-xl border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))]",
+        "font-mono text-xs leading-5",
+        className
+      ),
+      "data-language": language,
+      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 divide-x divide-[hsl(var(--border-subtle))]", children: [
+        /* @__PURE__ */ jsx("div", { children: pairs.map((pair, idx) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex", pair.left ? TYPE_BG[pair.left.type] : ""),
+            children: [
+              showLineNumbers && /* @__PURE__ */ jsx("span", { className: "shrink-0 w-9 px-1.5 text-right select-none text-[hsl(var(--text-tertiary))]/50 tabular-nums", children: pair.left?.oldLineNo ?? "" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 px-2 whitespace-pre text-[hsl(var(--text-primary))]", children: pair.left?.content ?? "" })
+            ]
+          },
+          `l-${idx}`
+        )) }),
+        /* @__PURE__ */ jsx("div", { children: pairs.map((pair, idx) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex", pair.right ? TYPE_BG[pair.right.type] : ""),
+            children: [
+              showLineNumbers && /* @__PURE__ */ jsx("span", { className: "shrink-0 w-9 px-1.5 text-right select-none text-[hsl(var(--text-tertiary))]/50 tabular-nums", children: pair.right?.newLineNo ?? "" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 px-2 whitespace-pre text-[hsl(var(--text-primary))]", children: pair.right?.content ?? "" })
+            ]
+          },
+          `r-${idx}`
+        )) })
+      ] })
+    }
+  );
+}
+var DEFAULT_COLORS = [
+  "bg-[hsl(var(--bg-overlay))]",
+  "bg-[hsl(var(--status-ok))]/20",
+  "bg-[hsl(var(--status-ok))]/40",
+  "bg-[hsl(var(--status-ok))]/65",
+  "bg-[hsl(var(--status-ok))]"
+];
+var MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var DAY_LABELS = ["", "Mon", "", "Wed", "", "Fri", ""];
+function toDateKey(d) {
+  return d.toISOString().slice(0, 10);
+}
+function parseDate(s) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(s)) {
+    return /* @__PURE__ */ new Date();
+  }
+  const [y, m, d] = s.split("-").map(Number);
+  const date = new Date(y, m - 1, d);
+  if (isNaN(date.getTime())) return /* @__PURE__ */ new Date();
+  return date;
+}
+function HeatmapCalendar({
+  data,
+  startDate,
+  endDate,
+  colorScale = DEFAULT_COLORS,
+  onDayClick,
+  showMonthLabels = true,
+  showDayLabels = true,
+  tooltipFormat,
+  className
+}) {
+  const [hoveredDay, setHoveredDay] = useState(null);
+  const { weeks, months, maxValue } = useMemo(() => {
+    const end = endDate ? parseDate(endDate) : /* @__PURE__ */ new Date();
+    const start = startDate ? parseDate(startDate) : new Date(end.getFullYear() - 1, end.getMonth(), end.getDate() + 1);
+    const lookup = /* @__PURE__ */ new Map();
+    let maxVal = 0;
+    for (const d of data) {
+      lookup.set(d.date, d.value);
+      if (d.value > maxVal) maxVal = d.value;
+    }
+    const weeks2 = [];
+    const monthChanges = [];
+    const cursor = new Date(start);
+    cursor.setDate(cursor.getDate() - cursor.getDay());
+    let prevMonth = -1;
+    while (cursor <= end || weeks2.length === 0) {
+      const week = [];
+      for (let dow = 0; dow < 7; dow++) {
+        const key = toDateKey(cursor);
+        if (cursor >= start && cursor <= end) {
+          week.push({ date: key, value: lookup.get(key) ?? 0 });
+        } else {
+          week.push(null);
+        }
+        if (cursor.getMonth() !== prevMonth && cursor >= start && cursor <= end) {
+          if (dow === 0) {
+            monthChanges.push({ col: weeks2.length, label: MONTH_NAMES[cursor.getMonth()] });
+          }
+          prevMonth = cursor.getMonth();
+        }
+        cursor.setDate(cursor.getDate() + 1);
+      }
+      weeks2.push(week);
+    }
+    return { weeks: weeks2, months: monthChanges, maxValue: maxVal };
+  }, [data, startDate, endDate]);
+  const getColorClass = (value) => {
+    if (value === 0 || maxValue === 0) return colorScale[0];
+    const idx = Math.min(
+      colorScale.length - 1,
+      Math.ceil(value / maxValue * (colorScale.length - 1))
+    );
+    return colorScale[idx];
+  };
+  const defaultTooltip = (day) => `${day.date}: ${day.value}`;
+  const formatTooltip = tooltipFormat ?? defaultTooltip;
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ jsxs("div", { className: "inline-flex flex-col gap-0.5", children: [
+    showMonthLabels && /* @__PURE__ */ jsx("div", { className: "flex", style: { marginLeft: showDayLabels ? "2rem" : 0 }, children: weeks.map((_, col) => {
+      const monthEntry = months.find((m) => m.col === col);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "text-[10px] text-[hsl(var(--text-tertiary))]",
+          style: { width: 13, minWidth: 13 },
+          children: monthEntry?.label ?? ""
+        },
+        `m-${col}`
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-0", children: [
+      showDayLabels && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px] mr-1", children: DAY_LABELS.map((label, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "text-[10px] text-[hsl(var(--text-tertiary))] h-[11px] flex items-center justify-end pr-1",
+          style: { width: "1.75rem" },
+          children: label
+        },
+        i
+      )) }),
+      weeks.map((week, wIdx) => /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: week.map((day, dIdx) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "w-[11px] h-[11px] rounded-sm",
+            day ? getColorClass(day.value) : "bg-transparent",
+            day && onDayClick && "cursor-pointer",
+            day && "hover:ring-1 hover:ring-[hsl(var(--text-tertiary))]"
+          ),
+          onClick: day && onDayClick ? () => onDayClick(day) : void 0,
+          onMouseEnter: day ? () => setHoveredDay(day) : void 0,
+          onMouseLeave: () => setHoveredDay(null),
+          title: day ? formatTooltip(day) : void 0,
+          role: day && onDayClick ? "button" : void 0,
+          tabIndex: day && onDayClick ? 0 : void 0,
+          onKeyDown: day && onDayClick ? (e) => {
+            if (e.key === "Enter" || e.key === " ") onDayClick(day);
+          } : void 0
+        },
+        dIdx
+      )) }, wIdx))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mt-1", style: { marginLeft: showDayLabels ? "2rem" : 0 }, children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[hsl(var(--text-tertiary))] mr-1", children: "Less" }),
+      colorScale.map((color, i) => /* @__PURE__ */ jsx("div", { className: cn("w-[11px] h-[11px] rounded-sm", color) }, i)),
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[hsl(var(--text-tertiary))] ml-1", children: "More" })
+    ] })
+  ] }) });
+}
+var TYPE_ICON = {
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  error: XCircle
+};
+var TYPE_COLOR = {
+  info: "border-l-[hsl(var(--brand-secondary))]",
+  success: "border-l-[hsl(var(--status-ok))]",
+  warning: "border-l-[hsl(var(--status-warning))]",
+  error: "border-l-[hsl(var(--status-critical))]"
+};
+var TYPE_ICON_COLOR = {
+  info: "text-[hsl(var(--brand-secondary))]",
+  success: "text-[hsl(var(--status-ok))]",
+  warning: "text-[hsl(var(--status-warning))]",
+  error: "text-[hsl(var(--status-critical))]"
+};
+var TYPE_PROGRESS_BG = {
+  info: "bg-[hsl(var(--brand-secondary))]",
+  success: "bg-[hsl(var(--status-ok))]",
+  warning: "bg-[hsl(var(--status-warning))]",
+  error: "bg-[hsl(var(--status-critical))]"
+};
+var POSITION_CLASSES = {
+  "top-right": "top-4 right-4",
+  "top-left": "top-4 left-4",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-left": "bottom-4 left-4"
+};
+var SLIDE_FROM = {
+  "top-right": { x: 80 },
+  "top-left": { x: -80 },
+  "bottom-right": { x: 80 },
+  "bottom-left": { x: -80 }
+};
+function NotificationStack({
+  notifications,
+  onDismiss,
+  position = "top-right",
+  maxVisible = 5,
+  className
+}) {
+  const reduced = useReducedMotion();
+  const visible = notifications.slice(0, maxVisible);
+  const overflow = notifications.length - maxVisible;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "fixed z-50 flex flex-col gap-2 w-[360px] max-w-[calc(100vw-2rem)]",
+        POSITION_CLASSES[position],
+        className
+      ),
+      role: "region",
+      "aria-label": "Notifications",
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: visible.map((notification, idx) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layout: !reduced,
+            initial: reduced ? { opacity: 1 } : { opacity: 0, ...SLIDE_FROM[position] },
+            animate: { opacity: 1, x: 0 },
+            exit: reduced ? { opacity: 0 } : { opacity: 0, ...SLIDE_FROM[position], transition: { duration: 0.15 } },
+            transition: { type: "spring", stiffness: 300, damping: 30 },
+            children: /* @__PURE__ */ jsx(
+              NotificationCard,
+              {
+                notification,
+                onDismiss,
+                reduced: !!reduced
+              }
+            )
+          },
+          notification.id
+        )) }),
+        overflow > 0 && /* @__PURE__ */ jsxs("div", { className: "text-center text-xs text-[hsl(var(--text-tertiary))] py-1", children: [
+          "+",
+          overflow,
+          " more ",
+          overflow === 1 ? "notification" : "notifications"
+        ] })
+      ]
+    }
+  );
+}
+function NotificationCard({
+  notification,
+  onDismiss,
+  reduced
+}) {
+  const { id, title, message, type, action, dismissible = true, duration = 0 } = notification;
+  const Icon = TYPE_ICON[type];
+  const timerRef = useRef(null);
+  const [progress, setProgress] = useState(100);
+  const startTimeRef = useRef(Date.now());
+  useEffect(() => {
+    if (duration <= 0) return;
+    startTimeRef.current = Date.now();
+    const intervalId = setInterval(() => {
+      const elapsed = Date.now() - startTimeRef.current;
+      const remaining = Math.max(0, 100 - elapsed / duration * 100);
+      setProgress(remaining);
+      if (remaining <= 0) {
+        clearInterval(intervalId);
+      }
+    }, 50);
+    timerRef.current = setTimeout(() => {
+      onDismiss(id);
+    }, duration);
+    return () => {
+      clearInterval(intervalId);
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [id, duration, onDismiss]);
+  const handleDismiss = useCallback(() => {
+    onDismiss(id);
+  }, [id, onDismiss]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-xl border-l-[3px] shadow-lg",
+        "bg-[hsl(var(--bg-elevated))] border border-[hsl(var(--border-subtle))]",
+        TYPE_COLOR[type]
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-4", children: [
+          /* @__PURE__ */ jsx(Icon, { className: cn("size-5 shrink-0 mt-0.5", TYPE_ICON_COLOR[type]) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[hsl(var(--text-primary))]", children: title }),
+            message && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-[hsl(var(--text-secondary))] line-clamp-2", children: message }),
+            action && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: action.onClick,
+                className: cn(
+                  "mt-2 text-xs font-medium cursor-pointer",
+                  "text-[hsl(var(--brand-primary))] hover:underline"
+                ),
+                children: action.label
+              }
+            )
+          ] }),
+          dismissible && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleDismiss,
+              className: cn(
+                "shrink-0 p-0.5 rounded cursor-pointer",
+                "text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-primary))]",
+                "hover:bg-[hsl(var(--bg-overlay))] transition-colors duration-100"
+              ),
+              "aria-label": "Dismiss notification",
+              children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+            }
+          )
+        ] }),
+        duration > 0 && /* @__PURE__ */ jsx("div", { className: "h-0.5 bg-[hsl(var(--bg-overlay))]", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("h-full transition-[width] duration-100", TYPE_PROGRESS_BG[type]),
+            style: { width: `${progress}%` }
+          }
+        ) })
+      ]
+    }
+  );
+}
+var TAG_COLOR_MAP = {
+  brand: "bg-[hsl(var(--brand-primary))]/15 text-[hsl(var(--brand-primary))]",
+  blue: "bg-[hsl(var(--brand-secondary))]/15 text-[hsl(var(--brand-secondary))]",
+  green: "bg-[hsl(var(--status-ok))]/15 text-[hsl(var(--status-ok))]",
+  yellow: "bg-[hsl(var(--status-warning))]/15 text-[hsl(var(--status-warning))]",
+  red: "bg-[hsl(var(--status-critical))]/15 text-[hsl(var(--status-critical))]",
+  orange: "bg-[hsl(var(--status-warning))]/20 text-[hsl(var(--status-warning))]",
+  purple: "bg-[hsl(270,60%,60%)]/15 text-[hsl(270,60%,65%)]",
+  pink: "bg-[hsl(330,60%,60%)]/15 text-[hsl(330,60%,65%)]",
+  teal: "bg-[hsl(180,60%,40%)]/15 text-[hsl(180,60%,55%)]",
+  gray: "bg-[hsl(var(--bg-overlay))] text-[hsl(var(--text-secondary))]"
+};
+function KanbanColumn({
+  title,
+  items,
+  count,
+  color,
+  onItemClick,
+  onAddItem,
+  className
+}) {
+  const reduced = useReducedMotion();
+  const displayCount = count ?? items.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col w-72 min-w-[18rem] rounded-2xl",
+        "bg-[hsl(var(--bg-surface))] border border-[hsl(var(--border-subtle))]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-[hsl(var(--border-subtle))]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            color && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "w-2 h-2 rounded-full shrink-0",
+                style: { backgroundColor: color }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[hsl(var(--text-primary))]", children: title }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 rounded-full text-[10px] font-medium tabular-nums bg-[hsl(var(--bg-overlay))] text-[hsl(var(--text-secondary))]", children: displayCount })
+          ] }),
+          onAddItem && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onAddItem,
+              className: cn(
+                "p-1 rounded-lg cursor-pointer",
+                "text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-primary))]",
+                "hover:bg-[hsl(var(--bg-overlay))] transition-colors duration-150"
+              ),
+              "aria-label": `Add item to ${title}`,
+              children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-2 space-y-2", children: items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8 text-xs text-[hsl(var(--text-tertiary))]", children: "No items" }) : items.map((item, idx) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: reduced ? void 0 : { opacity: 0, y: 8 },
+            animate: { opacity: 1, y: 0 },
+            transition: reduced ? { duration: 0 } : { delay: idx * 0.04, duration: 0.2 },
+            children: /* @__PURE__ */ jsx(KanbanCard, { item, onClick: onItemClick })
+          },
+          item.id
+        )) })
+      ]
+    }
+  );
+}
+function KanbanCard({
+  item,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onClick: onClick ? () => onClick(item) : void 0,
+      onKeyDown: onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") onClick(item);
+      } : void 0,
+      className: cn(
+        "rounded-xl p-3 border border-[hsl(var(--border-subtle))]",
+        "bg-[hsl(var(--bg-base))]",
+        onClick && "cursor-pointer hover:bg-[hsl(var(--bg-elevated))] hover:shadow-sm",
+        "transition-all duration-150"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[hsl(var(--text-primary))] line-clamp-2", children: item.title }),
+        item.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[hsl(var(--text-secondary))] line-clamp-2", children: item.description }),
+        (item.tags?.length || item.assignee) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2.5 gap-2", children: [
+          item.tags && item.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 min-w-0", children: item.tags.map((tag, i) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium whitespace-nowrap",
+                TAG_COLOR_MAP[tag.color]
+              ),
+              children: tag.label
+            },
+            i
+          )) }),
+          item.assignee && /* @__PURE__ */ jsx("div", { className: "shrink-0", title: item.assignee.name, children: item.assignee.avatar ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.assignee.avatar,
+              alt: item.assignee.name,
+              className: "size-6 rounded-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "size-6 rounded-full bg-[hsl(var(--bg-overlay))] flex items-center justify-center text-[10px] font-semibold text-[hsl(var(--text-secondary))]", children: item.assignee.name.slice(0, 2).toUpperCase() }) })
+        ] })
+      ]
+    }
+  );
+}
+function mean(nums) {
+  if (nums.length === 0) return 0;
+  return nums.reduce((a, b) => a + b, 0) / nums.length;
+}
+function stdDev(nums) {
+  if (nums.length < 2) return 0;
+  const m = mean(nums);
+  const variance = nums.reduce((sum, n) => sum + (n - m) ** 2, 0) / nums.length;
+  return Math.sqrt(variance);
+}
+function analyzeColumn(columnId, columnHeader, data, getValue) {
+  const suggestions = [];
+  const values = data.map(getValue).filter((v) => v != null);
+  if (values.length === 0) return suggestions;
+  const numericValues = values.map((v) => typeof v === "number" ? v : typeof v === "string" && v !== "" && !isNaN(Number(v)) ? Number(v) : null).filter((v) => v !== null);
+  if (numericValues.length > values.length * 0.7) {
+    const m = mean(numericValues);
+    const sd = stdDev(numericValues);
+    if (sd > 0) {
+      const outliers = numericValues.filter((v) => Math.abs(v - m) > 2 * sd);
+      if (outliers.length > 0 && outliers.length < numericValues.length * 0.3) {
+        suggestions.push({
+          column: columnId,
+          type: "outlier",
+          label: `${outliers.length} outlier${outliers.length > 1 ? "s" : ""} in ${columnHeader}`,
+          filter: () => {
+          }
+        });
+      }
+    }
+    const sorted = [...numericValues].sort((a, b) => a - b);
+    const median = sorted[Math.floor(sorted.length / 2)] ?? 0;
+    const aboveMedian = numericValues.filter((v) => v > median);
+    if (aboveMedian.length > 0 && aboveMedian.length < numericValues.length * 0.2) {
+      suggestions.push({
+        column: columnId,
+        type: "threshold",
+        label: `Top ${aboveMedian.length} high values in ${columnHeader}`,
+        filter: () => {
+        }
+      });
+    }
+  } else {
+    const strValues = values.map(String);
+    const freq = /* @__PURE__ */ new Map();
+    for (const v of strValues) {
+      freq.set(v, (freq.get(v) ?? 0) + 1);
+    }
+    for (const [val, count] of freq) {
+      if (count / strValues.length >= 0.9 && freq.size > 1) {
+        const otherCount = strValues.length - count;
+        suggestions.push({
+          column: columnId,
+          type: "pattern",
+          label: `Show non-"${val.length > 20 ? val.slice(0, 20) + "\u2026" : val}" (${otherCount})`,
+          filter: () => {
+          }
+        });
+      }
+    }
+    if (freq.size > 5) {
+      const topEntries = [...freq.entries()].sort((a, b) => b[1] - a[1]).slice(0, 5);
+      const topTotal = topEntries.reduce((s, e) => s + e[1], 0);
+      suggestions.push({
+        column: columnId,
+        type: "top-n",
+        label: `Top 5 ${columnHeader} (${Math.round(topTotal / strValues.length * 100)}%)`,
+        filter: () => {
+        }
+      });
+    }
+    const minorityValues = [...freq.entries()].filter(
+      ([, count]) => count / strValues.length < 0.12 && count > 0
+    );
+    if (minorityValues.length > 0 && minorityValues.length < freq.size) {
+      const totalMinority = minorityValues.reduce((s, [, c]) => s + c, 0);
+      suggestions.push({
+        column: columnId,
+        type: "pattern",
+        label: `Rare ${columnHeader} values (${totalMinority} rows)`,
+        filter: () => {
+        }
+      });
+    }
+  }
+  return suggestions;
+}
+var SUGGESTION_ICONS = {
+  outlier: AlertTriangle,
+  "top-n": TrendingUp,
+  pattern: Regex,
+  threshold: Hash
+};
+var SUGGESTION_COLORS = {
+  outlier: "bg-[hsl(var(--status-warning)/0.15)] text-[hsl(var(--status-warning))] border-[hsl(var(--status-warning)/0.3)]",
+  "top-n": "bg-[hsl(var(--brand-primary)/0.15)] text-[hsl(var(--brand-primary))] border-[hsl(var(--brand-primary)/0.3)]",
+  pattern: "bg-[hsl(var(--brand-secondary)/0.15)] text-[hsl(var(--brand-secondary))] border-[hsl(var(--brand-secondary)/0.3)]",
+  threshold: "bg-[hsl(var(--status-critical)/0.15)] text-[hsl(var(--status-critical))] border-[hsl(var(--status-critical)/0.3)]"
+};
+function SmartTable({
+  columns,
+  data,
+  onFilterSuggestion,
+  maxSuggestions = 6,
+  ...tableProps
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const [dismissed, setDismissed] = useState(/* @__PURE__ */ new Set());
+  const [appliedFilter, setAppliedFilter] = useState(null);
+  const [filteredData, setFilteredData] = useState(null);
+  const suggestions = useMemo(() => {
+    if (data.length < 3) return [];
+    const allSuggestions = [];
+    for (const colDef of columns) {
+      const col = colDef;
+      const columnId = col.accessorKey ?? col.id ?? "";
+      const columnHeader = typeof col.header === "string" ? col.header : columnId;
+      if (!columnId) continue;
+      const getValue = col.accessorFn ? col.accessorFn : (row) => row[columnId];
+      const columnSuggestions = analyzeColumn(columnId, columnHeader, data, getValue);
+      for (const s of columnSuggestions) {
+        s.filter = () => {
+          const vals = data.map(getValue).filter((v) => v != null);
+          let filtered;
+          switch (s.type) {
+            case "outlier": {
+              const nums = vals.map((v) => typeof v === "number" ? v : Number(v)).filter((v) => !isNaN(v));
+              const m = mean(nums);
+              const sd = stdDev(nums);
+              filtered = data.filter((row) => {
+                const v = getValue(row);
+                const n = typeof v === "number" ? v : Number(v);
+                return !isNaN(n) && Math.abs(n - m) > 2 * sd;
+              });
+              break;
+            }
+            case "top-n": {
+              const freq = /* @__PURE__ */ new Map();
+              for (const v of vals) freq.set(String(v), (freq.get(String(v)) ?? 0) + 1);
+              const topKeys = new Set([...freq.entries()].sort((a, b) => b[1] - a[1]).slice(0, 5).map((e) => e[0]));
+              filtered = data.filter((row) => topKeys.has(String(getValue(row))));
+              break;
+            }
+            case "threshold": {
+              const nums = vals.map((v) => typeof v === "number" ? v : Number(v)).filter((v) => !isNaN(v));
+              const sorted = [...nums].sort((a, b) => a - b);
+              const median = sorted[Math.floor(sorted.length / 2)] ?? 0;
+              filtered = data.filter((row) => {
+                const v = getValue(row);
+                const n = typeof v === "number" ? v : Number(v);
+                return !isNaN(n) && n > median;
+              });
+              break;
+            }
+            case "pattern": {
+              const freq = /* @__PURE__ */ new Map();
+              for (const v of vals) freq.set(String(v), (freq.get(String(v)) ?? 0) + 1);
+              let dominant = "";
+              let maxCount = 0;
+              for (const [k, c] of freq) {
+                if (c > maxCount) {
+                  dominant = k;
+                  maxCount = c;
+                }
+              }
+              if (maxCount / vals.length >= 0.9) {
+                filtered = data.filter((row) => String(getValue(row)) !== dominant);
+              } else {
+                const rareKeys = new Set(
+                  [...freq.entries()].filter(([, c]) => c / vals.length < 0.12).map((e) => e[0])
+                );
+                filtered = data.filter((row) => rareKeys.has(String(getValue(row))));
+              }
+              break;
+            }
+            default:
+              filtered = data;
+          }
+          setFilteredData(filtered);
+          setAppliedFilter(s.label);
+          onFilterSuggestion?.(s);
+        };
+      }
+      allSuggestions.push(...columnSuggestions);
+    }
+    return allSuggestions.slice(0, maxSuggestions);
+  }, [data, columns, maxSuggestions, onFilterSuggestion]);
+  const visibleSuggestions = suggestions.filter((s) => !dismissed.has(s.label));
+  const handleDismiss = useCallback((label) => {
+    setDismissed((prev) => new Set(prev).add(label));
+  }, []);
+  const handleClearFilter = useCallback(() => {
+    setFilteredData(null);
+    setAppliedFilter(null);
+  }, []);
+  const displayData = filteredData ?? data;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: visibleSuggestions.length > 0 && !appliedFilter && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: prefersReducedMotion ? void 0 : { opacity: 0, y: -8 },
+        animate: prefersReducedMotion ? void 0 : { opacity: 1, y: 0 },
+        exit: prefersReducedMotion ? void 0 : { opacity: 0, y: -8 },
+        transition: { duration: 0.2 },
+        className: "mb-3 flex flex-wrap items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-[11px] font-medium text-[hsl(var(--text-tertiary))] uppercase tracking-wider", children: [
+            /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 text-[hsl(var(--brand-primary))]" }),
+            "Suggested Filters"
+          ] }),
+          visibleSuggestions.map((suggestion) => {
+            const Icon = SUGGESTION_ICONS[suggestion.type];
+            return /* @__PURE__ */ jsxs(
+              motion.button,
+              {
+                layout: !prefersReducedMotion,
+                initial: prefersReducedMotion ? void 0 : { opacity: 0, scale: 0.9 },
+                animate: prefersReducedMotion ? void 0 : { opacity: 1, scale: 1 },
+                exit: prefersReducedMotion ? void 0 : { opacity: 0, scale: 0.9 },
+                transition: { duration: 0.15 },
+                onClick: suggestion.filter,
+                className: cn(
+                  "group inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-[12px] font-medium",
+                  "transition-all hover:shadow-sm cursor-pointer",
+                  SUGGESTION_COLORS[suggestion.type]
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" }),
+                  suggestion.label,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      role: "button",
+                      tabIndex: 0,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleDismiss(suggestion.label);
+                      },
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") {
+                          e.stopPropagation();
+                          handleDismiss(suggestion.label);
+                        }
+                      },
+                      className: "ml-0.5 opacity-0 group-hover:opacity-100 transition-opacity rounded-full p-0.5 hover:bg-[hsl(var(--bg-overlay)/0.3)]",
+                      children: /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
+                    }
+                  )
+                ]
+              },
+              suggestion.label
+            );
+          })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: appliedFilter && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: prefersReducedMotion ? void 0 : { opacity: 0, y: -4 },
+        animate: prefersReducedMotion ? void 0 : { opacity: 1, y: 0 },
+        exit: prefersReducedMotion ? void 0 : { opacity: 0, y: -4 },
+        transition: { duration: 0.15 },
+        className: "mb-3 flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-[hsl(var(--brand-primary)/0.15)] border border-[hsl(var(--brand-primary)/0.3)] px-3 py-1 text-[12px] font-medium text-[hsl(var(--brand-primary))]", children: [
+            /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3" }),
+            appliedFilter,
+            /* @__PURE__ */ jsxs("span", { className: "ml-1 tabular-nums text-[11px] opacity-70", children: [
+              "(",
+              displayData.length,
+              " row",
+              displayData.length !== 1 ? "s" : "",
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: handleClearFilter,
+              className: "inline-flex items-center gap-1 rounded-full px-2 py-1 text-[11px] font-medium text-[hsl(var(--text-secondary))] hover:text-[hsl(var(--text-primary))] hover:bg-[hsl(var(--bg-elevated)/0.5)] transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
+                "Clear"
+              ]
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        columns,
+        data: displayData,
+        ...tableProps
+      }
+    )
+  ] });
+}
+function easeOutCubic2(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+function formatRelativeSeconds(ms) {
+  const secs = Math.floor(ms / 1e3);
+  if (secs < 1) return "just now";
+  if (secs < 60) return `${secs}s ago`;
+  if (secs < 3600) return `${Math.floor(secs / 60)}m ago`;
+  return `${Math.floor(secs / 3600)}h ago`;
+}
+var SIZE_CLASSES2 = {
+  sm: { value: "text-lg", label: "text-[11px]", delta: "text-[10px]", dot: "h-1.5 w-1.5", gap: "gap-1" },
+  md: { value: "text-2xl", label: "text-xs", delta: "text-[11px]", dot: "h-2 w-2", gap: "gap-1.5" },
+  lg: { value: "text-3xl", label: "text-sm", delta: "text-xs", dot: "h-2.5 w-2.5", gap: "gap-2" },
+  xl: { value: "text-4xl", label: "text-base", delta: "text-sm", dot: "h-3 w-3", gap: "gap-2" }
+};
+function AnimatedNumber({
+  value,
+  format,
+  duration = 400,
+  animateEnabled,
+  reduced,
+  className
+}) {
+  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 || !animateEnabled || 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 = easeOutCubic2(progress);
+      setDisplayed(from + (to - from) * eased);
+      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, animateEnabled]);
+  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 RealtimeValue({
+  value,
+  label,
+  format,
+  lastUpdated,
+  staleAfterMs = 3e4,
+  connectionState = "connected",
+  previousValue,
+  animate = true,
+  size = "md",
+  className
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const sizeClasses6 = SIZE_CLASSES2[size];
+  const [staleness, setStaleness] = useState(0);
+  useEffect(() => {
+    if (!lastUpdated) return;
+    const getMs = () => Date.now() - new Date(lastUpdated).getTime();
+    setStaleness(getMs());
+    const interval = setInterval(() => setStaleness(getMs()), 1e3);
+    return () => clearInterval(interval);
+  }, [lastUpdated]);
+  const isStale = lastUpdated ? staleness > staleAfterMs : false;
+  const isVeryStale = lastUpdated ? staleness > staleAfterMs * 2 : false;
+  const freshnessColor = useMemo(() => {
+    if (connectionState === "disconnected") return "bg-[hsl(var(--status-critical))]";
+    if (isVeryStale) return "bg-[hsl(var(--status-critical))]";
+    if (isStale) return "bg-[hsl(var(--status-warning))]";
+    return "bg-[hsl(var(--status-ok))]";
+  }, [connectionState, isStale, isVeryStale]);
+  const delta = typeof value === "number" && previousValue !== void 0 ? value - previousValue : null;
+  const deltaSign = delta !== null ? delta > 0 ? "+" : delta < 0 ? "" : "" : null;
+  const isNumeric = typeof value === "number";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative inline-flex flex-col",
+        sizeClasses6.gap,
+        isStale && "opacity-60",
+        className
+      ),
+      title: lastUpdated ? `Last updated: ${new Date(lastUpdated).toLocaleString()} (${formatRelativeSeconds(staleness)})` : void 0,
+      children: [
+        label && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: /* @__PURE__ */ jsx("span", { className: cn("font-medium text-[hsl(var(--text-secondary))]", sizeClasses6.label), children: label }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx("span", { className: cn("rounded-full", sizeClasses6.dot, freshnessColor) }),
+            connectionState === "connected" && !isStale && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "absolute rounded-full animate-ping",
+                  sizeClasses6.dot,
+                  "bg-[hsl(var(--status-ok)/0.5)]"
+                ),
+                style: { animationDuration: "2s" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+            isNumeric ? /* @__PURE__ */ jsx(
+              AnimatedNumber,
+              {
+                value,
+                format,
+                animateEnabled: animate,
+                reduced: prefersReducedMotion,
+                className: cn("font-semibold text-[hsl(var(--text-primary))]", sizeClasses6.value)
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: cn("font-semibold text-[hsl(var(--text-primary))] tabular-nums", sizeClasses6.value), children: value }),
+            /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+              delta !== null && delta !== 0 && /* @__PURE__ */ jsxs(
+                motion.span,
+                {
+                  initial: prefersReducedMotion ? void 0 : { opacity: 0, x: -4 },
+                  animate: prefersReducedMotion ? void 0 : { opacity: 1, x: 0 },
+                  exit: prefersReducedMotion ? void 0 : { opacity: 0, x: -4 },
+                  transition: { duration: 0.15 },
+                  className: cn(
+                    "inline-flex items-center gap-0.5 font-medium tabular-nums",
+                    sizeClasses6.delta,
+                    delta > 0 ? "text-[hsl(var(--status-ok))]" : "text-[hsl(var(--status-critical))]"
+                  ),
+                  children: [
+                    delta > 0 ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }),
+                    deltaSign,
+                    format ? format(Math.abs(delta)) : Math.abs(delta).toLocaleString()
+                  ]
+                }
+              ),
+              delta === 0 && /* @__PURE__ */ jsxs(
+                motion.span,
+                {
+                  initial: prefersReducedMotion ? void 0 : { opacity: 0 },
+                  animate: prefersReducedMotion ? void 0 : { opacity: 1 },
+                  className: cn(
+                    "inline-flex items-center gap-0.5 font-medium text-[hsl(var(--text-tertiary))]",
+                    sizeClasses6.delta
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }),
+                    "0"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          connectionState !== "connected" && /* @__PURE__ */ jsxs("span", { className: "ml-1", children: [
+            connectionState === "reconnecting" && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 text-[hsl(var(--status-warning))] animate-spin" }),
+            connectionState === "disconnected" && /* @__PURE__ */ jsx(WifiOff, { className: "h-4 w-4 text-[hsl(var(--status-critical))]" })
+          ] })
+        ] }),
+        lastUpdated && /* @__PURE__ */ jsx("span", { className: cn("text-[hsl(var(--text-tertiary))] tabular-nums", sizeClasses6.delta), children: formatRelativeSeconds(staleness) })
+      ]
+    }
+  );
+}
+function fuzzyScore(query, target) {
+  const q = query.toLowerCase();
+  const t = target.toLowerCase();
+  if (t === q) return 100;
+  if (t.startsWith(q)) return 80;
+  if (t.includes(q)) return 60;
+  let qi = 0;
+  let score = 0;
+  for (let ti = 0; ti < t.length && qi < q.length; ti++) {
+    if (t[ti] === q[qi]) {
+      score += 10;
+      qi++;
+    }
+  }
+  return qi === q.length ? score : 0;
+}
+function scoreItem(query, item) {
+  if (!query) return 0;
+  let best = fuzzyScore(query, item.label);
+  if (item.description) best = Math.max(best, fuzzyScore(query, item.description) * 0.8);
+  if (item.keywords) {
+    for (const kw of item.keywords) {
+      best = Math.max(best, fuzzyScore(query, kw) * 0.9);
+    }
+  }
+  return best;
+}
+function CommandBar({
+  items,
+  placeholder = "Type a command\u2026",
+  hotkey = "k",
+  onSearch,
+  recentKey = "ui-kit-command-recent",
+  maxRecent = 5,
+  className
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [asyncResults, setAsyncResults] = useState([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const [recentIds, setRecentIds] = useState(() => {
+    if (typeof window === "undefined") return [];
+    try {
+      const raw = JSON.parse(localStorage.getItem(recentKey) ?? "[]");
+      return Array.isArray(raw) ? raw.filter((x) => typeof x === "string" && x.length < 256).slice(0, maxRecent) : [];
+    } catch {
+      return [];
+    }
+  });
+  const saveRecent = useCallback(
+    (id) => {
+      const updated = [id, ...recentIds.filter((r) => r !== id)].slice(0, maxRecent);
+      setRecentIds(updated);
+      try {
+        localStorage.setItem(recentKey, JSON.stringify(updated));
+      } catch {
+      }
+    },
+    [recentIds, recentKey, maxRecent]
+  );
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === hotkey) {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+      if (e.key === "Escape" && open) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [hotkey, open]);
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setActiveIndex(0);
+      setAsyncResults([]);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [open]);
+  useEffect(() => {
+    if (open) {
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = prev;
+      };
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!onSearch || !query) {
+      setAsyncResults([]);
+      return;
+    }
+    setIsSearching(true);
+    const timer = setTimeout(async () => {
+      try {
+        const results = await onSearch(query);
+        setAsyncResults(results);
+      } catch {
+        setAsyncResults([]);
+      } finally {
+        setIsSearching(false);
+      }
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [query, onSearch]);
+  const displayItems = useMemo(() => {
+    const allItems = [...items, ...asyncResults];
+    if (!query) {
+      const recentItems = recentIds.map((id) => allItems.find((i) => i.id === id)).filter((i) => i !== void 0);
+      const rest = allItems.filter((i) => !recentIds.includes(i.id));
+      return [
+        ...recentItems.map((i) => ({ ...i, group: "Recent" })),
+        ...rest
+      ];
+    }
+    return allItems.map((item) => ({ item, score: scoreItem(query, item) })).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score).map(({ item }) => item);
+  }, [items, asyncResults, query, recentIds]);
+  const groups = useMemo(() => {
+    const grouped = /* @__PURE__ */ new Map();
+    for (const item of displayItems) {
+      const group = item.group ?? "";
+      const arr = grouped.get(group);
+      if (arr) arr.push(item);
+      else grouped.set(group, [item]);
+    }
+    return grouped;
+  }, [displayItems]);
+  const flatItems = displayItems;
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [query]);
+  const handleSelect = useCallback(
+    (item) => {
+      saveRecent(item.id);
+      setOpen(false);
+      item.onSelect();
+    },
+    [saveRecent]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, flatItems.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const item = flatItems[activeIndex];
+        if (item) handleSelect(item);
+      }
+    },
+    [flatItems, activeIndex, handleSelect]
+  );
+  useEffect(() => {
+    if (!listRef.current) return;
+    const active = listRef.current.querySelector('[data-active="true"]');
+    active?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex]);
+  const isMac = typeof navigator !== "undefined" && /Mac|iPhone/.test(navigator.userAgent ?? "");
+  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.15 },
+        className: "absolute inset-0 bg-[hsl(var(--bg-base)/0.6)] backdrop-blur-sm",
+        onClick: () => setOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: prefersReducedMotion ? void 0 : { opacity: 0, scale: 0.96, y: -20 },
+        animate: prefersReducedMotion ? void 0 : { opacity: 1, scale: 1, y: 0 },
+        exit: prefersReducedMotion ? void 0 : { opacity: 0, scale: 0.96, y: -20 },
+        transition: prefersReducedMotion ? { duration: 0 } : { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
+        className: cn(
+          "absolute left-1/2 top-[15%] -translate-x-1/2",
+          "w-full max-w-lg rounded-2xl overflow-hidden",
+          "border border-[hsl(var(--border-default))]",
+          "bg-[hsl(var(--bg-elevated))] shadow-2xl",
+          "flex flex-col max-h-[70vh]",
+          className
+        ),
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-[hsl(var(--border-subtle)/0.5)]", children: [
+            /* @__PURE__ */ jsx(Search, { className: "h-5 w-5 text-[hsl(var(--text-tertiary))] shrink-0" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                placeholder,
+                className: "flex-1 bg-transparent text-[hsl(var(--text-primary))] text-sm placeholder:text-[hsl(var(--text-tertiary))] outline-none"
+              }
+            ),
+            /* @__PURE__ */ jsx("kbd", { className: "hidden sm:inline-flex items-center gap-1 rounded-md border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))] px-1.5 py-0.5 text-[10px] text-[hsl(var(--text-tertiary))] font-mono", children: "Esc" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { ref: listRef, className: "flex-1 overflow-y-auto py-2", children: [
+            flatItems.length === 0 && !isSearching && /* @__PURE__ */ jsx("div", { className: "px-4 py-8 text-center text-sm text-[hsl(var(--text-tertiary))]", children: query ? "No results found." : "No commands available." }),
+            isSearching && flatItems.length === 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-8 flex items-center justify-center gap-2 text-sm text-[hsl(var(--text-tertiary))]", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded-full border-2 border-[hsl(var(--brand-primary))] border-t-transparent animate-spin" }),
+              "Searching..."
+            ] }),
+            [...groups.entries()].map(([groupName, groupItems]) => {
+              return /* @__PURE__ */ jsxs("div", { children: [
+                groupName && /* @__PURE__ */ jsx("div", { className: "px-4 pt-2 pb-1", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-[hsl(var(--text-tertiary))]", children: groupName }) }),
+                groupItems.map((item) => {
+                  const globalIdx = flatItems.indexOf(item);
+                  const isActive = globalIdx === activeIndex;
+                  const Icon = item.icon;
+                  const isRecent = item.group === "Recent";
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      "data-active": isActive,
+                      onClick: () => handleSelect(item),
+                      onMouseEnter: () => setActiveIndex(globalIdx),
+                      className: cn(
+                        "w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors",
+                        isActive ? "bg-[hsl(var(--brand-primary)/0.1)]" : "hover:bg-[hsl(var(--bg-surface)/0.5)]"
+                      ),
+                      children: [
+                        Icon ? /* @__PURE__ */ jsx(Icon, { className: cn(
+                          "h-4 w-4 shrink-0",
+                          isActive ? "text-[hsl(var(--brand-primary))]" : "text-[hsl(var(--text-tertiary))]"
+                        ) }) : isRecent ? /* @__PURE__ */ jsx(Clock, { className: cn(
+                          "h-4 w-4 shrink-0",
+                          isActive ? "text-[hsl(var(--brand-primary))]" : "text-[hsl(var(--text-tertiary))]"
+                        ) }) : /* @__PURE__ */ jsx("div", { className: "h-4 w-4 shrink-0" }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ jsx("div", { className: cn(
+                            "text-sm font-medium truncate",
+                            isActive ? "text-[hsl(var(--text-primary))]" : "text-[hsl(var(--text-primary))]"
+                          ), children: item.label }),
+                          item.description && /* @__PURE__ */ jsx("div", { className: "text-[11px] text-[hsl(var(--text-tertiary))] truncate mt-0.5", children: item.description })
+                        ] }),
+                        item.shortcut && /* @__PURE__ */ jsx("kbd", { className: "flex items-center gap-0.5 rounded-md border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))] px-1.5 py-0.5 text-[10px] text-[hsl(var(--text-tertiary))] font-mono shrink-0", children: item.shortcut }),
+                        isActive && /* @__PURE__ */ jsx(CornerDownLeft, { className: "h-3.5 w-3.5 text-[hsl(var(--text-tertiary))] shrink-0" })
+                      ]
+                    },
+                    item.id
+                  );
+                })
+              ] }, groupName || "__ungrouped");
+            })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 px-4 py-2 border-t border-[hsl(var(--border-subtle)/0.5)] text-[10px] text-[hsl(var(--text-tertiary))]", children: [
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))] px-1 py-0.5 font-mono", children: "\u2191\u2193" }),
+              "Navigate"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))] px-1 py-0.5 font-mono", children: "\u21B5" }),
+              "Select"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))] px-1 py-0.5 font-mono", children: "Esc" }),
+              "Close"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "ml-auto inline-flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))] px-1 py-0.5 font-mono", children: isMac ? "\u2318" : "Ctrl+" }),
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))] px-1 py-0.5 font-mono uppercase", children: hotkey }),
+              "Toggle"
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+function SortableList({
+  items,
+  onReorder,
+  renderItem,
+  direction = "vertical",
+  className
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const [dragIdx, setDragIdx] = useState(null);
+  const [overIdx, setOverIdx] = useState(null);
+  const [kbPickedIdx, setKbPickedIdx] = useState(null);
+  const containerRef = useRef(null);
+  const startPos = useRef({ x: 0, y: 0 });
+  const dragItemId = useRef(null);
+  const dragIdxRef = useRef(null);
+  const overIdxRef = useRef(null);
+  const handlePointerDown = useCallback(
+    (index) => (e) => {
+      e.preventDefault();
+      if (e.button !== 0) return;
+      setDragIdx(index);
+      setOverIdx(index);
+      dragIdxRef.current = index;
+      overIdxRef.current = index;
+      dragItemId.current = items[index]?.id ?? null;
+      startPos.current = { x: e.clientX, y: e.clientY };
+      const handlePointerMove = (ev) => {
+        if (!containerRef.current) return;
+        const container = containerRef.current;
+        const children = Array.from(container.children);
+        for (let i = 0; i < children.length; i++) {
+          const rect = children[i].getBoundingClientRect();
+          const midX = rect.left + rect.width / 2;
+          const midY = rect.top + rect.height / 2;
+          const isOver = direction === "vertical" ? ev.clientY < midY + rect.height / 2 && ev.clientY > midY - rect.height / 2 : ev.clientX < midX + rect.width / 2 && ev.clientX > midX - rect.width / 2;
+          if (isOver) {
+            overIdxRef.current = i;
+            setOverIdx(i);
+            break;
+          }
+        }
+      };
+      const handlePointerUp = () => {
+        document.removeEventListener("pointermove", handlePointerMove);
+        document.removeEventListener("pointerup", handlePointerUp);
+        const prev = dragIdxRef.current;
+        const over = overIdxRef.current;
+        if (prev !== null && over !== null && prev !== over) {
+          const newItems = [...items];
+          const [moved] = newItems.splice(prev, 1);
+          if (moved) newItems.splice(over, 0, moved);
+          onReorder(newItems);
+        }
+        dragIdxRef.current = null;
+        overIdxRef.current = null;
+        setDragIdx(null);
+        setOverIdx(null);
+      };
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
+    },
+    [items, onReorder, direction]
+  );
+  const handleKeyDown = useCallback(
+    (index) => (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        if (kbPickedIdx === null) {
+          setKbPickedIdx(index);
+        } else {
+          if (kbPickedIdx !== index) {
+            const newItems = [...items];
+            const [moved] = newItems.splice(kbPickedIdx, 1);
+            if (moved) newItems.splice(index, 0, moved);
+            onReorder(newItems);
+          }
+          setKbPickedIdx(null);
+        }
+      } else if (e.key === "Escape") {
+        setKbPickedIdx(null);
+      } else if (kbPickedIdx !== null) {
+        const isUp = direction === "vertical" ? e.key === "ArrowUp" : e.key === "ArrowLeft";
+        const isDown = direction === "vertical" ? e.key === "ArrowDown" : e.key === "ArrowRight";
+        if (isUp && kbPickedIdx > 0) {
+          e.preventDefault();
+          const newItems = [...items];
+          const [moved] = newItems.splice(kbPickedIdx, 1);
+          const newIdx = kbPickedIdx - 1;
+          if (moved) newItems.splice(newIdx, 0, moved);
+          onReorder(newItems);
+          setKbPickedIdx(newIdx);
+        } else if (isDown && kbPickedIdx < items.length - 1) {
+          e.preventDefault();
+          const newItems = [...items];
+          const [moved] = newItems.splice(kbPickedIdx, 1);
+          const newIdx = kbPickedIdx + 1;
+          if (moved) newItems.splice(newIdx, 0, moved);
+          onReorder(newItems);
+          setKbPickedIdx(newIdx);
+        }
+      }
+    },
+    [items, onReorder, kbPickedIdx, direction]
+  );
+  const getVisualItems = useCallback(() => {
+    if (dragIdx === null || overIdx === null || dragIdx === overIdx) return items;
+    const visual = [...items];
+    const [moved] = visual.splice(dragIdx, 1);
+    if (moved) visual.splice(overIdx, 0, moved);
+    return visual;
+  }, [items, dragIdx, overIdx]);
+  const visualItems = dragIdx !== null ? getVisualItems() : items;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "flex",
+        direction === "vertical" ? "flex-col" : "flex-row flex-wrap",
+        className
+      ),
+      role: "listbox",
+      "aria-label": "Sortable list",
+      children: /* @__PURE__ */ jsx(AnimatePresence, { children: visualItems.map((item, index) => {
+        const isDragging = dragIdx !== null && item.id === dragItemId.current;
+        const isKbPicked = kbPickedIdx !== null && items[kbPickedIdx]?.id === item.id;
+        const dragHandleProps = {
+          onPointerDown: handlePointerDown(items.findIndex((i) => i.id === item.id)),
+          isDragging: isDragging || isKbPicked,
+          onKeyDown: handleKeyDown(items.findIndex((i) => i.id === item.id)),
+          tabIndex: 0,
+          role: "option",
+          "aria-roledescription": "sortable item"
+        };
+        return /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            layout: !prefersReducedMotion,
+            transition: prefersReducedMotion ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 35, mass: 0.5 },
+            className: cn(
+              "relative",
+              isDragging && "z-10 opacity-80",
+              isKbPicked && "ring-2 ring-[hsl(var(--brand-primary))] rounded-lg"
+            ),
+            role: "option",
+            "aria-selected": isKbPicked,
+            children: [
+              dragIdx !== null && overIdx === index && !isDragging && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute z-20 bg-[hsl(var(--brand-primary))] rounded-full",
+                    direction === "vertical" ? "left-0 right-0 -top-px h-0.5" : "top-0 bottom-0 -left-px w-0.5"
+                  )
+                }
+              ),
+              renderItem(item, index, dragHandleProps)
+            ]
+          },
+          item.id
+        );
+      }) })
+    }
+  );
+}
+function DragHandle(props) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      onPointerDown: props.onPointerDown,
+      onKeyDown: props.onKeyDown,
+      tabIndex: props.tabIndex,
+      role: props.role,
+      "aria-roledescription": props["aria-roledescription"],
+      className: cn(
+        "inline-flex items-center justify-center p-1 rounded cursor-grab touch-none select-none",
+        "text-[hsl(var(--text-disabled))] hover:text-[hsl(var(--text-secondary))] transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--brand-primary))]",
+        props.isDragging && "cursor-grabbing text-[hsl(var(--brand-primary))]"
+      ),
+      children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+    }
+  );
+}
+function InfiniteScroll({
+  items,
+  renderItem,
+  loadMore,
+  hasMore,
+  isLoading = false,
+  threshold = 200,
+  itemHeight,
+  getItemKey,
+  emptyState,
+  className
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const containerRef = useRef(null);
+  const sentinelRef = useRef(null);
+  const [showScrollTop, setShowScrollTop] = useState(false);
+  const loadingRef = useRef(false);
+  const loadMoreRef = useRef(loadMore);
+  useEffect(() => {
+    loadMoreRef.current = loadMore;
+  }, [loadMore]);
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting && hasMore && !isLoading && !loadingRef.current) {
+          loadingRef.current = true;
+          const result = loadMoreRef.current();
+          if (result && typeof result.then === "function") {
+            result.then(() => {
+              loadingRef.current = false;
+            }).catch(() => {
+              loadingRef.current = false;
+            });
+          } else {
+            loadingRef.current = false;
+          }
+        }
+      },
+      {
+        root: containerRef.current,
+        rootMargin: `0px 0px ${threshold}px 0px`
+      }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMore, isLoading, threshold]);
+  useEffect(() => {
+    if (!isLoading) loadingRef.current = false;
+  }, [isLoading]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const handler = () => {
+      setShowScrollTop(container.scrollTop > 400);
+    };
+    container.addEventListener("scroll", handler, { passive: true });
+    return () => container.removeEventListener("scroll", handler);
+  }, []);
+  const scrollToTop = useCallback(() => {
+    containerRef.current?.scrollTo({ top: 0, behavior: prefersReducedMotion ? "instant" : "smooth" });
+  }, [prefersReducedMotion]);
+  const [scrollTop, setScrollTop] = useState(0);
+  const containerHeight = useRef(0);
+  useEffect(() => {
+    if (!itemHeight) return;
+    const container = containerRef.current;
+    if (!container) return;
+    containerHeight.current = container.clientHeight;
+    const handler = () => {
+      setScrollTop(container.scrollTop);
+      containerHeight.current = container.clientHeight;
+    };
+    container.addEventListener("scroll", handler, { passive: true });
+    return () => container.removeEventListener("scroll", handler);
+  }, [itemHeight]);
+  const virtualizedContent = useMemo(() => {
+    if (!itemHeight) return null;
+    const visibleHeight = containerHeight.current || 600;
+    const buffer = 5;
+    const startIdx = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer);
+    const endIdx = Math.min(
+      items.length,
+      Math.ceil((scrollTop + visibleHeight) / itemHeight) + buffer
+    );
+    const totalHeight = items.length * itemHeight;
+    const offsetTop = startIdx * itemHeight;
+    return {
+      totalHeight,
+      offsetTop,
+      visibleItems: items.slice(startIdx, endIdx),
+      startIdx
+    };
+  }, [items, itemHeight, scrollTop]);
+  if (items.length === 0 && !isLoading && !hasMore) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center min-h-[200px]", className), children: emptyState ?? /* @__PURE__ */ jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--text-tertiary))]", children: "No items to display." }) }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative overflow-y-auto", className),
+      children: [
+        virtualizedContent ? /* @__PURE__ */ jsx("div", { style: { height: virtualizedContent.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: virtualizedContent.offsetTop, left: 0, right: 0 }, children: virtualizedContent.visibleItems.map((item, i) => /* @__PURE__ */ jsx("div", { style: { height: itemHeight }, children: renderItem(item, virtualizedContent.startIdx + i) }, virtualizedContent.startIdx + i)) }) }) : (
+          /* Non-virtualized rendering */
+          items.map((item, index) => /* @__PURE__ */ jsx("div", { children: renderItem(item, index) }, getItemKey ? getItemKey(item, index) : index))
+        ),
+        isLoading && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-6 gap-2", children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 text-[hsl(var(--brand-primary))] animate-spin" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-[hsl(var(--text-tertiary))]", children: "Loading more..." })
+        ] }),
+        isLoading && items.length === 0 && /* @__PURE__ */ jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "skeleton-shimmer h-16 rounded-xl" }, i)) }),
+        !hasMore && items.length > 0 && /* @__PURE__ */ jsx("div", { className: "py-4 text-center", children: /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-[hsl(var(--text-tertiary))]", children: [
+          "All ",
+          items.length,
+          " item",
+          items.length !== 1 ? "s" : "",
+          " loaded"
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { ref: sentinelRef, className: "h-px w-full", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: showScrollTop && /* @__PURE__ */ jsxs(
+          motion.button,
+          {
+            initial: prefersReducedMotion ? void 0 : { opacity: 0, scale: 0.8 },
+            animate: prefersReducedMotion ? void 0 : { opacity: 1, scale: 1 },
+            exit: prefersReducedMotion ? void 0 : { opacity: 0, scale: 0.8 },
+            transition: { duration: 0.15 },
+            onClick: scrollToTop,
+            className: cn(
+              "sticky bottom-4 left-1/2 -translate-x-1/2 z-10",
+              "inline-flex items-center gap-1.5 rounded-full",
+              "px-3 py-2 text-[11px] font-medium",
+              "bg-[hsl(var(--bg-elevated))] border border-[hsl(var(--border-default))]",
+              "text-[hsl(var(--text-secondary))] shadow-lg",
+              "hover:bg-[hsl(var(--bg-overlay))] hover:text-[hsl(var(--text-primary))] transition-colors",
+              "cursor-pointer"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" }),
+              "Back to top"
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function hexToRgb(hex) {
+  const clean = hex.replace("#", "");
+  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
+  const num = parseInt(full, 16);
+  return { r: num >> 16 & 255, g: num >> 8 & 255, b: num & 255 };
+}
+function rgbToHex(r, g, b) {
+  return "#" + [r, g, b].map((c) => Math.round(c).toString(16).padStart(2, "0")).join("");
+}
+function rgbToHsl(r, g, b) {
+  const rn = r / 255, gn = g / 255, bn = b / 255;
+  const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  if (max === min) return { h: 0, s: 0, l };
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
+  else if (max === gn) h = ((bn - rn) / d + 2) / 6;
+  else h = ((rn - gn) / d + 4) / 6;
+  return { h, s, l };
+}
+function hslToRgb(h, s, l) {
+  if (s === 0) {
+    const v = Math.round(l * 255);
+    return { r: v, g: v, b: v };
+  }
+  const hue2rgb = (p2, q2, t) => {
+    const tt = t < 0 ? t + 1 : t > 1 ? t - 1 : t;
+    if (tt < 1 / 6) return p2 + (q2 - p2) * 6 * tt;
+    if (tt < 1 / 2) return q2;
+    if (tt < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - tt) * 6;
+    return p2;
+  };
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  return {
+    r: Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+    g: Math.round(hue2rgb(p, q, h) * 255),
+    b: Math.round(hue2rgb(p, q, h - 1 / 3) * 255)
+  };
+}
+function formatColor(hex, fmt) {
+  if (fmt === "hex") return hex;
+  const { r, g, b } = hexToRgb(hex);
+  if (fmt === "rgb") return `rgb(${r}, ${g}, ${b})`;
+  const { h, s, l } = rgbToHsl(r, g, b);
+  return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
+}
+function isSafeColor(c) {
+  return /^#[0-9a-f]{3,8}$/i.test(c) || /^rgba?\(\s*[\d.]+/.test(c) || /^hsla?\(\s*[\d.]+/.test(c);
+}
+var RECENT_COLORS_KEY = "ui-kit-recent-colors";
+var MAX_RECENT = 8;
+function ColorInput({
+  value,
+  onChange,
+  label,
+  presets,
+  showAlpha = false,
+  format = "hex",
+  className
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const isValidHex = /^#[0-9a-f]{3,8}$/i.test(value);
+  const safeValue = isValidHex ? value : "#000000";
+  const [open, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [textInput, setTextInput] = useState("");
+  const [alpha, setAlpha] = useState(1);
+  const panelRef = useRef(null);
+  const satAreaRef = useRef(null);
+  const copyTimerRef = useRef(null);
+  useEffect(() => () => {
+    if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+  }, []);
+  const [recentColors, setRecentColors] = useState(() => {
+    if (typeof window === "undefined") return [];
+    try {
+      const raw = JSON.parse(localStorage.getItem(RECENT_COLORS_KEY) ?? "[]");
+      return Array.isArray(raw) ? raw.filter((x) => typeof x === "string" && x.length < 256).slice(0, MAX_RECENT) : [];
+    } catch {
+      return [];
+    }
+  });
+  const addRecent = useCallback((color) => {
+    setRecentColors((prev) => {
+      const updated = [color, ...prev.filter((c) => c !== color)].slice(0, MAX_RECENT);
+      try {
+        localStorage.setItem(RECENT_COLORS_KEY, JSON.stringify(updated));
+      } catch {
+      }
+      return updated;
+    });
+  }, []);
+  const { r, g, b } = useMemo(() => hexToRgb(safeValue), [safeValue]);
+  const hsl = useMemo(() => rgbToHsl(r, g, b), [r, g, b]);
+  useEffect(() => {
+    setTextInput(formatColor(safeValue, format));
+  }, [safeValue, format]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (panelRef.current && !panelRef.current.contains(e.target)) {
+        setOpen(false);
+        addRecent(value);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, value, addRecent]);
+  const handleSatAreaPointer = useCallback(
+    (e) => {
+      if (!satAreaRef.current) return;
+      const rect = satAreaRef.current.getBoundingClientRect();
+      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+      const s = x;
+      const l = 1 - y;
+      const adjustedL = 0.05 + l * 0.9;
+      const rgb = hslToRgb(hsl.h, s, adjustedL);
+      onChange(rgbToHex(rgb.r, rgb.g, rgb.b));
+    },
+    [hsl.h, onChange]
+  );
+  const handleSatAreaDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      handleSatAreaPointer(e);
+      const move = (ev) => handleSatAreaPointer(ev);
+      const up = () => {
+        document.removeEventListener("pointermove", move);
+        document.removeEventListener("pointerup", up);
+      };
+      document.addEventListener("pointermove", move);
+      document.addEventListener("pointerup", up);
+    },
+    [handleSatAreaPointer]
+  );
+  const handleHueChange = useCallback(
+    (e) => {
+      const h = Number(e.target.value) / 360;
+      const rgb = hslToRgb(h, hsl.s || 0.5, hsl.l || 0.5);
+      onChange(rgbToHex(rgb.r, rgb.g, rgb.b));
+    },
+    [hsl.s, hsl.l, onChange]
+  );
+  const handleTextCommit = useCallback(() => {
+    const v = textInput.trim();
+    if (/^#?[0-9a-f]{3,6}$/i.test(v)) {
+      const hex = v.startsWith("#") ? v : "#" + v;
+      onChange(hex);
+      return;
+    }
+    const rgbMatch = v.match(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/);
+    if (rgbMatch) {
+      onChange(rgbToHex(Number(rgbMatch[1]), Number(rgbMatch[2]), Number(rgbMatch[3])));
+      return;
+    }
+    const hslMatch = v.match(/hsl\(\s*(\d+)\s*,\s*(\d+)%?\s*,\s*(\d+)%?\s*\)/);
+    if (hslMatch) {
+      const rgb = hslToRgb(Number(hslMatch[1]) / 360, Number(hslMatch[2]) / 100, Number(hslMatch[3]) / 100);
+      onChange(rgbToHex(rgb.r, rgb.g, rgb.b));
+      return;
+    }
+    setTextInput(formatColor(safeValue, format));
+  }, [textInput, safeValue, format, onChange]);
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(formatColor(safeValue, format));
+      setCopied(true);
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  }, [safeValue, format]);
+  const markerX = hsl.s * 100;
+  const markerY = (1 - (hsl.l - 0.05) / 0.9) * 100;
+  return /* @__PURE__ */ jsxs("div", { ref: panelRef, className: cn("relative inline-block", className), children: [
+    label && /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-[hsl(var(--text-secondary))] mb-1.5", children: label }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setOpen((o) => !o),
+        className: cn(
+          "inline-flex items-center gap-2 rounded-lg border border-[hsl(var(--border-subtle))]",
+          "bg-[hsl(var(--bg-surface))] px-3 py-2 text-sm",
+          "hover:border-[hsl(var(--border-default))] transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--brand-primary))]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-5 w-5 rounded-md border border-[hsl(var(--border-subtle))]",
+              style: { backgroundColor: isSafeColor(safeValue) ? safeValue : void 0 }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-[hsl(var(--text-primary))]", children: formatColor(value, format) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: prefersReducedMotion ? void 0 : { opacity: 0, scale: 0.96, y: -4 },
+        animate: prefersReducedMotion ? void 0 : { opacity: 1, scale: 1, y: 0 },
+        exit: prefersReducedMotion ? void 0 : { opacity: 0, scale: 0.96, y: -4 },
+        transition: prefersReducedMotion ? { duration: 0 } : { duration: 0.15 },
+        className: cn(
+          "absolute z-50 mt-2 w-64 rounded-xl overflow-hidden",
+          "border border-[hsl(var(--border-default))]",
+          "bg-[hsl(var(--bg-elevated))] shadow-xl",
+          "p-3"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: satAreaRef,
+              onPointerDown: handleSatAreaDown,
+              className: "relative h-36 w-full rounded-lg cursor-crosshair overflow-hidden mb-3",
+              style: {
+                background: `linear-gradient(to top, #000, transparent),
+                             linear-gradient(to right, #fff, hsl(${Math.round(hsl.h * 360)}, 100%, 50%))`
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute w-4 h-4 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none",
+                  style: {
+                    left: `${markerX}%`,
+                    top: `${Math.max(0, Math.min(100, markerY))}%`,
+                    backgroundColor: isSafeColor(safeValue) ? safeValue : void 0
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 360,
+              value: Math.round(hsl.h * 360),
+              onChange: handleHueChange,
+              className: "w-full h-3 rounded-full appearance-none cursor-pointer",
+              style: {
+                background: "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)"
+              }
+            }
+          ) }),
+          showAlpha && /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 100,
+              value: Math.round(alpha * 100),
+              onChange: (e) => setAlpha(Number(e.target.value) / 100),
+              className: "w-full h-3 rounded-full appearance-none cursor-pointer",
+              style: {
+                background: `linear-gradient(to right, transparent, ${isSafeColor(safeValue) ? safeValue : "#000"})`
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: textInput,
+                onChange: (e) => setTextInput(e.target.value),
+                onBlur: handleTextCommit,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") handleTextCommit();
+                },
+                className: cn(
+                  "flex-1 rounded-md border border-[hsl(var(--border-subtle))]",
+                  "bg-[hsl(var(--bg-surface))] px-2 py-1 text-xs font-mono",
+                  "text-[hsl(var(--text-primary))] outline-none",
+                  "focus:border-[hsl(var(--brand-primary))] transition-colors"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleCopy,
+                className: cn(
+                  "p-1.5 rounded-md transition-colors",
+                  "text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-primary))]",
+                  "hover:bg-[hsl(var(--bg-surface))]"
+                ),
+                title: "Copy color",
+                children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-[hsl(var(--status-ok))]" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ] }),
+          presets && presets.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-[hsl(var(--text-tertiary))] mb-1.5 block", children: "Presets" }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: presets.map((color) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => {
+                  onChange(color);
+                  addRecent(color);
+                },
+                className: cn(
+                  "h-6 w-6 rounded-md border transition-all",
+                  value === color ? "border-[hsl(var(--brand-primary))] ring-2 ring-[hsl(var(--brand-primary)/0.3)] scale-110" : "border-[hsl(var(--border-subtle))] hover:scale-110"
+                ),
+                style: { backgroundColor: isSafeColor(color) ? color : void 0 },
+                title: color
+              },
+              color
+            )) })
+          ] }),
+          recentColors.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-[hsl(var(--text-tertiary))] mb-1.5 block", children: "Recent" }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: recentColors.map((color) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => onChange(color),
+                className: cn(
+                  "h-6 w-6 rounded-md border border-[hsl(var(--border-subtle))]",
+                  "hover:scale-110 transition-transform"
+                ),
+                style: { backgroundColor: isSafeColor(color) ? color : void 0 },
+                title: color
+              },
+              color
+            )) })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+var SESSION_KEY_PREFIX = "ui-kit-wizard-";
+function StepWizard({
+  steps,
+  onComplete,
+  onStepChange,
+  orientation = "horizontal",
+  allowSkip = false,
+  showSummary = false,
+  className
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const sessionKey = useMemo(() => SESSION_KEY_PREFIX + steps.map((s) => s.id).join("-"), [steps]);
+  const [currentStep, setCurrentStep] = useState(() => {
+    if (typeof window === "undefined") return 0;
+    try {
+      const saved = sessionStorage.getItem(sessionKey);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        return Math.min(parsed.step, steps.length - 1);
+      }
+    } catch {
+    }
+    return 0;
+  });
+  const [completed, setCompleted] = useState(() => {
+    if (typeof window === "undefined") return /* @__PURE__ */ new Set();
+    try {
+      const saved = sessionStorage.getItem(sessionKey);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        return new Set(parsed.completed);
+      }
+    } catch {
+    }
+    return /* @__PURE__ */ new Set();
+  });
+  const [isValidating, setIsValidating] = useState(false);
+  const [direction, setDirection] = useState(1);
+  const [isComplete, setIsComplete] = useState(false);
+  const contentRef = useRef(null);
+  const wizardRef = useRef(null);
+  const validatingRef = useRef(false);
+  useEffect(() => {
+    try {
+      sessionStorage.setItem(sessionKey, JSON.stringify({
+        step: currentStep,
+        completed: [...completed]
+      }));
+    } catch {
+    }
+  }, [currentStep, completed, sessionKey]);
+  const totalSteps = steps.length;
+  const progress = totalSteps === 0 ? 100 : Math.round(completed.size / totalSteps * 100);
+  const goToStep = useCallback((idx) => {
+    setDirection(idx > currentStep ? 1 : -1);
+    setCurrentStep(idx);
+    onStepChange?.(idx);
+  }, [currentStep, onStepChange]);
+  const handleNext = useCallback(async () => {
+    if (validatingRef.current) return;
+    const step = steps[currentStep];
+    if (step?.validate) {
+      validatingRef.current = true;
+      setIsValidating(true);
+      try {
+        const valid = await step.validate();
+        if (!valid) {
+          setIsValidating(false);
+          validatingRef.current = false;
+          return;
+        }
+      } catch {
+        setIsValidating(false);
+        validatingRef.current = false;
+        return;
+      }
+      setIsValidating(false);
+      validatingRef.current = false;
+    }
+    setCompleted((prev) => new Set(prev).add(currentStep));
+    if (currentStep < totalSteps - 1) {
+      goToStep(currentStep + 1);
+    } else {
+      if (showSummary) {
+        setIsComplete(true);
+      }
+      onComplete();
+      try {
+        sessionStorage.removeItem(sessionKey);
+      } catch {
+      }
+    }
+  }, [currentStep, steps, totalSteps, goToStep, onComplete, showSummary, sessionKey]);
+  const handleBack = useCallback(() => {
+    if (currentStep > 0) {
+      goToStep(currentStep - 1);
+    }
+  }, [currentStep, goToStep]);
+  const handleStepClick = useCallback((idx) => {
+    if (completed.has(idx) || allowSkip || idx < currentStep) {
+      goToStep(idx);
+    }
+  }, [completed, allowSkip, currentStep, goToStep]);
+  useEffect(() => {
+    const handler = (e) => {
+      if (!wizardRef.current?.contains(e.target)) return;
+      if (e.key === "Enter" && !e.shiftKey && !(e.target instanceof HTMLTextAreaElement)) {
+        handleNext();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [handleNext]);
+  const slideVariants2 = {
+    enter: (dir) => ({
+      x: prefersReducedMotion ? 0 : dir > 0 ? 40 : -40,
+      opacity: prefersReducedMotion ? 1 : 0
+    }),
+    center: { x: 0, opacity: 1 },
+    exit: (dir) => ({
+      x: prefersReducedMotion ? 0 : dir > 0 ? -40 : 40,
+      opacity: prefersReducedMotion ? 1 : 0
+    })
+  };
+  const isHorizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsxs("div", { ref: wizardRef, className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx("div", { className: cn(
+      "mb-6",
+      isHorizontal ? "flex items-center" : "flex flex-col gap-1"
+    ), children: steps.map((step, idx) => {
+      const isActive = idx === currentStep;
+      const isDone = completed.has(idx) || isComplete;
+      const isClickable = isDone || allowSkip || idx < currentStep;
+      const Icon = step.icon;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            isHorizontal ? "flex items-center flex-1" : "flex items-center gap-3"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => handleStepClick(idx),
+                disabled: !isClickable,
+                className: cn(
+                  "flex items-center gap-2 group",
+                  isClickable ? "cursor-pointer" : "cursor-default"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex items-center justify-center rounded-full transition-all",
+                        "h-8 w-8 text-xs font-semibold shrink-0",
+                        isDone ? "bg-[hsl(var(--status-ok))] text-[hsl(var(--text-on-brand))]" : isActive ? "bg-[hsl(var(--brand-primary))] text-[hsl(var(--text-on-brand))] ring-4 ring-[hsl(var(--brand-primary)/0.2)]" : "bg-[hsl(var(--bg-overlay))] text-[hsl(var(--text-tertiary))]",
+                        isClickable && !isActive && !isDone && "group-hover:bg-[hsl(var(--bg-elevated))]"
+                      ),
+                      children: isDone ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) : idx + 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: cn(
+                    isHorizontal ? "hidden sm:block" : "block"
+                  ), children: [
+                    /* @__PURE__ */ jsx("div", { className: cn(
+                      "text-xs font-medium leading-tight",
+                      isActive ? "text-[hsl(var(--text-primary))]" : "text-[hsl(var(--text-secondary))]"
+                    ), children: step.title }),
+                    step.description && !isHorizontal && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-[hsl(var(--text-tertiary))]", children: step.description })
+                  ] })
+                ]
+              }
+            ),
+            isHorizontal && idx < totalSteps - 1 && /* @__PURE__ */ jsx("div", { className: cn(
+              "flex-1 h-0.5 mx-2 rounded-full transition-colors",
+              completed.has(idx) ? "bg-[hsl(var(--status-ok))]" : "bg-[hsl(var(--border-subtle))]"
+            ) })
+          ]
+        },
+        step.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-full h-1 rounded-full bg-[hsl(var(--bg-overlay))] mb-4 overflow-hidden", children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "h-full rounded-full bg-[hsl(var(--brand-primary))]",
+        initial: { width: 0 },
+        animate: { width: `${progress}%` },
+        transition: prefersReducedMotion ? { duration: 0 } : { type: "spring", stiffness: 300, damping: 30 }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { ref: contentRef, className: "relative min-h-[200px]", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, children: isComplete && showSummary ? /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        custom: 1,
+        variants: slideVariants2,
+        initial: "enter",
+        animate: "center",
+        exit: "exit",
+        transition: prefersReducedMotion ? { duration: 0 } : { duration: 0.25 },
+        className: "flex flex-col items-center justify-center py-12 text-center",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-16 h-16 rounded-full bg-[hsl(var(--status-ok)/0.15)] mb-4", children: /* @__PURE__ */ jsx(Check, { className: "h-8 w-8 text-[hsl(var(--status-ok))]" }) }),
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-[hsl(var(--text-primary))] mb-1", children: "All steps completed" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-[hsl(var(--text-secondary))]", children: [
+            "All ",
+            totalSteps,
+            " steps have been successfully completed."
+          ] })
+        ]
+      },
+      "summary"
+    ) : /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        custom: direction,
+        variants: slideVariants2,
+        initial: "enter",
+        animate: "center",
+        exit: "exit",
+        transition: prefersReducedMotion ? { duration: 0 } : { duration: 0.25 },
+        children: steps[currentStep]?.content
+      },
+      currentStep
+    ) }) }),
+    !isComplete && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-6 pt-4 border-t border-[hsl(var(--border-subtle)/0.5)]", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: handleBack,
+          disabled: currentStep === 0,
+          className: cn(
+            "inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors",
+            "border border-[hsl(var(--border-default))]",
+            "text-[hsl(var(--text-primary))]",
+            "hover:bg-[hsl(var(--bg-overlay))]",
+            "disabled:opacity-40 disabled:pointer-events-none"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+            "Back"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-[hsl(var(--text-tertiary))] tabular-nums", children: [
+        "Step ",
+        currentStep + 1,
+        " of ",
+        totalSteps
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleNext,
+          disabled: isValidating,
+          className: cn(
+            "inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors",
+            "bg-[hsl(var(--brand-primary))] text-[hsl(var(--text-on-brand))]",
+            "hover:bg-[hsl(var(--brand-primary))]/90",
+            "disabled:opacity-70 disabled:cursor-not-allowed"
+          ),
+          children: isValidating ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded-full border-2 border-[hsl(var(--text-on-brand))] border-t-transparent animate-spin" }),
+            "Validating..."
+          ] }) : currentStep === totalSteps - 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Complete",
+            /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Next",
+            /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+function CopyBlock({
+  content,
+  language,
+  showLineNumbers = false,
+  maxHeight,
+  label,
+  className
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const [copied, setCopied] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [needsCollapse, setNeedsCollapse] = useState(false);
+  const contentRef = useRef(null);
+  const copyTimerRef = useRef(null);
+  useEffect(() => () => {
+    if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+  }, []);
+  useEffect(() => {
+    if (!maxHeight || !contentRef.current) return;
+    setNeedsCollapse(contentRef.current.scrollHeight > maxHeight);
+  }, [content, maxHeight]);
+  const lines = useMemo(() => content.split("\n"), [content]);
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      console.warn("Clipboard API not available");
+    }
+  }, [content]);
+  const shouldCollapse = maxHeight && needsCollapse && isCollapsed;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative group rounded-xl overflow-hidden",
+        "border border-[hsl(var(--border-subtle))]",
+        "bg-[hsl(var(--bg-base))]",
+        className
+      ),
+      children: [
+        (label || language) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b border-[hsl(var(--border-subtle)/0.5)] bg-[hsl(var(--bg-surface)/0.3)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[hsl(var(--text-secondary))]", children: label }),
+            language && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-md bg-[hsl(var(--bg-overlay)/0.5)] px-1.5 py-0.5 text-[10px] font-mono text-[hsl(var(--text-tertiary))]", children: language })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleCopy,
+              className: cn(
+                "inline-flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium transition-all",
+                copied ? "text-[hsl(var(--status-ok))] bg-[hsl(var(--status-ok)/0.1)]" : "text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-primary))] hover:bg-[hsl(var(--bg-elevated))]"
+              ),
+              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: copied ? /* @__PURE__ */ jsxs(
+                motion.span,
+                {
+                  initial: prefersReducedMotion ? void 0 : { scale: 0.5, opacity: 0 },
+                  animate: prefersReducedMotion ? void 0 : { scale: 1, opacity: 1 },
+                  exit: prefersReducedMotion ? void 0 : { scale: 0.5, opacity: 0 },
+                  transition: { duration: 0.15 },
+                  className: "inline-flex items-center gap-1",
+                  children: [
+                    /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }),
+                    "Copied!"
+                  ]
+                },
+                "check"
+              ) : /* @__PURE__ */ jsxs(
+                motion.span,
+                {
+                  initial: prefersReducedMotion ? void 0 : { scale: 0.5, opacity: 0 },
+                  animate: prefersReducedMotion ? void 0 : { scale: 1, opacity: 1 },
+                  exit: prefersReducedMotion ? void 0 : { scale: 0.5, opacity: 0 },
+                  transition: { duration: 0.15 },
+                  className: "inline-flex items-center gap-1",
+                  children: [
+                    /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }),
+                    "Copy"
+                  ]
+                },
+                "copy"
+              ) })
+            }
+          )
+        ] }),
+        !label && !language && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleCopy,
+            className: cn(
+              "absolute top-2 right-2 z-10 rounded-md p-1.5 transition-all",
+              "opacity-0 group-hover:opacity-100",
+              copied ? "text-[hsl(var(--status-ok))] bg-[hsl(var(--status-ok)/0.1)]" : "text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-primary))] bg-[hsl(var(--bg-elevated)/0.8)] hover:bg-[hsl(var(--bg-elevated))]"
+            ),
+            title: copied ? "Copied!" : "Copy to clipboard",
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "overflow-x-auto",
+            style: shouldCollapse ? { maxHeight, overflow: "hidden" } : void 0,
+            children: /* @__PURE__ */ jsx(
+              "pre",
+              {
+                ref: contentRef,
+                className: cn(
+                  "p-4 text-[13px] leading-relaxed font-mono",
+                  "text-[hsl(var(--text-primary))]",
+                  "whitespace-pre overflow-x-auto"
+                ),
+                children: showLineNumbers ? /* @__PURE__ */ jsx("table", { className: "border-collapse w-full", children: /* @__PURE__ */ jsx("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-[hsl(var(--bg-surface)/0.3)]", children: [
+                  /* @__PURE__ */ jsx("td", { className: "select-none text-right pr-4 text-[hsl(var(--text-disabled))] text-[11px] tabular-nums w-8 align-top", children: i + 1 }),
+                  /* @__PURE__ */ jsx("td", { className: "whitespace-pre", children: line })
+                ] }, i)) }) }) : content
+              }
+            )
+          }
+        ),
+        maxHeight && needsCollapse && /* @__PURE__ */ jsxs(Fragment, { children: [
+          isCollapsed && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-[hsl(var(--bg-base))] to-transparent pointer-events-none" }),
+          /* @__PURE__ */ jsx("div", { className: "relative border-t border-[hsl(var(--border-subtle)/0.3)]", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsCollapsed((c) => !c),
+              className: cn(
+                "w-full flex items-center justify-center gap-1.5 py-2 text-[11px] font-medium",
+                "text-[hsl(var(--text-secondary))] hover:text-[hsl(var(--text-primary))]",
+                "hover:bg-[hsl(var(--bg-surface)/0.3)] transition-colors"
+              ),
+              children: isCollapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                "Show more (",
+                lines.length,
+                " lines)",
+                /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                "Show less",
+                /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5" })
+              ] })
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
 
-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 };
+export { AnimatedCounter, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ColorInput, CommandBar, ConfidenceBar, ConfirmDialog, CopyBlock, DataTable, DiffViewer, DragHandle, DropdownMenu, EmptyState, FilterPill, HeatmapCalendar, InfiniteScroll, KanbanColumn, LiveFeed, LogViewer, MetricCard, NotificationStack, PipelineStage, Popover, PortStatusGrid, Progress, RadioGroup, RealtimeValue, SeverityTimeline, Sheet, Skeleton, SkeletonCard, SkeletonText, Slider, SmartTable, SortableList, Sparkline, StatusBadge, StatusPulse, StepWizard, StreamingText, SuccessCheckmark, Tabs, ThresholdGauge, TimeRangeSelector, Toaster, Tooltip2 as Tooltip, TruncatedText, TypingIndicator, UptimeTracker, UtilizationBar, createBadgeVariant, defaultPulseConfigMap, defaultStatusMap };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map