@rslsp1/fa-app-tools 1.3.18 → 2.0.13

package/dist/index.js

@@ -259,13 +259,28 @@ var init_project = __esm({
   }
 });
 
+// src/lib/hfEventTypes.ts
+var CURRENT_EVENT_VERSION;
+var init_hfEventTypes = __esm({
+  "src/lib/hfEventTypes.ts"() {
+    "use strict";
+    CURRENT_EVENT_VERSION = { major: 1, minor: 0 };
+  }
+});
+
 // src/lib/hfStateService.ts
 var hfStateService_exports = {};
 __export(hfStateService_exports, {
   HF_TOKEN_KEY: () => HF_TOKEN_KEY,
   getHFToken: () => getHFToken,
+  getSessionClientId: () => getSessionClientId,
+  hfBatchArchive: () => hfBatchArchive,
+  hfBootstrapFromLegacy: () => hfBootstrapFromLegacy,
   hfDeleteProject: () => hfDeleteProject,
+  hfDownloadBinaryByPath: () => hfDownloadBinaryByPath,
+  hfDownloadJsonByPath: () => hfDownloadJsonByPath,
   hfDownloadProject: () => hfDownloadProject,
+  hfListDir: () => hfListDir,
   hfListProjects: () => hfListProjects,
   hfLoadImageAsBase64: () => hfLoadImageAsBase64,
   hfLoadMetadata: () => hfLoadMetadata,
@@ -275,7 +290,12 @@ __export(hfStateService_exports, {
   hfUploadImage: () => hfUploadImage,
   hfUploadProject: () => hfUploadProject,
   hfUploadProjectForm: () => hfUploadProjectForm,
-  setHFToken: () => setHFToken
+  hfUploadSmallFile: () => hfUploadSmallFile,
+  loadHFState: () => loadHFState,
+  loadPendingEvents: () => loadPendingEvents,
+  setHFToken: () => setHFToken,
+  tsFromEventPath: () => tsFromEventPath,
+  writeHFEvent: () => writeHFEvent
 });
 function getHFToken() {
   try {
@@ -290,6 +310,177 @@ function setHFToken(token) {
   } catch {
   }
 }
+function treeUrl(namespace, subdir = "") {
+  const parts = [namespace.replace(/\/$/, ""), subdir].filter(Boolean).join("/");
+  return `${HF_BASE}/api/datasets/${HF_REPO}/tree/main${parts ? "/" + parts : ""}`;
+}
+async function hfListDir(namespace, subdir, token) {
+  const res = await fetch(treeUrl(namespace, subdir), {
+    headers: { Authorization: `Bearer ${token}` }
+  });
+  if (res.status === 404) return [];
+  if (!res.ok) throw new Error(`HF list failed: ${res.status} ${res.statusText}`);
+  return res.json();
+}
+async function hfDownloadJsonByPath(repoPath, token) {
+  const res = await fetch(
+    `${HF_BASE}/datasets/${HF_REPO}/resolve/main/${repoPath}?download=true`,
+    { headers: { Authorization: `Bearer ${token}` } }
+  );
+  if (!res.ok) throw new Error(`HF download failed: ${res.status}`);
+  return res.json();
+}
+async function hfDownloadBinaryByPath(repoPath, token) {
+  const res = await fetch(
+    `${HF_BASE}/datasets/${HF_REPO}/resolve/main/${repoPath}?download=true`,
+    { headers: { Authorization: `Bearer ${token}` } }
+  );
+  if (!res.ok) throw new Error(`HF download binary failed: ${res.status}`);
+  return new Uint8Array(await res.arrayBuffer());
+}
+async function hfUploadSmallFile(repoPath, content, token, summary = `Update ${repoPath}`) {
+  const bytes = new TextEncoder().encode(content);
+  let binary = "";
+  bytes.forEach((b) => binary += String.fromCharCode(b));
+  const b64 = btoa(binary);
+  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, description: "" } }),
+      JSON.stringify({ key: "file", value: { path: repoPath, encoding: "base64", content: b64 } })
+    ].join("\n")
+  });
+  if (!res.ok) {
+    const err = await res.text().catch(() => "");
+    throw new Error(`HF upload failed: ${res.status} \u2014 ${err.slice(0, 200)}`);
+  }
+}
+async function hfBatchArchive(moves, token, summary) {
+  const lines = [
+    JSON.stringify({ key: "header", value: { summary, description: "" } }),
+    ...moves.flatMap(({ from, to, content }) => {
+      const bytes = new TextEncoder().encode(content);
+      let binary = "";
+      bytes.forEach((b) => binary += String.fromCharCode(b));
+      return [
+        JSON.stringify({ key: "file", value: { path: to, encoding: "base64", content: btoa(binary) } }),
+        JSON.stringify({ key: "deletedFile", value: { path: from } })
+      ];
+    })
+  ];
+  const res = await fetch(`${HF_BASE}/api/datasets/${HF_REPO}/commit/main`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/x-ndjson" },
+    body: lines.join("\n")
+  });
+  if (!res.ok) {
+    const err = await res.text().catch(() => "");
+    throw new Error(`HF batch archive failed: ${res.status} \u2014 ${err.slice(0, 200)}`);
+  }
+}
+function tsFromEventPath(repoPath) {
+  const filename = repoPath.split("/").pop() || "";
+  const iso = filename.replace(/_[^_]+\.json$/, "").replace(/-/g, (m, i) => i > 7 ? ":" : m);
+  const ts = Date.parse(iso.replace(/T(\d{2}):(\d{2}):(\d{2})\.(\d{3})Z/, "T$1:$2:$3.$4Z"));
+  return isNaN(ts) ? 0 : ts;
+}
+async function loadHFState(namespace, token) {
+  const files = await hfListDir(namespace, "", token);
+  const stateFiles = files.filter((f) => f.type === "file" && /state-[\dT\-]+Z\.zip$/.test(f.path.split("/").pop() || "")).sort((a, b) => b.path.localeCompare(a.path));
+  if (!stateFiles.length) return null;
+  const zipBytes = await hfDownloadBinaryByPath(stateFiles[0].path, token);
+  const zip = await import_jszip2.default.loadAsync(zipBytes);
+  const [metadataStr, tagsStr, metaStr] = await Promise.all([
+    zip.file("metadata.json")?.async("string"),
+    zip.file("tags.json")?.async("string"),
+    zip.file("state_meta.json")?.async("string")
+  ]);
+  if (!metadataStr || !tagsStr || !metaStr) throw new Error("state.zip: fehlende Pflicht-Dateien");
+  return {
+    metadata: JSON.parse(metadataStr),
+    tags: JSON.parse(tagsStr),
+    meta: JSON.parse(metaStr)
+  };
+}
+async function loadPendingEvents(namespace, token, sinceTs) {
+  const files = await hfListDir(namespace, "events", token);
+  const pending = files.filter((f) => f.type === "file" && tsFromEventPath(f.path) > sinceTs).sort((a, b) => a.path.localeCompare(b.path));
+  const events = await Promise.all(
+    pending.map((f) => hfDownloadJsonByPath(f.path, token))
+  );
+  return events;
+}
+function getSessionClientId() {
+  return SESSION_CLIENT_ID;
+}
+function tsToFilename(ts) {
+  return new Date(ts).toISOString().replace(/:/g, "-").replace(".", "-");
+}
+async function writeHFEvent(namespace, token, type, payload, prevTs) {
+  const ts = Date.now();
+  const uuid = crypto.randomUUID().slice(0, 8);
+  const event = {
+    v: CURRENT_EVENT_VERSION,
+    type,
+    ts,
+    prevTs,
+    clientId: SESSION_CLIENT_ID,
+    payload
+  };
+  const filename = `${tsToFilename(ts)}_${uuid}.json`;
+  const repoPath = `${namespace}events/${filename}`;
+  await hfUploadSmallFile(repoPath, JSON.stringify(event, null, 2), token, `Event: ${type}`);
+  return event;
+}
+async function hfBootstrapFromLegacy(namespace, token, onProgress) {
+  const log = (msg) => {
+    if (onProgress) onProgress(msg);
+  };
+  log("Lese tags.json \u2026");
+  const tags = await fetch(
+    `${HF_BASE}/datasets/${HF_REPO}/resolve/main/tags.json?download=true`,
+    { headers: { Authorization: `Bearer ${token}` } }
+  ).then((r) => r.ok ? r.json() : null).catch(() => null);
+  log("Lese metadata.json \u2026");
+  const metadata = await fetch(
+    `${HF_BASE}/datasets/${HF_REPO}/resolve/main/metadata.json?download=true`,
+    { headers: { Authorization: `Bearer ${token}` } }
+  ).then((r) => r.ok ? r.json() : []).catch(() => []);
+  const snapshot = {
+    metadata: Array.isArray(metadata) ? metadata : [],
+    tags: tags?.by_category ? tags : { by_category: {}, all: [] },
+    meta: { consolidatedAt: Date.now(), version: 1 }
+  };
+  log(`Erstelle state.zip (${snapshot.metadata.length} Bilder, ${snapshot.tags.all?.length ?? 0} Tags) \u2026`);
+  const zip = new import_jszip2.default();
+  zip.file("metadata.json", JSON.stringify(snapshot.metadata, null, 2));
+  zip.file("tags.json", JSON.stringify(snapshot.tags, null, 2));
+  zip.file("state_meta.json", JSON.stringify(snapshot.meta, null, 2));
+  const zipBytes = await zip.generateAsync({ type: "uint8array", compression: "DEFLATE" });
+  const ts = snapshot.meta.consolidatedAt;
+  const stateFilename = `state-${new Date(ts).toISOString().replace(/:/g, "-").replace(".", "-")}.zip`;
+  const repoPath = `${namespace}${stateFilename}`;
+  let binary = "";
+  zipBytes.forEach((b) => {
+    binary += String.fromCharCode(b);
+  });
+  const b64 = btoa(binary);
+  log("Lade state.zip hoch \u2026");
+  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: `Bootstrap: initialer State aus Legacy-Daten`, description: "" } }),
+      JSON.stringify({ key: "file", value: { path: repoPath, encoding: "base64", content: b64 } })
+    ].join("\n")
+  });
+  if (!commitRes.ok) {
+    const err = await commitRes.text().catch(() => "");
+    throw new Error(`HF commit failed: ${commitRes.status} \u2014 ${err.slice(0, 300)}`);
+  }
+  log(`Fertig \u2014 ${stateFilename}`);
+}
 async function hfListProjects(token) {
   const res = await fetch(`${HF_BASE}/api/datasets/${HF_REPO}/tree/main`, {
     headers: { Authorization: `Bearer ${token}` }
@@ -333,7 +524,6 @@ async function hfUploadProject(zipBase64, name, token) {
   if (!preRes.ok) throw new Error(`HF preupload failed: ${preRes.status} ${preRes.statusText}`);
   const preData = await preRes.json();
   const fileInfo = preData.files?.[0];
-  const debugInfo = JSON.stringify({ uploadMode: fileInfo?.uploadMode, hasUploadUrl: !!fileInfo?.uploadUrl, hasVerifyUrl: !!fileInfo?.verifyUrl, headerKeys: Object.keys(fileInfo?.header || {}), verifyHeaderKeys: Object.keys(fileInfo?.verifyHeader || {}) });
   if (!fileInfo?.uploadMode) throw new Error(`HF preupload kein fileInfo: ${JSON.stringify(preData)}`);
   if (fileInfo.uploadMode === "lfs" && fileInfo.uploadUrl) {
     let uploadStatus = 0;
@@ -379,21 +569,8 @@ async function hfUploadProject(zipBase64, name, token) {
   }
   return { id: filename.replace(/\.zip$/, ""), name: filename.replace(/\.zip$/, ""), path: filename, size, isLfs: true };
 }
-async function hfUploadProjectForm(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 blob = new Blob([bytes], { type: "application/zip" });
-  const { uploadFile } = await import("@huggingface/hub");
-  await uploadFile({
-    repo: { type: "dataset", name: HF_REPO },
-    credentials: { accessToken: token },
-    file: { path: filename, content: blob },
-    branch: "main",
-    commitTitle: `Upload ${filename}`
-  });
-  return { id: filename.replace(/\.zip$/, ""), name: filename.replace(/\.zip$/, ""), path: filename, size: bytes.length, isLfs: true };
+async function hfUploadProjectForm(_zipBase64, _name, _token) {
+  throw new Error("hfUploadProjectForm is deprecated. Use hfUploadProject instead.");
 }
 async function hfDeleteProject(path, token) {
   const res = await fetch(`${HF_BASE}/api/datasets/${HF_REPO}/commit/main`, {
@@ -406,16 +583,8 @@ async function hfDeleteProject(path, token) {
   });
   if (!res.ok) throw new Error(`HF delete failed: ${res.status} ${res.statusText}`);
 }
-async function hfSaveTags(workspaceTags, token) {
-  const content = new Blob([JSON.stringify(workspaceTags, null, 2)], { type: "application/json" });
-  const { uploadFile } = await import("@huggingface/hub");
-  await uploadFile({
-    repo: { type: "dataset", name: HF_REPO },
-    credentials: { accessToken: token },
-    file: { path: "tags.json", content },
-    branch: "main",
-    commitTitle: "Auto-sync tags"
-  });
+async function hfSaveTags(_workspaceTags, _token) {
+  throw new Error("hfSaveTags is deprecated. Use writeHFEvent instead.");
 }
 async function hfLoadTags(token) {
   try {
@@ -429,16 +598,8 @@ async function hfLoadTags(token) {
     return null;
   }
 }
-async function hfSaveMetadata(entries, token) {
-  const content = new Blob([JSON.stringify(entries, null, 2)], { type: "application/json" });
-  const { uploadFile } = await import("@huggingface/hub");
-  await uploadFile({
-    repo: { type: "dataset", name: HF_REPO },
-    credentials: { accessToken: token },
-    file: { path: "metadata.json", content },
-    branch: "main",
-    commitTitle: "Auto-sync metadata"
-  });
+async function hfSaveMetadata(_entries, _token) {
+  throw new Error("hfSaveMetadata is deprecated. Use writeHFEvent instead.");
 }
 async function hfLoadMetadata(token) {
   try {
@@ -457,14 +618,32 @@ async function hfUploadImage(base64, id, token, mimeType = "image/jpeg") {
   const binary = atob(base64);
   const bytes = new Uint8Array(binary.length);
   for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-  const content = new Blob([bytes], { type: mimeType });
-  const { uploadFile } = await import("@huggingface/hub");
-  await uploadFile({
-    repo: { type: "dataset", name: HF_REPO },
-    credentials: { accessToken: token },
-    file: { path: `images/${id}.${ext}`, content },
-    branch: "main",
-    commitTitle: `Add image ${id}`
+  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 filename = `images/${id}.${ext}`;
+  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 }] })
+  });
+  if (!preRes.ok) throw new Error(`HF preupload failed: ${preRes.status}`);
+  const preData = await preRes.json();
+  const fileInfo = preData.files?.[0];
+  if (fileInfo?.uploadUrl) {
+    await fetch(fileInfo.uploadUrl, {
+      method: "PUT",
+      headers: { "Content-Type": mimeType, ...fileInfo.header || {} },
+      body: bytes
+    });
+  }
+  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: `Add image ${id}`, description: "" } }),
+      JSON.stringify({ key: "lfsFile", value: { path: filename, algo: "sha256", oid, size } })
+    ].join("\n")
   });
 }
 async function hfLoadImageAsBase64(id, token) {
@@ -488,13 +667,16 @@ async function hfLoadImageAsBase64(id, token) {
   }
   return null;
 }
-var HF_BASE, HF_REPO, HF_TOKEN_KEY;
+var import_jszip2, HF_BASE, HF_REPO, HF_TOKEN_KEY, SESSION_CLIENT_ID;
 var init_hfStateService = __esm({
   "src/lib/hfStateService.ts"() {
     "use strict";
+    import_jszip2 = __toESM(require("jszip"));
+    init_hfEventTypes();
     HF_BASE = "https://huggingface.co";
     HF_REPO = "RolandSch/fa-app-state";
     HF_TOKEN_KEY = "hf-token";
+    SESSION_CLIENT_ID = `client-${crypto.randomUUID().slice(0, 8)}`;
   }
 });
 
@@ -524,9 +706,12 @@ __export(index_exports, {
   SectionLabel: () => SectionLabel,
   SetupPanel: () => SetupPanel,
   TagManagerPanel: () => TagManagerPanel,
+  applyEvent: () => applyEvent,
+  applyEvents: () => applyEvents,
   autoLabel: () => autoLabel,
   buildBlendInstruction: () => buildBlendInstruction,
   buildCompareInstruction: () => buildCompareInstruction,
+  buildDag: () => buildDag,
   buildFallbackPrompt: () => buildFallbackPrompt,
   buildGenerationPrompt: () => buildGenerationPrompt,
   buildImageGenerationOptions: () => buildImageGenerationOptions,
@@ -538,29 +723,38 @@ __export(index_exports, {
   cleanAiResponse: () => cleanAiResponse,
   createFlowServices: () => createFlowServices,
   exportProjectToZip: () => exportProjectToZip,
+  findForks: () => findForks,
+  findTips: () => findTips,
   formatTreeToMarkdown: () => formatTreeToMarkdown,
   frameToGeneration: () => frameToGeneration,
   getFormattedTimestamp: () => getFormattedTimestamp,
   getHFToken: () => getHFToken,
+  getSessionClientId: () => getSessionClientId,
   groupGenerationsToLabItems: () => groupGenerationsToLabItems,
+  hfBatchArchive: () => hfBatchArchive,
+  hfBootstrapFromLegacy: () => hfBootstrapFromLegacy,
   hfDeleteProject: () => hfDeleteProject,
   hfDownloadProject: () => hfDownloadProject,
+  hfListDir: () => hfListDir,
   hfListProjects: () => hfListProjects,
   hfLoadImageAsBase64: () => hfLoadImageAsBase64,
-  hfLoadMetadata: () => hfLoadMetadata,
-  hfLoadTags: () => hfLoadTags,
-  hfSaveMetadata: () => hfSaveMetadata,
-  hfSaveTags: () => hfSaveTags,
   hfUploadImage: () => hfUploadImage,
   hfUploadProjectForm: () => hfUploadProjectForm,
+  hfUploadSmallFile: () => hfUploadSmallFile,
   importProjectFromZip: () => importProjectFromZip,
   injectXMPMetadata: () => injectXMPMetadata,
   interpretSdkError: () => interpretSdkError,
+  loadHFState: () => loadHFState,
+  loadPendingEvents: () => loadPendingEvents,
   parsePromptFile: () => parsePromptFile,
   parsePromptResponse: () => parsePromptResponse,
   setHFToken: () => setHFToken,
+  topoSort: () => topoSort,
+  tsFromEventPath: () => tsFromEventPath,
+  useHFState: () => useHFState,
   useKeyboardNavigation: () => useKeyboardNavigation,
-  useOnClickOutside: () => useOnClickOutside
+  useOnClickOutside: () => useOnClickOutside,
+  writeHFEvent: () => writeHFEvent
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1343,7 +1537,7 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
 }
 
 // src/components/AvatarArchitectApp.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 
 // src/components/PromptTab.tsx
 var import_react12 = require("react");
@@ -1871,6 +2065,7 @@ var import_react13 = require("react");
 init_hfStateService();
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var ProjectSyncTab = ({
+  topSlot,
   onProjectExport,
   onProjectImport,
   onWorkspaceImport,
@@ -1962,6 +2157,7 @@ var ProjectSyncTab = ({
     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: [
+    topSlot && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: topSlot }),
     (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" }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2", children: [
@@ -2370,14 +2566,255 @@ function toPromptImages(images) {
 // src/components/AvatarArchitectApp.tsx
 init_hfStateService();
 
+// src/hooks/useHFState.ts
+var import_react14 = require("react");
+init_hfStateService();
+
+// src/lib/hfReducer.ts
+function applyEvent(state, event) {
+  if (event.v.major > 1) return state;
+  switch (event.type) {
+    case "image_added": {
+      const p = event.payload;
+      if (state.metadata.some((m) => m.id === p.id)) return state;
+      return { ...state, metadata: [...state.metadata, p] };
+    }
+    case "tag_upserted": {
+      const p = event.payload;
+      const tags = state.tags;
+      const cat = tags.by_category[p.category] || [];
+      const existing = cat.find((t) => t.value === p.value);
+      const updated = { label: p.label, value: p.value, is_user_created: p.is_user_created, is_deleted: p.is_deleted };
+      const newCat = existing ? cat.map((t) => t.value === p.value ? { ...t, ...updated } : t) : [...cat, updated];
+      const newAll = tags.all.some((t) => t.value === p.value && t.category === p.category) ? tags.all.map((t) => t.value === p.value && t.category === p.category ? { ...t, ...updated, category: p.category } : t) : [...tags.all, { ...updated, category: p.category }];
+      return { ...state, tags: { by_category: { ...tags.by_category, [p.category]: newCat }, all: newAll } };
+    }
+    case "metadata_updated": {
+      const p = event.payload;
+      return {
+        ...state,
+        metadata: state.metadata.map((m) => m.id === p.id ? { ...m, ...p.delta } : m)
+      };
+    }
+    default:
+      return state;
+  }
+}
+function applyEvents(state, events) {
+  return events.reduce(applyEvent, state);
+}
+
+// src/lib/hfDag.ts
+function buildDag(events) {
+  const dag = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    dag.set(event.ts, { event, children: [] });
+  }
+  for (const event of events) {
+    for (const parent of event.prevTs) {
+      const node = dag.get(parent);
+      if (node && !node.children.includes(event.ts)) {
+        node.children.push(event.ts);
+      }
+    }
+  }
+  return dag;
+}
+function findTips(dag) {
+  return [...dag.values()].filter((n) => n.children.length === 0).map((n) => n.event.ts);
+}
+function findForks(dag) {
+  const forks = [];
+  for (const [ts, node] of dag) {
+    if (node.children.length > 1) {
+      forks.push({ parentTs: ts, childTs: node.children });
+    }
+  }
+  return forks;
+}
+function topoSort(events) {
+  if (!events.length) return [];
+  const inDegree = /* @__PURE__ */ new Map();
+  const children = /* @__PURE__ */ new Map();
+  const tsSet = new Set(events.map((e) => e.ts));
+  for (const e of events) {
+    inDegree.set(e.ts, 0);
+    children.set(e.ts, []);
+  }
+  for (const e of events) {
+    for (const p of e.prevTs) {
+      if (tsSet.has(p)) {
+        children.get(p).push(e.ts);
+        inDegree.set(e.ts, (inDegree.get(e.ts) || 0) + 1);
+      }
+    }
+  }
+  const queue = events.filter((e) => (inDegree.get(e.ts) || 0) === 0).sort((a, b) => a.ts - b.ts);
+  const result = [];
+  const byTs = new Map(events.map((e) => [e.ts, e]));
+  while (queue.length) {
+    const node = queue.shift();
+    result.push(node);
+    for (const childTs of children.get(node.ts) || []) {
+      const newDeg = (inDegree.get(childTs) || 0) - 1;
+      inDegree.set(childTs, newDeg);
+      if (newDeg === 0) {
+        const child = byTs.get(childTs);
+        const insertAt = queue.findIndex((q) => q.ts > child.ts);
+        if (insertAt === -1) queue.push(child);
+        else queue.splice(insertAt, 0, child);
+      }
+    }
+  }
+  return result;
+}
+
+// src/hooks/useHFState.ts
+var OFFLINE_BUFFER_KEY = "hf-offline-buffer";
+var POLL_INTERVAL_MS = 3e4;
+function readOfflineBuffer() {
+  try {
+    return JSON.parse(localStorage.getItem(OFFLINE_BUFFER_KEY) || "[]");
+  } catch {
+    return [];
+  }
+}
+function writeOfflineBuffer(events) {
+  try {
+    localStorage.setItem(OFFLINE_BUFFER_KEY, JSON.stringify(events));
+  } catch {
+  }
+}
+function useHFState(token, namespace) {
+  const [state, setState] = (0, import_react14.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(false);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const [eventCount, setEventCount] = (0, import_react14.useState)(0);
+  const [forks, setForks] = (0, import_react14.useState)([]);
+  const [pendingBufferCount, setPendingBufferCount] = (0, import_react14.useState)(readOfflineBuffer().length);
+  const [lastEventTs, setLastEventTs] = (0, import_react14.useState)(0);
+  const [hasStateZip, setHasStateZip] = (0, import_react14.useState)(false);
+  const knownEventPaths = (0, import_react14.useRef)(/* @__PURE__ */ new Set());
+  const allEventsRef = (0, import_react14.useRef)([]);
+  const applyNewEvents = (0, import_react14.useCallback)((snapshot, newEvents) => {
+    if (!newEvents.length && allEventsRef.current.length === 0) {
+      setEventCount(0);
+      return snapshot;
+    }
+    const sorted = topoSort([...allEventsRef.current, ...newEvents]);
+    allEventsRef.current = sorted;
+    const afterConsolidation = sorted.filter((e) => e.ts > snapshot.meta.consolidatedAt);
+    const dag = buildDag(afterConsolidation);
+    setForks(findForks(dag));
+    setEventCount(afterConsolidation.length);
+    if (afterConsolidation.length) setLastEventTs(Math.max(...afterConsolidation.map((e) => e.ts)));
+    return applyEvents(snapshot, afterConsolidation);
+  }, []);
+  const loadFull = (0, import_react14.useCallback)(async () => {
+    if (!token || !namespace) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const snapshot = await loadHFState(namespace, token);
+      setHasStateZip(snapshot !== null);
+      const base = snapshot ?? {
+        metadata: [],
+        tags: { by_category: {}, all: [] },
+        meta: { consolidatedAt: 0, version: 1 }
+      };
+      const events = await loadPendingEvents(namespace, token, base.meta.consolidatedAt);
+      events.forEach((e) => knownEventPaths.current.add(`${e.ts}_${e.clientId}`));
+      allEventsRef.current = [];
+      const finalState = applyNewEvents(base, events);
+      setState(finalState);
+      const buffer = readOfflineBuffer();
+      if (buffer.length) {
+        for (const evt of buffer) {
+          await writeHFEvent(namespace, token, evt.type, evt.payload, evt.prevTs).catch(() => {
+          });
+        }
+        writeOfflineBuffer([]);
+        setPendingBufferCount(0);
+        const freshEvents = await loadPendingEvents(namespace, token, base.meta.consolidatedAt);
+        freshEvents.forEach((e) => knownEventPaths.current.add(`${e.ts}_${e.clientId}`));
+        setState((prev) => prev ? applyNewEvents(base, freshEvents) : prev);
+      }
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [token, namespace, applyNewEvents]);
+  const pollNew = (0, import_react14.useCallback)(async () => {
+    if (!token || !namespace || !state) return;
+    try {
+      const events = await loadPendingEvents(namespace, token, state.meta.consolidatedAt);
+      const newEvents = events.filter((e) => !knownEventPaths.current.has(`${e.ts}_${e.clientId}`));
+      if (!newEvents.length) return;
+      newEvents.forEach((e) => knownEventPaths.current.add(`${e.ts}_${e.clientId}`));
+      setState((prev) => prev ? applyNewEvents(prev, newEvents) : prev);
+    } catch {
+    }
+  }, [token, namespace, state, applyNewEvents]);
+  (0, import_react14.useEffect)(() => {
+    if (token && namespace) loadFull();
+  }, [token, namespace]);
+  (0, import_react14.useEffect)(() => {
+    if (!token || !namespace) return;
+    const id = setInterval(pollNew, POLL_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [token, namespace, pollNew]);
+  const writeEvent2 = (0, import_react14.useCallback)(async (type, payload) => {
+    const prevTs = lastEventTs ? [lastEventTs] : [state?.meta.consolidatedAt ?? 0];
+    console.log("[HF] writeEvent called:", { type, namespace, tokenOk: !!token, prevTs });
+    await pollNew();
+    try {
+      console.log("[HF] writeHFEvent start, path will be:", `${namespace}events/...`);
+      const event = await writeHFEvent(namespace, token, type, payload, prevTs);
+      console.log("[HF] writeHFEvent success:", event.ts);
+      knownEventPaths.current.add(`${event.ts}_${event.clientId}`);
+      setState((prev) => prev ? applyNewEvents(prev, [event]) : prev);
+      setLastEventTs(event.ts);
+      await pollNew();
+    } catch (e) {
+      console.error("[HF] writeHFEvent FAILED, going to offline buffer:", e);
+      const buffer = readOfflineBuffer();
+      const offline = {
+        v: { major: 1, minor: 0 },
+        type,
+        ts: Date.now(),
+        prevTs,
+        clientId: getSessionClientId(),
+        payload
+      };
+      writeOfflineBuffer([...buffer, offline]);
+      setPendingBufferCount(buffer.length + 1);
+      setState((prev) => prev ? applyNewEvents(prev, [offline]) : prev);
+    }
+  }, [namespace, token, lastEventTs, state, pollNew, applyNewEvents]);
+  return {
+    state,
+    isLoading,
+    error,
+    pendingBufferCount,
+    eventCount,
+    forks,
+    writeEvent: writeEvent2,
+    refresh: loadFull,
+    lastEventTs,
+    allEvents: allEventsRef.current,
+    hasStateZip
+  };
+}
+
 // src/components/labs/LabsTab.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/labs/LabRemix.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/labs/LabImagePicker.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var LabImagePicker = ({
   availableItems,
@@ -2386,8 +2823,8 @@ var LabImagePicker = ({
   onClose,
   title = "Bild w\xE4hlen"
 }) => {
-  const [search, setSearch] = (0, import_react14.useState)("");
-  const [drillItem, setDrillItem] = (0, import_react14.useState)(null);
+  const [search, setSearch] = (0, import_react15.useState)("");
+  const [drillItem, setDrillItem] = (0, import_react15.useState)(null);
   const filtered = availableItems.filter(
     (item) => !search || item.prompt.toLowerCase().includes(search.toLowerCase())
   );
@@ -2489,13 +2926,13 @@ var LabImagePicker = ({
 // src/components/labs/LabRemix.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var LabRemix = ({ services, onResult }) => {
-  const [showPicker, setShowPicker] = (0, import_react15.useState)(false);
-  const [selected, setSelected] = (0, import_react15.useState)(null);
-  const [instruction, setInstruction] = (0, import_react15.useState)("");
-  const [generatedPrompt, setGeneratedPrompt] = (0, import_react15.useState)("");
-  const [resultImage, setResultImage] = (0, import_react15.useState)(null);
-  const [isGeneratingPrompt, setIsGeneratingPrompt] = (0, import_react15.useState)(false);
-  const [isGeneratingImage, setIsGeneratingImage] = (0, import_react15.useState)(false);
+  const [showPicker, setShowPicker] = (0, import_react16.useState)(false);
+  const [selected, setSelected] = (0, import_react16.useState)(null);
+  const [instruction, setInstruction] = (0, import_react16.useState)("");
+  const [generatedPrompt, setGeneratedPrompt] = (0, import_react16.useState)("");
+  const [resultImage, setResultImage] = (0, import_react16.useState)(null);
+  const [isGeneratingPrompt, setIsGeneratingPrompt] = (0, import_react16.useState)(false);
+  const [isGeneratingImage, setIsGeneratingImage] = (0, import_react16.useState)(false);
   const handleSelectImage = (item, frame) => {
     services.onItemUsed(item);
     setSelected({
@@ -2678,16 +3115,16 @@ var LabRemix = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabBlend.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var LabBlend = ({ services, onResult }) => {
-  const [showPickerFor, setShowPickerFor] = (0, import_react16.useState)(null);
-  const [selectedImages, setSelectedImages] = (0, import_react16.useState)([]);
-  const [instruction, setInstruction] = (0, import_react16.useState)("");
-  const [generatedPrompt, setGeneratedPrompt] = (0, import_react16.useState)("");
-  const [resultImage, setResultImage] = (0, import_react16.useState)(null);
-  const [isGeneratingPrompt, setIsGeneratingPrompt] = (0, import_react16.useState)(false);
-  const [isGeneratingImage, setIsGeneratingImage] = (0, import_react16.useState)(false);
+  const [showPickerFor, setShowPickerFor] = (0, import_react17.useState)(null);
+  const [selectedImages, setSelectedImages] = (0, import_react17.useState)([]);
+  const [instruction, setInstruction] = (0, import_react17.useState)("");
+  const [generatedPrompt, setGeneratedPrompt] = (0, import_react17.useState)("");
+  const [resultImage, setResultImage] = (0, import_react17.useState)(null);
+  const [isGeneratingPrompt, setIsGeneratingPrompt] = (0, import_react17.useState)(false);
+  const [isGeneratingImage, setIsGeneratingImage] = (0, import_react17.useState)(false);
   const handleSelectImage = (index, item, frame) => {
     services.onItemUsed(item);
     const newImg = {
@@ -2874,17 +3311,17 @@ var LabBlend = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabCompare.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var LabCompare = ({ services, onResult }) => {
-  const [showPickerFor, setShowPickerFor] = (0, import_react17.useState)(null);
-  const [selectedImages, setSelectedImages] = (0, import_react17.useState)([]);
-  const [instruction, setInstruction] = (0, import_react17.useState)("");
-  const [analysis, setAnalysis] = (0, import_react17.useState)("");
-  const [generatedPrompt, setGeneratedPrompt] = (0, import_react17.useState)("");
-  const [resultImage, setResultImage] = (0, import_react17.useState)(null);
-  const [isAnalyzing, setIsAnalyzing] = (0, import_react17.useState)(false);
-  const [isGeneratingImage, setIsGeneratingImage] = (0, import_react17.useState)(false);
+  const [showPickerFor, setShowPickerFor] = (0, import_react18.useState)(null);
+  const [selectedImages, setSelectedImages] = (0, import_react18.useState)([]);
+  const [instruction, setInstruction] = (0, import_react18.useState)("");
+  const [analysis, setAnalysis] = (0, import_react18.useState)("");
+  const [generatedPrompt, setGeneratedPrompt] = (0, import_react18.useState)("");
+  const [resultImage, setResultImage] = (0, import_react18.useState)(null);
+  const [isAnalyzing, setIsAnalyzing] = (0, import_react18.useState)(false);
+  const [isGeneratingImage, setIsGeneratingImage] = (0, import_react18.useState)(false);
   const handleSelectImage = (index, item, frame) => {
     services.onItemUsed(item);
     const newImg = {
@@ -3047,14 +3484,14 @@ var LabCompare = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabLoop.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var LabLoop = ({ services, onResult }) => {
-  const [rounds, setRounds] = (0, import_react18.useState)([]);
-  const [currentInstruction, setCurrentInstruction] = (0, import_react18.useState)("");
-  const [showPickerForRound, setShowPickerForRound] = (0, import_react18.useState)(null);
-  const [pendingImages, setPendingImages] = (0, import_react18.useState)([]);
-  const [isGenerating, setIsGenerating] = (0, import_react18.useState)(false);
+  const [rounds, setRounds] = (0, import_react19.useState)([]);
+  const [currentInstruction, setCurrentInstruction] = (0, import_react19.useState)("");
+  const [showPickerForRound, setShowPickerForRound] = (0, import_react19.useState)(null);
+  const [pendingImages, setPendingImages] = (0, import_react19.useState)([]);
+  const [isGenerating, setIsGenerating] = (0, import_react19.useState)(false);
   const currentPrompt = rounds.length > 0 ? rounds[rounds.length - 1].prompt : "";
   const handleAddImage = (item, frame) => {
     services.onItemUsed(item);
@@ -3218,7 +3655,7 @@ var TABS = [
   { key: "loop", label: "Loop", icon: "loop" }
 ];
 var LabsTab = ({ services, onResult }) => {
-  const [activeTab, setActiveTab] = (0, import_react19.useState)("remix");
+  const [activeTab, setActiveTab] = (0, import_react20.useState)("remix");
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col h-full overflow-hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex border-b border-white/5 shrink-0", children: TABS.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "button",
@@ -3242,19 +3679,19 @@ var LabsTab = ({ services, onResult }) => {
 };
 
 // src/components/TagManagerPanel.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete, onTagReorder, onTagMove }) {
   const categories = Object.keys(workspaceTags.by_category).filter(
     (cat) => (workspaceTags.by_category[cat] || []).some((t) => !t.is_deleted)
   );
-  const [selectedCategory, setSelectedCategory] = (0, import_react20.useState)(categories[0] || "");
+  const [selectedCategory, setSelectedCategory] = (0, import_react21.useState)(categories[0] || "");
   const effectiveCategory = categories.includes(selectedCategory) ? selectedCategory : categories[0] || "";
-  const [editingLabel, setEditingLabel] = (0, import_react20.useState)(null);
-  const [editState, setEditState] = (0, import_react20.useState)({ label: "", value: "" });
-  const [newTag, setNewTag] = (0, import_react20.useState)({ label: "", value: "" });
-  const [movingLabel, setMovingLabel] = (0, import_react20.useState)(null);
-  const [moveTarget, setMoveTarget] = (0, import_react20.useState)("");
+  const [editingLabel, setEditingLabel] = (0, import_react21.useState)(null);
+  const [editState, setEditState] = (0, import_react21.useState)({ label: "", value: "" });
+  const [newTag, setNewTag] = (0, import_react21.useState)({ label: "", value: "" });
+  const [movingLabel, setMovingLabel] = (0, import_react21.useState)(null);
+  const [moveTarget, setMoveTarget] = (0, import_react21.useState)("");
   const tags = (workspaceTags.by_category[effectiveCategory] || []).filter((t) => !t.is_deleted);
   const otherCategories = categories.filter((c) => c !== effectiveCategory);
   const startEdit = (tag) => {
@@ -3449,10 +3886,449 @@ function TagManagerPanel({ workspaceTags, onTagCreate, onTagUpdate, onTagDelete,
   ] });
 }
 
-// src/components/AvatarArchitectApp.tsx
+// src/components/HFTestTab.tsx
+var import_react22 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
-  (0, import_react21.useEffect)(() => {
+var HF_BASE2 = "https://huggingface.co";
+var HF_REPO2 = "RolandSch/fa-app-state";
+var TEST_DIR = "test";
+async function doFetch(label, url, init = {}) {
+  const rawHeaders = init.headers || {};
+  const sanitized = Object.fromEntries(
+    Object.entries(rawHeaders).map(
+      ([k, v]) => k.toLowerCase() === "authorization" ? [k, v.replace(/Bearer\s+\S+/, (m) => "Bearer " + m.slice(7, 14) + "***")] : [k, v]
+    )
+  );
+  const s = {
+    label,
+    method: init.method || "GET",
+    url,
+    reqHeaders: sanitized,
+    reqBody: init.body ? typeof init.body === "string" ? init.body.length > 800 ? init.body.slice(0, 800) + "\n\u2026[truncated]" : init.body : "[binary data]" : void 0
+  };
+  const t0 = Date.now();
+  try {
+    const r = await fetch(url, init);
+    s.durationMs = Date.now() - t0;
+    s.resStatus = r.status;
+    s.resStatusText = r.statusText;
+    const body = await r.text().catch(() => "");
+    s.resBody = body.length > 3e3 ? body.slice(0, 3e3) + "\n\u2026[truncated]" : body;
+    s.ok = r.ok;
+  } catch (e) {
+    s.durationMs = Date.now() - t0;
+    s.error = String(e?.message ?? e);
+    s.ok = false;
+  }
+  return s;
+}
+function toBase64(bytes) {
+  let bin = "";
+  bytes.forEach((b) => bin += String.fromCharCode(b));
+  return btoa(bin);
+}
+async function sha256hex(bytes) {
+  const buf = await crypto.subtle.digest("SHA-256", bytes);
+  return Array.from(new Uint8Array(buf)).map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+function b64ToBytes(b64) {
+  const raw = b64.includes(",") ? b64.split(",")[1] : b64;
+  const bin = atob(raw);
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+  return bytes;
+}
+function rawB64(dataUrl) {
+  return dataUrl.includes(",") ? dataUrl.split(",")[1] : dataUrl;
+}
+async function uploadDirect(token, path, b64content) {
+  const ndjson = [
+    JSON.stringify({ key: "header", value: { summary: `HF Test: upload ${path}`, description: "" } }),
+    JSON.stringify({ key: "file", value: { path, encoding: "base64", content: b64content } })
+  ].join("\n");
+  return [await doFetch(
+    "POST commit (direct, kein LFS)",
+    `${HF_BASE2}/api/datasets/${HF_REPO2}/commit/main`,
+    { method: "POST", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/x-ndjson" }, body: ndjson }
+  )];
+}
+async function uploadLFS(token, path, bytes) {
+  const oid = await sha256hex(bytes);
+  const size = bytes.length;
+  const sample = toBase64(bytes.slice(0, 512));
+  const steps = [];
+  const pre = await doFetch("Preupload (LFS-URL anfordern)", `${HF_BASE2}/api/datasets/${HF_REPO2}/preupload/main`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+    body: JSON.stringify({ files: [{ path, size, sample }] })
+  });
+  steps.push(pre);
+  if (!pre.ok) return steps;
+  let fi;
+  try {
+    fi = JSON.parse(pre.resBody || "{}").files?.[0];
+  } catch {
+  }
+  if (!fi) {
+    steps.push({ label: "Parse", method: "-", url: "-", reqHeaders: {}, resBody: "Kein files[0] in preupload response", ok: false });
+    return steps;
+  }
+  if (fi.uploadMode === "lfs" && fi.uploadUrl) {
+    const up = await doFetch("PUT to LFS upload URL", fi.uploadUrl, {
+      method: "PUT",
+      headers: { "Content-Type": "application/octet-stream", ...fi.header || {} },
+      body: bytes
+    });
+    steps.push(up);
+    if (!up.ok) return steps;
+    if (fi.verifyUrl) {
+      const ver = await doFetch("POST LFS verify", fi.verifyUrl, {
+        method: "POST",
+        headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", ...fi.verifyHeader || {} },
+        body: JSON.stringify({ oid, size })
+      });
+      steps.push(ver);
+      if (!ver.ok) return steps;
+    }
+  } else {
+    steps.push({ label: "Info", method: "-", url: "-", reqHeaders: {}, resBody: `uploadMode="${fi.uploadMode}" \xB7 uploadUrl: ${fi.uploadUrl ? "ja" : "nein"} \u2192 ${!fi.uploadUrl ? "bereits in LFS (Deduplizierung)" : "kein LFS n\xF6tig"}`, ok: true });
+  }
+  const ndjson = [
+    JSON.stringify({ key: "header", value: { summary: `HF Test: LFS commit ${path}`, description: "" } }),
+    JSON.stringify({ key: "lfsFile", value: { path, algo: "sha256", oid, size } })
+  ].join("\n");
+  steps.push(await doFetch("Commit (lfsFile reference)", `${HF_BASE2}/api/datasets/${HF_REPO2}/commit/main`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/x-ndjson" },
+    body: ndjson
+  }));
+  return steps;
+}
+async function uploadViaHubLib(token, path, bytes, mimeType) {
+  const s = { label: "uploadFile() via @huggingface/hub", method: "import()+call", url: "@huggingface/hub", reqHeaders: {} };
+  const t0 = Date.now();
+  try {
+    const { uploadFile } = await import(
+      /* @vite-ignore */
+      "@huggingface/hub"
+    );
+    await uploadFile({
+      repo: { type: "dataset", name: HF_REPO2 },
+      credentials: { accessToken: token },
+      file: { path, content: new Blob([bytes], { type: mimeType }) },
+      branch: "main",
+      commitTitle: `HF Test: hub lib upload ${path}`
+    });
+    s.durationMs = Date.now() - t0;
+    s.resBody = "SUCCESS";
+    s.ok = true;
+  } catch (e) {
+    s.durationMs = Date.now() - t0;
+    s.error = String(e?.message ?? e);
+    s.ok = false;
+  }
+  return [s];
+}
+async function uploadViaCdnLib(token, path, bytes, mimeType) {
+  const s = { label: "uploadFile() via esm.sh/@huggingface/hub", method: "import()+call", url: "https://esm.sh/@huggingface/hub", reqHeaders: {} };
+  const t0 = Date.now();
+  try {
+    const { uploadFile } = await import(
+      /* @vite-ignore */
+      "https://esm.sh/@huggingface/hub"
+    );
+    await uploadFile({
+      repo: { type: "dataset", name: HF_REPO2 },
+      credentials: { accessToken: token },
+      file: { path, content: new Blob([bytes], { type: mimeType }) },
+      branch: "main",
+      commitTitle: `HF Test: CDN hub lib upload ${path}`
+    });
+    s.durationMs = Date.now() - t0;
+    s.resBody = "SUCCESS";
+    s.ok = true;
+  } catch (e) {
+    s.durationMs = Date.now() - t0;
+    s.error = String(e?.message ?? e);
+    s.ok = false;
+  }
+  return [s];
+}
+async function writeEvent(token, namespace) {
+  const ns = namespace.endsWith("/") ? namespace : namespace ? namespace + "/" : "";
+  const ts = Date.now();
+  const uuid = crypto.randomUUID().slice(0, 8);
+  const isoTs = new Date(ts).toISOString().replace(/:/g, "-").replace(".", "-");
+  const eventPath = `${ns}${TEST_DIR}/events/${isoTs}_${uuid}.json`;
+  const event = JSON.stringify({ v: { major: 1, minor: 0 }, type: "probe", ts, prevTs: [], clientId: "hf-test-tab", payload: { test: true } }, null, 2);
+  const b64 = toBase64(new TextEncoder().encode(event));
+  const ndjson = [
+    JSON.stringify({ key: "header", value: { summary: "HF Test: write event", description: "" } }),
+    JSON.stringify({ key: "file", value: { path: eventPath, encoding: "base64", content: b64 } })
+  ].join("\n");
+  return [await doFetch(
+    `Event \u2192 ${eventPath}`,
+    `${HF_BASE2}/api/datasets/${HF_REPO2}/commit/main`,
+    { method: "POST", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/x-ndjson" }, body: ndjson }
+  )];
+}
+function tryFmt(s) {
+  try {
+    return JSON.stringify(JSON.parse(s), null, 2);
+  } catch {
+    return s;
+  }
+}
+function CopyBtn({ text }) {
+  const [done, setDone] = (0, import_react22.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "button",
+    {
+      onClick: () => {
+        navigator.clipboard?.writeText(text).catch(() => {
+        });
+        setDone(true);
+        setTimeout(() => setDone(false), 1500);
+      },
+      style: { background: "none", border: "1px solid rgba(255,255,255,0.15)", borderRadius: 5, color: done ? "#4ade80" : "rgba(255,255,255,0.45)", fontSize: 10, padding: "3px 8px", cursor: "pointer", fontFamily: "inherit", display: "flex", alignItems: "center", gap: 3 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 11 }, children: done ? "check" : "content_copy" }),
+        done ? "Kopiert" : "Copy"
+      ]
+    }
+  );
+}
+function StepView({ step }) {
+  const isSpecial = step.method === "-" || step.method === "import()" || step.method === "import()+call";
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginBottom: 6, background: "rgba(0,0,0,0.3)", borderRadius: 7, padding: "7px 9px", border: `1px solid ${step.ok === false ? "rgba(248,113,113,0.2)" : "rgba(255,255,255,0.05)"}` }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 11, fontWeight: 700, color: step.ok === false ? "#f87171" : "#4ade80" }, children: step.ok === false ? "\u2717" : "\u2713" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 11, fontWeight: 600, color: "rgba(255,255,255,0.7)", flex: 1 }, children: step.label }),
+      step.durationMs !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)" }, children: [
+        step.durationMs,
+        "ms"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CopyBtn, { text: JSON.stringify(step, null, 2) })
+    ] }),
+    !isSpecial && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginBottom: 5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginBottom: 2 }, children: [
+        "\u2192 ",
+        step.method,
+        " ",
+        step.url
+      ] }),
+      Object.keys(step.reqHeaders).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { style: { fontSize: 9, color: "rgba(255,255,255,0.35)", margin: "2px 0", padding: "3px 5px", background: "rgba(255,255,255,0.03)", borderRadius: 3, whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: 60, overflow: "auto" }, children: Object.entries(step.reqHeaders).map(([k, v]) => `${k}: ${v}`).join("\n") }),
+      step.reqBody && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { style: { fontSize: 9, color: "rgba(255,255,255,0.35)", margin: "2px 0", padding: "3px 5px", background: "rgba(255,255,255,0.03)", borderRadius: 3, whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: 80, overflow: "auto" }, children: step.reqBody })
+    ] }),
+    step.error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { style: { fontSize: 11, color: "#f87171", margin: 0, padding: "3px 5px", background: "rgba(248,113,113,0.05)", borderRadius: 3, whiteSpace: "pre-wrap", wordBreak: "break-all" }, children: step.error }),
+    !step.error && (step.resStatus !== void 0 || step.resBody) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+      step.resStatus !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 11, fontWeight: 700, color: (step.resStatus || 0) < 300 ? "#4ade80" : "#f87171", marginBottom: 3 }, children: [
+        "\u2190 ",
+        step.resStatus,
+        " ",
+        step.resStatusText
+      ] }),
+      step.resBody && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { style: { fontSize: 9, color: "rgba(255,255,255,0.55)", margin: 0, padding: "3px 5px", background: "rgba(255,255,255,0.03)", borderRadius: 3, whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: 180, overflow: "auto" }, children: tryFmt(step.resBody) })
+    ] })
+  ] });
+}
+function TestCard({
+  id,
+  label,
+  icon,
+  desc,
+  disabled,
+  state,
+  onRun,
+  expanded,
+  onToggle
+}) {
+  const hasResult = state && state.status !== "idle";
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginBottom: 8, background: "rgba(255,255,255,0.03)", borderRadius: 10, border: `1px solid ${state?.status === "ok" ? "rgba(74,222,128,0.15)" : state?.status === "error" ? "rgba(248,113,113,0.15)" : "rgba(255,255,255,0.07)"}`, overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "9px 10px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18, color: state?.status === "ok" ? "#4ade80" : state?.status === "error" ? "#f87171" : state?.status === "running" ? "#60a5fa" : "rgba(255,255,255,0.35)", flexShrink: 0 }, children: state?.status === "ok" ? "check_circle" : state?.status === "error" ? "error" : state?.status === "running" ? "hourglass_top" : icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 13, fontWeight: 700, color: "#fff" }, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: desc })
+      ] }),
+      hasResult && state?.status !== "running" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: onToggle, style: { background: "none", border: "none", color: "rgba(255,255,255,0.3)", cursor: "pointer", padding: 2, lineHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: expanded ? "expand_less" : "expand_more" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          onClick: onRun,
+          disabled,
+          style: { background: disabled ? "transparent" : "#0284c7", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 6, color: "#fff", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", padding: "5px 10px", cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.35 : 1, fontFamily: "inherit", flexShrink: 0 },
+          children: state?.status === "running" ? "\u2026" : "Run"
+        }
+      )
+    ] }),
+    hasResult && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { borderTop: "1px solid rgba(255,255,255,0.05)" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { padding: "4px 10px 5px", display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 11, fontWeight: 700, color: state.status === "ok" ? "#4ade80" : "#f87171" }, children: state.status === "ok" ? "\u2713 OK" : state.status === "running" ? "\u2026" : "\u2717 Fehler" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)" }, children: [
+          state.totalMs,
+          "ms \xB7 ",
+          state.steps.length,
+          " Step",
+          state.steps.length !== 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { flex: 1 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CopyBtn, { text: JSON.stringify(state, null, 2) })
+      ] }),
+      expanded && state.steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { padding: "0 10px 4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StepView, { step }) }, i))
+    ] })
+  ] });
+}
+function HFTestTab({ token, namespace, galleryItems }) {
+  const [selected, setSelected] = (0, import_react22.useState)(null);
+  const [results, setResults] = (0, import_react22.useState)({});
+  const [expanded, setExpanded] = (0, import_react22.useState)({});
+  const withResults = galleryItems.filter((g) => g.base64 && g.status === "done");
+  const setRunning = (id) => setResults((r) => ({ ...r, [id]: { status: "running", steps: [], totalMs: 0 } }));
+  const setDone = (id, steps, t0) => {
+    const ok = steps.length > 0 && steps.every((s) => s.ok !== false);
+    setResults((r) => ({ ...r, [id]: { status: ok ? "ok" : "error", steps, totalMs: Date.now() - t0 } }));
+    setExpanded((e) => ({ ...e, [id]: true }));
+  };
+  const run = async (id) => {
+    const isImgTest = id !== "event";
+    if (isImgTest && !selected?.base64) return;
+    setRunning(id);
+    const t0 = Date.now();
+    let steps = [];
+    try {
+      if (isImgTest) {
+        const bytes = b64ToBytes(selected.base64);
+        const imgPath = `${TEST_DIR}/${selected.id}.jpg`;
+        switch (id) {
+          case "img-direct":
+            steps = await uploadDirect(token, imgPath, rawB64(selected.base64));
+            break;
+          case "img-lfs":
+            steps = await uploadLFS(token, imgPath, bytes);
+            break;
+          case "img-hub":
+            steps = await uploadViaHubLib(token, imgPath, bytes, "image/jpeg");
+            break;
+          case "img-cdn":
+            steps = await uploadViaCdnLib(token, imgPath, bytes, "image/jpeg");
+            break;
+        }
+      } else {
+        steps = await writeEvent(token, namespace);
+      }
+    } catch (e) {
+      steps = [{ label: "Unexpected error", method: "-", url: "-", reqHeaders: {}, error: String(e?.message ?? e), ok: false }];
+    }
+    setDone(id, steps, t0);
+  };
+  const noToken = !token;
+  const noImg = !selected;
+  const imgTests = [
+    { id: "img-direct", label: "Upload Direct", icon: "upload_file", desc: "POST commit + file+base64 (kein LFS)" },
+    { id: "img-lfs", label: "Upload LFS", icon: "cloud_upload", desc: "preupload \u2192 PUT LFS \u2192 verify \u2192 commit" },
+    { id: "img-hub", label: "Upload hub lib", icon: "package_2", desc: "uploadFile() via @huggingface/hub" },
+    { id: "img-cdn", label: "Upload CDN lib", icon: "language", desc: "uploadFile() via esm.sh hub lib" }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", flexDirection: "column", height: "100%", overflowY: "auto", padding: "12px 10px 80px", boxSizing: "border-box", fontFamily: "inherit" }, children: [
+    noToken && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { marginBottom: 10, padding: "8px 12px", background: "rgba(248,113,113,0.08)", borderRadius: 8, border: "1px solid rgba(248,113,113,0.2)", fontSize: 12, color: "#f87171" }, children: "Kein HF-Token geladen \u2014 bitte zuerst Token im Sync-Tab eingeben." }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginBottom: 14 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }, children: [
+        "Bild ausw\xE4hlen (",
+        withResults.length,
+        " verf\xFCgbar)"
+      ] }),
+      withResults.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.3)", fontStyle: "italic" }, children: "Noch keine Bilder in der Galerie. Generiere zuerst ein Bild oder lade von HF." }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }, children: withResults.slice(0, 12).map((g) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          onClick: () => setSelected(g),
+          style: { padding: 0, border: `2px solid ${selected?.id === g.id ? "#0284c7" : "transparent"}`, borderRadius: 6, cursor: "pointer", overflow: "hidden", background: "none", lineHeight: 0 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "img",
+            {
+              src: g.base64,
+              alt: g.prompt || g.id,
+              style: { width: "100%", aspectRatio: "1", objectFit: "cover", display: "block", borderRadius: 4 }
+            }
+          )
+        },
+        g.id
+      )) }),
+      selected && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginTop: 10, display: "flex", gap: 10, alignItems: "flex-start" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "img",
+          {
+            src: selected.base64,
+            style: { width: 80, height: 80, objectFit: "cover", borderRadius: 8, border: "1px solid rgba(255,255,255,0.1)", flexShrink: 0 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.7)", marginBottom: 2 }, children: "Ausgew\xE4hlt" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", wordBreak: "break-all" }, children: [
+            "ID: ",
+            selected.id
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }, children: [
+            "Ziel: test/",
+            selected.id,
+            ".jpg"
+          ] }),
+          selected.prompt && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontSize: 10, color: "rgba(255,255,255,0.25)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selected.prompt })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginBottom: 18 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
+        "Bild hochladen \u2192 test/",
+        "{",
+        "id",
+        "}",
+        ".jpg"
+      ] }),
+      imgTests.map((t) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        TestCard,
+        {
+          id: t.id,
+          label: t.label,
+          icon: t.icon,
+          desc: t.desc,
+          disabled: noToken || noImg || results[t.id]?.status === "running",
+          state: results[t.id],
+          onRun: () => run(t.id),
+          expanded: !!expanded[t.id],
+          onToggle: () => setExpanded((e) => ({ ...e, [t.id]: !e[t.id] }))
+        },
+        t.id
+      ))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8, borderBottom: "1px solid rgba(255,255,255,0.06)", paddingBottom: 4 }, children: [
+        "Event schreiben \u2192 ",
+        namespace || "(kein namespace)",
+        "test/events/"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        TestCard,
+        {
+          id: "event",
+          label: "Write Event",
+          icon: "bolt",
+          desc: "Kleines JSON-Event hochladen (direct commit)",
+          disabled: noToken || results["event"]?.status === "running",
+          state: results["event"],
+          onRun: () => run("event"),
+          expanded: !!expanded["event"],
+          onToggle: () => setExpanded((e) => ({ ...e, event: !e.event }))
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/AvatarArchitectApp.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
+  (0, import_react23.useEffect)(() => {
     const id = "flow-styles";
     if (!document.getElementById(id)) {
       const style = document.createElement("style");
@@ -3461,22 +4337,92 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       document.head.appendChild(style);
     }
   }, []);
-  const [showStart, setShowStart] = (0, import_react21.useState)(true);
-  const [layoutChoice, setLayoutChoice] = (0, import_react21.useState)(() => {
+  const [showStart, setShowStart] = (0, import_react23.useState)(true);
+  const [layoutChoice, setLayoutChoice] = (0, import_react23.useState)(() => {
     try {
       return localStorage.getItem("aa-layout") || null;
     } catch {
       return null;
     }
   });
-  const [projectLoaded, setProjectLoaded] = (0, import_react21.useState)(false);
-  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);
-  const hfMetaSaveQueue = (0, import_react21.useRef)(Promise.resolve());
-  const wsInputRef = (0, import_react21.useRef)(null);
+  const [projectLoaded, setProjectLoaded] = (0, import_react23.useState)(false);
+  const [hfToken, setHfToken] = (0, import_react23.useState)(initialHfToken || "");
+  const [hfTokenInput, setHfTokenInput] = (0, import_react23.useState)(initialHfToken || "");
+  const [isLoadingFromHF, setIsLoadingFromHF] = (0, import_react23.useState)(false);
+  const [hfNamespaceLocal, setHfNamespaceLocal] = (0, import_react23.useState)(() => {
+    try {
+      const stored = localStorage.getItem("aa-hf-namespace");
+      if (stored !== null) return stored;
+      return allowDevNamespace ? "app.art-by-rolands.de/" : "";
+    } catch {
+      return "";
+    }
+  });
+  const [hfNamespaceFromServer, setHfNamespaceFromServer] = (0, import_react23.useState)(null);
+  (0, import_react23.useEffect)(() => {
+    if (hfNamespace !== void 0) return;
+    const backendUrl = typeof window !== "undefined" ? window.BACKEND_URL || window.location.origin : null;
+    if (!backendUrl) return;
+    fetch(`${backendUrl}/api/status`).then((r) => r.json()).then((d) => {
+      if (typeof d.hfNamespace === "string" && d.hfNamespace) setHfNamespaceFromServer(d.hfNamespace);
+    }).catch(() => {
+    });
+  }, [hfNamespace]);
+  const effectiveNamespace = hfNamespace ?? hfNamespaceFromServer ?? hfNamespaceLocal;
+  const {
+    state: hfState,
+    isLoading: isHfRefreshing,
+    pendingBufferCount,
+    eventCount,
+    writeEvent: hfWriteEvent,
+    refresh: refreshHF,
+    hasStateZip
+  } = useHFState(hfToken, effectiveNamespace);
+  const [bootstrapLog, setBootstrapLog] = (0, import_react23.useState)([]);
+  const [isBootstrapping, setIsBootstrapping] = (0, import_react23.useState)(false);
+  const syncTopSlot = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    pendingBufferCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { background: "linear-gradient(90deg,#f59e0b,#ef4444)", padding: "4px 10px", fontSize: 11, color: "#fff", borderRadius: 4, marginBottom: 4 }, children: [
+      pendingBufferCount,
+      " \xC4nderung",
+      pendingBufferCount > 1 ? "en" : "",
+      " lokal \u2014 bei Flow-Reload verloren wenn nicht synchronisiert"
+    ] }),
+    eventCount > 100 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { background: "#dc2626", color: "#fff", padding: "5px 10px", borderRadius: 4, marginBottom: 4, fontWeight: 600, fontSize: 11 }, children: [
+      "\u26A0 ",
+      eventCount,
+      " Events nicht konsolidiert \u2014 Konsolidierung dringend empfohlen"
+    ] }),
+    eventCount > 50 && eventCount <= 100 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { background: "#44403c", color: "#a8a29e", padding: "4px 10px", borderRadius: 4, marginBottom: 4, fontSize: 11 }, children: [
+      eventCount,
+      " Events seit letzter Konsolidierung \u2014 Konsolidierung empfohlen"
+    ] }),
+    hfToken && !hasStateZip && !isHfRefreshing && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { background: "#1c1917", border: "1px solid #44403c", borderRadius: 6, padding: "10px 12px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { fontSize: 12, color: "#a8a29e", marginBottom: 6 }, children: effectiveNamespace ? `Kein State-Snapshot in HF (${effectiveNamespace}) \u2014 aus Legacy-Daten (tags.json + metadata.json) migrieren?` : "Namespace wird geladen\u2026" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "button",
+        {
+          disabled: isBootstrapping || !effectiveNamespace,
+          onClick: async () => {
+            setIsBootstrapping(true);
+            setBootstrapLog([]);
+            try {
+              await hfBootstrapFromLegacy(effectiveNamespace, hfToken, (msg) => setBootstrapLog((prev) => [...prev, msg]));
+              setBootstrapLog((prev) => [...prev, "\u2713 Fertig"]);
+              setTimeout(() => refreshHF(), 1500);
+            } catch (e) {
+              setBootstrapLog((prev) => [...prev, `Fehler: ${e.message}`]);
+            } finally {
+              setIsBootstrapping(false);
+            }
+          },
+          style: { padding: "5px 12px", background: "#0ea5e9", color: "#fff", border: "none", borderRadius: 4, cursor: isBootstrapping || !effectiveNamespace ? "not-allowed" : "pointer", fontSize: 11, fontWeight: 600, opacity: isBootstrapping || !effectiveNamespace ? 0.6 : 1 },
+          children: isBootstrapping ? "Migriere\u2026" : "Legacy-Migration starten"
+        }
+      ),
+      bootstrapLog.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { marginTop: 6, fontFamily: "monospace", fontSize: 10, color: "#78716c", lineHeight: 1.6 }, children: bootstrapLog.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: l }, i)) })
+    ] })
+  ] });
+  const wsInputRef = (0, import_react23.useRef)(null);
   const startApp = (choice) => {
     try {
       localStorage.setItem("aa-layout", choice);
@@ -3485,70 +4431,110 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     setLayoutChoice(choice);
     setShowStart(false);
   };
-  const [nodes, setNodes] = (0, import_react21.useState)([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
-  const [edges, setEdges] = (0, import_react21.useState)([]);
-  const [history, setHistory] = (0, import_react21.useState)([]);
-  const [galleryItems, setGalleryItems] = (0, import_react21.useState)([]);
-  const galleryItemsRef = (0, import_react21.useRef)([]);
-  (0, import_react21.useEffect)(() => {
+  const [nodes, setNodes] = (0, import_react23.useState)([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
+  const [edges, setEdges] = (0, import_react23.useState)([]);
+  const [history, setHistory] = (0, import_react23.useState)([]);
+  const [galleryItems, setGalleryItems] = (0, import_react23.useState)([]);
+  const galleryItemsRef = (0, import_react23.useRef)([]);
+  (0, import_react23.useEffect)(() => {
     galleryItemsRef.current = galleryItems;
   }, [galleryItems]);
-  const [activePrompt, setActivePrompt] = (0, import_react21.useState)("");
-  const [isSynthesizing, setIsSynthesizing] = (0, import_react21.useState)(false);
-  const [activeGenerationsCount, setActiveGenerationsCount] = (0, import_react21.useState)(0);
-  const [currentResult, setCurrentResult] = (0, import_react21.useState)(null);
-  const [focusedNodeId, setFocusedNodeId] = (0, import_react21.useState)(null);
-  const [leftTab, setLeftTab] = (0, import_react21.useState)("prompt");
-  const [promptFeedback, setPromptFeedback] = (0, import_react21.useState)(null);
-  const [lastPromptPayload, setLastPromptPayload] = (0, import_react21.useState)(null);
-  const [isPromptTabGenerating, setIsPromptTabGenerating] = (0, import_react21.useState)(false);
-  const [activeTab, setActiveTab] = (0, import_react21.useState)("history");
-  const [mobileTab, setMobileTab] = (0, import_react21.useState)("stage");
-  const [middlePanel, setMiddlePanel] = (0, import_react21.useState)("stage");
-  const [recentLabItems, setRecentLabItems] = (0, import_react21.useState)([]);
-  const [aspectRatio, setAspectRatio] = (0, import_react21.useState)("1:1");
-  const [selectedModel, setSelectedModel] = (0, import_react21.useState)("\u{1F34C} Nano Banana Pro");
-  const [seed, setSeed] = (0, import_react21.useState)(Math.floor(Math.random() * 1e6));
-  const [seedMode, setSeedMode] = (0, import_react21.useState)("random");
-  const [isLeftCollapsed, setIsLeftCollapsed] = (0, import_react21.useState)(false);
-  const [isRightCollapsed, setIsRightCollapsed] = (0, import_react21.useState)(false);
-  const [leftPanelWidth, setLeftPanelWidth] = (0, import_react21.useState)(() => {
+  const hfImageNotFoundRef = (0, import_react23.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react23.useEffect)(() => {
+    if (!hfState) return;
+    if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
+    const hfIds = new Set(hfState.metadata.map((m) => m.id));
+    const skeletons = hfState.metadata.map((m) => ({
+      id: m.id,
+      nodeId: m.id,
+      prompt: m.prompt,
+      seed: m.seed,
+      model: m.model,
+      tags: m.tags || [],
+      timestamp: m.timestamp,
+      status: "done"
+    }));
+    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];
+    });
+    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];
+    });
+    for (const entry of hfState.metadata) {
+      if (hfImageNotFoundRef.current.has(entry.id)) continue;
+      hfLoadImageAsBase64(entry.id, hfToken).then((b64) => {
+        if (!b64) {
+          hfImageNotFoundRef.current.add(entry.id);
+          return;
+        }
+        const prefix = `data:${entry.mimeType || "image/jpeg"};base64,`;
+        setGalleryItems((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
+        setHistory((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
+      }).catch(() => {
+        hfImageNotFoundRef.current.add(entry.id);
+      });
+    }
+  }, [hfState]);
+  const [activePrompt, setActivePrompt] = (0, import_react23.useState)("");
+  const [isSynthesizing, setIsSynthesizing] = (0, import_react23.useState)(false);
+  const [activeGenerationsCount, setActiveGenerationsCount] = (0, import_react23.useState)(0);
+  const [currentResult, setCurrentResult] = (0, import_react23.useState)(null);
+  const [focusedNodeId, setFocusedNodeId] = (0, import_react23.useState)(null);
+  const [leftTab, setLeftTab] = (0, import_react23.useState)("prompt");
+  const [promptFeedback, setPromptFeedback] = (0, import_react23.useState)(null);
+  const [lastPromptPayload, setLastPromptPayload] = (0, import_react23.useState)(null);
+  const [isPromptTabGenerating, setIsPromptTabGenerating] = (0, import_react23.useState)(false);
+  const [activeTab, setActiveTab] = (0, import_react23.useState)("history");
+  const [mobileTab, setMobileTab] = (0, import_react23.useState)("stage");
+  const [middlePanel, setMiddlePanel] = (0, import_react23.useState)("stage");
+  const [recentLabItems, setRecentLabItems] = (0, import_react23.useState)([]);
+  const [aspectRatio, setAspectRatio] = (0, import_react23.useState)("1:1");
+  const [selectedModel, setSelectedModel] = (0, import_react23.useState)("\u{1F34C} Nano Banana Pro");
+  const [seed, setSeed] = (0, import_react23.useState)(Math.floor(Math.random() * 1e6));
+  const [seedMode, setSeedMode] = (0, import_react23.useState)("random");
+  const [isLeftCollapsed, setIsLeftCollapsed] = (0, import_react23.useState)(false);
+  const [isRightCollapsed, setIsRightCollapsed] = (0, import_react23.useState)(false);
+  const [leftPanelWidth, setLeftPanelWidth] = (0, import_react23.useState)(() => {
     try {
       return parseInt(localStorage.getItem("aa-left-width") || "260", 10);
     } catch {
       return 260;
     }
   });
-  const [rightPanelWidth, setRightPanelWidth] = (0, import_react21.useState)(() => {
+  const [rightPanelWidth, setRightPanelWidth] = (0, import_react23.useState)(() => {
     try {
       return parseInt(localStorage.getItem("aa-right-width") || "320", 10);
     } catch {
       return 320;
     }
   });
-  const [isPromptCollapsed, setIsPromptCollapsed] = (0, import_react21.useState)(false);
-  const [projectActionState, setProjectActionState] = (0, import_react21.useState)("idle");
-  const syncServerDataRef = (0, import_react21.useRef)(null);
-  const [workspaceTags, setWorkspaceTags] = (0, import_react21.useState)(null);
-  const [serverProjects, setServerProjects] = (0, import_react21.useState)([]);
-  const [isLoadingFromServer, setIsLoadingFromServer] = (0, import_react21.useState)(false);
-  const [highContrast, setHighContrast] = (0, import_react21.useState)(() => {
+  const [isPromptCollapsed, setIsPromptCollapsed] = (0, import_react23.useState)(false);
+  const [projectActionState, setProjectActionState] = (0, import_react23.useState)("idle");
+  const syncServerDataRef = (0, import_react23.useRef)(null);
+  const [workspaceTags, setWorkspaceTags] = (0, import_react23.useState)(null);
+  const [serverProjects, setServerProjects] = (0, import_react23.useState)([]);
+  const [isLoadingFromServer, setIsLoadingFromServer] = (0, import_react23.useState)(false);
+  const [highContrast, setHighContrast] = (0, import_react23.useState)(() => {
     try {
       return localStorage.getItem("aa-contrast") === "high";
     } catch {
       return false;
     }
   });
-  const [activeReferenceId, setActiveReferenceId] = (0, import_react21.useState)(null);
-  const [activeReferenceThumbnail, setActiveReferenceThumbnail] = (0, import_react21.useState)(null);
-  const [isScanningImage, setIsScanningImage] = (0, import_react21.useState)(false);
-  const [touchStartX, setTouchStartX] = (0, import_react21.useState)(null);
-  const [isFullscreen, setIsFullscreen] = (0, import_react21.useState)(false);
-  const [zoomScale, setZoomScale] = (0, import_react21.useState)(1);
-  const [zoomOffset, setZoomOffset] = (0, import_react21.useState)({ x: 0, y: 0 });
-  const lastPinchDist = (0, import_react21.useRef)(null);
-  const lastTapTime = (0, import_react21.useRef)(0);
-  const dragStart = (0, import_react21.useRef)(null);
+  const [activeReferenceId, setActiveReferenceId] = (0, import_react23.useState)(null);
+  const [activeReferenceThumbnail, setActiveReferenceThumbnail] = (0, import_react23.useState)(null);
+  const [isScanningImage, setIsScanningImage] = (0, import_react23.useState)(false);
+  const [touchStartX, setTouchStartX] = (0, import_react23.useState)(null);
+  const [isFullscreen, setIsFullscreen] = (0, import_react23.useState)(false);
+  const [zoomScale, setZoomScale] = (0, import_react23.useState)(1);
+  const [zoomOffset, setZoomOffset] = (0, import_react23.useState)({ x: 0, y: 0 });
+  const lastPinchDist = (0, import_react23.useRef)(null);
+  const lastTapTime = (0, import_react23.useRef)(0);
+  const dragStart = (0, import_react23.useRef)(null);
   const openFullscreen = () => {
     setIsFullscreen(true);
     setZoomScale(1);
@@ -3611,7 +4597,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     setActiveReferenceId(null);
     setActiveReferenceThumbnail(null);
   };
-  const labServices = (0, import_react21.useMemo)(() => {
+  const labServices = (0, import_react23.useMemo)(() => {
     const available = groupGenerationsToLabItems([...galleryItems, ...history]);
     return {
       availableItems: available,
@@ -3691,17 +4677,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       setIsScanningImage(false);
     }
   };
-  const currentIndex = (0, import_react21.useMemo)(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
-  const goToPrev = (0, import_react21.useCallback)(() => {
+  const currentIndex = (0, import_react23.useMemo)(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
+  const goToPrev = (0, import_react23.useCallback)(() => {
     if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
   }, [currentIndex, history]);
-  const goToNext = (0, import_react21.useCallback)(() => {
+  const goToNext = (0, import_react23.useCallback)(() => {
     if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
   }, [currentIndex, history]);
   const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
   const isGenerating = activeGenerationsCount > 0;
   useKeyboardNavigation(history, currentResult, setCurrentResult);
-  const getSubtreeFormat = (0, import_react21.useCallback)((nodeId, depth = 0) => {
+  const getSubtreeFormat = (0, import_react23.useCallback)((nodeId, depth = 0) => {
     const node = nodes.find((n) => n.id === nodeId);
     if (!node) return "";
     const childrenIds = edges.filter((e) => e.source === nodeId).map((e) => e.target);
@@ -3709,7 +4695,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     return `${indent}- ${node.data.label || "(unbenannt)"}
 ` + childrenIds.map((id) => getSubtreeFormat(id, depth + 1)).join("");
   }, [nodes, edges]);
-  const activePath = (0, import_react21.useMemo)(() => {
+  const activePath = (0, import_react23.useMemo)(() => {
     if (!focusedNodeId) return /* @__PURE__ */ new Set();
     const path = /* @__PURE__ */ new Set([focusedNodeId]);
     let currId = focusedNodeId;
@@ -3741,7 +4727,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         if (prev.id === genId || !options.silent) return finishedGen;
         return prev;
       });
-      if (hfToken && base64) {
+      console.log("[HF] handleGenerateImage \u2014 condition check:", { hfToken: !!hfToken, base64: !!base64, effectiveNamespace });
+      if (hfToken && base64 && effectiveNamespace) {
+        hfUploadImage(base64, genId, hfToken).catch((e) => {
+          console.error("[HF] hfUploadImage failed:", e);
+        });
         const entry = {
           id: genId,
           prompt: promptToUse || void 0,
@@ -3751,20 +4741,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           timestamp: Date.now(),
           mimeType: "image/jpeg"
         };
-        hfUploadImage(base64, genId, hfToken).catch(() => {
-        });
-        const token = hfToken;
-        hfMetaSaveQueue.current = hfMetaSaveQueue.current.then(async () => {
-          try {
-            const existing = await hfLoadMetadata(token);
-            const ids = new Set((existing || []).map((e) => e.id));
-            if (!ids.has(genId)) {
-              const next = [...existing || [], entry];
-              await hfSaveMetadata(next, token);
-              setHfMetadata(next);
-            }
-          } catch {
-          }
+        console.log("[HF] calling hfWriteEvent, namespace:", effectiveNamespace);
+        hfWriteEvent("image_added", entry).catch((e) => {
+          console.error("[HF] hfWriteEvent outer catch:", e);
         });
       }
     } catch (err) {
@@ -3800,6 +4779,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         all: [...prev.all, { ...newTagOption, category: tag.category }]
       };
     });
+    if (hfToken && effectiveNamespace) {
+      const p = { category: tag.category, label: tag.label, value: tag.value, is_user_created: true };
+      hfWriteEvent("tag_upserted", p).catch(() => {
+      });
+    }
   };
   const handleTagUpdate = (originalLabel, originalCategory, updates) => {
     setWorkspaceTags((prev) => {
@@ -3812,8 +4796,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       );
       return { by_category: { ...prev.by_category, [originalCategory]: updatedCat }, all: updatedAll };
     });
+    if (hfToken && effectiveNamespace) {
+      const p = { category: originalCategory, label: updates.label, value: updates.value, is_user_created: true };
+      hfWriteEvent("tag_upserted", p).catch(() => {
+      });
+    }
   };
   const handleTagDelete = (label, category) => {
+    const tagValue = workspaceTags?.by_category[category]?.find((t) => t.label === label)?.value;
     setWorkspaceTags((prev) => {
       if (!prev) return prev;
       const updatedCat = (prev.by_category[category] || []).map(
@@ -3824,6 +4814,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       );
       return { by_category: { ...prev.by_category, [category]: updatedCat }, all: updatedAll };
     });
+    if (hfToken && effectiveNamespace && tagValue) {
+      const p = { category, label, value: tagValue, is_deleted: true };
+      hfWriteEvent("tag_upserted", p).catch(() => {
+      });
+    }
   };
   const handleTagReorder = (category, reorderedTags) => {
     setWorkspaceTags((prev) => {
@@ -3973,38 +4968,39 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     await fetchServerProjects();
   };
   const handleHfInitialSync = async (onProgress) => {
-    if (!hfToken) return;
-    const gens = galleryItems.filter((g) => g.base64 && g.status === "done");
+    if (!hfToken || !effectiveNamespace) return;
+    const existingIds = new Set((hfState?.metadata || []).map((m) => m.id));
+    const gens = galleryItems.filter((g) => g.base64 && g.status === "done" && !existingIds.has(g.id));
     const total = gens.length;
     onProgress(0, total);
     let done = 0;
     for (const gen of gens) {
       const raw = gen.base64.includes(",") ? gen.base64.split(",")[1] : gen.base64;
       const mimeType = gen.base64.startsWith("data:image/png") ? "image/png" : "image/jpeg";
-      await hfUploadImage(raw, gen.id, hfToken, mimeType);
+      await hfUploadImage(raw, gen.id, hfToken, mimeType).catch(() => {
+      });
+      const entry = {
+        id: gen.id,
+        prompt: gen.prompt || void 0,
+        seed: gen.seed,
+        model: gen.model,
+        tags: gen.tags || [],
+        timestamp: gen.timestamp,
+        mimeType
+      };
+      await hfWriteEvent("image_added", entry).catch(() => {
+      });
       done++;
       onProgress(done, total);
     }
-    const localEntries = gens.map((g) => ({
-      id: g.id,
-      prompt: g.prompt || void 0,
-      seed: g.seed,
-      model: g.model,
-      tags: g.tags || [],
-      timestamp: g.timestamp,
-      mimeType: g.base64.startsWith("data:image/png") ? "image/png" : "image/jpeg"
-    }));
-    const existingMeta = await hfLoadMetadata(hfToken);
-    const existingIds = new Set((existingMeta || []).map((e) => e.id));
-    const newEntries = localEntries.filter((e) => !existingIds.has(e.id));
-    const mergedMeta = [...existingMeta || [], ...newEntries];
-    await hfSaveMetadata(mergedMeta, hfToken);
-    setHfMetadata(mergedMeta);
     if (workspaceTags) {
-      const remoteTags = await hfLoadTags(hfToken).catch(() => null);
-      const mergedTags = mergeWorkspaceTags(workspaceTags, remoteTags);
-      await hfSaveTags(mergedTags, hfToken);
-      setWorkspaceTags(mergedTags);
+      for (const [category, tags] of Object.entries(workspaceTags.by_category)) {
+        for (const tag of tags) {
+          const p = { category, label: tag.label, value: tag.value, is_user_created: tag.is_user_created, is_deleted: tag.is_deleted };
+          await hfWriteEvent("tag_upserted", p).catch(() => {
+          });
+        }
+      }
     }
   };
   const handleComputeSyncDiff = async () => {
@@ -4043,87 +5039,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       setTimeout(() => setProjectActionState("idle"), 4e3);
     }
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (activeTab === "setup" || activeTab === "sync") fetchServerProjects();
   }, [activeTab]);
-  const [isHfRefreshing, setIsHfRefreshing] = (0, import_react21.useState)(false);
-  const loadFromHF = (0, import_react21.useCallback)(async (token) => {
-    setIsHfRefreshing(true);
-    try {
-      hfLoadTags(token).then((tags) => {
-        if (tags?.by_category) setWorkspaceTags(tags);
-      }).catch(() => {
-      });
-      const entries = await hfLoadMetadata(token);
-      if (!Array.isArray(entries) || entries.length === 0) return;
-      setHfMetadata(entries);
-      const hfIds = new Set(entries.map((e) => e.id));
-      const hfSkeletons = entries.map((e) => ({
-        id: e.id,
-        nodeId: e.id,
-        prompt: e.prompt,
-        seed: e.seed,
-        model: e.model,
-        tags: e.tags || [],
-        timestamp: e.timestamp,
-        status: "done"
-      }));
-      setGalleryItems((prev) => {
-        const localOnly = prev.filter((g) => !hfIds.has(g.id));
-        const merged = hfSkeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
-        return [...localOnly, ...merged];
-      });
-      setHistory((prev) => {
-        const localOnly = prev.filter((g) => !hfIds.has(g.id));
-        const merged = hfSkeletons.map((s) => prev.find((g) => g.id === s.id) ?? s);
-        return [...localOnly, ...merged];
-      });
-      for (const entry of entries) {
-        hfLoadImageAsBase64(entry.id, token).then((b64) => {
-          if (!b64) return;
-          const prefix = `data:${entry.mimeType || "image/jpeg"};base64,`;
-          setGalleryItems((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
-          setHistory((prev) => prev.map((g) => g.id === entry.id && !g.base64 ? { ...g, base64: prefix + b64 } : g));
-        }).catch(() => {
-        });
-      }
-      const localOnlyItems = galleryItemsRef.current.filter((g) => !hfIds.has(g.id) && g.base64 && g.status === "done");
-      if (localOnlyItems.length > 0) {
-        hfMetaSaveQueue.current = hfMetaSaveQueue.current.then(async () => {
-          try {
-            let currentMeta = await hfLoadMetadata(token);
-            const existingIds = new Set((currentMeta || []).map((e) => e.id));
-            for (const gen of localOnlyItems) {
-              if (existingIds.has(gen.id)) continue;
-              const raw = gen.base64.includes(",") ? gen.base64.split(",")[1] : gen.base64;
-              const mimeType = gen.base64.startsWith("data:image/png") ? "image/png" : "image/jpeg";
-              await hfUploadImage(raw, gen.id, token, mimeType).catch(() => {
-              });
-              const entry = {
-                id: gen.id,
-                prompt: gen.prompt || void 0,
-                seed: gen.seed,
-                model: gen.model,
-                tags: gen.tags || [],
-                timestamp: gen.timestamp,
-                mimeType
-              };
-              currentMeta = [...currentMeta || [], entry];
-              existingIds.add(gen.id);
-            }
-            await hfSaveMetadata(currentMeta, token);
-            setHfMetadata(currentMeta);
-          } catch {
-          }
-        });
-      }
-    } finally {
-      setIsHfRefreshing(false);
-    }
-  }, []);
-  (0, import_react21.useEffect)(() => {
-    if (hfToken) loadFromHF(hfToken);
-  }, [hfToken]);
   const mergeWorkspaceTags = (local, remote) => {
     if (!remote?.by_category) return local;
     const merged = {};
@@ -4143,25 +5061,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     const all = Object.entries(merged).flatMap(([cat, tags]) => tags.map((t) => ({ ...t, category: cat })));
     return { by_category: merged, all };
   };
-  (0, import_react21.useEffect)(() => {
-    if (!hfToken || !workspaceTags) return;
-    if (hfTagSaveTimer.current) clearTimeout(hfTagSaveTimer.current);
-    hfTagSaveTimer.current = setTimeout(async () => {
-      const remote = await hfLoadTags(hfToken).catch(() => null);
-      const merged = mergeWorkspaceTags(workspaceTags, remote);
-      await hfSaveTags(merged, hfToken).catch(() => {
-      });
-      if (Object.values(merged.by_category).some(
-        (tags, i) => tags.length !== Object.values(workspaceTags.by_category)[i]?.length
-      )) setWorkspaceTags(merged);
-    }, 1500);
-    return () => {
-      if (hfTagSaveTimer.current) clearTimeout(hfTagSaveTimer.current);
-    };
-  }, [workspaceTags, hfToken]);
   if (isFullscreen && currentResult?.base64) {
     const fsBase64 = currentResult.base64.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       {
         className: "fixed inset-0 bg-black z-50 flex items-center justify-center overflow-hidden touch-none",
@@ -4169,7 +5071,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         onTouchMove: handleFsTouchMove,
         onTouchEnd: handleFsTouchEnd,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "img",
             {
               src: fsBase64,
@@ -4186,77 +5088,77 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: closeFullscreen, className: "absolute top-4 right-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "close" }) }),
-          zoomScale > 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: closeFullscreen, className: "absolute top-4 right-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "close" }) }),
+          zoomScale > 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => {
             setZoomScale(1);
             setZoomOffset({ x: 0, y: 0 });
-          }, className: "absolute top-4 left-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "zoom_out_map" }) }),
-          history.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => {
+          }, className: "absolute top-4 left-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "zoom_out_map" }) }),
+          history.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => {
               if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
-            }, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => {
+            }, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => {
               if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
-            }, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
+            }, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
               currentIndex + 1,
               " / ",
               history.length
             ] })
           ] }),
-          zoomScale === 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute bottom-6 right-4 text-[9px] text-white/20 font-mono", children: "Pinch zum Zoomen \xB7 Doppeltipp 2.5\xD7" })
+          zoomScale === 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute bottom-6 right-4 text-[9px] text-white/20 font-mono", children: "Pinch zum Zoomen \xB7 Doppeltipp 2.5\xD7" })
         ]
       }
     );
   }
   if (showStart) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { ref: wsInputRef, type: "file", accept: ".zip", className: "hidden", onChange: (e) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { ref: wsInputRef, type: "file", accept: ".zip", className: "hidden", onChange: (e) => {
         const f = e.target.files?.[0];
         if (f) handleProjectImport(f);
         e.target.value = "";
       } }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-white text-[13px] font-mono", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-white text-[13px] font-mono", children: [
           "v",
           LIB_VERSION
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         "button",
         {
           onClick: toggleContrast,
           className: "flex items-center gap-3 px-5 py-3 rounded-2xl border transition-colors",
           style: { borderColor: highContrast ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.08)", background: highContrast ? "rgba(255,255,255,0.08)" : "transparent" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[22px]", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.35)" }, children: highContrast ? "light_mode" : "dark_mode" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-start", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[13px] font-bold", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.5)" }, children: highContrast ? "Hoher Kontrast" : "Normaler Kontrast" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px]", style: { color: "rgba(255,255,255,0.25)" }, children: "Tippen zum Umschalten" })
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[22px]", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.35)" }, children: highContrast ? "light_mode" : "dark_mode" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-start", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[13px] font-bold", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.5)" }, children: highContrast ? "Hoher Kontrast" : "Normaler Kontrast" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[10px]", style: { color: "rgba(255,255,255,0.25)" }, children: "Tippen zum Umschalten" })
             ] })
           ]
         }
       ),
-      /* @__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)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "button",
           {
             onClick: () => wsInputRef.current?.click(),
             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",
             style: { height: 56, background: projectLoaded ? "#16a34a" : "#0284c7" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: projectLoaded ? "check_circle" : "folder_zip" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: projectLoaded ? "check_circle" : "folder_zip" }),
               projectLoaded ? "Projekt geladen \u2713" : "Projekt laden (.zip)"
             ]
           }
         ),
-        !projectLoaded && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
+        !projectLoaded && /* @__PURE__ */ (0, import_jsx_runtime21.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: [
-        !initialHfToken && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-2 w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
+        !initialHfToken && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-2 w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "input",
             {
               type: "password",
@@ -4272,7 +5174,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               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)(
+          hfTokenInput.trim() && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               type: "button",
@@ -4283,7 +5185,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             }
           )
         ] }),
-        hfToken && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        hfToken && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "button",
           {
             disabled: isLoadingFromHF,
@@ -4305,15 +5207,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             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" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.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" })
+        hfToken && /* @__PURE__ */ (0, import_jsx_runtime21.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)(
+      onFetchServerProjects && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "button",
           {
             disabled: isLoadingFromServer,
@@ -4334,35 +5236,57 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             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: "#7c3aed" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromServer ? " animate-spin" : ""}`, children: isLoadingFromServer ? "sync" : "cloud_download" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromServer ? " animate-spin" : ""}`, children: isLoadingFromServer ? "sync" : "cloud_download" }),
               isLoadingFromServer ? "Laden\u2026" : "Vom Server laden"
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand vom Server wiederherstellen" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand vom Server 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.jsx)("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
           { id: "mobile", icon: "smartphone", label: "Mobile" },
           { id: "mobile-desktop", icon: "phonelink", label: "Mobile+" },
           { id: "desktop", icon: "desktop_windows", label: "Desktop" },
           { id: "tablet-landscape", icon: "tablet", label: "Landscape" }
-        ].map((opt) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        ].map((opt) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "button",
           {
             onClick: () => startApp(opt.id),
             className: "flex flex-col items-center gap-2 py-4 rounded-2xl border transition-colors",
             style: { borderColor: layoutChoice === opt.id ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.08)", background: layoutChoice === opt.id ? "rgba(255,255,255,0.07)" : "transparent" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[24px]", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[11px] font-bold", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.label })
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[24px]", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[11px] font-bold", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.label })
             ]
           },
           opt.id
         )) }),
