@panphora/clayjs 1.9.1 → 1.10.0

package/src/plugins/people.js

@@ -25,11 +25,11 @@ const editing = () => (window.clay && "isEditMode" in window.clay ? !!window.cla
 import { bevelDialog, dismissOf, keepFocusIn } from "../ui/bevel-dialog.js";
 import { bevelBox, bevelButton, bevelInput, bevelText } from "../ui/bevel-controls.js";
 import { resolveTheme } from "../ui/theme.js";
+import { colorIndexOf, initialsOf } from "../lib/person-face.js";
 
 const ID = /^[A-Za-z0-9_-]{8,64}$/;
 const STORE = "clay:people:me";
 const BOOT_WAIT_MS = 2000;
-const COLORS = 8;
 const MAX_NAME = 120;
 const EMAIL = /\S+@\S+\.\S+/;
 
@@ -50,19 +50,8 @@ function clean(person) {
   return { id, name };
 }
 
-function initialsOf(name) {
-  const letters = name.split(" ").filter(Boolean).slice(0, 2).map((word) => Array.from(word)[0]);
-  return letters.join("").toUpperCase() || "?";
-}
-
-function colorOf(id) {
-  let hash = 0;
-  for (const ch of String(id)) hash = (hash * 31 + ch.codePointAt(0)) >>> 0;
-  return hash % COLORS;
-}
-
 function record({ id, name }) {
-  return Object.freeze({ id, name, initials: initialsOf(name), color: colorOf(id) });
+  return Object.freeze({ id, name, initials: initialsOf(name), color: colorIndexOf(id) });
 }
 
 function emit() {
@@ -156,7 +145,7 @@ function get(id) {
   if (live) return record(live);
   const mine = readLocal();
   if (mine?.id === key) return record(mine);
-  return saved().get(key) || Object.freeze({ id: key, name: "Unknown person", initials: "?", color: colorOf(key) });
+  return saved().get(key) || Object.freeze({ id: key, name: "Unknown person", initials: "?", color: colorIndexOf(key) });
 }
 
 function list() {

package/src/plugins/sortable.js

@@ -29,7 +29,9 @@ const RUNTIME_ATTRS = ['draggable', 'style'];
 const pressed = new Set();
 
 function recordRuntimeAttrs(item) {
-  return [item, ...item.querySelectorAll('*')].map(el => [el, RUNTIME_ATTRS.map(name => el.getAttribute(name))]);
+  return [item, ...item.querySelectorAll('*')]
+    .filter(el => !el.closest(EDITOR_UI_SELECTOR))
+    .map(el => [el, RUNTIME_ATTRS.map(name => el.getAttribute(name))]);
 }
 
 function restoreRuntimeAttrs(recorded) {

package/src/route/route.js

@@ -0,0 +1,188 @@
+/**
+ * clay-router — URL-hash params as tab-local attributes.
+ *
+ *   #entry=e-7f3a&view=week
+ *     → <html route-entry="e-7f3a" route-view="week">
+ *     → route-active="entry" on the child of [route="entry"] whose data-id is e-7f3a
+ *
+ * show-when:route-view="week" and CSS on [route-active] do the rest. ClayJS core
+ * treats route-* on the root and route-active anywhere as tab-local (root-attrs.js),
+ * so none of this is saved, marked dirty, undone, or sent to a peer.
+ */
+
+const NAME = /^[a-z][a-z0-9-]*$/;
+const PREFIX = "route-";
+const ACTIVE = "route-active";
+const SPEC = /^\s*([a-z][a-z0-9-]*)(?:\s+by\s+(\S+))?\s*$/;
+
+let current = {};
+let lastUnmatched = "";
+let started = false;
+let observer = null;
+let queued = false;
+
+/** Parse a hash into params. A hash with no "=" (a plain #anchor) carries none. */
+export function parseHash(hash) {
+  const params = Object.create(null);
+  const raw = String(hash || "").replace(/^#/, "");
+  if (!raw.includes("=")) return params;
+  for (const [name, value] of new URLSearchParams(raw)) {
+    if (!NAME.test(name) || name === "active") {
+      console.warn(`clay-router: ignoring hash param "${name}"; names are lowercase letters, digits and hyphens, and "active" is reserved`);
+      continue;
+    }
+    if (value !== "") params[name] = value;
+  }
+  return params;
+}
+
+export function formatHash(params) {
+  const sp = new URLSearchParams();
+  for (const [name, value] of Object.entries(params)) {
+    if (value != null && value !== "") sp.set(name, String(value));
+  }
+  const s = sp.toString();
+  return s ? "#" + s : "";
+}
+
+function mirrorRoot(params) {
+  const root = document.documentElement;
+  for (const attr of [...root.attributes]) {
+    if (attr.name.startsWith(PREFIX) && !(attr.name.slice(PREFIX.length) in params)) root.removeAttribute(attr.name);
+  }
+  for (const [name, value] of Object.entries(params)) {
+    if (root.getAttribute(PREFIX + name) !== value) root.setAttribute(PREFIX + name, value);
+  }
+}
+
+// Stamp the matching child of every [route] container; return the declared
+// params that have a value but matched nothing.
+function stamp(params) {
+  const keep = new Set();
+  const declared = new Set();
+  const matched = new Set();
+  for (const container of document.querySelectorAll("[route]")) {
+    const m = SPEC.exec(container.getAttribute("route") || "");
+    if (!m) continue;
+    const [, name, by = "data-id"] = m;
+    declared.add(name);
+    const value = params[name];
+    if (value == null) continue;
+    for (const child of container.children) {
+      if (child.getAttribute(by) !== value) continue;
+      keep.add(child);
+      matched.add(name);
+      if (child.getAttribute(ACTIVE) !== name) child.setAttribute(ACTIVE, name);
+    }
+  }
+  for (const el of document.querySelectorAll(`[${ACTIVE}]`)) {
+    if (!keep.has(el)) el.removeAttribute(ACTIVE);
+  }
+  return [...declared].filter((name) => params[name] != null && !matched.has(name)).sort();
+}
+
+/** Re-read the hash and re-apply it. Writes only what differs; fires clay:route only on a change. */
+export function apply() {
+  const params = parseHash(location.hash);
+  mirrorRoot(params);
+  const unmatched = document.body ? stamp(params) : [];
+  const previous = current;
+  const changed = [...new Set([...Object.keys(previous), ...Object.keys(params)])]
+    .filter((name) => previous[name] !== params[name]);
+  current = params;
+  const unmatchedKey = unmatched.join(" ");
+  if (!changed.length && unmatchedKey === lastUnmatched) return;
+  lastUnmatched = unmatchedKey;
+  document.dispatchEvent(new CustomEvent("clay:route", {
+    detail: { params: { ...params }, previous: { ...previous }, changed, unmatched },
+  }));
+}
+
+export function get() {
+  return { ...current };
+}
+
+/**
+ * Merge `patch` into the hash. null or "" removes a param. A push makes a history
+ * entry, so Back undoes it; { replace: true } does not.
+ */
+export function set(patch, { replace = false } = {}) {
+  const next = parseHash(location.hash);
+  for (const [name, value] of Object.entries(patch || {})) {
+    if (value == null || value === "") delete next[name];
+    else next[name] = String(value);
+  }
+  const hash = formatHash(next);
+  if (hash === (location.hash.includes("=") ? location.hash : "")) return;
+  const bare = location.pathname + location.search;
+  if (replace) {
+    history.replaceState(history.state, "", bare + hash);
+    apply();
+  } else if (hash) {
+    location.hash = hash;
+  } else {
+    history.pushState(history.state, "", bare);
+    apply();
+  }
+}
+
+function queueApply() {
+  if (queued) return;
+  queued = true;
+  queueMicrotask(() => {
+    queued = false;
+    apply();
+  });
+}
+
+// A record added to or removed from a [route] container changes what matches,
+// and so does a [route] container arriving whole.
+function onChildList(records) {
+  for (const r of records) {
+    if (r.type !== "childList") continue;
+    if (r.target.nodeType === 1 && r.target.hasAttribute("route")) { queueApply(); return; }
+    for (const n of r.addedNodes) {
+      if (n.nodeType === 1 && (n.hasAttribute("route") || n.querySelector("[route]"))) { queueApply(); return; }
+    }
+  }
+}
+
+function onDomReady() {
+  apply();
+  if (!observer && typeof MutationObserver === "function") {
+    observer = new MutationObserver(onChildList);
+    observer.observe(document.body, { childList: true, subtree: true });
+  }
+}
+
+export function start() {
+  if (started) return;
+  started = true;
+  mirrorRoot(parseHash(location.hash));
+  window.addEventListener("hashchange", apply);
+  document.addEventListener("clay:sync-applied", queueApply);
+  document.addEventListener("clay:ready", queueApply);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", onDomReady, { once: true });
+  else onDomReady();
+}
+
+/** Tear down listeners and forget state. For tests. */
+export function stop() {
+  started = false;
+  current = {};
+  lastUnmatched = "";
+  window.removeEventListener("hashchange", apply);
+  document.removeEventListener("clay:sync-applied", queueApply);
+  document.removeEventListener("clay:ready", queueApply);
+  document.removeEventListener("DOMContentLoaded", onDomReady);
+  if (observer) observer.disconnect();
+  observer = null;
+}
+
+const route = { get, set, apply };
+
+const clay = (window.clay = window.clay || {});
+clay.route = route;
+start();
+
+export default route;

package/src/standalone.js

@@ -78,6 +78,7 @@ import onDomReady from "./lib/dom-ready.js";
   }));
   satellite("ui", domReady().then(function () { return import("./ui/index.js"); }));
   satellite("options", domReady().then(function () { return import("./options/options.js"); }));
+  satellite("router", import("./route/route.js").then(function (m) { return m.default; }));
   satellite("events", domReady()
     .then(function () { return clay.loaded.dom && clay.loaded.dom.catch(function () {}); })
     .then(function () { return import("./events/index.js"); }));

package/src/sync/conflict-revert.js

@@ -1115,8 +1115,7 @@ export function applyRevert(plan) {
     // The page's change feed drops the writes and their undoing together: nothing
     // changed, so the dirty gate, autosave and the hub's other pausable subscribers
     // have nothing to see.
-    Mutation.pause();
-    Mutation.resume();
+    Mutation.dropQueued();
     undo?.discardCaptured?.();
     undo?.resume?.();
   }

package/src/sync/editing-marker.js

@@ -0,0 +1,172 @@
+/**
+ * editing-marker.js — the block somebody else is editing.
+ *
+ * A thin outline in that person's colour around the block the host names for them,
+ * with a chip carrying their name. Three rules, and they are the whole file:
+ *
+ *   drawn for others only   a `you: true` entry is this reader's own caret, and a
+ *                           host that does not announce `presence` draws nothing
+ *   runtime only            every element carries RUNTIME_ONLY and the name lives
+ *                           in one text node, never in an attribute
+ *   never touched           the edited element is measured and nothing else
+ */
+
+import { hostSupports } from '../core/host-meta.js';
+import { make, set } from '../lib/hostile-css.js';
+import { personColor } from '../lib/person-face.js';
+import { RUNTIME_ONLY } from '../ui/bevel-controls.js';
+import { FONT_MONO } from '../ui/bevel.js';
+import { EDITING_PATH, elementAt } from './editing-path.js';
+
+const FACE = '#FFFCF6';
+const RESET = ['all:initial', 'color-scheme:inherit', 'direction:ltr', 'unicode-bidi:isolate'];
+const CHIP_HEIGHT = 18;
+const GAP = 3;
+const CHIP_FONT = `600 11px/16px ${FONT_MONO}`;
+
+function runtimeRoot(el) {
+  el.setAttribute('clay', RUNTIME_ONLY);
+  return el;
+}
+
+function editorsOf(frame) {
+  const list = frame && Array.isArray(frame.people) ? frame.people : [];
+  const editors = [];
+  for (const person of list) {
+    if (!person || person.you === true || typeof person.id !== 'string' || !person.id) continue;
+    if (typeof person.editing !== 'string' || !EDITING_PATH.test(person.editing)) continue;
+    const name = typeof person.name === 'string' && person.name.trim() ? person.name.trim() : 'Someone';
+    editors.push({ id: person.id, name, path: person.editing });
+  }
+  return editors;
+}
+
+class EditingMarker {
+  constructor() {
+    this.editors = [];
+    this.root = null;
+    this._gate = null;
+    this._frame = 0;
+    this._following = false;
+    this._onMove = () => this.schedule();
+  }
+
+  supported() {
+    if (!this._gate) this._gate = hostSupports('presence').then((ok) => ok === true, () => false);
+    return this._gate;
+  }
+
+  async update(frame) {
+    this.editors = editorsOf(frame);
+    if (!(await this.supported())) return;
+    this.render();
+  }
+
+  clear() {
+    this.editors = [];
+    this.follow(false);
+    if (this._frame) cancelAnimationFrame(this._frame);
+    this._frame = 0;
+    if (this.root) this.root.remove();
+    this.root = null;
+  }
+
+  schedule() {
+    if (this._frame) return;
+    this._frame = requestAnimationFrame(() => {
+      this._frame = 0;
+      this.render();
+    });
+  }
+
+  render() {
+    const groups = new Map();
+    for (const editor of this.editors) {
+      const element = elementAt(editor.path);
+      if (!element) continue;
+      if (!groups.has(element)) groups.set(element, []);
+      groups.get(element).push(editor);
+    }
+    const boxes = [];
+    for (const [element, editors] of groups) {
+      const box = this.box(element, editors);
+      if (box) boxes.push(box);
+    }
+    if (!boxes.length) {
+      if (this.root) {
+        this.root.textContent = '';
+        set(this.root, 'display', 'none');
+      }
+      this.follow(this.editors.length > 0);
+      return;
+    }
+    if (!this.build()) return;
+    this.root.textContent = '';
+    this.root.append(...boxes);
+    set(this.root, 'display', 'block');
+    this.follow(true);
+  }
+
+  box(element, editors) {
+    const r = element.getBoundingClientRect();
+    if (!(r.width || r.height)) return null;
+    const color = personColor(editors[0].id);
+    const box = runtimeRoot(make('div', [
+      ...RESET,
+      'position:fixed', 'box-sizing:border-box', 'pointer-events:none',
+      `top:${Math.round(r.top - GAP)}px`, `left:${Math.round(r.left - GAP)}px`,
+      `width:${Math.round(r.width + GAP * 2)}px`, `height:${Math.round(r.height + GAP * 2)}px`,
+      `border:2px solid ${color}`,
+      `box-shadow:0 0 0 1px ${FACE}, inset 0 0 0 1px ${FACE}`,
+    ]));
+    box.setAttribute('data-clay-editing-marker', '');
+    const above = r.top - GAP >= CHIP_HEIGHT + 2;
+    const chips = runtimeRoot(make('div', [
+      ...RESET,
+      'position:absolute', 'left:-2px', above ? 'bottom:100%' : 'top:100%',
+      'display:flex', 'gap:2px', 'pointer-events:none',
+    ]));
+    for (const editor of editors) {
+      const chip = runtimeRoot(make('span', [
+        ...RESET,
+        'box-sizing:border-box', `height:${CHIP_HEIGHT}px`, 'padding:1px 6px',
+        `font:${CHIP_FONT}`, 'letter-spacing:.02em', 'white-space:nowrap',
+        'max-width:180px', 'overflow:hidden', 'text-overflow:ellipsis',
+        `background-color:${personColor(editor.id)}`, `color:${FACE}`,
+        `box-shadow:0 0 0 1px ${FACE}`,
+      ], editor.name));
+      chip.setAttribute('data-clay-editing-chip', '');
+      chips.appendChild(chip);
+    }
+    box.appendChild(chips);
+    return box;
+  }
+
+  build() {
+    if (this.root && this.root.isConnected) return true;
+    if (typeof document === 'undefined' || !document.body) return false;
+    this.root = runtimeRoot(make('div', [
+      ...RESET,
+      'position:fixed', 'top:0', 'left:0', 'width:0', 'height:0', 'overflow:visible',
+      'z-index:2147482999', 'pointer-events:none', 'display:none',
+    ]));
+    this.root.setAttribute('data-clay-editing', '');
+    document.body.appendChild(this.root);
+    return true;
+  }
+
+  follow(on) {
+    if (typeof window === 'undefined' || !!on === this._following) return;
+    this._following = !!on;
+    const method = on ? 'addEventListener' : 'removeEventListener';
+    window[method]('scroll', this._onMove, { capture: true, passive: true });
+    window[method]('resize', this._onMove, { passive: true });
+    document[method]('input', this._onMove);
+    document[method]('clay:sync-applied', this._onMove);
+  }
+}
+
+const editingMarker = new EditingMarker();
+
+export { editingMarker, EditingMarker };
+export default editingMarker;

package/src/sync/editing-path.js

@@ -0,0 +1,46 @@
+import { SNAPSHOT_REMOVE_SELECTOR } from '../lib/region-policy.js';
+import { EXTENSION_NODE_SELECTOR } from '../lib/extension-noise.js';
+
+export const EDITING_PATH = /^\d{1,4}(?:\.\d{1,4}){0,63}$/;
+const MAX_DEPTH = 64;
+const MAX_INDEX = 9999;
+const CONTROLS = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
+const EDITABLE = '[contenteditable]:not([contenteditable="false"])';
+const LOCAL = `${SNAPSHOT_REMOVE_SELECTOR}, ${EXTENSION_NODE_SELECTOR}`;
+
+const sharedChildren = (parent) => Array.from(parent.children).filter((child) => !child.matches(LOCAL));
+
+export function blockOf(target) {
+  if (!target || target.nodeType !== 1 || typeof target.closest !== 'function') return null;
+  if (CONTROLS.has(target.tagName)) return target;
+  const host = target.closest(EDITABLE);
+  if (!host) return null;
+  const selection = typeof document.getSelection === 'function' ? document.getSelection() : null;
+  let node = selection && selection.rangeCount ? selection.focusNode : null;
+  if (node && node.nodeType !== 1) node = node.parentElement;
+  if (!node || node === host || !host.contains(node)) return host;
+  while (node.parentElement && node.parentElement !== host) node = node.parentElement;
+  return node.parentElement === host ? node : host;
+}
+
+export function pathOf(element) {
+  const body = document.body;
+  if (!element || !body || element === body || !body.contains(element) || element.closest(LOCAL)) return null;
+  const indices = [];
+  for (let node = element; node !== body; node = node.parentElement) {
+    const index = sharedChildren(node.parentElement).indexOf(node);
+    if (index < 0 || index > MAX_INDEX || indices.length === MAX_DEPTH) return null;
+    indices.unshift(index);
+  }
+  return indices.join('.');
+}
+
+export function elementAt(path) {
+  if (typeof path !== 'string' || !EDITING_PATH.test(path) || !document.body) return null;
+  let node = document.body;
+  for (const part of path.split('.')) {
+    node = sharedChildren(node)[Number(part)];
+    if (!node) return null;
+  }
+  return node;
+}

package/src/sync/editing-sender.js

@@ -0,0 +1,100 @@
+import { blockOf, pathOf } from './editing-path.js';
+
+const INTERVAL_MS = 250;
+const RETRY_MS = 2000;
+const EVENTS = ['focusin', 'focusout', 'selectionchange', 'clay:sync-applied', 'clay:workspace-background', 'clay:workspace-foreground'];
+
+export class EditingSender {
+  constructor({ send, now = () => Date.now() }) {
+    this.send = send;
+    this.now = now;
+    this.others = false;
+    this.background = false;
+    this.sent = null;
+    this.lastAt = -Infinity;
+    this.timer = null;
+    this.poked = null;
+    this.inflight = false;
+    this.retry = null;
+    this.stopped = false;
+    this._onEvent = (event) => {
+      if (event.type === 'clay:workspace-background') this.background = true;
+      if (event.type === 'clay:workspace-foreground') this.background = false;
+      this.poke();
+    };
+  }
+
+  start() {
+    this.stopped = false;
+    for (const type of EVENTS) document.addEventListener(type, this._onEvent);
+  }
+
+  stop() {
+    this.stopped = true;
+    for (const type of EVENTS) document.removeEventListener(type, this._onEvent);
+    clearTimeout(this.timer);
+    clearTimeout(this.poked);
+    clearTimeout(this.retry);
+    this.timer = null;
+    this.poked = null;
+    this.retry = null;
+  }
+
+  roster(frame) {
+    const people = frame && Array.isArray(frame.people) ? frame.people : [];
+    const others = people.some((person) => person && person.you !== true);
+    if (others === this.others) return;
+    this.others = others;
+    this.schedule();
+  }
+
+  reconnected() {
+    this.sent = null;
+    this.schedule();
+  }
+
+  wanted() {
+    if (!this.others || this.background) return null;
+    return pathOf(blockOf(document.activeElement));
+  }
+
+  poke() {
+    if (this.poked !== null) return;
+    this.poked = setTimeout(() => {
+      this.poked = null;
+      this.schedule();
+    }, 0);
+  }
+
+  schedule() {
+    if (this.stopped || this.timer !== null || this.inflight || this.wanted() === this.sent) return;
+    const wait = Math.max(0, this.lastAt + INTERVAL_MS - this.now());
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      this.flush();
+    }, wait);
+  }
+
+  flush() {
+    if (this.inflight) return;
+    const value = this.wanted();
+    if (value === this.sent) return;
+    this.sent = value;
+    this.lastAt = this.now();
+    this.inflight = true;
+    const settle = (ok) => {
+      this.inflight = false;
+      if (this.stopped) return;
+      if (ok) {
+        clearTimeout(this.retry);
+        this.retry = null;
+      } else if (this.sent === value) {
+        this.sent = undefined;
+        if (this.retry === null) this.retry = setTimeout(() => { this.retry = null; this.schedule(); }, RETRY_MS);
+        return;
+      }
+      this.schedule();
+    };
+    Promise.resolve(this.send(value)).then((ok) => settle(Boolean(ok)), () => settle(false));
+  }
+}