vestrycms 0.0.0-stage → 0.1.0

package/dist/ui/components/editor/RichTextEditor.js

@@ -0,0 +1,253 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TableKit } from "@tiptap/extension-table";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import { Placeholder } from "@tiptap/extensions";
+import { EditorContent, useEditor, useEditorState, } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { Bold, Code, Code2, Eye, Heading1, Heading2, Heading3, Image as ImageIcon, Italic, Link as LinkIcon, List, ListOrdered, Minus, Plus, Quote, Redo2, Strikethrough, Subscript as SubIcon, Superscript as SupIcon, Table as TableIcon, Undo2, Unlink, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { parseMdx, serializeMdx } from "../../../mdx/index.js";
+import { cx, defaultValues } from "../../lib/utils.js";
+import { AssetPicker } from "../AssetPicker.js";
+import { Icon } from "../Icon.js";
+import { CodeInput } from "../fields/CodeInput.js";
+import { Button, Menu, Modal } from "../ui.js";
+import { EditorEnvContext, useEditorEnv, } from "./EditorContext.js";
+import { MdxComponent, MdxEsm, MdxExpression, MdxImage, MdxInlineComponent, MdxInlineExpression, RawHtml, RawInlineHtml, } from "./extensions.js";
+/**
+ * Tiptap editor that reads and writes MDX. The document is parsed once on
+ * load; edits are serialized back (debounced) and reported through `onChange`.
+ * A source mode exposes the raw MDX in CodeMirror; switching back re-parses.
+ */
+export function RichTextEditor(props) {
+    return (_jsx(EditorEnvContext.Provider, { value: props.env, children: _jsx(EditorInner, { ...props }) }));
+}
+function EditorInner({ value, onChange, components, env, format = "mdx", placeholder, compact, flush, onUpload, }) {
+    const [mode, setMode] = useState("visual");
+    const [parseError, setParseError] = useState(null);
+    const importsRef = useRef({});
+    const lastEmitted = useRef(value);
+    const registry = useMemo(() => {
+        const out = {};
+        for (const [name, c] of Object.entries(env.components)) {
+            out[name] = {
+                import: c.import,
+                namedImport: c.namedImport,
+                inline: c.inline,
+                children: c.children,
+            };
+        }
+        return out;
+    }, [env.components]);
+    const parse = useCallback((mdx) => {
+        try {
+            const parsed = parseMdx(mdx, { format });
+            importsRef.current = parsed.imports;
+            setParseError(null);
+            return parsed.doc;
+        }
+        catch (e) {
+            setParseError(e.message);
+            return null;
+        }
+    }, [format]);
+    const serialize = useCallback((doc) => serializeMdx(doc, {
+        format,
+        components: registry,
+        existingImports: importsRef.current,
+    }), [format, registry]);
+    const initialDoc = useMemo(() => parse(value), []); // eslint-disable-line react-hooks/exhaustive-deps
+    const extensions = useMemo(() => [
+        StarterKit.configure({
+            heading: { levels: [1, 2, 3, 4] },
+            link: { openOnClick: false, autolink: true, defaultProtocol: "https" },
+            codeBlock: { languageClassPrefix: "language-" },
+            dropcursor: { color: "var(--v-primary)", width: 2 },
+        }),
+        Superscript,
+        Subscript,
+        MdxImage.configure({
+            resolveSrc: (src) => env.resolveImage?.(src) ?? src,
+        }),
+        TableKit.configure({ table: { resizable: false } }),
+        Placeholder.configure({ placeholder: placeholder ?? "Start writing…" }),
+        MdxComponent,
+        MdxInlineComponent,
+        MdxExpression,
+        MdxInlineExpression,
+        MdxEsm,
+        RawHtml,
+        RawInlineHtml,
+    ], [env, placeholder]);
+    const timer = useRef(null);
+    const editor = useEditor({
+        extensions,
+        content: initialDoc ?? { type: "doc", content: [{ type: "paragraph" }] },
+        editorProps: { attributes: { class: "v-prose", spellcheck: "true" } },
+        onUpdate: ({ editor }) => {
+            if (timer.current)
+                clearTimeout(timer.current);
+            timer.current = setTimeout(() => {
+                const mdx = serialize(editor.getJSON());
+                lastEmitted.current = mdx;
+                onChange(mdx);
+            }, 250);
+        },
+    });
+    // External value changes (e.g. after a reload) → re-parse.
+    useEffect(() => {
+        if (!editor || mode !== "visual")
+            return;
+        if (value === lastEmitted.current)
+            return;
+        const doc = parse(value);
+        if (doc) {
+            lastEmitted.current = value;
+            editor.commands.setContent(doc, { emitUpdate: false });
+        }
+    }, [value, editor, mode, parse]);
+    useEffect(() => () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+    }, []);
+    const switchMode = (next) => {
+        if (next === mode || !editor)
+            return;
+        if (next === "source") {
+            if (timer.current) {
+                clearTimeout(timer.current);
+                timer.current = null;
+                const mdx = serialize(editor.getJSON());
+                lastEmitted.current = mdx;
+                onChange(mdx);
+            }
+            setMode("source");
+        }
+        else {
+            const doc = parse(value);
+            if (!doc)
+                return;
+            lastEmitted.current = value;
+            editor.commands.setContent(doc, { emitUpdate: false });
+            setMode("visual");
+        }
+    };
+    return (_jsxs("div", { className: cx("v-rte", compact && "v-rte--compact", flush && "v-rte--flush"), children: [editor && (_jsx(Toolbar, { editor: editor, mode: mode, onMode: switchMode, components: components ?? Object.keys(env.components), onUpload: onUpload, format: format })), mode === "visual" ? (_jsx(EditorContent, { editor: editor })) : (_jsxs("div", { className: "v-source-editor", children: [parseError && (_jsxs("div", { className: "v-alert v-alert--error", style: { margin: 10 }, children: ["Could not parse MDX: ", parseError] })), _jsx(CodeInput, { value: value, language: "markdown", minHeight: "320px", onChange: (v) => {
+                            lastEmitted.current = v;
+                            onChange(v);
+                        } })] }))] }));
+}
+function Toolbar({ editor, mode, onMode, components, onUpload, format, }) {
+    const env = useEditorEnv();
+    const [linkOpen, setLinkOpen] = useState(false);
+    const [imageOpen, setImageOpen] = useState(false);
+    const state = useEditorState({
+        editor,
+        selector: ({ editor }) => ({
+            bold: editor.isActive("bold"),
+            italic: editor.isActive("italic"),
+            strike: editor.isActive("strike"),
+            code: editor.isActive("code"),
+            sup: editor.isActive("superscript"),
+            sub: editor.isActive("subscript"),
+            link: editor.isActive("link"),
+            h1: editor.isActive("heading", { level: 1 }),
+            h2: editor.isActive("heading", { level: 2 }),
+            h3: editor.isActive("heading", { level: 3 }),
+            bullet: editor.isActive("bulletList"),
+            ordered: editor.isActive("orderedList"),
+            quote: editor.isActive("blockquote"),
+            codeBlock: editor.isActive("codeBlock"),
+            table: editor.isActive("table"),
+            canUndo: editor.can().undo(),
+            canRedo: editor.can().redo(),
+        }),
+    });
+    const disabled = mode === "source";
+    const tool = (label, active, icon, run, isDisabled = false) => (_jsx("button", { type: "button", className: cx("v-rte__tool", active && "is-active"), title: label, "aria-label": label, disabled: disabled || isDisabled, onMouseDown: (e) => e.preventDefault(), onClick: run, children: icon }));
+    const insertComponent = (name) => {
+        const cfg = env.components[name];
+        const props = defaultValues(cfg?.props ?? {});
+        if (cfg?.inline) {
+            editor
+                .chain()
+                .focus()
+                .insertContent({
+                type: "mdxInlineComponent",
+                attrs: { name, props, hasChildren: Boolean(cfg.children) },
+                content: cfg.children ? [{ type: "text", text: "text" }] : [],
+            })
+                .run();
+            return;
+        }
+        const node = {
+            type: "mdxComponent",
+            attrs: { name, props, hasChildren: Boolean(cfg?.children) },
+            content: cfg?.children ? [{ type: "paragraph" }] : [],
+        };
+        editor.chain().focus().insertContent(node).run();
+    };
+    return (_jsxs("div", { className: "v-rte__toolbar", children: [tool("Undo", false, _jsx(Undo2, {}), () => editor.chain().focus().undo().run(), !state.canUndo), tool("Redo", false, _jsx(Redo2, {}), () => editor.chain().focus().redo().run(), !state.canRedo), _jsx("span", { className: "v-rte__sep" }), tool("Heading 1", state.h1, _jsx(Heading1, {}), () => editor.chain().focus().toggleHeading({ level: 1 }).run()), tool("Heading 2", state.h2, _jsx(Heading2, {}), () => editor.chain().focus().toggleHeading({ level: 2 }).run()), tool("Heading 3", state.h3, _jsx(Heading3, {}), () => editor.chain().focus().toggleHeading({ level: 3 }).run()), _jsx("span", { className: "v-rte__sep" }), tool("Bold", state.bold, _jsx(Bold, {}), () => editor.chain().focus().toggleBold().run()), tool("Italic", state.italic, _jsx(Italic, {}), () => editor.chain().focus().toggleItalic().run()), tool("Strikethrough", state.strike, _jsx(Strikethrough, {}), () => editor.chain().focus().toggleStrike().run()), tool("Inline code", state.code, _jsx(Code, {}), () => editor.chain().focus().toggleCode().run()), format === "mdx" &&
+                tool("Superscript", state.sup, _jsx(SupIcon, {}), () => editor.chain().focus().toggleSuperscript().run()), format === "mdx" &&
+                tool("Subscript", state.sub, _jsx(SubIcon, {}), () => editor.chain().focus().toggleSubscript().run()), state.link
+                ? tool("Remove link", true, _jsx(Unlink, {}), () => editor.chain().focus().unsetLink().run())
+                : tool("Link", false, _jsx(LinkIcon, {}), () => setLinkOpen(true)), _jsx("span", { className: "v-rte__sep" }), tool("Bullet list", state.bullet, _jsx(List, {}), () => editor.chain().focus().toggleBulletList().run()), tool("Numbered list", state.ordered, _jsx(ListOrdered, {}), () => editor.chain().focus().toggleOrderedList().run()), tool("Quote", state.quote, _jsx(Quote, {}), () => editor.chain().focus().toggleBlockquote().run()), tool("Code block", state.codeBlock, _jsx(Code2, {}), () => editor.chain().focus().toggleCodeBlock().run()), tool("Divider", false, _jsx(Minus, {}), () => editor.chain().focus().setHorizontalRule().run()), tool("Image", false, _jsx(ImageIcon, {}), () => setImageOpen(true), !env.imageDirectory), _jsx(Menu, { trigger: ({ toggle }) => (_jsx("button", { type: "button", className: cx("v-rte__tool", state.table && "is-active"), title: "Table", disabled: disabled, onMouseDown: (e) => e.preventDefault(), onClick: toggle, children: _jsx(TableIcon, {}) })), children: (close) => (_jsxs(_Fragment, { children: [_jsx("button", { className: "v-menu__item", onClick: () => {
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+                                    .run();
+                                close();
+                            }, children: "Insert table" }), state.table && (_jsxs(_Fragment, { children: [_jsx("button", { className: "v-menu__item", onClick: () => {
+                                        editor.chain().focus().addRowAfter().run();
+                                        close();
+                                    }, children: "Add row below" }), _jsx("button", { className: "v-menu__item", onClick: () => {
+                                        editor.chain().focus().addColumnAfter().run();
+                                        close();
+                                    }, children: "Add column after" }), _jsx("button", { className: "v-menu__item", onClick: () => {
+                                        editor.chain().focus().deleteRow().run();
+                                        close();
+                                    }, children: "Delete row" }), _jsx("button", { className: "v-menu__item", onClick: () => {
+                                        editor.chain().focus().deleteColumn().run();
+                                        close();
+                                    }, children: "Delete column" }), _jsx("button", { className: "v-menu__item is-danger", onClick: () => {
+                                        editor.chain().focus().deleteTable().run();
+                                        close();
+                                    }, children: "Delete table" })] }))] })) }), format === "mdx" && components.length > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "v-rte__sep" }), _jsx(Menu, { trigger: ({ toggle }) => (_jsxs("button", { type: "button", className: "v-rte__insert", disabled: disabled, onMouseDown: (e) => e.preventDefault(), onClick: toggle, children: [_jsx(Plus, {}), " Insert"] })), children: (close) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "v-menu__heading", children: "Components" }), components.map((name) => {
+                                    const c = env.components[name];
+                                    return (_jsxs("button", { className: "v-menu__item", onClick: () => {
+                                            insertComponent(name);
+                                            close();
+                                        }, children: [_jsx(Icon, { name: c?.icon ?? "box" }), _jsxs("span", { children: [c?.label ?? name, c?.description && _jsx("small", { children: c.description })] })] }, name));
+                                })] })) })] })), _jsx("span", { className: "v-rte__spacer" }), _jsxs("div", { className: "v-segment", style: { height: 30 }, children: [_jsxs("button", { type: "button", className: cx(mode === "visual" && "is-active"), style: { height: 28 }, onClick: () => onMode("visual"), title: "Visual editor", children: [_jsx(Eye, { size: 14, style: { marginRight: 4, verticalAlign: -2 } }), " Visual"] }), _jsxs("button", { type: "button", className: cx(mode === "source" && "is-active"), style: { height: 28 }, onClick: () => onMode("source"), title: "Edit MDX source", children: [_jsx(Code2, { size: 14, style: { marginRight: 4, verticalAlign: -2 } }), " ", "Source"] })] }), linkOpen && (_jsx(LinkDialog, { editor: editor, onClose: () => setLinkOpen(false) })), imageOpen && env.imageDirectory && (_jsx(AssetPicker, { directory: env.imageDirectory, accept: ["jpg", "jpeg", "png", "gif", "webp", "avif", "svg"], title: "Insert image", deferUploads: Boolean(onUpload), onClose: () => setImageOpen(false), onPick: (path, upload) => {
+                    if (upload)
+                        onUpload?.(upload);
+                    editor
+                        .chain()
+                        .focus()
+                        .setImage({ src: env.toDocPath(path), alt: "" })
+                        .run();
+                    setImageOpen(false);
+                } }))] }));
+}
+function LinkDialog({ editor, onClose, }) {
+    const [href, setHref] = useState(() => editor.getAttributes("link").href ?? "");
+    const apply = () => {
+        const url = href.trim();
+        if (!url)
+            editor.chain().focus().extendMarkRange("link").unsetLink().run();
+        else
+            editor
+                .chain()
+                .focus()
+                .extendMarkRange("link")
+                .setLink({ href: url })
+                .run();
+        onClose();
+    };
+    return (_jsxs(Modal, { title: "Link", onClose: onClose, footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: onClose, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: apply, children: "Apply" })] }), children: [_jsx("label", { className: "v-field__label", htmlFor: "v-link-url", children: "URL" }), _jsx("input", { id: "v-link-url", className: "v-input", autoFocus: true, value: href, placeholder: "https://example.com or /visit", onChange: (e) => setHref(e.target.value), onKeyDown: (e) => {
+                    if (e.key === "Enter")
+                        apply();
+                } })] }));
+}

