@panphora/hyper-cms 0.10.0 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panphora/hyper-cms",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Live edit-in-place CMS sidebar for HTML pages with a hyper-html-api rules tag",
   "keywords": [
     "HTML",
@@ -24,6 +24,7 @@
     "./theme.css": "./src/theme.generated.css"
   },
   "files": [
+    "packed-contract.json",
     "LICENSE",
     "README.md",
     "src/**/*.js",
@@ -32,10 +33,12 @@
   ],
   "scripts": {
     "build:theme": "node scripts/build-theme.js",
-    "build": "npm run build:theme && npx esbuild src/hypercms-bundle.js --bundle --minify --format=iife --global-name=hypercms --loader:.css=text --outfile=dist/hypercms.min.js",
+    "build:js": "node scripts/build-js.js --standalone",
+    "build:preview": "node scripts/build-js.js --standalone --hyper-morph-source=../hyper-morph/src/index.js --hyper-html-api-source=../hyper-html-api",
+    "build": "npm run build:theme && npm run build:js",
     "prepublishOnly": "npm run build",
     "copy-to-hyperclayjs": "npm run build && node scripts/copy-to-hyperclayjs.js",
-    "copy-to-clayjs": "npm run build && node scripts/copy-to-clayjs.js",
+    "copy-to-clayjs": "npm run build:theme && node scripts/copy-to-clayjs.js",
     "test:node": "node --test 'test-node/**/*.test.js'",
     "test": "npm run test:node",
     "demo": "http-server . -p 5694 -c-1 -o /demo/",
@@ -44,8 +47,8 @@
     "test:all": "npm run test:node && npm run test:browser"
   },
   "dependencies": {
-    "hyper-html-api": "^0.8.0",
-    "hyper-morph": "^0.5.0"
+    "hyper-html-api": "^0.9.0",
+    "hyper-morph": "^1.0.0"
   },
   "devDependencies": {
     "@open-wc/testing": "^4.0.0",

package/packed-contract.json

@@ -0,0 +1 @@
+{"load":["@panphora/hyper-cms"],"members":["src/theme.generated.css"]}

package/src/anchor.js

@@ -0,0 +1,24 @@
+// Can the inline view hang a control on this page element right now?
+//
+// Deliberately a question about the CURRENT state, never a cached verdict. A
+// target inside a closed <details> or an inactive tab answers false now and
+// true the moment the page reveals it, which is why the inline view re-runs
+// this on every visibility change instead of classifying once at open.
+//
+// The area floor is not cosmetic padding and it is not redundant with
+// IntersectionObserver. Measured in Chrome: an empty inline <span> reports
+// isIntersecting true, ratio 1, on a zero-width box. Without the floor that
+// draws a camera handle on a 0px target.
+export const MIN_ANCHOR_PX = 8
+
+// [cms-template] is the hidden list seed; [data-hcms-shell] is the CMS's own
+// chrome, which both the sidebar panel and the inline host carry. Neither is
+// page content, so neither ever gets a control.
+const NEVER_ANCHOR = '[cms-template], [data-hcms-shell]'
+
+export function isAnchorable(el) {
+  if (!el || typeof el.getBoundingClientRect !== 'function') return false
+  if (typeof el.closest === 'function' && el.closest(NEVER_ANCHOR)) return false
+  const r = el.getBoundingClientRect()
+  return r.width >= MIN_ANCHOR_PX && r.height >= MIN_ANCHOR_PX
+}

package/src/apply-loop.js

@@ -1,8 +1,11 @@
 import { engine } from 'hyper-html-api'
+import { morph } from 'hyper-morph'
 import { fromString as pathFromString, getRuleAtPath } from './path.js'
 import { rowIdentityHooks } from './row-identity.js'
 
 const ENGINE_OPTS = { skip: '[data-hcms-shell]', templateAttr: 'cms-template' }
+const ROLLBACK_UI = 'data-hcms-rollback-ui'
+let rollbackUiId = 0
 
 // Engine reads/writes against pageRoot pass skip + templateAttr so the
 // engine never traverses into the form's own DOM, and so [cms-template]
@@ -15,42 +18,41 @@ const ENGINE_OPTS = { skip: '[data-hcms-shell]', templateAttr: 'cms-template' }
 // rollback restores only the failing subtree; listeners and state elsewhere
 // on the page survive.
 export function applyWithRollback(pageRoot, pageRules, newData, options = {}) {
-  const { observerHandle, shellRoot, structural, structuralPath, formRoot } = options
+  return applyPage(pageRoot, pageRules, newData, options)
+}
+
+function applyPage(pageRoot, pageRules, newData, options) {
+  const { shellRoot, structural, structuralPath, formRoot } = options
   // The form's own row elements are the only stable handle across an apply, so
   // when we have the form we let it say which page row each item is. Without it
   // the engine matches by content, which is exact except between two rows that
   // read identically.
   const engineOpts = formRoot ? { ...ENGINE_OPTS, ...rowIdentityHooks(formRoot) } : ENGINE_OPTS
-  observerHandle?.pause?.()
-  try {
-    if (!structural) {
-      try {
-        engine.apply(pageRoot, pageRules, newData, engineOpts)
-        return { ok: true }
-      } catch (err) {
-        return { ok: false, error: err }
-      }
-    }
-
-    // Structural path: snapshot the smallest container that the change
-    // touches, falling back to non-shell page content if we can't resolve
-    // a specific container.
-    const target = resolveStructuralTarget(pageRoot, pageRules, structuralPath)
-    const subtreeSnapshot = target ? captureChildren(target) : null
-    const pageSnapshot = target ? null : captureNonShellSnapshot(pageRoot, shellRoot)
+  if (!structural) {
     try {
       engine.apply(pageRoot, pageRules, newData, engineOpts)
       return { ok: true }
     } catch (err) {
-      if (subtreeSnapshot) {
-        restoreChildren(target, subtreeSnapshot)
-      } else if (pageSnapshot) {
-        restoreNonShellSnapshot(pageRoot, shellRoot, pageSnapshot)
-      }
       return { ok: false, error: err }
     }
-  } finally {
-    observerHandle?.resume?.()
+  }
+
+  // Structural path: snapshot the smallest container that the change
+  // touches, falling back to non-shell page content if we can't resolve
+  // a specific container.
+  const target = resolveStructuralTarget(pageRoot, pageRules, structuralPath)
+  const subtreeSnapshot = target ? captureChildren(target) : null
+  const pageSnapshot = target ? null : captureNonShellSnapshot(pageRoot, shellRoot)
+  try {
+    engine.apply(pageRoot, pageRules, newData, engineOpts)
+    return { ok: true }
+  } catch (err) {
+    if (subtreeSnapshot) {
+      restoreChildren(target, subtreeSnapshot)
+    } else if (pageSnapshot) {
+      restoreNonShellSnapshot(pageRoot, shellRoot, pageSnapshot)
+    }
+    return { ok: false, error: err }
   }
 }
 
@@ -126,42 +128,67 @@ function resolveContainerByPath(pageRoot, pageRules, arrPath) {
 }
 
 function captureChildren(parent) {
-  const clones = []
+  const nodes = []
+  const retained = []
   for (const child of Array.from(parent.childNodes)) {
-    clones.push(child.cloneNode(true))
+    nodes.push(cloneForRollback(child, retained))
   }
-  return clones
+  return { nodes, retained }
 }
 
-function restoreChildren(parent, clones) {
-  while (parent.firstChild) parent.removeChild(parent.firstChild)
-  for (const clone of clones) parent.appendChild(clone)
+function restoreChildren(parent, snapshot) {
+  const source = parent.cloneNode(false)
+  for (const clone of snapshot.nodes) source.appendChild(clone)
+  morph(parent, Array.from(source.childNodes), rollbackMorphOptions())
+  restoreRetainedUi(parent, snapshot.retained)
 }
 
 function captureNonShellSnapshot(pageRoot, shellRoot) {
-  const clones = []
+  const nodes = []
+  const retained = []
   for (const child of Array.from(pageRoot.childNodes)) {
     if (child === shellRoot || (shellRoot && child.contains?.(shellRoot))) continue
-    clones.push(child.cloneNode(true))
+    nodes.push(cloneForRollback(child, retained))
   }
-  return clones
+  return { nodes, retained }
 }
 
-function restoreNonShellSnapshot(pageRoot, shellRoot, clones) {
-  for (const child of Array.from(pageRoot.childNodes)) {
-    if (child === shellRoot || (shellRoot && child.contains?.(shellRoot))) continue
-    pageRoot.removeChild(child)
+function restoreNonShellSnapshot(pageRoot, shellRoot, snapshot) {
+  const source = pageRoot.cloneNode(false)
+  for (const clone of snapshot.nodes) source.appendChild(clone)
+  morph(pageRoot, Array.from(source.childNodes), rollbackMorphOptions())
+  restoreRetainedUi(pageRoot, snapshot.retained)
+}
+
+function cloneForRollback(source, retained) {
+  const clone = source.cloneNode(false)
+  if (source.nodeType === 1 && source.matches('[editor-ui],[clay~="editor-ui"]')) {
+    const id = String(++rollbackUiId)
+    clone.setAttribute(ROLLBACK_UI, id)
+    retained.push({ id, node: source })
   }
-  const host = findShellHostChild(pageRoot, shellRoot)
-  for (const clone of clones) {
-    pageRoot.insertBefore(clone, host || null)
+  const sourceChildren = source.nodeType === 1 && source.tagName === 'TEMPLATE' ? source.content : source
+  const cloneChildren = clone.nodeType === 1 && clone.tagName === 'TEMPLATE' ? clone.content : clone
+  for (const child of Array.from(sourceChildren.childNodes || [])) {
+    cloneChildren.appendChild(cloneForRollback(child, retained))
   }
+  return clone
 }
 
-function findShellHostChild(pageRoot, shellRoot) {
-  if (!shellRoot) return null
-  for (const child of Array.from(pageRoot.childNodes)) {
-    if (child === shellRoot || child.contains?.(shellRoot)) return child
+function restoreRetainedUi(root, retained) {
+  for (const { id, node } of retained) {
+    const placeholder = root.querySelector(`[${ROLLBACK_UI}="${id}"]`)
+    if (placeholder === node) node.removeAttribute(ROLLBACK_UI)
+    else if (node.isConnected) placeholder?.remove()
+    else placeholder?.replaceWith(node)
+  }
+}
+
+function rollbackMorphOptions() {
+  return {
+    morphStyle: 'innerHTML',
+    policy: 'raw',
+    restoreFocus: false,
+    scripts: { handle: false, merge: false },
   }
-  return null
 }

package/src/enhance.js

@@ -9,7 +9,7 @@
 // whose element holds only text are left untouched. Hosts opt out with
 // cms.open({ richText: false }).
 
-import { platform } from './platform.js'
+import { BOUND_ATTR, resolveRichClay } from './richclay-bridge.js'
 import { ruleAttrIndex } from 'hyper-html-api/engine'
 
 export function upgradeRichTextRules(rules, pageRoot) {
@@ -41,6 +41,73 @@ export function upgradeRichTextRules(rules, pageRoot) {
   }
 }
 
+// The inline view's upgrade. Identical to the one above for a scalar or an
+// object rule, and different for the one case that one deliberately refuses:
+// the rules inside an array.
+//
+// The narrow version cannot answer "does THIS row's element hold markup" from a
+// document-level querySelector, so it leaves array subtrees alone. Here the item
+// elements are resolved first, so the question IS answerable — once per rule
+// rather than once per row, because the rule language has no per-row rule. ANY
+// row holding markup upgrades the rule for every row, and that costs nothing:
+// @innerHTML round-trips plain text unchanged.
+//
+// It matters because the inline view binds rich text to the row element itself.
+// A row left on textContent loses its links and its bold on the first commit.
+export function upgradeInlineTextRules(rules, pageRoot) {
+  if (!pageRoot || rules == null) return rules
+  return walk(rules, [pageRoot])
+
+  function walk(rule, contexts) {
+    if (typeof rule === 'string') {
+      if (rule.endsWith('[]')) return rule
+      if (ruleAttrIndex(rule) !== -1) return rule
+      return contexts.some((ctx) => holdsMarkup(ctx, rule)) ? rule + '@innerHTML' : rule
+    }
+    if (Array.isArray(rule)) {
+      const [selector, shape] = rule
+      if (typeof selector !== 'string' || !selector) return rule
+      const items = queryAll(pageRoot, selector)
+      if (!items.length) return rule
+      return [selector, walk(shape, items)]
+    }
+    if (rule && typeof rule === 'object') {
+      const out = Object.create(null)
+      for (const [k, v] of Object.entries(rule)) out[k] = walk(v, contexts)
+      return out
+    }
+    return rule
+  }
+}
+
+function holdsMarkup(context, selector) {
+  let el = null
+  try {
+    el = context.querySelector(selector)
+  } catch (_) {
+    return false
+  }
+  if (!el) return false
+  // An element hypercms has an editor on cannot answer this from its live DOM.
+  // Squire wraps the content of a block it binds in a <div>, so a plain
+  // paragraph grows a child the instant someone clicks it, and reading that
+  // back as author markup upgrades the rule to @innerHTML and turns a
+  // plain-text field into a rich-text one just by being clicked. The marker
+  // carries the verdict from before the editor arrived, which is the only
+  // moment the question had an honest answer. Measured in Chrome: the wrapper
+  // lands at t+0 and the upgrade followed on the next observer batch.
+  if (el.hasAttribute(BOUND_ATTR)) return el.getAttribute(BOUND_ATTR) === 'rich'
+  return el.children.length > 0
+}
+
+function queryAll(root, selector) {
+  try {
+    return [...root.querySelectorAll(selector)]
+  } catch (_) {
+    return []
+  }
+}
+
 // Grow a form textarea to fit its content. Browsers with `field-sizing:
 // content` handle this in CSS (the theme sets it); everywhere else the
 // height is pinned to scrollHeight on populate and on every input.
@@ -57,15 +124,21 @@ export function autosizeTextarea(el) {
 // page ships it (window.richclay / window.hyperclay.RichClay). Without
 // richclay the surface stays a plain contenteditable bound via @innerHTML,
 // which still round-trips markup — richclay only adds the editing chrome.
-export function enhanceFields(root, doc) {
+//
+// `formRichText` is the view's, read off view.enhanceFormRichText. The inline
+// view passes false: its form fields are never focused (rich text is edited on
+// the page element itself), and each instance installs five document-level
+// capture listeners that test event.target against their element on every
+// keydown, beforeinput, cut, paste and drop. Twenty rich fields is a hundred
+// dead listeners. The autosize pass runs either way — the popover shows those
+// same fields for every non-text target.
+export function enhanceFields(root, doc, formRichText = true) {
   if (!root || !root.querySelectorAll) return
   root.querySelectorAll('textarea[data-hcms-field]').forEach(autosizeTextarea)
+  if (formRichText === false) return
 
   const win = (doc && doc.defaultView) || (typeof window !== 'undefined' ? window : null)
-  const RichClay =
-    (win && win.richclay && win.richclay.RichClay) ||
-    platform('RichClay', win) ||
-    (win && typeof win.RichClay === 'function' ? win.RichClay : null)
+  const RichClay = resolveRichClay(win)
   if (!RichClay) return
 
   root.querySelectorAll('[contenteditable][data-hcms-field]').forEach((el) => {

package/src/events.js

@@ -484,7 +484,7 @@ export function onAdd(arrayPath, ctx) {
     pageRules,
   })
   slot.appendChild(itemNode)
-  enhanceFields(itemNode, ctx.doc)
+  enhanceFields(itemNode, ctx.doc, ctx.view?.enhanceFormRichText !== false)
   updateArrayButtonsVisibility(arrayEl)
   return commitWithUndo(`Add ${arrayPath}`, () =>
     commit(extractFormData(ctx), { path: arrayPath, structural: true }, ctx)
@@ -558,7 +558,15 @@ export function requestRemove(itemEl, ctx) {
   if (message == null) return onRemove(itemEl, ctx)
   const consent = platform('consent') || (typeof window !== 'undefined' && window.consent)
   if (typeof consent === 'function') {
-    Promise.resolve(consent(message)).then(() => onRemove(itemEl, ctx), () => {})
+    Promise.resolve(consent(message)).then(() => {
+      // The editor can be closed, or switched to another view, while the
+      // confirm is still on screen. ctx is dead by then, but itemEl still
+      // points into the detached form and commit would apply that stale form
+      // over the live page: the card goes, and every other field reverts to
+      // whatever it held when the dialog opened.
+      if (ctx.closed) return
+      onRemove(itemEl, ctx)
+    }, () => {})
   } else if (typeof window !== 'undefined' && typeof window.confirm === 'function') {
     if (window.confirm(message)) onRemove(itemEl, ctx)
   } else {
@@ -589,6 +597,15 @@ export function onRemove(itemEl, ctx) {
 }
 
 export function commit(newData, info, ctx) {
+  // The last line of defence for any deferred path that reaches a torn-down
+  // session: a resolved confirmation, an upload that finished after close, a
+  // queued handler. ctx.pageRoot is still the live page.
+  //
+  // ok:false is deliberate and load-bearing — commitWithUndo records an undo
+  // entry on a truthy ok, so returning ok:true here would put a commit that
+  // never happened onto the undo stack. Returning before the error branch below
+  // is equally deliberate: setError would write into a detached shell.
+  if (ctx.closed) return { ok: false, skipped: true, closed: true }
   const fingerprint = stableStringify(newData)
   // Only a plain edit can be skipped on an unchanged fingerprint. A structural
   // operation is never a no-op even when the data is identical: reordering two
@@ -599,8 +616,13 @@ export function commit(newData, info, ctx) {
     return { ok: true, skipped: true }
   }
 
-  const result = applyWithRollback(ctx.pageRoot, ctx.pageRules, newData, {
-    observerHandle: ctx.observerHandle,
+  // undefined is a legitimate value here: a rules tree that is nothing but a
+  // read-only projection strips to it, and engine.apply writes nothing when the
+  // rules are undefined. Only a ctx that never had the field at all — the
+  // hand-built stubs in older tests — falls back to the unstripped rules.
+  const writeRules = Object.hasOwn(ctx, 'writeRules') ? ctx.writeRules : ctx.pageRules
+
+  const result = applyWithRollback(ctx.pageRoot, writeRules, newData, {
     shellRoot: ctx.shellRoot,
     structural: !!info.structural,
     structuralPath: info.path || null,
@@ -620,8 +642,72 @@ export function commit(newData, info, ctx) {
   return result
 }
 
+// Resolve one form leaf by path, and write a value into it. Shared by
+// cms.api.setValue and by the inline view's text commit, which reads the page
+// element richclay just edited and mirrors it into the form before committing.
+export function findLeafField(formRoot, path) {
+  const esc = cssEscape(path)
+  // Prefer a tag-qualified leaf (input/textarea/select/img/a) — since v0.3
+  // stamps data-hcms-field on the wrapping container too, a bare attribute
+  // match would resolve to the container and lose the value write.
+  const leafSel =
+    `[data-hcms-path="${esc}"] input[data-hcms-field], ` +
+    `[data-hcms-path="${esc}"] textarea[data-hcms-field], ` +
+    `[data-hcms-path="${esc}"] select[data-hcms-field], ` +
+    `[data-hcms-path="${esc}"] img[data-hcms-field], ` +
+    `[data-hcms-path="${esc}"] a[data-hcms-field], ` +
+    `[data-hcms-path="${esc}"] [contenteditable][data-hcms-field], ` +
+    // Leaf is the path-stamped element itself (inline-stamped fields):
+    `input[data-hcms-path="${esc}"][data-hcms-field], ` +
+    `textarea[data-hcms-path="${esc}"][data-hcms-field], ` +
+    `select[data-hcms-path="${esc}"][data-hcms-field], ` +
+    `img[data-hcms-path="${esc}"][data-hcms-field], ` +
+    `a[data-hcms-path="${esc}"][data-hcms-field], ` +
+    `[contenteditable][data-hcms-path="${esc}"][data-hcms-field]`
+  return formRoot.querySelector(leafSel)
+}
+
+export function writeFieldValue(el, value, formRoot, path) {
+  const tag = (el.tagName || '').toUpperCase()
+  const type = (el.getAttribute('type') || '').toLowerCase()
+  if (tag === 'INPUT' && type === 'checkbox') {
+    el.checked = value === true || value === 'true'
+    return
+  }
+  if (tag === 'INPUT' && type === 'radio') {
+    // Radios sharing the same path act as a group. Toggle the matching option.
+    const esc = cssEscape(path)
+    const group = formRoot.querySelectorAll(
+      `[data-hcms-path="${esc}"][data-hcms-field][type="radio"], [data-hcms-path="${esc}"] [data-hcms-field][type="radio"]`
+    )
+    if (group.length) {
+      group.forEach((r) => { r.checked = String(r.value) === String(value ?? '') })
+    } else {
+      el.checked = String(el.value) === String(value ?? '')
+    }
+    return
+  }
+  if (tag === 'IMG') {
+    el.src = value == null ? '' : String(value)
+    return
+  }
+  if (tag === 'A') {
+    el.href = value == null ? '' : String(value)
+    return
+  }
+  if (el.hasAttribute && el.hasAttribute('contenteditable')) {
+    el.innerHTML = value == null ? '' : String(value)
+    return
+  }
+  if ('value' in el) {
+    el.value = value == null ? '' : String(value)
+    return
+  }
+  el.textContent = value == null ? '' : String(value)
+}
+
 export function extractFormData(ctx) {
-  const raw = engine.extract(ctx.formRoot, ctx.formRules)
+  const raw = engine.extract(ctx.formRoot, ctx.formRules, { exclude: null })
   return coerceBooleans(raw, ctx.formRules)
 }
 
@@ -862,7 +948,7 @@ function stableStringify(value) {
   })
 }
 
-function cssEscape(value) {
+export function cssEscape(value) {
   if (typeof CSS !== 'undefined' && CSS.escape) return CSS.escape(value)
   return String(value).replace(/[^a-zA-Z0-9_\-.*]/g, (c) => '\\' + c)
 }

package/src/hooks.js

@@ -0,0 +1,100 @@
+// The two clone hooks hypercms installs on the host client, and the retry that
+// covers a client arriving after hypercms does.
+//
+// Their own module rather than private state inside hypercms.js, because the
+// inline view has to install the snapshot hook too: by the time someone clicks
+// a heading the client is certainly loaded, which makes the bind the reliable
+// second trigger for a page that lost the readiness race. Importing that back
+// out of the entry module would have made the entry module part of a cycle.
+
+import { platform, onPlatformEvent, PLATFORM_READY } from './platform.js'
+import { BOUND_ID_ATTR, cleanRichClayFromSnapshot, pristineMarkupFor } from './richclay-bridge.js'
+import { SESSION_OPEN_CLASS } from './shell.js'
+
+// Strip hypercms's own body chrome from the SAVE clone so it never reaches disk
+// (the shell element itself is [save-remove], but the hcms-open class lives on
+// <body>, outside the stripped subtree). Registered once at first open():
+// onPrepareForSave runs save-only, on a clone, so it never touches the live DOM,
+// and removing absent classes is a no-op when the shell is closed. Guarded so it
+// degrades cleanly when the host save pipeline (hyperclayjs) isn't present.
+let prepareHookInstalled = false
+export function installSavePrepareHook() {
+  if (prepareHookInstalled) return
+  const onPrepareForSave = platform('onPrepareForSave')
+  if (typeof onPrepareForSave !== 'function') return
+  onPrepareForSave((clonedDocEl) => {
+    restorePristineMarkup(clonedDocEl)
+    stripSessionChrome(clonedDocEl)
+  })
+  prepareHookInstalled = true
+}
+
+// hypercms's own chrome lives on <body>, outside the [save-remove] shell, so it
+// has to be taken off the clone by hand. Both hooks call this: the save hook
+// because a client may offer onPrepareForSave and no onSnapshot, and the
+// snapshot hook because that is the only one live sync reaches, and without it
+// the session's own classes are broadcast to every other browser. Removing an
+// absent class is a no-op, so running twice on a save costs nothing.
+function stripSessionChrome(clonedDocEl) {
+  const b = clonedDocEl && clonedDocEl.querySelector && clonedDocEl.querySelector('body')
+  if (b) b.classList.remove('hcms-open', 'hcms-overlay', 'hcms-side-left', SESSION_OPEN_CLASS)
+}
+
+// A save can land while somebody is mid-session with an editor open on a
+// heading. richclay rewrites a block's markup simply by being attached to it, so
+// without this the file records that rewriting as though the author had typed
+// it. The live editors are deliberately untouched: this is the clone, and the
+// person editing keeps their caret and their selection.
+function restorePristineMarkup(clonedDocEl) {
+  if (!clonedDocEl || typeof clonedDocEl.querySelectorAll !== 'function') return
+  for (const el of clonedDocEl.querySelectorAll(`[${BOUND_ID_ATTR}]`)) {
+    const html = pristineMarkupFor(el)
+    if (html !== null) el.innerHTML = html
+    el.removeAttribute(BOUND_ID_ATTR)
+  }
+}
+
+// Clean up after the richclay instances hypercms itself creates on page
+// elements. Installed once at first open, alongside the save-prepare hook above,
+// and for the same reason: the host client may not be loaded yet at module
+// evaluation. onSnapshot rather than onPrepareForSave, because this has to run
+// for live sync too — a hook on the save-only path fires after the editor's
+// leftovers have already been broadcast to every other browser.
+let snapshotHookInstalled = false
+export function installSnapshotHook() {
+  if (snapshotHookInstalled) return
+  const onSnapshot = platform('onSnapshot')
+  if (typeof onSnapshot !== 'function') return
+  onSnapshot((clonedDocEl) => {
+    restorePristineMarkup(clonedDocEl)
+    cleanRichClayFromSnapshot(clonedDocEl, typeof window !== 'undefined' ? window : null)
+    stripSessionChrome(clonedDocEl)
+  })
+  snapshotHookInstalled = true
+}
+
+// What open() calls: install both, and arm the retry when either could not be
+// installed yet.
+export function installHooks() {
+  installSavePrepareHook()
+  installSnapshotHook()
+  if (!prepareHookInstalled || !snapshotHookInstalled) armHookRetry()
+}
+
+// Both hooks read a capability that can arrive after hypercms does, and both
+// return without recording success when it is missing. Retry on the clients'
+// readiness pair and disarm once both are in, so a page that lost the import
+// race still gets its clone cleanup.
+let offPlatformReady = null
+function armHookRetry() {
+  if (offPlatformReady || typeof document === 'undefined') return
+  const retry = () => {
+    installSavePrepareHook()
+    installSnapshotHook()
+    if (prepareHookInstalled && snapshotHookInstalled) {
+      offPlatformReady?.()
+      offPlatformReady = null
+    }
+  }
+  offPlatformReady = onPlatformEvent(document, PLATFORM_READY, retry)
+}

package/src/hypercms-clayjs.js

@@ -0,0 +1,10 @@
+import * as hypercms from './hypercms-bundle.js'
+
+if (typeof window !== 'undefined' && !window.__hyperclayNoAutoExport) {
+  window.hyperclay = window.hyperclay || {}
+  window.hyperclay.hypercms = hypercms.cms
+  window.h = window.hyperclay
+}
+
+export const cms = hypercms.cms
+export default hypercms