@panphora/clayjs 1.13.0 → 1.14.0

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

@@ -0,0 +1,195 @@
+import { applyOp, cloneJson } from "../../live/ops.js";
+
+export const ARTIFACT_LIMIT = 24576;
+export const STATE_LIMIT = 8192;
+const ARTIFACT_KEYS = ["title", "html", "css", "javascript", "fallbackHtml", "summary"];
+const bytes = (value) => new TextEncoder().encode(JSON.stringify(value)).length;
+let nextScope = 0;
+
+export class ToolStateError extends Error {
+  constructor(code) {
+    super(code);
+    this.name = "ToolStateError";
+    this.code = code;
+  }
+}
+
+export function validateArtifact(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value) ||
+    Object.keys(value).length !== ARTIFACT_KEYS.length ||
+    !ARTIFACT_KEYS.every((key) => Object.hasOwn(value, key) && typeof value[key] === "string")) return { ok: false, code: "invalid-artifact" };
+  return bytes(value) <= ARTIFACT_LIMIT ? { ok: true } : { ok: false, code: "artifact-too-large" };
+}
+
+export function validateState(value) {
+  try {
+    const copy = cloneJson(value);
+    return bytes(copy) <= STATE_LIMIT ? { ok: true } : { ok: false, code: "state-too-large" };
+  } catch {
+    return { ok: false, code: "invalid-state" };
+  }
+}
+
+function pathOf(path) {
+  if (!Array.isArray(path) || path.some((part) => typeof part !== "string" && !(Number.isSafeInteger(part) && part >= 0))) {
+    throw new TypeError("tool state path must be an array of strings or non-negative integers");
+  }
+  return path.slice();
+}
+
+function checkedState(current, op) {
+  try {
+    const holder = { state: current === undefined ? {} : cloneJson(current) };
+    applyOp(holder, { ...op, path: ["state", ...op.path] });
+    const result = validateState(holder.state);
+    if (!result.ok) throw new ToolStateError(result.code);
+  } catch (error) {
+    if (error instanceof ToolStateError) throw error;
+    throw new ToolStateError("invalid-state");
+  }
+}
+
+export function scopedStateHandle(store, toolId, rev) {
+  const prefix = [toolId, rev];
+  return Object.freeze({
+    get data() { return store.data?.[toolId]?.[rev]; },
+    set(path, value) {
+      const parts = pathOf(path);
+      checkedState(store.data?.[toolId]?.[rev], { op: "set", path: parts, value });
+      store.set([...prefix, ...parts], value);
+    },
+    delete(path) { store.delete([...prefix, ...pathOf(path)]); },
+    add(path, n = 1) {
+      const parts = pathOf(path);
+      if (!parts.length || typeof n !== "number" || !Number.isFinite(n)) throw new ToolStateError("invalid-state");
+      checkedState(store.data?.[toolId]?.[rev], { op: "add", path: parts, n });
+      store.add([...prefix, ...parts], n);
+    },
+  });
+}
+
+export function readerStateHandle(snapshot) {
+  let data = cloneJson(snapshot ?? {});
+  const listeners = new Set();
+  const emit = () => { for (const fn of [...listeners]) fn(); };
+  const write = (op) => {
+    const holder = { state: data };
+    applyOp(holder, { ...op, path: ["state", ...op.path] });
+    const result = validateState(holder.state);
+    if (!result.ok) throw new ToolStateError(result.code);
+    data = holder.state;
+    emit();
+  };
+  return Object.freeze({
+    get data() { return cloneJson(data); },
+    set(path, value) { write({ op: "set", path: pathOf(path), value }); },
+    delete(path) { write({ op: "del", path: pathOf(path) }); },
+    add(path, n = 1) {
+      const parts = pathOf(path);
+      if (!parts.length || typeof n !== "number" || !Number.isFinite(n)) throw new ToolStateError("invalid-state");
+      write({ op: "add", path: parts, n });
+    },
+    on(type, fn) {
+      if (type !== "change" || typeof fn !== "function") throw new TypeError("reader state supports on(change, fn)");
+      listeners.add(fn);
+      return () => listeners.delete(fn);
+    },
+  });
+}
+
+function splitSelectors(selector) {
+  const out = [];
+  let start = 0, quote = null, depth = 0;
+  for (let i = 0; i < selector.length; i++) {
+    const ch = selector[i];
+    if (quote) { if (ch === quote && selector[i - 1] !== "\\") quote = null; }
+    else if (ch === '"' || ch === "'") quote = ch;
+    else if (ch === "(" || ch === "[") depth++;
+    else if (ch === ")" || ch === "]") depth--;
+    else if (ch === "," && depth === 0) { out.push(selector.slice(start, i).trim()); start = i + 1; }
+  }
+  out.push(selector.slice(start).trim());
+  return out.filter(Boolean);
+}
+
+export function scopeCss(css, blockSelector) {
+  let out = "", cursor = 0;
+  while (cursor < css.length) {
+    const open = css.indexOf("{", cursor);
+    if (open < 0) { out += css.slice(cursor); break; }
+    const selector = css.slice(cursor, open).trim();
+    let depth = 1, end = open + 1, quote = null;
+    for (; end < css.length && depth; end++) {
+      const ch = css[end];
+      if (quote) { if (ch === quote && css[end - 1] !== "\\") quote = null; }
+      else if (ch === '"' || ch === "'") quote = ch;
+      else if (ch === "{") depth++;
+      else if (ch === "}") depth--;
+    }
+    const body = css.slice(open + 1, end - 1);
+    if (/^@(?:media|supports|container)\b/i.test(selector)) out += `${selector}{${scopeCss(body, blockSelector)}}`;
+    else if (selector.startsWith("@")) out += `${selector}{${body}}`;
+    else out += `${splitSelectors(selector).map((part) => `${blockSelector} ${part}`).join(", ")}{${body}}`;
+    cursor = end;
+  }
+  return out;
+}
+
+export function mountTool({ root, artifact, mode, state, tables = () => [], onError = () => {}, setTimer = setTimeout, clearTimer = clearTimeout }) {
+  const listeners = { change: new Set(), tables: new Set() };
+  const timers = new Set();
+  let cleanup, disposed = false;
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    for (const timer of timers) clearTimer(timer);
+    timers.clear();
+    for (const group of Object.values(listeners)) group.clear();
+    const fn = cleanup;
+    cleanup = null;
+    if (typeof fn === "function") fn();
+  };
+  const notify = (type) => { if (!disposed) for (const fn of [...listeners[type]]) fn(); };
+  const allTables = () => Object.freeze(cloneJson(tables()).map((table) => deepFreeze(table)));
+  const tool = Object.freeze({
+    root, mode, state,
+    on(event, fn) {
+      if (!Object.hasOwn(listeners, event) || typeof fn !== "function") throw new TypeError("unknown tool event");
+      listeners[event].add(fn);
+      return () => listeners[event].delete(fn);
+    },
+    table(id) { return allTables().find((table) => table.id === id) ?? null; },
+    tables: allTables,
+    schedule(fn, ms) {
+      if (disposed) return null;
+      const timer = setTimer(() => { timers.delete(timer); if (!disposed) fn(); }, ms);
+      timers.add(timer);
+      return timer;
+    },
+  });
+  try {
+    root.innerHTML = artifact.html;
+    const style = root.ownerDocument.createElement("style");
+    const scope = String(++nextScope);
+    const selector = `[data-tool-scope="${scope}"]`;
+    root.setAttribute("data-tool-scope", scope);
+    style.textContent = scopeCss(artifact.css, selector);
+    root.prepend(style);
+    const body = `${artifact.javascript}\n;return typeof mount === "function" ? mount : undefined;`;
+    const exported = new Function("tool", body)(tool);
+    const mount = typeof exported === "function" ? exported : exported?.mount;
+    if (typeof mount !== "function") throw new TypeError("tool script must define mount(tool)");
+    cleanup = mount(tool);
+  } catch (error) {
+    try { dispose(); } catch (cleanupError) { onError(cleanupError); }
+    onError(error);
+    root.innerHTML = `${artifact.fallbackHtml}<p data-tool-error>Tool could not start</p>`;
+  }
+  return { notifyState: () => notify("change"), notifyTables: () => notify("tables"), dispose };
+}
+
+function deepFreeze(value) {
+  if (value && typeof value === "object") { for (const item of Object.values(value)) deepFreeze(item); Object.freeze(value); }
+  return value;
+}
+

