@rslsp1/fa-app-tools 0.1.12 → 0.1.13

package/dist/index.d.mts

@@ -122,7 +122,7 @@ interface InspectPanelProps {
     currentResult: Generation | null;
     history: Generation[];
     onSelect: (gen: Generation) => void;
-    workspaceTags: WorkspaceTags | null;
+    workspaceTags?: WorkspaceTags | null;
     onTagToggle?: (tagName: string) => void;
 }
 declare const InspectPanel: React.FC<InspectPanelProps>;
@@ -160,10 +160,27 @@ interface ListViewProps {
     onFocus: (id: string | null) => void;
     activePath: Set<string>;
     onGenerate: (id: string) => void;
-    onGenerateBranch: (id: string) => void;
-    onGenerateSubtree: (id: string) => void;
+    onGenerateBranch?: (id: string) => void;
+    onGenerateSubtree?: (id: string) => void;
     isGeneratingNodeId: (id: string) => boolean;
 }
 declare function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMoveNode, onIndentNode, onOutdentNode, onAddSibling, focusedNodeId, onFocus, activePath, onGenerate, onGenerateBranch, onGenerateSubtree, isGeneratingNodeId }: ListViewProps): react_jsx_runtime.JSX.Element;
 
-export { CompactDropdown, type ExtractedCharacter, FaToolsBadge, GLOBAL_STYLES, type Generation, HistoryPanel, InspectPanel, ListView, MediaLibrary, PillButton, type ProjectSettings, SectionLabel, SetupPanel, type WorkspaceTags, exportProjectToZip, formatTreeToMarkdown, getFormattedTimestamp, importProjectFromZip, injectXMPMetadata, parsePromptFile, useKeyboardNavigation, useOnClickOutside };
+interface MediaItem {
+    base64: string;
+    mimeType: string;
+    mediaId?: string;
+    name?: string;
+}
+interface AvatarArchitectAppProps {
+    onGenerateImage: (prompt: string, aspectRatio: string, model: string, referenceId?: string) => Promise<{
+        base64: string;
+        mediaId?: string;
+    }>;
+    onGeneratePrompt: (treeText: string) => Promise<string>;
+    onDownload: (base64: string, mimeType: string, filename: string) => Promise<void>;
+    onSelectMedia: () => Promise<MediaItem[]>;
+}
+declare function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia }: AvatarArchitectAppProps): react_jsx_runtime.JSX.Element;
+
+export { AvatarArchitectApp, type AvatarArchitectAppProps, CompactDropdown, type ExtractedCharacter, FaToolsBadge, GLOBAL_STYLES, type Generation, HistoryPanel, InspectPanel, ListView, type MediaItem, MediaLibrary, PillButton, type ProjectSettings, SectionLabel, SetupPanel, type WorkspaceTags, exportProjectToZip, formatTreeToMarkdown, getFormattedTimestamp, importProjectFromZip, injectXMPMetadata, parsePromptFile, useKeyboardNavigation, useOnClickOutside };

package/dist/index.d.ts

@@ -122,7 +122,7 @@ interface InspectPanelProps {
     currentResult: Generation | null;
     history: Generation[];
     onSelect: (gen: Generation) => void;
-    workspaceTags: WorkspaceTags | null;
+    workspaceTags?: WorkspaceTags | null;
     onTagToggle?: (tagName: string) => void;
 }
 declare const InspectPanel: React.FC<InspectPanelProps>;
@@ -160,10 +160,27 @@ interface ListViewProps {
     onFocus: (id: string | null) => void;
     activePath: Set<string>;
     onGenerate: (id: string) => void;
-    onGenerateBranch: (id: string) => void;
-    onGenerateSubtree: (id: string) => void;
+    onGenerateBranch?: (id: string) => void;
+    onGenerateSubtree?: (id: string) => void;
     isGeneratingNodeId: (id: string) => boolean;
 }
 declare function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMoveNode, onIndentNode, onOutdentNode, onAddSibling, focusedNodeId, onFocus, activePath, onGenerate, onGenerateBranch, onGenerateSubtree, isGeneratingNodeId }: ListViewProps): react_jsx_runtime.JSX.Element;
 
