@reopt-ai/opt-ui 1.9.0 → 1.11.0

package/dist/{key-pad-menu-DoGskWbp.cjs → key-pad-menu-Cg6rZBie.cjs}

@@ -1,15 +1,15 @@
 "use client";
-const require_highlight = require("./highlight-CGcrYGMC.cjs");
+const require_text_truncate = require("./text-truncate-BZdL1k5Z.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-react = require_highlight.__toESM(react, 1);
+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 react_resizable_panels = require("react-resizable-panels");
 let ogl = require("ogl");
 let _reopt_ai_opt_palette = require("@reopt-ai/opt-palette");
 //#region src/core/text.tsx
-const _excluded$17 = [
+const _excluded$15 = [
 	"as",
 	"variant",
 	"tone",
@@ -25,10 +25,10 @@ const toneStyles$1 = {
 };
 /** Semantic body text whose visual role is controlled by foundation tokens. */
 function Text(_ref) {
-	let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$17);
+	let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$15);
 	const Component = as !== null && as !== void 0 ? as : "span";
-	const elementProps = require_highlight._objectSpread2(require_highlight._objectSpread2({}, props), {}, {
-		className: require_highlight.cn(`opt-type-${variant}`, toneStyles$1[tone], truncate && "truncate", className),
+	const elementProps = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, props), {}, {
+		className: require_text_truncate.cn(`opt-type-${variant}`, toneStyles$1[tone], truncate && "truncate", className),
 		"data-opt-component": "text",
 		"data-opt-part": "root",
 		"data-opt-id": "NFKP2",
@@ -40,7 +40,7 @@ function Text(_ref) {
 }
 //#endregion
 //#region src/core/heading.tsx
-const _excluded$16 = [
+const _excluded$14 = [
 	"level",
 	"variant",
 	"className",
@@ -48,7 +48,7 @@ const _excluded$16 = [
 ];
 /** Semantic heading with independently selectable visual hierarchy. */
 function Heading(_ref) {
-	let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$16);
+	let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$14);
 	const Component = {
 		1: "h1",
 		2: "h2",
@@ -57,7 +57,7 @@ function Heading(_ref) {
 		5: "h5",
 		6: "h6"
 	}[level];
-	return (0, react.createElement)(Component, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(`opt-type-${variant}`, "text-text-primary", className) }, props), {}, {
+	return (0, react.createElement)(Component, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(`opt-type-${variant}`, "text-text-primary", className) }, props), {}, {
 		"data-opt-component": "heading",
 		"data-opt-part": "root",
 		"data-opt-id": "NF0BT",
@@ -74,7 +74,7 @@ function Heading(_ref) {
 */
 function Separator$1({ orientation = "horizontal", decorative = false, children, className }) {
 	if (orientation === "horizontal" && children != null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("gap-element flex items-center", className),
+		className: require_text_truncate.cn("gap-element flex items-center", className),
 		"data-opt-id": "7PWJS",
 		"data-opt-slug": "separator.Separator",
 		children: [
@@ -97,7 +97,7 @@ function Separator$1({ orientation = "horizontal", decorative = false, children,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Separator, {
 		orientation,
 		decorative,
-		className: require_highlight.cn("bg-border shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch", className),
+		className: require_text_truncate.cn("bg-border shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch", className),
 		"data-opt-id": "7PWJS",
 		"data-opt-slug": "separator.Separator"
 	});
@@ -122,7 +122,7 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
 	const labelId = label ? `${fieldId}-label` : void 0;
 	const groupLabelledBy = ariaLabel ? void 0 : labelId;
 	const groupAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : groupLabelledBy ? void 0 : "One-time code";
-	const [value, setRawValue] = require_highlight.useControlledState(defaultValue, controlledValue, onChange);
+	const [value, setRawValue] = require_text_truncate.useControlledState(defaultValue, controlledValue, onChange);
 	const completedRef = react.useRef(false);
 	const setValue = react.useCallback((next) => {
 		const clipped = next.slice(0, length);
@@ -215,20 +215,20 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
 		focusCell
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("flex flex-col gap-1.5", className),
+		className: require_text_truncate.cn("flex flex-col gap-1.5", className),
 		"data-opt-id": "0083Q",
 		"data-opt-slug": "otp-field.OtpField",
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: "text-sm font-medium text-text-primary",
 				id: labelId,
-				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.RequiredMark, {})]
+				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.RequiredMark, {})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				role: "group",
 				"aria-label": groupAriaLabel,
 				"aria-labelledby": groupLabelledBy,
-				"aria-describedby": require_highlight.getDescribedBy(fieldId, error, hint),
+				"aria-describedby": require_text_truncate.getDescribedBy(fieldId, error, hint),
 				className: "gap-element flex items-center",
 				children: cells.map((cell, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					ref: (node) => {
@@ -247,7 +247,7 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
 					onKeyDown: handleKeyDown(i),
 					onPaste: handlePaste(i),
 					onFocus: (e) => e.target.select(),
-					className: require_highlight.cn(require_highlight.OPT_INPUT, "h-12 w-10 text-center text-lg font-medium", hasError && "border-danger focus-visible:outline-danger")
+					className: require_text_truncate.cn(require_text_truncate.OPT_INPUT, "h-12 w-10 text-center text-lg font-medium", hasError && "border-danger focus-visible:outline-danger")
 				}, i))
 			}),
 			name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -256,7 +256,7 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
 				value,
 				disabled
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FieldMessages, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldMessages, {
 				id: fieldId,
 				error,
 				hint
@@ -267,25 +267,25 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
 OtpField.displayName = "OtpField";
 //#endregion
 //#region src/core/toggle.tsx
-const _excluded$15 = [
+const _excluded$13 = [
 	"size",
 	"className",
 	"children"
 ];
-const _excluded2$8 = [
+const _excluded2$7 = [
 	"className",
 	"children",
 	"orientation"
 ];
-const sizeStyles$8 = {
+const sizeStyles$7 = {
 	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"
 };
-const toggleBase = require_highlight.cn("inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-surface font-medium text-text-secondary", "hover:bg-bg-subtle hover:text-text-primary", "data-[pressed]:border-accent data-[pressed]:bg-accent-subtle data-[pressed]:text-accent", "disabled:pointer-events-none disabled:opacity-40", require_highlight.OPT_FOCUS_VISIBLE);
+const toggleBase = require_text_truncate.cn("inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-surface font-medium text-text-secondary", "hover:bg-bg-subtle hover:text-text-primary", "data-[pressed]:border-accent data-[pressed]:bg-accent-subtle data-[pressed]:text-accent", "disabled:pointer-events-none disabled:opacity-40", require_text_truncate.OPT_FOCUS_VISIBLE);
 /** A two-state (pressed) button. Use standalone or inside `ToggleGroup`. */
 function Toggle(_ref) {
-	let { size = "md", className, children } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$15);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Toggle, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(toggleBase, sizeStyles$8[size], className) }, props), {}, {
+	let { size = "md", className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$13);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Toggle, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(toggleBase, sizeStyles$7[size], className) }, props), {}, {
 		"data-opt-id": "GFCMY",
 		"data-opt-slug": "toggle.Toggle",
 		children
@@ -294,11 +294,11 @@ function Toggle(_ref) {
 Toggle.displayName = "Toggle";
 /** A set of related toggles with shared selection and keyboard navigation. */
 function ToggleGroup(_ref2) {
-	let { className, children, orientation = "horizontal" } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$8);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ToggleGroup, require_highlight._objectSpread2(require_highlight._objectSpread2({
+	let { className, children, orientation = "horizontal" } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$7);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ToggleGroup, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 		orientation,
 		"aria-orientation": orientation,
-		className: require_highlight.cn("inline-flex gap-1", orientation === "vertical" ? "flex-col" : "flex-row", className)
+		className: require_text_truncate.cn("inline-flex gap-1", orientation === "vertical" ? "flex-col" : "flex-row", className)
 	}, props), {}, {
 		"data-opt-id": "47J37",
 		"data-opt-slug": "toggle.ToggleGroup",
@@ -308,27 +308,27 @@ function ToggleGroup(_ref2) {
 ToggleGroup.displayName = "ToggleGroup";
 //#endregion
 //#region src/core/accordion.tsx
-const _excluded$14 = ["className"];
-const _excluded2$7 = ["className"];
-const _excluded3$4 = ["className", "children"];
-const _excluded4$3 = ["className", "children"];
-const triggerClass = `group/acc-trigger flex w-full cursor-pointer items-center justify-between gap-2 py-4 text-left text-sm font-medium text-text-primary transition-colors hover:text-text-secondary ${require_highlight.OPT_FOCUS} disabled:cursor-not-allowed disabled:opacity-50`;
-const contentClass = `overflow-hidden text-sm text-text-secondary ${require_highlight.OPT_ANIMATE_ENTER_EXIT}`;
+const _excluded$12 = ["className"];
+const _excluded2$6 = ["className"];
+const _excluded3$3 = ["className", "children"];
+const _excluded4$2 = ["className", "children"];
+const triggerClass = `group/acc-trigger flex w-full cursor-pointer items-center justify-between gap-2 py-4 text-left text-sm font-medium text-text-primary transition-colors hover:text-text-secondary ${require_text_truncate.OPT_FOCUS} disabled:cursor-not-allowed disabled:opacity-50`;
+const contentClass = `overflow-hidden text-sm text-text-secondary ${require_text_truncate.OPT_ANIMATE_ENTER_EXIT}`;
 /** A vertically stacked set of expandable panels (single or multiple open). */
 function AccordionRoot(_ref) {
-	let { className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$14);
+	let { className } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$12);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_highlight.cn("border-border border-y", className),
+		className: require_text_truncate.cn("border-border border-y", className),
 		"data-opt-id": "CSBA9",
 		"data-opt-slug": "accordion.AccordionRoot",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionRoot, require_highlight._objectSpread2({}, props))
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionRoot, require_text_truncate._objectSpread2({}, props))
 	});
 }
 AccordionRoot.displayName = "AccordionRoot";
 /** A single accordion entry, identified by its `value`. */
 function AccordionItem(_ref2) {
-	let { className } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$7);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionItem, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("border-border border-b last:border-b-0", className) }, props), {}, {
+	let { className } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$6);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionItem, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("border-border border-b last:border-b-0", className) }, props), {}, {
 		"data-opt-id": "JTY9M",
 		"data-opt-slug": "accordion.AccordionItem"
 	}));
@@ -336,8 +336,8 @@ function AccordionItem(_ref2) {
 AccordionItem.displayName = "AccordionItem";
 /** The clickable header that expands/collapses its panel. */
 function AccordionTrigger(_ref3) {
-	let { className, children } = _ref3, props = require_highlight._objectWithoutProperties(_ref3, _excluded3$4);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.AccordionTrigger, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(triggerClass, className) }, props), {}, {
+	let { className, children } = _ref3, props = require_text_truncate._objectWithoutProperties(_ref3, _excluded3$3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.AccordionTrigger, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(triggerClass, className) }, props), {}, {
 		"data-opt-id": "CWJZZ",
 		"data-opt-slug": "accordion.AccordionTrigger",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -352,8 +352,8 @@ function AccordionTrigger(_ref3) {
 AccordionTrigger.displayName = "AccordionTrigger";
 /** The collapsible panel body associated with a trigger. */
 function AccordionContent(_ref4) {
-	let { className, children } = _ref4, props = require_highlight._objectWithoutProperties(_ref4, _excluded4$3);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionContent, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(contentClass, className) }, props), {}, {
+	let { className, children } = _ref4, props = require_text_truncate._objectWithoutProperties(_ref4, _excluded4$2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionContent, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(contentClass, className) }, props), {}, {
 		"data-opt-id": "J98AG",
 		"data-opt-slug": "accordion.AccordionContent",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -372,19 +372,19 @@ function interpolate(template, values) {
 function Breadcrumb({ items, separator = "/", className, onNavigate, "aria-label": ariaLabel = "Breadcrumb" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
 		"aria-label": ariaLabel,
-		className: require_highlight.cn("flex items-center gap-1 px-1.5 text-sm", className),
+		className: require_text_truncate.cn("flex items-center gap-1 px-1.5 text-sm", className),
 		"data-opt-id": "3FR0Y",
 		"data-opt-slug": "breadcrumb.Breadcrumb",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
 			className: "flex items-center gap-1",
 			children: items.map((item, index) => {
 				const isLast = index === items.length - 1;
-				const linkClassName = require_highlight.cn(`flex items-center gap-1.5 rounded-sm ${require_highlight.OPT_FOCUS} transition-colors`, item.disabled ? `${require_highlight.OPT_TEXT_TERTIARY} cursor-not-allowed` : `${require_highlight.OPT_TEXT_SECONDARY} hover:text-text-primary cursor-pointer`);
+				const linkClassName = require_text_truncate.cn(`flex items-center gap-1.5 rounded-sm ${require_text_truncate.OPT_FOCUS} transition-colors`, item.disabled ? `${require_text_truncate.OPT_TEXT_TERTIARY} cursor-not-allowed` : `${require_text_truncate.OPT_TEXT_SECONDARY} hover:text-text-primary cursor-pointer`);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 					className: "flex items-center gap-1",
 					children: isLast ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						"aria-current": "page",
-						className: `flex items-center gap-1.5 font-medium ${require_highlight.OPT_TEXT_PRIMARY}`,
+						className: `flex items-center gap-1.5 font-medium ${require_text_truncate.OPT_TEXT_PRIMARY}`,
 						children: [item.icon, item.label]
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [item.href ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 						href: item.disabled ? void 0 : item.href,
@@ -395,13 +395,13 @@ function Breadcrumb({ items, separator = "/", className, onNavigate, "aria-label
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						disabled: item.disabled,
-						"aria-label": interpolate(require_highlight.koBreadcrumbLabels.navAriaLabel, { label: item.label }),
+						"aria-label": interpolate(require_text_truncate.koBreadcrumbLabels.navAriaLabel, { label: item.label }),
 						className: linkClassName,
 						onClick: () => !item.disabled && (onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(item)),
 						children: [item.icon, item.label]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						"aria-hidden": "true",
-						className: require_highlight.OPT_TEXT_TERTIARY,
+						className: require_text_truncate.OPT_TEXT_TERTIARY,
 						children: separator
 					})] })
 				}, item.id);
@@ -410,8 +410,352 @@ function Breadcrumb({ items, separator = "/", className, onNavigate, "aria-label
 	});
 }
 //#endregion
+//#region src/core/description-list.tsx
+const defaultLabels$3 = {
+	copy: (term) => `Copy ${term}`,
+	copied: "Copied",
+	empty: "—"
+};
+const columnsClass = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+	4: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"
+};
+function CopyButton({ value, label, copiedLabel }) {
+	const [copied, setCopied] = (0, react.useState)(false);
+	const handleCopy = (0, react.useCallback)(() => {
+		var _navigator$clipboard;
+		(_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 || _navigator$clipboard.writeText(value).then(() => {
+			setCopied(true);
+			window.setTimeout(() => setCopied(false), 1500);
+		});
+	}, [value]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick: handleCopy,
+		"aria-label": copied ? copiedLabel : label,
+		className: require_text_truncate.cn(require_text_truncate.OPT_FOCUS_VISIBLE, require_text_truncate.OPT_TEXT_TERTIARY, "hover:text-text-primary shrink-0 rounded p-0.5 transition-colors"),
+		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
+			className: "size-3.5",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, {
+			className: "size-3.5",
+			"aria-hidden": "true"
+		})
+	});
+}
+/**
+* DescriptionList — the labelled facts about one thing.
+*
+* Detail views collect a dozen short fields that each mean nothing without
+* their label, and hand-rolling them as a `<div>` grid loses the term/value
+* association that assistive tech needs. This keeps the pairs in a real `<dl>`
+* while still laying them out as boxed cells.
+*
+* @example
+* ```tsx
+* <DescriptionList
+*   layout="grid"
+*   columns={2}
+*   items={[
+*     { id: "id", term: "Session ID", description: session.id, copyValue: session.id },
+*     { id: "entry", term: "Entry path", description: session.entryPath },
+*   ]}
+* />
+* ```
+*/
+function DescriptionList({ items, layout = "grid", columns = 2, compressed = false, labels: customLabels, className }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$3), customLabels);
+	if (layout === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+		className: require_text_truncate.cn("flex flex-wrap items-baseline gap-x-6 gap-y-2", className),
+		"data-opt-id": "1NPD2",
+		"data-opt-slug": "description-list.DescriptionList",
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-baseline gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+				className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "text-xs"),
+				title: item.hint,
+				children: item.term
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+				className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_PRIMARY, "text-sm font-medium"),
+				children: item.description || labels.empty
+			})]
+		}, item.id))
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+		className: require_text_truncate.cn("grid", compressed ? "gap-element" : "gap-group", columnsClass[columns], className),
+		"data-opt-id": "1NPD2",
+		"data-opt-slug": "description-list.DescriptionList",
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_text_truncate.cn("flex min-w-0 flex-col gap-1", layout === "grid" && [
+				"border border-border",
+				"bg-bg-subtle rounded-lg",
+				compressed ? "px-2.5 py-1.5" : "px-3 py-2"
+			]),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+				className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_TERTIARY, "text-xs"),
+				title: item.hint,
+				children: item.term
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dd", {
+				className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_PRIMARY, "flex min-w-0 items-center gap-1.5 text-sm"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_text_truncate.cn("min-w-0", item.wrap ? "break-all" : "truncate", !item.description && "text-text-secondary"),
+					children: item.description || labels.empty
+				}), item.copyValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, {
+					value: item.copyValue,
+					label: labels.copy(typeof item.term === "string" ? item.term : item.id),
+					copiedLabel: labels.copied
+				})]
+			})]
+		}, item.id))
+	});
+}
+DescriptionList.displayName = "DescriptionList";
+//#endregion
+//#region src/core/avatar.tsx
+const _excluded$11 = [
+	"src",
+	"srcSet",
+	"sizes",
+	"crossOrigin",
+	"referrerPolicy",
+	"alt",
+	"name",
+	"size",
+	"fallback",
+	"status",
+	"className",
+	"onLoadingStatusChange"
+];
+const _excluded2$5 = [
+	"max",
+	"size",
+	"children",
+	"className"
+];
+const useIsoLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+/**
+* Tracks an image's loading status by preloading it off-DOM, so the avatar can
+* show its fallback until the image is actually decoded (no broken-image flash)
+* and recover from late `error`/`load` events. Supports responsive `srcSet`/`sizes`.
+*/
+function useImageLoadingStatus(src, { srcSet, sizes, crossOrigin, referrerPolicy }) {
+	const [status, setStatus] = (0, react.useState)("idle");
+	useIsoLayoutEffect(() => {
+		if (!src && !srcSet) {
+			setStatus("error");
+			return;
+		}
+		let isMounted = true;
+		const image = new window.Image();
+		const update = (next) => () => {
+			if (isMounted) setStatus(next);
+		};
+		setStatus("loading");
+		image.onload = update("loaded");
+		image.onerror = update("error");
+		if (referrerPolicy) image.referrerPolicy = referrerPolicy;
+		image.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : null;
+		if (sizes) image.sizes = sizes;
+		if (srcSet) image.srcset = srcSet;
+		if (src) image.src = src;
+		if (image.complete) setStatus(image.naturalWidth > 0 ? "loaded" : "error");
+		return () => {
+			isMounted = false;
+		};
+	}, [
+		src,
+		srcSet,
+		sizes,
+		crossOrigin,
+		referrerPolicy
+	]);
+	return status;
+}
+const sizeStyles$6 = {
+	xs: "h-6 w-6 text-[10px]",
+	sm: "h-8 w-8 text-xs",
+	md: "h-10 w-10 text-sm",
+	lg: "h-12 w-12 text-base",
+	xl: "h-16 w-16 text-lg"
+};
+const statusStyles = {
+	online: "bg-success",
+	offline: "bg-bg-muted",
+	busy: "bg-danger",
+	away: "bg-warning"
+};
+const statusSizeStyles = {
+	xs: "h-1.5 w-1.5 border",
+	sm: "h-2 w-2 border",
+	md: "h-2.5 w-2.5 border-2",
+	lg: "h-3 w-3 border-2",
+	xl: "h-4 w-4 border-2"
+};
+function getInitials(name) {
+	const parts = name.trim().split(/\s+/);
+	if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+	return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+const bgColors = [
+	"bg-blue-500",
+	"bg-emerald-500",
+	"bg-amber-500",
+	"bg-rose-500",
+	"bg-purple-500",
+	"bg-cyan-500",
+	"bg-orange-500",
+	"bg-indigo-500"
+];
+function getColorFromName(name) {
+	let hash = 0;
+	for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+	return bgColors[Math.abs(hash) % bgColors.length];
+}
+/** Renders the avatar component. */
+function Avatar(_ref) {
+	var _ref2, _ref3;
+	let { src, srcSet, sizes, crossOrigin, referrerPolicy, alt, name, size = "md", fallback, status, className, onLoadingStatusChange } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$11);
+	const loadingStatus = useImageLoadingStatus(src, {
+		srcSet,
+		sizes,
+		crossOrigin,
+		referrerPolicy
+	});
+	(0, react.useEffect)(() => {
+		onLoadingStatusChange === null || onLoadingStatusChange === void 0 || onLoadingStatusChange(loadingStatus);
+	}, [loadingStatus, onLoadingStatusChange]);
+	const showImage = (Boolean(src) || Boolean(srcSet)) && loadingStatus === "loaded";
+	const initials = name ? getInitials(name) : null;
+	const bgColor = name ? getColorFromName(name) : "bg-bg-subtle";
+	const avatarLabel = status ? `${(_ref2 = name !== null && name !== void 0 ? name : alt) !== null && _ref2 !== void 0 ? _ref2 : "Avatar"} (${status})` : (_ref3 = name !== null && name !== void 0 ? name : alt) !== null && _ref3 !== void 0 ? _ref3 : "Avatar";
+	let avatarContent;
+	if (showImage) {
+		var _ref4;
+		avatarContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src,
+			srcSet,
+			sizes,
+			crossOrigin,
+			referrerPolicy,
+			alt: (_ref4 = alt !== null && alt !== void 0 ? alt : name) !== null && _ref4 !== void 0 ? _ref4 : "Avatar",
+			className: "h-full w-full object-cover"
+		});
+	} else if (fallback) avatarContent = fallback;
+	else if (initials) avatarContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "font-medium text-white",
+		children: initials
+	});
+	else avatarContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		className: "text-text-tertiary h-3/5 w-3/5",
+		fill: "currentColor",
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
+		role: "img",
+		"aria-label": avatarLabel,
+		className: require_text_truncate.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",
+		children: [avatarContent, status && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_text_truncate.cn("border-surface absolute right-0 bottom-0 rounded-full", statusStyles[status], statusSizeStyles[size]),
+			"aria-hidden": "true"
+		})]
+	}));
+}
+/** Renders the avatar group component. */
+function AvatarGroup(_ref5) {
+	let { max = 4, size = "md", children, className } = _ref5, props = require_text_truncate._objectWithoutProperties(_ref5, _excluded2$5);
+	const avatars = Array.isArray(children) ? children : [children];
+	const visibleAvatars = avatars.slice(0, max);
+	const remainingCount = avatars.length - max;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("flex", className) }, props), {}, {
+		"data-opt-id": "MVB53",
+		"data-opt-slug": "avatar.AvatarGroup",
+		children: [visibleAvatars.map((child, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "ring-surface relative -ml-2 inline-block rounded-full ring-2 first:ml-0",
+			children: child
+		}, index)), remainingCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: require_text_truncate.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]
+		})]
+	}));
+}
+//#endregion
+//#region src/core/identity.tsx
+const defaultLabels$2 = {
+	identified: "Identified",
+	anonymous: "Anonymous"
+};
+/** Picks the display name, degrading through the identifiers we do have. */
+function resolveDisplay(name, secondary, id) {
+	const trimmedName = name === null || name === void 0 ? void 0 : name.trim();
+	const trimmedSecondary = secondary === null || secondary === void 0 ? void 0 : secondary.trim();
+	if (trimmedName) return {
+		primary: trimmedName,
+		sub: trimmedSecondary || null
+	};
+	if (trimmedSecondary) return {
+		primary: trimmedSecondary,
+		sub: null
+	};
+	return {
+		primary: id !== null && id !== void 0 ? id : "—",
+		sub: null
+	};
+}
+/**
+* Identity — one person (or one anonymous device) as a table cell.
+*
+* Every analytics surface renders the same fallback chain — name, then email,
+* then an opaque id — and every hand-rolled copy of it drifts. Centralising it
+* also centralises the anonymity marker, which is the part readers most often
+* lose track of when a table mixes profiles and devices.
+*/
+function Identity({ name, secondary, id, avatarSrc, state, badge, size = "md", hideAvatar = false, labels: customLabels, className }) {
+	const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$2), customLabels);
+	const { primary, sub } = resolveDisplay(name, secondary, id);
+	const anonymous = state === "anonymous";
+	const badgeContent = badge !== null && badge !== void 0 ? badge : state ? anonymous ? labels.anonymous : labels.identified : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_text_truncate.cn("flex min-w-0 items-center gap-2", className),
+		title: id,
+		"data-opt-id": "BRGG2",
+		"data-opt-slug": "identity.Identity",
+		children: [!hideAvatar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+			src: avatarSrc !== null && avatarSrc !== void 0 ? avatarSrc : void 0,
+			name: anonymous ? void 0 : primary,
+			size: size === "sm" ? "xs" : "sm",
+			alt: "",
+			className: "shrink-0"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "flex min-w-0 items-center gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_text_truncate.cn("truncate text-sm font-medium", anonymous && !name ? require_text_truncate.OPT_TEXT_SECONDARY : require_text_truncate.OPT_TEXT_PRIMARY),
+					children: primary
+				}), badgeContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Badge, {
+					size: "sm",
+					variant: anonymous ? "default" : "info",
+					className: "shrink-0",
+					children: badgeContent
+				})]
+			}), sub && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_text_truncate.cn("text-text-tertiary", "truncate text-xs"),
+				children: sub
+			})]
+		})]
+	});
+}
+Identity.displayName = "Identity";
+//#endregion
 //#region src/core/card.tsx
