@tulipfarm/sprout 0.0.0-stage → 0.1.0

package/dist/components/mention-list.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, } from "react";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+import { Spinner } from "./spinner.js";
+export const mentionStatusToneNames = ["loading", "empty", "error"];
+/**
+ * A suggestion panel for `@` and `/` triggers. The text field keeps focus and
+ * owns the arrow keys; it points `aria-activedescendant` at the active option.
+ */
+export function MentionList({ id, label, status, announcement, children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "mention-list", className: cn("sprout-mention-list", className), ...props, children: [_jsx("ul", { id: id, role: "listbox", "aria-label": label, className: "sprout-mention-list-options", children: children }), status, _jsx("p", { role: "status", className: "sprout-mention-list-announcement", children: announcement })] }));
+}
+export function MentionOption({ id, active, onSelect, media, title, description, className, ...props }) {
+    const option = useRef(null);
+    useEffect(() => {
+        if (active)
+            option.current?.scrollIntoView?.({ block: "nearest" });
+    }, [active]);
+    return (_jsxs("li", { ref: option, id: id, role: "option", "aria-selected": active, "data-slot": "mention-option", "data-active": active ? "" : undefined, className: cn("sprout-mention-option", className), ...props, 
+        // Keeps focus (and the caret) in the text field.
+        onMouseDown: (event) => event.preventDefault(), onClick: onSelect, children: [media != null && media !== false && (_jsx("span", { "data-slot": "mention-option-media", className: "sprout-mention-option-media", children: media })), _jsxs("span", { className: "sprout-mention-option-text", children: [_jsx("span", { className: "sprout-mention-option-title", title: title, children: title }), description && (_jsx("span", { className: "sprout-mention-option-description", children: description }))] })] }));
+}
+/** A labelled run of options inside the same listbox, so arrow keys move across groups. */
+export function MentionGroup({ label, children }) {
+    const id = useId();
+    return (_jsxs("li", { role: "presentation", "data-slot": "mention-group", className: "sprout-mention-group", children: [_jsx("span", { id: id, "aria-hidden": "true", className: "sprout-mention-group-label", children: label }), _jsx("ul", { role: "group", "aria-labelledby": id, className: "sprout-mention-group-options", children: children })] }));
+}
+export function MentionStatus({ tone, children, action }) {
+    return (_jsxs("div", { "data-slot": "mention-status", "data-tone": tone, role: tone === "error" ? "alert" : "status", className: "sprout-mention-status", children: [tone === "loading" && _jsx(Spinner, { "aria-hidden": "true" }), _jsx("span", { className: "sprout-mention-status-text", children: children }), action && (_jsx(Button, { size: "sm", variant: "outline", className: "sprout-mention-status-action", onMouseDown: (event) => event.preventDefault(), onClick: action.onAction, children: action.label }))] }));
+}

package/dist/components/menubar.d.ts

