@reopt-ai/opt-ui 1.11.0 → 1.12.1

package/dist/index.js

@@ -1,16 +1,355 @@
 "use client";
-import { $ as PopoverContent, $n as OPT_TEXT_PRIMARY, $t as CompositeRow, A as FormRadioGroup, An as OPT_BADGE_YELLOW, At as DialogDescription, B as FormSwitch, Bn as OPT_FOCUS_VISIBLE, Bt as SelectPopover, C as FormIconPicker, Ct as ComboboxGroupLabel, D as FormProvider, Dn as OPT_BADGE_GREEN, Dt as ComboboxRoot, E as FormNumberInput, En as OPT_BADGE_BLUE, Et as ComboboxPopover, F as FormSelectItem, Fn as OPT_DOT_GRAY, Ft as DialogHeading, G as useFormStore, Gt as TabPanel, H as FormTextarea, Hn as OPT_INPUT, Ht as SelectTrigger, I as FormSelectPopover, In as OPT_DOT_GREEN, It as DialogPanel, J as TagInput, Jt as DisclosureRoot, K as DEFAULT_PRESETS, Kt as TabsRoot, L as FormSlider, Ln as OPT_DOT_RED, Lt as DialogRoot, M as FormReset, Mt as DialogDismiss, N as FormRoot, Nt as DialogFooter, O as FormPush, On as OPT_BADGE_NEUTRAL, Ot as AlertDialogPanel, P as FormSelect, Pt as DialogHeader, Q as PopoverClose, Qt as CompositeProvider, R as FormStarRating, Rn as OPT_DOT_YELLOW, Rt as SelectItem, S as FormGroupLabel, St as ComboboxGroup, T as FormLabel, Tt as ComboboxItem, U as useFieldValue, Ut as Tab, V as FormTagInput, Vn as OPT_HOVER_ITEM, Vt as SelectRoot, W as useFormContext, Wt as TabList, X as getIconRegistryEntry, Xt as Composite, Y as IconPicker, Yn as OPT_TD, Yt as DisclosureTrigger, Z as ColorPicker, Zt as CompositeItem, _ as FormDateRangePicker, _n as SkeletonTable, _t as MenuSeparator, a as resolveFieldType, an as Alert, ar as Kbd, at as ToolbarContainer, b as FormField, bt as MenubarRoot, c as CheckboxGroup, cn as EmptyState, ct as Tooltip, d as formatOptNumber, dn as koComboboxLabels, dt as MenuButtonArrow, en as CompositeZone, er as OPT_TEXT_SECONDARY, et as PopoverRoot, f as formatOptShortDate, fn as koStarRatingLabels, ft as MenuItem, g as FormControl, gn as SkeletonCard, gt as MenuRoot, h as FormColorPicker, hn as SkeletonAvatar, ht as MenuPopover, i as FieldToken, in as useInputId, it as ToolbarButton, j as FormRemove, jn as OPT_BORDER, jt as DialogDisclosure, k as FormRadio, kn as OPT_BADGE_RED, kt as DialogBody, ln as Button, lt as TooltipAnchor, m as FormCheckbox, mn as Skeleton, mt as MenuItemRadio, n as Highlight, nn as StarRating, nr as OPT_TH, nt as Slider, o as Pagination, on as Spinner, or as cn, ot as ToolbarRoot, p as formatOptTime, pn as StatCard, pt as MenuItemCheckbox, q as DateRangePicker, qt as DisclosureContent, r as FIELD_TYPE_TOKENS, rn as Input, rr as _objectSpread2, rt as NumberInput, s as Checkbox, sn as Badge, st as ToolbarSeparator, t as TextTruncate, tn as Meter, tr as OPT_TEXT_TERTIARY, tt as PopoverTrigger, u as formatOptDateTime, un as koBreadcrumbLabels, ut as TooltipProvider, v as FormDescription, vn as SkeletonText, vt as MenuTrigger, w as FormInput, wt as ComboboxInput, x as FormGroup, xt as ComboboxEmpty, y as FormError, yn as useControlledState, yt as MenubarContainer, z as FormSubmit, zn as OPT_FOCUS, zt as SelectLabel } from "./text-truncate-C17HHCR-.js";
-import { $ as Identity, A as PageHeader, B as DropdownTrigger, C as Logo, D as Section, E as ResizablePanelGroup, F as RadioGroup, G as Textarea, H as StepBuilder, I as DropdownContent, J as CardContent, K as Switch, L as DropdownItem, M as BlockLayout, N as LoadingOverlay, O as Container, P as Radio, Q as CardTitle, R as DropdownMenu, S as DrawerRoot, T as ResizablePanel, U as CircularProgress, V as ConditionBuilder, W as Progress, X as CardFooter, Y as CardDescription, Z as CardHeader, _ as getShaderFragment, a as THEME_PALETTES, at as AccordionItem, b as DrawerClose, c as ExpressionGroup, ct as Toggle, d as ShaderSurface, dt as Separator, et as Avatar, f as SHADER_OVERLAY_PARAM_KEYS, ft as Heading, g as SHADER_PRESET_IDS, h as SHADER_PRESETS, i as ColorPalettePicker, it as AccordionContent, j as createBlock, k as ScrollArea, l as Facet, lt as ToggleGroup, m as SHADER_PARAM_KEYS, n as InlineEdit, nt as DescriptionList, o as LiveRegion, ot as AccordionRoot, p as SHADER_PARAM_FALLBACK, pt as Text, q as Card, r as ColorPaletteDisplay, rt as Breadcrumb, s as Expression, st as AccordionTrigger, t as KeyPadMenu, tt as AvatarGroup, u as FacetGroup, ut as OtpField, v as getShaderPreset, w as ResizableHandle, x as DrawerPanel, y as VirtualList, z as DropdownSeparator } from "./key-pad-menu-wXkWn1I1.js";
-import { $ as CommandGroup, A as ToastProvider, B as FaqAccordion, C as Flyout, D as KeyValueEditor, E as WorkflowCanvas, F as BranchSelect, G as StatusSelect, H as EditorToolbar, I as EnvPanel, J as CommandPaletteTrigger, K as SearchCombobox, L as ProjectSwitcher, M as useToast, N as DataTable, O as FailureList, P as DomainTable, Q as CommandEmpty, R as DeploymentTimeline, S as useAutoRefresh, T as EventTimeline, U as SidebarNav, V as ContentTabs, W as AppMenubar, X as Command, Y as CommandPalette, Z as CommandDialog, _ as withoutField, a as formatQuery, b as DEFAULT_TIME_PRESETS, c as parseQueryWithDiagnostics, d as applyCellAction, et as CommandInput, f as fieldValues, g as withFieldValue, h as removeClause, i as formatClause, it as CommandShortcut, j as toast, k as NotificationToast, l as EMPTY_QUERY, m as queryFields, n as QueryBar, nt as CommandList, o as quoteValue, p as isEmptyQuery, q as DashboardGrid, r as describeClause, rt as CommandSeparator, s as parseQuery, t as FieldSidebar, tt as CommandItem, u as addClause, v as LogTable, w as ScoreBreakdown, x as TimeRangeControl, y as TimeSeriesPanel, z as SettingsForm } from "./field-sidebar-BXl5RJ3q.js";
+import { $ as PopoverClose, $t as CompositeProvider, A as FormRadio, An as OPT_BADGE_RED, At as DialogBody, B as FormSubmit, Bn as OPT_FOCUS, Bt as SelectLabel, C as FormGroupLabel, Ct as ComboboxGroup, D as FormNumberInput, Dn as OPT_BADGE_BLUE, Dt as ComboboxPopover, E as FormLabel, Et as ComboboxItem, F as FormSelect, Ft as DialogHeader, G as useFormContext, Gt as TabList, H as FormTagInput, Hn as OPT_HOVER_ITEM, Ht as SelectRoot, I as FormSelectItem, In as OPT_DOT_GRAY, It as DialogHeading, J as DateRangePicker, Jt as DisclosureContent, K as useFormStore, Kt as TabPanel, L as FormSelectPopover, Ln as OPT_DOT_GREEN, Lt as DialogPanel, M as FormRemove, Mn as OPT_BORDER, Mt as DialogDisclosure, N as FormReset, Nt as DialogDismiss, O as FormProvider, On as OPT_BADGE_GREEN, Ot as ComboboxRoot, P as FormRoot, Pt as DialogFooter, Q as ColorPicker, Qt as CompositeItem, R as FormSlider, Rn as OPT_DOT_RED, Rt as DialogRoot, S as FormGroup, St as ComboboxEmpty, T as FormInput, Tt as ComboboxInput, U as FormTextarea, Un as OPT_INPUT, Ut as SelectTrigger, V as FormSwitch, Vn as OPT_FOCUS_VISIBLE, Vt as SelectPopover, W as useFieldValue, Wt as Tab, X as IconPicker, Xn as OPT_TD, Xt as DisclosureTrigger, Y as TagInput, Yt as DisclosureRoot, Z as getIconRegistryEntry, Zt as Composite, _ as FormControl, _n as SkeletonCard, _t as MenuRoot, a as FieldTokenLegend, an as useInputId, ar as _objectWithoutProperties, at as ToolbarButton, b as FormError, bn as useControlledState, bt as MenubarContainer, c as Checkbox, cn as Badge, ct as ToolbarSeparator, d as formatOptDateTime, dn as koBreadcrumbLabels, dt as TooltipProvider, en as CompositeRow, er as OPT_TEXT_PRIMARY, et as PopoverContent, f as formatOptNumber, fn as koComboboxLabels, ft as MenuButtonArrow, g as FormColorPicker, gn as SkeletonAvatar, gt as MenuPopover, h as FormCheckbox, hn as Skeleton, ht as MenuItemRadio, i as FieldToken, in as Input, ir as _objectSpread2, it as NumberInput, j as FormRadioGroup, jn as OPT_BADGE_YELLOW, jt as DialogDescription, k as FormPush, kn as OPT_BADGE_NEUTRAL, kt as AlertDialogPanel, l as CheckboxGroup, ln as EmptyState, lt as Tooltip, m as formatOptTime, mn as StatCard, mt as MenuItemCheckbox, n as Highlight, nn as Meter, nr as OPT_TEXT_TERTIARY, nt as PopoverTrigger, o as resolveFieldType, on as Alert, or as Kbd, ot as ToolbarContainer, p as formatOptShortDate, pn as koStarRatingLabels, pt as MenuItem, q as DEFAULT_PRESETS, qt as TabsRoot, r as FIELD_TYPE_TOKENS, rn as StarRating, rr as OPT_TH, rt as Slider, s as Pagination, sn as Spinner, sr as cn, st as ToolbarRoot, t as TextTruncate, tn as CompositeZone, tr as OPT_TEXT_SECONDARY, tt as PopoverRoot, un as Button, ut as TooltipAnchor, v as FormDateRangePicker, vn as SkeletonTable, vt as MenuSeparator, w as FormIconPicker, wt as ComboboxGroupLabel, x as FormField, xt as MenubarRoot, y as FormDescription, yn as SkeletonText, yt as MenuTrigger, z as FormStarRating, zn as OPT_DOT_YELLOW, zt as SelectItem } from "./text-truncate-DSuZECy0.js";
+import { $ as Identity, A as PageHeader, B as DropdownTrigger, C as Logo, D as Section, E as ResizablePanelGroup, F as RadioGroup, G as Textarea, H as StepBuilder, I as DropdownContent, J as CardContent, K as Switch, L as DropdownItem, M as BlockLayout, N as LoadingOverlay, O as Container, P as Radio, Q as CardTitle, R as DropdownMenu, S as DrawerRoot, T as ResizablePanel, U as CircularProgress, V as ConditionBuilder, W as Progress, X as CardFooter, Y as CardDescription, Z as CardHeader, _ as getShaderFragment, a as THEME_PALETTES, at as AccordionItem, b as DrawerClose, c as ExpressionGroup, ct as Toggle, d as ShaderSurface, dt as Separator, et as Avatar, f as SHADER_OVERLAY_PARAM_KEYS, ft as Heading, g as SHADER_PRESET_IDS, h as SHADER_PRESETS, i as ColorPalettePicker, it as AccordionContent, j as createBlock, k as ScrollArea, l as Facet, lt as ToggleGroup, m as SHADER_PARAM_KEYS, n as InlineEdit, nt as DescriptionList, o as LiveRegion, ot as AccordionRoot, p as SHADER_PARAM_FALLBACK, pt as Text, q as Card, r as ColorPaletteDisplay, rt as Breadcrumb, s as Expression, st as AccordionTrigger, t as KeyPadMenu, tt as AvatarGroup, u as FacetGroup, ut as OtpField, v as getShaderPreset, w as ResizableHandle, x as DrawerPanel, y as VirtualList, z as DropdownSeparator } from "./key-pad-menu-Di2aRGbM.js";
+import { $ as CommandGroup, A as ToastProvider, B as FaqAccordion, C as Flyout, D as KeyValueEditor, E as WorkflowCanvas, F as BranchSelect, G as StatusSelect, H as EditorToolbar, I as EnvPanel, J as CommandPaletteTrigger, K as SearchCombobox, L as ProjectSwitcher, M as useToast, N as DataTable, O as FailureList, P as DomainTable, Q as CommandEmpty, R as DeploymentTimeline, S as withoutField, T as EventTimeline, U as SidebarNav, V as ContentTabs, W as AppMenubar, X as Command, Y as CommandPalette, Z as CommandDialog, _ as fieldValues, a as TimeRangeControl, b as removeClause, c as describeClause, d as quoteValue, et as CommandInput, f as parseQuery, g as applyCellAction, h as addClause, i as DEFAULT_TIME_PRESETS, it as CommandShortcut, j as toast, k as NotificationToast, l as formatClause, m as EMPTY_QUERY, n as LogTable, nt as CommandList, o as useAutoRefresh, p as parseQueryWithDiagnostics, q as DashboardGrid, r as TimeSeriesPanel, rt as CommandSeparator, s as QueryBar, t as FieldSidebar, tt as CommandItem, u as formatQuery, v as isEmptyQuery, w as ScoreBreakdown, x as withFieldValue, y as queryFields, z as SettingsForm } from "./field-sidebar-zkkqC7__.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Component, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { CircleCheck, FilePen, GitMerge, MessageSquare, Rocket, Search, Sparkles, Trash2, User } from "lucide-react";
+import { Radio as Radio$1, RadioGroupRoot } from "@reopt-ai/opt-ui-primitives";
+import { Check, ChevronDown, CircleAlert, CircleCheck, Copy, FilePen, GitMerge, Info, MessageSquare, MoreHorizontal, Pencil, Rocket, Search, Sparkles, Trash2, TriangleAlert, User, X } from "lucide-react";
 import { generatePalette } from "@reopt-ai/opt-palette";
 import { EventSparkline, MetricsCard, ReportWidget, TrendChart } from "@reopt-ai/opt-charts";
 import { matchSorter } from "match-sorter";
 import { usePathname } from "next/navigation";
 export * from "@reopt-ai/opt-charts";
