@caretcms/core 0.1.0

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-follow.js

@@ -0,0 +1,144 @@
+/**
+ * Floating "Open page" affordance for editable elements that are or sit inside
+ * an <a> with a real href. The editor's click guard blocks navigation on
+ * those elements (so a click opens the inline editor, not the link); this
+ * module restores a visible way to follow the link without leaving edit mode.
+ */
+
+let activeBtn = null;
+let activeAnchor = null;
+let hideTimer = null;
+
+function isFollowableHref(href) {
+  if (!href) return false;
+  const trimmed = href.trim();
+  if (!trimmed || trimmed === "#") return false;
+  if (trimmed.startsWith("javascript:")) return false;
+  return true;
+}
+
+function isExternal(href) {
+  return /^https?:\/\//i.test(href);
+}
+
+function shortLabel(href) {
+  if (isExternal(href)) {
+    try {
+      return new URL(href).host.replace(/^www\./, "");
+    } catch {
+      return "link";
+    }
+  }
+  return href;
+}
+
+function removeBtn() {
+  if (activeBtn) {
+    activeBtn.remove();
+    activeBtn = null;
+    activeAnchor = null;
+  }
+  if (hideTimer) {
+    clearTimeout(hideTimer);
+    hideTimer = null;
+  }
+}
+
+function position(anchor, btn) {
+  const rect = anchor.getBoundingClientRect();
+  // Place above the anchor, right-aligned to its right edge so it doesn't
+  // overlap the editable text on hover.
+  const top = rect.top + window.scrollY - btn.offsetHeight - 8;
+  const left = rect.right + window.scrollX - btn.offsetWidth;
+  btn.style.top = `${Math.max(8 + window.scrollY, top)}px`;
+  btn.style.left = `${Math.max(8, left)}px`;
+}
+
+function scheduleHide() {
+  if (hideTimer) clearTimeout(hideTimer);
+  hideTimer = window.setTimeout(removeBtn, 180);
+}
+
+function show(anchor) {
+  if (activeAnchor === anchor && activeBtn) {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+    return;
+  }
+  removeBtn();
+
+  const href = anchor.getAttribute("href");
+  if (!isFollowableHref(href)) return;
+
+  const external = isExternal(href);
+  const btn = document.createElement("a");
+  btn.className = "cms-link-follow";
+  btn.href = href;
+  btn.setAttribute("data-cms-skip-guard", "true");
+  if (external) {
+    btn.target = "_blank";
+    btn.rel = "noopener noreferrer";
+  }
+  btn.innerHTML = `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M5 11 L11 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="square"/>
+      <path d="M6 5 L11 5 L11 10" stroke="currentColor" stroke-width="1.4" stroke-linecap="square"/>
+    </svg>
+    <span>Open ${external ? "link" : "page"}</span>
+    <em>${shortLabel(href)}</em>
+  `;
+
+  btn.addEventListener("mouseenter", () => {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+  });
+  btn.addEventListener("mouseleave", scheduleHide);
+
+  document.body.appendChild(btn);
+  activeBtn = btn;
+  activeAnchor = anchor;
+  position(anchor, btn);
+}
+
+export function mountLinkFollowAffordances() {
+  document.addEventListener("mouseover", (e) => {
+    const target = e.target;
+    if (!(target instanceof Element)) return;
+    if (target.closest(".cms-link-follow")) return;
+
+    const editable = target.closest("[data-caret]");
+    if (!editable) return;
+
+    // Image editables have their own overlay treatment — skip.
+    if (editable instanceof HTMLImageElement) return;
+
+    const anchor = editable.matches("a") ? editable : editable.closest("a");
+    if (!anchor) return;
+
+    show(anchor);
+  });
+
+  document.addEventListener("mouseout", (e) => {
+    const target = e.target;
+    if (!(target instanceof Element)) return;
+    if (target.closest(".cms-link-follow")) return;
+
+    const editable = target.closest("[data-caret]");
+    const anchor = editable
+      ? editable.matches("a")
+        ? editable
+        : editable.closest("a")
+      : null;
+    if (anchor === activeAnchor) scheduleHide();
+  });
+
+  const reposition = () => {
+    if (activeAnchor && activeBtn) position(activeAnchor, activeBtn);
+  };
+  window.addEventListener("scroll", reposition, { passive: true });
+  window.addEventListener("resize", reposition);
+}

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

