@rslsp1/fa-app-tools 0.1.9 → 0.1.11

package/dist/index.d.mts

@@ -4,6 +4,32 @@ import { Node, Edge } from '@xyflow/react';
 
 declare function useOnClickOutside(ref: RefObject<HTMLElement | null>, handler: (e: MouseEvent | TouchEvent) => void): void;
 
+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 {
@@ -89,7 +115,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 +124,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 +136,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 +150,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, type Generation, HistoryPanel, InspectPanel, ListView, MediaLibrary, PillButton, type ProjectSettings, SectionLabel, SetupPanel, type WorkspaceTags, exportProjectToZip, formatTreeToMarkdown, importProjectFromZip, injectXMPMetadata, parsePromptFile, useOnClickOutside };

package/dist/index.d.ts

@@ -4,6 +4,32 @@ import { Node, Edge } from '@xyflow/react';
 
 declare function useOnClickOutside(ref: RefObject<HTMLElement | null>, handler: (e: MouseEvent | TouchEvent) => void): void;
 
+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 {
@@ -89,7 +115,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 +124,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 +136,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 +150,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, type Generation, HistoryPanel, InspectPanel, ListView, MediaLibrary, PillButton, type ProjectSettings, SectionLabel, SetupPanel, type WorkspaceTags, exportProjectToZip, formatTreeToMarkdown, importProjectFromZip, injectXMPMetadata, parsePromptFile, 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
@@ -29,6 +39,11 @@ __export(index_exports, {
   PillButton: () => PillButton,
   SectionLabel: () => SectionLabel,
   SetupPanel: () => SetupPanel,
+  exportProjectToZip: () => exportProjectToZip,
+  formatTreeToMarkdown: () => formatTreeToMarkdown,
+  importProjectFromZip: () => importProjectFromZip,
+  injectXMPMetadata: () => injectXMPMetadata,
+  parsePromptFile: () => parsePromptFile,
   useOnClickOutside: () => useOnClickOutside
 });
 module.exports = __toCommonJS(index_exports);
@@ -50,6 +65,265 @@ function useOnClickOutside(ref, handler) {
   }, [ref, handler]);
 }
 
