@panphora/clayjs 1.13.1 → 1.14.0

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

@@ -0,0 +1,299 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
+
+/* Light 4: warm paper, compact Inter with small 14px section heads, amber selection and frosted faint chrome, from the Gemini Argon bake-off seat. */
+
+@import url("./content.css");
+
+:where(article[data-page], .page-shell) {
+  --chart-1: #8A6A2E;
+  --chart-2: #6d4e0b;
+  --chart-3: #6E6A62;
+  --chart-4: #2B2926;
+  --chart-5: #9B968C;
+  --chart-6: #3B3833;
+  --chart-text: #2B2926;
+  --page-bg: #FAF8F4;
+  --page-ink: #2B2926;
+  --page-ink-strong: #1E1D1A;
+  --page-ink-soft: #6E6A62;
+  --page-ink-faint: #9B968C;
+  --page-rule: rgba(31, 30, 27, 0.08);
+  --page-accent: #8A6A2E;
+  --page-link: #6d4e0b;
+  --page-caret: #2B2926;
+  --page-selection: rgba(196, 152, 74, 0.22);
+
+  --page-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --page-font-display: var(--page-font);
+  --page-font-heading: var(--page-font);
+  --page-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --page-font-size: 16px;
+  --page-line-height: 1.68;
+  --page-measure: 586px;
+  --page-pad-top: 84px;
+  --page-h1-size: 27px;
+  --page-h1-weight: 600;
+  --page-h1-tracking: -0.022em;
+  --page-h1-line: 1.24;
+  --page-h2-size: 14px;
+  --page-h2-weight: 600;
+  --page-h3-size: 14px;
+  --page-h3-weight: 500;
+  --page-block-gap: 0.32em;
+  --page-indent: 1.375em;
+
+  --page-marker: #9B968C;
+  --page-check-size: 16px;
+  --page-check-radius: 4px;
+  --page-check-border: rgba(31, 30, 27, 0.28);
+  --page-check-fill: #3B3833;
+  --page-check-ink: #FAF8F4;
+  --page-done-ink: #6E6A62;
+  --page-toggle-ink: #6E6A62;
+  --page-callout-bg: rgba(31, 30, 27, 0.026);
+  --page-callout-line: rgba(31, 30, 27, 0.07);
+  --page-code-bg: rgba(31, 30, 27, 0.055);
+  --page-code-ink: #35322D;
+
+  --page-chrome-ink-rest: rgba(31, 30, 27, 0.24);
+  --page-chrome-ink-moved: rgba(31, 30, 27, 0.45);
+  --page-chrome-bg-rest: rgba(250, 248, 244, 0.78);
+  --page-chrome-bg-moved: rgba(250, 248, 244, 0.92);
+  --page-chrome-line-rest: rgba(31, 30, 27, 0.065);
+  --page-chrome-line-moved: rgba(31, 30, 27, 0.13);
+  --page-chrome-shadow-rest: 0 1px 2px rgba(31, 30, 27, 0.025);
+  --page-chrome-shadow-moved: 0 2px 6px rgba(31, 30, 27, 0.05);
+  --page-chrome-radius: 8px;
+  --page-plus-size: 24px;
+  --page-fade: 180ms;
+
+  --page-pop-bg: #F6F3EC;
+  --page-pop-ink: #262421;
+  --page-pop-muted: #78736A;
+  --page-pop-line: rgba(31, 30, 27, 0.12);
+  --page-pop-shadow: 0 10px 28px rgba(31, 30, 27, 0.09), 0 2px 6px rgba(31, 30, 27, 0.05);
+  --page-pop-hover: rgba(31, 30, 27, 0.065);
+  --page-pop-radius: 10px;
+  --page-bar-bg: #F6F3EC;
+  --page-bar-ink: #262421;
+  --page-scrim: rgba(24, 23, 20, 0.14);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+article[data-page] figure[data-type="chart"] { --chart-1: #8A6A2E; --chart-2: #6d4e0b; --chart-3: #6E6A62; --chart-4: #2B2926; --chart-5: #9B968C; --chart-6: #3B3833; --chart-text: #2B2926; max-width: 100%; }
+article[data-page] figure[data-type="chart"] > svg { display: block; width: 100%; height: auto; color: var(--chart-text); font: 12px Inter, sans-serif; }
+
+:is(article[data-page], .page-shell .page-editor) {
+  letter-spacing: -0.006em;
+}
+
+:is(article[data-page], .page-shell .page-editor) > p {
+  margin-block-end: 0.62em;
+}
+
+:is(article[data-page], .page-shell .page-editor) > h2,
+:is(article[data-page], .page-shell .page-editor) > h3 {
+  margin-block: 1.55em 0.4em;
+  line-height: 1.4;
+  letter-spacing: -0.008em;
+}
+
+:is(article[data-page], .page-shell .page-editor) > h1:first-child {
+  margin-block-end: 0.67em;
+}
+
+:is(article[data-page], .page-shell .page-editor) :not(pre) > code {
+  font-size: 0.86em;
+  padding: 1.5px 5px;
+  border-radius: 4px;
+}
+
+:is(article[data-page], .page-shell .page-editor) .page-li[data-kind="check"][data-checked="true"] {
+  text-decoration-color: var(--page-ink-faint);
+}
+
+:is(article[data-page], .page-shell .page-editor) .page-li[data-kind="check"]::before {
+  border-width: 1.25px;
+}
+
+:is(article[data-page], .page-shell .page-editor) .page-toggle {
+  padding-block: 7px;
+  padding-inline-end: 10px;
+  border: 1px solid rgba(31, 30, 27, 0.07);
+  border-radius: 7px;
+  background: rgba(31, 30, 27, 0.026);
+  font-size: 15px;
+  line-height: 1.45;
+}
+
+:is(article[data-page], .page-shell .page-editor) .page-toggle-button::before {
+  content: "";
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background: var(--page-toggle-ink);
+  clip-path: polygon(30% 20%, 80% 50%, 30% 80%);
+  transform-origin: 50% 50%;
+  vertical-align: -0.05em;
+}
+
+:is(article[data-page], .page-shell .page-editor) .page-toggle[aria-expanded="true"] > .page-toggle-button::before {
+  transform: rotate(90deg);
+}
+
+:is(article[data-page], .page-shell .page-editor) aside.page-callout {
+  border-radius: 7px;
+}
+
+.page-shell .page-dock {
+  gap: 2px;
+  padding: 3px 6px;
+}
+
+.page-shell .page-dock .page-tool {
+  height: 24px;
+  padding: 0 6px;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 450;
+  letter-spacing: -0.005em;
+}
+
+.page-shell .page-tool svg {
+  width: 14px;
+  height: 14px;
+}
+
+.page-shell .page-tool-sep {
+  width: 1px;
+  height: 13px;
+  margin: 0 2px;
+  background: rgba(31, 30, 27, 0.055);
+}
+
+.page-shell.is-moved .page-tool-sep {
+  background: rgba(31, 30, 27, 0.10);
+}
+
+.page-shell .page-plus {
+  border-radius: 6px;
+  background: rgba(31, 30, 27, 0.022);
+}
+
+.page-shell.is-moved .page-plus {
+  background: rgba(31, 30, 27, 0.048);
+}
+
+.page-shell .page-plus svg {
+  width: 13px;
+  height: 13px;
+}
+
+.page-shell .page-bubble {
+  gap: 2px;
+  padding: 4px 5px;
+  border-radius: 8px;
+}
+
+.page-shell .page-bubble .page-tool {
+  height: 26px;
+  min-width: 26px;
+  padding: 0 6px;
+  border-radius: 5px;
+  font-size: 12.5px;
+  font-weight: 500;
+}
+
+.page-shell .page-menu {
+  width: 264px;
+  padding: 6px;
+}
+
+.page-shell .page-menu-title {
+  padding: 4px 8px 5px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.page-shell .page-menu-item {
+  gap: 10px;
+  min-height: 33px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 13.5px;
+}
+
+.page-shell .page-menu-icon {
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  background: rgba(31, 30, 27, 0.045);
+  border: 1px solid rgba(31, 30, 27, 0.075);
+}
+
+.page-shell .page-menu-label {
+  font-weight: 450;
+  line-height: 1.25;
+}
+
+.page-shell .page-menu-hint {
+  font-family: var(--page-font-mono);
+  font-size: 11px;
+}
+
+@media (max-width: 560px) {
+  :where(article[data-page], .page-shell) {
+    --page-font-size: 15.5px;
+    --page-line-height: 1.62;
+    --page-h1-size: 23px;
+    --page-pad-top: 68px;
+  }
+
+  .page-shell .page-bubble {
+    padding: 0 16px;
+    border-radius: 0;
+    box-shadow: 0 -4px 16px rgba(31, 30, 27, 0.06);
+  }
+
+  .page-shell .page-bubble .page-tool {
+    height: 34px;
+    min-width: 36px;
+    font-size: 13px;
+  }
+
+  .page-shell .page-menu {
+    width: auto;
+    padding: 8px 12px 12px;
+    border-radius: 16px 16px 0 0;
+  }
+
+  .page-shell .page-menu::before {
+    content: "";
+    display: block;
+    width: 36px;
+    height: 4px;
+    margin: 2px auto 8px;
+    border-radius: 2px;
+    background: var(--page-pop-line);
+  }
+
+  .page-shell .page-menu-item {
+    min-height: 45px;
+    padding: 6px 10px;
+    font-size: 14.5px;
+  }
+
+  .page-shell .page-menu-icon {
+    width: 26px;
+    height: 26px;
+  }
+
+  .page-shell .page-plus {
+    width: 28px;
+    height: 28px;
+  }
+}

package/src/page/tool-data.js

@@ -0,0 +1,25 @@
+import { schema } from "./schema.js";
+import { blockJson } from "./model.js";
+import { project } from "./projection.js";
+import { cellText } from "./rich/cell.js";
+
+export function tablesFromDoc(doc) {
+  const tables = [];
+  let name = "";
+  doc.forEach((node) => {
+    if (node.type === schema.nodes.heading) name = node.textContent;
+    if (node.type !== schema.nodes.table) return;
+    const table = project({ [node.attrs.id]: blockJson(node) })[0];
+    const rows = table.rows.map((row) => ({ ...row, cells: Object.fromEntries(Object.entries(row.cells).map(([col, cell]) => [col, cellText(cell)])) }));
+    tables.push({ id: table.id, name: name || `Table ${tables.length + 1}`, cols: table.cols, rows });
+  });
+  return tables;
+}
+
+export function toolContext(doc, title) {
+  const outline = [];
+  doc.forEach((node) => {
+    if (node.type === schema.nodes.heading) outline.push({ level: node.attrs.level, text: node.textContent });
+  });
+  return { title, outline, tables: tablesFromDoc(doc) };
+}

package/src/page/tool-view.js

@@ -0,0 +1,68 @@
+import { schema } from "./schema.js";
+import { openPageMenu } from "./chrome.js";
+
+export class ToolView {
+  constructor(node, view, getPos, { host, revise = null }) {
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.host = host;
+    this.revise = revise;
+    this.showingFallback = false;
+    const doc = view.dom.ownerDocument;
+    this.dom = doc.createElement("section");
+    this.dom.className = "page-tool-block";
+    this.dom.dataset.type = "tool";
+    this.dom.dataset.id = node.attrs.id ?? "";
+    this.dom.contentEditable = "false";
+    this.content = doc.createElement("div");
+    this.content.className = "page-tool-content";
+    this.menu = doc.createElement("button");
+    this.menu.type = "button";
+    this.menu.className = "page-tool-settings";
+    this.menu.textContent = "Tool options";
+    this.menu.setAttribute("aria-label", "Tool options");
+    this.menu.addEventListener("click", () => this.openMenu());
+    this.dom.append(this.content, this.menu);
+    this.mount();
+  }
+
+  mount() {
+    this.instance?.dispose();
+    this.instance = null;
+    if (this.showingFallback) this.content.innerHTML = this.node.attrs.artifact?.fallbackHtml ?? "";
+    else this.instance = this.host.mount(this.content, {
+      id: this.node.attrs.id,
+      artifact: this.node.attrs.artifact,
+      rev: this.node.attrs.rev,
+      seed: this.node.attrs.state,
+    });
+  }
+
+  openMenu() {
+    const items = [];
+    if (this.revise) items.push({ label: "Revise…", run: () => this.revise(this.node.attrs.id, this.node.attrs.rev) });
+    items.push({ label: this.showingFallback ? "Show tool" : "Show fallback", run: () => {
+      this.showingFallback = !this.showingFallback;
+      this.mount();
+    } });
+    items.push({ label: "Delete", run: () => {
+      const pos = this.getPos();
+      if (pos == null || this.view.state.doc.nodeAt(pos)?.type !== schema.nodes.tool) return;
+      this.view.dispatch(this.view.state.tr.delete(pos, pos + this.node.nodeSize));
+    } });
+    openPageMenu(this.view, this.menu, items);
+  }
+
+  update(node) {
+    if (node.type !== schema.nodes.tool || node.attrs.id !== this.node.attrs.id) return false;
+    const changed = node.attrs.rev !== this.node.attrs.rev || JSON.stringify(node.attrs.artifact) !== JSON.stringify(this.node.attrs.artifact);
+    this.node = node;
+    if (changed) this.mount();
+    return true;
+  }
+
+  stopEvent(event) { return this.dom.contains(event.target); }
+  ignoreMutation() { return true; }
+  destroy() { this.instance?.dispose(); this.instance = null; }
+}

package/src/page/tools.js

@@ -0,0 +1,133 @@
+import { mountTool, readerStateHandle, scopedStateHandle, validateArtifact } from "./rich/tool-runtime.js";
+
+export function createToolHost({ store = null, mode, tables = () => [] }) {
+  const mounted = new Set();
+  const warned = new Set();
+  let disposed = false;
+  let frame = null;
+  let frameWindow = null;
+
+  const warn = (id, rev, error) => {
+    const key = `${id}:${rev}`;
+    if (warned.has(key)) return;
+    warned.add(key);
+    console.warn(`clayjs: tool ${id} revision ${rev} failed`, error);
+  };
+
+  const fail = (item, error) => {
+    warn(item.id, item.rev, error);
+    item.readerOff?.();
+    item.readerOff = null;
+    try { item.runtime?.dispose(); } catch (cleanupError) { warn(item.id, item.rev, cleanupError); }
+    item.runtime = null;
+    item.root.innerHTML = item.artifact?.fallbackHtml ?? "";
+    const note = item.root.ownerDocument.createElement("p");
+    note.setAttribute("data-tool-error", "");
+    note.textContent = "Tool could not start";
+    item.root.append(note);
+  };
+
+  const onChange = () => {
+    for (const item of mounted) {
+      if (item.disposed || mode === "view") continue;
+      const next = store?.data?.[item.id]?.[item.rev];
+      const signature = JSON.stringify(next);
+      if (signature === item.signature) continue;
+      item.signature = signature;
+      try {
+        if (!item.runtime) item.render();
+        else if (next !== undefined) item.runtime.notifyState();
+        else item.render();
+      } catch (error) { fail(item, error); }
+    }
+  };
+  const unsubscribe = store?.on?.("change", onChange) ?? (() => {});
+
+  const host = {
+    mount(root, { id, artifact, rev, seed = {} }) {
+      if (disposed) throw new Error("tool host is disposed");
+      const item = { root, id, artifact, rev, seed, runtime: null, readerOff: null, disposed: false, signature: undefined };
+      const note = (message) => {
+        const line = root.ownerDocument.createElement("p");
+        line.setAttribute("data-tool-note", "");
+        line.textContent = message;
+        root.append(line);
+      };
+      item.render = () => {
+        item.readerOff?.();
+        item.readerOff = null;
+        try { item.runtime?.dispose(); } catch (error) { warn(item.id, item.rev, error); }
+        item.runtime = null;
+        root.removeAttribute("data-tool-scope");
+        if (validateArtifact(item.artifact).ok === false) {
+          root.textContent = "Tool unavailable";
+          warn(item.id, item.rev, new Error("invalid artifact"));
+          return;
+        }
+        const current = store?.data?.[item.id]?.[item.rev];
+        item.signature = JSON.stringify(current);
+        if (mode === "edit" && store && current === undefined) {
+          root.innerHTML = item.artifact.fallbackHtml;
+          note("Waiting for this tool's state…");
+          return;
+        }
+        const state = mode === "edit" && store
+          ? scopedStateHandle(store, item.id, item.rev)
+          : readerStateHandle(current ?? item.seed ?? {});
+        item.runtime = mountTool({ root, artifact: item.artifact, mode, state, tables, onError: (error) => warn(item.id, item.rev, error) });
+        item.readerOff = state.on?.("change", () => {
+          try { item.runtime?.notifyState(); } catch (error) { fail(item, error); }
+        }) ?? null;
+        if (mode === "edit" && !store) note("This document can't save tool state");
+      };
+      try { item.render(); } catch (error) { fail(item, error); }
+      mounted.add(item);
+      return {
+        update({ artifact: nextArtifact, rev: nextRev }) {
+          if (item.disposed) return;
+          if (nextRev === item.rev && nextArtifact === item.artifact) return;
+          item.artifact = nextArtifact;
+          item.rev = nextRev;
+          try { item.render(); } catch (error) { fail(item, error); }
+        },
+        dispose() {
+          if (item.disposed) return;
+          item.disposed = true;
+          mounted.delete(item);
+          item.readerOff?.();
+          try { item.runtime?.dispose(); } catch (error) { warn(item.id, item.rev, error); }
+          item.runtime = null;
+        },
+      };
+    },
+    tablesChanged() {
+      if (disposed || frame !== null || !mounted.size) return;
+      const win = [...mounted][0]?.root.ownerDocument.defaultView ?? globalThis;
+      frameWindow = win;
+      const raf = win.requestAnimationFrame?.bind(win) ?? ((fn) => win.setTimeout(fn, 0));
+      frame = raf(() => {
+        frame = null;
+        for (const item of mounted) {
+          try { item.runtime?.notifyTables(); } catch (error) { fail(item, error); }
+        }
+      });
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      unsubscribe();
+      if (frame !== null) {
+        if (frameWindow.cancelAnimationFrame) frameWindow.cancelAnimationFrame(frame);
+        else frameWindow.clearTimeout(frame);
+        frame = null;
+      }
+      for (const item of [...mounted]) {
+        item.disposed = true;
+        item.readerOff?.();
+        try { item.runtime?.dispose(); } catch (error) { warn(item.id, item.rev, error); }
+      }
+      mounted.clear();
+    },
+  };
+  return host;
+}

package/src/page/view.js

@@ -0,0 +1,136 @@
+// View mode: readers see the saved article, and each newer file the host sends
+// on the saved lane (every checkpoint is a save) is morphed into it. Live sync
+// never touches a frozen element's contents, so this is the only writer here.
+// No ProseMirror, no projection code: the writer's save already rendered it.
+// A toggle the reader opened or closed keeps the reader's state across updates.
+import { morph } from "../vendor/hyper-morph.vendor.js";
+import { createToolHost } from "./tools.js";
+
+const ARTICLE = "article[data-page]";
+const TOOL = 'section[data-type="tool"][data-id]';
+
+export function applySavedArticle(html, doc = document, readerOpen = new Map(), savedOpen = new Map(), preserveTools = new Set()) {
+  const live = doc.querySelector(ARTICLE);
+  if (!live || typeof html !== "string") return false;
+  const incoming = new doc.defaultView.DOMParser().parseFromString(html, "text/html").querySelector(ARTICLE);
+  if (!incoming) return false;
+  for (const details of incoming.querySelectorAll("details[data-id]")) {
+    const id = details.getAttribute("data-id");
+    savedOpen.set(id, details.hasAttribute("open"));
+    if (readerOpen.has(id)) details.toggleAttribute("open", readerOpen.get(id));
+  }
+  const rev = incoming.getAttribute("data-rev");
+  if (rev && rev === live.getAttribute("data-rev") && incoming.innerHTML === live.innerHTML) return false;
+  const kept = new Map();
+  for (const root of live.querySelectorAll(TOOL)) {
+    const id = root.getAttribute("data-id");
+    if (!preserveTools.has(id)) continue;
+    kept.set(id, root);
+    root.replaceWith(root.cloneNode(false));
+  }
+  // raw: the sync policy ignores everything under [clay~=freeze], which is all of it.
+  // Scripts never run: a tool's fallback is markup, and tools mount from the store.
+  morph(live, incoming.innerHTML, {
+    policy: "raw", morphStyle: "innerHTML", scripts: { handle: false },
+    key: (el) => el.getAttribute("data-id") || null,
+  });
+  for (const root of live.querySelectorAll(TOOL)) {
+    const original = kept.get(root.getAttribute("data-id"));
+    if (original) root.replaceWith(original);
+  }
+  if (rev) live.setAttribute("data-rev", rev);
+  return true;
+}
+
+// A toggle counts as the reader's own when its state differs from what the
+// last saved article said: clicks, find-in-page and keyboard all fire `toggle`,
+// and a toggle the morph caused matches the saved state.
+export function startPageView(doc = document) {
+  const readerOpen = new Map();
+  const savedOpen = new Map();
+  const mounted = new Map();
+  const toolStore = { data: {} };
+  const host = createToolHost({ store: toolStore, mode: "view" });
+  let stopped = false;
+  let sequence = 0;
+  for (const details of doc.querySelectorAll(`${ARTICLE} details[data-id]`)) savedOpen.set(details.getAttribute("data-id"), details.hasAttribute("open"));
+  const onToggle = (event) => {
+    const details = event.target;
+    if (details.tagName !== "DETAILS" || !details.closest(ARTICLE)) return;
+    const id = details.getAttribute("data-id");
+    if (!id) return;
+    if (details.open === savedOpen.get(id)) readerOpen.delete(id);
+    else readerOpen.set(id, details.open);
+  };
+  const toolsIn = async (source) => {
+    if (!source.querySelector(`${ARTICLE} ${TOOL}`)) return null;
+    const blocks = {};
+    for (const root of source.querySelectorAll(`${ARTICLE} ${TOOL}`)) {
+      const data = root.querySelector(':scope > script[type="application/json"][data-tool]');
+      let tool = {};
+      try { tool = data ? JSON.parse(data.textContent) : {}; } catch {}
+      blocks[root.getAttribute("data-id")] = { t: "tool", artifact: tool.artifact ?? null, rev: tool.rev ?? null, state: tool.state ?? {} };
+    }
+    const stateTag = source.querySelector('script[type="application/json"][merge="page.tools"]');
+    const state = stateTag ? JSON.parse(stateTag.textContent) : {};
+    return { blocks, state };
+  };
+  const syncTools = (decoded) => {
+    toolStore.data = decoded?.state ?? {};
+    const seen = new Set();
+    for (const root of doc.querySelectorAll(`${ARTICLE} ${TOOL}`)) {
+      const id = root.getAttribute("data-id");
+      seen.add(id);
+      const block = decoded?.blocks?.[id];
+      const old = mounted.get(id);
+      if (!block || block.t !== "tool" || !block.artifact || !block.rev) {
+        old?.instance.dispose();
+        mounted.delete(id);
+        continue;
+      }
+      if (old && old.root === root && old.rev === block.rev && JSON.stringify(old.artifact) === JSON.stringify(block.artifact)) continue;
+      old?.instance.dispose();
+      mounted.set(id, { root, rev: block.rev, artifact: block.artifact, instance: host.mount(root, {
+        id, artifact: block.artifact, rev: block.rev, seed: block.state,
+      }) });
+    }
+    for (const [id, old] of mounted) if (!seen.has(id)) { old.instance.dispose(); mounted.delete(id); }
+  };
+  const onFrame = (event) => {
+    const html = event.detail?.html;
+    if (typeof html !== "string") return;
+    const source = new doc.defaultView.DOMParser().parseFromString(html, "text/html");
+    const turn = ++sequence;
+    const incomingIds = new Set([...source.querySelectorAll(`${ARTICLE} ${TOOL}`)].map((el) => el.getAttribute("data-id")));
+    const preserve = new Set([...mounted.keys()].filter((id) => incomingIds.has(id)));
+    for (const [id, old] of mounted) if (!incomingIds.has(id)) { old.instance.dispose(); mounted.delete(id); }
+    applySavedArticle(html, doc, readerOpen, savedOpen, preserve);
+    if (!incomingIds.size) {
+      syncTools(null);
+      return;
+    }
+    toolsIn(source).then((decoded) => {
+      if (stopped || turn !== sequence) return;
+      syncTools(decoded);
+    }).catch((error) => {
+      if (stopped || turn !== sequence) return;
+      console.warn("clayjs: could not decode saved tools", error);
+      applySavedArticle(html, doc, readerOpen, savedOpen);
+      syncTools(null);
+    });
+  };
+  doc.addEventListener("toggle", onToggle, true);
+  doc.addEventListener("clay:sync-applied", onFrame);
+  if (doc.querySelector(`${ARTICLE} ${TOOL}`)) {
+    const turn = ++sequence;
+    toolsIn(doc).then((decoded) => { if (!stopped && turn === sequence) syncTools(decoded); })
+      .catch((error) => { if (!stopped) console.warn("clayjs: could not decode saved tools", error); });
+  }
+  return () => {
+    stopped = true;
+    sequence++;
+    host.dispose();
+    doc.removeEventListener("toggle", onToggle, true);
+    doc.removeEventListener("clay:sync-applied", onFrame);
+  };
+}

package/src/page/ybind/author.js

@@ -0,0 +1,25 @@
+const POINTER = "clay.page.author";
+const OWNED = "clay.page.author.owned.";
+
+const mint = () => globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+
+export function authorIdentity(storage = globalThis.localStorage) {
+  try {
+    const owned = [];
+    for (let i = 0; i < storage.length; i++) {
+      const key = storage.key(i);
+      if (key && key.startsWith(OWNED)) owned.push(key.slice(OWNED.length));
+    }
+    let token = storage.getItem(POINTER);
+    if (!token || !owned.includes(token)) {
+      token = mint();
+      storage.setItem(OWNED + token, "1");
+      storage.setItem(POINTER, token);
+      owned.push(token);
+    }
+    return { token, owned: owned.sort() };
+  } catch {
+    const token = mint();
+    return { token, owned: [token] };
+  }
+}