-export { CompactDropdown, type ExtractedCharacter, FaToolsBadge, GLOBAL_STYLES, type Generation, HistoryPanel, InspectPanel, ListView, MediaLibrary, PillButton, type ProjectSettings, SectionLabel, SetupPanel, type WorkspaceTags, exportProjectToZip, formatTreeToMarkdown, getFormattedTimestamp, importProjectFromZip, injectXMPMetadata, parsePromptFile, useKeyboardNavigation, useOnClickOutside };
+interface MediaItem {
+    base64: string;
+    mimeType: string;
+    mediaId?: string;
+    name?: string;
+}
+interface AvatarArchitectAppProps {
+    onGenerateImage: (prompt: string, aspectRatio: string, model: string, referenceId?: string) => Promise<{
+        base64: string;
+        mediaId?: string;
+    }>;
+    onGeneratePrompt: (treeText: string) => Promise<string>;
+    onDownload: (base64: string, mimeType: string, filename: string) => Promise<void>;
+    onSelectMedia: () => Promise<MediaItem[]>;
+}
+declare function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia }: AvatarArchitectAppProps): react_jsx_runtime.JSX.Element;
+
+export { AvatarArchitectApp, type AvatarArchitectAppProps, CompactDropdown, type ExtractedCharacter, FaToolsBadge, GLOBAL_STYLES, type Generation, HistoryPanel, InspectPanel, ListView, type MediaItem, MediaLibrary, PillButton, type ProjectSettings, SectionLabel, SetupPanel, type WorkspaceTags, exportProjectToZip, formatTreeToMarkdown, getFormattedTimestamp, importProjectFromZip, injectXMPMetadata, parsePromptFile, useKeyboardNavigation, useOnClickOutside };

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AvatarArchitectApp: () => AvatarArchitectApp,
   CompactDropdown: () => CompactDropdown,
   FaToolsBadge: () => FaToolsBadge,
   GLOBAL_STYLES: () => GLOBAL_STYLES,
@@ -764,8 +765,312 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
     if (e.target === e.currentTarget) onFocus(null);
   }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-full flex flex-col", children: roots.map((root) => renderNode(root, 0)) }) });
 }
