@reopt-ai/opt-ui 1.14.0 → 1.15.0

package/dist/{field-sidebar-mSVCMAZp.js → replay-player-layout-BVUNsUS1.js}

@@ -1,10 +1,10 @@
 "use client";
-import { $t as CompositeItem, Bn as OPT_BADGE_NEUTRAL, Bt as SelectItem$1, C as FormCheckbox$1, Ct as ComboboxEmpty, Dt as ComboboxItem$1, En as Skeleton, Et as ComboboxInput$1, Fn as OPT_ACTIVE_ITEM, Ft as DialogFooter, G as FormSelectPopover, Gn as OPT_DISCLOSURE_TRIGGER, Gt as Tab$1, H as FormRoot$1, Hn as OPT_BADGE_YELLOW, Ht as SelectPopover$1, It as DialogHeader, J as FormSubmit$1, Jn as OPT_DOT_GREEN, Jt as TabsRoot$1, Kn as OPT_DIVIDER, Kt as TabList$1, Ln as OPT_ANIMATE_ENTER_EXIT, Lt as DialogHeading$1, Mt as DialogDescription$1, N as FormInput$1, O as FormError$1, Ot as ComboboxPopover$1, P as FormLabel$1, Qn as OPT_FOCUS_VISIBLE, Qt as Composite, R as FormRadio$1, Rn as OPT_BADGE_BLUE, Rt as DialogPanel$1, S as formatOptTime, St as MenubarRoot$1, Tn as StatCard, U as FormSelect, Un as OPT_BORDER, Ut as SelectRoot$1, Vn as OPT_BADGE_RED, Vt as SelectLabel$1, W as FormSelectItem, Wn as OPT_DISCLOSURE_CONTENT, Wt as SelectTrigger$1, Xn as OPT_DOT_YELLOW, Xt as DisclosureRoot$1, Y as FormSwitch$1, Yn as OPT_DOT_RED, Yt as DisclosureContent$1, Z as FormTextarea, Zn as OPT_FOCUS, Zt as DisclosureTrigger$1, _ as DropdownTrigger, _n as Spinner, _r as cn, _t as MenuPopover$1, b as formatOptNumber, bn as EmptyState, bt as MenuTrigger$1, c as ResizableHandle, cr as OPT_TD_MUTED, ct as PopoverContent$1, d as Checkbox, dn as ToolbarRoot$1, dr as OPT_TEXT_SECONDARY, en as CompositeProvider, er as OPT_INPUT, et as useFormStore, fn as ToolbarSeparator$1, fr as OPT_TEXT_TERTIARY, gn as Alert, gr as Kbd, gt as MenuItemRadio$1, h as DropdownMenu, hn as TooltipProvider, hr as _objectWithoutProperties, ht as MenuItemCheckbox$1, i as FieldToken, in as Textarea, ir as OPT_SURFACE_POPOVER, jt as DialogBody, kt as ComboboxRoot$1, l as ResizablePanel, ln as ToolbarButton$1, lr as OPT_TEXT_LABEL, lt as PopoverRoot$1, m as DropdownItem, mn as TooltipAnchor$1, mr as _objectSpread2, mt as MenuItem$1, n as Highlight, nr as OPT_ITEM_BASE, nt as DateRangePicker, o as resolveFieldType, on as Switch, or as OPT_TABLE_ROW_ACTIVE, p as DropdownContent, pn as Tooltip$1, pr as OPT_TH, pt as MenuButtonArrow$1, qt as TabPanel$1, rn as Meter$1, rr as OPT_SURFACE, rt as TagInput, s as Pagination, sn as Input, sr as OPT_TD, t as TextTruncate, tn as CompositeRow, tt as DEFAULT_PRESETS, u as ResizablePanelGroup, un as ToolbarContainer$1, ur as OPT_TEXT_PRIMARY, ut as PopoverTrigger$1, v as OPT_UI_DEFAULT_LOCALE, vn as Badge, vt as MenuRoot$1, xn as Button, xt as MenubarContainer$1, y as formatOptDateTime, yn as DescriptionList, yt as MenuSeparator$1, z as FormRadioGroup$1, zn as OPT_BADGE_GREEN, zt as DialogRoot$1 } from "./text-truncate-Bd-0WkSP.js";
+import { $n as OPT_DOT_YELLOW, $t as Composite, At as ComboboxRoot$1, Bn as OPT_ANIMATE_ENTER_EXIT, Bt as DialogRoot$1, C as FormCheckbox$1, Ct as MenubarRoot$1, Dn as Skeleton, Dt as ComboboxInput$1, En as StatCard, G as FormSelectPopover, Gn as OPT_BADGE_YELLOW, Gt as SelectTrigger$1, H as FormRoot$1, Hn as OPT_BADGE_GREEN, Ht as SelectLabel$1, It as DialogFooter, J as FormSubmit$1, Jn as OPT_DISCLOSURE_TRIGGER, Jt as TabPanel$1, Kn as OPT_BORDER, Kt as Tab$1, Lt as DialogHeader, Mn as Toggle$1, Mt as DialogBody, N as FormInput$1, Nt as DialogDescription$1, O as FormError$1, Ot as ComboboxItem$1, P as FormLabel$1, Qn as OPT_DOT_RED, Qt as DisclosureTrigger$1, R as FormRadio$1, Rn as OPT_ACTIVE_ITEM, Rt as DialogHeading$1, S as formatOptTime, Sn as Button, St as MenubarContainer$1, U as FormSelect, Un as OPT_BADGE_NEUTRAL, Ut as SelectPopover$1, Vn as OPT_BADGE_BLUE, Vt as SelectItem$1, W as FormSelectItem, Wn as OPT_BADGE_RED, Wt as SelectRoot$1, Xt as DisclosureContent$1, Y as FormSwitch$1, Yn as OPT_DIVIDER, Yt as TabsRoot$1, Z as FormTextarea$1, Zn as OPT_DOT_GREEN, Zt as DisclosureRoot$1, _ as DropdownTrigger, _n as Alert, _r as _objectSpread2, _t as MenuItemRadio$1, an as Textarea, ar as OPT_ITEM_BASE, b as formatOptNumber, bn as DescriptionList, br as cn, bt as MenuSeparator$1, c as ResizableHandle, cn as Input, d as Checkbox, dn as ToolbarContainer$1, dr as OPT_TD_MUTED, dt as PopoverTrigger$1, en as CompositeItem, er as OPT_FOCUS, et as useFormStore, fn as ToolbarRoot$1, fr as OPT_TEXT_LABEL, gn as TooltipProvider, gr as OPT_TH, gt as MenuItemCheckbox$1, h as DropdownMenu, hn as TooltipAnchor$1, hr as OPT_TEXT_TERTIARY, ht as MenuItem$1, i as FieldToken, in as Meter$1, k as FormField$1, kt as ComboboxPopover$1, l as ResizablePanel, lr as OPT_TABLE_ROW_ACTIVE, lt as PopoverContent$1, m as DropdownItem, mn as Tooltip$1, mr as OPT_TEXT_SECONDARY, mt as MenuButtonArrow$1, n as Highlight, nn as CompositeRow, nt as DateRangePicker, o as resolveFieldType, or as OPT_SURFACE, p as DropdownContent, pn as ToolbarSeparator$1, pr as OPT_TEXT_PRIMARY, qn as OPT_DISCLOSURE_CONTENT, qt as TabList$1, rr as OPT_INPUT, rt as TagInput, s as Pagination, sn as Switch, sr as OPT_SURFACE_POPOVER, t as TextTruncate, tn as CompositeProvider, tr as OPT_FOCUS_VISIBLE, tt as DEFAULT_PRESETS, u as ResizablePanelGroup, un as ToolbarButton$1, ur as OPT_TD, ut as PopoverRoot$1, v as OPT_UI_DEFAULT_LOCALE, vn as Spinner, vr as _objectWithoutProperties, vt as MenuPopover$1, wt as ComboboxEmpty, xn as EmptyState, xt as MenuTrigger$1, y as formatOptDateTime, yn as Badge, yr as Kbd, yt as MenuRoot$1, z as FormRadioGroup$1, zt as DialogPanel$1 } from "./text-truncate-B-8nJgnu.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Fragment as Fragment$1, createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandRoot, CommandSeparator, Radio, RadioGroupRoot } from "@reopt-ai/opt-ui-primitives";
-import { ArrowDown, ArrowUp, ArrowUpDown, Braces, ChartLine, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleAlert, CircleCheck, Clock, Columns2, Columns3, Expand, Eye, Filter, Info, Minus, PanelLeftClose, PanelLeftOpen, Play, Plus, RefreshCw, Save, Search, SearchIcon, Square, Table2, TextCursorInput, Trash2, TriangleAlert, Undo2, X, ZoomIn, ZoomOut } from "lucide-react";
+import { ArrowDown, ArrowUp, ArrowUpDown, Braces, ChartLine, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleAlert, CircleCheck, Clock, Columns2, Columns3, Expand, Eye, FastForward, Filter, Info, Maximize2, Minimize2, Minus, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Pause, Play, Plus, RefreshCw, Rewind, RotateCcw, Save, Search, SearchIcon, SkipBack, Square, Table2, TextCursorInput, Trash2, TriangleAlert, Undo2, X, ZoomIn, ZoomOut } from "lucide-react";
 import { generatePalette } from "@reopt-ai/opt-palette";
 import { AreaChart, BarChart, LineChart, PieChart, TimeSeriesChart, formatCountUnit, formatDuration, formatInstant, isDateOnly, isExactMinutes, isRelativeToNow, measureTimeWindow, parseRelativeParts, parseTimeExpression, resolveTimeRange, shiftTimeRange, toAbsoluteRange, zoomTimeRange } from "@reopt-ai/opt-charts";
 import { matchSorter } from "match-sorter";
