@reopt-ai/opt-ui 1.13.0 → 1.15.0

package/dist/index.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_text_truncate = require("./text-truncate-BeYW6XZu.cjs");
-const require_key_pad_menu = require("./key-pad-menu-0KWOnELe.cjs");
-const require_field_sidebar = require("./field-sidebar-CxxSK4JO.cjs");
+const require_text_truncate = require("./text-truncate-gQhpMy-Z.cjs");
+const require_key_pad_menu = require("./key-pad-menu-Jaqxhx9P.cjs");
+const require_replay_player_layout = require("./replay-player-layout-Cmzptq89.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_text_truncate.__toESM(react, 1);
@@ -93,7 +93,7 @@ const _excluded = [
 	"disabled",
 	"onClick"
 ];
-const defaultLabels$33 = {
+const defaultLabels$34 = {
 	copy: "복사",
 	copied: "복사됨",
 	failed: "복사할 수 없습니다"
@@ -140,7 +140,7 @@ const stateTone = {
 */
 function CopyButton(_ref) {
 	let { value, variant = "icon", size = "md", feedbackDuration = 1500, onCopy, labels: customLabels, className, disabled, onClick } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded);
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$33), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$34), customLabels);
 	const [state, setState] = (0, react.useState)("idle");
 	const timer = (0, react.useRef)(null);
 	(0, react.useEffect)(() => () => {
@@ -265,7 +265,7 @@ function PageAside({ header, children, footer, widthClassName = "w-60", label, h
 PageAside.displayName = "PageAside";
 //#endregion
 //#region src/shells/task-list.tsx
-const defaultLabels$32 = {
+const defaultLabels$33 = {
 	title: "작업 목록",
 	emptyMessage: "작업이 없습니다",
 	completedOf: "{completed}/{total} 완료",
@@ -285,9 +285,9 @@ const defaultLabels$32 = {
 };
 /** Renders the task list component. */
 function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage, showSubtasks = false, maxItems, labels: customLabels, className }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$32), customLabels), {}, {
-		priority: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$32.priority), customLabels === null || customLabels === void 0 ? void 0 : customLabels.priority),
-		status: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$32.status), customLabels === null || customLabels === void 0 ? void 0 : customLabels.status)
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$33), customLabels), {}, {
+		priority: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$33.priority), customLabels === null || customLabels === void 0 ? void 0 : customLabels.priority),
+		status: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$33.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;
@@ -445,7 +445,7 @@ function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage,
 }
 //#endregion
 //#region src/shells/activity-feed.tsx
-const defaultLabels$31 = {
+const defaultLabels$32 = {
 	title: "활동 피드",
 	emptyMessage: "활동이 없습니다",
 	moreItems: "{count}개 더 보기",
@@ -495,24 +495,24 @@ const variantBorder = {
 function ActivityFeed({ activities, title, maxItems, onActivityClick, onShowMore, emptyMessage, labels: customLabels, locale = "ko-KR", loading = false, layout = "list", renderActions, className }) {
 	var _customLabels$timeAgo, _customLabels$timeAgo2, _customLabels$timeAgo3, _customLabels$timeAgo4, _customLabels$timeAgo5, _customLabels$timeAgo6, _customLabels$timeAgo7, _customLabels$timeAgo8, _customLabels$activit, _customLabels$activit2, _customLabels$activit3, _customLabels$activit4, _customLabels$activit5, _customLabels$activit6, _customLabels$activit7, _customLabels$activit8, _customLabels$activit9, _customLabels$activit10, _customLabels$activit11, _customLabels$activit12, _customLabels$activit13, _customLabels$activit14, _customLabels$title, _customLabels$emptyMe, _customLabels$moreIte;
 	const mergedTimeAgo = {
-		justNow: (_customLabels$timeAgo = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo2 = customLabels.timeAgo) === null || _customLabels$timeAgo2 === void 0 ? void 0 : _customLabels$timeAgo2.justNow) !== null && _customLabels$timeAgo !== void 0 ? _customLabels$timeAgo : defaultLabels$31.timeAgo.justNow,
-		minutesAgo: (_customLabels$timeAgo3 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo4 = customLabels.timeAgo) === null || _customLabels$timeAgo4 === void 0 ? void 0 : _customLabels$timeAgo4.minutesAgo) !== null && _customLabels$timeAgo3 !== void 0 ? _customLabels$timeAgo3 : defaultLabels$31.timeAgo.minutesAgo,
-		hoursAgo: (_customLabels$timeAgo5 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo6 = customLabels.timeAgo) === null || _customLabels$timeAgo6 === void 0 ? void 0 : _customLabels$timeAgo6.hoursAgo) !== null && _customLabels$timeAgo5 !== void 0 ? _customLabels$timeAgo5 : defaultLabels$31.timeAgo.hoursAgo,
-		daysAgo: (_customLabels$timeAgo7 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo8 = customLabels.timeAgo) === null || _customLabels$timeAgo8 === void 0 ? void 0 : _customLabels$timeAgo8.daysAgo) !== null && _customLabels$timeAgo7 !== void 0 ? _customLabels$timeAgo7 : defaultLabels$31.timeAgo.daysAgo
+		justNow: (_customLabels$timeAgo = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo2 = customLabels.timeAgo) === null || _customLabels$timeAgo2 === void 0 ? void 0 : _customLabels$timeAgo2.justNow) !== null && _customLabels$timeAgo !== void 0 ? _customLabels$timeAgo : defaultLabels$32.timeAgo.justNow,
+		minutesAgo: (_customLabels$timeAgo3 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo4 = customLabels.timeAgo) === null || _customLabels$timeAgo4 === void 0 ? void 0 : _customLabels$timeAgo4.minutesAgo) !== null && _customLabels$timeAgo3 !== void 0 ? _customLabels$timeAgo3 : defaultLabels$32.timeAgo.minutesAgo,
+		hoursAgo: (_customLabels$timeAgo5 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo6 = customLabels.timeAgo) === null || _customLabels$timeAgo6 === void 0 ? void 0 : _customLabels$timeAgo6.hoursAgo) !== null && _customLabels$timeAgo5 !== void 0 ? _customLabels$timeAgo5 : defaultLabels$32.timeAgo.hoursAgo,
+		daysAgo: (_customLabels$timeAgo7 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo8 = customLabels.timeAgo) === null || _customLabels$timeAgo8 === void 0 ? void 0 : _customLabels$timeAgo8.daysAgo) !== null && _customLabels$timeAgo7 !== void 0 ? _customLabels$timeAgo7 : defaultLabels$32.timeAgo.daysAgo
 	};
 	const mergedActivityVerbs = {
-		created: (_customLabels$activit = customLabels === null || customLabels === void 0 || (_customLabels$activit2 = customLabels.activityVerbs) === null || _customLabels$activit2 === void 0 ? void 0 : _customLabels$activit2.created) !== null && _customLabels$activit !== void 0 ? _customLabels$activit : defaultLabels$31.activityVerbs.created,
-		updated: (_customLabels$activit3 = customLabels === null || customLabels === void 0 || (_customLabels$activit4 = customLabels.activityVerbs) === null || _customLabels$activit4 === void 0 ? void 0 : _customLabels$activit4.updated) !== null && _customLabels$activit3 !== void 0 ? _customLabels$activit3 : defaultLabels$31.activityVerbs.updated,
-		completed: (_customLabels$activit5 = customLabels === null || customLabels === void 0 || (_customLabels$activit6 = customLabels.activityVerbs) === null || _customLabels$activit6 === void 0 ? void 0 : _customLabels$activit6.completed) !== null && _customLabels$activit5 !== void 0 ? _customLabels$activit5 : defaultLabels$31.activityVerbs.completed,
-		commented: (_customLabels$activit7 = customLabels === null || customLabels === void 0 || (_customLabels$activit8 = customLabels.activityVerbs) === null || _customLabels$activit8 === void 0 ? void 0 : _customLabels$activit8.commented) !== null && _customLabels$activit7 !== void 0 ? _customLabels$activit7 : defaultLabels$31.activityVerbs.commented,
-		assigned: (_customLabels$activit9 = customLabels === null || customLabels === void 0 || (_customLabels$activit10 = customLabels.activityVerbs) === null || _customLabels$activit10 === void 0 ? void 0 : _customLabels$activit10.assigned) !== null && _customLabels$activit9 !== void 0 ? _customLabels$activit9 : defaultLabels$31.activityVerbs.assigned,
-		deployed: (_customLabels$activit11 = customLabels === null || customLabels === void 0 || (_customLabels$activit12 = customLabels.activityVerbs) === null || _customLabels$activit12 === void 0 ? void 0 : _customLabels$activit12.deployed) !== null && _customLabels$activit11 !== void 0 ? _customLabels$activit11 : defaultLabels$31.activityVerbs.deployed,
-		merged: (_customLabels$activit13 = customLabels === null || customLabels === void 0 || (_customLabels$activit14 = customLabels.activityVerbs) === null || _customLabels$activit14 === void 0 ? void 0 : _customLabels$activit14.merged) !== null && _customLabels$activit13 !== void 0 ? _customLabels$activit13 : defaultLabels$31.activityVerbs.merged
+		created: (_customLabels$activit = customLabels === null || customLabels === void 0 || (_customLabels$activit2 = customLabels.activityVerbs) === null || _customLabels$activit2 === void 0 ? void 0 : _customLabels$activit2.created) !== null && _customLabels$activit !== void 0 ? _customLabels$activit : defaultLabels$32.activityVerbs.created,
+		updated: (_customLabels$activit3 = customLabels === null || customLabels === void 0 || (_customLabels$activit4 = customLabels.activityVerbs) === null || _customLabels$activit4 === void 0 ? void 0 : _customLabels$activit4.updated) !== null && _customLabels$activit3 !== void 0 ? _customLabels$activit3 : defaultLabels$32.activityVerbs.updated,
+		completed: (_customLabels$activit5 = customLabels === null || customLabels === void 0 || (_customLabels$activit6 = customLabels.activityVerbs) === null || _customLabels$activit6 === void 0 ? void 0 : _customLabels$activit6.completed) !== null && _customLabels$activit5 !== void 0 ? _customLabels$activit5 : defaultLabels$32.activityVerbs.completed,
+		commented: (_customLabels$activit7 = customLabels === null || customLabels === void 0 || (_customLabels$activit8 = customLabels.activityVerbs) === null || _customLabels$activit8 === void 0 ? void 0 : _customLabels$activit8.commented) !== null && _customLabels$activit7 !== void 0 ? _customLabels$activit7 : defaultLabels$32.activityVerbs.commented,
+		assigned: (_customLabels$activit9 = customLabels === null || customLabels === void 0 || (_customLabels$activit10 = customLabels.activityVerbs) === null || _customLabels$activit10 === void 0 ? void 0 : _customLabels$activit10.assigned) !== null && _customLabels$activit9 !== void 0 ? _customLabels$activit9 : defaultLabels$32.activityVerbs.assigned,
+		deployed: (_customLabels$activit11 = customLabels === null || customLabels === void 0 || (_customLabels$activit12 = customLabels.activityVerbs) === null || _customLabels$activit12 === void 0 ? void 0 : _customLabels$activit12.deployed) !== null && _customLabels$activit11 !== void 0 ? _customLabels$activit11 : defaultLabels$32.activityVerbs.deployed,
+		merged: (_customLabels$activit13 = customLabels === null || customLabels === void 0 || (_customLabels$activit14 = customLabels.activityVerbs) === null || _customLabels$activit14 === void 0 ? void 0 : _customLabels$activit14.merged) !== null && _customLabels$activit13 !== void 0 ? _customLabels$activit13 : defaultLabels$32.activityVerbs.merged
 	};
 	const labels = {
-		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$31.title,
-		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$31.emptyMessage,
-		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$31.moreItems,
+		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$32.title,
+		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$32.emptyMessage,
+		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$32.moreItems,
 		timeAgo: mergedTimeAgo,
 		activityVerbs: mergedActivityVerbs
 	};
@@ -640,13 +640,13 @@ function ActivityFeed({ activities, title, maxItems, onActivityClick, onShowMore
 ActivityFeed.displayName = "ActivityFeed";
 //#endregion
 //#region src/shells/filter-bar.tsx
-const defaultLabels$30 = {
+const defaultLabels$31 = {
 	clearAll: "필터 초기화",
 	searchPlaceholder: "검색..."
 };
 /** Renders the filter bar component. */
 function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, labels: customLabels, presetActions, className }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$30), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$31), customLabels);
 	const [searchValues, setSearchValues] = (0, react.useState)({});
 	const [tagInputValues, setTagInputValues] = (0, react.useState)({});
 	const [multiSelectOpen, setMultiSelectOpen] = (0, react.useState)({});
@@ -872,10 +872,10 @@ function matchesShortcut(event, shortcut) {
 	if (requiresMeta && !event.metaKey) return false;
 	return event.key.toLowerCase() === key;
 }