-        layoutChoice === "mobile-desktop" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
-        layoutChoice === "tablet-landscape" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-white/20 text-[9px] text-center", children: "2-Spalten-Layout f\xFCr Landscape-Tablet im Desktop-Mode" })
+        layoutChoice === "mobile-desktop" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
+        layoutChoice === "tablet-landscape" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-white/20 text-[9px] text-center", children: "2-Spalten-Layout f\xFCr Landscape-Tablet im Desktop-Mode" })
+      ] }),
+      !hfNamespace && !hfNamespaceFromServer && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-3 w-full max-w-[280px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "State:" }),
+        ["app.art-by-rolands.de/", "dev-app.art-by-rolands.de/"].map((ns, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "button",
+          {
+            onClick: () => {
+              setHfNamespaceLocal(ns);
+              try {
+                localStorage.setItem("aa-hf-namespace", ns);
+              } catch {
+              }
+            },
+            className: "px-3 py-1 rounded-lg text-[11px] font-bold transition-colors",
+            style: {
+              background: hfNamespaceLocal === ns ? "#e7e5e4" : "#44403c",
+              color: hfNamespaceLocal === ns ? "#1c1917" : "#e7e5e4"
+            },
+            children: i === 0 ? "PROD" : "DEV"
+          },
+          ns
+        ))
       ] })
     ] });
   }
