@panphora/clayjs 1.17.0 → 1.18.1

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/light-1.css

@@ -215,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;
@@ -307,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

@@ -1,9 +1,9 @@
 import { state } from "../vendor/prosemirror.vendor.js";
 
-// The update hooks a loaded view part registers for its editor view. The plugin
-// below calls them on every document change, 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.
+// 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
@@ -18,15 +18,41 @@ export function addViewHook(view, hook) {
 }
 
 export function viewHookPlugin() {
+  let editorView = null;
+  const mounted = new WeakMap();
   return new state.Plugin({
-    view: (view) => ({
-      update: (next) => { for (const hook of viewHooks.get(next) ?? []) hook.update?.(next); },
-      destroy: () => {
-        const hooks = viewHooks.get(view);
-        if (!hooks) return;
-        for (const hook of hooks) hook.destroy?.(view);
-        hooks.clear();
+    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,31 +2,43 @@ 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 = () => {}, journal = null }) {
+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);
   // 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,
-    onStopped,
+    // 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 stats = { groups: 0, mismatch: 0, renders: 0, first: null };
   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 || Boolean(pageJournal && !pageJournal.failure && pageJournal.pending()),
+    isPending: () => (exitClosed() && debt.pending()) || store.pending.length > 0 || provider.pending || provider.reconcilePending || Boolean(pageJournal && pageJournal.pending() > (pageJournal.failure ? 1 : 0)),
     flush,
   });
   const changed = () => {
@@ -38,6 +50,7 @@ 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(() => {
@@ -48,8 +61,76 @@ export function createYPageBinding({ store, ydoc = new Y.Doc(), onNotice = () =>
   // a write in flight, a write the store refused, or a room that has not confirmed.
   if (pageJournal) pageJournal.onChange = changed;
 
-  function flush({ timeoutMs = 10_000 } = {}) {
+  // 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({ 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;
@@ -96,6 +177,8 @@ 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),