@caretcms/core 0.1.0

package/static/cms/editor/panel.js

@@ -0,0 +1,70 @@
+import { STUDIO_PATH } from './config.js';
+
+export function mountStudioPanel({ studioButton }) {
+  if (!STUDIO_PATH) {
+    studioButton?.setAttribute('hidden', 'hidden');
+    studioButton?.setAttribute('aria-hidden', 'true');
+    return { iframe: null, closePanel() {} };
+  }
+
+  const panel = document.createElement('div');
+  panel.className = 'cms-studio-panel';
+
+  const iframe = document.createElement('iframe');
+  iframe.src = STUDIO_PATH;
+  iframe.title = 'Content Studio';
+  panel.appendChild(iframe);
+  document.body.appendChild(panel);
+
+  function openPanel(animate = true) {
+    if (!animate) {
+      panel.classList.add('no-transition');
+      document.body.classList.add('no-transition');
+    }
+    panel.classList.add('open');
+    document.body.classList.add('cms-panel-open');
+    studioButton?.classList.add('active');
+    sessionStorage.setItem('cms-panel-open', '1');
+    if (!animate) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          panel.classList.remove('no-transition');
+          document.body.classList.remove('no-transition');
+        });
+      });
+    }
+  }
+
+  function closePanel() {
+    panel.classList.remove('open');
+    document.body.classList.remove('cms-panel-open');
+    studioButton?.classList.remove('active');
+    sessionStorage.setItem('cms-panel-open', '0');
+  }
+
+  function togglePanel() {
+    if (panel.classList.contains('open')) {
+      closePanel();
+    } else {
+      openPanel();
+    }
+  }
+
+  studioButton?.addEventListener('click', togglePanel);
+
+  // Restore panel state from sessionStorage (without animation)
+  if (sessionStorage.getItem('cms-panel-open') === '1') {
+    openPanel(false);
+  }
+
+  // Escape key closes panel (only when no CMS element is focused)
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape' || !panel.classList.contains('open')) return;
+    const focused = document.activeElement;
+    if (!focused || !focused.matches('[data-caret]')) {
+      closePanel();
+    }
+  });
+
+  return { iframe, closePanel };
+}

package/static/cms/editor/rich-toolbar.css

