@cancia/toolbar 0.13.0 → 0.15.0

package/dist/cancia.js

@@ -50,9 +50,9 @@ function renderRichToDom(target, blocks) {
     }
     listWrap = null;
     listKind = null;
-    const el = document.createElement(STYLE_TAG[block.style] ?? "p");
-    appendSpans(el, block);
-    target.appendChild(el);
+    const el2 = document.createElement(STYLE_TAG[block.style] ?? "p");
+    appendSpans(el2, block);
+    target.appendChild(el2);
   }
 }
 function appendSpans(parent, block) {
@@ -87,8 +87,8 @@ var STYLE_OF_TAG = {
 };
 function domToRows(region) {
   const rows = [];
-  const pushBlock = (el, style, listItem) => {
-    const text = inlineToShorthand(el);
+  const pushBlock = (el2, style, listItem) => {
+    const text = inlineToShorthand(el2);
     if (text.trim() === "") return;
     rows.push(listItem ? { text, style, listItem } : { text, style });
   };
@@ -113,9 +113,9 @@ function domToRows(region) {
   }
   return rows;
 }
-function inlineToShorthand(el) {
+function inlineToShorthand(el2) {
   let out = "";
-  for (const node of el.childNodes) {
+  for (const node of el2.childNodes) {
     if (node.nodeType === Node.TEXT_NODE) {
       out += (node.textContent ?? "").replace(/\s+/g, " ");
       continue;
@@ -180,36 +180,36 @@ function setPending(key, lang, value) {
   state.pending.set(full, { key, lang, value });
 }
 function applyOverlay() {
-  document.querySelectorAll("[data-cms]").forEach((el) => {
-    if (el.dataset.cmsList !== void 0) return;
-    const key = el.dataset.cms;
+  document.querySelectorAll("[data-cms]").forEach((el2) => {
+    if (el2.dataset.cmsList !== void 0) return;
+    const key = el2.dataset.cms;
     if (!key) return;
     const savedValue = state.cmsData[`${key}.${state.activeLang}`];
     if (savedValue === void 0) return;
-    if (el.tagName === "IMG") {
-      el.src = savedValue;
+    if (el2.tagName === "IMG") {
+      el2.src = savedValue;
       return;
     }
-    if (el.dataset.cmsType === "richtext") {
+    if (el2.dataset.cmsType === "richtext") {
       const blocks = parseRichValue(savedValue);
-      if (blocks) renderRichToDom(el, blocks);
+      if (blocks) renderRichToDom(el2, blocks);
       return;
     }
-    if (el.dataset.cmsType === "link") {
+    if (el2.dataset.cmsType === "link") {
       const link = parseLinkValue(savedValue);
-      if (link.href && el.tagName === "A") el.setAttribute("href", link.href);
-      const labelEls = el.querySelectorAll("[data-cms-label]");
+      if (link.href && el2.tagName === "A") el2.setAttribute("href", link.href);
+      const labelEls = el2.querySelectorAll("[data-cms-label]");
       if (labelEls.length > 0) labelEls.forEach((n) => n.textContent = link.label);
-      else if (el.childElementCount === 0) el.textContent = link.label;
+      else if (el2.childElementCount === 0) el2.textContent = link.label;
       return;
     }
-    if (el.childElementCount > 0) {
+    if (el2.childElementCount > 0) {
       console.warn(
         `Cancia: skipping overlay for "${key}" \u2014 element has child elements (textContent would destroy them).`
       );
       return;
     }
-    el.textContent = savedValue;
+    el2.textContent = savedValue;
   });
 }
 function revertPending() {
@@ -220,17 +220,17 @@ function revertPending() {
       return;
     }
     const savedValue = state.cmsData[fullKey];
-    document.querySelectorAll(`[data-cms="${key}"]`).forEach((el) => {
-      if (el.tagName === "IMG") {
-        el.src = savedValue;
+    document.querySelectorAll(`[data-cms="${key}"]`).forEach((el2) => {
+      if (el2.tagName === "IMG") {
+        el2.src = savedValue;
         return;
       }
-      if (el.dataset.cmsType === "richtext") {
+      if (el2.dataset.cmsType === "richtext") {
         const blocks = parseRichValue(savedValue);
-        if (blocks) renderRichToDom(el, blocks);
+        if (blocks) renderRichToDom(el2, blocks);
         return;
       }
-      el.textContent = savedValue;
+      el2.textContent = savedValue;
     });
   }
   state.pending.clear();
@@ -242,6 +242,7 @@ function headers() {
   if (state.sessionToken) h["Authorization"] = `Bearer ${state.sessionToken}`;
   return h;
 }
+var CREDS = "include";
 function currentRoute() {
   return typeof location !== "undefined" ? location.pathname : "";
 }
@@ -252,6 +253,7 @@ function routeParam() {
 async function fetchContent() {
   const { apiUrl, site } = state.config;
   const res = await fetch(`${apiUrl}/api/cancia/content?site=${encodeURIComponent(site)}`, {
+    credentials: CREDS,
     headers: headers()
   });
   if (!res.ok) throw new Error(`Cancia: failed to fetch content (${res.status})`);
@@ -260,6 +262,7 @@ async function fetchContent() {
 async function saveEntry(key, lang, value) {
   const { apiUrl, site } = state.config;
   const res = await fetch(`${apiUrl}/api/cancia/save`, {
+    credentials: CREDS,
     method: "POST",
     headers: headers(),
     // `route` lets the server invalidate this page's cache tag (034, invalidate mode).
@@ -270,6 +273,7 @@ async function saveEntry(key, lang, value) {
 async function deleteContent(key, lang) {
   const { apiUrl, site } = state.config;
   const res = await fetch(`${apiUrl}/api/cancia/content`, {
+    credentials: CREDS,
     method: "DELETE",
     headers: headers(),
     body: JSON.stringify({ site, key, lang, route: currentRoute() })
@@ -294,6 +298,7 @@ function uploadImage(file, onProgress) {
     form.append("site", site);
     const xhr = new XMLHttpRequest();
     xhr.open("POST", `${apiUrl}/api/cancia/upload`);
+    xhr.withCredentials = true;
     if (state.sessionToken) xhr.setRequestHeader("Authorization", `Bearer ${state.sessionToken}`);
     xhr.upload.addEventListener("progress", (e) => {
       if (e.lengthComputable) onProgress?.(Math.round(e.loaded / e.total * 100));
@@ -316,6 +321,7 @@ function uploadImage(file, onProgress) {
 async function triggerPublish() {
   const { apiUrl, site } = state.config;
   const res = await fetch(`${apiUrl}/api/cancia/publish`, {
+    credentials: CREDS,
     method: "POST",
     headers: headers(),
     body: JSON.stringify({ site })
@@ -324,7 +330,7 @@ async function triggerPublish() {
 }
 async function fetchSchemas() {
   const { apiUrl } = state.config;
-  const res = await fetch(`${apiUrl}/api/cancia/schemas`, { headers: headers() });
+  const res = await fetch(`${apiUrl}/api/cancia/schemas`, { headers: headers(), credentials: CREDS });
   if (!res.ok) throw new Error(`Cancia: failed to fetch schemas (${res.status})`);
   const body = await res.json();
   return body.schemas;
@@ -336,7 +342,7 @@ async function fetchList(listName, locale) {
   const { apiUrl, site } = state.config;
   const res = await fetch(
     `${apiUrl}/api/cancia/lists/${encodeURIComponent(listName)}?site=${encodeURIComponent(site)}${localeParam(locale)}`,
-    { headers: headers() }
+    { headers: headers(), credentials: CREDS }
   );
   if (!res.ok) throw new Error(`Cancia: failed to fetch list "${listName}" (${res.status})`);
   const body = await res.json();
@@ -346,7 +352,7 @@ async function fetchTranslations(listName) {
   const { apiUrl, site } = state.config;
   const res = await fetch(
     `${apiUrl}/api/cancia/lists/${encodeURIComponent(listName)}/_translations?site=${encodeURIComponent(site)}`,
-    { headers: headers() }
+    { headers: headers(), credentials: CREDS }
   );
   if (!res.ok) throw new Error(`Cancia: failed to fetch translations (${res.status})`);
   const body = await res.json();
@@ -356,7 +362,7 @@ async function createListEntry(listName, data, locale, id) {
   const { apiUrl, site } = state.config;
   const res = await fetch(
     `${apiUrl}/api/cancia/lists/${encodeURIComponent(listName)}?site=${encodeURIComponent(site)}${localeParam(locale)}${routeParam()}`,
-    { method: "POST", headers: headers(), body: JSON.stringify({ data, id }) }
+    { method: "POST", headers: headers(), credentials: CREDS, body: JSON.stringify({ data, id }) }
   );
   if (!res.ok) {
     throw await toApiError(res, "Could not create the entry. Check your connection and try again.");
@@ -368,7 +374,7 @@ async function updateListEntry(listName, id, data, rev, locale) {
   const { apiUrl, site } = state.config;
   const res = await fetch(
     `${apiUrl}/api/cancia/lists/${encodeURIComponent(listName)}/${encodeURIComponent(id)}?site=${encodeURIComponent(site)}${localeParam(locale)}${routeParam()}`,
-    { method: "PATCH", headers: headers(), body: JSON.stringify({ data, _rev: rev }) }
+    { method: "PATCH", headers: headers(), credentials: CREDS, body: JSON.stringify({ data, _rev: rev }) }
   );
   if (!res.ok) {
     throw await toApiError(res, "Could not save your changes. Check your connection and try again.");
@@ -380,7 +386,7 @@ async function deleteListEntry(listName, id, locale) {
   const { apiUrl, site } = state.config;
   const res = await fetch(
     `${apiUrl}/api/cancia/lists/${encodeURIComponent(listName)}/${encodeURIComponent(id)}?site=${encodeURIComponent(site)}${localeParam(locale)}${routeParam()}`,
-    { method: "DELETE", headers: headers() }
+    { method: "DELETE", headers: headers(), credentials: CREDS }
   );
   if (!res.ok) throw new Error(`Cancia: failed to delete entry (${res.status})`);
 }
@@ -388,9 +394,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(), credentials: CREDS, 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)));
@@ -659,9 +665,9 @@ ${tokenCss(accent4, useAccent)}
 `;
   document.head.appendChild(style);
 }
-function markUi(el) {
-  el.dataset.canciaUi = "";
-  return el;
+function markUi(el2) {
+  el2.dataset.canciaUi = "";
+  return el2;
 }
 var surface = (level = 2) => `
   background: ${v(`surface-${level}`)};
@@ -768,41 +774,41 @@ var groupRow = () => `
   align-items: flex-start;
   gap: ${v("space-2")};
 `;
-function attachHover(el, opts = {}) {
+function attachHover(el2, opts = {}) {
   const bg = opts.bg ?? v("surface-hover");
   const color = opts.color;
-  const priorBg = el.style.background;
-  const priorColor = el.style.color;
-  el.addEventListener("mouseenter", () => {
-    el.style.background = bg;
-    if (color) el.style.color = color;
+  const priorBg = el2.style.background;
+  const priorColor = el2.style.color;
+  el2.addEventListener("mouseenter", () => {
+    el2.style.background = bg;
+    if (color) el2.style.color = color;
   });
-  el.addEventListener("mouseleave", () => {
-    el.style.background = priorBg;
-    if (color) el.style.color = priorColor;
+  el2.addEventListener("mouseleave", () => {
+    el2.style.background = priorBg;
+    if (color) el2.style.color = priorColor;
   });
 }
-function attachPress(el, scale = 0.96) {
+function attachPress(el2, scale = 0.96) {
   const down = (e) => {
-    if (el.disabled) return;
-    el.setPointerCapture?.(e.pointerId);
-    el.style.transform = `scale(${scale})`;
+    if (el2.disabled) return;
+    el2.setPointerCapture?.(e.pointerId);
+    el2.style.transform = `scale(${scale})`;
   };
   const up = () => {
-    el.style.transform = "";
+    el2.style.transform = "";
   };
-  el.addEventListener("pointerdown", down);
-  el.addEventListener("pointerup", up);
-  el.addEventListener("pointercancel", up);
-}
-function attachInputFocus(el) {
-  el.addEventListener("focus", () => {
-    el.style.borderColor = v("accent-ring");
-    el.style.background = v("surface-hover");
+  el2.addEventListener("pointerdown", down);
+  el2.addEventListener("pointerup", up);
+  el2.addEventListener("pointercancel", up);
+}
+function attachInputFocus(el2) {
+  el2.addEventListener("focus", () => {
+    el2.style.borderColor = v("accent-ring");
+    el2.style.background = v("surface-hover");
   });
-  el.addEventListener("blur", () => {
-    el.style.borderColor = v("border");
-    el.style.background = v("surface-raised");
+  el2.addEventListener("blur", () => {
+    el2.style.borderColor = v("border");
+    el2.style.background = v("surface-raised");
   });
 }
 
@@ -832,15 +838,15 @@ function withAlpha(color, alpha) {
   }
   return `rgba(24, 24, 27, ${alpha})`;
 }
-function fieldType(el) {
-  if (el.dataset.cmsType === "image") return "image";
-  if (el.dataset.cmsType === "link") return "link";
-  if (el.dataset.cmsType === "richtext") return "richtext";
-  if (el.tagName === "IMG") return "image";
+function fieldType(el2) {
+  if (el2.dataset.cmsType === "image") return "image";
+  if (el2.dataset.cmsType === "link") return "link";
+  if (el2.dataset.cmsType === "richtext") return "richtext";
+  if (el2.tagName === "IMG") return "image";
   return "text";
 }
-function elementMode(el) {
-  return el.dataset.cmsList ? "list" : "field";
+function elementMode(el2) {
+  return el2.dataset.cmsList ? "list" : "field";
 }
 function injectStyles() {
   if (styleInjected) return;
@@ -948,9 +954,9 @@ var KIND_LABEL = {
   link: "Link",
   richtext: "Rich text"
 };
-function positionOverlay(el, animate = false) {
-  const rect = el.getBoundingClientRect();
-  const mode = elementMode(el);
+function positionOverlay(el2, animate = false) {
+  const rect = el2.getBoundingClientRect();
+  const mode = elementMode(el2);
   const isList = mode === "list";
   const a = isList ? listAccent(accent()) : accent();
   const overlay = getOrCreateOverlay();
@@ -959,8 +965,8 @@ function positionOverlay(el, animate = false) {
   overlay.style.transform = `translate(${rect.left - padding}px, ${rect.top - padding}px)`;
   overlay.style.width = `${rect.width + padding * 2}px`;
   overlay.style.height = `${rect.height + padding * 2}px`;
-  if (lastOverlayEl !== el) {
-    lastOverlayEl = el;
+  if (lastOverlayEl !== el2) {
+    lastOverlayEl = el2;
     if (isList) {
       overlay.style.border = `1px dashed ${a}`;
       overlay.style.borderRadius = "6px";
@@ -974,12 +980,12 @@ function positionOverlay(el, animate = false) {
     if (isList) {
       tagIcon = LIST_ICON;
       tagLabel = "List";
-      tooltipText = `list: ${el.dataset.cmsList}`;
+      tooltipText = `list: ${el2.dataset.cmsList}`;
     } else {
-      const type = fieldType(el);
+      const type = fieldType(el2);
       tagIcon = type === "image" ? IMAGE_ICON : type === "link" ? LINK_ICON : FIELD_ICON;
       tagLabel = KIND_LABEL[type];
-      tooltipText = el.dataset.cms ?? "";
+      tooltipText = el2.dataset.cms ?? "";
     }
     overlay.style.border = `2px solid ${withAlpha(a, isList ? 0.55 : 0.45)}`;
     overlay.style.background = withAlpha(a, 0.05);
@@ -1062,18 +1068,18 @@ function handleClick(e) {
 }
 function warnUnhoverableRegions() {
   const els = document.querySelectorAll(CMS_SELECTOR);
-  els.forEach((el) => {
-    const rect = el.getBoundingClientRect();
+  els.forEach((el2) => {
+    const rect = el2.getBoundingClientRect();
     if (rect.width > 0 && rect.height > 0) return;
-    const cs = getComputedStyle(el);
+    const cs = getComputedStyle(el2);
     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}"`;
+    const name = el2.dataset.cmsList ? `list "${el2.dataset.cmsList}"` : `field "${el2.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
+      el2
     );
   });
 }
@@ -1699,9 +1705,9 @@ function makePrimaryButton(label2, color) {
   attachPress(btn);
   return btn;
 }
-function applyPopupStyles(el) {
-  markUi(el);
-  el.style.cssText = `
+function applyPopupStyles(el2) {
+  markUi(el2);
+  el2.style.cssText = `
     ${surface(2)}
     position: absolute;
     z-index: ${v("z-panel")};
@@ -1944,12 +1950,12 @@ function closePopup() {
     keyListener = null;
   }
   if (popupEl) {
-    const el = popupEl;
+    const el2 = popupEl;
     popupEl = null;
-    el.style.transition = `opacity ${v("duration-exit")} ${v("ease-out")}, transform ${v("duration-exit")} ${v("ease-out")}`;
-    el.style.opacity = "0";
-    el.style.transform = "scale(0.93)";
-    setTimeout(() => el.remove(), 200);
+    el2.style.transition = `opacity ${v("duration-exit")} ${v("ease-out")}, transform ${v("duration-exit")} ${v("ease-out")}`;
+    el2.style.opacity = "0";
+    el2.style.transform = "scale(0.93)";
+    setTimeout(() => el2.remove(), 200);
   }
 }
 
@@ -2436,15 +2442,15 @@ async function refreshListPanel() {
 function closeListPanel() {
   if (panelEl) {
     panelEl.style.animation = `cancia-panel-out ${v("duration-exit")} ${v("ease-out")} forwards`;
-    const el = panelEl;
-    setTimeout(() => el.remove(), 180);
+    const el2 = panelEl;
+    setTimeout(() => el2.remove(), 180);
     panelEl = null;
   }
   if (backdropEl) {
-    const el = backdropEl;
-    el.style.opacity = "0";
-    el.style.transition = `opacity ${v("duration-exit")} ${v("ease-out")}`;
-    setTimeout(() => el.remove(), 180);
+    const el2 = backdropEl;
+    el2.style.opacity = "0";
+    el2.style.transition = `opacity ${v("duration-exit")} ${v("ease-out")}`;
+    setTimeout(() => el2.remove(), 180);
     backdropEl = null;
   }
   currentSchema = null;
@@ -2740,6 +2746,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;
@@ -3804,22 +3903,22 @@ function openEntryModal(opts) {
 }
 function closeEntryModal() {
   if (modalEl) {
-    const el = modalEl;
+    const el2 = modalEl;
     modalEl = null;
     if (mountedInPanel) {
-      popPanelView(el);
+      popPanelView(el2);
     } else {
-      el.style.transition = `opacity 0.16s ${v("ease-out")}, transform 0.16s ${v("ease-out")}`;
-      el.style.opacity = "0";
-      el.style.transform = "translate(-50%, calc(-50% + 8px)) scale(0.985)";
-      setTimeout(() => el.remove(), 180);
+      el2.style.transition = `opacity 0.16s ${v("ease-out")}, transform 0.16s ${v("ease-out")}`;
+      el2.style.opacity = "0";
+      el2.style.transform = "translate(-50%, calc(-50% + 8px)) scale(0.985)";
+      setTimeout(() => el2.remove(), 180);
     }
   }
   mountedInPanel = false;
   if (backdropEl2) {
-    const el = backdropEl2;
-    el.style.opacity = "0";
-    setTimeout(() => el.remove(), 180);
+    const el2 = backdropEl2;
+    el2.style.opacity = "0";
+    setTimeout(() => el2.remove(), 180);
     backdropEl2 = null;
   }
   if (escListener) {
@@ -4551,6 +4650,141 @@ function unmountToolbar() {
   }
 }
 
+// src/login.ts
+var PANEL_ID = "cancia-login";
+function el(tag, css, text) {
+  const node = document.createElement(tag);
+  node.style.cssText = css;
+  if (text) node.textContent = text;
+  return node;
+}
+function closeLoginPrompt() {
+  document.getElementById(PANEL_ID)?.remove();
+}
+function openLoginPrompt() {
+  return new Promise((resolve) => {
+    closeLoginPrompt();
+    const card = el(
+      "div",
+      `position:fixed;bottom:24px;right:24px;z-index:2147483646;width:320px;
+       background:#fff;border:1px solid #e5e5e5;border-radius:12px;
+       box-shadow:0 10px 40px rgba(0,0,0,.15);padding:20px;
+       font:14px/1.5 system-ui,-apple-system,sans-serif;color:#111;`
+    );
+    card.id = PANEL_ID;
+    const title = el("div", "font-weight:600;font-size:15px;margin-bottom:4px;", "Sign in to edit");
+    const blurb = el(
+      "div",
+      "color:#666;font-size:13px;margin-bottom:14px;",
+      "We'll email you a link. No password needed."
+    );
+    const input2 = el(
+      "input",
+      `width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid #d4d4d4;
+       border-radius:8px;font:inherit;margin-bottom:10px;`
+    );
+    input2.type = "email";
+    input2.placeholder = "you@example.com";
+    input2.autocomplete = "email";
+    const button2 = el(
+      "button",
+      `width:100%;padding:9px 12px;border:0;border-radius:8px;background:#111;
+       color:#fff;font:inherit;font-weight:500;cursor:pointer;`,
+      "Email me a link"
+    );
+    const status = el("div", "font-size:13px;margin-top:10px;color:#666;");
+    status.setAttribute("aria-live", "polite");
+    const dismiss = el(
+      "button",
+      `position:absolute;top:10px;right:12px;border:0;background:none;
+       font-size:18px;line-height:1;color:#999;cursor:pointer;padding:2px 6px;`,
+      "\xD7"
+    );
+    dismiss.setAttribute("aria-label", "Close");
+    dismiss.onclick = () => closeLoginPrompt();
+    card.style.position = "fixed";
+    card.append(dismiss, title, blurb, input2, button2, status);
+    document.body.appendChild(card);
+    input2.focus();
+    async function submit() {
+      const email = input2.value.trim();
+      if (!email) {
+        status.textContent = "Enter your email address.";
+        return;
+      }
+      button2.disabled = true;
+      button2.textContent = "Sending\u2026";
+      status.textContent = "";
+      try {
+        const res = await fetch("/api/cancia/auth/request", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email })
+        });
+        if (res.status === 404) {
+          status.textContent = "Email login is not set up for this site.";
+          button2.disabled = false;
+          button2.textContent = "Email me a link";
+          return;
+        }
+        if (res.status === 429) {
+          status.textContent = "Too many attempts. Wait a minute and try again.";
+          button2.disabled = false;
+          button2.textContent = "Email me a link";
+          return;
+        }
+        input2.remove();
+        button2.remove();
+        blurb.remove();
+        title.textContent = "Check your email";
+        status.textContent = "If that address can edit this site, a link is on its way. It expires in 15 minutes.";
+        status.style.color = "#111";
+      } catch {
+        status.textContent = "Could not reach the server. Check your connection.";
+        button2.disabled = false;
+        button2.textContent = "Email me a link";
+      }
+    }
+    button2.onclick = submit;
+    input2.onkeydown = (e) => {
+      if (e.key === "Enter") submit();
+    };
+    void resolve;
+  });
+}
+async function redeemLoginToken() {
+  const params = new URLSearchParams(window.location.search);
+  const token = params.get("cancia_login");
+  if (!token) return false;
+  params.delete("cancia_login");
+  const search = params.toString();
+  window.history.replaceState(
+    null,
+    "",
+    window.location.pathname + (search ? `?${search}` : "") + window.location.hash
+  );
+  try {
+    const res = await fetch("/api/cancia/auth/callback", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ token })
+    });
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+async function hasSession() {
+  try {
+    const res = await fetch("/api/cancia/auth/session", { credentials: "same-origin" });
+    if (!res.ok) return false;
+    const body = await res.json();
+    return body.authenticated === true;
+  } catch {
+    return false;
+  }
+}
+
 // src/index.ts
 var SESSION_KEY = "cancia_session";
 function getSessionToken() {
@@ -4626,6 +4860,27 @@ async function tryAutoInit() {
     init(window.__CANCIA__);
     return;
   }
+  if (window.__CANCIA__.magicLink) {
+    const justSignedIn = await redeemLoginToken();
+    if (justSignedIn || await hasSession()) {
+      closeLoginPrompt();
+      state.onLogout = async () => {
+        try {
+          await fetch("/api/cancia/auth/logout", {
+            method: "POST",
+            credentials: "include"
+          });
+        } catch {
+        }
+        unmountToolbar();
+      };
+      init(window.__CANCIA__);
+      return;
+    }
+    const wantsLogin = new URLSearchParams(window.location.search).has("cancia_login") || window.location.hash === "#cancia-login";
+    if (wantsLogin) void openLoginPrompt();
+    return;
+  }
   const token = await handleMagicUrl() ?? getSessionToken();
   if (!token) return;
   state.sessionToken = token;