-const _excluded$13 = [
+const _excluded$10 = [
 	"variant",
 	"padding",
 	"shadow",
@@ -425,17 +769,17 @@ const _excluded$13 = [
 	"role",
 	"tabIndex"
 ];
-const _excluded2$6 = [
+const _excluded2$4 = [
 	"gap",
 	"className",
 	"children"
 ];
-const _excluded3$3 = [
+const _excluded3$2 = [
 	"as",
 	"className",
 	"children"
 ];
-const _excluded4$2 = ["className", "children"];
+const _excluded4$1 = ["className", "children"];
 const _excluded5 = [
 	"spacing",
 	"className",
@@ -448,7 +792,7 @@ const _excluded6 = [
 ];
 /** Renders the card component. */
 function Card(_ref) {
-	let { variant = "default", padding = "md", shadow = true, selectable = false, selected = false, onSelectedChange, className, children, onClick, onKeyDown, role, tabIndex } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$13);
+	let { variant = "default", padding = "md", shadow = true, selectable = false, selected = false, onSelectedChange, className, children, onClick, onKeyDown, role, tabIndex } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$10);
 	const isInteractive = selectable || !!onClick;
 	const handleClick = selectable ? (e) => {
 		onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
@@ -467,7 +811,7 @@ function Card(_ref) {
 		}
 		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
 	} : onKeyDown;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2(require_highlight._objectSpread2(require_highlight._objectSpread2({}, props), {}, { className: require_highlight.cn("rounded-xl", variant === "default" && require_highlight.cn(`border border-border bg-surface`, shadow && "shadow-sm"), variant === "outline" && "border-border border-2 bg-transparent", variant === "ghost" && "bg-bg-subtle", padding === "none" && "p-0", padding === "sm" && "p-3", padding === "md" && "p-5", padding === "lg" && "p-8", selectable && "cursor-pointer transition-colors", selectable && selected && "ring-accent border-accent ring-2 ring-offset-1", selectable && !selected && "hover:border-accent/50", className) }, isInteractive ? {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, props), {}, { className: require_text_truncate.cn("rounded-xl", variant === "default" && require_text_truncate.cn(`border border-border bg-surface`, shadow && "shadow-sm"), variant === "outline" && "border-border border-2 bg-transparent", variant === "ghost" && "bg-bg-subtle", padding === "none" && "p-0", padding === "sm" && "p-3", padding === "md" && "p-5", padding === "lg" && "p-8", selectable && "cursor-pointer transition-colors", selectable && selected && "ring-accent border-accent ring-2 ring-offset-1", selectable && !selected && "hover:border-accent/50", className) }, isInteractive ? {
 		role: selectable ? "option" : "button",
 		tabIndex: 0,
 		"aria-selected": selectable ? selected : void 0,
@@ -491,8 +835,8 @@ const headerGapClasses = {
 };
 /** Renders the card header component. */
 function CardHeader(_ref2) {
-	let { gap = "sm", className, children } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$6);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("flex flex-col", headerGapClasses[gap], className) }, props), {}, {
+	let { gap = "sm", className, children } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("flex flex-col", headerGapClasses[gap], className) }, props), {}, {
 		"data-opt-id": "JST3J",
 		"data-opt-slug": "card.CardHeader",
 		children
@@ -500,8 +844,8 @@ function CardHeader(_ref2) {
 }
 /** Renders the card title component. */
 function CardTitle(_ref3) {
-	let { as: Tag = "h3", className, children } = _ref3, props = require_highlight._objectWithoutProperties(_ref3, _excluded3$3);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(`text-lg font-semibold ${require_highlight.OPT_TEXT_PRIMARY}`, className) }, props), {}, {
+	let { as: Tag = "h3", className, children } = _ref3, props = require_text_truncate._objectWithoutProperties(_ref3, _excluded3$2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(`text-lg font-semibold ${require_text_truncate.OPT_TEXT_PRIMARY}`, className) }, props), {}, {
 		"data-opt-id": "V15TX",
 		"data-opt-slug": "card.CardTitle",
 		children
@@ -509,8 +853,8 @@ function CardTitle(_ref3) {
 }
 /** Renders the card description component. */
 function CardDescription(_ref4) {
-	let { className, children } = _ref4, props = require_highlight._objectWithoutProperties(_ref4, _excluded4$2);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(`text-sm ${require_highlight.OPT_TEXT_SECONDARY}`, className) }, props), {}, {
+	let { className, children } = _ref4, props = require_text_truncate._objectWithoutProperties(_ref4, _excluded4$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(`text-sm ${require_text_truncate.OPT_TEXT_SECONDARY}`, className) }, props), {}, {
 		"data-opt-id": "YB1RN",
 		"data-opt-slug": "card.CardDescription",
 		children
@@ -524,8 +868,8 @@ const contentSpacingClasses = {
 };
 /** Renders the card content component. */
 function CardContent(_ref5) {
-	let { spacing = "md", className, children } = _ref5, props = require_highlight._objectWithoutProperties(_ref5, _excluded5);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(contentSpacingClasses[spacing], className) }, props), {}, {
+	let { spacing = "md", className, children } = _ref5, props = require_text_truncate._objectWithoutProperties(_ref5, _excluded5);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(contentSpacingClasses[spacing], className) }, props), {}, {
 		"data-opt-id": "9Y68R",
 		"data-opt-slug": "card.CardContent",
 		children
@@ -533,8 +877,8 @@ function CardContent(_ref5) {
 }
 /** Renders the card footer component. */
 function CardFooter(_ref6) {
-	let { divider = true, className, children } = _ref6, props = require_highlight._objectWithoutProperties(_ref6, _excluded6);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("mt-4 flex items-center justify-end gap-2 pt-4", divider && `border-t border border-border`, className) }, props), {}, {
+	let { divider = true, className, children } = _ref6, props = require_text_truncate._objectWithoutProperties(_ref6, _excluded6);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("mt-4 flex items-center justify-end gap-2 pt-4", divider && `border-t border border-border`, className) }, props), {}, {
 		"data-opt-id": "GRNTR",
 		"data-opt-slug": "card.CardFooter",
 		children
@@ -542,7 +886,7 @@ function CardFooter(_ref6) {
 }
 //#endregion
 //#region src/core/switch.tsx
-const _excluded$12 = [
+const _excluded$9 = [
 	"label",
 	"required",
 	"error",
@@ -559,7 +903,7 @@ const _excluded$12 = [
 	"aria-label",
 	"aria-labelledby"
 ];
-const sizeStyles$7 = {
+const sizeStyles$5 = {
 	sm: {
 		track: "h-5 w-9",
 		thumb: "h-4 w-4",
@@ -578,432 +922,125 @@ const sizeStyles$7 = {
 };
 const Switch = (0, react.forwardRef)((_ref, ref) => {
 	var _useInputId;
-	let { label, required, error, hint, description, checked: controlledChecked, defaultChecked = false, onChange, size = "md", disabled, className, id, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$12);
+	let { label, required, error, hint, description, checked: controlledChecked, defaultChecked = false, onChange, size = "md", disabled, className, id, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$9);
 	const fallbackId = (0, react.useId)();
-	const switchId = (_useInputId = require_highlight.useInputId(id, label, "switch")) !== null && _useInputId !== void 0 ? _useInputId : `switch-${fallbackId}`;
+	const switchId = (_useInputId = require_text_truncate.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$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";
-	const isControlled = controlledChecked !== void 0;
-	const [internalChecked, setInternalChecked] = (0, react.useState)(defaultChecked);
-	const checked = isControlled ? controlledChecked : internalChecked;
-	const handleClick = (0, react.useCallback)((e) => {
-		const next = !checked;
-		if (!isControlled) setInternalChecked(next);
-		onChange === null || onChange === void 0 || onChange(next);
-		onClick === null || onClick === void 0 || onClick(e);
-	}, [
-		checked,
-		isControlled,
-		onChange,
-		onClick
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("flex flex-col gap-1.5", className),
-		"data-opt-id": "51Z9R",
-		"data-opt-slug": "switch.Switch",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-start gap-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", require_highlight._objectSpread2(require_highlight._objectSpread2({
-				ref,
-				type: "button",
-				role: "switch",
-				id: switchId,
-				"aria-checked": checked,
-				"aria-label": switchAriaLabel,
-				"aria-labelledby": switchLabelledBy,
-				disabled,
-				className: require_highlight.cn("group relative inline-flex shrink-0 cursor-pointer rounded-full p-0.5 transition-colors", styles.track, "bg-bg-muted", "aria-[checked=true]:bg-accent", "disabled:cursor-not-allowed disabled:opacity-50", require_highlight.OPT_FOCUS_VISIBLE),
-				"aria-invalid": hasError,
-				"aria-required": required,
-				"aria-describedby": require_highlight.getDescribedBy(switchId, error, hintText),
-				onClick: handleClick
-			}, props), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_highlight.cn("pointer-events-none inline-block transform rounded-full bg-white shadow-sm ring-0 transition-transform", styles.thumb, "translate-x-0", size === "sm" && "group-aria-[checked=true]:translate-x-4", size === "md" && "group-aria-[checked=true]:translate-x-5", size === "lg" && "group-aria-[checked=true]:translate-x-7") }) })), (label || hintText) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-col",
-				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					id: labelId,
-					className: require_highlight.cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
-					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.RequiredMark, {})]
-				}), hintText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					id: `${switchId}-hint`,
-					className: require_highlight.cn("text-text-tertiary text-sm", disabled && "opacity-50"),
-					children: hintText
-				})]
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FieldMessages, {
-			id: switchId,
-			error
-		})]
-	});
-});
-Switch.displayName = "Switch";
-//#endregion
-//#region src/core/skeleton.tsx
-const _excluded$11 = [
-	"variant",
-	"width",
-	"height",
-	"lines",
-	"animated",
-	"className",
-	"style"
-];
-const _excluded2$5 = ["lines", "className"];
-const _excluded3$2 = ["size", "className"];
-const _excluded4$1 = ["className"];
-const variantStyles$2 = {
-	text: "rounded h-4",
-	circular: "rounded-full",
-	rectangular: "rounded-lg"
-};
-/** Renders the skeleton component. */
-function Skeleton(_ref) {
-	let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$11);
-	const baseClass = require_highlight.cn("bg-bg-subtle", animated && "animate-pulse", variantStyles$2[variant], className);
-	const computedStyle = require_highlight._objectSpread2({
-		width: typeof width === "number" ? `${width}px` : width,
-		height: typeof height === "number" ? `${height}px` : height
-	}, style);
-	if (variant === "text" && lines > 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "gap-element flex flex-col",
-		role: "status",
-		"aria-label": "Loading",
-		"data-opt-id": "EJT87",
-		"data-opt-slug": "skeleton.Skeleton",
-		children: [Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2({
-			className: require_highlight.cn(baseClass, i === lines - 1 && "w-4/5"),
-			style: i === lines - 1 ? void 0 : computedStyle
-		}, props), i)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "sr-only",
-			children: "Loading..."
-		})]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({
-		className: baseClass,
-		style: computedStyle,
-		role: "status",
-		"aria-label": "Loading"
-	}, props), {}, {
-		"data-opt-id": "EJT87",
-		"data-opt-slug": "skeleton.Skeleton",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "sr-only",
-			children: "Loading..."
-		})
-	}));
-}
-/** Renders the skeleton text component. */
-function SkeletonText(_ref2) {
-	let { lines = 3, className } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$5);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, require_highlight._objectSpread2(require_highlight._objectSpread2({
-		variant: "text",
-		lines,
-		className
-	}, props), {}, {
-		"data-opt-id": "MX3D5",
-		"data-opt-slug": "skeleton.SkeletonText"
-	}));
-}
-/** Renders the skeleton avatar component. */
-function SkeletonAvatar(_ref3) {
-	let { size = 40, className } = _ref3, props = require_highlight._objectWithoutProperties(_ref3, _excluded3$2);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, require_highlight._objectSpread2(require_highlight._objectSpread2({
-		variant: "circular",
-		width: size,
-		height: size,
-		className
-	}, props), {}, {
-		"data-opt-id": "MP0HZ",
-		"data-opt-slug": "skeleton.SkeletonAvatar"
-	}));
-}
-/** Renders the skeleton card component. */
-function SkeletonCard(_ref4) {
-	let { className } = _ref4, props = require_highlight._objectWithoutProperties(_ref4, _excluded4$1);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("gap-group flex flex-col", className) }, props), {}, {
-		"data-opt-id": "34V5D",
-		"data-opt-slug": "skeleton.SkeletonCard",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
-				variant: "rectangular",
-				height: 120
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
-				variant: "text",
-				width: "60%"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
-				variant: "text",
-				lines: 2
-			})
-		]
-	}));
-}
-/** Renders the skeleton table component. */
-function SkeletonTable({ rows = 5, columns = 4, className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("gap-element flex flex-col", className),
-		role: "status",
-		"aria-label": "Loading table",
-		"data-opt-id": "3KEDN",
-		"data-opt-slug": "skeleton.SkeletonTable",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "border-border-subtle gap-group flex border-b pb-2",
-				children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
-					variant: "text",
-					className: "flex-1",
-					height: 16
-				}, i))
-			}),
-			Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "gap-group flex py-2",
-				children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
-					variant: "text",
-					className: "flex-1",
-					height: 14
-				}, colIndex))
-			}, rowIndex)),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "sr-only",
-				children: "Loading..."
-			})
-		]
-	});
-}
-//#endregion
-//#region src/core/textarea.tsx
-const _excluded$10 = [
-	"label",
-	"error",
-	"hint",
-	"fullWidth",
-	"required",
-	"resize",
-	"size",
-	"className",
-	"id",
-	"rows"
-];
-const textareaSizeStyles = require_highlight.OPT_TEXTAREA_SIZE;
-const resizeStyles = {
-	none: "resize-none",
-	vertical: "resize-y",
-	horizontal: "resize-x",
-	both: "resize"
-};
-const Textarea = (0, react.forwardRef)((_ref, ref) => {
-	var _useInputId;
-	let { label, error, hint, fullWidth = false, required, resize = "vertical", size = "md", className, id, rows = 4 } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$10);
-	const fallbackId = (0, react.useId)().replace(/:/g, "");
-	const textareaId = (_useInputId = require_highlight.useInputId(id, label, "textarea")) !== null && _useInputId !== void 0 ? _useInputId : `textarea-${fallbackId}`;
-	const hasError = Boolean(error);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("flex flex-col gap-1.5", fullWidth && "w-full"),
-		"data-opt-id": "6T58H",
-		"data-opt-slug": "textarea.Textarea",
-		children: [
-			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				htmlFor: textareaId,
-				className: "text-text-primary text-sm font-medium",
-				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.RequiredMark, {})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", require_highlight._objectSpread2({
-				ref,
-				id: textareaId,
-				rows,
-				className: require_highlight.cn("border-border bg-surface text-text-primary placeholder:text-text-tertiary w-full rounded-lg border px-4 py-3 text-sm outline-transparent", require_highlight.OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
-				"aria-invalid": hasError,
-				"aria-describedby": require_highlight.getDescribedBy(textareaId, error, hint)
-			}, props)),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FieldMessages, {
-				id: textareaId,
-				error,
-				hint
-			})
-		]
-	});
-});
-Textarea.displayName = "Textarea";
-//#endregion
-//#region src/core/avatar.tsx
-const _excluded$9 = [
-	"src",
-	"srcSet",
-	"sizes",
-	"crossOrigin",
-	"referrerPolicy",
-	"alt",
-	"name",
-	"size",
-	"fallback",
-	"status",
-	"className",
-	"onLoadingStatusChange"
-];
-const _excluded2$4 = [
-	"max",
-	"size",
-	"children",
-	"className"
-];
-const useIsoLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
-/**
-* Tracks an image's loading status by preloading it off-DOM, so the avatar can
-* show its fallback until the image is actually decoded (no broken-image flash)
-* and recover from late `error`/`load` events. Supports responsive `srcSet`/`sizes`.
-*/
-function useImageLoadingStatus(src, { srcSet, sizes, crossOrigin, referrerPolicy }) {
-	const [status, setStatus] = (0, react.useState)("idle");
-	useIsoLayoutEffect(() => {
-		if (!src && !srcSet) {
-			setStatus("error");
-			return;
-		}
-		let isMounted = true;
-		const image = new window.Image();
-		const update = (next) => () => {
-			if (isMounted) setStatus(next);
-		};
-		setStatus("loading");
-		image.onload = update("loaded");
-		image.onerror = update("error");
-		if (referrerPolicy) image.referrerPolicy = referrerPolicy;
-		image.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : null;
-		if (sizes) image.sizes = sizes;
-		if (srcSet) image.srcset = srcSet;
-		if (src) image.src = src;
-		if (image.complete) setStatus(image.naturalWidth > 0 ? "loaded" : "error");
-		return () => {
-			isMounted = false;
-		};
-	}, [
-		src,
-		srcSet,
-		sizes,
-		crossOrigin,
-		referrerPolicy
-	]);
-	return status;
-}
-const sizeStyles$6 = {
-	xs: "h-6 w-6 text-[10px]",
-	sm: "h-8 w-8 text-xs",
-	md: "h-10 w-10 text-sm",
-	lg: "h-12 w-12 text-base",
-	xl: "h-16 w-16 text-lg"
-};
-const statusStyles = {
-	online: "bg-success",
-	offline: "bg-bg-muted",
-	busy: "bg-danger",
-	away: "bg-warning"
-};
-const statusSizeStyles = {
-	xs: "h-1.5 w-1.5 border",
-	sm: "h-2 w-2 border",
-	md: "h-2.5 w-2.5 border-2",
-	lg: "h-3 w-3 border-2",
-	xl: "h-4 w-4 border-2"
-};
-function getInitials(name) {
-	const parts = name.trim().split(/\s+/);
-	if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
-	return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
-}
-const bgColors = [
-	"bg-blue-500",
-	"bg-emerald-500",
-	"bg-amber-500",
-	"bg-rose-500",
-	"bg-purple-500",
-	"bg-cyan-500",
-	"bg-orange-500",
-	"bg-indigo-500"
-];
-function getColorFromName(name) {
-	let hash = 0;
-	for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
-	return bgColors[Math.abs(hash) % bgColors.length];
-}
-/** Renders the avatar component. */
-function Avatar(_ref) {
-	var _ref2, _ref3;
-	let { src, srcSet, sizes, crossOrigin, referrerPolicy, alt, name, size = "md", fallback, status, className, onLoadingStatusChange } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$9);
-	const loadingStatus = useImageLoadingStatus(src, {
-		srcSet,
-		sizes,
-		crossOrigin,
-		referrerPolicy
-	});
-	(0, react.useEffect)(() => {
-		onLoadingStatusChange === null || onLoadingStatusChange === void 0 || onLoadingStatusChange(loadingStatus);
-	}, [loadingStatus, onLoadingStatusChange]);
-	const showImage = (Boolean(src) || Boolean(srcSet)) && loadingStatus === "loaded";
-	const initials = name ? getInitials(name) : null;
-	const bgColor = name ? getColorFromName(name) : "bg-bg-subtle";
-	const avatarLabel = status ? `${(_ref2 = name !== null && name !== void 0 ? name : alt) !== null && _ref2 !== void 0 ? _ref2 : "Avatar"} (${status})` : (_ref3 = name !== null && name !== void 0 ? name : alt) !== null && _ref3 !== void 0 ? _ref3 : "Avatar";
-	let avatarContent;
-	if (showImage) {
-		var _ref4;
-		avatarContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-			src,
-			srcSet,
-			sizes,
-			crossOrigin,
-			referrerPolicy,
-			alt: (_ref4 = alt !== null && alt !== void 0 ? alt : name) !== null && _ref4 !== void 0 ? _ref4 : "Avatar",
-			className: "h-full w-full object-cover"
-		});
-	} else if (fallback) avatarContent = fallback;
-	else if (initials) avatarContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "font-medium text-white",
-		children: initials
+	const styles = sizeStyles$5[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";
+	const isControlled = controlledChecked !== void 0;
+	const [internalChecked, setInternalChecked] = (0, react.useState)(defaultChecked);
+	const checked = isControlled ? controlledChecked : internalChecked;
+	const handleClick = (0, react.useCallback)((e) => {
+		const next = !checked;
+		if (!isControlled) setInternalChecked(next);
+		onChange === null || onChange === void 0 || onChange(next);
+		onClick === null || onClick === void 0 || onClick(e);
+	}, [
+		checked,
+		isControlled,
+		onChange,
+		onClick
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "51Z9R",
+		"data-opt-slug": "switch.Switch",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
+				ref,
+				type: "button",
+				role: "switch",
+				id: switchId,
+				"aria-checked": checked,
+				"aria-label": switchAriaLabel,
+				"aria-labelledby": switchLabelledBy,
+				disabled,
+				className: require_text_truncate.cn("group relative inline-flex shrink-0 cursor-pointer rounded-full p-0.5 transition-colors", styles.track, "bg-bg-muted", "aria-[checked=true]:bg-accent", "disabled:cursor-not-allowed disabled:opacity-50", require_text_truncate.OPT_FOCUS_VISIBLE),
+				"aria-invalid": hasError,
+				"aria-required": required,
+				"aria-describedby": require_text_truncate.getDescribedBy(switchId, error, hintText),
+				onClick: handleClick
+			}, props), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_text_truncate.cn("pointer-events-none inline-block transform rounded-full bg-white shadow-sm ring-0 transition-transform", styles.thumb, "translate-x-0", size === "sm" && "group-aria-[checked=true]:translate-x-4", size === "md" && "group-aria-[checked=true]:translate-x-5", size === "lg" && "group-aria-[checked=true]:translate-x-7") }) })), (label || hintText) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col",
+				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					id: labelId,
+					className: require_text_truncate.cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
+					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.RequiredMark, {})]
+				}), hintText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					id: `${switchId}-hint`,
+					className: require_text_truncate.cn("text-text-tertiary text-sm", disabled && "opacity-50"),
+					children: hintText
+				})]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldMessages, {
+			id: switchId,
+			error
+		})]
 	});
