@botiverse/raft-ui 0.19.0 → 0.21.0

package/dist/wip.d.mts

@@ -1,5 +1,5 @@
-import { C as MessageQuotedPreviewAuthorDelegatedBy, Hi as DialogTitleProps, Ki as ButtonProps, Si as DialogClose, Ti as DialogContentProps, Ui as DialogTrigger, Xi as StyledProps, Yi as DataAttributes, a as MessageListJumpPillDismissProps, c as MessageListJumpPillProps, cn as MessageItemDelegatedAvatar, dn as MessageItemDelegatedByButton, fn as MessageItemDelegatedByButtonProps, hn as MessageItemDelegatedByProps, i as MessageListJumpPillDismiss, ln as MessageItemDelegatedAvatarProps, mn as MessageItemDelegatedByNameProps, n as MessageListJumpControlsProps, o as MessageListJumpPillGroup, pn as MessageItemDelegatedByName, r as MessageListJumpPill, s as MessageListJumpPillGroupProps, t as MessageListJumpControls, un as MessageItemDelegatedBy, w as MessageQuotedPreviewAuthorDelegatedByProps, yi as Dialog } from "./index-DsVVBZ5T.mjs";
-import { CSSProperties, ComponentPropsWithRef, PointerEvent, ReactNode } from "react";
+import { Ai as DialogContentProps, C as MessageQuotedPreviewAuthorDelegatedBy, Di as DialogClose, Ji as DialogTrigger, Si as TextLinkProps, Zi as ButtonProps, _n as MessageItemDelegatedByProps, a as MessageListJumpPillDismissProps, c as MessageListJumpPillProps, dn as MessageItemDelegatedAvatarProps, fn as MessageItemDelegatedBy, gn as MessageItemDelegatedByNameProps, hn as MessageItemDelegatedByName, i as MessageListJumpPillDismiss, mn as MessageItemDelegatedByButtonProps, n as MessageListJumpControlsProps, na as DataAttributes, o as MessageListJumpPillGroup, pn as MessageItemDelegatedByButton, qi as DialogTitleProps, r as MessageListJumpPill, ra as StyledProps, s as MessageListJumpPillGroupProps, t as MessageListJumpControls, un as MessageItemDelegatedAvatar, w as MessageQuotedPreviewAuthorDelegatedByProps, wi as Dialog } from "./index-CP05_pvu.mjs";
+import { CSSProperties, ComponentProps, ComponentPropsWithRef, PointerEvent, ReactNode, RefObject } from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
 import { Combobox } from "@base-ui/react/combobox";