@@ -0,0 +1,64 @@
+import type { ComponentProps } from "react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
+export declare const menubarItemVariantNames: readonly ["default", "destructive"];
+export type MenubarItemVariant = (typeof menubarItemVariantNames)[number];
+export type MenubarProps = MenubarPrimitive.Props;
+/**
+ * A row of menus, like an app's File and View menus. Left and Right move
+ * between triggers, and Down opens the focused menu.
+ */
+export declare function Menubar({ className, ...props }: MenubarProps): import("react").JSX.Element;
+export type MenubarMenuProps = MenuPrimitive.Root.Props;
+/** One menu in the bar. Place a `MenubarTrigger` and `MenubarContent` inside. */
+export declare function MenubarMenu(props: MenubarMenuProps): import("react").JSX.Element;
+export type MenubarPortalProps = MenuPrimitive.Portal.Props;
+export declare function MenubarPortal(props: MenubarPortalProps): import("react").JSX.Element;
+export type MenubarTriggerProps = MenuPrimitive.Trigger.Props;
+export declare function MenubarTrigger({ className, ...props }: MenubarTriggerProps): import("react").JSX.Element;
+type PositionerProps = Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
+export interface MenubarContentProps extends MenuPrimitive.Popup.Props, PositionerProps {
+    /** Where the portal renders. Defaults to `document.body`. */
+    container?: MenuPrimitive.Portal.Props["container"];
+}
+/**
+ * The menu surface. It renders its own portal and positioner, so place it
+ * directly inside `MenubarMenu`. It lines up with the bar's inner edge.
+ */
+export declare function MenubarContent({ align, alignOffset, side, sideOffset, collisionPadding, collisionAvoidance, sticky, positionMethod, container, className, ...props }: MenubarContentProps): import("react").JSX.Element;
+export type MenubarGroupProps = MenuPrimitive.Group.Props;
+export declare function MenubarGroup(props: MenubarGroupProps): import("react").JSX.Element;
+interface Inset {
+    /** Indents the text to line up with checkbox, radio, and icon items. */
+    inset?: boolean;
+}
+export interface MenubarLabelProps extends MenuPrimitive.GroupLabel.Props, Inset {
+}
+export declare function MenubarLabel({ className, inset, ...props }: MenubarLabelProps): import("react").JSX.Element;
+export interface MenubarItemProps extends MenuPrimitive.Item.Props, Inset {
+    variant?: MenubarItemVariant;
+}
+export declare function MenubarItem({ className, inset, variant, ...props }: MenubarItemProps): import("react").JSX.Element;
+export interface MenubarCheckboxItemProps extends MenuPrimitive.CheckboxItem.Props, Inset {
+}
+/** A toggle row. The check sits at the start, so the label lines up with `inset` rows. */
+export declare function MenubarCheckboxItem({ className, inset, children, ...props }: MenubarCheckboxItemProps): import("react").JSX.Element;
+export type MenubarRadioGroupProps = MenuPrimitive.RadioGroup.Props;
+export declare function MenubarRadioGroup(props: MenubarRadioGroupProps): import("react").JSX.Element;
+export interface MenubarRadioItemProps extends MenuPrimitive.RadioItem.Props, Inset {
+}
+export declare function MenubarRadioItem({ className, inset, children, ...props }: MenubarRadioItemProps): import("react").JSX.Element;
+export type MenubarSeparatorProps = MenuPrimitive.Separator.Props;
+export declare function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): import("react").JSX.Element;
+export type MenubarShortcutProps = ComponentProps<"span">;
+/** Right-aligned hint text, such as a keyboard shortcut. It does not bind keys. */
+export declare function MenubarShortcut({ className, ...props }: MenubarShortcutProps): import("react").JSX.Element;
+export type MenubarSubProps = MenuPrimitive.SubmenuRoot.Props;
+export declare function MenubarSub(props: MenubarSubProps): import("react").JSX.Element;
+export interface MenubarSubTriggerProps extends MenuPrimitive.SubmenuTrigger.Props, Inset {
+}
+export declare function MenubarSubTrigger({ className, inset, children, ...props }: MenubarSubTriggerProps): import("react").JSX.Element;
+export type MenubarSubContentProps = MenubarContentProps;
+/** A nested menu surface. It opens to the side and sizes to its content. */
+export declare function MenubarSubContent({ align, alignOffset, side, sideOffset, className, ...props }: MenubarSubContentProps): import("react").JSX.Element;
+export {};

