@cancia/toolbar 0.12.1 → 0.14.0

package/dist/cancia.js

@@ -171,6 +171,10 @@ function getValue(key, lang) {
   if (state.cmsData[full] !== void 0) return state.cmsData[full];
   return "";
 }
+function hasValue(key, lang) {
+  const full = `${key}.${lang}`;
+  return state.pending.has(full) || state.cmsData[full] !== void 0;
+}
 function setPending(key, lang, value) {
   const full = pendingKey(key, lang);
   state.pending.set(full, { key, lang, value });
@@ -210,7 +214,12 @@ function applyOverlay() {
 }
 function revertPending() {
   for (const [fullKey, { key }] of state.pending) {
-    const savedValue = state.cmsData[fullKey] ?? "";
+    if (state.cmsData[fullKey] === void 0) {
+      state.pending.clear();
+      location.reload();
+      return;
+    }
+    const savedValue = state.cmsData[fullKey];
     document.querySelectorAll(`[data-cms="${key}"]`).forEach((el) => {
       if (el.tagName === "IMG") {
         el.src = savedValue;
@@ -258,6 +267,22 @@ async function saveEntry(key, lang, value) {
   });
   if (!res.ok) throw new Error(`Cancia: failed to save (${res.status})`);
 }
+async function deleteContent(key, lang) {
+  const { apiUrl, site } = state.config;
+  const res = await fetch(`${apiUrl}/api/cancia/content`, {
+    method: "DELETE",
+    headers: headers(),
+    body: JSON.stringify({ site, key, lang, route: currentRoute() })
+  });
+  if (!res.ok) throw await toApiError(res, "Could not reset this text. Check your connection and try again.");
+}
+async function toApiError(res, fallback) {
+  const body = await res.json().catch(() => ({}));
+  const err = new Error(body.error ?? fallback);
+  if (body.code) err.code = body.code;
+  if (body.issues?.length) err.issues = body.issues;
+  return err;
+}
 function isAuthError(err) {
   return err instanceof Error && err.message.includes("(401)");
 }
@@ -334,8 +359,7 @@ async function createListEntry(listName, data, locale, id) {
     { method: "POST", headers: headers(), body: JSON.stringify({ data, id }) }
   );
   if (!res.ok) {
-    const err = await res.json().catch(() => ({}));
-    throw new Error(err.error ?? `Cancia: failed to create entry (${res.status})`);
+    throw await toApiError(res, "Could not create the entry. Check your connection and try again.");
   }
   const body = await res.json();
   return body.entry;
@@ -347,9 +371,7 @@ async function updateListEntry(listName, id, data, rev, locale) {
     { method: "PATCH", headers: headers(), body: JSON.stringify({ data, _rev: rev }) }
   );
   if (!res.ok) {
-    const err = await res.json().catch(() => ({}));
-    const message = err.error ?? `Cancia: failed to update entry (${res.status})`;
-    throw Object.assign(new Error(message), { code: err.code });
+    throw await toApiError(res, "Could not save your changes. Check your connection and try again.");
   }
   const body = await res.json();
   return body.entry;
@@ -366,9 +388,9 @@ async function reorderList(listName, ids) {
   const { apiUrl, site } = state.config;
   const res = await fetch(
     `${apiUrl}/api/cancia/lists/${encodeURIComponent(listName)}/reorder?site=${encodeURIComponent(site)}${routeParam()}`,
-    { method: "POST", headers: headers(), body: JSON.stringify({ ids }) }
+    { method: "POST", headers: headers(), body: JSON.stringify({ ids, knownCount: ids.length }) }
   );
-  if (!res.ok) throw new Error(`Cancia: failed to reorder list (${res.status})`);
+  if (!res.ok) throw await toApiError(res, "Could not save the new order. Check your connection and try again.");
 }
 async function flushEdits(edits, save) {
   const results = await Promise.allSettled(edits.map((edit) => save(edit)));
@@ -1165,6 +1187,20 @@ function buildHeader(key, onClose) {
   header.appendChild(makeCloseButton(onClose));
   return header;
 }
+function seedValue(key, lang, anchorEl) {
+  if (hasValue(key, lang)) return getValue(key, lang);
+  return anchorEl.textContent?.trim() ?? "";
+}
+function activeImageLang() {
+  return state.activeLang || state.config?.languages?.[0] || "en";
+}
+async function resetToAuthored(key, lang) {
+  await deleteContent(key, lang);
+  delete state.cmsData[`${key}.${lang}`];
+  state.pending.delete(`${key}.${lang}`);
+  onPendingChange();
+  location.reload();
+}
 function buildTextPopup(key, anchorEl, onClose) {
   const langs = state.config?.languages ?? ["en"];
   let activeLang = state.activeLang || langs[0];
@@ -1199,9 +1235,7 @@ function buildTextPopup(key, anchorEl, onClose) {
         tab.addEventListener("click", () => {
           const current = wrap.querySelector("textarea");
           if (current) {
-            const existing = getValue(key, activeLang);
-            const fallback = anchorEl.textContent?.trim() || "";
-            if (current.value !== (existing || fallback)) {
+            if (current.value !== seedValue(key, activeLang, anchorEl)) {
               setPending(key, activeLang, current.value);
             }
           }
@@ -1231,7 +1265,7 @@ function buildTextPopup(key, anchorEl, onClose) {
   };
   const renderTextarea = (isInit = false) => {
     if (!isInit && textarea) {
-      textarea.value = getValue(key, activeLang) || anchorEl.textContent?.trim() || "";
+      textarea.value = seedValue(key, activeLang, anchorEl);
       textarea.style.borderColor = v("accent-ring");
       textarea.style.background = v("surface-hover");
       attachInputHandler();
@@ -1239,7 +1273,7 @@ function buildTextPopup(key, anchorEl, onClose) {
     }
     const footerEl = wrap.querySelector("[data-cancia-footer]");
     textarea = document.createElement("textarea");
-    textarea.value = getValue(key, activeLang) || anchorEl.textContent?.trim() || "";
+    textarea.value = seedValue(key, activeLang, anchorEl);
     textarea.rows = 4;
     textarea.placeholder = "Enter text\u2026";
     textarea.style.cssText = `
@@ -1262,18 +1296,37 @@ function buildTextPopup(key, anchorEl, onClose) {
   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());
+  const saveBtn = makePrimaryButton("Done", accent2());
   saveBtn.dataset.canciaSave = "1";
-  saveBtn.title = "Save (\u2318S)";
+  saveBtn.title = "Apply to the page (\u2318S) \u2014 then Save in the toolbar to publish";
   saveBtn.addEventListener("click", () => {
-    const existing = getValue(key, activeLang);
-    const fallback = anchorEl.textContent?.trim() || "";
-    if (textarea.value !== (existing || fallback)) {
+    if (textarea.value !== seedValue(key, activeLang, anchorEl)) {
       setPending(key, activeLang, textarea.value);
     }
     onPendingChange();
     onClose();
   });
+  if (hasValue(key, activeLang)) {
+    const resetBtn = document.createElement("button");
+    resetBtn.type = "button";
+    resetBtn.textContent = "Reset";
+    resetBtn.title = "Restore the text this page was built with";
+    resetBtn.style.cssText = `${button("ghost")} font-size: ${v("text-xs")}; margin-right: auto;`;
+    attachHover(resetBtn, { bg: v("surface-active") });
+    attachPress(resetBtn);
+    resetBtn.addEventListener("click", async () => {
+      resetBtn.disabled = true;
+      resetBtn.textContent = "Resetting\u2026";
+      try {
+        await resetToAuthored(key, activeLang);
+      } catch (err) {
+        resetBtn.disabled = false;
+        resetBtn.textContent = "Reset";
+        textarea.placeholder = err instanceof Error ? err.message : "Could not reset.";
+      }
+    });
+    footer.appendChild(resetBtn);
+  }
   footer.appendChild(saveBtn);
   wrap.appendChild(footer);
   return wrap;
@@ -1408,9 +1461,9 @@ function buildLinkPopup(key, anchorEl, onClose) {
   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());
+  const saveBtn = makePrimaryButton("Done", accent2());
   saveBtn.dataset.canciaSave = "1";
-  saveBtn.title = "Save (\u2318S)";
+  saveBtn.title = "Apply to the page (\u2318S) \u2014 then Save in the toolbar to publish";
   saveBtn.addEventListener("click", () => {
     if (!validate()) return;
     stage(activeLang);
@@ -1448,6 +1501,33 @@ function buildImagePopup(key, anchorEl, onClose) {
     previewWrap.appendChild(previewImg);
     previewWrap.appendChild(previewLabel);
     wrap.appendChild(previewWrap);
+    if (hasValue(key, activeImageLang())) {
+      const resetRow = document.createElement("div");
+      resetRow.style.cssText = `display:flex; justify-content:flex-end; margin: -4px 0 10px;`;
+      const resetBtn = document.createElement("button");
+      resetBtn.type = "button";
+      resetBtn.textContent = "Reset to original";
+      resetBtn.style.cssText = `
+        ${button("ghost")}
+        font-size: ${v("text-xs")};
+      `;
+      attachHover(resetBtn, { bg: v("surface-active") });
+      attachPress(resetBtn);
+      resetBtn.addEventListener("click", async () => {
+        resetBtn.disabled = true;
+        resetBtn.textContent = "Resetting\u2026";
+        try {
+          await resetToAuthored(key, activeImageLang());
+          onClose();
+        } catch (err) {
+          resetBtn.disabled = false;
+          resetBtn.textContent = "Reset to original";
+          previewLabel.textContent = err instanceof Error ? err.message : "Could not reset. Try again.";
+        }
+      });
+      resetRow.appendChild(resetBtn);
+      wrap.appendChild(resetRow);
+    }
   }
   const dropZone = document.createElement("label");
   dropZone.style.cssText = `
@@ -1803,9 +1883,9 @@ function buildRichPopup(key, anchorEl, onClose) {
     rowsWrap.appendChild(r.el);
     r.el.querySelector("textarea")?.focus();
   });
-  const saveBtn = makePrimaryButton("Save", accent2());
+  const saveBtn = makePrimaryButton("Done", accent2());
   saveBtn.dataset.canciaSave = "1";
-  saveBtn.title = "Save (\u2318S)";
+  saveBtn.title = "Apply to the page (\u2318S) \u2014 then Save in the toolbar to publish";
   saveBtn.addEventListener("click", () => {
     commit();
     onClose();
@@ -2430,7 +2510,7 @@ import {
   portableTextSubsetSchema as portableTextSubsetSchema2,
   PT_STYLES as PT_STYLES2
 } from "@cancia/astro/richtext";
-import { slugify } from "@cancia/astro/schema";
+import { slugify, parseLinkValue as parseLinkValue3, isSafeHref as isSafeHref2 } from "@cancia/astro/schema";
 var MODAL_Z = v("z-bar");
 var BACKDROP_Z2 = v("z-panel");
 var modalEl = null;
@@ -2660,6 +2740,99 @@ function renderField(field, initial, depth = 0) {
       getValue2 = () => sel.value === "" ? void 0 : sel.value;
       break;
     }
+    case "file": {
+      let currentUrl = typeof initial === "string" ? initial : "";
+      const box = document.createElement("div");
+      box.style.cssText = `
+        display: flex; flex-direction: column; gap: 8px;
+        background: ${v("surface-raised")};
+        border: 1px dashed ${v("border-strong")};
+        border-radius: ${v("radius")};
+        padding: 10px;
+      `;
+      const nameRow = document.createElement("div");
+      nameRow.style.cssText = `display:flex; align-items:center; gap:8px; min-width:0;`;
+      const nameLink = document.createElement("a");
+      nameLink.target = "_blank";
+      nameLink.rel = "noopener";
+      nameLink.style.cssText = `
+        font-size: ${v("text-sm")}; color: ${v("fg")}; text-decoration: underline;
+        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
+      `;
+      const renderName = (url) => {
+        if (!url) {
+          nameLink.removeAttribute("href");
+          nameLink.textContent = "No file attached";
+          nameLink.style.color = v("fg-faint");
+          nameLink.style.textDecoration = "none";
+          return;
+        }
+        let label2 = url;
+        try {
+          label2 = decodeURIComponent(new URL(url, location.href).pathname.split("/").pop() || url);
+        } catch {
+        }
+        nameLink.href = url;
+        nameLink.textContent = label2;
+        nameLink.style.color = v("fg");
+        nameLink.style.textDecoration = "underline";
+      };
+      renderName(currentUrl);
+      nameRow.appendChild(nameLink);
+      box.appendChild(nameRow);
+      const btnRow = document.createElement("div");
+      btnRow.style.cssText = `display:flex; gap:8px; align-items:center;`;
+      const fileInput = document.createElement("input");
+      fileInput.type = "file";
+      fileInput.accept = "application/pdf";
+      fileInput.style.display = "none";
+      const uploadBtn = document.createElement("button");
+      uploadBtn.type = "button";
+      uploadBtn.textContent = "Upload\u2026";
+      uploadBtn.style.cssText = `${button("ghost")} font-size: ${v("text-xs")};`;
+      attachHover(uploadBtn, { bg: v("surface-active") });
+      uploadBtn.addEventListener("click", () => fileInput.click());
+      const clearBtn = document.createElement("button");
+      clearBtn.type = "button";
+      clearBtn.textContent = "Clear";
+      clearBtn.style.cssText = `${button("ghost")} font-size: ${v("text-xs")};`;
+      attachHover(clearBtn, { bg: v("surface-active") });
+      clearBtn.addEventListener("click", () => {
+        currentUrl = "";
+        renderName("");
+        progressEl.textContent = "";
+      });
+      const progressEl = document.createElement("span");
+      progressEl.style.cssText = `font-size: ${v("text-xs")}; color: ${v("fg-muted")};`;
+      fileInput.addEventListener("change", async () => {
+        const f = fileInput.files?.[0];
+        if (!f) return;
+        uploadBtn.disabled = true;
+        try {
+          const url = await uploadImage(f, (pct) => {
+            progressEl.textContent = `Uploading\u2026 ${pct}%`;
+          });
+          currentUrl = url;
+          renderName(url);
+          progressEl.textContent = "Uploaded";
+        } catch (err) {
+          const msg = err instanceof Error && err.message.includes("(413)") ? "That file is too large." : "Upload failed \u2014 try again.";
+          progressEl.textContent = msg;
+          progressEl.style.color = v("danger");
+        } finally {
+          uploadBtn.disabled = false;
+          fileInput.value = "";
+        }
+      });
+      btnRow.appendChild(uploadBtn);
+      btnRow.appendChild(clearBtn);
+      btnRow.appendChild(progressEl);
+      box.appendChild(btnRow);
+      box.appendChild(fileInput);
+      wrapper.appendChild(box);
+      getValue2 = () => currentUrl === "" ? void 0 : currentUrl;
+      break;
+    }
     case "image": {
       const initialUrl = typeof initial === "string" ? initial : "";
       let currentUrl = initialUrl;
@@ -2810,6 +2983,57 @@ function renderField(field, initial, depth = 0) {
       };
       break;
     }
+    case "link": {
+      const parsed = parseLinkValue3(initial);
+      const box = document.createElement("div");
+      box.style.cssText = `
+        display: flex; flex-direction: column; gap: 8px;
+        background: ${v("surface-raised")};
+        border: 1px solid ${v("border")};
+        border-radius: ${v("radius")};
+        padding: 10px;
+      `;
+      const mkRow = (labelText2, value, placeholder) => {
+        const row = document.createElement("label");
+        row.style.cssText = `display: flex; flex-direction: column; gap: 4px;`;
+        const cap = document.createElement("span");
+        cap.textContent = labelText2;
+        cap.style.cssText = `font-size: 11px; font-weight: 600; color: ${v("fg-muted")}; letter-spacing: 0.02em;`;
+        const inp = document.createElement("input");
+        inp.type = "text";
+        inp.className = "cancia-form-input";
+        inp.style.cssText = `${INPUT_BASE} caret-color: ${v("accent")};`;
+        inp.value = value;
+        inp.placeholder = placeholder;
+        row.appendChild(cap);
+        row.appendChild(inp);
+        box.appendChild(row);
+        return inp;
+      };
+      const labelInput = mkRow("Label", parsed.label, "Book a call");
+      const hrefInput = mkRow("URL", parsed.href, "/start or https://\u2026");
+      wrapper.appendChild(box);
+      getValue2 = () => {
+        const label2 = labelInput.value.trim();
+        const href = hrefInput.value.trim();
+        if (!label2 && !href) return void 0;
+        return { label: label2, href };
+      };
+      validate = () => {
+        const value = getValue2();
+        setError(null);
+        if (field.required && !value) {
+          setError(`${field.label || "This field"} is required`);
+          return { value, ok: false };
+        }
+        if (value && value.href && !isSafeHref2(value.href)) {
+          setError("That link type isn't allowed. Use https://, /a-path, #anchor, mailto: or tel:");
+          return { value, ok: false };
+        }
+        return { value, ok: true };
+      };
+      break;
+    }
     default: {
       const input2 = document.createElement("input");
       input2.type = field.widget === "url" ? "url" : field.widget === "email" ? "email" : "text";
@@ -3319,6 +3543,19 @@ function preValidate(fieldStates) {
   }
   return { data, ok };
 }
+function paintServerIssues(fieldStates, issues) {
+  if (!issues?.length) return 0;
+  let painted = 0;
+  for (const issue of issues) {
+    const head = issue.path?.[0];
+    if (head === void 0) continue;
+    const target = fieldStates.find((fs) => fs.field.name === String(head));
+    if (!target) continue;
+    target.setError(issue.message);
+    painted++;
+  }
+  return painted;
+}
 function validateValue(field, value) {
   if (value === void 0 || value === null || value === "") return null;
   if (typeof value === "string") {
@@ -3624,10 +3861,15 @@ function openEntryModal(opts) {
       closeEntryModal();
     } catch (err) {
       const error = err;
-      if (error.message.includes("Validation failed")) {
-        showFormError("Server-side validation failed. Check the fields above.");
+      const painted = paintServerIssues(fieldStates, error.issues);
+      if (painted > 0) {
+        showFormError(
+          painted === 1 ? "One field needs fixing \u2014 see the message below it." : `${painted} fields need fixing \u2014 see the messages below them.`
+        );
       } else if (error.code === "REV_CONFLICT") {
         showFormError("This entry was changed by someone else. Close and reopen to see the latest version.");
+      } else if (error.issues?.length) {
+        showFormError(error.issues.map((i) => `${i.path.join(".") || "Entry"}: ${i.message}`).join(" \xB7 "));
       } else {
         showFormError(error.message);
       }