makersclaw 0.1.0 → 0.3.0

package/registry/blocks/doc-editor/doc.js

@@ -0,0 +1,309 @@
+// The document, outside the editor. A doc is BlockNote JSON: an array of
+// blocks, each { id, type, props, content, children }. These are plain
+// functions over that JSON — no editor, no browser — so a server surface,
+// an action or a test can read a doc the same way the screen does.
+//
+// Why not BlockNote's own blocksToMarkdownLossy: it needs a mounted editor
+// and a DOM, and it drops our inline content (a mention, a merge field).
+// Walking the JSON keeps both, and gives the same text on the server.
+
+/** A doc with nothing in it: one empty paragraph (BlockNote refuses []). */
+export function emptyDoc() {
+  return [{ type: "paragraph", content: [] }];
+}
+
+const blocksOf = (doc) => (Array.isArray(doc) ? doc : []);
+
+/** Walk every block, depth first, with its depth. */
+function eachBlock(doc, fn, depth = 0) {
+  for (const b of blocksOf(doc)) {
+    if (!b || typeof b !== "object") continue;
+    fn(b, depth);
+    eachBlock(b.children, fn, depth + 1);
+  }
+}
+
+/** The inline pieces of a block's content, whatever shape it came in. */
+function inlineOf(content) {
+  if (typeof content === "string") return [{ type: "text", text: content, styles: {} }];
+  return Array.isArray(content) ? content : [];
+}
+
+/** How a merge field reads: its value when `fields` gives one, else `{key}`. */
+function fieldValue(props, fields) {
+  const key = props?.key ?? "";
+  const v = typeof fields === "function" ? fields(key, props) : fields && typeof fields === "object" ? fields[key] : undefined;
+  return v === undefined || v === null || v === "" ? `{${key}}` : String(v);
+}
+
+function inlineText(content, opts) {
+  let out = "";
+  for (const c of inlineOf(content)) {
+    if (!c) continue;
+    if (c.type === "text") out += c.text ?? "";
+    else if (c.type === "link") out += inlineText(c.content, opts);
+    else if (c.type === "mention") out += `@${c.props?.label ?? c.props?.id ?? ""}`;
+    else if (c.type === "field") out += fieldValue(c.props, opts?.fields);
+    else if (Array.isArray(c.content)) out += inlineText(c.content, opts);
+  }
+  return out;
+}
+
+/** The text of one block's own content (not its children). */
+function blockText(block, opts) {
+  const c = block.content;
+  if (c && typeof c === "object" && !Array.isArray(c) && c.type === "tableContent") {
+    return (c.rows ?? []).map((r) => (r.cells ?? []).map((cell) => inlineText(cell?.content ?? cell, opts)).join("\t")).join("\n");
+  }
+  if (block.type === "image" || block.type === "file" || block.type === "video" || block.type === "audio") {
+    return block.props?.caption || block.props?.name || "";
+  }
+  return inlineText(c, opts);
+}
+
+const PREFIX_TEXT = {
+  bulletListItem: () => "- ",
+  toggleListItem: () => "- ",
+  checkListItem: (b) => (b.props?.checked ? "[x] " : "[ ] "),
+};
+
+/**
+ * Plain text: one line per block (an empty paragraph is an empty line),
+ * children indented by two spaces, list markers kept ("- ", "1. ",
+ * "[ ] "), a mention as @Label, a merge field as its value or {key}.
+ *
+ *   docToText(doc)                                 → "Hi {first_name},\n…"
+ *   docToText(doc, { fields: { first_name: "Ana" } })  → "Hi Ana,\n…"
+ *
+ * `fields` is { key: value } or (key, props) => value; an empty value
+ * leaves {key} in place.
+ */
+export function docToText(doc, opts = {}) {
+  const lines = [];
+  const walk = (blocks, depth) => {
+    let n = 0;
+    for (const b of blocksOf(blocks)) {
+      if (!b || typeof b !== "object") continue;
+      n = b.type === "numberedListItem" ? n + 1 : 0;
+      if (b.type !== "divider") {
+        const marker = b.type === "numberedListItem" ? `${n}. ` : PREFIX_TEXT[b.type]?.(b) ?? "";
+        const text = blockText(b, opts);
+        const pad = "  ".repeat(depth);
+        lines.push(...`${marker}${text}`.split("\n").map((l, i) => (i === 0 ? pad + l : pad + " ".repeat(marker.length) + l)));
+      }
+      walk(b.children, depth + 1);
+    }
+  };
+  walk(doc, 0);
+  return lines.join("\n").replace(/\s+$/, "");
+}
+
+// ---- markdown --------------------------------------------------------------
+
+// Escape what would turn into markup. An underscore inside a word
+// (first_name) is not emphasis in GFM, so it stays bare.
+const escapeMd = (s) => s.replace(/([\\`*[\]])/g, "\\$1").replace(/(^|[^\w])_|_(?![\w])/g, (m) => m.replace("_", "\\_"));
+
+/** Wrap a run in markers, keeping its edge spaces outside ("** bold**" is not bold). */
+function wrap(text, marker) {
+  const m = /^(\s*)([\s\S]*?)(\s*)$/.exec(text);
+  return m[2] ? `${m[1]}${marker}${m[2]}${marker}${m[3]}` : text;
+}
+
+function inlineMd(content, opts) {
+  let out = "";
+  for (const c of inlineOf(content)) {
+    if (!c) continue;
+    if (c.type === "text") {
+      const s = c.styles ?? {};
+      let t = s.code ? `\`${(c.text ?? "").replace(/`/g, "ˋ")}\`` : escapeMd(c.text ?? "");
+      if (s.strike) t = wrap(t, "~~");
+      if (s.italic) t = wrap(t, "*");
+      if (s.bold) t = wrap(t, "**");
+      out += t;
+    } else if (c.type === "link") out += `[${inlineMd(c.content, opts)}](${c.href ?? ""})`;
+    else if (c.type === "mention") out += `@${escapeMd(c.props?.label ?? c.props?.id ?? "")}`;
+    else if (c.type === "field") out += escapeMd(fieldValue(c.props, opts?.fields));
+    else if (Array.isArray(c.content)) out += inlineMd(c.content, opts);
+  }
+  return out;
+}
+
+function tableMd(content, opts) {
+  const rows = (content.rows ?? []).map((r) => (r.cells ?? []).map((cell) => inlineMd(cell?.content ?? cell, opts).replace(/\|/g, "\\|").replace(/\n/g, " ")));
+  if (!rows.length) return "";
+  const width = Math.max(...rows.map((r) => r.length));
+  const line = (r) => `| ${Array.from({ length: width }, (_, i) => r[i] ?? "").join(" | ")} |`;
+  return [line(rows[0]), `| ${Array(width).fill("---").join(" | ")} |`, ...rows.slice(1).map(line)].join("\n");
+}
+
+const LIST = new Set(["bulletListItem", "numberedListItem", "checkListItem", "toggleListItem"]);
+
+/**
+ * Markdown (GitHub-flavoured): headings, lists with nesting, checklists
+ * (- [ ] / - [x]), quotes, fenced code, tables, images, dividers; bold,
+ * italic, strike, inline code and links. A mention is @Label, a merge
+ * field its value or {key} (same `fields` as docToText). Lossy where
+ * markdown has no word for it: underline, colours, alignment, a toggle's
+ * folding. Empty paragraphs are dropped.
+ */
+export function docToMarkdown(doc, opts = {}) {
+  const out = [];
+  const walk = (blocks, indent) => {
+    let n = 0;
+    let prevList = false;
+    for (const b of blocksOf(blocks)) {
+      if (!b || typeof b !== "object") continue;
+      n = b.type === "numberedListItem" ? n + 1 : 0;
+      // Which list it belongs to: a numbered list after a bulleted one is a
+      // new list, and gets a blank line between.
+      const isList = LIST.has(b.type) ? (b.type === "numberedListItem" ? "ol" : "ul") : false;
+      let text;
+      let marker = "";
+      const c = b.content;
+      switch (b.type) {
+        case "heading":
+          text = `${"#".repeat(Math.min(6, Math.max(1, Number(b.props?.level) || 1)))} ${inlineMd(c, opts)}`;
+          break;
+        case "bulletListItem":
+        case "toggleListItem":
+          marker = "- ";
+          text = inlineMd(c, opts);
+          break;
+        case "numberedListItem":
+          marker = `${n}. `;
+          text = inlineMd(c, opts);
+          break;
+        case "checkListItem":
+          marker = `- [${b.props?.checked ? "x" : " "}] `;
+          text = inlineMd(c, opts);
+          break;
+        case "quote":
+          text = inlineMd(c, opts)
+            .split("\n")
+            .map((l) => `> ${l}`)
+            .join("\n");
+          break;
+        case "codeBlock":
+          text = `\`\`\`${b.props?.language && b.props.language !== "text" ? b.props.language : ""}\n${inlineText(c)}\n\`\`\``;
+          break;
+        case "divider":
+          text = "---";
+          break;
+        case "table":
+          text = c && typeof c === "object" && !Array.isArray(c) ? tableMd(c, opts) : "";
+          break;
+        case "image":
+          text = b.props?.url ? `![${escapeMd(b.props?.caption || b.props?.name || "")}](${b.props.url})` : "";
+          break;
+        case "file":
+        case "video":
+        case "audio":
+          text = b.props?.url ? `[${escapeMd(b.props?.name || b.props?.caption || b.props.url)}](${b.props.url})` : "";
+          break;
+        default:
+          text = inlineMd(c, opts);
+      }
+      const pad = " ".repeat(indent);
+      if (text.trim() || marker) {
+        const body = `${marker}${text}`.split("\n").map((l, i) => (i === 0 ? pad + l : l ? pad + " ".repeat(marker.length) + l : l));
+        // Blank line between blocks; list items in a row stay together.
+        if (out.length && !(isList && isList === prevList)) out.push("");
+        out.push(body.join("\n"));
+      }
+      prevList = isList;
+      if (b.children?.length) {
+        const before = out.length;
+        walk(b.children, indent + (marker ? marker.length : 2));
+        // A nested list follows its item directly.
+        if (isList && out.length > before && out[before] === "") out.splice(before, 1);
+      }
+    }
+  };
+  walk(doc, 0);
+  return out.join("\n").replace(/\n{3,}/g, "\n\n").trim();
+}
+
+// ---- reading a doc ---------------------------------------------------------
+
+/** True when there is no text, no mention, no field and no block but empty paragraphs. */
+export function isDocEmpty(doc) {
+  let empty = true;
+  eachBlock(doc, (b) => {
+    if (!empty) return;
+    if (b.type !== "paragraph") empty = false;
+    else if (inlineOf(b.content).some((c) => c && (c.type !== "text" || (c.text ?? "").trim()))) empty = false;
+  });
+  return empty;
+}
+
+function inlineOfType(content, type, out) {
+  for (const c of inlineOf(content)) {
+    if (!c) continue;
+    if (c.type === type) out.push(c.props ?? {});
+    else if (Array.isArray(c.content)) inlineOfType(c.content, type, out);
+  }
+  return out;
+}
+
+/**
+ * The checklist items, in order, nested ones too:
+ * [{ id, text, checked, depth, mentions: [{ id, label }] }]. `text` is the
+ * item's words (a mention as @Label); `mentions` lets a meeting-notes block
+ * read an owner off "@Priya send the deck".
+ */
+export function docChecklist(doc, opts = {}) {
+  const items = [];
+  eachBlock(doc, (b, depth) => {
+    if (b.type !== "checkListItem") return;
+    items.push({
+      id: b.id ?? null,
+      text: inlineText(b.content, opts),
+      checked: Boolean(b.props?.checked),
+      depth,
+      mentions: inlineOfType(b.content, "mention", []).map((p) => ({ id: p.id ?? "", label: p.label ?? "" })),
+    });
+  });
+  return items;
+}
+
+/** The doc with one checklist item ticked or unticked (by block id). A new array; the old doc is untouched. */
+export function setChecklistItem(doc, id, checked) {
+  const walk = (blocks) =>
+    blocksOf(blocks).map((b) =>
+      b?.id === id && b.type === "checkListItem"
+        ? { ...b, props: { ...b.props, checked: Boolean(checked) } }
+        : b?.children?.length
+          ? { ...b, children: walk(b.children) }
+          : b,
+    );
+  return walk(doc);
+}
+
+function tally(doc, type, keyOf) {
+  const seen = new Map();
+  eachBlock(doc, (b) => {
+    const content = b.content && typeof b.content === "object" && b.content.type === "tableContent" ? (b.content.rows ?? []).flatMap((r) => (r.cells ?? []).flatMap((cell) => inlineOf(cell?.content ?? cell))) : b.content;
+    for (const p of inlineOfType(content, type, [])) {
+      const k = keyOf(p);
+      const had = seen.get(k);
+      if (had) had.count++;
+      else seen.set(k, { ...p, count: 1 });
+    }
+  });
+  return [...seen.values()];
+}
+
+/**
+ * The merge fields a doc uses, in order of first use:
+ * [{ key, label, count }]. Compare with the recipient's values to warn
+ * "missing field" before a send.
+ */
+export function docFields(doc) {
+  return tally(doc, "field", (p) => p.key ?? "").map((p) => ({ key: p.key ?? "", label: p.label ?? p.key ?? "", count: p.count }));
+}
+
+/** The people a doc mentions, in order of first mention: [{ id, label, count }]. */
+export function docMentions(doc) {
+  return tally(doc, "mention", (p) => p.id ?? "").map((p) => ({ id: p.id ?? "", label: p.label ?? "", count: p.count }));
+}

