@dxos/react-ui-feed 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.14.0

package/dist/lib/chunk-src.mjs

@@ -4,11 +4,15 @@ import { EditorState, StateEffect, StateField } from "@codemirror/state";
 import { Decoration, EditorView } from "@codemirror/view";
 import DOMPurify from "dompurify";
 import { createPortal } from "react-dom";
-import { Column, IconButton, Popover, ScrollArea, composable, composableProps, setRef, useThemeContext } from "@dxos/react-ui";
-import { createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, extendedMarkdown, xmlBlockDecoration, xmlFormatting, xmlTags } from "@dxos/ui-editor";
-import { createContext as createContext$1 } from "@radix-ui/react-context";
-import { ListModel, useFollow, useWindow } from "@dxos/react-ui-virtual";
+import * as Hooks from "@dxos/react-ui/Hooks";
 import { mx } from "@dxos/ui-theme";
+import { createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, extendedMarkdown, objectLinks, widgetHost, xmlBlockDecoration, xmlFormatting, xmlTags } from "@dxos/ui-editor";
+import { ListModel, useFollow, useWindow, windowRowProps } from "@dxos/react-ui-virtual";
+import * as Button from "@dxos/react-ui/Button";
+import * as Layout from "@dxos/react-ui/Layout";
+import * as ScrollArea from "@dxos/react-ui/ScrollArea";
+import * as Util from "@dxos/react-ui/Util";
+import * as Popover from "@dxos/react-ui/Popover";
 //#region src/hooks/useDecorations.tsx
 var DecorationsContext = createContext(/* @__PURE__ */ new Map());
 /**
@@ -255,6 +259,24 @@ var HtmlBlock = memo(({ html }) => {
 });
 HtmlBlock.displayName = "HtmlBlock";
 //#endregion
+//#region src/components/Block/diff-range.ts
+/**
+* The smallest single replacement that turns `before` into `after`: the common prefix and suffix
+* are left alone, so a document whose middle changed keeps the decorations either side of it.
+*/
+var diffRange = (before, after) => {
+	const limit = Math.min(before.length, after.length);
+	let prefix = 0;
+	while (prefix < limit && before.charCodeAt(prefix) === after.charCodeAt(prefix)) prefix++;
+	let suffix = 0;
+	while (suffix < limit - prefix && before.charCodeAt(before.length - 1 - suffix) === after.charCodeAt(after.length - 1 - suffix)) suffix++;
+	return {
+		from: prefix,
+		to: before.length - suffix,
+		insert: after.slice(prefix, after.length - suffix)
+	};
+};
+//#endregion
 //#region src/components/Block/extensions.ts
 /**
 * The extension set one item's document is built from.
@@ -269,11 +291,14 @@ HtmlBlock.displayName = "HtmlBlock";
 * Extensions are descriptors, not instances: a `StateField` or `ViewPlugin` in a shared array is
 * still instantiated per view, so sharing changes nothing but the identity CodeMirror dedupes on.
 */
-var createBlockExtensions = ({ registry, editable = false, themeMode = "light", setWidgets } = {}) => [...sharedExtensions(registry, editable, themeMode), ...registry ? [xmlTags({
-	registry,
-	setWidgets: setWidgets ?? (() => {}),
-	bookmarks: ["prompt"]
-})] : []];
+var createBlockExtensions = ({ registry, objectImage, editable = false, themeMode = "light", setWidgets } = {}) => [...sharedExtensions(registry, editable, themeMode), ...registry ? [
+	widgetHost({
+		setWidgets,
+		bookmarks: ["prompt"]
+	}),
+	xmlTags({ registry }),
+	objectLinks({ image: objectImage })
+] : []];
 /** Registries are compared by identity, so a feed's single registry is a single cache scope. */
 var NO_REGISTRY = {};
 var cache = /* @__PURE__ */ new WeakMap();
@@ -298,17 +323,32 @@ var build = (registry, editable, themeMode) => [
 		editable,
 		lineWrapping: true
 	}),
-	createThemeExtensions({ themeMode }),
+	createThemeExtensions({
+		themeMode,
+		syntaxHighlighting: true
+	}),
 	registry ? extendedMarkdown({ registry }) : createMarkdownExtensions(),
