@reopt-ai/opt-ui 1.10.0 → 1.12.0

package/dist/index.cjs

@@ -1,17 +1,355 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_text_truncate = require("./text-truncate-CxdzAnhS.cjs");
-const require_key_pad_menu = require("./key-pad-menu-D5mQcS5v.cjs");
-const require_field_sidebar = require("./field-sidebar-B6Ndr8HE.cjs");
+const require_text_truncate = require("./text-truncate-I1XLWmRa.cjs");
+const require_key_pad_menu = require("./key-pad-menu-SItoHPLu.cjs");
+const require_field_sidebar = require("./field-sidebar-BYgEmdy0.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_text_truncate.__toESM(react, 1);
+let _reopt_ai_opt_ui_primitives = require("@reopt-ai/opt-ui-primitives");
 let lucide_react = require("lucide-react");
 let _reopt_ai_opt_palette = require("@reopt-ai/opt-palette");
 let _reopt_ai_opt_charts = require("@reopt-ai/opt-charts");
 let match_sorter = require("match-sorter");
 let next_navigation = require("next/navigation");
-let _reopt_ai_opt_ui_primitives = require("@reopt-ai/opt-ui-primitives");
+//#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: lucide_react.Info,
+	success: lucide_react.CircleCheck,
+	warning: lucide_react.TriangleAlert,
+	danger: lucide_react.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 = require_text_truncate._objectWithoutProperties(_ref, _excluded$2);
+	const DefaultIcon = defaultIcons[tone];
+	const glyph = icon === void 0 ? DefaultIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultIcon, { "aria-hidden": "true" }) : null : icon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_text_truncate.cn("mt-0.5 shrink-0", iconTone[tone]),
+				children: glyph
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_text_truncate.cn("font-medium", titleTone[tone]),
+					children: title
+				}), children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_text_truncate.cn("text-text-secondary", title && "mt-1"),
+					children
+				})]
+			}),
+			action && /* @__PURE__ */ (0, react_jsx_runtime.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 = require_text_truncate._objectWithoutProperties(_ref, _excluded$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
+		className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_text_truncate.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: lucide_react.Copy,
+	copied: lucide_react.Check,
+	failed: lucide_react.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 = require_text_truncate._objectWithoutProperties(_ref, _excluded);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$35), customLabels);
+	const [state, setState] = (0, react.useState)("idle");
+	const timer = (0, react.useRef)(null);
+	(0, react.useEffect)(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	const handleClick = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("button", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
+		type: "button",
+		onClick: handleClick,
+		disabled,
+		"aria-label": variant === "icon" ? label : void 0,
+		className: require_text_truncate.cn("inline-flex shrink-0 items-center rounded transition-colors", "disabled:pointer-events-none disabled:opacity-50", require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)(Icon, { "aria-hidden": "true" }),
+			variant === "text" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }),
+			/* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.RadioGroupRoot, {
+		value,
+		onValueChange: (next) => onChange(next),
+		disabled,
+		orientation: "horizontal",
+		name,
+		"aria-label": ariaLabel,
+		className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Radio, {
+						value: option.value,
+						disabled: itemDisabled,
+						className: "sr-only"
+					}),
+					option.icon,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: option.label }),
+					option.badge != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_text_truncate.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) {
@@ -86,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} 완료",
@@ -106,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$31), customLabels), {}, {
-		priority: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$31.priority), customLabels === null || customLabels === void 0 ? void 0 : customLabels.priority),
-		status: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$31.status), customLabels === null || customLabels === void 0 ? void 0 : customLabels.status)
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$34), customLabels), {}, {
+		priority: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$34.priority), customLabels === null || customLabels === void 0 ? void 0 : customLabels.priority),
+		status: require_text_truncate._objectSpread2(require_text_truncate._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;
@@ -266,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}개 더 보기",
@@ -316,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
 	};
@@ -461,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$29), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$32), customLabels);
 	const [searchValues, setSearchValues] = (0, react.useState)({});
 	const [tagInputValues, setTagInputValues] = (0, react.useState)({});
 	const [multiSelectOpen, setMultiSelectOpen] = (0, react.useState)({});
@@ -693,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$28), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$31), customLabels);
 	const displayTitle = title !== null && title !== void 0 ? title : labels.title;
 	const titleId = (0, react.useId)();
 	(0, react.useEffect)(() => {
@@ -774,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} 온라인",
@@ -795,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$27), customLabels), {}, { status: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$27.status), customLabels === null || customLabels === void 0 ? void 0 : customLabels.status) });
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$30), customLabels), {}, { status: require_text_truncate._objectSpread2(require_text_truncate._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 = (0, react.useId)();
@@ -1695,7 +2033,7 @@ const COLOR_PRESETS = [
 	"#f97316",
 	"#14b8a6"
 ];
-const defaultLabels$26 = {
+const defaultLabels$29 = {
 	eventLabelPrefix: "Event",
 	defaultAriaLabel: "Event icon"
 };
@@ -1726,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$26), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._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" ? require_text_truncate.getIconRegistryEntry(icon) : void 0;
@@ -1818,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$25), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$28), customLabels);
 	if (actions.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: "toolbar",
@@ -1862,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...",
@@ -1870,7 +2208,7 @@ const defaultLabels$24 = {
 };
 /** Renders the template picker component. */
 function TemplatePicker({ templates, selected, onSelect, labels: customLabels, showSearch = false, className }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$24), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$27), customLabels);
 	const [search, setSearch] = react.useState("");
 	const filtered = react.useMemo(() => {
 		if (!showSearch || !search) return templates;
@@ -1956,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"
@@ -1994,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$23), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._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;
@@ -2046,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$22), customLabels);
+function PropertyExplorer({ groups, onSelect, onEdit, className, labels: customLabels }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$25), customLabels);
 	const [search, setSearch] = react.useState("");
 	const filtered = react.useMemo(() => {
 		if (!search) return groups;
@@ -2078,36 +2418,55 @@ function PropertyExplorer({ groups, onSelect, className, labels: customLabels })
 				children: group.name
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "gap-element flex flex-col",
-				children: group.properties.map((prop) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(prop),
-					className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "min-w-0",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldToken, {
-								type: require_text_truncate.resolveFieldType(prop.type),
-								size: "xs",
-								title: prop.type,
-								className: "mr-2 align-[-2px]"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-text-primary text-sm font-medium",
-								children: prop.name
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-text-tertiary ml-2 font-mono text-xs",
-								children: prop.type
-							}),
-							prop.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-text-tertiary truncate text-xs",
-								children: prop.description
+				children: group.properties.map((prop) => {
+					var _prop$dataType;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: require_text_truncate.cn("hover:bg-bg-subtle flex items-center rounded-md transition-colors", prop.hidden && "opacity-60"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "min-w-0",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldToken, {
+										type: (_prop$dataType = prop.dataType) !== null && _prop$dataType !== void 0 ? _prop$dataType : require_text_truncate.resolveFieldType(prop.type),
+										size: "xs",
+										title: prop.type,
+										className: "mr-2 align-[-2px]"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-text-primary text-sm font-medium",
+										children: prop.name
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-text-tertiary ml-2 font-mono text-xs",
+										children: prop.type
+									}),
+									prop.hidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-text-tertiary ml-2 text-xs",
+										children: labels.hidden
+									}),
+									prop.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-text-tertiary truncate text-xs",
+										children: prop.description
+									})
+								]
+							}), prop.eventCount !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-text-tertiary ml-2 shrink-0 text-xs",
+								children: require_text_truncate.formatOptNumber(prop.eventCount)
+							})]
+						}), onEdit && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, {
+								"aria-hidden": "true",
+								className: "size-3.5"
 							})
