@panphora/clayjs 1.16.0 → 1.18.0

package/src/page/projection.js

@@ -11,6 +11,8 @@
 import { chartModel, renderChartSvg } from "./rich/chart.js";
 import { cellText } from "./rich/cell.js";
 import { bounded, descriptors, entriesOf, keyOf, normalizeEntries } from "./format-codec.js";
+import { nativeAttrs } from "./format-native.js";
+import { safeSrc } from "./address.js";
 
 export const ATOM = "";
 export const BREAK = '@{"type":"hard_break"}';
@@ -26,6 +28,13 @@ const KNOWN = new Set(CODES);
 export const OPAQUE = "data-clay-page-opaque";
 export const VALUE = "data-clay-page-value";
 export const MARKS = "data-clay-page-marks";
+// A person mention's span states its id plainly beside the envelope that carries it:
+// the label is the text, and a reader without the editor shows a name, never a link.
+export const MENTION = "data-page-mention";
+// A date mention reads as a `time` element: the text is the ISO date and `datetime`
+// repeats it, so a reader without the editor shows the day and no zone or reminder.
+export const DATE = "data-page-date";
+const DAY = /^\d{4}-\d{2}-\d{2}$/;
 const ENVELOPE = "1";
 const STRUCTURAL = new Set(["id", "t", "parent", "c", "m"]);
 const knownType = (t) => Object.hasOwn(DEFAULTS, t);