package/registry/blocks/doc-editor/index.js

@@ -0,0 +1,7 @@
+// The DocEditor block — `makersclaw add doc-editor`. Fixed: compose it
+// through its props (README.md beside this file). The helpers read a doc
+// anywhere, the server included; the other text blocks (doc-page,
+// comment-box, record-notes…) are built on this one and import it, never
+// @blocknote/* directly.
+export { DocEditor, useDocEditor } from "./doc-editor";
+export { docToMarkdown, docToText, emptyDoc, isDocEmpty, docChecklist, setChecklistItem, docFields, docMentions } from "./doc";

package/registry/blocks/doc-editor/schema.jsx

@@ -0,0 +1,56 @@
+"use client";
+
+// What a doc may hold: BlockNote's own blocks (less audio, video and file,
+// which need an upload store this block does not have), its text styles,
+// and two inline chips of ours:
+//
+//   { type: "mention", props: { id, label } }   @Priya — a person
+//   { type: "field",   props: { key, label } }  {first_name} — a merge field
+//
+// Both are atoms (no text inside): the caret steps over them and Backspace
+// takes the whole chip. doc.js turns them into @Label and {key} / a value.
+import { BlockNoteSchema, defaultBlockSpecs, defaultInlineContentSpecs } from "@blocknote/core";
+import { createReactInlineContentSpec } from "@blocknote/react";
+
+const CHIP = "inline-flex items-baseline rounded-sm px-1 font-medium whitespace-nowrap";
+
+const Mention = createReactInlineContentSpec(
+  {
+    type: "mention",
+    propSchema: { id: { default: "" }, label: { default: "" } },
+    content: "none",
+  },
+  {
+    render: ({ inlineContent }) => (
+      <span className={`${CHIP} bg-primary/10 text-primary`} data-mention={inlineContent.props.id}>
+        @{inlineContent.props.label || inlineContent.props.id}
+      </span>
+    ),
+  },
+);
+
+const Field = createReactInlineContentSpec(
+  {
+    type: "field",
+    propSchema: { key: { default: "" }, label: { default: "" } },
+    content: "none",
+  },
+  {
+    render: ({ inlineContent }) => (
+      <span
+        className={`${CHIP} border border-dashed border-border bg-muted text-muted-foreground`}
+        data-field={inlineContent.props.key}
+        title={`{${inlineContent.props.key}}`}
+      >
+        {inlineContent.props.label || inlineContent.props.key}
+      </span>
+    ),
+  },
+);
+
+const { audio, video, file, ...blockSpecs } = defaultBlockSpecs;
+
+export const SCHEMA = BlockNoteSchema.create({
+  blockSpecs,
+  inlineContentSpecs: { ...defaultInlineContentSpecs, mention: Mention, field: Field },
+});

