@mastra/playground-ui 68.0.0 → 69.0.0-alpha.0

package/dist/components/ai/annotations.cjs.js

@@ -0,0 +1,836 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require('../../annotations.css');const require_utils = require("../../utils-uDc1ofX1.cjs");
+const require_Button = require("../../Button-BfICfyxD.cjs");
+const require_components_Textarea = require("../Textarea.cjs.js");
+const require_Txt = require("../../Txt-_00wWxTd.cjs");
+const require_popover = require("../../popover-D9AfJmla.cjs");
+const require_primitives_transitions = require("../../primitives/transitions.cjs.js");
+const require_string = require("../../string-EyTazW-F.cjs");
+const require_primitives_floating = require("../../primitives/floating.cjs.js");
+const require_primitives_portal_container = require("../../primitives/portal-container.cjs.js");
+const require_primitives_raised_surface = require("../../primitives/raised-surface.cjs.js");
+const require_chat_shell_context = require("../../chat-shell-context-ONCslAGn.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let _base_ui_react_popover = require("@base-ui/react/popover");
+let nanoid = require("nanoid");
+// src/ds/components/ai/annotations/format-annotated-message.ts
+function normalizeAnnotationText(text) {
+	return text.replace(/\r\n?/g, "\n").split("\n").map((line) => line.trimEnd()).join("\n").replace(/\n{3,}/g, "\n\n").trim();
+}
+function formatListItem({ text, comment }, number) {
+	const marker = `${number}. `;
+	const pad = " ".repeat(marker.length);
+	const quote = `${marker}${text.split("\n").map((line) => line ? `> ${line}` : ">").join(`\n${pad}`)}`;
+	const note = comment ? normalizeAnnotationText(comment) : "";
+	if (!note) return quote;
+	return [
+		quote,
+		"",
+		...note.split("\n").map((line) => line ? `${pad}${line}` : "")
+	].join("\n");
+}
+var JOINS_LIST = /^(?:\s|\d{1,9}[.)](?:\s|$))/;
+/**
+* Labelled with the shortest run of slashes the message never holds, so no `[//]` the person wrote turns into
+* a link; that run stays far below CommonMark's 999-character label limit.
+*/
+function listEnd(message) {
+	const runs = new Set(Array.from(message.matchAll(/\/+/g), (match) => match[0].length));
+	let length = 2;
+	while (runs.has(length)) length += 1;
+	return `\n\n[${"/".repeat(length)}]: #\n\n`;
+}
+/**
+* The message the agent receives: the annotations as a numbered Markdown list, each holding its passage
+* as a blockquote and any comment on it, then what the person typed. The list keeps a comment on the
+* last passage apart from the typed message.
+*/
+function formatAnnotatedMessage(text, annotations) {
+	const passages = annotations.map((annotation) => ({
+		text: normalizeAnnotationText(annotation.text),
+		comment: annotation.comment
+	})).filter((annotation) => annotation.text);
+	if (passages.length === 0) return text;
+	const list = passages.map((passage, index) => formatListItem(passage, index + 1)).join("\n\n");
+	if (!text.trim()) return list;
+	if (!JOINS_LIST.test(text.replace(/^\s*\n/, ""))) return `${list}\n\n${text}`;
+	return `${list}${listEnd(list + text)}${text}`;
+}
+// src/ds/components/ai/annotations/chat-annotations.tsx
+var visibleComment = (annotation) => annotation.comment?.trim() || void 0;
+var ChatAnnotationsContext = (0, react.createContext)(void 0);
+var samePassage = (a, b) => a.element === b.element && a.start === b.start && a.end === b.end;
+/** Mount it below whatever remounts when the thread changes, so annotations stay with their thread. */
+function ChatAnnotationsProvider({ children }) {
+	const [annotations, setAnnotations] = (0, react.useState)([]);
+	const value = {
+		annotations,
+		addAnnotation: ({ text, source }) => {
+			const annotation = {
+				text: normalizeAnnotationText(text),
+				source
+			};
+			if (!annotation.text) return;
+			setAnnotations((current) => current.some((waiting) => samePassage(waiting.source, source)) ? current : [...current, {
+				id: (0, nanoid.nanoid)(),
+				...annotation
+			}]);
+		},
+		removeAnnotation: (id) => setAnnotations((current) => current.filter((annotation) => annotation.id !== id)),
+		setAnnotationComment: (id, comment) => setAnnotations((current) => current.map((annotation) => annotation.id === id ? {
+			...annotation,
+			comment
+		} : annotation)),
+		takeAnnotations: () => {
+			const taken = new Set(annotations.map((annotation) => annotation.id));
+			setAnnotations((current) => current.filter((annotation) => !taken.has(annotation.id)));
+			return annotations;
+		},
+		restoreAnnotations: (restored) => setAnnotations((current) => {
+			const kept = new Set(current.map((annotation) => annotation.id));
+			return [...restored.filter((annotation) => !kept.has(annotation.id)), ...current];
+		})
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatAnnotationsContext.Provider, {
+		value,
+		children
+	});
+}
+function useChatAnnotations() {
+	const value = (0, react.useContext)(ChatAnnotationsContext);
+	if (!value) throw new Error("useChatAnnotations must be used within a ChatAnnotationsProvider");
+	return value;
+}
+// src/ds/components/ai/annotations/annotation-number.tsx
+/** The square bottom-left corner is the bubble's tail: in the transcript it touches the end of its passage. */
+var annotationBubbleStyle = "inline-flex h-4.5 min-w-4.5 shrink-0 items-center justify-center gap-0.5 rounded-full rounded-bl-xs bg-info-indicator px-1.25 text-column leading-none text-background tabular-nums";
+function AnnotationNumber({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "annotation-number",
+		className: require_utils.cn(annotationBubbleStyle, className),
+		...props
+	});
+}
+// src/ds/components/ai/annotations/annotation-comment-card.tsx
+function AnnotationCommentCard({ annotation, number, commentRef, onCommentChange, onRemove, onDone }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "annotation-comment-card",
+		className: "flex flex-col gap-2.5",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationNumber, { children: number }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+						as: "span",
+						variant: "label",
+						className: "flex-1",
+						children: ["Annotation ", number]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						className: "-my-1 -me-1",
+						tooltip: `Remove annotation ${number}`,
+						onClick: onRemove,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("blockquote", {
+				className: "line-clamp-3 border-l-2 border-info-indicator ps-2.5 text-body-sm whitespace-pre-line text-muted-foreground",
+				children: annotation.text
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Textarea.Textarea, {
+				ref: commentRef,
+				"aria-label": `Comment on annotation ${number}`,
+				placeholder: "Add a comment",
+				rows: 3,
+				className: "min-h-18 resize-none",
+				value: annotation.comment ?? "",
+				onChange: (event) => onCommentChange(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+						event.preventDefault();
+						onDone();
+					}
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+					as: "span",
+					variant: "caption",
+					tone: "muted",
+					children: "Sent with your next message"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					type: "button",
+					size: "sm",
+					onClick: onDone,
+					children: "Done"
+				})]
+			})
+		]
+	});
+}
+// src/ds/components/ai/annotations/annotation-comment-popover.tsx
+function AnnotationCommentPopover({ card, annotation, number, onCommentChange, onRemove, onClose }) {
+	const commentRef = (0, react.useRef)(null);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.Popover, {
+		open: card.open,
+		onOpenChange: (next, { reason, event }) => {
+			const target = event instanceof FocusEvent ? event.relatedTarget : event.target;
+			const towardBubble = (reason === "outside-press" || reason === "focus-out") && target instanceof Node && card.anchor.contains(target);
+			if (!next && !towardBubble) onClose();
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverContent, {
+			anchor: card.anchor,
+			side: "top",
+			align: "start",
+			sideOffset: 8,
+			initialFocus: commentRef,
+			"aria-label": `Annotation ${number}`,
+			className: "w-80 max-w-[calc(100vw-2rem)] p-3",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationCommentCard, {
+				annotation,
+				number,
+				commentRef,
+				onCommentChange,
+				onRemove,
+				onDone: onClose
+			})
+		})
+	});
+}
+// src/ds/components/ai/annotations/annotation-marker.tsx
+/** Starts hidden: `AnnotationMarkers` shows it once the passage is laid out. */
+function AnnotationMarker({ ref, commented, number, active, expanded, onHoverStart, onHoverEnd, onToggle }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		ref,
+		type: "button",
+		"data-slot": "annotation-marker",
+		"data-active": active || void 0,
+		"data-commented": commented || void 0,
+		hidden: true,
+		"aria-label": commented ? `Annotation ${number}, with a comment` : `Annotation ${number}`,
+		"aria-expanded": expanded,
+		"aria-haspopup": "dialog",
+		className: require_utils.cn(annotationBubbleStyle, "pointer-events-auto absolute origin-bottom-left -translate-y-full cursor-pointer shadow-raised", "motion-safe:transition-[scale,background-color] motion-safe:duration-fast motion-safe:ease-out-custom", "hover:scale-115 hover:bg-info-bright data-[active]:scale-115 data-[active]:bg-info-bright", require_primitives_transitions.focusRing),
+		onPointerEnter: onHoverStart,
+		onPointerLeave: onHoverEnd,
+		onFocus: (event) => {
+			if (event.currentTarget.matches(":focus-visible")) onHoverStart();
+		},
+		onBlur: onHoverEnd,
+		onClick: (event) => onToggle(event.currentTarget),
+		children: [number, commented && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			className: "size-1 rounded-full bg-current"
+		})]
+	});
+}
+// src/ds/components/ai/annotations/annotatable-selection.ts
+/** Every `Message` marks its content with this slot, in Studio and Factory alike. */
+var ANNOTATABLE_SELECTOR = "[data-slot=\"message-content\"]";
+var visibleText = (value) => value.replace(/\s+/g, "");
+function rangeWithin(range, element) {
+	const within = element.ownerDocument.createRange();
+	within.selectNodeContents(element);
+	if (range.compareBoundaryPoints(Range.START_TO_START, within) > 0) within.setStart(range.startContainer, range.startOffset);
+	if (range.compareBoundaryPoints(Range.END_TO_END, within) < 0) within.setEnd(range.endContainer, range.endOffset);
+	return within;
+}
+var isOutermostMessage = (element) => !element.parentElement?.closest(ANNOTATABLE_SELECTOR);
+function findAnnotatablePart(container, range) {
+	if (!range.intersectsNode(container)) return void 0;
+	const selected = visibleText(range.toString());
+	if (!selected) return void 0;
+	const [part, other] = Array.from(container.querySelectorAll(ANNOTATABLE_SELECTOR)).filter((element) => range.intersectsNode(element) && isOutermostMessage(element)).map((element) => ({
+		element,
+		range: rangeWithin(range, element)
+	})).filter((part) => visibleText(part.range.toString()));
+	if (!part || other) return void 0;
+	return {
+		...part,
+		extendsPastContent: visibleText(part.range.toString()) !== selected
+	};
+}
+function isBackward(selection) {
+	const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
+	if (!anchorNode || !focusNode) return false;
+	const anchor = anchorNode.ownerDocument?.createRange();
+	if (!anchor) return false;
+	anchor.setStart(anchorNode, anchorOffset);
+	return anchor.comparePoint(focusNode, focusOffset) < 0;
+}
+function clampSelection(selection, part) {
+	const { startContainer, startOffset, endContainer, endOffset } = part.range;
+	if (isBackward(selection)) selection.setBaseAndExtent(endContainer, endOffset, startContainer, startOffset);
+	else selection.setBaseAndExtent(startContainer, startOffset, endContainer, endOffset);
+}
+var lineRects = (range) => Array.from(range.getClientRects()).filter((rect) => rect.width > 0 && rect.height > 0);
+function selectionAnchor(part) {
+	return {
+		getBoundingClientRect: () => lineRects(part.range)[0] ?? part.range.getBoundingClientRect(),
+		contextElement: part.element
+	};
+}
+var SURROUNDING_VISIBLE_CHARS = 16;
+function surroundings(content, { start, end }) {
+	return {
+		textBefore: visibleText(content.slice(0, start)).slice(-16),
+		textAfter: visibleText(content.slice(end)).slice(0, SURROUNDING_VISIBLE_CHARS)
+	};
+}
+function textOffset(element, node, offset) {
+	const before = element.ownerDocument.createRange();
+	before.selectNodeContents(element);
+	before.setEnd(node, offset);
+	return before.toString().length;
+}
+function annotationSource({ element, range }) {
+	const span = {
+		start: textOffset(element, range.startContainer, range.startOffset),
+		end: textOffset(element, range.endContainer, range.endOffset)
+	};
+	return {
+		element,
+		...span,
+		text: visibleText(range.toString()),
+		...surroundings(element.textContent ?? "", span)
+	};
+}
+function passagePattern(text) {
+	return new RegExp(Array.from(text, require_string.escapeRegExp).join("\\s*"), "g");
+}
+function locate(element, source) {
+	const content = element.textContent ?? "";
+	const surroundingsAgree = (span) => {
+		const now = surroundings(content, span);
+		return now.textBefore === source.textBefore || now.textAfter === source.textAfter;
+	};
+	const saved = {
+		start: source.start,
+		end: source.end
+	};
+	if (visibleText(content.slice(saved.start, saved.end)) === source.text && surroundingsAgree(saved)) return saved;
+	const copies = Array.from(content.matchAll(passagePattern(source.text)), (match) => ({
+		start: match.index,
+		end: match.index + match[0].length
+	}));
+	if (copies.length <= 1) return copies[0];
+	const distance = (copy) => Math.abs(copy.start - source.start);
+	return copies.filter(surroundingsAgree).toSorted((a, b) => distance(a) - distance(b))[0];
+}
+function rangeFromSource(source) {
+	const { element } = source;
+	if (!element.isConnected) return void 0;
+	const span = locate(element, source);
+	if (!span) return void 0;
+	const document = element.ownerDocument;
+	const range = document.createRange();
+	const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+	let seen = 0;
+	let started = false;
+	for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+		const length = node.textContent?.length ?? 0;
+		if (!started && span.start < seen + length) {
+			range.setStart(node, span.start - seen);
+			started = true;
+		}
+		if (started && span.end <= seen + length) {
+			range.setEnd(node, span.end - seen);
+			return range;
+		}
+		seen += length;
+	}
+}
+function passageEndRect(range) {
+	return lineRects(range).at(-1);
+}
+// src/ds/components/ai/annotations/annotation-highlights.ts
+/** Named in `annotation-highlights.css`. */
+var HIGHLIGHT = "chat-annotation";
+var ACTIVE_HIGHLIGHT = "chat-annotation-active";
+var paintedByTranscript = /* @__PURE__ */ new Map();
+function paintHighlights(transcriptId, ranges, active) {
+	if (typeof CSS === "undefined" || !("highlights" in CSS)) return;
+	if (ranges.length === 0) paintedByTranscript.delete(transcriptId);
+	else paintedByTranscript.set(transcriptId, {
+		ranges,
+		active
+	});
+	const painted = Array.from(paintedByTranscript.values());
+	const allRanges = painted.flatMap((entry) => entry.ranges);
+	const activeRanges = painted.flatMap((entry) => entry.active ? [entry.active] : []);
+	if (allRanges.length === 0) CSS.highlights.delete(HIGHLIGHT);
+	else CSS.highlights.set(HIGHLIGHT, new Highlight(...allRanges));
+	if (activeRanges.length === 0) {
+		CSS.highlights.delete(ACTIVE_HIGHLIGHT);
+		return;
+	}
+	const emphasis = new Highlight(...activeRanges);
+	emphasis.priority = 1;
+	CSS.highlights.set(ACTIVE_HIGHLIGHT, emphasis);
+}
+// src/ds/components/ai/annotations/use-annotation-placement.ts
+var BUBBLE_GAP_PX = 4;
+var TAIL_INSET_X_PX = 1;
+var TAIL_DROP_Y_PX = 7;
+/** Bubbles on one line sit side by side, in the order their passages end, inside the transcript. */
+function spreadLine(line, layerWidth) {
+	const pushedRight = [];
+	for (const bubble of line.toSorted((a, b) => a.left - b.left)) {
+		const previous = pushedRight.at(-1);
+		const left = previous ? Math.max(bubble.left, previous.left + previous.width + BUBBLE_GAP_PX) : bubble.left;
+		pushedRight.push({
+			...bubble,
+			left
+		});
+	}
+	const fitted = [];
+	for (const bubble of pushedRight.toReversed()) {
+		const next = fitted.at(-1);
+		const limit = next ? next.left - BUBBLE_GAP_PX : layerWidth;
+		fitted.push({
+			...bubble,
+			left: Math.min(bubble.left, limit - bubble.width)
+		});
+	}
+	return fitted;
+}
+function spreadBubbles(bubbles, layerWidth) {
+	const lines = /* @__PURE__ */ new Map();
+	for (const bubble of bubbles) {
+		const line = Math.round(bubble.top);
+		lines.set(line, [...lines.get(line) ?? [], bubble]);
+	}
+	return [...lines.values()].flatMap((line) => spreadLine(line, layerWidth));
+}
+function placedPassage(annotation, marker) {
+	const range = rangeFromSource(annotation.source);
+	if (!range) return void 0;
+	const end = passageEndRect(range);
+	if (!end) return void 0;
+	return {
+		id: annotation.id,
+		marker,
+		range,
+		end
+	};
+}
+function useAnnotationPlacement({ containerRef, annotations, emphasized }) {
+	const transcriptId = (0, react.useId)();
+	const layerRef = (0, react.useRef)(null);
+	const markersRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const tracking = annotations.length > 0;
+	const place = (0, react.useEffectEvent)(() => {
+		const layer = layerRef.current;
+		if (!layer) return;
+		const origin = layer.getBoundingClientRect();
+		const shown = [];
+		for (const annotation of annotations) {
+			const marker = markersRef.current.get(annotation.id);
+			if (!marker) continue;
+			const passage = placedPassage(annotation, marker);
+			marker.hidden = !passage;
+			if (passage) shown.push(passage);
+		}
+		const bubbles = shown.map(({ marker, end }) => ({
+			marker,
+			left: end.right - origin.left - TAIL_INSET_X_PX,
+			top: end.top - origin.top + TAIL_DROP_Y_PX,
+			width: marker.offsetWidth
+		}));
+		for (const { marker, left, top } of spreadBubbles(bubbles, origin.width)) {
+			marker.style.left = `${left}px`;
+			marker.style.top = `${top}px`;
+		}
+		paintHighlights(transcriptId, shown.map((passage) => passage.range), shown.find((passage) => passage.id === emphasized)?.range);
+	});
+	(0, react.useEffect)(() => {
+		place();
+	}, [annotations, emphasized]);
+	(0, react.useEffect)(() => {
+		const layer = layerRef.current;
+		const container = containerRef.current;
+		if (!tracking || !layer || !container) return;
+		let frame = 0;
+		const schedule = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => place());
+		};
+		const resizes = new ResizeObserver(schedule);
+		resizes.observe(layer);
+		const mutations = new MutationObserver(schedule);
+		mutations.observe(container, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+		container.addEventListener("scroll", schedule, {
+			capture: true,
+			passive: true
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+			resizes.disconnect();
+			mutations.disconnect();
+			container.removeEventListener("scroll", schedule, { capture: true });
+			paintHighlights(transcriptId, [], void 0);
+		};
+	}, [
+		tracking,
+		containerRef,
+		transcriptId
+	]);
+	const markerRef = (id) => (marker) => {
+		if (!marker) return;
+		markersRef.current.set(id, marker);
+		return () => {
+			markersRef.current.delete(id);
+		};
+	};
+	return {
+		layerRef,
+		markerRef
+	};
+}
+// src/ds/components/ai/annotations/annotation-markers.tsx
+function AnnotationMarkers({ containerRef, annotations, onCommentChange, onRemove }) {
+	const [hovered, setHovered] = (0, react.useState)();
+	const [card, setCard] = (0, react.useState)();
+	const cardIndex = card ? annotations.findIndex((annotation) => annotation.id === card.id) : -1;
+	const cardAnnotation = annotations[cardIndex];
+	const openId = card?.open ? card.id : void 0;
+	const emphasized = openId ?? hovered;
+	const { layerRef, markerRef } = useAnnotationPlacement({
+		containerRef,
+		annotations,
+		emphasized
+	});
+	const close = () => setCard((current) => current && {
+		...current,
+		open: false
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: layerRef,
+		"data-slot": "annotation-markers",
+		className: "pointer-events-none absolute inset-0 z-1",
+		children: [annotations.map((annotation, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationMarker, {
+			ref: markerRef(annotation.id),
+			number: index + 1,
+			commented: Boolean(visibleComment(annotation)),
+			active: annotation.id === emphasized,
+			expanded: annotation.id === openId,
+			onHoverStart: () => setHovered(annotation.id),
+			onHoverEnd: () => setHovered((current) => current === annotation.id ? void 0 : current),
+			onToggle: (anchor) => setCard((current) => current?.open && current.id === annotation.id ? {
+				...current,
+				open: false
+			} : {
+				id: annotation.id,
+				anchor,
+				open: true
+			})
+		}, annotation.id)), card && cardAnnotation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationCommentPopover, {
+			card,
+			annotation: cardAnnotation,
+			number: cardIndex + 1,
+			onCommentChange: (comment) => onCommentChange(cardAnnotation.id, comment),
+			onRemove: () => {
+				close();
+				onRemove(cardAnnotation.id);
+			},
+			onClose: close
+		})]
+	});
+}
+// src/ds/components/ai/annotations/use-annotation-selection.ts
+var CLOSED = { open: false };
+var closing = (state) => state.open ? {
+	...state,
+	open: false
+} : state;
+function singleRange(selection) {
+	if (!selection || selection.isCollapsed) return void 0;
+	if (selection.rangeCount !== 1) return void 0;
+	return selection.getRangeAt(0);
+}
+function useAnnotationSelection(containerRef, toolbarRef) {
+	const [state, setState] = (0, react.useState)(CLOSED);
+	const dismiss = () => setState(closing);
+	(0, react.useEffect)(() => {
+		let pressing = false;
+		let settleTimer;
+		const close = () => setState(closing);
+		const reportSelection = (pointerReleased) => {
+			const container = containerRef.current;
+			const selection = document.getSelection();
+			const range = singleRange(selection);
+			if (!container || !selection || !range) return close();
+			const part = findAnnotatablePart(container, range);
+			if (!part || part.extendsPastContent && !pointerReleased) return close();
+			if (part.extendsPastContent) clampSelection(selection, part);
+			const text = normalizeAnnotationText(selection.toString());
+			if (!text) return close();
+			setState({
+				open: true,
+				selection: {
+					text,
+					source: annotationSource(part),
+					anchor: selectionAnchor(part)
+				}
+			});
+		};
+		const onPointerDown = () => {
+			pressing = true;
+		};
+		const endPress = () => {
+			pressing = false;
+		};
+		const onPointerUp = () => {
+			pressing = false;
+			clearTimeout(settleTimer);
+			settleTimer = setTimeout(() => reportSelection(true));
+		};
+		const onSelectionChange = () => {
+			if (toolbarRef.current?.contains(document.activeElement)) return;
+			if (pressing) close();
+			else reportSelection(false);
+		};
+		document.addEventListener("pointerdown", onPointerDown, true);
+		document.addEventListener("pointerup", onPointerUp, true);
+		document.addEventListener("pointercancel", endPress, true);
+		document.addEventListener("contextmenu", endPress, true);
+		document.addEventListener("selectionchange", onSelectionChange);
+		return () => {
+			clearTimeout(settleTimer);
+			document.removeEventListener("pointerdown", onPointerDown, true);
+			document.removeEventListener("pointerup", onPointerUp, true);
+			document.removeEventListener("pointercancel", endPress, true);
+			document.removeEventListener("contextmenu", endPress, true);
+			document.removeEventListener("selectionchange", onSelectionChange);
+		};
+	}, [containerRef, toolbarRef]);
+	return {
+		open: state.open,
+		selection: state.selection,
+		dismiss
+	};
+}
+// src/ds/components/ai/annotations/annotation-selection-toolbar.tsx
+var hasModifier = (event) => event.altKey || event.ctrlKey || event.metaKey;
+function AnnotationSelectionToolbar({ containerRef, onAnnotate }) {
+	const toolbarRef = (0, react.useRef)(null);
+	const { open, selection, dismiss } = useAnnotationSelection(containerRef, toolbarRef);
+	const portalContainer = require_primitives_portal_container.usePortalContainer();
+	const addRef = (0, react.useRef)(null);
+	const actionsRef = (0, react.useRef)(null);
+	const originRef = (0, react.useRef)(void 0);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const onKeyDown = (event) => {
+			const add = addRef.current;
+			const transcript = containerRef.current;
+			const { target } = event;
+			if (!add || !transcript || hasModifier(event)) return;
+			const holdsTranscript = target instanceof HTMLElement && target !== document.body && target.contains(transcript);
+			if (event.key !== "Tab" || event.shiftKey || !holdsTranscript) return;
+			add.focus();
+			if (document.activeElement !== add) {
+				actionsRef.current?.close();
+				return;
+			}
+			event.preventDefault();
+			originRef.current = target;
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown);
+			originRef.current = void 0;
+		};
+	}, [open, containerRef]);
+	const returnFocus = (event) => {
+		const origin = originRef.current;
+		if (!origin || hasModifier(event)) return;
+		if (event.key !== "Tab" && event.key !== "Escape") return;
+		if (event.key === "Tab") {
+			event.preventDefault();
+			actionsRef.current?.close();
+		}
+		origin.focus();
+	};
+	const addToChat = () => {
+		if (!selection) return;
+		document.getSelection()?.removeAllRanges();
+		dismiss();
+		onAnnotate({
+			text: selection.text,
+			source: selection.source
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Root, {
+		actionsRef,
+		open,
+		onOpenChange: (next) => {
+			if (!next) dismiss();
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Portal, {
+			container: portalContainer,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Positioner, {
+				anchor: selection?.anchor,
+				side: "top",
+				align: "start",
+				sideOffset: 8,
+				collisionPadding: 8,
+				positionMethod: require_primitives_floating.FLOATING_POSITION_METHOD,
+				className: "z-50 outline-none data-[anchor-hidden]:invisible",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Popup, {
+					ref: toolbarRef,
+					role: "toolbar",
+					"aria-label": "Selected text",
+					initialFocus: false,
+					finalFocus: false,
+					onMouseDown: (event) => event.preventDefault(),
+					"data-slot": "annotation-selection-toolbar",
+					className: require_utils.cn("flex origin-(--transform-origin) items-center rounded-full p-1 focus-visible:outline-hidden", require_primitives_raised_surface.overlaySurfaceStyle, "motion-safe:data-[closed]:animate-out motion-safe:data-[closed]:fade-out-0 motion-safe:data-[closed]:zoom-out-95", "motion-safe:data-[open]:animate-in motion-safe:data-[open]:fade-in-0 motion-safe:data-[open]:zoom-in-95"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+						ref: addRef,
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.TextQuote, {}),
+						onClick: addToChat,
+						onKeyDown: returnFocus,
+						children: "Add to chat"
+					})
+				})
+			})
+		})
+	});
+}
+// src/ds/components/ai/annotations/transcript-annotations.tsx
+/**
+* Everything annotations add to a transcript, wired to `ChatAnnotationsProvider`: Add to chat over
+* selected text, and the numbered comment bubbles of what was added. Render it inside
+* `ChatShell.Transcript`; adding an annotation focuses the `ComposerInput` in `ChatShell.Dock`.
+*/
+function TranscriptAnnotations() {
+	const { transcriptRef, composerInputRef } = require_chat_shell_context.useChatShellRegions();
+	const { annotations, addAnnotation, removeAnnotation, setAnnotationComment } = useChatAnnotations();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationMarkers, {
+		containerRef: transcriptRef,
+		annotations,
+		onRemove: removeAnnotation,
+		onCommentChange: setAnnotationComment
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationSelectionToolbar, {
+		containerRef: transcriptRef,
+		onAnnotate: (annotation) => {
+			addAnnotation(annotation);
+			composerInputRef.current?.focus();
+		}
+	})] });
+}
+// src/ds/components/ai/annotations/composer-annotation-list.tsx
+function revealSource({ source }) {
+	const target = rangeFromSource(source)?.startContainer.parentElement;
+	if (!target) return false;
+	target.scrollIntoView({
+		block: "center",
+		behavior: "smooth"
+	});
+	return true;
+}
+function ComposerAnnotationList({ annotations, onRemove }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "composer-annotations",
+		className: "flex px-2 pt-2",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.PopoverTrigger, {
+				type: "button",
+				size: "sm",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.TextQuote, { "aria-hidden": "true" }), require_string.pluralize(annotations.length, "annotation")]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.PopoverContent, {
+				align: "start",
+				side: "top",
+				className: "flex max-h-(--available-height) w-80 max-w-[calc(100vw-2rem)] flex-col gap-1 p-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+					"aria-label": "Annotations",
+					className: "flex min-h-0 flex-col overflow-y-auto",
+					children: annotations.map((annotation, index) => {
+						const comment = visibleComment(annotation);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+							className: "flex items-start gap-2 rounded-lg p-1.5",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationNumber, {
+									className: "mt-px",
+									children: index + 1
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex min-w-0 flex-1 flex-col gap-1",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										title: "Show in chat",
+										className: require_utils.cn("line-clamp-3 cursor-pointer rounded-xs text-left text-body-sm whitespace-pre-line text-muted-foreground hover:text-foreground", require_primitives_transitions.focusRing),
+										onClick: () => {
+											if (revealSource(annotation)) setOpen(false);
+										},
+										children: annotation.text
+									}), comment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "line-clamp-2 text-body-sm whitespace-pre-line text-foreground",
+										children: comment
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+									type: "button",
+									variant: "ghost",
+									size: "icon-sm",
+									className: "-my-1",
+									tooltip: `Remove annotation ${index + 1}`,
+									onClick: () => onRemove(annotation.id),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {})
+								})
+							]
+						}, annotation.id);
+					})
+				}), annotations.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					className: "shrink-0 self-end",
+					onClick: () => {
+						for (const annotation of annotations) onRemove(annotation.id);
+					},
+					children: "Remove all"
+				})]
+			})]
+		})
+	});
+}
+// src/ds/components/ai/annotations/composer-annotations.tsx
+/**
+* The waiting annotations as one chip at the top of `ComposerBox`, wired to
+* `ChatAnnotationsProvider`. Renders nothing while none is waiting.
+*/
+function ComposerAnnotations() {
+	const { annotations, removeAnnotation } = useChatAnnotations();
+	if (annotations.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComposerAnnotationList, {
+		annotations,
+		onRemove: removeAnnotation
+	});
+}
+exports.ChatAnnotationsProvider = ChatAnnotationsProvider;
+exports.ComposerAnnotations = ComposerAnnotations;
+exports.TranscriptAnnotations = TranscriptAnnotations;
+exports.formatAnnotatedMessage = formatAnnotatedMessage;
+exports.useChatAnnotations = useChatAnnotations;
+
+//# sourceMappingURL=annotations.cjs.js.map