@reopt-ai/opt-ui 1.8.0 → 1.9.0

package/dist/index.cjs

@@ -1,11 +1,11 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_pagination = require("./pagination-DjfxBcjX.cjs");
-const require_shader_surface = require("./shader-surface-Fav5K9UC.cjs");
-const require_field_sidebar = require("./field-sidebar-Bqfp6dgg.cjs");
+const require_highlight = require("./highlight-CGcrYGMC.cjs");
+const require_key_pad_menu = require("./key-pad-menu-DoGskWbp.cjs");
+const require_field_sidebar = require("./field-sidebar-mFHemxBz.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 lucide_react = require("lucide-react");
 let _reopt_ai_opt_palette = require("@reopt-ai/opt-palette");
 let _reopt_ai_opt_charts = require("@reopt-ai/opt-charts");
@@ -45,7 +45,7 @@ var ErrorBoundary = class extends react.Component {
 			const { fallback } = this.props;
 			if (typeof fallback === "function") return fallback(this.state.error);
 			if (fallback !== void 0) return fallback;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Alert, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Alert, {
 				variant: "error",
 				children: this.state.error.message || "Something went wrong"
 			});
@@ -64,20 +64,20 @@ ErrorBoundary.displayName = "ErrorBoundary";
 function PageAside({ header, children, footer, widthClassName = "w-60", label, hideOnMobile = true, className, headerClassName, bodyClassName, footerClassName }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
 		"aria-label": label,
-		className: require_pagination.cn("bg-surface sticky top-[var(--global-header-height)] h-[calc(100vh-var(--global-header-height))] shrink-0 flex-col", widthClassName, hideOnMobile ? "hidden md:flex" : "flex", className),
+		className: require_highlight.cn("bg-surface sticky top-[var(--global-header-height)] h-[calc(100vh-var(--global-header-height))] shrink-0 flex-col", widthClassName, hideOnMobile ? "hidden md:flex" : "flex", className),
 		"data-opt-id": "ZQDMX",
 		"data-opt-slug": "page-aside.PageAside",
 		children: [
 			header ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_pagination.cn("shrink-0", headerClassName !== null && headerClassName !== void 0 ? headerClassName : "px-3 py-3"),
+				className: require_highlight.cn("shrink-0", headerClassName !== null && headerClassName !== void 0 ? headerClassName : "px-3 py-3"),
 				children: header
 			}) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_pagination.cn("flex-1 overflow-y-auto", bodyClassName !== null && bodyClassName !== void 0 ? bodyClassName : "px-3 py-3"),
+				className: require_highlight.cn("flex-1 overflow-y-auto", bodyClassName !== null && bodyClassName !== void 0 ? bodyClassName : "px-3 py-3"),
 				children
 			}),
 			footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_pagination.cn("shrink-0", footerClassName !== null && footerClassName !== void 0 ? footerClassName : "px-4 py-3"),
+				className: require_highlight.cn("shrink-0", footerClassName !== null && footerClassName !== void 0 ? footerClassName : "px-4 py-3"),
 				children: footer
 			}) : null
 		]
@@ -106,9 +106,9 @@ const defaultLabels$31 = {
 };
 /** Renders the task list component. */
 function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage, showSubtasks = false, maxItems, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$31), customLabels), {}, {
-		priority: require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$31.priority), customLabels === null || customLabels === void 0 ? void 0 : customLabels.priority),
-		status: require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$31.status), customLabels === null || customLabels === void 0 ? void 0 : customLabels.status)
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$31), customLabels), {}, {
+		priority: require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$31.priority), customLabels === null || customLabels === void 0 ? void 0 : customLabels.priority),
+		status: require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$31.status), customLabels === null || customLabels === void 0 ? void 0 : customLabels.status)
 	});
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const displayEmptyMessage = emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : labels.emptyMessage;
@@ -117,16 +117,16 @@ function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage,
 	const completedCount = tasks.filter((t) => t.status === "done").length;
 	const progress = tasks.length > 0 ? completedCount / tasks.length * 100 : 0;
 	const priorityBadge = {
-		low: require_pagination.OPT_BADGE_NEUTRAL,
-		medium: require_pagination.OPT_BADGE_BLUE,
-		high: require_pagination.OPT_BADGE_YELLOW,
-		urgent: require_pagination.OPT_BADGE_RED
+		low: require_highlight.OPT_BADGE_NEUTRAL,
+		medium: require_highlight.OPT_BADGE_BLUE,
+		high: require_highlight.OPT_BADGE_YELLOW,
+		urgent: require_highlight.OPT_BADGE_RED
 	};
 	const statusBadge = {
-		todo: require_pagination.OPT_BADGE_NEUTRAL,
-		"in-progress": require_pagination.OPT_BADGE_BLUE,
-		review: require_pagination.OPT_BADGE_YELLOW,
-		done: require_pagination.OPT_BADGE_GREEN
+		todo: require_highlight.OPT_BADGE_NEUTRAL,
+		"in-progress": require_highlight.OPT_BADGE_BLUE,
+		review: require_highlight.OPT_BADGE_YELLOW,
+		done: require_highlight.OPT_BADGE_GREEN
 	};
 	const completedText = labels.completedOf.replace("{completed}", String(completedCount)).replace("{total}", String(tasks.length));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -139,10 +139,10 @@ function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: `text-sm font-semibold ${require_pagination.OPT_TEXT_PRIMARY}`,
+						className: `text-sm font-semibold ${require_highlight.OPT_TEXT_PRIMARY}`,
 						children: displayTitle
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: `text-xs ${require_pagination.OPT_TEXT_TERTIARY}`,
+						className: `text-xs ${require_highlight.OPT_TEXT_TERTIARY}`,
 						children: completedText
 					})]
 				}),
@@ -160,7 +160,7 @@ function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage,
 				}),
 				tasks.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: displayEmptyMessage
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
 					focusLoop: true,
@@ -168,16 +168,16 @@ function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.Composite, {
 						role: "list",
 						"aria-label": displayTitle,
-						className: `rounded-lg ${require_pagination.OPT_BORDER} divide-border-subtle bg-surface divide-y`,
+						className: `rounded-lg ${require_highlight.OPT_BORDER} divide-border-subtle bg-surface divide-y`,
 						children: [displayTasks.map((task) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
 							role: "listitem",
-							className: `group gap-group flex w-full items-start p-3 ${require_pagination.OPT_FOCUS} data-[active-item]:bg-accent-subtle ${onTaskClick ? "cursor-pointer" : ""}`,
+							className: `group gap-group flex w-full items-start p-3 ${require_highlight.OPT_FOCUS} data-[active-item]:bg-accent-subtle ${onTaskClick ? "cursor-pointer" : ""}`,
 							onClick: () => onTaskClick === null || onTaskClick === void 0 ? void 0 : onTaskClick(task),
 							children: [onTaskStatusChange && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "pt-0.5",
 								role: "presentation",
 								onClick: (e) => e.stopPropagation(),
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Checkbox, {
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Checkbox, {
 									checked: task.status === "done",
 									onChange: (checked) => onTaskStatusChange(task, checked),
 									"aria-label": `${task.title} 완료 표시`
@@ -189,7 +189,7 @@ function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage,
 										className: "gap-element flex items-center",
 										children: [
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: `text-sm font-medium ${require_pagination.OPT_TEXT_PRIMARY} ${task.status === "done" ? "line-through opacity-60" : ""}`,
+												className: `text-sm font-medium ${require_highlight.OPT_TEXT_PRIMARY} ${task.status === "done" ? "line-through opacity-60" : ""}`,
 												children: task.title
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -210,7 +210,7 @@ function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage,
 										className: "gap-element mt-2 flex flex-col",
 										children: task.subtasks.map((subtask) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											className: `text-xs text-text-tertiary flex items-center gap-1.5`,
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Checkbox, {
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Checkbox, {
 												checked: subtask.completed,
 												disabled: true,
 												"aria-label": subtask.title,
@@ -226,7 +226,7 @@ function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage,
 										children: [
 											task.assignee && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 												className: "flex items-center gap-1.5",
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.Avatar, {
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.Avatar, {
 													name: task.assignee.name,
 													src: task.assignee.avatar,
 													size: "xs"
@@ -358,7 +358,7 @@ function ActivityFeed({ activities, title, maxItems, onActivityClick, onShowMore
 				children: displayTitle
 			}), activities.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: displayEmptyMessage
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
 				focusLoop: true,
@@ -367,7 +367,7 @@ function ActivityFeed({ activities, title, maxItems, onActivityClick, onShowMore
 					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: [displayActivities.map((activity, index) => {
 						var _activity$variant;
 						const ActivityIcon = activityIcon[activity.type];
@@ -377,13 +377,13 @@ function ActivityFeed({ activities, title, maxItems, onActivityClick, onShowMore
 							render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {}),
 							role: "article",
 							"aria-labelledby": activityId,
-							className: require_pagination.cn("group gap-group relative flex w-full p-3", require_pagination.OPT_FOCUS_VISIBLE, "data-[active-item]:bg-accent-subtle", onActivityClick && "cursor-pointer", !isLast && "border-border-subtle border-b", variantBorder[(_activity$variant = activity.variant) !== null && _activity$variant !== void 0 ? _activity$variant : ""]),
+							className: require_highlight.cn("group gap-group relative flex w-full p-3", require_highlight.OPT_FOCUS_VISIBLE, "data-[active-item]:bg-accent-subtle", onActivityClick && "cursor-pointer", !isLast && "border-border-subtle border-b", variantBorder[(_activity$variant = activity.variant) !== null && _activity$variant !== void 0 ? _activity$variant : ""]),
 							onClick: () => onActivityClick === null || onActivityClick === void 0 ? void 0 : onActivityClick(activity),
 							onKeyDown: (event) => handleActivityKeyDown(event, activity),
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									className: "relative flex flex-col items-center",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.Avatar, {
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.Avatar, {
 										name: activity.actor.name,
 										src: activity.actor.avatar,
 										size: "sm"
@@ -405,7 +405,7 @@ function ActivityFeed({ activities, title, maxItems, onActivityClick, onShowMore
 													"aria-hidden": true
 												}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 													id: activityId,
-													className: `text-sm ${require_pagination.OPT_TEXT_PRIMARY} truncate`,
+													className: `text-sm ${require_highlight.OPT_TEXT_PRIMARY} truncate`,
 													children: [
 														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 															className: "font-medium",
@@ -413,7 +413,7 @@ function ActivityFeed({ activities, title, maxItems, onActivityClick, onShowMore
 														}),
 														" ",
 														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-															className: require_pagination.OPT_TEXT_SECONDARY,
+															className: require_highlight.OPT_TEXT_SECONDARY,
 															children: labels.activityVerbs[activity.type]
 														}),
 														" ",
@@ -467,7 +467,7 @@ const defaultLabels$29 = {
 };
 /** Renders the filter bar component. */
 function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, labels: customLabels, presetActions, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$29), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$29), customLabels);
 	const [searchValues, setSearchValues] = (0, react.useState)({});
 	const [tagInputValues, setTagInputValues] = (0, react.useState)({});
 	const [multiSelectOpen, setMultiSelectOpen] = (0, react.useState)({});
@@ -496,7 +496,7 @@ function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, lab
 		const currentTags = (_ref2 = filter === null || filter === void 0 ? void 0 : filter.value) !== null && _ref2 !== void 0 ? _ref2 : [];
 		if (currentTags.includes(val)) return;
 		onFilterChange === null || onFilterChange === void 0 || onFilterChange(filterId, [...currentTags, val]);
-		setTagInputValues((prev) => require_pagination._objectSpread2(require_pagination._objectSpread2({}, prev), {}, { [filterId]: "" }));
+		setTagInputValues((prev) => require_highlight._objectSpread2(require_highlight._objectSpread2({}, prev), {}, { [filterId]: "" }));
 	}, [
 		filters,
 		tagInputValues,
@@ -520,12 +520,12 @@ function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, lab
 					var _searchValues$filter$;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "relative",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 							placeholder: filter.label || labels.searchPlaceholder,
 							value: (_searchValues$filter$ = searchValues[filter.id]) !== null && _searchValues$filter$ !== void 0 ? _searchValues$filter$ : "",
 							onChange: (e) => {
 								const value = e.target.value;
-								setSearchValues((prev) => require_pagination._objectSpread2(require_pagination._objectSpread2({}, prev), {}, { [filter.id]: value }));
+								setSearchValues((prev) => require_highlight._objectSpread2(require_highlight._objectSpread2({}, prev), {}, { [filter.id]: value }));
 								onFilterChange === null || onFilterChange === void 0 || onFilterChange(filter.id, value);
 							},
 							"aria-label": filter.label || labels.searchPlaceholder,
@@ -539,14 +539,14 @@ function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, lab
 				}
 				if (filter.type === "select" && filter.options) {
 					var _filter$options$find$, _filter$options$find;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectRoot, {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
 						value: filter.value,
 						onValueChange: (value) => onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(filter.id, value),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectTrigger, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectTrigger, {
 							className: "h-9 min-w-[120px] text-sm",
 							"aria-label": filter.label,
 							children: (_filter$options$find$ = (_filter$options$find = filter.options.find((o) => o.value === filter.value)) === null || _filter$options$find === void 0 ? void 0 : _filter$options$find.label) !== null && _filter$options$find$ !== void 0 ? _filter$options$find$ : filter.label
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, { children: filter.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectItem, {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, { children: filter.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectItem, {
 							value: option.value,
 							children: option.label
 						}, option.id)) })]
@@ -557,20 +557,20 @@ function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, lab
 					const selectedValues = (_ref4 = filter.value) !== null && _ref4 !== void 0 ? _ref4 : [];
 					const isOpen = (_multiSelectOpen$filt = multiSelectOpen[filter.id]) !== null && _multiSelectOpen$filt !== void 0 ? _multiSelectOpen$filt : false;
 					const handleOpenChange = (open) => {
-						setMultiSelectOpen((prev) => require_pagination._objectSpread2(require_pagination._objectSpread2({}, prev), {}, { [filter.id]: open }));
+						setMultiSelectOpen((prev) => require_highlight._objectSpread2(require_highlight._objectSpread2({}, prev), {}, { [filter.id]: open }));
 						if (!open) requestAnimationFrame(() => {
 							var _triggerRefs$current$;
 							(_triggerRefs$current$ = triggerRefs.current[filter.id]) === null || _triggerRefs$current$ === void 0 || _triggerRefs$current$.focus();
 						});
 					};
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverRoot, {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverRoot, {
 						open: isOpen,
 						onOpenChange: handleOpenChange,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverTrigger, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverTrigger, {
 							ref: (el) => {
 								triggerRefs.current[filter.id] = el;
 							},
-							className: `gap-element inline-flex h-9 items-center rounded-lg px-3 text-sm ${require_pagination.OPT_BORDER} bg-surface ${require_pagination.OPT_TEXT_PRIMARY} ${require_pagination.OPT_FOCUS} hover:bg-bg-subtle transition-colors`,
+							className: `gap-element inline-flex h-9 items-center rounded-lg px-3 text-sm ${require_highlight.OPT_BORDER} bg-surface ${require_highlight.OPT_TEXT_PRIMARY} ${require_highlight.OPT_FOCUS} hover:bg-bg-subtle transition-colors`,
 							"aria-expanded": isOpen,
 							"aria-label": `${filter.label} 필터 ${selectedValues.length > 0 ? `(${selectedValues.length}개 선택됨)` : ""}`,
 							children: [
@@ -586,15 +586,15 @@ function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, lab
 									children: "▼"
 								})
 							]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.PopoverContent, {
-							className: `z-50 mt-1 min-w-[180px] rounded-lg ${require_pagination.OPT_BORDER} bg-surface p-2 shadow-lg`,
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.PopoverContent, {
+							className: `z-50 mt-1 min-w-[180px] rounded-lg ${require_highlight.OPT_BORDER} bg-surface p-2 shadow-lg`,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "gap-element flex flex-col",
 								children: filter.options.map((option) => {
 									const isChecked = selectedValues.includes(option.value);
 									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										className: `hover:bg-bg-subtle gap-element flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm ${require_pagination.OPT_TEXT_PRIMARY}`,
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Checkbox, {
+										className: `hover:bg-bg-subtle gap-element flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm ${require_highlight.OPT_TEXT_PRIMARY}`,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Checkbox, {
 											checked: isChecked,
 											onChange: () => handleMultiSelectToggle(filter.id, option.value),
 											"aria-label": option.label
@@ -605,7 +605,7 @@ function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, lab
 						})]
 					}, filter.id);
 				}
-				if (filter.type === "date-range") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DateRangePicker, {
+				if (filter.type === "date-range") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DateRangePicker, {
 					"aria-label": filter.label,
 					placeholder: filter.label,
 					onChange: (range) => onDateRangeChange === null || onDateRangeChange === void 0 ? void 0 : onDateRangeChange(filter.id, range),
@@ -640,7 +640,7 @@ function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, lab
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 								type: "text",
 								value: (_tagInputValues$filte2 = tagInputValues[filter.id]) !== null && _tagInputValues$filte2 !== void 0 ? _tagInputValues$filte2 : "",
-								onChange: (e) => setTagInputValues((prev) => require_pagination._objectSpread2(require_pagination._objectSpread2({}, prev), {}, { [filter.id]: e.target.value })),
+								onChange: (e) => setTagInputValues((prev) => require_highlight._objectSpread2(require_highlight._objectSpread2({}, prev), {}, { [filter.id]: e.target.value })),
 								onKeyDown: (e) => {
 									if (e.key === "Enter") {
 										e.preventDefault();
@@ -648,13 +648,13 @@ function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, lab
 									}
 								},
 								placeholder: filter.label,
-								className: `border-border bg-surface placeholder:text-text-tertiary focus-visible:ring-ring h-8 w-24 rounded-md border px-2 text-xs outline-none focus-visible:ring-2 ${require_pagination.OPT_TEXT_PRIMARY}`,
+								className: `border-border bg-surface placeholder:text-text-tertiary focus-visible:ring-ring h-8 w-24 rounded-md border px-2 text-xs outline-none focus-visible:ring-2 ${require_highlight.OPT_TEXT_PRIMARY}`,
 								"aria-label": filter.label
 							})
 						})]
 					}, filter.id);
 				}
-				if (filter.type === "toggle") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.Switch, {
+				if (filter.type === "toggle") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.Switch, {
 					label: filter.label,
 					size: "sm",
 					checked: filter.value === true,
@@ -662,7 +662,7 @@ function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, lab
 				}, filter.id);
 				return null;
 			}),
-			hasActiveFilters && onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+			hasActiveFilters && onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 				onClick: onClearAll,
 				variant: "ghost",
 				className: "text-danger-fg hover:bg-danger-subtle h-9 px-3 text-sm",
@@ -696,7 +696,7 @@ function matchesShortcut(event, shortcut) {
 const defaultLabels$28 = { title: "빠른 작업" };
 /** Renders the quick actions component. */
 function QuickActions({ actions, title, layout = "grid", columns = 3, showDescriptionInGrid = false, bindShortcuts = false, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$28), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$28), customLabels);
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const titleId = (0, react.useId)();
 	(0, react.useEffect)(() => {
@@ -738,12 +738,12 @@ function QuickActions({ actions, title, layout = "grid", columns = 3, showDescri
 						2: "grid-cols-2",
 						3: "grid-cols-3",
 						4: "grid-cols-4"
-					}[columns]}` : `flex flex-col rounded-lg ${require_pagination.OPT_BORDER} divide-border-subtle bg-surface divide-y`,
+					}[columns]}` : `flex flex-col rounded-lg ${require_highlight.OPT_BORDER} divide-border-subtle bg-surface divide-y`,
 					children: actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
 						onClick: action.onClick,
 						disabled: action.disabled,
 						"aria-label": action.icon && typeof action.icon === "string" ? `${action.label}${action.description ? `: ${action.description}` : ""}` : void 0,
-						className: layout === "grid" ? `gap-element flex flex-col items-center rounded-lg p-4 ${require_pagination.OPT_BORDER} bg-surface ${require_pagination.OPT_FOCUS} ${require_pagination.OPT_HOVER_ITEM} cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50` : `gap-group flex w-full items-center p-3 ${require_pagination.OPT_FOCUS} ${require_pagination.OPT_HOVER_ITEM} cursor-pointer first:rounded-t-lg last:rounded-b-lg disabled:cursor-not-allowed disabled:opacity-50`,
+						className: layout === "grid" ? `gap-element flex flex-col items-center rounded-lg p-4 ${require_highlight.OPT_BORDER} bg-surface ${require_highlight.OPT_FOCUS} ${require_highlight.OPT_HOVER_ITEM} cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50` : `gap-group flex w-full items-center p-3 ${require_highlight.OPT_FOCUS} ${require_highlight.OPT_HOVER_ITEM} cursor-pointer first:rounded-t-lg last:rounded-b-lg disabled:cursor-not-allowed disabled:opacity-50`,
 						children: [
 							action.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: layout === "grid" ? "text-2xl" : "bg-bg-subtle flex h-8 w-8 items-center justify-center rounded-lg text-lg",
@@ -753,14 +753,14 @@ function QuickActions({ actions, title, layout = "grid", columns = 3, showDescri
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: layout === "grid" ? "text-center" : "min-w-0 flex-1",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: `text-sm font-medium ${require_pagination.OPT_TEXT_PRIMARY} ${layout === "grid" ? "block" : ""}`,
+									className: `text-sm font-medium ${require_highlight.OPT_TEXT_PRIMARY} ${layout === "grid" ? "block" : ""}`,
 									children: action.label
 								}), action.description && (layout === "list" || showDescriptionInGrid) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 									className: `text-xs text-text-secondary ${layout === "grid" ? "mt-1" : "mt-0.5"}`,
 									children: action.description
 								})]
 							}),
-							action.shortcut && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Kbd, {
+							action.shortcut && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Kbd, {
 								className: layout === "grid" ? "mt-1" : "",
 								children: action.shortcut
 							})
@@ -788,14 +788,14 @@ const defaultLabels$27 = {
 	}
 };
 const statusDot = {
-	online: require_pagination.OPT_DOT_GREEN,
-	away: require_pagination.OPT_DOT_YELLOW,
-	busy: require_pagination.OPT_DOT_RED,
-	offline: require_pagination.OPT_DOT_GRAY
+	online: require_highlight.OPT_DOT_GREEN,
+	away: require_highlight.OPT_DOT_YELLOW,
+	busy: require_highlight.OPT_DOT_RED,
+	offline: require_highlight.OPT_DOT_GRAY
 };
 /** Renders the team member list component. */
 function TeamMemberList({ members, title, layout = "list", maxDisplay, onMemberClick, onShowMore, emptyMessage, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$27), customLabels), {}, { status: require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$27.status), customLabels === null || customLabels === void 0 ? void 0 : customLabels.status) });
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$27), customLabels), {}, { status: require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$27.status), customLabels === null || customLabels === void 0 ? void 0 : customLabels.status) });
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const displayEmptyMessage = emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : labels.emptyMessage;
 	const titleId = (0, react.useId)();
