@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/components/file-explorer.js

@@ -1,50 +1,44 @@
-"use client";
+'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";
+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 '../internal/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;
+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("/"));
+    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]]);
+    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",
+                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 });
+        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);
@@ -53,9 +47,7 @@ function buildTree(files) {
 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)
-            : []),
+        ...(node.kind === 'folder' && expanded.has(node.path) ? visibleRows(node.children, expanded, depth + 1) : []),
     ]);
 }
 function rangesIn(text, needle) {
@@ -68,14 +60,14 @@ function rangesIn(text, needle) {
 const excerptLead = 32;
 function searchFiles(files, query) {
     const needle = query.toLowerCase();
-    const names = files.filter((file) => file.path.toLowerCase().includes(needle));
+    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)
+        if (!('content' in file) || total >= fileExplorerMaxMatches)
             continue;
         const lines = [];
-        file.content.split("\n").forEach((raw, index) => {
+        file.content.split('\n').forEach((raw, index) => {
             if (total >= fileExplorerMaxMatches)
                 return;
             const ranges = rangesIn(raw, needle);
@@ -83,7 +75,7 @@ function searchFiles(files, query) {
                 return;
             const indent = raw.length - raw.trimStart().length;
             const cut = Math.max(indent, ranges[0][0] - excerptLead);
-            const prefix = cut > indent ? "…" : "";
+            const prefix = cut > indent ? '…' : '';
             const shift = cut - prefix.length;
             lines.push({
                 line: index + 1,
@@ -120,59 +112,56 @@ function marked(pieces, ranges) {
     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"],
+    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",
-    ];
+    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 _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, }) {
+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" });
+        current.current?.scrollIntoView({ block: 'center' });
     }, [line, file.path]);
-    const lines = useMemo(() => tokens?.map((row) => row.map((token) => ({
+    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]);
+    }))) ?? 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
+    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));
+                                        : pieces.map((piece, at) => (_jsx("span", { className: piece.className, children: piece.content }, at))), '\n'] })] }, index));
                 }) }) }) }));
 }
 /**
@@ -180,21 +169,21 @@ function CodeView({ file, query, line, }) {
  * 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 }) {
+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 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 [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 toggle = (path, open) => setExpanded(current => {
         const next = new Set(current);
         if (open ?? !next.has(path))
             next.add(path);
@@ -203,7 +192,7 @@ export function FileExplorer({ files, label = "Files", defaultPath, className, .
         return next;
     });
     const open = (path, at = null) => {
-        setTabs((current) => {
+        setTabs(current => {
             if (current.includes(path))
                 return current;
             const next = [...current];
@@ -213,11 +202,11 @@ export function FileExplorer({ files, label = "Files", defaultPath, className, .
         setActive(path);
         setFocused(path);
         setLine(at);
-        setExpanded((current) => new Set([...current, ...ancestors(path)]));
+        setExpanded(current => new Set([...current, ...ancestors(path)]));
     };
     const close = (path) => {
         const index = tabs.indexOf(path);
-        const next = tabs.filter((tab) => tab !== path);
+        const next = tabs.filter(tab => tab !== path);
         setTabs(next);
         if (active === path) {
             setActive(next[Math.min(index, next.length - 1)] ?? null);
@@ -228,47 +217,45 @@ export function FileExplorer({ files, label = "Files", defaultPath, className, .
         if (!path)
             return;
         setFocused(path);
-        treeRef.current
-            ?.querySelector(`[data-path="${CSS.escape(path)}"]`)
-            ?.focus();
+        treeRef.current?.querySelector(`[data-path="${CSS.escape(path)}"]`)?.focus();
     };
     const onTreeKeyDown = (event) => {
-        const index = rows.findIndex((row) => row.node.path === focused);
+        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);
+        const isOpen = node.kind === 'folder' && expanded.has(node.path);
         switch (event.key) {
-            case "ArrowDown":
+            case 'ArrowDown':
                 focusRow(rows[index + 1]?.node.path);
                 break;
-            case "ArrowUp":
+            case 'ArrowUp':
                 focusRow(rows[index - 1]?.node.path);
                 break;
-            case "Home":
+            case 'Home':
                 focusRow(rows[0]?.node.path);
                 break;
-            case "End":
+            case 'End':
                 focusRow(rows.at(-1)?.node.path);
                 break;
-            case "ArrowRight":
-                if (node.kind !== "folder")
+            case 'ArrowRight':
+                if (node.kind !== 'folder')
                     return;
                 if (isOpen)
                     focusRow(rows[index + 1]?.node.path);
                 else
                     toggle(node.path, true);
                 break;
-            case "ArrowLeft":
+            case 'ArrowLeft':
                 if (isOpen)
                     toggle(node.path, false);
                 else
                     focusRow(folderOf(node.path) || undefined);
                 break;
-            case "Enter":
-            case " ":
-                if (node.kind === "folder")
+            case 'Enter':
+            case ' ':
+                if (node.kind === 'folder')
                     toggle(node.path);
                 else
                     open(node.path);
@@ -280,21 +267,18 @@ export function FileExplorer({ files, label = "Files", defaultPath, className, .
     };
     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 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: () => {
+                                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) => {
+                                    }, 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 }))] })] }));
+                                    }, 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

@@ -1,11 +1,11 @@
-import { type HTMLAttributes, type ReactNode } from "react";
-import { type FileKind } from "../internal/file-kind.js";
-import { type DialogContentProps } from "./dialog.js";
+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";
+    kind: 'local';
     file: File;
 } | {
-    kind: "remote";
+    kind: 'remote';
     url: string;
 };
 export interface ViewableFile {
@@ -20,7 +20,7 @@ export interface FileSheetRendererProps {
     onRetry: () => void;
 }
 export interface FileOfficeRendererProps extends FileSheetRendererProps {
-    kind: "document" | "slides";
+    kind: 'document' | 'slides';
 }
 export interface FileMarkdownRendererProps {
     text: string;
@@ -41,7 +41,7 @@ export interface FileRenderersProviderProps {
     children?: ReactNode;
 }
 /** Registers file renderers once for every viewer below it. */
-export declare function FileRenderersProvider({ renderers, children, }: FileRenderersProviderProps): import("react").JSX.Element;
+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 {
@@ -64,7 +64,7 @@ interface FileViewerBaseProps {
     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"];
+    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. */
@@ -115,10 +115,10 @@ export interface FileContentProps {
     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 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"> {
+export interface FileErrorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     message: ReactNode;
     onRetry: () => void;
 }