@botiverse/raft-ui 0.20.0 → 0.21.1

package/dist/styles.css

@@ -382,6 +382,32 @@
      MessageAttachment. */
   --spacing-control-embedded: var(--control-embedded-size);
   --spacing-embedded-inset: var(--control-embedded-inset);
+  /* ─── Timeline rhythm ───────────────────────────────────────────────────────
+     Two steps between the lines of a conversation, measured from text to text
+     (design/foundations/spacing.md#timeline-rhythm): `timeline-message` (16px)
+     between turns, `timeline-section` (24px) at a boundary. Every row carries
+     `timeline-row` (4px) above and below its text, the reach of its highlight;
+     a turn's first row adds `timeline-turn` (8px, a transparent border the
+     highlight doesn't paint) above that, so it starts `timeline-lead` (12px)
+     above its text. A date line takes those insets back out of its own
+     padding, so it sits a section from the text on both sides.
+     A product uses only two of them, around its list: `timeline-start`
+     over the first row (a section less the lead every row brings, the
+     notice included) and `timeline-end` under the last row (a section less
+     its row inset); `turn` and `lead` stay inside the components.
+
+     Consumers: MessageItem, SystemMessage, MessageListDateDivider,
+     MessageListNotice, ThreadPanelReplySummary, and the product's list top
+     and end. */
+  --spacing-timeline-message: var(--timeline-gap-message);
+  --spacing-timeline-section: var(--timeline-gap-section);
+  --spacing-timeline-row: var(--timeline-row-inset);
+  --spacing-timeline-turn: calc(var(--timeline-gap-message) - 2 * var(--timeline-row-inset));
+  --spacing-timeline-lead: calc(var(--timeline-gap-message) - var(--timeline-row-inset));
+  --spacing-timeline-end: calc(var(--timeline-gap-section) - var(--timeline-row-inset));
+  --spacing-timeline-start: calc(
+    var(--timeline-gap-section) - var(--timeline-gap-message) + var(--timeline-row-inset)
+  );
   /* ─── Option metric axis ────────────────────────────────────────────────────
      An option in a popup list (a Select, Combobox or ComboboxSelect option, a
      menu item) is as tall as its content, with the same space above and below
@@ -486,6 +512,14 @@
   initial-value: 0px;
 }
 
+/* A reference chip's own type size, kept as a length so a smaller note inside
+   it can measure itself against the label (message-reference.recipe.ts). */
+@property --message-reference-em {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 *,
 ::before,
 ::after {
@@ -591,6 +625,39 @@ textarea:-webkit-autofill:disabled {
   background-image: linear-gradient(var(--fill-medium), var(--fill-medium));
 }
 
+/* A mark that leads a line of text: the icon or status light at the start of
+   a banner, a toast, a panel notice or a chip sits on the first line of its
+   text, centred on it, and stays there when the text wraps
+   (design/foundations/alignment.md#a-mark-that-leads-text). In Space
+   Grotesk's metrics the centre of the line box is the centre of the cap
+   height (to 0.006em); Chromium's rounding can lift the letters 0.5px, which
+   is left alone, as the alignment page explains. Only
+   the place is shared: each component keeps its own icon size and gap.
+
+   `lead-icon` centres an icon of any size on the line its parent sets, by
+   moving it half a line down and back up by half its own height. Set the
+   type on the row that holds the mark and the text, as PanelNotice does:
+   the mark reads `1lh` from it.
+
+   `lead-dot` places a status light the same way, in a box one line tall,
+   and keeps it at its one size beside text, 9px with a 1.5px ink edge
+   (status.md#sizes). It is kept at 9px inside components (Banner,
+   PanelNotice, ToastIcon, Badge, PanelActivity); when placing Status
+   yourself, don't pass a size. */
+@utility lead-icon {
+  flex-shrink: 0;
+  align-self: start;
+  translate: 0 calc(0.5lh - 50%);
+}
+@utility lead-dot {
+  --lead-dot: 9px;
+  flex-shrink: 0;
+  width: var(--lead-dot);
+  height: var(--lead-dot);
+  border-width: 1.5px;
+  margin-block: calc((1lh - var(--lead-dot)) / 2);
+}
+
 @utility press-overlay-sticker {
   background-image: linear-gradient(var(--sticker-medium), var(--sticker-medium));
 }

package/dist/tokens.json

@@ -2686,6 +2686,30 @@
       }
     }
   },