@@ -812,10 +812,10 @@ function TeamMemberList({ members, title, layout = "list", maxDisplay, onMemberC
 			children: [displayTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 				className: `text-sm font-semibold text-text-primary`,
 				children: displayTitle
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.AvatarGroup, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.AvatarGroup, {
 				max: maxDisplay !== null && maxDisplay !== void 0 ? maxDisplay : 5,
 				size: "md",
-				children: members.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.Avatar, {
+				children: members.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.Avatar, {
 					name: m.name,
 					src: m.avatar,
 					size: "md",
@@ -844,10 +844,10 @@ function TeamMemberList({ members, title, layout = "list", maxDisplay, onMemberC
 					children: [displayMembers.map((member) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
 						role: "listitem",
 						onClick: () => onMemberClick === null || onMemberClick === void 0 ? void 0 : onMemberClick(member),
-						className: `gap-element inline-flex items-center rounded-full py-1 pr-3 pl-1 ${require_pagination.OPT_BORDER} bg-surface ${require_pagination.OPT_FOCUS} hover:bg-bg-subtle data-[active-item]:bg-accent-subtle transition-colors`,
+						className: `gap-element inline-flex items-center rounded-full py-1 pr-3 pl-1 ${require_highlight.OPT_BORDER} bg-surface ${require_highlight.OPT_FOCUS} hover:bg-bg-subtle data-[active-item]:bg-accent-subtle transition-colors`,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "relative",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.Avatar, {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.Avatar, {
 								name: member.name,
 								src: member.avatar,
 								size: "xs"
@@ -856,7 +856,7 @@ function TeamMemberList({ members, title, layout = "list", maxDisplay, onMemberC
 								"aria-label": labels.status[member.status]
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: `text-sm ${require_pagination.OPT_TEXT_PRIMARY}`,
+							className: `text-sm ${require_highlight.OPT_TEXT_PRIMARY}`,
 							children: member.name
 						})]
 					}, member.id)), remainingCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
@@ -888,7 +888,7 @@ function TeamMemberList({ members, title, layout = "list", maxDisplay, onMemberC
 				})]
 			}), members.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: displayEmptyMessage
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
 				focusLoop: true,
@@ -897,14 +897,14 @@ function TeamMemberList({ members, title, layout = "list", maxDisplay, onMemberC
 					role: "list",
 					"aria-labelledby": displayTitle ? titleId : void 0,
 					"aria-label": displayTitle ? void 0 : labels.title,
-					className: `rounded-lg ${require_pagination.OPT_BORDER} divide-border-subtle bg-surface divide-y`,
+					className: `rounded-lg ${require_highlight.OPT_BORDER} divide-border-subtle bg-surface divide-y`,
 					children: [displayMembers.map((member) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.CompositeItem, {
 						role: "listitem",
 						onClick: () => onMemberClick === null || onMemberClick === void 0 ? void 0 : onMemberClick(member),
-						className: `group gap-group flex w-full items-center p-3 ${require_pagination.OPT_FOCUS} data-[active-item]:bg-accent-subtle ${onMemberClick ? "cursor-pointer" : ""}`,
+						className: `group gap-group flex w-full items-center p-3 ${require_highlight.OPT_FOCUS} data-[active-item]:bg-accent-subtle ${onMemberClick ? "cursor-pointer" : ""}`,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "relative",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.Avatar, {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.Avatar, {
 								name: member.name,
 								src: member.avatar,
 								size: "md"
@@ -917,14 +917,14 @@ function TeamMemberList({ members, title, layout = "list", maxDisplay, onMemberC
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "gap-element flex items-center",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: `text-sm font-medium ${require_pagination.OPT_TEXT_PRIMARY}`,
+									className: `text-sm font-medium ${require_highlight.OPT_TEXT_PRIMARY}`,
 									children: member.name
 								}), member.status && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 									className: `text-xs text-text-tertiary`,
 									children: ["· ", labels.status[member.status]]
 								})]
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: `text-xs ${require_pagination.OPT_TEXT_SECONDARY}`,
+								className: `text-xs ${require_highlight.OPT_TEXT_SECONDARY}`,
 								children: [
 									member.role && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: member.role }),
 									member.role && member.email && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: " · " }),
@@ -992,7 +992,7 @@ function AuthForm({ defaultMode = "login", mode: controlledMode, onModeChange, s
 		onSubmit: (values) => {
 			setSubmitted(true);
 			setTimeout(() => setSubmitted(false), 3e3);
-			if (onSubmit) onSubmit(require_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._objectSpread2({
+			if (onSubmit) onSubmit(require_highlight._objectSpread2(require_highlight._objectSpread2(require_highlight._objectSpread2({
 				email: values.email,
 				password: values.password
 			}, mode === "signup" ? { confirmPassword: values.confirmPassword } : {}), mode === "login" ? { rememberMe: values.rememberMe } : {}), {}, { mode }));
@@ -1019,59 +1019,59 @@ function AuthForm({ defaultMode = "login", mode: controlledMode, onModeChange, s
 					children: signupTitle
 				})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.FormRoot, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.FormRoot, {
 				store: form,
 				"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : mode === "login" ? "로그인 폼" : "회원가입 폼",
 				children: [
 					/* @__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: "email",
 								children: (_labels$emailLabel = labels.emailLabel) !== null && _labels$emailLabel !== void 0 ? _labels$emailLabel : "이메일"
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormInput, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormInput, {
 								name: "email",
 								type: "email",
 								placeholder: "email@example.com"
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: "email" })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormError, { name: "email" })
 						]
 					}),
 					renderExtraFields === null || renderExtraFields === void 0 ? void 0 : renderExtraFields(mode),
 					/* @__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: "password",
 								children: (_labels$passwordLabel = labels.passwordLabel) !== null && _labels$passwordLabel !== void 0 ? _labels$passwordLabel : "비밀번호"
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormInput, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormInput, {
 								name: "password",
 								type: "password",
 								placeholder: `${minPasswordLength}자 이상 입력하세요`
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: "password" })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormError, { name: "password" })
 						]
 					}),
 					mode === "signup" && /* @__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: "confirmPassword",
 								children: (_labels$confirmPasswo = labels.confirmPasswordLabel) !== null && _labels$confirmPasswo !== void 0 ? _labels$confirmPasswo : "비밀번호 확인"
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormInput, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormInput, {
 								name: "confirmPassword",
 								type: "password",
 								placeholder: "비밀번호를 다시 입력하세요"
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: "confirmPassword" })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormError, { name: "confirmPassword" })
 						]
 					}),
 					mode === "login" && showRememberMe && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 						className: "gap-group flex items-center",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSwitch, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormSwitch, {
 							name: "rememberMe",
 							size: "sm"
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1079,7 +1079,7 @@ function AuthForm({ defaultMode = "login", mode: controlledMode, onModeChange, s
 							children: (_labels$rememberMeLab = labels.rememberMeLabel) !== null && _labels$rememberMeLab !== void 0 ? _labels$rememberMeLab : "로그인 상태 유지"
 						})]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSubmit, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormSubmit, {
 						disabled: form.isSubmitting(),
 						children: mode === "login" ? (_labels$loginButton = labels.loginButton) !== null && _labels$loginButton !== void 0 ? _labels$loginButton : "로그인" : (_labels$signupButton = labels.signupButton) !== null && _labels$signupButton !== void 0 ? _labels$signupButton : "회원가입"
 					})
@@ -1160,7 +1160,7 @@ function DynamicFieldForm({ initialCount = 1, minFields = 1, maxFields, fieldTyp
 		className: "gap-group flex flex-col",
 		"data-opt-id": "8RYG7",
 		"data-opt-slug": "form-dynamic.DynamicFieldForm",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.FormRoot, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.FormRoot, {
 			store: form,
 			"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "동적 필드 폼",
 			children: [
@@ -1171,7 +1171,7 @@ function DynamicFieldForm({ initialCount = 1, minFields = 1, maxFields, fieldTyp
 						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: fieldName,
 									children: formatTemplate(itemLabel, displayIndex + 1)
 								}),
@@ -1179,7 +1179,7 @@ function DynamicFieldForm({ initialCount = 1, minFields = 1, maxFields, fieldTyp
 									className: "gap-element flex",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										className: "flex-1",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormInput, {
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormInput, {
 											name: fieldName,
 											type: fieldType,
 											placeholder: formatTemplate(itemPlaceholder, displayIndex + 1)
@@ -1193,7 +1193,7 @@ function DynamicFieldForm({ initialCount = 1, minFields = 1, maxFields, fieldTyp
 										children: "✕"
 									})]
 								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: fieldName })
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormError, { name: fieldName })
 							]
 						}, field.id);
 					})
@@ -1205,7 +1205,7 @@ function DynamicFieldForm({ initialCount = 1, minFields = 1, maxFields, fieldTyp
 					className: "border-border text-text-secondary hover:border-accent hover:bg-accent-subtle hover:text-accent w-full rounded-lg border border-dashed px-4 py-2.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-30",
 					children: (_labels$addButton = labels.addButton) !== null && _labels$addButton !== void 0 ? _labels$addButton : "+ 항목 추가"
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSubmit, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormSubmit, {
 					disabled: form.isSubmitting(),
 					children: (_labels$submitButton = labels.submitButton) !== null && _labels$submitButton !== void 0 ? _labels$submitButton : "제출"
 				})
@@ -1295,30 +1295,30 @@ function FileUploadForm({ accept = "image/*,.pdf,.doc,.docx", showPreview = true
 		className: "gap-group flex flex-col",
 		"data-opt-id": "4E3MD",
 		"data-opt-slug": "form-upload.FileUploadForm",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.FormRoot, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.FormRoot, {
 			store: form,
 			"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "파일 업로드 폼",
 			children: [
 				/* @__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: "title",
 							children: (_labels$titleLabel = labels.titleLabel) !== null && _labels$titleLabel !== void 0 ? _labels$titleLabel : "제목"
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormInput, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormInput, {
 							name: "title",
 							placeholder: (_labels$titlePlacehol = labels.titlePlaceholder) !== null && _labels$titlePlacehol !== void 0 ? _labels$titlePlacehol : "파일 제목을 입력하세요"
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormError, { name: "title" })
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormError, { name: "title" })
 					]
 				}),
 				showDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "gap-element flex flex-col",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormLabel, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormLabel, {
 						name: "description",
 						children: (_labels$descriptionLa = labels.descriptionLabel) !== null && _labels$descriptionLa !== void 0 ? _labels$descriptionLa : "설명"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormTextarea, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormTextarea, {
 						name: "description",
 						placeholder: (_labels$descriptionPl = labels.descriptionPlaceholder) !== null && _labels$descriptionPl !== void 0 ? _labels$descriptionPl : "파일에 대한 설명을 입력하세요",
 						rows: descriptionRows,
@@ -1382,7 +1382,7 @@ function FileUploadForm({ accept = "image/*,.pdf,.doc,.docx", showPreview = true
 					"aria-label": (_labels$columnMapping = labels.columnMappingLabel) !== null && _labels$columnMapping !== void 0 ? _labels$columnMapping : "Column mapping",
 					children: columnMapping
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSubmit, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormSubmit, {
 					disabled: form.isSubmitting(),
 					children: (_labels$submitButton = labels.submitButton) !== null && _labels$submitButton !== void 0 ? _labels$submitButton : "업로드"
 				})
@@ -1472,17 +1472,17 @@ function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange,
 						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);
 		}
@@ -1490,25 +1490,25 @@ function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange,
 			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"
 					}),
-					/* @__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);
 		}
@@ -1517,25 +1517,25 @@ function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange,
 			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",
@@ -1549,16 +1549,16 @@ function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange,
 		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);
 	};
@@ -1597,7 +1597,7 @@ function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange,
 					]
 				}, label))
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.FormRoot, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.FormRoot, {
 				store: form,
 				"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "다단계 폼",
 				children: [
@@ -1638,7 +1638,7 @@ function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange,
 							onClick: handleBack,
 							className: "border-border text-text-primary hover:bg-bg-subtle rounded-lg border px-4 py-2 text-sm font-medium",
 							children: (_labels$backButton = labels.backButton) !== null && _labels$backButton !== void 0 ? _labels$backButton : "이전"
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FormSubmit, { children: isLastStep ? (_labels$submitButton = labels.submitButton) !== null && _labels$submitButton !== void 0 ? _labels$submitButton : "제출" : (_labels$nextButton = labels.nextButton) !== null && _labels$nextButton !== void 0 ? _labels$nextButton : "다음" })]
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FormSubmit, { children: isLastStep ? (_labels$submitButton = labels.submitButton) !== null && _labels$submitButton !== void 0 ? _labels$submitButton : "제출" : (_labels$nextButton = labels.nextButton) !== null && _labels$nextButton !== void 0 ? _labels$nextButton : "다음" })]
 					})
 				]
 			}),
@@ -1726,10 +1726,10 @@ function getEventIconStyle(color) {
 /** Renders the event icon component. */
 function EventIcon({ icon, color, size = "md", className, labels: customLabels }) {
 	var _iconEntry$label;
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$26), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$26), customLabels);
 	const sizes = SIZE_MAP[size];
 	const resolvedColor = (color === null || color === void 0 ? void 0 : color.trim()) ? color : void 0;
-	const iconEntry = typeof icon === "string" ? require_pagination.getIconRegistryEntry(icon) : void 0;
+	const iconEntry = typeof icon === "string" ? require_highlight.getIconRegistryEntry(icon) : void 0;
 	const iconElement = react.isValidElement(icon) ? icon : null;
 	const ariaLabel = typeof icon === "string" ? `${labels.eventLabelPrefix}: ${(_iconEntry$label = iconEntry === null || iconEntry === void 0 ? void 0 : iconEntry.label) !== null && _iconEntry$label !== void 0 ? _iconEntry$label : icon}` : labels.defaultAriaLabel;
 	let iconContent;
@@ -1738,13 +1738,13 @@ function EventIcon({ icon, color, size = "md", className, labels: customLabels }
 		size: sizes.iconSize
 	});
 	else if (typeof icon === "string") iconContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: require_pagination.cn(sizes.text, "leading-none"),
+		className: require_highlight.cn(sizes.text, "leading-none"),
 		children: icon
 	});
 	else if (iconElement) iconContent = react.cloneElement(iconElement, {
 		"aria-hidden": true,
 		size: sizes.iconSize,
-		className: require_pagination.cn("shrink-0", iconElement.props.className)
+		className: require_highlight.cn("shrink-0", iconElement.props.className)
 	});
 	else iconContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "flex shrink-0 items-center justify-center",
@@ -1753,7 +1753,7 @@ function EventIcon({ icon, color, size = "md", className, labels: customLabels }
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		role: "img",
 		"aria-label": ariaLabel,
-		className: require_pagination.cn("inline-flex shrink-0 items-center justify-center rounded-lg", !resolvedColor && "bg-accent-subtle text-accent", sizes.container, className),
+		className: require_highlight.cn("inline-flex shrink-0 items-center justify-center rounded-lg", !resolvedColor && "bg-accent-subtle text-accent", sizes.container, className),
 		style: getEventIconStyle(resolvedColor),
 		"data-opt-id": "ZNSD9",
 		"data-opt-slug": "event-icon.EventIcon",
@@ -1803,12 +1803,12 @@ function ConnectionIndicator({ status, tone, label, showLabel = true, pulse, cla
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		role: "status",
 		"aria-label": displayLabel || void 0,
-		className: require_pagination.cn("inline-flex min-w-0 items-center gap-1.5", className),
+		className: require_highlight.cn("inline-flex min-w-0 items-center gap-1.5", className),
 		"data-opt-id": "191EC",
 		"data-opt-slug": "connection-indicator.ConnectionIndicator",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "relative flex h-2.5 w-2.5 flex-none",
-			children: [resolvedPulse && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_pagination.cn("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", dotClass) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_pagination.cn("relative inline-flex h-2.5 w-2.5 rounded-full", dotClass) })]
+			children: [resolvedPulse && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_highlight.cn("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", dotClass) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_highlight.cn("relative inline-flex h-2.5 w-2.5 rounded-full", dotClass) })]
 		}), showLabel && displayLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "text-text-secondary truncate text-xs",
 			children: displayLabel
@@ -1825,12 +1825,12 @@ const defaultLabels$25 = {
 };
 /** Renders the floating action bar component. */
 function FloatingActionBar({ actions, selectedCount, onAction, onDismiss, className, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$25), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$25), customLabels);
 	if (actions.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: "toolbar",
 		"aria-label": labels.toolbarAriaLabel,
-		className: require_pagination.cn("fixed bottom-6 left-1/2 z-50 -translate-x-1/2", "gap-element flex items-center rounded-xl px-4 py-2.5", "bg-black/90 shadow-xl", "backdrop-blur-sm", className),
+		className: require_highlight.cn("fixed bottom-6 left-1/2 z-50 -translate-x-1/2", "gap-element flex items-center rounded-xl px-4 py-2.5", "bg-black/90 shadow-xl", "backdrop-blur-sm", className),
 		"data-opt-id": "S390B",
 		"data-opt-slug": "floating-action-bar.FloatingActionBar",
 		children: [
@@ -1840,12 +1840,12 @@ function FloatingActionBar({ actions, selectedCount, onAction, onDismiss, classN
 			}),
 			actions.map((action) => {
 				const variant = action.variant === "danger" ? "danger" : action.variant === "primary" ? "primary" : "ghost";
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Button, {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
 					variant,
 					size: "sm",
 					disabled: action.disabled,
 					onClick: () => onAction(action.id),
-					className: require_pagination.cn(variant === "ghost" && "text-white hover:bg-white/10"),
+					className: require_highlight.cn(variant === "ghost" && "text-white hover:bg-white/10"),
 					children: [action.icon, action.label]
 				}, action.id);
 			}),
@@ -1870,7 +1870,7 @@ const defaultLabels$24 = {
 };
 /** Renders the template picker component. */
 function TemplatePicker({ templates, selected, onSelect, labels: customLabels, showSearch = false, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$24), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$24), customLabels);
 	const [search, setSearch] = react.useState("");
 	const filtered = react.useMemo(() => {
 		if (!showSearch || !search) return templates;
@@ -1895,7 +1895,7 @@ function TemplatePicker({ templates, selected, onSelect, labels: customLabels, s
 		return map;
 	}, [filtered, labels.defaultCategory]);
 	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),
 		role: "listbox",
 		"aria-label": labels.ariaLabel,
 		"data-opt-id": "PVFJP",
@@ -1906,7 +1906,7 @@ function TemplatePicker({ templates, selected, onSelect, labels: customLabels, s
 			onChange: (e) => setSearch(e.target.value),
 			placeholder: labels.searchPlaceholder,
 			"aria-label": labels.searchPlaceholder,
-			className: require_pagination.cn("border-border bg-surface text-text-primary placeholder:text-text-tertiary focus:border-accent w-full rounded-lg border px-3 py-2 text-sm", "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("border-border bg-surface text-text-primary placeholder:text-text-tertiary focus:border-accent w-full rounded-lg border px-3 py-2 text-sm", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset")
 		}), Array.from(grouped).map(([category, items]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 			className: "text-text-tertiary mb-2 text-xs font-semibold tracking-wider uppercase",
 			children: category
@@ -1916,7 +1916,7 @@ function TemplatePicker({ templates, selected, onSelect, labels: customLabels, s
 				role: "option",
 				"aria-selected": selected === t.id,
 				onClick: () => onSelect(t.id),
-				className: require_pagination.cn("flex flex-col items-start gap-1 rounded-lg border p-3 text-left transition-colors", "hover:bg-bg-subtle", selected === t.id ? "border-accent bg-accent-subtle" : "border-border"),
+				className: require_highlight.cn("flex flex-col items-start gap-1 rounded-lg border p-3 text-left transition-colors", "hover:bg-bg-subtle", selected === t.id ? "border-accent bg-accent-subtle" : "border-border"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "gap-element flex w-full items-center",
@@ -1929,7 +1929,7 @@ function TemplatePicker({ templates, selected, onSelect, labels: customLabels, s
 								className: "text-text-primary text-sm font-medium",
 								children: t.name
 							}),
-							t.featured && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Badge, {
+							t.featured && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Badge, {
 								variant: "info",
 								size: "sm",
 								className: "ml-auto",
@@ -1994,7 +1994,7 @@ const syntaxThemeClasses = {
 /** Renders the code snippet viewer component. */
 function CodeSnippetViewer({ code, language = "text", title, showLineNumbers = true, showCopyButton = true, maxHeight = 400, syntaxTheme = "default", className, labels: customLabels }) {
 	var _syntaxThemeClasses$s;
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$23), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$23), customLabels);
 	const [copied, setCopied] = react.useState(false);
 	const lines = code.split("\n");
 	const theme = (_syntaxThemeClasses$s = syntaxThemeClasses[syntaxTheme]) !== null && _syntaxThemeClasses$s !== void 0 ? _syntaxThemeClasses$s : syntaxThemeClasses.default;
@@ -2007,11 +2007,11 @@ function CodeSnippetViewer({ code, language = "text", title, showLineNumbers = t
 		} catch (_unused) {}
 	}, [code]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("border-border overflow-hidden rounded-lg border", theme.root, className),
+		className: require_highlight.cn("border-border overflow-hidden rounded-lg border", theme.root, className),
 		"data-opt-id": "9GDXY",
 		"data-opt-slug": "code-snippet-viewer.CodeSnippetViewer",
 		children: [(title || showCopyButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_pagination.cn("border-border flex items-center justify-between border-b px-3 py-1.5", theme.header),
+			className: require_highlight.cn("border-border flex items-center justify-between border-b px-3 py-1.5", theme.header),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-text-tertiary text-xs font-medium",
 				children: title !== null && title !== void 0 ? title : language
@@ -2022,20 +2022,20 @@ function CodeSnippetViewer({ code, language = "text", title, showLineNumbers = t
 				children: copied ? labels.copied : labels.copy
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_pagination.cn("overflow-auto", require_pagination.OPT_FOCUS_VISIBLE),
+			className: require_highlight.cn("overflow-auto", require_highlight.OPT_FOCUS_VISIBLE),
 			style: { maxHeight },
 			tabIndex: 0,
 			role: "region",
 			"aria-label": regionLabel,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-				className: require_pagination.cn("p-3 font-mono text-sm", theme.pre),
+				className: require_highlight.cn("p-3 font-mono text-sm", theme.pre),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: lines.map((line, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex",
 					children: [showLineNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: require_pagination.cn("min-w-[2.5rem] pr-4 text-right select-none", theme.lineNumber),
+						className: require_highlight.cn("min-w-[2.5rem] pr-4 text-right select-none", theme.lineNumber),
 						children: i + 1
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: require_pagination.cn("whitespace-pre", theme.code),
+						className: require_highlight.cn("whitespace-pre", theme.code),
 						children: line
 					})]
 				}, i)) })
@@ -2052,21 +2052,21 @@ const defaultLabels$22 = {
 };
 /** Renders the property explorer component. */
 function PropertyExplorer({ groups, onSelect, className, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$22), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$22), customLabels);
 	const [search, setSearch] = react.useState("");
 	const filtered = react.useMemo(() => {
 		if (!search) return groups;
 		const q = search.toLowerCase();
-		return groups.map((g) => require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { properties: g.properties.filter((p) => {
+		return groups.map((g) => require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { properties: g.properties.filter((p) => {
 			var _p$description;
 			return p.name.toLowerCase().includes(q) || p.type.toLowerCase().includes(q) || ((_p$description = p.description) === null || _p$description === void 0 ? void 0 : _p$description.toLowerCase().includes(q));
 		}) })).filter((g) => g.properties.length > 0);
 	}, [groups, search]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("gap-element flex flex-col", className),
+		className: require_highlight.cn("gap-element flex flex-col", className),
 		"data-opt-id": "HJF32",
 		"data-opt-slug": "property-explorer.PropertyExplorer",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 			placeholder: labels.searchPlaceholder,
 			value: search,
 			onChange: (e) => setSearch(e.target.value),
@@ -2080,10 +2080,16 @@ function PropertyExplorer({ groups, onSelect, className, labels: customLabels })
 				className: "gap-element flex flex-col",
 				children: group.properties.map((prop) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(prop),
-					className: require_pagination.cn("flex w-full items-center justify-between rounded-md px-2.5 py-1.5 text-left", "hover:bg-bg-subtle transition-colors"),
+					className: require_highlight.cn("flex w-full items-center justify-between rounded-md px-2.5 py-1.5 text-left", "hover:bg-bg-subtle transition-colors"),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "min-w-0",
 						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FieldToken, {
+								type: require_highlight.resolveFieldType(prop.type),
+								size: "xs",
+								title: prop.type,
+								className: "mr-2 align-[-2px]"
+							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "text-text-primary text-sm font-medium",
 								children: prop.name
@@ -2099,7 +2105,7 @@ function PropertyExplorer({ groups, onSelect, className, labels: customLabels })
 						]
 					}), prop.eventCount !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "text-text-tertiary ml-2 shrink-0 text-xs",
-						children: require_shader_surface.formatOptNumber(prop.eventCount)
+						children: require_key_pad_menu.formatOptNumber(prop.eventCount)
 					})]
 				}, prop.name))
 			})] }, group.name)), filtered.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -2119,9 +2125,9 @@ const defaultLabels$21 = {
 };
 /** Renders the query results table component. */
 function QueryResultsTable({ columns, rows, maxHeight = 400, emptyMessage, loading = false, error, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$21), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$21), customLabels);
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("border-danger bg-danger-subtle rounded-lg border p-4", className),
+		className: require_highlight.cn("border-danger bg-danger-subtle rounded-lg border p-4", className),
 		role: "alert",
 		"aria-live": "assertive",
 		"data-opt-id": "PNC1V",
