@panphora/hyper-cms 0.11.6 → 0.12.0

package/src/toggle.js

@@ -1,8 +1,10 @@
 // Floating bottom-right button that toggles the CMS open/closed, so a page
 // owner can reopen the CMS after closing it (the shell's X is the only other
-// affordance, and nothing reopens it). Injected at page load only when the
-// visitor is in edit mode AND the page actually has cms rules, so regular
-// visitors and rules-less pages (hypercms rides in broad presets) never see it.
+// affordance, and nothing reopens it). Injected at page load when the visitor
+// may edit AND the page actually has cms rules, so regular visitors and
+// rules-less pages (hypercms rides in broad presets) never see it. On a ClayJS
+// page "may edit" is clay.canEdit alone: view mode is where the toggle is
+// needed most, since it is the way into editing.
 // Runtime-only chrome: no-save + snapshot-remove keep it out of every save and
 // snapshot (a static no-save element written into the file would be stripped
 // from disk on the first save), save-ignore keeps it out of autosave/undo,
@@ -16,16 +18,9 @@
 // public custom property, so overriding still works. Everything cosmetic is a
 // normal declaration selected by [data-hcms-toggle-host], which an author's own
 // #hcms-toggle rule outranks on specificity.
-//
-// With two views to choose between it is a split button: the main button plus an
-// arrow that opens a menu. The arrow's background and the menu's whole geometry
-// are pinned for exactly the reason the host's position is — an unpinned arrow
-// goes transparent under a page's `button { background: none !important }`, and
-// an unpinned menu drops into the flow and shoves the page. The menu's `display`
-// is pinned too: [hidden] is a UA rule with no specificity, so any page rule
-// matching the element beats it and the menu would sit open forever.
 
 import { reensureStyles } from './shell.js'
+import { modeLifecycle } from './session.js'
 
 const TOGGLE_ID = 'hcms-toggle'
 const HOST_ATTR = 'data-hcms-toggle-host'
@@ -36,39 +31,9 @@ const STYLE_ATTR = 'data-hcms-toggle-style'
 // sets nothing on <body>, so a body-class label reads "Edit content" over an
 // open inline editor.
 const SESSION_ATTR = 'data-hcms-session'
-const SPLIT_ATTR = 'data-hcms-split'
-
-// The preference, one setting across the origin. No version suffix: there are
-// exactly two valid values and the membership check on read is what makes any
-// other value — a stale name, a hand-edited entry, a future view this build does
-// not have — read as first run rather than as a broken session.
-export const VIEW_STORAGE_KEY = 'hcms.view'
-const VIEW_NAMES = ['sidebar', 'inline']
-const VIEW_LABELS = { sidebar: 'In the sidebar', inline: 'On the page' }
 
 const SURFACE_VAR = 'var(--hcms-toggle-bg, var(--hcms-toggle-_surface))'
 
-export function readStoredView(win) {
-  try {
-    const value = win && win.localStorage ? win.localStorage.getItem(VIEW_STORAGE_KEY) : null
-    return VIEW_NAMES.includes(value) ? value : null
-  } catch (_) {
-    return null
-  }
-}
-
-// Written when someone picks a view, and only once that view is actually up: a
-// mount that throws must not teach the next page load to try the same broken
-// view. localStorage throws outright in a few configurations (Safari private
-// mode, cookies disabled), and a remembered view is a convenience, not a
-// requirement.
-export function writeStoredView(win, view) {
-  if (!VIEW_NAMES.includes(view)) return
-  try {
-    win?.localStorage?.setItem(VIEW_STORAGE_KEY, view)
-  } catch (_) {}
-}
-
 // The pill's surface is opaque and neutral, picked at inject time from the two
 // values below by whichever has more contrast against the page's own ink. It is
 // not a tint of currentColor: the button floats over a backdrop it cannot see,
@@ -89,8 +54,7 @@ export const TOGGLE_STYLE = `
 [${HOST_ATTR}][data-hcms-surface="dark"] {
   --hcms-toggle-_surface: ${SURFACE_DARK};
 }
-[${HOST_ATTR}] .hcms-toggle__main,
-[${HOST_ATTR}] .hcms-toggle__arrow {
+[${HOST_ATTR}] .hcms-toggle__main {
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
@@ -109,75 +73,22 @@ export const TOGGLE_STYLE = `
   cursor: pointer;
   box-shadow: none;
 }