-						]
-					}), prop.eventCount !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-text-tertiary ml-2 shrink-0 text-xs",
-						children: require_key_pad_menu.formatOptNumber(prop.eventCount)
-					})]
-				}, prop.name))
+						})]
+					}, prop.name);
+				})
 			})] }, group.name)), filtered.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "text-text-tertiary py-4 text-center text-sm",
 				children: labels.noPropertiesFound
@@ -2118,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$21), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$24), customLabels);
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: require_text_truncate.cn("border-danger bg-danger-subtle rounded-lg border p-4", className),
 		role: "alert",
@@ -2209,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",
@@ -2280,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$20), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$23), customLabels);
 	const alertNameId = react.useId();
 	const conditionsId = react.useId();
 	const checkFrequencyId = react.useId();
@@ -2435,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",
@@ -2443,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$19), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$22), customLabels);
 	const fill = height === "fill";
 	const footerVisible = showFooter !== null && showFooter !== void 0 ? showFooter : Boolean(onRun);
 	const editorRef = react.useRef(null);
@@ -2615,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",
@@ -2629,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$18), customLabels);
+function EventMetaEditor({ value, onChange, icons, sections, footer, className, labels: customLabels }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$21), customLabels);
 	const hasTags = value.tags.length > 0;
 	const nameId = react.useId();
 	const displayNameId = react.useId();
