@reopt-ai/opt-ui 1.7.0 → 1.9.0

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

@@ -1,14 +1,14 @@
 "use client";
-const require_pagination = require("./pagination-DjfxBcjX.cjs");
+const require_highlight = require("./highlight-CGcrYGMC.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-react = require_pagination.__toESM(react, 1);
+react = require_highlight.__toESM(react, 1);
 let _reopt_ai_opt_ui_primitives = require("@reopt-ai/opt-ui-primitives");
 let lucide_react = require("lucide-react");
 let _reopt_ai_opt_charts = require("@reopt-ai/opt-charts");
 let match_sorter = require("match-sorter");
 let next_link = require("next/link");
-next_link = require_pagination.__toESM(next_link, 1);
+next_link = require_highlight.__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_pagination._objectWithoutProperties(_ref, _excluded);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandRoot, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("bg-surface text-text-primary flex w-full flex-col overflow-hidden rounded-xl", className) }, props), {}, {
+	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), {}, {
 		"data-opt-id": "4FYBW",
 		"data-opt-slug": "command.Command"
 	}));
 }
 /** Renders a Command in a dialog overlay, à la Cmd+K palette. */
 function CommandDialog({ open, onOpenChange, title = "Command Palette", description = "검색 후 Enter 또는 클릭으로 명령을 실행하세요.", className, commandClassName, shouldFilter, filter, children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DialogRoot, {
 		open,
 		onOpenChange,
 		"data-opt-id": "DVRSX",
 		"data-opt-slug": "command.CommandDialog",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.DialogPanel, {
-			className: require_pagination.cn("top-[20%] left-1/2 -translate-x-1/2", "w-full max-w-lg overflow-hidden p-0 shadow-2xl", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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.jsx)(require_pagination.DialogHeading, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DialogHeading, {
 					className: "sr-only",
 					children: title
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogDescription, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination._objectWithoutProperties(_ref2, _excluded2);
+	let { className, trailing, wrapperClassName, placeholder, "aria-label": ariaLabel } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-slot": "command-input-wrapper",
-		className: require_pagination.cn("border-border-subtle gap-element flex h-12 items-center border-b px-3", wrapperClassName),
+		className: require_highlight.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_pagination._objectSpread2({
-				className: require_pagination.cn("text-text-primary placeholder:text-text-tertiary flex h-full w-full bg-transparent text-sm outline-none focus-visible:ring-0 focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", className),
+			/* @__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),
 				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_pagination._objectWithoutProperties(_ref3, _excluded3);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandList, require_pagination._objectSpread2(require_pagination._objectSpread2({
-		className: require_pagination.cn("max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1", className),
+	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),
 		"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_pagination._objectWithoutProperties(_ref4, _excluded4);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandEmpty, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("text-text-tertiary py-6 text-center text-sm", className) }, props), {}, {
+	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), {}, {
 		"data-opt-id": "A8BZM",
 		"data-opt-slug": "command.CommandEmpty"
 	}));
 }
 /** Renders the `CommandGroup` component with an optional heading. */
 function CommandGroup(_ref5) {
-	let { className, heading } = _ref5, props = require_pagination._objectWithoutProperties(_ref5, _excluded5);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandGroup, require_pagination._objectSpread2(require_pagination._objectSpread2({
+	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({
 		heading: heading != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "text-text-tertiary px-2 py-1.5 text-xs font-medium",
 			children: heading
 		}) : void 0,
-		className: require_pagination.cn("py-1", className)
+		className: require_highlight.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_pagination._objectWithoutProperties(_ref6, _excluded6);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandSeparator, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("bg-border-subtle -mx-1 my-1 h-px", className) }, props), {}, {
+	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), {}, {
 		"data-opt-id": "10P0E",
 		"data-opt-slug": "command.CommandSeparator"
 	}));
 }
 /** Renders the `CommandItem` component. */
 function CommandItem(_ref7) {
-	let { className } = _ref7, props = require_pagination._objectWithoutProperties(_ref7, _excluded7);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CommandItem, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("text-text-primary flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm select-none", "data-[active-item]:bg-accent data-[active-item]:text-accent-fg", "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props), {}, {
+	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), {}, {
 		"data-opt-id": "K674W",
 		"data-opt-slug": "command.CommandItem"
 	}));
 }
 /** Renders the `CommandShortcut` component (right-aligned hint). */
 function CommandShortcut(_ref8) {
-	let { className } = _ref8, props = require_pagination._objectWithoutProperties(_ref8, _excluded8);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", require_pagination._objectSpread2(require_pagination._objectSpread2({
+	let { className } = _ref8, props = require_highlight._objectWithoutProperties(_ref8, _excluded8);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", require_highlight._objectSpread2(require_highlight._objectSpread2({
 		"data-slot": "command-shortcut",
-		className: require_pagination.cn("text-text-tertiary ml-auto text-xs tracking-widest", "data-[active-item]:text-accent-fg/80", className)
+		className: require_highlight.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_pagination._objectSpread2(require_pagination._objectSpread2({}, DEFAULT_LABELS), labels);
+	const resolvedLabels = require_highlight._objectSpread2(require_highlight._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_pagination.Kbd, { children: resolvedLabels.escape }) : void 0
+			trailing: inputTrailing !== null && inputTrailing !== void 0 ? inputTrailing : !inline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination.cn("border-border bg-surface w-full max-w-lg border shadow-lg", className),
+			className: require_highlight.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
@@ -263,7 +263,7 @@ function normalizeDashboardColumns(columns) {
 }
 /** Renders the dashboard grid component. */
 function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$18), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$18), 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_pagination.StatCard, require_pagination._objectSpread2({}, stat))
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.StatCard, require_highlight._objectSpread2({}, stat))
 				}, stat.id))
 			}, ri))
 		})
@@ -297,7 +297,7 @@ const defaultLabels$17 = {
 };
 /** Renders the search combobox component. */
 function SearchCombobox({ items, placeholder = "검색...", label = "검색", onSelect, labels: customLabels, async: isAsync = false, onSearch, debounceMs = 300 }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$17), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$17), 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_pagination.ComboboxRoot, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.ComboboxRoot, {
 			onValueChange: handleValueChange,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 					htmlFor: inputId,
-					className: require_pagination.OPT_TEXT_LABEL,
+					className: require_highlight.OPT_TEXT_LABEL,
 					children: label
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxInput, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ComboboxInput, {
 					id: inputId,
 					placeholder,
 					className: "max-w-xs",
 					"aria-busy": loading || void 0,
 					onInput: handleInput
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxPopover, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ComboboxPopover, {
 					className: "max-w-xs",
 					children: isAsync && loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "text-text-secondary gap-element flex items-center px-3 py-2 text-sm",
 						role: "status",
 						"aria-live": "polite",
 						"aria-busy": "true",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Spinner, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Spinner, {
 							size: "sm",
 							"aria-hidden": "true"
 						}), labels.loading]
-					}) : matches.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxEmpty, { children: labels.noResults }) : matches.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxItem, {
+					}) : 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, {
 						value: item,
 						children: item
 					}, item))
@@ -402,7 +402,7 @@ const defaultLabels$16 = {
 /** Renders the status select component. */
 function StatusSelect({ options, value: controlledValue, onChange, label, labels: customLabels }) {
 	var _options$0$value, _options$;
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$16), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$16), customLabels);
 	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
 	const [internalValue, setInternalValue] = (0, react.useState)((_options$0$value = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value) !== null && _options$0$value !== void 0 ? _options$0$value : "");
 	const value = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
