@reopt-ai/opt-ui 1.5.0 → 1.6.0

package/dist/workflow-canvas-3Jeevkgy.cjs

@@ -0,0 +1,2599 @@
+"use client";
+const require_pagination = require("./pagination-Uv3CnGJz.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 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 }) {
+	if (commands.length === 0) return null;
+	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)(() => {
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [handleKeyDown]);
+	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$13 = { 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$13), 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$12 = {
+	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$12), 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$11 = {
+	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$11), 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$10 = { 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$10), 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$9 = { ariaLabel: "문서 네비게이션" };
+/** Renders the sidebar nav component. */
+function SidebarNav({ items, labels: customLabels }) {
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$9), customLabels);
+	if (items.length === 0) return null;
+	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]);
+	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$8 = { 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$8), 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$7 = {
+	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$7), customLabels);
+	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 [selectedTabId, setSelectedTabId] = (0, react.useState)(defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
+	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$6 = {
+	ariaLabel: "자주 묻는 질문",
+	emptyMessage: "등록된 FAQ가 없습니다."
+};
+/** Renders the faq accordion component. */
+function FaqAccordion({ items, labels: customLabels }) {
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$6), 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$5 = {
+	formAriaLabel: "설정 폼",
+	submitButton: "저장",
+	successMessage: "설정이 저장되었습니다."
+};
+/** Renders the settings form component. */
+function SettingsForm({ fields, onSubmit, labels: customLabels }) {
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$5), customLabels);
+	const [submitted, setSubmitted] = (0, react.useState)(false);
+	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"
+	});
+	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);
+		}
+	});
+	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$4 = {
+	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$4), 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$3 = {
+	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$3), 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$2 = {
+	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$2), 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$1 = {
+	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$1.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$1.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$1.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$1.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$1.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$1.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$1.severityLabels.warning
+	};
+	const labels = {
+		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$1.title,
+		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$1.emptyMessage,
+		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$1.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 = {
+	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), 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
+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, "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, "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, "KeyValueEditor", {
+	enumerable: true,
+	get: function() {
+		return KeyValueEditor;
+	}
+});
+Object.defineProperty(exports, "NotificationToast", {
+	enumerable: true,
+	get: function() {
+		return NotificationToast;
+	}
+});
+Object.defineProperty(exports, "ProjectSwitcher", {
+	enumerable: true,
+	get: function() {
+		return ProjectSwitcher;
+	}
+});
+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, "ToastProvider", {
+	enumerable: true,
+	get: function() {
+		return ToastProvider;
+	}
+});
+Object.defineProperty(exports, "WorkflowCanvas", {
+	enumerable: true,
+	get: function() {
+		return WorkflowCanvas;
+	}
+});
+Object.defineProperty(exports, "toast", {
+	enumerable: true,
+	get: function() {
+		return toast;
+	}
+});
+Object.defineProperty(exports, "useToast", {
+	enumerable: true,
+	get: function() {
+		return useToast;
+	}
+});