@panphora/hyper-cms 0.11.5 → 0.12.0

package/src/color-control.js

@@ -0,0 +1,196 @@
+import { checkCustomPropertyValue } from 'hyper-html-api/engine'
+import { COLORS, HUES, SHADES } from './catalogs/colors.js'
+
+// The @color component: swatches from the Tailwind palette plus an optional
+// custom picker, all writing one hidden field that the form commits like any
+// other scalar. Built here rather than in form-builder.js because the events
+// side (pick, clear, panel, custom entry) needs the same helpers.
+
+const INLINE_LIMIT = 12
+const BY_ID = new Map(COLORS.map((c) => [c.id, c]))
+const BY_VALUE = new Map(COLORS.map((c) => [c.value, c]))
+const HEX = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i
+const COLOR_FUNCTION = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark)\(.*\)$/i
+const UNSAFE = /[;{}<>\\]|url\s*\(/i
+
+// The form is rebuilt after every page change, so which panels are open is
+// kept outside it: per document, by field path.
+const OPEN = new WeakMap()
+
+function openPanels(doc) {
+  let set = OPEN.get(doc)
+  if (!set) OPEN.set(doc, (set = new Set()))
+  return set
+}
+
+// A value the custom picker may write. The browser's own parser decides when it
+// is there; without one (node tests) a conservative shape check stands in.
+export function isColorValue(value, doc) {
+  const text = String(value ?? '').trim()
+  if (!text || UNSAFE.test(text) || checkCustomPropertyValue(text)) return false
+  const css = doc?.defaultView?.CSS
+  if (css && typeof css.supports === 'function') return css.supports('color', text)
+  return HEX.test(text) || COLOR_FUNCTION.test(text) || /^[a-z]+$/i.test(text)
+}
+
+function humanColor(c) {
+  return `${c.hue[0].toUpperCase()}${c.hue.slice(1)} ${c.shade}`
+}
+
+function toSwatch(c) {
+  return { id: c.id, label: humanColor(c), value: c.value }
+}
+
+export function colorLabel(value) {
+  const text = String(value ?? '').trim()
+  const hit = BY_VALUE.get(text)
+  return hit ? humanColor(hit) : text
+}
+
+export function parseColorOptions(tokens, doc) {
+  if (!tokens || tokens.length === 0) {
+    return { swatches: COLORS.map(toSwatch), custom: true, full: true }
+  }
+  const swatches = []
+  const seen = new Set()
+  let custom = false
+  const add = (s) => {
+    if (seen.has(s.value)) return
+    seen.add(s.value)
+    swatches.push(s)
+  }
+  for (const token of tokens) {
+    if (token === 'custom') custom = true
+    else if (BY_ID.has(token)) add(toSwatch(BY_ID.get(token)))
+    else if (HUES.includes(token)) COLORS.filter((c) => c.hue === token).forEach((c) => add(toSwatch(c)))
+    else if (SHADES.includes(token)) COLORS.filter((c) => c.shade === token).forEach((c) => add(toSwatch(c)))
+    else if (isColorValue(token, doc)) add({ id: null, label: token, value: token })
+    else console.warn(`[hypercms] color option "${token}" is not a Tailwind color, hue, shade, CSS color or "custom"; ignoring it`)
+  }
+  return { swatches, custom, full: false }
+}
+
+export function setupColorControl(node, { value, tokens, path, doc }) {
+  const { swatches, custom, full } = parseColorOptions(tokens, doc)
+  const current = value == null ? '' : String(value).trim()
+  if (current && !swatches.some((s) => s.value === current)) {
+    swatches.unshift({ id: null, label: colorLabel(current), value: current })
+  }
+  const inline = swatches.length <= INLINE_LIMIT
+  node.setAttribute('data-hcms-color-path', path)
+  node.classList.toggle('hcms-color--inline', inline)
+  const grid = node.querySelector('.hcms-color-grid')
+  if (grid) {
+    grid.classList.toggle('hcms-color-grid--full', full)
+    for (const s of swatches) {
+      const b = doc.createElement('button')
+      b.type = 'button'
+      b.className = 'hcms-color-swatch'
+      b.setAttribute('data-hcms-action', 'color-pick')
+      b.setAttribute('data-hcms-color', s.value)
+      b.setAttribute('aria-label', s.label)
+      b.setAttribute('title', s.id || s.label)
+      b.setAttribute('style', `--hcms-swatch: ${s.value}`)
+      grid.appendChild(b)
+    }
+  }
+  if (!custom) node.querySelector('.hcms-color-custom')?.remove()
+  const toggle = node.querySelector('.hcms-color-current')
+  if (inline && toggle) {
+    toggle.removeAttribute('data-hcms-action')
+    toggle.removeAttribute('aria-expanded')
+  }
+  setPanelOpen(node, inline || openPanels(doc).has(path))
+  paintColorControl(node, current)
+}
+
+// Reflect a value in the control's own chrome: chip, name, pressed swatch,
+// custom inputs. The hidden field is the value; this is only its picture.
+export function paintColorControl(node, value) {
+  const current = value == null ? '' : String(value).trim()
+  node.toggleAttribute('data-hcms-color-empty', current === '')
+  const chip = node.querySelector('.hcms-color-chip')
+  if (chip) {
+    if (current) chip.setAttribute('style', `--hcms-swatch: ${current}`)
+    else chip.removeAttribute('style')
+  }
+  const name = node.querySelector('.hcms-color-name')
+  if (name) name.textContent = current ? colorLabel(current) : 'Not set'
+  node.querySelectorAll('.hcms-color-swatch').forEach((b) => {
+    b.setAttribute('aria-pressed', String(b.getAttribute('data-hcms-color') === current))
+  })
+  const text = node.querySelector('[data-hcms-color-input="text"]')
+  if (text && text.ownerDocument?.activeElement !== text) text.value = current
+  const native = node.querySelector('[data-hcms-color-input="native"]')
+  if (native && /^#[0-9a-f]{6}$/i.test(current)) native.value = current.toLowerCase()
+}
+
+function setPanelOpen(node, open) {
+  const panel = node.querySelector('.hcms-color-panel')
+  if (panel) panel.hidden = !open
+  const toggle = node.querySelector('.hcms-color-current[data-hcms-action]')
+  if (toggle) toggle.setAttribute('aria-expanded', String(open))
+}
+
+function controlOf(el) {
+  return el?.closest ? el.closest('[data-hcms-color-path]') : null
+}
+
+function hiddenField(node) {
+  return node.querySelector('input[type="hidden"][data-hcms-field]')
+}
+
+function showColorError(node, message) {
+  const slot = node.querySelector(':scope > .hcms-error')
+  if (!slot) return
+  slot.textContent = message || ''
+  slot.hidden = !message
+}
+
+// Each of these returns the hidden field to commit, or null when nothing changed.
+function setColor(node, value) {
+  const field = hiddenField(node)
+  if (!field) return null
+  showColorError(node, null)
+  paintColorControl(node, value)
+  if (field.value === value) return null
+  field.value = value
+  return field
+}
+
+export function pickColor(actionEl) {
+  const node = controlOf(actionEl)
+  if (!node) return null
+  if (!node.classList.contains('hcms-color--inline')) {
+    openPanels(node.ownerDocument).delete(node.getAttribute('data-hcms-color-path'))
+    setPanelOpen(node, false)
+  }
+  return setColor(node, actionEl.getAttribute('data-hcms-color') || '')
+}
+
+export function clearColor(actionEl) {
+  const node = controlOf(actionEl)
+  return node ? setColor(node, '') : null
+}
+
+export function toggleColorPanel(actionEl) {
+  const node = controlOf(actionEl)
+  if (!node) return
+  const path = node.getAttribute('data-hcms-color-path')
+  const panels = openPanels(node.ownerDocument)
+  const open = !panels.has(path)
+  if (open) panels.add(path)
+  else panels.delete(path)
+  setPanelOpen(node, open)
+}
+
+export function customColor(inputEl) {
+  const node = controlOf(inputEl)
+  if (!node) return null
+  const value = String(inputEl.value || '').trim()
+  if (value !== '' && !isColorValue(value, node.ownerDocument)) {
+    showColorError(node, `"${value}" is not a CSS color`)
+    return null
+  }
+  return setColor(node, value)
+}

package/src/events.js

@@ -5,6 +5,10 @@ import { buildItem, fileNameFromUrl, radioGroupName } from './form-builder.js'
 import { scaffold } from './scaffold.js'
 import { autosizeTextarea, enhanceFields } from './enhance.js'
 import { platform } from './platform.js'
+import { contentRoot } from './page-root.js'
+import { pickColor, clearColor, toggleColorPanel, customColor } from './color-control.js'
+import { pickFont, toggleFontPanel } from './font-control.js'
+import { reconcileFontsLink } from './fonts-link.js'
 
 const BOUND = new WeakSet()
 
@@ -57,6 +61,9 @@ export function bindEvents(ctx) {
     const target = e.target
     if (!target || !target.closest) return
     if (!target.closest('[data-hcms-form-root]')) return
+    // The color control's custom inputs commit on change, not per keystroke or
+    // per drag step: a commit rebuilds the form under the cursor.
+    if (target.matches('[data-hcms-color-input]')) return
     if (!target.matches('input, textarea, select, [contenteditable][data-hcms-field]')) return
     if (target.tagName === 'TEXTAREA') autosizeTextarea(target)
     // The upload picker fires `input` too, but its .value is the OS fake path
@@ -72,6 +79,11 @@ export function bindEvents(ctx) {
     const target = e.target
     if (!target || !target.closest) return
     if (!target.closest('[data-hcms-form-root]')) return
+    if (target.matches('[data-hcms-color-input]')) {
+      const field = customColor(target)
+      if (field) onScalarChange(field, ctx)
+      return
+    }
     if (target.matches('input[type="file"][data-hcms-upload]')) {
       onUploadChange(target, ctx)
       return
@@ -89,7 +101,7 @@ export function bindEvents(ctx) {
     const action = actionEl.getAttribute('data-hcms-action')
     // add/remove/move must live inside the form root; close inside the shell.
     // Ignore stray data-hcms-action attributes elsewhere on the page.
-    if (action === 'add' || action === 'remove' || action === 'move-up' || action === 'move-down' || action === 'clear-upload') {
+    if (action === 'add' || action === 'remove' || action === 'move-up' || action === 'move-down' || action === 'clear-upload' || action === 'color-pick' || action === 'color-clear' || action === 'color-panel' || action === 'font-pick' || action === 'font-panel') {
       if (!actionEl.closest('[data-hcms-form-root]')) return
     } else if (action === 'close') {
       if (!actionEl.closest('[data-hcms-shell]')) return
@@ -109,6 +121,16 @@ export function bindEvents(ctx) {
       onMove(itemEl, action === 'move-up' ? -1 : 1, ctx)
     } else if (action === 'clear-upload') {
       onClearUpload(actionEl, ctx)
+    } else if (action === 'color-pick' || action === 'color-clear') {
+      const field = action === 'color-pick' ? pickColor(actionEl) : clearColor(actionEl)
+      if (field) onScalarChange(field, ctx)
+    } else if (action === 'color-panel') {
+      toggleColorPanel(actionEl)
+    } else if (action === 'font-pick') {
+      const field = pickFont(actionEl)
+      if (field) onScalarChange(field, ctx)
+    } else if (action === 'font-panel') {
+      toggleFontPanel(actionEl)
     } else if (action === 'close') {
       ctx.onCloseRequested?.()
     }
@@ -154,7 +176,7 @@ function resolveUnobservedProjection(ctx, pathStr) {
   const prop = rule.slice(at + 1)
   if (!UNOBSERVED_FIELD_PROPS.has(prop)) return null
   const selector = rule.slice(0, at)
-  const el = selector ? ctx.pageRoot.querySelector(selector) : ctx.pageRoot
+  const el = selector ? ctx.pageRoot.querySelector(selector) : contentRoot(ctx.pageRoot)
   if (!el) return null
   return { el, prop, oldValue: el[prop] }
 }
@@ -631,6 +653,7 @@ export function commit(newData, info, ctx) {
   if (result.ok) {
     ctx.lastFingerprint = fingerprint
     ctx.lastData = newData
+    reconcileFontsLink(ctx, newData)
     setError(ctx, null)
     ctx.dispatch?.('hcms:change', { data: newData, path: info.path, structural: !!info.structural })
     ctx.onChange?.(newData, info)

package/src/font-control.js

@@ -0,0 +1,142 @@
+import { FONTS, FONT_GROUPS, SYSTEM_FONT, fontStack, fontFromStack, fontsHref } from './catalogs/fonts.js'
+
+// The @font component: a menu of catalog families, each shown in its own face,
+// writing one hidden field that the form commits like any other scalar.
+
+const GROUP_LABELS = { sans: 'Sans', serif: 'Serif', display: 'Display', mono: 'Mono' }
+const PREVIEW = 'link[data-hcms-font-preview]'
+
+const OPEN = new WeakMap()
+
+function openPanels(doc) {
+  let set = OPEN.get(doc)
+  if (!set) OPEN.set(doc, (set = new Set()))
+  return set
+}
+
+function isSystemStack(stack) {
+  return String(stack ?? '').trim() === SYSTEM_FONT.fallback
+}
+
+export function fontLabel(stack) {
+  const text = String(stack ?? '').trim()
+  if (!text) return 'Not set'
+  if (isSystemStack(text)) return 'System'
+  const font = fontFromStack(text)
+  return font ? font.family : 'Current font'
+}
+
+export function parseFontOptions(tokens) {
+  if (!tokens || tokens.length === 0) return { system: true, fonts: [...FONTS] }
+  let system = false
+  const picked = new Set()
+  for (const token of tokens) {
+    if (token === 'system') system = true
+    else if (FONT_GROUPS.includes(token)) FONTS.filter((f) => f.group === token).forEach((f) => picked.add(f))
+    else if (FONTS.some((f) => f.slug === token)) picked.add(FONTS.find((f) => f.slug === token))
+    else console.warn(`[hypercms] font option "${token}" is not a catalog font, a group or "system"; ignoring it`)
+  }
+  return { system, fonts: FONTS.filter((f) => picked.has(f)) }
+}
+
+function option(doc, { value, label, family }) {
+  const b = doc.createElement('button')
+  b.type = 'button'
+  b.className = 'hcms-font-option'
+  b.setAttribute('role', 'option')
+  b.setAttribute('data-hcms-action', 'font-pick')
+  b.setAttribute('data-hcms-font', value)
+  b.setAttribute('style', `font-family: ${family}`)
+  b.textContent = label
+  return b
+}
+
+export function setupFontControl(node, { value, tokens, path, doc }) {
+  const { system, fonts } = parseFontOptions(tokens)
+  const current = value == null ? '' : String(value).trim()
+  node.setAttribute('data-hcms-font-path', path)
+  const list = node.querySelector('.hcms-font-list')
+  if (list) {
+    const offered = new Set([...(system ? [SYSTEM_FONT.fallback] : []), ...fonts.map(fontStack)])
+    if (current && !offered.has(current)) {
+      list.appendChild(option(doc, { value: current, label: fontLabel(current), family: current }))
+    }
+    if (system) list.appendChild(option(doc, { value: SYSTEM_FONT.fallback, label: 'System', family: SYSTEM_FONT.fallback }))
+    for (const group of FONT_GROUPS) {
+      const members = fonts.filter((f) => f.group === group)
+      if (!members.length) continue
+      const heading = doc.createElement('div')
+      heading.className = 'hcms-font-group'
+      heading.textContent = GROUP_LABELS[group]
+      list.appendChild(heading)
+      for (const f of members) list.appendChild(option(doc, { value: fontStack(f), label: f.family, family: fontStack(f) }))
+    }
+  }
+  setPanelOpen(node, openPanels(doc).has(path))
+  paintFontControl(node, current)
+}
+
+export function paintFontControl(node, value) {
+  const current = value == null ? '' : String(value).trim()
+  const name = node.querySelector('.hcms-font-name')
+  if (name) {
+    name.textContent = fontLabel(current)
+    if (current) name.setAttribute('style', `font-family: ${current}`)
+    else name.removeAttribute('style')
+  }
+  node.querySelectorAll('.hcms-font-option').forEach((b) => {
+    b.setAttribute('aria-selected', String(b.getAttribute('data-hcms-font') === current))
+  })
+}
+
+function setPanelOpen(node, open) {
+  const panel = node.querySelector('.hcms-font-panel')
+  if (panel) panel.hidden = !open
+  node.querySelector('.hcms-font-current')?.setAttribute('aria-expanded', String(open))
+  if (open) ensurePreviewLink(node.ownerDocument)
+}
+
+// One editor-only stylesheet for every family name in its own face. It asks
+// Google for just the letters of the names, so it stays a few kilobytes.
+function ensurePreviewLink(doc) {
+  const head = doc?.head
+  if (!head || head.querySelector(PREVIEW)) return
+  const href = fontsHref(FONTS.map(fontStack))
+  const letters = [...new Set(FONTS.map((f) => f.family).join(''))].join('')
+  const link = doc.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = `${href}&text=${encodeURIComponent(letters)}`
+  link.setAttribute('data-hcms-font-preview', '')
+  for (const attr of ['editor-ui', 'no-save', 'save-remove', 'snapshot-remove']) link.setAttribute(attr, '')
+  head.appendChild(link)
+}
+
+function controlOf(el) {
+  return el?.closest ? el.closest('[data-hcms-font-path]') : null
+}
+
+export function toggleFontPanel(actionEl) {
+  const node = controlOf(actionEl)
+  if (!node) return
+  const path = node.getAttribute('data-hcms-font-path')
+  const panels = openPanels(node.ownerDocument)
+  const open = !panels.has(path)
+  if (open) panels.add(path)
+  else panels.delete(path)
+  setPanelOpen(node, open)
+}
+
+// Returns the hidden field to commit, or null when nothing changed.
+export function pickFont(actionEl) {
+  const node = controlOf(actionEl)
+  if (!node) return null
+  const field = node.querySelector('input[type="hidden"][data-hcms-field]')
+  if (!field) return null
+  openPanels(node.ownerDocument).delete(node.getAttribute('data-hcms-font-path'))
+  setPanelOpen(node, false)
+  const value = actionEl.getAttribute('data-hcms-font') || ''
+  paintFontControl(node, value)
+  if (field.value === value) return null
+  field.value = value
+  return field
+}

package/src/fonts-link.js

@@ -0,0 +1,83 @@
+import { componentForScalarRule } from './templates.js'
+import { fontsHref, sameFamilies } from './catalogs/fonts.js'
+
+// The page's one Google Fonts stylesheet is derived from its font fields: the
+// families they hold, nothing else. Recomputed after commits and refreshes, so
+// undo, live sync and outside edits all end in the right link without each
+// path having to know about fonts.
+
+const LINK = 'link[data-hcms-fonts]'
+const PRECONNECT = 'link[data-hcms-fonts-preconnect]'
+
+// Every font field's value, walking the rules and the extracted data together.
+// `found` says whether these rules have any font field at all.
+export function fontStacksIn(pageRules, data, doc) {
+  const stacks = []
+  let found = false
+  walk(pageRules, data, [])
+  return { stacks, found }
+
+  function walk(rule, value, pathArr) {
+    if (typeof rule === 'string') {
+      if (rule.endsWith('[]')) return
+      if (componentForScalarRule(rule, doc, pathArr, pageRules) !== '@font') return
+      found = true
+      if (value != null && value !== '') stacks.push(String(value))
+      return
+    }
+    if (Array.isArray(rule)) {
+      const items = Array.isArray(value) ? value : []
+      items.forEach((item) => walk(rule[1], item, [...pathArr, '*']))
+      if (!items.length) walk(rule[1], undefined, [...pathArr, '*'])
+      return
+    }
+    if (rule && typeof rule === 'object') {
+      for (const [key, child] of Object.entries(rule)) walk(child, value?.[key], [...pathArr, key])
+    }
+  }
+}
+
+export function syncFontsLink(doc, href) {
+  const head = doc?.head
+  if (!head) return
+  let link = head.querySelector(LINK)
+  let pre = head.querySelector(PRECONNECT)
+  if (!href) {
+    link?.remove()
+    pre?.remove()
+    return
+  }
+  if (!pre) {
+    pre = doc.createElement('link')
+    pre.setAttribute('rel', 'preconnect')
+    pre.setAttribute('href', 'https://fonts.gstatic.com')
+    pre.setAttribute('crossorigin', '')
+    pre.setAttribute('data-hcms-fonts-preconnect', '')
+    pre.setAttribute('no-undo', '')
+    head.appendChild(pre)
+  }
+  if (!link) {
+    link = doc.createElement('link')
+    link.setAttribute('rel', 'stylesheet')
+    link.setAttribute('data-hcms-fonts', '')
+    link.setAttribute('no-undo', '')
+    pre.after(link)
+  }
+  // The CMS derives this link from the font fields, so its changes are never
+  // undo steps of their own, including on a link the author wrote by hand.
+  if (!link.hasAttribute('no-undo')) link.setAttribute('no-undo', '')
+  if (!pre.hasAttribute('no-undo')) pre.setAttribute('no-undo', '')
+  if (link.getAttribute('href') !== href) link.setAttribute('href', href)
+}
+
+export function reconcileFontsLink(ctx, data) {
+  if (!ctx?.doc || ctx.pageRules == null) return
+  const { stacks, found } = fontStacksIn(ctx.pageRules, data, ctx.doc)
+  if (!found) return
+  const current = ctx.doc.head?.querySelector(LINK)?.getAttribute('href') || null
+  const href = fontsHref(stacks, current)
+  // A link that already loads exactly these families stays as it is, so
+  // opening the editor or an undo never rewrites the author's own URL.
+  if (href && current && sameFamilies(current, href)) return
+  syncFontsLink(ctx.doc, href)
+}

package/src/form-builder.js

@@ -10,8 +10,12 @@ import {
   declaredComponentKey,
   readOptionsOverride,
   readCropOverride,
+  styleRole,
 } from './templates.js'
-import { fieldPropertyFor } from './form-rules.js'
+import { fieldPropertyFor, shapeOf } from './form-rules.js'
+import { setupColorControl } from './color-control.js'
+import { setupFontControl } from './font-control.js'
+import { populateVariant } from './variant-control.js'
 
 // The visible label for a file field is the basename of its URL value; the
 // bound leaf still carries the full URL in href so it round-trips byte-stable.
@@ -28,11 +32,59 @@ export function fileNameFromUrl(url) {
 
 export function buildForm({ pageRules, formRules: _formRules, data, doc }) {
   const fragment = doc.createDocumentFragment()
+  const pageStyle = buildPageStyle(pageRules, data, doc)
+  if (pageStyle) fragment.appendChild(pageStyle)
   const root = buildNode(pageRules, [], data, doc, pageRules)
   if (root) fragment.appendChild(root)
   return fragment
 }
 
+// Page style fields, gathered from wherever their rules sit (outside lists)
+// into one group that renders first. Each field keeps its own data-hcms-path.
+function buildPageStyle(pageRules, data, doc) {
+  const fields = []
+  collect(pageRules, data, [])
+  if (!fields.length) return null
+  const tpl = findTemplate(doc, '@object')
+  if (!tpl) return null
+  const node = cloneTemplate(tpl, doc)
+  node.setAttribute('data-hcms-page-style', '')
+  const label = node.querySelector('[data-hcms-label]')
+  if (label) label.textContent = 'Page style'
+  const slot = node.querySelector('.hcms-object-fields') || node
+  for (const [rule, pathArr, value] of fields) {
+    const field = buildNode(rule, pathArr, value, doc, pageRules)
+    if (field) slot.appendChild(field)
+  }
+  return node
+
+  function collect(rule, value, pathArr) {
+    if (typeof rule === 'string') {
+      if (pathArr.length && styleRole(rule, doc, pathArr, pageRules) === 'page') fields.push([rule, pathArr, value])
+      return
+    }
+    if (!rule || typeof rule !== 'object' || Array.isArray(rule)) return
+    if (pathArr.length) {
+      const tpl = resolveTemplate(pathArr, '@object', doc)
+      if (tpl && isInlineTemplate(tpl)) return
+    }
+    for (const [k, child] of Object.entries(rule)) collect(child, value == null ? null : value[k], [...pathArr, k])
+  }
+}
+
+// Style fields first, each group keeping its own order; page style fields are
+// left out here because buildPageStyle renders them.
+function orderedEntries(shape, pathArr, doc, pageRules) {
+  const style = []
+  const content = []
+  for (const [k, child] of Object.entries(shape)) {
+    const role = styleRole(child, doc, [...pathArr, k], pageRules)
+    if (role === 'page') continue
+    ;(role ? style : content).push([k, child])
+  }
+  return [...style, ...content]
+}
+
 // pageRules rides alongside doc so a scalar bound to its own context element
 // ("." / "@attr") can resolve the row that carries its named control; doc alone
 // cannot answer that, because the row is only knowable from the enclosing array
@@ -88,6 +140,17 @@ function buildScalar(rule, pathArr, data, doc, pageRules) {
   if ((componentKey === '@select' || componentKey === '@radio') && winnerKey === componentKey) {
     populateOptions(node, rule, pathArr, data, doc, componentKey, pageRules)
   }
+  if (componentKey === '@variant' && winnerKey === '@variant') {
+    const tokens = readOptionsOverride(rule, doc, pathArr, pageRules)
+    if (!tokens) setFieldError(node, 'data-hcms-options required (value:icon tokens)')
+    const count = populateVariant(node, {
+      tokens,
+      value: data,
+      name: radioGroupName(pathArr.join('.')),
+      doc,
+    })
+    if (count === 0) node.querySelector('.hcms-variant-option')?.remove()
+  }
   if (componentKey === '@image' && winnerKey === '@image') {
     const crop = readCropOverride(rule, doc, pathArr, pageRules)
     if (crop != null && !node.hasAttribute('data-hcms-crop')) node.setAttribute('data-hcms-crop', crop)
@@ -100,6 +163,22 @@ function buildScalar(rule, pathArr, data, doc, pageRules) {
   stampContainerField(node, lastKey(pathArr))
   setLabel(node, lastKey(pathArr))
   populateScalarValue(node, data)
+  if (componentKey === '@color' && winnerKey === '@color') {
+    setupColorControl(node, {
+      value: data,
+      tokens: readOptionsOverride(rule, doc, pathArr, pageRules),
+      path: pathArr.join('.'),
+      doc,
+    })
+  }
+  if (componentKey === '@font' && winnerKey === '@font') {
+    setupFontControl(node, {
+      value: data,
+      tokens: readOptionsOverride(rule, doc, pathArr, pageRules),
+      path: pathArr.join('.'),
+      doc,
+    })
+  }
   if (componentKey === '@file') syncFileLeafText(node)
   return node
 }
@@ -212,11 +291,12 @@ function buildObject(rule, pathArr, data, doc, pageRules) {
   }
 
   const slot = requireSlot(node, '.hcms-object-fields', tpl, pathArr)
-  for (const [k, child] of Object.entries(rule)) {
+  for (const [k, child] of orderedEntries(rule, pathArr, doc, pageRules)) {
     const childData = data == null ? null : data[k]
     const childNode = buildNode(child, [...pathArr, k], childData, doc, pageRules)
     if (childNode) slot.appendChild(childNode)
   }
+  if (pathArr.length && !slot.children.length && Object.keys(rule).length) return null
   return node
 }
 
@@ -259,7 +339,7 @@ function buildObjectArrayItem(itemShape, pathArr, data, doc, pageRules) {
 
   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)) {
+    for (const [k, child] of orderedEntries(itemShape, pathArr, doc, pageRules)) {
       const childData = data == null ? null : data[k]
       const childNode = buildNode(child, [...pathArr, k], childData, doc, pageRules)
       if (childNode) slot.appendChild(childNode)
@@ -332,6 +412,7 @@ function cloneTemplate(tpl, doc) {
 
 function stampPath(node, pathArr) {
   node.setAttribute('data-hcms-path', pathArr.join('.'))
+  node.setAttribute('data-hcms-path-shape', shapeOf(pathArr))
 }
 
 function stampScalarField(node, key) {
@@ -481,6 +562,7 @@ function stampInlineFieldPaths(node, shape, parentPath) {
     if (shape && typeof shape === 'object' && !(key in shape)) return
     const childPath = [...parentPath, key].join('.')
     el.setAttribute('data-hcms-path', childPath)
+    el.setAttribute('data-hcms-path-shape', shapeOf([...parentPath, key]))
   })
 }