@rslsp1/fa-app-tools 1.3.15 → 1.3.18

package/dist/index.d.mts

@@ -309,12 +309,13 @@ interface AvatarArchitectAppProps {
     onDownload: (base64: string, mimeType: string, filename: string) => Promise<void>;
     onSelectMedia: () => Promise<MediaItem[]>;
     buildInfo?: string;
+    initialHfToken?: string;
     onFetchServerProjects?: () => Promise<ProjectMeta[]>;
     onServerSave?: (zipBase64: string, name: string) => Promise<ProjectMeta>;
     onServerLoad?: (id: string) => Promise<File>;
     onServerDelete?: (id: string) => Promise<void>;
 }
-declare function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }: AvatarArchitectAppProps): react_jsx_runtime.JSX.Element;
+declare function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }: AvatarArchitectAppProps): react_jsx_runtime.JSX.Element;
 
 interface FaAppProps {
     onGenerateImage: (params: Record<string, any>) => Promise<{
@@ -517,6 +518,6 @@ declare function hfLoadMetadata(token: string): Promise<any[]>;
 declare function hfUploadImage(base64: string, id: string, token: string, mimeType?: string): Promise<void>;
 declare function hfLoadImageAsBase64(id: string, token: string): Promise<string | null>;
 
-declare const LIB_VERSION = "1.3.15";
+declare const LIB_VERSION = "1.3.18";
 
 export { AvatarArchitectApp, type AvatarArchitectAppProps, CollapsibleCard, CompactDropdown, type ExtractedCharacter, FaApp, type FaAppProps, FaToolsBadge, type FlowSdk, GLOBAL_STYLES, type Generation, type HFMetadataEntry, 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, getHFToken, groupGenerationsToLabItems, hfDeleteProject, hfDownloadProject, hfListProjects, hfLoadImageAsBase64, hfLoadMetadata, hfLoadTags, hfSaveMetadata, hfSaveTags, hfUploadImage, hfUploadProjectForm, importProjectFromZip, injectXMPMetadata, interpretSdkError, parsePromptFile, parsePromptResponse, setHFToken, useKeyboardNavigation, useOnClickOutside };

package/dist/index.d.ts

@@ -309,12 +309,13 @@ interface AvatarArchitectAppProps {
     onDownload: (base64: string, mimeType: string, filename: string) => Promise<void>;
     onSelectMedia: () => Promise<MediaItem[]>;
     buildInfo?: string;
+    initialHfToken?: string;
     onFetchServerProjects?: () => Promise<ProjectMeta[]>;
     onServerSave?: (zipBase64: string, name: string) => Promise<ProjectMeta>;
     onServerLoad?: (id: string) => Promise<File>;
     onServerDelete?: (id: string) => Promise<void>;
 }
-declare function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }: AvatarArchitectAppProps): react_jsx_runtime.JSX.Element;
+declare function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }: AvatarArchitectAppProps): react_jsx_runtime.JSX.Element;
 
 interface FaAppProps {
     onGenerateImage: (params: Record<string, any>) => Promise<{
@@ -517,6 +518,6 @@ declare function hfLoadMetadata(token: string): Promise<any[]>;
 declare function hfUploadImage(base64: string, id: string, token: string, mimeType?: string): Promise<void>;
 declare function hfLoadImageAsBase64(id: string, token: string): Promise<string | null>;
 
-declare const LIB_VERSION = "1.3.15";
+declare const LIB_VERSION = "1.3.18";
 
 export { AvatarArchitectApp, type AvatarArchitectAppProps, CollapsibleCard, CompactDropdown, type ExtractedCharacter, FaApp, type FaAppProps, FaToolsBadge, type FlowSdk, GLOBAL_STYLES, type Generation, type HFMetadataEntry, 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, getHFToken, groupGenerationsToLabItems, hfDeleteProject, hfDownloadProject, hfListProjects, hfLoadImageAsBase64, hfLoadMetadata, hfLoadTags, hfSaveMetadata, hfSaveTags, hfUploadImage, hfUploadProjectForm, importProjectFromZip, injectXMPMetadata, interpretSdkError, parsePromptFile, parsePromptResponse, setHFToken, useKeyboardNavigation, useOnClickOutside };

package/dist/index.js

@@ -3451,7 +3451,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
 
 // src/components/AvatarArchitectApp.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
+function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
   (0, import_react21.useEffect)(() => {
     const id = "flow-styles";
     if (!document.getElementById(id)) {
@@ -3470,8 +3470,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     }
   });
   const [projectLoaded, setProjectLoaded] = (0, import_react21.useState)(false);
-  const [hfToken, setHfToken] = (0, import_react21.useState)("");
-  const [hfTokenInput, setHfTokenInput] = (0, import_react21.useState)("");
+  const [hfToken, setHfToken] = (0, import_react21.useState)(initialHfToken || "");
+  const [hfTokenInput, setHfTokenInput] = (0, import_react21.useState)(initialHfToken || "");
   const [isLoadingFromHF, setIsLoadingFromHF] = (0, import_react21.useState)(false);
   const [hfMetadata, setHfMetadata] = (0, import_react21.useState)([]);
   const hfTagSaveTimer = (0, import_react21.useRef)(null);
@@ -4255,7 +4255,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         !projectLoaded && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-2 w-full", children: [
+        !initialHfToken && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-2 w-full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "input",
             {
@@ -4954,39 +4954,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/components/FaApp.tsx
-var import_react22 = require("react");
-init_hfStateService();
 var import_jsx_runtime21 = require("react/jsx-runtime");
-function TokenDialog({ onSubmit }) {
-  const [value, setValue] = (0, import_react22.useState)("");
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { minHeight: "100vh", background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", padding: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { width: "100%", maxWidth: 400, background: "#171717", border: "1px solid #262626", borderRadius: 8, padding: 24, position: "relative", overflow: "hidden" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { position: "absolute", top: 0, left: 0, width: "100%", height: 3, background: "linear-gradient(to right, #3b82f6, #a855f7, #ec4899)" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: 20 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { color: "#fff", fontSize: 14, fontWeight: 700, marginBottom: 4 }, children: "Lib Token" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { color: "#525252", fontSize: 11, fontFamily: "monospace" }, children: "Kein Token konfiguriert \u2014 bitte manuell eingeben" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      "input",
-      {
-        type: "password",
-        value,
-        onChange: (e) => setValue(e.target.value),
-        onKeyDown: (e) => e.key === "Enter" && value.trim() && onSubmit(value.trim()),
-        placeholder: "Token eingeben\u2026",
-        autoFocus: true,
-        style: { width: "100%", background: "#000", border: "1px solid #404040", borderRadius: 4, color: "#fff", padding: "10px 12px", fontSize: 12, fontFamily: "monospace", outline: "none", boxSizing: "border-box", marginBottom: 12 }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      "button",
-      {
-        onClick: () => value.trim() && onSubmit(value.trim()),
-        style: { width: "100%", background: "#3b82f6", border: "none", borderRadius: 4, color: "#fff", padding: "10px", fontSize: 12, fontWeight: 700, cursor: "pointer", fontFamily: "inherit" },
-        children: "Best\xE4tigen"
-      }
-    )
-  ] }) });
-}
 function FaApp({
   onGenerateImage,
   onGeneratePrompt,
@@ -5003,14 +4971,6 @@ function FaApp({
   onServerDelete,
   buildInfo
 }) {
-  const [token, setToken] = (0, import_react22.useState)(libToken || "");
-  (0, import_react22.useEffect)(() => {
-    if (libToken) setToken(libToken);
-  }, [libToken]);
-  (0, import_react22.useEffect)(() => {
-    if (token) setHFToken(token);
-  }, [token]);
-  if (!token) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TokenDialog, { onSubmit: setToken });
   const wrappedPrompt = async (text, options) => {
     const result = await onGeneratePrompt(text, options);
     return result.text;
@@ -5022,6 +4982,7 @@ function FaApp({
       onGeneratePrompt: wrappedPrompt,
       onDownload,
       onSelectMedia,
+      initialHfToken: libToken ? libToken.startsWith("hf_") ? libToken : `hf_${libToken}` : void 0,
       onFetchServerProjects,
       onServerSave,
       onServerLoad,
@@ -5033,7 +4994,7 @@ function FaApp({
 
 // src/index.ts
 init_hfStateService();
-var LIB_VERSION = "1.3.15";
+var LIB_VERSION = "1.3.18";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarArchitectApp,

package/dist/index.mjs

@@ -2893,7 +2893,7 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
 
 // src/components/AvatarArchitectApp.tsx
 import { Fragment as Fragment9, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
-function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
+function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
   useEffect5(() => {
     const id = "flow-styles";
     if (!document.getElementById(id)) {
@@ -2912,8 +2912,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     }
   });
   const [projectLoaded, setProjectLoaded] = useState14(false);
-  const [hfToken, setHfToken] = useState14("");
-  const [hfTokenInput, setHfTokenInput] = useState14("");
+  const [hfToken, setHfToken] = useState14(initialHfToken || "");
+  const [hfTokenInput, setHfTokenInput] = useState14(initialHfToken || "");
   const [isLoadingFromHF, setIsLoadingFromHF] = useState14(false);
   const [hfMetadata, setHfMetadata] = useState14([]);
   const hfTagSaveTimer = useRef6(null);
@@ -3697,7 +3697,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         !projectLoaded && /* @__PURE__ */ jsx20("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
       ] }),
       /* @__PURE__ */ jsxs18("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
-        /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 w-full", children: [
+        !initialHfToken && /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 w-full", children: [
           /* @__PURE__ */ jsx20(
             "input",
             {
@@ -4396,38 +4396,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/components/FaApp.tsx
-import { useState as useState15, useEffect as useEffect6 } from "react";
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
-function TokenDialog({ onSubmit }) {
-  const [value, setValue] = useState15("");
-  return /* @__PURE__ */ jsx21("div", { style: { minHeight: "100vh", background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", padding: 16 }, children: /* @__PURE__ */ jsxs19("div", { style: { width: "100%", maxWidth: 400, background: "#171717", border: "1px solid #262626", borderRadius: 8, padding: 24, position: "relative", overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsx21("div", { style: { position: "absolute", top: 0, left: 0, width: "100%", height: 3, background: "linear-gradient(to right, #3b82f6, #a855f7, #ec4899)" } }),
-    /* @__PURE__ */ jsxs19("div", { style: { marginBottom: 20 }, children: [
-      /* @__PURE__ */ jsx21("div", { style: { color: "#fff", fontSize: 14, fontWeight: 700, marginBottom: 4 }, children: "Lib Token" }),
-      /* @__PURE__ */ jsx21("div", { style: { color: "#525252", fontSize: 11, fontFamily: "monospace" }, children: "Kein Token konfiguriert \u2014 bitte manuell eingeben" })
-    ] }),
-    /* @__PURE__ */ jsx21(
-      "input",
-      {
-        type: "password",
-        value,
-        onChange: (e) => setValue(e.target.value),
-        onKeyDown: (e) => e.key === "Enter" && value.trim() && onSubmit(value.trim()),
-        placeholder: "Token eingeben\u2026",
-        autoFocus: true,
-        style: { width: "100%", background: "#000", border: "1px solid #404040", borderRadius: 4, color: "#fff", padding: "10px 12px", fontSize: 12, fontFamily: "monospace", outline: "none", boxSizing: "border-box", marginBottom: 12 }
-      }
-    ),
-    /* @__PURE__ */ jsx21(
-      "button",
-      {
-        onClick: () => value.trim() && onSubmit(value.trim()),
-        style: { width: "100%", background: "#3b82f6", border: "none", borderRadius: 4, color: "#fff", padding: "10px", fontSize: 12, fontWeight: 700, cursor: "pointer", fontFamily: "inherit" },
-        children: "Best\xE4tigen"
-      }
-    )
-  ] }) });
-}
+import { jsx as jsx21 } from "react/jsx-runtime";
 function FaApp({
   onGenerateImage,
   onGeneratePrompt,
@@ -4444,14 +4413,6 @@ function FaApp({
   onServerDelete,
   buildInfo
 }) {
-  const [token, setToken] = useState15(libToken || "");
-  useEffect6(() => {
-    if (libToken) setToken(libToken);
-  }, [libToken]);
-  useEffect6(() => {
-    if (token) setHFToken(token);
-  }, [token]);
-  if (!token) return /* @__PURE__ */ jsx21(TokenDialog, { onSubmit: setToken });
   const wrappedPrompt = async (text, options) => {
     const result = await onGeneratePrompt(text, options);
     return result.text;
@@ -4463,6 +4424,7 @@ function FaApp({
       onGeneratePrompt: wrappedPrompt,
       onDownload,
       onSelectMedia,
+      initialHfToken: libToken ? libToken.startsWith("hf_") ? libToken : `hf_${libToken}` : void 0,
       onFetchServerProjects,
       onServerSave,
       onServerLoad,
@@ -4473,7 +4435,7 @@ function FaApp({
 }
 
 // src/index.ts
-var LIB_VERSION = "1.3.15";
+var LIB_VERSION = "1.3.18";
 export {
   AvatarArchitectApp,
   CollapsibleCard,

package/package.json

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