@panphora/clayjs 1.17.0 → 1.18.0

package/src/page/projection.js

@@ -12,6 +12,7 @@ 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"}';
@@ -41,13 +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 },
@@ -57,6 +59,43 @@ export const DEFAULTS = {
   preserved: { parent: null, html: "" },
 };
 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);
 
@@ -293,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) {
@@ -340,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) : "";
 };
 
@@ -371,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;
@@ -394,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);
 
@@ -469,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("");
 
@@ -492,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 });
@@ -547,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); };
@@ -569,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();
@@ -705,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;
@@ -713,6 +789,13 @@ 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") {
@@ -720,11 +803,16 @@ export function parseArticle(article) {
       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();
     },
   };
 }