@rslsp1/fa-app-tools 4.0.0 → 5.0.0

package/dist/szenen.js

@@ -146,13 +146,16 @@ __export(szenen_exports, {
   freezeDraftChain: () => freezeDraftChain,
   freezeSceneWorkingState: () => freezeSceneWorkingState,
   getSzenenSchemas: () => getSzenenSchemas,
+  gruppiereZuItems: () => gruppiereZuItems,
   hasPlacementCapability: () => hasPlacementCapability,
   isKnownElementType: () => isKnownElementType,
   isOk: () => isOk,
   isProjectionCurrent: () => isProjectionCurrent,
   isSzenenItemId: () => isSzenenItemId,
   itemIdForRun: () => itemIdForRun,
+  ladeVorschauen: () => ladeVorschauen,
   linkFor: () => linkFor,
+  locatorTeile: () => locatorTeile,
   logRevisionOf: () => logRevisionOf,
   mergeSzenenBatchOrigin: () => mergeSzenenBatchOrigin,
   noticeFor: () => noticeFor,
@@ -10200,6 +10203,7 @@ function createHfImageStore(options) {
   const basisMs = options.leseBasisMs ?? 400;
   const schlafen2 = options.schlafen ?? warten;
   const abgelegt = /* @__PURE__ */ new Map();
+  const vorschauen = /* @__PURE__ */ new Map();
   const bekanntePfade = /* @__PURE__ */ new Set();
   let gefalteterBestand = null;
   let laufenderAbgleich = null;
@@ -10223,7 +10227,7 @@ function createHfImageStore(options) {
     }
     return laufenderAbgleich;
   }
-  return {
+  const speicher = {
     bestand: bestandAbgleichen,
     async putWithId(id, base64, mimeType, titel) {
       const echterTyp = typAusBytes(base64, mimeType);
@@ -10242,6 +10246,38 @@ function createHfImageStore(options) {
       }, []);
       abgelegt.set(id, { data: base64, mimeType: echterTyp });
     },
+    async preview(id) {
+      const bekannt = vorschauen.get(id);
+      if (bekannt) return bekannt;
+      const eben = abgelegt.get(id);
+      if (eben) {
+        const quelle2 = `data:${eben.mimeType};base64,${eben.data}`;
+        vorschauen.set(id, quelle2);
+        return quelle2;
+      }
+      const zustand = await bestandAbgleichen();
+      const eintrag = zustand.metadata.find((e) => e.id === id);
+      if (eintrag?.hasThumb && eintrag.filename) {
+        const klein = await hfLoadImageAsBase64(
+          id,
+          token,
+          void 0,
+          eintrag.filename,
+          void 0,
+          eintrag.mimeType,
+          true
+        );
+        if (klein) {
+          const quelle2 = `data:${eintrag.mimeType || "image/jpeg"};base64,${klein}`;
+          vorschauen.set(id, quelle2);
+          return quelle2;
+        }
+      }
+      const voll = await speicher.resolve(id);
+      const quelle = `data:${voll.mimeType};base64,${voll.data}`;
+      vorschauen.set(id, quelle);
+      return quelle;
+    },
     async resolve(id, mimeType) {
       const eben = abgelegt.get(id);
       if (eben) return eben;
@@ -10279,6 +10315,47 @@ function createHfImageStore(options) {
       );
     }
   };
+  return speicher;
+}
+
+// src/lib/szenen/libraryItems.ts
+var LOCATOR = /^(.+)-(\d+)$/;
+function locatorTeile(mediaRef) {
+  const treffer = LOCATOR.exec(mediaRef);
+  if (!treffer) return { stamm: mediaRef, position: null };
+  return { stamm: treffer[1], position: Number(treffer[2]) };
+}
+function gruppiereZuItems(bilder) {
+  const gruppen = /* @__PURE__ */ new Map();
+  for (const bild of bilder) {
+    const { stamm } = locatorTeile(bild.mediaRef);
+    const vorhanden = gruppen.get(stamm);
+    if (vorhanden) vorhanden.push(bild);
+    else gruppen.set(stamm, [bild]);
+  }
+  const items = [...gruppen.entries()].map(([stamm, mitglieder]) => {
+    const sortiert = [...mitglieder].sort((a, b) => {
+      const pa = locatorTeile(a.mediaRef).position ?? 0;
+      const pb = locatorTeile(b.mediaRef).position ?? 0;
+      return pa - pb;
+    });
+    const erstes = sortiert[0];
+    const itemRef = sortiert.length === 1 ? erstes.mediaRef : stamm;
+    const juengstes = sortiert.reduce(
+      (max, b) => Math.max(max, b.timestamp ?? 0),
+      0
+    );
+    return {
+      item: {
+        itemRef,
+        title: erstes.itemTitle?.trim() || erstes.title || itemRef,
+        images: sortiert.map(({ timestamp: _t, itemTitle: _i, ...bild }) => bild)
+      },
+      juengstes
+    };
+  });
+  items.sort((a, b) => b.juengstes - a.juengstes);
+  return items.map((e) => e.item);
 }
 
 // src/lib/szenen/hfImageLibrary.ts
@@ -10286,13 +10363,22 @@ function fehler(nachricht, retryable = false) {
   return { kind: "error", message: nachricht, retryable };
 }
 function alsBild(eintrag) {
+  const { position } = locatorTeile(eintrag.id);
+  const werk = eintrag.prompt?.trim() || "";
   return {
     mediaRef: eintrag.id,
-    // Der Prompt ist der einzige menschenlesbare Text, den ein Bild dort trägt.
-    // Fehlt er, ist die Kennung ehrlicher als ein erfundener Name.
-    title: eintrag.prompt?.trim() || eintrag.id,
+    // Innerhalb eines mehrbildigen Werkes tragen alle Einträge denselben
+    // Prompt — der Abgleich schreibt ihn je Bild aus derselben Library-Zeile.
+    // Deshalb bekommt die Kachel dort die Position dazu, sonst stünde
+    // vierzehnmal derselbe Satz.
+    title: position === null ? werk || eintrag.id : `${werk || eintrag.id} \xB7 Bild ${position + 1}`,
     mimeType: eintrag.mimeType || "image/jpeg",
-    thumbUrl: null
+    // Kein `thumbUrl`: Die Datei liegt auf HF hinter einem Token, und ein
+    // `<img src>` käme dort nicht durch. Die Quelle entsteht über
+    // `loadPreview()` — und nur für die Kacheln, die wirklich gezeigt werden.
+    thumbUrl: null,
+    itemTitle: werk || null,
+    ...typeof eintrag.timestamp === "number" ? { timestamp: eintrag.timestamp } : {}
   };
 }
 function createHfImageLibrary(options) {
@@ -10303,15 +10389,14 @@ function createHfImageLibrary(options) {
     ...options.now ? { now: options.now } : {}
   });
   return {
-    async listImages(query) {
+    async listItems(query) {
       try {
         const zustand = await store.bestand();
         const eintraege = zustand?.metadata ?? [];
+        const items = gruppiereZuItems(eintraege.map(alsBild));
         const gesucht = query?.search?.trim().toLowerCase();
-        const gefiltert = gesucht ? eintraege.filter((e) => (e.prompt ?? "").toLowerCase().includes(gesucht) || e.id.toLowerCase().includes(gesucht)) : eintraege;
-        const sortiert = [...gefiltert].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
-        const begrenzt = query?.limit ? sortiert.slice(0, query.limit) : sortiert;
-        return { kind: "ok", value: begrenzt.map(alsBild) };
+        const gefiltert = gesucht ? items.filter((i) => i.title.toLowerCase().includes(gesucht) || i.itemRef.toLowerCase().includes(gesucht)) : items;
+        return { kind: "ok", value: query?.limit ? gefiltert.slice(0, query.limit) : gefiltert };
       } catch (error) {
         return fehler(
           `Der Bildbestand konnte nicht gelesen werden: ${error instanceof Error ? error.message : String(error)}`,
@@ -10319,6 +10404,16 @@ function createHfImageLibrary(options) {
         );
       }
     },
+    async loadPreview(mediaRef) {
+      try {
+        return { kind: "ok", value: await store.preview(mediaRef) };
+      } catch (error) {
+        return fehler(
+          `Die Vorschau von ${mediaRef} ist nicht ladbar: ${error instanceof Error ? error.message : String(error)}`,
+          true
+        );
+      }
+    },
     async resolveImage(mediaRef, mimeTypeHinweis) {
       try {
         const bild = await store.resolve(mediaRef, mimeTypeHinweis);
@@ -10331,10 +10426,13 @@ function createHfImageLibrary(options) {
       const id = newImageId();
       try {
         await store.putWithId(id, input.data, input.mime_type, input.title);
-        return {
-          kind: "ok",
-          value: { mediaRef: id, title: input.title, mimeType: input.mime_type, thumbUrl: null }
+        const abgelegt = {
+          mediaRef: id,
+          title: input.title,
+          mimeType: input.mime_type,
+          thumbUrl: null
         };
+        return { kind: "ok", value: abgelegt };
       } catch (error) {
         return fehler(
           `Das Bild konnte nicht abgelegt werden: ${error instanceof Error ? error.message : String(error)}`,
@@ -10345,6 +10443,29 @@ function createHfImageLibrary(options) {
   };
 }
 
+// src/lib/szenen/bildVorschau.ts
+async function ladeVorschauen(port, mediaRefs, fertig, optionen = {}) {
+  const laden = port.loadPreview;
+  if (!laden) return;
+  const parallel = Math.max(1, optionen.parallel ?? 4);
+  const lauf = optionen.lauf;
+  const offen = mediaRefs.filter((ref) => !(optionen.hat?.(ref) ?? false));
+  let naechster = 0;
+  async function arbeiter() {
+    while (naechster < offen.length) {
+      if (lauf?.abgebrochen) return;
+      const ref = offen[naechster];
+      naechster += 1;
+      const ergebnis = await laden.call(port, ref);
+      if (lauf?.abgebrochen) return;
+      if (ergebnis.kind === "ok") fertig(ref, ergebnis.value);
+    }
+  }
+  await Promise.all(
+    Array.from({ length: Math.min(parallel, offen.length) }, () => arbeiter())
+  );
+}
+
 // src/lib/szenen/imageGenerationCapability.ts
 var isObject11 = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 var istText5 = (v) => typeof v === "string" && v.trim().length > 0;
@@ -11032,15 +11153,26 @@ function createMemoryViewPort(options = {}) {
     }
   };
   const bilder = /* @__PURE__ */ new Map();
+  const werke = [];
   for (const bild of options.images ?? []) {
     bilder.set(bild.mediaRef, { bild, data: "AAAA" });
+    werke.push({ itemRef: bild.mediaRef, title: bild.title, images: [bild] });
   }
+  for (const werk of options.imageItems ?? []) {
+    for (const bild of werk.images) bilder.set(bild.mediaRef, { bild, data: "AAAA" });
+    werke.push(werk);
+  }
+  const vorschauLazy = options.imagePreviewLazy === true;
   const imageLibraryPort = {
-    async listImages(query) {
-      const alle = [...bilder.values()].map((e) => e.bild);
+    async listItems(query) {
       const gesucht = query?.search?.trim().toLowerCase();
-      const gefiltert = gesucht ? alle.filter((b) => b.title.toLowerCase().includes(gesucht)) : alle;
-      return ok2(query?.limit ? gefiltert.slice(0, query.limit) : gefiltert);
+      const gefiltert = gesucht ? werke.filter((w) => w.title.toLowerCase().includes(gesucht)) : werke;
+      const sichtbar = query?.limit ? gefiltert.slice(0, query.limit) : gefiltert;
+      if (!vorschauLazy) return ok2(sichtbar);
+      return ok2(sichtbar.map((w) => ({
+        ...w,
+        images: w.images.map((b) => ({ ...b, thumbUrl: null }))
+      })));
     },
     async resolveImage(mediaRef) {
       const eintrag = bilder.get(mediaRef);
@@ -11058,9 +11190,19 @@ function createMemoryViewPort(options = {}) {
         thumbUrl: null
       };
       bilder.set(mediaRef, { bild, data: input.data });
+      werke.unshift({ itemRef: mediaRef, title: bild.title, images: [bild] });
       return done(bild);
     }
   };
+  if (vorschauLazy) {
+    imageLibraryPort.loadPreview = async (mediaRef) => {
+      const eintrag = bilder.get(mediaRef);
+      if (!eintrag) {
+        return { kind: "error", message: `Bild ${mediaRef} ist unbekannt.`, retryable: false };
+      }
+      return ok2(`data:${eintrag.bild.mimeType};base64,${eintrag.data}`);
+    };
+  }
   const batches = [...options.batches ?? []];
   const imageGenerationEvents = createInMemoryEventChannel();
   const imageBatchHistoryPort = {
@@ -17546,14 +17688,64 @@ function readAsBase642(datei) {
     leser.readAsDataURL(datei);
   });
 }
+function useVorschauen(port, mediaRefs) {
+  const [quellen, setQuellen] = (0, import_react15.useState)(() => /* @__PURE__ */ new Map());
+  const gehalten = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
+  const schluessel = mediaRefs.join(" ");
+  (0, import_react15.useEffect)(() => {
+    const bestand = port.imageLibrary;
+    if (!bestand?.loadPreview) return void 0;
+    const refs = schluessel ? schluessel.split(" ") : [];
+    const lauf = { abgebrochen: false };
+    void ladeVorschauen(
+      bestand,
+      refs,
+      (mediaRef, quelle) => {
+        gehalten.current.set(mediaRef, quelle);
+        setQuellen(new Map(gehalten.current));
+      },
+      { parallel: 4, hat: (ref) => gehalten.current.has(ref), lauf }
+    );
+    return () => {
+      lauf.abgebrochen = true;
+    };
+  }, [port, schluessel]);
+  return quellen;
+}
+var Kachel = ({ quelle, alt }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "szenen-bildkachel", children: quelle ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: quelle, alt, loading: "lazy" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "szenen-bildkachel__leer", "aria-hidden": "true" }) });
 var BildWaehler = ({ port, gewaehlt, onWaehlen, onEntfernen }) => {
   const [suche, setSuche] = (0, import_react15.useState)("");
-  const [bilder] = usePortQuery(
-    () => port.imageLibrary.listImages({ search: suche.trim() || void 0, limit: 60 }),
+  const [offenesWerk, setOffenesWerk] = (0, import_react15.useState)(null);
+  const [items] = usePortQuery(
+    () => port.imageLibrary.listItems({ search: suche.trim() || void 0, limit: 60 }),
     [port, suche]
   );
+  const werk = items.status === "ready" ? items.value.find((i) => i.itemRef === offenesWerk) ?? null : null;
+  const sichtbar = (0, import_react15.useMemo)(() => {
+    const refs = werk ? werk.images.map((b) => b.mediaRef) : items.status === "ready" ? items.value.map((i) => i.images[0]?.mediaRef).filter((r) => Boolean(r)) : [];
+    return [.../* @__PURE__ */ new Set([...refs, ...gewaehlt.map((b) => b.mediaRef)])];
+  }, [items, werk, gewaehlt]);
+  const quellen = useVorschauen(port, sichtbar);
+  const quelleVon = (bild) => bild.thumbUrl || quellen.get(bild.mediaRef) || null;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "szenen-bildwahl", "data-testid": "bildwahl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "szenen-field", children: [
+    werk ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "szenen-bildwahl__kopf", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "szenen-bildwahl__zurueck",
+          onClick: () => setOffenesWerk(null),
+          "data-testid": "bildwahl-zurueck",
+          children: "Zurueck zur Auswahl"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "szenen-bildwahl__werktitel", "data-testid": "bildwahl-werktitel", children: [
+        werk.title,
+        " \xB7 ",
+        werk.images.length,
+        " Bilder"
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "szenen-field", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Bild aus dem Bestand" }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "input",
@@ -17561,31 +17753,70 @@ var BildWaehler = ({ port, gewaehlt, onWaehlen, onEntfernen }) => {
           type: "search",
           value: suche,
           onChange: (e) => setSuche(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") e.preventDefault();
+          },
           placeholder: "Suchen \u2026",
           "data-testid": "bild-suche"
         }
       )
     ] }),
-    bilder.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Bilder werden geladen \u2026" }),
-    bilder.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "szenen-error", role: "alert", children: [
+    items.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Bilder werden geladen \u2026" }),
+    items.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "szenen-error", role: "alert", children: [
       "Der Bildbestand ist nicht lesbar: ",
-      bilder.message
+      items.message
     ] }),
-    bilder.status === "ready" && bilder.value.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "szenen-empty", "data-testid": "bildwahl-leer", children: "Zu dieser Suche gibt es kein Bild. Ohne Treffer bleibt der Upload." }),
-    bilder.status === "ready" && bilder.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "szenen-bildwahl__liste", children: bilder.value.map((bild) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    items.status === "ready" && items.value.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "szenen-empty", "data-testid": "bildwahl-leer", children: "Zu dieser Suche gibt es kein Bild. Ohne Treffer bleibt der Upload." }),
+    werk && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "szenen-bildwahl__raster", "data-testid": "bildwahl-galerie", children: werk.images.map((bild, position) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "button",
       {
         type: "button",
-        onClick: () => onWaehlen(bild),
+        onClick: () => {
+          onWaehlen(bild);
+          setOffenesWerk(null);
+        },
         "data-testid": `bild-waehlen-${bild.mediaRef}`,
+        title: bild.title,
         children: [
-          bild.thumbUrl && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { src: bild.thumbUrl, alt: "" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: bild.title })
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Kachel, { quelle: quelleVon(bild), alt: bild.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "szenen-bildwahl__nummer", children: [
+            "#",
+            position + 1
+          ] })
         ]
       }
     ) }, bild.mediaRef)) }),
+    !werk && items.status === "ready" && items.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "szenen-bildwahl__raster", "data-testid": "bildwahl-werke", children: items.value.map((item) => {
+      const deckbild = item.images[0];
+      if (!deckbild) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => item.images.length === 1 ? onWaehlen(deckbild) : setOffenesWerk(item.itemRef),
+          "data-testid": `item-waehlen-${item.itemRef}`,
+          title: item.title,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Kachel, { quelle: quelleVon(deckbild), alt: item.title }),
+            item.images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              "span",
+              {
+                className: "szenen-bildwahl__anzahl",
+                "data-testid": `item-anzahl-${item.itemRef}`,
+                children: [
+                  item.images.length,
+                  "x"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "szenen-bildwahl__titel", children: item.title })
+          ]
+        }
+      ) }, item.itemRef);
+    }) }),
     gewaehlt.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "szenen-bildwahl__gewaehlt", "data-testid": "bilder-gewaehlt", children: gewaehlt.map((bild) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("li", { children: [
-      bild.title,
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Kachel, { quelle: quelleVon(bild), alt: bild.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "szenen-bildwahl__titel", children: bild.title }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "button",
         {
@@ -17624,7 +17855,10 @@ var DeriveArea = ({ port, contextId }) => {
   );
   const gewaehlt = regeln.status === "ready" ? regeln.value.find((r) => r.versionId === policyVersionId) ?? null : null;
   async function starten(folgt) {
-    if (!gewaehlt) return;
+    if (!gewaehlt) {
+      setMeldung("Bitte zuerst eine Rekonstruktionsregel waehlen \u2014 ohne sie ist kein Lauf reproduzierbar (D-03).");
+      return;
+    }
     setLaeuft(true);
     setMeldung(null);
     setLauf(null);
@@ -18174,13 +18408,16 @@ var SzenenView = ({
   freezeDraftChain,
   freezeSceneWorkingState,
   getSzenenSchemas,
+  gruppiereZuItems,
   hasPlacementCapability,
   isKnownElementType,
   isOk,
   isProjectionCurrent,
   isSzenenItemId,
   itemIdForRun,
+  ladeVorschauen,
   linkFor,
+  locatorTeile,
   logRevisionOf,
   mergeSzenenBatchOrigin,
   noticeFor,

package/dist/szenen.mjs

@@ -102,13 +102,16 @@ import {
   freezeDraftChain,
   freezeSceneWorkingState,
   getSzenenSchemas,
+  gruppiereZuItems,
   hasPlacementCapability,
   isKnownElementType,
   isOk,
   isProjectionCurrent,
   isSzenenItemId,
   itemIdForRun,
+  ladeVorschauen,
   linkFor,
+  locatorTeile,
   logRevisionOf,
   mergeSzenenBatchOrigin,
   noticeFor,
@@ -145,7 +148,7 @@ import {
   validateElementVersion,
   validatePayload,
   withReference
-} from "./chunk-566GHYAT.mjs";
+} from "./chunk-TW4IDHAN.mjs";
 import {
   ContractViolation,
   STYLE_PAYLOAD,
@@ -749,15 +752,26 @@ function createMemoryViewPort(options = {}) {
     }
   };
   const bilder = /* @__PURE__ */ new Map();
+  const werke = [];
   for (const bild of options.images ?? []) {
     bilder.set(bild.mediaRef, { bild, data: "AAAA" });
+    werke.push({ itemRef: bild.mediaRef, title: bild.title, images: [bild] });
   }
+  for (const werk of options.imageItems ?? []) {
+    for (const bild of werk.images) bilder.set(bild.mediaRef, { bild, data: "AAAA" });
+    werke.push(werk);
+  }
+  const vorschauLazy = options.imagePreviewLazy === true;
   const imageLibraryPort = {
-    async listImages(query) {
-      const alle = [...bilder.values()].map((e) => e.bild);
+    async listItems(query) {
       const gesucht = query?.search?.trim().toLowerCase();
-      const gefiltert = gesucht ? alle.filter((b) => b.title.toLowerCase().includes(gesucht)) : alle;
-      return ok(query?.limit ? gefiltert.slice(0, query.limit) : gefiltert);
+      const gefiltert = gesucht ? werke.filter((w) => w.title.toLowerCase().includes(gesucht)) : werke;
+      const sichtbar = query?.limit ? gefiltert.slice(0, query.limit) : gefiltert;
+      if (!vorschauLazy) return ok(sichtbar);
+      return ok(sichtbar.map((w) => ({
+        ...w,
+        images: w.images.map((b) => ({ ...b, thumbUrl: null }))
+      })));
     },
     async resolveImage(mediaRef) {
       const eintrag = bilder.get(mediaRef);
@@ -775,9 +789,19 @@ function createMemoryViewPort(options = {}) {
         thumbUrl: null
       };
       bilder.set(mediaRef, { bild, data: input.data });
+      werke.unshift({ itemRef: mediaRef, title: bild.title, images: [bild] });
       return done(bild);
     }
   };
+  if (vorschauLazy) {
+    imageLibraryPort.loadPreview = async (mediaRef) => {
+      const eintrag = bilder.get(mediaRef);
+      if (!eintrag) {
+        return { kind: "error", message: `Bild ${mediaRef} ist unbekannt.`, retryable: false };
+      }
+      return ok(`data:${eintrag.bild.mimeType};base64,${eintrag.data}`);
+    };
+  }
   const batches = [...options.batches ?? []];
   const imageGenerationEvents = createInMemoryEventChannel();
   const imageBatchHistoryPort = {
@@ -1684,13 +1708,16 @@ export {
   freezeDraftChain,
   freezeSceneWorkingState,
   getSzenenSchemas,
+  gruppiereZuItems,
   hasPlacementCapability,
   isKnownElementType,
   isOk,
   isProjectionCurrent,
   isSzenenItemId,
   itemIdForRun,
+  ladeVorschauen,
   linkFor,
+  locatorTeile,
   logRevisionOf,
   mergeSzenenBatchOrigin,
   noticeFor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rslsp1/fa-app-tools",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Shared tools and hooks for Fine Art flow apps",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",