@reopt-ai/opt-ui 1.5.0 → 1.7.0

package/dist/field-sidebar-Cs-J-5VE.js

@@ -0,0 +1,4233 @@
+"use client";
+import { $ as TooltipAnchor$1, A as FormSwitch$1, An as OPT_SURFACE_POPOVER, At as SelectPopover$1, Bn as _objectSpread2, Bt as Composite, C as FormRoot$1, Cn as OPT_FOCUS, Dt as DialogRoot$1, E as FormSelectPopover, En as OPT_INPUT, Et as DialogPanel$1, F as useFormStore, Fn as OPT_TEXT_LABEL, Ft as TabPanel$1, G as PopoverTrigger$1, Hn as Kbd, Ht as CompositeProvider, In as OPT_TEXT_PRIMARY, It as TabsRoot$1, J as ToolbarButton$1, Jt as Alert, Kt as Input, Ln as OPT_TEXT_SECONDARY, Lt as DisclosureContent$1, M as FormTextarea, Mn as OPT_TD, Mt as SelectTrigger$1, Nn as OPT_TD_MUTED, Nt as Tab$1, On as OPT_ITEM_BASE, Ot as SelectItem$1, Pt as TabList$1, Q as Tooltip$1, Qt as Button, R as TagInput, Rn as OPT_TEXT_TERTIARY, Rt as DisclosureRoot$1, Sn as OPT_DOT_YELLOW, T as FormSelectItem, Tt as DialogHeading$1, U as PopoverContent$1, Un as cn, Ut as CompositeRow, Vn as _objectWithoutProperties, Vt as CompositeItem, W as PopoverRoot$1, X as ToolbarRoot$1, Xt as Badge, Y as ToolbarContainer$1, Yt as Spinner, Z as ToolbarSeparator$1, Zt as EmptyState, _n as OPT_DISCLOSURE_TRIGGER, _t as ComboboxRoot$1, at as MenuPopover$1, b as FormRadioGroup$1, bn as OPT_DOT_GREEN, bt as DialogDescription$1, ct as MenuTrigger$1, dn as OPT_BADGE_GREEN, dt as ComboboxEmpty, et as TooltipProvider$1, fn as OPT_BADGE_NEUTRAL, gn as OPT_DISCLOSURE_CONTENT, gt as ComboboxPopover$1, h as FormLabel$1, hn as OPT_BORDER, ht as ComboboxItem$1, i as FormCheckbox$1, it as MenuItemRadio$1, jn as OPT_TABLE_ROW_ACTIVE, jt as SelectRoot$1, k as FormSubmit$1, kn as OPT_SURFACE, kt as SelectLabel$1, l as FormError$1, ln as OPT_ANIMATE_ENTER_EXIT, lt as MenubarContainer$1, m as FormInput$1, mn as OPT_BADGE_YELLOW, mt as ComboboxInput$1, n as Checkbox, nn as StatCard, nt as MenuItem$1, ot as MenuRoot$1, pn as OPT_BADGE_RED, rt as MenuItemCheckbox$1, sn as OPT_ACTIVE_ITEM, st as MenuSeparator$1, t as Pagination, tt as MenuButtonArrow$1, un as OPT_BADGE_BLUE, ut as MenubarRoot$1, vn as OPT_DIVIDER, w as FormSelect, wn as OPT_FOCUS_VISIBLE, xn as OPT_DOT_RED, y as FormRadio$1, zn as OPT_TH, zt as DisclosureTrigger$1 } from "./pagination-DWbvACuN.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Fragment as Fragment$1, createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandRoot, CommandSeparator } from "@reopt-ai/opt-ui-primitives";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Columns3, Minus, Plus, RefreshCw, Search, SearchIcon, Undo2, X, ZoomIn, ZoomOut } from "lucide-react";
+import { TimeSeriesChart, formatCountUnit, formatDuration, formatInstant, isDateOnly, isExactMinutes, isRelativeToNow, measureTimeWindow, parseRelativeParts, parseTimeExpression, resolveTimeRange, shiftTimeRange, toAbsoluteRange, zoomTimeRange } from "@reopt-ai/opt-charts";
+import { matchSorter } from "match-sorter";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+//#region src/core/command.tsx
+const _excluded = ["className"];
+const _excluded2 = [
+	"className",
+	"trailing",
+	"wrapperClassName",
+	"placeholder",
+	"aria-label"
+];
+const _excluded3 = ["className", "aria-label"];
+const _excluded4 = ["className"];
+const _excluded5 = ["className", "heading"];
+const _excluded6 = ["className"];
+const _excluded7 = ["className"];
+const _excluded8 = ["className"];
+/** Renders the `Command` component. */
+function Command(_ref) {
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded);
+	return /* @__PURE__ */ jsx(CommandRoot, _objectSpread2(_objectSpread2({ className: cn("bg-surface text-text-primary flex w-full flex-col overflow-hidden rounded-xl", className) }, props), {}, {
+		"data-opt-id": "4FYBW",
+		"data-opt-slug": "command.Command"
+	}));
+}
+/** Renders a Command in a dialog overlay, à la Cmd+K palette. */
+function CommandDialog({ open, onOpenChange, title = "Command Palette", description = "검색 후 Enter 또는 클릭으로 명령을 실행하세요.", className, commandClassName, shouldFilter, filter, children }) {
+	return /* @__PURE__ */ jsx(DialogRoot$1, {
+		open,
+		onOpenChange,
+		"data-opt-id": "DVRSX",
+		"data-opt-slug": "command.CommandDialog",
+		children: /* @__PURE__ */ jsxs(DialogPanel$1, {
+			className: cn("top-[20%] left-1/2 -translate-x-1/2", "w-full max-w-lg overflow-hidden p-0 shadow-2xl", className),
+			children: [
+				/* @__PURE__ */ jsx(DialogHeading$1, {
+					className: "sr-only",
+					children: title
+				}),
+				/* @__PURE__ */ jsx(DialogDescription$1, {
+					className: "sr-only",
+					children: description
+				}),
+				/* @__PURE__ */ jsx(Command, {
+					shouldFilter,
+					filter,
+					className: commandClassName,
+					children
+				})
+			]
+		})
+	});
+}
+/** Renders the `CommandInput` component with a leading search icon. */
+function CommandInput$1(_ref2) {
+	let { className, trailing, wrapperClassName, placeholder, "aria-label": ariaLabel } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "command-input-wrapper",
+		className: cn("border-border-subtle gap-element flex h-12 items-center border-b px-3", wrapperClassName),
+		"data-opt-id": "HB1K3",
+		"data-opt-slug": "command.CommandInput",
+		children: [
+			/* @__PURE__ */ jsx(SearchIcon, {
+				"aria-hidden": true,
+				className: "text-text-tertiary size-4 shrink-0"
+			}),
+			/* @__PURE__ */ jsx(CommandInput, _objectSpread2({
+				className: cn("text-text-primary placeholder:text-text-tertiary flex h-full w-full bg-transparent text-sm outline-none focus-visible:ring-0 focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", className),
+				placeholder,
+				"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : typeof placeholder === "string" ? placeholder : "Command search"
+			}, props)),
+			trailing
+		]
+	});
+}
+/** Renders the `CommandList` component. */
+function CommandList$1(_ref3) {
+	let { className, "aria-label": ariaLabel } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3);
+	return /* @__PURE__ */ jsx(CommandList, _objectSpread2(_objectSpread2({
+		className: cn("max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1", className),
+		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Commands"
+	}, props), {}, {
+		"data-opt-id": "NPXC5",
+		"data-opt-slug": "command.CommandList"
+	}));
+}
+/** Renders the `CommandEmpty` component. */
+function CommandEmpty$1(_ref4) {
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4);
+	return /* @__PURE__ */ jsx(CommandEmpty, _objectSpread2(_objectSpread2({ className: cn("text-text-tertiary py-6 text-center text-sm", className) }, props), {}, {
+		"data-opt-id": "A8BZM",
+		"data-opt-slug": "command.CommandEmpty"
+	}));
+}
+/** Renders the `CommandGroup` component with an optional heading. */
+function CommandGroup$1(_ref5) {
+	let { className, heading } = _ref5, props = _objectWithoutProperties(_ref5, _excluded5);
+	return /* @__PURE__ */ jsx(CommandGroup, _objectSpread2(_objectSpread2({
+		heading: heading != null ? /* @__PURE__ */ jsx("div", {
+			className: "text-text-tertiary px-2 py-1.5 text-xs font-medium",
+			children: heading
+		}) : void 0,
+		className: cn("py-1", className)
+	}, props), {}, {
+		"data-opt-id": "JPK1Y",
+		"data-opt-slug": "command.CommandGroup"
+	}));
+}
+/** Renders the `CommandSeparator` component. */
+function CommandSeparator$1(_ref6) {
+	let { className } = _ref6, props = _objectWithoutProperties(_ref6, _excluded6);
+	return /* @__PURE__ */ jsx(CommandSeparator, _objectSpread2(_objectSpread2({ className: cn("bg-border-subtle -mx-1 my-1 h-px", className) }, props), {}, {
+		"data-opt-id": "10P0E",
+		"data-opt-slug": "command.CommandSeparator"
+	}));
+}
+/** Renders the `CommandItem` component. */
+function CommandItem$1(_ref7) {
+	let { className } = _ref7, props = _objectWithoutProperties(_ref7, _excluded7);
+	return /* @__PURE__ */ jsx(CommandItem, _objectSpread2(_objectSpread2({ className: cn("text-text-primary flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm select-none", "data-[active-item]:bg-accent data-[active-item]:text-accent-fg", "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props), {}, {
+		"data-opt-id": "K674W",
+		"data-opt-slug": "command.CommandItem"
+	}));
+}
+/** Renders the `CommandShortcut` component (right-aligned hint). */
+function CommandShortcut(_ref8) {
+	let { className } = _ref8, props = _objectWithoutProperties(_ref8, _excluded8);
+	return /* @__PURE__ */ jsx("span", _objectSpread2(_objectSpread2({
+		"data-slot": "command-shortcut",
+		className: cn("text-text-tertiary ml-auto text-xs tracking-widest", "data-[active-item]:text-accent-fg/80", className)
+	}, props), {}, {
+		"data-opt-id": "75CQK",
+		"data-opt-slug": "command.CommandShortcut"
+	}));
+}
+//#endregion
+//#region src/shells/command-palette.tsx
+const DEFAULT_LABELS = {
+	title: "Command Palette",
+	description: "검색 후 Enter 또는 클릭으로 명령을 실행하세요.",
+	input: "명령어 검색",
+	placeholder: "명령어를 검색하세요...",
+	list: "명령어 목록",
+	empty: "결과가 없습니다.",
+	escape: "ESC"
+};
+/** Renders the command palette component. */
+function CommandPalette({ commands, open, onOpenChange, onSelect, inline = false, labels, footer, empty, inputTrailing, className }) {
+	const resolvedLabels = _objectSpread2(_objectSpread2({}, DEFAULT_LABELS), labels);
+	const hasCommands = commands.length > 0;
+	const grouped = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const cmd of commands) {
+			var _map$get;
+			const list = (_map$get = map.get(cmd.group)) !== null && _map$get !== void 0 ? _map$get : [];
+			list.push(cmd);
+			map.set(cmd.group, list);
+		}
+		return map;
+	}, [commands]);
+	const handleSelect = (cmdId) => {
+		const cmd = commands.find((c) => c.id === cmdId);
+		if (!cmd) return;
+		onSelect === null || onSelect === void 0 || onSelect(cmd);
+		onOpenChange(false);
+	};
+	const handleInputKeyDown = (e) => {
+		if (e.key === "Escape" && !inline) {
+			e.preventDefault();
+			onOpenChange(false);
+		}
+	};
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(CommandInput$1, {
+			"aria-label": resolvedLabels.input,
+			placeholder: resolvedLabels.placeholder,
+			onKeyDown: handleInputKeyDown,
+			trailing: inputTrailing !== null && inputTrailing !== void 0 ? inputTrailing : !inline ? /* @__PURE__ */ jsx(Kbd, { children: resolvedLabels.escape }) : void 0
+		}),
+		/* @__PURE__ */ jsxs(CommandList$1, {
+			"aria-label": resolvedLabels.list,
+			children: [/* @__PURE__ */ jsx(CommandEmpty$1, { children: empty !== null && empty !== void 0 ? empty : resolvedLabels.empty }), hasCommands ? Array.from(grouped.entries()).map(([group, items]) => /* @__PURE__ */ jsx(CommandGroup$1, {
+				heading: group,
+				children: items.map((cmd) => /* @__PURE__ */ jsxs(CommandItem$1, {
+					value: cmd.id,
+					keywords: [
+						cmd.label,
+						cmd.group,
+						...cmd.shortcut ? [cmd.shortcut] : []
+					],
+					onSelect: handleSelect,
+					children: [/* @__PURE__ */ jsx("span", { children: cmd.label }), cmd.shortcut && /* @__PURE__ */ jsx(CommandShortcut, { children: cmd.shortcut })]
+				}, cmd.id))
+			}, group)) : null]
+		}),
+		footer
+	] });
+	if (inline) {
+		if (!open) return null;
+		return /* @__PURE__ */ jsx(Command, {
+			className: cn("border-border bg-surface w-full max-w-lg border shadow-lg", className),
+			"data-opt-id": "ATTF5",
+			"data-opt-slug": "command-palette.CommandPalette",
+			children: body
+		});
+	}
+	return /* @__PURE__ */ jsx(CommandDialog, {
+		open,
+		onOpenChange,
+		title: resolvedLabels.title,
+		description: resolvedLabels.description,
+		className,
+		"data-opt-id": "ATTF5",
+		"data-opt-slug": "command-palette.CommandPalette",
+		children: body
+	});
+}
+//#endregion
+//#region src/shells/command-palette-trigger.tsx
+/** Renders the command palette trigger component. */
+function CommandPaletteTrigger({ commands, onSelect, labels }) {
+	const [open, setOpen] = useState(false);
+	const handleKeyDown = useCallback((e) => {
+		if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+			e.preventDefault();
+			setOpen(true);
+		}
+	}, []);
+	useEffect(() => {
+		if (commands.length === 0) return;
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [commands.length, handleKeyDown]);
+	if (commands.length === 0) return null;
+	return /* @__PURE__ */ jsx(CommandPalette, {
+		commands,
+		open,
+		onOpenChange: setOpen,
+		onSelect,
+		labels,
+		"data-opt-id": "4FCDB",
+		"data-opt-slug": "command-palette-trigger.CommandPaletteTrigger"
+	});
+}
+//#endregion
+//#region src/shells/dashboard-grid.tsx
+const defaultLabels$18 = { ariaLabel: "대시보드 통계" };
+const MIN_DASHBOARD_COLUMNS = 1;
+const MAX_DASHBOARD_COLUMNS = 12;
+function normalizeDashboardColumns(columns) {
+	if (!Number.isFinite(columns)) return MIN_DASHBOARD_COLUMNS;
+	return Math.min(MAX_DASHBOARD_COLUMNS, Math.max(MIN_DASHBOARD_COLUMNS, Math.floor(columns)));
+}
+/** Renders the dashboard grid component. */
+function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$18), customLabels);
+	const columnCount = normalizeDashboardColumns(columns);
+	const rowStyle = { "--opt-dashboard-grid-columns": `repeat(${columnCount}, minmax(0, 1fr))` };
+	const rows = [];
+	for (let i = 0; i < stats.length; i += columnCount) rows.push(stats.slice(i, i + columnCount));
+	return /* @__PURE__ */ jsx(CompositeProvider, {
+		focusLoop: true,
+		focusWrap: true,
+		"data-opt-id": "BM7NA",
+		"data-opt-slug": "dashboard-grid.DashboardGrid",
+		children: /* @__PURE__ */ jsx(Composite, {
+			role: "grid",
+			"aria-label": labels.ariaLabel,
+			className: "gap-group flex flex-col",
+			children: rows.map((row, ri) => /* @__PURE__ */ jsx(CompositeRow, {
+				className: "gap-group grid grid-cols-1 sm:[grid-template-columns:var(--opt-dashboard-grid-columns)]",
+				style: rowStyle,
+				children: row.map((stat) => /* @__PURE__ */ jsx(CompositeItem, {
+					className: "data-[active-item]:ring-ring data-[active-item]:ring-offset-ring-offset data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-ring-offset rounded-xl outline-none data-[active-item]:ring-2 data-[active-item]:ring-offset-2 data-[focus-visible]:ring-2 data-[focus-visible]:ring-offset-2",
+					render: /* @__PURE__ */ jsx("div", { role: "gridcell" }),
+					children: /* @__PURE__ */ jsx(StatCard, _objectSpread2({}, stat))
+				}, stat.id))
+			}, ri))
+		})
+	});
+}
+//#endregion
+//#region src/shells/search-combobox.tsx
+const defaultLabels$17 = {
+	noResults: "결과가 없습니다.",
+	loading: "Loading…"
+};
+/** Renders the search combobox component. */
+function SearchCombobox({ items, placeholder = "검색...", label = "검색", onSelect, labels: customLabels, async: isAsync = false, onSearch, debounceMs = 300 }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$17), customLabels);
+	const inputId = useId();
+	const [query, setQuery] = useState("");
+	const [asyncResults, setAsyncResults] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const timerRef = useRef(void 0);
+	const searchGenerationRef = useRef(0);
+	const syncMatches = useMemo(() => {
+		if (isAsync) return [];
+		if (!query) return items;
+		return matchSorter(items, query);
+	}, [
+		query,
+		items,
+		isAsync
+	]);
+	const handleInput = (event) => {
+		searchGenerationRef.current += 1;
+		setQuery(event.currentTarget.value);
+	};
+	const handleValueChange = (item) => {
+		searchGenerationRef.current += 1;
+		setQuery(item);
+		onSelect === null || onSelect === void 0 || onSelect(item);
+	};
+	useEffect(() => {
+		const generation = ++searchGenerationRef.current;
+		if (timerRef.current) clearTimeout(timerRef.current);
+		if (!isAsync || !onSearch) {
+			setLoading(false);
+			return;
+		}
+		if (!query) {
+			setAsyncResults([]);
+			setLoading(false);
+			return;
+		}
+		setLoading(true);
+		timerRef.current = setTimeout(async () => {
+			try {
+				const results = await onSearch(query);
+				if (searchGenerationRef.current !== generation) return;
+				setAsyncResults(results);
+			} finally {
+				if (searchGenerationRef.current === generation) setLoading(false);
+			}
+		}, debounceMs);
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, [
+		query,
+		isAsync,
+		onSearch,
+		debounceMs
+	]);
+	const matches = isAsync ? asyncResults : syncMatches;
+	return /* @__PURE__ */ jsx("div", {
+		className: "gap-element flex flex-col",
+		"data-opt-id": "KH4TQ",
+		"data-opt-slug": "search-combobox.SearchCombobox",
+		children: /* @__PURE__ */ jsxs(ComboboxRoot$1, {
+			onValueChange: handleValueChange,
+			children: [
+				/* @__PURE__ */ jsx("label", {
+					htmlFor: inputId,
+					className: OPT_TEXT_LABEL,
+					children: label
+				}),
+				/* @__PURE__ */ jsx(ComboboxInput$1, {
+					id: inputId,
+					placeholder,
+					className: "max-w-xs",
+					"aria-busy": loading || void 0,
+					onInput: handleInput
+				}),
+				/* @__PURE__ */ jsx(ComboboxPopover$1, {
+					className: "max-w-xs",
+					children: isAsync && loading ? /* @__PURE__ */ jsxs("div", {
+						className: "text-text-secondary gap-element flex items-center px-3 py-2 text-sm",
+						role: "status",
+						"aria-live": "polite",
+						"aria-busy": "true",
+						children: [/* @__PURE__ */ jsx(Spinner, {
+							size: "sm",
+							"aria-hidden": "true"
+						}), labels.loading]
+					}) : matches.length === 0 ? /* @__PURE__ */ jsx(ComboboxEmpty, { children: labels.noResults }) : matches.map((item) => /* @__PURE__ */ jsx(ComboboxItem$1, {
+						value: item,
+						children: item
+					}, item))
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/shells/status-select.tsx
+const defaultLabels$16 = {
+	selectLabel: "상태",
+	emptyMessage: "사용 가능한 상태 옵션이 없습니다."
+};
+/** Renders the status select component. */
+function StatusSelect({ options, value: controlledValue, onChange, label, labels: customLabels }) {
+	var _options$0$value, _options$;
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$16), customLabels);
+	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
+	const [internalValue, setInternalValue] = useState((_options$0$value = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value) !== null && _options$0$value !== void 0 ? _options$0$value : "");
+	const value = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
+	const selected = options.find((s) => s.value === value);
+	if (options.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: "gap-element flex flex-col",
+		"data-opt-id": "R46E6",
+		"data-opt-slug": "status-select.StatusSelect",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: OPT_TEXT_LABEL,
+			children: resolvedLabel
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-text-tertiary text-sm",
+			children: labels.emptyMessage
+		})]
+	});
+	const handleChange = (v) => {
+		var _v$;
+		const next = Array.isArray(v) ? (_v$ = v[0]) !== null && _v$ !== void 0 ? _v$ : "" : v;
+		if (onChange) onChange(next);
+		else setInternalValue(next);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "gap-element flex flex-col",
+		"data-opt-id": "R46E6",
+		"data-opt-slug": "status-select.StatusSelect",
+		children: /* @__PURE__ */ jsxs(SelectRoot$1, {
+			value,
+			onValueChange: handleChange,
+			children: [
+				/* @__PURE__ */ jsx(SelectLabel$1, {
+					className: OPT_TEXT_LABEL,
+					children: resolvedLabel
+				}),
+				/* @__PURE__ */ jsxs(SelectTrigger$1, {
+					className: `${OPT_INPUT} max-w-xs items-center justify-between ${OPT_FOCUS}`,
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "gap-element flex items-center",
+						children: [(selected === null || selected === void 0 ? void 0 : selected.color) && /* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full ${selected.color}` }), selected === null || selected === void 0 ? void 0 : selected.label]
+					}), /* @__PURE__ */ jsx("svg", {
+						className: "text-text-tertiary h-4 w-4",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						strokeWidth: 2,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx(SelectPopover$1, {
+					className: `${OPT_SURFACE_POPOVER} ${OPT_ANIMATE_ENTER_EXIT} max-w-xs`,
+					children: options.map((option) => /* @__PURE__ */ jsxs(SelectItem$1, {
+						value: option.value,
+						children: [option.color && /* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full ${option.color}` }), option.label]
+					}, option.value))
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/shells/app-menubar.tsx
+const defaultLabels$15 = { ariaLabel: "Application menu" };
+function MenuSection({ menu }) {
+	return /* @__PURE__ */ jsxs(MenuRoot$1, { children: [/* @__PURE__ */ jsxs(MenuTrigger$1, { children: [menu.label, /* @__PURE__ */ jsx(MenuButtonArrow$1, {})] }), /* @__PURE__ */ jsx(MenuPopover$1, { children: menu.items.map((item, i) => {
+		if (item.type === "separator") return /* @__PURE__ */ jsx(MenuSeparator$1, {}, `sep-${i}`);
+		if (item.type === "checkbox") {
+			var _item$name, _item$value;
+			return /* @__PURE__ */ jsx(MenuItemCheckbox$1, {
+				name: (_item$name = item.name) !== null && _item$name !== void 0 ? _item$name : item.id,
+				value: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item.id,
+				checked: item.checked,
+				onChange: item.onChange,
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "gap-element flex items-center",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "w-4 text-center",
+						children: item.checked ? "✓" : ""
+					}), item.label]
+				})
+			}, item.id);
+		}
+		if (item.type === "radio") {
+			var _item$name2, _item$value2;
+			return /* @__PURE__ */ jsx(MenuItemRadio$1, {
+				name: (_item$name2 = item.name) !== null && _item$name2 !== void 0 ? _item$name2 : "",
+				value: (_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : "",
+				checked: item.checked,
+				onChange: item.onChange,
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "gap-element flex items-center",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "w-4 text-center",
+						children: item.checked ? "●" : ""
+					}), item.label]
+				})
+			}, item.id);
+		}
+		return /* @__PURE__ */ jsxs(MenuItem$1, {
+			onClick: item.onClick,
+			children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.shortcut && /* @__PURE__ */ jsx(Kbd, { children: item.shortcut })]
+		}, item.id);
+	}) })] });
+}
+/** Renders the app menubar component. */
+function AppMenubar({ menus, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$15), customLabels);
+	if (menus.length === 0) return null;
+	return /* @__PURE__ */ jsx(MenubarRoot$1, {
+		"data-opt-id": "BGKHW",
+		"data-opt-slug": "app-menubar.AppMenubar",
+		children: /* @__PURE__ */ jsx(MenubarContainer$1, {
+			"aria-label": labels.ariaLabel,
+			children: menus.map((menu) => /* @__PURE__ */ jsx(MenuSection, { menu }, menu.id))
+		})
+	});
+}
+AppMenubar.displayName = "AppMenubar";
+//#endregion
+//#region src/shells/sidebar-nav.tsx
+const NAV_ID_PREFIX = "sidebar-nav-";
+function domId(id) {
+	return `${NAV_ID_PREFIX}${id}`;
+}
+const sectionStyles = {
+	시작하기: "text-accent",
+	"핵심 개념": "text-info-fg",
+	구축·운영: "text-success-fg",
+	도구: "text-warning-fg",
+	DataGrid: "text-accent",
+	"컴포넌트 · Core": "text-accent",
+	"컴포넌트 · Visuals": "text-success-fg",
+	"컴포넌트 · Shells": "text-warning-fg",
+	"컴포넌트 · Surfaces": "text-info-fg",
+	"기본 컴포넌트": "text-accent",
+	"블록 컴포넌트": "text-info-fg",
+	"조합 컴포넌트": "text-warning-fg",
+	템플릿: "text-text-tertiary",
+	릴리즈: "text-text-tertiary",
+	Primitives: "text-accent",
+	Blocks: "text-info-fg",
+	Compositions: "text-warning-fg",
+	Templates: "text-text-tertiary"
+};
+const defaultSectionStyle = "text-text-secondary";
+const defaultLabels$14 = { ariaLabel: "문서 네비게이션" };
+/** Renders the sidebar nav component. */
+function SidebarNav({ items, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$14), customLabels);
+	const pathname = usePathname();
+	const activeItem = items.find((item) => item.href === pathname);
+	const [activeId, setActiveId] = useState(activeItem ? domId(activeItem.id) : void 0);
+	useEffect(() => {
+		const match = items.find((item) => item.href === pathname);
+		if (match) setActiveId(domId(match.id));
+	}, [pathname, items]);
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(CompositeProvider, {
+		focusLoop: true,
+		orientation: "vertical",
+		activeId,
+		onActiveIdChange: setActiveId,
+		"data-opt-id": "1FZNH",
+		"data-opt-slug": "sidebar-nav.SidebarNav",
+		children: /* @__PURE__ */ jsx(Composite, {
+			role: "navigation",
+			"aria-label": labels.ariaLabel,
+			className: "flex flex-col",
+			children: items.map((item, index) => {
+				var _sectionStyles$item$s, _item$sectionLabel;
+				const isSelected = pathname === item.href;
+				const isFirstItem = index === 0;
+				const sectionTextStyle = item.sectionLabel ? (_sectionStyles$item$s = sectionStyles[item.sectionLabel]) !== null && _sectionStyles$item$s !== void 0 ? _sectionStyles$item$s : defaultSectionStyle : defaultSectionStyle;
+				return /* @__PURE__ */ jsxs("div", { children: [item.separator && /* @__PURE__ */ jsx("div", {
+					className: cn("mb-2 pt-2", !isFirstItem && "mt-7"),
+					children: /* @__PURE__ */ jsx("span", {
+						className: cn("px-2 text-[11px] font-semibold tracking-wider uppercase", sectionTextStyle),
+						children: (_item$sectionLabel = item.sectionLabel) !== null && _item$sectionLabel !== void 0 ? _item$sectionLabel : ""
+					})
+				}), /* @__PURE__ */ jsxs(CompositeItem, {
+					id: domId(item.id),
+					render: /* @__PURE__ */ jsx(Link, {
+						href: item.href,
+						className: cn("group relative block rounded-md px-2 py-1.5 text-[13px] leading-snug outline-none", "transition-all duration-150", !isSelected && ["text-text-secondary", "hover:bg-bg-subtle hover:text-text-primary"], isSelected && ["bg-bg-subtle text-text-primary font-medium"], "data-[active-item]:bg-accent-subtle data-[active-item]:text-accent", "data-[focus-visible]:ring-ring data-[focus-visible]:ring-2", "data-[focus-visible]:ring-offset-ring-offset data-[focus-visible]:ring-offset-2", isSelected && ["data-[active-item]:bg-accent-subtle data-[active-item]:text-accent"])
+					}),
+					children: [/* @__PURE__ */ jsx("span", { className: cn("absolute top-1/2 left-0 h-4 w-0.5 -translate-y-1/2 rounded-full transition-all duration-150", isSelected && "bg-accent", !isSelected && "group-data-[active-item]:bg-accent bg-transparent", "group-data-[focus-visible]:bg-accent") }), /* @__PURE__ */ jsx("span", {
+						className: "pl-2",
+						children: item.label
+					})]
+				})] }, item.id);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/shells/editor-toolbar.tsx
+const defaultLabels$13 = { ariaLabel: "텍스트 편집기 툴바" };
+function ToolbarButtonWithTooltip({ button, active, onAction }) {
+	return /* @__PURE__ */ jsxs(TooltipProvider$1, { children: [/* @__PURE__ */ jsx(TooltipAnchor$1, { children: /* @__PURE__ */ jsx(ToolbarButton$1, {
+		className: `text-text-primary data-[active-item]:bg-bg-subtle data-[focus-visible]:ring-ring rounded-md p-2 transition-colors outline-none data-[focus-visible]:ring-2 ${active ? "bg-bg-muted" : "hover:bg-bg-subtle"}`,
+		onClick: () => onAction === null || onAction === void 0 ? void 0 : onAction(button.id),
+		children: button.icon
+	}) }), /* @__PURE__ */ jsx(Tooltip$1, { children: button.label })] });
+}
+/** Renders the editor toolbar component. */
+function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$13), customLabels);
+	const groups = [];
+	let current = [];
+	for (const btn of buttons) {
+		if (btn.separator) {
+			groups.push(current);
+			current = [];
+		}
+		current.push(btn);
+	}
+	if (current.length) groups.push(current);
+	return /* @__PURE__ */ jsx(ToolbarRoot$1, {
+		"data-opt-id": "Z73K6",
+		"data-opt-slug": "editor-toolbar.EditorToolbar",
+		children: /* @__PURE__ */ jsx(ToolbarContainer$1, {
+			"aria-label": labels.ariaLabel,
+			children: groups.map((group, gi) => /* @__PURE__ */ jsxs("span", {
+				className: "contents",
+				children: [gi > 0 && /* @__PURE__ */ jsx(ToolbarSeparator$1, {}), group.map((item) => {
+					if (item === "separator") return null;
+					const btn = item;
+					return /* @__PURE__ */ jsx(ToolbarButtonWithTooltip, {
+						button: btn,
+						active: activeButtons.includes(btn.id),
+						onAction
+					}, btn.id);
+				})]
+			}, gi))
+		})
+	});
+}
+//#endregion
+//#region src/shells/content-tabs.tsx
+const defaultLabels$12 = {
+	ariaLabel: "콘텐츠 탭",
+	emptyMessage: "표시할 탭이 없습니다."
+};
+/** Renders the content tabs component. */
+function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
+	var _tabs$, _tabs$find;
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$12), customLabels);
+	const [selectedTabId, setSelectedTabId] = useState(defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
+	if (tabs.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "text-text-secondary text-sm",
+		"data-opt-id": "9W97K",
+		"data-opt-slug": "content-tabs.ContentTabs",
+		children: labels.emptyMessage
+	});
+	const handleSelectedTabId = (nextId) => {
+		var _tabs$2;
+		setSelectedTabId(nextId !== null && nextId !== void 0 ? nextId : (_tabs$2 = tabs[0]) === null || _tabs$2 === void 0 ? void 0 : _tabs$2.id);
+	};
+	const activeTab = (_tabs$find = tabs.find((tab) => tab.id === selectedTabId)) !== null && _tabs$find !== void 0 ? _tabs$find : tabs[0];
+	return /* @__PURE__ */ jsxs(TabsRoot$1, {
+		selectedId: selectedTabId,
+		onSelectedIdChange: handleSelectedTabId,
+		"data-opt-id": "9W97K",
+		"data-opt-slug": "content-tabs.ContentTabs",
+		children: [/* @__PURE__ */ jsx(TabList$1, {
+			"aria-label": labels.ariaLabel,
+			children: tabs.map((tab) => /* @__PURE__ */ jsx(Tab$1, {
+				id: tab.id,
+				children: tab.label
+			}, tab.id))
+		}), activeTab && /* @__PURE__ */ jsx(TabPanel$1, {
+			tabId: activeTab.id,
+			children: activeTab.content
+		})]
+	});
+}
+//#endregion
+//#region src/shells/faq-accordion.tsx
+const defaultLabels$11 = {
+	ariaLabel: "자주 묻는 질문",
+	emptyMessage: "등록된 FAQ가 없습니다."
+};
+/** Renders the faq accordion component. */
+function FaqAccordion({ items, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$11), customLabels);
+	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "text-text-secondary text-sm",
+		"data-opt-id": "QRBHV",
+		"data-opt-slug": "faq-accordion.FaqAccordion",
+		children: labels.emptyMessage
+	});
+	return /* @__PURE__ */ jsx(CompositeProvider, {
+		focusLoop: true,
+		orientation: "vertical",
+		"data-opt-id": "QRBHV",
+		"data-opt-slug": "faq-accordion.FaqAccordion",
+		children: /* @__PURE__ */ jsx(Composite, {
+			role: "region",
+			"aria-label": labels.ariaLabel,
+			className: "divide-border-subtle border-border divide-y rounded-lg border",
+			children: items.map((faq) => /* @__PURE__ */ jsx(DisclosureRoot$1, { children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(CompositeItem, {
+				render: /* @__PURE__ */ jsx(DisclosureTrigger$1, {}),
+				children: [faq.question, /* @__PURE__ */ jsx("svg", {
+					className: "text-text-tertiary h-4 w-4 shrink-0 transition-transform [[data-open]>&]:rotate-180",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					strokeWidth: 2,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+					})
+				})]
+			}), /* @__PURE__ */ jsx(DisclosureContent$1, { children: /* @__PURE__ */ jsx("p", {
+				className: "text-text-secondary px-4 pt-2 pb-4 text-sm",
+				children: faq.answer
+			}) })] }) }, faq.id))
+		})
+	});
+}
+//#endregion
+//#region src/shells/settings-form.tsx
+const defaultLabels$10 = {
+	formAriaLabel: "설정 폼",
+	submitButton: "저장",
+	successMessage: "설정이 저장되었습니다."
+};
+/** Renders the settings form component. */
+function SettingsForm({ fields, onSubmit, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$10), customLabels);
+	const [submitted, setSubmitted] = useState(false);
+	const defaultValues = {};
+	for (const field of fields) {
+		var _field$defaultValue;
+		defaultValues[field.name] = (_field$defaultValue = field.defaultValue) !== null && _field$defaultValue !== void 0 ? _field$defaultValue : field.type === "switch" || field.type === "checkbox" ? false : field.type === "tags" ? [] : "";
+	}
+	const form = useFormStore({
+		defaultValues,
+		validate: (values) => {
+			const errors = {};
+			for (const field of fields) {
+				if (field.required) {
+					const value = values[field.name];
+					if (!value || typeof value === "string" && !value.trim()) {
+						var _field$requiredMessag;
+						errors[field.name] = (_field$requiredMessag = field.requiredMessage) !== null && _field$requiredMessag !== void 0 ? _field$requiredMessag : `${field.label}을(를) 입력해주세요.`;
+					}
+				}
+				if (field.validate) {
+					const value = values[field.name];
+					const error = field.validate(value);
+					if (error) errors[field.name] = error;
+				}
+			}
+			return errors;
+		},
+		onSubmit: (values) => {
+			setSubmitted(true);
+			onSubmit === null || onSubmit === void 0 || onSubmit(values);
+		}
+	});
+	if (fields.length === 0) return /* @__PURE__ */ jsx(EmptyState, {
+		title: "설정 항목이 없습니다.",
+		description: "표시할 설정 필드를 추가하면 이 폼이 렌더링됩니다.",
+		"data-opt-id": "9TEEJ",
+		"data-opt-slug": "settings-form.SettingsForm"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gap-group flex flex-col",
+		"data-opt-id": "9TEEJ",
+		"data-opt-slug": "settings-form.SettingsForm",
+		children: [/* @__PURE__ */ jsxs(FormRoot$1, {
+			store: form,
+			"aria-label": labels.formAriaLabel,
+			children: [fields.map((field) => {
+				var _field$type;
+				if (field.visible !== void 0) {
+					const currentValues = form.getValues();
+					if (!(typeof field.visible === "function" ? field.visible(currentValues) : field.visible)) return null;
+				}
+				if (field.type === "tags") {
+					const rawValue = form.getValue(field.name);
+					const tags = Array.isArray(rawValue) ? rawValue : [];
+					return /* @__PURE__ */ jsxs("div", {
+						className: "gap-element flex flex-col",
+						children: [
+							/* @__PURE__ */ jsx(FormLabel$1, {
+								name: field.name,
+								children: field.label
+							}),
+							/* @__PURE__ */ jsx(TagInput, {
+								value: tags,
+								onChange: (next) => form.setValue(field.name, next),
+								placeholder: field.placeholder
+							}),
+							/* @__PURE__ */ jsx(FormError$1, { name: field.name })
+						]
+					}, field.name);
+				}
+				if (field.type === "radio") {
+					var _field$options;
+					return /* @__PURE__ */ jsxs("fieldset", {
+						className: "gap-element flex flex-col",
+						children: [
+							/* @__PURE__ */ jsx("legend", {
+								className: "text-text-primary text-sm font-medium",
+								children: field.label
+							}),
+							/* @__PURE__ */ jsx(FormRadioGroup$1, { children: /* @__PURE__ */ jsx("div", {
+								className: "gap-group flex",
+								children: (_field$options = field.options) === null || _field$options === void 0 ? void 0 : _field$options.map((option) => /* @__PURE__ */ jsxs("label", {
+									className: "text-text-primary gap-element flex items-center text-sm",
+									children: [/* @__PURE__ */ jsx(FormRadio$1, {
+										name: field.name,
+										value: option.value
+									}), option.label]
+								}, option.value))
+							}) }),
+							/* @__PURE__ */ jsx(FormError$1, { name: field.name })
+						]
+					}, field.name);
+				}
+				if (field.type === "checkbox") return /* @__PURE__ */ jsxs("div", {
+					className: "gap-element flex flex-col",
+					children: [/* @__PURE__ */ jsxs("label", {
+						className: "text-text-primary gap-element flex items-center text-sm",
+						children: [/* @__PURE__ */ jsx(FormCheckbox$1, { name: field.name }), /* @__PURE__ */ jsx("span", { children: field.label })]
+					}), /* @__PURE__ */ jsx(FormError$1, { name: field.name })]
+				}, field.name);
+				if (field.type === "textarea") {
+					var _field$rows, _field$resize;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "gap-element flex flex-col",
+						children: [
+							/* @__PURE__ */ jsx(FormLabel$1, {
+								name: field.name,
+								children: field.label
+							}),
+							/* @__PURE__ */ jsx(FormTextarea, {
+								name: field.name,
+								placeholder: field.placeholder,
+								rows: (_field$rows = field.rows) !== null && _field$rows !== void 0 ? _field$rows : 4,
+								resize: (_field$resize = field.resize) !== null && _field$resize !== void 0 ? _field$resize : "vertical",
+								className: field.font === "mono" ? "font-mono text-sm" : void 0
+							}),
+							/* @__PURE__ */ jsx(FormError$1, { name: field.name })
+						]
+					}, field.name);
+				}
+				if (field.type === "select") {
+					var _field$options2;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "gap-element flex flex-col",
+						children: [
+							/* @__PURE__ */ jsx(FormLabel$1, {
+								name: field.name,
+								children: field.label
+							}),
+							/* @__PURE__ */ jsx(FormSelect, {
+								name: field.name,
+								placeholder: field.placeholder,
+								children: /* @__PURE__ */ jsx(FormSelectPopover, { children: (_field$options2 = field.options) === null || _field$options2 === void 0 ? void 0 : _field$options2.map((option) => /* @__PURE__ */ jsx(FormSelectItem, {
+									value: option.value,
+									children: option.label
+								}, option.value)) })
+							}),
+							/* @__PURE__ */ jsx(FormError$1, { name: field.name })
+						]
+					}, field.name);
+				}
+				if (field.type === "switch") return /* @__PURE__ */ jsxs("label", {
+					className: "gap-group flex items-center",
+					children: [/* @__PURE__ */ jsx(FormSwitch$1, { name: field.name }), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-text-primary text-sm font-medium",
+							children: field.label
+						}), field.description && /* @__PURE__ */ jsx("span", {
+							className: "text-text-secondary text-sm",
+							children: field.description
+						})]
+					})]
+				}, field.name);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "gap-element flex flex-col",
+					children: [
+						/* @__PURE__ */ jsx(FormLabel$1, {
+							name: field.name,
+							children: field.label
+						}),
+						/* @__PURE__ */ jsx(FormInput$1, {
+							name: field.name,
+							type: (_field$type = field.type) !== null && _field$type !== void 0 ? _field$type : "text",
+							placeholder: field.placeholder
+						}),
+						/* @__PURE__ */ jsx(FormError$1, { name: field.name })
+					]
+				}, field.name);
+			}), /* @__PURE__ */ jsx(FormSubmit$1, { children: labels.submitButton })]
+		}), submitted && /* @__PURE__ */ jsx("div", {
+			className: "border-success bg-success-subtle text-success-fg rounded-lg border p-3 text-sm",
+			children: labels.successMessage
+		})]
+	});
+}
+//#endregion
+//#region src/shells/deployment-timeline.tsx
+const statusIcon = {
+	success: "●",
+	pending: "◌",
+	running: "⟳",
+	error: "✗",
+	skipped: "○"
+};
+const statusColor = {
+	success: "text-success-fg",
+	pending: OPT_TEXT_TERTIARY,
+	running: "text-accent",
+	error: "text-danger-fg",
+	skipped: "text-text-tertiary"
+};
+const statusBadge$1 = {
+	success: OPT_BADGE_GREEN,
+	pending: OPT_BADGE_NEUTRAL,
+	running: "inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium bg-info-subtle text-info-fg",
+	error: OPT_BADGE_RED,
+	skipped: OPT_BADGE_NEUTRAL
+};
+const statusLabel$1 = {
+	success: "성공",
+	pending: "대기",
+	running: "실행 중",
+	error: "에러",
+	skipped: "건너뜀"
+};
+/** Renders the deployment timeline component. */
+function DeploymentTimeline({ steps, title = "배포 타임라인" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gap-group flex flex-col",
+		"data-opt-id": "XXVQ2",
+		"data-opt-slug": "deployment-timeline.DeploymentTimeline",
+		children: [title && /* @__PURE__ */ jsx("h3", {
+			className: `text-sm font-semibold text-text-primary`,
+			children: title
+		}), /* @__PURE__ */ jsx(CompositeProvider, {
+			focusLoop: true,
+			orientation: "vertical",
+			children: /* @__PURE__ */ jsx(Composite, {
+				role: "list",
+				"aria-label": title,
+				className: "relative",
+				children: steps.map((step, i) => {
+					const isLast = i === steps.length - 1;
+					return /* @__PURE__ */ jsxs(CompositeItem, {
+						className: `group gap-group relative flex w-full scroll-m-2 rounded-lg px-3 py-2 ${OPT_FOCUS} data-[active-item]:bg-accent-subtle`,
+						role: "listitem",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col items-center",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: `text-lg leading-none ${statusColor[step.status]}`,
+								"aria-label": statusLabel$1[step.status],
+								children: statusIcon[step.status]
+							}), !isLast && /* @__PURE__ */ jsx("div", { className: "bg-border-subtle mt-1 w-px flex-1" })]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex-1 pb-3",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "gap-element flex items-center",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: `text-sm font-medium ${OPT_TEXT_PRIMARY}`,
+										children: step.name
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: statusBadge$1[step.status],
+										children: statusLabel$1[step.status]
+									}),
+									step.duration && /* @__PURE__ */ jsx("span", {
+										className: `text-xs text-text-tertiary`,
+										children: step.duration
+									})
+								]
+							}), step.detail && /* @__PURE__ */ jsx("p", {
+								className: `mt-0.5 text-xs text-text-secondary`,
+								children: step.detail
+							})]
+						})]
+					}, step.id);
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/shells/project-switcher.tsx
+const statusDot = {
+	active: OPT_DOT_GREEN,
+	paused: OPT_DOT_YELLOW,
+	error: OPT_DOT_RED
+};
+/** Renders the project switcher component. */
+function ProjectSwitcher({ projects, value, onChange, placeholder = "프로젝트 검색..." }) {
+	const [search, setSearch] = useState("");
+	const matches = useMemo(() => {
+		if (!search) return projects;
+		return matchSorter(projects, search, { keys: ["name", "framework"] });
+	}, [search, projects]);
+	const selected = projects.find((p) => p.id === value);
+	return /* @__PURE__ */ jsx("div", {
+		className: "gap-element flex flex-col",
+		"data-opt-id": "5R3AG",
+		"data-opt-slug": "project-switcher.ProjectSwitcher",
+		children: /* @__PURE__ */ jsxs(ComboboxRoot$1, {
+			onValueChange: setSearch,
+			children: [
+				/* @__PURE__ */ jsx("label", {
+					className: OPT_TEXT_LABEL,
+					children: "프로젝트"
+				}),
+				/* @__PURE__ */ jsx(ComboboxInput$1, {
+					placeholder: selected ? selected.name : placeholder,
+					className: OPT_INPUT
+				}),
+				/* @__PURE__ */ jsxs(ComboboxPopover$1, {
+					className: "max-h-72 overflow-y-auto",
+					children: [matches.length === 0 && /* @__PURE__ */ jsx("p", {
+						className: `py-6 text-center text-sm text-text-secondary`,
+						children: "결과가 없습니다."
+					}), matches.map((project) => /* @__PURE__ */ jsxs(ComboboxItem$1, {
+						value: project.name,
+						onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(project.id),
+						className: `gap-element flex scroll-m-2 items-center ${OPT_ITEM_BASE} ${OPT_ACTIVE_ITEM}`,
+						children: [
+							/* @__PURE__ */ jsx("span", { className: `shrink-0 ${statusDot[project.status]}` }),
+							/* @__PURE__ */ jsx("span", {
+								className: "flex-1 truncate font-medium",
+								children: project.name
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: OPT_BADGE_NEUTRAL,
+								children: project.framework
+							}),
+							project.domain && /* @__PURE__ */ jsx("span", {
+								className: `truncate text-xs text-text-secondary data-[active-item]:text-accent-fg/70`,
+								children: project.domain
+							})
+						]
+					}, project.id))]
+				})
+			]
+		})
+	});
+}
+ProjectSwitcher.displayName = "ProjectSwitcher";
+//#endregion
+//#region src/shells/env-panel.tsx
+const defaultLabels$9 = {
+	varCount: (count) => `${count}개 변수`,
+	envVarsLabel: (env) => `${env} 환경 변수`,
+	secretBadge: "secret"
+};
+const envDot = {
+	Production: OPT_DOT_RED,
+	Preview: OPT_DOT_YELLOW,
+	Development: OPT_DOT_GREEN
+};
+/** Renders the env panel component. */
+function EnvPanel({ groups, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$9), customLabels);
+	return /* @__PURE__ */ jsx("div", {
+		className: `rounded-lg ${OPT_BORDER} divide-y ${OPT_DIVIDER} bg-surface`,
+		"data-opt-id": "ZBDWK",
+		"data-opt-slug": "env-panel.EnvPanel",
+		children: groups.map((group) => {
+			var _envDot$group$env;
+			return /* @__PURE__ */ jsx(DisclosureRoot$1, {
+				defaultOpen: group.env === "Production",
+				children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(DisclosureTrigger$1, {
+					className: OPT_DISCLOSURE_TRIGGER,
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "gap-element flex items-center",
+						children: [
+							/* @__PURE__ */ jsx("span", { className: (_envDot$group$env = envDot[group.env]) !== null && _envDot$group$env !== void 0 ? _envDot$group$env : "bg-bg-muted h-2 w-2 rounded-full" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: group.env
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: `text-xs ${OPT_TEXT_TERTIARY}`,
+								children: labels.varCount(group.vars.length)
+							})
+						]
+					}), /* @__PURE__ */ jsx("svg", {
+						className: "text-text-tertiary h-4 w-4 shrink-0 transition-transform [[data-open]>&]:rotate-180",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						strokeWidth: 2,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+						})
+					})]
+				}), /* @__PURE__ */ jsx(DisclosureContent$1, {
+					className: OPT_DISCLOSURE_CONTENT,
+					children: /* @__PURE__ */ jsx(CompositeProvider, {
+						focusLoop: true,
+						orientation: "vertical",
+						children: /* @__PURE__ */ jsx(Composite, {
+							role: "list",
+							"aria-label": labels.envVarsLabel(group.env),
+							className: "px-4 pb-3",
+							children: group.vars.map((v) => /* @__PURE__ */ jsxs(CompositeItem, {
+								role: "listitem",
+								className: `gap-group flex scroll-m-2 items-center rounded px-2 py-1.5 text-sm ${OPT_FOCUS} data-[active-item]:bg-accent-subtle`,
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: `w-44 shrink-0 truncate font-mono text-xs font-medium ${OPT_TEXT_PRIMARY}`,
+										children: v.key
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: `flex-1 truncate font-mono text-xs ${OPT_TEXT_SECONDARY}`,
+										children: v.isSecret ? "••••••••" : v.value
+									}),
+									v.isSecret && /* @__PURE__ */ jsx("span", {
+										className: OPT_BADGE_NEUTRAL,
+										children: labels.secretBadge
+									})
+								]
+							}, v.key))
+						})
+					})
+				})] })
+			}, group.env);
+		})
+	});
+}
+//#endregion
+//#region src/shells/branch-select.tsx
+const defaultLabels$8 = {
+	selectLabel: "브랜치",
+	emptySelectionLabel: "선택...",
+	emptyMessage: "사용 가능한 브랜치가 없습니다.",
+	defaultBadge: "default"
+};
+/** Renders the branch select component. */
+function BranchSelect({ branches, value: controlledValue, onChange, label, labels: customLabels }) {
+	var _ref, _defaultBranch$name, _branches$, _selected$name;
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$8), customLabels);
+	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
+	const defaultBranch = branches.find((b) => b.isDefault);
+	const [internalValue, setInternalValue] = useState((_ref = (_defaultBranch$name = defaultBranch === null || defaultBranch === void 0 ? void 0 : defaultBranch.name) !== null && _defaultBranch$name !== void 0 ? _defaultBranch$name : (_branches$ = branches[0]) === null || _branches$ === void 0 ? void 0 : _branches$.name) !== null && _ref !== void 0 ? _ref : "");
+	const value = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
+	const selected = branches.find((b) => b.name === value);
+	if (branches.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: "gap-element flex flex-col",
+		"data-opt-id": "7EDEP",
+		"data-opt-slug": "branch-select.BranchSelect",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: OPT_TEXT_LABEL,
+			children: resolvedLabel
+		}), /* @__PURE__ */ jsx("span", {
+			className: OPT_TEXT_TERTIARY,
+			children: labels.emptyMessage
+		})]
+	});
+	const handleChange = (v) => {
+		var _v$;
+		const next = Array.isArray(v) ? (_v$ = v[0]) !== null && _v$ !== void 0 ? _v$ : "" : v;
+		if (onChange) onChange(next);
+		else setInternalValue(next);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "gap-element flex flex-col",
+		"data-opt-id": "7EDEP",
+		"data-opt-slug": "branch-select.BranchSelect",
+		children: /* @__PURE__ */ jsxs(SelectRoot$1, {
+			value,
+			onValueChange: handleChange,
+			children: [
+				/* @__PURE__ */ jsx(SelectLabel$1, {
+					className: OPT_TEXT_LABEL,
+					children: resolvedLabel
+				}),
+				/* @__PURE__ */ jsxs(SelectTrigger$1, {
+					className: `${OPT_INPUT} max-w-xs items-center justify-between gap-1`,
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "gap-element flex items-center truncate",
+						children: [
+							/* @__PURE__ */ jsx("svg", {
+								className: "text-text-tertiary h-4 w-4 shrink-0",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								strokeWidth: 2,
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									d: "M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: (_selected$name = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _selected$name !== void 0 ? _selected$name : labels.emptySelectionLabel
+							}),
+							(selected === null || selected === void 0 ? void 0 : selected.isDefault) && /* @__PURE__ */ jsx("span", {
+								className: OPT_BADGE_BLUE,
+								children: labels.defaultBadge
+							})
+						]
+					}), /* @__PURE__ */ jsx("svg", {
+						className: "text-text-tertiary h-4 w-4 shrink-0",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						strokeWidth: 2,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx(SelectPopover$1, {
+					className: "max-w-xs",
+					children: branches.map((branch) => /* @__PURE__ */ jsxs(SelectItem$1, {
+						value: branch.name,
+						className: `gap-element flex scroll-m-2 items-center ${OPT_ITEM_BASE} ${OPT_ACTIVE_ITEM}`,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "flex-1 truncate",
+								children: branch.name
+							}),
+							branch.isDefault && /* @__PURE__ */ jsx("span", {
+								className: "bg-accent-subtle text-accent data-[active-item]:bg-accent-fg/20 data-[active-item]:text-accent-fg rounded-full px-2 py-0.5 text-[11px] font-medium",
+								children: labels.defaultBadge
+							}),
+							branch.lastCommit && /* @__PURE__ */ jsx("span", {
+								className: `font-mono text-xs text-text-tertiary data-[active-item]:text-accent-fg/60`,
+								children: branch.lastCommit
+							}),
+							branch.author && /* @__PURE__ */ jsx("span", {
+								className: `text-xs text-text-tertiary data-[active-item]:text-accent-fg/60`,
+								children: branch.author
+							})
+						]
+					}, branch.name))
+				})
+			]
+		})
+	});
+}
+BranchSelect.displayName = "BranchSelect";
+//#endregion
+//#region src/shells/domain-table.tsx
+const defaultLabels$7 = {
+	domain: "Domain",
+	status: "Status",
+	ssl: "SSL",
+	redirect: "Redirect",
+	added: "Added",
+	emptyMessage: "No domains configured"
+};
+const statusBadge = {
+	active: OPT_BADGE_GREEN,
+	pending: OPT_BADGE_YELLOW,
+	error: OPT_BADGE_RED
+};
+const sslBadge = {
+	valid: OPT_BADGE_GREEN,
+	pending: OPT_BADGE_YELLOW,
+	expired: OPT_BADGE_RED
+};
+const statusLabel = {
+	active: "Active",
+	pending: "Pending",
+	error: "Error"
+};
+const sslLabel = {
+	valid: "Valid",
+	pending: "Pending",
+	expired: "Expired"
+};
+/** Renders the domain table component. */
+function DomainTable({ domains, title = "도메인", labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$7), customLabels);
+	if (domains.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: "gap-group flex flex-col",
+		"data-opt-id": "A7SRM",
+		"data-opt-slug": "domain-table.DomainTable",
+		children: [title && /* @__PURE__ */ jsx("h3", {
+			className: `text-sm font-semibold text-text-primary`,
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			className: `rounded-lg px-4 py-6 text-sm ${OPT_BORDER} ${OPT_TEXT_SECONDARY} bg-surface`,
+			children: labels.emptyMessage
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gap-group flex flex-col",
+		"data-opt-id": "A7SRM",
+		"data-opt-slug": "domain-table.DomainTable",
+		children: [title && /* @__PURE__ */ jsx("h3", {
+			className: `text-sm font-semibold text-text-primary`,
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			className: `overflow-x-auto rounded-lg ${OPT_BORDER} bg-surface`,
+			children: /* @__PURE__ */ jsx(CompositeProvider, {
+				focusLoop: true,
+				focusWrap: true,
+				children: /* @__PURE__ */ jsxs(Composite, {
+					role: "grid",
+					"aria-label": title,
+					className: "w-full",
+					render: /* @__PURE__ */ jsx("table", {}),
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: "border-border-subtle bg-surface-inset border-b",
+						children: /* @__PURE__ */ jsxs("tr", { children: [
+							/* @__PURE__ */ jsx("th", {
+								className: OPT_TH,
+								children: labels.domain
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: OPT_TH,
+								children: labels.status
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: OPT_TH,
+								children: labels.ssl
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: OPT_TH,
+								children: labels.redirect
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: OPT_TH,
+								children: labels.added
+							})
+						] })
+					}), /* @__PURE__ */ jsx("tbody", {
+						className: `divide-y ${OPT_DIVIDER}`,
+						children: domains.map((d) => {
+							var _d$redirect, _d$addedAt;
+							return /* @__PURE__ */ jsxs(CompositeRow, {
+								render: /* @__PURE__ */ jsx("tr", {}),
+								children: [
+									/* @__PURE__ */ jsx(CompositeItem, {
+										render: /* @__PURE__ */ jsx("td", {
+											className: `${OPT_TD} font-mono font-medium`,
+											role: "gridcell"
+										}),
+										className: OPT_TABLE_ROW_ACTIVE,
+										children: d.domain
+									}),
+									/* @__PURE__ */ jsx(CompositeItem, {
+										render: /* @__PURE__ */ jsx("td", {
+											className: OPT_TD,
+											role: "gridcell"
+										}),
+										className: OPT_TABLE_ROW_ACTIVE,
+										children: /* @__PURE__ */ jsx("span", {
+											className: statusBadge[d.status],
+											children: statusLabel[d.status]
+										})
+									}),
+									/* @__PURE__ */ jsx(CompositeItem, {
+										render: /* @__PURE__ */ jsx("td", {
+											className: OPT_TD,
+											role: "gridcell"
+										}),
+										className: OPT_TABLE_ROW_ACTIVE,
+										children: /* @__PURE__ */ jsx("span", {
+											className: sslBadge[d.ssl],
+											children: sslLabel[d.ssl]
+										})
+									}),
+									/* @__PURE__ */ jsx(CompositeItem, {
+										render: /* @__PURE__ */ jsx("td", {
+											className: OPT_TD,
+											role: "gridcell"
+										}),
+										className: OPT_TABLE_ROW_ACTIVE,
+										children: (_d$redirect = d.redirect) !== null && _d$redirect !== void 0 ? _d$redirect : "—"
+									}),
+									/* @__PURE__ */ jsx(CompositeItem, {
+										render: /* @__PURE__ */ jsx("td", {
+											className: OPT_TD_MUTED,
+											role: "gridcell"
+										}),
+										className: OPT_TABLE_ROW_ACTIVE,
+										children: (_d$addedAt = d.addedAt) !== null && _d$addedAt !== void 0 ? _d$addedAt : "—"
+									})
+								]
+							}, d.domain);
+						})
+					})]
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/shells/data-table.tsx
+const MIN_COLUMN_WIDTH = 40;
+const DEFAULT_COLUMN_RESIZE_MAX = 1200;
+const alignmentClass = {
+	left: "text-left",
+	center: "text-center",
+	right: "text-right"
+};
+function getCellValue(row, accessor) {
+	if (typeof accessor === "function") try {
+		return accessor(row);
+	} catch (_unused) {
+		return "—";
+	}
+	const value = row[accessor];
+	if (value === null || value === void 0 || typeof value === "number" && !Number.isFinite(value)) return "—";
+	return String(value);
+}
+function getRawValue(row, accessor) {
+	if (typeof accessor === "function") return accessor(row);
+	return row[accessor];
+}
+function isMissingSortValue(value) {
+	return value == null || typeof value === "number" && !Number.isFinite(value);
+}
+function compareSortValues(aVal, bVal, dir) {
+	const aMissing = isMissingSortValue(aVal);
+	const bMissing = isMissingSortValue(bVal);
+	if (aMissing && bMissing) return 0;
+	if (aMissing) return 1;
+	if (bMissing) return -1;
+	const cmp = typeof aVal === "number" && typeof bVal === "number" ? aVal - bVal : String(aVal).localeCompare(String(bVal));
+	return dir === "desc" ? -cmp : cmp;
+}
+function clampPercent(ratio) {
+	if (!Number.isFinite(ratio)) return 0;
+	return Math.min(100, Math.max(0, Math.round(ratio * 100)));
+}
+function getResizeHandleValue(currentWidth, configuredWidth) {
+	if (typeof currentWidth === "number" && Number.isFinite(currentWidth)) return Math.max(MIN_COLUMN_WIDTH, Math.round(currentWidth));
+	const pxWidth = configuredWidth === null || configuredWidth === void 0 ? void 0 : configuredWidth.trim().match(/^(\d+(?:\.\d+)?)px$/);
+	if (pxWidth) return Math.max(MIN_COLUMN_WIDTH, Math.round(Number(pxWidth[1])));
+	return MIN_COLUMN_WIDTH;
+}
+function DataTableProgressBar({ value, barColor, label }) {
+	const percent = clampPercent(value);
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-bg-subtle mt-1 h-1.5 w-full overflow-hidden rounded-full",
+		role: "progressbar",
+		"aria-valuenow": percent,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuetext": `${percent}%`,
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("h-full rounded-full transition-all", barColor),
+			style: { width: `${percent}%` }
+		})
+	});
+}
+/** Renders the data table component. */
+function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowClick, emptyMessage = "No data available", activeRowId, sortable = false, selectable = false, selectedKeys, onSelectionChange, expandable = false, renderExpanded, pageSize, stickyHeader = false, resizableColumns = false, onSort: onSortExternal, className }) {
+	const [sortCol, setSortCol] = useState(null);
+	const [sortDir, setSortDir] = useState(null);
+	const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
+	const [page, setPage] = useState(0);
+	const [colWidths, setColWidths] = useState({});
+	const sortedData = useMemo(() => {
+		if (!sortable || !sortCol || !sortDir) return data;
+		const col = columns.find((c) => c.id === sortCol);
+		if (!col) return data;
+		return [...data].sort((a, b) => {
+			return compareSortValues(getRawValue(a, col.accessor), getRawValue(b, col.accessor), sortDir);
+		});
+	}, [
+		data,
+		sortable,
+		sortCol,
+		sortDir,
+		columns
+	]);
+	const totalPages = pageSize ? Math.ceil(sortedData.length / pageSize) : 1;
+	const pagedData = pageSize ? sortedData.slice(page * pageSize, (page + 1) * pageSize) : sortedData;
+	const handleSort = useCallback((colId) => {
+		if (!sortable) return;
+		let nextDir;
+		if (sortCol === colId) {
+			nextDir = sortDir === "asc" ? "desc" : sortDir === "desc" ? null : "asc";
+			setSortDir(nextDir);
+			if (nextDir === null) setSortCol(null);
+		} else {
+			setSortCol(colId);
+			setSortDir("asc");
+			nextDir = "asc";
+		}
+		setPage(0);
+		if (onSortExternal) onSortExternal(colId, nextDir);
+	}, [
+		sortable,
+		sortCol,
+		sortDir,
+		onSortExternal
+	]);
+	const toggleExpand = useCallback((key) => {
+		setExpandedKeys((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+	}, []);
+	const selected = selectedKeys !== null && selectedKeys !== void 0 ? selectedKeys : [];
+	const selectedSet = useMemo(() => new Set(selectedKeys !== null && selectedKeys !== void 0 ? selectedKeys : []), [selectedKeys]);
+	const allKeys = data.map(keyExtractor);
+	const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));
+	const toggleSelectAll = useCallback(() => {
+		if (!onSelectionChange) return;
+		onSelectionChange(allSelected ? [] : allKeys);
+	}, [
+		allSelected,
+		allKeys,
+		onSelectionChange
+	]);
+	const toggleSelectRow = useCallback((key) => {
+		if (!onSelectionChange) return;
+		onSelectionChange(selectedSet.has(key) ? selected.filter((k) => k !== key) : [...selected, key]);
+	}, [
+		selected,
+		selectedSet,
+		onSelectionChange
+	]);
+	const sortIndicator = (colId) => {
+		if (sortCol !== colId) return null;
+		return sortDir === "asc" ? " ▲" : sortDir === "desc" ? " ▼" : null;
+	};
+	const colCount = columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("gap-group flex flex-col", className),
+		"data-opt-id": "J1KN4",
+		"data-opt-slug": "data-table.DataTable",
+		children: [
+			title && /* @__PURE__ */ jsx("h3", {
+				className: cn("text-sm font-semibold", "text-text-primary"),
+				children: title
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("overflow-x-auto rounded-lg", OPT_BORDER, "bg-surface"),
+				children: data.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: cn("px-4 py-8 text-center text-sm", OPT_TEXT_SECONDARY),
+					children: emptyMessage
+				}) : /* @__PURE__ */ jsx(CompositeProvider, {
+					focusLoop: true,
+					focusWrap: true,
+					children: /* @__PURE__ */ jsxs(Composite, {
+						role: "grid",
+						"aria-label": title,
+						className: "w-full",
+						render: /* @__PURE__ */ jsx("table", {}),
+						children: [/* @__PURE__ */ jsx("thead", {
+							className: cn("border-border-subtle bg-surface-inset border-b", stickyHeader && "sticky top-0 z-10"),
+							children: /* @__PURE__ */ jsxs("tr", { children: [
+								selectable && /* @__PURE__ */ jsx("th", {
+									className: cn("px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-tertiary", "w-10"),
+									children: /* @__PURE__ */ jsx(Checkbox, {
+										checked: allSelected,
+										onChange: toggleSelectAll,
+										"aria-label": "Select all"
+									})
+								}),
+								expandable && /* @__PURE__ */ jsx("th", { className: cn("px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-tertiary", "w-10") }),
+								columns.map((col) => {
+									var _col$align;
+									const isSortable = sortable && col.sortable !== false;
+									const resizeValue = getResizeHandleValue(colWidths[col.id], col.width);
+									const resizeMax = Math.max(DEFAULT_COLUMN_RESIZE_MAX, resizeValue);
+									return /* @__PURE__ */ jsxs("th", {
+										className: cn(OPT_TH, "relative", alignmentClass[(_col$align = col.align) !== null && _col$align !== void 0 ? _col$align : "left"], isSortable && "hover:text-text-primary cursor-pointer select-none", isSortable && "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+										style: { width: colWidths[col.id] || col.width || void 0 },
+										onClick: isSortable ? () => handleSort(col.id) : void 0,
+										onKeyDown: (event) => {
+											if (!isSortable || event.key !== "Enter" && event.key !== " ") return;
+											event.preventDefault();
+											handleSort(col.id);
+										},
+										tabIndex: isSortable ? 0 : void 0,
+										"aria-sort": sortCol === col.id && sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
+										children: [/* @__PURE__ */ jsxs("span", {
+											className: "flex items-center",
+											children: [col.header, sortIndicator(col.id)]
+										}), resizableColumns && /* @__PURE__ */ jsx("span", {
+											role: "separator",
+											"aria-orientation": "vertical",
+											"aria-label": `Resize ${col.header}`,
+											"aria-valuemin": MIN_COLUMN_WIDTH,
+											"aria-valuemax": resizeMax,
+											"aria-valuenow": resizeValue,
+											"aria-valuetext": `${resizeValue} pixels`,
+											tabIndex: 0,
+											className: "bg-border absolute top-0 right-0 bottom-0 w-1 cursor-col-resize opacity-0 hover:opacity-100",
+											onKeyDown: (e) => {
+												if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End") return;
+												e.preventDefault();
+												e.stopPropagation();
+												if (e.key === "Home" || e.key === "End") {
+													setColWidths((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [col.id]: e.key === "Home" ? MIN_COLUMN_WIDTH : resizeMax }));
+													return;
+												}
+												const delta = e.shiftKey ? 40 : 10;
+												const direction = e.key === "ArrowRight" ? 1 : -1;
+												setColWidths((prev) => {
+													const current = getResizeHandleValue(prev[col.id], col.width);
+													return _objectSpread2(_objectSpread2({}, prev), {}, { [col.id]: Math.max(MIN_COLUMN_WIDTH, current + direction * delta) });
+												});
+											},
+											onMouseDown: (e) => {
+												e.preventDefault();
+												e.stopPropagation();
+												const startX = e.clientX;
+												const startW = e.target.parentElement.offsetWidth;
+												const onMove = (ev) => {
+													const newW = Math.max(MIN_COLUMN_WIDTH, startW + ev.clientX - startX);
+													setColWidths((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [col.id]: newW }));
+												};
+												const onUp = () => {
+													document.removeEventListener("mousemove", onMove);
+													document.removeEventListener("mouseup", onUp);
+												};
+												document.addEventListener("mousemove", onMove);
+												document.addEventListener("mouseup", onUp);
+											}
+										})]
+									}, col.id);
+								})
+							] })
+						}), /* @__PURE__ */ jsx("tbody", {
+							className: cn("divide-y", OPT_DIVIDER),
+							children: pagedData.map((row) => {
+								const key = keyExtractor(row);
+								const isExpanded = expandedKeys.has(key);
+								const isSelected = selectedSet.has(key);
+								return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(CompositeRow, {
+									render: /* @__PURE__ */ jsx("tr", {
+										className: cn(onRowClick ? "cursor-pointer" : void 0, (isSelected || activeRowId === key) && "bg-accent-subtle"),
+										onClick: onRowClick ? () => onRowClick(row) : void 0
+									}),
+									children: [
+										selectable && /* @__PURE__ */ jsx(CompositeItem, {
+											render: /* @__PURE__ */ jsx("td", {
+												className: cn("px-3 py-2.5 text-sm text-text-primary whitespace-nowrap", "w-10"),
+												role: "gridcell"
+											}),
+											className: "outline-none data-[active-item]:bg-accent-subtle data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1",
+											children: /* @__PURE__ */ jsx(Checkbox, {
+												checked: isSelected,
+												onChange: () => toggleSelectRow(key),
+												"aria-label": `Select row ${key}`
+											})
+										}),
+										expandable && /* @__PURE__ */ jsx(CompositeItem, {
+											render: /* @__PURE__ */ jsx("td", {
+												className: cn("px-3 py-2.5 text-sm text-text-primary whitespace-nowrap", "w-10"),
+												role: "gridcell"
+											}),
+											className: "outline-none data-[active-item]:bg-accent-subtle data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1",
+											children: /* @__PURE__ */ jsx("button", {
+												type: "button",
+												onClick: (e) => {
+													e.stopPropagation();
+													toggleExpand(key);
+												},
+												className: cn("rounded p-0.5 text-sm transition-transform", "text-text-secondary", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", isExpanded && "rotate-90"),
+												"aria-expanded": isExpanded,
+												"aria-label": `${isExpanded ? "Collapse" : "Expand"} row ${key}`,
+												children: "▶"
+											})
+										}),
+										columns.map((col, colIndex) => {
+											var _col$align2, _col$barColor;
+											return /* @__PURE__ */ jsxs(CompositeItem, {
+												render: /* @__PURE__ */ jsx("td", {
+													className: cn(OPT_TD, alignmentClass[(_col$align2 = col.align) !== null && _col$align2 !== void 0 ? _col$align2 : "left"], colIndex === 0 ? "font-medium" : ""),
+													role: "gridcell"
+												}),
+												className: OPT_TABLE_ROW_ACTIVE,
+												onKeyDown: (event) => {
+													if (!onRowClick || event.target !== event.currentTarget || event.key !== "Enter" && event.key !== " ") return;
+													event.preventDefault();
+													onRowClick(row);
+												},
+												children: [getCellValue(row, col.accessor), col.bar && /* @__PURE__ */ jsx(DataTableProgressBar, {
+													value: col.bar(row),
+													barColor: (_col$barColor = col.barColor) !== null && _col$barColor !== void 0 ? _col$barColor : "bg-accent",
+													label: col.header
+												})]
+											}, col.id);
+										})
+									]
+								}), expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+									colSpan: colCount,
+									className: "border-border-subtle bg-surface-inset border-t px-4 py-3",
+									children: renderExpanded(row)
+								}) })] }, key);
+							})
+						})]
+					})
+				})
+			}),
+			pageSize && totalPages > 1 && /* @__PURE__ */ jsx(Pagination, {
+				totalItems: sortedData.length,
+				pageSize,
+				currentPage: page + 1,
+				onPageChange: (p) => setPage(p - 1)
+			})
+		]
+	});
+}
+//#endregion
+//#region src/shells/notification-toast.tsx
+let toastCounter = 0;
+let toasts = [];
+const listeners = /* @__PURE__ */ new Set();
+function emitChange() {
+	for (const l of listeners) l();
+}
+const toastStore = {
+	subscribe(listener) {
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	},
+	getSnapshot() {
+		return toasts;
+	},
+	add(input) {
+		var _input$variant;
+		const id = `toast-${++toastCounter}`;
+		toasts = [...toasts, _objectSpread2({
+			id,
+			variant: (_input$variant = input.variant) !== null && _input$variant !== void 0 ? _input$variant : "info"
+		}, input)];
+		emitChange();
+		return id;
+	},
+	dismiss(id) {
+		const next = toasts.filter((t) => t.id !== id);
+		if (next.length !== toasts.length) {
+			toasts = next;
+			emitChange();
+		}
+	},
+	clear() {
+		if (toasts.length) {
+			toasts = [];
+			emitChange();
+		}
+	}
+};
+function makeVariant(variant) {
+	return (message, options) => toastStore.add(_objectSpread2(_objectSpread2({}, options), {}, {
+		message,
+		variant
+	}));
+}
+/**
+* Imperative toast API. Call from anywhere (no hook required):
+* `toast.success("Saved")`, `toast.error("Failed", { title: "Oops" })`,
+* `toast.dismiss(id)`, `toast.clear()`. Requires a mounted `ToastProvider`.
+*/
+const toast = Object.assign((options) => toastStore.add(options), {
+	info: makeVariant("info"),
+	success: makeVariant("success"),
+	warning: makeVariant("warning"),
+	error: makeVariant("error"),
+	dismiss: (id) => toastStore.dismiss(id),
+	clear: () => toastStore.clear()
+});
+const ToastContext = createContext(null);
+const positionStyles = {
+	"top-right": "top-4 right-4",
+	"top-left": "top-4 left-4",
+	"bottom-right": "bottom-4 right-4",
+	"bottom-left": "bottom-4 left-4"
+};
+/** Renders the toast provider component. */
+function ToastProvider({ children, position = "top-right", defaultDuration = 5e3, stackLimit = 5 }) {
+	const allToasts = useSyncExternalStore(toastStore.subscribe, toastStore.getSnapshot, toastStore.getSnapshot);
+	const visibleToasts = allToasts.length > stackLimit ? allToasts.slice(-stackLimit) : allToasts;
+	const addToast = useCallback((t) => toastStore.add(t), []);
+	const removeToast = useCallback((id) => toastStore.dismiss(id), []);
+	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
+		value: {
+			toasts: visibleToasts,
+			addToast,
+			removeToast
+		},
+		children: [children, /* @__PURE__ */ jsx("div", {
+			className: cn("gap-element fixed z-50 flex flex-col", positionStyles[position]),
+			role: "region",
+			"aria-label": "Notifications",
+			"data-opt-id": "M0KTS",
+			"data-opt-slug": "notification-toast.ToastProvider",
+			children: visibleToasts.map((t) => /* @__PURE__ */ jsx(NotificationToast, {
+				toast: t,
+				defaultDuration,
+				onDismiss: () => toastStore.dismiss(t.id)
+			}, t.id))
+		})]
+	});
+}
+/** Provides toast. */
+function useToast() {
+	const context = useContext(ToastContext);
+	if (!context) throw new Error("useToast must be used within a ToastProvider");
+	return context;
+}
+/** Renders the notification toast component. */
+function NotificationToast({ toast, onDismiss, defaultDuration = 5e3 }) {
+	var _toast$duration;
+	const duration = (_toast$duration = toast.duration) !== null && _toast$duration !== void 0 ? _toast$duration : defaultDuration;
+	const isUrgent = toast.variant === "error" || toast.variant === "warning";
+	const onDismissRef = useRef(onDismiss);
+	const dismissedRef = useRef(false);
+	const timerStartedAtRef = useRef(null);
+	const remainingDurationRef = useRef(duration);
+	const [paused, setPaused] = useState(false);
+	useEffect(() => {
+		onDismissRef.current = onDismiss;
+	}, [onDismiss]);
+	const dismissOnce = useCallback(() => {
+		if (dismissedRef.current) return;
+		dismissedRef.current = true;
+		onDismissRef.current();
+	}, []);
+	useEffect(() => {
+		dismissedRef.current = false;
+		remainingDurationRef.current = duration;
+	}, [toast.id, duration]);
+	useEffect(() => {
+		if (!duration || duration <= 0 || paused || dismissedRef.current) return;
+		timerStartedAtRef.current = Date.now();
+		const timer = setTimeout(() => {
+			dismissOnce();
+		}, remainingDurationRef.current);
+		return () => {
+			clearTimeout(timer);
+			if (timerStartedAtRef.current !== null) {
+				const elapsed = Date.now() - timerStartedAtRef.current;
+				remainingDurationRef.current = Math.max(0, remainingDurationRef.current - elapsed);
+				timerStartedAtRef.current = null;
+			}
+		};
+	}, [
+		dismissOnce,
+		duration,
+		paused
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "animate-in slide-in-from-right-full fade-in w-80 duration-200",
+		role: isUrgent ? "alert" : "status",
+		"aria-live": isUrgent ? "assertive" : "polite",
+		"aria-atomic": "true",
+		onMouseEnter: () => setPaused(true),
+		onMouseLeave: () => setPaused(false),
+		onFocus: () => setPaused(true),
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) setPaused(false);
+		},
+		"data-opt-id": "26YVM",
+		"data-opt-slug": "notification-toast.NotificationToast",
+		children: /* @__PURE__ */ jsxs(Alert, {
+			variant: toast.variant,
+			title: toast.title,
+			dismissible: true,
+			onDismiss: dismissOnce,
+			children: [toast.message, toast.actions && toast.actions.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "gap-element mt-2 flex",
+				children: toast.actions.map((action) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: action.onClick,
+					className: "text-xs font-medium underline hover:no-underline",
+					children: action.label
+				}, action.label))
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/shells/failure-list.tsx
+const defaultLabels$6 = {
+	title: "최근 실패",
+	emptyMessage: "실패 항목이 없습니다",
+	moreItems: "{count}개 더 보기",
+	severityLabels: {
+		critical: "심각",
+		error: "오류",
+		warning: "경고"
+	},
+	timeAgo: {
+		justNow: "방금 전",
+		minutesAgo: "{minutes}분 전",
+		hoursAgo: "{hours}시간 전",
+		daysAgo: "{days}일 전"
+	}
+};
+const severityVariant = {
+	critical: "error",
+	error: "error",
+	warning: "warning"
+};
+const severityBorder = {
+	critical: "border-l-2 border-l-danger",
+	error: "border-l-2 border-l-danger",
+	warning: "border-l-2 border-l-warning"
+};
+function formatRelativeTime(timestamp, timeLabels, locale) {
+	const now = /* @__PURE__ */ new Date();
+	const date = new Date(timestamp);
+	const diffMs = now.getTime() - date.getTime();
+	const diffMins = Math.floor(diffMs / 6e4);
+	const diffHours = Math.floor(diffMs / 36e5);
+	const diffDays = Math.floor(diffMs / 864e5);
+	if (diffMins < 1) return timeLabels.justNow;
+	if (diffMins < 60) return timeLabels.minutesAgo.replace("{minutes}", String(diffMins));
+	if (diffHours < 24) return timeLabels.hoursAgo.replace("{hours}", String(diffHours));
+	if (diffDays < 7) return timeLabels.daysAgo.replace("{days}", String(diffDays));
+	return date.toLocaleDateString(locale);
+}
+function groupBy(items, key) {
+	const map = /* @__PURE__ */ new Map();
+	for (const item of items) {
+		const k = key(item);
+		const existing = map.get(k);
+		if (existing) existing.push(item);
+		else map.set(k, [item]);
+	}
+	return map;
+}
+function FailureItemRow({ failure, isLast, onFailureClick, renderActions, mergedSeverityLabels, mergedTimeAgo, locale }) {
+	const itemId = `failure-${failure.id}`;
+	const handleKeyDown = (event) => {
+		if (!onFailureClick) return;
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		onFailureClick(failure);
+	};
+	return /* @__PURE__ */ jsxs(CompositeItem, {
+		render: /* @__PURE__ */ jsx("article", {}),
+		role: "article",
+		"aria-labelledby": itemId,
+		className: cn("group gap-group relative flex w-full items-start p-3", OPT_FOCUS_VISIBLE, "data-[active-item]:bg-accent-subtle", onFailureClick && "cursor-pointer", !isLast && "border-border-subtle border-b", severityBorder[failure.severity]),
+		onClick: () => onFailureClick === null || onFailureClick === void 0 ? void 0 : onFailureClick(failure),
+		onKeyDown: handleKeyDown,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "gap-element flex items-center",
+					children: [/* @__PURE__ */ jsx(Badge, {
+						variant: severityVariant[failure.severity],
+						size: "sm",
+						children: mergedSeverityLabels[failure.severity]
+					}), /* @__PURE__ */ jsx("span", {
+						id: itemId,
+						className: `text-sm font-medium ${OPT_TEXT_PRIMARY} truncate`,
+						children: failure.title
+					})]
+				}),
+				failure.message && /* @__PURE__ */ jsx("p", {
+					className: `mt-1 text-xs text-text-secondary line-clamp-2`,
+					children: failure.message
+				}),
+				/* @__PURE__ */ jsx("time", {
+					dateTime: failure.timestamp,
+					className: `mt-1 block text-xs ${OPT_TEXT_TERTIARY}`,
+					children: formatRelativeTime(failure.timestamp, mergedTimeAgo, locale)
+				})
+			]
+		}), renderActions && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center gap-1",
+			children: renderActions(failure)
+		})]
+	}, failure.id);
+}
+/** Renders the failure list component. */
+function FailureList({ failures, title, maxItems, grouped = false, onFailureClick, onShowMore, labels: customLabels, locale = "ko-KR", loading = false, renderActions, className }) {
+	var _customLabels$timeAgo, _customLabels$timeAgo2, _customLabels$timeAgo3, _customLabels$timeAgo4, _customLabels$timeAgo5, _customLabels$timeAgo6, _customLabels$timeAgo7, _customLabels$timeAgo8, _customLabels$severit, _customLabels$severit2, _customLabels$severit3, _customLabels$severit4, _customLabels$severit5, _customLabels$severit6, _customLabels$title, _customLabels$emptyMe, _customLabels$moreIte;
+	const mergedTimeAgo = {
+		justNow: (_customLabels$timeAgo = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo2 = customLabels.timeAgo) === null || _customLabels$timeAgo2 === void 0 ? void 0 : _customLabels$timeAgo2.justNow) !== null && _customLabels$timeAgo !== void 0 ? _customLabels$timeAgo : defaultLabels$6.timeAgo.justNow,
+		minutesAgo: (_customLabels$timeAgo3 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo4 = customLabels.timeAgo) === null || _customLabels$timeAgo4 === void 0 ? void 0 : _customLabels$timeAgo4.minutesAgo) !== null && _customLabels$timeAgo3 !== void 0 ? _customLabels$timeAgo3 : defaultLabels$6.timeAgo.minutesAgo,
+		hoursAgo: (_customLabels$timeAgo5 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo6 = customLabels.timeAgo) === null || _customLabels$timeAgo6 === void 0 ? void 0 : _customLabels$timeAgo6.hoursAgo) !== null && _customLabels$timeAgo5 !== void 0 ? _customLabels$timeAgo5 : defaultLabels$6.timeAgo.hoursAgo,
+		daysAgo: (_customLabels$timeAgo7 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo8 = customLabels.timeAgo) === null || _customLabels$timeAgo8 === void 0 ? void 0 : _customLabels$timeAgo8.daysAgo) !== null && _customLabels$timeAgo7 !== void 0 ? _customLabels$timeAgo7 : defaultLabels$6.timeAgo.daysAgo
+	};
+	const mergedSeverityLabels = {
+		critical: (_customLabels$severit = customLabels === null || customLabels === void 0 || (_customLabels$severit2 = customLabels.severityLabels) === null || _customLabels$severit2 === void 0 ? void 0 : _customLabels$severit2.critical) !== null && _customLabels$severit !== void 0 ? _customLabels$severit : defaultLabels$6.severityLabels.critical,
+		error: (_customLabels$severit3 = customLabels === null || customLabels === void 0 || (_customLabels$severit4 = customLabels.severityLabels) === null || _customLabels$severit4 === void 0 ? void 0 : _customLabels$severit4.error) !== null && _customLabels$severit3 !== void 0 ? _customLabels$severit3 : defaultLabels$6.severityLabels.error,
+		warning: (_customLabels$severit5 = customLabels === null || customLabels === void 0 || (_customLabels$severit6 = customLabels.severityLabels) === null || _customLabels$severit6 === void 0 ? void 0 : _customLabels$severit6.warning) !== null && _customLabels$severit5 !== void 0 ? _customLabels$severit5 : defaultLabels$6.severityLabels.warning
+	};
+	const labels = {
+		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$6.title,
+		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$6.emptyMessage,
+		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$6.moreItems
+	};
+	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
+	const allItems = maxItems ? failures.slice(0, maxItems) : failures;
+	const remainingCount = maxItems ? Math.max(0, failures.length - maxItems) : 0;
+	const rowProps = {
+		onFailureClick,
+		renderActions,
+		mergedSeverityLabels,
+		mergedTimeAgo,
+		locale
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		"data-opt-id": "ZAM3R",
+		"data-opt-slug": "failure-list.FailureList",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "gap-group flex flex-col",
+			children: [displayTitle && /* @__PURE__ */ jsx("h3", {
+				className: `text-sm font-semibold text-text-primary`,
+				children: displayTitle
+			}), failures.length === 0 ? /* @__PURE__ */ jsx("div", {
+				role: "status",
+				className: `py-8 text-center text-sm ${OPT_TEXT_SECONDARY}`,
+				children: labels.emptyMessage
+			}) : /* @__PURE__ */ jsx(CompositeProvider, {
+				focusLoop: true,
+				orientation: "vertical",
+				children: /* @__PURE__ */ jsx(Composite, {
+					role: "feed",
+					"aria-label": displayTitle,
+					"aria-busy": loading,
+					className: `rounded-lg ${OPT_BORDER} bg-surface`,
+					children: grouped ? renderGrouped(allItems, remainingCount, rowProps, labels, onShowMore) : renderFlat(allItems, remainingCount, rowProps, labels, onShowMore)
+				})
+			})]
+		})
+	});
+}
+function renderFlat(items, remainingCount, rowProps, labels, onShowMore) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [items.map((failure, index) => /* @__PURE__ */ jsx(FailureItemRow, _objectSpread2({
+		failure,
+		isLast: index === items.length - 1 && remainingCount === 0
+	}, rowProps), failure.id)), remainingCount > 0 && /* @__PURE__ */ jsx(CompositeItem, {
+		render: /* @__PURE__ */ jsx("button", { type: "button" }),
+		onClick: onShowMore,
+		className: `border-border-subtle w-full border-t p-3 text-center text-xs font-medium text-text-secondary outline-none data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1 hover:text-accent data-[active-item]:bg-accent-subtle transition-colors`,
+		"aria-label": `${remainingCount}개의 실패 더 보기`,
+		children: labels.moreItems.replace("{count}", String(remainingCount))
+	})] });
+}
+function renderGrouped(items, remainingCount, rowProps, labels, onShowMore) {
+	const groups = groupBy(items, (f) => {
+		var _f$group;
+		return (_f$group = f.group) !== null && _f$group !== void 0 ? _f$group : "";
+	});
+	const groupEntries = Array.from(groups.entries());
+	return /* @__PURE__ */ jsxs(Fragment, { children: [groupEntries.map(([groupName, groupItems], groupIndex) => {
+		const isLastGroup = groupIndex === groupEntries.length - 1 && remainingCount === 0;
+		return /* @__PURE__ */ jsxs("div", { children: [groupName && /* @__PURE__ */ jsx("div", {
+			className: cn(`px-3 py-2 text-xs font-semibold text-text-tertiary tracking-wider uppercase`, groupIndex > 0 && "border-border-subtle border-t"),
+			children: groupName
+		}), groupItems.map((failure, index) => /* @__PURE__ */ jsx(FailureItemRow, _objectSpread2({
+			failure,
+			isLast: isLastGroup && index === groupItems.length - 1
+		}, rowProps), failure.id))] }, groupName || "__ungrouped__");
+	}), remainingCount > 0 && /* @__PURE__ */ jsx(CompositeItem, {
+		render: /* @__PURE__ */ jsx("button", { type: "button" }),
+		onClick: onShowMore,
+		className: `border-border-subtle w-full border-t p-3 text-center text-xs font-medium text-text-secondary outline-none data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1 hover:text-accent data-[active-item]:bg-accent-subtle transition-colors`,
+		"aria-label": `${remainingCount}개의 실패 더 보기`,
+		children: labels.moreItems.replace("{count}", String(remainingCount))
+	})] });
+}
+//#endregion
+//#region src/shells/key-value-editor.tsx
+const defaultLabels$5 = {
+	keyPlaceholder: "키",
+	valuePlaceholder: "값",
+	addButton: "추가",
+	removeAriaLabel: "항목 삭제",
+	toggleSecretAriaLabel: "비밀값 토글",
+	emptyMessage: "항목이 없습니다. 추가 버튼을 눌러주세요."
+};
+let idCounter = 0;
+function generateId() {
+	return `kv-${++idCounter}`;
+}
+/** Renders the key value editor component. */
+function KeyValueEditor({ value: controlledValue, defaultValue, onChange, showSecretToggle = false, maxEntries, readOnly = false, labels: customLabels, renderActions, validateKey, className }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$5), customLabels);
+	const [internalEntries, setInternalEntries] = useState(() => defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
+	const entries = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalEntries;
+	const keyInputRef = useRef(null);
+	const updateEntries = useCallback((next) => {
+		if (!controlledValue) setInternalEntries(next);
+		onChange === null || onChange === void 0 || onChange(next);
+	}, [controlledValue, onChange]);
+	const addEntry = useCallback(() => {
+		if (maxEntries && entries.length >= maxEntries) return;
+		const newEntry = {
+			id: generateId(),
+			key: "",
+			value: "",
+			isSecret: false
+		};
+		updateEntries([...entries, newEntry]);
+		requestAnimationFrame(() => {
+			var _keyInputRef$current;
+			(_keyInputRef$current = keyInputRef.current) === null || _keyInputRef$current === void 0 || (_keyInputRef$current = _keyInputRef$current.closest("[data-kv-list]")) === null || _keyInputRef$current === void 0 || (_keyInputRef$current = _keyInputRef$current.querySelector(`[data-kv-id="${newEntry.id}"] [data-kv-key]`)) === null || _keyInputRef$current === void 0 || _keyInputRef$current.focus();
+		});
+	}, [
+		entries,
+		maxEntries,
+		updateEntries
+	]);
+	const removeEntry = useCallback((id) => {
+		updateEntries(entries.filter((e) => e.id !== id));
+	}, [entries, updateEntries]);
+	const updateEntry = useCallback((id, field, val) => {
+		updateEntries(entries.map((e) => e.id === id ? _objectSpread2(_objectSpread2({}, e), {}, { [field]: val }) : e));
+	}, [entries, updateEntries]);
+	const toggleSecret = useCallback((id) => {
+		updateEntries(entries.map((e) => e.id === id ? _objectSpread2(_objectSpread2({}, e), {}, { isSecret: !e.isSecret }) : e));
+	}, [entries, updateEntries]);
+	const canAdd = !readOnly && (!maxEntries || entries.length < maxEntries);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("gap-group flex flex-col", className),
+		"data-opt-id": "NCBWA",
+		"data-opt-slug": "key-value-editor.KeyValueEditor",
+		children: [entries.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "text-text-tertiary py-4 text-center text-sm",
+			children: labels.emptyMessage
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "gap-element flex flex-col",
+			"data-kv-list": true,
+			children: entries.map((entry, index) => {
+				const keyError = validateKey === null || validateKey === void 0 ? void 0 : validateKey(entry.key, entries);
+				return /* @__PURE__ */ jsxs("div", {
+					"data-kv-id": entry.id,
+					className: cn("gap-element flex items-start", "border-border rounded-lg border p-3", "bg-surface"),
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-1 flex-col gap-1",
+							children: [/* @__PURE__ */ jsx("input", {
+								"data-kv-key": true,
+								ref: index === entries.length - 1 ? keyInputRef : void 0,
+								type: "text",
+								value: entry.key,
+								onChange: (e) => updateEntry(entry.id, "key", e.target.value),
+								placeholder: labels.keyPlaceholder,
+								readOnly,
+								"aria-label": `${labels.keyPlaceholder} ${index + 1}`,
+								className: cn("border-border bg-bg-subtle text-text-primary placeholder:text-text-tertiary w-full rounded-md border px-3 py-1.5 font-mono text-sm", "focus:border-accent focus-visible:ring-ring focus-visible:ring-offset-ring-offset focus-visible:ring-2 focus-visible:ring-offset-1", readOnly && "cursor-default opacity-70", keyError && "border-error")
+							}), keyError && /* @__PURE__ */ jsx("span", {
+								className: "text-error text-xs",
+								children: keyError
+							})]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-text-tertiary px-1 py-1.5",
+							children: "="
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "min-w-0 flex-1",
+							children: /* @__PURE__ */ jsx("input", {
+								type: entry.isSecret ? "password" : "text",
+								value: entry.value,
+								onChange: (e) => updateEntry(entry.id, "value", e.target.value),
+								placeholder: labels.valuePlaceholder,
+								readOnly,
+								"aria-label": `${labels.valuePlaceholder} ${index + 1}`,
+								className: cn("border-border bg-bg-subtle text-text-primary placeholder:text-text-tertiary w-full rounded-md border px-3 py-1.5 font-mono text-sm", "focus:border-accent focus-visible:ring-ring focus-visible:ring-offset-ring-offset focus-visible:ring-2 focus-visible:ring-offset-1", readOnly && "cursor-default opacity-70")
+							})
+						}),
+						showSecretToggle && !readOnly && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => toggleSecret(entry.id),
+							"aria-label": labels.toggleSecretAriaLabel,
+							"aria-pressed": entry.isSecret,
+							className: "text-text-tertiary hover:text-text-primary shrink-0 rounded p-1.5 transition-colors",
+							children: entry.isSecret ? /* @__PURE__ */ jsx("svg", {
+								className: "size-4",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								strokeWidth: 2,
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+								})
+							}) : /* @__PURE__ */ jsxs("svg", {
+								className: "size-4",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								strokeWidth: 2,
+								"aria-hidden": "true",
+								children: [/* @__PURE__ */ jsx("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+								}), /* @__PURE__ */ jsx("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+								})]
+							})
+						}),
+						renderActions === null || renderActions === void 0 ? void 0 : renderActions(entry, index),
+						!readOnly && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => removeEntry(entry.id),
+							"aria-label": labels.removeAriaLabel,
+							className: "text-text-tertiary hover:text-error shrink-0 rounded p-1.5 transition-colors",
+							children: /* @__PURE__ */ jsx("svg", {
+								className: "size-4",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								strokeWidth: 2,
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									d: "M6 18L18 6M6 6l12 12"
+								})
+							})
+						})
+					]
+				}, entry.id);
+			})
+		}), canAdd && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: addEntry,
+			className: cn("border-border text-text-secondary rounded-lg border border-dashed px-4 py-2 text-sm transition-colors", "hover:border-accent hover:text-accent"),
+			children: labels.addButton
+		})]
+	});
+}
+//#endregion
+//#region src/shells/workflow-canvas.tsx
+const statusVariant = {
+	idle: "default",
+	running: "info",
+	success: "success",
+	error: "error"
+};
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(max, value));
+}
+/** Renders the workflow canvas component. */
+function WorkflowCanvas({ steps, connections = [], rows = 9, cols = 9, cellSize = 72, gap = 12, title = "Workflow Canvas", emptyMessage = "No workflow steps", selectedStepId, onSelectStep, onStepMove, renderStep, className }) {
+	const stepMap = React.useMemo(() => new Map(steps.map((step) => [step.id, step])), [steps]);
+	const width = cols * cellSize + (cols - 1) * gap;
+	const height = rows * cellSize + (rows - 1) * gap;
+	const renderDefaultStep = React.useCallback((step, selected) => /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => onSelectStep === null || onSelectStep === void 0 ? void 0 : onSelectStep(step),
+		className: cn("group absolute flex h-full w-full flex-col justify-between rounded-lg border p-2 text-left transition-colors", selected ? "border-accent bg-accent-subtle" : "border-border bg-surface hover:bg-bg-subtle"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-text-primary truncate text-xs font-medium",
+			children: step.title
+		}), step.status && /* @__PURE__ */ jsx(Badge, {
+			variant: statusVariant[step.status],
+			size: "sm",
+			className: "w-fit",
+			children: step.status
+		})]
+	}), [onSelectStep]);
+	const handleStepKeyDown = React.useCallback((event, step) => {
+		if (!onStepMove) return;
+		let nextRow = step.row;
+		let nextCol = step.col;
+		switch (event.key) {
+			case "ArrowUp":
+				nextRow -= 1;
+				break;
+			case "ArrowDown":
+				nextRow += 1;
+				break;
+			case "ArrowLeft":
+				nextCol -= 1;
+				break;
+			case "ArrowRight":
+				nextCol += 1;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		onStepMove(step.id, clamp(nextRow, 0, rows - 1), clamp(nextCol, 0, cols - 1));
+	}, [
+		onStepMove,
+		rows,
+		cols
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("gap-group flex flex-col", className),
+		"data-opt-id": "4TX11",
+		"data-opt-slug": "workflow-canvas.WorkflowCanvas",
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "text-text-primary text-sm font-semibold",
+			children: title
+		}), steps.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "text-text-secondary border-border rounded-lg border border-dashed p-8 text-center text-sm",
+			children: emptyMessage
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "border-border bg-bg-subtle relative overflow-auto rounded-lg border p-3",
+			children: /* @__PURE__ */ jsxs("div", {
+				role: "grid",
+				"aria-label": title,
+				className: "relative",
+				style: {
+					width,
+					height
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "grid",
+						style: {
+							gridTemplateColumns: `repeat(${cols}, ${cellSize}px)`,
+							gridTemplateRows: `repeat(${rows}, ${cellSize}px)`,
+							gap
+						},
+						children: Array.from({ length: rows * cols }, (_, i) => /* @__PURE__ */ jsx("div", {
+							"aria-hidden": "true",
+							className: "border-border-subtle bg-surface/30 rounded-md border border-dashed"
+						}, i))
+					}),
+					/* @__PURE__ */ jsx("svg", {
+						className: "pointer-events-none absolute inset-0",
+						width,
+						height,
+						"aria-hidden": "true",
+						children: connections.map((connection) => {
+							const from = stepMap.get(connection.from);
+							const to = stepMap.get(connection.to);
+							if (!from || !to) return null;
+							const x1 = from.col * (cellSize + gap) + cellSize / 2;
+							const y1 = from.row * (cellSize + gap) + cellSize / 2;
+							const x2 = to.col * (cellSize + gap) + cellSize / 2;
+							const y2 = to.row * (cellSize + gap) + cellSize / 2;
+							return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+								x1,
+								y1,
+								x2,
+								y2,
+								stroke: "currentColor",
+								strokeOpacity: "0.35",
+								strokeWidth: "2"
+							}), connection.label && /* @__PURE__ */ jsx("text", {
+								x: (x1 + x2) / 2,
+								y: (y1 + y2) / 2 - 4,
+								textAnchor: "middle",
+								className: "fill-text-secondary text-[10px]",
+								children: connection.label
+							})] }, `${connection.from}-${connection.to}`);
+						})
+					}),
+					steps.map((step) => {
+						const selected = selectedStepId === step.id;
+						return /* @__PURE__ */ jsx("div", {
+							role: "gridcell",
+							tabIndex: 0,
+							"aria-selected": selected,
+							"aria-label": `${step.title} (${step.row + 1}, ${step.col + 1})`,
+							onKeyDown: (event) => handleStepKeyDown(event, step),
+							className: "focus-visible:ring-ring absolute focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none",
+							style: {
+								width: cellSize,
+								height: cellSize,
+								left: step.col * (cellSize + gap),
+								top: step.row * (cellSize + gap)
+							},
+							children: renderStep ? renderStep(step, selected) : renderDefaultStep(step, selected)
+						}, step.id);
+					})
+				]
+			})
+		})]
+	});
+}
+WorkflowCanvas.displayName = "WorkflowCanvas";
+//#endregion
+//#region src/lib/use-auto-refresh.ts
+/**
+* A refresh timer that waits for its own work.
+*
+* A plain `setInterval` fires on a schedule regardless of whether the previous
+* query came back, so a five-second interval over a seven-second query stacks
+* requests until something gives. Chaining the next wait onto the settled
+* promise keeps exactly one refresh in flight, and a rejection stops the loop
+* instead of hammering an endpoint that is already failing.
+*/
+function useAutoRefresh({ interval, paused = false, onRefresh }) {
+	const callbackRef = useRef(onRefresh);
+	callbackRef.current = onRefresh;
+	useEffect(() => {
+		if (paused || interval <= 0 || !callbackRef.current) return;
+		let cancelled = false;
+		let timer;
+		const schedule = () => {
+			timer = setTimeout(async () => {
+				if (cancelled) return;
+				try {
+					var _callbackRef$current;
+					await ((_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef));
+				} catch (_unused) {
+					return;
+				}
+				if (!cancelled) schedule();
+			}, interval);
+		};
+		schedule();
+		return () => {
+			cancelled = true;
+			if (timer) clearTimeout(timer);
+		};
+	}, [interval, paused]);
+}
+//#endregion
+//#region src/shells/time-range-control.tsx
+const defaultLabels$4 = {
+	trigger: "Select time range",
+	invalid: "Invalid time range",
+	last: (duration) => `Last ${duration}`,
+	next: (duration) => `Next ${duration}`,
+	quickSelect: "Quick select",
+	apply: "Apply",
+	update: "Update",
+	refresh: "Refresh",
+	commonlyUsed: "Commonly used",
+	recentlyUsed: "Recently used",
+	start: "Start",
+	end: "End",
+	startHint: "Absolute time or date math, e.g. now-7d",
+	autoRefresh: "Auto refresh",
+	autoRefreshOff: "Off",
+	every: (duration) => `Every ${duration}`,
+	previous: "Previous window",
+	nextWindow: "Next window",
+	zoomIn: "Zoom in",
+	zoomOut: "Zoom out",
+	thisUnit: (unit) => `This ${unit}`,
+	units: {
+		s: "seconds",
+		m: "minutes",
+		h: "hours",
+		d: "days",
+		w: "weeks",
+		M: "months",
+		y: "years"
+	}
+};
+const QUICK_UNITS = [
+	"m",
+	"h",
+	"d",
+	"w",
+	"M",
+	"y"
+];
+const REFRESH_INTERVALS = [
+	0,
+	5e3,
+	1e4,
+	3e4,
+	6e4,
+	3e5
+];
+function selectValue(value) {
+	var _value$;
+	return Array.isArray(value) ? (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : "" : value;
+}
+/**
+* What the trigger says.
+*
+* A window anchored to `now` deserves its intent ("Last 7 days"), not two
+* timestamps the reader has to subtract. Everything else gets both ends
+* spelled out. A duration that does not divide into whole minutes is prefixed
+* with `~` rather than rounded silently.
+*/
+function describeRange(range, labels, options) {
+	const window = measureTimeWindow(range, {
+		timeZone: options.timeZone,
+		now: options.now
+	});
+	if (window.isInvalid) return {
+		text: labels.invalid,
+		isInvalid: true
+	};
+	const fromParts = parseRelativeParts(range.from);
+	const toParts = parseRelativeParts(range.to);
+	if ((fromParts === null || fromParts === void 0 ? void 0 : fromParts.roundUnit) && fromParts.count === 0 && (toParts === null || toParts === void 0 ? void 0 : toParts.roundUnit) === fromParts.roundUnit && toParts.count === 0) return {
+		text: labels.thisUnit(formatCountUnit(1, fromParts.roundUnit, options.locale).replace(/^1\s*/, "")),
+		isInvalid: false
+	};
+	if (isRelativeToNow(range)) {
+		var _toParts$count;
+		const anchoredAtEnd = ((_toParts$count = toParts === null || toParts === void 0 ? void 0 : toParts.count) !== null && _toParts$count !== void 0 ? _toParts$count : 0) === 0;
+		const parts = anchoredAtEnd ? fromParts : toParts;
+		const bothSnapped = (parts === null || parts === void 0 ? void 0 : parts.roundUnit) === (parts === null || parts === void 0 ? void 0 : parts.unit) && (toParts === null || toParts === void 0 ? void 0 : toParts.roundUnit) === (parts === null || parts === void 0 ? void 0 : parts.unit);
+		const counted = parts && parts.count > 0 ? formatCountUnit(parts.roundUnit && bothSnapped ? parts.count + 1 : parts.count, parts.unit, options.locale) : null;
+		const exact = counted !== null && (!(parts === null || parts === void 0 ? void 0 : parts.roundUnit) || bothSnapped);
+		const duration = exact ? counted : formatDuration(window.duration, options.locale);
+		const prefix = exact || isExactMinutes(window.duration) ? "" : "~";
+		return {
+			text: anchoredAtEnd ? labels.last(`${prefix}${duration}`) : labels.next(`${prefix}${duration}`),
+			isInvalid: false
+		};
+	}
+	const dateOnly = isDateOnly(range.from) && isDateOnly(range.to);
+	const from = formatInstant(window.from, _objectSpread2(_objectSpread2({}, options), {}, { dateOnly }));
+	const to = formatInstant(window.to, _objectSpread2(_objectSpread2({}, options), {}, { dateOnly }));
+	return {
+		text: from === to ? from : `${from} – ${to}`,
+		isInvalid: false
+	};
+}
+/**
+* TimeRangeControl — the window as an expression, not two frozen instants.
+*
+* Holding `{ from: "now-7d", to: "now" }` instead of a resolved pair is what
+* makes a saved board, a shared link and an auto-refresh timer all mean the
+* same thing tomorrow that they mean today. Around that sit the moves people
+* actually make on a chart: jump to a named window, step the same width back
+* and forth to compare, widen when the interesting thing is just off screen,
+* and let it re-query on a timer while they watch.
+*
+* @example
+* ```tsx
+* const [range, setRange] = useState<TimeRange>({ from: "now-7d", to: "now" });
+*
+* <TimeRangeControl
+*   value={range}
+*   onChange={setRange}
+*   timeZone="Asia/Seoul"
+*   showWindowButtons
+*   onRefresh={() => refetch()}
+* />
+* ```
+*/
+function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, locale, showUpdateButton = true, showWindowButtons = true, zoomFactor = .5, refresh, onRefreshChange, onRefresh, isLoading = false, disabled = false, className, labels: customLabels, "aria-label": ariaLabel }) {
+	var _refresh$interval, _refresh$paused, _refresh$interval2;
+	const labels = _objectSpread2(_objectSpread2(_objectSpread2({}, defaultLabels$4), customLabels), {}, { units: _objectSpread2(_objectSpread2({}, defaultLabels$4.units), customLabels === null || customLabels === void 0 ? void 0 : customLabels.units) });
+	const [open, setOpen] = useState(false);
+	const [draft, setDraft] = useState(null);
+	const [quickCount, setQuickCount] = useState("15");
+	const [quickUnit, setQuickUnit] = useState("m");
+	const editing = draft !== null && draft !== void 0 ? draft : value;
+	const hasChanges = draft !== null && (draft.from !== value.from || draft.to !== value.to);
+	const description = useMemo(() => describeRange(value, labels, {
+		locale,
+		timeZone
+	}), [
+		value,
+		locale,
+		timeZone,
+		customLabels
+	]);
+	const boundState = useCallback((expression) => parseTimeExpression(expression, { timeZone }) === null ? labels.invalid : void 0, [timeZone, labels]);
+	const commit = useCallback((range) => {
+		setDraft(null);
+		onChange(range);
+	}, [onChange]);
+	const apply = useCallback(() => {
+		if (draft) commit(draft);
+		else onRefresh === null || onRefresh === void 0 || onRefresh();
+	}, [
+		draft,
+		commit,
+		onRefresh
+	]);
+	const commitOnEnter = useCallback((event) => {
+		if (event.key !== "Enter") return;
+		apply();
+		setOpen(false);
+	}, [apply]);
+	const applyQuick = useCallback(() => {
+		const count = Number(quickCount);
+		if (!Number.isFinite(count) || count <= 0) return;
+		commit({
+			from: `now-${Math.round(count)}${quickUnit}`,
+			to: "now"
+		});
+		setOpen(false);
+	}, [
+		quickCount,
+		quickUnit,
+		commit
+	]);
+	const step = useCallback((direction) => {
+		const next = shiftTimeRange(value, direction, { timeZone });
+		if (next) commit(next);
+	}, [
+		value,
+		timeZone,
+		commit
+	]);
+	const zoom = useCallback((factor) => {
+		const next = zoomTimeRange(value, factor, { timeZone });
+		if (next) commit(next);
+	}, [
+		value,
+		timeZone,
+		commit
+	]);
+	useAutoRefresh({
+		interval: (_refresh$interval = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval !== void 0 ? _refresh$interval : 0,
+		paused: (_refresh$paused = refresh === null || refresh === void 0 ? void 0 : refresh.paused) !== null && _refresh$paused !== void 0 ? _refresh$paused : true,
+		onRefresh
+	});
+	const refreshLabel = !refresh || refresh.paused || refresh.interval === 0 ? labels.autoRefreshOff : labels.every(formatDuration(refresh.interval, locale));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("bg-surface inline-flex items-center rounded-lg border", OPT_BORDER, className),
+		role: "group",
+		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.trigger,
+		"data-opt-id": "3WJ8H",
+		"data-opt-slug": "time-range-control.TimeRangeControl",
+		children: [
+			/* @__PURE__ */ jsxs(PopoverRoot$1, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ jsxs(PopoverTrigger$1, {
+					className: cn("text-text-primary h-10 gap-2", description.isInvalid && "text-danger-fg"),
+					disabled,
+					children: [/* @__PURE__ */ jsx(Clock, {
+						className: "text-text-tertiary h-4 w-4",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "truncate text-sm",
+						children: description.text
+					})]
+				}), /* @__PURE__ */ jsxs(PopoverContent$1, {
+					className: "gap-group flex w-80 flex-col",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-text-primary text-xs font-medium",
+								children: labels.quickSelect
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex items-end gap-2",
+								children: [
+									/* @__PURE__ */ jsx(Input, {
+										"aria-label": labels.quickSelect,
+										type: "number",
+										min: 1,
+										size: "sm",
+										className: "w-20",
+										value: quickCount,
+										onChange: (event) => setQuickCount(event.target.value),
+										onKeyDown: (event) => {
+											if (event.key === "Enter") applyQuick();
+										}
+									}),
+									/* @__PURE__ */ jsxs(SelectRoot$1, {
+										value: quickUnit,
+										setValue: (next) => setQuickUnit(selectValue(next)),
+										children: [/* @__PURE__ */ jsx(SelectTrigger$1, {
+											minWidth: 110,
+											"aria-label": labels.quickSelect
+										}), /* @__PURE__ */ jsx(SelectPopover$1, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ jsx(SelectItem$1, {
+											value: unit,
+											children: labels.units[unit]
+										}, unit)) })]
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										variant: "secondary",
+										size: "sm",
+										onClick: applyQuick,
+										children: labels.apply
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ jsx(Input, {
+								label: labels.start,
+								size: "sm",
+								value: editing.from,
+								error: boundState(editing.from),
+								hint: labels.startHint,
+								onChange: (event) => setDraft(_objectSpread2(_objectSpread2({}, editing), {}, { from: event.target.value })),
+								onKeyDown: commitOnEnter
+							}), /* @__PURE__ */ jsx(Input, {
+								label: labels.end,
+								size: "sm",
+								value: editing.to,
+								error: boundState(editing.to),
+								onChange: (event) => setDraft(_objectSpread2(_objectSpread2({}, editing), {}, { to: event.target.value })),
+								onKeyDown: commitOnEnter
+							})]
+						}),
+						presets && presets.length > 0 && /* @__PURE__ */ jsx(RangeList, {
+							title: labels.commonlyUsed,
+							items: presets,
+							onPick: (range) => {
+								commit(range);
+								setOpen(false);
+							}
+						}),
+						recentRanges && recentRanges.length > 0 && /* @__PURE__ */ jsx(RangeList, {
+							title: labels.recentlyUsed,
+							items: recentRanges.slice(0, 5),
+							onPick: (range) => {
+								commit(range);
+								setOpen(false);
+							}
+						}),
+						onRefreshChange && /* @__PURE__ */ jsxs("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-text-primary text-xs font-medium",
+								children: labels.autoRefresh
+							}), /* @__PURE__ */ jsxs(SelectRoot$1, {
+								value: String((refresh === null || refresh === void 0 ? void 0 : refresh.paused) ? 0 : (_refresh$interval2 = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval2 !== void 0 ? _refresh$interval2 : 0),
+								setValue: (next) => {
+									const interval = Number(selectValue(next));
+									onRefreshChange({
+										interval,
+										paused: interval === 0
+									});
+								},
+								children: [/* @__PURE__ */ jsx(SelectTrigger$1, {
+									minWidth: 140,
+									"aria-label": labels.autoRefresh
+								}), /* @__PURE__ */ jsx(SelectPopover$1, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ jsx(SelectItem$1, {
+									value: String(interval),
+									children: interval === 0 ? labels.autoRefreshOff : labels.every(formatDuration(interval, locale))
+								}, interval)) })]
+							})]
+						})
+					]
+				})]
+			}),
+			showWindowButtons && /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center border-l", "border border-border"),
+				role: "group",
+				"aria-label": labels.previous,
+				children: [
+					/* @__PURE__ */ jsx(IconButton, {
+						label: labels.previous,
+						disabled: disabled || description.isInvalid,
+						onClick: () => step(-1),
+						children: /* @__PURE__ */ jsx(ChevronLeft, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						label: labels.zoomIn,
+						disabled: disabled || description.isInvalid,
+						onClick: () => zoom(-zoomFactor),
+						children: /* @__PURE__ */ jsx(ZoomIn, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						label: labels.zoomOut,
+						disabled: disabled || description.isInvalid,
+						onClick: () => zoom(zoomFactor),
+						children: /* @__PURE__ */ jsx(ZoomOut, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						label: labels.nextWindow,
+						disabled: disabled || description.isInvalid,
+						onClick: () => step(1),
+						children: /* @__PURE__ */ jsx(ChevronRight, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					})
+				]
+			}),
+			(onRefresh || showUpdateButton) && /* @__PURE__ */ jsx("div", {
+				className: cn("border-l pl-2 pr-2", "border border-border"),
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: hasChanges ? "primary" : "secondary",
+					size: "sm",
+					loading: isLoading,
+					disabled: disabled || description.isInvalid,
+					onClick: apply,
+					leftIcon: hasChanges ? void 0 : /* @__PURE__ */ jsx(RefreshCw, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}),
+					title: refreshLabel,
+					children: hasChanges ? labels.update : labels.refresh
+				})
+			})
+		]
+	});
+}
+TimeRangeControl.displayName = "TimeRangeControl";
+function IconButton({ label, disabled, onClick, children }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		"aria-label": label,
+		title: label,
+		disabled,
+		onClick,
+		children
+	});
+}
+function RangeList({ title, items, onPick }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gap-element flex flex-col",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-text-primary text-xs font-medium",
+			children: title
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "grid grid-cols-2 gap-1",
+			children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("hover:bg-bg-subtle w-full cursor-pointer rounded px-2 py-1 text-left text-xs", OPT_TEXT_SECONDARY),
+				onClick: () => onPick(item.range),
+				children: item.label
+			}) }, `${item.label}-${index}`))
+		})]
+	});
+}
+/**
+* The windows most analytics tools open with. Exported so a caller gets a
+* sensible list without inventing date math of their own.
+*/
+const DEFAULT_TIME_PRESETS = [
+	{
+		label: "Last 15 minutes",
+		range: {
+			from: "now-15m",
+			to: "now"
+		}
+	},
+	{
+		label: "Last hour",
+		range: {
+			from: "now-1h",
+			to: "now"
+		}
+	},
+	{
+		label: "Last 24 hours",
+		range: {
+			from: "now-24h",
+			to: "now"
+		}
+	},
+	{
+		label: "Last 7 days",
+		range: {
+			from: "now-7d",
+			to: "now"
+		}
+	},
+	{
+		label: "Last 30 days",
+		range: {
+			from: "now-30d",
+			to: "now"
+		}
+	},
+	{
+		label: "Last 90 days",
+		range: {
+			from: "now-90d",
+			to: "now"
+		}
+	},
+	{
+		label: "Today",
+		range: {
+			from: "now/d",
+			to: "now/d"
+		}
+	},
+	{
+		label: "This week",
+		range: {
+			from: "now/w",
+			to: "now/w"
+		}
+	}
+];
+//#endregion
+//#region src/shells/time-series-panel.tsx
+const defaultLabels$3 = {
+	back: "Back to previous range",
+	legend: "Series"
+};
+/**
+* TimeSeriesPanel — a chart you can steer.
+*
+* The point of putting the control and the chart in one component is the
+* loop between them: drag across the plot and the window narrows to what you
+* dragged, which re-queries, which redraws the axis you just picked. That
+* only works if someone owns the step back out again — so zoom keeps a
+* history, and the header offers the way back rather than leaving the reader
+* to retype the range they came from.
+*
+* @example
+* ```tsx
+* const [range, setRange] = useState<TimeRange>({ from: "now-7d", to: "now" });
+*
+* <TimeSeriesPanel
+*   title="Sessions"
+*   data={points}
+*   series={[{ dataKey: "sessions", name: "Sessions" }]}
+*   range={range}
+*   onRangeChange={setRange}
+*   onRefresh={() => refetch()}
+*   toggleableLegend
+* />
+* ```
+*/
+function TimeSeriesPanel({ title, description, actions, data, series, range, onRangeChange, granularity = "auto", timeZone, locale, showRangeControl = true, presets, recentRanges, refresh, onRefreshChange, onRefresh, toggleableLegend = false, annotations, isLoading = false, height = 280, className, chartProps, labels: customLabels, "aria-label": ariaLabel }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$3), customLabels);
+	const [history, setHistory] = useState([]);
+	const [hidden, setHidden] = useState([]);
+	const resolved = useMemo(() => resolveTimeRange(range, { timeZone }), [range, timeZone]);
+	const visibleSeries = useMemo(() => series.filter((def) => !hidden.includes(def.dataKey)), [series, hidden]);
+	const handleRangeSelect = useCallback((selection) => {
+		setHistory((current) => [...current, range].slice(-10));
+		onRangeChange(toAbsoluteRange(selection));
+	}, [range, onRangeChange]);
+	const goBack = useCallback(() => {
+		setHistory((current) => {
+			const previous = current[current.length - 1];
+			if (previous) onRangeChange(previous);
+			return current.slice(0, -1);
+		});
+	}, [onRangeChange]);
+	const setRange = useCallback((next) => {
+		setHistory([]);
+		onRangeChange(next);
+	}, [onRangeChange]);
+	const toggleSeries = useCallback((dataKey) => {
+		setHidden((current) => current.includes(dataKey) ? current.filter((key) => key !== dataKey) : [...current, dataKey]);
+	}, []);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn(OPT_SURFACE, OPT_BORDER, "flex flex-col", className),
+		"aria-label": ariaLabel,
+		"data-opt-id": "Y0XCY",
+		"data-opt-slug": "time-series-panel.TimeSeriesPanel",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "gap-group flex flex-wrap items-start justify-between px-5 pt-5 pb-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "gap-element flex min-w-0 flex-col",
+				children: [title && /* @__PURE__ */ jsx("h3", {
+					className: "text-text-primary truncate text-base font-semibold",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: cn("text-text-secondary", "truncate text-sm"),
+					children: description
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "gap-element flex flex-wrap items-center",
+				children: [
+					history.length > 0 && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: goBack,
+						leftIcon: /* @__PURE__ */ jsx(Undo2, {
+							className: "h-3.5 w-3.5",
+							"aria-hidden": "true"
+						}),
+						children: labels.back
+					}),
+					actions,
+					showRangeControl && /* @__PURE__ */ jsx(TimeRangeControl, {
+						value: range,
+						onChange: setRange,
+						presets,
+						recentRanges,
+						timeZone,
+						locale,
+						refresh,
+						onRefreshChange,
+						onRefresh,
+						isLoading,
+						labels: customLabels === null || customLabels === void 0 ? void 0 : customLabels.control
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "px-2 pb-4",
+			children: /* @__PURE__ */ jsx(TimeSeriesChart, _objectSpread2({
+				data,
+				series: visibleSeries,
+				from: resolved === null || resolved === void 0 ? void 0 : resolved.from,
+				to: resolved === null || resolved === void 0 ? void 0 : resolved.to,
+				granularity,
+				timeZone,
+				locale,
+				height,
+				selectable: true,
+				onRangeSelect: handleRangeSelect,
+				annotations,
+				showLegend: series.length > 1,
+				legendOptions: toggleableLegend ? {
+					onClick: toggleSeries,
+					inactiveKeys: hidden
+				} : void 0,
+				"aria-label": typeof title === "string" ? `${title} time series` : ariaLabel
+			}, chartProps))
+		})]
+	});
+}
+TimeSeriesPanel.displayName = "TimeSeriesPanel";
+//#endregion
+//#region src/shells/log-table.tsx
+const HIDE_BELOW = {
+	always: "",
+	sm: "hidden @[40rem]/log:flex",
+	md: "hidden @[46rem]/log:flex",
+	lg: "hidden @[58rem]/log:flex",
+	xl: "hidden @[70rem]/log:flex"
+};
+const ROW_HEIGHT = {
+	compact: 26,
+	normal: 32,
+	comfortable: 40
+};
+const DENSITY_TEXT = {
+	compact: "text-[11px]",
+	normal: "text-xs",
+	comfortable: "text-sm"
+};
+const defaultLabels$2 = {
+	listLabel: "Log",
+	loadingMore: "Loading earlier entries…",
+	endOfResults: "That is every entry in this range.",
+	filterFor: (value) => `Filter for ${value}`,
+	filterOut: (value) => `Filter out ${value}`,
+	sortAscending: "Sort ascending",
+	sortDescending: "Sort descending"
+};
+/** Rows rendered beyond the viewport on each side, so a fast scroll stays filled. */
+const OVERSCAN = 10;
+/**
+* A stable hue per value. Colour does real work in a log — the eye groups by it
+* long before it reads the text — so the same event name has to land on the
+* same hue on every render and in every session, which rules out an index into
+* a palette.
+*/
+function hueOf(value) {
+	let hash = 0;
+	for (let index = 0; index < value.length; index += 1) hash = hash * 31 + value.charCodeAt(index) | 0;
+	return Math.abs(hash) % 360;
+}
+const EM_DASH = "—";
+/**
+* A column with nothing in it is a fact about the entry, not a value. Dimming
+* every absence the same way lets the eye skip the gaps while scanning, instead
+* of reading a dash as though it were data.
+*/
+const ABSENT = "text-text-tertiary/50";
+function columnStyle(column) {
+	return column.width ? {
+		width: column.width,
+		flex: "0 0 auto"
+	} : {
+		flex: "1 1 0%",
+		minWidth: 0
+	};
+}
+/**
+* LogTable — a windowed table for entries that keep arriving.
+*
+* Written by hand rather than delegated to a data grid for the two things a log
+* needs that a grid does not: rows are inserted at the *top* while the reader
+* is partway down, which needs a scroll correction applied before paint, and
+* "am I at the newest row?" has to be answerable from the scroll container to
+* decide whether to follow the tail or hold position.
+*
+* What it takes from a data grid is the part readers actually reach for:
+* columns are data, so a caller can let people add, drop and reorder them; a
+* cell offers to filter for or against its own value; and density is a setting
+* rather than a constant.
+*
+* @example
+* ```tsx
+* <LogTable
+*   rows={rows}
+*   getRowId={(row) => row.id}
+*   columns={[
+*     { id: "time", header: "Time", width: "9rem", mono: true, value: (r) => r.time },
+*     { id: "name", header: "Event", width: "14rem", field: "name", marker: true, value: (r) => r.name },
+*     { id: "path", header: "Path", field: "path", value: (r) => r.path },
+*   ]}
+*   onCellAction={(action) => setQuery(applyCellAction(query, action))}
+* />
+* ```
+*/
+function LogTableInner({ rows, columns, getRowId, selectedId = null, onSelect, onLoadMore, hasMore = false, loadingMore = false, prepending = false, onFollowChange, isNew, sort = null, onSortChange, onCellAction, density = "normal", showHeader = true, emptyState, labels: customLabels, className }, ref) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$2), customLabels);
+	const rowHeight = ROW_HEIGHT[density];
+	const scrollRef = useRef(null);
+	const [scrollTop, setScrollTop] = useState(0);
+	const [viewportHeight, setViewportHeight] = useState(0);
+	const followingRef = useRef(true);
+	const previousTopIdRef = useRef(null);
+	const previousLengthRef = useRef(0);
+	useImperativeHandle(ref, () => ({
+		scrollToTop: () => {
+			const container = scrollRef.current;
+			if (!container) return;
+			container.scrollTop = 0;
+			setScrollTop(0);
+			if (!followingRef.current) {
+				followingRef.current = true;
+				onFollowChange === null || onFollowChange === void 0 || onFollowChange(true);
+			}
+		},
+		revealRow: (id) => {
+			const index = rows.findIndex((row) => getRowId(row) === id);
+			const container = scrollRef.current;
+			if (index === -1 || !container) return;
+			const top = index * rowHeight;
+			const bottom = top + rowHeight;
+			if (top < container.scrollTop) container.scrollTop = top;
+			else if (bottom > container.scrollTop + container.clientHeight) container.scrollTop = bottom - container.clientHeight;
+		}
+	}), [
+		onFollowChange,
+		rows,
+		getRowId,
+		rowHeight
+	]);
+	useEffect(() => {
+		const container = scrollRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(() => setViewportHeight(container.clientHeight));
+		observer.observe(container);
+		setViewportHeight(container.clientHeight);
+		return () => observer.disconnect();
+	}, []);
+	/**
+	* Report whether the list is pinned to the newest row.
+	*
+	* Called from more than the scroll handler on purpose: the list can arrive at
+	* the top without a scroll event — a reset, a jump to newest, a shorter
+	* result set — and a stale "not following" would silently divert every live
+	* row into a held-back pile.
+	*/
+	const syncFollowing = useCallback((container) => {
+		const following = container.scrollTop <= rowHeight;
+		if (following === followingRef.current) return;
+		followingRef.current = following;
+		onFollowChange === null || onFollowChange === void 0 || onFollowChange(following);
+	}, [onFollowChange, rowHeight]);
+	/**
+	* Hold the reader's place when rows arrive above them.
+	*
+	* Runs before paint: by the time the browser draws, the scroll offset has
+	* already absorbed the inserted height, so the content under the cursor never
+	* moves. Skipped while following, where the whole point is to stay at the top.
+	*/
+	useLayoutEffect(() => {
+		const container = scrollRef.current;
+		const previousTopId = previousTopIdRef.current;
+		previousTopIdRef.current = rows.length ? getRowId(rows[0]) : null;
+		const previousLength = previousLengthRef.current;
+		previousLengthRef.current = rows.length;
+		if (!container) return;
+		syncFollowing(container);
+		if (!prepending || followingRef.current || !previousTopId) return;
+		if (rows.length <= previousLength) return;
+		const prepended = rows.findIndex((row) => getRowId(row) === previousTopId);
+		if (prepended <= 0) return;
+		container.scrollTop += prepended * rowHeight;
+		setScrollTop(container.scrollTop);
+	}, [
+		rows,
+		getRowId,
+		prepending,
+		rowHeight,
+		syncFollowing
+	]);
+	/**
+	* Page forward when the rows do not reach the bottom of the viewport.
+	*
+	* Without this the list only advances on a scroll event, so a tall screen —
+	* or a filter matching few rows per page — stops at the first page with no
+	* way to ask for more.
+	*/
+	useEffect(() => {
+		const container = scrollRef.current;
+		if (!container || !hasMore || loadingMore || !onLoadMore) return;
+		if (container.scrollHeight <= container.clientHeight) onLoadMore();
+	}, [
+		hasMore,
+		loadingMore,
+		onLoadMore,
+		rows.length,
+		viewportHeight
+	]);
+	const handleScroll = useCallback((event) => {
+		const container = event.currentTarget;
+		setScrollTop(container.scrollTop);
+		syncFollowing(container);
+		const remaining = container.scrollHeight - container.scrollTop - container.clientHeight;
+		if (hasMore && !loadingMore && remaining < container.clientHeight) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
+	}, [
+		hasMore,
+		loadingMore,
+		onLoadMore,
+		syncFollowing
+	]);
+	const totalHeight = rows.length * rowHeight;
+	const firstVisible = Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN);
+	const visibleCount = Math.ceil((viewportHeight || 480) / rowHeight) + 20;
+	const lastVisible = Math.min(rows.length, firstVisible + visibleCount);
+	const visibleRows = useMemo(() => rows.slice(firstVisible, lastVisible), [
+		rows,
+		firstVisible,
+		lastVisible
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("@container/log flex min-h-0 flex-col", className),
+		"data-opt-id": "NJ4N9",
+		"data-opt-slug": "log-table.LogTable",
+		children: [showHeader && /* @__PURE__ */ jsx(LogTableHeader, {
+			columns,
+			sort,
+			onSortChange,
+			density,
+			labels
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: scrollRef,
+			onScroll: handleScroll,
+			className: "relative min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
+			role: "listbox",
+			"aria-label": labels.listLabel,
+			"aria-activedescendant": selectedId ? `log-row-${selectedId}` : void 0,
+			tabIndex: 0,
+			children: [
+				rows.length === 0 ? emptyState : /* @__PURE__ */ jsx("div", {
+					style: { height: totalHeight },
+					className: "relative",
+					children: visibleRows.map((row, index) => {
+						var _isNew;
+						const id = getRowId(row);
+						return /* @__PURE__ */ jsx(LogTableRow, {
+							id,
+							row,
+							columns,
+							top: (firstVisible + index) * rowHeight,
+							height: rowHeight,
+							density,
+							selected: id === selectedId,
+							isNew: (_isNew = isNew === null || isNew === void 0 ? void 0 : isNew(row)) !== null && _isNew !== void 0 ? _isNew : false,
+							onSelect,
+							onCellAction,
+							labels
+						}, id);
+					})
+				}),
+				loadingMore && /* @__PURE__ */ jsxs("div", {
+					className: "gap-element text-text-tertiary flex items-center justify-center py-3 text-xs",
+					children: [/* @__PURE__ */ jsx(Spinner, {
+						size: "sm",
+						"aria-hidden": true
+					}), labels.loadingMore]
+				}),
+				!hasMore && rows.length > 0 && /* @__PURE__ */ jsx("p", {
+					className: cn("text-text-tertiary", "py-3 text-center text-xs"),
+					children: labels.endOfResults
+				})
+			]
+		})]
+	});
+}
+/**
+* LogTable — see {@link LogTableInner}.
+*
+* The cast preserves the row generic through `forwardRef`, which otherwise
+* widens it to its constraint and takes the column callbacks' types with it.
+*/
+const LogTable = forwardRef(LogTableInner);
+function LogTableHeader({ columns, sort, onSortChange, density, labels }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "row",
+		className: cn("border-border-subtle text-text-tertiary flex shrink-0 items-center gap-3 border-b px-3", DENSITY_TEXT[density]),
+		style: { height: ROW_HEIGHT[density] },
+		children: columns.map((column) => {
+			var _column$priority;
+			const active = (sort === null || sort === void 0 ? void 0 : sort.columnId) === column.id;
+			const sortable = column.sortable && onSortChange;
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+				column.marker && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "size-1.5 shrink-0"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: column.header
+				}),
+				active && (sort.direction === "asc" ? /* @__PURE__ */ jsx(ChevronUp, {
+					className: "size-3 shrink-0",
+					"aria-hidden": true
+				}) : /* @__PURE__ */ jsx(ChevronDown, {
+					className: "size-3 shrink-0",
+					"aria-hidden": true
+				}))
+			] });
+			return /* @__PURE__ */ jsx("div", {
+				role: "columnheader",
+				"aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
+				className: cn("flex items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority = column.priority) !== null && _column$priority !== void 0 ? _column$priority : "always"]),
+				style: columnStyle(column),
+				children: sortable ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "hover:text-text-primary flex cursor-pointer items-center gap-1.5 truncate",
+					title: active && sort.direction === "desc" ? labels.sortAscending : labels.sortDescending,
+					onClick: () => onSortChange({
+						columnId: column.id,
+						direction: active && sort.direction === "desc" ? "asc" : "desc"
+					}),
+					children: content
+				}) : content
+			}, column.id);
+		})
+	});
+}
+function LogTableRowImpl({ id, row, columns, top, height, density, selected, isNew, onSelect, onCellAction, labels }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "option",
+		"aria-selected": selected,
+		tabIndex: -1,
+		id: `log-row-${id}`,
+		"data-log-row-id": id,
+		onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(id),
+		onKeyDown: (event) => {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			onSelect === null || onSelect === void 0 || onSelect(id);
+		},
+		style: {
+			top,
+			height
+		},
+		className: cn("border-border-subtle/60 absolute inset-x-0 flex items-center gap-3 border-b px-3", DENSITY_TEXT[density], onSelect && "cursor-pointer", "transition-colors duration-100", "hover:bg-surface-hover", selected && "bg-accent-subtle hover:bg-accent-subtle", isNew && !selected && "opt-log-row-enter"),
+		children: columns.map((column) => {
+			var _column$priority2;
+			const raw = column.value(row);
+			const text = raw === null || raw === void 0 || raw === "" ? "" : String(raw);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("group/cell relative flex min-w-0 items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority2 = column.priority) !== null && _column$priority2 !== void 0 ? _column$priority2 : "always"]),
+				style: columnStyle(column),
+				children: [
+					column.marker && text && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "size-1.5 shrink-0 rounded-full",
+						style: { backgroundColor: `hsl(${hueOf(text)} 65% 55%)` }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn("truncate", column.mono && "font-mono", text ? "text-text-secondary" : ABSENT),
+						title: text || void 0,
+						children: column.render ? column.render(row) : text || EM_DASH
+					}),
+					onCellAction && column.field && text && /* @__PURE__ */ jsx(CellActions, {
+						field: column.field,
+						value: text,
+						onAction: onCellAction,
+						labels
+					})
+				]
+			}, column.id);
+		})
+	});
+}
+/**
+* Memoized because a live log re-renders several times a second while almost
+* every visible row is unchanged.
+*/
+const LogTableRow = memo(LogTableRowImpl);
+/**
+* The two questions a reader has about a value they just spotted: show me only
+* these, and get these out of my way.
+*
+* Revealed on hover rather than always drawn — a log is scanned, and a pair of
+* buttons on every cell of every row is a wall of chrome. They stay in the tab
+* order regardless, since hover is not an interaction everyone has.
+*/
+function CellActions({ field, value, onAction, labels }) {
+	const button = "cursor-pointer rounded-sm p-0.5 text-text-tertiary hover:bg-bg-muted hover:text-text-primary";
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("bg-surface/90 ml-auto hidden shrink-0 items-center gap-0.5 rounded pl-1", "group-hover/cell:flex focus-within:flex"),
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: button,
+			title: labels.filterFor(value),
+			"aria-label": labels.filterFor(value),
+			onClick: (event) => {
+				event.stopPropagation();
+				onAction({
+					field,
+					value,
+					intent: "include"
+				});
+			},
+			children: /* @__PURE__ */ jsx(Plus, {
+				className: "size-3",
+				"aria-hidden": true
+			})
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: button,
+			title: labels.filterOut(value),
+			"aria-label": labels.filterOut(value),
+			onClick: (event) => {
+				event.stopPropagation();
+				onAction({
+					field,
+					value,
+					intent: "exclude"
+				});
+			},
+			children: /* @__PURE__ */ jsx(Minus, {
+				className: "size-3",
+				"aria-hidden": true
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/lib/query/query-ast.ts
+const EMPTY_QUERY = { clauses: [] };
+/** Whether a query constrains anything at all. */
+function isEmptyQuery(query) {
+	return !query || query.clauses.length === 0;
+}
+function sameClause(a, b) {
+	if (a.type !== b.type) return false;
+	if (a.type === "term" && b.type === "term") return a.value === b.value && a.negated === b.negated;
+	const fieldA = a;
+	const fieldB = b;
+	return fieldA.field === fieldB.field && fieldA.operator === fieldB.operator && fieldA.negated === fieldB.negated && fieldA.values.length === fieldB.values.length && fieldA.values.every((value, index) => value === fieldB.values[index]);
+}
+/** Add a clause unless an identical one is already there. */
+function addClause(query, clause) {
+	if (query.clauses.some((existing) => sameClause(existing, clause))) return query;
+	return { clauses: [...query.clauses, clause] };
+}
+/**
+* Constrain a field to a value — what a cell's "filter for this" action does.
+*
+* Applying the opposite of a constraint already present replaces it rather than
+* adding it: `status:200` then "filter out 200" should read as one changed
+* mind, not as a query that can never match.
+*/
+function withFieldValue(query, field, value, options = {}) {
+	var _options$negated, _options$operator;
+	const negated = (_options$negated = options.negated) !== null && _options$negated !== void 0 ? _options$negated : false;
+	const operator = (_options$operator = options.operator) !== null && _options$operator !== void 0 ? _options$operator : "eq";
+	return { clauses: [...query.clauses.filter((clause) => !(clause.type === "field" && clause.field === field && clause.operator === operator && clause.values.length === 1 && clause.values[0] === value)), {
+		type: "field",
+		field,
+		operator,
+		values: [value],
+		negated
+	}] };
+}
+/** Drop every clause naming `field`. */
+function withoutField(query, field) {
+	return { clauses: query.clauses.filter((clause) => clause.type !== "field" || clause.field !== field) };
+}
+/** Drop the clause at `index`, for a removable chip. */
+function removeClause(query, index) {
+	return { clauses: query.clauses.filter((_, at) => at !== index) };
+}
+/** Every field the query names, in the order they first appear. */
+function queryFields(query) {
+	const seen = [];
+	for (const clause of query.clauses) if (clause.type === "field" && !seen.includes(clause.field)) seen.push(clause.field);
+	return seen;
+}
+/** The values a field is constrained to, if any — for showing a filter as active. */
+function fieldValues(query, field) {
+	return query.clauses.flatMap((clause) => clause.type === "field" && clause.field === field && !clause.negated ? clause.values : []);
+}
+/**
+* Fold a cell action into the query.
+*
+* The pair of buttons on a log cell is the fastest path from "I noticed this
+* value" to a filtered view, and the reason it works is that the result is a
+* query the reader can then see, edit and share — not a hidden filter stack
+* with its own rules.
+*/
+function applyCellAction(query, action) {
+	return withFieldValue(query, action.field, action.value, { negated: action.intent === "exclude" });
+}
+//#endregion
+//#region src/lib/query/query-parse.ts
+const FIELD_NAME = /^[A-Za-z_][A-Za-z0-9_.-]*$/;
+/**
+* Split on whitespace, but keep quoted runs and parenthesised groups whole.
+*
+* An unterminated quote or group swallows the rest of the line rather than
+* erroring: the reader is mid-word, and the alternative is the query flickering
+* between two different meanings as they type the closing character.
+*/
+function tokenize(input) {
+	const tokens = [];
+	let index = 0;
+	while (index < input.length) {
+		while (index < input.length && /\s/.test(input[index])) index += 1;
+		if (index >= input.length) break;
+		const start = index;
+		let text = "";
+		let quoted = false;
+		let atTokenStart = true;
+		let depth = 0;
+		while (index < input.length) {
+			const char = input[index];
+			if (char === "\"") {
+				if (atTokenStart) quoted = true;
+				atTokenStart = false;
+				index += 1;
+				while (index < input.length && input[index] !== "\"") {
+					text += input[index];
+					index += 1;
+				}
+				index += 1;
+				continue;
+			}
+			if (char === "(") depth += 1;
+			if (char === ")") depth = Math.max(0, depth - 1);
+			if (/\s/.test(char) && depth === 0) break;
+			atTokenStart = false;
+			text += char;
+			index += 1;
+		}
+		if (text.length > 0 || quoted) tokens.push({
+			text,
+			at: start,
+			quoted
+		});
+	}
+	return tokens;
+}
+/** `(a or b)` → `["a", "b"]`; anything else is a single value. */
+function readValues(raw) {
+	const trimmed = raw.trim();
+	if (!trimmed.startsWith("(")) return [stripQuotes(trimmed)];
+	return trimmed.replace(/^\(/, "").replace(/\)$/, "").split(/\s+or\s+/i).map((part) => stripQuotes(part.trim())).filter((part) => part.length > 0);
+}
+function stripQuotes(value) {
+	if (value.length >= 2 && value.startsWith("\"") && value.endsWith("\"")) return value.slice(1, -1);
+	return value.replace(/^"/, "");
+}
+const OPERATORS = [
+	{
+		symbol: ">=",
+		operator: "gte"
+	},
+	{
+		symbol: "<=",
+		operator: "lte"
+	},
+	{
+		symbol: ":",
+		operator: "eq"
+	},
+	{
+		symbol: ">",
+		operator: "gt"
+	},
+	{
+		symbol: "<",
+		operator: "lt"
+	}
+];
+/** Where a field operator starts in the token, or `-1`. */
+function findOperator(text) {
+	let best = null;
+	for (const { symbol, operator } of OPERATORS) {
+		const index = text.indexOf(symbol);
+		if (index <= 0) continue;
+		if (!best || index < best.index || index === best.index && symbol.length > best.symbol.length) best = {
+			index,
+			symbol,
+			operator
+		};
+	}
+	return best;
+}
+/** Parse, keeping whatever could not be understood as a plain term. */
+function parseQueryWithDiagnostics(input) {
+	const diagnostics = [];
+	const clauses = [];
+	let trailing = null;
+	for (const token of tokenize(input)) {
+		let text = token.text;
+		let negated = false;
+		if (!token.quoted && text.startsWith("-") && text.length > 1) {
+			negated = true;
+			text = text.slice(1);
+		}
+		const operator = token.quoted ? null : findOperator(text);
+		if (!operator) {
+			if (text.length > 0) clauses.push({
+				type: "term",
+				value: text,
+				negated
+			});
+			continue;
+		}
+		const field = text.slice(0, operator.index);
+		const rawValue = text.slice(operator.index + operator.symbol.length);
+		if (!FIELD_NAME.test(field)) {
+			clauses.push({
+				type: "term",
+				value: text,
+				negated
+			});
+			continue;
+		}
+		if (rawValue === "") {
+			trailing = {
+				field,
+				operator: operator.operator,
+				value: ""
+			};
+			continue;
+		}
+		if (rawValue === "*" && operator.operator === "eq") {
+			clauses.push({
+				type: "field",
+				field,
+				operator: "exists",
+				values: [],
+				negated
+			});
+			continue;
+		}
+		if (operator.operator === "eq" && rawValue.length > 2 && rawValue.startsWith("*") && rawValue.endsWith("*")) {
+			clauses.push({
+				type: "field",
+				field,
+				operator: "contains",
+				values: [stripQuotes(rawValue.slice(1, -1))],
+				negated
+			});
+			continue;
+		}
+		const values = readValues(rawValue);
+		if (values.length === 0) {
+			diagnostics.push({
+				at: token.at,
+				text: token.text,
+				message: "Empty value group"
+			});
+			continue;
+		}
+		if (operator.operator !== "eq" && values.length > 1) diagnostics.push({
+			at: token.at,
+			text: token.text,
+			message: "A comparison takes a single value"
+		});
+		const clause = {
+			type: "field",
+			field,
+			operator: operator.operator,
+			values: operator.operator === "eq" ? values : values.slice(0, 1),
+			negated
+		};
+		clauses.push(clause);
+		if (!rawValue.startsWith("(")) {
+			var _values$;
+			trailing = {
+				field,
+				operator: operator.operator,
+				value: (_values$ = values[0]) !== null && _values$ !== void 0 ? _values$ : ""
+			};
+		}
+	}
+	return {
+		query: { clauses },
+		diagnostics,
+		trailing
+	};
+}
+/** Parse, discarding diagnostics. */
+function parseQuery(input) {
+	return parseQueryWithDiagnostics(input).query;
+}
+//#endregion
+//#region src/lib/query/query-format.ts
+const OPERATOR_SYMBOL = {
+	eq: ":",
+	contains: ":",
+	gt: ">",
+	gte: ">=",
+	lt: "<",
+	lte: "<=",
+	exists: ":"
+};
+/** Quote a value that would otherwise re-parse as something else. */
+function quoteValue(value) {
+	return /[\s"()]/.test(value) || value === "" ? `"${value.replace(/"/g, "")}"` : value;
+}
+/** One clause as text. */
+function formatClause(clause) {
+	var _clause$values$2;
+	const prefix = clause.negated ? "-" : "";
+	if (clause.type === "term") return `${prefix}${quoteValue(clause.value)}`;
+	if (clause.operator === "exists") return `${prefix}${clause.field}:*`;
+	if (clause.operator === "contains") {
+		var _clause$values$;
+		return `${prefix}${clause.field}:*${(_clause$values$ = clause.values[0]) !== null && _clause$values$ !== void 0 ? _clause$values$ : ""}*`;
+	}
+	const symbol = OPERATOR_SYMBOL[clause.operator];
+	if (clause.values.length > 1) return `${prefix}${clause.field}${symbol}(${clause.values.map(quoteValue).join(" or ")})`;
+	return `${prefix}${clause.field}${symbol}${quoteValue((_clause$values$2 = clause.values[0]) !== null && _clause$values$2 !== void 0 ? _clause$values$2 : "")}`;
+}
+/** The whole query as text. */
+function formatQuery(query) {
+	return query.clauses.map(formatClause).join(" ");
+}
+/** A short human label for a clause chip. */
+function describeClause(clause) {
+	if (clause.type === "term") return clause.negated ? `not "${clause.value}"` : `"${clause.value}"`;
+	if (clause.operator === "exists") return clause.negated ? `${clause.field} missing` : `${clause.field} present`;
+	if (clause.operator === "contains") {
+		var _clause$values$3;
+		return `${clause.negated ? "not " : ""}${clause.field} ⊃ ${(_clause$values$3 = clause.values[0]) !== null && _clause$values$3 !== void 0 ? _clause$values$3 : ""}`;
+	}
+	const values = clause.values.join(", ");
+	const symbol = OPERATOR_SYMBOL[clause.operator];
+	return `${clause.negated ? "not " : ""}${clause.field} ${symbol === ":" ? "=" : symbol} ${values}`;
+}
+//#endregion
+//#region src/shells/query-bar.tsx
+const defaultLabels$1 = {
+	placeholder: "Search, or filter with field:value",
+	ariaLabel: "Search query",
+	clear: "Clear query",
+	removeClause: (clause) => `Remove ${clause}`,
+	fieldsHeading: "Fields",
+	valuesHeading: "Values",
+	syntaxHint: null
+};
+const MAX_SUGGESTIONS = 8;
+/**
+* QueryBar — one control for "find this" and "only these".
+*
+* A search box and a row of filter pickers answer halves of the same question
+* and neither can express the other, so people end up using both and holding
+* the combination in their head. Typing the filter is what closes that: the
+* whole question is one string, which means it can be read back, corrected in
+* place, pasted to a colleague, and stored in a URL.
+*
+* The text is the source of truth while the reader is typing; the parsed query
+* is committed on Enter or blur. Anything half-written parses to a plain term
+* rather than an error, so the bar never argues with someone mid-word.
+*
+* @example
+* ```tsx
+* <QueryBar
+*   value={query}
+*   onChange={setQuery}
+*   fields={[{ name: "path", values: ["/checkout", "/cart"] }]}
+*   showClauses
+* />
+* ```
+*/
+function QueryBar({ value, onChange, fields = [], showClauses = false, live = false, disabled = false, className, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$1), customLabels);
+	const inputRef = useRef(null);
+	const [text, setText] = useState(() => formatQuery(value));
+	const [focused, setFocused] = useState(false);
+	const [highlighted, setHighlighted] = useState(0);
+	const committedRef = useRef(formatQuery(value));
+	useEffect(() => {
+		const next = formatQuery(value);
+		if (next === committedRef.current) return;
+		committedRef.current = next;
+		if (!focused) setText(next);
+	}, [value, focused]);
+	const parsed = useMemo(() => parseQueryWithDiagnostics(text), [text]);
+	const commit = useCallback((nextText) => {
+		const nextQuery = parseQueryWithDiagnostics(nextText).query;
+		committedRef.current = formatQuery(nextQuery);
+		onChange(nextQuery);
+	}, [onChange]);
+	const suggestions = useSuggestions(text, parsed.trailing, fields);
+	const applySuggestion = useCallback((suggestion) => {
+		var _inputRef$current;
+		const nextText = suggestion.replace(text);
+		setText(nextText);
+		if (suggestion.kind === "value") commit(nextText);
+		(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+		setHighlighted(0);
+	}, [text, commit]);
+	const handleKeyDown = (event) => {
+		if (suggestions.length > 0 && focused) {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				setHighlighted((current) => (current + 1) % suggestions.length);
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setHighlighted((current) => (current - 1 + suggestions.length) % suggestions.length);
+				return;
+			}
+			if (event.key === "Tab" || event.key === "Enter" && highlighted > 0) {
+				event.preventDefault();
+				applySuggestion(suggestions[highlighted]);
+				return;
+			}
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			commit(text);
+			return;
+		}
+		if (event.key === "Escape") {
+			var _inputRef$current2;
+			setText(committedRef.current);
+			(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+		}
+	};
+	const showSuggestions = focused && suggestions.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex min-w-0 flex-col gap-1.5", className),
+		"data-opt-id": "JSVZ1",
+		"data-opt-slug": "query-bar.QueryBar",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("bg-surface flex h-9 items-center gap-2 rounded-md border px-2.5", OPT_BORDER, "focus-within:border-accent transition-colors", disabled && "opacity-60"),
+				children: [
+					/* @__PURE__ */ jsx(Search, {
+						className: "text-text-tertiary size-4 shrink-0",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("input", {
+						ref: inputRef,
+						type: "text",
+						role: "combobox",
+						"aria-expanded": showSuggestions,
+						"aria-controls": "query-bar-suggestions",
+						"aria-autocomplete": "list",
+						"aria-label": labels.ariaLabel,
+						placeholder: labels.placeholder,
+						disabled,
+						className: cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent font-mono text-sm outline-none focus-visible:outline-none"),
+						value: text,
+						onChange: (event) => {
+							setText(event.target.value);
+							setHighlighted(0);
+							if (live) commit(event.target.value);
+						},
+						onFocus: () => setFocused(true),
+						onBlur: () => {
+							window.setTimeout(() => setFocused(false), 120);
+							if (!live) commit(text);
+						},
+						onKeyDown: handleKeyDown
+					}),
+					text.length > 0 && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": labels.clear,
+						title: labels.clear,
+						className: cn("text-text-tertiary hover:text-text-primary cursor-pointer rounded-sm p-0.5", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+						onClick: () => {
+							setText("");
+							commit("");
+						},
+						children: /* @__PURE__ */ jsx(X, {
+							className: "size-3.5",
+							"aria-hidden": true
+						})
+					})
+				]
+			}),
+			showSuggestions && /* @__PURE__ */ jsx("ul", {
+				id: "query-bar-suggestions",
+				role: "listbox",
+				className: cn("bg-surface-overlay absolute top-10 z-40 max-h-64 w-full overflow-y-auto rounded-md border p-1 shadow-lg", "border border-border"),
+				children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": index === highlighted,
+					className: cn("flex w-full cursor-pointer items-center justify-between gap-3 rounded px-2 py-1 text-left text-sm", index === highlighted ? "bg-bg-subtle" : "hover:bg-bg-subtle"),
+					onMouseEnter: () => setHighlighted(index),
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => applySuggestion(suggestion),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-text-primary truncate font-mono",
+						children: suggestion.label
+					}), suggestion.hint && /* @__PURE__ */ jsx("span", {
+						className: "text-text-tertiary shrink-0 text-xs",
+						children: suggestion.hint
+					})]
+				}) }, `${suggestion.kind}-${suggestion.label}`))
+			}),
+			showClauses && value.clauses.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-wrap items-center gap-1.5",
+				children: value.clauses.map((clause, index) => {
+					const label = describeClause(clause);
+					return /* @__PURE__ */ jsxs("li", {
+						className: cn("bg-bg-subtle text-text-secondary flex items-center gap-1 rounded px-1.5 py-0.5 text-xs", clause.negated && "text-danger-fg"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: label
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": labels.removeClause(label),
+							className: "hover:text-text-primary cursor-pointer",
+							onClick: () => {
+								const next = removeClause(value, index);
+								setText(formatQuery(next));
+								committedRef.current = formatQuery(next);
+								onChange(next);
+							},
+							children: /* @__PURE__ */ jsx(X, {
+								className: "size-3",
+								"aria-hidden": true
+							})
+						})]
+					}, `${label}-${index}`);
+				})
+			}),
+			parsed.diagnostics.length > 0 && /* @__PURE__ */ jsx(QueryDiagnostics, { diagnostics: parsed.diagnostics }),
+			labels.syntaxHint && !showSuggestions && /* @__PURE__ */ jsx("p", {
+				className: "text-text-tertiary text-xs",
+				children: labels.syntaxHint
+			})
+		]
+	});
+}
+QueryBar.displayName = "QueryBar";
+function QueryDiagnostics({ diagnostics }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "text-warning-fg flex flex-col gap-0.5 text-xs",
+		children: diagnostics.map((diagnostic, index) => /* @__PURE__ */ jsxs("li", { children: [
+			/* @__PURE__ */ jsx("code", {
+				className: "font-mono",
+				children: diagnostic.text
+			}),
+			" —",
+			" ",
+			diagnostic.message
+		] }, `${diagnostic.at}-${index}`))
+	});
+}
+/**
+* What to offer, based on the token under the cursor.
+*
+* Completing fields is the part that makes the syntax discoverable at all —
+* nobody guesses that `utm_source` is a field they can filter on. Once the
+* field is chosen, its known values are the second half of the same guess.
+*/
+function useSuggestions(text, trailing, fields) {
+	return useMemo(() => {
+		const lastSpace = text.lastIndexOf(" ");
+		const head = lastSpace === -1 ? "" : text.slice(0, lastSpace + 1);
+		const token = text.slice(lastSpace + 1);
+		if (trailing) {
+			var _field$values;
+			const field = fields.find((candidate) => candidate.name === trailing.field);
+			const values = (_field$values = field === null || field === void 0 ? void 0 : field.values) !== null && _field$values !== void 0 ? _field$values : [];
+			const typed = trailing.value.toLowerCase();
+			return values.filter((value) => value.toLowerCase().includes(typed)).slice(0, MAX_SUGGESTIONS).map((value) => ({
+				kind: "value",
+				label: `${trailing.field}:${value}`,
+				replace: () => `${head}${trailing.field}:${/[\s"()]/.test(value) ? `"${value}"` : value} `
+			}));
+		}
+		const bare = token.replace(/^-/, "").toLowerCase();
+		if (bare.length === 0) return [];
+		return fields.filter((field) => field.name.toLowerCase().includes(bare)).slice(0, MAX_SUGGESTIONS).map((field) => ({
+			kind: "field",
+			label: `${field.name}:`,
+			hint: field.hint,
+			replace: () => `${head}${token.startsWith("-") ? "-" : ""}${field.name}:`
+		}));
+	}, [
+		text,
+		trailing,
+		fields
+	]);
+}
+//#endregion
+//#region src/shells/field-sidebar.tsx
+const defaultLabels = {
+	heading: "Fields",
+	searchPlaceholder: "Find a field",
+	searchLabel: "Find a field",
+	empty: "No fields match.",
+	addColumn: (field) => `Show ${field} as a column`,
+	removeColumn: (field) => `Remove the ${field} column`,
+	filterFor: (value) => `Filter for ${value}`,
+	filterOut: (value) => `Filter out ${value}`,
+	topValues: (count) => `Top ${count} values`,
+	noValues: "No values in this range.",
+	loadingValues: "Counting…",
+	otherGroup: "Other"
+};
+/**
+* FieldSidebar — what is in this data, and what does it contain.
+*
+* Without it, a log answers only the questions you already knew to ask: you can
+* filter on `utm_source` if you remember it exists, and you can read a value if
+* you open a row and scroll to it. Listing the fields turns that around — the
+* data tells the reader what is available — and the value counts answer the
+* question that actually follows ("mostly which?") before they have to run a
+* query to find out.
+*
+* Three actions live here because they are the three things people do next:
+* put the field in the table, keep only rows with a value, drop rows with it.
+*
+* @example
+* ```tsx
+* <FieldSidebar
+*   fields={fields}
+*   expandedField={openField}
+*   onExpandedFieldChange={setOpenField}
+*   values={valuesQuery.data}
+*   valuesLoading={valuesQuery.isLoading}
+*   onToggleColumn={(field, next) => setColumns(...)}
+*   onFilter={(field, value, intent) => setQuery(applyCellAction(query, { field, value, intent }))}
+* />
+* ```
+*/
+function FieldSidebar({ fields, expandedField = null, onExpandedFieldChange, values, valuesLoading = false, sampledRows, onToggleColumn, onFilter, header, className, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels), customLabels);
+	const [search, setSearch] = useState("");
+	const groups = useMemo(() => {
+		const needle = search.trim().toLowerCase();
+		const matching = needle ? fields.filter((field) => field.name.toLowerCase().includes(needle)) : fields;
+		const byGroup = /* @__PURE__ */ new Map();
+		for (const field of matching) {
+			var _field$group;
+			const key = (_field$group = field.group) !== null && _field$group !== void 0 ? _field$group : "";
+			const bucket = byGroup.get(key);
+			if (bucket) bucket.push(field);
+			else byGroup.set(key, [field]);
+		}
+		return [...byGroup.entries()];
+	}, [fields, search]);
+	const total = useMemo(() => (values !== null && values !== void 0 ? values : []).reduce((sum, entry) => sum + entry.count, 0), [values]);
+	return /* @__PURE__ */ jsxs("aside", {
+		className: cn("flex min-h-0 flex-col", className),
+		"aria-label": labels.heading,
+		"data-opt-id": "17D4Y",
+		"data-opt-slug": "field-sidebar.FieldSidebar",
+		children: [
+			header,
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-2 border-b px-3 py-2", "focus-within:border-accent transition-colors", OPT_BORDER),
+				children: [/* @__PURE__ */ jsx(Search, {
+					className: "text-text-tertiary size-3.5 shrink-0",
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx("input", {
+					type: "search",
+					"aria-label": labels.searchLabel,
+					placeholder: labels.searchPlaceholder,
+					className: cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent text-sm outline-none focus-visible:outline-none"),
+					value: search,
+					onChange: (event) => setSearch(event.target.value)
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1 overflow-y-auto",
+				children: groups.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: cn(OPT_TEXT_TERTIARY, "px-3 py-4 text-xs"),
+					children: labels.empty
+				}) : groups.map(([group, groupFields]) => /* @__PURE__ */ jsxs("section", { children: [group && /* @__PURE__ */ jsx("h4", {
+					className: cn("text-text-tertiary", "px-3 pt-3 pb-1 text-[11px] font-medium tracking-wide uppercase"),
+					children: group
+				}), /* @__PURE__ */ jsx("ul", { children: groupFields.map((field) => /* @__PURE__ */ jsx(FieldRow, {
+					field,
+					expanded: expandedField === field.name,
+					onToggleExpanded: () => onExpandedFieldChange === null || onExpandedFieldChange === void 0 ? void 0 : onExpandedFieldChange(expandedField === field.name ? null : field.name),
+					onToggleColumn,
+					labels,
+					children: expandedField === field.name && /* @__PURE__ */ jsx(FieldValues, {
+						values,
+						loading: valuesLoading,
+						total,
+						sampledRows,
+						onFilter: onFilter ? (value, intent) => onFilter(field.name, value, intent) : void 0,
+						labels
+					})
+				}, field.name)) })] }, group || "__ungrouped__"))
+			})
+		]
+	});
+}
+FieldSidebar.displayName = "FieldSidebar";
+function FieldRow({ field, expanded, onToggleExpanded, onToggleColumn, labels, children }) {
+	var _field$columnable, _field$inTable;
+	const columnable = (_field$columnable = field.columnable) !== null && _field$columnable !== void 0 ? _field$columnable : true;
+	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "hover:bg-bg-subtle group/field flex items-center gap-1.5 px-3 py-1",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left",
+			"aria-expanded": expanded,
+			onClick: onToggleExpanded,
+			children: [field.type && /* @__PURE__ */ jsx("span", {
+				className: cn("text-text-tertiary", "w-8 shrink-0 truncate font-mono text-[10px] uppercase"),
+				children: field.type
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-text-primary truncate font-mono text-xs",
+				children: field.name
+			})]
+		}), onToggleColumn && columnable && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: cn("cursor-pointer rounded-sm p-0.5", field.inTable ? "text-accent" : "text-text-tertiary hover:text-text-primary opacity-0 group-hover/field:opacity-100 focus-visible:opacity-100"),
+			"aria-label": field.inTable ? labels.removeColumn(field.name) : labels.addColumn(field.name),
+			title: field.inTable ? labels.removeColumn(field.name) : labels.addColumn(field.name),
+			"aria-pressed": (_field$inTable = field.inTable) !== null && _field$inTable !== void 0 ? _field$inTable : false,
+			onClick: () => onToggleColumn(field.name, !field.inTable),
+			children: /* @__PURE__ */ jsx(Columns3, {
+				className: "size-3.5",
+				"aria-hidden": true
+			})
+		})]
+	}), children] });
+}
+/**
+* The distribution, as bars.
+*
+* A count alone ("342") means nothing without the denominator, and a reader
+* scanning for "what is this field mostly" reads the bar before the number.
+* The sample size is stated rather than implied — these are the top values in
+* the rows that were counted, not in all of history, and a chart that hides
+* that invites the wrong conclusion.
+*/
+function FieldValues({ values, loading, total, sampledRows, onFilter, labels }) {
+	if (loading) return /* @__PURE__ */ jsxs("p", {
+		className: cn(OPT_TEXT_TERTIARY, "flex items-center gap-2 px-3 pb-2 text-xs"),
+		children: [/* @__PURE__ */ jsx(Spinner, {
+			size: "sm",
+			"aria-hidden": true
+		}), labels.loadingValues]
+	});
+	if (!values || values.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: cn(OPT_TEXT_TERTIARY, "px-3 pb-2 text-xs"),
+		children: labels.noValues
+	});
+	const denominator = sampledRows !== null && sampledRows !== void 0 ? sampledRows : total;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1 px-3 pt-1 pb-2",
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: cn(OPT_TEXT_TERTIARY, "text-[11px]"),
+			children: [labels.topValues(values.length), sampledRows ? ` · ${sampledRows.toLocaleString()}` : ""]
+		}), values.map((entry) => {
+			var _entry$share;
+			const share = (_entry$share = entry.share) !== null && _entry$share !== void 0 ? _entry$share : denominator > 0 ? entry.count / denominator : 0;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "group/value flex flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-text-secondary min-w-0 flex-1 truncate font-mono text-[11px]",
+							title: entry.value,
+							children: entry.value || "—"
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: cn(OPT_TEXT_TERTIARY, "shrink-0 text-[11px] tabular-nums"),
+							children: [Math.round(share * 100), "%"]
+						}),
+						onFilter && /* @__PURE__ */ jsxs("span", {
+							className: "hidden shrink-0 items-center gap-0.5 group-hover/value:flex focus-within:flex",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "text-text-tertiary hover:text-text-primary cursor-pointer",
+								"aria-label": labels.filterFor(entry.value),
+								title: labels.filterFor(entry.value),
+								onClick: () => onFilter(entry.value, "include"),
+								children: /* @__PURE__ */ jsx(Plus, {
+									className: "size-3",
+									"aria-hidden": true
+								})
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "text-text-tertiary hover:text-text-primary cursor-pointer",
+								"aria-label": labels.filterOut(entry.value),
+								title: labels.filterOut(entry.value),
+								onClick: () => onFilter(entry.value, "exclude"),
+								children: /* @__PURE__ */ jsx(Minus, {
+									className: "size-3",
+									"aria-hidden": true
+								})
+							})]
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "bg-bg-muted h-1 w-full overflow-hidden rounded-full",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "bg-accent h-full rounded-full",
+						style: { width: `${Math.max(2, Math.round(share * 100))}%` }
+					})
+				})]
+			}, entry.value);
+		})]
+	});
+}
+//#endregion
+export { CommandList$1 as $, DataTable as A, SidebarNav as B, WorkflowCanvas as C, ToastProvider as D, NotificationToast as E, DeploymentTimeline as F, CommandPaletteTrigger as G, StatusSelect as H, SettingsForm as I, CommandDialog as J, CommandPalette as K, FaqAccordion as L, BranchSelect as M, EnvPanel as N, toast as O, ProjectSwitcher as P, CommandItem$1 as Q, ContentTabs as R, useAutoRefresh as S, FailureList as T, SearchCombobox as U, AppMenubar as V, DashboardGrid as W, CommandGroup$1 as X, CommandEmpty$1 as Y, CommandInput$1 as Z, withoutField as _, formatQuery as a, DEFAULT_TIME_PRESETS as b, parseQueryWithDiagnostics as c, applyCellAction as d, CommandSeparator$1 as et, fieldValues as f, withFieldValue as g, removeClause as h, formatClause as i, DomainTable as j, useToast as k, EMPTY_QUERY as l, queryFields as m, QueryBar as n, quoteValue as o, isEmptyQuery as p, Command as q, describeClause as r, parseQuery as s, FieldSidebar as t, CommandShortcut as tt, addClause as u, LogTable as v, KeyValueEditor as w, TimeRangeControl as x, TimeSeriesPanel as y, EditorToolbar as z };
+
+//# sourceMappingURL=field-sidebar-Cs-J-5VE.js.map