@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/editor/convert.js

@@ -0,0 +1,567 @@
+// VamosDoc <-> ProseMirror JSON. Pure functions, no Tiptap runtime: usable on the server
+// (imports, AI drafts, tests) and by the editor. The storage format is frozen in
+// docs/plan/BLOCK-FORMAT.md; this file is the "editor mapping" described there.
+import { migrateDoc } from "../blocks/schema/migrate.js";
+import { inlineToText, isBreak, countWords as countWordsRegex } from "../blocks/schema/rich-doc.js";
+/** ProseMirror node name of component blocks (hero, pricing, FAQ…). */
+export const COMPONENT_BLOCK = "vamosBlock";
+/** Block types the editor edits as native text (everything else is a component block). */
+export const EDITOR_TEXT_TYPES = ["paragraph", "heading", "list", "list-item", "quote", "code", "divider", "image", "table", "table-row", "table-cell"];
+export const isEditorTextType = (t) => EDITOR_TEXT_TYPES.includes(t);
+// ---------------------------------------------------------------- ids
+const ID_ALPHABET = "0123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
+const ID_RE = /^[A-Za-z0-9_-]{4,64}$/;
+/** A new stable block id (`b_` + 8 random characters). */
+export function createBlockId() {
+    const bytes = new Uint8Array(8);
+    const c = globalThis.crypto;
+    if (c?.getRandomValues)
+        c.getRandomValues(bytes);
+    else
+        for (let i = 0; i < bytes.length; i++)
+            bytes[i] = Math.floor(Math.random() * 256);
+    let out = "b_";
+    for (const b of bytes)
+        out += ID_ALPHABET[b % ID_ALPHABET.length];
+    return out;
+}
+export const isValidBlockId = (id) => typeof id === "string" && ID_RE.test(id);
+// ---------------------------------------------------------------- marks
+const MARK_TO_PM = { bold: "bold", italic: "italic", underline: "underline", strike: "strike", code: "code", highlight: "highlight", sub: "subscript", sup: "superscript", link: "link" };
+const MARK_FROM_PM = { bold: "bold", italic: "italic", underline: "underline", strike: "strike", code: "code", highlight: "highlight", subscript: "sub", superscript: "sup", link: "link" };
+/** Canonical nesting order (BLOCK-FORMAT §3). */
+const MARK_ORDER = ["link", "bold", "italic", "underline", "strike", "highlight", "code", "sub", "sup"];
+function markToPM(m) {
+    const type = MARK_TO_PM[m.type];
+    if (!type)
+        return null;
+    if (m.type === "link")
+        return { type, attrs: { href: m.href, target: m.newTab ? "_blank" : null, title: m.title ?? null } };
+    return { type };
+}
+function markFromPM(m) {
+    const type = MARK_FROM_PM[m.type];
+    if (!type)
+        return null;
+    if (type === "link") {
+        const href = typeof m.attrs?.href === "string" ? m.attrs.href : "";
+        if (!href)
+            return null;
+        const out = { type: "link", href };
+        if (m.attrs?.target === "_blank")
+            out.newTab = true;
+        if (typeof m.attrs?.title === "string" && m.attrs.title)
+            out.title = m.attrs.title;
+        return out;
+    }
+    return { type };
+}
+const sortMarks = (marks) => [...marks].sort((a, b) => MARK_ORDER.indexOf(a.type) - MARK_ORDER.indexOf(b.type));
+const marksKey = (marks) => (marks?.length ? JSON.stringify(sortMarks(marks)) : "");
+/** Inline runs → ProseMirror inline nodes (`br` → hardBreak, stray `\n` tolerated). */
+export function inlineToPM(content) {
+    const out = [];
+    for (const run of content ?? []) {
+        if (isBreak(run)) {
+            out.push({ type: "hardBreak" });
+            continue;
+        }
+        const marks = (run.marks ?? []).map(markToPM).filter((m) => !!m);
+        run.text.split("\n").forEach((part, i) => {
+            if (i > 0)
+                out.push({ type: "hardBreak" });
+            if (part)
+                out.push(marks.length ? { type: "text", text: part, marks } : { type: "text", text: part });
+        });
+    }
+    return out;
+}
+/** ProseMirror inline nodes → inline runs (adjacent runs with equal marks merged). */
+export function inlineFromPM(nodes) {
+    const out = [];
+    for (const n of nodes ?? []) {
+        if (n.type === "hardBreak") {
+            out.push({ type: "br" });
+            continue;
+        }
+        if (n.type !== "text" || !n.text)
+            continue;
+        const marks = sortMarks((n.marks ?? []).map((m) => markFromPM(m)).filter((m) => !!m));
+        const prev = out[out.length - 1];
+        if (prev && !isBreak(prev) && marksKey(prev.marks) === marksKey(marks)) {
+            prev.text += n.text;
+            continue;
+        }
+        out.push(marks.length ? { text: n.text, marks } : { text: n.text });
+    }
+    return out;
+}
+function extraOf(b, skipAnchor = false) {
+    const e = {};
+    if (b.hidden)
+        e.hidden = true;
+    if (b.theme)
+        e.theme = b.theme;
+    if (b.schedule)
+        e.schedule = b.schedule;
+    if (b.variant)
+        e.variant = b.variant;
+    if (b.anchor && !skipAnchor)
+        e.anchor = b.anchor;
+    return Object.keys(e).length ? e : null;
+}
+function applyExtra(node, extra) {
+    if (!extra || typeof extra !== "object")
+        return node;
+    const e = extra;
+    return {
+        ...node,
+        ...(e.variant ? { variant: e.variant } : null),
+        ...(e.theme ? { theme: e.theme } : null),
+        ...(e.anchor && !node.anchor ? { anchor: e.anchor } : null),
+        ...(e.hidden ? { hidden: true } : null),
+        ...(e.schedule ? { schedule: e.schedule } : null),
+    };
+}
+const para = (content, id) => {
+    const inner = inlineToPM(content);
+    return { type: "paragraph", attrs: { id: id ?? null }, ...(inner.length ? { content: inner } : null) };
+};
+function listItemToPM(item) {
+    const kids = item.slots?.items ?? [];
+    const content = [];
+    let rest = kids;
+    if (item.content !== undefined || !kids.length || kids[0].type !== "paragraph")
+        content.push(para(item.content));
+    else {
+        content.push(para(kids[0].content, kids[0].id));
+        rest = kids.slice(1);
+    }
+    for (const k of rest)
+        content.push(...blockToPM(k));
+    return { type: "listItem", attrs: { id: item.id }, content };
+}
+function cellToPM(cell) {
+    const p = (cell.props ?? {});
+    const paragraphs = cell.slots?.items?.length ? cell.slots.items.flatMap(blockToPM) : [para(cell.content)];
+    return {
+        type: p.header ? "tableHeader" : "tableCell",
+        attrs: { id: cell.id, colspan: p.colspan ?? 1, rowspan: p.rowspan ?? 1, colwidth: null },
+        content: paragraphs.length ? paragraphs : [para(undefined)],
+    };
+}
+function blockToPM(b) {
+    const p = (b.props ?? {});
+    const extra = extraOf(b, b.type === "heading");
+    const base = { id: b.id, extra };
+    switch (b.type) {
+        case "paragraph": {
+            const inner = inlineToPM(b.content);
+            return [{ type: "paragraph", attrs: base, ...(inner.length ? { content: inner } : null) }];
+        }
+        case "heading": {
+            const inner = inlineToPM(b.content);
+            const level = Math.min(6, Math.max(1, Number(p.level) || 2));
+            return [{ type: "heading", attrs: { ...base, level, anchor: b.anchor ?? null }, ...(inner.length ? { content: inner } : null) }];
+        }
+        case "list": {
+            const items = (b.slots?.items ?? []).map((it) => (it.type === "list-item" ? it : { id: createBlockId(), type: "list-item", slots: { items: [it] } }));
+            const content = items.length ? items.map(listItemToPM) : [{ type: "listItem", attrs: { id: null }, content: [para(undefined)] }];
+            return p.ordered
+                ? [{ type: "orderedList", attrs: { ...base, start: typeof p.start === "number" ? p.start : 1 }, content }]
+                : [{ type: "bulletList", attrs: base, content }];
+        }
+        case "list-item":
+            // A list item outside a list: wrap it.
+            return [{ type: "bulletList", attrs: { id: createBlockId(), extra: null }, content: [listItemToPM(b)] }];
+        case "quote": {
+            const content = [];
+            if (b.content?.length)
+                content.push(para(b.content));
+            for (const k of b.slots?.items ?? [])
+                content.push(...blockToPM(k));
+            if (!content.length)
+                content.push(para(undefined));
+            return [{ type: "blockquote", attrs: { ...base, cite: typeof p.cite === "string" ? p.cite : null }, content }];
+        }
+        case "code": {
+            const text = inlineToText(b.content);
+            return [{ type: "codeBlock", attrs: { ...base, language: typeof p.language === "string" ? p.language : null }, ...(text ? { content: [{ type: "text", text }] } : null) }];
+        }
+        case "divider":
+            return [{ type: "horizontalRule", attrs: base }];
+        case "image": {
+            const ip = p;
+            return [
+                {
+                    type: "image",
+                    attrs: {
+                        ...base,
+                        src: ip.src ?? null,
+                        alt: ip.alt ?? null,
+                        width: ip.width ?? null,
+                        height: ip.height ?? null,
+                        caption: ip.caption ?? null,
+                        focal: ip.focal ?? null,
+                        assetId: ip.assetId ?? null,
+                        decorative: ip.decorative ?? null,
+                    },
+                },
+            ];
+        }
+        case "table": {
+            const rows = (b.slots?.items ?? []).map((row) => ({ type: "tableRow", attrs: { id: row.id }, content: (row.slots?.items ?? []).map(cellToPM) })).filter((r) => r.content.length);
+            if (!rows.length)
+                return [];
+            return [{ type: "table", attrs: base, content: rows }];
+        }
+        default:
+            return [componentToPM(b)];
+    }
+}
+function componentToPM(b) {
+    return {
+        type: COMPONENT_BLOCK,
+        attrs: {
+            id: b.id,
+            blockType: b.type,
+            v: b.v ?? null,
+            variant: b.variant ?? null,
+            props: b.props ?? null,
+            theme: b.theme ?? null,
+            anchor: b.anchor ?? null,
+            hidden: b.hidden ?? null,
+            schedule: b.schedule ?? null,
+            slots: b.slots ?? null,
+            content: b.content ?? null,
+        },
+    };
+}
+/**
+ * A VamosDoc as a ProseMirror document. With a `registry`, the doc and every component block are
+ * first migrated to their current version, so the editor always works on current props.
+ * Unknown block types become component blocks too: their data is carried untouched.
+ */
+export function toProseMirror(doc, registry) {
+    const d = doc ? migrateDoc(doc, registry) : { version: 1, blocks: [] };
+    const content = d.blocks.flatMap(blockToPM);
+    return { type: "doc", content: content.length ? content : [{ type: "paragraph", attrs: { id: null } }] };
+}
+function takeId(ctx, raw) {
+    let id = isValidBlockId(raw) ? raw : createBlockId();
+    while (ctx.seen.has(id))
+        id = createBlockId();
+    ctx.seen.add(id);
+    return id;
+}
+const attrs = (n) => (n.attrs ?? {});
+const compact = (o) => {
+    const r = {};
+    for (const [k, v] of Object.entries(o))
+        if (v !== undefined && v !== null)
+            r[k] = v;
+    return r;
+};
+function listItemFromPM(n, ctx) {
+    const id = takeId(ctx, attrs(n).id);
+    const kids = n.content ?? [];
+    const first = kids[0];
+    const node = { id, type: "list-item" };
+    let rest = kids;
+    if (first?.type === "paragraph") {
+        node.content = inlineFromPM(first.content);
+        rest = kids.slice(1);
+    }
+    else
+        node.content = [];
+    const nested = rest.flatMap((k) => blockFromPM(k, ctx));
+    if (nested.length)
+        node.slots = { items: nested };
+    return node;
+}
+function cellFromPM(n, ctx) {
+    const a = attrs(n);
+    const props = compact({
+        header: n.type === "tableHeader" ? true : undefined,
+        colspan: typeof a.colspan === "number" && a.colspan > 1 ? a.colspan : undefined,
+        rowspan: typeof a.rowspan === "number" && a.rowspan > 1 ? a.rowspan : undefined,
+    });
+    const paragraphs = (n.content ?? []).filter((k) => k.type === "paragraph");
+    const node = { id: takeId(ctx, a.id), type: "table-cell" };
+    if (Object.keys(props).length)
+        node.props = props;
+    // Several paragraphs in one cell are joined with line breaks (cells hold inline runs).
+    node.content = paragraphs.flatMap((pp, i) => (i === 0 ? inlineFromPM(pp.content) : [{ type: "br" }, ...inlineFromPM(pp.content)]));
+    return node;
+}
+function blockFromPM(n, ctx) {
+    const a = attrs(n);
+    const finish = (node) => [applyExtra(node, a.extra)];
+    switch (n.type) {
+        case "paragraph":
+            return finish({ id: takeId(ctx, a.id), type: "paragraph", content: inlineFromPM(n.content) });
+        case "heading": {
+            const node = { id: takeId(ctx, a.id), type: "heading", props: { level: Number(a.level) || 2 }, content: inlineFromPM(n.content) };
+            if (typeof a.anchor === "string" && /^[a-z0-9-]+$/.test(a.anchor))
+                node.anchor = a.anchor;
+            return finish(node);
+        }
+        case "bulletList":
+        case "orderedList": {
+            const ordered = n.type === "orderedList";
+            const props = ordered ? { ordered: true } : {};
+            if (ordered && typeof a.start === "number" && a.start !== 1)
+                props.start = a.start;
+            const node = { id: takeId(ctx, a.id), type: "list", slots: { items: (n.content ?? []).filter((k) => k.type === "listItem").map((k) => listItemFromPM(k, ctx)) } };
+            if (Object.keys(props).length)
+                node.props = props;
+            return finish(node);
+        }
+        case "blockquote": {
+            const kids = n.content ?? [];
+            const node = { id: takeId(ctx, a.id), type: "quote" };
+            if (kids.length === 1 && kids[0].type === "paragraph")
+                node.content = inlineFromPM(kids[0].content);
+            else
+                node.slots = { items: kids.flatMap((k) => blockFromPM(k, ctx)) };
+            if (typeof a.cite === "string" && a.cite)
+                node.props = { cite: a.cite };
+            return finish(node);
+        }
+        case "codeBlock": {
+            const text = (n.content ?? []).map((t) => t.text ?? "").join("");
+            const lines = text.split("\n");
+            const content = lines.flatMap((l, i) => {
+                const parts = i > 0 ? [{ type: "br" }] : [];
+                if (l)
+                    parts.push({ text: l });
+                return parts;
+            });
+            const node = { id: takeId(ctx, a.id), type: "code", content: text ? content : [] };
+            if (typeof a.language === "string" && a.language)
+                node.props = { language: a.language };
+            return finish(node);
+        }
+        case "horizontalRule":
+            return finish({ id: takeId(ctx, a.id), type: "divider" });
+        case "image": {
+            if (typeof a.src !== "string" || !a.src || a.uploading)
+                return [];
+            const props = compact({
+                src: a.src,
+                alt: typeof a.alt === "string" ? a.alt : undefined,
+                width: typeof a.width === "number" ? a.width : undefined,
+                height: typeof a.height === "number" ? a.height : undefined,
+                caption: typeof a.caption === "string" && a.caption ? a.caption : undefined,
+                focal: a.focal ?? undefined,
+                assetId: typeof a.assetId === "string" ? a.assetId : undefined,
+                decorative: a.decorative === true ? true : undefined,
+            });
+            return finish({ id: takeId(ctx, a.id), type: "image", props: props });
+        }
+        case "table": {
+            const rows = (n.content ?? []).filter((r) => r.type === "tableRow").map((r) => ({ id: takeId(ctx, attrs(r).id), type: "table-row", slots: { items: (r.content ?? []).map((c) => cellFromPM(c, ctx)) } }));
+            return finish({ id: takeId(ctx, a.id), type: "table", slots: { items: rows } });
+        }
+        case COMPONENT_BLOCK: {
+            const type = typeof a.blockType === "string" ? a.blockType : "";
+            if (!type)
+                return [];
+            const node = compact({
+                id: takeId(ctx, a.id),
+                type,
+                v: typeof a.v === "number" ? a.v : undefined,
+                variant: typeof a.variant === "string" ? a.variant : undefined,
+                props: a.props ?? undefined,
+                content: a.content ?? undefined,
+                slots: a.slots ?? undefined,
+                theme: a.theme ?? undefined,
+                anchor: typeof a.anchor === "string" ? a.anchor : undefined,
+                hidden: a.hidden === true ? true : undefined,
+                schedule: a.schedule ?? undefined,
+            });
+            return [node];
+        }
+        default:
+            return [];
+    }
+}
+/** A ProseMirror document (JSON) as a VamosDoc. Missing or duplicate ids are replaced. */
+export function fromProseMirror(json, opts = {}) {
+    const ctx = { seen: new Set() };
+    let blocks = (json.content ?? []).flatMap((n) => blockFromPM(n, ctx));
+    // Trailing empty paragraphs are an editing artifact (the caret line after a page block).
+    const isBlank = (b) => b.type === "paragraph" && !b.content?.length && !b.hidden && !b.theme && !b.anchor;
+    while (blocks.length && isBlank(blocks[blocks.length - 1]))
+        blocks = blocks.slice(0, -1);
+    const { blocks: _b, meta: _m, ...rest } = (opts.base ?? {});
+    const doc = { ...rest, version: 1, blocks };
+    if (opts.meta !== false)
+        doc.meta = computeDocMeta(doc, opts.lang ?? rest.lang ?? "en");
+    return doc;
+}
+// ---------------------------------------------------------------- meta
+const segmenters = new Map();
+/** Word count with `Intl.Segmenter(lang, { granularity: "word" })` (regex fallback). */
+export function countWords(text, lang = "en") {
+    if (!text.trim())
+        return 0;
+    let seg = segmenters.get(lang);
+    if (seg === undefined) {
+        try {
+            seg = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(lang, { granularity: "word" }) : null;
+        }
+        catch {
+            seg = null;
+        }
+        segmenters.set(lang, seg);
+    }
+    if (!seg)
+        return countWordsRegex(text);
+    let n = 0;
+    for (const s of seg.segment(text))
+        if (s.isWordLike)
+            n++;
+    return n;
+}
+function nodeText(b) {
+    const own = b.content ? inlineToText(b.content) : "";
+    const kids = Object.values(b.slots ?? {})
+        .flat()
+        .map(nodeText)
+        .filter(Boolean);
+    const caption = b.type === "image" && typeof b.props?.caption === "string" ? b.props.caption : "";
+    return [own, caption, ...kids].filter(Boolean).join("\n");
+}
+/** Plain text of the editable text in a doc (component block props are not included). */
+export function docToPlainText(doc) {
+    return doc.blocks.map(nodeText).filter(Boolean).join("\n\n");
+}
+/** Derived doc meta: word count, reading time (230 wpm, min 1) and the heading outline. */
+export function computeDocMeta(doc, lang = "en") {
+    const wordCount = countWords(docToPlainText(doc), lang);
+    const toc = doc.blocks
+        .filter((b) => b.type === "heading")
+        .map((b) => ({ id: b.id, level: Number(b.props?.level) || 2, text: inlineToText(b.content).replace(/\n/g, " ").trim() }))
+        .filter((h) => h.text);
+    return { wordCount, readingTime: wordCount ? Math.max(1, Math.ceil(wordCount / 230)) : 0, toc };
+}
+/** JSON with sorted object keys: equal content compares equal regardless of key order. */
+export function stableStringify(v) {
+    return JSON.stringify(v, (_k, val) => val && typeof val === "object" && !Array.isArray(val) ? Object.fromEntries(Object.keys(val).sort().map((k) => [k, val[k]])) : val);
+}
+/** Ids of top-level blocks that were added, removed or changed between two docs. */
+export function changedBlockIds(prev, next) {
+    const before = new Map((prev?.blocks ?? []).map((b) => [b.id, stableStringify(b)]));
+    const out = [];
+    const seen = new Set();
+    for (const b of next.blocks) {
+        seen.add(b.id);
+        if (before.get(b.id) !== stableStringify(b))
+            out.push(b.id);
+    }
+    for (const id of before.keys())
+        if (!seen.has(id))
+            out.push(id);
+    return out;
+}
+// ---------------------------------------------------------------- RichDoc (f.rich fields)
+function richBlockToPM(b) {
+    switch (b.type) {
+        case "paragraph":
+            return [para(b.content)];
+        case "heading": {
+            const inner = inlineToPM(b.content);
+            return [{ type: "heading", attrs: { level: b.level, anchor: b.anchor ?? null }, ...(inner.length ? { content: inner } : null) }];
+        }
+        case "list": {
+            const items = b.items.map((it) => {
+                const content = it.content.flatMap(richBlockToPM);
+                if (!content.length || content[0].type !== "paragraph")
+                    content.unshift(para(undefined));
+                return { type: "listItem", content };
+            });
+            if (!items.length)
+                return [];
+            return [b.ordered ? { type: "orderedList", attrs: { start: b.start ?? 1 }, content: items } : { type: "bulletList", content: items }];
+        }
+        case "blockquote": {
+            const content = b.content.flatMap(richBlockToPM);
+            return [{ type: "blockquote", attrs: { cite: b.cite ?? null }, content: content.length ? content : [para(undefined)] }];
+        }
+        case "code":
+            return [{ type: "codeBlock", attrs: { language: b.language ?? null }, ...(b.text ? { content: [{ type: "text", text: b.text }] } : null) }];
+        case "hr":
+            return [{ type: "horizontalRule" }];
+    }
+}
+/** A RichDoc (the value of an `f.rich()` field) as a ProseMirror document. */
+export function richDocToProseMirror(doc) {
+    const content = (doc?.content ?? []).flatMap(richBlockToPM);
+    return { type: "doc", content: content.length ? content : [{ type: "paragraph" }] };
+}
+function richBlockFromPM(n, minHeading = 2) {
+    const a = attrs(n);
+    switch (n.type) {
+        case "paragraph":
+            return [{ type: "paragraph", content: inlineFromPM(n.content) }];
+        case "heading": {
+            const level = Math.min(4, Math.max(minHeading, Number(a.level) || 2));
+            const h = { type: "heading", level, content: inlineFromPM(n.content) };
+            if (typeof a.anchor === "string" && a.anchor)
+                h.anchor = a.anchor;
+            return [h];
+        }
+        case "bulletList":
+        case "orderedList": {
+            const items = (n.content ?? []).map((li) => ({ content: (li.content ?? []).flatMap((k) => richBlockFromPM(k, minHeading)) }));
+            const l = { type: "list", items };
+            if (n.type === "orderedList") {
+                l.ordered = true;
+                if (typeof a.start === "number" && a.start !== 1)
+                    l.start = a.start;
+            }
+            return [l];
+        }
+        case "blockquote": {
+            const q = { type: "blockquote", content: (n.content ?? []).flatMap((k) => richBlockFromPM(k, minHeading)) };
+            if (typeof a.cite === "string" && a.cite)
+                q.cite = a.cite;
+            return [q];
+        }
+        case "codeBlock": {
+            const c = { type: "code", text: (n.content ?? []).map((t) => t.text ?? "").join("") };
+            if (typeof a.language === "string" && a.language)
+                c.language = a.language;
+            return [c];
+        }
+        case "horizontalRule":
+            return [{ type: "hr" }];
+        default:
+            return [];
+    }
+}
+/** A ProseMirror document as a RichDoc. Headings are clamped to h2–h4 (rich fields never hold h1). */
+export function proseMirrorToRichDoc(json) {
+    let content = (json.content ?? []).flatMap((n) => richBlockFromPM(n));
+    if (content.length === 1 && content[0].type === "paragraph" && !content[0].content?.length)
+        content = [];
+    return { type: "doc", content };
+}
+/** True when a RichDoc has no text at all. */
+export function isRichDocEmpty(doc) {
+    if (!doc)
+        return true;
+    const visit = (blocks) => blocks.every((b) => {
+        if (b.type === "paragraph" || b.type === "heading")
+            return !inlineToText(b.content).trim();
+        if (b.type === "code")
+            return !b.text.trim();
+        if (b.type === "hr")
+            return false;
+        if (b.type === "blockquote")
+            return visit(b.content);
+        return b.items.every((it) => visit(it.content));
+    });
+    return visit(doc.content);
+}

