@panphora/clayjs 1.11.1 → 1.11.2

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