@aprovan/patchwork-editor 0.1.2-dev.68f15f3 → 0.1.2-dev.78c0b14

package/dist/index.js

@@ -2,17 +2,18 @@ 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 { HttpBackend, VFSStore, createSingleFileProject, detectMainFile, createProjectFromFiles } from '@aprovan/patchwork-compiler';
 import { Folder, Pin, X, Loader2, AlertCircle, FileImage, FileVideo, Pencil, RotateCcw, FileCode, FolderTree, Eye, Code, Send, MessageSquare, Server, ChevronDown, File, PinOff, ChevronRight, ChevronsDown, Upload, AlertTriangle, Save } 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';
+import { Bobbin, serializeChangesToYAML } from '@aprovan/bobbin';
 import Placeholder from '@tiptap/extension-placeholder';
 import Typography from '@tiptap/extension-typography';
-import { Markdown as Markdown$1 } from 'tiptap-markdown';
 import { TextSelection } from '@tiptap/pm/state';
+import StarterKit from '@tiptap/starter-kit';
+import { Markdown as Markdown$1 } from 'tiptap-markdown';
+import DOMPurify from 'dompurify';
 import { createHighlighter } from 'shiki';
-import { Bobbin, serializeChangesToYAML } from '@aprovan/bobbin';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
@@ -180,6 +181,69 @@ var CodeBlockExtension = Node.create({
     };
   }
 });
+var VFS_BASE_URL = "/vfs";
+var vfsConfigCache = null;
+async function getVFSConfig() {
+  if (vfsConfigCache) return vfsConfigCache;
+  try {
+    const res = await fetch(`${VFS_BASE_URL}/config`);
+    if (res.ok) {
+      vfsConfigCache = await res.json();
+      return vfsConfigCache;
+    }
+  } catch {
+  }
+  return { usePaths: false };
+}
+var storeInstance = null;
+function getVFSStore() {
+  if (!storeInstance) {
+    const provider = new HttpBackend({ baseUrl: VFS_BASE_URL });
+    storeInstance = new VFSStore(provider, {
+      sync: true,
+      conflictStrategy: "local-wins"
+    });
+  }
+  return storeInstance;
+}
+async function saveProject(project) {
+  const store = getVFSStore();
+  await store.saveProject(project);
+}
+async function loadProject(id) {
+  const store = getVFSStore();
+  return store.loadProject(id);
+}
+async function listProjects() {
+  const store = getVFSStore();
+  const files = await store.listFiles();
+  const projectIds = /* @__PURE__ */ new Set();
+  for (const file of files) {
+    const id = file.split("/")[0];
+    if (id) projectIds.add(id);
+  }
+  return Array.from(projectIds);
+}
+async function saveFile(path, content) {
+  const store = getVFSStore();
+  await store.writeFile(path, content);
+}
+async function loadFile(path, encoding) {
+  const store = getVFSStore();
+  return store.readFile(path, encoding);
+}
+function subscribeToChanges(callback) {
+  const store = getVFSStore();
+  return store.on("change", callback);
+}
+async function isVFSAvailable() {
+  try {
+    const res = await fetch(VFS_BASE_URL, { method: "HEAD" });
+    return res.ok || res.status === 404;
+  } catch {
+    return false;
+  }
+}
 
 // src/components/edit/types.ts
 function getActiveContent(state) {
@@ -440,20 +504,12 @@ function cloneProject(project) {
     files: new Map(project.files)
   };
 }
