@caretcms/core 0.1.2 → 0.2.0

package/static/cms/editor/toast.js

@@ -1,29 +1,128 @@
+const SUCCESS_SVG =
+  '<svg class="cms-toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>';
+const ERROR_SVG =
+  '<svg class="cms-toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';
+const WARNING_SVG =
+  '<svg class="cms-toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>';
+
+function iconFor(type) {
+  if (type === 'success') return SUCCESS_SVG;
+  if (type === 'warning') return WARNING_SVG;
+  return ERROR_SVG;
+}
+
+/**
+ * Toast controller. Returns a `showToast(message, type)` function with a
+ * `.conflict()` method for the two-choice save-conflict prompt.
+ *
+ * Design notes:
+ *  - Toasts stack (a container region) instead of one replacing the next, so a
+ *    burst of saves or an error + a later success don't clobber each other.
+ *  - Errors and conflict prompts are STICKY and dismissible — a 2.5s auto-hide
+ *    would let a failure or a data-loss choice vanish before it's read.
+ *  - The message is always set via textContent, never innerHTML, so a
+ *    server-provided error string can't inject markup into the editor chrome.
+ *  - The container is an aria-live region; errors/conflicts are role="alert".
+ */
 export function createToast() {
-  let activeToast = null;
+  let container = null;
 
-  return function showToast(message, type) {
-    if (activeToast) {
-      activeToast.remove();
-    }
+  function ensureContainer() {
+    if (container && document.body.contains(container)) return container;
+    container = document.createElement('div');
+    container.className = 'cms-toast-stack';
+    container.setAttribute('aria-live', 'polite');
+    document.body.appendChild(container);
+    return container;
+  }
+
+  function dismiss(toast) {
+    if (toast._caretDismissed) return;
+    toast._caretDismissed = true;
+    toast.classList.add('cms-toast-out');
+    setTimeout(() => toast.remove(), 300);
+  }
+
+  function render(type, { message, sticky, actions, role }) {
+    const stack = ensureContainer();
 
     const toast = document.createElement('div');
     toast.className = `cms-toast cms-toast-${type}`;
+    if (role) toast.setAttribute('role', role);
+    if (sticky || (actions && actions.length)) toast.classList.add('cms-toast-interactive');
+
+    const iconWrap = document.createElement('span');
+    iconWrap.className = 'cms-toast-icon-wrap';
+    iconWrap.setAttribute('aria-hidden', 'true');
+    iconWrap.innerHTML = iconFor(type); // trusted constant SVG only
+    toast.appendChild(iconWrap);
+
+    const msg = document.createElement('span');
+    msg.className = 'cms-toast-msg';
+    msg.textContent = message; // never innerHTML — message may carry server text
+    toast.appendChild(msg);
+
+    if (actions && actions.length) {
+      const group = document.createElement('div');
+      group.className = 'cms-toast-actions';
+      for (const action of actions) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = `cms-toast-btn${action.primary ? ' cms-toast-btn-primary' : ''}`;
+        btn.textContent = action.label;
+        btn.addEventListener('click', () => {
+          dismiss(toast);
+          try {
+            action.onClick();
+          } catch (e) {
+            /* action errors shouldn't break the toast */
+          }
+        });
+        group.appendChild(btn);
+      }
+      toast.appendChild(group);
+    } else if (sticky) {
+      const close = document.createElement('button');
+      close.type = 'button';
+      close.className = 'cms-toast-close';
+      close.setAttribute('aria-label', 'Dismiss');
+      close.textContent = '×';
+      close.addEventListener('click', () => dismiss(toast));
+      toast.appendChild(close);
+    }
+
+    stack.appendChild(toast);
+    if (!sticky) setTimeout(() => dismiss(toast), 2500);
+    return toast;
+  }
+
+  function showToast(message, type) {
+    const t = type === 'error' ? 'error' : type || 'success';
+    return render(t, {
+      message,
+      sticky: t === 'error',
+      role: t === 'error' ? 'alert' : undefined,
+    });
+  }
+
+  // Two-choice save-conflict prompt. Sticky so the user's edit is never silently
+  // discarded — they explicitly choose to keep theirs or load the latest.
+  showToast.conflict = ({
+    message,
+    onKeepMine,
+    onLoadLatest,
+    keepLabel = 'Keep mine',
+    latestLabel = 'Load latest',
+  }) =>
+    render('warning', {
+      message,
+      sticky: true,
+      role: 'alert',
+      actions: [
+        { label: keepLabel, primary: true, onClick: onKeepMine },
+        { label: latestLabel, onClick: onLoadLatest },
+      ],
+    });
 
-    const iconSvg =
-      type === 'success'
-        ? '<svg class="cms-toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>'
-        : '<svg class="cms-toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';
-
-    toast.innerHTML = iconSvg + `<span>${message}</span>`;
-    document.body.appendChild(toast);
-    activeToast = toast;
-
-    setTimeout(() => {
-      toast.classList.add('cms-toast-out');
-      setTimeout(() => {
-        toast.remove();
-        if (activeToast === toast) activeToast = null;
-      }, 300);
-    }, 2500);
-  };
+  return showToast;
 }