+//#region src/core/callout.tsx
+const _excluded$2 = [
+	"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$3 = {
+	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$2);
+	const DefaultIcon = defaultIcons[tone];
+	const glyph = icon === void 0 ? DefaultIcon ? /* @__PURE__ */ jsx(DefaultIcon, { "aria-hidden": "true" }) : null : icon;
+	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("flex items-start rounded-lg border", toneStyles[tone], sizeStyles$3[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/status-dot.tsx
+const _excluded$1 = [
+	"tone",
+	"size",
+	"hint",
+	"className",
+	"children"
+];
+const dotTone = {
+	neutral: "bg-text-tertiary",
+	muted: "bg-border-hover",
+	info: "bg-info",
+	success: "bg-success",
+	warning: "bg-warning",
+	danger: "bg-danger"
+};
+const textTone = {
+	neutral: "text-text-secondary",
+	muted: "text-text-tertiary",
+	info: "text-text-secondary",
+	success: "text-text-secondary",
+	warning: "text-text-secondary",
+	danger: "text-text-secondary"
+};
+const sizeStyles$2 = {
+	sm: "gap-1.5 text-[11px]",
+	md: "gap-2 text-xs"
+};
+const dotSize = {
+	sm: "size-1.5",
+	md: "size-2"
+};
+/**
+* StatusDot — a state, said in a dot and a word.
+*
+* `Badge` is a chip: a filled pill that reads as a label somebody attached.
+* A status is not attached, it is observed, and a column of seven filled pills
+* is a column nobody scans. This is the other shape — a dot, the word, no
+* chrome — which is what a dense table can afford to repeat on every row.
+*
+* The dot is decorative on purpose. It never carries meaning the text does not
+* also carry, so the component cannot be used to say something in colour alone.
+*
+* @example
+* ```tsx
+* <StatusDot tone="warning" hint="7일 이상 수신되지 않음">비활성</StatusDot>
+* ```
+*/
+function StatusDot(_ref) {
+	let { tone = "neutral", size = "md", hint, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
+	return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({
+		className: cn("inline-flex items-center whitespace-nowrap", sizeStyles$2[size], textTone[tone], className),
+		title: hint
+	}, props), {}, {
+		"data-opt-id": "N51AT",
+		"data-opt-slug": "status-dot.StatusDot",
+		"data-tone": tone,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("shrink-0 rounded-full", dotSize[size], dotTone[tone]),
+			"aria-hidden": "true"
+		}), children]
+	}));
+}
+//#endregion
+//#region src/core/copy-button.tsx
+const _excluded = [
+	"value",
+	"variant",
+	"size",
+	"feedbackDuration",
+	"onCopy",
+	"labels",
+	"className",
+	"disabled",
+	"onClick"
+];
+const defaultLabels$35 = {
+	copy: "복사",
+	copied: "복사됨",
+	failed: "복사할 수 없습니다"
+};
+const sizeStyles$1 = {
+	sm: "h-6 gap-1 text-[11px] [&>svg]:size-3",
+	md: "h-7 gap-1.5 text-xs [&>svg]:size-3.5"
+};
+const paddingStyles = {
+	icon: {
+		sm: "w-6 justify-center",
+		md: "w-7 justify-center"
+	},
+	text: {
+		sm: "px-1.5",
+		md: "px-2"
+	}
+};
+const stateIcon = {
+	idle: Copy,
+	copied: Check,
+	failed: X
+};
+const stateTone = {
+	idle: "text-text-tertiary hover:text-text-primary",
+	copied: "text-success-fg",
+	failed: "text-danger-fg"
+};
+/**
+* CopyButton — put a value on the clipboard, and say whether it went.
+*
+* Copying an identifier is the most common thing a reader does with one: an
+* event key, a property name, a request id. Every surface that shows one was
+* writing this button again, and each copy re-decided what happens when the
+* clipboard refuses — mostly by pretending it did not.
+*
+* The confirmed state is announced, not just drawn, so the answer reaches a
+* reader who is not looking at the glyph.
+*
+* @example
+* ```tsx
+* <CopyButton value={event.name} labels={{ copy: "이벤트 키 복사" }} />
+* ```
+*/
+function CopyButton(_ref) {
+	let { value, variant = "icon", size = "md", feedbackDuration = 1500, onCopy, labels: customLabels, className, disabled, onClick } = _ref, props = _objectWithoutProperties(_ref, _excluded);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$35), customLabels);
+	const [state, setState] = useState("idle");
+	const timer = useRef(null);
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	const handleClick = useCallback(async (event) => {
+		onClick === null || onClick === void 0 || onClick(event);
+		if (event.defaultPrevented) return;
+		let ok = false;
+		try {
+			await navigator.clipboard.writeText(value);
+			ok = true;
+		} catch (_unused) {
+			ok = false;
+		}
+		setState(ok ? "copied" : "failed");
+		onCopy === null || onCopy === void 0 || onCopy(ok);
+		if (timer.current) clearTimeout(timer.current);
+		timer.current = setTimeout(() => setState("idle"), feedbackDuration);
+	}, [
+		feedbackDuration,
+		onClick,
+		onCopy,
+		value
+	]);
+	const Icon = stateIcon[state];
+	const label = state === "copied" ? labels.copied : state === "failed" ? labels.failed : labels.copy;
+	return /* @__PURE__ */ jsxs("button", _objectSpread2(_objectSpread2({
+		type: "button",
+		onClick: handleClick,
+		disabled,
+		"aria-label": variant === "icon" ? label : void 0,
+		className: cn("inline-flex shrink-0 items-center rounded transition-colors", "disabled:pointer-events-none disabled:opacity-50", OPT_FOCUS_VISIBLE, sizeStyles$1[size], paddingStyles[variant][size], stateTone[state], className)
+	}, props), {}, {
+		"data-opt-id": "E0C8T",
+		"data-opt-slug": "copy-button.CopyButton",
+		"data-copy-state": state,
+		children: [
+			/* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
+			variant === "text" && /* @__PURE__ */ jsx("span", { children: label }),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: state === "idle" ? "" : label
+			})
+		]
+	}));
+}
+//#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$1, {
+						value: option.value,
+						disabled: itemDisabled,
+						className: "sr-only"
+					}),
+					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/lib/schema-validator.ts
 /** Handles schema validator. */
 function schemaValidator(schema) {
@@ -85,7 +424,7 @@ function PageAside({ header, children, footer, widthClassName = "w-60", label, h
 PageAside.displayName = "PageAside";
 //#endregion
 //#region src/shells/task-list.tsx
-const defaultLabels$31 = {
+const defaultLabels$34 = {
 	title: "작업 목록",
 	emptyMessage: "작업이 없습니다",
 	completedOf: "{completed}/{total} 완료",
@@ -105,9 +444,9 @@ const defaultLabels$31 = {
 };
 /** Renders the task list component. */
 function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage, showSubtasks = false, maxItems, labels: customLabels, className }) {
-	const labels = _objectSpread2(_objectSpread2(_objectSpread2({}, defaultLabels$31), customLabels), {}, {
-		priority: _objectSpread2(_objectSpread2({}, defaultLabels$31.priority), customLabels === null || customLabels === void 0 ? void 0 : customLabels.priority),
-		status: _objectSpread2(_objectSpread2({}, defaultLabels$31.status), customLabels === null || customLabels === void 0 ? void 0 : customLabels.status)
+	const labels = _objectSpread2(_objectSpread2(_objectSpread2({}, defaultLabels$34), customLabels), {}, {
+		priority: _objectSpread2(_objectSpread2({}, defaultLabels$34.priority), customLabels === null || customLabels === void 0 ? void 0 : customLabels.priority),
+		status: _objectSpread2(_objectSpread2({}, defaultLabels$34.status), customLabels === null || customLabels === void 0 ? void 0 : customLabels.status)
 	});
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const displayEmptyMessage = emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : labels.emptyMessage;
@@ -265,7 +604,7 @@ function TaskList({ tasks, title, onTaskClick, onTaskStatusChange, emptyMessage,
 }
 //#endregion
 //#region src/shells/activity-feed.tsx
-const defaultLabels$30 = {
+const defaultLabels$33 = {
 	title: "활동 피드",
 	emptyMessage: "활동이 없습니다",
 	moreItems: "{count}개 더 보기",
@@ -315,24 +654,24 @@ const variantBorder = {
 function ActivityFeed({ activities, title, maxItems, onActivityClick, onShowMore, emptyMessage, labels: customLabels, locale = "ko-KR", loading = false, layout = "list", renderActions, className }) {
 	var _customLabels$timeAgo, _customLabels$timeAgo2, _customLabels$timeAgo3, _customLabels$timeAgo4, _customLabels$timeAgo5, _customLabels$timeAgo6, _customLabels$timeAgo7, _customLabels$timeAgo8, _customLabels$activit, _customLabels$activit2, _customLabels$activit3, _customLabels$activit4, _customLabels$activit5, _customLabels$activit6, _customLabels$activit7, _customLabels$activit8, _customLabels$activit9, _customLabels$activit10, _customLabels$activit11, _customLabels$activit12, _customLabels$activit13, _customLabels$activit14, _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$30.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$30.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$30.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$30.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$33.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$33.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$33.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$33.timeAgo.daysAgo
 	};
 	const mergedActivityVerbs = {
-		created: (_customLabels$activit = customLabels === null || customLabels === void 0 || (_customLabels$activit2 = customLabels.activityVerbs) === null || _customLabels$activit2 === void 0 ? void 0 : _customLabels$activit2.created) !== null && _customLabels$activit !== void 0 ? _customLabels$activit : defaultLabels$30.activityVerbs.created,
-		updated: (_customLabels$activit3 = customLabels === null || customLabels === void 0 || (_customLabels$activit4 = customLabels.activityVerbs) === null || _customLabels$activit4 === void 0 ? void 0 : _customLabels$activit4.updated) !== null && _customLabels$activit3 !== void 0 ? _customLabels$activit3 : defaultLabels$30.activityVerbs.updated,
-		completed: (_customLabels$activit5 = customLabels === null || customLabels === void 0 || (_customLabels$activit6 = customLabels.activityVerbs) === null || _customLabels$activit6 === void 0 ? void 0 : _customLabels$activit6.completed) !== null && _customLabels$activit5 !== void 0 ? _customLabels$activit5 : defaultLabels$30.activityVerbs.completed,
-		commented: (_customLabels$activit7 = customLabels === null || customLabels === void 0 || (_customLabels$activit8 = customLabels.activityVerbs) === null || _customLabels$activit8 === void 0 ? void 0 : _customLabels$activit8.commented) !== null && _customLabels$activit7 !== void 0 ? _customLabels$activit7 : defaultLabels$30.activityVerbs.commented,
-		assigned: (_customLabels$activit9 = customLabels === null || customLabels === void 0 || (_customLabels$activit10 = customLabels.activityVerbs) === null || _customLabels$activit10 === void 0 ? void 0 : _customLabels$activit10.assigned) !== null && _customLabels$activit9 !== void 0 ? _customLabels$activit9 : defaultLabels$30.activityVerbs.assigned,
-		deployed: (_customLabels$activit11 = customLabels === null || customLabels === void 0 || (_customLabels$activit12 = customLabels.activityVerbs) === null || _customLabels$activit12 === void 0 ? void 0 : _customLabels$activit12.deployed) !== null && _customLabels$activit11 !== void 0 ? _customLabels$activit11 : defaultLabels$30.activityVerbs.deployed,
-		merged: (_customLabels$activit13 = customLabels === null || customLabels === void 0 || (_customLabels$activit14 = customLabels.activityVerbs) === null || _customLabels$activit14 === void 0 ? void 0 : _customLabels$activit14.merged) !== null && _customLabels$activit13 !== void 0 ? _customLabels$activit13 : defaultLabels$30.activityVerbs.merged
+		created: (_customLabels$activit = customLabels === null || customLabels === void 0 || (_customLabels$activit2 = customLabels.activityVerbs) === null || _customLabels$activit2 === void 0 ? void 0 : _customLabels$activit2.created) !== null && _customLabels$activit !== void 0 ? _customLabels$activit : defaultLabels$33.activityVerbs.created,
+		updated: (_customLabels$activit3 = customLabels === null || customLabels === void 0 || (_customLabels$activit4 = customLabels.activityVerbs) === null || _customLabels$activit4 === void 0 ? void 0 : _customLabels$activit4.updated) !== null && _customLabels$activit3 !== void 0 ? _customLabels$activit3 : defaultLabels$33.activityVerbs.updated,
+		completed: (_customLabels$activit5 = customLabels === null || customLabels === void 0 || (_customLabels$activit6 = customLabels.activityVerbs) === null || _customLabels$activit6 === void 0 ? void 0 : _customLabels$activit6.completed) !== null && _customLabels$activit5 !== void 0 ? _customLabels$activit5 : defaultLabels$33.activityVerbs.completed,
+		commented: (_customLabels$activit7 = customLabels === null || customLabels === void 0 || (_customLabels$activit8 = customLabels.activityVerbs) === null || _customLabels$activit8 === void 0 ? void 0 : _customLabels$activit8.commented) !== null && _customLabels$activit7 !== void 0 ? _customLabels$activit7 : defaultLabels$33.activityVerbs.commented,
+		assigned: (_customLabels$activit9 = customLabels === null || customLabels === void 0 || (_customLabels$activit10 = customLabels.activityVerbs) === null || _customLabels$activit10 === void 0 ? void 0 : _customLabels$activit10.assigned) !== null && _customLabels$activit9 !== void 0 ? _customLabels$activit9 : defaultLabels$33.activityVerbs.assigned,
+		deployed: (_customLabels$activit11 = customLabels === null || customLabels === void 0 || (_customLabels$activit12 = customLabels.activityVerbs) === null || _customLabels$activit12 === void 0 ? void 0 : _customLabels$activit12.deployed) !== null && _customLabels$activit11 !== void 0 ? _customLabels$activit11 : defaultLabels$33.activityVerbs.deployed,
+		merged: (_customLabels$activit13 = customLabels === null || customLabels === void 0 || (_customLabels$activit14 = customLabels.activityVerbs) === null || _customLabels$activit14 === void 0 ? void 0 : _customLabels$activit14.merged) !== null && _customLabels$activit13 !== void 0 ? _customLabels$activit13 : defaultLabels$33.activityVerbs.merged
 	};
 	const labels = {
-		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$30.title,
-		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$30.emptyMessage,
-		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$30.moreItems,
+		title: (_customLabels$title = customLabels === null || customLabels === void 0 ? void 0 : customLabels.title) !== null && _customLabels$title !== void 0 ? _customLabels$title : defaultLabels$33.title,
+		emptyMessage: (_customLabels$emptyMe = customLabels === null || customLabels === void 0 ? void 0 : customLabels.emptyMessage) !== null && _customLabels$emptyMe !== void 0 ? _customLabels$emptyMe : defaultLabels$33.emptyMessage,
+		moreItems: (_customLabels$moreIte = customLabels === null || customLabels === void 0 ? void 0 : customLabels.moreItems) !== null && _customLabels$moreIte !== void 0 ? _customLabels$moreIte : defaultLabels$33.moreItems,
 		timeAgo: mergedTimeAgo,
 		activityVerbs: mergedActivityVerbs
 	};
@@ -460,13 +799,13 @@ function ActivityFeed({ activities, title, maxItems, onActivityClick, onShowMore
 ActivityFeed.displayName = "ActivityFeed";
 //#endregion
 //#region src/shells/filter-bar.tsx
-const defaultLabels$29 = {
+const defaultLabels$32 = {
 	clearAll: "필터 초기화",
 	searchPlaceholder: "검색..."
 };
 /** Renders the filter bar component. */
 function FilterBar({ filters, onFilterChange, onDateRangeChange, onClearAll, labels: customLabels, presetActions, className }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$29), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$32), customLabels);
 	const [searchValues, setSearchValues] = useState({});
 	const [tagInputValues, setTagInputValues] = useState({});
 	const [multiSelectOpen, setMultiSelectOpen] = useState({});
@@ -692,10 +1031,10 @@ function matchesShortcut(event, shortcut) {
 	if (requiresMeta && !event.metaKey) return false;
 	return event.key.toLowerCase() === key;
 }
-const defaultLabels$28 = { title: "빠른 작업" };
+const defaultLabels$31 = { title: "빠른 작업" };
 /** Renders the quick actions component. */
 function QuickActions({ actions, title, layout = "grid", columns = 3, showDescriptionInGrid = false, bindShortcuts = false, labels: customLabels, className }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$28), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$31), customLabels);
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const titleId = useId();
 	useEffect(() => {
@@ -773,7 +1112,7 @@ function QuickActions({ actions, title, layout = "grid", columns = 3, showDescri
 QuickActions.displayName = "QuickActions";
 //#endregion
 //#region src/shells/team-member-list.tsx
-const defaultLabels$27 = {
+const defaultLabels$30 = {
 	title: "팀원",
 	emptyMessage: "팀원이 없습니다",
 	onlineCount: "{online}/{total} 온라인",
@@ -794,7 +1133,7 @@ const statusDot = {
 };
 /** Renders the team member list component. */
 function TeamMemberList({ members, title, layout = "list", maxDisplay, onMemberClick, onShowMore, emptyMessage, labels: customLabels, className }) {
-	const labels = _objectSpread2(_objectSpread2(_objectSpread2({}, defaultLabels$27), customLabels), {}, { status: _objectSpread2(_objectSpread2({}, defaultLabels$27.status), customLabels === null || customLabels === void 0 ? void 0 : customLabels.status) });
+	const labels = _objectSpread2(_objectSpread2(_objectSpread2({}, defaultLabels$30), customLabels), {}, { status: _objectSpread2(_objectSpread2({}, defaultLabels$30.status), customLabels === null || customLabels === void 0 ? void 0 : customLabels.status) });
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const displayEmptyMessage = emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : labels.emptyMessage;
 	const titleId = useId();
@@ -1694,7 +2033,7 @@ const COLOR_PRESETS = [
 	"#f97316",
 	"#14b8a6"
 ];
-const defaultLabels$26 = {
+const defaultLabels$29 = {
 	eventLabelPrefix: "Event",
 	defaultAriaLabel: "Event icon"
 };
@@ -1725,7 +2064,7 @@ function getEventIconStyle(color) {
 /** Renders the event icon component. */
 function EventIcon({ icon, color, size = "md", className, labels: customLabels }) {
 	var _iconEntry$label;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$26), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$29), customLabels);
 	const sizes = SIZE_MAP[size];
 	const resolvedColor = (color === null || color === void 0 ? void 0 : color.trim()) ? color : void 0;
 	const iconEntry = typeof icon === "string" ? getIconRegistryEntry(icon) : void 0;
@@ -1817,14 +2156,14 @@ function ConnectionIndicator({ status, tone, label, showLabel = true, pulse, cla
 ConnectionIndicator.displayName = "ConnectionIndicator";
 //#endregion
 //#region src/shells/floating-action-bar.tsx
-const defaultLabels$25 = {
+const defaultLabels$28 = {
 	toolbarAriaLabel: "Actions",
 	selectedLabel: (count) => `${count} selected`,
 	dismissAriaLabel: "Dismiss"
 };
 /** Renders the floating action bar component. */
 function FloatingActionBar({ actions, selectedCount, onAction, onDismiss, className, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$25), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$28), customLabels);
 	if (actions.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		role: "toolbar",
@@ -1861,7 +2200,7 @@ function FloatingActionBar({ actions, selectedCount, onAction, onDismiss, classN
 FloatingActionBar.displayName = "FloatingActionBar";
 //#endregion
 //#region src/shells/template-picker.tsx
-const defaultLabels$24 = {
+const defaultLabels$27 = {
 	ariaLabel: "Templates",
 	defaultCategory: "General",
 	searchPlaceholder: "Search templates...",
@@ -1869,7 +2208,7 @@ const defaultLabels$24 = {
 };
 /** Renders the template picker component. */
 function TemplatePicker({ templates, selected, onSelect, labels: customLabels, showSearch = false, className }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$24), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$27), customLabels);
 	const [search, setSearch] = React.useState("");
 	const filtered = React.useMemo(() => {
 		if (!showSearch || !search) return templates;
@@ -1955,7 +2294,7 @@ function TemplatePicker({ templates, selected, onSelect, labels: customLabels, s
 TemplatePicker.displayName = "TemplatePicker";
 //#endregion
 //#region src/shells/code-snippet-viewer.tsx
-const defaultLabels$23 = {
+const defaultLabels$26 = {
 	copy: "Copy",
 	copied: "Copied!",
 	codeRegion: "Code snippet"
@@ -1993,7 +2332,7 @@ const syntaxThemeClasses = {
 /** Renders the code snippet viewer component. */
 function CodeSnippetViewer({ code, language = "text", title, showLineNumbers = true, showCopyButton = true, maxHeight = 400, syntaxTheme = "default", className, labels: customLabels }) {
 	var _syntaxThemeClasses$s;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$23), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$26), customLabels);
 	const [copied, setCopied] = React.useState(false);
 	const lines = code.split("\n");
 	const theme = (_syntaxThemeClasses$s = syntaxThemeClasses[syntaxTheme]) !== null && _syntaxThemeClasses$s !== void 0 ? _syntaxThemeClasses$s : syntaxThemeClasses.default;
@@ -2045,13 +2384,15 @@ function CodeSnippetViewer({ code, language = "text", title, showLineNumbers = t
 CodeSnippetViewer.displayName = "CodeSnippetViewer";
 //#endregion
 //#region src/shells/property-explorer.tsx
-const defaultLabels$22 = {
+const defaultLabels$25 = {
 	searchPlaceholder: "Search properties...",
-	noPropertiesFound: "No properties found"
+	noPropertiesFound: "No properties found",
+	edit: (property) => `${property} 편집`,
+	hidden: "숨김"
 };
 /** Renders the property explorer component. */
-function PropertyExplorer({ groups, onSelect, className, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$22), customLabels);
+function PropertyExplorer({ groups, onSelect, onEdit, className, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$25), customLabels);
 	const [search, setSearch] = React.useState("");
 	const filtered = React.useMemo(() => {
 		if (!search) return groups;
@@ -2077,36 +2418,55 @@ function PropertyExplorer({ groups, onSelect, className, labels: customLabels })
 				children: group.name
 			}), /* @__PURE__ */ jsx("div", {
 				className: "gap-element flex flex-col",
-				children: group.properties.map((prop) => /* @__PURE__ */ jsxs("button", {
-					onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(prop),
-					className: cn("flex w-full items-center justify-between rounded-md px-2.5 py-1.5 text-left", "hover:bg-bg-subtle transition-colors"),
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "min-w-0",
-						children: [
-							/* @__PURE__ */ jsx(FieldToken, {
-								type: resolveFieldType(prop.type),
-								size: "xs",
-								title: prop.type,
-								className: "mr-2 align-[-2px]"
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "text-text-primary text-sm font-medium",
-								children: prop.name
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "text-text-tertiary ml-2 font-mono text-xs",
-								children: prop.type
-							}),
-							prop.description && /* @__PURE__ */ jsx("p", {
-								className: "text-text-tertiary truncate text-xs",
-								children: prop.description
+				children: group.properties.map((prop) => {
+					var _prop$dataType;
+					return /* @__PURE__ */ jsxs("div", {
+						className: cn("hover:bg-bg-subtle flex items-center rounded-md transition-colors", prop.hidden && "opacity-60"),
+						children: [/* @__PURE__ */ jsxs("button", {
+							onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(prop),
+							className: "flex min-w-0 flex-1 items-center justify-between px-2.5 py-1.5 text-left",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "min-w-0",
+								children: [
+									/* @__PURE__ */ jsx(FieldToken, {
+										type: (_prop$dataType = prop.dataType) !== null && _prop$dataType !== void 0 ? _prop$dataType : resolveFieldType(prop.type),
+										size: "xs",
+										title: prop.type,
+										className: "mr-2 align-[-2px]"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-text-primary text-sm font-medium",
+										children: prop.name
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-text-tertiary ml-2 font-mono text-xs",
+										children: prop.type
+									}),
+									prop.hidden && /* @__PURE__ */ jsx("span", {
+										className: "text-text-tertiary ml-2 text-xs",
+										children: labels.hidden
+									}),
+									prop.description && /* @__PURE__ */ jsx("p", {
+										className: "text-text-tertiary truncate text-xs",
+										children: prop.description
+									})
+								]
+							}), prop.eventCount !== void 0 && /* @__PURE__ */ jsx("span", {
+								className: "text-text-tertiary ml-2 shrink-0 text-xs",
+								children: formatOptNumber(prop.eventCount)
+							})]
+						}), onEdit && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => onEdit(prop),
+							"aria-label": labels.edit(prop.name),
+							className: "text-text-tertiary hover:text-text-primary mr-1.5 shrink-0 rounded p-1",
+							children: /* @__PURE__ */ jsx(Pencil, {
+								"aria-hidden": "true",
+								className: "size-3.5"
 							})
-						]
-					}), prop.eventCount !== void 0 && /* @__PURE__ */ jsx("span", {
-						className: "text-text-tertiary ml-2 shrink-0 text-xs",
-						children: formatOptNumber(prop.eventCount)
-					})]
-				}, prop.name))
+						})]
+					}, prop.name);
+				})
 			})] }, group.name)), filtered.length === 0 && /* @__PURE__ */ jsx("p", {
 				className: "text-text-tertiary py-4 text-center text-sm",
 				children: labels.noPropertiesFound
@@ -2117,14 +2477,14 @@ function PropertyExplorer({ groups, onSelect, className, labels: customLabels })
 PropertyExplorer.displayName = "PropertyExplorer";
 //#endregion
 //#region src/shells/query-results-table.tsx
-const defaultLabels$21 = {
+const defaultLabels$24 = {
 	emptyMessage: "No results",
 	loadingMessage: "Running query...",
 	rowsSuffix: "row(s)"
 };
 /** Renders the query results table component. */
 function QueryResultsTable({ columns, rows, maxHeight = 400, emptyMessage, loading = false, error, labels: customLabels, className }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$21), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$24), customLabels);
 	if (error) return /* @__PURE__ */ jsx("div", {
 		className: cn("border-danger bg-danger-subtle rounded-lg border p-4", className),
 		role: "alert",
@@ -2208,7 +2568,7 @@ function QueryResultsTable({ columns, rows, maxHeight = 400, emptyMessage, loadi
 QueryResultsTable.displayName = "QueryResultsTable";
 //#endregion
 //#region src/shells/alert-builder.tsx
-const defaultLabels$20 = {
+const defaultLabels$23 = {
 	alertNameLabel: "Alert name",
 	conditionsLabel: "Conditions",
 	metricLabel: "Metric",
@@ -2279,7 +2639,7 @@ function AlertBuilder({ value, onChange, metrics = [
 ], labels: customLabels, className }) {
 	const resolvedMetrics = eventOptions ? eventOptions.map((e) => e.id) : metrics;
 	const metricLabelMap = eventOptions ? Object.fromEntries(eventOptions.map((e) => [e.id, e.name])) : null;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$20), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$23), customLabels);
 	const alertNameId = React.useId();
 	const conditionsId = React.useId();
 	const checkFrequencyId = React.useId();
@@ -2434,7 +2794,7 @@ function AlertBuilder({ value, onChange, metrics = [
 AlertBuilder.displayName = "AlertBuilder";
 //#endregion
 //#region src/shells/sql-editor.tsx
-const defaultLabels$19 = {
+const defaultLabels$22 = {
 	placeholder: "SELECT * FROM events LIMIT 100",
 	runHint: "Ctrl+Enter to run",
 	runButton: "Run Query",
@@ -2442,7 +2802,7 @@ const defaultLabels$19 = {
 };
 /** Renders the sql editor component. */
 function SqlEditor({ value, onChange, onRun, onRunAndAdvance, placeholder, readOnly = false, height = 200, schema, completionSources, keymap: customKeymap, extensions: customExtensions, ariaLabel, autoFocus = false, showFooter, labels: customLabels, className }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$19), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$22), customLabels);
 	const fill = height === "fill";
 	const footerVisible = showFooter !== null && showFooter !== void 0 ? showFooter : Boolean(onRun);
 	const editorRef = React.useRef(null);
@@ -2614,7 +2974,7 @@ function SqlEditor({ value, onChange, onRun, onRunAndAdvance, placeholder, readO
 SqlEditor.displayName = "SqlEditor";
 //#endregion
 //#region src/shells/event-meta-editor.tsx
-const defaultLabels$18 = {
+const defaultLabels$21 = {
 	icon: "Icon",
 	color: "Color",
 	name: "Event name",
@@ -2628,8 +2988,8 @@ const defaultLabels$18 = {
 	emptyTagsMessage: "No tags added yet."
 };
 /** Renders the event meta editor component. */
-function EventMetaEditor({ value, onChange, icons, className, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$18), customLabels);
+function EventMetaEditor({ value, onChange, icons, sections, footer, className, labels: customLabels }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$21), customLabels);
 	const hasTags = value.tags.length > 0;
 	const nameId = React.useId();
 	const displayNameId = React.useId();
@@ -2722,17 +3082,32 @@ function EventMetaEditor({ value, onChange, icons, className, labels: customLabe
 					className: "text-text-tertiary mt-1 block text-xs",
 					children: labels.emptyTagsMessage
 				})
-			] })
+			] }),
+			sections === null || sections === void 0 ? void 0 : sections.map((section) => /* @__PURE__ */ jsxs("section", {
+				className: "gap-element flex flex-col",
+				children: [
+					section.title && /* @__PURE__ */ jsx("span", {
+						className: "text-text-tertiary block text-xs font-medium",
+						children: section.title
+					}),
+					section.children,
+					section.description && /* @__PURE__ */ jsx("span", {
+						className: "text-text-tertiary block text-xs",
+						children: section.description
+					})
+				]
+			}, section.id)),
+			footer
 		]
 	});
 }
 EventMetaEditor.displayName = "EventMetaEditor";
 //#endregion
 //#region src/shells/widget-grid.tsx
-const defaultLabels$17 = { emptyMessage: "No widgets to display" };
+const defaultLabels$20 = { emptyMessage: "No widgets to display" };
 /** Renders the widget grid component. */
 function WidgetGrid({ widgets, cols = 12, rowHeight = 80, gap = 16, editable = false, onReorder, labels: customLabels, className }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$17), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$20), customLabels);
 	const [dragIdx, setDragIdx] = React.useState(null);
 	const [overIdx, setOverIdx] = React.useState(null);
 	if (widgets.length === 0) return /* @__PURE__ */ jsx("div", {
@@ -2777,7 +3152,7 @@ function WidgetGrid({ widgets, cols = 12, rowHeight = 80, gap = 16, editable = f
 WidgetGrid.displayName = "WidgetGrid";
 //#endregion
 //#region src/shells/report-builder.tsx
-const defaultLabels$16 = {
+const defaultLabels$19 = {
 	stepsLabel: "Report steps",
 	stepType: "Chart Type",
 	stepConfig: "Data Config",
@@ -2853,7 +3228,7 @@ const STEPS = [
 ];
 /** Renders the report builder component. */
 function ReportBuilder({ chartTypes = DEFAULT_CHART_TYPES, dataSources = [], onSave, onCancel, configForm, styleForm, preview, onChartTypeChange, onDataSourceChange, onStepChange, selectedChartType: controlledChartType, selectedDataSource: controlledDataSource, labels: customLabels, className }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$16), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$19), customLabels);
 	const [stepIndex, setStepIndex] = React.useState(0);
 	const [internalChartType, setInternalChartType] = React.useState(null);
 	const [internalDataSource, setInternalDataSource] = React.useState("");
@@ -3073,7 +3448,7 @@ function ReportBuilder({ chartTypes = DEFAULT_CHART_TYPES, dataSources = [], onS
 ReportBuilder.displayName = "ReportBuilder";
 //#endregion
 //#region src/shells/audit-timeline.tsx
-const defaultLabels$15 = {
+const defaultLabels$18 = {
 	title: "변경 이력",
 	empty: "변경 이력이 없습니다",
 	expand: "상세 보기",
@@ -3152,7 +3527,7 @@ function DiffTable({ changes, labels }) {
 }
 /** Renders the audit timeline component. */
 function AuditTimeline({ entries, labels: customLabels, className, onEntryClick }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$15), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$18), customLabels);
 	const [expandedIds, setExpandedIds] = React.useState(/* @__PURE__ */ new Set());
 	const toggleExpanded = React.useCallback((id) => {
 		setExpandedIds((prev) => {
@@ -3275,7 +3650,7 @@ function AuditTimeline({ entries, labels: customLabels, className, onEntryClick
 AuditTimeline.displayName = "AuditTimeline";
 //#endregion
 //#region src/shells/segment-builder.tsx
-const defaultLabels$14 = {
+const defaultLabels$17 = {
 	match: "Match",
 	ofTheFollowing: "of the following",
 	groupLabel: "Segment group",
@@ -3396,7 +3771,7 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 	"New Users",
 	"Power Users"
 ], className, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$14), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$17), customLabels);
 	const builderId = React.useId().replace(/:/g, "");
 	const nextIdRef = React.useRef(1);
 	const createId = React.useCallback(() => {
@@ -3609,7 +3984,7 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 SegmentBuilder.displayName = "SegmentBuilder";
 //#endregion
 //#region src/shells/insights-panel.tsx
-const defaultLabels$13 = {
+const defaultLabels$16 = {
 	title: "Insights",
 	dismiss: "Dismiss",
 	showDismissed: "Show dismissed",
@@ -3640,7 +4015,7 @@ const severityConfig = {
 /** Renders the insights panel component. */
 function InsightsPanel({ insights, stats, detectionTypes, onDetectionTypeToggle, detectionConfig, onDetectionConfigChange, onDismiss, onInsightClick, onStatClick, header, actions, labels: customLabels, className }) {
 	var _detectionConfig$days, _detectionConfig$zSco;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$13), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$16), customLabels);
 	const [showDismissed, setShowDismissed] = React.useState(false);
 	const visibleInsights = showDismissed ? insights : insights.filter((i) => !i.dismissed);
 	const hasStats = stats && stats.length > 0;
@@ -4032,7 +4407,7 @@ function ExportButton({ data, columns, fileName = "export", formats = ["csv", "j
 ExportButton.displayName = "ExportButton";
 //#endregion
 //#region src/shells/summary-row.tsx
-const defaultLabels$12 = {
+const defaultLabels$15 = {
 	emptyTitle: "No summary stats",
 	emptyDescription: "Provide at least one stat to render the summary row."
 };
@@ -4056,7 +4431,7 @@ const colsClass = {
 };
 /** Renders the summary row component. */
 function SummaryRow({ stats, columns = 4, onStatClick, selectedStatId, size = "md", formatValue, durationFractionDigits = 1, percentageFractionDigits = 1, loading = false, labels: customLabels, className }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$12), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$15), customLabels);
 	if (loading) return /* @__PURE__ */ jsx("div", {
 		className: cn("gap-group grid", colsClass[columns], className),
 		"data-opt-id": "FGFP3",
@@ -4096,6 +4471,505 @@ function SummaryRow({ stats, columns = 4, onStatClick, selectedStatId, size = "m
 }
 SummaryRow.displayName = "SummaryRow";
 //#endregion
+//#region src/lib/query/query-match.ts
+function toText(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 compare(left, right) {
+	const leftNumber = typeof left === "number" ? left : Number(toText(left));
+	const rightNumber = Number(right);
+	if (Number.isFinite(leftNumber) && Number.isFinite(rightNumber)) return leftNumber - rightNumber;
+	return toText(left).localeCompare(right);
+}
+function matchesClause(clause, read, searchable) {
+	if (clause.type === "term") return searchable().toLowerCase().includes(clause.value.toLowerCase());
+	const value = read(clause.field);
+	switch (clause.operator) {
+		case "exists": return value !== void 0 && value !== null && value !== "";
+		case "eq": return clause.values.some((candidate) => toText(value).toLowerCase() === candidate.toLowerCase());
+		case "contains": return clause.values.some((candidate) => toText(value).toLowerCase().includes(candidate.toLowerCase()));
+		case "gt":
+			var _clause$values$;
+			return compare(value, (_clause$values$ = clause.values[0]) !== null && _clause$values$ !== void 0 ? _clause$values$ : "") > 0;
+		case "gte":
+			var _clause$values$2;
+			return compare(value, (_clause$values$2 = clause.values[0]) !== null && _clause$values$2 !== void 0 ? _clause$values$2 : "") >= 0;
+		case "lt":
+			var _clause$values$3;
+			return compare(value, (_clause$values$3 = clause.values[0]) !== null && _clause$values$3 !== void 0 ? _clause$values$3 : "") < 0;
+		case "lte":
+			var _clause$values$4;
+			return compare(value, (_clause$values$4 = clause.values[0]) !== null && _clause$values$4 !== void 0 ? _clause$values$4 : "") <= 0;
+		default: return true;
+	}
+}
+/**
+* Whether one row satisfies every clause.
+*
+* `searchable` is lazy because most queries are field constraints, and
+* flattening a row to text for a term match nobody asked for is the expensive
+* part of filtering a live tail.
+*/
+function matchesQuery(query, read, searchable) {
+	return query.clauses.every((clause) => {
+		const matched = matchesClause(clause, read, searchable);
+		return clause.negated ? !matched : matched;
+	});
+}
+/** Convenience for plain objects, including one level of nested properties. */
+function matchesQueryObject(query, row, options = {}) {
+	const nested = options.nested ? row[options.nested] : void 0;
+	const read = (field) => field in row ? row[field] : nested === null || nested === void 0 ? void 0 : nested[field];
+	let cached = null;
+	const searchable = () => {
+		var _cached;
+		(_cached = cached) !== null && _cached !== void 0 || (cached = [...Object.values(row).filter((value) => typeof value !== "object"), ...Object.values(nested !== null && nested !== void 0 ? nested : {})].map(toText).join(" "));
+		return cached;
+	};
+	return matchesQuery(query, read, searchable);
+}
+//#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/inspector-layout.tsx
+/** Tailwind needs whole class names, so the queries and widths are literals. */
+const breakpointQuery = {
+	lg: "(min-width: 64rem)",
+	xl: "(min-width: 80rem)",
+	"2xl": "(min-width: 96rem)"
+};
+const pushWidth = {
+	sm: "w-[22rem]",
+	md: "w-[30rem]",
+	lg: "w-[42rem]"
+};
+const flyoutSize = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+};
+/**
+* InspectorLayout — a list and the record it is showing, side by side.
+*
+* Reading a catalogue is a loop: look at the list, open one, decide, come back.
+* A dialog breaks that loop — it takes the list away, and coming back costs the
+* reader their scroll position and their place in the scan. This keeps both on
+* screen where there is room, and falls back to an overlay where there is not.
+*
+* Every surface that wanted this was writing `w-80 border-l` by hand and
+* re-deciding the two things that are easy to get wrong: which width switches
+* the layout, and whether the list stays mounted.
+*
+* Focus is deliberately **not** one of them. `Flyout` already remembers who
+* opened it and hands focus back on close, and its effect runs before this
+* one — a parent that also tried to capture `document.activeElement` would
+* read the panel the child had just focused and "restore" to a node that is
+* about to be removed. One owner, and it is the one closest to the panel.
+*
+* @example
+* ```tsx
+* <InspectorLayout
+*   open={selected !== null}
+*   onClose={() => setSelected(null)}
+*   title={selected?.name}
+*   inspector={<EventInspector name={selected?.name} />}
+* >
+*   <DataTable … />
+* </InspectorLayout>
+* ```
+*/
+function InspectorLayout({ children, inspector, open, onClose, title, description, actions, footer, breakpoint = "xl", width = "md", labels, className }) {
+	const canPush = useMediaQuery(breakpointQuery[breakpoint], true);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 items-stretch gap-group", className),
+		"data-opt-id": "MN44T",
+		"data-opt-slug": "inspector-layout.InspectorLayout",
+		"data-inspector-mode": canPush ? "push" : "overlay",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			children
+		}), canPush ? open && /* @__PURE__ */ jsx("aside", {
+			className: cn("shrink-0", pushWidth[width]),
+			children: /* @__PURE__ */ jsx(Flyout, {
+				open,
+				onClose,
+				type: "inline",
+				title,
+				description,
+				actions,
+				footer,
+				labels,
+				className: "h-full",
+				children: inspector
+			})
+		}) : /* @__PURE__ */ jsx(Flyout, {
+			open,
+			onClose,
+			type: "overlay",
+			scrim: true,
+			size: flyoutSize[width],
+			title,
+			description,
+			actions,
+			footer,
+			labels,
+			children: inspector
+		})]
+	});
+}
+//#endregion
+//#region src/shells/query-filter-bar.tsx
+const defaultLabels$14 = {
+	placeholder: "검색하거나 필터를 입력하세요",
+	ariaLabel: "검색",
+	filtersAriaLabel: "필터",
+	clearAll: "필터 지우기",
+	activeCount: (count) => `${count}개 적용됨`
+};
+function toggleValue(query, field, value, active, multiSelect) {
+	if (active) {
+		const remaining = fieldValues(query, field).filter((it) => it !== value);
+		const cleared = withoutField(query, field);
+		return remaining.reduce((next, keep) => withFieldValue(next, field, keep), cleared);
+	}
+	return multiSelect ? withFieldValue(query, field, value) : withFieldValue(withoutField(query, field), field, value);
+}
+/**
+* QueryFilterBar — filter buttons and a query string that are the same thing.
+*
+* The failure this exists to prevent is two sources of truth. A search box
+* beside a row of filter buttons will drift: the buttons keep their own state,
+* the box keeps the text, and a link to the page carries one of them. Readers
+* find the two disagreeing and stop trusting either.
+*
+* So the buttons hold no state at all. Each one reads the query to decide
+* whether it is active and writes the query when clicked, which makes the
+* behaviour fall out for free: typing `status:archived` lights up the status
+* filter, clicking the filter puts `status:archived` in the box, and the URL
+* that carries the query carries the whole filter state with it.
+*
+* @example
+* ```tsx
+* <QueryFilterBar
+*   value={query}
+*   onChange={setQuery}
+*   filters={[
+*     { id: "conversion", label: "전환", kind: "is", field: "is", value: "conversion" },
+*     { id: "status", label: "상태", kind: "field_value_selection", field: "status",
+*       options: [{ value: "archived", label: "보관", count: 12 }] },
+*   ]}
+* />
+* ```
+*/
+function QueryFilterBar({ value, onChange, filters, fields, actions, showClauses = true, live = false, disabled = false, labels: customLabels, queryBarLabels, className }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$14), customLabels);
+	const activeCount = useMemo(() => filters.reduce((count, filter) => {
+		const values = fieldValues(value, filter.field);
+		if (filter.kind === "field_value_selection") return count + values.length;
+		return count + (filter.value && values.includes(filter.value) ? 1 : 0);
+	}, 0), [filters, value]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-element", className),
+		"data-opt-id": "SK31N",
+		"data-opt-slug": "query-filter-bar.QueryFilterBar",
+		children: [/* @__PURE__ */ jsx(QueryBar, {
+			value,
+			onChange,
+			fields,
+			showClauses,
+			live,
+			disabled,
+			labels: _objectSpread2(_objectSpread2({}, queryBarLabels), {}, {
+				placeholder: labels.placeholder,
+				ariaLabel: labels.ariaLabel
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "gap-element flex flex-wrap items-center",
+			role: "group",
+			"aria-label": labels.filtersAriaLabel,
+			children: [
+				filters.map((filter) => {
+					var _filter$multiSelect, _filter$value;
+					const values = fieldValues(value, filter.field);
+					const multiSelect = (_filter$multiSelect = filter.multiSelect) !== null && _filter$multiSelect !== void 0 ? _filter$multiSelect : true;
+					if (filter.kind === "field_value_selection") {
+						var _filter$options, _filter$options2;
+						const selected = (_filter$options = filter.options) === null || _filter$options === void 0 ? void 0 : _filter$options.filter((option) => values.includes(option.value));
+						return /* @__PURE__ */ jsxs(PopoverRoot, { children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+							disabled,
+							className: cn("inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs transition-colors", OPT_FOCUS_VISIBLE, (selected === null || selected === void 0 ? void 0 : selected.length) ? "border-accent bg-accent-subtle text-text-primary" : "border-border text-text-secondary hover:text-text-primary", disabled && "pointer-events-none opacity-50"),
+							children: [
+								/* @__PURE__ */ jsx("span", { children: filter.label }),
+								(selected === null || selected === void 0 ? void 0 : selected.length) ? /* @__PURE__ */ jsx(Badge, {
+									variant: "info",
+									size: "sm",
+									children: selected.length
+								}) : null,
+								/* @__PURE__ */ jsx(ChevronDown, {
+									"aria-hidden": "true",
+									className: "size-3"
+								})
+							]
+						}), /* @__PURE__ */ jsx(PopoverContent, {
+							className: "min-w-48 p-1",
+							children: /* @__PURE__ */ jsx("div", {
+								role: "group",
+								"aria-label": filter.label,
+								children: (_filter$options2 = filter.options) === null || _filter$options2 === void 0 ? void 0 : _filter$options2.map((option) => {
+									const active = values.includes(option.value);
+									return /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										disabled,
+										"aria-pressed": active,
+										onClick: () => onChange(toggleValue(value, filter.field, option.value, active, multiSelect)),
+										className: cn("flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs", "hover:bg-bg-subtle", "disabled:pointer-events-none disabled:opacity-50", OPT_FOCUS_VISIBLE),
+										children: [
+											/* @__PURE__ */ jsx(Check, {
+												"aria-hidden": "true",
+												className: cn("size-3 shrink-0", active ? "opacity-100" : "opacity-0")
+											}),
+											/* @__PURE__ */ jsx("span", {
+												className: "flex-1 truncate",
+												children: option.label
+											}),
+											option.count != null && /* @__PURE__ */ jsx("span", {
+												className: "text-text-tertiary tabular-nums",
+												children: option.count
+											})
+										]
+									}, option.value);
+								})
+							})
+						})] }, filter.id);
+					}
+					const filterValue = (_filter$value = filter.value) !== null && _filter$value !== void 0 ? _filter$value : filter.id;
+					const active = values.includes(filterValue);
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled,
+						"aria-pressed": active,
+						onClick: () => onChange(toggleValue(value, filter.field, filterValue, active, multiSelect)),
+						className: cn("inline-flex h-7 items-center rounded-md border px-2 text-xs transition-colors", OPT_FOCUS_VISIBLE, active ? "border-accent bg-accent-subtle text-text-primary" : "border-border text-text-secondary hover:text-text-primary", "disabled:pointer-events-none disabled:opacity-50"),
+						children: filter.label
+					}, filter.id);
+				}),
+				activeCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-text-tertiary text-xs",
+					children: labels.activeCount(activeCount)
+				}), /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					disabled,
+					onClick: () => onChange({ clauses: [] }),
+					children: [/* @__PURE__ */ jsx(X, {
+						"aria-hidden": "true",
+						className: "size-3"
+					}), labels.clearAll]
+				})] }),
+				actions
+			]
+		})]
+	});
+}
+/** Whether the bar is filtering anything — for an empty state's wording. */
+function hasActiveQuery(query) {
+	return !isEmptyQuery(query);
+}
+//#endregion
+//#region src/shells/catalog-frame.tsx
+/**
+* CatalogRowActions — a row's actions, two of them visible.
+*
+* Beyond two, a row's action column starts competing with the row's content
+* for the reader's eye, so the rest go behind one menu. The click never
+* reaches the row: acting on a row and selecting it are different intentions,
+* and a table that does both at once is one a reader stops trusting.
+*/
+function CatalogRowActions({ item, actions, visibleCount = 2, labels }) {
+	var _labels$rowActions, _labels$moreActions;
+	const applicable = actions.filter((action) => {
+		var _action$available, _action$available2;
+		return (_action$available = (_action$available2 = action.available) === null || _action$available2 === void 0 ? void 0 : _action$available2.call(action, item)) !== null && _action$available !== void 0 ? _action$available : true;
+	});
+	const visible = applicable.slice(0, visibleCount);
+	const overflow = applicable.slice(visibleCount);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-end gap-1",
+		role: "group",
+		"aria-label": (_labels$rowActions = labels === null || labels === void 0 ? void 0 : labels.rowActions) !== null && _labels$rowActions !== void 0 ? _labels$rowActions : "행 액션",
+		onClick: (event) => event.stopPropagation(),
+		children: [visible.map((action) => /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			size: "sm",
+			onClick: () => action.onSelect(item),
+			children: [action.icon, action.label]
+		}, action.id)), overflow.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownTrigger, {
+			"aria-label": (_labels$moreActions = labels === null || labels === void 0 ? void 0 : labels.moreActions) !== null && _labels$moreActions !== void 0 ? _labels$moreActions : "더 보기",
+			children: /* @__PURE__ */ jsx(MoreHorizontal, {
+				"aria-hidden": "true",
+				className: "size-4"
+			})
+		}), /* @__PURE__ */ jsx(DropdownContent, { children: overflow.map((action) => /* @__PURE__ */ jsx(DropdownItem, {
+			onClick: () => action.onSelect(item),
+			children: action.label
+		}, action.id)) })] })]
+	});
+}
+/**
+* Keeps a cell's own controls from also selecting the row.
+*
+* A click on a switch or a copy button reaches the row handler on its way up,
+* so toggling a flag would open the inspector at the same time.
+*/
+function CatalogCellControls({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "contents",
+		onClick: (event) => event.stopPropagation(),
+		children
+	});
+}
+const defaultLabels$13 = {
+	emptyTitle: "아직 아무것도 없습니다",
+	emptyDescription: "데이터가 도착하면 여기에 나타납니다.",
+	filteredEmptyTitle: "조건에 맞는 항목이 없습니다",
+	filteredEmptyDescription: "필터를 지우면 전체 목록이 보입니다.",
+	clearFilters: "필터 지우기",
+	errorTitle: "목록을 불러오지 못했습니다",
+	retry: "다시 시도"
+};
+/**
+* CatalogFrame — the shape every catalogue list has.
+*
+* Two catalogues (events, properties) differ only in their columns and their
+* words; everything around the table is the same, and writing it twice meant
+* two copies of the decisions that are easy to get wrong — that a failed read
+* must not look like an empty list, that an empty list reads differently when a
+* filter is on, and that a selection must not survive a filter change.
+*
+* The last one is enforced here rather than left to the caller. A bulk action
+* applied to rows the reader can no longer see is the kind of mistake that is
+* only noticed afterwards.
+*/
+function CatalogFrame({ children, isEmpty, query, onQueryChange, filters, stats, onStatClick, notice, emptyActions, header, actions, toolbar, inspector, inspectorOpen, onInspectorClose, inspectorTitle, inspectorDescription, inspectorActions, inspectorFooter, inspectorWidth, page = 1, pageSize = 50, totalCount, onPageChange, selectedKeys, onSelectionChange, bulkActions, onBulkAction, error, onRetry, labels: customLabels, className }) {
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$13), customLabels);
+	const lastScope = useRef({
+		query,
+		page
+	});
+	useEffect(() => {
+		const changed = lastScope.current.query !== query || lastScope.current.page !== page;
+		lastScope.current = {
+			query,
+			page
+		};
+		if (changed && selectedKeys && selectedKeys.length > 0) onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange([]);
+	}, [
+		query,
+		page,
+		selectedKeys,
+		onSelectionChange
+	]);
+	const filtering = !isEmptyQuery(query);
+	const body = error ? /* @__PURE__ */ jsx(EmptyState, {
+		tone: "error",
+		hasBorder: true,
+		title: labels.errorTitle,
+		body: error,
+		actions: onRetry ? /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			onClick: onRetry,
+			children: labels.retry
+		}) : void 0
+	}) : isEmpty ? /* @__PURE__ */ jsx(EmptyState, {
+		tone: "subdued",
+		hasBorder: true,
+		title: filtering ? labels.filteredEmptyTitle : labels.emptyTitle,
+		description: filtering ? labels.filteredEmptyDescription : labels.emptyDescription,
+		actions: filtering ? /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			onClick: () => onQueryChange({ clauses: [] }),
+			children: labels.clearFilters
+		}) : emptyActions
+	}) : children;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-section", className),
+		children: [
+			(header || actions) && /* @__PURE__ */ jsxs("div", {
+				className: "gap-group flex min-w-0 flex-col lg:flex-row lg:items-start lg:justify-between",
+				children: [header && /* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: header
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: "gap-element flex flex-wrap items-center",
+					children: actions
+				})]
+			}),
+			stats && stats.length > 0 && /* @__PURE__ */ jsx(SummaryRow, {
+				stats,
+				onStatClick
+			}),
+			notice,
+			toolbar && /* @__PURE__ */ jsx("div", {
+				className: "gap-group flex flex-wrap items-center",
+				children: toolbar
+			}),
+			filters && filters.length > 0 && /* @__PURE__ */ jsx(QueryFilterBar, {
+				value: query,
+				onChange: onQueryChange,
+				filters,
+				disabled: Boolean(error)
+			}),
+			/* @__PURE__ */ jsx(InspectorLayout, {
+				open: inspectorOpen && Boolean(inspector),
+				onClose: onInspectorClose,
+				inspector,
+				title: inspectorTitle,
+				description: inspectorDescription,
+				actions: inspectorActions,
+				footer: inspectorFooter,
+				width: inspectorWidth,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "gap-group flex flex-col",
+					children: [body, onPageChange && totalCount != null && totalCount > pageSize && /* @__PURE__ */ jsx(Pagination, {
+						currentPage: page,
+						totalPages: Math.ceil(totalCount / pageSize),
+						onPageChange
+					})]
+				})
+			}),
+			bulkActions && bulkActions.length > 0 && onBulkAction && selectedKeys && selectedKeys.length > 0 && /* @__PURE__ */ jsx(FloatingActionBar, {
+				actions: bulkActions,
+				selectedCount: selectedKeys.length,
+				onAction: onBulkAction,
+				onDismiss: () => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([])
+			})
+		]
+	});
+}
+//#endregion
 //#region src/shells/comparison-selector.tsx
 /** Renders the comparison selector component. */
 function ComparisonSelector({ segments, valueA, valueB, onChangeA, onChangeB, values, onValuesChange, maxItems = 5, labels: customLabels, className }) {
@@ -5250,7 +6124,7 @@ function ThemeSwitcher({ className, labels: userLabels, variant = "default", cus
 ThemeSwitcher.displayName = "ThemeSwitcher";
 //#endregion
 //#region src/shells/prompt-template.tsx
-const defaultLabels$11 = {
+const defaultLabels$12 = {
 	copy: "Copy",
 	copied: "Copied!",
 	copyFailed: "Copy failed"
@@ -5260,7 +6134,7 @@ function renderPrompt(template, values) {
 }
 /** Renders the prompt template component. */
 function PromptTemplate({ title, description, template, variables = [], className, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$11), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$12), customLabels);
 	const [values, setValues] = React.useState(() => {
 		const initial = {};
 		for (const v of variables) if (v.defaultValue) initial[v.name] = v.defaultValue;
@@ -5749,14 +6623,14 @@ function AsyncCombobox({ onSearch, debounceMs = 300, loadingText, minChars = 1,
 }
 //#endregion
 //#region src/shells/vertical-tabs.tsx
-const defaultLabels$10 = {
+const defaultLabels$11 = {
 	ariaLabel: "Vertical tabs",
 	emptyMessage: "No tabs available"
 };
 /** Renders the vertical tabs component. */
 function VerticalTabs({ tabs, defaultTabId, labels: customLabels, className }) {
 	var _tabs$;
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$10), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$11), customLabels);
 	if (tabs.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: cn("text-text-secondary text-sm", className),
 		"data-opt-id": "J81G4",
@@ -5765,6 +6639,7 @@ function VerticalTabs({ tabs, defaultTabId, labels: customLabels, className }) {
 	});
 	return /* @__PURE__ */ jsx(TabsRoot, {
 		defaultSelectedId: defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id,
+		orientation: "vertical",
 		"data-opt-id": "J81G4",
 		"data-opt-slug": "vertical-tabs.VerticalTabs",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -5789,13 +6664,13 @@ function VerticalTabs({ tabs, defaultTabId, labels: customLabels, className }) {
 }
 //#endregion
 //#region src/shells/column-toggler.tsx
-const defaultLabels$9 = {
+const defaultLabels$10 = {
 	triggerLabel: (count) => `Columns (${count})`,
 	emptyMessage: "No columns available"
 };
 /** Renders the column toggler component. */
 function ColumnToggler({ columns, visibleColumns, onChange, className, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$9), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$10), customLabels);
 	const visibleCount = visibleColumns.length;
 	const hasColumns = columns.length > 0;
 	const toggle = (id) => {
@@ -5874,7 +6749,7 @@ function BulkActions({ selectedCount, actions, onAction, onClear, labels: custom
 }
 //#endregion
 //#region src/shells/saved-filters.tsx
-const defaultLabels$8 = {
+const defaultLabels$9 = {
 	triggerLabel: (count) => `Saved Filters (${count})`,
 	emptyMessage: "No saved filters",
 	deleteLabel: (name) => `Delete ${name}`,
@@ -5885,7 +6760,7 @@ const defaultLabels$8 = {
 };
 /** Renders the saved filters component. */
 function SavedFilters({ currentFilters, presets, onSavePreset, onLoadPreset, onDeletePreset, className, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$8), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$9), customLabels);
 	const [newName, setNewName] = React.useState("");
 	const [pendingDeleteId, setPendingDeleteId] = React.useState(null);
 	const triggerId = React.useId();
@@ -6037,7 +6912,7 @@ function SavedFilters({ currentFilters, presets, onSavePreset, onLoadPreset, onD
 }
 //#endregion
 //#region src/shells/notification-center.tsx
-const defaultLabels$7 = {
+const defaultLabels$8 = {
 	triggerLabel: "Notifications",
 	unreadSuffix: (count) => `(${count} unread)`,
 	title: "Notifications",
@@ -6046,7 +6921,7 @@ const defaultLabels$7 = {
 };
 /** Renders the notification center component. */
 function NotificationCenter({ notifications, onMarkRead, onMarkAllRead, onAction, className, labels: customLabels }) {
-	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$7), customLabels);
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$8), customLabels);
 	const unreadCount = notifications.filter((n) => !n.read).length;
 	return /* @__PURE__ */ jsxs(PopoverRoot, {
 		"data-opt-id": "7A0XY",
@@ -6250,9 +7125,29 @@ function AuditLog({ entries, onLoadMore, loading, labels: customLabels, classNam
 AuditLog.displayName = "AuditLog";
 //#endregion
 //#region src/shells/tree-table.tsx
+const defaultLabels$7 = {
+	ariaLabel: "Tree table",
+	expand: (rowLabel) => `Expand ${rowLabel}`,
+	collapse: (rowLabel) => `Collapse ${rowLabel}`,
+	level: (depth) => `Level ${depth}`
+};
+function flattenTree(nodes, expanded, depth = 0, ancestorsVisible = true) {
+	return nodes.flatMap((node) => {
+		var _node$children;
+		const visible = ancestorsVisible;
+		return [{
+			node,
+			depth,
+			visible
+		}, ...flattenTree((_node$children = node.children) !== null && _node$children !== void 0 ? _node$children : [], expanded, depth + 1, visible && expanded.has(node.id))];
+	});
+}
 /** Renders the tree table component. */
-function TreeTable({ data, columns, defaultExpanded = [], indentSize = 24, className }) {
+function TreeTable({ data, columns, defaultExpanded = [], indentSize = 24, getRowLabel, labels: customLabels, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) {
 	const [expanded, setExpanded] = React.useState(() => new Set(defaultExpanded));
+	const baseId = React.useId();
+	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$7), customLabels);
+	const rows = flattenTree(data, expanded);
 	const toggle = (id) => {
 		setExpanded((prev) => {
 			const next = new Set(prev);
@@ -6266,46 +7161,82 @@ function TreeTable({ data, columns, defaultExpanded = [], indentSize = 24, class
 		if (typeof col.accessor === "function") return col.accessor(row);
 		return String((_row$col$accessor = row[col.accessor]) !== null && _row$col$accessor !== void 0 ? _row$col$accessor : "");
 	};
-	const renderRows = (nodes, depth) => nodes.flatMap((node) => {
-		const hasChildren = node.children && node.children.length > 0;
-		const isExpanded = expanded.has(node.id);
-		return [/* @__PURE__ */ jsx("tr", {
-			className: "border-border border-b",
-			children: columns.map((col, ci) => /* @__PURE__ */ jsx("td", {
-				className: cn(OPT_TD),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center",
-					style: ci === 0 ? { paddingLeft: depth * indentSize } : void 0,
-					children: [
-						ci === 0 && hasChildren && /* @__PURE__ */ jsx("button", {
-							type: "button",
-							onClick: () => toggle(node.id),
-							className: cn("mr-1 flex h-5 w-5 items-center justify-center rounded text-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
-							"aria-expanded": isExpanded,
-							"aria-label": isExpanded ? "Collapse" : "Expand",
-							children: isExpanded ? "▼" : "▶"
-						}),
-						ci === 0 && !hasChildren && /* @__PURE__ */ jsx("span", { className: "mr-1 inline-block w-5" }),
-						getCellValue(node.data, col)
-					]
-				})
-			}, col.id))
-		}, node.id), ...isExpanded && hasChildren ? renderRows(node.children, depth + 1) : []];
-	});
+	const rowId = (id) => `${baseId}-row-${encodeURIComponent(id)}`;
+	const resolveRowLabel = (node) => {
+		if (getRowLabel) return getRowLabel(node);
+		const firstColumn = columns[0];
+		if (firstColumn) {
+			const value = getCellValue(node.data, firstColumn);
+			if (typeof value === "string" || typeof value === "number") return String(value);
+		}
+		return node.id;
+	};
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("overflow-auto", className),
-		"data-opt-id": "EJRTW",
+		"data-opt-id": "PP194",
 		"data-opt-slug": "tree-table.TreeTable",
 		children: /* @__PURE__ */ jsxs("table", {
 			className: cn("w-full border-collapse", OPT_BORDER),
+			"aria-label": ariaLabelledBy == null ? ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.ariaLabel : void 0,
+			"aria-labelledby": ariaLabelledBy,
 			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
 				className: "border-border border-b",
 				children: columns.map((col) => /* @__PURE__ */ jsx("th", {
+					scope: "col",
 					className: cn(OPT_TH),
 					style: { width: col.width },
 					children: col.header
 				}, col.id))
-			}) }), /* @__PURE__ */ jsx("tbody", { children: renderRows(data, 0) })]
+			}) }), /* @__PURE__ */ jsx("tbody", { children: rows.map(({ node, depth, visible }) => {
+				var _node$children$length, _node$children2, _node$children3;
+				const hasChildren = ((_node$children$length = (_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) !== null && _node$children$length !== void 0 ? _node$children$length : 0) > 0;
+				const isExpanded = expanded.has(node.id);
+				const resolvedRowLabel = resolveRowLabel(node);
+				const controlledRows = ((_node$children3 = node.children) !== null && _node$children3 !== void 0 ? _node$children3 : []).map((child) => rowId(child.id)).join(" ");
+				return /* @__PURE__ */ jsx("tr", {
+					id: rowId(node.id),
+					hidden: !visible,
+					className: "border-border border-b",
+					children: columns.map((col, columnIndex) => {
+						const content = /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center",
+							style: columnIndex === 0 ? { paddingLeft: depth * indentSize } : void 0,
+							children: [
+								columnIndex === 0 && hasChildren && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => toggle(node.id),
+									className: cn("mr-1 flex h-5 w-5 items-center justify-center rounded text-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+									"aria-expanded": isExpanded,
+									"aria-controls": controlledRows || void 0,
+									"aria-label": isExpanded ? labels.collapse(resolvedRowLabel) : labels.expand(resolvedRowLabel),
+									children: /* @__PURE__ */ jsx("span", {
+										"aria-hidden": "true",
+										children: isExpanded ? "▼" : "▶"
+									})
+								}),
+								columnIndex === 0 && !hasChildren && /* @__PURE__ */ jsx("span", { className: "mr-1 inline-block w-5" }),
+								columnIndex === 0 && /* @__PURE__ */ jsxs("span", {
+									className: "sr-only",
+									children: [
+										labels.level(depth + 1),
+										".",
+										" "
+									]
+								}),
+								getCellValue(node.data, col)
+							]
+						});
+						return columnIndex === 0 ? /* @__PURE__ */ jsx("th", {
+							scope: "row",
+							className: cn(OPT_TD),
+							children: content
+						}, col.id) : /* @__PURE__ */ jsx("td", {
+							className: cn(OPT_TD),
+							children: content
+						}, col.id);
+					})
+				}, node.id);
+			}) })]
 		})
 	});
 }
@@ -7047,17 +7978,37 @@ function DataImportWizard({ fields, onImport, acceptedFormats = ".csv", labels:
 //#endregion
 //#region src/shells/mega-menu.tsx
 const defaultLabels$3 = { trigger: "Menu" };
+function MegaMenuItemContent({ item }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [item.icon && /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "text-text-secondary mt-0.5 flex-shrink-0",
+		children: item.icon
+	}), /* @__PURE__ */ jsxs("span", {
+		className: "flex flex-col text-left",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-text-primary text-sm font-medium",
+			children: item.label
+		}), item.description && /* @__PURE__ */ jsx("span", {
+			className: "text-text-tertiary text-xs",
+			children: item.description
+		})]
+	})] });
+}
 /** Renders the mega menu component. */