-const defaultLabels$29 = { title: "빠른 작업" };
+const defaultLabels$30 = { title: "빠른 작업" };
 /** Renders the quick actions component. */
 function QuickActions({ actions, title, layout = "grid", columns = 3, showDescriptionInGrid = false, bindShortcuts = false, labels: customLabels, className }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$29), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$30), customLabels);
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const titleId = (0, react.useId)();
 	(0, react.useEffect)(() => {
@@ -953,7 +953,7 @@ function QuickActions({ actions, title, layout = "grid", columns = 3, showDescri
 QuickActions.displayName = "QuickActions";
 //#endregion
 //#region src/shells/team-member-list.tsx
-const defaultLabels$28 = {
+const defaultLabels$29 = {
 	title: "팀원",
 	emptyMessage: "팀원이 없습니다",
 	onlineCount: "{online}/{total} 온라인",
@@ -974,7 +974,7 @@ const statusDot = {
 };
 /** Renders the team member list component. */
 function TeamMemberList({ members, title, layout = "list", maxDisplay, onMemberClick, onShowMore, emptyMessage, labels: customLabels, className }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$28), customLabels), {}, { status: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$28.status), customLabels === null || customLabels === void 0 ? void 0 : customLabels.status) });
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$29), customLabels), {}, { status: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$29.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)();
@@ -1127,9 +1127,14 @@ function TeamMemberList({ members, title, layout = "list", maxDisplay, onMemberC
 //#region src/shells/auth-form.tsx
 /** Renders the auth form component. */
 function AuthForm({ defaultMode = "login", mode: controlledMode, onModeChange, showRememberMe = true, minPasswordLength = 8, onSubmit, renderExtraFields, labels = {}, ariaLabel }) {
-	var _labels$loginTitle, _labels$signupTitle, _labels$emailLabel, _labels$passwordLabel, _labels$confirmPasswo, _labels$rememberMeLab, _labels$loginButton, _labels$signupButton;
+	var _labels$loginTitle, _labels$signupTitle, _labels$emailLabel, _labels$passwordLabel, _labels$confirmPasswo, _labels$rememberMeLab, _labels$loginButton, _labels$signupButton, _labels$submitError;
 	const [uncontrolledMode, setUncontrolledMode] = (0, react.useState)(defaultMode);
 	const [submitted, setSubmitted] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (!submitted) return;
+		const timer = setTimeout(() => setSubmitted(false), 3e3);
+		return () => clearTimeout(timer);
+	}, [submitted]);
 	const mode = controlledMode !== null && controlledMode !== void 0 ? controlledMode : uncontrolledMode;
 	const handleModeChange = (newMode) => {
 		if (controlledMode === void 0) setUncontrolledMode(newMode);
@@ -1168,13 +1173,13 @@ function AuthForm({ defaultMode = "login", mode: controlledMode, onModeChange, s
 			}
 			return errors;
 		},
-		onSubmit: (values) => {
-			setSubmitted(true);
-			setTimeout(() => setSubmitted(false), 3e3);
-			if (onSubmit) onSubmit(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
+		onSubmit: async (values) => {
+			setSubmitted(false);
+			if (onSubmit) await onSubmit(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 				email: values.email,
 				password: values.password
 			}, mode === "signup" ? { confirmPassword: values.confirmPassword } : {}), mode === "login" ? { rememberMe: values.rememberMe } : {}), {}, { mode }));
+			setSubmitted(true);
 		}
 	});
 	const loginTitle = (_labels$loginTitle = labels.loginTitle) !== null && _labels$loginTitle !== void 0 ? _labels$loginTitle : "로그인";
@@ -1189,11 +1194,13 @@ function AuthForm({ defaultMode = "login", mode: controlledMode, onModeChange, s
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					className: `flex-1 rounded-l-lg px-4 py-2 text-sm font-medium transition-colors ${mode === "login" ? "bg-accent text-accent-fg" : "text-text-secondary hover:bg-bg-subtle"}`,
+					disabled: form.isSubmitting(),
 					onClick: () => handleModeChange("login"),
 					children: loginTitle
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					className: `flex-1 rounded-r-lg px-4 py-2 text-sm font-medium transition-colors ${mode === "signup" ? "bg-accent text-accent-fg" : "text-text-secondary hover:bg-bg-subtle"}`,
+					disabled: form.isSubmitting(),
 					onClick: () => handleModeChange("signup"),
 					children: signupTitle
 				})]
@@ -1202,8 +1209,8 @@ function AuthForm({ defaultMode = "login", mode: controlledMode, onModeChange, s
 				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",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormField, {
+						name: "email",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
 								name: "email",
@@ -1218,8 +1225,8 @@ function AuthForm({ defaultMode = "login", mode: controlledMode, onModeChange, s
 						]
 					}),
 					renderExtraFields === null || renderExtraFields === void 0 ? void 0 : renderExtraFields(mode),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "gap-element flex flex-col",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormField, {
+						name: "password",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
 								name: "password",
@@ -1233,8 +1240,8 @@ function AuthForm({ defaultMode = "login", mode: controlledMode, onModeChange, s
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: "password" })
 						]
 					}),
-					mode === "signup" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "gap-element flex flex-col",
+					mode === "signup" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormField, {
+						name: "confirmPassword",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
 								name: "confirmPassword",
@@ -1264,7 +1271,13 @@ function AuthForm({ defaultMode = "login", mode: controlledMode, onModeChange, s
 					})
 				]
 			}),
+			form.getSubmitError() !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "alert",
+				className: "border-danger bg-danger-subtle text-danger-fg rounded-lg border p-3 text-sm",
+				children: (_labels$submitError = labels.submitError) !== null && _labels$submitError !== void 0 ? _labels$submitError : "처리에 실패했습니다. 다시 시도해주세요."
+			}),
 			submitted && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "status",
 				className: "border-success bg-success-subtle text-success-fg rounded-lg border p-3 text-sm",
 				children: mode === "login" ? "로그인 성공!" : "회원가입 완료!"
 			})
@@ -1275,11 +1288,16 @@ function AuthForm({ defaultMode = "login", mode: controlledMode, onModeChange, s
 //#region src/shells/dynamic-field-form.tsx
 /** Renders the dynamic field form component. */
 function DynamicFieldForm({ initialCount = 1, minFields = 1, maxFields, fieldType = "text", validateField, onSubmit, onFieldsChange, labels = {}, ariaLabel }) {
-	var _labels$itemLabel, _labels$itemPlacehold, _labels$removeAriaLab, _labels$addButton, _labels$submitButton;
+	var _labels$itemLabel, _labels$itemPlacehold, _labels$removeAriaLab, _labels$addButton, _labels$submitButton, _labels$submitError;
 	const initialFields = Array.from({ length: initialCount }, (_, i) => ({ id: i + 1 }));
 	const [fields, setFields] = (0, react.useState)(initialFields);
 	const [nextId, setNextId] = (0, react.useState)(initialCount + 1);
 	const [submitted, setSubmitted] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (!submitted) return;
+		const timer = setTimeout(() => setSubmitted(false), 3e3);
+		return () => clearTimeout(timer);
+	}, [submitted]);
 	const [submittedValues, setSubmittedValues] = (0, react.useState)([]);
 	const form = (0, _reopt_ai_opt_ui_primitives.useFormStore)({
 		defaultValues: { items: Array.from({ length: initialCount }, () => "") },
@@ -1303,12 +1321,12 @@ function DynamicFieldForm({ initialCount = 1, minFields = 1, maxFields, fieldTyp
 			}
 			return errors;
 		},
-		onSubmit: (values) => {
+		onSubmit: async (values) => {
+			setSubmitted(false);
 			const items = [...values.items];
+			await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(items));
 			setSubmittedValues(items);
 			setSubmitted(true);
-			setTimeout(() => setSubmitted(false), 3e3);
-			onSubmit === null || onSubmit === void 0 || onSubmit(items);
 		}
 	});
 	const addField = () => {
@@ -1339,70 +1357,79 @@ 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_text_truncate.FormRoot, {
-			store: form,
-			"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "동적 필드 폼",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "gap-group flex flex-col",
-					children: fields.map((field, displayIndex) => {
-						const fieldName = `items.${displayIndex}`;
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "gap-element flex flex-col",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
-									name: fieldName,
-									children: formatTemplate(itemLabel, displayIndex + 1)
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "gap-element flex",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "flex-1",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormInput, {
-											name: fieldName,
-											type: fieldType,
-											placeholder: formatTemplate(itemPlaceholder, displayIndex + 1)
-										})
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										onClick: () => removeField(field.id),
-										disabled: fields.length <= minFields,
-										className: "border-border text-text-tertiary hover:border-danger hover:bg-danger-subtle hover:text-danger-fg inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border transition-colors disabled:cursor-not-allowed disabled:opacity-30",
-										"aria-label": formatTemplate(removeAriaLabel, displayIndex + 1),
-										children: "✕"
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: fieldName })
-							]
-						}, field.id);
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormRoot, {
+				store: form,
+				"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "동적 필드 폼",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "gap-group flex flex-col",
+						children: fields.map((field, displayIndex) => {
+							const fieldName = `items.${displayIndex}`;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormField, {
+								name: fieldName,
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
+										name: fieldName,
+										children: formatTemplate(itemLabel, displayIndex + 1)
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "gap-element flex",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: "flex-1",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormInput, {
+												name: fieldName,
+												type: fieldType,
+												placeholder: formatTemplate(itemPlaceholder, displayIndex + 1)
+											})
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											onClick: () => removeField(field.id),
+											disabled: form.isSubmitting() || fields.length <= minFields,
+											className: "border-border text-text-tertiary hover:border-danger hover:bg-danger-subtle hover:text-danger-fg inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border transition-colors disabled:cursor-not-allowed disabled:opacity-30",
+											"aria-label": formatTemplate(removeAriaLabel, displayIndex + 1),
+											children: "✕"
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: fieldName })
+								]
+							}, field.id);
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: addField,
+						disabled: form.isSubmitting() || maxFields !== void 0 && fields.length >= maxFields,
+						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_text_truncate.FormSubmit, {
+						disabled: form.isSubmitting(),
+						children: (_labels$submitButton = labels.submitButton) !== null && _labels$submitButton !== void 0 ? _labels$submitButton : "제출"
 					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: addField,
-					disabled: maxFields !== void 0 && fields.length >= maxFields,
-					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_text_truncate.FormSubmit, {
-					disabled: form.isSubmitting(),
-					children: (_labels$submitButton = labels.submitButton) !== null && _labels$submitButton !== void 0 ? _labels$submitButton : "제출"
-				})
-			]
-		}), submitted && submittedValues.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "border-success bg-success-subtle rounded-lg border p-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-success-fg mb-2 text-sm font-medium",
-				children: "제출된 값:"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-				className: "text-success-fg gap-element flex flex-col text-sm",
-				children: submittedValues.map((val, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-					formatTemplate(itemLabel, i + 1),
-					": ",
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: val })
-				] }, i))
-			})]
-		})]
+				]
+			}),
+			form.getSubmitError() !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "alert",
+				className: "border-danger bg-danger-subtle text-danger-fg rounded-lg border p-3 text-sm",
+				children: (_labels$submitError = labels.submitError) !== null && _labels$submitError !== void 0 ? _labels$submitError : "처리에 실패했습니다. 다시 시도해주세요."
+			}),
+			submitted && submittedValues.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "status",
+				className: "border-success bg-success-subtle rounded-lg border p-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-success-fg mb-2 text-sm font-medium",
+					children: "제출된 값:"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					className: "text-success-fg gap-element flex flex-col text-sm",
+					children: submittedValues.map((val, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+						formatTemplate(itemLabel, i + 1),
+						": ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: val })
+					] }, i))
+				})]
+			})
+		]
 	});
 }
 //#endregion
@@ -1414,10 +1441,16 @@ function formatFileSize(bytes) {
 }
 /** Renders the file upload form component. */
 function FileUploadForm({ accept = "image/*,.pdf,.doc,.docx", showPreview = true, showFileInfo = true, showDescription = true, descriptionRows = 3, titleRequired = true, maxFileSize, onSubmit, onFileChange, onPreview, columnMapping, labels = {}, ariaLabel }) {
-	var _labels$titleLabel, _labels$titlePlacehol, _labels$descriptionLa, _labels$descriptionPl, _labels$fileLabel, _labels$columnMapping, _labels$submitButton, _labels$successMessag;
+	var _labels$titleLabel, _labels$titlePlacehol, _labels$descriptionLa, _labels$descriptionPl, _labels$fileLabel, _labels$columnMapping, _labels$submitButton, _labels$submitError, _labels$successMessag;
+	const fileId = (0, react.useId)();
 	const [selectedFile, setSelectedFile] = (0, react.useState)(null);
 	const [preview, setPreview] = (0, react.useState)(null);
 	const [submitted, setSubmitted] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (!submitted) return;
+		const timer = setTimeout(() => setSubmitted(false), 3e3);
+		return () => clearTimeout(timer);
+	}, [submitted]);
 	const [fileSizeError, setFileSizeError] = (0, react.useState)(null);
 	const form = (0, _reopt_ai_opt_ui_primitives.useFormStore)({
 		defaultValues: {
@@ -1435,14 +1468,14 @@ function FileUploadForm({ accept = "image/*,.pdf,.doc,.docx", showPreview = true
 			}
 			return errors;
 		},
-		onSubmit: (values) => {
-			setSubmitted(true);
-			setTimeout(() => setSubmitted(false), 3e3);
-			if (onSubmit) onSubmit({
+		onSubmit: async (values) => {
+			setSubmitted(false);
+			if (onSubmit) await onSubmit({
 				title: values.title,
 				description: values.description,
 				file: selectedFile
 			});
+			setSubmitted(true);
 		}
 	});
 	const handleFileChange = (e) => {
@@ -1474,111 +1507,128 @@ 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_text_truncate.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_text_truncate.FormLabel, {
-							name: "title",
-							children: (_labels$titleLabel = labels.titleLabel) !== null && _labels$titleLabel !== void 0 ? _labels$titleLabel : "제목"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormInput, {
-							name: "title",
-							placeholder: (_labels$titlePlacehol = labels.titlePlaceholder) !== null && _labels$titlePlacehol !== void 0 ? _labels$titlePlacehol : "파일 제목을 입력하세요"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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_text_truncate.FormLabel, {
-						name: "description",
-						children: (_labels$descriptionLa = labels.descriptionLabel) !== null && _labels$descriptionLa !== void 0 ? _labels$descriptionLa : "설명"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormTextarea, {
-						name: "description",
-						placeholder: (_labels$descriptionPl = labels.descriptionPlaceholder) !== null && _labels$descriptionPl !== void 0 ? _labels$descriptionPl : "파일에 대한 설명을 입력하세요",
-						rows: descriptionRows,
-						resize: "none"
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "gap-element flex flex-col",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-							className: "text-text-primary text-sm font-medium",
-							children: (_labels$fileLabel = labels.fileLabel) !== null && _labels$fileLabel !== void 0 ? _labels$fileLabel : "파일 선택"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "relative",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								type: "file",
-								onChange: handleFileChange,
-								accept,
-								className: "border-border bg-surface text-text-primary file:bg-accent-subtle file:text-accent hover:file:bg-accent-subtle block w-full cursor-pointer rounded-lg border px-4 py-2.5 text-sm file:mr-4 file:cursor-pointer file:rounded-md file:border-0 file:px-3 file:py-1 file:text-sm file:font-medium"
-							})
-						}),
-						fileSizeError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "text-danger-fg text-xs",
-							children: fileSizeError
-						})
-					]
-				}),
-				selectedFile && showFileInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "border-border-subtle rounded-lg border p-4",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "gap-element flex flex-col",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormRoot, {
+				store: form,
+				"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "파일 업로드 폼",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormField, {
+						name: "title",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex items-center justify-between text-sm",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "text-text-primary font-medium",
-									children: selectedFile.name
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "text-text-tertiary",
-									children: formatFileSize(selectedFile.size)
-								})]
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
+								name: "title",
+								children: (_labels$titleLabel = labels.titleLabel) !== null && _labels$titleLabel !== void 0 ? _labels$titleLabel : "제목"
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "text-text-tertiary text-xs",
-								children: ["타입: ", selectedFile.type || "알 수 없음"]
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormInput, {
+								name: "title",
+								placeholder: (_labels$titlePlacehol = labels.titlePlaceholder) !== null && _labels$titlePlacehol !== void 0 ? _labels$titlePlacehol : "파일 제목을 입력하세요"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: "title" })
+						]
+					}),
+					showDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormField, {
+						name: "description",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
+							name: "description",
+							children: (_labels$descriptionLa = labels.descriptionLabel) !== null && _labels$descriptionLa !== void 0 ? _labels$descriptionLa : "설명"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormTextarea, {
+							name: "description",
+							placeholder: (_labels$descriptionPl = labels.descriptionPlaceholder) !== null && _labels$descriptionPl !== void 0 ? _labels$descriptionPl : "파일에 대한 설명을 입력하세요",
+							rows: descriptionRows,
+							resize: "none"
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormField, {
+						name: "file",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+								htmlFor: fileId,
+								className: "text-text-primary text-sm font-medium",
+								children: (_labels$fileLabel = labels.fileLabel) !== null && _labels$fileLabel !== void 0 ? _labels$fileLabel : "파일 선택"
 							}),
-							showPreview && preview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "border-border-subtle overflow-hidden rounded-lg border",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-									src: preview,
-									alt: "미리보기",
-									className: "max-h-48 w-full object-contain"
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "relative",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									id: fileId,
+									type: "file",
+									disabled: form.isSubmitting(),
+									"aria-invalid": Boolean(fileSizeError),
+									"aria-describedby": fileSizeError ? `${fileId}-error` : void 0,
+									onChange: handleFileChange,
+									accept,
+									className: "border-border bg-surface text-text-primary file:bg-accent-subtle file:text-accent hover:file:bg-accent-subtle block w-full cursor-pointer rounded-lg border px-4 py-2.5 text-sm file:mr-4 file:cursor-pointer file:rounded-md file:border-0 file:px-3 file:py-1 file:text-sm file:font-medium"
 								})
