@reopt-ai/opt-ui 1.5.0 → 1.7.0

package/dist/field-sidebar-CzIQX70-.cjs

@@ -0,0 +1,4561 @@
+"use client";
+const require_pagination = require("./pagination-DjfxBcjX.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_pagination.__toESM(react, 1);
+let _reopt_ai_opt_ui_primitives = require("@reopt-ai/opt-ui-primitives");
+let lucide_react = require("lucide-react");
+let _reopt_ai_opt_charts = require("@reopt-ai/opt-charts");
+let match_sorter = require("match-sorter");
+let next_link = require("next/link");
+next_link = require_pagination.__toESM(next_link, 1);
+let next_navigation = require("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 = require_pagination._objectWithoutProperties(_ref, _excluded);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandRoot, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogRoot, {
+		open,
+		onOpenChange,
+		"data-opt-id": "DVRSX",
+		"data-opt-slug": "command.CommandDialog",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.DialogPanel, {
+			className: require_pagination.cn("top-[20%] left-1/2 -translate-x-1/2", "w-full max-w-lg overflow-hidden p-0 shadow-2xl", className),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogHeading, {
+					className: "sr-only",
+					children: title
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogDescription, {
+					className: "sr-only",
+					children: description
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+					shouldFilter,
+					filter,
+					className: commandClassName,
+					children
+				})
+			]
+		})
+	});
+}
+/** Renders the `CommandInput` component with a leading search icon. */
+function CommandInput(_ref2) {
+	let { className, trailing, wrapperClassName, placeholder, "aria-label": ariaLabel } = _ref2, props = require_pagination._objectWithoutProperties(_ref2, _excluded2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "command-input-wrapper",
+		className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.SearchIcon, {
+				"aria-hidden": true,
+				className: "text-text-tertiary size-4 shrink-0"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandInput, require_pagination._objectSpread2({
+				className: require_pagination.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(_ref3) {
+	let { className, "aria-label": ariaLabel } = _ref3, props = require_pagination._objectWithoutProperties(_ref3, _excluded3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandList, require_pagination._objectSpread2(require_pagination._objectSpread2({
+		className: require_pagination.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(_ref4) {
+	let { className } = _ref4, props = require_pagination._objectWithoutProperties(_ref4, _excluded4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandEmpty, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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(_ref5) {
+	let { className, heading } = _ref5, props = require_pagination._objectWithoutProperties(_ref5, _excluded5);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandGroup, require_pagination._objectSpread2(require_pagination._objectSpread2({
+		heading: heading != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-text-tertiary px-2 py-1.5 text-xs font-medium",
+			children: heading
+		}) : void 0,
+		className: require_pagination.cn("py-1", className)
+	}, props), {}, {
+		"data-opt-id": "JPK1Y",
+		"data-opt-slug": "command.CommandGroup"
+	}));
+}
+/** Renders the `CommandSeparator` component. */
+function CommandSeparator(_ref6) {
+	let { className } = _ref6, props = require_pagination._objectWithoutProperties(_ref6, _excluded6);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandSeparator, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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(_ref7) {
+	let { className } = _ref7, props = require_pagination._objectWithoutProperties(_ref7, _excluded7);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandItem, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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 = require_pagination._objectWithoutProperties(_ref8, _excluded8);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", require_pagination._objectSpread2(require_pagination._objectSpread2({
+		"data-slot": "command-shortcut",
+		className: require_pagination.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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, DEFAULT_LABELS), labels);
+	const hasCommands = commands.length > 0;
+	const grouped = (0, react.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandInput, {
+			"aria-label": resolvedLabels.input,
+			placeholder: resolvedLabels.placeholder,
+			onKeyDown: handleInputKeyDown,
+			trailing: inputTrailing !== null && inputTrailing !== void 0 ? inputTrailing : !inline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Kbd, { children: resolvedLabels.escape }) : void 0
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CommandList, {
+			"aria-label": resolvedLabels.list,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandEmpty, { children: empty !== null && empty !== void 0 ? empty : resolvedLabels.empty }), hasCommands ? Array.from(grouped.entries()).map(([group, items]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandGroup, {
+				heading: group,
+				children: items.map((cmd) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CommandItem, {
+					value: cmd.id,
+					keywords: [
+						cmd.label,
+						cmd.group,
+						...cmd.shortcut ? [cmd.shortcut] : []
+					],
+					onSelect: handleSelect,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: cmd.label }), cmd.shortcut && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandShortcut, { children: cmd.shortcut })]
+				}, cmd.id))
+			}, group)) : null]
+		}),
+		footer
+	] });
+	if (inline) {
+		if (!open) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+			className: require_pagination.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__ */ (0, react_jsx_runtime.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] = (0, react.useState)(false);
+	const handleKeyDown = (0, react.useCallback)((e) => {
+		if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+			e.preventDefault();
+			setOpen(true);
+		}
+	}, []);
+	(0, react.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__ */ (0, react_jsx_runtime.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 = require_pagination._objectSpread2(require_pagination._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__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
+		focusLoop: true,
+		focusWrap: true,
+		"data-opt-id": "BM7NA",
+		"data-opt-slug": "dashboard-grid.DashboardGrid",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Composite, {
+			role: "grid",
+			"aria-label": labels.ariaLabel,
+			className: "gap-group flex flex-col",
+			children: rows.map((row, ri) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeRow, {
+				className: "gap-group grid grid-cols-1 sm:[grid-template-columns:var(--opt-dashboard-grid-columns)]",
+				style: rowStyle,
+				children: row.map((stat) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.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__ */ (0, react_jsx_runtime.jsx)("div", { role: "gridcell" }),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.StatCard, require_pagination._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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$17), customLabels);
+	const inputId = (0, react.useId)();
+	const [query, setQuery] = (0, react.useState)("");
+	const [asyncResults, setAsyncResults] = (0, react.useState)([]);
+	const [loading, setLoading] = (0, react.useState)(false);
+	const timerRef = (0, react.useRef)(void 0);
+	const searchGenerationRef = (0, react.useRef)(0);
+	const syncMatches = (0, react.useMemo)(() => {
+		if (isAsync) return [];
+		if (!query) return items;
+		return (0, match_sorter.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);
+	};
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "gap-element flex flex-col",
+		"data-opt-id": "KH4TQ",
+		"data-opt-slug": "search-combobox.SearchCombobox",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.ComboboxRoot, {
+			onValueChange: handleValueChange,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+					htmlFor: inputId,
+					className: require_pagination.OPT_TEXT_LABEL,
+					children: label
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxInput, {
+					id: inputId,
+					placeholder,
+					className: "max-w-xs",
+					"aria-busy": loading || void 0,
+					onInput: handleInput
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxPopover, {
+					className: "max-w-xs",
+					children: isAsync && loading ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_pagination.Spinner, {
+							size: "sm",
+							"aria-hidden": "true"
+						}), labels.loading]
+					}) : matches.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxEmpty, { children: labels.noResults }) : matches.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxItem, {
+						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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$16), customLabels);
+	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
+	const [internalValue, setInternalValue] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "gap-element flex flex-col",
+		"data-opt-id": "R46E6",
+		"data-opt-slug": "status-select.StatusSelect",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_pagination.OPT_TEXT_LABEL,
+			children: resolvedLabel
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "gap-element flex flex-col",
+		"data-opt-id": "R46E6",
+		"data-opt-slug": "status-select.StatusSelect",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectRoot, {
+			value,
+			onValueChange: handleChange,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectLabel, {
+					className: require_pagination.OPT_TEXT_LABEL,
+					children: resolvedLabel
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectTrigger, {
+					className: `${require_pagination.OPT_INPUT} max-w-xs items-center justify-between ${require_pagination.OPT_FOCUS}`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "gap-element flex items-center",
+						children: [(selected === null || selected === void 0 ? void 0 : selected.color) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `h-2 w-2 rounded-full ${selected.color}` }), selected === null || selected === void 0 ? void 0 : selected.label]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+						})
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, {
+					className: `${require_pagination.OPT_SURFACE_POPOVER} ${require_pagination.OPT_ANIMATE_ENTER_EXIT} max-w-xs`,
+					children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectItem, {
+						value: option.value,
+						children: [option.color && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_pagination.MenuRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.MenuTrigger, { children: [menu.label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuButtonArrow, {})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuPopover, { children: menu.items.map((item, i) => {
+		if (item.type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuSeparator, {}, `sep-${i}`);
+		if (item.type === "checkbox") {
+			var _item$name, _item$value;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuItemCheckbox, {
+				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__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "gap-element flex items-center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuItemRadio, {
+				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__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "gap-element flex items-center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "w-4 text-center",
+						children: item.checked ? "●" : ""
+					}), item.label]
+				})
+			}, item.id);
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.MenuItem, {
+			onClick: item.onClick,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }), item.shortcut && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Kbd, { children: item.shortcut })]
+		}, item.id);
+	}) })] });
+}
+/** Renders the app menubar component. */
+function AppMenubar({ menus, labels: customLabels }) {
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$15), customLabels);
+	if (menus.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenubarRoot, {
+		"data-opt-id": "BGKHW",
+		"data-opt-slug": "app-menubar.AppMenubar",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenubarContainer, {
+			"aria-label": labels.ariaLabel,
+			children: menus.map((menu) => /* @__PURE__ */ (0, react_jsx_runtime.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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$14), customLabels);
+	const pathname = (0, next_navigation.usePathname)();
+	const activeItem = items.find((item) => item.href === pathname);
+	const [activeId, setActiveId] = (0, react.useState)(activeItem ? domId(activeItem.id) : void 0);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
+		focusLoop: true,
+		orientation: "vertical",
+		activeId,
+		onActiveIdChange: setActiveId,
+		"data-opt-id": "1FZNH",
+		"data-opt-slug": "sidebar-nav.SidebarNav",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.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__ */ (0, react_jsx_runtime.jsxs)("div", { children: [item.separator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_pagination.cn("mb-2 pt-2", !isFirstItem && "mt-7"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_pagination.cn("px-2 text-[11px] font-semibold tracking-wider uppercase", sectionTextStyle),
+						children: (_item$sectionLabel = item.sectionLabel) !== null && _item$sectionLabel !== void 0 ? _item$sectionLabel : ""
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+					id: domId(item.id),
+					render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(next_link.default, {
+						href: item.href,
+						className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("span", { className: require_pagination.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_pagination.TooltipProvider, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TooltipAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ToolbarButton, {
+		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__ */ (0, react_jsx_runtime.jsx)(require_pagination.Tooltip, { children: button.label })] });
+}
+/** Renders the editor toolbar component. */
+function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLabels }) {
+	const labels = require_pagination._objectSpread2(require_pagination._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__ */ (0, react_jsx_runtime.jsx)(require_pagination.ToolbarRoot, {
+		"data-opt-id": "Z73K6",
+		"data-opt-slug": "editor-toolbar.EditorToolbar",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ToolbarContainer, {
+			"aria-label": labels.ariaLabel,
+			children: groups.map((group, gi) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "contents",
+				children: [gi > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ToolbarSeparator, {}), group.map((item) => {
+					if (item === "separator") return null;
+					const btn = item;
+					return /* @__PURE__ */ (0, react_jsx_runtime.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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$12), customLabels);
+	const [selectedTabId, setSelectedTabId] = (0, react.useState)(defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
+	if (tabs.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_pagination.TabsRoot, {
+		selectedId: selectedTabId,
+		onSelectedIdChange: handleSelectedTabId,
+		"data-opt-id": "9W97K",
+		"data-opt-slug": "content-tabs.ContentTabs",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TabList, {
+			"aria-label": labels.ariaLabel,
+			children: tabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Tab, {
+				id: tab.id,
+				children: tab.label
+			}, tab.id))
+		}), activeTab && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TabPanel, {
+			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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$11), customLabels);
+	if (items.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "text-text-secondary text-sm",
+		"data-opt-id": "QRBHV",
+		"data-opt-slug": "faq-accordion.FaqAccordion",
+		children: labels.emptyMessage
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
+		focusLoop: true,
+		orientation: "vertical",
+		"data-opt-id": "QRBHV",
+		"data-opt-slug": "faq-accordion.FaqAccordion",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Composite, {
+			role: "region",
+			"aria-label": labels.ariaLabel,
+			className: "divide-border-subtle border-border divide-y rounded-lg border",
+			children: items.map((faq) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DisclosureRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+				render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DisclosureTrigger, {}),
+				children: [faq.question, /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+					})
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DisclosureContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$10), customLabels);
+	const [submitted, setSubmitted] = (0, react.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 = (0, _reopt_ai_opt_ui_primitives.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__ */ (0, react_jsx_runtime.jsx)(require_pagination.EmptyState, {
+		title: "설정 항목이 없습니다.",
+		description: "표시할 설정 필드를 추가하면 이 폼이 렌더링됩니다.",
+		"data-opt-id": "9TEEJ",
+		"data-opt-slug": "settings-form.SettingsForm"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "gap-group flex flex-col",
+		"data-opt-id": "9TEEJ",
+		"data-opt-slug": "settings-form.SettingsForm",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.FormRoot, {
+			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__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "gap-element flex flex-col",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormLabel, {
+								name: field.name,
+								children: field.label
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TagInput, {
+								value: tags,
+								onChange: (next) => form.setValue(field.name, next),
+								placeholder: field.placeholder
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: field.name })
+						]
+					}, field.name);
+				}
+				if (field.type === "radio") {
+					var _field$options;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+						className: "gap-element flex flex-col",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
+								className: "text-text-primary text-sm font-medium",
+								children: field.label
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormRadioGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "gap-group flex",
+								children: (_field$options = field.options) === null || _field$options === void 0 ? void 0 : _field$options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: "text-text-primary gap-element flex items-center text-sm",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormRadio, {
+										name: field.name,
+										value: option.value
+									}), option.label]
+								}, option.value))
+							}) }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: field.name })
+						]
+					}, field.name);
+				}
+				if (field.type === "checkbox") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "gap-element flex flex-col",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "text-text-primary gap-element flex items-center text-sm",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormCheckbox, { name: field.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: field.label })]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: field.name })]
+				}, field.name);
+				if (field.type === "textarea") {
+					var _field$rows, _field$resize;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "gap-element flex flex-col",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormLabel, {
+								name: field.name,
+								children: field.label
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.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__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: field.name })
+						]
+					}, field.name);
+				}
+				if (field.type === "select") {
+					var _field$options2;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "gap-element flex flex-col",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormLabel, {
+								name: field.name,
+								children: field.label
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSelect, {
+								name: field.name,
+								placeholder: field.placeholder,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSelectPopover, { children: (_field$options2 = field.options) === null || _field$options2 === void 0 ? void 0 : _field$options2.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSelectItem, {
+									value: option.value,
+									children: option.label
+								}, option.value)) })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: field.name })
+						]
+					}, field.name);
+				}
+				if (field.type === "switch") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: "gap-group flex items-center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSwitch, { name: field.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-text-primary text-sm font-medium",
+							children: field.label
+						}), field.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-text-secondary text-sm",
+							children: field.description
+						})]
+					})]
+				}, field.name);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "gap-element flex flex-col",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormLabel, {
+							name: field.name,
+							children: field.label
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormInput, {
+							name: field.name,
+							type: (_field$type = field.type) !== null && _field$type !== void 0 ? _field$type : "text",
+							placeholder: field.placeholder
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: field.name })
+					]
+				}, field.name);
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSubmit, { children: labels.submitButton })]
+		}), submitted && /* @__PURE__ */ (0, react_jsx_runtime.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: require_pagination.OPT_TEXT_TERTIARY,
+	running: "text-accent",
+	error: "text-danger-fg",
+	skipped: "text-text-tertiary"
+};
+const statusBadge$1 = {
+	success: require_pagination.OPT_BADGE_GREEN,
+	pending: require_pagination.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: require_pagination.OPT_BADGE_RED,
+	skipped: require_pagination.OPT_BADGE_NEUTRAL
+};
+const statusLabel$1 = {
+	success: "성공",
+	pending: "대기",
+	running: "실행 중",
+	error: "에러",
+	skipped: "건너뜀"
+};
+/** Renders the deployment timeline component. */
+function DeploymentTimeline({ steps, title = "배포 타임라인" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "gap-group flex flex-col",
+		"data-opt-id": "XXVQ2",
+		"data-opt-slug": "deployment-timeline.DeploymentTimeline",
+		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+			className: `text-sm font-semibold text-text-primary`,
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
+			focusLoop: true,
+			orientation: "vertical",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Composite, {
+				role: "list",
+				"aria-label": title,
+				className: "relative",
+				children: steps.map((step, i) => {
+					const isLast = i === steps.length - 1;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+						className: `group gap-group relative flex w-full scroll-m-2 rounded-lg px-3 py-2 ${require_pagination.OPT_FOCUS} data-[active-item]:bg-accent-subtle`,
+						role: "listitem",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex flex-col items-center",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `text-lg leading-none ${statusColor[step.status]}`,
+								"aria-label": statusLabel$1[step.status],
+								children: statusIcon[step.status]
+							}), !isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-border-subtle mt-1 w-px flex-1" })]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex-1 pb-3",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "gap-element flex items-center",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `text-sm font-medium ${require_pagination.OPT_TEXT_PRIMARY}`,
+										children: step.name
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: statusBadge$1[step.status],
+										children: statusLabel$1[step.status]
+									}),
+									step.duration && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `text-xs text-text-tertiary`,
+										children: step.duration
+									})
+								]
+							}), step.detail && /* @__PURE__ */ (0, react_jsx_runtime.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: require_pagination.OPT_DOT_GREEN,
+	paused: require_pagination.OPT_DOT_YELLOW,
+	error: require_pagination.OPT_DOT_RED
+};
+/** Renders the project switcher component. */
+function ProjectSwitcher({ projects, value, onChange, placeholder = "프로젝트 검색..." }) {
+	const [search, setSearch] = (0, react.useState)("");
+	const matches = (0, react.useMemo)(() => {
+		if (!search) return projects;
+		return (0, match_sorter.matchSorter)(projects, search, { keys: ["name", "framework"] });
+	}, [search, projects]);
+	const selected = projects.find((p) => p.id === value);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "gap-element flex flex-col",
+		"data-opt-id": "5R3AG",
+		"data-opt-slug": "project-switcher.ProjectSwitcher",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.ComboboxRoot, {
+			onValueChange: setSearch,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+					className: require_pagination.OPT_TEXT_LABEL,
+					children: "프로젝트"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxInput, {
+					placeholder: selected ? selected.name : placeholder,
+					className: require_pagination.OPT_INPUT
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.ComboboxPopover, {
+					className: "max-h-72 overflow-y-auto",
+					children: [matches.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: `py-6 text-center text-sm text-text-secondary`,
+						children: "결과가 없습니다."
+					}), matches.map((project) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.ComboboxItem, {
+						value: project.name,
+						onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(project.id),
+						className: `gap-element flex scroll-m-2 items-center ${require_pagination.OPT_ITEM_BASE} ${require_pagination.OPT_ACTIVE_ITEM}`,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `shrink-0 ${statusDot[project.status]}` }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "flex-1 truncate font-medium",
+								children: project.name
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: require_pagination.OPT_BADGE_NEUTRAL,
+								children: project.framework
+							}),
+							project.domain && /* @__PURE__ */ (0, react_jsx_runtime.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: require_pagination.OPT_DOT_RED,
+	Preview: require_pagination.OPT_DOT_YELLOW,
+	Development: require_pagination.OPT_DOT_GREEN
+};
+/** Renders the env panel component. */
+function EnvPanel({ groups, labels: customLabels }) {
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$9), customLabels);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `rounded-lg ${require_pagination.OPT_BORDER} divide-y ${require_pagination.OPT_DIVIDER} bg-surface`,
+		"data-opt-id": "ZBDWK",
+		"data-opt-slug": "env-panel.EnvPanel",
+		children: groups.map((group) => {
+			var _envDot$group$env;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DisclosureRoot, {
+				defaultOpen: group.env === "Production",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.DisclosureTrigger, {
+					className: require_pagination.OPT_DISCLOSURE_TRIGGER,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "gap-element flex items-center",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "font-medium",
+								children: group.env
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `text-xs ${require_pagination.OPT_TEXT_TERTIARY}`,
+								children: labels.varCount(group.vars.length)
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+						})
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DisclosureContent, {
+					className: require_pagination.OPT_DISCLOSURE_CONTENT,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
+						focusLoop: true,
+						orientation: "vertical",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Composite, {
+							role: "list",
+							"aria-label": labels.envVarsLabel(group.env),
+							className: "px-4 pb-3",
+							children: group.vars.map((v) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+								role: "listitem",
+								className: `gap-group flex scroll-m-2 items-center rounded px-2 py-1.5 text-sm ${require_pagination.OPT_FOCUS} data-[active-item]:bg-accent-subtle`,
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `w-44 shrink-0 truncate font-mono text-xs font-medium ${require_pagination.OPT_TEXT_PRIMARY}`,
+										children: v.key
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `flex-1 truncate font-mono text-xs ${require_pagination.OPT_TEXT_SECONDARY}`,
+										children: v.isSecret ? "••••••••" : v.value
+									}),
+									v.isSecret && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: require_pagination.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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$8), customLabels);
+	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
+	const defaultBranch = branches.find((b) => b.isDefault);
+	const [internalValue, setInternalValue] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "gap-element flex flex-col",
+		"data-opt-id": "7EDEP",
+		"data-opt-slug": "branch-select.BranchSelect",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_pagination.OPT_TEXT_LABEL,
+			children: resolvedLabel
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "gap-element flex flex-col",
+		"data-opt-id": "7EDEP",
+		"data-opt-slug": "branch-select.BranchSelect",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectRoot, {
+			value,
+			onValueChange: handleChange,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectLabel, {
+					className: require_pagination.OPT_TEXT_LABEL,
+					children: resolvedLabel
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectTrigger, {
+					className: `${require_pagination.OPT_INPUT} max-w-xs items-center justify-between gap-1`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "gap-element flex items-center truncate",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: require_pagination.OPT_BADGE_BLUE,
+								children: labels.defaultBadge
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+						})
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, {
+					className: "max-w-xs",
+					children: branches.map((branch) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectItem, {
+						value: branch.name,
+						className: `gap-element flex scroll-m-2 items-center ${require_pagination.OPT_ITEM_BASE} ${require_pagination.OPT_ACTIVE_ITEM}`,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "flex-1 truncate",
+								children: branch.name
+							}),
+							branch.isDefault && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `font-mono text-xs text-text-tertiary data-[active-item]:text-accent-fg/60`,
+								children: branch.lastCommit
+							}),
+							branch.author && /* @__PURE__ */ (0, react_jsx_runtime.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: require_pagination.OPT_BADGE_GREEN,
+	pending: require_pagination.OPT_BADGE_YELLOW,
+	error: require_pagination.OPT_BADGE_RED
+};
+const sslBadge = {
+	valid: require_pagination.OPT_BADGE_GREEN,
+	pending: require_pagination.OPT_BADGE_YELLOW,
+	expired: require_pagination.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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$7), customLabels);
+	if (domains.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "gap-group flex flex-col",
+		"data-opt-id": "A7SRM",
+		"data-opt-slug": "domain-table.DomainTable",
+		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+			className: `text-sm font-semibold text-text-primary`,
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `rounded-lg px-4 py-6 text-sm ${require_pagination.OPT_BORDER} ${require_pagination.OPT_TEXT_SECONDARY} bg-surface`,
+			children: labels.emptyMessage
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "gap-group flex flex-col",
+		"data-opt-id": "A7SRM",
+		"data-opt-slug": "domain-table.DomainTable",
+		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+			className: `text-sm font-semibold text-text-primary`,
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `overflow-x-auto rounded-lg ${require_pagination.OPT_BORDER} bg-surface`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
+				focusLoop: true,
+				focusWrap: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.Composite, {
+					role: "grid",
+					"aria-label": title,
+					className: "w-full",
+					render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {}),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+						className: "border-border-subtle bg-surface-inset border-b",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+								className: require_pagination.OPT_TH,
+								children: labels.domain
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+								className: require_pagination.OPT_TH,
+								children: labels.status
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+								className: require_pagination.OPT_TH,
+								children: labels.ssl
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+								className: require_pagination.OPT_TH,
+								children: labels.redirect
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+								className: require_pagination.OPT_TH,
+								children: labels.added
+							})
+						] })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+						className: `divide-y ${require_pagination.OPT_DIVIDER}`,
+						children: domains.map((d) => {
+							var _d$redirect, _d$addedAt;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeRow, {
+								render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {}),
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+										render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: `${require_pagination.OPT_TD} font-mono font-medium`,
+											role: "gridcell"
+										}),
+										className: require_pagination.OPT_TABLE_ROW_ACTIVE,
+										children: d.domain
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+										render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: require_pagination.OPT_TD,
+											role: "gridcell"
+										}),
+										className: require_pagination.OPT_TABLE_ROW_ACTIVE,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: statusBadge[d.status],
+											children: statusLabel[d.status]
+										})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+										render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: require_pagination.OPT_TD,
+											role: "gridcell"
+										}),
+										className: require_pagination.OPT_TABLE_ROW_ACTIVE,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: sslBadge[d.ssl],
+											children: sslLabel[d.ssl]
+										})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+										render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: require_pagination.OPT_TD,
+											role: "gridcell"
+										}),
+										className: require_pagination.OPT_TABLE_ROW_ACTIVE,
+										children: (_d$redirect = d.redirect) !== null && _d$redirect !== void 0 ? _d$redirect : "—"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+										render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+											className: require_pagination.OPT_TD_MUTED,
+											role: "gridcell"
+										}),
+										className: require_pagination.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_pagination.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] = (0, react.useState)(null);
+	const [sortDir, setSortDir] = (0, react.useState)(null);
+	const [expandedKeys, setExpandedKeys] = (0, react.useState)(/* @__PURE__ */ new Set());
+	const [page, setPage] = (0, react.useState)(0);
+	const [colWidths, setColWidths] = (0, react.useState)({});
+	const sortedData = (0, react.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 = (0, react.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 = (0, react.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 = (0, react.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 = (0, react.useCallback)(() => {
+		if (!onSelectionChange) return;
+		onSelectionChange(allSelected ? [] : allKeys);
+	}, [
+		allSelected,
+		allKeys,
+		onSelectionChange
+	]);
+	const toggleSelectRow = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("gap-group flex flex-col", className),
+		"data-opt-id": "J1KN4",
+		"data-opt-slug": "data-table.DataTable",
+		children: [
+			title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: require_pagination.cn("text-sm font-semibold", "text-text-primary"),
+				children: title
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_pagination.cn("overflow-x-auto rounded-lg", require_pagination.OPT_BORDER, "bg-surface"),
+				children: data.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_pagination.cn("px-4 py-8 text-center text-sm", require_pagination.OPT_TEXT_SECONDARY),
+					children: emptyMessage
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
+					focusLoop: true,
+					focusWrap: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.Composite, {
+						role: "grid",
+						"aria-label": title,
+						className: "w-full",
+						render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {}),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+							className: require_pagination.cn("border-border-subtle bg-surface-inset border-b", stickyHeader && "sticky top-0 z-10"),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+								selectable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+									className: require_pagination.cn("px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-tertiary", "w-10"),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Checkbox, {
+										checked: allSelected,
+										onChange: toggleSelectAll,
+										"aria-label": "Select all"
+									})
+								}),
+								expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { className: require_pagination.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__ */ (0, react_jsx_runtime.jsxs)("th", {
+										className: require_pagination.cn(require_pagination.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__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: "flex items-center",
+											children: [col.header, sortIndicator(col.id)]
+										}), resizableColumns && /* @__PURE__ */ (0, react_jsx_runtime.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) => require_pagination._objectSpread2(require_pagination._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 require_pagination._objectSpread2(require_pagination._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) => require_pagination._objectSpread2(require_pagination._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__ */ (0, react_jsx_runtime.jsx)("tbody", {
+							className: require_pagination.cn("divide-y", require_pagination.OPT_DIVIDER),
+							children: pagedData.map((row) => {
+								const key = keyExtractor(row);
+								const isExpanded = expandedKeys.has(key);
+								const isSelected = selectedSet.has(key);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeRow, {
+									render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+										className: require_pagination.cn(onRowClick ? "cursor-pointer" : void 0, (isSelected || activeRowId === key) && "bg-accent-subtle"),
+										onClick: onRowClick ? () => onRowClick(row) : void 0
+									}),
+									children: [
+										selectable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+											render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)(require_pagination.Checkbox, {
+												checked: isSelected,
+												onChange: () => toggleSelectRow(key),
+												"aria-label": `Select row ${key}`
+											})
+										}),
+										expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+											render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												onClick: (e) => {
+													e.stopPropagation();
+													toggleExpand(key);
+												},
+												className: require_pagination.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__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+												render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+													className: require_pagination.cn(require_pagination.OPT_TD, alignmentClass[(_col$align2 = col.align) !== null && _col$align2 !== void 0 ? _col$align2 : "left"], colIndex === 0 ? "font-medium" : ""),
+													role: "gridcell"
+												}),
+												className: require_pagination.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_pagination.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, require_pagination._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(require_pagination._objectSpread2(require_pagination._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 = (0, react.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 = (0, react.useSyncExternalStore)(toastStore.subscribe, toastStore.getSnapshot, toastStore.getSnapshot);
+	const visibleToasts = allToasts.length > stackLimit ? allToasts.slice(-stackLimit) : allToasts;
+	const addToast = (0, react.useCallback)((t) => toastStore.add(t), []);
+	const removeToast = (0, react.useCallback)((id) => toastStore.dismiss(id), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToastContext.Provider, {
+		value: {
+			toasts: visibleToasts,
+			addToast,
+			removeToast
+		},
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)(NotificationToast, {
+				toast: t,
+				defaultDuration,
+				onDismiss: () => toastStore.dismiss(t.id)
+			}, t.id))
+		})]
+	});
+}
+/** Provides toast. */
+function useToast() {
+	const context = (0, react.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 = (0, react.useRef)(onDismiss);
+	const dismissedRef = (0, react.useRef)(false);
+	const timerStartedAtRef = (0, react.useRef)(null);
+	const remainingDurationRef = (0, react.useRef)(duration);
+	const [paused, setPaused] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		onDismissRef.current = onDismiss;
+	}, [onDismiss]);
+	const dismissOnce = (0, react.useCallback)(() => {
+		if (dismissedRef.current) return;
+		dismissedRef.current = true;
+		onDismissRef.current();
+	}, []);
+	(0, react.useEffect)(() => {
+		dismissedRef.current = false;
+		remainingDurationRef.current = duration;
+	}, [toast.id, duration]);
+	(0, react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Alert, {
+			variant: toast.variant,
+			title: toast.title,
+			dismissible: true,
+			onDismiss: dismissOnce,
+			children: [toast.message, toast.actions && toast.actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "gap-element mt-2 flex",
+				children: toast.actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {}),
+		role: "article",
+		"aria-labelledby": itemId,
+		className: require_pagination.cn("group gap-group relative flex w-full items-start p-3", require_pagination.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "gap-element flex items-center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Badge, {
+						variant: severityVariant[failure.severity],
+						size: "sm",
+						children: mergedSeverityLabels[failure.severity]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						id: itemId,
+						className: `text-sm font-medium ${require_pagination.OPT_TEXT_PRIMARY} truncate`,
+						children: failure.title
+					})]
+				}),
+				failure.message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: `mt-1 text-xs text-text-secondary line-clamp-2`,
+					children: failure.message
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+					dateTime: failure.timestamp,
+					className: `mt-1 block text-xs ${require_pagination.OPT_TEXT_TERTIARY}`,
+					children: formatRelativeTime(failure.timestamp, mergedTimeAgo, locale)
+				})
+			]
+		}), renderActions && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		"data-opt-id": "ZAM3R",
+		"data-opt-slug": "failure-list.FailureList",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "gap-group flex flex-col",
+			children: [displayTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: `text-sm font-semibold text-text-primary`,
+				children: displayTitle
+			}), failures.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "status",
+				className: `py-8 text-center text-sm ${require_pagination.OPT_TEXT_SECONDARY}`,
+				children: labels.emptyMessage
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
+				focusLoop: true,
+				orientation: "vertical",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Composite, {
+					role: "feed",
+					"aria-label": displayTitle,
+					"aria-busy": loading,
+					className: `rounded-lg ${require_pagination.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [items.map((failure, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailureItemRow, require_pagination._objectSpread2({
+		failure,
+		isLast: index === items.length - 1 && remainingCount === 0
+	}, rowProps), failure.id)), remainingCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+		render: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [groupEntries.map(([groupName, groupItems], groupIndex) => {
+		const isLastGroup = groupIndex === groupEntries.length - 1 && remainingCount === 0;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [groupName && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)(FailureItemRow, require_pagination._objectSpread2({
+			failure,
+			isLast: isLastGroup && index === groupItems.length - 1
+		}, rowProps), failure.id))] }, groupName || "__ungrouped__");
+	}), remainingCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
+		render: /* @__PURE__ */ (0, react_jsx_runtime.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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$5), customLabels);
+	const [internalEntries, setInternalEntries] = (0, react.useState)(() => defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
+	const entries = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalEntries;
+	const keyInputRef = (0, react.useRef)(null);
+	const updateEntries = (0, react.useCallback)((next) => {
+		if (!controlledValue) setInternalEntries(next);
+		onChange === null || onChange === void 0 || onChange(next);
+	}, [controlledValue, onChange]);
+	const addEntry = (0, react.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 = (0, react.useCallback)((id) => {
+		updateEntries(entries.filter((e) => e.id !== id));
+	}, [entries, updateEntries]);
+	const updateEntry = (0, react.useCallback)((id, field, val) => {
+		updateEntries(entries.map((e) => e.id === id ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, e), {}, { [field]: val }) : e));
+	}, [entries, updateEntries]);
+	const toggleSecret = (0, react.useCallback)((id) => {
+		updateEntries(entries.map((e) => e.id === id ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, e), {}, { isSecret: !e.isSecret }) : e));
+	}, [entries, updateEntries]);
+	const canAdd = !readOnly && (!maxEntries || entries.length < maxEntries);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("gap-group flex flex-col", className),
+		"data-opt-id": "NCBWA",
+		"data-opt-slug": "key-value-editor.KeyValueEditor",
+		children: [entries.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-text-tertiary py-4 text-center text-sm",
+			children: labels.emptyMessage
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					"data-kv-id": entry.id,
+					className: require_pagination.cn("gap-element flex items-start", "border-border rounded-lg border p-3", "bg-surface"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex min-w-0 flex-1 flex-col gap-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.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: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-error text-xs",
+								children: keyError
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-text-tertiary px-1 py-1.5",
+							children: "="
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "min-w-0 flex-1",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.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: require_pagination.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("svg", {
+								className: "size-4",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								strokeWidth: 2,
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("svg", {
+								className: "size-4",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								strokeWidth: 2,
+								"aria-hidden": "true",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("svg", {
+								className: "size-4",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								strokeWidth: 2,
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									d: "M6 18L18 6M6 6l12 12"
+								})
+							})
+						})
+					]
+				}, entry.id);
+			})
+		}), canAdd && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			onClick: addEntry,
+			className: require_pagination.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__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick: () => onSelectStep === null || onSelectStep === void 0 ? void 0 : onSelectStep(step),
+		className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-text-primary truncate text-xs font-medium",
+			children: step.title
+		}), step.status && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("gap-group flex flex-col", className),
+		"data-opt-id": "4TX11",
+		"data-opt-slug": "workflow-canvas.WorkflowCanvas",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+			className: "text-text-primary text-sm font-semibold",
+			children: title
+		}), steps.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-text-secondary border-border rounded-lg border border-dashed p-8 text-center text-sm",
+			children: emptyMessage
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "border-border bg-bg-subtle relative overflow-auto rounded-lg border p-3",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "grid",
+				"aria-label": title,
+				className: "relative",
+				style: {
+					width,
+					height
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "grid",
+						style: {
+							gridTemplateColumns: `repeat(${cols}, ${cellSize}px)`,
+							gridTemplateRows: `repeat(${rows}, ${cellSize}px)`,
+							gap
+						},
+						children: Array.from({ length: rows * cols }, (_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"aria-hidden": "true",
+							className: "border-border-subtle bg-surface/30 rounded-md border border-dashed"
+						}, i))
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+								x1,
+								y1,
+								x2,
+								y2,
+								stroke: "currentColor",
+								strokeOpacity: "0.35",
+								strokeWidth: "2"
+							}), connection.label && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 = (0, react.useRef)(onRefresh);
+	callbackRef.current = onRefresh;
+	(0, react.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 = (0, _reopt_ai_opt_charts.measureTimeWindow)(range, {
+		timeZone: options.timeZone,
+		now: options.now
+	});
+	if (window.isInvalid) return {
+		text: labels.invalid,
+		isInvalid: true
+	};
+	const fromParts = (0, _reopt_ai_opt_charts.parseRelativeParts)(range.from);
+	const toParts = (0, _reopt_ai_opt_charts.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((0, _reopt_ai_opt_charts.formatCountUnit)(1, fromParts.roundUnit, options.locale).replace(/^1\s*/, "")),
+		isInvalid: false
+	};
+	if ((0, _reopt_ai_opt_charts.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 ? (0, _reopt_ai_opt_charts.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 : (0, _reopt_ai_opt_charts.formatDuration)(window.duration, options.locale);
+		const prefix = exact || (0, _reopt_ai_opt_charts.isExactMinutes)(window.duration) ? "" : "~";
+		return {
+			text: anchoredAtEnd ? labels.last(`${prefix}${duration}`) : labels.next(`${prefix}${duration}`),
+			isInvalid: false
+		};
+	}
+	const dateOnly = (0, _reopt_ai_opt_charts.isDateOnly)(range.from) && (0, _reopt_ai_opt_charts.isDateOnly)(range.to);
+	const from = (0, _reopt_ai_opt_charts.formatInstant)(window.from, require_pagination._objectSpread2(require_pagination._objectSpread2({}, options), {}, { dateOnly }));
+	const to = (0, _reopt_ai_opt_charts.formatInstant)(window.to, require_pagination._objectSpread2(require_pagination._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 = require_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$4), customLabels), {}, { units: require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$4.units), customLabels === null || customLabels === void 0 ? void 0 : customLabels.units) });
+	const [open, setOpen] = (0, react.useState)(false);
+	const [draft, setDraft] = (0, react.useState)(null);
+	const [quickCount, setQuickCount] = (0, react.useState)("15");
+	const [quickUnit, setQuickUnit] = (0, react.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 = (0, react.useMemo)(() => describeRange(value, labels, {
+		locale,
+		timeZone
+	}), [
+		value,
+		locale,
+		timeZone,
+		customLabels
+	]);
+	const boundState = (0, react.useCallback)((expression) => (0, _reopt_ai_opt_charts.parseTimeExpression)(expression, { timeZone }) === null ? labels.invalid : void 0, [timeZone, labels]);
+	const commit = (0, react.useCallback)((range) => {
+		setDraft(null);
+		onChange(range);
+	}, [onChange]);
+	const apply = (0, react.useCallback)(() => {
+		if (draft) commit(draft);
+		else onRefresh === null || onRefresh === void 0 || onRefresh();
+	}, [
+		draft,
+		commit,
+		onRefresh
+	]);
+	const commitOnEnter = (0, react.useCallback)((event) => {
+		if (event.key !== "Enter") return;
+		apply();
+		setOpen(false);
+	}, [apply]);
+	const applyQuick = (0, react.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 = (0, react.useCallback)((direction) => {
+		const next = (0, _reopt_ai_opt_charts.shiftTimeRange)(value, direction, { timeZone });
+		if (next) commit(next);
+	}, [
+		value,
+		timeZone,
+		commit
+	]);
+	const zoom = (0, react.useCallback)((factor) => {
+		const next = (0, _reopt_ai_opt_charts.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((0, _reopt_ai_opt_charts.formatDuration)(refresh.interval, locale));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("bg-surface inline-flex items-center rounded-lg border", require_pagination.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__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverRoot, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverTrigger, {
+					className: require_pagination.cn("text-text-primary h-10 gap-2", description.isInvalid && "text-danger-fg"),
+					disabled,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clock, {
+						className: "text-text-tertiary h-4 w-4",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "truncate text-sm",
+						children: description.text
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverContent, {
+					className: "gap-group flex w-80 flex-col",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-text-primary text-xs font-medium",
+								children: labels.quickSelect
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-end gap-2",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.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__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectRoot, {
+										value: quickUnit,
+										setValue: (next) => setQuickUnit(selectValue(next)),
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectTrigger, {
+											minWidth: 110,
+											"aria-label": labels.quickSelect
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectItem, {
+											value: unit,
+											children: labels.units[unit]
+										}, unit)) })]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+										variant: "secondary",
+										size: "sm",
+										onClick: applyQuick,
+										children: labels.apply
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+								label: labels.start,
+								size: "sm",
+								value: editing.from,
+								error: boundState(editing.from),
+								hint: labels.startHint,
+								onChange: (event) => setDraft(require_pagination._objectSpread2(require_pagination._objectSpread2({}, editing), {}, { from: event.target.value })),
+								onKeyDown: commitOnEnter
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+								label: labels.end,
+								size: "sm",
+								value: editing.to,
+								error: boundState(editing.to),
+								onChange: (event) => setDraft(require_pagination._objectSpread2(require_pagination._objectSpread2({}, editing), {}, { to: event.target.value })),
+								onKeyDown: commitOnEnter
+							})]
+						}),
+						presets && presets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeList, {
+							title: labels.commonlyUsed,
+							items: presets,
+							onPick: (range) => {
+								commit(range);
+								setOpen(false);
+							}
+						}),
+						recentRanges && recentRanges.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeList, {
+							title: labels.recentlyUsed,
+							items: recentRanges.slice(0, 5),
+							onPick: (range) => {
+								commit(range);
+								setOpen(false);
+							}
+						}),
+						onRefreshChange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-text-primary text-xs font-medium",
+								children: labels.autoRefresh
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectRoot, {
+								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__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectTrigger, {
+									minWidth: 140,
+									"aria-label": labels.autoRefresh
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectItem, {
+									value: String(interval),
+									children: interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(interval, locale))
+								}, interval)) })]
+							})]
+						})
+					]
+				})]
+			}),
+			showWindowButtons && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_pagination.cn("flex items-center border-l", "border border-border"),
+				role: "group",
+				"aria-label": labels.previous,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.previous,
+						disabled: disabled || description.isInvalid,
+						onClick: () => step(-1),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.zoomIn,
+						disabled: disabled || description.isInvalid,
+						onClick: () => zoom(-zoomFactor),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.zoomOut,
+						disabled: disabled || description.isInvalid,
+						onClick: () => zoom(zoomFactor),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.nextWindow,
+						disabled: disabled || description.isInvalid,
+						onClick: () => step(1),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					})
+				]
+			}),
+			(onRefresh || showUpdateButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_pagination.cn("border-l pl-2 pr-2", "border border-border"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					variant: hasChanges ? "primary" : "secondary",
+					size: "sm",
+					loading: isLoading,
+					disabled: disabled || description.isInvalid,
+					onClick: apply,
+					leftIcon: hasChanges ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+		variant: "ghost",
+		size: "sm",
+		"aria-label": label,
+		title: label,
+		disabled,
+		onClick,
+		children
+	});
+}
+function RangeList({ title, items, onPick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "gap-element flex flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-text-primary text-xs font-medium",
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "grid grid-cols-2 gap-1",
+			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: require_pagination.cn("hover:bg-bg-subtle w-full cursor-pointer rounded px-2 py-1 text-left text-xs", require_pagination.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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$3), customLabels);
+	const [history, setHistory] = (0, react.useState)([]);
+	const [hidden, setHidden] = (0, react.useState)([]);
+	const resolved = (0, react.useMemo)(() => (0, _reopt_ai_opt_charts.resolveTimeRange)(range, { timeZone }), [range, timeZone]);
+	const visibleSeries = (0, react.useMemo)(() => series.filter((def) => !hidden.includes(def.dataKey)), [series, hidden]);
+	const handleRangeSelect = (0, react.useCallback)((selection) => {
+		setHistory((current) => [...current, range].slice(-10));
+		onRangeChange((0, _reopt_ai_opt_charts.toAbsoluteRange)(selection));
+	}, [range, onRangeChange]);
+	const goBack = (0, react.useCallback)(() => {
+		setHistory((current) => {
+			const previous = current[current.length - 1];
+			if (previous) onRangeChange(previous);
+			return current.slice(0, -1);
+		});
+	}, [onRangeChange]);
+	const setRange = (0, react.useCallback)((next) => {
+		setHistory([]);
+		onRangeChange(next);
+	}, [onRangeChange]);
+	const toggleSeries = (0, react.useCallback)((dataKey) => {
+		setHidden((current) => current.includes(dataKey) ? current.filter((key) => key !== dataKey) : [...current, dataKey]);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: require_pagination.cn(require_pagination.OPT_SURFACE, require_pagination.OPT_BORDER, "flex flex-col", className),
+		"aria-label": ariaLabel,
+		"data-opt-id": "Y0XCY",
+		"data-opt-slug": "time-series-panel.TimeSeriesPanel",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+			className: "gap-group flex flex-wrap items-start justify-between px-5 pt-5 pb-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "gap-element flex min-w-0 flex-col",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "text-text-primary truncate text-base font-semibold",
+					children: title
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_pagination.cn("text-text-secondary", "truncate text-sm"),
+					children: description
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "gap-element flex flex-wrap items-center",
+				children: [
+					history.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: goBack,
+						leftIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Undo2, {
+							className: "h-3.5 w-3.5",
+							"aria-hidden": "true"
+						}),
+						children: labels.back
+					}),
+					actions,
+					showRangeControl && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "px-2 pb-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_charts.TimeSeriesChart, require_pagination._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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$2), customLabels);
+	const rowHeight = ROW_HEIGHT[density];
+	const scrollRef = (0, react.useRef)(null);
+	const [scrollTop, setScrollTop] = (0, react.useState)(0);
+	const [viewportHeight, setViewportHeight] = (0, react.useState)(0);
+	const followingRef = (0, react.useRef)(true);
+	const previousTopIdRef = (0, react.useRef)(null);
+	const previousLengthRef = (0, react.useRef)(0);
+	(0, react.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
+	]);
+	(0, react.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 = (0, react.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.
+	*/
+	(0, react.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.
+	*/
+	(0, react.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 = (0, react.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 = (0, react.useMemo)(() => rows.slice(firstVisible, lastVisible), [
+		rows,
+		firstVisible,
+		lastVisible
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("@container/log flex min-h-0 flex-col", className),
+		"data-opt-id": "NJ4N9",
+		"data-opt-slug": "log-table.LogTable",
+		children: [showHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogTableHeader, {
+			columns,
+			sort,
+			onSortChange,
+			density,
+			labels
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: { height: totalHeight },
+					className: "relative",
+					children: visibleRows.map((row, index) => {
+						var _isNew;
+						const id = getRowId(row);
+						return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "gap-element text-text-tertiary flex items-center justify-center py-3 text-xs",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Spinner, {
+						size: "sm",
+						"aria-hidden": true
+					}), labels.loadingMore]
+				}),
+				!hasMore && rows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_pagination.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 = (0, react.forwardRef)(LogTableInner);
+function LogTableHeader({ columns, sort, onSortChange, density, labels }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "row",
+		className: require_pagination.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				column.marker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": true,
+					className: "size-1.5 shrink-0"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: column.header
+				}),
+				active && (sort.direction === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, {
+					className: "size-3 shrink-0",
+					"aria-hidden": true
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+					className: "size-3 shrink-0",
+					"aria-hidden": true
+				}))
+			] });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "columnheader",
+				"aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
+				className: require_pagination.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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: require_pagination.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: "size-1.5 shrink-0 rounded-full",
+						style: { backgroundColor: `hsl(${hueOf(text)} 65% 55%)` }
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_pagination.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__ */ (0, react_jsx_runtime.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 = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_pagination.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
+				className: "size-3",
+				"aria-hidden": true
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$1), customLabels);
+	const inputRef = (0, react.useRef)(null);
+	const [text, setText] = (0, react.useState)(() => formatQuery(value));
+	const [focused, setFocused] = (0, react.useState)(false);
+	const [highlighted, setHighlighted] = (0, react.useState)(0);
+	const committedRef = (0, react.useRef)(formatQuery(value));
+	(0, react.useEffect)(() => {
+		const next = formatQuery(value);
+		if (next === committedRef.current) return;
+		committedRef.current = next;
+		if (!focused) setText(next);
+	}, [value, focused]);
+	const parsed = (0, react.useMemo)(() => parseQueryWithDiagnostics(text), [text]);
+	const commit = (0, react.useCallback)((nextText) => {
+		const nextQuery = parseQueryWithDiagnostics(nextText).query;
+		committedRef.current = formatQuery(nextQuery);
+		onChange(nextQuery);
+	}, [onChange]);
+	const suggestions = useSuggestions(text, parsed.trailing, fields);
+	const applySuggestion = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("relative flex min-w-0 flex-col gap-1.5", className),
+		"data-opt-id": "JSVZ1",
+		"data-opt-slug": "query-bar.QueryBar",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_pagination.cn("bg-surface flex h-9 items-center gap-2 rounded-md border px-2.5", require_pagination.OPT_BORDER, "focus-within:border-accent transition-colors", disabled && "opacity-60"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
+						className: "text-text-tertiary size-4 shrink-0",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.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: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": labels.clear,
+						title: labels.clear,
+						className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+							className: "size-3.5",
+							"aria-hidden": true
+						})
+					})
+				]
+			}),
+			showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				id: "query-bar-suggestions",
+				role: "listbox",
+				className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": index === highlighted,
+					className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-text-primary truncate font-mono",
+						children: suggestion.label
+					}), suggestion.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-text-tertiary shrink-0 text-xs",
+						children: suggestion.hint
+					})]
+				}) }, `${suggestion.kind}-${suggestion.label}`))
+			}),
+			showClauses && value.clauses.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "flex flex-wrap items-center gap-1.5",
+				children: value.clauses.map((clause, index) => {
+					const label = describeClause(clause);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+						className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate",
+							children: label
+						}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+								className: "size-3",
+								"aria-hidden": true
+							})
+						})]
+					}, `${label}-${index}`);
+				})
+			}),
+			parsed.diagnostics.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryDiagnostics, { diagnostics: parsed.diagnostics }),
+			labels.syntaxHint && !showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-text-tertiary text-xs",
+				children: labels.syntaxHint
+			})
+		]
+	});
+}
+QueryBar.displayName = "QueryBar";
+function QueryDiagnostics({ diagnostics }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: "text-warning-fg flex flex-col gap-0.5 text-xs",
+		children: diagnostics.map((diagnostic, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.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 (0, react.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 = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels), customLabels);
+	const [search, setSearch] = (0, react.useState)("");
+	const groups = (0, react.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 = (0, react.useMemo)(() => (values !== null && values !== void 0 ? values : []).reduce((sum, entry) => sum + entry.count, 0), [values]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+		className: require_pagination.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_pagination.cn("flex items-center gap-2 border-b px-3 py-2", "focus-within:border-accent transition-colors", require_pagination.OPT_BORDER),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
+					className: "text-text-tertiary size-3.5 shrink-0",
+					"aria-hidden": true
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "search",
+					"aria-label": labels.searchLabel,
+					placeholder: labels.searchPlaceholder,
+					className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-h-0 flex-1 overflow-y-auto",
+				children: groups.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "px-3 py-4 text-xs"),
+					children: labels.empty
+				}) : groups.map(([group, groupFields]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [group && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+					className: require_pagination.cn("text-text-tertiary", "px-3 pt-3 pb-1 text-[11px] font-medium tracking-wide uppercase"),
+					children: group
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: groupFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "hover:bg-bg-subtle group/field flex items-center gap-1.5 px-3 py-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_pagination.cn("text-text-tertiary", "w-8 shrink-0 truncate font-mono text-[10px] uppercase"),
+				children: field.type
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-text-primary truncate font-mono text-xs",
+				children: field.name
+			})]
+		}), onToggleColumn && columnable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.jsxs)("p", {
+		className: require_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "flex items-center gap-2 px-3 pb-2 text-xs"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Spinner, {
+			size: "sm",
+			"aria-hidden": true
+		}), labels.loadingValues]
+	});
+	if (!values || values.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: require_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "px-3 pb-2 text-xs"),
+		children: labels.noValues
+	});
+	const denominator = sampledRows !== null && sampledRows !== void 0 ? sampledRows : total;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-1 px-3 pt-1 pb-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+			className: require_pagination.cn(require_pagination.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "group/value flex flex-col gap-0.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-text-secondary min-w-0 flex-1 truncate font-mono text-[11px]",
+							title: entry.value,
+							children: entry.value || "—"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: require_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "shrink-0 text-[11px] tabular-nums"),
+							children: [Math.round(share * 100), "%"]
+						}),
+						onFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "hidden shrink-0 items-center gap-0.5 group-hover/value:flex focus-within:flex",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
+									className: "size-3",
+									"aria-hidden": true
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, {
+									className: "size-3",
+									"aria-hidden": true
+								})
+							})]
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-bg-muted h-1 w-full overflow-hidden rounded-full",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "bg-accent h-full rounded-full",
+						style: { width: `${Math.max(2, Math.round(share * 100))}%` }
+					})
+				})]
+			}, entry.value);
+		})]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "AppMenubar", {
+	enumerable: true,
+	get: function() {
+		return AppMenubar;
+	}
+});
+Object.defineProperty(exports, "BranchSelect", {
+	enumerable: true,
+	get: function() {
+		return BranchSelect;
+	}
+});
+Object.defineProperty(exports, "Command", {
+	enumerable: true,
+	get: function() {
+		return Command;
+	}
+});
+Object.defineProperty(exports, "CommandDialog", {
+	enumerable: true,
+	get: function() {
+		return CommandDialog;
+	}
+});
+Object.defineProperty(exports, "CommandEmpty", {
+	enumerable: true,
+	get: function() {
+		return CommandEmpty;
+	}
+});
+Object.defineProperty(exports, "CommandGroup", {
+	enumerable: true,
+	get: function() {
+		return CommandGroup;
+	}
+});
+Object.defineProperty(exports, "CommandInput", {
+	enumerable: true,
+	get: function() {
+		return CommandInput;
+	}
+});
+Object.defineProperty(exports, "CommandItem", {
+	enumerable: true,
+	get: function() {
+		return CommandItem;
+	}
+});
+Object.defineProperty(exports, "CommandList", {
+	enumerable: true,
+	get: function() {
+		return CommandList;
+	}
+});
+Object.defineProperty(exports, "CommandPalette", {
+	enumerable: true,
+	get: function() {
+		return CommandPalette;
+	}
+});
+Object.defineProperty(exports, "CommandPaletteTrigger", {
+	enumerable: true,
+	get: function() {
+		return CommandPaletteTrigger;
+	}
+});
+Object.defineProperty(exports, "CommandSeparator", {
+	enumerable: true,
+	get: function() {
+		return CommandSeparator;
+	}
+});
+Object.defineProperty(exports, "CommandShortcut", {
+	enumerable: true,
+	get: function() {
+		return CommandShortcut;
+	}
+});
+Object.defineProperty(exports, "ContentTabs", {
+	enumerable: true,
+	get: function() {
+		return ContentTabs;
+	}
+});
+Object.defineProperty(exports, "DEFAULT_TIME_PRESETS", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_TIME_PRESETS;
+	}
+});
+Object.defineProperty(exports, "DashboardGrid", {
+	enumerable: true,
+	get: function() {
+		return DashboardGrid;
+	}
+});
+Object.defineProperty(exports, "DataTable", {
+	enumerable: true,
+	get: function() {
+		return DataTable;
+	}
+});
+Object.defineProperty(exports, "DeploymentTimeline", {
+	enumerable: true,
+	get: function() {
+		return DeploymentTimeline;
+	}
+});
+Object.defineProperty(exports, "DomainTable", {
+	enumerable: true,
+	get: function() {
+		return DomainTable;
+	}
+});
+Object.defineProperty(exports, "EMPTY_QUERY", {
+	enumerable: true,
+	get: function() {
+		return EMPTY_QUERY;
+	}
+});
+Object.defineProperty(exports, "EditorToolbar", {
+	enumerable: true,
+	get: function() {
+		return EditorToolbar;
+	}
+});
+Object.defineProperty(exports, "EnvPanel", {
+	enumerable: true,
+	get: function() {
+		return EnvPanel;
+	}
+});
+Object.defineProperty(exports, "FailureList", {
+	enumerable: true,
+	get: function() {
+		return FailureList;
+	}
+});
+Object.defineProperty(exports, "FaqAccordion", {
+	enumerable: true,
+	get: function() {
+		return FaqAccordion;
+	}
+});
+Object.defineProperty(exports, "FieldSidebar", {
+	enumerable: true,
+	get: function() {
+		return FieldSidebar;
+	}
+});
+Object.defineProperty(exports, "KeyValueEditor", {
+	enumerable: true,
+	get: function() {
+		return KeyValueEditor;
+	}
+});
+Object.defineProperty(exports, "LogTable", {
+	enumerable: true,
+	get: function() {
+		return LogTable;
+	}
+});
+Object.defineProperty(exports, "NotificationToast", {
+	enumerable: true,
+	get: function() {
+		return NotificationToast;
+	}
+});
+Object.defineProperty(exports, "ProjectSwitcher", {
+	enumerable: true,
+	get: function() {
+		return ProjectSwitcher;
+	}
+});
+Object.defineProperty(exports, "QueryBar", {
+	enumerable: true,
+	get: function() {
+		return QueryBar;
+	}
+});
+Object.defineProperty(exports, "SearchCombobox", {
+	enumerable: true,
+	get: function() {
+		return SearchCombobox;
+	}
+});
+Object.defineProperty(exports, "SettingsForm", {
+	enumerable: true,
+	get: function() {
+		return SettingsForm;
+	}
+});
+Object.defineProperty(exports, "SidebarNav", {
+	enumerable: true,
+	get: function() {
+		return SidebarNav;
+	}
+});
+Object.defineProperty(exports, "StatusSelect", {
+	enumerable: true,
+	get: function() {
+		return StatusSelect;
+	}
+});
+Object.defineProperty(exports, "TimeRangeControl", {
+	enumerable: true,
+	get: function() {
+		return TimeRangeControl;
+	}
+});
+Object.defineProperty(exports, "TimeSeriesPanel", {
+	enumerable: true,
+	get: function() {
+		return TimeSeriesPanel;
+	}
+});
+Object.defineProperty(exports, "ToastProvider", {
+	enumerable: true,
+	get: function() {
+		return ToastProvider;
+	}
+});
+Object.defineProperty(exports, "WorkflowCanvas", {
+	enumerable: true,
+	get: function() {
+		return WorkflowCanvas;
+	}
+});
+Object.defineProperty(exports, "addClause", {
+	enumerable: true,
+	get: function() {
+		return addClause;
+	}
+});
+Object.defineProperty(exports, "applyCellAction", {
+	enumerable: true,
+	get: function() {
+		return applyCellAction;
+	}
+});
+Object.defineProperty(exports, "describeClause", {
+	enumerable: true,
+	get: function() {
+		return describeClause;
+	}
+});
+Object.defineProperty(exports, "fieldValues", {
+	enumerable: true,
+	get: function() {
+		return fieldValues;
+	}
+});
+Object.defineProperty(exports, "formatClause", {
+	enumerable: true,
+	get: function() {
+		return formatClause;
+	}
+});
+Object.defineProperty(exports, "formatQuery", {
+	enumerable: true,
+	get: function() {
+		return formatQuery;
+	}
+});
+Object.defineProperty(exports, "isEmptyQuery", {
+	enumerable: true,
+	get: function() {
+		return isEmptyQuery;
+	}
+});
+Object.defineProperty(exports, "parseQuery", {
+	enumerable: true,
+	get: function() {
+		return parseQuery;
+	}
+});
+Object.defineProperty(exports, "parseQueryWithDiagnostics", {
+	enumerable: true,
+	get: function() {
+		return parseQueryWithDiagnostics;
+	}
+});
+Object.defineProperty(exports, "queryFields", {
+	enumerable: true,
+	get: function() {
+		return queryFields;
+	}
+});
+Object.defineProperty(exports, "quoteValue", {
+	enumerable: true,
+	get: function() {
+		return quoteValue;
+	}
+});
+Object.defineProperty(exports, "removeClause", {
+	enumerable: true,
+	get: function() {
+		return removeClause;
+	}
+});
+Object.defineProperty(exports, "toast", {
+	enumerable: true,
+	get: function() {
+		return toast;
+	}
+});
+Object.defineProperty(exports, "useAutoRefresh", {
+	enumerable: true,
+	get: function() {
+		return useAutoRefresh;
+	}
+});
+Object.defineProperty(exports, "useToast", {
+	enumerable: true,
+	get: function() {
+		return useToast;
+	}
+});
+Object.defineProperty(exports, "withFieldValue", {
+	enumerable: true,
+	get: function() {
+		return withFieldValue;
+	}
+});
+Object.defineProperty(exports, "withoutField", {
+	enumerable: true,
+	get: function() {
+		return withoutField;
+	}
+});