@rslsp1/fa-app-tools 2.0.20 → 2.0.22

package/dist/index.d.mts

@@ -614,6 +614,6 @@ declare function findTips(dag: Dag): number[];
 declare function findForks(dag: Dag): DagFork[];
 declare function topoSort(events: HFEvent[]): HFEvent[];
 
-declare const LIB_VERSION = "2.0.20";
+declare const LIB_VERSION = "2.0.22";
 
 export { AvatarArchitectApp, type AvatarArchitectAppProps, CollapsibleCard, CompactDropdown, type DagFork, type ExtractedCharacter, FaApp, type FaAppProps, FaToolsBadge, type FlowSdk, GLOBAL_STYLES, type Generation, type HFEvent, type HFEventVersion, type HFFileInfo$1 as HFFileInfo, type HFMetadataEntry, type HFStateMeta, type HFStateResult, type HFStateSnapshot, HistoryPanel, type ImageAddedPayload, InspectPanel, LIB_VERSION, LabBlend, LabCompare, type LabFrame, LabImagePicker, type LabItem, LabLoop, LabRemix, type LabServices, LabsTab, ListView, type MediaItem, MediaLibrary, type MetadataUpdatedPayload, PillButton, type ProjectMeta, type ProjectSettings, ProjectSyncTab, PromptTab, SectionLabel, type SelectedLabImage, type SelectedTag, SetupPanel, type SyncDiff, TagManagerPanel, type TagOption, type TagUpsertedPayload, type WorkspaceTags, applyEvent, applyEvents, autoLabel, buildBlendInstruction, buildCompareInstruction, buildDag, buildFallbackPrompt, buildGenerationPrompt, buildImageGenerationOptions, buildLoopInstruction, buildPromptTabPayload, buildReferenceImageMediaIds, buildRemixInstruction, buildScanInstruction, cleanAiResponse, createFlowServices, exportProjectToZip, findForks, findTips, formatTreeToMarkdown, frameToGeneration, getFormattedTimestamp, getHFToken, getSessionClientId, groupGenerationsToLabItems, hfBatchArchive, hfBootstrapFromLegacy, hfDeleteProject, hfDownloadProject, hfListDir, hfListProjects, hfLoadImageAsBase64, hfUploadImage, hfUploadProjectForm, hfUploadSmallFile, importProjectFromZip, injectXMPMetadata, interpretSdkError, loadHFState, loadPendingEvents, parsePromptFile, parsePromptResponse, setHFToken, topoSort, tsFromEventPath, useHFState, useKeyboardNavigation, useOnClickOutside, writeHFEvent };

package/dist/index.d.ts

@@ -614,6 +614,6 @@ declare function findTips(dag: Dag): number[];
 declare function findForks(dag: Dag): DagFork[];
 declare function topoSort(events: HFEvent[]): HFEvent[];
 
-declare const LIB_VERSION = "2.0.20";
+declare const LIB_VERSION = "2.0.22";
 
 export { AvatarArchitectApp, type AvatarArchitectAppProps, CollapsibleCard, CompactDropdown, type DagFork, type ExtractedCharacter, FaApp, type FaAppProps, FaToolsBadge, type FlowSdk, GLOBAL_STYLES, type Generation, type HFEvent, type HFEventVersion, type HFFileInfo$1 as HFFileInfo, type HFMetadataEntry, type HFStateMeta, type HFStateResult, type HFStateSnapshot, HistoryPanel, type ImageAddedPayload, InspectPanel, LIB_VERSION, LabBlend, LabCompare, type LabFrame, LabImagePicker, type LabItem, LabLoop, LabRemix, type LabServices, LabsTab, ListView, type MediaItem, MediaLibrary, type MetadataUpdatedPayload, PillButton, type ProjectMeta, type ProjectSettings, ProjectSyncTab, PromptTab, SectionLabel, type SelectedLabImage, type SelectedTag, SetupPanel, type SyncDiff, TagManagerPanel, type TagOption, type TagUpsertedPayload, type WorkspaceTags, applyEvent, applyEvents, autoLabel, buildBlendInstruction, buildCompareInstruction, buildDag, buildFallbackPrompt, buildGenerationPrompt, buildImageGenerationOptions, buildLoopInstruction, buildPromptTabPayload, buildReferenceImageMediaIds, buildRemixInstruction, buildScanInstruction, cleanAiResponse, createFlowServices, exportProjectToZip, findForks, findTips, formatTreeToMarkdown, frameToGeneration, getFormattedTimestamp, getHFToken, getSessionClientId, groupGenerationsToLabItems, hfBatchArchive, hfBootstrapFromLegacy, hfDeleteProject, hfDownloadProject, hfListDir, hfListProjects, hfLoadImageAsBase64, hfUploadImage, hfUploadProjectForm, hfUploadSmallFile, importProjectFromZip, injectXMPMetadata, interpretSdkError, loadHFState, loadPendingEvents, parsePromptFile, parsePromptResponse, setHFToken, topoSort, tsFromEventPath, useHFState, useKeyboardNavigation, useOnClickOutside, writeHFEvent };

