@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/file-viewer.js

@@ -0,0 +1,400 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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({});
+/** Registers file renderers once for every viewer below it. */
+export function FileRenderersProvider({ renderers, children, }) {
+    const parent = useContext(RenderersContext);
+    const value = useMemo(() => ({ ...parent, ...renderers }), [parent, renderers]);
+    return _jsx(RenderersContext, { value: value, children: children });
+}
+function useRenderers(own) {
+    const shared = useContext(RenderersContext);
+    return own ? { ...shared, ...own } : shared;
+}
+export const maxViewableFileBytes = 50 * 1024 * 1024;
+export function viewableFileKind(name, mediaType) {
+    return fileKind(name, mediaType);
+}
+/** Recognizes a docs.google.com Docs, Sheets, or Slides link. */
+export function googleDocument(url) {
+    let parsed;
+    try {
+        parsed = new URL(url);
+    }
+    catch {
+        return null;
+    }
+    if (parsed.protocol !== "https:" ||
+        parsed.hostname !== "docs.google.com" ||
+        parsed.username ||
+        parsed.password ||
+        parsed.port)
+        return null;
+    const match = /^\/(document|spreadsheets|presentation)\/d\/([a-zA-Z0-9_-]+)(?:\/|$)/.exec(parsed.pathname);
+    if (!match)
+        return null;
+    const [, family, id] = match;
+    const canonical = `https://docs.google.com/${family}/d/${id}`;
+    const endpoint = family === "presentation" ? "embed" : "preview";
+    return {
+        url: `${canonical}/edit`,
+        embedUrl: `${canonical}/${endpoint}${family === "spreadsheets" ? "?widget=true&headers=false" : ""}`,
+        mediaType: `application/vnd.google-apps.${family === "spreadsheets" ? "spreadsheet" : family}`,
+    };
+}
+/** Reads the document link from a .gdoc, .gsheet, or .gslides shortcut. */
+export function googleShortcut(text) {
+    const value = JSON.parse(text);
+    if (typeof value !== "object" ||
+        value === null ||
+        !("url" in value) ||
+        typeof value.url !== "string")
+        throw new Error("This Google shortcut does not contain a document link.");
+    const document = googleDocument(value.url);
+    if (!document)
+        throw new Error("This shortcut does not contain a supported Google Docs, Sheets, or Slides link.");
+    return document.url;
+}
+const rasterTypes = new Set([
+    "image/png",
+    "image/jpeg",
+    "image/gif",
+    "image/webp",
+    "image/avif",
+    "image/bmp",
+    "image/x-icon",
+    "image/vnd.microsoft.icon",
+    "image/heic",
+    "image/heif",
+    "image/tiff",
+]);
+/**
+ * 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 function renderableType(name, mediaType) {
+    const kind = fileKind(name, mediaType);
+    if (kind === "pdf")
+        return "application/pdf";
+    const type = mediaType.trim().toLowerCase();
+    return kind === "image" && rasterTypes.has(type)
+        ? type
+        : "application/octet-stream";
+}
+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();
+        const timeout = setTimeout(() => controller.abort(), 15000);
+        setLoaded({ kind: "loading" });
+        const load = async () => {
+            let blob;
+            if (source.kind === "local")
+                blob = source.file;
+            else {
+                const response = await fetch(source.url, { signal: controller.signal });
+                if (!response.ok)
+                    throw new Error("The file could not be loaded. Check the link and try again.");
+                blob = await response.blob();
+            }
+            if (blob.size > maxViewableFileBytes)
+                throw new Error("This file is larger than the 50 MB local viewing limit.");
+            const bytes = await blob.arrayBuffer();
+            if (cancelled)
+                return;
+            objectUrl = URL.createObjectURL(new Blob([bytes], {
+                type: renderableType(name, blob.type || mediaType),
+            }));
+            setLoaded({ kind: "ready", bytes, url: objectUrl });
+        };
+        void load()
+            .catch((error) => {
+            if (!cancelled)
+                setLoaded({
+                    kind: "error",
+                    message: error instanceof Error && error.name !== "AbortError"
+                        ? error.message
+                        : "The file took too long to load. Try again.",
+                });
+        })
+            .finally(() => clearTimeout(timeout));
+        return () => {
+            cancelled = true;
+            clearTimeout(timeout);
+            controller.abort();
+            if (objectUrl)
+                URL.revokeObjectURL(objectUrl);
+        };
+    }, [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, 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);
+    const goTo = (target) => () => {
+        const button = document.activeElement?.closest("[data-step]");
+        const popup = button?.closest("[data-file-viewer]");
+        refocus.current =
+            button && popup ? { popup, direction: button.dataset.step ?? "" } : null;
+        onIndexChange?.(target);
+    };
+    const step = files && count > 1
+        ? {
+            position: index + 1,
+            count,
+            previous: index > 0 ? goTo(index - 1) : undefined,
+            next: index < count - 1 ? goTo(index + 1) : undefined,
+        }
+        : undefined;
+    // Each step remounts the file to reset its state, which destroys the focused step button.
+    useEffect(() => {
+        const pending = refocus.current;
+        refocus.current = null;
+        if (!pending)
+            return;
+        const enabled = ":not(:disabled):not([aria-disabled='true'])";
+        const target = pending.popup.querySelector(`[data-step="${pending.direction}"]${enabled}`) ?? pending.popup.querySelector(`[data-step]${enabled}`);
+        target?.focus();
+    }, [index]);
+    const handleKeyDown = (event) => {
+        if (!step ||
+            event.defaultPrevented ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey)
+            return;
+        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+            return;
+        if (event.target.closest(ownsArrowKeys))
+            return;
+        const move = event.key === "ArrowLeft" ? step.previous : step.next;
+        if (!move)
+            return;
+        event.preventDefault();
+        move();
+    };
+    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
+        ? "Google document"
+        : file.source.kind === "local"
+            ? "Local file · Not uploaded"
+            : "Linked file";
+}
+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;
+    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 }) {
+    const [attempt, setAttempt] = useState(0);
+    const retry = () => setAttempt((value) => value + 1);
+    const google = file.source.kind === "remote" ? googleDocument(file.source.url) : null;
+    return (_jsx("div", { "data-slot": "viewable-file-content", ...props, className: cn("sprout-file-viewer-surface", className), children: google ? (_jsx(EmbeddedFile, { url: google.embedUrl, name: file.name, google: true, onRetry: retry }, `${google.embedUrl}:${attempt}`)) : (_jsx(LocalFile, { file: file, renderers: renderers, onRetry: retry }, attempt)) }));
+}
+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 (_jsx(FileContent, { name: file.name, mediaType: file.mediaType, bytes: loaded.bytes, url: loaded.url, onRetry: onRetry, renderers: renderers }));
+}
+const textKinds = [
+    "text",
+    "code",
+    "json",
+    "markdown",
+    "google",
+];
+/** Shows bytes you already loaded: images, PDF, text, JSON, Markdown, Google shortcuts, and more. */
+export function FileContent({ name, mediaType, bytes, url, onRetry, renderers: own, }) {
+    const renderers = useRenderers(own);
+    const kind = fileKind(name, mediaType);
+    const text = useMemo(() => {
+        if (!textKinds.includes(kind))
+            return null;
+        try {
+            return new TextDecoder("utf-8", { fatal: true }).decode(bytes);
+        }
+        catch {
+            return undefined;
+        }
+    }, [bytes, kind]);
+    if (text === undefined)
+        return (_jsx(FileError, { message: "This file is not valid UTF-8 text. Download it to open in another application.", onRetry: onRetry }));
+    const unavailable = (_jsx(StatePanel, { kind: "unavailable", title: "This format cannot be displayed locally", description: name.toLowerCase().endsWith(".ppt")
+            ? "Save this older PowerPoint file as .pptx to view the slides here. You can still download the original."
+            : "Download the original file to open it in a compatible application." }));
+    let body;
+    if (bytes.byteLength === 0)
+        body = (_jsx(StatePanel, { kind: "empty", title: "This file is empty", description: "The file contains no data to display." }));
+    else if (kind === "image")
+        body = _jsx(ImageFile, { url: url, name: name, onRetry: onRetry });
+    else if (kind === "pdf")
+        body = _jsx(EmbeddedFile, { url: url, name: name, onRetry: onRetry });
+    else if (kind === "google")
+        body = _jsx(GoogleShortcut, { text: text ?? "", name: name, onRetry: onRetry });
+    else if (kind === "sheet")
+        body = renderers.sheet ? (_jsx(Suspense, { fallback: _jsx(LoadingFile, {}), children: renderers.sheet({ name, bytes, onRetry }) })) : (unavailable);
+    else if (kind === "document" || kind === "slides")
+        body = renderers.office ? (_jsx(Suspense, { fallback: _jsx(LoadingFile, {}), children: renderers.office({ name, bytes, kind, onRetry }) })) : (unavailable);
+    else if (text !== null)
+        body = (_jsx(TextFile, { text: text, name: name, kind: kind, renderMarkdown: renderers.markdown }));
+    else
+        body = unavailable;
+    return (_jsx("div", { "data-slot": "file-content", "data-kind": kind, className: "sprout-file-content", children: body }));
+}
+export function LoadingFile({ className, ...props }) {
+    return (_jsx(StatePanel, { kind: "loading", title: "Opening file", description: "Preparing the document viewer.", "data-file-state": "loading", ...props, className: className }));
+}
+export function FileError({ message, onRetry, className, ...props }) {
+    return (_jsx(StatePanel, { kind: "error", title: "Could not open this file", description: message, "data-file-state": "error", ...props, className: className, children: _jsx(Button, { variant: "outline", onClick: onRetry, children: "Try again" }) }));
+}
+function codeLanguageFor(name, kind) {
+    return kind === "code" ? (languageForFilename(name) ?? "text") : kind;
+}
+const previewTextKinds = [
+    "text",
+    "code",
+    "json",
+    "markdown",
+];
+const previewBytes = 16 * 1024;
+const previewLines = 24;
+/** Whether `FilePreview` can show this file: images, text, code, JSON, and Markdown, but not Google shortcuts. */
+export function isPreviewableFile(file) {
+    if (file.source.kind === "remote" && googleDocument(file.source.url))
+        return false;
+    const kind = fileKind(file.name, file.mediaType);
+    return kind === "image" || previewTextKinds.includes(kind);
+}
+/**
+ * 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 function FilePreview({ file, className, ...props }) {
+    if (!isPreviewableFile(file))
+        return null;
+    const kind = fileKind(file.name, file.mediaType);
+    return (_jsx("div", { "data-slot": "file-preview", "data-kind": kind, ...props, className: cn("sprout-file-preview", className), children: kind === "image" && file.source.kind === "remote" ? (_jsx("img", { src: file.source.url, alt: file.name, className: "sprout-file-preview-image" })) : (_jsx(LoadedPreview, { file: file, kind: kind })) }));
+}
+function LoadedPreview({ file, kind, }) {
+    const loaded = useFileContent(file);
+    const text = useMemo(() => {
+        if (loaded.kind !== "ready" || kind === "image")
+            return null;
+        const head = new TextDecoder().decode(loaded.bytes.slice(0, previewBytes));
+        return head.split("\n").slice(0, previewLines).join("\n");
+    }, [loaded, kind]);
+    if (loaded.kind === "loading")
+        return (_jsxs("span", { className: "sprout-file-preview-state", children: [_jsx(Spinner, { size: "sm", "aria-hidden": "true" }), "Loading preview\u2026"] }));
+    if (loaded.kind === "error")
+        return (_jsx("span", { className: "sprout-file-preview-state", children: "Preview unavailable" }));
+    if (text === null)
+        return (_jsx("img", { src: loaded.url, alt: file.name, className: "sprout-file-preview-image" }));
+    if (!text.trim())
+        return (_jsx("span", { className: "sprout-file-preview-state", children: "This file is empty" }));
+    return (_jsx(CodeBlock, { code: text, language: codeLanguageFor(file.name, kind), variant: "preview", lineNumbers: false, wrap: kind === "text" || kind === "markdown" }));
+}
+function TextFile({ text, name, kind, renderMarkdown, }) {
+    const [source, setSource] = useState(false);
+    const json = useMemo(() => {
+        if (kind !== "json")
+            return null;
+        try {
+            return JSON.stringify(JSON.parse(text), null, 2);
+        }
+        catch {
+            return undefined;
+        }
+    }, [kind, text]);
+    const markdown = kind === "markdown" && renderMarkdown;
+    const prose = kind === "text" || kind === "markdown";
+    return (_jsxs("div", { className: "sprout-file-text", "data-format": markdown && !source ? "formatted" : "source", children: [markdown && (_jsx("div", { className: "sprout-file-text-bar", children: _jsx(Button, { variant: "outline", size: "sm", "aria-pressed": source, onClick: () => setSource((value) => !value), children: source ? "Show formatted" : "Show source" }) })), json === undefined && (_jsx("p", { role: "alert", className: "sprout-file-text-alert", children: "This file contains invalid JSON. The original text is shown below." })), markdown && !source ? (_jsx("div", { className: "sprout-file-text-scroll", tabIndex: 0, role: "region", "aria-label": name, children: _jsx("div", { className: "sprout-file-text-page", children: _jsx(Suspense, { fallback: _jsx(LoadingFile, {}), children: renderMarkdown({ text }) }) }) })) : (_jsx(CodeBlock, { code: json ?? text, language: codeLanguageFor(name, kind), variant: "file", wrap: prose }))] }));
+}
+function ImageFile({ url, name, onRetry, }) {
+    const [state, setState] = useState("loading");
+    const [zoom, setZoom] = useState(false);
+    if (state === "error")
+        return (_jsx(FileError, { message: "Your browser could not decode this image. Try a PNG, JPEG, GIF, WebP, AVIF, or BMP version.", onRetry: onRetry }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sprout-file-viewer-toolbar", "data-align": "center", children: _jsx(Button, { variant: "outline", size: "sm", "aria-pressed": zoom, onClick: () => setZoom((value) => !value), children: zoom ? "Fit image" : "Actual size" }) }), state === "loading" && _jsx(LoadingFile, {}), _jsx("div", { className: "sprout-file-image-stage", "data-zoom": zoom ? "actual" : "fit", tabIndex: zoom ? 0 : undefined, role: zoom ? "region" : undefined, "aria-label": zoom ? `${name} at actual size` : undefined, children: _jsx("img", { src: url, alt: name, onLoad: () => setState("ready"), onError: () => setState("error"), className: "sprout-file-image", "data-state": state }) })] }));
+}
+function GoogleShortcut({ text, name, onRetry, }) {
+    let document;
+    try {
+        document = googleDocument(googleShortcut(text));
+    }
+    catch (error) {
+        return (_jsx(FileError, { message: error instanceof Error
+                ? error.message
+                : "Invalid Google document shortcut.", onRetry: onRetry }));
+    }
+    if (!document)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sprout-file-google-link", children: _jsx("a", { href: document.url, target: "_blank", rel: "noopener noreferrer", children: "Open in Google" }) }), _jsx(EmbeddedFile, { url: document.embedUrl, name: name, google: true, onRetry: onRetry })] }));
+}
+function EmbeddedFile({ url, name, google = false, onRetry, }) {
+    const [state, setState] = useState("loading");
+    const timer = useRef(null);
+    useEffect(() => {
+        timer.current = setTimeout(() => setState((value) => (value === "loading" ? "slow" : value)), 12000);
+        return () => {
+            if (timer.current)
+                clearTimeout(timer.current);
+        };
+    }, []);
+    return (_jsxs("div", { "data-slot": "file-embed", "data-state": state, className: "sprout-file-embed", children: [google && (_jsx("p", { className: "sprout-file-embed-notice", children: "Google controls access to this document. If it cannot open here, use Open in Google to sign in or request access." })), state === "loading" && (_jsx("div", { className: "sprout-file-embed-loading", children: _jsx(LoadingFile, {}) })), state === "slow" && (_jsxs("div", { className: "sprout-file-embed-slow", children: [_jsx("p", { role: "status", children: "The embedded viewer is taking longer than expected." }), _jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: "Reload viewer" })] })), _jsx("iframe", { title: name, src: url, className: "sprout-file-embed-frame", referrerPolicy: "no-referrer", onLoad: () => {
+                    if (timer.current)
+                        clearTimeout(timer.current);
+                    setState("loaded");
+                }, onError: () => setState("slow"), allowFullScreen: true })] }));
+}

package/dist/components/form.d.ts

@@ -0,0 +1,87 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type ButtonBlockerFix as ActionBlockerFix, type ButtonState as ActionControlState } from "./button.js";
+export declare const formFooterLayoutNames: readonly ["bar", "stack", "compact"];
+export declare const formSectionLevelNames: readonly [2, 3];
+export type FormFooterLayout = (typeof formFooterLayoutNames)[number];
+export type FormSectionLevel = (typeof formSectionLevelNames)[number];
+export type FormBlockerFix = ActionBlockerFix;
+/** `blocked` keeps the submit focusable and shows the reason, with an optional fix, under the buttons. */
+export type FormActionState = ActionControlState;
+export interface FormProps {
+    id?: string | undefined;
+    /** Locks every Field, ChoiceGroup, and CheckboxField inside. */
+    disabled?: boolean | undefined;
+    /** Return `"invalid"` after revealing errors; Form then focuses the first invalid control. */
+    onSubmit: () => "invalid" | void;
+    /** The form's accessible name. */
+    label?: string | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}
+/**
+ * A `noValidate` form that prevents the native submit, locks the fields inside
+ * while `disabled`, and moves focus to the first invalid control after a
+ * failed submit.
+ */
+export declare function Form({ id, disabled, onSubmit, label, className, children, }: FormProps): import("react").JSX.Element;
+export interface FormSectionProps {
+    title: string;
+    description?: string | undefined;
+    /** A short count or status badge beside the title, such as `3 / 20`. */
+    meta?: string | undefined;
+    /** Region name override; the title names the region otherwise. */
+    label?: string | undefined;
+    id?: string | undefined;
+    level?: FormSectionLevel | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}
+/** A bordered, named region of a form with a title, description, and optional meta badge. */
+export declare function FormSection({ title, description, meta, label, id, level, className, children, }: FormSectionProps): import("react").JSX.Element;
+export type FormCancel = 
+/** Shown only while the form is dirty and not busy. */
+{
+    kind: "reset";
+    label: string;
+    onReset: () => void;
+}
+/** A link element, such as a router `<Link>`, rendered through Button `render`. */
+ | {
+    kind: "leave";
+    label: string;
+    link: ReactElement;
+};
+export interface FormFooterSubmit {
+    label: string;
+    pendingLabel: string;
+    state: FormActionState;
+}
+export interface FormFooterSecondarySubmit {
+    label: string;
+    disabled: boolean;
+    onSelect: () => void;
+}
+export interface FormFooterProps {
+    /** The id of the form to submit, for a footer rendered outside it. */
+    form?: string | undefined;
+    /** Replaces the unsaved-changes and note status on the left of `bar` and `compact`. */
+    summary?: ReactNode;
+    submit: FormFooterSubmit;
+    /** An outline submit beside the main one, such as Save draft. */
+    secondarySubmit?: FormFooterSecondarySubmit | undefined;
+    dirty: boolean;
+    cancel?: FormCancel | undefined;
+    note?: string | undefined;
+    error?: string | undefined;
+    /** `bar` sits under a divider, `stack` gives full-width large buttons, `compact` fits cards and chat. */
+    layout?: FormFooterLayout | undefined;
+    className?: string | undefined;
+    /** Extra actions beside the buttons in `compact`; feedback below the footer otherwise. */
+    children?: ReactNode;
+}
+/**
+ * The save area of a form: the submit with busy and blocked states, an
+ * optional secondary submit and cancel, an unsaved-changes line, a note, and
+ * an error alert.
+ */
+export declare function FormFooter({ form, summary, submit, secondarySubmit, dirty, cancel, note, error, layout, className, children, }: FormFooterProps): import("react").JSX.Element;