package/registry/blocks/doc-editor/shadcn-classes.js

@@ -0,0 +1,110 @@
+// Written by scripts/blocknote-classes.mjs from @blocknote/shadcn 0.55.0 — do not edit.
+//
+// The Tailwind classes BlockNote's shadcn menus, toolbar and popovers use.
+// Nothing imports this file: it is here so the app's Tailwind, which reads
+// components/**, makes these classes (globals.css does not read
+// node_modules). Only token classes: dark:, colour functions and raw hues
+// were dropped on the way in.
+export const SHADCN_CLASSES = [
+  "**:data-[slot=kbd]:isolate **:data-[slot=kbd]:relative **:data-[slot=kbd]:rounded-sm",
+  "**:data-[slot=kbd]:z-50 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+  "*:[span]:last:flex *:[span]:last:gap-2 *:[span]:last:items-center *:data-[slot=select-value]:flex",
+  "*:data-[slot=select-value]:gap-1.5 *:data-[slot=select-value]:items-center",
+  "*:data-[slot=select-value]:line-clamp-1 -mx-1 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "[&_svg:not([class*='size-'])]:size-3 [&_svg:not([class*='size-'])]:size-4",
+  "[&_svg:not([class*=size-])]:size-4 [&_svg:not([class*=text-])]:text-muted-foreground",
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [--card-spacing:--spacing(6)]",
+  "[a]:hover:bg-destructive/20 [a]:hover:bg-muted [a]:hover:bg-primary/80 [a]:hover:bg-secondary/80",
+  "[a]:hover:text-muted-foreground active:not-aria-[haspopup]:translate-y-px after:absolute",
+  "after:bg-foreground after:border after:border-border after:inset-0 after:mix-blend-darken",
+  "after:opacity-0 after:rounded-full after:transition-opacity animate-pulse aria-activedescendant",
+  "aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-expanded:bg-muted",
+  "aria-expanded:bg-secondary aria-expanded:text-foreground aria-expanded:text-secondary-foreground",
+  "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-label",
+  "aria-pressed:bg-muted aria-selected aria-selected:bg-accent aria-selected:text-accent-foreground",
+  "aspect-square avatar-fallback avatar-image bg-background bg-border bg-card bg-clip-padding",
+  "bg-destructive/10 bg-foreground bg-muted bg-popover bg-primary bg-secondary bg-transparent",
+  "bn-form bn-shadcn bn-snapshot-menu border-border border-input border-none border-transparent",
+  "bottom-0 card-content cursor-default data-[align-trigger=true]:animate-none",
+  "data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[inset]:pl-8",
+  "data-[orientation=horizontal]:flex-col data-[side=bottom]:slide-in-from-top-2",
+  "data-[side=bottom]:top-1 data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2",
+  "data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-end]:top-1/2!",
+  "data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2",
+  "data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-start]:top-1/2!",
+  "data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2",
+  "data-[side=left]:slide-in-from-right-2 data-[side=left]:top-1/2! data-[side=right]:-left-1",
+  "data-[side=right]:-translate-y-1/2 data-[side=right]:slide-in-from-left-2",
+  "data-[side=right]:top-1/2! data-[side=top]:-bottom-2.5 data-[side=top]:slide-in-from-bottom-2",
+  "data-[size=default]:h-9 data-[size=lg]:size-10 data-[size=sm]:[--card-spacing:--spacing(4)]",
+  "data-[size=sm]:h-8 data-[size=sm]:size-6 data-[state=delayed-open]:animate-in",
+  "data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
+  "data-[variant=destructive]:*:[svg]:!text-destructive",
+  "data-[variant=destructive]:*:[svg]:text-destructive",
+  "data-[variant=destructive]:aria-selected:bg-destructive/10",
+  "data-[variant=destructive]:aria-selected:text-destructive",
+  "data-[variant=destructive]:focus:bg-destructive/10",
+  "data-[variant=destructive]:focus:text-destructive",
+  "data-[variant=destructive]:hover:bg-destructive/10",
+  "data-[variant=destructive]:hover:text-destructive data-[variant=destructive]:text-destructive",
+  "data-[variant=line]:rounded-none data-active:bg-background data-active:text-foreground",
+  "data-align-trigger data-closed:animate-out data-closed:fade-out-0 data-closed:overflow-hidden",
+  "data-closed:zoom-out-95 data-disabled:opacity-50 data-disabled:pointer-events-none data-inset",
+  "data-inset:pl-8 data-open:animate-in data-open:bg-accent data-open:fade-in-0",
+  "data-open:text-accent-foreground data-open:zoom-in-95 data-orientation",
+  "data-placeholder:text-muted-foreground data-popup-open:bg-accent",
+  "data-popup-open:text-accent-foreground data-size data-slot data-test data-variant",
+  "disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none dropdown-menu",
+  "dropdown-menu-checkbox-item dropdown-menu-checkbox-item-indicator dropdown-menu-content",
+  "dropdown-menu-group dropdown-menu-item dropdown-menu-label dropdown-menu-separator",
+  "dropdown-menu-sub dropdown-menu-sub-content dropdown-menu-sub-trigger dropdown-menu-trigger",
+  "duration-100 embed-input file:bg-transparent file:border-0 file:font-medium file:h-7",
+  "file:inline-flex file:text-foreground file:text-sm fill-foreground flex-1 flex-col flex-nowrap",
+  "flex-row flex-wrap focus-visible:border-destructive/40 focus-visible:border-ring",
+  "focus-visible:outline-1 focus-visible:outline-none focus-visible:outline-ring",
+  "focus-visible:ring-2 focus-visible:ring-3 focus-visible:ring-[3px]",
+  "focus-visible:ring-destructive/20 focus-visible:ring-offset-2 focus-visible:ring-ring",
+  "focus-visible:ring-ring/50 focus:**:text-accent-foreground focus:bg-accent",
+  "focus:text-accent-foreground font-medium gap-(--card-spacing) gap-0 gap-1 gap-1.5 gap-2 gap-4",
+  "gap-6 group-data-[disabled=true]:opacity-50 group-data-[disabled=true]:pointer-events-none",
+  "group-data-[orientation=horizontal]/tabs:after:bottom-[-5px]",
+  "group-data-[orientation=horizontal]/tabs:after:h-0.5",
+  "group-data-[orientation=horizontal]/tabs:after:inset-x-0",
+  "group-data-[orientation=horizontal]/tabs:h-9",
+  "group-data-[orientation=vertical]/tabs:after:-right-1",
+  "group-data-[orientation=vertical]/tabs:after:inset-y-0",
+  "group-data-[orientation=vertical]/tabs:after:w-0.5",
+  "group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:h-fit",
+  "group-data-[orientation=vertical]/tabs:justify-start",
+  "group-data-[orientation=vertical]/tabs:w-full group-data-[size=sm]/avatar:text-xs",
+  "group-data-[variant=default]/tabs-list:data-active:shadow-sm",
+  "group-data-[variant=line]/tabs-list:bg-transparent",
+  "group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+  "group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+  "group-data-[variant=line]/tabs-list:data-active:shadow-none group/dropdown-menu-item",
+  "group/tabs-list h-10 h-4 h-5 h-6 h-7 h-8 h-9 h-[calc(100%-1px)] h-auto h-fit h-px",
+  "has-[>img:first-child]:pt-0 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-end]:pr-2",
+  "has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-start]:pl-2 has-data-[slot=kbd]:pr-1.5",
+  "hover:bg-accent hover:bg-destructive/20 hover:bg-muted hover:bg-primary/80",
+  "hover:text-accent-foreground hover:text-foreground hover:text-muted-foreground hover:underline",
+  "icon-lg icon-sm icon-xs in-data-[slot=button-group]:rounded-md inline-flex items-center",
+  "items-start justify-between justify-center leading-none max-h-(--available-height) max-w-full",
+  "max-w-none max-w-screen max-w-xs md:text-sm min-w-0 min-w-10 min-w-32 min-w-36 min-w-6 min-w-8",
+  "min-w-9 min-w-[96px] ml-auto my-1 not-data-[variant=destructive]:focus:**:text-accent-foreground",
+  "object-cover origin-(--transform-origin) outline-hidden outline-none overflow-hidden",
+  "overflow-x-hidden overflow-y-auto p-0 p-1 p-2 p-4 p-[3px] panel-popover",
+  "peer-disabled:cursor-not-allowed peer-disabled:opacity-50 pl-2 pl-2.5",
+  "placeholder:text-muted-foreground pointer-events-none popover-content popover-trigger pr-2 pr-8",
+  "pt-4 px-(--card-spacing) px-2 px-2.5 px-3 py-(--card-spacing) py-0 py-0.5 py-1 py-1.5 py-2",
+  "right-0 right-2 ring-1 ring-foreground/10 ring-offset-background rotate-45 rounded-4xl",
+  "rounded-[2px] rounded-[min(var(--radius-md),10px)] rounded-[min(var(--radius-md),8px)]",
+  "rounded-full rounded-lg rounded-md rounded-sm rounded-xl select-content select-item select-none",
+  "select-scroll-down-button select-scroll-up-button select-trigger select-value shadow-lg shadow-md",
+  "shadow-none shadow-xs shrink-0 size-10 size-2.5 size-4 size-6 size-8 size-9 size-full",
+  "tabs-content tabs-list tabs-trigger text-background text-base text-base! text-card-foreground",
+  "text-destructive text-foreground text-foreground/60 text-left text-muted-foreground",
+  "text-popover-foreground text-primary text-primary-foreground text-secondary-foreground text-sm",
+  "text-xs tooltip-content tooltip-provider tooltip-trigger top-0 transition-[color,box-shadow]",
+  "transition-all translate-y-[calc(-50%-2px)] underline-offset-4 w-(--anchor-width) w-32 w-4 w-72",
+  "w-80 w-auto w-fit w-full whitespace-nowrap whitespace-pre-wrap z-10 z-50",
+].join(" ");