@@ -2132,7 +2138,7 @@ function QueryResultsTable({ columns, rows, maxHeight = 400, emptyMessage, loadi
 		})
 	});
 	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("border-border rounded-lg border p-8 text-center", className),
+		className: require_highlight.cn("border-border rounded-lg border p-8 text-center", className),
 		role: "status",
 		"aria-live": "polite",
 		"aria-busy": "true",
@@ -2147,7 +2153,7 @@ function QueryResultsTable({ columns, rows, maxHeight = 400, emptyMessage, loadi
 		})]
 	});
 	if (rows.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("border-border rounded-lg border p-8 text-center", className),
+		className: require_highlight.cn("border-border rounded-lg border p-8 text-center", className),
 		"data-opt-id": "PNC1V",
 		"data-opt-slug": "query-results-table.QueryResultsTable",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -2156,7 +2162,7 @@ function QueryResultsTable({ columns, rows, maxHeight = 400, emptyMessage, loadi
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("border-border overflow-hidden rounded-lg border", className),
+		className: require_highlight.cn("border-border overflow-hidden rounded-lg border", className),
 		"data-opt-id": "PNC1V",
 		"data-opt-slug": "query-results-table.QueryResultsTable",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2274,16 +2280,16 @@ function AlertBuilder({ value, onChange, metrics = [
 ], labels: customLabels, className }) {
 	const resolvedMetrics = eventOptions ? eventOptions.map((e) => e.id) : metrics;
 	const metricLabelMap = eventOptions ? Object.fromEntries(eventOptions.map((e) => [e.id, e.name])) : null;
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$20), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$20), customLabels);
 	const alertNameId = react.useId();
 	const conditionsId = react.useId();
 	const checkFrequencyId = react.useId();
 	const notificationChannelsId = react.useId();
 	const update = (partial) => {
-		onChange(require_pagination._objectSpread2(require_pagination._objectSpread2({}, value), partial));
+		onChange(require_highlight._objectSpread2(require_highlight._objectSpread2({}, value), partial));
 	};
 	if (resolvedMetrics.length === 0 || channels.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("text-text-secondary text-sm", className),
+		className: require_highlight.cn("text-text-secondary text-sm", className),
 		"data-opt-id": "VTENR",
 		"data-opt-slug": "alert-builder.AlertBuilder",
 		children: labels.emptyMessage
@@ -2296,7 +2302,7 @@ function AlertBuilder({ value, onChange, metrics = [
 		}] });
 	};
 	const updateCondition = (index, partial) => {
-		const next = value.conditions.map((c, i) => i === index ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, c), partial) : c);
+		const next = value.conditions.map((c, i) => i === index ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, c), partial) : c);
 		update({ conditions: next });
 	};
 	const removeCondition = (index) => {
@@ -2307,7 +2313,7 @@ function AlertBuilder({ value, onChange, metrics = [
 		update({ channels: next });
 	};
 	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": "VTENR",
 		"data-opt-slug": "alert-builder.AlertBuilder",
 		children: [
@@ -2315,7 +2321,7 @@ function AlertBuilder({ value, onChange, metrics = [
 				htmlFor: alertNameId,
 				className: "text-text-tertiary mb-1 block text-xs font-medium",
 				children: labels.alertNameLabel
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 				id: alertNameId,
 				value: value.name,
 				onChange: (e) => update({ name: e.target.value }),
@@ -2366,7 +2372,7 @@ function AlertBuilder({ value, onChange, metrics = [
 									children: op.label
 								}, op.value))
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 								type: "number",
 								value: cond.threshold,
 								onChange: (e) => updateCondition(i, { threshold: Number(e.target.value) }),
@@ -2383,7 +2389,7 @@ function AlertBuilder({ value, onChange, metrics = [
 						]
 					}, i))
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 					variant: "ghost",
 					size: "sm",
 					onClick: addCondition,
@@ -2403,7 +2409,7 @@ function AlertBuilder({ value, onChange, metrics = [
 					type: "button",
 					onClick: () => update({ frequency: f.value }),
 					"aria-pressed": value.frequency === f.value,
-					className: require_pagination.cn("focus-visible:ring-accent rounded-md px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none", value.frequency === f.value ? "bg-accent text-accent-fg" : "bg-bg-subtle text-text-secondary hover:bg-bg-muted"),
+					className: require_highlight.cn("focus-visible:ring-accent rounded-md px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none", value.frequency === f.value ? "bg-accent text-accent-fg" : "bg-bg-subtle text-text-secondary hover:bg-bg-muted"),
 					children: f.label
 				}, f.value))
 			})] }),
@@ -2419,7 +2425,7 @@ function AlertBuilder({ value, onChange, metrics = [
 					type: "button",
 					onClick: () => toggleChannel(ch.id),
 					"aria-pressed": value.channels.includes(ch.id),
-					className: require_pagination.cn("focus-visible:ring-accent rounded-md px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none", value.channels.includes(ch.id) ? "bg-accent text-accent-fg" : "bg-bg-subtle text-text-secondary hover:bg-bg-muted"),
+					className: require_highlight.cn("focus-visible:ring-accent rounded-md px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none", value.channels.includes(ch.id) ? "bg-accent text-accent-fg" : "bg-bg-subtle text-text-secondary hover:bg-bg-muted"),
 					children: ch.label
 				}, ch.id))
 			})] })
@@ -2437,7 +2443,7 @@ const defaultLabels$19 = {
 };
 /** Renders the sql editor component. */
 function SqlEditor({ value, onChange, onRun, onRunAndAdvance, placeholder, readOnly = false, height = 200, schema, completionSources, keymap: customKeymap, extensions: customExtensions, ariaLabel, autoFocus = false, showFooter, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$19), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$19), customLabels);
 	const fill = height === "fill";
 	const footerVisible = showFooter !== null && showFooter !== void 0 ? showFooter : Boolean(onRun);
 	const editorRef = react.useRef(null);
@@ -2585,19 +2591,19 @@ function SqlEditor({ value, onChange, onRun, onRunAndAdvance, placeholder, readO
 		};
 	}, [readOnly]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("gap-element flex flex-col", fill && "h-full min-h-0", className),
+		className: require_highlight.cn("gap-element flex flex-col", fill && "h-full min-h-0", className),
 		"data-opt-id": "RSGKV",
 		"data-opt-slug": "sql-editor.SqlEditor",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: editorRef,
-			className: require_pagination.cn("border-border overflow-hidden rounded-lg border", fill && "min-h-0 flex-1"),
+			className: require_highlight.cn("border-border overflow-hidden rounded-lg border", fill && "min-h-0 flex-1"),
 			style: fill ? void 0 : { height }
 		}), footerVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-none items-center justify-between",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-text-tertiary text-xs",
 				children: labels.runHint
-			}), onRun && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+			}), onRun && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 				variant: "primary",
 				size: "sm",
 				onClick: () => onRun(value),
@@ -2624,17 +2630,17 @@ const defaultLabels$18 = {
 };
 /** Renders the event meta editor component. */
 function EventMetaEditor({ value, onChange, icons, className, 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 hasTags = value.tags.length > 0;
 	const nameId = react.useId();
 	const displayNameId = react.useId();
 	const descriptionId = react.useId();
 	const tagsId = react.useId();
 	const update = (partial) => {
-		onChange(require_pagination._objectSpread2(require_pagination._objectSpread2({}, value), partial));
+		onChange(require_highlight._objectSpread2(require_highlight._objectSpread2({}, value), partial));
 	};
 	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": "EZR35",
 		"data-opt-slug": "event-meta-editor.EventMetaEditor",
 		children: [
@@ -2644,7 +2650,7 @@ function EventMetaEditor({ value, onChange, icons, className, labels: customLabe
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "text-text-tertiary mb-1 block text-xs font-medium",
 						children: labels.icon
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.IconPicker, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.IconPicker, {
 						value: value.icon,
 						onChange: (icon) => update({ icon }),
 						icons,
@@ -2653,7 +2659,7 @@ function EventMetaEditor({ value, onChange, icons, className, labels: customLabe
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "text-text-tertiary mb-1 block text-xs font-medium",
 						children: labels.color
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ColorPicker, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ColorPicker, {
 						value: value.color,
 						onChange: (color) => update({ color }),
 						"aria-label": labels.color
@@ -2674,7 +2680,7 @@ function EventMetaEditor({ value, onChange, icons, className, labels: customLabe
 					htmlFor: nameId,
 					className: "text-text-tertiary mb-1 block text-xs font-medium",
 					children: labels.name
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 					id: nameId,
 					value: value.name,
 					onChange: (e) => update({ name: e.target.value }),
@@ -2684,7 +2690,7 @@ function EventMetaEditor({ value, onChange, icons, className, labels: customLabe
 					htmlFor: displayNameId,
 					className: "text-text-tertiary mb-1 block text-xs font-medium",
 					children: labels.displayName
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 					id: displayNameId,
 					value: value.displayName,
 					onChange: (e) => update({ displayName: e.target.value }),
@@ -2695,7 +2701,7 @@ function EventMetaEditor({ value, onChange, icons, className, labels: customLabe
 				htmlFor: descriptionId,
 				className: "text-text-tertiary mb-1 block text-xs font-medium",
 				children: labels.description
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 				id: descriptionId,
 				value: value.description,
 				onChange: (e) => update({ description: e.target.value }),
@@ -2706,7 +2712,7 @@ function EventMetaEditor({ value, onChange, icons, className, labels: customLabe
 					className: "text-text-tertiary mb-1 block text-xs font-medium",
 					children: labels.tags
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TagInput, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.TagInput, {
 					id: tagsId,
 					value: value.tags,
 					onChange: (tags) => update({ tags }),
@@ -2727,17 +2733,17 @@ EventMetaEditor.displayName = "EventMetaEditor";
 const defaultLabels$17 = { emptyMessage: "No widgets to display" };
 /** Renders the widget grid component. */
 function WidgetGrid({ widgets, cols = 12, rowHeight = 80, gap = 16, editable = false, onReorder, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$17), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$17), customLabels);
 	const [dragIdx, setDragIdx] = react.useState(null);
 	const [overIdx, setOverIdx] = react.useState(null);
 	if (widgets.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("text-text-secondary text-sm", className),
+		className: require_highlight.cn("text-text-secondary text-sm", className),
 		"data-opt-id": "QJY9W",
 		"data-opt-slug": "widget-grid.WidgetGrid",
 		children: labels.emptyMessage
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("grid", className),
+		className: require_highlight.cn("grid", className),
 		style: {
 			gridTemplateColumns: `repeat(${cols}, 1fr)`,
 			gap
@@ -2760,7 +2766,7 @@ function WidgetGrid({ widgets, cols = 12, rowHeight = 80, gap = 16, editable = f
 				setDragIdx(null);
 				setOverIdx(null);
 			} : void 0,
-			className: require_pagination.cn("overflow-hidden rounded-lg", editable && "cursor-grab", editable && dragIdx === i && "opacity-50", editable && overIdx === i && dragIdx !== i && "ring-accent ring-2"),
+			className: require_highlight.cn("overflow-hidden rounded-lg", editable && "cursor-grab", editable && dragIdx === i && "opacity-50", editable && overIdx === i && dragIdx !== i && "ring-accent ring-2"),
 			style: {
 				gridColumn: `span ${Math.min(w.w, cols)}`,
 				minHeight: w.h * rowHeight
@@ -2848,7 +2854,7 @@ const STEPS = [
 ];
 /** Renders the report builder component. */
 function ReportBuilder({ chartTypes = DEFAULT_CHART_TYPES, dataSources = [], onSave, onCancel, configForm, styleForm, preview, onChartTypeChange, onDataSourceChange, onStepChange, selectedChartType: controlledChartType, selectedDataSource: controlledDataSource, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$16), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$16), customLabels);
 	const [stepIndex, setStepIndex] = react.useState(0);
 	const [internalChartType, setInternalChartType] = react.useState(null);
 	const [internalDataSource, setInternalDataSource] = react.useState("");
@@ -2904,7 +2910,7 @@ function ReportBuilder({ chartTypes = DEFAULT_CHART_TYPES, dataSources = [], onS
 		});
 	};
 	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": "K9STD",
 		"data-opt-slug": "report-builder.ReportBuilder",
 		children: [
@@ -2917,16 +2923,16 @@ function ReportBuilder({ chartTypes = DEFAULT_CHART_TYPES, dataSources = [], onS
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							"aria-hidden": "true",
-							className: require_pagination.cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-medium", i <= stepIndex ? "bg-accent text-accent-fg" : "bg-bg-subtle text-text-secondary"),
+							className: require_highlight.cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-medium", i <= stepIndex ? "bg-accent text-accent-fg" : "bg-bg-subtle text-text-secondary"),
 							children: i + 1
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: require_pagination.cn("hidden text-sm sm:inline", i <= stepIndex ? "text-text-primary font-medium" : "text-text-secondary"),
+							className: require_highlight.cn("hidden text-sm sm:inline", i <= stepIndex ? "text-text-primary font-medium" : "text-text-secondary"),
 							children: stepLabels[step]
 						}),
 						i < STEPS.length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							"aria-hidden": "true",
-							className: require_pagination.cn("h-px flex-1", i < stepIndex ? "bg-accent" : "bg-border-subtle")
+							className: require_highlight.cn("h-px flex-1", i < stepIndex ? "bg-accent" : "bg-border-subtle")
 						})
 					]
 				}, step))
@@ -2939,7 +2945,7 @@ function ReportBuilder({ chartTypes = DEFAULT_CHART_TYPES, dataSources = [], onS
 						htmlFor: reportNameId,
 						className: "text-text-tertiary text-xs font-medium",
 						children: labels.reportNameLabel
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 						id: reportNameId,
 						value: reportName,
 						onChange: (e) => setReportName(e.target.value),
@@ -2951,7 +2957,7 @@ function ReportBuilder({ chartTypes = DEFAULT_CHART_TYPES, dataSources = [], onS
 						htmlFor: reportDescriptionId,
 						className: "text-text-tertiary text-xs font-medium",
 						children: labels.reportDescriptionLabel
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 						id: reportDescriptionId,
 						value: reportDescription,
 						onChange: (e) => setReportDescription(e.target.value),
@@ -2974,14 +2980,14 @@ function ReportBuilder({ chartTypes = DEFAULT_CHART_TYPES, dataSources = [], onS
 								children: chartTypes.map((ct) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 									type: "button",
 									onClick: () => handleChartTypeSelect(ct.type),
-									className: require_pagination.cn("flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border p-3 text-center transition-colors", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none", chartType === ct.type ? "border-accent bg-accent-subtle" : "border-border hover:bg-bg-subtle"),
+									className: require_highlight.cn("flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border p-3 text-center transition-colors", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none", chartType === ct.type ? "border-accent bg-accent-subtle" : "border-border hover:bg-bg-subtle"),
 									"aria-pressed": chartType === ct.type,
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "text-xl leading-none",
 										"aria-hidden": "true",
 										children: ct.icon
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_pagination.cn("text-xs leading-tight", chartType === ct.type ? "text-accent font-medium" : "text-text-tertiary"),
+										className: require_highlight.cn("text-xs leading-tight", chartType === ct.type ? "text-accent font-medium" : "text-text-tertiary"),
 										children: ct.label
 									})]
 								}, ct.type))
@@ -2996,7 +3002,7 @@ function ReportBuilder({ chartTypes = DEFAULT_CHART_TYPES, dataSources = [], onS
 									id: dataSourceSelectId,
 									value: dataSourceId,
 									onChange: (e) => handleDataSourceChange(e.target.value),
-									className: require_pagination.cn("border-border text-text-primary bg-surface w-full rounded-lg border px-3 py-2 text-sm", "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("border-border text-text-primary bg-surface w-full rounded-lg border px-3 py-2 text-sm", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 										value: "",
 										children: labels.dataSourcePlaceholder
@@ -3035,26 +3041,26 @@ function ReportBuilder({ chartTypes = DEFAULT_CHART_TYPES, dataSources = [], onS
 				className: "flex items-center justify-between",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "gap-element flex",
-					children: stepIndex > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					children: stepIndex > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						variant: "secondary",
 						onClick: goBack,
 						children: labels.backButton
-					}) : onCancel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					}) : onCancel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						variant: "secondary",
 						onClick: onCancel,
 						children: labels.cancelButton
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "gap-element flex",
-					children: [onCancel && stepIndex > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					children: [onCancel && stepIndex > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						variant: "ghost",
 						onClick: onCancel,
 						children: labels.cancelButton
-					}), currentStep === "preview" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					}), currentStep === "preview" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						variant: "primary",
 						onClick: handleSave,
 						children: labels.saveButton
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						variant: "primary",
 						onClick: goNext,
 						disabled: !canGoNext(),
@@ -3093,7 +3099,7 @@ const actionDotColor = {
 };
 function DiffTable({ changes, labels }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("mt-2 overflow-hidden rounded-md", require_pagination.OPT_BORDER),
+		className: require_highlight.cn("mt-2 overflow-hidden rounded-md", require_highlight.OPT_BORDER),
 		role: "table",
 		"aria-label": "Field changes",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3101,18 +3107,18 @@ function DiffTable({ changes, labels }) {
 			role: "row",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: require_pagination.cn("text-xs font-semibold tracking-wider uppercase", require_pagination.OPT_TEXT_TERTIARY),
+					className: require_highlight.cn("text-xs font-semibold tracking-wider uppercase", require_highlight.OPT_TEXT_TERTIARY),
 					role: "columnheader",
 					children: labels.fieldHeader
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: require_pagination.cn("text-xs font-semibold tracking-wider uppercase", require_pagination.OPT_TEXT_TERTIARY),
+					className: require_highlight.cn("text-xs font-semibold tracking-wider uppercase", require_highlight.OPT_TEXT_TERTIARY),
 					role: "columnheader",
 					children: labels.beforeHeader
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "aria-hidden": "true" }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: require_pagination.cn("text-xs font-semibold tracking-wider uppercase", require_pagination.OPT_TEXT_TERTIARY),
+					className: require_highlight.cn("text-xs font-semibold tracking-wider uppercase", require_highlight.OPT_TEXT_TERTIARY),
 					role: "columnheader",
 					children: labels.afterHeader
 				})
@@ -3122,7 +3128,7 @@ function DiffTable({ changes, labels }) {
 			role: "row",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: require_pagination.cn("text-xs font-medium", require_pagination.OPT_TEXT_PRIMARY),
+					className: require_highlight.cn("text-xs font-medium", require_highlight.OPT_TEXT_PRIMARY),
 					role: "cell",
 					children: change.field
 				}),
@@ -3132,7 +3138,7 @@ function DiffTable({ changes, labels }) {
 					children: change.before || "—"
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: require_pagination.cn("text-xs", require_pagination.OPT_TEXT_TERTIARY),
+					className: require_highlight.cn("text-xs", require_highlight.OPT_TEXT_TERTIARY),
 					"aria-hidden": "true",
 					children: labels.diffArrow
 				}),
@@ -3147,7 +3153,7 @@ function DiffTable({ changes, labels }) {
 }
 /** Renders the audit timeline component. */
 function AuditTimeline({ entries, labels: customLabels, className, onEntryClick }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$15), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$15), customLabels);
 	const [expandedIds, setExpandedIds] = react.useState(/* @__PURE__ */ new Set());
 	const toggleExpanded = react.useCallback((id) => {
 		setExpandedIds((prev) => {
@@ -3166,14 +3172,14 @@ function AuditTimeline({ entries, labels: customLabels, className, onEntryClick
 		event.preventDefault();
 		onEntryClick(entry);
 	}, [onEntryClick]);
-	if (entries.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.EmptyState, {
+	if (entries.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.EmptyState, {
 		title: labels.empty,
 		className,
 		"data-opt-id": "XJQ8A",
 		"data-opt-slug": "audit-timeline.AuditTimeline"
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("gap-group flex flex-col", className),
+		className: require_highlight.cn("gap-group flex flex-col", className),
 		"data-opt-id": "XJQ8A",
 		"data-opt-slug": "audit-timeline.AuditTimeline",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3192,50 +3198,50 @@ function AuditTimeline({ entries, labels: customLabels, className, onEntryClick
 					className: "relative pb-4 pl-8 last:pb-0",
 					role: "listitem",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: require_pagination.cn("border-surface absolute top-1.5 left-1 h-[14px] w-[14px] rounded-full border-2", actionDotColor[entry.action]),
+						className: require_highlight.cn("border-surface absolute top-1.5 left-1 h-[14px] w-[14px] rounded-full border-2", actionDotColor[entry.action]),
 						"aria-hidden": "true"
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: require_pagination.cn("rounded-lg p-3", require_pagination.OPT_BORDER, "bg-surface transition-colors", onEntryClick && "hover:bg-bg-subtle cursor-pointer"),
+						className: require_highlight.cn("rounded-lg p-3", require_highlight.OPT_BORDER, "bg-surface transition-colors", onEntryClick && "hover:bg-bg-subtle cursor-pointer"),
 						"aria-labelledby": entryId,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({}, onEntryClick ? {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({}, onEntryClick ? {
 							role: "button",
 							tabIndex: 0,
 							onClick: () => onEntryClick(entry),
 							onKeyDown: (event) => handleEntryKeyDown(event, entry)
 						} : {}), {}, {
-							className: require_pagination.cn(onEntryClick && "rounded-md", onEntryClick && "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(onEntryClick && "rounded-md", onEntryClick && "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "gap-element flex items-center",
 								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Badge, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Badge, {
 										variant: actionBadgeVariant[entry.action],
 										size: "sm",
 										dot: true,
 										children: actionLabel(entry.action)
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_pagination.cn("text-xs", require_pagination.OPT_TEXT_TERTIARY),
+										className: require_highlight.cn("text-xs", require_highlight.OPT_TEXT_TERTIARY),
 										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
 											dateTime: entry.timestamp,
 											children: entry.timestamp
 										})
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_pagination.cn("ml-auto text-xs font-medium", require_pagination.OPT_TEXT_SECONDARY),
+										className: require_highlight.cn("ml-auto text-xs font-medium", require_highlight.OPT_TEXT_SECONDARY),
 										children: entry.actor
 									})
 								]
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								id: entryId,
-								className: require_pagination.cn("mt-1.5 text-sm", require_pagination.OPT_TEXT_PRIMARY),
+								className: require_highlight.cn("mt-1.5 text-sm", require_highlight.OPT_TEXT_PRIMARY),
 								children: entry.summary
 							})]
 						})), hasChanges && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "mt-2",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Button, {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
 								variant: "ghost",
 								size: "sm",
-								className: require_pagination.cn("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("outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
 								onClick: (e) => {
 									e.stopPropagation();
 									toggleExpanded(entry.id);
@@ -3243,7 +3249,7 @@ function AuditTimeline({ entries, labels: customLabels, className, onEntryClick
 								"aria-expanded": isExpanded,
 								"aria-controls": contentId,
 								children: [isExpanded ? labels.collapse : labels.expand, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-									className: require_pagination.cn("ml-1 h-3.5 w-3.5 transition-transform", isExpanded && "rotate-180"),
+									className: require_highlight.cn("ml-1 h-3.5 w-3.5 transition-transform", isExpanded && "rotate-180"),
 									viewBox: "0 0 16 16",
 									fill: "none",
 									stroke: "currentColor",
@@ -3391,7 +3397,7 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 	"New Users",
 	"Power Users"
 ], className, 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 builderId = react.useId().replace(/:/g, "");
 	const nextIdRef = react.useRef(1);
 	const createId = react.useCallback(() => {
@@ -3419,10 +3425,10 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 		onChange(groups.filter((g) => g.id !== groupId));
 	};
 	const updateGroup = (groupId, partial) => {
-		onChange(groups.map((g) => g.id === groupId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), partial) : g));
+		onChange(groups.map((g) => g.id === groupId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), partial) : g));
 	};
 	const addCondition = (groupId) => {
-		onChange(groups.map((g) => g.id === groupId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { conditions: [...g.conditions, {
+		onChange(groups.map((g) => g.id === groupId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { conditions: [...g.conditions, {
 			id: createId(),
 			type: "event",
 			field: eventOptions[0],
@@ -3431,10 +3437,10 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 		}] }) : g));
 	};
 	const updateCondition = (groupId, condId, partial) => {
-		onChange(groups.map((g) => g.id === groupId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { conditions: g.conditions.map((c) => c.id === condId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, c), partial) : c) }) : g));
+		onChange(groups.map((g) => g.id === groupId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { conditions: g.conditions.map((c) => c.id === condId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, c), partial) : c) }) : g));
 	};
 	const removeCondition = (groupId, condId) => {
-		onChange(groups.map((g) => g.id === groupId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { conditions: g.conditions.filter((c) => c.id !== condId) }) : g));
+		onChange(groups.map((g) => g.id === groupId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { conditions: g.conditions.filter((c) => c.id !== condId) }) : g));
 	};
 	const getFieldOptions = (type) => {
 		switch (type) {
@@ -3445,7 +3451,7 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 		}
 	};
 	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": "ZSC94",
 		"data-opt-slug": "segment-builder.SegmentBuilder",
 		children: [groups.map((group, gi) => {
@@ -3551,7 +3557,7 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 										value: f,
 										children: f
 									}, f))
-								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 									value: cond.field,
 									onChange: (e) => updateCondition(group.id, cond.id, { field: e.target.value }),
 									placeholder: "Expression",
@@ -3568,7 +3574,7 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 										children: op.label
 									}, op.value))
 								}),
-								needsValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+								needsValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 									value: cond.value,
 									onChange: (e) => updateCondition(group.id, cond.id, { value: e.target.value }),
 									placeholder: "Value",
@@ -3585,7 +3591,7 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 							]
 						}, cond.id);
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						variant: "ghost",
 						size: "sm",
 						onClick: () => addCondition(group.id),
@@ -3593,7 +3599,7 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 					})
 				]
 			})] }, group.id);
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 			variant: "ghost",
 			size: "sm",
 			onClick: addGroup,