@@ -277,7 +277,7 @@ function CommandGroup$1(_ref5) {
 			className: "text-text-tertiary px-2 py-1.5 text-xs font-medium",
 			children: heading
 		}) : void 0,
-		className: cn("py-1", className)
+		className: cn("py-1 [&:not(:has([data-slot=command-item]))]:hidden", className)
 	}, props), {}, {
 		"data-opt-id": "JPK1Y",
 		"data-opt-slug": "command.CommandGroup"
@@ -358,16 +358,20 @@ function CommandPalette({ commands, open, onOpenChange, onSelect, inline = false
 			"aria-label": resolvedLabels.list,
 			children: [/* @__PURE__ */ jsx(CommandEmpty$1, { children: empty !== null && empty !== void 0 ? empty : resolvedLabels.empty }), hasCommands ? Array.from(grouped.entries()).map(([group, items]) => /* @__PURE__ */ jsx(CommandGroup$1, {
 				heading: group,
-				children: items.map((cmd) => /* @__PURE__ */ jsxs(CommandItem$1, {
-					value: cmd.id,
-					keywords: [
-						cmd.label,
-						cmd.group,
-						...cmd.shortcut ? [cmd.shortcut] : []
-					],
-					onSelect: handleSelect,
-					children: [/* @__PURE__ */ jsx("span", { children: cmd.label }), cmd.shortcut && /* @__PURE__ */ jsx(CommandShortcut, { children: cmd.shortcut })]
-				}, cmd.id))
+				children: items.map((cmd) => {
+					var _cmd$keywords;
+					return /* @__PURE__ */ jsxs(CommandItem$1, {
+						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__ */ jsx("span", { children: cmd.label }), cmd.shortcut && /* @__PURE__ */ jsx(CommandShortcut, { children: cmd.shortcut })]
+					}, cmd.id);
+				})
 			}, group)) : null]
 		}),
 		footer