package/registry/blocks/doc-editor/theme.js

@@ -0,0 +1,82 @@
+// BlockNote in the workspace theme — the one place its look is mapped.
+//
+// BlockNote paints itself from CSS variables (--bn-colors-editor-text,
+// --bn-colors-menu-background…) that its stylesheet sets on every
+// `.bn-root` with its own hex values. Here each one is pointed at a token
+// instead, as Tailwind arbitrary properties on the editor's root. The
+// root's className is also what BlockNote copies onto the roots of the
+// menus it portals out of the editor, so the menus wear the same tokens.
+//
+// Every class ends in `!`: BlockNote's stylesheet is unlayered, and an
+// unlayered rule beats any Tailwind utility (those live in @layer
+// utilities) whatever its specificity. `!important` inside a layer is the
+// one thing that outranks it.
+//
+// The highlight colours (BlockNote's red/blue/… text and backgrounds) map
+// to the status and chart tokens; every background to muted, because the
+// theme has one tint, not nine. The toolbar and the block menu do not offer
+// colours (doc-editor.jsx), so these only paint pasted or stored content.
+export const THEME = [
+  // surface, text, menus
+  "[--bn-colors-editor-text:var(--color-foreground)]!",
+  "[--bn-colors-editor-background:transparent]!",
+  "[--bn-colors-menu-text:var(--color-popover-foreground)]!",
+  "[--bn-colors-menu-background:var(--color-popover)]!",
+  "[--bn-colors-tooltip-text:var(--color-popover-foreground)]!",
+  "[--bn-colors-tooltip-background:var(--color-popover)]!",
+  "[--bn-colors-hovered-text:var(--color-accent-foreground)]!",
+  "[--bn-colors-hovered-background:var(--color-accent)]!",
+  "[--bn-colors-selected-text:var(--color-primary-foreground)]!",
+  "[--bn-colors-selected-background:var(--color-primary)]!",
+  "[--bn-colors-disabled-text:var(--color-muted-foreground)]!",
+  "[--bn-colors-disabled-background:var(--color-muted)]!",
+  "[--bn-colors-shadow:var(--color-border)]!",
+  "[--bn-colors-border:var(--color-border)]!",
+  "[--bn-colors-side-menu:var(--color-muted-foreground)]!",
+  // highlights: text → status / chart tokens, backgrounds → muted
+  "[--bn-colors-highlights-gray-text:var(--color-muted-foreground)]!",
+  "[--bn-colors-highlights-brown-text:var(--color-muted-foreground)]!",
+  "[--bn-colors-highlights-red-text:var(--color-destructive)]!",
+  "[--bn-colors-highlights-orange-text:var(--color-warning)]!",
+  "[--bn-colors-highlights-yellow-text:var(--color-warning)]!",
+  "[--bn-colors-highlights-green-text:var(--color-success)]!",
+  "[--bn-colors-highlights-blue-text:var(--color-info)]!",
+  "[--bn-colors-highlights-purple-text:var(--color-chart-3)]!",
+  "[--bn-colors-highlights-pink-text:var(--color-chart-4)]!",
+  "[--bn-colors-highlights-gray-background:var(--color-muted)]!",
+  "[--bn-colors-highlights-brown-background:var(--color-muted)]!",
+  "[--bn-colors-highlights-red-background:var(--color-muted)]!",
+  "[--bn-colors-highlights-orange-background:var(--color-muted)]!",
+  "[--bn-colors-highlights-yellow-background:var(--color-muted)]!",
+  "[--bn-colors-highlights-green-background:var(--color-muted)]!",
+  "[--bn-colors-highlights-blue-background:var(--color-muted)]!",
+  "[--bn-colors-highlights-purple-background:var(--color-muted)]!",
+  "[--bn-colors-highlights-pink-background:var(--color-muted)]!",
+  // face and radius: the workspace's, not Inter at 16px
+  "[--bn-font-family:var(--theme-font-sans)]!",
+  "[--bn-border-radius:var(--theme-radius)]!",
+  "[&_.bn-default-styles]:font-sans!",
+  "[&_.bn-default-styles]:[font-size:inherit]!",
+  "[&_.bn-default-styles]:[letter-spacing:inherit]!",
+  // what BlockNote paints with fixed values rather than its variables
+  "[&_.bn-editor_a]:text-primary!",
+  "[&_.bn-editor_a]:underline!",
+  "[&_.bn-inline-content_code]:font-mono!",
+  "[&_.bn-inline-content_code]:rounded-sm!",
+  "[&_.bn-inline-content_code]:bg-muted!",
+  "[&_.bn-inline-content_code]:px-1!",
+  "[&_[data-content-type=codeBlock]]:bg-muted!",
+  "[&_[data-content-type=codeBlock]]:text-foreground!",
+  "[&_[data-content-type=codeBlock]]:font-mono!",
+  "[&_[data-content-type=codeBlock]]:rounded-md!",
+  "[&_[data-content-type=codeBlock]_select]:text-muted-foreground!",
+  "[&_[data-content-type=quote]_blockquote]:text-muted-foreground!",
+  "[&_[data-content-type=quote]_blockquote]:border-border!",
+  "[&_[data-content-type=checkListItem]_input]:accent-primary!",
+  "[&_[data-checked=true]_.bn-inline-content]:text-muted-foreground!",
+  "[&_.bn-block-content]:after:text-muted-foreground!",
+  "[&_.bn-block-content]:after:not-italic!",
+  "[&_table]:border-border!",
+  "[&_td]:border-border!",
+  "[&_th]:border-border!",
+].join(" ");