@collidecreatives/edit-mode 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,7 +1,25 @@
 // src/index.ts
 var DEFAULT_EDITABLE_SELECTOR = "h1,h2,h3,h4,h5,h6,p,li,blockquote,figcaption,label,legend,dt,dd,th,td,a,button";
-var DEFAULT_SKIP_SELECTOR = "[data-no-edit],[data-edit-mode-skip],form,input,textarea,select,option,script,style,svg,canvas,iframe,.cem-edit-banner,.cem-copy-btn,.cem-toast";
+var DEFAULT_SKIP_SELECTOR = "[data-no-edit],[data-edit-mode-skip],form,input,textarea,select,option,script,style,svg,canvas,iframe,.cem-edit-banner,.cem-panel,.cem-toast";
 var SKIP_CHILD_TAGS = /* @__PURE__ */ new Set(["IMG", "PICTURE", "SVG", "VIDEO", "CANVAS", "IFRAME", "SCRIPT", "STYLE"]);
+var SINGLE_LINE_TAGS = /* @__PURE__ */ new Set([
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "BUTTON",
+  "LABEL",
+  "LEGEND",
+  "DT",
+  "TH",
+  "TD",
+  "FIGCAPTION",
+  "A"
+]);
+var DRAFT_VERSION = 1;
+var AUTOSAVE_DEBOUNCE_MS = 400;
 var defaults = {
   queryParam: "edit",
   queryValue: "true",
@@ -9,7 +27,8 @@ var defaults = {
   brandName: "Edit Mode",
   accentColour: "#1e40af",
   editableSelector: DEFAULT_EDITABLE_SELECTOR,
-  skipSelector: DEFAULT_SKIP_SELECTOR
+  skipSelector: DEFAULT_SKIP_SELECTOR,
+  autoSave: true
 };
 function hasDom() {
   return typeof window !== "undefined" && typeof document !== "undefined";
@@ -25,18 +44,34 @@ function addStyles(accentColour) {
   const style = document.createElement("style");
   style.dataset.editModeStyle = "true";
   style.textContent = [
-    `.cem-edit-banner{position:fixed;top:0;left:0;right:0;z-index:2147483640;background:${accentColour};color:#fff;text-align:center;padding:7px 56px 7px 16px;font-size:13px;font-family:system-ui,-apple-system,sans-serif;line-height:1.4}`,
-    ".cem-edit-banner kbd{background:rgba(255,255,255,0.15);padding:0 4px;border-radius:3px;font-size:11px}",
-    ".cem-exit-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);color:#fff;padding:3px 10px;border-radius:4px;font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap}",
-    ".cem-exit-btn:hover{background:rgba(255,255,255,0.25)}",
+    `.cem-edit-banner{position:fixed;top:0;left:0;right:0;z-index:2147483640;background:${accentColour};color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 92px 8px 16px;font:13px/1.4 system-ui,-apple-system,sans-serif;box-shadow:0 1px 8px rgba(0,0,0,.18)}`,
+    ".cem-edit-banner kbd{background:rgba(255,255,255,.18);padding:0 4px;border-radius:3px;font-size:11px}",
+    ".cem-exit-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;padding:4px 10px;border-radius:5px;font:12px system-ui,-apple-system,sans-serif;cursor:pointer;white-space:nowrap}",
+    ".cem-exit-btn:hover,.cem-exit-btn:focus-visible{background:rgba(255,255,255,.25);outline:none}",
     "[contenteditable=true]{cursor:text!important}",
-    "[contenteditable=true]:hover{outline:2px dashed rgba(59,130,246,0.5)!important;outline-offset:2px}",
-    "[contenteditable=true]:focus{outline:2px solid #3b82f6!important;outline-offset:2px;background:rgba(59,130,246,0.04)}",
-    `.cem-copy-btn{position:fixed;bottom:80px;right:16px;z-index:2147483640;background:${accentColour};color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;font-family:system-ui,-apple-system,sans-serif;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,0.3);transition:transform .15s,opacity .15s;white-space:nowrap}`,
-    ".cem-copy-btn:hover{transform:scale(1.05)}",
-    ".cem-copy-btn:active{transform:scale(.97)}",
-    ".cem-toast{position:fixed;bottom:132px;right:16px;z-index:2147483641;background:#065f46;color:#fff;padding:10px 18px;border-radius:8px;font-size:14px;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 2px 12px rgba(0,0,0,0.3);transition:opacity .3s}",
-    "@media(min-width:768px){.cem-copy-btn{bottom:24px;right:24px}.cem-toast{bottom:76px;right:24px}}"
+    "[contenteditable=true]:hover{outline:2px dashed rgba(59,130,246,.5)!important;outline-offset:2px}",
+    "[contenteditable=true]:focus{outline:2px solid #3b82f6!important;outline-offset:2px;background:rgba(59,130,246,.04)}",
+    "[contenteditable=true].cem-changed{box-shadow:inset 3px 0 0 #10b981}",
+    `.cem-panel{position:fixed;right:16px;bottom:16px;z-index:2147483640;background:#fff;color:#111827;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.22);padding:10px;display:grid;gap:8px;width:min(320px,calc(100vw - 32px));font:13px/1.4 system-ui,-apple-system,sans-serif}`,
+    ".cem-panel-actions{display:flex;gap:8px;flex-wrap:wrap}",
+    `.cem-copy-btn,.cem-review-btn,.cem-download-btn,.cem-open-link-btn{border:0;border-radius:8px;padding:9px 12px;font:600 13px system-ui,-apple-system,sans-serif;cursor:pointer;white-space:nowrap}`,
+    `.cem-copy-btn{background:${accentColour};color:#fff;flex:1}`,
+    ".cem-review-btn,.cem-download-btn,.cem-open-link-btn{background:#f3f4f6;color:#111827;border:1px solid #e5e7eb}",
+    ".cem-open-link-btn[hidden]{display:none}",
+    ".cem-copy-btn:hover,.cem-review-btn:hover,.cem-download-btn:hover,.cem-open-link-btn:hover{filter:brightness(.97)}",
+    ".cem-status{color:#4b5563;font-size:12px;min-height:17px}",
+    ".cem-review-list{max-height:220px;overflow-y:auto;display:grid;gap:6px;border-top:1px solid #e5e7eb;padding-top:8px}",
+    ".cem-review-list[hidden]{display:none}",
+    ".cem-review-empty{color:#6b7280;font-size:12px;margin:0;padding:4px 0}",
+    ".cem-review-item{display:grid;gap:4px;padding:8px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}",
+    ".cem-review-path{font-size:11px;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.02em}",
+    ".cem-review-diff{font-size:12px;word-break:break-word}",
+    ".cem-review-diff del{color:#b91c1c;text-decoration:line-through;opacity:.75;display:block}",
+    ".cem-review-diff ins{color:#065f46;text-decoration:none;display:block}",
+    ".cem-revert-btn{justify-self:start;background:transparent;border:1px solid #e5e7eb;border-radius:6px;padding:3px 8px;font:12px system-ui,-apple-system,sans-serif;cursor:pointer;color:#374151}",
+    ".cem-revert-btn:hover{background:#fff}",
+    ".cem-toast{position:fixed;bottom:116px;right:16px;z-index:2147483641;background:#065f46;color:#fff;padding:10px 18px;border-radius:8px;font:14px system-ui,-apple-system,sans-serif;box-shadow:0 2px 12px rgba(0,0,0,.3);transition:opacity .3s}",
+    "@media(max-width:520px){.cem-edit-banner{justify-content:flex-start;text-align:left}.cem-panel{left:16px;right:16px;width:auto}}"
   ].join("\n");
   document.head.appendChild(style);
   return style;
@@ -66,6 +101,40 @@ function fallbackCopy(text, label) {
   document.body.removeChild(textarea);
   showToast(label);
 }
+function getStorage() {
+  try {
+    const testKey = "__cem_storage_test__";
+    window.localStorage.setItem(testKey, "1");
+    window.localStorage.removeItem(testKey);
+    return window.localStorage;
+  } catch {
+    try {
+      return window.sessionStorage;
+    } catch {
+      return null;
+    }
+  }
+}
+function getDraftKey(config) {
+  const base = config.storageKey || `${config.sessionKey}:draft`;
+  return `${base}:${window.location.origin}${window.location.pathname}`;
+}
+function escapeHtml(text) {
+  return text.replace(/[&<>"']/g, (char) => {
+    switch (char) {
+      case "&":
+        return "&amp;";
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case '"':
+        return "&quot;";
+      default:
+        return "&#39;";
+    }
+  });
+}
 function isEditableElement(el, skipSelector) {
   if (el.closest(skipSelector)) return false;
   const text = el.textContent?.trim() ?? "";
@@ -76,6 +145,22 @@ function isEditableElement(el, skipSelector) {
   }
   return true;
 }
+function getElementKey(el) {
+  if (el.dataset.editId) return `data-edit-id:${el.dataset.editId}`;
+  if (el.id) return `id:${el.id}`;
+  const parts = [];
+  let current = el;
+  while (current && current !== document.body && current !== document.documentElement) {
+    const parentElement = current.parentElement;
+    if (!parentElement) break;
+    const currentTag = current.tagName;
+    const siblings = Array.from(parentElement.children).filter((child) => child.tagName === currentTag);
+    const index = siblings.indexOf(current) + 1;
+    parts.unshift(`${current.tagName.toLowerCase()}:nth-of-type(${index})`);
+    current = parentElement;
+  }
+  return parts.join(" > ");
+}
 function getEditPath(el) {
   let context = "";
   let current = el.parentElement;
@@ -122,6 +207,114 @@ function rewriteLinks(queryParam, queryValue) {
     }
   });
 }
+function buildPayload(changes) {
+  return {
+    site: window.location.hostname,
+    page: window.location.pathname,
+    pageTitle: document.title,
+    url: window.location.href,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    changes
+  };
+}
+function loadDraft(storage, key) {
+  if (!storage) return null;
+  try {
+    const raw = storage.getItem(key);
+    if (!raw) return null;
+    const draft = JSON.parse(raw);
+    return draft?.version === DRAFT_VERSION && Array.isArray(draft.changes) ? draft : null;
+  } catch {
+    return null;
+  }
+}
+function saveDraft(storage, key, draft) {
+  if (!storage) return false;
+  try {
+    storage.setItem(key, JSON.stringify(draft));
+    return true;
+  } catch {
+    return false;
+  }
+}
+function downloadText(filename, text) {
+  const blob = new Blob([text], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.style.display = "none";
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+function formatTime(date = /* @__PURE__ */ new Date()) {
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+function initEditableElements(config) {
+  document.querySelectorAll(config.editableSelector).forEach((el) => {
+    if (!isEditableElement(el, config.skipSelector)) return;
+    if (el.closest("[data-edit-key]")) return;
+    const text = el.textContent?.trim() ?? "";
+    el.contentEditable = "true";
+    if (!el.dataset.editOriginal) el.dataset.editOriginal = text;
+    if (!el.dataset.editKey) el.dataset.editKey = getElementKey(el);
+  });
+}
+function findEditableByKey(editableSelector, key) {
+  const elements = document.querySelectorAll(editableSelector);
+  for (const el of Array.from(elements)) {
+    if (el.dataset.editKey === key) return el;
+  }
+  return null;
+}
+function applyDraft(draft, editableSelector) {
+  if (!draft) return 0;
+  const edits = new Map(draft.changes.map((change) => [change.key, change]));
+  let restored = 0;
+  document.querySelectorAll(editableSelector).forEach((el) => {
+    const key = el.dataset.editKey;
+    if (!key) return;
+    const saved = edits.get(key);
+    if (!saved) return;
+    if (el.dataset.editOriginal !== saved.original) return;
+    el.textContent = saved.new;
+    restored += 1;
+  });
+  return restored;
+}
+function markChanged(el) {
+  const original = el.dataset.editOriginal;
+  if (original === void 0) return;
+  const current = el.textContent?.trim() ?? "";
+  el.classList.toggle("cem-changed", original !== current);
+}
+function collectDraftChanges(editableSelector) {
+  const changes = [];
+  document.querySelectorAll(editableSelector).forEach((el) => {
+    if (!el.isContentEditable && el.contentEditable !== "true") return;
+    const original = el.dataset.editOriginal;
+    const key = el.dataset.editKey;
+    if (original === void 0 || !key) return;
+    const current = el.textContent?.trim() ?? "";
+    const changed = original !== current;
+    el.classList.toggle("cem-changed", changed);
+    if (changed) {
+      changes.push({
+        key,
+        path: getEditPath(el),
+        tag: el.tagName,
+        original,
+        new: current
+      });
+    }
+  });
+  return changes;
+}
+function collectChanges(editableSelector) {
+  return collectDraftChanges(editableSelector).map(({ key: _key, ...change }) => change);
+}
 function initClientEditMode(options = {}) {
   if (!hasDom()) {
     return { active: false, getChanges: () => [], destroy: () => void 0 };
@@ -135,108 +328,245 @@ function initClientEditMode(options = {}) {
   }
   window.__COLLIDE_EDIT_MODE_ACTIVE = true;
   window.sessionStorage.setItem(config.sessionKey, "1");
+  const storage = getStorage();
+  const draftKey = getDraftKey(config);
   const style = addStyles(config.accentColour);
   const banner = document.createElement("div");
   banner.className = "cem-edit-banner";
-  banner.innerHTML = `\u270F\uFE0F <strong>${config.brandName}</strong> \u2014 Click any text to edit. Press <kbd>Esc</kbd> to finish editing.`;
+  banner.innerHTML = `\u270F\uFE0F <strong>${config.brandName}</strong> <span>Click text to edit. Press <kbd>Esc</kbd> when done.</span>`;
   const exitButton = document.createElement("button");
   exitButton.className = "cem-exit-btn";
-  exitButton.textContent = "\u2715 Exit";
-  exitButton.addEventListener("click", () => {
-    window.sessionStorage.removeItem(config.sessionKey);
-    const url = new URL(window.location.href);
-    url.searchParams.delete(config.queryParam);
-    window.location.href = url.toString();
-  });
+  exitButton.type = "button";
+  exitButton.textContent = "Exit";
   banner.appendChild(exitButton);
   document.body.prepend(banner);
+  const panel = document.createElement("div");
+  panel.className = "cem-panel";
+  panel.innerHTML = `
+    <div class="cem-panel-actions">
+      <button class="cem-copy-btn" type="button">\u{1F4CB} Copy Changes</button>
+      <button class="cem-review-btn" type="button" aria-expanded="false">Review</button>
+      <button class="cem-download-btn" type="button">Download backup</button>
+      <button class="cem-open-link-btn" type="button" hidden>Open link</button>
+    </div>
+    <div class="cem-review-list" hidden></div>
+    <div class="cem-status" aria-live="polite">Auto-save ready</div>
+  `;
+  document.body.appendChild(panel);
+  const copyButton = panel.querySelector(".cem-copy-btn");
+  const reviewButton = panel.querySelector(".cem-review-btn");
+  const downloadButton = panel.querySelector(".cem-download-btn");
+  const openLinkButton = panel.querySelector(".cem-open-link-btn");
+  const reviewList = panel.querySelector(".cem-review-list");
+  const status = panel.querySelector(".cem-status");
+  let activeLink = null;
+  let reviewOpen = false;
+  let currentDraftChanges = [];
   document.querySelectorAll("[data-reveal]").forEach((el) => el.classList.add("is-visible"));
   rewriteLinks(config.queryParam, config.queryValue);
-  const initEditable = () => {
-    document.querySelectorAll(config.editableSelector).forEach((el) => {
-      if (!isEditableElement(el, config.skipSelector)) return;
-      const text = el.textContent?.trim() ?? "";
-      el.contentEditable = "true";
-      if (!el.dataset.editOriginal) el.dataset.editOriginal = text;
-    });
+  initEditableElements(config);
+  const restoredCount = applyDraft(loadDraft(storage, draftKey), config.editableSelector);
+  const makeDraft = () => ({
+    version: DRAFT_VERSION,
+    page: window.location.pathname,
+    url: window.location.href,
+    updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    changes: collectDraftChanges(config.editableSelector)
+  });
+  const renderReviewList = () => {
+    if (!reviewList) return;
+    if (currentDraftChanges.length === 0) {
+      reviewList.innerHTML = '<p class="cem-review-empty">No changes yet.</p>';
+      return;
+    }
+    reviewList.innerHTML = currentDraftChanges.map(
+      (change, index) => `
+          <div class="cem-review-item">
+            <div class="cem-review-path">${escapeHtml(change.path)}</div>
+            <div class="cem-review-diff"><del>${escapeHtml(change.original)}</del><ins>${escapeHtml(change.new)}</ins></div>
+            <button class="cem-revert-btn" type="button" data-index="${index}">Revert</button>
+          </div>
+        `
+    ).join("");
+  };
+  const renderStatus = (count, message) => {
+    if (copyButton) copyButton.textContent = count > 0 ? `\u{1F4CB} Copy Changes (${count})` : "\u{1F4CB} Copy Changes";
+    if (openLinkButton) {
+      openLinkButton.hidden = !activeLink;
+      openLinkButton.textContent = activeLink ? `Open ${activeLink.hostname || "link"}` : "Open link";
+    }
+    if (status) {
+      status.textContent = message || `Auto-saved ${formatTime()} \u2022 ${count} change${count === 1 ? "" : "s"} \u2022 Links: edit text or Ctrl/\u2318-click to open`;
+    }
+  };
+  const updateUi = (message) => {
+    renderStatus(collectChanges(config.editableSelector).length, message);
+  };
+  const persistDraft = () => {
+    const draft = makeDraft();
+    currentDraftChanges = draft.changes;
+    const saved = config.autoSave !== false && saveDraft(storage, draftKey, draft);
+    renderStatus(draft.changes.length, saved || config.autoSave === false ? void 0 : "\u26A0\uFE0F Auto-save unavailable \u2014 use Download backup");
+    if (reviewOpen) renderReviewList();
+    return draft;
+  };
+  let saveTimeout = null;
+  const flushDraftSave = () => {
+    if (saveTimeout !== null) {
+      window.clearTimeout(saveTimeout);
+      saveTimeout = null;
+    }
+    return persistDraft();
+  };
+  const scheduleDraftSave = () => {
+    if (saveTimeout !== null) window.clearTimeout(saveTimeout);
+    saveTimeout = window.setTimeout(() => {
+      saveTimeout = null;
+      persistDraft();
+    }, AUTOSAVE_DEBOUNCE_MS);
   };
-  initEditable();
-  const blockButtonClicks = (event) => {
+  const finishEditing = () => {
+    const activeElement = document.activeElement;
+    if (!(activeElement instanceof HTMLElement)) return false;
+    if (!activeElement.isContentEditable && activeElement.contentEditable !== "true") return false;
+    activeElement.blur();
+    window.getSelection()?.removeAllRanges();
+    flushDraftSave();
+    return true;
+  };
+  const handleEditingKeydown = (event) => {
+    if (event.key === "Escape") {
+      if (!finishEditing()) return;
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey) {
+      const target = event.target;
+      if (target instanceof HTMLElement && SINGLE_LINE_TAGS.has(target.tagName) && (target.isContentEditable || target.contentEditable === "true")) {
+        event.preventDefault();
+        finishEditing();
+      }
+    }
+  };
+  const handleDocumentClick = (event) => {
     const target = event.target;
     if (!(target instanceof Element)) return;
+    const anchor = target.closest("a[href]");
+    if (anchor && !anchor.closest(".cem-panel") && !anchor.closest(".cem-edit-banner")) {
+      activeLink = anchor;
+      updateUi("Link selected \u2014 edit the text, use Open link, or Ctrl/\u2318-click to visit it");
+      if (event.metaKey || event.ctrlKey || event.altKey) {
+        flushDraftSave();
+        return;
+      }
+      event.preventDefault();
+      return;
+    }
     const button = target.closest("button");
-    if (button && !button.classList.contains("cem-copy-btn") && !button.closest(".cem-edit-banner")) {
+    if (button && !button.closest(".cem-panel") && !button.closest(".cem-edit-banner")) {
       event.preventDefault();
       event.stopImmediatePropagation();
     }
   };
-  document.addEventListener("click", blockButtonClicks, true);
-  const copyButton = document.createElement("button");
-  copyButton.className = "cem-copy-btn";
-  document.body.appendChild(copyButton);
-  const updateCounter = () => {
-    const count = collectChanges(config.editableSelector).length;
-    copyButton.textContent = count > 0 ? `\u{1F4CB} Copy Changes (${count})` : "\u{1F4CB} Copy Changes";
+  const handleFocusIn = (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    activeLink = target.closest("a[href]");
+    updateUi(activeLink ? "Link selected \u2014 edit the text or use Open link to navigate" : void 0);
+  };
+  const handleInput = (event) => {
+    if (event.target instanceof HTMLElement) markChanged(event.target);
+    scheduleDraftSave();
+  };
+  const handlePageHide = () => flushDraftSave();
+  const handleVisibilityChange = () => {
+    if (document.visibilityState === "hidden") flushDraftSave();
   };
-  document.addEventListener("input", updateCounter);
-  updateCounter();
-  copyButton.addEventListener("click", () => {
-    const changes = collectChanges(config.editableSelector);
-    const payload = {
-      site: window.location.hostname,
-      page: window.location.pathname,
-      pageTitle: document.title,
-      url: window.location.href,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      changes
-    };
+  document.addEventListener("keydown", handleEditingKeydown);
+  document.addEventListener("click", handleDocumentClick, true);
+  document.addEventListener("focusin", handleFocusIn);
+  document.addEventListener("input", handleInput);
+  window.addEventListener("pagehide", handlePageHide);
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+  reviewButton?.addEventListener("click", () => {
+    reviewOpen = !reviewOpen;
+    if (reviewList) reviewList.hidden = !reviewOpen;
+    reviewButton.textContent = reviewOpen ? "Hide review" : "Review";
+    reviewButton.setAttribute("aria-expanded", String(reviewOpen));
+    if (reviewOpen) renderReviewList();
+  });
+  reviewList?.addEventListener("click", (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) return;
+    const revertButton = target.closest(".cem-revert-btn");
+    if (!revertButton) return;
+    const change = currentDraftChanges[Number(revertButton.dataset.index)];
+    if (!change) return;
+    const el = findEditableByKey(config.editableSelector, change.key);
+    if (el) el.textContent = change.original;
+    flushDraftSave();
+  });
+  copyButton?.addEventListener("click", () => {
+    const draft = flushDraftSave();
+    const payload = buildPayload(draft.changes);
     options.onCopy?.(payload);
     const copyPayload = options.mapPayload ? options.mapPayload(payload) : payload;
     const json = JSON.stringify(copyPayload, null, 2);
-    const label = `\u2713 Copied ${changes.length} change${changes.length !== 1 ? "s" : ""} to clipboard`;
+    const label = `\u2713 Copied ${draft.changes.length} change${draft.changes.length !== 1 ? "s" : ""} to clipboard`;
     if (navigator.clipboard?.writeText) {
       navigator.clipboard.writeText(json).then(() => showToast(label)).catch(() => fallbackCopy(json, label));
     } else {
       fallbackCopy(json, label);
     }
   });
+  downloadButton?.addEventListener("click", () => {
+    const draft = flushDraftSave();
+    const payload = buildPayload(draft.changes);
+    const date = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+    downloadText(`edit-mode-${window.location.hostname}-${date}.json`, JSON.stringify(payload, null, 2));
+    showToast("\u2713 Backup downloaded");
+  });
+  openLinkButton?.addEventListener("click", () => {
+    if (!activeLink?.href) return;
+    flushDraftSave();
+    window.location.href = activeLink.href;
+  });
+  exitButton.addEventListener("click", () => {
+    flushDraftSave();
+    window.sessionStorage.removeItem(config.sessionKey);
+    const url = new URL(window.location.href);
+    url.searchParams.delete(config.queryParam);
+    window.location.href = url.toString();
+  });
+  persistDraft();
+  if (restoredCount > 0) updateUi(`Restored ${restoredCount} saved edit${restoredCount === 1 ? "" : "s"} \u2022 Auto-save on`);
   return {
     active: true,
     getChanges: () => collectChanges(config.editableSelector),
     destroy: () => {
-      document.removeEventListener("click", blockButtonClicks, true);
-      document.removeEventListener("input", updateCounter);
+      flushDraftSave();
+      document.removeEventListener("keydown", handleEditingKeydown);
+      document.removeEventListener("click", handleDocumentClick, true);
+      document.removeEventListener("focusin", handleFocusIn);
+      document.removeEventListener("input", handleInput);
+      window.removeEventListener("pagehide", handlePageHide);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
       banner.remove();
-      copyButton.remove();
+      panel.remove();
       style.remove();
       document.querySelectorAll(config.editableSelector).forEach((el) => {
         if (el.dataset.editOriginal !== void 0) {
           el.contentEditable = "false";
+          el.classList.remove("cem-changed");
           delete el.dataset.editOriginal;
+          delete el.dataset.editKey;
         }
       });
       window.__COLLIDE_EDIT_MODE_ACTIVE = false;
     }
   };
 }
-function collectChanges(editableSelector) {
-  const changes = [];
-  document.querySelectorAll(editableSelector).forEach((el) => {
-    if (!el.isContentEditable && el.contentEditable !== "true") return;
-    const original = el.dataset.editOriginal;
-    if (original === void 0) return;
-    const current = el.textContent?.trim() ?? "";
-    if (original !== current) {
-      changes.push({
-        path: getEditPath(el),
-        tag: el.tagName,
-        original,
-        new: current
-      });
-    }
-  });
-  return changes;
-}
 export {
   initClientEditMode
 };