@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/message-item/message-reference.mjs

@@ -0,0 +1,111 @@
+import { messageReference } from "./message-reference.recipe.mjs";
+import { Check } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-reference.tsx
+function useReferenceRender(className, render, props) {
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className }, props),
+		state: { slot: "message-reference" }
+	});
+}
+function MessageReferenceText({ className, render, variant = "secondary", ...props }) {
+	const { root } = messageReference({ variant });
+	return useReferenceRender(root({ className }), render, props);
+}
+function MessageReferenceIndicator({ className, render, ...props }) {
+	const { indicator } = messageReference();
+	const defaultProps = { className: indicator({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reference-indicator" }
+	});
+}
+/**
+* The read receipt on a mention: a bare lime check (10px, no box) at the
+* mention's top right, once the one mentioned has read the message. Put it
+* last inside the mention, and render nothing until then. The check is
+* decorative; `children` is what a screen reader says instead ("Read"),
+* visually hidden.
+*/
+function MessageReferenceReadMark({ children, className, render, ...props }) {
+	const { readMark } = messageReference();
+	const defaultProps = {
+		className: readMark({ className }),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Check, {
+			"aria-hidden": true,
+			strokeWidth: 2.5
+		}), children == null ? null : /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children
+		})] })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reference-read-mark" }
+	});
+}
+function MessageReferenceChip({ className, render, variant = "muted", capped, ...props }) {
+	const { root } = messageReference({
+		variant,
+		capped
+	});
+	return useReferenceRender(root({ className }), render, props);
+}
+function MessageReferenceLabel({ className, render, ...props }) {
+	const { chipLabel } = messageReference();
+	const defaultProps = { className: chipLabel({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reference-label" }
+	});
+}
+/** A short note after a chip's label in muted machine type, such as `msg` on a
+*  link to a message. It lines up with the label by the middle of its letters. */
+function MessageReferenceSuffix({ className, render, ...props }) {
+	const { suffix } = messageReference();
+	const defaultProps = { className: suffix({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reference-suffix" }
+	});
+}
+/**
+* The chip's leading icon when it is not a plain svg: an image or a `3xs`
+* Avatar, such as an app's registered icon. It holds one child at 14px,
+* centred on the chip. Put it first in the chip.
+*/
+function MessageReferenceIcon({ className, render, ...props }) {
+	const { icon } = messageReference();
+	const defaultProps = { className: icon({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reference-icon" }
+	});
+}
+function MessageReferencePending({ className, render, capped, ...props }) {
+	const { root } = messageReference({
+		variant: "pending",
+		capped
+	});
+	return useReferenceRender(root({ className }), render, props);
+}
+function MessageReferenceUnavailable({ className, render, ...props }) {
+	const { root } = messageReference({ variant: "unavailable" });
+	return useReferenceRender(root({ className }), render, props);
+}
+//#endregion
+export { MessageReferenceChip, MessageReferenceIcon, MessageReferenceIndicator, MessageReferenceLabel, MessageReferencePending, MessageReferenceReadMark, MessageReferenceSuffix, MessageReferenceText, MessageReferenceUnavailable };

package/dist/components/message-item/message-reference.recipe.d.mts

@@ -0,0 +1,6 @@
+//#region src/components/message-item/message-reference.recipe.d.ts
+/** Chip variants the public `MessageReferenceChip` prop accepts. */
+export type MessageReferenceChipVariant = "accent" | "muted" | "info" | "link";
+/** Visual variants the public `MessageReferenceText` prop accepts. */
+export type MessageReferenceTextVariant = "primary" | "secondary";
+//#endregion

package/dist/components/message-item/message-reference.recipe.mjs

@@ -0,0 +1,63 @@
+import { tv } from "../../lib/tv.mjs";
+import { inlineChip } from "../../lib/inline-chip.mjs";
+//#region src/components/message-item/message-reference.recipe.ts
+const chip = (fill) => [
+	...inlineChip,
+	"[--message-reference-em:1em]",
+	"[&_svg]:size-3.5 [&_svg]:text-foreground-muted",
+	fill
+];
+const linkChip = (fill) => [...chip(fill), "text-foreground cursor-pointer hover:overlay-medium active:overlay-medium"];
+const SUFFIX_LIFT = {
+	"x-height": "top-[calc((1em-var(--message-reference-em))/4)]",
+	icon: "top-[calc(0.25em-var(--message-reference-em)*0.35)]"
+}["x-height"];
+const messageReference = tv({
+	slots: {
+		root: [
+			"inline-flex items-baseline gap-1",
+			"py-0 align-baseline",
+			"[font-size:inherit] leading-[1.2em]",
+			"max-w-full truncate select-text no-underline",
+			"outline-none focus-visible:shadow-focus",
+			"[&_svg]:size-[0.857em] [&_svg]:shrink-0 [&_svg]:self-center",
+			"*:data-[slot=spinner]:self-center",
+			"has-[>[data-slot=message-reference-indicator],>[data-slot=message-reference-read-mark]]:relative",
+			"has-[>[data-slot=message-reference-indicator],>[data-slot=message-reference-read-mark]]:mr-2.5",
+			"has-[>[data-slot=message-reference-indicator],>[data-slot=message-reference-read-mark]]:inline-block",
+			"has-[>[data-slot=message-reference-indicator],>[data-slot=message-reference-read-mark]]:overflow-visible"
+		],
+		chipLabel: "min-w-0 truncate",
+		suffix: [
+			"relative shrink-0",
+			SUFFIX_LIFT,
+			"font-mono text-label leading-none font-normal text-foreground-hint"
+		],
+		icon: ["inline-flex size-3.5 shrink-0 items-center justify-center self-center", "*:size-full *:shrink-0 [&>img]:rounded-[2px] [&>img]:object-cover"],
+		indicator: ["pointer-events-none absolute -right-2.5 top-0 inline-flex size-2 shrink-0 items-center justify-center", "*:data-[slot=status]:size-full"],
+		readMark: ["pointer-events-none absolute -right-3 top-0 inline-flex size-2.5 shrink-0 items-center justify-center", "[&>svg]:size-2.5! [&>svg]:text-read-mark"]
+	},
+	variants: {
+		variant: {
+			primary: { root: [
+				"inline-flex cursor-pointer",
+				...inlineChip,
+				"[--message-reference-em:1em]",
+				"text-sticker-ink no-underline",
+				"bg-you inset-ring-[1.5px] inset-ring-sticker-ink",
+				"hover:overlay-sticker-medium active:overlay-sticker-medium"
+			] },
+			secondary: { root: ["inline cursor-pointer font-bold text-foreground", "decoration-foreground decoration-[1.5px] underline-offset-[3px] hover:underline"] },
+			accent: { root: linkChip("bg-attention-soft") },
+			muted: { root: linkChip("bg-inactive-soft") },
+			info: { root: linkChip("bg-info-soft") },
+			link: { root: linkChip("bg-info-soft") },
+			pending: { root: chip("cursor-wait bg-inactive-soft text-foreground-muted") },
+			unavailable: { root: chip("cursor-default bg-inactive-soft text-foreground-hint") }
+		},
+		capped: { true: { root: "max-w-[min(100%,24em)]" } }
+	},
+	defaultVariants: { variant: "muted" }
+});
+//#endregion
+export { messageReference };

package/dist/components/message-item/message-text-selection-toolbar.d.mts

@@ -0,0 +1,24 @@
+import { TextSelectionToolbar, TextSelectionToolbarButton, TextSelectionToolbarButtonProps, TextSelectionToolbarProps, TextSelectionToolbarSeparator, TextSelectionToolbarSeparatorProps } from "../text-selection-toolbar/text-selection-toolbar.mjs";
+import { TextSelectionAnchor, createTextSelectionAnchor } from "../text-selection-toolbar/text-selection-anchor.mjs";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/message-item/message-text-selection-toolbar.d.ts
+/** @deprecated Use `TextSelectionToolbar`. */
+export declare const MessageTextSelectionToolbar: typeof TextSelectionToolbar;
+/** @deprecated Use `TextSelectionToolbarButton`. */
+export declare const MessageTextSelectionToolbarButton: typeof TextSelectionToolbarButton;
+/** @deprecated Use `TextSelectionToolbarSeparator`. */
+export declare const MessageTextSelectionToolbarSeparator: typeof TextSelectionToolbarSeparator;
+/** @deprecated Use `createTextSelectionAnchor`. */
+export declare const createMessageTextSelectionAnchor: typeof createTextSelectionAnchor;
+/**
+ * @deprecated Use `TextSelectionToolbarProps`. Base UI's Toolbar is in
+ * scope here so the generated API names its types as the new part's do.
+ */
+export type MessageTextSelectionToolbarProps = TextSelectionToolbarProps & Pick<Toolbar.Root.Props, "orientation">;
+/** @deprecated Use `TextSelectionToolbarButtonProps`. */
+export type MessageTextSelectionToolbarButtonProps = TextSelectionToolbarButtonProps;
+/** @deprecated Use `TextSelectionToolbarSeparatorProps`. */
+export type MessageTextSelectionToolbarSeparatorProps = TextSelectionToolbarSeparatorProps;
+/** @deprecated Use `TextSelectionAnchor`. */
+export type MessageTextSelectionAnchor = TextSelectionAnchor;
+//#endregion

package/dist/components/message-item/message-text-selection-toolbar.mjs

@@ -0,0 +1,13 @@
+import { TextSelectionToolbar, TextSelectionToolbarButton, TextSelectionToolbarSeparator } from "../text-selection-toolbar/text-selection-toolbar.mjs";
+import { createTextSelectionAnchor } from "../text-selection-toolbar/text-selection-anchor.mjs";
+//#region src/components/message-item/message-text-selection-toolbar.tsx
+/** @deprecated Use `TextSelectionToolbar`. */
+const MessageTextSelectionToolbar = TextSelectionToolbar;
+/** @deprecated Use `TextSelectionToolbarButton`. */
+const MessageTextSelectionToolbarButton = TextSelectionToolbarButton;
+/** @deprecated Use `TextSelectionToolbarSeparator`. */
+const MessageTextSelectionToolbarSeparator = TextSelectionToolbarSeparator;
+/** @deprecated Use `createTextSelectionAnchor`. */
+const createMessageTextSelectionAnchor = createTextSelectionAnchor;
+//#endregion
+export { MessageTextSelectionToolbar, MessageTextSelectionToolbarButton, MessageTextSelectionToolbarSeparator, createMessageTextSelectionAnchor };

package/dist/components/message-list/index.d.mts

@@ -0,0 +1,4 @@
+import { MessageList, MessageListProps } from "./message-list.mjs";
+import { MessageListDateDivider, MessageListDateDividerProps, MessageListEndFade, MessageListEndFadeProps, MessageListHistoryLimited, MessageListHistoryLimitedProps, MessageListNotice, MessageListNoticeProps } from "./message-list-markers.mjs";
+import { MessageListJumpControls, MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillDismissProps, MessageListJumpPillGroup, MessageListJumpPillGroupProps, MessageListJumpPillProps } from "./message-list-jump.mjs";
+export { MessageList, MessageListDateDivider, type MessageListDateDividerProps, MessageListEndFade, type MessageListEndFadeProps, MessageListHistoryLimited, type MessageListHistoryLimitedProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageListNotice, type MessageListNoticeProps, type MessageListProps };

package/dist/components/message-list/message-list-jump.d.mts

@@ -0,0 +1,21 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { DataAttributes } from "../../lib/data-attributes.mjs";
+import { Button } from "@base-ui/react/button";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-list/message-list-jump.d.ts
+export type MessageListJumpControlsProps = useRender.ComponentProps<"div"> & {
+  /** The edge of the list the controls float on. */
+  side?: "bottom" | "top";
+};
+export declare function MessageListJumpControls({ className, render, side, ...props }: MessageListJumpControlsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageListJumpPillProps = StyledProps<Button.Props> & DataAttributes;
+export declare function MessageListJumpPill({ className, children, render, nativeButton, ...props }: MessageListJumpPillProps): import("react").JSX.Element;
+export type MessageListJumpPillGroupProps = useRender.ComponentProps<"div">;
+/** A pill and its dismiss button, joined on one shared edge. */
+export declare function MessageListJumpPillGroup({ className, render, ...props }: MessageListJumpPillGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageListJumpPillDismissProps = StyledProps<Button.Props> & DataAttributes & {
+  /** What the button does, in Title Case: the product's words. */
+  "aria-label": string;
+};
+export declare function MessageListJumpPillDismiss({ className, children, render, nativeButton, ...props }: MessageListJumpPillDismissProps): import("react").JSX.Element;
+//#endregion

package/dist/components/message-list/message-list-jump.mjs

@@ -0,0 +1,73 @@
+import { defaultNativeButton } from "../../lib/default-native-button.mjs";
+import { buttonVariants } from "../button/button.mjs";
+import { messageListJump } from "./message-list.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-list/message-list-jump.tsx
+function MessageListJumpControls({ className, render, side = "bottom", ...props }) {
+	const { controls } = messageListJump({ side });
+	const defaultProps = {
+		"data-slot": "message-list-jump-controls",
+		"data-side": side,
+		className: controls({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MessageListJumpPill({ className, children, render, nativeButton, ...props }) {
+	const { root, content } = buttonVariants({
+		variant: "outline",
+		size: "md"
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		"data-slot": "message-list-jump-pill",
+		className: root({ className }),
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "message-list-jump-pill-content",
+			className: content(),
+			children
+		})
+	});
+}
+/** A pill and its dismiss button, joined on one shared edge. */
+function MessageListJumpPillGroup({ className, render, ...props }) {
+	const { group } = messageListJump();
+	const defaultProps = {
+		"data-slot": "message-list-jump-pill-group",
+		className: group({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MessageListJumpPillDismiss({ className, children, render, nativeButton, ...props }) {
+	const { root, content } = buttonVariants({
+		variant: "outline",
+		size: "icon-md"
+	});
+	const { dismiss } = messageListJump();
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		"data-slot": "message-list-jump-pill-dismiss",
+		className: root({ className: dismiss({ className }) }),
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "message-list-jump-pill-dismiss-content",
+			className: content(),
+			children
+		})
+	});
+}
+//#endregion
+export { MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup };

package/dist/components/message-list/message-list-markers.d.mts

@@ -0,0 +1,13 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-list/message-list-markers.d.ts
+export type MessageListDateDividerProps = useRender.ComponentProps<"div">;
+export declare function MessageListDateDivider({ children, className, render, ...props }: MessageListDateDividerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageListNoticeProps = useRender.ComponentProps<"div"> & {
+  tone?: "faint" | "muted";
+};
+export declare function MessageListNotice({ className, render, tone, ...props }: MessageListNoticeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageListHistoryLimitedProps = useRender.ComponentProps<"span">;
+export declare function MessageListHistoryLimited({ className, render, ...props }: MessageListHistoryLimitedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageListEndFadeProps = useRender.ComponentProps<"div">;
+export declare function MessageListEndFade({ className, render, ...props }: MessageListEndFadeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/message-list/message-list-markers.mjs

@@ -0,0 +1,70 @@
+import { messageList } from "./message-list.recipe.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-list/message-list-markers.tsx
+function MessageListDateDivider({ children, className, render, ...props }) {
+	const { dateDividerRoot, dateDividerRule, dateDividerChip } = messageList();
+	const defaultProps = {
+		"data-slot": "message-list-date-divider",
+		className: dateDividerRoot({ className }),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: dateDividerRule()
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: dateDividerChip(),
+				children
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: dateDividerRule()
+			})
+		] })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MessageListNotice({ className, render, tone = "faint", ...props }) {
+	const { notice } = messageList({ tone });
+	const defaultProps = {
+		"data-slot": "message-list-notice",
+		className: notice({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MessageListHistoryLimited({ className, render, ...props }) {
+	const { historyLimited } = messageList();
+	const defaultProps = {
+		"data-slot": "message-list-history-limited",
+		className: historyLimited({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MessageListEndFade({ className, render, ...props }) {
+	const { endFade } = messageList();
+	const defaultProps = {
+		"data-slot": "message-list-end-fade",
+		"aria-hidden": true,
+		className: endFade({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { MessageListDateDivider, MessageListEndFade, MessageListHistoryLimited, MessageListNotice };

package/dist/components/message-list/message-list.d.mts

@@ -0,0 +1,7 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-list/message-list.d.ts
+export type MessageListProps = useRender.ComponentProps<"div"> & {
+  rootClassName?: string;
+};
+export declare function MessageList({ children, className, render, rootClassName, style, ...props }: MessageListProps): import("react").JSX.Element;
+//#endregion

package/dist/components/message-list/message-list.mjs

@@ -0,0 +1,52 @@
+import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
+import { ScrollArea, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "../scroll-area/scroll-area.mjs";
+import { PanelScrollViewport } from "../panel/panel.mjs";
+import { messageList } from "./message-list.recipe.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/message-list/message-list.tsx
+const contentStyle = { minWidth: 0 };
+function MessageList({ children, className, render, rootClassName, style, ...props }) {
+	const isMobile = useMobileViewport();
+	const { content, root, viewport } = messageList();
+	const viewportStyle = useMemo(() => ({
+		...style,
+		overflowX: "hidden"
+	}), [style]);
+	if (isMobile) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-list",
+		className: root({ className: rootClassName }),
+		children: /* @__PURE__ */ jsx(PanelScrollViewport, {
+			...props,
+			render,
+			"data-slot": "message-list-viewport",
+			className: viewport({ className }),
+			style: viewportStyle,
+			children: /* @__PURE__ */ jsx("div", {
+				className: content(),
+				children
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs(ScrollArea, {
+		"data-slot": "message-list",
+		className: root({ className: rootClassName }),
+		children: [/* @__PURE__ */ jsx(ScrollAreaViewport, {
+			...props,
+			render,
+			"data-slot": "message-list-viewport",
+			className: viewport({ className }),
+			style: viewportStyle,
+			children: /* @__PURE__ */ jsx(ScrollAreaContent, {
+				className: content(),
+				style: contentStyle,
+				children
+			})
+		}), /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
+			className: "me-1.5 px-0 py-1",
+			children: /* @__PURE__ */ jsx(ScrollAreaThumb, {})
+		})]
+	});
+}
+//#endregion
+export { MessageList };

package/dist/components/message-list/message-list.recipe.mjs

@@ -0,0 +1,54 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/message-list/message-list.recipe.ts
+const messageList = tv({
+	slots: {
+		root: ["relative h-full min-h-0"],
+		viewport: ["min-w-0 overscroll-none"],
+		content: ["flex min-h-full w-full min-w-0 flex-col"],
+		dateDividerRoot: [
+			"flex select-none items-center",
+			"gap-2 px-4",
+			"pt-[calc(var(--spacing-timeline-section)-var(--spacing-timeline-row)-var(--text-mono-meta--line-height)/2)]",
+			"pb-[calc(var(--spacing-timeline-section)-var(--spacing-timeline-lead)-var(--text-mono-meta--line-height)/2)]"
+		],
+		dateDividerRule: ["flex-1", "min-w-3 border-t border-line-hairline"],
+		dateDividerChip: ["inline-flex items-center", "font-mono text-mono-meta whitespace-nowrap text-foreground-hint"],
+		endFade: [
+			"pointer-events-none absolute inset-x-0 bottom-0 z-5",
+			"h-timeline-section",
+			"bg-linear-to-t from-layer-canvas to-transparent"
+		],
+		notice: ["text-center", "pt-timeline-lead pb-timeline-row font-mono text-mono-meta"],
+		historyLimited: [
+			"inline-flex items-center",
+			"h-[22px] gap-1 rounded-chip px-1.5",
+			"font-mono text-mono-meta text-foreground-muted",
+			"inset-ring inset-ring-line-hairline",
+			"[&_svg]:size-3"
+		]
+	},
+	variants: { tone: {
+		faint: { notice: ["text-foreground-hint"] },
+		muted: { notice: ["text-foreground-muted"] }
+	} },
+	defaultVariants: { tone: "faint" }
+});
+const messageListJump = tv({
+	slots: {
+		controls: ["absolute inset-x-0 z-10 mx-auto", "flex w-fit max-w-[calc(100%-1.5rem)] flex-wrap items-center justify-center gap-x-2 gap-y-3"],
+		group: ["inline-flex shrink-0 items-stretch", "*:data-[slot=message-list-jump-pill]:rounded-e-none"],
+		dismiss: [
+			"rounded-s-none border-s-0",
+			"text-foreground-muted hover:text-foreground",
+			"[&_svg:not([class*='size-'])]:size-4",
+			"after:-inset-y-[calc(--spacing(1.5)+1.5px)] after:right-[calc(-0.75rem-1.5px)] after:left-0"
+		]
+	},
+	variants: { side: {
+		bottom: { controls: ["bottom-[calc(--spacing(3)+var(--message-list-bottom-inset,0px))]", "flex-wrap-reverse"] },
+		top: { controls: ["top-3"] }
+	} },
+	defaultVariants: { side: "bottom" }
+});
+//#endregion
+export { messageList, messageListJump };

package/dist/components/message-quoted-preview/index.d.mts

@@ -0,0 +1,2 @@
+import { MessageQuotedPreview, MessageQuotedPreviewAttachment, MessageQuotedPreviewAttachmentProps, MessageQuotedPreviewAttachments, MessageQuotedPreviewAttachmentsProps, MessageQuotedPreviewAuthor, MessageQuotedPreviewAuthorDelegatedBy, MessageQuotedPreviewAuthorDelegatedByProps, MessageQuotedPreviewAuthorMeta, MessageQuotedPreviewAuthorMetaProps, MessageQuotedPreviewAuthorName, MessageQuotedPreviewAuthorNameProps, MessageQuotedPreviewAuthorProps, MessageQuotedPreviewChannel, MessageQuotedPreviewChannelProps, MessageQuotedPreviewContent, MessageQuotedPreviewContentProps, MessageQuotedPreviewHeader, MessageQuotedPreviewHeaderProps, MessageQuotedPreviewLoading, MessageQuotedPreviewLoadingProps, MessageQuotedPreviewProps, MessageQuotedPreviewText, MessageQuotedPreviewTextProps, MessageQuotedPreviewThread, MessageQuotedPreviewThreadProps, MessageQuotedPreviewTimestamp, MessageQuotedPreviewTimestampProps, MessageQuotedPreviewUnavailable, MessageQuotedPreviewUnavailableProps } from "./message-quoted-preview.mjs";
+export { MessageQuotedPreview, MessageQuotedPreviewAttachment, type MessageQuotedPreviewAttachmentProps, MessageQuotedPreviewAttachments, type MessageQuotedPreviewAttachmentsProps, MessageQuotedPreviewAuthor, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageQuotedPreviewAuthorMeta, type MessageQuotedPreviewAuthorMetaProps, MessageQuotedPreviewAuthorName, type MessageQuotedPreviewAuthorNameProps, type MessageQuotedPreviewAuthorProps, MessageQuotedPreviewChannel, type MessageQuotedPreviewChannelProps, MessageQuotedPreviewContent, type MessageQuotedPreviewContentProps, MessageQuotedPreviewHeader, type MessageQuotedPreviewHeaderProps, MessageQuotedPreviewLoading, type MessageQuotedPreviewLoadingProps, type MessageQuotedPreviewProps, MessageQuotedPreviewText, type MessageQuotedPreviewTextProps, MessageQuotedPreviewThread, type MessageQuotedPreviewThreadProps, MessageQuotedPreviewTimestamp, type MessageQuotedPreviewTimestampProps, MessageQuotedPreviewUnavailable, type MessageQuotedPreviewUnavailableProps };

package/dist/components/message-quoted-preview/message-quoted-preview.d.mts

@@ -0,0 +1,40 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-quoted-preview/message-quoted-preview.d.ts
+type DivProps = useRender.ComponentProps<"div">;
+type SpanProps = useRender.ComponentProps<"span">;
+export type MessageQuotedPreviewProps = DivProps;
+export declare function MessageQuotedPreview({ className, render, ...props }: MessageQuotedPreviewProps): import("react").JSX.Element;
+export type MessageQuotedPreviewContentProps = DivProps;
+export declare function MessageQuotedPreviewContent({ className, render, ...props }: MessageQuotedPreviewContentProps): import("react").JSX.Element;
+export type MessageQuotedPreviewHeaderProps = DivProps;
+export declare function MessageQuotedPreviewHeader({ className, render, ...props }: MessageQuotedPreviewHeaderProps): import("react").JSX.Element;
+export type MessageQuotedPreviewChannelProps = SpanProps;
+export declare function MessageQuotedPreviewChannel({ className, render, ...props }: MessageQuotedPreviewChannelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageQuotedPreviewThreadProps = SpanProps;
+export declare function MessageQuotedPreviewThread({ className, render, ...props }: MessageQuotedPreviewThreadProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageQuotedPreviewAuthorProps = SpanProps;
+export declare function MessageQuotedPreviewAuthor({ className, render, ...props }: MessageQuotedPreviewAuthorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageQuotedPreviewAuthorNameProps = SpanProps;
+export declare function MessageQuotedPreviewAuthorName({ className, render, ...props }: MessageQuotedPreviewAuthorNameProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageQuotedPreviewAuthorMetaProps = SpanProps;
+export declare function MessageQuotedPreviewAuthorMeta({ className, render, ...props }: MessageQuotedPreviewAuthorMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageQuotedPreviewAuthorDelegatedByProps = SpanProps;
+/**
+ * "(sent by Friday)" after `MessageQuotedPreviewAuthorName`, when an assistant
+ * sent the quoted message for its author. It never truncates; the author's
+ * name gives way instead.
+ */
+export declare function MessageQuotedPreviewAuthorDelegatedBy({ className, render, ...props }: MessageQuotedPreviewAuthorDelegatedByProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageQuotedPreviewTimestampProps = SpanProps;
+export declare function MessageQuotedPreviewTimestamp({ className, render, ...props }: MessageQuotedPreviewTimestampProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageQuotedPreviewTextProps = DivProps;
+export declare function MessageQuotedPreviewText({ className, render, ...props }: MessageQuotedPreviewTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageQuotedPreviewAttachmentsProps = DivProps;
+export declare function MessageQuotedPreviewAttachments({ className, render, ...props }: MessageQuotedPreviewAttachmentsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageQuotedPreviewAttachmentProps = SpanProps;
+export declare function MessageQuotedPreviewAttachment({ className, render, ...props }: MessageQuotedPreviewAttachmentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageQuotedPreviewLoadingProps = DivProps;
+export declare function MessageQuotedPreviewLoading({ className, render, ...props }: MessageQuotedPreviewLoadingProps): import("react").JSX.Element;
+export type MessageQuotedPreviewUnavailableProps = DivProps;
+export declare function MessageQuotedPreviewUnavailable({ className, render, ...props }: MessageQuotedPreviewUnavailableProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion