@aprovan/patchwork-editor 0.1.0 → 0.1.1-dev.6bd527d

package/dist/index.js

@@ -2,8 +2,8 @@ import { Node, textblockTypeInputRule } from '@tiptap/core';
 import { ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent, useEditor, EditorContent } from '@tiptap/react';
 import { useRef, useCallback, useMemo, useState, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Pencil, Loader2, RotateCcw, FileCode, FolderTree, Eye, Code, X, AlertCircle, Send, MessageSquare, Cloud, Check, Server, ChevronDown, ChevronRight, Folder, File } from 'lucide-react';
-import { createSingleFileProject, LocalFSBackend, VFSStore, detectMainFile, createProjectFromFiles } from '@aprovan/patchwork-compiler';
+import { AlertCircle, FileImage, FileVideo, Pencil, Loader2, RotateCcw, FileCode, FolderTree, Eye, Code, Save, X, Send, MessageSquare, Cloud, Check, Server, ChevronDown, ChevronRight, Folder, File, Upload } from 'lucide-react';
+import { createSingleFileProject, HttpBackend, VFSStore, detectMainFile, createProjectFromFiles } from '@aprovan/patchwork-compiler';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import StarterKit from '@tiptap/starter-kit';
@@ -119,7 +119,7 @@ var CodeBlockExtension = Node.create({
         default: null,
         parseHTML: (element) => {
           const { languageClassPrefix } = this.options;
-          const classNames = [...element.firstElementChild?.classList || []];
+          const classNames = Array.from(element.firstElementChild?.classList || []);
           const languages = classNames.filter((className) => className.startsWith(languageClassPrefix)).map((className) => className.replace(languageClassPrefix, ""));
           return languages[0] || null;
         },
@@ -340,6 +340,7 @@ function applyDiffs(code, diffs, options = {}) {
   return { code: result, applied, failed, warning };
 }
 function hasDiffBlocks(text) {
+  DIFF_BLOCK_REGEX.lastIndex = 0;
   return DIFF_BLOCK_REGEX.test(text);
 }
 function extractTextWithoutDiffs(text) {
@@ -435,11 +436,23 @@ function cloneProject(project) {
   };
 }
 function useEditSession(options) {
-  const { originalCode, compile, apiEndpoint } = options;
+  const {
+    originalCode,
+    originalProject: providedProject,
+    compile,
+    apiEndpoint
+  } = options;
+  console.log(
+    "[useEditSession] providedProject:",
+    providedProject?.id,
+    "files:",
+    providedProject ? Array.from(providedProject.files.keys()) : "none"
+  );
   const originalProject = useMemo(
-    () => createSingleFileProject(originalCode),
-    [originalCode]
+    () => providedProject ?? createSingleFileProject(originalCode ?? ""),
+    [providedProject, originalCode]
   );
+  const lastSyncedProjectRef = useRef(originalProject);
   const [project, setProject] = useState(originalProject);
   const [activeFile, setActiveFile] = useState(originalProject.entry);
   const [history, setHistory] = useState([]);
@@ -447,6 +460,16 @@ function useEditSession(options) {
   const [error, setError] = useState(null);
   const [streamingNotes, setStreamingNotes] = useState([]);
   const [pendingPrompt, setPendingPrompt] = useState(null);
+  useEffect(() => {
+    if (originalProject !== lastSyncedProjectRef.current) {
+      lastSyncedProjectRef.current = originalProject;
+      setProject(originalProject);
+      setActiveFile(originalProject.entry);
+      setHistory([]);
+      setError(null);
+      setStreamingNotes([]);
+    }
+  }, [originalProject]);
   const performEdit = useCallback(
     async (currentCode2, prompt, isRetry = false) => {
       const entries = [];
@@ -536,6 +559,21 @@ Please fix this error.`;
     },
     [activeFile]
   );
+  const replaceFile = useCallback(
+    (path, content, encoding = "utf8") => {
+      setProject((prev) => {
+        const updated = cloneProject(prev);
+        const file = updated.files.get(path);
+        if (file) {
+          updated.files.set(path, { ...file, content, encoding });
+        } else {
+          updated.files.set(path, { path, content, encoding });
+        }
+        return updated;
+      });
+    },
+    []
+  );
   const clearError = useCallback(() => {
     setError(null);
   }, []);
@@ -552,7 +590,8 @@ Please fix this error.`;
     revert,
     updateActiveFile,
     setActiveFile,
-    clearError
+    clearError,
+    replaceFile
   };
 }
 function ProgressNote({ text, isLatest }) {
@@ -811,6 +850,110 @@ function MarkdownEditor({
     }
   );
 }
+
+// src/components/edit/fileTypes.ts
+var COMPILABLE_EXTENSIONS = [".tsx", ".jsx", ".ts", ".js"];
+var MEDIA_EXTENSIONS = [".svg", ".png", ".jpg", ".jpeg", ".gif", ".webp", ".mp4", ".mov", ".webm"];
+var TEXT_EXTENSIONS = [".json", ".yaml", ".yml", ".md", ".txt", ".css", ".html", ".xml", ".toml"];
+var EXTENSION_TO_LANGUAGE = {
+  ".tsx": "tsx",
+  ".jsx": "jsx",
+  ".ts": "typescript",
+  ".js": "javascript",
+  ".json": "json",
+  ".yaml": "yaml",
+  ".yml": "yaml",
+  ".md": "markdown",
+  ".txt": "text",
+  ".css": "css",
+  ".html": "html",
+  ".xml": "xml",
+  ".toml": "toml",
+  ".svg": "xml"
+};
+var EXTENSION_TO_MIME = {
+  ".tsx": "text/typescript-jsx",
+  ".jsx": "text/javascript-jsx",
+  ".ts": "text/typescript",
+  ".js": "text/javascript",
+  ".json": "application/json",
+  ".yaml": "text/yaml",
+  ".yml": "text/yaml",
+  ".md": "text/markdown",
+  ".txt": "text/plain",
+  ".css": "text/css",
+  ".html": "text/html",
+  ".xml": "application/xml",
+  ".toml": "text/toml",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".mp4": "video/mp4",
+  ".mov": "video/quicktime",
+  ".webm": "video/webm"
+};
+function getExtension(path) {
+  const lastDot = path.lastIndexOf(".");
+  if (lastDot === -1) return "";
+  return path.slice(lastDot).toLowerCase();
+}
+function getFileType(path) {
+  const ext = getExtension(path);
+  if (COMPILABLE_EXTENSIONS.includes(ext)) {
+    return {
+      category: "compilable",
+      language: EXTENSION_TO_LANGUAGE[ext] ?? null,
+      mimeType: EXTENSION_TO_MIME[ext] ?? "text/plain"
+    };
+  }
+  if (TEXT_EXTENSIONS.includes(ext)) {
+    return {
+      category: "text",
+      language: EXTENSION_TO_LANGUAGE[ext] ?? null,
+      mimeType: EXTENSION_TO_MIME[ext] ?? "text/plain"
+    };
+  }
+  if (MEDIA_EXTENSIONS.includes(ext)) {
+    return {
+      category: "media",
+      language: ext === ".svg" ? "xml" : null,
+      mimeType: EXTENSION_TO_MIME[ext] ?? "application/octet-stream"
+    };
+  }
+  return {
+    category: "binary",
+    language: null,
+    mimeType: "application/octet-stream"
+  };
+}
+function isCompilable(path) {
+  return COMPILABLE_EXTENSIONS.includes(getExtension(path));
+}
+function isMediaFile(path) {
+  return MEDIA_EXTENSIONS.includes(getExtension(path));
+}
+function isTextFile(path) {
+  return TEXT_EXTENSIONS.includes(getExtension(path));
+}
+function getLanguageFromExt(path) {
+  const ext = getExtension(path);
+  return EXTENSION_TO_LANGUAGE[ext] ?? null;
+}
+function getMimeType(path) {
+  const ext = getExtension(path);
+  return EXTENSION_TO_MIME[ext] ?? "application/octet-stream";
+}
+function isImageFile(path) {
+  const ext = getExtension(path);
+  return [".svg", ".png", ".jpg", ".jpeg", ".gif", ".webp"].includes(ext);
+}
+function isVideoFile(path) {
+  const ext = getExtension(path);
+  return [".mp4", ".mov", ".webm"].includes(ext);
+}
 function buildTree(files) {
   const root = { name: "", path: "", isDir: true, children: [] };
   for (const file of files) {
@@ -839,8 +982,26 @@ function buildTree(files) {
   });
   return root;
 }
-function TreeNodeComponent({ node, activeFile, onSelect, depth = 0 }) {
+function TreeNodeComponent({ node, activeFile, onSelect, onReplaceFile, depth = 0 }) {
   const [expanded, setExpanded] = useState(true);
+  const [isHovered, setIsHovered] = useState(false);
+  const fileInputRef = useRef(null);
+  const handleUploadClick = useCallback((e) => {
+    e.stopPropagation();
+    fileInputRef.current?.click();
+  }, []);
+  const handleFileChange = useCallback((e) => {
+    const file = e.target.files?.[0];
+    if (!file || !onReplaceFile) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      const base64 = result.split(",")[1] ?? "";
+      onReplaceFile(node.path, base64, "base64");
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  }, [node.path, onReplaceFile]);
   if (!node.name) {
     return /* @__PURE__ */ jsx(Fragment, { children: node.children.map((child) => /* @__PURE__ */ jsx(
       TreeNodeComponent,
@@ -848,12 +1009,15 @@ function TreeNodeComponent({ node, activeFile, onSelect, depth = 0 }) {
         node: child,
         activeFile,
         onSelect,
+        onReplaceFile,
         depth
       },
       child.path
     )) });
   }
   const isActive = node.path === activeFile;
+  const isMedia = !node.isDir && isMediaFile(node.path);
+  const showUpload = isMedia && isHovered && onReplaceFile;
   if (node.isDir) {
     return /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs(
@@ -875,6 +1039,7 @@ function TreeNodeComponent({ node, activeFile, onSelect, depth = 0 }) {
           node: child,
           activeFile,
           onSelect,
+          onReplaceFile,
           depth: depth + 1
         },
         child.path
@@ -882,19 +1047,48 @@ function TreeNodeComponent({ node, activeFile, onSelect, depth = 0 }) {
     ] });
   }
   return /* @__PURE__ */ jsxs(
-    "button",
+    "div",
     {
-      onClick: () => onSelect(node.path),
-      className: `flex items-center gap-1 w-full px-2 py-1 text-left text-sm hover:bg-muted/50 rounded ${isActive ? "bg-primary/10 text-primary" : ""}`,
-      style: { paddingLeft: `${depth * 12 + 20}px` },
+      className: "relative",
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
       children: [
-        /* @__PURE__ */ jsx(File, { className: "h-3 w-3 shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: node.name })
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onSelect(node.path),
+            className: `flex items-center gap-1 w-full px-2 py-1 text-left text-sm hover:bg-muted/50 rounded ${isActive ? "bg-primary/10 text-primary" : ""}`,
+            style: { paddingLeft: `${depth * 12 + 20}px` },
+            children: [
+              /* @__PURE__ */ jsx(File, { className: "h-3 w-3 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: node.name }),
+              showUpload && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  onClick: handleUploadClick,
+                  className: "p-0.5 hover:bg-primary/20 rounded cursor-pointer",
+                  title: "Replace file",
+                  children: /* @__PURE__ */ jsx(Upload, { className: "h-3 w-3 text-primary" })
+                }
+              )
+            ]
+          }
+        ),
+        isMedia && /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            className: "hidden",
+            accept: "image/*,video/*",
+            onChange: handleFileChange
+          }
+        )
       ]
     }
   );
 }
-function FileTree({ files, activeFile, onSelectFile }) {
+function FileTree({ files, activeFile, onSelectFile, onReplaceFile }) {
   const tree = useMemo(() => buildTree(files), [files]);
   return /* @__PURE__ */ jsxs("div", { className: "w-48 border-r bg-muted/30 overflow-auto text-foreground", children: [
     /* @__PURE__ */ jsx("div", { className: "p-2 border-b text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Files" }),
@@ -903,11 +1097,196 @@ function FileTree({ files, activeFile, onSelectFile }) {
       {
         node: tree,
         activeFile,
-        onSelect: onSelectFile
+        onSelect: onSelectFile,
+        onReplaceFile
       }
     ) })
   ] });
 }
+function SaveConfirmDialog({
+  isOpen,
+  isSaving,
+  error,
+  onSave,
+  onDiscard,
+  onCancel
+}) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[60] flex items-center justify-center bg-black/80", children: /* @__PURE__ */ jsxs("div", { className: "bg-background border rounded-lg shadow-lg w-full max-w-md", children: [
+    /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold leading-none tracking-tight", children: "Unsaved Changes" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-2", children: "You have unsaved changes. Would you like to save them before closing?" }),
+      error && /* @__PURE__ */ jsxs("p", { className: "text-sm text-destructive mt-3", children: [
+        "Save failed: ",
+        error
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 p-6 pt-0", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onCancel,
+          disabled: isSaving,
+          className: "inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 py-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onDiscard,
+          disabled: isSaving,
+          className: "inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 py-2 border border-input bg-background text-destructive hover:bg-destructive/10 disabled:opacity-50",
+          children: "Discard"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onSave,
+          disabled: isSaving,
+          className: "inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50",
+          children: isSaving ? "Saving..." : "Save"
+        }
+      )
+    ] })
+  ] }) });
+}
+function CodeBlockView({ content, language, editable = false, onChange }) {
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  }, [content]);
+  const handleChange = useCallback(
+    (e) => {
+      onChange?.(e.target.value);
+    },
+    [onChange]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const target = e.target;
+        const start = target.selectionStart;
+        const end = target.selectionEnd;
+        const value = target.value;
+        const newValue = value.substring(0, start) + "  " + value.substring(end);
+        onChange?.(newValue);
+        requestAnimationFrame(() => {
+          target.selectionStart = target.selectionEnd = start + 2;
+        });
+      }
+    },
+    [onChange]
+  );
+  const langLabel = language || "text";
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-muted/10", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-4 py-2 bg-muted/30 border-b text-xs", children: /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground", children: langLabel }) }),
+    editable ? /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        value: content,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        className: "w-full min-h-full font-mono text-xs leading-relaxed bg-transparent border-none outline-none resize-none",
+        spellCheck: false,
+        style: {
+          tabSize: 2,
+          WebkitTextFillColor: "inherit"
+        }
+      }
+    ) : /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap break-words m-0 leading-relaxed", children: /* @__PURE__ */ jsx("code", { children: content }) })
+  ] });
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function getDataUrl(content, mimeType) {
+  if (content.startsWith("data:")) {
+    return content;
+  }
+  return `data:${mimeType};base64,${content}`;
+}
+function MediaPreview({ content, mimeType, fileName }) {
+  const [dimensions, setDimensions] = useState(null);
+  const [error, setError] = useState(null);
+  const dataUrl = getDataUrl(content, mimeType);
+  const isImage = isImageFile(fileName);
+  const isVideo = isVideoFile(fileName);
+  content.length;
+  const estimatedBytes = content.startsWith("data:") ? Math.floor((content.split(",")[1]?.length ?? 0) * 0.75) : Math.floor(content.length * 0.75);
+  useEffect(() => {
+    setDimensions(null);
+    setError(null);
+    if (isImage) {
+      const img = new Image();
+      img.onload = () => {
+        setDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+      };
+      img.onerror = () => {
+        setError("Failed to load image");
+      };
+      img.src = dataUrl;
+    }
+  }, [dataUrl, isImage]);
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full p-8 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "h-12 w-12 mb-4 text-destructive" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: error })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full p-8 bg-muted/20", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center justify-center w-full max-h-[60vh] overflow-hidden", children: [
+      isImage && /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: dataUrl,
+          alt: fileName,
+          className: "max-w-full max-h-full object-contain rounded shadow-sm",
+          style: { maxHeight: "calc(60vh - 2rem)" }
+        }
+      ),
+      isVideo && /* @__PURE__ */ jsx(
+        "video",
+        {
+          src: dataUrl,
+          controls: true,
+          className: "max-w-full max-h-full rounded shadow-sm",
+          style: { maxHeight: "calc(60vh - 2rem)" },
+          children: "Your browser does not support video playback."
+        }
+      ),
+      !isImage && !isVideo && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(FileImage, { className: "h-16 w-16 mb-4" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Preview not available for this file type" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-6 text-center text-sm text-muted-foreground space-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+        isImage && /* @__PURE__ */ jsx(FileImage, { className: "h-4 w-4" }),
+        isVideo && /* @__PURE__ */ jsx(FileVideo, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: fileName })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "text-xs space-x-3", children: [
+        dimensions && /* @__PURE__ */ jsxs("span", { children: [
+          dimensions.width,
+          " \xD7 ",
+          dimensions.height,
+          " px"
+        ] }),
+        /* @__PURE__ */ jsx("span", { children: formatFileSize(estimatedBytes) }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: mimeType })
+      ] })
+    ] })
+  ] });
+}
 function hashCode(str) {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
@@ -918,22 +1297,37 @@ function hashCode(str) {
 function EditModal({
   isOpen,
   onClose,
+  onSave,
+  onSaveProject,
   renderPreview,
   renderLoading,
   renderError,
   previewError,
   previewLoading,
+  initialState = {},
+  hideFileTree = false,
   ...sessionOptions
 }) {
-  const [showPreview, setShowPreview] = useState(true);
-  const [showTree, setShowTree] = useState(false);
+  const [showPreview, setShowPreview] = useState(initialState?.showPreview ?? true);
+  const [showTree, setShowTree] = useState(
+    hideFileTree ? false : initialState?.showTree ?? false
+  );
   const [editInput, setEditInput] = useState("");
   const [bobbinChanges, setBobbinChanges] = useState([]);
   const [previewContainer, setPreviewContainer] = useState(null);
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveError, setSaveError] = useState(null);
+  const [pendingClose, setPendingClose] = useState(null);
+  const currentCodeRef = useRef("");
   const session = useEditSession(sessionOptions);
   const code = getActiveContent(session);
+  currentCodeRef.current = code;
   const files = useMemo(() => getFiles(session.project), [session.project]);
   const hasChanges = code !== (session.originalProject.files.get(session.activeFile)?.content ?? "");
+  const fileType = useMemo(() => getFileType(session.activeFile), [session.activeFile]);
+  const isCompilableFile = isCompilable(session.activeFile);
+  const showPreviewToggle = isCompilableFile;
   const handleBobbinChanges = useCallback((changes) => {
     setBobbinChanges(changes);
   }, []);
@@ -954,146 +1348,253 @@ ${bobbinYaml}
     setEditInput("");
     setBobbinChanges([]);
   };
-  const handleClose = () => {
+  const hasSaveHandler = onSave || onSaveProject;
+  const handleClose = useCallback(() => {
     const editCount = session.history.length;
     const finalCode = code;
+    const hasUnsavedChanges = editCount > 0 && finalCode !== (session.originalProject.files.get(session.activeFile)?.content ?? "");
+    if (hasUnsavedChanges && hasSaveHandler) {
+      setPendingClose({ code: finalCode, count: editCount });
+      setShowConfirm(true);
+    } else {
+      setEditInput("");
+      session.clearError();
+      onClose(finalCode, editCount);
+    }
+  }, [code, session, hasSaveHandler, onClose]);
+  const handleSaveAndClose = useCallback(async () => {
+    if (!pendingClose || !hasSaveHandler) return;
+    setIsSaving(true);
+    setSaveError(null);
+    try {
+      if (onSaveProject) {
+        await onSaveProject(session.project);
+      } else if (onSave) {
+        await onSave(pendingClose.code);
+      }
+      setShowConfirm(false);
+      setEditInput("");
+      session.clearError();
+      onClose(pendingClose.code, pendingClose.count);
+      setPendingClose(null);
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : "Save failed");
+    } finally {
+      setIsSaving(false);
+    }
+  }, [pendingClose, onSave, onSaveProject, session, onClose]);
+  const handleDiscard = useCallback(() => {
+    if (!pendingClose) return;
+    setShowConfirm(false);
     setEditInput("");
     session.clearError();
-    onClose(finalCode, editCount);
-  };
+    onClose(pendingClose.code, pendingClose.count);
+    setPendingClose(null);
+  }, [pendingClose, session, onClose]);
+  const handleCancelClose = useCallback(() => {
+    setShowConfirm(false);
+    setPendingClose(null);
+    setSaveError(null);
+  }, []);
+  const handleDirectSave = useCallback(async () => {
+    if (!hasSaveHandler) return;
+    setIsSaving(true);
+    setSaveError(null);
+    try {
+      if (onSaveProject) {
+        await onSaveProject(session.project);
+      } else if (onSave && currentCodeRef.current) {
+        await onSave(currentCodeRef.current);
+      }
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : "Save failed");
+    } finally {
+      setIsSaving(false);
+    }
+  }, [onSave, onSaveProject, session.project]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-background rounded-lg shadow-xl w-full h-full max-w-6xl max-h-[90vh] overflow-hidden", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3 bg-background border-b-2", children: [
-      /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 text-primary" }),
-      session.isApplying && /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-primary flex items-center gap-1 ml-2", children: [
-        /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
-        "Applying edits..."
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-background rounded-lg shadow-xl w-full h-full max-w-6xl max-h-[90vh] overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3 bg-background border-b-2", children: [
+        /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 text-primary" }),
+        session.isApplying && /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-primary flex items-center gap-1 ml-2", children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
+          "Applying edits..."
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ml-auto flex gap-2", children: [
+          hasChanges && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: session.revert,
+              className: "px-2 py-1 text-xs rounded flex items-center gap-1 hover:bg-primary/20 text-primary",
+              title: "Revert to original",
+              children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-3 w-3" })
+            }
+          ),
+          !hideFileTree && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setShowTree(!showTree),
+              className: `px-2 py-1 text-xs rounded flex items-center gap-1 ${showTree ? "bg-primary text-primary-foreground" : "hover:bg-primary/20 text-primary"}`,
+              title: showTree ? "Single file" : "File tree",
+              children: showTree ? /* @__PURE__ */ jsx(FileCode, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(FolderTree, { className: "h-3 w-3" })
+            }
+          ),
+          showPreviewToggle && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setShowPreview(!showPreview),
+              className: `px-2 py-1 text-xs rounded flex items-center gap-1 ${showPreview ? "bg-primary text-primary-foreground" : "hover:bg-primary/20 text-primary"}`,
+              children: [
+                showPreview ? /* @__PURE__ */ jsx(Eye, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Code, { className: "h-3 w-3" }),
+                showPreview ? "Preview" : "Code"
+              ]
+            }
+          ),
+          hasSaveHandler && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: handleDirectSave,
+              disabled: isSaving,
+              className: "px-2 py-1 text-xs rounded flex items-center gap-1 hover:bg-primary/20 text-primary disabled:opacity-50",
+              title: "Save changes",
+              children: [
+                isSaving ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx(Save, { className: "h-3 w-3" }),
+                "Save"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: handleClose,
+              className: "px-2 py-1 text-xs rounded flex items-center gap-1 bg-primary text-primary-foreground hover:bg-primary/90",
+              title: "Exit edit mode",
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
+                "Done"
+              ]
+            }
+          )
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex gap-2", children: [
-        hasChanges && /* @__PURE__ */ jsx(
-          "button",
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 border-b-2 overflow-hidden flex", children: [
+        !hideFileTree && showTree && /* @__PURE__ */ jsx(
+          FileTree,
           {
-            onClick: session.revert,
-            className: "px-2 py-1 text-xs rounded flex items-center gap-1 hover:bg-primary/20 text-primary",
-            title: "Revert to original",
-            children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-3 w-3" })
+            files,
+            activeFile: session.activeFile,
+            onSelectFile: session.setActiveFile,
+            onReplaceFile: session.replaceFile
           }
         ),
-        /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: fileType.category === "compilable" && showPreview ? /* @__PURE__ */ jsxs("div", { className: "bg-white h-full relative", ref: setPreviewContainer, children: [
+          previewError && renderError ? renderError(previewError) : previewError ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-sm text-destructive flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: previewError })
+          ] }) : previewLoading && renderLoading ? renderLoading() : previewLoading ? /* @__PURE__ */ jsxs("div", { className: "p-4 flex items-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Rendering preview..." })
+          ] }) : /* @__PURE__ */ jsx("div", { className: "p-4", children: renderPreview(code) }, hashCode(code)),
+          !renderLoading && !renderError && !previewLoading && /* @__PURE__ */ jsx(
+            Bobbin,
+            {
+              container: previewContainer,
+              pillContainer: previewContainer,
+              defaultActive: false,
+              showInspector: true,
+              onChanges: handleBobbinChanges,
+              exclude: [".bobbin-pill", "[data-bobbin]"]
+            }
+          )
+        ] }) : fileType.category === "compilable" && !showPreview ? /* @__PURE__ */ jsx(
+          CodeBlockView,
           {
-            onClick: () => setShowTree(!showTree),
-            className: `px-2 py-1 text-xs rounded flex items-center gap-1 ${showTree ? "bg-primary text-primary-foreground" : "hover:bg-primary/20 text-primary"}`,
-            title: showTree ? "Single file" : "File tree",
-            children: showTree ? /* @__PURE__ */ jsx(FileCode, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(FolderTree, { className: "h-3 w-3" })
+            content: code,
+            language: fileType.language,
+            editable: true,
+            onChange: session.updateActiveFile
           }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
+        ) : fileType.category === "text" ? /* @__PURE__ */ jsx(
+          CodeBlockView,
           {
-            onClick: () => setShowPreview(!showPreview),
-            className: `px-2 py-1 text-xs rounded flex items-center gap-1 ${showPreview ? "bg-primary text-primary-foreground" : "hover:bg-primary/20 text-primary"}`,
-            children: [
-              showPreview ? /* @__PURE__ */ jsx(Eye, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Code, { className: "h-3 w-3" }),
-              showPreview ? "Preview" : "Code"
-            ]
+            content: code,
+            language: fileType.language,
+            editable: true,
+            onChange: session.updateActiveFile
           }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
+        ) : fileType.category === "media" ? /* @__PURE__ */ jsx(
+          MediaPreview,
           {
-            onClick: handleClose,
-            className: "px-2 py-1 text-xs rounded flex items-center gap-1 bg-primary text-primary-foreground hover:bg-primary/90",
-            title: "Exit edit mode",
-            children: [
-              /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
-              "Done"
-            ]
+            content: code,
+            mimeType: getMimeType(session.activeFile),
+            fileName: session.activeFile.split("/").pop() ?? session.activeFile
           }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 border-b-2 overflow-hidden flex", children: [
-      showTree && /* @__PURE__ */ jsx(
-        FileTree,
+        ) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Preview not available for this file type" }) }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        EditHistory,
         {
-          files,
-          activeFile: session.activeFile,
-          onSelectFile: session.setActiveFile
+          entries: session.history,
+          streamingNotes: session.streamingNotes,
+          isStreaming: session.isApplying,
+          pendingPrompt: session.pendingPrompt,
+          className: "h-48"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: showPreview ? /* @__PURE__ */ jsxs("div", { className: "bg-white h-full relative", ref: setPreviewContainer, children: [
-        previewError && renderError ? renderError(previewError) : previewError ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-sm text-destructive flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }),
-          /* @__PURE__ */ jsx("span", { children: previewError })
-        ] }) : previewLoading && renderLoading ? renderLoading() : previewLoading ? /* @__PURE__ */ jsxs("div", { className: "p-4 flex items-center gap-2 text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Rendering preview..." })
-        ] }) : /* @__PURE__ */ jsx("div", { className: "p-4", children: renderPreview(code) }, hashCode(code)),
-        !renderLoading && !renderError && !previewLoading && /* @__PURE__ */ jsx(
-          Bobbin,
+      (session.error || saveError) && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-destructive/10 text-destructive text-sm flex items-center gap-2 border-t-2 border-destructive", children: [
+        /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }),
+        session.error || saveError
+      ] }),
+      bobbinChanges.length > 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-blue-50 text-blue-700 text-sm flex items-center gap-2 border-t", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          bobbinChanges.length,
+          " visual change",
+          bobbinChanges.length !== 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
           {
-            container: previewContainer,
-            pillContainer: previewContainer,
-            defaultActive: false,
-            showInspector: true,
-            onChanges: handleBobbinChanges,
-            exclude: [".bobbin-pill", "[data-bobbin]"]
+            onClick: () => setBobbinChanges([]),
+            className: "text-xs underline hover:no-underline",
+            children: "Clear"
           }
         )