@@ -282,4 +282,101 @@ type HoldThenMoveOptions = {
  */
 export declare function useHoldThenMoveTouchSensor({ holdMs, distance, tolerance }?: HoldThenMoveOptions): import("@dnd-kit/core").SensorDescriptor<TouchSensorOptions>;
 //#endregion
-export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, type CommentCardMetaProps, type CommentCardProps, type CommentCardQuoteProps, type CommentCardTriggerProps, type CommentEntryAuthorProps, type CommentEntryBodyProps, type CommentEntryHeaderProps, type CommentEntryProps, type CommentEntryTimeProps, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, type CommentMarkerProps, type HoldThenMoveOptions, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, type UseCommentMarginFitsOptions };
+//#region src/components/ellipsis/ellipsis.d.ts
+/** What a function passed as `after` receives. */
+interface EllipsisState {
+  /** The text is cut off right now. `false` while it is expanded. */
+  truncated: boolean;
+  expanded: boolean;
+  /** Expands the text, or collapses it again. */
+  toggle: () => void;
+}
+interface EllipsisProps extends Omit<ComponentProps<"span">, "children"> {
+  /**
+   * The text. Inline content only (text, links, code, mentions): a block
+   * child such as `<p>` or `<div>` breaks the clamp.
+   */
+  children: ReactNode;
+  /** How many lines the text may take before it is cut. */
+  lines?: number;
+  /**
+   * The tooltip shown on hover, and on keyboard focus when the text is a
+   * button, while the text is cut: `true` shows the children, a node shows
+   * that node, `false` shows none. It never opens on a text that fits, or on
+   * a touch screen.
+   */
+  tooltip?: ReactNode;
+  /**
+   * Shown after the text, at the end of the last visible line, only while the
+   * text is cut or expanded; it takes no room while the text fits. A function
+   * receives the state, for an expand control (`EllipsisToggle`).
+   */
+  after?: ReactNode | ((state: EllipsisState) => ReactNode);
+  /** Whether the whole text shows (controlled). */
+  expanded?: boolean;
+  /** Whether the whole text shows at first (uncontrolled). */
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  /**
+   * Makes the cut text itself the button that expands it and collapses it
+   * again, for a keyboard and a touch screen as well as a pointer. Only plain
+   * text with no `after` takes it: a text with a link or another control
+   * inside stays text, and so does one with an `after`, whose control is the
+   * button instead (a button can't hold another).
+   */
+  expandOnClick?: boolean;
+}
+export declare function Ellipsis({ children, lines, tooltip, after, expanded: expandedProp, defaultExpanded, onExpandedChange, expandOnClick, className, style, ...props }: EllipsisProps): import("react").JSX.Element;
+type EllipsisToggleProps = Omit<TextLinkProps, "aria-expanded" | "aria-controls">;
+/**
+ * The control that expands an Ellipsis and collapses it again, for its
+ * `after`. A real button, with `aria-expanded` and `aria-controls` pointing
+ * at the text. The label is the caller's: "Show More" / "Show Less".
+ */
+export declare function EllipsisToggle({ onClick, ...props }: EllipsisToggleProps): import("react").JSX.Element;
+//#endregion
+//#region src/lib/truncation.d.ts
+/**
+ * Whether a text is cut off, and when to look again: the one way raft-ui
+ * measures truncation (Ellipsis, `useTruncated`, and the `title` that
+ * fields give a cut value).
+ *
+ * The truncation itself is CSS (`text-overflow: ellipsis`, `line-clamp`);
+ * this module only answers "did it cut?".
+ *
+ * - It compares fractional geometry with a 0.5px tolerance. `scrollWidth` and
+ *   `clientWidth` are whole pixels, so at some widths (and page zooms) a text
+ *   that shows an ellipsis reports that it fits.
+ * - Every measured element on a page shares one ResizeObserver, one
+ *   MutationObserver and one font-loading listener. A web font that finishes
+ *   loading widens the text without resizing its box, which no
+ *   ResizeObserver would notice.
+ * - Requests are batched into one animation frame, before paint: every
+ *   target is isolated (an Ellipsis hides its `after` so the text is measured
+ *   alone), then every target is read, then restored, then every result is
+ *   committed in one synchronous React update. Reads never interleave with
+ *   writes, and a result shows in the same frame it was measured in. A
+ *   request made while a frame is handled is queued for the next one.
+ */
+/** `undefined`: not known yet, or the element has no box (hidden, not laid out). */
+type Truncation = boolean | undefined;
+//#endregion
+//#region src/lib/use-truncated.d.ts
+/**
+ * Whether the text in the element `ref` points at is cut off by its CSS
+ * (`truncate`, `line-clamp`, a fixed size with `overflow: hidden`): `true`,
+ * `false`, or `undefined` until it is measured or while it has no box.
+ *
+ * It measures fractional sizes with a 0.5px tolerance, past either inline
+ * edge and below the bottom edge, so it needs no line count. It measures again
+ * when the element changes size, when its text changes and when a web font
+ * finishes loading, in one batched frame for every measured element on the
+ * page (lib/truncation.ts), before that frame paints.
+ *
+ * The element is read when the component mounts: keep `ref` on one element
+ * for the component's life, or give the component a `key` that changes with
+ * the element.
+ */
+export declare function useTruncated(ref: RefObject<Element | null>): Truncation;
+//#endregion
+export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, type CommentCardMetaProps, type CommentCardProps, type CommentCardQuoteProps, type CommentCardTriggerProps, type CommentEntryAuthorProps, type CommentEntryBodyProps, type CommentEntryHeaderProps, type CommentEntryProps, type CommentEntryTimeProps, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, type CommentMarkerProps, type EllipsisProps, type EllipsisState, type EllipsisToggleProps, type HoldThenMoveOptions, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, type UseCommentMarginFitsOptions };