-	else avatarContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-		className: "text-text-tertiary h-3/5 w-3/5",
-		fill: "currentColor",
-		viewBox: "0 0 24 24",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+});
+Switch.displayName = "Switch";
+//#endregion
+//#region src/core/textarea.tsx
+const _excluded$8 = [
+	"label",
+	"error",
+	"hint",
+	"fullWidth",
+	"required",
+	"resize",
+	"size",
+	"className",
+	"id",
+	"rows"
+];
+const textareaSizeStyles = require_text_truncate.OPT_TEXTAREA_SIZE;
+const resizeStyles = {
+	none: "resize-none",
+	vertical: "resize-y",
+	horizontal: "resize-x",
+	both: "resize"
+};
+const Textarea = (0, react.forwardRef)((_ref, ref) => {
+	var _useInputId;
+	let { label, error, hint, fullWidth = false, required, resize = "vertical", size = "md", className, id, rows = 4 } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$8);
+	const fallbackId = (0, react.useId)().replace(/:/g, "");
+	const textareaId = (_useInputId = require_text_truncate.useInputId(id, label, "textarea")) !== null && _useInputId !== void 0 ? _useInputId : `textarea-${fallbackId}`;
+	const hasError = Boolean(error);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_text_truncate.cn("flex flex-col gap-1.5", fullWidth && "w-full"),
+		"data-opt-id": "6T58H",
+		"data-opt-slug": "textarea.Textarea",
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				htmlFor: textareaId,
+				className: "text-text-primary text-sm font-medium",
+				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.RequiredMark, {})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", require_text_truncate._objectSpread2({
+				ref,
+				id: textareaId,
+				rows,
+				className: require_text_truncate.cn("border-border bg-surface text-text-primary placeholder:text-text-tertiary w-full rounded-lg border px-4 py-3 text-sm outline-transparent", require_text_truncate.OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
+				"aria-invalid": hasError,
+				"aria-describedby": require_text_truncate.getDescribedBy(textareaId, error, hint)
+			}, props)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldMessages, {
+				id: textareaId,
+				error,
+				hint
+			})
+		]
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", require_highlight._objectSpread2(require_highlight._objectSpread2({
-		role: "img",
-		"aria-label": avatarLabel,
-		className: require_highlight.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",
-		children: [avatarContent, status && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: require_highlight.cn("border-surface absolute right-0 bottom-0 rounded-full", statusStyles[status], statusSizeStyles[size]),
-			"aria-hidden": "true"
-		})]
-	}));
-}
-/** Renders the avatar group component. */
-function AvatarGroup(_ref5) {
-	let { max = 4, size = "md", children, className } = _ref5, props = require_highlight._objectWithoutProperties(_ref5, _excluded2$4);
-	const avatars = Array.isArray(children) ? children : [children];
-	const visibleAvatars = avatars.slice(0, max);
-	const remainingCount = avatars.length - max;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("flex", className) }, props), {}, {
-		"data-opt-id": "MVB53",
-		"data-opt-slug": "avatar.AvatarGroup",
-		children: [visibleAvatars.map((child, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "ring-surface relative -ml-2 inline-block rounded-full ring-2 first:ml-0",
-			children: child
-		}, index)), remainingCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: require_highlight.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]
-		})]
-	}));
-}
+});
+Textarea.displayName = "Textarea";
 //#endregion
 //#region src/core/progress.tsx