package/static/cms/editor/tokens-and-text.css

@@ -16,14 +16,43 @@
   --cms-green: #22c55e;
   --cms-red: #ef4444;
   --cms-yellow: #eab308;
+  --cms-amber: #eab308;
   --cms-font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
 }
 
+/* ---------------------------------------------------------------------------
+   Host-style insulation
+
+   The editor chrome is injected as direct <body> children on the HOST site, so
+   an aggressive host reset (`* {}`, `body {}`, tag selectors) can bleed into it
+   — distorting fonts, line-height, letter-spacing, or box model. Pin the chrome
+   roots to sane defaults so they render consistently regardless of the host's
+   CSS. (Individual controls set their own type where needed.)
+   --------------------------------------------------------------------------- */
+.cms-toolbar,
+.cms-toast-stack,
+.cms-toast,
+.cms-link-popover,
+.cms-content-map,
+.cms-link-follow,
+.cms-rich-toolbar,
+.cms-studio-panel {
+  box-sizing: border-box;
+  font-family: var(--cms-font);
+  line-height: normal;
+  letter-spacing: normal;
+  text-transform: none;
+  text-align: left;
+}
+
 /* ---------------------------------------------------------------------------
    Text editing affordances — simple blue outline
    --------------------------------------------------------------------------- */
 
-[data-caret].cms-editable {
+/* Both field bindings (data-caret) and markdown body blocks (data-caret-md)
+   carry .cms-editable, so the hover/focus affordances apply to both. */
+[data-caret].cms-editable,
+[data-caret-md].cms-editable {
   cursor: text;
   transition: outline 0.2s, box-shadow 0.2s, background 0.4s;
   outline: 2px dashed transparent;
@@ -31,16 +60,48 @@
   border-radius: 2px;
 }
 
-[data-caret].cms-editable:hover {
+[data-caret].cms-editable:hover,
+[data-caret-md].cms-editable:hover {
   outline-color: var(--cms-blue-hover);
 }
 
-[data-caret].cms-editable:focus {
+[data-caret].cms-editable:focus,
+[data-caret-md].cms-editable:focus {
   outline: 2px solid var(--cms-blue);
   outline-offset: 4px;
   box-shadow: 0 0 0 4px var(--cms-blue-dim);
 }
 
+/* ---------------------------------------------------------------------------
+   Unpublished body draft
+   The server rewrite tags blocks whose prose comes from an unpublished draft
+   (editor preview only — the public reads the base and never receives this).
+   Flag them so a reloaded preview is visibly distinct from live, published
+   prose and the editor knows a Publish is still pending.
+   --------------------------------------------------------------------------- */
+
+[data-caret-md-draft] {
+  position: relative;
+  background: var(--cms-blue-dim);
+  box-shadow: -0.6em 0 0 0 var(--cms-blue-dim);
+  border-radius: 2px;
+}
+
+[data-caret-md-draft]::after {
+  content: 'Draft';
+  position: absolute;
+  top: -0.6em;
+  right: 0;
+  font: 600 10px / 1 var(--cms-font);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #fff;
+  background: var(--cms-yellow);
+  padding: 3px 6px;
+  border-radius: 3px;
+  pointer-events: none;
+}
+
 /* ---------------------------------------------------------------------------
    Link/button click prevention in editor mode
    --------------------------------------------------------------------------- */

package/static/cms/editor/toolbar.css

@@ -133,7 +133,7 @@
   letter-spacing: 0.08em;
   text-transform: uppercase;
   background: transparent;
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.72);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 2px;
   cursor: pointer;
@@ -189,7 +189,7 @@
 }
 
 .cms-status-text {
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.72);
   font-size: 11px;
   font-weight: 400;
 }
@@ -220,6 +220,17 @@
   display: none;
 }
 
+/* Draft controls wrapper is transparent to the toolbar's flex layout so its
+   buttons keep the row's gap; [hidden] (server delivery, no pending draft)
+   still collapses the whole group. */
+.cms-draft-controls {
+  display: contents;
+}
+
+.cms-draft-controls[hidden] {
+  display: none;
+}
+
 /* Draft preview active — amber, signalling "unpublished" */
 .cms-toolbar button.cms-preview-btn-active {
   background: rgba(234, 179, 8, 0.12);
@@ -227,7 +238,7 @@
   color: var(--cms-yellow);
 }
 
