@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/chat.js

@@ -0,0 +1,545 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowClockwiseIcon, ArrowUpIcon } from "@phosphor-icons/react";
+import { isSameDay, isToday, isYesterday } from "date-fns";
+import { Fragment, useEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { css, cva, cx } from "#primitives/css";
+import { listMessageGroupPositions, } from "../chat/message-group-position.js";
+import { Button, IconButton } from "./button.js";
+import { Avatar } from "./data-display.js";
+import { fileSquare, fileTypeIcon } from "./dropzone.js";
+import { icon, Spinner } from "./icon.js";
+import { Lightbox } from "./lightbox.js";
+import { useCiridaeLocale } from "./locale.js";
+import { MentionInput } from "./mention-input.js";
+/*
+ * Two composers share one behaviour: `page` is the wide card of a chat page, and `sheet` the
+ * composer at the foot of the agent sheet, its parts side by side as a messaging app's: the tools
+ * as bare icons, the text in a box of its own and a round send, all level with the box's last
+ * line. The box reads as a pill while it holds one line and as a soft card as it grows, line by
+ * line to six before it scrolls; what goes with the message, such as files, waits as chips just
+ * above it. `feed` is the sheet's composer for a comment under an activity feed: Enter breaks the
+ * line there, and Cmd/Ctrl+Enter sends.
+ */
+const pageComposer = css({
+    display: "flex",
+    width: "100%",
+    flexDirection: "column",
+    overflow: "hidden",
+    maxWidth: "chat.composer",
+    minHeight: "chat.composerMinimum",
+    border: "1px solid token(colors.border.glass)",
+    borderRadius: "card",
+    background: "bg.surface",
+    boxShadow: "card",
+    _focusWithin: { borderColor: "border.focus", boxShadow: "focus" },
+    _phone: { borderRadius: "inset" },
+    "& > [data-attachments]": { paddingInline: "page.inline", paddingTop: "page.inline" },
+});
+const pageInput = css({
+    width: "100%",
+    minHeight: "chat.input",
+    maxHeight: "calc(10lh + 2 * token(spacing.page.inline))",
+    padding: "page.inline",
+    fontSize: "body",
+    lineHeight: "body",
+    _phone: { minHeight: "chat.inputMobile", padding: "panel.comfortable" },
+});
+const sheetComposer = css({
+    display: "flex",
+    alignItems: "flex-end",
+    gap: "layout.tightGap",
+    width: "100%",
+    minWidth: "0",
+});
+// The tools and send: as tall as the box at one line, so they stay level with its last line.
+const sheetSide = css({
+    display: "flex",
+    flexShrink: "0",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    height: "control.compact",
+});
+const sheetColumn = css({ display: "grid", flex: "1", minWidth: "0", gap: "layout.tightGap" });
+const sheetBox = css({
+    display: "flex",
+    alignItems: "flex-end",
+    minWidth: "0",
+    border: "1px solid token(colors.border.control)",
+    // Half the one-line height: a pill at one line, a soft card past it.
+    borderRadius: "calc(token(sizes.control.compact) / 2)",
+    background: "bg.field",
+    _focusWithin: { borderColor: "border.focus", boxShadow: "focus" },
+    "& > [data-actions]": {
+        display: "flex",
+        flexShrink: "0",
+        alignItems: "center",
+        height: "calc(token(sizes.control.compact) - 2px)",
+        paddingInlineEnd: "control.trackInset",
+    },
+});
+// Each line keeps the one-line box's rhythm, so the first wrap only adds a line.
+const sheetInput = css({
+    flex: "1",
+    paddingInline: "control.compactInline",
+    paddingBlock: "calc((token(sizes.control.compact) - 2px - 1lh) / 2)",
+    maxHeight: "calc(5lh + token(sizes.control.compact) - 2px)",
+    fontSize: "caption",
+    lineHeight: "compact",
+});
+const composerFooter = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.contentGap",
+    minHeight: "chat.footer",
+    paddingBlock: "panel.default",
+    paddingInline: "panel.comfortable",
+    borderTop: "1px solid token(colors.border.glass)",
+    _phone: {
+        flexWrap: "wrap",
+        padding: "panel.default",
+        "& > :last-child": { marginInlineStart: "auto", overflow: "visible" },
+    },
+});
+const actionGroup = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    flexWrap: "wrap",
+    _phone: {
+        maxWidth: "100%",
+        flexWrap: "nowrap",
+        overflowX: "auto",
+        scrollbarWidth: "none",
+    },
+});
+const chatAction = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    height: "control.compact",
+    paddingInline: "control.compactInline",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "pill",
+    background: "bg.pill",
+    color: "fg.muted",
+    fontFamily: "sans",
+    fontSize: "caption",
+    lineHeight: "tight",
+    cursor: "pointer",
+    flexShrink: "0",
+    _hover: { color: "fg.primary", borderColor: "fg.muted" },
+});
+/*
+ * A message bubble in the agent sheet: the user's on the right in the primary face, the
+ * assistant's on the left in the neutral fill. The corner on its side is small where it joins the
+ * bubble above or below it, so a run of messages reads as one stack.
+ */
+const bubble = cva({
+    base: {
+        position: "relative",
+        maxWidth: "chat.bubble",
+        paddingBlock: "control.compactBlock",
+        paddingInline: "control.compactInline",
+        borderRadius: "field",
+        fontSize: "caption",
+        lineHeight: "log",
+        overflowWrap: "anywhere",
+    },
+    variants: {
+        side: {
+            user: {
+                alignSelf: "flex-end",
+                borderEndEndRadius: "keycap",
+                background: "bg.primary",
+                color: "bg.canvas",
+                _light: { color: "fg.onAccent" },
+                whiteSpace: "pre-wrap",
+                "&[data-group-position=middle], &[data-group-position=last]": {
+                    borderStartEndRadius: "keycap",
+                },
+            },
+            assistant: {
+                alignSelf: "flex-start",
+                borderEndStartRadius: "keycap",
+                background: "bg.fill",
+                color: "fg.primary",
+                "&[data-group-position=middle], &[data-group-position=last]": {
+                    borderStartStartRadius: "keycap",
+                },
+            },
+        },
+    },
+});
+/** A line about the conversation rather than in it, centered between bubbles. */
+const systemLine = css({
+    alignSelf: "center",
+    maxWidth: "85%",
+    color: "fg.muted",
+    fontSize: "code",
+    lineHeight: "compact",
+    textAlign: "center",
+    overflowWrap: "anywhere",
+    "&[data-tone=error]": { color: "accent.red" },
+});
+const dayLabel = css({ marginBlock: "layout.controlGap", fontWeight: "medium" });
+/*
+ * The thread: bubbles 4px apart, groups 12px apart, lines centered between them. Compact, as the
+ * agent sheet draws it, keeps 8px above and below and between groups.
+ */
+const thread = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "layout.tightGap",
+    padding: "panel.default",
+    "&[data-density=compact]": {
+        paddingBlock: "layout.controlGap",
+        "& > [data-group-position=single], & > [data-group-position=first]": {
+            marginTop: "layout.tightGap",
+        },
+    },
+});
+/* A reply's sources under its bubble: small links in a row. */
+const sourceRow = css({
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    columnGap: "layout.controlGap",
+    rowGap: "control.trackInset",
+    paddingInline: "layout.tightGap",
+    color: "fg.muted",
+    fontSize: "code",
+    lineHeight: "compact",
+    "[data-side=assistant] > &": {
+        marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
+    },
+    "& a": { color: "fg.secondary", textDecoration: "none", _hover: { color: "fg.primary" } },
+});
+/* Files sent with a message, as tiles over its bubble: image thumbnails, or a file's icon and name. */
+const attachmentTiles = css({
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "layout.tightGap",
+    maxWidth: "chat.bubble",
+    "[data-side=user] > &": { justifyContent: "flex-end" },
+    "[data-side=assistant] > &": {
+        marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
+    },
+});
+/* Prompts to start from, stacked flush over the composer of an empty conversation. */
+const suggestionList = css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "flex-end",
+    gap: "layout.tightGap",
+    minHeight: "100%",
+    padding: "panel.default",
+});
+const suggestion = css({
+    display: "inline-flex",
+    alignItems: "center",
+    maxWidth: "100%",
+    height: "control.small",
+    paddingInline: "control.compactInline",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "action",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    fontSize: "caption",
+    lineHeight: "compact",
+    textAlign: "start",
+    cursor: "pointer",
+    _hover: { background: "bg.hover" },
+    _focusVisible: { focusRing: "outer" },
+});
+/* An entry: its bubble beside the avatar slot, and under the group's last one its footer. */
+const entryBlock = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "layout.tightGap",
+    minWidth: "0",
+    "&[data-side=user]": { alignItems: "flex-end" },
+    "&[data-group-position=single], &[data-group-position=first]": {
+        marginTop: "layout.controlGap",
+    },
+    // A message's own controls, such as Copy, show while it is hovered or focused.
+    "& [data-entry-actions]": {
+        display: "inline-flex",
+        alignItems: "center",
+        alignSelf: "center",
+        flexShrink: "0",
+        opacity: "0",
+        transition: "opacity 120ms ease",
+    },
+    "&:hover [data-entry-actions], &:focus-within [data-entry-actions]": { opacity: "1" },
+    "@media (hover: none)": { "& [data-entry-actions]": { opacity: "1" } },
+});
+// Full width, so a bubble's maximum is a share of the thread rather than of its own text.
+const entryRow = css({
+    display: "flex",
+    alignItems: "flex-end",
+    gap: "control.iconGap",
+    width: "100%",
+    minWidth: "0",
+    "[data-side=user] > &": { justifyContent: "flex-end" },
+});
+const avatarSlot = css({ flexShrink: "0", width: "avatar.small" });
+const entryFooter = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    paddingInline: "layout.tightGap",
+    color: "fg.muted",
+    fontSize: "code",
+    lineHeight: "compact",
+    fontVariantNumeric: "tabular-nums",
+    "[data-side=assistant] > &": {
+        marginInlineStart: "calc(token(sizes.avatar.small) + token(spacing.control.iconGap))",
+    },
+});
+const attachmentList = css({
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "layout.tightGap",
+    marginBlockStart: "layout.tightGap",
+    opacity: "0.8",
+    fontSize: "code",
+    "& a": { color: "inherit" },
+});
+const typingBubble = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    color: "fg.muted",
+});
+const errorBubble = css({
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    border: "1px solid token(colors.border.error)",
+    background: "bg.errorSubtle",
+});
+const typingDots = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.trackInset",
+    height: "1lh",
+    "& > span": {
+        width: "indicator.live",
+        height: "indicator.live",
+        borderRadius: "round",
+        background: "fg.muted",
+        animation: "livePulse 1.2s ease-in-out infinite",
+        _motionReduce: { animation: "none" },
+    },
+    "& > span:nth-child(2)": { animationDelay: "0.2s" },
+    "& > span:nth-child(3)": { animationDelay: "0.4s" },
+});
+export function ChatComposer({ value, defaultValue = "", onValueChange, onSend, placeholder, ariaLabel: ownAriaLabel, tools, actions, submitLabel: ownSubmitLabel, sendDisabled = false, sendsWithoutText = false, attachments, variant = "page", autoFocus, mentions, mentionMark, mentionsLabel, inputProps, className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    const ariaLabel = ownAriaLabel ?? labels.chat.message;
+    const submitLabel = ownSubmitLabel ?? labels.chat.sendMessage;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const currentValue = value ?? internalValue;
+    const setValue = (nextValue) => {
+        if (value === undefined)
+            setInternalValue(nextValue);
+        onValueChange?.(nextValue);
+    };
+    const canSend = (sendsWithoutText || currentValue.trim().length > 0) && !sendDisabled;
+    const send = () => {
+        if (!canSend)
+            return;
+        onSend?.(currentValue);
+        setValue("");
+    };
+    const sheet = variant !== "page";
+    const input = (_jsx(MentionInput, { ...inputProps, "aria-label": ariaLabel, autoFocus: autoFocus, className: cx(sheet ? sheetInput : pageInput, inputProps?.className), value: currentValue, onValueChange: setValue, triggers: mentions, mentionMark: mentionMark, listLabel: mentionsLabel, placeholder: placeholder, submitOn: variant === "feed" ? "mod+enter" : "enter", onSubmit: send }));
+    // The sheet's send is quiet until there is something to send.
+    const sendButton = (_jsx(IconButton, { "aria-label": submitLabel, disabled: !canSend, onClick: send, variant: sheet ? (canSend ? "primary" : "ghost") : "raised", children: _jsx(ArrowUpIcon, { className: icon({ size: "small" }), weight: "bold" }) }));
+    const waiting = attachments ? _jsx("div", { "data-attachments": "", children: attachments }) : null;
+    if (sheet) {
+        return (_jsxs("div", { ...props, className: cx(sheetComposer, className), "data-ciridae-ui": "", children: [tools && _jsx("div", { className: sheetSide, children: tools }), _jsxs("div", { className: sheetColumn, children: [waiting, _jsxs("div", { className: sheetBox, children: [input, actions && _jsx("div", { "data-actions": "", children: actions })] })] }), _jsx("div", { className: sheetSide, children: sendButton })] }));
+    }
+    return (_jsxs("div", { ...props, className: cx(pageComposer, className), "data-ciridae-ui": "", children: [waiting, input, _jsxs("div", { className: composerFooter, children: [_jsx("div", { className: actionGroup, children: tools }), _jsxs("div", { className: actionGroup, children: [actions, sendButton] })] })] }));
+}
+/** A message bubble in the agent sheet. */
+export function ChatBubble({ side, groupPosition, className, ...props }) {
+    return (_jsx("div", { ...props, className: cx(bubble({ side }), className), "data-ciridae-ui": "", "data-group-position": groupPosition }));
+}
+/** A centered line between bubbles: a finished tool call, a decision, something the page did. */
+export function ChatSystemLine({ tone, className, ...props }) {
+    return (_jsx("div", { ...props, className: cx(systemLine, className), "data-ciridae-ui": "", "data-tone": tone === "error" ? "error" : undefined }));
+}
+/** Three pulsing dots: the assistant is typing. */
+export function ChatTypingDots({ className, ...props }) {
+    return (_jsxs("span", { ...props, className: cx(typingDots, className), "data-ciridae-ui": "", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }));
+}
+export function ChatAction({ className, ...props }) {
+    return (_jsx("button", { ...props, className: cx(chatAction, className), "data-ciridae-ui": "", type: props.type ?? "button" }));
+}
+/*
+ * A conversation in time order. Close messages from one author read as a group: bubbles 4px
+ * apart, groups 8px apart, the author's avatar beside the group's last bubble on the assistant's
+ * side and the author and time once under it. The nearest scrolling ancestor, or the thread
+ * itself, follows the newest entry.
+ */
+export function ChatThread({ entries, assistant, renderCustom, formatTime, density = "comfortable", attachmentTiles = false, dayLabels = false, className, }) {
+    const rootRef = useRef(null);
+    const { formatDateTime } = useCiridaeLocale();
+    const authorOf = (entry) => entry.kind === "line" || entrySide(entry) === "user"
+        ? undefined
+        : ((entry.kind === "message" ? entry.author : undefined) ?? assistant);
+    const positions = listMessageGroupPositions(entries.map((entry) => ({
+        side: entry.kind === "line" ? null : entrySide(entry),
+        at: entry.at,
+        author: authorOf(entry)?.name,
+    })));
+    // Follows the newest entry.
+    const newestEntry = entries[entries.length - 1];
+    useEffect(() => {
+        const root = rootRef.current;
+        const scroller = root && findScrollContainer(root);
+        if (scroller)
+            scroller.scrollTop = scroller.scrollHeight;
+    }, [newestEntry?.id, entries.length]);
+    return (_jsx("div", { ref: rootRef, className: cx(thread, className), "data-ciridae-ui": "", "data-density": density === "compact" ? "compact" : undefined, children: entries.map((entry, index) => {
+            const previous = entries[index - 1];
+            const newDay = dayLabels && (!previous || !isSameDay(previous.at, entry.at));
+            const content = renderEntry(entry, index);
+            return newDay ? (_jsxs(Fragment, { children: [_jsx(DayLabel, { at: entry.at }), content] }, entry.id)) : (content);
+        }) }));
+    function renderEntry(entry, index) {
+        if (entry.kind === "line") {
+            return (_jsx(ChatSystemLine, { tone: entry.tone, children: entry.text }, entry.id));
+        }
+        const side = entrySide(entry);
+        const author = authorOf(entry);
+        const position = positions[index] ?? undefined;
+        const closesGroup = position === "single" || position === "last";
+        const message = entry.kind === "message" ? entry : null;
+        const tiles = attachmentTiles && message?.attachments && message.attachments.length > 0
+            ? message.attachments
+            : null;
+        return (_jsxs("div", { className: entryBlock, "data-side": side, "data-group-position": position, children: [tiles && _jsx(AttachmentTiles, { attachments: tiles }), !(tiles && message?.body === "") && (_jsxs("div", { className: entryRow, title: message ? formatDateTime(entry.at) : undefined, children: [side === "assistant" && (_jsx("span", { className: avatarSlot, children: closesGroup && author && (_jsx(Avatar, { kind: author.kind, src: author.src, label: author.name, size: "small", "aria-hidden": "true" })) })), _jsx(ThreadEntryContent, { entry: entry, side: side, groupPosition: position, renderCustom: renderCustom, attachmentTiles: attachmentTiles }), message?.actions && !message.sending && (_jsx("span", { "data-entry-actions": "", children: message.actions }))] })), message?.sources && message.sources.length > 0 && (_jsx("span", { className: sourceRow, children: message.sources.map((source) => source.href ? (_jsx("a", { href: source.href, children: source.label }, source.id)) : (_jsx("span", { children: source.label }, source.id))) })), closesGroup && entry.kind !== "typing" && (_jsx("span", { className: entryFooter, children: message?.sending ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": "true", size: "compact" }), "Sending"] })) : (_jsxs("span", { children: [author && (_jsxs(_Fragment, { children: [author.label ?? author.name, " · "] })), _jsx(MessageTime, { at: entry.at, format: formatTime, dated: !dayLabels })] })) }))] }, entry.id));
+    }
+}
+/** A day's heading in a thread that runs over days: Today, Yesterday, or the date. */
+function DayLabel({ at }) {
+    const { labels, formatDate } = useCiridaeLocale();
+    return (_jsx(ChatSystemLine, { role: "separator", className: dayLabel, children: isToday(at)
+            ? labels.dates.today
+            : isYesterday(at)
+                ? labels.dates.yesterday
+                : formatDate(at, { weekday: "long", month: "short", day: "numeric" }) }));
+}
+/** Prompts to start a conversation from, stacked at the foot of an empty thread. */
+export function ChatSuggestions({ suggestions, onSelect, className }) {
+    return (_jsx("div", { className: cx(suggestionList, className), "data-ciridae-ui": "", children: suggestions.map((text) => (_jsx("button", { type: "button", className: suggestion, onClick: () => onSelect(text), children: text }, text))) }));
+}
+function AttachmentTiles({ attachments }) {
+    const { labels } = useCiridaeLocale();
+    const [open, setOpen] = useState(null);
+    // The files the lightbox can show, in the message's order: those the service has a link for.
+    const viewable = attachments.flatMap((attachment) => attachment.url ? [{ ...attachment, url: attachment.url }] : []);
+    return (_jsxs("span", { className: attachmentTiles, children: [attachments.map((attachment) => {
+                const image = attachment.url && attachment.mediaType?.startsWith("image/");
+                const content = image ? (_jsx("img", { src: attachment.url ?? undefined, alt: attachment.name })) : (_jsxs(_Fragment, { children: [fileTypeIcon({ name: attachment.name, type: attachment.mediaType ?? "" }), _jsx("span", { children: attachment.name })] }));
+                const index = viewable.findIndex((item) => item.id === attachment.id);
+                return index >= 0 ? (_jsx("button", { type: "button", className: fileSquare, "data-image": image || undefined, "aria-label": labels.lightbox.preview(attachment.name), title: attachment.name, onClick: () => setOpen(index), children: content }, attachment.id)) : (_jsx("span", { className: fileSquare, title: attachment.name, children: content }, attachment.id));
+            }), _jsx(Lightbox, { items: viewable, index: open, onIndexChange: setOpen })] }));
+}
+function ThreadEntryContent({ entry, side, groupPosition, renderCustom, attachmentTiles: tiles, }) {
+    const { labels } = useCiridaeLocale();
+    switch (entry.kind) {
+        case "message":
+            return (_jsxs(ChatBubble, { side: side, groupPosition: groupPosition, "aria-busy": entry.sending || undefined, children: [entry.body, !tiles && entry.attachments && entry.attachments.length > 0 && (_jsx("span", { className: attachmentList, children: entry.attachments.map((attachment) => attachment.url ? (_jsx("a", { href: attachment.url, target: "_blank", rel: "noreferrer", children: attachment.name }, attachment.id)) : (_jsx("span", { children: attachment.name }, attachment.id))) }))] }));
+        case "typing":
+            return (_jsxs(ChatBubble, { side: side, groupPosition: groupPosition, className: typingBubble, role: "status", "aria-label": labels.chat.typing, children: [entry.label, _jsx(ChatTypingDots, {})] }));
+        case "failure":
+            return (_jsxs(ChatBubble, { side: side, groupPosition: groupPosition, className: errorBubble, role: "alert", children: [entry.message, _jsx(Button, { variant: "ghost", icon: _jsx(ArrowClockwiseIcon, { className: icon({ size: "small" }) }), onClick: entry.onRetry, children: "Retry" })] }));
+        case "custom":
+            return renderCustom?.(entry.data);
+    }
+}
+/** The side an entry sits on: typing and failures are the assistant's. */
+function entrySide(entry) {
+    return entry.kind === "message" || entry.kind === "custom" ? entry.side : "assistant";
+}
+/* A message's time, which turns into its clock time while hovered. */
+const messageTime = css({
+    "& > [data-exact]": { display: "none" },
+    "&:hover:has(> [data-exact]) > [data-shown]": { display: "none" },
+    "&:hover > [data-exact]": { display: "inline" },
+});
+/** How recent a message is still timed relative to now ("5m"), rather than by the clock. */
+const relativeTimeWindowMs = 2 * 60 * 60 * 1000;
+/* One minute clock every thread's times share, running while any is drawn. */
+let minuteNow = Date.now();
+const minuteListeners = new Set();
+let minuteTimer = null;
+function subscribeToMinute(listener) {
+    minuteListeners.add(listener);
+    // The clock may have stood still while nothing drew a time; React reads it again on subscribe.
+    if (!minuteTimer)
+        minuteNow = Date.now();
+    minuteTimer ?? (minuteTimer = setInterval(() => {
+        minuteNow = Date.now();
+        for (const each of minuteListeners)
+            each();
+    }, 60000));
+    return () => {
+        minuteListeners.delete(listener);
+        if (minuteListeners.size > 0 || !minuteTimer)
+            return;
+        clearInterval(minuteTimer);
+        minuteTimer = null;
+    };
+}
+function useMinuteNow() {
+    return useSyncExternalStore(subscribeToMinute, () => minuteNow, () => minuteNow);
+}
+/**
+ * Under two hours old, how long ago ("now", "5m", "1h 20m"); then the time of day, with the date
+ * before it when `dated` and the message is not from today. The exact time is its title.
+ */
+function MessageTime({ at, format: formatAt, dated, }) {
+    const { formatDateTime, formatTime, formatRelative, formatNumber } = useCiridaeLocale();
+    const age = useMinuteNow() - at;
+    const narrow = (value, unit) => formatNumber(value, { style: "unit", unit, unitDisplay: "narrow" });
+    const minutes = Math.floor(age / 60000);
+    const hours = Math.floor(minutes / 60);
+    // The clock time, with its date once it is not today: what a short or relative time turns
+    // into on hover.
+    const exact = isToday(at)
+        ? formatTime(at)
+        : formatDateTime(at, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+    const text = formatAt
+        ? formatAt(at)
+        : age < 60000
+            ? formatRelative(at, at)
+            : age < relativeTimeWindowMs
+                ? [hours > 0 && narrow(hours, "hour"), minutes % 60 > 0 && narrow(minutes % 60, "minute")]
+                    .filter(Boolean)
+                    .join(" ")
+                : dated && !isToday(at)
+                    ? formatDateTime(at, {
+                        month: "short",
+                        day: "numeric",
+                        hour: "numeric",
+                        minute: "2-digit",
+                    })
+                    : formatTime(at);
+    return (_jsxs("time", { dateTime: new Date(at).toISOString(), className: messageTime, children: [_jsx("span", { "data-shown": "", children: text }), exact !== text && _jsx("span", { "data-exact": "", children: exact })] }));
+}
+function findScrollContainer(element) {
+    for (let node = element; node; node = node.parentElement) {
+        const { overflowY } = getComputedStyle(node);
+        if (overflowY === "auto" || overflowY === "scroll")
+            return node;
+    }
+    return null;
+}

package/dist/components/checkbox-item.d.ts

@@ -0,0 +1,11 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import type { ComponentProps, ReactNode } from "react";
+export type CheckboxItemProps = Omit<ComponentProps<typeof BaseCheckbox.Root>, "children" | "className"> & {
+    children: ReactNode;
+    /** Shown muted at the row's end, such as where the item comes from. */
+    meta?: ReactNode;
+    /** Shows a drag handle on hover, for a row that can be reordered. */
+    grip?: boolean;
+    className?: string;
+};
+export declare function CheckboxItem({ children, meta, grip: showGrip, className, ...props }: CheckboxItemProps): import("@types/react").JSX.Element;

package/dist/components/checkbox-item.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckIcon, DotsSixVerticalIcon, MinusIcon } from "@phosphor-icons/react";
+import { css, cx } from "#primitives/css";
+import { checkIndicator, checkMark } from "./form-controls.js";
+import { icon } from "./icon.js";
+/*
+ * A checkbox as a whole row: the mark, its label, and what else the row has to say, with the hover
+ * wash and the focus ring on the row rather than on the mark. For a list whose rows are ticked or
+ * reordered, where `Checkbox` alone is for one choice inside a form.
+ */
+const row = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    minHeight: "control.row",
+    paddingInline: "control.block",
+    borderRadius: "control",
+    color: "fg.primary",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    cursor: "pointer",
+    transitionProperty: "background",
+    transitionDuration: "fast",
+    _hover: { background: "bg.glass" },
+    "&:has(:focus-visible)": { focusRing: "outer" },
+    "&:has([data-disabled])": { opacity: "disabled", cursor: "not-allowed" },
+});
+// The grip only shows once the row is pointed at, so a list of rows is not a column of grips.
+const grip = css({
+    display: "inline-flex",
+    flexShrink: "0",
+    color: "fg.muted",
+    cursor: "grab",
+    opacity: "0",
+    transitionProperty: "opacity",
+    transitionDuration: "fast",
+    "label:hover > &, label:focus-within > &": { opacity: "1" },
+});
+const labelText = css({ flex: "1", minWidth: "0" });
+const metaText = css({ flexShrink: "0", color: "fg.subtle", fontSize: "code" });
+export function CheckboxItem({ children, meta, grip: showGrip, className, ...props }) {
+    return (_jsxs("label", { className: cx(row, className), "data-ciridae-ui": "", children: [showGrip && (_jsx("span", { className: grip, "aria-hidden": "true", children: _jsx(DotsSixVerticalIcon, { className: icon({ size: "small" }) }) })), _jsx(BaseCheckbox.Root, { ...props, className: checkMark({ focus: "row" }), children: _jsx(BaseCheckbox.Indicator, { className: checkIndicator, children: props.indeterminate ? _jsx(MinusIcon, { weight: "bold" }) : _jsx(CheckIcon, { weight: "bold" }) }) }), _jsx("span", { className: labelText, children: children }), meta !== undefined && _jsx("span", { className: metaText, children: meta })] }));
+}

package/dist/components/checkbox-list.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+import { type CiridaeLabels } from "./locale.js";
+export type CheckboxListItem = {
+    key: string;
+    label: ReactNode;
+    detail?: ReactNode;
+    /**
+     * Supporting content under the row, such as what the item does. It sits outside the checkbox's
+     * label, so it can hold its own controls and does not become part of the checkbox's name.
+     */
+    description?: ReactNode;
+    /** Items sharing a group `key` are listed under one `label` heading that ticks them all. */
+    group?: {
+        key: string;
+        label: string;
+    };
+    /** What a search finds the item by, such as its name and description; defaults to a text `label`. */
+    searchText?: readonly (string | null | undefined)[];
+};
+/**
+ * What a checklist shows: skeleton lines while its items load, a muted line in place of the list
+ * when they cannot be had, or the items with what to say when none are listed.
+ */
+export type CheckboxListProps = {
+    state: "loading";
+} | {
+    state: "unavailable";
+    message: ReactNode;
+} | {
+    state: "listed";
+    items: readonly CheckboxListItem[];
+    /** Shown in place of the list when `items` is empty, such as why a search matched nothing. */
+    emptyMessage: ReactNode;
+    selectedKeys: ReadonlySet<string>;
+    onChange: (keys: Set<string>) => void;
+    /** Shows the items but lets none change, such as while a form saves. */
+    disabled: boolean;
+    /** Offers a search over the items' `searchText` once at least this many are listed. */
+    searchFrom?: number;
+    /** Select all and Clear for the items shown, beside how many of all of them are ticked. */
+    bulkActions?: boolean;
+    labels?: Partial<CiridaeLabels["checklist"]>;
+};
+/**
+ * A list ticked item by item, each with an optional trailing detail and description, that scrolls
+ * inside a bounded height and shades its edges while more rows are out of view. Items with a
+ * `group` are listed under a heading, in order of first appearance, whose checkbox ticks the whole
+ * group. A long list can take a search, and bulk actions that touch only the items it leaves shown,
+ * so nothing is ticked or cleared out of sight.
+ */
+export declare function CheckboxList(props: CheckboxListProps): import("@types/react").JSX.Element;