@caretcms/core 0.1.0 → 0.1.2

package/static/cms/editor/toolbar.css

@@ -78,6 +78,45 @@
   display: flex;
   align-items: center;
   gap: 12px;
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .cms-toolbar-inner {
+    padding: 0 12px;
+    gap: 8px;
+  }
+
+  .cms-toolbar-left {
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .cms-status-text {
+    display: none;
+  }
+
+  .cms-toolbar-right {
+    gap: 6px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    flex-shrink: 1;
+    padding-left: 4px;
+  }
+
+  .cms-toolbar-right::-webkit-scrollbar {
+    display: none;
+  }
+
+  .cms-toolbar-divider {
+    display: none;
+  }
+
+  .cms-toolbar button {
+    padding: 6px 10px;
+    flex-shrink: 0;
+  }
 }
 
 /* Shared base for every toolbar button so they can't drift visually. Individual
@@ -88,10 +127,10 @@
   gap: 6px;
   padding: 6px 14px;
   font-family: var(--cms-font);
-  font-size: 10px;
+  font-size: 11px;
   font-weight: 500;
   line-height: 1.2;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
   background: transparent;
   color: rgba(255, 255, 255, 0.5);
@@ -175,6 +214,52 @@
   color: rgba(59, 130, 246, 0.9);
 }
 
+/* The base `.cms-toolbar button` sets `display`, which overrides the default
+   [hidden] behavior — restore it so hidden draft actions actually disappear. */
+.cms-toolbar button[hidden] {
+  display: none;
+}
+
+/* Draft preview active — amber, signalling "unpublished" */
+.cms-toolbar button.cms-preview-btn-active {
+  background: rgba(234, 179, 8, 0.12);
+  border-color: rgba(234, 179, 8, 0.4);
+  color: var(--cms-yellow);
+}
+
+/* Go live — 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);
+  color: var(--cms-green);
+}
+
+.cms-toolbar button.cms-go-live-btn:hover {
+  background: rgba(34, 197, 94, 0.25);
+  border-color: rgba(34, 197, 94, 0.5);
+  color: var(--cms-green);
+}
+
+/* Publish — green (server delivery when preview is manually enabled) */
+.cms-toolbar button.cms-publish-btn {
+  background: rgba(34, 197, 94, 0.12);
+  border-color: rgba(34, 197, 94, 0.3);
+  color: var(--cms-green);
+}
+
+.cms-toolbar button.cms-publish-btn:hover {
+  background: rgba(34, 197, 94, 0.25);
+  border-color: rgba(34, 197, 94, 0.5);
+  color: var(--cms-green);
+}
+
+/* Discard — red on hover */
+.cms-toolbar button.cms-discard-btn:hover {
+  background: rgba(248, 113, 113, 0.08);
+  border-color: rgba(248, 113, 113, 0.3);
+  color: var(--cms-red);
+}
+
 /* Highlight all mode — show every editable region */
 .cms-highlight-all [data-caret].cms-editable {
   outline-color: var(--cms-blue-hover);
@@ -186,6 +271,15 @@
   outline-offset: 4px;
 }
 
+/* The welcome reveal still flashes editable regions, but without animating the
+   transition — motion is suppressed, the information is not. */
+@media (prefers-reduced-motion: reduce) {
+  .cms-highlight-all [data-caret].cms-editable,
+  .cms-highlight-all img[data-caret] {
+    transition: none;
+  }
+}
+
 /* ---------------------------------------------------------------------------
    Toolbar — page navigation links
    --------------------------------------------------------------------------- */
