@panphora/clayjs 1.15.1 → 1.16.0

package/src/page/reader-patch.js

@@ -0,0 +1,306 @@
+// Projecting an accepted saved file onto the article a reader is showing.
+//
+// The saved markup is already the rendered form of the writer's model, so this is
+// not a second merge engine: it never combines concurrent authored changes. It only
+// brings a read-only article up to one accepted file while keeping the nodes that
+// file did not change, so a mounted tool, an open toggle and find-in-page survive.
+//
+// Identity comes from logical block `data-id` values. Lists and toggle bodies are
+// walked; boards, tables, charts, media and tools are opaque interiors, so a board
+// card id can never match an article block id. An id that appears twice is not
+// reused at all: neither occurrence promises node identity.
+
+const ARTICLE = "article[data-page]";
+const TOOL = 'section[data-type="tool"][data-id]';
+const CONTAINERS = new Set(["UL", "OL", "LI", "DETAILS"]);
+const LISTS = new Set(["UL", "OL"]);
+
+export const isTool = (el) => el.tagName === "SECTION" && el.getAttribute("data-type") === "tool" && el.hasAttribute("data-id");
+
+/**
+ * The tools an article holds, keyed by id, with the revision and artifact their
+ * root names. A decode failure is kept as `invalid` so a reader can say so and
+ * leave the saved fallback markup visible instead of mounting garbage.
+ */
+export function toolInfoOf(el) {
+  return toolInfo(el);
+}
+
+function toolInfo(el) {
+  const data = el.querySelector(':scope > script[type="application/json"][data-tool]');
+  let parsed = {};
+  try {
+    parsed = data ? JSON.parse(data.textContent) : {};
+  } catch (error) {
+    return { rev: null, artifact: null, state: {}, signature: null, invalid: true, error };
+  }
+  return {
+    rev: parsed.rev ?? null,
+    artifact: parsed.artifact ?? null,
+    state: parsed.state ?? {},
+    signature: JSON.stringify(parsed.artifact ?? null),
+    invalid: false,
+  };
+}
+
+export function toolsOf(root) {
+  const tools = new Map();
+  const duplicated = new Set();
+  for (const el of root.querySelectorAll(TOOL)) {
+    const id = el.getAttribute("data-id");
+    if (duplicated.has(id)) continue;
+    if (tools.has(id)) {
+      tools.delete(id);
+      duplicated.add(id);
+      continue;
+    }
+    tools.set(id, toolInfo(el));
+  }
+  return tools;
+}
+
+export function toolStateOf(doc) {
+  const tag = doc.querySelector('script[type="application/json"][merge="page.tools"]');
+  if (!tag) return {};
+  try { return JSON.parse(tag.textContent); } catch { return {}; }
+}
+
+function indexBlocks(root) {
+  const found = new Map();
+  const duplicated = new Set();
+  const walk = (container) => {
+    for (const child of container.children) {
+      const id = child.getAttribute("data-id");
+      if (id) {
+        if (duplicated.has(id)) continue;
+        if (found.has(id)) {
+          found.delete(id);
+          duplicated.add(id);
+          continue;
+        }
+        found.set(id, child);
+      }
+      if (CONTAINERS.has(child.tagName)) walk(child);
+    }
+  };
+  walk(root);
+  return found;
+}
+
+function retainedIds(root) {
+  const ids = new Set();
+  const walk = (container) => {
+    for (const child of container.children) {
+      const id = child.getAttribute("data-id");
+      if (id) ids.add(id);
+      if (CONTAINERS.has(child.tagName)) walk(child);
+    }
+  };
+  walk(root);
+  return ids;
+}
+
+/**
+ * Validate one full saved file before anything is replaced. Exactly one page
+ * article must be present, and the bytes must be the string the host sent, not a
+ * live DOM snapshot.
+ */
+export function prepareSavedArticle(html, doc = document) {
+  if (typeof html !== "string" || html === "") return { ok: false, reason: "bytes" };
+  const parser = (doc.defaultView ?? globalThis).DOMParser;
+  if (typeof parser !== "function") return { ok: false, reason: "parser" };
+  const source = new parser().parseFromString(html, "text/html");
+  const articles = [...source.querySelectorAll(ARTICLE)];
+  if (articles.length !== 1) return { ok: false, reason: "article" };
+  const article = articles[0];
+  const savedOpen = new Map();
+  for (const details of article.querySelectorAll("details[data-id]")) {
+    savedOpen.set(details.getAttribute("data-id"), details.hasAttribute("open"));
+  }
+  const tools = toolsOf(article);
+  return {
+    ok: true,
+    article,
+    source,
+    rev: article.getAttribute("data-rev"),
+    title: source.title || null,
+    savedOpen,
+    tools,
+    toolState: tools.size ? toolStateOf(source) : {},
+  };
+}
+
+export const keepToolVersion = (live, incoming) => {
+  const a = toolInfo(live);
+  const b = toolInfo(incoming);
+  return !a.invalid && !b.invalid && a.rev === b.rev && a.signature === b.signature;
+};
+
+/**
+ * Apply one prepared file to the live article. Returns whether anything changed.
+ *
+ * Each container's children are reconciled in saved order: an equal keyed block is
+ * reused, a compatible keyed block is moved rather than cloned, a changed ordinary
+ * leaf is replaced, and a changed list or toggle is recursed into so its unchanged
+ * descendants survive. A tool whose id, revision and artifact still match is left
+ * untouched: its runtime subtree and reader-local interaction state are the host's.
+ */
+export function applyPreparedArticle(prepared, { article, readerOpen = new Map(), savedOpen = null, keepTool = keepToolVersion } = {}) {
+  if (!prepared?.ok || !article) return { changed: false };
+  for (const details of prepared.article.querySelectorAll("details[data-id]")) {
+    const id = details.getAttribute("data-id");
+    if (!readerOpen.has(id)) continue;
+    if (details.hasAttribute("open") !== readerOpen.get(id)) details.toggleAttribute("open", readerOpen.get(id));
+  }
+  const index = indexBlocks(article);
+  const used = new Set();
+  let changed = false;
+
+  const fresh = (incoming) => {
+    changed = true;
+    return incoming.cloneNode(true);
+  };
+
+  const matchingUnkeyed = (incoming, container) => {
+    const wanted = retainedIds(incoming);
+    for (const live of container.children) {
+      if (used.has(live) || live.hasAttribute("data-id")) continue;
+      if (live.tagName !== incoming.tagName) continue;
+      if (!wanted.size) return live;
+      const have = retainedIds(live);
+      for (const id of wanted) if (have.has(id)) return live;
+    }
+    return null;
+  };
+
+  const matchingLeaf = (incoming, container) => {
+    for (const live of container.children) {
+      if (used.has(live) || live.hasAttribute("data-id")) continue;
+      if (live.tagName === incoming.tagName) return live;
+    }
+    return null;
+  };
+
+  const syncAttributes = (live, incoming, skip = null) => {
+    for (const { name, value } of [...incoming.attributes]) {
+      if (name === skip || live.getAttribute(name) === value) continue;
+      live.setAttribute(name, value);
+      changed = true;
+    }
+    for (const { name } of [...live.attributes]) {
+      if (name === skip || incoming.hasAttribute(name)) continue;
+      live.removeAttribute(name);
+      changed = true;
+    }
+  };
+
+  const reuseNode = (incoming, live, at) => {
+    const same = (candidate) =>
+      candidate && candidate.nodeType === incoming.nodeType && candidate.nodeValue === incoming.nodeValue && !used.has(candidate);
+    const found = same(live.childNodes[at]) ? live.childNodes[at] : [...live.childNodes].find(same);
+    if (!found) return incoming.cloneNode(true);
+    used.add(found);
+    return found;
+  };
+
+  const reconcileContainer = (live, incoming) => {
+    const ordered = [];
+    const children = [...incoming.childNodes];
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (child.nodeType !== 1) {
+        ordered.push(reuseNode(child, live, i));
+        continue;
+      }
+      const node = pick(child, live);
+      used.add(node);
+      ordered.push(node);
+    }
+    const kept = new Set(ordered);
+    let walk = live.firstChild;
+    for (const node of ordered) {
+      while (walk && !kept.has(walk)) walk = walk.nextSibling;
+      if (walk === node) {
+        walk = walk.nextSibling;
+        continue;
+      }
+      live.insertBefore(node, walk);
+      changed = true;
+    }
+    for (const child of [...live.childNodes]) {
+      if (kept.has(child)) continue;
+      child.remove();
+      changed = true;
+    }
+  };
+
+  const freshShell = (incoming) => {
+    changed = true;
+    const node = incoming.cloneNode(false);
+    reconcileContainer(node, incoming);
+    return node;
+  };
+
+  const reconcileDetails = (live, incoming) => {
+    changed = true;
+    const id = live.getAttribute("data-id");
+    const open = readerOpen.has(id) ? readerOpen.get(id) : incoming.hasAttribute("open");
+    syncAttributes(live, incoming, "open");
+    if (live.hasAttribute("open") !== open) live.toggleAttribute("open", open);
+    reconcileContainer(live, incoming);
+  };
+
+  const reconcileItem = (live, incoming) => {
+    changed = true;
+    syncAttributes(live, incoming);
+    reconcileContainer(live, incoming);
+  };
+
+  function pick(incoming, container) {
+    const id = incoming.getAttribute("data-id");
+    if (id) {
+      const live = index.get(id);
+      if (!live || used.has(live) || live === container || live.contains(container)) return fresh(incoming);
+      used.add(live);
+      if (isTool(live) && isTool(incoming)) return keepTool(live, incoming) ? live : fresh(incoming);
+      if (live.tagName !== incoming.tagName) return fresh(incoming);
+      if (live.isEqualNode(incoming)) return live;
+      if (incoming.tagName === "DETAILS") {
+        reconcileDetails(live, incoming);
+        return live;
+      }
+      if (incoming.tagName === "LI") {
+        reconcileItem(live, incoming);
+        return live;
+      }
+      if (LISTS.has(incoming.tagName)) {
+        syncAttributes(live, incoming);
+        reconcileContainer(live, incoming);
+        return live;
+      }
+      return fresh(incoming);
+    }
+    if (LISTS.has(incoming.tagName)) {
+      const live = matchingUnkeyed(incoming, container);
+      if (!live) return freshShell(incoming);
+      used.add(live);
+      syncAttributes(live, incoming);
+      reconcileContainer(live, incoming);
+      return live;
+    }
+    const live = matchingLeaf(incoming, container);
+    if (!live) return fresh(incoming);
+    used.add(live);
+    if (live.isEqualNode(incoming)) return live;
+    changed = true;
+    return fresh(incoming);
+  }
+
+  reconcileContainer(article, prepared.article);
+  if (savedOpen) {
+    savedOpen.clear();
+    for (const [id, open] of prepared.savedOpen) savedOpen.set(id, open);
+  }
+  for (const id of [...readerOpen.keys()]) if (!prepared.savedOpen.has(id)) readerOpen.delete(id);
+  return { changed };
+}