package/dist/ui/components/editor/extensions.d.ts

@@ -0,0 +1,20 @@
+import { Node } from "@tiptap/core";
+/** A block-level MDX component, e.g. `<Highlights items={[...]} />`. */
+export declare const MdxComponent: Node<any, any>;
+/** An inline MDX component, e.g. `<Abbr title="...">WELS</Abbr>`. */
+export declare const MdxInlineComponent: Node<any, any>;
+/** `{expression}` at block level. */
+export declare const MdxExpression: Node<any, any>;
+/** `export const x = ...` and other ESM that isn't a known import. */
+export declare const MdxEsm: Node<any, any>;
+/** Raw HTML blocks (plain Markdown files). */
+export declare const RawHtml: Node<any, any>;
+export declare const MdxInlineExpression: Node<any, any>;
+export declare const RawInlineHtml: Node<any, any>;
+/**
+ * Markdown images are inline. `resolveSrc` maps the stored path (relative to
+ * the entry file, or a public URL) to something the browser can load.
+ */
+export declare const MdxImage: Node<{
+    resolveSrc: (src: string) => string;
+} & Record<string, unknown>, any>;

package/dist/ui/components/editor/extensions.js

@@ -0,0 +1,156 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+import Image from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { ComponentNodeView, InlineComponentNodeView, RawBlockNodeView, } from "./NodeViews.js";
+/** A block-level MDX component, e.g. `<Highlights items={[...]} />`. */
+export const MdxComponent = Node.create({
+    name: "mdxComponent",
+    group: "block",
+    content: "block*",
+    defining: true,
+    isolating: true,
+    draggable: true,
+    selectable: true,
+    addAttributes() {
+        return {
+            name: { default: "" },
+            props: { default: {} },
+            spreads: { default: [] },
+            hasChildren: { default: false },
+        };
+    },
+    parseHTML() {
+        return [{ tag: "div[data-mdx-component]" }];
+    },
+    renderHTML({ HTMLAttributes, node }) {
+        return [
+            "div",
+            mergeAttributes(HTMLAttributes, {
+                "data-mdx-component": node.attrs.name,
+            }),
+            0,
+        ];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(ComponentNodeView, {
+            contentDOMElementTag: "div",
+        });
+    },
+});
+/** An inline MDX component, e.g. `<Abbr title="...">WELS</Abbr>`. */
+export const MdxInlineComponent = Node.create({
+    name: "mdxInlineComponent",
+    group: "inline",
+    inline: true,
+    content: "inline*",
+    selectable: true,
+    addAttributes() {
+        return {
+            name: { default: "" },
+            props: { default: {} },
+            spreads: { default: [] },
+            hasChildren: { default: false },
+        };
+    },
+    parseHTML() {
+        return [{ tag: "span[data-mdx-inline-component]" }];
+    },
+    renderHTML({ HTMLAttributes, node }) {
+        return [
+            "span",
+            mergeAttributes(HTMLAttributes, {
+                "data-mdx-inline-component": node.attrs.name,
+                class: "v-inline-component",
+                "data-name": node.attrs.name,
+            }),
+            0,
+        ];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(InlineComponentNodeView, {
+            contentDOMElementTag: "span",
+        });
+    },
+});
+function rawBlock(name, kind) {
+    return Node.create({
+        name,
+        group: "block",
+        atom: true,
+        draggable: true,
+        selectable: true,
+        addAttributes() {
+            return { value: { default: "" }, kind: { default: kind } };
+        },
+        parseHTML() {
+            return [{ tag: `div[data-${name}]` }];
+        },
+        renderHTML({ HTMLAttributes, node }) {
+            return [
+                "div",
+                mergeAttributes(HTMLAttributes, { [`data-${name}`]: "" }),
+                node.attrs.value,
+            ];
+        },
+        addNodeView() {
+            return ReactNodeViewRenderer(RawBlockNodeView);
+        },
+    });
+}
+/** `{expression}` at block level. */
+export const MdxExpression = rawBlock("mdxExpression", "expression");
+/** `export const x = ...` and other ESM that isn't a known import. */
+export const MdxEsm = rawBlock("mdxEsm", "esm");
+/** Raw HTML blocks (plain Markdown files). */
+export const RawHtml = rawBlock("rawHtml", "html");
+function rawInline(name) {
+    return Node.create({
+        name,
+        group: "inline",
+        inline: true,
+        atom: true,
+        selectable: true,
+        addAttributes() {
+            return { value: { default: "" } };
+        },
+        parseHTML() {
+            return [{ tag: `span[data-${name}]` }];
+        },
+        renderHTML({ HTMLAttributes, node }) {
+            return [
+                "span",
+                mergeAttributes(HTMLAttributes, {
+                    [`data-${name}`]: "",
+                    class: "v-inline-expression",
+                    title: "Click to edit",
+                }),
+                name === "mdxInlineExpression"
+                    ? `{${node.attrs.value}}`
+                    : node.attrs.value,
+            ];
+        },
+    });
+}
+export const MdxInlineExpression = rawInline("mdxInlineExpression");
+export const RawInlineHtml = rawInline("rawInlineHtml");
+/**
+ * Markdown images are inline. `resolveSrc` maps the stored path (relative to
+ * the entry file, or a public URL) to something the browser can load.
+ */
+export const MdxImage = Image.extend({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            inline: true,
+            allowBase64: false,
+            resolveSrc: (src) => src,
+        };
+    },
+    renderHTML({ HTMLAttributes }) {
+        const src = String(HTMLAttributes.src ?? "");
+        return [
+            "img",
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { src: this.options.resolveSrc(src), "data-src": src }),
+        ];
+    },
+});

