@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/review-card.d.ts

@@ -0,0 +1,62 @@
+import { type ComponentProps, type ReactNode } from "react";
+export declare const reviewCardBadgeVariantNames: readonly ["default", "success", "warning", "info", "secondary", "destructive", "outline"];
+export type ReviewCardBadgeVariant = (typeof reviewCardBadgeVariantNames)[number];
+export type ReviewCardBadge = {
+    label: string;
+    variant: ReviewCardBadgeVariant;
+};
+export interface ReviewCardProps extends Omit<ComponentProps<"section">, "title" | "children"> {
+    /** A 14–16px icon shown in a tile before the title. */
+    icon: ReactNode;
+    title: string;
+    badge: ReviewCardBadge;
+    /**
+     * A decided review. It folds to its header and footer, and folds again
+     * whenever `settled` turns true. People can still open it to read it.
+     */
+    settled?: boolean | undefined;
+    /** Footer content that stays visible when folded, such as the outcome. */
+    status?: ReactNode;
+    /** Decision buttons in the footer. Hidden while the card is folded. */
+    actions?: ReactNode;
+    /** The review itself: text, `ReviewRows`, `ReviewSteps`, and controls. */
+    children?: ReactNode;
+    /** Names the card, such as “Review row change”. Defaults to the title. */
+    label?: string | undefined;
+}
+/**
+ * A card that asks someone to review a proposed change before it happens:
+ * an approval, a draft, or a table edit. The header opens and closes the
+ * details; the footer holds the outcome and the decision buttons.
+ */
+export declare function ReviewCard({ icon, title, badge, settled, status, actions, children, label, className, ...props }: ReviewCardProps): import("react").JSX.Element;
+export type ReviewRowsProps = ComponentProps<"dl">;
+/** A bordered list of labeled facts, such as Change, Table, and Trigger. */
+export declare function ReviewRows({ className, ...props }: ReviewRowsProps): import("react").JSX.Element;
+export interface ReviewRowProps extends Omit<ComponentProps<"div">, "children"> {
+    label: string;
+    /** The value: text, badges, or a stacked new and current value. */
+    children: ReactNode;
+}
+/** One fact: the label on the left and its value on the right. */
+export declare function ReviewRow({ label, children, className, ...props }: ReviewRowProps): import("react").JSX.Element;
+export type ReviewStep = {
+    summary: ReactNode;
+    detail?: ReactNode;
+};
+export interface ReviewStepsProps extends Omit<ComponentProps<"div">, "title" | "children"> {
+    /** Short heading, such as “3 steps”. */
+    title: string;
+    steps: readonly ReviewStep[];
+}
+/** A numbered list of what will happen, each with optional detail below. */
+export declare function ReviewSteps({ title, steps, className, ...props }: ReviewStepsProps): import("react").JSX.Element;
+export type ReviewValue = {
+    name: string;
+    value: string;
+};
+export interface ReviewValuesProps extends Omit<ComponentProps<"dl">, "children"> {
+    values: readonly ReviewValue[];
+}
+/** Exact names and values in monospace, such as headers or written fields. */
+export declare function ReviewValues({ values, className, ...props }: ReviewValuesProps): import("react").JSX.Element;