-function useEditSession(options) {
+function useProjectState(options) {
   const {
     originalCode,
     originalProject: providedProject,
-    initialActiveFile,
-    compile,
-    apiEndpoint
+    initialActiveFile
   } = options;
-  console.log(
-    "[useEditSession] providedProject:",
-    providedProject?.id,
-    "files:",
-    providedProject ? Array.from(providedProject.files.keys()) : "none"
-  );
   const originalProject = useMemo(
     () => providedProject ?? createSingleFileProject(originalCode ?? ""),
     [providedProject, originalCode]
@@ -464,10 +520,6 @@ function useEditSession(options) {
     initialActiveFile && originalProject.files.has(initialActiveFile) ? initialActiveFile : originalProject.entry
   );
   const [history, setHistory] = useState([]);
-  const [isApplying, setIsApplying] = useState(false);
-  const [error, setError] = useState(null);
-  const [streamingNotes, setStreamingNotes] = useState([]);
-  const [pendingPrompt, setPendingPrompt] = useState(null);
   useEffect(() => {
     if (originalProject !== lastSyncedProjectRef.current) {
       lastSyncedProjectRef.current = originalProject;
@@ -476,15 +528,74 @@ function useEditSession(options) {
         initialActiveFile && originalProject.files.has(initialActiveFile) ? initialActiveFile : originalProject.entry
       );
       setHistory([]);
-      setError(null);
-      setStreamingNotes([]);
     }
   }, [originalProject, initialActiveFile]);
+  const currentCode = useMemo(
+    () => project.files.get(activeFile)?.content ?? "",
+    [project, activeFile]
+  );
+  const revert = useCallback(() => {
+    setProject(originalProject);
+    setActiveFile(originalProject.entry);
+    setHistory([]);
+  }, [originalProject]);
+  const updateActiveFile = useCallback(
+    (content) => {
+      setProject((prev) => {
+        const updated = cloneProject(prev);
+        const file = updated.files.get(activeFile);
+        if (file) {
+          updated.files.set(activeFile, { ...file, content });
+        }
+        return updated;
+      });
+    },
+    [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;
+      });
+    },
+    []
+  );
+  return {
+    project,
+    originalProject,
+    activeFile,
+    setActiveFile,
+    history,
+    setHistory,
+    setProject,
+    revert,
+    updateActiveFile,
+    replaceFile,
+    currentCode
+  };
+}
+function useEditSession(options) {
+  const {
+    compile,
+    apiEndpoint
+  } = options;
+  const state = useProjectState(options);
+  const [isApplying, setIsApplying] = useState(false);
+  const [error, setError] = useState(null);
+  const [streamingNotes, setStreamingNotes] = useState([]);
+  const [pendingPrompt, setPendingPrompt] = useState(null);
   const performEdit = useCallback(
-    async (currentCode2, prompt, isRetry = false) => {
+    async (currentCode, prompt, isRetry = false) => {
       const entries = [];
       const response = await sendEditRequest(
-        { code: currentCode2, prompt },
+        { code: currentCode, prompt },
         {
           endpoint: apiEndpoint,
           onProgress: (note) => setStreamingNotes((prev) => [...prev, note])
@@ -517,10 +628,6 @@ Please fix this error.`;
     },
     [compile, apiEndpoint]
   );
-  const currentCode = useMemo(
-    () => project.files.get(activeFile)?.content ?? "",
-    [project, activeFile]
-  );
   const submitEdit = useCallback(
     async (prompt) => {
       if (!prompt.trim() || isApplying) return;
@@ -529,16 +636,16 @@ Please fix this error.`;
       setStreamingNotes([]);
       setPendingPrompt(prompt);
       try {
-        const result = await performEdit(currentCode, prompt);
-        setProject((prev) => {
-          const updated = cloneProject(prev);
-          const file = updated.files.get(activeFile);
+        const result = await performEdit(state.currentCode, prompt);
+        state.setProject((prev) => {
+          const updated = { ...prev, files: new Map(prev.files) };
+          const file = updated.files.get(state.activeFile);
           if (file) {
-            updated.files.set(activeFile, { ...file, content: result.newCode });
+            updated.files.set(state.activeFile, { ...file, content: result.newCode });
           }
           return updated;
         });
-        setHistory((prev) => [...prev, ...result.entries]);
+        state.setHistory((prev) => [...prev, ...result.entries]);
       } catch (err) {
         setError(err instanceof Error ? err.message : "Edit failed");
       } finally {
@@ -547,61 +654,26 @@ Please fix this error.`;
         setPendingPrompt(null);
       }
     },
-    [currentCode, activeFile, isApplying, performEdit]
-  );
-  const revert = useCallback(() => {
-    setProject(originalProject);
-    setActiveFile(originalProject.entry);
-    setHistory([]);
-    setError(null);
-    setStreamingNotes([]);
-  }, [originalProject]);
-  const updateActiveFile = useCallback(
-    (content) => {
-      setProject((prev) => {
-        const updated = cloneProject(prev);
-        const file = updated.files.get(activeFile);
-        if (file) {
-          updated.files.set(activeFile, { ...file, content });
-        }
-        return updated;
-      });
-    },
-    [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;
-      });
-    },
-    []
+    [state.currentCode, state.activeFile, state.setProject, state.setHistory, isApplying, performEdit]
   );
   const clearError = useCallback(() => {
     setError(null);
   }, []);
   return {
-    project,
-    originalProject,
-    activeFile,
-    history,
+    project: state.project,
+    originalProject: state.originalProject,
+    activeFile: state.activeFile,
+    history: state.history,
     isApplying,
     error,
     streamingNotes,
     pendingPrompt,
     submitEdit,
-    revert,
-    updateActiveFile,
-    setActiveFile,
+    revert: state.revert,
+    updateActiveFile: state.updateActiveFile,
+    setActiveFile: state.setActiveFile,
     clearError,
-    replaceFile
+    replaceFile: state.replaceFile
   };
 }
 function ProgressNote({ text, isLatest }) {
@@ -1010,69 +1082,221 @@ function SaveStatusButton({
     }
   );
 }
-
-// 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 highlighterPromise = null;
+var COMMON_LANGUAGES = [
+  "typescript",
+  "javascript",
+  "tsx",
+  "jsx",
+  "json",
+  "html",
+  "css",
+  "markdown",
+  "yaml",
+  "python",
+  "bash",
+  "sql"
 ];
-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",
+function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ["github-light"],
+      langs: COMMON_LANGUAGES
+    });
+  }
+  return highlighterPromise;
+}
+function normalizeLanguage(lang) {
+  if (!lang) return "typescript";
+  const normalized = lang.toLowerCase();
+  const mapping = {
+    ts: "typescript",
+    tsx: "tsx",
+    js: "javascript",
+    jsx: "jsx",
+    json: "json",
+    html: "html",
+    css: "css",
+    md: "markdown",
+    markdown: "markdown",
+    yml: "yaml",
+    yaml: "yaml",
+    py: "python",
+    python: "python",
+    sh: "bash",
+    bash: "bash",
+    sql: "sql",
+    typescript: "typescript",
+    javascript: "javascript"
+  };
+  return mapping[normalized] || "typescript";
+}
+function CodeBlockView({ content, language, editable = false, onChange }) {
+  const textareaRef = useRef(null);
+  const containerRef = useRef(null);
+  const [highlighter, setHighlighter] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    getHighlighter().then((h) => {
+      if (mounted) setHighlighter(h);
+    });
+    return () => {
+      mounted = false;
+    };
+  }, []);
+  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";
+  const shikiLang = useMemo(() => normalizeLanguage(language), [language]);
+  const highlightedHtml = useMemo(() => {
+    if (!highlighter) return null;
+    try {
+      const raw = highlighter.codeToHtml(content, {
+        lang: shikiLang,
+        theme: "github-light"
+      });
+      return DOMPurify.sanitize(raw, {
+        ALLOWED_TAGS: ["pre", "code", "span", "div"],
+        ALLOWED_ATTR: ["class", "style"]
+      });
+    } catch {
+      return null;
+    }
+  }, [highlighter, content, shikiLang]);
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-[#ffffff]", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-4 py-2 bg-[#f6f8fa] border-b border-[#d0d7de] text-xs", children: /* @__PURE__ */ jsx("span", { className: "font-mono text-[#57606a]", children: langLabel }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: editable ? /* @__PURE__ */ jsxs("div", { className: "relative min-h-full", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: "absolute top-0 left-0 right-0 pointer-events-none p-4",
+          "aria-hidden": "true",
+          children: highlightedHtml ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "highlighted-code font-mono text-xs leading-relaxed whitespace-pre-wrap break-words [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_code]:!bg-transparent [&_code]:whitespace-pre-wrap [&_code]:break-words",
+              dangerouslySetInnerHTML: { __html: highlightedHtml }
+            }
+          ) : /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap break-words text-[#24292f] m-0 leading-relaxed", children: /* @__PURE__ */ jsx("code", { children: content }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          value: content,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          className: "relative w-full min-h-full font-mono text-xs leading-relaxed bg-transparent border-none outline-none resize-none p-4 text-transparent whitespace-pre-wrap break-words",
+          spellCheck: false,
+          style: {
+            tabSize: 2,
+            caretColor: "#24292f",
+            wordBreak: "break-word",
+            overflowWrap: "break-word"
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("div", { className: "p-4", children: highlightedHtml ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "highlighted-code font-mono text-xs leading-relaxed whitespace-pre-wrap break-words [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_code]:!bg-transparent [&_code]:whitespace-pre-wrap [&_code]:break-words",
+        dangerouslySetInnerHTML: { __html: highlightedHtml }
+      }
+    ) : /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap break-words m-0 leading-relaxed text-[#24292f]", children: /* @__PURE__ */ jsx("code", { children: content }) }) }) })
+  ] });
+}
+
+// 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) {
@@ -1693,203 +1917,6 @@ function FileTree({
     ) })
   ] });
 }
-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"
-        }
-      )
-    ] })
-  ] }) });
-}
-var highlighterPromise = null;
-var COMMON_LANGUAGES = [
-  "typescript",
-  "javascript",
-  "tsx",
-  "jsx",
-  "json",
-  "html",
-  "css",
-  "markdown",
-  "yaml",
-  "python",
-  "bash",
-  "sql"
-];
-function getHighlighter() {
-  if (!highlighterPromise) {
-    highlighterPromise = createHighlighter({
-      themes: ["github-light"],
-      langs: COMMON_LANGUAGES
-    });
-  }
-  return highlighterPromise;
-}
-function normalizeLanguage(lang) {
-  if (!lang) return "typescript";
-  const normalized = lang.toLowerCase();
-  const mapping = {
-    ts: "typescript",
-    tsx: "tsx",
-    js: "javascript",
-    jsx: "jsx",
-    json: "json",
-    html: "html",
-    css: "css",
-    md: "markdown",
-    markdown: "markdown",
-    yml: "yaml",
-    yaml: "yaml",
-    py: "python",
-    python: "python",
-    sh: "bash",
-    bash: "bash",
-    sql: "sql",
-    typescript: "typescript",
-    javascript: "javascript"
-  };
-  return mapping[normalized] || "typescript";
-}
-function CodeBlockView({ content, language, editable = false, onChange }) {
-  const textareaRef = useRef(null);
-  const containerRef = useRef(null);
-  const [highlighter, setHighlighter] = useState(null);
-  useEffect(() => {
-    let mounted = true;
-    getHighlighter().then((h) => {
-      if (mounted) setHighlighter(h);
-    });
-    return () => {
-      mounted = false;
-    };
-  }, []);
-  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";
-  const shikiLang = useMemo(() => normalizeLanguage(language), [language]);
-  const highlightedHtml = useMemo(() => {
-    if (!highlighter) return null;
-    try {
-      return highlighter.codeToHtml(content, {
-        lang: shikiLang,
-        theme: "github-light"
-      });
-    } catch {
-      return null;
-    }
-  }, [highlighter, content, shikiLang]);
-  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-[#ffffff]", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-4 py-2 bg-[#f6f8fa] border-b border-[#d0d7de] text-xs", children: /* @__PURE__ */ jsx("span", { className: "font-mono text-[#57606a]", children: langLabel }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: editable ? /* @__PURE__ */ jsxs("div", { className: "relative min-h-full", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: containerRef,
-          className: "absolute top-0 left-0 right-0 pointer-events-none p-4",
-          "aria-hidden": "true",
-          children: highlightedHtml ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "highlighted-code font-mono text-xs leading-relaxed whitespace-pre-wrap break-words [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_code]:!bg-transparent [&_code]:whitespace-pre-wrap [&_code]:break-words",
-              dangerouslySetInnerHTML: { __html: highlightedHtml }
-            }
-          ) : /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap break-words text-[#24292f] m-0 leading-relaxed", children: /* @__PURE__ */ jsx("code", { children: content }) })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref: textareaRef,
-          value: content,
-          onChange: handleChange,
-          onKeyDown: handleKeyDown,
-          className: "relative w-full min-h-full font-mono text-xs leading-relaxed bg-transparent border-none outline-none resize-none p-4 text-transparent whitespace-pre-wrap break-words",
-          spellCheck: false,
-          style: {
-            tabSize: 2,
-            caretColor: "#24292f",
-            wordBreak: "break-word",
-            overflowWrap: "break-word"
-          }
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx("div", { className: "p-4", children: highlightedHtml ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "highlighted-code font-mono text-xs leading-relaxed whitespace-pre-wrap break-words [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_code]:!bg-transparent [&_code]:whitespace-pre-wrap [&_code]:break-words",
-        dangerouslySetInnerHTML: { __html: highlightedHtml }
-      }
-    ) : /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap break-words m-0 leading-relaxed text-[#24292f]", 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`;
@@ -1980,6 +2007,55 @@ function MediaPreview({ content, mimeType, fileName }) {
     ] })
   ] });
 }
+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 hashCode(str) {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
@@ -2416,69 +2492,6 @@ function WidgetPreview({
     /* @__PURE__ */ jsx("div", { ref: containerRef, className: "w-full" })
   ] });
 }
-var VFS_BASE_URL = "/vfs";
-var vfsConfigCache = null;
-async function getVFSConfig() {
-  if (vfsConfigCache) return vfsConfigCache;
-  try {
-    const res = await fetch(`${VFS_BASE_URL}/config`);
-    if (res.ok) {
-      vfsConfigCache = await res.json();
-      return vfsConfigCache;
-    }
-  } catch {
-  }
-  return { usePaths: false };
-}
-var storeInstance = null;
-function getVFSStore() {
-  if (!storeInstance) {
-    const provider = new HttpBackend({ baseUrl: VFS_BASE_URL });
-    storeInstance = new VFSStore(provider, {
-      sync: true,
-      conflictStrategy: "local-wins"
-    });
-  }
-  return storeInstance;
-}
-async function saveProject(project) {
-  const store = getVFSStore();
-  await store.saveProject(project);
-}
-async function loadProject(id) {
-  const store = getVFSStore();
-  return store.loadProject(id);
-}
-async function listProjects() {
-  const store = getVFSStore();
-  const files = await store.listFiles();
-  const projectIds = /* @__PURE__ */ new Set();
-  for (const file of files) {
-    const id = file.split("/")[0];
-    if (id) projectIds.add(id);
-  }
-  return Array.from(projectIds);
-}
-async function saveFile(path, content) {
-  const store = getVFSStore();
-  await store.writeFile(path, content);
-}
-async function loadFile(path, encoding) {
-  const store = getVFSStore();
-  return store.readFile(path, encoding);
-}
-function subscribeToChanges(callback) {
-  const store = getVFSStore();
-  return store.on("change", callback);
-}
-async function isVFSAvailable() {
-  try {
-    const res = await fetch(VFS_BASE_URL, { method: "HEAD" });
-    return res.ok || res.status === 404;
-  } catch {
-    return false;
-  }
-}
 function createManifest2(services) {
   return {
     name: "preview",
@@ -2591,8 +2604,7 @@ function CodePreview({
       await saveProject(project);
       setLastSavedCode(currentCode);
       setSaveStatus("saved");
-    } catch (err) {
-      console.warn("[VFS] Failed to save project:", err);
+    } catch {
       setSaveStatus("error");
     }
   }, [currentCode, getProjectId, getEntryFile]);
@@ -2763,8 +2775,7 @@ ${errors.join("\n")}` : "";
                 await saveProject(project);
                 setLastSavedCode(finalCode);
                 setSaveStatus("saved");
-              } catch (err) {
-                console.warn("[VFS] Failed to save project:", err);
+              } catch {
                 setSaveStatus("error");
               }
             })();
@@ -3012,4 +3023,4 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-export { CodeBlockExtension, CodeBlockView, CodePreview, EditHistory, EditModal, FileTree, MarkdownEditor, MarkdownPreview, MediaPreview, SaveConfirmDialog, ServicesInspector, WidgetPreview, applyDiffs, cn, extractCodeBlocks, extractProject, extractSummary, extractTextWithoutDiffs, findDiffMarkers, findFirstCodeBlock, getActiveContent, getCodeBlockLanguages, getFileType, getFiles, getLanguageFromExt, getMimeType, getVFSConfig, getVFSStore, hasCodeBlock, hasDiffBlocks, isCompilable, isImageFile, isMarkdownFile, isMediaFile, isPreviewable, isTextFile, isVFSAvailable, isVideoFile, listProjects, loadProject, parseCodeBlockAttributes, parseCodeBlocks, parseDiffs, parseEditResponse, sanitizeDiffMarkers, saveFile, saveProject, sendEditRequest, useEditSession };
+export { CodeBlockExtension, CodeBlockView, CodePreview, EditHistory, EditModal, FileTree, MarkdownEditor, MarkdownPreview, MediaPreview, SaveConfirmDialog, ServicesInspector, WidgetPreview, applyDiffs, cn, extractCodeBlocks, extractProject, extractSummary, extractTextWithoutDiffs, findDiffMarkers, findFirstCodeBlock, getActiveContent, getCodeBlockLanguages, getFileType, getFiles, getLanguageFromExt, getMimeType, getVFSConfig, getVFSStore, hasCodeBlock, hasDiffBlocks, isCompilable, isImageFile, isMarkdownFile, isMediaFile, isPreviewable, isTextFile, isVFSAvailable, isVideoFile, listProjects, loadProject, parseCodeBlockAttributes, parseCodeBlocks, parseDiffs, parseEditResponse, sanitizeDiffMarkers, saveFile, saveProject, sendEditRequest, useEditSession, useProjectState };