package/src/page/recover.js

@@ -1,4 +1,4 @@
-import toast, { toastPersistent, dismissPersistent } from "../ui/toast.js";
+import toast, { toastPersistent, dismissPersistent } from "../ui/toast-lazy.js";
 import { state as pmState } from "../vendor/prosemirror.vendor.js";
 
 export const NOTICE_TEXT = "Some text you typed was kept aside when its block moved or was removed.";

package/src/page/rich/page-tool.js

@@ -1,5 +1,6 @@
 import { cloneJson } from "../../live/ops.js";
 import { validateArtifact, validateState } from "./tool-runtime.js";
+export { capabilityAdvertised } from "../tool-capability.js";
 
 const CONTEXT_LIMIT = 16384;
 const bytes = (value) => new TextEncoder().encode(JSON.stringify(value)).length;
@@ -30,10 +31,6 @@ function trimmedContext(context) {
   return copy;
 }
 
-export function capabilityAdvertised(meta) {
-  return Array.isArray(meta?.extensions) && meta.extensions.includes("page-tool/1");
-}
-
 export function createToolClient({ transport, newId }) {
   let active = null;
   const discard = (candidate) => {

package/src/page/runtime-owner.js

@@ -0,0 +1,27 @@
+// One runtime owns an article at a time. A reader owns the article it projects;
+// the editor owns it from the moment it mounts, including the noneditable period
+// while saved feature views are still arriving. A mode flag is not enough: two
+// runtimes both think they may write, and a late frame lands over a mounted tool.
+//
+// The kind is diagnostic, not permission to share. A second claim on the same
+// article throws even when it names the same kind, so a double start fails loudly
+// instead of leaving two listeners on one article.
+
+const owners = new WeakMap();
+
+export function claim(article, kind) {
+  if (!article || article.nodeType !== 1) throw new TypeError("clayjs: claim needs an element to own");
+  if (owners.has(article)) throw new Error(`clayjs: the article already has a ${owners.get(article).kind} runtime`);
+  const token = { kind: String(kind ?? "runtime"), active: true };
+  owners.set(article, token);
+  return function release() {
+    if (!token.active) return false;
+    token.active = false;
+    if (owners.get(article) === token) owners.delete(article);
+    return true;
+  };
+}
+
+export function ownerOf(article) {
+  return owners.get(article)?.kind ?? null;
+}

package/src/page/save-projection.js

@@ -5,8 +5,10 @@
 // never run after this and undo it.
 import "../attrs/save-freeze.js";
 import { addDocumentTransform } from "../core/snapshot.js";
-import { HyperMorph } from "../vendor/hyper-morph.vendor.js";
+import { parseJsonRelaxed } from "../vendor/hyper-morph-json.vendor.js";
 import { fragmentCleaner, project, renderModel, revOf } from "./projection.js";
+import { documentTitle } from "./document-title.js";
+import { customTitle, writeTitle } from "./document-title-dom.js";
 import { blocksFromPageValues } from "./ybind/decode.js";
 import { YDecodeError } from "./ybind/provider.js";
 
@@ -27,7 +29,7 @@ export function renderFromTags(texts) {
   const key = texts.join("\u0000");
   if (memo && memo.key === key) return memo;
   const values = texts.map((text) => {
-    try { return HyperMorph.parseJsonRelaxed(text); }
+    try { return parseJsonRelaxed(text); }
     catch { throw new YDecodeError("invalid-json", "Cannot read the page data as JSON"); }
   });
   const blocks = blocksFromPageValues(values);
@@ -36,7 +38,7 @@ export function renderFromTags(texts) {
     const html = blocks[id]?.artifact?.fallbackHtml;
     return typeof html === "string" ? html : "";
   };
-  memo = { key, html: renderModel(model, { fallbackOf, clean: fragmentCleaner(document) }), rev: revOf(model) };
+  memo = { key, html: renderModel(model, { fallbackOf, clean: fragmentCleaner(document) }), rev: revOf(model), model, title: documentTitle(model) };
   return memo;
 }
 
@@ -45,9 +47,10 @@ export function projectInto(clone) {
   if (!article) return;
   const tags = pageTags(clone);
   if (!tags.length) return;
-  const { html, rev } = renderFromTags(tags.map((el) => el.textContent));
+  const { html, rev, title } = renderFromTags(tags.map((el) => el.textContent));
   if (article.innerHTML !== html) article.innerHTML = html;
   article.setAttribute("data-rev", rev);
+  if (!customTitle(clone)) writeTitle(clone, title);
 }
 
 addDocumentTransform(projectInto);

package/src/page/schema.js

@@ -141,6 +141,20 @@ export const schema = new model.Schema({
       attrs: { ...block, html: { default: "" } },
       toDOM: (n) => ["div", ref(n, { "data-type": "preserved" })],
     },
+    // A block type a newer peer wrote and this runtime has no schema for. It keeps
+    // the original record in raw and its inline content for mapping, and it shows
+    // an inert fallback: no content DOM to edit, no command that rewrites it.
+    opaque_block: {
+      group: "block",
+      content: "inline*",
+      atom: true,
+      isolating: true,
+      selectable: true,
+      attrs: { ...block, raw: { default: null } },
+      toDOM: (n) => ["div", ref(n, { "data-type": "newer-format", "data-format": String(n.attrs.raw?.t ?? ""), contenteditable: "false" }),
+        ["span", { class: "page-newer-format" }, `Newer format: ${String(n.attrs.raw?.t ?? "")}`],
+        ["span", { class: "page-newer-format-text" }, n.textContent]],
+    },
 
     text: { group: "inline" },
     hard_break: {

package/src/page/table-rect-key.js

@@ -0,0 +1,3 @@
+import { state } from "../vendor/prosemirror.vendor.js";
+
+export const rectKey = new state.PluginKey("tableRect");

package/src/page/table-select.js

@@ -11,10 +11,11 @@ import { clipboardSerializer } from "./blocks.js";
 import { asStep } from "./blocksel.js";
 import { announce } from "./announce.js";
 import { REMOTE_META } from "./ybind/layout.js";
+import { rectKey } from "./table-rect-key.js";
 
-const { Plugin, PluginKey, TextSelection } = state;
+const { Plugin, TextSelection } = state;
 const N = schema.nodes;
-export const rectKey = new PluginKey("tableRect");
+export { rectKey };
 
 const findTable = (doc, id) => {
   let found = null;
@@ -171,7 +172,7 @@ export function tableSelectPlugin() {
           const step = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1] }[event.key];
           if (step) return extend(...step)(st, view.dispatch, view);
         }
-        if (MODIFIERS.has(event.key) || ((event.metaKey || event.ctrlKey) && (event.key === "c" || event.key === "x" || event.key === "v"))) return false;
+        if (MODIFIERS.has(event.key) || ((event.metaKey || event.ctrlKey) && (event.key === "a" || event.key === "c" || event.key === "x" || event.key === "v"))) return false;
         view.dispatch(st.tr.setMeta(rectKey, null));
         return false;
       },

package/src/page/table-style.js

@@ -8,7 +8,7 @@ export const TABLE_CSS = `
 .page-table table.is-sized { table-layout: fixed; min-width: 0; }
 .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 { background: var(--page-accent); opacity: 0.4; }
+.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; }

package/src/page/table-views.js

@@ -0,0 +1,3 @@
+// The cell views a table plugin can reach, filled by the table view part when it
+// loads. The plugin works, and does nothing, for cells without a view.
+export const cellViews = new WeakMap();