@rslsp1/fa-app-tools 1.0.1 → 1.0.3

package/dist/index.mjs

@@ -197,7 +197,7 @@ function generateMarkdownReport(nodes, history) {
   });
   return md;
 }
-async function exportProjectToZip(nodes, edges, history, galleryItems, settings) {
+async function exportProjectToZip(nodes, edges, history, galleryItems, settings, workspaceTags) {
   const zip = new JSZip();
   const projectData = {
     nodes,
@@ -205,6 +205,7 @@ async function exportProjectToZip(nodes, edges, history, galleryItems, settings)
     history: history.map((h) => ({ ...h, base64: void 0 })),
     galleryItems: galleryItems.map((g) => ({ ...g, base64: void 0 })),
     settings,
+    workspaceTags: workspaceTags || null,
     version: "1.2.6"
   };
   zip.file("project.json", JSON.stringify(projectData, null, 2));
@@ -293,14 +294,44 @@ function buildImageGenerationOptions(prompt, aspectRatio, model, referenceMediaI
   }
   return options;
 }
-function buildPromptTabPayload(selectedValues, instructions, treeText) {
+var CONTENT_FIRST = ["subject", "clothing", "environment", "mood", "action", "content", "general"];
+var RULES_LAST = ["system", "rules", "safety", "generated", "source", "status", "type", "model"];
+function categoryZone(cat) {
+  const c = cat.toLowerCase();
+  if (CONTENT_FIRST.some((k) => c.includes(k))) return 0;
+  if (RULES_LAST.some((k) => c.includes(k))) return 2;
+  return 1;
+}
+var ZONE_SEPARATORS = { 1: "\u2500\u2500\u2500\u2500 STYLE \u2500\u2500\u2500\u2500", 2: "\u2500\u2500\u2500\u2500 SYSTEM / RULES \u2500\u2500\u2500\u2500" };
+function buildPromptTabPayload(selectedTags, instructions, rules, treeText) {
   const parts = [];
   if (treeText) parts.push(`HIERARCHY:
 ${treeText}`);
-  if (selectedValues.length > 0) parts.push(`SELECTED TAGS:
-${selectedValues.join(", ")}`);
-  if (instructions.trim()) parts.push(`ADDITIONAL INSTRUCTIONS:
+  if (selectedTags.length > 0) {
+    const sorted = [...selectedTags].sort((a, b) => categoryZone(a.category) - categoryZone(b.category) || a.category.localeCompare(b.category));
+    const byCategory = sorted.reduce((acc, t) => {
+      (acc[t.category] = acc[t.category] || []).push(t);
+      return acc;
+    }, {});
+    const tagParts = [];
+    let lastZone = -1;
+    for (const [cat, tags] of Object.entries(byCategory)) {
+      const zone = categoryZone(cat);
+      if (lastZone >= 0 && zone > lastZone && ZONE_SEPARATORS[zone]) {
+        tagParts.push(ZONE_SEPARATORS[zone]);
+      }
+      tagParts.push(...tags.map((t) => `[${cat.toUpperCase()}]
+${t.value}`));
+      lastZone = zone;
+    }
+    parts.push(`SELECTED TAGS:
+
+${tagParts.join("\n\n")}`);
+  }
+  if (instructions.trim()) parts.push(`DESCRIPTION:
 ${instructions.trim()}`);
+  if (rules.trim()) parts.push(`GENERATION RULES:
+${rules.trim()}`);
   return [
     "Create a high-quality image generation prompt based on the following inputs. Translate everything to English.",
     `Return a JSON object with exactly two keys: "prompt" (the prompt string) and "feedback" (a short note on your choices in the user's language, or null).`,
@@ -529,9 +560,11 @@ var HistoryPanel = ({ history, currentResultId, onSelect, onDelete }) => {
 };
 
 // src/components/InspectPanel.tsx
+import { useMemo } from "react";
 import { motion as motion2 } from "motion/react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagToggle }) => {
+  const currentIndex = useMemo(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
   if (!currentResult) {
     return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center justify-center py-20 text-center gap-4 opacity-10", children: [
       /* @__PURE__ */ jsx6("span", { className: "material-symbols-outlined text-[64px]", children: "info" }),
@@ -543,7 +576,18 @@ var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagTogg
     /* @__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 ? 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: "aspect-square w-full rounded-2xl bg-black overflow-hidden border border-white/10 shadow-2xl relative", 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" }),
+        history.length > 1 && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx6("button", { onClick: () => currentIndex > 0 && onSelect(history[currentIndex - 1]), disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ jsx6("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
+          /* @__PURE__ */ jsx6("button", { onClick: () => currentIndex < history.length - 1 && onSelect(history[currentIndex + 1]), disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ jsx6("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
+          /* @__PURE__ */ jsxs4("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
+            currentIndex + 1,
+            " / ",
+            history.length
+          ] })
+        ] })
+      ] }),
       /* @__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: [
@@ -584,9 +628,8 @@ var InspectPanel = ({ currentResult, history, onSelect, workspaceTags, onTagTogg
 import { useRef as useRef2 } from "react";
 import { motion as motion3 } from "motion/react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var SetupPanel = ({ onWorkspaceImport, onProjectExport, onProjectImport, projectActionState }) => {
+var SetupPanel = ({ onWorkspaceImport, buildInfo }) => {
   const workspaceInputRef = useRef2(null);
-  const projectInputRef = useRef2(null);
   return /* @__PURE__ */ jsxs5(motion3.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 p-6 flex flex-col gap-10", children: [
     /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
@@ -600,30 +643,15 @@ var SetupPanel = ({ onWorkspaceImport, onProjectExport, onProjectImport, project
         e.target.value = "";
       } })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx7(SectionLabel, { children: "Projekt Management" }),
-        /* @__PURE__ */ jsx7("p", { className: "text-[9px] text-white/30 px-2 italic", children: "Speichere den gesamten Baum und alle Assets." })
-      ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx7(PillButton, { variant: "filled", icon: "download", onClick: onProjectExport, loading: projectActionState === "working", children: "Exportieren (.zip)" }),
-        /* @__PURE__ */ jsx7(PillButton, { variant: "outline", icon: "upload", onClick: () => projectInputRef.current?.click(), children: "Projekt laden (.zip)" }),
-        /* @__PURE__ */ jsx7("input", { ref: projectInputRef, type: "file", accept: ".zip", className: "hidden", onChange: (e) => {
-          const f = e.target.files?.[0];
-          if (f) onProjectImport(f);
-          e.target.value = "";
-        } })
-      ] })
-    ] }),
     /* @__PURE__ */ jsxs5("div", { className: "mt-auto p-4 bg-white/5 rounded-2xl border border-white/5 flex flex-col gap-2 opacity-50", children: [
       /* @__PURE__ */ jsx7("span", { className: "text-[8px] font-bold text-white/20 uppercase tracking-widest", children: "System Info" }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between text-[9px] text-white/40", children: [
-        /* @__PURE__ */ jsx7("span", { children: "Version" }),
-        /* @__PURE__ */ jsx7("span", { className: "font-mono", children: "1.2.0" })
-      ] }),
       /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between text-[9px] text-white/40", children: [
         /* @__PURE__ */ jsx7("span", { children: "Engine" }),
         /* @__PURE__ */ jsx7("span", { className: "font-mono", children: "Avatar Architect" })
+      ] }),
+      buildInfo && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between text-[9px] text-white/40", children: [
+        /* @__PURE__ */ jsx7("span", { children: "Build" }),
+        /* @__PURE__ */ jsx7("span", { className: "font-mono", children: buildInfo })
       ] })
     ] })
   ] });
@@ -784,17 +812,84 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
 }
 
 // src/components/AvatarArchitectApp.tsx
-import { useState as useState4, useCallback, useMemo, useEffect as useEffect4 } from "react";
-import { motion as motion6, AnimatePresence as AnimatePresence2 } from "motion/react";
+import { useState as useState6, useCallback, useMemo as useMemo2, useEffect as useEffect4, useRef as useRef6 } from "react";
 
 // src/components/PromptTab.tsx
+import { useRef as useRef4, useState as useState4 } from "react";
+
+// src/components/CollapsibleCard.tsx
 import { useState as useState3 } from "react";
