@rslsp1/fa-app-tools 0.1.11 → 0.1.13

package/dist/index.d.mts

@@ -4,6 +4,57 @@ import { Node, Edge } from '@xyflow/react';
 
 declare function useOnClickOutside(ref: RefObject<HTMLElement | null>, handler: (e: MouseEvent | TouchEvent) => void): void;
 
+interface WorkspaceTags {
+    by_category: Record<string, string[]>;
+    all: Array<{
+        label: string;
+        value: string;
+        category: string;
+    }>;
+}
+interface Generation {
+    id: string;
+    nodeId: string;
+    base64?: string;
+    mediaId?: string;
+    prompt?: string;
+    hierarchy?: string;
+    seed?: number;
+    model?: string;
+    timestamp: number;
+    status: 'processing' | 'done' | 'error';
+    step?: string;
+    tags: string[];
+    type?: 'generation' | 'import';
+    error?: {
+        message: string;
+        details?: string;
+    };
+    selectedForExport?: boolean;
+}
+interface ProjectSettings {
+    aspectRatio: string;
+    selectedModel: string;
+    seed: number;
+    seedMode: 'random' | 'fixed';
+}
+
+/**
+ * Hook für die Tastaturnavigation im Detailview.
+ * Rechts = Index + 1 (älter), Links = Index - 1 (neuer).
+ */
+declare function useKeyboardNavigation(history: Generation[], currentResult: Generation | null, setCurrentResult: (gen: Generation) => void): void;
+
+/**
+ * Erstellt einen lesbaren Zeitstempel im Format YYYYMMDD_HHMMSS.
+ * Dies ist das vom User explizit gewünschte Format für Exporte.
+ */
+declare const getFormattedTimestamp: () => string;
+/**
+ * Hilfskonstante für CSS-Styles (Dark Scrollbar etc.)
+ */
+declare const GLOBAL_STYLES = "\n  .dark-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }\n  .dark-scrollbar::-webkit-scrollbar-track { background: transparent; }\n  .dark-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }\n  html, body, #root { margin: 0; padding: 0; width: 100%; height: 100%; background: #0e0e0e; font-family: 'Google Sans Text', sans-serif; overflow: hidden; }\n  @keyframes prompt-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }\n  .prompt-loading { background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 75%); background-size: 200% 100%; animation: prompt-shimmer 2s infinite linear; }\n  @keyframes dropdown-enter { from { opacity: 0; transform: scale(0.95) translateY(-5px); } to { opacity: 1; transform: scale(1) translateY(0); } }\n  .animate-dropdown { animation: dropdown-enter 0.1s ease-out forwards; }\n";
+
 declare function injectXMPMetadata(base64: string, prompt: string, seed?: number, model?: string, id?: string, tags?: string[], hierarchy?: string): string;
 
 /**
@@ -59,41 +110,6 @@ interface CompactDropdownProps {
 }
 declare const CompactDropdown: React.FC<CompactDropdownProps>;
 
-interface WorkspaceTags {
-    by_category: Record<string, string[]>;
-    all: Array<{
-        label: string;
-        value: string;
-        category: string;
-    }>;
-}
-interface Generation {
-    id: string;
-    nodeId: string;
-    base64?: string;
-    mediaId?: string;
-    prompt?: string;
-    hierarchy?: string;
-    seed?: number;
-    model?: string;
-    timestamp: number;
-    status: 'processing' | 'done' | 'error';
-    step?: string;
-    tags: string[];
-    type?: 'generation' | 'import';
-    error?: {
-        message: string;
-        details?: string;
-    };
-    selectedForExport?: boolean;
-}
-interface ProjectSettings {
-    aspectRatio: string;
-    selectedModel: string;
-    seed: number;
-    seedMode: 'random' | 'fixed';
-}
-
 interface HistoryPanelProps {
     history: Generation[];
     currentResultId: string | null;
@@ -106,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>;
@@ -144,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, type Generation, HistoryPanel, InspectPanel, ListView, MediaLibrary, PillButton, type ProjectSettings, SectionLabel, SetupPanel, type WorkspaceTags, exportProjectToZip, formatTreeToMarkdown, importProjectFromZip, injectXMPMetadata, parsePromptFile, 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

@@ -4,6 +4,57 @@ import { Node, Edge } from '@xyflow/react';
 
 declare function useOnClickOutside(ref: RefObject<HTMLElement | null>, handler: (e: MouseEvent | TouchEvent) => void): void;
 
+interface WorkspaceTags {
+    by_category: Record<string, string[]>;
+    all: Array<{
+        label: string;
+        value: string;
+        category: string;
+    }>;
+}
+interface Generation {
+    id: string;
+    nodeId: string;
+    base64?: string;
+    mediaId?: string;
+    prompt?: string;
+    hierarchy?: string;
+    seed?: number;
+    model?: string;
+    timestamp: number;
+    status: 'processing' | 'done' | 'error';
+    step?: string;
+    tags: string[];
+    type?: 'generation' | 'import';
+    error?: {
+        message: string;
+        details?: string;
+    };
+    selectedForExport?: boolean;
+}
+interface ProjectSettings {
+    aspectRatio: string;
+    selectedModel: string;
+    seed: number;
+    seedMode: 'random' | 'fixed';
+}
+
+/**
+ * Hook für die Tastaturnavigation im Detailview.
+ * Rechts = Index + 1 (älter), Links = Index - 1 (neuer).
+ */
+declare function useKeyboardNavigation(history: Generation[], currentResult: Generation | null, setCurrentResult: (gen: Generation) => void): void;
+
+/**
+ * Erstellt einen lesbaren Zeitstempel im Format YYYYMMDD_HHMMSS.
+ * Dies ist das vom User explizit gewünschte Format für Exporte.
+ */
+declare const getFormattedTimestamp: () => string;
+/**
+ * Hilfskonstante für CSS-Styles (Dark Scrollbar etc.)
+ */
+declare const GLOBAL_STYLES = "\n  .dark-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }\n  .dark-scrollbar::-webkit-scrollbar-track { background: transparent; }\n  .dark-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }\n  html, body, #root { margin: 0; padding: 0; width: 100%; height: 100%; background: #0e0e0e; font-family: 'Google Sans Text', sans-serif; overflow: hidden; }\n  @keyframes prompt-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }\n  .prompt-loading { background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 75%); background-size: 200% 100%; animation: prompt-shimmer 2s infinite linear; }\n  @keyframes dropdown-enter { from { opacity: 0; transform: scale(0.95) translateY(-5px); } to { opacity: 1; transform: scale(1) translateY(0); } }\n  .animate-dropdown { animation: dropdown-enter 0.1s ease-out forwards; }\n";
+
 declare function injectXMPMetadata(base64: string, prompt: string, seed?: number, model?: string, id?: string, tags?: string[], hierarchy?: string): string;
 
 /**
@@ -59,41 +110,6 @@ interface CompactDropdownProps {
 }
 declare const CompactDropdown: React.FC<CompactDropdownProps>;
 
-interface WorkspaceTags {
-    by_category: Record<string, string[]>;
-    all: Array<{
-        label: string;
-        value: string;
-        category: string;
-    }>;
-}
-interface Generation {
-    id: string;
-    nodeId: string;
-    base64?: string;
-    mediaId?: string;
-    prompt?: string;
-    hierarchy?: string;
-    seed?: number;
-    model?: string;
-    timestamp: number;
-    status: 'processing' | 'done' | 'error';
-    step?: string;
-    tags: string[];
-    type?: 'generation' | 'import';
-    error?: {
-        message: string;
-        details?: string;
-    };
-    selectedForExport?: boolean;
-}
-interface ProjectSettings {
-    aspectRatio: string;
-    selectedModel: string;
-    seed: number;
-    seedMode: 'random' | 'fixed';
-}
-
 interface HistoryPanelProps {
     history: Generation[];
     currentResultId: string | null;
@@ -106,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>;
@@ -144,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, type Generation, HistoryPanel, InspectPanel, ListView, MediaLibrary, PillButton, type ProjectSettings, SectionLabel, SetupPanel, type WorkspaceTags, exportProjectToZip, formatTreeToMarkdown, importProjectFromZip, injectXMPMetadata, parsePromptFile, 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,8 +30,10 @@ 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,
   HistoryPanel: () => HistoryPanel,
   InspectPanel: () => InspectPanel,
   ListView: () => ListView,
@@ -41,9 +43,11 @@ __export(index_exports, {
   SetupPanel: () => SetupPanel,
   exportProjectToZip: () => exportProjectToZip,
   formatTreeToMarkdown: () => formatTreeToMarkdown,
+  getFormattedTimestamp: () => getFormattedTimestamp,
   importProjectFromZip: () => importProjectFromZip,
   injectXMPMetadata: () => injectXMPMetadata,
   parsePromptFile: () => parsePromptFile,
+  useKeyboardNavigation: () => useKeyboardNavigation,
   useOnClickOutside: () => useOnClickOutside
 });
 module.exports = __toCommonJS(index_exports);
@@ -65,6 +69,42 @@ function useOnClickOutside(ref, handler) {
   }, [ref, handler]);
 }
 
+// src/hooks/useKeyboardNavigation.ts
+var import_react2 = require("react");
+function useKeyboardNavigation(history, currentResult, setCurrentResult) {
+  (0, import_react2.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLInputElement) return;
+      if (!currentResult || history.length === 0) return;
+      const currentIndex = history.findIndex((h) => h.id === currentResult.id);
+      if (e.key === "ArrowRight" && currentIndex < history.length - 1) {
+        setCurrentResult(history[currentIndex + 1]);
+      } else if (e.key === "ArrowLeft" && currentIndex > 0) {
+        setCurrentResult(history[currentIndex - 1]);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [currentResult, history, setCurrentResult]);
+}
+
+// src/lib/utils.ts
+var getFormattedTimestamp = () => {
+  const d = /* @__PURE__ */ new Date();
+  const pad = (n) => n.toString().padStart(2, "0");
+  return `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}_${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;
+};
+var GLOBAL_STYLES = `
+  .dark-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
+  .dark-scrollbar::-webkit-scrollbar-track { background: transparent; }
+  .dark-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
+  html, body, #root { margin: 0; padding: 0; width: 100%; height: 100%; background: #0e0e0e; font-family: 'Google Sans Text', sans-serif; overflow: hidden; }
+  @keyframes prompt-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
+  .prompt-loading { background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 75%); background-size: 200% 100%; animation: prompt-shimmer 2s infinite linear; }
+  @keyframes dropdown-enter { from { opacity: 0; transform: scale(0.95) translateY(-5px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+  .animate-dropdown { animation: dropdown-enter 0.1s ease-out forwards; }
+`;
+
 // src/lib/metadata.ts
 var crcTable = (() => {
   let c;
@@ -381,7 +421,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var SectionLabel = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center px-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[9px] font-bold text-white/30 uppercase tracking-widest text-nowrap", children }) });
 
 // src/components/CompactDropdown.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CompactDropdown = ({
   value,
@@ -390,8 +430,8 @@ var CompactDropdown = ({
   onChange,
   className = ""
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
-  const ref = (0, import_react2.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const ref = (0, import_react3.useRef)(null);
   useOnClickOutside(ref, () => setIsOpen(false));
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, className: `relative shrink-0 ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -423,7 +463,7 @@ var CompactDropdown = ({
 };
 
 // src/components/HistoryPanel.tsx
-var import_react3 = require("motion/react");
+var import_react4 = require("motion/react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var formatFriendlyTimestamp = (timestamp) => {
   const date = new Date(timestamp);
@@ -443,7 +483,7 @@ var HistoryPanel = ({ history, currentResultId, onSelect, onDelete }) => {
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[10px] font-bold uppercase tracking-widest", children: "Keine Historie" })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-4 flex flex-col gap-3 overflow-y-auto dark-scrollbar", children: history.map((gen) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-4 flex flex-col gap-3 overflow-y-auto dark-scrollbar", children: history.map((gen) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: `flex gap-3 p-2 bg-white/5 border rounded-2xl cursor-pointer group transition-all relative ${currentResultId === gen.id ? "border-white/40 bg-white/10 shadow-lg" : "border-white/5 hover:border-white/20"}`,
@@ -472,7 +512,7 @@ var HistoryPanel = ({ history, currentResultId, onSelect, onDelete }) => {
 };
 
 // src/components/InspectPanel.tsx
-var import_react4 = require("motion/react");
+var import_react5 = require("motion/react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagToggle }) => {
   if (!currentResult) {
@@ -482,7 +522,7 @@ var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagTogg
     ] });
   }
   const fullDateStr = new Date(currentResult.timestamp).toLocaleString([], { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit" });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 flex flex-col overflow-hidden", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react5.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 flex flex-col overflow-hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-shrink-0 border-b border-white/5 bg-black/20 py-3 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex gap-2 overflow-x-auto no-scrollbar pb-1", children: history.map((gen) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: () => onSelect(gen), className: `w-10 h-10 rounded-lg overflow-hidden border shrink-0 transition-all ${currentResult.id === gen.id ? "border-white scale-105 shadow-lg" : "border-white/5 opacity-40 hover:opacity-100"}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: gen.base64 ? gen.base64.startsWith("data:") ? gen.base64 : `data:image/png;base64,${gen.base64}` : "", className: "w-full h-full object-cover", alt: "Thumbnail" }) }, gen.id)) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 overflow-y-auto p-4 flex flex-col gap-6 dark-scrollbar pb-10", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SectionLabel, { children: "Vorschau" }),
@@ -524,13 +564,13 @@ var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagTogg
 };
 
 // src/components/SetupPanel.tsx
-var import_react5 = require("react");
-var import_react6 = require("motion/react");
+var import_react6 = require("react");
+var import_react7 = require("motion/react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var SetupPanel = ({ onWorkspaceImport, onProjectExport, onProjectImport, projectActionState }) => {
-  const workspaceInputRef = (0, import_react5.useRef)(null);
-  const projectInputRef = (0, import_react5.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react6.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-6 flex flex-col gap-10", children: [
+  const workspaceInputRef = (0, import_react6.useRef)(null);
+  const projectInputRef = (0, import_react6.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react7.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-6 flex flex-col gap-10", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SectionLabel, { children: "Workspace Management" }),
@@ -573,7 +613,7 @@ var SetupPanel = ({ onWorkspaceImport, onProjectExport, onProjectImport, project
 };
 
 // src/components/MediaLibrary.tsx
-var import_react7 = require("motion/react");
+var import_react8 = require("motion/react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, onBatchDownload, onGenerateReference }) => {
   const selectedCount = items.filter((i) => i.selectedForExport).length;
@@ -592,7 +632,7 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
           "Laden"
         ] })
       ] }),
-      selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react7.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, className: "flex items-center justify-between bg-blue-500/10 border border-blue-500/20 p-2 rounded-xl", children: [
+      selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react8.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, className: "flex items-center justify-between bg-blue-500/10 border border-blue-500/20 p-2 rounded-xl", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[9px] font-bold uppercase text-blue-400 ml-1", children: [
           selectedCount,
           " ausgew\xE4hlt"
@@ -609,7 +649,7 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[12px] font-bold uppercase tracking-widest", children: "Keine Medien" }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[10px] italic", children: "Importiere Assets aus deinem Projekt." })
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-2 gap-3 pb-10", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react7.motion.div, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, className: `relative aspect-square group/item rounded-xl overflow-hidden border transition-all bg-white/5 cursor-pointer shadow-lg ${item.selectedForExport ? "border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.2)]" : "border-white/10 opacity-70 hover:opacity-100"}`, onClick: () => onSelect?.(item), children: [
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-2 gap-3 pb-10", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react8.motion.div, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, className: `relative aspect-square group/item rounded-xl overflow-hidden border transition-all bg-white/5 cursor-pointer shadow-lg ${item.selectedForExport ? "border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.2)]" : "border-white/10 opacity-70 hover:opacity-100"}`, onClick: () => onSelect?.(item), children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: item.base64 ? item.base64.startsWith("data:") ? item.base64 : `data:image/png;base64,${item.base64}` : "", className: "w-full h-full object-cover transition-transform duration-500 group-hover/item:scale-110", alt: item.prompt }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: `absolute top-2 left-2 w-5 h-5 rounded-md border flex items-center justify-center transition-all z-30 pointer-events-auto ${item.selectedForExport ? "bg-blue-500 border-blue-400" : "bg-black/60 border-white/20"}`, onClick: (e) => {
         e.stopPropagation();
