@reopt-ai/opt-ui 1.9.0 → 1.11.0

package/dist/{field-sidebar-mFHemxBz.cjs → field-sidebar-DAuN4jPV.cjs}

@@ -1,14 +1,14 @@
 "use client";
-const require_highlight = require("./highlight-CGcrYGMC.cjs");
+const require_text_truncate = require("./text-truncate-BZdL1k5Z.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-react = require_highlight.__toESM(react, 1);
+react = require_text_truncate.__toESM(react, 1);
 let _reopt_ai_opt_ui_primitives = require("@reopt-ai/opt-ui-primitives");
 let lucide_react = require("lucide-react");
 let _reopt_ai_opt_charts = require("@reopt-ai/opt-charts");
 let match_sorter = require("match-sorter");
 let next_link = require("next/link");
-next_link = require_highlight.__toESM(next_link, 1);
+next_link = require_text_truncate.__toESM(next_link, 1);
 let next_navigation = require("next/navigation");
 //#region src/core/command.tsx
 const _excluded = ["className"];
@@ -27,27 +27,27 @@ const _excluded7 = ["className"];
 const _excluded8 = ["className"];
 /** Renders the `Command` component. */
 function Command(_ref) {
-	let { className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandRoot, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("bg-surface text-text-primary flex w-full flex-col overflow-hidden rounded-xl", className) }, props), {}, {
+	let { className } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandRoot, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.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_highlight.DialogRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.DialogRoot, {
 		open,
 		onOpenChange,
 		"data-opt-id": "DVRSX",
 		"data-opt-slug": "command.CommandDialog",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.DialogPanel, {
-			className: require_highlight.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.jsxs)(require_text_truncate.DialogPanel, {
+			className: require_text_truncate.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_highlight.DialogHeading, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.DialogHeading, {
 					className: "sr-only",
 					children: title
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DialogDescription, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.DialogDescription, {
 					className: "sr-only",
 					children: description
 				}),
@@ -63,10 +63,10 @@ function CommandDialog({ open, onOpenChange, title = "Command Palette", descript
 }
 /** Renders the `CommandInput` component with a leading search icon. */
 function CommandInput(_ref2) {
-	let { className, trailing, wrapperClassName, placeholder, "aria-label": ariaLabel } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2);
+	let { className, trailing, wrapperClassName, placeholder, "aria-label": ariaLabel } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-slot": "command-input-wrapper",
-		className: require_highlight.cn("border-border-subtle gap-element flex h-12 items-center border-b px-3", wrapperClassName),
+		className: require_text_truncate.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: [
@@ -74,8 +74,8 @@ function CommandInput(_ref2) {
 				"aria-hidden": true,
 				className: "text-text-tertiary size-4 shrink-0"
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandInput, require_highlight._objectSpread2({
-				className: require_highlight.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),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandInput, require_text_truncate._objectSpread2({
+				className: require_text_truncate.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)),
@@ -85,9 +85,9 @@ function CommandInput(_ref2) {
 }
 /** Renders the `CommandList` component. */
 function CommandList(_ref3) {
-	let { className, "aria-label": ariaLabel } = _ref3, props = require_highlight._objectWithoutProperties(_ref3, _excluded3);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandList, require_highlight._objectSpread2(require_highlight._objectSpread2({
-		className: require_highlight.cn("max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1", className),
+	let { className, "aria-label": ariaLabel } = _ref3, props = require_text_truncate._objectWithoutProperties(_ref3, _excluded3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandList, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
+		className: require_text_truncate.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",
@@ -96,21 +96,21 @@ function CommandList(_ref3) {
 }
 /** Renders the `CommandEmpty` component. */
 function CommandEmpty(_ref4) {
-	let { className } = _ref4, props = require_highlight._objectWithoutProperties(_ref4, _excluded4);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandEmpty, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("text-text-tertiary py-6 text-center text-sm", className) }, props), {}, {
+	let { className } = _ref4, props = require_text_truncate._objectWithoutProperties(_ref4, _excluded4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandEmpty, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.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_highlight._objectWithoutProperties(_ref5, _excluded5);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandGroup, require_highlight._objectSpread2(require_highlight._objectSpread2({
+	let { className, heading } = _ref5, props = require_text_truncate._objectWithoutProperties(_ref5, _excluded5);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandGroup, require_text_truncate._objectSpread2(require_text_truncate._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_highlight.cn("py-1", className)
+		className: require_text_truncate.cn("py-1", className)
 	}, props), {}, {
 		"data-opt-id": "JPK1Y",
 		"data-opt-slug": "command.CommandGroup"
@@ -118,26 +118,26 @@ function CommandGroup(_ref5) {
 }
 /** Renders the `CommandSeparator` component. */
 function CommandSeparator(_ref6) {
-	let { className } = _ref6, props = require_highlight._objectWithoutProperties(_ref6, _excluded6);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandSeparator, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("bg-border-subtle -mx-1 my-1 h-px", className) }, props), {}, {
+	let { className } = _ref6, props = require_text_truncate._objectWithoutProperties(_ref6, _excluded6);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandSeparator, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.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_highlight._objectWithoutProperties(_ref7, _excluded7);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandItem, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.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), {}, {
+	let { className } = _ref7, props = require_text_truncate._objectWithoutProperties(_ref7, _excluded7);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandItem, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.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_highlight._objectWithoutProperties(_ref8, _excluded8);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", require_highlight._objectSpread2(require_highlight._objectSpread2({
+	let { className } = _ref8, props = require_text_truncate._objectWithoutProperties(_ref8, _excluded8);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 		"data-slot": "command-shortcut",
-		className: require_highlight.cn("text-text-tertiary ml-auto text-xs tracking-widest", "data-[active-item]:text-accent-fg/80", className)
+		className: require_text_truncate.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"
@@ -156,7 +156,7 @@ const DEFAULT_LABELS = {
 };
 /** Renders the command palette component. */
 function CommandPalette({ commands, open, onOpenChange, onSelect, inline = false, labels, footer, empty, inputTrailing, className }) {
-	const resolvedLabels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, DEFAULT_LABELS), labels);
+	const resolvedLabels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, DEFAULT_LABELS), labels);
 	const hasCommands = commands.length > 0;
 	const grouped = (0, react.useMemo)(() => {
 		const map = /* @__PURE__ */ new Map();
@@ -185,7 +185,7 @@ function CommandPalette({ commands, open, onOpenChange, onSelect, inline = false
 			"aria-label": resolvedLabels.input,
 			placeholder: resolvedLabels.placeholder,
 			onKeyDown: handleInputKeyDown,
-			trailing: inputTrailing !== null && inputTrailing !== void 0 ? inputTrailing : !inline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Kbd, { children: resolvedLabels.escape }) : void 0
+			trailing: inputTrailing !== null && inputTrailing !== void 0 ? inputTrailing : !inline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Kbd, { children: resolvedLabels.escape }) : void 0
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CommandList, {
 			"aria-label": resolvedLabels.list,
@@ -208,7 +208,7 @@ function CommandPalette({ commands, open, onOpenChange, onSelect, inline = false
 	if (inline) {
 		if (!open) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
-			className: require_highlight.cn("border-border bg-surface w-full max-w-lg border shadow-lg", className),
+			className: require_text_truncate.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
@@ -254,7 +254,7 @@ function CommandPaletteTrigger({ commands, onSelect, labels }) {
 }
 //#endregion
 //#region src/shells/dashboard-grid.tsx
-const defaultLabels$18 = { ariaLabel: "대시보드 통계" };
+const defaultLabels$21 = { ariaLabel: "대시보드 통계" };
 const MIN_DASHBOARD_COLUMNS = 1;
 const MAX_DASHBOARD_COLUMNS = 12;
 function normalizeDashboardColumns(columns) {
@@ -263,7 +263,7 @@ function normalizeDashboardColumns(columns) {
 }
 /** Renders the dashboard grid component. */
 function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$18), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$21), customLabels);
 	const columnCount = normalizeDashboardColumns(columns);
 	const rowStyle = { "--opt-dashboard-grid-columns": `repeat(${columnCount}, minmax(0, 1fr))` };
 	const rows = [];
@@ -283,7 +283,7 @@ function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
 				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_highlight.StatCard, require_highlight._objectSpread2({}, stat))
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.StatCard, require_text_truncate._objectSpread2({}, stat))
 				}, stat.id))
 			}, ri))
 		})
@@ -291,13 +291,13 @@ function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/search-combobox.tsx
-const defaultLabels$17 = {
+const defaultLabels$20 = {
 	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_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$17), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$20), customLabels);
 	const inputId = (0, react.useId)();
 	const [query, setQuery] = (0, react.useState)("");
 	const [asyncResults, setAsyncResults] = (0, react.useState)([]);
@@ -358,33 +358,33 @@ function SearchCombobox({ items, placeholder = "검색...", label = "검색", on
 		className: "gap-element flex flex-col",
 		"data-opt-id": "KH4TQ",
 		"data-opt-slug": "search-combobox.SearchCombobox",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.ComboboxRoot, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.ComboboxRoot, {
 			onValueChange: handleValueChange,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 					htmlFor: inputId,
-					className: require_highlight.OPT_TEXT_LABEL,
+					className: require_text_truncate.OPT_TEXT_LABEL,
 					children: label
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ComboboxInput, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxInput, {
 					id: inputId,
 					placeholder,
 					className: "max-w-xs",
 					"aria-busy": loading || void 0,
 					onInput: handleInput
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ComboboxPopover, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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_highlight.Spinner, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Spinner, {
 							size: "sm",
 							"aria-hidden": "true"
 						}), labels.loading]
-					}) : matches.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ComboboxEmpty, { children: labels.noResults }) : matches.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ComboboxItem, {
+					}) : matches.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxEmpty, { children: labels.noResults }) : matches.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxItem, {
 						value: item,
 						children: item
 					}, item))
@@ -395,14 +395,14 @@ function SearchCombobox({ items, placeholder = "검색...", label = "검색", on
 }
 //#endregion
 //#region src/shells/status-select.tsx
-const defaultLabels$16 = {
+const defaultLabels$19 = {
 	selectLabel: "상태",
 	emptyMessage: "사용 가능한 상태 옵션이 없습니다."
 };
 /** Renders the status select component. */
 function StatusSelect({ options, value: controlledValue, onChange, label, labels: customLabels }) {
 	var _options$0$value, _options$;
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$16), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$19), 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;
@@ -412,7 +412,7 @@ function StatusSelect({ options, value: controlledValue, onChange, label, labels
 		"data-opt-id": "R46E6",
 		"data-opt-slug": "status-select.StatusSelect",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: require_highlight.OPT_TEXT_LABEL,
+			className: require_text_truncate.OPT_TEXT_LABEL,
 			children: resolvedLabel
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "text-text-tertiary text-sm",
@@ -429,16 +429,16 @@ function StatusSelect({ options, value: controlledValue, onChange, label, labels
 		className: "gap-element flex flex-col",
 		"data-opt-id": "R46E6",
 		"data-opt-slug": "status-select.StatusSelect",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
 			value,
 			onValueChange: handleChange,
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectLabel, {
-					className: require_highlight.OPT_TEXT_LABEL,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectLabel, {
+					className: require_text_truncate.OPT_TEXT_LABEL,
 					children: resolvedLabel
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectTrigger, {
-					className: `${require_highlight.OPT_INPUT} max-w-xs items-center justify-between ${require_highlight.OPT_FOCUS}`,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectTrigger, {
+					className: `${require_text_truncate.OPT_INPUT} max-w-xs items-center justify-between ${require_text_truncate.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]
@@ -456,9 +456,9 @@ function StatusSelect({ options, value: controlledValue, onChange, label, labels
 						})
 					})]
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, {
-					className: `${require_highlight.OPT_SURFACE_POPOVER} ${require_highlight.OPT_ANIMATE_ENTER_EXIT} max-w-xs`,
-					children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectItem, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, {
+					className: `${require_text_truncate.OPT_SURFACE_POPOVER} ${require_text_truncate.OPT_ANIMATE_ENTER_EXIT} max-w-xs`,
+					children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.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))
@@ -469,13 +469,13 @@ function StatusSelect({ options, value: controlledValue, onChange, label, labels
 }
 //#endregion
 //#region src/shells/app-menubar.tsx
-const defaultLabels$15 = { ariaLabel: "Application menu" };
+const defaultLabels$18 = { ariaLabel: "Application menu" };
 function MenuSection({ menu }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.MenuRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.MenuTrigger, { children: [menu.label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuButtonArrow, {})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuPopover, { children: menu.items.map((item, i) => {
-		if (item.type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuSeparator, {}, `sep-${i}`);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.MenuRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.MenuTrigger, { children: [menu.label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuButtonArrow, {})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuPopover, { children: menu.items.map((item, i) => {
+		if (item.type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuSeparator, {}, `sep-${i}`);
 		if (item.type === "checkbox") {
 			var _item$name, _item$value;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuItemCheckbox, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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,
@@ -491,7 +491,7 @@ function MenuSection({ menu }) {
 		}
 		if (item.type === "radio") {
 			var _item$name2, _item$value2;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuItemRadio, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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,
@@ -505,20 +505,20 @@ function MenuSection({ menu }) {
 				})
 			}, item.id);
 		}
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.MenuItem, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.MenuItem, {
 			onClick: item.onClick,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }), item.shortcut && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Kbd, { children: item.shortcut })]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }), item.shortcut && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Kbd, { children: item.shortcut })]
 		}, item.id);
 	}) })] });
 }
 /** Renders the app menubar component. */
 function AppMenubar({ menus, labels: customLabels }) {
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$15), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$18), customLabels);
 	if (menus.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenubarRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenubarRoot, {
 		"data-opt-id": "BGKHW",
 		"data-opt-slug": "app-menubar.AppMenubar",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenubarContainer, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenubarContainer, {
 			"aria-label": labels.ariaLabel,
 			children: menus.map((menu) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSection, { menu }, menu.id))
 		})
@@ -552,10 +552,10 @@ const sectionStyles = {
 	Templates: "text-text-tertiary"
 };
 const defaultSectionStyle = "text-text-secondary";
-const defaultLabels$14 = { ariaLabel: "문서 네비게이션" };
+const defaultLabels$17 = { ariaLabel: "문서 네비게이션" };
 /** Renders the sidebar nav component. */
 function SidebarNav({ items, labels: customLabels }) {
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$14), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$17), customLabels);
 	const pathname = (0, next_navigation.usePathname)();
 	const activeItem = items.find((item) => item.href === pathname);
 	const [activeId, setActiveId] = (0, react.useState)(activeItem ? domId(activeItem.id) : void 0);
@@ -581,18 +581,18 @@ function SidebarNav({ items, labels: customLabels }) {
 				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_highlight.cn("mb-2 pt-2", !isFirstItem && "mt-7"),
+					className: require_text_truncate.cn("mb-2 pt-2", !isFirstItem && "mt-7"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: require_highlight.cn("px-2 text-[11px] font-semibold tracking-wider uppercase", sectionTextStyle),
+						className: require_text_truncate.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_highlight.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"])
+						className: require_text_truncate.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_highlight.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", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_text_truncate.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
 					})]
@@ -603,17 +603,17 @@ function SidebarNav({ items, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/editor-toolbar.tsx
-const defaultLabels$13 = { ariaLabel: "텍스트 편집기 툴바" };
+const defaultLabels$16 = { ariaLabel: "텍스트 편집기 툴바" };
 function ToolbarButtonWithTooltip({ button, active, onAction }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.TooltipProvider, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.TooltipAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ToolbarButton, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.TooltipProvider, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TooltipAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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_highlight.Tooltip, { children: button.label })] });
+	}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Tooltip, { children: button.label })] });
 }
 /** Renders the editor toolbar component. */
 function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLabels }) {
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$13), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$16), customLabels);
 	const groups = [];
 	let current = [];
 	for (const btn of buttons) {
@@ -624,14 +624,14 @@ function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLa
 		current.push(btn);
 	}
 	if (current.length) groups.push(current);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ToolbarRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ToolbarRoot, {
 		"data-opt-id": "Z73K6",
 		"data-opt-slug": "editor-toolbar.EditorToolbar",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ToolbarContainer, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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_highlight.ToolbarSeparator, {}), group.map((item) => {
+				children: [gi > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ToolbarSeparator, {}), group.map((item) => {
 					if (item === "separator") return null;
 					const btn = item;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButtonWithTooltip, {
@@ -646,14 +646,14 @@ function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLa
 }
 //#endregion
 //#region src/shells/content-tabs.tsx
-const defaultLabels$12 = {
+const defaultLabels$15 = {
 	ariaLabel: "콘텐츠 탭",
 	emptyMessage: "표시할 탭이 없습니다."
 };
 /** Renders the content tabs component. */
 function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
 	var _tabs$, _tabs$find;
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$12), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$15), customLabels);
 	const [selectedTabId, setSelectedTabId] = (0, react.useState)(defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
 	if (tabs.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "text-text-secondary text-sm",
@@ -666,18 +666,18 @@ function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
 		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_highlight.TabsRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.TabsRoot, {
 		selectedId: selectedTabId,
 		onSelectedIdChange: handleSelectedTabId,
 		"data-opt-id": "9W97K",
 		"data-opt-slug": "content-tabs.ContentTabs",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.TabList, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TabList, {
 			"aria-label": labels.ariaLabel,
-			children: tabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Tab, {
+			children: tabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Tab, {
 				id: tab.id,
 				children: tab.label
 			}, tab.id))
-		}), activeTab && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.TabPanel, {
+		}), activeTab && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TabPanel, {
 			tabId: activeTab.id,
 			children: activeTab.content
 		})]
@@ -685,13 +685,13 @@ function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/faq-accordion.tsx
-const defaultLabels$11 = {
+const defaultLabels$14 = {
 	ariaLabel: "자주 묻는 질문",
 	emptyMessage: "등록된 FAQ가 없습니다."
 };
 /** Renders the faq accordion component. */
 function FaqAccordion({ items, labels: customLabels }) {
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$11), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$14), customLabels);
 	if (items.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "text-text-secondary text-sm",
 		"data-opt-id": "QRBHV",
@@ -707,8 +707,8 @@ function FaqAccordion({ items, labels: customLabels }) {
 			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_highlight.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_highlight.DisclosureTrigger, {}),
+			children: items.map((faq) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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_text_truncate.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",
@@ -722,7 +722,7 @@ function FaqAccordion({ items, labels: customLabels }) {
 						d: "m19.5 8.25-7.5 7.5-7.5-7.5"
 					})
 				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DisclosureContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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))
@@ -731,14 +731,14 @@ function FaqAccordion({ items, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/settings-form.tsx
-const defaultLabels$10 = {
+const defaultLabels$13 = {
 	formAriaLabel: "설정 폼",
 	submitButton: "저장",
 	successMessage: "설정이 저장되었습니다."
 };
 /** Renders the settings form component. */
 function SettingsForm({ fields, onSubmit, labels: customLabels }) {
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$10), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$13), customLabels);
 	const [submitted, setSubmitted] = (0, react.useState)(false);
 	const defaultValues = {};
 	for (const field of fields) {
@@ -770,7 +770,7 @@ function SettingsForm({ fields, onSubmit, labels: customLabels }) {
 			onSubmit === null || onSubmit === void 0 || onSubmit(values);
 		}
 	});
-	if (fields.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.EmptyState, {
+	if (fields.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.EmptyState, {
 		title: "설정 항목이 없습니다.",
 		description: "표시할 설정 필드를 추가하면 이 폼이 렌더링됩니다.",
 		"data-opt-id": "9TEEJ",
@@ -780,7 +780,7 @@ function SettingsForm({ fields, onSubmit, labels: customLabels }) {
 		className: "gap-group flex flex-col",
 		"data-opt-id": "9TEEJ",
 		"data-opt-slug": "settings-form.SettingsForm",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.FormRoot, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormRoot, {
 			store: form,
 			"aria-label": labels.formAriaLabel,
 			children: [fields.map((field) => {
@@ -795,16 +795,16 @@ function SettingsForm({ fields, onSubmit, labels: customLabels }) {
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "gap-element flex flex-col",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormLabel, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
 								name: field.name,
 								children: field.label
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.TagInput, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TagInput, {
 								value: tags,
 								onChange: (next) => form.setValue(field.name, next),
 								placeholder: field.placeholder
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormError, { name: field.name })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })
 						]
 					}, field.name);
 				}
@@ -817,17 +817,17 @@ function SettingsForm({ fields, onSubmit, labels: customLabels }) {
 								className: "text-text-primary text-sm font-medium",
 								children: field.label
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormRadioGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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_highlight.FormRadio, {
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormRadio, {
 										name: field.name,
 										value: option.value
 									}), option.label]
 								}, option.value))
 							}) }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormError, { name: field.name })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })
 						]
 					}, field.name);
 				}
@@ -835,26 +835,26 @@ function SettingsForm({ fields, onSubmit, labels: customLabels }) {
 					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_highlight.FormCheckbox, { name: field.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: field.label })]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormError, { name: field.name })]
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormCheckbox, { name: field.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: field.label })]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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_highlight.FormLabel, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
 								name: field.name,
 								children: field.label
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormTextarea, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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_highlight.FormError, { name: field.name })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })
 						]
 					}, field.name);
 				}
@@ -863,25 +863,25 @@ function SettingsForm({ fields, onSubmit, labels: customLabels }) {
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "gap-element flex flex-col",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormLabel, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
 								name: field.name,
 								children: field.label
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormSelect, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSelect, {
 								name: field.name,
 								placeholder: field.placeholder,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormSelectPopover, { children: (_field$options2 = field.options) === null || _field$options2 === void 0 ? void 0 : _field$options2.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormSelectItem, {
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSelectPopover, { children: (_field$options2 = field.options) === null || _field$options2 === void 0 ? void 0 : _field$options2.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSelectItem, {
 									value: option.value,
 									children: option.label
 								}, option.value)) })
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormError, { name: field.name })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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_highlight.FormSwitch, { name: field.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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",
@@ -895,19 +895,19 @@ function SettingsForm({ fields, onSubmit, labels: customLabels }) {
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "gap-element flex flex-col",
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormLabel, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
 							name: field.name,
 							children: field.label
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormInput, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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_highlight.FormError, { name: field.name })
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })
 					]
 				}, field.name);
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormSubmit, { children: labels.submitButton })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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
@@ -925,17 +925,17 @@ const statusIcon = {
 };
 const statusColor = {
 	success: "text-success-fg",
-	pending: require_highlight.OPT_TEXT_TERTIARY,
+	pending: require_text_truncate.OPT_TEXT_TERTIARY,
 	running: "text-accent",
 	error: "text-danger-fg",
 	skipped: "text-text-tertiary"
 };
 const statusBadge$1 = {
-	success: require_highlight.OPT_BADGE_GREEN,
-	pending: require_highlight.OPT_BADGE_NEUTRAL,
+	success: require_text_truncate.OPT_BADGE_GREEN,
+	pending: require_text_truncate.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_highlight.OPT_BADGE_RED,
-	skipped: require_highlight.OPT_BADGE_NEUTRAL
+	error: require_text_truncate.OPT_BADGE_RED,
+	skipped: require_text_truncate.OPT_BADGE_NEUTRAL
 };
 const statusLabel$1 = {
 	success: "성공",
@@ -963,7 +963,7 @@ function DeploymentTimeline({ steps, title = "배포 타임라인" }) {
 				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_highlight.OPT_FOCUS} data-[active-item]:bg-accent-subtle`,
+						className: `group gap-group relative flex w-full scroll-m-2 rounded-lg px-3 py-2 ${require_text_truncate.OPT_FOCUS} data-[active-item]:bg-accent-subtle`,
 						role: "listitem",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex flex-col items-center",
@@ -978,7 +978,7 @@ function DeploymentTimeline({ steps, title = "배포 타임라인" }) {
 								className: "gap-element flex items-center",
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: `text-sm font-medium ${require_highlight.OPT_TEXT_PRIMARY}`,
+										className: `text-sm font-medium ${require_text_truncate.OPT_TEXT_PRIMARY}`,
 										children: step.name
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1004,9 +1004,9 @@ function DeploymentTimeline({ steps, title = "배포 타임라인" }) {
 //#endregion
 //#region src/shells/project-switcher.tsx
 const statusDot = {
-	active: require_highlight.OPT_DOT_GREEN,
-	paused: require_highlight.OPT_DOT_YELLOW,
-	error: require_highlight.OPT_DOT_RED
+	active: require_text_truncate.OPT_DOT_GREEN,
+	paused: require_text_truncate.OPT_DOT_YELLOW,
+	error: require_text_truncate.OPT_DOT_RED
 };
 /** Renders the project switcher component. */
 function ProjectSwitcher({ projects, value, onChange, placeholder = "프로젝트 검색..." }) {
@@ -1020,26 +1020,26 @@ function ProjectSwitcher({ projects, value, onChange, placeholder = "프로젝
 		className: "gap-element flex flex-col",
 		"data-opt-id": "5R3AG",
 		"data-opt-slug": "project-switcher.ProjectSwitcher",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.ComboboxRoot, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.ComboboxRoot, {
 			onValueChange: setSearch,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-					className: require_highlight.OPT_TEXT_LABEL,
+					className: require_text_truncate.OPT_TEXT_LABEL,
 					children: "프로젝트"
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ComboboxInput, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxInput, {
 					placeholder: selected ? selected.name : placeholder,
-					className: require_highlight.OPT_INPUT
+					className: require_text_truncate.OPT_INPUT
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.ComboboxPopover, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.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_highlight.ComboboxItem, {
+					}), matches.map((project) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.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_highlight.OPT_ITEM_BASE} ${require_highlight.OPT_ACTIVE_ITEM}`,
+						className: `gap-element flex scroll-m-2 items-center ${require_text_truncate.OPT_ITEM_BASE} ${require_text_truncate.OPT_ACTIVE_ITEM}`,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `shrink-0 ${statusDot[project.status]}` }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1047,7 +1047,7 @@ function ProjectSwitcher({ projects, value, onChange, placeholder = "프로젝
 								children: project.name
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: require_highlight.OPT_BADGE_NEUTRAL,
+								className: require_text_truncate.OPT_BADGE_NEUTRAL,
 								children: project.framework
 							}),
 							project.domain && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1064,29 +1064,29 @@ function ProjectSwitcher({ projects, value, onChange, placeholder = "프로젝
 ProjectSwitcher.displayName = "ProjectSwitcher";
 //#endregion
 //#region src/shells/env-panel.tsx
-const defaultLabels$9 = {
+const defaultLabels$12 = {
 	varCount: (count) => `${count}개 변수`,
 	envVarsLabel: (env) => `${env} 환경 변수`,
 	secretBadge: "secret"
 };
 const envDot = {
-	Production: require_highlight.OPT_DOT_RED,
-	Preview: require_highlight.OPT_DOT_YELLOW,
-	Development: require_highlight.OPT_DOT_GREEN
+	Production: require_text_truncate.OPT_DOT_RED,
+	Preview: require_text_truncate.OPT_DOT_YELLOW,
+	Development: require_text_truncate.OPT_DOT_GREEN
 };
 /** Renders the env panel component. */
 function EnvPanel({ groups, labels: customLabels }) {
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$9), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$12), customLabels);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `rounded-lg ${require_highlight.OPT_BORDER} divide-y ${require_highlight.OPT_DIVIDER} bg-surface`,
+		className: `rounded-lg ${require_text_truncate.OPT_BORDER} divide-y ${require_text_truncate.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_highlight.DisclosureRoot, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.DisclosureRoot, {
 				defaultOpen: group.env === "Production",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.DisclosureTrigger, {
-					className: require_highlight.OPT_DISCLOSURE_TRIGGER,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.DisclosureTrigger, {
+					className: require_text_truncate.OPT_DISCLOSURE_TRIGGER,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: "gap-element flex items-center",
 						children: [
@@ -1096,7 +1096,7 @@ function EnvPanel({ groups, labels: customLabels }) {
 								children: group.env
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: `text-xs ${require_highlight.OPT_TEXT_TERTIARY}`,
+								className: `text-xs ${require_text_truncate.OPT_TEXT_TERTIARY}`,
 								children: labels.varCount(group.vars.length)
 							})
 						]
@@ -1113,8 +1113,8 @@ function EnvPanel({ groups, labels: customLabels }) {
 							d: "m19.5 8.25-7.5 7.5-7.5-7.5"
 						})
 					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DisclosureContent, {
-					className: require_highlight.OPT_DISCLOSURE_CONTENT,
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.DisclosureContent, {
+					className: require_text_truncate.OPT_DISCLOSURE_CONTENT,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
 						focusLoop: true,
 						orientation: "vertical",
@@ -1124,18 +1124,18 @@ function EnvPanel({ groups, labels: customLabels }) {
 							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_highlight.OPT_FOCUS} data-[active-item]:bg-accent-subtle`,
+								className: `gap-group flex scroll-m-2 items-center rounded px-2 py-1.5 text-sm ${require_text_truncate.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_highlight.OPT_TEXT_PRIMARY}`,
+										className: `w-44 shrink-0 truncate font-mono text-xs font-medium ${require_text_truncate.OPT_TEXT_PRIMARY}`,
 										children: v.key
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: `flex-1 truncate font-mono text-xs ${require_highlight.OPT_TEXT_SECONDARY}`,
+										className: `flex-1 truncate font-mono text-xs ${require_text_truncate.OPT_TEXT_SECONDARY}`,
 										children: v.isSecret ? "••••••••" : v.value
 									}),
 									v.isSecret && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_highlight.OPT_BADGE_NEUTRAL,
+										className: require_text_truncate.OPT_BADGE_NEUTRAL,
 										children: labels.secretBadge
 									})
 								]
@@ -1149,7 +1149,7 @@ function EnvPanel({ groups, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/branch-select.tsx
-const defaultLabels$8 = {
+const defaultLabels$11 = {
 	selectLabel: "브랜치",
 	emptySelectionLabel: "선택...",
 	emptyMessage: "사용 가능한 브랜치가 없습니다.",
@@ -1158,7 +1158,7 @@ const defaultLabels$8 = {
 /** Renders the branch select component. */
 function BranchSelect({ branches, value: controlledValue, onChange, label, labels: customLabels }) {
 	var _ref, _defaultBranch$name, _branches$, _selected$name;
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$8), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$11), 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 : "");
@@ -1169,10 +1169,10 @@ function BranchSelect({ branches, value: controlledValue, onChange, label, label
 		"data-opt-id": "7EDEP",
 		"data-opt-slug": "branch-select.BranchSelect",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: require_highlight.OPT_TEXT_LABEL,
+			className: require_text_truncate.OPT_TEXT_LABEL,
 			children: resolvedLabel
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: require_highlight.OPT_TEXT_TERTIARY,
+			className: require_text_truncate.OPT_TEXT_TERTIARY,
 			children: labels.emptyMessage
 		})]
 	});
@@ -1186,16 +1186,16 @@ function BranchSelect({ branches, value: controlledValue, onChange, label, label
 		className: "gap-element flex flex-col",
 		"data-opt-id": "7EDEP",
 		"data-opt-slug": "branch-select.BranchSelect",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
 			value,
 			onValueChange: handleChange,
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectLabel, {
-					className: require_highlight.OPT_TEXT_LABEL,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectLabel, {
+					className: require_text_truncate.OPT_TEXT_LABEL,
 					children: resolvedLabel
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectTrigger, {
-					className: `${require_highlight.OPT_INPUT} max-w-xs items-center justify-between gap-1`,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectTrigger, {
+					className: `${require_text_truncate.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: [
@@ -1217,7 +1217,7 @@ function BranchSelect({ branches, value: controlledValue, onChange, label, label
 								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_highlight.OPT_BADGE_BLUE,
+								className: require_text_truncate.OPT_BADGE_BLUE,
 								children: labels.defaultBadge
 							})
 						]
@@ -1235,11 +1235,11 @@ function BranchSelect({ branches, value: controlledValue, onChange, label, label
 						})
 					})]
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, {
 					className: "max-w-xs",
-					children: branches.map((branch) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectItem, {
+					children: branches.map((branch) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectItem, {
 						value: branch.name,
-						className: `gap-element flex scroll-m-2 items-center ${require_highlight.OPT_ITEM_BASE} ${require_highlight.OPT_ACTIVE_ITEM}`,
+						className: `gap-element flex scroll-m-2 items-center ${require_text_truncate.OPT_ITEM_BASE} ${require_text_truncate.OPT_ACTIVE_ITEM}`,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "flex-1 truncate",
@@ -1267,7 +1267,7 @@ function BranchSelect({ branches, value: controlledValue, onChange, label, label
 BranchSelect.displayName = "BranchSelect";
 //#endregion
 //#region src/shells/domain-table.tsx
-const defaultLabels$7 = {
+const defaultLabels$10 = {
 	domain: "Domain",
 	status: "Status",
 	ssl: "SSL",
@@ -1276,14 +1276,14 @@ const defaultLabels$7 = {
 	emptyMessage: "No domains configured"
 };
 const statusBadge = {
-	active: require_highlight.OPT_BADGE_GREEN,
-	pending: require_highlight.OPT_BADGE_YELLOW,
-	error: require_highlight.OPT_BADGE_RED
+	active: require_text_truncate.OPT_BADGE_GREEN,
+	pending: require_text_truncate.OPT_BADGE_YELLOW,
+	error: require_text_truncate.OPT_BADGE_RED
 };
 const sslBadge = {
-	valid: require_highlight.OPT_BADGE_GREEN,
-	pending: require_highlight.OPT_BADGE_YELLOW,
-	expired: require_highlight.OPT_BADGE_RED
+	valid: require_text_truncate.OPT_BADGE_GREEN,
+	pending: require_text_truncate.OPT_BADGE_YELLOW,
+	expired: require_text_truncate.OPT_BADGE_RED
 };
 const statusLabel = {
 	active: "Active",
@@ -1297,7 +1297,7 @@ const sslLabel = {
 };
 /** Renders the domain table component. */
 function DomainTable({ domains, title = "도메인", labels: customLabels }) {
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$7), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$10), customLabels);
 	if (domains.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "gap-group flex flex-col",
 		"data-opt-id": "A7SRM",
@@ -1306,7 +1306,7 @@ function DomainTable({ domains, title = "도메인", labels: customLabels }) {
 			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_highlight.OPT_BORDER} ${require_highlight.OPT_TEXT_SECONDARY} bg-surface`,
+			className: `rounded-lg px-4 py-6 text-sm ${require_text_truncate.OPT_BORDER} ${require_text_truncate.OPT_TEXT_SECONDARY} bg-surface`,
 			children: labels.emptyMessage
 		})]
 	});
@@ -1318,7 +1318,7 @@ function DomainTable({ domains, title = "도메인", labels: customLabels }) {
 			className: `text-sm font-semibold text-text-primary`,
 			children: title
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: `overflow-x-auto rounded-lg ${require_highlight.OPT_BORDER} bg-surface`,
+			className: `overflow-x-auto rounded-lg ${require_text_truncate.OPT_BORDER} bg-surface`,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
 				focusLoop: true,
 				focusWrap: true,
@@ -1331,28 +1331,28 @@ function DomainTable({ domains, title = "도메인", labels: customLabels }) {
 						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_highlight.OPT_TH,
+								className: require_text_truncate.OPT_TH,
 								children: labels.domain
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-								className: require_highlight.OPT_TH,
+								className: require_text_truncate.OPT_TH,
 								children: labels.status
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-								className: require_highlight.OPT_TH,
+								className: require_text_truncate.OPT_TH,
 								children: labels.ssl
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-								className: require_highlight.OPT_TH,
+								className: require_text_truncate.OPT_TH,
 								children: labels.redirect
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-								className: require_highlight.OPT_TH,
+								className: require_text_truncate.OPT_TH,
 								children: labels.added
 							})
 						] })
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
-						className: `divide-y ${require_highlight.OPT_DIVIDER}`,
+						className: `divide-y ${require_text_truncate.OPT_DIVIDER}`,
 						children: domains.map((d) => {
 							var _d$redirect, _d$addedAt;
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeRow, {
@@ -1360,18 +1360,18 @@ function DomainTable({ domains, title = "도메인", labels: customLabels }) {
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
 										render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-											className: `${require_highlight.OPT_TD} font-mono font-medium`,
+											className: `${require_text_truncate.OPT_TD} font-mono font-medium`,
 											role: "gridcell"
 										}),
-										className: require_highlight.OPT_TABLE_ROW_ACTIVE,
+										className: require_text_truncate.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_highlight.OPT_TD,
+											className: require_text_truncate.OPT_TD,
 											role: "gridcell"
 										}),
-										className: require_highlight.OPT_TABLE_ROW_ACTIVE,
+										className: require_text_truncate.OPT_TABLE_ROW_ACTIVE,
 										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: statusBadge[d.status],
 											children: statusLabel[d.status]
@@ -1379,10 +1379,10 @@ function DomainTable({ domains, title = "도메인", labels: customLabels }) {
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
 										render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-											className: require_highlight.OPT_TD,
+											className: require_text_truncate.OPT_TD,
 											role: "gridcell"
 										}),
-										className: require_highlight.OPT_TABLE_ROW_ACTIVE,
+										className: require_text_truncate.OPT_TABLE_ROW_ACTIVE,
 										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: sslBadge[d.ssl],
 											children: sslLabel[d.ssl]
@@ -1390,18 +1390,18 @@ function DomainTable({ domains, title = "도메인", labels: customLabels }) {
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
 										render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-											className: require_highlight.OPT_TD,
+											className: require_text_truncate.OPT_TD,
 											role: "gridcell"
 										}),
-										className: require_highlight.OPT_TABLE_ROW_ACTIVE,
+										className: require_text_truncate.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_highlight.OPT_TD_MUTED,
+											className: require_text_truncate.OPT_TD_MUTED,
 											role: "gridcell"
 										}),
-										className: require_highlight.OPT_TABLE_ROW_ACTIVE,
+										className: require_text_truncate.OPT_TABLE_ROW_ACTIVE,
 										children: (_d$addedAt = d.addedAt) !== null && _d$addedAt !== void 0 ? _d$addedAt : "—"
 									})
 								]
@@ -1469,7 +1469,7 @@ function DataTableProgressBar({ value, barColor, label }) {
 		"aria-valuetext": `${percent}%`,
 		"aria-label": label,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_highlight.cn("h-full rounded-full transition-all", barColor),
+			className: require_text_truncate.cn("h-full rounded-full transition-all", barColor),
 			style: { width: `${percent}%` }
 		})
 	});
@@ -1551,18 +1551,18 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 	};
 	const colCount = columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("gap-group flex flex-col", className),
+		className: require_text_truncate.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_highlight.cn("text-sm font-semibold", "text-text-primary"),
+				className: require_text_truncate.cn("text-sm font-semibold", "text-text-primary"),
 				children: title
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_highlight.cn("overflow-x-auto rounded-lg", require_highlight.OPT_BORDER, "bg-surface"),
+				className: require_text_truncate.cn("overflow-x-auto rounded-lg", require_text_truncate.OPT_BORDER, "bg-surface"),
 				children: data.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: require_highlight.cn("px-4 py-8 text-center text-sm", require_highlight.OPT_TEXT_SECONDARY),
+					className: require_text_truncate.cn("px-4 py-8 text-center text-sm", require_text_truncate.OPT_TEXT_SECONDARY),
 					children: emptyMessage
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
 					focusLoop: true,
@@ -1573,24 +1573,24 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 						className: "w-full",
 						render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {}),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
-							className: require_highlight.cn("border-border-subtle bg-surface-inset border-b", stickyHeader && "sticky top-0 z-10"),
+							className: require_text_truncate.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_highlight.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_highlight.Checkbox, {
+									className: require_text_truncate.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_text_truncate.Checkbox, {
 										checked: allSelected,
 										onChange: toggleSelectAll,
 										"aria-label": "Select all"
 									})
 								}),
-								expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { className: require_highlight.cn("px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-tertiary", "w-10") }),
+								expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { className: require_text_truncate.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_highlight.cn(require_highlight.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"),
+										className: require_text_truncate.cn(require_text_truncate.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) => {
@@ -1618,14 +1618,14 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 												e.preventDefault();
 												e.stopPropagation();
 												if (e.key === "Home" || e.key === "End") {
-													setColWidths((prev) => require_highlight._objectSpread2(require_highlight._objectSpread2({}, prev), {}, { [col.id]: e.key === "Home" ? MIN_COLUMN_WIDTH : resizeMax }));
+													setColWidths((prev) => require_text_truncate._objectSpread2(require_text_truncate._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_highlight._objectSpread2(require_highlight._objectSpread2({}, prev), {}, { [col.id]: Math.max(MIN_COLUMN_WIDTH, current + direction * delta) });
+													return require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, prev), {}, { [col.id]: Math.max(MIN_COLUMN_WIDTH, current + direction * delta) });
 												});
 											},
 											onMouseDown: (e) => {
@@ -1635,7 +1635,7 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 												const startW = e.target.parentElement.offsetWidth;
 												const onMove = (ev) => {
 													const newW = Math.max(MIN_COLUMN_WIDTH, startW + ev.clientX - startX);
-													setColWidths((prev) => require_highlight._objectSpread2(require_highlight._objectSpread2({}, prev), {}, { [col.id]: newW }));
+													setColWidths((prev) => require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, prev), {}, { [col.id]: newW }));
 												};
 												const onUp = () => {
 													document.removeEventListener("mousemove", onMove);
@@ -1649,24 +1649,24 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 								})
 							] })
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
-							className: require_highlight.cn("divide-y", require_highlight.OPT_DIVIDER),
+							className: require_text_truncate.cn("divide-y", require_text_truncate.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_highlight.cn(onRowClick ? "cursor-pointer" : void 0, (isSelected || activeRowId === key) && "bg-accent-subtle"),
+										className: require_text_truncate.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_highlight.cn("px-3 py-2.5 text-sm text-text-primary whitespace-nowrap", "w-10"),
+												className: require_text_truncate.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_highlight.Checkbox, {
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Checkbox, {
 												checked: isSelected,
 												onChange: () => toggleSelectRow(key),
 												"aria-label": `Select row ${key}`
@@ -1674,7 +1674,7 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 										}),
 										expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
 											render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-												className: require_highlight.cn("px-3 py-2.5 text-sm text-text-primary whitespace-nowrap", "w-10"),
+												className: require_text_truncate.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",
@@ -1684,7 +1684,7 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 													e.stopPropagation();
 													toggleExpand(key);
 												},
-												className: require_highlight.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"),
+												className: require_text_truncate.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: "▶"
@@ -1694,10 +1694,10 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 											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_highlight.cn(require_highlight.OPT_TD, alignmentClass[(_col$align2 = col.align) !== null && _col$align2 !== void 0 ? _col$align2 : "left"], colIndex === 0 ? "font-medium" : ""),
+													className: require_text_truncate.cn(require_text_truncate.OPT_TD, alignmentClass[(_col$align2 = col.align) !== null && _col$align2 !== void 0 ? _col$align2 : "left"], colIndex === 0 ? "font-medium" : ""),
 													role: "gridcell"
 												}),
-												className: require_highlight.OPT_TABLE_ROW_ACTIVE,
+												className: require_text_truncate.OPT_TABLE_ROW_ACTIVE,
 												onKeyDown: (event) => {
 													if (!onRowClick || event.target !== event.currentTarget || event.key !== "Enter" && event.key !== " ") return;
 													event.preventDefault();
@@ -1721,7 +1721,7 @@ function DataTable({ data, columns, keyExtractor, title = "Data Table", onRowCli
 					})
 				})
 			}),
-			pageSize && totalPages > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Pagination, {
+			pageSize && totalPages > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Pagination, {
 				totalItems: sortedData.length,
 				pageSize,
 				currentPage: page + 1,
@@ -1751,7 +1751,7 @@ const toastStore = {
 	add(input) {
 		var _input$variant;
 		const id = `toast-${++toastCounter}`;
-		toasts = [...toasts, require_highlight._objectSpread2({
+		toasts = [...toasts, require_text_truncate._objectSpread2({
 			id,
 			variant: (_input$variant = input.variant) !== null && _input$variant !== void 0 ? _input$variant : "info"
 		}, input)];
@@ -1773,7 +1773,7 @@ const toastStore = {
 	}
 };
 function makeVariant(variant) {
-	return (message, options) => toastStore.add(require_highlight._objectSpread2(require_highlight._objectSpread2({}, options), {}, {
+	return (message, options) => toastStore.add(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, options), {}, {
 		message,
 		variant
 	}));
@@ -1811,7 +1811,7 @@ function ToastProvider({ children, position = "top-right", defaultDuration = 5e3
 			removeToast
 		},
 		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_highlight.cn("gap-element fixed z-50 flex flex-col", positionStyles[position]),
+			className: require_text_truncate.cn("gap-element fixed z-50 flex flex-col", positionStyles[position]),
 			role: "region",
 			"aria-label": "Notifications",
 			"data-opt-id": "M0KTS",
@@ -1884,7 +1884,7 @@ function NotificationToast({ toast, onDismiss, defaultDuration = 5e3 }) {
 		},
 		"data-opt-id": "26YVM",
 		"data-opt-slug": "notification-toast.NotificationToast",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Alert, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.Alert, {
 			variant: toast.variant,
 			title: toast.title,
 			dismissible: true,
@@ -1903,7 +1903,7 @@ function NotificationToast({ toast, onDismiss, defaultDuration = 5e3 }) {
 }
 //#endregion
 //#region src/shells/failure-list.tsx
-const defaultLabels$6 = {
+const defaultLabels$9 = {
 	title: "최근 실패",
 	emptyMessage: "실패 항목이 없습니다",
 	moreItems: "{count}개 더 보기",
@@ -1964,7 +1964,7 @@ function FailureItemRow({ failure, isLast, onFailureClick, renderActions, merged
 		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {}),
 		role: "article",
 		"aria-labelledby": itemId,
-		className: require_highlight.cn("group gap-group relative flex w-full items-start p-3", require_highlight.OPT_FOCUS_VISIBLE, "data-[active-item]:bg-accent-subtle", onFailureClick && "cursor-pointer", !isLast && "border-border-subtle border-b", severityBorder[failure.severity]),
+		className: require_text_truncate.cn("group gap-group relative flex w-full items-start p-3", require_text_truncate.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", {
@@ -1972,13 +1972,13 @@ function FailureItemRow({ failure, isLast, onFailureClick, renderActions, merged
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "gap-element flex items-center",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Badge, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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_highlight.OPT_TEXT_PRIMARY} truncate`,
+						className: `text-sm font-medium ${require_text_truncate.OPT_TEXT_PRIMARY} truncate`,
 						children: failure.title
 					})]
 				}),
@@ -1988,7 +1988,7 @@ function FailureItemRow({ failure, isLast, onFailureClick, renderActions, merged
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
 					dateTime: failure.timestamp,
-					className: `mt-1 block text-xs ${require_highlight.OPT_TEXT_TERTIARY}`,
+					className: `mt-1 block text-xs ${require_text_truncate.OPT_TEXT_TERTIARY}`,
 					children: formatRelativeTime(failure.timestamp, mergedTimeAgo, locale)
 				})
 			]
@@ -2002,20 +2002,20 @@ function FailureItemRow({ failure, isLast, onFailureClick, renderActions, merged
 function FailureList({ failures, title, maxItems, grouped = false, onFailureClick, onShowMore, labels: customLabels, locale = "ko-KR", loading = false, renderActions, className }) {
 	var _customLabels$timeAgo, _customLabels$timeAgo2, _customLabels$timeAgo3, _customLabels$timeAgo4, _customLabels$timeAgo5, _customLabels$timeAgo6, _customLabels$timeAgo7, _customLabels$timeAgo8, _customLabels$severit, _customLabels$severit2, _customLabels$severit3, _customLabels$severit4, _customLabels$severit5, _customLabels$severit6, _customLabels$title, _customLabels$emptyMe, _customLabels$moreIte;
 	const mergedTimeAgo = {
-		justNow: (_customLabels$timeAgo = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo2 = customLabels.timeAgo) === null || _customLabels$timeAgo2 === void 0 ? void 0 : _customLabels$timeAgo2.justNow) !== null && _customLabels$timeAgo !== void 0 ? _customLabels$timeAgo : defaultLabels$6.timeAgo.justNow,
-		minutesAgo: (_customLabels$timeAgo3 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo4 = customLabels.timeAgo) === null || _customLabels$timeAgo4 === void 0 ? void 0 : _customLabels$timeAgo4.minutesAgo) !== null && _customLabels$timeAgo3 !== void 0 ? _customLabels$timeAgo3 : defaultLabels$6.timeAgo.minutesAgo,
-		hoursAgo: (_customLabels$timeAgo5 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo6 = customLabels.timeAgo) === null || _customLabels$timeAgo6 === void 0 ? void 0 : _customLabels$timeAgo6.hoursAgo) !== null && _customLabels$timeAgo5 !== void 0 ? _customLabels$timeAgo5 : defaultLabels$6.timeAgo.hoursAgo,
-		daysAgo: (_customLabels$timeAgo7 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo8 = customLabels.timeAgo) === null || _customLabels$timeAgo8 === void 0 ? void 0 : _customLabels$timeAgo8.daysAgo) !== null && _customLabels$timeAgo7 !== void 0 ? _customLabels$timeAgo7 : defaultLabels$6.timeAgo.daysAgo
+		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$9.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$9.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$9.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$9.timeAgo.daysAgo
 	};
 	const mergedSeverityLabels = {
-		critical: (_customLabels$severit = customLabels === null || customLabels === void 0 || (_customLabels$severit2 = customLabels.severityLabels) === null || _customLabels$severit2 === void 0 ? void 0 : _customLabels$severit2.critical) !== null && _customLabels$severit !== void 0 ? _customLabels$severit : defaultLabels$6.severityLabels.critical,
-		error: (_customLabels$severit3 = customLabels === null || customLabels === void 0 || (_customLabels$severit4 = customLabels.severityLabels) === null || _customLabels$severit4 === void 0 ? void 0 : _customLabels$severit4.error) !== null && _customLabels$severit3 !== void 0 ? _customLabels$severit3 : defaultLabels$6.severityLabels.error,
-		warning: (_customLabels$severit5 = customLabels === null || customLabels === void 0 || (_customLabels$severit6 = customLabels.severityLabels) === null || _customLabels$severit6 === void 0 ? void 0 : _customLabels$severit6.warning) !== null && _customLabels$severit5 !== void 0 ? _customLabels$severit5 : defaultLabels$6.severityLabels.warning
+		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$9.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$9.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$9.severityLabels.warning
 	};
 	const labels = {
-		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$6.title,
-		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$6.emptyMessage,
-		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$6.moreItems
+		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$9.title,
+		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$9.emptyMessage,
+		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$9.moreItems
 	};
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const allItems = maxItems ? failures.slice(0, maxItems) : failures;
@@ -2038,7 +2038,7 @@ function FailureList({ failures, title, maxItems, grouped = false, onFailureClic
 				children: displayTitle
 			}), failures.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				role: "status",
-				className: `py-8 text-center text-sm ${require_highlight.OPT_TEXT_SECONDARY}`,
+				className: `py-8 text-center text-sm ${require_text_truncate.OPT_TEXT_SECONDARY}`,
 				children: labels.emptyMessage
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
 				focusLoop: true,
@@ -2047,7 +2047,7 @@ function FailureList({ failures, title, maxItems, grouped = false, onFailureClic
 					role: "feed",
 					"aria-label": displayTitle,
 					"aria-busy": loading,
-					className: `rounded-lg ${require_highlight.OPT_BORDER} bg-surface`,
+					className: `rounded-lg ${require_text_truncate.OPT_BORDER} bg-surface`,
 					children: grouped ? renderGrouped(allItems, remainingCount, rowProps, labels, onShowMore) : renderFlat(allItems, remainingCount, rowProps, labels, onShowMore)
 				})
 			})]
@@ -2055,7 +2055,7 @@ function FailureList({ failures, title, maxItems, grouped = false, onFailureClic
 	});
 }
 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_highlight._objectSpread2({
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [items.map((failure, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailureItemRow, require_text_truncate._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, {
@@ -2075,9 +2075,9 @@ function renderGrouped(items, remainingCount, rowProps, labels, onShowMore) {
 	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_highlight.cn(`px-3 py-2 text-xs font-semibold text-text-tertiary tracking-wider uppercase`, groupIndex > 0 && "border-border-subtle border-t"),
+			className: require_text_truncate.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_highlight._objectSpread2({
+		}), groupItems.map((failure, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailureItemRow, require_text_truncate._objectSpread2({
 			failure,
 			isLast: isLastGroup && index === groupItems.length - 1
 		}, rowProps), failure.id))] }, groupName || "__ungrouped__");
@@ -2091,7 +2091,7 @@ function renderGrouped(items, remainingCount, rowProps, labels, onShowMore) {
 }
 //#endregion
 //#region src/shells/key-value-editor.tsx
-const defaultLabels$5 = {
+const defaultLabels$8 = {
 	keyPlaceholder: "키",
 	valuePlaceholder: "값",
 	addButton: "추가",
@@ -2105,7 +2105,7 @@ function generateId() {
 }
 /** 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_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$5), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$8), 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);
@@ -2135,14 +2135,14 @@ function KeyValueEditor({ value: controlledValue, defaultValue, onChange, showSe
 		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_highlight._objectSpread2(require_highlight._objectSpread2({}, e), {}, { [field]: val }) : e));
+		updateEntries(entries.map((e) => e.id === id ? require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, e), {}, { [field]: val }) : e));
 	}, [entries, updateEntries]);
 	const toggleSecret = (0, react.useCallback)((id) => {
-		updateEntries(entries.map((e) => e.id === id ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, e), {}, { isSecret: !e.isSecret }) : e));
+		updateEntries(entries.map((e) => e.id === id ? require_text_truncate._objectSpread2(require_text_truncate._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_highlight.cn("gap-group flex flex-col", className),
+		className: require_text_truncate.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", {
@@ -2155,7 +2155,7 @@ function KeyValueEditor({ value: controlledValue, defaultValue, onChange, showSe
 				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_highlight.cn("gap-element flex items-start", "border-border rounded-lg border p-3", "bg-surface"),
+					className: require_text_truncate.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",
@@ -2168,7 +2168,7 @@ function KeyValueEditor({ value: controlledValue, defaultValue, onChange, showSe
 								placeholder: labels.keyPlaceholder,
 								readOnly,
 								"aria-label": `${labels.keyPlaceholder} ${index + 1}`,
-								className: require_highlight.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")
+								className: require_text_truncate.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
@@ -2187,7 +2187,7 @@ function KeyValueEditor({ value: controlledValue, defaultValue, onChange, showSe
 								placeholder: labels.valuePlaceholder,
 								readOnly,
 								"aria-label": `${labels.valuePlaceholder} ${index + 1}`,
-								className: require_highlight.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")
+								className: require_text_truncate.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", {
@@ -2252,7 +2252,7 @@ function KeyValueEditor({ value: controlledValue, defaultValue, onChange, showSe
 		}), canAdd && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			onClick: addEntry,
-			className: require_highlight.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"),
+			className: require_text_truncate.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
 		})]
 	});
@@ -2276,11 +2276,11 @@ function WorkflowCanvas({ steps, connections = [], rows = 9, cols = 9, cellSize
 	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_highlight.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"),
+		className: require_text_truncate.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_highlight.Badge, {
+		}), step.status && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Badge, {
 			variant: statusVariant[step.status],
 			size: "sm",
 			className: "w-fit",
@@ -2314,7 +2314,7 @@ function WorkflowCanvas({ steps, connections = [], rows = 9, cols = 9, cellSize
 		cols
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("gap-group flex flex-col", className),
+		className: require_text_truncate.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", {
@@ -2401,6 +2401,555 @@ function WorkflowCanvas({ steps, connections = [], rows = 9, cols = 9, cellSize
 }
 WorkflowCanvas.displayName = "WorkflowCanvas";
 //#endregion
+//#region src/shells/event-timeline.tsx
+const defaultLabels$7 = {
+	emptyTitle: "No events yet",
+	emptyDescription: "Events appear here as soon as they arrive.",
+	expand: "Show properties",
+	collapse: "Hide properties",
+	loadMore: "Load more",
+	gap: (duration) => `+${duration}`,
+	properties: "Event properties",
+	openGroup: (title) => `Open ${title}`
+};
+/**
+* A line of text and the time it happened have to read as one row. Past about
+* this width the eye stops connecting them, so the rail is capped rather than
+* stretched to whatever the page allows. Override with `className` where a
+* layout genuinely needs the full width.
+*/
+const TIMELINE_WIDTH = "max-w-5xl";
+const toneDot = {
+	default: "bg-text-tertiary",
+	accent: "bg-accent",
+	success: "bg-success",
+	warning: "bg-warning",
+	danger: "bg-danger"
+};
+function toMillis(timestamp) {
+	const parsed = Date.parse(timestamp);
+	return Number.isNaN(parsed) ? 0 : parsed;
+}
+function stringifyValue(value) {
+	if (value === null || value === void 0) return "—";
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "boolean") return String(value);
+	return JSON.stringify(value);
+}
+function PropertyTable({ properties, ariaLabel }) {
+	const entries = Object.entries(properties);
+	if (entries.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+		className: require_text_truncate.cn(require_text_truncate.OPT_BORDER, "gap-element bg-bg-subtle mt-2 grid grid-cols-1 rounded-lg p-2.5 sm:grid-cols-2"),
+		"aria-label": ariaLabel,
+		children: entries.map(([key, value]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+				className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "truncate text-xs"),
+				children: key
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+				className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_PRIMARY, "truncate text-xs"),
+				children: stringifyValue(value)
+			})]
+		}, key))
+	});
+}
+function TimelineRow({ item, gapLabel, labels, onItemSelect, isLast }) {
+	var _item$tone, _item$content, _item$properties;
+	const [open, setOpen] = (0, react.useState)(false);
+	const expandable = Boolean(item.content || item.properties);
+	const toggle = (0, react.useCallback)(() => setOpen((value) => !value), []);
+	const headline = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_PRIMARY, "truncate text-sm font-medium"),
+		children: item.name
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		className: "relative flex gap-3 pb-4 last:pb-0",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex shrink-0 flex-col items-center",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_text_truncate.cn("mt-1.5 size-2 shrink-0 rounded-full", toneDot[(_item$tone = item.tone) !== null && _item$tone !== void 0 ? _item$tone : "default"]),
+				"aria-hidden": "true"
+			}), !isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "bg-border mt-1 w-px grow",
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 grow flex-col",
+			children: [
+				gapLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_text_truncate.cn("text-text-tertiary", "mb-1 text-xs tabular-nums"),
+					children: labels.gap(gapLabel)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 items-baseline gap-2",
+					children: [
+						item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-text-tertiary",
+							"aria-hidden": "true",
+							children: item.icon
+						}),
+						onItemSelect ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => onItemSelect(item),
+							className: require_text_truncate.cn(require_text_truncate.OPT_FOCUS_VISIBLE, "hover:text-accent min-w-0 truncate rounded text-left"),
+							children: headline
+						}) : headline,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+							dateTime: item.timestamp,
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "ml-auto shrink-0 text-xs tabular-nums"),
+							children: require_text_truncate.formatOptTime(item.timestamp)
+						})
+					]
+				}),
+				item.detail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_text_truncate.cn("text-text-secondary", "truncate text-xs"),
+					children: item.detail
+				}),
+				expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: toggle,
+					"aria-expanded": open,
+					className: require_text_truncate.cn("outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", "text-text-tertiary", "hover:text-text-primary mt-1 flex w-fit items-center gap-1 rounded text-xs"),
+					children: [open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+						className: "size-3",
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+						className: "size-3",
+						"aria-hidden": "true"
+					}), open ? labels.collapse : labels.expand]
+				}), open && ((_item$content = item.content) !== null && _item$content !== void 0 ? _item$content : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PropertyTable, {
+					properties: (_item$properties = item.properties) !== null && _item$properties !== void 0 ? _item$properties : {},
+					ariaLabel: labels.properties
+				}))] })
+			]
+		})]
+	});
+}
+/** Builds the gap label for each row, given the reading order. */
+function useGapLabels(items, showGaps, order, minGapMs, locale) {
+	return (0, react.useMemo)(() => {
+		if (!showGaps) return items.map(() => null);
+		return items.map((item, index) => {
+			const neighbour = order === "desc" ? items[index + 1] : items[index - 1];
+			if (!neighbour) return null;
+			const delta = Math.abs(toMillis(item.timestamp) - toMillis(neighbour.timestamp));
+			if (delta < minGapMs) return null;
+			return (0, _reopt_ai_opt_charts.formatDuration)(delta, locale);
+		});
+	}, [
+		items,
+		showGaps,
+		order,
+		minGapMs,
+		locale
+	]);
+}
+function TimelineList({ items, showGaps, order, minGapMs, locale, labels, onItemSelect }) {
+	const gaps = useGapLabels(items, showGaps, order, minGapMs, locale);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+		className: "flex flex-col",
+		children: items.map((item, index) => {
+			var _gaps$index;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineRow, {
+				item,
+				gapLabel: (_gaps$index = gaps[index]) !== null && _gaps$index !== void 0 ? _gaps$index : null,
+				labels,
+				onItemSelect,
+				isLast: index === items.length - 1
+			}, item.id);
+		})
+	});
+}
+function GroupBlock({ group, showGaps, order, minGapMs, locale, labels, onItemSelect }) {
+	var _group$defaultOpen;
+	const [open, setOpen] = (0, react.useState)((_group$defaultOpen = group.defaultOpen) !== null && _group$defaultOpen !== void 0 ? _group$defaultOpen : true);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: require_text_truncate.cn(require_text_truncate.OPT_BORDER, "rounded-xl"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 px-3 py-2",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: () => setOpen((value) => !value),
+					"aria-expanded": open,
+					className: require_text_truncate.cn(require_text_truncate.OPT_FOCUS_VISIBLE, "flex min-w-0 grow items-center gap-2 rounded text-left"),
+					children: [
+						open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "size-4 shrink-0"),
+							"aria-hidden": "true"
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "size-4 shrink-0"),
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_PRIMARY, "truncate text-sm font-medium"),
+							children: group.title
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Badge, {
+							size: "sm",
+							variant: "default",
+							className: "shrink-0",
+							children: group.items.length
+						})
+					]
+				}),
+				group.meta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_text_truncate.cn("text-text-tertiary", "shrink-0 text-xs"),
+					children: group.meta
+				}),
+				group.href && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					href: group.href,
+					className: require_text_truncate.cn("outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", "text-accent shrink-0 rounded text-xs"),
+					children: labels.openGroup(typeof group.title === "string" ? group.title : group.id)
+				})
+			]
+		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "border-border-subtle border-t px-3 py-3",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineList, {
+				items: group.items,
+				showGaps,
+				order,
+				minGapMs,
+				locale,
+				labels,
+				onItemSelect
+			})
+		})]
+	});
+}
+/**
+* EventTimeline — a sequence of events, read as a sequence.
+*
+* A table of events answers "what happened" and hides "how it went": the rows
+* are evenly spaced no matter whether they were two seconds or two hours
+* apart, and the payload that would explain a row lives in a column nobody
+* widened. This renders the same data as an ordered rail, labels the elapsed
+* time between adjacent events, and opens each payload in place. Grouping by
+* session restores the boundary that makes a history legible.
+*
+* @example
+* ```tsx
+* <EventTimeline
+*   groups={sessions.map((session) => ({
+*     id: session.id,
+*     title: session.entryPath,
+*     meta: `${session.duration} · ${session.events} events`,
+*     items: session.events,
+*   }))}
+*   showGaps
+* />
+* ```
+*/
+function EventTimeline({ items, groups, showGaps = true, order = "desc", minGapMs = 1e3, loading = false, hasMore = false, onLoadMore, onItemSelect, locale = require_text_truncate.OPT_UI_DEFAULT_LOCALE, labels: customLabels, className }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$7), customLabels);
+	const flatItems = items !== null && items !== void 0 ? items : [];
+	const hasContent = groups ? groups.length > 0 : flatItems.length > 0;
+	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_text_truncate.cn(TIMELINE_WIDTH, "flex flex-col gap-3", className),
+		"data-opt-id": "H6S6T",
+		"data-opt-slug": "event-timeline.EventTimeline",
+		children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Skeleton, { className: "mt-1.5 size-2 rounded-full" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex grow flex-col gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Skeleton, { className: "h-4 w-40" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Skeleton, { className: "h-3 w-64" })]
+			})]
+		}, index))
+	});
+	if (!hasContent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_text_truncate.cn(TIMELINE_WIDTH, className),
+		"data-opt-id": "H6S6T",
+		"data-opt-slug": "event-timeline.EventTimeline",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.EmptyState, {
+			title: labels.emptyTitle,
+			description: labels.emptyDescription,
+			tone: "subdued",
+			hasBorder: true
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.cn(TIMELINE_WIDTH, "flex flex-col gap-3", className),
+		"data-opt-id": "H6S6T",
+		"data-opt-slug": "event-timeline.EventTimeline",
+		children: [groups ? groups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupBlock, {
+			group,
+			showGaps,
+			order,
+			minGapMs,
+			locale,
+			labels,
+			onItemSelect
+		}, group.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineList, {
+			items: flatItems,
+			showGaps,
+			order,
+			minGapMs,
+			locale,
+			labels,
+			onItemSelect
+		}), hasMore && onLoadMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex justify-center pt-1",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+				variant: "secondary",
+				size: "sm",
+				onClick: onLoadMore,
+				children: labels.loadMore
+			})
+		})]
+	});
+}
+EventTimeline.displayName = "EventTimeline";
+//#endregion
+//#region src/shells/score-breakdown.tsx
+const defaultLabels$6 = {
+	title: "Score",
+	outOf: (max) => `out of ${max}`,
+	weight: (percent) => `${percent} of total`,
+	empty: "Not enough activity to score."
+};
+const toneText = {
+	default: "text-text-primary",
+	success: "text-success-fg",
+	warning: "text-warning-fg",
+	error: "text-danger-fg"
+};
+const toneMeter = {
+	default: "default",
+	success: "success",
+	warning: "warning",
+	error: "error"
+};
+/** Picks the band a score falls into — the highest `min` at or below it. */
+function resolveBand(score, bands) {
+	return bands.filter((band) => score >= band.min).sort((left, right) => right.min - left.min)[0];
+}
+/**
+* ScoreBreakdown — a composite score you can argue with.
+*
+* Engagement, health and risk scores all collapse several signals into one
+* number, and the number alone tells nobody what to do about it. Showing the
+* axes and their weights beside the headline turns "43" into "recent, but
+* shallow", which is a finding rather than a verdict.
+*/
+function ScoreBreakdown({ score, max = 100, axes, bands = [], formula, loading = false, labels: customLabels, className }) {
+	var _band$tone;
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$6), customLabels);
+	const band = resolveBand(score, bands);
+	const tone = (_band$tone = band === null || band === void 0 ? void 0 : band.tone) !== null && _band$tone !== void 0 ? _band$tone : "default";
+	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: require_text_truncate.cn(require_text_truncate.OPT_BORDER, "flex flex-col gap-3 rounded-xl p-4", className),
+		"data-opt-id": "DYZSG",
+		"data-opt-slug": "score-breakdown.ScoreBreakdown",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Skeleton, { className: "h-9 w-24" }), Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Skeleton, { className: "h-6 w-full" }, index))]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: require_text_truncate.cn(require_text_truncate.OPT_BORDER, "flex flex-col gap-4 rounded-xl p-4", className),
+		"data-opt-id": "DYZSG",
+		"data-opt-slug": "score-breakdown.ScoreBreakdown",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_SECONDARY, "text-sm"),
+					children: labels.title
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-baseline gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_text_truncate.cn("text-3xl font-bold tabular-nums", toneText[tone]),
+							children: score
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "text-xs"),
+							children: labels.outOf(max)
+						}),
+						band && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_text_truncate.cn("ml-1 text-sm font-medium", toneText[tone]),
+							children: band.label
+						})
+					]
+				}),
+				formula && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_text_truncate.cn("text-text-tertiary", "text-xs"),
+					children: formula
+				})
+			]
+		}), axes.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_SECONDARY, "text-sm"),
+			children: labels.empty
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+			className: "flex flex-col gap-3",
+			children: axes.map((axis) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-1",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-baseline justify-between gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dt", {
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_PRIMARY, "text-sm"),
+							title: axis.hint,
+							children: [axis.label, axis.weight !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: require_text_truncate.cn("text-text-tertiary", "ml-1.5 text-xs"),
+								children: labels.weight(`${Math.round(axis.weight * 100)}%`)
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_SECONDARY, "text-sm font-medium tabular-nums"),
+							children: Math.round(axis.value)
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Meter, {
+						value: axis.value,
+						max,
+						size: "sm",
+						variant: toneMeter[tone],
+						"aria-label": axis.label
+					}),
+					axis.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: require_text_truncate.cn("text-text-tertiary", "text-xs"),
+						children: axis.hint
+					})
+				]
+			}, axis.id))
+		})]
+	});
+}
+ScoreBreakdown.displayName = "ScoreBreakdown";
+//#endregion
+//#region src/shells/flyout.tsx
+const defaultLabels$5 = { close: "Close panel" };
+const sizeClass = {
+	sm: "sm:w-[22rem]",
+	md: "sm:w-[30rem]",
+	lg: "sm:w-[42rem]"
+};
+/**
+* Flyout — a detail panel that does not take the page away.
+*
+* Navigating from a list to a record and back costs the reader their scroll
+* position, their filters and their place in the scan. A flyout keeps the list
+* on screen and shows the record beside it, so comparing three rows is three
+* clicks rather than six navigations.
+*
+* Deliberately **not** a modal: no focus trap, no `aria-modal`, no inert page.
+* The list behind it is still the point, and a reader who tabs out of the panel
+* to change a filter is doing the expected thing. Escape closes; focus returns
+* to whatever opened it.
+*
+* @example
+* ```tsx
+* <Flyout open={Boolean(selected)} onClose={clear} title={selected?.name}>
+*   <DescriptionList items={fields} />
+* </Flyout>
+* ```
+*/
+function Flyout({ open, onClose, title, description, type = "overlay", side = "right", size = "md", actions, footer, scrim = false, closeOnOutsideClick = true, hideCloseButton = false, labels: customLabels, className, children }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$5), customLabels);
+	const panelRef = (0, react.useRef)(null);
+	const openerRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		var _panelRef$current;
+		if (!open) return;
+		openerRef.current = document.activeElement;
+		(_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 || _panelRef$current.focus({ preventScroll: true });
+		return () => {
+			var _openerRef$current, _openerRef$current$fo;
+			(_openerRef$current = openerRef.current) === null || _openerRef$current === void 0 || (_openerRef$current$fo = _openerRef$current.focus) === null || _openerRef$current$fo === void 0 || _openerRef$current$fo.call(_openerRef$current, { preventScroll: true });
+		};
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				onClose();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [open, onClose]);
+	(0, react.useEffect)(() => {
+		if (!open || !closeOnOutsideClick || type !== "overlay") return;
+		const handlePointerDown = (event) => {
+			const panel = panelRef.current;
+			if (panel && !panel.contains(event.target)) onClose();
+		};
+		const timer = window.setTimeout(() => {
+			document.addEventListener("pointerdown", handlePointerDown);
+		}, 0);
+		return () => {
+			window.clearTimeout(timer);
+			document.removeEventListener("pointerdown", handlePointerDown);
+		};
+	}, [
+		open,
+		closeOnOutsideClick,
+		type,
+		onClose
+	]);
+	const handleClose = (0, react.useCallback)(() => onClose(), [onClose]);
+	if (!open) return null;
+	const header = (title || actions || !hideCloseButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+		className: require_text_truncate.cn("border-border-subtle flex items-start gap-2 border-b px-4 py-3"),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 grow flex-col gap-0.5",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: require_text_truncate.cn("text-text-primary", "truncate text-base font-semibold"),
+					children: title
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_text_truncate.cn("text-text-secondary", "truncate text-xs"),
+					children: description
+				})]
+			}),
+			actions,
+			!hideCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: handleClose,
+				"aria-label": labels.close,
+				className: require_text_truncate.cn("outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", "text-text-tertiary", "hover:text-text-primary shrink-0 rounded p-1 transition-colors"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+					className: "size-4",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+	const panel = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+		ref: panelRef,
+		role: "dialog",
+		"aria-modal": false,
+		"aria-label": typeof title === "string" ? title : void 0,
+		tabIndex: -1,
+		className: require_text_truncate.cn(require_text_truncate.OPT_FOCUS_VISIBLE, "flex min-h-0 flex-col", type === "overlay" && [
+			"rounded-xl bg-surface-raised shadow-md",
+			"fixed inset-y-0 z-40 w-full",
+			sizeClass[size],
+			side === "right" ? "right-0 border-l" : "left-0 border-r",
+			"border-border"
+		], type === "inline" && ["border border-border", "rounded-xl bg-surface"], className),
+		"data-opt-id": "85XVE",
+		"data-opt-slug": "flyout.Flyout",
+		children: [
+			header,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-h-0 grow overflow-y-auto px-4 py-4",
+				children
+			}),
+			footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+				className: "border-border-subtle border-t px-4 py-3",
+				children: footer
+			})
+		]
+	});
+	if (type === "inline") return panel;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [scrim && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "bg-overlay fixed inset-0 z-30",
+		"aria-hidden": "true"
+	}), panel] });
+}
+Flyout.displayName = "Flyout";
+//#endregion
 //#region src/lib/use-auto-refresh.ts
 /**
 * A refresh timer that waits for its own work.
@@ -2529,8 +3078,8 @@ function describeRange(range, labels, options) {
 		};
 	}
 	const dateOnly = (0, _reopt_ai_opt_charts.isDateOnly)(range.from) && (0, _reopt_ai_opt_charts.isDateOnly)(range.to);
-	const from = (0, _reopt_ai_opt_charts.formatInstant)(window.from, require_highlight._objectSpread2(require_highlight._objectSpread2({}, options), {}, { dateOnly }));
-	const to = (0, _reopt_ai_opt_charts.formatInstant)(window.to, require_highlight._objectSpread2(require_highlight._objectSpread2({}, options), {}, { dateOnly }));
+	const from = (0, _reopt_ai_opt_charts.formatInstant)(window.from, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, options), {}, { dateOnly }));
+	const to = (0, _reopt_ai_opt_charts.formatInstant)(window.to, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, options), {}, { dateOnly }));
 	return {
 		text: from === to ? from : `${from} – ${to}`,
 		isInvalid: false
@@ -2561,7 +3110,7 @@ function describeRange(range, labels, options) {
 */
 function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, locale, showUpdateButton = true, showWindowButtons = true, zoomFactor = .5, refresh, onRefreshChange, onRefresh, isLoading = false, disabled = false, className, labels: customLabels, "aria-label": ariaLabel }) {
 	var _refresh$interval, _refresh$paused, _refresh$interval2;
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$4), customLabels), {}, { units: require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$4.units), customLabels === null || customLabels === void 0 ? void 0 : customLabels.units) });
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$4), customLabels), {}, { units: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$4.units), customLabels === null || customLabels === void 0 ? void 0 : customLabels.units) });
 	const [open, setOpen] = (0, react.useState)(false);
 	const [draft, setDraft] = (0, react.useState)(null);
 	const [quickCount, setQuickCount] = (0, react.useState)("15");