@@ -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_pagination.OPT_TEXT_LABEL,
+			className: require_highlight.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_pagination.SelectRoot, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
 			value,
 			onValueChange: handleChange,
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectLabel, {
-					className: require_pagination.OPT_TEXT_LABEL,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectLabel, {
+					className: require_highlight.OPT_TEXT_LABEL,
 					children: resolvedLabel
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectTrigger, {
-					className: `${require_pagination.OPT_INPUT} max-w-xs items-center justify-between ${require_pagination.OPT_FOCUS}`,
+				/* @__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}`,
 					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_pagination.SelectPopover, {
-					className: `${require_pagination.OPT_SURFACE_POPOVER} ${require_pagination.OPT_ANIMATE_ENTER_EXIT} max-w-xs`,
-					children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectItem, {
+				/* @__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, {
 						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))
@@ -471,11 +471,11 @@ function StatusSelect({ options, value: controlledValue, onChange, label, labels
 //#region src/shells/app-menubar.tsx
 const defaultLabels$15 = { ariaLabel: "Application menu" };
 function MenuSection({ menu }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.MenuRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.MenuTrigger, { children: [menu.label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuButtonArrow, {})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuPopover, { children: menu.items.map((item, i) => {
-		if (item.type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuSeparator, {}, `sep-${i}`);
+	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}`);
 		if (item.type === "checkbox") {
 			var _item$name, _item$value;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuItemCheckbox, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination.MenuItemRadio, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination.MenuItem, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.MenuItem, {
 			onClick: item.onClick,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }), item.shortcut && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Kbd, { children: item.shortcut })]
+			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 })]
 		}, item.id);
 	}) })] });
 }
 /** Renders the app menubar component. */
 function AppMenubar({ menus, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$15), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$15), customLabels);
 	if (menus.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenubarRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenubarRoot, {
 		"data-opt-id": "BGKHW",
 		"data-opt-slug": "app-menubar.AppMenubar",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenubarContainer, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenubarContainer, {
 			"aria-label": labels.ariaLabel,
 			children: menus.map((menu) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSection, { menu }, menu.id))
 		})
@@ -555,7 +555,7 @@ const defaultSectionStyle = "text-text-secondary";
 const defaultLabels$14 = { ariaLabel: "문서 네비게이션" };
 /** Renders the sidebar nav component. */
 function SidebarNav({ items, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$14), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$14), customLabels);
 	const pathname = (0, next_navigation.usePathname)();
 	const activeItem = items.find((item) => item.href === pathname);
 	const [activeId, setActiveId] = (0, react.useState)(activeItem ? domId(activeItem.id) : void 0);
@@ -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_pagination.cn("mb-2 pt-2", !isFirstItem && "mt-7"),
+					className: require_highlight.cn("mb-2 pt-2", !isFirstItem && "mt-7"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: require_pagination.cn("px-2 text-[11px] font-semibold tracking-wider uppercase", sectionTextStyle),
+						className: require_highlight.cn("px-2 text-[11px] font-semibold tracking-wider uppercase", sectionTextStyle),
 						children: (_item$sectionLabel = item.sectionLabel) !== null && _item$sectionLabel !== void 0 ? _item$sectionLabel : ""
 					})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
 					id: domId(item.id),
 					render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(next_link.default, {
 						href: item.href,
-						className: require_pagination.cn("group relative block rounded-md px-2 py-1.5 text-[13px] leading-snug outline-none", "transition-all duration-150", !isSelected && ["text-text-secondary", "hover:bg-bg-subtle hover:text-text-primary"], isSelected && ["bg-bg-subtle text-text-primary font-medium"], "data-[active-item]:bg-accent-subtle data-[active-item]:text-accent", "data-[focus-visible]:ring-ring data-[focus-visible]:ring-2", "data-[focus-visible]:ring-offset-ring-offset data-[focus-visible]:ring-offset-2", isSelected && ["data-[active-item]:bg-accent-subtle data-[active-item]:text-accent"])
+						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"])
 					}),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_pagination.cn("absolute top-1/2 left-0 h-4 w-0.5 -translate-y-1/2 rounded-full transition-all duration-150", isSelected && "bg-accent", !isSelected && "group-data-[active-item]:bg-accent bg-transparent", "group-data-[focus-visible]:bg-accent") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					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", {
 						className: "pl-2",
 						children: item.label
 					})]
@@ -605,15 +605,15 @@ function SidebarNav({ items, labels: customLabels }) {
 //#region src/shells/editor-toolbar.tsx
 const defaultLabels$13 = { ariaLabel: "텍스트 편집기 툴바" };
 function ToolbarButtonWithTooltip({ button, active, onAction }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.TooltipProvider, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TooltipAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ToolbarButton, {
+	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, {
 		className: `text-text-primary data-[active-item]:bg-bg-subtle data-[focus-visible]:ring-ring rounded-md p-2 transition-colors outline-none data-[focus-visible]:ring-2 ${active ? "bg-bg-muted" : "hover:bg-bg-subtle"}`,
 		onClick: () => onAction === null || onAction === void 0 ? void 0 : onAction(button.id),
 		children: button.icon
-	}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Tooltip, { children: button.label })] });
+	}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Tooltip, { children: button.label })] });
 }
 /** Renders the editor toolbar component. */
 function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$13), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$13), 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_pagination.ToolbarRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ToolbarRoot, {
 		"data-opt-id": "Z73K6",
 		"data-opt-slug": "editor-toolbar.EditorToolbar",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ToolbarContainer, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ToolbarContainer, {
 			"aria-label": labels.ariaLabel,
 			children: groups.map((group, gi) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: "contents",
-				children: [gi > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ToolbarSeparator, {}), group.map((item) => {
+				children: [gi > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ToolbarSeparator, {}), group.map((item) => {
 					if (item === "separator") return null;
 					const btn = item;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButtonWithTooltip, {
@@ -653,7 +653,7 @@ const defaultLabels$12 = {
 /** Renders the content tabs component. */
 function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
 	var _tabs$, _tabs$find;
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$12), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$12), customLabels);
 	const [selectedTabId, setSelectedTabId] = (0, react.useState)(defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
 	if (tabs.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "text-text-secondary text-sm",
@@ -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_pagination.TabsRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.TabsRoot, {
 		selectedId: selectedTabId,
 		onSelectedIdChange: handleSelectedTabId,
 		"data-opt-id": "9W97K",
 		"data-opt-slug": "content-tabs.ContentTabs",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TabList, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.TabList, {
 			"aria-label": labels.ariaLabel,
-			children: tabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Tab, {
+			children: tabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Tab, {
 				id: tab.id,
 				children: tab.label
 			}, tab.id))
-		}), activeTab && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TabPanel, {
+		}), activeTab && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.TabPanel, {
 			tabId: activeTab.id,
 			children: activeTab.content
 		})]
@@ -691,7 +691,7 @@ const defaultLabels$11 = {
 };
 /** Renders the faq accordion component. */
 function FaqAccordion({ items, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$11), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$11), customLabels);
 	if (items.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "text-text-secondary text-sm",
 		"data-opt-id": "QRBHV",
@@ -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_pagination.DisclosureRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
-				render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DisclosureTrigger, {}),
+			children: 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: [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_pagination.DisclosureContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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))
@@ -738,7 +738,7 @@ const defaultLabels$10 = {
 };
 /** Renders the settings form component. */
 function SettingsForm({ fields, onSubmit, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$10), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$10), 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_pagination.EmptyState, {
+	if (fields.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination.FormRoot, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.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_pagination.FormLabel, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormLabel, {
 								name: field.name,
 								children: field.label
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TagInput, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.TagInput, {
 								value: tags,
 								onChange: (next) => form.setValue(field.name, next),
 								placeholder: field.placeholder
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: field.name })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination.FormRadioGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormRadioGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "gap-group flex",
 								children: (_field$options = field.options) === null || _field$options === void 0 ? void 0 : _field$options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 									className: "text-text-primary gap-element flex items-center text-sm",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormRadio, {
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormRadio, {
 										name: field.name,
 										value: option.value
 									}), option.label]
 								}, option.value))
 							}) }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: field.name })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination.FormCheckbox, { name: field.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: field.label })]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: field.name })]