package/dist/wip.mjs

@@ -1,6 +1,6 @@
-import { Bt as useOverflowTitle, Hn as DialogTitle, Nn as DialogClose, Pn as DialogContent, Qn as useTheme, Un as DialogTrigger, Wn as Button$1, Zn as useThemeScopeProps, a as MessageListJumpPillDismiss, dt as MessageItemDelegatedBy, er as tv, ft as MessageItemDelegatedByButton, h as MessageQuotedPreviewAuthorDelegatedBy, i as MessageListJumpPill, jn as Dialog, o as MessageListJumpPillGroup, pt as MessageItemDelegatedByName, qn as defaultNativeButton, r as MessageListJumpControls, t as useHoldThenMoveTouchSensor, ut as MessageItemDelegatedAvatar } from "./touch-drag-CbWqiMlZ.mjs";
+import { An as Tooltip, Bn as DialogClose, Fn as TextLink, Gt as readNow, Ht as measureContent, Pn as TooltipTrigger, Rn as Dialog, Ut as measureElement, Vn as DialogContent, Vt as useOverflowTitle, Wt as observeTruncation, Xn as DialogTrigger, Yn as DialogTitle, Zn as Button$1, a as MessageListJumpPillDismiss, ar as useTheme, dt as MessageItemDelegatedAvatar, er as defaultNativeButton, ft as MessageItemDelegatedBy, h as MessageQuotedPreviewAuthorDelegatedBy, i as MessageListJumpPill, ir as useThemeScopeProps, jn as TooltipContent, mt as MessageItemDelegatedByName, o as MessageListJumpPillGroup, pt as MessageItemDelegatedByButton, r as MessageListJumpControls, sr as tv, t as useHoldThenMoveTouchSensor } from "./touch-drag-B7uLTWXe.mjs";
 import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
