makersclaw 0.2.0 → 0.3.1

package/registry/blocks/code-editor/text.js

@@ -0,0 +1,101 @@
+// Positions in a text, and the problems ("diagnostics") drawn on it.
+//
+// Plain functions of strings, so they run in node and on the server. The
+// editor counts in offsets (0-based characters from the start); people and
+// databases count in lines and columns (1-based). Both are accepted here.
+
+/** Offset → { line, col }, both 1-based. */
+export function lineCol(text, offset) {
+  const s = String(text ?? "");
+  const at = Math.max(0, Math.min(s.length, offset | 0));
+  let line = 1;
+  let start = 0;
+  for (let i = 0; i < at; i++) {
+    if (s.charCodeAt(i) === 10) {
+      line++;
+      start = i + 1;
+    }
+  }
+  return { line, col: at - start + 1 };
+}
+
+/** { line, col } (1-based) → offset, clamped into the text. A missing col
+ *  is the start of the line. */
+export function offsetOf(text, line, col = 1) {
+  const s = String(text ?? "");
+  let at = 0;
+  for (let n = 1; n < Math.max(1, line | 0); n++) {
+    const next = s.indexOf("\n", at);
+    if (next < 0) return s.length;
+    at = next + 1;
+  }
+  const end = s.indexOf("\n", at);
+  const lineEnd = end < 0 ? s.length : end;
+  return Math.min(lineEnd, at + Math.max(0, (col | 0) - 1));
+}
+
+/** The start and end offsets of line `line` (1-based). */
+export function lineRange(text, line) {
+  const s = String(text ?? "");
+  const from = offsetOf(s, line, 1);
+  const end = s.indexOf("\n", from);
+  return { from, to: end < 0 ? s.length : end };
+}
+
+const SEVERITIES = new Set(["error", "warning", "info", "hint"]);
+
+/**
+ * The problems a caller hands the editor, made exact: each one gets
+ * `from`/`to` offsets inside the text. A problem may say where it is as
+ *   { from, to }                         offsets, or
+ *   { line, col?, endLine?, endCol? }    1-based; no col = the whole line,
+ *   { position }                         a 1-based character position, as
+ *                                        Postgres reports an error
+ * plus `message` and `severity` ("error" default · "warning" · "info").
+ * An empty range is widened to the word under it (or one character), so
+ * there is always something to underline.
+ */
+export function normalizeDiagnostics(text, list) {
+  const s = String(text ?? "");
+  const out = [];
+  for (const d of list ?? []) {
+    if (!d || !d.message) continue;
+    let from;
+    let to;
+    if (Number.isFinite(d.from)) {
+      from = d.from;
+      to = Number.isFinite(d.to) ? d.to : d.from;
+    } else if (Number.isFinite(d.position)) {
+      from = d.position - 1;
+      to = from;
+    } else if (Number.isFinite(d.line)) {
+      if (Number.isFinite(d.col)) {
+        from = offsetOf(s, d.line, d.col);
+        to = Number.isFinite(d.endLine) ? offsetOf(s, d.endLine, d.endCol ?? 1) : Number.isFinite(d.endCol) ? offsetOf(s, d.line, d.endCol) : from;
+      } else {
+        ({ from, to } = lineRange(s, d.line));
+      }
+    } else {
+      from = 0;
+      to = 0;
+    }
+    from = Math.max(0, Math.min(s.length, from));
+    to = Math.max(from, Math.min(s.length, to));
+    if (to === from) ({ from, to } = wordAt(s, from));
+    out.push({ from, to, severity: SEVERITIES.has(d.severity) ? d.severity : "error", message: String(d.message), source: d.source });
+  }
+  return out;
+}
+
+/** The word (letters, digits, _ $ .) at `at`, else one character. */
+export function wordAt(text, at) {
+  const s = String(text ?? "");
+  const W = /[\w$.]/;
+  let from = at;
+  let to = at;
+  while (from > 0 && W.test(s[from - 1])) from--;
+  while (to < s.length && W.test(s[to])) to++;
+  if (to === from) to = Math.min(s.length, from + 1);
+  if (to === from && from > 0) from--;
+  return { from, to };
+}

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