@@ -2723,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__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "gap-element flex flex-col",
+				children: [
+					section.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-text-tertiary block text-xs font-medium",
+						children: section.title
+					}),
+					section.children,
+					section.description && /* @__PURE__ */ (0, react_jsx_runtime.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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$17), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$20), customLabels);
 	const [dragIdx, setDragIdx] = react.useState(null);
 	const [overIdx, setOverIdx] = react.useState(null);
 	if (widgets.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2778,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",
@@ -2854,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$16), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$19), customLabels);
 	const [stepIndex, setStepIndex] = react.useState(0);
 	const [internalChartType, setInternalChartType] = react.useState(null);
 	const [internalDataSource, setInternalDataSource] = react.useState("");
@@ -3074,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: "상세 보기",
@@ -3153,7 +3527,7 @@ function DiffTable({ changes, labels }) {
 }
 /** Renders the audit timeline component. */
 function AuditTimeline({ entries, labels: customLabels, className, onEntryClick }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$15), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$18), customLabels);
 	const [expandedIds, setExpandedIds] = react.useState(/* @__PURE__ */ new Set());
 	const toggleExpanded = react.useCallback((id) => {
 		setExpandedIds((prev) => {
@@ -3276,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",
@@ -3397,7 +3771,7 @@ function SegmentBuilder({ groups, onChange, eventOptions = [
 	"New Users",
 	"Power Users"
 ], className, labels: customLabels }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$14), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$17), customLabels);
 	const builderId = react.useId().replace(/:/g, "");
 	const nextIdRef = react.useRef(1);
 	const createId = react.useCallback(() => {
@@ -3610,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",
@@ -3641,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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$13), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._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;
@@ -4033,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."
 };
@@ -4051,20 +4425,22 @@ function formatByStatType(stat, durationFractionDigits, percentageFractionDigits
 const colsClass = {
 	2: "grid-cols-1 sm:grid-cols-2",
 	3: "grid-cols-1 sm:grid-cols-3",
-	4: "grid-cols-2 sm:grid-cols-4"
+	4: "grid-cols-2 sm:grid-cols-4",
+	5: "grid-cols-2 sm:grid-cols-3 xl:grid-cols-5",
+	6: "grid-cols-2 sm:grid-cols-3 xl:grid-cols-6"
 };
 /** Renders the summary row component. */
-function SummaryRow({ stats, columns = 4, onStatClick, formatValue, durationFractionDigits = 1, percentageFractionDigits = 1, loading = false, labels: customLabels, className }) {
-	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$12), customLabels);
+function SummaryRow({ stats, columns = 4, onStatClick, selectedStatId, size = "md", formatValue, durationFractionDigits = 1, percentageFractionDigits = 1, loading = false, labels: customLabels, className }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$15), customLabels);
 	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: require_text_truncate.cn("gap-group grid", colsClass[columns], className),
-		"data-opt-id": "DA0AX",
+		"data-opt-id": "FGFP3",
 		"data-opt-slug": "summary-row.SummaryRow",
-		children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.SkeletonCard, {}, i))
+		children: Array.from({ length: stats.length || columns }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SkeletonCard, {}, i))
 	});
 	if (stats.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: require_text_truncate.cn("flex min-h-40 items-center justify-center", className),
-		"data-opt-id": "DA0AX",
+		"data-opt-id": "FGFP3",
 		"data-opt-slug": "summary-row.SummaryRow",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.EmptyState, {
 			title: labels.emptyTitle,
@@ -4073,29 +4449,527 @@ function SummaryRow({ stats, columns = 4, onStatClick, formatValue, durationFrac
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: require_text_truncate.cn("gap-group grid", colsClass[columns], className),
-		"data-opt-id": "DA0AX",
+		"data-opt-id": "FGFP3",
 		"data-opt-slug": "summary-row.SummaryRow",
 		children: stats.map((s) => {
 			const displayValue = formatValue ? formatValue(s) : formatByStatType(s, durationFractionDigits, percentageFractionDigits);
-			const card = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.StatCard, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.StatCard, {
 				id: s.id,
 				title: s.title,
 				value: displayValue,
 				change: s.change,
-				trend: s.trend
+				trend: s.trend,
+				polarity: s.polarity,
+				description: s.description,
+				hint: s.hint,
+				size,
+				selected: selectedStatId === s.id,
+				onSelect: onStatClick ? () => onStatClick(s) : void 0
 			}, s.id);
-			if (onStatClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				onClick: () => onStatClick(s),
-				className: "rounded-lg text-left transition-transform hover:scale-[1.02] focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2",
-				children: card
-			}, s.id);
-			return card;
 		})
 	});
 }
 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 (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "min-w-0 flex-1",
+			children
+		}), canPush ? open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+			className: require_text_truncate.cn("shrink-0", pushWidth[width]),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_sidebar.Flyout, {
+				open,
+				onClose,
+				type: "inline",
+				title,
+				description,
+				actions,
+				footer,
+				labels,
+				className: "h-full",
+				children: inspector
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_sidebar.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 = require_field_sidebar.fieldValues(query, field).filter((it) => it !== value);
+		const cleared = require_field_sidebar.withoutField(query, field);
+		return remaining.reduce((next, keep) => require_field_sidebar.withFieldValue(next, field, keep), cleared);
+	}
+	return multiSelect ? require_field_sidebar.withFieldValue(query, field, value) : require_field_sidebar.withFieldValue(require_field_sidebar.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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$14), customLabels);
+	const activeCount = (0, react.useMemo)(() => filters.reduce((count, filter) => {
+		const values = require_field_sidebar.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.cn("flex flex-col gap-element", className),
+		"data-opt-id": "SK31N",
+		"data-opt-slug": "query-filter-bar.QueryFilterBar",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_sidebar.QueryBar, {
+			value,
+			onChange,
+			fields,
+			showClauses,
+			live,
+			disabled,
+			labels: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, queryBarLabels), {}, {
+				placeholder: labels.placeholder,
+				ariaLabel: labels.ariaLabel
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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 = require_field_sidebar.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__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverTrigger, {
+							disabled,
+							className: require_text_truncate.cn("inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs transition-colors", require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)("span", { children: filter.label }),
+								(selected === null || selected === void 0 ? void 0 : selected.length) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Badge, {
+									variant: "info",
+									size: "sm",
+									children: selected.length
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+									"aria-hidden": "true",
+									className: "size-3"
+								})
+							]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.PopoverContent, {
+							className: "min-w-48 p-1",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										disabled,
+										"aria-pressed": active,
+										onClick: () => onChange(toggleValue(value, filter.field, option.value, active, multiSelect)),
+										className: require_text_truncate.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", require_text_truncate.OPT_FOCUS_VISIBLE),
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
+												"aria-hidden": "true",
+												className: require_text_truncate.cn("size-3 shrink-0", active ? "opacity-100" : "opacity-0")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "flex-1 truncate",
+												children: option.label
+											}),
+											option.count != null && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						disabled,
+						"aria-pressed": active,
+						onClick: () => onChange(toggleValue(value, filter.field, filterValue, active, multiSelect)),
+						className: require_text_truncate.cn("inline-flex h-7 items-center rounded-md border px-2 text-xs transition-colors", require_text_truncate.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-text-tertiary text-xs",
+					children: labels.activeCount(activeCount)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.Button, {
+					variant: "ghost",
+					size: "sm",
+					disabled,
+					onClick: () => onChange({ clauses: [] }),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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 !require_field_sidebar.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.Button, {
+			variant: "ghost",
+			size: "sm",
+			onClick: () => action.onSelect(item),
+			children: [action.icon, action.label]
+		}, action.id)), overflow.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_key_pad_menu.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.DropdownTrigger, {
+			"aria-label": (_labels$moreActions = labels === null || labels === void 0 ? void 0 : labels.moreActions) !== null && _labels$moreActions !== void 0 ? _labels$moreActions : "더 보기",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreHorizontal, {
+				"aria-hidden": "true",
+				className: "size-4"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.DropdownContent, { children: overflow.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_key_pad_menu.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__ */ (0, react_jsx_runtime.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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$13), customLabels);
+	const lastScope = (0, react.useRef)({
+		query,
+		page
+	});
+	(0, react.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 = !require_field_sidebar.isEmptyQuery(query);
+	const body = error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.EmptyState, {
+		tone: "error",
+		hasBorder: true,
+		title: labels.errorTitle,
+		body: error,
+		actions: onRetry ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+			variant: "secondary",
+			onClick: onRetry,
+			children: labels.retry
+		}) : void 0
+	}) : isEmpty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.EmptyState, {
+		tone: "subdued",
+		hasBorder: true,
+		title: filtering ? labels.filteredEmptyTitle : labels.emptyTitle,
+		description: filtering ? labels.filteredEmptyDescription : labels.emptyDescription,
+		actions: filtering ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
+			variant: "secondary",
+			onClick: () => onQueryChange({ clauses: [] }),
+			children: labels.clearFilters
+		}) : emptyActions
+	}) : children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.cn("flex flex-col gap-section", className),
+		children: [
+			(header || actions) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "gap-group flex min-w-0 flex-col lg:flex-row lg:items-start lg:justify-between",
+				children: [header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "min-w-0 flex-1",
+					children: header
+				}), actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "gap-element flex flex-wrap items-center",
+					children: actions
+				})]
+			}),
+			stats && stats.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SummaryRow, {
+				stats,
+				onStatClick
+			}),
+			notice,
+			toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "gap-group flex flex-wrap items-center",
+				children: toolbar
+			}),
+			filters && filters.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryFilterBar, {
+				value: query,
+				onChange: onQueryChange,
+				filters,
+				disabled: Boolean(error)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InspectorLayout, {
+				open: inspectorOpen && Boolean(inspector),
+				onClose: onInspectorClose,
+				inspector,
+				title: inspectorTitle,
+				description: inspectorDescription,
+				actions: inspectorActions,
+				footer: inspectorFooter,
+				width: inspectorWidth,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "gap-group flex flex-col",
+					children: [body, onPageChange && totalCount != null && totalCount > pageSize && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Pagination, {
+						currentPage: page,
+						totalPages: Math.ceil(totalCount / pageSize),
+						onPageChange
+					})]
+				})
+			}),
+			bulkActions && bulkActions.length > 0 && onBulkAction && selectedKeys && selectedKeys.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$11), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$10), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$11), customLabels);
 	if (tabs.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: require_text_truncate.cn("text-text-secondary text-sm", className),
 		"data-opt-id": "J81G4",
@@ -5765,6 +6639,7 @@ function VerticalTabs({ tabs, defaultTabId, labels: customLabels, className }) {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.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__ */ (0, react_jsx_runtime.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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$9), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$8), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._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 = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$7), customLabels);
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$8), customLabels);
 	const unreadCount = notifications.filter((n) => !n.read).length;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.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 = require_text_truncate._objectSpread2(require_text_truncate._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__ */ (0, react_jsx_runtime.jsx)("tr", {
-			className: "border-border border-b",
-			children: columns.map((col, ci) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-				className: require_text_truncate.cn(require_text_truncate.OPT_TD),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center",
-					style: ci === 0 ? { paddingLeft: depth * indentSize } : void 0,
-					children: [
-						ci === 0 && hasChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							onClick: () => toggle(node.id),
-							className: require_text_truncate.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: require_text_truncate.cn("overflow-auto", className),
-		"data-opt-id": "EJRTW",
+		"data-opt-id": "PP194",
 		"data-opt-slug": "tree-table.TreeTable",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
 			className: require_text_truncate.cn("w-full border-collapse", require_text_truncate.OPT_BORDER),
+			"aria-label": ariaLabelledBy == null ? ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.ariaLabel : void 0,
+			"aria-labelledby": ariaLabelledBy,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
 				className: "border-border border-b",
 				children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+					scope: "col",
 					className: require_text_truncate.cn(require_text_truncate.OPT_TH),
 					style: { width: col.width },
 					children: col.header
 				}, col.id))
-			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: renderRows(data, 0) })]
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("tr", {
+					id: rowId(node.id),
+					hidden: !visible,
+					className: "border-border border-b",
+					children: columns.map((col, columnIndex) => {
+						const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center",
+							style: columnIndex === 0 ? { paddingLeft: depth * indentSize } : void 0,
+							children: [
+								columnIndex === 0 && hasChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									onClick: () => toggle(node.id),
+									className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)("span", {
+										"aria-hidden": "true",
+										children: isExpanded ? "▼" : "▶"
+									})
+								}),
+								columnIndex === 0 && !hasChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "mr-1 inline-block w-5" }),
+								columnIndex === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "sr-only",
+									children: [
+										labels.level(depth + 1),
+										".",
+										" "
+									]
+								}),
+								getCellValue(node.data, col)
+							]
+						});
+						return columnIndex === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							scope: "row",
+							className: require_text_truncate.cn(require_text_truncate.OPT_TD),
+							children: content
+						}, col.id) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: require_text_truncate.cn(require_text_truncate.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-hidden": "true",
+		className: "text-text-secondary mt-0.5 flex-shrink-0",
+		children: item.icon
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex flex-col text-left",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-text-primary text-sm font-medium",
+			children: item.label
+		}), item.description && /* @__PURE__ */ (0, react_jsx_runtime.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 = require_text_truncate._objectSpread2(require_text_truncate._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__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverRoot, {
-		"data-opt-id": "42177",
+		"data-opt-id": "AHTK9",
 		"data-opt-slug": "mega-menu.MegaMenu",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverTrigger, {
 			className: require_text_truncate.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 5l3 3 3-3" })
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.PopoverContent, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.PopoverContent, {
 			className: "w-auto max-w-2xl p-0",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "gap-group grid p-4",
-				style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
-				children: menus.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "gap-element flex flex-col",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-						className: "text-text-tertiary text-xs font-semibold tracking-wider uppercase",
-						children: section.title
-					}), section.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-text-secondary mt-0.5 flex-shrink-0",
-							children: item.icon
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex flex-col",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-text-primary text-sm font-medium",
-								children: item.label
-							}), item.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-text-tertiary text-xs",
-								children: item.description
-							})]
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
+				"aria-label": navigationLabel,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "gap-group grid p-4",
+					style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+					children: menus.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "gap-element flex flex-col",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("a", {
+								href: item.href,
+								className: itemClassName,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MegaMenuItemContent, { item })
+							}, item.label);
+							if (item.onSelect) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.PopoverClose, {
+								onClick: item.onSelect,
+								className: itemClassName,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MegaMenuItemContent, { item })
+							}, item.label);
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"aria-disabled": "true",
+								className: require_text_truncate.cn(itemClassName, "cursor-not-allowed opacity-60"),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MegaMenuItemContent, { item })
+							}, item.label);
 						})]
