@caretcms/core 0.1.1 → 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

@@ -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,13 +127,13 @@
   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);
+  color: rgba(255, 255, 255, 0.72);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 2px;
   cursor: pointer;
@@ -150,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;
 }
@@ -181,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);
@@ -188,6 +238,19 @@
   color: var(--cms-yellow);
 }
 
+/* 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);
+  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 */
 .cms-toolbar button.cms-publish-btn {
   background: rgba(34, 197, 94, 0.12);
@@ -208,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);
 }
@@ -223,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;
   }
@@ -246,8 +311,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);