@@ -4371,21 +5295,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     const mdScale = mdMode ? window.innerWidth / 430 : 1;
     const mdW = mdMode ? 430 : void 0;
     const mdH = mdMode ? Math.ceil(window.innerHeight / mdScale) : void 0;
-    const mobileRoot = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
+    const mobileRoot = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
       width: mdMode ? mdW : "100vw",
       height: mdMode ? mdH : "100dvh",
       transform: mdMode ? `scale(${mdScale})` : void 0,
       transformOrigin: mdMode ? "top left" : void 0,
       ...hcStyle || {}
     }, children: [
-      mobileTab === "labs" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LabsTab, { services: labServices, onResult: (item) => {
+      mobileTab === "labs" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LabsTab, { services: labServices, onResult: (item) => {
         const frame = item.frames[0];
         if (frame?.base64) {
           setCurrentResult(frameToGeneration(frame, item));
           setMobileTab("stage");
         }
       } }) }),
-      mobileTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      mobileTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         TagManagerPanel,
         {
           workspaceTags,
@@ -4396,21 +5320,21 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           onTagMove: handleTagMove
         }
       ) }),
-      mobileTab === "stage" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1" }),
-          activeReferenceThumbnail ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden mr-2", style: { height: 28 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 active:text-white/80 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: handleSelectReference, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "add_photo_alternate" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: toggleContrast, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: highContrast ? "light_mode" : "dark_mode" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setShowStart(true), className: "text-white/20 active:text-white/60 transition-colors mr-1", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "desktop_windows" }) })
+      mobileTab === "stage" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1" }),
+          activeReferenceThumbnail ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden mr-2", style: { height: 28 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 active:text-white/80 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: handleSelectReference, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "add_photo_alternate" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: toggleContrast, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: highContrast ? "light_mode" : "dark_mode" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => setShowStart(true), className: "text-white/20 active:text-white/60 transition-colors mr-1", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "desktop_windows" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `relative rounded-xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `relative rounded-xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "textarea",
             {
               value: activePrompt,
@@ -4420,26 +5344,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               placeholder: "Prompt eingeben..."
             }
           ),