@@ -0,0 +1,199 @@
+/* ---------------------------------------------------------------------------
+   Link popover — Ctrl+K popup for hyperlinks
+   --------------------------------------------------------------------------- */
+
+.cms-link-popover {
+  position: fixed;
+  z-index: 100001;
+  width: 340px;
+  background: var(--cms-surface);
+  border: 1px solid rgba(59, 130, 246, 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-accent);
+  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-accent);
+}
+
+.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-accent-soft);
+  color: var(--cms-accent);
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+.cms-link-popover-apply:hover {
+  background: rgba(59, 130, 246, 0.25);
+  border-color: rgba(59, 130, 246, 0.4);
+}
+
+/* ---------------------------------------------------------------------------
+   Link hint badge — shows above focused linkable fields
+   --------------------------------------------------------------------------- */
+
+.cms-link-hint {
+  position: fixed;
+  z-index: 100000;
+  background: var(--cms-surface);
+  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-caret-raw].cms-editable:hover {
+  outline-color: var(--cms-accent-soft);
+}
+
+[data-caret-raw].cms-editable:focus {
+  outline-color: var(--cms-accent);
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+/* ---------------------------------------------------------------------------
+   Link-follow pill — appears on hover for editable elements that are or sit
+   inside an <a> with a real href, so visitors can open the page instead of
+   editing the text.
+   --------------------------------------------------------------------------- */
+
+.cms-link-follow {
+  position: absolute;
+  z-index: 100000;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px 6px 9px;
+  background: var(--cms-surface);
+  color: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(59, 130, 246, 0.35);
+  border-radius: 3px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+  font-family: var(--cms-font);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  animation: cms-link-follow-in 0.16s ease-out;
+}
+
+.cms-link-follow:hover {
+  background: rgba(59, 130, 246, 0.18);
+  border-color: var(--cms-accent);
+  color: white;
+}
+
+.cms-link-follow svg {
+  width: 13px;
+  height: 13px;
+  color: var(--cms-accent);
+  flex-shrink: 0;
+}
+
+.cms-link-follow em {
+  font-style: normal;
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0;
+  max-width: 22ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@keyframes cms-link-follow-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}

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

package/static/cms/editor/panel.css

@@ -0,0 +1,91 @@
+/* ---------------------------------------------------------------------------
+   Studio Panel — sliding left sidebar with iframe
+   --------------------------------------------------------------------------- */
+
+.cms-studio-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 380px;
+  z-index: 100000;
+  background: #0c0e12;
+  border-right: 1px solid rgba(59, 130, 246, 0.12);
+  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3);
+  transform: translateX(-100%);
+  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.cms-studio-panel.open {
+  transform: translateX(0);
+}
+
+.cms-studio-panel.no-transition {
+  transition: none;
+}
+
+.cms-studio-panel iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+/* Push body content when panel is open */
+body.cms-panel-open {
+  padding-left: 380px;
+  transition: padding-left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+body.cms-panel-open.no-transition {
+  transition: none;
+}
+
+/* Shift fixed header */
+body.cms-panel-open #main-header {
+  left: 380px;
+  transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+body.cms-panel-open.no-transition #main-header {
+  transition: none;
+}
+
+/* Shift fixed toolbar */
+body.cms-panel-open .cms-toolbar {
+  left: 380px;
+  transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+body.cms-panel-open.no-transition .cms-toolbar {
+  transition: none;
+}
+
+/* Studio button active state */
+.cms-studio-btn.active {
+  background: rgba(59, 130, 246, 0.3);
+  border-color: rgba(59, 130, 246, 0.5);
+  color: var(--cms-accent);
+  box-shadow: 0 0 8px rgba(59, 130, 246, 0.15);
+}
+
+
+/* Mobile: full-width overlay, no content push */
+@media (max-width: 768px) {
+  .cms-studio-panel {
+    width: 100%;
+    box-shadow: none;
+  }
+
+  body.cms-panel-open {
+    padding-left: 0;
+  }
+
+  body.cms-panel-open #main-header {
+    left: 0;
+  }
+
+  body.cms-panel-open .cms-toolbar {
+    left: 0;
+  }
+}