package/dist/components/menubar.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
+import { Check } from "reicon-react/icons/Check";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { cn, stateClassName } from "../internal/classes.js";
+export const menubarItemVariantNames = ["default", "destructive"];
+/**
+ * A row of menus, like an app's File and View menus. Left and Right move
+ * between triggers, and Down opens the focused menu.
+ */
+export function Menubar({ className, ...props }) {
+    return (_jsx(MenubarPrimitive, { "data-slot": "menubar", ...props, className: stateClassName("sprout-menubar", className) }));
+}
+/** One menu in the bar. Place a `MenubarTrigger` and `MenubarContent` inside. */
+export function MenubarMenu(props) {
+    return _jsx(MenuPrimitive.Root, { ...props });
+}
+export function MenubarPortal(props) {
+    return _jsx(MenuPrimitive.Portal, { "data-slot": "menubar-portal", ...props });
+}
+export function MenubarTrigger({ className, ...props }) {
+    return (_jsx(MenuPrimitive.Trigger, { "data-slot": "menubar-trigger", ...props, className: stateClassName("sprout-menubar-trigger", className) }));
+}
+/**
+ * The menu surface. It renders its own portal and positioner, so place it
+ * directly inside `MenubarMenu`. It lines up with the bar's inner edge.
+ */
+export function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", sideOffset = 8, collisionPadding = 8, collisionAvoidance, sticky, positionMethod, container, className, ...props }) {
+    return (_jsx(MenuPrimitive.Portal, { container: container, children: _jsx(MenuPrimitive.Positioner, { className: "sprout-menubar-positioner", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, collisionAvoidance: collisionAvoidance, sticky: sticky, positionMethod: positionMethod, children: _jsx(MenuPrimitive.Popup, { "data-slot": "menubar-content", ...props, className: stateClassName("sprout-menubar-content", className) }) }) }));
+}
+export function MenubarGroup(props) {
+    return _jsx(MenuPrimitive.Group, { "data-slot": "menubar-group", ...props });
+}
+export function MenubarLabel({ className, inset, ...props }) {
+    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "menubar-label", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-menubar-label", className) }));
+}
+export function MenubarItem({ className, inset, variant = "default", ...props }) {
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "menubar-item", "data-inset": inset || undefined, "data-variant": variant, ...props, className: stateClassName("sprout-menubar-item", className) }));
+}
+/** A toggle row. The check sits at the start, so the label lines up with `inset` rows. */
+export function MenubarCheckboxItem({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-menubar-item sprout-menubar-choice", className), children: [_jsx("span", { className: "sprout-menubar-indicator", "data-slot": "menubar-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(Check, { size: 16, "aria-hidden": "true" }) }) }), children] }));
+}
+export function MenubarRadioGroup(props) {
+    return (_jsx(MenuPrimitive.RadioGroup, { "data-slot": "menubar-radio-group", ...props }));
+}
+export function MenubarRadioItem({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "menubar-radio-item", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-menubar-item sprout-menubar-choice", className), children: [_jsx("span", { className: "sprout-menubar-indicator", "data-slot": "menubar-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(Check, { size: 16, "aria-hidden": "true" }) }) }), children] }));
+}
+export function MenubarSeparator({ className, ...props }) {
+    return (_jsx(MenuPrimitive.Separator, { "data-slot": "menubar-separator", ...props, className: stateClassName("sprout-menubar-separator", className) }));
+}
+/** Right-aligned hint text, such as a keyboard shortcut. It does not bind keys. */
+export function MenubarShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "menubar-shortcut", ...props, className: cn("sprout-menubar-shortcut", className) }));
+}
+export function MenubarSub(props) {
+    return _jsx(MenuPrimitive.SubmenuRoot, { ...props });
+}
+export function MenubarSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "menubar-sub-trigger", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-menubar-item sprout-menubar-sub-trigger", className), children: [children, _jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "sprout-menubar-sub-chevron" })] }));
+}
+/** A nested menu surface. It opens to the side and sizes to its content. */
+export function MenubarSubContent({ align = "start", alignOffset = -5, side = "right", sideOffset = 0, className, ...props }) {
+    return (_jsx(MenubarContent, { "data-slot": "menubar-sub-content", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props, className: stateClassName("sprout-menubar-sub-content", className) }));
+}

package/dist/components/message-actions.d.ts

@@ -0,0 +1,34 @@
+export declare const messageActionsAuthorNames: readonly ["assistant", "human"];
+export type MessageActionsAuthor = (typeof messageActionsAuthorNames)[number];
+export type MessageFeedback = "up" | "down";
+export interface MessageActionsProps {
+    /** The Markdown the message was written in. Copy turns links into `label (url)` plain text. */
+    text: string;
+    /** Names the actions "Message" for `"human"` and "Response" for `"assistant"`. */
+    author?: MessageActionsAuthor;
+    /** ISO time the message was sent, shown as a short local time with the full date on hover. */
+    createdAt?: string | undefined;
+    /** Returns formatted HTML to copy beside the plain text, read when Copy is pressed. */
+    html?: (() => string | undefined) | undefined;
+    /** Hides the row until the surrounding Message is hovered or anything in it has focus. */
+    hover?: boolean;
+    /** The rating already given. Pressing it again clears it. */
+    feedback?: MessageFeedback | null | undefined;
+    /** Shows Helpful and Unhelpful toggles. */
+    onFeedback?: ((value: MessageFeedback | null) => void) | undefined;
+    /** Shows a Regenerate button. */
+    onRetry?: (() => void) | undefined;
+    disabled?: boolean;
+    className?: string | undefined;
+}
+/** Copy, send time, feedback, and regenerate for one chat message. */
+export declare function MessageActions({ text, author, createdAt, html, hover, feedback, onFeedback, onRetry, disabled, className, }: MessageActionsProps): import("react").JSX.Element;
+export interface MessageBranchProps {
+    /** Zero-based version shown now. */
+    index: number;
+    total: number;
+    onChange: (index: number) => void;
+    className?: string | undefined;
+}
+/** Steps between regenerated versions of one response. */
+export declare function MessageBranch({ index, total, onChange, className, }: MessageBranchProps): import("react").JSX.Element;