package/dist/components/form.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { cn } from "../internal/classes.js";
+import { Alert } from "./alert.js";
+import { Badge } from "./badge.js";
+import { Button, jumpTo, useActionControl, } from "./button.js";
+import { FieldsDisabled } from "./field.js";
+export const formFooterLayoutNames = ["bar", "stack", "compact"];
+export const formSectionLevelNames = [2, 3];
+/**
+ * A `noValidate` form that prevents the native submit, locks the fields inside
+ * while `disabled`, and moves focus to the first invalid control after a
+ * failed submit.
+ */
+export function Form({ id, disabled = false, onSubmit, label, className, children, }) {
+    const formRef = useRef(null);
+    const [failedSubmits, setFailedSubmits] = useState(0);
+    useEffect(() => {
+        const invalid = failedSubmits > 0
+            ? formRef.current?.querySelector('[aria-invalid="true"]')
+            : null;
+        if (invalid)
+            jumpTo(invalid);
+    }, [failedSubmits]);
+    return (_jsx(FieldsDisabled, { value: disabled, children: _jsx("form", { id: id, ref: formRef, "data-slot": "form", noValidate: true, "aria-label": label, className: cn("sprout-form", className), onSubmit: (event) => {
+                event.preventDefault();
+                if (onSubmit() === "invalid")
+                    setFailedSubmits((count) => count + 1);
+            }, children: children }) }));
+}
+/** A bordered, named region of a form with a title, description, and optional meta badge. */
+export function FormSection({ title, description, meta, label, id, level = 2, className, children, }) {
+    const Heading = level === 3 ? "h3" : "h2";
+    return (_jsxs("section", { id: id, "data-slot": "form-section", "aria-label": label ?? title, className: cn("sprout-form-section", className), children: [_jsxs("div", { className: "sprout-form-section-header", children: [_jsxs("div", { className: "sprout-form-section-text", children: [_jsx(Heading, { className: "sprout-form-section-title", children: title }), description && (_jsx("p", { className: "sprout-form-section-description", children: description }))] }), meta && _jsx(Badge, { variant: "secondary", children: meta })] }), _jsx("div", { className: "sprout-form-section-content", children: children })] }));
+}
+/**
+ * The save area of a form: the submit with busy and blocked states, an
+ * optional secondary submit and cancel, an unsaved-changes line, a note, and
+ * an error alert.
+ */
+export function FormFooter({ form, summary, submit, secondarySubmit, dirty, cancel, note, error, layout = "bar", className, children, }) {
+    const action = useActionControl(submit.state);
+    const stack = layout === "stack";
+    const compact = layout === "compact";
+    const size = stack ? "lg" : "default";
+    const wide = stack ? "sprout-form-footer-wide" : undefined;
+    const save = (_jsx(Button, { type: "submit", form: form, size: size, className: wide, ...action.button, children: submit.state.kind === "busy" ? submit.pendingLabel : submit.label }));
+    const secondary = secondarySubmit && (_jsx(Button, { type: "submit", form: form, size: size, variant: "outline", className: wide, disabled: secondarySubmit.disabled, onClick: secondarySubmit.onSelect, children: secondarySubmit.label }));
+    const cancelButton = !cancel ? null : cancel.kind === "leave" ? (_jsx(Button, { variant: "outline", size: size, className: wide, nativeButton: false, render: cancel.link, children: cancel.label })) : dirty && submit.state.kind !== "busy" ? (_jsx(Button, { variant: "outline", size: size, className: wide, onClick: cancel.onReset, children: cancel.label })) : null;
+    const status = (_jsxs(_Fragment, { children: [dirty && (_jsxs("p", { className: "sprout-form-footer-dirty", children: [_jsx("span", { "aria-hidden": "true", className: "sprout-form-footer-dirty-dot" }), "Unsaved changes"] })), note && _jsx("p", { className: "sprout-form-footer-note", children: note })] }));
+    return (_jsxs("div", { "data-slot": "form-footer", "data-layout": layout, className: cn("sprout-form-footer", className), children: [stack ? (_jsxs(_Fragment, { children: [status, _jsxs("div", { className: "sprout-form-footer-stack", children: [save, secondary, cancelButton] })] })) : (_jsxs("div", { className: "sprout-form-footer-row", children: [_jsx("div", { className: compact && !summary
+                            ? "sprout-form-footer-sr-only"
+                            : "sprout-form-footer-status", children: summary ?? status }), _jsxs("div", { className: "sprout-form-footer-actions", children: [compact && children, cancelButton, secondary, save] })] })), action.reason, error && _jsx(Alert, { variant: "destructive", children: error }), !compact && children] }));
+}

package/dist/components/glass-banner.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentProps, type ReactNode } from "react";
+export interface GlassBannerProps extends Omit<ComponentProps<"div">, "title" | "children"> {
+    /** The headline on the glass. */
+    title: ReactNode;
+    /** A quieter line under the title. It also names the chip list. */
+    caption?: ReactNode;
+    /** `GlassChip` items. Up to three float around the art on wide banners. */
+    children: ReactNode;
+}
+/**
+ * A frosted showcase banner with draggable glass chips. The bubble art is
+ * hidden from assistive technology; the chips are announced as a list named
+ * by the caption, or by the title when there is no caption.
+ */
+export declare function GlassBanner({ title, caption, className, children, ...props }: GlassBannerProps): import("react").JSX.Element;
+export interface GlassChipProps extends Omit<ComponentProps<"li">, "children"> {
+    /** A 28px round badge before the text, such as a brand glyph or icon. */
+    icon?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * A glass pill that can be dragged with a pointer and springs back on
+ * release, stretching with its speed. The drag is play only: chips are not
+ * controls and take no focus. With reduced motion the chip neither floats
+ * nor springs; it snaps home on release.
+ */
+export declare function GlassChip({ icon, className, children, ref, ...props }: GlassChipProps): import("react").JSX.Element;