@panphora/hyper-cms 0.4.0

package/src/form-builder.js

@@ -0,0 +1,361 @@
+import {
+  findTemplate,
+  isInlineTemplate,
+  humanize,
+  shapeKindOf,
+} from './templates.js'
+import { fieldPropertyFor } from './form-rules.js'
+
+export function buildForm({ pageRules, formRules: _formRules, data, doc }) {
+  const fragment = doc.createDocumentFragment()
+  const root = buildNode(pageRules, [], data, doc)
+  if (root) fragment.appendChild(root)
+  return fragment
+}
+
+export function buildItem({ shape, itemShape, pathArr, data, doc }) {
+  if (shape === 'object-array-item') {
+    return buildObjectArrayItem(itemShape, pathArr, data, doc)
+  }
+  if (shape === 'scalar-array-item') {
+    return buildScalarArrayItem(pathArr, data, doc)
+  }
+  throw new Error(`hypercms: buildItem called with unknown shape "${shape}"`)
+}
+
+function buildNode(rule, pathArr, data, doc) {
+  const kind = shapeKindOf(rule)
+  if (kind === 'scalar') return buildScalar(pathArr, data, doc)
+  if (kind === 'object') return buildObject(rule, pathArr, data, doc)
+  if (kind === 'object-array') return buildObjectArray(rule, pathArr, data, doc)
+  if (kind === 'scalar-array') return buildScalarArray(rule, pathArr, data, doc)
+  return null
+}
+
+function buildScalar(pathArr, data, doc) {
+  const tpl = resolveTemplate(pathArr, '@scalar', doc)
+  if (!tpl) throw new Error(`hypercms: missing template for scalar at "${pathArr.join('.')}"`)
+  const node = cloneTemplate(tpl, doc)
+  stampPath(node, pathArr)
+  // Stamp leaf input(s) FIRST so the container's data-hcms-field doesn't
+  // make stampScalarField early-return (which would leave the input without
+  // a key).
+  stampScalarField(node, lastKey(pathArr))
+  // Then stamp the wrapping container so engine selectors can scope by key.
+  stampContainerField(node, lastKey(pathArr))
+  setLabel(node, lastKey(pathArr))
+  populateScalarValue(node, data)
+  return node
+}
+
+function buildObject(rule, pathArr, data, doc) {
+  const tpl = resolveTemplate(pathArr, '@object', doc)
+  if (!tpl) throw new Error(`hypercms: missing template for object at "${pathArr.join('.')}"`)
+  const node = cloneTemplate(tpl, doc)
+  stampPath(node, pathArr)
+  stampContainerField(node, lastKey(pathArr))
+  setLabel(node, lastKey(pathArr))
+
+  if (isInlineTemplate(tpl)) {
+    stampInlineFieldPaths(node, rule, pathArr)
+    populateInlineFields(node, rule, data)
+    return node
+  }
+
+  const slot = requireSlot(node, '.hcms-object-fields', tpl, pathArr)
+  for (const [k, child] of Object.entries(rule)) {
+    const childData = data == null ? null : data[k]
+    const childNode = buildNode(child, [...pathArr, k], childData, doc)
+    if (childNode) slot.appendChild(childNode)
+  }
+  return node
+}
+
+function buildObjectArray(rule, pathArr, data, doc) {
+  const tpl = resolveTemplate(pathArr, '@object-array', doc)
+  if (!tpl) throw new Error(`hypercms: missing template for object-array at "${pathArr.join('.')}"`)
+  const node = cloneTemplate(tpl, doc)
+  stampPath(node, pathArr)
+  stampContainerField(node, lastKey(pathArr))
+  setLabel(node, lastKey(pathArr))
+  copyArrayConstraintAttrs(node, tpl)
+  wireSortable(node, tpl, pathArr)
+
+  const slot = requireSlot(node, '.hcms-array-items', tpl, pathArr)
+  const [, itemShape] = rule
+  const items = Array.isArray(data) ? data : []
+  items.forEach((itemData, i) => {
+    const itemNode = buildObjectArrayItem(itemShape, [...pathArr, i], itemData, doc)
+    if (itemNode) slot.appendChild(itemNode)
+  })
+  applyConstraintVisibility(node)
+  return node
+}
+
+function buildObjectArrayItem(itemShape, pathArr, data, doc) {
+  const tpl = resolveItemTemplate(pathArr, 'object-array-item', doc)
+  if (!tpl) throw new Error(`hypercms: missing item template for "${pathArr.join('.')}"`)
+  const node = cloneTemplate(tpl, doc)
+  node.setAttribute('data-hcms-card', '')
+  if (!node.classList.contains('hcms-card')) node.classList.add('hcms-card')
+  stampPath(node, pathArr)
+
+  if (isInlineTemplate(tpl)) {
+    if (itemShape && typeof itemShape === 'object' && !Array.isArray(itemShape)) {
+      stampInlineFieldPaths(node, itemShape, pathArr)
+      populateInlineFields(node, itemShape, data)
+    }
+    return node
+  }
+
+  const slot = requireSlot(node, '.hcms-card-fields', tpl, pathArr)
+  if (itemShape && typeof itemShape === 'object' && !Array.isArray(itemShape)) {
+    for (const [k, child] of Object.entries(itemShape)) {
+      const childData = data == null ? null : data[k]
+      const childNode = buildNode(child, [...pathArr, k], childData, doc)
+      if (childNode) slot.appendChild(childNode)
+    }
+  }
+  return node
+}
+
+function buildScalarArray(rule, pathArr, data, doc) {
+  const tpl = resolveTemplate(pathArr, '@scalar-array', doc)
+  if (!tpl) throw new Error(`hypercms: missing template for scalar-array at "${pathArr.join('.')}"`)
+  const node = cloneTemplate(tpl, doc)
+  stampPath(node, pathArr)
+  stampContainerField(node, lastKey(pathArr))
+  setLabel(node, lastKey(pathArr))
+  copyArrayConstraintAttrs(node, tpl)
+  wireSortable(node, tpl, pathArr)
+
+  const slot = requireSlot(node, '.hcms-array-items', tpl, pathArr)
+  const items = Array.isArray(data) ? data : []
+  items.forEach((itemValue, i) => {
+    const itemNode = buildScalarArrayItem([...pathArr, i], itemValue, doc)
+    if (itemNode) slot.appendChild(itemNode)
+  })
+  applyConstraintVisibility(node)
+  return node
+}
+
+function buildScalarArrayItem(pathArr, value, doc) {
+  const tpl = resolveItemTemplate(pathArr, 'scalar-array-item', doc)
+  if (!tpl) throw new Error(`hypercms: missing item template for "${pathArr.join('.')}"`)
+  const node = cloneTemplate(tpl, doc)
+  node.setAttribute('data-hcms-array-item', '')
+  if (!node.classList.contains('hcms-array-item')) node.classList.add('hcms-array-item')
+  stampPath(node, pathArr)
+
+  populateScalarValue(node, value)
+  return node
+}
+
+function resolveTemplate(pathArr, defaultKey, doc) {
+  const pathStr = pathArr.join('.')
+  const wildcardKey = pathArr.map((s) => (typeof s === 'number' ? '*' : s)).join('.')
+  return (
+    (pathStr && findTemplate(doc, pathStr)) ||
+    (wildcardKey && wildcardKey !== pathStr && findTemplate(doc, wildcardKey)) ||
+    findTemplate(doc, defaultKey)
+  )
+}
+
+function resolveItemTemplate(pathArr, defaultShape, doc) {
+  const wildcardKey = pathArr.map((s) => (typeof s === 'number' ? '*' : s)).join('.')
+  return findTemplate(doc, wildcardKey) || findTemplate(doc, '@' + defaultShape)
+}
+
+function cloneTemplate(tpl, doc) {
+  const content = tpl.content || tpl
+  const wrapper = doc.createElement('div')
+  wrapper.appendChild(content.cloneNode(true))
+  return wrapper.firstElementChild || wrapper
+}
+
+function stampPath(node, pathArr) {
+  node.setAttribute('data-hcms-path', pathArr.join('.'))
+}
+
+function stampScalarField(node, key) {
+  const targetKey = key == null ? '' : String(key)
+  if (node.matches && node.matches('[data-hcms-field]')) {
+    if (!node.getAttribute('data-hcms-field')) node.setAttribute('data-hcms-field', targetKey)
+    return
+  }
+  // Stamp every descendant input that's marked as a field but missing its key
+  // (radio groups have multiple inputs sharing the same key).
+  const fields = node.querySelectorAll ? node.querySelectorAll('[data-hcms-field]') : []
+  fields.forEach((field) => {
+    if (!field.getAttribute('data-hcms-field')) field.setAttribute('data-hcms-field', targetKey)
+  })
+}
+
+// Stamp data-hcms-field on the WRAPPING container so engine selectors can
+// scope by key (e.g. nested arrays sharing a terminal name). The leaf input's
+// data-hcms-field carries the same key — form-rules selectors use tag-specific
+// qualifiers (`input[data-hcms-field=...]`) so the container doesn't shadow.
+function stampContainerField(node, key) {
+  if (key == null || key === '' || !node.setAttribute) return
+  // Don't overwrite an existing data-hcms-field attribute (e.g. when the
+  // template author already stamped it deliberately).
+  if (node.hasAttribute?.('data-hcms-field')) return
+  node.setAttribute('data-hcms-field', String(key))
+}
+
+function setLabel(node, key) {
+  if (key == null || key === '') return
+  const labels = node.querySelectorAll
+    ? node.querySelectorAll('[data-hcms-label]')
+    : []
+  labels.forEach((el) => {
+    const t = el.textContent || ''
+    if (t.trim() === '') el.textContent = humanize(String(key))
+  })
+}
+
+function copyArrayConstraintAttrs(node, tpl) {
+  ;['data-hcms-no-add', 'data-hcms-no-remove', 'data-hcms-no-reorder'].forEach((attr) => {
+    if (tpl.hasAttribute(attr)) node.setAttribute(attr, '')
+  })
+  ;['data-hcms-min-items', 'data-hcms-max-items'].forEach((attr) => {
+    if (tpl.hasAttribute(attr)) node.setAttribute(attr, tpl.getAttribute(attr))
+  })
+}
+
+function applyConstraintVisibility(arrayEl) {
+  const slot = arrayEl.querySelector ? arrayEl.querySelector('.hcms-array-items') : null
+  if (!slot) return
+  const items = Array.from(slot.querySelectorAll(':scope > [data-hcms-card], :scope > [data-hcms-array-item]'))
+  const count = items.length
+  const max = readIntAttr(arrayEl, 'data-hcms-max-items')
+  const min = readIntAttr(arrayEl, 'data-hcms-min-items')
+  const noAdd = arrayEl.hasAttribute('data-hcms-no-add')
+  const noRemove = arrayEl.hasAttribute('data-hcms-no-remove')
+  const noReorder = arrayEl.hasAttribute('data-hcms-no-reorder')
+  const addBtn = arrayEl.querySelector('[data-hcms-action="add"]')
+  if (addBtn) addBtn.hidden = noAdd || (max != null && count >= max)
+  items.forEach((item, i) => {
+    const rm = item.querySelector('[data-hcms-action="remove"]')
+    if (rm) rm.hidden = noRemove || (min != null && count <= min)
+    const up = item.querySelector('[data-hcms-action="move-up"]')
+    if (up) up.hidden = noReorder || i === 0
+    const dn = item.querySelector('[data-hcms-action="move-down"]')
+    if (dn) dn.hidden = noReorder || i === count - 1
+  })
+}
+
+function readIntAttr(el, name) {
+  if (!el || !el.hasAttribute(name)) return null
+  const n = parseInt(el.getAttribute(name), 10)
+  return Number.isFinite(n) ? n : null
+}
+
+function wireSortable(node, tpl, pathArr) {
+  if (node.hasAttribute('data-hcms-no-reorder') || tpl.hasAttribute('data-hcms-no-reorder')) return
+  const slot = node.querySelector('.hcms-array-items')
+  if (!slot) return
+  const groupName = 'hcms-' + pathArr.join('.')
+  slot.setAttribute('sortable', groupName)
+  // hyperclayjs's [sortable] attribute compiles `onsorted` as a code body
+  // (new Function), so we invoke a top-level callable instead of pointing at
+  // a function reference. The callable is installed by hypercms.js open().
+  slot.setAttribute('onsorted', 'hypercmsCommit && hypercmsCommit()')
+}
+
+function lastKey(pathArr) {
+  if (!pathArr.length) return null
+  return pathArr[pathArr.length - 1]
+}
+
+function populateScalarValue(node, value) {
+  // Radio groups have multiple <input data-hcms-field>s; writeValue handles
+  // each radio individually (checks against its `value`). Write to ALL leaf
+  // fields under the wrapper, skipping the wrapper itself if it happens to
+  // carry data-hcms-field too.
+  const targets = collectLeafFields(node)
+  if (targets.length === 0) return
+  for (const t of targets) writeValue(t, value)
+}
+
+function collectLeafFields(node) {
+  if (!node) return []
+  const out = []
+  // The node itself is a leaf only if it's a recognized leaf tag (input,
+  // textarea, select, img, a, or contenteditable). Container shapes — even
+  // shape="scalar" wrappers — have child inputs we should target instead.
+  if (node.matches?.('[data-hcms-field]') && isLeafFieldEl(node)) {
+    out.push(node)
+  }
+  const descendants = node.querySelectorAll
+    ? node.querySelectorAll('input[data-hcms-field], textarea[data-hcms-field], select[data-hcms-field], img[data-hcms-field], a[data-hcms-field], [contenteditable][data-hcms-field]')
+    : []
+  descendants.forEach((d) => out.push(d))
+  return out
+}
+
+function isLeafFieldEl(el) {
+  const tag = (el.tagName || '').toUpperCase()
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || tag === 'IMG' || tag === 'A') return true
+  if (el.hasAttribute?.('contenteditable')) return true
+  return false
+}
+
+function populateInlineFields(node, shape, data) {
+  const fields = node.querySelectorAll ? node.querySelectorAll('[data-hcms-field]') : []
+  fields.forEach((el) => {
+    const key = el.getAttribute('data-hcms-field')
+    if (!key) return
+    if (!shape || typeof shape !== 'object' || !(key in shape)) {
+      console.warn(`[hypercms] inline template field "${key}" is not in the rule shape; ignoring`)
+      return
+    }
+    const childValue = data == null ? null : data[key]
+    writeValue(el, childValue)
+  })
+}
+
+function stampInlineFieldPaths(node, shape, parentPath) {
+  if (!node.querySelectorAll) return
+  const fields = node.querySelectorAll('[data-hcms-field]')
+  fields.forEach((el) => {
+    const key = el.getAttribute('data-hcms-field')
+    if (!key) return
+    if (shape && typeof shape === 'object' && !(key in shape)) return
+    const childPath = [...parentPath, key].join('.')
+    el.setAttribute('data-hcms-path', childPath)
+  })
+}
+
+function requireSlot(node, slotSelector, tpl, pathArr) {
+  if (!node.querySelector) return node
+  const slot = node.querySelector(slotSelector)
+  if (slot) return slot
+  // Slotted templates must declare their slot. Inline-template detection has
+  // already short-circuited above, so missing slot here is a real authoring bug.
+  const id = tpl?.getAttribute?.('data-hcms-tpl') || pathArr.join('.')
+  throw new Error(
+    `hypercms: template "${id}" is in slotted mode but has no ${slotSelector} element`
+  )
+}
+
+function writeValue(el, value) {
+  const prop = fieldPropertyFor(el)
+  const tag = (el.tagName || '').toUpperCase()
+  const type = (el.getAttribute('type') || '').toLowerCase()
+  if (tag === 'INPUT' && type === 'radio') {
+    el.checked = el.value != null && String(el.value) === String(value ?? '')
+    return
+  }
+  if (prop === 'checked') {
+    // Coerce strings "true"/"false" the same way coerceBooleans does, so even
+    // raw page-extract values (which engine stringifies) don't flip false → true.
+    el.checked = value === true || value === 'true'
+    return
+  }
+  if (prop) {
+    el[prop] = value == null ? '' : String(value)
+    return
+  }
+  el.textContent = value == null ? '' : String(value)
+}