package/dist/ui/components/fields/CodeInput.d.ts

@@ -0,0 +1,10 @@
+export interface CodeInputProps {
+    value: string;
+    onChange: (v: string) => void;
+    language?: "markdown" | "yaml" | "json" | "javascript" | "text";
+    rows?: number;
+    readOnly?: boolean;
+    minHeight?: string;
+}
+/** Code editor (CodeMirror, loaded on demand) with a textarea fallback while it loads. */
+export declare function CodeInput(props: CodeInputProps): import("react").JSX.Element;

package/dist/ui/components/fields/CodeInput.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
+const CodeMirrorInput = lazy(() => import("./CodeMirrorInput.js"));
+/** Code editor (CodeMirror, loaded on demand) with a textarea fallback while it loads. */
+export function CodeInput(props) {
+    const fallback = (_jsx("textarea", { className: "v-textarea v-input--mono", rows: props.rows ?? 6, value: props.value, readOnly: props.readOnly, onChange: (e) => props.onChange(e.target.value), spellCheck: false }));
+    return (_jsx(Suspense, { fallback: fallback, children: _jsx(CodeMirrorInput, { ...props }) }));
+}

package/dist/ui/components/fields/CodeMirrorInput.d.ts

@@ -0,0 +1,2 @@
+import type { CodeInputProps } from "./CodeInput.js";
+export default function CodeMirrorInput({ value, onChange, language, rows, readOnly, minHeight, }: CodeInputProps): import("react").JSX.Element;

