@rslsp1/fa-app-tools 1.2.1 → 1.2.2

package/dist/index.d.mts

@@ -445,6 +445,6 @@ declare function buildLoopInstruction(rounds: Array<{
 declare function autoLabel(index: number): string;
 declare function buildReferenceImageMediaIds(images: SelectedLabImage[]): string[];
 
-declare const LIB_VERSION = "1.2.1";
+declare const LIB_VERSION = "1.2.2";
 
 export { AvatarArchitectApp, type AvatarArchitectAppProps, CollapsibleCard, CompactDropdown, type ExtractedCharacter, FaToolsBadge, type FlowSdk, GLOBAL_STYLES, type Generation, HistoryPanel, InspectPanel, LIB_VERSION, LabBlend, LabCompare, type LabFrame, LabImagePicker, type LabItem, LabLoop, LabRemix, type LabServices, LabsTab, ListView, type MediaItem, MediaLibrary, PillButton, type ProjectMeta, type ProjectSettings, ProjectSyncTab, PromptTab, SectionLabel, type SelectedLabImage, type SelectedTag, SetupPanel, type SyncDiff, TagManagerPanel, type TagOption, type WorkspaceTags, autoLabel, buildBlendInstruction, buildCompareInstruction, buildFallbackPrompt, buildGenerationPrompt, buildImageGenerationOptions, buildLoopInstruction, buildPromptTabPayload, buildReferenceImageMediaIds, buildRemixInstruction, buildScanInstruction, cleanAiResponse, createFlowServices, exportProjectToZip, formatTreeToMarkdown, frameToGeneration, getFormattedTimestamp, groupGenerationsToLabItems, importProjectFromZip, injectXMPMetadata, interpretSdkError, parsePromptFile, parsePromptResponse, useKeyboardNavigation, useOnClickOutside };

package/dist/index.d.ts

@@ -445,6 +445,6 @@ declare function buildLoopInstruction(rounds: Array<{
 declare function autoLabel(index: number): string;
 declare function buildReferenceImageMediaIds(images: SelectedLabImage[]): string[];
 
-declare const LIB_VERSION = "1.2.1";
+declare const LIB_VERSION = "1.2.2";
 
 export { AvatarArchitectApp, type AvatarArchitectAppProps, CollapsibleCard, CompactDropdown, type ExtractedCharacter, FaToolsBadge, type FlowSdk, GLOBAL_STYLES, type Generation, HistoryPanel, InspectPanel, LIB_VERSION, LabBlend, LabCompare, type LabFrame, LabImagePicker, type LabItem, LabLoop, LabRemix, type LabServices, LabsTab, ListView, type MediaItem, MediaLibrary, PillButton, type ProjectMeta, type ProjectSettings, ProjectSyncTab, PromptTab, SectionLabel, type SelectedLabImage, type SelectedTag, SetupPanel, type SyncDiff, TagManagerPanel, type TagOption, type WorkspaceTags, autoLabel, buildBlendInstruction, buildCompareInstruction, buildFallbackPrompt, buildGenerationPrompt, buildImageGenerationOptions, buildLoopInstruction, buildPromptTabPayload, buildReferenceImageMediaIds, buildRemixInstruction, buildScanInstruction, cleanAiResponse, createFlowServices, exportProjectToZip, formatTreeToMarkdown, frameToGeneration, getFormattedTimestamp, groupGenerationsToLabItems, importProjectFromZip, injectXMPMetadata, interpretSdkError, parsePromptFile, parsePromptResponse, useKeyboardNavigation, useOnClickOutside };

package/dist/index.js

@@ -740,31 +740,32 @@ var import_react8 = require("motion/react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
   const workspaceInputRef = (0, import_react7.useRef)(null);
-  const [urlInput, setUrlInput] = (0, import_react7.useState)("");
-  const [urlStatus, setUrlStatus] = (0, import_react7.useState)("idle");
-  const [urlThumb, setUrlThumb] = (0, import_react7.useState)(null);
-  const [urlError, setUrlError] = (0, import_react7.useState)(null);
-  const handleUrlTest = async () => {
-    if (!urlInput.trim()) return;
-    setUrlStatus("loading");
-    setUrlThumb(null);
-    setUrlError(null);
+  const blobTestInputRef = (0, import_react7.useRef)(null);
+  const [blobStatus, setBlobStatus] = (0, import_react7.useState)("idle");
+  const [blobThumb, setBlobThumb] = (0, import_react7.useState)(null);
+  const [blobError, setBlobError] = (0, import_react7.useState)(null);
+  const handleBlobTest = async (file) => {
+    setBlobStatus("loading");
+    setBlobThumb(null);
+    setBlobError(null);
+    const blobUrl = URL.createObjectURL(file);
     try {
-      const res = await fetch(urlInput.trim());
+      const res = await fetch(blobUrl);
       if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);
       const blob = await res.blob();
-      const mimeType = blob.type || "image/jpeg";
       const dataUrl = await new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = () => resolve(reader.result);
         reader.onerror = () => reject(new Error("FileReader failed"));
         reader.readAsDataURL(blob);
       });
-      setUrlThumb(dataUrl);
-      setUrlStatus("ok");
+      setBlobThumb(dataUrl);
+      setBlobStatus("ok");
     } catch (e) {
-      setUrlError(e.message || String(e));
-      setUrlStatus("error");
+      setBlobError(e.message || String(e));
+      setBlobStatus("error");
+    } finally {
+      URL.revokeObjectURL(blobUrl);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react8.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-6 flex flex-col gap-10 overflow-y-auto", children: [
@@ -782,40 +783,42 @@ var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SectionLabel, { children: "URL-Fetch Test" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-[9px] text-white/30 px-2 italic", children: "Pr\xFCft ob externe URLs als Bild geladen werden k\xF6nnen." })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SectionLabel, { children: "blob: URL Test" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-[9px] text-white/30 px-2 italic", children: "Testet ob fetch() auf blob: URLs funktioniert \u2014 lokale Datei \u2192 createObjectURL \u2192 fetch \u2192 base64." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "input",
-          {
-            value: urlInput,
-            onChange: (e) => setUrlInput(e.target.value),
-            onKeyDown: (e) => e.key === "Enter" && handleUrlTest(),
-            placeholder: "https://example.com/image.jpg",
-            className: "flex-1 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-[11px] text-white/80 outline-none focus:border-white/20 placeholder:text-white/20"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "button",
-          {
-            onClick: handleUrlTest,
-            disabled: urlStatus === "loading" || !urlInput.trim(),
-            className: "px-3 py-2 bg-white/10 hover:bg-white/15 border border-white/10 rounded-xl text-[11px] font-bold text-white/60 transition disabled:opacity-40 shrink-0",
-            children: urlStatus === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "material-symbols-outlined text-[16px] animate-spin", children: "sync" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "material-symbols-outlined text-[16px]", children: "download" })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        PillButton,
+        {
+          variant: "outline",
+          icon: blobStatus === "loading" ? "sync" : "image_search",
+          onClick: () => blobTestInputRef.current?.click(),
+          children: "Bild w\xE4hlen & testen"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          ref: blobTestInputRef,
+          type: "file",
+          accept: "image/*",
+          className: "hidden",
+          onChange: (e) => {
+            const f = e.target.files?.[0];
+            if (f) handleBlobTest(f);
+            e.target.value = "";
           }
-        )
-      ] }),
-      urlStatus === "ok" && urlThumb && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: urlThumb, alt: "URL Test", className: "w-full max-h-48 object-contain rounded-xl border border-white/10 bg-black/40" }),
+        }
+      ),
+      blobStatus === "ok" && blobThumb && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: blobThumb, alt: "blob test", className: "w-full max-h-48 object-contain rounded-xl border border-white/10 bg-black/40" }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "text-[10px] text-green-400 font-mono flex items-center gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "check_circle" }),
-          "Fetch erfolgreich"
+          "blob: fetch \u2713 \u2014 base64 erfolgreich"
         ] })
       ] }),