@@ -2631,17 +3180,17 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 	});
 	const refreshLabel = !refresh || refresh.paused || refresh.interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(refresh.interval, locale));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("bg-surface inline-flex items-center rounded-lg border", require_highlight.OPT_BORDER, className),
+		className: require_text_truncate.cn("bg-surface inline-flex items-center rounded-lg border", require_text_truncate.OPT_BORDER, className),
 		role: "group",
 		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.trigger,
 		"data-opt-id": "3WJ8H",
 		"data-opt-slug": "time-range-control.TimeRangeControl",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverRoot, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverRoot, {
 				open,
 				onOpenChange: setOpen,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverTrigger, {
-					className: require_highlight.cn("text-text-primary h-10 gap-2", description.isInvalid && "text-danger-fg"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverTrigger, {
+					className: require_text_truncate.cn("text-text-primary h-10 gap-2", description.isInvalid && "text-danger-fg"),
 					disabled,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clock, {
 						className: "text-text-tertiary h-4 w-4",
@@ -2650,7 +3199,7 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 						className: "truncate text-sm",
 						children: description.text
 					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverContent, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverContent, {
 					className: "gap-group flex w-80 flex-col",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2661,7 +3210,7 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "flex items-end gap-2",
 								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
 										"aria-label": labels.quickSelect,
 										type: "number",
 										min: 1,
@@ -2673,18 +3222,18 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 											if (event.key === "Enter") applyQuick();
 										}
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
 										value: quickUnit,
 										setValue: (next) => setQuickUnit(selectValue(next)),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectTrigger, {
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectTrigger, {
 											minWidth: 110,
 											"aria-label": labels.quickSelect
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectItem, {
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectItem, {
 											value: unit,
 											children: labels.units[unit]
 										}, unit)) })]
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
 										variant: "secondary",
 										size: "sm",
 										onClick: applyQuick,
@@ -2695,20 +3244,20 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "gap-element flex flex-col",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
 								label: labels.start,
 								size: "sm",
 								value: editing.from,
 								error: boundState(editing.from),
 								hint: labels.startHint,
-								onChange: (event) => setDraft(require_highlight._objectSpread2(require_highlight._objectSpread2({}, editing), {}, { from: event.target.value })),
+								onChange: (event) => setDraft(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, editing), {}, { from: event.target.value })),
 								onKeyDown: commitOnEnter
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Input, {
 								label: labels.end,
 								size: "sm",
 								value: editing.to,
 								error: boundState(editing.to),
-								onChange: (event) => setDraft(require_highlight._objectSpread2(require_highlight._objectSpread2({}, editing), {}, { to: event.target.value })),
+								onChange: (event) => setDraft(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, editing), {}, { to: event.target.value })),
 								onKeyDown: commitOnEnter
 							})]
 						}),
