@tulipfarm/sprout 0.0.0-stage → 0.1.0

package/dist/components/chart.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useId, useMemo, } from "react";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { cn } from "../internal/classes.js";
+/** Theme names a `ChartConfig` entry can color, and the selector each one uses. */
+const THEMES = { light: "", dark: ".dark" };
+const INITIAL_DIMENSION = { width: 320, height: 200 };
+export const chartIndicatorNames = ["dot", "line", "dashed"];
+const cssKey = (key) => key.replace(/[^\w-]/g, "_");
+/**
+ * The CSS variable a `ChartContainer` sets for one config key. Pass it as a
+ * series `fill` or `stroke`, for example `fill={chartColor("tasks")}`.
+ */
+export function chartColor(key) {
+    return `var(--sprout-chart-color-${cssKey(key)})`;
+}
+const ChartContext = createContext(null);
+function useChart() {
+    const context = useContext(ChartContext);
+    if (!context)
+        throw new Error("useChart must be used within a <ChartContainer />");
+    return context;
+}
+/**
+ * Sizes a Recharts chart to its box and turns `config` into series colors
+ * and labels for the tooltip and legend. The box is 16:9 unless `className`
+ * or `style` gives it a height.
+ */
+export function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
+    const uniqueId = useId();
+    const chartId = `chart-${cssKey(id ?? uniqueId)}`;
+    const value = useMemo(() => ({ config }), [config]);
+    return (_jsx(ChartContext.Provider, { value: value, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("sprout-chart", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
+}
+/**
+ * Writes `--sprout-chart-color-<key>` for every colored config entry, with a
+ * dark value for entries that pass `theme`. `ChartContainer` renders it.
+ */
+export function ChartStyle({ id, config, }) {
+    const colorConfig = Object.entries(config).filter(([, item]) => item.theme ?? item.color);
+    if (!colorConfig.length)
+        return null;
+    const rules = (theme) => colorConfig
+        .map(([key, item]) => {
+        const color = item.theme?.[theme] ?? item.color;
+        return color
+            ? `  --sprout-chart-color-${cssKey(key)}: ${color};`
+            : null;
+    })
+        .filter(Boolean)
+        .join("\n");
+    const scope = `[data-chart="${cssKey(id)}"]`;
+    const themed = colorConfig.some(([, item]) => item.theme);
+    const css = [
+        `${scope} {\n${rules("light")}\n}`,
+        themed ? `${THEMES.dark} ${scope} {\n${rules("dark")}\n}` : "",
+        themed
+            ? `@media (prefers-color-scheme: dark) {\n:root:not(.light):not(.dark) ${scope} {\n${rules("dark")}\n}\n}`
+            : "",
+    ]
+        .filter(Boolean)
+        .join("\n");
+    return _jsx("style", { dangerouslySetInnerHTML: { __html: css } });
+}
+/**
+ * Recharts' `Tooltip`, moving in 160ms. Pass `content={<ChartTooltipContent />}`.
+ * It stays still when reduced motion is on.
+ */
+export function ChartTooltip(props) {
+    return _jsx(Tooltip, { animationDuration: 160, ...props });
+}
+/**
+ * The tooltip card: a label, then one row per series with its indicator,
+ * config label, and value. Recharts passes `active`, `payload`, and `label`.
+ */
+export function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
+    const { config } = useChart();
+    const tooltipLabel = useMemo(() => {
+        if (hideLabel || !payload?.length)
+            return null;
+        const [item] = payload;
+        const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = !labelKey && typeof label === "string"
+            ? (config[label]?.label ?? label)
+            : itemConfig?.label;
+        if (labelFormatter)
+            return (_jsx("div", { className: cn("sprout-chart-tooltip-label", labelClassName), children: labelFormatter(value, payload) }));
+        if (!value)
+            return null;
+        return (_jsx("div", { className: cn("sprout-chart-tooltip-label", labelClassName), children: value }));
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey,
+    ]);
+    if (!active || !payload?.length)
+        return null;
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return (_jsxs("div", { "data-slot": "chart-tooltip", "data-indicator": indicator, className: cn("sprout-chart-tooltip", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "sprout-chart-tooltip-items", children: payload
+                    .filter((item) => item.type !== "none")
+                    .map((item, index) => {
+                    const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = color ??
+                        item.payload?.fill ??
+                        item.color;
+                    return (_jsx("div", { "data-slot": "chart-tooltip-item", className: "sprout-chart-tooltip-item", children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("span", { "aria-hidden": "true", "data-slot": "chart-tooltip-indicator", className: "sprout-chart-tooltip-indicator", style: {
+                                        "--sprout-chart-indicator": indicatorColor,
+                                    } }))), _jsxs("div", { className: "sprout-chart-tooltip-row", "data-nested": nestLabel || undefined, children: [_jsxs("div", { className: "sprout-chart-tooltip-name", children: [nestLabel ? tooltipLabel : null, _jsx("span", { children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "sprout-chart-tooltip-value", children: typeof item.value === "number"
+                                                ? item.value.toLocaleString()
+                                                : String(item.value) }))] })] })) }, index));
+                }) })] }));
+}
+/** Recharts' `Legend`. Pass `content={<ChartLegendContent />}`. */
+export const ChartLegend = Legend;
+/** A centered row of swatches and config labels, one per series. */
+export function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, }) {
+    const { config } = useChart();
+    if (!payload?.length)
+        return null;
+    return (_jsx("div", { "data-slot": "chart-legend", "data-align": verticalAlign === "top" ? "top" : "bottom", className: cn("sprout-chart-legend", className), children: payload
+            .filter((item) => item.type !== "none")
+            .map((item, index) => {
+            const key = `${nameKey ?? item.dataKey ?? "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return (_jsxs("div", { "data-slot": "chart-legend-item", className: "sprout-chart-legend-item", children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("span", { "aria-hidden": "true", className: "sprout-chart-legend-swatch", style: { backgroundColor: item.color } })), itemConfig?.label] }, index));
+        }) }));
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null)
+        return undefined;
+    const inner = "payload" in payload &&
+        typeof payload.payload === "object" &&
+        payload.payload !== null
+        ? payload.payload
+        : undefined;
+    const outer = payload;
+    let configLabelKey = key;
+    if (typeof outer[key] === "string")
+        configLabelKey = outer[key];
+    else if (inner && typeof inner[key] === "string")
+        configLabelKey = inner[key];
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+const seriesConfig = (series) => Object.fromEntries(series.map((item) => [item.key, { label: item.label, color: item.color }]));
+const tooltipCursor = { fill: "var(--sprout-hover)" };
+/**
+ * Stacked daily bars, 256px tall. Days are rows keyed by series; a missing or
+ * null value keeps that series out of the day's tooltip. The top series gets
+ * rounded corners.
+ */
+export function UsageChart({ days, series, title = "Usage by day", locale, className, }) {
+    const config = useMemo(() => seriesConfig(series), [series]);
+    const usageDay = (date) => new Date(`${String(date)}T00:00:00Z`).toLocaleDateString(locale, {
+        month: "short",
+        day: "numeric",
+        timeZone: "UTC",
+    });
+    return (_jsx(ChartContainer, { "data-variant": "usage", className: cn("sprout-chart-usage", className), config: config, children: _jsxs(BarChart, { data: days, accessibilityLayer: true, title: title, barCategoryGap: "20%", children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "date", tickFormatter: usageDay, tickLine: false, axisLine: false, minTickGap: 24 }), _jsx(YAxis, { width: 40, tickLine: false, axisLine: false, allowDecimals: false }), _jsx(ChartTooltip, { cursor: tooltipCursor, content: _jsx(ChartTooltipContent, { labelFormatter: usageDay }) }), series.map((item, index) => (_jsx(Bar, { dataKey: item.key, stackId: "usage", fill: chartColor(item.key), radius: index === series.length - 1 ? [3, 3, 0, 0] : 0, isAnimationActive: false }, item.key)))] }) }));
+}
+/** Side-by-side bars per category with a legend in series order, 288px tall. */
+export function CategoryChart({ rows, category, series, title, className, }) {
+    const config = useMemo(() => seriesConfig(series), [series]);
+    const name = title ?? `${series.map((item) => item.label).join(", ")} by ${category}`;
+    return (_jsx(ChartContainer, { "data-variant": "category", className: cn("sprout-chart-category", className), config: config, children: _jsxs(BarChart, { data: rows, accessibilityLayer: true, title: name, barCategoryGap: "24%", children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: category, tickLine: false, axisLine: false, minTickGap: 16 }), _jsx(YAxis, { width: 40, tickLine: false, axisLine: false, allowDecimals: false }), _jsx(ChartTooltip, { cursor: tooltipCursor, content: _jsx(ChartTooltipContent, {}) }), _jsx(ChartLegend, { itemSorter: null, content: _jsx(ChartLegendContent, {}) }), series.map((item) => (_jsx(Bar, { dataKey: item.key, fill: chartColor(item.key), radius: [3, 3, 0, 0], isAnimationActive: false }, item.key)))] }) }));
+}

package/dist/components/chat-confirmation.d.ts

@@ -0,0 +1,42 @@
+import { type ComponentProps } from "react";
+export declare const chatConfirmationStateNames: readonly ["pending", "submitting", "approved", "rejected", "expired", "cancelled", "error"];
+export type ChatConfirmationDecision = "approve" | "reject";
+export type ConfirmationState = {
+    kind: "pending";
+} | {
+    kind: "submitting";
+    decision: ChatConfirmationDecision;
+} | {
+    kind: "approved";
+} | {
+    kind: "rejected";
+} | {
+    kind: "expired";
+} | {
+    kind: "cancelled";
+} | {
+    kind: "error";
+    message: string;
+};
+export type ChatConfirmationDetail = {
+    label: string;
+    value: string;
+};
+export interface ChatConfirmationProps extends Omit<ComponentProps<"div">, "title" | "children"> {
+    /** What the agent wants to do, such as “Remove the Notes field”. */
+    title: string;
+    /** One line above the facts, such as “Review these changes before approving.” */
+    description: string;
+    /** Labeled facts about the action, in order. */
+    details: readonly ChatConfirmationDetail[];
+    state: ConfirmationState;
+    onDecision: (decision: ChatConfirmationDecision) => void;
+    /** Locks both buttons, such as while the request is refreshing or cannot be verified. */
+    disabled?: boolean | undefined;
+}
+/**
+ * Asks someone in chat to approve or decline an action an agent proposed.
+ * Built on `ReviewCard`: it folds once decided, and when the decision was
+ * made from inside the card, focus moves to the outcome.
+ */
+export declare function ChatConfirmation({ title, description, details, state, onDecision, disabled, className, ...props }: ChatConfirmationProps): import("react").JSX.Element;

package/dist/components/chat-confirmation.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { ShieldUser } from "reicon-react/icons/ShieldUser";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+import { ReviewCard, ReviewRow, ReviewRows, } from "./review-card.js";
+import { Spinner } from "./spinner.js";
+export const chatConfirmationStateNames = [
+    "pending",
+    "submitting",
+    "approved",
+    "rejected",
+    "expired",
+    "cancelled",
+    "error",
+];
+const settledKinds = new Set([
+    "approved",
+    "rejected",
+    "expired",
+    "cancelled",
+]);
+const badges = {
+    pending: { label: "Approval required", variant: "warning" },
+    submitting: { label: "Approval required", variant: "warning" },
+    error: { label: "Approval required", variant: "warning" },
+    approved: { label: "Approved", variant: "info" },
+    rejected: { label: "Declined", variant: "secondary" },
+    expired: { label: "Expired", variant: "secondary" },
+    cancelled: { label: "Cancelled", variant: "secondary" },
+};
+const outcomes = {
+    approved: "Approval recorded. This does not confirm the action has completed.",
+    rejected: "The proposed action was declined.",
+    expired: "This approval expired. No approval was granted.",
+    cancelled: "This approval was cancelled. No approval was granted.",
+};
+/**
+ * Asks someone in chat to approve or decline an action an agent proposed.
+ * Built on `ReviewCard`: it folds once decided, and when the decision was
+ * made from inside the card, focus moves to the outcome.
+ */
+export function ChatConfirmation({ title, description, details, state, onDecision, disabled = false, className, ...props }) {
+    const done = settledKinds.has(state.kind);
+    const section = useRef(null);
+    const result = useRef(null);
+    const submittedHere = useRef(false);
+    useEffect(() => {
+        if (state.kind === "submitting")
+            submittedHere.current =
+                section.current?.contains(document.activeElement) ?? false;
+        if (done && submittedHere.current) {
+            result.current?.focus();
+            submittedHere.current = false;
+        }
+    }, [done, state.kind]);
+    const submitting = state.kind === "submitting";
+    const busy = (decision) => state.kind === "submitting" && state.decision === decision;
+    const outcome = outcomes[state.kind];
+    return (_jsx("div", { ref: section, "data-slot": "chat-confirmation", "data-state": state.kind, ...props, className: cn("sprout-chat-confirmation", className), children: _jsxs(ReviewCard, { icon: _jsx(ShieldUser, { size: 16 }), title: title, badge: badges[state.kind], settled: done, status: state.kind === "error" || outcome ? (_jsxs(_Fragment, { children: [state.kind === "error" && (_jsx("p", { role: "alert", className: "sprout-chat-confirmation-error", children: state.message })), outcome && (_jsx("p", { ref: result, tabIndex: -1, role: "status", className: "sprout-chat-confirmation-result", children: outcome }))] })) : undefined, actions: done ? undefined : (_jsxs(_Fragment, { children: [_jsxs(Button, { disabled: disabled || submitting, "aria-busy": busy("approve"), onClick: () => onDecision("approve"), children: [busy("approve") && _jsx(Spinner, { "aria-hidden": "true" }), "Approve action"] }), _jsxs(Button, { variant: "ghost", disabled: disabled || submitting, "aria-busy": busy("reject"), onClick: () => onDecision("reject"), children: [busy("reject") && _jsx(Spinner, { "aria-hidden": "true" }), "Decline"] })] })), children: [_jsx("p", { className: "sprout-chat-confirmation-description", children: description }), _jsx(ReviewRows, { children: details.map((detail) => (_jsx(ReviewRow, { label: detail.label, children: detail.value }, detail.label))) })] }) }));
+}

package/dist/components/chat-plan.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+export declare const chatPlanStepStateNames: readonly ["pending", "running", "complete", "error"];
+export type ChatPlanStepState = (typeof chatPlanStepStateNames)[number];
+export type ChatPlanStep = {
+    id: string;
+    title: string;
+    /** One line under the title, such as why a step failed. */
+    detail?: string | undefined;
+    state: ChatPlanStepState;
+};
+export interface ChatPlanProps extends Omit<ComponentProps<"section">, "title" | "children"> {
+    /** The plan name. It names the section and shows above the steps. */
+    title: string;
+    /** Steps in order. With none, the plan says no steps were proposed yet. */
+    steps: readonly ChatPlanStep[];
+}
+/**
+ * A plan an agent proposed in chat, with each step’s progress: not started,
+ * in progress, complete, or failed. The header counts completed steps.
+ */
+export declare function ChatPlan({ title, steps, className, ...props }: ChatPlanProps): import("react").JSX.Element;

package/dist/components/chat-plan.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "reicon-react/icons/Check";
+import { Clock } from "reicon-react/icons/Clock";
+import { Warning } from "reicon-react/icons/Warning";
+import { cn } from "../internal/classes.js";
+import { Spinner } from "./spinner.js";
+export const chatPlanStepStateNames = [
+    "pending",
+    "running",
+    "complete",
+    "error",
+];
+const stateLabels = {
+    pending: "Not started",
+    running: "In progress",
+    complete: "Complete",
+    error: "Failed",
+};
+function StepIcon({ state }) {
+    if (state === "running")
+        return _jsx(Spinner, { "aria-hidden": "true" });
+    if (state === "complete")
+        return _jsx(Check, { size: 16, "aria-hidden": "true" });
+    if (state === "error")
+        return _jsx(Warning, { size: 16, "aria-hidden": "true" });
+    return _jsx(Clock, { size: 16, "aria-hidden": "true" });
+}
+/**
+ * A plan an agent proposed in chat, with each step’s progress: not started,
+ * in progress, complete, or failed. The header counts completed steps.
+ */
+export function ChatPlan({ title, steps, className, ...props }) {
+    const complete = steps.filter((step) => step.state === "complete").length;
+    return (_jsxs("section", { "data-slot": "chat-plan", "aria-label": title, ...props, className: cn("sprout-chat-plan", className), children: [_jsxs("div", { className: "sprout-chat-plan-header", children: [_jsx("h4", { className: "sprout-chat-plan-title", children: title }), _jsxs("span", { className: "sprout-chat-plan-count", children: [complete, " of ", steps.length, " complete"] })] }), steps.length === 0 ? (_jsx("p", { className: "sprout-chat-plan-empty", children: "No steps have been proposed yet." })) : (_jsx("ol", { className: "sprout-chat-plan-steps", children: steps.map((step) => (_jsxs("li", { "data-slot": "chat-plan-step", "data-state": step.state, className: "sprout-chat-plan-step", children: [_jsx("span", { className: "sprout-chat-plan-icon", children: _jsx(StepIcon, { state: step.state }) }, step.state), _jsxs("div", { className: "sprout-chat-plan-text", children: [_jsxs("p", { className: "sprout-chat-plan-step-title", children: [step.title, _jsxs("span", { className: "sprout-chat-plan-sr-only", children: [" · ", stateLabels[step.state]] })] }), step.detail && (_jsx("p", { className: "sprout-chat-plan-detail", children: step.detail }))] })] }, step.id))) }))] }));
+}

package/dist/components/chat-sources.d.ts

@@ -0,0 +1,64 @@
+import { type ComponentProps } from "react";
+export type ChatSource = {
+    id: string;
+    title: string;
+    /** Where the passage lives, such as a collection or a heading. */
+    location: string;
+    excerpt: string;
+    /** Opens the source in a new tab. */
+    href: string;
+};
+export interface InlineCitationProps {
+    source: ChatSource;
+    /** The citation number shown in the reply and in the sources list. */
+    number: number;
+}
+/**
+ * A numbered citation inside a reply. Hovering, clicking, tapping, or pressing
+ * Enter shows the cited passage and where it comes from.
+ */
+export declare function InlineCitation({ source, number }: InlineCitationProps): import("react").JSX.Element;
+export interface ChatSourcesProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Sources in citation order. With none, it says no sources were used. */
+    sources: readonly ChatSource[];
+    /** Start with the list open. */
+    defaultOpen?: boolean | undefined;
+}
+/**
+ * The sources a reply used. A count opens the numbered list; numbers match
+ * each `InlineCitation`.
+ */
+export declare function ChatSources({ sources, defaultOpen, className, ...props }: ChatSourcesProps): import("react").JSX.Element;
+export declare const citationStateKindNames: readonly ["idle", "loading", "ready", "unavailable", "error"];
+export type CitationStateKind = (typeof citationStateKindNames)[number];
+export type CitationState = {
+    kind: "idle";
+} | {
+    kind: "loading";
+} | {
+    kind: "ready";
+    title: string;
+    location: string;
+    excerpt: string;
+} | {
+    kind: "unavailable";
+    message: string;
+} | {
+    kind: "error";
+    message: string;
+};
+export interface CheckedCitationProps {
+    /** The linked words in the reply. */
+    label: string;
+    state: CitationState;
+    /** Called each time the passage opens, to check access again. */
+    onOpen: () => void;
+    /** Called by “Load source again” after an error. */
+    onRetry: () => void;
+}
+/**
+ * A citation link whose passage is checked each time it opens, on hover or
+ * click. While checking it shows a spinner; an unavailable source never shows
+ * an old passage.
+ */
+export declare function CheckedCitation({ label, state, onOpen, onRetry, }: CheckedCitationProps): import("react").JSX.Element;

package/dist/components/chat-sources.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { ArrowUpRight } from "reicon-react/icons/ArrowUpRight";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { FileText } from "reicon-react/icons/FileText";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "./collapsible.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Spinner } from "./spinner.js";
+const hoverDelay = 300;
+const hoverCloseDelay = 150;
+function hostOf(href) {
+    try {
+        return new URL(href).hostname.replace(/^www\./, "");
+    }
+    catch {
+        return null;
+    }
+}
+function SourceContent({ source, number, }) {
+    const host = number === undefined ? null : hostOf(source.href);
+    return (_jsxs("div", { "data-slot": "chat-source", className: "sprout-chat-sources-source", children: [number !== undefined && (_jsxs("p", { className: "sprout-chat-sources-preview-head", children: [_jsx("span", { className: "sprout-chat-sources-badge", "aria-hidden": "true", children: number }), _jsx("span", { children: host ?? `Source ${number}` })] })), _jsx("p", { className: "sprout-chat-sources-title", children: source.title }), _jsx("p", { className: "sprout-chat-sources-location", children: source.location }), _jsx("p", { className: "sprout-chat-sources-excerpt", children: source.excerpt }), _jsxs("a", { href: source.href, target: "_blank", rel: "noopener noreferrer", className: "sprout-chat-sources-link", children: ["Open source", _jsx(ArrowUpRight, { size: 14, "aria-hidden": "true" }), _jsx("span", { className: "sprout-chat-sources-sr-only", children: " in a new tab" })] })] }));
+}
+/**
+ * A numbered citation inside a reply. Hovering, clicking, tapping, or pressing
+ * Enter shows the cited passage and where it comes from.
+ */
+export function InlineCitation({ source, number }) {
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { openOnHover: true, delay: hoverDelay, closeDelay: hoverCloseDelay, "data-slot": "inline-citation", className: "sprout-chat-sources-citation", render: _jsx(Button, { variant: "secondary", size: "icon-xs", "aria-label": `Source ${number}: ${source.title}` }), children: number }), _jsx(PopoverContent, { className: "sprout-chat-sources-preview", children: _jsx(SourceContent, { source: source, number: number }) })] }));
+}
+/**
+ * The sources a reply used. A count opens the numbered list; numbers match
+ * each `InlineCitation`.
+ */
+export function ChatSources({ sources, defaultOpen, className, ...props }) {
+    if (sources.length === 0)
+        return (_jsx("div", { "data-slot": "chat-sources", "data-empty": "", ...props, className: cn("sprout-chat-sources", className), children: _jsx("p", { className: "sprout-chat-sources-empty", children: "No sources were used for this response." }) }));
+    return (_jsxs(Collapsible, { "data-slot": "chat-sources", defaultOpen: defaultOpen, ...props, className: cn("sprout-chat-sources", className), children: [_jsxs(CollapsibleTrigger, { className: "sprout-chat-sources-trigger", children: [_jsx(FileText, { size: 16, "aria-hidden": "true" }), _jsxs("span", { children: [sources.length, " ", sources.length === 1 ? "source" : "sources"] }), _jsx(ChevronDown, { size: 14, "aria-hidden": "true", "data-slot": "collapsible-indicator" })] }), _jsx(CollapsibleContent, { variant: "sidebar", children: _jsx("ol", { className: "sprout-chat-sources-list", children: sources.map((source, index) => (_jsxs("li", { className: "sprout-chat-sources-item", children: [_jsx("span", { className: "sprout-chat-sources-number", children: index + 1 }), _jsx(SourceContent, { source: source })] }, source.id))) }) })] }));
+}
+export const citationStateKindNames = [
+    "idle",
+    "loading",
+    "ready",
+    "unavailable",
+    "error",
+];
+/**
+ * A citation link whose passage is checked each time it opens, on hover or
+ * click. While checking it shows a spinner; an unavailable source never shows
+ * an old passage.
+ */
+export function CheckedCitation({ label, state, onOpen, onRetry, }) {
+    const popup = useRef(null);
+    return (_jsxs(Popover, { onOpenChange: (open) => {
+            if (open)
+                onOpen();
+        }, children: [_jsx(PopoverTrigger, { openOnHover: true, delay: hoverDelay, closeDelay: hoverCloseDelay, "data-slot": "checked-citation", className: "sprout-chat-sources-checked", render: _jsx(Button, { variant: "link", size: "task-link", "aria-label": `Source: ${label}` }), children: label }), _jsx(PopoverContent, { ref: popup, "data-citation-state": state.kind, className: "sprout-chat-sources-preview", children: state.kind === "idle" || state.kind === "loading" ? (_jsxs("p", { role: "status", className: "sprout-chat-sources-checking", children: [_jsx(Spinner, { "aria-hidden": "true" }), "Checking access to this source\u2026"] })) : state.kind === "ready" ? (_jsxs("div", { "data-slot": "chat-source", className: "sprout-chat-sources-source", children: [_jsx("p", { className: "sprout-chat-sources-title", children: state.title }), _jsx("p", { className: "sprout-chat-sources-location", children: state.location }), _jsx("p", { className: "sprout-chat-sources-excerpt", "data-preserve-lines": "", children: state.excerpt })] })) : (_jsxs("div", { className: "sprout-chat-sources-source", children: [_jsx("p", { className: "sprout-chat-sources-title", children: state.kind === "unavailable"
+                                ? "Source unavailable"
+                                : "Couldn’t load this source" }), _jsx("p", { role: "alert", className: "sprout-chat-sources-excerpt", children: state.message }), state.kind === "error" && (_jsx(Button, { variant: "outline", size: "sm", className: "sprout-chat-sources-retry", onClick: () => {
+                                // The button leaves as loading starts; keep focus in the passage.
+                                popup.current?.focus();
+                                onRetry();
+                            }, children: "Load source again" }))] })) })] }));
+}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,16 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+export declare const checkboxVariantNames: readonly ["default", "neutral"];
+export type CheckboxVariant = (typeof checkboxVariantNames)[number];
+export interface CheckboxProps extends BaseCheckbox.Root.Props {
+    /**
+     * `default` fills with the primary color. `neutral` fills with the text
+     * color, for filter lists that should not look branded.
+     */
+    variant?: CheckboxVariant | undefined;
+}
+/**
+ * A 16px checkbox with a larger hit area. Name it with a wrapping `Label`,
+ * a `Label htmlFor` pointing at its `id`, or `aria-label`. Pass
+ * `indeterminate` to show a mixed state, such as a "select all" box.
+ */
+export declare function Checkbox({ variant, indeterminate, className, disabled, ref, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/checkbox.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { Check } from "reicon-react/icons/Check";
+import { Minus } from "reicon-react/icons/Minus";
+import { cn, stateClassName } from "../internal/classes.js";
+import { useFieldsetDisabled } from "../internal/fieldset.js";
+export const checkboxVariantNames = ["default", "neutral"];
+/**
+ * A 16px checkbox with a larger hit area. Name it with a wrapping `Label`,
+ * a `Label htmlFor` pointing at its `id`, or `aria-label`. Pass
+ * `indeterminate` to show a mixed state, such as a "select all" box.
+ */
+export function Checkbox({ variant = "default", indeterminate = false, className, disabled, ref, ...props }) {
+    const [fieldsetDisabled, fieldsetRef] = useFieldsetDisabled(ref);
+    return (_jsx(BaseCheckbox.Root, { "data-slot": "checkbox", "data-variant": variant, indeterminate: indeterminate, ...props, ref: fieldsetRef, disabled: disabled || fieldsetDisabled, className: stateClassName(cn("sprout-checkbox", `sprout-checkbox-variant-${variant}`), className), children: _jsx(BaseCheckbox.Indicator, { "data-slot": "checkbox-indicator", className: "sprout-checkbox-indicator", children: indeterminate ? (_jsx(Minus, { "aria-hidden": "true" })) : (_jsx(Check, { "aria-hidden": "true" })) }) }));
+}

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

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+export declare const choiceListLayoutNames: readonly ["stacked", "compact"];
+export type ChoiceListLayout = (typeof choiceListLayoutNames)[number];
+export interface ChoiceListOption {
+    id: string;
+    label: string;
+    /** Shows a "Recommended" badge. A label ending in "(Recommended)" does the same. */
+    recommended?: boolean | undefined;
+}
+export interface ChoiceListTextOption {
+    value: string;
+    /** True while the typed answer is the chosen one. */
+    active: boolean;
+    onChange: (value: string) => void;
+    onFocus: () => void;
+    /** Id of the answer box, for an "Other answer" toggle's `aria-controls`. */
+    id?: string | undefined;
+    error: string | null;
+    label?: string | undefined;
+    placeholder?: string | undefined;
+}
+export interface ChoiceListProps {
+    legend: string;
+    options: readonly ChoiceListOption[];
+    value: readonly string[];
+    onChange: (value: string[]) => void;
+    /** Checkboxes instead of radios. */
+    multiple?: boolean | undefined;
+    disabled?: boolean | undefined;
+    error?: string | undefined;
+    /**
+     * `stacked` draws bordered rows with radio or checkbox marks. `compact`
+     * draws numbered rows in a scrolling list, for questions inside a chat.
+     */
+    layout?: ChoiceListLayout | undefined;
+    /** A free-text answer after the options. Compact lists show it only while active. */
+    textOption?: ChoiceListTextOption | undefined;
+    className?: string | undefined;
+}
+/**
+ * A fieldset of radio or checkbox rows for answering a question, with an
+ * optional typed answer. Value is always an array of option ids.
+ */
+export declare function ChoiceList({ legend, options, value, onChange, multiple, disabled, error, layout, textOption, className, }: ChoiceListProps): import("react").JSX.Element;
+export interface ChoiceSummaryProps {
+    prompt: string;
+    /** The recorded answer. Omit it when the question expired or was cancelled. */
+    answer?: string | undefined;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+/** One line that shows a question and its recorded answer. */
+export declare function ChoiceSummary({ prompt, answer, className, children, }: ChoiceSummaryProps): import("react").JSX.Element;

package/dist/components/choice-list.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Check } from "reicon-react/icons/Check";
+import { HelpCircle } from "reicon-react/icons/HelpCircle";
+import { cn } from "../internal/classes.js";
+import { Badge } from "./badge.js";
+export const choiceListLayoutNames = ["stacked", "compact"];
+const recommendedSuffix = /\s*\(recommended\)\s*$/i;
+/**
+ * A fieldset of radio or checkbox rows for answering a question, with an
+ * optional typed answer. Value is always an array of option ids.
+ */
+export function ChoiceList({ legend, options, value, onChange, multiple = false, disabled = false, error, layout = "stacked", textOption, className, }) {
+    const name = useId();
+    const compact = layout === "compact";
+    const errorId = `${name}-choices-error`;
+    const textId = `${name}-text`;
+    const textErrorId = `${name}-text-error`;
+    return (_jsxs("fieldset", { "data-slot": "choice-list", "data-layout": layout, "data-multiple": multiple || undefined, disabled: disabled, className: cn("sprout-choice-list", className), children: [_jsx("legend", { className: compact && !multiple
+                    ? "sprout-choice-list-sr-only"
+                    : "sprout-choice-list-legend", children: legend }), _jsx("div", { "data-slot": "choice-list-options", className: "sprout-choice-list-options", children: options.map((option, index) => {
+                    const checked = value.includes(option.id);
+                    const recommended = option.recommended === true || recommendedSuffix.test(option.label);
+                    const label = option.label.replace(recommendedSuffix, "");
+                    return (_jsxs("label", { "data-slot": "choice-list-option", "data-checked": checked || undefined, "data-disabled": disabled || undefined, "data-recommended": recommended || undefined, className: "sprout-choice-list-option", children: [_jsx("input", { type: multiple ? "checkbox" : "radio", name: name, value: option.id, checked: checked, "aria-invalid": error ? true : undefined, "aria-describedby": error ? errorId : undefined, onChange: (event) => onChange(multiple
+                                    ? event.target.checked
+                                        ? [...value, option.id]
+                                        : value.filter((id) => id !== option.id)
+                                    : [option.id]), className: "sprout-choice-list-input" }), _jsx("span", { "aria-hidden": "true", className: "sprout-choice-list-mark", children: checked ? _jsx(Check, {}) : compact ? index + 1 : null }), _jsxs("span", { className: "sprout-choice-list-label", children: [label, recommended && (_jsx(Badge, { variant: "info", className: "sprout-choice-list-badge", children: "Recommended" }))] })] }, option.id));
+                }) }), error && (_jsx("p", { id: errorId, className: "sprout-choice-list-error", children: error })), textOption && (!compact || textOption.active) && (_jsxs("div", { id: textOption.id ?? `${name}-custom`, "data-slot": "choice-list-text", "data-checked": textOption.active || undefined, "data-invalid": textOption.error ? true : undefined, className: "sprout-choice-list-text", children: [_jsx("span", { "aria-hidden": "true", className: "sprout-choice-list-mark", children: textOption.active && _jsx(Check, {}) }), _jsxs("div", { className: "sprout-choice-list-text-body", children: [_jsx("label", { htmlFor: textId, className: "sprout-choice-list-text-label", children: textOption.label ?? "Your answer" }), _jsx("textarea", { id: textId, autoFocus: compact, rows: 1, value: textOption.value, disabled: disabled, placeholder: textOption.placeholder ?? "Type a different answer…", "aria-describedby": textOption.error ? textErrorId : undefined, "aria-invalid": textOption.error ? true : undefined, onFocus: textOption.onFocus, onChange: (event) => textOption.onChange(event.target.value), className: "sprout-choice-list-textarea" }), textOption.error && (_jsx("p", { id: textErrorId, role: "alert", className: "sprout-choice-list-error", children: textOption.error }))] })] }))] }));
+}
+/** One line that shows a question and its recorded answer. */
+export function ChoiceSummary({ prompt, answer, className, children, }) {
+    return (_jsxs("div", { "data-slot": "choice-summary", className: cn("sprout-choice-summary", className), children: [_jsx(HelpCircle, { "aria-hidden": "true", className: "sprout-choice-summary-icon" }), _jsx("span", { className: "sprout-choice-summary-prompt", children: prompt }), answer && (_jsxs("span", { className: "sprout-choice-summary-answer", children: [_jsx(Check, { "aria-hidden": "true", className: "sprout-choice-summary-check" }), _jsx("span", { className: "sprout-choice-summary-answer-text", children: answer })] })), children] }));
+}