@panphora/clayjs 1.11.1 → 1.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panphora/clayjs",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "type": "module",
   "description": "clayjs: malleable documents. Save lifecycle for self-saving HTML.",
   "license": "MIT-0",
@@ -32,6 +32,7 @@
     "./src/*": "./src/*",
     "./entries/*": "./entries/*",
     "./clay.standalone.js": "./dist/clay.standalone.js",
+    "./tailwind": "./src/tailwind.js",
     "./dist/*": "./dist/*",
     "./*": "./entries/*"
   },

package/src/attrs/save-freeze.js

@@ -20,6 +20,7 @@ import { onSnapshot, addDocumentTransform } from "../core/snapshot.js";
 import { isEditMode } from "../core/is-edit-mode.js";
 import { FREEZE_SELECTOR } from "../lib/region-policy.js";
 import { ROUTE_ACTIVE_ATTR } from "../lib/root-attrs.js";
+import { stripEphemeral } from "../lib/ephemeral.js";
 import Mutation from "../lib/mutation.js";
 
 const originals = new WeakMap();
@@ -30,12 +31,14 @@ function log(...args) {
   if (saveFreeze.debug) console.log('[save-freeze]', ...args);
 }
 
-// The captured original is what the file keeps, so it must hold no router stamp:
-// the router can mark a child route-active before this capture runs.
+// The captured original is what the file keeps, so it must hold no router stamp
+// and no ephemeral state: either can be set on a child before this capture runs.
 function authoredInnerHTML(el) {
-  if (!el.querySelector(`[${ROUTE_ACTIVE_ATTR}]`)) return el.innerHTML;
+  const html = el.innerHTML;
+  if (!el.querySelector(`[${ROUTE_ACTIVE_ATTR}]`) && !html.includes("ephemeral") && !html.includes("<dialog")) return html;
   const copy = el.cloneNode(true);
   for (const s of copy.querySelectorAll(`[${ROUTE_ACTIVE_ATTR}]`)) s.removeAttribute(ROUTE_ACTIVE_ATTR);
+  for (const child of copy.children) stripEphemeral(child);
   return copy.innerHTML;
 }
 

package/src/core/persist.js

@@ -96,7 +96,17 @@ export default function enablePersistentFormInputValues(filterBySelector = PERSI
     };
     finalize(inputSelector);
     finalize(textareaSelector);
-    finalize(selectSelector);
+    // A select's options pair through provenance, not by index: an excluded option
+    // (editor-ui, no-snapshot) is already gone from the copy, so its options are a
+    // subset of the live ones.
+    for (const control of doc.querySelectorAll(selectSelector)) {
+      if (!provenance.original(control)) continue;
+      for (const option of control.options) {
+        const live = provenance.original(option);
+        if (!(live && live.selected)) option.removeAttribute('selected');
+        else if (!option.hasAttribute('selected')) option.setAttribute('selected', '');
+      }
+    }
   });
 }
 

package/src/core/save.js

@@ -21,7 +21,8 @@ import {
   saveFateIsUnknown,
   withKeepalive
 } from "./save-core.js";
-import { captureForComparison, captureForComparisonAndDirty, captureForSaveAndComparison } from "./snapshot.js";
+import { captureForComparison, captureForComparisonAndDirty, captureForSaveAndComparison, captureForDirtyCheck } from "./snapshot.js";
+import { NO_TRIGGER_AUTOSAVE_SELECTOR } from "../lib/region-policy.js";
 import { seedEtag, lastSeenEtag } from "./etag.js";
 import { gateCaptureToken, gateClearIfUnchanged, pageMaybeDirty } from "../lib/dirty-gate.js";
 import { hasUnsavedState } from "../lib/unsaved-state.js";
@@ -189,6 +190,12 @@ let lastSavedContents = '';
 let lastSavedDirty = '';
 // A save was requested while one was on the wire; run one more when it settles.
 let pendingSave = false;
+// An autosave arrived while one of our saves was on the wire. When that save lands
+// it runs the autosave check again, rules and all, rather than an explicit save.
+let pendingAutosave = false;
+// True while a savePage/savePageForce request is on the wire. Only those drain the
+// queue when they land, so an autosave never queues behind a raw saveHtml call.
+let ownSaveOnWire = false;
 
 // ============================================
 // AUTOSAVE SUSPENSION
