@astro-live-cms/core 0.2.0

package/static/cms/editor/section-controls.css

@@ -0,0 +1,349 @@
+/* ---------------------------------------------------------------------------
+   Section controls (on-canvas layout actions)
+   --------------------------------------------------------------------------- */
+
+.cms-section-editable {
+  outline: 2px dashed transparent;
+  outline-offset: 2px;
+  transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.cms-section-editable:hover {
+  outline-color: rgba(212, 175, 55, 0.45);
+}
+
+.cms-section-editable.cms-section-active {
+  outline-color: rgba(212, 175, 55, 0.85);
+  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.28);
+}
+
+.cms-section-editable.cms-section-disabled-preview {
+  opacity: 0.58;
+}
+
+.cms-section-editable.cms-section-disabled-preview .cms-section-controls,
+.cms-section-editable.cms-section-disabled-preview .cms-section-chip {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.cms-highlight-all .cms-section-editable {
+  outline-color: rgba(212, 175, 55, 0.35);
+}
+
+.cms-section-controls {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 1200;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: rgba(15, 26, 51, 0.9);
+  border: 1px solid rgba(212, 175, 55, 0.22);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.18s ease, transform 0.18s ease;
+  pointer-events: none;
+}
+
+.cms-section-editable:hover .cms-section-controls,
+.cms-section-editable.cms-section-active .cms-section-controls,
+.cms-section-controls:focus-within {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.cms-section-chip {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 1198;
+  padding: 4px 8px;
+  border-radius: 999px;
+  font-family: var(--cms-font);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  border: 1px solid rgba(212, 175, 55, 0.28);
+  background: rgba(10, 17, 40, 0.88);
+  color: rgba(255, 255, 255, 0.75);
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
+  pointer-events: none;
+}
+
+.cms-section-editable:hover .cms-section-chip,
+.cms-section-editable.cms-section-active .cms-section-chip,
+.cms-highlight-all .cms-section-chip {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.cms-section-editable.cms-section-active .cms-section-chip {
+  border-color: rgba(212, 175, 55, 0.65);
+  color: var(--cms-gold);
+}
+
+.cms-section-controls-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cms-section-btn {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.76);
+  font-family: var(--cms-font);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  border-radius: 4px;
+  padding: 5px 7px;
+  cursor: pointer;
+  transition: all 0.16s ease;
+}
+
+.cms-section-btn:hover {
+  border-color: rgba(212, 175, 55, 0.55);
+  color: var(--cms-gold);
+  background: rgba(212, 175, 55, 0.1);
+}
+
+.cms-section-btn-drag {
+  cursor: grab;
+}
+
+.cms-section-btn-drag:active {
+  cursor: grabbing;
+}
+
+.cms-section-btn:disabled {
+  opacity: 0.4;
+  cursor: wait;
+}
+
+.cms-section-drag-source {
+  outline-color: rgba(59, 130, 246, 0.6) !important;
+  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.25);
+}
+
+.cms-section-drop-target {
+  outline-color: rgba(212, 175, 55, 0.75) !important;
+}
+
+.cms-section-drop-before {
+  box-shadow: inset 0 4px 0 0 rgba(212, 175, 55, 0.8);
+}
+
+.cms-section-drop-after {
+  box-shadow: inset 0 -4px 0 0 rgba(212, 175, 55, 0.8);
+}
+
+body.cms-section-dragging .cms-section-controls {
+  opacity: 1;
+  pointer-events: none;
+}
+
+.cms-section-boundary-actions {
+  position: absolute;
+  left: 50%;
+  bottom: -15px;
+  transform: translateX(-50%);
+  z-index: 1190;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.16s ease;
+}
+
+.cms-section-editable:hover .cms-section-boundary-actions,
+.cms-section-editable.cms-section-active .cms-section-boundary-actions,
+body.cms-spacing-dragging .cms-section-boundary-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.cms-section-insert-handle {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  border: 1px solid rgba(212, 175, 55, 0.5);
+  background: rgba(10, 17, 40, 0.96);
+  color: var(--cms-gold);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
+  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
+}
+
+.cms-section-insert-plus {
+  font-family: var(--cms-font);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+  transform: translateY(-1px);
+}
+
+.cms-section-insert-handle:hover {
+  border-color: rgba(212, 175, 55, 0.9);
+  background: rgba(212, 175, 55, 0.15);
+  transform: translateY(-1px);
+}
+
+.cms-section-gap-handle {
+  height: 22px;
+  min-width: 64px;
+  padding: 0 8px;
+  border: 1px solid rgba(212, 175, 55, 0.38);
+  border-radius: 999px;
+  background: rgba(10, 17, 40, 0.92);
+  color: rgba(255, 255, 255, 0.82);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: var(--cms-font);
+  font-size: 9px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: ns-resize;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
+  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
+}
+
+.cms-section-gap-grip {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background:
+    radial-gradient(circle at 2px 2px, rgba(212, 175, 55, 0.9) 1.5px, transparent 1.7px),
+    radial-gradient(circle at 8px 2px, rgba(212, 175, 55, 0.9) 1.5px, transparent 1.7px),
+    radial-gradient(circle at 2px 8px, rgba(212, 175, 55, 0.9) 1.5px, transparent 1.7px),
+    radial-gradient(circle at 8px 8px, rgba(212, 175, 55, 0.9) 1.5px, transparent 1.7px);
+}
+
+.cms-section-gap-handle:hover,
+.cms-section-gap-handle.is-dragging {
+  border-color: rgba(212, 175, 55, 0.75);
+  color: var(--cms-gold);
+  background: rgba(212, 175, 55, 0.1);
+}
+
+body.cms-spacing-dragging {
+  cursor: ns-resize;
+}
+
+body.cms-spacing-dragging * {
+  user-select: none !important;
+}
+
+.cms-section-add-picker {
+  position: fixed;
+  z-index: 1400;
+  width: 220px;
+  border-radius: 8px;
+  background: rgba(10, 17, 40, 0.97);
+  border: 1px solid rgba(212, 175, 55, 0.26);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(6px);
+  transform: translateY(-4px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.16s ease, transform 0.16s ease;
+}
+
+.cms-section-add-picker.open {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.cms-section-add-picker-head {
+  padding: 10px 10px 8px;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.62);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.cms-section-add-picker-list {
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cms-section-add-option {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.02);
+  color: rgba(255, 255, 255, 0.83);
+  font-family: var(--cms-font);
+  font-size: 10px;
+  text-align: left;
+  padding: 7px 8px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.cms-section-add-option:hover {
+  border-color: rgba(212, 175, 55, 0.45);
+  color: var(--cms-gold);
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.cms-section-add-option.active {
+  border-color: rgba(212, 175, 55, 0.55);
+  color: var(--cms-gold);
+  background: rgba(212, 175, 55, 0.14);
+}
+
+.cms-section-add-option:disabled {
+  opacity: 0.45;
+  cursor: wait;
+}
+
+@media (max-width: 960px) {
+  .cms-section-controls {
+    left: 10px;
+    right: 10px;
+    top: 10px;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+
+  .cms-section-controls-actions {
+    flex-wrap: wrap;
+  }
+
+  .cms-section-chip {
+    top: 8px;
+    left: 8px;
+  }
+
+  .cms-section-boundary-actions {
+    bottom: -18px;
+  }
+
+  .cms-section-add-picker {
+    width: calc(100vw - 24px);
+    max-width: 360px;
+  }
+}

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

@@ -0,0 +1 @@
+export { mountSectionControls } from './section-controls/index.js';

package/static/cms/editor/security.js

@@ -0,0 +1,23 @@
+async function getTurnstileToken(action) {
+  if (typeof window.cmsGetTurnstileToken !== 'function') return null;
+  try {
+    return await window.cmsGetTurnstileToken(action);
+  } catch {
+    return null;
+  }
+}
+
+export async function mutateHeaders() {
+  const headers = { 'Content-Type': 'application/json' };
+  const token = await getTurnstileToken('cms_mutate');
+  if (token) {
+    headers['x-cms-turnstile-token'] = token;
+  }
+  return headers;
+}
+
+export async function uploadHeaders() {
+  const token = await getTurnstileToken('cms_upload');
+  if (!token) return undefined;
+  return { 'x-cms-turnstile-token': token };
+}

package/static/cms/editor/sync.js

@@ -0,0 +1,64 @@
+export function mountStudioSync({ studioIframe, state, showToast, clientLinkify }) {
+  window.addEventListener('message', (e) => {
+    // Only accept messages from our iframe
+    if (e.source !== studioIframe.contentWindow) return;
+    const msg = e.data;
+    if (!msg || typeof msg.type !== 'string') return;
+
+    if (msg.type === 'cms:saved') {
+      const { collection, id, data } = msg;
+      if (!data || typeof data !== 'object') return;
+
+      let updated = 0;
+
+      function walkData(obj, prefix) {
+        for (const [key, value] of Object.entries(obj)) {
+          const path = prefix ? `${prefix}.${key}` : key;
+          const selector = `${collection}.${id}.${path}`;
+
+          if (typeof value === 'string') {
+            // Text fields
+            const els = document.querySelectorAll(`[data-cms="${selector}"]`);
+            els.forEach((el) => {
+              // Skip elements being actively edited to prevent overwriting unsaved work
+              if (el === state.dirtyEl || el === document.activeElement) return;
+              if (el.hasAttribute('data-cms-raw')) {
+                if (el.getAttribute('data-cms-raw') !== value) {
+                  el.setAttribute('data-cms-raw', value);
+                  el.innerHTML = clientLinkify(value);
+                  updated++;
+                }
+              } else if (el.textContent !== value) {
+                el.textContent = value;
+                updated++;
+              }
+            });
+
+            // Image fields
+            const imgs = document.querySelectorAll(`[data-cms-img="${selector}"]`);
+            imgs.forEach((img) => {
+              if (img.src !== value && img.getAttribute('src') !== value) {
+                img.src = value;
+                updated++;
+              }
+            });
+          } else if (typeof value === 'object' && value !== null) {
+            walkData(value, path);
+          }
+        }
+      }
+
+      walkData(data, '');
+
+      if (updated > 0) {
+        showToast(`Updated ${updated} element${updated > 1 ? 's' : ''} on page`, 'success');
+      } else {
+        showToast('Saved — refresh to see changes', 'success');
+      }
+    }
+
+    if (msg.type === 'cms:created') {
+      showToast('New entry created — refresh to see changes', 'success');
+    }
+  });
+}

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

@@ -0,0 +1,129 @@
+import { createTextLinkInteractions } from './text-link-interactions.js';
+
+const snapshots = new WeakMap();
+let keydownBound = false;
+
+export function mountTextEditors({
+  state,
+  parseCmsAttr,
+  clientLinkify,
+  saveField,
+  flash,
+  showToast,
+}) {
+  const applyTextValue = (target, value) => {
+    if (target.hasAttribute('data-cms-raw')) {
+      target.setAttribute('data-cms-raw', value);
+      target.innerHTML = clientLinkify(value);
+    } else {
+      target.textContent = value;
+    }
+  };
+  const syncBoundText = (attr, value) => {
+    document.querySelectorAll('[data-cms]').forEach((node) => {
+      if (!(node instanceof HTMLElement)) return;
+      if (node.getAttribute('data-cms') !== attr) return;
+      applyTextValue(node, value);
+    });
+  };
+  const { onKeydown, showLinkHint, removeLinkHint } = createTextLinkInteractions({
+    state,
+    clientLinkify,
+    showToast,
+    snapshots,
+  });
+
+  if (!keydownBound) {
+    document.addEventListener('keydown', onKeydown);
+    keydownBound = true;
+  }
+
+  document.querySelectorAll('[data-cms]').forEach((el) => {
+    if (el.dataset.cmsTextMounted === 'true') return;
+    el.dataset.cmsTextMounted = 'true';
+
+    const attr = el.getAttribute('data-cms');
+    const isLinkable = el.hasAttribute('data-cms-raw');
+
+    el.setAttribute('contenteditable', 'plaintext-only');
+    el.classList.add('cms-editable');
+    if (isLinkable) el.classList.add('cms-linkable');
+
+    el.addEventListener('focus', () => {
+      if (isLinkable) {
+        const raw = el.getAttribute('data-cms-raw') || '';
+        snapshots.set(el, raw);
+        el.textContent = raw;
+        showLinkHint(el);
+      } else {
+        snapshots.set(el, el.textContent || '');
+      }
+    });
+
+    el.addEventListener('input', () => {
+      const snapshot = snapshots.get(el);
+      const current = el.textContent || '';
+      state.dirtyEl = current !== snapshot ? el : null;
+    });
+
+    el.addEventListener('blur', async () => {
+      removeLinkHint();
+
+      // If link popup is active for this element, defer the save
+      if (state.linkPopupEl === el) return;
+
+      // Skip save if Escape was pressed
+      if (el._cmsSkipSave) {
+        el._cmsSkipSave = false;
+        state.dirtyEl = null;
+        if (isLinkable) {
+          const raw = el.getAttribute('data-cms-raw') || '';
+          el.innerHTML = clientLinkify(raw);
+        }
+        return;
+      }
+
+      const snapshot = snapshots.get(el) ?? '';
+      const current = el.textContent || '';
+      if (current === snapshot) {
+        if (isLinkable) {
+          el.innerHTML = clientLinkify(current);
+        }
+        return;
+      }
+
+      const parsed = parseCmsAttr(el.getAttribute('data-cms') || '');
+      if (!parsed) return;
+
+      // Update raw attribute and re-render before saving
+      if (isLinkable) {
+        el.setAttribute('data-cms-raw', current);
+        el.innerHTML = clientLinkify(current);
+      }
+
+      el.classList.add('cms-saving');
+      const result = await saveField(parsed.collection, parsed.id, parsed.field, current);
+      el.classList.remove('cms-saving');
+      flash(el, result.ok);
+      state.dirtyEl = null;
+
+      // Sync all duplicated text bindings
+      if (result.ok) {
+        syncBoundText(attr, current);
+        showToast('Content saved', 'success');
+      } else {
+        const rollbackValue =
+          result.reason === 'conflict' && typeof result.latestValue === 'string'
+            ? result.latestValue
+            : snapshot;
+        syncBoundText(attr, rollbackValue);
+
+        if (result.reason === 'conflict') {
+          showToast('Content changed elsewhere. Loaded latest value.', 'error');
+        } else if (result.reason !== 'unauthorized') {
+          showToast('Failed to save. Changes reverted.', 'error');
+        }
+      }
+    });
+  });
+}