package/dist/editor/drag-handle.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface BlockEditorDragHandleProps {
+    className?: string;
+}
+/**
+ * The gutter handle beside the hovered block: "+" inserts below, the grip drags (drop line in
+ * `--accent`) and opens the block menu — duplicate, move up/down, turn into, copy link, hide,
+ * delete. Every drag action has a menu and keyboard twin (WCAG 2.5.7).
+ */
+export declare function BlockEditorDragHandle({ className }: BlockEditorDragHandleProps): React.JSX.Element | null;

package/dist/editor/drag-handle.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import DragHandle from "@tiptap/extension-drag-handle-react";
+import { ArrowDown, ArrowUp, Copy, Eye, EyeOff, GripVertical, Link as LinkIcon, Plus, Repeat2, Trash2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { slugify } from "../lib/text.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../components/dropdown-menu.js";
+import { useBlockEditor } from "./context.js";
+import { COMPONENT_BLOCK } from "./convert.js";
+import { deleteBlock, duplicateBlock, moveBlock, setNodeAttrs, selectBlock } from "./commands.js";
+import { blockTitle, turnIntoItems } from "./items.js";
+/**
+ * The gutter handle beside the hovered block: "+" inserts below, the grip drags (drop line in
+ * `--accent`) and opens the block menu — duplicate, move up/down, turn into, copy link, hide,
+ * delete. Every drag action has a menu and keyboard twin (WCAG 2.5.7).
+ */
+export function BlockEditorDragHandle({ className }) {
+    const { editor, t, registry, openInserter, announce, lang } = useBlockEditor();
+    const [target, setTarget] = React.useState(null);
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const turnInto = React.useMemo(() => turnIntoItems(t), [t]);
+    const lock = React.useCallback((on) => {
+        const cmds = editor?.commands;
+        if (on)
+            cmds?.lockDragHandle?.();
+        else
+            cmds?.unlockDragHandle?.();
+    }, [editor]);
+    if (!editor)
+        return null;
+    const node = target?.node;
+    const title = node ? blockTitle(node, registry, t) : "";
+    const isComponent = node?.type.name === COMPONENT_BLOCK;
+    const textBlock = node && !isComponent && node.type.name !== "image" && node.type.name !== "table" && node.type.name !== "horizontalRule";
+    const index = target ? editor.state.doc.resolve(target.pos).index(0) : 0;
+    const count = editor.state.doc.childCount;
+    const run = (fn) => {
+        fn();
+        setMenuOpen(false);
+        lock(false);
+    };
+    const anchorOf = () => {
+        if (!node)
+            return "";
+        if (isComponent && typeof node.attrs.anchor === "string" && node.attrs.anchor)
+            return node.attrs.anchor;
+        if (node.type.name === "heading")
+            return node.attrs.anchor || slugify(node.textContent, { locale: lang });
+        return String(node.attrs.id ?? "");
+    };
+    return (_jsx(DragHandle, { editor: editor, onNodeChange: ({ node: n, pos }) => !menuOpen && setTarget(n ? { node: n, pos } : null), className: cn("vui-drag-handle", className), children: _jsxs("div", { className: "flex items-center gap-0.5", "data-slot": "block-editor-drag-handle", children: [_jsx("button", { type: "button", className: "vui-handle-btn focus-ring", "aria-label": t("insertBelow"), title: t("insertBelow"), onClick: (e) => target && openInserter({ at: target.pos, anchor: e.currentTarget }), children: _jsx(Plus, { "aria-hidden": true }) }), _jsxs(DropdownMenu, { modal: false, open: menuOpen, onOpenChange: (o) => {
+                        setMenuOpen(o);
+                        lock(o);
+                        if (o && target)
+                            selectBlock(editor, target.pos);
+                    }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "vui-handle-btn vui-handle-grip focus-ring", "aria-label": `${t("blockMenu")}: ${title}`, title: t("dragHandle"), "data-drag-handle": "", children: _jsx(GripVertical, { "aria-hidden": true }) }) }), _jsxs(DropdownMenuContent, { size: "sm", side: "left", align: "start", onCloseAutoFocus: (e) => e.preventDefault(), children: [_jsx("div", { className: "px-2.5 pb-1 pt-1.5 font-mono text-[10.5px] uppercase tracking-[0.08em] text-fg-subtle", children: title }), _jsx(DropdownMenuItem, { icon: _jsx(Copy, {}), shortcut: "mod+shift+d", onSelect: () => run(() => target && duplicateBlock(editor, target.pos) && announce(t("announceDuplicated", { title }))), children: t("duplicate") }), _jsx(DropdownMenuItem, { icon: _jsx(ArrowUp, {}), shortcut: "alt+shift+arrowup", disabled: index === 0, onSelect: () => run(() => target && moveBlock(editor, -1, target.pos) && announce(t("announceMovedUp", { title }))), children: t("moveUp") }), _jsx(DropdownMenuItem, { icon: _jsx(ArrowDown, {}), shortcut: "alt+shift+arrowdown", disabled: index >= count - 1, onSelect: () => run(() => target && moveBlock(editor, 1, target.pos) && announce(t("announceMovedDown", { title }))), children: t("moveDown") }), textBlock ? (_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { icon: _jsx(Repeat2, {}), children: t("turnInto") }), _jsx(DropdownMenuSubContent, { size: "sm", children: turnInto.map((it) => (_jsx(DropdownMenuItem, { icon: _jsx(it.icon, {}), onSelect: () => run(() => {
+                                                    if (!target)
+                                                        return;
+                                                    editor.chain().focus().setTextSelection(target.pos + 1).run();
+                                                    it.run(editor);
+                                                }), children: it.label }, it.id))) })] })) : null, _jsx(DropdownMenuItem, { icon: _jsx(LinkIcon, {}), onSelect: () => run(() => {
+                                        const a = anchorOf();
+                                        if (!a)
+                                            return;
+                                        const url = typeof location !== "undefined" ? `${location.origin}${location.pathname}#${a}` : `#${a}`;
+                                        navigator.clipboard?.writeText(url).then(() => announce(t("announceCopied")), () => undefined);
+                                    }), children: t("copyAnchor") }), isComponent && target ? (_jsx(DropdownMenuItem, { icon: node?.attrs.hidden ? _jsx(Eye, {}) : _jsx(EyeOff, {}), onSelect: () => run(() => setNodeAttrs(editor, target.pos, { hidden: node?.attrs.hidden ? null : true })), children: node?.attrs.hidden ? t("show") : t("hide") })) : null, _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { icon: _jsx(Trash2, {}), tone: "danger", shortcut: "alt+shift+z", onSelect: () => run(() => target && deleteBlock(editor, target.pos) && announce(t("announceDeleted", { title }))), children: t("delete") })] })] })] }) }));
+}