@@ -2733,7 +3282,7 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								className: "text-text-primary text-xs font-medium",
 								children: labels.autoRefresh
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
 								value: String((refresh === null || refresh === void 0 ? void 0 : refresh.paused) ? 0 : (_refresh$interval2 = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval2 !== void 0 ? _refresh$interval2 : 0),
 								setValue: (next) => {
 									const interval = Number(selectValue(next));
@@ -2742,10 +3291,10 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 										paused: interval === 0
 									});
 								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectTrigger, {
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectTrigger, {
 									minWidth: 140,
 									"aria-label": labels.autoRefresh
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectItem, {
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectItem, {
 									value: String(interval),
 									children: interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(interval, locale))
 								}, interval)) })]
@@ -2755,7 +3304,7 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 				})]
 			}),
 			showWindowButtons && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_highlight.cn("flex items-center border-l", "border border-border"),
+				className: require_text_truncate.cn("flex items-center border-l", "border border-border"),
 				role: "group",
 				"aria-label": labels.previous,
 				children: [
@@ -2798,8 +3347,8 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 				]
 			}),
 			(onRefresh || showUpdateButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_highlight.cn("border-l pl-2 pr-2", "border border-border"),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
+				className: require_text_truncate.cn("border-l pl-2 pr-2", "border border-border"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
 					variant: hasChanges ? "primary" : "secondary",
 					size: "sm",
 					loading: isLoading,
@@ -2818,7 +3367,7 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 }
 TimeRangeControl.displayName = "TimeRangeControl";
 function IconButton({ label, disabled, onClick, children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
 		variant: "ghost",
 		size: "sm",
 		"aria-label": label,
@@ -2838,7 +3387,7 @@ function RangeList({ title, items, onPick }) {
 			className: "grid grid-cols-2 gap-1",
 			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
-				className: require_highlight.cn("hover:bg-bg-subtle w-full cursor-pointer rounded px-2 py-1 text-left text-xs", require_highlight.OPT_TEXT_SECONDARY),
+				className: require_text_truncate.cn("hover:bg-bg-subtle w-full cursor-pointer rounded px-2 py-1 text-left text-xs", require_text_truncate.OPT_TEXT_SECONDARY),
 				onClick: () => onPick(item.range),
 				children: item.label
 			}) }, `${item.label}-${index}`))
