@tulipfarm/sprout 0.1.0 → 0.2.0

package/dist/components/attachment.js

@@ -168,7 +168,7 @@ function AttachmentCarousel({ className, children, onKeyDownCapture, ...props })
             scroll(event.key === "ArrowLeft" ? -1 : 1);
         }
     };
-    return (_jsxs("div", { "data-slot": "attachment-group", "data-variant": "carousel", role: "region", "aria-roledescription": "carousel", className: cn("sprout-attachment-group", "sprout-attachment-group-carousel", className), onKeyDownCapture: handleKeyDown, ...props, children: [_jsx("div", { ref: viewport, className: "sprout-attachment-carousel-viewport", onScroll: measure, children: _jsx("div", { className: "sprout-attachment-carousel-track", children: Children.map(children, (child) => child == null || child === false ? null : (_jsx("div", { role: "group", "aria-roledescription": "slide", className: "sprout-attachment-carousel-item", children: child }))) }) }), edges.start && (_jsx("span", { className: "sprout-attachment-carousel-edge", "data-side": "start", children: _jsx("button", { type: "button", "aria-label": "Previous attachments", tabIndex: -1, className: "sprout-attachment-carousel-arrow", onClick: () => scroll(-1), children: _jsx(ChevronLeft, { size: 12, "aria-hidden": "true" }) }) })), edges.end && (_jsx("span", { className: "sprout-attachment-carousel-edge", "data-side": "end", children: _jsx("button", { type: "button", "aria-label": "Next attachments", tabIndex: -1, className: "sprout-attachment-carousel-arrow", onClick: () => scroll(1), children: _jsx(ChevronRight, { size: 12, "aria-hidden": "true" }) }) }))] }));
+    return (_jsxs("div", { "data-slot": "attachment-group", "data-variant": "carousel", role: "region", "aria-roledescription": "carousel", className: cn("sprout-attachment-group", "sprout-attachment-group-carousel", className), onKeyDownCapture: handleKeyDown, ...props, children: [_jsx("div", { ref: viewport, className: "sprout-attachment-carousel-viewport", onScroll: measure, children: _jsx("div", { className: "sprout-attachment-carousel-track", children: Children.map(children, (child) => child == null || child === false ? null : (_jsx("div", { role: "group", "aria-roledescription": "slide", className: "sprout-attachment-carousel-item", children: child }))) }) }), edges.start && (_jsx("span", { className: "sprout-attachment-carousel-edge", "data-side": "start", children: _jsx(Button, { variant: "outline", size: "icon-xs", "aria-label": "Previous attachments", tabIndex: -1, className: "sprout-attachment-carousel-arrow", onClick: () => scroll(-1), children: _jsx(ChevronLeft, { "aria-hidden": "true" }) }) })), edges.end && (_jsx("span", { className: "sprout-attachment-carousel-edge", "data-side": "end", children: _jsx(Button, { variant: "outline", size: "icon-xs", "aria-label": "Next attachments", tabIndex: -1, className: "sprout-attachment-carousel-arrow", onClick: () => scroll(1), children: _jsx(ChevronRight, { "aria-hidden": "true" }) }) }))] }));
 }
 /** A paper glyph with a colored extension badge, such as PDF or XLSX. Decorative. */
 export function FileTypeIcon({ name, mediaType, size = "sm", className, ...props }) {
@@ -231,7 +231,7 @@ export function FileAttachment({ file, variant = "list", onRemove, onRetry, onOp
     const remove = (size) => onRemove && (_jsx(Button, { variant: "ghost", size: size, "aria-label": `Remove ${file.name}`, onClick: onRemove, children: _jsx(X, { size: 14, "aria-hidden": "true" }) }));
     const viewer = inViewer && !shared && (_jsx(FileViewer, { file: target, open: open, onOpenChange: setOpen }));
     if (variant === "chip") {
-        const inner = (_jsxs(_Fragment, { children: [image ? (_jsx("span", { className: "sprout-file-attachment-thumb", children: file.url && (_jsx(AttachmentImage, { src: file.url, name: file.name }, file.url)) })) : (_jsx(FileTypeIcon, { name: file.name, mediaType: file.mediaType })), _jsx("span", { className: "sprout-file-attachment-name", children: file.name })] }));
+        const inner = (_jsxs(_Fragment, { children: [image && file.url ? (_jsx("span", { className: "sprout-file-attachment-thumb", children: _jsx(AttachmentImage, { src: file.url, name: file.name }, file.url) })) : (_jsx(FileTypeIcon, { name: file.name, mediaType: file.mediaType })), _jsx("span", { className: "sprout-file-attachment-name", children: file.name })] }));
         return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: root, "data-slot": "file-attachment", "data-variant": "chip", "data-state": file.state, "data-removable": onRemove ? "" : undefined, className: cn("sprout-file-attachment", className), title: openable ? undefined : `${file.name} · ${stateLabel}`, children: [withPreview(openable ? (_jsx("button", { ...openProps, "aria-label": openLabel, title: peek ? undefined : `${file.name} · ${stateLabel}`, className: "sprout-file-attachment-open", children: inner })) : (_jsx("span", { className: "sprout-file-attachment-open", children: inner }))), busy && _jsx(Spinner, { "aria-label": stateLabel }), retry, remove("icon-xs")] }), viewer] }));
     }
     const name = (_jsxs(_Fragment, { children: [_jsx("span", { className: "sprout-file-attachment-name", title: file.name, children: file.name }), variant !== "inline" && (_jsxs("span", { className: "sprout-file-attachment-status", children: [busy && _jsx(Spinner, { size: "sm", "aria-hidden": "true" }), stateLabel] }))] }));