-/* Go live — primary action on static delivery */
+/* Publish — primary action on static delivery */
 .cms-toolbar button.cms-go-live-btn {
   background: rgba(34, 197, 94, 0.12);
   border-color: rgba(34, 197, 94, 0.3);
@@ -240,7 +251,7 @@
   color: var(--cms-green);
 }
 
-/* Publish — green (server delivery when preview is manually enabled) */
+/* Publish — green */
 .cms-toolbar button.cms-publish-btn {
   background: rgba(34, 197, 94, 0.12);
   border-color: rgba(34, 197, 94, 0.3);
@@ -260,8 +271,9 @@
   color: var(--cms-red);
 }
 
-/* Highlight all mode — show every editable region */
-.cms-highlight-all [data-caret].cms-editable {
+/* Highlight all mode — show every editable region (fields AND body blocks) */
+.cms-highlight-all [data-caret].cms-editable,
+.cms-highlight-all [data-caret-md].cms-editable {
   outline-color: var(--cms-blue-hover);
   background: rgba(59, 130, 246, 0.04);
 }
@@ -275,6 +287,7 @@
    transition — motion is suppressed, the information is not. */
 @media (prefers-reduced-motion: reduce) {
   .cms-highlight-all [data-caret].cms-editable,
+  .cms-highlight-all [data-caret-md].cms-editable,
   .cms-highlight-all img[data-caret] {
     transition: none;
   }

package/static/cms/editor/toolbar.js

@@ -50,18 +50,26 @@ function getToolbarNavLinks(pagePath) {
 }
 
 function renderDraftControls(staticDelivery) {
-  if (!staticDelivery) return '';
-
+  // Static delivery is always drafting, so the controls stay visible. Server
+  // delivery saves field edits straight to the site, but inline body-block
+  // edits are ALWAYS drafts (they splice into source files only at publish), so
+  // the controls render here too — hidden until at least one draft is pending
+  // (toggled by refreshDraftControls) so the toolbar stays quiet otherwise.
+  const publishTitle = staticDelivery
+    ? 'Publish drafts; static visitors update after rebuild and deploy'
+    : 'Publish your body-block drafts into the source files';
   return `
-        <button class="cms-publish-btn cms-go-live-btn" type="button" title="Push your draft changes to the live site">
-          <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="M12 19V5"/><polyline points="5 12 12 5 19 12"/></svg>
-          <span class="cms-go-live-label">Go live</span>
-        </button>
-        <button class="cms-discard-btn" type="button" title="Discard your draft changes">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-          Discard
-        </button>
-        <div class="cms-toolbar-divider"></div>`;
+        <span class="cms-draft-controls"${staticDelivery ? '' : ' hidden'}>
+          <button class="cms-publish-btn cms-go-live-btn" type="button" title="${publishTitle}">
+            <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="M12 19V5"/><polyline points="5 12 12 5 19 12"/></svg>
+            <span class="cms-go-live-label">Publish</span>
+          </button>
+          <button class="cms-discard-btn" type="button" title="Discard your draft changes">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+            Discard
+          </button>
+          <div class="cms-toolbar-divider"></div>
+        </span>`;
 }
 
 function renderToolbar(navLinks, staticDelivery) {
@@ -74,7 +82,7 @@ function renderToolbar(navLinks, staticDelivery) {
 
   const badgeLabel = staticDelivery ? 'Draft' : 'Live';
   const badgeHint = staticDelivery
-    ? 'Not on your site until you go live'
+    ? 'Draft preview; visitors update after publish, rebuild, and deploy'
     : 'Changes save directly to your site';
 
   const toolbar = document.createElement('div');
@@ -88,8 +96,8 @@ function renderToolbar(navLinks, staticDelivery) {
           <span class="cms-toolbar-badge-text">${badgeLabel}</span>
         </div>
         <div class="cms-toolbar-divider"></div>
-        <div class="cms-status-group">
-          <span class="cms-status-dot cms-status-idle"></span>
+        <div class="cms-status-group" role="status" aria-live="polite">
+          <span class="cms-status-dot cms-status-idle" aria-hidden="true"></span>
           <span class="cms-status-text">Ready</span>
         </div>
       </div>
@@ -168,16 +176,30 @@ export function mountToolbar({ showToast, clearDirty, onLogout }) {
   }
 
   async function publishDrafts() {
-    setStatus('saving', 'Going live…');
+    setStatus('saving', 'Publishing…');
     try {
       const res = await draftRequest('POST', '/publish');
       if (!res.ok) throw new Error('publish failed');
       const data = await res.json();
       const n = Array.isArray(data.published) ? data.published.length : 0;
+      const conflicts = Array.isArray(data.conflicts) ? data.conflicts.length : 0;
+      if (conflicts > 0) {
+        // Stale body drafts: preserved server-side, NOT published. Reload so
+        // fresh stamps arrive and the editor can re-apply them.
+        setStatus('error', 'Some drafts conflicted');
+        showToast(
+          n > 0
+            ? `Published ${n} change(s); ${conflicts} draft(s) conflicted with newer content — reloading so you can re-apply.`
+            : `${conflicts} draft(s) conflicted with newer content — reloading so you can re-apply.`,
+          'error',
+        );
+        window.location.reload();
+        return n > 0;
+      }
       if (data.rebuild?.triggered && data.rebuild.ok === false) {
-        setStatus('error', 'Live, but deploy failed');
+        setStatus('error', 'Published, deploy failed');
         showToast(
-          'Changes are saved, but the deploy webhook failed. Check your CI settings.',
+          'Changes are published, but the deploy webhook failed. Check your CI settings.',
           'error',
         );
         return false;
@@ -185,18 +207,23 @@ export function mountToolbar({ showToast, clearDirty, onLogout }) {
       if (data.rebuild?.triggered) {
         showToast(
           n > 0
-            ? `Went live with ${n} change(s) — your site is rebuilding`
+            ? `Published ${n} change(s) — rebuild started`
             : 'Your site is rebuilding',
           'success',
         );
       } else {
-        showToast(n > 0 ? `Went live with ${n} change(s)` : 'Already up to date', 'success');
+        showToast(
+          n > 0
+            ? `Published ${n} change(s) — rebuild and deploy to update visitors`
+            : 'Already up to date',
+          'success',
+        );
       }
       window.location.reload();
       return true;
     } catch {
-      setStatus('error', 'Go live failed');
-      showToast('Go live failed', 'error');
+      setStatus('error', 'Publish failed');
+      showToast('Publish failed', 'error');
       return false;
     }
   }
@@ -206,7 +233,7 @@ export function mountToolbar({ showToast, clearDirty, onLogout }) {
       const count = await fetchDraftCount();
       if (count > 0) {
         const goLive = window.confirm(
-          `You have ${count} unpublished change${count === 1 ? '' : 's'}. Go live before signing out?`,
+          `You have ${count} unpublished change${count === 1 ? '' : 's'}. Publish before signing out?`,
         );
         if (goLive) {
           await publishDrafts();
@@ -235,7 +262,7 @@ export function mountToolbar({ showToast, clearDirty, onLogout }) {
     if (
       !window.confirm(
         staticDelivery
-          ? 'Push all your draft changes to the live site?'
+          ? 'Publish all draft changes? Static visitors update after rebuild and deploy.'
           : 'Publish all your draft changes to the live site?',
       )
     ) {
@@ -256,6 +283,20 @@ export function mountToolbar({ showToast, clearDirty, onLogout }) {
     }
   });
 
+  // Server delivery hides the draft controls until a body draft exists. Field
+  // edits save directly (no draft), so the count reflects pending body blocks.
+  // Refresh on mount and whenever a body block is drafted; publish/discard
+  // reload the page, so mount re-evaluates from scratch.
+  const draftControls = toolbar.querySelector('.cms-draft-controls');
+  async function refreshDraftControls() {
+    if (staticDelivery || !draftControls) return;
+    draftControls.hidden = (await fetchDraftCount()) === 0;
+  }
+  if (!staticDelivery) {
+    refreshDraftControls();
+    window.addEventListener('cms:draftSaved', refreshDraftControls);
+  }
+
   const studioButton = toolbar.querySelector('.cms-studio-btn');
   const mapButton = toolbar.querySelector('.cms-map-btn');
   return {

package/static/cms/editor.js

@@ -24,6 +24,7 @@ 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 { mountMdBlockEditors } from './editor/md-block-edit.js';
 import { mountLinkFollowAffordances } from './editor/link-follow.js';
 import { revealAndFade } from './editor/highlight.js';
 import { hydrateStega } from './editor/stega-hydrate.js';
@@ -36,7 +37,10 @@ function boot() {
   if (normalizePreviewForDelivery()) return;
 
   const state = {
-    dirtyEl: null,
+    // Every element with unsaved edits. A Set (not a single element) so a save
+    // completing on field A can't clear the dirty flag for field B the user has
+    // since moved to — that would let the beforeunload guard miss B's edits.
+    dirtyEls: new Set(),
     linkPopupEl: null,
   };
 
@@ -52,7 +56,7 @@ function boot() {
   const { studioButton, mapButton, setStatus } = mountToolbar({
     showToast,
     clearDirty: () => {
-      state.dirtyEl = null;
+      state.dirtyEls.clear();
     },
     onLogout: async () => {
       await fetch(buildCmsUrl('/auth/logout'), { method: 'POST' });
@@ -94,6 +98,13 @@ function boot() {
       richToolbarMounted = true;
     }
 
+    mountMdBlockEditors({
+      state,
+      flash,
+      showToast,
+      onUnauthorized: redirectToEditorLogin,
+    });
+
     mountImageEditors({
       parseCaretAttr,
       flash,