@botiverse/raft-ui 0.20.0 → 0.21.0

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 { 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";
@@ -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.20.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",