@preprio/toolkit 0.5.0-rc.1 → 0.5.0-rc.3

package/dist/nextjs/components.cjs

@@ -96,6 +96,40 @@ var ALL_FEATURES_ENABLED = Object.freeze({
   editMode: true
 });
 
+// src/core/locales/de.json
+var de_default = {
+  common: {
+    viewingAs: "Ansicht als:",
+    user: "Benutzer",
+    off: "Aus",
+    on: "An",
+    reset: "Zur\xFCcksetzen",
+    toolbar: "Symbolleiste"
+  },
+  adaptiveContent: {
+    adaptiveContent: "Adaptive Inhalte",
+    enablePreview: "Vorschaumodus",
+    segment: "Segment",
+    ABVariant: "A/B-Variante",
+    chooseSegment: "Segment w\xE4hlen",
+    searchSegments: "Segmente suchen",
+    none: "Keine Segmente",
+    allOtherUsers: "Alle anderen Benutzer",
+    offDescription: "Die Website als echter Benutzer ansehen (Cookies verwenden)",
+    onDescription: "Mit der Symbolleiste Segmente und A/B-Varianten simulieren"
+  },
+  editingTools: {
+    editingTools: "Bearbeitungswerkzeuge",
+    editMode: "Bearbeitungsmodus",
+    ariaCloseEditMode: "Bearbeitungsmodus schlie\xDFen"
+  },
+  visualEditor: {
+    edit: "Bearbeiten",
+    otherItem: "anderes Element",
+    linkedItem: "verkn\xFCpftes Element"
+  }
+};
+
 // src/core/locales/en.json
 var en_default = {
   common: {
@@ -122,6 +156,45 @@ var en_default = {
     editingTools: "Editing tools",
     editMode: "Edit mode",
     ariaCloseEditMode: "Close edit mode"
+  },
+  visualEditor: {
+    edit: "Edit",
+    otherItem: "other item",
+    linkedItem: "linked item"
+  }
+};
+
+// src/core/locales/fr.json
+var fr_default = {
+  common: {
+    viewingAs: "Affichage en tant que :",
+    user: "Utilisateur",
+    off: "D\xE9sactiv\xE9",
+    on: "Activ\xE9",
+    reset: "R\xE9initialiser",
+    toolbar: "Barre d'outils"
+  },
+  adaptiveContent: {
+    adaptiveContent: "Contenu adaptatif",
+    enablePreview: "Mode aper\xE7u",
+    segment: "Segment",
+    ABVariant: "Variante A/B",
+    chooseSegment: "Choisir un segment",
+    searchSegments: "Rechercher des segments",
+    none: "Aucun segment",
+    allOtherUsers: "Tous les autres utilisateurs",
+    offDescription: "Voir le site comme un vrai utilisateur (utiliser les cookies)",
+    onDescription: "Utilisez la barre d'outils pour simuler des segments et des variantes A/B"
+  },
+  editingTools: {
+    editingTools: "Outils d'\xE9dition",
+    editMode: "Mode \xE9dition",
+    ariaCloseEditMode: "Fermer le mode \xE9dition"
+  },
+  visualEditor: {
+    edit: "Modifier",
+    otherItem: "autre \xE9l\xE9ment",
+    linkedItem: "\xE9l\xE9ment li\xE9"
   }
 };
 
@@ -151,13 +224,20 @@ var nl_default = {
     editingTools: "Editing Tools",
     editMode: "Edit mode",
     ariaCloseEditMode: "Edit mode sluiten"
+  },
+  visualEditor: {
+    edit: "Bewerken",
+    otherItem: "ander item",
+    linkedItem: "gekoppeld item"
   }
 };
 
 // src/core/i18n.ts
 var dictionaries = {
   en: en_default,
-  nl: nl_default
+  nl: nl_default,
+  fr: fr_default,
+  de: de_default
 };
 var LOCALES = Object.keys(dictionaries);
 function isLocale(value) {
@@ -250,52 +330,53 @@ function createScopedLogger(scopeName) {
     prefix: `[Prepr][${scopeName}]`
   });
 }
-function throttle(func, delay) {
-  let timeoutId = null;
-  let lastExecTime = 0;
-  const throttledFunc = ((...args) => {
-    const currentTime = Date.now();
-    const timeSinceLastExec = currentTime - lastExecTime;
-    if (timeSinceLastExec >= delay) {
-      func(...args);
-      lastExecTime = currentTime;
-    } else {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      timeoutId = setTimeout(() => {
-        func(...args);
-        lastExecTime = Date.now();
-        timeoutId = null;
-      }, delay - timeSinceLastExec);
-    }
-  });
-  throttledFunc.cancel = () => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-      timeoutId = null;
-    }
-  };
-  return throttledFunc;
-}
-function createElementCache(query, ttl = 1e3) {
-  let cache = null;
-  let lastCacheTime = 0;
-  return () => {
-    const now = Date.now();
-    if (!cache || now - lastCacheTime > ttl) {
-      cache = document.querySelectorAll(query);
-      lastCacheTime = now;
-    }
-    return cache;
-  };
-}
 
 // src/core/iframe-bridge.ts
 var debug = createScopedLogger("iframe-bridge");
