@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/editor/menus.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface BlockEditorBubbleMenuProps {
+    className?: string;
+    /** Extra toolbar content at the end. */
+    children?: React.ReactNode;
+}
+/**
+ * Floating toolbar on a text selection: "turn into", bold, italic, underline, strike, code,
+ * highlight, link. `role="toolbar"` with arrow-key navigation; Alt+F10 focuses it, Esc returns.
+ * ⌘/Ctrl+K opens the link editor.
+ */
+export declare function BlockEditorBubbleMenu({ className, children }: BlockEditorBubbleMenuProps): React.JSX.Element | null;
+export interface BlockEditorToolbarProps {
+    className?: string;
+    /** Show sub/superscript buttons. */
+    scripts?: boolean;
+    children?: React.ReactNode;
+}
+/** Fixed toolbar above the text (rich-text mode): marks, lists, quote, link, undo/redo. */
+export declare function BlockEditorToolbar({ className, scripts, children }: BlockEditorToolbarProps): React.JSX.Element | null;

package/dist/editor/menus.js

@@ -0,0 +1,236 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useEditorState } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { NodeSelection } from "@tiptap/pm/state";
+import { Bold, ChevronDown, Code, CornerDownLeft, ExternalLink, Highlighter, Italic, Link2, Link2Off, List, ListOrdered, Quote, Redo2, Strikethrough, Subscript, Superscript, Underline, Undo2, FileText, } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { sanitizeHref } from "../blocks/schema/safety.js";
+import { IconButtonTooltip } from "../components/tooltip.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/dropdown-menu.js";
+import { Checkbox } from "../components/checkbox.js";
+import { useBlockEditor } from "./context.js";
+import { COMPONENT_BLOCK } from "./convert.js";
+import { turnIntoItems } from "./items.js";
+// ---------------------------------------------------------------- toolbar primitives
+/** Arrow-key navigation inside a `role="toolbar"` (roving focus). Esc returns to the text. */
+function useToolbarKeys(editor) {
+    return React.useCallback((e) => {
+        const keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+        if (e.key === "Escape") {
+            e.preventDefault();
+            editor?.commands.focus();
+            return;
+        }
+        if (!keys.includes(e.key))
+            return;
+        const items = Array.from(e.currentTarget.querySelectorAll("[data-toolbar-item]:not([disabled])"));
+        if (!items.length)
+            return;
+        const i = items.indexOf(document.activeElement);
+        const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+        const fwd = rtl ? "ArrowLeft" : "ArrowRight";
+        let next = i;
+        if (e.key === "Home")
+            next = 0;
+        else if (e.key === "End")
+            next = items.length - 1;
+        else
+            next = (i + (e.key === fwd ? 1 : -1) + items.length) % items.length;
+        e.preventDefault();
+        items.forEach((el, j) => (el.tabIndex = j === next ? 0 : -1));
+        items[next].focus();
+    }, [editor]);
+}
+const ToolbarButton = React.forwardRef(function ToolbarButton({ label, shortcut, active, first, className, children, ...props }, ref) {
+    return (_jsx(IconButtonTooltip, { label: label, shortcut: shortcut, side: "top", children: _jsx("button", { ref: ref, type: "button", "data-toolbar-item": "", "aria-label": label, "aria-pressed": active === undefined ? undefined : active, tabIndex: first ? 0 : -1, 
+            // Keep the text selection: never steal focus on pointer down.
+            onMouseDown: (e) => e.preventDefault(), className: cn("vui-tb-btn focus-ring", className), ...props, children: children }) }));
+});
+const Divider = () => _jsx("span", { "aria-hidden": true, className: "vui-tb-sep" });
+function useMarkState(editor) {
+    return useEditorState({
+        editor,
+        selector: ({ editor: e }) => {
+            if (!e)
+                return null;
+            const marks = {
+                bold: e.isActive("bold"),
+                italic: e.isActive("italic"),
+                underline: e.isActive("underline"),
+                strike: e.isActive("strike"),
+                code: e.isActive("code"),
+                highlight: e.isActive("highlight"),
+                subscript: e.isActive("subscript"),
+                superscript: e.isActive("superscript"),
+                link: e.isActive("link"),
+            };
+            return {
+                ...marks,
+                bulletList: e.isActive("bulletList"),
+                orderedList: e.isActive("orderedList"),
+                blockquote: e.isActive("blockquote"),
+                inCode: e.isActive("codeBlock"),
+                canUndo: e.can().undo(),
+                canRedo: e.can().redo(),
+                turnInto: turnIntoItemsCache.find((it) => it.active(e))?.id ?? "paragraph",
+            };
+        },
+    });
+}
+// Static "turn into" predicate list (labels resolved at render time).
+const turnIntoItemsCache = turnIntoItems(((k) => k));
+const MARKS = [
+    { key: "bold", label: "bold", icon: Bold, shortcut: "mod+b", run: (e) => e.chain().focus().toggleBold().run() },
+    { key: "italic", label: "italic", icon: Italic, shortcut: "mod+i", run: (e) => e.chain().focus().toggleItalic().run() },
+    { key: "underline", label: "underline", icon: Underline, shortcut: "mod+u", run: (e) => e.chain().focus().toggleUnderline().run() },
+    { key: "strike", label: "strike", icon: Strikethrough, shortcut: "mod+shift+s", run: (e) => e.chain().focus().toggleStrike().run() },
+    { key: "code", label: "inlineCode", icon: Code, shortcut: "mod+e", run: (e) => e.chain().focus().toggleCode().run() },
+    { key: "highlight", label: "highlight", icon: Highlighter, shortcut: "mod+shift+h", run: (e) => e.chain().focus().toggleMark("highlight").run() },
+];
+const SCRIPT_MARKS = [
+    { key: "subscript", label: "subscript", icon: Subscript, shortcut: "mod+,", run: (e) => e.chain().focus().toggleMark("subscript").run() },
+    { key: "superscript", label: "superscript", icon: Superscript, shortcut: "mod+.", run: (e) => e.chain().focus().toggleMark("superscript").run() },
+];
+// ---------------------------------------------------------------- link form
+function LinkForm({ editor, onDone }) {
+    const { t, linkSearch } = useBlockEditor();
+    const current = editor.getAttributes("link");
+    const [href, setHref] = React.useState(current.href ?? "");
+    const [newTab, setNewTab] = React.useState(current.target === "_blank");
+    const [error, setError] = React.useState(false);
+    const [results, setResults] = React.useState([]);
+    const [active, setActive] = React.useState(-1);
+    const inputRef = React.useRef(null);
+    const listId = React.useId();
+    const errId = React.useId();
+    React.useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    React.useEffect(() => {
+        if (!linkSearch || !href.trim() || /^(https?:|mailto:|tel:|#)/.test(href)) {
+            setResults([]);
+            return;
+        }
+        let live = true;
+        const id = setTimeout(() => {
+            linkSearch(href.trim()).then((r) => live && (setResults(r.slice(0, 6)), setActive(-1)), () => live && setResults([]));
+        }, 150);
+        return () => {
+            live = false;
+            clearTimeout(id);
+        };
+    }, [href, linkSearch]);
+    const apply = (value = href) => {
+        const safe = sanitizeHref(value.trim());
+        if (!safe) {
+            setError(true);
+            return;
+        }
+        editor.chain().focus().extendMarkRange("link").setLink({ href: safe, target: newTab ? "_blank" : null }).run();
+        onDone();
+    };
+    const remove = () => {
+        editor.chain().focus().extendMarkRange("link").unsetLink().run();
+        onDone();
+    };
+    return (_jsxs("div", { className: "vui-link-form", role: "group", "aria-label": current.href ? t("linkEdit") : t("link"), children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Link2, { "aria-hidden": true, className: "ms-2 size-3.5 shrink-0 text-fg-subtle" }), _jsx("input", { ref: inputRef, value: href, onChange: (e) => {
+                            setHref(e.target.value);
+                            setError(false);
+                        }, placeholder: t("linkPlaceholder"), "aria-label": t("link"), "aria-invalid": error || undefined, "aria-describedby": error ? errId : undefined, role: results.length ? "combobox" : undefined, "aria-expanded": results.length ? true : undefined, "aria-controls": results.length ? listId : undefined, "aria-activedescendant": active >= 0 ? `${listId}-${active}` : undefined, onKeyDown: (e) => {
+                            if (e.key === "ArrowDown" && results.length) {
+                                e.preventDefault();
+                                setActive((a) => (a + 1) % results.length);
+                            }
+                            else if (e.key === "ArrowUp" && results.length) {
+                                e.preventDefault();
+                                setActive((a) => (a <= 0 ? results.length - 1 : a - 1));
+                            }
+                            else if (e.key === "Enter") {
+                                e.preventDefault();
+                                if (active >= 0 && results[active])
+                                    apply(results[active].href);
+                                else
+                                    apply();
+                            }
+                            else if (e.key === "Escape") {
+                                e.preventDefault();
+                                editor.commands.focus();
+                                onDone();
+                            }
+                        }, className: "vui-link-input" }), _jsx("button", { type: "button", className: "vui-tb-btn focus-ring", "aria-label": t("linkApply"), title: t("linkApply"), onClick: () => apply(), children: _jsx(CornerDownLeft, { "aria-hidden": true }) }), current.href ? (_jsx("button", { type: "button", className: "vui-tb-btn focus-ring", "aria-label": t("linkRemove"), title: t("linkRemove"), onClick: remove, children: _jsx(Link2Off, { "aria-hidden": true }) })) : null] }), error ? (_jsx("p", { id: errId, className: "px-2.5 pb-1 text-xs text-danger", children: t("linkInvalid") })) : null, results.length ? (_jsx("ul", { id: listId, role: "listbox", "aria-label": t("linkPlaceholder"), className: "vui-link-results", children: results.map((r, i) => (_jsxs("li", { id: `${listId}-${i}`, role: "option", "aria-selected": i === active, "data-active": i === active ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => apply(r.href), children: [_jsx(FileText, { "aria-hidden": true, className: "size-3.5 shrink-0 text-fg-subtle" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-fg", children: r.title }), _jsx("span", { className: "shrink-0 font-mono text-[10.5px] uppercase tracking-wide text-fg-subtle", children: r.type })] }, r.href))) })) : null, _jsx("div", { className: "px-2.5 pb-2 pt-1 text-xs text-fg-muted", children: _jsx(Checkbox, { size: "sm", checked: newTab, onCheckedChange: (v) => setNewTab(v === true), label: _jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs font-normal text-fg-muted", children: [_jsx(ExternalLink, { "aria-hidden": true, className: "size-3" }), t("linkNewTab")] }) }) })] }));
+}
+// ---------------------------------------------------------------- shared formatting row
+function TurnIntoMenu({ editor, first }) {
+    const { t } = useBlockEditor();
+    const items = React.useMemo(() => turnIntoItems(t), [t]);
+    const state = useMarkState(editor);
+    const current = items.find((i) => i.id === state?.turnInto) ?? items[0];
+    return (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-toolbar-item": "", tabIndex: first ? 0 : -1, className: "vui-tb-btn vui-tb-wide focus-ring", "aria-label": `${t("turnInto")}: ${current.label}`, onMouseDown: (e) => e.preventDefault(), children: [_jsx(current.icon, { "aria-hidden": true }), _jsx("span", { className: "max-sm:hidden", children: current.label }), _jsx(ChevronDown, { "aria-hidden": true, className: "size-3! opacity-60" })] }) }), _jsx(DropdownMenuContent, { size: "sm", onCloseAutoFocus: (e) => e.preventDefault(), children: items.map((it) => (_jsx(DropdownMenuItem, { icon: _jsx(it.icon, {}), onSelect: () => it.run(editor), "data-active": it.id === current.id ? "" : undefined, children: it.label }, it.id))) })] }));
+}
+function MarkButtons({ editor, onLink, scripts }) {
+    const { t } = useBlockEditor();
+    const state = useMarkState(editor);
+    const list = scripts ? [...MARKS, ...SCRIPT_MARKS] : MARKS;
+    return (_jsxs(_Fragment, { children: [list.map((m) => (_jsx(ToolbarButton, { label: t(m.label), shortcut: m.shortcut, active: !!state?.[m.key], disabled: state?.inCode, onClick: () => m.run(editor), children: _jsx(m.icon, { "aria-hidden": true }) }, m.key))), _jsx(ToolbarButton, { label: t("link"), shortcut: "mod+k", active: !!state?.link, disabled: state?.inCode, onClick: onLink, children: _jsx(Link2, { "aria-hidden": true }) })] }));
+}
+/**
+ * Floating toolbar on a text selection: "turn into", bold, italic, underline, strike, code,
+ * highlight, link. `role="toolbar"` with arrow-key navigation; Alt+F10 focuses it, Esc returns.
+ * ⌘/Ctrl+K opens the link editor.
+ */
+export function BlockEditorBubbleMenu({ className, children }) {
+    const { editor, t, toolbarRef, variant } = useBlockEditor();
+    const [mode, setMode] = React.useState("format");
+    const onKeyDown = useToolbarKeys(editor);
+    const elRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!editor)
+            return;
+        const dom = editor.view.dom;
+        const onKey = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && !editor.state.selection.empty) {
+                e.preventDefault();
+                setMode("link");
+            }
+        };
+        dom.addEventListener("keydown", onKey);
+        const reset = () => setMode("format");
+        editor.on("selectionUpdate", reset);
+        return () => {
+            dom.removeEventListener("keydown", onKey);
+            editor.off("selectionUpdate", reset);
+        };
+    }, [editor]);
+    if (!editor)
+        return null;
+    return (_jsx(BubbleMenu, { editor: editor, options: { placement: "top", offset: 8, flip: true, shift: { padding: 12 } }, shouldShow: ({ editor: e, state, from, to }) => {
+            if (!e.isEditable || from === to)
+                return false;
+            if (state.selection instanceof NodeSelection)
+                return false;
+            if (e.isActive("codeBlock"))
+                return false;
+            const node = state.doc.nodeAt(from);
+            if (node?.type.name === COMPONENT_BLOCK || node?.type.name === "image")
+                return false;
+            return state.doc.textBetween(from, to).length > 0;
+        }, className: "vui-bubble-host", children: _jsx("div", { ref: (el) => {
+                elRef.current = el;
+                if (variant !== "rich-text")
+                    toolbarRef.current = el;
+            }, "data-slot": "block-editor-bubble", role: mode === "format" ? "toolbar" : undefined, "aria-label": mode === "format" ? t("formatting") : undefined, onKeyDown: mode === "format" ? onKeyDown : undefined, className: cn("vui-bubble surface-popover ui-pop", className), "data-layer-depth": "1", children: mode === "link" ? (_jsx(LinkForm, { editor: editor, onDone: () => setMode("format") })) : (_jsxs("div", { className: "flex items-center gap-0.5 p-1", children: [_jsx(TurnIntoMenu, { editor: editor, first: true }), _jsx(Divider, {}), _jsx(MarkButtons, { editor: editor, onLink: () => setMode("link") }), children] })) }) }));
+}
+/** Fixed toolbar above the text (rich-text mode): marks, lists, quote, link, undo/redo. */
+export function BlockEditorToolbar({ className, scripts, children }) {
+    const { editor, t, toolbarRef, readOnly } = useBlockEditor();
+    const onKeyDown = useToolbarKeys(editor);
+    const [linkOpen, setLinkOpen] = React.useState(false);
+    const state = useMarkState(editor);
+    if (readOnly)
+        return null;
+    return (_jsx("div", { ref: (el) => {
+            toolbarRef.current = el;
+        }, "data-slot": "block-editor-toolbar", role: "toolbar", "aria-label": t("formatting"), "aria-controls": editor ? editor.view.dom.id || undefined : undefined, onKeyDown: onKeyDown, className: cn("vui-toolbar", className), children: editor ? (linkOpen ? (_jsx(LinkForm, { editor: editor, onDone: () => setLinkOpen(false) })) : (_jsxs(_Fragment, { children: [_jsx(TurnIntoMenu, { editor: editor, first: true }), _jsx(Divider, {}), _jsx(MarkButtons, { editor: editor, scripts: scripts, onLink: () => !editor.state.selection.empty && setLinkOpen(true) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: t("bulletList"), active: !!state?.bulletList, onClick: () => editor.chain().focus().toggleBulletList().run(), children: _jsx(List, { "aria-hidden": true }) }), _jsx(ToolbarButton, { label: t("orderedList"), active: !!state?.orderedList, onClick: () => editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, { "aria-hidden": true }) }), _jsx(ToolbarButton, { label: t("quote"), active: !!state?.blockquote, onClick: () => editor.chain().focus().toggleBlockquote().run(), children: _jsx(Quote, { "aria-hidden": true }) }), children, _jsx("span", { className: "ms-auto" }), _jsx(ToolbarButton, { label: t("undo"), shortcut: "mod+z", disabled: !state?.canUndo, onClick: () => editor.chain().focus().undo().run(), children: _jsx(Undo2, { "aria-hidden": true }) }), _jsx(ToolbarButton, { label: t("redo"), shortcut: "mod+shift+z", disabled: !state?.canRedo, onClick: () => editor.chain().focus().redo().run(), children: _jsx(Redo2, { "aria-hidden": true }) })] }))) : (_jsx("span", { className: "h-8" })) }));
+}

