@caretcms/core 0.1.0

package/static/cms/editor/toolbar.js

@@ -0,0 +1,117 @@
+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-map-btn" type="button" title="Content Map — view all editable bindings">
+          <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="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+          Map
+        </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');
+  const mapButton = toolbar.querySelector('.cms-map-btn');
+  return {
+    toolbar,
+    studioButton,
+    mapButton,
+    setStatus,
+  };
+}

package/static/cms/editor.css

@@ -0,0 +1,12 @@
+/* ========================================================================
+   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";
+@import "./editor/rich-toolbar.css";
+@import "./editor/content-map.css";

package/static/cms/editor.js

@@ -0,0 +1,116 @@
+/**
+ * CMS Inline Editor runtime entry.
+ *
+ * This file is intentionally thin and wires independent controllers:
+ * - guards
+ * - toolbar
+ * - studio panel + iframe sync
+ * - text editing
+ * - image editing
+ * - content map
+ */
+import { buildCmsUrl, clearCloudSessionToken, getEditorLoginUrl } from './editor/config.js';
+import { parseCaretAttr, 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';
+import { mountContentMap } from './editor/content-map.js';
+import { mountRichToolbar } from './editor/rich-toolbar.js';
+import { mountLinkFollowAffordances } from './editor/link-follow.js';
+
+function redirectToEditorLogin() {
+  window.location.href = getEditorLoginUrl(window.location.href);
+}
+
+function boot() {
+  const state = {
+    dirtyEl: null,
+    linkPopupEl: null,
+  };
+
+  mountEditorGuards(state);
+  mountLinkFollowAffordances();
+
+  const showToast = createToast();
+
+  const { studioButton, mapButton, setStatus } = mountToolbar({
+    showToast,
+    clearDirty: () => {
+      state.dirtyEl = null;
+    },
+    onLogout: async () => {
+      await fetch(buildCmsUrl('/auth/logout'), { method: 'POST' });
+      clearCloudSessionToken();
+      window.location.href = '/';
+    },
+  });
+
+  const saveField = createSaveField({
+    setStatus,
+    onUnauthorized: redirectToEditorLogin,
+  });
+
+  const { iframe: studioIframe } = mountStudioPanel({ studioButton });
+
+  mountStudioSync({
+    studioIframe,
+    state,
+    showToast,
+    clientLinkify,
+  });
+
+  mountContentMap({ mapButton });
+
+  let richToolbarMounted = false;
+
+  const mountInlineEditors = () => {
+    const { showLinkPopup } = mountTextEditors({
+      state,
+      parseCaretAttr,
+      clientLinkify,
+      saveField,
+      flash,
+      showToast,
+    });
+
+    if (!richToolbarMounted) {
+      mountRichToolbar({ state, showToast, showLinkPopup });
+      richToolbarMounted = true;
+    }
+
+    mountImageEditors({
+      parseCaretAttr,
+      flash,
+      compressImage,
+      updateEmblaCarousel,
+      saveField,
+      setStatus,
+      showToast,
+      onUnauthorized: redirectToEditorLogin,
+    });
+  };
+
+  mountSectionControls({
+    parseCaretAttr,
+    setStatus,
+    showToast,
+    onUnauthorized: redirectToEditorLogin,
+    onCanvasStructureChanged: mountInlineEditors,
+  });
+
+  mountInlineEditors();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', boot);
+} else {
+  boot();
+}

package/static/cms/studio-login.css

@@ -0,0 +1,300 @@
+/* ========================================================================
+   Studio Login — Decorative Layer
+   ------------------------------------------------------------------------
+   Loaded only on the login screen. All values derive from semantic tokens
+   in studio-tokens.css, so a theme override automatically restyles the
+   login card without touching this file.
+   ======================================================================== */
+
+@import "./studio-tokens.css";
+
+.studio-login-page {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--studio-bg);
+  font-family: var(--studio-font);
+}
+
+/* Background radial gradients */
+.studio-login-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.studio-login-bg::before,
+.studio-login-bg::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.studio-login-bg::before {
+  background: radial-gradient(
+    ellipse at top right,
+    var(--studio-accent-soft) 0%,
+    transparent 60%
+  );
+}
+
+.studio-login-bg::after {
+  background: radial-gradient(
+    ellipse at bottom left,
+    var(--studio-accent-soft) 0%,
+    transparent 50%
+  );
+  opacity: 0.6;
+}
+
+/* Subtle decorative grid */
+.studio-login-grid {
+  position: absolute;
+  inset: 0;
+  opacity: 0.015;
+  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%23D4AF37' stroke-width='0.5'/%3E%3C/svg%3E");
+  pointer-events: none;
+}
+
+/* Top accent line */
+.studio-login-accent-top {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(
+    to right,
+    transparent,
+    var(--studio-accent-strong, rgba(59, 130, 246, 0.3)),
+    transparent
+  );
+}
+
+/* Login card */
+.studio-login-card {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  max-width: 28rem;
+  margin: 0 1rem;
+  opacity: 0;
+  transform: translateY(16px);
+  animation: studio-card-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
+}
+
+/* Card glow */
+.studio-login-card-glow {
+  position: absolute;
+  inset: -1px;
+  background: linear-gradient(
+    to bottom,
+    var(--studio-accent-strong, rgba(59, 130, 246, 0.2)),
+    transparent,
+    var(--studio-accent-soft)
+  );
+  border-radius: var(--radius-theme-xs);
+  filter: blur(4px);
+}
+
+/* Card body */
+.studio-login-card-body {
+  position: relative;
+  background: var(--studio-surface);
+  border: 1px solid var(--studio-border);
+  padding: 3rem;
+}
+
+/* Corner accent strokes (8 total, 4 corners) */
+.studio-corner {
+  position: absolute;
+  background: var(--studio-accent);
+  opacity: 0.4;
+}
+
+.studio-corner-h { width: 32px; height: 1px; }
+.studio-corner-v { width: 1px; height: 32px; }
+
+.studio-corner-tl-h { top: 0; left: 0; }
+.studio-corner-tl-v { top: 0; left: 0; }
+.studio-corner-tr-h { top: 0; right: 0; }
+.studio-corner-tr-v { top: 0; right: 0; }
+.studio-corner-bl-h { bottom: 0; left: 0; }
+.studio-corner-bl-v { bottom: 0; left: 0; }
+.studio-corner-br-h { bottom: 0; right: 0; }
+.studio-corner-br-v { bottom: 0; right: 0; }
+
+/* Login header */
+.studio-login-header {
+  text-align: center;
+  margin-bottom: 2.5rem;
+}
+
+.studio-login-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  margin-bottom: 1.5rem;
+  color: var(--studio-accent);
+}
+
+.studio-login-mark svg {
+  width: 40px;
+  height: 40px;
+}
+
+.studio-login-title {
+  font-family: var(--studio-font-heading);
+  font-size: 1.5rem;
+  font-weight: 500;
+  margin: 0 0 0.5rem;
+  letter-spacing: 0.04em;
+  color: var(--studio-text);
+}
+
+.studio-login-tagline {
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--studio-text-dim);
+  margin: 0;
+}
+
+/* Login form */
+.studio-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.studio-login-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.studio-login-field label {
+  font-size: 11px;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--studio-text-muted);
+}
+
+.studio-login-input-wrap {
+  position: relative;
+}
+
+.studio-login-input {
+  width: 100%;
+  padding: 14px 18px;
+  background: var(--color-theme-surface-muted);
+  border: 1px solid var(--studio-border);
+  color: var(--studio-text);
+  font-family: var(--studio-font);
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.studio-login-input:focus {
+  border-color: var(--studio-accent);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.studio-login-input-icon {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--studio-text-dim);
+  pointer-events: none;
+  width: 16px;
+  height: 16px;
+}
+
+/* Submit button */
+.studio-login-submit {
+  position: relative;
+  width: 100%;
+  padding: 16px 20px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  background: var(--studio-accent);
+  color: var(--studio-on-accent);
+  border: none;
+  cursor: pointer;
+  font-family: var(--studio-font);
+  transition: box-shadow 0.5s, opacity 0.2s;
+  overflow: hidden;
+}
+
+.studio-login-submit:hover:not(:disabled) {
+  box-shadow: 0 8px 30px var(--studio-accent-strong, rgba(59, 130, 246, 0.3));
+}
+
+.studio-login-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.studio-login-submit-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+}
+
+.studio-login-submit-arrow {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.3s;
+}
+
+.studio-login-submit:hover:not(:disabled) .studio-login-submit-arrow {
+  transform: translateX(4px);
+}
+
+/* Inline error banner */
+.studio-login-error {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+  padding: 1rem;
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: var(--studio-red);
+  font-size: 13px;
+}
+
+.studio-login-error[hidden] { display: none; }
+
+.studio-login-error svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* Footer */
+.studio-login-footer {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  text-align: center;
+  border-top: 1px solid var(--studio-border);
+}
+
+.studio-login-footer a {
+  font-size: 11px;
+  letter-spacing: 0.05em;
+  color: var(--studio-text-dim);
+  transition: opacity 0.2s;
+}
+
+.studio-login-footer a:hover { opacity: 0.7; }

