@astro-live-cms/core 0.2.0

package/static/cms/editor/guards.js

@@ -0,0 +1,68 @@
+export function mountEditorGuards(state) {
+  document.body.classList.add('cms-edit-mode');
+
+  window.addEventListener('beforeunload', (e) => {
+    if (state.dirtyEl) {
+      e.preventDefault();
+      e.returnValue = '';
+    }
+  });
+
+  // Smart navigation: only block clicks on CMS-editable elements.
+  document.addEventListener(
+    'click',
+    (e) => {
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+
+      // Allow clicks inside the CMS toolbar
+      if (target.closest('.cms-toolbar')) return;
+
+      // Allow clicks on image overlay buttons
+      if (target.closest('.cms-img-overlay')) return;
+
+      // Allow clicks inside the link popover
+      if (target.closest('.cms-link-popover')) return;
+
+      const editable = target.closest('[data-cms]');
+      const link = target.closest('a');
+      if (link) {
+        // Link contains or is a CMS editable — block nav, focus editable
+        const cmsInLink = editable || link.querySelector('[data-cms]');
+        if (cmsInLink instanceof HTMLElement) {
+          e.preventDefault();
+          e.stopPropagation();
+          cmsInLink.focus();
+          return;
+        }
+        // Non-CMS link — let it navigate normally
+        return;
+      }
+
+      // For buttons: only intercept if they contain CMS content
+      const btn = target.closest('button');
+      if (btn && !btn.closest('.cms-toolbar') && !btn.closest('.cms-img-wrapper')) {
+        const cmsInBtn = editable || btn.querySelector('[data-cms]');
+        if (cmsInBtn instanceof HTMLElement) {
+          e.preventDefault();
+          e.stopPropagation();
+          cmsInBtn.focus();
+        }
+      }
+    },
+    true,
+  );
+
+  // Block form submissions (except CMS forms)
+  document.addEventListener(
+    'submit',
+    (e) => {
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+      if (!target.closest('.cms-toolbar')) {
+        e.preventDefault();
+      }
+    },
+    true,
+  );
+}

package/static/cms/editor/helpers.js

@@ -0,0 +1,16 @@
+export function parseCmsAttr(attr) {
+  const dot1 = attr.indexOf('.');
+  const dot2 = attr.indexOf('.', dot1 + 1);
+  if (dot1 === -1 || dot2 === -1) return null;
+  return {
+    collection: attr.slice(0, dot1),
+    id: attr.slice(dot1 + 1, dot2),
+    field: attr.slice(dot2 + 1),
+  };
+}
+
+export function flash(el, success) {
+  const cls = success ? 'cms-saved' : 'cms-error';
+  el.classList.add(cls);
+  setTimeout(() => el.classList.remove(cls), 2000);
+}

package/static/cms/editor/image-edit.js