@@ -457,9 +461,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] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [failed, setFailed] = useState(false);
+	const [attempt, setAttempt] = useState(0);
+	const generationRef = useRef(0);
+	const timerRef = useRef(void 0);
+	const invalidate = useCallback(() => {
+		generationRef.current += 1;
+		clearTimeout(timerRef.current);
+		setResults([]);
+		setLoading(false);
+		setFailed(false);
+	}, []);
+	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: 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. */
@@ -467,10 +527,13 @@ function SearchCombobox({ items, placeholder = "검색...", label = "검색", on
 	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$33), customLabels);
 	const inputId = useId();
 	const [query, setQuery] = useState("");
-	const [asyncResults, setAsyncResults] = useState([]);
-	const [loading, setLoading] = useState(false);
-	const timerRef = useRef(void 0);
-	const searchGenerationRef = useRef(0);
+	const inputRef = useRef(null);
+	const { results: asyncResults, loading, failed, retry, invalidate } = useAsyncSearch({
+		query,
+		search: onSearch,
+		enabled: isAsync && Boolean(query),
+		debounceMs
+	});
 	const syncMatches = useMemo(() => {
 		if (isAsync) return [];
 		if (!query) return items;
@@ -481,45 +544,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);
 	};
-	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__ */ jsx("div", {
 		className: "gap-element flex flex-col",
@@ -533,29 +566,42 @@ function SearchCombobox({ items, placeholder = "검색...", label = "검색", on
 					className: OPT_TEXT_LABEL,
 					children: label
 				}),
-				/* @__PURE__ */ jsx(ComboboxInput$1, {
+				/* @__PURE__ */ jsx(ComboboxInput$1, _objectSpread2({
 					id: inputId,
 					placeholder,
 					className: "max-w-xs",
 					"aria-busy": loading || void 0,
 					onInput: handleInput
-				}),
-				/* @__PURE__ */ jsx(ComboboxPopover$1, {
-					className: "max-w-xs",
-					children: isAsync && loading ? /* @__PURE__ */ 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__ */ jsx(Spinner, {
-							size: "sm",
-							"aria-hidden": "true"
-						}), labels.loading]
-					}) : matches.length === 0 ? /* @__PURE__ */ jsx(ComboboxEmpty, { children: labels.noResults }) : matches.map((item) => /* @__PURE__ */ jsx(ComboboxItem$1, {
-						value: item,
-						children: item
-					}, item))
-				})
+				}, failed ? {
+					"aria-expanded": false,
+					"aria-controls": void 0
+				} : {})),
+				/* @__PURE__ */ jsx(ComboboxPopover$1, _objectSpread2(_objectSpread2({ className: "max-w-xs" }, failed ? { role: "presentation" } : {}), {}, { children: isAsync && failed ? /* @__PURE__ */ jsxs("div", {
+					role: "alert",
+					className: "gap-element flex flex-col px-3 py-2 text-sm",
+					children: [/* @__PURE__ */ jsx("span", { children: labels.error }), /* @__PURE__ */ jsx(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__ */ 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__ */ jsx(Spinner, {
+						size: "sm",
+						"aria-hidden": "true"
+					}), labels.loading]
+				}) : matches.length === 0 ? /* @__PURE__ */ jsx(ComboboxEmpty, { children: labels.noResults }) : matches.map((item) => /* @__PURE__ */ jsx(ComboboxItem$1, {
+					value: item,
+					children: item
+				}, item)) }))
 			]
 		})
 	});