-          activePrompt && !isSynthesizing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center text-white/20 active:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
+          activePrompt && !isSynthesizing && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center text-white/20 active:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
           {
             onClick: () => handleGenerateImage(),
             disabled: !activePrompt.trim() || isGenerating,
             className: "w-full flex items-center justify-center gap-2 rounded-xl font-bold text-[14px] uppercase tracking-wide transition-all disabled:opacity-30 active:scale-95",
             style: { height: 48, background: activePrompt.trim() && !isGenerating ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
-            children: isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-4 h-4 border-t-2 border-white rounded-full animate-spin" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Generiere..." })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Generieren" })
+            children: isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-4 h-4 border-t-2 border-white rounded-full animate-spin" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Generiere..." })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Generieren" })
             ] })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "div",
             {
               className: "w-full rounded-2xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center",
@@ -4453,25 +5377,25 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
                 setTouchStartX(null);
               },
               children: [
-                currentResult?.status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[11px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
+                currentResult?.status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[11px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
                 ] }),
-                currentResult?.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => handleGenerateImage(currentResult.prompt), className: "px-4 py-2 rounded-lg border border-white/20 text-[13px] text-white/70 active:bg-white/10", children: "Erneut versuchen" })
+                currentResult?.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => handleGenerateImage(currentResult.prompt), className: "px-4 py-2 rounded-lg border border-white/20 text-[13px] text-white/70 active:bg-white/10", children: "Erneut versuchen" })
                 ] }),
