@panphora/clayjs 1.16.0 → 1.18.0

package/src/page/schema.js

@@ -29,7 +29,15 @@ export const schema = new model.Schema({
       group: "block",
       content: "inline*",
       defining: true,
-      attrs: { ...block, level: { default: 2 } },
+      attrs: {
+        ...block,
+        level: { default: 2 },
+        pageIcon: { default: null },
+        pageCoverSrc: { default: null },
+        pageCoverAlt: { default: "" },
+        pageCoverX: { default: 50 },
+        pageCoverY: { default: 50 },
+      },
       toDOM: (n) => [`h${n.attrs.level}`, ref(n), 0],
     },
     list_item: {
@@ -50,6 +58,12 @@ export const schema = new model.Schema({
         "data-checked": n.attrs.checked ? "true" : "false",
       }), 0],
     },
+    quote: {
+      group: "block",
+      content: "inline*",
+      attrs: block,
+      toDOM: (n) => ["blockquote", ref(n), 0],
+    },
     callout: {
       group: "block",
       content: "inline*",
@@ -68,8 +82,8 @@ export const schema = new model.Schema({
     toggle: {
       group: "block",
       content: "inline*",
-      attrs: { ...block, open: { default: false } },
-      toDOM: (n) => ["div", ref(n, { class: "page-toggle", "data-open": n.attrs.open ? "true" : "false" }), 0],
+      attrs: { ...block, open: { default: false }, level: { default: null } },
+      toDOM: (n) => ["div", ref(n, { class: "page-toggle", "data-open": n.attrs.open ? "true" : "false", ...(n.attrs.level ? { "data-level": String(n.attrs.level) } : {}) }), 0],
     },
     divider: {
       group: "block",
@@ -77,6 +91,14 @@ export const schema = new model.Schema({
       attrs: block,
       toDOM: (n) => ["hr", ref(n)],
     },
+    // A table of contents holds no headings: its entries are derived from the document
+    // whenever it is drawn, so a rename, a move or a deletion needs no repair here.
+    toc: {
+      group: "block",
+      atom: true,
+      attrs: { ...block, maxLevel: { default: null } },
+      toDOM: (n) => ["div", ref(n, { class: "page-toc", "data-type": "toc", ...(n.attrs.maxLevel ? { "data-max-level": String(n.attrs.maxLevel) } : {}) })],
+    },
     image: {
       group: "block",
       atom: true,
@@ -174,5 +196,32 @@ export const schema = new model.Schema({
       inclusive: false,
       toDOM: (m) => ["a", { href: safeHref(m.attrs.href) }, 0],
     },
+    // A person mention is ordinary text with this mark over it: the name is the label
+    // and `id` is the people registry's reference. It links nowhere and notifies nobody.
+    mention: {
+      attrs: { id: {} },
+      inclusive: false,
+      excludes: "mention date link",
+      toDOM: (m) => ["span", { "data-page-mention": m.attrs.id }, 0],
+    },
+    // A date mention is the calendar date as ordinary ISO text with this mark over it:
+    // `date` is YYYY-MM-DD, and no time, zone, reminder or relative word is stored.
+    date: {
+      attrs: { date: {} },
+      inclusive: false,
+      excludes: "mention date link",
+      toDOM: (m) => ["time", { datetime: m.attrs.date, "data-page-date": "" }, 0],
+    },
+    // The floor-1 formats (format-native.js): written as named descriptors,
+    // drawn as the elements the saved article keeps for them.
+    underline: { toDOM: () => ["u", 0] },
+    text_color: {
+      attrs: { color: {} },
+      toDOM: (m) => ["span", { "data-color": m.attrs.color }, 0],
+    },
+    highlight: {
+      attrs: { color: {} },
+      toDOM: (m) => ["mark", { "data-color": m.attrs.color }, 0],
+    },
   },
 });

package/src/page/table-paste.js

@@ -33,7 +33,9 @@ function textGrid(text) {
 export function gridFromClipboard(html, text, doc = globalThis.document) {
   let found = null;
   try { found = htmlGrid(html, doc); } catch { found = null; }
-  if (!found) {
+  // An HTML table with other blocks around it is a document, not a sheet: its tab-separated
+  // text is no grid either, and the editor's own paste keeps every block.
+  if (!found && !/<table[\s>]/i.test(html || "")) {
     try { found = textGrid(text); } catch { found = null; }
   }
   if (!found || !found.grid.length) return null;

package/src/page/table-style.js

@@ -9,11 +9,11 @@ export const TABLE_CSS = `
 .page-table table.is-sized th, .page-table table.is-sized td { min-width: 0; overflow-wrap: anywhere; }
 .page-table-resize { position: absolute; top: 0; bottom: 0; inset-inline-end: -4px; width: 8px; z-index: 2; cursor: col-resize; touch-action: none; }
 .page-table-resize:hover, .page-table-resize:active, .page-table-resize:focus-visible { background: var(--page-accent); opacity: 0.4; }
-.page-table-add-row, .page-table-add-col { position: absolute; z-index: 1; border: 0; padding: 0; background: var(--page-chrome-bg-rest); color: var(--page-chrome-ink-rest); font: inherit; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 120ms; }
-.page-table-add-row { left: 0; right: 0; top: 100%; height: 14px; border-radius: 0 0 6px 6px; }
-.page-table-add-col { top: 0; bottom: 0; left: 100%; width: 14px; border-radius: 0 6px 6px 0; }
+.page-table-add-row, .page-table-add-col { position: absolute; z-index: 1; padding: 0; background: var(--page-chrome-bg-moved); color: var(--page-ink-soft); display: flex; align-items: center; justify-content: center; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 120ms; }
+.page-table-add-row { left: 0; right: 0; top: 100%; height: 16px; border-radius: 0 0 6px 6px; border: 1px solid var(--page-chrome-line-moved); border-top: 0; padding-bottom: 2px; box-sizing: border-box; }
+.page-table-add-col { top: 0; bottom: 0; left: 100%; width: 16px; border-radius: 0 6px 6px 0; border: 1px solid var(--page-chrome-line-moved); border-left: 0; box-sizing: border-box; }
 .page-table:hover > .page-table-add-row, .page-table:hover > .page-table-add-col, .page-table-add-row:focus-visible, .page-table-add-col:focus-visible { opacity: 1; }
-.page-table-add-row:hover, .page-table-add-col:hover { background: var(--page-chrome-bg-moved); color: var(--page-ink-soft); }
+.page-table-add-row:hover, .page-table-add-col:hover { background: var(--page-pop-hover); color: var(--page-ink); }
 .page-table-date { position: absolute; inset-inline-start: 0; top: 100%; z-index: 3; font: inherit; color: var(--page-pop-ink); background: var(--page-pop-bg); border: 1px solid var(--page-pop-line); border-radius: 6px; padding: 4px 6px; box-shadow: var(--page-pop-shadow); }
 @media (max-width: 560px) {
   .page-table-date { min-height: 44px; }

package/src/page/table.js

@@ -213,6 +213,33 @@ export const moveColumn = (delta) => (st, dispatch) => changeTable(st, dispatch,
 export const MIN_WIDTH = 48, MAX_WIDTH = 1200, DEFAULT_WIDTH = 160;
 const widthOf = (value) => (Number.isFinite(value) && value > 0 ? Math.round(Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, value))) : null);
 
+// Clears every stored width, so the table fills the page again.
+export const clearColumnWidths = (colId) => (st, dispatch) => changeTable(st, dispatch, (table) => {
+  const ids = columns(table);
+  if (!ids.some((id) => table.attrs.cols[id].width)) return null;
+  const cols = {};
+  for (const id of ids) {
+    const { width: _old, ...rest } = table.attrs.cols[id];
+    cols[id] = rest;
+  }
+  return { table: copyTable(table, { cols }, table.content), cell: Math.max(0, ids.indexOf(colId)) };
+});
+
+// Several widths in one step: the first width set on a table that fills the page
+// also fixes every other column at the width it is drawn at, so none of them jumps.
+export const setColumnWidths = (widths, colId) => (st, dispatch) => changeTable(st, dispatch, (table) => {
+  const cols = { ...table.attrs.cols };
+  let changed = false;
+  for (const [id, width] of Object.entries(widths)) {
+    const next = widthOf(width);
+    if (!cols[id] || next === null || cols[id].width === next) continue;
+    cols[id] = { ...cols[id], width: next };
+    changed = true;
+  }
+  if (!changed) return null;
+  return { table: copyTable(table, { cols }, table.content), cell: columns(table).indexOf(colId) };
+});
+
 export const setColumnWidth = (colId, width) => (st, dispatch) => changeTable(st, dispatch, (table) => {
   const col = table.attrs.cols[colId];
   if (!col) return null;
@@ -295,9 +322,9 @@ export function pasteTable(view, event) {
     if (found.width * found.height < 2) return false;
     return pasteGrid(found.grid)(st, view.dispatch);
   }
-  if (found.width * found.height < 2) return false;
+  if (found.width * found.height < 2 || found.own) return false;
   if (found.height < 2 && !/<table[\s>]/i.test(data.getData("text/html"))) return false;
-  const table = tableFromGrid(found.grid, { header: !found.own && found.height > 1 });
+  const table = tableFromGrid(found.grid, { header: found.height > 1 });
   if (!table) return false;
   if (tableSize(table) > TABLE_IMPORT_LIMIT) {
     toast("This paste is too large for one table.", "error");
@@ -317,10 +344,25 @@ export function pasteTable(view, event) {
 
 export const tableKeys = keymap.keymap({ Tab: nextCell, "Shift-Tab": prevCell, Enter: cellBelow, "Mod-Enter": addRow(true) });
 
+function caretInCell(view, event) {
+  const cell = cellViews.get(event.target);
+  const pos = cell?.getPos();
+  if (pos == null || event.button || event.shiftKey || !view.editable) return false;
+  event.preventDefault();
+  const start = event.clientX < cell.contentDOM.getBoundingClientRect().left;
+  view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, pos + 1 + (start ? 0 : cell.node.content.size))));
+  view.focus();
+  cell.openDate();
+  return true;
+}
+
 export function tablePlugin() {
   return new Plugin({
     props: {
       handlePaste: pasteTable,
+      handleDOMEvents: {
+        mousedown: caretInCell,
+      },
       handleClickOn(view, _pos, node, nodePos, event, direct) {
         if (node.type !== N.table_cell || !direct || event.button) return false;
         const desc = view.nodeDOM(nodePos);

package/src/page/themes/content.css

@@ -2,6 +2,11 @@
   article[data-page] {
     --page-link: #164583;
     --page-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+    --page-color-gray: #5B5953; --page-color-brown: #8A5A1E; --page-color-orange: #B4531A; --page-color-yellow: #7A6210; --page-color-green: #3E6A28;
+    --page-color-blue: #1F5A8A; --page-color-purple: #5E4596; --page-color-pink: #A23E6E; --page-color-red: #9E3B2F;
+    --page-mark-bg-gray: rgba(35, 34, 31, 0.12); --page-mark-bg-brown: rgba(138, 90, 30, 0.20); --page-mark-bg-orange: rgba(180, 83, 26, 0.20);
+    --page-mark-bg-yellow: rgba(122, 98, 16, 0.22); --page-mark-bg-green: rgba(62, 106, 40, 0.20); --page-mark-bg-blue: rgba(31, 90, 138, 0.18);
+    --page-mark-bg-purple: rgba(94, 69, 150, 0.18); --page-mark-bg-pink: rgba(162, 62, 110, 0.18); --page-mark-bg-red: rgba(158, 59, 47, 0.18);
     min-height: 100vh;
     box-sizing: border-box;
     padding: var(--page-pad-top) 16px 30vh;
@@ -42,5 +47,24 @@
   article[data-page] th, article[data-page] td { min-width: 120px; padding: 6px 10px; border-inline-end: 1px solid var(--page-rule); border-block-end: 1px solid var(--page-rule); text-align: start; white-space: pre-wrap; }
   article[data-page] th { background: var(--page-code-bg); color: var(--page-ink-soft); font-weight: 600; }
   article[data-page] th[data-kind="number"], article[data-page] td[data-kind="number"] { text-align: end; }
-  article[data-page] blockquote { color: var(--page-ink-soft); border-inline-start: 1px solid var(--page-rule); padding-inline-start: var(--page-indent); }
+  article[data-page] blockquote { color: var(--page-ink-soft); padding-inline-start: var(--page-indent); }
+  article[data-page] span[data-color="gray"] { color: var(--page-color-gray); }
+  article[data-page] span[data-color="brown"] { color: var(--page-color-brown); }
+  article[data-page] span[data-color="orange"] { color: var(--page-color-orange); }
+  article[data-page] span[data-color="yellow"] { color: var(--page-color-yellow); }
+  article[data-page] span[data-color="green"] { color: var(--page-color-green); }
+  article[data-page] span[data-color="blue"] { color: var(--page-color-blue); }
+  article[data-page] span[data-color="purple"] { color: var(--page-color-purple); }
+  article[data-page] span[data-color="pink"] { color: var(--page-color-pink); }
+  article[data-page] span[data-color="red"] { color: var(--page-color-red); }
+  article[data-page] mark[data-color="gray"] { background: var(--page-mark-bg-gray); }
+  article[data-page] mark[data-color="brown"] { background: var(--page-mark-bg-brown); }
+  article[data-page] mark[data-color="orange"] { background: var(--page-mark-bg-orange); }
+  article[data-page] mark[data-color="yellow"] { background: var(--page-mark-bg-yellow); }
+  article[data-page] mark[data-color="green"] { background: var(--page-mark-bg-green); }
+  article[data-page] mark[data-color="blue"] { background: var(--page-mark-bg-blue); }
+  article[data-page] mark[data-color="purple"] { background: var(--page-mark-bg-purple); }
+  article[data-page] mark[data-color="pink"] { background: var(--page-mark-bg-pink); }
+  article[data-page] mark[data-color="red"] { background: var(--page-mark-bg-red); }
+  article[data-page] mark { color: inherit; }
 }

package/src/page/themes/light-1.css

@@ -95,6 +95,11 @@
   article[data-page] {
     --page-link: #164583;
     --page-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+    --page-color-gray: #5B5953; --page-color-brown: #8A5A1E; --page-color-orange: #B4531A; --page-color-yellow: #7A6210; --page-color-green: #3E6A28;
+    --page-color-blue: #1F5A8A; --page-color-purple: #5E4596; --page-color-pink: #A23E6E; --page-color-red: #9E3B2F;
+    --page-mark-bg-gray: rgba(35, 34, 31, 0.12); --page-mark-bg-brown: rgba(138, 90, 30, 0.20); --page-mark-bg-orange: rgba(180, 83, 26, 0.20);
+    --page-mark-bg-yellow: rgba(122, 98, 16, 0.22); --page-mark-bg-green: rgba(62, 106, 40, 0.20); --page-mark-bg-blue: rgba(31, 90, 138, 0.18);
+    --page-mark-bg-purple: rgba(94, 69, 150, 0.18); --page-mark-bg-pink: rgba(162, 62, 110, 0.18); --page-mark-bg-red: rgba(158, 59, 47, 0.18);
     min-height: 100vh;
     box-sizing: border-box;
     padding: var(--page-pad-top) 16px 30vh;
@@ -135,7 +140,26 @@
   article[data-page] th, article[data-page] td { min-width: 120px; padding: 6px 10px; border-inline-end: 1px solid var(--page-rule); border-block-end: 1px solid var(--page-rule); text-align: start; white-space: pre-wrap; }
   article[data-page] th { background: var(--page-code-bg); color: var(--page-ink-soft); font-weight: 600; }
   article[data-page] th[data-kind="number"], article[data-page] td[data-kind="number"] { text-align: end; }
-  article[data-page] blockquote { color: var(--page-ink-soft); border-inline-start: 1px solid var(--page-rule); padding-inline-start: var(--page-indent); }
+  article[data-page] blockquote { color: var(--page-ink-soft); padding-inline-start: var(--page-indent); }
+  article[data-page] span[data-color="gray"] { color: var(--page-color-gray); }
+  article[data-page] span[data-color="brown"] { color: var(--page-color-brown); }
+  article[data-page] span[data-color="orange"] { color: var(--page-color-orange); }
+  article[data-page] span[data-color="yellow"] { color: var(--page-color-yellow); }
+  article[data-page] span[data-color="green"] { color: var(--page-color-green); }
+  article[data-page] span[data-color="blue"] { color: var(--page-color-blue); }
+  article[data-page] span[data-color="purple"] { color: var(--page-color-purple); }
+  article[data-page] span[data-color="pink"] { color: var(--page-color-pink); }
+  article[data-page] span[data-color="red"] { color: var(--page-color-red); }
+  article[data-page] mark[data-color="gray"] { background: var(--page-mark-bg-gray); }
+  article[data-page] mark[data-color="brown"] { background: var(--page-mark-bg-brown); }
+  article[data-page] mark[data-color="orange"] { background: var(--page-mark-bg-orange); }
+  article[data-page] mark[data-color="yellow"] { background: var(--page-mark-bg-yellow); }
+  article[data-page] mark[data-color="green"] { background: var(--page-mark-bg-green); }
+  article[data-page] mark[data-color="blue"] { background: var(--page-mark-bg-blue); }
+  article[data-page] mark[data-color="purple"] { background: var(--page-mark-bg-purple); }
+  article[data-page] mark[data-color="pink"] { background: var(--page-mark-bg-pink); }
+  article[data-page] mark[data-color="red"] { background: var(--page-mark-bg-red); }
+  article[data-page] mark { color: inherit; }
 }
 
 
@@ -191,12 +215,12 @@
   --page-code-bg: rgba(35, 34, 31, 0.045);
   --page-code-ink: #23221F;
 
-  --page-chrome-ink-rest: rgba(35, 34, 31, 0.16);
-  --page-chrome-ink-moved: rgba(35, 34, 31, 0.30);
-  --page-chrome-bg-rest: rgba(35, 34, 31, 0.025);
-  --page-chrome-bg-moved: rgba(35, 34, 31, 0.045);
-  --page-chrome-line-rest: rgba(35, 34, 31, 0.16);
-  --page-chrome-line-moved: rgba(35, 34, 31, 0.30);
+  --page-chrome-ink-rest: rgba(35, 34, 31, 0.42);
+  --page-chrome-ink-moved: rgba(35, 34, 31, 0.62);
+  --page-chrome-bg-rest: rgba(35, 34, 31, 0.035);
+  --page-chrome-bg-moved: rgba(35, 34, 31, 0.06);
+  --page-chrome-line-rest: rgba(35, 34, 31, 0.22);
+  --page-chrome-line-moved: rgba(35, 34, 31, 0.36);
   --page-chrome-shadow-rest: none;
   --page-chrome-shadow-moved: none;
   --page-chrome-radius: 7px;
@@ -283,7 +307,8 @@ article[data-page] figure[data-type="chart"] > svg { display: block; width: 100%
   height: 15px;
 }
 
-.page-shell .page-dock .page-tool-turn {
+.page-shell .page-dock .page-tool-turn,
+.page-shell .page-bubble .page-tool-turn {
   width: auto;
   gap: 4px;
   padding: 0 8px;

package/src/page/themes/light-1.source.css

@@ -54,12 +54,12 @@
   --page-code-bg: rgba(35, 34, 31, 0.045);
   --page-code-ink: #23221F;
 
-  --page-chrome-ink-rest: rgba(35, 34, 31, 0.16);
-  --page-chrome-ink-moved: rgba(35, 34, 31, 0.30);
-  --page-chrome-bg-rest: rgba(35, 34, 31, 0.025);
-  --page-chrome-bg-moved: rgba(35, 34, 31, 0.045);
-  --page-chrome-line-rest: rgba(35, 34, 31, 0.16);
-  --page-chrome-line-moved: rgba(35, 34, 31, 0.30);
+  --page-chrome-ink-rest: rgba(35, 34, 31, 0.42);
+  --page-chrome-ink-moved: rgba(35, 34, 31, 0.62);
+  --page-chrome-bg-rest: rgba(35, 34, 31, 0.035);
+  --page-chrome-bg-moved: rgba(35, 34, 31, 0.06);
+  --page-chrome-line-rest: rgba(35, 34, 31, 0.22);
+  --page-chrome-line-moved: rgba(35, 34, 31, 0.36);
   --page-chrome-shadow-rest: none;
   --page-chrome-shadow-moved: none;
   --page-chrome-radius: 7px;
@@ -146,7 +146,8 @@ article[data-page] figure[data-type="chart"] > svg { display: block; width: 100%
   height: 15px;
 }
 
-.page-shell .page-dock .page-tool-turn {
+.page-shell .page-dock .page-tool-turn,
+.page-shell .page-bubble .page-tool-turn {
   width: auto;
   gap: 4px;
   padding: 0 8px;

package/src/page/toc-link.js

@@ -0,0 +1,31 @@
+// The saved table of contents' links: decode the anchor a link names, and reveal
+// the block it points at in a reader. Loaded the first time a reader follows one.
+const TOC_ANCHOR = "page-block-";
+
+const fromB64url = (text) => {
+  const bin = atob(String(text).replace(/-/g, "+").replace(/_/g, "/"));
+  return new TextDecoder().decode(Uint8Array.from(bin, (ch) => ch.charCodeAt(0)));
+};
+
+export function idFromHref(href) {
+  const hash = String(href ?? "").replace(/^#/, "");
+  if (!hash) return null;
+  try {
+    return hash.startsWith(TOC_ANCHOR) ? fromB64url(hash.slice(TOC_ANCHOR.length)) : decodeURIComponent(hash);
+  } catch {
+    return null;
+  }
+}
+
+// A table of contents link in a saved page shows its target and opens every collapsed
+// body above it: reading only, so nothing is saved, no history moves and no peer is
+// told. A link whose block is gone, or to anywhere else, changes nothing.
+export function followTocLink(article, href) {
+  const id = idFromHref(href);
+  if (id === null) return null;
+  const target = [...article.querySelectorAll("[data-id]")].find((el) => el.getAttribute("data-id") === id) ?? null;
+  if (!target) return null;
+  for (let el = target.parentElement; el && el !== article; el = el.parentElement) if (el.tagName === "DETAILS") el.open = true;
+  target.scrollIntoView?.({ block: "start" });
+  return target;
+}

package/src/page/toc.js

@@ -0,0 +1,5 @@
+// The table of contents: the headings a document has and the anchors that link to them.
+// The saved renderer and the editor's node view ask one helper; a reader's reveal and
+// the anchor decoder live in toc-link.js, which nothing but a followed link loads.
+export { TOC_ANCHOR, TOC_LABEL, blockAnchor, tocHtml, tocEntries } from "./projection.js";
+export { idFromHref } from "./toc-link.js";

package/src/page/view-hooks.js

@@ -0,0 +1,58 @@
+import { state } from "../vendor/prosemirror.vendor.js";
+
+// The update hooks and decorations a loaded view part registers for its editor
+// view. The plugin below calls the hooks on every document change and collects the
+// decorations on every draw, so a part keeps its blocks fresh without the editor
+// importing it: the part adds its hook when it installs and removes it on dispose.
+export const viewHooks = new WeakMap();
+
+// The feature loader of each mounted editor, so an insert path can ask for a
+// block's part before it draws the block.
+export const viewFeatures = new WeakMap();
+
+export function addViewHook(view, hook) {
+  const hooks = viewHooks.get(view) ?? new Set();
+  viewHooks.set(view, hooks);
+  hooks.add(hook);
+  return () => hooks.delete(hook);
+}
+
+export function viewHookPlugin() {
+  let editorView = null;
+  const mounted = new WeakMap();
+  return new state.Plugin({
+    view: (view) => {
+      editorView = view;
+      mounted.set(view, (mounted.get(view) ?? 0) + 1);
+      return {
+        update: (next) => { for (const hook of viewHooks.get(next) ?? []) hook.update?.(next); },
+        destroy: () => {
+          mounted.set(view, mounted.get(view) - 1);
+          if (editorView === view) editorView = null;
+          // A reconfigure destroys this plugin view and mounts a new one for the same editor in
+          // the same task; only an editor that stays without one is really going away.
+          queueMicrotask(() => {
+            if (mounted.get(view)) return;
+            const hooks = viewHooks.get(view);
+            if (!hooks) return;
+            for (const hook of hooks) hook.destroy?.(view);
+            hooks.clear();
+          });
+        },
+      };
+    },
+    props: {
+      decorations(st) {
+        const hooks = editorView ? viewHooks.get(editorView) : null;
+        if (!hooks) return null;
+        let found = null;
+        for (const hook of hooks) {
+          const set = hook.decorations?.(st);
+          if (!set) continue;
+          found = found ? found.add(st.doc, set.find()) : set;
+        }
+        return found;
+      },
+    },
+  });
+}

package/src/page/view.js

@@ -16,6 +16,10 @@ const LINEAGE = ["live-at", "live-by"];
 
 export { applyPreparedArticle, prepareSavedArticle };
 
+// A table of contents link in a saved page reveals its target. The reveal code and
+// the anchor decoder load the first time somebody follows one, never with the page.
+export const followTocLink = (article, href) => import("./toc-link.js").then((m) => m.followTocLink(article, href));
+
 // The stamp of the file this reader accepted, recorded where a save reads it. The
 // stamp module is the write path's own lazy chunk: a reader paints without it, and
 // a save loads the one copy both paths then share.
@@ -262,6 +266,15 @@ function createReader({ doc, article, represented = null, feed = null, documentU
   doc.addEventListener("toggle", onToggle, true);
   listeners.push(["toggle", onToggle, true]);
 
+  const onTocLink = (event) => {
+    const link = event.target.closest?.('a[href^="#page-block-"], a[href^="#"]');
+    if (!link || !article.contains(link) || !link.closest('nav[aria-label="Table of contents"]')) return;
+    event.preventDefault();
+    followTocLink(article, link.getAttribute("href"));
+  };
+  doc.addEventListener("click", onTocLink);
+  listeners.push(["click", onTocLink]);
+
   if (represented) {
     const prepared = prepareSavedArticle(represented.bytes, doc);
     if (!prepared.ok) throw new Error(`clayjs: the saved file is not a readable page (${prepared.reason})`);

package/src/page/ybind/binding.js

@@ -2,17 +2,45 @@ import * as Y from "../../vendor/yjs.vendor.js";
 import { NET, createPageDoc, walk, docOf } from "./core.js";
 import { createBridge, keepViewPos } from "./bridge.js";
 import { createYProvider, entriesOf, dec } from "./provider.js";
+import { createPageFileDebt } from "./file-debt.js";
 
-export function createYPageBinding({ store, ydoc = new Y.Doc(), onNotice = () => {}, ownedTokens = [], authorToken = null, setTimer = setTimeout, clearTimer = clearTimeout, compact, captureTimeout = 500, checkpointWithin = () => {}, requestCheckpoint = null, registerUnsavedState = null, onStopped = () => {} }) {
+export function createYPageBinding({ store, ydoc = new Y.Doc(), onNotice = () => {}, ownedTokens = [], authorToken = null, setTimer = setTimeout, clearTimer = clearTimeout, compact, captureTimeout = 500, checkpointWithin = () => {}, requestCheckpoint = null, requestExitCheckpoint = null, registerUnsavedState = null, onStopped = () => {}, journal = null, exitClosed = () => false, stats = { groups: 0, mismatch: 0, renders: 0, first: null } }) {
   for (const [, v] of entriesOf(store.value.y)) Y.applyUpdateV2(ydoc, dec(v), NET);
   const pd = createPageDoc(ydoc);
-  const provider = createYProvider({ store, ydoc, setTimer, clearTimer, compact, onStopped });
-  const stats = { groups: 0, mismatch: 0, renders: 0, first: null };
+  // The journal is installed before the provider, because the provider is what sees an
+  // update: nothing can reach the document without passing it first. Its own code lives
+  // with the recovery channel and is only loaded when a page has one to journal into.
+  const pageJournal = journal || null;
+  // The input this tab owes the file, recorded before the provider because the provider is
+  // what sees an update. The notification it fires through is attached once the binding's
+  // own registration exists, so an update that arrives while this function is still
+  // building cannot reach an uninitialized name.
+  let notifyDebt = () => {};
+  const debt = createPageFileDebt({ changed: () => notifyDebt() });
+  const provider = createYProvider({
+    store,
+    ydoc,
+    setTimer,
+    clearTimer,
+    compact,
+    // A full or failed room stops offering at once, but the checkpoint of what it already
+    // admitted goes out before the page locks and holds every save.
+    onStopped: (reason) => {
+      if (reason !== "page-full" && reason !== "compaction-failed") { onStopped(reason); return; }
+      Promise.resolve(requestCheckpoint?.({ timeoutMs: 10_000 })).catch(() => {}).finally(() => onStopped(reason));
+    },
+    onLocalUpdate: debt.local,
+    journal: { local: (u) => pageJournal?.local(u), dependency: (u) => pageJournal?.dependency(u) },
+  });
   const bridge = createBridge({ pd, onNotice, ownedTokens, authorToken, stats, captureTimeout });
   const waiters = new Set();
   let disposed = false;
   let checksQueued = false;
-  const unsaved = registerUnsavedState?.({ id: "page:live", isPending: () => store.pending.length > 0 || provider.reconcilePending, flush });
+  const unsaved = registerUnsavedState?.({
+    id: "page:live",
+    isPending: () => (exitClosed() && debt.pending()) || store.pending.length > 0 || provider.pending || provider.reconcilePending || Boolean(pageJournal && pageJournal.pending() > (pageJournal.failure ? 1 : 0)),
+    flush,
+  });
   const changed = () => {
     unsaved?.changed();
     if (checksQueued) return;
@@ -22,12 +50,87 @@ export function createYPageBinding({ store, ydoc = new Y.Doc(), onNotice = () =>
       if (!disposed) for (const waiter of [...waiters]) waiter.check();
     });
   };
+  notifyDebt = changed;
   const offLocal = store.onLocal(() => { checkpointWithin(1500); changed(); });
   const offRebase = store.onRebase(changed);
-  const offConfirm = store.onConfirm(changed);
+  const offConfirm = store.onConfirm(() => {
+    pageJournal?.acknowledged();
+    changed();
+  });
+  // Everything the journal reports while this session is the active one is unsaved state:
+  // a write in flight, a write the store refused, or a room that has not confirmed.
+  if (pageJournal) pageJournal.onChange = changed;
+
+  // Everything the file or the room still owes: this tab's own input, a store op no
+  // answer has covered, a reconcile, a journal write still in flight.
+  const exitPending = () =>
+    debt.pending() || store.pending.length > 0 || provider.pending || provider.reconcilePending ||
+    Boolean(pageJournal && pageJournal.pending() > (pageJournal.failure ? 1 : 0));
+
+  // The exit's own flush, under the permit the barrier minted.
+  //
+  // A fast store's capture holds the room's value, so this tab's ops travel through the
+  // room first; a file store's capture holds its pending ops as they stand, so the
+  // checkpoint goes while they are still pending and their acceptance is what confirms
+  // them. The checkpoint is asked for only when this tab owes the file input: a tab
+  // holding nothing of its own leaves without making the room's writer save for it.
+  function flushExit({ permit, deadline, keepalive, signal, timeoutMs }) {
+    const end = Math.min(deadline ?? Infinity, Date.now() + timeoutMs);
+    const over = () => signal?.aborted || Date.now() >= end;
+    return new Promise((resolve) => {
+      let done = false, timer = null, wake = null;
+      const waiter = {
+        check() { wake?.(); },
+        finish(result) {
+          if (done) return;
+          done = true;
+          waiters.delete(waiter);
+          clearTimer(timer);
+          signal?.removeEventListener("abort", aborted);
+          resolve(result);
+        },
+      };
+      const aborted = () => waiter.finish({ ok: false, code: "timeout" });
+      const wait = (ms) => new Promise((woken) => {
+        const wakeNow = () => {
+          clearTimer(timer);
+          wake = null;
+          woken();
+        };
+        timer = setTimer(wakeNow, ms);
+        wake = wakeNow;
+      });
+      const run = async () => {
+        provider.settle();
+        if (debt.pending() && requestExitCheckpoint) {
+          const result = await requestExitCheckpoint({
+            permit,
+            deadline: end,
+            signal,
+            keepalive,
+            needsSave: () => debt.pending(),
+          });
+          if (done) return;
+          if (!result?.ok) {
+            waiter.finish(result?.ok === false ? result : { ok: false, code: "checkpoint-failed" });
+            return;
+          }
+        }
+        while (!done) {
+          if (!exitPending()) { waiter.finish({ ok: true }); return; }
+          if (over()) { waiter.finish({ ok: false, code: "timeout" }); return; }
+          await wait(50);
+        }
+      };
+      waiters.add(waiter);
+      signal?.addEventListener("abort", aborted, { once: true });
+      run().catch((error) => waiter.finish({ ok: false, code: "flush-failed", message: error?.message || String(error) }));
+    });
+  }
 
-  function flush({ timeoutMs = 10_000 } = {}) {
+  function flush({ permit = null, deadline: exitDeadline = null, keepalive = false, signal = null, timeoutMs = 10_000 } = {}) {
     if (disposed) return Promise.resolve({ ok: false, code: "disposed" });
+    if (permit) return flushExit({ permit, deadline: exitDeadline, keepalive, signal, timeoutMs });
     return new Promise((resolve) => {
       const deadline = Date.now() + timeoutMs;
       let done = false, checking = false, checkpointing = false, timer = null;
@@ -73,6 +176,9 @@ export function createYPageBinding({ store, ydoc = new Y.Doc(), onNotice = () =>
 
   return {
     ydoc, pd, provider, bridge, stats, flush, awareness,
+    get journal() { return pageJournal; },
+    filePending: () => debt.pending(),
+    acceptFile: (state) => debt.accepted(state),
     doc: () => keepViewPos(docOf(pd, walk(pd))),
     attach: (view) => bridge.attach(view),
     dispatch: (tr) => bridge.dispatch(tr),
@@ -92,6 +198,10 @@ export function createYPageBinding({ store, ydoc = new Y.Doc(), onNotice = () =>
       offRebase();
       offConfirm();
       unsaved?.dispose();
+      // Best effort, never the primary path: every append already resolved on its own
+      // commit, and what is left is only a write the store refused.
+      pageJournal?.close();
+      Promise.resolve(pageJournal?.channel?.flush?.()).catch(() => {});
       for (const waiter of [...waiters]) waiter.finish({ ok: false, code: "disposed" });
       bridge.dispose();
       provider.dispose();