@tulipfarm/sprout 0.1.0 → 0.2.0

package/dist/components/file-explorer.js

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

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

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

package/dist/components/file-viewer.js

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

package/dist/components/questionnaire.js

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

package/dist/components/search-dialog.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Toggle } from "@base-ui/react/toggle";
 import { Children, Fragment, isValidElement, } from "react";
 import { X } from "reicon-react/icons/X";
 import { cn } from "../internal/classes.js";
 import { Button } from "./button.js";
+import { Kbd } from "./kbd.js";
+import { Toggle } from "./toggle.js";
 import { Command, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, } from "./dialog.js";
 /**
@@ -24,7 +25,7 @@ export function SearchFilters({ label, children }) {
 }
 /** A pressable filter chip. */
 export function SearchFilter({ pressed, onPressedChange, icon, children, }) {
-    return (_jsxs(Toggle, { "data-slot": "search-filter", pressed: pressed, onPressedChange: (next) => onPressedChange(next), className: "sprout-search-filter", children: [icon, children] }));
+    return (_jsxs(Toggle, { "data-slot": "search-filter", variant: "outline", size: "sm", pressed: pressed, onPressedChange: (next) => onPressedChange(next), children: [icon, children] }));
 }
 /** The scrolling results area. It keeps a steady height so typing does not resize the dialog. */
 export function SearchList({ label, children }) {
@@ -42,7 +43,7 @@ export function SearchItemIcon({ children }) {
 }
 /** One result. The active item shows an Enter key hint. */
 export function SearchItem({ value, onSelect, media, title, meta, detail, trailing, }) {
-    return (_jsxs(CommandItem, { value: value, onSelect: () => onSelect(), className: "sprout-search-item", children: [_jsx("span", { "data-slot": "search-item-media", className: "sprout-search-item-media", children: media }), _jsxs("span", { className: "sprout-search-item-text", children: [_jsxs("span", { className: "sprout-search-item-line", children: [_jsx("span", { "data-slot": "search-item-title", className: "sprout-search-item-title", children: title }), meta && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "sprout-search-item-dot", children: "\u00B7" }), _jsx("span", { "data-slot": "search-item-meta", className: "sprout-search-item-meta", children: meta })] }))] }), detail && (_jsx("span", { "data-slot": "search-item-detail", className: "sprout-search-item-detail", children: detail }))] }), trailing && (_jsx("span", { "data-slot": "search-item-trailing", className: "sprout-search-item-trailing", children: trailing })), _jsx("kbd", { "aria-hidden": "true", className: "sprout-search-kbd sprout-search-item-enter", children: "\u21B5" })] }));
+    return (_jsxs(CommandItem, { value: value, onSelect: () => onSelect(), className: "sprout-search-item", children: [_jsx("span", { "data-slot": "search-item-media", className: "sprout-search-item-media", children: media }), _jsxs("span", { className: "sprout-search-item-text", children: [_jsxs("span", { className: "sprout-search-item-line", children: [_jsx("span", { "data-slot": "search-item-title", className: "sprout-search-item-title", children: title }), meta && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "sprout-search-item-dot", children: "\u00B7" }), _jsx("span", { "data-slot": "search-item-meta", className: "sprout-search-item-meta", children: meta })] }))] }), detail && (_jsx("span", { "data-slot": "search-item-detail", className: "sprout-search-item-detail", children: detail }))] }), trailing && (_jsx("span", { "data-slot": "search-item-trailing", className: "sprout-search-item-trailing", children: trailing })), _jsx(Kbd, { variant: "outline", "aria-hidden": "true", className: "sprout-search-item-enter", children: "\u21B5" })] }));
 }
 function tiles(media) {
     const nodes = isValidElement(media) && media.type === Fragment
@@ -60,5 +61,5 @@ export function SearchFooter({ children }) {
 }
 /** A key and what it does. */
 export function SearchHint({ keys, children }) {
-    return (_jsxs("span", { "data-slot": "search-hint", className: "sprout-search-hint", children: [_jsx("kbd", { className: "sprout-search-kbd", children: keys }), children] }));
+    return (_jsxs("span", { "data-slot": "search-hint", className: "sprout-search-hint", children: [_jsx(Kbd, { variant: "outline", children: keys }), children] }));
 }

package/dist/components/state-panel.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from "reicon-react/icons/Check";
 import { Inbox } from "reicon-react/icons/Inbox";
-import { Loader } from "reicon-react/icons/Loader";
 import { Warning } from "reicon-react/icons/Warning";
 import { cn } from "../internal/classes.js";
+import { Spinner } from "./spinner.js";
 export const statePanelKindNames = [
     "empty",
     "loading",
@@ -17,7 +17,7 @@ const roles = {
     success: "status",
 };
 function Media({ kind, Icon }) {
-    return (_jsx("div", { "data-slot": "state-panel-media", className: "sprout-state-panel-media", "aria-hidden": "true", children: kind === "loading" ? (_jsx(Loader, { size: 16, className: "sprout-state-panel-spinner" })) : kind === "success" ? (_jsx(Check, { size: 20 })) : kind === "error" ? (_jsx(Warning, { size: 20, className: "sprout-state-panel-danger" })) : (_jsx(Icon, { size: 20 })) }));
+    return (_jsx("div", { "data-slot": "state-panel-media", className: "sprout-state-panel-media", "aria-hidden": "true", children: kind === "loading" ? (_jsx(Spinner, { "aria-hidden": "true" })) : kind === "success" ? (_jsx(Check, { size: 20 })) : kind === "error" ? (_jsx(Warning, { size: 20, className: "sprout-state-panel-danger" })) : (_jsx(Icon, { size: 20 })) }));
 }
 export function StatePanel({ kind, title, description, heading: Heading = "h2", icon = Inbox, children, sample, className, ...props }) {
     const media = icon === null && (kind === "empty" || kind === "unavailable") ? null : (_jsx(Media, { kind: kind, Icon: icon ?? Inbox }));

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export * from "./components/card.js";
 export * from "./components/carousel.js";
 export * from "./components/chart.js";
 export * from "./components/chat-confirmation.js";
+export * from "./components/chat-input.js";
 export * from "./components/chat-plan.js";
 export * from "./components/chat-sources.js";
 export * from "./components/checkbox.js";
@@ -28,6 +29,7 @@ export * from "./components/dialog.js";
 export * from "./components/direction.js";
 export * from "./components/dropdown-menu.js";
 export * from "./components/field.js";
+export * from "./components/file-explorer.js";
 export * from "./components/file-viewer.js";
 export * from "./components/form.js";
 export * from "./components/glass-banner.js";

package/dist/index.js

@@ -15,6 +15,7 @@ export * from "./components/card.js";
 export * from "./components/carousel.js";
 export * from "./components/chart.js";
 export * from "./components/chat-confirmation.js";
+export * from "./components/chat-input.js";
 export * from "./components/chat-plan.js";
 export * from "./components/chat-sources.js";
 export * from "./components/checkbox.js";
@@ -28,6 +29,7 @@ export * from "./components/dialog.js";
 export * from "./components/direction.js";
 export * from "./components/dropdown-menu.js";
 export * from "./components/field.js";
+export * from "./components/file-explorer.js";
 export * from "./components/file-viewer.js";
 export * from "./components/form.js";
 export * from "./components/glass-banner.js";

package/dist/internal/brand-glyphs.d.ts

@@ -37,6 +37,34 @@ export declare const brandGlyphs: {
             readonly evenOdd: true;
         }];
     };
+    readonly gemini: {
+        readonly viewBox: "0 0 24 24";
+        readonly paths: readonly [{
+            readonly d: "M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z";
+            readonly evenOdd: true;
+        }];
+    };
+    readonly mistral: {
+        readonly viewBox: "0 0 24 24";
+        readonly paths: readonly [{
+            readonly d: "M3.428 3.4h3.429v3.428h3.429v3.429h-.002 3.431V6.828h3.427V3.4h3.43v13.714H24v3.429H13.714v-3.428h-3.428v-3.429h-3.43v3.428h3.43v3.429H0v-3.429h3.428V3.4zm10.286 13.715h3.428v-3.429h-3.427v3.429z";
+            readonly evenOdd: true;
+        }];
+    };
+    readonly meta: {
+        readonly viewBox: "0 0 24 24";
+        readonly paths: readonly [{
+            readonly d: "M6.897 4c1.915 0 3.516.932 5.43 3.376l.282-.373c.19-.246.383-.484.58-.71l.313-.35C14.588 4.788 15.792 4 17.225 4c1.273 0 2.469.557 3.491 1.516l.218.213c1.73 1.765 2.917 4.71 3.053 8.026l.011.392.002.25c0 1.501-.28 2.759-.818 3.7l-.14.23-.108.153c-.301.42-.664.758-1.086 1.009l-.265.142-.087.04a3.493 3.493 0 01-.302.118 4.117 4.117 0 01-1.33.208c-.524 0-.996-.067-1.438-.215-.614-.204-1.163-.56-1.726-1.116l-.227-.235c-.753-.812-1.534-1.976-2.493-3.586l-1.43-2.41-.544-.895-1.766 3.13-.343.592C7.597 19.156 6.227 20 4.356 20c-1.21 0-2.205-.42-2.936-1.182l-.168-.184c-.484-.573-.837-1.311-1.043-2.189l-.067-.32a8.69 8.69 0 01-.136-1.288L0 14.468c.002-.745.06-1.49.174-2.23l.1-.573c.298-1.53.828-2.958 1.536-4.157l.209-.34c1.177-1.83 2.789-3.053 4.615-3.16L6.897 4zm-.033 2.615l-.201.01c-.83.083-1.606.673-2.252 1.577l-.138.199-.01.018c-.67 1.017-1.185 2.378-1.456 3.845l-.004.022a12.591 12.591 0 00-.207 2.254l.002.188c.004.18.017.36.04.54l.043.291c.092.503.257.908.486 1.208l.117.137c.303.323.698.492 1.17.492 1.1 0 1.796-.676 3.696-3.641l2.175-3.4.454-.701-.139-.198C9.11 7.3 8.084 6.616 6.864 6.616zm10.196-.552l-.176.007c-.635.048-1.223.359-1.82.933l-.196.198c-.439.462-.887 1.064-1.367 1.807l.266.398c.18.274.362.56.55.858l.293.475 1.396 2.335.695 1.114c.583.926 1.03 1.6 1.408 2.082l.213.262c.282.326.529.54.777.673l.102.05c.227.1.457.138.718.138.176.002.35-.023.518-.073.338-.104.61-.32.813-.637l.095-.163.077-.162c.194-.459.29-1.06.29-1.785l-.006-.449c-.08-2.871-.938-5.372-2.2-6.798l-.176-.189c-.67-.683-1.444-1.074-2.27-1.074z";
+            readonly evenOdd: true;
+        }];
+    };
+    readonly qwen: {
+        readonly viewBox: "0 0 24 24";
+        readonly paths: readonly [{
+            readonly d: "M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z";
+            readonly evenOdd: true;
+        }];
+    };
     readonly google: {
         readonly viewBox: "0 0 24 24";
         readonly paths: readonly [{