emdash 0.0.0-b → 0.0.1

package/src/visual-editing/toolbar.ts

@@ -0,0 +1,1229 @@
+/**
+ * EmDash Visual Editing Toolbar
+ *
+ * A floating pill injected via middleware for authenticated editors.
+ * Renders as a plain HTML string with inline styles and a <script> tag.
+ * No dependencies — works on any page with a </body> tag.
+ */
+
+interface ToolbarConfig {
+	editMode: boolean;
+	isPreview: boolean;
+}
+
+export function renderToolbar(config: ToolbarConfig): string {
+	const { editMode, isPreview } = config;
+
+	return `
+<!-- EmDash Visual Editing Toolbar -->
+<div id="emdash-toolbar" data-edit-mode="${editMode}" data-preview="${isPreview}">
+  <div class="emdash-tb-inner">
+    <span class="emdash-tb-logo">EmDash</span>
+
+    <div class="emdash-tb-divider"></div>
+
+    <label class="emdash-tb-toggle" title="Toggle edit mode">
+      <input type="checkbox" id="emdash-edit-toggle" ${editMode ? "checked" : ""} />
+      <span class="emdash-tb-toggle-track">
+        <span class="emdash-tb-toggle-thumb"></span>
+      </span>
+      <span class="emdash-tb-toggle-label">Edit</span>
+    </label>
+
+    <span class="emdash-tb-status" id="emdash-tb-status"></span>
+
+    <span class="emdash-tb-save-status" id="emdash-tb-save-status"></span>
+
+    <a class="emdash-tb-admin" id="emdash-tb-admin" href="#" target="emdash-admin" style="display:none" title="Open in admin">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+    </a>
+
+    <button class="emdash-tb-publish" id="emdash-tb-publish" style="display:none">Publish</button>
+  </div>
+</div>
+
+<style>
+  #emdash-toolbar {
+    position: fixed;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999999;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 13px;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .emdash-tb-inner {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 16px;
+    background: #1a1a1a;
+    color: #e0e0e0;
+    border-radius: 999px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08);
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .emdash-tb-logo {
+    font-weight: 600;
+    font-size: 12px;
+    letter-spacing: 0.02em;
+    color: #fff;
+    opacity: 0.7;
+  }
+
+  .emdash-tb-divider {
+    width: 1px;
+    height: 16px;
+    background: rgba(255,255,255,0.15);
+  }
+
+  /* Toggle switch */
+  .emdash-tb-toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+  }
+
+  .emdash-tb-toggle input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .emdash-tb-toggle-track {
+    position: relative;
+    width: 32px;
+    height: 18px;
+    background: #444;
+    border-radius: 9px;
+    transition: background 0.2s;
+  }
+
+  .emdash-tb-toggle input:checked + .emdash-tb-toggle-track {
+    background: #3b82f6;
+  }
+
+  .emdash-tb-toggle-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    background: #fff;
+    border-radius: 50%;
+    transition: transform 0.2s;
+  }
+
+  .emdash-tb-toggle input:checked + .emdash-tb-toggle-track .emdash-tb-toggle-thumb {
+    transform: translateX(14px);
+  }
+
+  .emdash-tb-toggle-label {
+    font-size: 12px;
+    color: #aaa;
+  }
+
+  .emdash-tb-toggle input:checked ~ .emdash-tb-toggle-label {
+    color: #fff;
+  }
+
+  /* Status area — flex for multiple badges */
+  .emdash-tb-status {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+  }
+
+  /* Badges */
+  .emdash-tb-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 8px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  .emdash-tb-badge--preview {
+    background: rgba(139,92,246,0.2);
+    color: #a78bfa;
+  }
+
+  .emdash-tb-badge--draft {
+    background: rgba(245,158,11,0.2);
+    color: #fbbf24;
+  }
+
+  .emdash-tb-badge--published {
+    background: rgba(34,197,94,0.2);
+    color: #4ade80;
+  }
+
+  .emdash-tb-badge--pending {
+    background: rgba(59,130,246,0.2);
+    color: #60a5fa;
+  }
+
+  .emdash-tb-badge--unsaved {
+    background: rgba(245,158,11,0.2);
+    color: #fbbf24;
+  }
+
+  .emdash-tb-badge--saving {
+    background: rgba(148,163,184,0.2);
+    color: #94a3b8;
+  }
+
+  .emdash-tb-badge--saved {
+    background: rgba(34,197,94,0.2);
+    color: #4ade80;
+    transition: opacity 0.3s;
+  }
+
+  .emdash-tb-badge--error {
+    background: rgba(239,68,68,0.2);
+    color: #f87171;
+  }
+
+  /* Admin link */
+  .emdash-tb-admin {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #888;
+    text-decoration: none;
+    padding: 2px;
+    border-radius: 4px;
+    transition: color 0.15s;
+  }
+
+  .emdash-tb-admin:hover {
+    color: #fff;
+  }
+
+  /* Publish button */
+  .emdash-tb-publish {
+    padding: 4px 12px;
+    background: #3b82f6;
+    color: #fff;
+    border: none;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s;
+    font-family: inherit;
+  }
+
+  .emdash-tb-publish:hover {
+    background: #2563eb;
+  }
+
+  .emdash-tb-publish:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Edit mode: editable hover styles — uses :has() to check toolbar state */
+  body:has(#emdash-toolbar[data-edit-mode="true"]) [data-emdash-ref] {
+    transition: box-shadow 0.15s, background-color 0.15s;
+  }
+
+  body:has(#emdash-toolbar[data-edit-mode="true"]) [data-emdash-ref]:hover {
+    box-shadow: 0 0 0 2px rgba(59,130,246,0.5);
+    border-radius: 4px;
+    background-color: rgba(59,130,246,0.04);
+    cursor: text;
+  }
+
+  /* Active editing state — override hover pencil cursor */
+  [data-emdash-editing] {
+    box-shadow: 0 0 0 2px #3b82f6 !important;
+    border-radius: 4px !important;
+    background-color: rgba(59,130,246,0.04) !important;
+    cursor: text !important;
+  }
+
+  /* Suppress browser focus ring on contenteditable and tiptap editor */
+  [data-emdash-editing]:focus,
+  [data-emdash-ref] .tiptap:focus,
+  [data-emdash-ref] .ProseMirror:focus {
+    outline: none !important;
+  }
+
+  /* Image editor popover */
+  .emdash-img-popover {
+    position: fixed;
+    z-index: 1000000;
+    background: #1a1a1a;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
+    color: #e0e0e0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 13px;
+    width: 320px;
+    overflow: hidden;
+    animation: emdash-img-fadein 0.15s ease-out;
+  }
+
+  @keyframes emdash-img-fadein {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .emdash-img-popover-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    border-bottom: 1px solid rgba(255,255,255,0.08);
+  }
+
+  .emdash-img-popover-title {
+    font-weight: 600;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #999;
+  }
+
+  .emdash-img-popover-close {
+    background: none;
+    border: none;
+    color: #666;
+    cursor: pointer;
+    padding: 2px;
+    line-height: 1;
+    font-size: 16px;
+    border-radius: 4px;
+    transition: color 0.15s;
+  }
+
+  .emdash-img-popover-close:hover {
+    color: #fff;
+  }
+
+  .emdash-img-popover-body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .emdash-img-preview {
+    width: 100%;
+    max-height: 160px;
+    object-fit: contain;
+    border-radius: 6px;
+    background: #111;
+  }
+
+  .emdash-img-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 80px;
+    border: 2px dashed rgba(255,255,255,0.15);
+    border-radius: 6px;
+    color: #666;
+    font-size: 12px;
+  }
+
+  .emdash-img-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .emdash-img-field label {
+    font-size: 11px;
+    font-weight: 600;
+    color: #888;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .emdash-img-field input[type="text"] {
+    background: #111;
+    border: 1px solid rgba(255,255,255,0.12);
+    border-radius: 6px;
+    color: #e0e0e0;
+    padding: 6px 8px;
+    font-size: 13px;
+    font-family: inherit;
+    outline: none;
+    transition: border-color 0.15s;
+  }
+
+  .emdash-img-field input[type="text"]:focus {
+    border-color: #3b82f6;
+  }
+
+  .emdash-img-actions {
+    display: flex;
+    gap: 6px;
+  }
+
+  .emdash-img-btn {
+    flex: 1;
+    padding: 6px 10px;
+    border: 1px solid rgba(255,255,255,0.12);
+    border-radius: 6px;
+    background: #222;
+    color: #e0e0e0;
+    font-size: 12px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  .emdash-img-btn:hover {
+    background: #333;
+    border-color: rgba(255,255,255,0.2);
+  }
+
+  .emdash-img-btn--primary {
+    background: #3b82f6;
+    border-color: #3b82f6;
+    color: #fff;
+  }
+
+  .emdash-img-btn--primary:hover {
+    background: #2563eb;
+    border-color: #2563eb;
+  }
+
+  .emdash-img-btn--danger {
+    color: #f87171;
+    border-color: rgba(248,113,113,0.3);
+  }
+
+  .emdash-img-btn--danger:hover {
+    background: rgba(248,113,113,0.1);
+    border-color: rgba(248,113,113,0.5);
+  }
+
+  /* Media browser within the popover */
+  .emdash-img-browser {
+    border-top: 1px solid rgba(255,255,255,0.08);
+    padding: 12px;
+  }
+
+  .emdash-img-browser-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+
+  .emdash-img-browser-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: #999;
+  }
+
+  .emdash-img-browser-back {
+    background: none;
+    border: none;
+    color: #3b82f6;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: inherit;
+    padding: 2px 4px;
+  }
+
+  .emdash-img-browser-back:hover {
+    text-decoration: underline;
+  }
+
+  .emdash-img-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 6px;
+    max-height: 240px;
+    overflow-y: auto;
+  }
+
+  .emdash-img-grid-item {
+    aspect-ratio: 1;
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: border-color 0.15s;
+    background: #111;
+  }
+
+  .emdash-img-grid-item:hover {
+    border-color: rgba(59,130,246,0.5);
+  }
+
+  .emdash-img-grid-item--selected {
+    border-color: #3b82f6;
+  }
+
+  .emdash-img-grid-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .emdash-img-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 80px;
+    color: #666;
+    font-size: 12px;
+  }
+
+  .emdash-img-drop {
+    border: 2px dashed #3b82f6;
+    background: rgba(59,130,246,0.05);
+  }
+
+  .emdash-img-uploading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 0;
+    color: #999;
+    font-size: 12px;
+  }
+
+  .emdash-img-popover-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 999999;
+  }
+</style>
+
+<script>
+(function() {
+  var toolbar = document.getElementById("emdash-toolbar");
+  var toggle = document.getElementById("emdash-edit-toggle");
+  var statusEl = document.getElementById("emdash-tb-status");
+  var saveStatusEl = document.getElementById("emdash-tb-save-status");
+  var publishBtn = document.getElementById("emdash-tb-publish");
+  if (!toolbar || !toggle || !statusEl || !publishBtn || !saveStatusEl) return;
+
+  var isEditMode = toolbar.getAttribute("data-edit-mode") === "true";
+
+  // CSRF-protected fetch — adds X-EmDash-Request header to all API calls
+  function ecFetch(url, init) {
+    init = init || {};
+    init.headers = Object.assign({ "X-EmDash-Request": "1" }, init.headers || {});
+    return fetch(url, init);
+  }
+
+  // --- Save status tracking ---
+  var saveState = "idle"; // idle | unsaved | saving | saved | error
+  var saveHideTimer = null;
+
+  function setSaveState(state) {
+    saveState = state;
+    clearTimeout(saveHideTimer);
+
+    switch (state) {
+      case "unsaved":
+        saveStatusEl.innerHTML = '<span class="emdash-tb-badge emdash-tb-badge--unsaved">Unsaved</span>';
+        break;
+      case "saving":
+        saveStatusEl.innerHTML = '<span class="emdash-tb-badge emdash-tb-badge--saving">Saving\u2026</span>';
+        break;
+      case "saved":
+        saveStatusEl.innerHTML = '<span class="emdash-tb-badge emdash-tb-badge--saved">Saved</span>';
+        saveHideTimer = setTimeout(function() {
+          saveStatusEl.innerHTML = "";
+          saveState = "idle";
+        }, 2000);
+        break;
+      case "error":
+        saveStatusEl.innerHTML = '<span class="emdash-tb-badge emdash-tb-badge--error">Save failed</span>';
+        saveHideTimer = setTimeout(function() {
+          saveStatusEl.innerHTML = "";
+          saveState = "idle";
+        }, 3000);
+        break;
+      default:
+        saveStatusEl.innerHTML = "";
+    }
+  }
+
+  // Listen for save events from inline editors (e.g. PT editor)
+  document.addEventListener("emdash:save", function(e) {
+    var detail = e.detail || {};
+    if (detail.state) {
+      setSaveState(detail.state);
+    }
+  });
+
+  document.addEventListener("emdash:content-changed", function(e) {
+    var detail = e.detail || {};
+    if (detail.collection && detail.id) {
+      showUnpublishedChanges(detail.collection, detail.id);
+    }
+  });
+
+  // --- Entry status ---
+  var entryRef = null;
+
+  function updateStatus() {
+    if (!isEditMode) {
+      statusEl.innerHTML = "";
+      publishBtn.style.display = "none";
+      return;
+    }
+
+    var first = document.querySelector("[data-emdash-ref]");
+    if (!first) {
+      statusEl.innerHTML = "";
+      publishBtn.style.display = "none";
+      return;
+    }
+
+    try {
+      var ref = JSON.parse(first.getAttribute("data-emdash-ref"));
+      entryRef = ref;
+      if (!ref.status) return;
+
+      // Show admin link
+      var adminLink = document.getElementById("emdash-tb-admin");
+      if (adminLink) {
+        adminLink.href = "/_emdash/admin/content/" + encodeURIComponent(ref.collection) + "/" + encodeURIComponent(ref.id);
+        adminLink.style.display = "";
+      }
+
+      if (ref.status === "draft") {
+        statusEl.innerHTML = '<span class="emdash-tb-badge emdash-tb-badge--draft">Draft</span>';
+        publishBtn.style.display = "";
+        publishBtn.onclick = function() { publish(ref.collection, ref.id); };
+      } else if (ref.status === "published" && ref.hasDraft) {
+        statusEl.innerHTML = '<span class="emdash-tb-badge emdash-tb-badge--pending">Unpublished changes</span>';
+        publishBtn.style.display = "";
+        publishBtn.onclick = function() { publish(ref.collection, ref.id); };
+      } else if (ref.status === "published") {
+        statusEl.innerHTML = '<span class="emdash-tb-badge emdash-tb-badge--published">Published</span>';
+        publishBtn.style.display = "none";
+      }
+    } catch (e) {
+      // ignore parse errors
+    }
+  }
+
+  // Publish action
+  function publish(collection, id) {
+    publishBtn.disabled = true;
+    publishBtn.textContent = "Publishing\u2026";
+
+    ecFetch("/_emdash/api/content/" + encodeURIComponent(collection) + "/" + encodeURIComponent(id) + "/publish", {
+      method: "POST",
+      credentials: "same-origin",
+    })
+    .then(function(res) {
+      if (res.ok) {
+        if (document.startViewTransition) {
+          document.startViewTransition(function() { location.reload(); });
+        } else {
+          location.reload();
+        }
+      } else {
+        publishBtn.disabled = false;
+        publishBtn.textContent = "Publish";
+        console.error("Publish failed:", res.status);
+      }
+    })
+    .catch(function(err) {
+      publishBtn.disabled = false;
+      publishBtn.textContent = "Publish";
+      console.error("Publish failed:", err);
+    });
+  }
+
+  // Edit mode toggle
+  toggle.addEventListener("change", function() {
+    if (toggle.checked) {
+      document.cookie = "emdash-edit-mode=true;path=/;samesite=lax";
+    } else {
+      document.cookie = "emdash-edit-mode=;path=/;expires=Thu, 01 Jan 1970 00:00:00 GMT";
+    }
+
+    if (document.startViewTransition) {
+      document.startViewTransition(function() { location.replace(location.href); });
+    } else {
+      location.replace(location.href);
+    }
+  });
+
+  // --- Inline editing ---
+
+  // Cached manifest (fetched once on first edit click)
+  var manifestCache = null;
+  var manifestPromise = null;
+
+  function fetchManifest() {
+    if (manifestCache) return Promise.resolve(manifestCache);
+    if (manifestPromise) return manifestPromise;
+    manifestPromise = ecFetch("/_emdash/api/manifest", { credentials: "same-origin" })
+      .then(function(r) { return r.json(); })
+      .then(function(m) { manifestCache = m; return m; });
+    return manifestPromise;
+  }
+
+  function getFieldKind(manifest, collection, field) {
+    var col = manifest.collections && manifest.collections[collection];
+    if (!col || !col.fields) return null;
+    var f = col.fields[field];
+    return f ? f.kind : null;
+  }
+
+  // Save a single field value
+  function saveField(collection, id, field, value) {
+    setSaveState("saving");
+    return ecFetch("/_emdash/api/content/" + encodeURIComponent(collection) + "/" + encodeURIComponent(id), {
+      method: "PUT",
+      credentials: "same-origin",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ data: { [field]: value } }),
+    })
+    .then(function(res) {
+      if (res.ok) {
+        setSaveState("saved");
+        // A save creates/updates a draft — show unpublished changes
+        showUnpublishedChanges(collection, id);
+      } else {
+        setSaveState("error");
+        console.error("Save failed:", res.status);
+      }
+    })
+    .catch(function(err) {
+      setSaveState("error");
+      console.error("Save failed:", err);
+    });
+  }
+
+  function showUnpublishedChanges(collection, id) {
+    statusEl.innerHTML = '<span class="emdash-tb-badge emdash-tb-badge--pending">Unpublished changes</span>';
+    publishBtn.style.display = "";
+    publishBtn.disabled = false;
+    publishBtn.textContent = "Publish";
+    publishBtn.onclick = function() { publish(collection, id); };
+  }
+
+  // Plain text inline editing (contenteditable)
+  var currentlyEditing = null;
+
+  function startTextEdit(element, annotation) {
+    if (currentlyEditing === element) return;
+    if (currentlyEditing) endCurrentEdit();
+
+    currentlyEditing = element;
+    var originalText = element.textContent || "";
+
+    element.setAttribute("data-emdash-editing", "");
+    element.contentEditable = "plaintext-only";
+    element.focus();
+
+    // Select all text
+    var range = document.createRange();
+    range.selectNodeContents(element);
+    var sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(range);
+
+    // Track dirty state via input events
+    function handleInput() {
+      var current = (element.textContent || "").trim();
+      if (current !== originalText.trim()) {
+        setSaveState("unsaved");
+      } else {
+        setSaveState("idle");
+      }
+    }
+
+    function handleBlur() {
+      element.removeEventListener("blur", handleBlur);
+      element.removeEventListener("keydown", handleKeydown);
+      element.removeEventListener("input", handleInput);
+      element.contentEditable = "false";
+      element.removeAttribute("data-emdash-editing");
+      currentlyEditing = null;
+
+      var newValue = (element.textContent || "").trim();
+      if (newValue !== originalText.trim()) {
+        saveField(annotation.collection, annotation.id, annotation.field, newValue);
+      } else {
+        setSaveState("idle");
+      }
+    }
+
+    function handleKeydown(e) {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        element.blur();
+      }
+      if (e.key === "Escape") {
+        element.textContent = originalText;
+        setSaveState("idle");
+        element.blur();
+      }
+    }
+
+    element.addEventListener("input", handleInput);
+    element.addEventListener("blur", handleBlur);
+    element.addEventListener("keydown", handleKeydown);
+  }
+
+  function endCurrentEdit() {
+    if (currentlyEditing) {
+      currentlyEditing.blur();
+    }
+  }
+
+  // Fallback: open admin
+  function openAdmin(annotation) {
+    var url = "/_emdash/admin/content/" + encodeURIComponent(annotation.collection) + "/" + encodeURIComponent(annotation.id);
+    if (annotation.field) {
+      url += "?field=" + encodeURIComponent(annotation.field);
+    }
+    window.open(url, "emdash-admin");
+  }
+
+  // --- Inline image editing ---
+  var activeImagePopover = null;
+
+  function closeImagePopover() {
+    if (activeImagePopover) {
+      activeImagePopover.backdrop.remove();
+      activeImagePopover.popover.remove();
+      if (activeImagePopover.escapeHandler) {
+        document.removeEventListener("keydown", activeImagePopover.escapeHandler);
+      }
+      activeImagePopover = null;
+    }
+  }
+
+  function startImageEdit(element, annotation) {
+    closeImagePopover();
+
+    // Find the current image value by fetching the entry
+    var collection = annotation.collection;
+    var id = annotation.id;
+    var field = annotation.field;
+
+    // Find img element inside the annotated container (or the element itself if it's an img)
+    var imgEl = element.tagName === "IMG" ? element : element.querySelector("img");
+
+    // Fetch current field value from the content API
+    ecFetch("/_emdash/api/content/" + encodeURIComponent(collection) + "/" + encodeURIComponent(id), {
+      credentials: "same-origin"
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(entry) {
+      var currentValue = entry.data && entry.data[field];
+      showImagePopover(element, imgEl, annotation, currentValue);
+    })
+    .catch(function() {
+      // If fetch fails, still show popover with what we can infer from DOM
+      showImagePopover(element, imgEl, annotation, null);
+    });
+  }
+
+  function showImagePopover(element, imgEl, annotation, currentValue) {
+    closeImagePopover();
+
+    var collection = annotation.collection;
+    var id = annotation.id;
+    var field = annotation.field;
+
+    // Position near the element
+    var rect = element.getBoundingClientRect();
+    var viewportH = window.innerHeight;
+    var viewportW = window.innerWidth;
+
+    // Create backdrop for click-outside-to-close
+    var backdrop = document.createElement("div");
+    backdrop.className = "emdash-img-popover-backdrop";
+    backdrop.addEventListener("click", function(e) {
+      if (e.target === backdrop) closeImagePopover();
+    });
+
+    // Create popover
+    var popover = document.createElement("div");
+    popover.className = "emdash-img-popover";
+
+    var currentSrc = currentValue ? (currentValue.previewUrl || currentValue.src) : (imgEl ? imgEl.src : null);
+    var currentAlt = currentValue ? (currentValue.alt || "") : (imgEl ? (imgEl.alt || "") : "");
+
+    // Build popover HTML
+    var html = '';
+    html += '<div class="emdash-img-popover-header">';
+    html += '  <span class="emdash-img-popover-title">Image</span>';
+    html += '  <button class="emdash-img-popover-close" data-action="close">&times;</button>';
+    html += '</div>';
+    html += '<div class="emdash-img-popover-body" id="emdash-img-main">';
+
+    if (currentSrc) {
+      html += '<img class="emdash-img-preview" src="' + escapeAttr(currentSrc) + '" alt="" />';
+    } else {
+      html += '<div class="emdash-img-empty">No image selected</div>';
+    }
+
+    html += '<div class="emdash-img-field">';
+    html += '  <label for="emdash-img-alt">Alt text</label>';
+    html += '  <input type="text" id="emdash-img-alt" value="' + escapeAttr(currentAlt) + '" placeholder="Describe the image" />';
+    html += '</div>';
+
+    html += '<div class="emdash-img-actions">';
+    html += '  <button class="emdash-img-btn emdash-img-btn--primary" data-action="browse">Replace</button>';
+    html += '  <label class="emdash-img-btn" style="cursor:pointer">';
+    html += '    Upload';
+    html += '    <input type="file" accept="image/*" id="emdash-img-upload" style="display:none" />';
+    html += '  </label>';
+    if (currentSrc) {
+      html += '  <button class="emdash-img-btn emdash-img-btn--danger" data-action="remove">Remove</button>';
+    }
+    html += '</div>';
+    html += '</div>';
+
+    popover.innerHTML = html;
+
+    backdrop.appendChild(popover);
+    document.body.appendChild(backdrop);
+
+    // Position the popover
+    positionPopover(popover, rect, viewportW, viewportH);
+
+    // Escape key handler
+    function handleEscape(e) {
+      if (e.key === "Escape") {
+        closeImagePopover();
+        document.removeEventListener("keydown", handleEscape);
+      }
+    }
+    document.addEventListener("keydown", handleEscape);
+
+    activeImagePopover = {
+      backdrop: backdrop,
+      popover: popover,
+      annotation: annotation,
+      currentValue: currentValue,
+      element: element,
+      imgEl: imgEl,
+      escapeHandler: handleEscape
+    };
+
+    // Event handlers
+    popover.querySelector('[data-action="close"]').addEventListener("click", closeImagePopover);
+
+    popover.querySelector('[data-action="browse"]').addEventListener("click", function() {
+      showMediaBrowser(popover, annotation, currentValue, element, imgEl);
+    });
+
+    var uploadInput = popover.querySelector("#emdash-img-upload");
+    uploadInput.addEventListener("change", function(e) {
+      var file = e.target.files && e.target.files[0];
+      if (file) handleImageUpload(file, popover, annotation, element, imgEl);
+    });
+
+    var removeBtn = popover.querySelector('[data-action="remove"]');
+    if (removeBtn) {
+      removeBtn.addEventListener("click", function() {
+        saveField(collection, id, field, null).then(function() {
+          if (imgEl) {
+            imgEl.style.display = "none";
+          }
+          closeImagePopover();
+        });
+      });
+    }
+
+    // Save alt text on change (debounced)
+    var altInput = popover.querySelector("#emdash-img-alt");
+    var altTimer = null;
+    altInput.addEventListener("input", function() {
+      clearTimeout(altTimer);
+      altTimer = setTimeout(function() {
+        var newAlt = altInput.value;
+        if (currentValue) {
+          var updated = Object.assign({}, currentValue, { alt: newAlt });
+          saveField(collection, id, field, updated);
+          if (imgEl) imgEl.alt = newAlt;
+        }
+      }, 500);
+    });
+
+    // Handle drag and drop on the popover body
+    var body = popover.querySelector(".emdash-img-popover-body");
+    body.addEventListener("dragover", function(e) {
+      e.preventDefault();
+      body.classList.add("emdash-img-drop");
+    });
+    body.addEventListener("dragleave", function() {
+      body.classList.remove("emdash-img-drop");
+    });
+    body.addEventListener("drop", function(e) {
+      e.preventDefault();
+      body.classList.remove("emdash-img-drop");
+      var file = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
+      if (file && file.type.startsWith("image/")) {
+        handleImageUpload(file, popover, annotation, element, imgEl);
+      }
+    });
+  }
+
+  function positionPopover(popover, targetRect, viewportW, viewportH) {
+    var popoverW = 320;
+    var gap = 8;
+
+    // Try to place to the right of the element
+    var left = targetRect.right + gap;
+    var top = targetRect.top;
+
+    // If it overflows right, place to the left
+    if (left + popoverW > viewportW - 16) {
+      left = targetRect.left - popoverW - gap;
+    }
+    // If it still overflows (narrow viewport), center below
+    if (left < 16) {
+      left = Math.max(16, (viewportW - popoverW) / 2);
+      top = targetRect.bottom + gap;
+    }
+    // Clamp vertically
+    if (top + 400 > viewportH - 80) { // 80 for toolbar
+      top = Math.max(16, viewportH - 480);
+    }
+    if (top < 16) top = 16;
+
+    popover.style.left = left + "px";
+    popover.style.top = top + "px";
+  }
+
+  function escapeAttr(str) {
+    return String(str || "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+
+  function showMediaBrowser(popover, annotation, currentValue, element, imgEl) {
+    var mainBody = popover.querySelector("#emdash-img-main");
+    if (mainBody) mainBody.style.display = "none";
+
+    // Remove existing browser if any
+    var existing = popover.querySelector(".emdash-img-browser");
+    if (existing) existing.remove();
+
+    var browser = document.createElement("div");
+    browser.className = "emdash-img-browser";
+
+    browser.innerHTML = '<div class="emdash-img-browser-header">' +
+      '<span class="emdash-img-browser-title">Media Library</span>' +
+      '<button class="emdash-img-browser-back">Back</button>' +
+      '</div>' +
+      '<div class="emdash-img-loading">Loading\u2026</div>';
+
+    popover.appendChild(browser);
+
+    browser.querySelector(".emdash-img-browser-back").addEventListener("click", function() {
+      browser.remove();
+      if (mainBody) mainBody.style.display = "";
+    });
+
+    // Fetch media
+    ecFetch("/_emdash/api/media?mimeType=image/&limit=30", { credentials: "same-origin" })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      var items = data.items || [];
+      var loadingEl = browser.querySelector(".emdash-img-loading");
+      if (loadingEl) loadingEl.remove();
+
+      if (items.length === 0) {
+        var empty = document.createElement("div");
+        empty.className = "emdash-img-loading";
+        empty.textContent = "No images found";
+        browser.appendChild(empty);
+        return;
+      }
+
+      var grid = document.createElement("div");
+      grid.className = "emdash-img-grid";
+
+      items.forEach(function(item) {
+        var thumb = document.createElement("div");
+        thumb.className = "emdash-img-grid-item";
+        if (currentValue && currentValue.id === item.id) {
+          thumb.classList.add("emdash-img-grid-item--selected");
+        }
+        var thumbUrl = item.url || item.previewUrl || ("/_emdash/api/media/file/" + item.storageKey);
+        thumb.innerHTML = '<img src="' + escapeAttr(thumbUrl) + '" alt="' + escapeAttr(item.alt || item.filename || "") + '" loading="lazy" />';
+
+        thumb.addEventListener("click", function() {
+          selectMediaItem(item, annotation, element, imgEl);
+        });
+
+        grid.appendChild(thumb);
+      });
+
+      browser.appendChild(grid);
+    })
+    .catch(function(err) {
+      var loadingEl = browser.querySelector(".emdash-img-loading");
+      if (loadingEl) loadingEl.textContent = "Failed to load media";
+      console.error("Media fetch error:", err);
+    });
+  }
+
+  function selectMediaItem(item, annotation, element, imgEl) {
+    var collection = annotation.collection;
+    var id = annotation.id;
+    var field = annotation.field;
+
+    var isLocal = !item.provider || item.provider === "local";
+    var itemUrl = item.url || item.previewUrl || ("/_emdash/api/media/file/" + item.storageKey);
+
+    var newValue = {
+      id: item.id,
+      provider: item.provider || "local",
+      src: isLocal ? itemUrl : undefined,
+      previewUrl: isLocal ? undefined : itemUrl,
+      alt: item.alt || "",
+      width: item.width,
+      height: item.height,
+      meta: item.meta
+    };
+
+    // Clean undefined fields
+    Object.keys(newValue).forEach(function(k) {
+      if (newValue[k] === undefined) delete newValue[k];
+    });
+
+    saveField(collection, id, field, newValue).then(function() {
+      // Update the image in the DOM
+      if (imgEl) {
+        imgEl.src = itemUrl;
+        imgEl.alt = item.alt || "";
+        imgEl.style.display = "";
+      }
+      closeImagePopover();
+    });
+  }
+
+  function handleImageUpload(file, popover, annotation, element, imgEl) {
+    var collection = annotation.collection;
+    var id = annotation.id;
+    var field = annotation.field;
+
+    // Show uploading state
+    var mainBody = popover.querySelector("#emdash-img-main");
+    var browserEl = popover.querySelector(".emdash-img-browser");
+    if (browserEl) browserEl.remove();
+    if (mainBody) {
+      mainBody.innerHTML = '<div class="emdash-img-uploading">' +
+        '<span>Uploading ' + escapeAttr(file.name) + '\u2026</span>' +
+        '</div>';
+      mainBody.style.display = "";
+    }
+
+    // Detect dimensions before upload
+    var dimPromise = new Promise(function(resolve) {
+      if (!file.type.startsWith("image/")) return resolve({});
+      var img = new Image();
+      img.onload = function() {
+        resolve({ width: img.naturalWidth, height: img.naturalHeight });
+        URL.revokeObjectURL(img.src);
+      };
+      img.onerror = function() {
+        resolve({});
+        URL.revokeObjectURL(img.src);
+      };
+      img.src = URL.createObjectURL(file);
+    });
+
+    dimPromise.then(function(dims) {
+      var formData = new FormData();
+      formData.append("file", file);
+      if (dims.width) formData.append("width", String(dims.width));
+      if (dims.height) formData.append("height", String(dims.height));
+
+      return ecFetch("/_emdash/api/media", {
+        method: "POST",
+        credentials: "same-origin",
+        body: formData
+      });
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (!data.item) throw new Error("Upload failed");
+      var item = data.item;
+      selectMediaItem(item, annotation, element, imgEl);
+    })
+    .catch(function(err) {
+      console.error("Upload error:", err);
+      setSaveState("error");
+      closeImagePopover();
+    });
+  }
+
+  // Click handler for edit mode
+  if (isEditMode) {
+    document.addEventListener("click", function(e) {
+      var target = e.target;
+
+      // Don't intercept clicks on elements currently being edited
+      if (target.hasAttribute && target.hasAttribute("data-emdash-editing")) return;
+
+      // Walk up to find annotated element
+      while (target && target !== document.body) {
+        if (target.hasAttribute && target.hasAttribute("data-emdash-editing")) return;
+
+        var ref = target.getAttribute && target.getAttribute("data-emdash-ref");
+        if (ref) {
+          e.preventDefault();
+          e.stopPropagation();
+
+          try {
+            var annotation = JSON.parse(ref);
+
+            // Entry-level annotation (no field) — ignore, it's a container
+            if (!annotation.field) return;
+
+            // Fetch manifest to determine field type, then dispatch
+            fetchManifest().then(function(manifest) {
+              var kind = getFieldKind(manifest, annotation.collection, annotation.field);
+
+              // Close any open image popover before starting a new edit
+              closeImagePopover();
+
+              if (kind === "string" || kind === "text") {
+                startTextEdit(target, annotation);
+              } else if (kind === "image") {
+                startImageEdit(target, annotation);
+              } else {
+                // Fallback: open admin for unsupported types
+                openAdmin(annotation);
+              }
+            });
+          } catch (err) {
+            console.error("Failed to parse emdash ref:", err);
+          }
+          return;
+        }
+        target = target.parentElement;
+      }
+    }, true);
+  }
+
+  updateStatus();
+})();
+</script>
+`;
+}