@@ -204,8 +298,11 @@
 
 .cms-nav-link {
   padding: 5px 14px;
-  font-size: 10px;
-  letter-spacing: 0.1em;
+  font-family: var(--cms-font);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
   text-decoration: none;
   color: rgba(255, 255, 255, 0.35);

package/static/cms/editor/toolbar.js

@@ -1,3 +1,38 @@
+import { toggleHighlight } from './highlight.js';
+import { buildCmsUrl, isStaticDelivery } from './config.js';
+
+const PREVIEW_COOKIE = 'caret_preview';
+
+function previewActive() {
+  return document.cookie.split('; ').some((c) => c === `${PREVIEW_COOKIE}=1`);
+}
+
+function setPreviewCookie(on) {
+  document.cookie = on
+    ? `${PREVIEW_COOKIE}=1; path=/; SameSite=Lax`
+    : `${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');
@@ -14,7 +49,22 @@ function getToolbarNavLinks(pagePath) {
   return links;
 }
 
-function renderToolbar(navLinks) {
+function renderDraftControls(staticDelivery) {
+  if (!staticDelivery) return '';
+
+  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>`;
+}
+
+function renderToolbar(navLinks, staticDelivery) {
   const navLinksHtml = navLinks
     .map(
       ({ href, label, isActive }) =>
@@ -22,14 +72,20 @@ function renderToolbar(navLinks) {
     )
     .join('');
 
+  const badgeLabel = staticDelivery ? 'Draft' : 'Live';
+  const badgeHint = staticDelivery
+    ? 'Not on your site until you go live'
+    : '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">
@@ -39,6 +95,7 @@ function renderToolbar(navLinks) {
       </div>
       ${navLinksHtml ? `<div class="cms-toolbar-nav">${navLinksHtml}</div>` : ''}
       <div class="cms-toolbar-right">
+        ${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
@@ -51,12 +108,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>
@@ -66,8 +123,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');
@@ -81,31 +139,123 @@ export function mountToolbar({ showToast, clearDirty, onLogout }) {
     }
   }
 
-  let highlightActive = false;
   const highlightBtn = toolbar.querySelector('.cms-highlight-btn');
+  highlightBtn?.addEventListener('click', () =>
+    toggleHighlight(highlightBtn, showToast),
+  );
 
-  highlightBtn?.addEventListener('click', () => {
-    highlightActive = !highlightActive;
-    document.body.classList.toggle('cms-highlight-all', highlightActive);
-    highlightBtn.classList.toggle('cms-highlight-btn-active', highlightActive);
+  async function draftRequest(method, path) {
+    return fetch(buildCmsUrl(path), {
+      method,
+      headers: { 'Content-Type': 'application/json', 'x-caret-request': '1' },
+      credentials: 'same-origin',
+      body: method === 'POST' ? '{}' : undefined,
+    });
+  }
 
-    const textNode = Array.from(highlightBtn.childNodes).find(
-      (n) => n.nodeType === 3 && n.textContent?.trim(),
-    );
+  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;
+    }
+  }
 
-    if (highlightActive) {
-      if (textNode) textNode.textContent = ' Hide All';
-      showToast('Showing all editable regions', 'success');
-    } else {
-      if (textNode) textNode.textContent = ' Show All';
+  async function publishDrafts() {
+    setStatus('saving', 'Going live…');
+    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;
+      if (data.rebuild?.triggered && data.rebuild.ok === false) {
+        setStatus('error', 'Live, but deploy failed');
+        showToast(
+          'Changes are saved, but the deploy webhook failed. Check your CI settings.',
+          'error',
+        );
+        return false;
+      }
+      if (data.rebuild?.triggered) {
+        showToast(
+          n > 0
+            ? `Went live with ${n} change(s) — your site is rebuilding`
+            : 'Your site is rebuilding',
+          'success',
+        );
+      } else {
+        showToast(n > 0 ? `Went live with ${n} change(s)` : 'Already up to date', 'success');
+      }
+      window.location.reload();
+      return true;
+    } catch {
+      setStatus('error', 'Go live failed');
+      showToast('Go live 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'}. Go live 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();
   });
 
+  const publishBtn = toolbar.querySelector('.cms-publish-btn');
+  publishBtn?.addEventListener('click', async () => {
+    if (
+      !window.confirm(
+        staticDelivery
+          ? 'Push all your draft changes to the live site?'
+          : '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');
+      showToast('Draft discarded', 'success');
+      window.location.reload();
+    } catch {
+      showToast('Discard failed', 'error');
+    }
+  });
+
   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';
@@ -25,17 +25,25 @@ 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';
+import { revealAndFade } from './editor/highlight.js';
+import { hydrateStega } from './editor/stega-hydrate.js';
 
 function redirectToEditorLogin() {
   window.location.href = getEditorLoginUrl(window.location.href);
 }
 
 function boot() {
+  if (normalizePreviewForDelivery()) return;
+
   const state = {
     dirtyEl: null,
     linkPopupEl: null,
   };
 
+  // Promote stega-tagged (loader-fed) content into data-caret bindings before
+  // any scanner runs, so prop/component/loop content is click-to-edit too.
+  hydrateStega();
+
   mountEditorGuards(state);
   mountLinkFollowAffordances();
 
@@ -107,6 +115,15 @@ function boot() {
   });
 
   mountInlineEditors();
+
+  // First load after login: flash every editable region once, then fade out.
+  // The flag is set by the login form just before it redirects here.
+  try {
+    if (sessionStorage.getItem('caret:welcome')) {
+      sessionStorage.removeItem('caret:welcome');
+      revealAndFade(2500);
+    }
+  } catch (e) {}
 }
 
 if (document.readyState === 'loading') {

package/static/cms/signin-hint.css

@@ -0,0 +1,74 @@
+/*
+ * The authenticated empty-state hint: shown by the middleware on a live page
+ * when an editor is signed in but the page has zero `data-caret` bindings — the
+ * silent dead-end this replaces (you land on a normal page with no sign the
+ * editor noticed you). Self-contained and isolated (`all: initial` on the host)
+ * so it can't be restyled by — or restyle — the host page, and so it needs no
+ * inline styles (CSP `style-src 'self'` covers this same-origin file).
+ */
+.caret-signin-hint {
+  all: initial;
+  position: fixed;
+  bottom: 16px;
+  left: 16px;
+  z-index: 2147483000;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  max-width: min(92vw, 400px);
+  padding: 10px 14px;
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: 13px;
+  line-height: 1.45;
+  color: #e5e7eb;
+  background: #111827;
+  border: 1px solid #374151;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+}
+
+.caret-signin-hint__dot {
+  flex: 0 0 auto;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #34d399;
+  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
+}
+
+.caret-signin-hint__text {
+  color: inherit;
+  font: inherit;
+}
+
+.caret-signin-hint code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.92em;
+  color: #f9fafb;
+  background: #1f2937;
+  padding: 1px 5px;
+  border-radius: 5px;
+}
+
+.caret-signin-hint a {
+  color: #93c5fd;
+  font: inherit;
+  text-decoration: underline;
+  white-space: nowrap;
+}
+
+@media (prefers-color-scheme: light) {
+  .caret-signin-hint {
+    color: #1f2937;
+    background: #ffffff;
+    border-color: #e5e7eb;
+  }
+  .caret-signin-hint code {
+    color: #111827;
+    background: #f3f4f6;
+  }
+  .caret-signin-hint a {
+    color: #2563eb;
+  }
+}

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;
+}