@caretcms/core 0.1.0

package/static/cms/editor/config.js

@@ -0,0 +1,118 @@
+/** Runtime config injected by the integration bootstrap script. */
+const defaults = {
+  mode: 'embedded',
+  mountPath: '/admin',
+  apiBasePath: '/api/cms',
+  cloud: null,
+};
+
+const cfg = (typeof window !== 'undefined' && window.__CARET__) || defaults;
+
+function normalizePath(value, fallback) {
+  if (!value || typeof value !== 'string') return fallback;
+  const trimmed = value.trim();
+  if (!trimmed) return fallback;
+  const withLeadingSlash = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+  return withLeadingSlash.length > 1 && withLeadingSlash.endsWith('/')
+    ? withLeadingSlash.slice(0, -1)
+    : withLeadingSlash;
+}
+
+function normalizeEndpoint(value) {
+  if (!value || typeof value !== 'string') return '';
+  return value.trim().replace(/\/$/, '');
+}
+
+function getCloudConfig() {
+  if (!cfg || cfg.mode !== 'cloud' || !cfg.cloud || typeof cfg.cloud !== 'object') {
+    return null;
+  }
+
+  const endpoint = normalizeEndpoint(cfg.cloud.endpoint);
+  const projectId =
+    typeof cfg.cloud.projectId === 'string' ? cfg.cloud.projectId.trim() : '';
+  if (!endpoint || !projectId) return null;
+
+  return {
+    endpoint,
+    projectId,
+    contentPath: normalizePath(cfg.cloud.contentPath, '/content'),
+    publicToken:
+      typeof cfg.cloud.publicToken === 'string' && cfg.cloud.publicToken.trim()
+        ? cfg.cloud.publicToken.trim()
+        : null,
+    environment:
+      typeof cfg.cloud.environment === 'string' && cfg.cloud.environment.trim()
+        ? cfg.cloud.environment.trim()
+        : null,
+  };
+}
+
+function getStorageKey(cloud) {
+  return `caretcms:cloud-session:${cloud.endpoint}:${cloud.projectId}`;
+}
+
+export const CMS_CONFIG = cfg;
+export const CMS_MODE = cfg.mode === 'cloud' || cfg.mode === 'hybrid' ? cfg.mode : 'embedded';
+export const MOUNT_PATH = normalizePath(cfg.mountPath, defaults.mountPath);
+export const API_BASE = normalizePath(cfg.apiBasePath, defaults.apiBasePath);
+export const CLOUD = getCloudConfig();
+export const STUDIO_PATH = CLOUD ? null : `${MOUNT_PATH}/cms`;
+
+export function isCloudMode() {
+  return CMS_MODE === 'cloud' && CLOUD !== null;
+}
+
+export function getCloudSessionToken() {
+  if (!isCloudMode() || typeof window === 'undefined') return null;
+  try {
+    const value = window.localStorage.getItem(getStorageKey(CLOUD));
+    return value && value.trim() ? value.trim() : null;
+  } catch {
+    return null;
+  }
+}
+
+export function clearCloudSessionToken() {
+  if (!isCloudMode() || typeof window === 'undefined') return;
+  try {
+    window.localStorage.removeItem(getStorageKey(CLOUD));
+  } catch {
+    // Ignore localStorage failures.
+  }
+}
+
+export function buildCmsUrl(path, search) {
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  let url;
+
+  if (isCloudMode()) {
+    url = new URL(`${CLOUD.contentPath}${normalizedPath}`, `${CLOUD.endpoint}/`);
+    url.searchParams.set('projectId', CLOUD.projectId);
+    if (CLOUD.environment) {
+      url.searchParams.set('environment', CLOUD.environment);
+    }
+  } else {
+    url = new URL(`${API_BASE}${normalizedPath}`, window.location.origin);
+  }
+
+  if (search) {
+    const params = search instanceof URLSearchParams ? search : new URLSearchParams(search);
+    for (const [key, value] of params.entries()) {
+      if (value) url.searchParams.set(key, value);
+    }
+  }
+
+  return url.toString();
+}
+
+export function getEditorLoginUrl(redirectTo = window.location.href) {
+  if (isCloudMode()) {
+    const url = new URL(`${CLOUD.contentPath}/admin`, `${CLOUD.endpoint}/`);
+    url.searchParams.set('projectId', CLOUD.projectId);
+    url.searchParams.set('redirect', redirectTo);
+    return url.toString();
+  }
+
+  return `${MOUNT_PATH}?redirect=${encodeURIComponent(redirectTo)}`;
+}

