@reopt-ai/opt-ui 1.10.0 → 1.11.0

package/dist/{field-sidebar-BXjvV7Cz.js → field-sidebar-BXl5RJ3q.js}

@@ -1,5 +1,5 @@
 "use client";
-import { $ as ToolbarButton$1, $t as Alert, A as FormSelectItem, At as DialogHeading$1, B as useFormStore, Bn as OPT_TEXT_LABEL, Bt as TabPanel$1, Cn as OPT_DIVIDER, Dn as OPT_DOT_YELLOW, En as OPT_DOT_RED, F as FormSwitch$1, Fn as OPT_SURFACE_POPOVER, Ft as SelectPopover$1, Gn as _objectSpread2, Gt as Composite, Hn as OPT_TEXT_SECONDARY, Ht as DisclosureContent$1, In as OPT_TABLE_ROW_ACTIVE, It as SelectRoot$1, J as PopoverContent$1, Jn as cn, Jt as CompositeRow, Kn as _objectWithoutProperties, Kt as CompositeItem, L as FormTextarea, Ln as OPT_TD, Lt as SelectTrigger$1, Mt as DialogRoot$1, Nn as OPT_ITEM_BASE, Nt as SelectItem$1, O as FormRoot$1, On as OPT_FOCUS, P as FormSubmit$1, Pn as OPT_SURFACE, Pt as SelectLabel$1, Rn as OPT_TD_MUTED, Rt as Tab$1, Sn as OPT_DISCLOSURE_TRIGGER, St as ComboboxRoot$1, T as FormRadioGroup$1, Tn as OPT_DOT_GREEN, Tt as DialogDescription$1, U as TagInput, Un as OPT_TEXT_TERTIARY, Ut as DisclosureRoot$1, Vn as OPT_TEXT_PRIMARY, Vt as TabsRoot$1, Wn as OPT_TH, Wt as DisclosureTrigger$1, X as PopoverTrigger$1, Y as PopoverRoot$1, Zt as Input, _n as OPT_BADGE_NEUTRAL, at as TooltipProvider$1, b as FormLabel$1, bn as OPT_BORDER, bt as ComboboxItem$1, ct as MenuItemCheckbox$1, dt as MenuRoot$1, en as Spinner, et as ToolbarContainer$1, fn as OPT_ACTIVE_ITEM, ft as MenuSeparator$1, gn as OPT_BADGE_GREEN, gt as ComboboxEmpty, hn as OPT_BADGE_BLUE, ht as MenubarRoot$1, i as FieldToken, it as TooltipAnchor$1, j as FormSelectPopover, jn as OPT_INPUT, jt as DialogPanel$1, k as FormSelect, kn as OPT_FOCUS_VISIBLE, l as FormCheckbox$1, lt as MenuItemRadio$1, m as FormError$1, mn as OPT_ANIMATE_ENTER_EXIT, mt as MenubarContainer$1, n as Highlight, nn as EmptyState, nt as ToolbarSeparator$1, o as Pagination, ot as MenuButtonArrow$1, pt as MenuTrigger$1, qn as Kbd, qt as CompositeProvider, rn as Button, rt as Tooltip$1, s as Checkbox, sn as StatCard, st as MenuItem$1, t as TextTruncate, tn as Badge, tt as ToolbarRoot$1, ut as MenuPopover$1, vn as OPT_BADGE_RED, w as FormRadio$1, xn as OPT_DISCLOSURE_CONTENT, xt as ComboboxPopover$1, y as FormInput$1, yn as OPT_BADGE_YELLOW, yt as ComboboxInput$1, zt as TabList$1 } from "./text-truncate-j6X3z7Pv.js";
+import { $ as PopoverContent$1, $n as OPT_TEXT_PRIMARY, $t as CompositeRow, A as FormRadioGroup$1, An as OPT_BADGE_YELLOW, At as DialogDescription$1, B as FormSwitch$1, Bn as OPT_FOCUS_VISIBLE, Bt as SelectPopover$1, Cn as OPT_ACTIVE_ITEM, Dn as OPT_BADGE_GREEN, Dt as ComboboxRoot$1, En as OPT_BADGE_BLUE, Et as ComboboxPopover$1, F as FormSelectItem, Ft as DialogHeading$1, G as useFormStore, Gn as OPT_SURFACE, Gt as TabPanel$1, H as FormTextarea, Hn as OPT_INPUT, Ht as SelectTrigger$1, I as FormSelectPopover, In as OPT_DOT_GREEN, It as DialogPanel$1, J as TagInput, Jn as OPT_TABLE_ROW_ACTIVE, Jt as DisclosureRoot$1, Kn as OPT_SURFACE_POPOVER, Kt as TabsRoot$1, Ln as OPT_DOT_RED, Lt as DialogRoot$1, Mn as OPT_DISCLOSURE_CONTENT, N as FormRoot$1, Nn as OPT_DISCLOSURE_TRIGGER, On as OPT_BADGE_NEUTRAL, P as FormSelect, Pn as OPT_DIVIDER, Qn as OPT_TEXT_LABEL, Qt as CompositeProvider, Rn as OPT_DOT_YELLOW, Rt as SelectItem$1, T as FormLabel$1, Tn as OPT_ANIMATE_ENTER_EXIT, Tt as ComboboxItem$1, Ut as Tab$1, Vt as SelectRoot$1, Wn as OPT_ITEM_BASE, Wt as TabList$1, Xn as OPT_TD_MUTED, Xt as Composite, Yn as OPT_TD, Yt as DisclosureTrigger$1, Zt as CompositeItem, _t as MenuSeparator$1, an as Alert, ar as Kbd, at as ToolbarContainer$1, bt as MenubarRoot$1, cn as EmptyState, ct as Tooltip$1, dt as MenuButtonArrow$1, er as OPT_TEXT_SECONDARY, et as PopoverRoot$1, ft as MenuItem$1, gt as MenuRoot$1, ht as MenuPopover$1, i as FieldToken, ir as _objectWithoutProperties, it as ToolbarButton$1, jn as OPT_BORDER, k as FormRadio$1, kn as OPT_BADGE_RED, l as OPT_UI_DEFAULT_LOCALE, ln as Button, lt as TooltipAnchor$1, m as FormCheckbox$1, mn as Skeleton, mt as MenuItemRadio$1, n as Highlight, nr as OPT_TH, o as Pagination, on as Spinner, or as cn, ot as ToolbarRoot$1, p as formatOptTime, pn as StatCard, pt as MenuItemCheckbox$1, qt as DisclosureContent$1, rn as Input, rr as _objectSpread2, s as Checkbox, sn as Badge, st as ToolbarSeparator$1, t as TextTruncate, tn as Meter$1, tr as OPT_TEXT_TERTIARY, tt as PopoverTrigger$1, ut as TooltipProvider$1, vt as MenuTrigger$1, w as FormInput$1, wt as ComboboxInput$1, xt as ComboboxEmpty, y as FormError$1, yt as MenubarContainer$1, z as FormSubmit$1, zn as OPT_FOCUS, zt as SelectLabel$1 } from "./text-truncate-C17HHCR-.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";
@@ -253,7 +253,7 @@ function CommandPaletteTrigger({ commands, onSelect, labels }) {
 }
 //#endregion
 //#region src/shells/dashboard-grid.tsx