@@ -0,0 +1,148 @@
+import { API_BASE } from './config.js';
+import { uploadHeaders } from './security.js';
+
+export function mountImageEditors({
+  parseCmsAttr,
+  flash,
+  compressImage,
+  updateEmblaCarousel,
+  saveField,
+  setStatus,
+  showToast,
+  onUnauthorized,
+}) {
+  const syncBoundImages = (marker, src) => {
+    document.querySelectorAll('[data-cms-img]').forEach((node) => {
+      if (!(node instanceof HTMLImageElement)) return;
+      if (node.getAttribute('data-cms-img') !== marker) return;
+      node.src = src;
+      updateEmblaCarousel(node, src);
+    });
+  };
+
+  document.querySelectorAll('[data-cms-img]').forEach((img) => {
+    if (!(img instanceof HTMLImageElement)) return;
+    if (img.dataset.cmsImgMounted === 'true') return;
+    img.dataset.cmsImgMounted = 'true';
+
+    const existingWrapper = img.parentElement;
+    if (existingWrapper?.classList.contains('cms-img-wrapper')) {
+      existingWrapper.parentNode?.insertBefore(img, existingWrapper);
+      existingWrapper.remove();
+    }
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'cms-img-wrapper';
+    wrapper.style.position = 'relative';
+    wrapper.style.display = 'block';
+    wrapper.style.width = '100%';
+    wrapper.style.height = '100%';
+
+    img.parentNode?.insertBefore(wrapper, img);
+    wrapper.appendChild(img);
+
+    // Corner badge — persistent edit indicator
+    const badge = document.createElement('div');
+    badge.className = 'cms-img-badge';
+    badge.innerHTML =
+      '<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="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>';
+    wrapper.appendChild(badge);
+
+    // Full overlay with idle + uploading states
+    const overlay = document.createElement('button');
+    overlay.className = 'cms-img-overlay';
+    overlay.type = 'button';
+    overlay.innerHTML = `
+      <span class="cms-img-overlay-content cms-img-state-idle">
+        <svg class="cms-img-overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/>
+          <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"/>
+        </svg>
+        <span class="cms-img-overlay-text">Replace Image</span>
+      </span>
+      <span class="cms-img-overlay-content cms-img-state-uploading">
+        <span class="cms-img-spinner"></span>
+        <span class="cms-img-overlay-text">Uploading...</span>
+      </span>
+    `;
+    wrapper.appendChild(overlay);
+
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/jpeg,image/png,image/webp,image/avif';
+    input.style.display = 'none';
+    wrapper.appendChild(input);
+
+    overlay.addEventListener('click', (e) => {
+      e.stopPropagation(); // prevent slide click (lightbox)
+      input.click();
+    });
+
+    input.addEventListener('change', async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+
+      const marker = img.getAttribute('data-cms-img') || '';
+      const parsed = parseCmsAttr(marker);
+      if (!parsed) return;
+
+      // Optimistic preview
+      const previewUrl = URL.createObjectURL(file);
+      const originalSrc = img.src;
+      img.src = previewUrl;
+
+      overlay.classList.add('uploading');
+      badge.classList.add('cms-img-badge-hidden');
+      setStatus('saving', 'Uploading...');
+
+      try {
+        const compressed = await compressImage(file);
+        const formData = new FormData();
+        formData.append('file', compressed);
+        const headers = await uploadHeaders();
+
+        const uploadRes = await fetch(`${API_BASE}/upload`, {
+          method: 'POST',
+          headers,
+          body: formData,
+        });
+        if (uploadRes.status === 401) {
+          onUnauthorized();
+          return;
+        }
+        if (!uploadRes.ok) throw new Error('Upload failed');
+        const { url } = await uploadRes.json();
+
+        const result = await saveField(parsed.collection, parsed.id, parsed.field, url);
+        if (result.ok) {
+          syncBoundImages(marker, url);
+          showToast('Image updated', 'success');
+        } else {
+          const rollbackSrc =
+            result.reason === 'conflict' && typeof result.latestValue === 'string'
+              ? result.latestValue
+              : originalSrc;
+          syncBoundImages(marker, rollbackSrc);
+          if (result.reason === 'conflict') {
+            showToast('Image changed elsewhere. Loaded latest image.', 'error');
+          } else if (result.reason !== 'unauthorized') {
+            showToast('Failed to save image. Changes reverted.', 'error');
+          }
+        }
+
+        flash(img, result.ok);
+      } catch {
+        img.src = originalSrc;
+        flash(img, false);
+        setStatus('error', 'Upload failed');
+        showToast('Upload failed', 'error');
+      } finally {
+        URL.revokeObjectURL(previewUrl);
+        overlay.classList.remove('uploading');
+        badge.classList.remove('cms-img-badge-hidden');
+      }
+
+      input.value = '';
+    });
+  });
+}

package/static/cms/editor/image-utils.js