-const _excluded$8 = [
+const _excluded$7 = [
 	"value",
 	"max",
 	"size",
@@ -1025,12 +1062,12 @@ const _excluded2$3 = [
 	"indeterminate",
 	"className"
 ];
-const sizeStyles$5 = {
+const sizeStyles$4 = {
 	sm: "h-1",
 	md: "h-2",
 	lg: "h-3"
 };
-const variantStyles$1 = {
+const variantStyles = {
 	default: "bg-accent",
 	success: "bg-success",
 	warning: "bg-warning",
@@ -1049,10 +1086,10 @@ function getProgressValue(value, max) {
 }
 /** Renders the progress component. */
 function Progress(_ref) {
-	let { value, max = 100, size = "md", variant = "default", showLabel = false, label, animated = true, indeterminate = false, className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$8);
+	let { value, max = 100, size = "md", variant = "default", showLabel = false, label, animated = true, indeterminate = false, className } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$7);
 	const progress = indeterminate || value === void 0 ? null : getProgressValue(value, max);
 	const shouldRenderHeader = Boolean(label) || showLabel && progress;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("w-full", className) }, props), {}, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("w-full", className) }, props), {}, {
 		"data-opt-id": "Y5N8R",
 		"data-opt-slug": "progress.Progress",
 		children: [shouldRenderHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1065,7 +1102,7 @@ function Progress(_ref) {
 				children: progress.valueText
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_highlight.cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$5[size]),
+			className: require_text_truncate.cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$4[size]),
 			role: "progressbar",
 			"aria-valuenow": progress === null || progress === void 0 ? void 0 : progress.clampedValue,
 			"aria-valuemin": progress ? 0 : void 0,
@@ -1073,7 +1110,7 @@ function Progress(_ref) {
 			"aria-valuetext": progress === null || progress === void 0 ? void 0 : progress.valueText,
 			"aria-label": label !== null && label !== void 0 ? label : progress ? `${progress.valueText} complete` : "Loading",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_highlight.cn("h-full rounded-full", variantStyles$1[variant], !progress && "w-1/3 animate-pulse", animated && (progress ? "transition-all duration-300 ease-out" : "transition-opacity duration-700 ease-in-out")),
+				className: require_text_truncate.cn("h-full rounded-full", variantStyles[variant], !progress && "w-1/3 animate-pulse", animated && (progress ? "transition-all duration-300 ease-out" : "transition-opacity duration-700 ease-in-out")),
 				style: progress ? { width: `${progress.percentage}%` } : void 0
 			})
 		})]
@@ -1088,7 +1125,7 @@ const circularVariantStyles = {
 /** Renders the circular progress component. */
 function CircularProgress(_ref2) {
 	var _progress$percentage;
-	let { value, max = 100, size = 48, strokeWidth = 4, variant = "default", showLabel = false, label, indeterminate = false, className } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$3);
+	let { value, max = 100, size = 48, strokeWidth = 4, variant = "default", showLabel = false, label, indeterminate = false, className } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$3);
 	const labelId = (0, react.useId)();
 	const isIndeterminate = indeterminate || value === void 0;
 	const progress = isIndeterminate ? null : getProgressValue(value, max);
