@cancia/toolbar 0.12.0 → 0.13.0

package/dist/cancia.js

@@ -145,6 +145,7 @@ function inlineToShorthand(el) {
 }
 
 // src/state.ts
+import { parseLinkValue } from "@cancia/astro/schema";
 var state = {
   config: null,
   cmsData: {},
@@ -170,24 +171,14 @@ 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 });
 }
-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;
@@ -205,7 +196,7 @@ function applyOverlay() {
       return;
     }
     if (el.dataset.cmsType === "link") {
-      const link = parseLinkOverlay(savedValue);
+      const link = parseLinkValue(savedValue);
       if (link.href && el.tagName === "A") el.setAttribute("href", link.href);
       const labelEls = el.querySelectorAll("[data-cms-label]");
       if (labelEls.length > 0) labelEls.forEach((n) => n.textContent = link.label);
@@ -223,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;
@@ -271,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)");
 }
@@ -347,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;
@@ -360,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;
@@ -383,19 +392,23 @@ async function reorderList(listName, ids) {
   );
   if (!res.ok) throw new Error(`Cancia: failed to reorder list (${res.status})`);
 }
+async function flushEdits(edits, save) {
+  const results = await Promise.allSettled(edits.map((edit) => save(edit)));
+  const saved = [];
+  const failed = [];
+  results.forEach((result, i) => {
+    (result.status === "fulfilled" ? saved : failed).push(edits[i]);
+  });
+  return { saved, failed };
+}
 async function flushPending() {
   const entries = Array.from(state.pending.values());
-  const results = await Promise.allSettled(
-    entries.map(({ key, lang, value }) => saveEntry(key, lang, value))
+  const { saved, failed } = await flushEdits(
+    entries,
+    ({ key, lang, value }) => saveEntry(key, lang, value)
   );
-  results.forEach((result, i) => {
-    if (result.status === "fulfilled") {
-      const { key, lang } = entries[i];
-      state.pending.delete(`${key}.${lang}`);
-    }
-  });
-  const failed = results.filter((r) => r.status === "rejected").length;
-  if (failed > 0) throw new Error(`Cancia: ${failed} save(s) failed`);
+  for (const { key, lang } of saved) state.pending.delete(`${key}.${lang}`);
+  if (failed.length > 0) throw new Error(`Cancia: ${failed.length} save(s) failed`);
 }
 
 // src/tokens.ts
@@ -1110,9 +1123,11 @@ function onPendingChange(cb) {
 
 // src/popup.ts
 import {
+  isSafeHref,
   portableTextToRows,
   rowsToPortableText
 } from "@cancia/astro/richtext";
+import { parseLinkValue as parseLinkValue2 } from "@cancia/astro/schema";
 var popupEl = null;
 var outsideListener = null;
 var keyListener = null;
@@ -1172,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];
@@ -1206,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);
             }
           }
@@ -1238,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();
@@ -1246,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 = `
@@ -1269,46 +1296,47 @@ 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;
 }
 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;
+  if (href.trim() === "") return true;
+  return isSafeHref(href);
 }
 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: "" };
+  return parseLinkValue2(raw);
 }
 function buildLinkPopup(key, anchorEl, onClose) {
   const langs = state.config?.languages ?? ["en"];
@@ -1433,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);
@@ -1473,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 = `
@@ -1828,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();
@@ -1899,6 +1954,7 @@ function closePopup() {
 }
 
 // src/list-panel.ts
+import { isDraft } from "@cancia/astro/schema";
 var PANEL_Z = v("z-panel");
 var TOOLBAR_RESERVE = "100px";
 var BACKDROP_Z = v("z-overlay");
@@ -2239,7 +2295,7 @@ function renderEntries(body, schema, activeLocale, entriesInLocale, translations
       const titleValue = row.entry.data[schema.titleField];
       const title = typeof titleValue === "string" && titleValue.trim().length > 0 ? titleValue : `(untitled ${schema.labelSingular.toLowerCase()})`;
       const { subtitle, thumbnail } = derivePreview(schema, row.entry.data);
-      const isDraftRow = !!schema.draftField && row.entry.data[schema.draftField] === true;
+      const isDraftRow = isDraft(schema, row.entry.data);
       const draftBadge = isDraftRow ? `<span style="
             flex-shrink: 0; margin-left: ${v("space-2")}; padding: 1px 6px;
             font-size: 11px; font-weight: 600; line-height: 1.5;
@@ -2454,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;
@@ -2834,6 +2890,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";
@@ -3343,6 +3450,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") {
@@ -3648,10 +3768,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);
       }