@@ -900,13 +946,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 = _objectSpread2(_objectSpread2({}, defaultLabels$26), customLabels);
 	const [submitted, setSubmitted] = useState(false);
+	const formId = useId();
 	const defaultValues = {};
 	for (const field of fields) {
 		var _field$defaultValue;
@@ -932,9 +981,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__ */ jsx(EmptyState, {
@@ -947,138 +997,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__ */ jsxs(FormRoot$1, {
-			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__ */ jsxs("div", {
-						className: "gap-element flex flex-col",
-						children: [
-							/* @__PURE__ */ jsx(FormLabel$1, {
-								name: field.name,
-								children: field.label
-							}),
-							/* @__PURE__ */ jsx(TagInput, {
+		children: [
+			/* @__PURE__ */ jsxs(FormRoot$1, {
+				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__ */ jsx(FormField$1, {
+							name: field.name,
+							children: /* @__PURE__ */ jsx(TagInput, {
+								label: field.label,
 								value: tags,
 								onChange: (next) => form.setValue(field.name, next),
-								placeholder: field.placeholder
-							}),
-							/* @__PURE__ */ jsx(FormError$1, { 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__ */ jsxs("fieldset", {
+							className: "gap-element flex flex-col",
+							children: [
+								/* @__PURE__ */ jsx("legend", {
+									className: "text-text-primary text-sm font-medium",
+									children: field.label
+								}),
+								/* @__PURE__ */ jsx(FormRadioGroup$1, { children: /* @__PURE__ */ jsx("div", {
+									className: "gap-group flex",
+									children: (_field$options = field.options) === null || _field$options === void 0 ? void 0 : _field$options.map((option) => /* @__PURE__ */ jsxs("label", {
+										className: "text-text-primary gap-element flex items-center text-sm",
+										children: [/* @__PURE__ */ jsx(FormRadio$1, {
+											name: field.name,
+											value: option.value
+										}), option.label]
+									}, option.value))
+								}) }),
+								/* @__PURE__ */ jsx(FormError$1, { name: field.name })
+							]
+						}, field.name);
+					}
+					if (field.type === "checkbox") return /* @__PURE__ */ jsxs(FormField$1, {
+						name: field.name,
+						children: [/* @__PURE__ */ jsxs("label", {
+							className: "text-text-primary gap-element flex items-center text-sm",
+							children: [/* @__PURE__ */ jsx(FormCheckbox$1, { name: field.name }), /* @__PURE__ */ jsx("span", { children: field.label })]
+						}), /* @__PURE__ */ jsx(FormError$1, { name: field.name })]
 					}, field.name);
-				}
-				if (field.type === "radio") {
-					var _field$options;
-					return /* @__PURE__ */ jsxs("fieldset", {
-						className: "gap-element flex flex-col",
-						children: [
-							/* @__PURE__ */ jsx("legend", {
+					if (field.type === "textarea") {
+						var _field$rows, _field$resize;
+						return /* @__PURE__ */ jsxs(FormField$1, {
+							name: field.name,
+							children: [
+								/* @__PURE__ */ jsx(FormLabel$1, { children: field.label }),
+								/* @__PURE__ */ jsx(FormTextarea$1, {
+									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__ */ jsx(FormError$1, { name: field.name })
+							]
+						}, field.name);
+					}
+					if (field.type === "select") {
+						var _field$options2;
+						return /* @__PURE__ */ jsxs(FormField$1, {
+							name: field.name,
+							children: [
+								/* @__PURE__ */ jsx(FormLabel$1, {
+									htmlFor: `${formId}-${field.name}`,
+									children: field.label
+								}),
+								/* @__PURE__ */ jsx(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__ */ jsx(FormSelectPopover, { children: (_field$options2 = field.options) === null || _field$options2 === void 0 ? void 0 : _field$options2.map((option) => /* @__PURE__ */ jsx(FormSelectItem, {
+										value: option.value,
+										children: option.label
+									}, option.value)) })
+								}),
+								/* @__PURE__ */ jsx(FormError$1, {
+									name: field.name,
+									id: `${formId}-${field.name}-error`
+								})
+							]
+						}, field.name);
+					}
+					if (field.type === "switch") return /* @__PURE__ */ jsxs("label", {
+						className: "gap-group flex items-center",
+						children: [/* @__PURE__ */ jsx(FormSwitch$1, { name: field.name }), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ jsx("span", {
 								className: "text-text-primary text-sm font-medium",
 								children: field.label
-							}),
-							/* @__PURE__ */ jsx(FormRadioGroup$1, { children: /* @__PURE__ */ jsx("div", {
-								className: "gap-group flex",
-								children: (_field$options = field.options) === null || _field$options === void 0 ? void 0 : _field$options.map((option) => /* @__PURE__ */ jsxs("label", {
-									className: "text-text-primary gap-element flex items-center text-sm",
-									children: [/* @__PURE__ */ jsx(FormRadio$1, {
-										name: field.name,
-										value: option.value
-									}), option.label]
-								}, option.value))
-							}) }),
-							/* @__PURE__ */ jsx(FormError$1, { name: field.name })
-						]
-					}, field.name);
-				}
-				if (field.type === "checkbox") return /* @__PURE__ */ jsxs("div", {
-					className: "gap-element flex flex-col",
-					children: [/* @__PURE__ */ jsxs("label", {
-						className: "text-text-primary gap-element flex items-center text-sm",
-						children: [/* @__PURE__ */ jsx(FormCheckbox$1, { name: field.name }), /* @__PURE__ */ jsx("span", { children: field.label })]
-					}), /* @__PURE__ */ jsx(FormError$1, { name: field.name })]
-				}, field.name);
-				if (field.type === "textarea") {
-					var _field$rows, _field$resize;
-					return /* @__PURE__ */ jsxs("div", {
-						className: "gap-element flex flex-col",
-						children: [
-							/* @__PURE__ */ jsx(FormLabel$1, {
-								name: field.name,
-								children: field.label
-							}),
-							/* @__PURE__ */ jsx(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__ */ jsx(FormError$1, { name: field.name })
-						]
+							}), field.description && /* @__PURE__ */ jsx("span", {
+								className: "text-text-secondary text-sm",
+								children: field.description
+							})]
+						})]
 					}, field.name);
-				}
-				if (field.type === "select") {
-					var _field$options2;
-					return /* @__PURE__ */ jsxs("div", {
-						className: "gap-element flex flex-col",
+					return /* @__PURE__ */ jsxs(FormField$1, {
+						name: field.name,
 						children: [
-							/* @__PURE__ */ jsx(FormLabel$1, {
+							/* @__PURE__ */ jsx(FormLabel$1, { children: field.label }),
+							/* @__PURE__ */ jsx(FormInput$1, {
 								name: field.name,
-								children: field.label
-							}),
-							/* @__PURE__ */ jsx(FormSelect, {
-								name: field.name,
-								placeholder: field.placeholder,
-								children: /* @__PURE__ */ jsx(FormSelectPopover, { children: (_field$options2 = field.options) === null || _field$options2 === void 0 ? void 0 : _field$options2.map((option) => /* @__PURE__ */ jsx(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__ */ jsx(FormError$1, { name: field.name })
 						]
 					}, field.name);
-				}
-				if (field.type === "switch") return /* @__PURE__ */ jsxs("label", {
-					className: "gap-group flex items-center",
-					children: [/* @__PURE__ */ jsx(FormSwitch$1, { name: field.name }), /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "text-text-primary text-sm font-medium",
-							children: field.label
-						}), field.description && /* @__PURE__ */ jsx("span", {
-							className: "text-text-secondary text-sm",
-							children: field.description
-						})]
-					})]
-				}, field.name);
-				return /* @__PURE__ */ jsxs("div", {
-					className: "gap-element flex flex-col",
-					children: [
-						/* @__PURE__ */ jsx(FormLabel$1, {
-							name: field.name,
-							children: field.label
-						}),
-						/* @__PURE__ */ jsx(FormInput$1, {
-							name: field.name,
-							type: (_field$type = field.type) !== null && _field$type !== void 0 ? _field$type : "text",
-							placeholder: field.placeholder
-						}),
-						/* @__PURE__ */ jsx(FormError$1, { name: field.name })
-					]
-				}, field.name);
-			}), /* @__PURE__ */ jsx(FormSubmit$1, { children: labels.submitButton })]
-		}), submitted && /* @__PURE__ */ jsx("div", {
-			className: "border-success bg-success-subtle text-success-fg rounded-lg border p-3 text-sm",
-			children: labels.successMessage
-		})]
+				}), /* @__PURE__ */ jsx(FormSubmit$1, { children: labels.submitButton })]
+			}),
+			form.getSubmitError() !== void 0 && /* @__PURE__ */ 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__ */ jsx("div", {
+				role: "status",
+				className: "border-success bg-success-subtle text-success-fg rounded-lg border p-3 text-sm",
+				children: labels.successMessage
+			})
+		]
 	});
 }
 //#endregion
@@ -8576,4 +8630,650 @@ function FieldValues({ values, loading, total, sampledRows, onFilter, labels })
 	});
 }
 //#endregion
-export { generatedTheme as $, Command as $t, useOptThemeController as A, KeyValueEditor as At, THEME_SPEC_STORAGE_KEY as B, ProjectSwitcher as Bt, ScoreBreakdown as C, QueryOutputPane as Ct, useOptTheme as D, formatQueryCell as Dt, OptThemeProvider as E, QueryResultsTable as Et, getCompoundTheme as F, useToast as Ft, isForceLightSpec as G, EditorToolbar as Gt, buildTokenCache as H, SettingsForm as Ht, readStoredTheme as I, DataTable as It, safeParseStoredTokens as J, StatusSelect as Jt, resolveDescriptor as K, SidebarNav as Kt, resolveThemeMode as L, DomainTable as Lt, FORCE_LIGHT_PRESETS as M, NotificationToast as Mt, coerceThemeMode as N, ToastProvider as Nt, useOptionalOptTheme as O, Flyout as Ot, createThemeBootScript as P, toast as Pt, defineThemeOverrides as Q, CommandPalette as Qt, GENERATED_THEME_ID_DEFAULT as R, BranchSelect as Rt, withoutField as S, numericResultColumns as St, SqlEditor as T, SchemaTree as Tt, computeGeneratedTokens as U, FaqAccordion as Ut, THEME_TOKENS_STORAGE_KEY as V, DeploymentTimeline as Vt, getCompoundIdForSpec as W, ContentTabs as Wt, serializeThemeRule as X, DashboardGrid as Xt, serializeGeneratedTheme as Y, SearchCombobox as Yt, serializeTokenBody as Z, CommandPaletteTrigger as Zt, fieldValues as _, VALUELESS_OPERATORS as _t, TimeRangeControl as a, CommandList$1 as an, THEME_PRESET_IDS as at, removeClause as b, QueryResultChart as bt, describeClause as c, SegmentedControl as cn, isThemePresetId as ct, quoteValue as d, SaveQueryDialog as dt, CommandDialog as en, isDescriptorSpec as et, parseQuery as f, QueryHistoryList as ft, applyCellAction as g, QueryFiltersMenu as gt, addClause as h, EMPTY_QUERY_FILTERS as ht, DEFAULT_TIME_PRESETS as i, CommandItem$1 as in, FORCE_LIGHT_PRESET_IDS as it, ALL_COMPOUND_THEMES as j, FailureList as jt, OptThemeControllerContext as k, WorkflowCanvas as kt, formatClause as l, Callout as ln, QueryWorkspace as lt, EMPTY_QUERY as m, isValidQueryVariableName as mt, LogTable as n, CommandGroup$1 as nn, isPresetSpec as nt, useAutoRefresh as o, CommandSeparator$1 as on, THEME_REGISTRY as ot, parseQueryWithDiagnostics as p, QueryVariablesMenu as pt, safeParseStoredSpec as q, AppMenubar as qt, TimeSeriesPanel as r, CommandInput$1 as rn, presetTheme as rt, QueryBar as s, CommandShortcut as sn, getThemeDescriptor as st, FieldSidebar as t, CommandEmpty$1 as tn, isGeneratedSpec as tt, formatQuery as u, useMediaQuery as ut, isEmptyQuery as v, countActiveQueryFilters as vt, EventTimeline as w, QueryToolbar as wt, withFieldValue as x, defaultQueryChartConfig as xt, queryFields as y, hasActiveQueryFilters as yt, GLOBAL_THEME_STYLE_ID as z, EnvPanel as zt };
+//#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 = useId();
+	const trackRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	const [hover, setHover] = useState(null);
+	const [dragging, setDragging] = useState(null);
+	const span = Math.max(1, end - start);
+	const clamp = useCallback((time) => Math.min(end, Math.max(start, time)), [start, end]);
+	const format = 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;
+	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 = 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 = useMemo(() => groupReplayMarkers(markers, start, end, width), [
+		markers,
+		start,
+		end,
+		width
+	]);
+	const path = 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 = _objectSpread2(_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__ */ jsxs("div", {
+		className: cn("relative flex w-full flex-col", className),
+		"data-opt-id": "B98JP",
+		"data-opt-slug": "replay-scrubber.ReplayScrubber",
+		children: [/* @__PURE__ */ 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__ */ 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: cn("absolute top-0 flex h-3 w-3 -translate-x-1/2 items-center justify-center rounded-sm", OPT_FOCUS_VISIBLE),
+					style: { left: `${left}%` },
+					children: /* @__PURE__ */ jsx("span", { className: cn("block h-2.5 rounded-sm", group.items.length > 1 ? "w-2" : "w-[3px]", MARKER_CLASS[group.tone]) })
+				}, group.key);
+			})
+		}), /* @__PURE__ */ 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: cn("group relative h-6 w-full touch-none select-none rounded", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", OPT_FOCUS_VISIBLE),
+			children: [
+				path ? /* @__PURE__ */ 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__ */ jsx("path", {
+						d: path,
+						className: "fill-accent/40"
+					})
+				}) : null,
+				/* @__PURE__ */ 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__ */ jsx("span", {
+								role: "img",
+								"aria-label": `${segmentNames[segment.kind]} ${format(segment.start)}–${format(segment.end)}`,
+								className: 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__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "bg-text-tertiary/25 absolute inset-y-0",
+								style: {
+									left: `${left}%`,
+									width: `${w}%`
+								}
+							}, `buffered-${index}`);
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "bg-accent/80 absolute inset-y-0 left-0",
+							style: { width: `${percent}%` }
+						})
+					]
+				}),
+				/* @__PURE__ */ 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__ */ jsx("output", {
+					"aria-hidden": "true",
+					className: 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", 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__ */ jsxs("span", {
+		className: "inline-flex items-center gap-1",
+		children: [label, /* @__PURE__ */ jsx(Kbd, {
+			hint: true,
+			children: key
+		})]
+	}) : label;
+	const playLabel = playing ? text.pause : ended ? text.restart : text.play;
+	const PlayIcon = playing ? Pause : ended ? RotateCcw : Play;
+	const selectSpeed = useCallback((value) => () => onSpeedChange(value), [onSpeedChange]);
+	useEffect(() => {
+		if (!speeds.includes(speed)) onSpeedChange(speeds.includes(1) ? 1 : speeds[0]);
+	}, [
+		speed,
+		speeds,
+		onSpeedChange
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full flex-wrap items-center gap-element", className),
+		"data-opt-id": "RW9FW",
+		"data-opt-slug": "replay-transport.ReplayTransport",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-0.5",
+				children: [
+					onSkipToStart ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						"aria-label": text.skipToStart,
+						title: text.skipToStart,
+						disabled,
+						onClick: onSkipToStart,
+						children: /* @__PURE__ */ jsx(SkipBack, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					}) : null,
+					/* @__PURE__ */ jsx(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__ */ jsx(Rewind, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ jsx(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__ */ jsx(PlayIcon, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ jsx(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__ */ jsx(FastForward, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("min-w-[7.5rem] rounded px-1 text-left text-sm tabular-nums", 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__ */ jsx("output", {
+					"aria-live": "off",
+					children: timeLabel
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "gap-element ml-auto flex items-center",
+				children: [
+					/* @__PURE__ */ jsxs(MenuRoot$1, { children: [/* @__PURE__ */ jsxs(MenuTrigger$1, {
+						"aria-label": text.speed,
+						title: text.speed,
+						disabled,
+						className: 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", OPT_TEXT_SECONDARY),
+						children: [
+							speed,
+							"×",
+							/* @__PURE__ */ jsx(ChevronDown, {
+								className: "size-3",
+								"aria-hidden": "true"
+							})
+						]
+					}), /* @__PURE__ */ jsx(MenuPopover$1, {
+						"aria-label": text.speed,
+						className: "min-w-[6rem]",
+						children: speeds.map((value) => /* @__PURE__ */ jsxs(MenuItemRadio$1, {
+							name: "replay-speed",
+							value: String(value),
+							checked: value === speed,
+							onChange: selectSpeed(value),
+							className: "tabular-nums",
+							children: [value, "×"]
+						}, value))
+					})] }),
+					/* @__PURE__ */ jsx(Toggle$1, {
+						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__ */ jsx(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__ */ jsx(Minimize2, {
+							className: "size-4",
+							"aria-hidden": "true"
+						}) : /* @__PURE__ */ jsx(Maximize2, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					}) : null
+				]
+			}),
+			(shortcuts === null || shortcuts === void 0 ? void 0 : shortcuts.playPause) ? /* @__PURE__ */ jsxs("span", {
+				className: cn("sr-only", 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 = useRef(null);
+	const [hovering, setHovering] = useState(false);
+	const shortcutsRef = 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"
+	};
+	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]);
+	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 = 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__ */ jsx(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__ */ jsx(PanelRightClose, {
+			className: "size-4",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ jsx(PanelRightOpen, {
+			className: "size-4",
+			"aria-hidden": "true"
+		})
+	}) : null;
+	const main = /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-0 min-w-0 flex-1 flex-col",
+		children: [
+			meta || toggle ? /* @__PURE__ */ jsxs("div", {
+				className: "gap-element border-border flex min-h-9 items-center border-b px-3 py-1 text-xs",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: meta
+				}), toggle]
+			}) : null,
+			/* @__PURE__ */ 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__ */ jsx("div", {
+					className: "pointer-events-none absolute inset-0 flex items-center justify-center [&>*]:pointer-events-auto",
+					children: overlay
+				}) : null]
+			}),
+			controls ? /* @__PURE__ */ jsx("div", {
+				className: "border-border border-t px-3 py-2",
+				children: controls
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: rootRef,
+		role: "region",
+		"aria-label": text.region,
+		tabIndex: -1,
+		onKeyDown: handleKeyDown,
+		className: cn("flex min-h-0 w-full flex-col overflow-hidden rounded-lg bg-surface", OPT_BORDER, OPT_FOCUS_VISIBLE, fullscreen ? "h-screen" : "h-full", className),
+		"data-opt-id": "A3VYS",
+		"data-opt-slug": "replay-player-layout.ReplayPlayerLayout",
+		children: showInspector ? /* @__PURE__ */ jsxs(ResizablePanelGroup, {
+			direction: "horizontal",
+			id: layoutId,
+			children: [
+				/* @__PURE__ */ jsx(ResizablePanel, {
+					defaultSize: 100 - inspectorSize,
+					minSize: 40,
+					children: main
+				}),
+				/* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
+				/* @__PURE__ */ jsx(ResizablePanel, {
+					defaultSize: inspectorSize,
+					minSize: 20,
+					maxSize: 60,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex h-full min-h-0 flex-col overflow-hidden",
+						children: inspector
+					})
+				})
+			]
+		}) : main
+	});
+}
+ReplayPlayerLayout.displayName = "ReplayPlayerLayout";
+//#endregion
+export { safeParseStoredSpec as $, AppMenubar as $t, EventTimeline as A, QueryToolbar as At, createThemeBootScript as B, toast as Bt, fieldValues as C, VALUELESS_OPERATORS as Ct, withFieldValue as D, defaultQueryChartConfig as Dt, removeClause as E, QueryResultChart as Et, OptThemeControllerContext as F, WorkflowCanvas as Ft, GLOBAL_THEME_STYLE_ID as G, EnvPanel as Gt, readStoredTheme as H, DataTable as Ht, useOptThemeController as I, KeyValueEditor as It, buildTokenCache as J, SettingsForm as Jt, THEME_SPEC_STORAGE_KEY as K, ProjectSwitcher as Kt, ALL_COMPOUND_THEMES as L, FailureList as Lt, OptThemeProvider as M, QueryResultsTable as Mt, useOptTheme as N, formatQueryCell as Nt, withoutField as O, numericResultColumns as Ot, useOptionalOptTheme as P, Flyout as Pt, resolveDescriptor as Q, SidebarNav as Qt, FORCE_LIGHT_PRESETS as R, NotificationToast as Rt, applyCellAction as S, QueryFiltersMenu as St, queryFields as T, hasActiveQueryFilters as Tt, resolveThemeMode as U, DomainTable as Ut, getCompoundTheme as V, useToast as Vt, GENERATED_THEME_ID_DEFAULT as W, BranchSelect as Wt, getCompoundIdForSpec as X, ContentTabs as Xt, computeGeneratedTokens as Y, FaqAccordion as Yt, isForceLightSpec as Z, EditorToolbar as Zt, quoteValue as _, SaveQueryDialog as _t, ReplayScrubber as a, CommandPalette as an, generatedTheme as at, EMPTY_QUERY as b, isValidQueryVariableName as bt, LogTable as c, CommandEmpty$1 as cn, isPresetSpec as ct, TimeRangeControl as d, CommandItem$1 as dn, THEME_PRESET_IDS as dt, StatusSelect as en, safeParseStoredTokens as et, useAutoRefresh as f, CommandList$1 as fn, THEME_REGISTRY as ft, formatQuery as g, Callout as gn, useMediaQuery as gt, formatClause as h, SegmentedControl as hn, QueryWorkspace as ht, formatReplayElapsed as i, CommandPaletteTrigger as in, defineThemeOverrides as it, SqlEditor as j, SchemaTree as jt, ScoreBreakdown as k, QueryOutputPane as kt, TimeSeriesPanel as l, CommandGroup$1 as ln, presetTheme as lt, describeClause as m, CommandShortcut as mn, isThemePresetId as mt, replayShortcutKey as n, useAsyncSearch as nn, serializeThemeRule as nt, groupReplayMarkers as o, Command as on, isDescriptorSpec as ot, QueryBar as p, CommandSeparator$1 as pn, getThemeDescriptor as pt, THEME_TOKENS_STORAGE_KEY as q, DeploymentTimeline as qt, ReplayTransport as r, DashboardGrid as rn, serializeTokenBody as rt, FieldSidebar as s, CommandDialog as sn, isGeneratedSpec as st, ReplayPlayerLayout as t, SearchCombobox as tn, serializeGeneratedTheme as tt, DEFAULT_TIME_PRESETS as u, CommandInput$1 as un, FORCE_LIGHT_PRESET_IDS as ut, parseQuery as v, QueryHistoryList as vt, isEmptyQuery as w, countActiveQueryFilters as wt, addClause as x, EMPTY_QUERY_FILTERS as xt, parseQueryWithDiagnostics as y, QueryVariablesMenu as yt, coerceThemeMode as z, ToastProvider as zt };