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

package/README.md

@@ -840,6 +840,13 @@ The rest is about rendering:
 - Prepr images are click-to-edit inside the editor without any markup: the
   toolkit matches image URLs (also through image optimizers like
   `/_next/image`) to the open item's assets.
+- **A removed image stays until the editor picks another or saves.** The
+  page keeps rendering it, faded to 20% opacity, so the layout does not
+  shift while the editor chooses a replacement. It stays click-to-edit and
+  opens its field. A newly picked image replaces it; after a save the page
+  renders stored content, so an empty state you render for a missing image
+  shows only then. In a field with several images, a removed one keeps its
+  place when the query selects the assets' `_id`.
 - **Set the attributes yourself only where that does not reach:**
   - Data you fetch in the browser without those helpers: run it through
     `annotateEditLinks(result, query)` from `@preprio/toolkit`, or mark the

package/dist/astro/index.cjs

@@ -31,7 +31,7 @@ __export(astro_exports, {
 module.exports = __toCommonJS(astro_exports);
 
 // src/version.ts
-var VERSION = "0.5.0-rc.11";
+var VERSION = "0.5.0-rc.12";
 
 // src/core/features.ts
 function isEnabled(config) {
@@ -490,8 +490,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;
   }
@@ -499,13 +523,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;

package/dist/astro/index.js

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "0.5.0-rc.11";
+var VERSION = "0.5.0-rc.12";
 
 // src/core/features.ts
 function isEnabled(config) {
@@ -462,8 +462,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;
   }
@@ -471,13 +495,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;

package/dist/{chunk-KD3GK6TO.js → chunk-CABGJW5X.js}

@@ -101,8 +101,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;
   }
@@ -110,13 +134,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;

package/dist/{chunk-URXSDJOU.js → chunk-H3AFUPYD.js}

@@ -239,6 +239,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();
@@ -329,6 +330,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() {

package/dist/{chunk-AOHA5INA.js → chunk-HVTNUCF7.js}

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "0.5.0-rc.11";
+var VERSION = "0.5.0-rc.12";
 
 // src/core/features.ts
 function isEnabled(config) {

package/dist/{chunk-IPMB32AZ.js → chunk-LWUSRWFE.js}

@@ -1,6 +1,6 @@
 import {
   isAllowedEditorOrigin
-} from "./chunk-URXSDJOU.js";
+} from "./chunk-H3AFUPYD.js";
 import {
   indexSnapshot,
   isLiveFieldChange,
@@ -8,7 +8,7 @@ import {
   parseListEntries,
   patchSnapshot,
   syncListSnapshot
-} from "./chunk-KD3GK6TO.js";
+} from "./chunk-CABGJW5X.js";
 import {
   createScopedLogger,
   getTrustedParentOrigin,

package/dist/{chunk-6423Q744.js → chunk-M7FT7XXV.js}

@@ -2,12 +2,12 @@ import {
   ALL_FEATURES_ENABLED,
   VERSION,
   resolveFeatures
-} from "./chunk-AOHA5INA.js";
+} from "./chunk-HVTNUCF7.js";
 import {
   createIframeBridge,
   isLocale,
   t
-} from "./chunk-URXSDJOU.js";
+} from "./chunk-H3AFUPYD.js";
 import {
   createScopedLogger,
   initDebugLogger,
@@ -2193,6 +2193,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
@@ -2202,7 +2203,8 @@ var TAG_ATTRIBUTES = [
   "data-prepr-id",
   "data-prepr-field",
   "data-prepr-entry-id",
-  ASSET_ATTR
+  ASSET_ATTR,
+  REMOVED_ATTR
 ];
 function decodeSegment(segment) {
   try {
@@ -2321,11 +2323,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);
@@ -2336,10 +2349,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
@@ -2515,11 +2532,13 @@ var CHROME_SELECTOR = "header, footer, nav, [role=banner], [role=contentinfo], [
 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,
@@ -2562,6 +2581,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()
@@ -2760,15 +2782,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) {
@@ -2780,7 +2819,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() {
@@ -2821,7 +2860,7 @@ function createVisualEditor(opts) {
     });
     mutationObserver = new MutationObserver(handleMutations);
     mutationObserver.observe(document.body, LAYOUT_MUTATIONS);
-    if (assetIndex.size) tagAssets();
+    if (hasAssets()) tagAssets();
     syncGuard();
     debug7.log("visual editor started");
   }
@@ -2897,18 +2936,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);
@@ -2934,6 +2979,7 @@ function createVisualEditor(opts) {
     setCurrentItem,
     setReferences,
     setAssets,
+    itemSaved,
     setLocale,
     focusField,
     setNavigationGuard,
@@ -3091,6 +3137,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

package/dist/{chunk-QSXIHRH4.js → chunk-TJ7VALNA.js}

@@ -1,7 +1,7 @@
 import {
   VERSION,
   resolveFeatures
-} from "./chunk-AOHA5INA.js";
+} from "./chunk-HVTNUCF7.js";
 
 // src/core/server.ts
 var PreprError = class extends Error {