makersclaw 0.2.0 → 0.3.1

package/registry/blocks/doc-page/README.md

@@ -0,0 +1,119 @@
+# DocPage
+
+One Notion-style page: an emoji icon, a big title, and the rich text
+under it. The text is the `doc-editor` block (type `/` for headings,
+lists, checklists, tables; `@` mentions a person). Edits save themselves
+through `onSave` a moment after typing stops; the top bar says **Saved**,
+**Saving…** or **Couldn't save** with a Retry. Cmd/Ctrl+S saves at once.
+Read-only shows the same page with nothing to edit. It is the wiki page:
+`knowledge-base` puts a page tree beside it.
+
+```jsx
+import { DocPage } from "../components/blocks/doc-page";   // a Makersclaw app ("./blocks/doc-page" from components/)
+import { DocPage } from "@/components/makersclaw/blocks/doc-page";   // a shadcn project
+```
+
+It is a client component: render it from a `"use client"` component, and
+load the page in the server surface (README §4). `makersclaw add
+doc-page` adds `doc-editor` too (and its BlockNote packages: run `npm
+install` after).
+
+## The data
+
+A page is `{ id, title, icon, doc }`:
+
+- `id` — the page's key.
+- `title` — plain text, one line (it wraps on screen).
+- `icon` — an emoji, or `null` for none.
+- `doc` — the body as BlockNote JSON (see the doc-editor README): store
+  it as it comes, in a `jsonb` column.
+
+`onSave` receives the whole page, every time.
+
+## Props
+
+- `id` — which page this is. The page reads `title`, `icon` and `doc`
+  when it mounts and again whenever `id` changes; in between it owns the
+  draft, so a parent re-rendering with older props never throws away
+  typing. To show another page, change `id`.
+- `title` — default `""`.
+- `icon` — default `null`.
+- `doc` — default an empty doc.
+- `onSave(page)` — `async ({ id, title, icon, doc }) => ({ ok, error? })`.
+  Called `saveDelay` ms after the last edit, one save at a time (edits
+  made during a save go out right after it). `{ ok: false, error }` or a
+  throw shows "Couldn't save" with `error` as the reason and a Retry; the
+  edits stay on screen and the next edit tries again. Without `onSave`
+  there is no save state (an editor you read from `onChange`).
+- `onChange(page)` — every edit, with the whole page (to update a title
+  in a list beside it as it is typed). Not a save.
+- `readOnly` — `false` (default). `true`: the title is a heading, the
+  icon a picture, the editor read-only; no save state.
+- `saveDelay` — ms of quiet before a save, default `1000`.
+- `placeholder` — the empty body's hint, default "Write something, or
+  press / for blocks".
+- `titlePlaceholder` — default "Untitled".
+- `icons` — the emoji offered by the icon picker (default 24 common
+  ones). `[]` turns picking off (a given `icon` still shows).
+- `meta` — a node under the title: "Edited by June · 2 days ago".
+- `breadcrumb` — a node at the left of the top bar (where the page
+  sits).
+- `actions` — a node at the right of the top bar: a kit `Menu` of page
+  actions, a Share button.
+- `width` — `"normal"` (default, a reading column) · `"wide"` · `"full"`.
+- `autoFocus` — put the caret in the title when it mounts (a page just
+  created).
+- `mentions`, `fields`, `slashItems`, `uploadFile` — passed to the
+  editor; see the doc-editor README.
+- `className` — layout around it. Never colour.
+
+Keys: Enter or ↓ at the end of the title moves into the body; Cmd/Ctrl+S
+saves now. A tab closed with an edit unsaved asks first; a page left
+(another `id`, the surface unmounted) sends its unsent edit on the way
+out without waiting for the answer.
+
+## Example
+
+```jsx
+// components/WikiPage.jsx — client
+"use client";
+import { updateRow } from "../lib/actions";
+import { DocPage } from "./blocks/doc-page";
+
+export default function WikiPage({ page, team, canEdit }) {
+  return (
+    <DocPage
+      id={page.id}
+      title={page.title}
+      icon={page.icon}
+      doc={page.body}
+      readOnly={!canEdit}
+      meta={`Edited by ${page.edited_by_name}`}
+      onSave={({ id, title, icon, doc }) =>
+        updateRow({ source: "public.wiki_pages", id, patch: { title, icon, body: doc } })
+      }
+      mentions={async (q) =>
+        team.filter((p) => p.name.toLowerCase().includes(q.toLowerCase())).map((p) => ({ id: p.id, label: p.name }))
+      }
+    />
+  );
+}
+```
+
+For search or a preview, keep a plain-text copy beside the doc:
+`docToText(doc)` from the doc-editor block, saved in the same `onSave`.
+
+## What it will not do
+
+- Hold more than one page, or a tree of them: that is `knowledge-base`.
+- Collaborate live: saves are last-write-wins, whole page at a time.
+- Keep an edit when the browser is closed without an answer: the tab
+  asks before closing while an edit is unsaved; after that it is gone.
+- Cover images, page history, comments or sharing: put your own
+  controls in `actions`.
+- Pick any emoji in the world: the grid is `icons`.
+
+A page it cannot be is your own component in `components/`, built on
+the doc-editor block — not an edit to this block. Its files are fixed:
+`npm run check` refuses a change, and `makersclaw add doc-page` restores
+them.

