@reopt-ai/opt-ui 1.13.0 → 1.15.0

package/dist/{field-sidebar-CxxSK4JO.cjs → replay-player-layout-Cmzptq89.cjs}

@@ -1,5 +1,5 @@
 "use client";
-const require_text_truncate = require("./text-truncate-BeYW6XZu.cjs");
+const require_text_truncate = require("./text-truncate-gQhpMy-Z.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_text_truncate.__toESM(react, 1);
@@ -278,7 +278,7 @@ function CommandGroup(_ref5) {
 			className: "text-text-tertiary px-2 py-1.5 text-xs font-medium",
 			children: heading
 		}) : void 0,
-		className: require_text_truncate.cn("py-1", className)
+		className: require_text_truncate.cn("py-1 [&:not(:has([data-slot=command-item]))]:hidden", className)
 	}, props), {}, {
 		"data-opt-id": "JPK1Y",
 		"data-opt-slug": "command.CommandGroup"
@@ -359,16 +359,20 @@ function CommandPalette({ commands, open, onOpenChange, onSelect, inline = false
 			"aria-label": resolvedLabels.list,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandEmpty, { children: empty !== null && empty !== void 0 ? empty : resolvedLabels.empty }), hasCommands ? Array.from(grouped.entries()).map(([group, items]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandGroup, {
 				heading: group,
-				children: items.map((cmd) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CommandItem, {
-					value: cmd.id,
-					keywords: [
-						cmd.label,
-						cmd.group,
-						...cmd.shortcut ? [cmd.shortcut] : []
-					],
-					onSelect: handleSelect,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: cmd.label }), cmd.shortcut && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandShortcut, { children: cmd.shortcut })]
-				}, cmd.id))
+				children: items.map((cmd) => {
+					var _cmd$keywords;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CommandItem, {
+						value: cmd.id,
+						keywords: [
+							cmd.label,
+							cmd.group,
+							...(_cmd$keywords = cmd.keywords) !== null && _cmd$keywords !== void 0 ? _cmd$keywords : [],
+							...cmd.shortcut ? [cmd.shortcut] : []
+						],
+						onSelect: handleSelect,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: cmd.label }), cmd.shortcut && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandShortcut, { children: cmd.shortcut })]
+					}, cmd.id);
+				})
 			}, group)) : null]
 		}),
 		footer
@@ -458,9 +462,65 @@ function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
 	});
 }
 //#endregion
+//#region src/lib/use-async-search.ts
+/** Debounced search with explicit failure and latest-request-only results. */
+function useAsyncSearch({ query, search, enabled, debounceMs }) {
+	const [results, setResults] = (0, react.useState)([]);
+	const [loading, setLoading] = (0, react.useState)(false);
+	const [failed, setFailed] = (0, react.useState)(false);
+	const [attempt, setAttempt] = (0, react.useState)(0);
+	const generationRef = (0, react.useRef)(0);
+	const timerRef = (0, react.useRef)(void 0);
+	const invalidate = (0, react.useCallback)(() => {
+		generationRef.current += 1;
+		clearTimeout(timerRef.current);
+		setResults([]);
+		setLoading(false);
+		setFailed(false);
+	}, []);
+	(0, react.useEffect)(() => {
+		const generation = ++generationRef.current;
+		setResults([]);
+		setFailed(false);
+		setLoading(enabled && Boolean(search));
+		if (enabled && search) timerRef.current = setTimeout(async () => {
+			try {
+				const items = await search(query);
+				if (generationRef.current === generation) setResults(items);
+			} catch (_unused) {
+				if (generationRef.current === generation) setFailed(true);
+			} finally {
+				if (generationRef.current === generation) setLoading(false);
+			}
+		}, debounceMs);
+		return () => {
+			generationRef.current += 1;
+			clearTimeout(timerRef.current);
+		};
+	}, [
+		query,
+		search,
+		enabled,
+		debounceMs,
+		attempt
+	]);
+	return {
+		results,
+		loading,
+		failed,
+		retry: (0, react.useCallback)(() => {
+			invalidate();
+			setAttempt((current) => current + 1);
+		}, [invalidate]),
+		invalidate
+	};
+}
+//#endregion
 //#region src/shells/search-combobox.tsx
 const defaultLabels$33 = {
 	noResults: "결과가 없습니다.",
+	error: "검색에 실패했습니다. 다시 시도해주세요.",
+	retry: "다시 시도",
 	loading: "Loading…"
 };
 /** Renders the search combobox component. */
@@ -468,10 +528,13 @@ function SearchCombobox({ items, placeholder = "검색...", label = "검색", on
 	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$33), customLabels);
 	const inputId = (0, react.useId)();
 	const [query, setQuery] = (0, react.useState)("");