-const defaultLabels$18 = { ariaLabel: "대시보드 통계" };
+const defaultLabels$21 = { ariaLabel: "대시보드 통계" };
 const MIN_DASHBOARD_COLUMNS = 1;
 const MAX_DASHBOARD_COLUMNS = 12;
 function normalizeDashboardColumns(columns) {
@@ -262,7 +262,7 @@ function normalizeDashboardColumns(columns) {
 }
 /** Renders the dashboard grid component. */
 function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$18), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$21), customLabels);
 	const columnCount = normalizeDashboardColumns(columns);
 	const rowStyle = { "--opt-dashboard-grid-columns": `repeat(${columnCount}, minmax(0, 1fr))` };
 	const rows = [];
@@ -290,13 +290,13 @@ function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/search-combobox.tsx
-const defaultLabels$17 = {
+const defaultLabels$20 = {
 	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$17), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$20), customLabels);
 	const inputId = useId();
 	const [query, setQuery] = useState("");
 	const [asyncResults, setAsyncResults] = useState([]);
@@ -394,14 +394,14 @@ function SearchCombobox({ items, placeholder = "검색...", label = "검색", on
 }
 //#endregion
 //#region src/shells/status-select.tsx
-const defaultLabels$16 = {
+const defaultLabels$19 = {
 	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$16), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$19), 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 +468,7 @@ function StatusSelect({ options, value: controlledValue, onChange, label, labels
 }
 //#endregion
 //#region src/shells/app-menubar.tsx
-const defaultLabels$15 = { ariaLabel: "Application menu" };
+const defaultLabels$18 = { 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 +512,7 @@ function MenuSection({ menu }) {
 }
 /** Renders the app menubar component. */
 function AppMenubar({ menus, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$15), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$18), customLabels);
 	if (menus.length === 0) return null;
 	return /* @__PURE__ */ jsx(MenubarRoot$1, {
 		"data-opt-id": "BGKHW",
@@ -551,10 +551,10 @@ const sectionStyles = {
 	Templates: "text-text-tertiary"
 };
 const defaultSectionStyle = "text-text-secondary";
-const defaultLabels$14 = { ariaLabel: "문서 네비게이션" };
+const defaultLabels$17 = { ariaLabel: "문서 네비게이션" };
 /** Renders the sidebar nav component. */
 function SidebarNav({ items, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$14), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$17), customLabels);
 	const pathname = usePathname();
 	const activeItem = items.find((item) => item.href === pathname);
 	const [activeId, setActiveId] = useState(activeItem ? domId(activeItem.id) : void 0);
@@ -602,7 +602,7 @@ function SidebarNav({ items, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/editor-toolbar.tsx
-const defaultLabels$13 = { ariaLabel: "텍스트 편집기 툴바" };
+const defaultLabels$16 = { ariaLabel: "텍스트 편집기 툴바" };
 function ToolbarButtonWithTooltip({ button, active, onAction }) {
 	return /* @__PURE__ */ jsxs(TooltipProvider$1, { 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"}`,
@@ -612,7 +612,7 @@ function ToolbarButtonWithTooltip({ button, active, onAction }) {
 }
 /** Renders the editor toolbar component. */
 function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$13), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$16), customLabels);
 	const groups = [];
 	let current = [];
 	for (const btn of buttons) {
@@ -645,14 +645,14 @@ function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLa
 }
 //#endregion
 //#region src/shells/content-tabs.tsx
-const defaultLabels$12 = {
+const defaultLabels$15 = {
 	ariaLabel: "콘텐츠 탭",
 	emptyMessage: "표시할 탭이 없습니다."
 };
 /** Renders the content tabs component. */
 function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
 	var _tabs$, _tabs$find;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$12), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$15), 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 +684,13 @@ function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/faq-accordion.tsx
-const defaultLabels$11 = {
+const defaultLabels$14 = {
 	ariaLabel: "자주 묻는 질문",
 	emptyMessage: "등록된 FAQ가 없습니다."
 };
 /** Renders the faq accordion component. */
 function FaqAccordion({ items, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$11), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$14), customLabels);
 	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: "text-text-secondary text-sm",
 		"data-opt-id": "QRBHV",
@@ -730,14 +730,14 @@ function FaqAccordion({ items, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/settings-form.tsx
-const defaultLabels$10 = {
+const defaultLabels$13 = {
 	formAriaLabel: "설정 폼",
 	submitButton: "저장",
 	successMessage: "설정이 저장되었습니다."
 };
 /** Renders the settings form component. */
 function SettingsForm({ fields, onSubmit, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$10), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$13), customLabels);
 	const [submitted, setSubmitted] = useState(false);
 	const defaultValues = {};
 	for (const field of fields) {
@@ -1063,7 +1063,7 @@ function ProjectSwitcher({ projects, value, onChange, placeholder = "프로젝
 ProjectSwitcher.displayName = "ProjectSwitcher";
 //#endregion
 //#region src/shells/env-panel.tsx
-const defaultLabels$9 = {
+const defaultLabels$12 = {
 	varCount: (count) => `${count}개 변수`,
 	envVarsLabel: (env) => `${env} 환경 변수`,
 	secretBadge: "secret"
@@ -1075,7 +1075,7 @@ const envDot = {
 };
 /** Renders the env panel component. */
 function EnvPanel({ groups, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$9), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$12), customLabels);
 	return /* @__PURE__ */ jsx("div", {
 		className: `rounded-lg ${OPT_BORDER} divide-y ${OPT_DIVIDER} bg-surface`,
 		"data-opt-id": "ZBDWK",
@@ -1148,7 +1148,7 @@ function EnvPanel({ groups, labels: customLabels }) {
 }
 //#endregion
 //#region src/shells/branch-select.tsx
-const defaultLabels$8 = {
+const defaultLabels$11 = {
 	selectLabel: "브랜치",
 	emptySelectionLabel: "선택...",
 	emptyMessage: "사용 가능한 브랜치가 없습니다.",
@@ -1157,7 +1157,7 @@ const defaultLabels$8 = {
 /** 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$8), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$11), 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 +1266,7 @@ function BranchSelect({ branches, value: controlledValue, onChange, label, label
 BranchSelect.displayName = "BranchSelect";
 //#endregion
 //#region src/shells/domain-table.tsx
-const defaultLabels$7 = {
+const defaultLabels$10 = {
 	domain: "Domain",
 	status: "Status",
 	ssl: "SSL",
@@ -1296,7 +1296,7 @@ const sslLabel = {
 };
 /** Renders the domain table component. */
 function DomainTable({ domains, title = "도메인", labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$7), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$10), customLabels);
 	if (domains.length === 0) return /* @__PURE__ */ jsxs("div", {
 		className: "gap-group flex flex-col",
 		"data-opt-id": "A7SRM",
@@ -1902,7 +1902,7 @@ function NotificationToast({ toast, onDismiss, defaultDuration = 5e3 }) {
 }
 //#endregion
 //#region src/shells/failure-list.tsx
-const defaultLabels$6 = {
+const defaultLabels$9 = {
 	title: "최근 실패",
 	emptyMessage: "실패 항목이 없습니다",
 	moreItems: "{count}개 더 보기",
@@ -2001,20 +2001,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$6.timeAgo.justNow,
-		minutesAgo: (_customLabels$timeAgo3 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo4 = customLabels.timeAgo) === null || _customLabels$timeAgo4 === void 0 ? void 0 : _customLabels$timeAgo4.minutesAgo) !== null && _customLabels$timeAgo3 !== void 0 ? _customLabels$timeAgo3 : defaultLabels$6.timeAgo.minutesAgo,
-		hoursAgo: (_customLabels$timeAgo5 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo6 = customLabels.timeAgo) === null || _customLabels$timeAgo6 === void 0 ? void 0 : _customLabels$timeAgo6.hoursAgo) !== null && _customLabels$timeAgo5 !== void 0 ? _customLabels$timeAgo5 : defaultLabels$6.timeAgo.hoursAgo,
-		daysAgo: (_customLabels$timeAgo7 = customLabels === null || customLabels === void 0 || (_customLabels$timeAgo8 = customLabels.timeAgo) === null || _customLabels$timeAgo8 === void 0 ? void 0 : _customLabels$timeAgo8.daysAgo) !== null && _customLabels$timeAgo7 !== void 0 ? _customLabels$timeAgo7 : defaultLabels$6.timeAgo.daysAgo
+		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
 	};
 	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$6.severityLabels.critical,
-		error: (_customLabels$severit3 = customLabels === null || customLabels === void 0 || (_customLabels$severit4 = customLabels.severityLabels) === null || _customLabels$severit4 === void 0 ? void 0 : _customLabels$severit4.error) !== null && _customLabels$severit3 !== void 0 ? _customLabels$severit3 : defaultLabels$6.severityLabels.error,
-		warning: (_customLabels$severit5 = customLabels === null || customLabels === void 0 || (_customLabels$severit6 = customLabels.severityLabels) === null || _customLabels$severit6 === void 0 ? void 0 : _customLabels$severit6.warning) !== null && _customLabels$severit5 !== void 0 ? _customLabels$severit5 : defaultLabels$6.severityLabels.warning
+		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
 	};
 	const labels = {
-		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$6.title,
-		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$6.emptyMessage,
-		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$6.moreItems
+		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
 	};
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const allItems = maxItems ? failures.slice(0, maxItems) : failures;
@@ -2090,7 +2090,7 @@ function renderGrouped(items, remainingCount, rowProps, labels, onShowMore) {
 }
 //#endregion
 //#region src/shells/key-value-editor.tsx
-const defaultLabels$5 = {
+const defaultLabels$8 = {
 	keyPlaceholder: "키",
 	valuePlaceholder: "값",
 	addButton: "추가",
@@ -2104,7 +2104,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$5), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$8), customLabels);
 	const [internalEntries, setInternalEntries] = useState(() => defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
 	const entries = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalEntries;
 	const keyInputRef = useRef(null);
@@ -2400,6 +2400,555 @@ 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}`
+};
+/**
+* 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)
+			})]
+		}, key))
+	});
+}
+function TimelineRow({ item, gapLabel, labels, onItemSelect, isLast }) {
+	var _item$tone, _item$content, _item$properties;
+	const [open, setOpen] = useState(false);
+	const expandable = Boolean(item.content || item.properties);
+	const toggle = useCallback(() => setOpen((value) => !value), []);
+	const headline = /* @__PURE__ */ jsx("span", {
+		className: cn(OPT_TEXT_PRIMARY, "truncate text-sm font-medium"),
+		children: item.name
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		className: "relative flex gap-3 pb-4 last:pb-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 flex-col items-center",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("mt-1.5 size-2 shrink-0 rounded-full", toneDot[(_item$tone = item.tone) !== null && _item$tone !== void 0 ? _item$tone : "default"]),
+				"aria-hidden": "true"
+			}), !isLast && /* @__PURE__ */ jsx("span", {
+				className: "bg-border mt-1 w-px grow",
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 grow flex-col",
+			children: [
+				gapLabel && /* @__PURE__ */ jsx("span", {
+					className: cn("text-text-tertiary", "mb-1 text-xs tabular-nums"),
+					children: labels.gap(gapLabel)
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-baseline gap-2",
+					children: [
+						item.icon && /* @__PURE__ */ jsx("span", {
+							className: "text-text-tertiary",
+							"aria-hidden": "true",
+							children: item.icon
+						}),
+						onItemSelect ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => onItemSelect(item),
+							className: cn(OPT_FOCUS_VISIBLE, "hover:text-accent min-w-0 truncate rounded text-left"),
+							children: headline
+						}) : headline,
+						/* @__PURE__ */ jsx("time", {
+							dateTime: item.timestamp,
+							className: cn(OPT_TEXT_TERTIARY, "ml-auto shrink-0 text-xs tabular-nums"),
+							children: formatOptTime(item.timestamp)
+						})
+					]
+				}),
+				item.detail && /* @__PURE__ */ jsx("span", {
+					className: cn("text-text-secondary", "truncate text-xs"),
+					children: item.detail
+				}),
+				expandable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: toggle,
+					"aria-expanded": open,
+					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 mt-1 flex w-fit items-center gap-1 rounded text-xs"),
+					children: [open ? /* @__PURE__ */ jsx(ChevronDown, {
+						className: "size-3",
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ jsx(ChevronRight, {
+						className: "size-3",
+						"aria-hidden": "true"
+					}), open ? labels.collapse : labels.expand]
+				}), open && ((_item$content = item.content) !== null && _item$content !== void 0 ? _item$content : /* @__PURE__ */ jsx(PropertyTable, {
+					properties: (_item$properties = item.properties) !== null && _item$properties !== void 0 ? _item$properties : {},
+					ariaLabel: labels.properties
+				}))] })
+			]
+		})]
+	});
+}
+/** Builds the gap label for each row, given the reading order. */
+function useGapLabels(items, showGaps, order, minGapMs, locale) {
+	return useMemo(() => {
+		if (!showGaps) return items.map(() => null);
+		return items.map((item, index) => {
+			const neighbour = order === "desc" ? items[index + 1] : items[index - 1];
+			if (!neighbour) return null;
+			const delta = Math.abs(toMillis(item.timestamp) - toMillis(neighbour.timestamp));
+			if (delta < minGapMs) return null;
+			return formatDuration(delta, locale);
+		});
+	}, [
+		items,
+		showGaps,
+		order,
+		minGapMs,
+		locale
+	]);
+}
+function TimelineList({ items, showGaps, order, minGapMs, locale, labels, onItemSelect }) {
+	const gaps = useGapLabels(items, showGaps, order, minGapMs, locale);
+	return /* @__PURE__ */ jsx("ol", {
+		className: "flex flex-col",
+		children: items.map((item, index) => {
+			var _gaps$index;
+			return /* @__PURE__ */ jsx(TimelineRow, {
+				item,
+				gapLabel: (_gaps$index = gaps[index]) !== null && _gaps$index !== void 0 ? _gaps$index : null,
+				labels,
+				onItemSelect,
+				isLast: index === items.length - 1
+			}, item.id);
+		})
+	});
+}
+function GroupBlock({ group, showGaps, order, minGapMs, locale, labels, onItemSelect }) {
+	var _group$defaultOpen;
+	const [open, setOpen] = useState((_group$defaultOpen = group.defaultOpen) !== null && _group$defaultOpen !== void 0 ? _group$defaultOpen : true);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn(OPT_BORDER, "rounded-xl"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 px-3 py-2",
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => setOpen((value) => !value),
+					"aria-expanded": open,
+					className: cn(OPT_FOCUS_VISIBLE, "flex min-w-0 grow items-center gap-2 rounded text-left"),
+					children: [
+						open ? /* @__PURE__ */ jsx(ChevronDown, {
+							className: cn(OPT_TEXT_TERTIARY, "size-4 shrink-0"),
+							"aria-hidden": "true"
+						}) : /* @__PURE__ */ jsx(ChevronRight, {
+							className: cn(OPT_TEXT_TERTIARY, "size-4 shrink-0"),
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn(OPT_TEXT_PRIMARY, "truncate text-sm font-medium"),
+							children: group.title
+						}),
+						/* @__PURE__ */ jsx(Badge, {
+							size: "sm",
+							variant: "default",
+							className: "shrink-0",
+							children: group.items.length
+						})
+					]
+				}),
+				group.meta && /* @__PURE__ */ jsx("span", {
+					className: cn("text-text-tertiary", "shrink-0 text-xs"),
+					children: group.meta
+				}),
+				group.href && /* @__PURE__ */ jsx("a", {
+					href: group.href,
+					className: cn("outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", "text-accent shrink-0 rounded text-xs"),
+					children: labels.openGroup(typeof group.title === "string" ? group.title : group.id)
+				})
+			]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "border-border-subtle border-t px-3 py-3",
+			children: /* @__PURE__ */ jsx(TimelineList, {
+				items: group.items,
+				showGaps,
+				order,
+				minGapMs,
+				locale,
+				labels,
+				onItemSelect
+			})
+		})]
+	});
+}
+/**
+* EventTimeline — a sequence of events, read as a sequence.
+*
+* A table of events answers "what happened" and hides "how it went": the rows
+* are evenly spaced no matter whether they were two seconds or two hours
+* apart, and the payload that would explain a row lives in a column nobody
+* widened. This renders the same data as an ordered rail, labels the elapsed
+* time between adjacent events, and opens each payload in place. Grouping by
+* session restores the boundary that makes a history legible.
+*
+* @example
+* ```tsx
+* <EventTimeline
+*   groups={sessions.map((session) => ({
+*     id: session.id,
+*     title: session.entryPath,
+*     meta: `${session.duration} · ${session.events} events`,
+*     items: session.events,
+*   }))}
+*   showGaps
+* />
+* ```
+*/
+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 flatItems = items !== null && items !== void 0 ? items : [];
+	const hasContent = groups ? groups.length > 0 : flatItems.length > 0;
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		className: cn(TIMELINE_WIDTH, "flex flex-col gap-3", className),
+		"data-opt-id": "H6S6T",
+		"data-opt-slug": "event-timeline.EventTimeline",
+		children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-3",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 size-2 rounded-full" }), /* @__PURE__ */ jsxs("div", {
+				className: "flex grow flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-64" })]
+			})]
+		}, index))
+	});
+	if (!hasContent) return /* @__PURE__ */ jsx("div", {
+		className: cn(TIMELINE_WIDTH, className),
+		"data-opt-id": "H6S6T",
+		"data-opt-slug": "event-timeline.EventTimeline",
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			title: labels.emptyTitle,
+			description: labels.emptyDescription,
+			tone: "subdued",
+			hasBorder: true
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(TIMELINE_WIDTH, "flex flex-col gap-3", className),
+		"data-opt-id": "H6S6T",
+		"data-opt-slug": "event-timeline.EventTimeline",
+		children: [groups ? groups.map((group) => /* @__PURE__ */ jsx(GroupBlock, {
+			group,
+			showGaps,
+			order,
+			minGapMs,
+			locale,
+			labels,
+			onItemSelect
+		}, group.id)) : /* @__PURE__ */ jsx(TimelineList, {
+			items: flatItems,
+			showGaps,
+			order,
+			minGapMs,
+			locale,
+			labels,
+			onItemSelect
+		}), hasMore && onLoadMore && /* @__PURE__ */ jsx("div", {
+			className: "flex justify-center pt-1",
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "sm",
+				onClick: onLoadMore,
+				children: labels.loadMore
+			})
+		})]
+	});
+}
+EventTimeline.displayName = "EventTimeline";
+//#endregion
+//#region src/shells/score-breakdown.tsx
+const defaultLabels$6 = {
+	title: "Score",
+	outOf: (max) => `out of ${max}`,
+	weight: (percent) => `${percent} of total`,
+	empty: "Not enough activity to score."
+};
+const toneText = {
+	default: "text-text-primary",
+	success: "text-success-fg",
+	warning: "text-warning-fg",
+	error: "text-danger-fg"
+};
+const toneMeter = {
+	default: "default",
+	success: "success",
+	warning: "warning",
+	error: "error"
+};
+/** Picks the band a score falls into — the highest `min` at or below it. */
+function resolveBand(score, bands) {
+	return bands.filter((band) => score >= band.min).sort((left, right) => right.min - left.min)[0];
+}
+/**
+* ScoreBreakdown — a composite score you can argue with.
+*
+* Engagement, health and risk scores all collapse several signals into one
+* number, and the number alone tells nobody what to do about it. Showing the
+* axes and their weights beside the headline turns "43" into "recent, but
+* shallow", which is a finding rather than a verdict.
+*/
+function ScoreBreakdown({ score, max = 100, axes, bands = [], formula, loading = false, labels: customLabels, className }) {
+	var _band$tone;
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$6), 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", {
+		className: cn(OPT_BORDER, "flex flex-col gap-3 rounded-xl p-4", className),
+		"data-opt-id": "DYZSG",
+		"data-opt-slug": "score-breakdown.ScoreBreakdown",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" }), Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }, index))]
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn(OPT_BORDER, "flex flex-col gap-4 rounded-xl p-4", className),
+		"data-opt-id": "DYZSG",
+		"data-opt-slug": "score-breakdown.ScoreBreakdown",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: cn(OPT_TEXT_SECONDARY, "text-sm"),
+					children: labels.title
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: cn("text-3xl font-bold tabular-nums", toneText[tone]),
+							children: score
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn(OPT_TEXT_TERTIARY, "text-xs"),
+							children: labels.outOf(max)
+						}),
+						band && /* @__PURE__ */ jsx("span", {
+							className: cn("ml-1 text-sm font-medium", toneText[tone]),
+							children: band.label
+						})
+					]
+				}),
+				formula && /* @__PURE__ */ jsx("p", {
+					className: cn("text-text-tertiary", "text-xs"),
+					children: formula
+				})
+			]
+		}), axes.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: cn(OPT_TEXT_SECONDARY, "text-sm"),
+			children: labels.empty
+		}) : /* @__PURE__ */ jsx("dl", {
+			className: "flex flex-col gap-3",
+			children: axes.map((axis) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline justify-between gap-2",
+						children: [/* @__PURE__ */ jsxs("dt", {
+							className: cn(OPT_TEXT_PRIMARY, "text-sm"),
+							title: axis.hint,
+							children: [axis.label, axis.weight !== void 0 && /* @__PURE__ */ jsx("span", {
+								className: cn("text-text-tertiary", "ml-1.5 text-xs"),
+								children: labels.weight(`${Math.round(axis.weight * 100)}%`)
+							})]
+						}), /* @__PURE__ */ jsx("dd", {
+							className: cn(OPT_TEXT_SECONDARY, "text-sm font-medium tabular-nums"),
+							children: Math.round(axis.value)
+						})]
+					}),
+					/* @__PURE__ */ jsx(Meter$1, {
+						value: axis.value,
+						max,
+						size: "sm",
+						variant: toneMeter[tone],
+						"aria-label": axis.label
+					}),
+					axis.hint && /* @__PURE__ */ jsx("p", {
+						className: cn("text-text-tertiary", "text-xs"),
+						children: axis.hint
+					})
+				]
+			}, axis.id))
+		})]
+	});
+}
+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-overlay fixed inset-0 z-30",
+		"aria-hidden": "true"
+	}), panel] });
+}
+Flyout.displayName = "Flyout";
+//#endregion
 //#region src/lib/use-auto-refresh.ts
 /**
 * A refresh timer that waits for its own work.
@@ -4270,6 +4819,6 @@ function FieldValues({ values, loading, total, sampledRows, onFilter, labels })
 	});
 }
 //#endregion
-export { CommandList$1 as $, DataTable as A, SidebarNav as B, WorkflowCanvas as C, ToastProvider as D, NotificationToast as E, DeploymentTimeline as F, CommandPaletteTrigger as G, StatusSelect as H, SettingsForm as I, CommandDialog as J, CommandPalette as K, FaqAccordion as L, BranchSelect as M, EnvPanel as N, toast as O, ProjectSwitcher as P, CommandItem$1 as Q, ContentTabs as R, useAutoRefresh as S, FailureList as T, SearchCombobox as U, AppMenubar as V, DashboardGrid as W, CommandGroup$1 as X, CommandEmpty$1 as Y, CommandInput$1 as Z, withoutField as _, formatQuery as a, DEFAULT_TIME_PRESETS as b, parseQueryWithDiagnostics as c, applyCellAction as d, CommandSeparator$1 as et, fieldValues as f, withFieldValue as g, removeClause as h, formatClause as i, DomainTable as j, useToast as k, EMPTY_QUERY as l, queryFields as m, QueryBar as n, quoteValue as o, isEmptyQuery as p, Command as q, describeClause as r, parseQuery as s, FieldSidebar as t, CommandShortcut as tt, addClause as u, LogTable as v, KeyValueEditor as w, TimeRangeControl as x, TimeSeriesPanel as y, EditorToolbar as z };
+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, useAutoRefresh as S, EventTimeline as T, SidebarNav as U, ContentTabs as V, AppMenubar as W, Command as X, CommandPalette as Y, CommandDialog as Z, withoutField as _, formatQuery as a, DEFAULT_TIME_PRESETS as b, parseQueryWithDiagnostics as c, applyCellAction as d, CommandInput$1 as et, fieldValues as f, withFieldValue as g, removeClause as h, formatClause as i, CommandShortcut as it, toast as j, NotificationToast as k, EMPTY_QUERY as l, queryFields as m, QueryBar as n, CommandList$1 as nt, quoteValue as o, isEmptyQuery as p, DashboardGrid as q, describeClause as r, CommandSeparator$1 as rt, parseQuery as s, FieldSidebar as t, CommandItem$1 as tt, addClause as u, LogTable as v, ScoreBreakdown as w, TimeRangeControl as x, TimeSeriesPanel as y, SettingsForm as z };
 
-//# sourceMappingURL=field-sidebar-BXjvV7Cz.js.map
+//# sourceMappingURL=field-sidebar-BXl5RJ3q.js.map