@@ -3635,14 +3641,14 @@ const severityConfig = {
 /** Renders the insights panel component. */
 function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle, detectionConfig, onDetectionConfigChange, onDismiss, onInsightClick, onStatClick, header, actions, labels: customLabels, className }) {
 	var _detectionConfig$days, _detectionConfig$zSco;
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$13), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$13), customLabels);
 	const [showDismissed, setShowDismissed] = react.useState(false);
 	const visibleInsights = showDismissed ? insights : insights.filter((i) => !i.dismissed);
 	const hasStats = stats && stats.length > 0;
 	const hasDetection = detectionTypes && detectionTypes.length > 0 || detectionConfig != null;
 	const isEmpty = visibleInsights.length === 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": "HCYZV",
 		"data-opt-slug": "insights-panel.InsightsPanel",
 		children: [
@@ -3657,7 +3663,7 @@ function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
 					className: "text-text-primary text-lg font-semibold",
 					children: labels.title
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 					variant: "ghost",
 					size: "sm",
 					onClick: () => setShowDismissed((v) => !v),
@@ -3665,10 +3671,10 @@ function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle,
 				})]
 			}),
 			hasDetection && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_pagination.cn("rounded-lg border p-3", "rounded-lg bg-surface shadow-sm", "border border-border"),
+				className: require_highlight.cn("rounded-lg border p-3", "rounded-lg bg-surface shadow-sm", "border border-border"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: require_pagination.cn("mb-2 text-xs font-medium", "text-text-secondary"),
+						className: require_highlight.cn("mb-2 text-xs font-medium", "text-text-secondary"),
 						children: labels.detectionTitle
 					}),
 					detectionTypes && detectionTypes.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3676,7 +3682,7 @@ function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle,
 						children: detectionTypes.map((dt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							onClick: () => onDetectionTypeToggle === null || onDetectionTypeToggle === void 0 ? void 0 : onDetectionTypeToggle(dt.id, !dt.enabled),
-							className: require_pagination.cn("focus-visible:ring-accent rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none", dt.enabled ? "bg-accent text-accent-fg" : "bg-bg-subtle text-text-secondary"),
+							className: require_highlight.cn("focus-visible:ring-accent rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none", dt.enabled ? "bg-accent text-accent-fg" : "bg-bg-subtle text-text-secondary"),
 							children: dt.label
 						}, dt.id))
 					}),
@@ -3692,8 +3698,8 @@ function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle,
 								min: 1,
 								max: 365,
 								value: (_detectionConfig$days = detectionConfig.days) !== null && _detectionConfig$days !== void 0 ? _detectionConfig$days : 30,
-								onChange: (e) => onDetectionConfigChange(require_pagination._objectSpread2(require_pagination._objectSpread2({}, detectionConfig), {}, { days: Number(e.target.value) || 30 })),
-								className: require_pagination.cn("w-16 rounded-md border px-2 py-1 text-xs", "border border-border", "text-text-primary", "bg-transparent")
+								onChange: (e) => onDetectionConfigChange(require_highlight._objectSpread2(require_highlight._objectSpread2({}, detectionConfig), {}, { days: Number(e.target.value) || 30 })),
+								className: require_highlight.cn("w-16 rounded-md border px-2 py-1 text-xs", "border border-border", "text-text-primary", "bg-transparent")
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 							className: "flex items-center gap-1.5 text-xs",
@@ -3706,8 +3712,8 @@ function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle,
 								max: 10,
 								step: .1,
 								value: (_detectionConfig$zSco = detectionConfig.zScoreThreshold) !== null && _detectionConfig$zSco !== void 0 ? _detectionConfig$zSco : 2,
-								onChange: (e) => onDetectionConfigChange(require_pagination._objectSpread2(require_pagination._objectSpread2({}, detectionConfig), {}, { zScoreThreshold: Number(e.target.value) || 2 })),
-								className: require_pagination.cn("w-16 rounded-md border px-2 py-1 text-xs", "border border-border", "text-text-primary", "bg-transparent")
+								onChange: (e) => onDetectionConfigChange(require_highlight._objectSpread2(require_highlight._objectSpread2({}, detectionConfig), {}, { zScoreThreshold: Number(e.target.value) || 2 })),
+								className: require_highlight.cn("w-16 rounded-md border px-2 py-1 text-xs", "border border-border", "text-text-primary", "bg-transparent")
 							})]
 						})]
 					})
@@ -3718,12 +3724,12 @@ function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle,
 				children: stats.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
 					onClick: () => onStatClick === null || onStatClick === void 0 ? void 0 : onStatClick(s.id),
-					className: require_pagination.cn("rounded-lg bg-surface shadow-sm", "border border-border", "hover:bg-bg-subtle flex flex-col items-center gap-1 rounded-lg p-3 text-center transition-colors", onStatClick && "cursor-pointer"),
+					className: require_highlight.cn("rounded-lg bg-surface shadow-sm", "border border-border", "hover:bg-bg-subtle flex flex-col items-center gap-1 rounded-lg p-3 text-center transition-colors", onStatClick && "cursor-pointer"),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: require_pagination.cn("text-2xl font-bold", "text-text-primary"),
+						className: require_highlight.cn("text-2xl font-bold", "text-text-primary"),
 						children: s.count
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: require_pagination.cn("text-xs", "text-text-secondary"),
+						className: require_highlight.cn("text-xs", "text-text-secondary"),
 						children: s.label
 					})]
 				}, s.id))
@@ -3742,7 +3748,7 @@ function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle,
 				className: "gap-element flex flex-col",
 				children: visibleInsights.map((insight) => {
 					const config = severityConfig[insight.severity];
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(onInsightClick ? "button" : "div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("w-full rounded-lg border p-4 text-left", config.bg, insight.dismissed && "opacity-50", onInsightClick && "cursor-pointer") }, onInsightClick ? {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(onInsightClick ? "button" : "div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("w-full rounded-lg border p-4 text-left", config.bg, insight.dismissed && "opacity-50", onInsightClick && "cursor-pointer") }, onInsightClick ? {
 						type: "button",
 						onClick: () => onInsightClick(insight)
 					} : {}), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3750,7 +3756,7 @@ function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "gap-group flex items-start",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: require_pagination.cn("mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold", config.color, "bg-surface/60"),
+								className: require_highlight.cn("mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold", config.color, "bg-surface/60"),
 								"aria-hidden": "true",
 								children: config.icon
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3760,10 +3766,10 @@ function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle,
 										className: "gap-element flex items-center",
 										children: [
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: require_pagination.cn("text-sm font-medium", require_pagination.OPT_TEXT_PRIMARY),
+												className: require_highlight.cn("text-sm font-medium", require_highlight.OPT_TEXT_PRIMARY),
 												children: insight.title
 											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Badge, {
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Badge, {
 												variant: insight.severity === "critical" ? "error" : insight.severity,
 												size: "sm",
 												children: insight.severity
@@ -3775,7 +3781,7 @@ function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle,
 										]
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-										className: require_pagination.cn("mt-0.5 text-sm", require_pagination.OPT_TEXT_SECONDARY),
+										className: require_highlight.cn("mt-0.5 text-sm", require_highlight.OPT_TEXT_SECONDARY),
 										children: insight.description
 									}),
 									insight.metrics && Object.keys(insight.metrics).length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3794,7 +3800,7 @@ function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle,
 									})
 								]
 							})]
