@reopt-ai/opt-ui 1.6.0 → 1.7.0

package/dist/{workflow-canvas-3Jeevkgy.cjs → field-sidebar-CzIQX70-.cjs}

@@ -1,10 +1,11 @@
 "use client";
-const require_pagination = require("./pagination-Uv3CnGJz.cjs");
+const require_pagination = require("./pagination-DjfxBcjX.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_pagination.__toESM(react, 1);
 let _reopt_ai_opt_ui_primitives = require("@reopt-ai/opt-ui-primitives");
 let lucide_react = require("lucide-react");
+let _reopt_ai_opt_charts = require("@reopt-ai/opt-charts");
 let match_sorter = require("match-sorter");
 let next_link = require("next/link");
 next_link = require_pagination.__toESM(next_link, 1);
@@ -228,7 +229,6 @@ function CommandPalette({ commands, open, onOpenChange, onSelect, inline = false
 //#region src/shells/command-palette-trigger.tsx
 /** Renders the command palette trigger component. */
 function CommandPaletteTrigger({ commands, onSelect, labels }) {
-	if (commands.length === 0) return null;
 	const [open, setOpen] = (0, react.useState)(false);
 	const handleKeyDown = (0, react.useCallback)((e) => {
 		if ((e.metaKey || e.ctrlKey) && e.key === "k") {
@@ -237,9 +237,11 @@ function CommandPaletteTrigger({ commands, onSelect, labels }) {
 		}
 	}, []);
 	(0, react.useEffect)(() => {
+		if (commands.length === 0) return;
 		document.addEventListener("keydown", handleKeyDown);
 		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [handleKeyDown]);
+	}, [commands.length, handleKeyDown]);
+	if (commands.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandPalette, {
 		commands,
 		open,
@@ -252,7 +254,7 @@ function CommandPaletteTrigger({ commands, onSelect, labels }) {
 }
 //#endregion
 //#region src/shells/dashboard-grid.tsx
-const defaultLabels$13 = { ariaLabel: "대시보드 통계" };
+const defaultLabels$18 = { ariaLabel: "대시보드 통계" };
 const MIN_DASHBOARD_COLUMNS = 1;
 const MAX_DASHBOARD_COLUMNS = 12;
 function normalizeDashboardColumns(columns) {
@@ -261,7 +263,7 @@ function normalizeDashboardColumns(columns) {
 }
 /** Renders the dashboard grid component. */
 function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$13), customLabels);
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$18), customLabels);
 	const columnCount = normalizeDashboardColumns(columns);
 	const rowStyle = { "--opt-dashboard-grid-columns": `repeat(${columnCount}, minmax(0, 1fr))` };
 	const rows = [];
@@ -289,13 +291,13 @@ function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/search-combobox.tsx
-const defaultLabels$12 = {
+const defaultLabels$17 = {
 	noResults: "결과가 없습니다.",
 	loading: "Loading…"
 };
 /** Renders the search combobox component. */
 function SearchCombobox({ items, placeholder = "검색...", label = "검색", onSelect, labels: customLabels, async: isAsync = false, onSearch, debounceMs = 300 }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$12), customLabels);
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$17), customLabels);
 	const inputId = (0, react.useId)();
 	const [query, setQuery] = (0, react.useState)("");
 	const [asyncResults, setAsyncResults] = (0, react.useState)([]);
@@ -393,14 +395,14 @@ function SearchCombobox({ items, placeholder = "검색...", label = "검색", on
 }
 //#endregion
 //#region src/shells/status-select.tsx
-const defaultLabels$11 = {
+const defaultLabels$16 = {
 	selectLabel: "상태",
 	emptyMessage: "사용 가능한 상태 옵션이 없습니다."
 };
 /** Renders the status select component. */
 function StatusSelect({ options, value: controlledValue, onChange, label, labels: customLabels }) {
 	var _options$0$value, _options$;
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$11), customLabels);
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$16), customLabels);
 	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
 	const [internalValue, setInternalValue] = (0, react.useState)((_options$0$value = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value) !== null && _options$0$value !== void 0 ? _options$0$value : "");
 	const value = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
