@astro-live-cms/core 0.2.0

package/static/cms/editor/toolbar.js

@@ -0,0 +1,110 @@
+function getToolbarNavLinks(pagePath) {
+  const links = [];
+  const headerNav = document.querySelector('#main-header nav');
+  if (!headerNav) return links;
+
+  headerNav.querySelectorAll('a[href]').forEach((a) => {
+    const href = a.getAttribute('href');
+    const label = a.textContent?.trim();
+    if (href && label && href.startsWith('/')) {
+      const isActive = pagePath === href || (href !== '/' && pagePath.startsWith(href));
+      links.push({ href, label, isActive });
+    }
+  });
+  return links;
+}
+
+function renderToolbar(navLinks) {
+  const navLinksHtml = navLinks
+    .map(
+      ({ href, label, isActive }) =>
+        `<a href="${href}" class="cms-nav-link ${isActive ? 'active' : ''}">${label}</a>`,
+    )
+    .join('');
+
+  const toolbar = document.createElement('div');
+  toolbar.className = 'cms-toolbar';
+  toolbar.innerHTML = `
+    <div class="cms-toolbar-inner">
+      <div class="cms-toolbar-left">
+        <div class="cms-toolbar-badge">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 9l10 13 10-13L12 2zm0 3.84L18.26 9 12 17.65 5.74 9 12 5.84z"/></svg>
+          <span class="cms-toolbar-badge-text">Editor</span>
+        </div>
+        <div class="cms-toolbar-divider"></div>
+        <div class="cms-status-group">
+          <span class="cms-status-dot cms-status-idle"></span>
+          <span class="cms-status-text">Ready</span>
+        </div>
+      </div>
+      ${navLinksHtml ? `<div class="cms-toolbar-nav">${navLinksHtml}</div>` : ''}
+      <div class="cms-toolbar-right">
+        <button type="button" class="cms-studio-btn" title="Toggle Content Studio panel">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="9" y1="9" x2="21" y2="9"/></svg>
+          Studio
+        </button>
+        <div class="cms-toolbar-divider"></div>
+        <button class="cms-highlight-btn" type="button" title="Show all editable regions">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+          Show All
+        </button>
+        <div class="cms-toolbar-divider"></div>
+        <button class="cms-exit-btn" type="button">
+          <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="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+          Log Out
+        </button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(toolbar);
+  return toolbar;
+}
+
+export function mountToolbar({ showToast, clearDirty, onLogout }) {
+  const navLinks = getToolbarNavLinks(window.location.pathname);
+  const toolbar = renderToolbar(navLinks);
+
+  const statusDot = toolbar.querySelector('.cms-status-dot');
+  const statusText = toolbar.querySelector('.cms-status-text');
+
+  function setStatus(state, text) {
+    if (statusDot) {
+      statusDot.className = `cms-status-dot cms-status-${state}`;
+    }
+    if (statusText && text) {
+      statusText.textContent = text;
+    }
+  }
+
+  let highlightActive = false;
+  const highlightBtn = toolbar.querySelector('.cms-highlight-btn');
+
+  highlightBtn?.addEventListener('click', () => {
+    highlightActive = !highlightActive;
+    document.body.classList.toggle('cms-highlight-all', highlightActive);
+    highlightBtn.classList.toggle('cms-highlight-btn-active', highlightActive);
+
+    const textNode = Array.from(highlightBtn.childNodes).find(
+      (n) => n.nodeType === 3 && n.textContent?.trim(),
+    );
+
+    if (highlightActive) {
+      if (textNode) textNode.textContent = ' Hide All';
+      showToast('Showing all editable regions', 'success');
+    } else {
+      if (textNode) textNode.textContent = ' Show All';
+    }
+  });
+
+  toolbar.querySelector('.cms-exit-btn')?.addEventListener('click', async () => {
+    clearDirty();
+    await onLogout();
+  });
+
+  const studioButton = toolbar.querySelector('.cms-studio-btn');
+  return {
+    toolbar,
+    studioButton,
+    setStatus,
+  };
+}

package/static/cms/editor.css

@@ -0,0 +1,10 @@
+/* ========================================================================
+   CMS Editor Styles — only loaded when isEditor = true
+   ======================================================================== */
+@import "./editor/tokens-and-text.css";
+@import "./editor/image.css";
+@import "./editor/section-controls.css";
+@import "./editor/toolbar.css";
+@import "./editor/toast.css";
+@import "./editor/panel.css";
+@import "./editor/link-ui.css";

package/static/cms/editor.js

@@ -0,0 +1,101 @@
+/**
+ * CMS Inline Editor runtime entry.
+ *
+ * This file is intentionally thin and wires independent controllers:
+ * - guards
+ * - toolbar
+ * - studio panel + iframe sync
+ * - text editing
+ * - image editing
+ */
+import { MOUNT_PATH, API_BASE } from './editor/config.js';
+import { parseCmsAttr, flash } from './editor/helpers.js';
+import { clientLinkify } from './editor/linkify.js';
+import { createSaveField } from './editor/save-queue.js';
+import { compressImage, updateEmblaCarousel } from './editor/image-utils.js';
+import { createToast } from './editor/toast.js';
+import { mountEditorGuards } from './editor/guards.js';
+import { mountToolbar } from './editor/toolbar.js';
+import { mountStudioPanel } from './editor/panel.js';
+import { mountStudioSync } from './editor/sync.js';
+import { mountTextEditors } from './editor/text-edit.js';
+import { mountImageEditors } from './editor/image-edit.js';
+import { mountSectionControls } from './editor/section-controls.js';
+
+function redirectToEditorLogin() {
+  window.location.href = `${MOUNT_PATH}?redirect=${encodeURIComponent(window.location.pathname)}`;
+}
+
+function boot() {
+  const state = {
+    dirtyEl: null,
+    linkPopupEl: null,
+  };
+
+  mountEditorGuards(state);
+
+  const showToast = createToast();
+
+  const { studioButton, setStatus } = mountToolbar({
+    showToast,
+    clearDirty: () => {
+      state.dirtyEl = null;
+    },
+    onLogout: async () => {
+      await fetch(`${API_BASE}/auth/logout`, { method: 'POST' });
+      window.location.href = '/';
+    },
+  });
+
+  const saveField = createSaveField({
+    setStatus,
+    onUnauthorized: redirectToEditorLogin,
+  });
+
+  const { iframe: studioIframe } = mountStudioPanel({ studioButton });
+
+  mountStudioSync({
+    studioIframe,
+    state,
+    showToast,
+    clientLinkify,
+  });
+
+  const mountInlineEditors = () => {
+    mountTextEditors({
+      state,
+      parseCmsAttr,
+      clientLinkify,
+      saveField,
+      flash,
+      showToast,
+    });
+
+    mountImageEditors({
+      parseCmsAttr,
+      flash,
+      compressImage,
+      updateEmblaCarousel,
+      saveField,
+      setStatus,
+      showToast,
+      onUnauthorized: redirectToEditorLogin,
+    });
+  };
+
+  mountSectionControls({
+    parseCmsAttr,
+    setStatus,
+    showToast,
+    onUnauthorized: redirectToEditorLogin,
+    onCanvasStructureChanged: mountInlineEditors,
+  });
+
+  mountInlineEditors();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', boot);
+} else {
+  boot();
+}

package/static/cms/studio.css

@@ -0,0 +1,312 @@
+/* ========================================================================
+   Content Studio Styles
+   ======================================================================== */
+
+:root {
+  --studio-bg: #0a1128;
+  --studio-surface: #0f1a33;
+  --studio-surface-hover: #152040;
+  --studio-border: rgba(255, 255, 255, 0.06);
+  --studio-border-hover: rgba(255, 255, 255, 0.12);
+  --studio-gold: #D4AF37;
+  --studio-gold-dim: rgba(212, 175, 55, 0.15);
+  --studio-gold-hover: rgba(212, 175, 55, 0.25);
+  --studio-text: rgba(255, 255, 255, 0.9);
+  --studio-text-muted: rgba(255, 255, 255, 0.5);
+  --studio-text-dim: rgba(255, 255, 255, 0.3);
+  --studio-green: #22c55e;
+  --studio-red: #ef4444;
+  --studio-blue: #3b82f6;
+  --studio-font: 'Poppins', system-ui, -apple-system, sans-serif;
+  --studio-font-heading: 'Playfair Display', Georgia, serif;
+}
+
+/* ---------------------------------------------------------------------------
+   Scrollbar
+   --------------------------------------------------------------------------- */
+
+.studio-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.studio-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.studio-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+}
+
+.studio-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* ---------------------------------------------------------------------------
+   Drop zone
+   --------------------------------------------------------------------------- */
+
+.studio-dropzone {
+  border: 2px dashed rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.studio-dropzone:hover,
+.studio-dropzone.drag-over {
+  border-color: var(--studio-gold);
+  background: var(--studio-gold-dim);
+}
+
+/* ---------------------------------------------------------------------------
+   Image gallery drag
+   --------------------------------------------------------------------------- */
+
+.studio-gallery-item {
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.studio-gallery-item.dragging {
+  opacity: 0.5;
+  transform: scale(0.95);
+}
+
+.studio-gallery-item.drag-over-item {
+  outline: 2px solid var(--studio-gold);
+  outline-offset: 2px;
+}
+
+/* ---------------------------------------------------------------------------
+   Animations
+   --------------------------------------------------------------------------- */
+
+@keyframes studio-fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes studio-spin {
+  to { transform: rotate(360deg); }
+}
+
+.studio-fade-in {
+  animation: studio-fade-in 0.3s ease forwards;
+}
+
+.studio-spinner {
+  animation: studio-spin 0.8s linear infinite;
+  border-color: var(--studio-gold);
+  border-top-color: transparent;
+}
+
+/* ---------------------------------------------------------------------------
+   Upload progress
+   --------------------------------------------------------------------------- */
+
+.studio-upload-progress {
+  height: 3px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.studio-upload-progress-bar {
+  height: 100%;
+  background: var(--studio-gold);
+  transition: width 0.3s ease;
+}
+
+/* ---------------------------------------------------------------------------
+   Form inputs
+   --------------------------------------------------------------------------- */
+
+.studio-input {
+  width: 100%;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--studio-border);
+  color: var(--studio-text);
+  font-family: var(--studio-font);
+  font-size: 13px;
+  transition: border-color 0.2s, background 0.2s;
+  outline: none;
+}
+
+.studio-input:focus {
+  border-color: var(--studio-gold);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.studio-input::placeholder {
+  color: var(--studio-text-dim);
+}
+
+textarea.studio-input {
+  resize: vertical;
+  min-height: 80px;
+}
+
+/* ---------------------------------------------------------------------------
+   Toggle switch
+   --------------------------------------------------------------------------- */
+
+.studio-toggle {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 11px;
+  cursor: pointer;
+  transition: background 0.2s;
+  border: none;
+  padding: 0;
+}
+
+.studio-toggle.active {
+  background: var(--studio-gold);
+}
+
+.studio-toggle::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+
+.studio-toggle.active::after {
+  transform: translateX(18px);
+}
+
+/* ---------------------------------------------------------------------------
+   Tag list editor
+   --------------------------------------------------------------------------- */
+
+.studio-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--studio-border);
+  font-size: 12px;
+  color: var(--studio-text-muted);
+}
+
+.studio-tag button {
+  background: none;
+  border: none;
+  color: var(--studio-text-dim);
+  cursor: pointer;
+  padding: 0;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.studio-tag button:hover {
+  color: var(--studio-red);
+}
+
+/* ---------------------------------------------------------------------------
+   Header nav links
+   --------------------------------------------------------------------------- */
+
+.studio-nav-link {
+  padding: 4px 12px;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--studio-text-dim);
+  transition: color 0.15s, background 0.15s;
+  border-radius: 2px;
+}
+
+.studio-nav-link:hover {
+  color: var(--studio-text-muted);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.studio-nav-link.active {
+  color: var(--studio-gold);
+  background: rgba(212, 175, 55, 0.1);
+}
+
+/* ---------------------------------------------------------------------------
+   Component classes — reusable patterns consumed via class names
+   --------------------------------------------------------------------------- */
+
+/* Buttons */
+.studio-btn-gold {
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  transition: all 0.2s;
+  background: var(--studio-gold);
+  color: #0a1128;
+  border: none;
+}
+
+.studio-btn-ghost {
+  padding: 8px 16px;
+  font-size: 12px;
+  border: 1px solid var(--studio-border);
+  transition: color 0.15s, border-color 0.15s;
+  color: var(--studio-text-muted);
+  background: transparent;
+  cursor: pointer;
+}
+
+/* Cards */
+.studio-card {
+  background: var(--studio-surface);
+  border: 1px solid var(--studio-border);
+  border-radius: 2px;
+}
+
+/* Labels */
+.studio-label {
+  display: block;
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--studio-text-muted);
+}
+
+/* Save button states (JS class toggling) */
+.studio-save-dirty {
+  background: var(--studio-gold);
+  color: #0a1128;
+  cursor: pointer;
+}
+
+.studio-save-clean {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--studio-text-dim);
+  cursor: default;
+}
+
+.studio-save-saving {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--studio-text-dim);
+  cursor: default;
+  opacity: 0.7;
+}
+
+/* Field error state */
+.studio-field-error {
+  border-color: var(--studio-red) !important;
+}
+
+/* Corner accent decorations */
+.studio-corner-accent {
+  background: var(--studio-gold);
+  opacity: 0.4;
+}