-                currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: currentResult.base64, className: "w-full h-full object-contain" }),
-                !currentResult && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
+                currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: currentResult.base64, className: "w-full h-full object-contain" }),
+                !currentResult && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
                 ] }),
-                currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: openFullscreen, className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center rounded-full bg-black/60 border border-white/10 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "fullscreen" }) }),
-                history.length > 1 && currentResult && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: goToPrev, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
+                currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: openFullscreen, className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center rounded-full bg-black/60 border border-white/10 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: "fullscreen" }) }),
+                history.length > 1 && currentResult && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: goToPrev, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
                     currentIndex + 1,
                     " / ",
                     history.length
@@ -4480,33 +5404,33 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               ]
             }
           ),
-          currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-2 mt-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[12px] text-white/60", children: "Prompt" })
+          currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-2 mt-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[12px] text-white/60", children: "Prompt" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl bg-white/10 active:bg-white/15 transition-colors", style: { height: 44 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl bg-white/10 active:bg-white/15 transition-colors", style: { height: 44 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: handleDownloadSingle, className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "download" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[12px] text-white/60", children: "Laden" })
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: handleDownloadSingle, className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "download" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[12px] text-white/60", children: "Laden" })
             ] })
           ] })
         ] })
       ] }),