-import { motion as motion5, AnimatePresence } from "motion/react";
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
-var PromptTab = ({ workspaceTags, onGenerate, isGenerating, feedback }) => {
-  const [selectedLabels, setSelectedLabels] = useState3(/* @__PURE__ */ new Set());
-  const [instructions, setInstructions] = useState3("");
-  const [showFeedback, setShowFeedback] = useState3(true);
+var CollapsibleCard = ({
+  title,
+  icon,
+  actions,
+  children,
+  defaultOpen = true,
+  collapsible = true,
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = useState3(defaultOpen);
+  return /* @__PURE__ */ jsxs8("div", { className: `border border-neutral-800 rounded-lg ${className}`, children: [
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: `flex items-center justify-between px-4 py-3 bg-neutral-900/50 ${collapsible ? "cursor-pointer active:bg-neutral-800/70 select-none" : ""}`,
+        onClick: () => collapsible && setIsOpen((o) => !o),
+        children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+            icon && /* @__PURE__ */ jsx10("span", { className: "text-neutral-400", children: icon }),
+            /* @__PURE__ */ jsx10("span", { className: "text-sm font-bold uppercase tracking-widest text-neutral-300", children: title })
+          ] }),
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+            actions && /* @__PURE__ */ jsx10("div", { onClick: (e) => e.stopPropagation(), children: actions }),
+            collapsible && /* @__PURE__ */ jsx10("span", { className: "material-symbols-outlined text-[16px] text-neutral-500", children: isOpen ? "expand_less" : "expand_more" })
+          ] })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx10("div", { children })
+  ] });
+};
+
+// src/components/PromptTab.tsx
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var EXCLUDED = ["pdf-export", "book.micro-edit-rules"];
+var LONG_PRESS_MS = 500;
+var PromptTab = ({
+  workspaceTags,
+  onGenerate,
+  isGenerating,
+  feedback,
+  promptResult,
+  lastPayload,
+  onGenerateImage,
+  isGeneratingImage,
+  onRandom,
+  onTokenize,
+  isTokenizing,
+  onScanImage,
+  isScanning,
+  onExpand,
+  isExpanding,
+  onTagCreate,
+  onTagUpdate,
+  onTagDelete
+}) => {
+  const [selectedLabels, setSelectedLabels] = useState4(/* @__PURE__ */ new Set());
+  const [instructions, setInstructions] = useState4("");
+  const [rules, setRules] = useState4("");
+  const [activeCategory, setActiveCategory] = useState4(null);
+  const [copied, setCopied] = useState4(false);
+  const imgInputRef = useRef4(null);
+  const [addingInCat, setAddingInCat] = useState4(null);
+  const [newLabel, setNewLabel] = useState4("");
+  const [newValue, setNewValue] = useState4("");
+  const [editingTag, setEditingTag] = useState4(null);
+  const [editLabel, setEditLabel] = useState4("");
+  const [editValue, setEditValue] = useState4("");
+  const longPressTimer = useRef4(null);
+  const longPressActivated = useRef4(false);
   const toggleTag = (label) => {
     setSelectedLabels((prev) => {
       const next = new Set(prev);
@@ -804,96 +899,670 @@ var PromptTab = ({ workspaceTags, onGenerate, isGenerating, feedback }) => {
     });
   };
   const handleGenerate = () => {
-    const selectedValues = workspaceTags.all.filter((t) => selectedLabels.has(t.label)).map((t) => t.value);
-    onGenerate(selectedValues, instructions);
+    const selectedTags = workspaceTags.all.filter((t) => selectedLabels.has(t.label) && !t.is_deleted).map((t) => ({ label: t.label, value: t.value, category: t.category }));
+    onGenerate(selectedTags, instructions, rules);
   };
-  const categories = Object.entries(workspaceTags.by_category).filter(([, tags]) => tags.length > 0);
-  return /* @__PURE__ */ jsxs8("div", { className: "absolute inset-0 flex flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex-1 overflow-y-auto dark-scrollbar px-3 py-3 flex flex-col gap-4", children: [
-      categories.length === 0 ? /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-center justify-center py-16 gap-3 opacity-20", children: [
-        /* @__PURE__ */ jsx10("span", { className: "material-symbols-outlined text-[48px]", children: "label_off" }),
-        /* @__PURE__ */ jsxs8("p", { className: "text-[9px] font-bold uppercase tracking-widest text-center", children: [
+  const handleCopy = () => {
+    if (!promptResult) return;
+    navigator.clipboard.writeText(promptResult).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    });
+  };
+  const startLongPress = (tag, cat) => {
+    longPressActivated.current = false;
+    longPressTimer.current = setTimeout(() => {
+      longPressActivated.current = true;
+      setEditingTag({ ...tag, category: cat });
+      setEditLabel(tag.label);
+      setEditValue(tag.value);
+    }, LONG_PRESS_MS);
+  };
+  const cancelLongPress = () => {
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+    }
+  };
+  const handleTagClick = (label) => {
+    if (longPressActivated.current) return;
+    toggleTag(label);
+  };
+  const handleSaveEdit = () => {
+    if (!editingTag || !editLabel.trim()) return;
+    onTagUpdate?.(editingTag.label, editingTag.category, {
+      label: editLabel.trim(),
+      value: editValue.trim() || editLabel.trim()
+    });
+    setSelectedLabels((prev) => {
+      const next = new Set(prev);
+      if (next.has(editingTag.label)) {
+        next.delete(editingTag.label);
+        next.add(editLabel.trim());
+      }
+      return next;
+    });
+    setEditingTag(null);
+  };
+  const handleDeleteTag = () => {
+    if (!editingTag) return;
+    onTagDelete?.(editingTag.label, editingTag.category);
+    setSelectedLabels((prev) => {
+      const next = new Set(prev);
+      next.delete(editingTag.label);
+      return next;
+    });
+    setEditingTag(null);
+  };
+  const handleCreateBased = () => {
+    if (!editingTag) return;
+    setAddingInCat(editingTag.category);
+    setActiveCategory(editingTag.category);
+    setNewLabel(editingTag.label);
+    setNewValue(editingTag.value);
+    setEditingTag(null);
+  };
+  const categories = Object.entries(workspaceTags.by_category).filter(([cat, tags]) => !EXCLUDED.includes(cat) && tags.some((t) => !t.is_deleted));
+  const tagToolbar = /* @__PURE__ */ jsxs9("div", { className: "flex gap-1.5", children: [
+    /* @__PURE__ */ jsx11(
+      "button",
+      {
+        onClick: onRandom,
+        disabled: !onRandom,
+        className: "text-[9px] font-bold uppercase px-2 py-1 rounded border border-neutral-700 text-neutral-400 active:bg-neutral-800 disabled:opacity-30",
+        children: "RANDOM"
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      "button",
+      {
+        onClick: onTokenize,
+        disabled: !onTokenize || isTokenizing || !instructions,
+        className: "text-[9px] font-bold uppercase px-2 py-1 rounded border border-neutral-700 text-neutral-400 active:bg-neutral-800 disabled:opacity-30",
+        children: isTokenizing ? "..." : "TOKENIZE"
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      "button",
+      {
+        onClick: () => imgInputRef.current?.click(),
+        disabled: !onScanImage || isScanning,
+        className: "text-[9px] font-bold uppercase px-2 py-1 rounded border border-neutral-700 text-neutral-400 active:bg-neutral-800 disabled:opacity-30",
+        children: isScanning ? "..." : "SCAN"
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      "input",
+      {
+        ref: imgInputRef,
+        type: "file",
+        accept: "image/*",
+        className: "hidden",
+        onChange: (e) => {
+          if (e.target.files?.[0] && onScanImage) onScanImage(e.target.files[0]);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      "button",
+      {
+        onClick: onExpand,
+        disabled: !onExpand || isExpanding || !instructions,
+        className: "text-[9px] font-bold uppercase px-2 py-1 rounded border border-neutral-700 text-neutral-400 active:bg-neutral-800 disabled:opacity-30",
+        children: isExpanding ? "..." : "EXPAND"
+      }
+    )
+  ] });
+  const canGenerate = selectedLabels.size > 0 || instructions.trim().length > 0 || rules.trim().length > 0;
+  return /* @__PURE__ */ jsxs9("div", { className: "absolute inset-0 overflow-y-auto dark-scrollbar flex flex-col", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-3 p-3 pb-6", children: [
+      categories.length === 0 ? /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-center justify-center py-16 gap-3 opacity-20", children: [
+        /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[48px]", children: "label_off" }),
+        /* @__PURE__ */ jsxs9("p", { className: "text-[9px] font-bold uppercase tracking-widest text-center", children: [
           "Keine Tags geladen.",
-          /* @__PURE__ */ jsx10("br", {}),
+          /* @__PURE__ */ jsx11("br", {}),
           "Importiere ein Workspace-JSON im Setup-Tab."
         ] })
-      ] }) : categories.map(([cat, tags]) => /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx10(SectionLabel, { children: cat }),
-        /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-1", children: tags.map((t) => {
-          const active = selectedLabels.has(t.label);
-          return /* @__PURE__ */ jsx10(
-            "button",
+      ] }) : /* @__PURE__ */ jsx11(
+        CollapsibleCard,
+        {
+          title: "INHALT",
+          icon: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[18px]", children: "layers" }),
+          defaultOpen: true,
+          children: categories.map(([cat, tags]) => {
+            const visibleTags = tags.filter((t) => !t.is_deleted);
+            const selectedInCat = visibleTags.filter((t) => selectedLabels.has(t.label));
+            const isOpen = activeCategory === cat;
+            const isAdding = addingInCat === cat;
+            const commitNewTag = () => {
+              if (!newLabel.trim()) return;
+              const valueToUse = newValue.trim() || newLabel.trim();
+              onTagCreate?.({ label: newLabel.trim(), value: valueToUse, category: cat, is_user_created: true });
+              setNewLabel("");
+              setNewValue("");
+              setAddingInCat(null);
+            };
+            return /* @__PURE__ */ jsxs9("div", { className: "border-b border-neutral-800 last:border-0", children: [
+              /* @__PURE__ */ jsxs9("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxs9(
+                  "button",
+                  {
+                    onClick: () => setActiveCategory(isOpen ? null : cat),
+                    className: "flex-grow flex items-center justify-between px-4 py-3 active:bg-white/5",
+                    children: [
+                      /* @__PURE__ */ jsx11("span", { className: "text-sm font-bold tracking-widest uppercase text-blue-400", children: cat }),
+                      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 min-w-0", children: [
+                        selectedInCat.length > 0 && /* @__PURE__ */ jsx11("span", { className: "text-[10px] text-green-400 truncate max-w-[150px]", children: selectedInCat.map((t) => t.label).join(", ") }),
+                        /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[16px] text-white/30 shrink-0", children: isOpen ? "expand_less" : "expand_more" })
+                      ] })
+                    ]
+                  }
+                ),
+                onTagCreate && /* @__PURE__ */ jsx11(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setAddingInCat(isAdding ? null : cat);
+                      setActiveCategory(cat);
+                      setNewLabel("");
+                      setNewValue("");
+                    },
+                    className: "px-3 py-3 text-white/20 active:text-white/60 hover:text-white/50 transition-colors",
+                    title: "Neues Tag anlegen",
+                    children: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[16px]", children: "add" })
+                  }
+                )
+              ] }),
+              isOpen && /* @__PURE__ */ jsx11("div", { className: "px-4 pb-3 flex flex-wrap gap-1.5", children: visibleTags.map((t) => {
+                const active = selectedLabels.has(t.label);
+                return /* @__PURE__ */ jsx11(
+                  "button",
+                  {
+                    onMouseDown: () => startLongPress(t, cat),
+                    onMouseUp: cancelLongPress,
+                    onMouseLeave: cancelLongPress,
+                    onTouchStart: () => startLongPress(t, cat),
+                    onTouchEnd: cancelLongPress,
+                    onTouchCancel: cancelLongPress,
+                    onContextMenu: (e) => e.preventDefault(),
+                    onClick: () => handleTagClick(t.label),
+                    className: `px-2.5 py-1.5 rounded text-xs font-medium border transition-colors ${active ? "bg-blue-900/50 text-blue-200 border-blue-700" : "bg-blue-900/20 text-blue-400 border-blue-900/50 active:bg-blue-900/40 active:text-blue-200"} ${t.is_user_created ? "border-dashed" : ""}`,
+                    children: t.label
+                  },
+                  t.label
+                );
+              }) }),
+              isAdding && /* @__PURE__ */ jsxs9("div", { className: "px-4 pb-3 space-y-2 border-t border-neutral-800/50 pt-2", children: [
+                /* @__PURE__ */ jsx11(
+                  "input",
+                  {
+                    autoFocus: true,
+                    value: newLabel,
+                    onChange: (e) => setNewLabel(e.target.value),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        commitNewTag();
+                      }
+                    },
+                    placeholder: "Label (z.B. Picasso)",
+                    className: "w-full bg-black border border-neutral-700 rounded px-3 py-1.5 text-xs text-white outline-none focus:border-blue-600"
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  "textarea",
+                  {
+                    value: newValue,
+                    onChange: (e) => setNewValue(e.target.value),
+                    placeholder: "Value (Prompt-Text) \u2014 leer l\xE4sst Label als Value",
+                    rows: 3,
+                    className: "w-full bg-black border border-neutral-700 rounded px-3 py-1.5 text-xs text-white outline-none focus:border-blue-600 resize-none"
+                  }
+                ),
+                /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsxs9(
+                    "button",
+                    {
+                      onClick: commitNewTag,
+                      disabled: !newLabel.trim(),
+                      className: "flex items-center gap-1 px-3 py-1.5 rounded text-xs font-bold bg-blue-700 text-white disabled:opacity-30 active:bg-blue-600",
+                      children: [
+                        /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[14px]", children: "check" }),
+                        " Speichern"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx11(
+                    "button",
+                    {
+                      onClick: () => {
+                        setAddingInCat(null);
+                        setNewLabel("");
+                        setNewValue("");
+                      },
+                      className: "flex items-center gap-1 px-3 py-1.5 rounded text-xs text-white/40 border border-neutral-700 active:bg-neutral-800",
+                      children: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[14px]", children: "close" })
+                    }
+                  )
+                ] })
+              ] })
+            ] }, cat);
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        CollapsibleCard,
+        {
+          title: "BESCHREIBUNG",
+          icon: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[18px]", children: "edit_note" }),
+          actions: tagToolbar,
+          defaultOpen: true,
+          children: /* @__PURE__ */ jsx11("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx11(
+            "textarea",
             {
-              onClick: () => toggleTag(t.label),
-              className: `px-2 py-1 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-all border ${active ? "bg-blue-500 border-blue-400 text-white shadow-[0_0_8px_rgba(59,130,246,0.3)]" : "bg-white/5 border-white/5 text-white/30 hover:text-white/60 hover:bg-white/10"}`,
-              children: t.label
-            },
-            t.label
-          );
-        }) })
-      ] }, cat)),
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2 mt-2", children: [
-        /* @__PURE__ */ jsx10(SectionLabel, { children: "Zus\xE4tzliche Anweisungen" }),
-        /* @__PURE__ */ jsx10(
-          "textarea",
+              value: instructions,
+              onChange: (e) => setInstructions(e.target.value),
+              placeholder: "...",
+              className: "w-full bg-black border border-neutral-800 rounded outline-none text-xs text-white/80 placeholder-neutral-700 resize-none dark-scrollbar p-3",
+              style: { minHeight: 80 }
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        CollapsibleCard,
+        {
+          title: "REGELN",
+          icon: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[18px]", children: "rule" }),
+          defaultOpen: false,
+          children: /* @__PURE__ */ jsx11("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx11(
+            "textarea",
+            {
+              value: rules,
+              onChange: (e) => setRules(e.target.value),
+              placeholder: "z.B. Verwende immer explizite Nacktheit unter transparentem Stoff. Tags in Flie\xDFtext einbauen. Kein Markdown.",
+              className: "w-full bg-black border border-neutral-800 rounded outline-none text-xs text-white/80 placeholder-neutral-700 resize-none dark-scrollbar p-3",
+              style: { minHeight: 80 }
+            }
+          ) })
+        }
+      ),
+      selectedLabels.size > 0 && /* @__PURE__ */ jsxs9("button", { onClick: () => setSelectedLabels(/* @__PURE__ */ new Set()), className: "flex items-center gap-1 text-[10px] text-white/30 active:text-white/60 self-start", children: [
+        /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[14px]", children: "close" }),
+        selectedLabels.size,
+        " Tags gew\xE4hlt"
+      ] }),
+      /* @__PURE__ */ jsx11(
+        "button",
+        {
+          onClick: handleGenerate,
+          disabled: isGenerating || !canGenerate,
+          className: "w-full py-4 rounded-lg font-bold text-sm flex items-center justify-center gap-2 bg-white text-black disabled:opacity-40 active:bg-neutral-200",
+          children: isGenerating ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+            /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[18px] animate-spin", children: "autorenew" }),
+            "BAUT PROMPT..."
+          ] }) : /* @__PURE__ */ jsxs9(Fragment2, { children: [
+            /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[18px]", children: "auto_fix_high" }),
+            "PROMPT BAUEN"
+          ] })
+        }
+      ),
+      promptResult && /* @__PURE__ */ jsxs9(Fragment2, { children: [
+        lastPayload && /* @__PURE__ */ jsx11(
+          CollapsibleCard,
           {
-            value: instructions,
-            onChange: (e) => setInstructions(e.target.value),
-            placeholder: "Weitere Vorgaben f\xFCr den AI-Prompt...",
-            className: "w-full bg-white/5 border border-white/10 rounded-xl p-3 text-[10px] text-white/70 placeholder-white/20 resize-none h-20 outline-none focus:border-white/20 dark-scrollbar"
+            title: "INPUT MONITOR",
+            icon: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[18px]", children: "terminal" }),
+            defaultOpen: false,
+            children: /* @__PURE__ */ jsx11("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx11("pre", { className: "text-[10px] font-mono text-blue-300/80 bg-blue-950/10 border border-blue-900/20 rounded p-3 overflow-x-auto whitespace-pre-wrap leading-relaxed", children: lastPayload }) })
+          }
+        ),
+        feedback && /* @__PURE__ */ jsx11(
+          CollapsibleCard,
+          {
+            title: "ANALYSE",
+            icon: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[18px]", children: "chat" }),
+            defaultOpen: true,
+            children: /* @__PURE__ */ jsx11("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx11("p", { className: "text-xs font-mono text-orange-200/80 bg-orange-950/10 border border-orange-900/20 rounded p-3 leading-relaxed", children: feedback }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs9("div", { className: "border border-neutral-800 rounded-lg", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-4 py-3 bg-neutral-900/50 rounded-t-lg", children: [
+            /* @__PURE__ */ jsx11("span", { className: "text-[10px] font-bold uppercase tracking-widest text-neutral-400", children: "Prompt" }),
+            /* @__PURE__ */ jsxs9(
+              "button",
+              {
+                onClick: handleCopy,
+                className: "flex items-center gap-1.5 text-[9px] font-bold uppercase px-2 py-1 rounded border border-neutral-700 text-neutral-400 active:bg-neutral-800",
+                children: [
+                  /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[14px]", children: copied ? "check" : "content_copy" }),
+                  copied ? "KOPIERT" : "KOPIEREN"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx11("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx11("p", { className: "text-xs text-white/80 leading-relaxed italic", children: promptResult }) })
+        ] }),
+        onGenerateImage && /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            onClick: () => onGenerateImage(promptResult),
+            disabled: isGeneratingImage,
+            className: "w-full py-4 rounded-lg bg-white text-black font-bold text-sm flex items-center justify-center gap-2 disabled:opacity-40 active:bg-neutral-200",
+            children: [
+              /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[18px]", children: isGeneratingImage ? "hourglass_empty" : "image" }),
+              isGeneratingImage ? "GENERIERE..." : "GENERIEREN"
+            ]
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "shrink-0 border-t border-white/5 p-3 flex flex-col gap-2", children: [
-      feedback && /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxs8(
-          "button",
+    editingTag && /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-end justify-center",
+        style: { background: "rgba(0,0,0,0.75)" },
+        onClick: () => setEditingTag(null),
+        children: /* @__PURE__ */ jsxs9(
+          "div",
           {
-            onClick: () => setShowFeedback((p) => !p),
-            className: "flex items-center gap-1.5 text-[8px] font-bold uppercase text-amber-400/60 hover:text-amber-400 transition-colors mb-1",
+            className: "w-full max-w-lg bg-[#1c1c1c] border border-neutral-700 rounded-t-2xl p-5 space-y-4",
+            onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsx10("span", { className: "material-symbols-outlined text-[12px]", children: "psychology" }),
-              "KI-Analyse",
-              /* @__PURE__ */ jsx10("span", { className: "material-symbols-outlined text-[12px] ml-auto", children: showFeedback ? "expand_less" : "expand_more" })
+              /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx11("span", { className: "text-[10px] font-bold text-neutral-400 uppercase tracking-widest", children: editingTag.category }),
+                /* @__PURE__ */ jsx11("button", { onClick: () => setEditingTag(null), className: "text-white/30 active:text-white", children: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[20px]", children: "close" }) })
+              ] }),
+              /* @__PURE__ */ jsx11(
+                "input",
+                {
+                  autoFocus: true,
+                  value: editLabel,
+                  onChange: (e) => setEditLabel(e.target.value),
+                  placeholder: "Label",
+                  className: "w-full bg-black border border-neutral-700 rounded px-3 py-2 text-sm text-white outline-none focus:border-blue-600"
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "textarea",
+                {
+                  value: editValue,
+                  onChange: (e) => setEditValue(e.target.value),
+                  placeholder: "Value (Prompt-Text)",
+                  rows: 4,
+                  className: "w-full bg-black border border-neutral-700 rounded px-3 py-2 text-xs text-white outline-none focus:border-blue-600 resize-none"
+                }
+              ),
+              /* @__PURE__ */ jsxs9("div", { className: "flex gap-2 flex-wrap", children: [
+                /* @__PURE__ */ jsxs9(
+                  "button",
+                  {
+                    onClick: handleSaveEdit,
+                    disabled: !editLabel.trim(),
+                    className: "flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 rounded text-sm font-bold bg-blue-700 text-white disabled:opacity-30 active:bg-blue-600",
+                    children: [
+                      /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[16px]", children: "check" }),
+                      " Speichern"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs9(
+                  "button",
+                  {
+                    onClick: handleCreateBased,
+                    className: "flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 rounded text-sm font-bold border border-neutral-600 text-white/70 active:bg-neutral-800",
+                    children: [
+                      /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[16px]", children: "content_copy" }),
+                      " Neu auf Basis"
+                    ]
+                  }
+                ),
+                onTagDelete && /* @__PURE__ */ jsx11(
+                  "button",
+                  {
+                    onClick: handleDeleteTag,
+                    className: "flex items-center justify-center gap-1.5 px-3 py-2.5 rounded text-sm font-bold border border-red-900/60 text-red-400 active:bg-red-900/20",
+                    children: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[16px]", children: "delete" })
+                  }
+                )
+              ] })
             ]
           }
+        )
+      }
+    )
+  ] });
+};
+
+// src/components/ProjectSyncTab.tsx
+import { useRef as useRef5, useState as useState5 } from "react";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var ProjectSyncTab = ({
+  onProjectExport,
+  onProjectImport,
+  onWorkspaceImport,
+  projectActionState,
+  serverProjects,
+  onServerSave,
+  onServerLoad,
+  onServerDelete,
+  onRefreshServerProjects,
+  onComputeSyncDiff,
+  onExecuteSync
+}) => {
+  const projectInputRef = useRef5(null);
+  const workspaceInputRef = useRef5(null);
+  const [saveName, setSaveName] = useState5("");
+  const [isSaving, setIsSaving] = useState5(false);
+  const [isExporting, setIsExporting] = useState5(false);
+  const [syncState, setSyncState] = useState5("idle");
+  const [syncDiff, setSyncDiff] = useState5(null);
+  const [selectedLocalIds, setSelectedLocalIds] = useState5(/* @__PURE__ */ new Set());
+  const handleExport = async () => {
+    if (!onProjectExport) return;
+    setIsExporting(true);
+    try {
+      await onProjectExport();
+    } finally {
+      setIsExporting(false);
+    }
+  };
+  const handleComputeDiff = async () => {
+    if (!onComputeSyncDiff) return;
+    setSyncState("computing");
+    setSyncDiff(null);
+    try {
+      const diff = await onComputeSyncDiff();
+      setSyncDiff(diff);
+      setSelectedLocalIds(new Set(diff.localOnly.map((g) => g.id)));
+      setSyncState("ready");
+    } catch {
+      setSyncState("error");
+      setTimeout(() => setSyncState("idle"), 4e3);
+    }
+  };
+  const handleExecuteSync = async () => {
+    if (!onExecuteSync || !syncDiff) return;
+    setSyncState("executing");
+    try {
+      await onExecuteSync([...selectedLocalIds]);
+      setSyncState("done");
+      setSyncDiff(null);
+      setTimeout(() => setSyncState("idle"), 3e3);
+    } catch {
+      setSyncState("error");
+      setTimeout(() => setSyncState("idle"), 4e3);
+    }
+  };
+  const toggleLocalId = (id) => {
+    setSelectedLocalIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const isWorking = projectActionState === "working" || projectActionState === "working-full";
+  return /* @__PURE__ */ jsx12("div", { className: "absolute inset-0 overflow-y-auto dark-scrollbar", children: /* @__PURE__ */ jsxs10("div", { className: "p-6 flex flex-col gap-8", children: [
+    (onProjectExport || onProjectImport || onWorkspaceImport) && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx12(SectionLabel, { children: "Projekt-ZIP" }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2", children: [
+        onProjectExport && /* @__PURE__ */ jsx12(PillButton, { variant: "filled", icon: "download", loading: isExporting || isWorking, onClick: handleExport, children: "Exportieren (.zip)" }),
+        onProjectImport && /* @__PURE__ */ jsxs10(Fragment3, { children: [
+          /* @__PURE__ */ jsx12(PillButton, { variant: "outline", icon: "upload", onClick: () => projectInputRef.current?.click(), children: "ZIP laden" }),
+          /* @__PURE__ */ jsx12(
+            "input",
+            {
+              ref: projectInputRef,
+              type: "file",
+              accept: ".zip",
+              className: "hidden",
+              onChange: (e) => {
+                const f = e.target.files?.[0];
+                if (f) onProjectImport(f);
+                e.target.value = "";
+              }
+            }
+          )
+        ] })
+      ] }),
+      onWorkspaceImport && /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        /* @__PURE__ */ jsx12(PillButton, { variant: "outline", icon: "upload_file", onClick: () => workspaceInputRef.current?.click(), children: "Tags laden (.json)" }),
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            ref: workspaceInputRef,
+            type: "file",
+            accept: ".json",
+            className: "hidden",
+            onChange: (e) => {
+              const f = e.target.files?.[0];
+              if (f) onWorkspaceImport(f);
+              e.target.value = "";
+            }
+          }
+        )
+      ] })
+    ] }),
+    (onServerSave || serverProjects || onServerDelete) && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx12(SectionLabel, { children: "Server-Speicher" }),
+      onServerSave && /* @__PURE__ */ jsxs10("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            type: "text",
+            value: saveName,
+            onChange: (e) => setSaveName(e.target.value),
+            placeholder: "Name (optional)",
+            className: "flex-1 bg-white/5 border border-white/10 rounded-xl px-3 text-[12px] text-white/70 outline-none placeholder:text-white/20",
+            style: { height: 40 }
+          }
         ),
-        /* @__PURE__ */ jsx10(AnimatePresence, { children: showFeedback && /* @__PURE__ */ jsx10(
-          motion5.div,
+        /* @__PURE__ */ jsx12(
+          PillButton,
           {
-            initial: { height: 0, opacity: 0 },
-            animate: { height: "auto", opacity: 1 },
-            exit: { height: 0, opacity: 0 },
-            className: "overflow-hidden",
-            children: /* @__PURE__ */ jsx10("p", { className: "text-[9px] text-amber-400/50 leading-relaxed bg-amber-500/5 border border-amber-500/10 rounded-xl p-2 italic", children: feedback })
+            variant: "filled",
+            icon: "cloud_upload",
+            loading: isSaving,
+            onClick: async () => {
+              setIsSaving(true);
+              try {
+                await onServerSave(saveName || void 0);
+                setSaveName("");
+                await onRefreshServerProjects?.();
+              } finally {
+                setIsSaving(false);
+              }
+            },
+            children: "Speichern"
           }
-        ) })
+        )
+      ] }),
+      (!serverProjects || serverProjects.length === 0) && /* @__PURE__ */ jsx12("p", { className: "text-[10px] text-white/20 px-2", children: "Noch nichts gespeichert." }),
+      serverProjects && serverProjects.length > 0 && /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-1", children: serverProjects.map((p) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-white/5 border border-white/5", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx12("p", { className: "text-[11px] text-white/70 font-bold truncate", children: p.name }),
+          /* @__PURE__ */ jsxs10("p", { className: "text-[9px] text-white/25", children: [
+            new Date(p.saved_at).toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" }),
+            " \xB7 ",
+            (p.size / 1024).toFixed(0),
+            " KB"
+          ] })
+        ] }),
+        onServerLoad && /* @__PURE__ */ jsx12("button", { onClick: () => onServerLoad(p.id), className: "w-8 h-8 flex items-center justify-center text-white/30 active:text-white transition-colors", children: /* @__PURE__ */ jsx12("span", { className: "material-symbols-outlined text-[18px]", children: "cloud_download" }) }),
+        /* @__PURE__ */ jsx12("button", { onClick: () => onServerDelete?.(p.id), className: "w-8 h-8 flex items-center justify-center text-white/20 active:text-red-400 transition-colors", children: /* @__PURE__ */ jsx12("span", { className: "material-symbols-outlined text-[18px]", children: "delete" }) })
+      ] }, p.id)) })
+    ] }),
+    onComputeSyncDiff && onExecuteSync && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx12(SectionLabel, { children: "Sync" }),
+      (syncState === "idle" || syncState === "computing") && /* @__PURE__ */ jsx12(PillButton, { variant: "outline", icon: "compare_arrows", loading: syncState === "computing", onClick: handleComputeDiff, children: "Diff berechnen" }),
+      syncState === "done" && /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 px-2 text-[11px] text-green-400", children: [
+        /* @__PURE__ */ jsx12("span", { className: "material-symbols-outlined text-[16px]", children: "check_circle" }),
+        "Sync abgeschlossen"
       ] }),