package/dist/index.js

@@ -1341,7 +1341,10 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[10px] italic", children: "Importiere Assets aus deinem Projekt." })
       ] })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-2 gap-3 pb-10", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react9.motion.div, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, className: `relative aspect-square group/item rounded-xl overflow-hidden border transition-all bg-white/5 cursor-pointer shadow-lg ${item.selectedForExport ? "border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.2)]" : "border-white/10 opacity-70 hover:opacity-100"}`, onClick: () => onSelect?.(item), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: item.base64 ? item.base64.startsWith("data:") ? item.base64 : `data:image/png;base64,${item.base64}` : "", className: "w-full h-full object-cover transition-transform duration-500 group-hover/item:scale-110", alt: item.prompt }),
+      item.status === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "w-full h-full flex flex-col items-center justify-center gap-2 bg-black/40", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-6 h-6 border-t-2 border-white rounded-full animate-spin" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[8px] text-white/40 uppercase font-bold tracking-widest", children: "Generiere\u2026" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: item.base64 ? item.base64.startsWith("data:") ? item.base64 : `data:image/png;base64,${item.base64}` : "", className: "w-full h-full object-cover transition-transform duration-500 group-hover/item:scale-110", alt: item.prompt }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: `absolute top-2 left-2 w-5 h-5 rounded-md border flex items-center justify-center transition-all z-30 pointer-events-auto ${item.selectedForExport ? "bg-blue-500 border-blue-400" : "bg-black/60 border-white/20"}`, onClick: (e) => {
         e.stopPropagation();
         onToggleSelection?.(item.id);
@@ -4161,26 +4164,25 @@ function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadSta
               "lokal"
             ] })
           ] }),
-          isImageEvent && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
+          isImageEvent && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3, flexWrap: "wrap" }, children: [
             uploadStatus === "done" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_done" }),
-              "Bild auf HF"
+              "Upload \u2713"
             ] }),
             uploadStatus === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, color: "#60a5fa", display: "flex", alignItems: "center", gap: 2 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_upload" }),
-              "Bild l\xE4dt\u2026"
+              "l\xE4dt hoch\u2026"
             ] }),
             uploadStatus === "failed" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, color: "#f87171", display: "flex", alignItems: "center", gap: 2 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_off" }),
-              "Bild-Upload fehlgeschlagen"
+              "Upload fehlgeschlagen"
             ] }),
