@rslsp1/fa-app-tools 0.1.10 → 0.1.12

package/dist/index.d.mts

@@ -4,35 +4,6 @@ import { Node, Edge } from '@xyflow/react';
 
 declare function useOnClickOutside(ref: RefObject<HTMLElement | null>, handler: (e: MouseEvent | TouchEvent) => void): void;
 
-declare function FaToolsBadge(): react_jsx_runtime.JSX.Element;
-
-interface PillButtonProps {
-    icon?: string;
-    children: React.ReactNode;
-    variant?: 'filled' | 'outline' | 'solid' | 'danger' | 'ghost';
-    onClick?: () => void;
-    disabled?: boolean;
-    loading?: boolean;
-    className?: string;
-}
-declare const PillButton: React.FC<PillButtonProps>;
-
-declare const SectionLabel: React.FC<{
-    children: React.ReactNode;
-}>;
-
-interface CompactDropdownProps {
-    value: string;
-    displayValue?: string;
-    options: {
-        label: string;
-        value: string;
-    }[];
-    onChange: (val: string) => void;
-    className?: string;
-}
-declare const CompactDropdown: React.FC<CompactDropdownProps>;
-
 interface WorkspaceTags {
     by_category: Record<string, string[]>;
     all: Array<{
@@ -68,6 +39,77 @@ interface ProjectSettings {
     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;
+
+/**
+ * Vollständiger Export: JSON + MD + Bilder (mit XMP Meta)
+ */
+declare function exportProjectToZip(nodes: any[], edges: any[], history: any[], galleryItems: any[], settings: any): Promise<{
+    base64: string;
+}>;
+declare function importProjectFromZip(file: File): Promise<any>;
+
+interface ExtractedCharacter {
+    name: string;
+    prompts: {
+        title: string;
+        content: string;
+    }[];
+}
+/**
+ * Parsed Charakter-Dateien für den Import.
+ */
+declare function parsePromptFile(text: string): ExtractedCharacter[];
+/**
+ * Wandelt die Knotenstruktur in einen sauberen Markdown-Baum um.
+ */
+declare function formatTreeToMarkdown(nodes: any[], edges: any[]): string;
+
+declare function FaToolsBadge(): react_jsx_runtime.JSX.Element;
+
+interface PillButtonProps {
+    icon?: string;
+    children: React.ReactNode;
+    variant?: 'filled' | 'outline' | 'solid' | 'danger' | 'ghost';
+    onClick?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+}
+declare const PillButton: React.FC<PillButtonProps>;
+
+declare const SectionLabel: React.FC<{
+    children: React.ReactNode;
+}>;
+
+interface CompactDropdownProps {
+    value: string;
+    displayValue?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    onChange: (val: string) => void;
+    className?: string;
+}
+declare const CompactDropdown: React.FC<CompactDropdownProps>;
+
 interface HistoryPanelProps {
     history: Generation[];
     currentResultId: string | null;
@@ -89,7 +131,7 @@ interface SetupPanelProps {
     onWorkspaceImport: (file: File) => void;
     onProjectExport: () => void;
     onProjectImport: (file: File) => void;
-    projectActionState: 'idle' | 'working' | 'done' | 'error';
+    projectActionState: 'idle' | 'working' | 'working-full' | 'done' | 'error';
 }
 declare const SetupPanel: React.FC<SetupPanelProps>;
 
@@ -98,8 +140,9 @@ interface MediaLibraryProps {
     onImport: () => void;
     onDelete: (id: string) => void;
     onSelect: (item: Generation) => void;
-    onToggleSelection: (id: string) => void;
-    onBatchDownload: () => void;
+    onToggleSelection?: (id: string) => void;
+    onBatchDownload?: () => void;
+    onGenerateReference?: (item: Generation) => void;
 }
 declare const MediaLibrary: React.FC<MediaLibraryProps>;
 
@@ -109,10 +152,10 @@ interface ListViewProps {
     onNodeChange: (id: string, label: string) => void;
     onAddChild: (parentId: string) => void;
     onDeleteNode: (id: string) => void;
-    onMoveNode: (id: string, direction: 'up' | 'down') => void;
-    onIndentNode: (id: string) => void;
-    onOutdentNode: (id: string) => void;
-    onAddSibling: (id: string) => void;
+    onMoveNode?: (id: string, direction: 'up' | 'down') => void;
+    onIndentNode?: (id: string) => void;
+    onOutdentNode?: (id: string) => void;
+    onAddSibling?: (id: string) => void;
     focusedNodeId: string | null;
     onFocus: (id: string | null) => void;
     activePath: Set<string>;
@@ -123,4 +166,4 @@ interface ListViewProps {
 }
 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, FaToolsBadge, type Generation, HistoryPanel, InspectPanel, ListView, MediaLibrary, PillButton, type ProjectSettings, SectionLabel, SetupPanel, type WorkspaceTags, useOnClickOutside };
+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 };

package/dist/index.d.ts

@@ -4,35 +4,6 @@ import { Node, Edge } from '@xyflow/react';
 
 declare function useOnClickOutside(ref: RefObject<HTMLElement | null>, handler: (e: MouseEvent | TouchEvent) => void): void;
 
-declare function FaToolsBadge(): react_jsx_runtime.JSX.Element;
-
-interface PillButtonProps {
-    icon?: string;
-    children: React.ReactNode;
-    variant?: 'filled' | 'outline' | 'solid' | 'danger' | 'ghost';
-    onClick?: () => void;
-    disabled?: boolean;
-    loading?: boolean;
-    className?: string;
-}
-declare const PillButton: React.FC<PillButtonProps>;
-
-declare const SectionLabel: React.FC<{
-    children: React.ReactNode;
-}>;
-
-interface CompactDropdownProps {
-    value: string;
-    displayValue?: string;
-    options: {
-        label: string;
-        value: string;
-    }[];
-    onChange: (val: string) => void;
-    className?: string;
-}
-declare const CompactDropdown: React.FC<CompactDropdownProps>;
-
 interface WorkspaceTags {
     by_category: Record<string, string[]>;
     all: Array<{
@@ -68,6 +39,77 @@ interface ProjectSettings {
     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;
+
+/**
+ * Vollständiger Export: JSON + MD + Bilder (mit XMP Meta)
+ */
+declare function exportProjectToZip(nodes: any[], edges: any[], history: any[], galleryItems: any[], settings: any): Promise<{
+    base64: string;
+}>;
+declare function importProjectFromZip(file: File): Promise<any>;
+
+interface ExtractedCharacter {
+    name: string;
+    prompts: {
+        title: string;
+        content: string;
+    }[];
+}
+/**
+ * Parsed Charakter-Dateien für den Import.
+ */
+declare function parsePromptFile(text: string): ExtractedCharacter[];
+/**
+ * Wandelt die Knotenstruktur in einen sauberen Markdown-Baum um.
+ */
+declare function formatTreeToMarkdown(nodes: any[], edges: any[]): string;
+
+declare function FaToolsBadge(): react_jsx_runtime.JSX.Element;
+
+interface PillButtonProps {
+    icon?: string;
+    children: React.ReactNode;
+    variant?: 'filled' | 'outline' | 'solid' | 'danger' | 'ghost';
+    onClick?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+}
+declare const PillButton: React.FC<PillButtonProps>;
+
+declare const SectionLabel: React.FC<{
+    children: React.ReactNode;
+}>;
+
+interface CompactDropdownProps {
+    value: string;
+    displayValue?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    onChange: (val: string) => void;
+    className?: string;
+}
+declare const CompactDropdown: React.FC<CompactDropdownProps>;
+
 interface HistoryPanelProps {
     history: Generation[];
     currentResultId: string | null;
@@ -89,7 +131,7 @@ interface SetupPanelProps {
     onWorkspaceImport: (file: File) => void;
     onProjectExport: () => void;
     onProjectImport: (file: File) => void;
-    projectActionState: 'idle' | 'working' | 'done' | 'error';
+    projectActionState: 'idle' | 'working' | 'working-full' | 'done' | 'error';
 }
 declare const SetupPanel: React.FC<SetupPanelProps>;
 
@@ -98,8 +140,9 @@ interface MediaLibraryProps {
     onImport: () => void;
     onDelete: (id: string) => void;
     onSelect: (item: Generation) => void;
-    onToggleSelection: (id: string) => void;
-    onBatchDownload: () => void;
+    onToggleSelection?: (id: string) => void;
+    onBatchDownload?: () => void;
+    onGenerateReference?: (item: Generation) => void;
 }
 declare const MediaLibrary: React.FC<MediaLibraryProps>;
 
@@ -109,10 +152,10 @@ interface ListViewProps {
     onNodeChange: (id: string, label: string) => void;
     onAddChild: (parentId: string) => void;
     onDeleteNode: (id: string) => void;
-    onMoveNode: (id: string, direction: 'up' | 'down') => void;
-    onIndentNode: (id: string) => void;
-    onOutdentNode: (id: string) => void;
-    onAddSibling: (id: string) => void;
+    onMoveNode?: (id: string, direction: 'up' | 'down') => void;
+    onIndentNode?: (id: string) => void;
+    onOutdentNode?: (id: string) => void;
+    onAddSibling?: (id: string) => void;
     focusedNodeId: string | null;
     onFocus: (id: string | null) => void;
     activePath: Set<string>;
@@ -123,4 +166,4 @@ interface ListViewProps {
 }
 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, FaToolsBadge, type Generation, HistoryPanel, InspectPanel, ListView, MediaLibrary, PillButton, type ProjectSettings, SectionLabel, SetupPanel, type WorkspaceTags, useOnClickOutside };
+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 };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -22,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   CompactDropdown: () => CompactDropdown,
   FaToolsBadge: () => FaToolsBadge,
+  GLOBAL_STYLES: () => GLOBAL_STYLES,
   HistoryPanel: () => HistoryPanel,
   InspectPanel: () => InspectPanel,
   ListView: () => ListView,
@@ -29,6 +40,13 @@ __export(index_exports, {
   PillButton: () => PillButton,
   SectionLabel: () => SectionLabel,
   SetupPanel: () => SetupPanel,
+  exportProjectToZip: () => exportProjectToZip,
+  formatTreeToMarkdown: () => formatTreeToMarkdown,
+  getFormattedTimestamp: () => getFormattedTimestamp,
+  importProjectFromZip: () => importProjectFromZip,
+  injectXMPMetadata: () => injectXMPMetadata,
+  parsePromptFile: () => parsePromptFile,
+  useKeyboardNavigation: () => useKeyboardNavigation,
   useOnClickOutside: () => useOnClickOutside
 });
 module.exports = __toCommonJS(index_exports);
@@ -50,6 +68,301 @@ 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;
+  const table = new Uint32Array(256);
+  for (let n = 0; n < 256; n++) {
+    c = n;
+    for (let k = 0; k < 8; k++) {
+      c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
+    }
+    table[n] = c;
+  }
+  return table;
+})();
+function calculateCRC(bytes) {
+  let crc = 4294967295;
+  for (let i = 0; i < bytes.length; i++) {
+    crc = crcTable[(crc ^ bytes[i]) & 255] ^ crc >>> 8;
+  }
+  return (crc ^ 4294967295) >>> 0;
+}
+function indexOfBytes(buffer, search, start = 0) {
+  for (let i = start; i <= buffer.length - search.length; i++) {
+    let found = true;
+    for (let j = 0; j < search.length; j++) {
+      if (buffer[i + j] !== search[j]) {
+        found = false;
+        break;
+      }
+    }
+    if (found) return i;
+  }
+  return -1;
+}
+function createXMPPacket(prompt, seed, model, id, tags = [], hierarchy) {
+  const sanitize = (str) => (str || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  const escPrompt = sanitize(prompt);
+  const escModel = sanitize(model || "AI Model");
+  const escHierarchy = sanitize(hierarchy || "");
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+  const allTags = [.../* @__PURE__ */ new Set([...tags, "Avatar Architect", escModel])];
+  const rdfTags = allTags.map((t) => `<rdf:li>${sanitize(t)}</rdf:li>`).join("");
+  const BOM = "\uFEFF";
+  return `<?xpacket begin="${BOM}" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c140">
+ <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  <rdf:Description rdf:about=""
+    xmlns:xmp="http://ns.adobe.com/xap/1.0/"
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+    xmlns:photoshop="http://ns.adobe.com/photoshop/1.0/"
+    xmlns:ai="http://ns.flow.creative/ai/1.0/">
+   <dc:format>image/png</dc:format>
+   <dc:description><rdf:Alt><rdf:li xml:lang="x-default">${escPrompt}</rdf:li></rdf:Alt></dc:description>
+   <dc:subject><rdf:Bag>${rdfTags}</rdf:Bag></dc:subject>
+   <photoshop:Instructions>Seed: ${seed} | Model: ${escModel}</photoshop:Instructions>
+   <xmp:CreateDate>${timestamp}</xmp:CreateDate>
+   <ai:prompt>${escPrompt}</ai:prompt>
+   <ai:seed>${seed ?? "0"}</ai:seed>
+   <ai:model>${escModel}</ai:model>
+   <ai:hierarchy>${escHierarchy}</ai:hierarchy>
+  </rdf:Description>
+ </rdf:RDF>
+</x:xmpmeta>${" ".repeat(1024)}<?xpacket end="w"?>`;
+}
+function bytesToBase64(bytes) {
+  let binary = "";
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+}
+function base64ToBytes(base64) {
+  const clean = base64.includes(",") ? base64.split(",")[1] : base64.trim();
+  try {
+    const binary = atob(clean);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+    return bytes;
+  } catch (e) {
+    return new Uint8Array(0);
+  }
+}
+function injectXMPMetadata(base64, prompt, seed, model, id, tags = [], hierarchy) {
+  try {
+    const bytes = base64ToBytes(base64);
+    if (bytes.length < 8 || bytes[0] !== 137 || bytes[1] !== 80) {
+      console.warn("Metadaten-Injektion \xFCbersprungen: Datei ist kein PNG.");
+      return base64;
+    }
+    const xmpData = createXMPPacket(prompt, seed, model, id, tags, hierarchy);
+    const encoder = new TextEncoder();
+    const keyword = encoder.encode("XML:com.adobe.xmp");
+    const textBytes = encoder.encode(xmpData);
+    const chunkData = new Uint8Array(keyword.length + 5 + textBytes.length);
+    chunkData.set(keyword, 0);
+    chunkData.set(textBytes, keyword.length + 5);
+    const type = encoder.encode("iTXt");
+    const crcInput = new Uint8Array(type.length + chunkData.length);
+    crcInput.set(type, 0);
+    crcInput.set(chunkData, type.length);
+    const crc = calculateCRC(crcInput);
+    const fullChunk = new Uint8Array(4 + 4 + chunkData.length + 4);
+    const view = new DataView(fullChunk.buffer);
+    view.setUint32(0, chunkData.length);
+    fullChunk.set(type, 4);
+    fullChunk.set(chunkData, 8);
+    view.setUint32(8 + chunkData.length, crc);
+    const IDAT = encoder.encode("IDAT");
+    const idatPos = indexOfBytes(bytes, IDAT);
+    const insertPos = idatPos !== -1 ? idatPos - 4 : 8;
+    const result = new Uint8Array(bytes.length + fullChunk.length);
+    result.set(bytes.slice(0, insertPos), 0);
+    result.set(fullChunk, insertPos);
+    result.set(bytes.slice(insertPos), insertPos + fullChunk.length);
+    return bytesToBase64(result);
+  } catch (e) {
+    console.error("Fehler beim Einbetten der Metadaten:", e);
+    return base64;
+  }
+}
+
+// src/lib/project.ts
+var import_jszip = __toESM(require("jszip"));
+function generateMarkdownReport(nodes, history) {
+  let md = "# Avatar Architect - Projekt Report\n\n";
+  md += `Exportiert: ${(/* @__PURE__ */ new Date()).toLocaleString()}
+
+`;
+  md += "## Hierarchie\n";
+  nodes.forEach((n) => {
+    md += `- **${n.data?.label || "Unbenannt"}**
+`;
+  });
+  md += "\n## Historie der Generationen\n";
+  history.forEach((h, i) => {
+    md += `### ${i + 1}. Generation (${h.model || "AI"})
+`;
+    md += `- **Zeitstempel**: ${new Date(h.timestamp).toLocaleString()}
+`;
+    md += `- **Seed**: ${h.seed}
+`;
+    md += `- **Prompt**:
+> ${h.prompt}
+
+`;
+  });
+  return md;
+}
+async function exportProjectToZip(nodes, edges, history, galleryItems, settings) {
+  const zip = new import_jszip.default();
+  const projectData = {
+    nodes,
+    edges,
+    history: history.map((h) => ({ ...h, base64: void 0 })),
+    galleryItems: galleryItems.map((g) => ({ ...g, base64: void 0 })),
+    settings,
+    version: "1.2.6"
+  };
+  zip.file("project.json", JSON.stringify(projectData, null, 2));
+  zip.file("projekt_bericht.md", generateMarkdownReport(nodes, history));
+  const imgFolder = zip.folder("images");
+  if (imgFolder) {
+    const allItems = [...history, ...galleryItems];
+    for (const item of allItems) {
+      if (item.base64) {
+        try {
+          const cleanB64 = item.base64.includes(",") ? item.base64.split(",")[1] : item.base64;
+          const withMeta = injectXMPMetadata(cleanB64, item.prompt || "", item.seed, item.model, item.id, item.tags || []);
+          imgFolder.file(`${item.id}.png`, withMeta, { base64: true });
+        } catch (e) {
+          console.error("Fehler beim Packen eines Bildes:", e);
+        }
+      }
+    }
+  }
+  const blob = await zip.generateAsync({ type: "blob", compression: "STORE" });
+  return blobToBase64(blob);
+}
+async function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result;
+      resolve({ base64: result.split(",")[1] });
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+async function importProjectFromZip(file) {
+  const zip = await import_jszip.default.loadAsync(file);
+  const jsonStr = await zip.file("project.json")?.async("string");
+  if (!jsonStr) throw new Error("Keine project.json gefunden.");
+  const data = JSON.parse(jsonStr);
+  const imgFolder = zip.folder("images");
+  if (imgFolder) {
+    const loadImgs = async (items) => {
+      if (!items) return [];
+      return Promise.all(items.map(async (h) => {
+        const imgFile = zip.file(`images/${h.id}.png`);
+        if (!imgFile) return h;
+        const b64 = await imgFile.async("base64");
+        return { ...h, base64: `data:image/png;base64,${b64}` };
+      }));
+    };
+    data.history = await loadImgs(data.history || []);
+    data.galleryItems = await loadImgs(data.galleryItems || []);
+  }
+  return data;
+}
+
+// src/lib/parserService.ts
+function parsePromptFile(text) {
+  const characters = [];
+  const sections = text.split(/^##\s+/m);
+  for (let i = 1; i < sections.length; i++) {
+    const section = sections[i];
+    const lines = section.split("\n");
+    const name = lines[0].trim();
+    const character = {
+      name,
+      prompts: []
+    };
+    const promptRegex = /###\s+(.*?)\s*\n\s*```(?:\w+)?\n([\s\S]*?)```/g;
+    let match;
+    while ((match = promptRegex.exec(section)) !== null) {
+      character.prompts.push({
+        title: match[1].trim(),
+        content: match[2].trim()
+      });
+    }
+    if (character.name) {
+      characters.push(character);
+    }
+  }
+  return characters;
+}
+function formatTreeToMarkdown(nodes, edges) {
+  const nodeMap = /* @__PURE__ */ new Map();
+  nodes.forEach((n) => nodeMap.set(n.id, { ...n, children: [] }));
+  edges.forEach((e) => {
+    const parent = nodeMap.get(e.source);
+    if (parent) parent.children.push(e.target);
+  });
+  const roots = nodes.filter((n) => !edges.some((e) => e.target === n.id));
+  const processNode = (id, depth = 0) => {
+    const node = nodeMap.get(id);
+    if (!node) return "";
+    const indent = "  ".repeat(depth);
+    let md = `${indent}- ${node.data.label || "Unbenannt"}
+`;
+    if (node.children) {
+      node.children.forEach((childId) => {
+        md += processNode(childId, depth + 1);
+      });
+    }
+    return md;
+  };
+  return roots.map((root) => processNode(root.id)).join("\n");
+}
+
 // src/components/Badge.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function FaToolsBadge() {
@@ -107,7 +420,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,
@@ -116,8 +429,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)(
@@ -149,7 +462,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);
@@ -169,7 +482,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"}`,
@@ -198,7 +511,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) {
@@ -208,7 +521,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" }),
@@ -250,13 +563,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" }),
@@ -299,9 +612,9 @@ 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 }) => {
+var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, onBatchDownload, onGenerateReference }) => {
   const selectedCount = items.filter((i) => i.selectedForExport).length;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col h-full overflow-hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col p-4 border-b border-white/5 gap-3 bg-black/20", children: [
@@ -318,7 +631,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"
@@ -335,7 +648,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();
@@ -343,10 +656,16 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
       }, children: item.selectedForExport && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[14px] text-white", children: "check" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover/item:opacity-100 transition-opacity flex flex-col justify-end p-2 gap-2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[8px] font-bold text-white/80 truncate max-w-[80px] uppercase tracking-tighter", children: item.prompt || "Importiert" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: (e) => {
-          e.stopPropagation();
-          onDelete?.(item.id);
-        }, className: "w-6 h-6 flex items-center justify-center bg-red-500/20 text-red-400 hover:bg-red-500 rounded-md transition-all hover:text-white pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "delete" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+          onGenerateReference && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: (e) => {
+            e.stopPropagation();
+            onGenerateReference(item);
+          }, className: "w-6 h-6 flex items-center justify-center bg-blue-500/20 text-blue-400 hover:bg-blue-500 rounded-md transition-all hover:text-white pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: (e) => {
+            e.stopPropagation();
+            onDelete?.(item.id);
+          }, className: "w-6 h-6 flex items-center justify-center bg-red-500/20 text-red-400 hover:bg-red-500 rounded-md transition-all hover:text-white pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "delete" }) })
+        ] })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute top-1 right-1 px-1.5 py-0.5 bg-black/60 backdrop-blur-md rounded text-[7px] font-bold text-white/60 uppercase tracking-tight", children: item.type === "import" ? "Library" : "Gen" })
     ] }, item.id)) }) })
