@panphora/hyper-cms 0.4.2 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panphora/hyper-cms",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "Live edit-in-place CMS sidebar for HTML pages with a hyper-html-api rules tag",
   "keywords": [
     "HTML",
@@ -20,7 +20,8 @@
   "module": "src/hypercms.js",
   "exports": {
     ".": "./src/hypercms.js",
-    "./styles.css": "./src/styles.css"
+    "./styles.css": "./src/theme.generated.css",
+    "./theme.css": "./src/theme.generated.css"
   },
   "files": [
     "LICENSE",
@@ -30,7 +31,8 @@
     "dist/*.js"
   ],
   "scripts": {
-    "build": "npx esbuild src/hypercms-bundle.js --bundle --minify --format=iife --global-name=hypercms --loader:.css=text --outfile=dist/hypercms.min.js",
+    "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",
     "prepublishOnly": "npm run build",
     "copy-to-hyperclayjs": "npm run build && node scripts/copy-to-hyperclayjs.js",
     "test:node": "node --test 'test-node/**/*.test.js'",

package/src/events.js

@@ -1,7 +1,7 @@
 import { engine } from 'hyper-html-api'
 import { applyWithRollback } from './apply-loop.js'
-import { fromString as pathFromString } from './path.js'
-import { buildItem } from './form-builder.js'
+import { fromString as pathFromString, getRuleAtPath } from './path.js'
+import { buildItem, fileNameFromUrl, radioGroupName } from './form-builder.js'
 import { scaffold } from './scaffold.js'
 
 const BOUND = new WeakSet()
@@ -56,6 +56,11 @@ export function bindEvents(ctx) {
     if (!target || !target.closest) return
     if (!target.closest('[data-hcms-form-root]')) return
     if (!target.matches('input, textarea, select')) return
+    // The upload picker fires `input` too, but its .value is the OS fake path
+    // (C:\fakepath\…); it's handled on `change` via onUploadChange. The wrapper
+    // carries data-hcms-field, so without this guard the closest() below would
+    // route the fake path into onScalarChange.
+    if (target.matches('input[type="file"]')) return
     if (!target.closest('[data-hcms-field]') && !target.hasAttribute?.('data-hcms-field')) return
     onScalarChange(target, ctx)
   }
@@ -64,6 +69,10 @@ export function bindEvents(ctx) {
     const target = e.target
     if (!target || !target.closest) return
     if (!target.closest('[data-hcms-form-root]')) return
+    if (target.matches('input[type="file"][data-hcms-upload]')) {
+      onUploadChange(target, ctx)
+      return
+    }
     if (target.matches('input[type="checkbox"], input[type="radio"], select')) {
       onScalarChange(target, ctx)
     }
@@ -75,11 +84,11 @@ export function bindEvents(ctx) {
     const actionEl = target.closest('[data-hcms-action]')
     if (!actionEl) return
     const action = actionEl.getAttribute('data-hcms-action')
-    // add/remove/move must live inside the form root; close/save inside the shell.
+    // 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') {
+    if (action === 'add' || action === 'remove' || action === 'move-up' || action === 'move-down' || action === 'clear-upload') {
       if (!actionEl.closest('[data-hcms-form-root]')) return
-    } else if (action === 'close' || action === 'save') {
+    } else if (action === 'close') {
       if (!actionEl.closest('[data-hcms-shell]')) return
     }
     if (action === 'add') {
@@ -90,15 +99,15 @@ export function bindEvents(ctx) {
     } else if (action === 'remove') {
       const itemEl = actionEl.closest('[data-hcms-card], [data-hcms-array-item]')
       if (!itemEl) return
-      onRemove(itemEl, ctx)
+      requestRemove(itemEl, ctx)
     } else if (action === 'move-up' || action === 'move-down') {
       const itemEl = actionEl.closest('[data-hcms-card], [data-hcms-array-item]')
       if (!itemEl) return
       onMove(itemEl, action === 'move-up' ? -1 : 1, ctx)
+    } else if (action === 'clear-upload') {
+      onClearUpload(actionEl, ctx)
     } else if (action === 'close') {
       ctx.onCloseRequested?.()
-    } else if (action === 'save') {
-      onSave(ctx)
     }
   }
 
@@ -115,10 +124,214 @@ export function bindEvents(ctx) {
   }
 }
 
+// Element PROPERTIES a form field projects to that fire NO MutationRecord, so
+// hyper-undo's observer can't see them (an input's live `value`, a checkbox's
+// `checked`). Text projections ARE observed (characterData) and need nothing
+// here. Kept narrow on purpose: the broader engine DOM_PROPERTIES_WRITE_SET
+// includes observable writes (innerHTML/outerHTML) we must NOT double-record.
+const UNOBSERVED_FIELD_PROPS = new Set(['value', 'checked'])
+
+// Resolve the page element + property a scalar field projects to, but ONLY for
+// the unobserved-property case above. `pathStr` is the field's FULL path (the
+// scalar field element carries data-hcms-path = full path, e.g. "name" or
+// "products.0.name"). Returns { el, prop, oldValue } captured from the live page
+// BEFORE the apply, or null when the projection is text, targets an array item
+// (the engine's ctx isn't pageRoot then), or can't be resolved.
+function resolveUnobservedProjection(ctx, pathStr) {
+  if (!pathStr) return null
+  const fullPath = pathFromString(pathStr)
+  // Array-item fields project under a per-item engine ctx, not pageRoot. Resolving
+  // pageRoot.querySelector(selector) would grab the wrong item, so skip — the edit
+  // simply keeps today's no-undo behavior rather than recording a wrong revert.
+  if (fullPath.some((seg) => typeof seg === 'number' || seg === '*')) return null
+  const rule = getRuleAtPath(ctx.pageRules, fullPath)
+  if (typeof rule !== 'string') return null
+  const at = rule.lastIndexOf('@')
+  if (at === -1) return null                       // text projection — observed
+  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
+  if (!el) return null
+  return { el, prop, oldValue: el[prop] }
+}
+
 export function onScalarChange(target, ctx) {
   const fieldEl = target.closest('[data-hcms-field]') || target
   const pathStr = fieldEl.closest('[data-hcms-path]')?.getAttribute('data-hcms-path') || ''
+  // Capture the projected page value BEFORE commit() overwrites it. Property
+  // writes (@value/@checked) leave no MutationRecord, so without recording them
+  // explicitly they produce no undo step (text projections are observed).
+  const proj = resolveUnobservedProjection(ctx, pathStr)
   commit(extractFormData(ctx), { path: pathStr, structural: false }, ctx)
+  if (proj) {
+    const u = (typeof window !== 'undefined' && window.hyperclay && window.hyperclay.undo) || null
+    if (u && typeof u.recordValue === 'function') {
+      u.recordValue(proj.el, { prop: proj.prop, oldValue: proj.oldValue, newValue: proj.el[proj.prop] })
+    }
+  }
+}
+
+// Crop adapter seam: ALL crop coupling lives here, between the file pick and
+// the upload. A field opts in via data-hcms-crop on the page element (copied
+// onto the built @image field by the form-builder); absent attr or absent
+// quickcrop (standalone page) uploads raw. Returns { file, dataURL? }, or null
+// to abort (crop cancelled / failed) — the caller resets the picker and skips
+// the commit. quickcrop resolves null on cancel (it does NOT reject), so the
+// cancel branch is the null check, not the catch.
+const CROP_OUTPUT = { type: 'image/webp', quality: 0.85, maxWidth: 2048, maxHeight: 2048 }
+
+async function maybeCrop(file, fieldEl) {
+  const attr = fieldEl && fieldEl.getAttribute ? fieldEl.getAttribute('data-hcms-crop') : null
+  if (attr == null) return { file }
+  const crop = (typeof window !== 'undefined' && window.hyperclay && window.hyperclay.quickcrop) || null
+  if (typeof crop !== 'function') return { file }
+  try {
+    const r = await crop(file, { aspect: parseCropAspect(attr), ...CROP_OUTPUT })
+    if (r === null) return null
+    return { file: blobToFile(r.blob, file.name), dataURL: r.dataURL }
+  } catch (err) {
+    showFieldUploadError(fieldEl, (err && err.message) || 'Crop failed')
+    return null
+  }
+}
+
+// "1:1" → 1, "16:9" → 16/9, "free" / "" / unparseable → null (freeform crop).
+// Exported for tests.
+export function parseCropAspect(value) {
+  const v = String(value ?? '').trim().toLowerCase()
+  if (v === '' || v === 'free') return null
+  const m = v.match(/^(\d+(?:\.\d+)?)\s*[:/]\s*(\d+(?:\.\d+)?)$/)
+  if (!m) return null
+  const w = parseFloat(m[1])
+  const h = parseFloat(m[2])
+  if (!w || !h) return null
+  return w / h
+}
+
+// quickcrop returns a nameless Blob; uploadFileBasic rejects raw Blobs and the
+// server keys content-type off the filename extension, so wrap it as a File
+// whose extension matches the encoded mime. Exported for tests.
+export function blobToFile(blob, originalName) {
+  const ext = blob.type === 'image/webp' ? '.webp' : blob.type === 'image/jpeg' ? '.jpg' : '.png'
+  const base = String(originalName || 'image').replace(/\.[^.]+$/, '')
+  try {
+    return new File([blob], base + ext, { type: blob.type })
+  } catch {
+    return blob
+  }
+}
+
+// A file was picked in an @file/@image widget. Optionally crop, upload via the
+// host's uploadFileBasic (or fall back to a local object-URL preview), write the
+// resulting URL into the bound img.src / a.href leaf, then commit once. The leaf
+// attribute change is an observed page mutation, so undo gets a clean step with
+// no commitWithUndo. Async; failures surface inline and reset the picker.
+export async function onUploadChange(inputEl, ctx) {
+  const file = inputEl.files && inputEl.files[0]
+  if (!file) return
+  const fieldEl = inputEl.closest('[data-hcms-path]')
+  if (!fieldEl) return
+  const pathStr = fieldEl.getAttribute('data-hcms-path') || ''
+
+  // A fresh pick is a fresh attempt: clear any stale inline error (e.g. a
+  // crop failure from a previous attempt) before running the new flow.
+  showFieldUploadError(fieldEl, null)
+
+  const cropped = await maybeCrop(file, fieldEl)
+  if (!cropped || ctx.closed) { resetPicker(inputEl); return }
+  const fileLike = cropped.file
+  const previewDataUrl = cropped.dataURL || null
+
+  const upload = (typeof window !== 'undefined' && window.hyperclay && window.hyperclay.uploadFileBasic) || null
+  let url = null
+  if (typeof upload === 'function') {
+    try {
+      const res = await upload(fileLike)
+      // uploadFileBasic resolves the full envelope { uploads:[{name,nodeId,url}], … };
+      // the served URL is uploads[0].url, NOT res.url.
+      url = res && res.uploads && res.uploads[0] && res.uploads[0].url
+    } catch (err) {
+      if (ctx.closed) { resetPicker(inputEl); return }
+      showFieldUploadError(fieldEl, (err && err.message) || 'Upload failed')
+      ctx.dispatch?.('hcms:error', { error: err, path: pathStr })
+      resetPicker(inputEl)
+      return
+    }
+  }
+  // The editor may have been closed while the upload was in flight; bail before
+  // writing the (now detached) form leaf or committing to the live page.
+  if (ctx.closed) { resetPicker(inputEl); return }
+  if (!url) {
+    // No host uploader (or it returned nothing): local preview only, which the
+    // commit persists into the page as a blob:/data: URL — non-persistent, by
+    // design (documented), so the widget still works in a bare page / demo.
+    url = previewDataUrl || makeLocalPreviewUrl(fileLike)
+  }
+  if (!url) { resetPicker(inputEl); return }
+
+  showFieldUploadError(fieldEl, null)
+  writeUploadLeaf(fieldEl, url, fileLike.name)
+  commit(extractFormData(ctx), { path: pathStr, structural: false }, ctx)
+  resetPicker(inputEl)
+}
+
+// The × on an upload widget. Clears the bound leaf to empty and commits, so the
+// :has()-driven chrome falls back to the empty state. Removes immediately (no
+// consent gate) per the approved design; distinct from the "remove" action,
+// which deletes a whole array item.
+export function onClearUpload(actionEl, ctx) {
+  const fieldEl = actionEl.closest('[data-hcms-path]')
+  if (!fieldEl) return
+  const pathStr = fieldEl.getAttribute('data-hcms-path') || ''
+  writeUploadLeaf(fieldEl, '', '')
+  const input = fieldEl.querySelector('input[type="file"][data-hcms-upload]')
+  if (input) resetPicker(input)
+  showFieldUploadError(fieldEl, null)
+  commit(extractFormData(ctx), { path: pathStr, structural: false }, ctx)
+}
+
+function findUploadLeaf(fieldEl) {
+  return fieldEl.querySelector
+    ? fieldEl.querySelector('img[data-hcms-field], a[data-hcms-field]')
+    : null
+}
+
+// Write a URL into the widget's bound leaf: an <img>'s src, or an <a>'s href
+// plus its visible filename text. Empty url clears to the empty state.
+function writeUploadLeaf(fieldEl, url, fileName) {
+  const leaf = findUploadLeaf(fieldEl)
+  if (!leaf) return
+  const tag = (leaf.tagName || '').toUpperCase()
+  if (tag === 'IMG') {
+    leaf.src = url || ''
+  } else if (tag === 'A') {
+    leaf.href = url || ''
+    leaf.textContent = url ? (fileName || fileNameFromUrl(url)) : ''
+  }
+}
+
+function resetPicker(inputEl) {
+  // Clear the selection so re-picking the same file fires `change` again.
+  try { inputEl.value = '' } catch { /* some inputs reject programmatic clear */ }
+}
+
+function makeLocalPreviewUrl(file) {
+  const U = (typeof URL !== 'undefined' && URL.createObjectURL) ? URL : null
+  if (!U) return ''
+  try { return U.createObjectURL(file) } catch { return '' }
+}
+
+function showFieldUploadError(fieldEl, message) {
+  const slot = fieldEl.querySelector ? fieldEl.querySelector(':scope > .hcms-error') : null
+  if (!slot) return
+  if (message) {
+    slot.textContent = message
+    slot.hidden = false
+  } else {
+    slot.textContent = ''
+    slot.hidden = true
+  }
 }
 
 export function onAdd(arrayPath, ctx) {
@@ -148,6 +361,9 @@ export function onAdd(arrayPath, ctx) {
     pathArr: [...pathArr, nextIndex],
     data: itemData,
     doc: ctx.doc,
+    // Component arrays (chips) record their item-template key at build time so
+    // added items keep the same chrome.
+    itemKey: arrayEl.getAttribute('data-hcms-item-tpl') || null,
   })
   slot.appendChild(itemNode)
   updateArrayButtonsVisibility(arrayEl)
@@ -186,6 +402,51 @@ export function onMove(itemEl, direction, ctx) {
   )
 }
 
+const DEFAULT_CONFIRM_REMOVE = 'Delete this item?'
+
+// Resolve whether removing an item from `arrayEl` should confirm first, and with
+// what prompt. Most specific wins: a per-array `data-hcms-confirm-remove`
+// attribute (a string overrides the prompt; "off"/"false"/"no"/"0" disables that
+// one array), then the global `confirmRemove` open() option (a string overrides
+// the prompt, true forces every list, false disables everything), then the
+// built-in default. The default confirms card removals (object-array items hold
+// several fields) and leaves scalar-array chips instant. Returns the prompt to
+// confirm with, or null to remove without asking.
+function resolveRemoveConfirm(arrayEl, ctx) {
+  const attr = arrayEl && arrayEl.getAttribute('data-hcms-confirm-remove')
+  if (attr != null) {
+    if (/^(off|false|no|0)$/i.test(attr.trim())) return null
+    return attr || DEFAULT_CONFIRM_REMOVE
+  }
+  const global = ctx && ctx.confirmRemove
+  if (global === false) return null
+  if (typeof global === 'string') return global || DEFAULT_CONFIRM_REMOVE
+  if (global === true) return DEFAULT_CONFIRM_REMOVE
+  return arrayEl && arrayEl.getAttribute('data-hcms-shape') === 'object-array'
+    ? DEFAULT_CONFIRM_REMOVE
+    : null
+}
+
+// Built-in delete confirmation: every list-item removal routes through here so
+// the policy applies uniformly. Confirmation uses hyperclay's consent() (the
+// styled modal) when the host page provides it, falls back to native confirm(),
+// and proceeds when neither exists (non-browser). Programmatic api.removeItem()
+// bypasses this by calling onRemove directly, the way undo treats deliberate
+// actions.
+export function requestRemove(itemEl, ctx) {
+  const arrayEl = itemEl.closest('[data-hcms-shape="object-array"], [data-hcms-shape="scalar-array"]')
+  const message = resolveRemoveConfirm(arrayEl, ctx)
+  if (message == null) return onRemove(itemEl, ctx)
+  const consent = typeof window !== 'undefined' && (window.hyperclay?.consent || window.consent)
+  if (typeof consent === 'function') {
+    Promise.resolve(consent(message)).then(() => onRemove(itemEl, ctx), () => {})
+  } else if (typeof window !== 'undefined' && typeof window.confirm === 'function') {
+    if (window.confirm(message)) onRemove(itemEl, ctx)
+  } else {
+    onRemove(itemEl, ctx)
+  }
+}
+
 export function onRemove(itemEl, ctx) {
   const path = itemEl.getAttribute('data-hcms-path') || ''
   const parent = itemEl.parentElement
@@ -208,12 +469,6 @@ export function onRemove(itemEl, ctx) {
   )
 }
 
-export function onSave(ctx) {
-  const data = extractFormData(ctx)
-  ctx.dispatch?.('hcms:save', { data })
-  ctx.onSave?.(data)
-}
-
 export function commit(newData, info, ctx) {
   const fingerprint = stableStringify(newData)
   if (fingerprint === ctx.lastFingerprint) return { ok: true, skipped: true }
@@ -412,6 +667,16 @@ export function restampAllSiblings(formRoot) {
 }
 
 function restampSiblingPaths(parent) {
+  // Radio names are rewritten one item at a time below, so during a move or
+  // drag a just-renamed radio can transiently share a name with a
+  // not-yet-renamed sibling — and the browser enforces single-selection per
+  // group AT THAT INSTANT, permanently unchecking one of them (null extract →
+  // the whole-form commit clobbers that field's page value). Snapshot every
+  // radio's checked state and re-assert it once all names are final (and
+  // unique per field) again.
+  const radios = parent.querySelectorAll
+    ? Array.from(parent.querySelectorAll('input[type="radio"][data-hcms-field]'), (r) => [r, r.checked])
+    : []
   let i = 0
   for (const child of parent.children) {
     if (!child.matches?.('[data-hcms-card], [data-hcms-array-item]')) continue
@@ -423,6 +688,9 @@ function restampSiblingPaths(parent) {
     if (newPath !== path) restampSubtree(child, path, newPath)
     i++
   }
+  for (const [r, wasChecked] of radios) {
+    if (r.checked !== wasChecked) r.checked = wasChecked
+  }
 }
 
 function restampSubtree(root, oldPrefix, newPrefix) {
@@ -436,6 +704,22 @@ function restampSubtree(root, oldPrefix, newPrefix) {
       el.setAttribute('data-hcms-path', newPrefix + p.slice(oldPrefix.length))
     }
   }
+  syncRadioGroupNames(root)
+}
+
+// Radio group names derive from the field path at build time (populateOptions),
+// so a restamp that moves paths must recompute them. Otherwise a removed-then-
+// re-added sibling gets a fresh name that collides with this item's stale one:
+// the two fields share a browser radio group, checking one unchecks the other,
+// and the whole-form commit clobbers the unchecked field's page value. Only
+// names the builder minted ('hcms-' prefix) are touched — radios in inline or
+// custom templates keep whatever name the author gave them.
+function syncRadioGroupNames(root) {
+  for (const input of root.querySelectorAll('input[type="radio"][data-hcms-field]')) {
+    if (!input.name || !input.name.startsWith('hcms-')) continue
+    const host = input.closest('[data-hcms-path]')
+    if (host) input.name = radioGroupName(host.getAttribute('data-hcms-path'))
+  }
 }
 
 function stableStringify(value) {