package/dist/ui/components/fields/CodeMirrorInput.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CodeMirror from "@uiw/react-codemirror";
+import { markdown } from "@codemirror/lang-markdown";
+import { yaml } from "@codemirror/lang-yaml";
+import { EditorView } from "@codemirror/view";
+import { useMemo } from "react";
+const theme = EditorView.theme({
+    "&": {
+        fontSize: "13px",
+        border: "1px solid var(--v-border-strong)",
+        borderRadius: "6px",
+        background: "#fff",
+    },
+    "&.cm-focused": {
+        outline: "none",
+        borderColor: "var(--v-primary)",
+        boxShadow: "0 0 0 3px var(--v-primary-ring)",
+    },
+    ".cm-scroller": { fontFamily: "var(--v-mono)", lineHeight: "1.55" },
+    ".cm-gutters": {
+        background: "#f9fafb",
+        borderRight: "1px solid var(--v-border)",
+        color: "#9ca3af",
+    },
+    ".cm-activeLineGutter": { background: "#f3f4f6" },
+    ".cm-activeLine": { background: "rgba(37, 99, 235, 0.04)" },
+    ".cm-content": { padding: "8px 0" },
+});
+export default function CodeMirrorInput({ value, onChange, language = "text", rows, readOnly, minHeight, }) {
+    const extensions = useMemo(() => {
+        const ext = [theme, EditorView.lineWrapping];
+        if (language === "markdown")
+            ext.push(markdown());
+        if (language === "yaml")
+            ext.push(yaml());
+        return ext;
+    }, [language]);
+    return (_jsx(CodeMirror, { value: value, onChange: onChange, extensions: extensions, readOnly: readOnly, editable: !readOnly, minHeight: minHeight ?? (rows ? `${rows * 1.55 * 13 + 16}px` : "120px"), basicSetup: {
+            lineNumbers: language !== "text",
+            foldGutter: false,
+            highlightActiveLine: true,
+            autocompletion: false,
+        } }));
+}

