@tollerud/ui 1.0.1

package/dist/index.js

@@ -0,0 +1,2650 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as React2 from 'react';
+import { forwardRef, useState, useCallback, lazy, useRef, useEffect, useMemo, useId, Suspense } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { Toaster as Toaster$1 } from 'sonner';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+// lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var variants = {
+  primary: "bg-tollerud-yellow text-tollerud-black border-tollerud-yellow hover:bg-tollerud-yellow-bright hover:shadow-tollerud-glow",
+  secondary: "bg-transparent text-tollerud-text-primary border-tollerud-border hover:border-tollerud-text-secondary hover:bg-tollerud-surface-hover",
+  ghost: "bg-transparent text-tollerud-text-secondary border-transparent hover:text-tollerud-text-primary hover:bg-tollerud-surface-hover",
+  destructive: "bg-tollerud-error text-white border-tollerud-error hover:shadow-[0_0_12px_rgba(239,68,68,0.3)]",
+  terminal: 'font-mono text-tollerud-yellow border-[rgba(232,213,0,0.25)] bg-transparent before:content-["\u276F_"] before:opacity-70 hover:border-tollerud-yellow hover:shadow-tollerud-glow hover:bg-[rgba(232,213,0,0.05)]'
+};
+var sizes = {
+  sm: "px-3 py-1 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg"
+};
+var Button = forwardRef(
+  ({ className, variant = "secondary", size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center justify-center gap-2 font-semibold rounded transition-all duration-[150ms] focus-visible:outline-2 focus-visible:outline-tollerud-yellow focus-visible:outline-offset-2",
+          "border cursor-pointer",
+          "disabled:opacity-50 disabled:pointer-events-none",
+          variants[variant],
+          sizes[size],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var toneStyles = {
+  default: { wrapper: "border-tollerud-border bg-tollerud-surface-raised", icon: "text-tollerud-text-muted" },
+  accent: { wrapper: "border-tollerud-yellow/30 bg-tollerud-yellow/5", icon: "text-tollerud-yellow" },
+  info: { wrapper: "border-blue-500/30 bg-blue-500/5", icon: "text-blue-400" },
+  success: { wrapper: "border-green-500/30 bg-green-500/5", icon: "text-green-400" },
+  error: { wrapper: "border-red-500/30 bg-red-500/5", icon: "text-red-400" }
+};
+var Alert = forwardRef(
+  ({ className, tone = "default", title, icon, children, ...props }, ref) => {
+    const styles = toneStyles[tone];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(
+          "flex gap-3 rounded-md border p-4",
+          styles.wrapper,
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: cn("mt-0.5 flex-shrink-0 w-[18px] h-[18px]", styles.icon), children: icon }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            title && /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-tollerud-text-primary leading-snug", children: title }),
+            children && /* @__PURE__ */ jsx("p", { className: cn("text-sm text-tollerud-text-secondary leading-relaxed", title && "mt-1"), children })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+var Card = forwardRef(
+  ({ className, accent, density, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-density": density ?? void 0,
+        className: cn(
+          "rounded-lg border bg-tollerud-surface-raised p-6 transition-[border-color] duration-[150ms]",
+          accent ? "border-tollerud-yellow/25" : "border-tollerud-border",
+          "hover:border-tollerud-noir-500",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var badgeVariants = {
+  default: "bg-tollerud-noir-700 text-tollerud-text-secondary",
+  accent: "bg-tollerud-yellow/15 text-tollerud-yellow",
+  success: "bg-tollerud-success/15 text-tollerud-success",
+  error: "bg-tollerud-error/15 text-tollerud-error",
+  info: "bg-tollerud-info/15 text-tollerud-info",
+  warning: "bg-tollerud-yellow/15 text-tollerud-warning"
+};
+var Badge = forwardRef(
+  ({ className, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center px-2 py-0.5 text-xs font-medium rounded",
+          "tracking-wide",
+          badgeVariants[variant],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+var statusColors = {
+  online: "bg-tollerud-success",
+  offline: "bg-tollerud-error",
+  warning: "bg-tollerud-yellow",
+  idle: "bg-tollerud-noir-400"
+};
+var pulseColors = {
+  online: "rgba(34,197,94,0.5)",
+  warning: "rgba(232,213,0,0.45)",
+  offline: "rgba(239,68,68,0.5)"
+};
+var animationKeyframes = `
+@keyframes tollerud-dot-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 var(--pulse-color, rgba(34,197,94,0.5)); }
+  50% { box-shadow: 0 0 0 5px var(--pulse-color, rgba(34,197,94,0)); }
+}
+`;
+var StatusDot = forwardRef(
+  ({ className, status = "idle", label, noPulse, ...props }, ref) => {
+    const shouldPulse = !noPulse && (status === "online" || status === "warning" || status === "offline");
+    const pulseColor = pulseColors[status];
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn("inline-flex items-center gap-1.5 text-xs font-medium", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("style", { children: animationKeyframes }),
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              layout: true,
+              animate: {
+                scaleX: [1, 1.6, 1],
+                scaleY: [1, 0.6, 1]
+              },
+              transition: {
+                duration: 0.4,
+                ease: "easeOut",
+                times: [0, 0.3, 1]
+              },
+              className: cn(
+                "inline-block w-2 h-2 rounded-full",
+                statusColors[status],
+                shouldPulse && "animate-tollerud-dot-pulse"
+              ),
+              style: {
+                ...shouldPulse && pulseColor ? { "--pulse-color": pulseColor } : {},
+                animation: shouldPulse ? "tollerud-dot-pulse 2s ease-in-out infinite" : void 0
+              }
+            },
+            status
+          ),
+          label && /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+StatusDot.displayName = "StatusDot";
+var Input = forwardRef(
+  ({ className, label, error, id, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-xs font-medium text-tollerud-text-muted", children: label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id,
+          className: cn(
+            "font-sans text-base px-3 py-2 rounded",
+            "bg-tollerud-surface-raised border",
+            "text-tollerud-text-primary",
+            "placeholder:text-tollerud-text-muted",
+            "transition-[border-color] duration-[150ms]",
+            "focus:outline-none focus:border-tollerud-yellow focus:shadow-[0_0_0_1px_#E8D500]",
+            error ? "border-tollerud-error" : "border-tollerud-border",
+            className
+          ),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-tollerud-error mt-0.5", children: error })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var CodeBlock = forwardRef(
+  ({ className, children, code, promptPrefix, showCopy = true, ...props }, ref) => {
+    const [copied, setCopied] = useState(false);
+    const content = code ? /* @__PURE__ */ jsx("code", { className: "text-tollerud-noir-200", children: code }) : children;
+    const handleCopy = useCallback(async () => {
+      const text = code ?? (typeof children === "string" ? children : "");
+      if (!text) return;
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+      }
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    }, [code, children]);
+    return /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsx(
+        "pre",
+        {
+          ref,
+          className: cn(
+            "font-mono text-sm leading-relaxed overflow-x-auto rounded border p-4",
+            "bg-tollerud-noir-900 border-tollerud-border text-tollerud-noir-200",
+            className
+          ),
+          ...props,
+          children: content
+        }
+      ),
+      showCopy && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleCopy,
+          className: cn(
+            "absolute top-2 right-2 px-2 py-1 rounded text-xs font-medium",
+            "opacity-0 group-hover:opacity-100 transition-all",
+            "bg-tollerud-noir-800 border border-tollerud-border/30 text-tollerud-text-muted",
+            "hover:bg-tollerud-surface-raised hover:text-tollerud-text-primary",
+            copied && "opacity-100 bg-tollerud-success/15 text-tollerud-success border-tollerud-success/40"
+          ),
+          "aria-label": copied ? "Copied" : "Copy code",
+          children: copied ? "\u2713 Copied" : "Copy"
+        }
+      )
+    ] });
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+var StatCard = forwardRef(
+  ({ className, label, value, change, accent, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group relative rounded-lg border p-4",
+          "bg-tollerud-surface-raised",
+          "transition-all duration-200 ease-out",
+          "hover:translate-y-[-1px]",
+          accent ? "border-tollerud-yellow/20 hover:border-tollerud-yellow/40 hover:shadow-[0_0_20px_rgba(232,213,0,0.08)]" : "border-tollerud-border hover:border-tollerud-noir-500 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]",
+          className
+        ),
+        ...props,
+        children: [
+          accent && /* @__PURE__ */ jsx("span", { className: "absolute top-0 left-4 right-4 h-px bg-gradient-to-r from-transparent via-tollerud-yellow/60 to-transparent" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-tollerud-text-muted", children: label }),
+            change && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-0.5 text-[11px] font-semibold whitespace-nowrap",
+                  change.direction === "up" ? "text-tollerud-success" : "text-tollerud-error"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: cn(
+                        "w-3 h-3",
+                        change.direction === "down" && "rotate-180"
+                      ),
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: 2.5,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12l7 7 7-7" })
+                    }
+                  ),
+                  change.value
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-2xl font-bold tracking-tight mt-1",
+                accent ? "text-tollerud-yellow" : "text-tollerud-text-primary"
+              ),
+              children: value
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StatCard.displayName = "StatCard";
+var Container = forwardRef(
+  ({ className, as: Tag = "div", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ref,
+        className: cn("mx-auto w-full max-w-[1100px] px-6", className),
+        ...props
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+var GrainGradient = lazy(
+  () => import('@paper-design/shaders-react').then((module) => ({
+    default: module.GrainGradient
+  }))
+);
+var intensityMap = {
+  subtle: 0.24,
+  medium: 0.45,
+  loud: 0.68
+};
+var speedMap = {
+  still: 0,
+  slow: 0.45,
+  medium: 1,
+  fast: 1.8
+};
+var grainMap = {
+  none: 0,
+  soft: 0.12,
+  high: 0.28
+};
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function CssFallback({ preserveCenter = true, noiseOverlay = true }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "tollerud-noir-glow-bg", "aria-hidden": "true" }),
+    preserveCenter && /* @__PURE__ */ jsx("div", { className: "tollerud-noir-glow-vignette", "aria-hidden": "true" }),
+    noiseOverlay && /* @__PURE__ */ jsx("div", { className: "tollerud-noir-noise", "aria-hidden": "true" })
+  ] });
+}
+function NoirGlowBackground({
+  className,
+  style,
+  shape = "corners",
+  intensity = "medium",
+  speed = "medium",
+  grain = "none",
+  softness = 0.76,
+  colorBack = "hsl(0, 0%, 0%)",
+  colors = ["hsl(54, 85%, 66%)", "hsl(56, 100%, 80%)", "hsl(56, 100%, 50%)"],
+  preserveCenter = false,
+  noiseOverlay = false,
+  forceCssFallback = false,
+  inert = true
+}) {
+  const wrapperClassName = cx(
+    "tollerud-noir-glow-root absolute inset-0 z-0 overflow-hidden",
+    inert && "pointer-events-none",
+    className
+  );
+  if (forceCssFallback) {
+    return /* @__PURE__ */ jsx("div", { className: wrapperClassName, style, "aria-hidden": "true", children: /* @__PURE__ */ jsx(CssFallback, { preserveCenter, noiseOverlay }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClassName, style, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(CssFallback, { preserveCenter, noiseOverlay }), children: /* @__PURE__ */ jsx(
+      GrainGradient,
+      {
+        style: { height: "100%", width: "100%" },
+        colorBack,
+        softness,
+        intensity: intensityMap[intensity],
+        noise: grainMap[grain],
+        shape,
+        offsetX: 0,
+        offsetY: 0,
+        scale: 1,
+        rotation: 0,
+        speed: speedMap[speed],
+        colors
+      }
+    ) }),
+    preserveCenter && /* @__PURE__ */ jsx("div", { className: "tollerud-noir-glow-vignette", "aria-hidden": "true" }),
+    noiseOverlay && /* @__PURE__ */ jsx("div", { className: "tollerud-noir-noise", "aria-hidden": "true" })
+  ] });
+}
+var Kbd = forwardRef(
+  ({ className, keys, size = "md", ...props }, ref) => {
+    const keyArray = typeof keys === "string" ? [keys] : keys;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "tollerud-kbd",
+          size === "sm" && "tollerud-kbd--sm",
+          className
+        ),
+        ...props,
+        children: keyArray.map((key, i) => /* @__PURE__ */ jsx("span", { className: "tollerud-kbd__key", children: key }, i))
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+var ActionRow = forwardRef(
+  ({
+    action,
+    highlighted = false,
+    showShortcut = true,
+    className,
+    disabled,
+    onClick,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled: disabled ?? action.disabled,
+        onClick: (e) => {
+          onClick?.(e);
+          action.onSelect?.();
+        },
+        className: cn(
+          "tollerud-action-row",
+          highlighted && "tollerud-action-row--highlighted",
+          (disabled ?? action.disabled) && "tollerud-action-row--disabled",
+          className
+        ),
+        role: "option",
+        "aria-selected": highlighted,
+        "aria-disabled": disabled ?? action.disabled,
+        ...props,
+        children: [
+          action.icon && /* @__PURE__ */ jsx("span", { className: "tollerud-action-row__icon", children: action.icon }),
+          /* @__PURE__ */ jsxs("span", { className: "tollerud-action-row__content", children: [
+            /* @__PURE__ */ jsx("span", { className: "tollerud-action-row__label", children: action.label }),
+            action.description && /* @__PURE__ */ jsx("span", { className: "tollerud-action-row__description", children: action.description })
+          ] }),
+          showShortcut && action.shortcut && /* @__PURE__ */ jsx("span", { className: "tollerud-action-row__shortcut", children: /* @__PURE__ */ jsx(Kbd, { keys: action.shortcut, size: "sm" }) })
+        ]
+      }
+    );
+  }
+);
+ActionRow.displayName = "ActionRow";
+var CommandMenu = forwardRef(
+  ({
+    open,
+    onOpenChange,
+    groups,
+    placeholder = "Type a command\u2026",
+    emptyMessage = "No matching commands",
+    className,
+    filter: customFilter,
+    onAction
+  }, ref) => {
+    const [query, setQuery] = useState("");
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const flatItems = groups.flatMap((g) => g.items);
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          onOpenChange(false);
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setSelectedIndex(
+            (prev) => prev < flatItems.length - 1 ? prev + 1 : 0
+          );
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setSelectedIndex(
+            (prev) => prev > 0 ? prev - 1 : flatItems.length - 1
+          );
+          return;
+        }
+        if (e.key === "Enter") {
+          e.preventDefault();
+          const item = flatItems[selectedIndex];
+          if (item && !item.disabled) {
+            item.onSelect?.();
+            onAction?.(item);
+            onOpenChange(false);
+          }
+          return;
+        }
+      },
+      [flatItems, selectedIndex, onOpenChange, onAction]
+    );
+    useEffect(() => {
+      function handleGlobalKey(e) {
+        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+          e.preventDefault();
+          onOpenChange(!open);
+        }
+      }
+      document.addEventListener("keydown", handleGlobalKey);
+      return () => document.removeEventListener("keydown", handleGlobalKey);
+    }, [open, onOpenChange]);
+    useEffect(() => {
+      if (open) {
+        setQuery("");
+        setSelectedIndex(0);
+        const timer = setTimeout(() => inputRef.current?.focus(), 50);
+        return () => clearTimeout(timer);
+      }
+    }, [open]);
+    useEffect(() => {
+      if (open) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }, [open]);
+    const filteredGroups = customFilter ? customFilter(query, groups) : query.trim() ? groups.map((g) => ({
+      ...g,
+      items: g.items.filter(
+        (item) => item.label.toLowerCase().includes(query.toLowerCase()) || item.description?.toLowerCase().includes(query.toLowerCase()) || item.group?.toLowerCase().includes(query.toLowerCase())
+      )
+    })).filter((g) => g.items.length > 0) : groups;
+    const currentFlat = filteredGroups.flatMap((g) => g.items);
+    useEffect(() => {
+      if (selectedIndex >= currentFlat.length) {
+        setSelectedIndex(0);
+      }
+    }, [currentFlat.length, selectedIndex]);
+    if (!open) return null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "tollerud-cmd-overlay",
+          onClick: () => onOpenChange(false),
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("tollerud-cmd", className),
+          role: "listbox",
+          "aria-label": "Command palette",
+          onKeyDown: handleKeyDown,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "tollerud-cmd__header", children: [
+              /* @__PURE__ */ jsx("span", { className: "tollerud-cmd__search-icon", children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "18",
+                  height: "18",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+                    /* @__PURE__ */ jsx("path", { d: "m21 21-4.35-4.35" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "text",
+                  className: "tollerud-cmd__input",
+                  placeholder,
+                  value: query,
+                  onChange: (e) => {
+                    setQuery(e.target.value);
+                    setSelectedIndex(0);
+                  },
+                  autoComplete: "off",
+                  spellCheck: false
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { ref: listRef, className: "tollerud-cmd__list", children: [
+              filteredGroups.length === 0 && /* @__PURE__ */ jsx("div", { className: "tollerud-cmd__empty", children: emptyMessage }),
+              filteredGroups.map((group, gi) => {
+                const flatOffset = filteredGroups.slice(0, gi).reduce((acc, g) => acc + g.items.length, 0);
+                return /* @__PURE__ */ jsxs("div", { className: "tollerud-cmd__group", children: [
+                  /* @__PURE__ */ jsx("div", { className: "tollerud-cmd__group-label", children: group.label }),
+                  group.items.map((item, ii) => {
+                    const flatIndex = flatOffset + ii;
+                    return /* @__PURE__ */ jsx(
+                      ActionRow,
+                      {
+                        action: item,
+                        highlighted: selectedIndex === flatIndex,
+                        onClick: () => {
+                          item.onSelect?.();
+                          onAction?.(item);
+                          onOpenChange(false);
+                        },
+                        onMouseEnter: () => setSelectedIndex(flatIndex)
+                      },
+                      item.id
+                    );
+                  })
+                ] }, group.label);
+              })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "tollerud-cmd__footer", children: [
+              /* @__PURE__ */ jsxs("span", { className: "tollerud-cmd__hint", children: [
+                /* @__PURE__ */ jsx("span", { className: "tollerud-kbd tollerud-kbd--sm", children: /* @__PURE__ */ jsx("span", { className: "tollerud-kbd__key", children: "\u2191" }) }),
+                /* @__PURE__ */ jsx("span", { className: "tollerud-kbd tollerud-kbd--sm", children: /* @__PURE__ */ jsx("span", { className: "tollerud-kbd__key", children: "\u2193" }) }),
+                /* @__PURE__ */ jsx("span", { className: "tollerud-cmd__hint-text", children: "navigate" })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "tollerud-cmd__hint", children: [
+                /* @__PURE__ */ jsx("span", { className: "tollerud-kbd tollerud-kbd--sm", children: /* @__PURE__ */ jsx("span", { className: "tollerud-kbd__key", children: "\u21B5" }) }),
+                /* @__PURE__ */ jsx("span", { className: "tollerud-cmd__hint-text", children: "select" })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "tollerud-cmd__hint", children: [
+                /* @__PURE__ */ jsx("span", { className: "tollerud-kbd tollerud-kbd--sm", children: /* @__PURE__ */ jsx("span", { className: "tollerud-kbd__key", children: "Esc" }) }),
+                /* @__PURE__ */ jsx("span", { className: "tollerud-cmd__hint-text", children: "close" })
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+CommandMenu.displayName = "CommandMenu";
+var ServiceHealthCard = forwardRef(
+  ({ className, service, status = "online", uptime, responseTime, version, loading, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border bg-tollerud-surface-raised p-4",
+          "transition-[border-color] duration-[150ms]",
+          status === "offline" && "border-tollerud-error/40",
+          status === "warning" && "border-tollerud-yellow/30",
+          status === "online" && "border-tollerud-border hover:border-tollerud-noir-500",
+          status === "idle" && "border-tollerud-border opacity-60",
+          loading && "animate-pulse",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-tollerud-foreground truncate", children: service }),
+            /* @__PURE__ */ jsx(StatusDot, { status })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-4 gap-y-1 text-xs text-tollerud-text-muted", children: [
+            uptime && /* @__PURE__ */ jsxs("span", { children: [
+              "Uptime: ",
+              /* @__PURE__ */ jsx("span", { className: "text-tollerud-text-secondary", children: uptime })
+            ] }),
+            responseTime && /* @__PURE__ */ jsxs("span", { children: [
+              "Response: ",
+              /* @__PURE__ */ jsx("span", { className: "text-tollerud-text-secondary", children: responseTime })
+            ] }),
+            version && /* @__PURE__ */ jsxs("span", { children: [
+              "Version: ",
+              /* @__PURE__ */ jsx("span", { className: "text-tollerud-text-secondary", children: version })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ServiceHealthCard.displayName = "ServiceHealthCard";
+var HostCard = forwardRef(
+  ({ className, hostname, ip, status = "online", cpu, memory, disk, uptime, containers, loading, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border bg-tollerud-surface-raised p-4",
+          "transition-[border-color] duration-[150ms]",
+          status === "offline" && "border-tollerud-error/40",
+          status === "warning" && "border-tollerud-yellow/30",
+          status === "online" && "border-tollerud-border hover:border-tollerud-noir-500",
+          loading && "animate-pulse",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ jsx(StatusDot, { status }),
+              /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-tollerud-foreground truncate", children: hostname })
+            ] }),
+            containers !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-tollerud-text-muted whitespace-nowrap ml-2", children: [
+              containers,
+              " container",
+              containers !== 1 ? "s" : ""
+            ] })
+          ] }),
+          ip && /* @__PURE__ */ jsx("div", { className: "text-xs text-tollerud-text-muted mb-2 font-mono", children: ip }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-4 gap-y-1 text-xs text-tollerud-text-muted", children: [
+            cpu && /* @__PURE__ */ jsxs("span", { children: [
+              "CPU: ",
+              /* @__PURE__ */ jsx("span", { className: "text-tollerud-text-secondary", children: cpu })
+            ] }),
+            memory && /* @__PURE__ */ jsxs("span", { children: [
+              "RAM: ",
+              /* @__PURE__ */ jsx("span", { className: "text-tollerud-text-secondary", children: memory })
+            ] }),
+            disk && /* @__PURE__ */ jsxs("span", { children: [
+              "Disk: ",
+              /* @__PURE__ */ jsx("span", { className: "text-tollerud-text-secondary", children: disk })
+            ] }),
+            uptime && /* @__PURE__ */ jsxs("span", { children: [
+              "Up: ",
+              /* @__PURE__ */ jsx("span", { className: "text-tollerud-text-secondary", children: uptime })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+HostCard.displayName = "HostCard";
+var DockerStackCard = forwardRef(
+  ({ className, name, services, composePath, loading, ...props }, ref) => {
+    const onlineCount = services.filter((s) => s.status === "online").length;
+    const degraded = services.some((s) => s.status === "offline" || s.status === "warning");
+    const status = services.every((s) => s.status === "online") ? "online" : degraded ? "warning" : "offline";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border bg-tollerud-surface-raised p-4",
+          "transition-[border-color] duration-[150ms]",
+          status === "offline" && "border-tollerud-error/40",
+          status === "warning" && "border-tollerud-yellow/30",
+          status === "online" && "border-tollerud-border hover:border-tollerud-noir-500",
+          loading && "animate-pulse",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ jsx(StatusDot, { status }),
+              /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-tollerud-foreground truncate", children: name })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-tollerud-text-muted whitespace-nowrap ml-2", children: [
+              onlineCount,
+              "/",
+              services.length,
+              " healthy"
+            ] })
+          ] }),
+          composePath && /* @__PURE__ */ jsx("div", { className: "text-[11px] text-tollerud-text-muted font-mono mb-2 truncate", children: composePath }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: services.map((svc) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-tollerud-text-secondary truncate", children: svc.name }),
+            /* @__PURE__ */ jsx(StatusDot, { status: svc.status })
+          ] }, svc.name)) })
+        ]
+      }
+    );
+  }
+);
+DockerStackCard.displayName = "DockerStackCard";
+var severityStyles = {
+  critical: { border: "border-tollerud-error/50", dot: "bg-tollerud-error shadow-[0_0_8px_rgba(239,68,68,0.6)]", label: "text-tollerud-error" },
+  high: { border: "border-tollerud-yellow/50", dot: "bg-tollerud-yellow shadow-[0_0_8px_rgba(232,213,0,0.5)]", label: "text-tollerud-yellow" },
+  medium: { border: "border-tollerud-amber/40", dot: "bg-tollerud-amber", label: "text-tollerud-amber" },
+  low: { border: "border-tollerud-noir-500", dot: "bg-tollerud-noir-400", label: "text-tollerud-text-muted" },
+  info: { border: "border-tollerud-info/30", dot: "bg-tollerud-info", label: "text-tollerud-info" }
+};
+var IncidentCard = forwardRef(
+  ({ className, title, severity, timestamp, description, service, acknowledged, loading, ...props }, ref) => {
+    const style = severityStyles[severity];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border bg-tollerud-surface-raised p-4",
+          "transition-[border-color] duration-[150ms]",
+          style.border,
+          acknowledged && "opacity-50",
+          loading && "animate-pulse",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("w-2 h-2 rounded-full mt-1.5 flex-shrink-0", style.dot) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-tollerud-foreground truncate", children: title }),
+              /* @__PURE__ */ jsx("span", { className: cn("text-[11px] font-medium uppercase whitespace-nowrap", style.label), children: severity })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5 text-xs text-tollerud-text-muted", children: [
+              /* @__PURE__ */ jsx("span", { children: timestamp }),
+              service && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-tollerud-noir-500", children: "\xB7" }),
+                /* @__PURE__ */ jsx("span", { children: service })
+              ] })
+            ] }),
+            description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-tollerud-text-secondary leading-relaxed", children: description })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+IncidentCard.displayName = "IncidentCard";
+var stateStyles = {
+  pending: "border-tollerud-yellow/30 hover:border-tollerud-yellow/50",
+  approved: "border-tollerud-success/40 opacity-70",
+  rejected: "border-tollerud-error/40 opacity-70"
+};
+var stateLabels = {
+  pending: { text: "Awaiting approval", cls: "text-tollerud-yellow" },
+  approved: { text: "Approved", cls: "text-tollerud-success" },
+  rejected: { text: "Rejected", cls: "text-tollerud-error" }
+};
+var ApprovalCard = forwardRef(
+  ({ className, action, description, source, state = "pending", timestamp, onApprove, onReject, disabled, loading, ...props }, ref) => {
+    const label = stateLabels[state];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border bg-tollerud-surface-raised p-4",
+          "transition-all duration-[150ms]",
+          stateStyles[state],
+          loading && "animate-pulse",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-tollerud-foreground truncate", children: action }),
+            /* @__PURE__ */ jsx("span", { className: cn("text-[11px] font-medium whitespace-nowrap ml-2", label.cls), children: label.text })
+          ] }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-tollerud-text-secondary mb-1.5 leading-relaxed", children: description }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-4 gap-y-0.5 text-[11px] text-tollerud-text-muted mb-3", children: [
+            source && /* @__PURE__ */ jsx("span", { className: "font-mono", children: source }),
+            timestamp && /* @__PURE__ */ jsx("span", { children: timestamp })
+          ] }),
+          state === "pending" && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled,
+                onClick: onApprove,
+                className: cn(
+                  "flex-1 rounded-md px-3 py-1.5 text-xs font-semibold transition-all",
+                  "bg-tollerud-success text-tollerud-text-inverse",
+                  "hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed"
+                ),
+                children: "Approve"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled,
+                onClick: onReject,
+                className: cn(
+                  "flex-1 rounded-md px-3 py-1.5 text-xs font-semibold transition-all",
+                  "bg-tollerud-error text-white",
+                  "hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed"
+                ),
+                children: "Reject"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ApprovalCard.displayName = "ApprovalCard";
+var BackupStatusPanel = forwardRef(
+  ({ className, jobs, totalSize, lastFullBackup, loading, ...props }, ref) => {
+    const failed = jobs.filter((j) => j.status === "offline").length;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border border-tollerud-border bg-tollerud-surface-raised",
+          loading && "animate-pulse",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-tollerud-border", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-tollerud-foreground", children: "Backups" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-[11px] text-tollerud-text-muted", children: [
+              totalSize && /* @__PURE__ */ jsx("span", { children: totalSize }),
+              lastFullBackup && /* @__PURE__ */ jsxs("span", { children: [
+                "Last full: ",
+                lastFullBackup
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-1", children: [
+            jobs.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-xs text-center text-tollerud-text-muted", children: "No backup jobs configured" }),
+            jobs.map((job) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between px-3 py-2 rounded-md hover:bg-tollerud-noir-800/50 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx(StatusDot, { status: job.status }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-tollerud-foreground truncate", children: job.name })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-[11px] text-tollerud-text-muted flex-shrink-0 ml-2", children: [
+                    job.size && /* @__PURE__ */ jsx("span", { children: job.size }),
+                    job.target && /* @__PURE__ */ jsx("span", { className: "hidden sm:inline font-mono", children: job.target })
+                  ] })
+                ]
+              },
+              job.name
+            ))
+          ] }),
+          failed > 0 && /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-t border-tollerud-border", children: /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-tollerud-error", children: [
+            failed,
+            " job",
+            failed !== 1 ? "s" : "",
+            " failed \u2014 check logs"
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+BackupStatusPanel.displayName = "BackupStatusPanel";
+var Timeline = forwardRef(
+  ({ className, items, active, loading, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("tollerud-timeline", loading && "animate-pulse", className),
+        role: "list",
+        "aria-label": "Activity timeline",
+        ...props,
+        children: items.map((item, i) => {
+          const isLast = i === items.length - 1;
+          return /* @__PURE__ */ jsxs("div", { className: "tollerud-timeline__item", role: "listitem", children: [
+            /* @__PURE__ */ jsx("div", { className: "tollerud-timeline__marker", children: /* @__PURE__ */ jsxs("div", { className: "tollerud-timeline__dot-group", children: [
+              item.icon ? /* @__PURE__ */ jsx("span", { className: "tollerud-timeline__icon", children: item.icon }) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "tollerud-timeline__dot",
+                    active && "tollerud-timeline__dot--active",
+                    item.status === "online" && "bg-tollerud-success shadow-[0_0_6px_rgba(34,197,94,0.5)]",
+                    item.status === "offline" && "bg-tollerud-error",
+                    item.status === "warning" && "bg-tollerud-yellow shadow-[0_0_6px_rgba(232,213,0,0.5)]",
+                    !item.status && "bg-tollerud-noir-500"
+                  )
+                }
+              ),
+              !isLast && /* @__PURE__ */ jsx("div", { className: "tollerud-timeline__line" })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { className: "tollerud-timeline__content", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "tollerud-timeline__title", children: item.title }),
+                /* @__PURE__ */ jsx("span", { className: "tollerud-timeline__time", children: item.time })
+              ] }),
+              item.description && /* @__PURE__ */ jsx("p", { className: "tollerud-timeline__description", children: item.description }),
+              item.meta && item.meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 mt-1", children: item.meta.map((m) => /* @__PURE__ */ jsx("span", { className: "tollerud-timeline__meta", children: m }, m)) })
+            ] })
+          ] }, item.id);
+        })
+      }
+    );
+  }
+);
+Timeline.displayName = "Timeline";
+var AlertInbox = forwardRef(
+  ({ className, alerts, filterSeverity = "", onAcknowledge, loading, emptyMessage = "All clear \u2014 no incidents", ...props }, ref) => {
+    const filtered = filterSeverity ? alerts.filter((a) => a.severity === filterSeverity) : alerts;
+    const counts = {
+      total: alerts.length,
+      unacknowledged: alerts.filter((a) => !a.acknowledged).length,
+      critical: alerts.filter((a) => a.severity === "critical" && !a.acknowledged).length
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border border-tollerud-border bg-tollerud-surface-raised overflow-hidden",
+          loading && "animate-pulse",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-tollerud-border", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-tollerud-foreground", children: "Alerts" }),
+              counts.unacknowledged > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-[11px] text-tollerud-error font-medium", children: [
+                /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-tollerud-error animate-pulse" }),
+                counts.unacknowledged,
+                " unread"
+              ] }),
+              counts.critical > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-tollerud-error font-bold", children: [
+                counts.critical,
+                " critical"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-tollerud-text-muted", children: [
+              filtered.length,
+              " of ",
+              alerts.length
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "divide-y divide-tollerud-border/50 max-h-[480px] overflow-y-auto", children: [
+            filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-4 py-8 text-xs text-center text-tollerud-text-muted", children: emptyMessage }),
+            filtered.map((alert) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+              /* @__PURE__ */ jsx(
+                IncidentCard,
+                {
+                  title: alert.title,
+                  severity: alert.severity,
+                  timestamp: alert.timestamp,
+                  description: alert.description,
+                  service: alert.service,
+                  acknowledged: alert.acknowledged,
+                  className: "border-0 rounded-none bg-transparent hover:bg-tollerud-noir-800/30"
+                }
+              ),
+              alert.acknowledged && /* @__PURE__ */ jsx("span", { className: "absolute bottom-2 right-3 text-[10px] font-medium text-tollerud-text-muted/50", children: "Acknowledged" }),
+              !alert.acknowledged && onAcknowledge && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onAcknowledge(alert.id),
+                  className: cn(
+                    "absolute bottom-2 right-3 text-[10px] font-medium px-2 py-0.5 rounded",
+                    "text-tollerud-yellow/70 hover:text-tollerud-yellow hover:bg-tollerud-yellow/10",
+                    "opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+                  ),
+                  children: "Acknowledge"
+                }
+              )
+            ] }, alert.id))
+          ] })
+        ]
+      }
+    );
+  }
+);
+AlertInbox.displayName = "AlertInbox";
+var stepIcon = {
+  pending: "\u25CB",
+  running: "\u25C9",
+  success: "\u25CF",
+  failed: "\u2715",
+  skipped: "\u2014"
+};
+var stepStyles = {
+  pending: "text-tollerud-noir-400",
+  running: "text-tollerud-yellow animate-pulse",
+  success: "text-tollerud-success",
+  failed: "text-tollerud-error",
+  skipped: "text-tollerud-noir-500"
+};
+var RollbackPlan = forwardRef(
+  ({ className, name, steps, executing, loading, ...props }, ref) => {
+    const statusSummary = {
+      pending: steps.filter((s) => s.status === "pending").length,
+      running: steps.filter((s) => s.status === "running").length,
+      success: steps.filter((s) => s.status === "success").length,
+      failed: steps.filter((s) => s.status === "failed").length,
+      skipped: steps.filter((s) => s.status === "skipped").length
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border border-tollerud-border bg-tollerud-surface-raised",
+          loading && "animate-pulse",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-tollerud-border", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-tollerud-foreground", children: name }),
+              executing && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-tollerud-yellow font-medium animate-pulse", children: "Executing\u2026" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[11px] text-tollerud-text-muted", children: [
+              statusSummary.success > 0 && /* @__PURE__ */ jsxs("span", { className: "text-tollerud-success", children: [
+                statusSummary.success,
+                " done"
+              ] }),
+              statusSummary.failed > 0 && /* @__PURE__ */ jsxs("span", { className: "text-tollerud-error", children: [
+                statusSummary.failed,
+                " failed"
+              ] }),
+              statusSummary.running > 0 && /* @__PURE__ */ jsxs("span", { className: "text-tollerud-yellow", children: [
+                statusSummary.running,
+                " running"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "p-1", children: steps.map((step) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-start gap-3 px-3 py-2 rounded-md",
+                "transition-colors duration-[150ms]",
+                step.status === "failed" && "bg-tollerud-error/5",
+                step.status === "running" && "bg-tollerud-yellow/5"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: cn("font-mono text-sm mt-0.5 flex-shrink-0", stepStyles[step.status]), children: stepIcon[step.status] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { className: cn(
+                    "text-xs font-medium",
+                    step.status === "success" ? "text-tollerud-success" : step.status === "failed" ? "text-tollerud-error" : step.status === "skipped" ? "text-tollerud-noir-500" : "text-tollerud-foreground"
+                  ), children: step.label }),
+                  step.description && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-tollerud-text-muted mt-0.5", children: step.description })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: cn(
+                  "text-[10px] uppercase font-semibold flex-shrink-0",
+                  stepStyles[step.status]
+                ), children: step.status })
+              ]
+            },
+            step.id
+          )) })
+        ]
+      }
+    );
+  }
+);
+RollbackPlan.displayName = "RollbackPlan";
+var diffStyles = {
+  add: "bg-tollerud-success/[0.06] text-tollerud-success hover:bg-tollerud-success/[0.10]",
+  remove: "bg-tollerud-error/[0.06] text-tollerud-error hover:bg-tollerud-error/[0.10]",
+  context: "text-tollerud-noir-300"
+};
+var diffPrefix = {
+  add: "+",
+  remove: "-",
+  context: " "
+};
+var ActionDiff = forwardRef(
+  ({ className, lines, label, view = "unified", loading, ...props }, ref) => {
+    const [showContext, setShowContext] = useState(true);
+    const stats = useMemo(() => {
+      const adds = lines.filter((l) => l.type === "add").length;
+      const rems = lines.filter((l) => l.type === "remove").length;
+      return { adds, rems };
+    }, [lines]);
+    const displayLines = showContext ? lines : lines.filter((l) => l.type !== "context");
+    const hasContext = lines.some((l) => l.type === "context");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border border-tollerud-border bg-[var(--color-tollerud-surface-raised)] overflow-hidden",
+          loading && "animate-pulse",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-tollerud-border bg-tollerud-noir-900", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 min-w-0", children: label && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-tollerud-foreground font-mono truncate", children: label }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-[11px]", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-tollerud-success", children: [
+                "+",
+                stats.adds
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "text-tollerud-error", children: [
+                "-",
+                stats.rems
+              ] }),
+              hasContext && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowContext(!showContext),
+                  className: "text-tollerud-text-muted hover:text-tollerud-foreground transition-colors",
+                  children: showContext ? "Hide context" : "Show context"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "overflow-x-auto font-mono text-xs leading-relaxed", children: /* @__PURE__ */ jsx("table", { className: "w-full border-collapse", children: /* @__PURE__ */ jsx("tbody", { children: displayLines.map((line, i) => /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              className: cn(
+                "transition-colors duration-[100ms]",
+                diffStyles[line.type]
+              ),
+              children: [
+                /* @__PURE__ */ jsx("td", { className: cn(
+                  "w-10 text-right px-2 py-px select-none",
+                  "text-tollerud-noir-500 border-r border-tollerud-border/30",
+                  "text-[10px] align-top"
+                ), children: line.oldLine ?? "" }),
+                /* @__PURE__ */ jsx("td", { className: cn(
+                  "w-10 text-right px-2 py-px select-none",
+                  "text-tollerud-noir-500 border-r border-tollerud-border/30",
+                  "text-[10px] align-top"
+                ), children: line.newLine ?? "" }),
+                /* @__PURE__ */ jsxs("td", { className: "px-2 py-px whitespace-pre-wrap", children: [
+                  /* @__PURE__ */ jsx("span", { className: "select-none opacity-50 mr-2", children: diffPrefix[line.type] }),
+                  line.text
+                ] })
+              ]
+            },
+            i
+          )) }) }) })
+        ]
+      }
+    );
+  }
+);
+ActionDiff.displayName = "ActionDiff";
+var levelStyles = {
+  debug: "text-tollerud-noir-400",
+  trace: "text-tollerud-noir-300",
+  info: "text-tollerud-foreground",
+  warn: "text-tollerud-amber",
+  error: "text-tollerud-error"
+};
+var levelLabels = {
+  debug: "DBG",
+  trace: "TRC",
+  info: "INF",
+  warn: "WRN",
+  error: "ERR"
+};
+var LogViewer = forwardRef(
+  ({ className, lines, maxLines = 5e3, showLineNumbers = true, showTimestamps = true, follow = true, searchable, height = "400px", loading, ...props }, ref) => {
+    const [search, setSearch] = useState("");
+    const [isFollowing, setIsFollowing] = useState(follow);
+    const scrollRef = useRef(null);
+    const displayedLines = useMemo(() => {
+      return lines.length > maxLines ? lines.slice(-maxLines) : lines;
+    }, [lines, maxLines]);
+    const filteredLines = useMemo(() => {
+      if (!search.trim()) return displayedLines;
+      return displayedLines.filter(
+        (l) => l.text.toLowerCase().includes(search.toLowerCase()) || l.source?.toLowerCase().includes(search.toLowerCase())
+      );
+    }, [displayedLines, search]);
+    useEffect(() => {
+      if (isFollowing && scrollRef.current) {
+        scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+      }
+    }, [filteredLines.length, isFollowing]);
+    const handleScroll = (e) => {
+      const el = e.currentTarget;
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+      setIsFollowing(atBottom);
+    };
+    const filteredFrom = displayedLines.indexOf(filteredLines[0]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border border-tollerud-border bg-[var(--color-tollerud-surface-raised)] overflow-hidden tollerud-log-viewer",
+          loading && "animate-pulse",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-tollerud-border bg-tollerud-noir-900", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-tollerud-text-muted", children: [
+              isFollowing ? /* @__PURE__ */ jsx("span", { className: "text-tollerud-yellow font-medium", children: "\u25CF Live" }) : /* @__PURE__ */ jsx("span", { className: "text-tollerud-noir-400", children: "\u25CF Paused" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                filteredLines.length,
+                " lines"
+              ] }),
+              lines.length > maxLines && /* @__PURE__ */ jsxs("span", { className: "text-tollerud-amber", children: [
+                "(showing last ",
+                maxLines,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: searchable && /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                placeholder: "Search logs\u2026",
+                className: cn(
+                  "w-40 text-[11px] px-2 py-1 rounded bg-tollerud-noir-800",
+                  "border border-tollerud-noir-600 text-tollerud-foreground",
+                  "placeholder:text-tollerud-noir-400 outline-none",
+                  "focus:border-tollerud-yellow/50 transition-colors"
+                )
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: scrollRef,
+              onScroll: handleScroll,
+              className: "overflow-y-auto font-mono text-xs leading-relaxed p-3",
+              style: { height },
+              children: [
+                filteredLines.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-tollerud-noir-400 text-xs", children: search ? "No matching log lines" : "No log output" }),
+                filteredLines.map((line, i) => {
+                  const absLineNum = filteredFrom >= 0 ? filteredFrom + i + 1 : i + 1;
+                  const level = line.level ?? "info";
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "flex gap-3 hover:bg-[var(--color-tollerud-surface-hover)] px-1 py-px rounded-sm",
+                        levelStyles[level]
+                      ),
+                      children: [
+                        showLineNumbers && /* @__PURE__ */ jsx("span", { className: "text-tollerud-noir-500 text-right select-none w-8 flex-shrink-0", children: absLineNum }),
+                        showTimestamps && line.timestamp && /* @__PURE__ */ jsx("span", { className: "text-tollerud-noir-400 flex-shrink-0 select-none", children: line.timestamp }),
+                        /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 w-7 text-center font-bold text-[10px] uppercase opacity-60", children: levelLabels[level] }),
+                        /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap break-all", children: line.text })
+                      ]
+                    },
+                    `${absLineNum}-${i}`
+                  );
+                })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+LogViewer.displayName = "LogViewer";
+var Textarea = forwardRef(
+  ({ className, label, error, id, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-xs font-medium text-tollerud-text-muted", children: label }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          id,
+          className: cn(
+            "font-sans text-base px-3 py-2 rounded min-h-[80px] resize-y",
+            "bg-tollerud-surface-raised border",
+            "text-tollerud-text-primary",
+            "placeholder:text-tollerud-text-muted",
+            "transition-[border-color] duration-[150ms]",
+            "focus:outline-none focus:border-tollerud-yellow focus:shadow-[0_0_0_1px_#E8D500]",
+            error ? "border-tollerud-error" : "border-tollerud-border",
+            className
+          ),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-tollerud-error mt-0.5", children: error })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+var Select = forwardRef(
+  ({ className, label, error, placeholder, options = [], value, onChange, ...props }, ref) => {
+    const [open, setOpen] = useState(false);
+    const [highlightedIdx, setHighlightedIdx] = useState(0);
+    const containerRef = useRef(null);
+    const listRef = useRef(null);
+    const selectedOption = options.find((o) => o.value === value);
+    useEffect(() => {
+      if (!open) return;
+      const handleClick = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClick);
+      return () => document.removeEventListener("mousedown", handleClick);
+    }, [open]);
+    useEffect(() => {
+      if (open) {
+        const idx = value ? options.findIndex((o) => o.value === value) : -1;
+        setHighlightedIdx(idx >= 0 ? idx : 0);
+      }
+    }, [open, options, value]);
+    useEffect(() => {
+      if (open && listRef.current) {
+        const item = listRef.current.children[highlightedIdx];
+        item?.scrollIntoView({ block: "nearest" });
+      }
+    }, [open, highlightedIdx]);
+    const selectOption = useCallback(
+      (opt) => {
+        onChange?.(opt.value);
+        setOpen(false);
+      },
+      [onChange]
+    );
+    const handleKeyDown = (e) => {
+      if (!open) {
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+          e.preventDefault();
+          setOpen(true);
+        }
+        return;
+      }
+      switch (e.key) {
+        case "Escape":
+          e.preventDefault();
+          setOpen(false);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          setHighlightedIdx((prev) => Math.min(prev + 1, options.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setHighlightedIdx((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (options[highlightedIdx]) {
+            selectOption(options[highlightedIdx]);
+          }
+          break;
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", ref, children: [
+      label && /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-tollerud-text-muted", children: label }),
+      /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen(!open),
+            onKeyDown: handleKeyDown,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            className: cn(
+              "font-sans text-sm w-full flex items-center justify-between px-3 py-2.5 rounded-lg",
+              "bg-tollerud-surface-raised",
+              "text-tollerud-text-primary text-left",
+              "transition-all duration-150 ease-out cursor-pointer",
+              error ? "border-tollerud-error/70 focus:border-tollerud-error focus:shadow-[0_0_0_1px_#EF4444]" : "border-tollerud-border focus:border-tollerud-yellow focus:shadow-[0_0_0_1px_#E8D500]",
+              "border hover:border-tollerud-noir-400",
+              "focus:outline-none",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn(!selectedOption && "text-tollerud-text-muted"), children: selectedOption ? selectedOption.label : placeholder || "Select\u2026" }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: cn(
+                    "h-4 w-4 text-tollerud-text-muted transition-transform duration-150 flex-shrink-0",
+                    open && "rotate-180"
+                  ),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" })
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: listRef,
+            role: "listbox",
+            className: cn(
+              "absolute z-10 left-0 right-0 mt-1 py-1",
+              "rounded-lg border border-tollerud-border bg-tollerud-surface-overlay",
+              "shadow-[0_8px_24px_rgba(0,0,0,0.4)]",
+              "max-h-60 overflow-y-auto"
+            ),
+            children: [
+              options.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-tollerud-text-muted text-center", children: "No options" }),
+              options.map((opt, idx) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": opt.value === value,
+                  onClick: () => selectOption(opt),
+                  onMouseEnter: () => setHighlightedIdx(idx),
+                  className: cn(
+                    "w-full text-sm text-left px-3 py-2 transition-colors duration-75",
+                    "cursor-pointer",
+                    opt.value === value ? "text-tollerud-yellow" : "text-tollerud-text-primary",
+                    idx === highlightedIdx && !(opt.value === value) ? "bg-tollerud-noir-700" : "hover:bg-tollerud-noir-700/60",
+                    opt.value === value && highlightedIdx === idx && "bg-tollerud-noir-700"
+                  ),
+                  children: opt.label
+                },
+                opt.value
+              ))
+            ]
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-tollerud-error mt-0.5", children: error })
+    ] });
+  }
+);
+Select.displayName = "Select";
+var Checkbox = forwardRef(
+  ({ className, label, id: idProp, checked, ...props }, ref) => {
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "inline-flex items-center gap-2 cursor-pointer select-none group",
+          "text-sm text-tollerud-text-primary",
+          props.disabled && "opacity-50 pointer-events-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                id,
+                type: "checkbox",
+                checked,
+                className: "peer sr-only",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "h-4 w-4 rounded border transition-all duration-[150ms]",
+                  "flex items-center justify-center",
+                  "bg-tollerud-surface-raised border-tollerud-border",
+                  "peer-focus-visible:outline-2 peer-focus-visible:outline-tollerud-yellow",
+                  "peer-checked:bg-tollerud-yellow peer-checked:border-tollerud-yellow",
+                  "group-hover:border-tollerud-text-secondary"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: cn(
+                      "h-3 w-3 text-tollerud-noir-black transition-opacity duration-[150ms]",
+                      checked ? "opacity-100" : "opacity-0"
+                    ),
+                    viewBox: "0 0 12 12",
+                    fill: "none",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M2.5 6l2.5 2.5 4.5-5",
+                        stroke: "currentColor",
+                        strokeWidth: 2,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Switch = forwardRef(
+  ({ className, label, id: idProp, checked, ...props }, ref) => {
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "inline-flex items-center gap-2.5 cursor-pointer select-none group",
+          "text-sm text-tollerud-text-primary",
+          props.disabled && "opacity-40 pointer-events-none cursor-not-allowed",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "relative inline-flex items-center h-5 w-9 flex-shrink-0 rounded-full",
+                "transition-colors duration-200 ease-out",
+                checked ? "bg-tollerud-yellow" : "bg-tollerud-noir-600",
+                "group-hover:bg-tollerud-noir-500",
+                checked && "group-hover:bg-tollerud-yellow-bright",
+                "peer-focus-visible:outline-2 peer-focus-visible:outline-tollerud-yellow peer-focus-visible:outline-offset-2"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref,
+                    id,
+                    type: "checkbox",
+                    role: "switch",
+                    checked,
+                    className: "peer absolute inset-0 opacity-0 w-full h-full cursor-pointer z-10",
+                    ...props
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "block h-3.5 w-3.5 rounded-full shadow-sm",
+                      "transition-all duration-200 ease-out",
+                      checked ? "translate-x-[18px] bg-tollerud-black" : "translate-x-[3px] bg-tollerud-white"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          label && /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+var RadioGroup = forwardRef(
+  ({ label, error, children, className }, ref) => {
+    useId();
+    return /* @__PURE__ */ jsxs("fieldset", { ref, className: cn("flex flex-col gap-1", className), children: [
+      label && /* @__PURE__ */ jsx("legend", { className: "text-xs font-medium text-tollerud-text-muted mb-1", children: label }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-tollerud-error mt-0.5", children: error })
+    ] });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var Radio = forwardRef(
+  ({ className, label, id: idProp, ...props }, ref) => {
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "inline-flex items-center gap-2 cursor-pointer select-none group",
+          "text-sm text-tollerud-text-primary",
+          props.disabled && "opacity-50 pointer-events-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                id,
+                type: "radio",
+                className: "peer sr-only",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "h-4 w-4 rounded-full border transition-all duration-[150ms]",
+                  "bg-tollerud-surface-raised border-tollerud-border",
+                  "peer-focus-visible:outline-2 peer-focus-visible:outline-tollerud-yellow",
+                  "peer-checked:border-tollerud-yellow",
+                  "group-hover:border-tollerud-text-secondary",
+                  "flex items-center justify-center"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "h-2 w-2 rounded-full bg-tollerud-yellow transition-opacity duration-[150ms]",
+                      props.checked ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+var defaultLabels = {
+  tollerudProject: "A Tollerud Project",
+  allRightsReserved: "All rights reserved."
+};
+var MONOGRAM_PATH = "M82.4839273,140.272626 L95.1738252,140.272626 L95.1738252,143 L34.8114657,143 L34.8114657,140.272626 L47.5013636,140.272626 L47.5013636,28.2924381 C40.1277806,26.4177752 32.9252955,25.2241422 26.4088393,25.2241422 C12.1757856,25.2241422 4.11617359,34.5982703 4.11617359,39.8821508 C4.11617359,40.9049161 4.63028596,41.5867596 5.65932936,41.5867596 C7.20248513,41.5867596 7.37440169,40.3931266 8.06043062,38.8593855 C10.4615319,33.575505 15.6059302,31.5307881 20.4073141,31.5307881 C29.152955,31.5307881 35.1552988,38.5184637 35.1552988,47.2107482 C35.1552988,56.2447681 28.8107592,62.8907084 18.0070315,62.8907084 C7.5454996,62.891522 0,53.6882617 0,43.8023442 C0,30.8497582 11.3178401,21.986606 26.5799372,21.986606 C51.1026062,21.986606 84.1989996,39.2011209 104.948509,39.2011209 C118.495534,39.2011209 126.384048,31.7016558 126.384048,19.4300996 C126.384048,10.3968933 118.667451,4.60203698 115.580321,4.60203698 C114.552096,4.60203698 113.69415,5.1130128 113.69415,6.13577809 C113.69415,7.49946515 114.552096,7.6695192 115.409223,8.01044097 C115.752237,8.18049502 122.268693,10.5669474 122.268693,19.2592319 C122.268693,28.2924381 115.238125,34.0872945 107.177694,34.0872945 C97.7460244,34.0872945 91.0584702,26.4177752 91.0584702,17.8955448 C91.0584702,6.64675391 99.9760277,0 109.749893,0 C122.268693,0 129.642276,9.88510384 129.642276,19.6001536 C129.642276,34.2581622 119.181563,42.4386572 104.947691,42.4386572 C98.0890388,42.4386572 90.5443579,40.9049161 82.4839273,38.6901451 L82.4839273,140.272626 Z";
+function Footer({
+  labels,
+  layout = "responsive",
+  className,
+  style,
+  unstyled = false,
+  accent = false,
+  classNameInner,
+  classNameLogo,
+  classNameText,
+  classNameLink
+}) {
+  const t = { ...defaultLabels, ...labels };
+  const attribution = t.attribution?.trim();
+  const footerSurface = unstyled ? "" : accent ? "border-t border-tollerud-yellow/20 bg-tollerud-yellow/5" : "border-t border-tollerud-border bg-tollerud-noir-900/80";
+  const innerLayoutClasses = layout === "row" ? "max-w-7xl mx-auto px-8 flex flex-row items-center justify-between gap-4" : "max-w-7xl mx-auto px-8 flex flex-col md:flex-row items-center justify-center md:justify-between gap-4 md:gap-0";
+  const logoColor = unstyled ? "" : accent ? "text-tollerud-yellow" : "text-tollerud-text-muted";
+  const textWrapperClasses = layout === "row" ? "flex-1 text-right ml-4" : "flex-1 text-center md:text-right md:ml-4";
+  const textLayoutClasses = layout === "row" ? "text-sm text-tollerud-text-secondary inline-flex flex-row items-center justify-end text-right gap-0" : "text-sm text-tollerud-text-secondary flex flex-col md:flex-row md:inline gap-0";
+  return /* @__PURE__ */ jsx("footer", { className: cn("w-full pt-4 pb-4", footerSurface, className), style, children: /* @__PURE__ */ jsxs("div", { className: cn(innerLayoutClasses, classNameInner), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 md:flex-shrink-0", children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 130 143",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        xmlnsXlink: "http://www.w3.org/1999/xlink",
+        className: cn("h-5 w-5", logoColor, classNameLogo),
+        role: "img",
+        children: [
+          /* @__PURE__ */ jsx("title", { children: "Tollerud Logo" }),
+          /* @__PURE__ */ jsx("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsx("g", { id: "Tollerud-Monogram", transform: "translate(-86.000000, -109.000000)", fill: "currentColor", children: /* @__PURE__ */ jsx("g", { id: "Group-2", transform: "translate(32.000000, 55.000000)", children: /* @__PURE__ */ jsx("g", { id: "Group", transform: "translate(54.000000, 54.000000)", children: /* @__PURE__ */ jsx("path", { d: MONOGRAM_PATH, id: "Monogram" }) }) }) }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: textWrapperClasses, children: /* @__PURE__ */ jsxs("p", { className: cn(textLayoutClasses, classNameText), children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "https://tollerud.no",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: cn(
+              "underline decoration-tollerud-yellow decoration-[3px] underline-offset-[4px] hover:opacity-80 transition-opacity",
+              classNameLink
+            ),
+            style: {
+              textDecorationThickness: "3px",
+              textUnderlineOffset: "4px"
+            },
+            children: t.tollerudProject
+          }
+        ),
+        attribution ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { children: attribution })
+        ] }) : null,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: layout === "row" ? "ml-1" : "md:ml-1", children: t.allRightsReserved })
+    ] }) })
+  ] }) });
+}
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2",
+        "rounded-lg border border-tollerud-border/30 bg-tollerud-noir-900 p-6 shadow-xl",
+        "data-[state=open]:animate-none data-[state=closed]:animate-none",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute top-4 right-4 rounded-sm p-1 text-tollerud-text-muted hover:text-tollerud-foreground transition-colors cursor-pointer", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = "DialogContent";
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col gap-1.5 mb-4", className),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-6", className),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-base font-semibold text-tollerud-foreground", className),
+    ...props
+  }
+));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-tollerud-text-secondary", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+var TooltipProvider = TooltipPrimitive.Provider;
+var TooltipContext = React2.createContext(null);
+function Tooltip({
+  children,
+  defaultOpen,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  ...props
+}) {
+  const [internalOpen, setInternalOpen] = React2.useState(defaultOpen ?? false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = isControlled ? controlledOnOpenChange ?? setInternalOpen : setInternalOpen;
+  return /* @__PURE__ */ jsx(TooltipContext.Provider, { value: { open, setOpen }, children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { open, onOpenChange: (v) => setOpen(v), ...props, children }) });
+}
+Tooltip.displayName = "Tooltip";
+var TooltipTrigger = React2.forwardRef(({ onClick, onTouchStart, children, ...props }, ref) => {
+  const ctx = React2.useContext(TooltipContext);
+  const touchFired = React2.useRef(false);
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Trigger,
+    {
+      ref,
+      onClick: (e) => {
+        if (touchFired.current) {
+          touchFired.current = false;
+          return;
+        }
+        if (ctx) {
+          ctx.setOpen(!ctx.open);
+        }
+        onClick?.(e);
+      },
+      onTouchStart: (e) => {
+        touchFired.current = true;
+        if (ctx && !ctx.open) {
+          ctx.setOpen(true);
+        }
+        onTouchStart?.(e);
+      },
+      ...props,
+      children
+    }
+  );
+});
+TooltipTrigger.displayName = "TooltipTrigger";
+var TooltipContent = React2.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border border-tollerud-border/30",
+      "bg-tollerud-noir-800 px-3 py-1.5 text-xs text-tollerud-foreground",
+      "shadow-md",
+      "animate-in fade-in-0 zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-1",
+      "data-[side=left]:slide-in-from-right-1",
+      "data-[side=right]:slide-in-from-left-1",
+      "data-[side=top]:slide-in-from-bottom-1",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = "TooltipContent";
+var Tabs = TabsPrimitive.Root;
+var TabsList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-9 items-center justify-center rounded-lg",
+      "bg-tollerud-noir-800 p-1 text-tollerud-text-muted",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = "TabsList";
+var TabsTrigger = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1",
+      "text-xs font-medium transition-all",
+      "text-tollerud-text-muted hover:text-tollerud-foreground",
+      "data-[state=active]:bg-tollerud-surface-raised data-[state=active]:text-tollerud-foreground data-[state=active]:shadow-sm",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tollerud-yellow/50",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-tollerud-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tollerud-yellow/50 focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = "TabsContent";
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "animate-pulse rounded-md bg-tollerud-noir-800",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var Progress = React2.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
+  ProgressPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-tollerud-noir-800",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      ProgressPrimitive.Indicator,
+      {
+        className: "h-full w-full flex-1 rounded-full bg-tollerud-yellow transition-all duration-300 ease-in-out",
+        style: { transform: `translateX(-${100 - (value || 0)}%)` }
+      }
+    )
+  }
+));
+Progress.displayName = "Progress";
+var Toaster = ({ theme = "dark", ...props }) => {
+  const [mobile, setMobile] = useState(false);
+  useEffect(() => {
+    const check = () => setMobile(window.innerWidth < 640);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      position: mobile ? "top-center" : "top-right",
+      theme,
+      className: "toaster group",
+      toastOptions: {
+        classNames: {
+          toast: "group toast group-[.toaster]:bg-tollerud-noir-900 group-[.toaster]:text-tollerud-foreground group-[.toaster]:border group-[.toaster]:border-tollerud-border/30 group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-tollerud-text-muted text-xs",
+          actionButton: "group-[.toast]:bg-tollerud-yellow group-[.toast]:text-tollerud-black group-[.toast]:text-xs group-[.toast]:font-medium group-[.toast]:px-3 group-[.toast]:py-1 group-[.toast]:rounded",
+          cancelButton: "group-[.toast]:bg-tollerud-noir-800 group-[.toast]:text-tollerud-text-muted group-[.toast]:text-xs group-[.toast]:px-3 group-[.toast]:py-1 group-[.toast]:rounded",
+          success: "group-[.toast]:border-l-tollerud-success group-[.toast]:border-l-2",
+          error: "group-[.toast]:border-l-tollerud-error group-[.toast]:border-l-2",
+          warning: "group-[.toast]:border-l-tollerud-yellow group-[.toast]:border-l-2",
+          info: "group-[.toast]:border-l-tollerud-info group-[.toast]:border-l-2"
+        }
+      },
+      ...props
+    }
+  );
+};
+var Empty = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex w-full flex-1 flex-col items-center justify-center text-center py-12",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Empty.displayName = "Empty";
+var EmptyHeader = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex max-w-sm flex-col items-center gap-2",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+EmptyHeader.displayName = "EmptyHeader";
+var EmptyIcon = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center justify-center w-12 h-12 rounded-full bg-tollerud-noir-800 text-tollerud-text-muted mb-2",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+EmptyIcon.displayName = "EmptyIcon";
+var EmptyTitle = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "h3",
+      {
+        ref,
+        className: cn(
+          "text-base font-semibold text-tollerud-foreground",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+EmptyTitle.displayName = "EmptyTitle";
+var EmptyDescription = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        className: cn(
+          "text-sm text-tollerud-text-secondary max-w-sm",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+EmptyDescription.displayName = "EmptyDescription";
+var EmptyContent = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex w-full max-w-sm flex-col items-center gap-4 mt-4",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+EmptyContent.displayName = "EmptyContent";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[9rem] overflow-hidden rounded-lg border p-1 shadow-md",
+      "bg-tollerud-noir-850 border-tollerud-border/30 text-tollerud-text-primary",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none",
+      "text-tollerud-text-secondary data-[highlighted]:text-tollerud-text-primary",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-tollerud-surface-raised",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-tollerud-border/30", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuLabel = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-xs font-semibold text-tollerud-text-muted", inset && "pl-8", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+var Sheet = ({ open, onOpenChange, children }) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange, children });
+var SheetTrigger = DialogPrimitive.Trigger;
+var SheetClose = DialogPrimitive.Close;
+var SheetOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+SheetOverlay.displayName = "SheetOverlay";
+var SheetContent = forwardRef(({ className, children, side = "right", ...props }, ref) => /* @__PURE__ */ jsx(SheetOverlay, { children: /* @__PURE__ */ jsxs(
+  DialogPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "fixed z-50 gap-4 bg-tollerud-noir-900 border-tollerud-border/30 p-6 shadow-lg",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      side === "right" && [
+        "inset-y-0 right-0 h-full w-full max-w-md border-l",
+        "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"
+      ],
+      side === "left" && [
+        "inset-y-0 left-0 h-full w-full max-w-md border-r",
+        "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"
+      ],
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxs(SheetClose, { className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100 transition-opacity text-tollerud-text-muted hover:text-tollerud-text-primary", children: [
+        /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+          /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ] })
+    ]
+  }
+) }));
+SheetContent.displayName = "SheetContent";
+var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5 text-left", className), ...props });
+var SheetTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-base font-semibold text-tollerud-text-primary", className),
+    ...props
+  }
+));
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-tollerud-text-secondary", className),
+    ...props
+  }
+));
+SheetDescription.displayName = "SheetDescription";
+function DataTableInner({
+  columns,
+  data,
+  rowKey,
+  onRowClick,
+  className,
+  emptyMessage = "No data",
+  forwardedRef
+}) {
+  const [sortKey, setSortKey] = useState(null);
+  const [sortDir, setSortDir] = useState("asc");
+  const [filters, setFilters] = useState({});
+  const filtered = useMemo(() => {
+    const activeFilters = Object.entries(filters).filter(([, v]) => v.trim() !== "");
+    if (activeFilters.length === 0) return data;
+    return data.filter(
+      (row) => activeFilters.every(([key, filterValue]) => {
+        const cellValue = String(row[key] ?? "").toLowerCase();
+        return cellValue.includes(filterValue.toLowerCase());
+      })
+    );
+  }, [data, filters]);
+  const sorted = useMemo(() => {
+    if (!sortKey) return filtered;
+    const col = columns.find((c) => c.key === sortKey);
+    if (!col?.sortable) return filtered;
+    return [...filtered].sort((a, b) => {
+      const aVal = a[sortKey];
+      const bVal = b[sortKey];
+      if (typeof aVal === "number" && typeof bVal === "number") {
+        return sortDir === "asc" ? aVal - bVal : bVal - aVal;
+      }
+      const aStr = String(aVal ?? "");
+      const bStr = String(bVal ?? "");
+      const cmp = aStr.localeCompare(bStr, "nb", { numeric: true });
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+  }, [filtered, sortKey, sortDir, columns]);
+  const getRowKey = (row, i) => {
+    if (typeof rowKey === "function") return rowKey(row);
+    if (rowKey) return row[rowKey];
+    return row.id ?? row.key ?? i;
+  };
+  const toggleSort = (key) => {
+    if (sortKey === key) {
+      setSortDir((d) => d === "asc" ? "desc" : "asc");
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  };
+  const updateFilter = (key, value) => {
+    setFilters((prev) => {
+      const next = { ...prev };
+      if (value.trim() === "") {
+        delete next[key];
+      } else {
+        next[key] = value;
+      }
+      return next;
+    });
+  };
+  const hasActiveFilters = Object.values(filters).some((v) => v.trim() !== "");
+  const filterableColumns = columns.filter((c) => c.filterable);
+  return /* @__PURE__ */ jsx("div", { ref: forwardedRef, className: cn("overflow-x-auto rounded-lg border border-tollerud-border/30", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsxs("thead", { children: [
+      /* @__PURE__ */ jsx("tr", { className: "border-b border-tollerud-border/30 bg-tollerud-noir-900", children: columns.map((col) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: cn(
+            "px-3 py-2.5 text-xs font-semibold text-tollerud-text-muted uppercase tracking-wider",
+            col.sortable && "cursor-pointer select-none hover:text-tollerud-text-primary transition-colors",
+            col.align === "right" && "text-right",
+            col.align === "center" && "text-center"
+          ),
+          style: col.width ? { width: col.width } : void 0,
+          onClick: () => col.sortable && toggleSort(col.key),
+          children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+            col.label,
+            col.sortable && sortKey === col.key && /* @__PURE__ */ jsx("span", { className: "text-tollerud-accent", children: sortDir === "asc" ? "\u2191" : "\u2193" }),
+            col.sortable && sortKey !== col.key && /* @__PURE__ */ jsx("span", { className: "text-tollerud-text-muted/30", children: "\u2195" }),
+            col.filterable && /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "12",
+                height: "12",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: cn(
+                  "opacity-40",
+                  filters[col.key] && "opacity-100 text-tollerud-yellow"
+                ),
+                children: /* @__PURE__ */ jsx("path", { d: "M4 4h16v2.172a2 2 0 0 1-.586 1.414L15 12v7l-6 2v-8.5L4.52 7.53A2 2 0 0 1 4 6.16V4z" })
+              }
+            )
+          ] })
+        },
+        col.key
+      )) }),
+      filterableColumns.length > 0 && /* @__PURE__ */ jsx("tr", { className: "border-b border-tollerud-border/20", children: columns.map((col) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: cn(
+            "px-1.5 py-1",
+            col.align === "right" && "text-right",
+            col.align === "center" && "text-center"
+          ),
+          children: col.filterable ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: `Filter ${col.label.toLowerCase()}\u2026`,
+              value: filters[col.key] ?? "",
+              onChange: (e) => updateFilter(col.key, e.target.value),
+              className: cn(
+                "w-full px-2 py-1 text-xs rounded border transition-colors outline-none",
+                "bg-tollerud-noir-900/50 border-tollerud-border/20 text-tollerud-text-primary placeholder:text-tollerud-text-muted/40",
+                "focus:border-tollerud-yellow/40 focus:ring-1 focus:ring-tollerud-yellow/20"
+              )
+            }
+          ) : null
+        },
+        `filter-${col.key}`
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+      "td",
+      {
+        colSpan: columns.length,
+        className: "px-3 py-8 text-center text-sm text-tollerud-text-muted",
+        children: hasActiveFilters ? "No matching rows" : emptyMessage
+      }
+    ) }) : sorted.map((row, i) => /* @__PURE__ */ jsx(
+      "tr",
+      {
+        className: cn(
+          "border-b border-tollerud-border/20 transition-colors",
+          onRowClick && "cursor-pointer hover:bg-tollerud-surface-raised/50"
+        ),
+        onClick: () => onRowClick?.(row),
+        children: columns.map((col) => {
+          const value = row[col.key];
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cn(
+                "px-3 py-2.5 text-tollerud-text-secondary",
+                col.align === "right" && "text-right",
+                col.align === "center" && "text-center",
+                "font-mono text-xs"
+              ),
+              children: col.render ? col.render(value, row) : String(value ?? "\u2014")
+            },
+            col.key
+          );
+        })
+      },
+      getRowKey(row, i)
+    )) })
+  ] }) });
+}
+var DataTable = forwardRef((props, ref) => /* @__PURE__ */ jsx(DataTableInner, { ...props, forwardedRef: ref }));
+DataTable.displayName = "DataTable";
+function GlowCard({
+  children,
+  className,
+  glowColor = "var(--tollerud-accent, #FFFF00)",
+  intensity = 0.15
+}) {
+  const ref = useRef(null);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [isHovered, setIsHovered] = useState(false);
+  const handleMouseMove = (e) => {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    setPos({
+      x: (e.clientX - rect.left) / rect.width * 100,
+      y: (e.clientY - rect.top) / rect.height * 100
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("relative overflow-hidden", className),
+      onMouseMove: handleMouseMove,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 transition-opacity duration-300",
+            style: {
+              opacity: isHovered ? 1 : 0,
+              background: `radial-gradient(600px circle at ${pos.x}% ${pos.y}%, ${glowColor} ${intensity * 100}%, transparent 70%)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
+      ]
+    }
+  );
+}
+function BentoDashboard({
+  title,
+  hosts = [],
+  metrics = [],
+  services = [],
+  incidents = [],
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-tollerud-text-primary", children: title }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-tollerud-text-muted", children: [
+        hosts.length,
+        " hosts \xB7 ",
+        services.length,
+        " services",
+        incidents.length > 0 && ` \xB7 ${incidents.length} active incident${incidents.length > 1 ? "s" : ""}`
+      ] })
+    ] }) }),
+    hosts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "md:col-span-2 lg:col-span-1", children: /* @__PURE__ */ jsx(HostCardComponent, { host: hosts[0] }) }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 md:col-span-2 lg:col-span-1", children: hosts.slice(1).map((h, i) => /* @__PURE__ */ jsx(HostCardComponent, { host: h }, h.hostname ?? i)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
+      metrics.length > 0 && /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
+        /* @__PURE__ */ jsx(SectionLabel, { children: "Metrics" }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-2", children: metrics.map((m, i) => /* @__PURE__ */ jsx(StatCardComponent, { stat: m }, m.label ?? i)) })
+      ] }),
+      services.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(SectionLabel, { children: "Services" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: services.slice(0, 4).map((s, i) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-tollerud-border/20 bg-tollerud-surface p-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-tollerud-text-primary", children: s.service }),
+            /* @__PURE__ */ jsx("span", { className: cn(
+              "text-xs px-1.5 py-0.5 rounded-full font-medium",
+              s.status === "online" && "text-tollerud-accent bg-tollerud-accent/10",
+              s.status === "warning" && "text-tollerud-warning bg-tollerud-warning/10",
+              s.status === "offline" && "text-tollerud-error bg-tollerud-error/10",
+              s.status === "idle" && "text-tollerud-text-muted bg-tollerud-noir-800"
+            ), children: s.status })
+          ] }),
+          s.responseTime && /* @__PURE__ */ jsxs("p", { className: "text-xs text-tollerud-text-muted mt-1", children: [
+            s.responseTime,
+            " response"
+          ] })
+        ] }, s.service ?? i)) })
+      ] })
+    ] }),
+    incidents.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(SectionLabel, { children: "Recent Incidents" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: incidents.slice(0, 4).map((inc, i) => /* @__PURE__ */ jsx(IncidentCardItem, { incident: inc }, inc.title + i)) })
+    ] })
+  ] });
+}
+function SectionLabel({ children }) {
+  return /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-tollerud-text-muted uppercase tracking-wider mb-2", children });
+}
+function HostCardComponent({ host }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(
+    "rounded-xl border p-4",
+    host.status === "online" ? "border-tollerud-border/30 bg-tollerud-surface" : host.status === "warning" ? "border-tollerud-warning/30 bg-tollerud-warning/5" : "border-tollerud-border/20 bg-tollerud-surface opacity-70"
+  ), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(StatusDotComp, { status: host.status }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-tollerud-text-primary", children: host.hostname })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-tollerud-text-muted font-mono", children: host.ip })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
+      host.cpu && /* @__PURE__ */ jsx(MetricBadge, { label: "CPU", value: host.cpu }),
+      host.memory && /* @__PURE__ */ jsx(MetricBadge, { label: "Mem", value: host.memory }),
+      host.disk && /* @__PURE__ */ jsx(MetricBadge, { label: "Disk", value: host.disk }),
+      host.uptime && /* @__PURE__ */ jsx(MetricBadge, { label: "Up", value: host.uptime })
+    ] })
+  ] });
+}
+function StatCardComponent({ stat }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-tollerud-border/20 bg-tollerud-surface p-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-tollerud-text-muted", children: stat.label }),
+    /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold text-tollerud-text-primary mt-0.5", children: stat.value }),
+    stat.change && /* @__PURE__ */ jsx("span", { className: cn(
+      "text-xs font-medium",
+      stat.change.direction === "up" ? "text-tollerud-accent" : "text-tollerud-error"
+    ), children: stat.change.value })
+  ] });
+}
+function IncidentCardItem({ incident }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(
+    "flex items-start gap-3 rounded-lg border p-3",
+    incident.acknowledged ? "border-tollerud-border/10 bg-tollerud-noir-900/50 opacity-60" : "border-tollerud-border/20 bg-tollerud-surface"
+  ), children: [
+    /* @__PURE__ */ jsx(SeverityDot, { severity: incident.severity }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-tollerud-text-primary truncate", children: incident.title }),
+        incident.acknowledged && /* @__PURE__ */ jsx("span", { className: "text-xs text-tollerud-text-muted", children: "(acknowledged)" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-tollerud-text-muted mt-0.5", children: [
+        /* @__PURE__ */ jsx("span", { children: incident.service }),
+        /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { children: incident.timestamp })
+      ] }),
+      incident.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-tollerud-text-secondary mt-1", children: incident.description })
+    ] })
+  ] });
+}
+function StatusDotComp({ status }) {
+  return /* @__PURE__ */ jsx("span", { className: cn(
+    "inline-block w-2 h-2 rounded-full",
+    status === "online" && "bg-tollerud-accent shadow-[0_0_4px_var(--tollerud-accent)]",
+    status === "warning" && "bg-tollerud-warning",
+    status === "offline" && "bg-tollerud-error"
+  ) });
+}
+function SeverityDot({ severity }) {
+  return /* @__PURE__ */ jsx("span", { className: cn(
+    "inline-block w-2 h-2 rounded-full mt-1 shrink-0",
+    severity === "critical" && "bg-tollerud-error shadow-[0_0_4px_var(--tollerud-error)]",
+    severity === "high" && "bg-tollerud-warning",
+    severity === "medium" && "bg-tollerud-accent",
+    severity === "low" && "bg-tollerud-text-muted",
+    severity === "info" && "bg-tollerud-info"
+  ) });
+}
+function MetricBadge({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded bg-tollerud-noir-800 px-2 py-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-tollerud-text-muted", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "float-right text-tollerud-text-primary font-mono", children: value })
+  ] });
+}
+
+export { ActionDiff, ActionRow, Alert, AlertInbox, ApprovalCard, BackupStatusPanel, Badge, BentoDashboard, Button, Card, Checkbox, CodeBlock, CommandMenu, Container, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DockerStackCard, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyIcon, EmptyTitle, Footer, GlowCard, HostCard, IncidentCard, Input, Kbd, LogViewer, NoirGlowBackground, Progress, Radio, RadioGroup, RollbackPlan, Select, ServiceHealthCard, Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, StatCard, StatusDot, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Timeline, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map