@panphora/hyper-cms 0.11.6 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panphora/hyper-cms",
-  "version": "0.11.6",
+  "version": "0.12.0",
   "description": "Live edit-in-place CMS sidebar for HTML pages with a hyper-html-api rules tag",
   "keywords": [
     "HTML",
@@ -21,6 +21,7 @@
   "exports": {
     ".": "./src/hypercms.js",
     "./styles.css": "./src/theme.generated.css",
+    "./catalogs": "./src/catalogs/index.js",
     "./theme.css": "./src/theme.generated.css"
   },
   "files": [
@@ -32,6 +33,7 @@
     "dist/*.js"
   ],
   "scripts": {
+    "build:palette": "node scripts/build-palette.js",
     "build:theme": "node scripts/build-theme.js",
     "build:js": "node scripts/build-js.js --standalone",
     "build:preview": "node scripts/build-js.js --standalone --hyper-morph-source=../hyper-morph/src/index.js --hyper-html-api-source=../hyper-html-api",
@@ -47,8 +49,8 @@
     "test:all": "npm run test:node && npm run test:browser"
   },
   "dependencies": {
-    "hyper-html-api": "^0.12.0",
-    "hyper-morph": "^1.6.3"
+    "hyper-html-api": "^0.13.0",
+    "hyper-morph": "^1.7.0"
   },
   "devDependencies": {
     "@open-wc/testing": "^4.0.0",

package/src/apply-loop.js

@@ -2,6 +2,7 @@ import { engine } from 'hyper-html-api'
 import { morph } from 'hyper-morph'
 import { fromString as pathFromString, getRuleAtPath } from './path.js'
 import { rowIdentityHooks } from './row-identity.js'
+import { contentRoot } from './page-root.js'
 
 const ENGINE_OPTS = { skip: '[data-hcms-shell]', templateAttr: 'cms-template' }
 const ROLLBACK_UI = 'data-hcms-rollback-ui'
@@ -42,7 +43,7 @@ function applyPage(pageRoot, pageRules, newData, options) {
   // a specific container.
   const target = resolveStructuralTarget(pageRoot, pageRules, structuralPath)
   const subtreeSnapshot = target ? captureChildren(target) : null
-  const pageSnapshot = target ? null : captureNonShellSnapshot(pageRoot, shellRoot)
+  const pageSnapshot = target ? null : captureNonShellSnapshot(contentRoot(pageRoot), shellRoot)
   try {
     engine.apply(pageRoot, pageRules, newData, engineOpts)
     return { ok: true }
@@ -50,7 +51,7 @@ function applyPage(pageRoot, pageRules, newData, options) {
     if (subtreeSnapshot) {
       restoreChildren(target, subtreeSnapshot)
     } else if (pageSnapshot) {
-      restoreNonShellSnapshot(pageRoot, shellRoot, pageSnapshot)
+      restoreNonShellSnapshot(contentRoot(pageRoot), shellRoot, pageSnapshot)
     }
     return { ok: false, error: err }
   }

package/src/catalogs/colors.js

@@ -0,0 +1,293 @@
+// Generated by scripts/build-palette.js from tailwindcss@4.3.3 (MIT, Tailwind Labs).
+// Do not edit by hand: change the pinned version in the script and rerun it.
+export const PALETTE_SOURCE = 'tailwindcss@4.3.3'
+export const SHADES = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950']
+export const HUES = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'slate', 'gray', 'zinc', 'neutral', 'stone', 'mauve', 'olive', 'mist', 'taupe']
+export const COLORS = Object.freeze([
+  { id: 'red-50', hue: 'red', shade: '50', value: 'oklch(97.1% 0.013 17.38)' },
+  { id: 'red-100', hue: 'red', shade: '100', value: 'oklch(93.6% 0.032 17.717)' },
+  { id: 'red-200', hue: 'red', shade: '200', value: 'oklch(88.5% 0.062 18.334)' },
+  { id: 'red-300', hue: 'red', shade: '300', value: 'oklch(80.8% 0.114 19.571)' },
+  { id: 'red-400', hue: 'red', shade: '400', value: 'oklch(70.4% 0.191 22.216)' },
+  { id: 'red-500', hue: 'red', shade: '500', value: 'oklch(63.7% 0.237 25.331)' },
+  { id: 'red-600', hue: 'red', shade: '600', value: 'oklch(57.7% 0.245 27.325)' },
+  { id: 'red-700', hue: 'red', shade: '700', value: 'oklch(50.5% 0.213 27.518)' },
+  { id: 'red-800', hue: 'red', shade: '800', value: 'oklch(44.4% 0.177 26.899)' },
+  { id: 'red-900', hue: 'red', shade: '900', value: 'oklch(39.6% 0.141 25.723)' },
+  { id: 'red-950', hue: 'red', shade: '950', value: 'oklch(25.8% 0.092 26.042)' },
+  { id: 'orange-50', hue: 'orange', shade: '50', value: 'oklch(98% 0.016 73.684)' },
+  { id: 'orange-100', hue: 'orange', shade: '100', value: 'oklch(95.4% 0.038 75.164)' },
+  { id: 'orange-200', hue: 'orange', shade: '200', value: 'oklch(90.1% 0.076 70.697)' },
+  { id: 'orange-300', hue: 'orange', shade: '300', value: 'oklch(83.7% 0.128 66.29)' },
+  { id: 'orange-400', hue: 'orange', shade: '400', value: 'oklch(75% 0.183 55.934)' },
+  { id: 'orange-500', hue: 'orange', shade: '500', value: 'oklch(70.5% 0.213 47.604)' },
+  { id: 'orange-600', hue: 'orange', shade: '600', value: 'oklch(64.6% 0.222 41.116)' },
+  { id: 'orange-700', hue: 'orange', shade: '700', value: 'oklch(55.3% 0.195 38.402)' },
+  { id: 'orange-800', hue: 'orange', shade: '800', value: 'oklch(47% 0.157 37.304)' },
+  { id: 'orange-900', hue: 'orange', shade: '900', value: 'oklch(40.8% 0.123 38.172)' },
+  { id: 'orange-950', hue: 'orange', shade: '950', value: 'oklch(26.6% 0.079 36.259)' },
+  { id: 'amber-50', hue: 'amber', shade: '50', value: 'oklch(98.7% 0.022 95.277)' },
+  { id: 'amber-100', hue: 'amber', shade: '100', value: 'oklch(96.2% 0.059 95.617)' },
+  { id: 'amber-200', hue: 'amber', shade: '200', value: 'oklch(92.4% 0.12 95.746)' },
+  { id: 'amber-300', hue: 'amber', shade: '300', value: 'oklch(87.9% 0.169 91.605)' },
+  { id: 'amber-400', hue: 'amber', shade: '400', value: 'oklch(82.8% 0.189 84.429)' },
+  { id: 'amber-500', hue: 'amber', shade: '500', value: 'oklch(76.9% 0.188 70.08)' },
+  { id: 'amber-600', hue: 'amber', shade: '600', value: 'oklch(66.6% 0.179 58.318)' },
+  { id: 'amber-700', hue: 'amber', shade: '700', value: 'oklch(55.5% 0.163 48.998)' },
+  { id: 'amber-800', hue: 'amber', shade: '800', value: 'oklch(47.3% 0.137 46.201)' },
+  { id: 'amber-900', hue: 'amber', shade: '900', value: 'oklch(41.4% 0.112 45.904)' },
+  { id: 'amber-950', hue: 'amber', shade: '950', value: 'oklch(27.9% 0.077 45.635)' },
+  { id: 'yellow-50', hue: 'yellow', shade: '50', value: 'oklch(98.7% 0.026 102.212)' },
+  { id: 'yellow-100', hue: 'yellow', shade: '100', value: 'oklch(97.3% 0.071 103.193)' },
+  { id: 'yellow-200', hue: 'yellow', shade: '200', value: 'oklch(94.5% 0.129 101.54)' },
+  { id: 'yellow-300', hue: 'yellow', shade: '300', value: 'oklch(90.5% 0.182 98.111)' },
+  { id: 'yellow-400', hue: 'yellow', shade: '400', value: 'oklch(85.2% 0.199 91.936)' },
+  { id: 'yellow-500', hue: 'yellow', shade: '500', value: 'oklch(79.5% 0.184 86.047)' },
+  { id: 'yellow-600', hue: 'yellow', shade: '600', value: 'oklch(68.1% 0.162 75.834)' },
+  { id: 'yellow-700', hue: 'yellow', shade: '700', value: 'oklch(55.4% 0.135 66.442)' },
+  { id: 'yellow-800', hue: 'yellow', shade: '800', value: 'oklch(47.6% 0.114 61.907)' },
+  { id: 'yellow-900', hue: 'yellow', shade: '900', value: 'oklch(42.1% 0.095 57.708)' },
+  { id: 'yellow-950', hue: 'yellow', shade: '950', value: 'oklch(28.6% 0.066 53.813)' },
+  { id: 'lime-50', hue: 'lime', shade: '50', value: 'oklch(98.6% 0.031 120.757)' },
+  { id: 'lime-100', hue: 'lime', shade: '100', value: 'oklch(96.7% 0.067 122.328)' },
+  { id: 'lime-200', hue: 'lime', shade: '200', value: 'oklch(93.8% 0.127 124.321)' },
+  { id: 'lime-300', hue: 'lime', shade: '300', value: 'oklch(89.7% 0.196 126.665)' },
+  { id: 'lime-400', hue: 'lime', shade: '400', value: 'oklch(84.1% 0.238 128.85)' },
+  { id: 'lime-500', hue: 'lime', shade: '500', value: 'oklch(76.8% 0.233 130.85)' },
+  { id: 'lime-600', hue: 'lime', shade: '600', value: 'oklch(64.8% 0.2 131.684)' },
+  { id: 'lime-700', hue: 'lime', shade: '700', value: 'oklch(53.2% 0.157 131.589)' },
+  { id: 'lime-800', hue: 'lime', shade: '800', value: 'oklch(45.3% 0.124 130.933)' },
+  { id: 'lime-900', hue: 'lime', shade: '900', value: 'oklch(40.5% 0.101 131.063)' },
+  { id: 'lime-950', hue: 'lime', shade: '950', value: 'oklch(27.4% 0.072 132.109)' },
+  { id: 'green-50', hue: 'green', shade: '50', value: 'oklch(98.2% 0.018 155.826)' },
+  { id: 'green-100', hue: 'green', shade: '100', value: 'oklch(96.2% 0.044 156.743)' },
+  { id: 'green-200', hue: 'green', shade: '200', value: 'oklch(92.5% 0.084 155.995)' },
+  { id: 'green-300', hue: 'green', shade: '300', value: 'oklch(87.1% 0.15 154.449)' },
+  { id: 'green-400', hue: 'green', shade: '400', value: 'oklch(79.2% 0.209 151.711)' },
+  { id: 'green-500', hue: 'green', shade: '500', value: 'oklch(72.3% 0.219 149.579)' },
+  { id: 'green-600', hue: 'green', shade: '600', value: 'oklch(62.7% 0.194 149.214)' },
+  { id: 'green-700', hue: 'green', shade: '700', value: 'oklch(52.7% 0.154 150.069)' },
+  { id: 'green-800', hue: 'green', shade: '800', value: 'oklch(44.8% 0.119 151.328)' },
+  { id: 'green-900', hue: 'green', shade: '900', value: 'oklch(39.3% 0.095 152.535)' },
+  { id: 'green-950', hue: 'green', shade: '950', value: 'oklch(26.6% 0.065 152.934)' },
+  { id: 'emerald-50', hue: 'emerald', shade: '50', value: 'oklch(97.9% 0.021 166.113)' },
+  { id: 'emerald-100', hue: 'emerald', shade: '100', value: 'oklch(95% 0.052 163.051)' },
+  { id: 'emerald-200', hue: 'emerald', shade: '200', value: 'oklch(90.5% 0.093 164.15)' },
+  { id: 'emerald-300', hue: 'emerald', shade: '300', value: 'oklch(84.5% 0.143 164.978)' },
+  { id: 'emerald-400', hue: 'emerald', shade: '400', value: 'oklch(76.5% 0.177 163.223)' },
+  { id: 'emerald-500', hue: 'emerald', shade: '500', value: 'oklch(69.6% 0.17 162.48)' },
+  { id: 'emerald-600', hue: 'emerald', shade: '600', value: 'oklch(59.6% 0.145 163.225)' },
+  { id: 'emerald-700', hue: 'emerald', shade: '700', value: 'oklch(50.8% 0.118 165.612)' },
+  { id: 'emerald-800', hue: 'emerald', shade: '800', value: 'oklch(43.2% 0.095 166.913)' },
+  { id: 'emerald-900', hue: 'emerald', shade: '900', value: 'oklch(37.8% 0.077 168.94)' },
+  { id: 'emerald-950', hue: 'emerald', shade: '950', value: 'oklch(26.2% 0.051 172.552)' },
+  { id: 'teal-50', hue: 'teal', shade: '50', value: 'oklch(98.4% 0.014 180.72)' },
+  { id: 'teal-100', hue: 'teal', shade: '100', value: 'oklch(95.3% 0.051 180.801)' },
+  { id: 'teal-200', hue: 'teal', shade: '200', value: 'oklch(91% 0.096 180.426)' },
+  { id: 'teal-300', hue: 'teal', shade: '300', value: 'oklch(85.5% 0.138 181.071)' },
+  { id: 'teal-400', hue: 'teal', shade: '400', value: 'oklch(77.7% 0.152 181.912)' },
+  { id: 'teal-500', hue: 'teal', shade: '500', value: 'oklch(70.4% 0.14 182.503)' },
+  { id: 'teal-600', hue: 'teal', shade: '600', value: 'oklch(60% 0.118 184.704)' },
+  { id: 'teal-700', hue: 'teal', shade: '700', value: 'oklch(51.1% 0.096 186.391)' },
+  { id: 'teal-800', hue: 'teal', shade: '800', value: 'oklch(43.7% 0.078 188.216)' },
+  { id: 'teal-900', hue: 'teal', shade: '900', value: 'oklch(38.6% 0.063 188.416)' },
+  { id: 'teal-950', hue: 'teal', shade: '950', value: 'oklch(27.7% 0.046 192.524)' },
+  { id: 'cyan-50', hue: 'cyan', shade: '50', value: 'oklch(98.4% 0.019 200.873)' },
+  { id: 'cyan-100', hue: 'cyan', shade: '100', value: 'oklch(95.6% 0.045 203.388)' },
+  { id: 'cyan-200', hue: 'cyan', shade: '200', value: 'oklch(91.7% 0.08 205.041)' },
+  { id: 'cyan-300', hue: 'cyan', shade: '300', value: 'oklch(86.5% 0.127 207.078)' },
+  { id: 'cyan-400', hue: 'cyan', shade: '400', value: 'oklch(78.9% 0.154 211.53)' },
+  { id: 'cyan-500', hue: 'cyan', shade: '500', value: 'oklch(71.5% 0.143 215.221)' },
+  { id: 'cyan-600', hue: 'cyan', shade: '600', value: 'oklch(60.9% 0.126 221.723)' },
+  { id: 'cyan-700', hue: 'cyan', shade: '700', value: 'oklch(52% 0.105 223.128)' },
+  { id: 'cyan-800', hue: 'cyan', shade: '800', value: 'oklch(45% 0.085 224.283)' },
+  { id: 'cyan-900', hue: 'cyan', shade: '900', value: 'oklch(39.8% 0.07 227.392)' },
+  { id: 'cyan-950', hue: 'cyan', shade: '950', value: 'oklch(30.2% 0.056 229.695)' },
+  { id: 'sky-50', hue: 'sky', shade: '50', value: 'oklch(97.7% 0.013 236.62)' },
+  { id: 'sky-100', hue: 'sky', shade: '100', value: 'oklch(95.1% 0.026 236.824)' },
+  { id: 'sky-200', hue: 'sky', shade: '200', value: 'oklch(90.1% 0.058 230.902)' },
+  { id: 'sky-300', hue: 'sky', shade: '300', value: 'oklch(82.8% 0.111 230.318)' },
+  { id: 'sky-400', hue: 'sky', shade: '400', value: 'oklch(74.6% 0.16 232.661)' },
+  { id: 'sky-500', hue: 'sky', shade: '500', value: 'oklch(68.5% 0.169 237.323)' },
+  { id: 'sky-600', hue: 'sky', shade: '600', value: 'oklch(58.8% 0.158 241.966)' },
+  { id: 'sky-700', hue: 'sky', shade: '700', value: 'oklch(50% 0.134 242.749)' },
+  { id: 'sky-800', hue: 'sky', shade: '800', value: 'oklch(44.3% 0.11 240.79)' },
+  { id: 'sky-900', hue: 'sky', shade: '900', value: 'oklch(39.1% 0.09 240.876)' },
+  { id: 'sky-950', hue: 'sky', shade: '950', value: 'oklch(29.3% 0.066 243.157)' },
+  { id: 'blue-50', hue: 'blue', shade: '50', value: 'oklch(97% 0.014 254.604)' },
+  { id: 'blue-100', hue: 'blue', shade: '100', value: 'oklch(93.2% 0.032 255.585)' },
+  { id: 'blue-200', hue: 'blue', shade: '200', value: 'oklch(88.2% 0.059 254.128)' },
+  { id: 'blue-300', hue: 'blue', shade: '300', value: 'oklch(80.9% 0.105 251.813)' },
+  { id: 'blue-400', hue: 'blue', shade: '400', value: 'oklch(70.7% 0.165 254.624)' },
+  { id: 'blue-500', hue: 'blue', shade: '500', value: 'oklch(62.3% 0.214 259.815)' },
+  { id: 'blue-600', hue: 'blue', shade: '600', value: 'oklch(54.6% 0.245 262.881)' },
+  { id: 'blue-700', hue: 'blue', shade: '700', value: 'oklch(48.8% 0.243 264.376)' },
+  { id: 'blue-800', hue: 'blue', shade: '800', value: 'oklch(42.4% 0.199 265.638)' },
+  { id: 'blue-900', hue: 'blue', shade: '900', value: 'oklch(37.9% 0.146 265.522)' },
+  { id: 'blue-950', hue: 'blue', shade: '950', value: 'oklch(28.2% 0.091 267.935)' },
+  { id: 'indigo-50', hue: 'indigo', shade: '50', value: 'oklch(96.2% 0.018 272.314)' },
+  { id: 'indigo-100', hue: 'indigo', shade: '100', value: 'oklch(93% 0.034 272.788)' },
+  { id: 'indigo-200', hue: 'indigo', shade: '200', value: 'oklch(87% 0.065 274.039)' },
+  { id: 'indigo-300', hue: 'indigo', shade: '300', value: 'oklch(78.5% 0.115 274.713)' },
+  { id: 'indigo-400', hue: 'indigo', shade: '400', value: 'oklch(67.3% 0.182 276.935)' },
+  { id: 'indigo-500', hue: 'indigo', shade: '500', value: 'oklch(58.5% 0.233 277.117)' },
+  { id: 'indigo-600', hue: 'indigo', shade: '600', value: 'oklch(51.1% 0.262 276.966)' },
+  { id: 'indigo-700', hue: 'indigo', shade: '700', value: 'oklch(45.7% 0.24 277.023)' },
+  { id: 'indigo-800', hue: 'indigo', shade: '800', value: 'oklch(39.8% 0.195 277.366)' },
+  { id: 'indigo-900', hue: 'indigo', shade: '900', value: 'oklch(35.9% 0.144 278.697)' },
+  { id: 'indigo-950', hue: 'indigo', shade: '950', value: 'oklch(25.7% 0.09 281.288)' },
+  { id: 'violet-50', hue: 'violet', shade: '50', value: 'oklch(96.9% 0.016 293.756)' },
+  { id: 'violet-100', hue: 'violet', shade: '100', value: 'oklch(94.3% 0.029 294.588)' },
+  { id: 'violet-200', hue: 'violet', shade: '200', value: 'oklch(89.4% 0.057 293.283)' },
+  { id: 'violet-300', hue: 'violet', shade: '300', value: 'oklch(81.1% 0.111 293.571)' },
+  { id: 'violet-400', hue: 'violet', shade: '400', value: 'oklch(70.2% 0.183 293.541)' },
+  { id: 'violet-500', hue: 'violet', shade: '500', value: 'oklch(60.6% 0.25 292.717)' },
+  { id: 'violet-600', hue: 'violet', shade: '600', value: 'oklch(54.1% 0.281 293.009)' },
+  { id: 'violet-700', hue: 'violet', shade: '700', value: 'oklch(49.1% 0.27 292.581)' },
+  { id: 'violet-800', hue: 'violet', shade: '800', value: 'oklch(43.2% 0.232 292.759)' },
+  { id: 'violet-900', hue: 'violet', shade: '900', value: 'oklch(38% 0.189 293.745)' },
+  { id: 'violet-950', hue: 'violet', shade: '950', value: 'oklch(28.3% 0.141 291.089)' },
+  { id: 'purple-50', hue: 'purple', shade: '50', value: 'oklch(97.7% 0.014 308.299)' },
+  { id: 'purple-100', hue: 'purple', shade: '100', value: 'oklch(94.6% 0.033 307.174)' },
+  { id: 'purple-200', hue: 'purple', shade: '200', value: 'oklch(90.2% 0.063 306.703)' },
+  { id: 'purple-300', hue: 'purple', shade: '300', value: 'oklch(82.7% 0.119 306.383)' },
+  { id: 'purple-400', hue: 'purple', shade: '400', value: 'oklch(71.4% 0.203 305.504)' },
+  { id: 'purple-500', hue: 'purple', shade: '500', value: 'oklch(62.7% 0.265 303.9)' },
+  { id: 'purple-600', hue: 'purple', shade: '600', value: 'oklch(55.8% 0.288 302.321)' },
+  { id: 'purple-700', hue: 'purple', shade: '700', value: 'oklch(49.6% 0.265 301.924)' },
+  { id: 'purple-800', hue: 'purple', shade: '800', value: 'oklch(43.8% 0.218 303.724)' },
+  { id: 'purple-900', hue: 'purple', shade: '900', value: 'oklch(38.1% 0.176 304.987)' },
+  { id: 'purple-950', hue: 'purple', shade: '950', value: 'oklch(29.1% 0.149 302.717)' },
+  { id: 'fuchsia-50', hue: 'fuchsia', shade: '50', value: 'oklch(97.7% 0.017 320.058)' },
+  { id: 'fuchsia-100', hue: 'fuchsia', shade: '100', value: 'oklch(95.2% 0.037 318.852)' },
+  { id: 'fuchsia-200', hue: 'fuchsia', shade: '200', value: 'oklch(90.3% 0.076 319.62)' },
+  { id: 'fuchsia-300', hue: 'fuchsia', shade: '300', value: 'oklch(83.3% 0.145 321.434)' },
+  { id: 'fuchsia-400', hue: 'fuchsia', shade: '400', value: 'oklch(74% 0.238 322.16)' },
+  { id: 'fuchsia-500', hue: 'fuchsia', shade: '500', value: 'oklch(66.7% 0.295 322.15)' },
+  { id: 'fuchsia-600', hue: 'fuchsia', shade: '600', value: 'oklch(59.1% 0.293 322.896)' },
+  { id: 'fuchsia-700', hue: 'fuchsia', shade: '700', value: 'oklch(51.8% 0.253 323.949)' },
+  { id: 'fuchsia-800', hue: 'fuchsia', shade: '800', value: 'oklch(45.2% 0.211 324.591)' },
+  { id: 'fuchsia-900', hue: 'fuchsia', shade: '900', value: 'oklch(40.1% 0.17 325.612)' },
+  { id: 'fuchsia-950', hue: 'fuchsia', shade: '950', value: 'oklch(29.3% 0.136 325.661)' },
+  { id: 'pink-50', hue: 'pink', shade: '50', value: 'oklch(97.1% 0.014 343.198)' },
+  { id: 'pink-100', hue: 'pink', shade: '100', value: 'oklch(94.8% 0.028 342.258)' },
+  { id: 'pink-200', hue: 'pink', shade: '200', value: 'oklch(89.9% 0.061 343.231)' },
+  { id: 'pink-300', hue: 'pink', shade: '300', value: 'oklch(82.3% 0.12 346.018)' },
+  { id: 'pink-400', hue: 'pink', shade: '400', value: 'oklch(71.8% 0.202 349.761)' },
+  { id: 'pink-500', hue: 'pink', shade: '500', value: 'oklch(65.6% 0.241 354.308)' },
+  { id: 'pink-600', hue: 'pink', shade: '600', value: 'oklch(59.2% 0.249 0.584)' },
+  { id: 'pink-700', hue: 'pink', shade: '700', value: 'oklch(52.5% 0.223 3.958)' },
+  { id: 'pink-800', hue: 'pink', shade: '800', value: 'oklch(45.9% 0.187 3.815)' },
+  { id: 'pink-900', hue: 'pink', shade: '900', value: 'oklch(40.8% 0.153 2.432)' },
+  { id: 'pink-950', hue: 'pink', shade: '950', value: 'oklch(28.4% 0.109 3.907)' },
+  { id: 'rose-50', hue: 'rose', shade: '50', value: 'oklch(96.9% 0.015 12.422)' },
+  { id: 'rose-100', hue: 'rose', shade: '100', value: 'oklch(94.1% 0.03 12.58)' },
+  { id: 'rose-200', hue: 'rose', shade: '200', value: 'oklch(89.2% 0.058 10.001)' },
+  { id: 'rose-300', hue: 'rose', shade: '300', value: 'oklch(81% 0.117 11.638)' },
+  { id: 'rose-400', hue: 'rose', shade: '400', value: 'oklch(71.2% 0.194 13.428)' },
+  { id: 'rose-500', hue: 'rose', shade: '500', value: 'oklch(64.5% 0.246 16.439)' },
+  { id: 'rose-600', hue: 'rose', shade: '600', value: 'oklch(58.6% 0.253 17.585)' },
+  { id: 'rose-700', hue: 'rose', shade: '700', value: 'oklch(51.4% 0.222 16.935)' },
+  { id: 'rose-800', hue: 'rose', shade: '800', value: 'oklch(45.5% 0.188 13.697)' },
+  { id: 'rose-900', hue: 'rose', shade: '900', value: 'oklch(41% 0.159 10.272)' },
+  { id: 'rose-950', hue: 'rose', shade: '950', value: 'oklch(27.1% 0.105 12.094)' },
+  { id: 'slate-50', hue: 'slate', shade: '50', value: 'oklch(98.4% 0.003 247.858)' },
+  { id: 'slate-100', hue: 'slate', shade: '100', value: 'oklch(96.8% 0.007 247.896)' },
+  { id: 'slate-200', hue: 'slate', shade: '200', value: 'oklch(92.9% 0.013 255.508)' },
+  { id: 'slate-300', hue: 'slate', shade: '300', value: 'oklch(86.9% 0.022 252.894)' },
+  { id: 'slate-400', hue: 'slate', shade: '400', value: 'oklch(70.4% 0.04 256.788)' },
+  { id: 'slate-500', hue: 'slate', shade: '500', value: 'oklch(55.4% 0.046 257.417)' },
+  { id: 'slate-600', hue: 'slate', shade: '600', value: 'oklch(44.6% 0.043 257.281)' },
+  { id: 'slate-700', hue: 'slate', shade: '700', value: 'oklch(37.2% 0.044 257.287)' },
+  { id: 'slate-800', hue: 'slate', shade: '800', value: 'oklch(27.9% 0.041 260.031)' },
+  { id: 'slate-900', hue: 'slate', shade: '900', value: 'oklch(20.8% 0.042 265.755)' },
+  { id: 'slate-950', hue: 'slate', shade: '950', value: 'oklch(12.9% 0.042 264.695)' },
+  { id: 'gray-50', hue: 'gray', shade: '50', value: 'oklch(98.5% 0.002 247.839)' },
+  { id: 'gray-100', hue: 'gray', shade: '100', value: 'oklch(96.7% 0.003 264.542)' },
+  { id: 'gray-200', hue: 'gray', shade: '200', value: 'oklch(92.8% 0.006 264.531)' },
+  { id: 'gray-300', hue: 'gray', shade: '300', value: 'oklch(87.2% 0.01 258.338)' },
+  { id: 'gray-400', hue: 'gray', shade: '400', value: 'oklch(70.7% 0.022 261.325)' },
+  { id: 'gray-500', hue: 'gray', shade: '500', value: 'oklch(55.1% 0.027 264.364)' },
+  { id: 'gray-600', hue: 'gray', shade: '600', value: 'oklch(44.6% 0.03 256.802)' },
+  { id: 'gray-700', hue: 'gray', shade: '700', value: 'oklch(37.3% 0.034 259.733)' },
+  { id: 'gray-800', hue: 'gray', shade: '800', value: 'oklch(27.8% 0.033 256.848)' },
+  { id: 'gray-900', hue: 'gray', shade: '900', value: 'oklch(21% 0.034 264.665)' },
+  { id: 'gray-950', hue: 'gray', shade: '950', value: 'oklch(13% 0.028 261.692)' },
+  { id: 'zinc-50', hue: 'zinc', shade: '50', value: 'oklch(98.5% 0 none)' },
+  { id: 'zinc-100', hue: 'zinc', shade: '100', value: 'oklch(96.7% 0.001 286.375)' },
+  { id: 'zinc-200', hue: 'zinc', shade: '200', value: 'oklch(92% 0.004 286.32)' },
+  { id: 'zinc-300', hue: 'zinc', shade: '300', value: 'oklch(87.1% 0.006 286.286)' },
+  { id: 'zinc-400', hue: 'zinc', shade: '400', value: 'oklch(70.5% 0.015 286.067)' },
+  { id: 'zinc-500', hue: 'zinc', shade: '500', value: 'oklch(55.2% 0.016 285.938)' },
+  { id: 'zinc-600', hue: 'zinc', shade: '600', value: 'oklch(44.2% 0.017 285.786)' },
+  { id: 'zinc-700', hue: 'zinc', shade: '700', value: 'oklch(37% 0.013 285.805)' },
+  { id: 'zinc-800', hue: 'zinc', shade: '800', value: 'oklch(27.4% 0.006 286.033)' },
+  { id: 'zinc-900', hue: 'zinc', shade: '900', value: 'oklch(21% 0.006 285.885)' },
+  { id: 'zinc-950', hue: 'zinc', shade: '950', value: 'oklch(14.1% 0.005 285.823)' },
+  { id: 'neutral-50', hue: 'neutral', shade: '50', value: 'oklch(98.5% 0 none)' },
+  { id: 'neutral-100', hue: 'neutral', shade: '100', value: 'oklch(97% 0 none)' },
+  { id: 'neutral-200', hue: 'neutral', shade: '200', value: 'oklch(92.2% 0 none)' },
+  { id: 'neutral-300', hue: 'neutral', shade: '300', value: 'oklch(87% 0 none)' },
+  { id: 'neutral-400', hue: 'neutral', shade: '400', value: 'oklch(70.8% 0 none)' },
+  { id: 'neutral-500', hue: 'neutral', shade: '500', value: 'oklch(55.6% 0 none)' },
+  { id: 'neutral-600', hue: 'neutral', shade: '600', value: 'oklch(43.9% 0 none)' },
+  { id: 'neutral-700', hue: 'neutral', shade: '700', value: 'oklch(37.1% 0 none)' },
+  { id: 'neutral-800', hue: 'neutral', shade: '800', value: 'oklch(26.9% 0 none)' },
+  { id: 'neutral-900', hue: 'neutral', shade: '900', value: 'oklch(20.5% 0 none)' },
+  { id: 'neutral-950', hue: 'neutral', shade: '950', value: 'oklch(14.5% 0 none)' },
+  { id: 'stone-50', hue: 'stone', shade: '50', value: 'oklch(98.5% 0.001 106.423)' },
+  { id: 'stone-100', hue: 'stone', shade: '100', value: 'oklch(97% 0.001 106.424)' },
+  { id: 'stone-200', hue: 'stone', shade: '200', value: 'oklch(92.3% 0.003 48.717)' },
+  { id: 'stone-300', hue: 'stone', shade: '300', value: 'oklch(86.9% 0.005 56.366)' },
+  { id: 'stone-400', hue: 'stone', shade: '400', value: 'oklch(70.9% 0.01 56.259)' },
+  { id: 'stone-500', hue: 'stone', shade: '500', value: 'oklch(55.3% 0.013 58.071)' },
+  { id: 'stone-600', hue: 'stone', shade: '600', value: 'oklch(44.4% 0.011 73.639)' },
+  { id: 'stone-700', hue: 'stone', shade: '700', value: 'oklch(37.4% 0.01 67.558)' },
+  { id: 'stone-800', hue: 'stone', shade: '800', value: 'oklch(26.8% 0.007 34.298)' },
+  { id: 'stone-900', hue: 'stone', shade: '900', value: 'oklch(21.6% 0.006 56.043)' },
+  { id: 'stone-950', hue: 'stone', shade: '950', value: 'oklch(14.7% 0.004 49.25)' },
+  { id: 'mauve-50', hue: 'mauve', shade: '50', value: 'oklch(98.5% 0 none)' },
+  { id: 'mauve-100', hue: 'mauve', shade: '100', value: 'oklch(96% 0.003 325.6)' },
+  { id: 'mauve-200', hue: 'mauve', shade: '200', value: 'oklch(92.2% 0.005 325.62)' },
+  { id: 'mauve-300', hue: 'mauve', shade: '300', value: 'oklch(86.5% 0.012 325.68)' },
+  { id: 'mauve-400', hue: 'mauve', shade: '400', value: 'oklch(71.1% 0.019 323.02)' },
+  { id: 'mauve-500', hue: 'mauve', shade: '500', value: 'oklch(54.2% 0.034 322.5)' },
+  { id: 'mauve-600', hue: 'mauve', shade: '600', value: 'oklch(43.5% 0.029 321.78)' },
+  { id: 'mauve-700', hue: 'mauve', shade: '700', value: 'oklch(36.4% 0.029 323.89)' },
+  { id: 'mauve-800', hue: 'mauve', shade: '800', value: 'oklch(26.3% 0.024 320.12)' },
+  { id: 'mauve-900', hue: 'mauve', shade: '900', value: 'oklch(21.2% 0.019 322.12)' },
+  { id: 'mauve-950', hue: 'mauve', shade: '950', value: 'oklch(14.5% 0.008 326)' },
+  { id: 'olive-50', hue: 'olive', shade: '50', value: 'oklch(98.8% 0.003 106.5)' },
+  { id: 'olive-100', hue: 'olive', shade: '100', value: 'oklch(96.6% 0.005 106.5)' },
+  { id: 'olive-200', hue: 'olive', shade: '200', value: 'oklch(93% 0.007 106.5)' },
+  { id: 'olive-300', hue: 'olive', shade: '300', value: 'oklch(88% 0.011 106.6)' },
+  { id: 'olive-400', hue: 'olive', shade: '400', value: 'oklch(73.7% 0.021 106.9)' },
+  { id: 'olive-500', hue: 'olive', shade: '500', value: 'oklch(58% 0.031 107.3)' },
+  { id: 'olive-600', hue: 'olive', shade: '600', value: 'oklch(46.6% 0.025 107.3)' },
+  { id: 'olive-700', hue: 'olive', shade: '700', value: 'oklch(39.4% 0.023 107.4)' },
+  { id: 'olive-800', hue: 'olive', shade: '800', value: 'oklch(28.6% 0.016 107.4)' },
+  { id: 'olive-900', hue: 'olive', shade: '900', value: 'oklch(22.8% 0.013 107.4)' },
+  { id: 'olive-950', hue: 'olive', shade: '950', value: 'oklch(15.3% 0.006 107.1)' },
+  { id: 'mist-50', hue: 'mist', shade: '50', value: 'oklch(98.7% 0.002 197.1)' },
+  { id: 'mist-100', hue: 'mist', shade: '100', value: 'oklch(96.3% 0.002 197.1)' },
+  { id: 'mist-200', hue: 'mist', shade: '200', value: 'oklch(92.5% 0.005 214.3)' },
+  { id: 'mist-300', hue: 'mist', shade: '300', value: 'oklch(87.2% 0.007 219.6)' },
+  { id: 'mist-400', hue: 'mist', shade: '400', value: 'oklch(72.3% 0.014 214.4)' },
+  { id: 'mist-500', hue: 'mist', shade: '500', value: 'oklch(56% 0.021 213.5)' },
+  { id: 'mist-600', hue: 'mist', shade: '600', value: 'oklch(45% 0.017 213.2)' },
+  { id: 'mist-700', hue: 'mist', shade: '700', value: 'oklch(37.8% 0.015 216)' },
+  { id: 'mist-800', hue: 'mist', shade: '800', value: 'oklch(27.5% 0.011 216.9)' },
+  { id: 'mist-900', hue: 'mist', shade: '900', value: 'oklch(21.8% 0.008 223.9)' },
+  { id: 'mist-950', hue: 'mist', shade: '950', value: 'oklch(14.8% 0.004 228.8)' },
+  { id: 'taupe-50', hue: 'taupe', shade: '50', value: 'oklch(98.6% 0.002 67.8)' },
+  { id: 'taupe-100', hue: 'taupe', shade: '100', value: 'oklch(96% 0.002 17.2)' },
+  { id: 'taupe-200', hue: 'taupe', shade: '200', value: 'oklch(92.2% 0.005 34.3)' },
+  { id: 'taupe-300', hue: 'taupe', shade: '300', value: 'oklch(86.8% 0.007 39.5)' },
+  { id: 'taupe-400', hue: 'taupe', shade: '400', value: 'oklch(71.4% 0.014 41.2)' },
+  { id: 'taupe-500', hue: 'taupe', shade: '500', value: 'oklch(54.7% 0.021 43.1)' },
+  { id: 'taupe-600', hue: 'taupe', shade: '600', value: 'oklch(43.8% 0.017 39.3)' },
+  { id: 'taupe-700', hue: 'taupe', shade: '700', value: 'oklch(36.7% 0.016 35.7)' },
+  { id: 'taupe-800', hue: 'taupe', shade: '800', value: 'oklch(26.8% 0.011 36.5)' },
+  { id: 'taupe-900', hue: 'taupe', shade: '900', value: 'oklch(21.4% 0.009 43.1)' },
+  { id: 'taupe-950', hue: 'taupe', shade: '950', value: 'oklch(14.7% 0.004 49.3)' },
+])

package/src/catalogs/fonts.js

@@ -0,0 +1,126 @@
+// Google Fonts offered by the font control. Each request string is the exact
+// axis fragment Google's CSS2 API accepts for that family (verified against
+// fonts.googleapis.com on 2026-10-24), so a page never asks for a weight the
+// family does not have.
+export const FONT_GROUPS = ['sans', 'serif', 'display', 'mono']
+
+const SANS = 'ui-sans-serif, system-ui, sans-serif'
+const SERIF = 'ui-serif, Georgia, serif'
+const MONO = 'ui-monospace, SFMono-Regular, Menlo, monospace'
+
+export const FONTS = Object.freeze([
+  { slug: 'inter', family: 'Inter', group: 'sans', fallback: SANS, request: 'ital,wght@0,100..900;1,100..900' },
+  { slug: 'roboto', family: 'Roboto', group: 'sans', fallback: SANS, request: 'ital,wght@0,100..900;1,100..900' },
+  { slug: 'open-sans', family: 'Open Sans', group: 'sans', fallback: SANS, request: 'ital,wght@0,300..800;1,300..800' },
+  { slug: 'lato', family: 'Lato', group: 'sans', fallback: SANS, request: 'ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900' },
+  { slug: 'montserrat', family: 'Montserrat', group: 'sans', fallback: SANS, request: 'ital,wght@0,100..900;1,100..900' },
+  { slug: 'poppins', family: 'Poppins', group: 'sans', fallback: SANS, request: 'ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900' },
+  { slug: 'nunito', family: 'Nunito', group: 'sans', fallback: SANS, request: 'ital,wght@0,200..1000;1,200..1000' },
+  { slug: 'raleway', family: 'Raleway', group: 'sans', fallback: SANS, request: 'ital,wght@0,100..900;1,100..900' },
+  { slug: 'dm-sans', family: 'DM Sans', group: 'sans', fallback: SANS, request: 'ital,wght@0,100..1000;1,100..1000' },
+  { slug: 'work-sans', family: 'Work Sans', group: 'sans', fallback: SANS, request: 'ital,wght@0,100..900;1,100..900' },
+  { slug: 'source-sans-3', family: 'Source Sans 3', group: 'sans', fallback: SANS, request: 'ital,wght@0,200..900;1,200..900' },
+  { slug: 'noto-sans', family: 'Noto Sans', group: 'sans', fallback: SANS, request: 'ital,wght@0,100..900;1,100..900' },
+  { slug: 'plus-jakarta-sans', family: 'Plus Jakarta Sans', group: 'sans', fallback: SANS, request: 'ital,wght@0,200..800;1,200..800' },
+  { slug: 'manrope', family: 'Manrope', group: 'sans', fallback: SANS, request: 'wght@200..800' },
+  { slug: 'outfit', family: 'Outfit', group: 'sans', fallback: SANS, request: 'wght@100..900' },
+  { slug: 'space-grotesk', family: 'Space Grotesk', group: 'sans', fallback: SANS, request: 'wght@300..700' },
+  { slug: 'rubik', family: 'Rubik', group: 'sans', fallback: SANS, request: 'ital,wght@0,300..900;1,300..900' },
+  { slug: 'ubuntu', family: 'Ubuntu', group: 'sans', fallback: SANS, request: 'ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700' },
+  { slug: 'merriweather', family: 'Merriweather', group: 'serif', fallback: SERIF, request: 'ital,wght@0,300..900;1,300..900' },
+  { slug: 'lora', family: 'Lora', group: 'serif', fallback: SERIF, request: 'ital,wght@0,400..700;1,400..700' },
+  { slug: 'playfair-display', family: 'Playfair Display', group: 'serif', fallback: SERIF, request: 'ital,wght@0,400..900;1,400..900' },
+  { slug: 'libre-baskerville', family: 'Libre Baskerville', group: 'serif', fallback: SERIF, request: 'ital,wght@0,400..700;1,400..700' },
+  { slug: 'source-serif-4', family: 'Source Serif 4', group: 'serif', fallback: SERIF, request: 'ital,wght@0,200..900;1,200..900' },
+  { slug: 'pt-serif', family: 'PT Serif', group: 'serif', fallback: SERIF, request: 'ital,wght@0,400;0,700;1,400;1,700' },
+  { slug: 'noto-serif', family: 'Noto Serif', group: 'serif', fallback: SERIF, request: 'ital,wght@0,100..900;1,100..900' },
+  { slug: 'crimson-pro', family: 'Crimson Pro', group: 'serif', fallback: SERIF, request: 'ital,wght@0,200..900;1,200..900' },
+  { slug: 'eb-garamond', family: 'EB Garamond', group: 'serif', fallback: SERIF, request: 'ital,wght@0,400..800;1,400..800' },
+  { slug: 'cormorant-garamond', family: 'Cormorant Garamond', group: 'serif', fallback: SERIF, request: 'ital,wght@0,300..700;1,300..700' },
+  { slug: 'bebas-neue', family: 'Bebas Neue', group: 'display', fallback: SANS, request: 'wght@400' },
+  { slug: 'oswald', family: 'Oswald', group: 'display', fallback: SANS, request: 'wght@200..700' },
+  { slug: 'anton', family: 'Anton', group: 'display', fallback: SANS, request: 'wght@400' },
+  { slug: 'abril-fatface', family: 'Abril Fatface', group: 'display', fallback: SERIF, request: 'wght@400' },
+  { slug: 'lobster', family: 'Lobster', group: 'display', fallback: 'cursive', request: 'wght@400' },
+  { slug: 'bungee', family: 'Bungee', group: 'display', fallback: SANS, request: 'wght@400' },
+  { slug: 'roboto-mono', family: 'Roboto Mono', group: 'mono', fallback: MONO, request: 'ital,wght@0,100..700;1,100..700' },
+  { slug: 'jetbrains-mono', family: 'JetBrains Mono', group: 'mono', fallback: MONO, request: 'ital,wght@0,100..800;1,100..800' },
+  { slug: 'fira-code', family: 'Fira Code', group: 'mono', fallback: MONO, request: 'wght@300..700' },
+  { slug: 'source-code-pro', family: 'Source Code Pro', group: 'mono', fallback: MONO, request: 'ital,wght@0,200..900;1,200..900' },
+  { slug: 'ibm-plex-mono', family: 'IBM Plex Mono', group: 'mono', fallback: MONO, request: 'ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700' },
+  { slug: 'space-mono', family: 'Space Mono', group: 'mono', fallback: MONO, request: 'ital,wght@0,400;0,700;1,400;1,700' },
+])
+
+// The system choice: no download, the platform's own UI face.
+export const SYSTEM_FONT = Object.freeze({ slug: 'system', family: null, group: 'sans', fallback: 'system-ui, sans-serif' })
+
+const BY_FAMILY = new Map(FONTS.map((f) => [f.family.toLowerCase(), f]))
+const BY_SLUG = new Map(FONTS.map((f) => [f.slug, f]))
+
+export function fontBySlug(slug) {
+  return BY_SLUG.get(String(slug)) || null
+}
+
+// The CSS value a font field stores: the family quoted, then its fallback.
+export function fontStack(font) {
+  if (!font || font.slug === 'system') return SYSTEM_FONT.fallback
+  return `'${font.family}', ${font.fallback}`
+}
+
+// The first family a stack names, unquoted, or null for an empty stack.
+export function firstFamily(stack) {
+  if (stack == null) return null
+  const first = String(stack).split(',')[0].trim().replace(/^['"]|['"]$/g, '')
+  return first || null
+}
+
+// The family entries of a Google Fonts css2 URL, by lowercased family name:
+// "family=Fraunces:opsz@9..144" keyed "fraunces".
+export function familyEntries(href) {
+  const out = new Map()
+  if (!href) return out
+  const query = String(href).split('?')[1] || ''
+  for (const part of query.split('&')) {
+    if (!part.startsWith('family=')) continue
+    const name = decodeURIComponent(part.slice(7).split(':')[0].replace(/\+/g, ' ')).trim()
+    if (name) out.set(name.toLowerCase(), part)
+  }
+  return out
+}
+
+// Do two stylesheet URLs load the same families (whatever the axes)?
+export function sameFamilies(a, b) {
+  const x = familyEntries(a)
+  const y = familyEntries(b)
+  return x.size === y.size && [...x.keys()].every((k) => y.has(k))
+}
+
+// Which catalog font a stored stack starts with, or null when the first family
+// is not one of ours (an author's own stack, or the system choice).
+export function fontFromStack(stack) {
+  const first = firstFamily(stack)
+  return first ? BY_FAMILY.get(first.toLowerCase()) || null : null
+}
+
+// The one stylesheet URL for every family in use: a catalog family with its
+// catalog request, and a family the catalog does not know with the entry the
+// page's existing link already had for it (an author's own font keeps
+// loading). Deduplicated, sorted by family, display=swap. Null when nothing is
+// left to load, which tells the caller to remove its link.
+export function fontsHref(stacks, existingHref = null) {
+  const kept = familyEntries(existingHref)
+  const entries = new Map()
+  for (const stack of stacks || []) {
+    const font = fontFromStack(stack)
+    if (font) {
+      entries.set(font.family.toLowerCase(), `family=${font.family.replace(/ /g, '+')}:${font.request}`)
+      continue
+    }
+    const name = firstFamily(stack)
+    const entry = name && kept.get(name.toLowerCase())
+    if (entry) entries.set(name.toLowerCase(), entry)
+  }
+  if (entries.size === 0) return null
+  const families = [...entries.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([, e]) => e)
+  return `https://fonts.googleapis.com/css2?${families.join('&')}&display=swap`
+}

package/src/catalogs/index.js

@@ -0,0 +1,3 @@
+export * from './colors.js'
+export * from './fonts.js'
+export * from './variant-icons.js'

package/src/catalogs/variant-icons.js

@@ -0,0 +1,24 @@
+// Icons for the variant control. Each is a 32x20 outline drawing in
+// currentColor; a page names one in data-hcms-options ("2:cols-2"), never
+// supplies markup of its own.
+
+const svg = (body) =>
+  `<svg viewBox="0 0 32 20" width="32" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">${body}</svg>`
+const box = (x, y, w, h, extra = '') => `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="1"${extra}/>`
+const line = (x1, y, x2) => `<path d="M${x1} ${y}H${x2}"/>`
+const solid = ' fill="currentColor" fill-opacity="0.3"'
+
+export const VARIANT_ICONS = Object.freeze({
+  'cols-1': { label: 'One column', svg: svg(box(2, 2, 28, 16)) },
+  'cols-2': { label: 'Two columns', svg: svg(box(2, 2, 13, 16) + box(17, 2, 13, 16)) },
+  'cols-3': { label: 'Three columns', svg: svg(box(2, 2, 8, 16) + box(12, 2, 8, 16) + box(22, 2, 8, 16)) },
+  'cols-4': { label: 'Four columns', svg: svg(box(2, 2, 5.5, 16) + box(9.5, 2, 5.5, 16) + box(17, 2, 5.5, 16) + box(24.5, 2, 5.5, 16)) },
+  'media-left': { label: 'Image left', svg: svg(box(2, 3, 12, 14, solid) + line(18, 6, 30) + line(18, 10, 30) + line(18, 14, 26)) },
+  'media-right': { label: 'Image right', svg: svg(box(18, 3, 12, 14, solid) + line(2, 6, 14) + line(2, 10, 14) + line(2, 14, 10)) },
+  'media-top': { label: 'Image on top', svg: svg(box(2, 2, 28, 8, solid) + line(2, 14, 30) + line(2, 17, 22)) },
+  list: { label: 'List', svg: svg(line(3, 5, 4) + line(8, 5, 29) + line(3, 10, 4) + line(8, 10, 29) + line(3, 15, 4) + line(8, 15, 29)) },
+  cards: { label: 'Cards', svg: svg(box(2, 2, 13, 7) + box(17, 2, 13, 7) + box(2, 11, 13, 7) + box(17, 11, 13, 7)) },
+  centered: { label: 'Centered', svg: svg(line(6, 5, 26) + line(9, 10, 23) + line(11, 15, 21)) },
+  'card-flat': { label: 'Flat', svg: svg(box(5, 3, 22, 14)) },
+  'card-raised': { label: 'Raised', svg: svg(box(7, 5, 22, 14, ' stroke-opacity="0.35"') + box(4, 2, 22, 14, ' fill="var(--mirk-bg, transparent)"')) },
+})