@@ -467,7 +469,7 @@ function StatusSelect({ options, value: controlledValue, onChange, label, labels
 }
 //#endregion
 //#region src/shells/app-menubar.tsx
-const defaultLabels$10 = { ariaLabel: "Application menu" };
+const defaultLabels$15 = { ariaLabel: "Application menu" };
 function MenuSection({ menu }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.MenuRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.MenuTrigger, { children: [menu.label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuButtonArrow, {})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuPopover, { children: menu.items.map((item, i) => {
 		if (item.type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuSeparator, {}, `sep-${i}`);
@@ -511,7 +513,7 @@ function MenuSection({ menu }) {
 }
 /** Renders the app menubar component. */
 function AppMenubar({ menus, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$10), customLabels);
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$15), customLabels);
 	if (menus.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenubarRoot, {
 		"data-opt-id": "BGKHW",
@@ -550,11 +552,10 @@ const sectionStyles = {
 	Templates: "text-text-tertiary"
 };
 const defaultSectionStyle = "text-text-secondary";
-const defaultLabels$9 = { ariaLabel: "문서 네비게이션" };
+const defaultLabels$14 = { ariaLabel: "문서 네비게이션" };
 /** Renders the sidebar nav component. */
 function SidebarNav({ items, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$9), customLabels);
-	if (items.length === 0) return null;
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$14), customLabels);
 	const pathname = (0, next_navigation.usePathname)();
 	const activeItem = items.find((item) => item.href === pathname);
 	const [activeId, setActiveId] = (0, react.useState)(activeItem ? domId(activeItem.id) : void 0);
@@ -562,6 +563,7 @@ function SidebarNav({ items, labels: customLabels }) {
 		const match = items.find((item) => item.href === pathname);
 		if (match) setActiveId(domId(match.id));
 	}, [pathname, items]);
+	if (items.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeProvider, {
 		focusLoop: true,
 		orientation: "vertical",
@@ -601,7 +603,7 @@ function SidebarNav({ items, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/editor-toolbar.tsx
-const defaultLabels$8 = { ariaLabel: "텍스트 편집기 툴바" };
+const defaultLabels$13 = { ariaLabel: "텍스트 편집기 툴바" };
 function ToolbarButtonWithTooltip({ button, active, onAction }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.TooltipProvider, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.TooltipAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.ToolbarButton, {
 		className: `text-text-primary data-[active-item]:bg-bg-subtle data-[focus-visible]:ring-ring rounded-md p-2 transition-colors outline-none data-[focus-visible]:ring-2 ${active ? "bg-bg-muted" : "hover:bg-bg-subtle"}`,
@@ -611,7 +613,7 @@ function ToolbarButtonWithTooltip({ button, active, onAction }) {
 }
 /** Renders the editor toolbar component. */
 function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$8), customLabels);
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$13), customLabels);
 	const groups = [];
 	let current = [];
 	for (const btn of buttons) {
@@ -644,21 +646,21 @@ function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLa
 }
 //#endregion
 //#region src/shells/content-tabs.tsx
-const defaultLabels$7 = {
+const defaultLabels$12 = {
 	ariaLabel: "콘텐츠 탭",
 	emptyMessage: "표시할 탭이 없습니다."
 };
 /** Renders the content tabs component. */
 function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
 	var _tabs$, _tabs$find;
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$7), customLabels);
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$12), customLabels);
+	const [selectedTabId, setSelectedTabId] = (0, react.useState)(defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
 	if (tabs.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "text-text-secondary text-sm",
 		"data-opt-id": "9W97K",
 		"data-opt-slug": "content-tabs.ContentTabs",
 		children: labels.emptyMessage
 	});
-	const [selectedTabId, setSelectedTabId] = (0, react.useState)(defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
 	const handleSelectedTabId = (nextId) => {
 		var _tabs$2;
 		setSelectedTabId(nextId !== null && nextId !== void 0 ? nextId : (_tabs$2 = tabs[0]) === null || _tabs$2 === void 0 ? void 0 : _tabs$2.id);
@@ -683,13 +685,13 @@ function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/faq-accordion.tsx
-const defaultLabels$6 = {
+const defaultLabels$11 = {
 	ariaLabel: "자주 묻는 질문",
 	emptyMessage: "등록된 FAQ가 없습니다."
 };
 /** Renders the faq accordion component. */
 function FaqAccordion({ items, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$6), customLabels);
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$11), customLabels);
 	if (items.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "text-text-secondary text-sm",
 		"data-opt-id": "QRBHV",
@@ -729,21 +731,15 @@ function FaqAccordion({ items, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/settings-form.tsx
-const defaultLabels$5 = {
+const defaultLabels$10 = {
 	formAriaLabel: "설정 폼",
 	submitButton: "저장",
 	successMessage: "설정이 저장되었습니다."
 };
 /** Renders the settings form component. */
 function SettingsForm({ fields, onSubmit, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$5), customLabels);
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$10), customLabels);
 	const [submitted, setSubmitted] = (0, react.useState)(false);
-	if (fields.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.EmptyState, {
-		title: "설정 항목이 없습니다.",
-		description: "표시할 설정 필드를 추가하면 이 폼이 렌더링됩니다.",
-		"data-opt-id": "9TEEJ",
-		"data-opt-slug": "settings-form.SettingsForm"
-	});
 	const defaultValues = {};
 	for (const field of fields) {
 		var _field$defaultValue;
@@ -774,6 +770,12 @@ function SettingsForm({ fields, onSubmit, labels: customLabels }) {
 			onSubmit === null || onSubmit === void 0 || onSubmit(values);
 		}
 	});
+	if (fields.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.EmptyState, {
+		title: "설정 항목이 없습니다.",
+		description: "표시할 설정 필드를 추가하면 이 폼이 렌더링됩니다.",
+		"data-opt-id": "9TEEJ",
+		"data-opt-slug": "settings-form.SettingsForm"
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "gap-group flex flex-col",
 		"data-opt-id": "9TEEJ",
@@ -1062,7 +1064,7 @@ function ProjectSwitcher({ projects, value, onChange, placeholder = "프로젝
 ProjectSwitcher.displayName = "ProjectSwitcher";
 //#endregion
 //#region src/shells/env-panel.tsx
-const defaultLabels$4 = {
+const defaultLabels$9 = {
 	varCount: (count) => `${count}개 변수`,
 	envVarsLabel: (env) => `${env} 환경 변수`,
 	secretBadge: "secret"
@@ -1074,7 +1076,7 @@ const envDot = {
 };
 /** Renders the env panel component. */
 function EnvPanel({ groups, labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$4), customLabels);
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$9), customLabels);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: `rounded-lg ${require_pagination.OPT_BORDER} divide-y ${require_pagination.OPT_DIVIDER} bg-surface`,
 		"data-opt-id": "ZBDWK",
@@ -1147,7 +1149,7 @@ function EnvPanel({ groups, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/branch-select.tsx
-const defaultLabels$3 = {
+const defaultLabels$8 = {
 	selectLabel: "브랜치",
 	emptySelectionLabel: "선택...",
 	emptyMessage: "사용 가능한 브랜치가 없습니다.",
@@ -1156,7 +1158,7 @@ const defaultLabels$3 = {
 /** Renders the branch select component. */
 function BranchSelect({ branches, value: controlledValue, onChange, label, labels: customLabels }) {
 	var _ref, _defaultBranch$name, _branches$, _selected$name;
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$3), customLabels);
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$8), customLabels);
 	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
 	const defaultBranch = branches.find((b) => b.isDefault);
 	const [internalValue, setInternalValue] = (0, react.useState)((_ref = (_defaultBranch$name = defaultBranch === null || defaultBranch === void 0 ? void 0 : defaultBranch.name) !== null && _defaultBranch$name !== void 0 ? _defaultBranch$name : (_branches$ = branches[0]) === null || _branches$ === void 0 ? void 0 : _branches$.name) !== null && _ref !== void 0 ? _ref : "");
@@ -1265,7 +1267,7 @@ function BranchSelect({ branches, value: controlledValue, onChange, label, label
 BranchSelect.displayName = "BranchSelect";
 //#endregion
 //#region src/shells/domain-table.tsx
-const defaultLabels$2 = {
+const defaultLabels$7 = {
 	domain: "Domain",
 	status: "Status",
 	ssl: "SSL",
@@ -1295,7 +1297,7 @@ const sslLabel = {
 };
 /** Renders the domain table component. */
 function DomainTable({ domains, title = "도메인", labels: customLabels }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$2), customLabels);
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$7), customLabels);
 	if (domains.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "gap-group flex flex-col",
 		"data-opt-id": "A7SRM",
@@ -1901,7 +1903,7 @@ function NotificationToast({ toast, onDismiss, defaultDuration = 5e3 }) {
 }
 //#endregion
 //#region src/shells/failure-list.tsx
-const defaultLabels$1 = {
+const defaultLabels$6 = {
 	title: "최근 실패",
 	emptyMessage: "실패 항목이 없습니다",
 	moreItems: "{count}개 더 보기",
@@ -2000,20 +2002,20 @@ function FailureItemRow({ failure, isLast, onFailureClick, renderActions, merged
 function FailureList({ failures, title, maxItems, grouped = false, onFailureClick, onShowMore, labels: customLabels, locale = "ko-KR", loading = false, renderActions, className }) {
 	var _customLabels$timeAgo, _customLabels$timeAgo2, _customLabels$timeAgo3, _customLabels$timeAgo4, _customLabels$timeAgo5, _customLabels$timeAgo6, _customLabels$timeAgo7, _customLabels$timeAgo8, _customLabels$severit, _customLabels$severit2, _customLabels$severit3, _customLabels$severit4, _customLabels$severit5, _customLabels$severit6, _customLabels$title, _customLabels$emptyMe, _customLabels$moreIte;
 	const mergedTimeAgo = {
-		justNow: (_customLabels$timeAgo = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo2 = customLabels.timeAgo) === null || _customLabels$timeAgo2 === void 0 ? void 0 : _customLabels$timeAgo2.justNow) !== null && _customLabels$timeAgo !== void 0 ? _customLabels$timeAgo : defaultLabels$1.timeAgo.justNow,
-		minutesAgo: (_customLabels$timeAgo3 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo4 = customLabels.timeAgo) === null || _customLabels$timeAgo4 === void 0 ? void 0 : _customLabels$timeAgo4.minutesAgo) !== null && _customLabels$timeAgo3 !== void 0 ? _customLabels$timeAgo3 : defaultLabels$1.timeAgo.minutesAgo,
-		hoursAgo: (_customLabels$timeAgo5 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo6 = customLabels.timeAgo) === null || _customLabels$timeAgo6 === void 0 ? void 0 : _customLabels$timeAgo6.hoursAgo) !== null && _customLabels$timeAgo5 !== void 0 ? _customLabels$timeAgo5 : defaultLabels$1.timeAgo.hoursAgo,
-		daysAgo: (_customLabels$timeAgo7 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo8 = customLabels.timeAgo) === null || _customLabels$timeAgo8 === void 0 ? void 0 : _customLabels$timeAgo8.daysAgo) !== null && _customLabels$timeAgo7 !== void 0 ? _customLabels$timeAgo7 : defaultLabels$1.timeAgo.daysAgo
+		justNow: (_customLabels$timeAgo = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo2 = customLabels.timeAgo) === null || _customLabels$timeAgo2 === void 0 ? void 0 : _customLabels$timeAgo2.justNow) !== null && _customLabels$timeAgo !== void 0 ? _customLabels$timeAgo : defaultLabels$6.timeAgo.justNow,
+		minutesAgo: (_customLabels$timeAgo3 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo4 = customLabels.timeAgo) === null || _customLabels$timeAgo4 === void 0 ? void 0 : _customLabels$timeAgo4.minutesAgo) !== null && _customLabels$timeAgo3 !== void 0 ? _customLabels$timeAgo3 : defaultLabels$6.timeAgo.minutesAgo,
+		hoursAgo: (_customLabels$timeAgo5 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo6 = customLabels.timeAgo) === null || _customLabels$timeAgo6 === void 0 ? void 0 : _customLabels$timeAgo6.hoursAgo) !== null && _customLabels$timeAgo5 !== void 0 ? _customLabels$timeAgo5 : defaultLabels$6.timeAgo.hoursAgo,
+		daysAgo: (_customLabels$timeAgo7 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo8 = customLabels.timeAgo) === null || _customLabels$timeAgo8 === void 0 ? void 0 : _customLabels$timeAgo8.daysAgo) !== null && _customLabels$timeAgo7 !== void 0 ? _customLabels$timeAgo7 : defaultLabels$6.timeAgo.daysAgo
 	};
 	const mergedSeverityLabels = {
-		critical: (_customLabels$severit = customLabels === null || customLabels === void 0 || (_customLabels$severit2 = customLabels.severityLabels) === null || _customLabels$severit2 === void 0 ? void 0 : _customLabels$severit2.critical) !== null && _customLabels$severit !== void 0 ? _customLabels$severit : defaultLabels$1.severityLabels.critical,
-		error: (_customLabels$severit3 = customLabels === null || customLabels === void 0 || (_customLabels$severit4 = customLabels.severityLabels) === null || _customLabels$severit4 === void 0 ? void 0 : _customLabels$severit4.error) !== null && _customLabels$severit3 !== void 0 ? _customLabels$severit3 : defaultLabels$1.severityLabels.error,
-		warning: (_customLabels$severit5 = customLabels === null || customLabels === void 0 || (_customLabels$severit6 = customLabels.severityLabels) === null || _customLabels$severit6 === void 0 ? void 0 : _customLabels$severit6.warning) !== null && _customLabels$severit5 !== void 0 ? _customLabels$severit5 : defaultLabels$1.severityLabels.warning
+		critical: (_customLabels$severit = customLabels === null || customLabels === void 0 || (_customLabels$severit2 = customLabels.severityLabels) === null || _customLabels$severit2 === void 0 ? void 0 : _customLabels$severit2.critical) !== null && _customLabels$severit !== void 0 ? _customLabels$severit : defaultLabels$6.severityLabels.critical,
+		error: (_customLabels$severit3 = customLabels === null || customLabels === void 0 || (_customLabels$severit4 = customLabels.severityLabels) === null || _customLabels$severit4 === void 0 ? void 0 : _customLabels$severit4.error) !== null && _customLabels$severit3 !== void 0 ? _customLabels$severit3 : defaultLabels$6.severityLabels.error,
+		warning: (_customLabels$severit5 = customLabels === null || customLabels === void 0 || (_customLabels$severit6 = customLabels.severityLabels) === null || _customLabels$severit6 === void 0 ? void 0 : _customLabels$severit6.warning) !== null && _customLabels$severit5 !== void 0 ? _customLabels$severit5 : defaultLabels$6.severityLabels.warning
 	};
 	const labels = {
-		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$1.title,
-		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$1.emptyMessage,
-		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$1.moreItems
+		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$6.title,
+		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$6.emptyMessage,
+		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$6.moreItems
 	};
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const allItems = maxItems ? failures.slice(0, maxItems) : failures;
@@ -2089,7 +2091,7 @@ function renderGrouped(items, remainingCount, rowProps, labels, onShowMore) {
 }
 //#endregion
 //#region src/shells/key-value-editor.tsx
-const defaultLabels = {
+const defaultLabels$5 = {
 	keyPlaceholder: "키",
 	valuePlaceholder: "값",
 	addButton: "추가",
@@ -2103,7 +2105,7 @@ function generateId() {
 }
 /** Renders the key value editor component. */
 function KeyValueEditor({ value: controlledValue, defaultValue, onChange, showSecretToggle = false, maxEntries, readOnly = false, labels: customLabels, renderActions, validateKey, className }) {
-	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels), customLabels);
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$5), customLabels);
 	const [internalEntries, setInternalEntries] = (0, react.useState)(() => defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
 	const entries = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalEntries;
 	const keyInputRef = (0, react.useRef)(null);
@@ -2399,6 +2401,1834 @@ function WorkflowCanvas({ steps, connections = [], rows = 9, cols = 9, cellSize
 }
 WorkflowCanvas.displayName = "WorkflowCanvas";
 //#endregion
+//#region src/lib/use-auto-refresh.ts
+/**
+* A refresh timer that waits for its own work.
+*
+* A plain `setInterval` fires on a schedule regardless of whether the previous
+* query came back, so a five-second interval over a seven-second query stacks
+* requests until something gives. Chaining the next wait onto the settled
+* promise keeps exactly one refresh in flight, and a rejection stops the loop
+* instead of hammering an endpoint that is already failing.
+*/
+function useAutoRefresh({ interval, paused = false, onRefresh }) {
+	const callbackRef = (0, react.useRef)(onRefresh);
+	callbackRef.current = onRefresh;
+	(0, react.useEffect)(() => {
+		if (paused || interval <= 0 || !callbackRef.current) return;
+		let cancelled = false;
+		let timer;
+		const schedule = () => {
+			timer = setTimeout(async () => {
+				if (cancelled) return;
+				try {
+					var _callbackRef$current;
+					await ((_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef));
+				} catch (_unused) {
+					return;
+				}
+				if (!cancelled) schedule();
+			}, interval);
+		};
+		schedule();
+		return () => {
+			cancelled = true;
+			if (timer) clearTimeout(timer);
+		};
+	}, [interval, paused]);
+}
+//#endregion
+//#region src/shells/time-range-control.tsx
+const defaultLabels$4 = {
+	trigger: "Select time range",
+	invalid: "Invalid time range",
+	last: (duration) => `Last ${duration}`,
+	next: (duration) => `Next ${duration}`,
+	quickSelect: "Quick select",
+	apply: "Apply",
+	update: "Update",
+	refresh: "Refresh",
+	commonlyUsed: "Commonly used",
+	recentlyUsed: "Recently used",
+	start: "Start",
+	end: "End",
+	startHint: "Absolute time or date math, e.g. now-7d",
+	autoRefresh: "Auto refresh",
+	autoRefreshOff: "Off",
+	every: (duration) => `Every ${duration}`,
+	previous: "Previous window",
+	nextWindow: "Next window",
+	zoomIn: "Zoom in",
+	zoomOut: "Zoom out",
+	thisUnit: (unit) => `This ${unit}`,
+	units: {
+		s: "seconds",
+		m: "minutes",
+		h: "hours",
+		d: "days",
+		w: "weeks",
+		M: "months",
+		y: "years"
+	}
+};
+const QUICK_UNITS = [
+	"m",
+	"h",
+	"d",
+	"w",
+	"M",
+	"y"
+];
+const REFRESH_INTERVALS = [
+	0,
+	5e3,
+	1e4,
+	3e4,
+	6e4,
+	3e5
+];
+function selectValue(value) {
+	var _value$;
+	return Array.isArray(value) ? (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : "" : value;
+}
+/**
+* What the trigger says.
+*
+* A window anchored to `now` deserves its intent ("Last 7 days"), not two
+* timestamps the reader has to subtract. Everything else gets both ends
+* spelled out. A duration that does not divide into whole minutes is prefixed
+* with `~` rather than rounded silently.
+*/
+function describeRange(range, labels, options) {
+	const window = (0, _reopt_ai_opt_charts.measureTimeWindow)(range, {
+		timeZone: options.timeZone,
+		now: options.now
+	});
+	if (window.isInvalid) return {
+		text: labels.invalid,
+		isInvalid: true
+	};
+	const fromParts = (0, _reopt_ai_opt_charts.parseRelativeParts)(range.from);
+	const toParts = (0, _reopt_ai_opt_charts.parseRelativeParts)(range.to);
+	if ((fromParts === null || fromParts === void 0 ? void 0 : fromParts.roundUnit) && fromParts.count === 0 && (toParts === null || toParts === void 0 ? void 0 : toParts.roundUnit) === fromParts.roundUnit && toParts.count === 0) return {
+		text: labels.thisUnit((0, _reopt_ai_opt_charts.formatCountUnit)(1, fromParts.roundUnit, options.locale).replace(/^1\s*/, "")),
+		isInvalid: false
+	};
+	if ((0, _reopt_ai_opt_charts.isRelativeToNow)(range)) {
+		var _toParts$count;
+		const anchoredAtEnd = ((_toParts$count = toParts === null || toParts === void 0 ? void 0 : toParts.count) !== null && _toParts$count !== void 0 ? _toParts$count : 0) === 0;
+		const parts = anchoredAtEnd ? fromParts : toParts;
+		const bothSnapped = (parts === null || parts === void 0 ? void 0 : parts.roundUnit) === (parts === null || parts === void 0 ? void 0 : parts.unit) && (toParts === null || toParts === void 0 ? void 0 : toParts.roundUnit) === (parts === null || parts === void 0 ? void 0 : parts.unit);
+		const counted = parts && parts.count > 0 ? (0, _reopt_ai_opt_charts.formatCountUnit)(parts.roundUnit && bothSnapped ? parts.count + 1 : parts.count, parts.unit, options.locale) : null;
+		const exact = counted !== null && (!(parts === null || parts === void 0 ? void 0 : parts.roundUnit) || bothSnapped);
+		const duration = exact ? counted : (0, _reopt_ai_opt_charts.formatDuration)(window.duration, options.locale);
+		const prefix = exact || (0, _reopt_ai_opt_charts.isExactMinutes)(window.duration) ? "" : "~";
+		return {
+			text: anchoredAtEnd ? labels.last(`${prefix}${duration}`) : labels.next(`${prefix}${duration}`),
+			isInvalid: false
+		};
+	}
+	const dateOnly = (0, _reopt_ai_opt_charts.isDateOnly)(range.from) && (0, _reopt_ai_opt_charts.isDateOnly)(range.to);
+	const from = (0, _reopt_ai_opt_charts.formatInstant)(window.from, require_pagination._objectSpread2(require_pagination._objectSpread2({}, options), {}, { dateOnly }));
+	const to = (0, _reopt_ai_opt_charts.formatInstant)(window.to, require_pagination._objectSpread2(require_pagination._objectSpread2({}, options), {}, { dateOnly }));
+	return {
+		text: from === to ? from : `${from} – ${to}`,
+		isInvalid: false
+	};
+}
+/**
+* TimeRangeControl — the window as an expression, not two frozen instants.
+*
+* Holding `{ from: "now-7d", to: "now" }` instead of a resolved pair is what
+* makes a saved board, a shared link and an auto-refresh timer all mean the
+* same thing tomorrow that they mean today. Around that sit the moves people
+* actually make on a chart: jump to a named window, step the same width back
+* and forth to compare, widen when the interesting thing is just off screen,
+* and let it re-query on a timer while they watch.
+*
+* @example
+* ```tsx
+* const [range, setRange] = useState<TimeRange>({ from: "now-7d", to: "now" });
+*
+* <TimeRangeControl
+*   value={range}
+*   onChange={setRange}
+*   timeZone="Asia/Seoul"
+*   showWindowButtons
+*   onRefresh={() => refetch()}
+* />
+* ```
+*/
+function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, locale, showUpdateButton = true, showWindowButtons = true, zoomFactor = .5, refresh, onRefreshChange, onRefresh, isLoading = false, disabled = false, className, labels: customLabels, "aria-label": ariaLabel }) {
+	var _refresh$interval, _refresh$paused, _refresh$interval2;
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$4), customLabels), {}, { units: require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$4.units), customLabels === null || customLabels === void 0 ? void 0 : customLabels.units) });
+	const [open, setOpen] = (0, react.useState)(false);
+	const [draft, setDraft] = (0, react.useState)(null);
+	const [quickCount, setQuickCount] = (0, react.useState)("15");
+	const [quickUnit, setQuickUnit] = (0, react.useState)("m");
+	const editing = draft !== null && draft !== void 0 ? draft : value;
+	const hasChanges = draft !== null && (draft.from !== value.from || draft.to !== value.to);
+	const description = (0, react.useMemo)(() => describeRange(value, labels, {
+		locale,
+		timeZone
+	}), [
+		value,
+		locale,
+		timeZone,
+		customLabels
+	]);
+	const boundState = (0, react.useCallback)((expression) => (0, _reopt_ai_opt_charts.parseTimeExpression)(expression, { timeZone }) === null ? labels.invalid : void 0, [timeZone, labels]);
+	const commit = (0, react.useCallback)((range) => {
+		setDraft(null);
+		onChange(range);
+	}, [onChange]);
+	const apply = (0, react.useCallback)(() => {
+		if (draft) commit(draft);
+		else onRefresh === null || onRefresh === void 0 || onRefresh();
+	}, [
+		draft,
+		commit,
+		onRefresh
+	]);
+	const commitOnEnter = (0, react.useCallback)((event) => {
+		if (event.key !== "Enter") return;
+		apply();
+		setOpen(false);
+	}, [apply]);
+	const applyQuick = (0, react.useCallback)(() => {
+		const count = Number(quickCount);
+		if (!Number.isFinite(count) || count <= 0) return;
+		commit({
+			from: `now-${Math.round(count)}${quickUnit}`,
+			to: "now"
+		});
+		setOpen(false);
+	}, [
+		quickCount,
+		quickUnit,
+		commit
+	]);
+	const step = (0, react.useCallback)((direction) => {
+		const next = (0, _reopt_ai_opt_charts.shiftTimeRange)(value, direction, { timeZone });
+		if (next) commit(next);
+	}, [
+		value,
+		timeZone,
+		commit
+	]);
+	const zoom = (0, react.useCallback)((factor) => {
+		const next = (0, _reopt_ai_opt_charts.zoomTimeRange)(value, factor, { timeZone });
+		if (next) commit(next);
+	}, [
+		value,
+		timeZone,
+		commit
+	]);
+	useAutoRefresh({
+		interval: (_refresh$interval = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval !== void 0 ? _refresh$interval : 0,
+		paused: (_refresh$paused = refresh === null || refresh === void 0 ? void 0 : refresh.paused) !== null && _refresh$paused !== void 0 ? _refresh$paused : true,
+		onRefresh
+	});
+	const refreshLabel = !refresh || refresh.paused || refresh.interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(refresh.interval, locale));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("bg-surface inline-flex items-center rounded-lg border", require_pagination.OPT_BORDER, className),
+		role: "group",
+		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.trigger,
+		"data-opt-id": "3WJ8H",
+		"data-opt-slug": "time-range-control.TimeRangeControl",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverRoot, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverTrigger, {
+					className: require_pagination.cn("text-text-primary h-10 gap-2", description.isInvalid && "text-danger-fg"),
+					disabled,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Clock, {
+						className: "text-text-tertiary h-4 w-4",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "truncate text-sm",
+						children: description.text
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.PopoverContent, {
+					className: "gap-group flex w-80 flex-col",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-text-primary text-xs font-medium",
+								children: labels.quickSelect
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-end gap-2",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+										"aria-label": labels.quickSelect,
+										type: "number",
+										min: 1,
+										size: "sm",
+										className: "w-20",
+										value: quickCount,
+										onChange: (event) => setQuickCount(event.target.value),
+										onKeyDown: (event) => {
+											if (event.key === "Enter") applyQuick();
+										}
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectRoot, {
+										value: quickUnit,
+										setValue: (next) => setQuickUnit(selectValue(next)),
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectTrigger, {
+											minWidth: 110,
+											"aria-label": labels.quickSelect
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, { children: QUICK_UNITS.map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectItem, {
+											value: unit,
+											children: labels.units[unit]
+										}, unit)) })]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+										variant: "secondary",
+										size: "sm",
+										onClick: applyQuick,
+										children: labels.apply
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+								label: labels.start,
+								size: "sm",
+								value: editing.from,
+								error: boundState(editing.from),
+								hint: labels.startHint,
+								onChange: (event) => setDraft(require_pagination._objectSpread2(require_pagination._objectSpread2({}, editing), {}, { from: event.target.value })),
+								onKeyDown: commitOnEnter
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Input, {
+								label: labels.end,
+								size: "sm",
+								value: editing.to,
+								error: boundState(editing.to),
+								onChange: (event) => setDraft(require_pagination._objectSpread2(require_pagination._objectSpread2({}, editing), {}, { to: event.target.value })),
+								onKeyDown: commitOnEnter
+							})]
+						}),
+						presets && presets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeList, {
+							title: labels.commonlyUsed,
+							items: presets,
+							onPick: (range) => {
+								commit(range);
+								setOpen(false);
+							}
+						}),
+						recentRanges && recentRanges.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeList, {
+							title: labels.recentlyUsed,
+							items: recentRanges.slice(0, 5),
+							onPick: (range) => {
+								commit(range);
+								setOpen(false);
+							}
+						}),
+						onRefreshChange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "gap-element flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-text-primary text-xs font-medium",
+								children: labels.autoRefresh
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.SelectRoot, {
+								value: String((refresh === null || refresh === void 0 ? void 0 : refresh.paused) ? 0 : (_refresh$interval2 = refresh === null || refresh === void 0 ? void 0 : refresh.interval) !== null && _refresh$interval2 !== void 0 ? _refresh$interval2 : 0),
+								setValue: (next) => {
+									const interval = Number(selectValue(next));
+									onRefreshChange({
+										interval,
+										paused: interval === 0
+									});
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectTrigger, {
+									minWidth: 140,
+									"aria-label": labels.autoRefresh
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectPopover, { children: REFRESH_INTERVALS.map((interval) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.SelectItem, {
+									value: String(interval),
+									children: interval === 0 ? labels.autoRefreshOff : labels.every((0, _reopt_ai_opt_charts.formatDuration)(interval, locale))
+								}, interval)) })]
+							})]
+						})
+					]
+				})]
+			}),
+			showWindowButtons && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_pagination.cn("flex items-center border-l", "border border-border"),
+				role: "group",
+				"aria-label": labels.previous,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.previous,
+						disabled: disabled || description.isInvalid,
+						onClick: () => step(-1),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.zoomIn,
+						disabled: disabled || description.isInvalid,
+						onClick: () => zoom(-zoomFactor),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomIn, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.zoomOut,
+						disabled: disabled || description.isInvalid,
+						onClick: () => zoom(zoomFactor),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ZoomOut, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						label: labels.nextWindow,
+						disabled: disabled || description.isInvalid,
+						onClick: () => step(1),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					})
+				]
+			}),
+			(onRefresh || showUpdateButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_pagination.cn("border-l pl-2 pr-2", "border border-border"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+					variant: hasChanges ? "primary" : "secondary",
+					size: "sm",
+					loading: isLoading,
+					disabled: disabled || description.isInvalid,
+					onClick: apply,
+					leftIcon: hasChanges ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RefreshCw, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}),
+					title: refreshLabel,
+					children: hasChanges ? labels.update : labels.refresh
+				})
+			})
+		]
+	});
+}
+TimeRangeControl.displayName = "TimeRangeControl";
+function IconButton({ label, disabled, onClick, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+		variant: "ghost",
+		size: "sm",
+		"aria-label": label,
+		title: label,
+		disabled,
+		onClick,
+		children
+	});
+}
+function RangeList({ title, items, onPick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "gap-element flex flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-text-primary text-xs font-medium",
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "grid grid-cols-2 gap-1",
+			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: require_pagination.cn("hover:bg-bg-subtle w-full cursor-pointer rounded px-2 py-1 text-left text-xs", require_pagination.OPT_TEXT_SECONDARY),
+				onClick: () => onPick(item.range),
+				children: item.label
+			}) }, `${item.label}-${index}`))
+		})]
+	});
+}
+/**
+* The windows most analytics tools open with. Exported so a caller gets a
+* sensible list without inventing date math of their own.
+*/
+const DEFAULT_TIME_PRESETS = [
+	{
+		label: "Last 15 minutes",
+		range: {
+			from: "now-15m",
+			to: "now"
+		}
+	},
+	{
+		label: "Last hour",
+		range: {
+			from: "now-1h",
+			to: "now"
+		}
+	},
+	{
+		label: "Last 24 hours",
+		range: {
+			from: "now-24h",
+			to: "now"
+		}
+	},
+	{
+		label: "Last 7 days",
+		range: {
+			from: "now-7d",
+			to: "now"
+		}
+	},
+	{
+		label: "Last 30 days",
+		range: {
+			from: "now-30d",
+			to: "now"
+		}
+	},
+	{
+		label: "Last 90 days",
+		range: {
+			from: "now-90d",
+			to: "now"
+		}
+	},
+	{
+		label: "Today",
+		range: {
+			from: "now/d",
+			to: "now/d"
+		}
+	},
+	{
+		label: "This week",
+		range: {
+			from: "now/w",
+			to: "now/w"
+		}
+	}
+];
+//#endregion
+//#region src/shells/time-series-panel.tsx
+const defaultLabels$3 = {
+	back: "Back to previous range",
+	legend: "Series"
+};
+/**
+* TimeSeriesPanel — a chart you can steer.
+*
+* The point of putting the control and the chart in one component is the
+* loop between them: drag across the plot and the window narrows to what you
+* dragged, which re-queries, which redraws the axis you just picked. That
+* only works if someone owns the step back out again — so zoom keeps a
+* history, and the header offers the way back rather than leaving the reader
+* to retype the range they came from.
+*
+* @example
+* ```tsx
+* const [range, setRange] = useState<TimeRange>({ from: "now-7d", to: "now" });
+*
+* <TimeSeriesPanel
+*   title="Sessions"
+*   data={points}
+*   series={[{ dataKey: "sessions", name: "Sessions" }]}
+*   range={range}
+*   onRangeChange={setRange}
+*   onRefresh={() => refetch()}
+*   toggleableLegend
+* />
+* ```
+*/
+function TimeSeriesPanel({ title, description, actions, data, series, range, onRangeChange, granularity = "auto", timeZone, locale, showRangeControl = true, presets, recentRanges, refresh, onRefreshChange, onRefresh, toggleableLegend = false, annotations, isLoading = false, height = 280, className, chartProps, labels: customLabels, "aria-label": ariaLabel }) {
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$3), customLabels);
+	const [history, setHistory] = (0, react.useState)([]);
+	const [hidden, setHidden] = (0, react.useState)([]);
+	const resolved = (0, react.useMemo)(() => (0, _reopt_ai_opt_charts.resolveTimeRange)(range, { timeZone }), [range, timeZone]);
+	const visibleSeries = (0, react.useMemo)(() => series.filter((def) => !hidden.includes(def.dataKey)), [series, hidden]);
+	const handleRangeSelect = (0, react.useCallback)((selection) => {
+		setHistory((current) => [...current, range].slice(-10));
+		onRangeChange((0, _reopt_ai_opt_charts.toAbsoluteRange)(selection));
+	}, [range, onRangeChange]);
+	const goBack = (0, react.useCallback)(() => {
+		setHistory((current) => {
+			const previous = current[current.length - 1];
+			if (previous) onRangeChange(previous);
+			return current.slice(0, -1);
+		});
+	}, [onRangeChange]);
+	const setRange = (0, react.useCallback)((next) => {
+		setHistory([]);
+		onRangeChange(next);
+	}, [onRangeChange]);
+	const toggleSeries = (0, react.useCallback)((dataKey) => {
+		setHidden((current) => current.includes(dataKey) ? current.filter((key) => key !== dataKey) : [...current, dataKey]);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: require_pagination.cn(require_pagination.OPT_SURFACE, require_pagination.OPT_BORDER, "flex flex-col", className),
+		"aria-label": ariaLabel,
+		"data-opt-id": "Y0XCY",
+		"data-opt-slug": "time-series-panel.TimeSeriesPanel",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+			className: "gap-group flex flex-wrap items-start justify-between px-5 pt-5 pb-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "gap-element flex min-w-0 flex-col",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "text-text-primary truncate text-base font-semibold",
+					children: title
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_pagination.cn("text-text-secondary", "truncate text-sm"),
+					children: description
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "gap-element flex flex-wrap items-center",
+				children: [
+					history.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: goBack,
+						leftIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Undo2, {
+							className: "h-3.5 w-3.5",
+							"aria-hidden": "true"
+						}),
+						children: labels.back
+					}),
+					actions,
+					showRangeControl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeRangeControl, {
+						value: range,
+						onChange: setRange,
+						presets,
+						recentRanges,
+						timeZone,
+						locale,
+						refresh,
+						onRefreshChange,
+						onRefresh,
+						isLoading,
+						labels: customLabels === null || customLabels === void 0 ? void 0 : customLabels.control
+					})
+				]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "px-2 pb-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_charts.TimeSeriesChart, require_pagination._objectSpread2({
+				data,
+				series: visibleSeries,
+				from: resolved === null || resolved === void 0 ? void 0 : resolved.from,
+				to: resolved === null || resolved === void 0 ? void 0 : resolved.to,
+				granularity,
+				timeZone,
+				locale,
+				height,
+				selectable: true,
+				onRangeSelect: handleRangeSelect,
+				annotations,
+				showLegend: series.length > 1,
+				legendOptions: toggleableLegend ? {
+					onClick: toggleSeries,
+					inactiveKeys: hidden
+				} : void 0,
+				"aria-label": typeof title === "string" ? `${title} time series` : ariaLabel
+			}, chartProps))
+		})]
+	});
+}
+TimeSeriesPanel.displayName = "TimeSeriesPanel";
+//#endregion
+//#region src/shells/log-table.tsx
+const HIDE_BELOW = {
+	always: "",
+	sm: "hidden @[40rem]/log:flex",
+	md: "hidden @[46rem]/log:flex",
+	lg: "hidden @[58rem]/log:flex",
+	xl: "hidden @[70rem]/log:flex"
+};
+const ROW_HEIGHT = {
+	compact: 26,
+	normal: 32,
+	comfortable: 40
+};
+const DENSITY_TEXT = {
+	compact: "text-[11px]",
+	normal: "text-xs",
+	comfortable: "text-sm"
+};
+const defaultLabels$2 = {
+	listLabel: "Log",
+	loadingMore: "Loading earlier entries…",
+	endOfResults: "That is every entry in this range.",
+	filterFor: (value) => `Filter for ${value}`,
+	filterOut: (value) => `Filter out ${value}`,
+	sortAscending: "Sort ascending",
+	sortDescending: "Sort descending"
+};
+/** Rows rendered beyond the viewport on each side, so a fast scroll stays filled. */
+const OVERSCAN = 10;
+/**
+* A stable hue per value. Colour does real work in a log — the eye groups by it
+* long before it reads the text — so the same event name has to land on the
+* same hue on every render and in every session, which rules out an index into
+* a palette.
+*/
+function hueOf(value) {
+	let hash = 0;
+	for (let index = 0; index < value.length; index += 1) hash = hash * 31 + value.charCodeAt(index) | 0;
+	return Math.abs(hash) % 360;
+}
+const EM_DASH = "—";
+/**
+* A column with nothing in it is a fact about the entry, not a value. Dimming
+* every absence the same way lets the eye skip the gaps while scanning, instead
+* of reading a dash as though it were data.
+*/
+const ABSENT = "text-text-tertiary/50";
+function columnStyle(column) {
+	return column.width ? {
+		width: column.width,
+		flex: "0 0 auto"
+	} : {
+		flex: "1 1 0%",
+		minWidth: 0
+	};
+}
+/**
+* LogTable — a windowed table for entries that keep arriving.
+*
+* Written by hand rather than delegated to a data grid for the two things a log
+* needs that a grid does not: rows are inserted at the *top* while the reader
+* is partway down, which needs a scroll correction applied before paint, and
+* "am I at the newest row?" has to be answerable from the scroll container to
+* decide whether to follow the tail or hold position.
+*
+* What it takes from a data grid is the part readers actually reach for:
+* columns are data, so a caller can let people add, drop and reorder them; a
+* cell offers to filter for or against its own value; and density is a setting
+* rather than a constant.
+*
+* @example
+* ```tsx
+* <LogTable
+*   rows={rows}
+*   getRowId={(row) => row.id}
+*   columns={[
+*     { id: "time", header: "Time", width: "9rem", mono: true, value: (r) => r.time },
+*     { id: "name", header: "Event", width: "14rem", field: "name", marker: true, value: (r) => r.name },
+*     { id: "path", header: "Path", field: "path", value: (r) => r.path },
+*   ]}
+*   onCellAction={(action) => setQuery(applyCellAction(query, action))}
+* />
+* ```
+*/
+function LogTableInner({ rows, columns, getRowId, selectedId = null, onSelect, onLoadMore, hasMore = false, loadingMore = false, prepending = false, onFollowChange, isNew, sort = null, onSortChange, onCellAction, density = "normal", showHeader = true, emptyState, labels: customLabels, className }, ref) {
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$2), customLabels);
+	const rowHeight = ROW_HEIGHT[density];
+	const scrollRef = (0, react.useRef)(null);
+	const [scrollTop, setScrollTop] = (0, react.useState)(0);
+	const [viewportHeight, setViewportHeight] = (0, react.useState)(0);
+	const followingRef = (0, react.useRef)(true);
+	const previousTopIdRef = (0, react.useRef)(null);
+	const previousLengthRef = (0, react.useRef)(0);
+	(0, react.useImperativeHandle)(ref, () => ({
+		scrollToTop: () => {
+			const container = scrollRef.current;
+			if (!container) return;
+			container.scrollTop = 0;
+			setScrollTop(0);
+			if (!followingRef.current) {
+				followingRef.current = true;
+				onFollowChange === null || onFollowChange === void 0 || onFollowChange(true);
+			}
+		},
+		revealRow: (id) => {
+			const index = rows.findIndex((row) => getRowId(row) === id);
+			const container = scrollRef.current;
+			if (index === -1 || !container) return;
+			const top = index * rowHeight;
+			const bottom = top + rowHeight;
+			if (top < container.scrollTop) container.scrollTop = top;
+			else if (bottom > container.scrollTop + container.clientHeight) container.scrollTop = bottom - container.clientHeight;
+		}
+	}), [
+		onFollowChange,
+		rows,
+		getRowId,
+		rowHeight
+	]);
+	(0, react.useEffect)(() => {
+		const container = scrollRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(() => setViewportHeight(container.clientHeight));
+		observer.observe(container);
+		setViewportHeight(container.clientHeight);
+		return () => observer.disconnect();
+	}, []);
+	/**
+	* Report whether the list is pinned to the newest row.
+	*
+	* Called from more than the scroll handler on purpose: the list can arrive at
+	* the top without a scroll event — a reset, a jump to newest, a shorter
+	* result set — and a stale "not following" would silently divert every live
+	* row into a held-back pile.
+	*/
+	const syncFollowing = (0, react.useCallback)((container) => {
+		const following = container.scrollTop <= rowHeight;
+		if (following === followingRef.current) return;
+		followingRef.current = following;
+		onFollowChange === null || onFollowChange === void 0 || onFollowChange(following);
+	}, [onFollowChange, rowHeight]);
+	/**
+	* Hold the reader's place when rows arrive above them.
+	*
+	* Runs before paint: by the time the browser draws, the scroll offset has
+	* already absorbed the inserted height, so the content under the cursor never
+	* moves. Skipped while following, where the whole point is to stay at the top.
+	*/
+	(0, react.useLayoutEffect)(() => {
+		const container = scrollRef.current;
+		const previousTopId = previousTopIdRef.current;
+		previousTopIdRef.current = rows.length ? getRowId(rows[0]) : null;
+		const previousLength = previousLengthRef.current;
+		previousLengthRef.current = rows.length;
+		if (!container) return;
+		syncFollowing(container);
+		if (!prepending || followingRef.current || !previousTopId) return;
+		if (rows.length <= previousLength) return;
+		const prepended = rows.findIndex((row) => getRowId(row) === previousTopId);
+		if (prepended <= 0) return;
+		container.scrollTop += prepended * rowHeight;
+		setScrollTop(container.scrollTop);
+	}, [
+		rows,
+		getRowId,
+		prepending,
+		rowHeight,
+		syncFollowing
+	]);
+	/**
+	* Page forward when the rows do not reach the bottom of the viewport.
+	*
+	* Without this the list only advances on a scroll event, so a tall screen —
+	* or a filter matching few rows per page — stops at the first page with no
+	* way to ask for more.
+	*/
+	(0, react.useEffect)(() => {
+		const container = scrollRef.current;
+		if (!container || !hasMore || loadingMore || !onLoadMore) return;
+		if (container.scrollHeight <= container.clientHeight) onLoadMore();
+	}, [
+		hasMore,
+		loadingMore,
+		onLoadMore,
+		rows.length,
+		viewportHeight
+	]);
+	const handleScroll = (0, react.useCallback)((event) => {
+		const container = event.currentTarget;
+		setScrollTop(container.scrollTop);
+		syncFollowing(container);
+		const remaining = container.scrollHeight - container.scrollTop - container.clientHeight;
+		if (hasMore && !loadingMore && remaining < container.clientHeight) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
+	}, [
+		hasMore,
+		loadingMore,
+		onLoadMore,
+		syncFollowing
+	]);
+	const totalHeight = rows.length * rowHeight;
+	const firstVisible = Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN);
+	const visibleCount = Math.ceil((viewportHeight || 480) / rowHeight) + 20;
+	const lastVisible = Math.min(rows.length, firstVisible + visibleCount);
+	const visibleRows = (0, react.useMemo)(() => rows.slice(firstVisible, lastVisible), [
+		rows,
+		firstVisible,
+		lastVisible
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("@container/log flex min-h-0 flex-col", className),
+		"data-opt-id": "NJ4N9",
+		"data-opt-slug": "log-table.LogTable",
+		children: [showHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogTableHeader, {
+			columns,
+			sort,
+			onSortChange,
+			density,
+			labels
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: scrollRef,
+			onScroll: handleScroll,
+			className: "relative min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
+			role: "listbox",
+			"aria-label": labels.listLabel,
+			"aria-activedescendant": selectedId ? `log-row-${selectedId}` : void 0,
+			tabIndex: 0,
+			children: [
+				rows.length === 0 ? emptyState : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: { height: totalHeight },
+					className: "relative",
+					children: visibleRows.map((row, index) => {
+						var _isNew;
+						const id = getRowId(row);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LogTableRow, {
+							id,
+							row,
+							columns,
+							top: (firstVisible + index) * rowHeight,
+							height: rowHeight,
+							density,
+							selected: id === selectedId,
+							isNew: (_isNew = isNew === null || isNew === void 0 ? void 0 : isNew(row)) !== null && _isNew !== void 0 ? _isNew : false,
+							onSelect,
+							onCellAction,
+							labels
+						}, id);
+					})
+				}),
+				loadingMore && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "gap-element text-text-tertiary flex items-center justify-center py-3 text-xs",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Spinner, {
+						size: "sm",
+						"aria-hidden": true
+					}), labels.loadingMore]
+				}),
+				!hasMore && rows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_pagination.cn("text-text-tertiary", "py-3 text-center text-xs"),
+					children: labels.endOfResults
+				})
+			]
+		})]
+	});
+}
+/**
+* LogTable — see {@link LogTableInner}.
+*
+* The cast preserves the row generic through `forwardRef`, which otherwise
+* widens it to its constraint and takes the column callbacks' types with it.
+*/
+const LogTable = (0, react.forwardRef)(LogTableInner);
+function LogTableHeader({ columns, sort, onSortChange, density, labels }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "row",
+		className: require_pagination.cn("border-border-subtle text-text-tertiary flex shrink-0 items-center gap-3 border-b px-3", DENSITY_TEXT[density]),
+		style: { height: ROW_HEIGHT[density] },
+		children: columns.map((column) => {
+			var _column$priority;
+			const active = (sort === null || sort === void 0 ? void 0 : sort.columnId) === column.id;
+			const sortable = column.sortable && onSortChange;
+			const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				column.marker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": true,
+					className: "size-1.5 shrink-0"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: column.header
+				}),
+				active && (sort.direction === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, {
+					className: "size-3 shrink-0",
+					"aria-hidden": true
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+					className: "size-3 shrink-0",
+					"aria-hidden": true
+				}))
+			] });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "columnheader",
+				"aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
+				className: require_pagination.cn("flex items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority = column.priority) !== null && _column$priority !== void 0 ? _column$priority : "always"]),
+				style: columnStyle(column),
+				children: sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "hover:text-text-primary flex cursor-pointer items-center gap-1.5 truncate",
+					title: active && sort.direction === "desc" ? labels.sortAscending : labels.sortDescending,
+					onClick: () => onSortChange({
+						columnId: column.id,
+						direction: active && sort.direction === "desc" ? "asc" : "desc"
+					}),
+					children: content
+				}) : content
+			}, column.id);
+		})
+	});
+}
+function LogTableRowImpl({ id, row, columns, top, height, density, selected, isNew, onSelect, onCellAction, labels }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "option",
+		"aria-selected": selected,
+		tabIndex: -1,
+		id: `log-row-${id}`,
+		"data-log-row-id": id,
+		onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(id),
+		onKeyDown: (event) => {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			onSelect === null || onSelect === void 0 || onSelect(id);
+		},
+		style: {
+			top,
+			height
+		},
+		className: require_pagination.cn("border-border-subtle/60 absolute inset-x-0 flex items-center gap-3 border-b px-3", DENSITY_TEXT[density], onSelect && "cursor-pointer", "transition-colors duration-100", "hover:bg-surface-hover", selected && "bg-accent-subtle hover:bg-accent-subtle", isNew && !selected && "opt-log-row-enter"),
+		children: columns.map((column) => {
+			var _column$priority2;
+			const raw = column.value(row);
+			const text = raw === null || raw === void 0 || raw === "" ? "" : String(raw);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_pagination.cn("group/cell relative flex min-w-0 items-center gap-1.5", column.align === "right" && "justify-end", HIDE_BELOW[(_column$priority2 = column.priority) !== null && _column$priority2 !== void 0 ? _column$priority2 : "always"]),
+				style: columnStyle(column),
+				children: [
+					column.marker && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: "size-1.5 shrink-0 rounded-full",
+						style: { backgroundColor: `hsl(${hueOf(text)} 65% 55%)` }
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_pagination.cn("truncate", column.mono && "font-mono", text ? "text-text-secondary" : ABSENT),
+						title: text || void 0,
+						children: column.render ? column.render(row) : text || EM_DASH
+					}),
+					onCellAction && column.field && text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellActions, {
+						field: column.field,
+						value: text,
+						onAction: onCellAction,
+						labels
+					})
+				]
+			}, column.id);
+		})
+	});
+}
+/**
+* Memoized because a live log re-renders several times a second while almost
+* every visible row is unchanged.
+*/
+const LogTableRow = (0, react.memo)(LogTableRowImpl);
+/**
+* The two questions a reader has about a value they just spotted: show me only
+* these, and get these out of my way.
+*
+* Revealed on hover rather than always drawn — a log is scanned, and a pair of
+* buttons on every cell of every row is a wall of chrome. They stay in the tab
+* order regardless, since hover is not an interaction everyone has.
+*/
+function CellActions({ field, value, onAction, labels }) {
+	const button = "cursor-pointer rounded-sm p-0.5 text-text-tertiary hover:bg-bg-muted hover:text-text-primary";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_pagination.cn("bg-surface/90 ml-auto hidden shrink-0 items-center gap-0.5 rounded pl-1", "group-hover/cell:flex focus-within:flex"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: button,
+			title: labels.filterFor(value),
+			"aria-label": labels.filterFor(value),
+			onClick: (event) => {
+				event.stopPropagation();
+				onAction({
+					field,
+					value,
+					intent: "include"
+				});
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
+				className: "size-3",
+				"aria-hidden": true
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: button,
+			title: labels.filterOut(value),
+			"aria-label": labels.filterOut(value),
+			onClick: (event) => {
+				event.stopPropagation();
+				onAction({
+					field,
+					value,
+					intent: "exclude"
+				});
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, {
+				className: "size-3",
+				"aria-hidden": true
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/lib/query/query-ast.ts
+const EMPTY_QUERY = { clauses: [] };
+/** Whether a query constrains anything at all. */
+function isEmptyQuery(query) {
+	return !query || query.clauses.length === 0;
+}
+function sameClause(a, b) {
+	if (a.type !== b.type) return false;
+	if (a.type === "term" && b.type === "term") return a.value === b.value && a.negated === b.negated;
+	const fieldA = a;
+	const fieldB = b;
+	return fieldA.field === fieldB.field && fieldA.operator === fieldB.operator && fieldA.negated === fieldB.negated && fieldA.values.length === fieldB.values.length && fieldA.values.every((value, index) => value === fieldB.values[index]);
+}
+/** Add a clause unless an identical one is already there. */
+function addClause(query, clause) {
+	if (query.clauses.some((existing) => sameClause(existing, clause))) return query;
+	return { clauses: [...query.clauses, clause] };
+}
+/**
+* Constrain a field to a value — what a cell's "filter for this" action does.
+*
+* Applying the opposite of a constraint already present replaces it rather than
+* adding it: `status:200` then "filter out 200" should read as one changed
+* mind, not as a query that can never match.
+*/
+function withFieldValue(query, field, value, options = {}) {
+	var _options$negated, _options$operator;
+	const negated = (_options$negated = options.negated) !== null && _options$negated !== void 0 ? _options$negated : false;
+	const operator = (_options$operator = options.operator) !== null && _options$operator !== void 0 ? _options$operator : "eq";
+	return { clauses: [...query.clauses.filter((clause) => !(clause.type === "field" && clause.field === field && clause.operator === operator && clause.values.length === 1 && clause.values[0] === value)), {
+		type: "field",
+		field,
+		operator,
+		values: [value],
+		negated
+	}] };
+}
+/** Drop every clause naming `field`. */
+function withoutField(query, field) {
+	return { clauses: query.clauses.filter((clause) => clause.type !== "field" || clause.field !== field) };
+}
+/** Drop the clause at `index`, for a removable chip. */
+function removeClause(query, index) {
+	return { clauses: query.clauses.filter((_, at) => at !== index) };
+}
+/** Every field the query names, in the order they first appear. */
+function queryFields(query) {
+	const seen = [];
+	for (const clause of query.clauses) if (clause.type === "field" && !seen.includes(clause.field)) seen.push(clause.field);
+	return seen;
+}
+/** The values a field is constrained to, if any — for showing a filter as active. */
+function fieldValues(query, field) {
+	return query.clauses.flatMap((clause) => clause.type === "field" && clause.field === field && !clause.negated ? clause.values : []);
+}
+/**
+* Fold a cell action into the query.
+*
+* The pair of buttons on a log cell is the fastest path from "I noticed this
+* value" to a filtered view, and the reason it works is that the result is a
+* query the reader can then see, edit and share — not a hidden filter stack
+* with its own rules.
+*/
+function applyCellAction(query, action) {
+	return withFieldValue(query, action.field, action.value, { negated: action.intent === "exclude" });
+}
+//#endregion
+//#region src/lib/query/query-parse.ts
+const FIELD_NAME = /^[A-Za-z_][A-Za-z0-9_.-]*$/;
+/**
+* Split on whitespace, but keep quoted runs and parenthesised groups whole.
+*
+* An unterminated quote or group swallows the rest of the line rather than
+* erroring: the reader is mid-word, and the alternative is the query flickering
+* between two different meanings as they type the closing character.
+*/
+function tokenize(input) {
+	const tokens = [];
+	let index = 0;
+	while (index < input.length) {
+		while (index < input.length && /\s/.test(input[index])) index += 1;
+		if (index >= input.length) break;
+		const start = index;
+		let text = "";
+		let quoted = false;
+		let atTokenStart = true;
+		let depth = 0;
+		while (index < input.length) {
+			const char = input[index];
+			if (char === "\"") {
+				if (atTokenStart) quoted = true;
+				atTokenStart = false;
+				index += 1;
+				while (index < input.length && input[index] !== "\"") {
+					text += input[index];
+					index += 1;
+				}
+				index += 1;
+				continue;
+			}
+			if (char === "(") depth += 1;
+			if (char === ")") depth = Math.max(0, depth - 1);
+			if (/\s/.test(char) && depth === 0) break;
+			atTokenStart = false;
+			text += char;
+			index += 1;
+		}
+		if (text.length > 0 || quoted) tokens.push({
+			text,
+			at: start,
+			quoted
+		});
+	}
+	return tokens;
+}
+/** `(a or b)` → `["a", "b"]`; anything else is a single value. */
+function readValues(raw) {
+	const trimmed = raw.trim();
+	if (!trimmed.startsWith("(")) return [stripQuotes(trimmed)];
+	return trimmed.replace(/^\(/, "").replace(/\)$/, "").split(/\s+or\s+/i).map((part) => stripQuotes(part.trim())).filter((part) => part.length > 0);
+}
+function stripQuotes(value) {
+	if (value.length >= 2 && value.startsWith("\"") && value.endsWith("\"")) return value.slice(1, -1);
+	return value.replace(/^"/, "");
+}
+const OPERATORS = [
+	{
+		symbol: ">=",
+		operator: "gte"
+	},
+	{
+		symbol: "<=",
+		operator: "lte"
+	},
+	{
+		symbol: ":",
+		operator: "eq"
+	},
+	{
+		symbol: ">",
+		operator: "gt"
+	},
+	{
+		symbol: "<",
+		operator: "lt"
+	}
+];
+/** Where a field operator starts in the token, or `-1`. */
+function findOperator(text) {
+	let best = null;
+	for (const { symbol, operator } of OPERATORS) {
+		const index = text.indexOf(symbol);
+		if (index <= 0) continue;
+		if (!best || index < best.index || index === best.index && symbol.length > best.symbol.length) best = {
+			index,
+			symbol,
+			operator
+		};
+	}
+	return best;
+}
+/** Parse, keeping whatever could not be understood as a plain term. */
+function parseQueryWithDiagnostics(input) {
+	const diagnostics = [];
+	const clauses = [];
+	let trailing = null;
+	for (const token of tokenize(input)) {
+		let text = token.text;
+		let negated = false;
+		if (!token.quoted && text.startsWith("-") && text.length > 1) {
+			negated = true;
+			text = text.slice(1);
+		}
+		const operator = token.quoted ? null : findOperator(text);
+		if (!operator) {
+			if (text.length > 0) clauses.push({
+				type: "term",
+				value: text,
+				negated
+			});
+			continue;
+		}
+		const field = text.slice(0, operator.index);
+		const rawValue = text.slice(operator.index + operator.symbol.length);
+		if (!FIELD_NAME.test(field)) {
+			clauses.push({
+				type: "term",
+				value: text,
+				negated
+			});
+			continue;
+		}
+		if (rawValue === "") {
+			trailing = {
+				field,
+				operator: operator.operator,
+				value: ""
+			};
+			continue;
+		}
+		if (rawValue === "*" && operator.operator === "eq") {
+			clauses.push({
+				type: "field",
+				field,
+				operator: "exists",
+				values: [],
+				negated
+			});
+			continue;
+		}
+		if (operator.operator === "eq" && rawValue.length > 2 && rawValue.startsWith("*") && rawValue.endsWith("*")) {
+			clauses.push({
+				type: "field",
+				field,
+				operator: "contains",
+				values: [stripQuotes(rawValue.slice(1, -1))],
+				negated
+			});
+			continue;
+		}
+		const values = readValues(rawValue);
+		if (values.length === 0) {
+			diagnostics.push({
+				at: token.at,
+				text: token.text,
+				message: "Empty value group"
+			});
+			continue;
+		}
+		if (operator.operator !== "eq" && values.length > 1) diagnostics.push({
+			at: token.at,
+			text: token.text,
+			message: "A comparison takes a single value"
+		});
+		const clause = {
+			type: "field",
+			field,
+			operator: operator.operator,
+			values: operator.operator === "eq" ? values : values.slice(0, 1),
+			negated
+		};
+		clauses.push(clause);
+		if (!rawValue.startsWith("(")) {
+			var _values$;
+			trailing = {
+				field,
+				operator: operator.operator,
+				value: (_values$ = values[0]) !== null && _values$ !== void 0 ? _values$ : ""
+			};
+		}
+	}
+	return {
+		query: { clauses },
+		diagnostics,
+		trailing
+	};
+}
+/** Parse, discarding diagnostics. */
+function parseQuery(input) {
+	return parseQueryWithDiagnostics(input).query;
+}
+//#endregion
+//#region src/lib/query/query-format.ts
+const OPERATOR_SYMBOL = {
+	eq: ":",
+	contains: ":",
+	gt: ">",
+	gte: ">=",
+	lt: "<",
+	lte: "<=",
+	exists: ":"
+};
+/** Quote a value that would otherwise re-parse as something else. */
+function quoteValue(value) {
+	return /[\s"()]/.test(value) || value === "" ? `"${value.replace(/"/g, "")}"` : value;
+}
+/** One clause as text. */
+function formatClause(clause) {
+	var _clause$values$2;
+	const prefix = clause.negated ? "-" : "";
+	if (clause.type === "term") return `${prefix}${quoteValue(clause.value)}`;
+	if (clause.operator === "exists") return `${prefix}${clause.field}:*`;
+	if (clause.operator === "contains") {
+		var _clause$values$;
+		return `${prefix}${clause.field}:*${(_clause$values$ = clause.values[0]) !== null && _clause$values$ !== void 0 ? _clause$values$ : ""}*`;
+	}
+	const symbol = OPERATOR_SYMBOL[clause.operator];
+	if (clause.values.length > 1) return `${prefix}${clause.field}${symbol}(${clause.values.map(quoteValue).join(" or ")})`;
+	return `${prefix}${clause.field}${symbol}${quoteValue((_clause$values$2 = clause.values[0]) !== null && _clause$values$2 !== void 0 ? _clause$values$2 : "")}`;
+}
+/** The whole query as text. */
+function formatQuery(query) {
+	return query.clauses.map(formatClause).join(" ");
+}
+/** A short human label for a clause chip. */
+function describeClause(clause) {
+	if (clause.type === "term") return clause.negated ? `not "${clause.value}"` : `"${clause.value}"`;
+	if (clause.operator === "exists") return clause.negated ? `${clause.field} missing` : `${clause.field} present`;
+	if (clause.operator === "contains") {
+		var _clause$values$3;
+		return `${clause.negated ? "not " : ""}${clause.field} ⊃ ${(_clause$values$3 = clause.values[0]) !== null && _clause$values$3 !== void 0 ? _clause$values$3 : ""}`;
+	}
+	const values = clause.values.join(", ");
+	const symbol = OPERATOR_SYMBOL[clause.operator];
+	return `${clause.negated ? "not " : ""}${clause.field} ${symbol === ":" ? "=" : symbol} ${values}`;
+}
+//#endregion
+//#region src/shells/query-bar.tsx
+const defaultLabels$1 = {
+	placeholder: "Search, or filter with field:value",
+	ariaLabel: "Search query",
+	clear: "Clear query",
+	removeClause: (clause) => `Remove ${clause}`,
+	fieldsHeading: "Fields",
+	valuesHeading: "Values",
+	syntaxHint: null
+};
+const MAX_SUGGESTIONS = 8;
+/**
+* QueryBar — one control for "find this" and "only these".
+*
+* A search box and a row of filter pickers answer halves of the same question
+* and neither can express the other, so people end up using both and holding
+* the combination in their head. Typing the filter is what closes that: the
+* whole question is one string, which means it can be read back, corrected in
+* place, pasted to a colleague, and stored in a URL.
+*
+* The text is the source of truth while the reader is typing; the parsed query
+* is committed on Enter or blur. Anything half-written parses to a plain term
+* rather than an error, so the bar never argues with someone mid-word.
+*
+* @example
+* ```tsx
+* <QueryBar
+*   value={query}
+*   onChange={setQuery}
+*   fields={[{ name: "path", values: ["/checkout", "/cart"] }]}
+*   showClauses
+* />
+* ```
+*/
+function QueryBar({ value, onChange, fields = [], showClauses = false, live = false, disabled = false, className, labels: customLabels }) {
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels$1), customLabels);
+	const inputRef = (0, react.useRef)(null);
+	const [text, setText] = (0, react.useState)(() => formatQuery(value));
+	const [focused, setFocused] = (0, react.useState)(false);
+	const [highlighted, setHighlighted] = (0, react.useState)(0);
+	const committedRef = (0, react.useRef)(formatQuery(value));
+	(0, react.useEffect)(() => {
+		const next = formatQuery(value);
+		if (next === committedRef.current) return;
+		committedRef.current = next;
+		if (!focused) setText(next);
+	}, [value, focused]);
+	const parsed = (0, react.useMemo)(() => parseQueryWithDiagnostics(text), [text]);
+	const commit = (0, react.useCallback)((nextText) => {
+		const nextQuery = parseQueryWithDiagnostics(nextText).query;
+		committedRef.current = formatQuery(nextQuery);
+		onChange(nextQuery);
+	}, [onChange]);
+	const suggestions = useSuggestions(text, parsed.trailing, fields);
+	const applySuggestion = (0, react.useCallback)((suggestion) => {
+		var _inputRef$current;
+		const nextText = suggestion.replace(text);
+		setText(nextText);
+		if (suggestion.kind === "value") commit(nextText);
+		(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+		setHighlighted(0);
+	}, [text, commit]);
+	const handleKeyDown = (event) => {
+		if (suggestions.length > 0 && focused) {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				setHighlighted((current) => (current + 1) % suggestions.length);
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setHighlighted((current) => (current - 1 + suggestions.length) % suggestions.length);
+				return;
+			}
+			if (event.key === "Tab" || event.key === "Enter" && highlighted > 0) {
+				event.preventDefault();
+				applySuggestion(suggestions[highlighted]);
+				return;
+			}
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			commit(text);
+			return;
+		}
+		if (event.key === "Escape") {
+			var _inputRef$current2;
+			setText(committedRef.current);
+			(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+		}
+	};
+	const showSuggestions = focused && suggestions.length > 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("relative flex min-w-0 flex-col gap-1.5", className),
+		"data-opt-id": "JSVZ1",
+		"data-opt-slug": "query-bar.QueryBar",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_pagination.cn("bg-surface flex h-9 items-center gap-2 rounded-md border px-2.5", require_pagination.OPT_BORDER, "focus-within:border-accent transition-colors", disabled && "opacity-60"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
+						className: "text-text-tertiary size-4 shrink-0",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						ref: inputRef,
+						type: "text",
+						role: "combobox",
+						"aria-expanded": showSuggestions,
+						"aria-controls": "query-bar-suggestions",
+						"aria-autocomplete": "list",
+						"aria-label": labels.ariaLabel,
+						placeholder: labels.placeholder,
+						disabled,
+						className: require_pagination.cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent font-mono text-sm outline-none focus-visible:outline-none"),
+						value: text,
+						onChange: (event) => {
+							setText(event.target.value);
+							setHighlighted(0);
+							if (live) commit(event.target.value);
+						},
+						onFocus: () => setFocused(true),
+						onBlur: () => {
+							window.setTimeout(() => setFocused(false), 120);
+							if (!live) commit(text);
+						},
+						onKeyDown: handleKeyDown
+					}),
+					text.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": labels.clear,
+						title: labels.clear,
+						className: require_pagination.cn("text-text-tertiary hover:text-text-primary cursor-pointer rounded-sm p-0.5", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+						onClick: () => {
+							setText("");
+							commit("");
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+							className: "size-3.5",
+							"aria-hidden": true
+						})
+					})
+				]
+			}),
+			showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				id: "query-bar-suggestions",
+				role: "listbox",
+				className: require_pagination.cn("bg-surface-overlay absolute top-10 z-40 max-h-64 w-full overflow-y-auto rounded-md border p-1 shadow-lg", "border border-border"),
+				children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": index === highlighted,
+					className: require_pagination.cn("flex w-full cursor-pointer items-center justify-between gap-3 rounded px-2 py-1 text-left text-sm", index === highlighted ? "bg-bg-subtle" : "hover:bg-bg-subtle"),
+					onMouseEnter: () => setHighlighted(index),
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => applySuggestion(suggestion),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-text-primary truncate font-mono",
+						children: suggestion.label
+					}), suggestion.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-text-tertiary shrink-0 text-xs",
+						children: suggestion.hint
+					})]
+				}) }, `${suggestion.kind}-${suggestion.label}`))
+			}),
+			showClauses && value.clauses.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "flex flex-wrap items-center gap-1.5",
+				children: value.clauses.map((clause, index) => {
+					const label = describeClause(clause);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+						className: require_pagination.cn("bg-bg-subtle text-text-secondary flex items-center gap-1 rounded px-1.5 py-0.5 text-xs", clause.negated && "text-danger-fg"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate",
+							children: label
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": labels.removeClause(label),
+							className: "hover:text-text-primary cursor-pointer",
+							onClick: () => {
+								const next = removeClause(value, index);
+								setText(formatQuery(next));
+								committedRef.current = formatQuery(next);
+								onChange(next);
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+								className: "size-3",
+								"aria-hidden": true
+							})
+						})]
+					}, `${label}-${index}`);
+				})
+			}),
+			parsed.diagnostics.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryDiagnostics, { diagnostics: parsed.diagnostics }),
+			labels.syntaxHint && !showSuggestions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-text-tertiary text-xs",
+				children: labels.syntaxHint
+			})
+		]
+	});
+}
+QueryBar.displayName = "QueryBar";
+function QueryDiagnostics({ diagnostics }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: "text-warning-fg flex flex-col gap-0.5 text-xs",
+		children: diagnostics.map((diagnostic, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+				className: "font-mono",
+				children: diagnostic.text
+			}),
+			" —",
+			" ",
+			diagnostic.message
+		] }, `${diagnostic.at}-${index}`))
+	});
+}
+/**
+* What to offer, based on the token under the cursor.
+*
+* Completing fields is the part that makes the syntax discoverable at all —
+* nobody guesses that `utm_source` is a field they can filter on. Once the
+* field is chosen, its known values are the second half of the same guess.
+*/
+function useSuggestions(text, trailing, fields) {
+	return (0, react.useMemo)(() => {
+		const lastSpace = text.lastIndexOf(" ");
+		const head = lastSpace === -1 ? "" : text.slice(0, lastSpace + 1);
+		const token = text.slice(lastSpace + 1);
+		if (trailing) {
+			var _field$values;
+			const field = fields.find((candidate) => candidate.name === trailing.field);
+			const values = (_field$values = field === null || field === void 0 ? void 0 : field.values) !== null && _field$values !== void 0 ? _field$values : [];
+			const typed = trailing.value.toLowerCase();
+			return values.filter((value) => value.toLowerCase().includes(typed)).slice(0, MAX_SUGGESTIONS).map((value) => ({
+				kind: "value",
+				label: `${trailing.field}:${value}`,
+				replace: () => `${head}${trailing.field}:${/[\s"()]/.test(value) ? `"${value}"` : value} `
+			}));
+		}
+		const bare = token.replace(/^-/, "").toLowerCase();
+		if (bare.length === 0) return [];
+		return fields.filter((field) => field.name.toLowerCase().includes(bare)).slice(0, MAX_SUGGESTIONS).map((field) => ({
+			kind: "field",
+			label: `${field.name}:`,
+			hint: field.hint,
+			replace: () => `${head}${token.startsWith("-") ? "-" : ""}${field.name}:`
+		}));
+	}, [
+		text,
+		trailing,
+		fields
+	]);
+}
+//#endregion
+//#region src/shells/field-sidebar.tsx
+const defaultLabels = {
+	heading: "Fields",
+	searchPlaceholder: "Find a field",
+	searchLabel: "Find a field",
+	empty: "No fields match.",
+	addColumn: (field) => `Show ${field} as a column`,
+	removeColumn: (field) => `Remove the ${field} column`,
+	filterFor: (value) => `Filter for ${value}`,
+	filterOut: (value) => `Filter out ${value}`,
+	topValues: (count) => `Top ${count} values`,
+	noValues: "No values in this range.",
+	loadingValues: "Counting…",
+	otherGroup: "Other"
+};
+/**
+* FieldSidebar — what is in this data, and what does it contain.
+*
+* Without it, a log answers only the questions you already knew to ask: you can
+* filter on `utm_source` if you remember it exists, and you can read a value if
+* you open a row and scroll to it. Listing the fields turns that around — the
+* data tells the reader what is available — and the value counts answer the
+* question that actually follows ("mostly which?") before they have to run a
+* query to find out.
+*
+* Three actions live here because they are the three things people do next:
+* put the field in the table, keep only rows with a value, drop rows with it.
+*
+* @example
+* ```tsx
+* <FieldSidebar
+*   fields={fields}
+*   expandedField={openField}
+*   onExpandedFieldChange={setOpenField}
+*   values={valuesQuery.data}
+*   valuesLoading={valuesQuery.isLoading}
+*   onToggleColumn={(field, next) => setColumns(...)}
+*   onFilter={(field, value, intent) => setQuery(applyCellAction(query, { field, value, intent }))}
+* />
+* ```
+*/
+function FieldSidebar({ fields, expandedField = null, onExpandedFieldChange, values, valuesLoading = false, sampledRows, onToggleColumn, onFilter, header, className, labels: customLabels }) {
+	const labels = require_pagination._objectSpread2(require_pagination._objectSpread2({}, defaultLabels), customLabels);
+	const [search, setSearch] = (0, react.useState)("");
+	const groups = (0, react.useMemo)(() => {
+		const needle = search.trim().toLowerCase();
+		const matching = needle ? fields.filter((field) => field.name.toLowerCase().includes(needle)) : fields;
+		const byGroup = /* @__PURE__ */ new Map();
+		for (const field of matching) {
+			var _field$group;
+			const key = (_field$group = field.group) !== null && _field$group !== void 0 ? _field$group : "";
+			const bucket = byGroup.get(key);
+			if (bucket) bucket.push(field);
+			else byGroup.set(key, [field]);
+		}
+		return [...byGroup.entries()];
+	}, [fields, search]);
+	const total = (0, react.useMemo)(() => (values !== null && values !== void 0 ? values : []).reduce((sum, entry) => sum + entry.count, 0), [values]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+		className: require_pagination.cn("flex min-h-0 flex-col", className),
+		"aria-label": labels.heading,
+		"data-opt-id": "17D4Y",
+		"data-opt-slug": "field-sidebar.FieldSidebar",
+		children: [
+			header,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_pagination.cn("flex items-center gap-2 border-b px-3 py-2", "focus-within:border-accent transition-colors", require_pagination.OPT_BORDER),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
+					className: "text-text-tertiary size-3.5 shrink-0",
+					"aria-hidden": true
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "search",
+					"aria-label": labels.searchLabel,
+					placeholder: labels.searchPlaceholder,
+					className: require_pagination.cn("text-text-primary placeholder:text-text-tertiary min-w-0 flex-1", "bg-transparent text-sm outline-none focus-visible:outline-none"),
+					value: search,
+					onChange: (event) => setSearch(event.target.value)
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-h-0 flex-1 overflow-y-auto",
+				children: groups.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "px-3 py-4 text-xs"),
+					children: labels.empty
+				}) : groups.map(([group, groupFields]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [group && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+					className: require_pagination.cn("text-text-tertiary", "px-3 pt-3 pb-1 text-[11px] font-medium tracking-wide uppercase"),
+					children: group
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: groupFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
+					field,
+					expanded: expandedField === field.name,
+					onToggleExpanded: () => onExpandedFieldChange === null || onExpandedFieldChange === void 0 ? void 0 : onExpandedFieldChange(expandedField === field.name ? null : field.name),
+					onToggleColumn,
+					labels,
+					children: expandedField === field.name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldValues, {
+						values,
+						loading: valuesLoading,
+						total,
+						sampledRows,
+						onFilter: onFilter ? (value, intent) => onFilter(field.name, value, intent) : void 0,
+						labels
+					})
+				}, field.name)) })] }, group || "__ungrouped__"))
+			})
+		]
+	});
+}
+FieldSidebar.displayName = "FieldSidebar";
+function FieldRow({ field, expanded, onToggleExpanded, onToggleColumn, labels, children }) {
+	var _field$columnable, _field$inTable;
+	const columnable = (_field$columnable = field.columnable) !== null && _field$columnable !== void 0 ? _field$columnable : true;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "hover:bg-bg-subtle group/field flex items-center gap-1.5 px-3 py-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left",
+			"aria-expanded": expanded,
+			onClick: onToggleExpanded,
+			children: [field.type && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_pagination.cn("text-text-tertiary", "w-8 shrink-0 truncate font-mono text-[10px] uppercase"),
+				children: field.type
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-text-primary truncate font-mono text-xs",
+				children: field.name
+			})]
+		}), onToggleColumn && columnable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: require_pagination.cn("cursor-pointer rounded-sm p-0.5", field.inTable ? "text-accent" : "text-text-tertiary hover:text-text-primary opacity-0 group-hover/field:opacity-100 focus-visible:opacity-100"),
+			"aria-label": field.inTable ? labels.removeColumn(field.name) : labels.addColumn(field.name),
+			title: field.inTable ? labels.removeColumn(field.name) : labels.addColumn(field.name),
+			"aria-pressed": (_field$inTable = field.inTable) !== null && _field$inTable !== void 0 ? _field$inTable : false,
+			onClick: () => onToggleColumn(field.name, !field.inTable),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Columns3, {
+				className: "size-3.5",
+				"aria-hidden": true
+			})
+		})]
+	}), children] });
+}
+/**
+* The distribution, as bars.
+*
+* A count alone ("342") means nothing without the denominator, and a reader
+* scanning for "what is this field mostly" reads the bar before the number.
+* The sample size is stated rather than implied — these are the top values in
+* the rows that were counted, not in all of history, and a chart that hides
+* that invites the wrong conclusion.
+*/
+function FieldValues({ values, loading, total, sampledRows, onFilter, labels }) {
+	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+		className: require_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "flex items-center gap-2 px-3 pb-2 text-xs"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Spinner, {
+			size: "sm",
+			"aria-hidden": true
+		}), labels.loadingValues]
+	});
+	if (!values || values.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: require_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "px-3 pb-2 text-xs"),
+		children: labels.noValues
+	});
+	const denominator = sampledRows !== null && sampledRows !== void 0 ? sampledRows : total;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-1 px-3 pt-1 pb-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+			className: require_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "text-[11px]"),
+			children: [labels.topValues(values.length), sampledRows ? ` · ${sampledRows.toLocaleString()}` : ""]
+		}), values.map((entry) => {
+			var _entry$share;
+			const share = (_entry$share = entry.share) !== null && _entry$share !== void 0 ? _entry$share : denominator > 0 ? entry.count / denominator : 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "group/value flex flex-col gap-0.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-text-secondary min-w-0 flex-1 truncate font-mono text-[11px]",
+							title: entry.value,
+							children: entry.value || "—"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: require_pagination.cn(require_pagination.OPT_TEXT_TERTIARY, "shrink-0 text-[11px] tabular-nums"),
+							children: [Math.round(share * 100), "%"]
+						}),
+						onFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "hidden shrink-0 items-center gap-0.5 group-hover/value:flex focus-within:flex",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "text-text-tertiary hover:text-text-primary cursor-pointer",
+								"aria-label": labels.filterFor(entry.value),
+								title: labels.filterFor(entry.value),
+								onClick: () => onFilter(entry.value, "include"),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
+									className: "size-3",
+									"aria-hidden": true
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "text-text-tertiary hover:text-text-primary cursor-pointer",
+								"aria-label": labels.filterOut(entry.value),
+								title: labels.filterOut(entry.value),
+								onClick: () => onFilter(entry.value, "exclude"),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, {
+									className: "size-3",
+									"aria-hidden": true
+								})
+							})]
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-bg-muted h-1 w-full overflow-hidden rounded-full",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "bg-accent h-full rounded-full",
+						style: { width: `${Math.max(2, Math.round(share * 100))}%` }
+					})
+				})]
+			}, entry.value);
+		})]
+	});
+}
+//#endregion
 Object.defineProperty(exports, "AppMenubar", {
 	enumerable: true,
 	get: function() {
@@ -2483,6 +4313,12 @@ Object.defineProperty(exports, "ContentTabs", {
 		return ContentTabs;
 	}
 });
+Object.defineProperty(exports, "DEFAULT_TIME_PRESETS", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_TIME_PRESETS;
+	}
+});
 Object.defineProperty(exports, "DashboardGrid", {
 	enumerable: true,
 	get: function() {
@@ -2507,6 +4343,12 @@ Object.defineProperty(exports, "DomainTable", {
 		return DomainTable;
 	}
 });
+Object.defineProperty(exports, "EMPTY_QUERY", {
+	enumerable: true,
+	get: function() {
+		return EMPTY_QUERY;
+	}
+});
 Object.defineProperty(exports, "EditorToolbar", {
 	enumerable: true,
 	get: function() {
@@ -2531,12 +4373,24 @@ Object.defineProperty(exports, "FaqAccordion", {
 		return FaqAccordion;
 	}
 });
+Object.defineProperty(exports, "FieldSidebar", {
+	enumerable: true,
+	get: function() {
+		return FieldSidebar;
+	}
+});
 Object.defineProperty(exports, "KeyValueEditor", {
 	enumerable: true,
 	get: function() {
 		return KeyValueEditor;
 	}
 });
+Object.defineProperty(exports, "LogTable", {
+	enumerable: true,
+	get: function() {
+		return LogTable;
+	}
+});
 Object.defineProperty(exports, "NotificationToast", {
 	enumerable: true,
 	get: function() {
@@ -2549,6 +4403,12 @@ Object.defineProperty(exports, "ProjectSwitcher", {
 		return ProjectSwitcher;
 	}
 });
+Object.defineProperty(exports, "QueryBar", {
+	enumerable: true,
+	get: function() {
+		return QueryBar;
+	}
+});
 Object.defineProperty(exports, "SearchCombobox", {
 	enumerable: true,
 	get: function() {
@@ -2573,6 +4433,18 @@ Object.defineProperty(exports, "StatusSelect", {
 		return StatusSelect;
 	}
 });
+Object.defineProperty(exports, "TimeRangeControl", {
+	enumerable: true,
+	get: function() {
+		return TimeRangeControl;
+	}
+});
+Object.defineProperty(exports, "TimeSeriesPanel", {
+	enumerable: true,
+	get: function() {
+		return TimeSeriesPanel;
+	}
+});
 Object.defineProperty(exports, "ToastProvider", {
 	enumerable: true,
 	get: function() {
@@ -2585,15 +4457,105 @@ Object.defineProperty(exports, "WorkflowCanvas", {
 		return WorkflowCanvas;
 	}
 });
+Object.defineProperty(exports, "addClause", {
+	enumerable: true,
+	get: function() {
+		return addClause;
+	}
+});
+Object.defineProperty(exports, "applyCellAction", {
+	enumerable: true,
+	get: function() {
+		return applyCellAction;
+	}
+});
+Object.defineProperty(exports, "describeClause", {
+	enumerable: true,
+	get: function() {
+		return describeClause;
+	}
+});
+Object.defineProperty(exports, "fieldValues", {
+	enumerable: true,
+	get: function() {
+		return fieldValues;
+	}
+});
+Object.defineProperty(exports, "formatClause", {
+	enumerable: true,
+	get: function() {
+		return formatClause;
+	}
+});
+Object.defineProperty(exports, "formatQuery", {
+	enumerable: true,
+	get: function() {
+		return formatQuery;
+	}
+});
+Object.defineProperty(exports, "isEmptyQuery", {
+	enumerable: true,
+	get: function() {
+		return isEmptyQuery;
+	}
+});
+Object.defineProperty(exports, "parseQuery", {
+	enumerable: true,
+	get: function() {
+		return parseQuery;
+	}
+});
+Object.defineProperty(exports, "parseQueryWithDiagnostics", {
+	enumerable: true,
+	get: function() {
+		return parseQueryWithDiagnostics;
+	}
+});
+Object.defineProperty(exports, "queryFields", {
+	enumerable: true,
+	get: function() {
+		return queryFields;
+	}
+});
+Object.defineProperty(exports, "quoteValue", {
+	enumerable: true,
+	get: function() {
+		return quoteValue;
+	}
+});
+Object.defineProperty(exports, "removeClause", {
+	enumerable: true,
+	get: function() {
+		return removeClause;
+	}
+});
 Object.defineProperty(exports, "toast", {
 	enumerable: true,
 	get: function() {
 		return toast;
 	}
 });
+Object.defineProperty(exports, "useAutoRefresh", {
+	enumerable: true,
+	get: function() {
+		return useAutoRefresh;
+	}
+});
 Object.defineProperty(exports, "useToast", {
 	enumerable: true,
 	get: function() {
 		return useToast;
 	}
 });
+Object.defineProperty(exports, "withFieldValue", {
+	enumerable: true,
+	get: function() {
+		return withFieldValue;
+	}
+});
+Object.defineProperty(exports, "withoutField", {
+	enumerable: true,
+	get: function() {
+		return withoutField;
+	}
+});