+
+// src/components/AvatarArchitectApp.tsx
+var import_react10 = require("react");
+var import_react11 = require("motion/react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia }) {
+  (0, import_react10.useEffect)(() => {
+    const id = "flow-styles";
+    if (!document.getElementById(id)) {
+      const style = document.createElement("style");
+      style.id = id;
+      style.textContent = GLOBAL_STYLES;
+      document.head.appendChild(style);
+    }
+  }, []);
+  const [nodes, setNodes] = (0, import_react10.useState)([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
+  const [edges, setEdges] = (0, import_react10.useState)([]);
+  const [history, setHistory] = (0, import_react10.useState)([]);
+  const [galleryItems, setGalleryItems] = (0, import_react10.useState)([]);
+  const [activePrompt, setActivePrompt] = (0, import_react10.useState)("");
+  const [isSynthesizing, setIsSynthesizing] = (0, import_react10.useState)(false);
+  const [activeGenerationsCount, setActiveGenerationsCount] = (0, import_react10.useState)(0);
+  const [currentResult, setCurrentResult] = (0, import_react10.useState)(null);
+  const [focusedNodeId, setFocusedNodeId] = (0, import_react10.useState)(null);
+  const [activeTab, setActiveTab] = (0, import_react10.useState)("history");
+  const [aspectRatio, setAspectRatio] = (0, import_react10.useState)("1:1");
+  const [selectedModel, setSelectedModel] = (0, import_react10.useState)("\u{1F34C} Nano Banana Pro");
+  const [seed, setSeed] = (0, import_react10.useState)(Math.floor(Math.random() * 1e6));
+  const [seedMode, setSeedMode] = (0, import_react10.useState)("random");
+  const [isLeftCollapsed, setIsLeftCollapsed] = (0, import_react10.useState)(false);
+  const [isRightCollapsed, setIsRightCollapsed] = (0, import_react10.useState)(false);
+  const [isPromptCollapsed, setIsPromptCollapsed] = (0, import_react10.useState)(false);
+  const [projectActionState, setProjectActionState] = (0, import_react10.useState)("idle");
+  const isGenerating = activeGenerationsCount > 0;
+  useKeyboardNavigation(history, currentResult, setCurrentResult);
+  const getSubtreeFormat = (0, import_react10.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);
+    const indent = "  ".repeat(depth);
+    return `${indent}- ${node.data.label || "(unbenannt)"}
+` + childrenIds.map((id) => getSubtreeFormat(id, depth + 1)).join("");
+  }, [nodes, edges]);
+  const activePath = (0, import_react10.useMemo)(() => {
+    if (!focusedNodeId) return /* @__PURE__ */ new Set();
+    const path = /* @__PURE__ */ new Set([focusedNodeId]);
+    let currId = focusedNodeId;
+    const parentMap = /* @__PURE__ */ new Map();
+    edges.forEach((e) => parentMap.set(e.target, e.source));
+    while (parentMap.has(currId)) {
+      currId = parentMap.get(currId);
+      path.add(currId);
+    }
+    return path;
+  }, [focusedNodeId, edges]);
+  const handleGenerateImage = async (customPrompt, useReferenceId, overrideNodeId, options = { silent: false }) => {
+    const promptToUse = (customPrompt || activePrompt).trim();
+    if (!promptToUse) return;
+    setActiveGenerationsCount((prev) => prev + 1);
+    const genId = crypto.randomUUID();
+    const activeSeed = seedMode === "random" ? Math.floor(Math.random() * 1e9) : seed;
+    const newGen = {
+      id: genId,
+      nodeId: overrideNodeId || focusedNodeId || "1",
+      status: "processing",
+      timestamp: Date.now(),
+      prompt: promptToUse,
+      seed: activeSeed,
+      model: selectedModel,
+      tags: [],
+      type: "generation"
+    };
+    setHistory((prev) => [newGen, ...prev]);
+    if (!options.silent) setCurrentResult(newGen);
+    if (seedMode === "random") setSeed(activeSeed);
+    try {
+      const { base64, mediaId } = await onGenerateImage(promptToUse, aspectRatio, selectedModel, useReferenceId);
+      const finishedGen = { ...newGen, status: "done", base64: `data:image/png;base64,${base64}`, mediaId };
+      setHistory((prev) => prev.map((g) => g.id === genId ? finishedGen : g));
+      setGalleryItems((prev) => [finishedGen, ...prev]);
+      setCurrentResult((prev) => {
+        if (!prev) return finishedGen;
+        if (prev.id === genId || !options.silent) return finishedGen;
+        return prev;
+      });
+    } catch (err) {
+      const errorGen = { ...newGen, status: "error", error: { message: err.message || "Unbekannter Fehler", details: err.toString() } };
+      setHistory((prev) => prev.map((g) => g.id === genId ? errorGen : g));
+      if (!options.silent || currentResult?.id === genId) setCurrentResult(errorGen);
+    } finally {
+      setActiveGenerationsCount((prev) => Math.max(0, prev - 1));
+    }
+  };
+  const handleSynthesizePrompt = async (nodeId, autoGenerate = false) => {
+    setIsSynthesizing(true);
+    try {
+      const prompt = await onGeneratePrompt(getSubtreeFormat(nodeId));
+      setActivePrompt(prompt);
+      setFocusedNodeId(nodeId);
+      if (autoGenerate) handleGenerateImage(prompt, void 0, nodeId);
+    } catch {
+      setActivePrompt("Synthese-Fehler");
+    } finally {
+      setIsSynthesizing(false);
+    }
+  };
+  const handleDownloadSingle = async () => {
+    if (!currentResult?.base64) return;
+    try {
+      const base64Data = currentResult.base64.split(",")[1];
+      const mimeType = currentResult.base64.split(";")[0].split(":")[1] || "image/png";
+      let finalBase64 = base64Data;
+      if (mimeType === "image/png") {
+        finalBase64 = injectXMPMetadata(base64Data, currentResult.prompt || "", currentResult.seed, currentResult.model, currentResult.id, currentResult.tags || [], getSubtreeFormat(currentResult.nodeId));
+      }
+      await onDownload(finalBase64, mimeType, `avatar_${currentResult.id.slice(0, 5)}.${mimeType.split("/")[1]}`);
+    } catch (e) {
+      console.error("Download Error", e);
+    }
+  };
+  const handleProjectExport = async () => {
+    setProjectActionState("working-full");
+    try {
+      const { base64 } = await exportProjectToZip(nodes, edges, history, galleryItems, { aspectRatio, selectedModel, seed, seedMode });
+      await onDownload(base64, "application/zip", `avatar_project_${getFormattedTimestamp()}.zip`);
+      setProjectActionState("done");
+      setTimeout(() => setProjectActionState("idle"), 3e3);
+    } catch {
+      setProjectActionState("error");
+    }
+  };
+  const handleProjectImport = async (input) => {
+    const file = input instanceof FileList ? input[0] : input;
+    if (!file) return;
+    setProjectActionState("working-full");
+    try {
+      const data = await importProjectFromZip(file);
+      if (data.nodes) setNodes(data.nodes);
+      if (data.edges) setEdges(data.edges);
+      if (data.history) setHistory(data.history);
+      if (data.galleryItems) setGalleryItems(data.galleryItems);
+      if (data.settings) {
+        setAspectRatio(data.settings.aspectRatio || "1:1");
+        setSelectedModel(data.settings.selectedModel || "\u{1F34C} Nano Banana Pro");
+        setSeed(data.settings.seed || 0);
+        setSeedMode(data.settings.seedMode || "random");
+      }
+      setProjectActionState("done");
+      setTimeout(() => setProjectActionState("idle"), 2e3);
+    } catch {
+      setProjectActionState("error");
+      setTimeout(() => setProjectActionState("idle"), 4e3);
+    }
+  };
+  const handleWorkspaceImport = (file) => {
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      try {
+        const root = JSON.parse(ev.target?.result);
+        const rawTags = root.tags || root;
+        if (!rawTags?.by_category) return;
+      } catch (err) {
+        console.error("Workspace Load failed", err);
+      }
+    };
+    reader.readAsText(file);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react11.motion.div, { animate: { width: isLeftCollapsed ? 48 : 260 }, className: "flex flex-col border-r border-white/5 overflow-hidden relative bg-black/10 shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "h-14 px-4 border-b border-white/5 flex items-center justify-between shrink-0", children: [
+        !isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] font-bold uppercase text-white/40", children: "Hierarchie" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: () => setIsLeftCollapsed(!isLeftCollapsed), className: "material-symbols-outlined text-[18px] text-white/40 hover:text-white transition-all", children: isLeftCollapsed ? "chevron_right" : "chevron_left" })
+      ] }),
+      !isLeftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        ListView,
+        {
+          nodes,
+          edges,
+          onNodeChange: (id, l) => setNodes((nds) => nds.map((n) => n.id === id ? { ...n, data: { ...n.data, label: l } } : n)),
+          onAddChild: (pId) => {
+            const newId = crypto.randomUUID();
+            setNodes((nds) => [...nds, { id: newId, type: "custom", position: { x: 0, y: 0 }, data: { label: "", placeholder: "Konzept..." } }]);
+            setEdges((eds) => [...eds, { id: `e-${pId}-${newId}`, source: pId, target: newId }]);
+            setFocusedNodeId(newId);
+            return newId;
+          },
+          onDeleteNode: (id) => {
+            setNodes((nds) => nds.filter((n) => n.id !== id));
+            setEdges((eds) => eds.filter((e) => e.source !== id && e.target !== id));
+          },
+          onFocus: setFocusedNodeId,
+          focusedNodeId,
+          activePath,
+          onGenerate: handleSynthesizePrompt,
+          onGenerateBranch: (id) => handleSynthesizePrompt(id, true),
+          isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.AnimatePresence, { children: !isPromptCollapsed && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.motion.div, { initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 }, className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.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_runtime10.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
+        ] }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.jsx)("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
+          ] }),
+          currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
+          ] }) : currentResult.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "h-full w-full relative flex items-center justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
+            ] })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
+          ] })
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react11.motion.div, { animate: { width: isRightCollapsed ? 60 : 320 }, className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-1", children: ["history", "gallery", "inspect", "setup"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : "settings" }) }, tab)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
+      ] }),
+      !isRightCollapsed && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react11.AnimatePresence, { mode: "wait", children: [
+        activeTab === "history" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }, "history"),
+        activeTab === "gallery" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          MediaLibrary,
+          {
+            items: galleryItems,
+            onImport: async () => {
+              const media = await onSelectMedia();
+              if (!media?.length) return;
+              const newItems = media.map((m) => ({
+                id: crypto.randomUUID(),
+                nodeId: "1",
+                base64: `data:${m.mimeType};base64,${m.base64}`,
+                mediaId: m.mediaId,
+                prompt: m.name || "Importiert",
+                timestamp: Date.now(),
+                status: "done",
+                tags: [],
+                type: "import"
+              }));
+              setGalleryItems((prev) => [...newItems, ...prev]);
+            },
+            onDelete: (id) => setGalleryItems((g) => g.filter((x) => x.id !== id)),
+            onSelect: setCurrentResult,
+            onGenerateReference: (item) => handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true })
+          },
+          "gallery"
+        ),
+        activeTab === "inspect" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InspectPanel, { currentResult, history, onSelect: setCurrentResult }, "inspect"),
+        activeTab === "setup" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          SetupPanel,
+          {
+            onProjectExport: handleProjectExport,
+            onProjectImport: handleProjectImport,
+            onWorkspaceImport: handleWorkspaceImport,
+            projectActionState
+          },
+          "setup"
+        )
+      ] }) })
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AvatarArchitectApp,
   CompactDropdown,
   FaToolsBadge,
   GLOBAL_STYLES,

