@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/comment/comment-card.mjs

@@ -0,0 +1,83 @@
+import { comment } from "./comment.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/comment/comment-card.tsx
+/**
+* The card of one discussion: its comments, a line such as "2 replies", and
+* the reply box when it is open. A `div`; which parts it holds (collapsed or
+* open) is the caller's choice. To open it with a click, add
+* `CommentCardTrigger`.
+*/
+function CommentCard({ className, render, active = false, ...props }) {
+	const { card } = comment();
+	const defaultProps = {
+		"data-slot": "comment-card",
+		"data-active": active ? "" : void 0,
+		"aria-current": active ? "true" : void 0,
+		className: card({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* A button laid over the whole card, for a collapsed card that opens when it
+* is clicked or chosen with the keyboard. It has no text of its own: give it
+* an `aria-label` ("Comment from Martin").
+*/
+function CommentCardTrigger({ className, render, ...props }) {
+	const { cardTrigger } = comment();
+	const defaultProps = {
+		"data-slot": "comment-card-trigger",
+		type: "button",
+		className: cardTrigger({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* A short line about the discussion, in the caller's words: how many replies
+* it has, that it is about the whole document, or that the passage it was on
+* can no longer be found. When choosing it does something (makes this the
+* discussion being read), render it as a button,
+* `render={<button type="button" />}`: it then underlines on hover, as
+* clickable text, and takes the focus ring.
+*/
+function CommentCardMeta({ className, render, ...props }) {
+	const { cardMeta } = comment();
+	const defaultProps = {
+		"data-slot": "comment-card-meta",
+		className: cardMeta({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* The passage the discussion is about, in the caller's words (usually the
+* quoted text). Hidden on screen, where the card's place beside the
+* highlighted passage says it; give it an `id` and point the
+* `aria-describedby` of `CommentCardTrigger` or `CommentMarker` at it, so a
+* screen reader says which passage a card is about.
+*/
+function CommentCardQuote({ className, render, ...props }) {
+	const { cardQuote } = comment();
+	const defaultProps = {
+		"data-slot": "comment-card-quote",
+		className: cardQuote({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger };

package/dist/components/comment/comment-entry.d.mts

@@ -0,0 +1,24 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/comment/comment-entry.d.ts
+export type CommentEntryProps = useRender.ComponentProps<"div">;
+/** One comment in a discussion: its header, then its text. */
+export declare function CommentEntry({ className, render, ...props }: CommentEntryProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CommentEntryHeaderProps = useRender.ComponentProps<"div">;
+/** One line: the author's `Avatar` (`size="xs"`), `CommentEntryAuthor`, then `CommentEntryTime`. */
+export declare function CommentEntryHeader({ className, render, ...props }: CommentEntryHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CommentEntryAuthorProps = useRender.ComponentProps<"span">;
+/** Who wrote the comment, in bold. It truncates; the time after it doesn't. */
+export declare function CommentEntryAuthor({ className, render, ...props }: CommentEntryAuthorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CommentEntryTimeProps = useRender.ComponentProps<"time">;
+/**
+ * When the comment was written, right after the author. A `<time>`: pass the
+ * moment in `dateTime` (ISO 8601).
+ */
+export declare function CommentEntryTime({ className, render, ...props }: CommentEntryTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CommentEntryBodyProps = useRender.ComponentProps<"div"> & {
+  /** Cuts the text to 2 lines, for a collapsed card. */
+  clamp?: boolean;
+};
+/** What the comment says. */
+export declare function CommentEntryBody({ className, render, clamp, ...props }: CommentEntryBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/comment/comment-entry.mjs

@@ -0,0 +1,75 @@
+import { comment } from "./comment.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/comment/comment-entry.tsx
+/** One comment in a discussion: its header, then its text. */
+function CommentEntry({ className, render, ...props }) {
+	const { entry } = comment();
+	const defaultProps = {
+		"data-slot": "comment-entry",
+		className: entry({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** One line: the author's `Avatar` (`size="xs"`), `CommentEntryAuthor`, then `CommentEntryTime`. */
+function CommentEntryHeader({ className, render, ...props }) {
+	const { entryHeader } = comment();
+	const defaultProps = {
+		"data-slot": "comment-entry-header",
+		className: entryHeader({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** Who wrote the comment, in bold. It truncates; the time after it doesn't. */
+function CommentEntryAuthor({ className, render, ...props }) {
+	const { entryAuthor } = comment();
+	const defaultProps = {
+		"data-slot": "comment-entry-author",
+		className: entryAuthor({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* When the comment was written, right after the author. A `<time>`: pass the
+* moment in `dateTime` (ISO 8601).
+*/
+function CommentEntryTime({ className, render, ...props }) {
+	const { entryTime } = comment();
+	const defaultProps = {
+		"data-slot": "comment-entry-time",
+		className: entryTime({ className })
+	};
+	return useRender({
+		defaultTagName: "time",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** What the comment says. */
+function CommentEntryBody({ className, render, clamp = false, ...props }) {
+	const { entryBody } = comment({ clamp });
+	const defaultProps = {
+		"data-slot": "comment-entry-body",
+		"data-clamp": clamp ? "" : void 0,
+		className: entryBody({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime };

package/dist/components/comment/comment-highlight.d.mts

@@ -0,0 +1,18 @@
+//#region src/components/comment/comment-highlight.d.ts
+/** The highlight of every passage that has comments (`::highlight(raft-comment)` in styles.css). */
+export declare const COMMENT_HIGHLIGHT = "raft-comment";
+/** The highlight of the passage of the open discussion (`::highlight(raft-comment-active)`). */
+export declare const COMMENT_HIGHLIGHT_ACTIVE = "raft-comment-active";
+/**
+ * Highlights the passages comments are on with the CSS Custom Highlight API,
+ * so the document's DOM is never changed: no `<mark>` is wrapped around its
+ * text. Register the ranges of every anchored comment under
+ * `COMMENT_HIGHLIGHT`, and the open discussion's under
+ * `COMMENT_HIGHLIGHT_ACTIVE`, which paints over it. Passing no ranges clears
+ * the name. Returns a function that clears it.
+ *
+ * Where the browser has no `CSS.highlights`, it does nothing: the passages are
+ * not highlighted, and the cards still say where they belong.
+ */
+export declare function setCommentHighlights(name: string, ranges: Iterable<Range>): () => void;
+//#endregion

package/dist/components/comment/comment-highlight.mjs

@@ -0,0 +1,33 @@
+//#region src/components/comment/comment-highlight.ts
+/** The highlight of every passage that has comments (`::highlight(raft-comment)` in styles.css). */
+const COMMENT_HIGHLIGHT = "raft-comment";
+/** The highlight of the passage of the open discussion (`::highlight(raft-comment-active)`). */
+const COMMENT_HIGHLIGHT_ACTIVE = "raft-comment-active";
+/**
+* Highlights the passages comments are on with the CSS Custom Highlight API,
+* so the document's DOM is never changed: no `<mark>` is wrapped around its
+* text. Register the ranges of every anchored comment under
+* `COMMENT_HIGHLIGHT`, and the open discussion's under
+* `COMMENT_HIGHLIGHT_ACTIVE`, which paints over it. Passing no ranges clears
+* the name. Returns a function that clears it.
+*
+* Where the browser has no `CSS.highlights`, it does nothing: the passages are
+* not highlighted, and the cards still say where they belong.
+*/
+function setCommentHighlights(name, ranges) {
+	const registry = typeof CSS === "undefined" ? void 0 : CSS.highlights;
+	if (!registry || typeof Highlight === "undefined") return () => {};
+	const list = [...ranges];
+	if (list.length === 0) {
+		registry.delete(name);
+		return () => {};
+	}
+	const highlight = new Highlight(...list);
+	if (name === "raft-comment-active") highlight.priority = 1;
+	registry.set(name, highlight);
+	return () => {
+		if (registry.get(name) === highlight) registry.delete(name);
+	};
+}
+//#endregion
+export { COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, setCommentHighlights };

package/dist/components/comment/comment-margin-layout.d.mts

@@ -0,0 +1,32 @@
+//#region src/components/comment/comment-margin-layout.d.ts
+/** One card in the margin: where its anchor is and how tall the card is, in px. */
+export type CommentMarginLayoutItem = {
+  id: string;
+  /** The y of the card's anchor, measured from the top of the margin. */
+  top: number;
+  /** The card's rendered height. */
+  height: number;
+};
+export type CommentMarginLayoutOptions = {
+  /** Space between two cards that would otherwise touch, in px. Default 8. */
+  gap?: number;
+  /** The card pinned to its anchor; the others make room around it. */
+  activeId?: string | null;
+};
+export type CommentMarginLayout = {
+  /** The resolved top of each card, by id. */
+  tops: Record<string, number>;
+  /** The bottom of the lowest card: the height the margin needs. */
+  height: number;
+};
+/**
+ * Places the cards of a comment margin the way Google Docs does. Cards keep
+ * document order (by their anchor's top; equal tops keep the order given) and
+ * never overlap: each sits at its anchor, or `gap` below the card before it.
+ * The active card is pinned to its anchor instead, the cards above it are
+ * pushed up to make room and the cards below it pushed down. Nothing goes
+ * above 0: when the cards above the active one don't fit between 0 and its
+ * anchor, they stack from 0 and the active card follows them.
+ */
+export declare function resolveCommentMarginLayout(items: readonly CommentMarginLayoutItem[], { gap, activeId }?: CommentMarginLayoutOptions): CommentMarginLayout;
+//#endregion

package/dist/components/comment/comment-margin-layout.mjs

@@ -0,0 +1,44 @@
+//#region src/components/comment/comment-margin-layout.ts
+/**
+* Places the cards of a comment margin the way Google Docs does. Cards keep
+* document order (by their anchor's top; equal tops keep the order given) and
+* never overlap: each sits at its anchor, or `gap` below the card before it.
+* The active card is pinned to its anchor instead, the cards above it are
+* pushed up to make room and the cards below it pushed down. Nothing goes
+* above 0: when the cards above the active one don't fit between 0 and its
+* anchor, they stack from 0 and the active card follows them.
+*/
+function resolveCommentMarginLayout(items, { gap = 8, activeId = null } = {}) {
+	const order = items.map((item, index) => ({
+		item,
+		index
+	})).sort((a, b) => a.item.top - b.item.top || a.index - b.index).map(({ item }) => item);
+	const tops = order.map((item) => item.top);
+	const stackDown = (from, floor) => {
+		let next = floor;
+		for (let i = from; i < order.length; i += 1) {
+			tops[i] = Math.max(order[i].top, next);
+			next = tops[i] + order[i].height + gap;
+		}
+	};
+	const pinned = activeId == null ? -1 : order.findIndex((item) => item.id === activeId);
+	if (pinned < 0) stackDown(0, 0);
+	else {
+		tops[pinned] = Math.max(order[pinned].top, 0);
+		for (let i = pinned - 1; i >= 0; i -= 1) tops[i] = Math.min(order[i].top, tops[i + 1] - gap - order[i].height);
+		if (pinned > 0 && tops[0] < 0) stackDown(0, 0);
+		else stackDown(pinned + 1, tops[pinned] + order[pinned].height + gap);
+	}
+	const result = {};
+	let height = 0;
+	order.forEach((item, i) => {
+		result[item.id] = tops[i];
+		height = Math.max(height, tops[i] + item.height);
+	});
+	return {
+		tops: result,
+		height
+	};
+}
+//#endregion
+export { resolveCommentMarginLayout };

package/dist/components/comment/comment-margin.d.mts

@@ -0,0 +1,29 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/comment/comment-margin.d.ts
+export type CommentMarginProps = useRender.ComponentProps<"div"> & {
+  /** Space between two cards that would otherwise touch, in px. Default 8. */
+  gap?: number;
+};
+/**
+ * The column beside a document that holds its comment cards, each level with
+ * the passage it is about. It measures its `CommentMarginItem`s with one
+ * `ResizeObserver`, resolves their collisions with
+ * `resolveCommentMarginLayout`, and takes the height the lowest card needs.
+ * Place it beside the document so that its top is the top the items' `top`
+ * is measured from.
+ */
+export declare function CommentMargin({ className, render, style, gap, ...props }: CommentMarginProps): import("react").JSX.Element;
+export type CommentMarginItemProps = useRender.ComponentProps<"div"> & {
+  /** Where the card's anchor is: its y, in px, from the top of the margin. */
+  top: number;
+  /** Pins this card to its anchor and moves the others around it. */
+  active?: boolean;
+};
+/**
+ * One card's place in a `CommentMargin`. It sits at `top`, or lower when the
+ * card above it is in the way; the active one stays at `top` and the others
+ * make room. Items with the same `top` keep the order they were first
+ * rendered in. The resolved top is `data-top`, applied as a `translateY`.
+ */
+export declare function CommentMarginItem({ className, render, style, top, active, ...props }: CommentMarginItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/comment/comment-margin.mjs

@@ -0,0 +1,164 @@
+import { comment } from "./comment.recipe.mjs";
+import { resolveCommentMarginLayout } from "./comment-margin-layout.mjs";
+import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/comment/comment-margin.tsx
+const CommentMarginContext = createContext(null);
+function useCommentMargin() {
+	const context = use(CommentMarginContext);
+	if (!context) throw new Error("CommentMarginItem must be used within CommentMargin.");
+	return context;
+}
+const heightOf = (element) => element.getBoundingClientRect().height;
+/**
+* The column beside a document that holds its comment cards, each level with
+* the passage it is about. It measures its `CommentMarginItem`s with one
+* `ResizeObserver`, resolves their collisions with
+* `resolveCommentMarginLayout`, and takes the height the lowest card needs.
+* Place it beside the document so that its top is the top the items' `top`
+* is measured from.
+*/
+function CommentMargin({ className, render, style, gap = 8, ...props }) {
+	const { margin } = comment();
+	const [entries, setEntries] = useState(() => /* @__PURE__ */ new Map());
+	const [animate, setAnimate] = useState(false);
+	const observer = useRef(null);
+	const observed = useRef(/* @__PURE__ */ new Map());
+	const patch = useCallback((id, next) => {
+		setEntries((current) => {
+			const previous = current.get(id);
+			if (next === null) {
+				if (!previous) return current;
+				const without = new Map(current);
+				without.delete(id);
+				return without;
+			}
+			if (!previous && next.top === void 0) return current;
+			const merged = {
+				top: 0,
+				height: 0,
+				active: false,
+				...previous,
+				...next
+			};
+			if (previous && previous.top === merged.top && previous.height === merged.height && previous.active === merged.active) return current;
+			const updated = new Map(current);
+			updated.set(id, merged);
+			return updated;
+		});
+	}, []);
+	const place = useCallback((id, placement) => patch(id, placement), [patch]);
+	const observe = useCallback((id, element) => {
+		observer.current ??= new ResizeObserver((records) => {
+			for (const record of records) {
+				const target = observed.current.get(record.target);
+				if (target) patch(target, { height: heightOf(record.target) });
+			}
+		});
+		observed.current.set(element, id);
+		patch(id, { height: heightOf(element) });
+		observer.current.observe(element);
+		return () => {
+			observer.current?.unobserve(element);
+			observed.current.delete(element);
+		};
+	}, [patch]);
+	useEffect(() => () => observer.current?.disconnect(), []);
+	const layout = useMemo(() => {
+		const items = [...entries].map(([id, { top, height }]) => ({
+			id,
+			top,
+			height
+		}));
+		const activeId = [...entries].find(([, entry]) => entry.active)?.[0];
+		return resolveCommentMarginLayout(items, {
+			gap,
+			activeId
+		});
+	}, [entries, gap]);
+	const measured = entries.size > 0;
+	useEffect(() => {
+		if (!measured) return;
+		const frame = requestAnimationFrame(() => setAnimate(true));
+		return () => cancelAnimationFrame(frame);
+	}, [measured]);
+	const context = useMemo(() => ({
+		tops: layout.tops,
+		animate,
+		place,
+		observe
+	}), [
+		layout.tops,
+		animate,
+		place,
+		observe
+	]);
+	const defaultProps = {
+		"data-slot": "comment-margin",
+		className: margin({ className }),
+		style: {
+			minHeight: layout.height,
+			...style
+		}
+	};
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+	return /* @__PURE__ */ jsx(CommentMarginContext, {
+		value: context,
+		children: element
+	});
+}
+/**
+* One card's place in a `CommentMargin`. It sits at `top`, or lower when the
+* card above it is in the way; the active one stays at `top` and the others
+* make room. Items with the same `top` keep the order they were first
+* rendered in. The resolved top is `data-top`, applied as a `translateY`.
+*/
+function CommentMarginItem({ className, render, style, top, active = false, ...props }) {
+	const { marginItem } = comment();
+	const { tops, animate, place, observe } = useCommentMargin();
+	const id = useId();
+	const [element, setElement] = useState(null);
+	useLayoutEffect(() => {
+		place(id, {
+			top,
+			active
+		});
+	}, [
+		place,
+		id,
+		top,
+		active
+	]);
+	useLayoutEffect(() => element ? observe(id, element) : void 0, [
+		observe,
+		id,
+		element
+	]);
+	useLayoutEffect(() => () => place(id, null), [place, id]);
+	const resolved = tops[id] ?? Math.max(top, 0);
+	const defaultProps = {
+		"data-slot": "comment-margin-item",
+		"data-top": String(resolved),
+		"data-active": active ? "" : void 0,
+		"data-animate": animate ? "" : void 0,
+		className: marginItem({ className }),
+		style: {
+			...style,
+			transform: `translateY(${resolved}px)`
+		}
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref: setElement,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { CommentMargin, CommentMarginItem };

package/dist/components/comment/comment-marker.d.mts

@@ -0,0 +1,16 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { DataAttributes } from "../../lib/data-attributes.mjs";
+import { Button } from "@base-ui/react/button";
+//#region src/components/comment/comment-marker.d.ts
+export type CommentMarkerProps = StyledProps<Button.Props> & DataAttributes & {
+  /** The marker of the discussion that is open. */
+  active?: boolean;
+};
+/**
+ * Where there is no room for a margin: a small button beside a passage that
+ * has comments, with the authors' avatars (an `AvatarGroup` of up to 3
+ * `size="2xs"` avatars) and the count. It opens the discussion, in a bottom
+ * sheet. Give it an `aria-label` that starts with the count ("2 comments").
+ */
+export declare function CommentMarker({ className, render, nativeButton, active, ...props }: CommentMarkerProps): import("react").JSX.Element;
+//#endregion

package/dist/components/comment/comment-marker.mjs

@@ -0,0 +1,24 @@
+import { defaultNativeButton } from "../../lib/default-native-button.mjs";
+import { comment } from "./comment.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+//#region src/components/comment/comment-marker.tsx
+/**
+* Where there is no room for a margin: a small button beside a passage that
+* has comments, with the authors' avatars (an `AvatarGroup` of up to 3
+* `size="2xs"` avatars) and the count. It opens the discussion, in a bottom
+* sheet. Give it an `aria-label` that starts with the count ("2 comments").
+*/
+function CommentMarker({ className, render, nativeButton, active = false, ...props }) {
+	const { marker } = comment();
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		"data-slot": "comment-marker",
+		"data-active": active ? "" : void 0,
+		className: marker({ className })
+	});
+}
+//#endregion
+export { CommentMarker };

package/dist/components/comment/comment.recipe.mjs

@@ -0,0 +1,58 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/comment/comment.recipe.ts
+const comment = tv({
+	slots: {
+		margin: ["relative min-w-0"],
+		marginItem: [
+			"absolute inset-x-0 top-0",
+			"data-animate:transition-transform data-animate:duration-150 data-animate:ease-out",
+			"motion-reduce:transition-none",
+			"data-active:z-10"
+		],
+		card: [
+			"relative flex min-w-0 flex-col gap-2",
+			"rounded-container border border-line-hairline p-3",
+			"bg-layer-card text-foreground shadow-none outline-none",
+			"data-active:border-[1.5px] data-active:border-line-strong data-active:p-[11.5px] data-active:shadow-float"
+		],
+		cardTrigger: [
+			"absolute -inset-px z-10 cursor-pointer",
+			"rounded-container border-0 bg-transparent p-0",
+			"hover:bg-fill-subtle active:bg-fill-medium",
+			"outline-none focus-visible:shadow-focus"
+		],
+		cardQuote: ["sr-only"],
+		cardMeta: [
+			"flex min-w-0 items-center gap-1",
+			"font-sans text-caption text-foreground-hint",
+			"[&_svg]:size-3.5 [&_svg]:shrink-0",
+			"[button&]:enabled:cursor-pointer [button&]:border-0 [button&]:bg-transparent [button&]:p-0 [button&]:text-start",
+			"[button&]:decoration-[1.5px] [button&]:underline-offset-[3px] [button&]:enabled:hover:underline",
+			"[button&]:rounded-chip [button&]:outline-none [button&]:focus-visible:shadow-focus"
+		],
+		entry: ["flex min-w-0 flex-col gap-1", "[[data-slot=comment-entry]+&]:mt-1"],
+		entryHeader: ["flex min-w-0 items-center gap-1.5", "*:data-[slot=avatar]:me-0.5"],
+		entryAuthor: ["min-w-0 truncate", "text-subhead font-bold text-foreground"],
+		entryTime: ["shrink-0 whitespace-nowrap", "font-mono text-mono-meta tabular-nums text-foreground-hint"],
+		entryBody: [
+			"wrap-break-word select-text",
+			"text-callout text-foreground",
+			"selection:bg-selection"
+		],
+		marker: [
+			"relative inline-flex h-6 shrink-0 items-center gap-1 align-top whitespace-nowrap",
+			"rounded-chip border border-line-hairline py-0 ps-[3px] pe-1.5",
+			"font-mono text-mono-meta font-bold tabular-nums text-foreground",
+			"bg-layer-card [--avatar-group-surface:var(--layer-card)]",
+			"cursor-pointer hover:overlay-medium active:overlay-medium",
+			"data-active:border-[1.5px] data-active:border-line-strong data-active:bg-brand-soft data-active:ps-[2.5px] data-active:pe-[5.5px]",
+			"data-popup-open:border-[1.5px] data-popup-open:border-line-strong data-popup-open:bg-brand-soft data-popup-open:ps-[2.5px] data-popup-open:pe-[5.5px]",
+			"data-active:[--avatar-group-surface:var(--brand-soft)] data-popup-open:[--avatar-group-surface:var(--brand-soft)]",
+			"outline-none focus-visible:shadow-focus",
+			"after:absolute after:-inset-x-1 after:-inset-y-2.5"
+		]
+	},
+	variants: { clamp: { true: { entryBody: ["line-clamp-2"] } } }
+});
+//#endregion
+export { comment };

package/dist/components/comment/index.d.mts

@@ -0,0 +1,8 @@
+import { CommentCard, CommentCardMeta, CommentCardMetaProps, CommentCardProps, CommentCardQuote, CommentCardQuoteProps, CommentCardTrigger, CommentCardTriggerProps } from "./comment-card.mjs";
+import { CommentEntry, CommentEntryAuthor, CommentEntryAuthorProps, CommentEntryBody, CommentEntryBodyProps, CommentEntryHeader, CommentEntryHeaderProps, CommentEntryProps, CommentEntryTime, CommentEntryTimeProps } from "./comment-entry.mjs";
+import { COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, setCommentHighlights } from "./comment-highlight.mjs";
+import { CommentMargin, CommentMarginItem, CommentMarginItemProps, CommentMarginProps } from "./comment-margin.mjs";
+import { CommentMarginLayout, CommentMarginLayoutItem, CommentMarginLayoutOptions, resolveCommentMarginLayout } from "./comment-margin-layout.mjs";
+import { CommentMarker, CommentMarkerProps } from "./comment-marker.mjs";
+import { UseCommentMarginFitsOptions, useCommentMarginFits } from "./use-comment-margin-fits.mjs";
+export { COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, CommentCard, CommentCardMeta, type CommentCardMetaProps, type CommentCardProps, CommentCardQuote, type CommentCardQuoteProps, CommentCardTrigger, type CommentCardTriggerProps, CommentEntry, CommentEntryAuthor, type CommentEntryAuthorProps, CommentEntryBody, type CommentEntryBodyProps, CommentEntryHeader, type CommentEntryHeaderProps, type CommentEntryProps, CommentEntryTime, type CommentEntryTimeProps, CommentMargin, CommentMarginItem, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, CommentMarker, type CommentMarkerProps, type UseCommentMarginFitsOptions, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits };

package/dist/components/comment/use-comment-margin-fits.d.mts

@@ -0,0 +1,16 @@
+//#region src/components/comment/use-comment-margin-fits.d.ts
+export type UseCommentMarginFitsOptions = {
+  /** The narrowest the viewer may be for the margin to show, in px. Default 784. */
+  minWidth?: number;
+};
+/**
+ * Whether a viewer has room for a comment margin beside its document: true
+ * only on a desktop (from 768px with a mouse or a trackpad, the query the
+ * desktop metrics use) and while `element`, the viewer that holds the
+ * document and the margin, is at least `minWidth` wide. Otherwise show
+ * `CommentMarker`s and open discussions in a bottom sheet. Cards and markers
+ * are different trees, so this is measured in JavaScript (a
+ * `ResizeObserver` on the element), not decided by a container query.
+ */
+export declare function useCommentMarginFits(element: Element | null, { minWidth }?: UseCommentMarginFitsOptions): boolean;
+//#endregion