@@ -2939,7 +3488,7 @@ const defaultLabels$3 = {
 * ```
 */
 function TimeSeriesPanel({ title, description, actions, data, series, range, onRangeChange, granularity = "auto", timeZone, locale, showRangeControl = true, presets, recentRanges, refresh, onRefreshChange, onRefresh, toggleableLegend = false, annotations, isLoading = false, height = 280, className, chartProps, labels: customLabels, "aria-label": ariaLabel }) {
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$3), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$3), customLabels);
 	const [history, setHistory] = (0, react.useState)([]);
 	const [hidden, setHidden] = (0, react.useState)([]);
 	const resolved = (0, react.useMemo)(() => (0, _reopt_ai_opt_charts.resolveTimeRange)(range, { timeZone }), [range, timeZone]);
@@ -2963,7 +3512,7 @@ function TimeSeriesPanel({ title, description, actions, data, series, range, onR
 		setHidden((current) => current.includes(dataKey) ? current.filter((key) => key !== dataKey) : [...current, dataKey]);
 	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: require_highlight.cn(require_highlight.OPT_SURFACE, require_highlight.OPT_BORDER, "flex flex-col", className),
+		className: require_text_truncate.cn(require_text_truncate.OPT_SURFACE, require_text_truncate.OPT_BORDER, "flex flex-col", className),
 		"aria-label": ariaLabel,
 		"data-opt-id": "Y0XCY",
 		"data-opt-slug": "time-series-panel.TimeSeriesPanel",
@@ -2975,13 +3524,13 @@ function TimeSeriesPanel({ title, description, actions, data, series, range, onR
 					className: "text-text-primary truncate text-base font-semibold",
 					children: title
 				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: require_highlight.cn("text-text-secondary", "truncate text-sm"),
+					className: require_text_truncate.cn("text-text-secondary", "truncate text-sm"),
 					children: description
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "gap-element flex flex-wrap items-center",
 				children: [
-					history.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
+					history.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
 						variant: "ghost",
 						size: "sm",
 						onClick: goBack,
@@ -3009,7 +3558,7 @@ function TimeSeriesPanel({ title, description, actions, data, series, range, onR
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "px-2 pb-4",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_charts.TimeSeriesChart, require_highlight._objectSpread2({
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_charts.TimeSeriesChart, require_text_truncate._objectSpread2({
 				data,
 				series: visibleSeries,
 				from: resolved === null || resolved === void 0 ? void 0 : resolved.from,
@@ -3120,7 +3669,7 @@ function columnStyle(column) {
 * ```
 */
 function LogTableInner({ rows, columns, getRowId, selectedId = null, onSelect, onLoadMore, hasMore = false, loadingMore = false, prepending = false, onFollowChange, isNew, sort = null, onSortChange, onCellAction, highlightTerms, onColumnMove, density = "normal", showHeader = true, emptyState, labels: customLabels, className }, ref) {
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$2), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$2), customLabels);
 	const rowHeight = ROW_HEIGHT[density];
 	const scrollRef = (0, react.useRef)(null);
 	const [scrollTop, setScrollTop] = (0, react.useState)(0);