package/dist/components/review-card.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { cn } from "../internal/classes.js";
+import { Badge } from "./badge.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "./collapsible.js";
+export const reviewCardBadgeVariantNames = [
+    "default",
+    "success",
+    "warning",
+    "info",
+    "secondary",
+    "destructive",
+    "outline",
+];
+/**
+ * A card that asks someone to review a proposed change before it happens:
+ * an approval, a draft, or a table edit. The header opens and closes the
+ * details; the footer holds the outcome and the decision buttons.
+ */
+export function ReviewCard({ icon, title, badge, settled = false, status, actions, children, label, className, ...props }) {
+    const titleId = useId();
+    const [open, setOpen] = useState(!settled);
+    const [wasSettled, setWasSettled] = useState(settled);
+    if (wasSettled !== settled) {
+        setWasSettled(settled);
+        setOpen(!settled);
+    }
+    const showActions = open && actions != null && actions !== false;
+    const showStatus = status != null && status !== false;
+    return (_jsxs("section", { "data-slot": "review-card", "data-settled": settled || undefined, "data-open": open || undefined, "aria-label": label, "aria-labelledby": label ? undefined : titleId, ...props, className: cn("sprout-review-card", className), children: [_jsxs(Collapsible, { open: open, onOpenChange: setOpen, children: [_jsxs("div", { className: "sprout-review-card-header", children: [_jsx("span", { "aria-hidden": "true", className: "sprout-review-card-icon", children: icon }), _jsx("h4", { id: titleId, className: "sprout-review-card-title", children: _jsx(CollapsibleTrigger, { className: "sprout-review-card-trigger", children: title }) }), _jsx(Badge, { variant: badge.variant, className: "sprout-review-card-badge", children: badge.label }), _jsx(ChevronDown, { size: 16, "aria-hidden": "true", "data-slot": "collapsible-indicator", className: "sprout-review-card-chevron" })] }), _jsx(CollapsibleContent, { variant: "card", children: _jsx("div", { className: "sprout-review-card-body", children: children }) })] }), (showStatus || showActions) && (_jsxs("div", { className: "sprout-review-card-footer", children: [status, showActions && (_jsx("div", { className: "sprout-review-card-actions", children: actions }))] }))] }));
+}
+/** A bordered list of labeled facts, such as Change, Table, and Trigger. */
+export function ReviewRows({ className, ...props }) {
+    return (_jsx("dl", { "data-slot": "review-rows", ...props, className: cn("sprout-review-rows", className) }));
+}
+/** One fact: the label on the left and its value on the right. */
+export function ReviewRow({ label, children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "review-row", ...props, className: cn("sprout-review-row", className), children: [_jsx("dt", { className: "sprout-review-row-label", children: label }), _jsx("dd", { className: "sprout-review-row-value", children: children })] }));
+}
+/** A numbered list of what will happen, each with optional detail below. */
+export function ReviewSteps({ title, steps, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "review-steps", ...props, className: cn("sprout-review-steps", className), children: [_jsx("h5", { className: "sprout-review-steps-title", children: title }), _jsx("ol", { className: "sprout-review-steps-list", children: steps.map((step, index) => (_jsxs("li", { className: "sprout-review-step", children: [_jsx("span", { "aria-hidden": "true", className: "sprout-review-step-number", children: index + 1 }), _jsxs("div", { className: "sprout-review-step-content", children: [_jsx("p", { className: "sprout-review-step-summary", children: step.summary }), step.detail] })] }, index))) })] }));
+}
+/** Exact names and values in monospace, such as headers or written fields. */
+export function ReviewValues({ values, className, ...props }) {
+    return (_jsx("dl", { "data-slot": "review-values", ...props, className: cn("sprout-review-values", className), children: values.map(({ name, value }) => (_jsxs("div", { className: "sprout-review-value", children: [_jsx("dt", { className: "sprout-review-value-name", children: name }), _jsx("dd", { className: "sprout-review-value-text", children: value })] }, name))) }));
+}

package/dist/components/rich-text-editor.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode, type Ref } from "react";
+import { type Editor, type Extensions, type JSONContent } from "@tiptap/core";
+export declare const richTextEditorSizeNames: readonly ["default", "compact"];
+export type RichTextEditorSize = (typeof richTextEditorSizeNames)[number];
+/** A Tiptap JSON document, such as `{ type: "doc", content: [{ type: "paragraph" }] }`. */
+export type RichTextValue = JSONContent;
+export type RichTextEditorHandle = {
+    /** Puts the caret back in the editor. */
+    focus: () => void;
+    /** The Tiptap editor, or `null` before it mounts. Use it for formatting commands. */
+    editor: () => Editor | null;
+    /** Replaces the document and calls `onChange`. */
+    setContent: (content: RichTextValue) => void;
+};
+export interface RichTextEditorProps {
+    ref?: Ref<RichTextEditorHandle> | undefined;
+    /**
+     * `default` is an 80px to 256px box with 16px text and a toolbar row below.
+     * `compact` is a 40px to 128px box with 14px text and the toolbar inline at
+     * the end.
+     */
+    size?: RichTextEditorSize | null | undefined;
+    /** Shrinks a default editor to one compact row with an inline toolbar, such as while an agent question waits. */
+    condensed?: boolean | undefined;
+    value: RichTextValue;
+    onChange: (value: RichTextValue) => void;
+    /** Runs on Enter (outside lists and code) and on Cmd or Ctrl+Enter. */
+    onSend: () => void;
+    /** Extra Tiptap extensions, such as mention nodes and suggestion triggers. */
+    extensions?: Extensions | undefined;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    /** Accessible name of the textbox. Defaults to `Message`. */
+    ariaLabel?: string | undefined;
+    ariaInvalid?: boolean | undefined;
+    ariaDescribedBy?: string | undefined;
+    /** Set while a suggestion list is open; Enter then picks a suggestion instead of sending. */
+    ariaExpanded?: boolean | undefined;
+    ariaControls?: string | undefined;
+    ariaActiveDescendant?: string | undefined;
+    /** Buttons and pickers shown with the editor: a row below, or inline when compact or condensed. */
+    toolbarAddon?: ReactNode | undefined;
+    className?: string | undefined;
+}
+/**
+ * A chat message editor built on Tiptap. Enter sends, Shift+Enter adds a
+ * line, and lists, code fences, links, and headings work as you type. It marks
+ * itself `data-slot="input-group-control"`, so an `InputGroup` around it draws
+ * the border, focus, and invalid states.
+ */
+export declare function RichTextEditor({ ref, size, condensed, value, onChange, onSend, extensions, placeholder, disabled, ariaLabel, ariaInvalid, ariaDescribedBy, ariaExpanded, ariaControls, ariaActiveDescendant, toolbarAddon, className, }: RichTextEditorProps): import("react").JSX.Element;