+// 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() {
@@ -175,7 +449,7 @@ var HistoryPanel = ({ history, currentResultId, onSelect, onDelete }) => {
       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"}`,
       onClick: () => onSelect(gen),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-14 h-14 rounded-xl overflow-hidden bg-black shrink-0 border border-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: gen.base64?.startsWith("data:") ? gen.base64 : `data:image/png;base64,${gen.base64}`, className: "w-full h-full object-cover", alt: "Thumbnail" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-14 h-14 rounded-xl overflow-hidden bg-black shrink-0 border border-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime5.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" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 py-0.5 overflow-hidden", children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[7px] font-bold text-white/20 uppercase whitespace-nowrap", children: formatFriendlyTimestamp(gen.timestamp) }),
@@ -209,10 +483,10 @@ 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: [
-    /* @__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?.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-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" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "aspect-square w-full rounded-2xl bg-black overflow-hidden border border-white/10 shadow-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: currentResult.base64?.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}`, className: "w-full h-full object-cover", alt: "Preview" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "aspect-square w-full rounded-2xl bg-black overflow-hidden border border-white/10 shadow-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: currentResult.base64 ? currentResult.base64.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}` : "", className: "w-full h-full object-cover", alt: "Preview" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "p-4 bg-white/5 rounded-2xl border border-white/5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-[8px] font-bold text-white/20 uppercase mb-2 tracking-widest", children: "Prompt Details" }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-[10px] text-white/70 italic leading-relaxed font-medium", children: [
@@ -301,7 +575,7 @@ var SetupPanel = ({ onWorkspaceImport, onProjectExport, onProjectImport, project
 // src/components/MediaLibrary.tsx
 var import_react7 = 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: [
@@ -336,17 +610,23 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
         /* @__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)("img", { src: 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)("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();
         onToggleSelection?.(item.id);
       }, 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)) }) })
@@ -456,5 +736,10 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
   PillButton,
   SectionLabel,
   SetupPanel,
+  exportProjectToZip,
+  formatTreeToMarkdown,
+  importProjectFromZip,
+  injectXMPMetadata,
+  parsePromptFile,
   useOnClickOutside
 });

package/dist/index.mjs

@@ -15,6 +15,265 @@ function useOnClickOutside(ref, handler) {
   }, [ref, handler]);
 }
 
+// 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() {
@@ -140,7 +399,7 @@ var HistoryPanel = ({ history, currentResultId, onSelect, onDelete }) => {
       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"}`,
       onClick: () => onSelect(gen),
       children: [
-        /* @__PURE__ */ jsx5("div", { className: "w-14 h-14 rounded-xl overflow-hidden bg-black shrink-0 border border-white/5", children: /* @__PURE__ */ jsx5("img", { src: gen.base64?.startsWith("data:") ? gen.base64 : `data:image/png;base64,${gen.base64}`, className: "w-full h-full object-cover", alt: "Thumbnail" }) }),
+        /* @__PURE__ */ jsx5("div", { className: "w-14 h-14 rounded-xl overflow-hidden bg-black shrink-0 border border-white/5", children: /* @__PURE__ */ jsx5("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" }) }),
         /* @__PURE__ */ jsxs3("div", { className: "flex-1 py-0.5 overflow-hidden", children: [
           /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-1", children: [
             /* @__PURE__ */ jsx5("span", { className: "text-[7px] font-bold text-white/20 uppercase whitespace-nowrap", children: formatFriendlyTimestamp(gen.timestamp) }),
@@ -174,10 +433,10 @@ 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__ */ jsxs4(motion2.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 flex flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx6("div", { className: "flex-shrink-0 border-b border-white/5 bg-black/20 py-3 px-4", children: /* @__PURE__ */ jsx6("div", { className: "flex gap-2 overflow-x-auto no-scrollbar pb-1", children: history.map((gen) => /* @__PURE__ */ jsx6("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__ */ jsx6("img", { src: gen.base64?.startsWith("data:") ? gen.base64 : `data:image/png;base64,${gen.base64}`, className: "w-full h-full object-cover", alt: "Thumbnail" }) }, gen.id)) }) }),
+    /* @__PURE__ */ jsx6("div", { className: "flex-shrink-0 border-b border-white/5 bg-black/20 py-3 px-4", children: /* @__PURE__ */ jsx6("div", { className: "flex gap-2 overflow-x-auto no-scrollbar pb-1", children: history.map((gen) => /* @__PURE__ */ jsx6("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__ */ jsx6("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__ */ jsx6("div", { className: "flex-1 overflow-y-auto p-4 flex flex-col gap-6 dark-scrollbar pb-10", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ jsx6(SectionLabel, { children: "Vorschau" }),
-      /* @__PURE__ */ jsx6("div", { className: "aspect-square w-full rounded-2xl bg-black overflow-hidden border border-white/10 shadow-2xl", children: /* @__PURE__ */ jsx6("img", { src: currentResult.base64?.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}`, className: "w-full h-full object-cover", alt: "Preview" }) }),
+      /* @__PURE__ */ jsx6("div", { className: "aspect-square w-full rounded-2xl bg-black overflow-hidden border border-white/10 shadow-2xl", children: /* @__PURE__ */ jsx6("img", { src: currentResult.base64 ? currentResult.base64.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}` : "", className: "w-full h-full object-cover", alt: "Preview" }) }),
       /* @__PURE__ */ jsxs4("div", { className: "p-4 bg-white/5 rounded-2xl border border-white/5", children: [
         /* @__PURE__ */ jsx6("p", { className: "text-[8px] font-bold text-white/20 uppercase mb-2 tracking-widest", children: "Prompt Details" }),
         /* @__PURE__ */ jsxs4("p", { className: "text-[10px] text-white/70 italic leading-relaxed font-medium", children: [
@@ -266,7 +525,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: [
@@ -301,17 +560,23 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
         /* @__PURE__ */ jsx8("p", { className: "text-[10px] italic", children: "Importiere Assets aus deinem Projekt." })
       ] })
     ] }) : /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-2 gap-3 pb-10", children: items.map((item) => /* @__PURE__ */ jsxs6(motion4.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__ */ jsx8("img", { src: 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__ */ jsx8("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__ */ jsx8("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();
         onToggleSelection?.(item.id);
       }, 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)) }) })
@@ -420,5 +685,10 @@ export {
   PillButton,
   SectionLabel,
   SetupPanel,
+  exportProjectToZip,
+  formatTreeToMarkdown,
+  importProjectFromZip,
+  injectXMPMetadata,
+  parsePromptFile,
   useOnClickOutside
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rslsp1/fa-app-tools",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "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",