-[${HOST_ATTR}] .hcms-toggle__main:hover,
-[${HOST_ATTR}] .hcms-toggle__arrow:hover {
+[${HOST_ATTR}] .hcms-toggle__main:hover {
   border-color: var(--mirk-focus-color, #C7AE93);
   box-shadow: none;
 }
-[${HOST_ATTR}] .hcms-toggle__main:active,
-[${HOST_ATTR}] .hcms-toggle__arrow:active {
+[${HOST_ATTR}] .hcms-toggle__main:active {
   border-color: var(--mirk-bevel-br, #E2D4BF) var(--mirk-bevel-tl, #F0E7D8) var(--mirk-bevel-tl, #F0E7D8) var(--mirk-bevel-br, #E2D4BF);
 }
-[${HOST_ATTR}] .hcms-toggle__main:focus-visible,
-[${HOST_ATTR}] .hcms-toggle__arrow:focus-visible {
+[${HOST_ATTR}] .hcms-toggle__main:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: -5px;
 }
 [${HOST_ATTR}] .hcms-toggle__close { display: none; }
 [${HOST_ATTR}][${SESSION_ATTR}="open"] .hcms-toggle__open { display: none; }
 [${HOST_ATTR}][${SESSION_ATTR}="open"] .hcms-toggle__close { display: inline; }
-[${HOST_ATTR}][${SPLIT_ATTR}] .hcms-toggle__main {
-  border-radius: 0;
-  padding-right: 12px;
-}
-[${HOST_ATTR}] .hcms-toggle__arrow {
-  gap: 0;
-  padding: 0 10px;
-  border-radius: 0;
-  border-left-width: 0;
-}
-[${HOST_ATTR}] .hcms-toggle__menu {
-  all: unset;
-  box-sizing: border-box;
-  min-width: 180px;
-  padding: 4px;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--hcms-toggle-color, currentColor);
-  background: ${SURFACE_VAR};
-  border: 1px solid var(--mirk-input-border, #D8C8AF);
-  border-radius: var(--mirk-radius, 5px);
-  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .45);
-}
-[${HOST_ATTR}] .hcms-toggle__item {
-  all: unset;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  padding: 9px 10px;
-  border-radius: 0;
-  cursor: pointer;
-}
-[${HOST_ATTR}] .hcms-toggle__item::before {
-  content: "○";
-  margin-right: 8px;
-  opacity: .55;
-}
-[${HOST_ATTR}] .hcms-toggle__item[aria-checked="true"]::before {
-  content: "●";
-  opacity: 1;
-}
-[${HOST_ATTR}] .hcms-toggle__item:hover {
-  background: color-mix(in srgb, currentColor 12%, transparent);
-}
-[${HOST_ATTR}] .hcms-toggle__item:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: -3px;
-}
 @media (pointer: coarse) {
-  [${HOST_ATTR}] .hcms-toggle__main,
-  [${HOST_ATTR}] .hcms-toggle__arrow { min-height: 44px; }
+  [${HOST_ATTR}] .hcms-toggle__main { min-height: 44px; }
 }
 `
 
@@ -385,7 +296,7 @@ function scheduleSurface(host) {
   }
 }
 
-export function injectToggle({ open, close, isOpen, getTheme = () => null, views = VIEW_NAMES }, doc = document) {
+export function injectToggle({ open, close, isOpen, getTheme = () => null }, doc = document) {
   const existing = doc.querySelector(`[${HOST_ATTR}]`)
   if (existing) return existing
 
@@ -419,21 +330,7 @@ export function injectToggle({ open, close, isOpen, getTheme = () => null, views
     '<span class="hcms-toggle__close">Close editor</span>' +
     '</button>'
 
-  const win = doc.defaultView
   const main = host.querySelector('.hcms-toggle__main')
-  // Fixed order, so the menu does not reorder itself from page to page, and
-  // filtered against the views this build actually has.
-  const available = VIEW_NAMES.filter((name) => views.includes(name))
-  // An arrow offering a choice of one is a menu that can only repeat what the
-  // button already does, so with a single view there is no arrow at all.
-  const split = available.length > 1
-  const arrow = split ? makeArrow(doc) : null
-  const menu = split ? makeMenu(doc, available) : null
-  if (split) {
-    host.setAttribute(SPLIT_ATTR, '')
-    host.appendChild(arrow)
-    host.appendChild(menu)
-  }
 
   // The only declarations a page's `* { ... !important }` reset can take from
   // us and leave the control broken rather than merely ugly. Each reads its
@@ -445,100 +342,40 @@ export function injectToggle({ open, close, isOpen, getTheme = () => null, views
     'z-index': 'var(--hcms-toggle-z, 2147482900)',
   })
   pin(main, { background: SURFACE_VAR })
-  if (arrow) pin(arrow, { background: SURFACE_VAR })
-  if (menu) {
-    pin(menu, {
-      position: 'absolute',
-      right: '0',
-      bottom: 'calc(100% + 8px)',
-      'z-index': 'var(--hcms-toggle-z, 2147482900)',
-      display: 'none',
-    })
-  }
-
-  const items = () => (menu ? [...menu.querySelectorAll('[role="menuitemradio"]')] : [])
-
-  function focusEl(el) {
-    if (!el || typeof el.focus !== 'function') return
-    try { el.focus({ preventScroll: true }) } catch (_) { el.focus() }
-  }
-
-  function focusItem(index) {
-    const list = items()
-    if (!list.length) return
-    focusEl(list[(index + list.length) % list.length])
-  }
 
-  // Read fresh every time the menu opens: the selection made two clicks ago is
-  // the one the radio should be sitting on.
-  function markChecked() {
-    const stored = readStoredView(win)
-    for (const item of items()) {
-      item.setAttribute('aria-checked', String(item.getAttribute('data-hcms-view') === stored))
-    }
-  }
-
-  function onOutsidePointer(event) {
-    if (host.contains(event.target)) return
-    closeMenu()
-  }
-
-  function setMenuOpen(show) {
-    if (!menu) return
-    menu.hidden = !show
-    pin(menu, { display: show ? 'block' : 'none' })
-    arrow.setAttribute('aria-expanded', String(show))
-    if (show) {
-      markChecked()
-      // Capture, so a page that swallows pointer events on the way up cannot
-      // leave the menu standing open over content it no longer belongs to.
-      doc.addEventListener('pointerdown', onOutsidePointer, true)
-    } else {
-      doc.removeEventListener('pointerdown', onOutsidePointer, true)
-    }
-  }
-
-  function openMenu(index = 0) {
-    setMenuOpen(true)
-    focusItem(index)
-  }
-
-  function closeMenu({ focusArrow = false } = {}) {
-    if (!menu || menu.hidden) return
-    setMenuOpen(false)
-    if (focusArrow) focusEl(arrow)
-  }
-
-  // A remembered view this page cannot render is ignored HERE and left in
-  // storage: the preference belongs to the person, not to the page, and the
-  // next page may well be able to honour it.
-  function rememberedView() {
-    const stored = readStoredView(win)
-    return stored && available.includes(stored) ? stored : null
+  function requestMode(mode) {
+    const win = doc.defaultView
+    if (!modeLifecycle(win)) return null
+    const setMode = win.clay && win.clay.setMode
+    if (typeof setMode !== 'function') return null
+    return setMode.call(win.clay, mode)
   }
 
-  // The one path that writes the preference, because it is the one where the
-  // person chose. After the open, never before: a mount that throws leaves the
-  // preference exactly as it was.
-  async function chooseView(name) {
-    await open({ view: name })
-    writeStoredView(win, name)
+  // The mode the page is actually in. clay.mode is a live getter over the
+  // committed facts, so it answers the same in view and after a live switch.
+  function currentMode() {
+    const win = doc.defaultView
+    return win && win.clay ? win.clay.mode : null
   }
 
   async function mainAction() {
     if (isOpen()) {
+      const exit = requestMode('view')
+      if (exit) return exit
       close()
       return
     }
-    const remembered = rememberedView()
-    if (remembered) return open({ view: remembered })
-    // First run. With a real choice to make the button asks rather than
-    // guessing; with one view there is nothing to ask.
-    if (split) return openMenu()
-    // Opening the only view a page has is not a choice, so it is not
-    // remembered: writing it here would take the preference away from every
-    // page that does offer both, which is deletion by another name.
-    return open(available[0] ? { view: available[0] } : {})
+    // Already in edit: the CMS is the only thing left to do, and the page is
+    // already writable.
+    if (currentMode() === 'edit') return open()
+    // In view the switch comes first and the CMS only after it committed. A
+    // refusal (busy, not-allowed, save-failed) leaves the CMS closed, since a
+    // page that never became writable cannot host it.
+    const enter = requestMode('edit')
+    if (!enter) return open()
+    const receipt = await enter
+    if (receipt && receipt.ok === false) return
+    return open()
   }
 
   async function run(action) {
@@ -550,63 +387,11 @@ export function injectToggle({ open, close, isOpen, getTheme = () => null, views
   }
 
   // Delegated, so both a real click on the inner button and a programmatic
-  // host.click() fire exactly once. The arrow and the menu own their own
-  // clicks, which bubble through here on their way out.
-  host.addEventListener('click', async (event) => {
-    if (arrow && arrow.contains(event.target)) return
-    if (menu && menu.contains(event.target)) return
+  // host.click() fire exactly once.
+  host.addEventListener('click', async () => {
     await run(mainAction)
   })
 
-  if (arrow) {
-    arrow.addEventListener('click', (event) => {
-      event.preventDefault()
-      if (menu.hidden) openMenu()
-      else closeMenu({ focusArrow: true })
-    })
-    arrow.addEventListener('keydown', (event) => {
-      if (event.key === 'ArrowUp') {
-        event.preventDefault()
-        openMenu(-1)
-        return
-      }
-      // preventDefault on Enter and Space stops the button's own activation
-      // click, which would otherwise arrive and toggle the menu straight back
-      // shut.
-      if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault()
-        openMenu(0)
-      }
-    })
-    menu.addEventListener('click', (event) => {
-      const item = event.target.closest?.('[role="menuitemradio"]')
-      if (!item) return
-      event.preventDefault()
-      closeMenu()
-      run(() => chooseView(item.getAttribute('data-hcms-view')))
-    })
-    menu.addEventListener('keydown', (event) => {
-      const list = items()
-      const current = list.indexOf(doc.activeElement)
-      switch (event.key) {
-        case 'ArrowDown': event.preventDefault(); focusItem(current + 1); break
-        case 'ArrowUp': event.preventDefault(); focusItem(current - 1); break
-        case 'Home': event.preventDefault(); focusItem(0); break
-        case 'End': event.preventDefault(); focusItem(list.length - 1); break
-        case 'Enter':
-        case ' ':
-          event.preventDefault()
-          if (current === -1) break
-          closeMenu()
-          run(() => chooseView(list[current].getAttribute('data-hcms-view')))
-          break
-        case 'Escape': event.preventDefault(); closeMenu({ focusArrow: true }); break
-        // No preventDefault: Tab leaves the menu, it does not cycle inside it.
-        case 'Tab': closeMenu(); break
-      }
-    })
-  }
-
   // Which label the main button shows, and nothing else decides it. hcms:close
   // fires BEFORE the session is torn down, so isOpen() still answers true inside
   // that handler: the event says what happened and re-asking would leave the
@@ -628,54 +413,53 @@ export function injectToggle({ open, close, isOpen, getTheme = () => null, views
   return host
 }
 
-function makeArrow(doc) {
-  const arrow = doc.createElement('button')
-  arrow.type = 'button'
-  arrow.className = 'hcms-toggle__arrow mirk-button'
-  arrow.setAttribute('aria-haspopup', 'menu')
-  arrow.setAttribute('aria-expanded', 'false')
-  // The arrow is a glyph, so unlike the main button it has no visible text to
-  // take its accessible name from.
-  arrow.setAttribute('aria-label', 'Choose where to edit')
-  arrow.textContent = '▾'
-  return arrow
-}
-
-function makeMenu(doc, available) {
-  const menu = doc.createElement('div')
-  menu.className = 'hcms-toggle__menu'
-  menu.setAttribute('role', 'menu')
-  menu.setAttribute('aria-label', 'Where to edit')
-  menu.hidden = true
-  for (const name of available) {
-    const item = doc.createElement('button')
-    item.type = 'button'
-    item.className = 'hcms-toggle__item'
-    // menuitemradio, not menuitem: the two are one choice with one answer, and
-    // the remembered one is checked.
-    item.setAttribute('role', 'menuitemradio')
-    item.setAttribute('aria-checked', 'false')
-    item.setAttribute('data-hcms-view', name)
-    // Roving focus: the menu is entered from the arrow and moved through with
-    // the arrow keys, never tabbed into item by item.
-    item.tabIndex = -1
-    item.textContent = VIEW_LABELS[name]
-    menu.appendChild(item)
-  }
-  return menu
-}
-
 // Inject at page load when in edit mode and the page has cms rules. DOM-ready
 // deferral matters when the module evaluates while the document is still
 // parsing (the rules tag or <body> may not exist yet).
 export function maybeInjectToggle(api) {
   if (typeof window === 'undefined' || typeof document === 'undefined') return
-  const forced = window.__hyperclayEditMode != null ? window.__hyperclayEditMode : null
-  if (!detectEditMode({ search: window.location.search, cookie: document.cookie, forced })) return
+  // On a ClayJS page the toggle is the way INTO editing, so it is mounted exactly
+  // when ClayJS says the person may edit (clay.canEdit), in view as well as in
+  // edit. That permission can arrive after load, and ClayJS announces every
+  // change of it with clay:capabilitychange on the document: the first change to
+  // canEdit === true mounts, and losing it afterwards takes the toggle away.
+  // Without ClayJS the boot global keeps deciding, exactly as before.
+  const clay = window.clay
+  const managed = !!clay && typeof clay.setMode === 'function'
   const run = () => { if (document.body && api.hasRules(document)) injectToggle(api) }
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', run, { once: true })
-  } else {
-    run()
+  const atDomReady = (fn) => {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', fn, { once: true })
+    } else {
+      fn()
+    }
+  }
+  if (managed) {
+    // A page that loads ClayJS's menu opens the CMS from there, so the toggle stays away
+    // while that menu is planned, and comes back only if the menu fails to load.
+    let menuFailed = false
+    const menuOwnsLauncher = () => {
+      const plugins = window.clay && window.clay.plugins
+      return !menuFailed && Array.isArray(plugins) && plugins.includes('menu')
+    }
+    const sync = () => {
+      if (window.clay && window.clay.canEdit === true && !menuOwnsLauncher()) {
+        run()
+        return
+      }
+      const host = document.querySelector(`[${HOST_ATTR}]`)
+      if (host) host.remove()
+    }
+    atDomReady(sync)
+    document.addEventListener('clay:capabilitychange', sync)
+    document.addEventListener('clay:plugin-failed', (event) => {
+      if (!event.detail || event.detail.plugin !== 'menu') return
+      menuFailed = true
+      sync()
+    })
+    return
   }
+  const forced = window.__hyperclayEditMode != null ? window.__hyperclayEditMode : null
+  if (!detectEditMode({ search: window.location.search, cookie: document.cookie, forced })) return
+  atDomReady(run)
 }

package/src/variant-control.js

@@ -0,0 +1,46 @@
+import { VARIANT_ICONS } from './catalogs/variant-icons.js'
+import { humanize } from './templates.js'
+
+// "2:cols-2" → { value: '2', icon: 'cols-2' }; a bare "cards" → its own icon
+// when one exists. Split on the first colon only, so a value never loses text.
+export function parseVariantOptions(tokens) {
+  return (tokens || []).map((token) => {
+    const colon = token.indexOf(':')
+    const value = colon === -1 ? token : token.slice(0, colon)
+    const iconName = colon === -1 ? token : token.slice(colon + 1)
+    const icon = VARIANT_ICONS[iconName] || null
+    return { value, icon, label: icon ? icon.label : humanize(value) }
+  })
+}
+
+// Build one native radio per option from the template's prototype row. The
+// current value is prepended when it is not offered, so opening the editor
+// never silently changes the page.
+export function populateVariant(node, { tokens, value, name, doc }) {
+  const options = parseVariantOptions(tokens)
+  const current = value == null ? '' : String(value)
+  if (current !== '' && !options.some((o) => o.value === current)) {
+    options.unshift({ value: current, icon: null, label: humanize(current) })
+  }
+  const proto = node.querySelector('.hcms-variant-option')
+  if (!proto || !proto.parentNode) return options.length
+  for (const o of options) {
+    const row = proto.cloneNode(true)
+    const input = row.querySelector('input[type="radio"]')
+    if (input) {
+      input.value = o.value
+      input.name = name
+    }
+    const iconSlot = row.querySelector('.hcms-variant-icon')
+    if (iconSlot) {
+      if (o.icon) iconSlot.innerHTML = o.icon.svg
+      else iconSlot.remove()
+    }
+    const label = row.querySelector('.hcms-variant-label')
+    if (label) label.textContent = o.label
+    row.setAttribute('title', o.label)
+    proto.parentNode.insertBefore(row, proto)
+  }
+  proto.remove()
+  return options.length
+}