-      /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
-        selectedLabels.size > 0 ? /* @__PURE__ */ jsxs8("span", { className: "text-[8px] text-white/30 font-bold uppercase", children: [
-          selectedLabels.size,
-          " Tags gew\xE4hlt"
-        ] }) : /* @__PURE__ */ jsx10("span", { className: "text-[8px] text-white/20 italic", children: "Keine Tags gew\xE4hlt" }),
-        /* @__PURE__ */ jsx10(
+      syncState === "error" && /* @__PURE__ */ jsx12("p", { className: "text-[11px] text-red-400 px-2", children: "Fehler beim Sync." }),
+      syncDiff && (syncState === "ready" || syncState === "executing") && /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        syncDiff.localOnly.length === 0 && syncDiff.serverOnly.length === 0 && /* @__PURE__ */ jsx12("p", { className: "text-[10px] text-white/30 px-2", children: "Alles synchron \u2014 keine Unterschiede." }),
+        syncDiff.localOnly.length > 0 && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs10("p", { className: "text-[9px] text-white/30 uppercase tracking-widest px-1 font-bold", children: [
+            "Nur lokal (",
+            syncDiff.localOnly.length,
+            ")"
+          ] }),
+          syncDiff.localOnly.map((gen) => /* @__PURE__ */ jsxs10(
+            "button",
+            {
+              onClick: () => toggleLocalId(gen.id),
+              className: `flex items-center gap-3 px-3 py-2 rounded-xl border transition-all text-left ${selectedLocalIds.has(gen.id) ? "bg-blue-500/10 border-blue-500/30" : "bg-white/3 border-white/5 opacity-60"}`,
+              children: [
+                /* @__PURE__ */ jsx12("div", { className: `w-4 h-4 rounded border flex items-center justify-center flex-shrink-0 ${selectedLocalIds.has(gen.id) ? "bg-blue-500 border-blue-500" : "border-white/20"}`, children: selectedLocalIds.has(gen.id) && /* @__PURE__ */ jsx12("span", { className: "material-symbols-outlined text-[11px] text-white", children: "check" }) }),
+                gen.base64 && /* @__PURE__ */ jsx12("img", { src: gen.base64, className: "w-10 h-10 rounded object-cover flex-shrink-0" }),
+                /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx12("p", { className: "text-[10px] text-white/60 truncate", children: gen.prompt || "Kein Prompt" }),
+                  /* @__PURE__ */ jsx12("p", { className: "text-[9px] text-white/25", children: new Date(gen.timestamp).toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" }) })
+                ] })
+              ]
+            },
+            gen.id
+          ))
+        ] }),
+        syncDiff.serverOnly.length > 0 && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs10("p", { className: "text-[9px] text-white/30 uppercase tracking-widest px-1 font-bold", children: [
+            "Nur auf Server (",
+            syncDiff.serverOnly.length,
+            ")"
+          ] }),
+          syncDiff.serverOnly.map((gen) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3 px-3 py-2 rounded-xl bg-white/3 border border-white/5 opacity-40", children: [
+            gen.base64 && /* @__PURE__ */ jsx12("img", { src: gen.base64, className: "w-10 h-10 rounded object-cover flex-shrink-0" }),
+            /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx12("p", { className: "text-[10px] text-white/60 truncate", children: gen.prompt || "Kein Prompt" }),
+              /* @__PURE__ */ jsx12("p", { className: "text-[9px] text-white/25", children: new Date(gen.timestamp).toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" }) })
+            ] })
+          ] }, gen.id))
+        ] }),
+        (syncDiff.localOnly.length > 0 || syncDiff.serverOnly.length > 0) && /* @__PURE__ */ jsxs10(
           PillButton,
           {
             variant: "solid",
-            icon: "auto_fix_high",
-            loading: isGenerating,
-            disabled: selectedLabels.size === 0 && !instructions.trim(),
-            onClick: handleGenerate,
-            children: "Prompt bauen"
+            icon: "sync",
+            loading: syncState === "executing",
+            disabled: selectedLocalIds.size === 0,
+            onClick: handleExecuteSync,
+            children: [
+              selectedLocalIds.size,
+              " \xFCbertragen"
+            ]
           }
         )
       ] })
     ] })