package/dist/components/brand-icon.js

@@ -11,6 +11,10 @@ export const brandNames = {
     deepseek: "DeepSeek",
     grok: "Grok",
     kimi: "Kimi",
+    gemini: "Gemini",
+    mistral: "Mistral",
+    meta: "Meta",
+    qwen: "Qwen",
     google: "Google Workspace",
     gmail: "Gmail",
     "google-calendar": "Google Calendar",

package/dist/components/canvas.js

@@ -3,11 +3,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
 import { createPortal } from "react-dom";
 import { ArrowLeft } from "reicon-react/icons/ArrowLeft";
-import { Loader } from "reicon-react/icons/Loader";
 import { SidebarRight } from "reicon-react/icons/SidebarRight";
 import { X } from "reicon-react/icons/X";
 import { cn } from "../internal/classes.js";
 import { Button } from "./button.js";
+import { Spinner } from "./spinner.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup, useResizableLayout, } from "./resizable.js";
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from "./sheet.js";
 /** Below this split width (px), the canvas opens as a full-screen sheet. */
@@ -153,7 +153,7 @@ export function CanvasPanel({ tabs, activeId, onSelect, onCloseTab, onClose, chi
                                                 tabButtons.current.set(tab.id, node);
                                             else
                                                 tabButtons.current.delete(tab.id);
-                                        }, "data-slot": "canvas-tab", "data-active": active ? "" : undefined, "data-busy": tab.busy ? "" : undefined, "data-hover": hovered === tab.id ? "" : undefined, "aria-label": tab.busy ? `${tab.title}, loading` : undefined, "aria-selected": active, "aria-controls": bodyId, tabIndex: active || (activeIndex === -1 && index === 0) ? 0 : -1, style: { order: index * 2 }, onClick: () => onSelect(tab.id), onKeyDown: (event) => onTabKeyDown(event, index), onPointerEnter: () => setHovered(tab.id), onPointerLeave: () => setHovered(null), className: "sprout-canvas-tab", children: [tab.busy ? (_jsx(Loader, { size: 14, "aria-hidden": "true", className: "sprout-canvas-tab-spinner" })) : (Icon && (_jsx("span", { "aria-hidden": "true", className: "sprout-canvas-tab-icon", children: _jsx(Icon, { size: 14 }) }))), _jsx("span", { className: "sprout-canvas-tab-title", children: tab.title })] }, tab.id));
+                                        }, "data-slot": "canvas-tab", "data-active": active ? "" : undefined, "data-busy": tab.busy ? "" : undefined, "data-hover": hovered === tab.id ? "" : undefined, "aria-label": tab.busy ? `${tab.title}, loading` : undefined, "aria-selected": active, "aria-controls": bodyId, tabIndex: active || (activeIndex === -1 && index === 0) ? 0 : -1, style: { order: index * 2 }, onClick: () => onSelect(tab.id), onKeyDown: (event) => onTabKeyDown(event, index), onPointerEnter: () => setHovered(tab.id), onPointerLeave: () => setHovered(null), className: "sprout-canvas-tab", children: [tab.busy ? (_jsx(Spinner, { size: "sm", "aria-hidden": "true" })) : (Icon && (_jsx("span", { "aria-hidden": "true", className: "sprout-canvas-tab-icon", children: _jsx(Icon, { size: 14 }) }))), _jsx("span", { className: "sprout-canvas-tab-title", children: tab.title })] }, tab.id));
                                 }) }), tabs.map((tab, index) => {
                                 const active = index === activeIndex;
                                 return (_jsx("button", { type: "button", "aria-label": `Close ${tab.title}`, "data-active": active ? "" : undefined, "data-hover": hovered === tab.id ? "" : undefined, tabIndex: active ? 0 : -1, style: { order: index * 2 + 1 }, onClick: () => closeTab(index), onPointerEnter: () => setHovered(tab.id), onPointerLeave: () => setHovered(null), className: "sprout-canvas-tab-close", children: _jsx(X, { size: 12, "aria-hidden": "true" }) }, tab.id));

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;

package/dist/components/chat-input.js

@@ -0,0 +1,279 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { Extension, Node, mergeAttributes, } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+import Suggestion, { exitSuggestion, } from "@tiptap/suggestion";
+import { ArrowUp } from "reicon-react/icons/ArrowUp";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { Folder } from "reicon-react/icons/Folder";
+import { Plus } from "reicon-react/icons/Plus";
+import { Sliders } from "reicon-react/icons/Sliders";
+import { X } from "reicon-react/icons/X";
+import { cn } from "../internal/classes.js";
+import { FileAttachment } from "./attachment.js";
+import { BrandIcon } from "./brand-icon.js";
+import { Button } from "./button.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, } from "./input-group.js";
+import { MentionList, MentionOption, MentionStatus } from "./mention-list.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { RichTextEditor, } from "./rich-text-editor.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+export const chatInputReferenceKindNames = ["agent", "skill", "file"];
+export const chatInputStatusNames = ["idle", "streaming"];
+const triggers = {
+    agent: { char: "@", label: "Agents", empty: "No agents match." },
+    skill: { char: "/", label: "Skills", empty: "No skills match." },
+    file: { char: "#", label: "Files", empty: "No files match." },
+};
+const referenceNode = Node.create({
+    name: "chatReference",
+    inline: true,
+    group: "inline",
+    atom: true,
+    selectable: true,
+    addAttributes() {
+        return {
+            kind: {
+                default: "file",
+                rendered: false,
+                parseHTML: (el) => el.getAttribute("data-chat-reference"),
+            },
+            id: {
+                default: "",
+                rendered: false,
+                parseHTML: (el) => el.getAttribute("data-id"),
+            },
+            label: {
+                default: "",
+                rendered: false,
+                parseHTML: (el) => el.getAttribute("data-label"),
+            },
+        };
+    },
+    parseHTML() {
+        return [{ tag: "span[data-chat-reference]" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        const kind = node.attrs.kind;
+        return [
+            "span",
+            mergeAttributes(HTMLAttributes, {
+                "data-chat-reference": kind,
+                "data-id": node.attrs.id,
+                "data-label": node.attrs.label,
+                class: "sprout-chat-input-reference",
+            }),
+            `${triggers[kind]?.char ?? ""}${node.attrs.label}`,
+        ];
+    },
+    renderText({ node }) {
+        const kind = node.attrs.kind;
+        return `${triggers[kind]?.char ?? ""}${node.attrs.label}`;
+    },
+});
+const linkShortcut = Extension.create({
+    name: "chatInputLinkShortcut",
+    addKeyboardShortcuts() {
+        return {
+            "Mod-k": ({ editor }) => {
+                if (editor.isActive("link"))
+                    return editor.chain().focus().unsetLink().run();
+                const { from, to } = editor.state.selection;
+                const text = editor.state.doc.textBetween(from, to).trim();
+                const href = /^\S+@\S+\.\S+$/.test(text)
+                    ? `mailto:${text}`
+                    : /^(https?:\/\/|www\.)\S+$/i.test(text)
+                        ? text.startsWith("www.")
+                            ? `https://${text}`
+                            : text
+                        : null;
+                if (!href)
+                    return false;
+                return editor.chain().focus().setLink({ href }).run();
+            },
+        };
+    },
+});
+function triggerExtension(kind, source, onState) {
+    const key = new PluginKey(`chatInput-${kind}`);
+    return Extension.create({
+        name: `chatInput-${kind}`,
+        addProseMirrorPlugins() {
+            return [
+                Suggestion({
+                    editor: this.editor,
+                    pluginKey: key,
+                    char: triggers[kind].char,
+                    allowSpaces: false,
+                    items: async ({ query }) => (await source.current?.(query)) ?? [],
+                    command: ({ editor, range, props }) => editor
+                        .chain()
+                        .focus()
+                        .insertContentAt(range, [
+                        {
+                            type: "chatReference",
+                            attrs: { kind, id: props.id, label: props.label },
+                        },
+                        { type: "text", text: " " },
+                    ])
+                        .run(),
+                    render: () => {
+                        let current = null;
+                        let active = 0;
+                        const publish = () => {
+                            if (!current)
+                                return;
+                            const items = current.items;
+                            onState({
+                                kind,
+                                items,
+                                active: Math.min(active, Math.max(0, items.length - 1)),
+                                select: (index) => {
+                                    const item = items[index];
+                                    if (item)
+                                        current?.command(item);
+                                },
+                            });
+                        };
+                        return {
+                            onStart: (props) => {
+                                current = props;
+                                active = 0;
+                                publish();
+                            },
+                            onUpdate: (props) => {
+                                current = props;
+                                active = 0;
+                                publish();
+                            },
+                            onKeyDown: ({ event, view }) => {
+                                if (event.key === "Escape") {
+                                    exitSuggestion(view, key);
+                                    return true;
+                                }
+                                const count = current?.items.length ?? 0;
+                                if (!count)
+                                    return false;
+                                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                                    active =
+                                        (active + (event.key === "ArrowDown" ? 1 : count - 1)) %
+                                            count;
+                                    publish();
+                                    return true;
+                                }
+                                if ((event.key === "Enter" && !event.shiftKey) ||
+                                    event.key === "Tab") {
+                                    current.command(current.items[active]);
+                                    return true;
+                                }
+                                return false;
+                            },
+                            onExit: () => {
+                                current = null;
+                                onState(null);
+                            },
+                        };
+                    },
+                }),
+            ];
+        },
+    });
+}
+function hasContent(node) {
+    if (node.type === "chatReference")
+        return true;
+    if (node.text?.trim())
+        return true;
+    return node.content?.some(hasContent) ?? false;
+}
+function textDoc(text) {
+    return {
+        type: "doc",
+        content: [{ type: "paragraph", content: [{ type: "text", text }] }],
+    };
+}
+function ModelMark({ model }) {
+    if (model.brand)
+        return _jsx(BrandIcon, { brand: model.brand, size: "inline" });
+    return model.icon ?? null;
+}
+function OptionPicker({ label, search, options, value, onChange, disabled, icon, align, }) {
+    const [open, setOpen] = useState(false);
+    const selected = options.find((option) => option.id === value);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(InputGroupButton, { size: "sm", "aria-label": `${label}: ${selected?.label ?? "None"}`, disabled: disabled, className: "sprout-chat-input-picker" }), children: [icon(selected), _jsx("span", { className: "sprout-chat-input-picker-label", children: selected?.label ?? label }), _jsx(ChevronDown, { size: 12, "aria-hidden": "true" })] }), _jsx(PopoverContent, { size: "picker", side: "top", align: align, sideOffset: 8, className: "sprout-chat-input-menu", children: _jsxs(Command, { children: [_jsx(CommandInput, { "aria-label": search, placeholder: `${search}…` }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No matches." }), _jsx(CommandGroup, { heading: label, children: options.map((option) => (_jsxs(CommandItem, { value: `${option.label} ${option.description ?? ""}`, "data-checked": option.id === value, disabled: "disabled" in option && !!option.disabled, onSelect: () => {
+                                            onChange(option.id);
+                                            setOpen(false);
+                                        }, children: [icon(option), _jsxs("span", { className: "sprout-chat-input-option-text", children: [_jsx("span", { children: option.label }), option.description && (_jsx("span", { className: "sprout-chat-input-option-description", children: option.description }))] })] }, option.id))) })] })] }) })] }));
+}
+/**
+ * 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 function ChatInput({ value, onValueChange, onSend, onStop, status = "idle", placeholder = "Ask anything, @agents, /skills, #files…", streamingPlaceholder = "Working on your request…", disabled = false, label = "Message", agents, skills, files, attachments = [], onRemoveAttachment, attachActions, modes, mode = null, onModeChange, projects, project, onProjectChange, models, model, onModelChange, prompts, onPromptSelect, className, }) {
+    const editor = useRef(null);
+    const form = useRef(null);
+    const listId = useId();
+    const [panel, setPanel] = useState(null);
+    const [panelBelow, setPanelBelow] = useState(false);
+    const sources = {
+        agent: useRef(agents),
+        skill: useRef(skills),
+        file: useRef(files),
+    };
+    sources.agent.current = agents;
+    sources.skill.current = skills;
+    sources.file.current = files;
+    const enabled = `${!!agents}${!!skills}${!!files}`;
+    const extensions = useMemo(() => [
+        referenceNode,
+        linkShortcut,
+        ...chatInputReferenceKindNames
+            .filter((kind) => sources[kind].current)
+            .map((kind) => triggerExtension(kind, sources[kind], setPanel)),
+    ], 
+    // Sources are refs, so only adding or removing a trigger rebuilds the editor.
+    [enabled]);
+    const streaming = status === "streaming";
+    const filled = hasContent(value) || attachments.length > 0;
+    const canSend = filled && !disabled && !streaming;
+    const activeMode = modes?.find((option) => option.id === mode);
+    const optionId = (index) => `${listId}-option-${index}`;
+    const panelOpen = !!panel;
+    useLayoutEffect(() => {
+        const bounds = form.current?.getBoundingClientRect();
+        // Near the top of a short screen there's no room above, so the panel opens below.
+        if (panel && bounds)
+            setPanelBelow(bounds.top < 320 && window.innerHeight - bounds.bottom > bounds.top);
+    }, [panelOpen]);
+    const send = () => {
+        if (canSend)
+            onSend();
+    };
+    const fill = (prompt) => {
+        editor.current?.setContent(textDoc(prompt.prompt ?? prompt.label));
+        editor.current?.editor()?.commands.focus("end");
+        onPromptSelect?.(prompt);
+    };
+    return (_jsxs("div", { "data-slot": "chat-input", "data-status": status, "data-mode-color": activeMode?.color ? "" : undefined, style: activeMode?.color
+            ? {
+                "--sprout-chat-input-mode": activeMode.color,
+            }
+            : undefined, className: cn("sprout-chat-input", className), children: [_jsxs("form", { ref: form, "aria-label": label, className: "sprout-chat-input-form", onSubmit: (event) => {
+                    event.preventDefault();
+                    send();
+                }, children: [_jsxs(InputGroup, { variant: "composer", className: "sprout-chat-input-box", children: [attachments.length > 0 && (_jsx(InputGroupAddon, { align: "block-start", className: "sprout-chat-input-attachments", children: attachments.map((file) => (_jsx(FileAttachment, { file: file, variant: "chip", viewable: true, preview: true, onRemove: onRemoveAttachment && !disabled
+                                        ? () => onRemoveAttachment(file.id)
+                                        : undefined }, file.id))) })), _jsx(RichTextEditor, { ref: editor, value: value, onChange: onValueChange, onSend: send, extensions: extensions, placeholder: streaming ? streamingPlaceholder : placeholder, disabled: disabled, ariaLabel: label, ariaExpanded: !!panel, ariaControls: panel ? listId : undefined, ariaActiveDescendant: panel?.items.length ? optionId(panel.active) : undefined, className: "sprout-chat-input-editor", toolbarAddon: _jsxs("div", { className: "sprout-chat-input-bar", children: [_jsxs("div", { className: "sprout-chat-input-bar-start", children: [attachActions && attachActions.length > 0 && (_jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(DropdownMenuTrigger, { render: _jsx(InputGroupButton, { size: "icon-sm", "aria-label": "Add files and more", disabled: disabled }) }), children: _jsx(Plus, { size: 16, "aria-hidden": "true" }) }), _jsx(TooltipContent, { children: "Add files and more" })] }), _jsx(DropdownMenuContent, { size: "menu", side: "top", align: "start", className: "sprout-chat-input-menu", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Add" }), attachActions.map((action) => (_jsxs(DropdownMenuItem, { onClick: action.onSelect, children: [action.icon, _jsxs("span", { className: "sprout-chat-input-option-text", children: [_jsx("span", { children: action.label }), action.description && (_jsx("span", { className: "sprout-chat-input-option-description", children: action.description }))] })] }, action.id)))] }) })] })), modes && modes.length > 0 && (_jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(DropdownMenuTrigger, { render: _jsx(InputGroupButton, { size: "icon-sm", "aria-label": `Mode: ${activeMode?.label ?? "Default"}`, disabled: disabled }) }), children: _jsx(Sliders, { size: 16, "aria-hidden": "true" }) }), _jsx(TooltipContent, { children: "Modes" })] }), _jsx(DropdownMenuContent, { size: "menu", side: "top", align: "start", className: "sprout-chat-input-menu", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Mode" }), _jsx(DropdownMenuRadioGroup, { value: mode ?? "", onValueChange: (next) => onModeChange?.(next === mode || !next ? null : String(next)), children: modes.map((option) => (_jsxs(DropdownMenuRadioItem, { value: option.id, closeOnClick: true, style: option.color
+                                                                                ? {
+                                                                                    "--sprout-chat-input-mode": option.color,
+                                                                                }
+                                                                                : undefined, className: option.color
+                                                                                ? "sprout-chat-input-mode-option"
+                                                                                : undefined, children: [option.icon, _jsxs("span", { className: "sprout-chat-input-option-text", children: [_jsx("span", { children: option.label }), option.description && (_jsx("span", { className: "sprout-chat-input-option-description", children: option.description }))] })] }, option.id))) })] }) })] })), activeMode && (_jsxs(InputGroupButton, { size: "sm", variant: "secondary", className: "sprout-chat-input-mode", "aria-label": `Turn off ${activeMode.label}`, disabled: disabled, onClick: () => onModeChange?.(null), children: [activeMode.icon, _jsx("span", { className: "sprout-chat-input-picker-label", children: activeMode.label }), _jsx(X, { size: 12, "aria-hidden": "true" })] })), projects && projects.length > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "sprout-chat-input-divider", "aria-hidden": "true" }), _jsx(OptionPicker, { label: "Project", search: "Search projects", options: projects, value: project, onChange: (id) => onProjectChange?.(id), disabled: disabled, icon: (option) => option?.icon ?? (_jsx(Folder, { size: 16, "aria-hidden": "true" })), align: "start" })] }))] }), _jsxs("div", { className: "sprout-chat-input-bar-end", children: [models && models.length > 0 && (_jsx(OptionPicker, { label: "Model", search: "Search models", options: models, value: model, onChange: (id) => onModelChange?.(id), disabled: disabled, icon: (option) => option && _jsx(ModelMark, { model: option }), align: "end" })), streaming ? (_jsx(InputGroupButton, { size: "icon-sm", variant: "default", className: "sprout-chat-input-send", "aria-label": "Stop", onClick: onStop, children: _jsx("span", { className: "sprout-chat-input-stop", "aria-hidden": "true" }) })) : (_jsx(InputGroupButton, { type: "submit", size: "icon-sm", variant: canSend ? "default" : "secondary", className: "sprout-chat-input-send", "aria-label": "Send message", disabled: !canSend, children: _jsx(ArrowUp, { size: 16, "aria-hidden": "true" }) }))] })] }) })] }), panel && (_jsx("div", { className: "sprout-chat-input-panel", "data-side": panelBelow ? "bottom" : "top", children: _jsx(MentionList, { id: listId, label: triggers[panel.kind].label, announcement: panel.items.length
+                                ? `${panel.items.length} ${triggers[panel.kind].label.toLowerCase()}. Use Up and Down to choose, Enter to add, Escape to close.`
+                                : triggers[panel.kind].empty, status: panel.items.length ? undefined : (_jsx(MentionStatus, { tone: "empty", children: triggers[panel.kind].empty })), children: panel.items.map((item, index) => (_jsx(MentionOption, { id: optionId(index), active: index === panel.active, onSelect: () => panel.select(index), media: item.media, title: item.label, description: item.description }, item.id))) }) }))] }), prompts && prompts.length > 0 && !filled && !streaming && (_jsx("div", { role: "group", "aria-label": "Suggested prompts", className: "sprout-chat-input-prompts", children: prompts.map((prompt) => (_jsxs(Button, { size: "sm", variant: "outline", disabled: disabled, className: "sprout-chat-input-prompt", onClick: () => fill(prompt), children: [prompt.icon, prompt.label] }, prompt.id))) }))] }));
+}

package/dist/components/code-block.js

@@ -5,7 +5,8 @@ import { Check } from "reicon-react/icons/Check";
 import { Copy } from "reicon-react/icons/Copy";
 import { cn } from "../internal/classes.js";
 import { codeLanguageIds, codeLanguageNames, } from "../internal/languages.js";
-import { codeTokens, embeddedLanguages, isLanguageReady, languageForFilename, loadCodeLanguage, maxHighlightedLength, resolveCodeLanguage, } from "../internal/syntax.js";
+import { tokenClass, useCodeTokens } from "../internal/code-tokens.js";
+import { languageForFilename, loadCodeLanguage, resolveCodeLanguage, } from "../internal/syntax.js";
 import { Button } from "./button.js";
 export { languageForFilename };
 export const codeBlockVariantNames = ["inline", "file", "preview"];
@@ -30,38 +31,6 @@ export async function preloadCodeLanguages(...languages) {
         return resolved ? [loadCodeLanguage(resolved)] : [];
     }));
 }
-function useCodeTokens(code, language) {
-    const [loaded, setLoaded] = useState(0);
-    const highlightable = language !== null && code.length <= maxHighlightedLength;
-    const needed = useMemo(() => highlightable ? [language, ...embeddedLanguages(code, language)] : [], [code, language, highlightable]);
-    const missing = needed.filter((name) => !isLanguageReady(name));
-    const key = missing.join(" ");
-    useEffect(() => {
-        if (!key)
-            return;
-        let live = true;
-        void Promise.all(key.split(" ").map((name) => loadCodeLanguage(name))).then(() => live && setLoaded((value) => value + 1), () => undefined);
-        return () => {
-            live = false;
-        };
-    }, [key]);
-    return useMemo(() => (highlightable ? codeTokens(code, language) : null), 
-    // `loaded` and `key` re-run this once the grammars arrive.
-    [code, language, highlightable, loaded, key]);
-}
-const fontStyleClasses = [
-    [1, "sprout-syntax-italic"],
-    [2, "sprout-syntax-bold"],
-    [4, "sprout-syntax-underline"],
-];
-function tokenClass(token) {
-    const role = /--sprout-syntax-(?:token-)?([a-z-]+)/.exec(token.color ?? "")?.[1];
-    const classes = role && role !== "foreground" ? [`sprout-syntax-${role}`] : [];
-    for (const [flag, name] of fontStyleClasses)
-        if ((token.fontStyle ?? 0) & flag)
-            classes.push(name);
-    return classes.length ? classes.join(" ") : undefined;
-}
 export function CodeBlock({ code, language, filename, lineNumbers = true, wrap = false, variant = "inline", className, ...props }) {
     const [copyState, setCopyState] = useState("idle");
     const timer = useRef(undefined);

package/dist/components/file-explorer.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes } from "react";
+export interface FileExplorerTextFile {
+    /** A slash-separated path, such as `agents/scout/persona.md`. Folders come from the paths. */
+    path: string;
+    content: string;
+}
+export interface FileExplorerUnavailableFile {
+    path: string;
+    /** Why the file has no text to show, such as “Binary files cannot be displayed.” */
+    unavailable: string;
+}
+export type FileExplorerFile = FileExplorerTextFile | FileExplorerUnavailableFile;
+export interface FileExplorerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    files: FileExplorerFile[];
+    /** Heads the sidebar and names the tree, such as “Soul”. */
+    label?: string | undefined;
+    /** The file open at first. Its folders start expanded. */
+    defaultPath?: string | undefined;
+}
+/** Search stops after this many matching lines, so one common word cannot flood the list. */
+export declare const fileExplorerMaxMatches = 500;
+/**
+ * A read-only code explorer: a folder tree, open tabs, and a syntax-colored
+ * file pane. Search filters file names and lists matching lines across every
+ * file; picking a line opens the file there.
+ */
+export declare function FileExplorer({ files, label, defaultPath, className, ...props }: FileExplorerProps): import("react").JSX.Element;