-	registry && xmlFormatting({ skip: ["prompt"] }),
+	registry && xmlFormatting({ skip: registry.prompt ? ["prompt"] : [] }),
 	decorateMarkdown(),
 	registry?.prompt && xmlBlockDecoration({
 		tag: "prompt",
 		hideTags: true
 	}),
 	highlights,
-	highlightTheme
+	highlightTheme,
+	blockScrollerTheme
 ].filter(Boolean);
+/**
+* An item's editor never scrolls on the block axis: it is auto-height and the feed around it is
+* what scrolls, so its content fits by construction.
+*
+* Left to `auto`, that invariant is broken transiently by any widget that changes height — a tool
+* block's disclosure animating open grows the content every frame while `requestMeasure` lands the
+* editor's new height a frame later, so the scroller is a frame short throughout and paints a
+* scrollbar for the length of the animation. The inline axis keeps `auto`; a wide payload still
+* scrolls.
+*/
+var blockScrollerTheme = EditorView.theme({ ".cm-scroller": { overflowY: "hidden" } });
 //#endregion
 //#region src/components/Block/MarkdownBlock.tsx
 /**
@@ -317,8 +357,8 @@ var build = (registry, editable, themeMode) => [
 * Each item owns a document, so streaming appends and per-message editing stay local — where a
 * single thread-wide document needs a cursor and a range table to know which message it is touching.
 */