-function MegaMenu({ menus, columns = 3, footer, triggerLabel, labels: customLabels, className }) {
+function MegaMenu({ menus, columns = 3, footer, triggerLabel, labels: customLabels, className, "aria-label": ariaLabel }) {
+	var _ref;
 	const labels = _objectSpread2(_objectSpread2({}, defaultLabels$3), customLabels);
 	const resolvedTriggerLabel = triggerLabel !== null && triggerLabel !== void 0 ? triggerLabel : labels.trigger;
+	const navigationLabel = (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.navigation) !== null && _ref !== void 0 ? _ref : `${resolvedTriggerLabel} navigation`;
+	const itemClassName = "hover:bg-bg-subtle gap-element flex w-full items-start rounded-md p-2 transition-colors";
 	if (menus.length === 0) return null;
 	return /* @__PURE__ */ jsxs(PopoverRoot, {
-		"data-opt-id": "42177",
+		"data-opt-id": "AHTK9",
 		"data-opt-slug": "mega-menu.MegaMenu",
 		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
 			className: cn("border-border bg-surface text-text-primary hover:bg-bg-subtle inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-sm font-medium", className),
 			children: [resolvedTriggerLabel, /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
 				width: "12",
 				height: "12",
 				viewBox: "0 0 12 12",
@@ -7066,38 +8017,41 @@ function MegaMenu({ menus, columns = 3, footer, triggerLabel, labels: customLabe
 				strokeWidth: "1.5",
 				children: /* @__PURE__ */ jsx("path", { d: "M3 5l3 3 3-3" })
 			})]
-		}), /* @__PURE__ */ jsxs(PopoverContent, {
+		}), /* @__PURE__ */ jsx(PopoverContent, {
 			className: "w-auto max-w-2xl p-0",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "gap-group grid p-4",
-				style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
-				children: menus.map((section) => /* @__PURE__ */ jsxs("div", {
-					className: "gap-element flex flex-col",
-					children: [/* @__PURE__ */ jsx("h4", {
-						className: "text-text-tertiary text-xs font-semibold tracking-wider uppercase",
-						children: section.title
-					}), section.items.map((item) => /* @__PURE__ */ jsxs("a", {
-						href: item.href || "#",
-						className: "hover:bg-bg-subtle gap-element flex items-start rounded-md p-2 transition-colors",
-						children: [item.icon && /* @__PURE__ */ jsx("span", {
-							className: "text-text-secondary mt-0.5 flex-shrink-0",
-							children: item.icon
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "flex flex-col",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "text-text-primary text-sm font-medium",
-								children: item.label
-							}), item.description && /* @__PURE__ */ jsx("span", {
-								className: "text-text-tertiary text-xs",
-								children: item.description
-							})]
+			children: /* @__PURE__ */ jsxs("nav", {
+				"aria-label": navigationLabel,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "gap-group grid p-4",
+					style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+					children: menus.map((section) => /* @__PURE__ */ jsxs("div", {
+						className: "gap-element flex flex-col",
+						children: [/* @__PURE__ */ jsx("h4", {
+							className: "text-text-tertiary text-xs font-semibold tracking-wider uppercase",
+							children: section.title
+						}), section.items.map((item) => {
+							if (item.href != null) return /* @__PURE__ */ jsx("a", {
+								href: item.href,
+								className: itemClassName,
+								children: /* @__PURE__ */ jsx(MegaMenuItemContent, { item })
+							}, item.label);
+							if (item.onSelect) return /* @__PURE__ */ jsx(PopoverClose, {
+								onClick: item.onSelect,
+								className: itemClassName,
+								children: /* @__PURE__ */ jsx(MegaMenuItemContent, { item })
+							}, item.label);
+							return /* @__PURE__ */ jsx("span", {
+								"aria-disabled": "true",
+								className: cn(itemClassName, "cursor-not-allowed opacity-60"),
+								children: /* @__PURE__ */ jsx(MegaMenuItemContent, { item })
+							}, item.label);
 						})]
-					}, item.label))]
-				}, section.title))
-			}), footer && /* @__PURE__ */ jsx("div", {
-				className: "border-border bg-bg-subtle border-t px-4 py-3",
-				children: footer
-			})]
+					}, section.title))
+				}), footer && /* @__PURE__ */ jsx("div", {
+					className: "border-border bg-bg-subtle border-t px-4 py-3",
+					children: footer
+				})]
+			})
 		})]
 	});
 }
