@caretcms/core 0.1.1 → 0.2.0

package/static/cms/editor/toolbar.js

@@ -1,5 +1,5 @@
 import { toggleHighlight } from './highlight.js';
-import { buildCmsUrl } from './config.js';
+import { buildCmsUrl, isStaticDelivery } from './config.js';
 
 const PREVIEW_COOKIE = 'caret_preview';
 
@@ -13,6 +13,26 @@ function setPreviewCookie(on) {
     : `${PREVIEW_COOKIE}=; path=/; Max-Age=0; SameSite=Lax`;
 }
 
+/** Static delivery always drafts — turn preview on once so saves stay unpublished. */
+export function ensureStaticPreviewMode() {
+  if (!isStaticDelivery()) return false;
+  if (previewActive()) return false;
+  setPreviewCookie(true);
+  window.location.reload();
+  return true;
+}
+
+/** Align preview cookie with delivery mode (static on, server off). */
+export function normalizePreviewForDelivery() {
+  if (isStaticDelivery()) return ensureStaticPreviewMode();
+  if (previewActive()) {
+    setPreviewCookie(false);
+    window.location.reload();
+    return true;
+  }
+  return false;
+}
+
 function getToolbarNavLinks(pagePath) {
   const links = [];
   const headerNav = document.querySelector('#main-header nav');
@@ -29,7 +49,30 @@ function getToolbarNavLinks(pagePath) {
   return links;
 }
 
-function renderToolbar(navLinks) {
+function renderDraftControls(staticDelivery) {
+  // 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 `
+        <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) {
   const navLinksHtml = navLinks
     .map(
       ({ href, label, isActive }) =>
@@ -37,36 +80,30 @@ function renderToolbar(navLinks) {
     )
     .join('');
 
+  const badgeLabel = staticDelivery ? 'Draft' : 'Live';
+  const badgeHint = staticDelivery
+    ? 'Draft preview; visitors update after publish, rebuild, and deploy'
+    : 'Changes save directly to your site';
+
   const toolbar = document.createElement('div');
   toolbar.className = 'cms-toolbar';
+  toolbar.dataset.delivery = staticDelivery ? 'static' : 'server';
   toolbar.innerHTML = `
     <div class="cms-toolbar-inner">
       <div class="cms-toolbar-left">
-        <div class="cms-toolbar-badge">
+        <div class="cms-toolbar-badge" title="${badgeHint}">
           <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>
+          <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>
       ${navLinksHtml ? `<div class="cms-toolbar-nav">${navLinksHtml}</div>` : ''}
       <div class="cms-toolbar-right">
-        <button class="cms-preview-btn" type="button" title="Toggle draft preview — edit without publishing 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="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-          Preview
-        </button>
-        <button class="cms-publish-btn" type="button" title="Publish your draft changes to the live site" hidden>
-          <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>
-          Publish
-        </button>
-        <button class="cms-discard-btn" type="button" title="Discard your draft changes" hidden>
-          <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>
+        ${renderDraftControls(staticDelivery)}
         <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
@@ -79,12 +116,12 @@ function renderToolbar(navLinks) {
         <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
+          <span class="cms-highlight-label">Show all</span>
         </button>
         <div class="cms-toolbar-divider"></div>
-        <button class="cms-exit-btn" type="button">
+        <button class="cms-exit-btn" type="button" title="Sign out">
           <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
+          Sign out
         </button>
       </div>
     </div>
@@ -94,8 +131,9 @@ function renderToolbar(navLinks) {
 }
 
 export function mountToolbar({ showToast, clearDirty, onLogout }) {
+  const staticDelivery = isStaticDelivery();
   const navLinks = getToolbarNavLinks(window.location.pathname);
-  const toolbar = renderToolbar(navLinks);
+  const toolbar = renderToolbar(navLinks, staticDelivery);
 
   const statusDot = toolbar.querySelector('.cms-status-dot');
   const statusText = toolbar.querySelector('.cms-status-text');
@@ -114,40 +152,6 @@ export function mountToolbar({ showToast, clearDirty, onLogout }) {
     toggleHighlight(highlightBtn, showToast),
   );
 
-  toolbar.querySelector('.cms-exit-btn')?.addEventListener('click', async () => {
-    clearDirty();
-    await onLogout();
-  });
-
-  // --- Draft preview + publish/discard ---
-  const previewBtn = toolbar.querySelector('.cms-preview-btn');
-  const publishBtn = toolbar.querySelector('.cms-publish-btn');
-  const discardBtn = toolbar.querySelector('.cms-discard-btn');
-  const badgeText = toolbar.querySelector('.cms-toolbar-badge-text');
-
-  function reflectPreview() {
-    const on = previewActive();
-    previewBtn?.classList.toggle('cms-preview-btn-active', on);
-    if (publishBtn) publishBtn.hidden = !on;
-    if (discardBtn) discardBtn.hidden = !on;
-    if (badgeText) badgeText.textContent = on ? 'Draft' : 'Editor';
-    const label = previewBtn
-      && Array.from(previewBtn.childNodes).find((n) => n.nodeType === 3 && n.textContent?.trim());
-    if (label) label.textContent = on ? ' Previewing' : ' Preview';
-  }
-  reflectPreview();
-
-  previewBtn?.addEventListener('click', () => {
-    const turningOn = !previewActive();
-    setPreviewCookie(turningOn);
-    showToast(
-      turningOn ? 'Draft preview on — your edits stay unpublished' : 'Draft preview off',
-      'success',
-    );
-    // Reload so the server installs (or drops) the per-editor draft overlay.
-    window.location.reload();
-  });
-
   async function draftRequest(method, path) {
     return fetch(buildCmsUrl(path), {
       method,
@@ -157,30 +161,121 @@ export function mountToolbar({ showToast, clearDirty, onLogout }) {
     });
   }
 
-  publishBtn?.addEventListener('click', async () => {
-    if (!window.confirm('Publish all your draft changes to the live site?')) return;
+  async function fetchDraftCount() {
+    try {
+      const res = await fetch(buildCmsUrl('/draft'), {
+        credentials: 'same-origin',
+        headers: { 'x-caret-request': '1' },
+      });
+      if (!res.ok) return 0;
+      const data = await res.json();
+      return typeof data.count === 'number' ? data.count : 0;
+    } catch {
+      return 0;
+    }
+  }
+
+  async function publishDrafts() {
     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;
-      // Drafts are flushed; leave preview so the editor sees the published site.
-      setPreviewCookie(false);
-      showToast(`Published ${n} change(s)`, 'success');
+      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', 'Published, deploy failed');
+        showToast(
+          'Changes are published, but the deploy webhook failed. Check your CI settings.',
+          'error',
+        );
+        return false;
+      }
+      if (data.rebuild?.triggered) {
+        showToast(
+          n > 0
+            ? `Published ${n} change(s) — rebuild started`
+            : 'Your site is rebuilding',
+          'success',
+        );
+      } else {
+        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', 'Publish failed');
       showToast('Publish failed', 'error');
+      return false;
+    }
+  }
+
+  toolbar.querySelector('.cms-exit-btn')?.addEventListener('click', async () => {
+    if (staticDelivery) {
+      const count = await fetchDraftCount();
+      if (count > 0) {
+        const goLive = window.confirm(
+          `You have ${count} unpublished change${count === 1 ? '' : 's'}. Publish before signing out?`,
+        );
+        if (goLive) {
+          await publishDrafts();
+          return;
+        }
+        const discard = window.confirm(
+          'Discard unpublished changes and sign out?',
+        );
+        if (!discard) return;
+        try {
+          const res = await draftRequest('DELETE', '/draft');
+          if (!res.ok) throw new Error('discard failed');
+        } catch {
+          showToast('Could not discard drafts', 'error');
+          return;
+        }
+      }
     }
+
+    clearDirty();
+    await onLogout();
   });
 
-  discardBtn?.addEventListener('click', async () => {
+  const publishBtn = toolbar.querySelector('.cms-publish-btn');
+  publishBtn?.addEventListener('click', async () => {
+    if (
+      !window.confirm(
+        staticDelivery
+          ? 'Publish all draft changes? Static visitors update after rebuild and deploy.'
+          : 'Publish all your draft changes to the live site?',
+      )
+    ) {
+      return;
+    }
+    await publishDrafts();
+  });
+
+  toolbar.querySelector('.cms-discard-btn')?.addEventListener('click', async () => {
     if (!window.confirm('Discard all your draft changes? This cannot be undone.')) return;
     try {
       const res = await draftRequest('DELETE', '/draft');
       if (!res.ok) throw new Error('discard failed');
-      setPreviewCookie(false);
       showToast('Draft discarded', 'success');
       window.location.reload();
     } catch {
@@ -188,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

@@ -16,7 +16,7 @@ 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 { mountToolbar, normalizePreviewForDelivery } from './editor/toolbar.js';
 import { mountStudioPanel } from './editor/panel.js';
 import { mountStudioSync } from './editor/sync.js';
 import { mountTextEditors } from './editor/text-edit.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';
@@ -33,8 +34,13 @@ function redirectToEditorLogin() {
 }
 
 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,
   };
 
@@ -50,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' });
@@ -92,6 +98,13 @@ function boot() {
       richToolbarMounted = true;
     }
 
+    mountMdBlockEditors({
+      state,
+      flash,
+      showToast,
+      onUnauthorized: redirectToEditorLogin,
+    });
+
     mountImageEditors({
       parseCaretAttr,
       flash,

package/static/cms/studio-login.css

@@ -298,3 +298,73 @@
 }
 
 .studio-login-footer a:hover { opacity: 0.7; }
+
+/* Setup helper (no password / dev password) */
+.studio-login-setup {
+  margin-top: 1.25rem;
+  padding: 1rem 1.1rem;
+  border: 1px solid rgba(127, 127, 127, 0.28);
+  border-radius: 10px;
+  text-align: left;
+  font-size: 0.85rem;
+  line-height: 1.55;
+}
+
+.studio-login-setup--dev {
+  margin-top: 1rem;
+  padding: 0.8rem 1rem;
+  border-style: dashed;
+  font-size: 0.82rem;
+}
+
+.studio-login-setup-title {
+  margin: 0 0 0.6rem;
+  font-weight: 600;
+}
+
+.studio-login-setup ol {
+  margin: 0;
+  padding-left: 1.2rem;
+  display: grid;
+  gap: 0.45rem;
+}
+
+.studio-login-setup-snippet-row {
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+  margin-top: 0.35rem;
+}
+
+.studio-login-setup-snippet {
+  flex: 1;
+  padding: 0.4rem 0.55rem;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.28);
+  overflow: auto;
+  white-space: nowrap;
+  font-family: var(--studio-font-mono);
+  font-size: 0.85em;
+}
+
+.studio-login-setup-copy {
+  appearance: none;
+  cursor: pointer;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  border-radius: 6px;
+  padding: 0.4rem 0.65rem;
+  font-family: var(--studio-font);
+  font-size: 0.85em;
+  font-weight: 500;
+  line-height: 1.2;
+  flex-shrink: 0;
+}
+
+.studio-login-setup-copy:hover { opacity: 0.85; }
+
+.studio-login-setup-link {
+  display: inline-block;
+  margin-top: 0.7rem;
+}

package/static/cms/studio.css

@@ -55,7 +55,6 @@ a {
 .studio-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--space-theme-md);
   padding: var(--space-theme-md) var(--space-theme-lg);
   border-bottom: 1px solid var(--studio-border);
@@ -65,6 +64,29 @@ a {
   z-index: 10;
 }
 
+.studio-breadcrumb {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-theme-sm);
+  font-family: var(--studio-font);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--studio-text-dim);
+}
+
+.studio-header-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-theme-xs);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
 .studio-brand {
   display: flex;
   align-items: center;
@@ -73,24 +95,18 @@ a {
   font-size: 1rem;
   letter-spacing: 0.02em;
   color: var(--studio-text);
+  transition: color 0.15s;
+  flex-shrink: 0;
 }
 
+.studio-brand:hover { color: var(--studio-text-muted); }
+
 .studio-brand-mark {
   width: 24px;
   height: 24px;
   color: var(--studio-accent);
 }
 
-.studio-breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: var(--space-theme-sm);
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--studio-text-dim);
-}
-
 .studio-breadcrumb a:hover { color: var(--studio-text-muted); }
 .studio-breadcrumb-sep { opacity: 0.4; }
 .studio-breadcrumb-current { color: var(--studio-text-muted); }
@@ -101,6 +117,37 @@ a {
   overflow-y: auto;
 }
 
+.studio-home {
+  max-width: 64rem;
+  margin: 0 auto;
+}
+
+.studio-page-intro {
+  text-align: center;
+  margin: 0 0 2.5rem;
+  font-size: 0.85rem;
+  color: var(--studio-text-dim);
+}
+
+.studio-home-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+}
+
+@media (max-width: 640px) {
+  .studio-header {
+    flex-wrap: wrap;
+    padding: var(--space-theme-sm) var(--space-theme-md);
+  }
+
+  .studio-breadcrumb {
+    order: 3;
+    flex-basis: 100%;
+    padding-top: var(--space-theme-xs);
+  }
+}
+
 /* ─── Drop zone ─────────────────────────────────────────────────────── */
 
 .studio-dropzone {
@@ -259,9 +306,14 @@ textarea.studio-input {
 /* ─── Header nav links ──────────────────────────────────────────────── */
 
 .studio-nav-link {
+  display: inline-flex;
+  align-items: center;
   padding: 4px 12px;
-  font-size: 10px;
-  letter-spacing: 0.1em;
+  font-family: var(--studio-font);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
   text-decoration: none;
   color: var(--studio-text-dim);
@@ -269,6 +321,21 @@ textarea.studio-input {
   border-radius: var(--radius-theme-xs);
 }
 
+button.studio-nav-link {
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  margin: 0;
+  font-family: var(--studio-font);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--studio-text-dim);
+}
+
 .studio-nav-link:hover {
   color: var(--studio-text-muted);
   background: var(--color-theme-surface-muted);