-						}), onDismiss && !insight.dismissed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+						}), onDismiss && !insight.dismissed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 							variant: "ghost",
 							size: "sm",
 							onClick: (e) => {
@@ -3863,7 +3869,7 @@ function TimeRangeSelector({ value, onChange, presets = DEFAULT_PRESETS$1, label
 	})), [presets]);
 	if (presets.length === 0) {
 		var _labels$placeholder;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DateRangePicker, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DateRangePicker, {
 			value: range,
 			onChange: setRange,
 			placeholder: (_labels$placeholder = labels === null || labels === void 0 ? void 0 : labels.placeholder) !== null && _labels$placeholder !== void 0 ? _labels$placeholder : "Select time range",
@@ -3874,18 +3880,18 @@ function TimeRangeSelector({ value, onChange, presets = DEFAULT_PRESETS$1, label
 		});
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("border-border bg-surface inline-flex items-center rounded-lg border", className),
+		className: require_highlight.cn("border-border bg-surface inline-flex items-center rounded-lg border", className),
 		"data-opt-id": "K0D7C",
 		"data-opt-slug": "time-range-selector.TimeRangeSelector",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "hidden items-center sm:flex",
-			children: presets.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+			children: presets.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 				variant: "ghost",
 				size: "md",
 				onClick: () => handlePreset(p.days),
 				children: p.label
 			}, p.label))
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DateRangePicker, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DateRangePicker, {
 			value: range,
 			onChange: setRange,
 			presets: datePickerPresets,
@@ -3925,7 +3931,7 @@ function download(content, fileName, mime) {
 function ExportButton({ data, columns, fileName = "export", formats = ["csv", "json"], onExport, labels: customLabels, guided = false, className }) {
 	const [guidedOpen, setGuidedOpen] = react.useState(false);
 	const [guidedFormat, setGuidedFormat] = react.useState(formats[0]);
-	const labels = require_pagination._objectSpread2({
+	const labels = require_highlight._objectSpread2({
 		export: "Export",
 		csv: "CSV",
 		json: "JSON",
@@ -3958,27 +3964,27 @@ function ExportButton({ data, columns, fileName = "export", formats = ["csv", "j
 		className: "inline-flex",
 		"data-opt-id": "MGP2B",
 		"data-opt-slug": "export-button.ExportButton",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Button, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
 			variant: "secondary",
 			size: "sm",
-			className: require_pagination.cn(className),
+			className: require_highlight.cn(className),
 			onClick: () => setGuidedOpen(true),
 			"aria-label": labels.export,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"aria-hidden": "true",
 				children: "⬇"
 			}), labels.export]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogRoot, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DialogRoot, {
 			open: guidedOpen,
 			onOpenChange: setGuidedOpen,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.DialogPanel, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.DialogPanel, {
 				size: "xs",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogHeading, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DialogHeading, {
 						className: "text-sm",
 						children: labels.guidedTitle
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogDescription, { children: labels.guidedDescription(data.length, formatLabels[guidedFormat]) })] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogBody, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DialogDescription, { children: labels.guidedDescription(data.length, formatLabels[guidedFormat]) })] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DialogBody, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "gap-element flex flex-col",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 							className: "text-text-secondary text-xs",
@@ -3988,16 +3994,16 @@ function ExportButton({ data, columns, fileName = "export", formats = ["csv", "j
 							children: formats.map((fmt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								onClick: () => setGuidedFormat(fmt),
-								className: require_pagination.cn("focus-visible:ring-accent rounded-md border px-3 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none", guidedFormat === fmt ? "border-accent bg-accent/10 text-accent" : "border-border text-text-secondary"),
+								className: require_highlight.cn("focus-visible:ring-accent rounded-md border px-3 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none", guidedFormat === fmt ? "border-accent bg-accent/10 text-accent" : "border-border text-text-secondary"),
 								children: formatLabels[fmt]
 							}, fmt))
 						})]
 					}) }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						variant: "ghost",
 						onClick: () => setGuidedOpen(false),
 						children: labels.cancel
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						onClick: () => {
 							handleExport(guidedFormat);
 							setGuidedOpen(false);
@@ -4008,17 +4014,17 @@ function ExportButton({ data, columns, fileName = "export", formats = ["csv", "j
 			})
 		})]
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_shader_surface.DropdownMenu, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_key_pad_menu.DropdownMenu, {
 		"data-opt-id": "MGP2B",
 		"data-opt-slug": "export-button.ExportButton",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_shader_surface.DropdownTrigger, {
-			className: require_pagination.cn("inline-flex items-center justify-center rounded-lg font-medium transition-colors", "border-border bg-surface text-text-primary hover:bg-bg-subtle active:bg-bg-muted border", "h-8 gap-1.5 px-3 text-xs", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_key_pad_menu.DropdownTrigger, {
+			className: require_highlight.cn("inline-flex items-center justify-center rounded-lg font-medium transition-colors", "border-border bg-surface text-text-primary hover:bg-bg-subtle active:bg-bg-muted border", "h-8 gap-1.5 px-3 text-xs", className),
 			"aria-label": labels.export,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"aria-hidden": "true",
 				children: "⬇"
 			}), labels.export]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.DropdownContent, { children: formats.map((fmt, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [i > 0 && fmt === "pdf" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.DropdownSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.DropdownItem, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.DropdownContent, { children: formats.map((fmt, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [i > 0 && fmt === "pdf" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.DropdownSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.DropdownItem, {
 			onClick: () => handleExport(fmt),
 			children: formatLabels[fmt]
 		})] }, fmt)) })]
@@ -4049,29 +4055,29 @@ const colsClass = {
 };
 /** Renders the summary row component. */
 function SummaryRow({ stats, columns = 4, onStatClick, formatValue, durationFractionDigits = 1, percentageFractionDigits = 1, loading = false, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$12), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$12), customLabels);
 	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("gap-group grid", colsClass[columns], className),
+		className: require_highlight.cn("gap-group grid", colsClass[columns], className),
 		"data-opt-id": "DA0AX",
 		"data-opt-slug": "summary-row.SummaryRow",
-		children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.SkeletonCard, {}, i))
+		children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.SkeletonCard, {}, i))
 	});
 	if (stats.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("flex min-h-40 items-center justify-center", className),
+		className: require_highlight.cn("flex min-h-40 items-center justify-center", className),
 		"data-opt-id": "DA0AX",
 		"data-opt-slug": "summary-row.SummaryRow",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.EmptyState, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.EmptyState, {
 			title: labels.emptyTitle,
 			description: labels.emptyDescription
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("gap-group grid", colsClass[columns], className),
+		className: require_highlight.cn("gap-group grid", colsClass[columns], className),
 		"data-opt-id": "DA0AX",
 		"data-opt-slug": "summary-row.SummaryRow",
 		children: stats.map((s) => {
 			const displayValue = formatValue ? formatValue(s) : formatByStatType(s, durationFractionDigits, percentageFractionDigits);
-			const card = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.StatCard, {
+			const card = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.StatCard, {
 				id: s.id,
 				title: s.title,
 				value: displayValue,
@@ -4095,7 +4101,7 @@ SummaryRow.displayName = "SummaryRow";
 function ComparisonSelector({ segments, valueA, valueB, onChangeA, onChangeB, values, onValuesChange, maxItems = 5, labels: customLabels, className }) {
 	var _segments$find$label, _segments$find, _segments$find$label2, _segments$find2;
 	const selectorId = react.useId().replace(/:/g, "");
-	const labels = require_pagination._objectSpread2({
+	const labels = require_highlight._objectSpread2({
 		groupLabel: "Comparison selector",
 		selectorA: "Base",
 		selectorB: "Compare",
@@ -4117,7 +4123,7 @@ function ComparisonSelector({ segments, valueA, valueB, onChangeA, onChangeB, va
 		const selected = values !== null && values !== void 0 ? values : [];
 		const atMax = selected.length >= maxItems;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_pagination.cn("gap-group flex flex-wrap items-center", className),
+			className: require_highlight.cn("gap-group flex flex-wrap items-center", className),
 			role: "group",
 			"aria-label": labels.groupLabel,
 			"data-opt-id": "2EH9H",
@@ -4132,7 +4138,7 @@ function ComparisonSelector({ segments, valueA, valueB, onChangeA, onChangeB, va
 					},
 					disabled: !isSelected && atMax,
 					"aria-pressed": isSelected,
-					className: require_pagination.cn("rounded-full px-3 py-1.5 text-sm font-medium transition-colors", isSelected ? "bg-accent-subtle text-text-primary" : "bg-bg-subtle text-text-tertiary hover:text-text-secondary", !isSelected && atMax && "cursor-not-allowed opacity-50"),
+					className: require_highlight.cn("rounded-full px-3 py-1.5 text-sm font-medium transition-colors", isSelected ? "bg-accent-subtle text-text-primary" : "bg-bg-subtle text-text-tertiary hover:text-text-secondary", !isSelected && atMax && "cursor-not-allowed opacity-50"),
 					children: s.label
 				}, s.value);
 			})
@@ -4145,7 +4151,7 @@ function ComparisonSelector({ segments, valueA, valueB, onChangeA, onChangeB, va
 	const selectorAText = (_segments$find$label = (_segments$find = segments.find((s) => s.value === valueA)) === null || _segments$find === void 0 ? void 0 : _segments$find.label) !== null && _segments$find$label !== void 0 ? _segments$find$label : "Select…";
 	const selectorBText = (_segments$find$label2 = (_segments$find2 = segments.find((s) => s.value === valueB)) === null || _segments$find2 === void 0 ? void 0 : _segments$find2.label) !== null && _segments$find$label2 !== void 0 ? _segments$find$label2 : "Select…";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("gap-group flex items-end", className),
+		className: require_highlight.cn("gap-group flex items-end", className),
 		role: "group",
 		"aria-label": labels.groupLabel,
 		"data-opt-id": "2EH9H",
@@ -4157,23 +4163,23 @@ function ComparisonSelector({ segments, valueA, valueB, onChangeA, onChangeB, va
 					id: selectorALabelId,
 					className: "text-text-tertiary text-xs font-medium",
 					children: labels.selectorA
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectRoot, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
 					value: valueA,
 					onValueChange: (v) => onChangeA === null || onChangeA === void 0 ? void 0 : onChangeA(v),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectTrigger, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectTrigger, {
 						"aria-labelledby": `${selectorALabelId} ${selectorAValueId}`,
 						className: "min-w-[140px]",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							id: selectorAValueId,
 							children: selectorAText
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, { children: segments.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectItem, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, { children: segments.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectItem, {
 						value: s.value,
 						children: s.label
 					}, s.value)) })]
 				})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 				variant: "ghost",
 				size: "sm",
 				onClick: handleSwap,
@@ -4187,17 +4193,17 @@ function ComparisonSelector({ segments, valueA, valueB, onChangeA, onChangeB, va
 					id: selectorBLabelId,
 					className: "text-text-tertiary text-xs font-medium",
 					children: labels.selectorB
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectRoot, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
 					value: valueB,
 					onValueChange: (v) => onChangeB === null || onChangeB === void 0 ? void 0 : onChangeB(v),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectTrigger, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectTrigger, {
 						"aria-labelledby": `${selectorBLabelId} ${selectorBValueId}`,
 						className: "min-w-[140px]",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							id: selectorBValueId,
 							children: selectorBText
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, { children: segments.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectItem, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, { children: segments.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectItem, {
 						value: s.value,
 						children: s.label
 					}, s.value)) })]
@@ -4355,7 +4361,7 @@ function presetTheme(preset, overrides) {
 }
 /** Construct a `GeneratedThemeSpec` from an inline `PaletteConfig`. */
 function generatedTheme(palette, options) {
-	return require_pagination._objectSpread2({
+	return require_highlight._objectSpread2({
 		kind: "generated",
 		palette
 	}, options);
@@ -4415,7 +4421,7 @@ function generatePaletteCached(config) {
 /** Apply sparse override maps onto a base token record. */
 function applyOverrides(base, overrides, mode) {
 	if (!overrides) return base;
-	const merged = require_pagination._objectSpread2({}, base);
+	const merged = require_highlight._objectSpread2({}, base);
 	if (overrides.shared) Object.assign(merged, overrides.shared);
 	const modeOverrides = mode === "light" ? overrides.light : overrides.dark;
 	if (modeOverrides) Object.assign(merged, modeOverrides);
@@ -5139,7 +5145,7 @@ function resolveLabels(user) {
 	return {
 		heading: (_user$heading = user === null || user === void 0 ? void 0 : user.heading) !== null && _user$heading !== void 0 ? _user$heading : DEFAULT_LABELS.heading,
 		activeSuffix: (_user$activeSuffix = user === null || user === void 0 ? void 0 : user.activeSuffix) !== null && _user$activeSuffix !== void 0 ? _user$activeSuffix : DEFAULT_LABELS.activeSuffix,
-		modeLabels: require_pagination._objectSpread2(require_pagination._objectSpread2({}, DEFAULT_MODE_LABELS), user === null || user === void 0 ? void 0 : user.modeLabels)
+		modeLabels: require_highlight._objectSpread2(require_highlight._objectSpread2({}, DEFAULT_MODE_LABELS), user === null || user === void 0 ? void 0 : user.modeLabels)
 	};
 }
 /** Renders the theme switcher component. */
@@ -5158,7 +5164,7 @@ function ThemeSwitcher({ className, labels: userLabels, variant = "default", cus
 	const showCustomBadge = controlledPreset === void 0 && ((themeContext === null || themeContext === void 0 ? void 0 : themeContext.isGenerated) === true || (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isPromoted) === true);
 	if (options.length === 0) return null;
 	if (variant === "compact") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("flex items-center gap-1.5", className),
+		className: require_highlight.cn("flex items-center gap-1.5", className),
 		"data-opt-id": "8JX0N",
 		"data-opt-slug": "theme-switcher.ThemeSwitcher",
 		children: [
@@ -5169,7 +5175,7 @@ function ThemeSwitcher({ className, labels: userLabels, variant = "default", cus
 					"aria-label": isActive ? `${theme.label} ${labels.activeSuffix}` : theme.label,
 					"aria-pressed": isActive,
 					onClick: () => setPreset(theme.value),
-					className: require_pagination.cn("flex h-7 w-7 items-center justify-center rounded-full transition-all", isActive ? "ring-accent ring-2 ring-offset-1" : "hover:ring-border-hover hover:ring-1"),
+					className: require_highlight.cn("flex h-7 w-7 items-center justify-center rounded-full transition-all", isActive ? "ring-accent ring-2 ring-offset-1" : "hover:ring-border-hover hover:ring-1"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "h-4 w-4 rounded-full",
 						style: { backgroundColor: theme.swatches[0] }
@@ -5186,13 +5192,13 @@ function ThemeSwitcher({ className, labels: userLabels, variant = "default", cus
 				"aria-pressed": mode === m,
 				onClick: () => setMode(m),
 				disabled: forcedMode,
-				className: require_pagination.cn("flex h-7 w-7 items-center justify-center rounded-full transition-all", forcedMode && "pointer-events-none opacity-40", mode === m ? "bg-accent/15 text-accent" : "text-text-tertiary hover:text-text-primary hover:bg-bg-subtle"),
+				className: require_highlight.cn("flex h-7 w-7 items-center justify-center rounded-full transition-all", forcedMode && "pointer-events-none opacity-40", mode === m ? "bg-accent/15 text-accent" : "text-text-tertiary hover:text-text-primary hover:bg-bg-subtle"),
 				children: MODE_ICONS[m]
 			}, m))
 		]
 	});
 	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": "8JX0N",
 		"data-opt-slug": "theme-switcher.ThemeSwitcher",
 		children: [
@@ -5207,7 +5213,7 @@ function ThemeSwitcher({ className, labels: userLabels, variant = "default", cus
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						onClick: () => setPreset(theme.value),
 						"aria-pressed": isActive,
-						className: require_pagination.cn("gap-element flex flex-col rounded-lg border p-3 text-left transition-all", isActive ? "border-accent bg-accent-subtle ring-accent ring-2" : "border-border bg-surface hover:border-border-hover hover:bg-bg-subtle"),
+						className: require_highlight.cn("gap-element flex flex-col rounded-lg border p-3 text-left transition-all", isActive ? "border-accent bg-accent-subtle ring-accent ring-2" : "border-border bg-surface hover:border-border-hover hover:bg-bg-subtle"),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "flex gap-1.5",
 							children: theme.swatches.map((color, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -5225,12 +5231,12 @@ function ThemeSwitcher({ className, labels: userLabels, variant = "default", cus
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_pagination.cn("bg-bg-subtle flex gap-1 rounded-lg p-1", forcedMode && "pointer-events-none opacity-50"),
+				className: require_highlight.cn("bg-bg-subtle flex gap-1 rounded-lg p-1", forcedMode && "pointer-events-none opacity-50"),
 				children: MODE_VALUES.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					onClick: () => setMode(m),
 					disabled: forcedMode,
 					"aria-pressed": mode === m,
-					className: require_pagination.cn("flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-all", mode === m ? "bg-surface text-text-primary shadow-sm" : "text-text-tertiary hover:text-text-secondary"),
+					className: require_highlight.cn("flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-all", mode === m ? "bg-surface text-text-primary shadow-sm" : "text-text-tertiary hover:text-text-secondary"),
 					children: labels.modeLabels[m]
 				}, m))
 			}),
@@ -5254,7 +5260,7 @@ function renderPrompt(template, values) {
 }
 /** Renders the prompt template component. */
 function PromptTemplate({ title, description, template, variables = [], className, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$11), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$11), customLabels);
 	const [values, setValues] = react.useState(() => {
 		const initial = {};
 		for (const v of variables) if (v.defaultValue) initial[v.name] = v.defaultValue;
@@ -5272,7 +5278,7 @@ function PromptTemplate({ title, description, template, variables = [], classNam
 		} catch (_unused) {}
 	}, [rendered]);
 	const handleChange = react.useCallback((name, value) => {
-		setValues((prev) => require_pagination._objectSpread2(require_pagination._objectSpread2({}, prev), {}, { [name]: value }));
+		setValues((prev) => require_highlight._objectSpread2(require_highlight._objectSpread2({}, prev), {}, { [name]: value }));
 	}, []);
 	const renderHighlighted = react.useMemo(() => {
 		const parts = [];
@@ -5285,7 +5291,7 @@ function PromptTemplate({ title, description, template, variables = [], classNam
 			const val = values[key];
 			const hasValue = val !== void 0 && val !== "";
 			parts.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", {
-				className: require_pagination.cn("rounded px-0.5", hasValue ? "bg-accent/20 text-accent-fg" : "bg-warning/20 text-warning-fg"),
+				className: require_highlight.cn("rounded px-0.5", hasValue ? "bg-accent/20 text-accent-fg" : "bg-warning/20 text-warning-fg"),
 				children: hasValue ? val : match[0]
 			}, `${key}-${match.index}`));
 			lastIndex = match.index + match[0].length;
@@ -5294,7 +5300,7 @@ function PromptTemplate({ title, description, template, variables = [], classNam
 		return parts;
 	}, [template, values]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("border-border overflow-hidden rounded-lg border", className),
+		className: require_highlight.cn("border-border overflow-hidden rounded-lg border", className),
 		"data-opt-id": "5E56D",
 		"data-opt-slug": "prompt-template.PromptTemplate",
 		children: [
@@ -5356,7 +5362,7 @@ function useSidebar() {
 }
 function SidebarHeader({ children, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("shrink-0 p-4", className),
+		className: require_highlight.cn("shrink-0 p-4", className),
 		children
 	});
 }
@@ -5382,7 +5388,7 @@ function SidebarContent({ children, className, onKeyDown }) {
 		nextItem === null || nextItem === void 0 || (_nextItem$scrollIntoV = nextItem.scrollIntoView) === null || _nextItem$scrollIntoV === void 0 || _nextItem$scrollIntoV.call(nextItem, { block: "nearest" });
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-		className: require_pagination.cn("flex-1 overflow-x-hidden overflow-y-auto px-2 py-1", className),
+		className: require_highlight.cn("flex-1 overflow-x-hidden overflow-y-auto px-2 py-1", className),
 		onKeyDown: handleKeyDown,
 		children
 	});
@@ -5390,7 +5396,7 @@ function SidebarContent({ children, className, onKeyDown }) {
 SidebarContent.displayName = "Sidebar.Content";
 function SidebarFooter({ children, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("shrink-0 p-4", className),
+		className: require_highlight.cn("shrink-0 p-4", className),
 		children
 	});
 }
@@ -5403,7 +5409,7 @@ function SidebarTrigger({ className, children }) {
 		onClick: toggle,
 		"aria-expanded": !collapsed,
 		"aria-label": collapsed ? "사이드바 열기" : "사이드바 닫기",
-		className: require_pagination.cn("text-text-secondary hover:bg-bg-subtle hover:text-text-primary inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors", className),
+		className: require_highlight.cn("text-text-secondary hover:bg-bg-subtle hover:text-text-primary inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors", className),
 		children: children !== null && children !== void 0 ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 			width: "16",
 			height: "16",
@@ -5437,7 +5443,7 @@ function SidebarGroup({ children, label, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: "group",
 		"aria-labelledby": label ? labelId : void 0,
-		className: require_pagination.cn("flex flex-col gap-0.5", className),
+		className: require_highlight.cn("flex flex-col gap-0.5", className),
 		children: [label && !collapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			id: labelId,
 			className: "text-text-tertiary mt-4 mb-1 px-2 text-[11px] font-semibold tracking-wider uppercase",
@@ -5450,7 +5456,7 @@ function SidebarItem({ children, icon, active = false, onClick, href, tooltip, b
 	const { collapsed, collapsible } = useSidebar();
 	const isCollapsed = collapsible && collapsed;
 	const tooltipText = tooltip !== null && tooltip !== void 0 ? tooltip : typeof children === "string" ? children : void 0;
-	const sharedClassName = require_pagination.cn("relative flex w-full items-center gap-2 rounded-md text-left text-sm transition-colors outline-none", isCollapsed ? "justify-center px-0 py-2" : "px-2 py-1.5", active ? "bg-bg-subtle text-text-primary font-medium" : "text-text-secondary hover:bg-bg-subtle hover:text-text-primary", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-1", className);
+	const sharedClassName = require_highlight.cn("relative flex w-full items-center gap-2 rounded-md text-left text-sm transition-colors outline-none", isCollapsed ? "justify-center px-0 py-2" : "px-2 py-1.5", active ? "bg-bg-subtle text-text-primary font-medium" : "text-text-secondary hover:bg-bg-subtle hover:text-text-primary", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-1", className);
 	const inner = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		active && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "bg-accent absolute top-1/2 left-0 h-4 w-0.5 -translate-y-1/2 rounded-full" }),
 		icon && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -5483,10 +5489,10 @@ function SidebarItem({ children, icon, active = false, onClick, href, tooltip, b
 		className: sharedClassName,
 		children: inner
 	});
-	if (isCollapsed && tooltipText) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.TooltipProvider, {
+	if (isCollapsed && tooltipText) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.TooltipProvider, {
 		placement: "right",
 		portal: true,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TooltipAnchor, { render: element }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Tooltip, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.TooltipAnchor, { render: element }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Tooltip, {
 			className: "bg-foreground text-background z-[120] rounded-md px-2 py-1 text-xs shadow-lg",
 			children: tooltipText
 		})]
@@ -5495,7 +5501,7 @@ function SidebarItem({ children, icon, active = false, onClick, href, tooltip, b
 }
 SidebarItem.displayName = "Sidebar.Item";
 function SidebarSeparator({ className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: require_pagination.cn("my-2 border-0", className) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: require_highlight.cn("my-2 border-0", className) });
 }
 SidebarSeparator.displayName = "Sidebar.Separator";
 function SidebarRoot({ children, collapsible = false, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, width = 280, collapsedWidth = 56, className, side = "left", label }) {
@@ -5542,7 +5548,7 @@ function SidebarRoot({ children, collapsible = false, defaultCollapsed = false,
 			"aria-label": label !== null && label !== void 0 ? label : "사이드바",
 			"data-collapsed": collapsed || void 0,
 			"data-side": side,
-			className: require_pagination.cn("bg-surface sticky top-0 flex h-screen shrink-0 flex-col transition-[width] duration-200", className),
+			className: require_highlight.cn("bg-surface sticky top-0 flex h-screen shrink-0 flex-col transition-[width] duration-200", className),
 			style: { width: currentWidth },
 			"data-opt-id": "FG8ZG",
 			"data-opt-slug": "sidebar.Sidebar",
@@ -5565,28 +5571,28 @@ const Sidebar = Object.assign(SidebarRoot, {
 const AppShellContext = react.createContext({ hasSidebar: false });
 function AppShellHeader({ children, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-		className: require_pagination.cn("border-border bg-surface/80 shrink-0 border-b px-4 py-3 backdrop-blur", className),
+		className: require_highlight.cn("border-border bg-surface/80 shrink-0 border-b px-4 py-3 backdrop-blur", className),
 		children
 	});
 }
 AppShellHeader.displayName = "AppShell.Header";
 function AppShellSidebar({ children, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("shrink-0", className),
+		className: require_highlight.cn("shrink-0", className),
 		children
 	});
 }
 AppShellSidebar.displayName = "AppShell.Sidebar";
 function AppShellContent({ children, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
-		className: require_pagination.cn("min-w-0 flex-1 overflow-auto", className),
+		className: require_highlight.cn("min-w-0 flex-1 overflow-auto", className),
 		children
 	});
 }
 AppShellContent.displayName = "AppShell.Content";
 function AppShellFooter({ children, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
-		className: require_pagination.cn("border-border border-t px-4 py-3", className),
+		className: require_highlight.cn("border-border border-t px-4 py-3", className),
 		children
 	});
 }
@@ -5614,7 +5620,7 @@ function AppShellRoot({ children, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppShellContext.Provider, {
 		value: ctx,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_pagination.cn("flex min-h-screen flex-col", className),
+			className: require_highlight.cn("flex min-h-screen flex-col", className),
 			"data-opt-id": "EQGGQ",
 			"data-opt-slug": "app-shell.AppShell",
 			children: [
@@ -5639,21 +5645,21 @@ const AppShell = Object.assign(AppShellRoot, {
 //#region src/shells/confirm-dialog.tsx
 /** Renders the confirm dialog component. */
 function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", variant = "default", children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DialogRoot, {
 		open,
 		onOpenChange: (v) => !v && onCancel(),
 		"data-opt-id": "0VNJQ",
 		"data-opt-slug": "confirm-dialog.ConfirmDialog",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.DialogPanel, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.DialogPanel, {
 			size: "sm",
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogHeading, { children: title }), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogDescription, { children: description })] }),
-				children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DialogBody, { children }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DialogHeading, { children: title }), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DialogDescription, { children: description })] }),
+				children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DialogBody, { children }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 					variant: "secondary",
 					onClick: onCancel,
 					children: cancelLabel
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 					variant: variant === "danger" ? "danger" : "primary",
 					onClick: onConfirm,
 					children: confirmLabel
@@ -5667,7 +5673,7 @@ ConfirmDialog.displayName = "ConfirmDialog";
 //#region src/shells/async-combobox.tsx
 /** Renders the async combobox component. */
 function AsyncCombobox({ onSearch, debounceMs = 300, loadingText, minChars = 1, placeholder, onSelect, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2({
+	const labels = require_highlight._objectSpread2({
 		input: placeholder !== null && placeholder !== void 0 ? placeholder : "Search",
 		loading: loadingText !== null && loadingText !== void 0 ? loadingText : "Loading…",
 		noResults: "No results",
@@ -5716,26 +5722,26 @@ function AsyncCombobox({ onSearch, debounceMs = 300, loadingText, minChars = 1,
 		debounceMs,
 		onSearch
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.ComboboxRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.ComboboxRoot, {
 		onValueChange: handleValueChange,
 		"data-opt-id": "KAKTV",
 		"data-opt-slug": "async-combobox.AsyncCombobox",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxInput, {
-			className: require_pagination.cn(className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ComboboxInput, {
+			className: require_highlight.cn(className),
 			"aria-label": labels.input,
 			"aria-busy": loading || void 0,
 			placeholder: labels.placeholder,
 			onInput: handleInput
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxPopover, { children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ComboboxPopover, { children: 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]
-		}) : results.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxEmpty, { children: labels.noResults }) : results.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ComboboxItem, {
+		}) : results.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ComboboxEmpty, { children: labels.noResults }) : results.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.ComboboxItem, {
 			value: item,
 			children: item
 		}, item)) })]
@@ -5750,30 +5756,30 @@ const defaultLabels$10 = {
 /** Renders the vertical tabs component. */
 function VerticalTabs({ tabs, defaultTabId, labels: customLabels, className }) {
 	var _tabs$;
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$10), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$10), customLabels);
 	if (tabs.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("text-text-secondary text-sm", className),
+		className: require_highlight.cn("text-text-secondary text-sm", className),
 		"data-opt-id": "J81G4",
 		"data-opt-slug": "vertical-tabs.VerticalTabs",
 		children: labels.emptyMessage
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TabsRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.TabsRoot, {
 		defaultSelectedId: defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id,
 		"data-opt-id": "J81G4",
 		"data-opt-slug": "vertical-tabs.VerticalTabs",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_pagination.cn("gap-group flex", className),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TabList, {
+			className: require_highlight.cn("gap-group flex", className),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.TabList, {
 				"aria-label": labels.ariaLabel,
 				className: "gap-element border-border flex flex-col border-r pr-4",
-				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,
 					className: "justify-start text-left",
 					children: tab.label
 				}, tab.id))
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex-1",
-				children: tabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TabPanel, {
+				children: tabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.TabPanel, {
 					tabId: tab.id,
 					children: tab.content
 				}, tab.id))
@@ -5789,26 +5795,26 @@ const defaultLabels$9 = {
 };
 /** Renders the column toggler component. */
 function ColumnToggler({ columns, visibleColumns, onChange, className, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$9), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$9), customLabels);
 	const visibleCount = visibleColumns.length;
 	const hasColumns = columns.length > 0;
 	const toggle = (id) => {
 		if (visibleColumns.includes(id)) onChange(visibleColumns.filter((c) => c !== id));
 		else onChange([...visibleColumns, id]);
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverRoot, {
 		"data-opt-id": "PPN5M",
 		"data-opt-slug": "column-toggler.ColumnToggler",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.PopoverTrigger, {
-			className: require_pagination.cn("border-border bg-surface text-text-primary hover:bg-bg-subtle inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-sm font-medium", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.PopoverTrigger, {
+			className: require_highlight.cn("border-border bg-surface text-text-primary hover:bg-bg-subtle inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-sm font-medium", className),
 			children: labels.triggerLabel(visibleCount)
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.PopoverContent, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.PopoverContent, {
 			className: "w-56",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "gap-element flex flex-col p-1",
 				children: hasColumns ? columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 					className: "text-text-primary hover:bg-bg-subtle gap-element flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Checkbox, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Checkbox, {
 						checked: visibleColumns.includes(col.id),
 						onChange: () => toggle(col.id)
 					}), col.header]
@@ -5825,7 +5831,7 @@ ColumnToggler.displayName = "ColumnToggler";
 //#region src/shells/bulk-actions.tsx
 /** Renders the bulk actions component. */
 function BulkActions({ selectedCount, actions, onAction, onClear, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2({
+	const labels = require_highlight._objectSpread2({
 		selected: "selected",
 		actions: "Actions",
 		clear: "Clear",
@@ -5834,11 +5840,11 @@ function BulkActions({ selectedCount, actions, onAction, onClear, labels: custom
 	if (selectedCount === 0) return null;
 	const hasActions = actions.length > 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("gap-group border-border bg-surface flex items-center rounded-lg border px-4 py-2", className),
+		className: require_highlight.cn("gap-group border-border bg-surface flex items-center rounded-lg border px-4 py-2", className),
 		"data-opt-id": "Q3J33",
 		"data-opt-slug": "bulk-actions.BulkActions",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Badge, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Badge, {
 				variant: "info",
 				children: [
 					selectedCount,
@@ -5846,10 +5852,10 @@ function BulkActions({ selectedCount, actions, onAction, onClear, labels: custom
 					labels.selected
 				]
 			}),
-			hasActions ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_shader_surface.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.DropdownTrigger, {
+			hasActions ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_key_pad_menu.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.DropdownTrigger, {
 				className: "border-border bg-surface text-text-primary hover:bg-bg-subtle inline-flex h-8 items-center rounded-md border px-3 text-sm font-medium",
 				children: labels.actions
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.DropdownContent, { children: actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.DropdownItem, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.DropdownContent, { children: actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.DropdownItem, {
 				onClick: () => onAction(action.id),
 				className: action.variant === "danger" ? "text-danger" : void 0,
 				children: action.label
@@ -5879,7 +5885,7 @@ const defaultLabels$8 = {
 };
 /** Renders the saved filters component. */
 function SavedFilters({ currentFilters, presets, onSavePreset, onLoadPreset, onDeletePreset, className, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$8), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$8), customLabels);
 	const [newName, setNewName] = react.useState("");
 	const [pendingDeleteId, setPendingDeleteId] = react.useState(null);
 	const triggerId = react.useId();
@@ -5904,14 +5910,14 @@ function SavedFilters({ currentFilters, presets, onSavePreset, onLoadPreset, onD
 		window.addEventListener("keydown", cancelDelete);
 		return () => window.removeEventListener("keydown", cancelDelete);
 	}, [cancelPendingDelete, pendingDeleteId]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverRoot, {
 		"data-opt-id": "SPRCB",
 		"data-opt-slug": "saved-filters.SavedFilters",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.PopoverTrigger, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.PopoverTrigger, {
 			id: triggerId,
-			className: require_pagination.cn("border-border bg-surface text-text-primary hover:bg-bg-subtle inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-sm font-medium", className),
+			className: require_highlight.cn("border-border bg-surface text-text-primary hover:bg-bg-subtle inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-sm font-medium", className),
 			children: labels.triggerLabel(presets.length)
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.PopoverContent, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.PopoverContent, {
 			className: "w-72",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: "gap-group flex flex-col p-2",
@@ -5947,7 +5953,7 @@ function SavedFilters({ currentFilters, presets, onSavePreset, onLoadPreset, onD
 									},
 									children: preset.name
 								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 									variant: "ghost",
 									size: "sm",
 									className: "text-text-tertiary hover:text-danger size-7 p-0",
@@ -5970,7 +5976,7 @@ function SavedFilters({ currentFilters, presets, onSavePreset, onLoadPreset, onD
 											cancelPendingDelete(preset.id);
 										}
 									},
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 										id: `${triggerId}-${preset.id}`,
 										variant: "danger",
 										size: "sm",
@@ -5985,7 +5991,7 @@ function SavedFilters({ currentFilters, presets, onSavePreset, onLoadPreset, onD
 											});
 										},
 										children: labels.confirmDeleteLabel
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 										variant: "ghost",
 										size: "sm",
 										className: "h-7 px-2",
@@ -6010,13 +6016,13 @@ function SavedFilters({ currentFilters, presets, onSavePreset, onLoadPreset, onD
 								setPendingDeleteId(null);
 							}
 						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 							value: newName,
 							onChange: (e) => setNewName(e.target.value),
 							placeholder: labels.namePlaceholder,
 							"aria-label": labels.namePlaceholder,
 							className: "h-8 text-sm"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 							type: "submit",
 							size: "sm",
 							disabled: !newName.trim(),
@@ -6040,13 +6046,13 @@ const defaultLabels$7 = {
 };
 /** Renders the notification center component. */
 function NotificationCenter({ notifications, onMarkRead, onMarkAllRead, onAction, className, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$7), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$7), customLabels);
 	const unreadCount = notifications.filter((n) => !n.read).length;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverRoot, {
 		"data-opt-id": "7A0XY",
 		"data-opt-slug": "notification-center.NotificationCenter",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverTrigger, {
-			className: require_pagination.cn("border-border bg-surface hover:bg-bg-subtle relative inline-flex h-9 w-9 items-center justify-center rounded-lg border", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverTrigger, {
+			className: require_highlight.cn("border-border bg-surface hover:bg-bg-subtle relative inline-flex h-9 w-9 items-center justify-center rounded-lg border", className),
 			"aria-label": `${labels.triggerLabel}${unreadCount > 0 ? ` ${labels.unreadSuffix(unreadCount)}` : ""}`,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 				width: "16",
@@ -6062,7 +6068,7 @@ function NotificationCenter({ notifications, onMarkRead, onMarkAllRead, onAction
 				className: "bg-danger text-danger-fg absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold",
 				children: unreadCount
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverContent, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverContent, {
 			className: "w-80 p-0",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "border-border flex items-center justify-between border-b px-4 py-3",
@@ -6075,12 +6081,12 @@ function NotificationCenter({ notifications, onMarkRead, onMarkAllRead, onAction
 					onClick: onMarkAllRead,
 					children: labels.markAllRead
 				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.ScrollArea, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.ScrollArea, {
 				className: "max-h-80",
 				children: notifications.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "text-text-tertiary px-4 py-8 text-center text-sm",
 					children: labels.emptyMessage
-				}) : notifications.map((n) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("border-border flex flex-col gap-1 border-b px-4 py-3 last:border-b-0", !n.read && "bg-accent-subtle/30 cursor-pointer") }, !n.read ? {
+				}) : notifications.map((n) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("border-border flex flex-col gap-1 border-b px-4 py-3 last:border-b-0", !n.read && "bg-accent-subtle/30 cursor-pointer") }, !n.read ? {
 					role: "button",
 					tabIndex: 0,
 					onClick: () => onMarkRead(n.id),
@@ -6137,20 +6143,20 @@ const ACTION_DOT_COLOR = {
 };
 /** Renders the audit log component. */
 function AuditLog({ entries, onLoadMore, loading, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2({
+	const labels = require_highlight._objectSpread2({
 		title: "Activity log",
 		loading: "Loading…",
 		loadMore: "Load more",
 		empty: "No activity yet"
 	}, customLabels);
-	if (entries.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.EmptyState, {
+	if (entries.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.EmptyState, {
 		title: labels.empty,
 		className,
 		"data-opt-id": "VZ046",
 		"data-opt-slug": "audit-log.AuditLog"
 	});
 	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": "VZ046",
 		"data-opt-slug": "audit-log.AuditLog",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -6168,41 +6174,41 @@ function AuditLog({ entries, onLoadMore, loading, labels: customLabels, classNam
 					role: "listitem",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "absolute top-4 left-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.Avatar, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.Avatar, {
 							src: entry.user.avatar,
 							fallback: entry.user.name[0],
 							size: "sm"
 						}), dotColor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: require_pagination.cn("border-surface absolute -right-0.5 -bottom-0.5 h-3 w-3 rounded-full border-2", dotColor),
+							className: require_highlight.cn("border-surface absolute -right-0.5 -bottom-0.5 h-3 w-3 rounded-full border-2", dotColor),
 							"aria-hidden": "true"
 						})]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: require_pagination.cn("rounded-lg p-3", require_pagination.OPT_BORDER, "bg-surface transition-colors"),
+						className: require_highlight.cn("rounded-lg p-3", require_highlight.OPT_BORDER, "bg-surface transition-colors"),
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "gap-element flex items-center",
 								children: [
-									badgeVariant ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Badge, {
+									badgeVariant ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Badge, {
 										variant: badgeVariant,
 										size: "sm",
 										dot: true,
 										children: entry.action
 									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_pagination.cn("text-xs font-medium", require_pagination.OPT_TEXT_SECONDARY),
+										className: require_highlight.cn("text-xs font-medium", require_highlight.OPT_TEXT_SECONDARY),
 										children: entry.action
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_pagination.cn("text-xs", require_pagination.OPT_TEXT_TERTIARY),
+										className: require_highlight.cn("text-xs", require_highlight.OPT_TEXT_TERTIARY),
 										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", { children: entry.timestamp })
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_pagination.cn("ml-auto text-xs font-medium", require_pagination.OPT_TEXT_SECONDARY),
+										className: require_highlight.cn("ml-auto text-xs font-medium", require_highlight.OPT_TEXT_SECONDARY),
 										children: entry.user.name
 									})
 								]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-								className: require_pagination.cn("mt-1.5 text-sm", require_pagination.OPT_TEXT_PRIMARY),
+								className: require_highlight.cn("mt-1.5 text-sm", require_highlight.OPT_TEXT_PRIMARY),
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "font-medium",
@@ -6236,7 +6242,7 @@ function AuditLog({ entries, onLoadMore, loading, labels: customLabels, classNam
 			type: "button",
 			onClick: onLoadMore,
 			disabled: loading,
-			className: require_pagination.cn("text-accent mt-1 self-center rounded-md px-3 py-1.5 text-sm hover:underline disabled:opacity-50", "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-accent mt-1 self-center rounded-md px-3 py-1.5 text-sm hover:underline disabled:opacity-50", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
 			children: loading ? labels.loading : labels.loadMore
 		})]
 	});
@@ -6266,7 +6272,7 @@ function TreeTable({ data, columns, defaultExpanded = [], indentSize = 24, class
 		return [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
 			className: "border-border border-b",
 			children: columns.map((col, ci) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-				className: require_pagination.cn(require_pagination.OPT_TD),
+				className: require_highlight.cn(require_highlight.OPT_TD),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center",
 					style: ci === 0 ? { paddingLeft: depth * indentSize } : void 0,
@@ -6274,7 +6280,7 @@ function TreeTable({ data, columns, defaultExpanded = [], indentSize = 24, class
 						ci === 0 && hasChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							onClick: () => toggle(node.id),
-							className: require_pagination.cn("mr-1 flex h-5 w-5 items-center justify-center rounded text-xs", "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("mr-1 flex h-5 w-5 items-center justify-center rounded text-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
 							"aria-expanded": isExpanded,
 							"aria-label": isExpanded ? "Collapse" : "Expand",
 							children: isExpanded ? "▼" : "▶"
@@ -6287,15 +6293,15 @@ function TreeTable({ data, columns, defaultExpanded = [], indentSize = 24, class
 		}, node.id), ...isExpanded && hasChildren ? renderRows(node.children, depth + 1) : []];
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("overflow-auto", className),
+		className: require_highlight.cn("overflow-auto", className),
 		"data-opt-id": "EJRTW",
 		"data-opt-slug": "tree-table.TreeTable",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-			className: require_pagination.cn("w-full border-collapse", require_pagination.OPT_BORDER),
+			className: require_highlight.cn("w-full border-collapse", require_highlight.OPT_BORDER),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
 				className: "border-border border-b",
 				children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-					className: require_pagination.cn(require_pagination.OPT_TH),
+					className: require_highlight.cn(require_highlight.OPT_TH),
 					style: { width: col.width },
 					children: col.header
 				}, col.id))
@@ -6308,7 +6314,7 @@ function TreeTable({ data, columns, defaultExpanded = [], indentSize = 24, class
 const defaultLabels$6 = { emptyMessage: "No rows to edit" };
 /** Renders the inline edit table component. */
 function InlineEditTable({ data, columns, keyExtractor, onCellEdit, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$6), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$6), customLabels);
 	const [editCell, setEditCell] = react.useState(null);
 	const [editValue, setEditValue] = react.useState("");
 	const inputRef = react.useRef(null);
@@ -6334,21 +6340,21 @@ function InlineEditTable({ data, columns, keyExtractor, onCellEdit, labels: cust
 		if (editCell) (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
 	}, [editCell]);
 	if (data.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("flex min-h-40 items-center justify-center", className),
+		className: require_highlight.cn("flex min-h-40 items-center justify-center", className),
 		"data-opt-id": "5W3J1",
 		"data-opt-slug": "inline-edit-table.InlineEditTable",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.EmptyState, { title: labels.emptyMessage })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.EmptyState, { title: labels.emptyMessage })
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("overflow-auto", className),
+		className: require_highlight.cn("overflow-auto", className),
 		"data-opt-id": "5W3J1",
 		"data-opt-slug": "inline-edit-table.InlineEditTable",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-			className: require_pagination.cn("w-full border-collapse", require_pagination.OPT_BORDER),
+			className: require_highlight.cn("w-full border-collapse", require_highlight.OPT_BORDER),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
 				className: "border-border border-b",
 				children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-					className: require_pagination.cn(require_pagination.OPT_TH),
+					className: require_highlight.cn(require_highlight.OPT_TH),
 					style: { width: col.width },
 					children: col.header
 				}, col.id))
@@ -6360,10 +6366,10 @@ function InlineEditTable({ data, columns, keyExtractor, onCellEdit, labels: cust
 						const isEditing = (editCell === null || editCell === void 0 ? void 0 : editCell.rowId) === rowId && (editCell === null || editCell === void 0 ? void 0 : editCell.colId) === col.id;
 						const value = getCellValue(row, col);
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-							className: require_pagination.cn(require_pagination.OPT_TD),
+							className: require_highlight.cn(require_highlight.OPT_TD),
 							children: isEditing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 								ref: inputRef,
-								className: require_pagination.cn("w-full rounded px-2 py-1 text-sm", require_pagination.OPT_INPUT),
+								className: require_highlight.cn("w-full rounded px-2 py-1 text-sm", require_highlight.OPT_INPUT),
 								value: editValue,
 								onChange: (e) => setEditValue(e.target.value),
 								onKeyDown: (e) => {
@@ -6422,14 +6428,14 @@ function KanbanBoard({ columns, onDragEnd, renderCard, keyExtractor, emptyMessag
 		setDragItem(null);
 		setDropTarget(null);
 	};
-	if (columns.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.EmptyState, {
+	if (columns.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.EmptyState, {
 		title: emptyMessage,
 		className,
 		"data-opt-id": "T6JWY",
 		"data-opt-slug": "kanban-board.KanbanBoard"
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("gap-group flex overflow-x-auto", className),
+		className: require_highlight.cn("gap-group flex overflow-x-auto", className),
 		"data-opt-id": "T6JWY",
 		"data-opt-slug": "kanban-board.KanbanBoard",
 		children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -6464,7 +6470,7 @@ function KanbanBoard({ columns, onDragEnd, renderCard, keyExtractor, emptyMessag
 						onDragOver: handleDragOver(col.id, i),
 						onDrop: handleDrop(col.id, i),
 						onDragEnd: handleDragEnd,
-						className: require_pagination.cn("bg-surface border-border cursor-grab rounded-lg border p-3 shadow-sm transition-opacity", (dragItem === null || dragItem === void 0 ? void 0 : dragItem.id) === id && "opacity-50"),
+						className: require_highlight.cn("bg-surface border-border cursor-grab rounded-lg border p-3 shadow-sm transition-opacity", (dragItem === null || dragItem === void 0 ? void 0 : dragItem.id) === id && "opacity-50"),
 						children: renderCard(item)
 					})] }, id);
 				}), (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.colId) === col.id && (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.index) === col.items.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-accent h-0.5 rounded-full" })]
@@ -6556,7 +6562,7 @@ function RichTextEditor({ value, onChange, placeholder = "Write something…", t
 		}, 0);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("border-border flex flex-col overflow-hidden rounded-lg border", className),
+		className: require_highlight.cn("border-border flex flex-col overflow-hidden rounded-lg border", className),
 		"data-opt-id": "441JQ",
 		"data-opt-slug": "rich-text-editor.RichTextEditor",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -6564,7 +6570,7 @@ function RichTextEditor({ value, onChange, placeholder = "Write something…", t
 			children: toolbar.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				onClick: () => applyFormat(action),
-				className: require_pagination.cn("text-text-secondary hover:bg-surface hover:text-text-primary inline-flex h-7 min-w-7 items-center justify-center rounded px-1.5 text-xs font-medium", require_pagination.OPT_FOCUS_VISIBLE),
+				className: require_highlight.cn("text-text-secondary hover:bg-surface hover:text-text-primary inline-flex h-7 min-w-7 items-center justify-center rounded px-1.5 text-xs font-medium", require_highlight.OPT_FOCUS_VISIBLE),
 				title: action,
 				"aria-label": action,
 				children: TOOLBAR_BUTTONS[action].label
@@ -6630,7 +6636,7 @@ const LINE_PREFIXES = {
 function CodeDiffViewer({ original, modified, mode = "unified", showLineNumbers = true, scrollLabel, className }) {
 	const diff = react.useMemo(() => computeDiff(original, modified), [original, modified]);
 	if (mode === "split") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("border-border overflow-auto rounded-lg border", require_pagination.OPT_FOCUS_VISIBLE, className),
+		className: require_highlight.cn("border-border overflow-auto rounded-lg border", require_highlight.OPT_FOCUS_VISIBLE, className),
 		tabIndex: 0,
 		role: "region",
 		"aria-label": scrollLabel !== null && scrollLabel !== void 0 ? scrollLabel : "Code diff",
@@ -6646,7 +6652,7 @@ function CodeDiffViewer({ original, modified, mode = "unified", showLineNumbers
 						children: diff.filter((l) => l.type !== "add").map((line, i) => {
 							var _line$oldLineNo;
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: require_pagination.cn("px-3", LINE_STYLES[line.type]),
+								className: require_highlight.cn("px-3", LINE_STYLES[line.type]),
 								children: [
 									showLineNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "text-text-tertiary mr-4 inline-block w-8 text-right select-none",
@@ -6668,7 +6674,7 @@ function CodeDiffViewer({ original, modified, mode = "unified", showLineNumbers
 						children: diff.filter((l) => l.type !== "remove").map((line, i) => {
 							var _line$newLineNo;
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: require_pagination.cn("px-3", LINE_STYLES[line.type]),
+								className: require_highlight.cn("px-3", LINE_STYLES[line.type]),
 								children: [
 									showLineNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "text-text-tertiary mr-4 inline-block w-8 text-right select-none",
@@ -6686,7 +6692,7 @@ function CodeDiffViewer({ original, modified, mode = "unified", showLineNumbers
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("border-border overflow-auto rounded-lg border", require_pagination.OPT_FOCUS_VISIBLE, className),
+		className: require_highlight.cn("border-border overflow-auto rounded-lg border", require_highlight.OPT_FOCUS_VISIBLE, className),
 		tabIndex: 0,
 		role: "region",
 		"aria-label": scrollLabel !== null && scrollLabel !== void 0 ? scrollLabel : "Code diff",
@@ -6697,7 +6703,7 @@ function CodeDiffViewer({ original, modified, mode = "unified", showLineNumbers
 			children: diff.map((line, i) => {
 				var _line$oldLineNo2, _line$newLineNo2;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: require_pagination.cn("px-3", LINE_STYLES[line.type]),
+					className: require_highlight.cn("px-3", LINE_STYLES[line.type]),
 					children: [
 						showLineNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "text-text-tertiary mr-2 inline-block w-8 text-right select-none",
@@ -6726,13 +6732,13 @@ const defaultLabels$5 = {
 };
 /** Renders the webhook config component. */
 function WebhookConfig({ webhook, onChange, availableEvents, onTest, className, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$5), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$5), customLabels);
 	const toggleEvent = (event) => {
 		const events = webhook.events.includes(event) ? webhook.events.filter((e) => e !== event) : [...webhook.events, event];
-		onChange(require_pagination._objectSpread2(require_pagination._objectSpread2({}, webhook), {}, { events }));
+		onChange(require_highlight._objectSpread2(require_highlight._objectSpread2({}, webhook), {}, { events }));
 	};
 	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": "B6B1Z",
 		"data-opt-slug": "webhook-config.WebhookConfig",
 		children: [
@@ -6741,9 +6747,9 @@ function WebhookConfig({ webhook, onChange, availableEvents, onTest, className,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 					className: "text-text-primary text-sm font-medium",
 					children: labels.webhookUrl
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 					value: webhook.url,
-					onChange: (e) => onChange(require_pagination._objectSpread2(require_pagination._objectSpread2({}, webhook), {}, { url: e.target.value })),
+					onChange: (e) => onChange(require_highlight._objectSpread2(require_highlight._objectSpread2({}, webhook), {}, { url: e.target.value })),
 					placeholder: "https://example.com/webhook"
 				})]
 			}),
@@ -6756,7 +6762,7 @@ function WebhookConfig({ webhook, onChange, availableEvents, onTest, className,
 					className: "gap-element flex flex-wrap",
 					children: availableEvents.length > 0 ? availableEvents.map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 						className: "flex items-center gap-1.5 text-sm",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Checkbox, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Checkbox, {
 							name: `event-${event}`,
 							checked: webhook.events.includes(event),
 							onChange: () => toggleEvent(event)
@@ -6775,16 +6781,16 @@ function WebhookConfig({ webhook, onChange, availableEvents, onTest, className,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 					className: "text-text-primary text-sm font-medium",
 					children: labels.retries
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.NumberInput, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.NumberInput, {
 					value: webhook.retries,
-					onChange: (v) => onChange(require_pagination._objectSpread2(require_pagination._objectSpread2({}, webhook), {}, { retries: v })),
+					onChange: (v) => onChange(require_highlight._objectSpread2(require_highlight._objectSpread2({}, webhook), {}, { retries: v })),
 					min: 0,
 					max: 10
 				})]
 			}),
 			onTest && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex justify-end",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 					variant: "secondary",
 					onClick: onTest,
 					children: labels.testWebhook
@@ -6803,15 +6809,15 @@ const defaultLabels$4 = {
 };
 /** Renders the feature flag panel component. */
 function FeatureFlagPanel({ flags, onToggle, onRolloutChange, environments, className, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$4), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$4), customLabels);
 	if (flags.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("text-text-tertiary text-sm", className),
+		className: require_highlight.cn("text-text-tertiary text-sm", className),
 		"data-opt-id": "JW164",
 		"data-opt-slug": "feature-flag-panel.FeatureFlagPanel",
 		children: labels.emptyMessage
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("gap-group flex flex-col", className),
+		className: require_highlight.cn("gap-group flex flex-col", className),
 		"data-opt-id": "JW164",
 		"data-opt-slug": "feature-flag-panel.FeatureFlagPanel",
 		children: flags.map((flag) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -6828,7 +6834,7 @@ function FeatureFlagPanel({ flags, onToggle, onRolloutChange, environments, clas
 							className: "text-text-tertiary text-xs",
 							children: flag.description
 						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.Switch, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.Switch, {
 						checked: flag.enabled,
 						onChange: (checked) => onToggle(flag.id, checked),
 						label: flag.enabled ? labels.enabled : labels.disabled
@@ -6836,7 +6842,7 @@ function FeatureFlagPanel({ flags, onToggle, onRolloutChange, environments, clas
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex flex-wrap gap-1",
-					children: environments.map((env) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Badge, {
+					children: environments.map((env) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Badge, {
 						variant: flag.environments.includes(env) ? "success" : "default",
 						children: env
 					}, env))
@@ -6846,7 +6852,7 @@ function FeatureFlagPanel({ flags, onToggle, onRolloutChange, environments, clas
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "text-text-secondary text-xs",
 						children: labels.rolloutLabel
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.NumberInput, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.NumberInput, {
 						value: flag.rolloutPercentage,
 						onChange: (v) => onRolloutChange(flag.id, v),
 						min: 0,
@@ -6862,7 +6868,7 @@ function FeatureFlagPanel({ flags, onToggle, onRolloutChange, environments, clas
 //#region src/shells/data-import-wizard.tsx
 /** Renders the data import wizard component. */
 function DataImportWizard({ fields, onImport, acceptedFormats = ".csv", labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2({
+	const labels = require_highlight._objectSpread2({
 		stepsLabel: "Import steps",
 		upload: "Upload",
 		mapColumns: "Map Columns",
@@ -6904,7 +6910,7 @@ function DataImportWizard({ fields, onImport, acceptedFormats = ".csv", labels:
 		labels.confirm
 	];
 	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": "QD9XR",
 		"data-opt-slug": "data-import-wizard.DataImportWizard",
 		children: [
@@ -6917,11 +6923,11 @@ function DataImportWizard({ fields, onImport, acceptedFormats = ".csv", labels:
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							"aria-hidden": "true",
-							className: require_pagination.cn("flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium", i <= step ? "bg-accent text-accent-fg" : "bg-bg-subtle text-text-tertiary"),
+							className: require_highlight.cn("flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium", i <= step ? "bg-accent text-accent-fg" : "bg-bg-subtle text-text-tertiary"),
 							children: i + 1
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: require_pagination.cn("text-xs", i <= step ? "text-text-primary" : "text-text-tertiary"),
+							className: require_highlight.cn("text-xs", i <= step ? "text-text-primary" : "text-text-tertiary"),
 							children: s
 						}),
 						i < steps.length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -6957,7 +6963,7 @@ function DataImportWizard({ fields, onImport, acceptedFormats = ".csv", labels:
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
 						className: "border-border bg-surface text-text-primary rounded-md border px-2 py-1 text-sm",
 						value: mapping[field.id] || "",
-						onChange: (e) => setMapping(require_pagination._objectSpread2(require_pagination._objectSpread2({}, mapping), {}, { [field.id]: e.target.value })),
+						onChange: (e) => setMapping(require_highlight._objectSpread2(require_highlight._objectSpread2({}, mapping), {}, { [field.id]: e.target.value })),
 						"aria-label": `Map ${field.label}`,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 							value: "",
@@ -6969,11 +6975,11 @@ function DataImportWizard({ fields, onImport, acceptedFormats = ".csv", labels:
 					})]
 				}, field.id)), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "gap-element flex justify-end",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						variant: "secondary",
 						onClick: () => setStep(0),
 						children: labels.back
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						onClick: () => setStep(2),
 						children: labels.next
 					})]
@@ -7007,11 +7013,11 @@ function DataImportWizard({ fields, onImport, acceptedFormats = ".csv", labels:
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "gap-element flex justify-end",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 							variant: "secondary",
 							onClick: () => setStep(1),
 							children: labels.back
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 							onClick: () => setStep(3),
 							children: labels.next
 						})]
@@ -7025,11 +7031,11 @@ function DataImportWizard({ fields, onImport, acceptedFormats = ".csv", labels:
 					children: labels.confirmSummary(rows.length, Object.keys(mapping).length)
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "gap-element flex",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						variant: "secondary",
 						onClick: () => setStep(2),
 						children: labels.back
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 						onClick: () => onImport(mapping, rows),
 						children: labels.import
 					})]
@@ -7043,14 +7049,14 @@ function DataImportWizard({ fields, onImport, acceptedFormats = ".csv", labels:
 const defaultLabels$3 = { trigger: "Menu" };
 /** Renders the mega menu component. */
 function MegaMenu({ menus, columns = 3, footer, triggerLabel, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$3), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$3), customLabels);
 	const resolvedTriggerLabel = triggerLabel !== null && triggerLabel !== void 0 ? triggerLabel : labels.trigger;
 	if (menus.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverRoot, {
 		"data-opt-id": "42177",
 		"data-opt-slug": "mega-menu.MegaMenu",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverTrigger, {
-			className: require_pagination.cn("border-border bg-surface text-text-primary hover:bg-bg-subtle inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-sm font-medium", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverTrigger, {
+			className: require_highlight.cn("border-border bg-surface text-text-primary hover:bg-bg-subtle inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-sm font-medium", className),
 			children: [resolvedTriggerLabel, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 				width: "12",
 				height: "12",
@@ -7060,7 +7066,7 @@ function MegaMenu({ menus, columns = 3, footer, triggerLabel, labels: customLabe
 				strokeWidth: "1.5",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 5l3 3 3-3" })
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverContent, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.PopoverContent, {
 			className: "w-auto max-w-2xl p-0",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "gap-group grid p-4",
@@ -7106,7 +7112,7 @@ const defaultLabels$2 = {
 };
 /** Renders the chat sidebar component. */
 function ChatSidebar({ conversations, activeConversationId, onConversationSelect, onNewChat, onSearch, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$2), customLabels);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$2), customLabels);
 	const [searchQuery, setSearchQuery] = (0, react.useState)("");
 	const [isHydrated, setIsHydrated] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
@@ -7121,11 +7127,11 @@ function ChatSidebar({ conversations, activeConversationId, onConversationSelect
 		return c.title.toLowerCase().includes(searchQuery.toLowerCase()) || ((_c$lastMessage = c.lastMessage) === null || _c$lastMessage === void 0 ? void 0 : _c$lastMessage.toLowerCase().includes(searchQuery.toLowerCase()));
 	}) : conversations;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("gap-group flex h-full flex-col", className),
+		className: require_highlight.cn("gap-group flex h-full flex-col", className),
 		"data-opt-id": "TBVMY",
 		"data-opt-slug": "chat-sidebar.ChatSidebar",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Button, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
 				onClick: onNewChat,
 				className: "w-full",
 				size: "sm",
@@ -7154,17 +7160,17 @@ function ChatSidebar({ conversations, activeConversationId, onConversationSelect
 					})]
 				}), labels.newChat]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Input, {
 				placeholder: labels.searchPlaceholder,
 				value: searchQuery,
 				onChange: (e) => handleSearch(e.target.value),
 				size: "sm",
 				"aria-label": labels.searchPlaceholder
 			}),
-			filtered.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.EmptyState, {
+			filtered.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.EmptyState, {
 				title: labels.emptyTitle,
 				description: labels.emptyDescription
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.ScrollArea, {
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.ScrollArea, {
 				className: "flex-1",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "gap-element flex flex-col",
@@ -7177,25 +7183,25 @@ function ChatSidebar({ conversations, activeConversationId, onConversationSelect
 							role: "option",
 							"aria-selected": isActive,
 							onClick: () => onConversationSelect === null || onConversationSelect === void 0 ? void 0 : onConversationSelect(conversation),
-							className: require_pagination.cn("relative rounded-lg px-3 py-2.5 text-left transition-colors", require_pagination.OPT_FOCUS_VISIBLE, isActive ? "bg-accent-subtle" : "hover:bg-bg-subtle"),
+							className: require_highlight.cn("relative rounded-lg px-3 py-2.5 text-left transition-colors", require_highlight.OPT_FOCUS_VISIBLE, isActive ? "bg-accent-subtle" : "hover:bg-bg-subtle"),
 							children: [
 								isActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "bg-accent absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-full" }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									className: "gap-element flex items-start justify-between",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_pagination.cn("truncate text-sm font-medium", isActive ? "text-accent" : require_pagination.OPT_TEXT_PRIMARY),
+										className: require_highlight.cn("truncate text-sm font-medium", isActive ? "text-accent" : require_highlight.OPT_TEXT_PRIMARY),
 										children: conversation.title
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "flex shrink-0 items-center gap-1.5",
 										children: [conversation.unread && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "bg-accent h-2 w-2 rounded-full" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
-											className: require_pagination.cn("text-[11px]", require_pagination.OPT_TEXT_TERTIARY),
+											className: require_highlight.cn("text-[11px]", require_highlight.OPT_TEXT_TERTIARY),
 											dateTime: conversation.timestamp,
 											children: formatTimestamp(conversation.timestamp, isHydrated ? /* @__PURE__ */ new Date() : null)
 										})]
 									})]
 								}),
 								conversation.lastMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: require_pagination.cn("mt-0.5 truncate text-xs", "text-text-secondary"),
+									className: require_highlight.cn("mt-0.5 truncate text-xs", "text-text-secondary"),
 									children: conversation.lastMessage
 								})
 							]
@@ -7208,12 +7214,12 @@ function ChatSidebar({ conversations, activeConversationId, onConversationSelect
 }
 function formatTimestamp(timestamp, now) {
 	const date = new Date(timestamp);
-	if (!now) return require_shader_surface.formatOptShortDate(date);
+	if (!now) return require_key_pad_menu.formatOptShortDate(date);
 	const diffMs = now.getTime() - date.getTime();
 	const diffDays = Math.floor(diffMs / 864e5);
-	if (diffMs >= 0 && diffDays === 0) return require_shader_surface.formatOptTime(date);
+	if (diffMs >= 0 && diffDays === 0) return require_key_pad_menu.formatOptTime(date);
 	if (diffMs >= 0 && diffDays < 7) return `${diffDays}d`;
-	return require_shader_surface.formatOptShortDate(date);
+	return require_key_pad_menu.formatOptShortDate(date);
 }
 ChatSidebar.displayName = "ChatSidebar";
 //#endregion
@@ -7231,8 +7237,8 @@ const defaultLabels$1 = {
 /** Renders the chat input component. */
 function ChatInput({ value: controlledValue, defaultValue = "", onChange, onSend, onFileAttach, models, selectedModel, onModelChange, stylePresets, selectedStyle, onStyleChange, disabled = false, maxRows = 6, showHint = true, labels: customLabels, className }) {
 	var _models$, _models$find$label, _models$find, _stylePresets$, _stylePresets$find$la, _stylePresets$find;
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$1), customLabels);
-	const [value, setValue] = require_pagination.useControlledState(defaultValue, controlledValue, onChange);
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$1), customLabels);
+	const [value, setValue] = require_highlight.useControlledState(defaultValue, controlledValue, onChange);
 	const textareaRef = (0, react.useRef)(null);
 	const hasToolbar = models && models.length > 0 || stylePresets && stylePresets.length > 0;
 	(0, react.useLayoutEffect)(() => {
@@ -7260,48 +7266,48 @@ function ChatInput({ value: controlledValue, defaultValue = "", onChange, onSend
 		}
 	}, [handleSend]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_pagination.cn("gap-element flex flex-col", className),
+		className: require_highlight.cn("gap-element flex flex-col", className),
 		"data-opt-id": "M8KX1",
 		"data-opt-slug": "chat-input.ChatInput",
 		children: [hasToolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "gap-element flex items-center",
-			children: [models && models.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectRoot, {
+			children: [models && models.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
 				value: selectedModel !== null && selectedModel !== void 0 ? selectedModel : (_models$ = models[0]) === null || _models$ === void 0 ? void 0 : _models$.id,
 				onValueChange: (v) => onModelChange === null || onModelChange === void 0 ? void 0 : onModelChange(v),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectTrigger, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectTrigger, {
 					minWidth: 120,
 					className: "h-8 text-xs",
 					children: (_models$find$label = (_models$find = models.find((m) => {
 						var _models$2;
 						return m.id === (selectedModel !== null && selectedModel !== void 0 ? selectedModel : (_models$2 = models[0]) === null || _models$2 === void 0 ? void 0 : _models$2.id);
 					})) === null || _models$find === void 0 ? void 0 : _models$find.label) !== null && _models$find$label !== void 0 ? _models$find$label : labels.modelLabel
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, { children: models.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectItem, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, { children: models.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectItem, {
 					value: model.id,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "text-sm",
 						children: model.label
 					}), model.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: require_pagination.cn("text-xs", "text-text-tertiary"),
+						className: require_highlight.cn("text-xs", "text-text-tertiary"),
 						children: model.description
 					})] })
 				}, model.id)) })]
-			}), stylePresets && stylePresets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectRoot, {
+			}), stylePresets && stylePresets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
 				value: selectedStyle !== null && selectedStyle !== void 0 ? selectedStyle : (_stylePresets$ = stylePresets[0]) === null || _stylePresets$ === void 0 ? void 0 : _stylePresets$.id,
 				onValueChange: (v) => onStyleChange === null || onStyleChange === void 0 ? void 0 : onStyleChange(v),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectTrigger, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectTrigger, {
 					minWidth: 100,
 					className: "h-8 text-xs",
 					children: (_stylePresets$find$la = (_stylePresets$find = stylePresets.find((s) => {
 						var _stylePresets$2;
 						return s.id === (selectedStyle !== null && selectedStyle !== void 0 ? selectedStyle : (_stylePresets$2 = stylePresets[0]) === null || _stylePresets$2 === void 0 ? void 0 : _stylePresets$2.id);
 					})) === null || _stylePresets$find === void 0 ? void 0 : _stylePresets$find.label) !== null && _stylePresets$find$la !== void 0 ? _stylePresets$find$la : labels.styleLabel
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, { children: stylePresets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectItem, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, { children: stylePresets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectItem, {
 					value: preset.id,
 					children: preset.label
 				}, preset.id)) })]
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_pagination.cn("bg-surface rounded-lg", require_pagination.OPT_BORDER, "focus-within:ring-ring focus-within:ring-offset-ring-offset focus-within:ring-2 focus-within:ring-offset-1"),
+			className: require_highlight.cn("bg-surface rounded-lg", require_highlight.OPT_BORDER, "focus-within:ring-ring focus-within:ring-offset-ring-offset focus-within:ring-2 focus-within:ring-offset-1"),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 				ref: textareaRef,
 				value,
@@ -7310,14 +7316,14 @@ function ChatInput({ value: controlledValue, defaultValue = "", onChange, onSend
 				placeholder: labels.placeholder,
 				disabled,
 				rows: 1,
-				className: require_pagination.cn("text-text-primary placeholder:text-text-tertiary focus-visible:ring-ring focus-visible:ring-offset-ring-offset w-full resize-none border-none bg-transparent px-4 pt-3 pb-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", "disabled:cursor-not-allowed disabled:opacity-50"),
+				className: require_highlight.cn("text-text-primary placeholder:text-text-tertiary focus-visible:ring-ring focus-visible:ring-offset-ring-offset w-full resize-none border-none bg-transparent px-4 pt-3 pb-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", "disabled:cursor-not-allowed disabled:opacity-50"),
 				"aria-label": labels.placeholder
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center justify-between px-3 pb-2",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "flex items-center gap-1",
-						children: onFileAttach && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+						children: onFileAttach && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
 							variant: "ghost",
 							size: "sm",
 							onClick: onFileAttach,
@@ -7340,14 +7346,14 @@ function ChatInput({ value: controlledValue, defaultValue = "", onChange, onSend
 						})
 					}),
 					showHint && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: require_pagination.cn("flex items-center gap-1 text-xs", "text-text-tertiary"),
+						className: require_highlight.cn("flex items-center gap-1 text-xs", "text-text-tertiary"),
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Kbd, { children: labels.shiftKey }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Kbd, { children: labels.enterKey }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Kbd, { children: labels.shiftKey }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Kbd, { children: labels.enterKey }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels.hint })
 						]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Button, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
 						size: "sm",
 						onClick: handleSend,
 						disabled: disabled || !value.trim(),
@@ -7390,7 +7396,7 @@ const defaultLabels = {
 };
 /** Renders the chat message list component. */
 function ChatMessageList({ messages, loading = false, renderContent, assistantAvatar, userName, showTimestamps = true, autoScroll = true, labels: customLabels, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels), customLabels), userName ? { userLabel: userName } : {});
+	const labels = require_highlight._objectSpread2(require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels), customLabels), userName ? { userLabel: userName } : {});
 	const scrollRef = (0, react.useRef)(null);
 	const [isUserScrolledUp, setIsUserScrolledUp] = (0, react.useState)(false);
 	const scrollToBottom = (0, react.useCallback)(() => {
@@ -7414,16 +7420,16 @@ function ChatMessageList({ messages, loading = false, renderContent, assistantAv
 		scrollToBottom
 	]);
 	if (messages.length === 0 && !loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_pagination.cn("flex flex-1 items-center justify-center", className),
+		className: require_highlight.cn("flex flex-1 items-center justify-center", className),
 		"data-opt-id": "YK725",
 		"data-opt-slug": "chat-message-list.ChatMessageList",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.EmptyState, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.EmptyState, {
 			title: labels.emptyTitle,
 			description: labels.emptyDescription
 		})
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.ScrollArea, {
-		className: require_pagination.cn("flex-1", className),
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.ScrollArea, {
+		className: require_highlight.cn("flex-1", className),
 		"data-opt-id": "YK725",
 		"data-opt-slug": "chat-message-list.ChatMessageList",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -7436,27 +7442,27 @@ function ChatMessageList({ messages, loading = false, renderContent, assistantAv
 			children: [messages.map((message) => {
 				const isUser = message.role === "user";
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: require_pagination.cn("gap-element flex", isUser ? "flex-row-reverse" : "flex-row"),
-					children: [!isUser && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.Avatar, {
+					className: require_highlight.cn("gap-element flex", isUser ? "flex-row-reverse" : "flex-row"),
+					children: [!isUser && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.Avatar, {
 						name: labels.assistantLabel,
 						src: assistantAvatar,
 						size: "sm",
 						className: "mt-1 shrink-0"
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: require_pagination.cn("max-w-[80%] rounded-2xl px-4 py-2.5", isUser ? "bg-accent text-accent-fg rounded-tr-sm" : "bg-surface-input text-text-primary rounded-tl-sm"),
+						className: require_highlight.cn("max-w-[80%] rounded-2xl px-4 py-2.5", isUser ? "bg-accent text-accent-fg rounded-tr-sm" : "bg-surface-input text-text-primary rounded-tl-sm"),
 						children: [renderContent ? renderContent(message) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							className: "text-sm whitespace-pre-wrap",
 							children: message.content
 						}), showTimestamps && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
 							dateTime: message.timestamp,
-							className: require_pagination.cn("mt-1 block text-[11px]", isUser ? "text-accent-fg/70" : "text-text-tertiary"),
+							className: require_highlight.cn("mt-1 block text-[11px]", isUser ? "text-accent-fg/70" : "text-text-tertiary"),
 							children: formatMessageTime(message.timestamp)
 						})]
 					})]
 				}, message.id);
 			}), loading && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "gap-element flex items-start",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shader_surface.Avatar, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.Avatar, {
 					name: labels.assistantLabel,
 					src: assistantAvatar,
 					size: "sm",
@@ -7479,7 +7485,7 @@ function ChatMessageList({ messages, loading = false, renderContent, assistantAv
 	});
 }
 function formatMessageTime(timestamp) {
-	return require_shader_surface.formatOptTime(timestamp);
+	return require_key_pad_menu.formatOptTime(timestamp);
 }
 ChatMessageList.displayName = "ChatMessageList";
 //#endregion
@@ -8025,12 +8031,12 @@ components/
 }
 /** Renders the design guide panel component. */
 function DesignGuidePanel({ className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.DisclosureRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DisclosureRoot, {
 		"data-opt-id": "65F6W",
 		"data-opt-slug": "design-guide-panel.DesignGuidePanel",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_pagination.cn("border-border bg-surface rounded-xl border", className),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.DisclosureTrigger, {
+			className: require_highlight.cn("border-border bg-surface rounded-xl border", className),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.DisclosureTrigger, {
 				className: "hover:bg-bg-subtle data-[focus-visible]:ring-ring flex w-full items-center justify-between px-5 py-4 text-left transition-colors outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-inset",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
 					className: "text-text-primary text-sm font-semibold",
@@ -8050,7 +8056,7 @@ function DesignGuidePanel({ className }) {
 						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.jsxs)("div", {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.DisclosureContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "border-border gap-section flex flex-col border-t px-5 py-5",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimitiveComponentMap, {}),
@@ -8351,52 +8357,54 @@ function matchesQueryObject(query, row, options = {}) {
 }
 //#endregion
 exports.ALL_COMPOUND_THEMES = ALL_COMPOUND_THEMES;
-exports.AccordionContent = require_shader_surface.AccordionContent;
-exports.AccordionItem = require_shader_surface.AccordionItem;
-exports.AccordionRoot = require_shader_surface.AccordionRoot;
-exports.AccordionTrigger = require_shader_surface.AccordionTrigger;
+exports.AccordionContent = require_key_pad_menu.AccordionContent;
+exports.AccordionItem = require_key_pad_menu.AccordionItem;
+exports.AccordionRoot = require_key_pad_menu.AccordionRoot;
+exports.AccordionTrigger = require_key_pad_menu.AccordionTrigger;
 exports.ActivityFeed = ActivityFeed;
-exports.Alert = require_pagination.Alert;
+exports.Alert = require_highlight.Alert;
 exports.AlertBuilder = AlertBuilder;
-exports.AlertDialogPanel = require_pagination.AlertDialogPanel;
+exports.AlertDialogPanel = require_highlight.AlertDialogPanel;
 exports.AppMenubar = require_field_sidebar.AppMenubar;
 exports.AppShell = AppShell;
 exports.AsyncCombobox = AsyncCombobox;
 exports.AuditLog = AuditLog;
 exports.AuditTimeline = AuditTimeline;
 exports.AuthForm = AuthForm;
-exports.Avatar = require_shader_surface.Avatar;
-exports.AvatarGroup = require_shader_surface.AvatarGroup;
-exports.Badge = require_pagination.Badge;
-exports.BlockLayout = require_shader_surface.BlockLayout;
+exports.Avatar = require_key_pad_menu.Avatar;
+exports.AvatarGroup = require_key_pad_menu.AvatarGroup;
+exports.Badge = require_highlight.Badge;
+exports.BlockLayout = require_key_pad_menu.BlockLayout;
 exports.BranchSelect = require_field_sidebar.BranchSelect;
-exports.Breadcrumb = require_shader_surface.Breadcrumb;
+exports.Breadcrumb = require_key_pad_menu.Breadcrumb;
 exports.BulkActions = BulkActions;
-exports.Button = require_pagination.Button;
+exports.Button = require_highlight.Button;
 exports.COLOR_PRESETS = COLOR_PRESETS;
-exports.Card = require_shader_surface.Card;
-exports.CardContent = require_shader_surface.CardContent;
-exports.CardDescription = require_shader_surface.CardDescription;
-exports.CardFooter = require_shader_surface.CardFooter;
-exports.CardHeader = require_shader_surface.CardHeader;
-exports.CardTitle = require_shader_surface.CardTitle;
+exports.Card = require_key_pad_menu.Card;
+exports.CardContent = require_key_pad_menu.CardContent;
+exports.CardDescription = require_key_pad_menu.CardDescription;
+exports.CardFooter = require_key_pad_menu.CardFooter;
+exports.CardHeader = require_key_pad_menu.CardHeader;
+exports.CardTitle = require_key_pad_menu.CardTitle;
 exports.ChatInput = ChatInput;
 exports.ChatMessageList = ChatMessageList;
 exports.ChatSidebar = ChatSidebar;
-exports.Checkbox = require_pagination.Checkbox;
-exports.CheckboxGroup = require_pagination.CheckboxGroup;
-exports.CircularProgress = require_shader_surface.CircularProgress;
+exports.Checkbox = require_highlight.Checkbox;
+exports.CheckboxGroup = require_highlight.CheckboxGroup;
+exports.CircularProgress = require_key_pad_menu.CircularProgress;
 exports.CodeDiffViewer = CodeDiffViewer;
 exports.CodeSnippetViewer = CodeSnippetViewer;
-exports.ColorPicker = require_pagination.ColorPicker;
+exports.ColorPaletteDisplay = require_key_pad_menu.ColorPaletteDisplay;
+exports.ColorPalettePicker = require_key_pad_menu.ColorPalettePicker;
+exports.ColorPicker = require_highlight.ColorPicker;
 exports.ColumnToggler = ColumnToggler;
-exports.ComboboxEmpty = require_pagination.ComboboxEmpty;
-exports.ComboboxGroup = require_pagination.ComboboxGroup;
-exports.ComboboxGroupLabel = require_pagination.ComboboxGroupLabel;
-exports.ComboboxInput = require_pagination.ComboboxInput;
-exports.ComboboxItem = require_pagination.ComboboxItem;
-exports.ComboboxPopover = require_pagination.ComboboxPopover;
-exports.ComboboxRoot = require_pagination.ComboboxRoot;
+exports.ComboboxEmpty = require_highlight.ComboboxEmpty;
+exports.ComboboxGroup = require_highlight.ComboboxGroup;
+exports.ComboboxGroupLabel = require_highlight.ComboboxGroupLabel;
+exports.ComboboxInput = require_highlight.ComboboxInput;
+exports.ComboboxItem = require_highlight.ComboboxItem;
+exports.ComboboxPopover = require_highlight.ComboboxPopover;
+exports.ComboboxRoot = require_highlight.ComboboxRoot;
 exports.Command = require_field_sidebar.Command;
 exports.CommandDialog = require_field_sidebar.CommandDialog;
 exports.CommandEmpty = require_field_sidebar.CommandEmpty;
@@ -8413,45 +8421,45 @@ exports.Composite = _reopt_ai_opt_ui_primitives.Composite;
 exports.CompositeItem = _reopt_ai_opt_ui_primitives.CompositeItem;
 exports.CompositeProvider = _reopt_ai_opt_ui_primitives.CompositeProvider;
 exports.CompositeRow = _reopt_ai_opt_ui_primitives.CompositeRow;
-exports.CompositeZone = require_pagination.CompositeZone;
-exports.ConditionBuilder = require_shader_surface.ConditionBuilder;
+exports.CompositeZone = require_highlight.CompositeZone;
+exports.ConditionBuilder = require_key_pad_menu.ConditionBuilder;
 exports.ConfirmDialog = ConfirmDialog;
 exports.ConnectionIndicator = ConnectionIndicator;
-exports.Container = require_shader_surface.Container;
+exports.Container = require_key_pad_menu.Container;
 exports.ContentTabs = require_field_sidebar.ContentTabs;
-exports.DEFAULT_PRESETS = require_pagination.DEFAULT_PRESETS;
+exports.DEFAULT_PRESETS = require_highlight.DEFAULT_PRESETS;
 exports.DEFAULT_TIME_PRESETS = require_field_sidebar.DEFAULT_TIME_PRESETS;
 exports.DashboardGrid = require_field_sidebar.DashboardGrid;
 exports.DataImportWizard = DataImportWizard;
 exports.DataTable = require_field_sidebar.DataTable;
-exports.DateRangePicker = require_pagination.DateRangePicker;
+exports.DateRangePicker = require_highlight.DateRangePicker;
 exports.DeploymentTimeline = require_field_sidebar.DeploymentTimeline;
 exports.DesignGuidePanel = DesignGuidePanel;
-exports.DialogBody = require_pagination.DialogBody;
-exports.DialogDescription = require_pagination.DialogDescription;
-exports.DialogDisclosure = require_pagination.DialogDisclosure;
-exports.DialogDismiss = require_pagination.DialogDismiss;
-exports.DialogFooter = require_pagination.DialogFooter;
-exports.DialogHeader = require_pagination.DialogHeader;
-exports.DialogHeading = require_pagination.DialogHeading;
-exports.DialogPanel = require_pagination.DialogPanel;
-exports.DialogRoot = require_pagination.DialogRoot;
-exports.DisclosureContent = require_pagination.DisclosureContent;
-exports.DisclosureRoot = require_pagination.DisclosureRoot;
-exports.DisclosureTrigger = require_pagination.DisclosureTrigger;
+exports.DialogBody = require_highlight.DialogBody;
+exports.DialogDescription = require_highlight.DialogDescription;
+exports.DialogDisclosure = require_highlight.DialogDisclosure;
+exports.DialogDismiss = require_highlight.DialogDismiss;
+exports.DialogFooter = require_highlight.DialogFooter;
+exports.DialogHeader = require_highlight.DialogHeader;
+exports.DialogHeading = require_highlight.DialogHeading;
+exports.DialogPanel = require_highlight.DialogPanel;
+exports.DialogRoot = require_highlight.DialogRoot;
+exports.DisclosureContent = require_highlight.DisclosureContent;
+exports.DisclosureRoot = require_highlight.DisclosureRoot;
+exports.DisclosureTrigger = require_highlight.DisclosureTrigger;
 exports.DomainTable = require_field_sidebar.DomainTable;
-exports.DrawerClose = require_shader_surface.DrawerClose;
-exports.DrawerPanel = require_shader_surface.DrawerPanel;
-exports.DrawerRoot = require_shader_surface.DrawerRoot;
-exports.DropdownContent = require_shader_surface.DropdownContent;
-exports.DropdownItem = require_shader_surface.DropdownItem;
-exports.DropdownMenu = require_shader_surface.DropdownMenu;
-exports.DropdownSeparator = require_shader_surface.DropdownSeparator;
-exports.DropdownTrigger = require_shader_surface.DropdownTrigger;
+exports.DrawerClose = require_key_pad_menu.DrawerClose;
+exports.DrawerPanel = require_key_pad_menu.DrawerPanel;
+exports.DrawerRoot = require_key_pad_menu.DrawerRoot;
+exports.DropdownContent = require_key_pad_menu.DropdownContent;
+exports.DropdownItem = require_key_pad_menu.DropdownItem;
+exports.DropdownMenu = require_key_pad_menu.DropdownMenu;
+exports.DropdownSeparator = require_key_pad_menu.DropdownSeparator;
+exports.DropdownTrigger = require_key_pad_menu.DropdownTrigger;
 exports.DynamicFieldForm = DynamicFieldForm;
 exports.EMPTY_QUERY = require_field_sidebar.EMPTY_QUERY;
 exports.EditorToolbar = require_field_sidebar.EditorToolbar;
-exports.EmptyState = require_pagination.EmptyState;
+exports.EmptyState = require_highlight.EmptyState;
 exports.EnvPanel = require_field_sidebar.EnvPanel;
 exports.ErrorBoundary = ErrorBoundary;
 exports.EventIcon = EventIcon;
@@ -8463,69 +8471,79 @@ Object.defineProperty(exports, "EventSparkline", {
 	}
 });
 exports.ExportButton = ExportButton;
+exports.Expression = require_key_pad_menu.Expression;
+exports.ExpressionGroup = require_key_pad_menu.ExpressionGroup;
+exports.FIELD_TYPE_TOKENS = require_highlight.FIELD_TYPE_TOKENS;
 exports.FORCE_LIGHT_PRESETS = FORCE_LIGHT_PRESETS;
 exports.FORCE_LIGHT_PRESET_IDS = FORCE_LIGHT_PRESET_IDS;
+exports.Facet = require_key_pad_menu.Facet;
+exports.FacetGroup = require_key_pad_menu.FacetGroup;
 exports.FailureList = require_field_sidebar.FailureList;
 exports.FaqAccordion = require_field_sidebar.FaqAccordion;
 exports.FeatureFlagPanel = FeatureFlagPanel;
 exports.FieldSidebar = require_field_sidebar.FieldSidebar;
+exports.FieldToken = require_highlight.FieldToken;
 exports.FileUploadForm = FileUploadForm;
 exports.FilterBar = FilterBar;
 exports.FloatingActionBar = FloatingActionBar;
-exports.FormCheckbox = require_pagination.FormCheckbox;
-exports.FormColorPicker = require_pagination.FormColorPicker;
-exports.FormControl = require_pagination.FormControl;
-exports.FormDateRangePicker = require_pagination.FormDateRangePicker;
-exports.FormDescription = require_pagination.FormDescription;
-exports.FormError = require_pagination.FormError;
-exports.FormField = require_pagination.FormField;
-exports.FormGroup = require_pagination.FormGroup;
-exports.FormGroupLabel = require_pagination.FormGroupLabel;
-exports.FormIconPicker = require_pagination.FormIconPicker;
-exports.FormInput = require_pagination.FormInput;
-exports.FormLabel = require_pagination.FormLabel;
-exports.FormNumberInput = require_pagination.FormNumberInput;
-exports.FormProvider = require_pagination.FormProvider;
-exports.FormPush = require_pagination.FormPush;
-exports.FormRadio = require_pagination.FormRadio;
-exports.FormRadioGroup = require_pagination.FormRadioGroup;
-exports.FormRemove = require_pagination.FormRemove;
-exports.FormReset = require_pagination.FormReset;
-exports.FormRoot = require_pagination.FormRoot;
-exports.FormSelect = require_pagination.FormSelect;
-exports.FormSelectItem = require_pagination.FormSelectItem;
-exports.FormSelectPopover = require_pagination.FormSelectPopover;
-exports.FormSlider = require_pagination.FormSlider;
-exports.FormStarRating = require_pagination.FormStarRating;
-exports.FormSubmit = require_pagination.FormSubmit;
-exports.FormSwitch = require_pagination.FormSwitch;
-exports.FormTagInput = require_pagination.FormTagInput;
-exports.FormTextarea = require_pagination.FormTextarea;
+exports.FormCheckbox = require_highlight.FormCheckbox;
+exports.FormColorPicker = require_highlight.FormColorPicker;
+exports.FormControl = require_highlight.FormControl;
+exports.FormDateRangePicker = require_highlight.FormDateRangePicker;
+exports.FormDescription = require_highlight.FormDescription;
+exports.FormError = require_highlight.FormError;
+exports.FormField = require_highlight.FormField;
+exports.FormGroup = require_highlight.FormGroup;
+exports.FormGroupLabel = require_highlight.FormGroupLabel;
+exports.FormIconPicker = require_highlight.FormIconPicker;
+exports.FormInput = require_highlight.FormInput;
+exports.FormLabel = require_highlight.FormLabel;
+exports.FormNumberInput = require_highlight.FormNumberInput;
+exports.FormProvider = require_highlight.FormProvider;
+exports.FormPush = require_highlight.FormPush;
+exports.FormRadio = require_highlight.FormRadio;
+exports.FormRadioGroup = require_highlight.FormRadioGroup;
+exports.FormRemove = require_highlight.FormRemove;
+exports.FormReset = require_highlight.FormReset;
+exports.FormRoot = require_highlight.FormRoot;
+exports.FormSelect = require_highlight.FormSelect;
+exports.FormSelectItem = require_highlight.FormSelectItem;
+exports.FormSelectPopover = require_highlight.FormSelectPopover;
+exports.FormSlider = require_highlight.FormSlider;
+exports.FormStarRating = require_highlight.FormStarRating;
+exports.FormSubmit = require_highlight.FormSubmit;
+exports.FormSwitch = require_highlight.FormSwitch;
+exports.FormTagInput = require_highlight.FormTagInput;
+exports.FormTextarea = require_highlight.FormTextarea;
 exports.GENERATED_THEME_ID_DEFAULT = GENERATED_THEME_ID_DEFAULT;
 exports.GLOBAL_THEME_STYLE_ID = GLOBAL_THEME_STYLE_ID;
-exports.Heading = require_shader_surface.Heading;
-exports.IconPicker = require_pagination.IconPicker;
+exports.Heading = require_key_pad_menu.Heading;
+exports.Highlight = require_highlight.Highlight;
+exports.IconPicker = require_highlight.IconPicker;
+exports.InlineEdit = require_key_pad_menu.InlineEdit;
 exports.InlineEditTable = InlineEditTable;
-exports.Input = require_pagination.Input;
+exports.Input = require_highlight.Input;
 exports.InsightsPanel = InsightsPanel;
 exports.KanbanBoard = KanbanBoard;
-exports.Kbd = require_pagination.Kbd;
+exports.Kbd = require_highlight.Kbd;
+exports.KeyPadMenu = require_key_pad_menu.KeyPadMenu;
 exports.KeyValueEditor = require_field_sidebar.KeyValueEditor;
-exports.LoadingOverlay = require_shader_surface.LoadingOverlay;
+exports.LiveRegion = require_key_pad_menu.LiveRegion;
+exports.LoadingOverlay = require_key_pad_menu.LoadingOverlay;
 exports.LogTable = require_field_sidebar.LogTable;
-exports.Logo = require_shader_surface.Logo;
+exports.Logo = require_key_pad_menu.Logo;
 exports.MegaMenu = MegaMenu;
-exports.MenuButtonArrow = require_pagination.MenuButtonArrow;
-exports.MenuItem = require_pagination.MenuItem;
-exports.MenuItemCheckbox = require_pagination.MenuItemCheckbox;
-exports.MenuItemRadio = require_pagination.MenuItemRadio;
-exports.MenuPopover = require_pagination.MenuPopover;
-exports.MenuRoot = require_pagination.MenuRoot;
-exports.MenuSeparator = require_pagination.MenuSeparator;
-exports.MenuTrigger = require_pagination.MenuTrigger;
-exports.MenubarContainer = require_pagination.MenubarContainer;
-exports.MenubarRoot = require_pagination.MenubarRoot;
-exports.Meter = require_shader_surface.Meter;
+exports.MenuButtonArrow = require_highlight.MenuButtonArrow;
+exports.MenuItem = require_highlight.MenuItem;
+exports.MenuItemCheckbox = require_highlight.MenuItemCheckbox;
+exports.MenuItemRadio = require_highlight.MenuItemRadio;
+exports.MenuPopover = require_highlight.MenuPopover;
+exports.MenuRoot = require_highlight.MenuRoot;
+exports.MenuSeparator = require_highlight.MenuSeparator;
+exports.MenuTrigger = require_highlight.MenuTrigger;
+exports.MenubarContainer = require_highlight.MenubarContainer;
+exports.MenubarRoot = require_highlight.MenubarRoot;
+exports.Meter = require_key_pad_menu.Meter;
 Object.defineProperty(exports, "MetricsCard", {
 	enumerable: true,
 	get: function() {
@@ -8534,29 +8552,29 @@ Object.defineProperty(exports, "MetricsCard", {
 });
 exports.NotificationCenter = NotificationCenter;
 exports.NotificationToast = require_field_sidebar.NotificationToast;
-exports.NumberInput = require_pagination.NumberInput;
-exports.OPT_TEXT_PRIMARY = require_pagination.OPT_TEXT_PRIMARY;
-exports.OPT_TEXT_SECONDARY = require_pagination.OPT_TEXT_SECONDARY;
+exports.NumberInput = require_highlight.NumberInput;
+exports.OPT_TEXT_PRIMARY = require_highlight.OPT_TEXT_PRIMARY;
+exports.OPT_TEXT_SECONDARY = require_highlight.OPT_TEXT_SECONDARY;
 exports.OptThemeControllerContext = OptThemeControllerContext;
 exports.OptThemeProvider = OptThemeProvider;
-exports.OtpField = require_shader_surface.OtpField;
+exports.OtpField = require_key_pad_menu.OtpField;
 exports.POPULAR_ICONS = POPULAR_ICONS;
 exports.PageAside = PageAside;
-exports.PageHeader = require_shader_surface.PageHeader;
-exports.Pagination = require_pagination.Pagination;
-exports.PopoverClose = require_pagination.PopoverClose;
-exports.PopoverContent = require_pagination.PopoverContent;
-exports.PopoverRoot = require_pagination.PopoverRoot;
-exports.PopoverTrigger = require_pagination.PopoverTrigger;
-exports.Progress = require_shader_surface.Progress;
+exports.PageHeader = require_key_pad_menu.PageHeader;
+exports.Pagination = require_highlight.Pagination;
+exports.PopoverClose = require_highlight.PopoverClose;
+exports.PopoverContent = require_highlight.PopoverContent;
+exports.PopoverRoot = require_highlight.PopoverRoot;
+exports.PopoverTrigger = require_highlight.PopoverTrigger;
+exports.Progress = require_key_pad_menu.Progress;
 exports.ProjectSwitcher = require_field_sidebar.ProjectSwitcher;
 exports.PromptTemplate = PromptTemplate;
 exports.PropertyExplorer = PropertyExplorer;
 exports.QueryBar = require_field_sidebar.QueryBar;
 exports.QueryResultsTable = QueryResultsTable;
 exports.QuickActions = QuickActions;
-exports.Radio = require_shader_surface.Radio;
-exports.RadioGroup = require_shader_surface.RadioGroup;
+exports.Radio = require_key_pad_menu.Radio;
+exports.RadioGroup = require_key_pad_menu.RadioGroup;
 exports.ReportBuilder = ReportBuilder;
 Object.defineProperty(exports, "ReportWidget", {
 	enumerable: true,
@@ -8564,75 +8582,77 @@ Object.defineProperty(exports, "ReportWidget", {
 		return _reopt_ai_opt_charts.ReportWidget;
 	}
 });
-exports.ResizableHandle = require_shader_surface.ResizableHandle;
-exports.ResizablePanel = require_shader_surface.ResizablePanel;
-exports.ResizablePanelGroup = require_shader_surface.ResizablePanelGroup;
+exports.ResizableHandle = require_key_pad_menu.ResizableHandle;
+exports.ResizablePanel = require_key_pad_menu.ResizablePanel;
+exports.ResizablePanelGroup = require_key_pad_menu.ResizablePanelGroup;
 exports.RichTextEditor = RichTextEditor;
 exports.RouteFocusManager = RouteFocusManager;
-exports.SHADER_OVERLAY_PARAM_KEYS = require_shader_surface.SHADER_OVERLAY_PARAM_KEYS;
-exports.SHADER_PARAM_FALLBACK = require_shader_surface.SHADER_PARAM_FALLBACK;
-exports.SHADER_PARAM_KEYS = require_shader_surface.SHADER_PARAM_KEYS;
-exports.SHADER_PRESETS = require_shader_surface.SHADER_PRESETS;
-exports.SHADER_PRESET_IDS = require_shader_surface.SHADER_PRESET_IDS;
+exports.SHADER_OVERLAY_PARAM_KEYS = require_key_pad_menu.SHADER_OVERLAY_PARAM_KEYS;
+exports.SHADER_PARAM_FALLBACK = require_key_pad_menu.SHADER_PARAM_FALLBACK;
+exports.SHADER_PARAM_KEYS = require_key_pad_menu.SHADER_PARAM_KEYS;
+exports.SHADER_PRESETS = require_key_pad_menu.SHADER_PRESETS;
+exports.SHADER_PRESET_IDS = require_key_pad_menu.SHADER_PRESET_IDS;
 exports.SavedFilters = SavedFilters;
-exports.ScrollArea = require_shader_surface.ScrollArea;
+exports.ScrollArea = require_key_pad_menu.ScrollArea;
 exports.SearchCombobox = require_field_sidebar.SearchCombobox;
-exports.Section = require_shader_surface.Section;
+exports.Section = require_key_pad_menu.Section;
 exports.SegmentBuilder = SegmentBuilder;
-exports.SelectItem = require_pagination.SelectItem;
-exports.SelectLabel = require_pagination.SelectLabel;
-exports.SelectPopover = require_pagination.SelectPopover;
-exports.SelectRoot = require_pagination.SelectRoot;
-exports.SelectTrigger = require_pagination.SelectTrigger;
-exports.Separator = require_shader_surface.Separator;
+exports.SelectItem = require_highlight.SelectItem;
+exports.SelectLabel = require_highlight.SelectLabel;
+exports.SelectPopover = require_highlight.SelectPopover;
+exports.SelectRoot = require_highlight.SelectRoot;
+exports.SelectTrigger = require_highlight.SelectTrigger;
+exports.Separator = require_key_pad_menu.Separator;
 exports.SettingsForm = require_field_sidebar.SettingsForm;
-exports.ShaderSurface = require_shader_surface.ShaderSurface;
+exports.ShaderSurface = require_key_pad_menu.ShaderSurface;
 exports.Sidebar = Sidebar;
 exports.SidebarNav = require_field_sidebar.SidebarNav;
-exports.Skeleton = require_shader_surface.Skeleton;
-exports.SkeletonAvatar = require_shader_surface.SkeletonAvatar;
-exports.SkeletonCard = require_shader_surface.SkeletonCard;
-exports.SkeletonTable = require_shader_surface.SkeletonTable;
-exports.SkeletonText = require_shader_surface.SkeletonText;
-exports.Slider = require_pagination.Slider;
+exports.Skeleton = require_key_pad_menu.Skeleton;
+exports.SkeletonAvatar = require_key_pad_menu.SkeletonAvatar;
+exports.SkeletonCard = require_key_pad_menu.SkeletonCard;
+exports.SkeletonTable = require_key_pad_menu.SkeletonTable;
+exports.SkeletonText = require_key_pad_menu.SkeletonText;
+exports.Slider = require_highlight.Slider;
 exports.SpatialNavProvider = SpatialNavProvider;
-exports.Spinner = require_pagination.Spinner;
+exports.Spinner = require_highlight.Spinner;
 exports.SqlEditor = SqlEditor;
-exports.StarRating = require_pagination.StarRating;
-exports.StatCard = require_pagination.StatCard;
+exports.StarRating = require_highlight.StarRating;
+exports.StatCard = require_highlight.StatCard;
 exports.StatusSelect = require_field_sidebar.StatusSelect;
-exports.StepBuilder = require_shader_surface.StepBuilder;
+exports.StepBuilder = require_key_pad_menu.StepBuilder;
 exports.SummaryRow = SummaryRow;
-exports.SurfaceLayout = require_shader_surface.BlockLayout;
-exports.Switch = require_shader_surface.Switch;
+exports.SurfaceLayout = require_key_pad_menu.BlockLayout;
+exports.Switch = require_key_pad_menu.Switch;
+exports.THEME_PALETTES = require_key_pad_menu.THEME_PALETTES;
 exports.THEME_PRESET_IDS = THEME_PRESET_IDS;
 exports.THEME_REGISTRY = THEME_REGISTRY;
 exports.THEME_SPEC_STORAGE_KEY = THEME_SPEC_STORAGE_KEY;
 exports.THEME_TOKENS_STORAGE_KEY = THEME_TOKENS_STORAGE_KEY;
-exports.Tab = require_pagination.Tab;
-exports.TabList = require_pagination.TabList;
-exports.TabPanel = require_pagination.TabPanel;
-exports.TabsRoot = require_pagination.TabsRoot;
-exports.TagInput = require_pagination.TagInput;
+exports.Tab = require_highlight.Tab;
+exports.TabList = require_highlight.TabList;
+exports.TabPanel = require_highlight.TabPanel;
+exports.TabsRoot = require_highlight.TabsRoot;
+exports.TagInput = require_highlight.TagInput;
 exports.TaskList = TaskList;
 exports.TeamMemberList = TeamMemberList;
 exports.TemplatePicker = TemplatePicker;
-exports.Text = require_shader_surface.Text;
-exports.Textarea = require_shader_surface.Textarea;
+exports.Text = require_key_pad_menu.Text;
+exports.TextTruncate = require_key_pad_menu.TextTruncate;
+exports.Textarea = require_key_pad_menu.Textarea;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.TimeRangeControl = require_field_sidebar.TimeRangeControl;
 exports.TimeRangeSelector = TimeRangeSelector;
 exports.TimeSeriesPanel = require_field_sidebar.TimeSeriesPanel;
 exports.ToastProvider = require_field_sidebar.ToastProvider;
-exports.Toggle = require_shader_surface.Toggle;
-exports.ToggleGroup = require_shader_surface.ToggleGroup;
-exports.ToolbarButton = require_pagination.ToolbarButton;
-exports.ToolbarContainer = require_pagination.ToolbarContainer;
-exports.ToolbarRoot = require_pagination.ToolbarRoot;
-exports.ToolbarSeparator = require_pagination.ToolbarSeparator;
-exports.Tooltip = require_pagination.Tooltip;
-exports.TooltipAnchor = require_pagination.TooltipAnchor;
-exports.TooltipProvider = require_pagination.TooltipProvider;
+exports.Toggle = require_key_pad_menu.Toggle;
+exports.ToggleGroup = require_key_pad_menu.ToggleGroup;
+exports.ToolbarButton = require_highlight.ToolbarButton;
+exports.ToolbarContainer = require_highlight.ToolbarContainer;
+exports.ToolbarRoot = require_highlight.ToolbarRoot;
+exports.ToolbarSeparator = require_highlight.ToolbarSeparator;
+exports.Tooltip = require_highlight.Tooltip;
+exports.TooltipAnchor = require_highlight.TooltipAnchor;
+exports.TooltipProvider = require_highlight.TooltipProvider;
 exports.TreeTable = TreeTable;
 Object.defineProperty(exports, "TrendChart", {
 	enumerable: true,
@@ -8641,7 +8661,7 @@ Object.defineProperty(exports, "TrendChart", {
 	}
 });
 exports.VerticalTabs = VerticalTabs;
-exports.VirtualList = require_shader_surface.VirtualList;
+exports.VirtualList = require_key_pad_menu.VirtualList;
 exports.WebhookConfig = WebhookConfig;
 exports.WidgetGrid = WidgetGrid;
 exports.WizardForm = WizardForm;
@@ -8649,12 +8669,12 @@ exports.WorkflowCanvas = require_field_sidebar.WorkflowCanvas;
 exports.addClause = require_field_sidebar.addClause;
 exports.applyCellAction = require_field_sidebar.applyCellAction;
 exports.buildTokenCache = buildTokenCache;
-exports.cn = require_pagination.cn;
+exports.cn = require_highlight.cn;
 exports.coerceThemeMode = coerceThemeMode;
 exports.computeGeneratedTokens = computeGeneratedTokens;
 exports.computeSpatialTargets = computeSpatialTargets;
-exports.createBlock = require_shader_surface.createBlock;
-exports.createSurface = require_shader_surface.createBlock;
+exports.createBlock = require_key_pad_menu.createBlock;
+exports.createSurface = require_key_pad_menu.createBlock;
 exports.createThemeBootScript = createThemeBootScript;
 exports.defineThemeOverrides = defineThemeOverrides;
 exports.describeClause = require_field_sidebar.describeClause;
@@ -8663,16 +8683,16 @@ exports.enComboboxLabels = enComboboxLabels;
 exports.enStarRatingLabels = enStarRatingLabels;
 exports.fieldValues = require_field_sidebar.fieldValues;
 exports.formatClause = require_field_sidebar.formatClause;
-exports.formatOptDateTime = require_shader_surface.formatOptDateTime;
-exports.formatOptNumber = require_shader_surface.formatOptNumber;
-exports.formatOptShortDate = require_shader_surface.formatOptShortDate;
-exports.formatOptTime = require_shader_surface.formatOptTime;
+exports.formatOptDateTime = require_key_pad_menu.formatOptDateTime;
+exports.formatOptNumber = require_key_pad_menu.formatOptNumber;
+exports.formatOptShortDate = require_key_pad_menu.formatOptShortDate;
+exports.formatOptTime = require_key_pad_menu.formatOptTime;
 exports.formatQuery = require_field_sidebar.formatQuery;
 exports.generatedTheme = generatedTheme;
 exports.getCompoundIdForSpec = getCompoundIdForSpec;
 exports.getCompoundTheme = getCompoundTheme;
-exports.getShaderFragment = require_shader_surface.getShaderFragment;
-exports.getShaderPreset = require_shader_surface.getShaderPreset;
+exports.getShaderFragment = require_key_pad_menu.getShaderFragment;
+exports.getShaderPreset = require_key_pad_menu.getShaderPreset;
 exports.getThemeDescriptor = getThemeDescriptor;
 exports.getTrappedContextRole = getTrappedContextRole;
 exports.isDescriptorSpec = isDescriptorSpec;
@@ -8681,9 +8701,9 @@ exports.isForceLightSpec = isForceLightSpec;
 exports.isGeneratedSpec = isGeneratedSpec;
 exports.isPresetSpec = isPresetSpec;
 exports.isThemePresetId = isThemePresetId;
-exports.koBreadcrumbLabels = require_pagination.koBreadcrumbLabels;
-exports.koComboboxLabels = require_pagination.koComboboxLabels;
-exports.koStarRatingLabels = require_pagination.koStarRatingLabels;
+exports.koBreadcrumbLabels = require_highlight.koBreadcrumbLabels;
+exports.koComboboxLabels = require_highlight.koComboboxLabels;
+exports.koStarRatingLabels = require_highlight.koStarRatingLabels;
 exports.matchesQuery = matchesQuery;
 exports.matchesQueryObject = matchesQueryObject;
 exports.parseQuery = require_field_sidebar.parseQuery;
@@ -8694,6 +8714,7 @@ exports.quoteValue = require_field_sidebar.quoteValue;
 exports.readStoredTheme = readStoredTheme;
 exports.removeClause = require_field_sidebar.removeClause;
 exports.resolveDescriptor = resolveDescriptor;
+exports.resolveFieldType = require_highlight.resolveFieldType;
 exports.resolveThemeMode = resolveThemeMode;
 exports.safeParseStoredSpec = safeParseStoredSpec;
 exports.safeParseStoredTokens = safeParseStoredTokens;
@@ -8704,11 +8725,11 @@ exports.serializeTokenBody = serializeTokenBody;
 exports.shouldSkipArrow = shouldSkipArrow;
 exports.toast = require_field_sidebar.toast;
 exports.useAutoRefresh = require_field_sidebar.useAutoRefresh;
-exports.useControlledState = require_pagination.useControlledState;
+exports.useControlledState = require_highlight.useControlledState;
 exports.useFieldValue = _reopt_ai_opt_ui_primitives.useFieldValue;
 exports.useFormContext = _reopt_ai_opt_ui_primitives.useFormContext;
 exports.useFormStore = _reopt_ai_opt_ui_primitives.useFormStore;
-exports.useInputId = require_pagination.useInputId;
+exports.useInputId = require_highlight.useInputId;
 exports.useOptTheme = useOptTheme;
 exports.useOptThemeController = useOptThemeController;
 exports.useOptionalOptTheme = useOptionalOptTheme;