@reopt-ai/opt-ui 1.8.0 → 1.10.0

package/dist/{shader-surface-BUPZ0P-n.js → key-pad-menu-BQunU20e.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 { Ft as SelectPopover$1, Gn as _objectSpread2, Hn as OPT_TEXT_SECONDARY, It as SelectRoot$1, Jn as cn, Kn as _objectWithoutProperties, Lt as SelectTrigger$1, Nt as SelectItem$1, On as OPT_FOCUS, Pn as OPT_SURFACE, Qt as useInputId, Un as OPT_TEXT_TERTIARY, Vn as OPT_TEXT_PRIMARY, bn as OPT_BORDER, cn as useControlledState, dn as getDescribedBy, dt as MenuRoot$1, en as Spinner, ft as MenuSeparator$1, in as koBreadcrumbLabels, jn as OPT_INPUT, kn as OPT_FOCUS_VISIBLE, ln as FieldMessages, mn as OPT_ANIMATE_ENTER_EXIT, pn as OPT_ANIMATE_DRAWER, pt as MenuTrigger$1, rn as Button, st as MenuItem$1, un as RequiredMark, ut as MenuPopover$1, zn as OPT_TEXTAREA_SIZE } from "./text-truncate-j6X3z7Pv.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,714 @@ 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/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 min-w-0 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 min-w-0 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 min-w-0 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 { Skeleton as $, PageHeader as A, DropdownTrigger as B, Logo as C, Section as D, ResizablePanelGroup as E, RadioGroup as F, formatOptTime as G, formatOptDateTime as H, DropdownContent as I, CircularProgress as J, StepBuilder as K, DropdownItem as L, BlockLayout as M, LoadingOverlay as N, Container as O, Radio as P, Textarea as Q, DropdownMenu as R, DrawerRoot as S, ResizablePanel as T, formatOptNumber as U, ConditionBuilder as V, formatOptShortDate as W, Avatar as X, Progress as Y, AvatarGroup as Z, getShaderFragment as _, ToggleGroup$1 as _t, THEME_PALETTES as a, Card as at, DrawerClose as b, Heading as bt, ExpressionGroup as c, CardFooter as ct, ShaderSurface as d, Breadcrumb as dt, SkeletonAvatar as et, SHADER_OVERLAY_PARAM_KEYS as f, AccordionContent$1 as ft, SHADER_PRESET_IDS as g, Toggle$1 as gt, SHADER_PRESETS as h, AccordionTrigger$1 as ht, ColorPalettePicker as i, Switch as it, createBlock as j, ScrollArea as k, Facet as l, CardHeader as lt, SHADER_PARAM_KEYS as m, AccordionRoot$1 as mt, InlineEdit as n, SkeletonTable as nt, LiveRegion as o, CardContent as ot, SHADER_PARAM_FALLBACK as p, AccordionItem$1 as pt, Meter$1 as q, ColorPaletteDisplay as r, SkeletonText as rt, Expression as s, CardDescription as st, KeyPadMenu as t, SkeletonCard as tt, FacetGroup as u, CardTitle as ut, getShaderPreset as v, OtpField as vt, ResizableHandle as w, DrawerPanel as x, Text as xt, VirtualList as y, Separator$2 as yt, DropdownSeparator as z };
 
-//# sourceMappingURL=shader-surface-BUPZ0P-n.js.map
+//# sourceMappingURL=key-pad-menu-BQunU20e.js.map