-            !uploadStatus && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.2)" }, children: "Bild-Upload unbekannt (anderes Ger\xE4t?)" }),
-            galleryItem?.base64 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, color: "#4ade80", marginLeft: 6, display: "flex", alignItems: "center", gap: 2 }, children: [
+            galleryItem?.base64 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "photo" }),
-              "lokal vorhanden"
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, color: "#f87171", marginLeft: 6, display: "flex", alignItems: "center", gap: 2 }, children: [
+              uploadStatus ? "lokal" : "von HF geladen"
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 9, color: "#f87171", display: "flex", alignItems: "center", gap: 2 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "broken_image" }),
-              "kein lokales Bild"
+              uploadStatus === "failed" ? "Binary nicht auf HF" : "wird geladen\u2026"
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: payloadPreview })
@@ -4511,12 +4513,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     setGalleryItems((prev) => {
       const localOnly = prev.filter((g) => !hfIds.has(g.id));
       const merged = skeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
-      return [...localOnly, ...merged];
+      return [...localOnly, ...merged].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
     });
     setHistory((prev) => {
       const localOnly = prev.filter((g) => !hfIds.has(g.id));
       const merged = skeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
-      return [...localOnly, ...merged];
+      return [...localOnly, ...merged].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
     });
     const COOLDOWN_MS = 5 * 60 * 1e3;
     for (const entry of hfState.metadata) {
@@ -4772,13 +4774,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     const activeSeed = seedMode === "random" ? Math.floor(Math.random() * 1e9) : seed;
     const newGen = { id: genId, nodeId: overrideNodeId || focusedNodeId || "1", status: "processing", timestamp: Date.now(), prompt: promptToUse, seed: activeSeed, model: selectedModel, tags: [], type: "generation" };
     setHistory((prev) => [newGen, ...prev]);
+    setGalleryItems((prev) => [newGen, ...prev]);
     if (!options.silent) setCurrentResult(newGen);
     if (seedMode === "random") setSeed(activeSeed);
     try {
       const { base64, mediaId } = await onGenerateImage(buildImageGenerationOptions(promptToUse, aspectRatio, selectedModel, useReferenceId ?? activeReferenceId ?? void 0));
       const finishedGen = { ...newGen, status: "done", base64: `data:image/png;base64,${base64}`, mediaId };
       setHistory((prev) => prev.map((g) => g.id === genId ? finishedGen : g));
-      setGalleryItems((prev) => [finishedGen, ...prev]);
+      setGalleryItems((prev) => prev.map((g) => g.id === genId ? finishedGen : g));
       setCurrentResult((prev) => {
         if (!prev) return finishedGen;
         if (prev.id === genId || !options.silent) return finishedGen;
@@ -4808,6 +4811,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     } catch (err) {
       const errorGen = { ...newGen, status: "error", error: { message: err.message || "Unbekannter Fehler", details: err.toString() } };
       setHistory((prev) => prev.map((g) => g.id === genId ? errorGen : g));
+      setGalleryItems((prev) => prev.filter((g) => g.id !== genId));
       if (!options.silent || currentResult?.id === genId) setCurrentResult(errorGen);
     } finally {
       setActiveGenerationsCount((prev) => Math.max(0, prev - 1));
@@ -6008,7 +6012,7 @@ function FaApp({
 // src/index.ts
 init_hfStateService();
 init_hfStateService();
-var LIB_VERSION = "2.0.20";
+var LIB_VERSION = "2.0.22";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarArchitectApp,

package/dist/index.mjs

@@ -681,7 +681,10 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
         /* @__PURE__ */ jsx8("p", { className: "text-[10px] italic", children: "Importiere Assets aus deinem Projekt." })
       ] })
     ] }) : /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-2 gap-3 pb-10", children: items.map((item) => /* @__PURE__ */ jsxs6(motion4.div, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, className: `relative aspect-square group/item rounded-xl overflow-hidden border transition-all bg-white/5 cursor-pointer shadow-lg ${item.selectedForExport ? "border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.2)]" : "border-white/10 opacity-70 hover:opacity-100"}`, onClick: () => onSelect?.(item), children: [
-      /* @__PURE__ */ jsx8("img", { src: item.base64 ? item.base64.startsWith("data:") ? item.base64 : `data:image/png;base64,${item.base64}` : "", className: "w-full h-full object-cover transition-transform duration-500 group-hover/item:scale-110", alt: item.prompt }),
+      item.status === "processing" ? /* @__PURE__ */ jsxs6("div", { className: "w-full h-full flex flex-col items-center justify-center gap-2 bg-black/40", children: [
+        /* @__PURE__ */ jsx8("div", { className: "w-6 h-6 border-t-2 border-white rounded-full animate-spin" }),
+        /* @__PURE__ */ jsx8("span", { className: "text-[8px] text-white/40 uppercase font-bold tracking-widest", children: "Generiere\u2026" })
+      ] }) : /* @__PURE__ */ jsx8("img", { src: item.base64 ? item.base64.startsWith("data:") ? item.base64 : `data:image/png;base64,${item.base64}` : "", className: "w-full h-full object-cover transition-transform duration-500 group-hover/item:scale-110", alt: item.prompt }),
       /* @__PURE__ */ jsx8("button", { type: "button", className: `absolute top-2 left-2 w-5 h-5 rounded-md border flex items-center justify-center transition-all z-30 pointer-events-auto ${item.selectedForExport ? "bg-blue-500 border-blue-400" : "bg-black/60 border-white/20"}`, onClick: (e) => {
         e.stopPropagation();
         onToggleSelection?.(item.id);
@@ -3492,26 +3495,25 @@ function EventMonitor({ events, confirmedEventKeys, galleryItems, imageUploadSta
               "lokal"
             ] })
           ] }),