-	const [asyncResults, setAsyncResults] = (0, react.useState)([]);
-	const [loading, setLoading] = (0, react.useState)(false);
-	const timerRef = (0, react.useRef)(void 0);
-	const searchGenerationRef = (0, react.useRef)(0);
+	const inputRef = (0, react.useRef)(null);
+	const { results: asyncResults, loading, failed, retry, invalidate } = useAsyncSearch({
+		query,
+		search: onSearch,
+		enabled: isAsync && Boolean(query),
+		debounceMs
+	});
 	const syncMatches = (0, react.useMemo)(() => {
 		if (isAsync) return [];
 		if (!query) return items;
@@ -482,45 +545,15 @@ function SearchCombobox({ items, placeholder = "검색...", label = "검색", on
 		isAsync
 	]);
 	const handleInput = (event) => {
-		searchGenerationRef.current += 1;
+		inputRef.current = event.currentTarget;
+		invalidate();
 		setQuery(event.currentTarget.value);
 	};
 	const handleValueChange = (item) => {
-		searchGenerationRef.current += 1;
+		invalidate();
 		setQuery(item);
 		onSelect === null || onSelect === void 0 || onSelect(item);
 	};
-	(0, react.useEffect)(() => {
-		const generation = ++searchGenerationRef.current;
-		if (timerRef.current) clearTimeout(timerRef.current);
-		if (!isAsync || !onSearch) {
-			setLoading(false);
-			return;
-		}
-		if (!query) {
-			setAsyncResults([]);
-			setLoading(false);
-			return;
-		}
-		setLoading(true);
-		timerRef.current = setTimeout(async () => {
-			try {
-				const results = await onSearch(query);
-				if (searchGenerationRef.current !== generation) return;
-				setAsyncResults(results);
-			} finally {
-				if (searchGenerationRef.current === generation) setLoading(false);
-			}
-		}, debounceMs);
-		return () => {
-			if (timerRef.current) clearTimeout(timerRef.current);
-		};
-	}, [
-		query,
-		isAsync,
-		onSearch,
-		debounceMs
-	]);
 	const matches = isAsync ? asyncResults : syncMatches;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "gap-element flex flex-col",
@@ -534,29 +567,42 @@ function SearchCombobox({ items, placeholder = "검색...", label = "검색", on
 					className: require_text_truncate.OPT_TEXT_LABEL,
 					children: label
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxInput, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxInput, require_text_truncate._objectSpread2({
 					id: inputId,
 					placeholder,
 					className: "max-w-xs",
 					"aria-busy": loading || void 0,
 					onInput: handleInput
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxPopover, {
-					className: "max-w-xs",
-					children: isAsync && loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "text-text-secondary gap-element flex items-center px-3 py-2 text-sm",
-						role: "status",
-						"aria-live": "polite",
-						"aria-busy": "true",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Spinner, {
-							size: "sm",
-							"aria-hidden": "true"
-						}), labels.loading]
-					}) : matches.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxEmpty, { children: labels.noResults }) : matches.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxItem, {
-						value: item,
-						children: item
-					}, item))
-				})
+				}, 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({ className: "max-w-xs" }, failed ? { role: "presentation" } : {}), {}, { children: isAsync && 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
+					})]
+				}) : isAsync && loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-text-secondary gap-element flex items-center px-3 py-2 text-sm",
+					role: "status",
+					"aria-live": "polite",
+					"aria-busy": "true",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Spinner, {
+						size: "sm",
+						"aria-hidden": "true"
+					}), labels.loading]
+				}) : matches.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxEmpty, { children: labels.noResults }) : matches.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ComboboxItem, {
+					value: item,
+					children: item
+				}, item)) }))
 			]
 		})
 	});
@@ -901,13 +947,16 @@ function FaqAccordion({ items, labels: customLabels }) {
 //#region src/shells/settings-form.tsx
 const defaultLabels$26 = {
 	formAriaLabel: "설정 폼",
+	submitError: "저장에 실패했습니다. 다시 시도해주세요.",
 	submitButton: "저장",
 	successMessage: "설정이 저장되었습니다."
 };
 /** Renders the settings form component. */
 function SettingsForm({ fields, onSubmit, labels: customLabels }) {
+	var _labels$submitError;
 	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$26), customLabels);
 	const [submitted, setSubmitted] = (0, react.useState)(false);
+	const formId = (0, react.useId)();
 	const defaultValues = {};
 	for (const field of fields) {
 		var _field$defaultValue;
@@ -933,9 +982,10 @@ function SettingsForm({ fields, onSubmit, labels: customLabels }) {
 			}
 			return errors;
 		},
-		onSubmit: (values) => {
+		onSubmit: async (values) => {
+			setSubmitted(false);
+			await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(values));
 			setSubmitted(true);
-			onSubmit === null || onSubmit === void 0 || onSubmit(values);
 		}
 	});
 	if (fields.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.EmptyState, {
@@ -948,138 +998,142 @@ function SettingsForm({ fields, onSubmit, labels: customLabels }) {
 		className: "gap-group flex flex-col",
 		"data-opt-id": "9TEEJ",
 		"data-opt-slug": "settings-form.SettingsForm",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormRoot, {
-			store: form,
-			"aria-label": labels.formAriaLabel,
-			children: [fields.map((field) => {
-				var _field$type;
-				if (field.visible !== void 0) {
-					const currentValues = form.getValues();
-					if (!(typeof field.visible === "function" ? field.visible(currentValues) : field.visible)) return null;
-				}
-				if (field.type === "tags") {
-					const rawValue = form.getValue(field.name);
-					const tags = Array.isArray(rawValue) ? rawValue : [];
-					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: field.name,
-								children: field.label
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TagInput, {
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.FormRoot, {
+				store: form,
+				"aria-label": labels.formAriaLabel,
+				children: [fields.map((field) => {
+					var _field$type;
+					if (field.visible !== void 0) {
+						const currentValues = form.getValues();
+						if (!(typeof field.visible === "function" ? field.visible(currentValues) : field.visible)) return null;
+					}
+					if (field.type === "tags") {
+						const rawValue = form.getValue(field.name);
+						const tags = Array.isArray(rawValue) ? rawValue : [];
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormField, {
+							name: field.name,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TagInput, {
+								label: field.label,
 								value: tags,
 								onChange: (next) => form.setValue(field.name, next),
-								placeholder: field.placeholder
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })
-						]
+								placeholder: field.placeholder,
+								error: form.getFieldTouched(field.name) ? form.getError(field.name) : void 0
+							})
+						}, field.name);
+					}
+					if (field.type === "radio") {
+						var _field$options;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+							className: "gap-element flex flex-col",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
+									className: "text-text-primary text-sm font-medium",
+									children: field.label
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormRadioGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "gap-group flex",
+									children: (_field$options = field.options) === null || _field$options === void 0 ? void 0 : _field$options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+										className: "text-text-primary gap-element flex items-center text-sm",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormRadio, {
+											name: field.name,
+											value: option.value
+										}), option.label]
+									}, option.value))
+								}) }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })
+							]
+						}, field.name);
+					}
+					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 })]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })]
 					}, field.name);
