@tulipfarm/sprout 0.3.1 → 0.5.0

package/dist/components/file-viewer.js

@@ -1,23 +1,23 @@
 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";
+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 '../internal/state-panel.js';
 const RenderersContext = createContext({});
 /** Registers file renderers once for every viewer below it. */
-export function FileRenderersProvider({ renderers, children, }) {
+export function FileRenderersProvider({ renderers, children }) {
     const parent = useContext(RenderersContext);
     const value = useMemo(() => ({ ...parent, ...renderers }), [parent, renderers]);
     return _jsx(RenderersContext, { value: value, children: children });
@@ -39,8 +39,8 @@ export function googleDocument(url) {
     catch {
         return null;
     }
-    if (parsed.protocol !== "https:" ||
-        parsed.hostname !== "docs.google.com" ||
+    if (parsed.protocol !== 'https:' ||
+        parsed.hostname !== 'docs.google.com' ||
         parsed.username ||
         parsed.password ||
         parsed.port)
@@ -50,38 +50,35 @@ export function googleDocument(url) {
         return null;
     const [, family, id] = match;
     const canonical = `https://docs.google.com/${family}/d/${id}`;
-    const endpoint = family === "presentation" ? "embed" : "preview";
+    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}`,
+        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.");
+    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.");
+        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",
+    '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
@@ -90,15 +87,13 @@ const rasterTypes = new Set([
  */
 export function renderableType(name, mediaType) {
     const kind = fileKind(name, mediaType);
-    if (kind === "pdf")
-        return "application/pdf";
+    if (kind === 'pdf')
+        return 'application/pdf';
     const type = mediaType.trim().toLowerCase();
-    return kind === "image" && rasterTypes.has(type)
-        ? type
-        : "application/octet-stream";
+    return kind === 'image' && rasterTypes.has(type) ? type : 'application/octet-stream';
 }
 function useFileContent(file, attempt = 0, enabled = true) {
-    const [loaded, setLoaded] = useState({ kind: "loading" });
+    const [loaded, setLoaded] = useState({ kind: 'loading' });
     const { source, name, mediaType } = file;
     useEffect(() => {
         if (!enabled)
@@ -107,35 +102,35 @@ function useFileContent(file, attempt = 0, enabled = true) {
         let objectUrl;
         const controller = new AbortController();
         const timeout = setTimeout(() => controller.abort(), 15000);
-        setLoaded({ kind: "loading" });
+        setLoaded({ kind: 'loading' });
         const load = async () => {
             let blob;
-            if (source.kind === "local")
+            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.");
+                    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.");
+                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 });
+            setLoaded({ kind: 'ready', bytes, url: objectUrl });
         };
         void load()
             .catch((error) => {
             if (!cancelled)
                 setLoaded({
-                    kind: "error",
-                    message: error instanceof Error && error.name !== "AbortError"
+                    kind: 'error',
+                    message: error instanceof Error && error.name !== 'AbortError'
                         ? error.message
-                        : "The file took too long to load. Try again.",
+                        : 'The file took too long to load. Try again.',
                 });
         })
             .finally(() => clearTimeout(timeout));
@@ -151,11 +146,9 @@ function useFileContent(file, attempt = 0, enabled = true) {
 }
 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, }) {
+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 [ownPanelOpen, setOwnPanelOpen] = useState(() => defaultPanelOpen ?? (typeof window !== 'undefined' && !!window.matchMedia?.('(min-width: 1024px)').matches));
     const panelShown = !!panel && (panelOpen ?? ownPanelOpen);
     const togglePanel = () => {
         setOwnPanelOpen(!panelShown);
@@ -165,10 +158,9 @@ export function FileViewer({ file, files, index = 0, onIndexChange, open, onOpen
     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;
+        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
@@ -186,27 +178,24 @@ export function FileViewer({ file, files, index = 0, onIndexChange, open, onOpen
         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}`);
+        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)
+        if (!step || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey)
             return;
-        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
             return;
         if (event.target.closest(ownsArrowKeys))
             return;
-        const move = event.key === "ArrowLeft" ? step.previous : step.next;
+        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
+    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,
@@ -216,53 +205,43 @@ export function FileViewer({ file, files, index = 0, onIndexChange, open, onOpen
                         : 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";
+    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 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 })) })] }));
+    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)) }));
+    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 })] }));
+    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")
+    if (loaded.kind === 'loading')
         return _jsx(LoadingFile, {});
