@panphora/hyper-cms 0.11.6 → 0.13.0

package/src/templates.js

@@ -1,6 +1,10 @@
 import { ruleAttrIndex } from 'hyper-html-api/engine'
 import { getRuleAtPath } from './path.js'
 
+// --font-* names that hold something other than a family (Tailwind 4 uses
+// --font-weight-*, many pages use --font-size-*), so they never get the font menu.
+const NOT_A_FAMILY = /^--font-(size|weight|style|stretch|variant|feature-settings|variation-settings|optical-sizing|kerning|synthesis|smoothing|palette|size-adjust|display)(-|$)/
+
 export function humanize(key) {
   return key
     .replace(/([a-z])([A-Z])/g, '$1 $2')
@@ -194,6 +198,59 @@ const DEFAULT_TEMPLATES = {
       <div class="hcms-error" hidden></div>
     </label>
   `,
+  // @color: the hidden input is the field (the form commits it like any
+  // scalar); swatches, the current chip and the custom inputs are built and
+  // painted by color-control.js.
+  '@color': `
+    <div class="hcms-field hcms-color" data-hcms-shape="scalar">
+      <span class="hcms-label" data-hcms-label></span>
+      <input type="hidden" data-hcms-field />
+      <div class="hcms-color-row">
+        <button type="button" class="hcms-color-current" data-hcms-action="color-panel" aria-expanded="false">
+          <span class="hcms-color-chip"></span>
+          <span class="hcms-color-name"></span>
+        </button>
+        <button type="button" class="hcms-color-clear" data-hcms-action="color-clear" aria-label="Clear color">${CLOSE_ICON}</button>
+      </div>
+      <div class="hcms-color-panel" hidden>
+        <div class="hcms-color-grid"></div>
+        <div class="hcms-color-custom">
+          <input type="color" class="hcms-color-native" data-hcms-color-input="native" aria-label="Pick a custom color" />
+          <input class="mirk-input hcms-color-text" data-hcms-color-input="text" spellcheck="false" autocomplete="off" placeholder="Any CSS color" aria-label="Custom color" />
+        </div>
+      </div>
+      <div class="hcms-error" hidden></div>
+    </div>
+  `,
+  '@font': `
+    <div class="hcms-field hcms-font" data-hcms-shape="scalar">
+      <span class="hcms-label" data-hcms-label></span>
+      <input type="hidden" data-hcms-field />
+      <button type="button" class="hcms-font-current" data-hcms-action="font-panel" aria-haspopup="listbox" aria-expanded="false">
+        <span class="hcms-font-name"></span>
+        <span aria-hidden="true" class="hcms-font-chevron">›</span>
+      </button>
+      <div class="hcms-font-panel" hidden>
+        <div class="hcms-font-list" role="listbox"></div>
+      </div>
+      <div class="hcms-error" hidden></div>
+    </div>
+  `,
+  // @variant: a radio group of layout choices, each an icon plus a label; the
+  // page's own CSS keys on the attribute the choice writes.
+  '@variant': `
+    <div class="hcms-field hcms-variant" data-hcms-shape="scalar">
+      <span class="hcms-label" data-hcms-label></span>
+      <div class="hcms-variant-row" role="radiogroup">
+        <label class="hcms-variant-option">
+          <input type="radio" class="mirk-sr-only" data-hcms-field />
+          <span class="hcms-variant-icon"></span>
+          <span class="hcms-variant-label"></span>
+        </label>
+      </div>
+      <div class="hcms-error" hidden></div>
+    </div>
+  `,
   '@chips': `
     <div class="hcms-field hcms-chips" data-hcms-shape="scalar-array">
       <span class="hcms-label" data-hcms-label></span>
@@ -247,7 +304,9 @@ export function injectComponentTemplate(doc, key) {
 // "true" helps nobody). @href is NOT inferred: editing a link/URL is far more
 // common than uploading a file, so an a@href rule stays a plain URL field and
 // the file upload is opt-in. Suffix is split like the engine (ruleAttrIndex,
-// see engine/extract.js). Returns a DEFAULT_TEMPLATES key.
+// see engine/extract.js). A custom property named --color or --color-* infers
+// the color picker; --font / --font-* infers the font menu. Returns a
+// DEFAULT_TEMPLATES key.
 const PROP_TO_COMPONENT = { src: '@image', checked: '@checkbox', innerHTML: '@richtext' }
 // data-hcms-component values for scalar rules. "chips" is array-only (below).
 const SCALAR_COMPONENT_BY_NAME = {
@@ -260,6 +319,9 @@ const SCALAR_COMPONENT_BY_NAME = {
   textarea: '@textarea',
   number: '@number',
   richtext: '@richtext',
+  color: '@color',
+  font: '@font',
+  variant: '@variant',
 }
 // Every opt-in component injects on demand; only the 6 shape templates are
 // always present.
@@ -273,7 +335,7 @@ export function componentForScalarRule(rule, doc, pathArr, pageRules) {
   if (typeof rule !== 'string') return '@scalar'
   const at = ruleAttrIndex(rule)
   const host = hostSelectorOf(rule, at, pathArr, pageRules)
-  const override = readElementAttr(host, doc, 'data-hcms-component')
+  const override = readRuleAttr(rule, at, pathArr, pageRules, doc, 'data-hcms-component')
   if (override && SCALAR_COMPONENT_BY_NAME[override]) {
     const key = SCALAR_COMPONENT_BY_NAME[override]
     // Value guards check exactly the elements the engine binds: under an array
@@ -296,6 +358,8 @@ export function componentForScalarRule(rule, doc, pathArr, pageRules) {
   if (at >= 0) {
     const prop = rule.slice(at + 1)
     if (PROP_TO_COMPONENT[prop]) return PROP_TO_COMPONENT[prop]
+    if (/^--color(-|$)/.test(prop) && prop !== '--color-scheme') return '@color'
+    if (/^--font(-|$)/.test(prop) && !NOT_A_FAMILY.test(prop)) return '@font'
   }
   return '@scalar'
 }
@@ -307,10 +371,24 @@ export function componentForScalarRule(rule, doc, pathArr, pageRules) {
 export function declaredComponentKey(rule, doc, pathArr, pageRules) {
   if (typeof rule !== 'string') return null
   const at = ruleAttrIndex(rule)
-  const name = readElementAttr(hostSelectorOf(rule, at, pathArr, pageRules), doc, 'data-hcms-component')
+  const name = readRuleAttr(rule, at, pathArr, pageRules, doc, 'data-hcms-component')
   return (name && SCALAR_COMPONENT_BY_NAME[name]) || null
 }
 
+// Style fields (color, font, variant) are grouped apart from content. One bound
+// to html, body or :root outside any list styles the whole page ('page'); any
+// other styles its own element ('section'). Content fields return null.
+const STYLE_COMPONENTS = new Set(['@color', '@font', '@variant'])
+const PAGE_HOSTS = new Set(['html', 'body', ':root'])
+
+export function styleRole(rule, doc, pathArr, pageRules) {
+  if (typeof rule !== 'string' || rule.endsWith('[]')) return null
+  if (!STYLE_COMPONENTS.has(componentForScalarRule(rule, doc, pathArr, pageRules))) return null
+  const inList = Array.isArray(pathArr) && pathArr.some((s) => s === '*' || typeof s === 'number')
+  const selector = scalarSelectorOf(rule, ruleAttrIndex(rule)).trim()
+  return !inList && PAGE_HOSTS.has(selector) ? 'page' : 'section'
+}
+
 // A number input physically rejects any value that isn't a plain number — it
 // reads back '' — and the whole-form commit would then blank the page value on
 // the next edit of ANY field. When any bound value isn't number-shaped, fall
@@ -416,7 +494,7 @@ export function winningScalarArrayComponent(rule, pathArr, doc) {
 export function readOptionsOverride(rule, doc, pathArr, pageRules) {
   if (typeof rule !== 'string') return null
   const at = ruleAttrIndex(rule)
-  const raw = readElementAttr(hostSelectorOf(rule, at, pathArr, pageRules), doc, 'data-hcms-options')
+  const raw = readRuleAttr(rule, at, pathArr, pageRules, doc, 'data-hcms-options')
   if (raw == null) return null
   const tokens = raw.trim().split(/\s+/).filter(Boolean)
   return tokens.length ? tokens : null
@@ -428,7 +506,7 @@ export function readOptionsOverride(rule, doc, pathArr, pageRules) {
 export function readCropOverride(rule, doc, pathArr, pageRules) {
   if (typeof rule !== 'string') return null
   const at = ruleAttrIndex(rule)
-  return readElementAttr(hostSelectorOf(rule, at, pathArr, pageRules), doc, 'data-hcms-crop')
+  return readRuleAttr(rule, at, pathArr, pageRules, doc, 'data-hcms-crop')
 }
 
 function scalarSelectorOf(rule, at) {
@@ -493,6 +571,22 @@ function readElementAttr(selector, doc, attrName) {
   return el && el.getAttribute ? el.getAttribute(attrName) : null
 }
 
+// The authoring attribute for ONE rule. An element can carry several rules
+// (<html> holds every theme property), so data-hcms-component:--color-accent
+// names the control for the @--color-accent rule alone and wins over the plain
+// attribute. The plain attribute never applies to a @--* rule: it describes the
+// element's own value, not a CSS variable stored on it.
+function readRuleAttr(rule, at, pathArr, pageRules, doc, attrName) {
+  const host = hostSelectorOf(rule, at, pathArr, pageRules)
+  const prop = at >= 0 ? rule.slice(at + 1) : null
+  if (prop) {
+    const scoped = readElementAttr(host, doc, `${attrName}:${prop}`)
+    if (scoped != null) return scoped
+    if (prop.startsWith('--')) return null
+  }
+  return readElementAttr(host, doc, attrName)
+}
+
 // Pre-inject the component templates this page's rules actually select, so
 // both deriveFormRules (selectors) and buildForm (DOM) resolve them. Walks the
 // same rule shapes as buildTemplateMap; idempotent and author-template-safe.
@@ -604,7 +698,7 @@ export function buildTemplateMap(pageRules, doc) {
     const winningComp = shape === 'scalar-array' ? winningScalarArrayComponent(rule, pathArr, doc) : null
     const defaultKey =
       shape === 'scalar'
-        ? componentForScalarRule(rule, doc, pathArr)
+        ? componentForScalarRule(rule, doc, pathArr, pageRules)
         : (arrayComp && arrayComp.array) || SHAPE_TO_DEFAULT_KEY[shape] || '@scalar'
 
     let tpl =

package/src/theme/pixel-quiet.overrides.css

@@ -140,20 +140,14 @@
   box-shadow: 16px 0 48px -28px rgba(43, 36, 27, 0.45);
 }
 
-/* Push the page over so docked content is never hidden underneath, and publish
-   the geometry the floating toggle has to compose with. --hcms-toggle-shift is
-   the distance the toggle moves left, which is the shell width only while the
-   shell is docked on the right; docked left, as an overlay, or full-viewport it
-   is zero. */
+/* Push the page over so docked content is never hidden underneath. */
 body.hcms-open { --hcms-shell-width: 380px; }
 body.hcms-open:not(.hcms-overlay) { padding-right: var(--hcms-shell-width); }
-body.hcms-open:not(.hcms-overlay):not(.hcms-side-left) { --hcms-toggle-shift: var(--hcms-shell-width); }
 body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: var(--hcms-shell-width); }
-body.hcms-open.hcms-overlay { overflow: hidden; --hcms-toggle-display: none; }
+body.hcms-open.hcms-overlay { overflow: hidden; }
 
 @media (max-width: 799px) {
   body.hcms-open { --hcms-shell-width: 100vw; }
-  body.hcms-open:not(.hcms-overlay):not(.hcms-side-left) { --hcms-toggle-shift: 0px; }
   body.hcms-open:not(.hcms-overlay),
   body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: 0; }
   body.hcms-open { overflow: hidden; }
@@ -458,6 +452,94 @@ body.hcms-open.hcms-overlay { overflow: hidden; --hcms-toggle-display: none; }
   color: var(--mirk-placeholder-color);
 }
 
+/* ---------- COLOR (@color) ----------
+   Swatch colors arrive as --hcms-swatch on each element's style, so a value
+   never becomes a selector or a class. The full palette is an 11-column grid
+   (one row per hue); a narrowed set wraps. */
+.hcms-color-row { display: flex; align-items: center; gap: 8px; }
+.hcms-color-current {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 4px 12px 4px 4px; border: 1px solid var(--mirk-input-border); border-radius: 999px;
+  background: var(--mirk-input-bg); color: var(--mirk-fg); font: inherit; cursor: pointer;
+}
+.hcms-color--inline .hcms-color-current { cursor: default; }
+.hcms-color-chip, .hcms-color-swatch { background: var(--hcms-swatch, transparent); }
+.hcms-color-chip {
+  width: 20px; height: 20px; border-radius: 50%;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mirk-fg) 20%, transparent);
+}
+.hcms-color[data-hcms-color-empty] .hcms-color-chip {
+  background: repeating-conic-gradient(var(--mirk-input-border) 0 25%, transparent 0 50%) 50% / 8px 8px;
+}
+.hcms-color-clear {
+  display: inline-flex; padding: 2px; border: 0; background: transparent;
+  color: var(--mirk-placeholder-color); cursor: pointer;
+}
+.hcms-color-clear:hover { color: var(--mirk-fg); }
+.hcms-color[data-hcms-color-empty] .hcms-color-clear { display: none; }
+.hcms-color-panel { margin-top: 8px; }
+.hcms-color-panel[hidden] { display: none; }
+.hcms-color-grid { display: flex; flex-wrap: wrap; gap: 4px; }
+.hcms-color-grid--full { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
+.hcms-color-swatch {
+  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mirk-fg) 15%, transparent);
+}
+.hcms-color-grid--full .hcms-color-swatch { width: auto; height: auto; aspect-ratio: 1; }
+.hcms-color-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--mirk-bg), 0 0 0 4px var(--mirk-fg); }
+.hcms-color-swatch:focus-visible { outline: 2px solid var(--mirk-focus-color); outline-offset: 2px; }
+.hcms-color-custom { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+.hcms-color-native {
+  width: 32px; height: 28px; padding: 0; border: 1px solid var(--mirk-input-border);
+  border-radius: 4px; background: none; cursor: pointer;
+}
+.hcms-color-text { flex: 1; min-width: 0; }
+
+/* ---------- FONT (@font) ----------
+   Each option sets its own font-family inline, so the list previews every
+   family in its face once the editor-only preview stylesheet arrives. */
+.hcms-font-current {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
+  padding: 6px 10px; border: 1px solid var(--mirk-input-border); border-radius: 4px;
+  background: var(--mirk-input-bg); color: var(--mirk-fg); font: inherit; cursor: pointer; text-align: left;
+}
+.hcms-font-name { font-size: 15px; }
+.hcms-font-chevron { transform: rotate(90deg); color: var(--mirk-placeholder-color); }
+.hcms-font-panel { margin-top: 6px; }
+.hcms-font-panel[hidden] { display: none; }
+.hcms-font-list {
+  display: flex; flex-direction: column; max-height: 320px; overflow-y: auto;
+  border: 1px solid var(--mirk-input-border); border-radius: 4px; background: var(--mirk-input-bg);
+}
+.hcms-font-group {
+  padding: 8px 10px 4px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
+  color: var(--mirk-placeholder-color);
+}
+.hcms-font-option {
+  padding: 6px 10px; border: 0; background: transparent; color: var(--mirk-fg);
+  font-size: 16px; text-align: left; cursor: pointer;
+}
+.hcms-font-option:hover { background: color-mix(in oklab, var(--mirk-fg) 8%, transparent); }
+.hcms-font-option[aria-selected="true"] { background: color-mix(in oklab, var(--mirk-fg) 14%, transparent); }
+.hcms-font-option:focus-visible { outline: 2px solid var(--mirk-focus-color); outline-offset: -2px; }
+
+/* ---------- VARIANT (@variant) ----------
+   Native radios behind icon tiles: arrow keys move the choice, the tile with
+   the checked radio is the selected one. */
+.hcms-variant-row { display: flex; flex-wrap: wrap; gap: 8px; }
+.hcms-variant-option {
+  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
+  min-width: 64px; padding: 8px 10px; border: 1px solid var(--mirk-input-border); border-radius: 6px;
+  background: var(--mirk-input-bg); color: var(--mirk-placeholder-color); font-size: 12px; cursor: pointer;
+}
+.hcms-variant-option:hover { color: var(--mirk-fg); }
+.hcms-variant-option:has(input:checked) {
+  color: var(--mirk-fg); border-color: var(--mirk-fg);
+  box-shadow: inset 0 0 0 1px var(--mirk-fg);
+}
+.hcms-variant-option:has(input:focus-visible) { outline: 2px solid var(--mirk-focus-color); outline-offset: 2px; }
+.hcms-variant-icon { display: inline-flex; }
+
 /* ---------- UPLOADING (spec §9) ----------
    One attribute, [data-hcms-uploading], set on the field for as long as the host
    has the bytes, plus --hcms-upload-progress carrying the percent. No markup of
@@ -826,6 +908,9 @@ tr.hcms-shell.hcms-inline-ghost { display: table-row; }
 .hcms-inline .hcms-form [data-hcms-path] { display: none; }
 .hcms-inline .hcms-form [data-hcms-path].is-hcms-inline-onpath,
 .hcms-inline .hcms-form [data-hcms-path].is-hcms-inline-active { display: block; }
+/* The Page style group has no data path of its own: hide it like a path until
+   a reveal marks it on-path. */
+.hcms-inline .hcms-form [data-hcms-page-style]:not(.is-hcms-inline-onpath) { display: none; }
 
 .hcms-inline .hcms-form .is-hcms-inline-onpath,
 .hcms-inline .hcms-form {

package/src/theme.generated.css

@@ -1151,20 +1151,14 @@
   box-shadow: 16px 0 48px -28px rgba(43, 36, 27, 0.45);
 }
 
-/* Push the page over so docked content is never hidden underneath, and publish
-   the geometry the floating toggle has to compose with. --hcms-toggle-shift is
-   the distance the toggle moves left, which is the shell width only while the
-   shell is docked on the right; docked left, as an overlay, or full-viewport it
-   is zero. */
+/* Push the page over so docked content is never hidden underneath. */
 body.hcms-open { --hcms-shell-width: 380px; }
 body.hcms-open:not(.hcms-overlay) { padding-right: var(--hcms-shell-width); }
-body.hcms-open:not(.hcms-overlay):not(.hcms-side-left) { --hcms-toggle-shift: var(--hcms-shell-width); }
 body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: var(--hcms-shell-width); }
-body.hcms-open.hcms-overlay { overflow: hidden; --hcms-toggle-display: none; }
+body.hcms-open.hcms-overlay { overflow: hidden; }
 
 @media (max-width: 799px) {
   body.hcms-open { --hcms-shell-width: 100vw; }
-  body.hcms-open:not(.hcms-overlay):not(.hcms-side-left) { --hcms-toggle-shift: 0px; }
   body.hcms-open:not(.hcms-overlay),
   body.hcms-open.hcms-side-left:not(.hcms-overlay) { padding-right: 0; padding-left: 0; }
   body.hcms-open { overflow: hidden; }
@@ -1469,6 +1463,94 @@ body.hcms-open.hcms-overlay { overflow: hidden; --hcms-toggle-display: none; }
   color: var(--mirk-placeholder-color);
 }
 
+/* ---------- COLOR (@color) ----------
+   Swatch colors arrive as --hcms-swatch on each element's style, so a value
+   never becomes a selector or a class. The full palette is an 11-column grid
+   (one row per hue); a narrowed set wraps. */
+.hcms-color-row { display: flex; align-items: center; gap: 8px; }
+.hcms-color-current {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 4px 12px 4px 4px; border: 1px solid var(--mirk-input-border); border-radius: 999px;
+  background: var(--mirk-input-bg); color: var(--mirk-fg); font: inherit; cursor: pointer;
+}
+.hcms-color--inline .hcms-color-current { cursor: default; }
+.hcms-color-chip, .hcms-color-swatch { background: var(--hcms-swatch, transparent); }
+.hcms-color-chip {
+  width: 20px; height: 20px; border-radius: 50%;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mirk-fg) 20%, transparent);
+}
+.hcms-color[data-hcms-color-empty] .hcms-color-chip {
+  background: repeating-conic-gradient(var(--mirk-input-border) 0 25%, transparent 0 50%) 50% / 8px 8px;
+}
+.hcms-color-clear {
+  display: inline-flex; padding: 2px; border: 0; background: transparent;
+  color: var(--mirk-placeholder-color); cursor: pointer;
+}
+.hcms-color-clear:hover { color: var(--mirk-fg); }
+.hcms-color[data-hcms-color-empty] .hcms-color-clear { display: none; }
+.hcms-color-panel { margin-top: 8px; }
+.hcms-color-panel[hidden] { display: none; }
+.hcms-color-grid { display: flex; flex-wrap: wrap; gap: 4px; }
+.hcms-color-grid--full { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
+.hcms-color-swatch {
+  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mirk-fg) 15%, transparent);
+}
+.hcms-color-grid--full .hcms-color-swatch { width: auto; height: auto; aspect-ratio: 1; }
+.hcms-color-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--mirk-bg), 0 0 0 4px var(--mirk-fg); }
+.hcms-color-swatch:focus-visible { outline: 2px solid var(--mirk-focus-color); outline-offset: 2px; }
+.hcms-color-custom { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+.hcms-color-native {
+  width: 32px; height: 28px; padding: 0; border: 1px solid var(--mirk-input-border);
+  border-radius: 4px; background: none; cursor: pointer;
+}
+.hcms-color-text { flex: 1; min-width: 0; }
+
+/* ---------- FONT (@font) ----------
+   Each option sets its own font-family inline, so the list previews every
+   family in its face once the editor-only preview stylesheet arrives. */
+.hcms-font-current {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
+  padding: 6px 10px; border: 1px solid var(--mirk-input-border); border-radius: 4px;
+  background: var(--mirk-input-bg); color: var(--mirk-fg); font: inherit; cursor: pointer; text-align: left;
+}
+.hcms-font-name { font-size: 15px; }
+.hcms-font-chevron { transform: rotate(90deg); color: var(--mirk-placeholder-color); }
+.hcms-font-panel { margin-top: 6px; }
+.hcms-font-panel[hidden] { display: none; }
+.hcms-font-list {
+  display: flex; flex-direction: column; max-height: 320px; overflow-y: auto;
+  border: 1px solid var(--mirk-input-border); border-radius: 4px; background: var(--mirk-input-bg);
+}
+.hcms-font-group {
+  padding: 8px 10px 4px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
+  color: var(--mirk-placeholder-color);
+}
+.hcms-font-option {
+  padding: 6px 10px; border: 0; background: transparent; color: var(--mirk-fg);
+  font-size: 16px; text-align: left; cursor: pointer;
+}
+.hcms-font-option:hover { background: color-mix(in oklab, var(--mirk-fg) 8%, transparent); }
+.hcms-font-option[aria-selected="true"] { background: color-mix(in oklab, var(--mirk-fg) 14%, transparent); }
+.hcms-font-option:focus-visible { outline: 2px solid var(--mirk-focus-color); outline-offset: -2px; }
+
+/* ---------- VARIANT (@variant) ----------
+   Native radios behind icon tiles: arrow keys move the choice, the tile with
+   the checked radio is the selected one. */
+.hcms-variant-row { display: flex; flex-wrap: wrap; gap: 8px; }
+.hcms-variant-option {
+  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
+  min-width: 64px; padding: 8px 10px; border: 1px solid var(--mirk-input-border); border-radius: 6px;
+  background: var(--mirk-input-bg); color: var(--mirk-placeholder-color); font-size: 12px; cursor: pointer;
+}
+.hcms-variant-option:hover { color: var(--mirk-fg); }
+.hcms-variant-option:has(input:checked) {
+  color: var(--mirk-fg); border-color: var(--mirk-fg);
+  box-shadow: inset 0 0 0 1px var(--mirk-fg);
+}
+.hcms-variant-option:has(input:focus-visible) { outline: 2px solid var(--mirk-focus-color); outline-offset: 2px; }
+.hcms-variant-icon { display: inline-flex; }
+
 /* ---------- UPLOADING (spec §9) ----------
    One attribute, [data-hcms-uploading], set on the field for as long as the host
    has the bytes, plus --hcms-upload-progress carrying the percent. No markup of
@@ -1837,6 +1919,9 @@ tr.hcms-shell.hcms-inline-ghost { display: table-row; }
 .hcms-inline .hcms-form [data-hcms-path] { display: none; }
 .hcms-inline .hcms-form [data-hcms-path].is-hcms-inline-onpath,
 .hcms-inline .hcms-form [data-hcms-path].is-hcms-inline-active { display: block; }
+/* The Page style group has no data path of its own: hide it like a path until
+   a reveal marks it on-path. */
+.hcms-inline .hcms-form [data-hcms-page-style]:not(.is-hcms-inline-onpath) { display: none; }
 
 .hcms-inline .hcms-form .is-hcms-inline-onpath,
 .hcms-inline .hcms-form {

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
+}