@caretcms/core 0.1.2 → 0.3.0

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.css

@@ -1,7 +1,7 @@
 /* ========================================================================
    CMS Editor Styles — only loaded when isEditor = true
    ======================================================================== */
-@import "./editor/tokens-and-text.css";
+@import "./editor/tokens-and-text.css?v=studio-upstream-20260819";
 @import "./editor/image.css";
 @import "./editor/section-controls.css";
 @import "./editor/toolbar.css";

package/static/cms/editor.js

@@ -18,12 +18,13 @@ import { createToast } from './editor/toast.js';
 import { mountEditorGuards } from './editor/guards.js';
 import { mountToolbar, normalizePreviewForDelivery } from './editor/toolbar.js';
 import { mountStudioPanel } from './editor/panel.js';
-import { mountStudioSync } from './editor/sync.js';
+import { mountStudioSync } from './editor/sync.js?v=studio-upstream-20260819';
 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 { 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,

package/static/cms/studio-tokens.css

@@ -30,15 +30,15 @@
   --color-theme-border: rgba(255, 255, 255, 0.10);
 
   /* ─── Semantic: Accent ────────────────────────────────────────────── */
-  --color-theme-accent: #3b82f6;
+  --color-theme-accent: #60a5fa;
   --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;
+  --color-theme-on-accent: #07111f;
 
   /* ─── 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);
+  --color-theme-text-muted: #b6bac3;
+  --color-theme-text-dim: #9298a3;
 
   /* ─── Semantic: State ─────────────────────────────────────────────── */
   --color-theme-success: #22c55e;

package/static/cms/studio.css

@@ -29,6 +29,18 @@ html, body {
   box-sizing: border-box;
 }
 
+.studio-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -47,9 +59,11 @@ a {
 /* ─── Layout: Shell + Header ────────────────────────────────────────── */
 
 .studio-shell {
+  height: 100dvh;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .studio-header {
@@ -87,6 +101,15 @@ a {
   flex-shrink: 0;
 }
 
+.studio-editor-identity {
+  max-width: 14rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--studio-text-muted);
+  font-size: 0.72rem;
+}
+
 .studio-brand {
   display: flex;
   align-items: center;
@@ -113,6 +136,7 @@ a {
 
 .studio-main {
   flex: 1;
+  min-height: 0;
   padding: var(--space-theme-xl) var(--space-theme-lg);
   overflow-y: auto;
 }