@tulipfarm/sprout 0.1.0 → 0.3.0

package/dist/components/file-explorer.js

@@ -0,0 +1,300 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDeferredValue, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { FileText } from "reicon-react/icons/FileText";
+import { Folder } from "reicon-react/icons/Folder";
+import { FolderOpen } from "reicon-react/icons/FolderOpen";
+import { MinusSquare } from "reicon-react/icons/MinusSquare";
+import { X } from "reicon-react/icons/X";
+import { cn } from "../internal/classes.js";
+import { tokenClass, useCodeTokens } from "../internal/code-tokens.js";
+import { codeLanguageNames } from "../internal/languages.js";
+import { languageForFilename } from "../internal/syntax.js";
+import { SearchField } from "./search-field.js";
+import { StatePanel } from "./state-panel.js";
+/** Search stops after this many matching lines, so one common word cannot flood the list. */
+export const fileExplorerMaxMatches = 500;
+const nameOf = (path) => path.slice(path.lastIndexOf("/") + 1);
+const folderOf = (path) => path.slice(0, Math.max(0, path.lastIndexOf("/")));
+const order = (a, b) => a.kind === b.kind
+    ? a.name.localeCompare(b.name, undefined, { numeric: true })
+    : a.kind === "folder"
+        ? -1
+        : 1;
+function ancestors(path) {
+    const parts = path.split("/").slice(0, -1);
+    return parts.map((_, index) => parts.slice(0, index + 1).join("/"));
+}
+function buildTree(files) {
+    const root = [];
+    const folders = new Map([["", root]]);
+    for (const file of files) {
+        for (const folder of ancestors(file.path)) {
+            if (folders.has(folder))
+                continue;
+            const children = [];
+            folders.get(folderOf(folder)).push({
+                kind: "folder",
+                path: folder,
+                name: nameOf(folder),
+                children,
+            });
+            folders.set(folder, children);
+        }
+        folders
+            .get(folderOf(file.path))
+            .push({ kind: "file", path: file.path, name: nameOf(file.path), file });
+    }
+    for (const children of folders.values())
+        children.sort(order);
+    return root;
+}
+function visibleRows(nodes, expanded, depth = 0) {
+    return nodes.flatMap((node, index) => [
+        { node, depth, size: nodes.length, position: index + 1 },
+        ...(node.kind === "folder" && expanded.has(node.path)
+            ? visibleRows(node.children, expanded, depth + 1)
+            : []),
+    ]);
+}
+function rangesIn(text, needle) {
+    const haystack = text.toLowerCase();
+    const ranges = [];
+    for (let at = haystack.indexOf(needle); at >= 0; at = haystack.indexOf(needle, at + needle.length))
+        ranges.push([at, at + needle.length]);
+    return ranges;
+}
+const excerptLead = 32;
+function searchFiles(files, query) {
+    const needle = query.toLowerCase();
+    const names = files.filter((file) => file.path.toLowerCase().includes(needle));
+    const hits = [];
+    let total = 0;
+    for (const file of files) {
+        if (!("content" in file) || total >= fileExplorerMaxMatches)
+            continue;
+        const lines = [];
+        file.content.split("\n").forEach((raw, index) => {
+            if (total >= fileExplorerMaxMatches)
+                return;
+            const ranges = rangesIn(raw, needle);
+            if (!ranges.length)
+                return;
+            const indent = raw.length - raw.trimStart().length;
+            const cut = Math.max(indent, ranges[0][0] - excerptLead);
+            const prefix = cut > indent ? "…" : "";
+            const shift = cut - prefix.length;
+            lines.push({
+                line: index + 1,
+                text: prefix + raw.slice(cut).trimEnd(),
+                ranges: ranges.map(([start, end]) => [start - shift, end - shift]),
+            });
+            total += 1;
+        });
+        if (lines.length)
+            hits.push({ file, lines });
+    }
+    return { names, hits, total, capped: total >= fileExplorerMaxMatches };
+}
+/** Splits text pieces at the match ranges and wraps the matches in `mark`. */
+function marked(pieces, ranges) {
+    const out = [];
+    let offset = 0;
+    pieces.forEach((piece, index) => {
+        const end = offset + piece.content.length;
+        const cuts = new Set([offset, end]);
+        for (const [start, stop] of ranges)
+            for (const cut of [start, stop])
+                if (cut > offset && cut < end)
+                    cuts.add(cut);
+        const sorted = [...cuts].sort((a, b) => a - b);
+        for (let at = 0; at < sorted.length - 1; at += 1) {
+            const from = sorted[at];
+            const text = piece.content.slice(from - offset, sorted[at + 1] - offset);
+            const span = (_jsx("span", { className: piece.className, children: text }, `${index}-${from}`));
+            out.push(ranges.some(([start, stop]) => from >= start && from < stop) ? (_jsx("mark", { className: "sprout-file-explorer-mark", children: span }, `${index}-${from}`)) : (span));
+        }
+        offset = end;
+    });
+    return out;
+}
+const glyphs = {
+    typescript: ["TS", "info"],
+    tsx: ["TSX", "info"],
+    javascript: ["JS", "warning"],
+    jsx: ["JSX", "warning"],
+    json: ["{ }", "warning"],
+    jsonc: ["{ }", "warning"],
+    json5: ["{ }", "warning"],
+    markdown: ["MD", "accent"],
+    mdx: ["MDX", "accent"],
+    python: ["PY", "info"],
+    yaml: ["YML", "danger"],
+    toml: ["TML", "danger"],
+    css: ["CSS", "accent"],
+    scss: ["SCS", "accent"],
+    html: ["< >", "danger"],
+    xml: ["< >", "warning"],
+    shellscript: ["SH", "success"],
+    dotenv: ["ENV", "success"],
+    sql: ["SQL", "accent"],
+    rust: ["RS", "danger"],
+    go: ["GO", "info"],
+    ruby: ["RB", "danger"],
+};
+/** A 16px tile with a short language label, tinted by language. Decorative. */
+function FileGlyph({ name }) {
+    const language = languageForFilename(name);
+    const extension = name.includes(".") ? (name.split(".").at(-1) ?? "") : "";
+    const [label, tone] = (language && glyphs[language]) ?? [
+        extension.slice(0, 3).toUpperCase(),
+        "muted",
+    ];
+    if (!label)
+        return (_jsx(FileText, { size: 16, "aria-hidden": "true", className: "sprout-file-explorer-glyph" }));
+    return (_jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", "data-tone": tone, className: "sprout-file-explorer-glyph", children: [_jsx("rect", { x: "0.5", y: "1.5", width: "15", height: "13", rx: "3", className: "sprout-file-explorer-glyph-tile" }), _jsx("text", { x: "8", y: "10.8", textAnchor: "middle", fontSize: label.length > 2 ? 6 : 7.4, fontWeight: "700", className: "sprout-file-explorer-glyph-label", children: label })] }));
+}
+function CodeView({ file, query, line, }) {
+    const language = languageForFilename(file.path);
+    const tokens = useCodeTokens(file.content, language);
+    const needle = query.toLowerCase();
+    const current = useRef(null);
+    useEffect(() => {
+        current.current?.scrollIntoView({ block: "center" });
+    }, [line, file.path]);
+    const lines = useMemo(() => tokens?.map((row) => row.map((token) => ({
+        content: token.content,
+        className: tokenClass(token),
+    }))) ?? file.content.split("\n").map((content) => [{ content }]), [tokens, file.content]);
+    // ponytail: one DOM row per line; virtualize if files past ~20k lines matter.
+    return (_jsx("div", { className: "sprout-file-explorer-code", tabIndex: 0, role: "region", "aria-label": file.path, "data-highlighted": tokens ? "" : undefined, children: _jsx("pre", { className: "sprout-file-explorer-pre", children: _jsx("code", { children: lines.map((pieces, index) => {
+                    const text = pieces.map((piece) => piece.content).join("");
+                    return (_jsxs("div", { ref: index + 1 === line ? current : undefined, "data-current": index + 1 === line ? "" : undefined, className: "sprout-file-explorer-line", children: [_jsx("span", { "aria-hidden": "true", className: "sprout-file-explorer-line-number", children: index + 1 }), _jsxs("span", { className: "sprout-file-explorer-line-text", children: [needle
+                                        ? marked(pieces, rangesIn(text, needle))
+                                        : pieces.map((piece, at) => (_jsx("span", { className: piece.className, children: piece.content }, at))), "\n"] })] }, index));
+                }) }) }) }));
+}
+/**
+ * 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 function FileExplorer({ files, label = "Files", defaultPath, className, ...props }) {
+    const tree = useMemo(() => buildTree(files), [files]);
+    const byPath = useMemo(() => new Map(files.map((file) => [file.path, file])), [files]);
+    const [expanded, setExpanded] = useState(() => new Set(defaultPath ? ancestors(defaultPath) : []));
+    const [tabs, setTabs] = useState(defaultPath && byPath.has(defaultPath) ? [defaultPath] : []);
+    const [active, setActive] = useState(tabs[0] ?? null);
+    const [focused, setFocused] = useState(active);
+    const [line, setLine] = useState(null);
+    const [query, setQuery] = useState("");
+    const deferred = useDeferredValue(query.trim());
+    const results = useMemo(() => (deferred ? searchFiles(files, deferred) : null), [files, deferred]);
+    const rows = useMemo(() => visibleRows(tree, expanded), [tree, expanded]);
+    const treeRef = useRef(null);
+    const id = useId();
+    const toggle = (path, open) => setExpanded((current) => {
+        const next = new Set(current);
+        if (open ?? !next.has(path))
+            next.add(path);
+        else
+            next.delete(path);
+        return next;
+    });
+    const open = (path, at = null) => {
+        setTabs((current) => {
+            if (current.includes(path))
+                return current;
+            const next = [...current];
+            next.splice(active ? next.indexOf(active) + 1 : next.length, 0, path);
+            return next;
+        });
+        setActive(path);
+        setFocused(path);
+        setLine(at);
+        setExpanded((current) => new Set([...current, ...ancestors(path)]));
+    };
+    const close = (path) => {
+        const index = tabs.indexOf(path);
+        const next = tabs.filter((tab) => tab !== path);
+        setTabs(next);
+        if (active === path) {
+            setActive(next[Math.min(index, next.length - 1)] ?? null);
+            setLine(null);
+        }
+    };
+    const focusRow = (path) => {
+        if (!path)
+            return;
+        setFocused(path);
+        treeRef.current
+            ?.querySelector(`[data-path="${CSS.escape(path)}"]`)
+            ?.focus();
+    };
+    const onTreeKeyDown = (event) => {
+        const index = rows.findIndex((row) => row.node.path === focused);
+        const row = rows[index];
+        if (!row)
+            return;
+        const { node } = row;
+        const isOpen = node.kind === "folder" && expanded.has(node.path);
+        switch (event.key) {
+            case "ArrowDown":
+                focusRow(rows[index + 1]?.node.path);
+                break;
+            case "ArrowUp":
+                focusRow(rows[index - 1]?.node.path);
+                break;
+            case "Home":
+                focusRow(rows[0]?.node.path);
+                break;
+            case "End":
+                focusRow(rows.at(-1)?.node.path);
+                break;
+            case "ArrowRight":
+                if (node.kind !== "folder")
+                    return;
+                if (isOpen)
+                    focusRow(rows[index + 1]?.node.path);
+                else
+                    toggle(node.path, true);
+                break;
+            case "ArrowLeft":
+                if (isOpen)
+                    toggle(node.path, false);
+                else
+                    focusRow(folderOf(node.path) || undefined);
+                break;
+            case "Enter":
+            case " ":
+                if (node.kind === "folder")
+                    toggle(node.path);
+                else
+                    open(node.path);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    };
+    const activeFile = active ? byPath.get(active) : undefined;
+    const language = activeFile ? languageForFilename(activeFile.path) : null;
+    const rovingPath = focused && rows.some((row) => row.node.path === focused)
+        ? focused
+        : rows[0]?.node.path;
+    return (_jsxs("div", { "data-slot": "file-explorer", ...props, className: cn("sprout-file-explorer", className), children: [_jsxs("aside", { className: "sprout-file-explorer-sidebar", "aria-label": label, children: [_jsxs("div", { className: "sprout-file-explorer-sidebar-header", children: [_jsx("span", { className: "sprout-file-explorer-title", children: label }), _jsx("button", { type: "button", className: "sprout-file-explorer-icon-button", "aria-label": "Collapse all folders", title: "Collapse all folders", disabled: expanded.size === 0, onClick: () => setExpanded(new Set()), children: _jsx(MinusSquare, { size: 14, "aria-hidden": "true" }) })] }), _jsx("div", { className: "sprout-file-explorer-search", children: _jsx(SearchField, { label: `Search ${label.toLowerCase()}`, placeholder: "Search names and text", value: query, maxLength: 120, onChange: setQuery, className: "max-w-none" }) }), results ? (_jsxs("div", { className: "sprout-file-explorer-results", "aria-busy": deferred !== query.trim() || undefined, children: [_jsx("p", { role: "status", className: "sprout-file-explorer-summary", children: results.names.length || results.total
+                                    ? `${results.names.length} ${results.names.length === 1 ? "file name" : "file names"}, ${results.capped ? `first ${results.total}` : results.total} ${results.total === 1 ? "line" : "lines"}`
+                                    : `No files or lines match “${deferred}”.` }), results.names.length > 0 && (_jsxs("section", { "aria-labelledby": `${id}-names`, children: [_jsx("h3", { id: `${id}-names`, className: "sprout-file-explorer-group", children: "File names" }), _jsx("ul", { className: "sprout-file-explorer-list", children: results.names.map((file) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "sprout-file-explorer-result", "aria-current": file.path === active || undefined, onClick: () => open(file.path), children: [_jsx(FileGlyph, { name: file.path }), _jsx("span", { className: "sprout-file-explorer-name", children: marked([{ content: nameOf(file.path) }], rangesIn(nameOf(file.path), deferred.toLowerCase())) }), _jsx("span", { className: "sprout-file-explorer-dir", children: folderOf(file.path) })] }) }, file.path))) })] })), results.hits.length > 0 && (_jsxs("section", { "aria-labelledby": `${id}-lines`, children: [_jsx("h3", { id: `${id}-lines`, className: "sprout-file-explorer-group", children: "Text in files" }), _jsx("ul", { className: "sprout-file-explorer-list", children: results.hits.map(({ file, lines }) => (_jsxs("li", { children: [_jsxs("button", { type: "button", className: "sprout-file-explorer-result", onClick: () => open(file.path, lines[0].line), children: [_jsx(FileGlyph, { name: file.path }), _jsx("span", { className: "sprout-file-explorer-name", children: nameOf(file.path) }), _jsx("span", { className: "sprout-file-explorer-dir", children: folderOf(file.path) }), _jsx("span", { className: "sprout-file-explorer-count", children: lines.length })] }), _jsx("ul", { className: "sprout-file-explorer-list", children: lines.map((hit) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "sprout-file-explorer-hit", "aria-label": `${file.path}, line ${hit.line}: ${hit.text}`, "aria-current": (file.path === active && hit.line === line) ||
+                                                                undefined, onClick: () => open(file.path, hit.line), children: [_jsx("span", { className: "sprout-file-explorer-hit-line", children: hit.line }), _jsx("span", { className: "sprout-file-explorer-hit-text", children: marked([{ content: hit.text }], hit.ranges) })] }) }, hit.line))) })] }, file.path))) })] }))] })) : (_jsxs("div", { ref: treeRef, role: "tree", "aria-label": label, className: "sprout-file-explorer-tree", onKeyDown: onTreeKeyDown, children: [rows.length === 0 && (_jsx("p", { className: "sprout-file-explorer-summary", children: "No files yet." })), rows.map(({ node, depth, size, position }) => {
+                                const folder = node.kind === "folder";
+                                const isOpen = folder && expanded.has(node.path);
+                                return (_jsxs("div", { role: "treeitem", "data-path": node.path, "data-kind": node.kind, "aria-level": depth + 1, "aria-setsize": size, "aria-posinset": position, "aria-expanded": folder ? isOpen : undefined, "aria-selected": folder ? undefined : node.path === active, tabIndex: node.path === rovingPath ? 0 : -1, className: "sprout-file-explorer-row", style: { "--depth": depth }, onFocus: () => setFocused(node.path), onClick: () => (folder ? toggle(node.path) : open(node.path)), children: [Array.from({ length: depth }, (_, at) => (_jsx("span", { "aria-hidden": "true", className: "sprout-file-explorer-guide" }, at))), _jsx("span", { "aria-hidden": "true", className: "sprout-file-explorer-chevron", children: folder && _jsx(ChevronRight, { size: 12 }) }), folder ? (isOpen ? (_jsx(FolderOpen, { size: 16, "aria-hidden": "true", className: "sprout-file-explorer-folder" })) : (_jsx(Folder, { size: 16, "aria-hidden": "true", className: "sprout-file-explorer-folder" }))) : (_jsx(FileGlyph, { name: node.name })), _jsx("span", { className: "sprout-file-explorer-name", title: node.path, children: node.name })] }, node.path));
+                            })] }))] }), _jsxs("section", { className: "sprout-file-explorer-editor", "aria-label": "Editor", children: [tabs.length > 0 && (_jsx("div", { className: "sprout-file-explorer-tabs", "aria-label": "Open files", children: tabs.map((path) => (_jsxs("div", { className: "sprout-file-explorer-tab", "data-active": path === active ? "" : undefined, children: [_jsxs("button", { type: "button", className: "sprout-file-explorer-tab-open", "aria-current": path === active || undefined, title: path, onClick: () => {
+                                        setActive(path);
+                                        setLine(null);
+                                    }, onAuxClick: (event) => {
+                                        if (event.button === 1)
+                                            close(path);
+                                    }, children: [_jsx(FileGlyph, { name: path }), nameOf(path)] }), _jsx("button", { type: "button", className: "sprout-file-explorer-tab-close", "aria-label": `Close ${nameOf(path)}`, onClick: () => close(path), children: _jsx(X, { size: 12, "aria-hidden": "true" }) })] }, path))) })), activeFile ? (_jsxs(_Fragment, { children: [_jsx("nav", { className: "sprout-file-explorer-crumbs", "aria-label": "File path", children: _jsx("ol", { children: activeFile.path.split("/").map((part, index, parts) => (_jsxs("li", { "aria-current": index === parts.length - 1 ? "page" : undefined, children: [index > 0 && (_jsx(ChevronRight, { size: 10, "aria-hidden": "true", className: "sprout-file-explorer-crumb-separator" })), part] }, index))) }) }), _jsx("div", { className: "sprout-file-explorer-body", children: "content" in activeFile ? (activeFile.content === "" ? (_jsx("p", { className: "sprout-file-explorer-summary", children: "This file is empty." })) : (_jsx(CodeView, { file: activeFile, query: results ? deferred : "", line: line }, activeFile.path))) : (_jsx(StatePanel, { kind: "unavailable", heading: "h3", title: "File cannot be displayed", description: activeFile.unavailable })) }), _jsxs("div", { className: "sprout-file-explorer-status", children: [_jsx("span", { children: language ? codeLanguageNames[language] : "Plain text" }), "content" in activeFile && (_jsxs("span", { children: [activeFile.content.split("\n").length.toLocaleString(), " lines"] })), line !== null && _jsxs("span", { children: ["Line ", line] }), _jsx("span", { className: "sprout-file-explorer-status-end", children: "Read only" })] })] })) : (_jsx(StatePanel, { kind: "empty", heading: "h3", title: "Open a file", description: "Choose a file in the tree, or search names and text.", icon: FileText }))] })] }));
+}

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

@@ -65,6 +65,23 @@ interface FileViewerBaseProps {
     renderers?: FileRenderers | undefined;
     /** Where focus goes on close. Defaults to the element that had focus when the viewer opened. */
     finalFocus?: DialogContentProps["finalFocus"];
+    /** Your header controls before Download, such as who is viewing and a Share button. */
+    actions?: ReactNode;
+    /** `DropdownMenuItem`s added to the More actions menu after Reload. */
+    menu?: ReactNode;
+    /**
+     * A side panel for comments, activity, sharing, or file details. Adds a
+     * header toggle. It stays mounted while hidden and across file steps, so
+     * tabs and drafts inside it survive.
+     */
+    panel?: ReactNode;
+    /** The panel's accessible name and toggle label. Defaults to “Details”. */
+    panelLabel?: string;
+    /** Controls whether the panel shows. */
+    panelOpen?: boolean;
+    /** Whether the panel starts open. Defaults to open on screens 1024px and wider. */
+    defaultPanelOpen?: boolean;
+    onPanelOpenChange?: (open: boolean) => void;
 }
 interface SingleFileProps {
     file: ViewableFile | null;
@@ -81,7 +98,7 @@ interface FileSetProps {
 }
 export type FileViewerProps = FileViewerBaseProps & (SingleFileProps | FileSetProps);
 /** A full-screen dialog that opens a local or linked file, or steps through several. */
-export declare function FileViewer({ file, files, index, onIndexChange, open, onOpenChange, renderers, finalFocus, }: FileViewerProps): import("react").JSX.Element;
+export declare function FileViewer({ file, files, index, onIndexChange, open, onOpenChange, renderers, finalFocus, actions, menu, panel, panelLabel, panelOpen, defaultPanelOpen, onPanelOpenChange, }: FileViewerProps): import("react").JSX.Element;
 export interface ViewableFileContentProps extends HTMLAttributes<HTMLDivElement> {
     file: ViewableFile;
     renderers?: FileRenderers | undefined;

package/dist/components/file-viewer.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, Suspense, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { createContext, Suspense, useContext, useEffect, useId, useMemo, useRef, useState, } from "react";
 import { ArrowUpRight } from "reicon-react/icons/ArrowUpRight";
 import { ChevronLeft } from "reicon-react/icons/ChevronLeft";
 import { ChevronRight } from "reicon-react/icons/ChevronRight";
 import { Download } from "reicon-react/icons/Download";
+import { MoreH } from "reicon-react/icons/MoreH";
+import { SidebarRight } from "reicon-react/icons/SidebarRight";
 import { X } from "reicon-react/icons/X";
 import { cn } from "../internal/classes.js";
 import { fileKind } from "../internal/file-kind.js";
 import { Button } from "./button.js";
 import { CodeBlock, languageForFilename } from "./code-block.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, } from "./dialog.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { Spinner } from "./spinner.js";
 import { StatePanel } from "./state-panel.js";
 const RenderersContext = createContext({});
@@ -94,10 +97,12 @@ export function renderableType(name, mediaType) {
         ? type
         : "application/octet-stream";
 }
-function useFileContent(file) {
+function useFileContent(file, attempt = 0, enabled = true) {
     const [loaded, setLoaded] = useState({ kind: "loading" });
     const { source, name, mediaType } = file;
     useEffect(() => {
+        if (!enabled)
+            return;
         let cancelled = false;
         let objectUrl;
         const controller = new AbortController();
@@ -141,12 +146,21 @@ function useFileContent(file) {
             if (objectUrl)
                 URL.revokeObjectURL(objectUrl);
         };
-    }, [source, name, mediaType]);
+    }, [source, name, mediaType, attempt, enabled]);
     return loaded;
 }
 const ownsArrowKeys = 'input, textarea, select, iframe, [contenteditable="true"], [role="region"], [role="slider"]';
 /** A full-screen dialog that opens a local or linked file, or steps through several. */
-export function FileViewer({ file, files, index = 0, onIndexChange, open, onOpenChange, renderers, finalFocus, }) {
+export function FileViewer({ file, files, index = 0, onIndexChange, open, onOpenChange, renderers, finalFocus, actions, menu, panel, panelLabel = "Details", panelOpen, defaultPanelOpen, onPanelOpenChange, }) {
+    const panelId = useId();
+    const [ownPanelOpen, setOwnPanelOpen] = useState(() => defaultPanelOpen ??
+        (typeof window !== "undefined" &&
+            !!window.matchMedia?.("(min-width: 1024px)").matches));
+    const panelShown = !!panel && (panelOpen ?? ownPanelOpen);
+    const togglePanel = () => {
+        setOwnPanelOpen(!panelShown);
+        onPanelOpenChange?.(!panelShown);
+    };
     const current = files ? (files[index] ?? null) : file;
     const count = files?.length ?? 0;
     const refocus = useRef(null);
@@ -192,7 +206,14 @@ export function FileViewer({ file, files, index = 0, onIndexChange, open, onOpen
         event.preventDefault();
         move();
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { size: "fullscreen", showCloseButton: false, "data-file-viewer": "", className: "sprout-file-viewer", finalFocus: finalFocus, onKeyDown: handleKeyDown, children: current && open && (_jsx(SelectedFile, { file: current, renderers: renderers, step: step }, step ? index : undefined)) }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "fullscreen", showCloseButton: false, "data-file-viewer": "", "data-panel": panelShown ? "open" : undefined, className: "sprout-file-viewer", finalFocus: finalFocus, onKeyDown: handleKeyDown, children: [current && open && (_jsx(SelectedFile, { file: current, renderers: renderers, step: step, actions: actions, menu: menu, panel: panel
+                        ? {
+                            id: panelId,
+                            label: panelLabel,
+                            open: panelShown,
+                            toggle: togglePanel,
+                        }
+                        : undefined }, step ? index : undefined)), current && open && panel && (_jsx("aside", { id: panelId, "aria-label": panelLabel, hidden: !panelShown, "data-slot": "file-viewer-panel", className: "sprout-file-viewer-panel", children: panel }))] }) }));
 }
 function sourceLabel(file, google) {
     return google
@@ -201,9 +222,12 @@ function sourceLabel(file, google) {
             ? "Local file · Not uploaded"
             : "Linked file";
 }
-function SelectedFile({ file, renderers, step, }) {
+function SelectedFile({ file, renderers, step, actions, menu, panel, }) {
+    const [attempt, setAttempt] = useState(0);
+    const retry = () => setAttempt((value) => value + 1);
     const google = file.source.kind === "remote" ? googleDocument(file.source.url) : null;
-    return (_jsxs(_Fragment, { children: [_jsxs("header", { "data-slot": "file-viewer-header", className: "sprout-file-viewer-header", children: [_jsxs("div", { className: "sprout-file-viewer-heading", children: [_jsx(DialogTitle, { children: _jsx("span", { className: "sprout-file-viewer-truncate", title: file.name, children: file.name }) }), _jsx(DialogDescription, { children: _jsx("span", { className: "sprout-file-viewer-truncate", children: sourceLabel(file, !!google) }) })] }), step && (_jsxs("div", { "data-slot": "file-viewer-steps", className: "sprout-file-viewer-steps", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Previous file", "data-step": "previous", disabled: !step.previous, onClick: step.previous, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) }), _jsxs("span", { className: "sprout-file-viewer-position", "aria-hidden": "true", children: [step.position, " of ", step.count] }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next file", "data-step": "next", disabled: !step.next, onClick: step.next, children: _jsx(ChevronRight, { size: 16, "aria-hidden": "true" }) }), _jsxs("span", { "aria-live": "polite", className: "sprout-file-viewer-sr-only", children: [file.name, ", file ", step.position, " of ", step.count] })] })), google && (_jsxs(Button, { variant: "outline", size: "sm", nativeButton: false, render: _jsx("a", { href: google.url, target: "_blank", rel: "noopener noreferrer" }), children: [_jsx(ArrowUpRight, { size: 16, "aria-hidden": "true" }), "Open in Google"] })), _jsx(DialogClose, { render: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Close file viewer" }), children: _jsx(X, { size: 20, "aria-hidden": "true" }) })] }), _jsx(ViewableFileContent, { file: file, renderers: renderers })] }));
+    const loaded = useFileContent(file, attempt, !google);
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { "data-slot": "file-viewer-header", className: "sprout-file-viewer-header", children: [_jsxs("div", { className: "sprout-file-viewer-heading", children: [_jsx(DialogTitle, { children: _jsx("span", { className: "sprout-file-viewer-truncate", title: file.name, children: file.name }) }), _jsx(DialogDescription, { children: _jsx("span", { className: "sprout-file-viewer-truncate", children: sourceLabel(file, !!google) }) })] }), _jsxs("div", { "data-slot": "file-viewer-controls", className: "sprout-file-viewer-controls", children: [step && (_jsxs("div", { "data-slot": "file-viewer-steps", className: "sprout-file-viewer-steps", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Previous file", "data-step": "previous", disabled: !step.previous, onClick: step.previous, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) }), _jsxs("span", { className: "sprout-file-viewer-position", "aria-hidden": "true", children: [step.position, " of ", step.count] }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next file", "data-step": "next", disabled: !step.next, onClick: step.next, children: _jsx(ChevronRight, { size: 16, "aria-hidden": "true" }) }), _jsxs("span", { "aria-live": "polite", className: "sprout-file-viewer-sr-only", children: [file.name, ", file ", step.position, " of ", step.count] })] })), actions && (_jsx("div", { "data-slot": "file-viewer-actions", className: "sprout-file-viewer-actions", children: actions })), google ? (_jsxs(Button, { variant: "outline", size: "sm", nativeButton: false, render: _jsx("a", { href: google.url, target: "_blank", rel: "noopener noreferrer" }), children: [_jsx(ArrowUpRight, { size: 16, "aria-hidden": "true" }), "Open in Google"] })) : loaded.kind === "ready" ? (_jsxs(Button, { variant: "outline", size: "sm", "aria-label": "Download", nativeButton: false, render: _jsx("a", { href: loaded.url, download: file.name }), children: [_jsx(Download, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sprout-file-viewer-label", children: "Download" })] })) : (_jsxs(Button, { variant: "outline", size: "sm", "aria-label": "Download", disabled: true, children: [_jsx(Download, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sprout-file-viewer-label", children: "Download" })] })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "More actions" }), children: _jsx(MoreH, { size: 16, "aria-hidden": "true" }) }), _jsxs(DropdownMenuContent, { align: "end", size: "menu", children: [_jsx(DropdownMenuItem, { onClick: retry, children: google ? "Reload viewer" : "Reload file" }), menu && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), menu] }))] })] })] }), _jsxs("div", { "data-slot": "file-viewer-window", className: "sprout-file-viewer-window", children: [panel && (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": panel.label, "aria-expanded": panel.open, "aria-controls": panel.id, onClick: panel.toggle, children: _jsx(SidebarRight, { size: 16, "aria-hidden": "true" }) })), _jsx(DialogClose, { render: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Close file viewer" }), children: _jsx(X, { size: 18, "aria-hidden": "true" }) })] })] }), _jsx("div", { "data-slot": "viewable-file-content", className: "sprout-file-viewer-surface", children: google ? (_jsx(EmbeddedFile, { url: google.embedUrl, name: file.name, google: true, onRetry: retry }, `${google.embedUrl}:${attempt}`)) : (_jsx(FileBody, { loaded: loaded, file: file, renderers: renderers, onRetry: retry })) })] }));
 }
 /** Loads a local or linked file and shows it inline, with reload and download. */
 export function ViewableFileContent({ file, renderers, className, ...props }) {
@@ -214,11 +238,14 @@ export function ViewableFileContent({ file, renderers, className, ...props }) {
 }
 function LocalFile({ file, renderers, onRetry, }) {
     const loaded = useFileContent(file);
+    return (_jsxs(_Fragment, { children: [loaded.kind === "ready" && (_jsxs("div", { "data-slot": "file-viewer-toolbar", className: "sprout-file-viewer-toolbar", "data-align": "end", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: onRetry, children: "Reload file" }), _jsxs(Button, { variant: "outline", size: "sm", nativeButton: false, render: _jsx("a", { href: loaded.url, download: file.name }), children: [_jsx(Download, { size: 16, "aria-hidden": "true" }), "Download"] })] })), _jsx(FileBody, { loaded: loaded, file: file, renderers: renderers, onRetry: onRetry })] }));
+}
+function FileBody({ loaded, file, renderers, onRetry, }) {
     if (loaded.kind === "loading")
         return _jsx(LoadingFile, {});
     if (loaded.kind === "error")
         return _jsx(FileError, { message: loaded.message, onRetry: onRetry });
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-slot": "file-viewer-toolbar", className: "sprout-file-viewer-toolbar", "data-align": "end", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: onRetry, children: "Reload file" }), _jsxs(Button, { variant: "outline", size: "sm", nativeButton: false, render: _jsx("a", { href: loaded.url, download: file.name }), children: [_jsx(Download, { size: 16, "aria-hidden": "true" }), "Download"] })] }), _jsx(FileContent, { name: file.name, mediaType: file.mediaType, bytes: loaded.bytes, url: loaded.url, onRetry: onRetry, renderers: renderers })] }));
+    return (_jsx(FileContent, { name: file.name, mediaType: file.mediaType, bytes: loaded.bytes, url: loaded.url, onRetry: onRetry, renderers: renderers }));
 }
 const textKinds = [
     "text",

package/dist/components/presence-cursor.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface PresenceCursorProps extends Omit<ComponentProps<"div">, "children" | "color"> {
+    /** The person's name or email. Shown in the tag, or read out with an avatar. */
+    name: string;
+    /** Left offset of the arrow tip in px, from the positioned parent. */
+    x: number;
+    /** Top offset of the arrow tip in px, from the positioned parent. */
+    y: number;
+    /** Any CSS color. White text sits on it, so keep 4.5:1 contrast. */
+    color: string;
+    /** Shows this, such as an `Avatar`, next to the arrow instead of the name tag. */
+    avatar?: ReactNode;
+}
+/**
+ * Another person's pointer on a shared surface, with a name tag or an avatar.
+ * Put it in a parent with `position: relative`. It ignores pointer events and
+ * glides between positions unless reduced motion is requested.
+ */
+export declare function PresenceCursor({ name, x, y, color, avatar, className, style, ...props }: PresenceCursorProps): import("react").JSX.Element;

package/dist/components/presence-cursor.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/classes.js";
+/**
+ * Another person's pointer on a shared surface, with a name tag or an avatar.
+ * Put it in a parent with `position: relative`. It ignores pointer events and
+ * glides between positions unless reduced motion is requested.
+ */
+export function PresenceCursor({ name, x, y, color, avatar, className, style, ...props }) {
+    return (_jsxs("div", { "data-slot": "presence-cursor", role: "img", "aria-label": name, className: cn("sprout-presence-cursor", className), style: {
+            "--sprout-presence-color": color,
+            transform: `translate(${x}px, ${y}px)`,
+            ...style,
+        }, ...props, children: [_jsx("svg", { className: "sprout-presence-cursor-arrow", viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "M1.5 1.5 14.5 6.6 8.4 8.4 6.6 14.5Z" }) }), avatar != null ? (_jsx("span", { "data-slot": "presence-cursor-avatar", className: "sprout-presence-cursor-avatar", "aria-hidden": "true", children: avatar })) : (_jsx("span", { "data-slot": "presence-cursor-label", className: "sprout-presence-cursor-label", "aria-hidden": "true", children: name }))] }));
+}

