@reopt-ai/opt-ui 1.9.0 → 1.10.0

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

@@ -1,8 +1,8 @@
 "use client";
-const require_highlight = require("./highlight-CGcrYGMC.cjs");
+const require_text_truncate = require("./text-truncate-CxdzAnhS.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");
@@ -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$17);
 	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",
@@ -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$16);
 	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
@@ -281,11 +281,11 @@ const sizeStyles$8 = {
 	sm: "h-8 min-w-8 px-2 text-xs gap-1.5",
 	md: "h-10 min-w-10 px-3 text-sm gap-2"
 };
-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$15);
+	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$8[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$8);
+	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",
@@ -312,23 +312,23 @@ 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 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$14);
 	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$7);
+	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$4);
+	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$3);
+	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);
@@ -448,7 +448,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$13);
 	const isInteractive = selectable || !!onClick;
 	const handleClick = selectable ? (e) => {
 		onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
@@ -467,7 +467,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 +491,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$6);
+	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 +500,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$3);
+	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 +509,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$2);
+	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 +524,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 +533,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
@@ -578,9 +578,9 @@ 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$12);
 	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];
@@ -602,12 +602,12 @@ const Switch = (0, react.forwardRef)((_ref, ref) => {
 		onClick
 	]);
 	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": "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({
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 				ref,
 				type: "button",
 				role: "switch",
@@ -616,24 +616,24 @@ const Switch = (0, react.forwardRef)((_ref, ref) => {
 				"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),
+				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_highlight.getDescribedBy(switchId, error, hintText),
+				"aria-describedby": require_text_truncate.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", {
+			}, 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_highlight.cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
-					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.RequiredMark, {})]
+					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_highlight.cn("text-text-tertiary text-sm", disabled && "opacity-50"),
+					className: require_text_truncate.cn("text-text-tertiary text-sm", disabled && "opacity-50"),
 					children: hintText
 				})]
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FieldMessages, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldMessages, {
 			id: switchId,
 			error
 		})]