@@ -236,6 +243,9 @@ export function autosaveIsSuspended() {
 // save asked for meanwhile is remembered and runs on release.
 let previewHold = 0;
 let previewMissed = false;
+// An autosave skipped by the hold. Replayed as an autosave, so it keeps autosave
+// rules (a batching-region edit still waits for an explicit save).
+let previewAutosaveMissed = false;
 const PREVIEW_HOLD_REASON = 'Waiting for the AI edit to be kept or reverted';
 const holdReasons = new Map();
 
@@ -252,8 +262,12 @@ export function releaseAllSaves({ replay = true, reason = PREVIEW_HOLD_REASON }
   previewHold--;
   if (previewHold > 0) return;
   const missed = previewMissed;
+  const autosaveMissedInHold = previewAutosaveMissed;
   previewMissed = false;
-  if (missed && replay) savePage();
+  previewAutosaveMissed = false;
+  if (!replay) return;
+  if (missed) savePage();
+  else if (autosaveMissedInHold) savePageThrottled();
 }
 
 export function savesHeld() {
@@ -407,10 +421,16 @@ function applySaveResult(result, forComparison, forDirty, label, gateToken, forS
 // dropped, so the newer bytes still go out on the next save; the page is still
 // dirty, so an edit or a close warning will produce one.
 function drainPendingSave() {
-  if (!pendingSave) return;
+  if (!pendingSave && !pendingAutosave) return;
   if (saveFateIsUnknown()) return;
-  pendingSave = false;
-  savePage();
+  if (pendingSave) {
+    pendingSave = false;
+    pendingAutosave = false;
+    savePage();
+    return;
+  }
+  pendingAutosave = false;
+  savePageThrottled();
 }
 
 // State accessors for autosave module
@@ -526,7 +546,9 @@ export function savePage(callback = () => {}) {
     setSavingState();
 
     // Use saveHtml directly with our pre-captured content (avoids double capture)
+    ownSaveOnWire = true;
     saveHtml(forSave, (result) => {
+      ownSaveOnWire = false;
       applySaveResult(result, forComparison, forDirty, 'updated after save', gateToken, forSave);
       if (typeof callback === 'function') {
         callback(result);
@@ -581,7 +603,9 @@ export function savePageForce(callback = () => {}) {
 
     setSavingState();
 
+    ownSaveOnWire = true;
     saveHtml(forSave, (result) => {
+      ownSaveOnWire = false;
       applySaveResult(result, forComparison, forDirty, 'updated after force save', gateToken, forSave);
       if (typeof callback === 'function') {
         callback(result);
@@ -878,7 +902,7 @@ export function savePageThrottled(callback = () => {}) {
   }
 
   if (previewHold > 0) {
-    previewMissed = true;
+    previewAutosaveMissed = true;
     const skipped = skipped_(saveHoldReason());
     callback(skipped);
     return Promise.resolve(skipped);
@@ -894,6 +918,17 @@ export function savePageThrottled(callback = () => {}) {
     return Promise.resolve(skipped);
   }
 
+  // One of our saves is on the wire: queue this autosave instead of copying the
+  // page to compare. When that save lands, drainPendingSave runs this check again.
+  // Not while the page is settling, where every candidate save must pass the
+  // baseline veto below.
+  if (!baselineActive && ownSaveOnWire) {
+    pendingAutosave = true;
+    const skipped = skipped_('Save already in progress');
+    callback(skipped);
+    return Promise.resolve(skipped);
+  }
+
   // For autosave: while the page is still settling, content must differ from BOTH
   // the load-time baseline and the last save, so module setup churn cannot trigger
   // a save. Once settled, the baseline veto is disarmed and only the last save
@@ -901,7 +936,21 @@ export function savePageThrottled(callback = () => {}) {
   // persisted, because it matches the baseline forever.
   // Compare directly - stored versions are already stripped
   const gateToken = gateCaptureToken();
-  const currentForCompare = captureForComparison();
+  let currentForCompare;
+  let dirtyMatchesLastSave;
+  try {
+    currentForCompare = captureForComparison();
+    // This comparison leaves out batching (no-trigger-autosave) regions, which the
+    // gate counts, so on a page that has one the dirty domain must match too.
+    dirtyMatchesLastSave = () => !document.querySelector(NO_TRIGGER_AUTOSAVE_SELECTOR)
+      || (pageMaybeDirty() && captureForDirtyCheck({ flushUndo: false }) === lastSavedDirty);
+  } catch (err) {
+    console.error('savePageThrottled: captureForComparison failed', err);
+    setSaveState('error', err.message);
+    const result = { msg: err.message, msgType: 'error', code: null, etag: null };
+    callback(result);
+    return Promise.resolve(result);
+  }
   const differsFromBaseline = !baselineActive || currentForCompare !== baselineContents;
   const differsFromLastSave = currentForCompare !== lastSavedContents;
 
@@ -909,7 +958,13 @@ export function savePageThrottled(callback = () => {}) {
   logSaveCheck('throttled vs lastSave', !differsFromLastSave);
 
   if (!(differsFromBaseline && differsFromLastSave)) {
-    if (!differsFromLastSave) gateClearIfUnchanged(gateToken);
+    let clear = false;
+    try {
+      clear = !differsFromLastSave && dirtyMatchesLastSave();
+    } catch (err) {
+      console.error('savePageThrottled: captureForDirtyCheck failed', err);
+    }
+    if (clear) gateClearIfUnchanged(gateToken);
     const skipped = skipped_('No changes to save');
     callback(skipped);
     return Promise.resolve(skipped);

package/src/core/snapshot.js

@@ -42,6 +42,7 @@ import { stripExtensionNoise } from '../lib/extension-noise.js';
 import { restoreAuthoredUrls } from '../lib/authored-url.js';
 import { STRIP_FROM_SAVE, STRIP_FROM_COMPARISON, STRIP_FROM_DIRTY_CHECK, NO_TRIGGER_AUTOSAVE_SELECTOR, SNAPSHOT_REMOVE_SELECTOR } from '../lib/region-policy.js';
 import { TAB_LOCAL_ROOT_ATTRS, stripRouteAttrs } from '../lib/root-attrs.js';
+import { stripEphemeral } from '../lib/ephemeral.js';
 import { createContentView } from '../lib/content-dom.js';
 
 // =============================================================================
@@ -236,23 +237,11 @@ export function captureSnapshot({ flushUndo = true, authored = true } = {}) {
     window.clay.undo.flush();
   }
 
-  const view = createContentView(document.documentElement, { capability: 'snapshot' });
+  // The view records each clone node's live original straight into the provenance
+  // map as it clones, including the nodes inside a <template>'s content fragment,
+  // so the source map can ask which live node any clone node came from.
+  const view = createContentView(document.documentElement, { capability: 'snapshot', provenance: snapshotProvenance });
   const clone = view.root;
-  // A <template>'s children are not its childNodes, they are its content fragment's,
-  // so walking childNodes alone leaves everything inside a template with no provenance.
-  // Nothing noticed until the source map asked which live node a clone node came from
-  // and got null for every node in a template, which reprinted the whole template on
-  // every save. createContentView already maps the fragment itself, so descending into
-  // it is all that was missing.
-  const remember = (node) => {
-    const live = view.original(node);
-    if (live) snapshotProvenance.set(node, live);
-    const children = node.nodeType === 1 && node.tagName === 'TEMPLATE' && node.content
-      ? node.content.childNodes
-      : node.childNodes;
-    for (const child of children || []) remember(child);
-  };
-  remember(clone);
 
   for (const hook of snapshotHooks) {
     stripSnapshotRegions(clone);
@@ -280,6 +269,9 @@ export function captureSnapshot({ flushUndo = true, authored = true } = {}) {
   // Router state says where this tab is, not what the document holds.
   stripRouteAttrs(clone);
 
+  // So does ephemeral state: a selection, an open dialog, a marked attribute.
+  stripEphemeral(clone);
+
   return clone;
 }
 

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)
   }