-				}
-				if (field.type === "radio") {
-					var _field$options;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
-						className: "gap-element flex flex-col",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
+					if (field.type === "textarea") {
+						var _field$rows, _field$resize;
+						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, { children: field.label }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormTextarea, {
+									name: field.name,
+									placeholder: field.placeholder,
+									rows: (_field$rows = field.rows) !== null && _field$rows !== void 0 ? _field$rows : 4,
+									resize: (_field$resize = field.resize) !== null && _field$resize !== void 0 ? _field$resize : "vertical",
+									className: field.font === "mono" ? "font-mono text-sm" : void 0
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })
+							]
+						}, field.name);
+					}
+					if (field.type === "select") {
+						var _field$options2;
+						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, {
+									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,
+									id: `${formId}-${field.name}-error`
+								})
+							]
+						}, field.name);
+					}
+					if (field.type === "switch") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "gap-group flex items-center",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSwitch, { name: field.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "text-text-primary text-sm font-medium",
 								children: field.label
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormRadioGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "gap-group flex",
-								children: (_field$options = field.options) === null || _field$options === void 0 ? void 0 : _field$options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-									className: "text-text-primary gap-element flex items-center text-sm",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormRadio, {
-										name: field.name,
-										value: option.value
-									}), option.label]
-								}, option.value))
-							}) }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })
-						]
-					}, field.name);
-				}
-				if (field.type === "checkbox") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "gap-element flex flex-col",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-						className: "text-text-primary gap-element flex items-center text-sm",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormCheckbox, { name: field.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: field.label })]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })]
-				}, field.name);
-				if (field.type === "textarea") {
-					var _field$rows, _field$resize;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "gap-element flex flex-col",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormLabel, {
-								name: field.name,
-								children: field.label
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormTextarea, {
-								name: field.name,
-								placeholder: field.placeholder,
-								rows: (_field$rows = field.rows) !== null && _field$rows !== void 0 ? _field$rows : 4,
-								resize: (_field$resize = field.resize) !== null && _field$resize !== void 0 ? _field$resize : "vertical",
-								className: field.font === "mono" ? "font-mono text-sm" : void 0
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })
-						]
+							}), field.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-text-secondary text-sm",
+								children: field.description
+							})]
+						})]
 					}, field.name);
