@panphora/clayjs 1.11.0 → 1.11.2

package/src/core/source-map.js

@@ -587,7 +587,16 @@ export function render(clone, map, m, provenance, opts = {}) {
   // `from >= 0` is not defensive padding: `src.slice(-1, n)` is the LAST BYTE of the
   // source, so an unset offset reaching here does not produce nothing, it produces one
   // wrong byte and looks like a successful render.
-  const keep = (from, to) => { if (from >= 0 && to > from) pieces.push({ from, to }); };
+  // Adjacent copied ranges merge into one piece, except across a mark that records
+  // a piece index (tailMark, afterBody): a piece sealed under a mark is never extended,
+  // so the next range starts a new piece at the index the mark points to.
+  let sealedAt = 0;
+  const keep = (from, to) => {
+    if (!(from >= 0 && to > from)) return;
+    const last = pieces.length > sealedAt ? pieces[pieces.length - 1] : null;
+    if (last && last.text === undefined && last.to === from) last.to = to;
+    else pieces.push({ from, to });
+  };
   const text = (t) => { if (t) pieces.push({ text: t }); };
   // Elements in `opts.print`, and everything inside them, are printed rather than
   // copied: the answer to a region whose copy did not verify.
@@ -622,7 +631,7 @@ export function render(clone, map, m, provenance, opts = {}) {
   // Called once <body>'s end tag, if any, has been emitted. The owner is still last when
   // nothing but end tags was emitted after its text.
   function endOfBody() {
-    afterBody = pieces.length;
+    afterBody = pieces.length; sealedAt = pieces.length;
     tailClean = !!tailMark && tailMark.whole
       && /^(?:<\/[^>]*>)*$/.test(pieces.slice(tailMark.at).map(piece).join(''));
   }
@@ -660,7 +669,7 @@ export function render(clone, map, m, provenance, opts = {}) {
       // Test switch: copy one named text node's bytes twice, a corruption only the
       // copy path makes, so printing the element around it is the fix.
       if (opts.doubleCopied !== undefined && data === opts.doubleCopied) keep(loc.from, loc.to);
-      if (loc.outsideTail) tailMark = { at: pieces.length, tail: loc.outsideTail, whole: true };
+      if (loc.outsideTail) { tailMark = { at: pieces.length, tail: loc.outsideTail, whole: true }; sealedAt = pieces.length; }
       return;
     }
     let owner = null;
@@ -670,7 +679,7 @@ export function render(clone, map, m, provenance, opts = {}) {
       owner = { tail: whole ? loc.outsideTail : '', whole };
     }
     text(RAW_TEXT.has(parentTag) ? data : escText(data));
-    if (owner) tailMark = { at: pieces.length, ...owner };
+    if (owner) { tailMark = { at: pieces.length, ...owner }; sealedAt = pieces.length; }
   }
   function emitElement(n, loc) {
     const tag = n.localName;
@@ -719,7 +728,20 @@ export function render(clone, map, m, provenance, opts = {}) {
   // clone still has with the same value copies its bytes; a changed one keeps the
   // author's quoting; a removed one takes its leading whitespace with it; a new one is
   // appended just before the `>`.
+  // The open tag copies as one range when the clone's attributes are the source's, in
+  // the source's order, with the same values: the attribute walk below would copy the
+  // same bytes piece by piece.
+  function sameAttrs(n, loc) {
+    const attrs = n.attributes;
+    if (attrs.length !== loc.attrs.length) return false;
+    for (let i = 0; i < attrs.length; i++) {
+      const a = loc.attrs[i];
+      if (a.from < 0 || attrs[i].value !== a.value || attrs[i].name.toLowerCase() !== a.key) return false;
+    }
+    return true;
+  }
   function emitOpenTag(n, loc) {
+    if (sameAttrs(n, loc)) { keep(loc.openFrom, loc.openTo); return; }
     const live = new Map();
     for (const a of n.attributes) live.set(a.name.toLowerCase(), a);
     const seen = new Set();
@@ -832,7 +854,7 @@ export function render(clone, map, m, provenance, opts = {}) {
       if (!whole.has(i)) return emitNode(c, parentTag);
       const s = S[owned[i]];
       keep(s.from, s.to);
-      if (s.outsideTail) tailMark = { at: pieces.length, tail: s.outsideTail, whole: true };
+      if (s.outsideTail) { tailMark = { at: pieces.length, tail: s.outsideTail, whole: true }; sealedAt = pieces.length; }
     };
     const openOf = (c, i) => {
       if (!whole.has(i)) return openChain(c);
@@ -903,24 +925,31 @@ function lis(vals) {
 export function verify(rendered, today, liveDocument, clone = null, sourceErrors = null) {
   const P = new DOMParser();
   const A = P.parseFromString(rendered, 'text/html');
-  const B = P.parseFromString(today, 'text/html');
   const outsideA = vOutside(A), outsideLive = vOutside(liveDocument);
   if (outsideA.join('\n') !== outsideLive.join('\n')) return { ok: false, diff: 'document: outside <html> ' + JSON.stringify(outsideA) + ' vs live ' + JSON.stringify(outsideLive) };
-  const diff = vDiff(A.documentElement, B.documentElement, 'html');
-  const worse = diff ? null : vParseErrors(rendered, sourceErrors);
-  if (!diff) return worse ? { ok: false, diff: worse } : { ok: true, diff: null, oracle: 'today' };
+  // The clone oracle first: it is the stronger claim and needs no second parse. The
+  // accept set is unchanged (equal to the clone, or equal to today's bytes reparsed);
+  // only the order the two are tried in differs, and the oracle named is still the
+  // one that passed.
+  let at = null;
+  let cloneDiff = null;
   if (clone) {
-    // `at` is the index path, in the clone, of the node where the render first differs,
-    // so a caller can print that element and try again instead of discarding the whole
-    // render. It is valid in the clone because every earlier sibling at every level on
-    // the way down compared equal.
-    const at = [];
-    if (!vDiff(A.documentElement, clone, 'html', at)) {
+    at = [];
+    cloneDiff = vDiff(A.documentElement, clone, 'html', at);
+    if (!cloneDiff) {
       const w = vParseErrors(rendered, sourceErrors);
-      return w ? { ok: false, diff: w } : { ok: true, diff: null, oracle: 'clone', todayDiff: diff };
+      return w ? { ok: false, diff: w } : { ok: true, diff: null, oracle: 'clone' };
     }
-    return { ok: false, diff, at };
   }
+  const B = P.parseFromString(today, 'text/html');
+  const diff = vDiff(A.documentElement, B.documentElement, 'html');
+  const worse = diff ? null : vParseErrors(rendered, sourceErrors);
+  if (!diff) return worse ? { ok: false, diff: worse } : { ok: true, diff: null, oracle: 'today' };
+  // `at` is the index path, in the clone, of the node where the render first differs,
+  // so a caller can print that element and try again instead of discarding the whole
+  // render. It is valid in the clone because every earlier sibling at every level on
+  // the way down compared equal.
+  if (clone) return { ok: false, diff, at };
   return { ok: false, diff };
 }
 
@@ -1004,14 +1033,27 @@ function vNoscript(a, b, path) {
 }
 function vKids(el) {
   const list = el.localName === 'template' && el.content ? el.content.childNodes : el.childNodes;
-  return Array.from(list).filter((n) => n.nodeType === 1 || n.nodeType === 3 || n.nodeType === 8);
+  const out = [];
+  for (let i = 0; i < list.length; i++) { const n = list[i]; if (n.nodeType === 1 || n.nodeType === 3 || n.nodeType === 8) out.push(n); }
+  return out;
 }
 const vAttrs = (el) => Array.from(el.attributes, (a) => (a.namespaceURI || '') + ' ' + a.name + '=' + JSON.stringify(a.value)).sort().join('; ');
+// Equal attribute lists in the same order need no sorted strings; any other case is
+// decided by the strings, as before.
+function sameAttrsInOrder(a, b) {
+  const A = a.attributes, B = b.attributes;
+  if (A.length !== B.length) return false;
+  for (let i = 0; i < A.length; i++) {
+    const x = A[i], y = B[i];
+    if (x.name !== y.name || x.value !== y.value || x.namespaceURI !== y.namespaceURI) return false;
+  }
+  return true;
+}
 function vDiff(a, b, path, at = []) {
   if (a.nodeType !== b.nodeType) return path + ': node type ' + a.nodeType + ' vs ' + b.nodeType;
   if (a.nodeType === 3 || a.nodeType === 8) return a.data === b.data ? null : path + ': text ' + JSON.stringify(a.data.slice(0, 60)) + ' vs ' + JSON.stringify(b.data.slice(0, 60));
   if (a.localName !== b.localName || a.namespaceURI !== b.namespaceURI) return path + ': tag ' + a.localName + ' vs ' + b.localName;
-  if (vAttrs(a) !== vAttrs(b)) return path + ': attrs ' + vAttrs(a) + ' vs ' + vAttrs(b);
+  if (!sameAttrsInOrder(a, b) && vAttrs(a) !== vAttrs(b)) return path + ': attrs ' + vAttrs(a) + ' vs ' + vAttrs(b);
   if (a.localName === 'noscript' && a.namespaceURI === XHTML) return vNoscript(a, b, path);
   const ka = vKids(a), kb = vKids(b);
   if (ka.length !== kb.length) return path + ': ' + ka.length + ' vs ' + kb.length + ' children';

package/src/lib/content-dom.js

@@ -1,4 +1,4 @@
-import { capabilitySelector, hasCapability } from './region-capabilities.js'
+import { capabilitySelector, hasCapability, CAPABILITIES, expandsTo, hasPolicyToken } from './region-capabilities.js'
 
 const UNSUPPORTED_SELECTOR = /:(?:focus(?:-within|-visible)?|hover|active|visited|defined)\b/i
 
@@ -7,10 +7,9 @@ function copyControlState(source, copy) {
   const type = (source.getAttribute?.('type') || '').toLowerCase()
   if ('value' in source && 'value' in copy && source.tagName !== 'OPTION' && type !== 'checkbox' && type !== 'radio' && type !== 'file') copy.value = source.value
   if (source.tagName === 'INPUT' && (type === 'checkbox' || type === 'radio')) copy.checked = source.checked
+  // Each surviving option carries its own selection, so a <select> whose excluded
+  // options were removed from the copy keeps the rest in step with the page.
   if (source.tagName === 'OPTION') copy.selected = source.selected
-  if (source.tagName === 'SELECT') {
-    for (let i = 0; i < source.options.length; i++) copy.options[i].selected = source.options[i].selected
-  }
   if ('indeterminate' in source && 'indeterminate' in copy) copy.indeterminate = source.indeterminate
 }
 
@@ -25,46 +24,77 @@ function matchesWithin(node, selector, boundary, inherit) {
   return false
 }
 
-function importTree(source, targetDocument, capability, capabilityMatch, exclude, boundary, inherit, maps) {
-  if (source.nodeType === 1 && (
-    (inherit
-      ? hasCapability(source, capability)
-      : matchesWithin(source, capabilityMatch, boundary, false)) ||
-    (exclude && (inherit && source !== boundary ? source.matches(exclude) : matchesWithin(source, exclude, boundary, inherit)))
-  )) return null
-  const copy = targetDocument.importNode(source, false)
+// One native deep clone, then a lockstep walk of the two isomorphic trees that
+// records provenance, collects controls, and marks excluded subtrees for removal.
+// The browser's clone is far cheaper than importing node by node. The root answers
+// for its ancestors once; below it the walk is top-down, so with inheritance each
+// element answers only for its own markers: an excluded ancestor is never entered.
+function excluded(source, capability, capabilityMatch, exclude, boundary, inherit) {
+  return (inherit
+    ? hasCapability(source, capability)
+    : matchesWithin(source, capabilityMatch, boundary, false)) ||
+    !!(exclude && (inherit && source !== boundary ? source.matches(exclude) : matchesWithin(source, exclude, boundary, inherit)))
+}
+
+// The test closestWithCapability makes at each level, for this element alone.
+function hasOwnCapability(element, capability) {
+  const definition = CAPABILITIES[capability]
+  return definition.tokens.some(token => expandsTo(element, token)) ||
+    definition.bundles.some(bundle => hasPolicyToken(element, bundle))
+}
+
+const CONTROL_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT', 'OPTION'])
+
+function pairTree(source, copy, maps, drop) {
+  if (source.nodeType === 1 && drop(source)) { maps.dropped.push(copy); return }
   maps.cloneToLive.set(copy, source)
   maps.liveToClone.set(source, copy)
-  const sourceChildren = source.nodeType === 1 && source.tagName === 'TEMPLATE' ? source.content : source
-  const copyChildren = copy.nodeType === 1 && copy.tagName === 'TEMPLATE' ? copy.content : copy
-  if (sourceChildren !== source) {
-    maps.cloneToLive.set(copyChildren, sourceChildren)
-    maps.liveToClone.set(sourceChildren, copyChildren)
-  }
-  for (const child of sourceChildren.childNodes || []) {
-    const childCopy = importTree(child, targetDocument, capability, capabilityMatch, exclude, boundary, inherit, maps)
-    if (childCopy) {
-      copyChildren.appendChild(childCopy)
-      if (child.nodeType === 1) copyControlState(child, childCopy)
+  let sourceChildren = source
+  let copyChildren = copy
+  if (source.nodeType === 1) {
+    if (CONTROL_TAGS.has(source.tagName)) maps.controls.push(source, copy)
+    if (source.tagName === 'TEMPLATE') {
+      // The deep clone also copied the template's own child nodes, which are not its
+      // content and were never part of the view.
+      while (copy.firstChild) copy.removeChild(copy.firstChild)
+      sourceChildren = source.content
+      copyChildren = copy.content
+      maps.cloneToLive.set(copyChildren, sourceChildren)
+      maps.liveToClone.set(sourceChildren, copyChildren)
     }
+  } else if (source.nodeType !== 11) return
+  let c = copyChildren.firstChild
+  for (let s = sourceChildren.firstChild; s && c; s = s.nextSibling) {
+    pairTree(s, c, maps, drop)
+    c = c.nextSibling
   }
-  if (source.nodeType === 1) copyControlState(source, copy)
-  return copy
 }
 
-export function createContentView(context, { capability = 'data', exclude = null, inherit = true } = {}) {
+export function createContentView(context, { capability = 'data', exclude = null, inherit = true, provenance = null } = {}) {
   if (!context) throw new TypeError('createContentView requires a DOM context')
   const sourceDocument = context.nodeType === 9 ? context : context.ownerDocument
   if (!sourceDocument?.implementation?.createHTMLDocument) {
     throw new TypeError('createContentView requires an HTML DOM implementation')
   }
   const inertDocument = sourceDocument.implementation.createHTMLDocument('')
-  const cloneToLive = new WeakMap()
+  const cloneToLive = provenance || new WeakMap()
   const liveToClone = new WeakMap()
   const sourceRoot = context.nodeType === 9 ? context.documentElement : context
   if (exclude) inertDocument.documentElement.matches(exclude)
   const capabilityMatch = capabilitySelector(capability)
-  const root = importTree(sourceRoot, inertDocument, capability, capabilityMatch, exclude, sourceRoot, inherit, { cloneToLive, liveToClone })
+  const drop = inherit
+    ? (el) => hasOwnCapability(el, capability) || !!(exclude && el.matches(exclude))
+    : (el) => excluded(el, capability, capabilityMatch, exclude, sourceRoot, false)
+  let root = null
+  if (sourceRoot.nodeType !== 1 || !excluded(sourceRoot, capability, capabilityMatch, exclude, sourceRoot, inherit)) {
+    root = inertDocument.importNode(sourceRoot, true)
+    const maps = { cloneToLive, liveToClone, dropped: [], controls: [] }
+    pairTree(sourceRoot, root, maps, drop)
+    for (const node of maps.dropped) node.remove()
+    // Control state is copied once the copy holds only what the view keeps, so a
+    // <select> sees exactly the options the old node-by-node import gave it.
+    for (let i = 0; i < maps.controls.length; i += 2) copyControlState(maps.controls[i], maps.controls[i + 1])
+  }
   if (context.nodeType === 9 && root) {
     inertDocument.replaceChild(root, inertDocument.documentElement)
     liveToClone.set(context, inertDocument)

package/src/lib/ephemeral.js

@@ -0,0 +1,88 @@
+import { isPolicyAttribute } from "./region-capabilities.js";
+
+// Tab-local state on saved elements. The ephemeral attribute holds words a
+// script sets for this tab (selected, dragging), and an ephemeral:NAME marker
+// makes the element's own NAME attribute tab-local too. A dialog's open is
+// tab-local with no marker: showModal() sets it, and a dialog saved open is
+// always a bug. Like route-active, none of it is saved, synced, undone or
+// counted as a change. The marker itself is ordinary saved content.
+
+export const EPHEMERAL_ATTR = "ephemeral";
+const MARKER = "ephemeral:";
+// Identity, region attributes (a marker must not switch a region off) and form
+// state (persist owns those) can never be ephemeral.
+const NEVER = new Set([
+  "class", "id", "data-id", "value", "checked", "selected",
+  "save-remove", "save-ignore", "save-freeze", "mutations-ignore", "snapshot-remove",
+]);
+const never = (name) => NEVER.has(name) || isPolicyAttribute(name);
+
+export function isEphemeralAttr(name, el) {
+  if (name === EPHEMERAL_ATTR) return true;
+  if (!name || !el || el.nodeType !== 1 || never(name) || name.startsWith(MARKER)) return false;
+  if (name === "open" && el.localName === "dialog") return true;
+  return el.hasAttribute(MARKER + name);
+}
+
+/** True when `el` carries an ephemeral:NAME marker for `name`. */
+export function isMarkedAttr(name, el) {
+  return !!el && el.nodeType === 1 && el.hasAttribute(MARKER + name);
+}
+
+function stripElement(el) {
+  if (el.localName === "dialog" && el.hasAttribute("open")) el.removeAttribute("open");
+  if (el.hasAttribute(EPHEMERAL_ATTR)) el.removeAttribute(EPHEMERAL_ATTR);
+  const attrs = el.attributes;
+  let names = null;
+  for (let i = 0; i < attrs.length; i++) {
+    const name = attrs[i].name;
+    if (!name.startsWith(MARKER)) continue;
+    const target = name.slice(MARKER.length);
+    if (target && !never(target)) (names || (names = [])).push(target);
+  }
+  if (names) for (const name of names) el.removeAttribute(name);
+}
+
+/** Remove ephemeral state from a snapshot clone, in place: the root, every descendant, and template contents. */
+export function stripEphemeral(root) {
+  if (!root || root.nodeType !== 1) return;
+  stripElement(root);
+  for (const el of root.querySelectorAll("*")) {
+    stripElement(el);
+    if (el.localName === "template" && el.content) {
+      for (const child of el.content.children) stripEphemeral(child);
+    }
+  }
+  if (root.localName === "template" && root.content) {
+    for (const child of root.content.children) stripEphemeral(child);
+  }
+}
+
+function words(el) {
+  return (el.getAttribute(EPHEMERAL_ATTR) || "").split(/\s+/).filter(Boolean);
+}
+
+function write(el, list) {
+  if (list.length) el.setAttribute(EPHEMERAL_ATTR, list.join(" "));
+  else el.removeAttribute(EPHEMERAL_ATTR);
+}
+
+export const ephemeral = {
+  has(el, word) {
+    return words(el).includes(word);
+  },
+  add(el, word) {
+    const list = words(el);
+    if (!list.includes(word)) write(el, [...list, word]);
+  },
+  remove(el, word) {
+    const list = words(el);
+    if (list.includes(word)) write(el, list.filter((w) => w !== word));
+  },
+  toggle(el, word, force) {
+    const on = force === undefined ? !ephemeral.has(el, word) : !!force;
+    if (on) ephemeral.add(el, word);
+    else ephemeral.remove(el, word);
+    return on;
+  },
+};

package/src/lib/extension-noise.js

@@ -55,12 +55,19 @@ export function stripExtensionNoise(root) {
     // querySelectorAll('*') never returns the root itself, so an extension stamp on
     // <html> used to ride into every saved file. The root is the one element an
     // extension can mark on a page with no other match.
-    for (const el of [root, ...root.querySelectorAll('*')]) {
-      if (!el.attributes) continue
-      for (const attr of [...el.attributes]) {
-        if (EXTENSION_ATTR_PATTERN.test(attr.name.toLowerCase())) el.removeAttribute(attr.name)
+    // The attribute list is only copied when a marker is found on it.
+    const strip = (el) => {
+      const attrs = el.attributes
+      if (!attrs) return
+      let found = null
+      for (let i = 0; i < attrs.length; i++) {
+        const name = attrs[i].name
+        if (EXTENSION_ATTR_PATTERN.test(name.toLowerCase())) (found || (found = [])).push(name)
       }
+      if (found) for (const name of found) el.removeAttribute(name)
     }
+    strip(root)
+    for (const el of root.querySelectorAll('*')) strip(el)
   } catch (e) {
     if (typeof console !== 'undefined') console.warn('[clay] stripExtensionNoise skipped:', e)
   }

package/src/lib/mutation.js

@@ -70,6 +70,7 @@ import { EXTENSION_ATTR_PATTERN } from './extension-noise.js';
 import { resolveRegionPolicy, isInert, strictestPolicy, skipForPolicy } from './region-policy.js';
 import { isPolicyAttribute } from './region-capabilities.js';
 import { ROOT_LIBRARY_ATTRS, ROUTE_ROOT_PREFIX, ROUTE_ACTIVE_ATTR } from './root-attrs.js';
+import { isEphemeralAttr } from './ephemeral.js';
 
 import { isUserDrivenNow, markUserDriven } from './user-gesture.js';
 
@@ -83,13 +84,15 @@ const dummyElem = document.createElement("div");
 // instead of body. The raw lane is deliberately unfiltered ("raw means raw"), so
 // without this every save would push a savestatus flip into undo's record stream
 // and Cmd+Z after a save would undo that instead of the user's edit.
-// Router state (route-* on the root, route-active anywhere) is dropped here for the same reason.
+// Router state (route-* on the root, route-active anywhere) and ephemeral state
+// (lib/ephemeral.js) are dropped here for the same reason.
 const ROOT_LIBRARY_ATTR_SET = new Set(ROOT_LIBRARY_ATTRS);
 
 function isLibraryRootAttr(record) {
   if (record.type !== 'attributes') return false;
   const name = record.attributeName;
   if (name === ROUTE_ACTIVE_ATTR) return true;
+  if (isEphemeralAttr(name, record.target)) return true;
   return record.target === document.documentElement
     && (ROOT_LIBRARY_ATTR_SET.has(name) || name.startsWith(ROUTE_ROOT_PREFIX));
 }

package/src/lib/root-attrs.js

@@ -8,6 +8,8 @@
  * peer's copy of them must never be applied.
  */
 
+import { isEphemeralAttr, isMarkedAttr } from "./ephemeral.js";
+
 // The save token, in the order a reader tries the two spellings. Spec §9 bounds it to
 // per-file and per-tab and makes the host strip it before writing, so it never reaches
 // disk. But §9 bounds only the save path, and §10 fans a snapshot out to other editors'
@@ -128,15 +130,36 @@ export const ROUTE_ACTIVE_ATTR = "route-active";
 
 /**
  * True when `name` on `el` belongs to this tab rather than to the document:
- * every tab-local root attribute, route-* on a root, and route-active anywhere.
+ * every tab-local root attribute, route-* on a root, route-active anywhere, and
+ * ephemeral state (lib/ephemeral.js) anywhere.
  * Works on the live root and on a snapshot clone's or parsed frame's root.
  */
 export function isTabLocalAttr(name, el) {
+  if (isEphemeralAttr(name, el)) return true;
   if (name === ROUTE_ACTIVE_ATTR) return true;
   if (!el || el.localName !== "html" || el.parentElement) return false;
   return TAB_LOCAL_ROOT_ATTRS.has(name) || name.startsWith(ROUTE_ROOT_PREFIX);
 }
 
+/**
+ * hyper-morph's ignoreAttribute for tab-local state. While a merge is applied,
+ * `merged` is the element the live one is becoming, so a frame that adds or
+ * removes an ephemeral:NAME marker together with NAME is judged by the marker
+ * as it ends up, not by attribute order.
+ */
+export function mergeIgnoresAttr(el, name, merged) {
+  return isTabLocalAttr(name, merged || el);
+}
+
+/**
+ * hyper-morph's beforeAttributeUpdated veto: a merge may neither write nor
+ * remove a tab-local attribute. A marker-protected attribute is left to
+ * mergeIgnoresAttr, which reads the marker from the merged element.
+ */
+export function mergeVetoesAttr(name, el) {
+  return isTabLocalAttr(name, el) && !isMarkedAttr(name, el) ? false : undefined;
+}
+
 /** Remove router state from a snapshot clone: route-* on its root, route-active anywhere. */
 export function stripRouteAttrs(root) {
   for (const attr of [...root.attributes]) {

package/src/loader.js

@@ -1,6 +1,7 @@
 import { resolveModules, MODULES } from "./loader-logic.js";
 import onDomReady from "./lib/dom-ready.js";
 import { initTheme } from "./ui/theme.js";
+import { ephemeral } from "./lib/ephemeral.js";
 
 function domReady() {
   return new Promise((resolve) => onDomReady(resolve));
@@ -91,6 +92,7 @@ function assembleCore(loaded, { isEditMode, isOwner, siteVisibility }, regionPol
 
   clay.readData = pageData.readData;
   clay.writeData = pageData.writeData;
+  clay.ephemeral = ephemeral;
 
   if (save) {
     const saveFn = save.savePage || save.default;

package/src/plugins/undo.js

@@ -5,15 +5,30 @@
 
 import { undo } from '../vendor/hyper-undo.vendor.js'
 import { isEditMode } from '../core/is-edit-mode.js'
+import { isTabLocalAttr } from '../lib/root-attrs.js'
+
+// Tab-local attributes (ephemeral state, route-active, root library state) are
+// never undone. The shared mutation hub already drops them for the main
+// instance; a scope made with create() runs its own observer, so it is told too.
+const withTabLocal = (opts = {}) => {
+  const own = opts.ignoreAttribute
+  return {
+    ...opts,
+    ignoreAttribute: (name, target) => isTabLocalAttr(name, target) || (own ? own(name, target) : false),
+  }
+}
+
+const createScope = undo.create.bind(undo)
+undo.create = (opts) => createScope(withTabLocal(opts))
 
 function init() {
   if (!isEditMode) return
   // Defer until the body exists so the default scope (document.body) is valid.
   if (typeof document === 'undefined') return
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => undo.start({ bindKeys: true }))
+    document.addEventListener('DOMContentLoaded', () => undo.start(withTabLocal({ bindKeys: true })))
   } else {
-    undo.start({ bindKeys: true })
+    undo.start(withTabLocal({ bindKeys: true }))
   }
 }
 

package/src/sync/live-sync.js

@@ -40,11 +40,11 @@ import { HyperMorph, morph } from "../vendor/hyper-morph.vendor.js";
 const { createIdentityStore } = HyperMorph;
 import Mutation from "../lib/mutation.js";
 import { NO_DIRTY_SELECTOR, LIVE_SELECTOR } from "../lib/region-policy.js";
-import { EXTENSION_NODE_SELECTOR } from '../lib/extension-noise.js';
+import { EXTENSION_NODE_SELECTOR, EXTENSION_ATTR_PATTERN } from '../lib/extension-noise.js';
 import { isEditMode } from "../core/is-edit-mode.js";
 import { mergeTagRecognizers } from "./merge-tags.js";
 import { serializeForSync, captureForComparisonAndDirty, captureSnapshot, originalSnapshotNode, captureForMerge, captureForSaveAndComparison } from '../core/snapshot.js';
-import { isTabLocalAttr } from '../lib/root-attrs.js';
+import { mergeIgnoresAttr, mergeVetoesAttr } from '../lib/root-attrs.js';
 import { autosaveActive } from '../lib/autosave-state.js';
 import { enableContentEditable } from '../core/admin-contenteditable.js';
 import { enableOnClick } from '../core/admin-onclick.js';
@@ -101,9 +101,12 @@ const REMOTE_WINS_SELECTOR = [
   '[clay~="no-watch"]', '[no-watch]', '[mutations-ignore]',
 ].join(',');
 
-// Host tokens, library state and router state, on every side
+// Host tokens, library state, router state and ephemeral state, on every side
 // of a merge: the live root, a snapshot clone's root, a parsed frame's root.
-const isRootLocalAttr = (el, name) => isTabLocalAttr(name, el);
+// Extension marker attributes too: snapshots and frames never carry them, so a
+// disk frame would otherwise strip them from the live inputs they belong to.
+const isRootLocalAttr = (el, name, merged) =>
+  mergeIgnoresAttr(el, name, merged) || EXTENSION_ATTR_PATTERN.test(name.toLowerCase());
 
 // Identity an author wrote into the page, the fallback behind synthetic ids.
 //
@@ -1655,8 +1658,7 @@ class LiveSync {
     const store = this.identity;
     // A frame may neither write these onto our root nor, by not carrying them,
     // take ours away. Returning false is hyper-morph's veto for both directions.
-    const beforeAttributeUpdated = (name, element) =>
-      isTabLocalAttr(name, element) ? false : undefined;
+    const beforeAttributeUpdated = mergeVetoesAttr;
     const authored = uniqueAuthoredIdentity(new WeakMap());
     const sideIdentity = (map) =>
       isIdMap(map) ? { first: authored, map, then: authored } : authored;

package/src/tailwind.js

@@ -0,0 +1,12 @@
+// Tailwind v4 plugin for ClayJS ephemeral state:
+//   @plugin "@panphora/clayjs/tailwind";
+// ephemeral-selected:ring-2 -> &[ephemeral~="selected"]. matchVariant only
+// accepts bare names that `values` lists, so `values` answers for any simple
+// word; the bracketed form ephemeral-[selected]: works regardless.
+const anyWord = new Proxy({}, {
+  get: (_, key) => (typeof key === "string" && /^[a-z0-9_-]+$/i.test(key) ? key : undefined),
+});
+
+export default function ephemeralVariant({ matchVariant }) {
+  matchVariant("ephemeral", (value) => `&[ephemeral~="${value}"]`, { values: anyWord });
+}