-    if (loaded.kind === "error")
+    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",
-];
+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, }) {
+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);
+            return new TextDecoder('utf-8', { fatal: true }).decode(bytes);
         }
         catch {
             return undefined;
@@ -270,24 +249,24 @@ export function FileContent({ name, mediaType, bytes, url, onRetry, renderers: o
     }, [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." }));
+    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(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")
+    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")
+    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")
+    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 }));
+        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 }));
@@ -299,22 +278,17 @@ 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;
+    return kind === 'code' ? (languageForFilename(name) ?? 'text') : kind;
 }
-const previewTextKinds = [
-    "text",
-    "code",
-    "json",
-    "markdown",
-];
+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))
+    if (file.source.kind === 'remote' && googleDocument(file.source.url))
         return false;
     const kind = fileKind(file.name, file.mediaType);
-    return kind === "image" || previewTextKinds.includes(kind);
+    return kind === 'image' || previewTextKinds.includes(kind);
 }
 /**
  * A small, non-interactive peek at a file: the image, or the first lines
@@ -325,30 +299,30 @@ 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 })) }));
+    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, }) {
+function LoadedPreview({ file, kind }) {
     const loaded = useFileContent(file);
     const text = useMemo(() => {
-        if (loaded.kind !== "ready" || kind === "image")
+        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");
+        return head.split('\n').slice(0, previewLines).join('\n');
     }, [loaded, kind]);
-    if (loaded.kind === "loading")
+    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 (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" }));
+        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" }));
+        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")
+        if (kind !== 'json')
             return null;
         try {
             return JSON.stringify(JSON.parse(text), null, 2);
@@ -357,44 +331,42 @@ function TextFile({ text, name, kind, renderMarkdown, }) {
             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 }))] }));
+    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");
+function ImageFile({ url, name, onRetry }) {
+    const [state, setState] = useState('loading');
     const [zoom, setZoom] = useState(false);
-    if (state === "error")
+    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 }) })] }));
+    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, }) {
+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 }));
+        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 [state, setState] = useState('loading');
     const timer = useRef(null);
     useEffect(() => {
-        timer.current = setTimeout(() => setState((value) => (value === "loading" ? "slow" : value)), 12000);
+        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: () => {
+    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 })] }));
+                    setState('loaded');
+                }, onError: () => setState('slow'), allowFullScreen: true })] }));
 }

package/dist/components/form.d.ts

@@ -1,5 +1,5 @@
-import { type ReactElement, type ReactNode } from "react";
-import { type ButtonBlockerFix as ActionBlockerFix, type ButtonState as ActionControlState } from "./button.js";
+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];
@@ -12,7 +12,7 @@ export interface FormProps {
     /** 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;
+    onSubmit: () => 'invalid' | void;
     /** The form's accessible name. */
     label?: string | undefined;
     className?: string | undefined;
@@ -23,7 +23,7 @@ export interface FormProps {
  * 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 declare function Form({ id, disabled, onSubmit, label, className, children }: FormProps): import("react").JSX.Element;
 export interface FormSectionProps {
     title: string;
     description?: string | undefined;
@@ -37,17 +37,17 @@ export interface FormSectionProps {
     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 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";
+    kind: 'reset';
     label: string;
     onReset: () => void;
 }
 /** A link element, such as a router `<Link>`, rendered through Button `render`. */
  | {
-    kind: "leave";
+    kind: 'leave';
     label: string;
     link: ReactElement;
 };