+							}),
+							fileSizeError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								id: `${fileId}-error`,
+								role: "alert",
+								className: "text-danger-fg text-xs",
+								children: fileSizeError
 							})
 						]
+					}),
+					selectedFile && showFileInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "border-border-subtle rounded-lg border p-4",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex items-center justify-between text-sm",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-text-primary font-medium",
+										children: selectedFile.name
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-text-tertiary",
+										children: formatFileSize(selectedFile.size)
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "text-text-tertiary text-xs",
+									children: ["타입: ", selectedFile.type || "알 수 없음"]
+								}),
+								showPreview && preview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "border-border-subtle overflow-hidden rounded-lg border",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+										src: preview,
+										alt: "미리보기",
+										className: "max-h-48 w-full object-contain"
+									})
+								})
+							]
+						})
+					}),
+					columnMapping && selectedFile && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "gap-element flex flex-col",
+						"aria-label": (_labels$columnMapping = labels.columnMappingLabel) !== null && _labels$columnMapping !== void 0 ? _labels$columnMapping : "Column mapping",
+						children: columnMapping
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSubmit, {
+						disabled: form.isSubmitting(),
+						children: (_labels$submitButton = labels.submitButton) !== null && _labels$submitButton !== void 0 ? _labels$submitButton : "업로드"
 					})
-				}),
-				columnMapping && selectedFile && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "gap-element flex flex-col",
-					"aria-label": (_labels$columnMapping = labels.columnMappingLabel) !== null && _labels$columnMapping !== void 0 ? _labels$columnMapping : "Column mapping",
-					children: columnMapping
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSubmit, {
-					disabled: form.isSubmitting(),
-					children: (_labels$submitButton = labels.submitButton) !== null && _labels$submitButton !== void 0 ? _labels$submitButton : "업로드"
-				})
-			]
-		}), submitted && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "border-success bg-success-subtle text-success-fg rounded-lg border p-3 text-sm",
-			children: (_labels$successMessag = labels.successMessage) !== null && _labels$successMessag !== void 0 ? _labels$successMessag : "업로드가 완료되었습니다!"
-		})]
+				]
+			}),
+			form.getSubmitError() !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "alert",
+				className: "border-danger bg-danger-subtle text-danger-fg rounded-lg border p-3 text-sm",
+				children: (_labels$submitError = labels.submitError) !== null && _labels$submitError !== void 0 ? _labels$submitError : "처리에 실패했습니다. 다시 시도해주세요."
+			}),
+			submitted && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "status",
+				className: "border-success bg-success-subtle text-success-fg rounded-lg border p-3 text-sm",
+				children: (_labels$successMessag = labels.successMessage) !== null && _labels$successMessag !== void 0 ? _labels$successMessag : "업로드가 완료되었습니다!"
+			})
+		]
 	});
 }
 //#endregion
 //#region src/shells/wizard-form.tsx
 /** Renders the wizard form component. */
 function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange, resetOnSuccess = false, labels = {}, ariaLabel }) {
-	var _labels$reviewTitle, _labels$stepsLabel, _labels$reviewTitle2, _labels$backButton, _labels$submitButton, _labels$nextButton, _labels$successMessag, _labels$resetLink;
+	var _labels$reviewTitle, _labels$stepsLabel, _labels$reviewTitle2, _labels$backButton, _labels$submitButton, _labels$nextButton, _labels$submitError, _labels$successMessag, _labels$resetLink;
 	const [currentStep, setCurrentStep] = (0, react.useState)(0);
 	const [submitted, setSubmitted] = (0, react.useState)(false);
+	const formId = (0, react.useId)();
 	const totalSteps = showReview ? steps.length + 1 : steps.length;
 	const isReviewStep = showReview && currentStep === steps.length;
 	const isLastStep = currentStep === totalSteps - 1;
@@ -1612,22 +1662,31 @@ function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange,
 			}
 			return errors;
 		},
-		onSubmit: (values) => {
+		onSubmit: async (values) => {
 			if (!isLastStep) {
 				const next = currentStep + 1;
 				setCurrentStep(next);
 				onStepChange === null || onStepChange === void 0 || onStepChange(next);
 			} else {
+				setSubmitted(false);
+				await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(values));
 				setSubmitted(true);
-				onSubmit === null || onSubmit === void 0 || onSubmit(values);
-				if (resetOnSuccess) setTimeout(() => {
-					setCurrentStep(0);
-					setSubmitted(false);
-					form.reset();
-				}, 3e3);
 			}
 		}
 	});
+	(0, react.useEffect)(() => {
+		if (!submitted || !resetOnSuccess) return;
+		const timer = setTimeout(() => {
+			setCurrentStep(0);
+			setSubmitted(false);
+			form.reset();
+		}, 3e3);
+		return () => clearTimeout(timer);
+	}, [
+		submitted,
+		resetOnSuccess,
+		form
+	]);
 	const handleBack = () => {
 		if (currentStep > 0) {
 			const prev = currentStep - 1;
@@ -1665,8 +1724,8 @@ function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange,
 				]
 			}, field.name);
 		}
-		if (field.type === "checkbox") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "gap-element flex flex-col",
+		if (field.type === "checkbox") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormField, {
+			name: field.name,
 			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_text_truncate.FormCheckbox, { name: field.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: field.label })]
@@ -1674,13 +1733,10 @@ function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange,
 		}, 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",
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormField, {
+				name: field.name,
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
-						name: field.name,
-						children: field.label
-					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, { children: field.label }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormTextarea, {
 						name: field.name,
 						placeholder: field.placeholder,
@@ -1693,22 +1749,28 @@ function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange,
 		}
 		if (field.type === "select") {
 			var _field$options2;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "gap-element flex flex-col",
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormField, {
+				name: field.name,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
-						name: field.name,
+						htmlFor: `${formId}-${field.name}`,
 						children: field.label
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSelect, {
 						name: field.name,
+						id: `${formId}-${field.name}`,
+						"aria-label": field.label,
+						"aria-describedby": form.getError(field.name) && form.getFieldTouched(field.name) ? `${formId}-${field.name}-error` : void 0,
 						placeholder: field.placeholder,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSelectPopover, { children: (_field$options2 = field.options) === null || _field$options2 === void 0 ? void 0 : _field$options2.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSelectItem, {
 							value: option.value,
 							children: option.label
 						}, option.value)) })
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, {
+						name: field.name,
+						id: `${formId}-${field.name}-error`
+					})
 				]
 			}, field.name);
 		}
@@ -1725,13 +1787,10 @@ function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange,
 				})]
 			})]
 		}, field.name);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "gap-element flex flex-col",
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormField, {
+			name: field.name,
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
-					name: field.name,
-					children: field.label
-				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, { children: field.label }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormInput, {
 					name: field.name,
 					type: (_field$type = field.type) !== null && _field$type !== void 0 ? _field$type : "text",
@@ -1815,13 +1874,20 @@ function WizardForm({ fields, steps, showReview = true, onSubmit, onStepChange,
 						children: [currentStep > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							onClick: handleBack,
+							disabled: form.isSubmitting(),
 							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_text_truncate.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 : "다음" })]
 					})
 				]
 			}),
+			form.getSubmitError() !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "alert",
+				className: "border-danger bg-danger-subtle text-danger-fg rounded-lg border p-3 text-sm",
+				children: (_labels$submitError = labels.submitError) !== null && _labels$submitError !== void 0 ? _labels$submitError : "처리에 실패했습니다. 다시 시도해주세요."
+			}),
 			submitted && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "status",
 				className: "border-success bg-success-subtle rounded-lg border p-4 text-center",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "text-success-fg text-sm font-medium",
@@ -1874,7 +1940,7 @@ const COLOR_PRESETS = [
 	"#f97316",
 	"#14b8a6"
 ];