package/registry/blocks/doc-page/autosave.js

@@ -0,0 +1,104 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// useAutosave — the save loop behind DocPage, kept apart so it reads on
+// its own. Every edit bumps a version and (re)starts a timer; when the
+// timer fires the latest page goes out through `save`. One save at a
+// time: edits made while one is in flight are sent right after it. A
+// failure keeps the edits, says so, and the next edit (or `flush`) tries
+// again. Leaving (unmount) sends what is still unsent, without waiting.
+//
+//   status   "saved" · "pending" (an edit waits for the timer) ·
+//            "saving" · "error"
+//   error    the failure's text while status is "error"
+//   change(payload)   an edit: payload is what `save` will receive
+//   flush()           save now (Cmd/Ctrl+S, Retry)
+
+export function useAutosave(save, delay = 1000) {
+  const [status, setStatus] = useState("saved");
+  const [error, setError] = useState(null);
+  const saveRef = useRef(save);
+  saveRef.current = save;
+  const latest = useRef(null);
+  const version = useRef(0);
+  const saved = useRef(0);
+  const busy = useRef(false);
+  const timer = useRef(null);
+  const alive = useRef(true);
+
+  const run = useCallback(async () => {
+    clearTimeout(timer.current);
+    timer.current = null;
+    if (busy.current || !saveRef.current) return;
+    if (version.current === saved.current) {
+      setStatus("saved");
+      return;
+    }
+    const v = version.current;
+    busy.current = true;
+    setStatus("saving");
+    let res;
+    try {
+      res = await saveRef.current(latest.current);
+    } catch (e) {
+      res = { ok: false, error: e?.message };
+    }
+    busy.current = false;
+    if (!alive.current) return;
+    if (res?.ok === false) {
+      setError(res.error || "Couldn't reach the server.");
+      setStatus("error");
+      return;
+    }
+    saved.current = Math.max(saved.current, v);
+    setError(null);
+    if (version.current !== saved.current) run();
+    else setStatus("saved");
+  }, []);
+
+  const change = useCallback(
+    (payload) => {
+      latest.current = payload;
+      version.current += 1;
+      if (!saveRef.current) return;
+      setStatus((s) => (s === "saving" ? s : "pending"));
+      clearTimeout(timer.current);
+      timer.current = setTimeout(run, delay);
+    },
+    [delay, run],
+  );
+
+  const flush = useCallback(() => {
+    run();
+  }, [run]);
+
+  // Unsent edits on the way out: warn before the tab closes, and send them
+  // when the page goes (another page opened, the surface left).
+  const unsent = status !== "saved";
+  useEffect(() => {
+    if (!unsent) return;
+    const warn = (e) => {
+      e.preventDefault();
+      e.returnValue = "";
+    };
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [unsent]);
+
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+      clearTimeout(timer.current);
+      if (version.current !== saved.current && saveRef.current) {
+        saved.current = version.current;
+        Promise.resolve()
+          .then(() => saveRef.current(latest.current))
+          .catch(() => {});
+      }
+    };
+  }, []);
+
+  return { status, error, change, flush };
+}

