@caretcms/core 0.1.0

package/static/cms/editor/text-link-interactions.js

@@ -0,0 +1,254 @@
+import { escapeHtml } from './linkify.js';
+
+export function createTextLinkInteractions({
+  state,
+  clientLinkify,
+  showToast,
+  snapshots,
+}) {
+  let activePopover = null;
+  let activeLinkHint = null;
+
+  function removeLinkHint() {
+    if (activeLinkHint) {
+      activeLinkHint.remove();
+      activeLinkHint = null;
+    }
+  }
+
+  function dismissLinkPopup() {
+    if (activePopover) {
+      activePopover.remove();
+      activePopover = null;
+    }
+    state.linkPopupEl = null;
+  }
+
+  function showLinkPopup(rect, initialUrl, onApply) {
+    dismissLinkPopup();
+
+    const popover = document.createElement('div');
+    popover.className = 'cms-link-popover';
+    popover.innerHTML = `
+      <div class="cms-link-popover-row">
+        <svg class="cms-link-popover-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/>
+          <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>
+        </svg>
+        <input type="text" class="cms-link-popover-input" placeholder="Paste URL or path (e.g. /contact)" value="${escapeHtml(initialUrl)}" />
+      </div>
+      <div class="cms-link-popover-actions">
+        <span class="cms-link-popover-hint">${navigator.platform.includes('Mac') ? '\u2318' : 'Ctrl'}+K</span>
+        <div class="cms-link-popover-btns">
+          <button type="button" class="cms-link-popover-cancel">Cancel</button>
+          <button type="button" class="cms-link-popover-apply">Apply</button>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(popover);
+    activePopover = popover;
+
+    const popW = 340;
+    let left = rect.left + rect.width / 2 - popW / 2;
+    left = Math.max(8, Math.min(left, window.innerWidth - popW - 8));
+    let top = rect.bottom + 8;
+    if (top + 120 > window.innerHeight) {
+      top = rect.top - 120;
+    }
+    popover.style.left = `${left}px`;
+    popover.style.top = `${top}px`;
+
+    const input = popover.querySelector('.cms-link-popover-input');
+    const applyBtn = popover.querySelector('.cms-link-popover-apply');
+    const cancelBtn = popover.querySelector('.cms-link-popover-cancel');
+
+    requestAnimationFrame(() => input.focus());
+    if (initialUrl) input.select();
+
+    function apply() {
+      const url = input.value.trim();
+      dismissLinkPopup();
+      onApply(url);
+    }
+
+    function cancel() {
+      dismissLinkPopup();
+      onApply(null);
+    }
+
+    applyBtn.addEventListener('click', apply);
+    cancelBtn.addEventListener('click', cancel);
+
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        apply();
+      }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        cancel();
+      }
+    });
+
+    setTimeout(() => {
+      function onDocClick(e) {
+        if (!popover.contains(e.target)) {
+          document.removeEventListener('click', onDocClick, true);
+          cancel();
+        }
+      }
+      document.addEventListener('click', onDocClick, true);
+    }, 0);
+  }
+
+  function showLinkHint(el) {
+    removeLinkHint();
+    const hint = document.createElement('div');
+    hint.className = 'cms-link-hint';
+    hint.textContent = `${navigator.platform.includes('Mac') ? '\u2318' : 'Ctrl'}+K to link`;
+    document.body.appendChild(hint);
+    activeLinkHint = hint;
+
+    const rect = el.getBoundingClientRect();
+    hint.style.top = `${rect.top - 28}px`;
+    hint.style.left = `${rect.right - hint.offsetWidth}px`;
+  }
+
+  function onKeydown(e) {
+    const focused = document.activeElement;
+
+    // Ctrl+S / Cmd+S — save focused element by triggering blur save
+    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+      e.preventDefault();
+      if (focused && focused.matches('[data-caret]')) {
+        focused.blur();
+      }
+      return;
+    }
+
+    // Ctrl+K / Cmd+K — insert link in a rich or linkable field
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      if (focused && focused.matches('[data-caret]') && focused.hasAttribute('data-caret-rich')) {
+        // Rich text mode — use execCommand('createLink')
+        e.preventDefault();
+        const sel = window.getSelection();
+        if (!sel || sel.isCollapsed) return;
+
+        const selectedText = sel.toString();
+        if (!selectedText.trim()) return;
+
+        const range = sel.getRangeAt(0).cloneRange();
+        const selRect = range.getBoundingClientRect();
+
+        // Check if selection is already a link
+        const anchorNode = sel.anchorNode;
+        const existingLink = anchorNode?.nodeType === Node.TEXT_NODE
+          ? anchorNode.parentElement?.closest('a')
+          : anchorNode instanceof Element ? anchorNode.closest('a') : null;
+        const initialUrl = existingLink?.getAttribute('href') || '';
+
+        state.linkPopupEl = focused;
+
+        showLinkPopup(selRect, initialUrl, (url) => {
+          focused.focus();
+
+          if (url) {
+            const newSel = window.getSelection();
+            newSel.removeAllRanges();
+            newSel.addRange(range);
+
+            if (existingLink) {
+              existingLink.setAttribute('href', url);
+            } else {
+              document.execCommand('createLink', false, url);
+            }
+
+            // Set security attrs on external links
+            const freshSel = window.getSelection();
+            if (freshSel && freshSel.anchorNode) {
+              const textNode = freshSel.anchorNode;
+              const newLink = textNode.nodeType === Node.TEXT_NODE
+                ? textNode.parentElement?.closest('a')
+                : textNode instanceof Element ? textNode.closest('a') : null;
+              if (newLink && /^https?:/i.test(url)) {
+                newLink.setAttribute('target', '_blank');
+                newLink.setAttribute('rel', 'noopener noreferrer');
+              }
+            }
+
+            state.dirtyEl = focused;
+          } else if (url === '' && existingLink) {
+            document.execCommand('unlink', false, null);
+            state.dirtyEl = focused;
+          }
+
+          state.linkPopupEl = null;
+        });
+        return;
+      }
+
+      if (focused && focused.matches('[data-caret]') && focused.hasAttribute('data-caret-raw')) {
+        e.preventDefault();
+        const sel = window.getSelection();
+        if (!sel || sel.isCollapsed) return;
+
+        const selectedText = sel.toString();
+        if (!selectedText.trim()) return;
+
+        const range = sel.getRangeAt(0).cloneRange();
+        const selRect = range.getBoundingClientRect();
+        state.linkPopupEl = focused;
+
+        showLinkPopup(selRect, '', (url) => {
+          focused.focus();
+
+          if (url) {
+            const newSel = window.getSelection();
+            newSel.removeAllRanges();
+            newSel.addRange(range);
+            document.execCommand('insertText', false, `[${selectedText}](${url})`);
+            state.dirtyEl = focused;
+          }
+
+          state.linkPopupEl = null;
+        });
+      }
+      return;
+    }
+
+    // Escape — revert to snapshot and blur without saving
+    if (e.key === 'Escape') {
+      if (activePopover) return;
+
+      if (focused && focused.matches('[data-caret]')) {
+        e.preventDefault();
+        const snapshot = snapshots.get(focused);
+        if (snapshot !== undefined) {
+          const isRich = focused.hasAttribute('data-caret-rich');
+          const isLinkable = focused.hasAttribute('data-caret-raw');
+          if (isRich) {
+            focused.innerHTML = snapshot;
+          } else if (isLinkable) {
+            focused.innerHTML = clientLinkify(snapshot);
+            focused.setAttribute('data-caret-raw', snapshot);
+          } else {
+            focused.textContent = snapshot;
+          }
+          state.dirtyEl = null;
+        }
+        focused._caretSkipSave = true;
+        focused.blur();
+        removeLinkHint();
+        showToast('Edit cancelled', 'success');
+      }
+    }
+  }
+
+  return {
+    onKeydown,
+    showLinkHint,
+    removeLinkHint,
+    showLinkPopup,
+  };
+}

package/static/cms/editor/toast.css

@@ -0,0 +1,50 @@
+/* ---------------------------------------------------------------------------
+   Toast notifications
+   --------------------------------------------------------------------------- */
+
+.cms-toast {
+  position: fixed;
+  bottom: 62px;
+  right: 24px;
+  z-index: 100000;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 20px;
+  background: var(--cms-surface);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  font-family: var(--cms-font);
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.8);
+  border-radius: 2px;
+  opacity: 0;
+  transform: translateY(8px) scale(0.98);
+  animation: cms-toast-in 0.3s ease forwards;
+  pointer-events: none;
+}
+
+.cms-toast.cms-toast-out {
+  animation: cms-toast-out 0.3s ease forwards;
+}
+
+.cms-toast-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.cms-toast-success { border-left: 3px solid var(--cms-green); }
+.cms-toast-success .cms-toast-icon { color: var(--cms-green); }
+
+.cms-toast-error { border-left: 3px solid var(--cms-red); }
+.cms-toast-error .cms-toast-icon { color: var(--cms-red); }
+
+@keyframes cms-toast-in {
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes cms-toast-out {
+  to { opacity: 0; transform: translateY(12px) scale(0.98); }
+}
+

package/static/cms/editor/toast.js

@@ -0,0 +1,29 @@
+export function createToast() {
+  let activeToast = null;
+
+  return function showToast(message, type) {
+    if (activeToast) {
+      activeToast.remove();
+    }
+
+    const toast = document.createElement('div');
+    toast.className = `cms-toast cms-toast-${type}`;
+
+    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);
+  };
+}

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

@@ -0,0 +1,93 @@
+/* ========================================================================
+   CMS Editor Styles — only loaded when isEditor = true
+   ======================================================================== */
+
+/* ---------------------------------------------------------------------------
+   CSS Custom Properties
+   --------------------------------------------------------------------------- */
+
+:root {
+  --cms-blue: rgba(59, 130, 246, 0.8);
+  --cms-blue-dim: rgba(59, 130, 246, 0.1);
+  --cms-blue-hover: rgba(59, 130, 246, 0.4);
+  --cms-surface: #14171c;
+  --cms-accent: #3b82f6;
+  --cms-accent-soft: rgba(59, 130, 246, 0.15);
+  --cms-green: #22c55e;
+  --cms-red: #ef4444;
+  --cms-yellow: #eab308;
+  --cms-font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+/* ---------------------------------------------------------------------------
+   Text editing affordances — simple blue outline
+   --------------------------------------------------------------------------- */
+
+[data-caret].cms-editable {
+  cursor: text;
+  transition: outline 0.2s, box-shadow 0.2s;
+  outline: 2px dashed transparent;
+  outline-offset: 4px;
+  border-radius: 2px;
+}
+
+[data-caret].cms-editable:hover {
+  outline-color: var(--cms-blue-hover);
+}
+
+[data-caret].cms-editable:focus {
+  outline: 2px solid var(--cms-blue);
+  outline-offset: 4px;
+  box-shadow: 0 0 0 4px var(--cms-blue-dim);
+}
+
+/* ---------------------------------------------------------------------------
+   Link/button click prevention in editor mode
+   --------------------------------------------------------------------------- */
+
+.cms-edit-mode a[data-caret],
+.cms-edit-mode button[data-caret],
+.cms-edit-mode [data-caret] a,
+.cms-edit-mode [data-caret] button {
+  pointer-events: auto;
+}
+
+/* CMS-editable links get text cursor; non-CMS links keep pointer for navigation */
+.cms-edit-mode a[data-caret],
+.cms-edit-mode a:has([data-caret]) {
+  cursor: text;
+}
+
+/* ---------------------------------------------------------------------------
+   Save / error feedback
+   --------------------------------------------------------------------------- */
+
+.cms-saving {
+  outline-color: var(--cms-yellow) !important;
+}
+
+.cms-saved {
+  animation: cms-flash-green 1.5s ease-out;
+}
+
+.cms-error {
+  animation: cms-flash-red 1.5s ease-out;
+}
+
+@keyframes cms-flash-green {
+  0% { outline: 2px solid var(--cms-green); outline-offset: 4px; }
+  100% { outline: 2px solid transparent; outline-offset: 4px; }
+}
+
+@keyframes cms-flash-red {
+  0% { outline: 2px solid var(--cms-red); outline-offset: 4px; }
+  100% { outline: 2px solid transparent; outline-offset: 4px; }
+}
+
+/* ---------------------------------------------------------------------------
+   Invisible overlays — prevent hover-state duplicates from blocking editing
+   --------------------------------------------------------------------------- */
+
+.cms-edit-mode .opacity-0 {
+  pointer-events: none !important;
+}

package/static/cms/editor/toolbar.css

@@ -0,0 +1,249 @@
+/* ---------------------------------------------------------------------------
+   Toolbar — fixed bottom bar
+   --------------------------------------------------------------------------- */
+
+.cms-toolbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 99999;
+  font-family: var(--cms-font);
+  font-size: 12px;
+  opacity: 0;
+  transform: translateY(100%);
+  animation: cms-toolbar-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
+}
+
+/* Insulate the toolbar from consumer page resets: every descendant uses
+   border-box so padding doesn't expand widths, and inherits our font stack so
+   user-agent defaults on <button> can't bleed through. */
+.cms-toolbar,
+.cms-toolbar *,
+.cms-toolbar *::before,
+.cms-toolbar *::after {
+  box-sizing: border-box;
+}
+
+.cms-toolbar-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--cms-surface);
+  border-top: 1px solid rgba(59, 130, 246, 0.15);
+  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
+  max-width: 100%;
+  padding: 0 24px;
+  height: 48px;
+}
+
+.cms-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.cms-toolbar-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 14px;
+  background: var(--cms-accent-soft);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  border-radius: 2px;
+}
+
+.cms-toolbar-badge svg {
+  width: 14px;
+  height: 14px;
+  color: var(--cms-accent);
+}
+
+.cms-toolbar-badge-text {
+  color: var(--cms-accent);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+
+.cms-toolbar-divider {
+  width: 1px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.08);
+  margin: 0 4px;
+}
+
+.cms-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Shared base for every toolbar button so they can't drift visually. Individual
+   button classes below only override colors/borders. */
+.cms-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  font-family: var(--cms-font);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s, color 0.2s;
+  white-space: nowrap;
+}
+
+.cms-toolbar button:hover {
+  background: rgba(59, 130, 246, 0.08);
+  border-color: rgba(59, 130, 246, 0.3);
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.cms-toolbar button svg {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
+/* Status indicator */
+.cms-status-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cms-status-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+.cms-status-idle {
+  background-color: var(--cms-green);
+  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
+}
+
+.cms-status-saving {
+  background-color: var(--cms-yellow);
+  box-shadow: 0 0 6px rgba(234, 179, 8, 0.4);
+  animation: cms-dot-pulse 1s ease-in-out infinite;
+}
+
+.cms-status-error {
+  background-color: var(--cms-red);
+  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
+}
+
+@keyframes cms-dot-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.cms-status-text {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+/* Content Studio toggle — accent-colored */
+.cms-toolbar button.cms-studio-btn {
+  background: var(--cms-accent-soft);
+  color: var(--cms-accent);
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+.cms-toolbar button.cms-studio-btn:hover {
+  background: rgba(59, 130, 246, 0.25);
+  border-color: rgba(59, 130, 246, 0.4);
+  color: var(--cms-accent);
+}
+
+/* Highlight-all active state */
+.cms-toolbar button.cms-highlight-btn-active {
+  background: rgba(59, 130, 246, 0.12);
+  border-color: rgba(59, 130, 246, 0.4);
+  color: rgba(59, 130, 246, 0.9);
+}
+
+/* Highlight all mode — show every editable region */
+.cms-highlight-all [data-caret].cms-editable {
+  outline-color: var(--cms-blue-hover);
+  background: rgba(59, 130, 246, 0.04);
+}
+
+.cms-highlight-all img[data-caret] {
+  outline: 2px dashed rgba(59, 130, 246, 0.4);
+  outline-offset: 4px;
+}
+
+/* ---------------------------------------------------------------------------
+   Toolbar — page navigation links
+   --------------------------------------------------------------------------- */
+
+.cms-toolbar-nav {
+  display: none;
+  align-items: center;
+  gap: 2px;
+}
+
+@media (min-width: 768px) {
+  .cms-toolbar-nav {
+    display: flex;
+  }
+}
+
+.cms-nav-link {
+  padding: 5px 14px;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: rgba(255, 255, 255, 0.35);
+  transition: color 0.15s, background 0.15s;
+  border-radius: 2px;
+  white-space: nowrap;
+}
+
+.cms-nav-link:hover {
+  color: rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.cms-nav-link.active {
+  color: var(--cms-accent);
+  background: var(--cms-accent-soft);
+}
+
+/* Exit — red on hover */
+.cms-toolbar button.cms-exit-btn:hover {
+  background: rgba(248, 113, 113, 0.08);
+  border-color: rgba(248, 113, 113, 0.3);
+  color: var(--cms-red);
+}
+
+/* Account for toolbar height */
+body:has(.cms-toolbar) {
+  padding-bottom: 48px;
+}
+
+/* Shift back-to-top button above toolbar */
+body:has(.cms-toolbar) #back-to-top {
+  bottom: 60px;
+}
+
+@keyframes cms-toolbar-enter {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}