package/dist/components/rich-text-editor.js

@@ -0,0 +1,248 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useMemo, useRef, } from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { Extension, InputRule, } from "@tiptap/core";
+import { Fragment, Slice, } from "@tiptap/pm/model";
+import { Plugin, PluginKey, TextSelection, } from "@tiptap/pm/state";
+import { canSplit } from "@tiptap/pm/transform";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import { cn } from "../internal/classes.js";
+export const richTextEditorSizeNames = ["default", "compact"];
+const fenceLanguage = /^[\w+#.-]{1,32}$/;
+const typedFence = /```([\w+#.-]{1,32})?\s$/;
+const fenceOnly = /^```([\w+#.-]{1,32})?$/;
+const openingFence = /^ {0,3}(?:(`{3,})([^`]*)|(~{3,})(.*))$/;
+function isFenceLine(state) {
+    const { $from, empty } = state.selection;
+    if (!empty ||
+        $from.parent.type.name !== "paragraph" ||
+        $from.parentOffset !== $from.parent.content.size)
+        return false;
+    return fenceOnly.test($from.parent
+        .textBetween(0, $from.parentOffset, undefined, "\n")
+        .split("\n")
+        .at(-1) ?? "");
+}
+function markdownBlocks(schema, text) {
+    const blocks = [];
+    const lines = text.replace(/\r\n?/g, "\n").split("\n");
+    while (lines.length) {
+        const line = lines.shift();
+        const open = openingFence.exec(line);
+        if (!open) {
+            if (line.trim())
+                blocks.push(schema.nodes.paragraph.create(null, schema.text(line)));
+            continue;
+        }
+        const fence = open[1] ?? open[3];
+        const info = (open[2] ?? open[4]).trim().split(/\s/)[0];
+        const closing = new RegExp(`^ {0,3}${fence[0]}{${fence.length},}\\s*$`);
+        const end = lines.findIndex((candidate) => closing.test(candidate));
+        const code = (end === -1 ? lines.splice(0) : lines.splice(0, end + 1).slice(0, -1)).join("\n");
+        blocks.push(schema.nodes.codeBlock.create({ language: fenceLanguage.test(info) ? info : null }, code ? schema.text(code) : null));
+    }
+    return blocks;
+}
+// StarterKit's fence rule only fires at the start of a paragraph, but Shift+Enter leaves the fence after a hard break.
+const MarkdownCodeFence = Extension.create({
+    name: "markdownCodeFence",
+    priority: 1000,
+    addInputRules() {
+        return [
+            new InputRule({
+                find: typedFence,
+                handler: ({ state, range, match }) => {
+                    const { tr, schema } = state;
+                    const codeBlock = schema.nodes.codeBlock;
+                    const $from = tr.doc.resolve(range.from);
+                    if ($from.parent.type.name !== "paragraph" ||
+                        range.to !== $from.end())
+                        return null;
+                    const before = $from.nodeBefore;
+                    const attrs = { language: match[1] ?? null };
+                    if (!before) {
+                        if (!$from
+                            .node(-1)
+                            .canReplaceWith($from.index(-1), $from.indexAfter(-1), codeBlock))
+                            return null;
+                        tr.delete(range.from, range.to).setBlockType(range.from, range.from, codeBlock, attrs);
+                        return;
+                    }
+                    if (before.type.name !== "hardBreak")
+                        return null;
+                    const splitAt = range.from - before.nodeSize;
+                    tr.delete(splitAt, range.to);
+                    if (!canSplit(tr.doc, splitAt, 1, [{ type: codeBlock, attrs }]))
+                        return null;
+                    tr.split(splitAt, 1, [{ type: codeBlock, attrs }]);
+                    tr.setSelection(TextSelection.create(tr.doc, splitAt + 2));
+                },
+            }),
+        ];
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey("markdownCodeFencePaste"),
+                props: {
+                    handlePaste: (view, event) => {
+                        const text = event.clipboardData?.getData("text/plain") ?? "";
+                        if (view.state.selection.$from.parent.type.spec.code ||
+                            !text.split(/\r\n?|\n/).some((line) => openingFence.test(line)))
+                            return false;
+                        const blocks = markdownBlocks(view.state.schema, text);
+                        const slice = new Slice(Fragment.from(blocks), blocks[0]?.type.name === "paragraph" ? 1 : 0, blocks.at(-1)?.type.name === "paragraph" ? 1 : 0);
+                        view.dispatch(view.state.tr
+                            .replaceSelection(slice)
+                            .scrollIntoView()
+                            .setMeta("paste", true));
+                        return true;
+                    },
+                },
+            }),
+        ];
+    },
+});
+const MessageFormatting = Extension.create({
+    name: "messageFormatting",
+    extendMarkSchema(extension) {
+        if (extension.name === "link")
+            return { inclusive: false };
+        return {};
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey("clearDeletedLink"),
+                appendTransaction(transactions, oldState, state) {
+                    const link = state.schema.marks.link;
+                    if (!link ||
+                        !transactions.some((transaction) => transaction.docChanged) ||
+                        state.doc.content.size >= oldState.doc.content.size ||
+                        !state.selection.empty ||
+                        !state.storedMarks?.some((mark) => mark.type === link))
+                        return null;
+                    if (state.selection.$from.parent.content.size &&
+                        state.selection.$from.marks().some((mark) => mark.type === link))
+                        return null;
+                    return state.tr.removeStoredMark(link);
+                },
+            }),
+        ];
+    },
+});
+function within(state, name) {
+    const { $from } = state.selection;
+    for (let depth = $from.depth; depth > 0; depth -= 1)
+        if ($from.node(depth).type.name === name)
+            return true;
+    return false;
+}
+const allowedProtocols = ["http:", "https:", "mailto:"];
+const baseExtensions = [
+    StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+        horizontalRule: false,
+        underline: false,
+        link: {
+            openOnClick: false,
+            isAllowedUri: (url, context) => {
+                const protocol = /^[a-z][a-z\d+.-]*:/i.exec(url)?.[0].toLowerCase();
+                return (context.defaultValidate(url) &&
+                    (!protocol || allowedProtocols.includes(protocol)));
+            },
+        },
+    }),
+    MarkdownCodeFence,
+    MessageFormatting,
+];
+/**
+ * A chat message editor built on Tiptap. Enter sends, Shift+Enter adds a
+ * line, and lists, code fences, links, and headings work as you type. It marks
+ * itself `data-slot="input-group-control"`, so an `InputGroup` around it draws
+ * the border, focus, and invalid states.
+ */
+export function RichTextEditor({ ref, size, condensed = false, value, onChange, onSend, extensions = [], placeholder = "Ask anything…", disabled = false, ariaLabel = "Message", ariaInvalid = false, ariaDescribedBy, ariaExpanded, ariaControls, ariaActiveDescendant, toolbarAddon, className, }) {
+    const scale = size ?? "default";
+    const inline = condensed || scale === "compact";
+    const onSendRef = useRef(onSend);
+    const onChangeRef = useRef(onChange);
+    const placeholderRef = useRef(placeholder);
+    const suggestionOpenRef = useRef(ariaExpanded ?? false);
+    onSendRef.current = onSend;
+    onChangeRef.current = onChange;
+    placeholderRef.current = placeholder;
+    suggestionOpenRef.current = ariaExpanded ?? false;
+    const configured = useMemo(() => [
+        ...baseExtensions,
+        Placeholder.configure({ placeholder: () => placeholderRef.current }),
+        ...extensions,
+    ], [extensions]);
+    const editor = useEditor({
+        immediatelyRender: false,
+        extensions: configured,
+        content: value,
+        editable: !disabled,
+        editorProps: {
+            // useEditor re-applies editorProps on every render, so these stay current.
+            attributes: {
+                "data-slot": "input-group-control",
+                role: "textbox",
+                "aria-label": ariaLabel,
+                "aria-disabled": String(disabled),
+                "aria-multiline": "true",
+                "aria-autocomplete": "list",
+                "aria-invalid": ariaInvalid ? "true" : "false",
+                // ARIA forbids aria-expanded on a textbox; aria-controls and aria-activedescendant carry the open list.
+                ...(ariaDescribedBy && { "aria-describedby": ariaDescribedBy }),
+                ...(ariaControls && { "aria-controls": ariaControls }),
+                ...(ariaActiveDescendant && {
+                    "aria-activedescendant": ariaActiveDescendant,
+                }),
+                class: "sprout-rich-text-editor-content",
+            },
+            handleKeyDown: (view, event) => {
+                if (event.isComposing)
+                    return false;
+                if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                    event.preventDefault();
+                    onSendRef.current();
+                    return true;
+                }
+                if (event.key === "Enter" && suggestionOpenRef.current)
+                    return false;
+                if (event.key === "Enter" && isFenceLine(view.state))
+                    return false;
+                if (event.key === "Enter" &&
+                    !event.shiftKey &&
+                    !within(view.state, "listItem") &&
+                    !within(view.state, "codeBlock")) {
+                    event.preventDefault();
+                    onSendRef.current();
+                    return true;
+                }
+                return false;
+            },
+        },
+        onUpdate: ({ editor: current }) => onChangeRef.current(current.getJSON()),
+    });
+    useImperativeHandle(ref, () => ({
+        focus: () => editor?.commands.focus(),
+        editor: () => editor,
+        setContent: (content) => editor?.commands.setContent(content, { emitUpdate: true }),
+    }), [editor]);
+    useEffect(() => {
+        editor?.setEditable(!disabled, false);
+    }, [disabled, editor]);
+    useEffect(() => {
+        if (editor && !editor.isDestroyed)
+            editor.view.dispatch(editor.state.tr);
+    }, [editor, placeholder]);
+    useEffect(() => {
+        if (editor && !editor.state.doc.eq(editor.schema.nodeFromJSON(value)))
+            editor.commands.setContent(value, { emitUpdate: false });
+    }, [editor, value]);
+    return (_jsxs("div", { "data-slot": "rich-text-editor", "data-size": scale, "data-condensed": condensed || undefined, "data-disabled": disabled || undefined, className: cn("sprout-rich-text-editor", `sprout-rich-text-editor-size-${scale}`, condensed && "sprout-rich-text-editor-condensed", className), children: [_jsx("div", { className: "sprout-rich-text-editor-body", children: _jsx(EditorContent, { editor: editor }) }), toolbarAddon && (_jsx("div", { "data-slot": "rich-text-editor-toolbar", className: cn("sprout-rich-text-editor-toolbar", inline && "sprout-rich-text-editor-toolbar-inline"), children: toolbarAddon }))] }));
+}