+  "timeline": {
+    "$type": "dimension",
+    "gap-message": {
+      "$value": {
+        "value": 16,
+        "unit": "px"
+      },
+      "$description": "The message step of a timeline: from the last line of one turn to the first line of the next (a sender line, an event line). Every row keeps the row inset above and below its text; the first row of a turn adds the rest above it."
+    },
+    "gap-section": {
+      "$value": {
+        "value": 24,
+        "unit": "px"
+      },
+      "$description": "The section step of a timeline, one step wider than the message step: either side of a date line, from the top of the list to the first line, and from the last line to the composer, so a boundary reads as one and the last message never sits on the composer."
+    },
+    "row-inset": {
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      },
+      "$description": "How far a timeline row's hover and selected highlight reaches above and below its text. Two rows of one turn sit two insets apart."
+    }
+  },
   "sticker": {
     "$type": "color",
     "ink": {

package/dist/wip.d.mts

@@ -1,5 +1,5 @@
-import { C as MessageQuotedPreviewAuthorDelegatedBy, Di as DialogContentProps, Gi as DialogTrigger, Ji as ButtonProps, Qi as StyledProps, Wi as DialogTitleProps, Zi as DataAttributes, _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, o as MessageListJumpPillGroup, pn as MessageItemDelegatedByButton, r as MessageListJumpPill, s as MessageListJumpPillGroupProps, t as MessageListJumpControls, un as MessageItemDelegatedAvatar, w as MessageQuotedPreviewAuthorDelegatedByProps, wi as DialogClose, xi as Dialog } from "./index-RFu5pOr7.mjs";
-import { CSSProperties, ComponentPropsWithRef, PointerEvent, ReactNode } from "react";
+import { Ar as SegmentedControlNav, E as MessageQuotedPreviewAuthorDelegatedByProps, Or as SegmentedControlLink, T as MessageQuotedPreviewAuthorDelegatedBy, Vi as Dialog, Wi as DialogClose, _n as MessageItemDelegatedByButton, a as MessageListJumpPillDismissProps, ba as StyledProps, bn as MessageItemDelegatedByNameProps, c as MessageListJumpPillProps, da as DialogTrigger, gn as MessageItemDelegatedBy, hn as MessageItemDelegatedAvatarProps, i as MessageListJumpPillDismiss, jr as SegmentedControlNavProps, kr as SegmentedControlLinkProps, ma as ButtonProps, mn as MessageItemDelegatedAvatar, n as MessageListJumpControlsProps, o as MessageListJumpPillGroup, qi as DialogContentProps, r as MessageListJumpPill, s as MessageListJumpPillGroupProps, t as MessageListJumpControls, ua as DialogTitleProps, vn as MessageItemDelegatedByButtonProps, xn as MessageItemDelegatedByProps, ya as DataAttributes, yn as MessageItemDelegatedByName, zi as TextLinkProps } from "./index-jTmbN7ov.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,113 @@ 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
+//#region src/components/inbox-item/inbox-item-leading-badge.d.ts
+type InboxItemLeadingBadgeProps = useRender.ComponentProps<"span">;
+/**
+ * A small badge in the bottom-right corner of `InboxItemLeading`, the corner a
+ * presence light takes: on a thread row, the thread mark, on the channel's
+ * `IconTile` or on the direct message's `Avatar` alike. Put it inside
+ * `InboxItemLeading`, after the tile or avatar, with one icon as its child;
+ * leave the avatar's `AvatarBadge` out, since the corner holds one mark. It
+ * is hidden from assistive technology unless given a `role`.
+ */
+export declare function InboxItemLeadingBadge({ className, render, ...props }: InboxItemLeadingBadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#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, type InboxItemLeadingBadgeProps, 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, SegmentedControlLink, type SegmentedControlLinkProps, SegmentedControlNav, type SegmentedControlNavProps, type UseCommentMarginFitsOptions };

package/dist/wip.mjs

@@ -1,6 +1,6 @@
-import { $n as useTheme, Fn as DialogContent, Gn as Button$1, Jn as defaultNativeButton, Mn as Dialog, Pn as DialogClose, Qn as useThemeScopeProps, Un as DialogTitle, Vt as useOverflowTitle, Wn as DialogTrigger, a as MessageListJumpPillDismiss, dt as MessageItemDelegatedAvatar, ft as MessageItemDelegatedBy, h as MessageQuotedPreviewAuthorDelegatedBy, i as MessageListJumpPill, mt as MessageItemDelegatedByName, o as MessageListJumpPillGroup, pt as MessageItemDelegatedByButton, r as MessageListJumpControls, t as useHoldThenMoveTouchSensor, tr as tv } from "./touch-drag-BA_Fxs2Z.mjs";
+import { $t as observeTruncation, Bn as TooltipContent, Jt as SegmentedControlLink, Qt as measureElement, Un as TooltipTrigger, Wn as TextLink, Xn as DialogContent, Xt as useOverflowTitle, Yn as DialogClose, Yt as SegmentedControlNav, Zt as measureContent, _ as MessageQuotedPreviewAuthorDelegatedBy, _t as MessageItemDelegatedByName, a as MessageListJumpPill, ar as DialogTrigger, en as readNow, gr as tv, gt as MessageItemDelegatedByButton, ht as MessageItemDelegatedBy, i as MessageListJumpControls, ir as DialogTitle, lr as defaultNativeButton, mr as useTheme, mt as MessageItemDelegatedAvatar, n as useHoldThenMoveTouchSensor, o as MessageListJumpPillDismiss, or as Button$1, pr as useThemeScopeProps, qn as Dialog, s as MessageListJumpPillGroup, t as inboxItem, zn as Tooltip } from "./inbox-item.recipe-DelZxRmY.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";
@@ -1123,4 +1123,371 @@ 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
+//#region src/components/inbox-item/inbox-item-leading-badge.tsx
+/**
+* A small badge in the bottom-right corner of `InboxItemLeading`, the corner a
+* presence light takes: on a thread row, the thread mark, on the channel's
+* `IconTile` or on the direct message's `Avatar` alike. Put it inside
+* `InboxItemLeading`, after the tile or avatar, with one icon as its child;
+* leave the avatar's `AvatarBadge` out, since the corner holds one mark. It
+* is hidden from assistive technology unless given a `role`.
+*/
+function InboxItemLeadingBadge({ className, render, ...props }) {
+	const { itemLeadingBadge } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-leading-badge",
+		"aria-hidden": props.role ? void 0 : true,
+		className: itemLeadingBadge({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#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, InboxItemLeadingBadge, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, SegmentedControlLink, SegmentedControlNav, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor, useTruncated };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "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",