package/registry/blocks/doc-page/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "doc-page",
+  "title": "DocPage",
+  "description": "A Notion-style page: an emoji icon (picked from a grid), a big plain title, and the rich-text editor under it (doc-editor: / menu, markdown shortcuts, @mentions). Edits autosave through an async onSave a moment after typing stops, with Saved / Saving… / Couldn't save + Retry in the top bar, Cmd/Ctrl+S to save now and unsent edits sent when the page is left. A read-only mode shows the same page with nothing to edit; slots for a breadcrumb, actions and a meta line.",
+  "useWhen": "A screen is one document someone reads and writes: a wiki or handbook page, a playbook, a policy, a project page, a one-pager. The knowledge-base block puts a page tree beside it. Not for a short field of rich text inside a form (doc-editor), notes on a record (record-notes) or a comment (comment-box).",
+  "tags": ["page", "document", "doc", "wiki", "notion", "editor", "rich text", "autosave", "title", "icon", "emoji", "read-only", "handbook", "notes"],
+  "exports": ["DocPage"],
+  "files": ["index.js", "doc-page.jsx", "autosave.js"],
+  "requires": ["doc-editor"]
+}

package/registry/blocks/doc-page/demo.jsx

@@ -0,0 +1,137 @@
+"use client";
+
+// DocPage two ways — the gallery's and the smoke test's surface. Not
+// installed into apps.
+//   Editable   a handbook page that autosaves. Pick whether the pretend
+//              server takes the save or refuses it, and watch the bar go
+//              Saving… → Saved, or → Couldn't save with Retry.
+//   Read-only  the same page for someone who may only read it.
+import { useState } from "react";
+import { Card, Kicker, Menu, ToggleGroup } from "../components/ui";
+import { DocPage } from "../components/blocks/doc-page";
+import { docToText } from "../components/blocks/doc-editor";
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+const t = (text, styles = {}) => ({ type: "text", text, styles });
+
+const PEOPLE = [
+  { id: "u-june", label: "June Okafor", description: "People ops" },
+  { id: "u-tomas", label: "Tomás Ortega", description: "Engineering" },
+  { id: "u-lena", label: "Lena Fischer", description: "Sales" },
+];
+const findPeople = async (q) => PEOPLE.filter((p) => p.label.toLowerCase().includes(q.toLowerCase()));
+
+const HANDBOOK_PAGE = {
+  id: "page-onboarding",
+  icon: "👋",
+  title: "Your first week at Larkspur",
+  doc: [
+    { type: "paragraph", content: [t("Welcome aboard. This page is the one place to look during week one; "), { type: "mention", props: { id: "u-june", label: "June Okafor" } }, t(" keeps it current.")] },
+    { type: "heading", props: { level: 2 }, content: [t("Day one")] },
+    { type: "checkListItem", props: { checked: true }, content: [t("Pick up your laptop from the front desk")] },
+    { type: "checkListItem", content: [t("Set up SSO and the password manager")] },
+    { type: "checkListItem", content: [t("Book a 30-minute intro with your manager")] },
+    { type: "heading", props: { level: 2 }, content: [t("How we work")] },
+    { type: "bulletListItem", content: [t("Writing beats meetings: "), t("decisions live in docs", { bold: true }), t(", not in threads.")] },
+    { type: "bulletListItem", content: [t("Core hours are 10:00–15:00 in your own time zone.")] },
+    { type: "bulletListItem", content: [t("Ship small, ship on Tuesdays and Thursdays.")] },
+    { type: "quote", content: [t("If you are unsure who owns something, ask in the team channel. Nobody minds.")] },
+  ],
+};
+
+function EditableDemo() {
+  const [outcome, setOutcome] = useState("ok");
+  const [last, setLast] = useState(null);
+  const save = async (page) => {
+    await wait(700);
+    if (outcome === "fail") return { ok: false, error: "The server is not answering. Your edits are still here." };
+    setLast({ title: page.title || "Untitled", words: docToText(page.doc ?? []).split(/\s+/).filter(Boolean).length, icon: page.icon });
+    return { ok: true };
+  };
+  return (
+    <div className="grid gap-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <Kicker>Saves</Kicker>
+        <ToggleGroup
+          type="single"
+          size="sm"
+          aria-label="What the pretend server does"
+          value={outcome}
+          onChange={(v) => v && setOutcome(v)}
+          items={[
+            { value: "ok", label: "Succeed" },
+            { value: "fail", label: "Fail" },
+          ]}
+        />
+        <span className="text-sm text-muted-foreground">
+          {last ? `Last saved: ${last.icon ?? ""} ${last.title} · ${last.words} words` : "Nothing saved yet: edit the title or the page."}
+        </span>
+      </div>
+      <Card>
+        <DocPage
+          {...HANDBOOK_PAGE}
+          onSave={save}
+          mentions={findPeople}
+          meta="Edited by June Okafor · 2 days ago"
+          breadcrumb={<span className="truncate text-sm text-muted-foreground">Handbook / People</span>}
+          actions={
+            <Menu
+              label="Page actions"
+              items={[
+                { label: "Copy link", icon: "link", onSelect: () => {} },
+                { label: "Move to…", icon: "folder", onSelect: () => {} },
+                { type: "separator" },
+                { label: "Delete page", icon: "trash", tone: "danger", onSelect: () => {} },
+              ]}
+            />
+          }
+        />
+      </Card>
+    </div>
+  );
+}
+
+function ReadOnlyDemo() {
+  return (
+    <Card>
+      <DocPage {...HANDBOOK_PAGE} id="page-onboarding-ro" readOnly meta="You can read this page. Ask June Okafor to edit it." />
+    </Card>
+  );
+}
+
+function BlankDemo() {
+  const [saved, setSaved] = useState(0);
+  return (
+    <Card>
+      <DocPage
+        id="page-new"
+        onSave={async () => {
+          await wait(400);
+          setSaved((n) => n + 1);
+          return { ok: true };
+        }}
+        meta={saved ? `Saved ${saved} time${saved === 1 ? "" : "s"}` : "A new page: no icon, no title yet."}
+      />
+    </Card>
+  );
+}
+
+export default function DocPageDemo() {
+  const [view, setView] = useState("edit");
+  return (
+    <div className="grid gap-4">
+      <ToggleGroup
+        type="single"
+        aria-label="Which page"
+        value={view}
+        onChange={(v) => v && setView(v)}
+        items={[
+          { value: "edit", label: "Editable" },
+          { value: "read", label: "Read-only" },
+          { value: "blank", label: "New page" },
+        ]}
+      />
+      {view === "edit" ? <EditableDemo /> : view === "read" ? <ReadOnlyDemo /> : <BlankDemo />}
+    </div>
+  );
+}