@@ -1106,10 +1143,10 @@ function CircularProgress(_ref2) {
 				className: "sr-only",
 				children: label
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", require_highlight._objectSpread2(require_highlight._objectSpread2({
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 				width: size,
 				height: size,
-				className: require_highlight.cn(isIndeterminate ? "animate-spin" : "-rotate-90", className),
+				className: require_text_truncate.cn(isIndeterminate ? "animate-spin" : "-rotate-90", className),
 				role: isIndeterminate ? "progressbar" : "meter",
 				"aria-labelledby": label ? labelId : void 0,
 				"aria-valuenow": progress === null || progress === void 0 ? void 0 : progress.clampedValue,
@@ -1131,7 +1168,7 @@ function CircularProgress(_ref2) {
 				fill: "none",
 				strokeWidth,
 				strokeLinecap: "round",
-				className: require_highlight.cn("transition-all duration-300 ease-out", circularVariantStyles[variant]),
+				className: require_text_truncate.cn("transition-all duration-300 ease-out", circularVariantStyles[variant]),
 				style: {
 					strokeDasharray: isIndeterminate ? `${circumference * .28} ${circumference}` : circumference,
 					strokeDashoffset: isIndeterminate ? 0 : strokeDashoffset,
@@ -1146,65 +1183,6 @@ function CircularProgress(_ref2) {
 	});
 }
 //#endregion
-//#region src/core/meter.tsx
-const _excluded$7 = [
-	"value",
-	"min",
-	"max",
-	"size",
-	"variant",
-	"showValue",
-	"label",
-	"getValueLabel",
-	"className"
-];
-const sizeStyles$4 = {
-	sm: "h-1",
-	md: "h-2",
-	lg: "h-3"
-};
-const variantStyles = {
-	default: "bg-accent",
-	success: "bg-success",
-	warning: "bg-warning",
-	error: "bg-danger"
-};
-/**
-* A scalar measurement within a known range (disk usage, score, capacity) —
-* `role="meter"`, distinct from Progress (task completion). Built on the
-* opt-ui-primitives Meter primitive, which owns the role/aria/valuetext.
-*/
-function Meter(_ref) {
-	let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$7);
-	const clamped = Math.min(Math.max(value, min), max);
-	const percentage = max === min ? 0 : (clamped - min) / (max - min) * 100;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("w-full", className) }, props), {}, {
-		"data-opt-id": "G01TE",
-		"data-opt-slug": "meter.Meter",
-		children: [(showValue || label) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mb-1.5 flex items-center justify-between text-sm",
-			children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-text-primary font-medium",
-				children: label
-			}), showValue && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "text-text-tertiary",
-				children: [Math.round(percentage), "%"]
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Meter, {
-			value: clamped,
-			min,
-			max,
-			getValueLabel,
-			"aria-label": label !== null && label !== void 0 ? label : `${Math.round(percentage)}%`,
-			className: require_highlight.cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$4[size]),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_highlight.cn("h-full rounded-full transition-all duration-300 ease-out", variantStyles[variant]),
-				style: { width: `${percentage}%` }
-			})
-		})]
-	}));
-}
-//#endregion
 //#region src/core/step-builder.tsx
 /** Renders the step builder component. */
 function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps, className, "aria-label": ariaLabel }) {
@@ -1242,7 +1220,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 		editingId
 	]);
 	const updateStep = (0, react.useCallback)((id, updates) => {
-		onChange(steps.map((s) => s.id === id ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, s), updates) : s));
+		onChange(steps.map((s) => s.id === id ? require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, s), updates) : s));
 	}, [steps, onChange]);
 	const moveStep = (0, react.useCallback)((index, direction) => {
 		const target = index + direction;
@@ -1253,7 +1231,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 	}, [steps, onChange]);
 	const atLimit = Boolean(maxSteps && steps.length >= maxSteps);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("flex flex-col gap-3", className),
+		className: require_text_truncate.cn("flex flex-col gap-3", className),
 		role: "list",
 		"aria-label": (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref !== void 0 ? _ref : "Step builder",
 		"data-opt-id": "7BQDT",
@@ -1266,7 +1244,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 			steps.map((step, index) => {
 				var _step$description;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: require_highlight.cn(require_highlight.OPT_SURFACE, require_highlight.OPT_BORDER, "flex items-start gap-3 p-3"),
+					className: require_text_truncate.cn(require_text_truncate.OPT_SURFACE, require_text_truncate.OPT_BORDER, "flex items-start gap-3 p-3"),
 					role: "listitem",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1286,7 +1264,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 										onKeyDown: (e) => {
 											if (e.key === "Enter") setEditingId(null);
 										},
-										className: require_highlight.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset w-full rounded-md border px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_highlight.OPT_TEXT_PRIMARY, require_highlight.OPT_FOCUS_VISIBLE),
+										className: require_text_truncate.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset w-full rounded-md border px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_text_truncate.OPT_TEXT_PRIMARY, require_text_truncate.OPT_FOCUS_VISIBLE),
 										"aria-label": "Step label",
 										autoFocus: true
 									}),
@@ -1295,10 +1273,10 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 										value: (_step$description = step.description) !== null && _step$description !== void 0 ? _step$description : "",
 										onChange: (e) => updateStep(step.id, { description: e.target.value }),
 										placeholder: "Description (optional)",
-										className: require_highlight.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset w-full rounded-md border px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_highlight.OPT_TEXT_PRIMARY, "placeholder:text-text-tertiary", require_highlight.OPT_FOCUS_VISIBLE),
+										className: require_text_truncate.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset w-full rounded-md border px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_text_truncate.OPT_TEXT_PRIMARY, "placeholder:text-text-tertiary", require_text_truncate.OPT_FOCUS_VISIBLE),
 										"aria-label": "Step description"
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Button, {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Button, {
 										variant: "ghost",
 										size: "sm",
 										onClick: () => setEditingId(null),
@@ -1311,10 +1289,10 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 								onClick: () => setEditingId(step.id),
 								"aria-label": `Edit ${step.label}`,
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: require_highlight.cn(require_highlight.OPT_TEXT_PRIMARY, "text-sm font-medium"),
+									className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_PRIMARY, "text-sm font-medium"),
 									children: step.label
 								}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: require_highlight.cn("text-text-secondary", "mt-0.5 block text-xs"),
+									className: require_text_truncate.cn("text-text-secondary", "mt-0.5 block text-xs"),
 									children: step.description
 								})]
 							})
@@ -1326,7 +1304,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 									type: "button",
 									onClick: () => moveStep(index, -1),
 									disabled: index === 0,
-									className: require_highlight.cn("rounded p-1 text-sm", require_highlight.OPT_TEXT_TERTIARY, "hover:bg-bg-subtle", "disabled:opacity-30", require_highlight.OPT_FOCUS_VISIBLE),
+									className: require_text_truncate.cn("rounded p-1 text-sm", require_text_truncate.OPT_TEXT_TERTIARY, "hover:bg-bg-subtle", "disabled:opacity-30", require_text_truncate.OPT_FOCUS_VISIBLE),
 									"aria-label": "Move up",
 									children: "▲"
 								}),
@@ -1334,14 +1312,14 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 									type: "button",
 									onClick: () => moveStep(index, 1),
 									disabled: index === steps.length - 1,
-									className: require_highlight.cn("rounded p-1 text-sm", require_highlight.OPT_TEXT_TERTIARY, "hover:bg-bg-subtle", "disabled:opacity-30", require_highlight.OPT_FOCUS_VISIBLE),
+									className: require_text_truncate.cn("rounded p-1 text-sm", require_text_truncate.OPT_TEXT_TERTIARY, "hover:bg-bg-subtle", "disabled:opacity-30", require_text_truncate.OPT_FOCUS_VISIBLE),
 									"aria-label": "Move down",
 									children: "▼"
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									onClick: () => removeStep(step.id),
-									className: require_highlight.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm", require_highlight.OPT_FOCUS_VISIBLE),
+									className: require_text_truncate.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm", require_text_truncate.OPT_FOCUS_VISIBLE),
 									"aria-label": `Remove ${step.label}`,
 									children: "✕"
 								})
@@ -1350,7 +1328,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 					]
 				}, step.id);
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.Button, {
 				variant: "secondary",
 				size: "sm",
 				onClick: addStep,
@@ -1363,55 +1341,6 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
 }
 StepBuilder.displayName = "StepBuilder";
 //#endregion
-//#region src/lib/formatters.ts
-const OPT_UI_DEFAULT_LOCALE = "ko-KR";
-const KST_OFFSET_MS = 324e5;
-function getKstDateParts(input) {
-	const date = input instanceof Date ? input : new Date(input);
-	if (Number.isNaN(date.getTime())) return null;
-	const kstDate = new Date(date.getTime() + KST_OFFSET_MS);
-	return {
-		year: kstDate.getUTCFullYear(),
-		month: kstDate.getUTCMonth() + 1,
-		day: kstDate.getUTCDate(),
-		hour: kstDate.getUTCHours(),
-		minute: kstDate.getUTCMinutes(),
-		second: kstDate.getUTCSeconds()
-	};
-}
-function pad2(value) {
-	return String(value).padStart(2, "0");
-}
-function meridiem(hour) {
-	return hour < 12 ? "오전" : "오후";
-}
-function hour12(hour) {
-	const normalized = hour % 12;
-	return normalized === 0 ? 12 : normalized;
-}
-/** Formats a date as Korean short date text in the opt-ui default timezone. */
-function formatOptShortDate(input) {
-	const parts = getKstDateParts(input);
-	if (!parts) return "-";
-	return `${parts.month}월 ${parts.day}일`;
-}
-/** Formats a date as Korean clock time in the opt-ui default timezone. */
-function formatOptTime(input) {
-	const parts = getKstDateParts(input);
-	if (!parts) return "-";
-	return `${meridiem(parts.hour)} ${pad2(hour12(parts.hour))}:${pad2(parts.minute)}`;
-}
-/** Formats a date as Korean date-time text in the opt-ui default timezone. */
-function formatOptDateTime(input) {
-	const parts = getKstDateParts(input);
-	if (!parts) return "-";
-	return `${parts.year}. ${parts.month}. ${parts.day}. ${meridiem(parts.hour)} ${hour12(parts.hour)}:${pad2(parts.minute)}:${pad2(parts.second)}`;
-}
-/** Formats numbers without depending on the runtime default locale. */
-function formatOptNumber(value) {
-	return new Intl.NumberFormat(OPT_UI_DEFAULT_LOCALE).format(value);
-}
-//#endregion
 //#region src/core/condition-builder.tsx
 const OPERATOR_LABELS = {
 	equals: "equals",
@@ -1526,12 +1455,12 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 		onChange(groups.filter((g) => g.id !== groupId));
 	}, [groups, onChange]);
 	const updateGroupLogic = (0, react.useCallback)((groupId, logic) => {
-		onChange(groups.map((g) => g.id === groupId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { logic }) : g));
+		onChange(groups.map((g) => g.id === groupId ? require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, g), {}, { logic }) : g));
 	}, [groups, onChange]);
 	const addCondition = (0, react.useCallback)((groupId) => {
 		onChange(groups.map((g) => {
 			var _properties$2;
-			return g.id === groupId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { conditions: [...g.conditions, {
+			return g.id === groupId ? require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, g), {}, { conditions: [...g.conditions, {
 				id: createConditionId(),
 				property: (_properties$2 = properties[0]) !== null && _properties$2 !== void 0 ? _properties$2 : "",
 				operator: "equals",
@@ -1545,15 +1474,15 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 		createConditionId
 	]);
 	const removeCondition = (0, react.useCallback)((groupId, condId) => {
-		onChange(groups.map((g) => g.id === groupId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { conditions: g.conditions.filter((c) => c.id !== condId) }) : g));
+		onChange(groups.map((g) => g.id === groupId ? require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, g), {}, { conditions: g.conditions.filter((c) => c.id !== condId) }) : g));
 	}, [groups, onChange]);
 	const updateCondition = (0, react.useCallback)((groupId, condId, updates) => {
-		onChange(groups.map((g) => g.id === groupId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { conditions: g.conditions.map((c) => c.id === condId ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, c), updates) : c) }) : g));
+		onChange(groups.map((g) => g.id === groupId ? require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, g), {}, { conditions: g.conditions.map((c) => c.id === condId ? require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, c), updates) : c) }) : g));
 	}, [groups, onChange]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionBuilderIdScopeContext.Provider, {
 		value: idScope,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_highlight.cn("flex flex-col gap-3", className),
+			className: require_text_truncate.cn("flex flex-col gap-3", className),
 			"aria-label": (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref !== void 0 ? _ref : "Condition builder",
 			"data-opt-id": "SXXKJ",
 			"data-opt-slug": "condition-builder.ConditionBuilder",
@@ -1573,7 +1502,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-border-subtle h-px flex-1" })
 					]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: require_highlight.cn(require_highlight.OPT_SURFACE, require_highlight.OPT_BORDER, "p-3"),
+					className: require_text_truncate.cn(require_text_truncate.OPT_SURFACE, require_text_truncate.OPT_BORDER, "p-3"),
 					role: "group",
 					"aria-label": `Condition group ${groupIndex + 1}`,
 					children: [
@@ -1583,7 +1512,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 								className: "flex items-center gap-2",
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_highlight.cn(require_highlight.OPT_TEXT_SECONDARY, "text-xs font-medium"),
+										className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_SECONDARY, "text-xs font-medium"),
 										children: "Match"
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
@@ -1592,7 +1521,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 											const v = e.target.value;
 											if (v === "and" || v === "or") updateGroupLogic(group.id, v);
 										},
-										className: require_highlight.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset rounded border px-2 py-0.5 text-xs font-semibold outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_highlight.OPT_TEXT_PRIMARY, require_highlight.OPT_FOCUS_VISIBLE),
+										className: require_text_truncate.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset rounded border px-2 py-0.5 text-xs font-semibold outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_text_truncate.OPT_TEXT_PRIMARY, require_text_truncate.OPT_FOCUS_VISIBLE),
 										"aria-label": "Group logic",
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 											value: "and",
@@ -1603,14 +1532,14 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 										})]
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_highlight.cn(require_highlight.OPT_TEXT_SECONDARY, "text-xs"),
+										className: require_text_truncate.cn(require_text_truncate.OPT_TEXT_SECONDARY, "text-xs"),
 										children: "of the following"
 									})
 								]
 							}), groups.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								onClick: () => removeGroup(group.id),
-								className: require_highlight.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+								className: require_text_truncate.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
 								"aria-label": "Remove group",
 								children: "✕"
 							})]
