@reopt-ai/opt-ui 1.14.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-BgtSL3xe.cjs");
-const require_field_sidebar = require("./field-sidebar-ePqFX6MN.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);
@@ -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",
@@ -4217,7 +4283,7 @@ function CriteriaBuilder({ value, onChange, kinds, createCriterion, renderCriter
 							className: "sr-only",
 							children: labels.rootLogicLegend
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_sidebar.SegmentedControl, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_replay_player_layout.SegmentedControl, {
 							"aria-label": labels.rootLogicLegend,
 							size: "sm",
 							options: rootLogicOptions,
@@ -4273,7 +4339,7 @@ function CriteriaBuilder({ value, onChange, kinds, createCriterion, renderCriter
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
 											className: "sr-only",
 											children: labels.groupLogicLegend(letter)
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_sidebar.SegmentedControl, {
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_replay_player_layout.SegmentedControl, {
 											"aria-label": labels.groupLogicLegend(letter),
 											size: "sm",
 											options: groupLogicOptions,
@@ -4353,7 +4419,7 @@ function CriteriaBuilder({ value, onChange, kinds, createCriterion, renderCriter
 												}),
 												/* @__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_field_sidebar.Callout, {
+													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),
@@ -5072,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",
@@ -5083,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",
@@ -5095,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",
@@ -5121,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.
@@ -5157,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]);
@@ -5165,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,
@@ -5183,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;
@@ -5266,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
@@ -5363,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,
@@ -5567,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,
@@ -5650,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;
@@ -5659,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", {
@@ -6174,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",
@@ -6243,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
@@ -8874,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;
@@ -8883,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;
@@ -8893,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;
@@ -8927,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;
@@ -8948,16 +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;
@@ -8972,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;
@@ -8982,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;
@@ -8996,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;
@@ -9044,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;
@@ -9058,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;
@@ -9082,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;
@@ -9098,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,
@@ -9131,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;
@@ -9158,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;
@@ -9184,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;
@@ -9204,24 +9265,24 @@ 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.createThemeBootScript = require_replay_player_layout.createThemeBootScript;
 exports.criteriaBuilderDuplicate = criteriaBuilderDuplicate;
 exports.criteriaBuilderDuplicateGroup = criteriaBuilderDuplicateGroup;
 exports.criteriaBuilderInsert = criteriaBuilderInsert;
@@ -9229,78 +9290,81 @@ exports.criteriaBuilderMove = criteriaBuilderMove;
 exports.criteriaBuilderRemove = criteriaBuilderRemove;
 exports.criteriaBuilderRemoveGroup = criteriaBuilderRemoveGroup;
 exports.criteriaGroupLetter = criteriaGroupLetter;
-exports.defaultQueryChartConfig = require_field_sidebar.defaultQueryChartConfig;
-exports.defineThemeOverrides = require_field_sidebar.defineThemeOverrides;
-exports.describeClause = require_field_sidebar.describeClause;
+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,