-					}, item.label))]
-				}, section.title))
-			}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "border-border bg-bg-subtle border-t px-4 py-3",
-				children: footer
-			})]
+					}, section.title))
+				}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "border-border bg-bg-subtle border-t px-4 py-3",
+					children: footer
+				})]
+			})
 		})]
 	});
 }
@@ -7214,12 +8168,12 @@ function ChatSidebar({ conversations, activeConversationId, onConversationSelect
 }
 function formatTimestamp(timestamp, now) {
 	const date = new Date(timestamp);
-	if (!now) return require_key_pad_menu.formatOptShortDate(date);
+	if (!now) return require_text_truncate.formatOptShortDate(date);
 	const diffMs = now.getTime() - date.getTime();
 	const diffDays = Math.floor(diffMs / 864e5);
-	if (diffMs >= 0 && diffDays === 0) return require_key_pad_menu.formatOptTime(date);
+	if (diffMs >= 0 && diffDays === 0) return require_text_truncate.formatOptTime(date);
 	if (diffMs >= 0 && diffDays < 7) return `${diffDays}d`;
-	return require_key_pad_menu.formatOptShortDate(date);
+	return require_text_truncate.formatOptShortDate(date);
 }
 ChatSidebar.displayName = "ChatSidebar";
 //#endregion
@@ -7485,7 +8439,7 @@ function ChatMessageList({ messages, loading = false, renderContent, assistantAv
 	});
 }
 function formatMessageTime(timestamp) {
-	return require_key_pad_menu.formatOptTime(timestamp);
+	return require_text_truncate.formatOptTime(timestamp);
 }
 ChatMessageList.displayName = "ChatMessageList";
 //#endregion