-      ] }) : /* @__PURE__ */ jsx("div", { className: "p-4 bg-muted/10 h-full overflow-auto", children: /* @__PURE__ */ jsx("pre", { className: "text-xs whitespace-pre-wrap break-words m-0", children: /* @__PURE__ */ jsx("code", { children: code }) }) }) })
-    ] }),
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "p-4 border-t-2 bg-primary/5 flex gap-2 items-end", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+          MarkdownEditor,
+          {
+            value: editInput,
+            onChange: setEditInput,
+            onSubmit: handleSubmit,
+            placeholder: "Describe changes...",
+            disabled: session.isApplying
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleSubmit,
+            disabled: !editInput.trim() && bobbinChanges.length === 0 || session.isApplying,
+            className: "px-3 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 flex items-center gap-1 shrink-0",
+            children: session.isApplying ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] }) }),
     /* @__PURE__ */ jsx(
-      EditHistory,
+      SaveConfirmDialog,
       {
-        entries: session.history,
-        streamingNotes: session.streamingNotes,
-        isStreaming: session.isApplying,
-        pendingPrompt: session.pendingPrompt,
-        className: "h-48"
+        isOpen: showConfirm,
+        isSaving,
+        error: saveError,
+        onSave: handleSaveAndClose,
+        onDiscard: handleDiscard,
+        onCancel: handleCancelClose
       }
-    ),
-    session.error && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-destructive/10 text-destructive text-sm flex items-center gap-2 border-t-2 border-destructive", children: [
-      /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }),
-      session.error
-    ] }),
-    bobbinChanges.length > 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-blue-50 text-blue-700 text-sm flex items-center gap-2 border-t", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        bobbinChanges.length,
-        " visual change",
-        bobbinChanges.length !== 1 ? "s" : ""
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => setBobbinChanges([]),
-          className: "text-xs underline hover:no-underline",
-          children: "Clear"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "p-4 border-t-2 bg-primary/5 flex gap-2 items-end", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
-        MarkdownEditor,
-        {
-          value: editInput,
-          onChange: setEditInput,
-          onSubmit: handleSubmit,
-          placeholder: "Describe changes...",
-          disabled: session.isApplying
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: handleSubmit,
-          disabled: !editInput.trim() && bobbinChanges.length === 0 || session.isApplying,
-          className: "px-3 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 flex items-center gap-1 shrink-0",
-          children: session.isApplying ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" })
-        }
-      )
-    ] })
-  ] }) });
+    )
+  ] });
 }
 var VFS_BASE_URL = "/vfs";
 var vfsConfigCache = null;