@@ -354,10 +673,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") {
@@ -385,7 +704,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: [
@@ -419,7 +738,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);
@@ -449,6 +768,7 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
 0 && (module.exports = {
   CompactDropdown,
   FaToolsBadge,
+  GLOBAL_STYLES,
   HistoryPanel,
   InspectPanel,
   ListView,
@@ -456,5 +776,12 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
   PillButton,
   SectionLabel,
   SetupPanel,
+  exportProjectToZip,
+  formatTreeToMarkdown,
+  getFormattedTimestamp,
+  importProjectFromZip,
+  injectXMPMetadata,
+  parsePromptFile,
+  useKeyboardNavigation,
   useOnClickOutside
 });

package/dist/index.mjs

@@ -15,6 +15,301 @@ 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;
+  const table = new Uint32Array(256);
+  for (let n = 0; n < 256; n++) {
+    c = n;
+    for (let k = 0; k < 8; k++) {
+      c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
+    }
+    table[n] = c;
+  }
+  return table;
+})();
+function calculateCRC(bytes) {
+  let crc = 4294967295;
+  for (let i = 0; i < bytes.length; i++) {
+    crc = crcTable[(crc ^ bytes[i]) & 255] ^ crc >>> 8;
+  }
+  return (crc ^ 4294967295) >>> 0;
+}
+function indexOfBytes(buffer, search, start = 0) {
+  for (let i = start; i <= buffer.length - search.length; i++) {
+    let found = true;
+    for (let j = 0; j < search.length; j++) {
+      if (buffer[i + j] !== search[j]) {
+        found = false;
+        break;
+      }
+    }
+    if (found) return i;
+  }
+  return -1;
+}
+function createXMPPacket(prompt, seed, model, id, tags = [], hierarchy) {
+  const sanitize = (str) => (str || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  const escPrompt = sanitize(prompt);
+  const escModel = sanitize(model || "AI Model");
+  const escHierarchy = sanitize(hierarchy || "");
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+  const allTags = [.../* @__PURE__ */ new Set([...tags, "Avatar Architect", escModel])];
+  const rdfTags = allTags.map((t) => `<rdf:li>${sanitize(t)}</rdf:li>`).join("");
+  const BOM = "\uFEFF";
+  return `<?xpacket begin="${BOM}" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c140">
+ <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  <rdf:Description rdf:about=""
+    xmlns:xmp="http://ns.adobe.com/xap/1.0/"
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+    xmlns:photoshop="http://ns.adobe.com/photoshop/1.0/"
+    xmlns:ai="http://ns.flow.creative/ai/1.0/">
+   <dc:format>image/png</dc:format>
+   <dc:description><rdf:Alt><rdf:li xml:lang="x-default">${escPrompt}</rdf:li></rdf:Alt></dc:description>
+   <dc:subject><rdf:Bag>${rdfTags}</rdf:Bag></dc:subject>
+   <photoshop:Instructions>Seed: ${seed} | Model: ${escModel}</photoshop:Instructions>
+   <xmp:CreateDate>${timestamp}</xmp:CreateDate>
+   <ai:prompt>${escPrompt}</ai:prompt>
+   <ai:seed>${seed ?? "0"}</ai:seed>
+   <ai:model>${escModel}</ai:model>
+   <ai:hierarchy>${escHierarchy}</ai:hierarchy>
+  </rdf:Description>
+ </rdf:RDF>
+</x:xmpmeta>${" ".repeat(1024)}<?xpacket end="w"?>`;
+}
+function bytesToBase64(bytes) {
+  let binary = "";
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+}
+function base64ToBytes(base64) {
+  const clean = base64.includes(",") ? base64.split(",")[1] : base64.trim();
+  try {
+    const binary = atob(clean);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+    return bytes;
+  } catch (e) {
+    return new Uint8Array(0);
+  }
+}
+function injectXMPMetadata(base64, prompt, seed, model, id, tags = [], hierarchy) {
+  try {
+    const bytes = base64ToBytes(base64);
+    if (bytes.length < 8 || bytes[0] !== 137 || bytes[1] !== 80) {
+      console.warn("Metadaten-Injektion \xFCbersprungen: Datei ist kein PNG.");
+      return base64;
+    }
+    const xmpData = createXMPPacket(prompt, seed, model, id, tags, hierarchy);
+    const encoder = new TextEncoder();
+    const keyword = encoder.encode("XML:com.adobe.xmp");
+    const textBytes = encoder.encode(xmpData);
+    const chunkData = new Uint8Array(keyword.length + 5 + textBytes.length);
+    chunkData.set(keyword, 0);
+    chunkData.set(textBytes, keyword.length + 5);
+    const type = encoder.encode("iTXt");
+    const crcInput = new Uint8Array(type.length + chunkData.length);
+    crcInput.set(type, 0);
+    crcInput.set(chunkData, type.length);
+    const crc = calculateCRC(crcInput);
+    const fullChunk = new Uint8Array(4 + 4 + chunkData.length + 4);
+    const view = new DataView(fullChunk.buffer);
+    view.setUint32(0, chunkData.length);
+    fullChunk.set(type, 4);
+    fullChunk.set(chunkData, 8);
+    view.setUint32(8 + chunkData.length, crc);
+    const IDAT = encoder.encode("IDAT");
+    const idatPos = indexOfBytes(bytes, IDAT);
+    const insertPos = idatPos !== -1 ? idatPos - 4 : 8;
+    const result = new Uint8Array(bytes.length + fullChunk.length);
+    result.set(bytes.slice(0, insertPos), 0);
+    result.set(fullChunk, insertPos);
+    result.set(bytes.slice(insertPos), insertPos + fullChunk.length);
+    return bytesToBase64(result);
+  } catch (e) {
+    console.error("Fehler beim Einbetten der Metadaten:", e);
+    return base64;
+  }
+}
+
+// src/lib/project.ts
+import JSZip from "jszip";
+function generateMarkdownReport(nodes, history) {
+  let md = "# Avatar Architect - Projekt Report\n\n";
+  md += `Exportiert: ${(/* @__PURE__ */ new Date()).toLocaleString()}
+
+`;
+  md += "## Hierarchie\n";
+  nodes.forEach((n) => {
+    md += `- **${n.data?.label || "Unbenannt"}**
+`;
+  });
+  md += "\n## Historie der Generationen\n";
+  history.forEach((h, i) => {
+    md += `### ${i + 1}. Generation (${h.model || "AI"})
+`;
+    md += `- **Zeitstempel**: ${new Date(h.timestamp).toLocaleString()}
+`;
+    md += `- **Seed**: ${h.seed}
+`;
+    md += `- **Prompt**:
+> ${h.prompt}
+
+`;
+  });
+  return md;
+}
+async function exportProjectToZip(nodes, edges, history, galleryItems, settings) {
+  const zip = new JSZip();
+  const projectData = {
+    nodes,
+    edges,
+    history: history.map((h) => ({ ...h, base64: void 0 })),
+    galleryItems: galleryItems.map((g) => ({ ...g, base64: void 0 })),
+    settings,
+    version: "1.2.6"
+  };
+  zip.file("project.json", JSON.stringify(projectData, null, 2));
+  zip.file("projekt_bericht.md", generateMarkdownReport(nodes, history));
+  const imgFolder = zip.folder("images");
+  if (imgFolder) {
+    const allItems = [...history, ...galleryItems];
+    for (const item of allItems) {
+      if (item.base64) {
+        try {
+          const cleanB64 = item.base64.includes(",") ? item.base64.split(",")[1] : item.base64;
+          const withMeta = injectXMPMetadata(cleanB64, item.prompt || "", item.seed, item.model, item.id, item.tags || []);
+          imgFolder.file(`${item.id}.png`, withMeta, { base64: true });
+        } catch (e) {
+          console.error("Fehler beim Packen eines Bildes:", e);
+        }
+      }
+    }
+  }
+  const blob = await zip.generateAsync({ type: "blob", compression: "STORE" });
+  return blobToBase64(blob);
+}
+async function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result;
+      resolve({ base64: result.split(",")[1] });
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+async function importProjectFromZip(file) {
+  const zip = await JSZip.loadAsync(file);
+  const jsonStr = await zip.file("project.json")?.async("string");
+  if (!jsonStr) throw new Error("Keine project.json gefunden.");
+  const data = JSON.parse(jsonStr);
+  const imgFolder = zip.folder("images");
+  if (imgFolder) {
+    const loadImgs = async (items) => {
+      if (!items) return [];
+      return Promise.all(items.map(async (h) => {
+        const imgFile = zip.file(`images/${h.id}.png`);
+        if (!imgFile) return h;
+        const b64 = await imgFile.async("base64");
+        return { ...h, base64: `data:image/png;base64,${b64}` };
+      }));
+    };
+    data.history = await loadImgs(data.history || []);
+    data.galleryItems = await loadImgs(data.galleryItems || []);
+  }
+  return data;
+}
+
+// src/lib/parserService.ts
+function parsePromptFile(text) {
+  const characters = [];
+  const sections = text.split(/^##\s+/m);
+  for (let i = 1; i < sections.length; i++) {
+    const section = sections[i];
+    const lines = section.split("\n");
+    const name = lines[0].trim();
+    const character = {
+      name,
+      prompts: []
+    };
+    const promptRegex = /###\s+(.*?)\s*\n\s*```(?:\w+)?\n([\s\S]*?)```/g;
+    let match;
+    while ((match = promptRegex.exec(section)) !== null) {
+      character.prompts.push({
+        title: match[1].trim(),
+        content: match[2].trim()
+      });
+    }
+    if (character.name) {
+      characters.push(character);
+    }
+  }
+  return characters;
+}
+function formatTreeToMarkdown(nodes, edges) {
+  const nodeMap = /* @__PURE__ */ new Map();
+  nodes.forEach((n) => nodeMap.set(n.id, { ...n, children: [] }));
+  edges.forEach((e) => {
+    const parent = nodeMap.get(e.source);
+    if (parent) parent.children.push(e.target);
+  });
+  const roots = nodes.filter((n) => !edges.some((e) => e.target === n.id));
+  const processNode = (id, depth = 0) => {
+    const node = nodeMap.get(id);
+    if (!node) return "";
+    const indent = "  ".repeat(depth);
+    let md = `${indent}- ${node.data.label || "Unbenannt"}
+`;
+    if (node.children) {
+      node.children.forEach((childId) => {
+        md += processNode(childId, depth + 1);
+      });
+    }
+    return md;
+  };
+  return roots.map((root) => processNode(root.id)).join("\n");
+}
+
 // src/components/Badge.tsx
 import { jsx } from "react/jsx-runtime";
 function FaToolsBadge() {
@@ -266,7 +561,7 @@ var SetupPanel = ({ onWorkspaceImport, onProjectExport, onProjectImport, project
 // src/components/MediaLibrary.tsx
 import { motion as motion4 } from "motion/react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, onBatchDownload }) => {
+var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, onBatchDownload, onGenerateReference }) => {
   const selectedCount = items.filter((i) => i.selectedForExport).length;
   return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col h-full overflow-hidden", children: [
     /* @__PURE__ */ jsxs6("div", { className: "flex flex-col p-4 border-b border-white/5 gap-3 bg-black/20", children: [
@@ -308,10 +603,16 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
       }, children: item.selectedForExport && /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-[14px] text-white", children: "check" }) }),
       /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover/item:opacity-100 transition-opacity flex flex-col justify-end p-2 gap-2 pointer-events-none", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx8("span", { className: "text-[8px] font-bold text-white/80 truncate max-w-[80px] uppercase tracking-tighter", children: item.prompt || "Importiert" }),
-        /* @__PURE__ */ jsx8("button", { type: "button", onClick: (e) => {
-          e.stopPropagation();
-          onDelete?.(item.id);
-        }, className: "w-6 h-6 flex items-center justify-center bg-red-500/20 text-red-400 hover:bg-red-500 rounded-md transition-all hover:text-white pointer-events-auto", children: /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-[14px]", children: "delete" }) })
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+          onGenerateReference && /* @__PURE__ */ jsx8("button", { type: "button", onClick: (e) => {
+            e.stopPropagation();
+            onGenerateReference(item);
+          }, className: "w-6 h-6 flex items-center justify-center bg-blue-500/20 text-blue-400 hover:bg-blue-500 rounded-md transition-all hover:text-white pointer-events-auto", children: /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }) }),
+          /* @__PURE__ */ jsx8("button", { type: "button", onClick: (e) => {
+            e.stopPropagation();
+            onDelete?.(item.id);
+          }, className: "w-6 h-6 flex items-center justify-center bg-red-500/20 text-red-400 hover:bg-red-500 rounded-md transition-all hover:text-white pointer-events-auto", children: /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-[14px]", children: "delete" }) })
+        ] })
       ] }) }),
       /* @__PURE__ */ jsx8("div", { className: "absolute top-1 right-1 px-1.5 py-0.5 bg-black/60 backdrop-blur-md rounded text-[7px] font-bold text-white/60 uppercase tracking-tight", children: item.type === "import" ? "Library" : "Gen" })
     ] }, item.id)) }) })
@@ -319,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);
@@ -350,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: [
@@ -413,6 +714,7 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
 export {
   CompactDropdown,
   FaToolsBadge,
+  GLOBAL_STYLES,
   HistoryPanel,
   InspectPanel,
   ListView,
@@ -420,5 +722,12 @@ export {
   PillButton,
   SectionLabel,
   SetupPanel,
+  exportProjectToZip,
+  formatTreeToMarkdown,
+  getFormattedTimestamp,
+  importProjectFromZip,
+  injectXMPMetadata,
+  parsePromptFile,
+  useKeyboardNavigation,
   useOnClickOutside
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rslsp1/fa-app-tools",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Shared tools and hooks for Fine Art flow apps",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -22,6 +22,9 @@
   "peerDependencies": {
     "react": ">=18"
   },
+  "dependencies": {
+    "jszip": "^3.10.1"
+  },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@xyflow/react": "^12.10.2",