@@ -1623,7 +1552,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 									className: "flex items-center gap-2",
 									children: [
 										condIndex > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: require_highlight.cn("w-8 text-center text-[10px] font-semibold uppercase", group.logic === "and" ? "text-info-fg" : "text-warning-fg"),
+											className: require_text_truncate.cn("w-8 text-center text-[10px] font-semibold uppercase", group.logic === "and" ? "text-info-fg" : "text-warning-fg"),
 											children: group.logic
 										}),
 										condIndex === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "w-8" }),
@@ -1636,7 +1565,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
 												value: cond.property,
 												onChange: (e) => updateCondition(group.id, cond.id, { property: e.target.value }),
-												className: require_highlight.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[120px] rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_highlight.OPT_TEXT_PRIMARY, require_highlight.OPT_FOCUS_VISIBLE),
+												className: require_text_truncate.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[120px] rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_text_truncate.OPT_TEXT_PRIMARY, require_text_truncate.OPT_FOCUS_VISIBLE),
 												"aria-label": "Property",
 												children: properties.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 													value: p,
@@ -1649,7 +1578,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 													const v = e.target.value;
 													if (isConditionOperator(v)) updateCondition(group.id, cond.id, { operator: v });
 												},
-												className: require_highlight.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[130px] rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_highlight.OPT_TEXT_PRIMARY, require_highlight.OPT_FOCUS_VISIBLE),
+												className: require_text_truncate.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[130px] rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", require_text_truncate.OPT_TEXT_PRIMARY, require_text_truncate.OPT_FOCUS_VISIBLE),
 												"aria-label": "Operator",
 												children: Object.entries(OPERATOR_LABELS).map(([key, lbl]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 													value: key,
@@ -1661,14 +1590,14 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 												value: cond.value,
 												onChange: (e) => updateCondition(group.id, cond.id, { value: e.target.value }),
 												placeholder: "Value",
-												className: require_highlight.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[100px] flex-1 rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", "text-text-primary", "placeholder:text-text-tertiary", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+												className: require_text_truncate.cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[100px] flex-1 rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", "text-text-primary", "placeholder:text-text-tertiary", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
 												"aria-label": "Value"
 											})
 										] }),
 										group.conditions.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 											type: "button",
 											onClick: () => removeCondition(group.id, cond.id),
-											className: require_highlight.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+											className: require_text_truncate.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
 											"aria-label": "Remove condition",
 											children: "✕"
 										})
@@ -1681,7 +1610,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionBuilder, {
 								groups: group.children,
 								onChange: (newChildren) => {
-									onChange(groups.map((g) => g.id === group.id ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { children: newChildren }) : g));
+									onChange(groups.map((g) => g.id === group.id ? require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, g), {}, { children: newChildren }) : g));
 								},
 								properties,
 								addConditionLabel,
@@ -1694,12 +1623,12 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "mt-2 flex items-center gap-2",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.Button, {
 								variant: "ghost",
 								size: "sm",
 								onClick: () => addCondition(group.id),
 								children: ["+ ", addConditionLabel]
-							}), nested && maxDepth > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
+							}), nested && maxDepth > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.Button, {
 								variant: "ghost",
 								size: "sm",
 								onClick: () => {
@@ -1716,7 +1645,7 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 									};
 									onChange(groups.map((g) => {
 										var _g$children;
-										return g.id === group.id ? require_highlight._objectSpread2(require_highlight._objectSpread2({}, g), {}, { children: [...(_g$children = g.children) !== null && _g$children !== void 0 ? _g$children : [], nestedGroup] }) : g;
+										return g.id === group.id ? require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, g), {}, { children: [...(_g$children = g.children) !== null && _g$children !== void 0 ? _g$children : [], nestedGroup] }) : g;
 									}));
 								},
 								children: ["+ ", addNestedGroupLabel]
@@ -1726,15 +1655,15 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
 				})] }, group.id)),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.Button, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.Button, {
 						variant: "secondary",
 						size: "sm",
 						onClick: addGroup,
 						className: "self-start",
 						children: ["+ ", addGroupLabel]
 					}), previewCount != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: require_highlight.cn("text-text-secondary", "text-sm"),
-						children: [formatOptNumber(previewCount), " matches"]
+						className: require_text_truncate.cn("text-text-secondary", "text-sm"),
+						children: [require_text_truncate.formatOptNumber(previewCount), " matches"]
 					})]
 				})
 			]
@@ -1748,35 +1677,35 @@ const _excluded$6 = ["className"];
 const _excluded2$2 = ["className"];
 const _excluded3$1 = ["className", "variant"];
 const _excluded4 = ["className"];
-const DropdownMenu = require_highlight.MenuRoot;
+const DropdownMenu = require_text_truncate.MenuRoot;
 /** Renders the dropdown trigger component. */
 function DropdownTrigger(_ref) {
-	let { className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$6);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuTrigger, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("cursor-pointer gap-2", className) }, props), {}, {
+	let { className } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$6);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuTrigger, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("cursor-pointer gap-2", className) }, props), {}, {
 		"data-opt-id": "C4BSS",
 		"data-opt-slug": "dropdown-menu.DropdownTrigger"
 	}));
 }
 /** Renders the dropdown content component. */
 function DropdownContent(_ref2) {
-	let { className } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$2);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuPopover, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(className) }, props), {}, {
+	let { className } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuPopover, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(className) }, props), {}, {
 		"data-opt-id": "J6NF7",
 		"data-opt-slug": "dropdown-menu.DropdownContent"
 	}));
 }
 /** Renders the dropdown item component. */
 function DropdownItem(_ref3) {
-	let { className, variant = "default" } = _ref3, props = require_highlight._objectWithoutProperties(_ref3, _excluded3$1);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuItem, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("cursor-pointer data-[disabled]:cursor-not-allowed", variant === "destructive" && "text-danger-fg data-[active-item]:bg-danger-subtle data-[active-item]:text-danger-fg", className) }, props), {}, {
+	let { className, variant = "default" } = _ref3, props = require_text_truncate._objectWithoutProperties(_ref3, _excluded3$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuItem, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("cursor-pointer data-[disabled]:cursor-not-allowed", variant === "destructive" && "text-danger-fg data-[active-item]:bg-danger-subtle data-[active-item]:text-danger-fg", className) }, props), {}, {
 		"data-opt-id": "5M6GA",
 		"data-opt-slug": "dropdown-menu.DropdownItem"
 	}));
 }
 /** Renders the dropdown separator component. */
 function DropdownSeparator(_ref4) {
-	let { className } = _ref4, props = require_highlight._objectWithoutProperties(_ref4, _excluded4);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.MenuSeparator, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn(className) }, props), {}, {
+	let { className } = _ref4, props = require_text_truncate._objectWithoutProperties(_ref4, _excluded4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuSeparator, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(className) }, props), {}, {
 		"data-opt-id": "K9Y54",
 		"data-opt-slug": "dropdown-menu.DropdownSeparator"
 	}));
@@ -1824,7 +1753,7 @@ function RadioGroup({ children, value, defaultValue = "", onChange, disabled, si
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroupContext.Provider, {
 		value: ctxValue,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_highlight.cn("flex flex-col gap-1.5", className),
+			className: require_text_truncate.cn("flex flex-col gap-1.5", className),
 			"data-opt-id": "2F20H",
 			"data-opt-slug": "radio-group.RadioGroup",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.RadioGroupRoot, {
@@ -1839,14 +1768,14 @@ function RadioGroup({ children, value, defaultValue = "", onChange, disabled, si
 				"aria-labelledby": labelId,
 				"aria-required": required,
 				"aria-invalid": hasError,
-				"aria-describedby": require_highlight.getDescribedBy(groupId, error, void 0),
-				className: require_highlight.cn("flex", orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6"),
+				"aria-describedby": require_text_truncate.getDescribedBy(groupId, error, void 0),
+				className: require_text_truncate.cn("flex", orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6"),
 				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					id: labelId,
 					className: "text-text-secondary mb-1 text-sm font-medium",
-					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.RequiredMark, {})]
+					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.RequiredMark, {})]
 				}), children]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FieldMessages, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldMessages, {
 				id: groupId,
 				error
 			})]
@@ -1855,7 +1784,7 @@ function RadioGroup({ children, value, defaultValue = "", onChange, disabled, si
 }
 const Radio = (0, react.forwardRef)((_ref, ref) => {
 	var _ref2;
-	let { label, hint, description, value, name: _name, size: sizeProp, disabled: disabledProp, className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$5);
+	let { label, hint, description, value, name: _name, size: sizeProp, disabled: disabledProp, className } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$5);
 	const groupContext = (0, react.useContext)(RadioGroupContext);
 	const primContext = (0, _reopt_ai_opt_ui_primitives.useRadioGroupContext)();
 	const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : groupContext.size;
@@ -1873,10 +1802,10 @@ const Radio = (0, react.forwardRef)((_ref, ref) => {
 		value,
 		primContext
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", require_highlight._objectSpread2(require_highlight._objectSpread2({
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 		ref,
 		"aria-checked": isChecked,
-		className: require_highlight.cn("group flex items-start gap-3", disabled && "cursor-not-allowed opacity-50", !disabled && "cursor-pointer", className)
+		className: require_text_truncate.cn("group flex items-start gap-3", disabled && "cursor-not-allowed opacity-50", !disabled && "cursor-pointer", className)
 	}, props), {}, {
 		"data-opt-id": "HY7YG",
 		"data-opt-slug": "radio-group.Radio",
@@ -1895,15 +1824,15 @@ const Radio = (0, react.forwardRef)((_ref, ref) => {
 				className: "sr-only"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: require_highlight.cn("relative mt-0.5 inline-flex shrink-0 items-center justify-center rounded-full", styles.radio, "border-border border-2", "bg-surface", "group-aria-checked:border-accent", "transition-colors", "group-has-[:focus-visible]:outline-ring outline-transparent group-has-[:focus-visible]:outline-2 group-has-[:focus-visible]:-outline-offset-1"),
+				className: require_text_truncate.cn("relative mt-0.5 inline-flex shrink-0 items-center justify-center rounded-full", styles.radio, "border-border border-2", "bg-surface", "group-aria-checked:border-accent", "transition-colors", "group-has-[:focus-visible]:outline-ring outline-transparent group-has-[:focus-visible]:outline-2 group-has-[:focus-visible]:-outline-offset-1"),
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_highlight.cn(styles.dot, "bg-accent rounded-full", "scale-0 opacity-0 transition-all", "group-aria-checked:scale-100 group-aria-checked:opacity-100") })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_text_truncate.cn(styles.dot, "bg-accent rounded-full", "scale-0 opacity-0 transition-all", "group-aria-checked:scale-100 group-aria-checked:opacity-100") })
 			}),
 			(label || hintText) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col",
 				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					id: labelId,
-					className: require_highlight.cn("text-text-primary font-medium", styles.text),
+					className: require_text_truncate.cn("text-text-primary font-medium", styles.text),
 					children: label
 				}), hintText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					id: hintId,