-  ] });
+  ] }) });
 };
 
 // src/components/AvatarArchitectApp.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia }) {
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
   useEffect4(() => {
     const id = "flow-styles";
     if (!document.getElementById(id)) {
@@ -903,28 +1572,122 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       document.head.appendChild(style);
     }
   }, []);
-  const [nodes, setNodes] = useState4([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
-  const [edges, setEdges] = useState4([]);
-  const [history, setHistory] = useState4([]);
-  const [galleryItems, setGalleryItems] = useState4([]);
-  const [activePrompt, setActivePrompt] = useState4("");
-  const [isSynthesizing, setIsSynthesizing] = useState4(false);
-  const [activeGenerationsCount, setActiveGenerationsCount] = useState4(0);
-  const [currentResult, setCurrentResult] = useState4(null);
-  const [focusedNodeId, setFocusedNodeId] = useState4(null);
-  const [leftTab, setLeftTab] = useState4("hierarchy");
-  const [promptFeedback, setPromptFeedback] = useState4(null);
-  const [isPromptTabGenerating, setIsPromptTabGenerating] = useState4(false);
-  const [activeTab, setActiveTab] = useState4("history");
-  const [aspectRatio, setAspectRatio] = useState4("1:1");
-  const [selectedModel, setSelectedModel] = useState4("\u{1F34C} Nano Banana Pro");
-  const [seed, setSeed] = useState4(Math.floor(Math.random() * 1e6));
-  const [seedMode, setSeedMode] = useState4("random");
-  const [isLeftCollapsed, setIsLeftCollapsed] = useState4(false);
-  const [isRightCollapsed, setIsRightCollapsed] = useState4(false);
-  const [isPromptCollapsed, setIsPromptCollapsed] = useState4(false);
-  const [projectActionState, setProjectActionState] = useState4("idle");
-  const [workspaceTags, setWorkspaceTags] = useState4(null);
+  const [showStart, setShowStart] = useState6(true);
+  const [layoutChoice, setLayoutChoice] = useState6(() => {
+    try {
+      return localStorage.getItem("aa-layout") || null;
+    } catch {
+      return null;
+    }
+  });
+  const [projectLoaded, setProjectLoaded] = useState6(false);
+  const wsInputRef = useRef6(null);
+  const startApp = (choice) => {
+    try {
+      localStorage.setItem("aa-layout", choice);
+    } catch {
+    }
+    setLayoutChoice(choice);
+    setShowStart(false);
+  };
+  const [nodes, setNodes] = useState6([{ id: "1", type: "custom", position: { x: 0, y: 0 }, data: { label: "Fine Art Project", placeholder: "Name..." } }]);
+  const [edges, setEdges] = useState6([]);
+  const [history, setHistory] = useState6([]);
+  const [galleryItems, setGalleryItems] = useState6([]);
+  const [activePrompt, setActivePrompt] = useState6("");
+  const [isSynthesizing, setIsSynthesizing] = useState6(false);
+  const [activeGenerationsCount, setActiveGenerationsCount] = useState6(0);
+  const [currentResult, setCurrentResult] = useState6(null);
+  const [focusedNodeId, setFocusedNodeId] = useState6(null);
+  const [leftTab, setLeftTab] = useState6("prompt");
+  const [promptFeedback, setPromptFeedback] = useState6(null);
+  const [lastPromptPayload, setLastPromptPayload] = useState6(null);
+  const [isPromptTabGenerating, setIsPromptTabGenerating] = useState6(false);
+  const [activeTab, setActiveTab] = useState6("history");
+  const [mobileTab, setMobileTab] = useState6("stage");
+  const [aspectRatio, setAspectRatio] = useState6("1:1");
+  const [selectedModel, setSelectedModel] = useState6("\u{1F34C} Nano Banana Pro");
+  const [seed, setSeed] = useState6(Math.floor(Math.random() * 1e6));
+  const [seedMode, setSeedMode] = useState6("random");
+  const [isLeftCollapsed, setIsLeftCollapsed] = useState6(false);
+  const [isRightCollapsed, setIsRightCollapsed] = useState6(false);
+  const [isPromptCollapsed, setIsPromptCollapsed] = useState6(false);
+  const [projectActionState, setProjectActionState] = useState6("idle");
+  const syncServerDataRef = useRef6(null);
+  const [workspaceTags, setWorkspaceTags] = useState6(null);
+  const [serverProjects, setServerProjects] = useState6([]);
+  const [isLoadingFromServer, setIsLoadingFromServer] = useState6(false);
+  const [highContrast, setHighContrast] = useState6(() => {
+    try {
+      return localStorage.getItem("aa-contrast") === "high";
+    } catch {
+      return false;
+    }
+  });
+  const [touchStartX, setTouchStartX] = useState6(null);
+  const [isFullscreen, setIsFullscreen] = useState6(false);
+  const [zoomScale, setZoomScale] = useState6(1);
+  const [zoomOffset, setZoomOffset] = useState6({ x: 0, y: 0 });
+  const lastPinchDist = useRef6(null);
+  const lastTapTime = useRef6(0);
+  const dragStart = useRef6(null);
+  const openFullscreen = () => {
+    setIsFullscreen(true);
+    setZoomScale(1);
+    setZoomOffset({ x: 0, y: 0 });
+  };
+  const closeFullscreen = () => {
+    setIsFullscreen(false);
+    setZoomScale(1);
+    setZoomOffset({ x: 0, y: 0 });
+  };
+  const handleFsTouchStart = (e) => {
+    if (e.touches.length === 2) {
+      lastPinchDist.current = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
+    } else if (e.touches.length === 1) {
+      const now = Date.now();
+      if (now - lastTapTime.current < 280) {
+        setZoomScale((s) => s > 1 ? 1 : 2.5);
+        setZoomOffset({ x: 0, y: 0 });
+      }
+      lastTapTime.current = now;
+      dragStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY, ox: zoomOffset.x, oy: zoomOffset.y };
+    }
+  };
+  const handleFsTouchMove = (e) => {
+    if (e.touches.length === 2 && lastPinchDist.current !== null) {
+      const dist = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
+      setZoomScale((s) => Math.min(Math.max(s * (dist / lastPinchDist.current), 1), 5));
+      lastPinchDist.current = dist;
+    } else if (e.touches.length === 1 && dragStart.current && zoomScale > 1) {
+      setZoomOffset({ x: dragStart.current.ox + e.touches[0].clientX - dragStart.current.x, y: dragStart.current.oy + e.touches[0].clientY - dragStart.current.y });
+    }
+  };
+  const handleFsTouchEnd = (e) => {
+    lastPinchDist.current = null;
+    if (e.changedTouches.length === 1 && zoomScale <= 1 && dragStart.current) {
+      const dx = e.changedTouches[0].clientX - dragStart.current.x;
+      if (dx < -50) goToNext();
+      else if (dx > 50) goToPrev();
+    }
+    dragStart.current = null;
+  };
+  const toggleContrast = () => {
+    const next = !highContrast;
+    setHighContrast(next);
+    try {
+      localStorage.setItem("aa-contrast", next ? "high" : "low");
+    } catch {
+    }
+  };
+  const currentIndex = useMemo2(() => history.findIndex((h) => h.id === currentResult?.id), [history, currentResult]);
+  const goToPrev = useCallback(() => {
+    if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
+  }, [currentIndex, history]);
+  const goToNext = useCallback(() => {
+    if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
+  }, [currentIndex, history]);
+  const hcStyle = highContrast ? { filter: "brightness(1.6) contrast(1.05)" } : void 0;
   const isGenerating = activeGenerationsCount > 0;
   useKeyboardNavigation(history, currentResult, setCurrentResult);
   const getSubtreeFormat = useCallback((nodeId, depth = 0) => {
@@ -935,7 +1698,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     return `${indent}- ${node.data.label || "(unbenannt)"}
 ` + childrenIds.map((id) => getSubtreeFormat(id, depth + 1)).join("");
   }, [nodes, edges]);
-  const activePath = useMemo(() => {
+  const activePath = useMemo2(() => {
     if (!focusedNodeId) return /* @__PURE__ */ new Set();
     const path = /* @__PURE__ */ new Set([focusedNodeId]);
     let currId = focusedNodeId;
@@ -953,22 +1716,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     setActiveGenerationsCount((prev) => prev + 1);
     const genId = crypto.randomUUID();
     const activeSeed = seedMode === "random" ? Math.floor(Math.random() * 1e9) : seed;
-    const newGen = {
-      id: genId,
-      nodeId: overrideNodeId || focusedNodeId || "1",
-      status: "processing",
-      timestamp: Date.now(),
-      prompt: promptToUse,
-      seed: activeSeed,
-      model: selectedModel,
-      tags: [],
-      type: "generation"
-    };
+    const newGen = { id: genId, nodeId: overrideNodeId || focusedNodeId || "1", status: "processing", timestamp: Date.now(), prompt: promptToUse, seed: activeSeed, model: selectedModel, tags: [], type: "generation" };
     setHistory((prev) => [newGen, ...prev]);
     if (!options.silent) setCurrentResult(newGen);
     if (seedMode === "random") setSeed(activeSeed);
     try {
-      const { base64, mediaId } = await onGenerateImage(promptToUse, aspectRatio, selectedModel, useReferenceId);
+      const { base64, mediaId } = await onGenerateImage(buildImageGenerationOptions(promptToUse, aspectRatio, selectedModel, useReferenceId));
       const finishedGen = { ...newGen, status: "done", base64: `data:image/png;base64,${base64}`, mediaId };
       setHistory((prev) => prev.map((g) => g.id === genId ? finishedGen : g));
       setGalleryItems((prev) => [finishedGen, ...prev]);
@@ -988,22 +1741,60 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
   const handleSynthesizePrompt = async (nodeId, autoGenerate = false) => {
     setIsSynthesizing(true);
     try {
-      const raw = await onGeneratePrompt(getSubtreeFormat(nodeId));
-      setActivePrompt(raw);
+      const payload = buildGenerationPrompt(getSubtreeFormat(nodeId));
+      const raw = await onGeneratePrompt(payload);
+      const prompt = cleanAiResponse(raw);
+      setActivePrompt(prompt);
       setFocusedNodeId(nodeId);
-      if (autoGenerate) handleGenerateImage(raw, void 0, nodeId);
+      if (autoGenerate) handleGenerateImage(prompt, void 0, nodeId);
     } catch {
       setActivePrompt("Synthese-Fehler");
     } finally {
       setIsSynthesizing(false);
     }
   };
-  const handlePromptTabGenerate = async (selectedValues, instructions) => {
+  const handleTagCreate = (tag) => {
+    setWorkspaceTags((prev) => {
+      if (!prev) return prev;
+      const newTagOption = { label: tag.label, value: tag.value, is_user_created: true };
+      const updatedCat = [...prev.by_category[tag.category] || [], newTagOption];
+      return {
+        by_category: { ...prev.by_category, [tag.category]: updatedCat },
+        all: [...prev.all, { ...newTagOption, category: tag.category }]
+      };
+    });
+  };
+  const handleTagUpdate = (originalLabel, originalCategory, updates) => {
+    setWorkspaceTags((prev) => {
+      if (!prev) return prev;
+      const updatedCat = (prev.by_category[originalCategory] || []).map(
+        (t) => t.label === originalLabel ? { ...t, ...updates } : t
+      );
+      const updatedAll = prev.all.map(
+        (t) => t.label === originalLabel && t.category === originalCategory ? { ...t, ...updates } : t
+      );
+      return { by_category: { ...prev.by_category, [originalCategory]: updatedCat }, all: updatedAll };
+    });
+  };
+  const handleTagDelete = (label, category) => {
+    setWorkspaceTags((prev) => {
+      if (!prev) return prev;
+      const updatedCat = (prev.by_category[category] || []).map(
+        (t) => t.label === label ? { ...t, is_deleted: true } : t
+      );
+      const updatedAll = prev.all.map(
+        (t) => t.label === label && t.category === category ? { ...t, is_deleted: true } : t
+      );
+      return { by_category: { ...prev.by_category, [category]: updatedCat }, all: updatedAll };
+    });
+  };
+  const handlePromptTabGenerate = async (selectedTags, instructions, rules) => {
     setIsPromptTabGenerating(true);
     setPromptFeedback(null);
     try {
       const treeText = focusedNodeId ? getSubtreeFormat(focusedNodeId) : void 0;
-      const payload = buildPromptTabPayload(selectedValues, instructions, treeText);
+      const payload = buildPromptTabPayload(selectedTags, instructions, rules, treeText);
+      setLastPromptPayload(payload);
       const raw = await onGeneratePrompt(payload);
       const { prompt, feedback } = parsePromptResponse(raw);
       setActivePrompt(prompt);
@@ -1020,9 +1811,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       const base64Data = currentResult.base64.split(",")[1];
       const mimeType = currentResult.base64.split(";")[0].split(":")[1] || "image/png";
       let finalBase64 = base64Data;
-      if (mimeType === "image/png") {
-        finalBase64 = injectXMPMetadata(base64Data, currentResult.prompt || "", currentResult.seed, currentResult.model, currentResult.id, currentResult.tags || [], getSubtreeFormat(currentResult.nodeId));
-      }
+      if (mimeType === "image/png") finalBase64 = injectXMPMetadata(base64Data, currentResult.prompt || "", currentResult.seed, currentResult.model, currentResult.id, currentResult.tags || [], getSubtreeFormat(currentResult.nodeId));
       await onDownload(finalBase64, mimeType, `avatar_${currentResult.id.slice(0, 5)}.${mimeType.split("/")[1]}`);
     } catch (e) {
       console.error("Download Error", e);
@@ -1031,7 +1820,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
   const handleProjectExport = async () => {
     setProjectActionState("working-full");
     try {
-      const { base64 } = await exportProjectToZip(nodes, edges, history, galleryItems, { aspectRatio, selectedModel, seed, seedMode });
+      const { base64 } = await exportProjectToZip(nodes, edges, history, galleryItems, { aspectRatio, selectedModel, seed, seedMode }, workspaceTags);
       await onDownload(base64, "application/zip", `avatar_project_${getFormattedTimestamp()}.zip`);
       setProjectActionState("done");
       setTimeout(() => setProjectActionState("idle"), 3e3);
@@ -1047,7 +1836,10 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       const data = await importProjectFromZip(file);
       if (data.nodes) setNodes(data.nodes);
       if (data.edges) setEdges(data.edges);
-      if (data.history) setHistory(data.history);
+      if (data.history) {
+        setHistory(data.history);
+        if (data.history.length > 0) setCurrentResult(data.history[0]);
+      }
       if (data.galleryItems) setGalleryItems(data.galleryItems);
       if (data.settings) {
         setAspectRatio(data.settings.aspectRatio || "1:1");
@@ -1055,7 +1847,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         setSeed(data.settings.seed || 0);
         setSeedMode(data.settings.seedMode || "random");
       }
+      if (data.workspaceTags?.by_category) setWorkspaceTags(data.workspaceTags);
       setProjectActionState("done");
+      setProjectLoaded(true);
       setTimeout(() => setProjectActionState("idle"), 2e3);
     } catch {
       setProjectActionState("error");
@@ -1070,12 +1864,12 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         const rawTags = root.tags || root;
         if (!rawTags?.by_category) return;
         const filtered = {};
-        const EXCLUDED = ["pdf-export", "book.micro-edit-rules"];
+        const EXCLUDED2 = ["pdf-export", "book.micro-edit-rules"];
         Object.entries(rawTags.by_category).forEach(([cat, items]) => {
-          if (EXCLUDED.includes(cat) || !Array.isArray(items)) return;
+          if (EXCLUDED2.includes(cat) || !Array.isArray(items)) return;
           filtered[cat] = items.filter((t) => t && typeof t === "object" && t.label && t.value);
         });
-        const filteredAll = (rawTags.all || []).filter((t) => t && !EXCLUDED.includes(t.category));
+        const filteredAll = (rawTags.all || []).filter((t) => t && !EXCLUDED2.includes(t.category));
         setWorkspaceTags({ by_category: filtered, all: filteredAll });
       } catch (err) {
         console.error("Workspace Load failed", err);
@@ -1083,37 +1877,571 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     };
     reader.readAsText(file);
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", children: [
-    /* @__PURE__ */ jsxs9(motion6.div, { animate: { width: isLeftCollapsed ? 48 : 260 }, className: "flex flex-col border-r border-white/5 overflow-hidden relative bg-black/10 shrink-0", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
-        !isLeftCollapsed && /* @__PURE__ */ jsxs9("div", { className: "flex flex-1 gap-1", children: [
-          /* @__PURE__ */ jsxs9(
-            "button",
+  const fetchServerProjects = async () => {
+    if (!onFetchServerProjects) return;
+    try {
+      setServerProjects(await onFetchServerProjects());
+    } catch {
+    }
+  };
+  const handleServerSave = async (name) => {
+    if (!onServerSave) return;
+    setProjectActionState("working-full");
+    try {
+      const { base64 } = await exportProjectToZip(nodes, edges, history, galleryItems, { aspectRatio, selectedModel, seed, seedMode }, workspaceTags);
+      await onServerSave(base64, name || `avatar_project_${getFormattedTimestamp()}`);
+      await fetchServerProjects();
+      setProjectActionState("done");
+      setTimeout(() => setProjectActionState("idle"), 2e3);
+    } catch {
+      setProjectActionState("error");
+      setTimeout(() => setProjectActionState("idle"), 4e3);
+    }
+  };
+  const handleServerLoad = async (id) => {
+    if (!onServerLoad) return;
+    const file = await onServerLoad(id);
+    await handleProjectImport(file);
+  };
+  const handleServerDelete = async (id) => {
+    if (!onServerDelete) return;
+    await onServerDelete(id);
+    await fetchServerProjects();
+  };
+  const handleComputeSyncDiff = async () => {
+    if (!onFetchServerProjects || !onServerLoad) throw new Error("Server nicht konfiguriert");
+    const projects = await onFetchServerProjects();
+    if (projects.length === 0) return { localOnly: [...history], serverOnly: [] };
+    const file = await onServerLoad(projects[0].id);
+    const serverData = await importProjectFromZip(file);
+    syncServerDataRef.current = serverData;
+    const localOnly = history.filter((h) => !(serverData.history || []).find((s) => s.id === h.id));
+    const serverOnly = (serverData.history || []).filter((s) => !history.find((h) => h.id === s.id));
+    return { localOnly, serverOnly };
+  };
+  const handleExecuteSync = async (selectedLocalIds) => {
+    const serverData = syncServerDataRef.current;
+    if (!serverData || !onServerSave) return;
+    setProjectActionState("working-full");
+    try {
+      const selectedLocal = history.filter((h) => selectedLocalIds.includes(h.id));
+      const mergedHistory = [...serverData.history || [], ...selectedLocal];
+      const { base64 } = await exportProjectToZip(
+        serverData.nodes || nodes,
+        serverData.edges || edges,
+        mergedHistory,
+        serverData.galleryItems || galleryItems,
+        serverData.settings || { aspectRatio, selectedModel, seed, seedMode },
+        serverData.workspaceTags || workspaceTags
+      );
+      await onServerSave(base64, `sync_${getFormattedTimestamp()}`);
+      await fetchServerProjects();
+      setProjectActionState("done");
+      setTimeout(() => setProjectActionState("idle"), 2e3);
+    } catch {
+      setProjectActionState("error");
+      setTimeout(() => setProjectActionState("idle"), 4e3);
+    }
+  };
+  useEffect4(() => {
+    if (activeTab === "setup" || activeTab === "sync") fetchServerProjects();
+  }, [activeTab]);
+  if (isFullscreen && currentResult?.base64) {
+    const fsBase64 = currentResult.base64.startsWith("data:") ? currentResult.base64 : `data:image/png;base64,${currentResult.base64}`;
+    return /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: "fixed inset-0 bg-black z-50 flex items-center justify-center overflow-hidden touch-none",
+        onTouchStart: handleFsTouchStart,
+        onTouchMove: handleFsTouchMove,
+        onTouchEnd: handleFsTouchEnd,
+        children: [
+          /* @__PURE__ */ jsx13(
+            "img",
             {
-              onClick: () => setLeftTab("hierarchy"),
-              className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "hierarchy" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`,
-              children: [
-                /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
-                "Hierarchie"
-              ]
+              src: fsBase64,
+              alt: "",
+              draggable: false,
+              style: {
+                width: "100%",
+                height: "100%",
+                objectFit: "contain",
+                transform: `scale(${zoomScale}) translate(${zoomOffset.x / zoomScale}px, ${zoomOffset.y / zoomScale}px)`,
+                transformOrigin: "center center",
+                userSelect: "none",
+                pointerEvents: "none"
+              }
             }
           ),
-          workspaceTags && /* @__PURE__ */ jsxs9(
-            "button",
+          /* @__PURE__ */ jsx13("button", { onClick: closeFullscreen, className: "absolute top-4 right-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[22px]", children: "close" }) }),
+          zoomScale > 1 && /* @__PURE__ */ jsx13("button", { onClick: () => {
+            setZoomScale(1);
+            setZoomOffset({ x: 0, y: 0 });
+          }, className: "absolute top-4 left-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[20px]", children: "zoom_out_map" }) }),
+          history.length > 1 && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+            /* @__PURE__ */ jsx13("button", { onClick: () => {
+              if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
+            }, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
+            /* @__PURE__ */ jsx13("button", { onClick: () => {
+              if (currentIndex < history.length - 1) setCurrentResult(history[currentIndex + 1]);
+            }, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
+            /* @__PURE__ */ jsxs11("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
+              currentIndex + 1,
+              " / ",
+              history.length
+            ] })
+          ] }),
+          zoomScale === 1 && /* @__PURE__ */ jsx13("div", { className: "absolute bottom-6 right-4 text-[9px] text-white/20 font-mono", children: "Pinch zum Zoomen \xB7 Doppeltipp 2.5\xD7" })
+        ]
+      }
+    );
+  }
+  if (showStart) {
+    return /* @__PURE__ */ jsxs11("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
+      /* @__PURE__ */ jsx13("input", { ref: wsInputRef, type: "file", accept: ".zip", className: "hidden", onChange: (e) => {
+        const f = e.target.files?.[0];
+        if (f) handleProjectImport(f);
+        e.target.value = "";
+      } }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-1", children: [
+        /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
+        /* @__PURE__ */ jsx13("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" })
+      ] }),
+      /* @__PURE__ */ jsxs11(
+        "button",
+        {
+          onClick: toggleContrast,
+          className: "flex items-center gap-3 px-5 py-3 rounded-2xl border transition-colors",
+          style: { borderColor: highContrast ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.08)", background: highContrast ? "rgba(255,255,255,0.08)" : "transparent" },
+          children: [
+            /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[22px]", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.35)" }, children: highContrast ? "light_mode" : "dark_mode" }),
+            /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-start", children: [
+              /* @__PURE__ */ jsx13("span", { className: "text-[13px] font-bold", style: { color: highContrast ? "#fff" : "rgba(255,255,255,0.5)" }, children: highContrast ? "Hoher Kontrast" : "Normaler Kontrast" }),
+              /* @__PURE__ */ jsx13("span", { className: "text-[10px]", style: { color: "rgba(255,255,255,0.25)" }, children: "Tippen zum Umschalten" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
+        /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            onClick: () => wsInputRef.current?.click(),
+            className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform",
+            style: { height: 56, background: projectLoaded ? "#16a34a" : "#0284c7" },
+            children: [
+              /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[22px]", children: projectLoaded ? "check_circle" : "folder_zip" }),
+              projectLoaded ? "Projekt geladen \u2713" : "Projekt laden (.zip)"
+            ]
+          }
+        ),
+        !projectLoaded && /* @__PURE__ */ jsx13("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
+      ] }),
+      onFetchServerProjects && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
+        /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            disabled: isLoadingFromServer,
+            onClick: async () => {
+              setIsLoadingFromServer(true);
+              try {
+                const projects = await onFetchServerProjects();
+                setServerProjects(projects);
+                if (projects.length > 0 && onServerLoad) {
+                  const file = await onServerLoad(projects[0].id);
+                  await handleProjectImport(file);
+                }
+              } catch {
+              } finally {
+                setIsLoadingFromServer(false);
+              }
+            },
+            className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform disabled:opacity-50",
+            style: { height: 56, background: "#7c3aed" },
+            children: [
+              /* @__PURE__ */ jsx13("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromServer ? " animate-spin" : ""}`, children: isLoadingFromServer ? "sync" : "cloud_download" }),
+              isLoadingFromServer ? "Laden\u2026" : "Vom Server laden"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx13("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand vom Server wiederherstellen" })
+      ] }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
+        /* @__PURE__ */ jsx13("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
+        /* @__PURE__ */ jsx13("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
+          { id: "mobile", icon: "smartphone", label: "Mobile" },
+          { id: "mobile-desktop", icon: "phonelink", label: "Mobile+" },
+          { id: "desktop", icon: "desktop_windows", label: "Desktop" },
+          { id: "tablet-landscape", icon: "tablet", label: "Landscape" }
+        ].map((opt) => /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            onClick: () => startApp(opt.id),
+            className: "flex flex-col items-center gap-2 py-4 rounded-2xl border transition-colors",
+            style: { borderColor: layoutChoice === opt.id ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.08)", background: layoutChoice === opt.id ? "rgba(255,255,255,0.07)" : "transparent" },
+            children: [
+              /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[24px]", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.icon }),
+              /* @__PURE__ */ jsx13("span", { className: "text-[11px] font-bold", style: { color: layoutChoice === opt.id ? "#fff" : "rgba(255,255,255,0.4)" }, children: opt.label })
+            ]
+          },
+          opt.id
+        )) }),
+        layoutChoice === "mobile-desktop" && /* @__PURE__ */ jsx13("span", { className: "text-white/20 text-[9px] text-center", children: "Mobil-Layout skaliert f\xFCr Desktop-Modus" }),
+        layoutChoice === "tablet-landscape" && /* @__PURE__ */ jsx13("span", { className: "text-white/20 text-[9px] text-center", children: "2-Spalten-Layout f\xFCr Landscape-Tablet im Desktop-Mode" })
+      ] })
+    ] });
+  }
+  if (layoutChoice === "mobile" || layoutChoice === "mobile-desktop") {
+    const mdMode = layoutChoice === "mobile-desktop";
+    const mdScale = mdMode ? window.innerWidth / 430 : 1;
+    const mdW = mdMode ? 430 : void 0;
+    const mdH = mdMode ? Math.ceil(window.innerHeight / mdScale) : void 0;
+    const mobileRoot = /* @__PURE__ */ jsxs11("div", { className: "flex flex-col bg-[#0e0e0e] text-white overflow-hidden", style: {
+      width: mdMode ? mdW : "100vw",
+      height: mdMode ? mdH : "100dvh",
+      transform: mdMode ? `scale(${mdScale})` : void 0,
+      transformOrigin: mdMode ? "top left" : void 0,
+      ...hcStyle || {}
+    }, children: [
+      mobileTab === "stage" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col flex-1 min-h-0", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
+          /* @__PURE__ */ jsx13(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
+          /* @__PURE__ */ jsx13(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
+          /* @__PURE__ */ jsx13("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsx13("button", { onClick: toggleContrast, className: "text-white/20 active:text-white/60 transition-colors mr-2", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[20px]", children: highContrast ? "light_mode" : "dark_mode" }) }),
+          /* @__PURE__ */ jsx13("button", { onClick: () => setShowStart(true), className: "text-white/20 active:text-white/60 transition-colors mr-1", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[20px]", children: "desktop_windows" }) })
+        ] }),
+        /* @__PURE__ */ jsx13("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ jsxs11("div", { className: `relative rounded-xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
+          /* @__PURE__ */ jsx13(
+            "textarea",
             {
-              onClick: () => setLeftTab("prompt"),
-              className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "prompt" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`,
+              value: activePrompt,
+              onChange: (e) => setActivePrompt(e.target.value),
+              className: "w-full bg-transparent border-none outline-none text-[14px] leading-relaxed text-white/80 resize-none dark-scrollbar px-4 pt-3 pb-3",
+              style: { height: 80 },
+              placeholder: "Prompt eingeben..."
+            }
+          ),
+          activePrompt && !isSynthesizing && /* @__PURE__ */ jsx13("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center text-white/20 active:text-white transition-colors", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[18px]", children: "close" }) })
+        ] }) }),
+        /* @__PURE__ */ jsx13("div", { className: "px-3 pb-3 shrink-0", children: /* @__PURE__ */ jsx13(
+          "button",
+          {
+            onClick: () => handleGenerateImage(),
+            disabled: !activePrompt.trim() || isGenerating,
+            className: "w-full flex items-center justify-center gap-2 rounded-xl font-bold text-[14px] uppercase tracking-wide transition-all disabled:opacity-30 active:scale-95",
+            style: { height: 48, background: activePrompt.trim() && !isGenerating ? "#0284c7" : void 0, border: "1px solid rgba(255,255,255,0.1)" },
+            children: isGenerating ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
+              /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 border-t-2 border-white rounded-full animate-spin" }),
+              /* @__PURE__ */ jsx13("span", { children: "Generiere..." })
+            ] }) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
+              /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[20px]", children: "bolt" }),
+              /* @__PURE__ */ jsx13("span", { children: "Generieren" })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex-1 min-h-0 px-3 pb-3 flex flex-col", children: [
+          /* @__PURE__ */ jsxs11(
+            "div",
+            {
+              className: "w-full rounded-2xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center",
+              style: { aspectRatio: "1/1" },
+              onTouchStart: (e) => setTouchStartX(e.touches[0].clientX),
+              onTouchEnd: (e) => {
+                if (touchStartX === null) return;
+                const dx = e.changedTouches[0].clientX - touchStartX;
+                if (dx < -50) goToNext();
+                else if (dx > 50) goToPrev();
+                setTouchStartX(null);
+              },
               children: [
-                /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
-                "Prompt"
+                currentResult?.status === "processing" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-3", children: [
+                  /* @__PURE__ */ jsx13("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
+                  /* @__PURE__ */ jsx13("span", { className: "text-[11px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
+                ] }),
+                currentResult?.status === "error" && /* @__PURE__ */ jsxs11("div", { className: "p-6 text-center flex flex-col items-center gap-3", children: [
+                  /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-red-400 text-[36px]", children: "warning" }),
+                  /* @__PURE__ */ jsx13("p", { className: "text-white/50 text-[13px]", children: currentResult.error?.message }),
+                  /* @__PURE__ */ jsx13("button", { onClick: () => handleGenerateImage(currentResult.prompt), className: "px-4 py-2 rounded-lg border border-white/20 text-[13px] text-white/70 active:bg-white/10", children: "Erneut versuchen" })
+                ] }),
+                currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx13("img", { src: currentResult.base64, className: "w-full h-full object-contain" }),
+                !currentResult && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
+                  /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[64px]", children: "palette" }),
+                  /* @__PURE__ */ jsx13("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
+                ] }),
+                currentResult?.status === "done" && /* @__PURE__ */ jsx13("button", { onClick: openFullscreen, className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center rounded-full bg-black/60 border border-white/10 z-10", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[18px]", children: "fullscreen" }) }),
+                history.length > 1 && currentResult && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+                  /* @__PURE__ */ jsx13("button", { onClick: goToPrev, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
+                  /* @__PURE__ */ jsx13("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
+                  /* @__PURE__ */ jsxs11("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
+                    currentIndex + 1,
+                    " / ",
+                    history.length
+                  ] })
+                ] })
               ]
             }
+          ),
+          currentResult?.status === "done" && /* @__PURE__ */ jsxs11("div", { className: "flex gap-2 mt-3", children: [
+            /* @__PURE__ */ jsxs11("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
+              /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "replay" }),
+              /* @__PURE__ */ jsx13("span", { className: "text-[12px] text-white/60", children: "Prompt" })
+            ] }),
+            /* @__PURE__ */ jsxs11("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl bg-white/10 active:bg-white/15 transition-colors", style: { height: 44 }, children: [
+              /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[18px] text-white/80", children: "auto_fix_high" }),
+              /* @__PURE__ */ jsx13("span", { className: "text-[12px] text-white/80 font-bold", children: "Referenz" })
+            ] }),
+            /* @__PURE__ */ jsxs11("button", { onClick: handleDownloadSingle, className: "flex-1 flex items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/5 active:bg-white/10 transition-colors", style: { height: 44 }, children: [
+              /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[18px] text-white/60", children: "download" }),
+              /* @__PURE__ */ jsx13("span", { className: "text-[12px] text-white/60", children: "Laden" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      mobileTab === "browse" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col flex-1 min-h-0", children: [
+        /* @__PURE__ */ jsx13("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: ["history", "gallery", "inspect"].map((tab) => /* @__PURE__ */ jsx13("button", { onClick: () => setActiveTab(tab), className: `flex-1 flex items-center justify-center gap-1.5 transition-colors text-[11px] font-bold uppercase tracking-wide ${activeTab === tab ? "text-white border-b-2 border-white" : "text-white/30"}`, children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : "info" }) }, tab)) }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex-1 overflow-hidden relative", children: [
+          activeTab === "history" && /* @__PURE__ */ jsx13(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: (g) => {
+            setCurrentResult(g);
+            setMobileTab("stage");
+          }, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
+          activeTab === "gallery" && /* @__PURE__ */ jsx13(
+            MediaLibrary,
+            {
+              items: galleryItems,
+              onImport: async () => {
+                const media = await onSelectMedia();
+                if (!media?.length) return;
+                setGalleryItems((prev) => [...media.map((m) => ({ id: crypto.randomUUID(), nodeId: "1", base64: `data:${m.mimeType};base64,${m.base64}`, mediaId: m.mediaId, prompt: m.name || "Importiert", timestamp: Date.now(), status: "done", tags: [], type: "import" })), ...prev]);
+              },
+              onDelete: (id) => setGalleryItems((g) => g.filter((x) => x.id !== id)),
+              onSelect: (g) => {
+                setCurrentResult(g);
+                setMobileTab("stage");
+              },
+              onGenerateReference: (item) => {
+                handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true });
+                setMobileTab("stage");
+              }
+            }
+          ),
+          activeTab === "inspect" && /* @__PURE__ */ jsx13(InspectPanel, { currentResult, history, onSelect: (g) => {
+            setCurrentResult(g);
+          } })
+        ] })
+      ] }),
+      mobileTab === "tools" && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col flex-1 min-h-0", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex border-b border-white/5 shrink-0", style: { height: 52 }, children: [
+          workspaceTags && /* @__PURE__ */ jsxs11("button", { onClick: () => {
+            setLeftTab("prompt");
+            if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
+          }, className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${leftTab === "prompt" && activeTab !== "setup" && activeTab !== "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
+            /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[20px]", children: "auto_fix_high" }),
+            "Prompt"
+          ] }),
+          /* @__PURE__ */ jsxs11("button", { onClick: () => {
+            setLeftTab("hierarchy");
+            if (activeTab === "setup" || activeTab === "sync") setActiveTab("history");
+          }, className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
+            /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[20px]", children: "account_tree" }),
+            "Hierarchie"
+          ] }),
+          /* @__PURE__ */ jsxs11("button", { onClick: () => setActiveTab("setup"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "setup" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
+            /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[20px]", children: "settings" }),
+            "Setup"
+          ] }),
+          /* @__PURE__ */ jsxs11("button", { onClick: () => setActiveTab("sync"), className: `flex-1 flex items-center justify-center gap-1.5 text-[11px] font-bold uppercase tracking-wide transition-colors ${activeTab === "sync" ? "text-white border-b-2 border-white" : "text-white/30"}`, children: [
+            /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[20px]", children: "cloud_sync" }),
+            "Sync"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex-1 overflow-hidden relative", children: [
+          leftTab === "hierarchy" && activeTab !== "setup" && activeTab !== "sync" && /* @__PURE__ */ jsx13("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx13(
+            ListView,
+            {
+              nodes,
+              edges,
+              onNodeChange: (id, l) => setNodes((nds) => nds.map((n) => n.id === id ? { ...n, data: { ...n.data, label: l } } : n)),
+              onAddChild: (pId) => {
+                const newId = crypto.randomUUID();
+                setNodes((nds) => [...nds, { id: newId, type: "custom", position: { x: 0, y: 0 }, data: { label: "", placeholder: "Konzept..." } }]);
+                setEdges((eds) => [...eds, { id: `e-${pId}-${newId}`, source: pId, target: newId }]);
+                setFocusedNodeId(newId);
+                return newId;
+              },
+              onDeleteNode: (id) => {
+                setNodes((nds) => nds.filter((n) => n.id !== id));
+                setEdges((eds) => eds.filter((e) => e.source !== id && e.target !== id));
+              },
+              onFocus: setFocusedNodeId,
+              focusedNodeId,
+              activePath,
+              onGenerate: (id) => {
+                handleSynthesizePrompt(id);
+                setMobileTab("stage");
+              },
+              onGenerateBranch: (id) => {
+                handleSynthesizePrompt(id, true);
+                setMobileTab("stage");
+              },
+              isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
+            }
+          ) }),
+          leftTab === "prompt" && workspaceTags && activeTab !== "setup" && activeTab !== "sync" && /* @__PURE__ */ jsx13(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => {
+            handleGenerateImage(prompt);
+            setMobileTab("stage");
+          }, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete }),
+          activeTab === "setup" && /* @__PURE__ */ jsx13(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
+          activeTab === "sync" && /* @__PURE__ */ jsx13(
+            ProjectSyncTab,
+            {
+              onProjectExport: handleProjectExport,
+              onProjectImport: (f) => handleProjectImport(f),
+              onWorkspaceImport: handleWorkspaceImport,
+              projectActionState,
+              serverProjects: onFetchServerProjects ? serverProjects : void 0,
+              onServerSave: onServerSave ? handleServerSave : void 0,
+              onServerLoad: onServerLoad ? handleServerLoad : void 0,
+              onServerDelete: onServerDelete ? handleServerDelete : void 0,
+              onRefreshServerProjects: onFetchServerProjects ? fetchServerProjects : void 0,
+              onComputeSyncDiff: onFetchServerProjects && onServerLoad && onServerSave ? handleComputeSyncDiff : void 0,
+              onExecuteSync: onFetchServerProjects && onServerLoad && onServerSave ? handleExecuteSync : void 0
+            }
           )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx13("div", { className: "flex border-t border-white/10 bg-black shrink-0", style: { height: 56, paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
+        { id: "tools", icon: "auto_fix_high", label: "Prompt" },
+        { id: "stage", icon: "palette", label: "Stage" },
+        { id: "browse", icon: "photo_library", label: "Galerie" }
+      ].map((tab) => /* @__PURE__ */ jsxs11("button", { onClick: () => setMobileTab(tab.id), className: `flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors ${mobileTab === tab.id ? "text-white" : "text-white/30"}`, children: [
+        /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
+        /* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
+      ] }, tab.id)) })
+    ] });
+    if (mdMode) {
+      return /* @__PURE__ */ jsx13("div", { style: { position: "fixed", inset: 0, overflow: "hidden", background: "#0e0e0e" }, children: mobileRoot });
+    }
+    return mobileRoot;
+  }
+  if (layoutChoice === "tablet-landscape") {
+    const tlScale = Math.min(window.innerWidth / 920, window.innerHeight / 520);
+    const tlW = 920;
+    const tlH = 520;
+    return /* @__PURE__ */ jsx13("div", { style: { position: "fixed", inset: 0, background: "#0e0e0e", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", ...hcStyle || {} }, children: /* @__PURE__ */ jsxs11("div", { style: { width: tlW, height: tlH, transform: `scale(${tlScale})`, transformOrigin: "center center", display: "flex", flexDirection: "row", color: "#fff", overflow: "hidden", borderRadius: 0 }, children: [
+      /* @__PURE__ */ jsxs11("div", { style: { width: 320, height: tlH, display: "flex", flexDirection: "column", borderRight: "1px solid rgba(255,255,255,0.05)", background: "#000", flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsxs11("div", { style: { height: 52, borderBottom: "1px solid rgba(255,255,255,0.05)", display: "flex", alignItems: "center", gap: 8, padding: "0 12px", flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsx13(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
+          /* @__PURE__ */ jsx13(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] }),
+          /* @__PURE__ */ jsx13("div", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsx13("button", { onClick: toggleContrast, style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: highContrast ? "light_mode" : "dark_mode" }) }),
+          /* @__PURE__ */ jsx13("button", { onClick: () => setShowStart(true), style: { color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 4, lineHeight: 0 }, children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "apps" }) })
+        ] }),
+        /* @__PURE__ */ jsx13("div", { style: { padding: "12px 12px 8px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs11("div", { style: { position: "relative", borderRadius: 12, border: `1px solid ${isSynthesizing ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.1)"}`, background: "rgba(255,255,255,0.05)" }, children: [
+          /* @__PURE__ */ jsx13(
+            "textarea",
+            {
+              value: activePrompt,
+              onChange: (e) => setActivePrompt(e.target.value),
+              style: { width: "100%", background: "transparent", border: "none", outline: "none", fontSize: 12, lineHeight: 1.5, color: "rgba(255,255,255,0.8)", resize: "none", height: 80, padding: "10px 32px 10px 12px", fontFamily: "inherit", boxSizing: "border-box", display: "block" },
+              placeholder: "Prompt eingeben..."
+            }
+          ),
+          activePrompt && /* @__PURE__ */ jsx13("button", { onClick: () => setActivePrompt(""), style: { position: "absolute", top: 6, right: 6, width: 22, height: 22, display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.2)", background: "none", border: "none", cursor: "pointer", padding: 0 }, children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", style: { fontSize: 15 }, children: "close" }) })
+        ] }) }),
+        /* @__PURE__ */ jsx13("div", { style: { padding: "0 12px 10px", flexShrink: 0 }, children: /* @__PURE__ */ jsx13(
+          "button",
+          {
+            onClick: () => handleGenerateImage(),
+            disabled: !activePrompt.trim() || isGenerating,
+            style: { width: "100%", height: 42, display: "flex", alignItems: "center", justifyContent: "center", gap: 8, borderRadius: 10, fontWeight: "bold", fontSize: 13, textTransform: "uppercase", letterSpacing: "0.05em", border: "1px solid rgba(255,255,255,0.1)", background: activePrompt.trim() && !isGenerating ? "#0284c7" : "transparent", color: "#fff", cursor: activePrompt.trim() && !isGenerating ? "pointer" : "default", opacity: !activePrompt.trim() || isGenerating ? 0.3 : 1, fontFamily: "inherit", transition: "background 0.2s" },
+            children: isGenerating ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
+              /* @__PURE__ */ jsx13("div", { style: { width: 14, height: 14, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
+              /* @__PURE__ */ jsx13("span", { children: "Generiere..." })
+            ] }) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
+              /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "bolt" }),
+              /* @__PURE__ */ jsx13("span", { children: "Generieren" })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx13("div", { style: { flex: 1, overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ jsx13(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }) })
+      ] }),
+      /* @__PURE__ */ jsxs11("div", { style: { flex: 1, height: tlH, display: "flex", flexDirection: "column", background: "#0b0b0b" }, children: [
+        /* @__PURE__ */ jsx13(
+          "div",
+          {
+            style: { flex: 1, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" },
+            onTouchStart: (e) => setTouchStartX(e.touches[0].clientX),
+            onTouchEnd: (e) => {
+              if (touchStartX === null) return;
+              const dx = e.changedTouches[0].clientX - touchStartX;
+              if (dx < -50) goToNext();
+              else if (dx > 50) goToPrev();
+              setTouchStartX(null);
+            },
+            children: /* @__PURE__ */ jsxs11("div", { style: { height: "100%", width: "100%", borderRadius: 20, border: "1px solid rgba(255,255,255,0.05)", background: "rgba(0,0,0,0.4)", position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }, children: [
+              currentResult?.status === "processing" && /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
+                /* @__PURE__ */ jsx13("div", { style: { width: 36, height: 36, borderTop: "2px solid #fff", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
+                /* @__PURE__ */ jsx13("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.4)", textTransform: "uppercase", fontWeight: "bold", letterSpacing: "0.15em" }, children: "Erstelle Bild..." })
+              ] }),
+              currentResult?.status === "error" && /* @__PURE__ */ jsxs11("div", { style: { padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
+                /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", style: { fontSize: 32, color: "#f87171" }, children: "warning" }),
+                /* @__PURE__ */ jsx13("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", margin: 0 }, children: currentResult.error?.message }),
+                /* @__PURE__ */ jsx13("button", { onClick: () => handleGenerateImage(currentResult.prompt), style: { padding: "8px 16px", borderRadius: 8, border: "1px solid rgba(255,255,255,0.2)", fontSize: 11, color: "rgba(255,255,255,0.7)", background: "none", cursor: "pointer", fontFamily: "inherit" }, children: "Erneut versuchen" })
+              ] }),
+              currentResult?.status === "done" && currentResult.base64 && /* @__PURE__ */ jsx13("img", { src: currentResult.base64, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }),
+              !currentResult && /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.1 }, children: [
+                /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", style: { fontSize: 64 }, children: "palette" }),
+                /* @__PURE__ */ jsx13("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
+              ] }),
+              currentResult?.status === "done" && /* @__PURE__ */ jsx13("button", { onClick: openFullscreen, style: { position: "absolute", top: 8, right: 8, width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff" }, children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "fullscreen" }) }),
+              history.length > 1 && currentResult && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+                /* @__PURE__ */ jsx13("button", { onClick: goToPrev, disabled: currentIndex <= 0, style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex <= 0 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_left" }) }),
+                /* @__PURE__ */ jsx13("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, style: { position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex >= history.length - 1 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_right" }) }),
+                /* @__PURE__ */ jsxs11("div", { style: { position: "absolute", bottom: 8, left: "50%", transform: "translateX(-50%)", background: "rgba(0,0,0,0.6)", borderRadius: 999, padding: "2px 12px", fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: "monospace" }, children: [
+                  currentIndex + 1,
+                  " / ",
+                  history.length
+                ] })
+              ] })
+            ] })
+          }
+        ),
+        currentResult?.status === "done" && /* @__PURE__ */ jsxs11("div", { style: { padding: "0 16px 16px", display: "flex", gap: 8, flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsxs11("button", { onClick: () => setActivePrompt(currentResult.prompt || ""), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.6)", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }, children: [
+            /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "replay" }),
+            /* @__PURE__ */ jsx13("span", { children: "Prompt" })
+          ] }),
+          /* @__PURE__ */ jsxs11("button", { onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "none", background: "rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.8)", fontSize: 11, fontWeight: "bold", cursor: "pointer", fontFamily: "inherit" }, children: [
+            /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "auto_fix_high" }),
+            /* @__PURE__ */ jsx13("span", { children: "Referenz" })
+          ] }),
+          /* @__PURE__ */ jsxs11("button", { onClick: handleDownloadSingle, style: { flex: 1, height: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 10, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.6)", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }, children: [
+            /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", style: { fontSize: 16 }, children: "download" }),
+            /* @__PURE__ */ jsx13("span", { children: "Laden" })
+          ] })
+        ] })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: "flex h-screen w-screen bg-[#0e0e0e] text-white overflow-hidden", style: hcStyle, children: [
+    /* @__PURE__ */ jsx13("div", { className: "absolute top-2 right-2 z-50", children: /* @__PURE__ */ jsx13("button", { onClick: () => setShowStart(true), className: "text-white/10 hover:text-white/30 transition-colors text-[10px]", children: "\u21C4" }) }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex flex-col border-r border-white/5 overflow-hidden relative bg-black/10 shrink-0", style: { width: isLeftCollapsed ? 48 : 260, transition: "width 0.2s" }, children: [
+      /* @__PURE__ */ jsxs11("div", { className: "h-14 border-b border-white/5 flex items-center justify-between shrink-0 px-1", children: [
+        !isLeftCollapsed && /* @__PURE__ */ jsxs11("div", { className: "flex flex-1 gap-1", children: [
+          workspaceTags && /* @__PURE__ */ jsxs11("button", { onClick: () => setLeftTab("prompt"), className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "prompt" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`, children: [
+            /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[14px]", children: "auto_fix_high" }),
+            "Prompt"
+          ] }),
+          /* @__PURE__ */ jsxs11("button", { onClick: () => setLeftTab("hierarchy"), className: `flex-1 flex items-center justify-center gap-1 h-8 rounded-lg text-[8px] font-bold uppercase tracking-wide transition-colors ${leftTab === "hierarchy" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/60"}`, children: [
+            /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[14px]", children: "account_tree" }),
+            "Hierarchie"
+          ] })
         ] }),
-        /* @__PURE__ */ jsx11("button", { onClick: () => setIsLeftCollapsed(!isLeftCollapsed), className: "material-symbols-outlined text-[18px] text-white/40 hover:text-white transition-all w-10 flex items-center justify-center", children: isLeftCollapsed ? "chevron_right" : "chevron_left" })
+        /* @__PURE__ */ jsx13("button", { onClick: () => setIsLeftCollapsed(!isLeftCollapsed), className: "material-symbols-outlined text-[18px] text-white/40 hover:text-white transition-all w-10 flex items-center justify-center", children: isLeftCollapsed ? "chevron_right" : "chevron_left" })
       ] }),
-      !isLeftCollapsed && /* @__PURE__ */ jsx11("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ jsxs9(AnimatePresence2, { mode: "wait", children: [
-        leftTab === "hierarchy" && /* @__PURE__ */ jsx11(motion6.div, { className: "absolute inset-0", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: /* @__PURE__ */ jsx11(
+      !isLeftCollapsed && /* @__PURE__ */ jsxs11("div", { className: "flex-1 overflow-hidden relative", children: [
+        leftTab === "hierarchy" && /* @__PURE__ */ jsx13("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx13(
           ListView,
           {
             nodes,
@@ -1137,124 +2465,104 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             onGenerateBranch: (id) => handleSynthesizePrompt(id, true),
             isGeneratingNodeId: (id) => isSynthesizing && focusedNodeId === id
           }
-        ) }, "hierarchy"),
-        leftTab === "prompt" && workspaceTags && /* @__PURE__ */ jsx11(motion6.div, { className: "absolute inset-0", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: /* @__PURE__ */ jsx11(
-          PromptTab,
-          {
-            workspaceTags,
-            onGenerate: handlePromptTabGenerate,
-            isGenerating: isPromptTabGenerating,
-            feedback: promptFeedback
-          }
-        ) }, "prompt")
-      ] }) })
+        ) }),
+        leftTab === "prompt" && workspaceTags && /* @__PURE__ */ jsx13(PromptTab, { workspaceTags, onGenerate: handlePromptTabGenerate, isGenerating: isPromptTabGenerating, feedback: promptFeedback, promptResult: activePrompt || null, lastPayload: lastPromptPayload, onGenerateImage: (prompt) => handleGenerateImage(prompt), onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs9("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
-        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx11(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
-          /* @__PURE__ */ jsx11(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] })
+    /* @__PURE__ */ jsxs11("div", { className: "flex-1 flex flex-col bg-[#0b0b0b] overflow-hidden", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "h-14 border-b border-white/5 flex items-center px-4 gap-2 justify-between shrink-0 bg-black/20", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx13(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
+          /* @__PURE__ */ jsx13(CompactDropdown, { value: selectedModel, onChange: setSelectedModel, options: [{ value: "\u{1F34C} Nano Banana Pro", label: "\u{1F34C} Nano Banana Pro" }, { value: "\u{1F34C} Nano Banana 2", label: "\u{1F34C} Nano Banana 2" }, { value: "Imagen 4", label: "Imagen 4" }] })
         ] }),
-        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx11("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
-          /* @__PURE__ */ jsx11(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx13("button", { onClick: () => setIsPromptCollapsed(!isPromptCollapsed), className: "text-white/40 hover:text-white transition-colors", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined", children: isPromptCollapsed ? "expand_more" : "expand_less" }) }),
+          /* @__PURE__ */ jsx13(PillButton, { variant: "solid", icon: "bolt", loading: isGenerating, disabled: !activePrompt.trim(), onClick: () => handleGenerateImage(), children: "Generieren" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
-        /* @__PURE__ */ jsx11(AnimatePresence2, { children: !isPromptCollapsed && /* @__PURE__ */ jsx11(motion6.div, { initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 }, className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ jsxs9("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
-          /* @__PURE__ */ jsx11(
-            "textarea",
-            {
-              value: activePrompt,
-              onChange: (e) => setActivePrompt(e.target.value),
-              className: "w-full bg-transparent border-none outline-none text-[12px] leading-relaxed text-white/80 resize-none h-20 dark-scrollbar",
-              placeholder: "W\xE4hle einen Knoten oder tippe einen Prompt..."
-            }
-          ),
-          activePrompt && !isSynthesizing && /* @__PURE__ */ jsx11("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors text-white/20 hover:text-white", children: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
-        ] }) }) }),
-        /* @__PURE__ */ jsx11("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ jsxs9("div", { className: "h-full w-full max-w-4xl aspect-square rounded-3xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center group shadow-2xl", children: [
-          isGenerating && currentResult?.status === "done" && /* @__PURE__ */ jsxs9("div", { className: "absolute top-6 right-6 z-30 bg-black/60 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx11("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
-            /* @__PURE__ */ jsx11("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
+      /* @__PURE__ */ jsxs11("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
+        !isPromptCollapsed && /* @__PURE__ */ jsx13("div", { className: "px-6 py-4 border-b border-white/5 bg-black/10 overflow-hidden shrink-0", children: /* @__PURE__ */ jsxs11("div", { className: `relative min-h-[60px] p-4 rounded-2xl border transition-all ${isSynthesizing ? "prompt-loading" : "bg-white/5 border-white/10"}`, children: [
+          /* @__PURE__ */ jsx13("textarea", { value: activePrompt, onChange: (e) => setActivePrompt(e.target.value), className: "w-full bg-transparent border-none outline-none text-[12px] leading-relaxed text-white/80 resize-none h-20 dark-scrollbar", placeholder: "W\xE4hle einen Knoten oder tippe einen Prompt..." }),
+          activePrompt && !isSynthesizing && /* @__PURE__ */ jsx13("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors text-white/20 hover:text-white", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
+        ] }) }),
+        /* @__PURE__ */ jsx13("div", { className: "flex-1 p-6 overflow-hidden flex items-center justify-center", children: /* @__PURE__ */ jsxs11("div", { className: "h-full w-full max-w-4xl aspect-square rounded-3xl border border-white/5 bg-black/40 relative overflow-hidden flex items-center justify-center group shadow-2xl", children: [
+          isGenerating && currentResult?.status === "done" && /* @__PURE__ */ jsxs11("div", { className: "absolute top-6 right-6 z-30 bg-black/60 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx13("div", { className: "w-3 h-3 border-t-2 border-white rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx13("span", { className: "text-[10px] text-white/60 uppercase font-bold tracking-widest", children: "Neue Referenz..." })
           ] }),
-          currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-center gap-4", children: [
-            /* @__PURE__ */ jsx11("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
-            /* @__PURE__ */ jsx11("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
-          ] }) : currentResult.status === "error" ? /* @__PURE__ */ jsxs9("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
-            /* @__PURE__ */ jsx11("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
-            /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsx11("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
-              /* @__PURE__ */ jsx11("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
+          currentResult ? currentResult.status === "processing" ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-4", children: [
+            /* @__PURE__ */ jsx13("div", { className: "w-10 h-10 border-t-2 border-white rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx13("span", { className: "text-[10px] text-white/40 uppercase font-bold tracking-widest", children: "Erstelle Bild..." })
+          ] }) : currentResult.status === "error" ? /* @__PURE__ */ jsxs11("div", { className: "p-10 text-center flex flex-col items-center gap-5 max-w-md", children: [
+            /* @__PURE__ */ jsx13("div", { className: "w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-red-500 text-[32px]", children: "warning" }) }),
+            /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx13("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-red-400", children: "Generierungsfehler" }),
+              /* @__PURE__ */ jsx13("p", { className: "text-white/60 text-[12px] leading-relaxed", children: currentResult.error?.message })
             ] }),
-            /* @__PURE__ */ jsx11(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
-          ] }) : /* @__PURE__ */ jsxs9("div", { className: "h-full w-full relative flex items-center justify-center", children: [
-            /* @__PURE__ */ jsx11("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
-            /* @__PURE__ */ jsxs9("div", { className: "absolute bottom-6 flex gap-2 opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0 z-20", children: [
-              /* @__PURE__ */ jsx11(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
-              /* @__PURE__ */ jsx11(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
-              /* @__PURE__ */ jsx11(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
+            /* @__PURE__ */ jsx13(PillButton, { variant: "outline", icon: "refresh", onClick: () => handleGenerateImage(currentResult.prompt), children: "Erneut versuchen" })
+          ] }) : /* @__PURE__ */ jsxs11("div", { className: "h-full w-full relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx13("img", { src: currentResult.base64, className: "max-h-full max-w-full object-contain rounded-xl shadow-2xl" }),
+            /* @__PURE__ */ jsxs11("div", { className: "absolute bottom-6 flex gap-2 opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0 z-20", children: [
+              /* @__PURE__ */ jsx13(PillButton, { variant: "outline", icon: "replay", onClick: () => setActivePrompt(currentResult.prompt || ""), children: "Prompt" }),
+              /* @__PURE__ */ jsx13(PillButton, { variant: "solid", icon: "auto_fix_high", onClick: () => handleGenerateImage(currentResult.prompt || activePrompt, currentResult.mediaId, void 0, { silent: true }), children: "Referenz" }),
+              /* @__PURE__ */ jsx13(PillButton, { variant: "outline", icon: "download", onClick: handleDownloadSingle, children: "Speichern" })
             ] })
-          ] }) : /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
-            /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
-            /* @__PURE__ */ jsx11("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
+          ] }) : /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-2 opacity-10", children: [
+            /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[100px]", children: "palette" }),
+            /* @__PURE__ */ jsx13("span", { className: "text-[12px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
           ] })
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs9(motion6.div, { animate: { width: isRightCollapsed ? 60 : 320 }, className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
-        /* @__PURE__ */ jsx11("div", { className: "flex flex-1", children: ["history", "gallery", "inspect", "setup"].map((tab) => /* @__PURE__ */ jsx11("button", { onClick: () => {
+    /* @__PURE__ */ jsxs11("div", { className: "flex flex-col border-l border-white/5 bg-[#0e0e0e] shrink-0", style: { width: isRightCollapsed ? 60 : 320, transition: "width 0.2s" }, children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex border-b border-white/5 h-14 shrink-0 overflow-hidden", children: [
+        /* @__PURE__ */ jsx13("div", { className: "flex flex-1", children: ["history", "gallery", "inspect", "setup", "sync"].map((tab) => /* @__PURE__ */ jsx13("button", { onClick: () => {
           setActiveTab(tab);
           setIsRightCollapsed(false);
-        }, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : "settings" }) }, tab)) }),
-        /* @__PURE__ */ jsx11("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
+        }, className: `flex-1 flex items-center justify-center relative transition-colors ${activeTab === tab ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[20px]", children: tab === "history" ? "history" : tab === "gallery" ? "photo_library" : tab === "inspect" ? "info" : tab === "setup" ? "settings" : "cloud_sync" }) }, tab)) }),
+        /* @__PURE__ */ jsx13("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ jsx13("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
       ] }),
-      !isRightCollapsed && /* @__PURE__ */ jsx11("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ jsxs9(AnimatePresence2, { mode: "wait", children: [
-        activeTab === "history" && /* @__PURE__ */ jsx11(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }, "history"),
-        activeTab === "gallery" && /* @__PURE__ */ jsx11(
+      !isRightCollapsed && /* @__PURE__ */ jsxs11("div", { className: "flex-1 overflow-hidden relative", children: [
+        activeTab === "history" && /* @__PURE__ */ jsx13(HistoryPanel, { history, currentResultId: currentResult?.id || null, onSelect: setCurrentResult, onDelete: (id) => setHistory((h) => h.filter((x) => x.id !== id)) }),
+        activeTab === "gallery" && /* @__PURE__ */ jsx13(
           MediaLibrary,
           {
             items: galleryItems,
             onImport: async () => {
               const media = await onSelectMedia();
               if (!media?.length) return;
-              const newItems = media.map((m) => ({
-                id: crypto.randomUUID(),
-                nodeId: "1",
-                base64: `data:${m.mimeType};base64,${m.base64}`,
-                mediaId: m.mediaId,
-                prompt: m.name || "Importiert",
-                timestamp: Date.now(),
-                status: "done",
-                tags: [],
-                type: "import"
-              }));
-              setGalleryItems((prev) => [...newItems, ...prev]);
+              setGalleryItems((prev) => [...media.map((m) => ({ id: crypto.randomUUID(), nodeId: "1", base64: `data:${m.mimeType};base64,${m.base64}`, mediaId: m.mediaId, prompt: m.name || "Importiert", timestamp: Date.now(), status: "done", tags: [], type: "import" })), ...prev]);
             },
             onDelete: (id) => setGalleryItems((g) => g.filter((x) => x.id !== id)),
             onSelect: setCurrentResult,
             onGenerateReference: (item) => handleGenerateImage(item.prompt || activePrompt, item.mediaId, void 0, { silent: true })
-          },
-          "gallery"
+          }
         ),
-        activeTab === "inspect" && /* @__PURE__ */ jsx11(InspectPanel, { currentResult, history, onSelect: setCurrentResult }, "inspect"),
-        activeTab === "setup" && /* @__PURE__ */ jsx11(
-          SetupPanel,
+        activeTab === "inspect" && /* @__PURE__ */ jsx13(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
+        activeTab === "setup" && /* @__PURE__ */ jsx13(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo }),
+        activeTab === "sync" && /* @__PURE__ */ jsx13(
+          ProjectSyncTab,
           {
             onProjectExport: handleProjectExport,
-            onProjectImport: handleProjectImport,
+            onProjectImport: (f) => handleProjectImport(f),
             onWorkspaceImport: handleWorkspaceImport,
-            projectActionState
-          },
-          "setup"
+            projectActionState,
+            serverProjects: onFetchServerProjects ? serverProjects : void 0,
+            onServerSave: onServerSave ? handleServerSave : void 0,
+            onServerLoad: onServerLoad ? handleServerLoad : void 0,
+            onServerDelete: onServerDelete ? handleServerDelete : void 0,
+            onRefreshServerProjects: onFetchServerProjects ? fetchServerProjects : void 0,
+            onComputeSyncDiff: onFetchServerProjects && onServerLoad && onServerSave ? handleComputeSyncDiff : void 0,
+            onExecuteSync: onFetchServerProjects && onServerLoad && onServerSave ? handleExecuteSync : void 0
+          }
         )
-      ] }) })
+      ] })
     ] })
   ] });
 }
 export {
   AvatarArchitectApp,
+  CollapsibleCard,
   CompactDropdown,
   FaToolsBadge,
   GLOBAL_STYLES,
@@ -1263,6 +2571,7 @@ export {
   ListView,
   MediaLibrary,
   PillButton,
+  ProjectSyncTab,
   PromptTab,
   SectionLabel,
   SetupPanel,