+var MAX_REFERENCES = 500;
+var MAX_HREF_LENGTH = 8192;
+var MAX_ASSETS = 500;
+var MAX_ASSET_KEY_LENGTH = 2048;
+var MAX_ASSET_FIELD_LENGTH = 512;
+function parseIds(value) {
+  if (!Array.isArray(value)) return void 0;
+  return value.slice(0, MAX_REFERENCES).filter((id) => typeof id === "string" && id.length > 0);
+}
+function parseReferences(value) {
+  if (!Array.isArray(value)) return void 0;
+  const list = [];
+  for (const entry of value.slice(0, MAX_REFERENCES)) {
+    const id = entry?.id;
+    const field = entry?.field;
+    if (typeof id === "string" && id && typeof field === "string" && field) {
+      list.push({ id, field });
+    }
+  }
+  return list;
+}
+function boundedString(value, max) {
+  return typeof value === "string" && value && value.length <= max ? value : void 0;
+}
+function parseAssets(value) {
+  if (!Array.isArray(value)) return void 0;
+  const list = [];
+  for (const entry of value.slice(0, MAX_ASSETS)) {
+    if (!entry || typeof entry !== "object") continue;
+    const raw = entry;
+    const key = boundedString(raw.key, MAX_ASSET_KEY_LENGTH);
+    const field = boundedString(raw.field, MAX_ASSET_FIELD_LENGTH);
+    if (!key || !field) continue;
+    const entryId = boundedString(raw.entryId, MAX_ASSET_FIELD_LENGTH);
+    list.push(entryId ? { key, field, entryId } : { key, field });
+  }
+  return list;
+}
 var EDITOR_BASE_DOMAIN = "prepr.io";
 function isAllowedEditorOrigin(origin, allowed) {
-  if (allowed) return allowed.includes(origin);
+  if (allowed) {
+    if (allowed.includes("*")) return origin !== "null";
+    return allowed.includes(origin);
+  }
   let url;
   try {
     url = new URL(origin);
@@ -311,6 +392,10 @@ function isAllowedEditorOrigin(origin, allowed) {
 function createIframeBridge(store, options = {}) {
   const allowedOrigins = options.allowedEditorOrigins;
   const onScrollToField = options.onScrollToField;
+  const onHandshake = options.onHandshake;
+  const onReferences = options.onReferences;
+  const onAssets = options.onAssets;
+  const onAllowNavigation = options.onAllowNavigation;
   let parentOrigin = null;
   const onKeyDown = (event) => {
     const key = event.key.toLowerCase();
@@ -320,7 +405,10 @@ function createIframeBridge(store, options = {}) {
   const onMessage = (evt) => {
     const data = evt?.data;
     if (data?.event === "prepr:initVE" && !parentOrigin) {
-      if (!isAllowedEditorOrigin(evt.origin, allowedOrigins)) return;
+      if (!isAllowedEditorOrigin(evt.origin, allowedOrigins)) {
+        debug.warn("ignored editor handshake from origin", evt.origin);
+        return;
+      }
       parentOrigin = evt.origin;
       setTrustedParentOrigin(parentOrigin);
       if (data.scrollPosition != null) {
@@ -328,8 +416,43 @@ function createIframeBridge(store, options = {}) {
         setTimeout(() => window.scrollTo(0, top), 1);
       }
       store?.set({ previewMode: true, editMode: data.editMode ?? true });
+      const itemId = typeof data.itemId === "string" && data.itemId ? data.itemId : void 0;
+      const referencedIds = parseReferences(data.referencedIds);
+      const componentIds = parseIds(data.componentIds);
+      const uiLocale = isLocale(data.uiLocale) ? data.uiLocale : void 0;
+      const navigationGuard = data.navigationGuard === true;
+      const assets = parseAssets(data.assets);
+      try {
+        onHandshake?.({
+          ...itemId && { itemId },
+          ...referencedIds && { referencedIds },
+          ...componentIds && { componentIds },
+          ...uiLocale && { uiLocale },
+          ...navigationGuard && { navigationGuard },
+          ...assets && { assets }
+        });
+      } catch (error) {
+        debug.warn("handshake handler failed", error);
+      }
     }
     if (!parentOrigin || evt.origin !== parentOrigin) return;
+    if (data?.event === "prepr:references") {
+      const assets = parseAssets(data.assets);
+      if (assets) {
+        try {
+          onAssets?.(assets);
+        } catch (error) {
+          debug.warn("assets handler failed", error);
+        }
+      }
+      const referencedIds = parseReferences(data.referencedIds);
+      if (!referencedIds) return;
+      try {
+        onReferences?.(referencedIds, parseIds(data.componentIds));
+      } catch (error) {
+        debug.warn("references handler failed", error);
+      }
+    }
     if (data?.event === "prepr:getScrollPosition") {
       const currentScrollY = window.scrollY || document.documentElement.scrollTop;
       sendPreprEvent("getScrollPosition", { value: currentScrollY });
@@ -337,12 +460,32 @@ function createIframeBridge(store, options = {}) {
     if (data?.event === "prepr:scrollToField") {
       if (typeof data.field !== "string" || !data.field) return;
       if (data.id !== void 0 && typeof data.id !== "string") return;
+      const block = typeof data.block === "number" && Number.isInteger(data.block) ? data.block : void 0;
+      const entryId = typeof data.entryId === "string" && data.entryId ? data.entryId : void 0;
+      const fieldById = typeof data.fieldById === "string" && data.fieldById ? data.fieldById : void 0;
       try {
-        onScrollToField?.({ field: data.field, id: data.id });
+        onScrollToField?.({
+          field: data.field,
+          id: data.id,
+          block,
+          entryId,
+          fieldById
+        });
       } catch (error) {
         debug.warn("scrollToField handler failed", error);
       }
     }
+    if (data?.event === "prepr:allowNavigation") {
+      const href = data.href;
+      if (typeof href !== "string" || !href || href.length > MAX_HREF_LENGTH) {
+        return;
+      }
+      try {
+        onAllowNavigation?.(href);
+      } catch (error) {
+        debug.warn("allowNavigation handler failed", error);
+      }
+    }
   };
   return {
     start() {
@@ -446,29 +589,43 @@ function tagEncodedElement(element, decoded) {
   element.setAttribute("data-prepr-origin", decoded.origin);
   const { id, field, locale } = parseEditHref(decoded.href);
   setOrRemove(element, "data-prepr-id", id);
-  setOrRemove(element, "data-prepr-field", field);
+  const fieldHint = element.getAttribute("data-prepr-edit-target")?.trim() || void 0;
+  setOrRemove(element, "data-prepr-field", field ?? fieldHint);
   setOrRemove(element, "data-prepr-locale", locale);
 }
+function readEditPayload(element) {
+  return {
+    href: element.getAttribute("data-prepr-href") ?? "",
+    origin: element.getAttribute("data-prepr-origin") ?? "",
+    id: element.getAttribute("data-prepr-id") ?? void 0,
+    field: element.getAttribute("data-prepr-field") ?? void 0,
+    locale: element.getAttribute("data-prepr-locale") ?? void 0,
+    entryId: element.getAttribute("data-prepr-entry-id") || void 0
+  };
+}
 
 // src/core/stega/auto-clean.ts
 var debug3 = createScopedLogger("stega:auto-clean");
+var cleanedNodes = /* @__PURE__ */ new WeakMap();
 function createStegaAutoClean(options) {
   const stripText = options?.enabled ?? true;
   let observer = null;
   let processing = false;
-  let cleaned = /* @__PURE__ */ new WeakMap();
   let pendingHidden = /* @__PURE__ */ new Set();
   let pendingDirty = /* @__PURE__ */ new Set();
   let debounceTimeout = null;
   function cleanTextNode(textNode) {
     if (isIgnoredTextNode(textNode)) return false;
     const textContent = textNode.textContent;
-    const info = cleaned.get(textNode);
+    const info = cleanedNodes.get(textNode);
     const settled = stripText ? info?.cleaned : info?.original;
     if (info && textContent === settled) {
       if (!info.decoded) return false;
       const shown = resolveEditTarget(textNode);
-      if (!shown) return false;
+      if (!shown) {
+        pendingHidden.add(textNode);
+        return false;
+      }
       pendingHidden.delete(textNode);
       if (shown.hasAttribute("data-prepr-encoded")) return false;
       tagEncodedElement(shown, info.decoded);
@@ -479,7 +636,7 @@ function createStegaAutoClean(options) {
       if (!encoded || stripped === textContent) return false;
       const decoded = decodeStega(textContent);
       if (!decoded?.href && !stripText) return false;
-      cleaned.set(textNode, {
+      cleanedNodes.set(textNode, {
         original: textContent,
         cleaned: stripped,
         decoded: decoded?.href ? decoded : null
@@ -521,7 +678,7 @@ function createStegaAutoClean(options) {
       }
       if (mutation.type === "characterData" && mutation.target.nodeType === Node.TEXT_NODE) {
         const textNode = mutation.target;
-        const info = cleaned.get(textNode);
+        const info = cleanedNodes.get(textNode);
         const text = textNode.textContent ?? "";
         const settled = stripText ? info?.cleaned : info?.original;
         if (text !== settled && (0, import_stega2.vercelStegaSplit)(text).encoded) {
@@ -564,7 +721,16 @@ function createStegaAutoClean(options) {
       retryPendingHidden();
     }, 50);
   }
+  let resizeTimeout = null;
+  function handleResize() {
+    if (pendingHidden.size === 0 || resizeTimeout) return;
+    resizeTimeout = setTimeout(() => {
+      resizeTimeout = null;
+      retryPendingHidden();
+    }, 100);
+  }
   function setupObserver() {
+    window.addEventListener("resize", handleResize, { passive: true });
     observer = new MutationObserver(handleMutations);
     observer.observe(document.body, {
       childList: true,
@@ -587,11 +753,15 @@ function createStegaAutoClean(options) {
       clearTimeout(debounceTimeout);
       debounceTimeout = null;
     }
+    if (resizeTimeout) {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = null;
+    }
     if (observer) {
       observer.disconnect();
       observer = null;
+      window.removeEventListener("resize", handleResize);
     }
-    cleaned = /* @__PURE__ */ new WeakMap();
     pendingHidden = /* @__PURE__ */ new Set();
     pendingDirty = /* @__PURE__ */ new Set();
     debug3.log("stega auto-clean stopped");
@@ -599,6 +769,439 @@ function createStegaAutoClean(options) {
   return { start, stop };
 }
 
+// src/core/visual-editor/overlay.ts
+var HOST_TAG = "prepr-visual-editor";
+var SCROLL_SETTLE_MS = 120;
+var LABEL_SPACE_PX = 22;
+var BOX_PADDING_PX = 3;
+var LABEL_MARGIN_PX = 4;
+var PROBE_POINTS = [
+  [0.5, 0.5],
+  [0.15, 0.2],
+  [0.85, 0.2],
+  [0.15, 0.8],
+  [0.85, 0.8]
+];
+function overlapsBox(area, rect) {
+  return area.left < rect.right + BOX_PADDING_PX && area.right > rect.left - BOX_PADDING_PX && area.top < rect.bottom + BOX_PADDING_PX && area.bottom > rect.top - BOX_PADDING_PX;
+}
+function overlaps(a2, b2) {
+  return a2.left < b2.right && b2.left < a2.right && a2.top < b2.bottom && b2.top < a2.bottom;
+}
+function coverOf(hit, target, x2, y2) {
+  let cover = hit.getBoundingClientRect();
+  for (let el = hit.parentElement; el && !el.contains(target) && el !== document.body; el = el.parentElement) {
+    const r2 = el.getBoundingClientRect();
+    if (x2 < r2.left || x2 >= r2.right || y2 < r2.top || y2 >= r2.bottom) break;
+    cover = r2;
+  }
+  return cover;
+}
+function mergeAreas(areas) {
+  const merged = areas.slice();
+  for (let i2 = 0; i2 < merged.length; i2++) {
+    for (let j2 = i2 + 1; j2 < merged.length; j2++) {
+      if (!overlaps(merged[i2], merged[j2])) continue;
+      merged[i2] = {
+        left: Math.min(merged[i2].left, merged[j2].left),
+        top: Math.min(merged[i2].top, merged[j2].top),
+        right: Math.max(merged[i2].right, merged[j2].right),
+        bottom: Math.max(merged[i2].bottom, merged[j2].bottom)
+      };
+      merged.splice(j2, 1);
+      j2 = i2;
+    }
+  }
+  return merged;
+}
+function findCovers(target, rect) {
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  const covers = [];
+  const seen = /* @__PURE__ */ new Set();
+  let probed = false;
+  let reached = false;
+  for (const [fx, fy] of PROBE_POINTS) {
+    const x2 = rect.left + rect.width * fx;
+    const y2 = rect.top + rect.height * fy;
+    if (x2 < 0 || y2 < 0 || x2 >= width || y2 >= height) continue;
+    probed = true;
+    const hit = document.elementFromPoint(x2, y2);
+    if (!hit || hit === target || target.contains(hit)) {
+      reached = true;
+      continue;
+    }
+    if (seen.has(hit)) continue;
+    seen.add(hit);
+    if (covers.some(
+      (c2) => x2 >= c2.left && x2 < c2.right && y2 >= c2.top && y2 < c2.bottom
+    )) {
+      continue;
+    }
+    covers.push(coverOf(hit, target, x2, y2));
+  }
+  if (!probed) return [];
+  return reached ? mergeAreas(covers) : null;
+}
+function clipPath(x2, y2, covers) {
+  const far = 1e5;
+  const points = [
+    `${-far}px ${-far}px`,
+    `${far}px ${-far}px`,
+    `${far}px ${far}px`,
+    `${-far}px ${far}px`,
+    `${-far}px ${-far}px`
+  ];
+  for (const c2 of covers) {
+    const l2 = c2.left - x2;
+    const t3 = c2.top - y2;
+    const r2 = c2.right - x2;
+    const b2 = c2.bottom - y2;
+    points.push(
+      `${l2}px ${t3}px`,
+      `${r2}px ${t3}px`,
+      `${r2}px ${b2}px`,
+      `${l2}px ${b2}px`,
+      `${l2}px ${t3}px`,
+      `${-far}px ${-far}px`
+    );
+  }
+  return `polygon(evenodd, ${points.join(", ")})`;
+}
+var STYLES = `
+:host {
+  all: initial;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2147483646;
+  contain: strict;
+}
+.box {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  border-radius: 6px;
+  opacity: 0;
+  will-change: transform, width, height;
+  transition:
+    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    width 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    height 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    opacity 140ms ease;
+}
+.box[data-visible] { opacity: 1; }
+.box[data-instant], :host([data-scrolling]) .box {
+  transition: opacity 140ms ease;
+}
+.hover {
+  border: 1.5px solid rgba(79, 70, 229, 0.9);
+  background: rgba(79, 70, 229, 0.06);
+}
+.selected {
+  border: 2px solid #4f46e5;
+  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.18);
+}
+.label {
+  position: absolute;
+  left: -2px;
+  bottom: 100%;
+  margin-bottom: 4px;
+  padding: 3px 7px;
+  border-radius: 5px;
+  background: #4f46e5;
+  color: #fff;
+  font: 500 11px/1.3 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  display: flex;
+  max-width: 240px;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
+}
+.text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.hover .label { background: rgba(79, 70, 229, 0.92); }
+/* Content of another item than the one open in the editor: still clickable,
+   but visibly not part of the item being edited. */
+.hover[data-item-kind='other'] {
+  border: 1.5px dashed #a5b4fc;
+  background: rgba(100, 116, 139, 0.05);
+}
+.hover[data-item-kind='other'] .label { background: #64748b; }
+.hover[data-item-kind='referenced'] {
+  border: 1.5px solid #a5b4fc;
+  background: rgba(79, 70, 229, 0.03);
+}
+.hover[data-item-kind='referenced'] .label { background: #818cf8; }
+.box[data-label-covered] .label { visibility: hidden; }
+.box[data-label-inside] .label {
+  bottom: auto;
+  top: 2px;
+  left: 2px;
+  margin: 0;
+}
+/* A clickable hover label (edit mode on the live site). Only while shown, so
+   a fading box never leaves an invisible click target behind. */
+:host([data-label-action]) .hover[data-visible] .label {
+  pointer-events: auto;
+  cursor: pointer;
+}
+:host([data-label-action]) .hover .label::after {
+  content: '\\2197';
+  margin-left: 5px;
+}
+:host([data-label-action]) .hover .label:hover { background: #4338ca; }
+/* Bridges the gap between the label and its element, so the pointer can
+   travel from one to the other without the hover ending on the way. */
+:host([data-label-action]) .hover .label::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: ${LABEL_MARGIN_PX + BOX_PADDING_PX + 2}px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .box { transition: opacity 80ms linear; }
+}
+`;
+var VisualEditorOverlay = class {
+  constructor(options = {}) {
+    this.host = null;
+    this.hoverBox = null;
+    this.selectedBox = null;
+    this.frame = null;
+    this.scrollTimeout = null;
+    this.resizeObserver = null;
+    this.onLabelClick = options.onLabelClick;
+  }
+  mount() {
+    if (this.host) return;
+    const host = document.createElement(HOST_TAG);
+    const shadow = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = STYLES;
+    shadow.appendChild(style);
+    this.hoverBox = this.createBox(shadow, "hover");
+    this.selectedBox = this.createBox(shadow, "selected");
+    const onLabelClick = this.onLabelClick;
+    if (onLabelClick) {
+      host.setAttribute("data-label-action", "");
+      const hoverBox = this.hoverBox;
+      hoverBox.label.addEventListener("click", () => {
+        if (hoverBox.target) onLabelClick(hoverBox.target);
+      });
+    }
+    document.documentElement.appendChild(host);
+    this.host = host;
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => this.schedule());
+    }
+  }
+  unmount() {
+    if (this.frame !== null) cancelAnimationFrame(this.frame);
+    if (this.scrollTimeout) clearTimeout(this.scrollTimeout);
+    this.frame = null;
+    this.scrollTimeout = null;
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    this.host?.remove();
+    this.host = null;
+    this.hoverBox = null;
+    this.selectedBox = null;
+  }
+  /**
+   * Whether a pointer event target is this chrome: events from inside the
+   * shadow root reach the page retargeted to its host.
+   */
+  owns(node) {
+    return node !== null && node === this.host;
+  }
+  getHoverTarget() {
+    return this.hoverBox?.target ?? null;
+  }
+  getSelectedTarget() {
+    return this.selectedBox?.target ?? null;
+  }
+  setHover(target, label, options = {}) {
+    if (target) {
+      this.hoverBox?.root.setAttribute(
+        "data-item-kind",
+        options.kind ?? "current"
+      );
+    }
+    this.retarget(this.hoverBox, target, label);
+  }
+  setSelected(target, label) {
+    this.retarget(this.selectedBox, target, label);
+  }
+  /** Call on every scroll; positions follow in the next frame, untransitioned. */
+  onScroll() {
+    if (!this.host) return;
+    this.host.setAttribute("data-scrolling", "");
+    if (this.scrollTimeout) clearTimeout(this.scrollTimeout);
+    this.scrollTimeout = setTimeout(() => {
+      this.host?.removeAttribute("data-scrolling");
+      this.scrollTimeout = null;
+    }, SCROLL_SETTLE_MS);
+    this.schedule();
+  }
+  /** Re-measure both boxes in the next animation frame. */
+  schedule() {
+    if (this.frame !== null || !this.host) return;
+    this.frame = requestAnimationFrame(() => {
+      this.frame = null;
+      this.render();
+    });
+  }
+  createBox(shadow, kind) {
+    const root = document.createElement("div");
+    root.className = `box ${kind}`;
+    const label = document.createElement("div");
+    label.className = "label";
+    const text = document.createElement("span");
+    text.className = "text";
+    label.appendChild(text);
+    root.appendChild(label);
+    shadow.appendChild(root);
+    return { root, label, text, target: null };
+  }
+  retarget(box, target, label) {
+    if (!box || box.target === target) return;
+    const previous = box.target;
+    if (previous) this.resizeObserver?.unobserve(previous);
+    box.target = target;
+    if (target) {
+      this.resizeObserver?.observe(target);
+      box.text.textContent = label;
+      if (!box.root.hasAttribute("data-visible")) {
+        box.root.setAttribute("data-instant", "");
+      }
+    }
+    this.schedule();
+  }
+  render() {
+    const hover = this.hoverBox ? this.measure(this.hoverBox) : null;
+    const selected = this.selectedBox ? this.measure(this.selectedBox) : null;
+    if (this.hoverBox) this.paint(this.hoverBox, hover, selected);
+    if (this.selectedBox) this.paint(this.selectedBox, selected, hover);
+  }
+  measure(box) {
+    const target = box.target;
+    if (!target) return null;
+    if (!target.isConnected) {
+      this.resizeObserver?.unobserve(target);
+      box.target = null;
+      return null;
+    }
+    const rect = target.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) return null;
+    const covers = findCovers(target, rect);
+    if (!covers) return null;
+    return {
+      rect,
+      covers,
+      labelWidth: covers.length ? box.label.offsetWidth : 0,
+      labelHeight: covers.length ? box.label.offsetHeight : 0
+    };
+  }
+  paint(box, measurement, other = null) {
+    const root = box.root;
+    if (!measurement) {
+      root.removeAttribute("data-visible");
+      return;
+    }
+    const { rect, covers } = measurement;
+    const x2 = rect.left - BOX_PADDING_PX;
+    const y2 = rect.top - BOX_PADDING_PX;
+    const labelAbove = {
+      left: x2 - 2,
+      top: y2 - LABEL_SPACE_PX,
+      right: x2 - 2 + (measurement.labelWidth || Math.min(240, rect.width)),
+      bottom: y2
+    };
+    const labelInside = y2 < LABEL_SPACE_PX || other !== null && other.rect !== rect && overlapsBox(labelAbove, other.rect);
+    root.style.transform = `translate3d(${x2}px, ${y2}px, 0)`;
+    root.style.width = `${rect.width + BOX_PADDING_PX * 2}px`;
+    root.style.height = `${rect.height + BOX_PADDING_PX * 2}px`;
+    root.toggleAttribute("data-label-inside", labelInside);
+    root.style.clipPath = covers.length ? clipPath(x2, y2, covers) : "";
+    const labelLeft = labelInside ? x2 + 2 : x2 - 2;
+    const labelTop = labelInside ? y2 + 2 : y2 - LABEL_MARGIN_PX - measurement.labelHeight;
+    const label = {
+      left: labelLeft,
+      top: labelTop,
+      right: labelLeft + measurement.labelWidth,
+      bottom: labelTop + measurement.labelHeight
+    };
+    root.toggleAttribute(
+      "data-label-covered",
+      covers.some((c2) => overlaps(c2, label))
+    );
+    if (root.hasAttribute("data-instant")) {
+      root.setAttribute("data-visible", "");
+      requestAnimationFrame(() => root.removeAttribute("data-instant"));
+      return;
+    }
+    root.setAttribute("data-visible", "");
+  }
+};
+
+// src/core/visual-editor/field-path.ts
+var INDEX_SEGMENT = /^\d+$/;
+var WORD_SEPARATORS = /[_-]+/g;
+function normalizeFieldPath(path) {
+  return path.split(".").map(
+    (segment) => INDEX_SEGMENT.test(segment) ? String(Number.parseInt(segment, 10)) : segment
+  ).join(".");
+}
+var GENERIC_LEAVES = /* @__PURE__ */ new Set(["value", "text", "body", "content", "label"]);
+function humanize(name) {
+  const words = name.replace(WORD_SEPARATORS, " ").trim();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+function fieldLabel(path, locale = "en") {
+  if (!path) return t("visualEditor.edit", locale);
+  const segments = path.split(".").filter((s2) => s2 && s2 !== "items" && !INDEX_SEGMENT.test(s2));
+  const name = segments[segments.length - 1];
+  if (!name) return t("visualEditor.edit", locale);
+  const parent = segments[segments.length - 2];
+  if (parent && GENERIC_LEAVES.has(name)) {
+    return `${humanize(parent)} \u203A ${humanize(name)}`;
+  }
+  return humanize(name);
+}
+function findFieldElement(lookup) {
+  if (!lookup.field) return null;
+  const candidates = document.querySelectorAll(
+    "[data-prepr-encoded]"
+  );
+  if (lookup.entryId) {
+    for (const candidate of candidates) {
+      if (candidate.getAttribute("data-prepr-entry-id") === lookup.entryId) {
+        return candidate;
+      }
+    }
+  }
+  for (const path of [lookup.field, lookup.fieldById]) {
+    if (!path) continue;
+    const wanted = normalizeFieldPath(path);
+    for (const candidate of candidates) {
+      const field = candidate.getAttribute("data-prepr-field");
+      if (!field || normalizeFieldPath(field) !== wanted) continue;
+      if (lookup.id && candidate.getAttribute("data-prepr-id") !== lookup.id) {
+        continue;
+      }
+      return candidate;
+    }
+  }
+  return null;
+}
+
 // src/core/stega/elements.ts
 var debug4 = createScopedLogger("stega:elements");
 var StegaElements = class {
@@ -688,235 +1291,22 @@ var StegaElements = class {
       attributeFilter: ["class", "style", "hidden", "open", "aria-expanded"]
     });
   }
-  /** Drops the active class but keeps the data attributes, unlike cleanup(). */
-  cleanupVisuals() {
-    document.querySelectorAll(".prepr-overlay-active").forEach((element) => element.classList.remove("prepr-overlay-active"));
-  }
-  cleanup() {
+  /**
+   * Stops watching for new content. Tags stay on their elements: the page's
+   * stega characters are stripped once they are read, so a tag removed here
+   * could never be rebuilt when edit mode is turned back on.
+   */
+  disconnect() {
     if (this.observer) {
       this.observer.disconnect();
       this.observer = null;
     }
-    document.querySelectorAll("[data-prepr-encoded]").forEach((element) => {
-      element.removeAttribute("data-prepr-encoded");
-      element.removeAttribute("data-prepr-href");
-      element.removeAttribute("data-prepr-origin");
-      element.removeAttribute("data-prepr-id");
-      element.removeAttribute("data-prepr-field");
-      element.removeAttribute("data-prepr-locale");
-      element.classList.remove("prepr-overlay-active");
-    });
     this.elements = void 0;
   }
 };
 
-// src/core/stega/overlay.ts
-var debug5 = createScopedLogger("stega:overlay");
-var StegaOverlay = class {
-  constructor(onEdit) {
-    this.overlay = null;
-    this.tooltip = null;
-    this.hideTimeout = null;
-    this.currentElement = null;
-    this.onEdit = onEdit;
-  }
-  create() {
-    const overlay = document.createElement("div");
-    overlay.className = "prepr-overlay";
-    overlay.style.display = "none";
-    const tooltip = document.createElement("div");
-    tooltip.className = "prepr-tooltip";
-    tooltip.style.display = "none";
-    document.body.appendChild(overlay);
-    document.body.appendChild(tooltip);
-    this.overlay = overlay;
-    this.tooltip = tooltip;
-    return { overlay, tooltip };
-  }
-  getTooltip() {
-    return this.tooltip;
-  }
-  hasCurrentElement() {
-    return this.currentElement !== null;
-  }
-  clearHideTimeout() {
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout);
-      this.hideTimeout = null;
-    }
-  }
-  show(element) {
-    if (!this.overlay || !this.tooltip) return;
-    this.clearHideTimeout();
-    if (this.currentElement && this.currentElement !== element) {
-      this.currentElement.classList.remove("prepr-overlay-active");
-    }
-    const rect = element.getBoundingClientRect();
-    const href = element.getAttribute("data-prepr-href");
-    const origin = element.getAttribute("data-prepr-origin");
-    const id = element.getAttribute("data-prepr-id") ?? void 0;
-    const field = element.getAttribute("data-prepr-field") ?? void 0;
-    const locale = element.getAttribute("data-prepr-locale") ?? void 0;
-    debug5.log("showing overlay", { href, origin });
-    const overlay = this.overlay;
-    overlay.style.display = "block";
-    overlay.style.top = `${rect.top + window.scrollY - 2}px`;
-    overlay.style.left = `${rect.left + window.scrollX - 4}px`;
-    overlay.style.width = `${rect.width + 8}px`;
-    overlay.style.height = `${rect.height + 4}px`;
-    const tooltip = this.tooltip;
-    if (href && origin) {
-      const MIN_WIDTH_FOR_TEXT = 80;
-      const isCompact = rect.width < MIN_WIDTH_FOR_TEXT;
-      tooltip.textContent = isCompact ? "\u2197" : `${origin} \u2197`;
-      tooltip.style.display = "block";
-      tooltip.style.minWidth = isCompact ? "auto" : "80px";
-      requestAnimationFrame(() => {
-        let top = rect.top + window.scrollY - tooltip.clientHeight - 2;
-        let left = rect.right + 4 - tooltip.clientWidth;
-        const minTop = window.scrollY + 4;
-        const maxTop = window.scrollY + window.innerHeight - tooltip.clientHeight - 4;
-        const minLeft = window.scrollX + 4;
-        const maxLeft = window.scrollX + window.innerWidth - tooltip.clientWidth - 4;
-        const below = top < minTop;
-        if (below) {
-          top = rect.bottom + window.scrollY + 2;
-        }
-        top = Math.max(minTop, Math.min(top, maxTop));
-        left = Math.max(minLeft, Math.min(left, maxLeft));
-        tooltip.dataset.preprPlacement = below ? "below" : "above";
-        tooltip.style.top = `${top}px`;
-        tooltip.style.left = `${left}px`;
-      });
-      tooltip.onclick = () => {
-        this.onEdit({ href, origin, id, field, locale });
-      };
-    }
-    this.currentElement = element;
-    element.classList.add("prepr-overlay-active");
-  }
-  hideImmediate() {
-    this.clearHideTimeout();
-    if (this.overlay) this.overlay.style.display = "none";
-    if (this.tooltip) this.tooltip.style.display = "none";
-    if (this.currentElement) {
-      this.currentElement.classList.remove("prepr-overlay-active");
-      this.currentElement = null;
-    }
-  }
-  hide() {
-    if (!this.overlay || !this.tooltip) return;
-    this.clearHideTimeout();
-    this.hideTimeout = setTimeout(() => this.hideImmediate(), 100);
-  }
-  cleanup() {
-    this.clearHideTimeout();
-    if (this.overlay) {
-      this.overlay.style.display = "none";
-      this.overlay.parentNode?.removeChild(this.overlay);
-      this.overlay = null;
-    }
-    if (this.tooltip) {
-      this.tooltip.style.display = "none";
-      this.tooltip.parentNode?.removeChild(this.tooltip);
-      this.tooltip = null;
-    }
-    if (this.currentElement) {
-      this.currentElement.classList.remove("prepr-overlay-active");
-      this.currentElement = null;
-    }
-  }
-};
-
-// src/core/stega/proximity.ts
-var debug6 = createScopedLogger("stega:proximity");
-var StegaProximity = class {
-  constructor() {
-    this.highlighted = /* @__PURE__ */ new Set();
-    this.visible = /* @__PURE__ */ new Set();
-    this.observer = null;
-    this.getEncodedElements = createElementCache(
-      "[data-prepr-encoded]",
-      200
-    );
-  }
-  /** Call after the encoded element set changes — rebuilds the observer. */
-  refreshObserving() {
-    try {
-      if (typeof IntersectionObserver === "undefined") return;
-      if (this.observer) {
-        this.observer.disconnect();
-        this.observer = null;
-      }
-      this.visible = /* @__PURE__ */ new Set();
-      this.observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            const el = entry.target;
-            if (entry.isIntersecting) {
-              this.visible.add(el);
-            } else {
-              this.visible.delete(el);
-            }
-          });
-        },
-        { root: null, rootMargin: "0px", threshold: 0 }
-      );
-      const nodes = this.getEncodedElements();
-      nodes.forEach((el) => this.observer.observe(el));
-      debug6.log("observing", nodes.length, "encoded elements");
-    } catch (error) {
-      debug6.log("error setting up IntersectionObserver", error);
-    }
-  }
-  stopObserving() {
-    if (this.observer) {
-      this.observer.disconnect();
-      this.observer = null;
-      this.visible.clear();
-    }
-  }
-  updateElementGradients(cursorX, cursorY) {
-    const candidates = this.visible.size > 0 ? Array.from(this.visible) : Array.from(this.getEncodedElements());
-    const newHighlighted = /* @__PURE__ */ new Set();
-    candidates.forEach((element) => {
-      const rect = element.getBoundingClientRect();
-      const distance = Math.min(
-        Math.abs(cursorX - rect.left),
-        Math.abs(cursorX - rect.right),
-        Math.abs(cursorY - rect.top),
-        Math.abs(cursorY - rect.bottom)
-      );
-      if (distance < 150) {
-        const relativeX = cursorX - rect.left;
-        const relativeY = cursorY - rect.top;
-        element.style.setProperty("--cursor-x", `${relativeX}px`);
-        element.style.setProperty("--cursor-y", `${relativeY}px`);
-        const baseGradientSize = Math.max(
-          150,
-          Math.max(rect.width, rect.height) * 1.1
-        );
-        const distanceScale = Math.max(0, (400 - distance) / 400);
-        const gradientSize = baseGradientSize * distanceScale;
-        element.style.setProperty("--gradient-size", `${gradientSize}px`);
-        element.classList.add("prepr-proximity-highlight");
-        newHighlighted.add(element);
-      } else {
-        element.classList.remove("prepr-proximity-highlight");
-      }
-    });
-    this.highlighted = newHighlighted;
-  }
-  clearAllHighlights() {
-    this.highlighted.forEach(
-      (element) => element.classList.remove("prepr-proximity-highlight")
-    );
-    this.highlighted.clear();
-  }
-};
-
 // src/core/stega/stega.generated.ts
-var STEGA_STYLES = '[data-prepr-encoded]{position:relative}.prepr-overlay{pointer-events:none;z-index:10000;border:2px solid #4f46e5;border-radius:4px 0 4px 4px;transition:all .2s ease-in-out;position:absolute}.prepr-tooltip{color:#fff;white-space:nowrap;z-index:10001;text-align:center;pointer-events:auto;cursor:pointer;background-color:#4f46e5;border-radius:4px 4px 0 0;min-width:80px;padding:4px 8px;font-size:12px;line-height:1;transition:opacity .2s ease-in-out;position:absolute}.prepr-tooltip[data-prepr-placement=below]{border-radius:0 0 4px 4px}.prepr-tooltip:hover{background-color:#4338ca}.prepr-proximity-highlight{z-index:1;position:relative}.prepr-proximity-highlight,.prepr-proximity-highlight *{overflow:visible!important}.prepr-proximity-highlight:before{content:"";pointer-events:none;background:radial-gradient(circle var(--gradient-size) at var(--cursor-x) var(--cursor-y), #4f46e526 0%, #2563eb00 70%);z-index:9999;border:2px solid #4f46e526;border-radius:4px;transition:all .2s;position:absolute;top:-2px;bottom:-2px;left:-4px;right:-4px;overflow:visible}';
+var STEGA_STYLES = '@property --prepr-presence{syntax:"<number>";inherits:true;initial-value:1}[data-prepr-encoded]{outline:1px dashed rgba(79,70,229,calc(.3 * var(--prepr-presence,1)));outline-offset:2px}';
 
 // src/core/stega/styles.ts
 var STEGA_STYLE_MARKER = "data-prepr-stega";
@@ -936,46 +1326,80 @@ function removeStegaStyles() {
 }
 
 // src/core/stega/scan.ts
-var debug7 = createScopedLogger("stega:scan");
+var debug5 = createScopedLogger("stega:scan");
+var ENCODED_SELECTOR = "[data-prepr-encoded]";
+var PRESENCE_FADE_MS = 400;
 var EDITOR_MODE_STYLES = "[data-prepr-encoded]{cursor:pointer}";
+function fadeInPresence() {
+  const root = document.documentElement;
+  if (typeof root.animate !== "function") return;
+  if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+  root.animate(
+    { "--prepr-presence": ["0", "1"] },
+    { duration: PRESENCE_FADE_MS, easing: "ease-out" }
+  );
+}
 function createStegaController(opts) {
   const tooltipEnabled = opts.tooltip ?? true;
-  const overlay = new StegaOverlay(opts.onEdit);
-  const proximity = new StegaProximity();
+  const locale = opts.locale ?? "en";
   const elements = new StegaElements();
+  const overlay = new VisualEditorOverlay({
+    onLabelClick: (target) => opts.onEdit(readEditPayload(target))
+  });
   let initialized = false;
-  let throttledMouseMove = null;
-  const handleTooltipMouseEnter = () => {
-    overlay.clearHideTimeout();
+  let pointerFrame = null;
+  let pointerTarget = null;
+  let pointerX = 0;
+  let pointerY = 0;
+  let hitTestPending = false;
+  const updateHover = () => {
+    pointerFrame = null;
+    if (hitTestPending) {
+      hitTestPending = false;
+      pointerTarget = document.elementFromPoint(pointerX, pointerY);
+    }
+    if (overlay.owns(pointerTarget)) return;
+    const encoded = pointerTarget instanceof Element ? pointerTarget.closest(ENCODED_SELECTOR) : null;
+    overlay.setHover(
+      encoded,
+      encoded ? fieldLabel(encoded.getAttribute("data-prepr-field"), locale) : ""
+    );
   };
-  const handleTooltipMouseLeave = () => {
-    if (!overlay.hasCurrentElement()) {
-      overlay.hide();
+  const scheduleHover = () => {
+    if (pointerFrame === null) {
+      pointerFrame = requestAnimationFrame(updateHover);
     }
   };
+  const handlePointer = (e2) => {
+    pointerTarget = e2.target;
+    pointerX = e2.clientX;
+    pointerY = e2.clientY;
+    hitTestPending = false;
+    scheduleHover();
+  };
+  const handlePointerLeave = () => {
+    pointerTarget = null;
+    hitTestPending = false;
+    overlay.setHover(null, "");
+  };
   const handleScroll = () => {
-    overlay.hideImmediate();
-    proximity.clearAllHighlights();
+    overlay.onScroll();
+    if (pointerTarget === null) return;
+    hitTestPending = true;
+    scheduleHover();
   };
+  const handleResize = () => overlay.schedule();
   const handleClick = (e2) => {
     const target = e2.target;
-    const encoded = target?.closest(
-      "[data-prepr-encoded]"
-    );
+    const encoded = target?.closest(ENCODED_SELECTOR);
     if (!encoded) return;
     e2.preventDefault();
     e2.stopPropagation();
-    opts.onEdit({
-      href: encoded.getAttribute("data-prepr-href") ?? "",
-      origin: encoded.getAttribute("data-prepr-origin") ?? "",
-      id: encoded.getAttribute("data-prepr-id") ?? void 0,
-      field: encoded.getAttribute("data-prepr-field") ?? void 0,
-      locale: encoded.getAttribute("data-prepr-locale") ?? void 0
-    });
+    opts.onEdit(readEditPayload(encoded));
   };
   const start = () => {
     if (initialized) {
-      debug7.log("already initialized, skipping setup");
+      debug5.log("already initialized, skipping setup");
       return;
     }
     if (!tooltipEnabled) {
@@ -985,73 +1409,64 @@ function createStegaController(opts) {
       });
       document.addEventListener("click", handleClick, { capture: true });
       initialized = true;
-      debug7.log("stega controller started (editor mode)");
+      debug5.log("stega controller started (headless)");
       return;
     }
     injectStegaStyles();
-    const { tooltip } = overlay.create();
-    tooltip.addEventListener("mouseenter", handleTooltipMouseEnter);
-    tooltip.addEventListener("mouseleave", handleTooltipMouseLeave);
+    fadeInPresence();
+    overlay.mount();
     elements.scanDocument(true);
-    proximity.refreshObserving();
-    elements.setupMutationObserver(() => proximity.refreshObserving());
-    throttledMouseMove = throttle((e2) => {
-      const mouseEvent = e2;
-      const target = mouseEvent.target;
-      if (!target) return;
-      if (target.closest(".prepr-tooltip")) return;
-      proximity.updateElementGradients(mouseEvent.clientX, mouseEvent.clientY);
-      const encoded = target.closest("[data-prepr-encoded]");
-      if (encoded) {
-        overlay.show(encoded);
-      } else {
-        overlay.hide();
-      }
-    }, 16);
-    document.addEventListener("mousemove", throttledMouseMove, {
-      passive: true
+    elements.setupMutationObserver(() => {
+      if (pointerTarget === null) return;
+      hitTestPending = true;
+      scheduleHover();
     });
+    document.addEventListener("pointermove", handlePointer, { passive: true });
+    document.addEventListener("pointerdown", handlePointer, { passive: true });
+    document.documentElement.addEventListener(
+      "pointerleave",
+      handlePointerLeave
+    );
     window.addEventListener("scroll", handleScroll, {
       capture: true,
       passive: true
     });
+    window.addEventListener("resize", handleResize, { passive: true });
     initialized = true;
-    debug7.log("stega controller started");
+    debug5.log("stega controller started");
   };
   const stop = () => {
     if (!initialized) return;
+    initialized = false;
     if (!tooltipEnabled) {
       document.removeEventListener("click", handleClick, { capture: true });
-      elements.cleanup();
+      elements.disconnect();
       removeStegaStyles();
-      initialized = false;
-      debug7.log("stega controller stopped (editor mode)");
+      debug5.log("stega controller stopped (headless)");
       return;
     }
-    if (throttledMouseMove) {
-      document.removeEventListener("mousemove", throttledMouseMove);
-      throttledMouseMove.cancel();
-      throttledMouseMove = null;
-    }
+    if (pointerFrame !== null) cancelAnimationFrame(pointerFrame);
+    pointerFrame = null;
+    pointerTarget = null;
+    hitTestPending = false;
+    document.removeEventListener("pointermove", handlePointer);
+    document.removeEventListener("pointerdown", handlePointer);
+    document.documentElement.removeEventListener(
+      "pointerleave",
+      handlePointerLeave
+    );
     window.removeEventListener("scroll", handleScroll, { capture: true });
-    const tooltip = overlay.getTooltip();
-    if (tooltip) {
-      tooltip.removeEventListener("mouseenter", handleTooltipMouseEnter);
-      tooltip.removeEventListener("mouseleave", handleTooltipMouseLeave);
-    }
-    overlay.cleanup();
-    proximity.clearAllHighlights();
-    proximity.stopObserving();
-    elements.cleanup();
+    window.removeEventListener("resize", handleResize);
+    overlay.unmount();
+    elements.disconnect();
     removeStegaStyles();
-    initialized = false;
-    debug7.log("stega controller stopped");
+    debug5.log("stega controller stopped");
   };
   return { start, stop };
 }
 
 // src/core/stega/scroll-to-field.ts
-var debug8 = createScopedLogger("stega:scroll");
+var debug6 = createScopedLogger("stega:scroll");
 var FLASH_DURATION_MS = 1200;
 var flashTimeout = null;
 function scrollToField(request) {
@@ -1068,7 +1483,7 @@ function scrollToField(request) {
     break;
   }
   if (!target) {
-    debug8.log("no element found for field", field);
+    debug6.log("no element found for field", field);
     return false;
   }
   target.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -1498,7 +1913,7 @@ var CLOSE_ICON_SVG = `<svg width="10" height="10" viewBox="0 0 10 10" fill="none
 </svg>`;
 
 // src/core/ui/toolbar.generated.ts
-var TOOLBAR_CSS = ":host{--prepr-primary:#4338ca;--prepr-bg:#eef2ff;--prepr-text:#1f2937;--prepr-radius:8px;--prepr-shadow:0px 0px 40px 0px #1f29373d;--prepr-z-index:10000;--prepr-primary-50:#eef2ff;--prepr-primary-100:#e0e7ff;--prepr-primary-800:#3730a3;--prepr-indigo-600:#4f46e5;--prepr-indigo-50:#eef2ff;--prepr-indigo-700:#4338ca;--prepr-secondary-400:#fb923c;--prepr-secondary-500:#f97316;--prepr-gray-100:#f3f4f6;--prepr-gray-200:#e5e7eb;--prepr-gray-300:#d1d5db;--prepr-gray-400:#9ca3af;--prepr-gray-500:#6b7280;--prepr-gray-700:#374151;--prepr-gray-800:#1f2937;--prepr-gray-900:#111827;--prepr-shadow-sm:0px 0px 12px 0px #c3c3c3cc;color:var(--prepr-text);box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5}:host *,:host :before,:host :after,*,:before,:after{box-sizing:border-box}button{font-family:inherit;font-size:inherit;margin:0}.prepr-regular-text{font-size:.875rem;font-weight:500;line-height:1.5}.prepr-backdrop{z-index:calc(var(--prepr-z-index) - 1);opacity:0;pointer-events:none;background:#0000001a;transition:opacity .2s ease-in-out;position:fixed;top:0;bottom:0;left:0;right:0}.prepr-backdrop[data-open=true]{opacity:1;pointer-events:auto;animation:.2s ease-in-out prepr-fade-in}.prepr-container{z-index:var(--prepr-z-index);justify-content:flex-end;align-items:center;display:flex;position:fixed;top:calc(50% - 64px);right:0}.prepr-toggle-holder{padding:.5rem}.prepr-toggle{cursor:pointer;background:var(--prepr-primary);color:#fff;border:none;border-radius:9999px;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.prepr-toggle>span{display:flex}.prepr-toggle svg{color:#fff}.prepr-panel{z-index:var(--prepr-z-index);opacity:0;pointer-events:none;justify-content:flex-end;padding:.75rem;transition:opacity .2s ease-in-out;display:flex;position:fixed;top:50%;right:0;transform:translateY(-50%)}.prepr-panel[data-open=true]{opacity:1;pointer-events:auto;animation:.2s ease-in-out prepr-fade-in}.prepr-content{box-shadow:var(--prepr-shadow);border-radius:var(--prepr-radius);background:var(--prepr-bg);flex-direction:column;gap:2.5rem;width:100%;padding:1.5rem;display:flex}@media (min-width:640px){.prepr-panel{margin-right:4rem;padding:0}.prepr-content{width:502px;padding:2.5rem}}.prepr-header{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.prepr-header-left{align-items:flex-start;gap:.75rem;display:flex}.prepr-badge{background:var(--prepr-primary-100);height:1.5rem;color:var(--prepr-primary);border-radius:4px;align-items:center;padding:.25rem .75rem;font-size:.875rem;display:flex}.prepr-header-close{cursor:pointer;background:var(--prepr-primary-100);width:2rem;height:2rem;color:var(--prepr-gray-700);border:none;border-radius:6px;justify-content:center;align-items:center;display:flex}.prepr-section{flex-direction:column;gap:.5rem;display:flex}.prepr-section-label{color:var(--prepr-gray-400);font-size:.875rem}.prepr-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;display:flex}.prepr-row-title{color:var(--prepr-gray-800);margin:0;font-size:1rem;font-weight:600}.prepr-radiogroup{border-radius:var(--prepr-radius);border:1px solid var(--prepr-gray-300);background:#fff;align-items:center;gap:.25rem;height:2.5rem;padding:.25rem;display:flex}.prepr-radiogroup[data-disabled=true]{cursor:not-allowed;opacity:.5}.prepr-radiogroup[data-disabled=true] .prepr-radio{pointer-events:none}.prepr-radio{cursor:pointer;white-space:nowrap;text-align:center;height:2rem;color:var(--prepr-gray-900);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.5rem 1.125rem;font-size:.875rem;font-weight:500;transition:all .2s ease-in-out;display:flex}.prepr-radio[data-checked=true]{background:var(--prepr-indigo-600);color:#fff;box-shadow:var(--prepr-shadow-sm)}.prepr-radio[data-checked=true][data-off=true]{background:var(--prepr-gray-800);color:#fff}.prepr-radio-variant{width:82px}.prepr-listbox{position:relative}.prepr-segment-button{border-radius:var(--prepr-radius);border:1px solid var(--prepr-gray-300);width:240px;height:2.5rem;color:var(--prepr-gray-500);cursor:pointer;background:#fff;flex-shrink:0;align-items:center;gap:.5rem;padding:0 .5rem;font-size:.875rem;font-weight:500;display:flex;overflow:hidden}@media (min-width:768px){.prepr-segment-button{padding:0 1rem}}.prepr-segment-button:disabled{cursor:not-allowed;background:var(--prepr-gray-200);color:var(--prepr-gray-400)}.prepr-segment-button[aria-expanded=true]{border-bottom-color:#fff;border-bottom-right-radius:0;border-bottom-left-radius:0}.prepr-segment-label{white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;margin-right:auto;overflow:hidden}.prepr-segment-caret{color:var(--prepr-gray-800);display:flex}.prepr-options{z-index:calc(var(--prepr-z-index) + 1);border-left:1px solid var(--prepr-gray-300);border-right:1px solid var(--prepr-gray-300);border-bottom:1px solid var(--prepr-gray-300);-ms-overflow-style:none;scrollbar-width:none;background:#fff;border-radius:0 0 6px 6px;width:240px;max-height:300px;margin:0;padding:0;list-style:none;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prepr-options::-webkit-scrollbar{display:none}.prepr-options[hidden]{display:none}.prepr-option-search{background:#fff;padding:.5rem;position:-webkit-sticky;position:sticky;top:0}.prepr-segment-search{border:1px solid var(--prepr-gray-300);border-radius:var(--prepr-radius);width:100%;height:2rem;font:inherit;color:var(--prepr-gray-900);box-sizing:border-box;background:#fff;padding:0 .5rem;font-size:.875rem}.prepr-segment-search::placeholder{color:var(--prepr-gray-400)}.prepr-segment-search:focus{border-color:var(--prepr-gray-400);outline:none}.prepr-option{cursor:pointer;width:100%;color:var(--prepr-gray-900);background:#fff;align-items:center;padding:.5rem 1rem;font-size:.875rem;font-weight:500;display:flex}.prepr-option:hover{background:var(--prepr-gray-100)}.prepr-option[aria-selected=true]{background:var(--prepr-indigo-50);color:var(--prepr-indigo-700)}.prepr-option-label{white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;margin-right:auto;overflow:hidden}.prepr-reset{background:var(--prepr-secondary-400);color:#fff;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:.5rem;width:100%;height:2.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;display:flex}.prepr-reset:hover:not(:disabled){background:var(--prepr-secondary-500)}.prepr-reset:disabled{background:var(--prepr-gray-400);color:var(--prepr-gray-500);cursor:not-allowed}@media (min-width:768px){.prepr-reset{width:108px}}.prepr-indicators{z-index:var(--prepr-z-index);gap:.75rem;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}.prepr-status-pill{background:var(--prepr-primary);color:#fff;cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.prepr-status-pill[data-interactive=false]{cursor:default;opacity:1;color:#fff}.prepr-status-pill[data-interactive=true]:hover{background:var(--prepr-primary-800)}.prepr-status-pill[hidden]{display:none}.prepr-status-viewing{color:#fff9;font-size:10px}.prepr-status-segment{text-overflow:ellipsis;white-space:nowrap;max-width:120px;display:inline-block;overflow:hidden}.prepr-status-variant{text-overflow:ellipsis;white-space:nowrap;background:#fff3;border-radius:4px;max-width:80px;padding:0 .5rem;display:inline-block;overflow:hidden}.prepr-status-x{color:#fff;width:.75rem;height:.75rem}.prepr-close-edit-pill{background:var(--prepr-primary-50);color:var(--prepr-gray-800);cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.prepr-close-edit-pill:hover{background:var(--prepr-primary-100)}.prepr-close-edit-pill[hidden]{display:none}.prepr-close-edit-x{width:1rem;height:1rem;color:var(--prepr-gray-500);transition:color .15s}.prepr-close-edit-pill:hover .prepr-close-edit-x{color:var(--prepr-gray-700)}.prepr-tip{z-index:calc(var(--prepr-z-index) + 2);overflow-wrap:break-word;background:var(--prepr-gray-900);color:#fff;pointer-events:none;border-radius:6px;width:auto;max-width:min(420px,100vw - 16px);padding:.5rem .75rem;font-size:.75rem;font-weight:500;position:fixed;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prepr-tip-arrow{border-left:6px solid #0000;border-right:6px solid #0000;border-top:6px solid var(--prepr-gray-900);width:0;height:0;position:absolute;top:100%;transform:translate(-50%)}[hidden]{display:none!important}@keyframes prepr-fade-in{0%{opacity:0}to{opacity:1}}";
+var TOOLBAR_CSS = ":host{--prepr-primary:#4338ca;--prepr-bg:#eef2ff;--prepr-text:#1f2937;--prepr-radius:8px;--prepr-shadow:0px 0px 40px 0px #1f29373d;--prepr-z-index:10000;--prepr-primary-50:#eef2ff;--prepr-primary-100:#e0e7ff;--prepr-primary-800:#3730a3;--prepr-indigo-600:#4f46e5;--prepr-indigo-50:#eef2ff;--prepr-indigo-700:#4338ca;--prepr-secondary-400:#fb923c;--prepr-secondary-500:#f97316;--prepr-gray-100:#f3f4f6;--prepr-gray-200:#e5e7eb;--prepr-gray-300:#d1d5db;--prepr-gray-400:#9ca3af;--prepr-gray-500:#6b7280;--prepr-gray-700:#374151;--prepr-gray-800:#1f2937;--prepr-gray-900:#111827;--prepr-shadow-sm:0px 0px 12px 0px #c3c3c3cc;color:var(--prepr-text);box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5}:host *,:host :before,:host :after,*,:before,:after{box-sizing:border-box}button{font-family:inherit;font-size:inherit;margin:0}.prepr-regular-text{font-size:.875rem;font-weight:500;line-height:1.5}.prepr-backdrop{z-index:calc(var(--prepr-z-index) - 1);opacity:0;pointer-events:none;background:#0000001a;transition:opacity .2s ease-in-out;position:fixed;top:0;bottom:0;left:0;right:0}.prepr-backdrop[data-open=true]{opacity:1;pointer-events:auto;animation:.2s ease-in-out prepr-fade-in}.prepr-container{z-index:var(--prepr-z-index);justify-content:flex-end;align-items:center;display:flex;position:fixed;top:calc(50% - 64px);right:0}.prepr-toggle-holder{padding:.5rem}.prepr-toggle{cursor:pointer;background:var(--prepr-primary);color:#fff;border:none;border-radius:9999px;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.prepr-toggle>span{display:flex}.prepr-toggle svg{color:#fff}.prepr-panel{z-index:var(--prepr-z-index);opacity:0;pointer-events:none;justify-content:flex-end;padding:.75rem;transition:opacity .2s ease-in-out;display:flex;position:fixed;top:50%;right:0;transform:translateY(-50%)}.prepr-panel[data-open=true]{opacity:1;pointer-events:auto;animation:.2s ease-in-out prepr-fade-in}.prepr-content{box-shadow:var(--prepr-shadow);border-radius:var(--prepr-radius);background:var(--prepr-bg);flex-direction:column;gap:2.5rem;width:100%;padding:1.5rem;display:flex}@media (min-width:640px){.prepr-panel{margin-right:4rem;padding:0}.prepr-content{width:502px;padding:2.5rem}}.prepr-header{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.prepr-header-left{align-items:flex-start;gap:.75rem;display:flex}.prepr-badge{background:var(--prepr-primary-100);height:1.5rem;color:var(--prepr-primary);border-radius:4px;align-items:center;padding:.25rem .75rem;font-size:.875rem;display:flex}.prepr-header-close{cursor:pointer;background:var(--prepr-primary-100);width:2rem;height:2rem;color:var(--prepr-gray-700);border:none;border-radius:6px;justify-content:center;align-items:center;display:flex}.prepr-section{flex-direction:column;gap:.5rem;display:flex}.prepr-section-label{color:var(--prepr-gray-400);font-size:.875rem}.prepr-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;display:flex}.prepr-row-title{color:var(--prepr-gray-800);margin:0;font-size:1rem;font-weight:600}.prepr-radiogroup{border-radius:var(--prepr-radius);border:1px solid var(--prepr-gray-300);background:#fff;align-items:center;gap:.25rem;height:2.5rem;padding:.25rem;display:flex}.prepr-radiogroup[data-disabled=true]{cursor:not-allowed;opacity:.5}.prepr-radiogroup[data-disabled=true] .prepr-radio{pointer-events:none}.prepr-radio{cursor:pointer;white-space:nowrap;text-align:center;height:2rem;color:var(--prepr-gray-900);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.5rem 1.125rem;font-size:.875rem;font-weight:500;transition:all .2s ease-in-out;display:flex}.prepr-radio[data-checked=true]{background:var(--prepr-indigo-600);color:#fff;box-shadow:var(--prepr-shadow-sm)}.prepr-radio[data-checked=true][data-off=true]{background:var(--prepr-gray-800);color:#fff}.prepr-radio-variant{width:82px}.prepr-listbox{position:relative}.prepr-segment-button{border-radius:var(--prepr-radius);border:1px solid var(--prepr-gray-300);width:240px;height:2.5rem;color:var(--prepr-gray-500);cursor:pointer;background:#fff;flex-shrink:0;align-items:center;gap:.5rem;padding:0 .5rem;font-size:.875rem;font-weight:500;display:flex;overflow:hidden}@media (min-width:768px){.prepr-segment-button{padding:0 1rem}}.prepr-segment-button:disabled{cursor:not-allowed;background:var(--prepr-gray-200);color:var(--prepr-gray-400)}.prepr-segment-button[aria-expanded=true]{border-bottom-color:#fff;border-bottom-right-radius:0;border-bottom-left-radius:0}.prepr-segment-label{white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;margin-right:auto;overflow:hidden}.prepr-segment-caret{color:var(--prepr-gray-800);display:flex}.prepr-options{z-index:calc(var(--prepr-z-index) + 1);border-left:1px solid var(--prepr-gray-300);border-right:1px solid var(--prepr-gray-300);border-bottom:1px solid var(--prepr-gray-300);-ms-overflow-style:none;scrollbar-width:none;background:#fff;border-radius:0 0 6px 6px;width:240px;max-height:300px;margin:0;padding:0;list-style:none;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prepr-options::-webkit-scrollbar{display:none}.prepr-options[hidden]{display:none}.prepr-option-search{background:#fff;padding:.5rem;position:-webkit-sticky;position:sticky;top:0}.prepr-segment-search{border:1px solid var(--prepr-gray-300);border-radius:var(--prepr-radius);width:100%;height:2rem;font:inherit;color:var(--prepr-gray-900);box-sizing:border-box;background:#fff;padding:0 .5rem;font-size:.875rem}@media (pointer:coarse){.prepr-segment-search{font-size:16px}}.prepr-segment-search::placeholder{color:var(--prepr-gray-400)}.prepr-segment-search:focus{border-color:var(--prepr-gray-400);outline:none}.prepr-option{cursor:pointer;width:100%;color:var(--prepr-gray-900);background:#fff;align-items:center;padding:.5rem 1rem;font-size:.875rem;font-weight:500;display:flex}.prepr-option:hover{background:var(--prepr-gray-100)}.prepr-option[aria-selected=true]{background:var(--prepr-indigo-50);color:var(--prepr-indigo-700)}.prepr-option-label{white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;margin-right:auto;overflow:hidden}.prepr-reset{background:var(--prepr-secondary-400);color:#fff;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:.5rem;width:100%;height:2.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;display:flex}.prepr-reset:hover:not(:disabled){background:var(--prepr-secondary-500)}.prepr-reset:disabled{background:var(--prepr-gray-400);color:var(--prepr-gray-500);cursor:not-allowed}@media (min-width:768px){.prepr-reset{width:108px}}.prepr-indicators{z-index:var(--prepr-z-index);gap:.75rem;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}.prepr-status-pill{background:var(--prepr-primary);color:#fff;cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.prepr-status-pill[data-interactive=false]{cursor:default;opacity:1;color:#fff}.prepr-status-pill[data-interactive=true]:hover{background:var(--prepr-primary-800)}.prepr-status-pill[hidden]{display:none}.prepr-status-viewing{color:#fff9;font-size:10px}.prepr-status-segment{text-overflow:ellipsis;white-space:nowrap;max-width:120px;display:inline-block;overflow:hidden}.prepr-status-variant{text-overflow:ellipsis;white-space:nowrap;background:#fff3;border-radius:4px;max-width:80px;padding:0 .5rem;display:inline-block;overflow:hidden}.prepr-status-x{color:#fff;width:.75rem;height:.75rem}.prepr-close-edit-pill{background:var(--prepr-primary-50);color:var(--prepr-gray-800);cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.prepr-close-edit-pill:hover{background:var(--prepr-primary-100)}.prepr-close-edit-pill[hidden]{display:none}.prepr-close-edit-x{width:1rem;height:1rem;color:var(--prepr-gray-500);transition:color .15s}.prepr-close-edit-pill:hover .prepr-close-edit-x{color:var(--prepr-gray-700)}.prepr-tip{z-index:calc(var(--prepr-z-index) + 2);overflow-wrap:break-word;background:var(--prepr-gray-900);color:#fff;pointer-events:none;border-radius:6px;width:auto;max-width:min(420px,100vw - 16px);padding:.5rem .75rem;font-size:.75rem;font-weight:500;position:fixed;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prepr-tip-arrow{border-left:6px solid #0000;border-right:6px solid #0000;border-top:6px solid var(--prepr-gray-900);width:0;height:0;position:absolute;top:100%;transform:translate(-50%)}[hidden]{display:none!important}@keyframes prepr-fade-in{0%{opacity:0}to{opacity:1}}";
 
 // ../../node_modules/.pnpm/preact@10.29.7/node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs
 var f2 = 0;
@@ -2193,6 +2608,724 @@ function definePreprToolbar() {
   }
 }
 
+// src/core/visual-editor/asset-images.ts
+var MAX_URL_LENGTH = 4096;
+var MIN_KEY_SEGMENTS = 2;
+var TRANSFORM_OPTION = /^[a-z]{1,3}_[\w.-]*$/i;
+var FORMAT_PLACEHOLDER = "{format}";
+var PROXY_PARAMS = ["url", "href", "src", "image"];
+var ABSOLUTE_HTTP = /^https?:\/\//i;
+var SOURCE_URL_ATTRIBUTES = ["src", "data-src"];
+var SOURCE_SET_ATTRIBUTES = ["srcset", "data-srcset"];
+var ASSET_ATTR = "data-prepr-asset";
+var ASSET_SOURCE_ATTRIBUTES = [
+  ...SOURCE_URL_ATTRIBUTES,
+  ...SOURCE_SET_ATTRIBUTES
+];
+var TAG_ATTRIBUTES = [
+  "data-prepr-encoded",
+  "data-prepr-id",
+  "data-prepr-field",
+  "data-prepr-entry-id",
+  ASSET_ATTR
+];
+function decodeSegment(segment) {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+}
+function isTransformSegment(segment) {
+  return segment === FORMAT_PLACEHOLDER || segment.split(",").every((option) => TRANSFORM_OPTION.test(option));
+}
+function assetKey(url, depth = 0) {
+  if (!url || url.length > MAX_URL_LENGTH) return null;
+  let parsed;
+  try {
+    parsed = new URL(url, "https://base.invalid");
+  } catch {
+    return null;
+  }
+  if (parsed.protocol !== "https:" && parsed.protocol !== "http:") return null;
+  if (depth === 0) {
+    for (const name of PROXY_PARAMS) {
+      const inner = parsed.searchParams.get(name);
+      if (inner && ABSOLUTE_HTTP.test(inner)) return assetKey(inner, 1);
+    }
+  }
+  const segments = parsed.pathname.split("/").filter(Boolean).map(decodeSegment);
+  const file = segments.pop();
+  if (!file) return null;
+  const kept = segments.filter((segment) => !isTransformSegment(segment));
+  kept.push(file);
+  return kept.length >= MIN_KEY_SEGMENTS ? kept.join("/") : null;
+}
+function srcsetUrls(srcset) {
+  const urls = [];
+  let expectUrl = true;
+  for (const token of srcset.split(/\s+/)) {
+    if (!token) continue;
+    if (!expectUrl) {
+      const comma = token.indexOf(",");
+      if (comma === -1) continue;
+      expectUrl = true;
+      const rest = token.slice(comma + 1);
+      if (!rest) continue;
+      urls.push(rest.replace(/,+$/, ""));
+      expectUrl = rest.endsWith(",");
+      continue;
+    }
+    const url = token.replace(/^,+|,+$/g, "");
+    if (url) urls.push(url);
+    expectUrl = token.endsWith(",");
+  }
+  return urls;
+}
+function createAssetIndex(assets) {
+  const index = /* @__PURE__ */ new Map();
+  for (const asset of assets) {
+    const key = assetKey(asset.key);
+    if (key && !index.has(key)) index.set(key, asset);
+  }
+  return index;
+}
+function urlsOf(img) {
+  const urls = [];
+  const collect = (el) => {
+    for (const name of SOURCE_URL_ATTRIBUTES) {
+      const value = el.getAttribute(name);
+      if (value) urls.push(value);
+    }
+    for (const name of SOURCE_SET_ATTRIBUTES) {
+      const value = el.getAttribute(name);
+      if (value) urls.push(...srcsetUrls(value));
+    }
+  };
+  collect(img);
+  const picture = img.parentElement;
+  if (picture?.tagName === "PICTURE") {
+    for (const source of picture.children) {
+      if (source.tagName === "SOURCE") collect(source);
+    }
+  }
+  return urls;
+}
+function matchAsset(img, index, keys) {
+  for (const url of urlsOf(img)) {
+    let key = keys.get(url);
+    if (key === void 0) {
+      key = assetKey(url);
+      keys.set(url, key);
+    }
+    const asset = key ? index.get(key) : void 0;
+    if (asset) return asset;
+  }
+  return void 0;
+}
+function setIfChanged(el, name, value) {
+  if (value === null) {
+    if (el.hasAttribute(name)) el.removeAttribute(name);
+  } else if (el.getAttribute(name) !== value) {
+    el.setAttribute(name, value);
+  }
+}
+function untagAssetImage(img) {
+  for (const name of TAG_ATTRIBUTES) img.removeAttribute(name);
+}
+function tagAssetImages(index, itemId, keys) {
+  for (const img of document.getElementsByTagName("img")) {
+    const ours = img.hasAttribute(ASSET_ATTR);
+    if (!ours && img.hasAttribute("data-prepr-encoded")) continue;
+    const asset = index.size ? matchAsset(img, index, keys) : void 0;
+    if (!asset) {
+      if (ours) untagAssetImage(img);
+      continue;
+    }
+    setIfChanged(img, "data-prepr-encoded", "");
+    setIfChanged(img, ASSET_ATTR, "");
+    setIfChanged(img, "data-prepr-id", itemId);
+    setIfChanged(img, "data-prepr-field", asset.field);
+    setIfChanged(img, "data-prepr-entry-id", asset.entryId ?? null);
+  }
+}
+function untagAssetImages() {
+  document.querySelectorAll(`img[${ASSET_ATTR}]`).forEach(untagAssetImage);
+}
+
+// src/core/visual-editor/navigation-guard.ts
+var debug7 = createScopedLogger("navigation-guard");
+var trimSlash = (path) => path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
+function resolve(url) {
+  try {
+    return new URL(url, document.baseURI);
+  } catch {
+    return null;
+  }
+}
+function leavesPage(url) {
+  if (url.protocol !== "http:" && url.protocol !== "https:") return false;
+  const here = window.location;
+  return url.origin !== here.origin || trimSlash(url.pathname) !== trimSlash(here.pathname);
+}
+function leavingLinkHref(target) {
+  if (!(target instanceof Element)) return null;
+  const link = target.closest("a[href]");
+  if (!link || link.hasAttribute("download")) return null;
+  const linkTarget = link.getAttribute("target");
+  if (linkTarget && linkTarget !== "_self") return null;
+  const href = link.getAttribute("href") ?? "";
+  if (href.startsWith("#")) return null;
+  const url = resolve(href);
+  return url && leavesPage(url) ? url.href : null;
+}
+function submitterAttr(submitter, attr) {
+  if (!submitter?.hasAttribute(attr)) return null;
+  if (attr === "formaction") return submitter.formAction;
+  if (attr === "formmethod") return submitter.formMethod;
+  return submitter.formTarget;
+}
+function submissionUrl(form, submitter) {
+  const method = (submitterAttr(submitter, "formmethod") ?? form.method).toLowerCase();
+  if (method === "dialog") return null;
+  const target = submitterAttr(submitter, "formtarget") ?? form.target;
+  if (target && target !== "_self") return null;
+  const url = resolve(
+    submitterAttr(submitter, "formaction") ?? (form.action || location.href)
+  );
+  if (!url) return null;
+  if (method === "get") {
+    let data;
+    try {
+      data = new FormData(form, submitter);
+    } catch {
+      data = new FormData(form);
+    }
+    const query = new URLSearchParams();
+    data.forEach((value, key) => {
+      query.append(key, typeof value === "string" ? value : value.name);
+    });
+    url.search = query.toString();
+  }
+  return url;
+}
+function createNavigationGuard(opts) {
+  let active = false;
+  let permitted = null;
+  let pendingForm = null;
+  let originalPush = null;
+  let guardedPush = null;
+  const isPermitted = (url) => permitted === url.href;
+  const guarding = () => active && opts.showsEditedContent();
+  const report = (href) => {
+    debug7.log("blocked navigation to", href);
+    opts.onBlocked(href);
+  };
+  const onSubmit = (e2) => {
+    if (e2.defaultPrevented || !(e2.target instanceof HTMLFormElement)) return;
+    if (!guarding()) return;
+    const submitter = e2.submitter ?? null;
+    const url = submissionUrl(e2.target, submitter);
+    if (!url || !leavesPage(url) || isPermitted(url)) return;
+    e2.preventDefault();
+    pendingForm = { form: e2.target, submitter, href: url.href };
+    report(url.href);
+  };
+  const onNavigate = (event) => {
+    const e2 = event;
+    if (e2.navigationType === "traverse" || e2.navigationType === "reload") {
+      return;
+    }
+    if (!e2.cancelable || e2.hashChange || e2.downloadRequest !== null) return;
+    if (!guarding()) return;
+    if (e2.navigationType === "replace" && e2.destination.sameDocument) return;
+    const url = resolve(e2.destination.url);
+    if (!url || !leavesPage(url) || isPermitted(url)) return;
+    e2.preventDefault();
+    report(url.href);
+    if (e2.destination.sameDocument) window.location.reload();
+  };
+  const navigation = () => window.navigation;
+  function installPushGuard() {
+    const original = history.pushState;
+    const guard = function(data, unused, url) {
+      if (guarding() && guardedPush === guard && url != null) {
+        const target = resolve(url);
+        if (target && leavesPage(target) && !isPermitted(target)) {
+          report(target.href);
+          window.location.reload();
+          return;
+        }
+      }
+      return original.call(this, data, unused, url);
+    };
+    originalPush = original;
+    guardedPush = guard;
+    history.pushState = guard;
+  }
+  function uninstallPushGuard() {
+    if (history.pushState === guardedPush && originalPush) {
+      history.pushState = originalPush;
+    }
+    originalPush = null;
+    guardedPush = null;
+  }
+  return {
+    start() {
+      if (active) return;
+      active = true;
+      installPushGuard();
+      window.addEventListener("submit", onSubmit);
+      navigation()?.addEventListener("navigate", onNavigate);
+    },
+    stop() {
+      if (!active) return;
+      active = false;
+      uninstallPushGuard();
+      window.removeEventListener("submit", onSubmit);
+      navigation()?.removeEventListener("navigate", onNavigate);
+      pendingForm = null;
+    },
+    isActive: guarding,
+    block(href) {
+      report(href);
+    },
+    permit(href) {
+      permitted = resolve(href)?.href ?? null;
+    },
+    allow(href) {
+      const url = resolve(href);
+      if (!url || url.protocol !== "http:" && url.protocol !== "https:") {
+        debug7.warn("ignored navigation to unsupported URL");
+        return;
+      }
+      permitted = url.href;
+      const form = pendingForm;
+      pendingForm = null;
+      if (form && form.href === url.href && form.form.isConnected) {
+        try {
+          form.form.requestSubmit(form.submitter ?? void 0);
+        } catch {
+          form.form.requestSubmit();
+        }
+        return;
+      }
+      window.location.assign(url.href);
+    }
+  };
+}
+
+// src/core/visual-editor/index.ts
+var debug8 = createScopedLogger("visual-editor");
+var ENCODED_SELECTOR2 = "[data-prepr-encoded]";
+var REFERENCE_ATTR = "data-prepr-reference";
+var REFERENCE_SELECTOR = `[${REFERENCE_ATTR}]`;
+var CURSOR_STYLE_MARKER = "data-prepr-visual-editor";
+var CURSOR_STYLES = `${ENCODED_SELECTOR2}{cursor:pointer}html[data-prepr-ve-suspended] ${ENCODED_SELECTOR2}{cursor:auto}`;
+var SUSPENDED_ATTR = "data-prepr-ve-suspended";
+var FIND_RETRY_MS = 150;
+var FIND_RETRIES = 6;
+var MAX_CACHED_KEYS = 2e3;
+var LAYOUT_MUTATIONS = {
+  childList: true,
+  subtree: true,
+  characterData: true,
+  attributes: true,
+  attributeFilter: [
+    "class",
+    "style",
+    "hidden",
+    "open",
+    "data-prepr-encoded",
+    // An image swapped by a carousel or lazy loader can show another asset.
+    ...ASSET_SOURCE_ATTRIBUTES
+  ]
+};
+function scrollIntoFrame(el) {
+  const rect = el.getBoundingClientRect();
+  const offset = Math.max(0, (window.innerHeight - rect.height) / 2);
+  window.scrollTo({
+    top: Math.max(0, window.scrollY + rect.top - offset),
+    behavior: "smooth"
+  });
+}
+var isVisible = (el) => typeof el.checkVisibility === "function" ? el.checkVisibility() : el.getClientRects().length > 0;
+function createVisualEditor(opts) {
+  const overlay = new VisualEditorOverlay();
+  let running = false;
+  let currentItemId = null;
+  let locale = opts.locale ?? "en";
+  let suspended = false;
+  let pointerFrame = null;
+  let lastPointerTarget = null;
+  let lastPointerX = 0;
+  let lastPointerY = 0;
+  let mutationFrame = null;
+  let mutationObserver = null;
+  let selection = null;
+  let findTimeout = null;
+  let settlePendingFind = null;
+  let guardEnabled = false;
+  let assetIndex = /* @__PURE__ */ new Map();
+  const assetKeys = /* @__PURE__ */ new Map();
+  const guard = createNavigationGuard({
+    onBlocked: (href) => opts.onNavigationBlocked?.(href),
+    showsEditedContent: () => showsEditedContent()
+  });
+  const encodedFrom = (node) => node instanceof Element ? node.closest(ENCODED_SELECTOR2) : null;
+  const labelFor = (el) => fieldLabel(el.getAttribute("data-prepr-field"), locale);
+  let references = null;
+  let ownComponents = /* @__PURE__ */ new Set();
+  const isCurrentItem = (el) => {
+    if (currentItemId === null) return true;
+    const id = el.getAttribute("data-prepr-id");
+    return !id || id === currentItemId || ownComponents.has(id);
+  };
+  const showsEditedContent = () => {
+    for (const el of document.querySelectorAll(ENCODED_SELECTOR2)) {
+      if (isCurrentItem(el) && isVisible(el)) return true;
+    }
+    return false;
+  };
+  const linkedIdOf = (el) => {
+    if (!references) return null;
+    const id = el.getAttribute("data-prepr-id") ?? "";
+    if (references.has(id)) return id;
+    let container = el.closest(REFERENCE_SELECTOR);
+    while (container) {
+      const linked = container.getAttribute(REFERENCE_ATTR) ?? "";
+      if (references.has(linked)) return linked;
+      container = container.parentElement?.closest(REFERENCE_SELECTOR) ?? null;
+    }
+    return null;
+  };
+  const itemKind = (el) => {
+    if (isCurrentItem(el)) return "current";
+    if (!references) return "other";
+    return linkedIdOf(el) ? "referenced" : null;
+  };
+  const referenceFieldOf = (el) => {
+    const linked = linkedIdOf(el);
+    return linked ? references?.get(linked) : void 0;
+  };
+  const hoverLabel = (el, kind) => {
+    if (kind === "other") {
+      return `${labelFor(el)} \xB7 ${t("visualEditor.otherItem", locale)}`;
+    }
+    if (kind === "referenced") {
+      const via = referenceFieldOf(el);
+      const prefix = via ? `${fieldLabel(via, locale)} \u203A ` : "";
+      return `${prefix}${labelFor(el)} \xB7 ${t("visualEditor.linkedItem", locale)}`;
+    }
+    return labelFor(el);
+  };
+  const setSuspended = (value) => {
+    if (suspended === value) return;
+    suspended = value;
+    document.documentElement.toggleAttribute(SUSPENDED_ATTR, value);
+    if (value) overlay.setHover(null, "");
+  };
+  const updateHover = () => {
+    pointerFrame = null;
+    overlay.schedule();
+    if (suspended) return;
+    const encoded = encodedFrom(lastPointerTarget);
+    const target = encoded === overlay.getSelectedTarget() ? null : encoded;
+    if (!target) {
+      overlay.setHover(null, "");
+      return;
+    }
+    const kind = itemKind(target);
+    if (!kind) {
+      overlay.setHover(null, "");
+      return;
+    }
+    overlay.setHover(target, hoverLabel(target, kind), { kind });
+  };
+  const handlePointerMove = (e2) => {
+    setSuspended(e2.altKey);
+    lastPointerTarget = e2.target;
+    lastPointerX = e2.clientX;
+    lastPointerY = e2.clientY;
+    if (pointerFrame === null) {
+      pointerFrame = requestAnimationFrame(updateHover);
+    }
+  };
+  const handlePointerLeave = () => {
+    lastPointerTarget = null;
+    overlay.setHover(null, "");
+  };
+  const handleClick = (e2) => {
+    if (e2.altKey) {
+      const href = leavingLinkHref(e2.target);
+      if (href && guard.isActive()) guard.permit(href);
+      return;
+    }
+    const encoded = encodedFrom(e2.target);
+    const kind = encoded ? itemKind(encoded) : null;
+    if (!encoded || !kind) {
+      clearSelection();
+      if (e2.ctrlKey || e2.metaKey || e2.shiftKey || !showsEditedContent()) return;
+      const href = leavingLinkHref(e2.target);
+      if (!href) return;
+      e2.preventDefault();
+      if (guard.isActive()) {
+        e2.stopPropagation();
+        guard.block(href);
+      }
+      return;
+    }
+    e2.preventDefault();
+    e2.stopPropagation();
+    const item = listItemIn(encoded, e2.target);
+    if (kind === "current")
+      select(item?.element ?? encoded, encoded, item?.index);
+    const referenceField = kind === "referenced" ? referenceFieldOf(encoded) : void 0;
+    const linkedId = kind === "referenced" ? linkedIdOf(encoded) : null;
+    opts.onEdit({
+      ...readEditPayload(encoded),
+      ...linkedId && { id: linkedId },
+      ...item && { block: item.index },
+      ...referenceField && { referenceField }
+    });
+  };
+  const handleKey = (e2) => {
+    if (e2.key === "Alt") setSuspended(e2.type === "keydown");
+    if (e2.type === "keydown" && e2.key === "Escape") {
+      clearSelection();
+    }
+  };
+  const handleBlur = () => setSuspended(false);
+  const handleScroll = () => overlay.onScroll();
+  const handleResize = () => overlay.schedule();
+  const handleSettled = () => overlay.schedule();
+  function listItemIn(encoded, target) {
+    if (!(target instanceof Element)) return null;
+    const li = target.closest("li");
+    if (!li || !encoded.contains(li) || !li.parentElement) return null;
+    const items = Array.from(li.parentElement.children).filter(
+      (child) => child.tagName === "LI"
+    );
+    return { element: li, index: items.indexOf(li) };
+  }
+  function nthListItem(encoded, block) {
+    const list = encoded.querySelector("ul, ol");
+    if (!list) return null;
+    const items = Array.from(list.children).filter(
+      (child) => child.tagName === "LI"
+    );
+    return items[block] ?? null;
+  }
+  function select(el, field, block) {
+    const entryId = field.getAttribute("data-prepr-entry-id");
+    selection = {
+      lookup: {
+        field: field.getAttribute("data-prepr-field") ?? "",
+        id: field.getAttribute("data-prepr-id") ?? void 0,
+        ...entryId && { entryId },
+        ...block !== void 0 && { block }
+      },
+      label: field
+    };
+    overlay.setSelected(el, labelFor(field));
+    if (overlay.getHoverTarget() === el) overlay.setHover(null, "");
+  }
+  function clearSelection() {
+    selection = null;
+    overlay.setSelected(null, "");
+  }
+  function reselect() {
+    if (!selection) return;
+    const current = overlay.getSelectedTarget();
+    if (current?.isConnected && selection.label.isConnected) return;
+    const found = findFieldElement(selection.lookup);
+    if (!found || !isCurrentItem(found)) {
+      overlay.setSelected(null, "");
+      return;
+    }
+    const { block } = selection.lookup;
+    const el = block !== void 0 ? nthListItem(found, block) ?? found : found;
+    select(el, found, block);
+  }
+  function tagAssets() {
+    if (assetKeys.size > MAX_CACHED_KEYS) assetKeys.clear();
+    tagAssetImages(assetIndex, currentItemId, assetKeys);
+  }
+  const handleLayoutFrame = () => {
+    mutationFrame = null;
+    if (assetIndex.size) tagAssets();
+    reselect();
+    const hovered = overlay.getHoverTarget();
+    if (hovered && !hovered.isConnected) {
+      lastPointerTarget = document.elementFromPoint(lastPointerX, lastPointerY);
+      updateHover();
+      return;
+    }
+    overlay.schedule();
+  };
+  const handleMutations = () => {
+    if (mutationFrame !== null) return;
+    if (!selection && !overlay.getHoverTarget() && !assetIndex.size) return;
+    mutationFrame = requestAnimationFrame(handleLayoutFrame);
+  };
+  function injectCursorStyles() {
+    if (document.querySelector(`style[${CURSOR_STYLE_MARKER}]`)) return;
+    const style = document.createElement("style");
+    style.setAttribute(CURSOR_STYLE_MARKER, "");
+    style.textContent = CURSOR_STYLES;
+    document.head.appendChild(style);
+  }
+  function start() {
+    if (running) return;
+    running = true;
+    overlay.mount();
+    injectCursorStyles();
+    document.addEventListener("pointermove", handlePointerMove, {
+      passive: true
+    });
+    document.documentElement.addEventListener(
+      "pointerleave",
+      handlePointerLeave
+    );
+    document.addEventListener("click", handleClick, { capture: true });
+    window.addEventListener("keydown", handleKey);
+    window.addEventListener("keyup", handleKey);
+    window.addEventListener("blur", handleBlur);
+    window.addEventListener("scroll", handleScroll, {
+      capture: true,
+      passive: true
+    });
+    window.addEventListener("resize", handleResize, { passive: true });
+    document.addEventListener("transitionend", handleSettled, {
+      capture: true,
+      passive: true
+    });
+    document.addEventListener("animationend", handleSettled, {
+      capture: true,
+      passive: true
+    });
+    mutationObserver = new MutationObserver(handleMutations);
+    mutationObserver.observe(document.body, LAYOUT_MUTATIONS);
+    if (assetIndex.size) tagAssets();
+    syncGuard();
+    debug8.log("visual editor started");
+  }
+  function stop() {
+    if (!running) return;
+    running = false;
+    if (pointerFrame !== null) cancelAnimationFrame(pointerFrame);
+    if (mutationFrame !== null) cancelAnimationFrame(mutationFrame);
+    mutationObserver?.disconnect();
+    mutationObserver = null;
+    cancelFind();
+    pointerFrame = null;
+    mutationFrame = null;
+    selection = null;
+    lastPointerTarget = null;
+    setSuspended(false);
+    document.removeEventListener("pointermove", handlePointerMove);
+    document.documentElement.removeEventListener(
+      "pointerleave",
+      handlePointerLeave
+    );
+    document.removeEventListener("click", handleClick, { capture: true });
+    window.removeEventListener("keydown", handleKey);
+    window.removeEventListener("keyup", handleKey);
+    window.removeEventListener("blur", handleBlur);
+    window.removeEventListener("scroll", handleScroll, { capture: true });
+    window.removeEventListener("resize", handleResize);
+    document.removeEventListener("transitionend", handleSettled, {
+      capture: true
+    });
+    document.removeEventListener("animationend", handleSettled, {
+      capture: true
+    });
+    document.querySelectorAll(`style[${CURSOR_STYLE_MARKER}]`).forEach((node) => node.remove());
+    overlay.unmount();
+    untagAssetImages();
+    guard.stop();
+    debug8.log("visual editor stopped");
+  }
+  function cancelFind() {
+    if (findTimeout) clearTimeout(findTimeout);
+    findTimeout = null;
+    settlePendingFind?.();
+    settlePendingFind = null;
+  }
+  function focusField(lookup) {
+    cancelFind();
+    return new Promise((resolve2) => {
+      let attempt = 0;
+      const finish = (found) => {
+        settlePendingFind = null;
+        resolve2(found);
+      };
+      settlePendingFind = () => resolve2(false);
+      const tryFind = () => {
+        findTimeout = null;
+        const found = findFieldElement(lookup);
+        if (found) {
+          const el = lookup.block !== void 0 ? nthListItem(found, lookup.block) ?? found : found;
+          scrollIntoFrame(el);
+          if (running && isCurrentItem(found)) select(el, found, lookup.block);
+          finish(true);
+          return;
+        }
+        if (++attempt >= FIND_RETRIES) {
+          debug8.log("no element renders field", lookup.field);
+          finish(false);
+          return;
+        }
+        findTimeout = setTimeout(tryFind, FIND_RETRY_MS);
+      };
+      tryFind();
+    });
+  }
+  function setCurrentItem(itemId, referenceList, componentIds) {
+    currentItemId = itemId;
+    if (referenceList) setReferences(referenceList, componentIds);
+    else if (componentIds) ownComponents = new Set(componentIds);
+    if (running && assetIndex.size) tagAssets();
+    const selected = overlay.getSelectedTarget();
+    const owner = selected ? encodedFrom(selected) : null;
+    if (owner && !isCurrentItem(owner)) clearSelection();
+  }
+  function setAssets(assets) {
+    const hadAssets = assetIndex.size > 0;
+    assetIndex = createAssetIndex(assets);
+    if (running && (hadAssets || assetIndex.size)) tagAssets();
+  }
+  function setReferences(referenceList, componentIds) {
+    if (componentIds) ownComponents = new Set(componentIds);
+    references = /* @__PURE__ */ new Map();
+    for (const { id, field } of referenceList) {
+      if (!references.has(id)) references.set(id, field);
+    }
+  }
+  function setLocale(value) {
+    locale = value;
+  }
+  function syncGuard() {
+    if (running && guardEnabled) guard.start();
+    else guard.stop();
+  }
+  function setNavigationGuard(enabled) {
+    guardEnabled = enabled;
+    syncGuard();
+  }
+  return {
+    start,
+    stop,
+    setCurrentItem,
+    setReferences,
+    setAssets,
+    setLocale,
+    focusField,
+    setNavigationGuard,
+    allowNavigation: (href) => guard.allow(href)
+  };
+}
+
 // src/core/create-preview.ts
 var debug9 = createScopedLogger("create-preview");
 var controllerStores = /* @__PURE__ */ new WeakMap();
@@ -2265,29 +3398,45 @@ function createPreprPreview(opts = {}) {
     el.connect(store, (key) => t(key, locale));
   }
   const editingEnabled = features.editMode || isIframe;
-  const stega = createStegaController({
-    // The CMS deep-link tooltip is chrome, so it follows the same decision as
-    // the bar: noise inside the editor (clicking the element itself requests
-    // the edit there), and unwanted in a headless preview that asked for no UI.
-    tooltip: mountUi,
-    // In the editor, ask the parent to focus the field instead of opening a new
-    // tab. Standalone previews keep the window.open behaviour.
-    onEdit: ({ href, id, field, locale: contentLocale }) => {
-      const safeHref = href ? safeEditUrl(href) : null;
-      if (href && !safeHref) {
-        debug9.warn("ignored edit request with unsupported href scheme");
-        return;
-      }
-      if (isIframe) {
-        sendPreprEvent("field_edit_requested", {
-          id,
-          field,
-          locale: contentLocale
-        });
-      } else if (safeHref) {
-        window.open(safeHref, "_blank", "noopener,noreferrer");
-      }
+  const onEdit = ({
+    href,
+    id,
+    field,
+    locale: contentLocale,
+    block,
+    entryId,
+    referenceField
+  }) => {
+    const safeHref = href ? safeEditUrl(href) : null;
+    if (href && !safeHref) {
+      debug9.warn("ignored edit request with unsupported href scheme");
+      return;
     }
+    if (isIframe) {
+      sendPreprEvent("field_edit_requested", {
+        id,
+        field,
+        locale: contentLocale,
+        ...block !== void 0 && { block },
+        ...entryId && { entryId },
+        ...referenceField && { referenceField }
+      });
+    } else if (safeHref) {
+      window.open(safeHref, "_blank", "noopener,noreferrer");
+    }
+  };
+  const visualEditor = isIframe ? createVisualEditor({
+    onEdit,
+    locale,
+    onNavigationBlocked: (href) => sendPreprEvent("navigation_blocked", { href })
+  }) : null;
+  const stega = visualEditor ?? createStegaController({
+    // The edit-mode marks and hover label are chrome, so they follow the
+    // same decision as the bar: unwanted in a headless preview that asked
+    // for no UI.
+    tooltip: mountUi,
+    onEdit,
+    locale
   });
   const autoClean = createStegaAutoClean({
     enabled: options?.autoClean
@@ -2310,10 +3459,30 @@ function createPreprPreview(opts = {}) {
   });
   const bridge = createIframeBridge(store, {
     allowedEditorOrigins: options?.allowedEditorOrigins,
+    onHandshake: ({
+      itemId,
+      referencedIds,
+      componentIds,
+      uiLocale,
+      navigationGuard,
+      assets
+    }) => {
+      if (uiLocale) visualEditor?.setLocale(uiLocale);
+      visualEditor?.setCurrentItem(itemId ?? null, referencedIds, componentIds);
+      visualEditor?.setNavigationGuard(navigationGuard === true);
+      if (assets) visualEditor?.setAssets(assets);
+    },
+    onAssets: (assets) => visualEditor?.setAssets(assets),
+    onAllowNavigation: (href) => visualEditor?.allowNavigation(href),
+    onReferences: (referencedIds, componentIds) => visualEditor?.setReferences(referencedIds, componentIds),
     // The editor selecting a field scrolls the matching element into view. The
     // lookup relies on the attributes the stega scan writes, so it finds
     // nothing until encoded content has been tagged.
-    onScrollToField: ({ field, id }) => {
+    onScrollToField: ({ field, id, block, entryId, fieldById }) => {
+      if (visualEditor) {
+        void visualEditor.focusField({ field, id, block, entryId, fieldById });
+        return;
+      }
       if (!scrollToField({ field, id })) {
         debug9.log("no element on this page renders field", field);
       }
@@ -2348,7 +3517,7 @@ function createPreprPreview(opts = {}) {
 var import_react = require("react");
 
 // src/version.ts
-var VERSION = "0.5.0-rc.1";
+var VERSION = "0.5.0-rc.3";
 
 // src/core/pixel.ts
 var PIXEL_SCRIPT_URL = "https://cdn.tracking.prepr.io/js/prepr.min.js";