+						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 })]
 				}, field.name);
 				if (field.type === "textarea") {
 					var _field$rows, _field$resize;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "gap-element flex flex-col",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormLabel, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormLabel, {
 								name: field.name,
 								children: field.label
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormTextarea, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormTextarea, {
 								name: field.name,
 								placeholder: field.placeholder,
 								rows: (_field$rows = field.rows) !== null && _field$rows !== void 0 ? _field$rows : 4,
 								resize: (_field$resize = field.resize) !== null && _field$resize !== void 0 ? _field$resize : "vertical",
 								className: field.font === "mono" ? "font-mono text-sm" : void 0
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: field.name })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination.FormLabel, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormLabel, {
 								name: field.name,
 								children: field.label
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSelect, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormSelect, {
 								name: field.name,
 								placeholder: field.placeholder,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSelectPopover, { children: (_field$options2 = field.options) === null || _field$options2 === void 0 ? void 0 : _field$options2.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSelectItem, {
+								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, {
 									value: option.value,
 									children: option.label
 								}, option.value)) })
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: field.name })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormError, { name: field.name })
 						]
 					}, field.name);
 				}
 				if (field.type === "switch") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 					className: "gap-group flex items-center",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSwitch, { name: field.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination.FormLabel, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormLabel, {
 							name: field.name,
 							children: field.label
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormInput, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormInput, {
 							name: field.name,
 							type: (_field$type = field.type) !== null && _field$type !== void 0 ? _field$type : "text",
 							placeholder: field.placeholder
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: field.name })
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormError, { name: field.name })
 					]
 				}, field.name);
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSubmit, { children: labels.submitButton })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination.OPT_TEXT_TERTIARY,
+	pending: require_highlight.OPT_TEXT_TERTIARY,
 	running: "text-accent",
 	error: "text-danger-fg",
 	skipped: "text-text-tertiary"
 };
 const statusBadge$1 = {
-	success: require_pagination.OPT_BADGE_GREEN,
-	pending: require_pagination.OPT_BADGE_NEUTRAL,
+	success: require_highlight.OPT_BADGE_GREEN,
+	pending: require_highlight.OPT_BADGE_NEUTRAL,
 	running: "inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium bg-info-subtle text-info-fg",
-	error: require_pagination.OPT_BADGE_RED,
-	skipped: require_pagination.OPT_BADGE_NEUTRAL
+	error: require_highlight.OPT_BADGE_RED,
+	skipped: require_highlight.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_pagination.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_highlight.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_pagination.OPT_TEXT_PRIMARY}`,
+										className: `text-sm font-medium ${require_highlight.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_pagination.OPT_DOT_GREEN,
-	paused: require_pagination.OPT_DOT_YELLOW,
-	error: require_pagination.OPT_DOT_RED
+	active: require_highlight.OPT_DOT_GREEN,
+	paused: require_highlight.OPT_DOT_YELLOW,
+	error: require_highlight.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_pagination.ComboboxRoot, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.ComboboxRoot, {
 			onValueChange: setSearch,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-					className: require_pagination.OPT_TEXT_LABEL,
+					className: require_highlight.OPT_TEXT_LABEL,
 					children: "프로젝트"
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxInput, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ComboboxInput, {
 					placeholder: selected ? selected.name : placeholder,
-					className: require_pagination.OPT_INPUT
+					className: require_highlight.OPT_INPUT
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.ComboboxPopover, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.ComboboxPopover, {
 					className: "max-h-72 overflow-y-auto",
 					children: [matches.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: `py-6 text-center text-sm text-text-secondary`,
 						children: "결과가 없습니다."
-					}), matches.map((project) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.ComboboxItem, {
+					}), matches.map((project) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.ComboboxItem, {
 						value: project.name,
 						onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(project.id),
-						className: `gap-element flex scroll-m-2 items-center ${require_pagination.OPT_ITEM_BASE} ${require_pagination.OPT_ACTIVE_ITEM}`,
+						className: `gap-element flex scroll-m-2 items-center ${require_highlight.OPT_ITEM_BASE} ${require_highlight.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_pagination.OPT_BADGE_NEUTRAL,
+								className: require_highlight.OPT_BADGE_NEUTRAL,
 								children: project.framework
 							}),
 							project.domain && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1070,23 +1070,23 @@ const defaultLabels$9 = {
 	secretBadge: "secret"
 };
 const envDot = {
-	Production: require_pagination.OPT_DOT_RED,
-	Preview: require_pagination.OPT_DOT_YELLOW,
-	Development: require_pagination.OPT_DOT_GREEN
+	Production: require_highlight.OPT_DOT_RED,
+	Preview: require_highlight.OPT_DOT_YELLOW,
+	Development: require_highlight.OPT_DOT_GREEN
 };
 /** Renders the env panel component. */
 function EnvPanel({ groups, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$9), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$9), customLabels);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `rounded-lg ${require_pagination.OPT_BORDER} divide-y ${require_pagination.OPT_DIVIDER} bg-surface`,
+		className: `rounded-lg ${require_highlight.OPT_BORDER} divide-y ${require_highlight.OPT_DIVIDER} bg-surface`,
 		"data-opt-id": "ZBDWK",
 		"data-opt-slug": "env-panel.EnvPanel",
 		children: groups.map((group) => {
 			var _envDot$group$env;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DisclosureRoot, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DisclosureRoot, {
 				defaultOpen: group.env === "Production",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.DisclosureTrigger, {
-					className: require_pagination.OPT_DISCLOSURE_TRIGGER,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.DisclosureTrigger, {
+					className: require_highlight.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_pagination.OPT_TEXT_TERTIARY}`,
+								className: `text-xs ${require_highlight.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_pagination.DisclosureContent, {
-					className: require_pagination.OPT_DISCLOSURE_CONTENT,
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DisclosureContent, {
+					className: require_highlight.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_pagination.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_highlight.OPT_FOCUS} data-[active-item]:bg-accent-subtle`,
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: `w-44 shrink-0 truncate font-mono text-xs font-medium ${require_pagination.OPT_TEXT_PRIMARY}`,
+										className: `w-44 shrink-0 truncate font-mono text-xs font-medium ${require_highlight.OPT_TEXT_PRIMARY}`,
 										children: v.key
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: `flex-1 truncate font-mono text-xs ${require_pagination.OPT_TEXT_SECONDARY}`,
+										className: `flex-1 truncate font-mono text-xs ${require_highlight.OPT_TEXT_SECONDARY}`,
 										children: v.isSecret ? "••••••••" : v.value
 									}),
 									v.isSecret && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_pagination.OPT_BADGE_NEUTRAL,
+										className: require_highlight.OPT_BADGE_NEUTRAL,
 										children: labels.secretBadge
 									})
 								]