@@ -0,0 +1,67 @@
+/* ---------------------------------------------------------------------------
+   Rich text toolbar — floating format bar for [data-caret-rich] elements
+   --------------------------------------------------------------------------- */
+
+.cms-rich-toolbar {
+  position: fixed;
+  z-index: 100002;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--cms-surface);
+  border: 1px solid rgba(59, 130, 246, 0.15);
+  border-radius: 4px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  padding: 4px;
+  font-family: var(--cms-font);
+  animation: cms-popover-in 0.15s ease-out;
+  pointer-events: auto;
+}
+
+.cms-rich-toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  font-family: var(--cms-font);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+  padding: 0;
+  line-height: 1;
+}
+
+.cms-rich-toolbar-btn:hover {
+  color: white;
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.cms-rich-toolbar-btn.active {
+  color: var(--cms-accent);
+  background: var(--cms-accent-soft);
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+.cms-rich-toolbar-sep {
+  width: 1px;
+  height: 18px;
+  background: rgba(255, 255, 255, 0.08);
+  margin: 0 2px;
+}
+
+/* Rich text editable visual indicator */
+[data-caret-rich].cms-editable:hover {
+  outline-color: rgba(59, 130, 246, 0.3);
+}
+
+[data-caret-rich].cms-editable:focus {
+  outline-color: var(--cms-accent);
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}

package/static/cms/editor/rich-toolbar.js

@@ -0,0 +1,200 @@
+/**
+ * Floating rich text format toolbar for [data-caret-rich] elements.
+ *
+ * Singleton toolbar appears on text selection within rich-text fields.
+ * Uses document.execCommand() for formatting (still the most reliable
+ * cross-browser approach for contenteditable formatting).
+ */
+
+import { sanitizeHtml } from './sanitize.js';
+
+let toolbar = null;
+let currentRichEl = null;
+let showLinkPopupFn = null;
+
+const BUTTONS = [
+  { cmd: 'bold', label: 'B', title: 'Bold (Ctrl+B)', style: 'font-weight:700' },
+  { cmd: 'italic', label: 'I', title: 'Italic (Ctrl+I)', style: 'font-style:italic' },
+  { sep: true },
+  { cmd: 'createLink', label: '\u{1F517}', title: 'Link (Ctrl+K)', isLink: true },
+  { cmd: 'removeFormat', label: 'T\u2093', title: 'Clear formatting' },
+];
+
+function createToolbar() {
+  const el = document.createElement('div');
+  el.className = 'cms-rich-toolbar';
+  el.style.display = 'none';
+
+  for (const btn of BUTTONS) {
+    if (btn.sep) {
+      const sep = document.createElement('div');
+      sep.className = 'cms-rich-toolbar-sep';
+      el.appendChild(sep);
+      continue;
+    }
+
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'cms-rich-toolbar-btn';
+    button.title = btn.title;
+    button.dataset.cmd = btn.cmd;
+    if (btn.style) button.style.cssText = btn.style;
+
+    // Use text for simple labels, innerHTML for the link icon
+    if (btn.isLink) {
+      button.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>`;
+    } else {
+      button.textContent = btn.label;
+    }
+
+    button.addEventListener('mousedown', (e) => {
+      e.preventDefault(); // Prevent blur on the rich element
+      if (btn.isLink) {
+        handleLinkButton();
+      } else {
+        document.execCommand(btn.cmd, false, null);
+        updateActiveStates();
+      }
+    });
+
+    el.appendChild(button);
+  }
+
+  // Prevent toolbar clicks from stealing focus
+  el.addEventListener('mousedown', (e) => e.preventDefault());
+
+  document.body.appendChild(el);
+  return el;
+}
+
+function handleLinkButton() {
+  const sel = window.getSelection();
+  if (!sel || sel.isCollapsed || !currentRichEl) return;
+
+  const range = sel.getRangeAt(0).cloneRange();
+  const selRect = range.getBoundingClientRect();
+
+  // Check if selection is already a link
+  const anchorNode = sel.anchorNode;
+  const existingLink = anchorNode?.nodeType === Node.TEXT_NODE
+    ? anchorNode.parentElement?.closest('a')
+    : anchorNode instanceof Element ? anchorNode.closest('a') : null;
+  const initialUrl = existingLink?.getAttribute('href') || '';
+
+  if (showLinkPopupFn) {
+    showLinkPopupFn(selRect, initialUrl, (url) => {
+      currentRichEl?.focus();
+
+      if (url) {
+        const newSel = window.getSelection();
+        newSel.removeAllRanges();
+        newSel.addRange(range);
+
+        if (existingLink) {
+          // Update existing link
+          existingLink.setAttribute('href', url);
+        } else {
+          document.execCommand('createLink', false, url);
+        }
+
+        // Set security attrs on external links
+        const freshSel = window.getSelection();
+        if (freshSel && freshSel.anchorNode) {
+          const textNode = freshSel.anchorNode;
+          const newLink = textNode.nodeType === Node.TEXT_NODE
+            ? textNode.parentElement?.closest('a')
+            : textNode instanceof Element ? textNode.closest('a') : null;
+          if (newLink && /^https?:/i.test(url)) {
+            newLink.setAttribute('target', '_blank');
+            newLink.setAttribute('rel', 'noopener noreferrer');
+          }
+        }
+      } else if (url === '' && existingLink) {
+        // Empty URL = unlink
+        document.execCommand('unlink', false, null);
+      }
+
+      hide();
+    });
+  }
+}
+
+function updateActiveStates() {
+  if (!toolbar) return;
+  const buttons = toolbar.querySelectorAll('.cms-rich-toolbar-btn[data-cmd]');
+  for (const btn of buttons) {
+    const cmd = btn.dataset.cmd;
+    if (cmd === 'createLink' || cmd === 'removeFormat') continue;
+    try {
+      btn.classList.toggle('active', document.queryCommandState(cmd));
+    } catch {
+      // queryCommandState can throw for unsupported commands
+    }
+  }
+}
+
+function position(sel) {
+  if (!toolbar || !sel || sel.isCollapsed) return;
+
+  const range = sel.getRangeAt(0);
+  const rect = range.getBoundingClientRect();
+  if (!rect.width && !rect.height) return;
+
+  const tbRect = toolbar.getBoundingClientRect();
+  let left = rect.left + rect.width / 2 - tbRect.width / 2;
+  left = Math.max(8, Math.min(left, window.innerWidth - tbRect.width - 8));
+
+  // Prefer above selection, flip below if near top
+  let top = rect.top - tbRect.height - 8;
+  if (top < 8) {
+    top = rect.bottom + 8;
+  }
+
+  toolbar.style.left = `${left}px`;
+  toolbar.style.top = `${top}px`;
+}
+
+function show(sel) {
+  if (!toolbar) toolbar = createToolbar();
+  toolbar.style.display = 'flex';
+  updateActiveStates();
+  position(sel);
+}
+
+function hide() {
+  if (toolbar) {
+    toolbar.style.display = 'none';
+  }
+  currentRichEl = null;
+}
+
+function onSelectionChange() {
+  const sel = window.getSelection();
+  if (!sel || sel.isCollapsed) {
+    hide();
+    return;
+  }
+
+  // Check if selection is inside a rich element
+  const anchor = sel.anchorNode;
+  const richEl = anchor instanceof Element
+    ? anchor.closest('[data-caret-rich]')
+    : anchor?.parentElement?.closest('[data-caret-rich]');
+
+  if (!richEl) {
+    hide();
+    return;
+  }
+
+  currentRichEl = richEl;
+  show(sel);
+}
+
+/**
+ * Mount the rich text toolbar. Call once during editor boot.
+ * @param {{ state: object, showToast: Function, showLinkPopup?: Function }} opts
+ */
+export function mountRichToolbar({ state, showToast, showLinkPopup }) {
+  showLinkPopupFn = showLinkPopup || null;
+  document.addEventListener('selectionchange', onSelectionChange);
+}

package/static/cms/editor/sanitize.js

@@ -0,0 +1,89 @@
+/**
+ * Client-side HTML sanitizer for rich text fields.
+ *
+ * Uses DOMParser + TreeWalker to sanitize HTML against an allowlist.
+ * Only inline formatting elements are permitted — no block-level tags.
+ */
+
+const ALLOWED_TAGS = new Set([
+  'b', 'strong', 'i', 'em', 'u', 's', 'a', 'br', 'sub', 'sup',
+]);
+
+const ALLOWED_ATTRS = {
+  a: new Set(['href', 'target', 'rel']),
+};
+
+const SAFE_HREF_RE = /^(?:https?:|mailto:|tel:|\/)/i;
+
+/**
+ * Sanitize an HTML string, keeping only allowed inline tags and attributes.
+ * @param {string} html
+ * @returns {string}
+ */
+export function sanitizeHtml(html) {
+  if (!html) return '';
+
+  const doc = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html');
+  sanitizeNode(doc.body);
+  return doc.body.innerHTML;
+}
+
+/**
+ * Recursively sanitize a DOM node in place.
+ * @param {Node} parent
+ */
+function sanitizeNode(parent) {
+  const children = Array.from(parent.childNodes);
+
+  for (const node of children) {
+    if (node.nodeType === Node.TEXT_NODE) continue;
+
+    if (node.nodeType === Node.COMMENT_NODE) {
+      parent.removeChild(node);
+      continue;
+    }
+
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      parent.removeChild(node);
+      continue;
+    }
+
+    const el = /** @type {Element} */ (node);
+    const tag = el.tagName.toLowerCase();
+
+    if (!ALLOWED_TAGS.has(tag)) {
+      // Unwrap: keep children, remove the disallowed element
+      const frag = document.createDocumentFragment();
+      while (el.firstChild) frag.appendChild(el.firstChild);
+      parent.replaceChild(frag, el);
+      // Re-sanitize the newly promoted children
+      sanitizeNode(parent);
+      return;
+    }
+
+    // Strip disallowed attributes
+    const allowed = ALLOWED_ATTRS[tag];
+    const attrs = Array.from(el.attributes);
+    for (const attr of attrs) {
+      if (!allowed || !allowed.has(attr.name)) {
+        el.removeAttribute(attr.name);
+      }
+    }
+
+    // Validate href on <a>
+    if (tag === 'a') {
+      const href = el.getAttribute('href') || '';
+      if (!SAFE_HREF_RE.test(href)) {
+        el.removeAttribute('href');
+      }
+      // Force security attrs on external links
+      if (href && /^https?:/i.test(href)) {
+        el.setAttribute('target', '_blank');
+        el.setAttribute('rel', 'noopener noreferrer');
+      }
+    }
+
+    // Recurse into children
+    sanitizeNode(el);
+  }
+}

package/static/cms/editor/save-queue.js

@@ -0,0 +1,166 @@
+import { buildCmsUrl } from './config.js';
+import { mutateHeaders, readHeaders } from './security.js';
+
+function entryKey(collection, id) {
+  return `${collection}::${id}`;
+}
+
+function isRecord(value) {
+  return typeof value === 'object' && value !== null;
+}
+
+function getNestedStringValue(data, path) {
+  if (!isRecord(data)) return undefined;
+
+  let current = data;
+  for (const segment of path.split('.')) {
+    if (!isRecord(current) && !Array.isArray(current)) return undefined;
+    current = current[segment];
+  }
+
+  return typeof current === 'string' ? current : undefined;
+}
+
+async function fetchEntrySnapshot(collection, id, onUnauthorized) {
+  const res = await fetch(buildCmsUrl('/entries', { collection, id }), {
+    headers: readHeaders(),
+  });
+  if (res.status === 401) {
+    onUnauthorized();
+    return null;
+  }
+  if (!res.ok) throw new Error('Failed to load entry');
+
+  const json = await res.json();
+  const entry = Array.isArray(json.entries) ? json.entries[0] : null;
+  if (!entry || !isRecord(entry.data)) {
+    return { revision: 0, data: {} };
+  }
+
+  return {
+    revision: Number.isInteger(entry.revision) ? entry.revision : 0,
+    data: entry.data,
+  };
+}
+
+export function createSaveField({ setStatus, onUnauthorized }) {
+  let saveQueue = Promise.resolve();
+  const revisionByEntry = new Map();
+  const revisionLoadByEntry = new Map();
+
+  async function ensureRevision(collection, id) {
+    const key = entryKey(collection, id);
+    if (revisionByEntry.has(key)) {
+      return revisionByEntry.get(key);
+    }
+
+    const inFlight = revisionLoadByEntry.get(key);
+    if (inFlight) return inFlight;
+
+    const task = (async () => {
+      const snapshot = await fetchEntrySnapshot(collection, id, onUnauthorized);
+      if (!snapshot) return null;
+      revisionByEntry.set(key, snapshot.revision);
+      return snapshot.revision;
+    })().finally(() => {
+      revisionLoadByEntry.delete(key);
+    });
+
+    revisionLoadByEntry.set(key, task);
+    return task;
+  }
+
+  async function readLatestFieldValue(collection, id, field) {
+    const snapshot = await fetchEntrySnapshot(collection, id, onUnauthorized);
+    if (!snapshot) return { currentRevision: undefined, latestValue: undefined };
+
+    revisionByEntry.set(entryKey(collection, id), snapshot.revision);
+    return {
+      currentRevision: snapshot.revision,
+      latestValue: getNestedStringValue(snapshot.data, field),
+    };
+  }
+
+  async function execSave(collection, id, field, value) {
+    setStatus('saving', 'Saving...');
+    const key = entryKey(collection, id);
+
+    try {
+      const expectedRevision = await ensureRevision(collection, id);
+      if (expectedRevision === null) {
+        return { ok: false, reason: 'unauthorized' };
+      }
+
+      const body = { type: 'save_field', collection, id, field, value };
+      if (typeof expectedRevision === 'number') {
+        body.expectedRevision = expectedRevision;
+      }
+
+      const res = await fetch(buildCmsUrl('/mutate'), {
+        method: 'POST',
+        headers: await mutateHeaders(),
+        body: JSON.stringify(body),
+      });
+      if (res.status === 401) {
+        onUnauthorized();
+        return { ok: false, reason: 'unauthorized' };
+      }
+
+      const json = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        if (res.status === 409) {
+          const currentRevision = Number.isInteger(json.currentRevision)
+            ? json.currentRevision
+            : undefined;
+          if (typeof currentRevision === 'number') {
+            revisionByEntry.set(key, currentRevision);
+          }
+
+          let latest = { currentRevision: undefined, latestValue: undefined };
+          try {
+            latest = await readLatestFieldValue(collection, id, field);
+          } catch {
+            // Keep conflict semantics even if a follow-up refresh fails.
+          }
+          setStatus('error', 'Revision conflict');
+          return {
+            ok: false,
+            reason: 'conflict',
+            currentRevision:
+              typeof latest.currentRevision === 'number'
+                ? latest.currentRevision
+                : currentRevision,
+            latestValue: latest.latestValue,
+          };
+        }
+
+        setStatus('error', 'Save failed');
+        return { ok: false, reason: 'error' };
+      }
+
+      const nextRevision = Number.isInteger(json.revision)
+        ? json.revision
+        : typeof expectedRevision === 'number'
+          ? expectedRevision + 1
+          : undefined;
+      if (typeof nextRevision === 'number') {
+        revisionByEntry.set(key, nextRevision);
+      }
+
+      setStatus('idle', 'Saved');
+      return { ok: true, revision: nextRevision };
+    } catch {
+      setStatus('error', 'Save failed');
+      return { ok: false, reason: 'error' };
+    }
+  }
+
+  return function saveField(collection, id, field, value) {
+    const task = saveQueue.then(() => execSave(collection, id, field, value));
+    saveQueue = task.then(
+      () => undefined,
+      () => undefined,
+    );
+    return task;
+  };
+}

package/static/cms/editor/section-controls/activation.js

@@ -0,0 +1,10 @@
+export function bindSectionActivation({ sectionNode, sectionId, setActiveSection }) {
+  sectionNode.addEventListener('mouseenter', () => setActiveSection(sectionId));
+  sectionNode.addEventListener('focusin', () => setActiveSection(sectionId));
+  sectionNode.addEventListener('pointerdown', (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    if (target.closest('.cms-section-add-picker')) return;
+    setActiveSection(sectionId);
+  });
+}

package/static/cms/editor/section-controls/api.js

@@ -0,0 +1,87 @@
+import { buildCmsUrl } from '../config.js';
+import { isRecord } from './utils.js';
+import { mutateHeaders, readHeaders } from '../security.js';
+
+export async function fetchPageEntry({ collection, id, onUnauthorized }) {
+  const res = await fetch(buildCmsUrl('/entries', { collection, id }), {
+    headers: readHeaders(),
+  });
+  if (res.status === 401) {
+    onUnauthorized();
+    return null;
+  }
+  if (!res.ok) throw new Error('Failed to load page data');
+
+  const json = await res.json();
+  const entry = Array.isArray(json.entries) ? json.entries[0] : null;
+  if (!entry || !isRecord(entry.data)) {
+    throw new Error('Page entry not found');
+  }
+
+  return {
+    data: entry.data,
+    revision: Number.isInteger(entry.revision) ? entry.revision : 0,
+  };
+}
+
+export async function savePageLayout({
+  id,
+  sections,
+  expectedRevision,
+  onUnauthorized,
+}) {
+  const res = await fetch(buildCmsUrl('/mutate'), {
+    method: 'POST',
+    headers: await mutateHeaders(),
+    body: JSON.stringify({
+      type: 'update_page_layout',
+      id,
+      sections,
+      expectedRevision,
+    }),
+  });
+
+  if (res.status === 401) {
+    onUnauthorized();
+    return { ok: false, reason: 'unauthorized' };
+  }
+
+  const json = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    if (res.status === 409) {
+      return {
+        ok: false,
+        reason: 'conflict',
+        currentRevision: Number.isInteger(json.currentRevision) ? json.currentRevision : null,
+      };
+    }
+    const issue = Array.isArray(json.issues) ? json.issues[0] : null;
+    const issueDetail =
+      issue &&
+      typeof issue === 'object' &&
+      typeof issue.path === 'string' &&
+      typeof issue.message === 'string'
+        ? `${issue.path}: ${issue.message}`
+        : null;
+    return {
+      ok: false,
+      reason: 'error',
+      error:
+        typeof json.error === 'string'
+          ? issueDetail
+            ? `${json.error} (${issueDetail})`
+            : json.error
+          : 'Failed to save layout',
+    };
+  }
+
+  return {
+    ok: true,
+    revision:
+      Number.isInteger(json.revision)
+        ? json.revision
+        : Number.isInteger(expectedRevision)
+          ? expectedRevision + 1
+          : 1,
+  };
+}