@reopt-ai/opt-ui 1.12.5 → 1.13.0

package/dist/{field-sidebar-Ben7MQD4.js → field-sidebar-CRdToHRO.js}

@@ -1,14 +1,182 @@
 "use client";
-import { $n as OPT_TEXT_LABEL, $t as ToolbarButton$1, A as FormRadio$1, An as OPT_BADGE_RED, At as DialogPanel$1, B as FormSubmit$1, Bn as OPT_FOCUS, Bt as TabsRoot$1, Dn as OPT_BADGE_BLUE, E as FormLabel$1, En as OPT_ANIMATE_ENTER_EXIT, F as FormSelect, Fn as OPT_DIVIDER, Ft as SelectRoot$1, Gn as OPT_ITEM_BASE, Gt as CompositeItem, Ht as DisclosureRoot$1, I as FormSelectItem, It as SelectTrigger$1, K as useFormStore, Kn as OPT_SURFACE, Kt as CompositeProvider, L as FormSelectPopover, Ln as OPT_DOT_GREEN, Lt as Tab$1, Mn as OPT_BORDER, Mt as SelectItem$1, Nn as OPT_DISCLOSURE_CONTENT, Nt as SelectLabel$1, On as OPT_BADGE_GREEN, P as FormRoot$1, Pn as OPT_DISCLOSURE_TRIGGER, Pt as SelectPopover$1, Rn as OPT_DOT_RED, Rt as TabList$1, T as FormInput$1, U as FormTextarea, Un as OPT_INPUT, Ut as DisclosureTrigger$1, V as FormSwitch$1, Vn as OPT_FOCUS_VISIBLE, Vt as DisclosureContent$1, Wt as Composite, Xn as OPT_TD, Y as TagInput, Yn as OPT_TABLE_ROW_ACTIVE, Yt as Meter$1, Zn as OPT_TD_MUTED, Zt as Input, an as TooltipProvider$1, ar as _objectWithoutProperties, at as MenuButtonArrow$1, b as FormError$1, bt as ComboboxPopover$1, c as Checkbox, cn as Badge, ct as MenuItemRadio$1, dt as MenuSeparator$1, en as ToolbarContainer$1, er as OPT_TEXT_PRIMARY, et as PopoverContent$1, ft as MenuTrigger$1, h as FormCheckbox$1, hn as Skeleton, ht as ComboboxEmpty, i as FieldToken, in as TooltipAnchor$1, ir as _objectSpread2, j as FormRadioGroup$1, jn as OPT_BADGE_YELLOW, jt as DialogRoot$1, kn as OPT_BADGE_NEUTRAL, kt as DialogHeading$1, ln as EmptyState, lt as MenuPopover$1, m as formatOptTime, mn as StatCard, mt as MenubarRoot$1, n as Highlight, nn as ToolbarSeparator$1, nr as OPT_TEXT_TERTIARY, nt as PopoverTrigger$1, on as Alert, or as Kbd, ot as MenuItem$1, pt as MenubarContainer$1, qn as OPT_SURFACE_POPOVER, qt as CompositeRow, rn as Tooltip$1, rr as OPT_TH, s as Pagination, sn as Spinner, sr as cn, st as MenuItemCheckbox$1, t as TextTruncate, tn as ToolbarRoot$1, tr as OPT_TEXT_SECONDARY, tt as PopoverRoot$1, u as OPT_UI_DEFAULT_LOCALE, un as Button, ut as MenuRoot$1, vt as ComboboxInput$1, wn as OPT_ACTIVE_ITEM, wt as DialogDescription$1, xt as ComboboxRoot$1, yt as ComboboxItem$1, zn as OPT_DOT_YELLOW, zt as TabPanel$1 } from "./text-truncate-Dlm7JwDf.js";
+import { $t as CompositeItem, Bn as OPT_BADGE_NEUTRAL, Bt as SelectItem$1, C as FormCheckbox$1, Ct as ComboboxEmpty, Dt as ComboboxItem$1, En as Skeleton, Et as ComboboxInput$1, Fn as OPT_ACTIVE_ITEM, Ft as DialogFooter, G as FormSelectPopover, Gn as OPT_DISCLOSURE_TRIGGER, Gt as Tab$1, H as FormRoot$1, Hn as OPT_BADGE_YELLOW, Ht as SelectPopover$1, It as DialogHeader, J as FormSubmit$1, Jn as OPT_DOT_GREEN, Jt as TabsRoot$1, Kn as OPT_DIVIDER, Kt as TabList$1, Ln as OPT_ANIMATE_ENTER_EXIT, Lt as DialogHeading$1, Mt as DialogDescription$1, N as FormInput$1, O as FormError$1, Ot as ComboboxPopover$1, P as FormLabel$1, Qn as OPT_FOCUS_VISIBLE, Qt as Composite, R as FormRadio$1, Rn as OPT_BADGE_BLUE, Rt as DialogPanel$1, S as formatOptTime, St as MenubarRoot$1, Tn as StatCard, U as FormSelect, Un as OPT_BORDER, Ut as SelectRoot$1, Vn as OPT_BADGE_RED, Vt as SelectLabel$1, W as FormSelectItem, Wn as OPT_DISCLOSURE_CONTENT, Wt as SelectTrigger$1, Xn as OPT_DOT_YELLOW, Xt as DisclosureRoot$1, Y as FormSwitch$1, Yn as OPT_DOT_RED, Yt as DisclosureContent$1, Z as FormTextarea, Zn as OPT_FOCUS, Zt as DisclosureTrigger$1, _ as DropdownTrigger, _n as Spinner, _r as cn, _t as MenuPopover$1, b as formatOptNumber, bn as EmptyState, bt as MenuTrigger$1, c as ResizableHandle, cr as OPT_TD_MUTED, ct as PopoverContent$1, d as Checkbox, dn as ToolbarRoot$1, dr as OPT_TEXT_SECONDARY, en as CompositeProvider, er as OPT_INPUT, et as useFormStore, fn as ToolbarSeparator$1, fr as OPT_TEXT_TERTIARY, gn as Alert, gr as Kbd, gt as MenuItemRadio$1, h as DropdownMenu, hn as TooltipProvider, hr as _objectWithoutProperties, ht as MenuItemCheckbox$1, i as FieldToken, in as Textarea, ir as OPT_SURFACE_POPOVER, jt as DialogBody, kt as ComboboxRoot$1, l as ResizablePanel, ln as ToolbarButton$1, lr as OPT_TEXT_LABEL, lt as PopoverRoot$1, m as DropdownItem, mn as TooltipAnchor$1, mr as _objectSpread2, mt as MenuItem$1, n as Highlight, nr as OPT_ITEM_BASE, nt as DateRangePicker, o as resolveFieldType, on as Switch, or as OPT_TABLE_ROW_ACTIVE, p as DropdownContent, pn as Tooltip$1, pr as OPT_TH, pt as MenuButtonArrow$1, qt as TabPanel$1, rn as Meter$1, rr as OPT_SURFACE, rt as TagInput, s as Pagination, sn as Input, sr as OPT_TD, t as TextTruncate, tn as CompositeRow, tt as DEFAULT_PRESETS, u as ResizablePanelGroup, un as ToolbarContainer$1, ur as OPT_TEXT_PRIMARY, ut as PopoverTrigger$1, v as OPT_UI_DEFAULT_LOCALE, vn as Badge, vt as MenuRoot$1, xn as Button, xt as MenubarContainer$1, y as formatOptDateTime, yn as DescriptionList, yt as MenuSeparator$1, z as FormRadioGroup$1, zn as OPT_BADGE_GREEN, zt as DialogRoot$1 } from "./text-truncate-Bd-0WkSP.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Fragment as Fragment$1, createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandRoot, CommandSeparator } from "@reopt-ai/opt-ui-primitives";
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Columns3, Minus, Plus, RefreshCw, Search, SearchIcon, Undo2, X, ZoomIn, ZoomOut } from "lucide-react";
-import { TimeSeriesChart, formatCountUnit, formatDuration, formatInstant, isDateOnly, isExactMinutes, isRelativeToNow, measureTimeWindow, parseRelativeParts, parseTimeExpression, resolveTimeRange, shiftTimeRange, toAbsoluteRange, zoomTimeRange } from "@reopt-ai/opt-charts";
+import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandRoot, CommandSeparator, Radio, RadioGroupRoot } from "@reopt-ai/opt-ui-primitives";
+import { ArrowDown, ArrowUp, ArrowUpDown, Braces, ChartLine, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleAlert, CircleCheck, Clock, Columns2, Columns3, Expand, Eye, Filter, Info, Minus, PanelLeftClose, PanelLeftOpen, Play, Plus, RefreshCw, Save, Search, SearchIcon, Square, Table2, TextCursorInput, Trash2, TriangleAlert, Undo2, X, ZoomIn, ZoomOut } from "lucide-react";
+import { generatePalette } from "@reopt-ai/opt-palette";
+import { AreaChart, BarChart, LineChart, PieChart, TimeSeriesChart, formatCountUnit, formatDuration, formatInstant, isDateOnly, isExactMinutes, isRelativeToNow, measureTimeWindow, parseRelativeParts, parseTimeExpression, resolveTimeRange, shiftTimeRange, toAbsoluteRange, zoomTimeRange } from "@reopt-ai/opt-charts";
 import { matchSorter } from "match-sorter";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+//#region src/core/callout.tsx
+const _excluded$1 = [
+	"tone",
+	"title",
+	"icon",
+	"action",
+	"size",
+	"className",
+	"children"
+];
+const toneStyles = {
+	info: "border-info/40 bg-info-subtle",
+	success: "border-success/40 bg-success-subtle",
+	warning: "border-warning/40 bg-warning-subtle",
+	danger: "border-danger/40 bg-danger-subtle",
+	neutral: "border-border bg-bg-subtle"
+};
+const iconTone = {
+	info: "text-info-fg",
+	success: "text-success-fg",
+	warning: "text-warning-fg",
+	danger: "text-danger-fg",
+	neutral: "text-text-tertiary"
+};
+const titleTone = {
+	info: "text-info-fg",
+	success: "text-success-fg",
+	warning: "text-warning-fg",
+	danger: "text-danger-fg",
+	neutral: "text-text-primary"
+};
+const defaultIcons = {
+	info: Info,
+	success: CircleCheck,
+	warning: TriangleAlert,
+	danger: CircleAlert,
+	neutral: null
+};
+const sizeStyles$1 = {
+	sm: "gap-2 p-2.5 text-xs [&_svg]:size-3.5",
+	md: "gap-3 p-3 text-sm [&_svg]:size-4"
+};
+/**
+* Callout — a notice that belongs to the page, not to the moment.
+*
+* `Alert` reports something that just happened and can be dismissed once read.
+* A callout is the opposite: it is part of the layout, it is true for as long
+* as the condition holds, and dismissing it would only hide a fact that is
+* still true. "12 new events to triage" above a list, or "these numbers come
+* from a 10,000-row sample" above a chart — both are read many times and
+* dismissed never.
+*
+* That is why there is no `onDismiss` here, and why `action` takes one control:
+* a notice earns its space by naming the single thing to do about it.
+*
+* @example
+* ```tsx
+* <Callout tone="info" title="정리할 신규 이벤트 12개"
+*   action={<Button size="sm" onClick={showNew}>보기</Button>}>
+*   7일 안에 처음 관측된 이벤트입니다.
+* </Callout>
+* ```
+*/
+function Callout(_ref) {
+	let { tone = "info", title, icon, action, size = "md", className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
+	const DefaultIcon = defaultIcons[tone];
+	const glyph = icon === void 0 ? DefaultIcon ? /* @__PURE__ */ jsx(DefaultIcon, { "aria-hidden": "true" }) : null : icon;
+	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({
+		role: "status",
+		className: cn("flex items-start rounded-lg border", toneStyles[tone], sizeStyles$1[size], className)
+	}, props), {}, {
+		"data-opt-id": "AT7TX",
+		"data-opt-slug": "callout.Callout",
+		"data-tone": tone,
+		children: [
+			glyph && /* @__PURE__ */ jsx("span", {
+				className: cn("mt-0.5 shrink-0", iconTone[tone]),
+				children: glyph
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [title && /* @__PURE__ */ jsx("p", {
+					className: cn("font-medium", titleTone[tone]),
+					children: title
+				}), children && /* @__PURE__ */ jsx("div", {
+					className: cn("text-text-secondary", title && "mt-1"),
+					children
+				})]
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 self-center",
+				children: action
+			})
+		]
+	}));
+}
+//#endregion
+//#region src/core/segmented-control.tsx
+const sizeStyles = {
+	sm: "h-7 text-[11px] [&_svg]:size-3",
+	md: "h-8 text-xs [&_svg]:size-3.5"
+};
+const segmentPadding = {
+	sm: "gap-1 px-2",
+	md: "gap-1.5 px-2.5"
+};
+/**
+* SegmentedControl — one of a few views, all of them visible.
+*
+* A `Select` hides the alternatives behind a click; a `ToggleGroup` presses
+* buttons that may be on together. Neither is what "이벤트 | 속성" is: exactly
+* one is true, the set is small enough to show, and the reader is choosing a
+* view rather than filtering anything.
+*
+* Built on the radio-group primitive rather than on buttons, so the arrow keys,
+* the group name and the checked state come from the platform. A control that
+* merely looks like a radiogroup is one a keyboard cannot drive.
+*
+* @example
+* ```tsx
+* <SegmentedControl
+*   aria-label="카탈로그 탭"
+*   options={[
+*     { value: "events", label: "이벤트", badge: 128 },
+*     { value: "properties", label: "속성", badge: 341 },
+*   ]}
+*   value={tab}
+*   onChange={setTab}
+* />
+* ```
+*/
+function SegmentedControl({ options, value, onChange, size = "md", fullWidth = false, disabled = false, "aria-label": ariaLabel, className }) {
+	const name = useId();
+	return /* @__PURE__ */ jsx(RadioGroupRoot, {
+		value,
+		onValueChange: (next) => onChange(next),
+		disabled,
+		orientation: "horizontal",
+		name,
+		"aria-label": ariaLabel,
+		className: cn("inline-flex items-center rounded-lg border border-border bg-bg-subtle p-0.5", fullWidth && "flex w-full", sizeStyles[size], className),
+		"data-opt-id": "YKENE",
+		"data-opt-slug": "segmented-control.SegmentedControl",
+		children: options.map((option) => {
+			const selected = option.value === value;
+			const itemDisabled = disabled || option.disabled;
+			return /* @__PURE__ */ jsxs("label", {
+				className: cn("relative inline-flex h-full cursor-pointer items-center justify-center", "rounded-md font-medium whitespace-nowrap transition-colors", "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-1 has-[:focus-visible]:ring-offset-ring-offset", segmentPadding[size], fullWidth && "flex-1", selected ? "bg-surface text-text-primary shadow-sm" : "text-text-tertiary hover:text-text-secondary", itemDisabled && "pointer-events-none opacity-50"),
+				"data-selected": selected || void 0,
+				children: [
+					/* @__PURE__ */ jsx(Radio, {
+						value: option.value,
+						disabled: itemDisabled,
+						className: "absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0"
+					}),
+					option.icon,
+					/* @__PURE__ */ jsx("span", { children: option.label }),
+					option.badge != null && /* @__PURE__ */ jsx("span", {
+						className: cn("tabular-nums", selected ? "text-text-tertiary" : "text-text-tertiary/70"),
+						children: option.badge
+					})
+				]
+			}, option.value);
+		})
+	});
+}
+//#endregion
 //#region src/core/command.tsx
 const _excluded = ["className"];
 const _excluded2 = [
@@ -253,7 +421,7 @@ function CommandPaletteTrigger({ commands, onSelect, labels }) {
 }
 //#endregion
 //#region src/shells/dashboard-grid.tsx
-const defaultLabels$23 = { ariaLabel: "대시보드 통계" };
+const defaultLabels$34 = { ariaLabel: "대시보드 통계" };
 const MIN_DASHBOARD_COLUMNS = 1;
 const MAX_DASHBOARD_COLUMNS = 12;
 function normalizeDashboardColumns(columns) {
@@ -262,7 +430,7 @@ function normalizeDashboardColumns(columns) {
 }
 /** Renders the dashboard grid component. */
 function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$23), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$34), customLabels);
 	const columnCount = normalizeDashboardColumns(columns);
 	const rowStyle = { "--opt-dashboard-grid-columns": `repeat(${columnCount}, minmax(0, 1fr))` };
 	const rows = [];
@@ -290,13 +458,13 @@ function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/search-combobox.tsx
-const defaultLabels$22 = {
+const defaultLabels$33 = {
 	noResults: "결과가 없습니다.",
 	loading: "Loading…"
 };
 /** Renders the search combobox component. */
 function SearchCombobox({ items, placeholder = "검색...", label = "검색", onSelect, labels: customLabels, async: isAsync = false, onSearch, debounceMs = 300 }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$22), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$33), customLabels);
 	const inputId = useId();
 	const [query, setQuery] = useState("");
 	const [asyncResults, setAsyncResults] = useState([]);
@@ -394,14 +562,14 @@ function SearchCombobox({ items, placeholder = "검색...", label = "검색", on
 }
 //#endregion
 //#region src/shells/status-select.tsx
-const defaultLabels$21 = {
+const defaultLabels$32 = {
 	selectLabel: "상태",
 	emptyMessage: "사용 가능한 상태 옵션이 없습니다."
 };
 /** Renders the status select component. */
 function StatusSelect({ options, value: controlledValue, onChange, label, labels: customLabels }) {
 	var _options$0$value, _options$;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$21), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$32), customLabels);
 	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
 	const [internalValue, setInternalValue] = 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;
