@flanksource/clicky-ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2918 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Fragment, createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+//#region src/lib/palette.ts
+const AVATAR_PALETTE = [
+	"bg-rose-100 text-rose-700",
+	"bg-pink-100 text-pink-700",
+	"bg-fuchsia-100 text-fuchsia-700",
+	"bg-purple-100 text-purple-700",
+	"bg-violet-100 text-violet-700",
+	"bg-indigo-100 text-indigo-700",
+	"bg-blue-100 text-blue-700",
+	"bg-sky-100 text-sky-700",
+	"bg-cyan-100 text-cyan-700",
+	"bg-teal-100 text-teal-700",
+	"bg-emerald-100 text-emerald-700",
+	"bg-green-100 text-green-700",
+	"bg-lime-100 text-lime-800",
+	"bg-amber-100 text-amber-800",
+	"bg-orange-100 text-orange-700",
+	"bg-red-100 text-red-700"
+];
+function fnv1a32(s) {
+	let h = 2166136261;
+	for (let i = 0; i < s.length; i++) {
+		h ^= s.charCodeAt(i);
+		h = Math.imul(h, 16777619);
+	}
+	return h >>> 0;
+}
+function paletteClass(key) {
+	return AVATAR_PALETTE[fnv1a32(key) % AVATAR_PALETTE.length];
+}
+
+//#endregion
+//#region src/hooks/use-theme.tsx
+const STORAGE_KEY$1 = "clicky-ui-theme";
+const DATA_ATTR$1 = "data-theme";
+const ThemeContext = createContext(null);
+function prefersDark() {
+	if (typeof window === "undefined") return false;
+	return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function readStored$1() {
+	if (typeof window === "undefined") return "system";
+	const raw = window.localStorage.getItem(STORAGE_KEY$1);
+	return raw === "light" || raw === "dark" || raw === "system" ? raw : "system";
+}
+function resolve(theme) {
+	if (theme === "system") return prefersDark() ? "dark" : "light";
+	return theme;
+}
+function apply$1(resolved) {
+	if (typeof document === "undefined") return;
+	document.documentElement.setAttribute(DATA_ATTR$1, resolved);
+}
+function ThemeProvider({ children, defaultTheme = "system", storageKey = STORAGE_KEY$1 }) {
+	const [theme, setThemeState] = useState(() => {
+		if (typeof window === "undefined") return defaultTheme;
+		return readStored$1() ?? defaultTheme;
+	});
+	const [resolvedTheme, setResolvedTheme] = useState(() => resolve(theme));
+	useEffect(() => {
+		const next = resolve(theme);
+		setResolvedTheme(next);
+		apply$1(next);
+		if (typeof window !== "undefined") window.localStorage.setItem(storageKey, theme);
+	}, [theme, storageKey]);
+	useEffect(() => {
+		if (theme !== "system" || typeof window === "undefined") return;
+		const mq = window.matchMedia("(prefers-color-scheme: dark)");
+		const onChange = () => {
+			const next = mq.matches ? "dark" : "light";
+			setResolvedTheme(next);
+			apply$1(next);
+		};
+		mq.addEventListener("change", onChange);
+		return () => mq.removeEventListener("change", onChange);
+	}, [theme]);
+	const setTheme = useCallback((next) => setThemeState(next), []);
+	const value = useMemo(() => ({
+		theme,
+		resolvedTheme,
+		setTheme
+	}), [
+		theme,
+		resolvedTheme,
+		setTheme
+	]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children
+	});
+}
+function useTheme() {
+	const ctx = useContext(ThemeContext);
+	if (!ctx) throw new Error("useTheme must be used inside <ThemeProvider>");
+	return ctx;
+}
+
+//#endregion
+//#region src/hooks/use-density.tsx
+const STORAGE_KEY = "clicky-ui-density";
+const DATA_ATTR = "data-density";
+const DensityContext = createContext(null);
+function readStored() {
+	if (typeof window === "undefined") return null;
+	const raw = window.localStorage.getItem(STORAGE_KEY);
+	return raw === "compact" || raw === "comfortable" || raw === "spacious" ? raw : null;
+}
+function apply(density) {
+	if (typeof document === "undefined") return;
+	document.documentElement.setAttribute(DATA_ATTR, density);
+}
+function DensityProvider({ children, defaultDensity = "comfortable", storageKey = STORAGE_KEY }) {
+	const [density, setDensityState] = useState(() => {
+		if (typeof window === "undefined") return defaultDensity;
+		return readStored() ?? defaultDensity;
+	});
+	useEffect(() => {
+		apply(density);
+		if (typeof window !== "undefined") window.localStorage.setItem(storageKey, density);
+	}, [density, storageKey]);
+	const setDensity = useCallback((next) => setDensityState(next), []);
+	const value = useMemo(() => ({
+		density,
+		setDensity
+	}), [density, setDensity]);
+	return /* @__PURE__ */ jsx(DensityContext.Provider, {
+		value,
+		children
+	});
+}
+function useDensity() {
+	const ctx = useContext(DensityContext);
+	if (!ctx) throw new Error("useDensity must be used inside <DensityProvider>");
+	return ctx;
+}
+
+//#endregion
+//#region src/hooks/use-sort.ts
+function resolvePath(obj, path) {
+	return path.split(".").reduce((o, k) => {
+		if (o && typeof o === "object") return o[k];
+	}, obj);
+}
+function useSort(items, options = {}) {
+	const { defaultKey, defaultDir = "asc", resolvers } = options;
+	const [sort, setSort] = useState(defaultKey ? {
+		key: defaultKey,
+		dir: defaultDir
+	} : null);
+	function toggle(key) {
+		setSort((prev) => {
+			if (prev?.key === key) return prev.dir === "asc" ? {
+				key,
+				dir: "desc"
+			} : null;
+			return {
+				key,
+				dir: "asc"
+			};
+		});
+	}
+	return {
+		sorted: useMemo(() => {
+			if (!items) return [];
+			if (!sort) return items;
+			const { key, dir } = sort;
+			const resolver = resolvers?.[key];
+			const get = (item) => resolver ? resolver(item) : resolvePath(item, key);
+			return [...items].sort((a, b) => {
+				const av = get(a);
+				const bv = get(b);
+				if (av == null && bv == null) return 0;
+				if (av == null) return 1;
+				if (bv == null) return -1;
+				const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv));
+				return dir === "asc" ? cmp : -cmp;
+			});
+		}, [
+			items,
+			sort,
+			resolvers
+		]),
+		sort,
+		toggle
+	};
+}
+
+//#endregion
+//#region src/hooks/use-history-route.ts
+function useHistoryRoute(options) {
+	const { parse, build } = options;
+	const [route, setRoute] = useState(() => typeof window === "undefined" ? parse("/", "") : parse(window.location.pathname, window.location.search));
+	useEffect(() => {
+		const onPop = () => setRoute(parse(window.location.pathname, window.location.search));
+		window.addEventListener("popstate", onPop);
+		return () => window.removeEventListener("popstate", onPop);
+	}, [parse]);
+	return [route, useCallback((next) => {
+		setRoute((prev) => {
+			const merged = typeof next === "function" ? next(prev) : {
+				...prev,
+				...next
+			};
+			const path = build(merged);
+			if (typeof window !== "undefined") {
+				if (window.location.pathname + window.location.search !== path) window.history.pushState(null, "", path);
+			}
+			return merged;
+		});
+	}, [build])];
+}
+
+//#endregion
+//#region src/components/button.tsx
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-control-h px-control-px py-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			lg: "h-10 rounded-md px-8",
+			icon: "h-control-h w-control-h"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const Button = forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		ref,
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+});
+Button.displayName = "Button";
+
+//#endregion
+//#region src/data/Icon.tsx
+function Icon({ name, className, width, height, rotate, flip, inline, title }) {
+	return /* @__PURE__ */ jsx("iconify-icon", {
+		icon: name,
+		className: cn("shrink-0", className),
+		width,
+		height,
+		rotate,
+		flip,
+		inline,
+		title,
+		"aria-hidden": title ? void 0 : true
+	});
+}
+
+//#endregion
+//#region src/components/select.tsx
+const Select = forwardRef(({ className, options, placeholder, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative inline-flex w-full items-center",
+		children: [/* @__PURE__ */ jsxs("select", {
+			ref,
+			className: cn("h-control-h w-full appearance-none rounded-md border border-input bg-background px-control-px pr-8 text-sm text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", "disabled:cursor-not-allowed disabled:opacity-50", className),
+			...props,
+			children: [placeholder !== void 0 && /* @__PURE__ */ jsx("option", {
+				value: "",
+				disabled: true,
+				children: placeholder
+			}), options ? options.map((opt) => /* @__PURE__ */ jsx("option", {
+				value: opt.value,
+				disabled: opt.disabled,
+				children: opt.label
+			}, opt.value)) : children]
+		}), /* @__PURE__ */ jsx(Icon, {
+			name: "codicon:chevron-down",
+			className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground"
+		})]
+	});
+});
+Select.displayName = "Select";
+
+//#endregion
+//#region src/components/theme-switcher.tsx
+const THEMES = [
+	"light",
+	"dark",
+	"system"
+];
+const ThemeSwitcher = forwardRef(({ className, ...props }, ref) => {
+	const { theme, setTheme, resolvedTheme } = useTheme();
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "radiogroup",
+		"aria-label": "Theme",
+		className: cn("inline-flex items-center gap-density-1 rounded-md border border-input bg-background p-density-1", className),
+		...props,
+		children: [THEMES.map((t) => {
+			const active = theme === t;
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": active,
+				"data-active": active || void 0,
+				onClick: () => setTheme(t),
+				className: cn("inline-flex h-control-h items-center justify-center rounded-sm px-density-3 text-sm capitalize transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", active ? "bg-primary text-primary-foreground" : "text-foreground hover:bg-accent hover:text-accent-foreground"),
+				children: t
+			}, t);
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "ml-density-2 text-xs text-muted-foreground",
+			children: ["resolved: ", /* @__PURE__ */ jsx("span", {
+				"data-testid": "resolved-theme",
+				children: resolvedTheme
+			})]
+		})]
+	});
+});
+ThemeSwitcher.displayName = "ThemeSwitcher";
+
+//#endregion
+//#region src/components/density-switcher.tsx
+const DENSITIES = [
+	"compact",
+	"comfortable",
+	"spacious"
+];
+const DensitySwitcher = forwardRef(({ className, ...props }, ref) => {
+	const { density, setDensity } = useDensity();
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "radiogroup",
+		"aria-label": "Density",
+		className: cn("inline-flex items-center gap-density-1 rounded-md border border-input bg-background p-density-1", className),
+		...props,
+		children: DENSITIES.map((d) => {
+			const active = density === d;
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": active,
+				"data-active": active || void 0,
+				onClick: () => setDensity(d),
+				className: cn("inline-flex h-control-h items-center justify-center rounded-sm px-density-3 text-sm capitalize transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", active ? "bg-primary text-primary-foreground" : "text-foreground hover:bg-accent hover:text-accent-foreground"),
+				children: d
+			}, d);
+		})
+	});
+});
+DensitySwitcher.displayName = "DensitySwitcher";
+
+//#endregion
+//#region src/layout/SplitPane.tsx
+function SplitPane({ left, right, defaultSplit = 50, minLeft = 20, minRight = 20, leftClass, rightClass, className }) {
+	const [split, setSplit] = useState(defaultSplit);
+	const dragging = useRef(false);
+	const container = useRef(null);
+	const onMouseDown = useCallback((e) => {
+		e.preventDefault();
+		dragging.current = true;
+		const onMove = (ev) => {
+			if (!dragging.current || !container.current) return;
+			const rect = container.current.getBoundingClientRect();
+			const pct = (ev.clientX - rect.left) / rect.width * 100;
+			setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));
+		};
+		const onUp = () => {
+			dragging.current = false;
+			document.removeEventListener("mousemove", onMove);
+			document.removeEventListener("mouseup", onUp);
+			document.body.style.cursor = "";
+			document.body.style.userSelect = "";
+		};
+		document.addEventListener("mousemove", onMove);
+		document.addEventListener("mouseup", onUp);
+		document.body.style.cursor = "col-resize";
+		document.body.style.userSelect = "none";
+	}, [minLeft, minRight]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: container,
+		className: cn("flex flex-1 overflow-hidden min-h-0", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: { width: `${split}%` },
+				className: cn("overflow-y-auto bg-background min-h-0", leftClass),
+				children: left
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "separator",
+				"aria-orientation": "vertical",
+				className: "w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors",
+				onMouseDown
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: { width: `${100 - split}%` },
+				className: cn("overflow-hidden bg-background min-h-0", rightClass),
+				children: right
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/layout/Section.tsx
+const toneRing = {
+	default: "",
+	danger: "border-l-2 border-red-500",
+	warning: "border-l-2 border-yellow-500",
+	success: "border-l-2 border-green-500",
+	info: "border-l-2 border-blue-500"
+};
+function Section({ title, summary, defaultOpen = false, open: openProp, onToggle, icon, tone = "default", className, headerClassName, bodyClassName, children }) {
+	const isControlled = openProp !== void 0;
+	const [innerOpen, setInnerOpen] = useState(defaultOpen);
+	const open = isControlled ? openProp : innerOpen;
+	function toggle() {
+		const next = !open;
+		if (!isControlled) setInnerOpen(next);
+		onToggle?.(next);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("rounded-md border border-border bg-background", toneRing[tone], className),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: toggle,
+			"aria-expanded": open,
+			className: cn("w-full flex items-center gap-2 px-density-3 py-density-2 text-left", "hover:bg-accent/50 transition-colors", headerClassName),
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					name: open ? "codicon:chevron-down" : "codicon:chevron-right",
+					className: "text-muted-foreground text-xs"
+				}),
+				icon && /* @__PURE__ */ jsx(Icon, {
+					name: icon,
+					className: "text-base"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-sm flex-1 truncate",
+					children: title
+				}),
+				summary && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: summary
+				})
+			]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: cn("px-density-3 py-density-2 border-t border-border", bodyClassName),
+			children
+		})]
+	});
+}
+function DetailEmptyState({ icon, label, description, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("p-density-6 text-center text-muted-foreground", className),
+		children: [
+			icon && /* @__PURE__ */ jsx(Icon, {
+				name: icon,
+				className: "text-3xl mb-density-2"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm",
+				children: label
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-xs mt-density-1 opacity-70",
+				children: description
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/data/AnsiHtml.tsx
+const ANSI_COLORS = {
+	"30": "color:#1e1e1e",
+	"31": "color:#cd3131",
+	"32": "color:#0dbc79",
+	"33": "color:#e5e510",
+	"34": "color:#2472c8",
+	"35": "color:#bc3fbc",
+	"36": "color:#11a8cd",
+	"37": "color:#e5e5e5",
+	"90": "color:#666",
+	"91": "color:#f14c4c",
+	"92": "color:#23d18b",
+	"93": "color:#f5f543",
+	"94": "color:#3b8eea",
+	"95": "color:#d670d6",
+	"96": "color:#29b8db",
+	"97": "color:#fff",
+	"1": "font-weight:bold",
+	"2": "opacity:0.7",
+	"3": "font-style:italic",
+	"4": "text-decoration:underline"
+};
+function parseAnsi(raw) {
+	const spans = [];
+	const re = /\x1b\[([0-9;]*)m/g;
+	let last = 0;
+	let styles = [];
+	let match;
+	while ((match = re.exec(raw)) !== null) {
+		if (match.index > last) spans.push({
+			text: raw.slice(last, match.index),
+			style: styles.join(";")
+		});
+		const codes = (match[1] ?? "").split(";").filter(Boolean);
+		for (const code of codes) if (code === "0" || code === "") styles = [];
+		else {
+			const rule = ANSI_COLORS[code];
+			if (rule) styles.push(rule);
+		}
+		last = match.index + match[0].length;
+	}
+	if (last < raw.length) spans.push({
+		text: raw.slice(last),
+		style: styles.join(";")
+	});
+	return spans;
+}
+function spanToStyle(style) {
+	const out = {};
+	for (const rule of style.split(";")) {
+		const [k, v] = rule.split(":");
+		if (!k || !v) continue;
+		const key = k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+		out[key] = v;
+	}
+	return out;
+}
+function AnsiHtml({ text, className, as = "pre" }) {
+	const children = parseAnsi(text).map((s, i) => s.style ? /* @__PURE__ */ jsx("span", {
+		style: spanToStyle(s.style),
+		children: s.text
+	}, i) : /* @__PURE__ */ jsx("span", { children: s.text }, i));
+	if (as === "span") return /* @__PURE__ */ jsx("span", {
+		className,
+		children
+	});
+	return /* @__PURE__ */ jsx("pre", {
+		className,
+		children
+	});
+}
+
+//#endregion
+//#region src/data/Avatar.tsx
+function Avatar({ src, alt, size = 20, rounded = "full", title, href, colorKey, onError, className }) {
+	const shape = rounded === "full" ? "rounded-full" : "rounded";
+	const key = colorKey ?? alt;
+	const base = cn("inline-block shrink-0", shape);
+	const content = src ? /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		title: title ?? alt,
+		width: size,
+		height: size,
+		className: cn(base, "bg-muted", className),
+		loading: "lazy",
+		onError
+	}) : /* @__PURE__ */ jsx("span", {
+		className: cn(base, paletteClass(key), "inline-flex items-center justify-center font-semibold", className),
+		style: {
+			width: size,
+			height: size,
+			fontSize: Math.max(9, Math.floor(size * .5))
+		},
+		title: title ?? alt,
+		children: (alt.replace(/^@/, "").charAt(0) || "?").toUpperCase()
+	});
+	if (href) return /* @__PURE__ */ jsx("a", {
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: "inline-flex shrink-0",
+		onClick: (e) => e.stopPropagation(),
+		children: content
+	});
+	return content;
+}
+
+//#endregion
+//#region src/data/Badge.tsx
+const badgeVariants = cva("inline-flex items-center gap-1 rounded-full font-medium whitespace-nowrap", {
+	variants: {
+		tone: {
+			neutral: "",
+			success: "",
+			danger: "",
+			warning: "",
+			info: ""
+		},
+		variant: {
+			soft: "",
+			solid: "",
+			outline: "border bg-transparent"
+		},
+		size: {
+			sm: "text-[10px] px-1.5 py-0 h-4",
+			md: "text-xs px-2 py-0.5",
+			lg: "text-sm px-2.5 py-1"
+		}
+	},
+	compoundVariants: [
+		{
+			tone: "neutral",
+			variant: "soft",
+			class: "bg-muted text-foreground"
+		},
+		{
+			tone: "neutral",
+			variant: "solid",
+			class: "bg-foreground text-background"
+		},
+		{
+			tone: "neutral",
+			variant: "outline",
+			class: "border-border text-foreground"
+		},
+		{
+			tone: "success",
+			variant: "soft",
+			class: "bg-green-100 text-green-800 dark:bg-green-500/20 dark:text-green-300"
+		},
+		{
+			tone: "success",
+			variant: "solid",
+			class: "bg-green-500 text-white"
+		},
+		{
+			tone: "success",
+			variant: "outline",
+			class: "border-green-500 text-green-700 dark:text-green-400"
+		},
+		{
+			tone: "danger",
+			variant: "soft",
+			class: "bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-300"
+		},
+		{
+			tone: "danger",
+			variant: "solid",
+			class: "bg-red-500 text-white"
+		},
+		{
+			tone: "danger",
+			variant: "outline",
+			class: "border-red-500 text-red-700 dark:text-red-400"
+		},
+		{
+			tone: "warning",
+			variant: "soft",
+			class: "bg-yellow-100 text-yellow-800 dark:bg-yellow-500/20 dark:text-yellow-300"
+		},
+		{
+			tone: "warning",
+			variant: "solid",
+			class: "bg-yellow-400 text-yellow-950"
+		},
+		{
+			tone: "warning",
+			variant: "outline",
+			class: "border-yellow-500 text-yellow-700 dark:text-yellow-400"
+		},
+		{
+			tone: "info",
+			variant: "soft",
+			class: "bg-blue-100 text-blue-800 dark:bg-blue-500/20 dark:text-blue-300"
+		},
+		{
+			tone: "info",
+			variant: "solid",
+			class: "bg-blue-500 text-white"
+		},
+		{
+			tone: "info",
+			variant: "outline",
+			class: "border-blue-500 text-blue-700 dark:text-blue-400"
+		}
+	],
+	defaultVariants: {
+		tone: "neutral",
+		variant: "soft",
+		size: "md"
+	}
+});
+function Badge({ tone, variant, size, icon, count, children, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn(badgeVariants({
+			tone,
+			variant,
+			size
+		}), className),
+		children: [
+			icon && /* @__PURE__ */ jsx(Icon, {
+				name: icon,
+				className: "text-[1em]"
+			}),
+			count !== void 0 && /* @__PURE__ */ jsx("span", { children: count }),
+			children
+		]
+	});
+}
+
+//#endregion
+//#region src/data/SortableHeader.tsx
+function SortableHeader({ active, dir, onClick, align = "left", className, children }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick,
+		className: cn("inline-flex items-center gap-1 cursor-pointer select-none hover:text-foreground", active ? "text-primary" : "text-muted-foreground", align === "right" ? "justify-end" : align === "center" ? "justify-center" : "justify-start", className),
+		children: [children, active ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: dir === "asc" ? "↑" : "↓"
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "opacity-40",
+			children: "↕"
+		})]
+	});
+}
+
+//#endregion
+//#region src/data/TreeNode.tsx
+function TreeNode({ node, depth = 0, expandAll = null, selected = null, defaultOpen, getChildren, getKey, onSelect, renderRow, rowClass, indentPx = 16, basePaddingPx = 8 }) {
+	const children = getChildren(node);
+	const hasChildren = (children?.length ?? 0) > 0;
+	const [open, setOpen] = useState(defaultOpen ? defaultOpen(node, depth) : depth < 1);
+	const prevExpandAll = useRef(expandAll);
+	const isSelected = selected === node;
+	useEffect(() => {
+		if (expandAll !== null && expandAll !== prevExpandAll.current) setOpen(expandAll);
+		prevExpandAll.current = expandAll;
+	}, [expandAll]);
+	function toggle() {
+		if (hasChildren) setOpen((o) => !o);
+	}
+	const rowClassName = rowClass ? rowClass(node, isSelected) : isSelected ? "bg-primary/10 border-l-2 border-primary" : "hover:bg-accent";
+	return /* @__PURE__ */ jsxs("div", {
+		role: "treeitem",
+		"aria-expanded": hasChildren ? open : void 0,
+		"aria-selected": isSelected,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-1.5 py-1 px-2 cursor-pointer text-sm", rowClassName),
+			style: { paddingLeft: `${depth * indentPx + basePaddingPx}px` },
+			onClick: (e) => {
+				e.stopPropagation();
+				onSelect?.(node);
+				toggle();
+			},
+			children: [hasChildren ? /* @__PURE__ */ jsx(Icon, {
+				name: open ? "codicon:chevron-down" : "codicon:chevron-right",
+				className: "text-muted-foreground text-xs w-3"
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "w-3 shrink-0",
+				"aria-hidden": true
+			}), renderRow({
+				node,
+				depth,
+				open,
+				selected: isSelected,
+				hasChildren,
+				toggle
+			})]
+		}), open && hasChildren && /* @__PURE__ */ jsx("div", {
+			role: "group",
+			children: children.map((child) => /* @__PURE__ */ jsx(TreeNode, {
+				node: child,
+				depth: depth + 1,
+				expandAll,
+				selected,
+				defaultOpen,
+				getChildren,
+				getKey,
+				onSelect,
+				renderRow,
+				rowClass,
+				indentPx,
+				basePaddingPx
+			}, getKey(child)))
+		})]
+	});
+}
+
+//#endregion
+//#region src/data/Tree.tsx
+function Tree({ roots, empty, className, showControls = true, expandAll: controlledExpandAll, onExpandAllChange, toolbarClassName, ...nodeProps }) {
+	const [internalExpandAll, setInternalExpandAll] = useState(null);
+	const isControlled = onExpandAllChange !== void 0;
+	const expandAll = isControlled ? controlledExpandAll ?? null : internalExpandAll;
+	const setExpandAll = (next) => {
+		if (isControlled) onExpandAllChange?.(next);
+		else setInternalExpandAll(next);
+	};
+	if (roots.length === 0) return /* @__PURE__ */ jsx(Fragment$1, { children: empty ?? null });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col min-h-0", className),
+		children: [showControls && /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-1 border-b border-border px-2 py-1 text-xs text-muted-foreground", toolbarClassName),
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => setExpandAll(true),
+				"aria-pressed": expandAll === true,
+				className: cn("inline-flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-accent hover:text-accent-foreground", expandAll === true && "bg-accent text-accent-foreground"),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "codicon:expand-all",
+					className: "text-xs"
+				}), "Expand all"]
+			}), /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => setExpandAll(false),
+				"aria-pressed": expandAll === false,
+				className: cn("inline-flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-accent hover:text-accent-foreground", expandAll === false && "bg-accent text-accent-foreground"),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "codicon:collapse-all",
+					className: "text-xs"
+				}), "Collapse all"]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			role: "tree",
+			className: "min-h-0 flex-1 overflow-auto",
+			children: roots.map((root) => /* @__PURE__ */ jsx(TreeNode, {
+				node: root,
+				expandAll,
+				...nodeProps
+			}, nodeProps.getKey(root)))
+		})]
+	});
+}
+
+//#endregion
+//#region src/data/Clicky.tsx
+function Clicky({ data, className }) {
+	const parsed = parseClickyData(data);
+	if (!parsed.ok) return /* @__PURE__ */ jsxs("div", {
+		className: cn("rounded-md border border-destructive/30 bg-destructive/5 p-density-3", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-sm font-medium text-destructive",
+			children: "Invalid Clicky payload"
+		}), /* @__PURE__ */ jsxs("pre", {
+			className: "mt-2 whitespace-pre-wrap break-all text-xs text-muted-foreground",
+			children: [parsed.message, parsed.raw ? `\n\n${parsed.raw}` : ""]
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: parsed.document.node })
+	});
+}
+function parseClickyData(data) {
+	if (typeof data === "string") try {
+		return normalizeClickyDocument(JSON.parse(data));
+	} catch (error) {
+		return {
+			ok: false,
+			message: error instanceof Error ? error.message : "Failed to parse JSON",
+			raw: data
+		};
+	}
+	return normalizeClickyDocument(data);
+}
+function normalizeClickyDocument(data) {
+	if (!data || typeof data !== "object") return {
+		ok: false,
+		message: "Payload must be an object",
+		raw: String(data ?? "")
+	};
+	const candidate = data;
+	if ("version" in candidate && candidate.version === 1 && candidate.node && isClickyNode(candidate.node)) return {
+		ok: true,
+		document: candidate
+	};
+	if (isClickyNode(candidate)) return {
+		ok: true,
+		document: {
+			version: 1,
+			node: candidate
+		}
+	};
+	return {
+		ok: false,
+		message: "Payload is neither a Clicky document nor a Clicky node",
+		raw: JSON.stringify(data, null, 2)
+	};
+}
+function isClickyNode(value) {
+	return !!value && typeof value === "object" && typeof value.kind === "string";
+}
+function ClickyNodeRenderer({ node }) {
+	if (!node) return null;
+	switch (node.kind) {
+		case "text": return /* @__PURE__ */ jsx(ClickyText, { node });
+		case "icon": return /* @__PURE__ */ jsx(ClickyIconNode, { node });
+		case "list": return /* @__PURE__ */ jsx(ClickyList, { node });
+		case "map": return /* @__PURE__ */ jsx(ClickyMap, { node });
+		case "table": return /* @__PURE__ */ jsx(ClickyTable, { node });
+		case "tree": return /* @__PURE__ */ jsx(ClickyTreeNode, { node });
+		case "code": return /* @__PURE__ */ jsx(ClickyCodeBlock, { node });
+		case "collapsed": return /* @__PURE__ */ jsx(ClickyCollapsed, { node });
+		case "button": return /* @__PURE__ */ jsx(ClickyButtonNode, { node });
+		case "button-group": return /* @__PURE__ */ jsx(ClickyButtonGroup, { node });
+		case "html": return /* @__PURE__ */ jsx(ClickyHtmlNode, { node });
+		case "comment": return null;
+		default: return /* @__PURE__ */ jsx("pre", {
+			className: "rounded-md border border-border bg-muted p-density-3 text-xs",
+			children: JSON.stringify(node, null, 2)
+		});
+	}
+}
+function ClickyText({ node }) {
+	const inlineStyle = toInlineStyle(node.style, node.text ?? node.plain);
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [node.text, node.children?.map((child, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: child }) }, index))] });
+	if (!node.style && !node.tooltip) return /* @__PURE__ */ jsx(Fragment$1, { children: content });
+	return /* @__PURE__ */ jsx("span", {
+		style: inlineStyle,
+		title: node.tooltip?.plain,
+		className: cn(node.style?.className, (node.text ?? "").includes("\n") && "whitespace-pre-wrap"),
+		children: content
+	});
+}
+function ClickyIconNode({ node }) {
+	return /* @__PURE__ */ jsx("span", {
+		style: toInlineStyle(node.style, node.plain ?? node.unicode),
+		title: node.tooltip?.plain,
+		className: "inline-flex items-center",
+		children: node.iconify ? /* @__PURE__ */ jsx(Icon, { name: node.iconify }) : /* @__PURE__ */ jsx("span", { children: node.unicode ?? node.plain })
+	});
+}
+function ClickyList({ node }) {
+	const items = node.items ?? [];
+	if (items.length === 0) return null;
+	if (node.inline) return /* @__PURE__ */ jsx("span", {
+		className: "inline-flex flex-wrap items-start gap-1",
+		children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: ","
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1",
+			children: [
+				!node.ordered && node.bullet && /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: node.bullet }),
+				node.ordered && /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [index + 1, "."]
+				}),
+				/* @__PURE__ */ jsx(ClickyNodeRenderer, { node: item })
+			]
+		})] }, index))
+	});
+	if (node.unstyled) return /* @__PURE__ */ jsx("div", {
+		className: "space-y-1",
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-2",
+			children: [
+				!node.ordered && node.bullet && /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: node.bullet }),
+				node.ordered && /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [index + 1, "."]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: item })
+				})
+			]
+		}, index))
+	});
+	return /* @__PURE__ */ jsx(node.ordered ? "ol" : "ul", {
+		className: cn("ml-5 space-y-1 text-sm", node.ordered ? "list-decimal" : "list-disc"),
+		children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: item }) }, index))
+	});
+}
+function ClickyMap({ node }) {
+	const fields = node.fields ?? [];
+	if (fields.length === 0) return null;
+	const inlineFields = fields.filter((field) => isInlineNode(field.value));
+	const blockFields = fields.filter((field) => !isInlineNode(field.value));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-density-4",
+		children: [inlineFields.length > 0 && /* @__PURE__ */ jsx("dl", {
+			className: "grid gap-density-3 md:grid-cols-2",
+			children: inlineFields.map((field) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+				className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+				children: field.label || prettifyName(field.name)
+			}), /* @__PURE__ */ jsx("dd", {
+				className: "mt-1 text-sm text-foreground",
+				children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: field.value })
+			})] }, field.name))
+		}), blockFields.map((field) => /* @__PURE__ */ jsxs("section", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+				children: field.label || prettifyName(field.name)
+			}), /* @__PURE__ */ jsx("div", {
+				className: "rounded-md border border-border bg-background p-density-3",
+				children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: field.value })
+			})]
+		}, field.name))]
+	});
+}
+function ClickyTable({ node }) {
+	const columns = node.columns ?? [];
+	const rows = node.rows ?? [];
+	const hasDetail = rows.some((row) => !!row.detail);
+	const [sortKey, setSortKey] = useState(columns[0]?.name ?? "");
+	const [sortDir, setSortDir] = useState("asc");
+	if (columns.length === 0 || rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "text-sm text-muted-foreground",
+		children: "No data"
+	});
+	const sortedRows = [...rows].sort((left, right) => {
+		if (!sortKey) return 0;
+		const leftValue = left.cells[sortKey]?.plain ?? left.cells[sortKey]?.text ?? "";
+		const rightValue = right.cells[sortKey]?.plain ?? right.cells[sortKey]?.text ?? "";
+		return sortDir === "asc" ? compareClickyValues(leftValue, rightValue) : compareClickyValues(rightValue, leftValue);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "overflow-auto rounded-md border border-border",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full text-left text-sm table-fixed",
+			children: [/* @__PURE__ */ jsx("thead", {
+				className: "sticky top-0 bg-muted/50",
+				children: /* @__PURE__ */ jsxs("tr", {
+					className: "border-b border-border text-xs text-muted-foreground",
+					children: [hasDetail && /* @__PURE__ */ jsx("th", { className: "w-8 px-2 py-2" }), columns.map((column) => /* @__PURE__ */ jsx("th", {
+						className: "px-2 py-2 font-medium",
+						children: /* @__PURE__ */ jsx(SortableHeader, {
+							active: sortKey === column.name,
+							dir: sortKey === column.name ? sortDir : void 0,
+							align: column.align ?? "left",
+							onClick: () => {
+								if (sortKey === column.name) setSortDir((current) => current === "asc" ? "desc" : "asc");
+								else {
+									setSortKey(column.name);
+									setSortDir("asc");
+								}
+							},
+							children: column.header ? /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: column.header }) : column.label || prettifyName(column.name)
+						})
+					}, column.name))]
+				})
+			}), /* @__PURE__ */ jsx("tbody", { children: sortedRows.map((row, index) => /* @__PURE__ */ jsx(ClickyTableRow, {
+				row,
+				columns,
+				hasDetail
+			}, `${index}-${row.cells[columns[0]?.name ?? ""]?.plain ?? ""}`)) })]
+		})
+	});
+}
+function ClickyTableRow({ row, columns, hasDetail }) {
+	const [open, setOpen] = useState(false);
+	const expandable = !!row.detail;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("tr", {
+		className: cn("border-b border-border align-top", expandable && "cursor-pointer hover:bg-accent/50"),
+		onClick: expandable ? () => setOpen((current) => !current) : void 0,
+		children: [hasDetail && /* @__PURE__ */ jsx("td", {
+			className: "px-2 py-2 text-center text-muted-foreground",
+			children: expandable ? open ? "▼" : "▶" : ""
+		}), columns.map((column) => /* @__PURE__ */ jsx("td", {
+			className: cn("px-2 py-2", alignmentClass(column.align)),
+			children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: row.cells[column.name] })
+		}, column.name))]
+	}), open && row.detail && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+		colSpan: columns.length + (hasDetail ? 1 : 0),
+		className: "bg-muted/40 p-density-3",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "rounded-md border border-border bg-background p-density-3",
+			children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: row.detail })
+		})
+	}) })] });
+}
+function ClickyTreeNode({ node }) {
+	const roots = node.roots ?? [];
+	if (roots.length === 0) return null;
+	return /* @__PURE__ */ jsx(Tree, {
+		roots,
+		getChildren: (item) => item.children,
+		getKey: (item) => item.id,
+		defaultOpen: (_, depth) => depth < 1,
+		renderRow: ({ node: item }) => /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1 truncate",
+			children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: item.label })
+		})
+	});
+}
+function ClickyCodeBlock({ node }) {
+	const html = node.highlightedHtml ? sanitizeHtml(node.highlightedHtml) : "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "overflow-hidden rounded-md border border-border bg-muted/40",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "border-b border-border px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground",
+			children: node.language || "text"
+		}), html ? /* @__PURE__ */ jsx("div", {
+			className: "overflow-auto p-3 text-xs font-mono [&_.chroma]:bg-transparent [&_pre]:m-0 [&_pre]:whitespace-pre-wrap [&_pre]:bg-transparent",
+			dangerouslySetInnerHTML: { __html: html }
+		}) : /* @__PURE__ */ jsx("pre", {
+			className: "overflow-auto whitespace-pre-wrap break-words p-3 text-xs font-mono text-foreground",
+			children: node.source ?? node.plain
+		})]
+	});
+}
+function ClickyCollapsed({ node }) {
+	return /* @__PURE__ */ jsxs("details", {
+		className: "rounded-md border border-border bg-background",
+		children: [/* @__PURE__ */ jsx("summary", {
+			className: "cursor-pointer px-3 py-2 text-sm font-medium text-foreground",
+			children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: node.label })
+		}), node.content && /* @__PURE__ */ jsx("div", {
+			className: "border-t border-border px-3 py-3",
+			children: /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: node.content })
+		})]
+	});
+}
+function ClickyButtonNode({ node }) {
+	const title = [node.id, node.payload].filter(Boolean).join("\n") || void 0;
+	const content = node.label ? /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: node.label }) : node.text;
+	if (node.href) return /* @__PURE__ */ jsx("a", {
+		href: node.href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		title,
+		className: "inline-flex items-center rounded-md border border-border bg-background px-3 py-1.5 text-sm font-medium text-foreground hover:bg-accent",
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title,
+		className: "inline-flex items-center rounded-md border border-border bg-muted px-3 py-1.5 text-sm font-medium text-foreground",
+		children: content
+	});
+}
+function ClickyButtonGroup({ node }) {
+	const items = node.items ?? [];
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap gap-2",
+		children: items.map((item, index) => /* @__PURE__ */ jsx(ClickyNodeRenderer, { node: item }, index))
+	});
+}
+function ClickyHtmlNode({ node }) {
+	const sanitized = sanitizeHtml(node.html ?? "");
+	if (!sanitized) return null;
+	return /* @__PURE__ */ jsx(isBlockHtml(sanitized) ? "div" : "span", { dangerouslySetInnerHTML: { __html: sanitized } });
+}
+function toInlineStyle(style, text) {
+	if (!style) return text?.includes("\n") ? { whiteSpace: "pre-wrap" } : void 0;
+	const inlineStyle = {};
+	if (style.color) inlineStyle.color = style.color;
+	if (style.backgroundColor) inlineStyle.backgroundColor = style.backgroundColor;
+	if (style.bold) inlineStyle.fontWeight = 700;
+	if (style.faint) inlineStyle.opacity = .7;
+	if (style.italic) inlineStyle.fontStyle = "italic";
+	const decorations = [];
+	if (style.underline) decorations.push("underline");
+	if (style.strikethrough) decorations.push("line-through");
+	if (decorations.length > 0) inlineStyle.textDecoration = decorations.join(" ");
+	if (style.textTransform === "uppercase" || style.textTransform === "lowercase" || style.textTransform === "capitalize") inlineStyle.textTransform = style.textTransform;
+	if (style.maxWidth && style.maxWidth > 0) inlineStyle.maxWidth = `${style.maxWidth}ch`;
+	if (style.maxLines && style.maxLines > 0) {
+		inlineStyle.display = "-webkit-box";
+		inlineStyle.overflow = "hidden";
+		inlineStyle.WebkitLineClamp = style.maxLines;
+		inlineStyle.WebkitBoxOrient = "vertical";
+		inlineStyle.whiteSpace = "pre-wrap";
+	}
+	if (style.truncateMode === "suffix" && style.maxWidth && (!style.maxLines || style.maxLines <= 1)) {
+		inlineStyle.overflow = "hidden";
+		inlineStyle.textOverflow = "ellipsis";
+		inlineStyle.whiteSpace = "nowrap";
+		inlineStyle.display = "inline-block";
+		inlineStyle.verticalAlign = "bottom";
+	}
+	if (style.monospace) inlineStyle.fontFamily = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+	if (!inlineStyle.whiteSpace && text?.includes("\n")) inlineStyle.whiteSpace = "pre-wrap";
+	return Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0;
+}
+function sanitizeHtml(raw) {
+	if (!raw) return "";
+	if (typeof DOMParser === "undefined") return raw.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "").replace(/\son\w+="[^"]*"/gi, "").replace(/\son\w+='[^']*'/gi, "");
+	const doc = new DOMParser().parseFromString(raw, "text/html");
+	doc.querySelectorAll("script,iframe,object,embed,form").forEach((element) => element.remove());
+	doc.querySelectorAll("*").forEach((element) => {
+		Array.from(element.attributes).forEach((attribute) => {
+			const name = attribute.name.toLowerCase();
+			const value = attribute.value.trim().toLowerCase();
+			if (name.startsWith("on") || name === "srcdoc") element.removeAttribute(attribute.name);
+			if ((name === "href" || name === "src") && value.startsWith("javascript:")) element.removeAttribute(attribute.name);
+		});
+	});
+	return doc.body.innerHTML;
+}
+function prettifyName(name) {
+	return name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/_/g, " ").replace(/\b\w/g, (value) => value.toUpperCase());
+}
+function compareClickyValues(left, right) {
+	const leftNumber = Number(left);
+	const rightNumber = Number(right);
+	if (!Number.isNaN(leftNumber) && !Number.isNaN(rightNumber)) return leftNumber - rightNumber;
+	return left.localeCompare(right, void 0, {
+		numeric: true,
+		sensitivity: "base"
+	});
+}
+function isInlineNode(node) {
+	return node.kind === "text" || node.kind === "icon" || node.kind === "html" || node.kind === "button" || node.kind === "button-group";
+}
+function alignmentClass(align) {
+	if (align === "right") return "text-right";
+	if (align === "center") return "text-center";
+}
+function isBlockHtml(html) {
+	return /<(div|p|pre|table|ul|ol|li|details|blockquote|h[1-6])/i.test(html);
+}
+
+//#endregion
+//#region src/data/FilterPill.tsx
+function bodyClasses(mode) {
+	switch (mode) {
+		case "active": return "bg-primary/10 border-primary/40 text-primary font-medium";
+		case "include": return "bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium";
+		case "exclude": return "bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium";
+		default: return "border-border text-muted-foreground hover:bg-accent";
+	}
+}
+const SLOT_TRANSLATE = {
+	exclude: "-translate-x-[21px]",
+	neutral: "translate-x-0",
+	include: "translate-x-[21px]"
+};
+function TristateSwitch({ mode, onChange, ariaLabel }) {
+	const slot = mode === "exclude" ? "exclude" : mode === "include" ? "include" : "neutral";
+	const bg = slot === "exclude" ? "bg-red-500" : slot === "include" ? "bg-green-500" : "bg-muted";
+	const fg = slot === "neutral" ? "text-muted-foreground" : "text-white";
+	const onSlot = (target) => {
+		if (target === "neutral") {
+			onChange("neutral");
+			return;
+		}
+		onChange(slot === target ? "neutral" : target);
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		role: "radiogroup",
+		"aria-label": ariaLabel,
+		className: cn("relative inline-flex items-center justify-center w-[66px] h-6 rounded-full overflow-hidden transition-colors duration-200 shrink-0", bg),
+		children: [[
+			"exclude",
+			"neutral",
+			"include"
+		].map((target) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": slot === target,
+			title: target === "exclude" ? "Exclude" : target === "include" ? "Include" : "Do not filter",
+			onClick: (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				onSlot(target);
+			},
+			className: cn("relative z-10 flex h-full flex-1 items-center justify-center transition-colors duration-100", fg),
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: target === "exclude" ? "codicon:close" : target === "include" ? "codicon:check" : "codicon:primitive-dot",
+				className: "text-sm"
+			})
+		}, target)), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn("pointer-events-none absolute w-5 h-5 rounded-full bg-white shadow-md transition-transform duration-150", SLOT_TRANSLATE[slot])
+		})]
+	});
+}
+function FilterPill({ mode = "neutral", label, count, icon, badge, onModeChange, onClick, title, className }) {
+	const triState = !!onModeChange;
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		count !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: cn("inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white", badge ?? "bg-muted-foreground"),
+			children: count
+		}),
+		icon && /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			className: "text-sm"
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: label
+		})
+	] });
+	if (triState) {
+		const labelTone = mode === "include" ? "text-green-700 dark:text-green-400" : mode === "exclude" ? "text-red-700 dark:text-red-400" : "text-foreground";
+		return /* @__PURE__ */ jsxs("span", {
+			className: cn("inline-flex items-center gap-2 select-none", className),
+			title,
+			children: [/* @__PURE__ */ jsx(TristateSwitch, {
+				mode,
+				onChange: onModeChange,
+				ariaLabel: title
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn("inline-flex items-center gap-1.5 text-xs", labelTone),
+				children: content
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick,
+		title,
+		className: cn("inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors", bodyClasses(mode), className),
+		children: [/* @__PURE__ */ jsx(LegacyMarker, { mode }), content]
+	});
+}
+function LegacyMarker({ mode }) {
+	if (mode === "include") return /* @__PURE__ */ jsx(Icon, {
+		name: "codicon:add",
+		className: "text-xs"
+	});
+	if (mode === "exclude") return /* @__PURE__ */ jsx(Icon, {
+		name: "codicon:remove",
+		className: "text-xs"
+	});
+	if (mode === "active") return /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-current" });
+	return /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-current opacity-30" });
+}
+function FilterPillGroup({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-1.5 flex-wrap", className),
+		children
+	});
+}
+function FilterSeparator() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "text-border mx-0.5",
+		children: "|"
+	});
+}
+
+//#endregion
+//#region src/data/Gauge.tsx
+const toneClass = {
+	neutral: "text-foreground",
+	success: "text-green-600 dark:text-green-400",
+	warning: "text-yellow-600 dark:text-yellow-400",
+	danger: "text-red-600 dark:text-red-400",
+	info: "text-blue-600 dark:text-blue-400"
+};
+function Gauge({ label, value, max = 100, tone = "neutral", suffix = "%", className }) {
+	const pct = max > 0 ? Math.round(value / max * 100) : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-start gap-0.5 rounded-md border border-border bg-background px-density-3 py-density-2", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[10px] uppercase tracking-wide text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsxs("span", {
+			className: cn("text-lg font-semibold tabular-nums", toneClass[tone]),
+			children: [max === 100 ? value : pct, /* @__PURE__ */ jsx("span", {
+				className: "text-xs ml-0.5 opacity-60",
+				children: suffix
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/data/JsonView.tsx
+function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }) {
+	const [open, setOpen] = useState(depth < defaultOpenDepth);
+	if (data === null || data === void 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground italic",
+		children: "null"
+	});
+	if (typeof data === "string") return /* @__PURE__ */ jsxs("span", {
+		className: "text-green-700 dark:text-green-400",
+		children: [
+			"\"",
+			data,
+			"\""
+		]
+	});
+	if (typeof data === "number" || typeof data === "boolean") return /* @__PURE__ */ jsx("span", {
+		className: "text-blue-700 dark:text-blue-400",
+		children: String(data)
+	});
+	if (typeof data !== "object") return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: String(data)
+	});
+	const isArray = Array.isArray(data);
+	const entries = isArray ? data.map((v, i) => [i, v]) : Object.entries(data);
+	const [openB, closeB] = isArray ? ["[", "]"] : ["{", "}"];
+	if (entries.length === 0) return /* @__PURE__ */ jsxs("span", {
+		className: "text-muted-foreground",
+		children: [openB, closeB]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "text-sm font-mono",
+		style: { paddingLeft: depth > 0 ? "12px" : "0" },
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "cursor-pointer hover:bg-accent rounded px-0.5 select-none",
+			onClick: () => setOpen(!open),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs mr-1",
+					children: open ? "▼" : "▶"
+				}),
+				name && /* @__PURE__ */ jsx("span", {
+					className: "text-purple-600 dark:text-purple-400",
+					children: name
+				}),
+				name && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ": "
+				}),
+				!open && /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [
+						openB,
+						" ",
+						entries.length,
+						" ",
+						isArray ? "items" : "keys",
+						" ",
+						closeB
+					]
+				}),
+				open && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: openB
+				})
+			]
+		}), open && /* @__PURE__ */ jsxs(Fragment$1, { children: [entries.map(([key, val]) => /* @__PURE__ */ jsx("div", {
+			className: "pl-3 border-l border-border ml-1",
+			children: typeof val === "object" && val !== null ? /* @__PURE__ */ jsx(JsonView, {
+				data: val,
+				name: String(key),
+				depth: depth + 1,
+				defaultOpenDepth
+			}) : /* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-purple-600 dark:text-purple-400",
+					children: isArray ? "" : String(key)
+				}),
+				!isArray && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ": "
+				}),
+				/* @__PURE__ */ jsx(JsonView, {
+					data: val,
+					depth: depth + 1,
+					defaultOpenDepth
+				})
+			] })
+		}, key)), /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: closeB
+		})] })]
+	});
+}
+
+//#endregion
+//#region src/data/LogViewer.tsx
+function LogViewer({ logs, collapsedLines = 5, maxExpandedVh = 70, bgClass = "bg-muted", borderClass = "border-border", className }) {
+	const [expanded, setExpanded] = useState(false);
+	const lines = useMemo(() => logs.split("\n"), [logs]);
+	const hasMore = lines.length > collapsedLines;
+	const maxHeight = expanded ? `${maxExpandedVh}vh` : `${collapsedLines * 1.4}em`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [/* @__PURE__ */ jsx("pre", {
+			className: cn("mt-0.5 text-[11px] text-muted-foreground rounded p-1.5 whitespace-pre-wrap overflow-y-auto border transition-all duration-200", bgClass, borderClass),
+			style: { maxHeight },
+			children: expanded ? logs : lines.slice(0, collapsedLines).join("\n")
+		}), hasMore && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: cn("text-[10px] mt-0.5", expanded ? "text-muted-foreground" : "text-primary hover:opacity-80"),
+			onClick: () => setExpanded((e) => !e),
+			children: expanded ? `▲ Collapse (${lines.length} lines)` : `▼ Show more (${lines.length} lines)`
+		})]
+	});
+}
+
+//#endregion
+//#region src/data/Markdown.tsx
+let loadPromise = null;
+function loadMarked() {
+	if (loadPromise) return loadPromise;
+	loadPromise = import("marked").then(({ Marked, Renderer }) => {
+		const renderer = new Renderer();
+		renderer.code = ({ text, lang }) => `<pre class="bg-muted rounded p-2 text-xs overflow-x-auto border border-border my-1.5"><code${lang ? ` class="language-${lang}"` : ""}>${text}</code></pre>`;
+		renderer.codespan = ({ text }) => `<code class="bg-muted rounded px-1 text-xs">${text}</code>`;
+		renderer.heading = ({ text, depth }) => {
+			return `<h${depth} class="${depth <= 1 ? "font-bold text-base mt-2 mb-1" : depth === 2 ? "font-semibold text-sm mt-2 mb-1" : "font-semibold text-sm mt-2 mb-1"}">${text}</h${depth}>`;
+		};
+		renderer.link = ({ href, text }) => `<a href="${href}" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">${text}</a>`;
+		renderer.blockquote = ({ text }) => `<blockquote class="border-l-2 border-border pl-2 text-muted-foreground italic my-1">${text}</blockquote>`;
+		renderer.tablerow = ({ text }) => `<tr class="border-b border-border">${text}</tr>`;
+		renderer.list = function(token) {
+			const tag = token.ordered ? "ol" : "ul";
+			return `<${tag} class="${token.ordered ? "list-decimal ml-4 my-1" : "list-disc ml-4 my-1"}">${token.items.map((item) => this.listitem(item)).join("")}</${tag}>`;
+		};
+		renderer.listitem = ({ text }) => `<li class="my-0.5">${text}</li>`;
+		renderer.image = ({ href, text }) => `<img src="${href}" alt="${text}" class="max-w-full rounded my-1" />`;
+		renderer.hr = () => "<hr class=\"border-border my-2\" />";
+		renderer.paragraph = ({ text }) => `<p class="mt-1.5">${text}</p>`;
+		return new Marked({
+			renderer,
+			gfm: true,
+			breaks: true
+		});
+	});
+	return loadPromise;
+}
+function Markdown({ text, className }) {
+	const [html, setHtml] = useState(null);
+	useEffect(() => {
+		let cancelled = false;
+		loadMarked().then((m) => Promise.resolve(m.parse(text))).then((out) => {
+			if (!cancelled) setHtml(out);
+		}).catch(() => {
+			if (!cancelled) setHtml(text);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [text]);
+	if (html === null) return /* @__PURE__ */ jsx("pre", {
+		className: cn("text-sm whitespace-pre-wrap", className),
+		children: text
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("prose prose-sm max-w-none dark:prose-invert", className),
+		dangerouslySetInnerHTML: { __html: html }
+	});
+}
+
+//#endregion
+//#region src/data/ProgressBar.tsx
+function ProgressBar({ segments, total, height = "h-2", className }) {
+	if (total === 0) return null;
+	const tooltip = segments.filter((s) => s.count > 0).map((s) => `${s.count} ${s.label}`).join(", ");
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full bg-muted rounded-full flex overflow-hidden", height, className),
+		title: tooltip,
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": total,
+		"aria-valuenow": segments.reduce((acc, s) => acc + s.count, 0),
+		children: segments.map((seg, i) => {
+			if (seg.count === 0) return null;
+			const pct = seg.count / total * 100;
+			return /* @__PURE__ */ jsx("div", {
+				className: cn(seg.color, height, "transition-all duration-300"),
+				style: { width: `${pct}%` },
+				title: `${seg.count} ${seg.label}`
+			}, i);
+		})
+	});
+}
+
+//#endregion
+//#region src/data/TabButton.tsx
+function TabButton({ active, onClick, label, icon, count, countColor = "bg-muted-foreground", className }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "tab",
+		"aria-selected": active,
+		onClick,
+		className: cn("inline-flex items-center gap-1.5 px-density-3 py-density-1.5 text-sm rounded-md transition-colors", active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground", className),
+		children: [
+			icon && /* @__PURE__ */ jsx(Icon, { name: icon }),
+			/* @__PURE__ */ jsx("span", { children: label }),
+			count !== void 0 && count > 0 && /* @__PURE__ */ jsx("span", {
+				className: cn("inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold text-white", countColor),
+				children: count
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/data/TreeGroupHeader.tsx
+function TreeGroupHeader({ title, open, onToggle, icon, count, className }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onToggle,
+		"aria-expanded": open,
+		className: cn("w-full flex items-center gap-2 px-3 py-2 border-b border-border select-none", "hover:bg-accent transition-colors text-left", className),
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				name: open ? "codicon:chevron-down" : "codicon:chevron-right",
+				className: "text-muted-foreground text-xs"
+			}),
+			icon && /* @__PURE__ */ jsx(Icon, {
+				name: icon,
+				className: "text-base"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium text-sm flex-1 truncate",
+				children: title
+			}),
+			count !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-muted-foreground",
+				children: count
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/data/diagnostics/utils.ts
+function countProcesses(node) {
+	if (!node) return 0;
+	return 1 + (node.children || []).reduce((sum, child) => sum + countProcesses(child), 0);
+}
+function findProcessByPID(node, pid) {
+	if (!node) return null;
+	if (node.pid === pid) return node;
+	for (const child of node.children || []) {
+		const found = findProcessByPID(child, pid);
+		if (found) return found;
+	}
+	return null;
+}
+function processStateIcon(status) {
+	const value = (status || "").toLowerCase();
+	if (value.includes("run")) return "codicon:play-circle";
+	if (value.includes("sleep") || value.includes("idle")) return "codicon:clock";
+	if (value.includes("stop") || value.includes("halt")) return "codicon:debug-pause";
+	if (value.includes("zombie") || value.includes("dead")) return "codicon:error";
+	if (value.includes("wait") || value.includes("block")) return "codicon:debug-step-over";
+	return "codicon:circle-filled";
+}
+function processStateColor(status) {
+	const value = (status || "").toLowerCase();
+	if (value.includes("run")) return "text-green-600";
+	if (value.includes("sleep") || value.includes("idle")) return "text-amber-500";
+	if (value.includes("stop") || value.includes("halt")) return "text-orange-600";
+	if (value.includes("zombie") || value.includes("dead")) return "text-red-600";
+	if (value.includes("wait") || value.includes("block")) return "text-blue-600";
+	return "text-muted-foreground";
+}
+function formatBytes$1(value) {
+	if (!value || value <= 0) return "0 B";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let size = value;
+	let unit = 0;
+	while (size >= 1024 && unit < units.length - 1) {
+		size /= 1024;
+		unit++;
+	}
+	return `${size >= 10 || unit === 0 ? size.toFixed(0) : size.toFixed(1)} ${units[unit]}`;
+}
+function processLabel(node) {
+	if (node.name) return node.name;
+	if (node.command) {
+		const [first] = node.command.split(/\s+/, 1);
+		return first || `pid ${node.pid}`;
+	}
+	return `pid ${node.pid}`;
+}
+
+//#endregion
+//#region src/data/diagnostics/DiagnosticsTree.tsx
+function DiagnosticsTree({ root, selectedPid, expandAll = null, onSelect }) {
+	if (!root) return /* @__PURE__ */ jsxs("div", {
+		className: "p-density-6 text-center text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			name: "svg-spinners:ring-resize",
+			className: "text-3xl text-blue-500"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "mt-density-2",
+			children: "Waiting for process diagnostics..."
+		})]
+	});
+	if (countProcesses(root) === 0) return /* @__PURE__ */ jsx("div", {
+		className: "p-density-6 text-center text-muted-foreground text-sm",
+		children: "No processes available"
+	});
+	return /* @__PURE__ */ jsx(Tree, {
+		roots: [root],
+		getChildren: (n) => n.children,
+		getKey: (n) => n.pid,
+		expandAll,
+		defaultOpen: (n, depth) => !!n.is_root || depth < 1,
+		onSelect: (n) => onSelect(n.pid),
+		renderRow: ({ node }) => {
+			const selected = node.pid === selectedPid;
+			const cpu = node.cpu_percent || 0;
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(Icon, {
+					name: node.is_root ? "codicon:server-process" : "codicon:debug-alt",
+					className: node.is_root ? "text-base text-blue-600" : "text-base text-muted-foreground"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: `truncate ${selected ? "font-semibold text-primary" : "font-medium text-foreground"}`,
+					children: processLabel(node)
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-xs text-muted-foreground shrink-0",
+					children: ["pid ", node.pid]
+				}),
+				/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+				node.status && /* @__PURE__ */ jsxs("span", {
+					className: `inline-flex items-center gap-1 text-xs shrink-0 ${processStateColor(node.status)}`,
+					children: [/* @__PURE__ */ jsx(Icon, { name: processStateIcon(node.status) }), node.status]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-xs text-muted-foreground shrink-0 tabular-nums",
+					children: [cpu.toFixed(1), "%"]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground shrink-0 tabular-nums",
+					children: formatBytes$1(node.rss)
+				})
+			] });
+		},
+		rowClass: (node) => node.pid === selectedPid ? "bg-primary/10 border-l-2 border-primary" : "hover:bg-accent"
+	});
+}
+
+//#endregion
+//#region src/data/diagnostics/jvm-stacktrace.ts
+const headerRe$1 = /^"(?<name>[^"]*)"(?<rest>.*)$/;
+const stateRe = /^\s*java\.lang\.Thread\.State:\s+(?<state>[A-Z_]+)(?:\s+\((?<sub>[^)]+)\))?/;
+const frameRe = /^\s*at\s+(?<fn>[^\s(]+)\((?<src>[^)]+)\)\s*$/;
+const srcLineRe = /^(?<file>[^:]+):(?<line>\d+)$/;
+const annotationRe = /^\s*-\s+(?<kind>locked|waiting on|waiting to lock|parking to wait for)\b(?<rest>.*)$/;
+function parseJvmThreadDump(text) {
+	const trimmed = text.trim();
+	if (!trimmed) return [];
+	const blocks = splitIntoThreadBlocks(trimmed);
+	const threads = [];
+	for (const block of blocks) {
+		const parsed = parseThreadBlock(block);
+		if (parsed) threads.push(parsed);
+	}
+	return threads;
+}
+function splitIntoThreadBlocks(text) {
+	const out = [];
+	let current = [];
+	const lines = text.split("\n");
+	for (const raw of lines) {
+		const line = raw.replace(/\r$/, "");
+		if (line.startsWith("\"") && current.length > 0) {
+			out.push(current.join("\n"));
+			current = [line];
+		} else current.push(line);
+	}
+	if (current.length > 0) out.push(current.join("\n"));
+	return out;
+}
+function parseThreadBlock(block) {
+	const lines = block.split("\n");
+	const header = lines[0]?.trim() ?? "";
+	const headerMatch = headerRe$1.exec(header);
+	if (!headerMatch?.groups) return null;
+	const name = headerMatch.groups.name;
+	const rest = headerMatch.groups.rest ?? "";
+	const idMatch = /#(\d+)\b/.exec(rest);
+	const prioMatch = /\bprio=(\d+)/.exec(rest);
+	const nidMatch = /\bnid=(0x[0-9a-f]+)/i.exec(rest);
+	const daemon = /\bdaemon\b/.test(rest);
+	let rawState = extractHeaderStateTrail(rest) ?? "";
+	let state = normalizeJvmState(rawState);
+	const frames = [];
+	for (let i = 1; i < lines.length; i++) {
+		const line = lines[i];
+		if (!line.trim()) continue;
+		const stateMatch = stateRe.exec(line);
+		if (stateMatch?.groups) {
+			const primary = stateMatch.groups.state;
+			const sub = stateMatch.groups.sub;
+			rawState = sub ? `${primary} (${sub})` : primary;
+			state = normalizeJvmState(primary);
+			continue;
+		}
+		const frameMatch = frameRe.exec(line);
+		if (frameMatch?.groups) {
+			const functionName = frameMatch.groups.fn;
+			const src = frameMatch.groups.src;
+			const frame = {
+				functionName,
+				displayName: sanitizeJvmFunctionName(functionName),
+				kind: "frame",
+				runtime: isJvmRuntimeFrame(functionName),
+				nativeMethod: src === "Native Method"
+			};
+			const srcMatch = srcLineRe.exec(src);
+			if (srcMatch?.groups) {
+				frame.file = srcMatch.groups.file;
+				frame.line = Number(srcMatch.groups.line);
+				frame.location = `${frame.file}:${frame.line}`;
+			} else if (src === "Native Method") frame.location = "Native Method";
+			else frame.location = src;
+			frames.push(frame);
+			continue;
+		}
+		const annoMatch = annotationRe.exec(line);
+		if (annoMatch?.groups) {
+			const kind = mapAnnotationKind(annoMatch.groups.kind);
+			frames.push({
+				functionName: annoMatch.groups.kind,
+				displayName: annoMatch.groups.kind,
+				kind,
+				runtime: false,
+				nativeMethod: false,
+				annotationText: (annoMatch.groups.rest ?? "").trim()
+			});
+			continue;
+		}
+	}
+	const userFrameCount = frames.filter((f) => f.kind === "frame" && !f.runtime).length;
+	const topFunction = frames.find((f) => f.kind === "frame")?.functionName;
+	const searchText = [header, ...frames.map((f) => `${f.functionName} ${f.location ?? ""} ${f.annotationText ?? ""}`)].join("\n").toLowerCase();
+	return {
+		id: idMatch ? Number(idMatch[1]) : deriveSyntheticId(name, rest),
+		nid: nidMatch ? nidMatch[1] : void 0,
+		name,
+		state: state || "unknown",
+		rawState: rawState || "",
+		priority: prioMatch ? Number(prioMatch[1]) : void 0,
+		daemon,
+		frames,
+		raw: block,
+		userFrameCount,
+		topFunction,
+		searchText
+	};
+}
+function extractHeaderStateTrail(rest) {
+	return rest.match(/nid=0x[0-9a-f]+\s+(?<desc>[^\[]+?)(?:\s+\[0x[0-9a-f]+\])?\s*$/i)?.groups?.desc?.trim();
+}
+function deriveSyntheticId(name, rest) {
+	const tid = /\btid=(0x[0-9a-f]+)/i.exec(rest);
+	if (tid) {
+		const hex = tid[1].slice(2);
+		const n = Number.parseInt(hex.slice(-8), 16);
+		if (Number.isFinite(n)) return n;
+	}
+	let h = 0;
+	for (let i = 0; i < name.length; i++) h = h * 31 + name.charCodeAt(i) | 0;
+	return Math.abs(h);
+}
+function mapAnnotationKind(kind) {
+	switch (kind) {
+		case "locked": return "locked";
+		case "waiting on": return "waiting_on";
+		case "waiting to lock": return "waiting_to_lock";
+		case "parking to wait for": return "parking";
+		default: return "frame";
+	}
+}
+function countThreadsByState(threads) {
+	const counts = /* @__PURE__ */ new Map();
+	for (const t of threads) counts.set(t.state, (counts.get(t.state) ?? 0) + 1);
+	return counts;
+}
+function normalizeJvmState(value) {
+	if (!value) return "";
+	const upper = value.trim().toUpperCase();
+	if (upper.startsWith("RUNNABLE")) return "runnable";
+	if (upper.startsWith("TIMED_WAITING")) return "timed_waiting";
+	if (upper.startsWith("WAITING")) return "waiting";
+	if (upper.startsWith("BLOCKED")) return "blocked";
+	if (upper.startsWith("NEW")) return "new";
+	if (upper.startsWith("TERMINATED")) return "terminated";
+	const lower = value.trim().toLowerCase();
+	if (lower.includes("runnable")) return "runnable";
+	if (lower.includes("waiting on condition") || lower.includes("sleeping")) return "timed_waiting";
+	if (lower.includes("waiting")) return "waiting";
+	if (lower.includes("blocked")) return "blocked";
+	return lower.split(/\s+/)[0];
+}
+const runtimePrefixes = [
+	"java.",
+	"javax.",
+	"sun.",
+	"jdk.",
+	"com.sun.",
+	"oracle.jrockit."
+];
+function isJvmRuntimeFrame(functionName) {
+	return runtimePrefixes.some((p) => functionName.startsWith(p));
+}
+function sanitizeJvmFunctionName(functionName) {
+	const parts = functionName.split(".");
+	if (parts.length < 2) return functionName;
+	const method = parts[parts.length - 1];
+	return `${parts[parts.length - 2]}.${method}`;
+}
+
+//#endregion
+//#region src/data/diagnostics/stacktrace.ts
+function detectDumpFormat(text) {
+	const trimmed = text.trim();
+	if (!trimmed) return "unknown";
+	if (/^"[^"]*"[^\n]*\b(prio=|tid=|nid=)/m.test(trimmed)) return "jvm";
+	if (/^goroutine\s+\d+\s+\[[^\]]+\]:/m.test(trimmed)) return "go";
+	return "unknown";
+}
+function parseStackDump(text) {
+	const format = detectDumpFormat(text);
+	if (format === "jvm") return {
+		format: "jvm",
+		threads: parseJvmThreadDump(text)
+	};
+	if (format === "go") return {
+		format: "go",
+		goroutines: parseGoroutineDump(text)
+	};
+	return {
+		format: "unknown",
+		goroutines: [],
+		threads: []
+	};
+}
+function countStackByState(stack) {
+	if (stack.format === "jvm") return countThreadsByState(stack.threads);
+	if (stack.format === "go") return countGoroutinesByState(stack.goroutines);
+	return /* @__PURE__ */ new Map();
+}
+const headerRe = /^goroutine\s+(\d+)\s+\[(.+?)\]:$/;
+const fileRe = /^\s*(.+?):(\d+)(?:\s+\+0x[0-9a-f]+)?$/i;
+const goSrcPrefixRe = /^\/usr\/local\/go[\d.]+\/src\//;
+const goWorkspacePrefixRe = /^.*?\/go\/src\//;
+const goPkgModPrefixRe = /^.*?\/go\/pkg\/mod\//;
+function parseGoroutineDump(text) {
+	const trimmed = text.trim();
+	if (!trimmed) return [];
+	const blocks = trimmed.split(/\n\s*\n+/);
+	const goroutines = [];
+	for (const block of blocks) {
+		const lines = block.split("\n").map((line) => line.replace(/\r$/, ""));
+		const header = lines[0]?.trim();
+		const match = headerRe.exec(header || "");
+		if (!match) continue;
+		const id = Number(match[1]);
+		const rawState = match[2];
+		const state = normalizeState(rawState);
+		const frames = [];
+		for (let i = 1; i < lines.length; i++) {
+			const trimmedLine = lines[i].trim();
+			if (!trimmedLine) continue;
+			const fileMatch = fileRe.exec(trimmedLine);
+			if (fileMatch && frames.length > 0 && !frames[frames.length - 1].file) {
+				frames[frames.length - 1].file = fileMatch[1];
+				frames[frames.length - 1].line = Number(fileMatch[2]);
+				continue;
+			}
+			const kind = trimmedLine.startsWith("created by ") ? "created_by" : "frame";
+			const functionName = kind === "created_by" ? trimmedLine.slice(11) : trimmedLine;
+			frames.push({
+				functionName,
+				displayName: sanitizeFunctionName(functionName),
+				kind,
+				runtime: isRuntimeFrame(functionName)
+			});
+		}
+		for (const frame of frames) if (frame.file) {
+			frame.file = normalizeFilePath(frame.file);
+			frame.location = `${frame.file}${frame.line ? `:${frame.line}` : ""}`;
+		}
+		goroutines.push({
+			id,
+			state,
+			rawState,
+			frames,
+			raw: block,
+			userFrameCount: frames.filter((frame) => !frame.runtime && frame.kind === "frame").length,
+			topFunction: frames.find((frame) => frame.kind === "frame")?.functionName,
+			searchText: `${header}\n${frames.map((frame) => `${frame.functionName} ${frame.file || ""}`).join("\n")}`.toLowerCase()
+		});
+	}
+	return goroutines;
+}
+function countGoroutinesByState(goroutines) {
+	const counts = /* @__PURE__ */ new Map();
+	for (const goroutine of goroutines) counts.set(goroutine.state, (counts.get(goroutine.state) || 0) + 1);
+	return counts;
+}
+function normalizeState(value) {
+	return value.split(",")[0].trim().toLowerCase();
+}
+function isRuntimeFrame(functionName) {
+	return functionName.startsWith("runtime.") || functionName.startsWith("runtime/") || functionName.startsWith("internal/") || functionName.startsWith("runtime/internal/") || functionName.startsWith("syscall.") || functionName.startsWith("reflect.");
+}
+function sanitizeFunctionName(functionName) {
+	let name = functionName.trim();
+	const paren = name.indexOf("(");
+	if (paren !== -1) name = name.slice(0, paren);
+	name = name.replace(/\.\(\*([^)]+)\)\./g, ".$1.");
+	return stripPackageQualifier(name);
+}
+function stripPackageQualifier(name) {
+	return name.replace(/^((?:[^./\s]+\/)+)([^./\s]+)\./, "$2.");
+}
+function normalizeFilePath(path) {
+	return path.replace(goSrcPrefixRe, "").replace(goWorkspacePrefixRe, "").replace(goPkgModPrefixRe, "");
+}
+
+//#endregion
+//#region src/data/diagnostics/GoroutineCard.tsx
+function goroutineStateBadge(state) {
+	if (state.includes("running")) return "bg-green-50 text-green-700 dark:bg-green-500/20 dark:text-green-300";
+	if (state.includes("chan") || state.includes("wait")) return "bg-blue-50 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300";
+	if (state.includes("sleep")) return "bg-amber-50 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300";
+	if (state.includes("select")) return "bg-violet-50 text-violet-700 dark:bg-violet-500/20 dark:text-violet-300";
+	return "bg-muted text-muted-foreground";
+}
+function goroutineStateDot(state) {
+	if (state.includes("running")) return "bg-green-500";
+	if (state.includes("chan") || state.includes("wait")) return "bg-blue-500";
+	if (state.includes("sleep")) return "bg-amber-500";
+	if (state.includes("select")) return "bg-violet-500";
+	return "bg-muted-foreground/40";
+}
+function GoroutineCard({ goroutine, search, hideRuntimeOnly }) {
+	const frames = hideRuntimeOnly ? goroutine.frames.filter((frame) => !frame.runtime || frame.kind === "created_by") : goroutine.frames;
+	return /* @__PURE__ */ jsxs("details", {
+		className: "border-0 bg-transparent",
+		open: goroutine.state === "running" || !!search,
+		children: [/* @__PURE__ */ jsx("summary", {
+			className: "cursor-pointer list-none px-0 py-1",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 flex-wrap",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-mono text-xs font-semibold text-foreground",
+						children: ["g", goroutine.id]
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] ${goroutineStateBadge(goroutine.state)}`,
+						children: [/* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full ${goroutineStateDot(goroutine.state)}` }), goroutine.rawState]
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-[11px] text-muted-foreground",
+						children: [frames.length, "f"]
+					}),
+					goroutine.userFrameCount > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "text-[11px] text-muted-foreground",
+						children: [goroutine.userFrameCount, "u"]
+					}),
+					goroutine.topFunction && /* @__PURE__ */ jsx("span", {
+						className: "truncate text-[11px] text-muted-foreground",
+						children: goroutine.topFunction
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "pl-3 py-1 space-y-0.5",
+			children: frames.map((frame, index) => /* @__PURE__ */ jsx(FrameRow, { frame }, `${goroutine.id}-${index}`))
+		})]
+	});
+}
+function FrameRow({ frame }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: frame.runtime ? "text-muted-foreground" : "text-foreground",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-1.5",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: frame.kind === "created_by" ? "codicon:debug-restart" : frame.runtime ? "codicon:debug-step-over" : "codicon:symbol-method",
+				className: "shrink-0 mt-0.5 text-[11px]"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-w-0",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "break-all font-mono text-[11px] font-semibold leading-4",
+					children: [frame.displayName, frame.location && /* @__PURE__ */ jsx("span", {
+						className: "ml-2 text-[10px] font-normal opacity-80",
+						children: frame.location
+					})]
+				})
+			})]
+		})
+	});
+}
+
+//#endregion
+//#region src/data/diagnostics/ThreadCard.tsx
+function threadStateBadge(state) {
+	switch (state) {
+		case "runnable": return "bg-green-50 text-green-700 dark:bg-green-500/20 dark:text-green-300";
+		case "blocked": return "bg-red-50 text-red-700 dark:bg-red-500/20 dark:text-red-300";
+		case "waiting":
+		case "timed_waiting": return "bg-blue-50 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300";
+		case "new": return "bg-amber-50 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300";
+		case "terminated": return "bg-muted text-muted-foreground";
+		default: return "bg-muted text-muted-foreground";
+	}
+}
+function threadStateDot(state) {
+	switch (state) {
+		case "runnable": return "bg-green-500";
+		case "blocked": return "bg-red-500";
+		case "waiting":
+		case "timed_waiting": return "bg-blue-500";
+		case "new": return "bg-amber-500";
+		case "terminated": return "bg-muted-foreground/40";
+		default: return "bg-muted-foreground/40";
+	}
+}
+function ThreadCard({ thread, search, hideRuntimeOnly }) {
+	const frames = hideRuntimeOnly ? thread.frames.filter((f) => f.kind !== "frame" || !f.runtime) : thread.frames;
+	return /* @__PURE__ */ jsxs("details", {
+		className: "border-0 bg-transparent",
+		open: thread.state === "runnable" || thread.state === "blocked" || !!search,
+		children: [/* @__PURE__ */ jsx("summary", {
+			className: "cursor-pointer list-none px-0 py-1",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 flex-wrap",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-mono text-xs font-semibold text-foreground",
+						children: ["#", thread.id]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate font-mono text-xs text-foreground",
+						children: thread.name
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] ${threadStateBadge(thread.state)}`,
+						children: [/* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full ${threadStateDot(thread.state)}` }), thread.rawState || thread.state]
+					}),
+					thread.daemon && /* @__PURE__ */ jsx("span", {
+						className: "rounded-full bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground",
+						children: "daemon"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-[11px] text-muted-foreground",
+						children: [frames.length, "f"]
+					}),
+					thread.userFrameCount > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "text-[11px] text-muted-foreground",
+						children: [thread.userFrameCount, "u"]
+					}),
+					thread.topFunction && /* @__PURE__ */ jsx("span", {
+						className: "truncate text-[11px] text-muted-foreground",
+						children: thread.topFunction
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "pl-3 py-1 space-y-0.5",
+			children: frames.map((frame, index) => /* @__PURE__ */ jsx(ThreadFrameRow, { frame }, `${thread.id}-${index}`))
+		})]
+	});
+}
+function ThreadFrameRow({ frame }) {
+	const isAnno = frame.kind !== "frame";
+	const iconName = isAnno ? frame.kind === "locked" ? "codicon:lock" : frame.kind === "waiting_to_lock" ? "codicon:sync" : "codicon:watch" : frame.nativeMethod ? "codicon:chip" : frame.runtime ? "codicon:debug-step-over" : "codicon:symbol-method";
+	return /* @__PURE__ */ jsx("div", {
+		className: frame.runtime ? "text-muted-foreground" : "text-foreground",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-1.5",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: iconName,
+				className: "shrink-0 mt-0.5 text-[11px]"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-w-0",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "break-all font-mono text-[11px] font-semibold leading-4",
+					children: isAnno ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						className: "opacity-70",
+						children: frame.functionName
+					}), frame.annotationText && /* @__PURE__ */ jsx("span", {
+						className: "ml-2 font-normal opacity-80",
+						children: frame.annotationText
+					})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [frame.displayName, frame.location && /* @__PURE__ */ jsx("span", {
+						className: "ml-2 text-[10px] font-normal opacity-80",
+						children: frame.location
+					})] })
+				})
+			})]
+		})
+	});
+}
+
+//#endregion
+//#region src/data/diagnostics/DiagnosticsDetailPanel.tsx
+const STACK_MIN_HEIGHT = `10rem`;
+function cpuTone(pct) {
+	if (pct >= 90) return "danger";
+	if (pct >= 60) return "warning";
+	if (pct > 0) return "success";
+	return "neutral";
+}
+function memoryTone(rss, vms) {
+	if (!rss || !vms) return "neutral";
+	const ratio = rss / vms;
+	if (ratio >= .9) return "danger";
+	if (ratio >= .6) return "warning";
+	return "info";
+}
+function DiagnosticsDetailPanel({ process, collectBusy, onCollectStack, runMeta }) {
+	const [search, setSearch] = useState("");
+	const [selectedStates, setSelectedStates] = useState(/* @__PURE__ */ new Set());
+	const [hideRuntimeOnly, setHideRuntimeOnly] = useState(true);
+	const stack = process?.stack_capture;
+	const parsed = useMemo(() => parseStackDump(stack?.text || ""), [stack?.text]);
+	const stateCounts = useMemo(() => countStackByState(parsed), [parsed]);
+	const filtered = useMemo(() => {
+		const needle = search.trim().toLowerCase();
+		return (parsed.format === "jvm" ? parsed.threads : parsed.format === "go" ? parsed.goroutines : []).filter((item) => {
+			if (selectedStates.size > 0 && !selectedStates.has(item.state)) return false;
+			if (hideRuntimeOnly && item.userFrameCount === 0) return false;
+			if (needle && !item.searchText.includes(needle)) return false;
+			return true;
+		});
+	}, [
+		parsed,
+		search,
+		selectedStates,
+		hideRuntimeOnly
+	]);
+	useEffect(() => {
+		setSearch("");
+		setSelectedStates(/* @__PURE__ */ new Set());
+		setHideRuntimeOnly(true);
+	}, [stack?.text, process?.pid]);
+	if (!process) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center h-full text-muted-foreground text-sm",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "text-center",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: "codicon:server-process",
+				className: "text-4xl mb-density-2"
+			}), /* @__PURE__ */ jsx("div", { children: "Select a process to view diagnostics" })]
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "h-full min-h-0 flex flex-col gap-density-3 p-density-4",
+		children: [
+			/* @__PURE__ */ jsx(Header, { process }),
+			runMeta && /* @__PURE__ */ jsx(RunSection, { runMeta }),
+			process.command && /* @__PURE__ */ jsx(PanelSection, {
+				title: "Command",
+				children: /* @__PURE__ */ jsx("pre", {
+					className: "text-xs text-foreground whitespace-pre-wrap font-mono bg-blue-50 dark:bg-blue-500/10 rounded p-2 break-all",
+					children: process.command
+				})
+			}),
+			/* @__PURE__ */ jsx(PanelSection, {
+				title: "Metrics",
+				children: /* @__PURE__ */ jsx(ProcessMetrics, { process })
+			}),
+			/* @__PURE__ */ jsx(PanelSection, {
+				title: "Stack",
+				grow: true,
+				children: /* @__PURE__ */ jsx(StackBlock, {
+					process,
+					parsed,
+					stateCounts,
+					filtered,
+					search,
+					setSearch,
+					selectedStates,
+					setSelectedStates,
+					hideRuntimeOnly,
+					setHideRuntimeOnly,
+					collectBusy,
+					onCollectStack
+				})
+			})
+		]
+	});
+}
+function Header({ process }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-start justify-between gap-density-3",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-density-2",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: process.is_root ? "codicon:server-process" : "codicon:debug-alt",
+					className: "text-2xl text-blue-600"
+				}), /* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-bold text-foreground break-words",
+					children: processLabel(process)
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "mt-1 flex items-center gap-density-2 flex-wrap text-xs text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-mono",
+						children: ["pid ", process.pid]
+					}),
+					process.ppid ? /* @__PURE__ */ jsxs("span", {
+						className: "font-mono",
+						children: ["ppid ", process.ppid]
+					}) : null,
+					process.status ? /* @__PURE__ */ jsxs("span", {
+						className: `inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 ${processStateColor(process.status)}`,
+						children: [/* @__PURE__ */ jsx(Icon, { name: processStateIcon(process.status) }), process.status]
+					}) : null
+				]
+			})]
+		})
+	});
+}
+function RunSection({ runMeta }) {
+	return /* @__PURE__ */ jsx(PanelSection, {
+		title: "Run",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-2 gap-density-2 text-sm",
+			children: [/* @__PURE__ */ jsx(InfoTile, {
+				label: runMeta.kind === "rerun" ? `Rerun #${runMeta.sequence}` : "Initial run",
+				value: runMeta.started ? new Date(runMeta.started).toLocaleString() : "Unavailable"
+			}), /* @__PURE__ */ jsx(InfoTile, {
+				label: "Finished",
+				value: runMeta.ended ? new Date(runMeta.ended).toLocaleString() : "In progress"
+			})]
+		})
+	});
+}
+function stackItemCount(parsed) {
+	if (parsed.format === "jvm") return parsed.threads.length;
+	if (parsed.format === "go") return parsed.goroutines.length;
+	return 0;
+}
+function stackItemLabel(parsed) {
+	if (parsed.format === "jvm") return "threads";
+	if (parsed.format === "go") return "goroutines";
+	return "frames";
+}
+function stackStateDot(parsed, state) {
+	return parsed.format === "jvm" ? threadStateDot(state) : goroutineStateDot(state);
+}
+function StackBlock(props) {
+	const { process, parsed, stateCounts, filtered, search, setSearch, selectedStates, setSelectedStates, hideRuntimeOnly, setHideRuntimeOnly, collectBusy, onCollectStack } = props;
+	const stack = process.stack_capture;
+	if (!stack?.text) return /* @__PURE__ */ jsxs("div", {
+		className: "h-full min-h-[14rem] flex flex-col justify-center gap-density-3 p-density-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "space-y-1.5",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: `h-3 w-40 rounded ${collectBusy ? "animate-pulse bg-muted" : "bg-muted/70"}` }),
+				/* @__PURE__ */ jsx("div", { className: `h-3 w-full rounded ${collectBusy ? "animate-pulse bg-muted" : "bg-muted/70"}` }),
+				/* @__PURE__ */ jsx("div", { className: `h-3 w-5/6 rounded ${collectBusy ? "animate-pulse bg-muted" : "bg-muted/70"}` })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-density-3",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "text-sm text-muted-foreground",
+				children: stack?.error ? stack.error : collectBusy ? "Collecting stack trace..." : "No stack trace collected yet."
+			}), onCollectStack && /* @__PURE__ */ jsx(CollectButton, {
+				pid: process.pid,
+				busy: collectBusy,
+				onClick: onCollectStack,
+				primary: true
+			})]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "h-full min-h-0 flex flex-col",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "px-1 py-1.5 space-y-density-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-density-2 text-[11px] text-muted-foreground flex-wrap",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-density-2 flex-wrap",
+						children: [
+							/* @__PURE__ */ jsx(StackStatusBadge, { status: stack.status }),
+							stack.collected_at && /* @__PURE__ */ jsx("span", { children: new Date(stack.collected_at).toLocaleString() }),
+							stackItemCount(parsed) > 0 && /* @__PURE__ */ jsxs("span", { children: [
+								filtered.length,
+								" / ",
+								stackItemCount(parsed),
+								" ",
+								stackItemLabel(parsed)
+							] })
+						]
+					}), onCollectStack && /* @__PURE__ */ jsx(CollectButton, {
+						pid: process.pid,
+						busy: collectBusy,
+						onClick: onCollectStack
+					})]
+				}), stackItemCount(parsed) > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5 flex-wrap",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "relative min-w-[14rem] flex-1",
+							children: [/* @__PURE__ */ jsx(Icon, {
+								name: "codicon:search",
+								className: "absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground text-xs"
+							}), /* @__PURE__ */ jsx("input", {
+								className: "w-full rounded-md border border-border bg-muted/50 py-1 pl-7 pr-2 text-xs outline-none focus:border-primary focus:bg-background",
+								placeholder: parsed.format === "jvm" ? "Filter by thread name, function, or file" : "Filter by goroutine id, function, or file",
+								value: search,
+								onChange: (e) => setSearch(e.target.value)
+							})]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-muted/50 px-2 py-1 text-[11px] text-muted-foreground",
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								checked: hideRuntimeOnly,
+								onChange: (e) => setHideRuntimeOnly(e.target.checked)
+							}), "Hide runtime-only"]
+						}),
+						(search || selectedStates.size > 0 || !hideRuntimeOnly) && /* @__PURE__ */ jsx("button", {
+							className: "text-[11px] text-muted-foreground hover:text-foreground",
+							onClick: () => {
+								setSearch("");
+								setSelectedStates(() => /* @__PURE__ */ new Set());
+								setHideRuntimeOnly(true);
+							},
+							children: "Clear"
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1 flex-wrap",
+					children: Array.from(stateCounts.entries()).sort((a, b) => b[1] - a[1]).map(([state, count]) => {
+						return /* @__PURE__ */ jsxs("button", {
+							className: `inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] transition-colors ${selectedStates.has(state) ? "border-primary bg-primary/10 text-primary" : "border-border bg-muted/50 text-muted-foreground hover:bg-background"}`,
+							onClick: () => {
+								setSelectedStates((prev) => {
+									const next = new Set(prev);
+									if (next.has(state)) next.delete(state);
+									else next.add(state);
+									return next;
+								});
+							},
+							children: [
+								/* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full ${stackStateDot(parsed, state)}` }),
+								state,
+								/* @__PURE__ */ jsx("span", {
+									className: "text-[10px] opacity-70",
+									children: count
+								})
+							]
+						}, state);
+					})
+				})] })]
+			}),
+			stack.error && /* @__PURE__ */ jsx("div", {
+				className: "mt-density-2 text-xs text-red-600 whitespace-pre-wrap",
+				children: stack.error
+			}),
+			stackItemCount(parsed) === 0 ? /* @__PURE__ */ jsx("pre", {
+				className: "flex-1 min-h-0 overflow-auto py-1 text-[11px] text-foreground whitespace-pre-wrap font-mono leading-4",
+				style: { minHeight: STACK_MIN_HEIGHT },
+				children: stack.text
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-h-0 overflow-auto py-1 space-y-1",
+				style: { minHeight: STACK_MIN_HEIGHT },
+				children: [
+					filtered.length === 0 && /* @__PURE__ */ jsxs("div", {
+						className: "py-density-3 text-center text-xs text-muted-foreground",
+						children: [
+							"No ",
+							stackItemLabel(parsed),
+							" match the current filters."
+						]
+					}),
+					parsed.format === "jvm" && parsed.threads.filter((t) => filtered.includes(t)).map((t) => /* @__PURE__ */ jsx(ThreadCard, {
+						thread: t,
+						search,
+						hideRuntimeOnly
+					}, t.id)),
+					parsed.format === "go" && parsed.goroutines.filter((g) => filtered.includes(g)).map((goroutine) => /* @__PURE__ */ jsx(GoroutineCard, {
+						goroutine,
+						search,
+						hideRuntimeOnly
+					}, goroutine.id))
+				]
+			})
+		]
+	});
+}
+function StackStatusBadge({ status }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: `px-2 py-0.5 rounded-full ${status === "ready" ? "bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300" : status === "unsupported" ? "bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-300" : "bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300"}`,
+		children: status
+	});
+}
+function CollectButton({ pid, busy, onClick, primary }) {
+	return /* @__PURE__ */ jsxs("button", {
+		className: `shrink-0 text-[11px] px-2 py-1 rounded disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1 ${primary ? "bg-primary text-primary-foreground hover:bg-primary/90" : "border border-border text-muted-foreground hover:bg-accent"}`,
+		onClick: () => onClick(pid),
+		disabled: busy,
+		title: primary ? "Collect the latest stack trace" : "Refresh stack trace",
+		children: [/* @__PURE__ */ jsx(Icon, { name: busy ? "svg-spinners:ring-resize" : primary ? "codicon:debug-alt-small" : "codicon:refresh" }), busy ? "Collecting..." : primary ? "Collect stack trace" : "Refresh"]
+	});
+}
+function PanelSection({ title, grow, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: grow ? "flex min-h-0 flex-1 flex-col" : "",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1.5",
+			children: title
+		}), grow ? /* @__PURE__ */ jsx("div", {
+			className: "flex-1 min-h-0 overflow-hidden",
+			children
+		}) : children]
+	});
+}
+function InfoTile({ label, value }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border border-border rounded-lg bg-muted/50 px-2.5 py-density-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-[10px] uppercase tracking-wide text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "text-xs font-medium text-foreground mt-0.5",
+			children: value
+		})]
+	});
+}
+function ProcessMetrics({ process }) {
+	const cpu = process.cpu_percent || 0;
+	const rss = process.rss;
+	const vms = process.vms;
+	const memRatioPct = rss && vms && vms > 0 ? Math.min(100, Math.round(rss / vms * 100)) : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-4 gap-density-1",
+		children: [
+			/* @__PURE__ */ jsx(MetricTile, {
+				label: "CPU",
+				value: `${cpu.toFixed(1)}%`,
+				barPct: Math.min(100, cpu),
+				tone: cpuTone(cpu)
+			}),
+			/* @__PURE__ */ jsx(MetricTile, {
+				label: "RSS",
+				value: rss !== void 0 ? formatBytes$1(rss) : "n/a",
+				barPct: memRatioPct,
+				tone: memoryTone(rss, vms)
+			}),
+			/* @__PURE__ */ jsx(MetricTile, {
+				label: "VMS",
+				value: vms !== void 0 ? formatBytes$1(vms) : "n/a",
+				tone: "neutral"
+			}),
+			/* @__PURE__ */ jsx(MetricTile, {
+				label: "Files",
+				value: process.open_files !== void 0 ? String(process.open_files) : "n/a",
+				barPct: process.open_files ? Math.min(100, process.open_files / 1024 * 100) : 0,
+				tone: "info"
+			})
+		]
+	});
+}
+function MetricTile({ label, value, barPct, tone = "neutral" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-0.5 rounded-md border border-border bg-background px-density-2 py-1 min-w-0",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-[9px] uppercase tracking-wide text-muted-foreground leading-none",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: `text-xs font-semibold tabular-nums truncate ${{
+					neutral: "text-foreground",
+					success: "text-green-600 dark:text-green-400",
+					warning: "text-yellow-600 dark:text-yellow-400",
+					danger: "text-red-600 dark:text-red-400",
+					info: "text-blue-600 dark:text-blue-400"
+				}[tone]}`,
+				children: value
+			}),
+			barPct !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: "h-0.5 w-full rounded-full bg-muted overflow-hidden",
+				children: /* @__PURE__ */ jsx("div", {
+					className: `h-full ${{
+						neutral: "bg-muted-foreground/40",
+						success: "bg-green-500",
+						warning: "bg-yellow-500",
+						danger: "bg-red-500",
+						info: "bg-blue-500"
+					}[tone]} transition-all duration-300`,
+					style: { width: `${barPct}%` }
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/data/har/HarPanel.tsx
+const COLS = [
+	{
+		key: "request.method",
+		label: "Method",
+		cls: "px-2 py-2 w-16"
+	},
+	{
+		key: "request.url",
+		label: "URL",
+		cls: "px-2 py-2"
+	},
+	{
+		key: "response.status",
+		label: "Status",
+		cls: "px-2 py-2 w-20"
+	},
+	{
+		key: "time",
+		label: "Time",
+		cls: "px-2 py-2 w-16 text-right",
+		align: "right"
+	},
+	{
+		key: "response.bodySize",
+		label: "Size",
+		cls: "px-2 py-2 w-16 text-right",
+		align: "right"
+	},
+	{
+		key: "response.content.mimeType",
+		label: "Type",
+		cls: "px-2 py-2 w-40"
+	}
+];
+function HarPanel({ entries, search, emptyLabel = "No HTTP traffic captured", className }) {
+	const { sorted, sort, toggle } = useSort(useMemo(() => {
+		if (!search) return entries;
+		const needle = search.toLowerCase();
+		return entries.filter((e) => matchesSearch(needle, e));
+	}, [entries, search]), { defaultKey: "time" });
+	if (!entries || entries.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "p-density-6 text-center text-muted-foreground text-sm",
+		children: emptyLabel
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: `overflow-auto h-full ${className ?? ""}`,
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full text-left table-fixed",
+			children: [/* @__PURE__ */ jsx("thead", {
+				className: "bg-muted/50 sticky top-0",
+				children: /* @__PURE__ */ jsx("tr", {
+					className: "text-xs text-muted-foreground border-b border-border",
+					children: COLS.map((c) => /* @__PURE__ */ jsx("th", {
+						className: `${c.cls} cursor-pointer select-none whitespace-nowrap font-medium`,
+						children: /* @__PURE__ */ jsx(SortableHeader, {
+							active: sort?.key === c.key,
+							dir: sort?.dir,
+							onClick: () => toggle(c.key),
+							align: c.align,
+							children: c.label
+						})
+					}, c.key))
+				})
+			}), /* @__PURE__ */ jsx("tbody", { children: sorted.map((entry, i) => /* @__PURE__ */ jsx(HarRow, { entry }, i)) })]
+		})
+	});
+}
+function HarRow({ entry }) {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("tr", {
+		className: "hover:bg-accent cursor-pointer text-xs border-b border-border",
+		onClick: () => setOpen(!open),
+		children: [
+			/* @__PURE__ */ jsx("td", {
+				className: "px-2 py-1.5 font-mono font-medium whitespace-nowrap",
+				children: entry.request.method
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: "px-2 py-1.5 font-mono truncate max-w-0",
+				title: entry.request.url,
+				children: entry.request.url
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: `px-2 py-1.5 font-medium whitespace-nowrap ${statusColor(entry.response.status)}`,
+				children: entry.response.status
+			}),
+			/* @__PURE__ */ jsxs("td", {
+				className: "px-2 py-1.5 text-right text-muted-foreground whitespace-nowrap tabular-nums",
+				children: [entry.time.toFixed(0), "ms"]
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: "px-2 py-1.5 text-right text-muted-foreground whitespace-nowrap tabular-nums",
+				children: formatBytes(entry.response.bodySize)
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: "px-2 py-1.5 text-muted-foreground whitespace-nowrap",
+				children: entry.response.content?.mimeType || ""
+			})
+		]
+	}), open && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+		colSpan: COLS.length,
+		className: "bg-muted/50 p-density-3 text-xs",
+		children: /* @__PURE__ */ jsx(HarRowDetails, { entry })
+	}) })] });
+}
+function HarRowDetails({ entry }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-2 gap-density-4",
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(HeaderList, {
+			title: "Request Headers",
+			headers: entry.request.headers
+		}), entry.request.postData?.text && /* @__PURE__ */ jsxs("div", {
+			className: "mt-density-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "font-semibold text-foreground mb-1",
+				children: "Request Body"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "bg-background p-density-2 rounded border border-border overflow-auto max-h-48",
+				children: /* @__PURE__ */ jsx(BodyView, {
+					text: entry.request.postData.text,
+					mimeType: entry.request.postData.mimeType
+				})
+			})]
+		})] }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HeaderList, {
+			title: "Response Headers",
+			headers: entry.response.headers
+		}) })]
+	}), entry.response.content?.text && /* @__PURE__ */ jsxs("div", {
+		className: "mt-density-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "font-semibold text-foreground mb-1",
+			children: "Response Body"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "bg-background p-density-2 rounded border border-border overflow-auto max-h-64",
+			children: /* @__PURE__ */ jsx(BodyView, {
+				text: entry.response.content.text,
+				mimeType: entry.response.content.mimeType
+			})
+		})]
+	})] });
+}
+function HeaderList({ title, headers }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "font-semibold text-foreground mb-1",
+		children: title
+	}), /* @__PURE__ */ jsx("div", {
+		className: "space-y-0.5",
+		children: headers?.map((h, i) => /* @__PURE__ */ jsxs("div", {
+			className: "whitespace-nowrap",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-purple-600 dark:text-purple-400",
+					children: [h.name, ":"]
+				}),
+				" ",
+				h.value
+			]
+		}, i))
+	})] });
+}
+function BodyView({ text, mimeType }) {
+	if (isJsonType(mimeType)) {
+		const parsed = tryParseJson(text);
+		if (parsed !== null) return /* @__PURE__ */ jsx(JsonView, { data: parsed });
+	}
+	return /* @__PURE__ */ jsx("pre", {
+		className: "whitespace-pre-wrap break-all",
+		children: text
+	});
+}
+function tryParseJson(text) {
+	try {
+		return JSON.parse(text);
+	} catch {
+		return null;
+	}
+}
+function isJsonType(mime) {
+	return !!mime && (mime.includes("json") || mime.includes("javascript"));
+}
+function matchesSearch(needle, e) {
+	return [
+		e.request.url,
+		e.request.method,
+		e.request.postData?.text,
+		e.response.content?.text
+	].some((h) => !!h && h.toLowerCase().includes(needle));
+}
+function formatBytes(bytes) {
+	if (bytes < 0) return "";
+	if (bytes < 1024) return `${bytes}B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+	return `${(bytes / 1024 / 1024).toFixed(1)}MB`;
+}
+function statusColor(status) {
+	if (status >= 500) return "text-red-600";
+	if (status >= 400) return "text-amber-600";
+	if (status >= 300) return "text-blue-600";
+	if (status >= 200) return "text-green-600";
+	return "text-muted-foreground";
+}
+
+//#endregion
+//#region src/overlay/HoverCard.tsx
+const placementPos = {
+	top: "bottom-full left-1/2 -translate-x-1/2 mb-1.5",
+	bottom: "top-full left-1/2 -translate-x-1/2 mt-1.5",
+	left: "right-full top-1/2 -translate-y-1/2 mr-1.5",
+	right: "left-full top-1/2 -translate-y-1/2 ml-1.5"
+};
+function HoverCard({ trigger, children, placement = "top", delay = 0, arrow = true, className, cardClassName }) {
+	const [open, setOpen] = useState(false);
+	const timer = useState(null);
+	function onEnter() {
+		if (delay > 0) {
+			const id = window.setTimeout(() => setOpen(true), delay);
+			timer[1](id);
+		} else setOpen(true);
+	}
+	function onLeave() {
+		if (timer[0] !== null) window.clearTimeout(timer[0]);
+		setOpen(false);
+	}
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("relative inline-flex items-center", className),
+		onMouseEnter: onEnter,
+		onMouseLeave: onLeave,
+		onFocus: onEnter,
+		onBlur: onLeave,
+		children: [trigger, open && /* @__PURE__ */ jsxs("div", {
+			role: "tooltip",
+			className: cn("absolute z-20 bg-background border border-border rounded-md shadow-lg px-2.5 py-1.5 whitespace-nowrap text-[11px]", placementPos[placement], cardClassName),
+			children: [children, arrow && placement === "top" && /* @__PURE__ */ jsx("div", {
+				className: "absolute top-full left-1/2 -translate-x-1/2 -mt-px",
+				children: /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-background border-b border-r border-border rotate-45 -translate-y-1" })
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/overlay/Modal.tsx
+const sizeClass = {
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-2xl",
+	xl: "max-w-4xl",
+	full: "max-w-[95vw] max-h-[95vh]"
+};
+function Modal({ open, onClose, title, size = "md", closeOnBackdrop = true, closeOnEsc = true, hideClose = false, className, headerSlot, footer, children }) {
+	const dialogRef = useRef(null);
+	useEffect(() => {
+		if (!open || !closeOnEsc) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [
+		open,
+		closeOnEsc,
+		onClose
+	]);
+	useEffect(() => {
+		if (!open) return;
+		const prev = document.activeElement;
+		dialogRef.current?.focus();
+		return () => prev?.focus?.();
+	}, [open]);
+	if (!open) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40",
+		onClick: closeOnBackdrop ? onClose : void 0,
+		role: "presentation",
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: dialogRef,
+			tabIndex: -1,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": typeof title === "string" ? title : void 0,
+			className: cn("relative bg-background border border-border rounded-lg shadow-xl w-full flex flex-col", sizeClass[size], className),
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				(title || headerSlot || !hideClose) && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-density-2 px-density-4 py-density-3 border-b border-border",
+					children: [
+						title && /* @__PURE__ */ jsx("h2", {
+							className: "text-sm font-semibold flex-1",
+							children: title
+						}),
+						headerSlot,
+						!hideClose && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onClose,
+							"aria-label": "Close",
+							className: "text-muted-foreground hover:text-foreground",
+							children: /* @__PURE__ */ jsx(Icon, { name: "codicon:close" })
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex-1 overflow-auto px-density-4 py-density-3",
+					children
+				}),
+				footer && /* @__PURE__ */ jsx("div", {
+					className: "px-density-4 py-density-3 border-t border-border",
+					children: footer
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { AVATAR_PALETTE, AnsiHtml, Avatar, Badge, Button, Clicky, DensityProvider, DensitySwitcher, DetailEmptyState, DiagnosticsDetailPanel, DiagnosticsTree, FilterPill, FilterPillGroup, FilterSeparator, Gauge, HarPanel, HoverCard, Icon, JsonView, LogViewer, Markdown, Modal, ProgressBar, Section, Select, SortableHeader, SplitPane, TabButton, ThemeProvider, ThemeSwitcher, Tree, TreeGroupHeader, TreeNode, badgeVariants, buttonVariants, cn, countGoroutinesByState, countProcesses, countStackByState, countThreadsByState, detectDumpFormat, findProcessByPID, fnv1a32, paletteClass, parseGoroutineDump, parseJvmThreadDump, parseStackDump, processLabel, processStateColor, processStateIcon, useDensity, useHistoryRoute, useSort, useTheme };
+//# sourceMappingURL=index.mjs.map