-				}
-				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,
-								children: field.label
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSelect, {
+							/* @__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,
-								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)) })
+								type: (_field$type = field.type) !== null && _field$type !== void 0 ? _field$type : "text",
+								placeholder: field.placeholder
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })
 						]
 					}, field.name);
-				}
-				if (field.type === "switch") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-					className: "gap-group flex items-center",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSwitch, { name: field.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-col",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-text-primary text-sm font-medium",
-							children: field.label
-						}), field.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-text-secondary text-sm",
-							children: field.description
-						})]
-					})]
-				}, field.name);
-				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: field.name,
-							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",
-							placeholder: field.placeholder
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormError, { name: field.name })
-					]
-				}, field.name);
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSubmit, { children: labels.submitButton })]
-		}), submitted && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "border-success bg-success-subtle text-success-fg rounded-lg border p-3 text-sm",
-			children: labels.successMessage
-		})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FormSubmit, { children: labels.submitButton })]
+			}),
+			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.successMessage
+			})
+		]
 	});
 }
 //#endregion
@@ -4621,18 +4675,6 @@ function QueryHistoryList({ items, loading = false, onLoad, onRerun, onClear, he
 		"data-opt-slug": "query-history-list.QueryHistoryList",
 		children: [
 			header,
-			onClear && items.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex flex-none justify-end px-2 pt-1",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.Button, {
-					variant: "ghost",
-					size: "sm",
-					onClick: onClear,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, {
-						className: "size-3.5",
-						"aria-hidden": true
-					}), labels.clear]
-				})
-			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "min-h-0 flex-1 overflow-y-auto",
 				children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -4695,6 +4737,19 @@ function QueryHistoryList({ items, loading = false, onLoad, onRerun, onClear, he
 						}, item.id);
 					})
 				})
+			}),
+			onClear && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "border-border-subtle flex flex-none justify-end border-t px-2 py-1",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: onClear,
+					disabled: items.length === 0,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, {
+						className: "size-3.5",
+						"aria-hidden": true
+					}), labels.clear]
+				})
 			})
 		]
 	});
@@ -8576,6 +8631,652 @@ function FieldValues({ values, loading, total, sampledRows, onFilter, labels })
 	});
 }
 //#endregion
+//#region src/shells/replay-scrubber.tsx
+const MARKER_MERGE_PX = 14;
+function defaultFormatTime(offset) {
+	const total = Math.max(0, Math.floor(offset / 1e3));
+	const minutes = Math.floor(total / 60);
+	const seconds = total % 60;
+	return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+const DEFAULT_SEGMENT_NAMES = {
+	active: "Active",
+	inactive: "Inactive",
+	gap: "No data",
+	buffer: "Loading"
+};
+const SEGMENT_CLASS = {
+	active: "bg-accent/35",
+	inactive: "bg-bg-muted",
+	gap: "bg-transparent",
+	buffer: "bg-[repeating-linear-gradient(45deg,transparent_0,transparent_3px,var(--color-border)_3px,var(--color-border)_6px)]"
+};
+const MARKER_CLASS = {
+	default: "bg-text-tertiary",
+	accent: "bg-accent",
+	danger: "bg-danger",
+	warning: "bg-warning"
+};
+/**
+* Merge markers that would render within `mergePx` of each other. Each group
+* anchors on its first marker; the tooltip lists every member.
+*/
+function groupReplayMarkers(markers, start, end, widthPx, mergePx = MARKER_MERGE_PX) {
+	const span = Math.max(1, end - start);
+	const threshold = widthPx > 0 ? mergePx / widthPx * span : 0;
+	const sorted = [...markers].filter((marker) => marker.time >= start && marker.time <= end).sort((a, b) => a.time - b.time);
+	const groups = [];
+	for (const marker of sorted) {
+		var _marker$tone;
+		const last = groups[groups.length - 1];
+		if (last && marker.time - last.time <= threshold) {
+			last.items.push(marker);
+			if (marker.tone === "danger") last.tone = "danger";
+			else if (marker.tone === "warning" && last.tone !== "danger") last.tone = "warning";
+			continue;
+		}
+		groups.push({
+			key: marker.id,
+			time: marker.time,
+			items: [marker],
+			tone: (_marker$tone = marker.tone) !== null && _marker$tone !== void 0 ? _marker$tone : "default"
+		});
+	}
+	return groups;
+}
+/** Build the SVG area path for the activity band (log scale, like a seismograph). */
+function activityPath(activity) {
+	if (!activity.length) return "";
+	const n = activity.length;
+	return `M 0,100 ${activity.map((value, index) => {
+		const x = n === 1 ? 50 : index / (n - 1) * 100;
+		const y = 100 - Math.log1p(Math.min(1, Math.max(0, value)) * 9) / Math.log(10) * 100;
+		return `L ${x.toFixed(2)},${y.toFixed(2)}`;
+	}).join(" ")} L 100,100 Z`;
+}
+/**
+* ReplayScrubber — the timeline of a session recording.
+*
+* A plain `Slider` knows only a position. A recording also has stretches
+* where nothing happened, stretches that have not loaded, events worth
+* jumping to, and a rhythm of activity. This track layers all of those
+* under one playhead and commits a seek only when the interaction ends,
+* so dragging never floods the player.
+*/
+function ReplayScrubber({ start, end, position, segments = [], buffered = [], activity, markers = [], onSeek, onPreview, onMarkerSelect, formatTime, stepMs = 5e3, largeStepMs = 3e4, disabled = false, labels, className }) {
+	var _labels$track, _labels$markerGroup;
+	const id = (0, react.useId)();
+	const trackRef = (0, react.useRef)(null);
+	const [width, setWidth] = (0, react.useState)(0);
+	const [hover, setHover] = (0, react.useState)(null);
+	const [dragging, setDragging] = (0, react.useState)(null);
+	const span = Math.max(1, end - start);
+	const clamp = (0, react.useCallback)((time) => Math.min(end, Math.max(start, time)), [start, end]);
+	const format = (0, react.useCallback)((time) => formatTime ? formatTime(time) : defaultFormatTime(time - start), [formatTime, start]);
+	const shown = clamp(dragging !== null && dragging !== void 0 ? dragging : position);
+	const percent = (shown - start) / span * 100;
+	(0, react.useEffect)(() => {
+		const node = trackRef.current;
+		if (!node || typeof ResizeObserver === "undefined") {
+			var _node$clientWidth;
+			setWidth((_node$clientWidth = node === null || node === void 0 ? void 0 : node.clientWidth) !== null && _node$clientWidth !== void 0 ? _node$clientWidth : 0);
+			return;
+		}
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) setWidth(entry.contentRect.width);
+		});
+		observer.observe(node);
+		setWidth(node.clientWidth);
+		return () => observer.disconnect();
+	}, []);
+	const timeAt = (0, react.useCallback)((clientX) => {
+		var _trackRef$current;
+		const rect = (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.getBoundingClientRect();
+		if (!rect || rect.width === 0) return start;
+		return start + Math.min(1, Math.max(0, (clientX - rect.left) / rect.width)) * span;
+	}, [start, span]);
+	const handlePointerDown = (event) => {
+		var _event$currentTarget$, _event$currentTarget;
+		if (disabled || event.button !== 0) return;
+		event.preventDefault();
+		(_event$currentTarget$ = (_event$currentTarget = event.currentTarget).setPointerCapture) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.call(_event$currentTarget, event.pointerId);
+		event.currentTarget.focus();
+		const time = timeAt(event.clientX);
+		setDragging(time);
+		onPreview === null || onPreview === void 0 || onPreview(time);
+	};
+	const handlePointerMove = (event) => {
+		if (disabled) return;
+		const time = timeAt(event.clientX);
+		if (dragging !== null) {
+			setDragging(time);
+			onPreview === null || onPreview === void 0 || onPreview(time);
+		} else {
+			setHover(time);
+			onPreview === null || onPreview === void 0 || onPreview(time);
+		}
+	};
+	const handlePointerUp = (event) => {
+		var _event$currentTarget$2, _event$currentTarget2;
+		if (dragging === null) return;
+		(_event$currentTarget$2 = (_event$currentTarget2 = event.currentTarget).releasePointerCapture) === null || _event$currentTarget$2 === void 0 || _event$currentTarget$2.call(_event$currentTarget2, event.pointerId);
+		const time = clamp(timeAt(event.clientX));
+		setDragging(null);
+		onSeek(time);
+	};
+	const handlePointerCancel = () => {
+		setDragging(null);
+		onPreview === null || onPreview === void 0 || onPreview(null);
+	};
+	const handlePointerLeave = () => {
+		setHover(null);
+		if (dragging === null) onPreview === null || onPreview === void 0 || onPreview(null);
+	};
+	const handleKeyDown = (event) => {
+		if (disabled) return;
+		let next = null;
+		switch (event.key) {
+			case "ArrowLeft":
+			case "ArrowDown":
+				next = shown - (event.shiftKey ? largeStepMs : stepMs);
+				break;
+			case "ArrowRight":
+			case "ArrowUp":
+				next = shown + (event.shiftKey ? largeStepMs : stepMs);
+				break;
+			case "PageDown":
+				next = shown - largeStepMs;
+				break;
+			case "PageUp":
+				next = shown + largeStepMs;
+				break;
+			case "Home":
+				next = start;
+				break;
+			case "End":
+				next = end;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		onSeek(clamp(next));
+	};
+	const groups = (0, react.useMemo)(() => groupReplayMarkers(markers, start, end, width), [
+		markers,
+		start,
+		end,
+		width
+	]);
+	const path = (0, react.useMemo)(() => activity ? activityPath(activity) : "", [activity]);
+	const trackLabel = (_labels$track = labels === null || labels === void 0 ? void 0 : labels.track) !== null && _labels$track !== void 0 ? _labels$track : "Replay position";
+	const segmentNames = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, DEFAULT_SEGMENT_NAMES), labels === null || labels === void 0 ? void 0 : labels.segment);
+	const groupLabel = (_labels$markerGroup = labels === null || labels === void 0 ? void 0 : labels.markerGroup) !== null && _labels$markerGroup !== void 0 ? _labels$markerGroup : ((count) => `${count} events`);
+	const preview = dragging !== null && dragging !== void 0 ? dragging : hover;
+	const previewPercent = preview === null ? null : (clamp(preview) - start) / span * 100;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.cn("relative flex w-full flex-col", className),
+		"data-opt-id": "B98JP",
+		"data-opt-slug": "replay-scrubber.ReplayScrubber",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "relative h-3",
+			"aria-hidden": groups.length === 0,
+			children: groups.map((group) => {
+				const left = (group.time - start) / span * 100;
+				const title = group.items.length === 1 ? group.items[0].label : `${groupLabel(group.items.length)}\n${group.items.slice(0, 8).map((item) => `${format(item.time)} ${item.label}`).join("\n")}${group.items.length > 8 ? "\n…" : ""}`;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					title,
+					"aria-label": group.items.length === 1 ? `${format(group.time)} · ${group.items[0].label}` : `${format(group.time)} · ${groupLabel(group.items.length)}`,
+					disabled,
+					onClick: (event) => {
+						event.stopPropagation();
+						const marker = group.items[0];
+						if (onMarkerSelect) onMarkerSelect(marker);
+						else onSeek(clamp(marker.time));
+					},
+					className: require_text_truncate.cn("absolute top-0 flex h-3 w-3 -translate-x-1/2 items-center justify-center rounded-sm", require_text_truncate.OPT_FOCUS_VISIBLE),
+					style: { left: `${left}%` },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_text_truncate.cn("block h-2.5 rounded-sm", group.items.length > 1 ? "w-2" : "w-[3px]", MARKER_CLASS[group.tone]) })
+				}, group.key);
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: trackRef,
+			id,
+			role: "slider",
+			tabIndex: disabled ? -1 : 0,
+			"aria-label": trackLabel,
+			"aria-valuemin": start,
+			"aria-valuemax": end,
+			"aria-valuenow": shown,
+			"aria-valuetext": format(shown),
+			"aria-disabled": disabled || void 0,
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: handlePointerUp,
+			onPointerCancel: handlePointerCancel,
+			onPointerLeave: handlePointerLeave,
+			onKeyDown: handleKeyDown,
+			className: require_text_truncate.cn("group relative h-6 w-full touch-none select-none rounded", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", require_text_truncate.OPT_FOCUS_VISIBLE),
+			children: [
+				path ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					"aria-hidden": "true",
+					viewBox: "0 0 100 100",
+					preserveAspectRatio: "none",
+					className: "pointer-events-none absolute inset-x-0 bottom-1 h-5 w-full opacity-40 transition-opacity group-hover:opacity-80",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: path,
+						className: "fill-accent/40"
+					})
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "bg-bg-subtle absolute inset-x-0 bottom-0 h-2 overflow-hidden rounded-full",
+					children: [
+						segments.map((segment, index) => {
+							const left = (segment.start - start) / span * 100;
+							const w = (segment.end - segment.start) / span * 100;
+							if (w <= 0) return null;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								role: "img",
+								"aria-label": `${segmentNames[segment.kind]} ${format(segment.start)}–${format(segment.end)}`,
+								className: require_text_truncate.cn("absolute inset-y-0", SEGMENT_CLASS[segment.kind]),
+								style: {
+									left: `${left}%`,
+									width: `${w}%`
+								}
+							}, `${segment.kind}-${index}`);
+						}),
+						buffered.map((range, index) => {
+							const left = (range.start - start) / span * 100;
+							const w = (range.end - range.start) / span * 100;
+							if (w <= 0) return null;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"aria-hidden": "true",
+								className: "bg-text-tertiary/25 absolute inset-y-0",
+								style: {
+									left: `${left}%`,
+									width: `${w}%`
+								}
+							}, `buffered-${index}`);
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": "true",
+							className: "bg-accent/80 absolute inset-y-0 left-0",
+							style: { width: `${percent}%` }
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					className: "border-surface bg-accent pointer-events-none absolute bottom-0 h-4 w-4 -translate-x-1/2 translate-y-1/4 rounded-full border-2 shadow-sm",
+					style: { left: `${percent}%` }
+				}),
+				previewPercent !== null && !disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("output", {
+					"aria-hidden": "true",
+					className: require_text_truncate.cn("pointer-events-none absolute -top-6 -translate-x-1/2 rounded bg-surface-overlay px-1.5 py-0.5 text-[11px] font-medium tabular-nums shadow", require_text_truncate.OPT_TEXT_SECONDARY),
+					style: { left: `${Math.min(97, Math.max(3, previewPercent))}%` },
+					children: format(clamp(preview))
+				}) : null
+			]
+		})]
+	});
+}
+ReplayScrubber.displayName = "ReplayScrubber";
+//#endregion
+//#region src/shells/replay-transport.tsx
+const DEFAULT_SPEEDS = [
+	.5,
+	1,
+	1.5,
+	2,
+	3,
+	4,
+	8,
+	16
+];
+/** `m:ss` for anything under an hour, `h:mm:ss` beyond it. */
+function formatReplayElapsed(ms) {
+	const total = Math.max(0, Math.floor(ms / 1e3));
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const seconds = total % 60;
+	const mmss = `${hours ? String(minutes).padStart(2, "0") : minutes}:${String(seconds).padStart(2, "0")}`;
+	return hours ? `${hours}:${mmss}` : mmss;
+}
+function defaultClock(time) {
+	return new Date(time).toLocaleTimeString(void 0, {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+}
+/**
+* ReplayTransport — play/pause, jumps, speed and skip-inactivity for a
+* session recording.
+*
+* It renders controls only; the host owns playback. Timecode shows elapsed
+* time by default and can flip to the clock time of the visitor's session,
+* which is what an engineer needs when matching a recording against logs.
+*/
+function ReplayTransport({ playing, ended = false, position, start, end, onTogglePlay, onSkip, onSkipToStart, jumpMs = 1e4, speed, speeds = DEFAULT_SPEEDS, onSpeedChange, skipInactive, onSkipInactiveChange, fullscreen, onFullscreenChange, timecode = "elapsed", onTimecodeChange, formatClock = defaultClock, disabled = false, children, labels, shortcuts, className }) {
+	var _labels$play, _labels$pause, _labels$restart, _labels$skipToStart, _labels$back, _labels$forward, _labels$speed, _labels$skipInactive, _labels$enterFullscre, _labels$exitFullscree, _labels$elapsed, _labels$clock;
+	const jumpSeconds = Math.round(jumpMs / 1e3);
+	const text = {
+		play: (_labels$play = labels === null || labels === void 0 ? void 0 : labels.play) !== null && _labels$play !== void 0 ? _labels$play : "Play",
+		pause: (_labels$pause = labels === null || labels === void 0 ? void 0 : labels.pause) !== null && _labels$pause !== void 0 ? _labels$pause : "Pause",
+		restart: (_labels$restart = labels === null || labels === void 0 ? void 0 : labels.restart) !== null && _labels$restart !== void 0 ? _labels$restart : "Restart",
+		skipToStart: (_labels$skipToStart = labels === null || labels === void 0 ? void 0 : labels.skipToStart) !== null && _labels$skipToStart !== void 0 ? _labels$skipToStart : "Go to start",
+		back: (_labels$back = labels === null || labels === void 0 ? void 0 : labels.back) !== null && _labels$back !== void 0 ? _labels$back : ((s) => `Back ${s}s`),
+		forward: (_labels$forward = labels === null || labels === void 0 ? void 0 : labels.forward) !== null && _labels$forward !== void 0 ? _labels$forward : ((s) => `Forward ${s}s`),
+		speed: (_labels$speed = labels === null || labels === void 0 ? void 0 : labels.speed) !== null && _labels$speed !== void 0 ? _labels$speed : "Playback speed",
+		skipInactive: (_labels$skipInactive = labels === null || labels === void 0 ? void 0 : labels.skipInactive) !== null && _labels$skipInactive !== void 0 ? _labels$skipInactive : "Skip inactivity",
+		enterFullscreen: (_labels$enterFullscre = labels === null || labels === void 0 ? void 0 : labels.enterFullscreen) !== null && _labels$enterFullscre !== void 0 ? _labels$enterFullscre : "Enter fullscreen",
+		exitFullscreen: (_labels$exitFullscree = labels === null || labels === void 0 ? void 0 : labels.exitFullscreen) !== null && _labels$exitFullscree !== void 0 ? _labels$exitFullscree : "Exit fullscreen",
+		elapsed: (_labels$elapsed = labels === null || labels === void 0 ? void 0 : labels.elapsed) !== null && _labels$elapsed !== void 0 ? _labels$elapsed : "Show elapsed time",
+		clock: (_labels$clock = labels === null || labels === void 0 ? void 0 : labels.clock) !== null && _labels$clock !== void 0 ? _labels$clock : "Show clock time"
+	};
+	const clamped = Math.min(end, Math.max(start, position));
+	const timeLabel = timecode === "clock" ? formatClock(clamped) : `${formatReplayElapsed(clamped - start)} / ${formatReplayElapsed(end - start)}`;
+	const withHint = (label, key) => key ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "inline-flex items-center gap-1",
+		children: [label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Kbd, {
+			hint: true,
+			children: key
+		})]
+	}) : label;
+	const playLabel = playing ? text.pause : ended ? text.restart : text.play;
+	const PlayIcon = playing ? lucide_react.Pause : ended ? lucide_react.RotateCcw : lucide_react.Play;
+	const selectSpeed = (0, react.useCallback)((value) => () => onSpeedChange(value), [onSpeedChange]);
+	(0, react.useEffect)(() => {
+		if (!speeds.includes(speed)) onSpeedChange(speeds.includes(1) ? 1 : speeds[0]);
+	}, [
+		speed,
+		speeds,
+		onSpeedChange
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.cn("flex w-full flex-wrap items-center gap-element", className),
+		"data-opt-id": "RW9FW",
+		"data-opt-slug": "replay-transport.ReplayTransport",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-0.5",
+				children: [
+					onSkipToStart ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						"aria-label": text.skipToStart,
+						title: text.skipToStart,
+						disabled,
+						onClick: onSkipToStart,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SkipBack, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						"aria-label": text.back(jumpSeconds),
+						title: (shortcuts === null || shortcuts === void 0 ? void 0 : shortcuts.back) ? `${text.back(jumpSeconds)} (${shortcuts.back})` : text.back(jumpSeconds),
+						disabled,
+						onClick: () => onSkip(-jumpMs),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Rewind, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+						type: "button",
+						size: "md",
+						variant: "primary",
+						"aria-label": playLabel,
+						"aria-pressed": playing,
+						title: (shortcuts === null || shortcuts === void 0 ? void 0 : shortcuts.playPause) ? `${playLabel} (${shortcuts.playPause})` : playLabel,
+						disabled,
+						onClick: onTogglePlay,
+						className: "rounded-full px-0 [&]:h-9 [&]:w-9",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						"aria-label": text.forward(jumpSeconds),
+						title: (shortcuts === null || shortcuts === void 0 ? void 0 : shortcuts.forward) ? `${text.forward(jumpSeconds)} (${shortcuts.forward})` : text.forward(jumpSeconds),
+						disabled,
+						onClick: () => onSkip(jumpMs),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FastForward, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: require_text_truncate.cn("min-w-[7.5rem] rounded px-1 text-left text-sm tabular-nums", require_text_truncate.OPT_TEXT_SECONDARY, onTimecodeChange ? "cursor-pointer hover:bg-bg-subtle" : "cursor-default"),
+				"aria-label": timecode === "clock" ? text.elapsed : text.clock,
+				title: timecode === "clock" ? text.elapsed : text.clock,
+				disabled: !onTimecodeChange,
+				onClick: () => onTimecodeChange === null || onTimecodeChange === void 0 ? void 0 : onTimecodeChange(timecode === "clock" ? "elapsed" : "clock"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("output", {
+					"aria-live": "off",
+					children: timeLabel
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "gap-element ml-auto flex items-center",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.MenuRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.MenuTrigger, {
+						"aria-label": text.speed,
+						title: text.speed,
+						disabled,
+						className: require_text_truncate.cn("inline-flex h-[var(--opt-control-sm)] cursor-pointer items-center gap-1 rounded-lg px-2 text-xs font-medium tabular-nums hover:bg-bg-subtle disabled:cursor-not-allowed disabled:opacity-40", require_text_truncate.OPT_TEXT_SECONDARY),
+						children: [
+							speed,
+							"×",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+								className: "size-3",
+								"aria-hidden": "true"
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuPopover, {
+						"aria-label": text.speed,
+						className: "min-w-[6rem]",
+						children: speeds.map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.MenuItemRadio, {
+							name: "replay-speed",
+							value: String(value),
+							checked: value === speed,
+							onChange: selectSpeed(value),
+							className: "tabular-nums",
+							children: [value, "×"]
+						}, value))
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Toggle, {
+						size: "sm",
+						pressed: skipInactive,
+						onPressedChange: onSkipInactiveChange,
+						disabled,
+						"aria-label": text.skipInactive,
+						title: (shortcuts === null || shortcuts === void 0 ? void 0 : shortcuts.skipInactive) ? `${text.skipInactive} (${shortcuts.skipInactive})` : text.skipInactive,
+						children: withHint(text.skipInactive, void 0)
+					}),
+					children,
+					onFullscreenChange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						"aria-label": fullscreen ? text.exitFullscreen : text.enterFullscreen,
+						"aria-pressed": !!fullscreen,
+						title: (shortcuts === null || shortcuts === void 0 ? void 0 : shortcuts.fullscreen) ? `${fullscreen ? text.exitFullscreen : text.enterFullscreen} (${shortcuts.fullscreen})` : fullscreen ? text.exitFullscreen : text.enterFullscreen,
+						onClick: () => onFullscreenChange(!fullscreen),
+						children: fullscreen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minimize2, {
+							className: "size-4",
+							"aria-hidden": "true"
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Maximize2, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					}) : null
+				]
+			}),
+			(shortcuts === null || shortcuts === void 0 ? void 0 : shortcuts.playPause) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: require_text_truncate.cn("sr-only", require_text_truncate.OPT_TEXT_TERTIARY),
+				children: [
+					playLabel,
+					" ",
+					shortcuts.playPause
+				]
+			}) : null
+		]
+	});
+}
+ReplayTransport.displayName = "ReplayTransport";
+//#endregion
+//#region src/shells/replay-player-layout.tsx
+function isTextTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	const tag = target.tagName;
+	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable;
+}
+/** Normalize a keyboard event into a shortcut key such as `space`, `arrowleft`, `shift+arrowright`. */
+function replayShortcutKey(event) {
+	const key = event.key === " " ? "space" : event.key.toLowerCase();
+	return [...[
+		event.ctrlKey || event.metaKey ? "mod" : "",
+		event.altKey ? "alt" : "",
+		event.shiftKey ? "shift" : ""
+	].filter(Boolean), key].join("+");
+}
+/**
+* ReplayPlayerLayout — stage, chrome and inspector for a session replay.
+*
+* Owns three things every replay UI otherwise reinvents: a resizable
+* inspector that keeps its width, fullscreen on the whole player rather
+* than on the recording iframe alone, and a keyboard scope that reacts to
+* shortcuts only while the player is focused and never while someone is
+* typing in a field.
+*/
+function ReplayPlayerLayout({ stage, meta, controls, inspector, inspectorOpen = true, onInspectorOpenChange, inspectorSize = 34, layoutId, fullscreen = false, onFullscreenChange, shortcuts, overlay, labels, className }) {
+	var _labels$region, _labels$openInspector, _labels$closeInspecto;
+	const rootRef = (0, react.useRef)(null);
+	const [hovering, setHovering] = (0, react.useState)(false);
+	const shortcutsRef = (0, react.useRef)(shortcuts);
+	shortcutsRef.current = shortcuts;
+	const text = {
+		region: (_labels$region = labels === null || labels === void 0 ? void 0 : labels.region) !== null && _labels$region !== void 0 ? _labels$region : "Session replay",
+		openInspector: (_labels$openInspector = labels === null || labels === void 0 ? void 0 : labels.openInspector) !== null && _labels$openInspector !== void 0 ? _labels$openInspector : "Show details",
+		closeInspector: (_labels$closeInspecto = labels === null || labels === void 0 ? void 0 : labels.closeInspector) !== null && _labels$closeInspecto !== void 0 ? _labels$closeInspecto : "Hide details"
+	};
+	(0, react.useEffect)(() => {
+		const node = rootRef.current;
+		if (!node || typeof document === "undefined") return;
+		const active = document.fullscreenElement === node;
+		if (fullscreen && !active && node.requestFullscreen) node.requestFullscreen().catch(() => onFullscreenChange === null || onFullscreenChange === void 0 ? void 0 : onFullscreenChange(false));
+		else if (!fullscreen && active && document.exitFullscreen) document.exitFullscreen().catch(() => {});
+	}, [fullscreen, onFullscreenChange]);
+	(0, react.useEffect)(() => {
+		if (typeof document === "undefined") return;
+		const handleChange = () => {
+			const active = document.fullscreenElement === rootRef.current;
+			if (active !== fullscreen) onFullscreenChange === null || onFullscreenChange === void 0 || onFullscreenChange(active);
+		};
+		document.addEventListener("fullscreenchange", handleChange);
+		return () => document.removeEventListener("fullscreenchange", handleChange);
+	}, [fullscreen, onFullscreenChange]);
+	const handleKeyDown = (0, react.useCallback)((event) => {
+		const map = shortcutsRef.current;
+		if (!map || isTextTarget(event.target)) return;
+		const handler = map[replayShortcutKey(event.nativeEvent)];
+		if (!handler) return;
+		if (handler(event.nativeEvent) !== false) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+	}, []);
+	const showInspector = Boolean(inspector) && inspectorOpen;
+	const toggle = onInspectorOpenChange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+		type: "button",
+		size: "sm",
+		variant: "ghost",
+		"aria-label": inspectorOpen ? text.closeInspector : text.openInspector,
+		"aria-pressed": inspectorOpen,
+		title: inspectorOpen ? text.closeInspector : text.openInspector,
+		onClick: () => onInspectorOpenChange(!inspectorOpen),
+		children: inspectorOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PanelRightClose, {
+			className: "size-4",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PanelRightOpen, {
+			className: "size-4",
+			"aria-hidden": "true"
+		})
+	}) : null;
+	const main = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex h-full min-h-0 min-w-0 flex-1 flex-col",
+		children: [
+			meta || toggle ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "gap-element border-border flex min-h-9 items-center border-b px-3 py-1 text-xs",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "min-w-0 flex-1",
+					children: meta
+				}), toggle]
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "bg-bg-subtle relative min-h-0 flex-1",
+				onPointerEnter: () => setHovering(true),
+				onPointerLeave: () => setHovering(false),
+				"data-hovering": hovering || void 0,
+				children: [stage, overlay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pointer-events-none absolute inset-0 flex items-center justify-center [&>*]:pointer-events-auto",
+					children: overlay
+				}) : null]
+			}),
+			controls ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "border-border border-t px-3 py-2",
+				children: controls
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: rootRef,
+		role: "region",
+		"aria-label": text.region,
+		tabIndex: -1,
+		onKeyDown: handleKeyDown,
+		className: require_text_truncate.cn("flex min-h-0 w-full flex-col overflow-hidden rounded-lg bg-surface", require_text_truncate.OPT_BORDER, require_text_truncate.OPT_FOCUS_VISIBLE, fullscreen ? "h-screen" : "h-full", className),
+		"data-opt-id": "A3VYS",
+		"data-opt-slug": "replay-player-layout.ReplayPlayerLayout",
+		children: showInspector ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.ResizablePanelGroup, {
+			direction: "horizontal",
+			id: layoutId,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ResizablePanel, {
+					defaultSize: 100 - inspectorSize,
+					minSize: 40,
+					children: main
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ResizableHandle, { withHandle: true }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ResizablePanel, {
+					defaultSize: inspectorSize,
+					minSize: 20,
+					maxSize: 60,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex h-full min-h-0 flex-col overflow-hidden",
+						children: inspector
+					})
+				})
+			]
+		}) : main
+	});
+}
+ReplayPlayerLayout.displayName = "ReplayPlayerLayout";
+//#endregion
 Object.defineProperty(exports, "ALL_COMPOUND_THEMES", {
 	enumerable: true,
 	get: function() {
@@ -8870,6 +9571,24 @@ Object.defineProperty(exports, "QueryWorkspace", {
 		return QueryWorkspace;
 	}
 });
+Object.defineProperty(exports, "ReplayPlayerLayout", {
+	enumerable: true,
+	get: function() {
+		return ReplayPlayerLayout;
+	}
+});
+Object.defineProperty(exports, "ReplayScrubber", {
+	enumerable: true,
+	get: function() {
+		return ReplayScrubber;
+	}
+});
+Object.defineProperty(exports, "ReplayTransport", {
+	enumerable: true,
+	get: function() {
+		return ReplayTransport;
+	}
+});
 Object.defineProperty(exports, "SaveQueryDialog", {
 	enumerable: true,
 	get: function() {
@@ -9062,6 +9781,12 @@ Object.defineProperty(exports, "formatQueryCell", {
 		return formatQueryCell;
 	}
 });
+Object.defineProperty(exports, "formatReplayElapsed", {
+	enumerable: true,
+	get: function() {
+		return formatReplayElapsed;
+	}
+});
 Object.defineProperty(exports, "generatedTheme", {
 	enumerable: true,
 	get: function() {
@@ -9086,6 +9811,12 @@ Object.defineProperty(exports, "getThemeDescriptor", {
 		return getThemeDescriptor;
 	}
 });
+Object.defineProperty(exports, "groupReplayMarkers", {
+	enumerable: true,
+	get: function() {
+		return groupReplayMarkers;
+	}
+});
 Object.defineProperty(exports, "hasActiveQueryFilters", {
 	enumerable: true,
 	get: function() {
@@ -9182,6 +9913,12 @@ Object.defineProperty(exports, "removeClause", {
 		return removeClause;
 	}
 });
+Object.defineProperty(exports, "replayShortcutKey", {
+	enumerable: true,
+	get: function() {
+		return replayShortcutKey;
+	}
+});
 Object.defineProperty(exports, "resolveDescriptor", {
 	enumerable: true,
 	get: function() {
@@ -9230,6 +9967,12 @@ Object.defineProperty(exports, "toast", {
 		return toast;
 	}
 });
+Object.defineProperty(exports, "useAsyncSearch", {
+	enumerable: true,
+	get: function() {
+		return useAsyncSearch;
+	}
+});
 Object.defineProperty(exports, "useAutoRefresh", {
 	enumerable: true,
 	get: function() {