@tulipfarm/sprout 0.0.0-stage → 0.2.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-input.d.ts

@@ -0,0 +1,94 @@
+import { type ReactNode } from "react";
+import { type AttachmentFile } from "./attachment.js";
+import { type Brand } from "./brand-icon.js";
+import { type RichTextValue } from "./rich-text-editor.js";
+export declare const chatInputReferenceKindNames: readonly ["agent", "skill", "file"];
+export declare const chatInputStatusNames: readonly ["idle", "streaming"];
+export type ChatInputReferenceKind = (typeof chatInputReferenceKindNames)[number];
+export type ChatInputStatus = (typeof chatInputStatusNames)[number];
+/** One row in the `@`, `/`, or `#` panel. Picking it drops a chip into the message. */
+export interface ChatInputSuggestion {
+    id: string;
+    label: string;
+    description?: string | undefined;
+    /** A 16px icon, file icon, brand glyph, or small avatar. */
+    media?: ReactNode;
+}
+/** Returns the rows that match what follows the trigger. It may be async. */
+export type ChatInputSource = (query: string) => ChatInputSuggestion[] | Promise<ChatInputSuggestion[]>;
+export interface ChatInputAction {
+    id: string;
+    label: string;
+    description?: string | undefined;
+    icon?: ReactNode;
+    onSelect: () => void;
+}
+export interface ChatInputOption {
+    id: string;
+    label: string;
+    description?: string | undefined;
+    icon?: ReactNode;
+    /** Modes only. Any CSS color; tints the box border, chip, and menu icon while on. */
+    color?: string | undefined;
+}
+export interface ChatInputModel {
+    id: string;
+    label: string;
+    description?: string | undefined;
+    /** Draws the vendor logo. Use `icon` for a mark that isn't a `Brand`. */
+    brand?: Brand | undefined;
+    icon?: ReactNode;
+    disabled?: boolean | undefined;
+}
+export interface ChatInputPrompt {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** The text put in the message. Defaults to `label`. */
+    prompt?: string | undefined;
+}
+export interface ChatInputProps {
+    value: RichTextValue;
+    onValueChange: (value: RichTextValue) => void;
+    /** Runs on Enter, Cmd or Ctrl+Enter, and the send button, only when the message has content. */
+    onSend: () => void;
+    /** Shown in place of send while `status` is `streaming`. */
+    onStop?: (() => void) | undefined;
+    /** `streaming` swaps send for stop and shows `streamingPlaceholder`. */
+    status?: ChatInputStatus | undefined;
+    placeholder?: string | undefined;
+    streamingPlaceholder?: string | undefined;
+    disabled?: boolean | undefined;
+    /** Accessible name of the form. Defaults to `Message`. */
+    label?: string | undefined;
+    /** `@` opens these. Leave unset to turn the trigger off. */
+    agents?: ChatInputSource | undefined;
+    /** `/` opens these. */
+    skills?: ChatInputSource | undefined;
+    /** `#` opens these. */
+    files?: ChatInputSource | undefined;
+    attachments?: AttachmentFile[] | undefined;
+    onRemoveAttachment?: ((id: string) => void) | undefined;
+    /** The `+` menu, such as upload from computer, Google Drive, or a URL. */
+    attachActions?: ChatInputAction[] | undefined;
+    /** The modes menu, such as Plan, Deep research, or Learning. One mode at a time. */
+    modes?: ChatInputOption[] | undefined;
+    mode?: string | null | undefined;
+    onModeChange?: ((mode: string | null) => void) | undefined;
+    projects?: ChatInputOption[] | undefined;
+    project?: string | undefined;
+    onProjectChange?: ((project: string) => void) | undefined;
+    models?: ChatInputModel[] | undefined;
+    model?: string | undefined;
+    onModelChange?: ((model: string) => void) | undefined;
+    /** Starter chips under an empty message. A click fills the message. */
+    prompts?: ChatInputPrompt[] | undefined;
+    onPromptSelect?: ((prompt: ChatInputPrompt) => void) | undefined;
+    className?: string | undefined;
+}
+/**
+ * A chat message box on `RichTextEditor`. `@` tags agents, `/` adds skills,
+ * and `#` adds files. The bar holds attach and mode menus, a project picker,
+ * a model picker, and send or stop. Starter prompts sit under an empty box.
+ */
+export declare function ChatInput({ value, onValueChange, onSend, onStop, status, placeholder, streamingPlaceholder, disabled, label, agents, skills, files, attachments, onRemoveAttachment, attachActions, modes, mode, onModeChange, projects, project, onProjectChange, models, model, onModelChange, prompts, onPromptSelect, className, }: ChatInputProps): import("react").JSX.Element;