-      mobileTab === "browse" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
-          ["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setActiveTab(tab), className: `flex-1 flex items-center justify-center gap-1.5 transition-colors text-[11px] font-bold uppercase tracking-wide ${activeTab === tab ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : "info" }) }, tab)),
-          hfToken && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => loadFromHF(hfToken), disabled: isHfRefreshing, className: "w-12 flex items-center justify-center text-white/20 active:text-white transition-colors disabled:opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
+      mobileTab === "browse" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
+          ["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => setActiveTab(tab), className: `flex-1 flex items-center justify-center gap-1.5 transition-colors text-[11px] font-bold uppercase tracking-wide ${activeTab === tab ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : "info" }) }, tab)),
+          hfToken && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => refreshHF(), disabled: isHfRefreshing, className: "w-12 flex items-center justify-center text-white/20 active:text-white transition-colors disabled:opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `material-symbols-outlined text-[20px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
-          activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: (g) => {
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
+          activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: (g) => {
             setCurrentResult(g);
             setMobileTab("stage");
           }, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
-          activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             MediaLibrary,
             {
               items: galleryItems,
@@ -4526,39 +5450,43 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               }
             }
           ),
-          activeTab === "inspect" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InspectPanel, { currentResult, history, onSelect: (g) => {
+          activeTab === "inspect" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InspectPanel, { currentResult, history, onSelect: (g) => {
             setCurrentResult(g);
           } })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: mobileTab === "tools" ? "flex" : "none" }, className: "flex flex-col flex-1 min-h-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
-          workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: () => {
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: mobileTab === "tools" ? "flex" : "none" }, className: "flex flex-col flex-1 min-h-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
+          workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => {
             setLeftTab("prompt");
             if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
           }, className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
             "Prompt"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => {
             setLeftTab("hierarchy");
             if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
           }, className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
             "Hierarchie"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: () => setActiveTab("setup"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "setup" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "settings" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => setActiveTab("setup"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "setup" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "settings" }),
             "Setup"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: () => setActiveTab("sync"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "cloud_sync" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => setActiveTab("sync"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "cloud_sync" }),
             "Sync"
           ] }),