@@ -8295,67 +9249,6 @@ 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
 exports.ALL_COMPOUND_THEMES = ALL_COMPOUND_THEMES;
 exports.AccordionContent = require_key_pad_menu.AccordionContent;
 exports.AccordionItem = require_key_pad_menu.AccordionItem;
@@ -8380,12 +9273,16 @@ exports.Breadcrumb = require_key_pad_menu.Breadcrumb;
 exports.BulkActions = BulkActions;
 exports.Button = require_text_truncate.Button;
 exports.COLOR_PRESETS = COLOR_PRESETS;
+exports.Callout = Callout;
 exports.Card = require_key_pad_menu.Card;
 exports.CardContent = require_key_pad_menu.CardContent;
 exports.CardDescription = require_key_pad_menu.CardDescription;
 exports.CardFooter = require_key_pad_menu.CardFooter;
 exports.CardHeader = require_key_pad_menu.CardHeader;
 exports.CardTitle = require_key_pad_menu.CardTitle;
+exports.CatalogCellControls = CatalogCellControls;
+exports.CatalogFrame = CatalogFrame;
+exports.CatalogRowActions = CatalogRowActions;
 exports.ChatInput = ChatInput;
 exports.ChatMessageList = ChatMessageList;
 exports.ChatSidebar = ChatSidebar;