@@ -3244,7 +3793,7 @@ function LogTableInner({ rows, columns, getRowId, selectedId = null, onSelect, o
 		lastVisible
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("@container/log flex min-h-0 flex-col", className),
+		className: require_text_truncate.cn("@container/log flex min-h-0 flex-col", className),
 		"data-opt-id": "3ZR82",
 		"data-opt-slug": "log-table.LogTable",
 		children: [showHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogTableHeader, {
@@ -3287,13 +3836,13 @@ function LogTableInner({ rows, columns, getRowId, selectedId = null, onSelect, o
 				}),
 				loadingMore && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "gap-element text-text-tertiary flex items-center justify-center py-3 text-xs",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Spinner, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Spinner, {
 						size: "sm",
 						"aria-hidden": true
 					}), labels.loadingMore]
 				}),
 				!hasMore && rows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: require_highlight.cn("text-text-tertiary", "py-3 text-center text-xs"),
+					className: require_text_truncate.cn("text-text-tertiary", "py-3 text-center text-xs"),
 					children: labels.endOfResults
 				})
 			]
@@ -3310,7 +3859,7 @@ const LogTable = (0, react.forwardRef)(LogTableInner);
 function LogTableHeader({ columns, sort, onSortChange, onColumnMove, density, labels }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "row",
-		className: require_highlight.cn("border-border-subtle text-text-tertiary flex shrink-0 items-center gap-3 border-b px-3", DENSITY_TEXT[density]),
+		className: require_text_truncate.cn("border-border-subtle text-text-tertiary flex shrink-0 items-center gap-3 border-b px-3", DENSITY_TEXT[density]),
 		style: { height: ROW_HEIGHT[density] },
 		children: columns.map((column, index) => {
 			var _column$priority;
@@ -3337,7 +3886,7 @@ function LogTableHeader({ columns, sort, onSortChange, onColumnMove, density, la
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				role: "columnheader",
 				"aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
-				className: require_highlight.cn("group/header flex items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority = column.priority) !== null && _column$priority !== void 0 ? _column$priority : "always"]),
+				className: require_text_truncate.cn("group/header flex items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority = column.priority) !== null && _column$priority !== void 0 ? _column$priority : "always"]),
 				style: columnStyle(column),
 				children: [sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
@@ -3349,7 +3898,7 @@ function LogTableHeader({ columns, sort, onSortChange, onColumnMove, density, la
 					}),
 					children: content
 				}) : content, onColumnMove && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: require_highlight.cn("ml-auto flex shrink-0 items-center gap-0.5", "opacity-0 transition-opacity", "group-hover/header:opacity-100 focus-within:opacity-100"),
+					className: require_text_truncate.cn("ml-auto flex shrink-0 items-center gap-0.5", "opacity-0 transition-opacity", "group-hover/header:opacity-100 focus-within:opacity-100"),
 					children: [index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						className: "hover:text-text-primary cursor-pointer",
@@ -3393,13 +3942,13 @@ function LogTableRowImpl({ id, row, columns, top, height, density, selected, isN
 			top,
 			height
 		},
-		className: require_highlight.cn("border-border-subtle/60 absolute inset-x-0 flex items-center gap-3 border-b px-3", DENSITY_TEXT[density], onSelect && "cursor-pointer", "transition-colors duration-100", "hover:bg-surface-hover", selected && "bg-accent-subtle hover:bg-accent-subtle", isNew && !selected && "opt-log-row-enter"),
+		className: require_text_truncate.cn("border-border-subtle/60 absolute inset-x-0 flex items-center gap-3 border-b px-3", DENSITY_TEXT[density], onSelect && "cursor-pointer", "transition-colors duration-100", "hover:bg-surface-hover", selected && "bg-accent-subtle hover:bg-accent-subtle", isNew && !selected && "opt-log-row-enter"),
 		children: columns.map((column) => {
 			var _column$priority2;
 			const raw = column.value(row);
 			const text = raw === null || raw === void 0 || raw === "" ? "" : String(raw);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_highlight.cn("group/cell relative flex min-w-0 items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority2 = column.priority) !== null && _column$priority2 !== void 0 ? _column$priority2 : "always"]),
+				className: require_text_truncate.cn("group/cell relative flex min-w-0 items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority2 = column.priority) !== null && _column$priority2 !== void 0 ? _column$priority2 : "always"]),
 				style: columnStyle(column),
 				children: [
 					column.marker && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -3408,9 +3957,16 @@ function LogTableRowImpl({ id, row, columns, top, height, density, selected, isN
 						style: { backgroundColor: `hsl(${hueOf(text)} 65% 55%)` }
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: require_highlight.cn("truncate", column.mono && "font-mono", text ? "text-text-secondary" : ABSENT),
-						title: text || void 0,
-						children: column.render ? column.render(row) : text ? highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Highlight, {
+						className: require_text_truncate.cn("min-w-0 flex-1", !column.truncate && "truncate", column.mono && "font-mono", text ? "text-text-secondary" : ABSENT),
+						title: column.truncate ? void 0 : text || void 0,
+						children: column.render ? column.render(row) : text ? column.truncate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TextTruncate, {
+							text,
+							truncation: column.truncate,
+							children: (shown) => highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Highlight, {
+								text: shown,
+								search: highlightTerms
+							}) : shown
+						}) : highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Highlight, {
 							text,
 							search: highlightTerms
 						}) : text : EM_DASH
@@ -3442,7 +3998,7 @@ const LogTableRow = (0, react.memo)(LogTableRowImpl);
 function CellActions({ field, value, onAction, labels }) {
 	const button = "cursor-pointer rounded-sm p-0.5 text-text-tertiary hover:bg-bg-muted hover:text-text-primary";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: require_highlight.cn("bg-surface/90 ml-auto flex shrink-0 items-center gap-0.5 rounded pl-1", "opacity-0 transition-opacity", "group-hover/cell:opacity-100 focus-within:opacity-100"),
+		className: require_text_truncate.cn("bg-surface/90 ml-auto flex shrink-0 items-center gap-0.5 rounded pl-1", "opacity-0 transition-opacity", "group-hover/cell:opacity-100 focus-within:opacity-100"),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			className: button,
@@ -3823,7 +4379,7 @@ const MAX_SUGGESTIONS = 8;
 * ```
 */
 function QueryBar({ value, onChange, fields = [], showClauses = false, live = false, disabled = false, className, labels: customLabels }) {
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$1), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$1), customLabels);
 	const inputRef = (0, react.useRef)(null);
 	const [text, setText] = (0, react.useState)(() => formatQuery(value));
 	const [focused, setFocused] = (0, react.useState)(false);
@@ -3881,12 +4437,12 @@ function QueryBar({ value, onChange, fields = [], showClauses = false, live = fa
 	};
 	const showSuggestions = focused && suggestions.length > 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("relative flex min-w-0 flex-col gap-1.5", className),
+		className: require_text_truncate.cn("relative flex min-w-0 flex-col gap-1.5", className),
 		"data-opt-id": "JSVZ1",
 		"data-opt-slug": "query-bar.QueryBar",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_highlight.cn("bg-surface flex h-9 items-center gap-2 rounded-md border px-2.5", require_highlight.OPT_BORDER, "focus-within:border-accent transition-colors", disabled && "opacity-60"),
+				className: require_text_truncate.cn("bg-surface flex h-9 items-center gap-2 rounded-md border px-2.5", require_text_truncate.OPT_BORDER, "focus-within:border-accent transition-colors", disabled && "opacity-60"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
 						className: "text-text-tertiary size-4 shrink-0",
@@ -3902,7 +4458,7 @@ function QueryBar({ value, onChange, fields = [], showClauses = false, live = fa
 						"aria-label": labels.ariaLabel,
 						placeholder: labels.placeholder,
 						disabled,
-						className: require_highlight.cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent font-mono text-sm outline-none focus-visible:outline-none"),
+						className: require_text_truncate.cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent font-mono text-sm outline-none focus-visible:outline-none"),
 						value: text,
 						onChange: (event) => {
 							setText(event.target.value);
@@ -3920,7 +4476,7 @@ function QueryBar({ value, onChange, fields = [], showClauses = false, live = fa
 						type: "button",
 						"aria-label": labels.clear,
 						title: labels.clear,
-						className: require_highlight.cn("text-text-tertiary hover:text-text-primary cursor-pointer rounded-sm p-0.5", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+						className: require_text_truncate.cn("text-text-tertiary hover:text-text-primary cursor-pointer rounded-sm p-0.5", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
 						onClick: () => {
 							setText("");
 							commit("");
@@ -3935,12 +4491,12 @@ function QueryBar({ value, onChange, fields = [], showClauses = false, live = fa
 			showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 				id: "query-bar-suggestions",
 				role: "listbox",
-				className: require_highlight.cn("bg-surface-overlay absolute top-10 z-40 max-h-64 w-full overflow-y-auto rounded-md border p-1 shadow-lg", "border border-border"),
+				className: require_text_truncate.cn("bg-surface-overlay absolute top-10 z-40 max-h-64 w-full overflow-y-auto rounded-md border p-1 shadow-lg", "border border-border"),
 				children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
 					role: "option",
 					"aria-selected": index === highlighted,
-					className: require_highlight.cn("flex w-full cursor-pointer items-center justify-between gap-3 rounded px-2 py-1 text-left text-sm", index === highlighted ? "bg-bg-subtle" : "hover:bg-bg-subtle"),
+					className: require_text_truncate.cn("flex w-full cursor-pointer items-center justify-between gap-3 rounded px-2 py-1 text-left text-sm", index === highlighted ? "bg-bg-subtle" : "hover:bg-bg-subtle"),
 					onMouseEnter: () => setHighlighted(index),
 					onMouseDown: (event) => event.preventDefault(),
 					onClick: () => applySuggestion(suggestion),
@@ -3958,7 +4514,7 @@ function QueryBar({ value, onChange, fields = [], showClauses = false, live = fa
 				children: value.clauses.map((clause, index) => {
 					const label = describeClause(clause);
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-						className: require_highlight.cn("bg-bg-subtle text-text-secondary flex items-center gap-1 rounded px-1.5 py-0.5 text-xs", clause.negated && "text-danger-fg"),
+						className: require_text_truncate.cn("bg-bg-subtle text-text-secondary flex items-center gap-1 rounded px-1.5 py-0.5 text-xs", clause.negated && "text-danger-fg"),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "truncate",
 							children: label
@@ -4083,7 +4639,7 @@ const defaultLabels = {
 * ```
 */
 function FieldSidebar({ fields, expandedField = null, onExpandedFieldChange, values, valuesLoading = false, sampledRows, onToggleColumn, onFilter, header, className, labels: customLabels }) {
-	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels), customLabels);
 	const [search, setSearch] = (0, react.useState)("");
 	const groups = (0, react.useMemo)(() => {
 		const needle = search.trim().toLowerCase();
@@ -4100,14 +4656,14 @@ function FieldSidebar({ fields, expandedField = null, onExpandedFieldChange, val
 	}, [fields, search]);
 	const total = (0, react.useMemo)(() => (values !== null && values !== void 0 ? values : []).reduce((sum, entry) => sum + entry.count, 0), [values]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
-		className: require_highlight.cn("flex min-h-0 flex-col", className),
+		className: require_text_truncate.cn("flex min-h-0 flex-col", className),
 		"aria-label": labels.heading,
 		"data-opt-id": "17D4Y",
 		"data-opt-slug": "field-sidebar.FieldSidebar",
 		children: [
 			header,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_highlight.cn("flex items-center gap-2 border-b px-3 py-2", "focus-within:border-accent transition-colors", require_highlight.OPT_BORDER),
+				className: require_text_truncate.cn("flex items-center gap-2 border-b px-3 py-2", "focus-within:border-accent transition-colors", require_text_truncate.OPT_BORDER),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
 					className: "text-text-tertiary size-3.5 shrink-0",
 					"aria-hidden": true
@@ -4115,7 +4671,7 @@ function FieldSidebar({ fields, expandedField = null, onExpandedFieldChange, val
 					type: "search",
 					"aria-label": labels.searchLabel,
 					placeholder: labels.searchPlaceholder,
-					className: require_highlight.cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent text-sm outline-none focus-visible:outline-none"),
+					className: require_text_truncate.cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent text-sm outline-none focus-visible:outline-none"),
 					value: search,
 					onChange: (event) => setSearch(event.target.value)
 				})]
@@ -4123,10 +4679,10 @@ function FieldSidebar({ fields, expandedField = null, onExpandedFieldChange, val
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "min-h-0 flex-1 overflow-y-auto",
 				children: groups.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: require_highlight.cn(require_highlight.OPT_TEXT_TERTIARY, "px-3 py-4 text-xs"),
+					className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "px-3 py-4 text-xs"),
 					children: labels.empty
 				}) : groups.map(([group, groupFields]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [group && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-					className: require_highlight.cn("text-text-tertiary", "px-3 pt-3 pb-1 text-[11px] font-medium tracking-wide uppercase"),
+					className: require_text_truncate.cn("text-text-tertiary", "px-3 pt-3 pb-1 text-[11px] font-medium tracking-wide uppercase"),
 					children: group
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: groupFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
 					field,
@@ -4158,12 +4714,12 @@ function FieldRow({ field, expanded, onToggleExpanded, onToggleColumn, labels, c
 			className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left",
 			"aria-expanded": expanded,
 			onClick: onToggleExpanded,
-			children: [field.dataType ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FieldToken, {
+			children: [field.dataType ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldToken, {
 				type: field.dataType,
 				size: "xs",
 				title: (_field$type = field.type) !== null && _field$type !== void 0 ? _field$type : field.dataType
 			}) : field.type && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: require_highlight.cn("text-text-tertiary", "w-8 shrink-0 truncate font-mono text-[10px] uppercase"),
+				className: require_text_truncate.cn("text-text-tertiary", "w-8 shrink-0 truncate font-mono text-[10px] uppercase"),
 				children: field.type
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-text-primary truncate font-mono text-xs",
@@ -4171,7 +4727,7 @@ function FieldRow({ field, expanded, onToggleExpanded, onToggleColumn, labels, c
 			})]
 		}), onToggleColumn && columnable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
-			className: require_highlight.cn("cursor-pointer rounded-sm p-0.5", field.inTable ? "text-accent" : "text-text-tertiary hover:text-text-primary opacity-0 group-hover/field:opacity-100 focus-visible:opacity-100"),
+			className: require_text_truncate.cn("cursor-pointer rounded-sm p-0.5", field.inTable ? "text-accent" : "text-text-tertiary hover:text-text-primary opacity-0 group-hover/field:opacity-100 focus-visible:opacity-100"),
 			"aria-label": field.inTable ? labels.removeColumn(field.name) : labels.addColumn(field.name),
 			title: field.inTable ? labels.removeColumn(field.name) : labels.addColumn(field.name),
 			"aria-pressed": (_field$inTable = field.inTable) !== null && _field$inTable !== void 0 ? _field$inTable : false,
@@ -4194,21 +4750,21 @@ function FieldRow({ field, expanded, onToggleExpanded, onToggleColumn, labels, c
 */
 function FieldValues({ values, loading, total, sampledRows, onFilter, labels }) {
 	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-		className: require_highlight.cn(require_highlight.OPT_TEXT_TERTIARY, "flex items-center gap-2 px-3 pb-2 text-xs"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Spinner, {
+		className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "flex items-center gap-2 px-3 pb-2 text-xs"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Spinner, {
 			size: "sm",
 			"aria-hidden": true
 		}), labels.loadingValues]
 	});
 	if (!values || values.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: require_highlight.cn(require_highlight.OPT_TEXT_TERTIARY, "px-3 pb-2 text-xs"),
+		className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "px-3 pb-2 text-xs"),
 		children: labels.noValues
 	});
 	const denominator = sampledRows !== null && sampledRows !== void 0 ? sampledRows : total;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col gap-1 px-3 pt-1 pb-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-			className: require_highlight.cn(require_highlight.OPT_TEXT_TERTIARY, "text-[11px]"),
+			className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "text-[11px]"),
 			children: [labels.topValues(values.length), sampledRows ? ` · ${sampledRows.toLocaleString()}` : ""]
 		}), values.map((entry) => {
 			var _entry$share;
@@ -4224,11 +4780,11 @@ function FieldValues({ values, loading, total, sampledRows, onFilter, labels })
 							children: entry.value || "—"
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: require_highlight.cn(require_highlight.OPT_TEXT_TERTIARY, "shrink-0 text-[11px] tabular-nums"),
+							className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "shrink-0 text-[11px] tabular-nums"),
 							children: [Math.round(share * 100), "%"]
 						}),
 						onFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: require_highlight.cn("flex shrink-0 items-center gap-0.5", "opacity-0 transition-opacity", "group-hover/value:opacity-100 focus-within:opacity-100"),
+							className: require_text_truncate.cn("flex shrink-0 items-center gap-0.5", "opacity-0 transition-opacity", "group-hover/value:opacity-100 focus-within:opacity-100"),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								className: "text-text-tertiary hover:text-text-primary cursor-pointer",
@@ -4396,6 +4952,12 @@ Object.defineProperty(exports, "EnvPanel", {
 		return EnvPanel;
 	}
 });
+Object.defineProperty(exports, "EventTimeline", {
+	enumerable: true,
+	get: function() {
+		return EventTimeline;
+	}
+});
 Object.defineProperty(exports, "FailureList", {
 	enumerable: true,
 	get: function() {
@@ -4414,6 +4976,12 @@ Object.defineProperty(exports, "FieldSidebar", {
 		return FieldSidebar;
 	}
 });
+Object.defineProperty(exports, "Flyout", {
+	enumerable: true,
+	get: function() {
+		return Flyout;
+	}
+});
 Object.defineProperty(exports, "KeyValueEditor", {
 	enumerable: true,
 	get: function() {
@@ -4444,6 +5012,12 @@ Object.defineProperty(exports, "QueryBar", {
 		return QueryBar;
 	}
 });
+Object.defineProperty(exports, "ScoreBreakdown", {
+	enumerable: true,
+	get: function() {
+		return ScoreBreakdown;
+	}
+});
 Object.defineProperty(exports, "SearchCombobox", {
 	enumerable: true,
 	get: function() {