@@ -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_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$8), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$8), customLabels);
 	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
 	const defaultBranch = branches.find((b) => b.isDefault);
 	const [internalValue, setInternalValue] = (0, react.useState)((_ref = (_defaultBranch$name = defaultBranch === null || defaultBranch === void 0 ? void 0 : defaultBranch.name) !== null && _defaultBranch$name !== void 0 ? _defaultBranch$name : (_branches$ = branches[0]) === null || _branches$ === void 0 ? void 0 : _branches$.name) !== null && _ref !== void 0 ? _ref : "");
@@ -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_pagination.OPT_TEXT_LABEL,
+			className: require_highlight.OPT_TEXT_LABEL,
 			children: resolvedLabel
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: require_pagination.OPT_TEXT_TERTIARY,
+			className: require_highlight.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_pagination.SelectRoot, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
 			value,
 			onValueChange: handleChange,
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectLabel, {
-					className: require_pagination.OPT_TEXT_LABEL,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectLabel, {
+					className: require_highlight.OPT_TEXT_LABEL,
 					children: resolvedLabel
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectTrigger, {
-					className: `${require_pagination.OPT_INPUT} max-w-xs items-center justify-between gap-1`,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectTrigger, {
+					className: `${require_highlight.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_pagination.OPT_BADGE_BLUE,
+								className: require_highlight.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_pagination.SelectPopover, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, {
 					className: "max-w-xs",
-					children: branches.map((branch) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectItem, {
+					children: branches.map((branch) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectItem, {
 						value: branch.name,
-						className: `gap-element flex scroll-m-2 items-center ${require_pagination.OPT_ITEM_BASE} ${require_pagination.OPT_ACTIVE_ITEM}`,
+						className: `gap-element flex scroll-m-2 items-center ${require_highlight.OPT_ITEM_BASE} ${require_highlight.OPT_ACTIVE_ITEM}`,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "flex-1 truncate",
@@ -1276,14 +1276,14 @@ const defaultLabels$7 = {
 	emptyMessage: "No domains configured"
 };
 const statusBadge = {
-	active: require_pagination.OPT_BADGE_GREEN,
-	pending: require_pagination.OPT_BADGE_YELLOW,
-	error: require_pagination.OPT_BADGE_RED
+	active: require_highlight.OPT_BADGE_GREEN,
+	pending: require_highlight.OPT_BADGE_YELLOW,
+	error: require_highlight.OPT_BADGE_RED
 };
 const sslBadge = {
-	valid: require_pagination.OPT_BADGE_GREEN,
-	pending: require_pagination.OPT_BADGE_YELLOW,
-	expired: require_pagination.OPT_BADGE_RED
+	valid: require_highlight.OPT_BADGE_GREEN,
+	pending: require_highlight.OPT_BADGE_YELLOW,
+	expired: require_highlight.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_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$7), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$7), customLabels);
 	if (domains.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "gap-group flex flex-col",
 		"data-opt-id": "A7SRM",
@@ -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_pagination.OPT_BORDER} ${require_pagination.OPT_TEXT_SECONDARY} bg-surface`,
+			className: `rounded-lg px-4 py-6 text-sm ${require_highlight.OPT_BORDER} ${require_highlight.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_pagination.OPT_BORDER} bg-surface`,
+			className: `overflow-x-auto rounded-lg ${require_highlight.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_pagination.OPT_TH,
+								className: require_highlight.OPT_TH,
 								children: labels.domain
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-								className: require_pagination.OPT_TH,
+								className: require_highlight.OPT_TH,
 								children: labels.status
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-								className: require_pagination.OPT_TH,
+								className: require_highlight.OPT_TH,
 								children: labels.ssl
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-								className: require_pagination.OPT_TH,
+								className: require_highlight.OPT_TH,
 								children: labels.redirect
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-								className: require_pagination.OPT_TH,
+								className: require_highlight.OPT_TH,
 								children: labels.added
 							})
 						] })
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
-						className: `divide-y ${require_pagination.OPT_DIVIDER}`,
+						className: `divide-y ${require_highlight.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_pagination.OPT_TD} font-mono font-medium`,
+											className: `${require_highlight.OPT_TD} font-mono font-medium`,
 											role: "gridcell"
 										}),
-										className: require_pagination.OPT_TABLE_ROW_ACTIVE,
+										className: require_highlight.OPT_TABLE_ROW_ACTIVE,
 										children: d.domain
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
 										render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-											className: require_pagination.OPT_TD,
+											className: require_highlight.OPT_TD,
 											role: "gridcell"
 										}),
-										className: require_pagination.OPT_TABLE_ROW_ACTIVE,
+										className: require_highlight.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_pagination.OPT_TD,
+											className: require_highlight.OPT_TD,
 											role: "gridcell"
 										}),
-										className: require_pagination.OPT_TABLE_ROW_ACTIVE,
+										className: require_highlight.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_pagination.OPT_TD,
+											className: require_highlight.OPT_TD,
 											role: "gridcell"
 										}),
-										className: require_pagination.OPT_TABLE_ROW_ACTIVE,
+										className: require_highlight.OPT_TABLE_ROW_ACTIVE,
 										children: (_d$redirect = d.redirect) !== null && _d$redirect !== void 0 ? _d$redirect : "—"
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
 										render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-											className: require_pagination.OPT_TD_MUTED,
+											className: require_highlight.OPT_TD_MUTED,
 											role: "gridcell"
 										}),
-										className: require_pagination.OPT_TABLE_ROW_ACTIVE,
+										className: require_highlight.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_pagination.cn("h-full rounded-full transition-all", barColor),
+			className: require_highlight.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_pagination.cn("gap-group flex flex-col", className),
+		className: require_highlight.cn("gap-group flex flex-col", className),
 		"data-opt-id": "J1KN4",
 		"data-opt-slug": "data-table.DataTable",
 		children: [
 			title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-				className: require_pagination.cn("text-sm font-semibold", "text-text-primary"),
+				className: require_highlight.cn("text-sm font-semibold", "text-text-primary"),
 				children: title
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_pagination.cn("overflow-x-auto rounded-lg", require_pagination.OPT_BORDER, "bg-surface"),
+				className: require_highlight.cn("overflow-x-auto rounded-lg", require_highlight.OPT_BORDER, "bg-surface"),
 				children: data.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: require_pagination.cn("px-4 py-8 text-center text-sm", require_pagination.OPT_TEXT_SECONDARY),
+					className: require_highlight.cn("px-4 py-8 text-center text-sm", require_highlight.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_pagination.cn("border-border-subtle bg-surface-inset border-b", stickyHeader && "sticky top-0 z-10"),
+							className: require_highlight.cn("border-border-subtle bg-surface-inset border-b", stickyHeader && "sticky top-0 z-10"),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
 								selectable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-									className: require_pagination.cn("px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-tertiary", "w-10"),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Checkbox, {
+									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, {
 										checked: allSelected,
 										onChange: toggleSelectAll,
 										"aria-label": "Select all"
 									})
 								}),
-								expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { className: require_pagination.cn("px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-tertiary", "w-10") }),
+								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") }),
 								columns.map((col) => {
 									var _col$align;
 									const isSortable = sortable && col.sortable !== false;
 									const resizeValue = getResizeHandleValue(colWidths[col.id], col.width);
 									const resizeMax = Math.max(DEFAULT_COLUMN_RESIZE_MAX, resizeValue);
 									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("th", {
-										className: require_pagination.cn(require_pagination.OPT_TH, "relative", alignmentClass[(_col$align = col.align) !== null && _col$align !== void 0 ? _col$align : "left"], isSortable && "hover:text-text-primary cursor-pointer select-none", isSortable && "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+										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"),
 										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_pagination._objectSpread2(require_pagination._objectSpread2({}, prev), {}, { [col.id]: e.key === "Home" ? MIN_COLUMN_WIDTH : resizeMax }));
+													setColWidths((prev) => require_highlight._objectSpread2(require_highlight._objectSpread2({}, prev), {}, { [col.id]: e.key === "Home" ? MIN_COLUMN_WIDTH : resizeMax }));
 													return;
 												}
 												const delta = e.shiftKey ? 40 : 10;
 												const direction = e.key === "ArrowRight" ? 1 : -1;
 												setColWidths((prev) => {
 													const current = getResizeHandleValue(prev[col.id], col.width);
-													return require_pagination._objectSpread2(require_pagination._objectSpread2({}, prev), {}, { [col.id]: Math.max(MIN_COLUMN_WIDTH, current + direction * delta) });
+													return require_highlight._objectSpread2(require_highlight._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_pagination._objectSpread2(require_pagination._objectSpread2({}, prev), {}, { [col.id]: newW }));
+													setColWidths((prev) => require_highlight._objectSpread2(require_highlight._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_pagination.cn("divide-y", require_pagination.OPT_DIVIDER),
+							className: require_highlight.cn("divide-y", require_highlight.OPT_DIVIDER),
 							children: pagedData.map((row) => {
 								const key = keyExtractor(row);
 								const isExpanded = expandedKeys.has(key);
 								const isSelected = selectedSet.has(key);
 								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeRow, {
 									render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
-										className: require_pagination.cn(onRowClick ? "cursor-pointer" : void 0, (isSelected || activeRowId === key) && "bg-accent-subtle"),
+										className: require_highlight.cn(onRowClick ? "cursor-pointer" : void 0, (isSelected || activeRowId === key) && "bg-accent-subtle"),
 										onClick: onRowClick ? () => onRowClick(row) : void 0
 									}),
 									children: [
 										selectable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
 											render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-												className: require_pagination.cn("px-3 py-2.5 text-sm text-text-primary whitespace-nowrap", "w-10"),
+												className: require_highlight.cn("px-3 py-2.5 text-sm text-text-primary whitespace-nowrap", "w-10"),
 												role: "gridcell"
 											}),
 											className: "outline-none data-[active-item]:bg-accent-subtle data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-1",
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Checkbox, {
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination.cn("px-3 py-2.5 text-sm text-text-primary whitespace-nowrap", "w-10"),
+												className: require_highlight.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_pagination.cn("rounded p-0.5 text-sm transition-transform", "text-text-secondary", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", isExpanded && "rotate-90"),
+												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"),
 												"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_pagination.cn(require_pagination.OPT_TD, alignmentClass[(_col$align2 = col.align) !== null && _col$align2 !== void 0 ? _col$align2 : "left"], colIndex === 0 ? "font-medium" : ""),
+													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" : ""),
 													role: "gridcell"
 												}),
-												className: require_pagination.OPT_TABLE_ROW_ACTIVE,
+												className: require_highlight.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_pagination.Pagination, {
+			pageSize && totalPages > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination._objectSpread2({
+		toasts = [...toasts, require_highlight._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_pagination._objectSpread2(require_pagination._objectSpread2({}, options), {}, {
+	return (message, options) => toastStore.add(require_highlight._objectSpread2(require_highlight._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_pagination.cn("gap-element fixed z-50 flex flex-col", positionStyles[position]),
+			className: require_highlight.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_pagination.Alert, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Alert, {
 			variant: toast.variant,
 			title: toast.title,
 			dismissible: true,
@@ -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_pagination.cn("group gap-group relative flex w-full items-start p-3", require_pagination.OPT_FOCUS_VISIBLE, "data-[active-item]:bg-accent-subtle", onFailureClick && "cursor-pointer", !isLast && "border-border-subtle border-b", severityBorder[failure.severity]),
+		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]),
 		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_pagination.Badge, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Badge, {
 						variant: severityVariant[failure.severity],
 						size: "sm",
 						children: mergedSeverityLabels[failure.severity]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						id: itemId,
-						className: `text-sm font-medium ${require_pagination.OPT_TEXT_PRIMARY} truncate`,
+						className: `text-sm font-medium ${require_highlight.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_pagination.OPT_TEXT_TERTIARY}`,
+					className: `mt-1 block text-xs ${require_highlight.OPT_TEXT_TERTIARY}`,
 					children: formatRelativeTime(failure.timestamp, mergedTimeAgo, locale)
 				})
 			]
@@ -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_pagination.OPT_TEXT_SECONDARY}`,
+				className: `py-8 text-center text-sm ${require_highlight.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_pagination.OPT_BORDER} bg-surface`,
+					className: `rounded-lg ${require_highlight.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_pagination._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_highlight._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_pagination.cn(`px-3 py-2 text-xs font-semibold text-text-tertiary tracking-wider uppercase`, groupIndex > 0 && "border-border-subtle border-t"),
+			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"),
 			children: groupName
-		}), groupItems.map((failure, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailureItemRow, require_pagination._objectSpread2({
+		}), groupItems.map((failure, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailureItemRow, require_highlight._objectSpread2({
 			failure,
 			isLast: isLastGroup && index === groupItems.length - 1
 		}, rowProps), failure.id))] }, groupName || "__ungrouped__");
@@ -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_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$5), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$5), customLabels);
 	const [internalEntries, setInternalEntries] = (0, react.useState)(() => defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
 	const entries = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalEntries;
 	const keyInputRef = (0, react.useRef)(null);
@@ -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_pagination._objectSpread2(require_pagination._objectSpread2({}, e), {}, { [field]: val }) : e));
+		updateEntries(entries.map((e) => e.id === id ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, e), {}, { [field]: val }) : e));
 	}, [entries, updateEntries]);
 	const toggleSecret = (0, react.useCallback)((id) => {
-		updateEntries(entries.map((e) => e.id === id ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, e), {}, { isSecret: !e.isSecret }) : e));
+		updateEntries(entries.map((e) => e.id === id ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, e), {}, { isSecret: !e.isSecret }) : e));
 	}, [entries, updateEntries]);
 	const canAdd = !readOnly && (!maxEntries || entries.length < maxEntries);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("gap-group flex flex-col", className),
+		className: require_highlight.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_pagination.cn("gap-element flex items-start", "border-border rounded-lg border p-3", "bg-surface"),
+					className: require_highlight.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_pagination.cn("border-border bg-bg-subtle text-text-primary placeholder:text-text-tertiary w-full rounded-md border px-3 py-1.5 font-mono text-sm", "focus:border-accent focus-visible:ring-ring focus-visible:ring-offset-ring-offset focus-visible:ring-2 focus-visible:ring-offset-1", readOnly && "cursor-default opacity-70", keyError && "border-error")
+								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")
 							}), 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_pagination.cn("border-border bg-bg-subtle text-text-primary placeholder:text-text-tertiary w-full rounded-md border px-3 py-1.5 font-mono text-sm", "focus:border-accent focus-visible:ring-ring focus-visible:ring-offset-ring-offset focus-visible:ring-2 focus-visible:ring-offset-1", readOnly && "cursor-default opacity-70")
+								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")
 							})
 						}),
 						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_pagination.cn("border-border text-text-secondary rounded-lg border border-dashed px-4 py-2 text-sm transition-colors", "hover:border-accent hover:text-accent"),
+			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"),
 			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_pagination.cn("group absolute flex h-full w-full flex-col justify-between rounded-lg border p-2 text-left transition-colors", selected ? "border-accent bg-accent-subtle" : "border-border bg-surface hover:bg-bg-subtle"),
+		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"),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "text-text-primary truncate text-xs font-medium",
 			children: step.title
-		}), step.status && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Badge, {
+		}), step.status && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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_pagination.cn("gap-group flex flex-col", className),
+		className: require_highlight.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", {
@@ -2529,8 +2529,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_pagination._objectSpread2(require_pagination._objectSpread2({}, options), {}, { dateOnly }));
-	const to = (0, _reopt_ai_opt_charts.formatInstant)(window.to, require_pagination._objectSpread2(require_pagination._objectSpread2({}, options), {}, { dateOnly }));
+	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 }));
 	return {
 		text: from === to ? from : `${from} – ${to}`,
 		isInvalid: false
@@ -2561,7 +2561,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_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$4), customLabels), {}, { units: require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$4.units), customLabels === null || customLabels === void 0 ? void 0 : customLabels.units) });
+	const 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 [open, setOpen] = (0, react.useState)(false);
 	const [draft, setDraft] = (0, react.useState)(null);
 	const [quickCount, setQuickCount] = (0, react.useState)("15");
@@ -2631,17 +2631,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_pagination.cn("bg-surface inline-flex items-center rounded-lg border", require_pagination.OPT_BORDER, className),
+		className: require_highlight.cn("bg-surface inline-flex items-center rounded-lg border", require_highlight.OPT_BORDER, className),
 		role: "group",
 		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.trigger,
 		"data-opt-id": "3WJ8H",
 		"data-opt-slug": "time-range-control.TimeRangeControl",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverRoot, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverRoot, {
 				open,
 				onOpenChange: setOpen,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverTrigger, {
-					className: require_pagination.cn("text-text-primary h-10 gap-2", description.isInvalid && "text-danger-fg"),
+				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"),
 					disabled,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clock, {
 						className: "text-text-tertiary h-4 w-4",
@@ -2650,7 +2650,7 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 						className: "truncate text-sm",
 						children: description.text
 					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverContent, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverContent, {
 					className: "gap-group flex w-80 flex-col",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2661,7 +2661,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_pagination.Input, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 										"aria-label": labels.quickSelect,
 										type: "number",
 										min: 1,
@@ -2673,18 +2673,18 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 											if (event.key === "Enter") applyQuick();
 										}
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectRoot, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
 										value: quickUnit,
 										setValue: (next) => setQuickUnit(selectValue(next)),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectTrigger, {
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectTrigger, {
 											minWidth: 110,
 											"aria-label": labels.quickSelect
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectItem, {
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectItem, {
 											value: unit,
 											children: labels.units[unit]
 										}, unit)) })]
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 										variant: "secondary",
 										size: "sm",
 										onClick: applyQuick,
@@ -2695,20 +2695,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_pagination.Input, {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 								label: labels.start,
 								size: "sm",
 								value: editing.from,
 								error: boundState(editing.from),
 								hint: labels.startHint,
-								onChange: (event) => setDraft(require_pagination._objectSpread2(require_pagination._objectSpread2({}, editing), {}, { from: event.target.value })),
+								onChange: (event) => setDraft(require_highlight._objectSpread2(require_highlight._objectSpread2({}, editing), {}, { from: event.target.value })),
 								onKeyDown: commitOnEnter
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 								label: labels.end,
 								size: "sm",
 								value: editing.to,
 								error: boundState(editing.to),
-								onChange: (event) => setDraft(require_pagination._objectSpread2(require_pagination._objectSpread2({}, editing), {}, { to: event.target.value })),
+								onChange: (event) => setDraft(require_highlight._objectSpread2(require_highlight._objectSpread2({}, editing), {}, { to: event.target.value })),
 								onKeyDown: commitOnEnter
 							})]
 						}),
@@ -2733,7 +2733,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_pagination.SelectRoot, {
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.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 +2742,10 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 										paused: interval === 0
 									});
 								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectTrigger, {
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectTrigger, {
 									minWidth: 140,
 									"aria-label": labels.autoRefresh
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectItem, {
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectItem, {
 									value: String(interval),
 									children: interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(interval, locale))
 								}, interval)) })]
@@ -2755,7 +2755,7 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 				})]
 			}),
 			showWindowButtons && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_pagination.cn("flex items-center border-l", "border border-border"),
+				className: require_highlight.cn("flex items-center border-l", "border border-border"),
 				role: "group",
 				"aria-label": labels.previous,
 				children: [
@@ -2798,8 +2798,8 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 				]
 			}),
 			(onRefresh || showUpdateButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_pagination.cn("border-l pl-2 pr-2", "border border-border"),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+				className: require_highlight.cn("border-l pl-2 pr-2", "border border-border"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 					variant: hasChanges ? "primary" : "secondary",
 					size: "sm",
 					loading: isLoading,
@@ -2818,7 +2818,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_pagination.Button, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 		variant: "ghost",
 		size: "sm",
 		"aria-label": label,
@@ -2838,7 +2838,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_pagination.cn("hover:bg-bg-subtle w-full cursor-pointer rounded px-2 py-1 text-left text-xs", require_pagination.OPT_TEXT_SECONDARY),
+				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),
 				onClick: () => onPick(item.range),
 				children: item.label
 			}) }, `${item.label}-${index}`))
@@ -2939,7 +2939,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_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$3), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._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 +2963,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_pagination.cn(require_pagination.OPT_SURFACE, require_pagination.OPT_BORDER, "flex flex-col", className),
+		className: require_highlight.cn(require_highlight.OPT_SURFACE, require_highlight.OPT_BORDER, "flex flex-col", className),
 		"aria-label": ariaLabel,
 		"data-opt-id": "Y0XCY",
 		"data-opt-slug": "time-series-panel.TimeSeriesPanel",
@@ -2975,13 +2975,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_pagination.cn("text-text-secondary", "truncate text-sm"),
+					className: require_highlight.cn("text-text-secondary", "truncate text-sm"),
 					children: description
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "gap-element flex flex-wrap items-center",
 				children: [
-					history.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					history.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						variant: "ghost",
 						size: "sm",
 						onClick: goBack,
@@ -3009,7 +3009,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_pagination._objectSpread2({
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_charts.TimeSeriesChart, require_highlight._objectSpread2({
 				data,
 				series: visibleSeries,
 				from: resolved === null || resolved === void 0 ? void 0 : resolved.from,
@@ -3058,7 +3058,9 @@ const defaultLabels$2 = {
 	filterFor: (value) => `Filter for ${value}`,
 	filterOut: (value) => `Filter out ${value}`,
 	sortAscending: "Sort ascending",
-	sortDescending: "Sort descending"
+	sortDescending: "Sort descending",
+	moveLeft: (column) => `Move ${column} left`,
+	moveRight: (column) => `Move ${column} right`
 };
 /** Rows rendered beyond the viewport on each side, so a fast scroll stays filled. */
 const OVERSCAN = 10;
@@ -3117,8 +3119,8 @@ function columnStyle(column) {
 * />
 * ```
 */
-function LogTableInner({ rows, columns, getRowId, selectedId = null, onSelect, onLoadMore, hasMore = false, loadingMore = false, prepending = false, onFollowChange, isNew, sort = null, onSortChange, onCellAction, density = "normal", showHeader = true, emptyState, labels: customLabels, className }, ref) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$2), customLabels);
+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 rowHeight = ROW_HEIGHT[density];
 	const scrollRef = (0, react.useRef)(null);
 	const [scrollTop, setScrollTop] = (0, react.useState)(0);
@@ -3242,13 +3244,14 @@ function LogTableInner({ rows, columns, getRowId, selectedId = null, onSelect, o
 		lastVisible
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("@container/log flex min-h-0 flex-col", className),
-		"data-opt-id": "NJ4N9",
+		className: require_highlight.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, {
 			columns,
 			sort,
 			onSortChange,
+			onColumnMove,
 			density,
 			labels
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3277,19 +3280,20 @@ function LogTableInner({ rows, columns, getRowId, selectedId = null, onSelect, o
 							isNew: (_isNew = isNew === null || isNew === void 0 ? void 0 : isNew(row)) !== null && _isNew !== void 0 ? _isNew : false,
 							onSelect,
 							onCellAction,
+							highlightTerms,
 							labels
 						}, id);
 					})
 				}),
 				loadingMore && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "gap-element text-text-tertiary flex items-center justify-center py-3 text-xs",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Spinner, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Spinner, {
 						size: "sm",
 						"aria-hidden": true
 					}), labels.loadingMore]
 				}),
 				!hasMore && rows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: require_pagination.cn("text-text-tertiary", "py-3 text-center text-xs"),