package/dist/components/message-actions.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Check } from "reicon-react/icons/Check";
+import { ChevronLeft } from "reicon-react/icons/ChevronLeft";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { Copy } from "reicon-react/icons/Copy";
+import { ThumbsDown } from "reicon-react/icons/ThumbsDown";
+import { ThumbsUp } from "reicon-react/icons/ThumbsUp";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+export const messageActionsAuthorNames = ["assistant", "human"];
+const markdownLink = /\[([^\]]*)\]\(<?([^)\s>]+)>?(?:\s+"[^"]*")?\)/g;
+function plainTextFromMarkdown(markdown) {
+    return markdown
+        .replace(markdownLink, (_, label, url) => !label || label === url ? url : `${label} (${url})`)
+        .replace(/<(https?:\/\/[^>\s]+)>/g, "$1");
+}
+function formatDate(options, date) {
+    return Number.isNaN(date.getTime())
+        ? date.toString()
+        : new Intl.DateTimeFormat([], options).format(date);
+}
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+function messageTime(iso, now = new Date()) {
+    const date = new Date(iso);
+    const time = formatDate({ hour: "numeric", minute: "2-digit" }, date);
+    const days = Math.round((startOfDay(now) - startOfDay(date)) / 86_400_000);
+    if (days === 0)
+        return time;
+    if (days === 1)
+        return `Yesterday ${time}`;
+    const day = formatDate(date.getFullYear() === now.getFullYear()
+        ? { month: "short", day: "numeric" }
+        : { month: "short", day: "numeric", year: "numeric" }, date);
+    return `${day}, ${time}`;
+}
+/** Copy, send time, feedback, and regenerate for one chat message. */
+export function MessageActions({ text, author = "assistant", createdAt, html, hover = false, feedback, onFeedback, onRetry, disabled = false, className, }) {
+    const [copy, setCopy] = useState("idle");
+    const noun = author === "human" ? "message" : "response";
+    const Noun = author === "human" ? "Message" : "Response";
+    const copyText = async () => {
+        const plain = plainTextFromMarkdown(text);
+        const rich = html?.();
+        try {
+            if (rich && typeof ClipboardItem !== "undefined")
+                await navigator.clipboard.write([
+                    new ClipboardItem({
+                        "text/html": new Blob([rich], { type: "text/html" }),
+                        "text/plain": new Blob([plain], { type: "text/plain" }),
+                    }),
+                ]);
+            else
+                await navigator.clipboard.writeText(plain);
+            setCopy("copied");
+        }
+        catch {
+            setCopy("error");
+        }
+    };
+    const rate = (value) => onFeedback?.(feedback === value ? null : value);
+    return (_jsxs("div", { "data-slot": "message-actions", "data-author": author, className: cn("sprout-message-actions", className), children: [_jsxs("div", { role: "group", "aria-label": `${Noun} actions`, "data-hover": hover ? "" : undefined, className: "sprout-message-actions-row", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", disabled: disabled, "aria-label": copy === "copied" ? `${Noun} copied` : `Copy ${noun}`, title: `Copy ${noun}`, "data-copied": copy === "copied" ? "" : undefined, onClick: () => void copyText(), children: copy === "copied" ? (_jsx(Check, { size: 16, "aria-hidden": "true" })) : (_jsx(Copy, { size: 16, "aria-hidden": "true" })) }), createdAt && (_jsx("time", { className: "sprout-message-actions-time", dateTime: createdAt, title: formatDate({ dateStyle: "full", timeStyle: "medium" }, new Date(createdAt)), children: messageTime(createdAt) })), onFeedback && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: feedback === "up" ? "secondary" : "ghost", size: "icon-sm", disabled: disabled, "aria-label": "Helpful response", "aria-pressed": feedback === "up", title: "Helpful", onClick: () => rate("up"), children: _jsx(ThumbsUp, { size: 16, "aria-hidden": "true" }) }), _jsx(Button, { variant: feedback === "down" ? "secondary" : "ghost", size: "icon-sm", disabled: disabled, "aria-label": "Unhelpful response", "aria-pressed": feedback === "down", title: "Unhelpful", onClick: () => rate("down"), children: _jsx(ThumbsDown, { size: 16, "aria-hidden": "true" }) })] })), onRetry && (_jsx(Button, { variant: "ghost", size: "sm", disabled: disabled, onClick: onRetry, children: "Regenerate" }))] }), copy === "error" && (_jsxs("p", { role: "alert", className: "sprout-message-actions-error", children: ["Couldn't copy. Select the ", noun, " text or try again."] })), _jsx("span", { role: "status", className: "sprout-message-actions-sr-only", children: copy === "copied" ? `${Noun} copied to clipboard.` : "" })] }));
+}
+/** Steps between regenerated versions of one response. */
+export function MessageBranch({ index, total, onChange, className, }) {
+    return (_jsxs("div", { "data-slot": "message-branch", role: "group", "aria-label": "Response versions", className: cn("sprout-message-branch", className), children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Previous response", disabled: index <= 0, onClick: () => onChange(index - 1), children: _jsx(ChevronLeft, { size: 14, "aria-hidden": "true" }) }), _jsxs("span", { "aria-live": "polite", className: "sprout-message-branch-count", children: [index + 1, " / ", total] }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next response", disabled: index >= total - 1, onClick: () => onChange(index + 1), children: _jsx(ChevronRight, { size: 14, "aria-hidden": "true" }) })] }));
+}

package/dist/components/message-response.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Renders one Markdown link. Return a plain `<a>` for links you do not handle. */
+export type MessageResponseRenderLink = (href: string, children: ReactNode) => ReactNode;
+export interface MessageTableViewportProps {
+    /** Caps every table inside at 12rem tall and scrolls both ways; otherwise tables only scroll sideways. */
+    bounded: boolean;
+    children?: ReactNode;
+}
+/** Sets how tall the tables in the responses inside it may grow. */
+export declare function MessageTableViewport({ bounded, children, }: MessageTableViewportProps): import("react").JSX.Element;
+export interface MessageResponseProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Markdown with GitHub extensions. Raw HTML is dropped and images are not shown. */
+    children: string;
+    /** Marks the response busy and shows a caret after the text. */
+    streaming?: boolean | undefined;
+    /** Replaces every link, for citations, downloads, or in-app routes. */
+    renderLink?: MessageResponseRenderLink | undefined;
+}
+/** Renders an assistant's Markdown reply: headings, lists, quotes, tables, task lists, and code blocks. */
+export declare function MessageResponse({ children, streaming, renderLink, className, ...props }: MessageResponseProps): import("react").JSX.Element;

package/dist/components/message-response.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, } from "react";
+import Markdown, {} from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { cn } from "../internal/classes.js";
+import { CodeBlock } from "./code-block.js";
+const LinkContext = createContext(undefined);
+const TableContext = createContext(false);
+/** Sets how tall the tables in the responses inside it may grow. */
+export function MessageTableViewport({ bounded, children, }) {
+    return _jsx(TableContext, { value: bounded, children: children });
+}
+const ResponseTable = ({ children }) => {
+    const bounded = useContext(TableContext);
+    return (_jsx("div", { className: "sprout-message-response-table", "data-bounded": bounded ? "" : undefined, tabIndex: 0, role: "region", "aria-label": "Response table", children: _jsx("table", { children: children }) }));
+};
+function ResponseLink({ href, children }) {
+    const render = useContext(LinkContext);
+    return render ? (render(href ?? "", children)) : (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", children: children }));
+}
+const components = {
+    pre({ node, children }) {
+        const code = node?.children[0];
+        if (code?.type !== "element" || code.tagName !== "code")
+            return _jsx("pre", { children: children });
+        const classes = code.properties.className;
+        const language = Array.isArray(classes)
+            ? classes.find((value) => typeof value === "string" && value.startsWith("language-"))
+            : undefined;
+        const text = code.children
+            .map((child) => (child.type === "text" ? child.value : ""))
+            .join("")
+            .replace(/\n$/, "");
+        return (_jsx(CodeBlock, { code: text, language: language ? language.slice(9) : "text" }));
+    },
+    a: ResponseLink,
+    table: ResponseTable,
+    // GFM task list boxes have no label of their own; the item text follows them.
+    input: ({ node: _node, ...props }) => props.type === "checkbox" ? (_jsx("input", { ...props, "aria-label": "Task" })) : (_jsx("input", { ...props })),
+};
+/** Renders an assistant's Markdown reply: headings, lists, quotes, tables, task lists, and code blocks. */
+export function MessageResponse({ children, streaming = false, renderLink, className, ...props }) {
+    const markdown = useMemo(() => (_jsx(Markdown, { remarkPlugins: [remarkGfm], components: components, skipHtml: true, disallowedElements: ["img"], children: children })), [children]);
+    return (_jsxs("div", { "data-slot": "message-response", "data-streaming": streaming ? "" : undefined, "aria-busy": streaming, ...props, className: cn("sprout-message-response", className), children: [_jsx(LinkContext, { value: renderLink, children: markdown }), streaming && (_jsx("span", { "aria-hidden": "true", className: "sprout-message-response-caret" }))] }));
+}

package/dist/components/message-scroller.d.ts

@@ -0,0 +1,71 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type MessageScrollerDefaultScrollPosition, type MessageScrollerScrollable, type MessageScrollerScrollOptions, type MessageScrollerVisibilityState } from "../internal/message-scroller.js";
+import { type ButtonSize, type ButtonVariant } from "./button.js";
+export type { MessageScrollerDefaultScrollPosition, MessageScrollerScrollAlign, MessageScrollerScrollable, MessageScrollerScrollOptions, MessageScrollerVisibilityState, } from "../internal/message-scroller.js";
+export declare const messageScrollerDefaultScrollPositionNames: readonly ["end", "start", "last-anchor"];
+export declare const messageScrollerButtonDirectionNames: readonly ["end", "start"];
+export declare const messageScrollerScrollAlignNames: readonly ["start", "center", "end", "nearest"];
+export type MessageScrollerButtonDirection = (typeof messageScrollerButtonDirectionNames)[number];
+export interface MessageScrollerProviderProps {
+    children?: ReactNode;
+    /** Keep following the newest content while the reader is at the end. */
+    autoScroll?: boolean | undefined;
+    /** Where the history opens: the newest message, the oldest, or the last `scrollAnchor` item pinned under the top edge. */
+    defaultScrollPosition?: MessageScrollerDefaultScrollPosition | undefined;
+    /** Pixels from an edge that still count as “at” it. */
+    scrollEdgeThreshold?: number | undefined;
+    /** Pixels of the previous message left showing above a pinned turn. */
+    scrollPreviousItemPeek?: number | undefined;
+    /** Extra pixels kept above a message scrolled into view. */
+    scrollMargin?: number | undefined;
+}
+/** Owns the scroll state. Wrap the scroller and anything that calls the hooks, such as a composer. */
+export declare function MessageScrollerProvider({ children, autoScroll, defaultScrollPosition, scrollEdgeThreshold, scrollPreviousItemPeek, scrollMargin, }: MessageScrollerProviderProps): import("react").JSX.Element;
+export type MessageScrollerProps = ComponentProps<"div">;
+/** The positioned frame. Holds the viewport and the jump buttons, and fills its parent. */
+export declare function MessageScroller({ className, ref, ...props }: MessageScrollerProps): import("react").JSX.Element;
+export interface MessageScrollerViewportProps extends ComponentProps<"div"> {
+    /** Keep the message you are reading still when older messages load above it. */
+    preserveScrollOnPrepend?: boolean | undefined;
+}
+/** The scrolling region. Focusable, named “Messages” unless you pass `aria-label`. */
+export declare function MessageScrollerViewport({ className, ref, role, tabIndex, preserveScrollOnPrepend, onKeyDown, onScroll, onTouchMove, onWheel, "aria-label": ariaLabel, ...props }: MessageScrollerViewportProps): import("react").JSX.Element;
+export interface MessageScrollerContentProps extends ComponentProps<"div"> {
+    /** Class for the hidden spacer that lets a pinned turn reach the top edge. */
+    spacerClassName?: string | undefined;
+}
+/** The message column, a polite `log` that announces additions. Items sit 24px apart. */
+export declare function MessageScrollerContent({ className, children, ref, role, spacerClassName, "aria-relevant": ariaRelevant, ...props }: MessageScrollerContentProps): import("react").JSX.Element;
+export interface MessageScrollerItemProps extends ComponentProps<"div"> {
+    /** Stable id used by `scrollToMessage` and visibility. */
+    messageId?: string | undefined;
+    /** Pin this item under the top edge when it is added, such as the newest user turn. */
+    scrollAnchor?: boolean | undefined;
+}
+/** One message or turn in the column. Off-screen items skip rendering work. */
+export declare function MessageScrollerItem({ className, ref, messageId, scrollAnchor, ...props }: MessageScrollerItemProps): import("react").JSX.Element;
+export interface MessageScrollerButtonState extends Record<string, unknown> {
+    active: boolean;
+    direction: MessageScrollerButtonDirection;
+}
+export type MessageScrollerButtonProps = useRender.ComponentProps<"button", MessageScrollerButtonState> & {
+    /** Which edge the button scrolls to. `"start"` sits at the top with the arrow turned up. */
+    direction?: MessageScrollerButtonDirection | undefined;
+    /** `"smooth"` by default; becomes `"auto"` when reduced motion is set. */
+    behavior?: ScrollBehavior | undefined;
+    variant?: ButtonVariant | undefined;
+    size?: ButtonSize | undefined;
+};
+/** A floating jump button that shows only while there is more history in its direction. */
+export declare function MessageScrollerButton({ className, children, render, ref, direction, behavior, variant, size, tabIndex, onClick, ...props }: MessageScrollerButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Scroll the history from outside it, such as after sending or from a “jump to” link. */
+export declare function useMessageScroller(): {
+    scrollToEnd: (options?: MessageScrollerScrollOptions) => boolean;
+    scrollToMessage: (messageId: string, options?: MessageScrollerScrollOptions) => boolean;
+    scrollToStart: (options?: MessageScrollerScrollOptions) => boolean;
+};
+/** Whether there is more history above (`start`) or below (`end`) the current view. */
+export declare function useMessageScrollerScrollable(): MessageScrollerScrollable;
+/** The ids of items in view and the pinned turn under the top edge. Observes only while used. */
+export declare function useMessageScrollerVisibility(): MessageScrollerVisibilityState;

package/dist/components/message-scroller.js

@@ -0,0 +1,217 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { ArrowDown } from "reicon-react/icons/ArrowDown";
+import { cn } from "../internal/classes.js";
+import { MessageScrollerController, scrollIntentKeys, } from "../internal/message-scroller.js";
+import { Button } from "./button.js";
+export const messageScrollerDefaultScrollPositionNames = [
+    "end",
+    "start",
+    "last-anchor",
+];
+export const messageScrollerButtonDirectionNames = ["end", "start"];
+export const messageScrollerScrollAlignNames = [
+    "start",
+    "center",
+    "end",
+    "nearest",
+];
+const ScrollerContext = createContext(null);
+function useController(part) {
+    const controller = useContext(ScrollerContext);
+    if (!controller)
+        throw new Error(`${part} must be used within a MessageScrollerProvider.`);
+    return controller;
+}
+function assignRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+function usePendingDefaultScroll(controller) {
+    const store = controller.pendingDefaultStore;
+    return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+}
+/** Owns the scroll state. Wrap the scroller and anything that calls the hooks, such as a composer. */
+export function MessageScrollerProvider({ children, autoScroll = false, defaultScrollPosition = "end", scrollEdgeThreshold = 8, scrollPreviousItemPeek = 64, scrollMargin = 0, }) {
+    const options = {
+        autoScroll,
+        defaultScrollPosition,
+        scrollEdgeThreshold,
+        scrollPreviousItemPeek,
+        scrollMargin,
+    };
+    const [controller] = useState(() => new MessageScrollerController(options));
+    controller.setOptions(options);
+    useLayoutEffect(() => controller.applyDefaultOrSettle(), [controller, defaultScrollPosition]);
+    useLayoutEffect(() => controller.followOnAutoScroll(), [controller, autoScroll]);
+    useEffect(() => controller.dispose, [controller]);
+    return (_jsx(ScrollerContext.Provider, { value: controller, children: children }));
+}
+/** The positioned frame. Holds the viewport and the jump buttons, and fills its parent. */
+export function MessageScroller({ className, ref, ...props }) {
+    const controller = useController("MessageScroller");
+    const pending = usePendingDefaultScroll(controller);
+    const setRef = useCallback((element) => {
+        controller.setRoot(element);
+        assignRef(ref, element);
+    }, [controller, ref]);
+    return (_jsx("div", { "data-slot": "message-scroller", ref: setRef, className: cn("sprout-message-scroller", className), ...props, ...(pending ? { "data-pending-scroll": "" } : null) }));
+}
+/** The scrolling region. Focusable, named “Messages” unless you pass `aria-label`. */
+export function MessageScrollerViewport({ className, ref, role, tabIndex, preserveScrollOnPrepend = true, onKeyDown, onScroll, onTouchMove, onWheel, "aria-label": ariaLabel, ...props }) {
+    const controller = useController("MessageScrollerViewport");
+    const pending = usePendingDefaultScroll(controller);
+    controller.preserveScrollOnPrepend = preserveScrollOnPrepend;
+    const setRef = useCallback((element) => {
+        controller.setViewport(element);
+        assignRef(ref, element);
+    }, [controller, ref]);
+    useEffect(() => {
+        const viewport = controller.getViewport();
+        if (!viewport || typeof ResizeObserver === "undefined")
+            return;
+        let frame = 0;
+        const observer = new ResizeObserver(() => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(controller.handleResize);
+        });
+        observer.observe(viewport);
+        return () => {
+            cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    }, [controller]);
+    return (_jsx("div", { "data-slot": "message-scroller-viewport", ref: setRef, role: role ?? "region", "aria-label": ariaLabel ?? "Messages", tabIndex: tabIndex ?? 0, className: cn("sprout-message-scroller-viewport", className), onKeyDown: (event) => {
+            if (scrollIntentKeys.has(event.key))
+                controller.userScrollIntent();
+            onKeyDown?.(event);
+        }, onScroll: (event) => {
+            controller.syncAfterScroll();
+            onScroll?.(event);
+        }, onTouchMove: (event) => {
+            controller.userScrollIntent();
+            onTouchMove?.(event);
+        }, onWheel: (event) => {
+            controller.userScrollIntent();
+            onWheel?.(event);
+        }, ...props, ...(pending ? { "data-pending-scroll": "" } : null) }));
+}
+/** The message column, a polite `log` that announces additions. Items sit 24px apart. */
+export function MessageScrollerContent({ className, children, ref, role, spacerClassName, "aria-relevant": ariaRelevant, ...props }) {
+    const controller = useController("MessageScrollerContent");
+    const element = useRef(null);
+    const setRef = useCallback((node) => {
+        element.current = node;
+        controller.setContent(node);
+        assignRef(ref, node);
+    }, [controller, ref]);
+    useLayoutEffect(() => {
+        const node = element.current;
+        if (!node)
+            return;
+        controller.handleContentChange();
+        if (typeof MutationObserver === "undefined")
+            return;
+        const observer = new MutationObserver(controller.handleContentChange);
+        observer.observe(node, { childList: true });
+        return () => observer.disconnect();
+    }, [controller]);
+    useEffect(() => {
+        const node = element.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let frame = 0;
+        const observer = new ResizeObserver(() => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(controller.handleResize);
+        });
+        observer.observe(node);
+        return () => {
+            cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    }, [controller]);
+    return (_jsxs("div", { "data-slot": "message-scroller-content", ref: setRef, role: role ?? "log", "aria-relevant": ariaRelevant ?? "additions", className: cn("sprout-message-scroller-content", className), ...props, children: [children, _jsx("div", { ref: controller.setSpacer, "aria-hidden": "true", "data-message-scroller-spacer": "", hidden: true, className: spacerClassName })] }));
+}
+/** One message or turn in the column. Off-screen items skip rendering work. */
+export function MessageScrollerItem({ className, ref, messageId, scrollAnchor = false, ...props }) {
+    const controller = useController("MessageScrollerItem");
+    const previous = useRef(null);
+    const setRef = useCallback((node) => {
+        const before = previous.current;
+        previous.current = node;
+        if (messageId)
+            controller.registerMessage(messageId, node, before);
+        assignRef(ref, node);
+    }, [controller, messageId, ref]);
+    return (_jsx("div", { "data-slot": "message-scroller-item", ref: setRef, "data-message-id": messageId, "data-scroll-anchor": scrollAnchor ? "true" : "false", className: cn("sprout-message-scroller-item", className), ...props }));
+}
+const prefersReducedMotion = () => typeof matchMedia === "function" &&
+    matchMedia("(prefers-reduced-motion: reduce)").matches;
+/** A floating jump button that shows only while there is more history in its direction. */
+export function MessageScrollerButton({ className, children, render, ref, direction = "end", behavior = "smooth", variant = "secondary", size = "icon-sm", tabIndex, onClick, ...props }) {
+    const controller = useController("MessageScrollerButton");
+    const store = controller.stateStore;
+    const read = useCallback(() => direction === "start"
+        ? store.getSnapshot().start
+        : store.getSnapshot().end, [direction, store]);
+    const active = useSyncExternalStore(store.subscribe, read, read);
+    const state = useMemo(() => ({ active, direction }), [active, direction]);
+    return useRender({
+        defaultTagName: "button",
+        render: render ?? _jsx(Button, { variant: variant, size: size }),
+        ref,
+        state,
+        stateAttributesMapping: { active: () => null },
+        props: mergeProps({
+            type: "button",
+            "data-slot": "message-scroller-button",
+            "data-active": active ? "true" : "false",
+            className: cn("sprout-message-scroller-button", className),
+            inert: !active,
+            tabIndex: active ? tabIndex : -1,
+            onClick: (event) => {
+                if (!active)
+                    return;
+                onClick?.(event);
+                if (event.defaultPrevented)
+                    return;
+                event.currentTarget.blur();
+                const scroll = {
+                    behavior: prefersReducedMotion() ? "auto" : behavior,
+                };
+                if (direction === "start")
+                    controller.scrollToStart(scroll);
+                else
+                    controller.scrollToEnd(scroll);
+            },
+            children: children ?? (_jsxs(_Fragment, { children: [_jsx(ArrowDown, { "aria-hidden": "true" }), _jsx("span", { className: "sprout-message-scroller-sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })] })),
+        }, props),
+    });
+}
+/** Scroll the history from outside it, such as after sending or from a “jump to” link. */
+export function useMessageScroller() {
+    const controller = useController("useMessageScroller");
+    return useMemo(() => ({
+        scrollToEnd: controller.scrollToEnd,
+        scrollToMessage: controller.scrollToMessage,
+        scrollToStart: controller.scrollToStart,
+    }), [controller]);
+}
+/** Whether there is more history above (`start`) or below (`end`) the current view. */
+export function useMessageScrollerScrollable() {
+    const store = useController("useMessageScrollerScrollable").stateStore;
+    return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+}
+/** The ids of items in view and the pinned turn under the top edge. Observes only while used. */
+export function useMessageScrollerVisibility() {
+    const controller = useController("useMessageScrollerVisibility");
+    const store = controller.visibilityStore;
+    const subscribe = useCallback((listener) => store.subscribe(listener, controller.observeVisibility, controller.unobserveVisibility), [controller, store]);
+    return useSyncExternalStore(subscribe, store.getSnapshot, store.getSnapshot);
+}