package/src/page/save-projection.js

@@ -0,0 +1,53 @@
+// The page's save transform: the clone's article is rendered from the clone's
+// own page tags, which plugins/live.js has already written with the values this
+// save carries. Statically importing save-freeze.js makes ES module evaluation
+// register its transform first, so its restore of the load-time article can
+// 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 { fragmentCleaner, project, renderModel, revOf } from "./projection.js";
+import { blocksFromPageValues } from "./ybind/decode.js";
+import { YDecodeError } from "./ybind/provider.js";
+
+export const ARTICLE = "article[data-page]";
+const PAGE = /^page(\.[0-9]+)?$/;
+
+export function pageTags(root) {
+  return [...root.querySelectorAll('script[merge][clay~="live"]')].filter((el) => PAGE.test(el.getAttribute("merge")));
+}
+
+// Captures run several times per save (save, comparison, dirty) and once per
+// incoming frame (the merge's save clone). Comparison and dirty clones have
+// neither the article nor the tags, so they return at once; the rest share one
+// render while the tags hold the same text.
+let memo = null;
+
+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); }
+    catch { throw new YDecodeError("invalid-json", "Cannot read the page data as JSON"); }
+  });
+  const blocks = blocksFromPageValues(values);
+  const model = project(blocks);
+  const fallbackOf = (id) => {
+    const html = blocks[id]?.artifact?.fallbackHtml;
+    return typeof html === "string" ? html : "";
+  };
+  memo = { key, html: renderModel(model, { fallbackOf, clean: fragmentCleaner(document) }), rev: revOf(model) };
+  return memo;
+}
+
+export function projectInto(clone) {
+  const article = clone.querySelector(ARTICLE);
+  if (!article) return;
+  const tags = pageTags(clone);
+  if (!tags.length) return;
+  const { html, rev } = renderFromTags(tags.map((el) => el.textContent));
+  if (article.innerHTML !== html) article.innerHTML = html;
+  article.setAttribute("data-rev", rev);
+}
+
+addDocumentTransform(projectInto);