@@ -468,7 +636,7 @@ function StatusSelect({ options, value: controlledValue, onChange, label, labels
 }
 //#endregion
 //#region src/shells/app-menubar.tsx
-const defaultLabels$20 = { ariaLabel: "Application menu" };
+const defaultLabels$31 = { ariaLabel: "Application menu" };
 function MenuSection({ menu }) {
 	return /* @__PURE__ */ jsxs(MenuRoot$1, { children: [/* @__PURE__ */ jsxs(MenuTrigger$1, { children: [menu.label, /* @__PURE__ */ jsx(MenuButtonArrow$1, {})] }), /* @__PURE__ */ jsx(MenuPopover$1, { children: menu.items.map((item, i) => {
 		if (item.type === "separator") return /* @__PURE__ */ jsx(MenuSeparator$1, {}, `sep-${i}`);
@@ -512,7 +680,7 @@ function MenuSection({ menu }) {
 }
 /** Renders the app menubar component. */
 function AppMenubar({ menus, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$20), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$31), customLabels);
 	if (menus.length === 0) return null;
 	return /* @__PURE__ */ jsx(MenubarRoot$1, {
 		"data-opt-id": "BGKHW",
@@ -551,10 +719,10 @@ const sectionStyles = {
 	Templates: "text-text-tertiary"
 };
 const defaultSectionStyle = "text-text-secondary";
-const defaultLabels$19 = { ariaLabel: "문서 네비게이션" };
+const defaultLabels$30 = { ariaLabel: "문서 네비게이션" };
 /** Renders the sidebar nav component. */
 function SidebarNav({ items, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$19), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$30), customLabels);
 	const pathname = usePathname();
 	const activeItem = items.find((item) => item.href === pathname);
 	const [activeId, setActiveId] = useState(activeItem ? domId(activeItem.id) : void 0);
@@ -602,9 +770,9 @@ function SidebarNav({ items, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/editor-toolbar.tsx
-const defaultLabels$18 = { ariaLabel: "텍스트 편집기 툴바" };
+const defaultLabels$29 = { ariaLabel: "텍스트 편집기 툴바" };
 function ToolbarButtonWithTooltip({ button, active, onAction }) {
-	return /* @__PURE__ */ jsxs(TooltipProvider$1, { children: [/* @__PURE__ */ jsx(TooltipAnchor$1, { children: /* @__PURE__ */ jsx(ToolbarButton$1, {
+	return /* @__PURE__ */ jsxs(TooltipProvider, { children: [/* @__PURE__ */ jsx(TooltipAnchor$1, { children: /* @__PURE__ */ jsx(ToolbarButton$1, {
 		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"}`,
 		onClick: () => onAction === null || onAction === void 0 ? void 0 : onAction(button.id),
 		children: button.icon
@@ -612,7 +780,7 @@ function ToolbarButtonWithTooltip({ button, active, onAction }) {
 }
 /** Renders the editor toolbar component. */
 function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$18), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$29), customLabels);
 	const groups = [];
 	let current = [];
 	for (const btn of buttons) {
@@ -645,14 +813,14 @@ function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLa
 }
 //#endregion
 //#region src/shells/content-tabs.tsx
-const defaultLabels$17 = {
+const defaultLabels$28 = {
 	ariaLabel: "콘텐츠 탭",
 	emptyMessage: "표시할 탭이 없습니다."
 };
 /** Renders the content tabs component. */
 function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
 	var _tabs$, _tabs$find;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$17), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$28), customLabels);
 	const [selectedTabId, setSelectedTabId] = useState(defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
 	if (tabs.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: "text-text-secondary text-sm",
@@ -684,13 +852,13 @@ function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/faq-accordion.tsx
-const defaultLabels$16 = {
+const defaultLabels$27 = {
 	ariaLabel: "자주 묻는 질문",
 	emptyMessage: "등록된 FAQ가 없습니다."
 };
 /** Renders the faq accordion component. */
 function FaqAccordion({ items, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$16), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$27), customLabels);
 	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: "text-text-secondary text-sm",
 		"data-opt-id": "QRBHV",
@@ -730,14 +898,14 @@ function FaqAccordion({ items, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/settings-form.tsx
-const defaultLabels$15 = {
+const defaultLabels$26 = {
 	formAriaLabel: "설정 폼",
 	submitButton: "저장",
 	successMessage: "설정이 저장되었습니다."
 };
 /** Renders the settings form component. */
 function SettingsForm({ fields, onSubmit, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$15), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$26), customLabels);
 	const [submitted, setSubmitted] = useState(false);
 	const defaultValues = {};
 	for (const field of fields) {
@@ -1063,7 +1231,7 @@ function ProjectSwitcher({ projects, value, onChange, placeholder = "프로젝
 ProjectSwitcher.displayName = "ProjectSwitcher";
 //#endregion
 //#region src/shells/env-panel.tsx
-const defaultLabels$14 = {
+const defaultLabels$25 = {
 	varCount: (count) => `${count}개 변수`,
 	envVarsLabel: (env) => `${env} 환경 변수`,
 	secretBadge: "secret"
@@ -1075,7 +1243,7 @@ const envDot = {
 };
 /** Renders the env panel component. */
 function EnvPanel({ groups, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$14), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$25), customLabels);
 	return /* @__PURE__ */ jsx("div", {
 		className: `rounded-lg ${OPT_BORDER} divide-y ${OPT_DIVIDER} bg-surface`,
 		"data-opt-id": "ZBDWK",
@@ -1148,7 +1316,7 @@ function EnvPanel({ groups, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/branch-select.tsx
-const defaultLabels$13 = {
+const defaultLabels$24 = {
 	selectLabel: "브랜치",
 	emptySelectionLabel: "선택...",
 	emptyMessage: "사용 가능한 브랜치가 없습니다.",
@@ -1157,7 +1325,7 @@ const defaultLabels$13 = {
 /** Renders the branch select component. */
 function BranchSelect({ branches, value: controlledValue, onChange, label, labels: customLabels }) {
 	var _ref, _defaultBranch$name, _branches$, _selected$name;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$13), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$24), customLabels);
 	const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
 	const defaultBranch = branches.find((b) => b.isDefault);
 	const [internalValue, setInternalValue] = 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 : "");
@@ -1266,7 +1434,7 @@ function BranchSelect({ branches, value: controlledValue, onChange, label, label
 BranchSelect.displayName = "BranchSelect";
 //#endregion
 //#region src/shells/domain-table.tsx
-const defaultLabels$12 = {
+const defaultLabels$23 = {
 	domain: "Domain",
 	status: "Status",
 	ssl: "SSL",
@@ -1296,7 +1464,7 @@ const sslLabel = {
 };
 /** Renders the domain table component. */
 function DomainTable({ domains, title = "도메인", labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$12), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$23), customLabels);
 	if (domains.length === 0) return /* @__PURE__ */ jsxs("div", {
 		className: "gap-group flex flex-col",
 		"data-opt-id": "A7SRM",
@@ -1414,14 +1582,14 @@ function DomainTable({ domains, title = "도메인", labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/data-table.tsx
-const defaultLabels$11 = {
+const defaultLabels$22 = {
 	selectAll: "Select all",
 	selectRow: (key) => `Select row ${key}`,
 	resizeColumn: (header) => `Resize ${header}`,
 	expandRow: (key) => `Expand row ${key}`,
 	collapseRow: (key) => `Collapse row ${key}`
 };
-const MIN_COLUMN_WIDTH = 40;
+const MIN_COLUMN_WIDTH$1 = 40;
 const DEFAULT_COLUMN_RESIZE_MAX = 1200;
 const alignmentClass = {
 	left: "text-left",
@@ -1459,10 +1627,10 @@ function clampPercent(ratio) {
 	return Math.min(100, Math.max(0, Math.round(ratio * 100)));
 }
 function getResizeHandleValue(currentWidth, configuredWidth) {
-	if (typeof currentWidth === "number" && Number.isFinite(currentWidth)) return Math.max(MIN_COLUMN_WIDTH, Math.round(currentWidth));
+	if (typeof currentWidth === "number" && Number.isFinite(currentWidth)) return Math.max(MIN_COLUMN_WIDTH$1, Math.round(currentWidth));
 	const pxWidth = configuredWidth === null || configuredWidth === void 0 ? void 0 : configuredWidth.trim().match(/^(\d+(?:\.\d+)?)px$/);
-	if (pxWidth) return Math.max(MIN_COLUMN_WIDTH, Math.round(Number(pxWidth[1])));
-	return MIN_COLUMN_WIDTH;
+	if (pxWidth) return Math.max(MIN_COLUMN_WIDTH$1, Math.round(Number(pxWidth[1])));
+	return MIN_COLUMN_WIDTH$1;
 }
 function DataTableProgressBar({ value, barColor, label }) {
 	const percent = clampPercent(value);
@@ -1482,7 +1650,7 @@ function DataTableProgressBar({ value, barColor, label }) {
 }
 /** Renders the data table component. */
 function DataTable({ data, columns, keyExtractor, title, ariaLabel, onRowClick, emptyMessage = "No data available", activeRowId, sortable = false, selectable = false, selectedKeys, onSelectionChange, expandable = false, renderExpanded, pageSize, stickyHeader = false, resizableColumns = false, onSort: onSortExternal, labels: customLabels, className }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$11), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$22), customLabels);
 	const [sortCol, setSortCol] = useState(null);
 	const [sortDir, setSortDir] = useState(null);
 	const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
@@ -1617,7 +1785,7 @@ function DataTable({ data, columns, keyExtractor, title, ariaLabel, onRowClick,
 											role: "separator",
 											"aria-orientation": "vertical",
 											"aria-label": labels.resizeColumn(col.header),
-											"aria-valuemin": MIN_COLUMN_WIDTH,
+											"aria-valuemin": MIN_COLUMN_WIDTH$1,
 											"aria-valuemax": resizeMax,
 											"aria-valuenow": resizeValue,
 											"aria-valuetext": `${resizeValue} pixels`,
@@ -1628,14 +1796,14 @@ function DataTable({ data, columns, keyExtractor, title, ariaLabel, onRowClick,
 												e.preventDefault();
 												e.stopPropagation();
 												if (e.key === "Home" || e.key === "End") {
-													setColWidths((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [col.id]: e.key === "Home" ? MIN_COLUMN_WIDTH : resizeMax }));
+													setColWidths((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [col.id]: e.key === "Home" ? MIN_COLUMN_WIDTH$1 : resizeMax }));
 													return;
 												}
 												const delta = e.shiftKey ? 40 : 10;
 												const direction = e.key === "ArrowRight" ? 1 : -1;
 												setColWidths((prev) => {
 													const current = getResizeHandleValue(prev[col.id], col.width);
-													return _objectSpread2(_objectSpread2({}, prev), {}, { [col.id]: Math.max(MIN_COLUMN_WIDTH, current + direction * delta) });
+													return _objectSpread2(_objectSpread2({}, prev), {}, { [col.id]: Math.max(MIN_COLUMN_WIDTH$1, current + direction * delta) });
 												});
 											},
 											onMouseDown: (e) => {
@@ -1644,7 +1812,7 @@ function DataTable({ data, columns, keyExtractor, title, ariaLabel, onRowClick,
 												const startX = e.clientX;
 												const startW = e.target.parentElement.offsetWidth;
 												const onMove = (ev) => {
-													const newW = Math.max(MIN_COLUMN_WIDTH, startW + ev.clientX - startX);
+													const newW = Math.max(MIN_COLUMN_WIDTH$1, startW + ev.clientX - startX);
 													setColWidths((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [col.id]: newW }));
 												};
 												const onUp = () => {
@@ -1802,7 +1970,7 @@ const toast = Object.assign((options) => toastStore.add(options), {
 	clear: () => toastStore.clear()
 });
 const ToastContext = createContext(null);
-const defaultLabels$10 = { regionLabel: "Notifications" };
+const defaultLabels$21 = { regionLabel: "Notifications" };
 const positionStyles = {
 	"top-right": "top-4 right-4",
 	"top-left": "top-4 left-4",
@@ -1811,7 +1979,7 @@ const positionStyles = {
 };
 /** Renders the toast provider component. */
 function ToastProvider({ children, position = "top-right", defaultDuration = 5e3, stackLimit = 5, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$10), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$21), customLabels);
 	const allToasts = useSyncExternalStore(toastStore.subscribe, toastStore.getSnapshot, toastStore.getSnapshot);
 	const visibleToasts = allToasts.length > stackLimit ? allToasts.slice(-stackLimit) : allToasts;
 	const addToast = useCallback((t) => toastStore.add(t), []);
@@ -1915,7 +2083,7 @@ function NotificationToast({ toast, onDismiss, defaultDuration = 5e3 }) {
 }
 //#endregion
 //#region src/shells/failure-list.tsx
-const defaultLabels$9 = {
+const defaultLabels$20 = {
 	title: "최근 실패",
 	emptyMessage: "실패 항목이 없습니다",
 	moreItems: "{count}개 더 보기",
@@ -2014,20 +2182,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$9.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$9.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$9.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$9.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$20.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$20.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$20.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$20.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$9.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$9.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$9.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$20.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$20.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$20.severityLabels.warning
 	};
 	const labels = {
-		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$9.title,
-		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$9.emptyMessage,
-		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$9.moreItems
+		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$20.title,
+		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$20.emptyMessage,
+		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$20.moreItems
 	};
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const allItems = maxItems ? failures.slice(0, maxItems) : failures;
@@ -2103,7 +2271,7 @@ function renderGrouped(items, remainingCount, rowProps, labels, onShowMore) {
 }
 //#endregion
 //#region src/shells/key-value-editor.tsx
-const defaultLabels$8 = {
+const defaultLabels$19 = {
 	keyPlaceholder: "키",
 	valuePlaceholder: "값",
 	addButton: "추가",
@@ -2117,7 +2285,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 = _objectSpread2(_objectSpread2({}, defaultLabels$8), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$19), customLabels);
 	const [internalEntries, setInternalEntries] = useState(() => defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
 	const entries = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalEntries;
 	const keyInputRef = useRef(null);
@@ -2413,53 +2581,3759 @@ function WorkflowCanvas({ steps, connections = [], rows = 9, cols = 9, cellSize
 }
 WorkflowCanvas.displayName = "WorkflowCanvas";
 //#endregion
-//#region src/shells/event-timeline.tsx
-const defaultLabels$7 = {
-	emptyTitle: "No events yet",
-	emptyDescription: "Events appear here as soon as they arrive.",
-	expand: "Show properties",
-	collapse: "Hide properties",
-	loadMore: "Load more",
-	gap: (duration) => `+${duration}`,
-	properties: "Event properties",
-	openGroup: (title) => `Open ${title}`
+//#region src/shells/flyout.tsx
+const defaultLabels$18 = { close: "Close panel" };
+const sizeClass = {
+	sm: "sm:w-[22rem]",
+	md: "sm:w-[30rem]",
+	lg: "sm:w-[42rem]"
 };
 /**
-* A line of text and the time it happened have to read as one row. Past about
-* this width the eye stops connecting them, so the rail is capped rather than
-* stretched to whatever the page allows. Override with `className` where a
-* layout genuinely needs the full width.
+* Flyout — a detail panel that does not take the page away.
+*
+* Navigating from a list to a record and back costs the reader their scroll
+* position, their filters and their place in the scan. A flyout keeps the list
+* on screen and shows the record beside it, so comparing three rows is three
+* clicks rather than six navigations.
+*
+* Deliberately **not** a modal: no focus trap, no `aria-modal`, no inert page.
+* The list behind it is still the point, and a reader who tabs out of the panel
+* to change a filter is doing the expected thing. Escape closes; focus returns
+* to whatever opened it.
+*
+* @example
+* ```tsx
+* <Flyout open={Boolean(selected)} onClose={clear} title={selected?.name}>
+*   <DescriptionList items={fields} />
+* </Flyout>
+* ```
 */
-const TIMELINE_WIDTH = "max-w-5xl";
-const toneDot = {
-	default: "bg-text-tertiary",
-	accent: "bg-accent",
-	success: "bg-success",
-	warning: "bg-warning",
-	danger: "bg-danger"
+function Flyout({ open, onClose, title, description, type = "overlay", side = "right", size = "md", actions, footer, scrim = false, closeOnOutsideClick = true, hideCloseButton = false, labels: customLabels, className, children }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$18), customLabels);
+	const panelRef = useRef(null);
+	const openerRef = useRef(null);
+	useEffect(() => {
+		var _panelRef$current;
+		if (!open) return;
+		openerRef.current = document.activeElement;
+		(_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 || _panelRef$current.focus({ preventScroll: true });
+		return () => {
+			var _openerRef$current, _openerRef$current$fo;
+			(_openerRef$current = openerRef.current) === null || _openerRef$current === void 0 || (_openerRef$current$fo = _openerRef$current.focus) === null || _openerRef$current$fo === void 0 || _openerRef$current$fo.call(_openerRef$current, { preventScroll: true });
+		};
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				onClose();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [open, onClose]);
+	useEffect(() => {
+		if (!open || !closeOnOutsideClick || type !== "overlay") return;
+		const handlePointerDown = (event) => {
+			const panel = panelRef.current;
+			if (panel && !panel.contains(event.target)) onClose();
+		};
+		const timer = window.setTimeout(() => {
+			document.addEventListener("pointerdown", handlePointerDown);
+		}, 0);
+		return () => {
+			window.clearTimeout(timer);
+			document.removeEventListener("pointerdown", handlePointerDown);
+		};
+	}, [
+		open,
+		closeOnOutsideClick,
+		type,
+		onClose
+	]);
+	const handleClose = useCallback(() => onClose(), [onClose]);
+	if (!open) return null;
+	const header = (title || actions || !hideCloseButton) && /* @__PURE__ */ jsxs("header", {
+		className: cn("border-border-subtle flex items-start gap-2 border-b px-4 py-3"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 grow flex-col gap-0.5",
+				children: [title && /* @__PURE__ */ jsx("h2", {
+					className: cn("text-text-primary", "truncate text-base font-semibold"),
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: cn("text-text-secondary", "truncate text-xs"),
+					children: description
+				})]
+			}),
+			actions,
+			!hideCloseButton && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: handleClose,
+				"aria-label": labels.close,
+				className: cn("outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", "text-text-tertiary", "hover:text-text-primary shrink-0 rounded p-1 transition-colors"),
+				children: /* @__PURE__ */ jsx(X, {
+					className: "size-4",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+	const panel = /* @__PURE__ */ jsxs("aside", {
+		ref: panelRef,
+		role: "dialog",
+		"aria-modal": false,
+		"aria-label": typeof title === "string" ? title : void 0,
+		tabIndex: -1,
+		className: cn(OPT_FOCUS_VISIBLE, "flex min-h-0 flex-col", type === "overlay" && [
+			"rounded-xl bg-surface-raised shadow-md",
+			"fixed inset-y-0 z-40 w-full",
+			sizeClass[size],
+			side === "right" ? "right-0 border-l" : "left-0 border-r",
+			"border-border"
+		], type === "inline" && ["border border-border", "rounded-xl bg-surface"], className),
+		"data-opt-id": "85XVE",
+		"data-opt-slug": "flyout.Flyout",
+		children: [
+			header,
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-0 grow overflow-y-auto px-4 py-4",
+				children
+			}),
+			footer && /* @__PURE__ */ jsx("footer", {
+				className: "border-border-subtle border-t px-4 py-3",
+				children: footer
+			})
+		]
+	});
+	if (type === "inline") return panel;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [scrim && /* @__PURE__ */ jsx("div", {
+		className: "bg-scrim fixed inset-0 z-30",
+		"aria-hidden": "true"
+	}), panel] });
+}
+Flyout.displayName = "Flyout";
+//#endregion
+//#region src/shells/query-results-table.tsx
+const defaultLabels$17 = {
+	emptyMessage: "No results",
+	loadingMessage: "Running query...",
+	rowsSuffix: "row(s)",
+	rowNumber: "#",
+	sortAscending: (column) => `Sort ${column} ascending`,
+	sortDescending: (column) => `Sort ${column} descending`,
+	clearSort: (column) => `Clear sort on ${column}`,
+	resizeColumn: (column) => `Resize ${column}`,
+	openRow: (index) => `Open row ${index}`,
+	rowDetailsTitle: (index) => `Row ${index}`,
+	nullValue: "NULL",
+	trueValue: "true",
+	falseValue: "false"
 };
-function toMillis(timestamp) {
-	const parsed = Date.parse(timestamp);
-	return Number.isNaN(parsed) ? 0 : parsed;
+const MIN_COLUMN_WIDTH = 64;
+const DEFAULT_COLUMN_WIDTH = 160;
+const WIDE_COLUMN_WIDTH = 360;
+const OVERSCAN$1 = 8;
+function normalizeColumns(columns) {
+	return columns.map((column) => typeof column === "string" ? { name: column } : column);
 }
-function stringifyValue(value) {
-	if (value === null || value === void 0) return "—";
-	if (typeof value === "string") return value;
-	if (typeof value === "number" || typeof value === "boolean") return String(value);
-	return JSON.stringify(value);
+function isNumericType(type) {
+	const resolved = resolveFieldType(type);
+	return resolved === "number" || resolved === "percent" || resolved === "currency" || resolved === "duration";
 }
-function PropertyTable({ properties, ariaLabel }) {
-	const entries = Object.entries(properties);
-	if (entries.length === 0) return null;
-	return /* @__PURE__ */ jsx("dl", {
-		className: cn(OPT_BORDER, "gap-element bg-bg-subtle mt-2 grid grid-cols-1 rounded-lg p-2.5 sm:grid-cols-2"),
-		"aria-label": ariaLabel,
-		children: entries.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-col",
-			children: [/* @__PURE__ */ jsx("dt", {
-				className: cn(OPT_TEXT_TERTIARY, "truncate text-xs"),
-				children: key
-			}), /* @__PURE__ */ jsx("dd", {
+function compareCells(a, b) {
+	if (a == null && b == null) return 0;
+	if (a == null) return 1;
+	if (b == null) return -1;
+	if (typeof a === "number" && typeof b === "number") return a - b;
+	if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
+	const left = typeof a === "string" ? a : JSON.stringify(a);
+	const right = typeof b === "string" ? b : JSON.stringify(b);
+	const asNumbers = Number(left) - Number(right);
+	if (Number.isFinite(asNumbers) && left.trim() !== "" && right.trim() !== "") return asNumbers;
+	return left.localeCompare(right);
+}
+/** Render a cell value the way a query tool should: nothing is silently blank. */
+function formatQueryCell(value, labels) {
+	if (value === null || value === void 0) return {
+		text: labels.nullValue,
+		isNull: true
+	};
+	if (typeof value === "boolean") return {
+		text: value ? labels.trueValue : labels.falseValue,
+		isNull: false
+	};
+	if (typeof value === "string") return {
+		text: value,
+		isNull: false
+	};
+	if (typeof value === "number" || typeof value === "bigint") return {
+		text: String(value),
+		isNull: false
+	};
+	try {
+		return {
+			text: JSON.stringify(value),
+			isNull: false
+		};
+	} catch (_unused) {
+		return {
+			text: String(value),
+			isNull: false
+		};
+	}
+}
+/**
+* QueryResultsTable — the answer, in the shape the database gave it.
+*
+* A result set is the one table the reader has not seen before, so the
+* header carries the type of each column and the cells never lie by omission:
+* `NULL` is written out, booleans are words, objects are their JSON. Sorting is
+* local because the rows are already here — a second round trip for an ORDER
+* BY the reader could have typed is a poor trade. Rows are windowed, so the
+* 10,000-row cap a backend applies is a scroll, not a stall.
+*
+* @example
+* ```tsx
+* <QueryResultsTable
+*   columns={result.columns}
+*   rows={result.rows}
+*   maxHeight="fill"
+*   footer={<span>{result.elapsed} ms</span>}
+* />
+* ```
+*/
+function QueryResultsTable({ columns: rawColumns, rows, maxHeight = 400, emptyMessage, loading = false, error, sortable = true, sort: controlledSort, onSortChange, rowHeight = 32, rowDetails = true, footer, labels: customLabels, className }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$17), customLabels);
+	const columns = useMemo(() => normalizeColumns(rawColumns), [rawColumns]);
+	const fill = maxHeight === "fill";
+	const [localSort, setLocalSort] = useState(null);
+	const sort = controlledSort === void 0 ? localSort : controlledSort;
+	const setSort = useCallback((next) => {
+		if (controlledSort === void 0) setLocalSort(next);
+		onSortChange === null || onSortChange === void 0 || onSortChange(next);
+	}, [controlledSort, onSortChange]);
+	useEffect(() => {
+		if (sort && !columns.some((column) => column.name === sort.column)) setSort(null);
+	}, [
+		columns,
+		sort,
+		setSort
+	]);
+	const sortedRows = useMemo(() => {
+		if (!sort) return rows;
+		const factor = sort.direction === "asc" ? 1 : -1;
+		return rows.map((row, index) => ({
+			row,
+			index
+		})).sort((a, b) => compareCells(a.row[sort.column], b.row[sort.column]) * factor || a.index - b.index).map((entry) => entry.row);
+	}, [rows, sort]);
+	const [widths, setWidths] = useState({});
+	useEffect(() => {
+		setWidths({});
+	}, [columns]);
+	const defaultWidths = useMemo(() => {
+		const out = {};
+		const sample = rows.slice(0, 200);
+		const cellLabels = {
+			nullValue: labels.nullValue,
+			trueValue: labels.trueValue,
+			falseValue: labels.falseValue
+		};
+		for (const column of columns) {
+			let longest = column.name.length;
+			for (const row of sample) {
+				const { text } = formatQueryCell(row[column.name], cellLabels);
+				if (text.length > longest) longest = text.length;
+				if (longest > 100) break;
+			}
+			out[column.name] = longest > 100 ? WIDE_COLUMN_WIDTH : Math.min(WIDE_COLUMN_WIDTH, Math.max(DEFAULT_COLUMN_WIDTH * .6, longest * 8 + 32));
+		}
+		return out;
+	}, [
+		columns,
+		rows,
+		labels.nullValue,
+		labels.trueValue,
+		labels.falseValue
+	]);
+	const resizeRef = useRef(null);
+	const startResize = (event, column) => {
+		var _ref, _widths$column, _target$setPointerCap;
+		event.preventDefault();
+		event.stopPropagation();
+		const startWidth = (_ref = (_widths$column = widths[column]) !== null && _widths$column !== void 0 ? _widths$column : defaultWidths[column]) !== null && _ref !== void 0 ? _ref : DEFAULT_COLUMN_WIDTH;
+		resizeRef.current = {
+			column,
+			startX: event.clientX,
+			startWidth
+		};
+		const target = event.currentTarget;
+		(_target$setPointerCap = target.setPointerCapture) === null || _target$setPointerCap === void 0 || _target$setPointerCap.call(target, event.pointerId);
+		const move = (moveEvent) => {
+			const current = resizeRef.current;
+			if (!current) return;
+			const next = Math.max(MIN_COLUMN_WIDTH, current.startWidth + (moveEvent.clientX - current.startX));
+			setWidths((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [current.column]: next }));
+		};
+		const stop = () => {
+			resizeRef.current = null;
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", stop);
+		};
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", stop);
+	};
+	const scrollRef = useRef(null);
+	const [viewport, setViewport] = useState({
+		top: 0,
+		height: 0
+	});
+	const onScroll = useCallback(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		setViewport({
+			top: el.scrollTop,
+			height: el.clientHeight
+		});
+	}, []);
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		setViewport({
+			top: el.scrollTop,
+			height: el.clientHeight
+		});
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			setViewport({
+				top: el.scrollTop,
+				height: el.clientHeight
+			});
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [
+		loading,
+		error,
+		rows.length
+	]);
+	const total = sortedRows.length;
+	const visibleCount = viewport.height > 0 ? Math.ceil(viewport.height / rowHeight) : 40;
+	const start = Math.max(0, Math.floor(viewport.top / rowHeight) - OVERSCAN$1);
+	const end = Math.min(total, start + visibleCount + 16);
+	const topPad = start * rowHeight;
+	const bottomPad = Math.max(0, (total - end) * rowHeight);
+	const [selectedRow, setSelectedRow] = useState(null);
+	useEffect(() => {
+		setSelectedRow(null);
+	}, [rows]);
+	const cycleSort = (column) => {
+		if (!sortable) return;
+		if (!sort || sort.column !== column) setSort({
+			column,
+			direction: "asc"
+		});
+		else if (sort.direction === "asc") setSort({
+			column,
+			direction: "desc"
+		});
+		else setSort(null);
+	};
+	const sortLabel = (column) => {
+		if (!sort || sort.column !== column) return labels.sortAscending(column);
+		if (sort.direction === "asc") return labels.sortDescending(column);
+		return labels.clearSort(column);
+	};
+	const frame = cn("border-border flex flex-col overflow-hidden rounded-lg border", fill && "h-full min-h-0", className);
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: cn("border-danger bg-danger-subtle rounded-lg border p-4", fill && "h-full min-h-0 overflow-auto", className),
+		role: "alert",
+		"aria-live": "assertive",
+		"data-opt-id": "PNC1V",
+		"data-opt-slug": "query-results-table.QueryResultsTable",
+		children: /* @__PURE__ */ jsx("pre", {
+			className: "text-danger-fg font-mono text-sm whitespace-pre-wrap",
+			children: error
+		})
+	});
+	if (loading) return /* @__PURE__ */ jsxs("div", {
+		className: cn("border-border flex flex-col items-center justify-center rounded-lg border p-8 text-center", fill && "h-full min-h-0", className),
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": "true",
+		"data-opt-id": "PNC1V",
+		"data-opt-slug": "query-results-table.QueryResultsTable",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "border-border border-t-accent inline-block h-5 w-5 animate-spin rounded-full border-2",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-text-tertiary mt-2 text-sm",
+			children: labels.loadingMessage
+		})]
+	});
+	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: cn("border-border flex flex-col items-center justify-center rounded-lg border p-8 text-center", fill && "h-full min-h-0", className),
+		"data-opt-id": "PNC1V",
+		"data-opt-slug": "query-results-table.QueryResultsTable",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-text-tertiary text-sm",
+			children: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : labels.emptyMessage
+		})
+	});
+	const selected = selectedRow == null ? null : sortedRows[selectedRow];
+	return /* @__PURE__ */ jsxs("div", {
+		className: frame,
+		"data-opt-id": "PNC1V",
+		"data-opt-slug": "query-results-table.QueryResultsTable",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollRef,
+				onScroll,
+				className: cn("overflow-auto", fill && "min-h-0 flex-1"),
+				style: fill ? void 0 : { maxHeight },
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "w-max min-w-full table-fixed border-separate border-spacing-0 text-sm",
+					"aria-rowcount": total,
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: "bg-surface-inset sticky top-0 z-10",
+						children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							className: cn("text-text-tertiary w-12 px-3 py-2 text-left text-xs font-medium", "border-border-subtle border-b"),
+							children: labels.rowNumber
+						}), columns.map((column) => {
+							var _ref2, _widths$column$name, _column$type, _column$type2;
+							const width = (_ref2 = (_widths$column$name = widths[column.name]) !== null && _widths$column$name !== void 0 ? _widths$column$name : defaultWidths[column.name]) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_COLUMN_WIDTH;
+							const active = (sort === null || sort === void 0 ? void 0 : sort.column) === column.name;
+							const ariaSort = !active ? "none" : (sort === null || sort === void 0 ? void 0 : sort.direction) === "asc" ? "ascending" : "descending";
+							const numeric = isNumericType(column.type);
+							return /* @__PURE__ */ jsxs("th", {
+								scope: "col",
+								"aria-sort": sortable ? ariaSort : void 0,
+								style: {
+									width,
+									minWidth: width,
+									maxWidth: width
+								},
+								className: cn("group/th relative px-0 py-0 text-left text-xs font-medium", "border-border-subtle border-b"),
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: cn("flex items-center gap-1.5 px-3 py-2", numeric && "flex-row-reverse text-right"),
+									children: [column.type ? /* @__PURE__ */ jsx(FieldToken, {
+										type: resolveFieldType(column.type),
+										size: "xs",
+										title: column.type
+									}) : null, sortable ? /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										className: cn("text-text-tertiary hover:text-text-primary flex min-w-0 flex-1 cursor-pointer items-center gap-1 truncate font-mono", numeric && "flex-row-reverse", active && "text-text-primary"),
+										"aria-label": sortLabel(column.name),
+										title: (_column$type = column.type) !== null && _column$type !== void 0 ? _column$type : column.name,
+										onClick: () => cycleSort(column.name),
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "truncate",
+											children: column.name
+										}), active ? (sort === null || sort === void 0 ? void 0 : sort.direction) === "asc" ? /* @__PURE__ */ jsx(ArrowUp, {
+											className: "size-3 shrink-0",
+											"aria-hidden": true
+										}) : /* @__PURE__ */ jsx(ArrowDown, {
+											className: "size-3 shrink-0",
+											"aria-hidden": true
+										}) : /* @__PURE__ */ jsx(ArrowUpDown, {
+											className: "size-3 shrink-0 opacity-0 group-hover/th:opacity-60",
+											"aria-hidden": true
+										})]
+									}) : /* @__PURE__ */ jsx("span", {
+										className: "text-text-tertiary min-w-0 flex-1 truncate font-mono",
+										title: (_column$type2 = column.type) !== null && _column$type2 !== void 0 ? _column$type2 : column.name,
+										children: column.name
+									})]
+								}), /* @__PURE__ */ jsx("div", {
+									role: "separator",
+									"aria-orientation": "vertical",
+									"aria-label": labels.resizeColumn(column.name),
+									onPointerDown: (event) => startResize(event, column.name),
+									className: cn("absolute top-0 right-0 h-full w-1.5 cursor-col-resize select-none", "hover:bg-accent/60 active:bg-accent")
+								})]
+							}, column.name);
+						})] })
+					}), /* @__PURE__ */ jsxs("tbody", { children: [
+						topPad > 0 && /* @__PURE__ */ jsx("tr", {
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("td", {
+								colSpan: columns.length + 1,
+								style: { height: topPad }
+							})
+						}),
+						sortedRows.slice(start, end).map((row, offset) => {
+							const index = start + offset;
+							const isSelected = selectedRow === index;
+							return /* @__PURE__ */ jsxs("tr", {
+								"aria-rowindex": index + 1,
+								"aria-selected": rowDetails ? isSelected : void 0,
+								style: { height: rowHeight },
+								className: cn("group/row border-border-subtle hover:bg-bg-subtle", isSelected && "bg-accent-subtle"),
+								children: [/* @__PURE__ */ jsx("td", {
+									className: cn(OPT_TEXT_TERTIARY, "border-border-subtle relative border-b px-3 font-mono text-xs tabular-nums"),
+									children: rowDetails ? /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										className: cn("flex w-full cursor-pointer items-center gap-1 text-left", "text-text-tertiary hover:text-text-primary"),
+										"aria-label": labels.openRow(index + 1),
+										onClick: () => setSelectedRow(index),
+										children: [/* @__PURE__ */ jsx("span", { children: index + 1 }), /* @__PURE__ */ jsx(Expand, {
+											className: "size-3 opacity-0 group-hover/row:opacity-100",
+											"aria-hidden": true
+										})]
+									}) : index + 1
+								}), columns.map((column) => {
+									const { text, isNull } = formatQueryCell(row[column.name], labels);
+									const numeric = isNumericType(column.type);
+									return /* @__PURE__ */ jsx("td", {
+										title: text,
+										className: cn("border-border-subtle border-b px-3 font-mono text-xs whitespace-nowrap", "max-w-0 truncate", isNull ? "text-text-tertiary italic" : "text-text-primary", numeric && "text-right tabular-nums"),
+										children: text
+									}, column.name);
+								})]
+							}, index);
+						}),
+						bottomPad > 0 && /* @__PURE__ */ jsx("tr", {
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("td", {
+								colSpan: columns.length + 1,
+								style: { height: bottomPad }
+							})
+						})
+					] })]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("border-border-subtle bg-surface-inset flex flex-none items-center justify-between gap-3 border-t px-3 py-1.5"),
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "text-text-tertiary text-xs tabular-nums",
+					children: [
+						rows.length.toLocaleString(),
+						" ",
+						labels.rowsSuffix
+					]
+				}), footer ? /* @__PURE__ */ jsx("span", {
+					className: "text-text-tertiary flex items-center gap-3 text-xs",
+					children: footer
+				}) : null]
+			}),
+			rowDetails && /* @__PURE__ */ jsx(Flyout, {
+				open: selected != null,
+				onClose: () => setSelectedRow(null),
+				title: labels.rowDetailsTitle((selectedRow !== null && selectedRow !== void 0 ? selectedRow : 0) + 1),
+				size: "md",
+				children: selected ? /* @__PURE__ */ jsx(DescriptionList, {
+					layout: "stack",
+					compressed: true,
+					items: columns.map((column) => {
+						const { text } = formatQueryCell(selected[column.name], labels);
+						return {
+							id: column.name,
+							term: /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-1.5 font-mono",
+								children: [column.type ? /* @__PURE__ */ jsx(FieldToken, {
+									type: resolveFieldType(column.type),
+									size: "xs",
+									title: column.type
+								}) : null, column.name]
+							}),
+							description: /* @__PURE__ */ jsx("span", {
+								className: "font-mono text-xs break-all",
+								children: text
+							}),
+							copyValue: text,
+							wrap: true
+						};
+					})
+				}) : null
+			})
+		]
+	});
+}
+QueryResultsTable.displayName = "QueryResultsTable";
+//#endregion
+//#region src/shells/schema-tree.tsx
+const defaultLabels$16 = {
+	heading: "Schema",
+	searchPlaceholder: "Find a table or column",
+	searchLabel: "Find a table or column",
+	empty: "Nothing matches.",
+	loading: "Loading schema…",
+	insert: (name) => `Insert ${name} at cursor`,
+	preview: (table) => `Preview ${table}`,
+	toggle: (table) => `Toggle ${table}`,
+	columnCount: (count) => `${count} columns`
+};
+/**
+* SchemaTree — what can be queried, and what it is called.
+*
+* A SQL editor without a schema beside it is an exam: the reader must already
+* know that the column is `created_at` and not `timestamp`. The tree answers
+* that at a glance, and its two actions are the two things people do with the
+* answer — put the name in the query, or look at the rows to see what the
+* name means.
+*
+* Search matches tables *and* columns, because "where is `utm_source`" is
+* asked more often than "what is in `sessions`".
+*
+* @example
+* ```tsx
+* <SchemaTree
+*   tables={schema.tables}
+*   onInsert={(name) => editor.current?.insertText(name)}
+*   onPreview={(table) => run(`SELECT * FROM ${table} LIMIT 100`)}
+* />
+* ```
+*/
+function SchemaTree({ tables, loading = false, defaultExpanded, onInsert, onPreview, header, className, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$16), customLabels);
+	const [search, setSearch] = useState("");
+	const [expanded, setExpanded] = useState(() => new Set(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : tables.slice(0, 1).map((t) => t.name)));
+	const needle = search.trim().toLowerCase();
+	const visible = useMemo(() => {
+		if (!needle) return tables;
+		return tables.flatMap((table) => {
+			const tableMatches = table.name.toLowerCase().includes(needle);
+			const columns = table.columns.filter((column) => column.name.toLowerCase().includes(needle));
+			if (tableMatches) return [table];
+			if (columns.length > 0) return [_objectSpread2(_objectSpread2({}, table), {}, { columns })];
+			return [];
+		});
+	}, [tables, needle]);
+	const isOpen = (table) => needle ? true : expanded.has(table);
+	const toggle = (table) => {
+		setExpanded((prev) => {
+			const next = new Set(prev);
+			if (next.has(table)) next.delete(table);
+			else next.add(table);
+			return next;
+		});
+	};
+	return /* @__PURE__ */ jsxs("aside", {
+		className: cn("flex min-h-0 flex-col", className),
+		"aria-label": labels.heading,
+		"data-opt-id": "WXX9P",
+		"data-opt-slug": "schema-tree.SchemaTree",
+		children: [
+			header,
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-2 border-b px-3 py-2", "focus-within:border-accent transition-colors", OPT_BORDER),
+				children: [/* @__PURE__ */ jsx(Search, {
+					className: "text-text-tertiary size-3.5 shrink-0",
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx("input", {
+					type: "search",
+					"aria-label": labels.searchLabel,
+					placeholder: labels.searchPlaceholder,
+					className: 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__ */ jsx("div", {
+				className: "min-h-0 flex-1 overflow-y-auto py-1",
+				children: loading ? /* @__PURE__ */ jsxs("p", {
+					className: cn(OPT_TEXT_TERTIARY, "flex items-center gap-2 px-3 py-4 text-xs"),
+					children: [/* @__PURE__ */ jsx(Spinner, {
+						size: "sm",
+						"aria-hidden": true
+					}), labels.loading]
+				}) : visible.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: cn(OPT_TEXT_TERTIARY, "px-3 py-4 text-xs"),
+					children: labels.empty
+				}) : /* @__PURE__ */ jsx("ul", {
+					role: "tree",
+					"aria-label": labels.heading,
+					children: visible.map((table) => {
+						var _table$description;
+						const open = isOpen(table.name);
+						return /* @__PURE__ */ jsxs("li", {
+							role: "treeitem",
+							"aria-expanded": open,
+							"aria-label": table.name,
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "hover:bg-bg-subtle group/table flex items-center gap-1 px-2 py-1",
+								children: [/* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 text-left",
+									"aria-label": labels.toggle(table.name),
+									"aria-expanded": open,
+									onClick: () => toggle(table.name),
+									title: (_table$description = table.description) !== null && _table$description !== void 0 ? _table$description : table.name,
+									children: [
+										/* @__PURE__ */ jsx(ChevronRight, {
+											className: cn("text-text-tertiary size-3.5 shrink-0 transition-transform", open && "rotate-90"),
+											"aria-hidden": true
+										}),
+										/* @__PURE__ */ jsx(Table2, {
+											className: "text-text-tertiary size-3.5 shrink-0",
+											"aria-hidden": true
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "text-text-primary truncate font-mono text-xs font-medium",
+											children: /* @__PURE__ */ jsx(Highlight, {
+												text: table.name,
+												search: needle
+											})
+										}),
+										table.kind ? /* @__PURE__ */ jsx("span", {
+											className: cn(OPT_TEXT_TERTIARY, "shrink-0 text-[10px] uppercase"),
+											children: table.kind
+										}) : null,
+										/* @__PURE__ */ jsx("span", {
+											className: cn(OPT_TEXT_TERTIARY, "ml-auto shrink-0 text-[10px] tabular-nums"),
+											children: table.columns.length
+										})
+									]
+								}), /* @__PURE__ */ jsxs("span", {
+									className: cn("flex shrink-0 items-center gap-0.5", "opacity-0 transition-opacity", "group-hover/table:opacity-100 focus-within:opacity-100"),
+									children: [onInsert && /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: "text-text-tertiary hover:text-text-primary cursor-pointer rounded-sm p-0.5",
+										"aria-label": labels.insert(table.name),
+										title: labels.insert(table.name),
+										onClick: () => onInsert(table.name, "table", table.name),
+										children: /* @__PURE__ */ jsx(TextCursorInput, {
+											className: "size-3.5",
+											"aria-hidden": true
+										})
+									}), onPreview && /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: "text-text-tertiary hover:text-text-primary cursor-pointer rounded-sm p-0.5",
+										"aria-label": labels.preview(table.name),
+										title: labels.preview(table.name),
+										onClick: () => onPreview(table.name),
+										children: /* @__PURE__ */ jsx(Eye, {
+											className: "size-3.5",
+											"aria-hidden": true
+										})
+									})]
+								})]
+							}), open && /* @__PURE__ */ jsx("ul", {
+								role: "group",
+								className: "pb-1",
+								children: table.columns.map((column) => {
+									var _column$type, _ref, _column$description;
+									return /* @__PURE__ */ jsxs("li", {
+										role: "treeitem",
+										"aria-label": column.name,
+										className: "hover:bg-bg-subtle group/column flex items-center gap-1.5 py-0.5 pr-2 pl-9",
+										children: [
+											/* @__PURE__ */ jsx(FieldToken, {
+												type: resolveFieldType(column.type),
+												size: "xs",
+												title: (_column$type = column.type) !== null && _column$type !== void 0 ? _column$type : column.name
+											}),
+											/* @__PURE__ */ jsx("span", {
+												className: "text-text-secondary min-w-0 flex-1 truncate font-mono text-xs",
+												title: (_ref = (_column$description = column.description) !== null && _column$description !== void 0 ? _column$description : column.type) !== null && _ref !== void 0 ? _ref : column.name,
+												children: /* @__PURE__ */ jsx(Highlight, {
+													text: column.name,
+													search: needle
+												})
+											}),
+											column.type ? /* @__PURE__ */ jsx("span", {
+												className: cn("text-text-tertiary", "hidden shrink-0 font-mono text-[10px] group-hover/column:inline"),
+												children: column.type
+											}) : null,
+											onInsert && /* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: cn("text-text-tertiary hover:text-text-primary cursor-pointer rounded-sm p-0.5", "opacity-0 group-hover/column:opacity-100 focus-visible:opacity-100"),
+												"aria-label": labels.insert(column.name),
+												title: labels.insert(column.name),
+												onClick: () => onInsert(column.name, "column", table.name),
+												children: /* @__PURE__ */ jsx(TextCursorInput, {
+													className: "size-3.5",
+													"aria-hidden": true
+												})
+											})
+										]
+									}, column.name);
+								})
+							})]
+						}, table.name);
+					})
+				})
+			})
+		]
+	});
+}
+SchemaTree.displayName = "SchemaTree";
+//#endregion
+//#region src/shells/query-toolbar.tsx
+const defaultLabels$15 = {
+	run: "Run",
+	cancel: "Cancel",
+	runStatement: "Run statement at cursor",
+	runSelection: "Run selection",
+	runAll: "Run everything",
+	runMenu: "More ways to run",
+	save: "Save",
+	changedHint: "Changes since the last run",
+	currentHint: "This is what last ran",
+	runningHint: "Running…"
+};
+/**
+* QueryToolbar — one button that always means "give me the answer".
+*
+* The run button carries state so the reader does not have to remember it:
+* a changed query shows as the accent colour, an unchanged one as neutral, and
+* a running one becomes Cancel. The alternatives (run selection, run the
+* statement at the cursor, run all) sit behind a split so the primary action
+* stays a single unambiguous target, which is what a keyboard shortcut is
+* bound to.
+*
+* @example
+* ```tsx
+* <QueryToolbar
+*   onRun={runAtCursor}
+*   onCancel={cancel}
+*   running={isRunning}
+*   runState={sql === lastRun ? "current" : "changed"}
+*   onSave={openSaveDialog}
+* >
+*   <QueryFiltersMenu … />
+* </QueryToolbar>
+* ```
+*/
+function QueryToolbar({ onRun, onCancel, running = false, runState = "idle", runDisabledReason, onRunSelection, hasSelection = false, onRunAll, multiStatement = false, onSave, saveDisabled = false, children, trailing, modifierKey, className, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$15), customLabels);
+	const showCancel = running && Boolean(onCancel);
+	const disabled = Boolean(runDisabledReason) || running && !onCancel;
+	const hint = running ? labels.runningHint : runState === "changed" ? labels.changedHint : runState === "current" ? labels.currentHint : void 0;
+	const modifier = modifierKey !== null && modifierKey !== void 0 ? modifierKey : typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl";
+	const showRunMenu = Boolean(onRunSelection || onRunAll && multiStatement);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "toolbar",
+		"aria-label": labels.run,
+		className: cn("bg-surface border-border flex min-h-11 flex-wrap items-center gap-2 border-b px-2 py-1.5", className),
+		"data-opt-id": "9VWEE",
+		"data-opt-slug": "query-toolbar.QueryToolbar",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsxs(Button, {
+					variant: showCancel ? "secondary" : "primary",
+					size: "sm",
+					onClick: showCancel ? onCancel : onRun,
+					disabled,
+					title: runDisabledReason !== null && runDisabledReason !== void 0 ? runDisabledReason : hint,
+					"aria-label": showCancel ? labels.cancel : labels.run,
+					className: cn(showRunMenu && "rounded-r-none", !showCancel && runState === "current" && "bg-bg-muted text-text-primary hover:bg-bg-subtle"),
+					"data-run-state": running ? "running" : runState,
+					children: [
+						showCancel ? /* @__PURE__ */ jsx(Square, {
+							className: "size-3.5",
+							"aria-hidden": true
+						}) : /* @__PURE__ */ jsx(Play, {
+							className: "size-3.5",
+							"aria-hidden": true
+						}),
+						/* @__PURE__ */ jsx("span", { children: showCancel ? labels.cancel : labels.run }),
+						!showCancel && /* @__PURE__ */ jsxs(Kbd, {
+							hint: true,
+							className: "ml-1 hidden sm:inline-flex",
+							children: [modifier, "↵"]
+						})
+					]
+				}), showRunMenu && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownTrigger, {
+					"aria-label": labels.runMenu,
+					disabled: disabled || running,
+					className: cn("bg-accent text-accent-fg hover:bg-accent/90 border-accent-fg/20 inline-flex h-8 cursor-pointer items-center rounded-r-lg border-l px-1.5", "disabled:cursor-not-allowed disabled:opacity-50", runState === "current" && "bg-bg-muted text-text-primary"),
+					children: /* @__PURE__ */ jsx(ChevronDown, {
+						className: "size-3.5",
+						"aria-hidden": true
+					})
+				}), /* @__PURE__ */ jsxs(DropdownContent, { children: [
+					/* @__PURE__ */ jsxs(DropdownItem, {
+						onClick: onRun,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "flex-1",
+							children: labels.runStatement
+						}), /* @__PURE__ */ jsxs(Kbd, {
+							hint: true,
+							children: [modifier, "↵"]
+						})]
+					}),
+					onRunSelection && /* @__PURE__ */ jsx(DropdownItem, {
+						onClick: onRunSelection,
+						disabled: !hasSelection,
+						children: labels.runSelection
+					}),
+					onRunAll && multiStatement && /* @__PURE__ */ jsxs(DropdownItem, {
+						onClick: onRunAll,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "flex-1",
+							children: labels.runAll
+						}), /* @__PURE__ */ jsxs(Kbd, {
+							hint: true,
+							children: [modifier, "⇧↵"]
+						})]
+					})
+				] })] })]
+			}),
+			children ? /* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-2",
+				children
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex items-center gap-2",
+				children: [trailing, onSave && /* @__PURE__ */ jsxs(Button, {
+					variant: "secondary",
+					size: "sm",
+					onClick: onSave,
+					disabled: saveDisabled,
+					children: [/* @__PURE__ */ jsx(Save, {
+						className: "size-3.5",
+						"aria-hidden": true
+					}), /* @__PURE__ */ jsx("span", { children: labels.save })]
+				})]
+			})
+		]
+	});
+}
+QueryToolbar.displayName = "QueryToolbar";
+//#endregion
+//#region src/shells/query-output-pane.tsx
+const defaultLabels$14 = {
+	results: "Results",
+	chart: "Chart",
+	split: "Both",
+	viewLabel: "Output view",
+	emptyTitle: "Results will appear here",
+	emptyDescription: "Run the query to see what it returns.",
+	emptyHint: null,
+	loadingTitle: "Running query",
+	loadingDescription: (seconds) => `${seconds}s`,
+	errorTitle: "The query failed",
+	cancelled: "The query was cancelled.",
+	cancel: "Cancel",
+	rows: (count) => `${formatOptNumber(count)} rows`,
+	elapsed: (ms) => ms >= 1e3 ? `${(ms / 1e3).toFixed(2)} s` : `${ms} ms`,
+	bytesRead: (bytes) => `${formatBytes(bytes)} read`,
+	rowsRead: (count) => `${formatOptNumber(count)} rows scanned`,
+	truncated: "Result capped by the backend",
+	dismissError: "Dismiss"
+};
+function formatBytes(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let value = bytes / 1024;
+	let unit = 0;
+	while (value >= 1024 && unit < units.length - 1) {
+		value /= 1024;
+		unit++;
+	}
+	return `${value.toFixed(value >= 100 ? 0 : 1)} ${units[unit]}`;
+}
+/**
+* QueryOutputPane — where the answer lands, and what it cost.
+*
+* The pane owns the run lifecycle's *presentation*: nothing yet, running (with
+* a clock and a way out), failed (with the backend's words, not a paraphrase),
+* and done. Done is a table, a chart, or both side by side — the split is a
+* real resizable pair, because comparing a number to its bar is the point of
+* showing both. The status bar keeps the cost visible: rows, time, bytes
+* scanned, and whether the backend truncated the result, so a reader never
+* mistakes a capped answer for a complete one.
+*
+* @example
+* ```tsx
+* <QueryOutputPane
+*   view={view} onViewChange={setView}
+*   status={status} error={error} stats={stats}
+*   results={<QueryResultsTable … maxHeight="fill" />}
+*   chart={<QueryResultChart … />}
+* />
+* ```
+*/
+function QueryOutputPane({ view, onViewChange, results, chart, status, error, runningSeconds = 0, onCancel, stats, actions, statusExtra, banner, onRetry, className, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$14), customLabels);
+	const hasChart = chart != null;
+	const effectiveView = hasChart ? view : "results";
+	const options = [{
+		value: "results",
+		label: labels.results,
+		icon: /* @__PURE__ */ jsx(Table2, { "aria-hidden": true })
+	}, ...hasChart ? [{
+		value: "chart",
+		label: labels.chart,
+		icon: /* @__PURE__ */ jsx(ChartLine, { "aria-hidden": true })
+	}, {
+		value: "split",
+		label: labels.split,
+		icon: /* @__PURE__ */ jsx(Columns2, { "aria-hidden": true })
+	}] : []];
+	let body;
+	if (status === "idle") {
+		var _labels$emptyHint;
+		body = /* @__PURE__ */ jsx("div", {
+			className: "flex flex-1 items-center justify-center p-6",
+			children: /* @__PURE__ */ jsx(EmptyState, {
+				title: labels.emptyTitle,
+				description: labels.emptyDescription,
+				tone: "subdued",
+				titleSize: "sm",
+				footer: (_labels$emptyHint = labels.emptyHint) !== null && _labels$emptyHint !== void 0 ? _labels$emptyHint : /* @__PURE__ */ jsx("span", {
+					className: "flex items-center gap-1.5",
+					children: /* @__PURE__ */ jsx(Kbd, { children: "⌘↵" })
+				})
+			})
+		});
+	} else if (status === "running") body = /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 flex-col items-center justify-center gap-3 p-6",
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": "true",
+		children: [
+			/* @__PURE__ */ jsx(Spinner, { "aria-hidden": true }),
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-text-secondary text-sm",
+				children: [labels.loadingTitle, /* @__PURE__ */ jsx("span", {
+					className: cn(OPT_TEXT_TERTIARY, "ml-2 tabular-nums"),
+					children: labels.loadingDescription(runningSeconds)
+				})]
+			}),
+			onCancel && /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "sm",
+				onClick: onCancel,
+				children: labels.cancel
+			})
+		]
+	});
+	else if (status === "error") body = /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 flex-col gap-3 overflow-auto p-4",
+		role: "alert",
+		"aria-live": "assertive",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between gap-3",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-danger-fg text-sm font-medium",
+				children: labels.errorTitle
+			}), onRetry && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: onRetry,
+				"aria-label": labels.dismissError,
+				children: /* @__PURE__ */ jsx(X, {
+					className: "size-3.5",
+					"aria-hidden": true
+				})
+			})]
+		}), /* @__PURE__ */ jsx("pre", {
+			className: "bg-danger-subtle text-danger-fg max-h-64 overflow-auto rounded-lg p-3 font-mono text-xs whitespace-pre-wrap",
+			children: error
+		})]
+	});
+	else if (status === "cancelled") body = /* @__PURE__ */ jsx("div", {
+		className: "flex flex-1 items-center justify-center p-6",
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			title: labels.cancelled,
+			tone: "subdued",
+			titleSize: "sm"
+		})
+	});
+	else if (effectiveView === "split") body = /* @__PURE__ */ jsxs(ResizablePanelGroup, {
+		direction: "horizontal",
+		className: "min-h-0 flex-1",
+		children: [
+			/* @__PURE__ */ jsx(ResizablePanel, {
+				defaultSize: 50,
+				minSize: 20,
+				className: "min-h-0 p-2",
+				children: results
+			}),
+			/* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
+			/* @__PURE__ */ jsx(ResizablePanel, {
+				defaultSize: 50,
+				minSize: 20,
+				className: "min-h-0 p-2",
+				children: chart
+			})
+		]
+	});
+	else if (effectiveView === "chart") body = /* @__PURE__ */ jsx("div", {
+		className: "min-h-0 flex-1 overflow-auto p-2",
+		children: chart
+	});
+	else body = /* @__PURE__ */ jsx("div", {
+		className: "min-h-0 flex-1 p-2",
+		children: results
+	});
+	const showStats = status === "success" && stats;
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("bg-surface flex h-full min-h-0 flex-col", className),
+		"aria-label": labels.results,
+		"data-opt-id": "E82K9",
+		"data-opt-slug": "query-output-pane.QueryOutputPane",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "border-border flex min-h-10 flex-none items-center justify-between gap-2 border-b px-2 py-1",
+				children: [options.length > 1 ? /* @__PURE__ */ jsx(SegmentedControl, {
+					"aria-label": labels.viewLabel,
+					options,
+					value: effectiveView,
+					onChange: onViewChange,
+					size: "sm"
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "text-text-secondary px-1 text-xs font-medium",
+					children: labels.results
+				}), actions ? /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1.5",
+					children: actions
+				}) : null]
+			}),
+			banner ? /* @__PURE__ */ jsx("div", {
+				className: "flex-none px-2 pt-2",
+				children: banner
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-h-0 flex-1 flex-col",
+				children: body
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("border-border-subtle bg-surface-inset flex min-h-7 flex-none flex-wrap items-center gap-x-3 gap-y-1 border-t px-3 py-1 text-xs", OPT_TEXT_TERTIARY),
+				children: [showStats ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					stats.rowCount != null && /* @__PURE__ */ jsx("span", {
+						className: "tabular-nums",
+						children: labels.rows(stats.rowCount)
+					}),
+					stats.elapsed != null && /* @__PURE__ */ jsx("span", {
+						className: "tabular-nums",
+						children: labels.elapsed(stats.elapsed)
+					}),
+					stats.rowsRead != null && /* @__PURE__ */ jsx("span", {
+						className: "tabular-nums",
+						children: labels.rowsRead(stats.rowsRead)
+					}),
+					stats.bytesRead != null && /* @__PURE__ */ jsx("span", {
+						className: "tabular-nums",
+						children: labels.bytesRead(stats.bytesRead)
+					}),
+					stats.truncated && /* @__PURE__ */ jsx("span", {
+						className: "text-warning-fg",
+						children: labels.truncated
+					})
+				] }) : null, statusExtra ? /* @__PURE__ */ jsx("span", {
+					className: "ml-auto",
+					children: statusExtra
+				}) : null]
+			})
+		]
+	});
+}
+QueryOutputPane.displayName = "QueryOutputPane";
+//#endregion
+//#region src/shells/query-result-chart.tsx
+const defaultLabels$13 = {
+	typeLabel: "Chart type",
+	line: "Line",
+	bar: "Bar",
+	area: "Area",
+	pie: "Pie",
+	number: "Number",
+	xAxis: "X axis",
+	yAxis: "Values",
+	stacked: "Stack",
+	noNumeric: "Nothing to chart",
+	noNumericDescription: "The result has no numeric column. Aggregate something — a count, a sum — to draw it.",
+	pickSeries: "Choose a value column",
+	pickSeriesDescription: "Pick at least one numeric column to plot.",
+	chartLabel: "Query result chart"
+};
+const NUMERIC_TYPES = /* @__PURE__ */ new Set([
+	"number",
+	"percent",
+	"currency",
+	"duration"
+]);
+function isNumericValue(value) {
+	if (typeof value === "number") return Number.isFinite(value);
+	if (typeof value === "string" && value.trim() !== "") return Number.isFinite(Number(value));
+	return false;
+}
+/**
+* Which columns can be values. The declared type decides when the backend
+* gave one; a sample of the rows decides otherwise, so a `count()` that came
+* back as a string still charts.
+*/
+function numericResultColumns(columns, rows) {
+	const sample = rows.slice(0, 50);
+	return columns.filter((column) => {
+		if (column.type) return NUMERIC_TYPES.has(resolveFieldType(column.type));
+		if (sample.length === 0) return false;
+		let seen = 0;
+		for (const row of sample) {
+			const value = row[column.name];
+			if (value == null) continue;
+			seen++;
+			if (!isNumericValue(value)) return false;
+		}
+		return seen > 0;
+	});
+}
+/** A starting configuration for a fresh result: first non-numeric column as x, the numerics as y. */
+function defaultQueryChartConfig(columns, rows) {
+	const numeric = numericResultColumns(columns, rows);
+	const numericNames = new Set(numeric.map((column) => column.name));
+	const x = columns.find((column) => !numericNames.has(column.name));
+	const y = numeric.slice(0, 3).map((column) => column.name);
+	if (rows.length === 1 && y.length >= 1 && !x) return {
+		type: "number",
+		yColumns: y.slice(0, 1)
+	};
+	const xType = resolveFieldType(x === null || x === void 0 ? void 0 : x.type);
+	return {
+		type: xType === "date" || xType === "datetime" ? "line" : "bar",
+		xColumn: x === null || x === void 0 ? void 0 : x.name,
+		yColumns: y
+	};
+}
+function toNumber(value) {
+	if (typeof value === "number") return value;
+	if (typeof value === "string") return Number(value);
+	return NaN;
+}
+function toLabel(value) {
+	if (value == null) return "—";
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "boolean") return String(value);
+	try {
+		return JSON.stringify(value);
+	} catch (_unused) {
+		return String(value);
+	}
+}
+/**
+* QueryResultChart — the same rows, as a picture.
+*
+* A result set is not a chart until someone says which column is the axis and
+* which are the values. This makes that a two-control decision with sensible
+* defaults: the first text or date column is the axis, the numeric columns are
+* the values, and a single-row single-number answer is just the number, large.
+* The configuration is the caller's, so it can be saved alongside the SQL.
+*
+* @example
+* ```tsx
+* const [config, setConfig] = useState(() => defaultQueryChartConfig(columns, rows));
+* <QueryResultChart columns={columns} rows={rows} config={config} onConfigChange={setConfig} />
+* ```
+*/
+function QueryResultChart({ columns, rows, config, onConfigChange, showControls = true, height, maxPoints = 1e3, className, labels: customLabels }) {
+	var _config$xColumn, _config$xColumn2, _config$yColumns$;
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$13), customLabels);
+	const numeric = useMemo(() => numericResultColumns(columns, rows), [columns, rows]);
+	const numericNames = useMemo(() => new Set(numeric.map((column) => column.name)), [numeric]);
+	useEffect(() => {
+		const yColumns = config.yColumns.filter((name) => numericNames.has(name));
+		const xValid = config.xColumn == null || columns.some((column) => column.name === config.xColumn);
+		if (yColumns.length !== config.yColumns.length || !xValid) onConfigChange(_objectSpread2(_objectSpread2({}, config), {}, {
+			yColumns,
+			xColumn: xValid ? config.xColumn : void 0
+		}));
+	}, [
+		columns,
+		numericNames,
+		config,
+		onConfigChange
+	]);
+	const data = useMemo(() => {
+		const xColumn = config.xColumn;
+		return rows.slice(0, maxPoints).map((row, index) => {
+			const point = { name: xColumn ? toLabel(row[xColumn]) : String(index + 1) };
+			for (const y of config.yColumns) {
+				const value = toNumber(row[y]);
+				point[y] = Number.isFinite(value) ? value : 0;
+			}
+			return point;
+		});
+	}, [
+		rows,
+		config.xColumn,
+		config.yColumns,
+		maxPoints
+	]);
+	const series = useMemo(() => config.yColumns.map((name) => _objectSpread2({
+		dataKey: name,
+		name
+	}, config.stacked && config.type !== "line" ? { stackId: "stack" } : {})), [
+		config.yColumns,
+		config.stacked,
+		config.type
+	]);
+	const typeOptions = [
+		{
+			value: "line",
+			label: labels.line
+		},
+		{
+			value: "bar",
+			label: labels.bar
+		},
+		{
+			value: "area",
+			label: labels.area
+		},
+		{
+			value: "pie",
+			label: labels.pie
+		},
+		{
+			value: "number",
+			label: labels.number
+		}
+	];
+	let chart;
+	const chartHeight = height !== null && height !== void 0 ? height : "100%";
+	if (numeric.length === 0) chart = /* @__PURE__ */ jsx(EmptyState, {
+		title: labels.noNumeric,
+		description: labels.noNumericDescription,
+		tone: "subdued",
+		titleSize: "sm"
+	});
+	else if (config.yColumns.length === 0) chart = /* @__PURE__ */ jsx(EmptyState, {
+		title: labels.pickSeries,
+		description: labels.pickSeriesDescription,
+		tone: "subdued",
+		titleSize: "sm"
+	});
+	else if (config.type === "number") {
+		var _rows$;
+		const first = config.yColumns[0];
+		const value = toNumber((_rows$ = rows[0]) === null || _rows$ === void 0 ? void 0 : _rows$[first]);
+		chart = /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full flex-col items-center justify-center gap-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-text-primary text-4xl font-semibold tabular-nums",
+				children: Number.isFinite(value) ? formatOptNumber(value) : "—"
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn(OPT_TEXT_TERTIARY, "font-mono text-xs"),
+				children: first
+			})]
+		});
+	} else if (config.type === "pie") {
+		const first = config.yColumns[0];
+		chart = /* @__PURE__ */ jsx(PieChart, {
+			data: data.map((point) => {
+				var _point$first;
+				return {
+					name: point.name,
+					value: Number((_point$first = point[first]) !== null && _point$first !== void 0 ? _point$first : 0)
+				};
+			}),
+			height: chartHeight,
+			showLegend: true,
+			"aria-label": labels.chartLabel
+		});
+	} else if (config.type === "bar") chart = /* @__PURE__ */ jsx(BarChart, {
+		data,
+		series,
+		stacked: config.stacked,
+		height: chartHeight,
+		showLegend: series.length > 1,
+		"aria-label": labels.chartLabel
+	});
+	else if (config.type === "area") chart = /* @__PURE__ */ jsx(AreaChart, {
+		data,
+		series,
+		height: chartHeight,
+		showLegend: series.length > 1,
+		"aria-label": labels.chartLabel
+	});
+	else chart = /* @__PURE__ */ jsx(LineChart, {
+		data,
+		series,
+		height: chartHeight,
+		showLegend: series.length > 1,
+		"aria-label": labels.chartLabel
+	});
+	const singleSeries = config.type === "pie" || config.type === "number";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-full min-h-0 flex-col gap-2", className),
+		"data-opt-id": "5DSW7",
+		"data-opt-slug": "query-result-chart.QueryResultChart",
+		children: [showControls && numeric.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-none flex-wrap items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx(SegmentedControl, {
+					"aria-label": labels.typeLabel,
+					options: typeOptions,
+					value: config.type,
+					onChange: (type) => onConfigChange(_objectSpread2(_objectSpread2({}, config), {}, { type })),
+					size: "sm"
+				}),
+				config.type !== "number" && /* @__PURE__ */ jsxs(SelectRoot$1, {
+					value: (_config$xColumn = config.xColumn) !== null && _config$xColumn !== void 0 ? _config$xColumn : "",
+					onValueChange: (value) => onConfigChange(_objectSpread2(_objectSpread2({}, config), {}, { xColumn: typeof value === "string" && value ? value : void 0 })),
+					children: [/* @__PURE__ */ jsxs(SelectTrigger$1, {
+						className: "h-7 text-xs",
+						minWidth: 120,
+						"aria-label": labels.xAxis,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("text-text-tertiary", "mr-1"),
+							children: labels.xAxis
+						}), /* @__PURE__ */ jsx("span", {
+							className: "font-mono",
+							children: (_config$xColumn2 = config.xColumn) !== null && _config$xColumn2 !== void 0 ? _config$xColumn2 : "—"
+						})]
+					}), /* @__PURE__ */ jsx(SelectPopover$1, { children: columns.map((column) => /* @__PURE__ */ jsxs(SelectItem$1, {
+						value: column.name,
+						children: [/* @__PURE__ */ jsx(FieldToken, {
+							type: resolveFieldType(column.type),
+							size: "xs",
+							decorative: true
+						}), /* @__PURE__ */ jsx("span", {
+							className: "font-mono text-xs",
+							children: column.name
+						})]
+					}, column.name)) })]
+				}),
+				/* @__PURE__ */ jsxs(SelectRoot$1, {
+					multiple: !singleSeries,
+					value: singleSeries ? (_config$yColumns$ = config.yColumns[0]) !== null && _config$yColumns$ !== void 0 ? _config$yColumns$ : "" : config.yColumns,
+					onValueChange: (value) => onConfigChange(_objectSpread2(_objectSpread2({}, config), {}, { yColumns: Array.isArray(value) ? value : value ? [value] : [] })),
+					children: [/* @__PURE__ */ jsxs(SelectTrigger$1, {
+						className: "h-7 text-xs",
+						minWidth: 140,
+						"aria-label": labels.yAxis,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("text-text-tertiary", "mr-1"),
+							children: labels.yAxis
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate font-mono",
+							children: config.yColumns.length > 0 ? config.yColumns.join(", ") : "—"
+						})]
+					}), /* @__PURE__ */ jsx(SelectPopover$1, { children: numeric.map((column) => /* @__PURE__ */ jsxs(SelectItem$1, {
+						value: column.name,
+						children: [/* @__PURE__ */ jsx(FieldToken, {
+							type: resolveFieldType(column.type),
+							size: "xs",
+							decorative: true
+						}), /* @__PURE__ */ jsx("span", {
+							className: "font-mono text-xs",
+							children: column.name
+						})]
+					}, column.name)) })]
+				}),
+				(config.type === "bar" || config.type === "area") && config.yColumns.length > 1 && /* @__PURE__ */ jsx(Checkbox, {
+					size: "sm",
+					label: labels.stacked,
+					checked: Boolean(config.stacked),
+					onChange: (stacked) => onConfigChange(_objectSpread2(_objectSpread2({}, config), {}, { stacked }))
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1",
+			children: chart
+		})]
+	});
+}
+QueryResultChart.displayName = "QueryResultChart";
+//#endregion
+//#region src/shells/query-filters-menu.tsx
+const OPERATOR_LABELS = {
+	is: "is",
+	isNot: "is not",
+	contains: "contains",
+	notContains: "does not contain",
+	startsWith: "starts with",
+	endsWith: "ends with",
+	regex: "matches regex",
+	gt: ">",
+	gte: "≥",
+	lt: "<",
+	lte: "≤",
+	isNull: "is null",
+	isNotNull: "is not null"
+};
+const defaultLabels$12 = {
+	trigger: "Filters",
+	title: "Query filters",
+	dateRange: "Time range",
+	dateRangePlaceholder: "Select date range",
+	properties: "Property filters",
+	addProperty: "Add filter",
+	removeProperty: (field) => `Remove filter on ${field}`,
+	field: "Field",
+	operator: "Operator",
+	value: "Value",
+	reset: "Reset",
+	insertPlaceholder: "Insert {filters}",
+	missingPlaceholderTitle: "Filters are set but not applied",
+	missingPlaceholder: "Put {filters} in the WHERE clause of your query so these conditions reach the database.",
+	placeholderHint: "Use {filters} in the WHERE clause to apply these to the query.",
+	valuesLoading: "Loading values…",
+	noValues: "No matching values. Enter is fine too.",
+	operators: OPERATOR_LABELS,
+	activeCount: (count) => `${count} active`
+};
+/** Operators without a value. */
+const VALUELESS_OPERATORS = /* @__PURE__ */ new Set(["isNull", "isNotNull"]);
+const OPERATOR_ORDER = [
+	"is",
+	"isNot",
+	"contains",
+	"notContains",
+	"startsWith",
+	"endsWith",
+	"regex",
+	"gt",
+	"gte",
+	"lt",
+	"lte",
+	"isNull",
+	"isNotNull"
+];
+/** True when any filter would change the query. */
+function hasActiveQueryFilters(filters) {
+	var _filters$dateRange, _filters$dateRange2;
+	return Boolean(((_filters$dateRange = filters.dateRange) === null || _filters$dateRange === void 0 ? void 0 : _filters$dateRange.start) || ((_filters$dateRange2 = filters.dateRange) === null || _filters$dateRange2 === void 0 ? void 0 : _filters$dateRange2.end)) || filters.properties.length > 0;
+}
+/** How many filters are set, for the badge. */
+function countActiveQueryFilters(filters) {
+	var _filters$dateRange3, _filters$dateRange4;
+	return (((_filters$dateRange3 = filters.dateRange) === null || _filters$dateRange3 === void 0 ? void 0 : _filters$dateRange3.start) || ((_filters$dateRange4 = filters.dateRange) === null || _filters$dateRange4 === void 0 ? void 0 : _filters$dateRange4.end) ? 1 : 0) + filters.properties.length;
+}
+/** An empty filter set. */
+const EMPTY_QUERY_FILTERS = {
+	dateRange: null,
+	properties: []
+};
+let filterSeq = 0;
+function nextFilterId() {
+	filterSeq += 1;
+	return `qf-${Date.now().toString(36)}-${filterSeq}`;
+}
+/**
+* QueryFiltersMenu — conditions the reader would rather not type.
+*
+* A time range and a few equality filters are the WHERE clause most queries
+* share, and retyping them for every query is how a dashboard's filters end
+* up disagreeing with its queries. This holds them as data and hands them to
+* the SQL through a `{filters}` placeholder, the way PostHog does — the query
+* says *where* they apply, the menu says *what* they are. When the placeholder
+* is missing the menu says so, loudly, because silently unapplied filters are
+* the worst kind.
+*
+* @example
+* ```tsx
+* <QueryFiltersMenu
+*   value={filters} onChange={setFilters}
+*   fields={schema.columns}
+*   placeholderPresent={sqlUsesPlaceholder(sql, "filters")}
+*   onInsertPlaceholder={() => editor.current?.insertText("{filters}")}
+* />
+* ```
+*/
+function QueryFiltersMenu({ value, onChange, fields, placeholderPresent = false, onInsertPlaceholder, onLoadValues, presets = DEFAULT_PRESETS, disabled = false, className, labels: customLabels }) {
+	var _value$dateRange;
+	const labels = _objectSpread2(_objectSpread2(_objectSpread2({}, defaultLabels$12), customLabels), {}, { operators: _objectSpread2(_objectSpread2({}, OPERATOR_LABELS), customLabels === null || customLabels === void 0 ? void 0 : customLabels.operators) });
+	const [open, setOpen] = useState(false);
+	const headingId = useId();
+	const active = countActiveQueryFilters(value);
+	const [valueCache, setValueCache] = useState({});
+	const fieldsInUse = value.properties.map((filter) => filter.field).join("\0");
+	useEffect(() => {
+		if (!open || !onLoadValues) return;
+		const missing = [...new Set(fieldsInUse.split("\0"))].filter((field) => field && !valueCache[field]);
+		if (missing.length === 0) return;
+		setValueCache((prev) => {
+			const next = _objectSpread2({}, prev);
+			for (const field of missing) next[field] = {
+				loading: true,
+				values: []
+			};
+			return next;
+		});
+		for (const field of missing) onLoadValues(field).then((values) => {
+			setValueCache((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [field]: {
+				loading: false,
+				values
+			} }));
+		}).catch(() => {
+			setValueCache((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [field]: {
+				loading: false,
+				values: []
+			} }));
+		});
+	}, [
+		open,
+		onLoadValues,
+		fieldsInUse,
+		valueCache
+	]);
+	const missing = active > 0 && !placeholderPresent;
+	const updateProperty = (id, patch) => {
+		onChange(_objectSpread2(_objectSpread2({}, value), {}, { properties: value.properties.map((filter) => filter.id === id ? _objectSpread2(_objectSpread2({}, filter), patch) : filter) }));
+	};
+	const addProperty = () => {
+		var _first$name;
+		const first = fields[0];
+		onChange(_objectSpread2(_objectSpread2({}, value), {}, { properties: [...value.properties, {
+			id: nextFilterId(),
+			field: (_first$name = first === null || first === void 0 ? void 0 : first.name) !== null && _first$name !== void 0 ? _first$name : "",
+			operator: "is",
+			value: ""
+		}] }));
+	};
+	const removeProperty = (id) => {
+		onChange(_objectSpread2(_objectSpread2({}, value), {}, { properties: value.properties.filter((filter) => filter.id !== id) }));
+	};
+	return /* @__PURE__ */ jsxs(PopoverRoot$1, {
+		open,
+		onOpenChange: setOpen,
+		placement: "bottom-start",
+		"data-opt-id": "CEHKK",
+		"data-opt-slug": "query-filters-menu.QueryFiltersMenu",
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger$1, {
+			disabled,
+			className: cn("border-border bg-surface text-text-primary hover:bg-bg-subtle h-8 gap-1.5 rounded-lg border px-2.5 text-xs font-medium", missing && "border-warning text-warning-fg", className),
+			"aria-label": labels.trigger,
+			children: [
+				/* @__PURE__ */ jsx(Filter, {
+					className: "size-3.5",
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsx("span", { children: labels.trigger }),
+				active > 0 && /* @__PURE__ */ jsx("span", {
+					className: cn("rounded-full px-1.5 text-[10px] tabular-nums", missing ? "bg-warning-subtle text-warning-fg" : "bg-accent text-accent-fg"),
+					"aria-label": labels.activeCount(active),
+					children: active
+				})
+			]
+		}), /* @__PURE__ */ jsxs(PopoverContent$1, {
+			"aria-labelledby": headingId,
+			className: "flex w-[min(28rem,calc(100vw-2rem))] flex-col gap-4",
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					id: headingId,
+					className: "text-text-primary text-sm font-semibold",
+					children: labels.title
+				}),
+				missing ? /* @__PURE__ */ jsx(Callout, {
+					tone: "warning",
+					size: "sm",
+					title: labels.missingPlaceholderTitle,
+					action: onInsertPlaceholder ? /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "secondary",
+						onClick: () => {
+							onInsertPlaceholder();
+							setOpen(false);
+						},
+						children: labels.insertPlaceholder
+					}) : void 0,
+					children: labels.missingPlaceholder
+				}) : /* @__PURE__ */ jsx("p", {
+					className: cn(OPT_TEXT_TERTIARY, "text-xs"),
+					children: labels.placeholderHint
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-text-secondary text-xs font-medium",
+						children: labels.dateRange
+					}), /* @__PURE__ */ jsx(DateRangePicker, {
+						value: (_value$dateRange = value.dateRange) !== null && _value$dateRange !== void 0 ? _value$dateRange : {
+							start: null,
+							end: null
+						},
+						onChange: (range) => onChange(_objectSpread2(_objectSpread2({}, value), {}, { dateRange: range.start || range.end ? range : null })),
+						presets,
+						placeholder: labels.dateRangePlaceholder
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-text-secondary text-xs font-medium",
+							children: labels.properties
+						}),
+						value.properties.map((filter) => {
+							const valueless = VALUELESS_OPERATORS.has(filter.operator);
+							const field = fields.find((entry) => entry.name === filter.field);
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5",
+								children: [
+									/* @__PURE__ */ jsxs(SelectRoot$1, {
+										value: filter.field,
+										onValueChange: (next) => typeof next === "string" && updateProperty(filter.id, { field: next }),
+										children: [/* @__PURE__ */ jsxs(SelectTrigger$1, {
+											className: "h-8 w-auto shrink-0 text-xs",
+											minWidth: 120,
+											"aria-label": labels.field,
+											children: [(field === null || field === void 0 ? void 0 : field.type) ? /* @__PURE__ */ jsx(FieldToken, {
+												type: resolveFieldType(field.type),
+												size: "xs",
+												decorative: true
+											}) : null, /* @__PURE__ */ jsx("span", {
+												className: "truncate font-mono",
+												children: filter.field || labels.field
+											})]
+										}), /* @__PURE__ */ jsx(SelectPopover$1, { children: fields.map((entry) => /* @__PURE__ */ jsxs(SelectItem$1, {
+											value: entry.name,
+											children: [/* @__PURE__ */ jsx(FieldToken, {
+												type: resolveFieldType(entry.type),
+												size: "xs",
+												decorative: true
+											}), /* @__PURE__ */ jsx("span", {
+												className: "font-mono text-xs",
+												children: entry.name
+											})]
+										}, entry.name)) })]
+									}),
+									/* @__PURE__ */ jsxs(SelectRoot$1, {
+										value: filter.operator,
+										onValueChange: (next) => typeof next === "string" && updateProperty(filter.id, {
+											operator: next,
+											value: VALUELESS_OPERATORS.has(next) ? "" : filter.value
+										}),
+										children: [/* @__PURE__ */ jsx(SelectTrigger$1, {
+											className: "h-8 w-auto shrink-0 text-xs",
+											minWidth: 110,
+											"aria-label": labels.operator,
+											children: labels.operators[filter.operator]
+										}), /* @__PURE__ */ jsx(SelectPopover$1, { children: OPERATOR_ORDER.map((operator) => /* @__PURE__ */ jsx(SelectItem$1, {
+											value: operator,
+											children: labels.operators[operator]
+										}, operator)) })]
+									}),
+									!valueless && onLoadValues ? /* @__PURE__ */ jsx(ValueSuggestInput, {
+										value: filter.value,
+										onChange: (next) => updateProperty(filter.id, { value: next }),
+										entry: valueCache[filter.field],
+										label: labels.value,
+										loadingLabel: labels.valuesLoading,
+										emptyLabel: labels.noValues
+									}) : !valueless ? /* @__PURE__ */ jsx(Input, {
+										size: "sm",
+										"aria-label": labels.value,
+										placeholder: labels.value,
+										value: filter.value,
+										onChange: (event) => updateProperty(filter.id, { value: event.target.value }),
+										className: "min-w-0 flex-1"
+									}) : null,
+									/* @__PURE__ */ jsx(Button, {
+										variant: "ghost",
+										size: "sm",
+										"aria-label": labels.removeProperty(filter.field),
+										onClick: () => removeProperty(filter.id),
+										children: /* @__PURE__ */ jsx(Trash2, {
+											className: "size-3.5",
+											"aria-hidden": true
+										})
+									})
+								]
+							}, filter.id);
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							variant: "secondary",
+							size: "sm",
+							onClick: addProperty,
+							disabled: fields.length === 0,
+							className: "self-start",
+							children: [/* @__PURE__ */ jsx(Plus, {
+								className: "size-3.5",
+								"aria-hidden": true
+							}), labels.addProperty]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						disabled: active === 0,
+						onClick: () => onChange(EMPTY_QUERY_FILTERS),
+						children: labels.reset
+					}), onInsertPlaceholder && !missing && !placeholderPresent && /* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						size: "sm",
+						onClick: () => {
+							onInsertPlaceholder();
+							setOpen(false);
+						},
+						children: labels.insertPlaceholder
+					})]
+				})
+			]
+		})]
+	});
+}
+QueryFiltersMenu.displayName = "QueryFiltersMenu";
+/**
+* A value box with the field's known values underneath. Free text is still
+* accepted: the list is a memory aid, not a constraint, because the query may
+* well be asking about a value that is not in the sample.
+*/
+function ValueSuggestInput({ value, onChange, entry, label, loadingLabel, emptyLabel }) {
+	var _entry$values;
+	const needle = value.trim().toLowerCase();
+	const matches = ((_entry$values = entry === null || entry === void 0 ? void 0 : entry.values) !== null && _entry$values !== void 0 ? _entry$values : []).filter((candidate) => !needle || candidate.toLowerCase().includes(needle)).slice(0, 50);
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative min-w-0 flex-1 basis-32",
+		children: /* @__PURE__ */ jsxs(ComboboxRoot$1, {
+			value,
+			onValueChange: onChange,
+			children: [/* @__PURE__ */ jsx(ComboboxInput$1, {
+				"aria-label": label,
+				placeholder: label,
+				onInput: (event) => onChange(event.currentTarget.value),
+				className: cn("border-border bg-surface text-text-primary placeholder:text-text-tertiary h-8 w-full rounded-lg border px-2.5 font-mono text-xs", "focus-visible:ring-ring focus-visible:ring-offset-ring-offset outline-none focus-visible:ring-2 focus-visible:ring-offset-1")
+			}), /* @__PURE__ */ jsx(ComboboxPopover$1, {
+				className: "max-h-64 overflow-auto",
+				children: (entry === null || entry === void 0 ? void 0 : entry.loading) ? /* @__PURE__ */ jsx("div", {
+					className: cn(OPT_TEXT_TERTIARY, "px-3 py-2 text-xs"),
+					role: "status",
+					"aria-live": "polite",
+					children: loadingLabel
+				}) : matches.length === 0 ? /* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyLabel }) : matches.map((candidate) => /* @__PURE__ */ jsx(ComboboxItem$1, {
+					value: candidate,
+					children: /* @__PURE__ */ jsx("span", {
+						className: "truncate font-mono text-xs",
+						children: candidate
+					})
+				}, candidate))
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/shells/query-variables-menu.tsx
+const defaultLabels$11 = {
+	trigger: "Variables",
+	title: "Query variables",
+	hint: "Reference a variable in the SQL as {variables.name}. The value is substituted before the query runs.",
+	name: "Name",
+	value: "Value",
+	add: "Add variable",
+	remove: (name) => `Remove ${name}`,
+	insert: (name) => `Insert {variables.${name}} at cursor`,
+	empty: "No variables yet.",
+	invalidName: "Letters, digits and underscores only, starting with a letter.",
+	activeCount: (count) => `${count} defined`
+};
+const NAME_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
+/** True when the name can be referenced from SQL. */
+function isValidQueryVariableName(name) {
+	return NAME_PATTERN.test(name);
+}
+let variableSeq = 0;
+function nextVariableId() {
+	variableSeq += 1;
+	return `qv-${Date.now().toString(36)}-${variableSeq}`;
+}
+/**
+* QueryVariablesMenu — the parts of a query that change between runs.
+*
+* A saved query with a literal `'2026-09-01'` in it is a query that lies a
+* week later. Variables move that value out of the text and into a small
+* form, so the same SQL answers the same question for a different week — or
+* a different plan, or a different country — without an edit. The menu owns
+* only the names and values; substitution is the caller's, because how a
+* value is quoted is the dialect's business.
+*
+* @example
+* ```tsx
+* <QueryVariablesMenu
+*   value={variables} onChange={setVariables}
+*   onInsert={(name) => editor.current?.insertText(`{variables.${name}}`)}
+* />
+* ```
+*/
+function QueryVariablesMenu({ value, onChange, onInsert, disabled = false, disabledReason, className, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$11), customLabels);
+	const [open, setOpen] = useState(false);
+	const headingId = useId();
+	const update = (id, patch) => {
+		onChange(value.map((variable) => variable.id === id ? _objectSpread2(_objectSpread2({}, variable), patch) : variable));
+	};
+	const add = () => {
+		let index = value.length + 1;
+		let name = `var${index}`;
+		const taken = new Set(value.map((variable) => variable.name));
+		while (taken.has(name)) {
+			index += 1;
+			name = `var${index}`;
+		}
+		onChange([...value, {
+			id: nextVariableId(),
+			name,
+			value: ""
+		}]);
+	};
+	return /* @__PURE__ */ jsxs(PopoverRoot$1, {
+		open,
+		onOpenChange: setOpen,
+		placement: "bottom-start",
+		"data-opt-id": "9FP6Z",
+		"data-opt-slug": "query-variables-menu.QueryVariablesMenu",
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger$1, {
+			disabled,
+			title: disabled ? disabledReason : void 0,
+			className: cn("border-border bg-surface text-text-primary hover:bg-bg-subtle h-8 gap-1.5 rounded-lg border px-2.5 text-xs font-medium", className),
+			"aria-label": labels.trigger,
+			children: [
+				/* @__PURE__ */ jsx(Braces, {
+					className: "size-3.5",
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsx("span", { children: labels.trigger }),
+				value.length > 0 && /* @__PURE__ */ jsx("span", {
+					className: "bg-accent text-accent-fg rounded-full px-1.5 text-[10px] tabular-nums",
+					"aria-label": labels.activeCount(value.length),
+					children: value.length
+				})
+			]
+		}), /* @__PURE__ */ jsxs(PopoverContent$1, {
+			"aria-labelledby": headingId,
+			className: "flex w-[min(26rem,calc(100vw-2rem))] flex-col gap-3",
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					id: headingId,
+					className: "text-text-primary text-sm font-semibold",
+					children: labels.title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: cn(OPT_TEXT_TERTIARY, "text-xs"),
+					children: labels.hint
+				}),
+				value.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: cn(OPT_TEXT_TERTIARY, "text-xs"),
+					children: labels.empty
+				}) : /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-col gap-2",
+					children: value.map((variable) => {
+						const valid = isValidQueryVariableName(variable.name);
+						return /* @__PURE__ */ jsxs("li", {
+							className: "flex items-start gap-1.5",
+							children: [
+								/* @__PURE__ */ jsx(Input, {
+									size: "sm",
+									"aria-label": labels.name,
+									placeholder: labels.name,
+									value: variable.name,
+									error: valid ? void 0 : labels.invalidName,
+									onChange: (event) => update(variable.id, { name: event.target.value }),
+									className: "w-32 font-mono"
+								}),
+								/* @__PURE__ */ jsx(Input, {
+									size: "sm",
+									"aria-label": labels.value,
+									placeholder: labels.value,
+									value: variable.value,
+									onChange: (event) => update(variable.id, { value: event.target.value }),
+									className: "min-w-0 flex-1 font-mono"
+								}),
+								onInsert && /* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "sm",
+									disabled: !valid,
+									"aria-label": labels.insert(variable.name),
+									title: labels.insert(variable.name),
+									onClick: () => {
+										onInsert(variable.name);
+										setOpen(false);
+									},
+									children: /* @__PURE__ */ jsx(TextCursorInput, {
+										className: "size-3.5",
+										"aria-hidden": true
+									})
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "sm",
+									"aria-label": labels.remove(variable.name),
+									onClick: () => onChange(value.filter((entry) => entry.id !== variable.id)),
+									children: /* @__PURE__ */ jsx(Trash2, {
+										className: "size-3.5",
+										"aria-hidden": true
+									})
+								})
+							]
+						}, variable.id);
+					})
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					variant: "secondary",
+					size: "sm",
+					onClick: add,
+					className: "self-start",
+					children: [/* @__PURE__ */ jsx(Plus, {
+						className: "size-3.5",
+						"aria-hidden": true
+					}), labels.add]
+				})
+			]
+		})]
+	});
+}
+QueryVariablesMenu.displayName = "QueryVariablesMenu";
+//#endregion
+//#region src/shells/query-history-list.tsx
+const defaultLabels$10 = {
+	heading: "History",
+	empty: "Nothing has run yet.",
+	loading: "Loading history…",
+	clear: "Clear history",
+	rerun: (query) => `Run again: ${query}`,
+	load: (query) => `Load into editor: ${query}`,
+	rows: (count) => `${formatOptNumber(count)} rows`,
+	elapsed: (ms) => ms >= 1e3 ? `${(ms / 1e3).toFixed(1)} s` : `${ms} ms`,
+	failed: "Failed",
+	succeeded: "Succeeded",
+	ranAt: (iso) => formatOptDateTime(iso)
+};
+function firstLine(query) {
+	const line = query.split("\n").map((entry) => entry.trim()).find((entry) => entry.length > 0 && !entry.startsWith("--"));
+	return line !== null && line !== void 0 ? line : query.trim();
+}
+/**
+* QueryHistoryList — what was asked, and whether it answered.
+*
+* Half of query writing is recovering the query from twenty minutes ago that
+* almost worked. The list keeps each run with its outcome, so a failed
+* attempt is as easy to get back as a good one, and the cost of a run is
+* visible before it is repeated.
+*
+* @example
+* ```tsx
+* <QueryHistoryList items={history} onLoad={(item) => setSql(item.query)} onRerun={(item) => run(item.query)} />
+* ```
+*/
+function QueryHistoryList({ items, loading = false, onLoad, onRerun, onClear, header, className, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$10), customLabels);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("flex min-h-0 flex-col", className),
+		"aria-label": labels.heading,
+		"data-opt-id": "AGV55",
+		"data-opt-slug": "query-history-list.QueryHistoryList",
+		children: [
+			header,
+			onClear && items.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-none justify-end px-2 pt-1",
+				children: /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: onClear,
+					children: [/* @__PURE__ */ jsx(Trash2, {
+						className: "size-3.5",
+						"aria-hidden": true
+					}), labels.clear]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1 overflow-y-auto",
+				children: loading ? /* @__PURE__ */ jsx("p", {
+					className: cn(OPT_TEXT_TERTIARY, "px-3 py-4 text-xs"),
+					children: labels.loading
+				}) : items.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: cn(OPT_TEXT_TERTIARY, "px-3 py-4 text-xs"),
+					children: labels.empty
+				}) : /* @__PURE__ */ jsx("ul", {
+					className: "divide-border-subtle divide-y",
+					children: items.map((item) => {
+						const summary = firstLine(item.query);
+						return /* @__PURE__ */ jsxs("li", {
+							className: "group/history hover:bg-bg-subtle flex items-start gap-2 px-3 py-2",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: cn("mt-1.5 inline-block size-2 shrink-0 rounded-full", item.status === "success" ? "bg-success" : "bg-danger"),
+									role: "img",
+									"aria-label": item.status === "success" ? labels.succeeded : labels.failed
+								}),
+								/* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "flex min-w-0 flex-1 cursor-pointer flex-col gap-0.5 text-left",
+									"aria-label": labels.load(summary),
+									title: item.query,
+									onClick: () => onLoad === null || onLoad === void 0 ? void 0 : onLoad(item),
+									disabled: !onLoad,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-text-primary truncate font-mono text-xs",
+										children: summary
+									}), /* @__PURE__ */ jsxs("span", {
+										className: cn(OPT_TEXT_TERTIARY, "flex flex-wrap items-center gap-x-2 text-[11px] tabular-nums"),
+										children: [
+											/* @__PURE__ */ jsx("time", {
+												dateTime: item.ranAt,
+												children: labels.ranAt(item.ranAt)
+											}),
+											item.status === "success" && item.rowCount != null && /* @__PURE__ */ jsx("span", { children: labels.rows(item.rowCount) }),
+											item.elapsed != null && /* @__PURE__ */ jsx("span", { children: labels.elapsed(item.elapsed) }),
+											item.status === "error" && item.error && /* @__PURE__ */ jsx("span", {
+												className: "text-danger-fg truncate",
+												children: item.error
+											})
+										]
+									})]
+								}),
+								onRerun && /* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "sm",
+									className: "opacity-0 group-hover/history:opacity-100 focus-visible:opacity-100",
+									"aria-label": labels.rerun(summary),
+									title: labels.rerun(summary),
+									onClick: () => onRerun(item),
+									children: /* @__PURE__ */ jsx(Play, {
+										className: "size-3.5",
+										"aria-hidden": true
+									})
+								})
+							]
+						}, item.id);
+					})
+				})
+			})
+		]
+	});
+}
+QueryHistoryList.displayName = "QueryHistoryList";
+//#endregion
+//#region src/shells/save-query-dialog.tsx
+const defaultLabels$9 = {
+	createTitle: "Save query",
+	updateTitle: "Update query",
+	description: "A saved query can be reopened from the sidebar and shared with the project.",
+	name: "Name",
+	namePlaceholder: "Weekly signups by channel",
+	descriptionField: "Description",
+	descriptionPlaceholder: "What this answers, and any caveats.",
+	isPublic: "Share with the project",
+	isPublicHint: "Everyone in the project can open and run it. Only you can edit it.",
+	save: "Save",
+	cancel: "Cancel",
+	nameRequired: "Give the query a name.",
+	candidate: (index, total) => `Statement ${index} of ${total}`,
+	selection: "Selection",
+	previous: "Previous statement",
+	next: "Next statement"
+};
+/**
+* SaveQueryDialog — give the query a name it can be found by.
+*
+* Saving is the moment a query stops being scratch work, so the dialog asks
+* for the things a colleague will need: a name, a line about what it answers,
+* and whether they may see it. When the editor holds several statements the
+* dialog pages through them rather than guessing, because the one at the
+* cursor is usually — not always — the one meant.
+*
+* @example
+* ```tsx
+* <SaveQueryDialog
+*   open={saving} onOpenChange={setSaving}
+*   candidates={statements.map((s) => s.text)}
+*   initialCandidate={currentIndex}
+*   onSubmit={(values) => saveMutation.mutate(values)}
+* />
+* ```
+*/
+function SaveQueryDialog({ open, onOpenChange, onSubmit, candidates, initialCandidate = 0, candidateIsSelection = false, initialValues, mode = "create", saving = false, error, labels: customLabels }) {
+	var _initialValues$name, _initialValues$descri, _initialValues$isPubl, _candidates$safeIndex;
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$9), customLabels);
+	const [name, setName] = useState((_initialValues$name = initialValues === null || initialValues === void 0 ? void 0 : initialValues.name) !== null && _initialValues$name !== void 0 ? _initialValues$name : "");
+	const [description, setDescription] = useState((_initialValues$descri = initialValues === null || initialValues === void 0 ? void 0 : initialValues.description) !== null && _initialValues$descri !== void 0 ? _initialValues$descri : "");
+	const [isPublic, setIsPublic] = useState((_initialValues$isPubl = initialValues === null || initialValues === void 0 ? void 0 : initialValues.isPublic) !== null && _initialValues$isPubl !== void 0 ? _initialValues$isPubl : false);
+	const [index, setIndex] = useState(initialCandidate);
+	const [touched, setTouched] = useState(false);
+	useEffect(() => {
+		var _initialValues$name2, _initialValues$descri2, _initialValues$isPubl2;
+		if (!open) return;
+		setName((_initialValues$name2 = initialValues === null || initialValues === void 0 ? void 0 : initialValues.name) !== null && _initialValues$name2 !== void 0 ? _initialValues$name2 : "");
+		setDescription((_initialValues$descri2 = initialValues === null || initialValues === void 0 ? void 0 : initialValues.description) !== null && _initialValues$descri2 !== void 0 ? _initialValues$descri2 : "");
+		setIsPublic((_initialValues$isPubl2 = initialValues === null || initialValues === void 0 ? void 0 : initialValues.isPublic) !== null && _initialValues$isPubl2 !== void 0 ? _initialValues$isPubl2 : false);
+		setIndex(Math.min(initialCandidate, Math.max(0, candidates.length - 1)));
+		setTouched(false);
+	}, [
+		open,
+		initialValues === null || initialValues === void 0 ? void 0 : initialValues.name,
+		initialValues === null || initialValues === void 0 ? void 0 : initialValues.description,
+		initialValues === null || initialValues === void 0 ? void 0 : initialValues.isPublic,
+		initialCandidate,
+		candidates.length
+	]);
+	const safeIndex = Math.min(index, Math.max(0, candidates.length - 1));
+	const sql = (_candidates$safeIndex = candidates[safeIndex]) !== null && _candidates$safeIndex !== void 0 ? _candidates$safeIndex : "";
+	const multi = candidates.length > 1;
+	const nameError = touched && name.trim() === "" ? labels.nameRequired : void 0;
+	const submit = (event) => {
+		event.preventDefault();
+		setTouched(true);
+		if (name.trim() === "" || sql.trim() === "") return;
+		onSubmit({
+			name: name.trim(),
+			description: description.trim(),
+			isPublic,
+			sql
+		});
+	};
+	return /* @__PURE__ */ jsx(DialogRoot$1, {
+		open,
+		onOpenChange,
+		"data-opt-id": "ZGRHN",
+		"data-opt-slug": "save-query-dialog.SaveQueryDialog",
+		children: /* @__PURE__ */ jsx(DialogPanel$1, {
+			size: "md",
+			children: /* @__PURE__ */ jsxs("form", {
+				onSubmit: submit,
+				className: "contents",
+				children: [
+					/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogHeading$1, { children: mode === "update" ? labels.updateTitle : labels.createTitle }), /* @__PURE__ */ jsx(DialogDescription$1, { children: labels.description })] }),
+					/* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-4",
+						children: [
+							/* @__PURE__ */ jsx(Input, {
+								label: labels.name,
+								placeholder: labels.namePlaceholder,
+								value: name,
+								onChange: (event) => setName(event.target.value),
+								onBlur: () => setTouched(true),
+								error: nameError,
+								required: true,
+								fullWidth: true,
+								autoFocus: true
+							}),
+							/* @__PURE__ */ jsx(Textarea, {
+								label: labels.descriptionField,
+								placeholder: labels.descriptionPlaceholder,
+								value: description,
+								onChange: (event) => setDescription(event.target.value),
+								rows: 2,
+								fullWidth: true
+							}),
+							/* @__PURE__ */ jsx(Switch, {
+								label: labels.isPublic,
+								hint: labels.isPublicHint,
+								checked: isPublic,
+								onChange: setIsPublic,
+								size: "sm"
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-1.5",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: cn(OPT_TEXT_TERTIARY, "text-xs"),
+										children: candidateIsSelection ? labels.selection : multi ? labels.candidate(safeIndex + 1, candidates.length) : null
+									}), multi && /* @__PURE__ */ jsxs("span", {
+										className: "flex items-center gap-1",
+										children: [/* @__PURE__ */ jsx(Button, {
+											type: "button",
+											variant: "ghost",
+											size: "sm",
+											"aria-label": labels.previous,
+											disabled: safeIndex === 0,
+											onClick: () => setIndex((current) => current - 1),
+											children: /* @__PURE__ */ jsx(ChevronLeft, {
+												className: "size-3.5",
+												"aria-hidden": true
+											})
+										}), /* @__PURE__ */ jsx(Button, {
+											type: "button",
+											variant: "ghost",
+											size: "sm",
+											"aria-label": labels.next,
+											disabled: safeIndex === candidates.length - 1,
+											onClick: () => setIndex((current) => current + 1),
+											children: /* @__PURE__ */ jsx(ChevronRight, {
+												className: "size-3.5",
+												"aria-hidden": true
+											})
+										})]
+									})]
+								}), /* @__PURE__ */ jsx("pre", {
+									className: "bg-bg-subtle text-text-secondary max-h-40 overflow-auto rounded-lg p-3 font-mono text-xs whitespace-pre-wrap",
+									children: sql
+								})]
+							}),
+							error ? /* @__PURE__ */ jsx("p", {
+								className: "text-danger-fg text-sm",
+								role: "alert",
+								children: error
+							}) : null
+						]
+					}) }),
+					/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "secondary",
+						onClick: () => onOpenChange(false),
+						disabled: saving,
+						children: labels.cancel
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						variant: "primary",
+						loading: saving,
+						children: labels.save
+					})] })
+				]
+			})
+		})
+	});
+}
+SaveQueryDialog.displayName = "SaveQueryDialog";
+//#endregion
+//#region src/lib/use-media-query.ts
+/**
+* Whether a media query matches, kept in sync with the browser.
+*
+* `useSyncExternalStore` rather than an effect: a layout that switches on width
+* must not render the wrong shape for a frame first. The server snapshot is the
+* caller's `serverFallback`, because the server does not know the viewport and
+* guessing "narrow" collapses a wide layout on every first paint.
+*
+* Internal. Exported from `lib` for the components in this package, not from
+* the package barrel — a hook that answers "is this viewport wide" invites
+* layout decisions that belong in CSS.
+*/
+function useMediaQuery(query, serverFallback = false) {
+	return useSyncExternalStore((onChange) => {
+		if (typeof window === "undefined") return () => {};
+		const list = window.matchMedia(query);
+		list.addEventListener("change", onChange);
+		return () => list.removeEventListener("change", onChange);
+	}, () => typeof window === "undefined" ? serverFallback : window.matchMedia(query).matches, () => serverFallback);
+}
+//#endregion
+//#region src/shells/query-workspace.tsx
+const defaultLabels$8 = {
+	sidebar: "Schema and saved queries",
+	openSidebar: "Show sidebar",
+	closeSidebar: "Hide sidebar",
+	editor: "Query editor",
+	output: "Query output"
+};
+const STORAGE_PREFIX = "opt-query-workspace:";
+function subscribeNoop() {
+	return () => {};
+}
+function readLayout(key) {
+	if (!key || typeof window === "undefined") return void 0;
+	try {
+		const raw = window.localStorage.getItem(STORAGE_PREFIX + key);
+		if (!raw) return void 0;
+		const parsed = JSON.parse(raw);
+		if (parsed && typeof parsed === "object") return parsed;
+	} catch (_unused) {}
+}
+function writeLayout(key, layout) {
+	if (!key || typeof window === "undefined") return;
+	try {
+		window.localStorage.setItem(STORAGE_PREFIX + key, JSON.stringify(layout));
+	} catch (_unused2) {}
+}
+/**
+* QueryWorkspace — three panes, one job.
+*
+* The shape every SQL tool converges on: what can be queried on the left,
+* the query on top, the answer below. The panes resize and the sidebar
+* collapses, and both are remembered per `storageKey`, because the layout a
+* reader settles into is part of their tool. The workspace is only a frame —
+* the toolbar, editor and output are slots, so the same frame serves a full
+* page and an embedded card.
+*
+* @example
+* ```tsx
+* <QueryWorkspace
+*   storageKey="project-query"
+*   sidebar={<SchemaTree … />}
+*   toolbar={<QueryToolbar … />}
+*   editor={<SqlEditor height="fill" … />}
+*   output={<QueryOutputPane … />}
+* />
+* ```
+*/
+function QueryWorkspace({ sidebar, sidebarOpen: controlledSidebarOpen, onSidebarOpenChange, header, toolbar, editor, output, storageKey, defaultSidebarSize = 22, defaultEditorSize = 40, className, labels: customLabels }) {
+	var _ref;
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$8), customLabels);
+	const compact = useMediaQuery("(max-width: 767px)", false);
+	const [localOpen, setLocalOpen] = useState(null);
+	const sidebarOpen = (_ref = controlledSidebarOpen !== null && controlledSidebarOpen !== void 0 ? controlledSidebarOpen : localOpen) !== null && _ref !== void 0 ? _ref : !compact;
+	const setSidebarOpen = useCallback((next) => {
+		if (controlledSidebarOpen === void 0) setLocalOpen(next);
+		onSidebarOpenChange === null || onSidebarOpenChange === void 0 || onSidebarOpenChange(next);
+	}, [controlledSidebarOpen, onSidebarOpenChange]);
+	const sidebarRef = useRef(null);
+	useEffect(() => {
+		const panel = sidebarRef.current;
+		if (!panel) return;
+		if (sidebarOpen) panel.expand();
+		else panel.collapse();
+	}, [sidebarOpen]);
+	const mounted = useSyncExternalStore(subscribeNoop, () => true, () => false);
+	const [horizontalLayout] = useState(() => readLayout(storageKey ? `${storageKey}:h` : void 0));
+	const [verticalLayout] = useState(() => readLayout(storageKey ? `${storageKey}:v` : void 0));
+	const column = /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-0 min-w-0 flex-col",
+		children: [
+			header ? /* @__PURE__ */ jsx("div", {
+				className: "flex-none",
+				children: header
+			}) : null,
+			toolbar ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-none items-stretch",
+				children: [sidebar && !sidebarOpen ? /* @__PURE__ */ jsx("div", {
+					className: "border-border flex items-center border-b pl-1",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						"aria-label": labels.openSidebar,
+						title: labels.openSidebar,
+						onClick: () => setSidebarOpen(true),
+						children: /* @__PURE__ */ jsx(PanelLeftOpen, {
+							className: "size-4",
+							"aria-hidden": true
+						})
+					})
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: toolbar
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs(ResizablePanelGroup, {
+				direction: "vertical",
+				className: "min-h-0 flex-1",
+				defaultLayout: verticalLayout,
+				onLayoutChanged: (layout) => writeLayout(storageKey ? `${storageKey}:v` : void 0, layout),
+				children: [
+					/* @__PURE__ */ jsx(ResizablePanel, {
+						id: "editor",
+						defaultSize: defaultEditorSize,
+						minSize: 15,
+						className: "flex min-h-0 flex-col overflow-hidden",
+						"aria-label": labels.editor,
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex min-h-0 flex-1 flex-col p-2",
+							children: editor
+						})
+					}),
+					/* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
+					/* @__PURE__ */ jsx(ResizablePanel, {
+						id: "output",
+						defaultSize: 100 - defaultEditorSize,
+						minSize: 15,
+						className: "flex min-h-0 flex-col overflow-hidden",
+						"aria-label": labels.output,
+						children: output
+					})
+				]
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("bg-surface border-border flex h-full min-h-0 w-full overflow-hidden rounded-lg border", className),
+		"data-opt-id": "HCNR2",
+		"data-opt-slug": "query-workspace.QueryWorkspace",
+		children: compact ? /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full min-h-0 w-full flex-col",
+			children: [sidebar && sidebarOpen ? /* @__PURE__ */ jsxs("div", {
+				className: "bg-bg-subtle border-border flex max-h-[50%] min-h-0 flex-col overflow-hidden border-b",
+				"aria-label": labels.sidebar,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "border-border flex flex-none items-center justify-end border-b px-1 py-0.5",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						"aria-label": labels.closeSidebar,
+						title: labels.closeSidebar,
+						onClick: () => setSidebarOpen(false),
+						children: /* @__PURE__ */ jsx(PanelLeftClose, {
+							className: "size-4",
+							"aria-hidden": true
+						})
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex min-h-0 flex-1 flex-col",
+					children: sidebar
+				})]
+			}) : null, /* @__PURE__ */ jsx("div", {
+				className: "flex min-h-0 min-w-0 flex-1 flex-col",
+				children: column
+			})]
+		}) : !mounted ? /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full min-h-0 w-full",
+			children: [sidebar && sidebarOpen ? /* @__PURE__ */ jsx("div", {
+				className: "bg-bg-subtle border-border flex min-h-0 w-[22%] flex-col overflow-hidden border-r",
+				"aria-label": labels.sidebar,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex min-h-0 flex-1 flex-col",
+					children: sidebar
+				})
+			}) : null, /* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-0 min-w-0 flex-1 flex-col",
+				children: [
+					header ? /* @__PURE__ */ jsx("div", {
+						className: "flex-none",
+						children: header
+					}) : null,
+					toolbar ? /* @__PURE__ */ jsx("div", {
+						className: "flex-none",
+						children: toolbar
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						className: "flex min-h-0 flex-col p-2",
+						style: { flexBasis: `${defaultEditorSize}%` },
+						children: editor
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex min-h-0 flex-1 flex-col",
+						children: output
+					})
+				]
+			})]
+		}) : sidebar ? /* @__PURE__ */ jsxs(ResizablePanelGroup, {
+			direction: "horizontal",
+			className: "min-h-0 flex-1",
+			defaultLayout: horizontalLayout,
+			onLayoutChanged: (layout) => writeLayout(storageKey ? `${storageKey}:h` : void 0, layout),
+			children: [
+				/* @__PURE__ */ jsxs(ResizablePanel, {
+					id: "sidebar",
+					panelRef: sidebarRef,
+					defaultSize: defaultSidebarSize,
+					minSize: 12,
+					maxSize: 45,
+					collapsible: true,
+					collapsedSize: 0,
+					onResize: (size) => {
+						const collapsed = size.asPercentage === 0;
+						if (collapsed === sidebarOpen) setSidebarOpen(!collapsed);
+					},
+					className: "bg-bg-subtle flex min-h-0 flex-col overflow-hidden",
+					"aria-label": labels.sidebar,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "border-border flex flex-none items-center justify-end border-b px-1 py-0.5",
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							"aria-label": labels.closeSidebar,
+							title: labels.closeSidebar,
+							onClick: () => setSidebarOpen(false),
+							children: /* @__PURE__ */ jsx(PanelLeftClose, {
+								className: "size-4",
+								"aria-hidden": true
+							})
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex min-h-0 flex-1 flex-col",
+						children: sidebar
+					})]
+				}),
+				/* @__PURE__ */ jsx(ResizableHandle, {}),
+				/* @__PURE__ */ jsx(ResizablePanel, {
+					id: "main",
+					defaultSize: 100 - defaultSidebarSize,
+					minSize: 40,
+					className: "flex min-h-0 flex-col overflow-hidden",
+					children: column
+				})
+			]
+		}) : column
+	});
+}
+QueryWorkspace.displayName = "QueryWorkspace";
+const THEME_REGISTRY = {
+	default: {
+		id: "default",
+		label: "Default",
+		description: "Blue accent, balanced radius & shadow",
+		palette: {
+			seed: "#2563eb",
+			harmony: "split-complementary",
+			radiusScale: "medium",
+			shadowIntensity: "subtle",
+			neutralTemperature: "cool"
+		},
+		switcherSwatches: [
+			"hsl(221 83% 53%)",
+			"hsl(142 71% 45%)",
+			"hsl(38 92% 50%)"
+		]
+	},
+	minimal: {
+		id: "minimal",
+		label: "Minimal",
+		description: "Monochrome, no shadow, sharp edges",
+		palette: {
+			seed: "#333333",
+			harmony: "analogous",
+			radiusScale: "sharp",
+			shadowIntensity: "none",
+			neutralTemperature: "cool"
+		},
+		switcherSwatches: [
+			"hsl(0 0% 20%)",
+			"hsl(0 0% 45%)",
+			"hsl(0 0% 70%)"
+		]
+	},
+	natural: {
+		id: "natural",
+		label: "Natural",
+		description: "Always light — sage accent, warm cream",
+		forceLightOnly: true,
+		palette: {
+			seed: "#5a9376",
+			harmony: "complementary",
+			radiusScale: "medium",
+			shadowIntensity: "subtle",
+			neutralTemperature: "warm"
+		},
+		switcherSwatches: [
+			"hsl(155 38% 45%)",
+			"hsl(25 65% 55%)",
+			"hsl(45 75% 50%)"
+		]
+	},
+	pro: {
+		id: "pro",
+		label: "Pro",
+		description: "Neon blue accent, mono headings, ultra-dense",
+		palette: {
+			seed: "#0080ff",
+			harmony: "tetradic",
+			radiusScale: "sharp",
+			shadowIntensity: "subtle",
+			neutralTemperature: "cool"
+		},
+		switcherSwatches: [
+			"hsl(210 100% 55%)",
+			"hsl(170 90% 48%)",
+			"hsl(290 85% 60%)"
+		]
+	},
+	"mono-dark": {
+		id: "mono-dark",
+		label: "Mono Dark",
+		description: "OLED-friendly black, neon cyan accent, mono headings",
+		palette: {
+			seed: "#00d4ff",
+			harmony: "tetradic",
+			radiusScale: "sharp",
+			shadowIntensity: "subtle",
+			neutralTemperature: "cool"
+		},
+		switcherSwatches: [
+			"hsl(190 100% 50%)",
+			"hsl(0 0% 8%)",
+			"hsl(280 90% 65%)"
+		]
+	}
+};
+/** All registered preset ids in declaration order. */
+const THEME_PRESET_IDS = Object.keys(THEME_REGISTRY);
+/** Look up a descriptor by id. Returns `undefined` for unknown ids. */
+function getThemeDescriptor(id) {
+	return THEME_REGISTRY[id];
+}
+/** Type guard for a known preset id. */
+function isThemePresetId(id) {
+	return id in THEME_REGISTRY;
+}
+/** Preset ids that suppress dark mode generation. */
+const FORCE_LIGHT_PRESET_IDS = new Set(THEME_PRESET_IDS.filter((id) => THEME_REGISTRY[id].forceLightOnly));
+/**
+* Map from removed preset ids to the closest surviving preset. Boot script and
+* `readStoredTheme` consult this so users with persisted `corporate`/`playful`
+* values silently land on a working preset on next page load instead of
+* showing the global default fallback for an unknown id.
+*
+* Keep this around indefinitely — localStorage values are forever and the
+* cost of two extra entries is negligible.
+*/
+const DEPRECATED_PRESET_MIGRATIONS = Object.freeze({
+	corporate: "default",
+	playful: "default"
+});
+/**
+* Resolve a possibly-deprecated preset id to a registered one. Returns the
+* input unchanged when it is already valid; returns the migration target when
+* it is a known deprecated id; returns `null` when the id is unknown
+* altogether (caller should fall back to its default).
+*/
+function migrateDeprecatedPresetId(id) {
+	if (!id) return null;
+	if (isThemePresetId(id)) return id;
+	if (id in DEPRECATED_PRESET_MIGRATIONS) return DEPRECATED_PRESET_MIGRATIONS[id];
+	return null;
+}
+//#endregion
+//#region src/lib/theme/theme-types.ts
+/**
+* Author canonical theme overrides with token-name autocomplete.
+* ThemeOverrides remains broad for backward compatibility with older custom
+* variables; new themes should use this helper as the governed entry point.
+*/
+function defineThemeOverrides(overrides) {
+	return overrides;
+}
+/** Construct a `PresetThemeSpec` — convenience for the common case. */
+function presetTheme(preset, overrides) {
+	return overrides ? {
+		kind: "preset",
+		preset,
+		overrides
+	} : {
+		kind: "preset",
+		preset
+	};
+}
+/** Construct a `GeneratedThemeSpec` from an inline `PaletteConfig`. */
+function generatedTheme(palette, options) {
+	return _objectSpread2({
+		kind: "generated",
+		palette
+	}, options);
+}
+/** True when `spec` references a registered preset id. */
+function isPresetSpec(spec) {
+	return spec.kind === "preset";
+}
+/** True when `spec` carries an inline `PaletteConfig`. */
+function isGeneratedSpec(spec) {
+	return spec.kind === "generated";
+}
+/** True when `spec` wraps a fully-formed `ThemeDescriptor`. */
+function isDescriptorSpec(spec) {
+	return spec.kind === "descriptor";
+}
+//#endregion
+//#region src/lib/theme/theme-serialize.ts
+/**
+* theme-serialize.ts
+*
+* Pure helpers that turn a `ThemeSpec` into the artifacts the runtime needs:
+* resolved descriptor + mode, computed token maps for generated palettes, and
+* `<style>` CSS strings ready to be injected into `<head>`.
+*
+* Kept side-effect free so the boot script and the provider can share the
+* same logic without dragging React into the client bundle's critical path.
+*/
+/** Element id used for the global generated theme style tag. */
+const GLOBAL_THEME_STYLE_ID = "opt-global-theme";
+/** localStorage key for the persisted ThemeSpec (generated mode). */
+const THEME_SPEC_STORAGE_KEY = "opt-theme-spec";
+/**
+* localStorage key for the cached, pre-serialized token maps that match the
+* spec under `THEME_SPEC_STORAGE_KEY`. The boot script reads this directly so
+* it can inline tokens without invoking opt-palette at startup.
+*/
+const THEME_TOKENS_STORAGE_KEY = "opt-theme-tokens";
+/** Stable id used for unnamed generated themes. */
+const GENERATED_THEME_ID_DEFAULT = "generated";
+/** Cached token maps keyed by spec hash. Lazy-built per process. */
+const generatedCache = /* @__PURE__ */ new Map();
+/** Build a stable cache key for a `PaletteConfig`. */
+function paletteCacheKey(config) {
+	return JSON.stringify(config);
+}
+/** Run opt-palette with caching. */
+function generatePaletteCached(config) {
+	const key = paletteCacheKey(config);
+	let cached = generatedCache.get(key);
+	if (!cached) {
+		cached = generatePalette(config);
+		generatedCache.set(key, cached);
+	}
+	return cached;
+}
+/** Apply sparse override maps onto a base token record. */
+function applyOverrides(base, overrides, mode) {
+	if (!overrides) return base;
+	const merged = _objectSpread2({}, base);
+	if (overrides.shared) Object.assign(merged, overrides.shared);
+	const modeOverrides = mode === "light" ? overrides.light : overrides.dark;
+	if (modeOverrides) Object.assign(merged, modeOverrides);
+	return merged;
+}
+/**
+* Stable id used in `<html data-theme>` and the `<style>` selector.
+* - preset → the preset id (force-light) or `${id}` / `${id}-dark`
+* - generated → `spec.id ?? "generated"` with `-dark` suffix when applicable
+* - descriptor → `descriptor.id` with same suffix logic
+*/
+function getCompoundIdForSpec(spec, resolvedMode, forceLightOnly) {
+	const baseId = baseIdFor(spec);
+	if (forceLightOnly) return baseId;
+	return resolvedMode === "dark" ? `${baseId}-dark` : baseId;
+}
+function baseIdFor(spec) {
+	var _spec$id;
+	if (isPresetSpec(spec)) return spec.preset;
+	if (isDescriptorSpec(spec)) return spec.descriptor.id;
+	return (_spec$id = spec.id) !== null && _spec$id !== void 0 ? _spec$id : GENERATED_THEME_ID_DEFAULT;
+}
+/** Whether the given spec emits dark variants at all. */
+function isForceLightSpec(spec) {
+	if (isPresetSpec(spec)) {
+		const desc = THEME_REGISTRY[spec.preset];
+		return (desc === null || desc === void 0 ? void 0 : desc.forceLightOnly) === true;
+	}
+	if (isDescriptorSpec(spec)) return spec.descriptor.forceLightOnly === true;
+	return spec.forceLightOnly === true;
+}
+/**
+* Compute the inline tokens for a `GeneratedThemeSpec` or
+* `DescriptorThemeSpec` whose descriptor carries a `palette`. Returns `null`
+* for preset specs (their tokens live in the static CSS files).
+*/
+function computeGeneratedTokens(spec) {
+	if (isPresetSpec(spec)) return null;
+	let palette;
+	let overrides;
+	let id;
+	let forceLight;
+	if (isGeneratedSpec(spec)) {
+		var _spec$id2;
+		palette = spec.palette;
+		overrides = spec.overrides;
+		id = (_spec$id2 = spec.id) !== null && _spec$id2 !== void 0 ? _spec$id2 : GENERATED_THEME_ID_DEFAULT;
+		forceLight = spec.forceLightOnly === true;
+	} else {
+		palette = spec.descriptor.palette;
+		overrides = spec.overrides;
+		id = spec.descriptor.id;
+		forceLight = spec.descriptor.forceLightOnly === true;
+	}
+	if (!palette) return null;
+	const generated = generatePaletteCached(palette);
+	return {
+		id,
+		light: applyOverrides(generated.light, overrides, "light"),
+		dark: forceLight ? null : applyOverrides(generated.dark, overrides, "dark")
+	};
+}
+/**
+* Serialize a token record into a CSS rule body — `--name:value;...` — without
+* surrounding selector or braces. Values are not escaped; callers are
+* responsible for trusted input. Boot script and provider both rely on this
+* shape.
+*/
+function serializeTokenBody(tokens) {
+	return Object.entries(tokens).map(([k, v]) => `${k}:${v}`).join(";");
+}
+/**
+* Build a CSS rule scoped to `[data-theme="<id>"]`.
+*/
+function serializeThemeRule(themeId, tokens) {
+	return `[data-theme="${themeId}"]{${serializeTokenBody(tokens)}}`;
+}
+/**
+* Build the full CSS for a generated theme style tag — covers light + dark
+* selectors based on the computed tokens. Caller chooses the id used in
+* the selector (typically the spec base id).
+*/
+function serializeGeneratedTheme(tokens) {
+	const { id, light, dark } = tokens;
+	let css = serializeThemeRule(id, light);
+	if (dark) css += serializeThemeRule(`${id}-dark`, dark);
+	return css;
+}
+/**
+* Resolve a spec into its descriptor counterpart. Preset specs map to
+* `THEME_REGISTRY[preset]`. Generated specs are wrapped into a synthetic
+* descriptor so callers can treat them uniformly.
+*/
+function resolveDescriptor(spec) {
+	if (isPresetSpec(spec)) {
+		const desc = THEME_REGISTRY[spec.preset];
+		if (!desc) throw new Error(`[opt-ui] Unknown theme preset id: "${spec.preset}". Registered ids: ${Object.keys(THEME_REGISTRY).join(", ")}`);
+		return desc;
+	}
+	if (isDescriptorSpec(spec)) return spec.descriptor;
+	return generatedSpecToDescriptor(spec);
+}
+function generatedSpecToDescriptor(spec) {
+	var _spec$id3, _spec$label;
+	return {
+		id: (_spec$id3 = spec.id) !== null && _spec$id3 !== void 0 ? _spec$id3 : GENERATED_THEME_ID_DEFAULT,
+		label: (_spec$label = spec.label) !== null && _spec$label !== void 0 ? _spec$label : "Custom",
+		description: "Generated theme",
+		palette: spec.palette,
+		forceLightOnly: spec.forceLightOnly
+	};
+}
+/**
+* Validate a `ThemeSpec` parsed from localStorage. Returns the spec on
+* success or `null` if any required field is missing or the preset id is
+* unknown. Defensive parsing — never throws.
+*/
+function safeParseStoredSpec(json) {
+	if (!json) return null;
+	try {
+		const parsed = JSON.parse(json);
+		if (!parsed || typeof parsed !== "object" || !("kind" in parsed)) return null;
+		if (parsed.kind === "preset") {
+			const preset = parsed.preset;
+			if (typeof preset !== "string" || !isThemePresetId(preset)) return null;
+			return {
+				kind: "preset",
+				preset
+			};
+		}
+		if (parsed.kind === "generated") {
+			const palette = parsed.palette;
+			if (!isPaletteConfig(palette)) return null;
+			return {
+				kind: "generated",
+				palette,
+				id: typeof parsed.id === "string" ? parsed.id : void 0,
+				label: typeof parsed.label === "string" ? parsed.label : void 0,
+				forceLightOnly: parsed.forceLightOnly === true,
+				overrides: isObjectMap(parsed.overrides) ? parsed.overrides : void 0
+			};
+		}
+		return null;
+	} catch (_unused) {
+		return null;
+	}
+}
+function isObjectMap(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function isPaletteConfig(value) {
+	if (!isObjectMap(value)) return false;
+	const v = value;
+	return typeof v.seed === "string" && typeof v.harmony === "string" && typeof v.radiusScale === "string" && typeof v.shadowIntensity === "string" && typeof v.neutralTemperature === "string";
+}
+/**
+* Parse the cached token payload from localStorage. Returns `null` on any
+* shape mismatch — caller will recompute from the spec.
+*/
+function safeParseStoredTokens(json) {
+	if (!json) return null;
+	try {
+		const parsed = JSON.parse(json);
+		if (!parsed || typeof parsed.id !== "string" || !isObjectMap(parsed.light)) return null;
+		return {
+			id: parsed.id,
+			light: parsed.light,
+			dark: isObjectMap(parsed.dark) ? parsed.dark : void 0
+		};
+	} catch (_unused2) {
+		return null;
+	}
+}
+/** Build the storage payload that pairs with `opt-theme-spec`. */
+function buildTokenCache(tokens) {
+	var _tokens$dark;
+	return {
+		id: tokens.id,
+		light: tokens.light,
+		dark: (_tokens$dark = tokens.dark) !== null && _tokens$dark !== void 0 ? _tokens$dark : void 0
+	};
+}
+//#endregion
+//#region src/lib/theme/theme-resolution.ts
+const THEME_MODE_VALUES = [
+	"light",
+	"dark",
+	"system"
+];
+const LEGACY_THEME_STORAGE_KEY = "opt-theme";
+const THEME_PRESET_STORAGE_KEY = "opt-preset";
+const THEME_MODE_STORAGE_KEY = "opt-mode";
+const DARK_MQ = "(prefers-color-scheme: dark)";
+/**
+* Presets that force light mode regardless of system dark/light preference.
+* Mirrors `FORCE_LIGHT_PRESET_IDS` from `./presets` — kept as alias for
+* existing imports.
+*/
+const FORCE_LIGHT_PRESETS = FORCE_LIGHT_PRESET_IDS;
+/** All valid compound theme names. Useful for static enumeration. */
+const ALL_COMPOUND_THEMES = THEME_PRESET_IDS.flatMap((id) => FORCE_LIGHT_PRESET_IDS.has(id) ? [id] : [id, `${id}-dark`]);
+function hasStorageMutation(storage) {
+	return typeof storage.setItem === "function" && typeof storage.removeItem === "function";
+}
+/** Handles is theme mode. */
+function isThemeMode(value) {
+	return typeof value === "string" && THEME_MODE_VALUES.includes(value);
+}
+/** Compute compound theme name from preset + resolved mode. */
+function getCompoundTheme(preset, resolvedMode) {
+	if (FORCE_LIGHT_PRESETS.has(preset)) return preset;
+	return resolvedMode === "dark" ? `${preset}-dark` : preset;
+}
+/** Handles resolve theme mode. */
+function resolveThemeMode(preset, mode, systemDark) {
+	if (FORCE_LIGHT_PRESETS.has(preset)) return "light";
+	if (mode === "system") return systemDark ? "dark" : "light";
+	return mode;
+}
+/** Handles read stored theme. */
+function readStoredTheme(storage, defaultPreset, defaultMode, options = {}) {
+	const legacy = storage.getItem(LEGACY_THEME_STORAGE_KEY);
+	const storedPreset = storage.getItem(THEME_PRESET_STORAGE_KEY);
+	const storedMode = storage.getItem(THEME_MODE_STORAGE_KEY);
+	let preset = defaultPreset;
+	if (typeof legacy === "string") {
+		const migratedLegacy = migrateDeprecatedPresetId(legacy);
+		if (migratedLegacy) {
+			if (options.migrateLegacy && hasStorageMutation(storage)) {
+				storage.setItem(THEME_PRESET_STORAGE_KEY, migratedLegacy);
+				storage.removeItem(LEGACY_THEME_STORAGE_KEY);
+			}
+			preset = migratedLegacy;
+		}
+	} else if (typeof storedPreset === "string") {
+		const migrated = migrateDeprecatedPresetId(storedPreset);
+		if (migrated) {
+			preset = migrated;
+			if (hasStorageMutation(storage) && migrated !== storedPreset && storedPreset in DEPRECATED_PRESET_MIGRATIONS) storage.setItem(THEME_PRESET_STORAGE_KEY, migrated);
+		}
+	}
+	const mode = isThemeMode(storedMode) ? storedMode : defaultMode;
+	return {
+		preset,
+		mode
+	};
+}
+/** Normalize a mode against an optional allowed-mode list. */
+function coerceThemeMode(mode, allowedModes, fallback = "system") {
+	var _allowedModes$;
+	if (!allowedModes || allowedModes.length === 0) return mode;
+	if (allowedModes.includes(mode)) return mode;
+	if (allowedModes.includes(fallback)) return fallback;
+	return (_allowedModes$ = allowedModes[0]) !== null && _allowedModes$ !== void 0 ? _allowedModes$ : fallback;
+}
+/**
+* Build the inline `<head>` boot script that paints the correct theme before
+* React mounts. Two paths:
+*
+* 1. **Generated** — when both `opt-theme-spec` (kind: "generated") and
+*    `opt-theme-tokens` are present and well-formed, a `<style id="…">` tag
+*    is inserted with the cached tokens and `<html data-theme>` is set to the
+*    generated id (with optional `-dark` suffix). This bypasses opt-palette
+*    at startup so first paint is instant.
+* 2. **Preset (legacy)** — falls through to the existing preset selector,
+*    including legacy `opt-theme` → `opt-preset` migration.
+*
+* Returned as a single minified line; intended for `dangerouslySetInnerHTML`.
+*/
+function createThemeBootScript(defaultPreset = "default", defaultMode = "system", options = {}) {
+	var _options$allowedModes, _allowedModes$2;
+	const presetValues = JSON.stringify(THEME_PRESET_IDS);
+	const modeValues = JSON.stringify(THEME_MODE_VALUES);
+	const allowedModes = ((_options$allowedModes = options.allowedModes) === null || _options$allowedModes === void 0 ? void 0 : _options$allowedModes.length) ? options.allowedModes : THEME_MODE_VALUES;
+	const allowedModeValues = JSON.stringify(allowedModes);
+	const forceLightPresets = JSON.stringify(Array.from(FORCE_LIGHT_PRESETS));
+	const deprecatedMap = JSON.stringify(DEPRECATED_PRESET_MIGRATIONS);
+	const lockedPreset = options.lockedPreset;
+	const defaultPresetLiteral = JSON.stringify(lockedPreset !== null && lockedPreset !== void 0 ? lockedPreset : defaultPreset);
+	const defaultModeLiteral = JSON.stringify(coerceThemeMode(defaultMode, allowedModes, (_allowedModes$2 = allowedModes[0]) !== null && _allowedModes$2 !== void 0 ? _allowedModes$2 : "system"));
+	const lockedPresetLiteral = JSON.stringify(lockedPreset !== null && lockedPreset !== void 0 ? lockedPreset : null);
+	const styleId = JSON.stringify(GLOBAL_THEME_STYLE_ID);
+	const specKey = JSON.stringify(THEME_SPEC_STORAGE_KEY);
+	const tokensKey = JSON.stringify(THEME_TOKENS_STORAGE_KEY);
+	const presetKey = JSON.stringify(THEME_PRESET_STORAGE_KEY);
+	const modeKey = JSON.stringify(THEME_MODE_STORAGE_KEY);
+	const legacyKey = JSON.stringify(LEGACY_THEME_STORAGE_KEY);
+	const darkMq = JSON.stringify(DARK_MQ);
+	return `
+try {
+  var pv=${presetValues},mv=${modeValues},am=${allowedModeValues},fp=${forceLightPresets},dm=${deprecatedMap},lk=${lockedPresetLiteral};
+  function mp(v){if(typeof v!=="string")return null;if(pv.indexOf(v)>=0)return v;return Object.prototype.hasOwnProperty.call(dm,v)?dm[v]:null;}
+  var p=${defaultPresetLiteral};
+  if(!lk){
+    var lp=localStorage.getItem(${legacyKey}),sp=localStorage.getItem(${presetKey});
+    var lpm=mp(lp),spm=mp(sp);
+    p=lpm||spm||${defaultPresetLiteral};
+    if(lpm){localStorage.setItem(${presetKey},lpm);localStorage.removeItem(${legacyKey});}
+    else if(sp&&spm&&sp!==spm){localStorage.setItem(${presetKey},spm);}
+  }
+  var sm=localStorage.getItem(${modeKey});
+  var m=(typeof sm==="string"&&mv.indexOf(sm)>=0&&am.indexOf(sm)>=0)?sm:${defaultModeLiteral};
+  var spec=null,tk=null;
+  if(!lk){try{var sj=localStorage.getItem(${specKey});if(sj)spec=JSON.parse(sj);}catch(e){}}
+  if(!lk){try{var tj=localStorage.getItem(${tokensKey});if(tj)tk=JSON.parse(tj);}catch(e){}}
+  if(!lk&&spec&&spec.kind==="generated"&&tk&&typeof tk.id==="string"&&tk.light&&typeof tk.light==="object"){
+    var fld=spec.forceLightOnly===true;
+    var dk=!fld&&(m==="dark"||(m==="system"&&matchMedia(${darkMq}).matches));
+    var tt=(dk&&tk.dark)?tk.dark:tk.light;
+    var cid=(dk&&tk.dark)?(tk.id+"-dark"):tk.id;
+    var css="";
+    for(var k in tt){if(Object.prototype.hasOwnProperty.call(tt,k))css+=k+":"+tt[k]+";"}
+    var st=document.getElementById(${styleId});
+    if(!st){st=document.createElement("style");st.id=${styleId};document.head.appendChild(st);}
+    st.textContent='[data-theme="'+cid+'"]{'+css+'}';
+    document.documentElement.setAttribute("data-theme",cid);
+  } else {
+    var d=fp.indexOf(p)<0&&(m==="dark"||(m==="system"&&matchMedia(${darkMq}).matches));
+    document.documentElement.setAttribute("data-theme",d?p+"-dark":p);
+  }
+} catch(e){}`.replace(/\n\s*/g, "");
+}
+//#endregion
+//#region src/lib/theme/theme-controller-context.tsx
+const OptThemeControllerContext = createContext(null);
+/**
+* Reads the controller exposed by the nearest `OptThemeProvider`. Returns
+* `null` when used outside a provider — callers should treat that as "no
+* promotion available" and behave as if scope === "override".
+*/
+function useOptThemeController() {
+	return useContext(OptThemeControllerContext);
+}
+//#endregion
+//#region src/lib/theme/theme-provider.tsx
+const THEME_STORAGE_KEYS = /* @__PURE__ */ new Set([
+	LEGACY_THEME_STORAGE_KEY,
+	THEME_PRESET_STORAGE_KEY,
+	THEME_MODE_STORAGE_KEY,
+	THEME_SPEC_STORAGE_KEY,
+	THEME_TOKENS_STORAGE_KEY
+]);
+function getSystemDark() {
+	if (typeof window === "undefined") return false;
+	return window.matchMedia(DARK_MQ).matches;
+}
+function subscribeSystemDark(cb) {
+	if (typeof window === "undefined") return () => {};
+	const mql = window.matchMedia(DARK_MQ);
+	mql.addEventListener("change", cb);
+	return () => mql.removeEventListener("change", cb);
+}
+/**
+* Read the persisted ThemeSpec, preferring a generated spec when present.
+* Falls back to the legacy preset path otherwise. Does not touch localStorage
+* apart from the legacy migration handled by `readStoredTheme`.
+*/
+function readStoredSpec(defaultPreset, defaultMode, options = {}) {
+	const generated = safeParseStoredSpec(window.localStorage.getItem(THEME_SPEC_STORAGE_KEY));
+	const { preset, mode } = readStoredTheme(window.localStorage, defaultPreset, defaultMode, options);
+	if (generated && generated.kind === "generated") return {
+		spec: generated,
+		mode,
+		presetShadow: preset
+	};
+	return {
+		spec: presetTheme(preset),
+		mode,
+		presetShadow: preset
+	};
+}
+function persistSpec(spec) {
+	if (isPresetSpec(spec)) {
+		window.localStorage.setItem(THEME_PRESET_STORAGE_KEY, spec.preset);
+		window.localStorage.removeItem(THEME_SPEC_STORAGE_KEY);
+		window.localStorage.removeItem(THEME_TOKENS_STORAGE_KEY);
+		return;
+	}
+	if (isGeneratedSpec(spec)) {
+		const tokens = computeGeneratedTokens(spec);
+		window.localStorage.setItem(THEME_SPEC_STORAGE_KEY, JSON.stringify(spec));
+		if (tokens) window.localStorage.setItem(THEME_TOKENS_STORAGE_KEY, JSON.stringify(buildTokenCache(tokens)));
+		else window.localStorage.removeItem(THEME_TOKENS_STORAGE_KEY);
+		return;
+	}
+	const descriptor = spec.descriptor;
+	if (isThemePresetId(descriptor.id) && !descriptor.palette) {
+		window.localStorage.setItem(THEME_PRESET_STORAGE_KEY, descriptor.id);
+		window.localStorage.removeItem(THEME_SPEC_STORAGE_KEY);
+		window.localStorage.removeItem(THEME_TOKENS_STORAGE_KEY);
+		return;
+	}
+	if (descriptor.palette) persistSpec({
+		kind: "generated",
+		id: descriptor.id,
+		label: descriptor.label,
+		palette: descriptor.palette,
+		forceLightOnly: descriptor.forceLightOnly
+	});
+}
+function upsertGlobalStyle(css) {
+	if (typeof document === "undefined") return;
+	let node = document.getElementById(GLOBAL_THEME_STYLE_ID);
+	if (!node) {
+		node = document.createElement("style");
+		node.id = GLOBAL_THEME_STYLE_ID;
+		document.head.appendChild(node);
+	}
+	if (node.textContent !== css) node.textContent = css;
+}
+function removeGlobalStyle() {
+	var _document$getElementB;
+	if (typeof document === "undefined") return;
+	(_document$getElementB = document.getElementById("opt-global-theme")) === null || _document$getElementB === void 0 || _document$getElementB.remove();
+}
+const ThemeContext = createContext(void 0);
+/** Renders the opt theme provider component. */
+function OptThemeProvider({ children, defaultTheme, controlledTheme, defaultPreset = "default", defaultMode = "system", lockedPreset, allowedModes, allowThemePromotion = true }) {
+	var _allowedModes$, _ref, _effectiveStackTop$sp;
+	const normalizedDefaultMode = coerceThemeMode(defaultMode, allowedModes, (_allowedModes$ = allowedModes === null || allowedModes === void 0 ? void 0 : allowedModes[0]) !== null && _allowedModes$ !== void 0 ? _allowedModes$ : "system");
+	const initialSpec = (_ref = controlledTheme !== null && controlledTheme !== void 0 ? controlledTheme : lockedPreset ? presetTheme(lockedPreset) : defaultTheme) !== null && _ref !== void 0 ? _ref : presetTheme(defaultPreset);
+	const initialPresetShadow = isPresetSpec(initialSpec) ? initialSpec.preset : lockedPreset !== null && lockedPreset !== void 0 ? lockedPreset : defaultPreset;
+	const [theme, setThemeState] = useState(initialSpec);
+	const [presetShadow, setPresetShadow] = useState(initialPresetShadow);
+	const [mode, setModeState] = useState(normalizedDefaultMode);
+	/**
+	* Transient theme override stack — descendants (typically harnesses in
+	* promote-global mode) push specs that take priority over `controlledTheme`
+	* and persisted state. The stack is intentionally kept out of localStorage.
+	*/
+	const [stack, setStack] = useState([]);
+	const isControlled = controlledTheme !== void 0;
+	const isLocked = !isControlled && lockedPreset !== void 0;
+	useEffect(() => {
+		if (!isControlled) return;
+		setThemeState(controlledTheme);
+		if (isPresetSpec(controlledTheme)) setPresetShadow(controlledTheme.preset);
+	}, [controlledTheme, isControlled]);
+	useEffect(() => {
+		if (isControlled) return;
+		if (isLocked) {
+			const locked = lockedPreset !== null && lockedPreset !== void 0 ? lockedPreset : defaultPreset;
+			const { mode: storedMode } = readStoredTheme(window.localStorage, locked, normalizedDefaultMode);
+			const nextMode = coerceThemeMode(storedMode, allowedModes, normalizedDefaultMode);
+			const nextSpec = presetTheme(locked);
+			setThemeState((prev) => themeEqual(prev, nextSpec) ? prev : nextSpec);
+			setPresetShadow((prev) => prev === locked ? prev : locked);
+			setModeState((prev) => prev === nextMode ? prev : nextMode);
+			return;
+		}
+		const next = readStoredSpec(defaultPreset, defaultMode, { migrateLegacy: true });
+		const nextMode = coerceThemeMode(next.mode, allowedModes, normalizedDefaultMode);
+		setThemeState((prev) => themeEqual(prev, next.spec) ? prev : next.spec);
+		setPresetShadow((prev) => prev === next.presetShadow ? prev : next.presetShadow);
+		setModeState((prev) => prev === nextMode ? prev : nextMode);
+	}, [
+		allowedModes,
+		isControlled,
+		isLocked,
+		lockedPreset,
+		normalizedDefaultMode
+	]);
+	useEffect(() => {
+		if (isControlled) return;
+		function handleStorage(event) {
+			if (event.storageArea && event.storageArea !== window.localStorage) return;
+			if (event.key != null && !THEME_STORAGE_KEYS.has(event.key)) return;
+			if (isLocked) {
+				const locked = lockedPreset !== null && lockedPreset !== void 0 ? lockedPreset : defaultPreset;
+				const { mode: storedMode } = readStoredTheme(window.localStorage, locked, normalizedDefaultMode);
+				const nextMode = coerceThemeMode(storedMode, allowedModes, normalizedDefaultMode);
+				const nextSpec = presetTheme(locked);
+				setThemeState((prev) => themeEqual(prev, nextSpec) ? prev : nextSpec);
+				setPresetShadow((prev) => prev === locked ? prev : locked);
+				setModeState((prev) => prev === nextMode ? prev : nextMode);
+				return;
+			}
+			const next = readStoredSpec(defaultPreset, defaultMode, { migrateLegacy: event.key === LEGACY_THEME_STORAGE_KEY });
+			const nextMode = coerceThemeMode(next.mode, allowedModes, normalizedDefaultMode);
+			setThemeState((prev) => themeEqual(prev, next.spec) ? prev : next.spec);
+			setPresetShadow((prev) => prev === next.presetShadow ? prev : next.presetShadow);
+			setModeState((prev) => prev === nextMode ? prev : nextMode);
+		}
+		window.addEventListener("storage", handleStorage);
+		return () => window.removeEventListener("storage", handleStorage);
+	}, [
+		allowedModes,
+		isControlled,
+		isLocked,
+		defaultMode,
+		defaultPreset,
+		lockedPreset,
+		normalizedDefaultMode
+	]);
+	const systemDark = useSyncExternalStore(subscribeSystemDark, getSystemDark, () => false);
+	const stackTop = stack.length > 0 ? stack[stack.length - 1] : null;
+	const effectiveStackTop = allowThemePromotion ? stackTop : null;
+	const isPromoted = effectiveStackTop !== null;
+	const effectiveSpec = (_effectiveStackTop$sp = effectiveStackTop === null || effectiveStackTop === void 0 ? void 0 : effectiveStackTop.spec) !== null && _effectiveStackTop$sp !== void 0 ? _effectiveStackTop$sp : theme;
+	const forceLight = isForceLightSpec(effectiveSpec);
+	const resolvedMode = computeResolvedMode(forceLight, mode, systemDark);
+	const compoundId = getCompoundIdForSpec(effectiveSpec, resolvedMode, forceLight);
+	const [hydrated, setHydrated] = useState(false);
+	useEffect(() => {
+		setHydrated(true);
+	}, []);
+	useEffect(() => {
+		if (!hydrated) return;
+		if (document.documentElement.getAttribute("data-theme") !== compoundId) document.documentElement.setAttribute("data-theme", compoundId);
+	}, [compoundId, hydrated]);
+	useEffect(() => {
+		if (isPresetSpec(effectiveSpec)) {
+			removeGlobalStyle();
+			return;
+		}
+		const tokens = computeGeneratedTokens(effectiveSpec);
+		if (!tokens) {
+			removeGlobalStyle();
+			return;
+		}
+		upsertGlobalStyle(serializeGeneratedTheme(tokens));
+		if (!isControlled && !isPromoted && effectiveSpec === theme) try {
+			window.localStorage.setItem(THEME_TOKENS_STORAGE_KEY, JSON.stringify(buildTokenCache(tokens)));
+		} catch (_unused) {}
+	}, [
+		effectiveSpec,
+		theme,
+		isControlled,
+		isPromoted
+	]);
+	const setTheme = useCallback((next) => {
+		if (isLocked) {
+			if (process.env.NODE_ENV !== "production") console.warn("[OptThemeProvider] setTheme called while lockedPreset is set — ignoring.");
+			return;
+		}
+		if (isControlled) {
+			if (process.env.NODE_ENV !== "production") console.warn("[OptThemeProvider] setTheme called while controlledTheme is set — ignoring.");
+			return;
+		}
+		setThemeState(next);
+		if (isPresetSpec(next)) setPresetShadow(next.preset);
+		try {
+			persistSpec(next);
+		} catch (_unused2) {}
+	}, [isControlled, isLocked]);
+	const setPreset = useCallback((p) => {
+		setTheme(presetTheme(p));
+	}, [setTheme]);
+	const setMode = useCallback((m) => {
+		const nextMode = coerceThemeMode(m, allowedModes, normalizedDefaultMode);
+		setModeState(nextMode);
+		if (!isControlled) try {
+			window.localStorage.setItem(THEME_MODE_STORAGE_KEY, nextMode);
+		} catch (_unused3) {}
+	}, [
+		allowedModes,
+		isControlled,
+		normalizedDefaultMode
+	]);
+	const controller = useMemo(() => ({
+		pushTheme(id, spec) {
+			if (!allowThemePromotion) return;
+			setStack((prev) => {
+				return [...prev.filter((entry) => entry.id !== id), {
+					id,
+					spec
+				}];
+			});
+		},
+		popTheme(id) {
+			if (!allowThemePromotion) return;
+			setStack((prev) => prev.filter((entry) => entry.id !== id));
+		}
+	}), [allowThemePromotion]);
+	const value = useMemo(() => ({
+		theme: effectiveSpec,
+		setTheme,
+		preset: presetShadow,
+		setPreset,
+		mode,
+		setMode,
+		resolvedMode,
+		isControlled,
+		isGenerated: !isPresetSpec(effectiveSpec),
+		isPromoted
+	}), [
+		effectiveSpec,
+		setTheme,
+		presetShadow,
+		setPreset,
+		mode,
+		setMode,
+		resolvedMode,
+		isControlled,
+		isPromoted
+	]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(OptThemeControllerContext.Provider, {
+			value: controller,
+			children
+		})
+	});
+}
+/** Provides opt theme. */
+function useOptTheme() {
+	const ctx = useContext(ThemeContext);
+	if (!ctx) throw new Error("useOptTheme must be used within OptThemeProvider");
+	return ctx;
+}
+/** Reads opt theme context when present without requiring a provider. */
+function useOptionalOptTheme() {
+	return useContext(ThemeContext);
+}
+function computeResolvedMode(forceLight, mode, systemDark) {
+	if (forceLight) return "light";
+	if (mode === "system") return systemDark ? "dark" : "light";
+	return mode;
+}
+function themeEqual(a, b) {
+	if (a === b) return true;
+	if (a.kind !== b.kind) return false;
+	if (a.kind === "preset" && b.kind === "preset") return a.preset === b.preset && overridesEqual(a.overrides, b.overrides);
+	if (a.kind === "generated" && b.kind === "generated") return a.id === b.id && a.label === b.label && a.forceLightOnly === b.forceLightOnly && JSON.stringify(a.palette) === JSON.stringify(b.palette) && overridesEqual(a.overrides, b.overrides);
+	if (a.kind === "descriptor" && b.kind === "descriptor") return a.descriptor === b.descriptor && overridesEqual(a.overrides, b.overrides);
+	return false;
+}
+function overridesEqual(a, b) {
+	if (a === b) return true;
+	if (!a && !b) return true;
+	if (!a || !b) return false;
+	return JSON.stringify(a) === JSON.stringify(b);
+}
+//#endregion
+//#region src/shells/sql-editor.tsx
+const defaultLabels$7 = {
+	placeholder: "SELECT * FROM events LIMIT 100",
+	runHint: "Ctrl+Enter to run",
+	runButton: "Run Query",
+	editor: "SQL 편집기"
+};
+/**
+* SqlEditor — a query is text until it runs; this is where it is text.
+*
+* Built on CodeMirror, loaded on first mount so pages that never open the
+* editor never pay for it. The editor is created once: schema, theme and
+* read-only changes are applied through compartments, so a catalogue refresh
+* or a theme switch does not throw away the cursor and the undo history.
+*
+* @example
+* ```tsx
+* const editor = useRef<SqlEditorHandle>(null);
+* <SqlEditor
+*   ref={editor}
+*   value={sql}
+*   onChange={setSql}
+*   onRun={(text, { selection }) => run(selection ?? text)}
+*   schema={{ events: ["id", "name", "created_at"] }}
+*   height="fill"
+* />
+* ```
+*/
+const SqlEditor = React.forwardRef(function SqlEditor({ value, onChange, onRun, onRunAndAdvance, placeholder, readOnly = false, height = 200, schema, completionSources, keymap: customKeymap, extensions: customExtensions, ariaLabel, autoFocus = false, showFooter, lineNumbers = true, theme = "auto", labels: customLabels, className }, ref) {
+	var _themeContext$resolve;
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$7), customLabels);
+	const fill = height === "fill";
+	const footerVisible = showFooter !== null && showFooter !== void 0 ? showFooter : Boolean(onRun);
+	const themeContext = useOptionalOptTheme();
+	const resolvedTheme = theme === "auto" ? (_themeContext$resolve = themeContext === null || themeContext === void 0 ? void 0 : themeContext.resolvedMode) !== null && _themeContext$resolve !== void 0 ? _themeContext$resolve : "dark" : theme;
+	const editorRef = React.useRef(null);
+	const viewRef = React.useRef(null);
+	const completionCompartmentRef = React.useRef(null);
+	const editableCompartmentRef = React.useRef(null);
+	const themeCompartmentRef = React.useRef(null);
+	const buildCompletionRef = React.useRef(null);
+	const buildThemeRef = React.useRef(null);
+	const latestValueRef = React.useRef(value);
+	const onChangeRef = React.useRef(onChange);
+	const onRunRef = React.useRef(onRun);
+	const onRunAndAdvanceRef = React.useRef(onRunAndAdvance);
+	const customKeymapRef = React.useRef(customKeymap);
+	const schemaRef = React.useRef(schema);
+	const completionSourcesRef = React.useRef(completionSources);
+	const autoFocusRef = React.useRef(autoFocus);
+	const themeRef = React.useRef(resolvedTheme);
+	const lineNumbersRef = React.useRef(lineNumbers);
+	latestValueRef.current = value;
+	onChangeRef.current = onChange;
+	onRunRef.current = onRun;
+	onRunAndAdvanceRef.current = onRunAndAdvance;
+	customKeymapRef.current = customKeymap;
+	schemaRef.current = schema;
+	completionSourcesRef.current = completionSources;
+	autoFocusRef.current = autoFocus;
+	themeRef.current = resolvedTheme;
+	lineNumbersRef.current = lineNumbers;
+	const autocompleteEnabled = React.useRef(schema !== void 0 || completionSources !== void 0).current;
+	const readContext = React.useCallback(() => {
+		var _view$state$selection;
+		const view = viewRef.current;
+		const main = view === null || view === void 0 || (_view$state$selection = view.state.selection) === null || _view$state$selection === void 0 ? void 0 : _view$state$selection.main;
+		if (!view || !main) return {
+			selection: null,
+			cursorOffset: 0
+		};
+		return {
+			selection: main.from === main.to ? null : view.state.doc.sliceString(main.from, main.to),
+			cursorOffset: main.head
+		};
+	}, []);
+	React.useImperativeHandle(ref, () => ({
+		focus: () => {
+			var _viewRef$current;
+			return (_viewRef$current = viewRef.current) === null || _viewRef$current === void 0 ? void 0 : _viewRef$current.focus();
+		},
+		insertText: (text) => {
+			var _view$state$selection2, _main$from, _main$to;
+			const view = viewRef.current;
+			if (!view) return;
+			const main = (_view$state$selection2 = view.state.selection) === null || _view$state$selection2 === void 0 ? void 0 : _view$state$selection2.main;
+			const from = (_main$from = main === null || main === void 0 ? void 0 : main.from) !== null && _main$from !== void 0 ? _main$from : view.state.doc.length;
+			const to = (_main$to = main === null || main === void 0 ? void 0 : main.to) !== null && _main$to !== void 0 ? _main$to : from;
+			view.dispatch({
+				changes: {
+					from,
+					to,
+					insert: text
+				},
+				selection: { anchor: from + text.length }
+			});
+			view.focus();
+		},
+		getSelection: () => readContext().selection,
+		getCursorOffset: () => readContext().cursorOffset
+	}), [readContext]);
+	React.useEffect(() => {
+		let view = null;
+		let cancelled = false;
+		async function init() {
+			var _customKeymapRef$curr;
+			const parent = editorRef.current;
+			if (!parent) return;
+			const [viewModule, { Compartment, EditorState }, langSql, { oneDark }, autocomplete, commands] = await Promise.all([
+				import("@codemirror/view"),
+				import("@codemirror/state"),
+				import("@codemirror/lang-sql"),
+				import("@codemirror/theme-one-dark"),
+				autocompleteEnabled ? import("@codemirror/autocomplete") : Promise.resolve(null),
+				import("@codemirror/commands").catch(() => null)
+			]);
+			if (cancelled || !parent.isConnected) return;
+			const { EditorView, keymap: cmKeymap, placeholder: cmPlaceholder } = viewModule;
+			const completionCompartment = new Compartment();
+			const editableCompartment = new Compartment();
+			const themeCompartment = new Compartment();
+			completionCompartmentRef.current = completionCompartment;
+			editableCompartmentRef.current = editableCompartment;
+			themeCompartmentRef.current = themeCompartment;
+			const buildCompletion = (nextSchema, nextSources) => {
+				if (!autocomplete) return [];
+				const dialect = langSql.PostgreSQL;
+				return [autocomplete.autocompletion({ override: [
+					langSql.schemaCompletionSource({
+						dialect,
+						schema: nextSchema !== null && nextSchema !== void 0 ? nextSchema : {}
+					}),
+					langSql.keywordCompletionSource(dialect),
+					...nextSources !== null && nextSources !== void 0 ? nextSources : []
+				] }), cmKeymap.of(autocomplete.completionKeymap)];
+			};
+			buildCompletionRef.current = buildCompletion;
+			const buildTheme = (mode) => mode === "dark" ? oneDark : EditorView.theme({
+				"&": {
+					backgroundColor: "var(--opt-surface)",
+					color: "var(--opt-text-primary)"
+				},
+				".cm-content": { caretColor: "var(--opt-text-primary)" },
+				".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--opt-text-primary)" },
+				".cm-gutters": {
+					backgroundColor: "var(--opt-bg-subtle)",
+					color: "var(--opt-text-tertiary)",
+					borderRight: "1px solid var(--opt-border-subtle)"
+				},
+				".cm-activeLine": { backgroundColor: "var(--opt-bg-subtle)" },
+				".cm-activeLineGutter": { backgroundColor: "var(--opt-bg-muted)" },
+				"&.cm-focused .cm-selectionBackground, ::selection": { backgroundColor: "var(--opt-accent-subtle)" },
+				".cm-selectionBackground": { backgroundColor: "var(--opt-bg-muted)" },
+				".cm-tooltip": {
+					backgroundColor: "var(--opt-surface-overlay)",
+					color: "var(--opt-text-primary)",
+					border: "1px solid var(--opt-border)"
+				},
+				".cm-tooltip-autocomplete ul li[aria-selected]": {
+					backgroundColor: "var(--opt-accent)",
+					color: "var(--opt-accent-fg)"
+				}
+			}, { dark: false });
+			buildThemeRef.current = buildTheme;
+			const runKeymap = [{
+				key: "Shift-Enter",
+				run: (target) => {
+					const handler = onRunAndAdvanceRef.current;
+					if (!handler) return false;
+					handler(target.state.doc.toString(), readContext());
+					return true;
+				}
+			}, {
+				key: "Mod-Enter",
+				run: (target) => {
+					const handler = onRunRef.current;
+					if (!handler) return false;
+					handler(target.state.doc.toString(), readContext());
+					return true;
+				}
+			}];
+			const editingKeymap = commands ? [
+				...commands.defaultKeymap,
+				...commands.historyKeymap,
+				commands.indentWithTab
+			] : [];
+			const extensions = [
+				langSql.PostgreSQL.extension,
+				completionCompartment.of(buildCompletion(schemaRef.current, completionSourcesRef.current)),
+				themeCompartment.of(buildTheme(themeRef.current)),
+				...commands ? [commands.history()] : [],
+				...lineNumbersRef.current ? [viewModule.lineNumbers(), viewModule.highlightActiveLineGutter()] : [],
+				viewModule.highlightActiveLine(),
+				cmKeymap.of([
+					...(_customKeymapRef$curr = customKeymapRef.current) !== null && _customKeymapRef$curr !== void 0 ? _customKeymapRef$curr : [],
+					...runKeymap,
+					...editingKeymap
+				]),
+				EditorView.theme({
+					"&": {
+						height: "100%",
+						fontSize: "13px"
+					},
+					"&.cm-focused": {
+						outline: "2px solid var(--opt-ring)",
+						outlineOffset: "-2px"
+					},
+					".cm-scroller": {
+						height: "100%",
+						overflow: "auto",
+						fontFamily: "var(--opt-font-mono, ui-monospace, monospace)"
+					}
+				}),
+				cmPlaceholder(placeholder !== null && placeholder !== void 0 ? placeholder : labels.placeholder),
+				EditorView.lineWrapping,
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged) onChangeRef.current(update.state.doc.toString());
+				}),
+				editableCompartment.of(EditorView.editable.of(!readOnly)),
+				EditorView.contentAttributes.of({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.editor }),
+				...customExtensions !== null && customExtensions !== void 0 ? customExtensions : []
+			];
+			view = new EditorView({
+				state: EditorState.create({
+					doc: latestValueRef.current,
+					extensions
+				}),
+				parent
+			});
+			viewRef.current = view;
+			if (autoFocusRef.current) view.focus();
+		}
+		init();
+		return () => {
+			cancelled = true;
+			view === null || view === void 0 || view.destroy();
+			if (viewRef.current === view) viewRef.current = null;
+			completionCompartmentRef.current = null;
+			editableCompartmentRef.current = null;
+			themeCompartmentRef.current = null;
+			buildCompletionRef.current = null;
+			buildThemeRef.current = null;
+		};
+	}, []);
+	React.useEffect(() => {
+		const view = viewRef.current;
+		if (view && view.state.doc.toString() !== value) view.dispatch({ changes: {
+			from: 0,
+			to: view.state.doc.length,
+			insert: value
+		} });
+	}, [value]);
+	React.useEffect(() => {
+		const view = viewRef.current;
+		const compartment = completionCompartmentRef.current;
+		const build = buildCompletionRef.current;
+		if (!view || !compartment || !build) return;
+		view.dispatch({ effects: compartment.reconfigure(build(schema, completionSources)) });
+	}, [schema, completionSources]);
+	React.useEffect(() => {
+		const view = viewRef.current;
+		const compartment = themeCompartmentRef.current;
+		const build = buildThemeRef.current;
+		if (!view || !compartment || !build) return;
+		view.dispatch({ effects: compartment.reconfigure(build(resolvedTheme)) });
+	}, [resolvedTheme]);
+	React.useEffect(() => {
+		const view = viewRef.current;
+		const compartment = editableCompartmentRef.current;
+		if (!view || !compartment) return;
+		let cancelled = false;
+		import("@codemirror/view").then(({ EditorView }) => {
+			if (cancelled || viewRef.current !== view) return;
+			view.dispatch({ effects: compartment.reconfigure(EditorView.editable.of(!readOnly)) });
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [readOnly]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("gap-element flex flex-col", fill && "h-full min-h-0", className),
+		"data-opt-id": "RSGKV",
+		"data-opt-slug": "sql-editor.SqlEditor",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: editorRef,
+			className: cn("border-border overflow-hidden rounded-lg border", fill && "min-h-0 flex-1"),
+			style: fill ? void 0 : { height }
+		}), footerVisible && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-none items-center justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-text-tertiary text-xs",
+				children: labels.runHint
+			}), onRun && /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				size: "sm",
+				onClick: () => onRun(value, readContext()),
+				children: labels.runButton
+			})]
+		})]
+	});
+});
+SqlEditor.displayName = "SqlEditor";
+//#endregion
+//#region src/shells/event-timeline.tsx
+const defaultLabels$6 = {
+	emptyTitle: "No events yet",
+	emptyDescription: "Events appear here as soon as they arrive.",
+	expand: "Show properties",
+	collapse: "Hide properties",
+	loadMore: "Load more",
+	gap: (duration) => `+${duration}`,
+	properties: "Event properties",
+	openGroup: (title) => `Open ${title}`
+};
+/**
+* A line of text and the time it happened have to read as one row. Past about
+* this width the eye stops connecting them, so the rail is capped rather than
+* stretched to whatever the page allows. Override with `className` where a
+* layout genuinely needs the full width.
+*/
+const TIMELINE_WIDTH = "max-w-5xl";
+const toneDot = {
+	default: "bg-text-tertiary",
+	accent: "bg-accent",
+	success: "bg-success",
+	warning: "bg-warning",
+	danger: "bg-danger"
+};
+function toMillis(timestamp) {
+	const parsed = Date.parse(timestamp);
+	return Number.isNaN(parsed) ? 0 : parsed;
+}
+function stringifyValue(value) {
+	if (value === null || value === void 0) return "—";
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "boolean") return String(value);
+	return JSON.stringify(value);
+}
+function PropertyTable({ properties, ariaLabel }) {
+	const entries = Object.entries(properties);
+	if (entries.length === 0) return null;
+	return /* @__PURE__ */ jsx("dl", {
+		className: cn(OPT_BORDER, "gap-element bg-bg-subtle mt-2 grid grid-cols-1 rounded-lg p-2.5 sm:grid-cols-2"),
+		"aria-label": ariaLabel,
+		children: entries.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: cn(OPT_TEXT_TERTIARY, "truncate text-xs"),
+				children: key
+			}), /* @__PURE__ */ jsx("dd", {
 				className: cn(OPT_TEXT_PRIMARY, "truncate text-xs"),
 				children: stringifyValue(value)
 			})]