-          workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setActiveTab("tags"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "tags" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => setActiveTab("hftest"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "hftest" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "biotech" }),
+            "HF"
+          ] }),
+          workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => setActiveTab("tags"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "tags" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
-          leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
+          leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             ListView,
             {
               nodes,
@@ -4589,14 +5517,15 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
             }
           ) }),
-          workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { display: leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" ? "flex" : "none" }, className: "absolute inset-0 flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => {
+          workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { display: leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" && activeTab !== "hftest" ? "flex" : "none" }, className: "absolute inset-0 flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => {
             handleGenerateImage(prompt);
             setMobileTab("stage");
           }, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
-          activeTab === "setup" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
-          activeTab === "sync" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          activeTab === "setup" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
+          activeTab === "sync" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             ProjectSyncTab,
             {
+              topSlot: syncTopSlot,
               onProjectExport: handleProjectExport,
               onProjectImport: (f) => handleProjectImport(f),
               onWorkspaceImport: handleWorkspaceImport,
@@ -4617,7 +5546,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               onHfInitialSync: hfToken ? handleHfInitialSync : void 0
             }
           ),
-          activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             TagManagerPanel,
             {
               workspaceTags,
@@ -4627,22 +5556,23 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               onTagReorder: handleTagReorder,
               onTagMove: handleTagMove
             }
-          )
+          ),
+          activeTab === "hftest" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(HFTestTab, { token: hfToken, namespace: effectiveNamespace, galleryItems }) })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
         { id: "tools", icon: "auto_fix_high", label: "Prompt" },
         { id: "stage", icon: "palette", label: "Stage" },
         { id: "labs", icon: "science", label: "Labs" },
         ...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
         { id: "browse", icon: "photo_library", label: "Galerie" }
-      ].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: () => setMobileTab(tab.id), className: `flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors ${mobileTab === tab.id ? "text-white" : "text-white/30"}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
+      ].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => setMobileTab(tab.id), className: `flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors ${mobileTab === tab.id ? "text-white" : "text-white/30"}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
       ] }, tab.id)) })
     ] });
     if (mdMode) {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
     }
     return mobileRoot;
   }
@@ -4650,17 +5580,17 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     const tlScale = Math.min(window.innerWidth / 920, window.innerHeight / 520);
     const tlW = 920;
     const tlH = 520;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { position: "fixed", inset: 0, background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", ...hcStyle || {} }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { width: tlW, height: tlH, transform: `scale(${tlScale})`, transformOrigin: "center center", display: "flex", flexDirection: "row", color: "#fff", overflow: "hidden", borderRadius: 0 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { width: 320, height: tlH, display: "flex", flexDirection: "column", borderRight: "1px solid rgba(255,255,255,0.05)", background: "#000", flexShrink: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { height: 52, borderBottom: "1px solid rgba(255,255,255,0.05)", display: "flex", alignItems: "center", gap: 8, padding: "0 12px", flexShrink: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { flex: 1 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { position: "fixed", inset: 0, background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", ...hcStyle || {} }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { width: tlW, height: tlH, transform: `scale(${tlScale})`, transformOrigin: "center center", display: "flex", flexDirection: "row", color: "#fff", overflow: "hidden", borderRadius: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { width: 320, height: tlH, display: "flex", flexDirection: "column", borderRight: "1px solid rgba(255,255,255,0.05)", background: "#000", flexShrink: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { height: 52, borderBottom: "1px solid rgba(255,255,255,0.05)", display: "flex", alignItems: "center", gap: 8, padding: "0 12px", flexShrink: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { flex: 1 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { padding: "12px 12px 8px", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { position: "relative", borderRadius: 12, border: `1px solid ${isSynthesizing ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.1)"}`, background: "rgba(255,255,255,0.05)" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { padding: "12px 12px 8px", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { position: "relative", borderRadius: 12, border: `1px solid ${isSynthesizing ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.1)"}`, background: "rgba(255,255,255,0.05)" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "textarea",
             {
               value: activePrompt,
@@ -4669,27 +5599,27 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               placeholder: "Prompt eingeben..."
             }
           ),
