@reopt-ai/opt-ui 1.8.0 → 1.9.0

package/dist/{shader-surface-BUPZ0P-n.js → key-pad-menu-BFd79JoS.js}

@@ -1,10 +1,10 @@
 "use client";
-import { $t as koBreadcrumbLabels, Bn as _objectSpread2, Cn as OPT_FOCUS, En as OPT_INPUT, In as OPT_TEXT_PRIMARY, Ln as OPT_TEXT_SECONDARY, Pn as OPT_TEXTAREA_SIZE, Qt as Button, Rn as OPT_TEXT_TERTIARY, Un as cn, Vn as _objectWithoutProperties, Yt as Spinner, an as RequiredMark, at as MenuPopover$1, cn as OPT_ANIMATE_DRAWER, ct as MenuTrigger$1, hn as OPT_BORDER, in as FieldMessages, kn as OPT_SURFACE, ln as OPT_ANIMATE_ENTER_EXIT, nt as MenuItem$1, on as getDescribedBy, ot as MenuRoot$1, qt as useInputId, rn as useControlledState, st as MenuSeparator$1, wn as OPT_FOCUS_VISIBLE } from "./pagination-DWbvACuN.js";
+import { $t as Spinner, An as OPT_INPUT, Bn as OPT_TEXT_PRIMARY, Dn as OPT_FOCUS, Ft as SelectRoot$1, Gn as _objectWithoutProperties, Hn as OPT_TEXT_TERTIARY, It as SelectTrigger$1, Mt as SelectItem$1, Nn as OPT_SURFACE, On as OPT_FOCUS_VISIBLE, Pt as SelectPopover$1, Rn as OPT_TEXTAREA_SIZE, Vn as OPT_TEXT_SECONDARY, Wn as _objectSpread2, Zt as useInputId, cn as FieldMessages, dt as MenuSeparator$1, fn as OPT_ANIMATE_DRAWER, ft as MenuTrigger$1, ln as RequiredMark, lt as MenuPopover$1, nn as Button, ot as MenuItem$1, pn as OPT_ANIMATE_ENTER_EXIT, qn as cn, rn as koBreadcrumbLabels, sn as useControlledState, un as getDescribedBy, ut as MenuRoot$1, yn as OPT_BORDER } from "./highlight-C2sfnJN8.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext, createElement, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, DialogDismiss, DialogPanel, DialogRoot, Meter, RadioGroupRoot, Separator, Toggle, ToggleGroup, useDialogClose, useRadioGroupContext } from "@reopt-ai/opt-ui-primitives";
-import { ChevronDown, GripVertical } from "lucide-react";
+import { Check, ChevronDown, GripVertical, Pencil, X } from "lucide-react";
 import { Group, Panel, Separator as Separator$1 } from "react-resizable-panels";
 import { Mesh, Program, Renderer, Triangle } from "ogl";
 import { hexToSrgb } from "@reopt-ai/opt-palette";
@@ -17,7 +17,7 @@ const _excluded$17 = [
 	"className",
 	"children"
 ];