package/dist/components/schema-diagram.d.ts

@@ -0,0 +1,52 @@
+import { type HTMLAttributes } from "react";
+export declare const schemaTableStateNames: readonly ["new", "changed", "unchanged", "linked"];
+export declare const schemaChangeNames: readonly ["added", "changed", "removed"];
+export declare const schemaDiagramLayoutNames: readonly ["auto", "horizontal", "vertical"];
+export type SchemaTableState = (typeof schemaTableStateNames)[number];
+export type SchemaChange = (typeof schemaChangeNames)[number];
+export type SchemaDiagramLayout = (typeof schemaDiagramLayoutNames)[number];
+export interface SchemaField {
+    id: string;
+    label: string;
+    type: string;
+    required: boolean;
+    unique?: boolean | undefined;
+    /** A second, muted line under the field, such as a relation target. */
+    detail?: string | undefined;
+    change?: SchemaChange | undefined;
+}
+export interface SchemaTable {
+    id: string;
+    label: string;
+    state: SchemaTableState;
+    fields: SchemaField[];
+}
+/** A link starts at a field row and ends at the target table header. */
+export interface SchemaLink {
+    id: string;
+    /** The table that holds `field`. */
+    source: string;
+    field: string;
+    target: string;
+    label: string;
+}
+export interface SchemaDiagramProps extends Omit<HTMLAttributes<HTMLDivElement>, "role" | "children"> {
+    tables: readonly SchemaTable[];
+    links: readonly SchemaLink[];
+    /** Names the diagram for assistive tech, such as “Schema diagram for Launch tracker”. */
+    label: string;
+    /**
+     * `auto` stacks tables top to bottom on viewports under 768px and lays them
+     * out in columns otherwise.
+     */
+    layout?: SchemaDiagramLayout | undefined;
+}
+/**
+ * A pan-and-zoom diagram of tables, their fields, and the links between them,
+ * with proposed changes marked on each table and field.
+ */
+export declare function SchemaDiagram({ tables, links, label, layout: layoutName, className, ...props }: SchemaDiagramProps): import("react").JSX.Element;
+export interface SchemaLegendProps extends Omit<HTMLAttributes<HTMLUListElement>, "children"> {
+}
+/** Explains the change colors, the unique key, and the required mark. */
+export declare function SchemaLegend({ className, ...props }: SchemaLegendProps): import("react").JSX.Element;