@astro-live-cms/core 0.2.0

package/static/cms/editor/panel.css

@@ -0,0 +1,91 @@
+/* ---------------------------------------------------------------------------
+   Studio Panel — sliding left sidebar with iframe
+   --------------------------------------------------------------------------- */
+
+.cms-studio-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 380px;
+  z-index: 100000;
+  background: #0a1128;
+  border-right: 1px solid rgba(212, 175, 55, 0.12);
+  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3);
+  transform: translateX(-100%);
+  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.cms-studio-panel.open {
+  transform: translateX(0);
+}
+
+.cms-studio-panel.no-transition {
+  transition: none;
+}
+
+.cms-studio-panel iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+/* Push body content when panel is open */
+body.cms-panel-open {
+  padding-left: 380px;
+  transition: padding-left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+body.cms-panel-open.no-transition {
+  transition: none;
+}
+
+/* Shift fixed header */
+body.cms-panel-open #main-header {
+  left: 380px;
+  transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+body.cms-panel-open.no-transition #main-header {
+  transition: none;
+}
+
+/* Shift fixed toolbar */
+body.cms-panel-open .cms-toolbar {
+  left: 380px;
+  transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+body.cms-panel-open.no-transition .cms-toolbar {
+  transition: none;
+}
+
+/* Studio button active state */
+.cms-studio-btn.active {
+  background: rgba(212, 175, 55, 0.3);
+  border-color: rgba(212, 175, 55, 0.5);
+  color: var(--cms-gold);
+  box-shadow: 0 0 8px rgba(212, 175, 55, 0.15);
+}
+
+
+/* Mobile: full-width overlay, no content push */
+@media (max-width: 768px) {
+  .cms-studio-panel {
+    width: 100%;
+    box-shadow: none;
+  }
+
+  body.cms-panel-open {
+    padding-left: 0;
+  }
+
+  body.cms-panel-open #main-header {
+    left: 0;
+  }
+
+  body.cms-panel-open .cms-toolbar {
+    left: 0;
+  }
+}

package/static/cms/editor/panel.js

@@ -0,0 +1,64 @@
+import { MOUNT_PATH } from './config.js';
+
+export function mountStudioPanel({ studioButton }) {
+  const panel = document.createElement('div');
+  panel.className = 'cms-studio-panel';
+
+  const iframe = document.createElement('iframe');
+  iframe.src = `${MOUNT_PATH}/cms`;
+  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-cms]')) {
+      closePanel();
+    }
+  });
+
+  return { iframe, closePanel };
+}

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

@@ -0,0 +1,167 @@
+import { API_BASE } from './config.js';
+import { mutateHeaders } 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 url = `${API_BASE}/entries?collection=${encodeURIComponent(collection)}&id=${encodeURIComponent(
+    id,
+  )}`;
+  const res = await fetch(url);
+  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(`${API_BASE}/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,88 @@
+import { API_BASE } from '../config.js';
+import { isRecord } from './utils.js';
+import { mutateHeaders } from '../security.js';
+
+export async function fetchPageEntry({ collection, id, onUnauthorized }) {
+  const url = `${API_BASE}/entries?collection=${encodeURIComponent(collection)}&id=${encodeURIComponent(
+    id,
+  )}`;
+  const res = await fetch(url);
+  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(`${API_BASE}/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,
+  };
+}

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

@@ -0,0 +1,24 @@
+export const HOME_SECTION_KEYS = [
+  'home.hero',
+  'home.logo_bar',
+  'home.features',
+  'home.theme_showcase',
+  'home.how_it_works',
+  'home.use_cases',
+  'home.composer',
+  'home.spacer',
+  'home.testimonials',
+  'home.pricing',
+  'home.faq',
+  'home.cta',
+];
+
+export const SPACING_Y_OPTIONS = [
+  { value: 'default', label: 'Default' },
+  { value: 'compact', label: 'Compact' },
+  { value: 'comfortable', label: 'Comfortable' },
+  { value: 'spacious', label: 'Spacious' },
+  { value: 'cinematic', label: 'Cinematic' },
+];
+
+export const SPACING_Y_VALUES = SPACING_Y_OPTIONS.map((item) => item.value);