@rslsp1/fa-app-tools 1.2.4 → 1.2.6

package/dist/index.js

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,125 +30,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  AvatarArchitectApp: () => AvatarArchitectApp,
-  CollapsibleCard: () => CollapsibleCard,
-  CompactDropdown: () => CompactDropdown,
-  FaToolsBadge: () => FaToolsBadge,
-  GLOBAL_STYLES: () => GLOBAL_STYLES,
-  HistoryPanel: () => HistoryPanel,
-  InspectPanel: () => InspectPanel,
-  LIB_VERSION: () => LIB_VERSION,
-  LabBlend: () => LabBlend,
-  LabCompare: () => LabCompare,
-  LabImagePicker: () => LabImagePicker,
-  LabLoop: () => LabLoop,
-  LabRemix: () => LabRemix,
-  LabsTab: () => LabsTab,
-  ListView: () => ListView,
-  MediaLibrary: () => MediaLibrary,
-  PillButton: () => PillButton,
-  ProjectSyncTab: () => ProjectSyncTab,
-  PromptTab: () => PromptTab,
-  SectionLabel: () => SectionLabel,
-  SetupPanel: () => SetupPanel,
-  TagManagerPanel: () => TagManagerPanel,
-  autoLabel: () => autoLabel,
-  buildBlendInstruction: () => buildBlendInstruction,
-  buildCompareInstruction: () => buildCompareInstruction,
-  buildFallbackPrompt: () => buildFallbackPrompt,
-  buildGenerationPrompt: () => buildGenerationPrompt,
-  buildImageGenerationOptions: () => buildImageGenerationOptions,
-  buildLoopInstruction: () => buildLoopInstruction,
-  buildPromptTabPayload: () => buildPromptTabPayload,
-  buildReferenceImageMediaIds: () => buildReferenceImageMediaIds,
-  buildRemixInstruction: () => buildRemixInstruction,
-  buildScanInstruction: () => buildScanInstruction,
-  cleanAiResponse: () => cleanAiResponse,
-  createFlowServices: () => createFlowServices,
-  exportProjectToZip: () => exportProjectToZip,
-  formatTreeToMarkdown: () => formatTreeToMarkdown,
-  frameToGeneration: () => frameToGeneration,
-  getFormattedTimestamp: () => getFormattedTimestamp,
-  groupGenerationsToLabItems: () => groupGenerationsToLabItems,
-  importProjectFromZip: () => importProjectFromZip,
-  injectXMPMetadata: () => injectXMPMetadata,
-  interpretSdkError: () => interpretSdkError,
-  parsePromptFile: () => parsePromptFile,
-  parsePromptResponse: () => parsePromptResponse,
-  useKeyboardNavigation: () => useKeyboardNavigation,
-  useOnClickOutside: () => useOnClickOutside
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/hooks/useOnClickOutside.ts
-var import_react = require("react");
-function useOnClickOutside(ref, handler) {
-  (0, import_react.useEffect)(() => {
-    const listener = (event) => {
-      if (!ref.current || ref.current.contains(event.target)) return;
-      handler(event);
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, handler]);
-}
-
-// src/hooks/useKeyboardNavigation.ts
-var import_react2 = require("react");
-function useKeyboardNavigation(history, currentResult, setCurrentResult) {
-  (0, import_react2.useEffect)(() => {
-    const handleKeyDown = (e) => {
-      if (e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLInputElement) return;
-      if (!currentResult || history.length === 0) return;
-      const currentIndex = history.findIndex((h) => h.id === currentResult.id);
-      if (e.key === "ArrowRight" && currentIndex < history.length - 1) {
-        setCurrentResult(history[currentIndex + 1]);
-      } else if (e.key === "ArrowLeft" && currentIndex > 0) {
-        setCurrentResult(history[currentIndex - 1]);
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [currentResult, history, setCurrentResult]);
-}
-
-// src/lib/utils.ts
-var getFormattedTimestamp = () => {
-  const d = /* @__PURE__ */ new Date();
-  const pad = (n) => n.toString().padStart(2, "0");
-  return `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}_${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;
-};
-var GLOBAL_STYLES = `
-  .dark-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
-  .dark-scrollbar::-webkit-scrollbar-track { background: transparent; }
-  .dark-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
-  html, body, #root { margin: 0; padding: 0; width: 100%; height: 100%; background: #0e0e0e; font-family: 'Google Sans Text', sans-serif; overflow: hidden; }
-  @keyframes prompt-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
-  .prompt-loading { background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 75%); background-size: 200% 100%; animation: prompt-shimmer 2s infinite linear; }
-  @keyframes dropdown-enter { from { opacity: 0; transform: scale(0.95) translateY(-5px); } to { opacity: 1; transform: scale(1) translateY(0); } }
-  .animate-dropdown { animation: dropdown-enter 0.1s ease-out forwards; }
-`;
-
 // src/lib/metadata.ts
-var crcTable = (() => {
-  let c;
-  const table = new Uint32Array(256);
-  for (let n = 0; n < 256; n++) {
-    c = n;
-    for (let k = 0; k < 8; k++) {
-      c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
-    }
-    table[n] = c;
-  }
-  return table;
-})();
 function calculateCRC(bytes) {
   let crc = 4294967295;
   for (let i = 0; i < bytes.length; i++) {
@@ -251,9 +136,31 @@ function injectXMPMetadata(base64, prompt, seed, model, id, tags = [], hierarchy
     return base64;
   }
 }
+var crcTable;
+var init_metadata = __esm({
+  "src/lib/metadata.ts"() {
+    "use strict";
+    crcTable = (() => {
+      let c;
+      const table = new Uint32Array(256);
+      for (let n = 0; n < 256; n++) {
+        c = n;
+        for (let k = 0; k < 8; k++) {
+          c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
+        }
+        table[n] = c;
+      }
+      return table;
+    })();
+  }
+});
 
 // src/lib/project.ts
-var import_jszip = __toESM(require("jszip"));
+var project_exports = {};
+__export(project_exports, {
+  exportProjectToZip: () => exportProjectToZip,
+  importProjectFromZip: () => importProjectFromZip
+});
 function generateMarkdownReport(nodes, history) {
   let md = "# Avatar Architect - Projekt Report\n\n";
   md += `Exportiert: ${(/* @__PURE__ */ new Date()).toLocaleString()}
@@ -343,6 +250,234 @@ async function importProjectFromZip(file) {
   }
   return data;
 }
+var import_jszip;
+var init_project = __esm({
+  "src/lib/project.ts"() {
+    "use strict";
+    import_jszip = __toESM(require("jszip"));
+    init_metadata();
+  }
+});
+
+// src/lib/hfStateService.ts
+var hfStateService_exports = {};
+__export(hfStateService_exports, {
+  HF_TOKEN_KEY: () => HF_TOKEN_KEY,
+  getHFToken: () => getHFToken,
+  hfDeleteProject: () => hfDeleteProject,
+  hfDownloadProject: () => hfDownloadProject,
+  hfListProjects: () => hfListProjects,
+  hfUploadProject: () => hfUploadProject,
+  setHFToken: () => setHFToken
+});
+function getHFToken() {
+  try {
+    return localStorage.getItem(HF_TOKEN_KEY);
+  } catch {
+    return null;
+  }
+}
+function setHFToken(token) {
+  try {
+    localStorage.setItem(HF_TOKEN_KEY, token);
+  } catch {
+  }
+}
+async function hfListProjects(token) {
+  const res = await fetch(`${HF_BASE}/api/datasets/${HF_REPO}/tree/main`, {
+    headers: { Authorization: `Bearer ${token}` }
+  });
+  if (!res.ok) throw new Error(`HF list failed: ${res.status} ${res.statusText}`);
+  const files = await res.json();
+  return files.filter((f) => f.type === "file" && f.path.endsWith(".zip")).map((f) => ({
+    id: f.path.replace(/\.zip$/, ""),
+    name: f.path.replace(/\.zip$/, ""),
+    path: f.path,
+    size: f.size,
+    isLfs: !!f.lfs
+  }));
+}
+async function hfDownloadProject(path, token) {
+  const res = await fetch(
+    `${HF_BASE}/datasets/${HF_REPO}/resolve/main/${path}?download=true`,
+    { headers: { Authorization: `Bearer ${token}` } }
+  );
+  if (!res.ok) throw new Error(`HF download failed: ${res.status} ${res.statusText}`);
+  const blob = await res.blob();
+  return new File([blob], path, { type: "application/zip" });
+}
+async function hfUploadProject(zipBase64, name, token) {
+  const filename = name.endsWith(".zip") ? name : `${name}.zip`;
+  const binary = atob(zipBase64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", bytes);
+  const oid = Array.from(new Uint8Array(hashBuffer)).map((b) => b.toString(16).padStart(2, "0")).join("");
+  const size = bytes.length;
+  const sampleBytes = bytes.slice(0, 512);
+  let sampleBinary = "";
+  for (let i = 0; i < sampleBytes.length; i++) sampleBinary += String.fromCharCode(sampleBytes[i]);
+  const sample = btoa(sampleBinary);
+  const preRes = await fetch(`${HF_BASE}/api/datasets/${HF_REPO}/preupload/main`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+    body: JSON.stringify({ files: [{ path: filename, size, sample }] })
+  });
+  if (!preRes.ok) throw new Error(`HF preupload failed: ${preRes.status} ${preRes.statusText}`);
+  const preData = await preRes.json();
+  const fileInfo = preData.files?.[0];
+  if (fileInfo?.uploadMode === "lfs" && fileInfo?.uploadUrl) {
+    const uploadRes = await fetch(fileInfo.uploadUrl, {
+      method: "PUT",
+      headers: { "Content-Type": "application/octet-stream", ...fileInfo.header || {} },
+      body: bytes
+    });
+    if (!uploadRes.ok) throw new Error(`HF LFS upload failed: ${uploadRes.status}`);
+  }
+  const commitRes = await fetch(`${HF_BASE}/api/datasets/${HF_REPO}/commit/main`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/x-ndjson" },
+    body: [
+      JSON.stringify({ key: "header", value: { summary: `Upload ${filename}`, description: "" } }),
+      JSON.stringify({ key: "lfsFile", value: { path: filename, algo: "sha256", oid, size } })
+    ].join("\n")
+  });
+  if (!commitRes.ok) {
+    const err = await commitRes.text();
+    throw new Error(`HF commit failed: ${commitRes.status} \u2014 ${err}`);
+  }
+  return { id: filename.replace(/\.zip$/, ""), name: filename.replace(/\.zip$/, ""), path: filename, size, isLfs: true };
+}
+async function hfDeleteProject(path, token) {
+  const res = await fetch(`${HF_BASE}/api/datasets/${HF_REPO}/commit/main`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/x-ndjson" },
+    body: [
+      JSON.stringify({ key: "header", value: { summary: `Delete ${path}`, description: "" } }),
+      JSON.stringify({ key: "deletedFile", value: { path } })
+    ].join("\n")
+  });
+  if (!res.ok) throw new Error(`HF delete failed: ${res.status} ${res.statusText}`);
+}
+var HF_BASE, HF_REPO, HF_TOKEN_KEY;
+var init_hfStateService = __esm({
+  "src/lib/hfStateService.ts"() {
+    "use strict";
+    HF_BASE = "https://huggingface.co";
+    HF_REPO = "RolandSch/fa-app-state";
+    HF_TOKEN_KEY = "hf-token";
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AvatarArchitectApp: () => AvatarArchitectApp,
+  CollapsibleCard: () => CollapsibleCard,
+  CompactDropdown: () => CompactDropdown,
+  FaToolsBadge: () => FaToolsBadge,
+  GLOBAL_STYLES: () => GLOBAL_STYLES,
+  HistoryPanel: () => HistoryPanel,
+  InspectPanel: () => InspectPanel,
+  LIB_VERSION: () => LIB_VERSION,
+  LabBlend: () => LabBlend,
+  LabCompare: () => LabCompare,
+  LabImagePicker: () => LabImagePicker,
+  LabLoop: () => LabLoop,
+  LabRemix: () => LabRemix,
+  LabsTab: () => LabsTab,
+  ListView: () => ListView,
+  MediaLibrary: () => MediaLibrary,
+  PillButton: () => PillButton,
+  ProjectSyncTab: () => ProjectSyncTab,
+  PromptTab: () => PromptTab,
+  SectionLabel: () => SectionLabel,
+  SetupPanel: () => SetupPanel,
+  TagManagerPanel: () => TagManagerPanel,
+  autoLabel: () => autoLabel,
+  buildBlendInstruction: () => buildBlendInstruction,
+  buildCompareInstruction: () => buildCompareInstruction,
+  buildFallbackPrompt: () => buildFallbackPrompt,
+  buildGenerationPrompt: () => buildGenerationPrompt,
+  buildImageGenerationOptions: () => buildImageGenerationOptions,
+  buildLoopInstruction: () => buildLoopInstruction,
+  buildPromptTabPayload: () => buildPromptTabPayload,
+  buildReferenceImageMediaIds: () => buildReferenceImageMediaIds,
+  buildRemixInstruction: () => buildRemixInstruction,
+  buildScanInstruction: () => buildScanInstruction,
+  cleanAiResponse: () => cleanAiResponse,
+  createFlowServices: () => createFlowServices,
+  exportProjectToZip: () => exportProjectToZip,
+  formatTreeToMarkdown: () => formatTreeToMarkdown,
+  frameToGeneration: () => frameToGeneration,
+  getFormattedTimestamp: () => getFormattedTimestamp,
+  groupGenerationsToLabItems: () => groupGenerationsToLabItems,
+  importProjectFromZip: () => importProjectFromZip,
+  injectXMPMetadata: () => injectXMPMetadata,
+  interpretSdkError: () => interpretSdkError,
+  parsePromptFile: () => parsePromptFile,
+  parsePromptResponse: () => parsePromptResponse,
+  useKeyboardNavigation: () => useKeyboardNavigation,
+  useOnClickOutside: () => useOnClickOutside
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/hooks/useOnClickOutside.ts
+var import_react = require("react");
+function useOnClickOutside(ref, handler) {
+  (0, import_react.useEffect)(() => {
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) return;
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}
+
+// src/hooks/useKeyboardNavigation.ts
+var import_react2 = require("react");
+function useKeyboardNavigation(history, currentResult, setCurrentResult) {
+  (0, import_react2.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLInputElement) return;
+      if (!currentResult || history.length === 0) return;
+      const currentIndex = history.findIndex((h) => h.id === currentResult.id);
+      if (e.key === "ArrowRight" && currentIndex < history.length - 1) {
+        setCurrentResult(history[currentIndex + 1]);
+      } else if (e.key === "ArrowLeft" && currentIndex > 0) {
+        setCurrentResult(history[currentIndex - 1]);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [currentResult, history, setCurrentResult]);
+}
+
+// src/lib/utils.ts
+var getFormattedTimestamp = () => {
+  const d = /* @__PURE__ */ new Date();
+  const pad = (n) => n.toString().padStart(2, "0");
+  return `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}_${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;
+};
+var GLOBAL_STYLES = `
+  .dark-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
+  .dark-scrollbar::-webkit-scrollbar-track { background: transparent; }
+  .dark-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
+  html, body, #root { margin: 0; padding: 0; width: 100%; height: 100%; background: #0e0e0e; font-family: 'Google Sans Text', sans-serif; overflow: hidden; }
+  @keyframes prompt-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
+  .prompt-loading { background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 75%); background-size: 200% 100%; animation: prompt-shimmer 2s infinite linear; }
+  @keyframes dropdown-enter { from { opacity: 0; transform: scale(0.95) translateY(-5px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+  .animate-dropdown { animation: dropdown-enter 0.1s ease-out forwards; }
+`;
+
+// src/index.ts
+init_metadata();
+init_project();
 
 // src/lib/aiHelpers.ts
 function buildGenerationPrompt(hierarchyText, mode = "creative") {
@@ -1591,6 +1726,7 @@ var PromptTab = ({
 
 // src/components/ProjectSyncTab.tsx
 var import_react13 = require("react");
+init_hfStateService();
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var ProjectSyncTab = ({
   onProjectExport,
@@ -1603,7 +1739,10 @@ var ProjectSyncTab = ({
   onServerDelete,
   onRefreshServerProjects,
   onComputeSyncDiff,
-  onExecuteSync
+  onExecuteSync,
+  hfToken,
+  onHfLoad,
+  onProjectExportBase64
 }) => {
   const projectInputRef = (0, import_react13.useRef)(null);
   const workspaceInputRef = (0, import_react13.useRef)(null);
@@ -1658,6 +1797,25 @@ var ProjectSyncTab = ({
     });
   };
   const isWorking = projectActionState === "working" || projectActionState === "working-full";
+  const [hfProjects, setHfProjects] = (0, import_react13.useState)([]);
+  const [hfLoading, setHfLoading] = (0, import_react13.useState)(false);
+  const [hfSaving, setHfSaving] = (0, import_react13.useState)(false);
+  const [hfError, setHfError] = (0, import_react13.useState)(null);
+  const [hfSaveName, setHfSaveName] = (0, import_react13.useState)("");
+  const loadHfProjects = async (token) => {
+    setHfLoading(true);
+    setHfError(null);
+    try {
+      setHfProjects(await hfListProjects(token));
+    } catch (e) {
+      setHfError(e.message);
+    } finally {
+      setHfLoading(false);
+    }
+  };
+  (0, import_react13.useEffect)(() => {
+    if (hfToken) loadHfProjects(hfToken);
+  }, [hfToken]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-0 overflow-y-auto dark-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "p-6 flex flex-col gap-8", children: [
     (onProjectExport || onProjectImport || onWorkspaceImport) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionLabel, { children: "Projekt-ZIP" }),
@@ -1748,6 +1906,94 @@ var ProjectSyncTab = ({
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: () => onServerDelete?.(p.id), className: "w-8 h-8 flex items-center justify-center text-white/20 active:text-red-400 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "delete" }) })
       ] }, p.id)) })
     ] }),
+    hfToken && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionLabel, { children: "Hugging Face" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: () => loadHfProjects(hfToken), className: "text-white/30 hover:text-white/60 transition", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `material-symbols-outlined text-[18px]${hfLoading ? " animate-spin" : ""}`, children: "refresh" }) })
+      ] }),
+      onProjectExportBase64 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            type: "text",
+            value: hfSaveName,
+            onChange: (e) => setHfSaveName(e.target.value),
+            placeholder: "Name (optional)",
+            className: "flex-1 bg-white/5 border border-white/10 rounded-xl px-3 text-[12px] text-white/70 outline-none placeholder:text-white/20",
+            style: { height: 40 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          PillButton,
+          {
+            variant: "filled",
+            icon: "cloud_upload",
+            loading: hfSaving,
+            onClick: async () => {
+              if (!onProjectExportBase64) return;
+              setHfSaving(true);
+              setHfError(null);
+              try {
+                const base64 = await onProjectExportBase64();
+                const name = hfSaveName.trim() || `project_${(/* @__PURE__ */ new Date()).toISOString().slice(0, 16).replace("T", "_").replace(":", "")}`;
+                await hfUploadProject(base64, name, hfToken);
+                setHfSaveName("");
+                await loadHfProjects(hfToken);
+              } catch (e) {
+                setHfError(e.message);
+              } finally {
+                setHfSaving(false);
+              }
+            },
+            children: "Speichern"
+          }
+        )
+      ] }),
+      hfError && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[10px] text-red-400 font-mono px-1", children: hfError }),
+      !hfLoading && hfProjects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[10px] text-white/20 px-2", children: "Noch nichts auf HF gespeichert." }),
+      hfProjects.map((p) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-white/5 border border-white/5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[11px] text-white/70 font-bold truncate", children: p.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-[9px] text-white/25", children: [
+            (p.size / 1024 / 1024).toFixed(1),
+            " MB",
+            p.isLfs ? " \xB7 LFS" : ""
+          ] })
+        ] }),
+        onHfLoad && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            onClick: async () => {
+              try {
+                const { hfDownloadProject: hfDownloadProject2 } = await Promise.resolve().then(() => (init_hfStateService(), hfStateService_exports));
+                const file = await hfDownloadProject2(p.path, hfToken);
+                onHfLoad(file);
+              } catch (e) {
+                setHfError(e.message);
+              }
+            },
+            className: "w-8 h-8 flex items-center justify-center text-white/30 active:text-white transition-colors",
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "cloud_download" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            onClick: async () => {
+              if (!confirm(`"${p.name}" auf HF l\xF6schen?`)) return;
+              try {
+                await hfDeleteProject(p.path, hfToken);
+                await loadHfProjects(hfToken);
+              } catch (e) {
+                setHfError(e.message);
+              }
+            },
+            className: "w-8 h-8 flex items-center justify-center text-white/20 active:text-red-400 transition-colors",
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "delete" })
+          }
+        )
+      ] }, p.id))
+    ] }),
     onComputeSyncDiff && onExecuteSync && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionLabel, { children: "Sync" }),
       (syncState === "idle" || syncState === "computing") && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PillButton, { variant: "outline", icon: "compare_arrows", loading: syncState === "computing", onClick: handleComputeDiff, children: "Diff berechnen" }),
@@ -1814,6 +2060,10 @@ var ProjectSyncTab = ({
   ] }) });
 };
 
+// src/components/AvatarArchitectApp.tsx
+init_project();
+init_metadata();
+
 // src/lib/labHelpers.ts
 function groupGenerationsToLabItems(generations) {
   const map = /* @__PURE__ */ new Map();
@@ -3032,6 +3282,9 @@ 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 [isLoadingFromHF, setIsLoadingFromHF] = (0, import_react21.useState)(false);
   const wsInputRef = (0, import_react21.useRef)(null);
   const startApp = (choice) => {
     try {
@@ -3632,6 +3885,59 @@ 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: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "input",
+            {
+              type: "password",
+              value: hfTokenInput,
+              onChange: (e) => setHfTokenInput(e.target.value),
+              onKeyDown: (e) => e.key === "Enter" && hfTokenInput.trim() && setHfToken(hfTokenInput.trim()),
+              placeholder: "HF Token (hf_\u2026)",
+              className: "flex-1 rounded-xl px-3 text-[11px] font-mono outline-none",
+              style: { height: 44, background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.7)" }
+            }
+          ),
+          hfTokenInput.trim() && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "button",
+            {
+              onClick: () => setHfToken(hfTokenInput.trim()),
+              className: "px-3 rounded-xl text-[11px] font-bold text-white",
+              style: { background: "#f59e0b", height: 44 },
+              children: "OK"
+            }
+          )
+        ] }),
+        hfToken && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          "button",
+          {
+            disabled: isLoadingFromHF,
+            onClick: async () => {
+              setIsLoadingFromHF(true);
+              try {
+                const { hfListProjects: hfListProjects2, hfDownloadProject: hfDownloadProject2 } = await Promise.resolve().then(() => (init_hfStateService(), hfStateService_exports));
+                const projects = await hfListProjects2(hfToken);
+                if (projects.length > 0) {
+                  const file = await hfDownloadProject2(projects[0].path, hfToken);
+                  await handleProjectImport(file);
+                }
+              } catch (e) {
+                alert("HF Fehler: " + e.message);
+              } finally {
+                setIsLoadingFromHF(false);
+              }
+            },
+            className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform disabled:opacity-50",
+            style: { height: 56, background: "#f59e0b" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromHF ? " animate-spin" : ""}`, children: isLoadingFromHF ? "sync" : "cloud_download" }),
+              isLoadingFromHF ? "Laden\u2026" : "Von HF laden"
+            ]
+          }
+        ),
+        hfToken && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand von Hugging Face laden" })
+      ] }),
       onFetchServerProjects && /* @__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)(
           "button",
@@ -3924,7 +4230,13 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               onServerDelete: onServerDelete ? handleServerDelete : void 0,
               onRefreshServerProjects: onFetchServerProjects ? fetchServerProjects : void 0,
               onComputeSyncDiff: onFetchServerProjects && onServerLoad && onServerSave ? handleComputeSyncDiff : void 0,
-              onExecuteSync: onFetchServerProjects && onServerLoad && onServerSave ? handleExecuteSync : void 0
+              onExecuteSync: onFetchServerProjects && onServerLoad && onServerSave ? handleExecuteSync : void 0,
+              hfToken: hfToken || void 0,
+              onHfLoad: (f) => handleProjectImport(f),
+              onProjectExportBase64: async () => {
+                const { base64 } = await Promise.resolve().then(() => (init_project(), project_exports)).then((m) => m.exportProjectToZip(nodes, edges, history, galleryItems, { aspectRatio, selectedModel, seed, seedMode }, workspaceTags, recentLabItems.map((i) => i.id)));
+                return base64;
+              }
             }
           ),
           activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -4247,7 +4559,13 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             onServerDelete: onServerDelete ? handleServerDelete : void 0,
             onRefreshServerProjects: onFetchServerProjects ? fetchServerProjects : void 0,
             onComputeSyncDiff: onFetchServerProjects && onServerLoad && onServerSave ? handleComputeSyncDiff : void 0,
-            onExecuteSync: onFetchServerProjects && onServerLoad && onServerSave ? handleExecuteSync : void 0
+            onExecuteSync: onFetchServerProjects && onServerLoad && onServerSave ? handleExecuteSync : void 0,
+            hfToken: hfToken || void 0,
+            onHfLoad: (f) => handleProjectImport(f),
+            onProjectExportBase64: async () => {
+              const { base64 } = await Promise.resolve().then(() => (init_project(), project_exports)).then((m) => m.exportProjectToZip(nodes, edges, history, galleryItems, { aspectRatio, selectedModel, seed, seedMode }, workspaceTags, recentLabItems.map((i) => i.id)));
+              return base64;
+            }
           }
         )
       ] })
@@ -4256,7 +4574,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/index.ts
-var LIB_VERSION = "1.2.4";
+var LIB_VERSION = "1.2.6";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarArchitectApp,