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

@@ -0,0 +1,137 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type FileKind } from "../internal/file-kind.js";
+import { type DialogContentProps } from "./dialog.js";
+export type ViewableFileSource = {
+    kind: "local";
+    file: File;
+} | {
+    kind: "remote";
+    url: string;
+};
+export interface ViewableFile {
+    name: string;
+    mediaType: string;
+    source: ViewableFileSource;
+}
+export type ViewableFileKind = FileKind;
+export interface FileSheetRendererProps {
+    name: string;
+    bytes: ArrayBuffer;
+    onRetry: () => void;
+}
+export interface FileOfficeRendererProps extends FileSheetRendererProps {
+    kind: "document" | "slides";
+}
+export interface FileMarkdownRendererProps {
+    text: string;
+}
+/**
+ * Renderers for formats that need a heavy parser. Without one, sheets and
+ * Office files show a download prompt and Markdown shows its plain text.
+ * Each renderer runs inside Suspense with `LoadingFile` as the fallback,
+ * so a lazy component works as is.
+ */
+export interface FileRenderers {
+    markdown?: ((props: FileMarkdownRendererProps) => ReactNode) | undefined;
+    sheet?: ((props: FileSheetRendererProps) => ReactNode) | undefined;
+    office?: ((props: FileOfficeRendererProps) => ReactNode) | undefined;
+}
+export interface FileRenderersProviderProps {
+    renderers: FileRenderers;
+    children?: ReactNode;
+}
+/** Registers file renderers once for every viewer below it. */
+export declare function FileRenderersProvider({ renderers, children, }: FileRenderersProviderProps): import("react").JSX.Element;
+export declare const maxViewableFileBytes: number;
+export declare function viewableFileKind(name: string, mediaType: string): ViewableFileKind;
+export interface GoogleDocumentLink {
+    url: string;
+    embedUrl: string;
+    mediaType: string;
+}
+/** Recognizes a docs.google.com Docs, Sheets, or Slides link. */
+export declare function googleDocument(url: string): GoogleDocumentLink | null;
+/** Reads the document link from a .gdoc, .gsheet, or .gslides shortcut. */
+export declare function googleShortcut(text: string): string;
+/**
+ * The type to give a same-origin blob URL. Stored media types are
+ * untrusted, so anything a browser could run as a document, including SVG,
+ * becomes `application/octet-stream`.
+ */
+export declare function renderableType(name: string, mediaType: string): string;
+interface FileViewerBaseProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    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;
+    files?: undefined;
+    index?: undefined;
+    onIndexChange?: undefined;
+}
+interface FileSetProps {
+    file?: undefined;
+    /** Files to step through with Previous, Next, and the arrow keys. */
+    files: readonly ViewableFile[];
+    index: number;
+    onIndexChange: (index: number) => void;
+}
+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, actions, menu, panel, panelLabel, panelOpen, defaultPanelOpen, onPanelOpenChange, }: FileViewerProps): import("react").JSX.Element;
+export interface ViewableFileContentProps extends HTMLAttributes<HTMLDivElement> {
+    file: ViewableFile;
+    renderers?: FileRenderers | undefined;
+}
+/** Loads a local or linked file and shows it inline, with reload and download. */
+export declare function ViewableFileContent({ file, renderers, className, ...props }: ViewableFileContentProps): import("react").JSX.Element;
+export interface FileContentProps {
+    name: string;
+    mediaType: string;
+    bytes: ArrayBuffer;
+    /** A blob URL for `bytes`, typed with `renderableType`. */
+    url: string;
+    onRetry: () => void;
+    renderers?: FileRenderers | undefined;
+}
+/** Shows bytes you already loaded: images, PDF, text, JSON, Markdown, Google shortcuts, and more. */
+export declare function FileContent({ name, mediaType, bytes, url, onRetry, renderers: own, }: FileContentProps): import("react").JSX.Element;
+export type LoadingFileProps = HTMLAttributes<HTMLDivElement>;
+export declare function LoadingFile({ className, ...props }: LoadingFileProps): import("react").JSX.Element;
+export interface FileErrorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    message: ReactNode;
+    onRetry: () => void;
+}
+export declare function FileError({ message, onRetry, className, ...props }: FileErrorProps): import("react").JSX.Element;
+/** Whether `FilePreview` can show this file: images, text, code, JSON, and Markdown, but not Google shortcuts. */
+export declare function isPreviewableFile(file: ViewableFile): boolean;
+export interface FilePreviewProps extends HTMLAttributes<HTMLDivElement> {
+    file: ViewableFile;
+}
+/**
+ * A small, non-interactive peek at a file: the image, or the first lines
+ * of text and code with syntax colors. Made for hover cards and thumbnails.
+ * Renders nothing for files `isPreviewableFile` rejects.
+ */
+export declare function FilePreview({ file, className, ...props }: FilePreviewProps): import("react").JSX.Element | null;
+export {};