@panphora/hyper-cms 0.4.0

package/src/styles.css

@@ -0,0 +1,298 @@
+.hcms-shell {
+  --hcms-primary: #2563eb;
+  --hcms-bg: #F6F7F9;
+  --hcms-text: #0f172a;
+  --hcms-muted: #64748b;
+  --hcms-border: #e2e8f0;
+  --hcms-error: #b91c1c;
+  --hcms-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-family: var(--hcms-font-family);
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--hcms-text);
+  background: var(--hcms-bg);
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100vw;
+  max-width: 400px;
+  overflow-y: auto;
+  border-left: 1px solid var(--hcms-border);
+  z-index: 2147483000;
+  display: flex;
+  flex-direction: column;
+  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.08);
+}
+
+.hcms-shell.hcms-side-left {
+  left: 0;
+  right: auto;
+  border-left: 0;
+  border-right: 1px solid var(--hcms-border);
+  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.08);
+}
+
+.hcms-shell * {
+  box-sizing: border-box;
+}
+
+.hcms-shell-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--hcms-border);
+}
+
+.hcms-shell-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.hcms-shell-close {
+  background: transparent;
+  border: 0;
+  color: var(--hcms-muted);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.hcms-shell-close:hover { background: rgba(15, 23, 42, 0.06); color: var(--hcms-text); }
+
+.hcms-shell-error {
+  margin: 12px 16px;
+  padding: 10px 12px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: var(--hcms-error);
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.hcms-form {
+  flex: 1;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.hcms-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.hcms-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--hcms-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.hcms-input {
+  font-family: inherit;
+  font-size: 14px;
+  padding: 8px 10px;
+  border: 1px solid var(--hcms-border);
+  border-radius: 6px;
+  background: #fdfdfd;
+  color: var(--hcms-text);
+  width: 100%;
+}
+.hcms-input:focus {
+  outline: 2px solid var(--hcms-primary);
+  outline-offset: -1px;
+  border-color: var(--hcms-primary);
+}
+
+textarea.hcms-input { min-height: 80px; resize: vertical; }
+
+.hcms-object {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  border: 1px solid var(--hcms-border);
+  border-radius: 8px;
+  background: #fdfdfd;
+}
+
+.hcms-object-title,
+.hcms-array-title {
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--hcms-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.hcms-array {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.hcms-array-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.hcms-array-items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.hcms-array-item,
+.hcms-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: #fdfdfd;
+  border: 1px solid var(--hcms-border);
+  border-radius: 6px;
+}
+
+.hcms-card {
+  flex-direction: column;
+  align-items: stretch;
+  padding: 12px;
+  gap: 10px;
+}
+
+.hcms-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.hcms-card-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.hcms-drag-handle {
+  cursor: grab;
+  color: var(--hcms-muted);
+  user-select: none;
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.hcms-remove,
+.hcms-add {
+  font-family: inherit;
+  background: transparent;
+  border: 1px solid var(--hcms-border);
+  border-radius: 6px;
+  padding: 4px 10px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--hcms-muted);
+}
+.hcms-remove:hover { color: var(--hcms-error); border-color: #fecaca; }
+.hcms-add { align-self: flex-start; padding: 6px 12px; color: var(--hcms-text); }
+.hcms-add:hover { border-color: var(--hcms-primary); color: var(--hcms-primary); }
+
+.hcms-error {
+  margin: 6px 0;
+  padding: 6px 10px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: var(--hcms-error);
+  border-radius: 6px;
+  font-size: 12px;
+}
+.hcms-error[hidden] { display: none; }
+
+.hcms-shell-footer {
+  border-top: 1px solid var(--hcms-border);
+  padding: 12px 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.hcms-shell-save {
+  font-family: inherit;
+  background: var(--hcms-primary);
+  color: #fdfdfd;
+  border: 0;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 14px;
+  cursor: pointer;
+  font-weight: 500;
+}
+.hcms-shell-save:hover { filter: brightness(1.08); }
+
+@media (max-width: 799px) {
+  .hcms-shell { max-width: 100vw; }
+}
+
+/* Scroll lock only when the sidebar covers the page (overlay + mobile fullscreen). In push mode the page keeps its own scroll. */
+body.hcms-open.hcms-overlay {
+  overflow: hidden;
+}
+
+body.hcms-open:not(.hcms-overlay) {
+  padding-right: 400px;
+}
+body.hcms-open.hcms-side-left:not(.hcms-overlay) {
+  padding-right: 0;
+  padding-left: 400px;
+}
+@media (max-width: 799px) {
+  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;
+  }
+}
+
+/* sr-only: visually hidden but accessible to screen readers + becomes
+   visible on keyboard focus, so keyboard users can see move buttons land. */
+.hcms-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.hcms-sr-only:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 2px 6px;
+  margin: 0 2px;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+  background: #F6F7F9;
+  border: 1px solid #c0c8d6;
+  border-radius: 3px;
+  color: #1f2532;
+  font-size: 12px;
+  cursor: pointer;
+}
+.hcms-sr-only[hidden] { display: none; }

package/src/templates.js

@@ -0,0 +1,184 @@
+import { getRuleAtPath } from './path.js'
+
+export function humanize(key) {
+  return key
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+    .replace(/[-_]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .replace(/^./, (c) => c.toUpperCase())
+}
+
+const DEFAULT_TEMPLATES = {
+  '@scalar': `
+    <label class="hcms-field" data-hcms-shape="scalar">
+      <span class="hcms-label" data-hcms-label></span>
+      <input class="hcms-input" data-hcms-field />
+      <div class="hcms-error" hidden></div>
+    </label>
+  `,
+  '@object': `
+    <section class="hcms-object" data-hcms-shape="object">
+      <h3 class="hcms-object-title" data-hcms-label></h3>
+      <div class="hcms-object-fields"></div>
+      <div class="hcms-error" hidden></div>
+    </section>
+  `,
+  '@scalar-array': `
+    <section class="hcms-array hcms-scalar-array" data-hcms-shape="scalar-array">
+      <header class="hcms-array-header">
+        <h3 class="hcms-array-title" data-hcms-label></h3>
+      </header>
+      <ul class="hcms-array-items"></ul>
+      <div class="hcms-error" hidden></div>
+      <button type="button" class="hcms-add" data-hcms-action="add">+ Add</button>
+    </section>
+  `,
+  '@scalar-array-item': `
+    <li class="hcms-array-item" draggable="true">
+      <span class="hcms-drag-handle" aria-hidden="true">::</span>
+      <input class="hcms-input" data-hcms-field />
+      <button type="button" class="hcms-move hcms-move-up hcms-sr-only" data-hcms-action="move-up" aria-label="Move up">↑</button>
+      <button type="button" class="hcms-move hcms-move-down hcms-sr-only" data-hcms-action="move-down" aria-label="Move down">↓</button>
+      <button type="button" class="hcms-remove" data-hcms-action="remove" aria-label="Remove">x</button>
+      <div class="hcms-error" hidden></div>
+    </li>
+  `,
+  '@object-array': `
+    <section class="hcms-array hcms-object-array" data-hcms-shape="object-array">
+      <header class="hcms-array-header">
+        <h3 class="hcms-array-title" data-hcms-label></h3>
+      </header>
+      <div class="hcms-array-items"></div>
+      <div class="hcms-error" hidden></div>
+      <button type="button" class="hcms-add" data-hcms-action="add">+ Add</button>
+    </section>
+  `,
+  '@object-array-item': `
+    <article class="hcms-card" draggable="true">
+      <header class="hcms-card-header">
+        <span class="hcms-drag-handle" aria-hidden="true">::</span>
+        <button type="button" class="hcms-move hcms-move-up hcms-sr-only" data-hcms-action="move-up" aria-label="Move up">↑</button>
+        <button type="button" class="hcms-move hcms-move-down hcms-sr-only" data-hcms-action="move-down" aria-label="Move down">↓</button>
+        <button type="button" class="hcms-remove" data-hcms-action="remove" aria-label="Remove">x</button>
+      </header>
+      <div class="hcms-card-fields"></div>
+      <div class="hcms-error" hidden></div>
+    </article>
+  `,
+}
+
+const DEFAULT_KEYS = Object.keys(DEFAULT_TEMPLATES)
+
+export function injectDefaults(doc) {
+  const head = doc.head || doc.documentElement
+  if (!head) return
+  for (const key of DEFAULT_KEYS) {
+    if (findTemplate(doc, key)) continue
+    const tpl = doc.createElement('template')
+    tpl.setAttribute('data-hcms-tpl', key)
+    tpl.setAttribute('save-remove', '')
+    tpl.innerHTML = DEFAULT_TEMPLATES[key].trim()
+    head.appendChild(tpl)
+  }
+}
+
+export function findTemplate(doc, key) {
+  if (!doc || !doc.querySelector) return null
+  return doc.querySelector(`template[data-hcms-tpl="${cssEscape(key)}"]`)
+}
+
+function cssEscape(value) {
+  if (typeof CSS !== 'undefined' && CSS.escape) return CSS.escape(value)
+  return String(value).replace(/[^a-zA-Z0-9_\-.*]/g, (c) => '\\' + c)
+}
+
+export function shapeKindOf(rule) {
+  if (typeof rule === 'string') {
+    return rule.endsWith('[]') ? 'scalar-array' : 'scalar'
+  }
+  if (Array.isArray(rule)) return 'object-array'
+  if (typeof rule === 'object' && rule !== null) return 'object'
+  return 'scalar'
+}
+
+const SHAPE_TO_DEFAULT_KEY = {
+  scalar: '@scalar',
+  object: '@object',
+  'scalar-array': '@scalar-array',
+  'object-array': '@object-array',
+}
+
+const SHAPE_TO_ITEM_KEY = {
+  'scalar-array': '@scalar-array-item',
+  'object-array': '@object-array-item',
+}
+
+export function templateKeyForPath(pathArr, pageRules) {
+  const rule = getRuleAtPath(pageRules, pathArr)
+  const shape = shapeKindOf(rule)
+  return SHAPE_TO_DEFAULT_KEY[shape] || '@scalar'
+}
+
+export function itemTemplateKeyForArrayPath(pathArr, pageRules) {
+  const rule = getRuleAtPath(pageRules, pathArr)
+  const shape = shapeKindOf(rule)
+  return SHAPE_TO_ITEM_KEY[shape] || null
+}
+
+export function buildTemplateMap(pageRules, doc) {
+  const map = new Map()
+  walk([], pageRules)
+  return map
+
+  function walk(pathArr, rule) {
+    const pathStr = pathArr.join('.')
+    const wildcardKey = pathArr.map((s) => (typeof s === 'number' ? '*' : s)).join('.')
+    const shape = shapeKindOf(rule)
+
+    let tpl =
+      (pathStr && findTemplate(doc, pathStr)) ||
+      (wildcardKey && wildcardKey !== pathStr && findTemplate(doc, wildcardKey)) ||
+      findTemplate(doc, SHAPE_TO_DEFAULT_KEY[shape] || '@scalar')
+
+    map.set(pathStr, tpl)
+
+    if (shape === 'object') {
+      for (const [k, child] of Object.entries(rule)) walk([...pathArr, k], child)
+    } else if (shape === 'object-array' || shape === 'scalar-array') {
+      const itemPath = [...pathArr, '*']
+      const itemKey = itemPath.map((s) => (typeof s === 'number' ? '*' : s)).join('.')
+      const itemShape = shape === 'object-array' ? 'object-array-item' : 'scalar-array-item'
+      const itemTpl =
+        findTemplate(doc, itemKey) || findTemplate(doc, '@' + itemShape)
+      map.set(itemKey, itemTpl)
+      if (shape === 'object-array') {
+        const itemRule = rule[1]
+        if (itemRule && typeof itemRule === 'object' && !Array.isArray(itemRule)) {
+          for (const [k, child] of Object.entries(itemRule)) walk([...itemPath, k], child)
+        }
+      }
+    }
+  }
+}
+
+export function isInlineTemplate(tplEl) {
+  if (!tplEl) return false
+  const root = tplEl.content || tplEl
+  return !!root.querySelector('[data-hcms-field]')
+}
+
+export function slotSelectorFor(kind) {
+  switch (kind) {
+    case 'object':
+      return '.hcms-object-fields'
+    case 'object-array-item':
+      return '.hcms-card-fields'
+    case 'scalar-array':
+    case 'object-array':
+      return '.hcms-array-items'
+    default:
+      return null
+  }
+}