-const toneStyles = {
+const toneStyles$1 = {
 	primary: "text-text-primary",
 	secondary: "text-text-secondary",
 	tertiary: "text-text-tertiary",
@@ -28,7 +28,7 @@ function Text(_ref) {
 	let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$17);
 	const Component = as !== null && as !== void 0 ? as : "span";
 	const elementProps = _objectSpread2(_objectSpread2({}, props), {}, {
-		className: cn(`opt-type-${variant}`, toneStyles[tone], truncate && "truncate", className),
+		className: cn(`opt-type-${variant}`, toneStyles$1[tone], truncate && "truncate", className),
 		"data-opt-component": "text",
 		"data-opt-part": "root",
 		"data-opt-id": "NFKP2",
@@ -277,7 +277,7 @@ const _excluded2$8 = [
 	"children",
 	"orientation"
 ];
-const sizeStyles$5 = {
+const sizeStyles$8 = {
 	sm: "h-8 min-w-8 px-2 text-xs gap-1.5",
 	md: "h-10 min-w-10 px-3 text-sm gap-2"
 };
@@ -285,7 +285,7 @@ const toggleBase = cn("inline-flex cursor-pointer items-center justify-center ro
 /** A two-state (pressed) button. Use standalone or inside `ToggleGroup`. */
 function Toggle$1(_ref) {
 	let { size = "md", className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$15);
-	return /* @__PURE__ */ jsx(Toggle, _objectSpread2(_objectSpread2({ className: cn(toggleBase, sizeStyles$5[size], className) }, props), {}, {
+	return /* @__PURE__ */ jsx(Toggle, _objectSpread2(_objectSpread2({ className: cn(toggleBase, sizeStyles$8[size], className) }, props), {}, {
 		"data-opt-id": "GFCMY",
 		"data-opt-slug": "toggle.Toggle",
 		children
@@ -559,7 +559,7 @@ const _excluded$12 = [
 	"aria-label",
 	"aria-labelledby"
 ];
-const sizeStyles$4 = {
+const sizeStyles$7 = {
 	sm: {
 		track: "h-5 w-9",
 		thumb: "h-4 w-4",
@@ -583,7 +583,7 @@ const Switch = forwardRef((_ref, ref) => {
 	const switchId = (_useInputId = useInputId(id, label, "switch")) !== null && _useInputId !== void 0 ? _useInputId : `switch-${fallbackId}`;
 	const hintText = hint !== null && hint !== void 0 ? hint : description;
 	const hasError = Boolean(error);
-	const styles = sizeStyles$4[size];
+	const styles = sizeStyles$7[size];
 	const labelId = label ? `${switchId}-label` : void 0;
 	const switchLabelledBy = ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : ariaLabel ? void 0 : labelId;
 	const switchAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : switchLabelledBy ? void 0 : "Switch";
@@ -889,7 +889,7 @@ function useImageLoadingStatus(src, { srcSet, sizes, crossOrigin, referrerPolicy
 	]);
 	return status;
 }
-const sizeStyles$3 = {
+const sizeStyles$6 = {
 	xs: "h-6 w-6 text-[10px]",
 	sm: "h-8 w-8 text-xs",
 	md: "h-10 w-10 text-sm",
@@ -973,7 +973,7 @@ function Avatar(_ref) {
 	return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({
 		role: "img",
 		"aria-label": avatarLabel,
-		className: cn("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", sizeStyles$3[size], !showImage && bgColor, className)
+		className: cn("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", sizeStyles$6[size], !showImage && bgColor, className)
 	}, props), {}, {
 		"data-opt-id": "SCMM0",
 		"data-opt-slug": "avatar.Avatar",
@@ -996,7 +996,7 @@ function AvatarGroup(_ref5) {
 			className: "ring-surface relative -ml-2 inline-block rounded-full ring-2 first:ml-0",
 			children: child
 		}, index)), remainingCount > 0 && /* @__PURE__ */ jsxs("span", {
-			className: cn("bg-bg-subtle text-text-secondary ring-surface relative inline-flex items-center justify-center rounded-full font-medium ring-2", sizeStyles$3[size]),
+			className: cn("bg-bg-subtle text-text-secondary ring-surface relative inline-flex items-center justify-center rounded-full font-medium ring-2", sizeStyles$6[size]),
 			children: ["+", remainingCount]
 		})]
 	}));
@@ -1025,7 +1025,7 @@ const _excluded2$3 = [
 	"indeterminate",
 	"className"
 ];
-const sizeStyles$2 = {
+const sizeStyles$5 = {
 	sm: "h-1",
 	md: "h-2",
 	lg: "h-3"
@@ -1065,7 +1065,7 @@ function Progress(_ref) {
 				children: progress.valueText
 			})]
 		}), /* @__PURE__ */ jsx("div", {
-			className: cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$2[size]),
+			className: cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$5[size]),
 			role: "progressbar",
 			"aria-valuenow": progress === null || progress === void 0 ? void 0 : progress.clampedValue,
 			"aria-valuemin": progress ? 0 : void 0,
@@ -1158,7 +1158,7 @@ const _excluded$7 = [
 	"getValueLabel",
 	"className"
 ];
-const sizeStyles$1 = {
+const sizeStyles$4 = {
 	sm: "h-1",
 	md: "h-2",
 	lg: "h-3"
@@ -1196,7 +1196,7 @@ function Meter$1(_ref) {
 			max,
 			getValueLabel,
 			"aria-label": label !== null && label !== void 0 ? label : `${Math.round(percentage)}%`,
-			className: cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$1[size]),
+			className: cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$4[size]),
 			children: /* @__PURE__ */ jsx("div", {
 				className: cn("h-full rounded-full transition-all duration-300 ease-out", variantStyles[variant]),
 				style: { width: `${percentage}%` }
@@ -1793,7 +1793,7 @@ const _excluded$5 = [
 	"disabled",
 	"className"
 ];
-const sizeStyles = {
+const sizeStyles$3 = {
 	sm: {
 		radio: "h-4 w-4",
 		dot: "h-2 w-2",
@@ -1861,7 +1861,7 @@ const Radio = forwardRef((_ref, ref) => {
 	const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : groupContext.size;
 	const disabled = (_ref2 = disabledProp !== null && disabledProp !== void 0 ? disabledProp : groupContext.disabled) !== null && _ref2 !== void 0 ? _ref2 : primContext === null || primContext === void 0 ? void 0 : primContext.disabled;
 	const hintText = hint !== null && hint !== void 0 ? hint : description;
-	const styles = sizeStyles[size];
+	const styles = sizeStyles$3[size];
 	const isChecked = (primContext === null || primContext === void 0 ? void 0 : primContext.value) === value;
 	const radioId = `radio-${useId().replace(/:/g, "")}`;
 	const labelId = label ? `${radioId}-label` : void 0;
@@ -3649,6 +3649,842 @@ const ShaderSurfaceComponent = forwardRef(function ShaderSurface({ preset, color
 ShaderSurfaceComponent.displayName = "ShaderSurface";
 const ShaderSurface = ShaderSurfaceComponent;
 //#endregion
-export { CardHeader as $, DropdownTrigger as A, Avatar as B, LoadingOverlay as C, DropdownItem as D, DropdownContent as E, formatOptTime as F, SkeletonCard as G, Textarea as H, StepBuilder as I, Switch as J, SkeletonTable as K, Meter$1 as L, formatOptDateTime as M, formatOptNumber as N, DropdownMenu as O, formatOptShortDate as P, CardFooter as Q, CircularProgress as R, BlockLayout as S, RadioGroup as T, Skeleton as U, AvatarGroup as V, SkeletonAvatar as W, CardContent as X, Card as Y, CardDescription as Z, Section as _, SHADER_PRESETS as a, AccordionTrigger$1 as at, PageHeader as b, getShaderPreset as c, OtpField as ct, DrawerPanel as d, Text as dt, CardTitle as et, DrawerRoot as f, ResizablePanelGroup as g, ResizablePanel as h, SHADER_PARAM_KEYS as i, AccordionRoot$1 as it, ConditionBuilder as j, DropdownSeparator as k, VirtualList as l, Separator$2 as lt, ResizableHandle as m, SHADER_OVERLAY_PARAM_KEYS as n, AccordionContent$1 as nt, SHADER_PRESET_IDS as o, Toggle$1 as ot, Logo as p, SkeletonText as q, SHADER_PARAM_FALLBACK as r, AccordionItem$1 as rt, getShaderFragment as s, ToggleGroup$1 as st, ShaderSurface as t, Breadcrumb as tt, DrawerClose as u, Heading as ut, Container as v, Radio as w, createBlock as x, ScrollArea as y, Progress as z };
+//#region src/core/facet.tsx
+const defaultLabels$1 = {
+	empty: "No values in this range.",
+	loading: "Counting…",
+	showMore: (remaining) => `Show ${remaining} more`,
+	showLess: "Show fewer",
+	selectHint: (label, count, share) => `${label}, ${count} (${share})`
+};
+function defaultCountFormat(value) {
+	return new Intl.NumberFormat(void 0, { notation: "compact" }).format(value);
+}
+function formatShare(share) {
+	const percent = share * 100;
+	if (percent > 0 && percent < .1) return "<0.1%";
+	return `${percent >= 10 ? Math.round(percent) : percent.toFixed(1)}%`;
+}
+/**
+* Facet — one value of a field, its count, and its share of the whole.
+*
+* The row is the filter: reading it and acting on it are the same gesture,
+* which is what separates a facet from a legend.
+*/
+function Facet({ item, selected = false, onSelect, showShare = true, share, countFormatter = defaultCountFormat, layout = "vertical", labels, className }) {
+	var _ref;
+	const text = _objectSpread2(_objectSpread2({}, defaultLabels$1), labels);
+	const resolvedShare = (_ref = share !== null && share !== void 0 ? share : item.share) !== null && _ref !== void 0 ? _ref : 0;
+	const interactive = onSelect !== void 0 && !item.disabled;
+	const countText = item.count === void 0 ? "" : countFormatter(item.count);
+	const shareText = formatShare(resolvedShare);
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		showShare && layout === "vertical" && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cn("absolute inset-y-0 left-0 rounded-[inherit] transition-[width] duration-300", selected ? "bg-accent/25" : "bg-accent/10"),
+			style: {
+				width: `${Math.max(resolvedShare * 100, resolvedShare > 0 ? 1.5 : 0)}%`,
+				backgroundColor: item.color ? `color-mix(in oklab, ${item.color} ${selected ? 30 : 16}%, transparent)` : void 0
+			}
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "gap-element relative flex min-w-0 flex-1 items-center",
+			children: [
+				item.color && !item.icon && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "size-2 shrink-0 rounded-full",
+					style: { backgroundColor: item.color }
+				}),
+				item.icon && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "shrink-0",
+					children: item.icon
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: item.label
+				})
+			]
+		}),
+		item.count !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "text-text-tertiary relative shrink-0 tabular-nums",
+			children: countText
+		}),
+		showShare && item.count !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "text-text-tertiary relative w-11 shrink-0 text-right text-xs tabular-nums",
+			children: shareText
+		})
+	] });
+	const shellClass = cn("relative flex w-full items-center gap-element overflow-hidden rounded-md px-2 py-1.5 text-left text-sm", layout === "horizontal" && "w-auto", selected ? "text-text-primary font-medium" : "text-text-secondary", interactive && "hover:bg-accent-subtle hover:text-text-primary cursor-pointer transition-colors", item.disabled && "cursor-not-allowed opacity-50", className);
+	if (!interactive) return /* @__PURE__ */ jsx("div", {
+		className: shellClass,
+		"data-selected": selected || void 0,
+		"data-opt-id": "E9H18",
+		"data-opt-slug": "facet.Facet",
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn(shellClass, OPT_FOCUS_VISIBLE),
+		"aria-pressed": selected,
+		"aria-label": text.selectHint(typeof item.label === "string" ? item.label : item.id, countText, shareText),
+		disabled: item.disabled,
+		onClick: () => onSelect(item.id),
+		"data-selected": selected || void 0,
+		"data-opt-id": "E9H18",
+		"data-opt-slug": "facet.Facet",
+		children: content
+	});
+}
+/**
+* FacetGroup — the distribution of one field, as a list you can filter with.
+*
+* Counts alone do not say whether 4,000 is most of the data or a rounding
+* error, so every row carries its share of the whole as a bar behind the
+* label. The tail collapses by default: a high-cardinality field would
+* otherwise push everything else off the screen.
+*
+* @example
+* ```tsx
+* <FacetGroup
+*   items={topValues}
+*   selected={filters}
+*   onSelectedChange={setFilters}
+*   total={sampledRows}
+*   max={5}
+* />
+* ```
+*/
+function FacetGroup({ items, selected, onSelectedChange, selection = "multiple", layout = "vertical", showShare = true, countFormatter = defaultCountFormat, max, total, loading = false, emptyState, labels, className, "aria-label": ariaLabel }) {
+	const text = _objectSpread2(_objectSpread2({}, defaultLabels$1), labels);
+	const [uncontrolled, setUncontrolled] = useState([]);
+	const [expanded, setExpanded] = useState(false);
+	const current = selected !== null && selected !== void 0 ? selected : uncontrolled;
+	const denominator = useMemo(() => {
+		if (total !== void 0 && total > 0) return total;
+		const sum = items.reduce((acc, item) => {
+			var _item$count;
+			return acc + ((_item$count = item.count) !== null && _item$count !== void 0 ? _item$count : 0);
+		}, 0);
+		return sum > 0 ? sum : 1;
+	}, [items, total]);
+	const visible = max === void 0 || expanded ? items : items.slice(0, Math.max(max, 1));
+	const remaining = items.length - visible.length;
+	const handleSelect = (id) => {
+		if (selection === "none") return;
+		const next = selection === "single" ? current.includes(id) ? [] : [id] : current.includes(id) ? current.filter((value) => value !== id) : [...current, id];
+		if (selected === void 0) setUncontrolled(next);
+		onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(next);
+	};
+	if (loading) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-element", className),
+		"aria-busy": "true",
+		"aria-label": ariaLabel,
+		"data-opt-id": "G1RNN",
+		"data-opt-slug": "facet.FacetGroup",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: text.loading
+		}), Array.from({ length: Math.min(max !== null && max !== void 0 ? max : 4, 6) }, (_, index) => /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "bg-bg-subtle h-7 animate-pulse rounded-md"
+		}, index))]
+	});
+	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: cn("text-text-tertiary px-2 py-1.5 text-sm", className),
+		"aria-label": ariaLabel,
+		"data-opt-id": "G1RNN",
+		"data-opt-slug": "facet.FacetGroup",
+		children: emptyState !== null && emptyState !== void 0 ? emptyState : text.empty
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(layout === "vertical" ? "flex flex-col gap-0.5" : "flex flex-wrap items-center gap-element", className),
+		role: selection === "none" ? "list" : "group",
+		"aria-label": ariaLabel,
+		"data-opt-id": "G1RNN",
+		"data-opt-slug": "facet.FacetGroup",
+		children: [visible.map((item) => {
+			var _item$share, _item$count2;
+			return /* @__PURE__ */ jsx(Facet, {
+				item,
+				layout,
+				selected: current.includes(item.id),
+				onSelect: selection === "none" ? void 0 : handleSelect,
+				showShare,
+				share: (_item$share = item.share) !== null && _item$share !== void 0 ? _item$share : ((_item$count2 = item.count) !== null && _item$count2 !== void 0 ? _item$count2 : 0) / denominator,
+				countFormatter,
+				labels
+			}, item.id);
+		}), (remaining > 0 || expanded) && max !== void 0 && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: cn("text-text-tertiary hover:text-text-primary rounded-md px-2 py-1 text-left text-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+			onClick: () => setExpanded((value) => !value),
+			children: expanded ? text.showLess : text.showMore(remaining)
+		})]
+	});
+}
+//#endregion
+//#region src/core/expression.tsx
+const toneStyles = {
+	accent: {
+		text: "text-accent",
+		rule: "decoration-accent"
+	},
+	success: {
+		text: "text-success",
+		rule: "decoration-success"
+	},
+	warning: {
+		text: "text-warning",
+		rule: "decoration-warning"
+	},
+	danger: {
+		text: "text-danger",
+		rule: "decoration-danger"
+	},
+	info: {
+		text: "text-info",
+		rule: "decoration-info"
+	},
+	muted: {
+		text: "text-text-secondary",
+		rule: "decoration-border-hover"
+	}
+};
+/**
+* Expression — one clause of a condition, written as a sentence and edited in
+* place.
+*
+* A rule like "when the count of checkout events is above 100 over 5 minutes"
+* is a sentence before it is a form. Rendering it as one — with only the
+* variable halves clickable — lets a reader verify the rule by reading it,
+* which is the step a stack of labelled inputs skips.
+*
+* @example
+* ```tsx
+* <ExpressionGroup>
+*   <Expression description="when" value="count()" onClick={openAggregation} />
+*   <Expression description="is above" value="100" tone="danger" onClick={openThreshold} />
+*   <Expression description="for the last" value="5 minutes" onClick={openWindow} />
+* </ExpressionGroup>
+* ```
+*/
+function Expression({ description, value, tone = "accent", active = false, invalid = false, disabled = false, onClick, display = "inline", "aria-label": ariaLabel, className }) {
+	const palette = invalid ? toneStyles.danger : toneStyles[tone];
+	const interactive = onClick !== void 0 && !disabled;
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: cn("text-text-secondary text-xs font-semibold tracking-wide uppercase", disabled && "opacity-60"),
+		children: description
+	}), value !== void 0 && value !== null && value !== "" && /* @__PURE__ */ jsx("span", {
+		className: cn("text-sm font-semibold", palette.text, interactive && cn("underline decoration-2 underline-offset-4", palette.rule, active ? "decoration-solid" : "decoration-dotted"), disabled && "opacity-60"),
+		children: value
+	})] });
+	const shell = cn(display === "stacked" ? "flex flex-col items-start gap-0.5" : "inline-flex items-baseline gap-1.5", "rounded-md px-1.5 py-1 text-left", interactive && "hover:bg-accent-subtle cursor-pointer transition-colors", active && "bg-accent-subtle", disabled && "cursor-not-allowed", className);
+	if (!interactive) return /* @__PURE__ */ jsx("span", {
+		className: shell,
+		"data-invalid": invalid || void 0,
+		"data-opt-id": "TXGA8",
+		"data-opt-slug": "expression.Expression",
+		children: body
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn(shell, OPT_FOCUS_VISIBLE),
+		onClick,
+		disabled,
+		"aria-expanded": active,
+		"aria-label": ariaLabel,
+		"data-invalid": invalid || void 0,
+		"data-opt-id": "TXGA8",
+		"data-opt-slug": "expression.Expression",
+		children: body
+	});
+}
+/**
+* ExpressionGroup — the clauses of one condition, laid out so they read as a
+* single sentence rather than as a row of unrelated controls.
+*/
+function ExpressionGroup({ children, display = "sentence", className, "aria-label": ariaLabel }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(display === "sentence" ? "flex flex-wrap items-baseline gap-x-1 gap-y-1" : "grid grid-flow-col auto-cols-fr items-start gap-group", className),
+		role: "group",
+		"aria-label": ariaLabel,
+		"data-opt-id": "F78CE",
+		"data-opt-slug": "expression.ExpressionGroup",
+		children
+	});
+}
+//#endregion
+//#region src/core/text-truncate.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Measures text in the element's own resolved font, not an assumed one. */
+function createMeasurer(element) {
+	const context = document.createElement("canvas").getContext("2d");
+	if (!context) return null;
+	const computed = window.getComputedStyle(element);
+	context.font = [
+		computed.fontStyle,
+		computed.fontVariant,
+		computed.fontWeight,
+		`${computed.fontSize}/${computed.lineHeight}`,
+		computed.fontFamily
+	].join(" ");
+	const spacing = Number.parseFloat(computed.letterSpacing) || 0;
+	return (value) => context.measureText(value).width + spacing * value.length;
+}
+/** Largest `n` in `[0, max]` for which `fits(n)` holds. */
+function largestFitting(max, fits) {
+	let low = 0;
+	let high = max;
+	while (low < high) {
+		const mid = Math.ceil((low + high) / 2);
+		if (fits(mid)) low = mid;
+		else high = mid - 1;
+	}
+	return low;
+}
+function truncateToWidth(text, side, ellipsis, available, measure) {
+	if (measure(text) <= available) return text;
+	const chars = Array.from(text);
+	if (side === "end") {
+		const keep = largestFitting(chars.length, (n) => measure(chars.slice(0, n).join("") + ellipsis) <= available);
+		return chars.slice(0, keep).join("") + ellipsis;
+	}
+	if (side === "start") {
+		const keep = largestFitting(chars.length, (n) => measure(ellipsis + chars.slice(chars.length - n).join("")) <= available);
+		return ellipsis + chars.slice(chars.length - keep).join("");
+	}
+	if (side === "startEnd") {
+		const keep = largestFitting(Math.floor(chars.length / 2), (n) => {
+			const head = chars.slice(0, n).join("");
+			const tail = chars.slice(chars.length - n).join("");
+			return measure(head + ellipsis + tail) <= available;
+		});
+		if (keep === 0) return ellipsis;
+		return chars.slice(0, keep).join("") + ellipsis + chars.slice(chars.length - keep).join("");
+	}
+	const span = largestFitting(chars.length, (n) => {
+		const start = Math.floor((chars.length - n) / 2);
+		return measure(ellipsis + chars.slice(start, start + n).join("") + ellipsis) <= available;
+	});
+	if (span === 0) return ellipsis;
+	const start = Math.floor((chars.length - span) / 2);
+	return ellipsis + chars.slice(start, start + span).join("") + ellipsis;
+}
+/**
+* TextTruncate — drops characters from the part of a string that identifies it
+* least.
+*
+* CSS can only cut the end. That is the wrong end for the strings analytics
+* shows most: two URLs that differ in their query string, two ids that share a
+* prefix, a stack frame whose filename is at the tail. This measures the real
+* text in the real font against the real available width and cuts where the
+* caller says.
+*
+* The full string stays in the accessibility tree and in `title`, so
+* truncation never costs the reader information — only space.
+*
+* @example
+* ```tsx
+* <TextTruncate text={event.url} truncation="startEnd" />
+* ```
+*/
+function TextTruncate({ text, truncation = "startEnd", ellipsis = "…", width, children, className }) {
+	const ref = useRef(null);
+	const [available, setAvailable] = useState(width !== null && width !== void 0 ? width : null);
+	useIsomorphicLayoutEffect(() => {
+		if (width !== void 0) {
+			setAvailable(width);
+			return;
+		}
+		const element = ref.current;
+		if (!element || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) setAvailable(entry.contentRect.width);
+		});
+		observer.observe(element);
+		setAvailable(element.getBoundingClientRect().width);
+		return () => observer.disconnect();
+	}, [width]);
+	const [rendered, setRendered] = useState(text);
+	useIsomorphicLayoutEffect(() => {
+		const element = ref.current;
+		if (!element || available === null || available <= 0) {
+			setRendered(text);
+			return;
+		}
+		const measure = createMeasurer(element);
+		if (!measure) {
+			setRendered(text);
+			return;
+		}
+		setRendered(truncateToWidth(text, truncation, ellipsis, available, measure));
+	}, [
+		text,
+		truncation,
+		ellipsis,
+		available
+	]);
+	const truncated = rendered !== text;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cn("block w-full overflow-hidden whitespace-nowrap", className),
+		title: truncated ? text : void 0,
+		"data-opt-id": "Y6BGX",
+		"data-opt-slug": "text-truncate.TextTruncate",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": truncated ? "true" : void 0,
+			children: children ? children(rendered) : rendered
+		}), truncated && /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: text
+		})]
+	});
+}
+//#endregion
+//#region src/core/live-region.tsx
+/**
+* LiveRegion — says out loud what a live view changed.
+*
+* Data that updates without a page change is invisible to a screen reader
+* unless something narrates it. This is that narrator: one polite region per
+* live surface, throttled so a fast stream produces a readable summary rather
+* than a torrent, and alternating between two nodes so a repeat of the same
+* words is still announced rather than swallowed as an unchanged region.
+*
+* @example
+* ```tsx
+* <LiveRegion
+*   message={`${newRows} new events`}
+*   nonce={batchId}
+*   throttleMs={4000}
+*   muted={paused}
+* />
+* ```
+*/
+function LiveRegion({ message, nonce, politeness = "polite", throttleMs = 0, muted = false }) {
+	const [slots, setSlots] = useState(["", ""]);
+	const activeSlot = useRef(0);
+	const pending = useRef(null);
+	const timer = useRef(null);
+	useEffect(() => {
+		if (muted || message === "") return;
+		const flush = () => {
+			const next = pending.current;
+			pending.current = null;
+			timer.current = null;
+			if (next === null) return;
+			const slot = activeSlot.current;
+			activeSlot.current = slot === 0 ? 1 : 0;
+			setSlots(slot === 0 ? [next, ""] : ["", next]);
+		};
+		pending.current = message;
+		if (throttleMs <= 0) {
+			flush();
+			return;
+		}
+		if (timer.current === null) timer.current = setTimeout(flush, throttleMs);
+		return () => {
+			if (timer.current !== null) {
+				clearTimeout(timer.current);
+				timer.current = null;
+			}
+		};
+	}, [
+		message,
+		nonce,
+		throttleMs,
+		muted
+	]);
+	useEffect(() => {
+		if (!muted) return;
+		pending.current = null;
+		if (timer.current !== null) {
+			clearTimeout(timer.current);
+			timer.current = null;
+		}
+		setSlots(["", ""]);
+	}, [muted]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sr-only",
+		"data-opt-id": "0CFGR",
+		"data-opt-slug": "live-region.LiveRegion",
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "status",
+			"aria-live": politeness,
+			"aria-atomic": "true",
+			children: slots[0]
+		}), /* @__PURE__ */ jsx("div", {
+			role: "status",
+			"aria-live": politeness,
+			"aria-atomic": "true",
+			children: slots[1]
+		})]
+	});
+}
+//#endregion
+//#region src/core/color-palette.tsx
+/** The theme's own chart ramps, so a picker can offer them without a literal. */
+const THEME_PALETTES = [
+	{
+		id: "categorical",
+		label: "Categorical",
+		kind: "categorical",
+		colors: Array.from({ length: 10 }, (_, index) => `var(--opt-chart-${index + 1})`)
+	},
+	{
+		id: "sequential",
+		label: "Sequential",
+		kind: "sequential",
+		colors: Array.from({ length: 5 }, (_, index) => `var(--opt-chart-sequential-${index + 1})`)
+	},
+	{
+		id: "diverging",
+		label: "Diverging",
+		kind: "diverging",
+		colors: [
+			"var(--opt-chart-diverging-negative)",
+			"var(--opt-chart-diverging-neutral)",
+			"var(--opt-chart-diverging-positive)"
+		]
+	}
+];
+const sizeStyles$2 = {
+	xs: "h-1.5",
+	sm: "h-2.5",
+	md: "h-4",
+	lg: "h-6"
+};
+/**
+* ColorPaletteDisplay — a palette, shown as the thing it will look like.
+*
+* A palette name tells a reader nothing; the colours do. Categorical palettes
+* draw as discrete blocks and ramps draw as a blend, so the picture itself
+* states which kind of data the palette is for.
+*/
+function ColorPaletteDisplay({ palette, render, size = "sm", "aria-label": ariaLabel, className }) {
+	const mode = render !== null && render !== void 0 ? render : palette.kind === "categorical" ? "stops" : "gradient";
+	const colors = palette.colors.length > 0 ? palette.colors : ["transparent"];
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex w-full overflow-hidden rounded-sm", sizeStyles$2[size], className),
+		role: "img",
+		"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : palette.label,
+		style: mode === "gradient" ? { backgroundImage: `linear-gradient(to right, ${colors.join(", ")})` } : void 0,
+		"data-opt-id": "E7T89",
+		"data-opt-slug": "color-palette.ColorPaletteDisplay",
+		children: mode === "stops" && colors.map((color, index) => /* @__PURE__ */ jsx("span", {
+			className: "h-full flex-1",
+			style: { backgroundColor: color }
+		}, `${color}-${index}`))
+	});
+}
+/**
+* ColorPalettePicker — choose the colours a visualisation is drawn in.
+*
+* Each option shows its own palette, so the choice is made by looking rather
+* than by remembering what "Cool" meant last time.
+*
+* @example
+* ```tsx
+* <ColorPalettePicker
+*   palettes={THEME_PALETTES}
+*   value={paletteId}
+*   onValueChange={setPaletteId}
+*   label="Series colours"
+* />
+* ```
+*/
+function ColorPalettePicker({ palettes, value, onValueChange, label = "Colour palette", hideLabel = false, size = "sm", disabled = false, className }) {
+	var _palettes$find, _ref;
+	const labelId = useId();
+	const selected = (_palettes$find = palettes.find((palette) => palette.id === value)) !== null && _palettes$find !== void 0 ? _palettes$find : palettes[0];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-element", className),
+		"data-opt-id": "5R0PG",
+		"data-opt-slug": "color-palette.ColorPalettePicker",
+		children: [/* @__PURE__ */ jsx("span", {
+			id: labelId,
+			className: cn("text-text-primary text-sm font-medium", hideLabel && "sr-only"),
+			children: label
+		}), /* @__PURE__ */ jsxs(SelectRoot$1, {
+			value: (_ref = value !== null && value !== void 0 ? value : selected === null || selected === void 0 ? void 0 : selected.id) !== null && _ref !== void 0 ? _ref : "",
+			setValue: (next) => {
+				if (typeof next === "string") onValueChange === null || onValueChange === void 0 || onValueChange(next);
+			},
+			children: [/* @__PURE__ */ jsx(SelectTrigger$1, {
+				"aria-labelledby": labelId,
+				disabled,
+				className: cn("gap-group", OPT_FOCUS_VISIBLE),
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "gap-group flex min-w-0 flex-1 items-center",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-text-primary shrink-0 truncate text-sm",
+						children: selected === null || selected === void 0 ? void 0 : selected.label
+					}), selected && /* @__PURE__ */ jsx(ColorPaletteDisplay, {
+						palette: selected,
+						size,
+						className: cn("min-w-16 flex-1", "border border-border"),
+						"aria-label": ""
+					})]
+				})
+			}), /* @__PURE__ */ jsx(SelectPopover$1, { children: palettes.map((palette) => /* @__PURE__ */ jsx(SelectItem$1, {
+				value: palette.id,
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "gap-group flex w-full min-w-40 items-center",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "shrink-0 truncate text-sm",
+						children: palette.label
+					}), /* @__PURE__ */ jsx(ColorPaletteDisplay, {
+						palette,
+						size,
+						className: "min-w-16 flex-1",
+						"aria-label": ""
+					})]
+				})
+			}, palette.id)) })]
+		})]
+	});
+}
+//#endregion
+//#region src/core/inline-edit.tsx
+const defaultLabels = {
+	edit: (value) => `Edit ${value}`,
+	save: "Save",
+	cancel: "Cancel",
+	invalid: "That value cannot be saved."
+};
+const sizeStyles$1 = {
+	sm: "text-sm",
+	md: "text-base",
+	lg: "text-lg font-semibold",
+	xl: "text-2xl font-semibold tracking-tight"
+};
+/**
+* InlineEdit — renames a thing where the thing is, instead of in a dialog.
+*
+* A dashboard title, a metric name, a saved segment: each is read far more
+* often than it is renamed, so the control has to disappear into the text and
+* reappear on intent. Read mode is a button carrying the text; edit mode is a
+* field sized to match it, so the words do not move when the mode does.
+*
+* Enter commits, Escape reverts, and a rejected save keeps the field open with
+* what was typed — losing an edit to a validation error is worse than the
+* error.
+*
+* @example
+* ```tsx
+* <InlineEdit as="h2" size="xl" value={dashboard.name} onSave={rename} />
+* ```
+*/
+function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder, emptyText = "Untitled", disabled = false, maxLength, suffix, labels, className }) {
+	const text = _objectSpread2(_objectSpread2({}, defaultLabels), labels);
+	const [editing, setEditing] = useState(false);
+	const [draft, setDraft] = useState(value);
+	const [rejected, setRejected] = useState(false);
+	const [saving, setSaving] = useState(false);
+	const inputRef = useRef(null);
+	useEffect(() => {
+		if (!editing) setDraft(value);
+	}, [value, editing]);
+	useEffect(() => {
+		if (editing) {
+			var _inputRef$current, _inputRef$current2;
+			(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+			(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.select();
+		}
+	}, [editing]);
+	const commit = async () => {
+		if (saving) return;
+		const next = draft.trim();
+		if (next === value) {
+			setEditing(false);
+			setRejected(false);
+			return;
+		}
+		setSaving(true);
+		try {
+			if (await onSave(next) === false) {
+				setRejected(true);
+				return;
+			}
+			setRejected(false);
+			setEditing(false);
+		} finally {
+			setSaving(false);
+		}
+	};
+	const cancel = () => {
+		setDraft(value);
+		setRejected(false);
+		setEditing(false);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			commit();
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			cancel();
+		}
+	};
+	if (editing) return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex items-center gap-element", className),
+		"data-opt-id": "RQ0H2",
+		"data-opt-slug": "inline-edit.InlineEdit",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				value: draft,
+				onChange: (event) => {
+					setDraft(event.target.value);
+					setRejected(false);
+				},
+				onKeyDown: handleKeyDown,
+				onBlur: () => void commit(),
+				placeholder,
+				maxLength,
+				disabled: saving,
+				"aria-invalid": rejected || void 0,
+				"aria-errormessage": rejected ? "inline-edit-error" : void 0,
+				className: cn(OPT_INPUT, sizeStyles$1[size], "min-w-0 flex-1")
+			}),
+			rejected && /* @__PURE__ */ jsx("span", {
+				id: "inline-edit-error",
+				role: "alert",
+				className: "sr-only",
+				children: text.invalid
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": text.save,
+				disabled: saving,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: () => void commit(),
+				className: cn("text-success hover:bg-success-subtle rounded-md p-1", OPT_FOCUS_VISIBLE),
+				children: /* @__PURE__ */ jsx(Check, {
+					className: "size-4",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": text.cancel,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: cancel,
+				className: cn("text-text-tertiary hover:bg-bg-subtle rounded-md p-1", OPT_FOCUS_VISIBLE),
+				children: /* @__PURE__ */ jsx(X, {
+					className: "size-4",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex items-center gap-element", className),
+		"data-opt-id": "RQ0H2",
+		"data-opt-slug": "inline-edit.InlineEdit",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			disabled,
+			onClick: () => setEditing(true),
+			"aria-label": text.edit(value || emptyText),
+			className: cn("group -mx-1.5 -my-0.5 inline-flex max-w-full items-center gap-element rounded-md px-1.5 py-0.5 text-left", !disabled && "hover:bg-bg-subtle cursor-pointer", disabled && "cursor-default", OPT_FOCUS_VISIBLE),
+			children: [/* @__PURE__ */ jsx(Tag, {
+				className: cn("truncate", sizeStyles$1[size], value ? "text-text-primary" : "text-text-tertiary italic"),
+				children: value || emptyText
+			}), !disabled && /* @__PURE__ */ jsx(Pencil, {
+				"aria-hidden": "true",
+				className: cn("text-text-tertiary size-3.5 shrink-0 opacity-0 transition-opacity", "group-hover:opacity-100 group-focus-visible:opacity-100")
+			})]
+		}), suffix]
+	});
+}
+//#endregion
+//#region src/core/key-pad-menu.tsx
+const sizeStyles = {
+	sm: "min-h-20 p-2 text-xs [&_[data-keypad-icon]]:size-5",
+	md: "min-h-24 p-3 text-sm [&_[data-keypad-icon]]:size-6"
+};
+/**
+* KeyPadMenu — a choice between things that are easier to recognise than to
+* name.
+*
+* A chart type, a layout, an import source: the picture is the label, and a
+* dropdown of words makes the reader translate twice. Tiles are real radios or
+* checkboxes underneath, so arrow keys, screen readers, and form submission
+* all behave as they would for any other group.
+*
+* @example
+* ```tsx
+* <KeyPadMenu
+*   label="Chart type"
+*   items={vizTypes}
+*   value={vizType}
+*   onValueChange={setVizType}
+* />
+* ```
+*/
+function KeyPadMenu({ items, label, selection = "single", value, onValueChange, columns = "auto", size = "md", hideLabel = false, className }) {
+	const name = useId();
+	const selected = new Set(value === void 0 ? [] : Array.isArray(value) ? value : [value]);
+	const handleChange = (id) => {
+		if (selection === "multiple") {
+			const next = selected.has(id) ? [...selected].filter((item) => item !== id) : [...selected, id];
+			onValueChange === null || onValueChange === void 0 || onValueChange(next);
+			return;
+		}
+		onValueChange === null || onValueChange === void 0 || onValueChange(id);
+	};
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: cn("min-w-0", className),
+		"data-opt-id": "ZZG2R",
+		"data-opt-slug": "key-pad-menu.KeyPadMenu",
+		children: [/* @__PURE__ */ jsx("legend", {
+			className: cn("text-text-primary mb-element text-sm font-medium", hideLabel && "sr-only"),
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "gap-element grid",
+			style: { gridTemplateColumns: columns === "auto" ? "repeat(auto-fill, minmax(6.5rem, 1fr))" : `repeat(${columns}, minmax(0, 1fr))` },
+			children: items.map((item) => {
+				const isSelected = selected.has(item.id);
+				return /* @__PURE__ */ jsxs("label", {
+					className: cn("relative flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg text-center transition-colors", OPT_BORDER, sizeStyles[size], isSelected ? "border-accent bg-accent-subtle text-text-primary" : "text-text-secondary hover:border-border-hover hover:bg-bg-subtle", item.disabled && "cursor-not-allowed opacity-50", "has-[:focus-visible]:outline-ring has-[:focus-visible]:outline-2"),
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							type: selection === "single" ? "radio" : "checkbox",
+							name: selection === "single" ? name : void 0,
+							value: item.id,
+							checked: isSelected,
+							disabled: item.disabled,
+							onChange: () => handleChange(item.id),
+							className: cn("sr-only", OPT_FOCUS_VISIBLE)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"data-keypad-icon": "",
+							"aria-hidden": "true",
+							className: cn("flex items-center justify-center", isSelected ? "text-accent" : "text-text-tertiary"),
+							children: item.icon
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: item.label
+						}),
+						item.hint && /* @__PURE__ */ jsx("span", {
+							className: "text-text-tertiary line-clamp-2 text-[11px] leading-tight",
+							children: item.hint
+						}),
+						item.badge && /* @__PURE__ */ jsx("span", {
+							className: "bg-info-subtle text-info absolute top-1 right-1 rounded px-1 text-[10px] font-semibold",
+							children: item.badge
+						})
+					]
+				}, item.id);
+			})
+		})]
+	});
+}
+//#endregion
+export { Textarea as $, ScrollArea as A, DropdownSeparator as B, DrawerRoot as C, ResizablePanelGroup as D, ResizablePanel as E, Radio as F, formatOptShortDate as G, ConditionBuilder as H, RadioGroup as I, Meter$1 as J, formatOptTime as K, DropdownContent as L, createBlock as M, BlockLayout as N, Section as O, LoadingOverlay as P, AvatarGroup as Q, DropdownItem as R, DrawerPanel as S, Text as St, ResizableHandle as T, formatOptDateTime as U, DropdownTrigger as V, formatOptNumber as W, Progress as X, CircularProgress as Y, Avatar as Z, SHADER_PRESET_IDS as _, Toggle$1 as _t, THEME_PALETTES as a, Switch as at, VirtualList as b, Separator$2 as bt, Expression as c, CardDescription as ct, FacetGroup as d, CardTitle as dt, Skeleton as et, ShaderSurface as f, Breadcrumb as ft, SHADER_PRESETS as g, AccordionTrigger$1 as gt, SHADER_PARAM_KEYS as h, AccordionRoot$1 as ht, ColorPalettePicker as i, SkeletonText as it, PageHeader as j, Container as k, ExpressionGroup as l, CardFooter as lt, SHADER_PARAM_FALLBACK as m, AccordionItem$1 as mt, InlineEdit as n, SkeletonCard as nt, LiveRegion as o, Card as ot, SHADER_OVERLAY_PARAM_KEYS as p, AccordionContent$1 as pt, StepBuilder as q, ColorPaletteDisplay as r, SkeletonTable as rt, TextTruncate as s, CardContent as st, KeyPadMenu as t, SkeletonAvatar as tt, Facet as u, CardHeader as ut, getShaderFragment as v, ToggleGroup$1 as vt, Logo as w, DrawerClose as x, Heading as xt, getShaderPreset as y, OtpField as yt, DropdownMenu as z };
 
-//# sourceMappingURL=shader-surface-BUPZ0P-n.js.map
+//# sourceMappingURL=key-pad-menu-BFd79JoS.js.map