@@ -2654,7 +6528,7 @@ function GroupBlock({ group, showGaps, order, minGapMs, locale, labels, onItemSe
 * ```
 */
 function EventTimeline({ items, groups, showGaps = true, order = "desc", minGapMs = 1e3, loading = false, hasMore = false, onLoadMore, onItemSelect, locale = OPT_UI_DEFAULT_LOCALE, labels: customLabels, className }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$7), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$6), customLabels);
 	const flatItems = items !== null && items !== void 0 ? items : [];
 	const hasContent = groups ? groups.length > 0 : flatItems.length > 0;
 	if (loading) return /* @__PURE__ */ jsx("div", {
@@ -2714,7 +6588,7 @@ function EventTimeline({ items, groups, showGaps = true, order = "desc", minGapM
 EventTimeline.displayName = "EventTimeline";
 //#endregion
 //#region src/shells/score-breakdown.tsx
-const defaultLabels$6 = {
+const defaultLabels$5 = {
 	title: "Score",
 	outOf: (max) => `out of ${max}`,
 	weight: (percent) => `${percent} of total`,
@@ -2746,7 +6620,7 @@ function resolveBand(score, bands) {
 */
 function ScoreBreakdown({ score, max = 100, axes, bands = [], formula, loading = false, labels: customLabels, className }) {
 	var _band$tone;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$6), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$5), customLabels);
 	const band = resolveBand(score, bands);
 	const tone = (_band$tone = band === null || band === void 0 ? void 0 : band.tone) !== null && _band$tone !== void 0 ? _band$tone : "default";
 	if (loading) return /* @__PURE__ */ jsxs("section", {
@@ -2828,140 +6702,6 @@ function ScoreBreakdown({ score, max = 100, axes, bands = [], formula, loading =
 }
 ScoreBreakdown.displayName = "ScoreBreakdown";
 //#endregion
-//#region src/shells/flyout.tsx
-const defaultLabels$5 = { close: "Close panel" };
-const sizeClass = {
-	sm: "sm:w-[22rem]",
-	md: "sm:w-[30rem]",
-	lg: "sm:w-[42rem]"
-};
-/**
-* Flyout — a detail panel that does not take the page away.
-*
-* Navigating from a list to a record and back costs the reader their scroll
-* position, their filters and their place in the scan. A flyout keeps the list
-* on screen and shows the record beside it, so comparing three rows is three
-* clicks rather than six navigations.
-*
-* Deliberately **not** a modal: no focus trap, no `aria-modal`, no inert page.
-* The list behind it is still the point, and a reader who tabs out of the panel
-* to change a filter is doing the expected thing. Escape closes; focus returns
-* to whatever opened it.
-*
-* @example
-* ```tsx
-* <Flyout open={Boolean(selected)} onClose={clear} title={selected?.name}>
-*   <DescriptionList items={fields} />
-* </Flyout>
-* ```
-*/
-function Flyout({ open, onClose, title, description, type = "overlay", side = "right", size = "md", actions, footer, scrim = false, closeOnOutsideClick = true, hideCloseButton = false, labels: customLabels, className, children }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$5), customLabels);
-	const panelRef = useRef(null);
-	const openerRef = useRef(null);
-	useEffect(() => {
-		var _panelRef$current;
-		if (!open) return;
-		openerRef.current = document.activeElement;
-		(_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 || _panelRef$current.focus({ preventScroll: true });
-		return () => {
-			var _openerRef$current, _openerRef$current$fo;
-			(_openerRef$current = openerRef.current) === null || _openerRef$current === void 0 || (_openerRef$current$fo = _openerRef$current.focus) === null || _openerRef$current$fo === void 0 || _openerRef$current$fo.call(_openerRef$current, { preventScroll: true });
-		};
-	}, [open]);
-	useEffect(() => {
-		if (!open) return;
-		const handleKeyDown = (event) => {
-			if (event.key === "Escape") {
-				event.stopPropagation();
-				onClose();
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [open, onClose]);
-	useEffect(() => {
-		if (!open || !closeOnOutsideClick || type !== "overlay") return;
-		const handlePointerDown = (event) => {
-			const panel = panelRef.current;
-			if (panel && !panel.contains(event.target)) onClose();
-		};
-		const timer = window.setTimeout(() => {
-			document.addEventListener("pointerdown", handlePointerDown);
-		}, 0);
-		return () => {
-			window.clearTimeout(timer);
-			document.removeEventListener("pointerdown", handlePointerDown);
-		};
-	}, [
-		open,
-		closeOnOutsideClick,
-		type,
-		onClose
-	]);
-	const handleClose = useCallback(() => onClose(), [onClose]);
-	if (!open) return null;
-	const header = (title || actions || !hideCloseButton) && /* @__PURE__ */ jsxs("header", {
-		className: cn("border-border-subtle flex items-start gap-2 border-b px-4 py-3"),
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 grow flex-col gap-0.5",
-				children: [title && /* @__PURE__ */ jsx("h2", {
-					className: cn("text-text-primary", "truncate text-base font-semibold"),
-					children: title
-				}), description && /* @__PURE__ */ jsx("p", {
-					className: cn("text-text-secondary", "truncate text-xs"),
-					children: description
-				})]
-			}),
-			actions,
-			!hideCloseButton && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: handleClose,
-				"aria-label": labels.close,
-				className: cn("outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", "text-text-tertiary", "hover:text-text-primary shrink-0 rounded p-1 transition-colors"),
-				children: /* @__PURE__ */ jsx(X, {
-					className: "size-4",
-					"aria-hidden": "true"
-				})
-			})
-		]
-	});
-	const panel = /* @__PURE__ */ jsxs("aside", {
-		ref: panelRef,
-		role: "dialog",
-		"aria-modal": false,
-		"aria-label": typeof title === "string" ? title : void 0,
-		tabIndex: -1,
-		className: cn(OPT_FOCUS_VISIBLE, "flex min-h-0 flex-col", type === "overlay" && [
-			"rounded-xl bg-surface-raised shadow-md",
-			"fixed inset-y-0 z-40 w-full",
-			sizeClass[size],
-			side === "right" ? "right-0 border-l" : "left-0 border-r",
-			"border-border"
-		], type === "inline" && ["border border-border", "rounded-xl bg-surface"], className),
-		"data-opt-id": "85XVE",
-		"data-opt-slug": "flyout.Flyout",
-		children: [
-			header,
-			/* @__PURE__ */ jsx("div", {
-				className: "min-h-0 grow overflow-y-auto px-4 py-4",
-				children
-			}),
-			footer && /* @__PURE__ */ jsx("footer", {
-				className: "border-border-subtle border-t px-4 py-3",
-				children: footer
-			})
-		]
-	});
-	if (type === "inline") return panel;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [scrim && /* @__PURE__ */ jsx("div", {
-		className: "bg-scrim fixed inset-0 z-30",
-		"aria-hidden": "true"
-	}), panel] });
-}
-Flyout.displayName = "Flyout";
-//#endregion
 //#region src/lib/query/query-ast.ts
 const EMPTY_QUERY = { clauses: [] };
 /** Whether a query constrains anything at all. */
@@ -3796,7 +7536,7 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 									}),
 									/* @__PURE__ */ jsxs(SelectRoot$1, {
 										value: quickUnit,
-										setValue: (next) => setQuickUnit(selectValue(next)),
+										onValueChange: (next) => setQuickUnit(selectValue(next)),
 										children: [/* @__PURE__ */ jsx(SelectTrigger$1, {
 											minWidth: 110,
 											"aria-label": labels.quickSelect
@@ -3856,7 +7596,7 @@ function TimeRangeControl({ value, onChange, presets, recentRanges, timeZone, lo
 								children: labels.autoRefresh
 							}), /* @__PURE__ */ jsxs(SelectRoot$1, {
 								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) => {
+								onValueChange: (next) => {
 									const interval = Number(selectValue(next));
 									onRefreshChange({
 										interval,
@@ -4835,4 +8575,4 @@ function FieldValues({ values, loading, total, sampledRows, onFilter, labels })
 	});
 }
 //#endregion
-export { CommandGroup$1 as $, ToastProvider as A, FaqAccordion as B, Flyout as C, KeyValueEditor as D, WorkflowCanvas as E, BranchSelect as F, StatusSelect as G, EditorToolbar as H, EnvPanel as I, CommandPaletteTrigger as J, SearchCombobox as K, ProjectSwitcher as L, useToast as M, DataTable as N, FailureList as O, DomainTable as P, CommandEmpty$1 as Q, DeploymentTimeline as R, withoutField as S, EventTimeline as T, SidebarNav as U, ContentTabs as V, AppMenubar as W, Command as X, CommandPalette as Y, CommandDialog as Z, fieldValues as _, TimeRangeControl as a, removeClause as b, describeClause as c, quoteValue as d, CommandInput$1 as et, parseQuery as f, applyCellAction as g, addClause as h, DEFAULT_TIME_PRESETS as i, CommandShortcut as it, toast as j, NotificationToast as k, formatClause as l, EMPTY_QUERY as m, LogTable as n, CommandList$1 as nt, useAutoRefresh as o, parseQueryWithDiagnostics as p, DashboardGrid as q, TimeSeriesPanel as r, CommandSeparator$1 as rt, QueryBar as s, FieldSidebar as t, CommandItem$1 as tt, formatQuery as u, isEmptyQuery as v, ScoreBreakdown as w, withFieldValue as x, queryFields as y, SettingsForm as z };
+export { generatedTheme as $, Command as $t, useOptThemeController as A, KeyValueEditor as At, THEME_SPEC_STORAGE_KEY as B, ProjectSwitcher as Bt, ScoreBreakdown as C, QueryOutputPane as Ct, useOptTheme as D, formatQueryCell as Dt, OptThemeProvider as E, QueryResultsTable as Et, getCompoundTheme as F, useToast as Ft, isForceLightSpec as G, EditorToolbar as Gt, buildTokenCache as H, SettingsForm as Ht, readStoredTheme as I, DataTable as It, safeParseStoredTokens as J, StatusSelect as Jt, resolveDescriptor as K, SidebarNav as Kt, resolveThemeMode as L, DomainTable as Lt, FORCE_LIGHT_PRESETS as M, NotificationToast as Mt, coerceThemeMode as N, ToastProvider as Nt, useOptionalOptTheme as O, Flyout as Ot, createThemeBootScript as P, toast as Pt, defineThemeOverrides as Q, CommandPalette as Qt, GENERATED_THEME_ID_DEFAULT as R, BranchSelect as Rt, withoutField as S, numericResultColumns as St, SqlEditor as T, SchemaTree as Tt, computeGeneratedTokens as U, FaqAccordion as Ut, THEME_TOKENS_STORAGE_KEY as V, DeploymentTimeline as Vt, getCompoundIdForSpec as W, ContentTabs as Wt, serializeThemeRule as X, DashboardGrid as Xt, serializeGeneratedTheme as Y, SearchCombobox as Yt, serializeTokenBody as Z, CommandPaletteTrigger as Zt, fieldValues as _, VALUELESS_OPERATORS as _t, TimeRangeControl as a, CommandList$1 as an, THEME_PRESET_IDS as at, removeClause as b, QueryResultChart as bt, describeClause as c, SegmentedControl as cn, isThemePresetId as ct, quoteValue as d, SaveQueryDialog as dt, CommandDialog as en, isDescriptorSpec as et, parseQuery as f, QueryHistoryList as ft, applyCellAction as g, QueryFiltersMenu as gt, addClause as h, EMPTY_QUERY_FILTERS as ht, DEFAULT_TIME_PRESETS as i, CommandItem$1 as in, FORCE_LIGHT_PRESET_IDS as it, ALL_COMPOUND_THEMES as j, FailureList as jt, OptThemeControllerContext as k, WorkflowCanvas as kt, formatClause as l, Callout as ln, QueryWorkspace as lt, EMPTY_QUERY as m, isValidQueryVariableName as mt, LogTable as n, CommandGroup$1 as nn, isPresetSpec as nt, useAutoRefresh as o, CommandSeparator$1 as on, THEME_REGISTRY as ot, parseQueryWithDiagnostics as p, QueryVariablesMenu as pt, safeParseStoredSpec as q, AppMenubar as qt, TimeSeriesPanel as r, CommandInput$1 as rn, presetTheme as rt, QueryBar as s, CommandShortcut as sn, getThemeDescriptor as st, FieldSidebar as t, CommandEmpty$1 as tn, isGeneratedSpec as tt, formatQuery as u, useMediaQuery as ut, isEmptyQuery as v, countActiveQueryFilters as vt, EventTimeline as w, QueryToolbar as wt, withFieldValue as x, defaultQueryChartConfig as xt, queryFields as y, hasActiveQueryFilters as yt, GLOBAL_THEME_STYLE_ID as z, EnvPanel as zt };