@@ -1112,8 +1613,11 @@ async function getVFSConfig() {
 var storeInstance = null;
 function getVFSStore() {
   if (!storeInstance) {
-    const backend = new LocalFSBackend({ baseUrl: VFS_BASE_URL });
-    storeInstance = new VFSStore(backend);
+    const provider = new HttpBackend({ baseUrl: VFS_BASE_URL });
+    storeInstance = new VFSStore(provider, {
+      sync: true,
+      conflictStrategy: "local-wins"
+    });
   }
   return storeInstance;
 }
@@ -1135,9 +1639,17 @@ async function listProjects() {
   }
   return Array.from(projectIds);
 }
-async function saveFile(file) {
+async function saveFile(path, content) {
+  const store = getVFSStore();
+  await store.writeFile(path, content);
+}
+async function loadFile(path, encoding) {
   const store = getVFSStore();
-  await store.putFile(file);
+  return store.readFile(path, encoding);
+}
+function subscribeToChanges(callback) {
+  const store = getVFSStore();
+  return store.on("change", callback);
 }
 async function isVFSAvailable() {
   try {
@@ -1207,12 +1719,17 @@ function useCodeCompiler(compiler, code, enabled, services) {
   }, [code, compiler, enabled, services]);
   return { containerRef, loading, error };
 }
-function CodePreview({ code: originalCode, compiler, services, filePath }) {
+function CodePreview({ code: originalCode, compiler, services, filePath, entrypoint = "index.ts" }) {
   const [isEditing, setIsEditing] = useState(false);
   const [showPreview, setShowPreview] = useState(true);
   const [currentCode, setCurrentCode] = useState(originalCode);
   const [editCount, setEditCount] = useState(0);
   const [saveStatus, setSaveStatus] = useState("unsaved");
+  const [lastSavedCode, setLastSavedCode] = useState(originalCode);
+  const [vfsPath, setVfsPath] = useState(null);
+  const currentCodeRef = useRef(currentCode);
+  const lastSavedRef = useRef(lastSavedCode);
+  const isEditingRef = useRef(isEditing);
   const fallbackId = useMemo(() => crypto.randomUUID(), []);
   const getProjectId = useCallback(async () => {
     if (filePath) {
@@ -1230,10 +1747,57 @@ function CodePreview({ code: originalCode, compiler, services, filePath }) {
   const getEntryFile = useCallback(() => {
     if (filePath) {
       const parts = filePath.split("/");
-      return parts[parts.length - 1] || "main.tsx";
+      return parts[parts.length - 1] || entrypoint;
     }
-    return "main.tsx";
+    return entrypoint;
   }, [filePath]);
+  useEffect(() => {
+    currentCodeRef.current = currentCode;
+  }, [currentCode]);
+  useEffect(() => {
+    lastSavedRef.current = lastSavedCode;
+  }, [lastSavedCode]);
+  useEffect(() => {
+    isEditingRef.current = isEditing;
+  }, [isEditing]);
+  useEffect(() => {
+    let active = true;
+    void (async () => {
+      const projectId = await getProjectId();
+      const entryFile = getEntryFile();
+      if (!active) return;
+      setVfsPath(`${projectId}/${entryFile}`);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [getProjectId, getEntryFile]);
+  useEffect(() => {
+    if (!vfsPath) return;
+    const unsubscribe = subscribeToChanges(async (record) => {
+      if (record.path !== vfsPath) return;
+      if (record.type === "delete") {
+        setSaveStatus("unsaved");
+        return;
+      }
+      if (isEditingRef.current) return;
+      try {
+        const remote = await loadFile(vfsPath);
+        if (currentCodeRef.current !== lastSavedRef.current) {
+          setSaveStatus("unsaved");
+          return;
+        }
+        if (remote !== currentCodeRef.current) {
+          setCurrentCode(remote);
+          setLastSavedCode(remote);
+          setSaveStatus("saved");
+        }
+      } catch {
+        setSaveStatus("error");
+      }
+    });
+    return () => unsubscribe();
+  }, [vfsPath]);
   const handleSave = useCallback(async () => {
     setSaveStatus("saving");
     try {
@@ -1241,6 +1805,7 @@ function CodePreview({ code: originalCode, compiler, services, filePath }) {
       const entryFile = getEntryFile();
       const project = createSingleFileProject(currentCode, entryFile, projectId);
       await saveProject(project);
+      setLastSavedCode(currentCode);
       setSaveStatus("saved");
     } catch (err) {
       console.warn("[VFS] Failed to save project:", err);
@@ -1594,4 +2159,4 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-export { CodeBlockExtension, CodePreview, EditHistory, EditModal, FileTree, MarkdownEditor, ServicesInspector, applyDiffs, cn, extractCodeBlocks, extractProject, extractSummary, extractTextWithoutDiffs, findDiffMarkers, findFirstCodeBlock, getActiveContent, getCodeBlockLanguages, getFiles, getVFSConfig, getVFSStore, hasCodeBlock, hasDiffBlocks, isVFSAvailable, listProjects, loadProject, parseCodeBlockAttributes, parseCodeBlocks, parseDiffs, parseEditResponse, sanitizeDiffMarkers, saveFile, saveProject, sendEditRequest, useEditSession };
+export { CodeBlockExtension, CodeBlockView, CodePreview, EditHistory, EditModal, FileTree, MarkdownEditor, MediaPreview, SaveConfirmDialog, ServicesInspector, applyDiffs, cn, extractCodeBlocks, extractProject, extractSummary, extractTextWithoutDiffs, findDiffMarkers, findFirstCodeBlock, getActiveContent, getCodeBlockLanguages, getFileType, getFiles, getLanguageFromExt, getMimeType, getVFSConfig, getVFSStore, hasCodeBlock, hasDiffBlocks, isCompilable, isImageFile, isMediaFile, isTextFile, isVFSAvailable, isVideoFile, listProjects, loadProject, parseCodeBlockAttributes, parseCodeBlocks, parseDiffs, parseEditResponse, sanitizeDiffMarkers, saveFile, saveProject, sendEditRequest, useEditSession };