package/dist/components/questionnaire.js

@@ -6,6 +6,7 @@ import { createContext, useCallback, useContext, useId, useLayoutEffect, useMemo
 import { Check } from "reicon-react/icons/Check";
 import { cn } from "../internal/classes.js";
 import { buttonVariants, } from "./button.js";
+import { Kbd } from "./kbd.js";
 export const questionnaireItemStatusNames = [
     "unanswered",
     "answered",
@@ -800,7 +801,7 @@ export function QuestionnaireChoice({ checked, children, className, defaultCheck
         props: mergeProps({
             "data-slot": "questionnaire-choice",
             className: cn("sprout-questionnaire-choice", className),
-            children: (_jsxs(_Fragment, { children: [_jsx("input", { "data-slot": "questionnaire-choice-input", className: "sprout-questionnaire-choice-input", ref: setInput, id: id, type: type, name: status === "skipped" ? undefined : name, value: value, checked: isChecked, disabled: disabled, required: required && !multiple && !hasInputAnswer, "aria-invalid": invalid || undefined, "aria-keyshortcuts": keyShortcuts(shortcut, !disabled && isChecked), "data-checked": isChecked ? "" : undefined, "data-unchecked": isChecked ? undefined : "", onChange: handleChange }), _jsxs("span", { "aria-hidden": "true", "data-slot": "questionnaire-choice-indicator", className: "sprout-questionnaire-choice-indicator", children: [_jsx("span", { className: "sprout-questionnaire-choice-dot" }), _jsx(Check, { className: "sprout-questionnaire-choice-check" })] }), _jsx("span", { "data-slot": "questionnaire-choice-label", className: "sprout-questionnaire-choice-label", children: children }), shortcut !== null && (_jsx("span", { "aria-hidden": "true", "data-slot": "questionnaire-choice-shortcut", className: "sprout-questionnaire-choice-shortcut", children: shortcut }))] })),
+            children: (_jsxs(_Fragment, { children: [_jsx("input", { "data-slot": "questionnaire-choice-input", className: "sprout-questionnaire-choice-input", ref: setInput, id: id, type: type, name: status === "skipped" ? undefined : name, value: value, checked: isChecked, disabled: disabled, required: required && !multiple && !hasInputAnswer, "aria-invalid": invalid || undefined, "aria-keyshortcuts": keyShortcuts(shortcut, !disabled && isChecked), "data-checked": isChecked ? "" : undefined, "data-unchecked": isChecked ? undefined : "", onChange: handleChange }), _jsxs("span", { "aria-hidden": "true", "data-slot": "questionnaire-choice-indicator", className: "sprout-questionnaire-choice-indicator", children: [_jsx("span", { className: "sprout-questionnaire-choice-dot" }), _jsx(Check, { className: "sprout-questionnaire-choice-check" })] }), _jsx("span", { "data-slot": "questionnaire-choice-label", className: "sprout-questionnaire-choice-label", children: children }), shortcut !== null && (_jsx(Kbd, { variant: "outline", "aria-hidden": "true", "data-slot": "questionnaire-choice-shortcut", className: "sprout-questionnaire-choice-shortcut", children: shortcut }))] })),
         }, props),
         state,
         stateAttributesMapping: {

package/dist/components/schema-diagram.js

@@ -1,14 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Background, BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Handle, Panel, Position, ReactFlow, ReactFlowProvider, useNodesInitialized, useReactFlow, useStore, } from "@xyflow/react";
-import { useEffect, useId, useMemo, useSyncExternalStore, } from "react";
-import { Add } from "reicon-react/icons/Add";
+import { Background, BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Handle, Position, ReactFlow, ReactFlowProvider, } from "@xyflow/react";
+import { useId, useMemo } from "react";
 import { Key } from "reicon-react/icons/Key";
-import { Minus } from "reicon-react/icons/Minus";
-import { Scan } from "reicon-react/icons/Scan";
 import { cn } from "../internal/classes.js";
+import { FitOnResize, flowMaxZoom as maxZoom, flowMinZoom as minZoom, useKeyboardView, useViewportMobile, ZoomControls, } from "../internal/flow.js";
 import { Badge } from "./badge.js";
-import { Button } from "./button.js";
 export const schemaTableStateNames = [
     "new",
     "changed",
@@ -24,10 +21,7 @@ export const schemaDiagramLayoutNames = [
 const tableWidth = 264;
 const columnGap = 80;
 const rowGap = 48;
-const minZoom = 0.2;
-const maxZoom = 1.5;
 const fitOptions = { padding: 0.15, maxZoom: 1 };
-const panStep = 48;
 const tableHeight = (table) => 44 +
     (table.fields.length === 0
         ? 32
@@ -117,80 +111,13 @@ function LinkLine({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targ
 }
 const nodeTypes = { table: TableCard };
 const edgeTypes = { link: LinkLine };
-const mobileQuery = "(max-width: 767px)";
-const motionQuery = "(prefers-reduced-motion: reduce)";
-function subscribeMobile(callback) {
-    const media = window.matchMedia(mobileQuery);
-    media.addEventListener("change", callback);
-    return () => media.removeEventListener("change", callback);
-}
-function useViewportMobile() {
-    return useSyncExternalStore(subscribeMobile, () => window.matchMedia(mobileQuery).matches, () => false);
-}
-const motion = (ms) => typeof window !== "undefined" && window.matchMedia(motionQuery).matches
-    ? 0
-    : ms;
-// The canvas panel animates open, so the first fit sees a narrower pane than the final one.
-function FitOnResize({ nodes }) {
-    const { fitView } = useReactFlow();
-    const width = useStore((state) => state.width);
-    const height = useStore((state) => state.height);
-    const measured = useNodesInitialized();
-    useEffect(() => {
-        if (!measured)
-            return;
-        const frame = requestAnimationFrame(() => void fitView(fitOptions));
-        return () => cancelAnimationFrame(frame);
-    }, [fitView, width, height, measured, nodes]);
-    return null;
-}
-function ZoomControls({ position, }) {
-    const { zoomIn, zoomOut, fitView } = useReactFlow();
-    const zoom = useStore((state) => state.transform[2]);
-    return (_jsxs(Panel, { position: position, className: "sprout-schema-controls", "data-slot": "schema-diagram-controls", role: "toolbar", "aria-label": "Diagram view", "aria-orientation": "vertical", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom in", title: "Zoom in", disabled: zoom >= maxZoom, onClick: () => void zoomIn({ duration: motion(160) }), children: _jsx(Add, { size: 16, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom out", title: "Zoom out", disabled: zoom <= minZoom, onClick: () => void zoomOut({ duration: motion(160) }), children: _jsx(Minus, { size: 16, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Fit to view", title: "Fit to view", onClick: () => void fitView({ ...fitOptions, duration: motion(180) }), children: _jsx(Scan, { size: 16, "aria-hidden": "true" }) })] }));
-}
-function useKeyboardView() {
-    const { getViewport, setViewport, zoomIn, zoomOut, fitView } = useReactFlow();
-    return (event) => {
-        const target = event.target;
-        if (event.altKey || event.ctrlKey || event.metaKey)
-            return;
-        if (target !== event.currentTarget &&
-            !target.classList.contains("react-flow__node"))
-            return;
-        const step = panStep * (event.shiftKey ? 4 : 1);
-        const pan = {
-            ArrowLeft: [step, 0],
-            ArrowRight: [-step, 0],
-            ArrowUp: [0, step],
-            ArrowDown: [0, -step],
-        };
-        const move = pan[event.key];
-        if (move) {
-            const { x, y, zoom } = getViewport();
-            void setViewport({ x: x + move[0], y: y + move[1], zoom }, { duration: motion(120) });
-        }
-        else if (event.key === "+" || event.key === "=") {
-            void zoomIn({ duration: motion(160) });
-        }
-        else if (event.key === "-" || event.key === "_") {
-            void zoomOut({ duration: motion(160) });
-        }
-        else if (event.key === "0") {
-            void fitView({ ...fitOptions, duration: motion(180) });
-        }
-        else
-            return;
-        event.preventDefault();
-    };
-}
 const keyboardHint = "Arrow keys pan, plus and minus zoom, and 0 fits the diagram. Tab moves between tables.";
 function DiagramFlow({ nodes, edges, direction, label, hintId, }) {
-    const onKeyDown = useKeyboardView();
+    const onKeyDown = useKeyboardView(fitOptions);
     return (_jsxs(ReactFlow, { className: "sprout-schema-flow", "data-slot": "schema-diagram-viewport", "aria-label": label, "aria-describedby": hintId, tabIndex: 0, onKeyDown: onKeyDown, nodes: nodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, fitView: true, fitViewOptions: fitOptions, minZoom: minZoom, maxZoom: maxZoom, nodesConnectable: false, elementsSelectable: false, edgesFocusable: false, ariaLabelConfig: {
             "node.a11yDescription.default": keyboardHint,
             "node.a11yDescription.keyboardDisabled": keyboardHint,
-        }, proOptions: { hideAttribution: true }, children: [_jsx(Background, { gap: 16, size: 1 }), _jsx(FitOnResize, { nodes: nodes }), _jsx(ZoomControls, { position: direction === "vertical" ? "top-right" : "bottom-right" })] }));
+        }, proOptions: { hideAttribution: true }, children: [_jsx(Background, { gap: 16, size: 1 }), _jsx(FitOnResize, { nodes: nodes, fit: fitOptions }), _jsx(ZoomControls, { position: direction === "vertical" ? "top-right" : "bottom-right", fit: fitOptions, className: "sprout-schema-controls", slot: "schema-diagram-controls" })] }));
 }
 /**
  * A pan-and-zoom diagram of tables, their fields, and the links between them,