-import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -651,7 +651,7 @@ const comment = tv({
 		cardTrigger: [
 			"absolute -inset-px z-10 cursor-pointer",
 			"rounded-container border-0 bg-transparent p-0",
-			"hover:bg-fill-row-hover active:bg-fill-pressed",
+			"hover:bg-fill-subtle active:bg-fill-medium",
 			"outline-none focus-visible:shadow-focus"
 		],
 		cardQuote: ["sr-only"],
@@ -674,7 +674,7 @@ const comment = tv({
 			"rounded-chip border border-line-hairline py-0 ps-[3px] pe-1.5",
 			"font-mono text-mono-meta font-bold tabular-nums text-foreground",
 			"bg-layer-card [--avatar-group-surface:var(--layer-card)]",
-			"cursor-pointer hover:press-overlay active:press-overlay",
+			"cursor-pointer hover:overlay-medium active:overlay-medium",
 			"data-active:border-[1.5px] data-active:border-line-strong data-active:bg-brand-soft data-active:ps-[2.5px] data-active:pe-[5.5px]",
 			"data-popup-open:border-[1.5px] data-popup-open:border-line-strong data-popup-open:bg-brand-soft data-popup-open:ps-[2.5px] data-popup-open:pe-[5.5px]",
 			"data-active:[--avatar-group-surface:var(--brand-soft)] data-popup-open:[--avatar-group-surface:var(--brand-soft)]",
@@ -1123,4 +1123,348 @@ function useCommentMarginFits(element, { minWidth = 784 } = {}) {
 	return desktop && element !== null && width >= minWidth;
 }
 //#endregion
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor };
+//#region src/components/ellipsis/ellipsis.tsx
+const ellipsis = tv({
+	slots: {
+		root: ["group/ellipsis min-w-0 max-w-full"],
+		text: ["min-w-0"],
+		content: [],
+		spacer: ["float-end h-[calc(100%-1lh)] w-0", "data-hidden:hidden group-data-measuring/ellipsis:hidden"],
+		after: ["data-hidden:hidden group-data-measuring/ellipsis:hidden"]
+	},
+	variants: {
+		multiline: {
+			true: {
+				root: ["flex"],
+				text: ["flex-1", "wrap-break-word"],
+				after: ["float-end clear-end ps-1"]
+			},
+			false: {
+				root: ["inline-flex items-baseline gap-x-1 align-bottom"],
+				after: ["shrink-0"]
+			}
+		},
+		expanded: {
+			true: {},
+			false: {}
+		},
+		clickable: {
+			true: { text: ["cursor-pointer"] },
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			multiline: false,
+			expanded: false,
+			class: { text: ["truncate", "print:overflow-visible print:whitespace-normal"] }
+		},
+		{
+			multiline: false,
+			expanded: true,
+			class: { text: ["wrap-anywhere whitespace-normal"] }
+		},
+		{
+			multiline: true,
+			expanded: false,
+			class: { text: ["line-clamp-(--ellipsis-lines)", "print:line-clamp-none"] }
+		},
+		{
+			multiline: true,
+			expanded: true,
+			class: { text: ["line-clamp-none"] }
+		}
+	]
+});
+const EllipsisContext = createContext(null);
+const INTERACTIVE = "a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable='false']), [role='button'], [role='link']";
+const TOUCH_MEDIA_QUERY = "(hover: none), (pointer: coarse)";
+function isTouchScreen() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(TOUCH_MEDIA_QUERY).matches;
+}
+function contains(ref, target) {
+	return target instanceof Node && ref.current?.contains(target) === true;
+}
+function hasSelection(within) {
+	const selection = within.ownerDocument.defaultView?.getSelection();
+	return !!selection && !selection.isCollapsed && selection.anchorNode != null && within.contains(selection.anchorNode);
+}
+function useExpanded(expandedProp, defaultExpanded, onExpandedChange) {
+	const [expandedState, setExpandedState] = useState(defaultExpanded);
+	const expanded = expandedProp ?? expandedState;
+	return [expanded, useCallback(() => {
+		const next = !expanded;
+		if (expandedProp === void 0) setExpandedState(next);
+		onExpandedChange?.(next);
+	}, [
+		expanded,
+		expandedProp,
+		onExpandedChange
+	])];
+}
+/**
+* Registers the text with the shared measurer (lib/truncation.ts) and keeps
+* its answer: whether the text, alone, is cut, and whether it has a control
+* inside. While it is expanded the last collapsed answer is kept, so the
+* text and its control stay what they were until it collapses and is
+* measured again. `layout` names what remounts or reclamps the text.
+*/
+function useTruncation(expanded, layout, onNotTruncated) {
+	const rootRef = useRef(null);
+	const textRef = useRef(null);
+	const contentRef = useRef(null);
+	const afterRef = useRef(null);
+	const setTextRef = useCallback((node) => {
+		textRef.current = node;
+	}, []);
+	const [truncation, setTruncation] = useState(void 0);
+	const [interactive, setInteractive] = useState(false);
+	const expandedRef = useRef(expanded);
+	const targetRef = useRef(null);
+	const commit = useCallback((next) => {
+		setInteractive(contentRef.current?.querySelector(INTERACTIVE) != null);
+		if (expandedRef.current) return;
+		setTruncation(next);
+		if (next !== true) onNotTruncated();
+	}, [onNotTruncated]);
+	useLayoutEffect(() => {
+		expandedRef.current = expanded;
+		const root = rootRef.current;
+		const text = textRef.current;
+		const content = contentRef.current;
+		if (!root || !text || !content) return void 0;
+		const target = {
+			observe: () => [text, afterRef.current],
+			watch: () => content,
+			isolate: () => {
+				root.setAttribute("data-measuring", "");
+				return () => root.removeAttribute("data-measuring");
+			},
+			read: () => measureContent(text, content),
+			commit
+		};
+		targetRef.current = target;
+		return observeTruncation(target);
+	}, [
+		commit,
+		expanded,
+		layout
+	]);
+	return {
+		rootRef,
+		textRef,
+		setTextRef,
+		contentRef,
+		afterRef,
+		truncation,
+		interactive,
+		measureNow: useCallback(() => {
+			const target = targetRef.current;
+			if (!target) return void 0;
+			const next = readNow(target);
+			commit(next);
+			return next;
+		}, [commit])
+	};
+}
+/** The tooltip's `onOpenChange`: it opens only on a text measured as cut, now. */
+function useOpenWhenTruncated(setOpen, expanded, afterRef, measureNow) {
+	return useCallback((next, details) => {
+		if (!next) {
+			setOpen(false);
+			return;
+		}
+		if (isTouchScreen() || expanded) return;
+		if (contains(afterRef, details.event?.target)) return;
+		if (measureNow() === true) setOpen(true);
+	}, [
+		afterRef,
+		expanded,
+		measureNow,
+		setOpen
+	]);
+}
+/**
+* Makes the text the button that expands and collapses it, while
+* `clickable`. It stays one while expanded, `aria-expanded="true"`, so focus
+* stays on it and it collapses again the same way.
+*/
+function useExpandOnClick(clickable, expanded, toggle, textRef) {
+	const onClick = useCallback(() => {
+		if (!clickable) return;
+		if (textRef.current && hasSelection(textRef.current)) return;
+		toggle();
+	}, [
+		clickable,
+		textRef,
+		toggle
+	]);
+	const onKeyDown = useCallback((event) => {
+		if (!clickable || event.target !== event.currentTarget) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			toggle();
+		}
+	}, [clickable, toggle]);
+	if (!clickable) return {};
+	return {
+		role: "button",
+		tabIndex: 0,
+		"aria-expanded": expanded,
+		onClick,
+		onKeyDown
+	};
+}
+function useRootStyle(style, lines) {
+	return useMemo(() => lines > 1 ? {
+		...style,
+		["--ellipsis-lines"]: String(lines)
+	} : style, [style, lines]);
+}
+function Ellipsis({ children, lines = 1, tooltip = true, after, expanded: expandedProp, defaultExpanded = false, onExpandedChange, expandOnClick = false, className, style, ...props }) {
+	const textId = useId();
+	const [open, setOpen] = useState(false);
+	const closeTooltip = useCallback(() => setOpen(false), []);
+	const [expanded, toggle] = useExpanded(expandedProp, defaultExpanded, onExpandedChange);
+	const multiline = lines > 1;
+	const hasTooltip = tooltip !== false && tooltip != null;
+	const hasAfter = after != null;
+	const measured = useTruncation(expanded, `${lines} ${hasAfter} ${hasTooltip}`, closeTooltip);
+	const { rootRef, textRef, setTextRef, contentRef, afterRef, truncation } = measured;
+	const handleOpenChange = useOpenWhenTruncated(setOpen, expanded, afterRef, measured.measureNow);
+	const truncated = truncation === true && !expanded;
+	const clickable = expandOnClick && !hasAfter && !measured.interactive && (truncation === true || expanded);
+	const afterNode = typeof after === "function" ? after({
+		truncated,
+		expanded,
+		toggle
+	}) : after;
+	const afterHidden = !truncated && !expanded;
+	const slots = ellipsis({
+		multiline,
+		expanded,
+		clickable
+	});
+	const context = useMemo(() => ({
+		expanded,
+		toggle,
+		textId
+	}), [
+		expanded,
+		toggle,
+		textId
+	]);
+	const rootStyle = useRootStyle(style, lines);
+	const clickProps = useExpandOnClick(clickable, expanded, toggle, textRef);
+	const afterElement = hasAfter ? /* @__PURE__ */ jsx("span", {
+		ref: afterRef,
+		"data-slot": "ellipsis-after",
+		"data-hidden": afterHidden ? "" : void 0,
+		inert: afterHidden,
+		className: slots.after(),
+		onPointerEnter: closeTooltip,
+		children: afterNode
+	}) : null;
+	const floatingAfter = multiline && hasAfter;
+	const textChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		floatingAfter && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			"data-slot": "ellipsis-spacer",
+			"data-hidden": afterHidden ? "" : void 0,
+			className: slots.spacer()
+		}),
+		floatingAfter && afterElement,
+		/* @__PURE__ */ jsx("span", {
+			ref: contentRef,
+			"data-slot": "ellipsis-content",
+			className: slots.content(),
+			children
+		})
+	] });
+	const textProps = {
+		id: textId,
+		"data-slot": "ellipsis-text",
+		"data-truncated": truncated ? "" : void 0,
+		className: slots.text(),
+		...clickProps
+	};
+	const text = hasTooltip ? /* @__PURE__ */ jsxs(Tooltip, {
+		open: open && truncated,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			ref: setTextRef,
+			render: /* @__PURE__ */ jsx("span", {}),
+			...textProps,
+			className: slots.text({ class: "select-auto" }),
+			children: textChildren
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip === true ? children : tooltip })]
+	}) : /* @__PURE__ */ jsx("span", {
+		ref: setTextRef,
+		...textProps,
+		children: textChildren
+	});
+	return /* @__PURE__ */ jsx(EllipsisContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("span", {
+			ref: rootRef,
+			"data-slot": "ellipsis",
+			className: slots.root({ className }),
+			style: rootStyle,
+			...props,
+			children: [text, !multiline ? afterElement : null]
+		})
+	});
+}
+/**
+* The control that expands an Ellipsis and collapses it again, for its
+* `after`. A real button, with `aria-expanded` and `aria-controls` pointing
+* at the text. The label is the caller's: "Show More" / "Show Less".
+*/
+function EllipsisToggle({ onClick, ...props }) {
+	const context = useContext(EllipsisContext);
+	if (!context) throw new Error("EllipsisToggle must be inside an Ellipsis `after`.");
+	const { expanded, toggle, textId } = context;
+	const handleClick = useCallback((event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented) toggle();
+	}, [onClick, toggle]);
+	return /* @__PURE__ */ jsx(TextLink, {
+		"aria-expanded": expanded,
+		"aria-controls": textId,
+		onClick: handleClick,
+		...props
+	});
+}
+//#endregion
+//#region src/lib/use-truncated.ts
+/**
+* Whether the text in the element `ref` points at is cut off by its CSS
+* (`truncate`, `line-clamp`, a fixed size with `overflow: hidden`): `true`,
+* `false`, or `undefined` until it is measured or while it has no box.
+*
+* It measures fractional sizes with a 0.5px tolerance, past either inline
+* edge and below the bottom edge, so it needs no line count. It measures again
+* when the element changes size, when its text changes and when a web font
+* finishes loading, in one batched frame for every measured element on the
+* page (lib/truncation.ts), before that frame paints.
+*
+* The element is read when the component mounts: keep `ref` on one element
+* for the component's life, or give the component a `key` that changes with
+* the element.
+*/
+function useTruncated(ref) {
+	const [truncated, setTruncated] = useState(void 0);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return void 0;
+		return observeTruncation({
+			observe: () => [element],
+			watch: () => element,
+			read: () => measureElement(element),
+			commit: setTruncated
+		});
+	}, [ref]);
+	return truncated;
+}
+//#endregion
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, Ellipsis, EllipsisToggle, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor, useTruncated };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",
@@ -62,6 +62,7 @@
     "tailwind-variants": "^3.3.1"
   },
   "devDependencies": {
+    "@babel/parser": "^7.29.9",
     "@tailwindcss/vite": "^4.3.3",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/react": "^16.3.3",
@@ -82,9 +83,15 @@
     "vitest": "5.0.1"
   },
   "peerDependencies": {
+    "@babel/parser": "^7.29.9",
     "react": "^19",
     "react-dom": "^19"
   },
+  "peerDependenciesMeta": {
+    "@babel/parser": {
+      "optional": true
+    }
+  },
   "scripts": {
     "bench:virtual-list": "node bench/virtual-list/run.mjs",
     "build:tokens": "node scripts/build-tokens.mjs",