package/dist/ui/components/fields/FieldRenderer.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from "react";
+import type { Field, Schema } from "../../../config/types.js";
+import { type ValidationError } from "../../lib/utils.js";
+import { type PendingUpload } from "../AssetPicker.js";
+export interface FieldContext {
+    /** Collects files picked through image/file fields so they're committed with the entry. */
+    addUpload?: (upload: PendingUpload) => void;
+    pendingUploads?: Record<string, PendingUpload>;
+    /** Marks the entry as new so slug fields auto-fill. */
+    isNew?: boolean;
+    /** Values of sibling fields (for slug `from`). */
+    siblings?: Record<string, unknown>;
+}
+export interface FieldProps<F extends Field = Field> {
+    fieldKey: string;
+    path: string;
+    field: F;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    errors?: ValidationError[];
+    ctx?: FieldContext;
+    /** Omit the label (e.g. when the surrounding card already names the field). */
+    hideLabel?: boolean;
+}
+/** Renders a schema as a responsive grid of fields. */
+export declare function FieldSet({ schema, values, onChange, errors, filter, ctx, pathPrefix, hideLabels, }: {
+    schema: Schema;
+    values: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+    errors?: ValidationError[];
+    filter?: (key: string, field: Field) => boolean;
+    ctx?: FieldContext;
+    pathPrefix?: string;
+    /** Keys whose label should be omitted. */
+    hideLabels?: string[];
+}): import("react").JSX.Element | null;
+export declare function FieldRenderer(props: FieldProps): import("react").JSX.Element;
+export declare function FieldGroup({ title, children, }: {
+    title: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;