package/src/page/save-states.js

@@ -0,0 +1,85 @@
+import { captureForSaveAndComparison } from "../core/snapshot.js";
+import { downloadHtml, documentName } from "../core/conflict-download.js";
+
+// One plain state per save refusal code, so the indicator, the toast and the
+// page plugin all read the same answer. `saved` is the only happy one; every
+// code a failed save or a live notice can carry is either worth another try on
+// its own (retrying) or needs a person to do something (blocked). A code this
+// table does not know falls to `error`, which leaves the existing generic
+// "Couldn't save" feedback exactly as it was.
+const SAVE_STATE_BY_CODE = Object.freeze({
+  "page-converting": "retrying",
+  "page-capacity": "retrying",
+  busy: "retrying",
+  "rate-limited": "retrying",
+  offline: "retrying",
+  network: "retrying",
+  "network-error": "retrying",
+  timeout: "retrying",
+  "save-history-pending": "retrying",
+  "page-condition-required": "blocked",
+  "page-conversion-refused": "blocked",
+  "page-conversion-required": "blocked",
+  "page-conversion-stale": "blocked",
+  "save-id-reused": "blocked",
+  "too-large": "blocked",
+  "unsupported-host": "blocked",
+  "save-history-refresh-required": "blocked",
+  "provenance-unsupported": "blocked",
+  "receipt-expired": "blocked",
+});
+
+const BLOCKED_TEXT = "Can't save here. Your edits are still in this tab.";
+const RETRY_TEXT = "Still trying to save. Your edits are safe in this tab.";
+
+function saveStateFor({ ok = false, code = null, offline = false } = {}) {
+  if (ok) return "saved";
+  if (offline) return "retrying";
+  return SAVE_STATE_BY_CODE[code] ?? "error";
+}
+
+// A copy opens through the article rebuild, so it carries the projected article
+// and no page store: the merge state is the host's, never the file's.
+// The one page tag is removed from the captured text as it was written there; a
+// tag that cannot be found exactly once leaves the capture as it is.
+function withoutPageTag(html) {
+  let doc;
+  try { doc = new DOMParser().parseFromString(html, "text/html"); } catch { return html; }
+  const tags = [...doc.querySelectorAll('script[type="application/json"][merge="page"][clay~="live"]')]
+    .filter((el) => !el.closest("template") && !el.closest("noscript"));
+  if (tags.length !== 1) return html;
+  const outer = tags[0].outerHTML;
+  const at = html.indexOf(outer);
+  if (at < 0 || html.indexOf(outer, at + 1) !== -1) return html;
+  return html.slice(0, at) + html.slice(at + outer.length);
+}
+
+// One complete, openable file: the capture the save would have sent, with the
+// page projection already applied by the live store's snapshot listener, and
+// without the page editor's merge state, which no saved file or download carries.
+function downloadPageCopy() {
+  const { forSave } = captureForSaveAndComparison();
+  return downloadHtml({ html: withoutPageTag(forSave), name: `${documentName()}.html` });
+}
+
+// A copy of the page captured earlier (captureForSaveAndComparison().forSave), as a download.
+function downloadSnapshot(forSave) {
+  return downloadHtml({ html: withoutPageTag(forSave), name: `${documentName()}.html` });
+}
+
+// The article's own plain text, never the editor's chrome: the capture carries
+// the projected article, and only its text is asked for.
+async function copyPageText() {
+  try {
+    const { forSave } = captureForSaveAndComparison();
+    const doc = new DOMParser().parseFromString(forSave, "text/html");
+    const articles = doc.querySelectorAll("article[data-page]");
+    if (articles.length !== 1) return false;
+    await navigator.clipboard.writeText(articles[0].textContent);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export { SAVE_STATE_BY_CODE, BLOCKED_TEXT, RETRY_TEXT, saveStateFor, downloadPageCopy, downloadSnapshot, copyPageText };

package/src/page/schema.js

@@ -10,6 +10,7 @@
 // toDOM here draws the editing surface. The saved, readable HTML is the
 // projection's job, not this file's.
 import { model } from "../vendor/prosemirror.vendor.js";
+import { safeHref, safeFileHref } from "./address.js";
 
 const block = { id: { default: null }, pos: { default: null }, parent: { default: null } };
 const ref = (n, extra = {}) => ({ "data-id": n.attrs.id, ...extra });
@@ -80,8 +81,15 @@ export const schema = new model.Schema({
       group: "block",
       atom: true,
       draggable: true,
-      attrs: { ...block, src: { default: "" }, alt: { default: "" }, caption: { default: "" }, width: { default: null } },
-      toDOM: (n) => ["figure", ref(n), ["img", { src: n.attrs.src, alt: n.attrs.alt }], ["figcaption", n.attrs.caption]],
+      attrs: { ...block, src: { default: "" }, alt: { default: "" }, caption: { default: "" }, width: { default: null }, align: { default: null } },
+      toDOM: (n) => ["figure", ref(n, { "data-type": "image", ...(n.attrs.width ? { "data-width": String(n.attrs.width) } : {}), ...(n.attrs.align ? { "data-align": n.attrs.align } : {}) }), ["img", { src: n.attrs.src, alt: n.attrs.alt }], ["figcaption", n.attrs.caption]],
+    },
+    file: {
+      group: "block",
+      atom: true,
+      attrs: { ...block, src: { default: "" }, name: { default: "" }, size: { default: null }, mime: { default: null } },
+      toDOM: (n) => ["div", ref(n, { class: "page-file", "data-type": "file", "data-src": safeFileHref(n.attrs.src) ?? "", "data-name": n.attrs.name, "data-size": n.attrs.size == null ? "" : String(n.attrs.size), "data-mime": n.attrs.mime ?? "" }),
+        ["a", { href: safeFileHref(n.attrs.src), target: "_blank", rel: "noopener noreferrer" }, n.attrs.name || "file"]],
     },
     table: {
       group: "block",
@@ -96,8 +104,7 @@ export const schema = new model.Schema({
       toDOM: (n) => ["tr", ref(n), 0],
     },
     table_cell: {
-      content: "text*",
-      marks: "",
+      content: "inline*",
       isolating: true,
       attrs: { col: { default: null } },
       toDOM: (n) => ["td", { "data-col": n.attrs.col }, 0],
@@ -151,7 +158,7 @@ export const schema = new model.Schema({
     link: {
       attrs: { href: {} },
       inclusive: false,
-      toDOM: (m) => ["a", { href: m.attrs.href }, 0],
+      toDOM: (m) => ["a", { href: safeHref(m.attrs.href) }, 0],
     },
   },
 });

package/src/page/table-kinds.js

@@ -0,0 +1,20 @@
+import { orderedIds } from "./model.js";
+import { effectiveKind } from "./rich/csv.js";
+
+const cache = new WeakMap();
+
+export function columnKinds(table) {
+  let out = cache.get(table);
+  if (out) return out;
+  out = {};
+  for (const [index, id] of orderedIds(table.attrs.cols).entries()) {
+    const values = [];
+    table.forEach((row) => { if (index < row.childCount) values.push(row.child(index).textContent.trim()); });
+    out[id] = effectiveKind(table.attrs.cols[id].kind, values);
+  }
+  cache.set(table, out);
+  return out;
+}
+
+export const KIND_ICONS = Object.freeze({ text: "Aa", number: "#", date: "📅" });
+export const KIND_LABELS = Object.freeze({ text: "Text", number: "Number", date: "Date" });

package/src/page/table-paste.js

@@ -0,0 +1,57 @@
+// Spreadsheet cells on the clipboard as a grid of cell values (a string, or
+// { c, m } when a cell has marks or line breaks), and a new table from a grid.
+// Google Sheets, Excel and Numbers put an HTML table and tab-separated text on
+// the clipboard; the HTML keeps bold, italic and links, the text is the fallback.
+import { schema } from "./schema.js";
+import { keysBetween, newId, nodeFromBlock, cellValue } from "./model.js";
+import { parseCsv } from "./rich/csv.js";
+import { cellText } from "./rich/cell.js";
+import { clipboardParser } from "./blocks.js";
+
+function htmlGrid(html, doc) {
+  if (!html || !/<table[\s>]/i.test(html)) return null;
+  const Parser = doc.defaultView?.DOMParser ?? globalThis.DOMParser;
+  if (!Parser) return null;
+  const body = new Parser().parseFromString(html, "text/html").body;
+  const tables = [...body.querySelectorAll("table")].filter((table) => !table.parentElement.closest("table"));
+  if (tables.length !== 1) return null;
+  const rest = body.cloneNode(true);
+  for (const skip of rest.querySelectorAll("table, style, script, template, meta, title")) skip.remove();
+  if (rest.textContent.trim()) return null;
+  const table = tables[0];
+  const rows = [...table.querySelectorAll("tr")].filter((tr) => tr.closest("table") === table);
+  const grid = rows.map((tr) => [...tr.children].filter((cell) => cell.tagName === "TD" || cell.tagName === "TH").map((cell) => cellValue(clipboardParser.parse(cell, { topNode: schema.nodes.table_cell.create() }))));
+  return { grid: grid.filter((row) => row.length), own: !!table.querySelector("td[data-col]") };
+}
+
+function textGrid(text) {
+  if (!text || !text.includes("\t")) return null;
+  const { header, rows } = parseCsv(text.replace(/\r?\n$/, ""), { delimiter: "\t" });
+  return { grid: [header, ...rows], own: false };
+}
+
+export function gridFromClipboard(html, text, doc = globalThis.document) {
+  let found = null;
+  try { found = htmlGrid(html, doc); } catch { found = null; }
+  if (!found) {
+    try { found = textGrid(text); } catch { found = null; }
+  }
+  if (!found || !found.grid.length) return null;
+  const width = Math.max(...found.grid.map((row) => row.length));
+  for (const row of found.grid) while (row.length < width) row.push("");
+  return { ...found, width, height: found.grid.length };
+}
+
+export function tableFromGrid(grid, { header = grid.length > 1 } = {}) {
+  const width = Math.max(0, ...grid.map((row) => row.length));
+  if (!width) return null;
+  const names = header ? grid[0] : [];
+  const body = header ? grid.slice(1) : grid;
+  const ids = Array.from({ length: width }, () => newId("c"));
+  const colPos = keysBetween(null, null, width);
+  const cols = Object.fromEntries(ids.map((id, i) => [id, { pos: colPos[i], name: cellText(names[i] ?? "").replace(/\s+/g, " ").trim() || `Column ${i + 1}` }]));
+  const lines = body.length ? body : [[]];
+  const rowPos = keysBetween(null, null, lines.length);
+  const rows = Object.fromEntries(lines.map((line, r) => [newId("r"), { pos: rowPos[r], cells: Object.fromEntries(ids.map((id, i) => [id, line[i] ?? ""])) }]));
+  return nodeFromBlock(schema, newId(), { t: "table", pos: null, cols, rows });
+}