package/static/cms/studio-tokens.css

@@ -0,0 +1,85 @@
+/* ========================================================================
+   Studio Design System — Token Layer
+   ------------------------------------------------------------------------
+   Two layers, in cascade order:
+
+   1. SEMANTIC tokens (--color-theme-*, --space-*, --radius-*, --font-*)
+      The contract that themes override. A theme preset only needs to
+      redeclare these to fully restyle the studio.
+
+   2. STUDIO aliases (--studio-*)
+      The names existing studio CSS classes already consume. Each alias
+      is derived from a semantic token, so semantic overrides cascade
+      automatically.
+
+   Defaults below = the "Studio" preset (neutral dark + product blue).
+   The /api/cms/theme.css endpoint (theme-stylesheet route) re-emits
+   the SEMANTIC layer for whichever preset is active, so the aliases
+   below never need to change per theme.
+   ======================================================================== */
+
+:root {
+  /* ─── Semantic: Surface ───────────────────────────────────────────── */
+  --color-theme-bg-deep: #0c0e12;
+  --color-theme-surface: #14171c;
+  --color-theme-surface-elevated: #1c2027;
+  --color-theme-surface-muted: rgba(255, 255, 255, 0.03);
+
+  /* ─── Semantic: Border ────────────────────────────────────────────── */
+  --color-theme-border-subtle: rgba(255, 255, 255, 0.06);
+  --color-theme-border: rgba(255, 255, 255, 0.10);
+
+  /* ─── Semantic: Accent ────────────────────────────────────────────── */
+  --color-theme-accent: #3b82f6;
+  --color-theme-accent-soft: rgba(59, 130, 246, 0.12);
+  --color-theme-accent-strong: rgba(59, 130, 246, 0.24);
+  --color-theme-on-accent: #ffffff;
+
+  /* ─── Semantic: Text ──────────────────────────────────────────────── */
+  --color-theme-text: rgba(255, 255, 255, 0.92);
+  --color-theme-text-muted: rgba(255, 255, 255, 0.55);
+  --color-theme-text-dim: rgba(255, 255, 255, 0.32);
+
+  /* ─── Semantic: State ─────────────────────────────────────────────── */
+  --color-theme-success: #22c55e;
+  --color-theme-danger: #ef4444;
+  --color-theme-info: #3b82f6;
+  --color-theme-warning: #eab308;
+
+  /* ─── Semantic: Typography ────────────────────────────────────────── */
+  --font-theme-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-theme-heading: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-theme-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
+
+  /* ─── Semantic: Scale ─────────────────────────────────────────────── */
+  --radius-theme-xs: 2px;
+  --radius-theme-sm: 4px;
+  --radius-theme-md: 6px;
+  --radius-theme-lg: 12px;
+  --space-theme-xs: 0.25rem;
+  --space-theme-sm: 0.5rem;
+  --space-theme-md: 1rem;
+  --space-theme-lg: 1.5rem;
+  --space-theme-xl: 2rem;
+  --space-theme-2xl: 3rem;
+
+  /* ─── Studio Aliases (derive from semantic — do not hand-edit) ────── */
+  --studio-bg: var(--color-theme-bg-deep);
+  --studio-surface: var(--color-theme-surface);
+  --studio-surface-hover: var(--color-theme-surface-elevated);
+  --studio-border: var(--color-theme-border-subtle);
+  --studio-border-hover: var(--color-theme-border);
+  --studio-accent: var(--color-theme-accent);
+  --studio-accent-soft: var(--color-theme-accent-soft);
+  --studio-accent-strong: var(--color-theme-accent-strong);
+  --studio-on-accent: var(--color-theme-on-accent);
+  --studio-text: var(--color-theme-text);
+  --studio-text-muted: var(--color-theme-text-muted);
+  --studio-text-dim: var(--color-theme-text-dim);
+  --studio-green: var(--color-theme-success);
+  --studio-red: var(--color-theme-danger);
+  --studio-blue: var(--color-theme-info);
+  --studio-font: var(--font-theme-body);
+  --studio-font-heading: var(--font-theme-heading);
+  --studio-font-mono: var(--font-theme-mono);
+}