@@ -8427,6 +9324,7 @@ exports.ConfirmDialog = ConfirmDialog;
 exports.ConnectionIndicator = ConnectionIndicator;
 exports.Container = require_key_pad_menu.Container;
 exports.ContentTabs = require_field_sidebar.ContentTabs;
+exports.CopyButton = CopyButton;
 exports.DEFAULT_PRESETS = require_text_truncate.DEFAULT_PRESETS;
 exports.DEFAULT_TIME_PRESETS = require_field_sidebar.DEFAULT_TIME_PRESETS;
 exports.DashboardGrid = require_field_sidebar.DashboardGrid;
@@ -8434,6 +9332,7 @@ exports.DataImportWizard = DataImportWizard;
 exports.DataTable = require_field_sidebar.DataTable;
 exports.DateRangePicker = require_text_truncate.DateRangePicker;
 exports.DeploymentTimeline = require_field_sidebar.DeploymentTimeline;
+exports.DescriptionList = require_key_pad_menu.DescriptionList;
 exports.DesignGuidePanel = DesignGuidePanel;
 exports.DialogBody = require_text_truncate.DialogBody;
 exports.DialogDescription = require_text_truncate.DialogDescription;
@@ -8470,6 +9369,7 @@ Object.defineProperty(exports, "EventSparkline", {
 		return _reopt_ai_opt_charts.EventSparkline;
 	}
 });