@@ -33,12 +42,14 @@ const knownType = (t) => Object.hasOwn(DEFAULTS, t);
 // Mirrors schema.js attrs minus id and pos (a test pins the two together).
 export const DEFAULTS = {
   paragraph: { parent: null },
-  heading: { parent: null, level: 2 },
+  heading: { parent: null, level: 2, pageIcon: null, pageCoverSrc: null, pageCoverAlt: "", pageCoverX: 50, pageCoverY: 50 },
   list_item: { parent: null, kind: "bullet", indent: 0, checked: false, owner: null, due: null },
   callout: { parent: null },
+  quote: { parent: null },
   code_block: { parent: null, lang: "" },
-  toggle: { parent: null, open: false },
+  toggle: { parent: null, open: false, level: null },
   divider: { parent: null },
+  toc: { parent: null, maxLevel: null },
   image: { parent: null, src: "", alt: "", caption: "", width: null, align: null },
   file: { parent: null, src: "", name: "", size: null, mime: null },
   table: { parent: null, cols: {}, sort: null },
@@ -47,7 +58,44 @@ export const DEFAULTS = {
   tool: { parent: null, artifact: null, rev: null, state: {} },
   preserved: { parent: null, html: "" },
 };
-const TEXT = new Set(["paragraph", "heading", "list_item", "callout", "code_block", "toggle"]);
+const TEXT = new Set(["paragraph", "heading", "list_item", "callout", "quote", "code_block", "toggle"]);
+export const TOC_LABEL = "Table of contents";
+export const TOC_ANCHOR = "page-block-";
+export const blockAnchor = (id) => `${TOC_ANCHOR}${b64url(String(id ?? ""))}`;
+const TOC_MAX_LEVEL = 3;
+const tocLevel = (item) => (item.t === "heading"
+  ? Math.min(6, Math.max(1, Number.isInteger(item.level) ? item.level : 2))
+  : item.t === "toggle" && (item.level === 1 || item.level === 2 || item.level === 3) ? item.level : 0);
+const tocTitle = (item) => item.t === "heading" && (item.level ?? 2) === 1 && (item.parent ?? null) === null;
+const tocMax = (value) => (Number.isInteger(value) && value >= 1 && value <= 6 ? value : TOC_MAX_LEVEL);
+const tocText = (item) => String(item.c ?? "").replace(/[\s\uFFFC]+/gu, " ").trim() || "Untitled";
+
+export function tocEntries(model, maxLevel = TOC_MAX_LEVEL) {
+  const max = tocMax(maxLevel);
+  const title = model.find(tocTitle) ?? null;
+  const out = [];
+  for (const item of model) {
+    const level = tocLevel(item);
+    if (!item.id || !level || level > max || item === title) continue;
+    out.push({ id: item.id, level, text: tocText(item) });
+  }
+  return out;
+}
+
+export function tocHtml(item, model) {
+  const entries = tocEntries(model, item.maxLevel);
+  const root = { level: 0, children: [] };
+  const stack = [root];
+  for (const entry of entries) {
+    while (stack.length > 1 && stack[stack.length - 1].level >= entry.level) stack.pop();
+    const node = { ...entry, children: [] };
+    stack[stack.length - 1].children.push(node);
+    stack.push(node);
+  }
+  const list = (nodes) => `<ul>${nodes.map((node) => `<li><a href="#${blockAnchor(node.id)}">${escText(node.text)}</a>${node.children.length ? list(node.children) : ""}</li>`).join("")}</ul>`;
+  const level = item.maxLevel == null ? "" : ` data-max-level="${escAttr(item.maxLevel)}"`;
+  return `<nav aria-label="${TOC_LABEL}" data-type="toc" data-id="${escAttr(item.id ?? "")}"${level}>${entries.length ? list(root.children) : ""}</nav>`;
+}
 
 const same = (a, b) => canon(a) === canon(b);
 
@@ -146,18 +194,25 @@ export function runsOf(units) {
   return out;
 }
 
-// A mark key as { marks: { b: true, a: ["href"] ... }, entries: [...] }, the
-// entries being the descriptors of every mark this runtime has no code for, in
-// the codec's canonical order.
+// A mark key as { marks: { b: true, a: ["href"] ... }, native: [...], entries: [...] }:
+// the codes this runtime knows, the named descriptors of the four formats it
+// writes (format-native.js), and the entries of every mark it has no code for,
+// each in the codec's canonical order.
 function marksOfKey(key) {
-  const marks = {};
-  if (!key || key[0] === "@") return { marks, entries: [] };
+  const marks = {}, native = [];
+  if (!key || key[0] === "@") return { marks, native: [], entries: [] };
   const opaque = [];
   for (const desc of descriptors(key)) {
-    if (desc.name === undefined && KNOWN.has(desc.code)) marks[desc.code] = desc.attrs ?? true;
+    if (desc.name === undefined) {
+      if (KNOWN.has(desc.code)) marks[desc.code] = desc.attrs ?? true;
+      else opaque.push(desc);
+      continue;
+    }
+    const attrs = nativeAttrs(desc.name, desc.attrs);
+    if (attrs) native.push({ name: desc.name, attrs });
     else opaque.push(desc);
   }
-  return { marks, entries: opaque.length ? entriesOf(opaque) : [] };
+  return { marks, native, entries: opaque.length ? entriesOf(opaque) : [] };
 }
 
 // One unit's key, as the record keeps it: the codes this runtime knows, then
@@ -165,8 +220,8 @@ function marksOfKey(key) {
 const unitKey = (key, text, i) => {
   if (!key) return "";
   if (key[0] === "@") return key === BREAK && text[i] === ATOM ? key : "";
-  const { marks, entries } = marksOfKey(key);
-  return keyOfMarks(safeMarks(marks), entries);
+  const { marks, native, entries } = marksOfKey(key);
+  return keyOfMarks(safeMarks(marks), native.length ? [...entries, ...entriesOf(native)] : entries);
 };
 
 // A link to a script URL is never kept: it would run on the page's origin when a
@@ -277,6 +332,8 @@ const omitDefaults = (t, fields) => {
   return out;
 };
 
+const focal = (v) => Math.min(100, Math.max(0, Number.isFinite(+v) && v !== null && v !== "" ? +v : 50));
+
 const columnWidth = (value) => (typeof value === "number" && Number.isFinite(value) && value > 0 ? Math.round(value) : null);
 
 function cellModel(value) {
@@ -324,9 +381,12 @@ const recordOfItem = (item) => {
 
 // The fields of a known block the runtime has no schema attribute for. They are
 // merged back only when serialized, inside the inert payload.
+// Fields the renderer writes as visible markup, which the reader rebuilds from it.
+const VISIBLE = { table: new Set(["rows"]) };
+
 const extrasOfItem = (item) => {
   const out = {};
-  for (const [k, v] of Object.entries(item)) if (!STRUCTURAL.has(k) && !(knownType(item.t) && Object.hasOwn(DEFAULTS[item.t], k))) out[k] = v;
+  for (const [k, v] of Object.entries(item)) if (!STRUCTURAL.has(k) && !VISIBLE[item.t]?.has(k) && !(knownType(item.t) && Object.hasOwn(DEFAULTS[item.t], k))) out[k] = v;
   return Object.keys(out).length ? envelopeOf(out) : "";
 };
 
@@ -355,7 +415,8 @@ function projectOne({ id, b, t, parent, indent }) {
   for (const k of Object.keys(extras)) delete attrs[k];
   const fields = { ...attrs, parent };
   if (t === "list_item") fields.indent = indent;
-  if (t === "heading") fields.level = clampLevel(attrs.level ?? 2);
+  if (t === "heading") Object.assign(fields, { level: clampLevel(attrs.level ?? 2), pageCoverSrc: safeSrc(fields.pageCoverSrc ?? null), pageCoverX: focal(fields.pageCoverX), pageCoverY: focal(fields.pageCoverY) });
+  if (t === "toggle") fields.level = toggleLevel(attrs.level);
   if (t === "image" && fields.width != null) fields.width = widthOf(String(fields.width));
   if (t === "image") fields.align = alignOf(fields.align);
   if (t === "image" && typeof fields.caption === "string") fields.caption = normalizeText(fields.caption, null).c;
@@ -378,7 +439,23 @@ function projectOne({ id, b, t, parent, indent }) {
   return item;
 }
 
+// A record a newer writer left in an older writer's envelope, for a block type this
+// build knows: the same projection a peer's record gets, without the fields this
+// type does not declare.
+function knownRecordItem(id, record, parent) {
+  const { t } = record;
+  const malformed = new SyntaxError(`page: an envelope names the known block type ${t}`);
+  if (TEXT.has(t) ? record.c != null && typeof record.c !== "string" : record.c != null || record.m != null) throw malformed;
+  let item;
+  try { item = projectOne({ id, b: record, t, parent, indent: 0 }); }
+  catch { throw malformed; }
+  const fields = DEFAULTS[t];
+  return Object.fromEntries(Object.entries(item).filter(([k]) => k === "id" || k === "t" || STRUCTURAL.has(k) || k === "rows" || Object.hasOwn(fields, k)));
+}
+
 const clampLevel = (l) => Math.min(6, Math.max(1, Number.isInteger(l) ? l : 2));
+// A toggle heading is level 1 to 3; anything else is a plain toggle.
+export const toggleLevel = (l) => (l === 1 || l === 2 || l === 3 ? l : null);
 const widthOf = (s) => (/^\d+$/.test(s) ? Number(s) : s);
 export const alignOf = (a) => (a === "left" || a === "right" ? a : null);
 
@@ -410,6 +487,10 @@ const escText = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>
 const escAttr = (s) => escText(String(s)).replace(/"/g, "&quot;");
 const attr = (name, value) => (value === null || value === undefined ? "" : ` ${name}="${escAttr(value)}"`);
 
+// The element each of the four formats is read as in the saved article; the
+// text color and the highlight carry their palette key as data-color.
+const NATIVE_TAGS = { underline: "u", text_color: "span", highlight: "mark" };
+
 export function renderInline(c, m, marksEnvelopes = true) {
   const units = unitsOf(m, c.length) || [];
   let html = "";
@@ -425,13 +506,22 @@ export function renderInline(c, m, marksEnvelopes = true) {
     }
     let j = i + 1;
     while (j < c.length && (units[j] || "") === key && !(c[j] === ATOM && key[0] === "@")) j++;
-    const { marks, entries } = marksOfKey(key);
+    const { marks, native, entries } = marksOfKey(key);
     const want = NEST.filter((code) => marks[code]).map((code) => ({ code, sig: code + JSON.stringify(marks[code]), tag: code === "a" ? "a" : TAGS[code], href: code === "a" ? marks.a[0] : null }));
-    if (entries.length && marksEnvelopes) want.push({ sig: `marks${canon(entries)}`, tag: "span", entries });
+    for (const n of native) want.push({ sig: `native${n.name}${canon(n.attrs)}`, tag: NATIVE_TAGS[n.name], color: n.attrs.color ?? null });
+    const mention = entries.find((entry) => entry.name === "mention");
+    const date = entries.find((entry) => entry.name === "date");
+    const day = date && DAY.test(String(date.attrs.date)) ? String(date.attrs.date) : null;
+    if (entries.length && marksEnvelopes) want.push({ sig: `marks${canon(entries)}`, tag: day ? "time" : "span", entries, mention: mention?.attrs.id, day });
     let keep = 0;
     while (keep < open.length && keep < want.length && open[keep].sig === want[keep].sig) keep++;
     closeTo(keep);
-    for (const w of want.slice(keep)) { html += w.entries ? `<span${marksEnvelope(w.entries)}>` : w.tag === "a" ? `<a${attr("href", w.href)}>` : `<${w.tag}>`; open.push(w); }
+    for (const w of want.slice(keep)) {
+      if (w.entries) html += w.day ? `<time${attr("datetime", w.day)}${attr(DATE, "")}${marksEnvelope(w.entries)}>` : `<span${marksEnvelope(w.entries)}${attr(MENTION, w.mention)}>`;
+      else if (w.tag === "a") html += `<a${attr("href", w.href)}>`;
+      else html += w.color ? `<${w.tag}${attr("data-color", w.color)}>` : `<${w.tag}>`;
+      open.push(w);
+    }
     html += escText(c.slice(i, j));
     i = j;
   }
@@ -440,9 +530,13 @@ export function renderInline(c, m, marksEnvelopes = true) {
 }
 
 const inlineOf = (item) => renderInline(item.c ?? "", item.m);
+const titleHtml = (item) => `<header${attr("data-id", item.id)} data-page-heading="1"${extrasOfItem(item)}>${item.pageCoverSrc ? `<img data-page-cover${attr("src", item.pageCoverSrc)}${attr("alt", item.pageCoverAlt ?? "")} style="object-position:${item.pageCoverX ?? 50}% ${item.pageCoverY ?? 50}%">` : ""}${item.pageIcon ? `<span data-page-icon aria-hidden="true">${escText(item.pageIcon)}</span>` : ""}<h1>${inlineOf(item)}</h1></header>`;
 const toolData = (item) => item.artifact || item.rev || (item.state && Object.keys(item.state).length)
   ? `<script type="application/json" data-tool>${canon({ artifact: item.artifact ?? null, rev: item.rev ?? null, state: item.state ?? {} }).replace(/</g, "\\u003c")}</script>`
   : "";
+// A header names its column for every cell under it: the table id and the column
+// id together, so a copied column keeps a name no other table shares.
+const headerId = (tableId, colId) => `${tableId}-${colId}`;
 const cellHtml = (cell) => (typeof cell === "string" ? escText(cell) : cell && typeof cell === "object" ? renderInline(String(cell.c ?? ""), cell.m) : "");
 const dataAttrs = (obj) => Object.entries(obj).map(([k, v]) => attr(`data-${k}`, v)).join("");
 
@@ -454,6 +548,7 @@ function renderLeaf(item, clean, tables) {
     case "paragraph": return `<p${at}>${inlineOf(item)}</p>`;
     case "heading": { const h = `h${item.level ?? 2}`; return `<${h}${at}>${inlineOf(item)}</${h}>`; }
     case "callout": return `<aside${at} class="page-callout">${inlineOf(item)}</aside>`;
+    case "quote": return `<blockquote${at}>${inlineOf(item)}</blockquote>`;
     case "code_block": return `<pre${at}${attr("data-lang", item.lang || null)}><code>${escText(item.c ?? "")}</code></pre>`;
     case "divider": return `<hr${at}>`;
     case "image": return `<figure${at} data-type="image"${attr("data-align", item.align ?? null)}><img${attr("src", item.src ?? "")}${attr("alt", item.alt ?? "")}${attr("width", item.width ?? null)}>${item.caption ? `<figcaption>${escText(item.caption)}</figcaption>` : ""}</figure>`;
@@ -462,9 +557,12 @@ function renderLeaf(item, clean, tables) {
       return `<div${at} data-type="file"${attr("data-src", item.src ?? "")}${attr("data-name", item.name ?? "")}${attr("data-size", item.size ?? null)}${attr("data-mime", item.mime ?? null)}><a${attr("href", href)} rel="noopener noreferrer">${escText(item.name || "file")}</a></div>`;
     }
     case "table": {
-      const head = item.cols.map((c) => `<th${attr("data-col", c.id)}${attr("data-kind", c.kind ?? null)}${attr("data-width", c.width ?? null)}${attr("style", c.width ? `width:${c.width}px` : null)}>${escText(c.name)}</th>`).join("");
-      const body = item.rows.map((r) => `<tr${attr("data-id", r.id)}>${item.cols.map((c) => `<td>${cellHtml(r.cells[c.id])}</td>`).join("")}</tr>`).join("\n");
-      return `<table${at}${attr("data-sort", item.sort != null ? JSON.stringify(item.sort) : null)}>\n<thead><tr>${head}</tr></thead>\n<tbody>\n${body}\n</tbody>\n</table>`;
+      const head = item.cols.map((c) => {
+        const sorted = item.sort?.col === c.id ? (item.sort.dir === "desc" ? "descending" : "ascending") : null;
+        return `<th${attr("data-col", c.id)}${attr("id", headerId(item.id, c.id))}${attr("data-kind", c.kind ?? null)}${attr("data-width", c.width ?? null)}${attr("style", c.width ? `width:${c.width}px` : null)} scope="col"${attr("aria-sort", sorted)}>${escText(c.name)}</th>`;
+      }).join("");
+      const body = item.rows.map((r) => `<tr${attr("data-id", r.id)}>${item.cols.map((c) => `<td${attr("headers", headerId(item.id, c.id))}>${cellHtml(r.cells[c.id])}</td>`).join("")}</tr>`).join("\n");
+      return `<table${at} aria-label="Table"${attr("data-sort", item.sort != null ? JSON.stringify(item.sort) : null)}>\n<thead><tr>${head}</tr></thead>\n<tbody>\n${body}\n</tbody>\n</table>`;
     }
     case "chart": {
       const data = dataAttrs({ source: item.source ?? null, kind: item.kind ?? null, x: item.x ?? null, series: item.series ? JSON.stringify(item.series) : null, highlight: item.highlight ?? null });
@@ -517,6 +615,7 @@ export function fragmentCleaner(doc) {
 export function renderModel(model, { fallbackOf = () => "", clean = RAW } = {}) {
   const lines = [];
   const tables = new Map(model.filter((item) => item.t === "table").map((item) => [item.id, item]));
+  const title = model.find(tocTitle) ?? null;
   const stack = [null];
   const lists = [];
   const add = (s) => { if (lists.length) lines[lines.length - 1] += s; else lines.push(s); };
@@ -539,11 +638,14 @@ export function renderModel(model, { fallbackOf = () => "", clean = RAW } = {})
       continue;
     }
     if (item.t === "toggle") {
-      add(`<details${attr("data-id", item.id)}${extrasOfItem(item)}${item.open ? " open" : ""}><summary>${inlineOf(item)}</summary>`);
+      const h = toggleLevel(item.level);
+      add(`<details${attr("data-id", item.id)}${extrasOfItem(item)}${item.open ? " open" : ""}>${h ? `<summary><h${h}>${inlineOf(item)}</h${h}></summary>` : `<summary>${inlineOf(item)}</summary>`}`);
       stack.push(item.id);
       continue;
     }
     if (item.t === "tool") { add(`<section${attr("data-id", item.id)} data-type="tool">${toolData(item)}${clean.fallback(fallbackOf(item.id))}</section>`); continue; }
+    if (item.t === "toc") { add(tocHtml(item, model)); continue; }
+    if (item === title && (item.pageIcon || item.pageCoverSrc)) { add(titleHtml(item)); continue; }
     add(renderLeaf(item, clean, tables));
   }
   closeLists();
@@ -561,6 +663,17 @@ export function renderBlocks(blocks, opts) {
 const DROP_TAGS = new Set(["SCRIPT", "STYLE", "TEMPLATE", "NOSCRIPT"]);
 const INLINE_TAGS = new Set(["A", "ABBR", "B", "BDI", "BDO", "BR", "CITE", "CODE", "DATA", "DEL", "DFN", "EM", "FONT", "I", "INS", "KBD", "LABEL", "MARK", "Q", "S", "SAMP", "SMALL", "SPAN", "STRIKE", "STRONG", "SUB", "SUP", "TIME", "U", "VAR", "WBR"]);
 
+// The named descriptor an inline element stands for, when it is one of the four
+// formats: <u>, <mark> and a <span data-color> with a palette key. Anything else
+// is not a format this runtime reads natively.
+function nativeOfEl(tag, el) {
+  if (tag === "u") return { name: "underline", attrs: {} };
+  if (tag !== "mark" && tag !== "span") return null;
+  if (tag === "span" && !el.hasAttribute("data-color")) return null;
+  const name = tag === "mark" ? "highlight" : "text_color";
+  return { name, attrs: { color: el.getAttribute("data-color") } };
+}
+
 // Inline content of el as { c, units }, minus the children skip(child) names.
 function inlineOfEl(el, skip = () => false) {
   let c = "";
@@ -579,7 +692,7 @@ function inlineOfEl(el, skip = () => false) {
       if (tag === "br") { c += ATOM; units.push(BREAK); continue; }
       if (tag === "span" && child.hasAttribute("data-atom")) { c += ATOM; units.push(child.getAttribute("data-atom")); continue; }
       const next = { ...marks };
-      if (tag === "span" && child.hasAttribute(MARKS)) {
+      if ((tag === "span" || tag === "time") && child.hasAttribute(MARKS)) {
         walk(child, next, normalizeEntries([...entries, ...entriesOfEnvelope(child.getAttribute(MARKS))]));
         continue;
       }
@@ -588,7 +701,8 @@ function inlineOfEl(el, skip = () => false) {
       else if (tag === "s" || tag === "del" || tag === "strike") next.s = true;
       else if (tag === "code") next.c = true;
       else if (tag === "a" && child.hasAttribute("href")) next.a = [child.getAttribute("href")];
-      walk(child, next, entries);
+      const named = nativeOfEl(tag, child);
+      walk(child, next, named ? [...entries, named] : entries);
     }
   };
   walk(el, {}, []);
@@ -663,7 +777,11 @@ export function parseArticle(article) {
     const P = { parent };
     const record = envelopeAt(el);
     if (record && typeof record.t === "string") {
-      if (knownType(record.t) || record.t === "opaque_block") throw new SyntaxError(`page: an envelope names the known block type ${record.t}`);
+      if (record.t === "opaque_block") throw new SyntaxError(`page: an envelope names the known block type ${record.t}`);
+      if (knownType(record.t)) {
+        items.push(knownRecordItem(idOf(el), record, parent));
+        return;
+      }
       const { t, ...fields } = record;
       items.push({ id: idOf(el), t, parent, ...fields });
       return;
@@ -671,17 +789,30 @@ export function parseArticle(article) {
     const onlyImage = tag === "P" && el.children.length === 1 && el.children[0].tagName === "IMG" && !el.textContent.trim();
     if (tag === "P" && !onlyImage) return push(el, "paragraph", parent, { ...omitDefaults("paragraph", P), ...tf(el) });
     if (/^H[1-6]$/.test(tag)) return push(el, "heading", parent, { ...omitDefaults("heading", { ...P, level: +tag[1] }), ...tf(el) });
+    if (tag === "HEADER" && el.getAttribute("data-page-heading") === ENVELOPE) {
+      const icon = el.querySelector(":scope > [data-page-icon]");
+      const cover = el.querySelector(":scope > img");
+      const [, x, y] = /object-position:\s*([-\d.]+)%\s+([-\d.]+)%/.exec(cover?.getAttribute("style") ?? "") ?? [];
+      const cover0 = cover ? { pageCoverSrc: safeSrc(cover.getAttribute("src")), pageCoverAlt: cover.getAttribute("alt") ?? "", pageCoverX: focal(x), pageCoverY: focal(y) } : {};
+      return push(el, "heading", parent, { ...omitDefaults("heading", { ...P, level: 1, pageIcon: icon ? icon.textContent : null, ...cover0 }), ...tf(el.querySelector(":scope > h1")) });
+    }
     if (tag === "ASIDE") return push(el, "callout", parent, { ...omitDefaults("callout", P), ...tf(el) });
+    if (tag === "BLOCKQUOTE") return push(el, "quote", parent, { ...omitDefaults("quote", P), ...tf(el) });
     if (tag === "PRE") {
       const code = el.querySelector(":scope > code");
       return push(el, "code_block", parent, { ...omitDefaults("code_block", { ...P, lang: el.getAttribute("data-lang") || "" }), c: (code || el).textContent });
     }
     if (tag === "HR") return push(el, "divider", parent, omitDefaults("divider", P));
+    if (tag === "NAV" && el.getAttribute("aria-label") === TOC_LABEL) {
+      const maxLevel = +(el.getAttribute("data-max-level") ?? 0);
+      return push(el, "toc", parent, omitDefaults("toc", { ...P, maxLevel: maxLevel >= 1 && maxLevel <= 6 ? maxLevel : null }));
+    }
     if (tag === "UL" || tag === "OL") return list(el, parent, 0);
     if (tag === "DETAILS") {
       const summary = el.querySelector(":scope > summary");
+      const head = summary?.querySelector(":scope > h1, :scope > h2, :scope > h3");
       const at = items.length;
-      push(el, "toggle", parent, { ...omitDefaults("toggle", { ...P, open: el.hasAttribute("open") }), ...tf(summary) });
+      push(el, "toggle", parent, { ...omitDefaults("toggle", { ...P, open: el.hasAttribute("open"), level: head ? Number(head.tagName[1]) : null }), ...tf(summary) });
       const body = el.ownerDocument.createElement("div");
       for (const n of [...el.childNodes]) if (n !== summary) body.appendChild(n.cloneNode(true));
       walk(body, { ref: at });

package/src/page/recover.js

@@ -1,10 +1,15 @@
 import toast, { toastPersistent, dismissPersistent } from "../ui/toast-lazy.js";
 import { state as pmState } from "../vendor/prosemirror.vendor.js";
+import { mountEditorUI } from "../ui/editor-ui.js";
 
 export const NOTICE_TEXT = "Some text you typed was kept aside when its block moved or was removed.";
 
-const STYLE_ID = "page-recover-style";
+// The control and its panel sit in one shadow root inside the page shell, so the page's
+// CSS cannot restyle them. The page's --page-* tokens still reach them, and they keep
+// the page's font and colour.
 const STYLES = `
+:host { font: inherit !important; color: inherit !important; }
+.page-recover-root { display: contents; }
 .page-recover { position: fixed; right: 16px; bottom: 16px; z-index: 20; min-height: 36px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--page-ink); background: var(--page-pop-bg); border: 1px solid var(--page-chrome-line-rest); border-radius: 999px; cursor: pointer; }
 .page-recover[hidden], .page-recover-panel[hidden] { display: none; }
 .page-recover-panel { position: fixed; right: 16px; bottom: 64px; z-index: 21; width: min(380px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; color: var(--page-ink); background: var(--page-pop-bg); border: 1px solid var(--page-chrome-line-rest); border-radius: var(--page-chrome-radius); padding: 8px; box-sizing: border-box; }
@@ -33,13 +38,6 @@ const el = (doc, tag, className, attrs = {}) => {
   return node;
 };
 
-function ensureStyle(doc) {
-  if (doc.getElementById(STYLE_ID)) return;
-  const style = doc.createElement("style");
-  style.id = STYLE_ID;
-  style.textContent = STYLES;
-  doc.head.append(style);
-}
 
 function previewOf(doc, record) {
   const out = el(doc, "div", "page-recover-text");
@@ -74,13 +72,14 @@ export function focusBlock(view, id) {
 
 export function createRecoverList({ binding, mount, ownTokens = [], onRestored = () => {}, onStale = () => {} }) {
   const doc = mount.ownerDocument;
-  ensureStyle(doc);
   const own = new Set(ownTokens.filter(Boolean));
   const button = el(doc, "button", "page-recover", { type: "button", "aria-haspopup": "dialog", "aria-expanded": "false" });
   const panel = el(doc, "div", "page-recover-panel", { role: "dialog", "aria-label": "Recover changes" });
   button.hidden = true;
   panel.hidden = true;
-  mount.append(button, panel);
+  const content = el(doc, "div", "page-recover-root");
+  content.append(button, panel);
+  const ui = mountEditorUI({ name: "page-recover", content, css: [STYLES], parent: mount });
 
   let snapshot = { recoverable: [], notices: [] };
   let target = null;
@@ -186,8 +185,7 @@ export function createRecoverList({ binding, mount, ownTokens = [], onRestored =
     destroy() {
       off();
       dismissPersistent(NOTICE_TEXT);
-      button.remove();
-      panel.remove();
+      ui.remove();
     },
   };
 }