@@ -661,9 +661,9 @@ const variantStyles$2 = {
 };
 /** 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({
+	let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$11);
+	const baseClass = require_text_truncate.cn("bg-bg-subtle", animated && "animate-pulse", variantStyles$2[variant], className);
+	const computedStyle = require_text_truncate._objectSpread2({
 		width: typeof width === "number" ? `${width}px` : width,
 		height: typeof height === "number" ? `${height}px` : height
 	}, style);
@@ -673,15 +673,15 @@ function Skeleton(_ref) {
 		"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"),
+		children: [Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2({
+			className: require_text_truncate.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({
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 		className: baseClass,
 		style: computedStyle,
 		role: "status",
@@ -697,8 +697,8 @@ function Skeleton(_ref) {
 }
 /** 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({
+	let { lines = 3, className } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$5);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 		variant: "text",
 		lines,
 		className
@@ -709,8 +709,8 @@ function SkeletonText(_ref2) {
 }
 /** 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({
+	let { size = 40, className } = _ref3, props = require_text_truncate._objectWithoutProperties(_ref3, _excluded3$2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
 		variant: "circular",
 		width: size,
 		height: size,
@@ -722,8 +722,8 @@ function SkeletonAvatar(_ref3) {
 }
 /** 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), {}, {
+	let { className } = _ref4, props = require_text_truncate._objectWithoutProperties(_ref4, _excluded4$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn("gap-group flex flex-col", className) }, props), {}, {
 		"data-opt-id": "34V5D",
 		"data-opt-slug": "skeleton.SkeletonCard",
 		children: [
@@ -745,7 +745,7 @@ function SkeletonCard(_ref4) {
 /** 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),
+		className: require_text_truncate.cn("gap-element flex flex-col", className),
 		role: "status",
 		"aria-label": "Loading table",
 		"data-opt-id": "3KEDN",
@@ -788,7 +788,7 @@ const _excluded$10 = [
 	"id",
 	"rows"
 ];
-const textareaSizeStyles = require_highlight.OPT_TEXTAREA_SIZE;
+const textareaSizeStyles = require_text_truncate.OPT_TEXTAREA_SIZE;
 const resizeStyles = {
 	none: "resize-none",
 	vertical: "resize-y",
@@ -797,29 +797,29 @@ const resizeStyles = {
 };
 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);
+	let { label, error, hint, fullWidth = false, required, resize = "vertical", size = "md", className, id, rows = 4 } = _ref, props = require_text_truncate._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 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_highlight.cn("flex flex-col gap-1.5", fullWidth && "w-full"),
+		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_highlight.RequiredMark, {})]
+				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.RequiredMark, {})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", require_highlight._objectSpread2({
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", require_text_truncate._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),
+				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_highlight.getDescribedBy(textareaId, error, hint)
+				"aria-describedby": require_text_truncate.getDescribedBy(textareaId, error, hint)
 			}, props)),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_highlight.FieldMessages, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.FieldMessages, {
 				id: textareaId,
 				error,
 				hint
@@ -932,7 +932,7 @@ function getColorFromName(name) {
 /** 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);
+	let { src, srcSet, sizes, crossOrigin, referrerPolicy, alt, name, size = "md", fallback, status, className, onLoadingStatusChange } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$9);
 	const loadingStatus = useImageLoadingStatus(src, {
 		srcSet,
 		sizes,
@@ -970,33 +970,33 @@ function Avatar(_ref) {
 		"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_highlight._objectSpread2(require_highlight._objectSpread2({
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", require_text_truncate._objectSpread2(require_text_truncate._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)
+		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_highlight.cn("border-surface absolute right-0 bottom-0 rounded-full", statusStyles[status], statusSizeStyles[size]),
+			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_highlight._objectWithoutProperties(_ref5, _excluded2$4);
+	let { max = 4, size = "md", children, className } = _ref5, props = require_text_truncate._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), {}, {
+	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_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]),
+			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]
 		})]
 	}));
@@ -1049,10 +1049,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$8);
 	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 +1065,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$5[size]),
 			role: "progressbar",
 			"aria-valuenow": progress === null || progress === void 0 ? void 0 : progress.clampedValue,
 			"aria-valuemin": progress ? 0 : void 0,
@@ -1073,7 +1073,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$1[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 +1088,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 +1106,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 +1131,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,
@@ -1175,10 +1175,10 @@ const variantStyles = {
 * 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);
+	let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = require_text_truncate._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), {}, {
+	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": "G01TE",
 		"data-opt-slug": "meter.Meter",
 		children: [(showValue || label) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1196,9 +1196,9 @@ function Meter(_ref) {
 			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]),
+			className: require_text_truncate.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]),
+				className: require_text_truncate.cn("h-full rounded-full transition-all duration-300 ease-out", variantStyles[variant]),
 				style: { width: `${percentage}%` }
 			})
 		})]
@@ -1242,7 +1242,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 +1253,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 +1266,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 +1286,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 +1295,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 +1311,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 +1326,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 +1334,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 +1350,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,
@@ -1526,12 +1526,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 +1545,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 +1573,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 +1583,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 +1592,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 +1603,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 +1623,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 +1636,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 +1649,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 +1661,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 +1681,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 +1694,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 +1716,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,14 +1726,14 @@ 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"),
+						className: require_text_truncate.cn("text-text-secondary", "text-sm"),
 						children: [formatOptNumber(previewCount), " matches"]
 					})]
 				})
@@ -1748,35 +1748,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 +1824,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 +1839,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 +1855,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 +1873,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 +1895,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 +1925,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 +1938,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 +1974,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 +1985,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 +2006,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 +2022,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 +2051,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 +2071,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 +2084,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 +2125,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 +2139,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 +2155,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 +2190,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 +2264,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 +2280,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 +2342,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 +2356,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 +2464,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 +3638,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 +3673,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 +3681,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 +3715,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 +3725,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 +3756,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 +3777,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 +3791,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 +3817,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 +3873,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 +3889,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 +3906,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 +3915,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 +4039,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 +4072,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 +4096,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 +4150,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 +4201,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 +4219,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 +4233,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 +4244,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 +4253,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 +4261,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 +4309,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 +4321,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 +4330,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", {
@@ -4869,12 +4741,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() {