@@ -1925,12 +1854,12 @@ const _excluded$4 = [
 ];
 /** Renders the loading overlay component. */
 function LoadingOverlay(_ref) {
-	let { loading, children, label = "Loading…", className } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$4);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({
+	let { loading, children, label = "Loading…", className } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 		"data-opt-id": "380ZR",
 		"data-opt-slug": "loading-overlay.LoadingOverlay"
 	}, props), {}, {
-		className: require_highlight.cn("relative", className),
+		className: require_text_truncate.cn("relative", className),
 		children: [children, loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "bg-surface/60 absolute inset-0 z-10 flex items-center justify-center rounded-lg backdrop-blur-[1px]",
 			role: "status",
@@ -1938,7 +1867,7 @@ function LoadingOverlay(_ref) {
 			"aria-label": label,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.Spinner, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Spinner, {
 					size: "md",
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1974,9 +1903,9 @@ const insetClass = {
 };
 /** Renders the block layout component. */
 function BlockLayout(_ref) {
-	let { children, className, spacing = "section", inset, loading, loadingLabel } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$3);
-	const layoutClassName = require_highlight.cn("flex flex-col", spacingClass[spacing], inset ? insetClass[inset] : void 0, className);
-	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingOverlay, require_highlight._objectSpread2(require_highlight._objectSpread2({
+	let { children, className, spacing = "section", inset, loading, loadingLabel } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$3);
+	const layoutClassName = require_text_truncate.cn("flex flex-col", spacingClass[spacing], inset ? insetClass[inset] : void 0, className);
+	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingOverlay, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 		"data-opt-id": "9D8QR",
 		"data-opt-slug": "block-layout.BlockLayout"
 	}, props), {}, {
@@ -1985,7 +1914,7 @@ function BlockLayout(_ref) {
 		label: loadingLabel,
 		children
 	}));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_highlight._objectSpread2(require_highlight._objectSpread2({
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 		"data-opt-id": "9D8QR",
 		"data-opt-slug": "block-layout.BlockLayout"
 	}, props), {}, {
@@ -2006,7 +1935,7 @@ const _excluded$2 = ["loading", "className"];
 */
 function createBlock(name, render, options) {
 	const Component = (props) => {
-		const { loading, className } = props, rest = require_highlight._objectWithoutProperties(props, _excluded$2);
+		const { loading, className } = props, rest = require_text_truncate._objectWithoutProperties(props, _excluded$2);
 		const layoutCn = (options === null || options === void 0 ? void 0 : options.layoutClassName) ? `${options.layoutClassName}${className ? ` ${className}` : ""}` : className;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BlockLayout, {
 			loading,
@@ -2022,7 +1951,7 @@ function createBlock(name, render, options) {
 /** Renders the page header component. */
 function PageHeader({ title, description, actions, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("gap-group flex flex-col items-stretch sm:flex-row sm:items-center sm:justify-between", className),
+		className: require_text_truncate.cn("gap-group flex flex-col items-stretch sm:flex-row sm:items-center sm:justify-between", className),
 		"data-opt-id": "7AK8Z",
 		"data-opt-slug": "page-header.PageHeader",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2051,7 +1980,7 @@ const overflowMap = {
 /** Renders the scroll area component. */
 function ScrollArea({ children, className, orientation = "vertical" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_highlight.cn(overflowMap[orientation], "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border hover:scrollbar-thumb-border-hover", className),
+		className: require_text_truncate.cn(overflowMap[orientation], "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border hover:scrollbar-thumb-border-hover", className),
 		"data-opt-id": "A9X4K",
 		"data-opt-slug": "scroll-area.ScrollArea",
 		children
@@ -2071,7 +2000,7 @@ const maxWidthMap = {
 /** Renders the container component. */
 function Container({ children, maxWidth = "xl", center = true, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_highlight.cn(maxWidthMap[maxWidth], center && "mx-auto", "px-4", className),
+		className: require_text_truncate.cn(maxWidthMap[maxWidth], center && "mx-auto", "px-4", className),
 		"data-opt-id": "H3G96",
 		"data-opt-slug": "container.Container",
 		children
@@ -2084,7 +2013,7 @@ Container.displayName = "Container";
 function Section({ children, title, description, className }) {
 	const titleId = `${(0, react.useId)()}-title`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-		className: require_highlight.cn("gap-group flex flex-col", className),
+		className: require_text_truncate.cn("gap-group flex flex-col", className),
 		"aria-labelledby": title ? titleId : void 0,
 		"data-opt-id": "M3QXW",
 		"data-opt-slug": "section.Section",
@@ -2125,11 +2054,11 @@ function toPanelSize(size) {
 }
 /** Renders the resizable panel group component. */
 function ResizablePanelGroup(_ref) {
-	let { direction, children, className, id, autoSaveId } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded$1);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Group, require_highlight._objectSpread2(require_highlight._objectSpread2({
+	let { direction, children, className, id, autoSaveId } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Group, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 		orientation: direction,
 		id: id !== null && id !== void 0 ? id : autoSaveId,
-		className: require_highlight.cn("flex h-full w-full", className)
+		className: require_text_truncate.cn("flex h-full w-full", className)
 	}, props), {}, {
 		"data-opt-id": "BM5RR",
 		"data-opt-slug": "resizable.ResizablePanelGroup",
@@ -2139,13 +2068,13 @@ function ResizablePanelGroup(_ref) {
 ResizablePanelGroup.displayName = "ResizablePanelGroup";
 /** Renders the resizable panel component. */
 function ResizablePanel(_ref2) {
-	let { collapsedSize, defaultSize, minSize, maxSize, children, className } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2$1);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Panel, require_highlight._objectSpread2(require_highlight._objectSpread2({
+	let { collapsedSize, defaultSize, minSize, maxSize, children, className } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Panel, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 		collapsedSize: toPanelSize(collapsedSize),
 		defaultSize: toPanelSize(defaultSize),
 		minSize: toPanelSize(minSize),
 		maxSize: toPanelSize(maxSize),
-		className: require_highlight.cn("overflow-auto", className)
+		className: require_text_truncate.cn("overflow-auto", className)
 	}, props), {}, {
 		"data-opt-id": "88X4V",
 		"data-opt-slug": "resizable.ResizablePanel",
@@ -2155,8 +2084,8 @@ function ResizablePanel(_ref2) {
 ResizablePanel.displayName = "ResizablePanel";
 /** Renders the resizable handle component. */
 function ResizableHandle(_ref3) {
-	let { className, withHandle = false } = _ref3, props = require_highlight._objectWithoutProperties(_ref3, _excluded3);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Separator, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("bg-border relative flex items-center justify-center", "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2", "data-[resize-handle-active]:bg-accent", "[&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full", "[&[data-orientation=horizontal]]:h-full [&[data-orientation=horizontal]]:w-px", className) }, props), {}, {
+	let { className, withHandle = false } = _ref3, props = require_text_truncate._objectWithoutProperties(_ref3, _excluded3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Separator, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("bg-border relative flex items-center justify-center", "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2", "data-[resize-handle-active]:bg-accent", "[&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full", "[&[data-orientation=horizontal]]:h-full [&[data-orientation=horizontal]]:w-px", className) }, props), {}, {
 		"data-opt-id": "6Z22W",
 		"data-opt-slug": "resizable.ResizableHandle",
 		children: withHandle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2190,28 +2119,28 @@ function Logo({ src, icon, text, alt = "Logo", size = "md", href, onClick, class
 	if (showImage) mark = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 		src,
 		alt,
-		className: require_highlight.cn("object-contain", markSizeStyles[size]),
+		className: require_text_truncate.cn("object-contain", markSizeStyles[size]),
 		onError: () => setImageError(true)
 	});
 	else if (icon) mark = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: require_highlight.cn("flex shrink-0 items-center justify-center", markSizeStyles[size]),
+		className: require_text_truncate.cn("flex shrink-0 items-center justify-center", markSizeStyles[size]),
 		"aria-hidden": "true",
 		children: icon
 	});
 	else if (fallbackLetter) mark = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: require_highlight.cn("bg-accent text-on-accent flex shrink-0 items-center justify-center rounded-lg font-bold", markSizeStyles[size], textSizeStyles[size]),
+		className: require_text_truncate.cn("bg-accent text-on-accent flex shrink-0 items-center justify-center rounded-lg font-bold", markSizeStyles[size], textSizeStyles[size]),
 		"aria-hidden": "true",
 		children: fallbackLetter
 	});
 	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [mark, text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: require_highlight.cn("text-text-primary font-semibold", textSizeStyles[size]),
+		className: require_text_truncate.cn("text-text-primary font-semibold", textSizeStyles[size]),
 		children: text
 	})] });
-	const sharedClassName = require_highlight.cn("inline-flex items-center gap-element", className);
+	const sharedClassName = require_text_truncate.cn("inline-flex items-center gap-element", className);
 	if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 		href,
 		onClick,
-		className: require_highlight.cn(sharedClassName, "no-underline"),
+		className: require_text_truncate.cn(sharedClassName, "no-underline"),
 		"aria-label": text !== null && text !== void 0 ? text : alt,
 		"data-opt-id": "R906A",
 		"data-opt-slug": "logo.Logo",
@@ -2264,7 +2193,7 @@ const positionClass = {
 };
 /** Renders the drawer root component. */
 function DrawerRoot(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogRoot, require_highlight._objectSpread2(require_highlight._objectSpread2({ animated: true }, props), {}, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogRoot, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ animated: true }, props), {}, {
 		"data-opt-id": "YGJ0M",
 		"data-opt-slug": "drawer.DrawerRoot"
 	}));
@@ -2280,7 +2209,7 @@ function dismissOffset(side, dx, dy) {
 }
 /** Renders the drawer panel component. */
 function DrawerPanel(_ref) {
-	let { className, side = "right", size = "md", swipeToDismiss = true, swipeDismissThreshold = 80, style, onPointerDown } = _ref, props = require_highlight._objectWithoutProperties(_ref, _excluded);
+	let { className, side = "right", size = "md", swipeToDismiss = true, swipeDismissThreshold = 80, style, onPointerDown } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded);
 	const isHorizontal = side === "left" || side === "right";
 	const close = (0, _reopt_ai_opt_ui_primitives.useDialogClose)();
 	const dragStart = (0, react.useRef)(null);
@@ -2342,9 +2271,9 @@ function DrawerPanel(_ref) {
 		};
 	}, [side]);
 	const dragStyle = offset !== 0 ? { transform: `translate${axis}(${offset}px)` } : void 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogPanel, require_highlight._objectSpread2(require_highlight._objectSpread2({
-		className: require_highlight.cn("border-border bg-surface z-50 m-0 flex flex-col border p-0 shadow-2xl", "data-[enter]:fade-in data-[leave]:fade-out", dragging ? "touch-none" : require_highlight.OPT_ANIMATE_DRAWER[side], positionClass[side], isHorizontal ? ["h-full w-full", sizeMap[size]] : ["w-full", heightMap[size]], className),
-		style: require_highlight._objectSpread2(require_highlight._objectSpread2(require_highlight._objectSpread2(require_highlight._objectSpread2({}, style), dragStyle), keyboardInset > 0 ? { marginBottom: keyboardInset } : null), dragging ? { transition: "none" } : null),
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogPanel, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
+		className: require_text_truncate.cn("border-border bg-surface z-50 m-0 flex flex-col border p-0 shadow-2xl", "data-[enter]:fade-in data-[leave]:fade-out", dragging ? "touch-none" : require_text_truncate.OPT_ANIMATE_DRAWER[side], positionClass[side], isHorizontal ? ["h-full w-full", sizeMap[size]] : ["w-full", heightMap[size]], className),
+		style: require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, style), dragStyle), keyboardInset > 0 ? { marginBottom: keyboardInset } : null), dragging ? { transition: "none" } : null),
 		onPointerDown: handlePointerDown,
 		onPointerMove: swipeToDismiss ? handlePointerMove : void 0,
 		onPointerUp: swipeToDismiss ? endDrag : void 0,
@@ -2356,8 +2285,8 @@ function DrawerPanel(_ref) {
 }
 /** Renders the drawer close component. */
 function DrawerClose(_ref2) {
-	let { className } = _ref2, props = require_highlight._objectWithoutProperties(_ref2, _excluded2);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogDismiss, require_highlight._objectSpread2(require_highlight._objectSpread2({ className: require_highlight.cn("hover:bg-bg-subtle rounded-md p-1.5 transition-colors", "cursor-pointer data-[disabled]:cursor-not-allowed", require_highlight.OPT_FOCUS, className) }, props), {}, {
+	let { className } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogDismiss, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("hover:bg-bg-subtle rounded-md p-1.5 transition-colors", "cursor-pointer data-[disabled]:cursor-not-allowed", require_text_truncate.OPT_FOCUS, className) }, props), {}, {
 		"data-opt-id": "M6D6D",
 		"data-opt-slug": "drawer.DrawerClose"
 	}));
@@ -2464,8 +2393,8 @@ function VirtualList({ items, renderItem, itemHeight, overscan = 3, className, s
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: handleRef,
 		onScroll: handleScroll,
-		className: require_highlight.cn("overflow-auto", className),
-		style: require_highlight._objectSpread2({ position: "relative" }, style),
+		className: require_text_truncate.cn("overflow-auto", className),
+		style: require_text_truncate._objectSpread2({ position: "relative" }, style),
 		role: "list",
 		"data-opt-id": "VT2NP",
 		"data-opt-slug": "virtual-list.VirtualList",
@@ -3638,8 +3567,8 @@ const ShaderSurfaceComponent = (0, react.forwardRef)(function ShaderSurface({ pr
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: containerRef,
 		"aria-hidden": ariaHidden,
-		className: require_highlight.cn("relative overflow-hidden", className),
-		style: require_highlight._objectSpread2({ background: fallbackBackground }, style),
+		className: require_text_truncate.cn("relative overflow-hidden", className),
+		style: require_text_truncate._objectSpread2({ background: fallbackBackground }, style),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
 			ref: canvasRef,
 			className: "absolute inset-0 block h-full w-full"
@@ -3673,7 +3602,7 @@ function formatShare(share) {
 */
 function Facet({ item, selected = false, onSelect, showShare = true, share, countFormatter = defaultCountFormat, layout = "vertical", labels, className }) {
 	var _ref;
-	const text = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$1), labels);
+	const text = require_text_truncate._objectSpread2(require_text_truncate._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);
@@ -3681,7 +3610,7 @@ function Facet({ item, selected = false, onSelect, showShare = true, share, coun
 	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		showShare && layout === "vertical" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"aria-hidden": "true",
-			className: require_highlight.cn("absolute inset-y-0 left-0 rounded-[inherit] transition-[width] duration-300", selected ? "bg-accent/25" : "bg-accent/10"),
+			className: require_text_truncate.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
@@ -3715,7 +3644,7 @@ function Facet({ item, selected = false, onSelect, showShare = true, share, coun
 			children: shareText
 		})
 	] });
-	const shellClass = require_highlight.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);
+	const shellClass = require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: shellClass,
 		"data-selected": selected || void 0,
@@ -3725,7 +3654,7 @@ function Facet({ item, selected = false, onSelect, showShare = true, share, coun
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
-		className: require_highlight.cn(shellClass, require_highlight.OPT_FOCUS_VISIBLE),
+		className: require_text_truncate.cn(shellClass, require_text_truncate.OPT_FOCUS_VISIBLE),
 		"aria-pressed": selected,
 		"aria-label": text.selectHint(typeof item.label === "string" ? item.label : item.id, countText, shareText),
 		disabled: item.disabled,
@@ -3756,7 +3685,7 @@ function Facet({ item, selected = false, onSelect, showShare = true, share, coun
 * ```
 */
 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 = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels$1), labels);
+	const text = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$1), labels);
 	const [uncontrolled, setUncontrolled] = (0, react.useState)([]);
 	const [expanded, setExpanded] = (0, react.useState)(false);
 	const current = selected !== null && selected !== void 0 ? selected : uncontrolled;
@@ -3777,7 +3706,7 @@ function FacetGroup({ items, selected, onSelectedChange, selection = "multiple",
 		onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(next);
 	};
 	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("flex flex-col gap-element", className),
+		className: require_text_truncate.cn("flex flex-col gap-element", className),
 		"aria-busy": "true",
 		"aria-label": ariaLabel,
 		"data-opt-id": "G1RNN",
@@ -3791,14 +3720,14 @@ function FacetGroup({ items, selected, onSelectedChange, selection = "multiple",
 		}, index))]
 	});
 	if (items.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_highlight.cn("text-text-tertiary px-2 py-1.5 text-sm", className),
+		className: require_text_truncate.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn(layout === "vertical" ? "flex flex-col gap-0.5" : "flex flex-wrap items-center gap-element", className),
+		className: require_text_truncate.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",
@@ -3817,7 +3746,7 @@ function FacetGroup({ items, selected, onSelectedChange, selection = "multiple",
 			}, item.id);
 		}), (remaining > 0 || expanded) && max !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
-			className: require_highlight.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"),
+			className: require_text_truncate.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)
 		})]
@@ -3873,13 +3802,13 @@ function Expression({ description, value, tone = "accent", active = false, inval
 	const palette = invalid ? toneStyles.danger : toneStyles[tone];
 	const interactive = onClick !== void 0 && !disabled;
 	const body = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: require_highlight.cn("text-text-secondary text-xs font-semibold tracking-wide uppercase", disabled && "opacity-60"),
+		className: require_text_truncate.cn("text-text-secondary text-xs font-semibold tracking-wide uppercase", disabled && "opacity-60"),
 		children: description
 	}), value !== void 0 && value !== null && value !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: require_highlight.cn("text-sm font-semibold", palette.text, interactive && require_highlight.cn("underline decoration-2 underline-offset-4", palette.rule, active ? "decoration-solid" : "decoration-dotted"), disabled && "opacity-60"),
+		className: require_text_truncate.cn("text-sm font-semibold", palette.text, interactive && require_text_truncate.cn("underline decoration-2 underline-offset-4", palette.rule, active ? "decoration-solid" : "decoration-dotted"), disabled && "opacity-60"),
 		children: value
 	})] });
-	const shell = require_highlight.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);
+	const shell = require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: shell,
 		"data-invalid": invalid || void 0,
@@ -3889,7 +3818,7 @@ function Expression({ description, value, tone = "accent", active = false, inval
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
-		className: require_highlight.cn(shell, require_highlight.OPT_FOCUS_VISIBLE),
+		className: require_text_truncate.cn(shell, require_text_truncate.OPT_FOCUS_VISIBLE),
 		onClick,
 		disabled,
 		"aria-expanded": active,
@@ -3906,7 +3835,7 @@ function Expression({ description, value, tone = "accent", active = false, inval
 */
 function ExpressionGroup({ children, display = "sentence", className, "aria-label": ariaLabel }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: require_highlight.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),
+		className: require_text_truncate.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",
@@ -3915,134 +3844,6 @@ function ExpressionGroup({ children, display = "sentence", className, "aria-labe
 	});
 }
 //#endregion
-//#region src/core/text-truncate.tsx
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.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 = (0, react.useRef)(null);
-	const [available, setAvailable] = (0, react.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] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("span", {
-		ref,
-		className: require_highlight.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__ */ (0, react_jsx_runtime.jsx)("span", {
-			"aria-hidden": truncated ? "true" : void 0,
-			children: children ? children(rendered) : rendered
-		}), truncated && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "sr-only",
-			children: text
-		})]
-	});
-}
-//#endregion
 //#region src/core/live-region.tsx
 /**
 * LiveRegion — says out loud what a live view changed.
@@ -4167,7 +3968,7 @@ function ColorPaletteDisplay({ palette, render, size = "sm", "aria-label": ariaL
 	const mode = render !== null && render !== void 0 ? render : palette.kind === "categorical" ? "stops" : "gradient";
 	const colors = palette.colors.length > 0 ? palette.colors : ["transparent"];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: require_highlight.cn("flex w-full overflow-hidden rounded-sm", sizeStyles$2[size], className),
+		className: require_text_truncate.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,
@@ -4200,22 +4001,22 @@ function ColorPalettePicker({ palettes, value, onValueChange, label = "Colour pa
 	const labelId = (0, react.useId)();
 	const selected = (_palettes$find = palettes.find((palette) => palette.id === value)) !== null && _palettes$find !== void 0 ? _palettes$find : palettes[0];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_highlight.cn("flex flex-col gap-element", className),
+		className: require_text_truncate.cn("flex flex-col gap-element", className),
 		"data-opt-id": "5R0PG",
 		"data-opt-slug": "color-palette.ColorPalettePicker",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			id: labelId,
-			className: require_highlight.cn("text-text-primary text-sm font-medium", hideLabel && "sr-only"),
+			className: require_text_truncate.cn("text-text-primary text-sm font-medium", hideLabel && "sr-only"),
 			children: label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_highlight.SelectRoot, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.SelectRoot, {
 			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__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectTrigger, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectTrigger, {
 				"aria-labelledby": labelId,
 				disabled,
-				className: require_highlight.cn("gap-group", require_highlight.OPT_FOCUS_VISIBLE),
+				className: require_text_truncate.cn("gap-group", require_text_truncate.OPT_FOCUS_VISIBLE),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "gap-group flex min-w-0 flex-1 items-center",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -4224,11 +4025,11 @@ function ColorPalettePicker({ palettes, value, onValueChange, label = "Colour pa
 					}), selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPaletteDisplay, {
 						palette: selected,
 						size,
-						className: require_highlight.cn("min-w-16 flex-1", "border border-border"),
+						className: require_text_truncate.cn("min-w-16 flex-1", "border border-border"),
 						"aria-label": ""
 					})]
 				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectPopover, { children: palettes.map((palette) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.SelectItem, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectPopover, { children: palettes.map((palette) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.SelectItem, {
 				value: palette.id,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "gap-group flex w-full min-w-40 items-center",
@@ -4278,7 +4079,7 @@ const sizeStyles$1 = {
 * ```
 */
 function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder, emptyText = "Untitled", disabled = false, maxLength, suffix, labels, className }) {
-	const text = require_highlight._objectSpread2(require_highlight._objectSpread2({}, defaultLabels), labels);
+	const text = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels), labels);
 	const [editing, setEditing] = (0, react.useState)(false);
 	const [draft, setDraft] = (0, react.useState)(value);
 	const [rejected, setRejected] = (0, react.useState)(false);
@@ -4329,7 +4130,7 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
 		}
 	};
 	if (editing) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: require_highlight.cn("inline-flex items-center gap-element", className),
+		className: require_text_truncate.cn("inline-flex min-w-0 items-center gap-element", className),
 		"data-opt-id": "RQ0H2",
 		"data-opt-slug": "inline-edit.InlineEdit",
 		children: [
@@ -4347,7 +4148,7 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
 				disabled: saving,
 				"aria-invalid": rejected || void 0,
 				"aria-errormessage": rejected ? "inline-edit-error" : void 0,
-				className: require_highlight.cn(require_highlight.OPT_INPUT, sizeStyles$1[size], "min-w-0 flex-1")
+				className: require_text_truncate.cn(require_text_truncate.OPT_INPUT, sizeStyles$1[size], "min-w-0 flex-1")
 			}),
 			rejected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				id: "inline-edit-error",
@@ -4361,7 +4162,7 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
 				disabled: saving,
 				onMouseDown: (event) => event.preventDefault(),
 				onClick: () => void commit(),
-				className: require_highlight.cn("text-success hover:bg-success-subtle rounded-md p-1", require_highlight.OPT_FOCUS_VISIBLE),
+				className: require_text_truncate.cn("text-success hover:bg-success-subtle rounded-md p-1", require_text_truncate.OPT_FOCUS_VISIBLE),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
 					className: "size-4",
 					"aria-hidden": "true"
@@ -4372,7 +4173,7 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
 				"aria-label": text.cancel,
 				onMouseDown: (event) => event.preventDefault(),
 				onClick: cancel,
-				className: require_highlight.cn("text-text-tertiary hover:bg-bg-subtle rounded-md p-1", require_highlight.OPT_FOCUS_VISIBLE),
+				className: require_text_truncate.cn("text-text-tertiary hover:bg-bg-subtle rounded-md p-1", require_text_truncate.OPT_FOCUS_VISIBLE),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
 					className: "size-4",
 					"aria-hidden": "true"
@@ -4381,7 +4182,7 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
 		]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: require_highlight.cn("inline-flex items-center gap-element", className),
+		className: require_text_truncate.cn("inline-flex min-w-0 items-center gap-element", className),
 		"data-opt-id": "RQ0H2",
 		"data-opt-slug": "inline-edit.InlineEdit",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -4389,13 +4190,13 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
 			disabled,
 			onClick: () => setEditing(true),
 			"aria-label": text.edit(value || emptyText),
-			className: require_highlight.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", require_highlight.OPT_FOCUS_VISIBLE),
+			className: require_text_truncate.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", require_text_truncate.OPT_FOCUS_VISIBLE),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
-				className: require_highlight.cn("truncate", sizeStyles$1[size], value ? "text-text-primary" : "text-text-tertiary italic"),
+				className: require_text_truncate.cn("truncate", sizeStyles$1[size], value ? "text-text-primary" : "text-text-tertiary italic"),
 				children: value || emptyText
 			}), !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, {
 				"aria-hidden": "true",
-				className: require_highlight.cn("text-text-tertiary size-3.5 shrink-0 opacity-0 transition-opacity", "group-hover:opacity-100 group-focus-visible:opacity-100")
+				className: require_text_truncate.cn("text-text-tertiary size-3.5 shrink-0 opacity-0 transition-opacity", "group-hover:opacity-100 group-focus-visible:opacity-100")
 			})]
 		}), suffix]
 	});
@@ -4437,11 +4238,11 @@ function KeyPadMenu({ items, label, selection = "single", value, onValueChange,
 		onValueChange === null || onValueChange === void 0 || onValueChange(id);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
-		className: require_highlight.cn("min-w-0", className),
+		className: require_text_truncate.cn("min-w-0", className),
 		"data-opt-id": "ZZG2R",
 		"data-opt-slug": "key-pad-menu.KeyPadMenu",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
-			className: require_highlight.cn("text-text-primary mb-element text-sm font-medium", hideLabel && "sr-only"),
+			className: require_text_truncate.cn("text-text-primary mb-element text-sm font-medium", hideLabel && "sr-only"),
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "gap-element grid",
@@ -4449,7 +4250,7 @@ function KeyPadMenu({ items, label, selection = "single", value, onValueChange,
 			children: items.map((item) => {
 				const isSelected = selected.has(item.id);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-					className: require_highlight.cn("relative flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg text-center transition-colors", require_highlight.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"),
+					className: require_text_truncate.cn("relative flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg text-center transition-colors", require_text_truncate.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__ */ (0, react_jsx_runtime.jsx)("input", {
 							type: selection === "single" ? "radio" : "checkbox",
@@ -4458,12 +4259,12 @@ function KeyPadMenu({ items, label, selection = "single", value, onValueChange,
 							checked: isSelected,
 							disabled: item.disabled,
 							onChange: () => handleChange(item.id),
-							className: require_highlight.cn("sr-only", require_highlight.OPT_FOCUS_VISIBLE)
+							className: require_text_truncate.cn("sr-only", require_text_truncate.OPT_FOCUS_VISIBLE)
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							"data-keypad-icon": "",
 							"aria-hidden": "true",
-							className: require_highlight.cn("flex items-center justify-center", isSelected ? "text-accent" : "text-text-tertiary"),
+							className: require_text_truncate.cn("flex items-center justify-center", isSelected ? "text-accent" : "text-text-tertiary"),
 							children: item.icon
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -4599,6 +4400,12 @@ Object.defineProperty(exports, "Container", {
 		return Container;
 	}
 });
+Object.defineProperty(exports, "DescriptionList", {
+	enumerable: true,
+	get: function() {
+		return DescriptionList;
+	}
+});
 Object.defineProperty(exports, "DrawerClose", {
 	enumerable: true,
 	get: function() {
@@ -4677,6 +4484,12 @@ Object.defineProperty(exports, "Heading", {
 		return Heading;
 	}
 });
+Object.defineProperty(exports, "Identity", {
+	enumerable: true,
+	get: function() {
+		return Identity;
+	}
+});
 Object.defineProperty(exports, "InlineEdit", {
 	enumerable: true,
 	get: function() {
@@ -4707,12 +4520,6 @@ Object.defineProperty(exports, "Logo", {
 		return Logo;
 	}
 });
-Object.defineProperty(exports, "Meter", {
-	enumerable: true,
-	get: function() {
-		return Meter;
-	}
-});
 Object.defineProperty(exports, "OtpField", {
 	enumerable: true,
 	get: function() {
@@ -4815,36 +4622,6 @@ Object.defineProperty(exports, "ShaderSurface", {
 		return ShaderSurface;
 	}
 });
-Object.defineProperty(exports, "Skeleton", {
-	enumerable: true,
-	get: function() {
-		return Skeleton;
-	}
-});
-Object.defineProperty(exports, "SkeletonAvatar", {
-	enumerable: true,
-	get: function() {
-		return SkeletonAvatar;
-	}
-});
-Object.defineProperty(exports, "SkeletonCard", {
-	enumerable: true,
-	get: function() {
-		return SkeletonCard;
-	}
-});
-Object.defineProperty(exports, "SkeletonTable", {
-	enumerable: true,
-	get: function() {
-		return SkeletonTable;
-	}
-});
-Object.defineProperty(exports, "SkeletonText", {
-	enumerable: true,
-	get: function() {
-		return SkeletonText;
-	}
-});
 Object.defineProperty(exports, "StepBuilder", {
 	enumerable: true,
 	get: function() {
@@ -4869,12 +4646,6 @@ Object.defineProperty(exports, "Text", {
 		return Text;
 	}
 });
-Object.defineProperty(exports, "TextTruncate", {
-	enumerable: true,
-	get: function() {
-		return TextTruncate;
-	}
-});
 Object.defineProperty(exports, "Textarea", {
 	enumerable: true,
 	get: function() {
@@ -4905,30 +4676,6 @@ Object.defineProperty(exports, "createBlock", {
 		return createBlock;
 	}
 });
-Object.defineProperty(exports, "formatOptDateTime", {
-	enumerable: true,
-	get: function() {
-		return formatOptDateTime;
-	}
-});
-Object.defineProperty(exports, "formatOptNumber", {
-	enumerable: true,
-	get: function() {
-		return formatOptNumber;
-	}
-});
-Object.defineProperty(exports, "formatOptShortDate", {
-	enumerable: true,
-	get: function() {
-		return formatOptShortDate;
-	}
-});
-Object.defineProperty(exports, "formatOptTime", {
-	enumerable: true,
-	get: function() {
-		return formatOptTime;
-	}
-});
 Object.defineProperty(exports, "getShaderFragment", {
 	enumerable: true,
 	get: function() {