-      urlStatus === "error" && urlError && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "text-[10px] text-red-400 font-mono flex items-start gap-1", children: [
+      blobStatus === "error" && blobError && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "text-[10px] text-red-400 font-mono flex items-start gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "material-symbols-outlined text-[14px] shrink-0", children: "error" }),
-        urlError
+        blobError
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mt-auto p-4 bg-white/5 rounded-2xl border border-white/5 flex flex-col gap-2 opacity-50", children: [
@@ -4177,7 +4180,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/index.ts
-var LIB_VERSION = "1.2.1";
+var LIB_VERSION = "1.2.2";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarArchitectApp,

package/dist/index.mjs

@@ -658,31 +658,32 @@ import { motion as motion3 } from "motion/react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
   const workspaceInputRef = useRef2(null);
-  const [urlInput, setUrlInput] = useState2("");
-  const [urlStatus, setUrlStatus] = useState2("idle");
-  const [urlThumb, setUrlThumb] = useState2(null);
-  const [urlError, setUrlError] = useState2(null);
-  const handleUrlTest = async () => {
-    if (!urlInput.trim()) return;
-    setUrlStatus("loading");
-    setUrlThumb(null);
-    setUrlError(null);
+  const blobTestInputRef = useRef2(null);
+  const [blobStatus, setBlobStatus] = useState2("idle");
+  const [blobThumb, setBlobThumb] = useState2(null);
+  const [blobError, setBlobError] = useState2(null);
+  const handleBlobTest = async (file) => {
+    setBlobStatus("loading");
+    setBlobThumb(null);
+    setBlobError(null);
+    const blobUrl = URL.createObjectURL(file);
     try {
-      const res = await fetch(urlInput.trim());
+      const res = await fetch(blobUrl);
       if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);
       const blob = await res.blob();
-      const mimeType = blob.type || "image/jpeg";
       const dataUrl = await new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = () => resolve(reader.result);
         reader.onerror = () => reject(new Error("FileReader failed"));
         reader.readAsDataURL(blob);
       });
-      setUrlThumb(dataUrl);
-      setUrlStatus("ok");
+      setBlobThumb(dataUrl);
+      setBlobStatus("ok");
     } catch (e) {
-      setUrlError(e.message || String(e));
-      setUrlStatus("error");
+      setBlobError(e.message || String(e));
+      setBlobStatus("error");
+    } finally {
+      URL.revokeObjectURL(blobUrl);
     }
   };
   return /* @__PURE__ */ jsxs5(motion3.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-6 flex flex-col gap-10 overflow-y-auto", children: [
@@ -700,40 +701,42 @@ var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3", children: [
       /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx7(SectionLabel, { children: "URL-Fetch Test" }),
-        /* @__PURE__ */ jsx7("p", { className: "text-[9px] text-white/30 px-2 italic", children: "Pr\xFCft ob externe URLs als Bild geladen werden k\xF6nnen." })
+        /* @__PURE__ */ jsx7(SectionLabel, { children: "blob: URL Test" }),
+        /* @__PURE__ */ jsx7("p", { className: "text-[9px] text-white/30 px-2 italic", children: "Testet ob fetch() auf blob: URLs funktioniert \u2014 lokale Datei \u2192 createObjectURL \u2192 fetch \u2192 base64." })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx7(
-          "input",
-          {
-            value: urlInput,
-            onChange: (e) => setUrlInput(e.target.value),
-            onKeyDown: (e) => e.key === "Enter" && handleUrlTest(),
-            placeholder: "https://example.com/image.jpg",
-            className: "flex-1 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-[11px] text-white/80 outline-none focus:border-white/20 placeholder:text-white/20"
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          "button",
-          {
-            onClick: handleUrlTest,
-            disabled: urlStatus === "loading" || !urlInput.trim(),
-            className: "px-3 py-2 bg-white/10 hover:bg-white/15 border border-white/10 rounded-xl text-[11px] font-bold text-white/60 transition disabled:opacity-40 shrink-0",
-            children: urlStatus === "loading" ? /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-[16px] animate-spin", children: "sync" }) : /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-[16px]", children: "download" })
+      /* @__PURE__ */ jsx7(
+        PillButton,
+        {
+          variant: "outline",
+          icon: blobStatus === "loading" ? "sync" : "image_search",
+          onClick: () => blobTestInputRef.current?.click(),
+          children: "Bild w\xE4hlen & testen"
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "input",
+        {
+          ref: blobTestInputRef,
+          type: "file",
+          accept: "image/*",
+          className: "hidden",
+          onChange: (e) => {
+            const f = e.target.files?.[0];
+            if (f) handleBlobTest(f);
+            e.target.value = "";
           }
-        )
-      ] }),
-      urlStatus === "ok" && urlThumb && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx7("img", { src: urlThumb, alt: "URL Test", className: "w-full max-h-48 object-contain rounded-xl border border-white/10 bg-black/40" }),
+        }
+      ),
+      blobStatus === "ok" && blobThumb && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx7("img", { src: blobThumb, alt: "blob test", className: "w-full max-h-48 object-contain rounded-xl border border-white/10 bg-black/40" }),
         /* @__PURE__ */ jsxs5("p", { className: "text-[10px] text-green-400 font-mono flex items-center gap-1", children: [
           /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-[14px]", children: "check_circle" }),
-          "Fetch erfolgreich"
+          "blob: fetch \u2713 \u2014 base64 erfolgreich"
         ] })
       ] }),
-      urlStatus === "error" && urlError && /* @__PURE__ */ jsxs5("p", { className: "text-[10px] text-red-400 font-mono flex items-start gap-1", children: [
+      blobStatus === "error" && blobError && /* @__PURE__ */ jsxs5("p", { className: "text-[10px] text-red-400 font-mono flex items-start gap-1", children: [
         /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-[14px] shrink-0", children: "error" }),
-        urlError
+        blobError
       ] })
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "mt-auto p-4 bg-white/5 rounded-2xl border border-white/5 flex flex-col gap-2 opacity-50", children: [
@@ -4095,7 +4098,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/index.ts
-var LIB_VERSION = "1.2.1";
+var LIB_VERSION = "1.2.2";
 export {
   AvatarArchitectApp,
   CollapsibleCard,

package/package.json

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