-          activePrompt && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setActivePrompt(""), style: { position: "absolute", top: 6, right: 6, width: 22, height: 22, display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
+          activePrompt && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => setActivePrompt(""), style: { position: "absolute", top: 6, right: 6, width: 22, height: 22, display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
           {
             onClick: () => handleGenerateImage(),
             disabled: !activePrompt.trim() || isGenerating,
             style: { width: "100%", height: 42, display: "flex", alignItems: "center", justifyContent: "center", gap: 8, borderRadius: 10, fontWeight: "bold", fontSize: 13, textTransform: "uppercase", letterSpacing: "0.05em", border: "1px solid rgba(255,255,255,0.1)", background: activePrompt.trim() && !isGenerating ? "#0284c7" : "transparent", color: "#fff", cursor: activePrompt.trim() && !isGenerating ? "pointer" : "default", opacity: !activePrompt.trim() || isGenerating ? 0.3 : 1, fontFamily: "inherit", transition: "background 0.2s" },
-            children: isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { width: 14, height: 14, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Generiere..." })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Generieren" })
+            children: isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { width: 14, height: 14, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Generiere..." })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Generieren" })
             ] })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
             style: { flex: 1, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" },
@@ -4701,26 +5631,26 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               else if (dx > 50) goToPrev();
               setTouchStartX(null);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { height: "100%", width: "100%", borderRadius: 20, border: "1px solid rgba(255,255,255,0.05)", background: "rgba(0,0,0,0.4)", position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }, children: [
-              currentResult?.status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { width: 36, height: 36, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { height: "100%", width: "100%", borderRadius: 20, border: "1px solid rgba(255,255,255,0.05)", background: "rgba(0,0,0,0.4)", position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }, children: [
+              currentResult?.status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { width: 36, height: 36, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
               ] }),
-              currentResult?.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => handleGenerateImage(currentResult.prompt), style: { padding: "8px 16px", borderRadius: 8, border: "1px solid rgba(255,255,255,0.2)", fontSize: 11, color: "rgba(255,255,255,0.7)", background: "none", cursor: "pointer", fontFamily: "inherit" }, children: "Erneut versuchen" })
+              currentResult?.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => handleGenerateImage(currentResult.prompt), style: { padding: "8px 16px", borderRadius: 8, border: "1px solid rgba(255,255,255,0.2)", fontSize: 11, color: "rgba(255,255,255,0.7)", background: "none", cursor: "pointer", fontFamily: "inherit" }, children: "Erneut versuchen" })
               ] }),
-              currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
-              !currentResult && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
+              currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
+              !currentResult && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
               ] }),
-              currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: openFullscreen, style: { position: "absolute", top: 8, right: 8, width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "fullscreen" }) }),
-              history.length > 1 && currentResult && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: goToPrev, disabled: currentIndex <= 0, style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex <= 0 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_left" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, style: { position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex >= history.length - 1 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_right" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { position: "absolute", bottom: 8, left: "50%", transform: "translateX(-50%)", background: "rgba(0,0,0,0.6)", borderRadius: 999, padding: "2px 12px", fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: "monospace" }, children: [
+              currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: openFullscreen, style: { position: "absolute", top: 8, right: 8, width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "fullscreen" }) }),
+              history.length > 1 && currentResult && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: goToPrev, disabled: currentIndex <= 0, style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex <= 0 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_left" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, style: { position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex >= history.length - 1 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_right" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { position: "absolute", bottom: 8, left: "50%", transform: "translateX(-50%)", background: "rgba(0,0,0,0.6)", borderRadius: 999, padding: "2px 12px", fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: "monospace" }, children: [
                   currentIndex + 1,
                   " / ",
                   history.length
@@ -4729,42 +5659,42 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             ] })
           }
         ),
-        currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { padding: "0 16px 16px", display: "flex", gap: 8, flexShrink: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.6)", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Prompt" })
+        currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "0 16px 16px", display: "flex", gap: 8, flexShrink: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.6)", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Prompt" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "none", background: "rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.8)", fontSize: 11, fontWeight: "bold", cursor: "pointer", fontFamily: "inherit" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Referenz" })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "none", background: "rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.8)", fontSize: 11, fontWeight: "bold", cursor: "pointer", fontFamily: "inherit" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Referenz" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: handleDownloadSingle, style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.6)", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "download" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Laden" })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: handleDownloadSingle, style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.6)", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "download" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Laden" })
           ] })
         ] })
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", style: hcStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute top-2 right-2 z-50", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setShowStart(true), className: "text-white/10 hover:text-white/30 transition-colors text-[10px]", children: "\u21C4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col border-r border-white/5 overflow-hidden relative bg-black/10 shrink-0", style: { width: isLeftCollapsed ? 48 : leftPanelWidth, transition: "none" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
-        !isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-1 gap-1", children: [
-          workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: () => setLeftTab("prompt"), className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "prompt" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", style: hcStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute top-2 right-2 z-50", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => setShowStart(true), className: "text-white/10 hover:text-white/30 transition-colors text-[10px]", children: "\u21C4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col border-r border-white/5 overflow-hidden relative bg-black/10 shrink-0", style: { width: isLeftCollapsed ? 48 : leftPanelWidth, transition: "none" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
+        !isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-1 gap-1", children: [
+          workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => setLeftTab("prompt"), className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "prompt" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
             "Prompt"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: () => setLeftTab("hierarchy"), className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "hierarchy" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: () => setLeftTab("hierarchy"), className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "hierarchy" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
             "Hierarchie"
           ] }),
-          workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setActiveTab("tags"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "tags" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
+          workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => setActiveTab("tags"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "tags" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "label" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setIsLeftCollapsed(!isLeftCollapsed), className: "material-symbols-outlined text-[18px] text-white/40 hover:text-white transition-all w-10 flex items-center justify-center", children: isLeftCollapsed ? "chevron_right" : "chevron_left" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => setIsLeftCollapsed(!isLeftCollapsed), className: "material-symbols-outlined text-[18px] text-white/40 hover:text-white transition-all w-10 flex items-center justify-center", children: isLeftCollapsed ? "chevron_right" : "chevron_left" })
       ] }),
-      !isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
-        activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      !isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
+        activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           TagManagerPanel,
           {
             workspaceTags,
@@ -4775,11 +5705,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             onTagMove: handleTagMove
           }
         ),
-        activeTab === "tags" && !workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
+        activeTab === "tags" && !workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
         ] }) }),
-        leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        leftTab === "hierarchy" && activeTab !== "tags" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           ListView,
           {
             nodes,
@@ -4804,18 +5734,18 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
           }
         ) }),
-        leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => handleGenerateImage(prompt), onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage })
+        leftTab === "prompt" && workspaceTags && activeTab !== "tags" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => handleGenerateImage(prompt), onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage })
       ] })
     ] }),
-    !isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { onMouseDown: startLeftResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] })
+    !isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { onMouseDown: startLeftResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1 mx-auto", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1 mx-auto", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               onClick: () => setMiddlePanel("stage"),
@@ -4823,7 +5753,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               children: "Stage"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               onClick: () => setMiddlePanel("labs"),
@@ -4832,68 +5762,68 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
-          activeReferenceThumbnail ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden", style: { height: 28 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 hover:text-white/80 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: handleSelectReference, className: "flex items-center gap-1 h-7 px-2 rounded-lg border border-white/10 text-white/30 hover:text-white/60 hover:border-white/20 transition-colors text-[10px] font-bold uppercase tracking-wide", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Ref" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
+          activeReferenceThumbnail ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1 rounded-lg border border-white/20 bg-white/5 overflow-hidden", style: { height: 28 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: activeReferenceThumbnail, className: "h-full aspect-square object-cover" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[10px] text-white/60 font-bold uppercase tracking-wide px-1", children: "Ref" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: clearReference, className: "w-6 h-full flex items-center justify-center text-white/30 hover:text-white/80 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { onClick: handleSelectReference, className: "flex items-center gap-1 h-7 px-2 rounded-lg border border-white/10 text-white/30 hover:text-white/60 hover:border-white/20 transition-colors text-[10px] font-bold uppercase tracking-wide", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "add_photo_alternate" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Ref" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
-        !isPromptCollapsed && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("textarea", { value: activePrompt, onChange: (e) => setActivePrompt(e.target.value), className: "w-full bg-transparent border-none outline-none text-[12px] leading-relaxed text-white/80 resize-none h-20 dark-scrollbar", placeholder: "W\xE4hle einen Knoten oder tippe einen Prompt..." }),
-          activePrompt && !isSynthesizing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors text-white/20 hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
+        !isPromptCollapsed && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("textarea", { value: activePrompt, onChange: (e) => setActivePrompt(e.target.value), className: "w-full bg-transparent border-none outline-none text-[12px] leading-relaxed text-white/80 resize-none h-20 dark-scrollbar", placeholder: "W\xE4hle einen Knoten oder tippe einen Prompt..." }),
+          activePrompt && !isSynthesizing && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors text-white/20 hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
         ] }) }),
-        middlePanel === "labs" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LabsTab, { services: labServices, onResult: (item) => {
+        middlePanel === "labs" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LabsTab, { services: labServices, onResult: (item) => {
           const frame = item.frames[0];
           if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
-        } }) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "h-full w-full max-w-4xl aspect-square rounded-3xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center group shadow-2xl", children: [
-          isGenerating && currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute top-6 right-6 z-30 bg-black/60 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
+        } }) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "h-full w-full max-w-4xl aspect-square rounded-3xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center group shadow-2xl", children: [
+          isGenerating && currentResult?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "absolute top-6 right-6 z-30 bg-black/60 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
           ] }),
-          currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
-          ] }) : currentResult.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
+          currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
+          ] }) : currentResult.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "h-full w-full relative flex items-center justify-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute bottom-6 flex gap-2 opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0 z-20", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "h-full w-full relative flex items-center justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "absolute bottom-6 flex gap-2 opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0 z-20", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
             ] })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
           ] })
         ] }) })
       ] })
     ] }),
-    !isRightCollapsed && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { onMouseDown: startRightResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", style: { width: isRightCollapsed ? 60 : rightPanelWidth, transition: "none" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-1", children: ["history", "gallery", "inspect", "setup", "sync", "tags"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => {
+    !isRightCollapsed && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { onMouseDown: startRightResize, className: "w-1 shrink-0 cursor-col-resize hover:bg-white/20 active:bg-white/30 transition-colors", style: { background: "transparent" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", style: { width: isRightCollapsed ? 60 : rightPanelWidth, transition: "none" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-1", children: ["history", "gallery", "inspect", "setup", "sync", "tags"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => {
           setActiveTab(tab);
           setIsRightCollapsed(false);
-        }, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : tab === "setup" ? "settings" : tab === "sync" ? "cloud_sync" : "label" }) }, tab)) }),
-        hfToken && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => loadFromHF(hfToken), disabled: isHfRefreshing, className: "w-10 flex items-center justify-center text-white/20 hover:text-white/60 transition-colors disabled:opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
+        }, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : tab === "setup" ? "settings" : tab === "sync" ? "cloud_sync" : "label" }) }, tab)) }),
+        hfToken && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => refreshHF(), disabled: isHfRefreshing, className: "w-10 flex items-center justify-center text-white/20 hover:text-white/60 transition-colors disabled:opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
       ] }),
-      !isRightCollapsed && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
-        activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      !isRightCollapsed && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 overflow-hidden relative", children: [
+        activeTab === "tags" && workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           TagManagerPanel,
           {
             workspaceTags,
@@ -4904,12 +5834,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             onTagMove: handleTagMove
           }
         ),
-        activeTab === "tags" && !workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
+        activeTab === "tags" && !workspaceTags && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center justify-center h-full p-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "material-symbols-outlined text-[40px] text-white/10 block mb-3", children: "label_off" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[11px] text-white/20", children: "Erst Workspace importieren um Tags zu verwalten." })
         ] }) }),
-        activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
-        activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
+        activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           MediaLibrary,
           {
             items: galleryItems,
@@ -4923,11 +5853,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             onGenerateReference: (item) => handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true })
           }
         ),
-        activeTab === "inspect" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
-        activeTab === "setup" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
-        activeTab === "sync" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        activeTab === "inspect" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
+        activeTab === "setup" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
+        activeTab === "sync" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           ProjectSyncTab,
           {
+            topSlot: syncTopSlot,
             onProjectExport: handleProjectExport,
             onProjectImport: (f) => handleProjectImport(f),
             onWorkspaceImport: handleWorkspaceImport,
@@ -4954,7 +5885,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/components/FaApp.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function FaApp({
   onGenerateImage,
   onGeneratePrompt,
@@ -4965,17 +5897,27 @@ function FaApp({
   onFlowUpload: _onFlowUpload,
   onFlowMediaUpload: _onFlowMediaUpload,
   libToken,
+  allowDevNamespace,
+  serverBaseUrl,
   onFetchServerProjects,
   onServerSave,
   onServerLoad,
   onServerDelete,
   buildInfo
 }) {
+  const [hfNamespace, setHfNamespace] = (0, import_react24.useState)(void 0);
+  (0, import_react24.useEffect)(() => {
+    if (!serverBaseUrl) return;
+    fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
+      if (typeof d.hfNamespace === "string") setHfNamespace(d.hfNamespace);
+    }).catch(() => {
+    });
+  }, [serverBaseUrl]);
   const wrappedPrompt = async (text, options) => {
     const result = await onGeneratePrompt(text, options);
     return result.text;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     AvatarArchitectApp,
     {
       onGenerateImage,
@@ -4983,6 +5925,8 @@ function FaApp({
       onDownload,
       onSelectMedia,
       initialHfToken: libToken ? libToken.startsWith("hf_") ? libToken : `hf_${libToken}` : void 0,
+      hfNamespace,
+      allowDevNamespace: !hfNamespace && allowDevNamespace,
       onFetchServerProjects,
       onServerSave,
       onServerLoad,
@@ -4994,7 +5938,8 @@ function FaApp({
 
 // src/index.ts
 init_hfStateService();
-var LIB_VERSION = "1.3.18";
+init_hfStateService();
+var LIB_VERSION = "2.0.13";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarArchitectApp,
@@ -5020,9 +5965,12 @@ var LIB_VERSION = "1.3.18";
   SectionLabel,
   SetupPanel,
   TagManagerPanel,
+  applyEvent,
+  applyEvents,
   autoLabel,
   buildBlendInstruction,
   buildCompareInstruction,
+  buildDag,
   buildFallbackPrompt,
   buildGenerationPrompt,
   buildImageGenerationOptions,
@@ -5034,27 +5982,36 @@ var LIB_VERSION = "1.3.18";
   cleanAiResponse,
   createFlowServices,
   exportProjectToZip,
+  findForks,
+  findTips,
   formatTreeToMarkdown,
   frameToGeneration,
   getFormattedTimestamp,
   getHFToken,
+  getSessionClientId,
   groupGenerationsToLabItems,
+  hfBatchArchive,
+  hfBootstrapFromLegacy,
   hfDeleteProject,
   hfDownloadProject,
+  hfListDir,
   hfListProjects,
   hfLoadImageAsBase64,
-  hfLoadMetadata,
-  hfLoadTags,
-  hfSaveMetadata,
-  hfSaveTags,
   hfUploadImage,
   hfUploadProjectForm,
+  hfUploadSmallFile,
   importProjectFromZip,
   injectXMPMetadata,
   interpretSdkError,
+  loadHFState,
+  loadPendingEvents,
   parsePromptFile,
   parsePromptResponse,
   setHFToken,
+  topoSort,
+  tsFromEventPath,
+  useHFState,
   useKeyboardNavigation,
-  useOnClickOutside
+  useOnClickOutside,
+  writeHFEvent
 });