package/registry/blocks/doc-page/doc-page.jsx

@@ -0,0 +1,276 @@
+"use client";
+
+// DocPage — one Notion-style page: an icon, a title, the rich text under
+// it (DocEditor), and a save state in the top bar. Edits save themselves
+// through `onSave` a moment after typing stops (useAutosave), and the bar
+// says "Saved", "Saving…" or "Couldn't save" with a Retry. Read-only
+// shows the same page with nothing to edit.
+//
+// The page reads `title`, `icon` and `doc` when it mounts and whenever
+// `id` changes (another page opened); in between it owns the draft, so a
+// parent re-rendering with stale props never throws away typing. Leaving
+// a page with an edit still unsent sends it on the way out.
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Button, Icon, Popover, Spinner, cx } from "../../ui";
+import { DocEditor, emptyDoc, useDocEditor } from "../doc-editor";
+import { useAutosave } from "./autosave";
+
+const DEFAULT_ICONS = [
+  "📄", "📘", "📝", "📌", "📎", "🗂️",
+  "💡", "🎯", "🚀", "📈", "🧭", "🛠️",
+  "🤝", "👋", "📣", "🧪", "🔒", "⚙️",
+  "🗓️", "✅", "❓", "⭐", "🌱", "🏁",
+];
+
+const WIDTHS = { normal: "max-w-3xl", wide: "max-w-5xl", full: "max-w-none" };
+
+export function DocPage({ id, ...props }) {
+  // A new id is a new page: remount, so the draft, the editor and the save
+  // loop start from that page (the old one flushes on its way out).
+  return <PageBody key={id ?? "page"} id={id} {...props} />;
+}
+
+function PageBody({
+  id,
+  title: initialTitle = "",
+  icon: initialIcon = null,
+  doc: initialDoc,
+  onSave,
+  onChange,
+  readOnly = false,
+  saveDelay = 1000,
+  placeholder = "Write something, or press / for blocks",
+  titlePlaceholder = "Untitled",
+  icons = DEFAULT_ICONS,
+  meta,
+  breadcrumb,
+  actions,
+  width = "normal",
+  autoFocus = false,
+  mentions,
+  fields,
+  slashItems,
+  uploadFile,
+  className,
+}) {
+  const [title, setTitle] = useState(initialTitle ?? "");
+  const [icon, setIcon] = useState(initialIcon || null);
+  // The page as last edited, read by every save (the editor's onChange and
+  // the title's fire from different renders).
+  const current = useRef({ id, title: initialTitle ?? "", icon: initialIcon || null, doc: Array.isArray(initialDoc) && initialDoc.length ? initialDoc : emptyDoc() });
+  const editorRef = useDocEditor();
+  const titleRef = useRef(null);
+  const saving = useAutosave(onSave && !readOnly ? onSave : null, saveDelay);
+
+  const edit = (patch) => {
+    const page = { ...current.current, ...patch };
+    current.current = page;
+    onChange?.(page);
+    saving.change(page);
+  };
+
+  // The title grows with its text (it wraps on a phone) and never holds a
+  // line break: Enter moves into the page instead.
+  useLayoutEffect(() => {
+    const el = titleRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [title]);
+  useEffect(() => {
+    if (autoFocus && !readOnly) titleRef.current?.focus();
+  }, [autoFocus, readOnly]);
+
+  const onTitleKey = (e) => {
+    if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      editorRef.current?.focus();
+    } else if (e.key === "ArrowDown" && e.currentTarget.selectionStart === e.currentTarget.value.length) {
+      e.preventDefault();
+      editorRef.current?.focus();
+    }
+  };
+
+  // Cmd/Ctrl+S saves now instead of the browser's "save page as".
+  const onKeyDown = (e) => {
+    if (!onSave || readOnly) return;
+    if ((e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === "s") {
+      e.preventDefault();
+      saving.flush();
+    }
+  };
+
+  const showBar = breadcrumb || actions || (onSave && !readOnly);
+
+  return (
+    // raw: a plain box that hears Cmd/Ctrl+S from the title and the editor
+    // inside it; no control of its own.
+    <article className={cx("group/page mx-auto w-full min-w-0", WIDTHS[width] ?? WIDTHS.normal, className)} onKeyDown={onKeyDown}>
+      {showBar ? (
+        <div className="flex min-h-11 items-center gap-2">
+          <div className="min-w-0 flex-1">{breadcrumb}</div>
+          {onSave && !readOnly ? <SaveState status={saving.status} error={saving.error} onRetry={saving.flush} /> : null}
+          {actions ? <div className="flex shrink-0 items-center gap-1">{actions}</div> : null}
+        </div>
+      ) : null}
+
+      <header className="pt-6 sm:ps-12 sm:pt-10">
+        {readOnly ? (
+          icon ? (
+            <div className="mb-2 text-5xl leading-none" aria-hidden="true">
+              {icon}
+            </div>
+          ) : null
+        ) : (
+          <IconPicker icon={icon} icons={icons} onPick={(next) => {
+            setIcon(next);
+            edit({ icon: next });
+          }} />
+        )}
+
+        {readOnly ? (
+          <h1 className="text-3xl font-bold leading-tight tracking-tight text-foreground [overflow-wrap:anywhere] sm:text-4xl">
+            {title || <span className="text-muted-foreground">{titlePlaceholder}</span>}
+          </h1>
+        ) : (
+          // raw: a page title is heading-sized text that wraps with no box
+          // around it; the kit's Input and Textarea are boxed form fields.
+          <textarea
+            ref={titleRef}
+            rows={1}
+            value={title}
+            placeholder={titlePlaceholder}
+            aria-label="Page title"
+            spellCheck
+            onChange={(e) => {
+              const next = e.target.value.replace(/\r?\n/g, " ");
+              setTitle(next);
+              edit({ title: next });
+            }}
+            onKeyDown={onTitleKey}
+            className="block w-full resize-none overflow-hidden border-0 bg-transparent p-0 text-3xl font-bold leading-tight tracking-tight text-foreground outline-none placeholder:text-muted-foreground/70 focus-visible:outline-none sm:text-4xl"
+          />
+        )}
+        {meta ? <div className="mt-2 text-sm text-muted-foreground">{meta}</div> : null}
+      </header>
+
+      <div className="mt-4 pb-16">
+        <DocEditor
+          defaultValue={initialDoc}
+          onChange={(doc) => edit({ doc })}
+          editable={!readOnly}
+          placeholder={placeholder}
+          editorRef={editorRef}
+          label={title || titlePlaceholder}
+          mentions={mentions}
+          fields={fields}
+          slashItems={slashItems}
+          uploadFile={uploadFile}
+          className="min-h-64"
+        />
+      </div>
+    </article>
+  );
+}
+
+/** "Saved" · "Saving…" · "Couldn't save" + Retry, announced politely. */
+function SaveState({ status, error, onRetry }) {
+  return (
+    <div role="status" aria-live="polite" className="flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground">
+      {status === "error" ? (
+        <>
+          <span className="flex items-center gap-1 text-destructive" title={error || undefined}>
+            <Icon name="warning" size={14} />
+            Couldn't save
+          </span>
+          <span className="sr-only">{error}</span>
+          <Button variant="link" size="sm" onClick={onRetry}>
+            Retry
+          </Button>
+        </>
+      ) : status === "saved" ? (
+        <span className="flex items-center gap-1">
+          <Icon name="check" size={14} />
+          Saved
+        </span>
+      ) : (
+        <span className="flex items-center gap-1.5">
+          <Spinner size="sm" label={null} />
+          Saving…
+        </span>
+      )}
+    </div>
+  );
+}
+
+/** The page's icon: a big emoji that opens a grid of others, or "Add icon"
+ *  while there is none. An empty `icons` list turns picking off. */
+function IconPicker({ icon, icons, onPick }) {
+  const [open, setOpen] = useState(false);
+  const gridId = useId();
+  if (!icons?.length) {
+    return icon ? (
+      <div className="mb-2 text-5xl leading-none" aria-hidden="true">
+        {icon}
+      </div>
+    ) : null;
+  }
+  const pick = (next) => {
+    onPick(next);
+    setOpen(false);
+  };
+  return (
+    <div className={cx(icon ? "mb-2" : "mb-1 -ms-3")}>
+      <Popover
+        open={open}
+        onOpenChange={setOpen}
+        side="bottom"
+        align="start"
+        width="auto"
+        label="Page icon"
+        className="p-2"
+        trigger={(p) =>
+          icon ? (
+            // raw: the page icon is a 64px emoji you press; the kit's
+            // Button squares are 36 and 44px and cx cannot resize them.
+            <button
+              {...p}
+              type="button"
+              aria-label={`Page icon ${icon}, change it`}
+              className="-ms-2 grid size-16 place-items-center rounded-md outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <span className="text-5xl leading-none" aria-hidden="true">
+                {icon}
+              </span>
+            </button>
+          ) : (
+            <Button
+              {...p}
+              variant="quiet"
+              size="sm"
+              icon="plus"
+              className="text-muted-foreground opacity-0 transition-opacity group-hover/page:opacity-100 group-focus-within/page:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100"
+            >
+              Add icon
+            </Button>
+          )
+        }
+      >
+        <div id={gridId} role="group" aria-label="Choose an icon" className="grid grid-cols-6 gap-1">
+          {icons.map((e) => (
+            <Button key={e} variant="quiet" iconOnly aria-label={e} aria-pressed={e === icon} onClick={() => pick(e)} className="aria-pressed:bg-accent">
+              <span className="text-2xl leading-none">{e}</span>
+            </Button>
+          ))}
+        </div>
+        {icon ? (
+          <div className="mt-2 border-t border-border pt-2">
+            <Button variant="quiet" size="sm" icon="trash" onClick={() => pick(null)} className="w-full">
+              Remove icon
+            </Button>
+          </div>
+        ) : null}
+      </Popover>
+    </div>
+  );
+}

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

@@ -0,0 +1,4 @@
+// The DocPage block — `makersclaw add doc-page`. Fixed: compose it through
+// its props (README.md beside this file). A page it cannot be is your own
+// component in components/, built on the doc-editor block.
+export { DocPage } from "./doc-page";