+					className: require_highlight.cn("text-text-tertiary", "py-3 text-center text-xs"),
 					children: labels.endOfResults
 				})
 			]
@@ -3303,15 +3307,16 @@ function LogTableInner({ rows, columns, getRowId, selectedId = null, onSelect, o
 * widens it to its constraint and takes the column callbacks' types with it.
 */
 const LogTable = (0, react.forwardRef)(LogTableInner);
-function LogTableHeader({ columns, sort, onSortChange, density, labels }) {
+function LogTableHeader({ columns, sort, onSortChange, onColumnMove, density, labels }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "row",
-		className: require_pagination.cn("border-border-subtle text-text-tertiary flex shrink-0 items-center gap-3 border-b px-3", DENSITY_TEXT[density]),
+		className: require_highlight.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) => {
+		children: columns.map((column, index) => {
 			var _column$priority;
 			const active = (sort === null || sort === void 0 ? void 0 : sort.columnId) === column.id;
 			const sortable = column.sortable && onSortChange;
+			const columnLabel = typeof column.header === "string" ? column.header : column.id;
 			const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 				column.marker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"aria-hidden": true,
@@ -3329,12 +3334,12 @@ function LogTableHeader({ columns, sort, onSortChange, density, labels }) {
 					"aria-hidden": true
 				}))
 			] });
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				role: "columnheader",
 				"aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
-				className: require_pagination.cn("flex items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority = column.priority) !== null && _column$priority !== void 0 ? _column$priority : "always"]),
+				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"]),
 				style: columnStyle(column),
-				children: sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				children: [sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					className: "hover:text-text-primary flex cursor-pointer items-center gap-1.5 truncate",
 					title: active && sort.direction === "desc" ? labels.sortAscending : labels.sortDescending,
@@ -3343,12 +3348,35 @@ function LogTableHeader({ columns, sort, onSortChange, density, labels }) {
 						direction: active && sort.direction === "desc" ? "asc" : "desc"
 					}),
 					children: content
-				}) : 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"),
+					children: [index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "hover:text-text-primary cursor-pointer",
+						"aria-label": labels.moveLeft(columnLabel),
+						title: labels.moveLeft(columnLabel),
+						onClick: () => onColumnMove(column.id, "left"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+							className: "size-3",
+							"aria-hidden": true
+						})
+					}), index < columns.length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "hover:text-text-primary cursor-pointer",
+						"aria-label": labels.moveRight(columnLabel),
+						title: labels.moveRight(columnLabel),
+						onClick: () => onColumnMove(column.id, "right"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+							className: "size-3",
+							"aria-hidden": true
+						})
+					})]
+				})]
 			}, column.id);
 		})
 	});
 }
