@cancia/toolbar 0.4.2 → 0.5.0

package/dist/cancia.js

@@ -28,6 +28,20 @@ function setPending(key, lang, value) {
   const full = pendingKey(key, lang);
   state.pending.set(full, { key, lang, value });
 }
+function parseLinkOverlay(raw) {
+  if (!raw) return { label: "", href: "" };
+  const trimmed = raw.trim();
+  if (trimmed.startsWith("{")) {
+    try {
+      const p = JSON.parse(trimmed);
+      if (p && typeof p === "object") {
+        return { label: String(p.label ?? ""), href: String(p.href ?? "") };
+      }
+    } catch {
+    }
+  }
+  return { label: raw, href: "" };
+}
 function applyOverlay() {
   document.querySelectorAll("[data-cms]").forEach((el) => {
     if (el.dataset.cmsList !== void 0) return;
@@ -39,6 +53,14 @@ function applyOverlay() {
       el.src = savedValue;
       return;
     }
+    if (el.dataset.cmsType === "link" || el.tagName === "A") {
+      const link = parseLinkOverlay(savedValue);
+      if (link.href && el.tagName === "A") el.setAttribute("href", link.href);
+      const labelEl = el.querySelector("[data-cms-label]");
+      if (labelEl) labelEl.textContent = link.label;
+      else if (el.childElementCount === 0) el.textContent = link.label;
+      return;
+    }
     if (el.childElementCount > 0) {
       console.warn(
         `Cancia: skipping overlay for "${key}" \u2014 element has child elements (textContent would destroy them).`
@@ -234,7 +256,10 @@ function accent() {
 }
 function fieldType(el) {
   if (el.dataset.cmsType === "image") return "image";
-  return el.tagName === "IMG" ? "image" : "text";
+  if (el.dataset.cmsType === "link") return "link";
+  if (el.tagName === "IMG") return "image";
+  if (el.tagName === "A") return "link";
+  return "text";
 }
 function elementMode(el) {
   return el.dataset.cmsList ? "list" : "field";
@@ -319,6 +344,10 @@ var IMAGE_ICON = `<svg width="10" height="10" viewBox="0 0 14 14" fill="none" st
   <circle cx="4.5" cy="4.5" r="1.2"/>
   <path d="M1 9.5l3.5-3 2.5 2.5 2-1.5 3 3.5"/>
 </svg>`;
+var LINK_ICON = `<svg width="10" height="10" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M6 8a2.5 2.5 0 003.6.3l2.2-2.2a2.5 2.5 0 00-3.5-3.5L7.2 3.6"/>
+  <path d="M8 6a2.5 2.5 0 00-3.6-.3L2.2 7.9a2.5 2.5 0 003.5 3.5l1.1-1.1"/>
+</svg>`;
 var LIST_ICON = `<svg width="10" height="10" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
   <rect x="1" y="2" width="3" height="3" rx="0.5"/>
   <rect x="1" y="7.5" width="3" height="3" rx="0.5"/>
@@ -348,7 +377,7 @@ function positionOverlay(el, animate = false) {
       tooltipText = `list: ${el.dataset.cmsList}`;
     } else {
       const type = fieldType(el);
-      badgeIcon = type === "image" ? IMAGE_ICON : FIELD_ICON;
+      badgeIcon = type === "image" ? IMAGE_ICON : type === "link" ? LINK_ICON : FIELD_ICON;
       badgeLabel = type;
       tooltipText = el.dataset.cms ?? "";
     }
@@ -434,9 +463,27 @@ function handleClick(e) {
     onSelect?.({ kind: "field", el: target, key, fieldType: fieldType(target) });
   }
 }
+function warnUnhoverableRegions() {
+  const els = document.querySelectorAll(CMS_SELECTOR);
+  els.forEach((el) => {
+    const rect = el.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) return;
+    const cs = getComputedStyle(el);
+    const selfInflicted = cs.display === "contents" || cs.position === "absolute" || cs.clipPath !== "none";
+    if (!selfInflicted) return;
+    const name = el.dataset.cmsList ? `list "${el.dataset.cmsList}"` : `field "${el.dataset.cms}"`;
+    console.warn(
+      `[cancia] ${name} is annotated but has no layout box (${Math.round(rect.width)}\xD7${Math.round(
+        rect.height
+      )}) \u2014 it cannot be hovered or clicked in the editor. Avoid sr-only / display:contents on CMS regions; give the container a real box.`,
+      el
+    );
+  });
+}
 function attachHighlight(selectCallback) {
   injectStyles();
   onSelect = selectCallback;
+  warnUnhoverableRegions();
   document.addEventListener("mouseover", handleMouseOver, true);
   document.addEventListener("mouseout", handleMouseOut, true);
   document.addEventListener("click", handleClick, true);
@@ -659,6 +706,175 @@ function buildTextPopup(key, anchorEl, onClose) {
   wrap.appendChild(footer);
   return wrap;
 }
+function isSafeHrefValue(href) {
+  const trimmed = href.trim();
+  if (trimmed === "") return true;
+  if (/^(https?:|mailto:|tel:)/i.test(trimmed)) return true;
+  const schemeMatch = /^([a-z][a-z0-9+.-]*):/i.exec(trimmed);
+  if (schemeMatch) {
+    const firstSep = trimmed.search(/[/?#]/);
+    if (firstSep === -1 || schemeMatch[1].length < firstSep) return false;
+  }
+  return true;
+}
+function parseLink(raw) {
+  if (!raw) return { label: "", href: "" };
+  const trimmed = raw.trim();
+  if (trimmed.startsWith("{")) {
+    try {
+      const p = JSON.parse(trimmed);
+      if (p && typeof p === "object") {
+        return { label: String(p.label ?? ""), href: String(p.href ?? "") };
+      }
+    } catch {
+    }
+  }
+  return { label: raw, href: "" };
+}
+function buildLinkPopup(key, anchorEl, onClose) {
+  const langs = state.config?.languages ?? ["en"];
+  let activeLang = state.activeLang || langs[0];
+  const wrap = document.createElement("div");
+  wrap.dataset.canciaPopup = "1";
+  applyPopupStyles(wrap);
+  wrap.appendChild(buildHeader(key, onClose));
+  const labelNode = anchorEl.querySelector("[data-cms-label]") ?? anchorEl;
+  const domLabel = labelNode.textContent?.trim() ?? "";
+  const domHref = anchorEl.getAttribute("href") ?? "";
+  const readCurrent = (lang) => {
+    const stored = parseLink(getValue(key, lang));
+    return {
+      label: stored.label || domLabel,
+      // The href is shared across languages (see the note below), so fall back
+      // to the default language's stored value before the DOM.
+      href: stored.href || parseLink(getValue(key, langs[0])).href || domHref
+    };
+  };
+  const inputStyle = `
+    width: 100%; box-sizing: border-box;
+    background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.9);
+    border: 1px solid rgba(255,255,255,0.07); border-radius: 10px;
+    padding: 9px 12px;
+    font-size: 13px; font-family: inherit; outline: none;
+    transition: border-color 0.18s, background 0.18s;
+    caret-color: ${accent2()};
+  `;
+  const makeLabelled = (text, input) => {
+    const field = document.createElement("div");
+    field.style.cssText = `display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px;`;
+    const lab = document.createElement("div");
+    lab.textContent = text;
+    lab.style.cssText = `font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.35);`;
+    input.style.cssText = inputStyle;
+    input.addEventListener("focus", () => {
+      input.style.borderColor = `${accent2()}66`;
+      input.style.background = "rgba(255,255,255,0.05)";
+    });
+    input.addEventListener("blur", () => {
+      input.style.borderColor = "rgba(255,255,255,0.07)";
+      input.style.background = "rgba(255,255,255,0.03)";
+    });
+    field.appendChild(lab);
+    field.appendChild(input);
+    return field;
+  };
+  const labelInput = document.createElement("input");
+  labelInput.type = "text";
+  labelInput.placeholder = "Book a call";
+  const hrefInput = document.createElement("input");
+  hrefInput.type = "text";
+  hrefInput.inputMode = "url";
+  hrefInput.placeholder = "/start or https://\u2026";
+  const current = readCurrent(activeLang);
+  labelInput.value = current.label;
+  hrefInput.value = current.href;
+  if (langs.length > 1) {
+    const tabs = document.createElement("div");
+    tabs.style.cssText = `display: flex; gap: 0; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06);`;
+    const renderTabs2 = () => {
+      tabs.innerHTML = "";
+      langs.forEach((lang) => {
+        const tab = document.createElement("button");
+        tab.textContent = lang.toUpperCase();
+        const isActive = lang === activeLang;
+        tab.style.cssText = `
+          padding: 5px 10px 6px; border: none; border-bottom: 2px solid;
+          margin-bottom: -1px;
+          font-size: 11px; font-weight: 600; cursor: pointer; letter-spacing: 0.06em;
+          background: transparent;
+          border-bottom-color: ${isActive ? accent2() : "transparent"};
+          color: ${isActive ? "#fff" : "rgba(255,255,255,0.3)"};
+          transition: color 0.15s, border-color 0.15s;
+        `;
+        tab.addEventListener("click", () => {
+          stage(activeLang);
+          activeLang = lang;
+          state.activeLang = lang;
+          applyOverlay();
+          labelInput.value = readCurrent(lang).label;
+          renderTabs2();
+        });
+        tabs.appendChild(tab);
+      });
+    };
+    renderTabs2();
+    wrap.appendChild(tabs);
+  }
+  wrap.appendChild(makeLabelled("Label", labelInput));
+  wrap.appendChild(makeLabelled("URL", hrefInput));
+  const hint = document.createElement("div");
+  hint.style.cssText = `font-size:11px;color:rgba(255,255,255,0.28);margin:-4px 0 10px;line-height:1.45;`;
+  hint.textContent = langs.length > 1 ? "Relative (/start), #anchor, mailto: and tel: all work. The URL is shared across languages." : "Relative (/start), #anchor, mailto: and tel: all work.";
+  wrap.appendChild(hint);
+  const warn = document.createElement("div");
+  warn.style.cssText = `font-size:11px;color:#f0a; margin:-4px 0 10px; display:none;`;
+  wrap.appendChild(warn);
+  const paint = () => {
+    labelNode.textContent = labelInput.value;
+    if (isSafeHrefValue(hrefInput.value)) anchorEl.setAttribute("href", hrefInput.value);
+  };
+  const stage = (lang) => {
+    const value = {
+      label: labelInput.value,
+      href: hrefInput.value.trim()
+    };
+    const existing = parseLink(getValue(key, lang));
+    if (existing.label !== value.label || existing.href !== value.href) {
+      setPending(key, lang, JSON.stringify(value));
+    }
+  };
+  const validate = () => {
+    const ok = isSafeHrefValue(hrefInput.value);
+    warn.style.display = ok ? "none" : "block";
+    warn.textContent = ok ? "" : "That URL scheme isn\u2019t allowed and won\u2019t be saved.";
+    return ok;
+  };
+  labelInput.addEventListener("input", () => {
+    paint();
+    onPendingChange();
+  });
+  hrefInput.addEventListener("input", () => {
+    validate();
+    paint();
+    onPendingChange();
+  });
+  setTimeout(() => labelInput.focus(), 80);
+  const footer = document.createElement("div");
+  footer.dataset.canciaFooter = "1";
+  footer.style.cssText = `display: flex; justify-content: flex-end; margin-top: 10px;`;
+  const saveBtn = makePrimaryButton("Save", accent2());
+  saveBtn.dataset.canciaSave = "1";
+  saveBtn.title = "Save (\u2318S)";
+  saveBtn.addEventListener("click", () => {
+    if (!validate()) return;
+    stage(activeLang);
+    onPendingChange();
+    onClose();
+  });
+  footer.appendChild(saveBtn);
+  wrap.appendChild(footer);
+  return wrap;
+}
 function buildImagePopup(key, anchorEl, onClose) {
   const wrap = document.createElement("div");
   wrap.dataset.canciaPopup = "1";
@@ -880,13 +1096,11 @@ function applyPopupStyles(el) {
 }
 function openPopup(key, fieldType2, anchorEl, onClose) {
   closePopup();
-  const popup = fieldType2 === "image" ? buildImagePopup(key, anchorEl, () => {
-    onClose();
-    closePopup();
-  }) : buildTextPopup(key, anchorEl, () => {
+  const done = () => {
     onClose();
     closePopup();
-  });
+  };
+  const popup = fieldType2 === "image" ? buildImagePopup(key, anchorEl, done) : fieldType2 === "link" ? buildLinkPopup(key, anchorEl, done) : buildTextPopup(key, anchorEl, done);
   document.body.appendChild(popup);
   popupEl = popup;
   const { top, left, origin } = getPopupPosition(anchorEl);