+exports.EventTimeline = require_field_sidebar.EventTimeline;
 exports.ExportButton = ExportButton;
 exports.Expression = require_key_pad_menu.Expression;
 exports.ExpressionGroup = require_key_pad_menu.ExpressionGroup;
@@ -8483,9 +9383,11 @@ exports.FaqAccordion = require_field_sidebar.FaqAccordion;
 exports.FeatureFlagPanel = FeatureFlagPanel;
 exports.FieldSidebar = require_field_sidebar.FieldSidebar;
 exports.FieldToken = require_text_truncate.FieldToken;
+exports.FieldTokenLegend = require_text_truncate.FieldTokenLegend;
 exports.FileUploadForm = FileUploadForm;
 exports.FilterBar = FilterBar;
 exports.FloatingActionBar = FloatingActionBar;
+exports.Flyout = require_field_sidebar.Flyout;
 exports.FormCheckbox = require_text_truncate.FormCheckbox;
 exports.FormColorPicker = require_text_truncate.FormColorPicker;
 exports.FormControl = require_text_truncate.FormControl;
@@ -8520,10 +9422,12 @@ exports.GLOBAL_THEME_STYLE_ID = GLOBAL_THEME_STYLE_ID;
 exports.Heading = require_key_pad_menu.Heading;
 exports.Highlight = require_text_truncate.Highlight;
 exports.IconPicker = require_text_truncate.IconPicker;
+exports.Identity = require_key_pad_menu.Identity;
 exports.InlineEdit = require_key_pad_menu.InlineEdit;
 exports.InlineEditTable = InlineEditTable;
 exports.Input = require_text_truncate.Input;
 exports.InsightsPanel = InsightsPanel;
+exports.InspectorLayout = InspectorLayout;
 exports.KanbanBoard = KanbanBoard;
 exports.Kbd = require_text_truncate.Kbd;
 exports.KeyPadMenu = require_key_pad_menu.KeyPadMenu;
@@ -8543,7 +9447,7 @@ exports.MenuSeparator = require_text_truncate.MenuSeparator;
 exports.MenuTrigger = require_text_truncate.MenuTrigger;
 exports.MenubarContainer = require_text_truncate.MenubarContainer;
 exports.MenubarRoot = require_text_truncate.MenubarRoot;