@@ -634,10 +674,10 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
 };
 
 // src/components/ListView.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNode, onIndentNode, onOutdentNode, onAddSibling, isActive, isInPath, onFocus, onGenerate, onGenerateBranch, onGenerateSubtree, isGenerating, isCollapsed, toggleCollapse, renderNode, children }) => {
-  const inputRef = (0, import_react8.useRef)(null);
+  const inputRef = (0, import_react9.useRef)(null);
   const hasChildren = children && children.length > 0;
   const handleKeyDown = (e) => {
     if (e.key === "Tab") {
@@ -665,7 +705,7 @@ var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNod
       onMoveNode(node.id, "down");
     }
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (isActive && inputRef.current) inputRef.current.focus();
   }, [isActive]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col w-full", children: [
@@ -699,7 +739,7 @@ var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNod
   ] });
 };
 function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMoveNode, onIndentNode, onOutdentNode, onAddSibling, focusedNodeId, onFocus, activePath, onGenerate, onGenerateBranch, onGenerateSubtree, isGeneratingNodeId }) {
-  const [collapsed, setCollapsed] = (0, import_react8.useState)(/* @__PURE__ */ new Set());
+  const [collapsed, setCollapsed] = (0, import_react9.useState)(/* @__PURE__ */ new Set());
   const toggleCollapse = (id) => {
     setCollapsed((prev) => {
       const next = new Set(prev);
@@ -725,10 +765,315 @@ 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,
   HistoryPanel,
   InspectPanel,
   ListView,
@@ -738,8 +1083,10 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
   SetupPanel,
   exportProjectToZip,
   formatTreeToMarkdown,
+  getFormattedTimestamp,
   importProjectFromZip,
   injectXMPMetadata,
   parsePromptFile,
+  useKeyboardNavigation,
   useOnClickOutside
 });

package/dist/index.mjs

@@ -15,6 +15,42 @@ function useOnClickOutside(ref, handler) {
   }, [ref, handler]);
 }
 
