@panphora/bevel 0.1.0

package/examples/components/reference/sources/hypercms/scripts/build-theme.js

@@ -0,0 +1,203 @@
+#!/usr/bin/env node
+/*
+ * build-theme.js — generate hypercms's pixel-quiet shell stylesheet.
+ *
+ * mirk.css styles a whole document (:root tokens, body font, universal
+ * box-sizing, a relative @font-face url). hypercms injects a sidebar into an
+ * arbitrary host page, so mirk must be SCOPED to .hcms-shell or it would
+ * repaint the host body, change its box model, and fail to load the font.
+ *
+ * This reads the canonical mirk.css (single source of truth in mirk-interface),
+ * scopes every rule to .hcms-shell, rewrites the font url to the absolute CDN,
+ * then appends the hypercms-owned pixel-quiet overrides. Output:
+ * src/theme.generated.css, which the bundle entry installs as the shell CSS.
+ *
+ * Also vendors mirk.js (the delegated component runtime) into src/vendor so the
+ * bundle can import it for its side effect.
+ *
+ * Run: npm run build:theme  (also runs first in `npm run build`).
+ */
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const root = path.join(__dirname, '..')
+
+// mirk-interface normally sits next to the hypercms checkout, but in a git
+// worktree (.claude/worktrees/<name>) the repo root is nested deeper, so walk
+// up until a directory contains mirk-interface/mirk.css.
+function findMirkRepo(from) {
+  for (let dir = from; ; dir = path.dirname(dir)) {
+    const candidate = path.join(dir, 'mirk-interface')
+    if (fs.existsSync(path.join(candidate, 'mirk.css'))) return candidate
+    if (path.dirname(dir) === dir) throw new Error('mirk-interface/mirk.css not found above ' + from)
+  }
+}
+const mirkRepo = findMirkRepo(root)
+
+const MIRK_VERSION = '2.2.0'
+const FONT_CDN =
+  `https://cdn.jsdelivr.net/npm/mirk-interface@${MIRK_VERSION}/fonts/DepartureMono-1.500/DepartureMono-Regular.woff2`
+
+const SCOPE = '.hcms-shell'
+
+// ---- selector scoping -------------------------------------------------------
+
+// Split a string on a top-level separator, ignoring separators inside () or [].
+function splitTopLevel(str, sep) {
+  const out = []
+  let depth = 0
+  let buf = ''
+  for (const ch of str) {
+    if (ch === '(' || ch === '[') depth++
+    else if (ch === ')' || ch === ']') depth--
+    if (ch === sep && depth === 0) {
+      out.push(buf)
+      buf = ''
+    } else {
+      buf += ch
+    }
+  }
+  if (buf.trim() !== '') out.push(buf)
+  return out
+}
+
+function stripComments(s) {
+  return s.replace(/\/\*[\s\S]*?\*\//g, '')
+}
+
+// Map one mirk selector to its .hcms-shell-scoped form. Root-level selectors
+// (:root / body / html, and the theme flags .light / .dark / [data-theme]) bind
+// to the shell element itself; everything else binds to a descendant.
+function scopeOne(sel) {
+  sel = stripComments(sel).trim()
+  if (!sel) return ''
+  if (sel === ':root' || sel === 'body' || sel === 'html') return SCOPE
+  if (sel === '*') return `${SCOPE} *`
+  if (sel === '::before') return `${SCOPE} *::before`
+  if (sel === '::after') return `${SCOPE} *::after`
+  if (/^\.light\b/.test(sel) || /^\.dark\b/.test(sel) || sel.startsWith('[data-theme')) {
+    return SCOPE + sel
+  }
+  return `${SCOPE} ${sel}`
+}
+
+function scopeSelectorList(list) {
+  return splitTopLevel(list, ',').map(scopeOne).filter(Boolean).join(', ')
+}
+
+function rewriteFontFace(body) {
+  return body.replace(
+    /url\(\s*(['"]?)[^)'"]*DepartureMono-Regular\.woff2\1\s*\)/,
+    `url('${FONT_CDN}')`
+  )
+}
+
+// ---- block walker -----------------------------------------------------------
+
+// Transform a sequence of rules (a stylesheet, or the inside of an at-rule
+// block). Style rules get their selector list scoped; nested at-rules recurse.
+function transformBlock(css) {
+  let i = 0
+  let out = ''
+  const n = css.length
+  while (i < n) {
+    const ch = css[i]
+    if (/\s/.test(ch)) { out += ch; i++; continue }
+    if (ch === '/' && css[i + 1] === '*') {
+      const end = css.indexOf('*/', i + 2)
+      const stop = end === -1 ? n : end + 2
+      out += css.slice(i, stop)
+      i = stop
+      continue
+    }
+    // Read the prelude up to a top-level '{' or ';'.
+    let j = i
+    let depth = 0
+    while (j < n) {
+      const c = css[j]
+      if (c === '/' && css[j + 1] === '*') { const e = css.indexOf('*/', j + 2); j = e === -1 ? n : e + 2; continue }
+      if (c === '{' && depth === 0) break
+      if (c === ';' && depth === 0) break
+      if (c === '(' || c === '[') depth++
+      else if (c === ')' || c === ']') depth--
+      j++
+    }
+    if (j >= n) { out += css.slice(i); break }
+    const prelude = css.slice(i, j)
+    if (css[j] === ';') {
+      // statement at-rule, e.g. `@layer base, components;`
+      out += prelude + ';'
+      i = j + 1
+      continue
+    }
+    // css[j] === '{' — find the matching close brace.
+    const bodyStart = j + 1
+    let d = 1
+    let k = bodyStart
+    while (k < n && d > 0) {
+      const c = css[k]
+      if (c === '/' && css[k + 1] === '*') { const e = css.indexOf('*/', k + 2); k = e === -1 ? n : e + 2; continue }
+      if (c === '{') d++
+      else if (c === '}') { d--; if (d === 0) break }
+      k++
+    }
+    const body = css.slice(bodyStart, k)
+    i = k + 1
+    const trimmed = prelude.trim()
+    if (trimmed.startsWith('@')) {
+      const atName = trimmed.split(/[\s({]/)[0]
+      if (atName === '@font-face') {
+        out += prelude + '{' + rewriteFontFace(body) + '}'
+      } else if (atName === '@keyframes' || atName === '@-webkit-keyframes') {
+        out += prelude + '{' + body + '}'
+      } else {
+        // @media / @layer / @supports / @scope — recurse into inner rules.
+        out += prelude + '{' + transformBlock(body) + '}'
+      }
+    } else {
+      out += scopeSelectorList(prelude) + ' {' + body + '}'
+    }
+  }
+  return out
+}
+
+// ---- main -------------------------------------------------------------------
+
+function read(p) { return fs.readFileSync(p, 'utf8') }
+
+const mirkCss = read(path.join(mirkRepo, 'mirk.css'))
+const scopedMirk = transformBlock(mirkCss)
+const overrides = read(path.join(root, 'src', 'theme', 'pixel-quiet.overrides.css'))
+
+const banner =
+  '/* GENERATED by scripts/build-theme.js from mirk-interface/mirk.css — DO NOT EDIT.\n' +
+  '   Source of truth: mirk-interface/mirk.css + src/theme/pixel-quiet.overrides.css.\n' +
+  '   Regenerate with: npm run build:theme */\n\n'
+
+const themeOut =
+  banner +
+  '/* ===== mirk-interface@' + MIRK_VERSION + ', scoped to .hcms-shell ===== */\n' +
+  scopedMirk.trim() + '\n\n' +
+  '/* ===== pixel-quiet overrides (hypercms-owned) ===== */\n' +
+  overrides.trim() + '\n'
+
+fs.writeFileSync(path.join(root, 'src', 'theme.generated.css'), themeOut, 'utf8')
+console.log('✓ wrote src/theme.generated.css (' + themeOut.length + ' bytes)')
+
+// Vendor the mirk.js delegated runtime so the bundle can import it.
+const vendorDir = path.join(root, 'src', 'vendor')
+fs.mkdirSync(vendorDir, { recursive: true })
+const mirkJs = read(path.join(mirkRepo, 'mirk.js'))
+const vendorBanner =
+  '/* VENDORED from mirk-interface/mirk.js — DO NOT EDIT. Regenerate: npm run build:theme */\n'
+// Guard so this is import-safe in non-browser realms (e.g. Node tests that load
+// hypercms before a jsdom window exists). In the browser the guard is a no-op.
+const guarded =
+  vendorBanner +
+  'if (typeof window !== "undefined" && typeof document !== "undefined") {\n' +
+  mirkJs.trimEnd() + '\n' +
+  '}\n'
+fs.writeFileSync(path.join(vendorDir, 'mirk.vendor.js'), guarded, 'utf8')
+console.log('✓ wrote src/vendor/mirk.vendor.js')

package/examples/components/reference/sources/hypercms/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/examples/components/reference/sources/hypercms/src/apply-loop.js

@@ -0,0 +1,167 @@
+import { engine } from 'hyper-html-api'
+import { fromString as pathFromString, getRuleAtPath } from './path.js'
+import { rowIdentityHooks } from './row-identity.js'
+
+const ENGINE_OPTS = { skip: '[data-hcms-shell]', templateAttr: 'cms-template' }
+
+// Engine reads/writes against pageRoot pass skip + templateAttr so the
+// engine never traverses into the form's own DOM, and so [cms-template]
+// nodes are treated as seed templates (not real data). Scalar applies skip
+// snapshot — string user input can't produce a ShapeMismatch and the focused
+// input must survive every keystroke.
+//
+// Structural applies (add/remove/reorder) can hit EmptyListInsert and other
+// engine errors. We snapshot just the affected array container's slot so
+// 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
+  // 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)
+    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?.()
+  }
+}
+
+// Walk pageRules along structuralPath to find the array rule that the change
+// targets, then ask the engine to locate its matching container in pageRoot.
+// Returns the live container element (so its child cards can be snapshotted),
+// or null if the path doesn't resolve to a single array container.
+function resolveStructuralTarget(pageRoot, pageRules, structuralPath) {
+  if (!structuralPath || !pageRoot) return null
+  const segs = pathFromString(structuralPath)
+  // Walk to the array rule. Add/remove paths can be either the array itself
+  // ("products") or an item path ("products.0"); both resolve to the same
+  // array container.
+  let arrPath = []
+  let node = pageRules
+  for (const seg of segs) {
+    if (typeof node === 'string' || node == null) break
+    if (Array.isArray(node)) {
+      // We're at an array — this segment is the index; stop walking, we have
+      // the container.
+      break
+    }
+    if (typeof node === 'object' && seg in node) {
+      arrPath.push(seg)
+      node = node[seg]
+      if (Array.isArray(node) || (typeof node === 'string' && node.endsWith('[]'))) break
+    } else {
+      return null
+    }
+  }
+  if (!Array.isArray(node) && !(typeof node === 'string' && node.endsWith('[]'))) return null
+  // arrPath is the prefix that leads to the array. Walk pageRoot via the
+  // engine using a stripped pageRules so we land on the container.
+  return resolveContainerByPath(pageRoot, pageRules, arrPath)
+}
+
+// Walk pageRoot by following each parent rule's selector until we reach the
+// array container. For paths with no parent (root-level array), use pageRoot
+// itself; otherwise descend through each named rule.
+function resolveContainerByPath(pageRoot, pageRules, arrPath) {
+  if (arrPath.length === 0) return null
+  let ctx = pageRoot
+  let rule = pageRules
+  for (let i = 0; i < arrPath.length; i++) {
+    const key = arrPath[i]
+    if (!rule || typeof rule !== 'object' || Array.isArray(rule)) return null
+    const sub = rule[key]
+    if (sub == null) return null
+    if (i === arrPath.length - 1) {
+      // Final step: the array's selector resolves to ITEMS, not the
+      // container. Walk to the items' shared parent so the snapshot covers
+      // the whole list (cards/scalars siblings). Without this, an object
+      // array's selector like `.product` returns the first item, and
+      // rollback restores only that item's children — leaving any earlier
+      // list-level insert/reorder mutated.
+      if (Array.isArray(sub)) {
+        const [selector] = sub
+        const first = ctx.querySelector?.(selector)
+        return first?.parentElement || null
+      }
+      if (typeof sub === 'string' && sub.endsWith('[]')) {
+        const selector = sub.slice(0, -2)
+        const first = ctx.querySelector?.(selector)
+        return first?.parentElement || null
+      }
+      return null
+    }
+    // Intermediate: must be an object subrule. Engine extract treats objects
+    // as same-ctx, so we don't narrow ctx.
+    rule = sub
+  }
+  return null
+}
+
+function captureChildren(parent) {
+  const clones = []
+  for (const child of Array.from(parent.childNodes)) {
+    clones.push(child.cloneNode(true))
+  }
+  return clones
+}
+
+function restoreChildren(parent, clones) {
+  while (parent.firstChild) parent.removeChild(parent.firstChild)
+  for (const clone of clones) parent.appendChild(clone)
+}
+
+function captureNonShellSnapshot(pageRoot, shellRoot) {
+  const clones = []
+  for (const child of Array.from(pageRoot.childNodes)) {
+    if (child === shellRoot || (shellRoot && child.contains?.(shellRoot))) continue
+    clones.push(child.cloneNode(true))
+  }
+  return clones
+}
+
+function restoreNonShellSnapshot(pageRoot, shellRoot, clones) {
+  for (const child of Array.from(pageRoot.childNodes)) {
+    if (child === shellRoot || (shellRoot && child.contains?.(shellRoot))) continue
+    pageRoot.removeChild(child)
+  }
+  const host = findShellHostChild(pageRoot, shellRoot)
+  for (const clone of clones) {
+    pageRoot.insertBefore(clone, host || null)
+  }
+}
+
+function findShellHostChild(pageRoot, shellRoot) {
+  if (!shellRoot) return null
+  for (const child of Array.from(pageRoot.childNodes)) {
+    if (child === shellRoot || child.contains?.(shellRoot)) return child
+  }
+  return null
+}

package/examples/components/reference/sources/hypercms/src/diagnostics.js

@@ -0,0 +1,44 @@
+import { shapeKindOf } from './templates.js'
+
+const PREFIX = '[hypercms]'
+
+export function warnUnmatchedTemplates(doc, pageRules) {
+  if (!doc || !doc.querySelectorAll || !pageRules) return
+  const validKeys = collectValidKeys(pageRules)
+  const tpls = doc.querySelectorAll('template[data-hcms-tpl]')
+  tpls.forEach((tpl) => {
+    const key = tpl.getAttribute('data-hcms-tpl')
+    if (!key) return
+    if (key.startsWith('@')) return
+    if (!validKeys.has(key)) {
+      console.warn(`${PREFIX} template "${key}" doesn't match any rule path; ignored`)
+    }
+  })
+}
+
+function collectValidKeys(pageRules) {
+  const keys = new Set()
+  walk([], pageRules)
+  return keys
+
+  function walk(pathArr, rule) {
+    const pathStr = pathArr.join('.')
+    const wildcardKey = pathArr.map((s) => (typeof s === 'number' ? '*' : s)).join('.')
+    if (pathStr) keys.add(pathStr)
+    if (wildcardKey) keys.add(wildcardKey)
+    const shape = shapeKindOf(rule)
+    if (shape === 'object') {
+      for (const [k, child] of Object.entries(rule)) walk([...pathArr, k], child)
+    } else if (shape === 'object-array' || shape === 'scalar-array') {
+      const itemPath = [...pathArr, '*']
+      const itemWildcardKey = itemPath.map((s) => (typeof s === 'number' ? '*' : s)).join('.')
+      keys.add(itemWildcardKey)
+      if (shape === 'object-array') {
+        const itemRule = rule[1]
+        if (itemRule && typeof itemRule === 'object' && !Array.isArray(itemRule)) {
+          for (const [k, child] of Object.entries(itemRule)) walk([...itemPath, k], child)
+        }
+      }
+    }
+  }
+}

package/examples/components/reference/sources/hypercms/src/enhance.js

@@ -0,0 +1,173 @@
+// Post-mount field enhancements + the rich-text rule upgrade.
+//
+// Bare scalar rules bind textContent, which flattens inline HTML (links,
+// bold, code) on extract and destroys it on the first apply. When the bound
+// page element actually contains child elements, the rule is upgraded to
+// @innerHTML so the round-trip preserves markup and the form renders the
+// @richtext component (a contenteditable surface, richclay-powered when the
+// host page ships richclay). Explicit @prop rules, array rules, and rules
+// whose element holds only text are left untouched. Hosts opt out with
+// cms.open({ richText: false }).
+
+import { BOUND_ATTR, resolveRichClay } from './richclay-bridge.js'
+import { ruleAttrIndex } from 'hyper-html-api/engine'
+
+export function upgradeRichTextRules(rules, pageRoot) {
+  if (!pageRoot || rules == null) return rules
+  return walk(rules)
+
+  function walk(rule) {
+    if (typeof rule === 'string') {
+      if (rule.endsWith('[]')) return rule
+      if (ruleAttrIndex(rule) !== -1) return rule
+      let el = null
+      try {
+        el = pageRoot.querySelector(rule)
+      } catch (_) {
+        return rule
+      }
+      return el && el.children.length > 0 ? rule + '@innerHTML' : rule
+    }
+    // Array rules ([itemSelector, shape]) scope their inner selectors per
+    // item; a document-level querySelector can't answer "does THIS item's
+    // element hold markup", so array subtrees are never upgraded.
+    if (Array.isArray(rule)) return rule
+    if (rule && typeof rule === 'object') {
+      const out = Object.create(null)
+      for (const [k, v] of Object.entries(rule)) out[k] = walk(v)
+      return out
+    }
+    return rule
+  }
+}
+
+// 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.
+export function autosizeTextarea(el) {
+  if (!el || el.tagName !== 'TEXTAREA') return
+  const win = el.ownerDocument.defaultView || (typeof window !== 'undefined' ? window : null)
+  if (win && win.CSS && win.CSS.supports && win.CSS.supports('field-sizing: content')) return
+  el.style.height = 'auto'
+  el.style.height = el.scrollHeight + 'px'
+}
+
+// Runs after any form (or form fragment) lands in the live DOM: sizes the
+// autosize fallback and mounts richclay on rich-text surfaces when the host
+// 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.
+//
+// `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 = resolveRichClay(win)
+  if (!RichClay) return
+
+  root.querySelectorAll('[contenteditable][data-hcms-field]').forEach((el) => {
+    if (el.__hcmsRichclay) return
+    let editor
+    try {
+      // hyperclay:false keeps the form field out of the page's save/undo
+      // machinery (page writes go through commit) and activates the editor
+      // regardless of the host's edit-mode signal.
+      editor = new RichClay(el, {
+        inline: true,
+        hyperclay: false,
+        toolbar: ['bold', 'italic', 'link', 'undo', 'redo'],
+      })
+    } catch (err) {
+      console.warn('[hypercms] richclay activation failed; field stays plain contenteditable', err)
+      return
+    }
+    el.__hcmsRichclay = editor
+    // Toolbar commands mutate the DOM through squire, which doesn't always
+    // fire a native input event; mirror squire's own input signal so the
+    // form's delegated listener commits the change. Duplicate events are
+    // harmless — commits are fingerprinted.
+    const squire = editor && editor.squire
+    if (squire && typeof squire.addEventListener === 'function') {
+      squire.addEventListener('input', () => {
+        const Ev = (win && win.Event) || Event
+        el.dispatchEvent(new Ev('input', { bubbles: true }))
+      })
+    }
+  })
+}