-const defaultLabels$27 = {
+const defaultLabels$28 = {
 	eventLabelPrefix: "Event",
 	defaultAriaLabel: "Event icon"
 };
@@ -1905,7 +1971,7 @@ function getEventIconStyle(color) {
 /** Renders the event icon component. */
 function EventIcon({ icon, color, size = "md", className, labels: customLabels }) {
 	var _iconEntry$label;
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$27), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$28), 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_text_truncate.getIconRegistryEntry(icon) : void 0;
@@ -1997,14 +2063,14 @@ function ConnectionIndicator({ status, tone, label, showLabel = true, pulse, cla
 ConnectionIndicator.displayName = "ConnectionIndicator";
 //#endregion
 //#region src/shells/floating-action-bar.tsx
-const defaultLabels$26 = {
+const defaultLabels$27 = {
 	toolbarAriaLabel: "Actions",
 	selectedLabel: (count) => `${count} selected`,
 	dismissAriaLabel: "Dismiss"
 };
 /** Renders the floating action bar component. */
 function FloatingActionBar({ actions, selectedCount, onAction, onDismiss, className, labels: customLabels }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$26), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$27), customLabels);
 	if (actions.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: "toolbar",
@@ -2041,7 +2107,7 @@ function FloatingActionBar({ actions, selectedCount, onAction, onDismiss, classN
 FloatingActionBar.displayName = "FloatingActionBar";
 //#endregion
 //#region src/shells/template-picker.tsx
-const defaultLabels$25 = {
+const defaultLabels$26 = {
 	ariaLabel: "Templates",
 	defaultCategory: "General",
 	searchPlaceholder: "Search templates...",
@@ -2049,7 +2115,7 @@ const defaultLabels$25 = {
 };
 /** Renders the template picker component. */
 function TemplatePicker({ templates, selected, onSelect, labels: customLabels, showSearch = false, className }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$25), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$26), customLabels);
 	const [search, setSearch] = react.useState("");
 	const filtered = react.useMemo(() => {
 		if (!showSearch || !search) return templates;
@@ -2135,7 +2201,7 @@ function TemplatePicker({ templates, selected, onSelect, labels: customLabels, s
 TemplatePicker.displayName = "TemplatePicker";
 //#endregion
 //#region src/shells/code-snippet-viewer.tsx
-const defaultLabels$24 = {
+const defaultLabels$25 = {
 	copy: "Copy",
 	copied: "Copied!",
 	codeRegion: "Code snippet"
@@ -2173,7 +2239,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_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$24), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$25), 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;
@@ -2225,7 +2291,7 @@ function CodeSnippetViewer({ code, language = "text", title, showLineNumbers = t
 CodeSnippetViewer.displayName = "CodeSnippetViewer";
 //#endregion
 //#region src/shells/property-explorer.tsx
-const defaultLabels$23 = {
+const defaultLabels$24 = {
 	searchPlaceholder: "Search properties...",
 	noPropertiesFound: "No properties found",
 	edit: (property) => `${property} 편집`,
@@ -2233,7 +2299,7 @@ const defaultLabels$23 = {
 };
 /** Renders the property explorer component. */
 function PropertyExplorer({ groups, onSelect, onEdit, className, labels: customLabels }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$23), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$24), customLabels);
 	const [search, setSearch] = react.useState("");
 	const filtered = react.useMemo(() => {
 		if (!search) return groups;
@@ -2519,7 +2585,7 @@ function skipBlockComment(text, from) {
 }
 //#endregion
 //#region src/shells/alert-builder.tsx
-const defaultLabels$22 = {
+const defaultLabels$23 = {
 	alertNameLabel: "Alert name",
 	conditionsLabel: "Conditions",
 	metricLabel: "Metric",
@@ -2590,7 +2656,7 @@ 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_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$22), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$23), customLabels);
 	const alertNameId = react.useId();
 	const conditionsId = react.useId();
 	const checkFrequencyId = react.useId();
@@ -2745,7 +2811,7 @@ function AlertBuilder({ value, onChange, metrics = [
 AlertBuilder.displayName = "AlertBuilder";
 //#endregion
 //#region src/shells/event-meta-editor.tsx
-const defaultLabels$21 = {
+const defaultLabels$22 = {
 	icon: "Icon",
 	color: "Color",
 	name: "Event name",
@@ -2763,7 +2829,7 @@ const defaultLabels$21 = {
 };
 /** Renders the event meta editor component. */
 function EventMetaEditor({ value, onChange, icons, sections, footer, className, labels: customLabels }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$21), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$22), customLabels);
 	const hasTags = value.tags.length > 0;
 	const nameId = react.useId();
 	const displayNameId = react.useId();
@@ -2886,10 +2952,10 @@ function EventMetaEditor({ value, onChange, icons, sections, footer, className,
 EventMetaEditor.displayName = "EventMetaEditor";
 //#endregion
 //#region src/shells/widget-grid.tsx
-const defaultLabels$20 = { emptyMessage: "No widgets to display" };
+const defaultLabels$21 = { 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_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$20), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$21), 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", {
@@ -2934,7 +3000,7 @@ function WidgetGrid({ widgets, cols = 12, rowHeight = 80, gap = 16, editable = f
 WidgetGrid.displayName = "WidgetGrid";
 //#endregion
 //#region src/shells/report-builder.tsx
-const defaultLabels$19 = {
+const defaultLabels$20 = {
 	stepsLabel: "Report steps",
 	stepType: "Chart Type",
 	stepConfig: "Data Config",
@@ -3010,7 +3076,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_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$19), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$20), customLabels);
 	const [stepIndex, setStepIndex] = react.useState(0);
 	const [internalChartType, setInternalChartType] = react.useState(null);
 	const [internalDataSource, setInternalDataSource] = react.useState("");
@@ -3230,7 +3296,7 @@ function ReportBuilder({ chartTypes = DEFAULT_CHART_TYPES, dataSources = [], onS
 ReportBuilder.displayName = "ReportBuilder";
 //#endregion
 //#region src/shells/audit-timeline.tsx
-const defaultLabels$18 = {
+const defaultLabels$19 = {
 	title: "변경 이력",
 	empty: "변경 이력이 없습니다",
 	expand: "상세 보기",
@@ -3309,7 +3375,7 @@ function DiffTable({ changes, labels }) {
 }
 /** Renders the audit timeline component. */
 function AuditTimeline({ entries, labels: customLabels, className, onEntryClick }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$18), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$19), customLabels);
 	const [expandedIds, setExpandedIds] = react.useState(/* @__PURE__ */ new Set());
 	const toggleExpanded = react.useCallback((id) => {
 		setExpandedIds((prev) => {
@@ -3432,7 +3498,7 @@ function AuditTimeline({ entries, labels: customLabels, className, onEntryClick
 AuditTimeline.displayName = "AuditTimeline";
 //#endregion
 //#region src/shells/segment-builder.tsx
-const defaultLabels$17 = {
+const defaultLabels$18 = {
 	match: "Match",
 	ofTheFollowing: "of the following",
 	groupLabel: "Segment group",
@@ -3553,7 +3619,7 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 	"New Users",
 	"Power Users"
 ], className, labels: customLabels }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$17), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$18), customLabels);
 	const builderId = react.useId().replace(/:/g, "");
 	const nextIdRef = react.useRef(1);
 	const createId = react.useCallback(() => {
@@ -3765,6 +3831,703 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 }
 SegmentBuilder.displayName = "SegmentBuilder";
 //#endregion
+//#region src/shells/criteria-builder.tsx
+const defaultLabels$17 = {
+	builder: "조건 빌더",
+	rootLogicLegend: "그룹 결합 방식",
+	matchAllGroups: "모든 그룹 일치",
+	matchAnyGroup: "하나 이상 일치",
+	groupLogicLegend: (letter) => `그룹 ${letter} 조건 결합 방식`,
+	matchAllCriteria: "모두 충족",
+	matchAnyCriteria: "하나 이상 충족",
+	and: "그리고",
+	or: "또는",
+	groupLabel: (letter) => `그룹 ${letter}`,
+	criterionLabel: (letter, index) => `조건 ${letter}.${index}`,
+	actionLabel: (action, target) => `${action}: ${target}`,
+	addCriterion: "조건 추가",
+	addGroup: "그룹 추가",
+	kindMenuTitle: "조건 유형",
+	duplicateCriterion: "조건 복제",
+	removeCriterion: "조건 제거",
+	moveUp: "위로 이동",
+	moveDown: "아래로 이동",
+	negate: "제외",
+	duplicateGroup: "그룹 복제",
+	removeGroup: "그룹 제거",
+	emptyGroup: "이 그룹에는 아직 조건이 없습니다.",
+	unknownKind: (kind) => `알 수 없는 조건 유형 "${kind}"`,
+	unknownKindDescription: "이 조건은 표시할 수 없습니다. 유형을 바꾸거나 제거하세요.",
+	replaceKind: "유형 바꾸기",
+	emptyTitle: "조건이 없습니다",
+	emptyDescription: "첫 그룹을 추가해 누가 포함되는지 정의하세요.",
+	emptyAction: "첫 조건 추가",
+	keyboardHint: "조건 추가 · 그룹 추가",
+	maxGroupsReached: (max) => `그룹은 최대 ${max}개까지 추가할 수 있습니다.`,
+	maxCriteriaReached: (max) => `한 그룹에는 조건을 최대 ${max}개까지 추가할 수 있습니다.`
+};
+/** `A`, `B`, … `Z`, `AA`, `AB` — the badge a group wears. */
+function criteriaGroupLetter(index) {
+	let n = Math.max(0, Math.floor(index));
+	let out = "";
+	do {
+		out = String.fromCharCode(65 + n % 26) + out;
+		n = Math.floor(n / 26) - 1;
+	} while (n >= 0);
+	return out;
+}
+function collectIds(value) {
+	const ids = /* @__PURE__ */ new Set();
+	for (const group of value.groups) {
+		ids.add(group.id);
+		for (const criterion of group.criteria) ids.add(criterion.id);
+	}
+	return ids;
+}
+function uniqueId(base, taken) {
+	if (!taken.has(base)) return base;
+	let n = 2;
+	while (taken.has(`${base}-${n}`)) n += 1;
+	return `${base}-${n}`;
+}
+function replaceGroup(value, groupIndex, next) {
+	return require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, value), {}, { groups: value.groups.map((group, i) => i === groupIndex ? next : group) });
+}
+/**
+* Moves one criterion a step up or down inside its group. Returns the same
+* value when the move is impossible, so a caller can `===` to know nothing
+* changed.
+*/
+function criteriaBuilderMove(value, groupIndex, index, direction) {
+	const group = value.groups[groupIndex];
+	if (!group) return value;
+	const target = direction === "up" ? index - 1 : index + 1;
+	if (index < 0 || target < 0 || target >= group.criteria.length) return value;
+	const criteria = [...group.criteria];
+	const [moved] = criteria.splice(index, 1);
+	criteria.splice(target, 0, moved);
+	return replaceGroup(value, groupIndex, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, group), {}, { criteria }));
+}
+/**
+* Inserts a copy of one criterion *before* the original, so the copy takes the
+* original's place in the reading order and the original follows as the thing
+* to edit.
+*/
+function criteriaBuilderDuplicate(value, groupIndex, index, clone) {
+	const group = value.groups[groupIndex];
+	const original = group === null || group === void 0 ? void 0 : group.criteria[index];
+	if (!group || !original) return value;
+	const criteria = [...group.criteria];
+	criteria.splice(index, 0, clone(original));
+	return replaceGroup(value, groupIndex, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, group), {}, { criteria }));
+}
+/** Removes one criterion. The group stays, even when it empties. */
+function criteriaBuilderRemove(value, groupIndex, index) {
+	const group = value.groups[groupIndex];
+	if (!group || index < 0 || index >= group.criteria.length) return value;
+	return replaceGroup(value, groupIndex, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, group), {}, { criteria: group.criteria.filter((_, i) => i !== index) }));
+}
+/** Appends a criterion to a group, or inserts it at `at`. */
+function criteriaBuilderInsert(value, groupIndex, criterion, at) {
+	const group = value.groups[groupIndex];
+	if (!group) return value;
+	const criteria = [...group.criteria];
+	const position = at === void 0 ? criteria.length : Math.max(0, Math.min(at, criteria.length));
+	criteria.splice(position, 0, criterion);
+	return replaceGroup(value, groupIndex, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, group), {}, { criteria }));
+}
+/** Removes one group. */
+function criteriaBuilderRemoveGroup(value, groupIndex) {
+	if (groupIndex < 0 || groupIndex >= value.groups.length) return value;
+	return require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, value), {}, { groups: value.groups.filter((_, i) => i !== groupIndex) });
+}
+/** Inserts a copy of one group — every criterion cloned — before the original. */
+function criteriaBuilderDuplicateGroup(value, groupIndex, groupId, clone) {
+	const group = value.groups[groupIndex];
+	if (!group) return value;
+	const copy = {
+		id: groupId,
+		logic: group.logic,
+		criteria: group.criteria.map(clone)
+	};
+	const groups = [...value.groups];
+	groups.splice(groupIndex, 0, copy);
+	return require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, value), {}, { groups });
+}
+const EDITABLE_TARGET = "input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [role=\"combobox\"], [role=\"textbox\"], [role=\"menu\"], [role=\"menuitem\"], [role=\"listbox\"], [role=\"option\"]";
+function isEditableTarget(target) {
+	return target instanceof Element && target.closest(EDITABLE_TARGET) !== null;
+}
+function sectionKinds(kinds) {
+	const sections = [];
+	const byHeading = /* @__PURE__ */ new Map();
+	for (const option of kinds) {
+		let section = byHeading.get(option.group);
+		if (!section) {
+			section = {
+				heading: option.group,
+				entries: []
+			};
+			byHeading.set(option.group, section);
+			sections.push(section);
+		}
+		section.entries.push({
+			key: option.kind,
+			kind: option.kind,
+			negate: false,
+			option
+		});
+		if (option.negatedLabel) section.entries.push({
+			key: `${option.kind}:not`,
+			kind: option.kind,
+			negate: true,
+			option
+		});
+	}
+	return [...sections.filter((s) => s.heading === void 0), ...sections.filter((s) => s.heading !== void 0)];
+}
+function KindMenu({ kinds, menuLabel, triggerLabel, triggerAriaLabel, triggerIcon, disabled = false, disabledReason, variant = "ghost", onPick, addTarget }) {
+	const sections = react.useMemo(() => sectionKinds(kinds), [kinds]);
+	const trigger = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.DropdownTrigger, {
+		disabled,
+		"aria-label": triggerAriaLabel,
+		title: disabled ? disabledReason : void 0,
+		"data-criteria-add": addTarget,
+		className: require_text_truncate.cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", "h-[var(--opt-control-sm)] gap-[var(--opt-space-1-5)] px-[var(--opt-control-padding-sm)] text-xs", variant === "secondary" ? "border-border bg-surface text-text-primary hover:bg-bg-subtle active:bg-bg-muted border" : "text-text-secondary hover:bg-bg-subtle active:bg-bg-muted", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "[&_svg]:size-3.5", require_text_truncate.OPT_FOCUS_VISIBLE),
+		children: [triggerIcon, triggerLabel]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.DropdownMenu, {
+		animated: false,
+		children: [trigger, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.DropdownContent, {
+			"aria-label": menuLabel,
+			"aria-labelledby": void 0,
+			className: "min-w-56",
+			children: sections.map((section, si) => {
+				var _section$heading;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
+					si > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.DropdownSeparator, {}),
+					section.heading !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						role: "presentation",
+						className: "text-text-tertiary px-2 pt-1.5 pb-1 text-[11px] font-semibold tracking-wide uppercase",
+						children: section.heading
+					}),
+					section.entries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.DropdownItem, {
+						onClick: () => onPick(entry.kind, entry.negate),
+						className: "flex items-start gap-2",
+						children: [entry.option.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-text-tertiary mt-0.5 shrink-0 [&_svg]:size-3.5",
+							children: entry.option.icon
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "flex min-w-0 flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: require_text_truncate.cn("text-sm", entry.negate && "text-danger-fg"),
+								children: entry.negate ? entry.option.negatedLabel : entry.option.label
+							}), !entry.negate && entry.option.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-text-tertiary text-xs",
+								children: entry.option.description
+							})]
+						})]
+					}, entry.key))
+				] }, (_section$heading = section.heading) !== null && _section$heading !== void 0 ? _section$heading : "__none");
+			})
+		})]
+	});
+}
+function IconAction({ icon, label, onClick, disabled = false, danger = false }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick,
+		disabled,
+		"aria-label": label,
+		title: label,
+		className: require_text_truncate.cn("inline-flex size-7 shrink-0 items-center justify-center rounded-md transition-colors [&_svg]:size-3.5", danger ? "text-text-tertiary hover:bg-danger-subtle hover:text-danger-fg" : "text-text-tertiary hover:bg-bg-muted hover:text-text-primary", "disabled:pointer-events-none disabled:opacity-40", require_text_truncate.OPT_FOCUS_VISIBLE),
+		children: icon
+	});
+}
+function LogicDivider({ label, emphasis }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "separator",
+		"aria-label": label,
+		className: require_text_truncate.cn("flex items-center", emphasis === "root" ? "gap-group" : "gap-element"),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_text_truncate.cn("h-px flex-1", emphasis === "root" ? "bg-border" : "bg-border-subtle") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_text_truncate.cn("text-[11px] font-semibold tracking-wide uppercase", emphasis === "root" ? "bg-bg-subtle text-text-secondary border-border rounded-full border px-2 py-0.5" : "text-text-tertiary"),
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_text_truncate.cn("h-px flex-1", emphasis === "root" ? "bg-border" : "bg-border-subtle") })
+		]
+	});
+}
+function Lettermark({ letter }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-hidden": "true",
+		className: "bg-accent-subtle text-accent inline-flex size-6 shrink-0 items-center justify-center rounded-md text-xs font-semibold tabular-nums",
+		children: letter
+	});
+}
+/**
+* CriteriaBuilder — a two-level tree of criteria, edited as sentences.
+*
+* The builder owns what every criteria editor needs and nothing a particular
+* product does: groups and their AND/OR, the order of criteria, negation,
+* inline errors, the "add" menu, and the keyboard. The consumer owns the
+* criterion type and renders each one — usually as `Expression` chips whose
+* values open an editor — so the same shell serves a cohort of users, an
+* alert condition, or a feature-flag rollout without knowing which.
+*
+* Kinds the builder does not know render as an invalid row with a warning and
+* a replace/remove pair, never as some other kind's fields: a criterion saved
+* by a newer client should look broken, not silently different.
+*
+* @example
+* ```tsx
+* <CriteriaBuilder
+*   value={value}
+*   onChange={setValue}
+*   kinds={[
+*     { kind: "performed", label: "이벤트를 수행함", negatedLabel: "이벤트를 수행하지 않음" },
+*     { kind: "property", label: "속성이 일치함" },
+*   ]}
+*   createCriterion={(kind, negate) => ({ id: nextId(), kind, negate, event: "" })}
+*   renderCriterion={(c, api) => (
+*     <ExpressionGroup>
+*       <Expression description="이벤트" value={c.event} onClick={() => open(c.id)} />
+*     </ExpressionGroup>
+*   )}
+* />
+* ```
+*/
+function CriteriaBuilder({ value, onChange, kinds, createCriterion, renderCriterion, cloneCriterion, createGroupId, errors, maxGroups = 10, maxCriteriaPerGroup = 20, allowNegation = true, disabled = false, aside, labels: customLabels, className, "aria-label": ariaLabel }) {
+	const labels = react.useMemo(() => require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$17), customLabels), [customLabels]);
+	const baseId = react.useId().replace(/:/g, "");
+	const nextGroupRef = react.useRef(1);
+	const rootRef = react.useRef(null);
+	const [pendingOpen, setPendingOpen] = react.useState(null);
+	const knownKinds = react.useMemo(() => new Set(kinds.map((k) => k.kind)), [kinds]);
+	const groupsFull = value.groups.length >= maxGroups;
+	const newGroupId = react.useCallback(() => {
+		const taken = collectIds(value);
+		if (createGroupId) return uniqueId(createGroupId(), taken);
+		let id = "";
+		do
+			id = `group-${nextGroupRef.current++}`;
+		while (taken.has(id));
+		return id;
+	}, [createGroupId, value]);
+	const clone = react.useCallback((criterion, taken) => {
+		if (cloneCriterion) return cloneCriterion(criterion);
+		const id = uniqueId(`${criterion.id}-copy`, taken);
+		taken.add(id);
+		return require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, criterion), {}, { id });
+	}, [cloneCriterion]);
+	const addGroup = react.useCallback(() => {
+		if (disabled || groupsFull) return null;
+		const id = newGroupId();
+		onChange(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, value), {}, { groups: [...value.groups, {
+			id,
+			logic: "and",
+			criteria: []
+		}] }));
+		return id;
+	}, [
+		disabled,
+		groupsFull,
+		newGroupId,
+		onChange,
+		value
+	]);
+	const addCriterion = react.useCallback((groupIndex, kind, negate) => {
+		const group = value.groups[groupIndex];
+		if (!group || group.criteria.length >= maxCriteriaPerGroup) return;
+		onChange(criteriaBuilderInsert(value, groupIndex, createCriterion(kind, negate)));
+	}, [
+		createCriterion,
+		maxCriteriaPerGroup,
+		onChange,
+		value
+	]);
+	const addFirst = react.useCallback((kind, negate) => {
+		if (disabled) return;
+		onChange(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, value), {}, { groups: [{
+			id: newGroupId(),
+			logic: "and",
+			criteria: [createCriterion(kind, negate)]
+		}] }));
+	}, [
+		createCriterion,
+		disabled,
+		newGroupId,
+		onChange,
+		value
+	]);
+	const replaceCriterion = react.useCallback((groupIndex, index, kind, negate) => {
+		const group = value.groups[groupIndex];
+		const current = group === null || group === void 0 ? void 0 : group.criteria[index];
+		if (!group || !current) return;
+		const replacement = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, createCriterion(kind, negate)), {}, { id: current.id });
+		onChange(replaceGroup(value, groupIndex, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, group), {}, { criteria: group.criteria.map((c, i) => i === index ? replacement : c) })));
+	}, [
+		createCriterion,
+		onChange,
+		value
+	]);
+	const updateCriterion = react.useCallback((groupIndex, index, patch) => {
+		const group = value.groups[groupIndex];
+		if (!group) return;
+		onChange(replaceGroup(value, groupIndex, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, group), {}, { criteria: group.criteria.map((c, i) => i === index ? require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, c), patch) : c) })));
+	}, [onChange, value]);
+	const findAddTrigger = react.useCallback((groupId) => {
+		var _rootRef$current$quer, _rootRef$current;
+		return (_rootRef$current$quer = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.querySelector(`[data-criteria-add="${groupId.replace(/["\\]/g, "\\$&")}"]`)) !== null && _rootRef$current$quer !== void 0 ? _rootRef$current$quer : null;
+	}, []);
+	react.useEffect(() => {
+		if (!pendingOpen) return;
+		const trigger = findAddTrigger(pendingOpen);
+		if (!trigger) return;
+		setPendingOpen(null);
+		trigger.focus();
+		trigger.click();
+	}, [
+		findAddTrigger,
+		pendingOpen,
+		value
+	]);
+	const handleKeyDown = react.useCallback((event) => {
+		if (disabled || event.defaultPrevented) return;
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		if (isEditableTarget(event.target)) return;
+		const key = event.key.toLowerCase();
+		if (key === "g") {
+			const id = addGroup();
+			if (id) {
+				event.preventDefault();
+				setPendingOpen(id);
+			}
+			return;
+		}
+		if (key === "a") {
+			const host = event.target instanceof Element ? event.target.closest("[data-criteria-group]") : null;
+			const groupId = host === null || host === void 0 ? void 0 : host.dataset.criteriaGroup;
+			const trigger = groupId ? findAddTrigger(groupId) : null;
+			if (trigger && !trigger.disabled) {
+				event.preventDefault();
+				trigger.focus();
+				trigger.click();
+			}
+		}
+	}, [
+		addGroup,
+		disabled,
+		findAddTrigger
+	]);
+	const rootLogicOptions = react.useMemo(() => [{
+		value: "and",
+		label: labels.matchAllGroups
+	}, {
+		value: "or",
+		label: labels.matchAnyGroup
+	}], [labels]);
+	const groupLogicOptions = react.useMemo(() => [{
+		value: "and",
+		label: labels.matchAllCriteria
+	}, {
+		value: "or",
+		label: labels.matchAnyCriteria
+	}], [labels]);
+	const isEmpty = value.groups.length === 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: rootRef,
+		role: "group",
+		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.builder,
+		className: require_text_truncate.cn("gap-section flex flex-col lg:flex-row", className),
+		onKeyDown: handleKeyDown,
+		"data-opt-id": "6F4JG",
+		"data-opt-slug": "criteria-builder.CriteriaBuilder",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "gap-group flex min-w-0 flex-1 flex-col",
+			children: isEmpty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.EmptyState, {
+				title: labels.emptyTitle,
+				description: labels.emptyDescription,
+				hasBorder: true,
+				tone: "subdued",
+				actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KindMenu, {
+					kinds,
+					menuLabel: labels.kindMenuTitle,
+					triggerLabel: labels.emptyAction,
+					triggerAriaLabel: labels.emptyAction,
+					triggerIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { "aria-hidden": "true" }),
+					variant: "secondary",
+					disabled,
+					onPick: addFirst
+				}),
+				footer: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "gap-element inline-flex items-center",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Kbd, {
+							hint: true,
+							children: "A"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Kbd, {
+							hint: true,
+							children: "G"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels.keyboardHint })
+					]
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+					className: "gap-group m-0 flex min-w-0 flex-wrap items-center border-0 p-0",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
+							className: "sr-only",
+							children: labels.rootLogicLegend
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_replay_player_layout.SegmentedControl, {
+							"aria-label": labels.rootLogicLegend,
+							size: "sm",
+							options: rootLogicOptions,
+							value: value.logic,
+							onChange: (logic) => onChange(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, value), {}, { logic })),
+							disabled
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "text-text-tertiary gap-element hidden items-center text-xs sm:inline-flex",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Kbd, {
+									hint: true,
+									children: "A"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Kbd, {
+									hint: true,
+									children: "G"
+								}),
+								labels.keyboardHint
+							]
+						})
+					]
+				}),
+				value.groups.map((group, groupIndex) => {
+					const letter = criteriaGroupLetter(groupIndex);
+					const groupName = labels.groupLabel(letter);
+					const groupLabelId = `${baseId}-${group.id}-label`;
+					const groupError = errors === null || errors === void 0 ? void 0 : errors[group.id];
+					const groupErrorId = `${baseId}-${group.id}-error`;
+					const criteriaFull = group.criteria.length >= maxCriteriaPerGroup;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [groupIndex > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogicDivider, {
+						emphasis: "root",
+						label: value.logic === "and" ? labels.and : labels.or
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						role: "group",
+						"aria-labelledby": groupLabelId,
+						"aria-describedby": groupError ? groupErrorId : void 0,
+						"data-criteria-group": group.id,
+						"data-invalid": groupError ? true : void 0,
+						className: require_text_truncate.cn("bg-bg-subtle gap-element flex flex-col rounded-lg border p-3", groupError ? "border-danger/40" : "border-border"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								id: groupLabelId,
+								className: "sr-only",
+								children: groupName
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "gap-element flex flex-wrap items-center justify-between",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "gap-element flex items-center",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lettermark, { letter }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+										className: "m-0 border-0 p-0",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
+											className: "sr-only",
+											children: labels.groupLogicLegend(letter)
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_replay_player_layout.SegmentedControl, {
+											"aria-label": labels.groupLogicLegend(letter),
+											size: "sm",
+											options: groupLogicOptions,
+											value: group.logic,
+											onChange: (logic) => onChange(replaceGroup(value, groupIndex, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, group), {}, { logic }))),
+											disabled
+										})]
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex items-center gap-0.5",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAction, {
+										icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { "aria-hidden": "true" }),
+										label: labels.actionLabel(labels.duplicateGroup, groupName),
+										disabled: disabled || groupsFull,
+										onClick: () => {
+											const taken = collectIds(value);
+											const id = newGroupId();
+											taken.add(id);
+											onChange(criteriaBuilderDuplicateGroup(value, groupIndex, id, (c) => clone(c, taken)));
+										}
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAction, {
+										icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { "aria-hidden": "true" }),
+										label: labels.actionLabel(labels.removeGroup, groupName),
+										disabled,
+										danger: true,
+										onClick: () => onChange(criteriaBuilderRemoveGroup(value, groupIndex))
+									})]
+								})]
+							}),
+							group.criteria.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-text-tertiary text-xs",
+								children: labels.emptyGroup
+							}),
+							group.criteria.map((criterion, index) => {
+								const criterionName = labels.criterionLabel(letter, index + 1);
+								const rowLabelId = `${baseId}-${criterion.id}-label`;
+								const error = errors === null || errors === void 0 ? void 0 : errors[criterion.id];
+								const errorId = `${baseId}-${criterion.id}-error`;
+								const known = knownKinds.has(criterion.kind);
+								const negated = criterion.negate === true;
+								const api = {
+									update: (patch) => updateCriterion(groupIndex, index, patch),
+									invalid: Boolean(error) || !known,
+									error,
+									disabled,
+									groupIndex,
+									index
+								};
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogicDivider, {
+									emphasis: "group",
+									label: group.logic === "and" ? labels.and : labels.or
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									role: "group",
+									"aria-labelledby": rowLabelId,
+									"aria-describedby": error ? errorId : void 0,
+									"data-criterion-kind": criterion.kind,
+									"data-negated": negated || void 0,
+									"data-invalid": error || !known ? true : void 0,
+									className: require_text_truncate.cn("bg-surface gap-element flex flex-col rounded-md border p-2", error || !known ? "border-danger/40" : "border-border-subtle"),
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											id: rowLabelId,
+											className: "sr-only",
+											children: criterionName
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "gap-element flex flex-wrap items-start",
+											children: [
+												allowNegation && known && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													"aria-pressed": negated,
+													"aria-label": labels.actionLabel(labels.negate, criterionName),
+													disabled,
+													onClick: () => updateCriterion(groupIndex, index, { negate: !negated }),
+													className: require_text_truncate.cn("inline-flex h-7 shrink-0 items-center rounded-md border px-2 text-[11px] font-semibold tracking-wide uppercase transition-colors", negated ? "border-danger/40 bg-danger-subtle text-danger-fg" : "border-border bg-bg-subtle text-text-tertiary hover:text-text-secondary", "disabled:pointer-events-none 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: labels.negate
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: "min-w-0 flex-1",
+													children: known ? renderCriterion(criterion, api) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_replay_player_layout.Callout, {
+														tone: "warning",
+														size: "sm",
+														title: labels.unknownKind(criterion.kind),
+														icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.TriangleAlert, { "aria-hidden": "true" }),
+														action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KindMenu, {
+															kinds,
+															menuLabel: labels.kindMenuTitle,
+															triggerLabel: labels.replaceKind,
+															triggerAriaLabel: labels.actionLabel(labels.replaceKind, criterionName),
+															variant: "secondary",
+															disabled,
+															onPick: (kind, negate) => replaceCriterion(groupIndex, index, kind, negate)
+														}),
+														children: labels.unknownKindDescription
+													})
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: "flex items-center gap-0.5",
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAction, {
+															icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUp, { "aria-hidden": "true" }),
+															label: labels.actionLabel(labels.moveUp, criterionName),
+															disabled: disabled || index === 0,
+															onClick: () => onChange(criteriaBuilderMove(value, groupIndex, index, "up"))
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAction, {
+															icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowDown, { "aria-hidden": "true" }),
+															label: labels.actionLabel(labels.moveDown, criterionName),
+															disabled: disabled || index === group.criteria.length - 1,
+															onClick: () => onChange(criteriaBuilderMove(value, groupIndex, index, "down"))
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAction, {
+															icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { "aria-hidden": "true" }),
+															label: labels.actionLabel(labels.duplicateCriterion, criterionName),
+															disabled: disabled || criteriaFull,
+															onClick: () => onChange(criteriaBuilderDuplicate(value, groupIndex, index, (c) => clone(c, collectIds(value))))
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAction, {
+															icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { "aria-hidden": "true" }),
+															label: labels.actionLabel(labels.removeCriterion, criterionName),
+															disabled,
+															danger: true,
+															onClick: () => onChange(criteriaBuilderRemove(value, groupIndex, index))
+														})
+													]
+												})
+											]
+										}),
+										error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+											id: errorId,
+											className: "text-danger-fg text-xs",
+											children: error
+										})
+									]
+								})] }, criterion.id);
+							}),
+							groupError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								id: groupErrorId,
+								className: "text-danger-fg text-xs",
+								children: groupError
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "gap-element flex flex-wrap items-center",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(KindMenu, {
+									kinds,
+									menuLabel: labels.kindMenuTitle,
+									triggerLabel: labels.addCriterion,
+									triggerAriaLabel: labels.actionLabel(labels.addCriterion, groupName),
+									triggerIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { "aria-hidden": "true" }),
+									disabled: disabled || criteriaFull,
+									disabledReason: labels.maxCriteriaReached(maxCriteriaPerGroup),
+									onPick: (kind, negate) => addCriterion(groupIndex, kind, negate),
+									addTarget: group.id
+								}), criteriaFull && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-text-tertiary text-xs",
+									children: labels.maxCriteriaReached(maxCriteriaPerGroup)
+								})]
+							})
+						]
+					})] }, group.id);
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "gap-element flex flex-wrap items-center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+						variant: "secondary",
+						size: "sm",
+						leftIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { "aria-hidden": "true" }),
+						disabled: disabled || groupsFull,
+						title: groupsFull ? labels.maxGroupsReached(maxGroups) : void 0,
+						onClick: () => {
+							const id = addGroup();
+							if (id) setPendingOpen(id);
+						},
+						children: labels.addGroup
+					}), groupsFull && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-text-tertiary text-xs",
+						children: labels.maxGroupsReached(maxGroups)
+					})]
+				})
+			] })
+		}), aside !== void 0 && aside !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+			className: "min-w-0 lg:w-72 lg:shrink-0",
+			children: aside
+		})]
+	});
+}
+CriteriaBuilder.displayName = "CriteriaBuilder";
+//#endregion
 //#region src/shells/insights-panel.tsx
 const defaultLabels$16 = {
 	title: "Insights",
@@ -4375,7 +5138,7 @@ const flyoutSize = {
 * ```
 */
 function InspectorLayout({ children, inspector, open, onClose, title, description, actions, footer, breakpoint = "xl", width = "md", labels, className }) {
-	const canPush = require_field_sidebar.useMediaQuery(breakpointQuery[breakpoint], true);
+	const canPush = require_replay_player_layout.useMediaQuery(breakpointQuery[breakpoint], true);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: require_text_truncate.cn("flex min-w-0 items-stretch gap-group", className),
 		"data-opt-id": "MN44T",
@@ -4386,7 +5149,7 @@ function InspectorLayout({ children, inspector, open, onClose, title, descriptio
 			children
 		}), canPush ? open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
 			className: require_text_truncate.cn("shrink-0", pushWidth[width]),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_sidebar.Flyout, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_replay_player_layout.Flyout, {
 				open,
 				onClose,
 				type: "inline",
@@ -4398,7 +5161,7 @@ function InspectorLayout({ children, inspector, open, onClose, title, descriptio
 				className: "h-full",
 				children: inspector
 			})
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_sidebar.Flyout, {
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_replay_player_layout.Flyout, {
 			open,
 			onClose,
 			type: "overlay",
@@ -4424,11 +5187,11 @@ const defaultLabels$14 = {
 };
 function toggleValue(query, field, value, active, multiSelect) {
 	if (active) {
-		const remaining = require_field_sidebar.fieldValues(query, field).filter((it) => it !== value);
-		const cleared = require_field_sidebar.withoutField(query, field);
-		return remaining.reduce((next, keep) => require_field_sidebar.withFieldValue(next, field, keep), cleared);
+		const remaining = require_replay_player_layout.fieldValues(query, field).filter((it) => it !== value);
+		const cleared = require_replay_player_layout.withoutField(query, field);
+		return remaining.reduce((next, keep) => require_replay_player_layout.withFieldValue(next, field, keep), cleared);
 	}
-	return multiSelect ? require_field_sidebar.withFieldValue(query, field, value) : require_field_sidebar.withFieldValue(require_field_sidebar.withoutField(query, field), field, value);
+	return multiSelect ? require_replay_player_layout.withFieldValue(query, field, value) : require_replay_player_layout.withFieldValue(require_replay_player_layout.withoutField(query, field), field, value);
 }
 /**
 * QueryFilterBar — filter buttons and a query string that are the same thing.
@@ -4460,7 +5223,7 @@ function toggleValue(query, field, value, active, multiSelect) {
 function QueryFilterBar({ value, onChange, filters, fields, actions, showClauses = true, live = false, disabled = false, labels: customLabels, queryBarLabels, className }) {
 	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$14), customLabels);
 	const activeCount = (0, react.useMemo)(() => filters.reduce((count, filter) => {
-		const values = require_field_sidebar.fieldValues(value, filter.field);
+		const values = require_replay_player_layout.fieldValues(value, filter.field);
 		if (filter.kind === "field_value_selection") return count + values.length;
 		return count + (filter.value && values.includes(filter.value) ? 1 : 0);
 	}, 0), [filters, value]);
@@ -4468,7 +5231,7 @@ function QueryFilterBar({ value, onChange, filters, fields, actions, showClauses
 		className: require_text_truncate.cn("flex flex-col gap-element", className),
 		"data-opt-id": "SK31N",
 		"data-opt-slug": "query-filter-bar.QueryFilterBar",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_sidebar.QueryBar, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_replay_player_layout.QueryBar, {
 			value,
 			onChange,
 			fields,
@@ -4486,7 +5249,7 @@ function QueryFilterBar({ value, onChange, filters, fields, actions, showClauses
 			children: [
 				filters.map((filter) => {
 					var _filter$multiSelect, _filter$value;
-					const values = require_field_sidebar.fieldValues(value, filter.field);
+					const values = require_replay_player_layout.fieldValues(value, filter.field);
 					const multiSelect = (_filter$multiSelect = filter.multiSelect) !== null && _filter$multiSelect !== void 0 ? _filter$multiSelect : true;
 					if (filter.kind === "field_value_selection") {
 						var _filter$options, _filter$options2;
@@ -4569,7 +5332,7 @@ function QueryFilterBar({ value, onChange, filters, fields, actions, showClauses
 }
 /** Whether the bar is filtering anything — for an empty state's wording. */
 function hasActiveQuery(query) {
-	return !require_field_sidebar.isEmptyQuery(query);
+	return !require_replay_player_layout.isEmptyQuery(query);
 }
 //#endregion
 //#region src/shells/catalog-frame.tsx
@@ -4666,7 +5429,7 @@ function CatalogFrame({ children, isEmpty, query, onQueryChange, filters, stats,
 		selectedKeys,
 		onSelectionChange
 	]);
-	const filtering = !require_field_sidebar.isEmptyQuery(query);
+	const filtering = !require_replay_player_layout.isEmptyQuery(query);
 	const body = error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.EmptyState, {
 		tone: "error",
 		hasBorder: true,
@@ -4870,9 +5633,9 @@ const FALLBACK_SWATCHES = [
 	"var(--opt-text)"
 ];
 function buildThemeOptions() {
-	return require_field_sidebar.THEME_PRESET_IDS.map((id) => {
+	return require_replay_player_layout.THEME_PRESET_IDS.map((id) => {
 		var _descriptor$switcherS;
-		const descriptor = require_field_sidebar.THEME_REGISTRY[id];
+		const descriptor = require_replay_player_layout.THEME_REGISTRY[id];
 		return {
 			value: id,
 			label: descriptor.label,
@@ -4953,7 +5716,7 @@ function resolveLabels(user) {
 /** Renders the theme switcher component. */
 function ThemeSwitcher({ className, labels: userLabels, variant = "default", customPresetEditor, preset: controlledPreset, onPresetChange, mode: controlledMode, onModeChange }) {
 	var _ref;
-	const themeContext = require_field_sidebar.useOptionalOptTheme();
+	const themeContext = require_replay_player_layout.useOptionalOptTheme();
 	const preset = controlledPreset !== null && controlledPreset !== void 0 ? controlledPreset : themeContext === null || themeContext === void 0 ? void 0 : themeContext.preset;
 	const mode = (_ref = controlledMode !== null && controlledMode !== void 0 ? controlledMode : themeContext === null || themeContext === void 0 ? void 0 : themeContext.mode) !== null && _ref !== void 0 ? _ref : "light";
 	const setPreset = onPresetChange !== null && onPresetChange !== void 0 ? onPresetChange : themeContext === null || themeContext === void 0 ? void 0 : themeContext.setPreset;
@@ -4962,7 +5725,7 @@ function ThemeSwitcher({ className, labels: userLabels, variant = "default", cus
 	const labels = resolveLabels(userLabels);
 	const options = buildThemeOptions();
 	const activePreset = preset;
-	const forcedMode = require_field_sidebar.FORCE_LIGHT_PRESET_IDS.has(activePreset);
+	const forcedMode = require_replay_player_layout.FORCE_LIGHT_PRESET_IDS.has(activePreset);
 	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", {
@@ -5477,64 +6240,56 @@ ConfirmDialog.displayName = "ConfirmDialog";
 function AsyncCombobox({ onSearch, debounceMs = 300, loadingText, minChars = 1, placeholder, onSelect, labels: customLabels, className }) {
 	const labels = require_text_truncate._objectSpread2({
 		input: placeholder !== null && placeholder !== void 0 ? placeholder : "Search",
+		error: "Search failed. Please try again.",
+		retry: "Retry",
 		loading: loadingText !== null && loadingText !== void 0 ? loadingText : "Loading…",
 		noResults: "No results",
 		placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search…"
 	}, customLabels);
 	const [query, setQuery] = react.useState("");
-	const [results, setResults] = react.useState([]);
-	const [loading, setLoading] = react.useState(false);
-	const timerRef = react.useRef(void 0);
-	const searchGenerationRef = react.useRef(0);
-	const handleInput = react.useCallback((event) => {
-		searchGenerationRef.current += 1;
+	const inputRef = react.useRef(null);
+	const { results, loading, failed, retry, invalidate } = require_replay_player_layout.useAsyncSearch({
+		query,
+		search: onSearch,
+		enabled: query.length >= minChars,
+		debounceMs
+	});
+	const handleInput = (event) => {
+		inputRef.current = event.currentTarget;
+		invalidate();
 		setQuery(event.currentTarget.value);
-	}, []);
-	const handleValueChange = react.useCallback((value) => {
-		searchGenerationRef.current += 1;
-		if (timerRef.current) clearTimeout(timerRef.current);
-		setLoading(false);
-		setResults([]);
+	};
+	const handleValueChange = (value) => {
+		invalidate();
 		onSelect === null || onSelect === void 0 || onSelect(value);
-	}, [onSelect]);
-	react.useEffect(() => {
-		const generation = ++searchGenerationRef.current;
-		if (timerRef.current) clearTimeout(timerRef.current);
-		if (query.length < minChars) {
-			setResults([]);
-			setLoading(false);
-			return;
-		}
-		setLoading(true);
-		timerRef.current = setTimeout(async () => {
-			try {
-				const items = await onSearch(query);
-				if (searchGenerationRef.current !== generation) return;
-				setResults(items);
-			} finally {
-				if (searchGenerationRef.current === generation) setLoading(false);
-			}
-		}, debounceMs);
-		return () => {
-			if (timerRef.current) clearTimeout(timerRef.current);
-		};
-	}, [
-		query,
-		minChars,
-		debounceMs,
-		onSearch
-	]);
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.ComboboxRoot, {
 		onValueChange: handleValueChange,
 		"data-opt-id": "KAKTV",
 		"data-opt-slug": "async-combobox.AsyncCombobox",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxInput, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxInput, require_text_truncate._objectSpread2({
 			className: require_text_truncate.cn(className),
 			"aria-label": labels.input,
 			"aria-busy": loading || void 0,
 			placeholder: labels.placeholder,
 			onInput: handleInput
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxPopover, { children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		}, failed ? {
+			"aria-expanded": false,
+			"aria-controls": void 0
+		} : {})), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxPopover, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, failed ? { role: "presentation" } : {}), {}, { children: failed ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			role: "alert",
+			className: "gap-element flex flex-col px-3 py-2 text-sm",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels.error }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+				variant: "secondary",
+				size: "sm",
+				onClick: () => {
+					var _inputRef$current;
+					retry();
+					(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+				},
+				children: labels.retry
+			})]
+		}) : 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",
@@ -5546,7 +6301,7 @@ function AsyncCombobox({ onSearch, debounceMs = 300, loadingText, minChars = 1,
 		}) : results.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxEmpty, { children: labels.noResults }) : results.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxItem, {
 			value: item,
 			children: item
-		}, item)) })]
+		}, item)) }))]
 	});
 }
 //#endregion
@@ -8177,7 +8932,7 @@ const enStarRatingLabels = {
 };
 const enBreadcrumbLabels = { navAriaLabel: "Go to {label}" };
 //#endregion
-exports.ALL_COMPOUND_THEMES = require_field_sidebar.ALL_COMPOUND_THEMES;
+exports.ALL_COMPOUND_THEMES = require_replay_player_layout.ALL_COMPOUND_THEMES;
 exports.AccordionContent = require_key_pad_menu.AccordionContent;
 exports.AccordionItem = require_key_pad_menu.AccordionItem;
 exports.AccordionRoot = require_key_pad_menu.AccordionRoot;
@@ -8186,7 +8941,7 @@ exports.ActivityFeed = ActivityFeed;
 exports.Alert = require_text_truncate.Alert;
 exports.AlertBuilder = AlertBuilder;
 exports.AlertDialogPanel = require_text_truncate.AlertDialogPanel;
-exports.AppMenubar = require_field_sidebar.AppMenubar;
+exports.AppMenubar = require_replay_player_layout.AppMenubar;
 exports.AppShell = AppShell;
 exports.AsyncCombobox = AsyncCombobox;
 exports.AuditLog = AuditLog;
@@ -8196,12 +8951,12 @@ exports.Avatar = require_key_pad_menu.Avatar;
 exports.AvatarGroup = require_key_pad_menu.AvatarGroup;
 exports.Badge = require_text_truncate.Badge;
 exports.BlockLayout = require_key_pad_menu.BlockLayout;
-exports.BranchSelect = require_field_sidebar.BranchSelect;
+exports.BranchSelect = require_replay_player_layout.BranchSelect;
 exports.Breadcrumb = require_key_pad_menu.Breadcrumb;
 exports.BulkActions = BulkActions;
 exports.Button = require_text_truncate.Button;
 exports.COLOR_PRESETS = COLOR_PRESETS;
-exports.Callout = require_field_sidebar.Callout;
+exports.Callout = require_replay_player_layout.Callout;
 exports.Card = require_key_pad_menu.Card;
 exports.CardContent = require_key_pad_menu.CardContent;
 exports.CardDescription = require_key_pad_menu.CardDescription;
@@ -8230,17 +8985,17 @@ exports.ComboboxInput = require_text_truncate.ComboboxInput;
 exports.ComboboxItem = require_text_truncate.ComboboxItem;
 exports.ComboboxPopover = require_text_truncate.ComboboxPopover;
 exports.ComboboxRoot = require_text_truncate.ComboboxRoot;
-exports.Command = require_field_sidebar.Command;
-exports.CommandDialog = require_field_sidebar.CommandDialog;
-exports.CommandEmpty = require_field_sidebar.CommandEmpty;
-exports.CommandGroup = require_field_sidebar.CommandGroup;
-exports.CommandInput = require_field_sidebar.CommandInput;
-exports.CommandItem = require_field_sidebar.CommandItem;
-exports.CommandList = require_field_sidebar.CommandList;
-exports.CommandPalette = require_field_sidebar.CommandPalette;
-exports.CommandPaletteTrigger = require_field_sidebar.CommandPaletteTrigger;
-exports.CommandSeparator = require_field_sidebar.CommandSeparator;
-exports.CommandShortcut = require_field_sidebar.CommandShortcut;
+exports.Command = require_replay_player_layout.Command;
+exports.CommandDialog = require_replay_player_layout.CommandDialog;
+exports.CommandEmpty = require_replay_player_layout.CommandEmpty;
+exports.CommandGroup = require_replay_player_layout.CommandGroup;
+exports.CommandInput = require_replay_player_layout.CommandInput;
+exports.CommandItem = require_replay_player_layout.CommandItem;
+exports.CommandList = require_replay_player_layout.CommandList;
+exports.CommandPalette = require_replay_player_layout.CommandPalette;
+exports.CommandPaletteTrigger = require_replay_player_layout.CommandPaletteTrigger;
+exports.CommandSeparator = require_replay_player_layout.CommandSeparator;
+exports.CommandShortcut = require_replay_player_layout.CommandShortcut;
 exports.ComparisonSelector = ComparisonSelector;
 exports.Composite = _reopt_ai_opt_ui_primitives.Composite;
 exports.CompositeItem = _reopt_ai_opt_ui_primitives.CompositeItem;
@@ -8251,15 +9006,16 @@ exports.ConditionBuilder = require_key_pad_menu.ConditionBuilder;
 exports.ConfirmDialog = ConfirmDialog;
 exports.ConnectionIndicator = ConnectionIndicator;
 exports.Container = require_key_pad_menu.Container;
-exports.ContentTabs = require_field_sidebar.ContentTabs;
+exports.ContentTabs = require_replay_player_layout.ContentTabs;
 exports.CopyButton = CopyButton;
+exports.CriteriaBuilder = CriteriaBuilder;
 exports.DEFAULT_PRESETS = require_text_truncate.DEFAULT_PRESETS;
-exports.DEFAULT_TIME_PRESETS = require_field_sidebar.DEFAULT_TIME_PRESETS;
-exports.DashboardGrid = require_field_sidebar.DashboardGrid;
+exports.DEFAULT_TIME_PRESETS = require_replay_player_layout.DEFAULT_TIME_PRESETS;
+exports.DashboardGrid = require_replay_player_layout.DashboardGrid;
 exports.DataImportWizard = DataImportWizard;
-exports.DataTable = require_field_sidebar.DataTable;
+exports.DataTable = require_replay_player_layout.DataTable;
 exports.DateRangePicker = require_text_truncate.DateRangePicker;
-exports.DeploymentTimeline = require_field_sidebar.DeploymentTimeline;
+exports.DeploymentTimeline = require_replay_player_layout.DeploymentTimeline;
 exports.DescriptionList = require_text_truncate.DescriptionList;
 exports.DesignGuidePanel = DesignGuidePanel;
 exports.DialogBody = require_text_truncate.DialogBody;
@@ -8274,7 +9030,7 @@ exports.DialogRoot = require_text_truncate.DialogRoot;
 exports.DisclosureContent = require_text_truncate.DisclosureContent;
 exports.DisclosureRoot = require_text_truncate.DisclosureRoot;
 exports.DisclosureTrigger = require_text_truncate.DisclosureTrigger;
-exports.DomainTable = require_field_sidebar.DomainTable;
+exports.DomainTable = require_replay_player_layout.DomainTable;
 exports.DrawerClose = require_key_pad_menu.DrawerClose;
 exports.DrawerPanel = require_key_pad_menu.DrawerPanel;
 exports.DrawerRoot = require_key_pad_menu.DrawerRoot;
@@ -8284,11 +9040,11 @@ exports.DropdownMenu = require_text_truncate.DropdownMenu;
 exports.DropdownSeparator = require_text_truncate.DropdownSeparator;
 exports.DropdownTrigger = require_text_truncate.DropdownTrigger;
 exports.DynamicFieldForm = DynamicFieldForm;
-exports.EMPTY_QUERY = require_field_sidebar.EMPTY_QUERY;
-exports.EMPTY_QUERY_FILTERS = require_field_sidebar.EMPTY_QUERY_FILTERS;
-exports.EditorToolbar = require_field_sidebar.EditorToolbar;
+exports.EMPTY_QUERY = require_replay_player_layout.EMPTY_QUERY;
+exports.EMPTY_QUERY_FILTERS = require_replay_player_layout.EMPTY_QUERY_FILTERS;
+exports.EditorToolbar = require_replay_player_layout.EditorToolbar;
 exports.EmptyState = require_text_truncate.EmptyState;
-exports.EnvPanel = require_field_sidebar.EnvPanel;
+exports.EnvPanel = require_replay_player_layout.EnvPanel;
 exports.ErrorBoundary = ErrorBoundary;
 exports.EventIcon = EventIcon;
 exports.EventMetaEditor = EventMetaEditor;
@@ -8298,25 +9054,25 @@ Object.defineProperty(exports, "EventSparkline", {
 		return _reopt_ai_opt_charts.EventSparkline;
 	}
 });
-exports.EventTimeline = require_field_sidebar.EventTimeline;
+exports.EventTimeline = require_replay_player_layout.EventTimeline;
 exports.ExportButton = ExportButton;
 exports.Expression = require_key_pad_menu.Expression;
 exports.ExpressionGroup = require_key_pad_menu.ExpressionGroup;
 exports.FIELD_TYPE_TOKENS = require_text_truncate.FIELD_TYPE_TOKENS;
-exports.FORCE_LIGHT_PRESETS = require_field_sidebar.FORCE_LIGHT_PRESETS;
-exports.FORCE_LIGHT_PRESET_IDS = require_field_sidebar.FORCE_LIGHT_PRESET_IDS;
+exports.FORCE_LIGHT_PRESETS = require_replay_player_layout.FORCE_LIGHT_PRESETS;
+exports.FORCE_LIGHT_PRESET_IDS = require_replay_player_layout.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.FailureList = require_replay_player_layout.FailureList;
+exports.FaqAccordion = require_replay_player_layout.FaqAccordion;
 exports.FeatureFlagPanel = FeatureFlagPanel;
-exports.FieldSidebar = require_field_sidebar.FieldSidebar;
+exports.FieldSidebar = require_replay_player_layout.FieldSidebar;
 exports.FieldToken = require_text_truncate.FieldToken;
 exports.FieldTokenLegend = require_text_truncate.FieldTokenLegend;
 exports.FileUploadForm = FileUploadForm;
 exports.FilterBar = FilterBar;
 exports.FloatingActionBar = FloatingActionBar;
-exports.Flyout = require_field_sidebar.Flyout;
+exports.Flyout = require_replay_player_layout.Flyout;
 exports.FormCheckbox = require_text_truncate.FormCheckbox;
 exports.FormColorPicker = require_text_truncate.FormColorPicker;
 exports.FormControl = require_text_truncate.FormControl;
@@ -8346,8 +9102,8 @@ exports.FormSubmit = require_text_truncate.FormSubmit;
 exports.FormSwitch = require_text_truncate.FormSwitch;
 exports.FormTagInput = require_text_truncate.FormTagInput;
 exports.FormTextarea = require_text_truncate.FormTextarea;
-exports.GENERATED_THEME_ID_DEFAULT = require_field_sidebar.GENERATED_THEME_ID_DEFAULT;
-exports.GLOBAL_THEME_STYLE_ID = require_field_sidebar.GLOBAL_THEME_STYLE_ID;
+exports.GENERATED_THEME_ID_DEFAULT = require_replay_player_layout.GENERATED_THEME_ID_DEFAULT;
+exports.GLOBAL_THEME_STYLE_ID = require_replay_player_layout.GLOBAL_THEME_STYLE_ID;
 exports.Heading = require_key_pad_menu.Heading;
 exports.Highlight = require_text_truncate.Highlight;
 exports.IconPicker = require_text_truncate.IconPicker;
@@ -8360,10 +9116,10 @@ exports.InspectorLayout = InspectorLayout;
 exports.KanbanBoard = KanbanBoard;
 exports.Kbd = require_text_truncate.Kbd;
 exports.KeyPadMenu = require_key_pad_menu.KeyPadMenu;
-exports.KeyValueEditor = require_field_sidebar.KeyValueEditor;
+exports.KeyValueEditor = require_replay_player_layout.KeyValueEditor;
 exports.LiveRegion = require_key_pad_menu.LiveRegion;
 exports.LoadingOverlay = require_key_pad_menu.LoadingOverlay;
-exports.LogTable = require_field_sidebar.LogTable;
+exports.LogTable = require_replay_player_layout.LogTable;
 exports.Logo = require_key_pad_menu.Logo;
 exports.MegaMenu = MegaMenu;
 exports.MenuButtonArrow = require_text_truncate.MenuButtonArrow;
@@ -8384,12 +9140,12 @@ Object.defineProperty(exports, "MetricsCard", {
 	}
 });
 exports.NotificationCenter = NotificationCenter;
-exports.NotificationToast = require_field_sidebar.NotificationToast;
+exports.NotificationToast = require_replay_player_layout.NotificationToast;
 exports.NumberInput = require_text_truncate.NumberInput;
 exports.OPT_TEXT_PRIMARY = require_text_truncate.OPT_TEXT_PRIMARY;
 exports.OPT_TEXT_SECONDARY = require_text_truncate.OPT_TEXT_SECONDARY;
-exports.OptThemeControllerContext = require_field_sidebar.OptThemeControllerContext;
-exports.OptThemeProvider = require_field_sidebar.OptThemeProvider;
+exports.OptThemeControllerContext = require_replay_player_layout.OptThemeControllerContext;
+exports.OptThemeProvider = require_replay_player_layout.OptThemeProvider;
 exports.OtpField = require_key_pad_menu.OtpField;
 exports.POPULAR_ICONS = POPULAR_ICONS;
 exports.PageAside = PageAside;
@@ -8400,22 +9156,25 @@ exports.PopoverContent = require_text_truncate.PopoverContent;
 exports.PopoverRoot = require_text_truncate.PopoverRoot;
 exports.PopoverTrigger = require_text_truncate.PopoverTrigger;
 exports.Progress = require_key_pad_menu.Progress;
-exports.ProjectSwitcher = require_field_sidebar.ProjectSwitcher;
+exports.ProjectSwitcher = require_replay_player_layout.ProjectSwitcher;
 exports.PromptTemplate = PromptTemplate;
 exports.PropertyExplorer = PropertyExplorer;
-exports.QueryBar = require_field_sidebar.QueryBar;
+exports.QueryBar = require_replay_player_layout.QueryBar;
 exports.QueryFilterBar = QueryFilterBar;
-exports.QueryFiltersMenu = require_field_sidebar.QueryFiltersMenu;
-exports.QueryHistoryList = require_field_sidebar.QueryHistoryList;
-exports.QueryOutputPane = require_field_sidebar.QueryOutputPane;
-exports.QueryResultChart = require_field_sidebar.QueryResultChart;
-exports.QueryResultsTable = require_field_sidebar.QueryResultsTable;
-exports.QueryToolbar = require_field_sidebar.QueryToolbar;
-exports.QueryVariablesMenu = require_field_sidebar.QueryVariablesMenu;
-exports.QueryWorkspace = require_field_sidebar.QueryWorkspace;
+exports.QueryFiltersMenu = require_replay_player_layout.QueryFiltersMenu;
+exports.QueryHistoryList = require_replay_player_layout.QueryHistoryList;
+exports.QueryOutputPane = require_replay_player_layout.QueryOutputPane;
+exports.QueryResultChart = require_replay_player_layout.QueryResultChart;
+exports.QueryResultsTable = require_replay_player_layout.QueryResultsTable;
+exports.QueryToolbar = require_replay_player_layout.QueryToolbar;
+exports.QueryVariablesMenu = require_replay_player_layout.QueryVariablesMenu;
+exports.QueryWorkspace = require_replay_player_layout.QueryWorkspace;
 exports.QuickActions = QuickActions;
 exports.Radio = require_key_pad_menu.Radio;
 exports.RadioGroup = require_key_pad_menu.RadioGroup;
+exports.ReplayPlayerLayout = require_replay_player_layout.ReplayPlayerLayout;
+exports.ReplayScrubber = require_replay_player_layout.ReplayScrubber;
+exports.ReplayTransport = require_replay_player_layout.ReplayTransport;
 exports.ReportBuilder = ReportBuilder;
 Object.defineProperty(exports, "ReportWidget", {
 	enumerable: true,
@@ -8433,25 +9192,25 @@ 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.SaveQueryDialog = require_field_sidebar.SaveQueryDialog;
+exports.SaveQueryDialog = require_replay_player_layout.SaveQueryDialog;
 exports.SavedFilters = SavedFilters;
-exports.SchemaTree = require_field_sidebar.SchemaTree;
-exports.ScoreBreakdown = require_field_sidebar.ScoreBreakdown;
+exports.SchemaTree = require_replay_player_layout.SchemaTree;
+exports.ScoreBreakdown = require_replay_player_layout.ScoreBreakdown;
 exports.ScrollArea = require_key_pad_menu.ScrollArea;
-exports.SearchCombobox = require_field_sidebar.SearchCombobox;
+exports.SearchCombobox = require_replay_player_layout.SearchCombobox;
 exports.Section = require_key_pad_menu.Section;
 exports.SegmentBuilder = SegmentBuilder;
-exports.SegmentedControl = require_field_sidebar.SegmentedControl;
+exports.SegmentedControl = require_replay_player_layout.SegmentedControl;
 exports.SelectItem = require_text_truncate.SelectItem;
 exports.SelectLabel = require_text_truncate.SelectLabel;
 exports.SelectPopover = require_text_truncate.SelectPopover;
 exports.SelectRoot = require_text_truncate.SelectRoot;
 exports.SelectTrigger = require_text_truncate.SelectTrigger;
 exports.Separator = require_key_pad_menu.Separator;
-exports.SettingsForm = require_field_sidebar.SettingsForm;
+exports.SettingsForm = require_replay_player_layout.SettingsForm;
 exports.ShaderSurface = require_key_pad_menu.ShaderSurface;
 exports.Sidebar = Sidebar;
-exports.SidebarNav = require_field_sidebar.SidebarNav;
+exports.SidebarNav = require_replay_player_layout.SidebarNav;
 exports.Skeleton = require_text_truncate.Skeleton;
 exports.SkeletonAvatar = require_text_truncate.SkeletonAvatar;
 exports.SkeletonCard = require_text_truncate.SkeletonCard;
@@ -8460,20 +9219,20 @@ exports.SkeletonText = require_text_truncate.SkeletonText;
 exports.Slider = require_text_truncate.Slider;
 exports.SpatialNavProvider = SpatialNavProvider;
 exports.Spinner = require_text_truncate.Spinner;
-exports.SqlEditor = require_field_sidebar.SqlEditor;
+exports.SqlEditor = require_replay_player_layout.SqlEditor;
 exports.StarRating = require_text_truncate.StarRating;
 exports.StatCard = require_text_truncate.StatCard;
 exports.StatusDot = StatusDot;
-exports.StatusSelect = require_field_sidebar.StatusSelect;
+exports.StatusSelect = require_replay_player_layout.StatusSelect;
 exports.StepBuilder = require_key_pad_menu.StepBuilder;
 exports.SummaryRow = SummaryRow;
 exports.SurfaceLayout = require_key_pad_menu.BlockLayout;
 exports.Switch = require_text_truncate.Switch;
 exports.THEME_PALETTES = require_key_pad_menu.THEME_PALETTES;
-exports.THEME_PRESET_IDS = require_field_sidebar.THEME_PRESET_IDS;
-exports.THEME_REGISTRY = require_field_sidebar.THEME_REGISTRY;
-exports.THEME_SPEC_STORAGE_KEY = require_field_sidebar.THEME_SPEC_STORAGE_KEY;
-exports.THEME_TOKENS_STORAGE_KEY = require_field_sidebar.THEME_TOKENS_STORAGE_KEY;
+exports.THEME_PRESET_IDS = require_replay_player_layout.THEME_PRESET_IDS;
+exports.THEME_REGISTRY = require_replay_player_layout.THEME_REGISTRY;
+exports.THEME_SPEC_STORAGE_KEY = require_replay_player_layout.THEME_SPEC_STORAGE_KEY;
+exports.THEME_TOKENS_STORAGE_KEY = require_replay_player_layout.THEME_TOKENS_STORAGE_KEY;
 exports.Tab = require_text_truncate.Tab;
 exports.TabList = require_text_truncate.TabList;
 exports.TabPanel = require_text_truncate.TabPanel;
@@ -8486,12 +9245,12 @@ exports.Text = require_key_pad_menu.Text;
 exports.TextTruncate = require_text_truncate.TextTruncate;
 exports.Textarea = require_text_truncate.Textarea;
 exports.ThemeSwitcher = ThemeSwitcher;
-exports.TimeRangeControl = require_field_sidebar.TimeRangeControl;
+exports.TimeRangeControl = require_replay_player_layout.TimeRangeControl;
 exports.TimeRangeSelector = TimeRangeSelector;
-exports.TimeSeriesPanel = require_field_sidebar.TimeSeriesPanel;
-exports.ToastProvider = require_field_sidebar.ToastProvider;
-exports.Toggle = require_key_pad_menu.Toggle;
-exports.ToggleGroup = require_key_pad_menu.ToggleGroup;
+exports.TimeSeriesPanel = require_replay_player_layout.TimeSeriesPanel;
+exports.ToastProvider = require_replay_player_layout.ToastProvider;
+exports.Toggle = require_text_truncate.Toggle;
+exports.ToggleGroup = require_text_truncate.ToggleGroup;
 exports.ToolbarButton = require_text_truncate.ToolbarButton;
 exports.ToolbarContainer = require_text_truncate.ToolbarContainer;
 exports.ToolbarRoot = require_text_truncate.ToolbarRoot;
@@ -8506,96 +9265,106 @@ Object.defineProperty(exports, "TrendChart", {
 		return _reopt_ai_opt_charts.TrendChart;
 	}
 });
-exports.VALUELESS_OPERATORS = require_field_sidebar.VALUELESS_OPERATORS;
+exports.VALUELESS_OPERATORS = require_replay_player_layout.VALUELESS_OPERATORS;
 exports.VerticalTabs = VerticalTabs;
 exports.VirtualList = require_key_pad_menu.VirtualList;
 exports.WebhookConfig = WebhookConfig;
 exports.WidgetGrid = WidgetGrid;
 exports.WizardForm = WizardForm;
-exports.WorkflowCanvas = require_field_sidebar.WorkflowCanvas;
-exports.addClause = require_field_sidebar.addClause;
-exports.applyCellAction = require_field_sidebar.applyCellAction;
-exports.buildTokenCache = require_field_sidebar.buildTokenCache;
+exports.WorkflowCanvas = require_replay_player_layout.WorkflowCanvas;
+exports.addClause = require_replay_player_layout.addClause;
+exports.applyCellAction = require_replay_player_layout.applyCellAction;
+exports.buildTokenCache = require_replay_player_layout.buildTokenCache;
 exports.cn = require_text_truncate.cn;
-exports.coerceThemeMode = require_field_sidebar.coerceThemeMode;
-exports.computeGeneratedTokens = require_field_sidebar.computeGeneratedTokens;
+exports.coerceThemeMode = require_replay_player_layout.coerceThemeMode;
+exports.computeGeneratedTokens = require_replay_player_layout.computeGeneratedTokens;
 exports.computeSpatialTargets = computeSpatialTargets;
-exports.countActiveQueryFilters = require_field_sidebar.countActiveQueryFilters;
+exports.countActiveQueryFilters = require_replay_player_layout.countActiveQueryFilters;
 exports.createBlock = require_key_pad_menu.createBlock;
 exports.createSurface = require_key_pad_menu.createBlock;
-exports.createThemeBootScript = require_field_sidebar.createThemeBootScript;
-exports.defaultQueryChartConfig = require_field_sidebar.defaultQueryChartConfig;
-exports.defineThemeOverrides = require_field_sidebar.defineThemeOverrides;
-exports.describeClause = require_field_sidebar.describeClause;
+exports.createThemeBootScript = require_replay_player_layout.createThemeBootScript;
+exports.criteriaBuilderDuplicate = criteriaBuilderDuplicate;
+exports.criteriaBuilderDuplicateGroup = criteriaBuilderDuplicateGroup;
+exports.criteriaBuilderInsert = criteriaBuilderInsert;
+exports.criteriaBuilderMove = criteriaBuilderMove;
+exports.criteriaBuilderRemove = criteriaBuilderRemove;
+exports.criteriaBuilderRemoveGroup = criteriaBuilderRemoveGroup;
+exports.criteriaGroupLetter = criteriaGroupLetter;
+exports.defaultQueryChartConfig = require_replay_player_layout.defaultQueryChartConfig;
+exports.defineThemeOverrides = require_replay_player_layout.defineThemeOverrides;
+exports.describeClause = require_replay_player_layout.describeClause;
 exports.enBreadcrumbLabels = enBreadcrumbLabels;
 exports.enComboboxLabels = enComboboxLabels;
 exports.enStarRatingLabels = enStarRatingLabels;
-exports.fieldValues = require_field_sidebar.fieldValues;
-exports.formatClause = require_field_sidebar.formatClause;
+exports.fieldValues = require_replay_player_layout.fieldValues;
+exports.formatClause = require_replay_player_layout.formatClause;
 exports.formatOptDateTime = require_text_truncate.formatOptDateTime;
 exports.formatOptNumber = require_text_truncate.formatOptNumber;
 exports.formatOptShortDate = require_text_truncate.formatOptShortDate;
 exports.formatOptTime = require_text_truncate.formatOptTime;
-exports.formatQuery = require_field_sidebar.formatQuery;
-exports.formatQueryCell = require_field_sidebar.formatQueryCell;
-exports.generatedTheme = require_field_sidebar.generatedTheme;
-exports.getCompoundIdForSpec = require_field_sidebar.getCompoundIdForSpec;
-exports.getCompoundTheme = require_field_sidebar.getCompoundTheme;
+exports.formatQuery = require_replay_player_layout.formatQuery;
+exports.formatQueryCell = require_replay_player_layout.formatQueryCell;
+exports.formatReplayElapsed = require_replay_player_layout.formatReplayElapsed;
+exports.generatedTheme = require_replay_player_layout.generatedTheme;
+exports.getCompoundIdForSpec = require_replay_player_layout.getCompoundIdForSpec;
+exports.getCompoundTheme = require_replay_player_layout.getCompoundTheme;
 exports.getShaderFragment = require_key_pad_menu.getShaderFragment;
 exports.getShaderPreset = require_key_pad_menu.getShaderPreset;
-exports.getThemeDescriptor = require_field_sidebar.getThemeDescriptor;
+exports.getThemeDescriptor = require_replay_player_layout.getThemeDescriptor;
 exports.getTrappedContextRole = getTrappedContextRole;
+exports.groupReplayMarkers = require_replay_player_layout.groupReplayMarkers;
 exports.hasActiveQuery = hasActiveQuery;
-exports.hasActiveQueryFilters = require_field_sidebar.hasActiveQueryFilters;
-exports.isDescriptorSpec = require_field_sidebar.isDescriptorSpec;
-exports.isEmptyQuery = require_field_sidebar.isEmptyQuery;
-exports.isForceLightSpec = require_field_sidebar.isForceLightSpec;
-exports.isGeneratedSpec = require_field_sidebar.isGeneratedSpec;
-exports.isPresetSpec = require_field_sidebar.isPresetSpec;
-exports.isThemePresetId = require_field_sidebar.isThemePresetId;
-exports.isValidQueryVariableName = require_field_sidebar.isValidQueryVariableName;
+exports.hasActiveQueryFilters = require_replay_player_layout.hasActiveQueryFilters;
+exports.isDescriptorSpec = require_replay_player_layout.isDescriptorSpec;
+exports.isEmptyQuery = require_replay_player_layout.isEmptyQuery;
+exports.isForceLightSpec = require_replay_player_layout.isForceLightSpec;
+exports.isGeneratedSpec = require_replay_player_layout.isGeneratedSpec;
+exports.isPresetSpec = require_replay_player_layout.isPresetSpec;
+exports.isThemePresetId = require_replay_player_layout.isThemePresetId;
+exports.isValidQueryVariableName = require_replay_player_layout.isValidQueryVariableName;
 exports.koBreadcrumbLabels = require_text_truncate.koBreadcrumbLabels;
 exports.koComboboxLabels = require_text_truncate.koComboboxLabels;
 exports.koStarRatingLabels = require_text_truncate.koStarRatingLabels;
 exports.matchesQuery = matchesQuery;
 exports.matchesQueryObject = matchesQueryObject;
-exports.numericResultColumns = require_field_sidebar.numericResultColumns;
-exports.parseQuery = require_field_sidebar.parseQuery;
-exports.parseQueryWithDiagnostics = require_field_sidebar.parseQueryWithDiagnostics;
-exports.presetTheme = require_field_sidebar.presetTheme;
-exports.queryFields = require_field_sidebar.queryFields;
-exports.quoteValue = require_field_sidebar.quoteValue;
-exports.readStoredTheme = require_field_sidebar.readStoredTheme;
-exports.removeClause = require_field_sidebar.removeClause;
+exports.numericResultColumns = require_replay_player_layout.numericResultColumns;
+exports.parseQuery = require_replay_player_layout.parseQuery;
+exports.parseQueryWithDiagnostics = require_replay_player_layout.parseQueryWithDiagnostics;
+exports.presetTheme = require_replay_player_layout.presetTheme;
+exports.queryFields = require_replay_player_layout.queryFields;
+exports.quoteValue = require_replay_player_layout.quoteValue;
+exports.readStoredTheme = require_replay_player_layout.readStoredTheme;
+exports.removeClause = require_replay_player_layout.removeClause;
 exports.replaceSqlPlaceholder = replaceSqlPlaceholder;
-exports.resolveDescriptor = require_field_sidebar.resolveDescriptor;
+exports.replayShortcutKey = require_replay_player_layout.replayShortcutKey;
+exports.resolveDescriptor = require_replay_player_layout.resolveDescriptor;
 exports.resolveFieldType = require_text_truncate.resolveFieldType;
-exports.resolveThemeMode = require_field_sidebar.resolveThemeMode;
-exports.safeParseStoredSpec = require_field_sidebar.safeParseStoredSpec;
-exports.safeParseStoredTokens = require_field_sidebar.safeParseStoredTokens;
+exports.resolveThemeMode = require_replay_player_layout.resolveThemeMode;
+exports.safeParseStoredSpec = require_replay_player_layout.safeParseStoredSpec;
+exports.safeParseStoredTokens = require_replay_player_layout.safeParseStoredTokens;
 exports.schemaValidator = schemaValidator;
-exports.serializeGeneratedTheme = require_field_sidebar.serializeGeneratedTheme;
-exports.serializeThemeRule = require_field_sidebar.serializeThemeRule;
-exports.serializeTokenBody = require_field_sidebar.serializeTokenBody;
+exports.serializeGeneratedTheme = require_replay_player_layout.serializeGeneratedTheme;
+exports.serializeThemeRule = require_replay_player_layout.serializeThemeRule;
+exports.serializeTokenBody = require_replay_player_layout.serializeTokenBody;
 exports.shouldSkipArrow = shouldSkipArrow;
 exports.splitSqlStatements = splitSqlStatements;
 exports.sqlPlaceholderNames = sqlPlaceholderNames;
 exports.sqlStatementAtOffset = sqlStatementAtOffset;
 exports.sqlUsesPlaceholder = sqlUsesPlaceholder;
-exports.toast = require_field_sidebar.toast;
-exports.useAutoRefresh = require_field_sidebar.useAutoRefresh;
+exports.toast = require_replay_player_layout.toast;
+exports.useAutoRefresh = require_replay_player_layout.useAutoRefresh;
 exports.useControlledState = require_text_truncate.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_text_truncate.useInputId;
-exports.useOptTheme = require_field_sidebar.useOptTheme;
-exports.useOptThemeController = require_field_sidebar.useOptThemeController;
-exports.useOptionalOptTheme = require_field_sidebar.useOptionalOptTheme;
+exports.useOptTheme = require_replay_player_layout.useOptTheme;
+exports.useOptThemeController = require_replay_player_layout.useOptThemeController;
+exports.useOptionalOptTheme = require_replay_player_layout.useOptionalOptTheme;
 exports.useSidebar = useSidebar;
-exports.useToast = require_field_sidebar.useToast;
-exports.withFieldValue = require_field_sidebar.withFieldValue;
-exports.withoutField = require_field_sidebar.withoutField;
+exports.useToast = require_replay_player_layout.useToast;
+exports.withFieldValue = require_replay_player_layout.withFieldValue;
+exports.withoutField = require_replay_player_layout.withoutField;
 Object.keys(_reopt_ai_opt_charts).forEach(function(k) {
 	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,