package/static/cms/editor/content-map.css

@@ -0,0 +1,141 @@
+.cms-content-map {
+  position: fixed;
+  top: 48px;
+  right: -340px;
+  width: 320px;
+  max-height: calc(100vh - 60px);
+  background: #1a1a2e;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px 0 0 8px;
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
+  z-index: 100001;
+  transition: right 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+  color: #e0e0e0;
+}
+
+.cms-content-map-open {
+  right: 0;
+}
+
+.cms-content-map-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.cms-content-map-title {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.cms-content-map-close {
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.cms-content-map-close:hover {
+  color: #fff;
+}
+
+.cms-content-map-body {
+  overflow-y: auto;
+  flex: 1;
+  padding: 8px 0;
+}
+
+.cms-content-map-loading,
+.cms-content-map-empty {
+  padding: 20px 14px;
+  text-align: center;
+  color: #888;
+}
+
+.cms-content-map-group {
+  margin-bottom: 4px;
+}
+
+.cms-content-map-group-title {
+  padding: 6px 14px 4px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #6c7a89;
+}
+
+.cms-content-map-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 14px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.cms-content-map-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.cms-content-map-field {
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-size: 11px;
+  color: #c8d6e5;
+}
+
+.cms-content-map-tags {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.cms-map-status {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-weight: 500;
+}
+
+.cms-map-default {
+  background: rgba(255, 255, 255, 0.08);
+  color: #888;
+}
+
+.cms-map-saved {
+  background: rgba(46, 213, 115, 0.15);
+  color: #2ed573;
+}
+
+.cms-map-scoped {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background: rgba(116, 185, 255, 0.15);
+  color: #74b9ff;
+  font-weight: 500;
+}
+
+.cms-map-type {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background: rgba(255, 165, 2, 0.15);
+  color: #ffa502;
+  font-weight: 500;
+}
+
+.cms-map-highlight {
+  outline: 2px solid #74b9ff !important;
+  outline-offset: 2px;
+  transition: outline-color 0.3s;
+}

package/static/cms/editor/content-map.js

@@ -0,0 +1,172 @@
+import { buildCmsUrl } from './config.js';
+import { readHeaders } from './security.js';
+import { parseCaretAttr, resolveBinding, getResolvedKey } from './helpers.js';
+
+/**
+ * Content Map dev panel.
+ * Lists all data-caret bindings on the current page with override status.
+ */
+
+let panel = null;
+let isOpen = false;
+
+function createPanel() {
+  const el = document.createElement('div');
+  el.className = 'cms-content-map';
+  el.innerHTML = `
+    <div class="cms-content-map-header">
+      <span class="cms-content-map-title">Content Map</span>
+      <button type="button" class="cms-content-map-close">&times;</button>
+    </div>
+    <div class="cms-content-map-body"></div>
+  `;
+  document.body.appendChild(el);
+
+  el.querySelector('.cms-content-map-close')?.addEventListener('click', () => {
+    toggle();
+  });
+
+  return el;
+}
+
+async function loadOverrides(entryKeys) {
+  const overrides = new Map();
+  for (const key of entryKeys) {
+    const [collection, id] = key.split('::');
+    try {
+      const res = await fetch(buildCmsUrl('/entries', { collection, id }), {
+        headers: readHeaders(),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.entries && data.entries.length > 0) {
+          overrides.set(key, data.entries[0].data);
+        }
+      }
+    } catch {
+      // Skip failed loads
+    }
+  }
+  return overrides;
+}
+
+function getNestedValue(data, path) {
+  const keys = path.split('.');
+  let current = data;
+  for (const key of keys) {
+    if (current === null || current === undefined) return undefined;
+    if (typeof current !== 'object') return undefined;
+    current = current[key];
+  }
+  return current;
+}
+
+async function refresh() {
+  if (!panel) return;
+  const body = panel.querySelector('.cms-content-map-body');
+  if (!body) return;
+
+  const elements = document.querySelectorAll('[data-caret]');
+  const bindings = [];
+  const entryKeys = new Set();
+
+  elements.forEach((el) => {
+    const attr = el.getAttribute('data-caret') || '';
+    const parsed = parseCaretAttr(attr);
+    const resolved = resolveBinding(el, parsed);
+    if (!resolved) return;
+
+    const key = `${resolved.collection}::${resolved.id}`;
+    entryKeys.add(key);
+
+    const isScoped = parsed && !parsed.collection;
+    bindings.push({
+      el,
+      resolved,
+      fullKey: `${resolved.collection}::${resolved.id}::${resolved.field}`,
+      isImg: el instanceof HTMLImageElement,
+      isScoped,
+    });
+  });
+
+  body.innerHTML = `<div class="cms-content-map-loading">Loading...</div>`;
+
+  const overrides = await loadOverrides(entryKeys);
+
+  if (bindings.length === 0) {
+    body.innerHTML = `<div class="cms-content-map-empty">No data-caret bindings found on this page.</div>`;
+    return;
+  }
+
+  // Group by collection::id
+  const groups = new Map();
+  for (const b of bindings) {
+    const key = `${b.resolved.collection}::${b.resolved.id}`;
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(b);
+  }
+
+  let html = '';
+  for (const [entryKey, fields] of groups) {
+    const entryData = overrides.get(entryKey);
+    html += `<div class="cms-content-map-group">`;
+    html += `<div class="cms-content-map-group-title">${escapeHtml(entryKey)}</div>`;
+
+    for (const f of fields) {
+      const hasOverride = entryData
+        ? getNestedValue(entryData, f.resolved.field) !== undefined
+        : false;
+
+      const statusClass = hasOverride ? 'cms-map-saved' : 'cms-map-default';
+      const statusLabel = hasOverride ? 'saved' : 'default';
+      const scopeTag = f.isScoped ? '<span class="cms-map-scoped">scoped</span>' : '';
+      const typeTag = f.isImg ? '<span class="cms-map-type">img</span>' : '';
+
+      html += `
+        <div class="cms-content-map-item" data-caret-map-key="${escapeAttr(f.fullKey)}">
+          <span class="cms-content-map-field">${escapeHtml(f.resolved.field)}</span>
+          <span class="cms-content-map-tags">
+            ${typeTag}${scopeTag}
+            <span class="cms-map-status ${statusClass}">${statusLabel}</span>
+          </span>
+        </div>
+      `;
+    }
+
+    html += `</div>`;
+  }
+
+  body.innerHTML = html;
+
+  // Click to scroll to element
+  body.querySelectorAll('.cms-content-map-item').forEach((item) => {
+    item.addEventListener('click', () => {
+      const key = item.getAttribute('data-caret-map-key');
+      const target = bindings.find((b) => b.fullKey === key);
+      if (target?.el) {
+        target.el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        target.el.classList.add('cms-map-highlight');
+        setTimeout(() => target.el.classList.remove('cms-map-highlight'), 2000);
+      }
+    });
+  });
+}
+
+function toggle() {
+  if (!panel) panel = createPanel();
+  isOpen = !isOpen;
+  panel.classList.toggle('cms-content-map-open', isOpen);
+  if (isOpen) refresh();
+}
+
+function escapeHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function escapeAttr(str) {
+  return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}
+
+export function mountContentMap({ mapButton }) {
+  mapButton?.addEventListener('click', toggle);
+}

package/static/cms/editor/guards.js

@@ -0,0 +1,72 @@
+export function mountEditorGuards(state) {
+  document.body.classList.add('cms-edit-mode');
+
+  window.addEventListener('beforeunload', (e) => {
+    if (state.dirtyEl) {
+      e.preventDefault();
+      e.returnValue = '';
+    }
+  });
+
+  // Smart navigation: only block clicks on CMS-editable elements.
+  document.addEventListener(
+    'click',
+    (e) => {
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+
+      // Allow clicks inside the CMS toolbar
+      if (target.closest('.cms-toolbar')) return;
+
+      // Allow clicks on image overlay buttons
+      if (target.closest('.cms-img-overlay')) return;
+
+      // Allow clicks inside the link popover
+      if (target.closest('.cms-link-popover')) return;
+
+      // Allow clicks on the floating "Open page" affordance — it's a real
+      // anchor that lets visitors follow links instead of editing them.
+      if (target.closest('.cms-link-follow')) return;
+
+      const editable = target.closest('[data-caret]');
+      const link = target.closest('a');
+      if (link) {
+        // Link contains or is a CMS editable — block nav, focus editable
+        const cmsInLink = editable || link.querySelector('[data-caret]');
+        if (cmsInLink instanceof HTMLElement) {
+          e.preventDefault();
+          e.stopPropagation();
+          cmsInLink.focus();
+          return;
+        }
+        // Non-CMS link — let it navigate normally
+        return;
+      }
+
+      // For buttons: only intercept if they contain CMS content
+      const btn = target.closest('button');
+      if (btn && !btn.closest('.cms-toolbar') && !btn.closest('.cms-img-wrapper')) {
+        const cmsInBtn = editable || btn.querySelector('[data-caret]');
+        if (cmsInBtn instanceof HTMLElement) {
+          e.preventDefault();
+          e.stopPropagation();
+          cmsInBtn.focus();
+        }
+      }
+    },
+    true,
+  );
+
+  // Block form submissions (except CMS forms)
+  document.addEventListener(
+    'submit',
+    (e) => {
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+      if (!target.closest('.cms-toolbar')) {
+        e.preventDefault();
+      }
+    },
+    true,
+  );
+}

package/static/cms/editor/helpers.js

@@ -0,0 +1,51 @@
+export function parseCaretAttr(attr) {
+  const parts = attr.split('::');
+  if (parts.length === 3) return { collection: parts[0], id: parts[1], field: parts[2] };
+  // Field-only (scoped) — return just the field, caller resolves scope
+  if (parts.length === 1 && !attr.includes('::')) return { collection: null, id: null, field: attr };
+  return null;
+}
+
+/**
+ * Resolve a parsed binding by walking up the DOM to find data-caret-scope.
+ * If the binding already has collection+id, returns as-is.
+ * If field-only, walks up to nearest [data-caret-scope] ancestor.
+ * Returns null if scope cannot be resolved.
+ */
+export function resolveBinding(el, parsed) {
+  if (!parsed) return null;
+  if (parsed.collection && parsed.id) return parsed;
+
+  // Walk up to find nearest data-caret-scope
+  let node = el.parentElement;
+  while (node) {
+    const scope = node.getAttribute('data-caret-scope');
+    if (scope) {
+      const parts = scope.split('::');
+      if (parts.length === 2) {
+        return { collection: parts[0], id: parts[1], field: parsed.field };
+      }
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+
+/**
+ * Get the full data-caret key for an element, resolving scope if needed.
+ * Returns "collection::id::field" or null if unresolvable.
+ */
+export function getResolvedKey(el) {
+  const attr = el.getAttribute('data-caret');
+  if (!attr) return null;
+  const parsed = parseCaretAttr(attr);
+  const resolved = resolveBinding(el, parsed);
+  if (!resolved) return null;
+  return `${resolved.collection}::${resolved.id}::${resolved.field}`;
+}
+
+export function flash(el, success) {
+  const cls = success ? 'cms-saved' : 'cms-error';
+  el.classList.add(cls);
+  setTimeout(() => el.classList.remove(cls), 2000);
+}

package/static/cms/editor/image-edit.js

@@ -0,0 +1,151 @@
+import { buildCmsUrl } from './config.js';
+import { uploadHeaders } from './security.js';
+import { resolveBinding } from './helpers.js';
+
+export function mountImageEditors({
+  parseCaretAttr,
+  flash,
+  compressImage,
+  updateEmblaCarousel,
+  saveField,
+  setStatus,
+  showToast,
+  onUnauthorized,
+}) {
+  const syncBoundImages = (marker, src) => {
+    document.querySelectorAll('[data-caret]').forEach((node) => {
+      if (!(node instanceof HTMLImageElement)) return;
+      if (node.getAttribute('data-caret') !== marker) return;
+      node.src = src;
+      updateEmblaCarousel(node, src);
+    });
+  };
+
+  document.querySelectorAll('[data-caret]').forEach((el) => {
+    if (!(el instanceof HTMLImageElement)) return;
+    const img = el;
+    if (img.dataset.caretImgMounted === 'true') return;
+    img.dataset.caretImgMounted = 'true';
+
+    const existingWrapper = img.parentElement;
+    if (existingWrapper?.classList.contains('cms-img-wrapper')) {
+      existingWrapper.parentNode?.insertBefore(img, existingWrapper);
+      existingWrapper.remove();
+    }
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'cms-img-wrapper';
+    wrapper.style.position = 'relative';
+    wrapper.style.display = 'block';
+    wrapper.style.width = '100%';
+    wrapper.style.height = '100%';
+
+    img.parentNode?.insertBefore(wrapper, img);
+    wrapper.appendChild(img);
+
+    // Corner badge — persistent edit indicator
+    const badge = document.createElement('div');
+    badge.className = 'cms-img-badge';
+    badge.innerHTML =
+      '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>';
+    wrapper.appendChild(badge);
+
+    // Full overlay with idle + uploading states
+    const overlay = document.createElement('button');
+    overlay.className = 'cms-img-overlay';
+    overlay.type = 'button';
+    overlay.innerHTML = `
+      <span class="cms-img-overlay-content cms-img-state-idle">
+        <svg class="cms-img-overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/>
+          <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"/>
+        </svg>
+        <span class="cms-img-overlay-text">Replace Image</span>
+      </span>
+      <span class="cms-img-overlay-content cms-img-state-uploading">
+        <span class="cms-img-spinner"></span>
+        <span class="cms-img-overlay-text">Uploading...</span>
+      </span>
+    `;
+    wrapper.appendChild(overlay);
+
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/jpeg,image/png,image/webp,image/avif';
+    input.style.display = 'none';
+    wrapper.appendChild(input);
+
+    overlay.addEventListener('click', (e) => {
+      e.stopPropagation(); // prevent slide click (lightbox)
+      input.click();
+    });
+
+    input.addEventListener('change', async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+
+      const marker = img.getAttribute('data-caret') || '';
+      const parsed = parseCaretAttr(marker);
+      const resolved = resolveBinding(img, parsed);
+      if (!resolved) return;
+
+      // Optimistic preview
+      const previewUrl = URL.createObjectURL(file);
+      const originalSrc = img.src;
+      img.src = previewUrl;
+
+      overlay.classList.add('uploading');
+      badge.classList.add('cms-img-badge-hidden');
+      setStatus('saving', 'Uploading...');
+
+      try {
+        const compressed = await compressImage(file);
+        const formData = new FormData();
+        formData.append('file', compressed);
+        const headers = await uploadHeaders();
+
+        const uploadRes = await fetch(buildCmsUrl('/upload'), {
+          method: 'POST',
+          headers,
+          body: formData,
+        });
+        if (uploadRes.status === 401) {
+          onUnauthorized();
+          return;
+        }
+        if (!uploadRes.ok) throw new Error('Upload failed');
+        const { url } = await uploadRes.json();
+
+        const result = await saveField(resolved.collection, resolved.id, resolved.field, url);
+        if (result.ok) {
+          syncBoundImages(marker, url);
+          showToast('Image updated', 'success');
+        } else {
+          const rollbackSrc =
+            result.reason === 'conflict' && typeof result.latestValue === 'string'
+              ? result.latestValue
+              : originalSrc;
+          syncBoundImages(marker, rollbackSrc);
+          if (result.reason === 'conflict') {
+            showToast('Image changed elsewhere. Loaded latest image.', 'error');
+          } else if (result.reason !== 'unauthorized') {
+            showToast('Failed to save image. Changes reverted.', 'error');
+          }
+        }
+
+        flash(img, result.ok);
+      } catch {
+        img.src = originalSrc;
+        flash(img, false);
+        setStatus('error', 'Upload failed');
+        showToast('Upload failed', 'error');
+      } finally {
+        URL.revokeObjectURL(previewUrl);
+        overlay.classList.remove('uploading');
+        badge.classList.remove('cms-img-badge-hidden');
+      }
+
+      input.value = '';
+    });
+  });
+}