-var MarkdownBlock = memo(({ text, stream, editable = false, registry, hits, onWidgetsChange }) => {
-	const { themeMode } = useThemeContext();
+var MarkdownBlock = memo(({ classNames, text, stream, editable = false, registry, objectImage, hits, onWidgetsChange }) => {
+	const themeMode = Hooks.useThemeMode();
 	const [view, setView] = useState(null);
 	const [widgets, setWidgets] = useState([]);
 	const rootRef = useRef(null);
@@ -327,6 +367,7 @@ var MarkdownBlock = memo(({ text, stream, editable = false, registry, hits, onWi
 	selectionGroupRef.current = selectionGroup;
 	const extensions = useMemo(() => [...createBlockExtensions({
 		registry,
+		objectImage,
 		editable,
 		themeMode,
 		setWidgets
@@ -335,19 +376,18 @@ var MarkdownBlock = memo(({ text, stream, editable = false, registry, hits, onWi
 	})], [
 		editable,
 		themeMode,
-		registry
+		registry,
+		objectImage
 	]);
 	const initialTextRef = useRef(text);
 	useLayoutEffect(() => {
 		const parent = rootRef.current;
 		if (!parent) return;
-		const instance = new EditorView({
-			parent,
-			state: EditorState.create({
-				doc: initialTextRef.current,
-				extensions
-			})
-		});
+		const instance = new EditorView({ state: EditorState.create({
+			doc: initialTextRef.current,
+			extensions
+		}) });
+		parent.appendChild(instance.dom);
 		const unregister = selectionGroupRef.current.register(instance);
 		setView(instance);
 		return () => {
@@ -368,11 +408,7 @@ var MarkdownBlock = memo(({ text, stream, editable = false, registry, hits, onWi
 			cancelAnimationFrame(dripRaf.current);
 			dripRaf.current = 0;
 			dispatchedRef.current = text;
-			view.dispatch({ changes: {
-				from: 0,
-				to: view.state.doc.length,
-				insert: text
-			} });
+			view.dispatch({ changes: diffRange(view.state.doc.toString(), text) });
 			return;
 		}
 		if (!stream) {
@@ -440,7 +476,10 @@ var MarkdownBlock = memo(({ text, stream, editable = false, registry, hits, onWi
 		for (const { root } of widgets) observer.observe(root);
 		return () => observer.disconnect();
 	}, [view, widgets]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", { ref: rootRef }), widgets.map(({ Component, root, id, props }) => /* @__PURE__ */ jsx("div", { children: createPortal(/* @__PURE__ */ jsx(Component, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: mx(classNames),
+		ref: rootRef
+	}), widgets.map(({ Component, root, id, props }) => /* @__PURE__ */ jsx("div", { children: createPortal(/* @__PURE__ */ jsx(Component, {
 		view: view ?? void 0,
 		...props
 	}), root) }, id))] });
@@ -833,16 +872,20 @@ var usePositionLog = () => {
 };
 //#endregion
 //#region src/components/MessageList/MessageList.tsx
-var [MessageListProvider, useMessageListContext] = createContext$1("MessageList");
+var MESSAGE_LIST_NAME = "MessageList";
+var [MessageListProvider, useMessageListContext] = Hooks.createContext(MESSAGE_LIST_NAME);
+var [MessageListItemProvider, useMessageListItemContext] = Hooks.createContext(MESSAGE_LIST_NAME);
 /**
 * The list's state and scroll controls, for parts that live outside the viewport — a toolbar's
 * find-next, a statusbar's range readout.
 */
 var useMessageList = (consumerName = "useMessageList") => {
-	const { range, currentIndex, navigation, mountedRows, mountedWidgets, jumps, shifts, breaks, resetShifts, model, scrollToIndex, scrollToBottom } = useMessageListContext(consumerName);
+	const { range, currentIndex, atEnd, following, navigation, mountedRows, mountedWidgets, jumps, shifts, breaks, resetShifts, model, scrollToIndex, scrollToBottom } = useMessageListContext(consumerName);
 	return {
 		range,
 		currentIndex,
+		atEnd,
+		following,
 		navigation,
 		mountedRows,
 		mountedWidgets,
@@ -864,7 +907,7 @@ var DEFAULT_ESTIMATE = 120;
 * Renders no DOM of its own, so a toolbar or statusbar that reads its state can sit outside the
 * scroll container — the scrolling part is `MessageList.Viewport`.
 */
-var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry, Chrome = DefaultChrome, Custom, debug, estimateSize = DEFAULT_ESTIMATE, stickyBottom = false, tailLines = 0, overscan = 8, onRangeChange, controllerRef }) => {
+var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry, objectImage, Chrome = DefaultChrome, Custom, debug, estimateSize = DEFAULT_ESTIMATE, stickyBottom = false, tailLines = 0, overscan = 8, onRangeChange, controllerRef }) => {
 	const widgetStore = useMemo(createWidgetStateStore, []);
 	const [viewport, setViewportState] = useState(null);
 	const scrollerRef = useRef(null);
@@ -935,6 +978,11 @@ var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry,
 	});
 	const changedAtRef = useRef(performance.now());
 	useEffect(() => model.subscribe(() => changedAtRef.current = performance.now()), [model]);
+	const revisions = useRef(/* @__PURE__ */ new Map());
+	useEffect(() => model.subscribe(({ updated }) => {
+		for (const id of updated ?? []) revisions.current.set(id, (revisions.current.get(id) ?? 0) + 1);
+	}), [model]);
+	const revisionOf = useCallback((id) => revisions.current.get(id) ?? 0, []);
 	const follow = useFollow({
 		scrollerRef,
 		placement,
@@ -1031,14 +1079,14 @@ var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry,
 	}, [viewport, navigation]);
 	const selectionGroup = useMemo(createSelectionGroup, []);
 	useEffect(() => {
-		setRef(controllerRef, {
+		Hooks.setRef(controllerRef, {
 			model,
 			scrollToBottom,
 			scrollToIndex,
 			navigation
 		});
 		return () => {
-			setRef(controllerRef, null);
+			Hooks.setRef(controllerRef, null);
 		};
 	}, [
 		controllerRef,
@@ -1055,11 +1103,14 @@ var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry,
 				model,
 				renderer,
 				registry,
+				objectImage,
 				Chrome,
 				Custom,
 				debug,
 				range,
 				currentIndex,
+				atEnd: follow.atEnd,
+				following: follow.following,
 				navigation,
 				mountedRows: mounted,
 				mountedWidgets,
@@ -1074,9 +1125,19 @@ var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry,
 				first,
 				last,
 				setViewport,
+				revisionOf,
 				scrollToIndex,
 				scrollToBottom,
-				children
+				children: /* @__PURE__ */ jsx(MessageListItemProvider, {
+					model,
+					renderer,
+					registry,
+					objectImage,
+					Custom,
+					debug,
+					reportWidgets,
+					children
+				})
 			})
 		})
 	});
@@ -1096,43 +1157,38 @@ var MESSAGE_LIST_VIEWPORT_NAME = "MessageList.Viewport";
 * with a toolbar.
 */
 var isEmptyContent = (content, hasCustomRenderer) => content.kind === "markdown" && !content.text.trim() || content.kind === "html" && !content.html.trim() || content.kind === "custom" && !hasCustomRenderer;
-var MessageListViewport = composable(({ autoHide, centered, native, padding, scrollbars, thin, gutter = "md", ...props }, forwardedRef) => {
-	const { model, renderer, Chrome, Custom, windowRef, offset, sizerExtent, first, last, setViewport } = useMessageListContext(MESSAGE_LIST_VIEWPORT_NAME);
+var MessageListViewport = Util.composable(({ autoHide, native, scrollbars, gutter = "md", overlay, ...props }, forwardedRef) => {
+	const { model, renderer, Chrome, Custom, windowRef, offset, sizerExtent, first, last, setViewport, revisionOf } = useMessageListContext(MESSAGE_LIST_VIEWPORT_NAME);
 	const { selectedIds, onSelect } = useItemSelectionValue();
 	const handleViewportRef = useCallback((element) => {
 		setViewport(element);
-		setRef(forwardedRef, element);
+		Hooks.setRef(forwardedRef, element);
 	}, [setViewport, forwardedRef]);
+	const onSelectRef = useRef(onSelect);
+	onSelectRef.current = onSelect;
+	const handleSelect = useCallback((id, additive) => onSelectRef.current?.(id, additive), []);
 	const rows = [];
 	for (let index = first; index <= last; index++) {
 		const message = model.at(index);
 		if (!message) continue;
-		const empty = isEmptyContent(renderer(message), Boolean(Custom));
-		rows.push(/* @__PURE__ */ jsx("div", {
-			"data-index": index,
-			"data-object-id": message.id,
-			children: !empty && /* @__PURE__ */ jsx(Column.Root, {
-				gutter,
-				children: /* @__PURE__ */ jsx(Column.Center, { children: /* @__PURE__ */ jsx(Chrome, {
-					message,
-					index,
-					selected: selectedIds?.has(message.id) ?? false,
-					onSelect: (id, additive) => onSelect?.(id, additive),
-					children: /* @__PURE__ */ jsx(MessageListItem, { message })
-				}) })
-			})
+		rows.push(/* @__PURE__ */ jsx(MessageListRow, {
+			message,
+			revision: revisionOf(message.id),
+			index,
+			empty: isEmptyContent(renderer(message), Boolean(Custom)),
+			selected: selectedIds?.has(message.id) ?? false,
+			gutter,
+			Chrome,
+			onSelect: handleSelect
 		}, message.id));
 	}
-	return /* @__PURE__ */ jsx(ScrollArea.Root, {
-		...composableProps(props),
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		...Util.composableProps(props),
 		orientation: "vertical",
 		autoHide,
-		centered,
 		native,
-		padding,
 		scrollbars,
-		thin,
-		children: /* @__PURE__ */ jsxs(ScrollArea.Viewport, {
+		children: [/* @__PURE__ */ jsxs(ScrollArea.Viewport, {
 			"data-testid": "feed.viewport",
 			style: {
 				position: "relative",
@@ -1150,23 +1206,45 @@ var MessageListViewport = composable(({ autoHide, centered, native, padding, scr
 				"data-testid": "feed.window",
 				children: rows
 			})]
-		})
+		}), overlay]
 	});
 });
 MessageListViewport.displayName = MESSAGE_LIST_VIEWPORT_NAME;
+/**
+* One mounted row. Memoized because the window re-renders on every scroll event and after every
+* measurement, and nothing in a row depends on where the window is — only on its own props.
+*/
+var MessageListRow = memo(({ message, index, empty, selected, gutter, Chrome, onSelect }) => /* @__PURE__ */ jsx("div", {
+	"data-object-id": message.id,
+	...windowRowProps(index, message.id),
+	children: !empty && /* @__PURE__ */ jsx(Layout.Container, {
+		gutter,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "dx-container-type-inline-size",
+			children: /* @__PURE__ */ jsx(Chrome, {
+				message,
+				index,
+				selected,
+				onSelect,
+				children: /* @__PURE__ */ jsx(MessageListItem, { message })
+			})
+		})
+	})
+}));
+MessageListRow.displayName = "MessageList.Row";
 var MESSAGE_LIST_ITEM_NAME = "MessageList.Item";
 /**
 * One message, rendered by the kind its renderer resolves. Exposed so a host can render a message
 * outside the scrolling window — a pinned message, a preview — through the same path.
 */
-var MessageListItem = composable(({ message, ...props }, forwardedRef) => {
-	const { model, renderer, registry, Custom, debug, reportWidgets } = useMessageListContext(MESSAGE_LIST_ITEM_NAME);
+var MessageListItem = Util.composable(({ message, ...props }, forwardedRef) => {
+	const { model, renderer, registry, objectImage, Custom, debug, reportWidgets } = useMessageListItemContext(MESSAGE_LIST_ITEM_NAME);
 	const content = renderer(message);
 	const decorations = useDecorations(message.id);
 	const hits = useMemo(() => decorations.length ? decorations.map(({ range }) => [range.offset, range.offset + range.length]) : void 0, [decorations]);
 	const handleWidgetsChange = useCallback((count) => reportWidgets(message.id, count), [reportWidgets, message.id]);
 	return /* @__PURE__ */ jsxs("div", {
-		...composableProps(props, { classNames: debug ? "outline outline-1 outline-dashed outline-primary-500/50 [&_.cm-content>*]:outline [&_.cm-content>*]:outline-1 [&_.cm-content>*]:outline-dashed [&_.cm-content>*]:outline-neutral-500/40" : void 0 }),
+		...Util.composableProps(props, { classNames: debug ? "outline outline-1 outline-dashed outline-primary-500/50 [&_.cm-content>*]:outline [&_.cm-content>*]:outline-1 [&_.cm-content>*]:outline-dashed [&_.cm-content>*]:outline-neutral-500/40" : void 0 }),
 		ref: forwardedRef,
 		children: [
 			content.kind === "markdown" && /* @__PURE__ */ jsx(WidgetScopeProvider, {
@@ -1175,6 +1253,7 @@ var MessageListItem = composable(({ message, ...props }, forwardedRef) => {
 					text: content.text,
 					stream: model.streamingId === message.id,
 					registry,
+					objectImage,
 					hits,
 					onWidgetsChange: handleWidgetsChange
 				})
@@ -1198,7 +1277,7 @@ var MESSAGE_LIST_NAV_NAME = "MessageList.Nav";
 * the same keymap the viewport itself carries, so focus landing on the toolbar does not change
 * what the keys mean.
 */
-var MessageListNav = composable(({ ends = true, ...props }, forwardedRef) => {
+var MessageListNav = Util.composable(({ ends = true, ...props }, forwardedRef) => {
 	const { navigation } = useMessageListContext(MESSAGE_LIST_NAV_NAME);
 	const onKeyDown = useCallback((event) => {
 		const delta = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
@@ -1213,11 +1292,11 @@ var MessageListNav = composable(({ ends = true, ...props }, forwardedRef) => {
 	}, [navigation]);
 	return /* @__PURE__ */ jsxs("div", {
 		role: "group",
-		...composableProps(props),
+		...Util.composableProps(props),
 		onKeyDown,
 		ref: forwardedRef,
 		children: [
-			ends && /* @__PURE__ */ jsx(IconButton, {
+			ends && /* @__PURE__ */ jsx(Button.Root, {
 				icon: "ph--arrow-line-up--regular",
 				iconOnly: true,
 				label: "First message",
@@ -1225,7 +1304,7 @@ var MessageListNav = composable(({ ends = true, ...props }, forwardedRef) => {
 				"data-testid": "feed.nav.top",
 				onClick: () => navigation.first()
 			}),
-			/* @__PURE__ */ jsx(IconButton, {
+			/* @__PURE__ */ jsx(Button.Root, {
 				icon: "ph--caret-up--regular",
 				iconOnly: true,
 				label: "Previous message",
@@ -1233,7 +1312,7 @@ var MessageListNav = composable(({ ends = true, ...props }, forwardedRef) => {
 				"data-testid": "feed.nav.back",
 				onClick: () => navigation.step(-1)
 			}),
-			/* @__PURE__ */ jsx(IconButton, {
+			/* @__PURE__ */ jsx(Button.Root, {
 				icon: "ph--caret-down--regular",
 				iconOnly: true,
 				label: "Next message",
@@ -1241,7 +1320,7 @@ var MessageListNav = composable(({ ends = true, ...props }, forwardedRef) => {
 				"data-testid": "feed.nav.forward",
 				onClick: () => navigation.step(1)
 			}),
-			ends && /* @__PURE__ */ jsx(IconButton, {
+			ends && /* @__PURE__ */ jsx(Button.Root, {
 				icon: "ph--arrow-line-down--regular",
 				iconOnly: true,
 				label: "Last message",
@@ -1277,7 +1356,7 @@ var Minimap = ({ classNames, state, width = DEFAULT_WIDTH$1, onSelect }) => {
 		}),
 		children: state && total > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx("div", {
-				className: "absolute inset-x-0 bg-accent-fill/30",
+				className: "absolute inset-x-0 bg-accent-bg/30",
 				style: {
 					top: scale(state.geometry.window.start),
 					height: scale(state.geometry.window.extent)
@@ -1289,7 +1368,7 @@ var Minimap = ({ classNames, state, width = DEFAULT_WIDTH$1, onSelect }) => {
 				style: { top: `${(step + 1) / 10 * 100}%` }
 			}, step)),
 			/* @__PURE__ */ jsx("div", {
-				className: "absolute inset-x-0 border-y border-accent-bg bg-accent-fill/70",
+				className: "absolute inset-x-0 border-y border-accent-bg bg-accent-bg/70",
 				style: {
 					top: scale(state.geometry.scroll),
 					height: scale(state.geometry.viewport)
@@ -1404,6 +1483,12 @@ var Outline = ({ classNames, markers, visibleRange, tickSize = TICK_SIZE, width
 	const hoveredMarker = shown == null ? void 0 : rows[shown]?.marker;
 	return /* @__PURE__ */ jsxs(Popover.Root, {
 		open: hoveredMarker != null,
+		positioning: {
+			placement: "right",
+			flip: false,
+			slide: false
+		},
+		autoFocus: false,
 		children: [/* @__PURE__ */ jsxs("div", {
 			role: "navigation",
 			className: mx("relative flex flex-col justify-center overflow-hidden", classNames),
@@ -1454,21 +1539,19 @@ var Outline = ({ classNames, markers, visibleRange, tickSize = TICK_SIZE, width
 					}
 				})
 			})]
-		}), hoveredMarker && /* @__PURE__ */ jsxs(Popover.Content, {
-			side: "right",
-			align: "center",
-			avoidCollisions: false,
-			onOpenAutoFocus: (event) => event.preventDefault(),
-			children: [/* @__PURE__ */ jsx(Popover.Viewport, { children: /* @__PURE__ */ jsxs("div", {
-				className: "px-2 py-1 max-w-[24rem] w-[24rem]",
+		}), hoveredMarker && /* @__PURE__ */ jsx(Popover.Content, {
+			classNames: "w-[32rem] max-w-(--available-width)",
+			children: /* @__PURE__ */ jsxs(Layout.Flex, {
+				column: true,
+				classNames: "gap-1 px-2 py-1",
 				children: [/* @__PURE__ */ jsx("p", {
-					className: "truncate font-medium",
+					className: "font-medium line-clamp-2",
 					children: hoveredMarker.title
 				}), hoveredMarker.description && /* @__PURE__ */ jsx("p", {
-					className: "mt-1 text-sm text-description line-clamp-3",
+					className: "text-sm text-fg-muted line-clamp-4",
 					children: hoveredMarker.description
 				})]
-			}) }), /* @__PURE__ */ jsx(Popover.Arrow, {})]
+			})
 		}, hoveredMarker.id)]
 	});
 };