@preprio/toolkit 0.5.0-rc.10 → 0.5.0-rc.12

package/dist/react/components.cjs

@@ -395,6 +395,7 @@ function createIframeBridge(store, options = {}) {
   const onReferences = options.onReferences;
   const onAssets = options.onAssets;
   const onAllowNavigation = options.onAllowNavigation;
+  const onItemChanged = options.onItemChanged;
   let parentOrigin = null;
   const onKeyDown = (event) => {
     const key = event.key.toLowerCase();
@@ -485,6 +486,14 @@ function createIframeBridge(store, options = {}) {
         debug.warn("allowNavigation handler failed", error);
       }
     }
+    if (data?.event === "prepr:itemChanged") {
+      if (typeof data.itemId !== "string" || !data.itemId) return;
+      try {
+        onItemChanged?.(data.itemId);
+      } catch (error) {
+        debug.warn("itemChanged handler failed", error);
+      }
+    }
   };
   return {
     start() {
@@ -2628,6 +2637,7 @@ 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 REMOVED_ATTR = "data-prepr-removed";
 var ASSET_SOURCE_ATTRIBUTES = [
   ...SOURCE_URL_ATTRIBUTES,
   ...SOURCE_SET_ATTRIBUTES
@@ -2637,7 +2647,8 @@ var TAG_ATTRIBUTES = [
   "data-prepr-id",
   "data-prepr-field",
   "data-prepr-entry-id",
-  ASSET_ATTR
+  ASSET_ATTR,
+  REMOVED_ATTR
 ];
 function decodeSegment(segment) {
   try {
@@ -2756,11 +2767,22 @@ function besideOtherItem(img, isCurrentItem) {
   return false;
 }
 function tagAssetImages(index, itemId, keys, options = {}) {
-  const { isCurrentItem } = options;
+  const { isCurrentItem, removed } = options;
+  let showsRemoved = false;
   for (const img of document.getElementsByTagName("img")) {
     const ours = img.hasAttribute(ASSET_ATTR);
-    if (!ours && img.hasAttribute("data-prepr-encoded")) continue;
-    const match = index.size ? matchAsset(img, index, keys) : void 0;
+    let match = index.size ? matchAsset(img, index, keys) : void 0;
+    let isRemoved = false;
+    if (!match && removed?.size) {
+      match = matchAsset(img, removed, keys);
+      isRemoved = match !== void 0;
+    }
+    if (!ours && img.hasAttribute("data-prepr-encoded")) {
+      const mark = isRemoved && (!isCurrentItem || isCurrentItem(img));
+      setIfChanged(img, REMOVED_ATTR, mark ? "" : null);
+      showsRemoved || (showsRemoved = mark);
+      continue;
+    }
     const asset = match && isCurrentItem && besideOtherItem(img, isCurrentItem) ? void 0 : match;
     if (!asset) {
       if (ours) untagAssetImage(img);
@@ -2771,10 +2793,14 @@ function tagAssetImages(index, itemId, keys, options = {}) {
     setIfChanged(img, "data-prepr-id", itemId);
     setIfChanged(img, "data-prepr-field", asset.field);
     setIfChanged(img, "data-prepr-entry-id", asset.entryId ?? null);
+    setIfChanged(img, REMOVED_ATTR, isRemoved ? "" : null);
+    showsRemoved || (showsRemoved = isRemoved);
   }
+  return showsRemoved;
 }
 function untagAssetImages() {
   document.querySelectorAll(`img[${ASSET_ATTR}]`).forEach(untagAssetImage);
+  document.querySelectorAll(`img[${REMOVED_ATTR}]`).forEach((img) => img.removeAttribute(REMOVED_ATTR));
 }
 
 // src/core/visual-editor/navigation-guard.ts
@@ -2944,12 +2970,19 @@ var debug8 = createScopedLogger("visual-editor");
 var ENCODED_SELECTOR2 = "[data-prepr-encoded]";
 var REFERENCE_ATTR = "data-prepr-reference";
 var REFERENCE_SELECTOR = `[${REFERENCE_ATTR}]`;
+var OTHER_ITEM_ATTR = "data-prepr-other-item";
+var OTHER_ITEM_SELECTOR = `[${OTHER_ITEM_ATTR}="on"],[${OTHER_ITEM_ATTR}="off"]`;
+var CHROME_SELECTOR = "header, footer, nav, [role=banner], [role=contentinfo], [role=navigation]";
+var SECTIONING_SELECTOR = "article, aside, main, nav, section";
+var PLAIN_HEADER_FOOTER = "header:not([role]), footer:not([role])";
 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 REMOVED_STYLES = `img[${REMOVED_ATTR}]{opacity:.2!important;transition:opacity .2s ease}@media (prefers-reduced-motion:reduce){img[${REMOVED_ATTR}]{transition:none}}`;
+var CURSOR_STYLES = `${ENCODED_SELECTOR2}{cursor:pointer}html[data-prepr-ve-suspended] ${ENCODED_SELECTOR2}{cursor:auto}${REMOVED_STYLES}`;
 var SUSPENDED_ATTR = "data-prepr-ve-suspended";
 var FIND_RETRY_MS = 150;
 var FIND_RETRIES = 6;
 var MAX_CACHED_KEYS = 2e3;
+var SAVED_FADE_MS = 1e4;
 var LAYOUT_MUTATIONS = {
   childList: true,
   subtree: true,
@@ -2992,6 +3025,9 @@ function createVisualEditor(opts) {
   let guardEnabled = false;
   let assetIndex = /* @__PURE__ */ new Map();
   const assetKeys = /* @__PURE__ */ new Map();
+  const removedAssets = /* @__PURE__ */ new Map();
+  let saved = false;
+  let savedTimeout = null;
   const guard = createNavigationGuard({
     onBlocked: (href) => opts.onNavigationBlocked?.(href),
     showsEditedContent: () => showsEditedContent()
@@ -3023,10 +3059,26 @@ function createVisualEditor(opts) {
     }
     return null;
   };
+  const inSiteChrome = (el) => {
+    let chrome = el.closest(CHROME_SELECTOR);
+    while (chrome) {
+      if (!chrome.matches(PLAIN_HEADER_FOOTER) || !chrome.parentElement?.closest(SECTIONING_SELECTOR)) {
+        return true;
+      }
+      chrome = chrome.parentElement?.closest(CHROME_SELECTOR) ?? null;
+    }
+    return false;
+  };
+  const showsOtherItem = (el) => {
+    const choice = el.closest(OTHER_ITEM_SELECTOR);
+    if (choice) return choice.getAttribute(OTHER_ITEM_ATTR) === "on";
+    return !inSiteChrome(el);
+  };
   const itemKind = (el) => {
     if (isCurrentItem(el)) return "current";
     if (!references) return "other";
-    return linkedIdOf(el) ? "referenced" : null;
+    if (linkedIdOf(el)) return "referenced";
+    return showsOtherItem(el) ? "other" : null;
   };
   const referenceFieldOf = (el) => {
     const linked = linkedIdOf(el);
@@ -3099,6 +3151,7 @@ function createVisualEditor(opts) {
       }
       return;
     }
+    if (kind === "other" && (e2.ctrlKey || e2.metaKey || e2.shiftKey)) return;
     e2.preventDefault();
     e2.stopPropagation();
     const item = listItemIn(encoded, e2.target);
@@ -3106,11 +3159,13 @@ function createVisualEditor(opts) {
       select(item?.element ?? encoded, encoded, item?.index);
     const referenceField = kind === "referenced" ? referenceFieldOf(encoded) : void 0;
     const linkedId = kind === "referenced" ? linkedIdOf(encoded) : null;
+    const linkHref = kind === "other" ? leavingLinkHref(e2.target) : null;
     opts.onEdit({
       ...readEditPayload(encoded),
       ...linkedId && { id: linkedId },
       ...item && { block: item.index },
-      ...referenceField && { referenceField }
+      ...referenceField && { referenceField },
+      ...linkHref && { linkHref }
     });
   };
   const handleKey = (e2) => {
@@ -3171,15 +3226,32 @@ function createVisualEditor(opts) {
     const el = block !== void 0 ? nthListItem(found, block) ?? found : found;
     select(el, found, block);
   }
+  const hasAssets = () => assetIndex.size > 0 || removedAssets.size > 0;
   function tagAssets() {
     if (assetKeys.size > MAX_CACHED_KEYS) assetKeys.clear();
-    tagAssetImages(assetIndex, currentItemId, assetKeys, {
-      isCurrentItem: (el) => isCurrentItem(el)
+    const showsRemoved = tagAssetImages(assetIndex, currentItemId, assetKeys, {
+      isCurrentItem: (el) => isCurrentItem(el),
+      removed: removedAssets
     });
+    if (saved && !showsRemoved) forgetRemoved();
+  }
+  function forgetRemoved() {
+    saved = false;
+    if (savedTimeout) clearTimeout(savedTimeout);
+    savedTimeout = null;
+    if (!removedAssets.size) return;
+    removedAssets.clear();
+    if (running) tagAssets();
+  }
+  function itemSaved() {
+    if (!removedAssets.size) return;
+    saved = true;
+    if (savedTimeout) clearTimeout(savedTimeout);
+    savedTimeout = setTimeout(forgetRemoved, SAVED_FADE_MS);
   }
   const handleLayoutFrame = () => {
     mutationFrame = null;
-    if (assetIndex.size) tagAssets();
+    if (hasAssets()) tagAssets();
     reselect();
     const hovered = overlay.getHoverTarget();
     if (hovered && !hovered.isConnected) {
@@ -3191,7 +3263,7 @@ function createVisualEditor(opts) {
   };
   const handleMutations = () => {
     if (mutationFrame !== null) return;
-    if (!selection && !overlay.getHoverTarget() && !assetIndex.size) return;
+    if (!selection && !overlay.getHoverTarget() && !hasAssets()) return;
     mutationFrame = requestAnimationFrame(handleLayoutFrame);
   };
   function injectCursorStyles() {
@@ -3232,7 +3304,7 @@ function createVisualEditor(opts) {
     });
     mutationObserver = new MutationObserver(handleMutations);
     mutationObserver.observe(document.body, LAYOUT_MUTATIONS);
-    if (assetIndex.size) tagAssets();
+    if (hasAssets()) tagAssets();
     syncGuard();
     debug8.log("visual editor started");
   }
@@ -3308,18 +3380,24 @@ function createVisualEditor(opts) {
     });
   }
   function setCurrentItem(itemId, referenceList, componentIds) {
+    if (itemId !== currentItemId) forgetRemoved();
     currentItemId = itemId;
     if (referenceList) setReferences(referenceList, componentIds);
     else if (componentIds) ownComponents = new Set(componentIds);
-    if (running && assetIndex.size) tagAssets();
+    if (running && hasAssets()) 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();
+    const hadAssets = hasAssets();
+    const next = createAssetIndex(assets);
+    for (const [key, asset] of assetIndex) {
+      if (!next.has(key)) removedAssets.set(key, asset);
+    }
+    for (const key of next.keys()) removedAssets.delete(key);
+    assetIndex = next;
+    if (running && (hadAssets || hasAssets())) tagAssets();
   }
   function setReferences(referenceList, componentIds) {
     if (componentIds) ownComponents = new Set(componentIds);
@@ -3345,6 +3423,7 @@ function createVisualEditor(opts) {
     setCurrentItem,
     setReferences,
     setAssets,
+    itemSaved,
     setLocale,
     focusField,
     setNavigationGuard,
@@ -3431,7 +3510,8 @@ function createPreprPreview(opts = {}) {
     locale: contentLocale,
     block,
     entryId,
-    referenceField
+    referenceField,
+    linkHref
   }) => {
     const safeHref = href ? safeEditUrl(href) : null;
     if (href && !safeHref) {
@@ -3445,7 +3525,8 @@ function createPreprPreview(opts = {}) {
         locale: contentLocale,
         ...block !== void 0 && { block },
         ...entryId && { entryId },
-        ...referenceField && { referenceField }
+        ...referenceField && { referenceField },
+        ...linkHref && { linkHref }
       });
     } else if (safeHref) {
       window.open(safeHref, "_blank", "noopener,noreferrer");
@@ -3500,6 +3581,7 @@ function createPreprPreview(opts = {}) {
     },
     onAssets: (assets) => visualEditor?.setAssets(assets),
     onAllowNavigation: (href) => visualEditor?.allowNavigation(href),
+    onItemChanged: () => visualEditor?.itemSaved(),
     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
@@ -3540,7 +3622,7 @@ function createPreprPreview(opts = {}) {
 }
 
 // src/version.ts
-var VERSION = "0.5.0-rc.10";
+var VERSION = "0.5.0-rc.12";
 
 // src/core/pixel.ts
 var PIXEL_SCRIPT_URL = "https://cdn.tracking.prepr.io/js/prepr.min.js";

package/dist/react/components.js

@@ -371,6 +371,7 @@ function createIframeBridge(store, options = {}) {
   const onReferences = options.onReferences;
   const onAssets = options.onAssets;
   const onAllowNavigation = options.onAllowNavigation;
+  const onItemChanged = options.onItemChanged;
   let parentOrigin = null;
   const onKeyDown = (event) => {
     const key = event.key.toLowerCase();
@@ -461,6 +462,14 @@ function createIframeBridge(store, options = {}) {
         debug.warn("allowNavigation handler failed", error);
       }
     }
+    if (data?.event === "prepr:itemChanged") {
+      if (typeof data.itemId !== "string" || !data.itemId) return;
+      try {
+        onItemChanged?.(data.itemId);
+      } catch (error) {
+        debug.warn("itemChanged handler failed", error);
+      }
+    }
   };
   return {
     start() {
@@ -2604,6 +2613,7 @@ 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 REMOVED_ATTR = "data-prepr-removed";
 var ASSET_SOURCE_ATTRIBUTES = [
   ...SOURCE_URL_ATTRIBUTES,
   ...SOURCE_SET_ATTRIBUTES
@@ -2613,7 +2623,8 @@ var TAG_ATTRIBUTES = [
   "data-prepr-id",
   "data-prepr-field",
   "data-prepr-entry-id",
-  ASSET_ATTR
+  ASSET_ATTR,
+  REMOVED_ATTR
 ];
 function decodeSegment(segment) {
   try {
@@ -2732,11 +2743,22 @@ function besideOtherItem(img, isCurrentItem) {
   return false;
 }
 function tagAssetImages(index, itemId, keys, options = {}) {
-  const { isCurrentItem } = options;
+  const { isCurrentItem, removed } = options;
+  let showsRemoved = false;
   for (const img of document.getElementsByTagName("img")) {
     const ours = img.hasAttribute(ASSET_ATTR);
-    if (!ours && img.hasAttribute("data-prepr-encoded")) continue;
-    const match = index.size ? matchAsset(img, index, keys) : void 0;
+    let match = index.size ? matchAsset(img, index, keys) : void 0;
+    let isRemoved = false;
+    if (!match && removed?.size) {
+      match = matchAsset(img, removed, keys);
+      isRemoved = match !== void 0;
+    }
+    if (!ours && img.hasAttribute("data-prepr-encoded")) {
+      const mark = isRemoved && (!isCurrentItem || isCurrentItem(img));
+      setIfChanged(img, REMOVED_ATTR, mark ? "" : null);
+      showsRemoved || (showsRemoved = mark);
+      continue;
+    }
     const asset = match && isCurrentItem && besideOtherItem(img, isCurrentItem) ? void 0 : match;
     if (!asset) {
       if (ours) untagAssetImage(img);
@@ -2747,10 +2769,14 @@ function tagAssetImages(index, itemId, keys, options = {}) {
     setIfChanged(img, "data-prepr-id", itemId);
     setIfChanged(img, "data-prepr-field", asset.field);
     setIfChanged(img, "data-prepr-entry-id", asset.entryId ?? null);
+    setIfChanged(img, REMOVED_ATTR, isRemoved ? "" : null);
+    showsRemoved || (showsRemoved = isRemoved);
   }
+  return showsRemoved;
 }
 function untagAssetImages() {
   document.querySelectorAll(`img[${ASSET_ATTR}]`).forEach(untagAssetImage);
+  document.querySelectorAll(`img[${REMOVED_ATTR}]`).forEach((img) => img.removeAttribute(REMOVED_ATTR));
 }
 
 // src/core/visual-editor/navigation-guard.ts
@@ -2920,12 +2946,19 @@ var debug8 = createScopedLogger("visual-editor");
 var ENCODED_SELECTOR2 = "[data-prepr-encoded]";
 var REFERENCE_ATTR = "data-prepr-reference";
 var REFERENCE_SELECTOR = `[${REFERENCE_ATTR}]`;
+var OTHER_ITEM_ATTR = "data-prepr-other-item";
+var OTHER_ITEM_SELECTOR = `[${OTHER_ITEM_ATTR}="on"],[${OTHER_ITEM_ATTR}="off"]`;
+var CHROME_SELECTOR = "header, footer, nav, [role=banner], [role=contentinfo], [role=navigation]";
+var SECTIONING_SELECTOR = "article, aside, main, nav, section";
+var PLAIN_HEADER_FOOTER = "header:not([role]), footer:not([role])";
 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 REMOVED_STYLES = `img[${REMOVED_ATTR}]{opacity:.2!important;transition:opacity .2s ease}@media (prefers-reduced-motion:reduce){img[${REMOVED_ATTR}]{transition:none}}`;
+var CURSOR_STYLES = `${ENCODED_SELECTOR2}{cursor:pointer}html[data-prepr-ve-suspended] ${ENCODED_SELECTOR2}{cursor:auto}${REMOVED_STYLES}`;
 var SUSPENDED_ATTR = "data-prepr-ve-suspended";
 var FIND_RETRY_MS = 150;
 var FIND_RETRIES = 6;
 var MAX_CACHED_KEYS = 2e3;
+var SAVED_FADE_MS = 1e4;
 var LAYOUT_MUTATIONS = {
   childList: true,
   subtree: true,
@@ -2968,6 +3001,9 @@ function createVisualEditor(opts) {
   let guardEnabled = false;
   let assetIndex = /* @__PURE__ */ new Map();
   const assetKeys = /* @__PURE__ */ new Map();
+  const removedAssets = /* @__PURE__ */ new Map();
+  let saved = false;
+  let savedTimeout = null;
   const guard = createNavigationGuard({
     onBlocked: (href) => opts.onNavigationBlocked?.(href),
     showsEditedContent: () => showsEditedContent()
@@ -2999,10 +3035,26 @@ function createVisualEditor(opts) {
     }
     return null;
   };
+  const inSiteChrome = (el) => {
+    let chrome = el.closest(CHROME_SELECTOR);
+    while (chrome) {
+      if (!chrome.matches(PLAIN_HEADER_FOOTER) || !chrome.parentElement?.closest(SECTIONING_SELECTOR)) {
+        return true;
+      }
+      chrome = chrome.parentElement?.closest(CHROME_SELECTOR) ?? null;
+    }
+    return false;
+  };
+  const showsOtherItem = (el) => {
+    const choice = el.closest(OTHER_ITEM_SELECTOR);
+    if (choice) return choice.getAttribute(OTHER_ITEM_ATTR) === "on";
+    return !inSiteChrome(el);
+  };
   const itemKind = (el) => {
     if (isCurrentItem(el)) return "current";
     if (!references) return "other";
-    return linkedIdOf(el) ? "referenced" : null;
+    if (linkedIdOf(el)) return "referenced";
+    return showsOtherItem(el) ? "other" : null;
   };
   const referenceFieldOf = (el) => {
     const linked = linkedIdOf(el);
@@ -3075,6 +3127,7 @@ function createVisualEditor(opts) {
       }
       return;
     }
+    if (kind === "other" && (e2.ctrlKey || e2.metaKey || e2.shiftKey)) return;
     e2.preventDefault();
     e2.stopPropagation();
     const item = listItemIn(encoded, e2.target);
@@ -3082,11 +3135,13 @@ function createVisualEditor(opts) {
       select(item?.element ?? encoded, encoded, item?.index);
     const referenceField = kind === "referenced" ? referenceFieldOf(encoded) : void 0;
     const linkedId = kind === "referenced" ? linkedIdOf(encoded) : null;
+    const linkHref = kind === "other" ? leavingLinkHref(e2.target) : null;
     opts.onEdit({
       ...readEditPayload(encoded),
       ...linkedId && { id: linkedId },
       ...item && { block: item.index },
-      ...referenceField && { referenceField }
+      ...referenceField && { referenceField },
+      ...linkHref && { linkHref }
     });
   };
   const handleKey = (e2) => {
@@ -3147,15 +3202,32 @@ function createVisualEditor(opts) {
     const el = block !== void 0 ? nthListItem(found, block) ?? found : found;
     select(el, found, block);
   }
+  const hasAssets = () => assetIndex.size > 0 || removedAssets.size > 0;
   function tagAssets() {
     if (assetKeys.size > MAX_CACHED_KEYS) assetKeys.clear();
-    tagAssetImages(assetIndex, currentItemId, assetKeys, {
-      isCurrentItem: (el) => isCurrentItem(el)
+    const showsRemoved = tagAssetImages(assetIndex, currentItemId, assetKeys, {
+      isCurrentItem: (el) => isCurrentItem(el),
+      removed: removedAssets
     });
+    if (saved && !showsRemoved) forgetRemoved();
+  }
+  function forgetRemoved() {
+    saved = false;
+    if (savedTimeout) clearTimeout(savedTimeout);
+    savedTimeout = null;
+    if (!removedAssets.size) return;
+    removedAssets.clear();
+    if (running) tagAssets();
+  }
+  function itemSaved() {
+    if (!removedAssets.size) return;
+    saved = true;
+    if (savedTimeout) clearTimeout(savedTimeout);
+    savedTimeout = setTimeout(forgetRemoved, SAVED_FADE_MS);
   }
   const handleLayoutFrame = () => {
     mutationFrame = null;
-    if (assetIndex.size) tagAssets();
+    if (hasAssets()) tagAssets();
     reselect();
     const hovered = overlay.getHoverTarget();
     if (hovered && !hovered.isConnected) {
@@ -3167,7 +3239,7 @@ function createVisualEditor(opts) {
   };
   const handleMutations = () => {
     if (mutationFrame !== null) return;
-    if (!selection && !overlay.getHoverTarget() && !assetIndex.size) return;
+    if (!selection && !overlay.getHoverTarget() && !hasAssets()) return;
     mutationFrame = requestAnimationFrame(handleLayoutFrame);
   };
   function injectCursorStyles() {
@@ -3208,7 +3280,7 @@ function createVisualEditor(opts) {
     });
     mutationObserver = new MutationObserver(handleMutations);
     mutationObserver.observe(document.body, LAYOUT_MUTATIONS);
-    if (assetIndex.size) tagAssets();
+    if (hasAssets()) tagAssets();
     syncGuard();
     debug8.log("visual editor started");
   }
@@ -3284,18 +3356,24 @@ function createVisualEditor(opts) {
     });
   }
   function setCurrentItem(itemId, referenceList, componentIds) {
+    if (itemId !== currentItemId) forgetRemoved();
     currentItemId = itemId;
     if (referenceList) setReferences(referenceList, componentIds);
     else if (componentIds) ownComponents = new Set(componentIds);
-    if (running && assetIndex.size) tagAssets();
+    if (running && hasAssets()) 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();
+    const hadAssets = hasAssets();
+    const next = createAssetIndex(assets);
+    for (const [key, asset] of assetIndex) {
+      if (!next.has(key)) removedAssets.set(key, asset);
+    }
+    for (const key of next.keys()) removedAssets.delete(key);
+    assetIndex = next;
+    if (running && (hadAssets || hasAssets())) tagAssets();
   }
   function setReferences(referenceList, componentIds) {
     if (componentIds) ownComponents = new Set(componentIds);
@@ -3321,6 +3399,7 @@ function createVisualEditor(opts) {
     setCurrentItem,
     setReferences,
     setAssets,
+    itemSaved,
     setLocale,
     focusField,
     setNavigationGuard,
@@ -3407,7 +3486,8 @@ function createPreprPreview(opts = {}) {
     locale: contentLocale,
     block,
     entryId,
-    referenceField
+    referenceField,
+    linkHref
   }) => {
     const safeHref = href ? safeEditUrl(href) : null;
     if (href && !safeHref) {
@@ -3421,7 +3501,8 @@ function createPreprPreview(opts = {}) {
         locale: contentLocale,
         ...block !== void 0 && { block },
         ...entryId && { entryId },
-        ...referenceField && { referenceField }
+        ...referenceField && { referenceField },
+        ...linkHref && { linkHref }
       });
     } else if (safeHref) {
       window.open(safeHref, "_blank", "noopener,noreferrer");
@@ -3476,6 +3557,7 @@ function createPreprPreview(opts = {}) {
     },
     onAssets: (assets) => visualEditor?.setAssets(assets),
     onAllowNavigation: (href) => visualEditor?.allowNavigation(href),
+    onItemChanged: () => visualEditor?.itemSaved(),
     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
@@ -3516,7 +3598,7 @@ function createPreprPreview(opts = {}) {
 }
 
 // src/version.ts
-var VERSION = "0.5.0-rc.10";
+var VERSION = "0.5.0-rc.12";
 
 // src/core/pixel.ts
 var PIXEL_SCRIPT_URL = "https://cdn.tracking.prepr.io/js/prepr.min.js";

package/dist/sveltekit/index.cjs

@@ -35,7 +35,7 @@ __export(sveltekit_exports, {
 module.exports = __toCommonJS(sveltekit_exports);
 
 // src/version.ts
-var VERSION = "0.5.0-rc.10";
+var VERSION = "0.5.0-rc.12";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/sveltekit/index.js

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "0.5.0-rc.10";
+var VERSION = "0.5.0-rc.12";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/sveltekit/{live-preview-2RCU35W5.js → live-preview-XMQQZHMZ.js}

@@ -160,8 +160,32 @@ function shapeLike(template, incoming) {
   }
   return out;
 }
+function isAsset(value) {
+  return isPlainObject(value) && (typeof value.url === "string" || value.__typename === "Asset");
+}
+function hasId(list, entry) {
+  return entry._id !== void 0 && list.some((c) => isPlainObject(c) && c._id === entry._id);
+}
+function isAssetValue(value) {
+  return Array.isArray(value) ? value.length > 0 && value.every(isAsset) : isAsset(value);
+}
+function keepRemovedAssets(current, next) {
+  const listed = /* @__PURE__ */ new Set();
+  for (const entry of next) {
+    if (isPlainObject(entry) && entry._id !== void 0) listed.add(entry._id);
+  }
+  let out = next;
+  current.forEach((entry, position) => {
+    if (!isPlainObject(entry) || entry._id === void 0) return;
+    if (listed.has(entry._id)) return;
+    if (out === next) out = [...next];
+    out.splice(Math.min(position, out.length), 0, entry);
+  });
+  return out;
+}
 function mergeStructured(current, incoming) {
   if (incoming === null || Array.isArray(incoming) && !incoming.length) {
+    if (isAssetValue(current)) return current;
     if (Array.isArray(current)) return current.length ? [] : current;
     return null;
   }
@@ -169,13 +193,18 @@ function mergeStructured(current, incoming) {
   if (current === null || current === void 0) return incoming;
   if (Array.isArray(current)) {
     const template = current.find(isPlainObject);
-    return list.map((entry) => {
+    const next = list.map((entry) => {
       const match = current.find(
         (c) => isPlainObject(c) && c._id !== void 0 && c._id === entry._id
       );
       if (isPlainObject(match)) return mergeObject(match, entry);
       return isPlainObject(template) ? shapeLike(template, entry) : entry;
     });
+    if (!isAssetValue(current) || list.some((entry) => !hasId(current, entry))) {
+      return next;
+    }
+    const kept = keepRemovedAssets(current, next);
+    return kept.length === current.length && kept.every((entry, i) => entry === current[i]) ? current : kept;
   }
   if (isPlainObject(current)) return mergeObject(current, list[0]);
   return current;