-exports.Meter = require_key_pad_menu.Meter;
+exports.Meter = require_text_truncate.Meter;
 Object.defineProperty(exports, "MetricsCard", {
 	enumerable: true,
 	get: function() {
@@ -8571,6 +9475,7 @@ exports.ProjectSwitcher = require_field_sidebar.ProjectSwitcher;
 exports.PromptTemplate = PromptTemplate;
 exports.PropertyExplorer = PropertyExplorer;
 exports.QueryBar = require_field_sidebar.QueryBar;
+exports.QueryFilterBar = QueryFilterBar;
 exports.QueryResultsTable = QueryResultsTable;
 exports.QuickActions = QuickActions;
 exports.Radio = require_key_pad_menu.Radio;
@@ -8593,10 +9498,12 @@ exports.SHADER_PARAM_KEYS = require_key_pad_menu.SHADER_PARAM_KEYS;
 exports.SHADER_PRESETS = require_key_pad_menu.SHADER_PRESETS;
 exports.SHADER_PRESET_IDS = require_key_pad_menu.SHADER_PRESET_IDS;
 exports.SavedFilters = SavedFilters;
+exports.ScoreBreakdown = require_field_sidebar.ScoreBreakdown;
 exports.ScrollArea = require_key_pad_menu.ScrollArea;
 exports.SearchCombobox = require_field_sidebar.SearchCombobox;
 exports.Section = require_key_pad_menu.Section;
 exports.SegmentBuilder = SegmentBuilder;
+exports.SegmentedControl = SegmentedControl;
 exports.SelectItem = require_text_truncate.SelectItem;
 exports.SelectLabel = require_text_truncate.SelectLabel;
 exports.SelectPopover = require_text_truncate.SelectPopover;
@@ -8607,17 +9514,18 @@ exports.SettingsForm = require_field_sidebar.SettingsForm;
 exports.ShaderSurface = require_key_pad_menu.ShaderSurface;
 exports.Sidebar = Sidebar;
 exports.SidebarNav = require_field_sidebar.SidebarNav;
-exports.Skeleton = require_key_pad_menu.Skeleton;
-exports.SkeletonAvatar = require_key_pad_menu.SkeletonAvatar;
-exports.SkeletonCard = require_key_pad_menu.SkeletonCard;
-exports.SkeletonTable = require_key_pad_menu.SkeletonTable;
-exports.SkeletonText = require_key_pad_menu.SkeletonText;
+exports.Skeleton = require_text_truncate.Skeleton;
+exports.SkeletonAvatar = require_text_truncate.SkeletonAvatar;
+exports.SkeletonCard = require_text_truncate.SkeletonCard;
+exports.SkeletonTable = require_text_truncate.SkeletonTable;
+exports.SkeletonText = require_text_truncate.SkeletonText;
 exports.Slider = require_text_truncate.Slider;
 exports.SpatialNavProvider = SpatialNavProvider;
 exports.Spinner = require_text_truncate.Spinner;
 exports.SqlEditor = SqlEditor;
 exports.StarRating = require_text_truncate.StarRating;
 exports.StatCard = require_text_truncate.StatCard;
+exports.StatusDot = StatusDot;
 exports.StatusSelect = require_field_sidebar.StatusSelect;
 exports.StepBuilder = require_key_pad_menu.StepBuilder;
 exports.SummaryRow = SummaryRow;
@@ -8683,10 +9591,10 @@ exports.enComboboxLabels = enComboboxLabels;
 exports.enStarRatingLabels = enStarRatingLabels;
 exports.fieldValues = require_field_sidebar.fieldValues;
 exports.formatClause = require_field_sidebar.formatClause;
-exports.formatOptDateTime = require_key_pad_menu.formatOptDateTime;
-exports.formatOptNumber = require_key_pad_menu.formatOptNumber;
-exports.formatOptShortDate = require_key_pad_menu.formatOptShortDate;
-exports.formatOptTime = require_key_pad_menu.formatOptTime;
+exports.formatOptDateTime = require_text_truncate.formatOptDateTime;
+exports.formatOptNumber = require_text_truncate.formatOptNumber;
+exports.formatOptShortDate = require_text_truncate.formatOptShortDate;
+exports.formatOptTime = require_text_truncate.formatOptTime;
 exports.formatQuery = require_field_sidebar.formatQuery;
 exports.generatedTheme = generatedTheme;
 exports.getCompoundIdForSpec = getCompoundIdForSpec;
@@ -8695,6 +9603,7 @@ exports.getShaderFragment = require_key_pad_menu.getShaderFragment;
 exports.getShaderPreset = require_key_pad_menu.getShaderPreset;
 exports.getThemeDescriptor = getThemeDescriptor;
 exports.getTrappedContextRole = getTrappedContextRole;
+exports.hasActiveQuery = hasActiveQuery;
 exports.isDescriptorSpec = isDescriptorSpec;
 exports.isEmptyQuery = require_field_sidebar.isEmptyQuery;
 exports.isForceLightSpec = isForceLightSpec;