package/src/form-rules.js

@@ -0,0 +1,192 @@
+import { shapeKindOf, findTemplate, isInlineTemplate } from './templates.js'
+
+const TAG_PROP_MAP = {
+  IMG: 'src',
+  A: 'href',
+}
+
+export function fieldPropertyFor(el) {
+  if (!el) return 'value'
+  const tag = (el.tagName || '').toUpperCase()
+  if (tag === 'INPUT') {
+    const type = (el.getAttribute('type') || 'text').toLowerCase()
+    if (type === 'checkbox') return 'checked'
+    return 'value'
+  }
+  if (tag === 'TEXTAREA' || tag === 'SELECT') return 'value'
+  if (TAG_PROP_MAP[tag]) return TAG_PROP_MAP[tag]
+  return null
+}
+
+// Tag-specific scalar field selector. Returns a selector that uniquely
+// identifies the leaf input under data-hcms-field="key" — necessary because
+// data-hcms-field is now stamped on every keyed node (containers + leaves),
+// so a bare `[data-hcms-field="key"]` would match the wrapping container too.
+export function fieldSelectorFor(el, key) {
+  const tag = (el.tagName || '').toUpperCase()
+  const type = (el.getAttribute && el.getAttribute('type') || '').toLowerCase()
+  const prop = fieldPropertyFor(el)
+  const tagSel = tagSelectorFor(tag, type)
+  const fieldSel = `${tagSel}[data-hcms-field="${cssEscape(key)}"]`
+  if (tag === 'INPUT' && type === 'radio') {
+    return `${fieldSel}:checked@value`
+  }
+  if (prop) return `${fieldSel}@${prop}`
+  return fieldSel
+}
+
+// Build a per-item leaf selector with no key qualifier — used by scalar-array
+// rules where the leaf is scoped by the surrounding per-item context, so the
+// data-hcms-field key isn't needed (and items don't have a stable key anyway).
+function keylessFieldSelectorFor(el) {
+  const tag = (el.tagName || '').toUpperCase()
+  const type = (el.getAttribute && el.getAttribute('type') || '').toLowerCase()
+  const prop = fieldPropertyFor(el)
+  const tagSel = tagSelectorFor(tag, type)
+  const base = `${tagSel}[data-hcms-field]`
+  if (tag === 'INPUT' && type === 'radio') return `${base}:checked@value`
+  if (prop) return `${base}@${prop}`
+  return base
+}
+
+function tagSelectorFor(tag, type) {
+  if (tag === 'INPUT') {
+    if (type) return `input[type="${type}"]`
+    return 'input'
+  }
+  if (tag === 'TEXTAREA') return 'textarea'
+  if (tag === 'SELECT') return 'select'
+  if (tag === 'IMG') return 'img'
+  if (tag === 'A') return 'a'
+  // Custom/unknown element (e.g. contenteditable div) — match by attribute
+  // and exclude every container shape (scalar wrapper too) so the wrapping
+  // node never shadows the inner leaf. v0.3 stamps data-hcms-field on the
+  // scalar wrapper as well, so omitting `scalar` here would otherwise match
+  // the wrapper first and extract its full text instead of the leaf's.
+  return ':not([data-hcms-shape="scalar"]):not([data-hcms-shape="object"]):not([data-hcms-shape="object-array"]):not([data-hcms-shape="scalar-array"])'
+}
+
+function cssEscape(value) {
+  if (typeof CSS !== 'undefined' && CSS.escape) return CSS.escape(value)
+  return String(value).replace(/[^a-zA-Z0-9_\-.*]/g, (c) => '\\' + c)
+}
+
+const FORBIDDEN_KEYS = new Set(['__proto__', 'constructor', 'prototype'])
+
+export function deriveFormRules(pageRules, doc) {
+  return derive(pageRules, [])
+
+  function derive(rule, pathArr) {
+    const kind = shapeKindOf(rule)
+    if (kind === 'scalar') return scalarRule(rule, pathArr)
+    if (kind === 'scalar-array') return scalarArrayRule(pathArr)
+    if (kind === 'object-array') return objectArrayRule(rule, pathArr)
+    if (kind === 'object') {
+      const out = Object.create(null)
+      for (const [k, child] of Object.entries(rule)) {
+        if (FORBIDDEN_KEYS.has(k)) {
+          throw new Error(`hypercms: rule key "${k}" is forbidden at "${pathArr.join('.') || '<root>'}"`)
+        }
+        out[k] = derive(child, [...pathArr, k])
+      }
+      return out
+    }
+    return null
+  }
+
+  function scalarRule(rule, pathArr) {
+    const key = pathArr.length ? pathArr[pathArr.length - 1] : null
+    const fieldKey = typeof key === 'string' ? key : '__value'
+    const inlineEl = findInlineFieldEl(pathArr, fieldKey)
+    if (inlineEl) return fieldSelectorFor(inlineEl, fieldKey)
+    // No path-bound override: look up the actual @scalar template (which
+    // sites may override globally with e.g. <textarea>) and derive the
+    // selector from its leaf tag instead of assuming <input>.
+    const shapeEl = findShapeFieldEl('@scalar', fieldKey)
+    if (shapeEl) return fieldSelectorFor(shapeEl, fieldKey)
+    return `input[data-hcms-field="${cssEscape(fieldKey)}"]@value`
+  }
+
+  function scalarArrayRule(pathArr) {
+    // The engine's "selector[]" form is text-only; for an editable form we need
+    // per-item @value reads, so emit the [selector, shape] form with a scalar
+    // shape that targets the inner field's value property. If the site
+    // overrides @scalar-array-item with a non-<input> leaf (textarea, etc.),
+    // derive the inner-leaf selector from the override.
+    const shapeEl = findShapeFieldEl('@scalar-array-item', null)
+    const itemSel = shapeEl ? keylessFieldSelectorFor(shapeEl) : 'input[data-hcms-field]@value'
+    return [itemSelectorFor(pathArr, '[data-hcms-array-item]'), itemSel]
+  }
+
+  function objectArrayRule(rule, pathArr) {
+    const [, itemShape] = rule
+    const itemPath = [...pathArr, '*']
+    const itemSelector = itemSelectorFor(pathArr, '[data-hcms-card]')
+    if (itemShape && typeof itemShape === 'object' && !Array.isArray(itemShape)) {
+      const obj = Object.create(null)
+      for (const [k, child] of Object.entries(itemShape)) {
+        if (FORBIDDEN_KEYS.has(k)) {
+          throw new Error(`hypercms: rule key "${k}" is forbidden at "${itemPath.join('.')}"`)
+        }
+        obj[k] = derive(child, [...itemPath, k])
+      }
+      return [itemSelector, obj]
+    }
+    return [itemSelector, derive(itemShape, [...itemPath, 0])]
+  }
+
+  // Build a selector that scopes item matching to the right array container.
+  // Top-level paths use exact data-hcms-path match. Nested paths use the
+  // stable data-hcms-field key (which the form-builder stamps on every keyed
+  // container) — this disambiguates sibling arrays that share a terminal key
+  // (e.g. products.*.primary.variants vs products.*.secondary.variants would
+  // both have a `variants` array with the same last segment).
+  function itemSelectorFor(pathArr, itemTag) {
+    const lastKey = pathArr.length ? pathArr[pathArr.length - 1] : ''
+    const hasWildcard = pathArr.some((s) => s === '*')
+    const pathStr = pathArr.join('.')
+    const containerSel = hasWildcard
+      ? `[data-hcms-field="${cssEscape(lastKey)}"]`
+      : `[data-hcms-path="${cssEscape(pathStr)}"]`
+    return `${containerSel} > .hcms-array-items > ${itemTag}`
+  }
+
+  // Look up the field leaf inside a shape-default template (@scalar,
+  // @scalar-array-item, etc.). Sites can override these globally, so the
+  // selector emitted must reflect the actual leaf tag/type, not assume input.
+  // Returns null if the template isn't found or has no [data-hcms-field].
+  function findShapeFieldEl(shapeKey, fieldKey) {
+    if (!doc) return null
+    const tpl = findTemplate(doc, shapeKey)
+    if (!tpl) return null
+    const content = tpl.content || tpl
+    if (fieldKey) {
+      const keyed = content.querySelector(`[data-hcms-field="${cssEscape(fieldKey)}"]`)
+      if (keyed) return keyed
+    }
+    return content.querySelector('[data-hcms-field]')
+  }
+
+  function findInlineFieldEl(pathArr, fieldKey) {
+    if (!doc) return null
+    const wildcardKey = pathArr.map((s) => (typeof s === 'number' ? '*' : s)).join('.')
+    const pathStr = pathArr.join('.')
+    const candidates = [pathStr, wildcardKey]
+    for (let i = pathArr.length - 1; i >= 0; i--) {
+      const slice = pathArr.slice(0, i).map((s) => (typeof s === 'number' ? '*' : s))
+      slice.push('*')
+      candidates.push(slice.join('.'))
+    }
+    for (const key of candidates) {
+      if (!key) continue
+      const tpl = findTemplate(doc, key)
+      if (!tpl || !isInlineTemplate(tpl)) continue
+      const content = tpl.content || tpl
+      const el =
+        content.querySelector(`[data-hcms-field="${cssEscape(fieldKey)}"]`) ||
+        content.querySelector('[data-hcms-field]')
+      if (el) return el
+    }
+    return null
+  }
+}

package/src/hypercms-bundle.js

@@ -0,0 +1,7 @@
+import * as core from './hypercms.js'
+import stylesText from './styles.css'
+
+core.installStyles(stylesText)
+
+export const cms = core.cms
+export default { cms: core.cms }