package/dist/index.mjs

@@ -711,7 +711,311 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
     if (e.target === e.currentTarget) onFocus(null);
   }, children: /* @__PURE__ */ jsx9("div", { className: "w-full flex flex-col", children: roots.map((root) => renderNode(root, 0)) }) });
 }
+
+// src/components/AvatarArchitectApp.tsx
+import { useState as useState3, useCallback, useMemo, useEffect as useEffect4 } from "react";
+import { motion as motion5, AnimatePresence } from "motion/react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia }) {
+  useEffect4(() => {
+    const id = "flow-styles";
+    if (!document.getElementById(id)) {
+      const style = document.createElement("style");
+      style.id = id;
+      style.textContent = GLOBAL_STYLES;
+      document.head.appendChild(style);
+    }
+  }, []);
+  const [nodes, setNodes] = useState3([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
+  const [edges, setEdges] = useState3([]);
+  const [history, setHistory] = useState3([]);
+  const [galleryItems, setGalleryItems] = useState3([]);
+  const [activePrompt, setActivePrompt] = useState3("");
+  const [isSynthesizing, setIsSynthesizing] = useState3(false);
+  const [activeGenerationsCount, setActiveGenerationsCount] = useState3(0);
+  const [currentResult, setCurrentResult] = useState3(null);
+  const [focusedNodeId, setFocusedNodeId] = useState3(null);
+  const [activeTab, setActiveTab] = useState3("history");
+  const [aspectRatio, setAspectRatio] = useState3("1:1");
+  const [selectedModel, setSelectedModel] = useState3("\u{1F34C} Nano Banana Pro");
+  const [seed, setSeed] = useState3(Math.floor(Math.random() * 1e6));
+  const [seedMode, setSeedMode] = useState3("random");
+  const [isLeftCollapsed, setIsLeftCollapsed] = useState3(false);
+  const [isRightCollapsed, setIsRightCollapsed] = useState3(false);
+  const [isPromptCollapsed, setIsPromptCollapsed] = useState3(false);
+  const [projectActionState, setProjectActionState] = useState3("idle");
+  const isGenerating = activeGenerationsCount > 0;
+  useKeyboardNavigation(history, currentResult, setCurrentResult);
+  const getSubtreeFormat = 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);
+    const indent = "  ".repeat(depth);
+    return `${indent}- ${node.data.label || "(unbenannt)"}
+` + childrenIds.map((id) => getSubtreeFormat(id, depth + 1)).join("");
+  }, [nodes, edges]);
+  const activePath = useMemo(() => {
+    if (!focusedNodeId) return /* @__PURE__ */ new Set();
+    const path = /* @__PURE__ */ new Set([focusedNodeId]);
+    let currId = focusedNodeId;
+    const parentMap = /* @__PURE__ */ new Map();
+    edges.forEach((e) => parentMap.set(e.target, e.source));
+    while (parentMap.has(currId)) {
+      currId = parentMap.get(currId);
+      path.add(currId);
+    }
+    return path;
+  }, [focusedNodeId, edges]);
+  const handleGenerateImage = async (customPrompt, useReferenceId, overrideNodeId, options = { silent: false }) => {
+    const promptToUse = (customPrompt || activePrompt).trim();
+    if (!promptToUse) return;
+    setActiveGenerationsCount((prev) => prev + 1);
+    const genId = crypto.randomUUID();
+    const activeSeed = seedMode === "random" ? Math.floor(Math.random() * 1e9) : seed;
+    const newGen = {
+      id: genId,
+      nodeId: overrideNodeId || focusedNodeId || "1",
+      status: "processing",
+      timestamp: Date.now(),
+      prompt: promptToUse,
+      seed: activeSeed,
+      model: selectedModel,
+      tags: [],
+      type: "generation"
+    };
+    setHistory((prev) => [newGen, ...prev]);
+    if (!options.silent) setCurrentResult(newGen);
+    if (seedMode === "random") setSeed(activeSeed);
+    try {
+      const { base64, mediaId } = await onGenerateImage(promptToUse, aspectRatio, selectedModel, useReferenceId);
+      const finishedGen = { ...newGen, status: "done", base64: `data:image/png;base64,${base64}`, mediaId };
+      setHistory((prev) => prev.map((g) => g.id === genId ? finishedGen : g));
+      setGalleryItems((prev) => [finishedGen, ...prev]);
+      setCurrentResult((prev) => {
+        if (!prev) return finishedGen;
+        if (prev.id === genId || !options.silent) return finishedGen;
+        return prev;
+      });
+    } catch (err) {
+      const errorGen = { ...newGen, status: "error", error: { message: err.message || "Unbekannter Fehler", details: err.toString() } };
+      setHistory((prev) => prev.map((g) => g.id === genId ? errorGen : g));
+      if (!options.silent || currentResult?.id === genId) setCurrentResult(errorGen);
+    } finally {
+      setActiveGenerationsCount((prev) => Math.max(0, prev - 1));
+    }
+  };
+  const handleSynthesizePrompt = async (nodeId, autoGenerate = false) => {
+    setIsSynthesizing(true);
+    try {
+      const prompt = await onGeneratePrompt(getSubtreeFormat(nodeId));
+      setActivePrompt(prompt);
+      setFocusedNodeId(nodeId);
+      if (autoGenerate) handleGenerateImage(prompt, void 0, nodeId);
+    } catch {
+      setActivePrompt("Synthese-Fehler");
+    } finally {
+      setIsSynthesizing(false);
+    }
+  };
+  const handleDownloadSingle = async () => {
+    if (!currentResult?.base64) return;
+    try {
+      const base64Data = currentResult.base64.split(",")[1];
+      const mimeType = currentResult.base64.split(";")[0].split(":")[1] || "image/png";
+      let finalBase64 = base64Data;
+      if (mimeType === "image/png") {
+        finalBase64 = injectXMPMetadata(base64Data, currentResult.prompt || "", currentResult.seed, currentResult.model, currentResult.id, currentResult.tags || [], getSubtreeFormat(currentResult.nodeId));
+      }
+      await onDownload(finalBase64, mimeType, `avatar_${currentResult.id.slice(0, 5)}.${mimeType.split("/")[1]}`);
+    } catch (e) {
+      console.error("Download Error", e);
+    }
+  };
+  const handleProjectExport = async () => {
+    setProjectActionState("working-full");
+    try {
+      const { base64 } = await exportProjectToZip(nodes, edges, history, galleryItems, { aspectRatio, selectedModel, seed, seedMode });
+      await onDownload(base64, "application/zip", `avatar_project_${getFormattedTimestamp()}.zip`);
+      setProjectActionState("done");
+      setTimeout(() => setProjectActionState("idle"), 3e3);
+    } catch {
+      setProjectActionState("error");
+    }
+  };
+  const handleProjectImport = async (input) => {
+    const file = input instanceof FileList ? input[0] : input;
+    if (!file) return;
+    setProjectActionState("working-full");
+    try {
+      const data = await importProjectFromZip(file);
+      if (data.nodes) setNodes(data.nodes);
+      if (data.edges) setEdges(data.edges);
+      if (data.history) setHistory(data.history);
+      if (data.galleryItems) setGalleryItems(data.galleryItems);
+      if (data.settings) {
+        setAspectRatio(data.settings.aspectRatio || "1:1");
+        setSelectedModel(data.settings.selectedModel || "\u{1F34C} Nano Banana Pro");
+        setSeed(data.settings.seed || 0);
+        setSeedMode(data.settings.seedMode || "random");
+      }
+      setProjectActionState("done");
+      setTimeout(() => setProjectActionState("idle"), 2e3);
+    } catch {
+      setProjectActionState("error");
+      setTimeout(() => setProjectActionState("idle"), 4e3);
+    }
+  };
+  const handleWorkspaceImport = (file) => {
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      try {
+        const root = JSON.parse(ev.target?.result);
+        const rawTags = root.tags || root;
+        if (!rawTags?.by_category) return;
+      } catch (err) {
+        console.error("Workspace Load failed", err);
+      }
+    };
+    reader.readAsText(file);
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", children: [
+    /* @__PURE__ */ jsxs8(motion5.div, { animate: { width: isLeftCollapsed ? 48 : 260 }, className: "flex flex-col border-r border-white/5 overflow-hidden relative bg-black/10 shrink-0", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "h-14 px-4 border-b border-white/5 flex items-center justify-between shrink-0", children: [
+        !isLeftCollapsed && /* @__PURE__ */ jsx10("span", { className: "text-[10px] font-bold uppercase text-white/40", children: "Hierarchie" }),
+        /* @__PURE__ */ jsx10("button", { onClick: () => setIsLeftCollapsed(!isLeftCollapsed), className: "material-symbols-outlined text-[18px] text-white/40 hover:text-white transition-all", children: isLeftCollapsed ? "chevron_right" : "chevron_left" })
+      ] }),
+      !isLeftCollapsed && /* @__PURE__ */ jsx10(
+        ListView,
+        {
+          nodes,
+          edges,
+          onNodeChange: (id, l) => setNodes((nds) => nds.map((n) => n.id === id ? { ...n, data: { ...n.data, label: l } } : n)),
+          onAddChild: (pId) => {
+            const newId = crypto.randomUUID();
+            setNodes((nds) => [...nds, { id: newId, type: "custom", position: { x: 0, y: 0 }, data: { label: "", placeholder: "Konzept..." } }]);
+            setEdges((eds) => [...eds, { id: `e-${pId}-${newId}`, source: pId, target: newId }]);
+            setFocusedNodeId(newId);
+            return newId;
+          },
+          onDeleteNode: (id) => {
+            setNodes((nds) => nds.filter((n) => n.id !== id));
+            setEdges((eds) => eds.filter((e) => e.source !== id && e.target !== id));
+          },
+          onFocus: setFocusedNodeId,
+          focusedNodeId,
+          activePath,
+          onGenerate: handleSynthesizePrompt,
+          onGenerateBranch: (id) => handleSynthesizePrompt(id, true),
+          isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
+      /* @__PURE__ */ jsxs8("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__ */ jsxs8("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx10(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__ */ jsx10(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__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx10("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx10("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
+          /* @__PURE__ */ jsx10(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
+        /* @__PURE__ */ jsx10(AnimatePresence, { children: !isPromptCollapsed && /* @__PURE__ */ jsx10(motion5.div, { initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 }, className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ jsxs8("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
+          /* @__PURE__ */ jsx10(
+            "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__ */ jsx10("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__ */ jsx10("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
+        ] }) }) }),
+        /* @__PURE__ */ jsx10("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ jsxs8("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__ */ jsxs8("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__ */ jsx10("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx10("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
+          ] }),
+          currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-center gap-4", children: [
+            /* @__PURE__ */ jsx10("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx10("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
+          ] }) : currentResult.status === "error" ? /* @__PURE__ */ jsxs8("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
+            /* @__PURE__ */ jsx10("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx10("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
+            /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx10("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
+              /* @__PURE__ */ jsx10("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
+            ] }),
+            /* @__PURE__ */ jsx10(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
+          ] }) : /* @__PURE__ */ jsxs8("div", { className: "h-full w-full relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx10("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
+            /* @__PURE__ */ jsxs8("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__ */ jsx10(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
+              /* @__PURE__ */ jsx10(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
+              /* @__PURE__ */ jsx10(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
+            /* @__PURE__ */ jsx10("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
+            /* @__PURE__ */ jsx10("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
+          ] })
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs8(motion5.div, { animate: { width: isRightCollapsed ? 60 : 320 }, className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
+        /* @__PURE__ */ jsx10("div", { className: "flex flex-1", children: ["history", "gallery", "inspect", "setup"].map((tab) => /* @__PURE__ */ jsx10("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__ */ jsx10("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : "settings" }) }, tab)) }),
+        /* @__PURE__ */ jsx10("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ jsx10("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
+      ] }),
+      !isRightCollapsed && /* @__PURE__ */ jsx10("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ jsxs8(AnimatePresence, { mode: "wait", children: [
+        activeTab === "history" && /* @__PURE__ */ jsx10(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }, "history"),
+        activeTab === "gallery" && /* @__PURE__ */ jsx10(
+          MediaLibrary,
+          {
+            items: galleryItems,
+            onImport: async () => {
+              const media = await onSelectMedia();
+              if (!media?.length) return;
+              const newItems = media.map((m) => ({
+                id: crypto.randomUUID(),
+                nodeId: "1",
+                base64: `data:${m.mimeType};base64,${m.base64}`,
+                mediaId: m.mediaId,
+                prompt: m.name || "Importiert",
+                timestamp: Date.now(),
+                status: "done",
+                tags: [],
+                type: "import"
+              }));
+              setGalleryItems((prev) => [...newItems, ...prev]);
+            },
+            onDelete: (id) => setGalleryItems((g) => g.filter((x) => x.id !== id)),
+            onSelect: setCurrentResult,
+            onGenerateReference: (item) => handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true })
+          },
+          "gallery"
+        ),
+        activeTab === "inspect" && /* @__PURE__ */ jsx10(InspectPanel, { currentResult, history, onSelect: setCurrentResult }, "inspect"),
+        activeTab === "setup" && /* @__PURE__ */ jsx10(
+          SetupPanel,
+          {
+            onProjectExport: handleProjectExport,
+            onProjectImport: handleProjectImport,
+            onWorkspaceImport: handleWorkspaceImport,
+            projectActionState
+          },
+          "setup"
+        )
+      ] }) })
+    ] })
+  ] });
+}
 export {
+  AvatarArchitectApp,
   CompactDropdown,
   FaToolsBadge,
   GLOBAL_STYLES,

package/package.json

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