-function LogTableRowImpl({ id, row, columns, top, height, density, selected, isNew, onSelect, onCellAction, labels }) {
+function LogTableRowImpl({ id, row, columns, top, height, density, selected, isNew, onSelect, onCellAction, highlightTerms, labels }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "option",
 		"aria-selected": selected,
@@ -3365,13 +3393,13 @@ function LogTableRowImpl({ id, row, columns, top, height, density, selected, isN
 			top,
 			height
 		},
-		className: require_pagination.cn("border-border-subtle/60 absolute inset-x-0 flex items-center gap-3 border-b px-3", DENSITY_TEXT[density], onSelect && "cursor-pointer", "transition-colors duration-100", "hover:bg-surface-hover", selected && "bg-accent-subtle hover:bg-accent-subtle", isNew && !selected && "opt-log-row-enter"),
+		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"),
 		children: columns.map((column) => {
 			var _column$priority2;
 			const raw = column.value(row);
 			const text = raw === null || raw === void 0 || raw === "" ? "" : String(raw);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_pagination.cn("group/cell relative flex min-w-0 items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority2 = column.priority) !== null && _column$priority2 !== void 0 ? _column$priority2 : "always"]),
+				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"]),
 				style: columnStyle(column),
 				children: [
 					column.marker && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -3380,9 +3408,12 @@ 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_pagination.cn("truncate", column.mono && "font-mono", text ? "text-text-secondary" : ABSENT),
+						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 || EM_DASH
+						children: column.render ? column.render(row) : text ? highlightTerms && highlightTerms.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Highlight, {
+							text,
+							search: highlightTerms
+						}) : text : EM_DASH
 					}),
 					onCellAction && column.field && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellActions, {
 						field: column.field,
@@ -3411,7 +3442,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_pagination.cn("bg-surface/90 ml-auto hidden shrink-0 items-center gap-0.5 rounded pl-1", "group-hover/cell:flex focus-within:flex"),
+		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"),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			className: button,
@@ -3792,7 +3823,7 @@ const MAX_SUGGESTIONS = 8;
 * ```
 */
 function QueryBar({ value, onChange, fields = [], showClauses = false, live = false, disabled = false, className, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$1), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._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);
@@ -3850,12 +3881,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_pagination.cn("relative flex min-w-0 flex-col gap-1.5", className),
+		className: require_highlight.cn("relative flex min-w-0 flex-col gap-1.5", className),
 		"data-opt-id": "JSVZ1",
 		"data-opt-slug": "query-bar.QueryBar",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_pagination.cn("bg-surface flex h-9 items-center gap-2 rounded-md border px-2.5", require_pagination.OPT_BORDER, "focus-within:border-accent transition-colors", disabled && "opacity-60"),
+				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"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
 						className: "text-text-tertiary size-4 shrink-0",
@@ -3871,7 +3902,7 @@ function QueryBar({ value, onChange, fields = [], showClauses = false, live = fa
 						"aria-label": labels.ariaLabel,
 						placeholder: labels.placeholder,
 						disabled,
-						className: require_pagination.cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent font-mono text-sm outline-none focus-visible:outline-none"),
+						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"),
 						value: text,
 						onChange: (event) => {
 							setText(event.target.value);
@@ -3889,7 +3920,7 @@ function QueryBar({ value, onChange, fields = [], showClauses = false, live = fa
 						type: "button",
 						"aria-label": labels.clear,
 						title: labels.clear,
-						className: require_pagination.cn("text-text-tertiary hover:text-text-primary cursor-pointer rounded-sm p-0.5", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+						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"),
 						onClick: () => {
 							setText("");
 							commit("");
@@ -3904,12 +3935,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_pagination.cn("bg-surface-overlay absolute top-10 z-40 max-h-64 w-full overflow-y-auto rounded-md border p-1 shadow-lg", "border border-border"),
+				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"),
 				children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
 					role: "option",
 					"aria-selected": index === highlighted,
-					className: require_pagination.cn("flex w-full cursor-pointer items-center justify-between gap-3 rounded px-2 py-1 text-left text-sm", index === highlighted ? "bg-bg-subtle" : "hover:bg-bg-subtle"),
+					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"),
 					onMouseEnter: () => setHighlighted(index),
 					onMouseDown: (event) => event.preventDefault(),
 					onClick: () => applySuggestion(suggestion),
@@ -3927,7 +3958,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_pagination.cn("bg-bg-subtle text-text-secondary flex items-center gap-1 rounded px-1.5 py-0.5 text-xs", clause.negated && "text-danger-fg"),
+						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"),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "truncate",
 							children: label
@@ -4052,7 +4083,7 @@ const defaultLabels = {
 * ```
 */
 function FieldSidebar({ fields, expandedField = null, onExpandedFieldChange, values, valuesLoading = false, sampledRows, onToggleColumn, onFilter, header, className, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels), customLabels);
 	const [search, setSearch] = (0, react.useState)("");
 	const groups = (0, react.useMemo)(() => {
 		const needle = search.trim().toLowerCase();
@@ -4069,14 +4100,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_pagination.cn("flex min-h-0 flex-col", className),
+		className: require_highlight.cn("flex min-h-0 flex-col", className),
 		"aria-label": labels.heading,
 		"data-opt-id": "17D4Y",
 		"data-opt-slug": "field-sidebar.FieldSidebar",
 		children: [
 			header,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_pagination.cn("flex items-center gap-2 border-b px-3 py-2", "focus-within:border-accent transition-colors", require_pagination.OPT_BORDER),
+				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),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
 					className: "text-text-tertiary size-3.5 shrink-0",
 					"aria-hidden": true
@@ -4084,7 +4115,7 @@ function FieldSidebar({ fields, expandedField = null, onExpandedFieldChange, val
 					type: "search",
 					"aria-label": labels.searchLabel,
 					placeholder: labels.searchPlaceholder,
-					className: require_pagination.cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent text-sm outline-none focus-visible:outline-none"),
+					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"),
 					value: search,
 					onChange: (event) => setSearch(event.target.value)
 				})]
@@ -4092,10 +4123,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_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "px-3 py-4 text-xs"),
+					className: require_highlight.cn(require_highlight.OPT_TEXT_TERTIARY, "px-3 py-4 text-xs"),
 					children: labels.empty
 				}) : groups.map(([group, groupFields]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [group && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-					className: require_pagination.cn("text-text-tertiary", "px-3 pt-3 pb-1 text-[11px] font-medium tracking-wide uppercase"),
+					className: require_highlight.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,
@@ -4118,7 +4149,7 @@ function FieldSidebar({ fields, expandedField = null, onExpandedFieldChange, val
 }
 FieldSidebar.displayName = "FieldSidebar";
 function FieldRow({ field, expanded, onToggleExpanded, onToggleColumn, labels, children }) {
-	var _field$columnable, _field$inTable;
+	var _field$columnable, _field$type, _field$inTable;
 	const columnable = (_field$columnable = field.columnable) !== null && _field$columnable !== void 0 ? _field$columnable : true;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "hover:bg-bg-subtle group/field flex items-center gap-1.5 px-3 py-1",
@@ -4127,8 +4158,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.type && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: require_pagination.cn("text-text-tertiary", "w-8 shrink-0 truncate font-mono text-[10px] uppercase"),
+			children: [field.dataType ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.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"),
 				children: field.type
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-text-primary truncate font-mono text-xs",
@@ -4136,7 +4171,7 @@ function FieldRow({ field, expanded, onToggleExpanded, onToggleColumn, labels, c
 			})]
 		}), onToggleColumn && columnable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
-			className: require_pagination.cn("cursor-pointer rounded-sm p-0.5", field.inTable ? "text-accent" : "text-text-tertiary hover:text-text-primary opacity-0 group-hover/field:opacity-100 focus-visible:opacity-100"),
+			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"),
 			"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,
@@ -4159,21 +4194,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_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "flex items-center gap-2 px-3 pb-2 text-xs"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Spinner, {
+		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, {
 			size: "sm",
 			"aria-hidden": true
 		}), labels.loadingValues]
 	});
 	if (!values || values.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: require_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "px-3 pb-2 text-xs"),
+		className: require_highlight.cn(require_highlight.OPT_TEXT_TERTIARY, "px-3 pb-2 text-xs"),
 		children: labels.noValues
 	});
 	const denominator = sampledRows !== null && sampledRows !== void 0 ? sampledRows : total;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col gap-1 px-3 pt-1 pb-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-			className: require_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "text-[11px]"),
+			className: require_highlight.cn(require_highlight.OPT_TEXT_TERTIARY, "text-[11px]"),
 			children: [labels.topValues(values.length), sampledRows ? ` · ${sampledRows.toLocaleString()}` : ""]
 		}), values.map((entry) => {
 			var _entry$share;
@@ -4189,11 +4224,11 @@ function FieldValues({ values, loading, total, sampledRows, onFilter, labels })
 							children: entry.value || "—"
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: require_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "shrink-0 text-[11px] tabular-nums"),
+							className: require_highlight.cn(require_highlight.OPT_TEXT_TERTIARY, "shrink-0 text-[11px] tabular-nums"),
 							children: [Math.round(share * 100), "%"]
 						}),
 						onFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "hidden shrink-0 items-center gap-0.5 group-hover/value:flex focus-within:flex",
+							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"),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								className: "text-text-tertiary hover:text-text-primary cursor-pointer",