@@ -0,0 +1,186 @@
+// CodeMirror in the workspace theme — the one place its look is mapped.
+//
+// CodeMirror styles itself with CSS it writes at run time, so its theme is
+// CSS too: every colour below is `var(--color-…)`, the workspace's own
+// token, read by the browser. Nothing is resolved in JavaScript, so a
+// change of theme or of light/dark repaints the editor with no work here.
+//
+// Syntax colours are categories, not status, so they come from the chart
+// hues (--color-chart-1 is the primary): keywords chart-1 and a little
+// heavier (in a theme whose primary is its ink, weight still sets them
+// apart), text in quotes chart-2, numbers and true/false/null chart-3,
+// functions chart-4, names of columns, keys and types chart-5. Comments
+// and punctuation step back into muted-foreground.
+import { EditorView, HighlightStyle, tags as t } from "./codemirror";
+
+const v = (token) => `var(--color-${token})`;
+
+export const editorTheme = EditorView.theme({
+  "&": {
+    color: v("foreground"),
+    backgroundColor: "transparent",
+    fontSize: "var(--code-editor-size, 13px)",
+  },
+  "&.cm-focused": { outline: "none" },
+  ".cm-scroller": {
+    fontFamily: "var(--font-mono)",
+    lineHeight: "1.65",
+    overflow: "auto",
+  },
+  ".cm-content": {
+    padding: "10px 0",
+    caretColor: v("foreground"),
+  },
+  ".cm-line": { padding: "0 16px 0 12px" },
+  ".cm-cursor, .cm-dropCursor": { borderLeftColor: v("foreground"), borderLeftWidth: "2px" },
+  // Selection sits under the text (drawSelection), so an opaque tint reads.
+  ".cm-selectionBackground": { backgroundColor: v("accent") },
+  "&.cm-focused .cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection": {
+    backgroundColor: v("accent"),
+  },
+  ".cm-selectionMatch": { backgroundColor: v("muted"), borderRadius: "2px" },
+  "&.cm-focused .cm-matchingBracket": { backgroundColor: "transparent", outline: `1px solid ${v("muted-foreground")}`, borderRadius: "2px" },
+  "&.cm-focused .cm-nonmatchingBracket": { backgroundColor: "transparent", outline: `1px solid ${v("destructive")}`, borderRadius: "2px" },
+  ".cm-placeholder": { color: v("muted-foreground"), fontStyle: "normal" },
+
+  // The gutter: quiet numbers, the current one in ink.
+  ".cm-gutters": {
+    backgroundColor: "transparent",
+    color: v("muted-foreground"),
+    border: "none",
+    fontVariantNumeric: "tabular-nums",
+  },
+  ".cm-lineNumbers .cm-gutterElement": { padding: "0 4px 0 14px", minWidth: "36px", opacity: "0.7" },
+  ".cm-activeLineGutter": { backgroundColor: "transparent", color: v("foreground") },
+  ".cm-activeLineGutter.cm-gutterElement": { opacity: "1" },
+  ".cm-foldGutter .cm-gutterElement": { padding: "0 2px", cursor: "pointer" },
+  ".cm-fold-marker": {
+    display: "inline-grid",
+    placeItems: "center",
+    width: "14px",
+    height: "100%",
+    color: v("muted-foreground"),
+    transition: "transform 150ms ease, color 150ms ease",
+  },
+  ".cm-fold-marker:hover": { color: v("foreground") },
+  ".cm-fold-marker[data-open='false']": { transform: "rotate(-90deg)" },
+  ".cm-foldPlaceholder": {
+    backgroundColor: v("muted"),
+    border: "none",
+    color: v("muted-foreground"),
+    borderRadius: "4px",
+    padding: "0 6px",
+    margin: "0 2px",
+  },
+
+  // Problems: a wavy line under the text, a dot in the gutter.
+  ".cm-lintRange": { backgroundImage: "none", textDecorationLine: "underline", textDecorationStyle: "wavy", textDecorationSkipInk: "none", textUnderlineOffset: "3px" },
+  ".cm-lintRange-error": { textDecorationColor: v("destructive") },
+  ".cm-lintRange-warning": { textDecorationColor: v("warning") },
+  ".cm-lintRange-info, .cm-lintRange-hint": { textDecorationColor: v("info") },
+  ".cm-gutter-lint": { width: "14px" },
+  ".cm-gutter-lint .cm-gutterElement": { padding: "0", display: "grid", placeItems: "center" },
+  ".cm-lint-marker": { content: "normal", width: "6px", height: "6px", borderRadius: "9999px" },
+  // CodeMirror sets its icon as `content: url(…)` on each kind; ours is the dot.
+  ".cm-lint-marker-error": { content: "normal", backgroundColor: v("destructive") },
+  ".cm-lint-marker-warning": { content: "normal", backgroundColor: v("warning") },
+  ".cm-lint-marker-info": { content: "normal", backgroundColor: v("info") },
+
+  // Every floating panel: the popover surface and a hairline (the shadow
+  // is the kit's shadow-lg, set on the wrapper in code-editor.jsx).
+  ".cm-tooltip": {
+    backgroundColor: v("popover"),
+    color: v("popover-foreground"),
+    border: `1px solid ${v("border")}`,
+    borderRadius: "var(--radius-md)",
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
+    fontFamily: "var(--font-mono)",
+    maxHeight: "16em",
+    padding: "4px",
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {
+    padding: "3px 8px",
+    borderRadius: "4px",
+    lineHeight: "1.6",
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
+    backgroundColor: v("accent"),
+    color: v("accent-foreground"),
+  },
+  ".cm-completionLabel": { flex: "0 1 auto" },
+  ".cm-completionMatchedText": { textDecoration: "none", fontWeight: "600", color: v("foreground") },
+  ".cm-completionDetail": { marginLeft: "auto", paddingLeft: "12px", fontStyle: "normal", color: v("muted-foreground"), fontSize: "0.9em" },
+  ".cm-completionIcon": { width: "1.1em", opacity: "0.7", paddingRight: "0", color: v("muted-foreground"), fontSize: "0.85em" },
+  ".cm-completionIcon-keyword:after": { content: "'K'" },
+  ".cm-completionIcon-type:after": { content: "'T'" },
+  ".cm-completionIcon-property:after": { content: "'·'" },
+  ".cm-completionIcon-namespace:after": { content: "'S'" },
+  ".cm-completionInfo": {
+    backgroundColor: v("popover"),
+    color: v("popover-foreground"),
+    border: `1px solid ${v("border")}`,
+    borderRadius: "var(--radius-md)",
+    padding: "6px 10px",
+    fontFamily: "var(--font-sans)",
+    maxWidth: "280px",
+  },
+  ".cm-tooltip-lint": { padding: "2px" },
+  ".cm-diagnostic": { fontFamily: "var(--font-sans)", padding: "6px 10px", borderLeft: "3px solid transparent", borderRadius: "4px" },
+  ".cm-diagnostic-error": { borderLeftColor: v("destructive") },
+  ".cm-diagnostic-warning": { borderLeftColor: v("warning") },
+  ".cm-diagnostic-info, .cm-diagnostic-hint": { borderLeftColor: v("info") },
+
+  // Find and replace (Cmd/Ctrl+F): our fields and buttons, not the default grey.
+  ".cm-panels": { backgroundColor: v("card"), color: v("foreground") },
+  ".cm-panels.cm-panels-top": { borderBottom: `1px solid ${v("border")}` },
+  ".cm-panels.cm-panels-bottom": { borderTop: `1px solid ${v("border")}` },
+  ".cm-panel.cm-search": { padding: "8px 12px", fontFamily: "var(--font-sans)", fontSize: "13px", display: "flex", flexWrap: "wrap", alignItems: "center", gap: "6px" },
+  ".cm-panel.cm-search br": { display: "none" },
+  ".cm-panel.cm-search label": { display: "inline-flex", alignItems: "center", gap: "4px", color: v("muted-foreground") },
+  ".cm-panel.cm-search [name=close]": { position: "static", marginLeft: "auto", color: v("muted-foreground"), fontSize: "18px", padding: "0 6px" },
+  ".cm-textfield": {
+    backgroundColor: v("background"),
+    color: v("foreground"),
+    border: `1px solid ${v("input")}`,
+    borderRadius: "var(--radius-sm)",
+    padding: "4px 8px",
+    margin: "0",
+    fontSize: "13px",
+  },
+  ".cm-textfield:focus": { outline: `2px solid ${v("ring")}`, outlineOffset: "0" },
+  ".cm-button": {
+    backgroundImage: "none",
+    backgroundColor: v("secondary"),
+    color: v("secondary-foreground"),
+    border: `1px solid ${v("border")}`,
+    borderRadius: "var(--radius-sm)",
+    padding: "4px 10px",
+    margin: "0",
+    fontSize: "13px",
+  },
+  ".cm-button:hover": { backgroundColor: v("accent") },
+  ".cm-button:active": { backgroundImage: "none" },
+  ".cm-searchMatch": { backgroundColor: v("muted"), outline: `1px solid ${v("border")}`, borderRadius: "2px" },
+  ".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: v("accent"), outline: `1px solid ${v("muted-foreground")}` },
+
+  // The statement that just ran, lit for a moment.
+  ".cm-ran": { backgroundColor: v("accent"), borderRadius: "2px", transition: "background-color 400ms ease" },
+});
+
+export const highlightStyle = HighlightStyle.define([
+  { tag: [t.keyword, t.operatorKeyword, t.modifier, t.controlKeyword, t.definitionKeyword], color: v("chart-1"), fontWeight: "600" },
+  { tag: [t.string, t.special(t.string), t.regexp], color: v("chart-2") },
+  { tag: [t.number, t.bool, t.null, t.atom], color: v("chart-3") },
+  { tag: [t.function(t.variableName), t.function(t.propertyName), t.standard(t.name)], color: v("chart-4") },
+  { tag: [t.propertyName, t.typeName, t.className, t.special(t.name), t.labelName], color: v("chart-5") },
+  { tag: [t.comment, t.lineComment, t.blockComment], color: v("muted-foreground"), fontStyle: "italic" },
+  { tag: [t.punctuation, t.separator, t.bracket, t.operator, t.derefOperator], color: v("muted-foreground") },
+  { tag: t.invalid, color: v("destructive") },
+  { tag: t.strong, fontWeight: "600" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.link, textDecoration: "underline" },
+]);

package/registry/blocks/comment-box/README.md

@@ -0,0 +1,123 @@
+# CommentBox
+
+A comment field that takes rich text: select a word for bold, italic or a
+link, start a line with `-` for a list, type `@` to mention a teammate
+(they go in as a chip). Cmd/Ctrl+Enter posts, as does the Post button.
+While a post is on its way the box is locked; when it fails the words
+stay and the box says why; when it lands the box clears. Give it
+`comments` and it draws the thread above: avatar, name, "5 min ago", the
+body with its formatting and mentions.
+
+It is `doc-editor` in its minimal mode (no `/` menu, no drag handles), so
+a comment is BlockNote JSON — the same doc every text block uses.
+
+```jsx
+import { CommentBox } from "../components/blocks/comment-box";   // a Makersclaw app ("./blocks/comment-box" from components/)
+import { CommentBox } from "@/components/makersclaw/blocks/comment-box";   // a shadcn project
+```
+
+It is a client component: render it from a `"use client"` component, and
+load the thread in the server surface (README §4). `makersclaw add
+comment-box` adds `doc-editor` with it (and its npm packages: run
+`npm install` after).
+
+## The data
+
+A comment in `comments`:
+
+```js
+{
+  id: "c-81",
+  author: { id: "u-lena", name: "Lena Fischer", src: "https://…/lena.jpg" },   // or just "Lena Fischer"
+  body: [ /* the doc onPost gave you */ ],   // or a plain string
+  createdAt: "2026-09-23T09:12:00Z",          // ISO string, Date or ms
+  edited: false,                              // true adds "(edited)"
+}
+```
+
+Store `body` as it came out of `onPost` (a `jsonb` column). Keep a plain
+copy beside it for search and notifications: `docToText(doc)` from
+`doc-editor`. The people mentioned are `docMentions(doc)` — notify them.
+
+## Props
+
+- `onPost(doc)` — required. `async`, returns `{ ok: true }` or
+  `{ ok: false, error? }` (`error` is shown under the box; without it,
+  "Couldn't post…"). A throw counts as a failure. Only an ok clears the
+  box. An empty box never posts.
+- `comments` — the thread, oldest first, drawn above the box. Leave it out
+  for the field alone; `[]` shows `emptyText`.
+- `author` — `{ name, src? }`, who is writing: their avatar sits beside
+  the box from 640px.
+- `mentions` — `async (query) => [{ id, label, description? }]`: turns on
+  `@` (doc-editor's `mentions`).
+- `placeholder` — `"Write a comment…"`.
+- `postLabel` — the button, `"Post"` ("Reply", "Send").
+- `label` — the field's accessible name, `"Comment"`.
+- `threadLabel` — the list's accessible name, `"Comments"`.
+- `emptyText` — `"No comments yet."`.
+- `autoFocus` — `false`.
+- `disabled` — `false`; `true` locks the box (no edit, no post).
+- `className` — layout around it.
+
+The other exports, for a thread of your own:
+
+- `CommentComposer` — the field and its buttons: `onSubmit(doc)` (same
+  answer as `onPost`), `author`, `mentions`, `defaultValue` (a doc to
+  start from — editing a comment), `placeholder`, `submitLabel`
+  (`"Post"`), `submitIcon` (a kit icon name, `"send"`; `null` for none),
+  `busyLabel` (shown while it runs), `failedText`,
+  `onCancel` (adds a Cancel button), `cancelLabel`, `label`,
+  `autoFocus`, `disabled`, `clearOnSubmit` (`true`; `false` when the
+  composer goes away after a save), `className`.
+- `CommentBody` — `{ doc, className }`: a doc drawn read-only as plain
+  HTML (server too): paragraphs, headings, lists, checklists, quotes,
+  code, tables, links, image links, mentions and fields as chips.
+- `CommentTime` — `{ date, className }`: a `<time>`; the absolute date on
+  the server, "5 min ago" once mounted, kept current each minute.
+
+## Example
+
+```jsx
+// components/TaskComments.jsx — client
+"use client";
+import { useState } from "react";
+import { insertRow } from "../lib/actions";
+import { CommentBox } from "./blocks/comment-box";
+import { docToText } from "./blocks/doc-editor";
+
+export default function TaskComments({ task, me, team, initial }) {
+  const [comments, setComments] = useState(initial);
+  const findPeople = async (q) =>
+    team.filter((p) => p.name.toLowerCase().includes(q.toLowerCase())).map((p) => ({ id: p.id, label: p.name }));
+
+  async function post(doc) {
+    const res = await insertRow({
+      source: "public.comments",
+      values: { task_id: task.id, author_id: me.id, body: doc, body_text: docToText(doc) },
+    });
+    if (!res.ok) return { ok: false, error: res.error };
+    setComments((c) => [...c, { id: res.id, author: me, body: doc, createdAt: new Date() }]);
+    return { ok: true };
+  }
+
+  return <CommentBox comments={comments} onPost={post} author={me} mentions={findPeople} />;
+}
+```
+
+## What it will not do
+
+- Edit or delete a posted comment, react, or reply in a nested thread: the
+  thread is read-only. Notes you keep, edit and delete on a record are
+  `record-notes`; build a richer thread from `CommentComposer` +
+  `CommentBody` in your own component.
+- Attach files or images, or offer a `/` menu: it is a comment, not a
+  document (`doc-editor` for that).
+- Notify anyone: read the mentions off the doc (`docMentions`) and send
+  them yourself.
+- Load older comments or scroll the thread: it draws what it is given;
+  put it in a scrolling box and page it yourself.
+
+An editor it cannot be is your own component in `components/` — not an
+edit to this block. Its files are fixed: `npm run check` refuses a
+change, and `makersclaw add comment-box` restores them.

package/registry/blocks/comment-box/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "comment-box",
+  "title": "CommentBox",
+  "description": "A minimal rich comment field (DocEditor in minimal mode): bold, italic, links and lists from the selection toolbar or markdown shortcuts, @mentions as chips, Cmd/Ctrl+Enter to post. It posts through an async onPost(doc) that answers { ok }, keeps the draft and says why when it fails, and clears when it lands. With `comments` it draws the thread above it: avatar, name, relative time, the rich body. Also exports the composer alone, the read-only body renderer and the timestamp.",
+  "useWhen": "People comment on something in the app: a task, a design, a document, an approval, a support ticket; a reply field with @mentions under a thread. Not dated notes kept on a record with edit and delete (record-notes), not a conversation with an assistant (chat), not a long document (doc-editor, doc-page).",
+  "tags": ["comment", "comments", "thread", "reply", "mention", "composer", "discussion", "feedback", "rich text", "blocknote", "cmd enter"],
+  "exports": ["CommentBox", "CommentComposer", "CommentBody", "CommentTime"],
+  "files": ["index.js", "comment-box.jsx", "comment-body.jsx", "comment-time.jsx"],
+  "requires": ["doc-editor"]
+}

package/registry/blocks/comment-box/comment-body.jsx

@@ -0,0 +1,217 @@
+// CommentBody — a posted doc, drawn read-only as plain React.
+//
+// Why not a read-only DocEditor: a thread is many small docs, and one
+// BlockNote editor per comment is heavy and paints only after mount. This
+// walks the same JSON (the shapes doc-editor's README lists) and renders
+// on the server too. Mentions and fields look like the editor's chips.
+// A block type it does not know shows its text, never nothing.
+import { Fragment } from "react";
+import { Icon, Separator, cx } from "../../ui";
+
+const noText = (content) => inlineOf(content).every((c) => c?.type === "text" && !(c.text ?? "").trim());
+
+const CHIP = "inline-flex items-baseline rounded-sm px-1 font-medium whitespace-nowrap";
+
+/** 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 : [];
+}
+
+function styled(text, styles, key) {
+  let node = text;
+  const s = styles ?? {};
+  if (s.code) node = <code className="rounded-sm bg-muted px-1 font-mono text-[0.9em]">{node}</code>;
+  if (s.bold) node = <strong className="font-semibold">{node}</strong>;
+  if (s.italic) node = <em>{node}</em>;
+  if (s.underline) node = <u>{node}</u>;
+  if (s.strike) node = <s>{node}</s>;
+  return <Fragment key={key}>{node}</Fragment>;
+}
+
+const safeHref = (href) => (typeof href === "string" && /^(https?:|mailto:|tel:|\/|#)/i.test(href.trim()) ? href.trim() : undefined);
+
+function Inline({ content }) {
+  return inlineOf(content).map((c, i) => {
+    if (!c || typeof c !== "object") return null;
+    if (c.type === "text") return styled(c.text ?? "", c.styles, i);
+    if (c.type === "link")
+      return (
+        <a key={i} href={safeHref(c.href)} target="_blank" rel="noreferrer noopener" className="text-primary underline underline-offset-2">
+          <Inline content={c.content} />
+        </a>
+      );
+    if (c.type === "mention")
+      return (
+        <span key={i} className={cx(CHIP, "bg-primary/10 text-primary")} data-mention={c.props?.id}>
+          @{c.props?.label || c.props?.id}
+        </span>
+      );
+    if (c.type === "field")
+      return (
+        <span key={i} className={cx(CHIP, "border border-dashed border-border bg-muted text-muted-foreground")} title={`{${c.props?.key ?? ""}}`}>
+          {c.props?.label || c.props?.key}
+        </span>
+      );
+    return Array.isArray(c.content) ? <Inline key={i} content={c.content} /> : null;
+  });
+}
+
+const LISTS = { bulletListItem: "ul", numberedListItem: "ol", checkListItem: "ul", toggleListItem: "ul" };
+const LIST_CLASS = {
+  bulletListItem: "list-disc ps-5",
+  numberedListItem: "list-decimal ps-5",
+  checkListItem: "",
+  toggleListItem: "list-disc ps-5",
+};
+
+function Children({ blocks }) {
+  return Array.isArray(blocks) && blocks.length ? (
+    <div className="mt-1 grid gap-1 ps-4">
+      <Blocks blocks={blocks} />
+    </div>
+  ) : null;
+}
+
+function ListItem({ block }) {
+  if (block.type === "checkListItem") {
+    const done = !!block.props?.checked;
+    return (
+      <li className="flex items-start gap-2">
+        <Icon name={done ? "check-circle" : "circle"} size={16} className={cx("mt-0.5 shrink-0", done ? "text-primary" : "text-muted-foreground")} />
+        <span className="sr-only">{done ? "Done: " : "To do: "}</span>
+        <div className={cx("min-w-0", done && "text-muted-foreground line-through")}>
+          <Inline content={block.content} />
+          <Children blocks={block.children} />
+        </div>
+      </li>
+    );
+  }
+  return (
+    <li>
+      <Inline content={block.content} />
+      <Children blocks={block.children} />
+    </li>
+  );
+}
+
+function tableRows(content) {
+  return (content?.rows ?? []).map((r) => (r?.cells ?? []).map((cell) => cell?.content ?? cell));
+}
+
+function Block({ block }) {
+  const { type, props } = block;
+  switch (type) {
+    case "heading":
+      return (
+        <p className={cx("font-semibold", props?.level === 1 ? "text-base" : "text-sm")}>
+          <Inline content={block.content} />
+        </p>
+      );
+    case "quote":
+      return (
+        <blockquote className="border-s-2 border-border ps-3 text-muted-foreground">
+          <Inline content={block.content} />
+        </blockquote>
+      );
+    case "codeBlock":
+      return (
+        <pre className="overflow-x-auto rounded-md bg-muted p-2 font-mono text-xs">
+          <code>
+            <Inline content={block.content} />
+          </code>
+        </pre>
+      );
+    case "divider":
+      return <Separator className="my-1" />;
+    case "image": {
+      const src = safeHref(props?.url);
+      return src ? (
+        <a href={src} target="_blank" rel="noreferrer noopener" className="inline-flex items-center gap-1.5 text-primary underline underline-offset-2">
+          <Icon name="image" size={14} />
+          {props?.caption || props?.name || "Image"}
+        </a>
+      ) : null;
+    }
+    case "table": {
+      const rows = tableRows(block.content);
+      if (!rows.length) return null;
+      return (
+        <div className="overflow-x-auto">
+          {/* raw: a doc's table is data drawn as it was typed, not a kit Table of records */}
+          <table className="text-xs">
+            <tbody>
+              {rows.map((r, i) => (
+                <tr key={i} className="border-b border-border last:border-0">
+                  {r.map((cell, j) => (
+                    <td key={j} className={cx("px-2 py-1 align-top", i === 0 && "font-medium")}>
+                      <Inline content={cell} />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      );
+    }
+    default: {
+      const empty = noText(block.content);
+      return (
+        <>
+          <p className={empty ? "min-h-5" : undefined}>
+            <Inline content={block.content} />
+          </p>
+          <Children blocks={block.children} />
+        </>
+      );
+    }
+  }
+}
+
+/** Consecutive list items of one kind become one list. */
+function Blocks({ blocks }) {
+  const out = [];
+  let run = null;
+  (Array.isArray(blocks) ? blocks : []).forEach((b, i) => {
+    if (!b || typeof b !== "object") return;
+    const tag = LISTS[b.type];
+    if (tag) {
+      if (!run || run.type !== b.type) {
+        run = { type: b.type, tag, items: [], key: b.id ?? `l${i}` };
+        out.push(run);
+      }
+      run.items.push(b);
+      return;
+    }
+    run = null;
+    out.push(b);
+  });
+  return out.map((x, i) => {
+    if (x.items) {
+      const Tag = x.tag;
+      return (
+        <Tag key={x.key} className={cx("grid gap-0.5", LIST_CLASS[x.type])}>
+          {x.items.map((b, j) => (
+            <ListItem key={b.id ?? j} block={b} />
+          ))}
+        </Tag>
+      );
+    }
+    return <Block key={x.id ?? `b${i}`} block={x} />;
+  });
+}
+
+/** A doc to read: `doc` is BlockNote JSON, or a plain string (one
+ *  paragraph per line). Trailing empty paragraphs are dropped. */
+export function CommentBody({ doc, className }) {
+  let blocks = typeof doc === "string" ? doc.split("\n").map((line) => ({ type: "paragraph", content: line })) : Array.isArray(doc) ? doc : [];
+  let end = blocks.length;
+  while (end > 0 && blocks[end - 1]?.type === "paragraph" && noText(blocks[end - 1].content) && !blocks[end - 1].children?.length) end--;
+  blocks = blocks.slice(0, end);
+  return (
+    <div className={cx("grid gap-1 break-words text-sm", className)}>
+      <Blocks blocks={blocks} />
+    </div>
+  );
+}