package/dist/editor/nodes.d.ts

@@ -0,0 +1,14 @@
+import { Node, type Editor } from "@tiptap/react";
+import type { BlockNode } from "../blocks/schema/types.js";
+import { type ImageUploader } from "./context.js";
+/** The BlockNode a component-block node stands for. */
+export declare function blockNodeFromAttrs(attrs: Record<string, unknown>): BlockNode;
+/** Atom node for registry blocks (`hero`, `faq`…). `attrs` mirror the BlockNode. */
+export declare const ComponentBlockNode: Node<any, any>;
+/** Inserts an uploading image node and swaps in the uploaded asset when the upload resolves. */
+export declare function uploadImageFile(editor: Editor, file: File, uploader: ImageUploader, opts?: {
+    pos?: number;
+    onError?: (e: unknown) => void;
+}): void;
+/** Block image: `figure > img + figcaption`. */
+export declare const ImageNode: Node<any, any>;

package/dist/editor/nodes.js

@@ -0,0 +1,201 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ProseMirror nodes with React views: component blocks (the site's own component, rendered
+// through the block registry) and images (figure + caption, upload states).
+import * as React from "react";
+import { Node, mergeAttributes, NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
+import { AlertTriangle, EyeOff, ImagePlus, PackageX, Upload } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { renderDoc } from "../render/block-renderer.js";
+import { validateNode } from "../blocks/schema/validate.js";
+import { sanitizeHref } from "../blocks/schema/safety.js";
+import { Button } from "../components/button.js";
+import { Spinner } from "../components/spinner.js";
+import { useBlockEditor } from "./context.js";
+import { COMPONENT_BLOCK, createBlockId } from "./convert.js";
+import { iconForBlock } from "./items.js";
+// ---------------------------------------------------------------- component block
+const COMPONENT_ATTRS = ["blockType", "v", "variant", "props", "theme", "anchor", "hidden", "schedule", "slots", "content"];
+/** The BlockNode a component-block node stands for. */
+export function blockNodeFromAttrs(attrs) {
+    const n = { id: attrs.id || "b_pending", type: String(attrs.blockType ?? "") };
+    for (const k of COMPONENT_ATTRS) {
+        if (k === "blockType")
+            continue;
+        const v = attrs[k];
+        if (v !== null && v !== undefined)
+            n[k] = v;
+    }
+    return n;
+}
+function ComponentBlockView({ node, selected }) {
+    const { registry, lang, t, readOnly } = useBlockEditor();
+    const type = String(node.attrs.blockType ?? "");
+    const def = registry.get(type);
+    const block = React.useMemo(() => blockNodeFromAttrs(node.attrs), [node.attrs]);
+    const issues = React.useMemo(() => (def ? validateNode(block, def).issues.length : 0), [block, def]);
+    const rendered = React.useMemo(() => {
+        if (!def?.component)
+            return null;
+        try {
+            return renderDoc({ version: 1, lang, blocks: [{ ...block, hidden: undefined, schedule: undefined }] }, { registry, editMode: true, locale: lang, jsonLd: false, dev: false });
+        }
+        catch {
+            return null;
+        }
+    }, [block, def, registry, lang]);
+    const Icon = def ? iconForBlock(def.icon) : PackageX;
+    const title = def?.title ?? type;
+    return (_jsxs(NodeViewWrapper, { className: "vui-cblock", "data-block-type": type, "data-selected": selected ? "" : undefined, "data-invalid": issues ? "" : undefined, "data-unknown": def ? undefined : "", "data-hidden": block.hidden ? "" : undefined, "data-readonly": readOnly ? "" : undefined, children: [_jsxs("div", { className: "vui-cblock-tag", contentEditable: false, "aria-hidden": !selected && !issues ? true : undefined, children: [_jsx(Icon, { "aria-hidden": true, className: "size-3" }), _jsx("span", { className: "truncate", children: title }), block.variant ? _jsxs("span", { className: "text-fg-subtle", children: ["\u00B7 ", block.variant] }) : null, block.hidden ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-fg-muted", children: [_jsx(EyeOff, { "aria-hidden": true, className: "size-3" }), t("hiddenBadge")] })) : null, issues ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-danger", children: [_jsx(AlertTriangle, { "aria-hidden": true, className: "size-3" }), t("invalidBlock", { count: issues })] })) : null] }), _jsx("div", { className: "vui-cblock-render", contentEditable: false, role: "group", "aria-roledescription": "block", "aria-label": title, onClickCapture: (e) => e.target.closest("a, button") && e.preventDefault(), children: def ? (rendered) : (_jsxs("div", { className: "vui-cblock-unknown", role: "note", children: [_jsx(PackageX, { "aria-hidden": true, className: "size-5 shrink-0 text-fg-subtle" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-fg", children: t("unknownBlock", { type }) }), _jsx("p", { className: "text-xs text-fg-muted", children: t("unknownBlockHint") })] })] })) })] }));
+}
+/** Atom node for registry blocks (`hero`, `faq`…). `attrs` mirror the BlockNode. */
+export const ComponentBlockNode = Node.create({
+    name: COMPONENT_BLOCK,
+    group: "block",
+    atom: true,
+    selectable: true,
+    draggable: true,
+    isolating: true,
+    addAttributes() {
+        const out = {};
+        for (const k of COMPONENT_ATTRS)
+            out[k] = { default: null, rendered: false };
+        return out;
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "div[data-vamos-block]",
+                getAttrs: (el) => {
+                    try {
+                        const data = JSON.parse(el.getAttribute("data-json") ?? "{}");
+                        return { ...data, blockType: el.getAttribute("data-vamos-block") };
+                    }
+                    catch {
+                        return false;
+                    }
+                },
+            },
+        ];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        const data = {};
+        for (const k of COMPONENT_ATTRS)
+            if (k !== "blockType" && node.attrs[k] != null)
+                data[k] = node.attrs[k];
+        return ["div", mergeAttributes(HTMLAttributes, { "data-vamos-block": node.attrs.blockType, "data-json": JSON.stringify(data) })];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(ComponentBlockView);
+    },
+});
+// ---------------------------------------------------------------- image
+/** Inserts an uploading image node and swaps in the uploaded asset when the upload resolves. */
+export function uploadImageFile(editor, file, uploader, opts = {}) {
+    const token = createBlockId();
+    const preview = typeof URL !== "undefined" && URL.createObjectURL ? URL.createObjectURL(file) : null;
+    const content = { type: "image", attrs: { src: preview, alt: "", uploading: file.name, uploadToken: token } };
+    if (opts.pos !== undefined)
+        editor.chain().insertContentAt(opts.pos, content).run();
+    else
+        editor.chain().focus().insertContent(content).run();
+    const find = () => {
+        let at = -1;
+        editor.state.doc.descendants((n, pos) => {
+            if (at >= 0)
+                return false;
+            if (n.type.name === "image" && n.attrs.uploadToken === token)
+                at = pos;
+            return undefined;
+        });
+        return at;
+    };
+    const ctrl = new AbortController();
+    uploader(file, { signal: ctrl.signal })
+        .then((res) => {
+        const pos = find();
+        if (pos < 0 || editor.isDestroyed)
+            return;
+        const node = editor.state.doc.nodeAt(pos);
+        editor.view.dispatch(editor.state.tr.setNodeMarkup(pos, undefined, { ...node.attrs, src: res.src, alt: res.alt ?? node.attrs.alt ?? "", width: res.width ?? null, height: res.height ?? null, assetId: res.assetId ?? null, uploading: null, uploadToken: null, uploadError: null }));
+    })
+        .catch((e) => {
+        const pos = find();
+        if (pos >= 0 && !editor.isDestroyed) {
+            const node = editor.state.doc.nodeAt(pos);
+            editor.view.dispatch(editor.state.tr.setNodeMarkup(pos, undefined, { ...node.attrs, src: null, uploading: null, uploadError: true }));
+        }
+        opts.onError?.(e);
+    })
+        .finally(() => {
+        if (preview)
+            URL.revokeObjectURL?.(preview);
+    });
+}
+function ImageView({ node, selected, updateAttributes, editor, getPos }) {
+    const { t, uploadImage, readOnly, announce } = useBlockEditor();
+    const [url, setUrl] = React.useState("");
+    const fileRef = React.useRef(null);
+    const src = node.attrs.src;
+    const alt = node.attrs.alt ?? "";
+    const caption = node.attrs.caption ?? "";
+    const uploading = node.attrs.uploading;
+    const missingAlt = !!src && !alt.trim() && !node.attrs.decorative && !uploading;
+    const inputId = React.useId();
+    const submitUrl = () => {
+        const safe = sanitizeHref(url.trim());
+        if (!safe)
+            return;
+        updateAttributes({ src: safe, uploadError: null });
+        setUrl("");
+    };
+    const onFile = (file) => {
+        if (!file || !uploadImage)
+            return;
+        const pos = typeof getPos === "function" ? getPos() : undefined;
+        if (typeof pos === "number") {
+            editor.chain().deleteRange({ from: pos, to: pos + node.nodeSize }).run();
+            uploadImageFile(editor, file, uploadImage, { pos, onError: () => announce(t("imageFailed")) });
+        }
+    };
+    return (_jsxs(NodeViewWrapper, { as: "figure", className: "vui-image", "data-selected": selected ? "" : undefined, "data-uploading": uploading ? "" : undefined, children: [src ? (_jsxs("div", { className: "vui-image-frame", contentEditable: false, children: [_jsx("img", { src: src, alt: node.attrs.decorative ? "" : alt, width: node.attrs.width ?? undefined, height: node.attrs.height ?? undefined, draggable: false }), uploading ? (_jsxs("div", { className: "vui-image-uploading", role: "status", children: [_jsx(Spinner, { size: "sm" }), _jsx("span", { children: t("imageUploading", { name: uploading }) })] })) : null, missingAlt && !readOnly ? (_jsxs("span", { className: "vui-image-alt-flag", children: [_jsx(AlertTriangle, { "aria-hidden": true, className: "size-3" }), t("missingAlt")] })) : null] })) : readOnly ? null : (_jsxs("div", { className: "vui-image-empty", contentEditable: false, children: [_jsx(ImagePlus, { "aria-hidden": true, className: "size-5 text-fg-subtle" }), _jsxs("div", { className: "flex w-full max-w-md flex-col gap-2 sm:flex-row", children: [_jsx("label", { htmlFor: inputId, className: "sr-only", children: t("imageUrl") }), _jsx("input", { id: inputId, type: "url", inputMode: "url", value: url, placeholder: t("imageUrlPlaceholder"), onChange: (e) => setUrl(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === "Enter") {
+                                        e.preventDefault();
+                                        submitUrl();
+                                    }
+                                }, className: "vui-image-url" }), _jsxs("div", { className: "flex shrink-0 gap-2", children: [_jsx(Button, { size: "sm", variant: "secondary", onClick: submitUrl, disabled: !url.trim(), children: t("imageAdd") }), uploadImage ? (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", variant: "ghost", onClick: () => fileRef.current?.click(), children: [_jsx(Upload, { "aria-hidden": true }), t("imageUpload")] }), _jsx("input", { ref: fileRef, type: "file", accept: "image/*", hidden: true, tabIndex: -1, onChange: (e) => onFile(e.target.files?.[0]) })] })) : null] })] }), node.attrs.uploadError ? (_jsx("p", { className: "text-xs text-danger", role: "alert", children: t("imageFailed") })) : null] })), src ? (readOnly ? (caption ? _jsx("figcaption", { children: caption }) : null) : (_jsx("figcaption", { contentEditable: false, children: _jsx("input", { "aria-label": t("caption"), value: caption, placeholder: t("captionPlaceholder"), onChange: (e) => updateAttributes({ caption: e.target.value || null }), className: cn("vui-image-caption", !caption && "is-empty") }) }))) : null] }));
+}
+/** Block image: `figure > img + figcaption`. */
+export const ImageNode = Node.create({
+    name: "image",
+    group: "block",
+    atom: true,
+    selectable: true,
+    draggable: true,
+    addAttributes() {
+        const plain = (d = null) => ({ default: d, rendered: false });
+        return {
+            src: { default: null, parseHTML: (el) => (el.tagName === "IMG" ? el : el.querySelector("img"))?.getAttribute("src") ?? null, rendered: false },
+            alt: { default: null, parseHTML: (el) => (el.tagName === "IMG" ? el : el.querySelector("img"))?.getAttribute("alt") ?? null, rendered: false },
+            caption: { default: null, parseHTML: (el) => el.querySelector?.("figcaption")?.textContent ?? null, rendered: false },
+            width: plain(),
+            height: plain(),
+            focal: plain(),
+            assetId: plain(),
+            decorative: plain(),
+            uploading: plain(),
+            uploadToken: plain(),
+            uploadError: plain(),
+        };
+    },
+    parseHTML() {
+        return [{ tag: "figure", getAttrs: (el) => (el.querySelector("img") ? null : false) }, { tag: "img[src]" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        const img = ["img", { src: node.attrs.src, alt: node.attrs.alt ?? "" }];
+        return node.attrs.caption ? ["figure", HTMLAttributes, img, ["figcaption", {}, node.attrs.caption]] : ["figure", HTMLAttributes, img];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(ImageView);
+    },
+});

package/dist/editor/outline.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface BlockEditorOutlineProps {
+    className?: string;
+    /** Show the word count and reading time row. Default true. */
+    stats?: boolean;
+}
+/**
+ * Headings outline with word count, reading time and structure warnings (skipped levels,
+ * several H1s, images without alt text). Clicking a heading moves the cursor there.
+ */
+export declare function BlockEditorOutline({ className, stats }: BlockEditorOutlineProps): React.JSX.Element;

package/dist/editor/outline.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditorState } from "@tiptap/react";
+import { TextSelection } from "@tiptap/pm/state";
+import { AlertTriangle } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useBlockEditor } from "./context.js";
+import { countWords } from "./convert.js";
+/**
+ * Headings outline with word count, reading time and structure warnings (skipped levels,
+ * several H1s, images without alt text). Clicking a heading moves the cursor there.
+ */
+export function BlockEditorOutline({ className, stats = true }) {
+    const { editor, t, lang } = useBlockEditor();
+    const data = useEditorState({
+        editor,
+        selector: ({ editor: e }) => {
+            if (!e)
+                return null;
+            const headings = [];
+            let missingAlt = 0;
+            let h1 = 0;
+            let prev = 0;
+            e.state.doc.descendants((n, pos) => {
+                if (n.type.name === "heading") {
+                    const level = Number(n.attrs.level) || 2;
+                    if (level === 1)
+                        h1++;
+                    const warning = prev && level > prev + 1 ? t("skippedLevel", { from: prev, to: level }) : level === 1 && h1 > 1 ? t("multipleH1") : undefined;
+                    headings.push({ pos, level, text: n.textContent.trim(), warning });
+                    prev = level;
+                    return false;
+                }
+                if (n.type.name === "image" && n.attrs.src && !n.attrs.decorative && !String(n.attrs.alt ?? "").trim())
+                    missingAlt++;
+                return undefined;
+            });
+            return { headings, words: countWords(e.state.doc.textBetween(0, e.state.doc.content.size, "\n", " "), lang), missingAlt, h1 };
+        },
+        equalityFn: (a, b) => JSON.stringify(a) === JSON.stringify(b),
+    });
+    const go = (pos) => {
+        if (!editor)
+            return;
+        const tr = editor.state.tr.setSelection(TextSelection.near(editor.state.doc.resolve(pos + 1))).scrollIntoView();
+        editor.view.dispatch(tr);
+        editor.view.focus();
+    };
+    const minutes = data && data.words ? Math.max(1, Math.ceil(data.words / 230)) : 0;
+    const minLevel = data?.headings.reduce((m, h) => Math.min(m, h.level), 6) ?? 1;
+    return (_jsxs("nav", { "data-slot": "block-editor-outline", "aria-label": t("outline"), className: cn("vui-outline", className), children: [stats ? (_jsxs("p", { className: "vui-outline-stats", children: [_jsx("span", { children: t("words", { count: data?.words ?? 0 }) }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: t("readingTime", { count: minutes }) })] })) : null, data?.headings.length ? (_jsx("ol", { className: "vui-outline-list", children: data.headings.map((h) => (_jsxs("li", { style: { paddingInlineStart: `${(h.level - minLevel) * 0.85}rem` }, children: [_jsxs("button", { type: "button", className: "vui-outline-item focus-ring", onClick: () => go(h.pos), "data-level": h.level, children: [_jsxs("span", { className: "vui-outline-level", "aria-hidden": true, children: ["H", h.level] }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: h.text || _jsx("em", { className: "text-fg-subtle", children: t("empty") }) })] }), h.warning ? (_jsxs("p", { className: "vui-outline-warn", children: [_jsx(AlertTriangle, { "aria-hidden": true, className: "size-3 shrink-0" }), h.warning] })) : null] }, h.pos))) })) : (_jsx("p", { className: "text-xs text-fg-muted", children: t("outlineEmpty") })), data?.missingAlt ? (_jsxs("p", { className: "vui-outline-warn mt-2", children: [_jsx(AlertTriangle, { "aria-hidden": true, className: "size-3 shrink-0" }), t("imagesWithoutAlt", { count: data.missingAlt })] })) : null] }));
+}

package/dist/editor/schema-form.d.ts

@@ -0,0 +1,64 @@
+import * as React from "react";
+import type { z } from "zod";
+import { type FieldMeta } from "../blocks/schema/fields.js";
+import { type BlockEditorLabels } from "./labels.js";
+/** Per-prop hints (overrides `f.*` metadata). */
+export interface SchemaFieldHint {
+    widget?: string;
+    label?: string;
+    help?: string;
+    placeholder?: string;
+    /** Section: "content" (default), "style" or "advanced". */
+    group?: string;
+    hidden?: boolean;
+    /** Show only when this returns true for the current value. */
+    when?: (value: Record<string, unknown>) => boolean;
+}
+export type SchemaFieldHints = Record<string, SchemaFieldHint | undefined>;
+export interface WidgetProps {
+    id: string;
+    value: unknown;
+    onChange: (v: unknown) => void;
+    schema: z.ZodType;
+    meta?: FieldMeta;
+    label: string;
+    placeholder?: string;
+    invalid: boolean;
+    disabled?: boolean;
+    /** Content locale for localized fields (already resolved: `value` is the plain value). */
+    locale: string;
+}
+export type WidgetComponent = React.ComponentType<WidgetProps>;
+export interface SchemaFormIssue {
+    path: PropertyKey[];
+    message: string;
+}
+export interface SchemaFormProps<S extends z.ZodObject = z.ZodObject> {
+    schema: S;
+    value: Record<string, unknown>;
+    onChange: (value: Record<string, unknown>) => void;
+    fields?: SchemaFieldHints;
+    /** Custom widgets by name (`fields.x.widget` or `f.*({ widget })`). */
+    widgets?: Record<string, WidgetComponent>;
+    /** Validation issues to show under the fields (`zodError.issues`). */
+    errors?: readonly SchemaFormIssue[] | z.ZodError | null;
+    /** `"sidebar"` (default): compact stacked fields · `"dialog"`: roomier two-column groups. */
+    layout?: "sidebar" | "dialog";
+    /** The block's variant: hides fields declared for other variants. */
+    variant?: string;
+    /** Locale edited in `Localized<T>` values. Default "en". */
+    locale?: string;
+    disabled?: boolean;
+    labels?: Partial<BlockEditorLabels>;
+    className?: string;
+}
+/**
+ * A form generated from a zod object schema. Widgets come from `f.*` metadata (heading, rich,
+ * image, list…), the zod type, or a hint (`fields.title.widget = "textarea"`). Localized fields
+ * edit the `locale` entry. Arrays are sortable lists with add / remove / move (keyboard only).
+ *
+ * ```tsx
+ * <SchemaForm schema={faqBlock.schema} value={props} onChange={setProps} errors={result.error} locale="en" />
+ * ```
+ */
+export declare function SchemaForm<S extends z.ZodObject>({ schema, value, onChange, fields, widgets, errors, layout, variant, locale, disabled, labels, className }: SchemaFormProps<S>): React.JSX.Element;