+// src/hooks/useKeyboardNavigation.ts
+import { useEffect as useEffect2 } from "react";
+function useKeyboardNavigation(history, currentResult, setCurrentResult) {
+  useEffect2(() => {
+    const handleKeyDown = (e) => {
+      if (e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLInputElement) return;
+      if (!currentResult || history.length === 0) return;
+      const currentIndex = history.findIndex((h) => h.id === currentResult.id);
+      if (e.key === "ArrowRight" && currentIndex < history.length - 1) {
+        setCurrentResult(history[currentIndex + 1]);
+      } else if (e.key === "ArrowLeft" && currentIndex > 0) {
+        setCurrentResult(history[currentIndex - 1]);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [currentResult, history, setCurrentResult]);
+}
+
+// src/lib/utils.ts
+var getFormattedTimestamp = () => {
+  const d = /* @__PURE__ */ new Date();
+  const pad = (n) => n.toString().padStart(2, "0");
+  return `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}_${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;
+};
+var GLOBAL_STYLES = `
+  .dark-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
+  .dark-scrollbar::-webkit-scrollbar-track { background: transparent; }
+  .dark-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
+  html, body, #root { margin: 0; padding: 0; width: 100%; height: 100%; background: #0e0e0e; font-family: 'Google Sans Text', sans-serif; overflow: hidden; }
+  @keyframes prompt-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
+  .prompt-loading { background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 75%); background-size: 200% 100%; animation: prompt-shimmer 2s infinite linear; }
+  @keyframes dropdown-enter { from { opacity: 0; transform: scale(0.95) translateY(-5px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+  .animate-dropdown { animation: dropdown-enter 0.1s ease-out forwards; }
+`;
+
 // src/lib/metadata.ts
 var crcTable = (() => {
   let c;
@@ -584,7 +620,7 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
 };
 
 // src/components/ListView.tsx
-import { useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNode, onIndentNode, onOutdentNode, onAddSibling, isActive, isInPath, onFocus, onGenerate, onGenerateBranch, onGenerateSubtree, isGenerating, isCollapsed, toggleCollapse, renderNode, children }) => {
   const inputRef = useRef3(null);
@@ -615,7 +651,7 @@ var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNod
       onMoveNode(node.id, "down");
     }
   };
-  useEffect2(() => {
+  useEffect3(() => {
     if (isActive && inputRef.current) inputRef.current.focus();
   }, [isActive]);
   return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col w-full", children: [
@@ -675,9 +711,314 @@ 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,
   HistoryPanel,
   InspectPanel,
   ListView,
@@ -687,8 +1028,10 @@ export {
   SetupPanel,
   exportProjectToZip,
   formatTreeToMarkdown,
+  getFormattedTimestamp,
   importProjectFromZip,
   injectXMPMetadata,
   parsePromptFile,
+  useKeyboardNavigation,
   useOnClickOutside
 };

package/package.json

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