-          isImageEvent && /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
+          isImageEvent && /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3, flexWrap: "wrap" }, children: [
             uploadStatus === "done" && /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
               /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_done" }),
-              "Bild auf HF"
+              "Upload \u2713"
             ] }),
             uploadStatus === "uploading" && /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, color: "#60a5fa", display: "flex", alignItems: "center", gap: 2 }, children: [
               /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_upload" }),
-              "Bild l\xE4dt\u2026"
+              "l\xE4dt hoch\u2026"
             ] }),
             uploadStatus === "failed" && /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, color: "#f87171", display: "flex", alignItems: "center", gap: 2 }, children: [
               /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "cloud_off" }),
-              "Bild-Upload fehlgeschlagen"
+              "Upload fehlgeschlagen"
             ] }),
-            !uploadStatus && /* @__PURE__ */ jsx20("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.2)" }, children: "Bild-Upload unbekannt (anderes Ger\xE4t?)" }),
-            galleryItem?.base64 ? /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, color: "#4ade80", marginLeft: 6, display: "flex", alignItems: "center", gap: 2 }, children: [
+            galleryItem?.base64 ? /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, color: "#4ade80", display: "flex", alignItems: "center", gap: 2 }, children: [
               /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "photo" }),
-              "lokal vorhanden"
-            ] }) : /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, color: "#f87171", marginLeft: 6, display: "flex", alignItems: "center", gap: 2 }, children: [
+              uploadStatus ? "lokal" : "von HF geladen"
+            ] }) : /* @__PURE__ */ jsxs18("span", { style: { fontSize: 9, color: "#f87171", display: "flex", alignItems: "center", gap: 2 }, children: [
               /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: "broken_image" }),
-              "kein lokales Bild"
+              uploadStatus === "failed" ? "Binary nicht auf HF" : "wird geladen\u2026"
             ] })
           ] }),
           /* @__PURE__ */ jsx20("div", { style: { fontSize: 9, color: "rgba(255,255,255,0.25)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: payloadPreview })
@@ -3842,12 +3844,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     setGalleryItems((prev) => {
       const localOnly = prev.filter((g) => !hfIds.has(g.id));
       const merged = skeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
-      return [...localOnly, ...merged];
+      return [...localOnly, ...merged].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
     });
     setHistory((prev) => {
       const localOnly = prev.filter((g) => !hfIds.has(g.id));
       const merged = skeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
-      return [...localOnly, ...merged];
+      return [...localOnly, ...merged].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
     });
     const COOLDOWN_MS = 5 * 60 * 1e3;
     for (const entry of hfState.metadata) {
@@ -4103,13 +4105,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     const activeSeed = seedMode === "random" ? Math.floor(Math.random() * 1e9) : seed;
     const newGen = { id: genId, nodeId: overrideNodeId || focusedNodeId || "1", status: "processing", timestamp: Date.now(), prompt: promptToUse, seed: activeSeed, model: selectedModel, tags: [], type: "generation" };
     setHistory((prev) => [newGen, ...prev]);
+    setGalleryItems((prev) => [newGen, ...prev]);
     if (!options.silent) setCurrentResult(newGen);
     if (seedMode === "random") setSeed(activeSeed);
     try {
       const { base64, mediaId } = await onGenerateImage(buildImageGenerationOptions(promptToUse, aspectRatio, selectedModel, useReferenceId ?? activeReferenceId ?? void 0));
       const finishedGen = { ...newGen, status: "done", base64: `data:image/png;base64,${base64}`, mediaId };
       setHistory((prev) => prev.map((g) => g.id === genId ? finishedGen : g));
-      setGalleryItems((prev) => [finishedGen, ...prev]);
+      setGalleryItems((prev) => prev.map((g) => g.id === genId ? finishedGen : g));
       setCurrentResult((prev) => {
         if (!prev) return finishedGen;
         if (prev.id === genId || !options.silent) return finishedGen;
@@ -4139,6 +4142,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     } catch (err) {
       const errorGen = { ...newGen, status: "error", error: { message: err.message || "Unbekannter Fehler", details: err.toString() } };
       setHistory((prev) => prev.map((g) => g.id === genId ? errorGen : g));
+      setGalleryItems((prev) => prev.filter((g) => g.id !== genId));
       if (!options.silent || currentResult?.id === genId) setCurrentResult(errorGen);
     } finally {
       setActiveGenerationsCount((prev) => Math.max(0, prev - 1));
@@ -5337,7 +5341,7 @@ function FaApp({
 }
 
 // src/index.ts
-var LIB_VERSION = "2.0.20";
+var LIB_VERSION = "2.0.22";
 export {
   AvatarArchitectApp,
   CollapsibleCard,

package/package.json

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