@@ -8295,67 +9249,4 @@ const enStarRatingLabels = {
 };
 const enBreadcrumbLabels = { navAriaLabel: "Go to {label}" };
 //#endregion
-//#region src/lib/query/query-match.ts
-function toText(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 compare(left, right) {
-	const leftNumber = typeof left === "number" ? left : Number(toText(left));
-	const rightNumber = Number(right);
-	if (Number.isFinite(leftNumber) && Number.isFinite(rightNumber)) return leftNumber - rightNumber;
-	return toText(left).localeCompare(right);
-}
-function matchesClause(clause, read, searchable) {
-	if (clause.type === "term") return searchable().toLowerCase().includes(clause.value.toLowerCase());
-	const value = read(clause.field);
-	switch (clause.operator) {
-		case "exists": return value !== void 0 && value !== null && value !== "";
-		case "eq": return clause.values.some((candidate) => toText(value).toLowerCase() === candidate.toLowerCase());
-		case "contains": return clause.values.some((candidate) => toText(value).toLowerCase().includes(candidate.toLowerCase()));
-		case "gt":
-			var _clause$values$;
-			return compare(value, (_clause$values$ = clause.values[0]) !== null && _clause$values$ !== void 0 ? _clause$values$ : "") > 0;
-		case "gte":
-			var _clause$values$2;
-			return compare(value, (_clause$values$2 = clause.values[0]) !== null && _clause$values$2 !== void 0 ? _clause$values$2 : "") >= 0;
-		case "lt":
-			var _clause$values$3;
-			return compare(value, (_clause$values$3 = clause.values[0]) !== null && _clause$values$3 !== void 0 ? _clause$values$3 : "") < 0;
-		case "lte":
-			var _clause$values$4;
-			return compare(value, (_clause$values$4 = clause.values[0]) !== null && _clause$values$4 !== void 0 ? _clause$values$4 : "") <= 0;
-		default: return true;
-	}
-}
-/**
-* Whether one row satisfies every clause.
-*
-* `searchable` is lazy because most queries are field constraints, and
-* flattening a row to text for a term match nobody asked for is the expensive
-* part of filtering a live tail.
-*/
-function matchesQuery(query, read, searchable) {
-	return query.clauses.every((clause) => {
-		const matched = matchesClause(clause, read, searchable);
-		return clause.negated ? !matched : matched;
-	});
-}
-/** Convenience for plain objects, including one level of nested properties. */
-function matchesQueryObject(query, row, options = {}) {
-	const nested = options.nested ? row[options.nested] : void 0;
-	const read = (field) => field in row ? row[field] : nested === null || nested === void 0 ? void 0 : nested[field];
-	let cached = null;
-	const searchable = () => {
-		var _cached;
-		(_cached = cached) !== null && _cached !== void 0 || (cached = [...Object.values(row).filter((value) => typeof value !== "object"), ...Object.values(nested !== null && nested !== void 0 ? nested : {})].map(toText).join(" "));
-		return cached;
-	};
-	return matchesQuery(query, read, searchable);
-}
-//#endregion
-export { ALL_COMPOUND_THEMES, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActivityFeed, Alert, AlertBuilder, AlertDialogPanel, AppMenubar, AppShell, AsyncCombobox, AuditLog, AuditTimeline, AuthForm, Avatar, AvatarGroup, Badge, BlockLayout, BlockLayout as SurfaceLayout, BranchSelect, Breadcrumb, BulkActions, Button, COLOR_PRESETS, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatInput, ChatMessageList, ChatSidebar, Checkbox, CheckboxGroup, CircularProgress, CodeDiffViewer, CodeSnippetViewer, ColorPaletteDisplay, ColorPalettePicker, ColorPicker, ColumnToggler, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteTrigger, CommandSeparator, CommandShortcut, ComparisonSelector, Composite, CompositeItem, CompositeProvider, CompositeRow, CompositeZone, ConditionBuilder, ConfirmDialog, ConnectionIndicator, Container, ContentTabs, DEFAULT_PRESETS, DEFAULT_TIME_PRESETS, DashboardGrid, DataImportWizard, DataTable, DateRangePicker, DeploymentTimeline, DescriptionList, DesignGuidePanel, DialogBody, DialogDescription, DialogDisclosure, DialogDismiss, DialogFooter, DialogHeader, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, DomainTable, DrawerClose, DrawerPanel, DrawerRoot, DropdownContent, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, DynamicFieldForm, EMPTY_QUERY, EditorToolbar, EmptyState, EnvPanel, ErrorBoundary, EventIcon, EventMetaEditor, EventSparkline, EventTimeline, ExportButton, Expression, ExpressionGroup, FIELD_TYPE_TOKENS, FORCE_LIGHT_PRESETS, FORCE_LIGHT_PRESET_IDS, Facet, FacetGroup, FailureList, FaqAccordion, FeatureFlagPanel, FieldSidebar, FieldToken, FileUploadForm, FilterBar, FloatingActionBar, Flyout, FormCheckbox, FormColorPicker, FormControl, FormDateRangePicker, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormIconPicker, FormInput, FormLabel, FormNumberInput, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSelect, FormSelectItem, FormSelectPopover, FormSlider, FormStarRating, FormSubmit, FormSwitch, FormTagInput, FormTextarea, GENERATED_THEME_ID_DEFAULT, GLOBAL_THEME_STYLE_ID, Heading, Highlight, IconPicker, Identity, InlineEdit, InlineEditTable, Input, InsightsPanel, KanbanBoard, Kbd, KeyPadMenu, KeyValueEditor, LiveRegion, LoadingOverlay, LogTable, Logo, MegaMenu, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, Meter, MetricsCard, NotificationCenter, NotificationToast, NumberInput, OPT_TEXT_PRIMARY, OPT_TEXT_SECONDARY, OptThemeControllerContext, OptThemeProvider, OtpField, POPULAR_ICONS, PageAside, PageHeader, Pagination, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, Progress, ProjectSwitcher, PromptTemplate, PropertyExplorer, QueryBar, QueryResultsTable, QuickActions, Radio, RadioGroup, ReportBuilder, ReportWidget, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextEditor, RouteFocusManager, SHADER_OVERLAY_PARAM_KEYS, SHADER_PARAM_FALLBACK, SHADER_PARAM_KEYS, SHADER_PRESETS, SHADER_PRESET_IDS, SavedFilters, ScoreBreakdown, ScrollArea, SearchCombobox, Section, SegmentBuilder, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Separator, SettingsForm, ShaderSurface, Sidebar, SidebarNav, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTable, SkeletonText, Slider, SpatialNavProvider, Spinner, SqlEditor, StarRating, StatCard, StatusSelect, StepBuilder, SummaryRow, Switch, THEME_PALETTES, THEME_PRESET_IDS, THEME_REGISTRY, THEME_SPEC_STORAGE_KEY, THEME_TOKENS_STORAGE_KEY, Tab, TabList, TabPanel, TabsRoot, TagInput, TaskList, TeamMemberList, TemplatePicker, Text, TextTruncate, Textarea, ThemeSwitcher, TimeRangeControl, TimeRangeSelector, TimeSeriesPanel, ToastProvider, Toggle, ToggleGroup, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipProvider, TreeTable, TrendChart, VerticalTabs, VirtualList, WebhookConfig, WidgetGrid, WizardForm, WorkflowCanvas, addClause, applyCellAction, buildTokenCache, cn, coerceThemeMode, computeGeneratedTokens, computeSpatialTargets, createBlock, createBlock as createSurface, createThemeBootScript, defineThemeOverrides, describeClause, enBreadcrumbLabels, enComboboxLabels, enStarRatingLabels, fieldValues, formatClause, formatOptDateTime, formatOptNumber, formatOptShortDate, formatOptTime, formatQuery, generatedTheme, getCompoundIdForSpec, getCompoundTheme, getShaderFragment, getShaderPreset, getThemeDescriptor, getTrappedContextRole, isDescriptorSpec, isEmptyQuery, isForceLightSpec, isGeneratedSpec, isPresetSpec, isThemePresetId, koBreadcrumbLabels, koComboboxLabels, koStarRatingLabels, matchesQuery, matchesQueryObject, parseQuery, parseQueryWithDiagnostics, presetTheme, queryFields, quoteValue, readStoredTheme, removeClause, resolveDescriptor, resolveFieldType, resolveThemeMode, safeParseStoredSpec, safeParseStoredTokens, schemaValidator, serializeGeneratedTheme, serializeThemeRule, serializeTokenBody, shouldSkipArrow, toast, useAutoRefresh, useControlledState, useFieldValue, useFormContext, useFormStore, useInputId, useOptTheme, useOptThemeController, useOptionalOptTheme, useSidebar, useToast, withFieldValue, withoutField };
-
-//# sourceMappingURL=index.js.map
+export { ALL_COMPOUND_THEMES, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActivityFeed, Alert, AlertBuilder, AlertDialogPanel, AppMenubar, AppShell, AsyncCombobox, AuditLog, AuditTimeline, AuthForm, Avatar, AvatarGroup, Badge, BlockLayout, BlockLayout as SurfaceLayout, BranchSelect, Breadcrumb, BulkActions, Button, COLOR_PRESETS, Callout, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CatalogCellControls, CatalogFrame, CatalogRowActions, ChatInput, ChatMessageList, ChatSidebar, Checkbox, CheckboxGroup, CircularProgress, CodeDiffViewer, CodeSnippetViewer, ColorPaletteDisplay, ColorPalettePicker, ColorPicker, ColumnToggler, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteTrigger, CommandSeparator, CommandShortcut, ComparisonSelector, Composite, CompositeItem, CompositeProvider, CompositeRow, CompositeZone, ConditionBuilder, ConfirmDialog, ConnectionIndicator, Container, ContentTabs, CopyButton, DEFAULT_PRESETS, DEFAULT_TIME_PRESETS, DashboardGrid, DataImportWizard, DataTable, DateRangePicker, DeploymentTimeline, DescriptionList, DesignGuidePanel, DialogBody, DialogDescription, DialogDisclosure, DialogDismiss, DialogFooter, DialogHeader, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, DomainTable, DrawerClose, DrawerPanel, DrawerRoot, DropdownContent, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, DynamicFieldForm, EMPTY_QUERY, EditorToolbar, EmptyState, EnvPanel, ErrorBoundary, EventIcon, EventMetaEditor, EventSparkline, EventTimeline, ExportButton, Expression, ExpressionGroup, FIELD_TYPE_TOKENS, FORCE_LIGHT_PRESETS, FORCE_LIGHT_PRESET_IDS, Facet, FacetGroup, FailureList, FaqAccordion, FeatureFlagPanel, FieldSidebar, FieldToken, FieldTokenLegend, FileUploadForm, FilterBar, FloatingActionBar, Flyout, FormCheckbox, FormColorPicker, FormControl, FormDateRangePicker, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormIconPicker, FormInput, FormLabel, FormNumberInput, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSelect, FormSelectItem, FormSelectPopover, FormSlider, FormStarRating, FormSubmit, FormSwitch, FormTagInput, FormTextarea, GENERATED_THEME_ID_DEFAULT, GLOBAL_THEME_STYLE_ID, Heading, Highlight, IconPicker, Identity, InlineEdit, InlineEditTable, Input, InsightsPanel, InspectorLayout, KanbanBoard, Kbd, KeyPadMenu, KeyValueEditor, LiveRegion, LoadingOverlay, LogTable, Logo, MegaMenu, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, Meter, MetricsCard, NotificationCenter, NotificationToast, NumberInput, OPT_TEXT_PRIMARY, OPT_TEXT_SECONDARY, OptThemeControllerContext, OptThemeProvider, OtpField, POPULAR_ICONS, PageAside, PageHeader, Pagination, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, Progress, ProjectSwitcher, PromptTemplate, PropertyExplorer, QueryBar, QueryFilterBar, QueryResultsTable, QuickActions, Radio, RadioGroup, ReportBuilder, ReportWidget, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextEditor, RouteFocusManager, SHADER_OVERLAY_PARAM_KEYS, SHADER_PARAM_FALLBACK, SHADER_PARAM_KEYS, SHADER_PRESETS, SHADER_PRESET_IDS, SavedFilters, ScoreBreakdown, ScrollArea, SearchCombobox, Section, SegmentBuilder, SegmentedControl, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Separator, SettingsForm, ShaderSurface, Sidebar, SidebarNav, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTable, SkeletonText, Slider, SpatialNavProvider, Spinner, SqlEditor, StarRating, StatCard, StatusDot, StatusSelect, StepBuilder, SummaryRow, Switch, THEME_PALETTES, THEME_PRESET_IDS, THEME_REGISTRY, THEME_SPEC_STORAGE_KEY, THEME_TOKENS_STORAGE_KEY, Tab, TabList, TabPanel, TabsRoot, TagInput, TaskList, TeamMemberList, TemplatePicker, Text, TextTruncate, Textarea, ThemeSwitcher, TimeRangeControl, TimeRangeSelector, TimeSeriesPanel, ToastProvider, Toggle, ToggleGroup, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipProvider, TreeTable, TrendChart, VerticalTabs, VirtualList, WebhookConfig, WidgetGrid, WizardForm, WorkflowCanvas, addClause, applyCellAction, buildTokenCache, cn, coerceThemeMode, computeGeneratedTokens, computeSpatialTargets, createBlock, createBlock as createSurface, createThemeBootScript, defineThemeOverrides, describeClause, enBreadcrumbLabels, enComboboxLabels, enStarRatingLabels, fieldValues, formatClause, formatOptDateTime, formatOptNumber, formatOptShortDate, formatOptTime, formatQuery, generatedTheme, getCompoundIdForSpec, getCompoundTheme, getShaderFragment, getShaderPreset, getThemeDescriptor, getTrappedContextRole, hasActiveQuery, isDescriptorSpec, isEmptyQuery, isForceLightSpec, isGeneratedSpec, isPresetSpec, isThemePresetId, koBreadcrumbLabels, koComboboxLabels, koStarRatingLabels, matchesQuery, matchesQueryObject, parseQuery, parseQueryWithDiagnostics, presetTheme, queryFields, quoteValue, readStoredTheme, removeClause, resolveDescriptor, resolveFieldType, resolveThemeMode, safeParseStoredSpec, safeParseStoredTokens, schemaValidator, serializeGeneratedTheme, serializeThemeRule, serializeTokenBody, shouldSkipArrow, toast, useAutoRefresh, useControlledState, useFieldValue, useFormContext, useFormStore, useInputId, useOptTheme, useOptThemeController, useOptionalOptTheme, useSidebar, useToast, withFieldValue, withoutField };