@@ -0,0 +1,84 @@
+export async function compressImage(file, maxWidth = 1600, quality = 0.82) {
+  if (file.size < 200000 && file.type === 'image/webp') return file;
+
+  const bitmap = await createImageBitmap(file);
+  let width = bitmap.width;
+  let height = bitmap.height;
+
+  const needsResize = width > maxWidth;
+
+  // PNGs: preserve lossless quality — only process if oversized
+  if (file.type === 'image/png' && !needsResize) {
+    bitmap.close();
+    return file;
+  }
+
+  if (needsResize) {
+    height = Math.round((height * maxWidth) / width);
+    width = maxWidth;
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(bitmap, 0, 0, width, height);
+  bitmap.close();
+
+  // Keep PNG format to preserve lossless quality; convert others to lossy WebP
+  const isPng = file.type === 'image/png';
+  const outType = isPng ? 'image/png' : 'image/webp';
+
+  const blob = await new Promise((resolve) =>
+    canvas.toBlob((b) => resolve(b), outType, isPng ? undefined : quality),
+  );
+
+  if (!blob || blob.size >= file.size) return file;
+
+  const ext = isPng ? '.png' : '.webp';
+  const name = file.name.replace(/\.[^.]+$/, ext);
+  return new File([blob], name, { type: outType });
+}
+
+export function updateEmblaCarousel(img, newUrl) {
+  // Find the closest Embla container
+  const emblaContainer = img.closest('.embla');
+  if (!emblaContainer) return;
+
+  // Find the slide this image belongs to
+  const slide = img.closest('.embla__slide');
+  if (!slide) return;
+
+  const slideIndex = parseInt(slide.dataset.index, 10);
+  if (isNaN(slideIndex)) return;
+
+  // Update the data-full attribute for lightbox
+  slide.dataset.full = newUrl;
+
+  // Update thumbnail if it exists
+  const thumbBtn = document.querySelector(`.thumb-btn[data-index="${slideIndex}"]`);
+  if (thumbBtn) {
+    const thumbImg = thumbBtn.querySelector('img');
+    if (thumbImg) {
+      thumbImg.src = newUrl;
+      // Add a flash effect to show it updated
+      thumbBtn.classList.add('cms-thumb-updated');
+      setTimeout(() => thumbBtn.classList.remove('cms-thumb-updated'), 1000);
+    }
+  }
+
+  // Update lightbox thumbnails if visible
+  const lightboxThumb = document.querySelector(`.lightbox-thumb[data-index="${slideIndex}"]`);
+  if (lightboxThumb) {
+    lightboxThumb.dataset.src = newUrl;
+    const lbImg = lightboxThumb.querySelector('img');
+    if (lbImg) lbImg.src = newUrl;
+  }
+
+  // Dispatch custom event that the product page can listen to
+  emblaContainer.dispatchEvent(
+    new CustomEvent('cms:imageUpdated', {
+      detail: { index: slideIndex, url: newUrl },
+    }),
+  );
+}

package/static/cms/editor/image.css

@@ -0,0 +1,133 @@
+/* ---------------------------------------------------------------------------
+   Image editing overlay
+   --------------------------------------------------------------------------- */
+
+.cms-img-wrapper {
+  position: relative;
+  z-index: 10;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition: outline-color 0.2s;
+}
+
+.cms-img-wrapper:hover {
+  outline-color: var(--cms-blue);
+}
+
+/* Corner edit badge — persistent editability indicator */
+.cms-img-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+  color: white;
+  border-radius: 4px;
+  opacity: 0.6;
+  transition: opacity 0.2s, transform 0.2s;
+  z-index: 12;
+  pointer-events: none;
+}
+
+.cms-img-wrapper:hover .cms-img-badge {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.cms-img-badge-hidden {
+  opacity: 0 !important;
+}
+
+/* Full overlay */
+.cms-img-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+  color: white;
+  font-family: var(--cms-font);
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  border: none;
+  padding: 0;
+  z-index: 11;
+}
+
+.cms-img-wrapper:hover .cms-img-overlay {
+  opacity: 1;
+}
+
+.cms-img-overlay-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.cms-img-overlay-icon {
+  width: 28px;
+  height: 28px;
+  opacity: 0.9;
+}
+
+.cms-img-overlay-text {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+}
+
+/* Upload state — always visible with spinner */
+.cms-img-state-uploading {
+  display: none;
+}
+
+.cms-img-overlay.uploading {
+  opacity: 1;
+  cursor: wait;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.cms-img-overlay.uploading .cms-img-state-idle {
+  display: none;
+}
+
+.cms-img-overlay.uploading .cms-img-state-uploading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.cms-img-spinner {
+  width: 28px;
+  height: 28px;
+  border: 2.5px solid rgba(255, 255, 255, 0.2);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: cms-spin 0.7s linear infinite;
+}
+
+@keyframes cms-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Thumbnail update flash */
+.cms-thumb-updated {
+  animation: cms-thumb-flash 1s ease-out;
+}
+
+@keyframes cms-thumb-flash {
+  0% { outline: 2px solid var(--cms-green); outline-offset: 2px; }
+  100% { outline: 2px solid transparent; outline-offset: 2px; }
+}

package/static/cms/editor/link-ui.css

@@ -0,0 +1,143 @@
+/* ---------------------------------------------------------------------------
+   Link popover — Ctrl+K popup for hyperlinks
+   --------------------------------------------------------------------------- */
+
+.cms-link-popover {
+  position: fixed;
+  z-index: 100001;
+  width: 340px;
+  background: var(--cms-navy-deep);
+  border: 1px solid rgba(212, 175, 55, 0.15);
+  border-radius: 4px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  padding: 12px;
+  font-family: var(--cms-font);
+  animation: cms-popover-in 0.15s ease-out;
+}
+
+@keyframes cms-popover-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.cms-link-popover-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cms-link-popover-icon {
+  color: var(--cms-gold);
+  flex-shrink: 0;
+}
+
+.cms-link-popover-input {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  padding: 7px 10px;
+  font-family: var(--cms-font);
+  font-size: 12px;
+  color: white;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.cms-link-popover-input:focus {
+  border-color: var(--cms-gold);
+}
+
+.cms-link-popover-input::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.cms-link-popover-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+}
+
+.cms-link-popover-hint {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.25);
+  letter-spacing: 0.05em;
+}
+
+.cms-link-popover-btns {
+  display: flex;
+  gap: 6px;
+}
+
+.cms-link-popover-cancel,
+.cms-link-popover-apply {
+  padding: 4px 12px;
+  font-family: var(--cms-font);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+
+.cms-link-popover-cancel {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.4);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.cms-link-popover-cancel:hover {
+  color: rgba(255, 255, 255, 0.7);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.cms-link-popover-apply {
+  background: var(--cms-gold-dim);
+  color: var(--cms-gold);
+  border-color: rgba(212, 175, 55, 0.2);
+}
+
+.cms-link-popover-apply:hover {
+  background: rgba(212, 175, 55, 0.25);
+  border-color: rgba(212, 175, 55, 0.4);
+}
+
+/* ---------------------------------------------------------------------------
+   Link hint badge — shows above focused linkable fields
+   --------------------------------------------------------------------------- */
+
+.cms-link-hint {
+  position: fixed;
+  z-index: 100000;
+  background: var(--cms-navy-deep);
+  color: rgba(255, 255, 255, 0.4);
+  font-family: var(--cms-font);
+  font-size: 9px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  padding: 3px 8px;
+  border-radius: 2px;
+  pointer-events: none;
+  animation: cms-hint-in 0.2s ease-out;
+  white-space: nowrap;
+}
+
+@keyframes cms-hint-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Linkable field visual indicator */
+[data-cms-raw].cms-editable:hover {
+  outline-color: var(--cms-gold-dim);
+}
+
+[data-cms-raw].cms-editable:focus {
+  outline-color: var(--cms-gold);
+  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
+}
+

package/static/cms/editor/linkify.js

@@ -0,0 +1,55 @@
+export function escapeHtml(s) {
+  return s
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+export function clientLinkify(text) {
+  if (!text) return '';
+
+  const MD = /\[([^\]]+)\]\(([^)]+)\)/;
+  const EMAIL = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/;
+  const PHONE = /(?:\+1[-.\s]?)?\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}/;
+  const URL_PAT =
+    /\bhttps?:\/\/[^\s<>"')\]]+|\b[\w.-]+\.(?:com|org|net|io|co|dev|app|store|shop|jewelry|diamonds|gold)(?:\/[^\s<>"')\]]*)?/;
+
+  const combined = new RegExp(
+    `(${MD.source})|(${EMAIL.source})|(${PHONE.source})|(${URL_PAT.source})`,
+    'gi',
+  );
+
+  let result = '';
+  let lastIndex = 0;
+
+  for (const m of text.matchAll(combined)) {
+    const start = m.index;
+    result += escapeHtml(text.slice(lastIndex, start));
+
+    const [full, mdFull, mdText, mdUrl, email, phone] = m;
+
+    if (mdFull) {
+      const href = /^https?:\/\//i.test(mdUrl)
+        ? mdUrl
+        : /^[/]|^mailto:|^tel:/.test(mdUrl)
+          ? mdUrl
+          : 'https://' + mdUrl;
+      const ext = /^https?:\/\//i.test(href);
+      result += `<a href="${escapeHtml(href)}"${ext ? ' target="_blank" rel="noopener noreferrer"' : ''} class="text-secondary hover:underline">${escapeHtml(mdText)}</a>`;
+    } else if (email) {
+      result += `<a href="mailto:${escapeHtml(email)}" class="text-secondary hover:underline">${escapeHtml(email)}</a>`;
+    } else if (phone) {
+      const digits = full.replace(/\D/g, '');
+      result += `<a href="tel:${digits}" class="text-secondary hover:underline">${escapeHtml(full)}</a>`;
+    } else {
+      const href = /^https?:\/\//i.test(full) ? full : 'https://' + full;
+      result += `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer" class="text-secondary hover:underline">${escapeHtml(full)}</a>`;
+    }
+
+    lastIndex = start + full.length;
+  }
+
+  result += escapeHtml(text.slice(lastIndex));
+  return result;
+}