@aprovan/patchwork-editor 0.1.2-dev.03aaf5b → 0.1.2-dev.ba8f277

package/dist/index.js

@@ -2,7 +2,7 @@ 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 { 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 { 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';
@@ -371,7 +371,11 @@ async function sendEditRequest(request, options = {}) {
   }
   const text = await streamResponse(response, onProgress);
   if (!hasDiffBlocks(text)) {
-    throw new Error("No valid diffs in response");
+    return {
+      newCode: request.code,
+      summary: text.trim(),
+      progressNotes: []
+    };
   }
   const parsed = parseEditResponse(text);
   const result = applyDiffs(request.code, parsed.diffs, { sanitize });
@@ -440,6 +444,7 @@ function useEditSession(options) {
   const {
     originalCode,
     originalProject: providedProject,
+    initialActiveFile,
     compile,
     apiEndpoint
   } = options;
@@ -455,7 +460,9 @@ function useEditSession(options) {
   );
   const lastSyncedProjectRef = useRef(originalProject);
   const [project, setProject] = useState(originalProject);
-  const [activeFile, setActiveFile] = useState(originalProject.entry);
+  const [activeFile, setActiveFile] = useState(
+    initialActiveFile && originalProject.files.has(initialActiveFile) ? initialActiveFile : originalProject.entry
+  );
   const [history, setHistory] = useState([]);
   const [isApplying, setIsApplying] = useState(false);
   const [error, setError] = useState(null);
@@ -465,12 +472,14 @@ function useEditSession(options) {
     if (originalProject !== lastSyncedProjectRef.current) {
       lastSyncedProjectRef.current = originalProject;
       setProject(originalProject);
-      setActiveFile(originalProject.entry);
+      setActiveFile(
+        initialActiveFile && originalProject.files.has(initialActiveFile) ? initialActiveFile : originalProject.entry
+      );
       setHistory([]);
       setError(null);
       setStreamingNotes([]);
     }
-  }, [originalProject]);
+  }, [originalProject, initialActiveFile]);
   const performEdit = useCallback(
     async (currentCode2, prompt, isRetry = false) => {
       const entries = [];
@@ -851,6 +860,156 @@ function MarkdownEditor({
     }
   );
 }
+function parseFrontmatter(content) {
+  const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/);
+  if (!match) return { frontmatter: "", body: content };
+  return { frontmatter: match[1], body: match[2] };
+}
+function assembleFrontmatter(frontmatter, body) {
+  if (!frontmatter.trim()) return body;
+  return `---
+${frontmatter}
+---
+${body}`;
+}
+function MarkdownPreview({
+  value,
+  onChange,
+  editable = false,
+  className = ""
+}) {
+  const { frontmatter, body } = parseFrontmatter(value);
+  const [fm, setFm] = useState(frontmatter);
+  const fmRef = useRef(frontmatter);
+  const bodyRef = useRef(body);
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    const parsed = parseFrontmatter(value);
+    fmRef.current = parsed.frontmatter;
+    bodyRef.current = parsed.body;
+    setFm(parsed.frontmatter);
+  }, [value]);
+  const emitChange = useCallback(
+    (newFm, newBody) => {
+      onChange?.(assembleFrontmatter(newFm, newBody));
+    },
+    [onChange]
+  );
+  const handleFmChange = useCallback(
+    (e) => {
+      const newFm = e.target.value;
+      setFm(newFm);
+      fmRef.current = newFm;
+      emitChange(newFm, bodyRef.current);
+    },
+    [emitChange]
+  );
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  }, [fm]);
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3, 4, 5, 6] },
+        bulletList: { keepMarks: true, keepAttributes: false },
+        orderedList: { keepMarks: true, keepAttributes: false },
+        codeBlock: false,
+        code: {
+          HTMLAttributes: {
+            class: "bg-muted rounded px-1 py-0.5 font-mono text-sm"
+          }
+        },
+        blockquote: {
+          HTMLAttributes: {
+            class: "border-l-4 border-muted-foreground/30 pl-4 italic"
+          }
+        },
+        hardBreak: { keepMarks: false }
+      }),
+      CodeBlockExtension,
+      Typography,
+      Markdown$1.configure({
+        html: false,
+        transformPastedText: true,
+        transformCopiedText: true
+      })
+    ],
+    content: body,
+    editable,
+    editorProps: {
+      attributes: {
+        class: `outline-none ${className}`
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      const markdownStorage = editor2.storage.markdown;
+      const newBody = markdownStorage?.getMarkdown?.() ?? editor2.getText();
+      bodyRef.current = newBody;
+      emitChange(fmRef.current, newBody);
+    }
+  });
+  useEffect(() => {
+    editor?.setEditable(editable);
+  }, [editor, editable]);
+  useEffect(() => {
+    if (!editor) return;
+    const parsed = parseFrontmatter(value);
+    const markdownStorage = editor.storage.markdown;
+    const current = markdownStorage?.getMarkdown?.() ?? editor.getText();
+    if (parsed.body !== current) {
+      editor.commands.setContent(parsed.body);
+    }
+  }, [editor, value]);
+  return /* @__PURE__ */ jsxs("div", { className: "markdown-preview", children: [
+    frontmatter && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded-md border border-border bg-muted/40 overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-xs font-mono text-muted-foreground border-b border-border bg-muted/60 select-none", children: "yml" }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          value: fm,
+          onChange: handleFmChange,
+          readOnly: !editable,
+          className: "w-full bg-transparent px-3 py-2 font-mono text-sm outline-none resize-none",
+          spellCheck: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(EditorContent, { editor, className: "markdown-editor" })
+  ] });
+}
+function getToneClass(tone, status) {
+  if (status === "error") {
+    return tone === "muted" ? "text-destructive hover:bg-muted" : "text-destructive hover:bg-destructive/10";
+  }
+  if (status === "saved") {
+    return tone === "muted" ? "text-muted-foreground/50 hover:bg-muted" : "text-primary/50 hover:bg-primary/10";
+  }
+  return tone === "muted" ? "text-muted-foreground hover:bg-muted" : "text-primary hover:bg-primary/20";
+}
+function SaveStatusButton({
+  status,
+  onClick,
+  disabled = false,
+  tone
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: `px-2 py-1 text-xs rounded flex items-center gap-1 disabled:opacity-50 ${getToneClass(tone, status)}`,
+      title: "Save",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "inline-flex h-3 w-3 items-center justify-center shrink-0", children: status === "saving" ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : status === "error" ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Save, { className: `h-3 w-3 ${status === "saved" ? "opacity-60" : "opacity-100"}` }) }),
+        "Save"
+      ]
+    }
+  );
+}
 
 // src/components/edit/fileTypes.ts
 var COMPILABLE_EXTENSIONS = [".tsx", ".jsx", ".ts", ".js"];
@@ -939,6 +1098,12 @@ function isMediaFile(path) {
 function isTextFile(path) {
   return TEXT_EXTENSIONS.includes(getExtension(path));
 }
+function isMarkdownFile(path) {
+  return getExtension(path) === ".md";
+}
+function isPreviewable(path) {
+  return isCompilable(path) || isMarkdownFile(path);
+}
 function getLanguageFromExt(path) {
   const ext = getExtension(path);
   return EXTENSION_TO_LANGUAGE[ext] ?? null;
@@ -955,6 +1120,17 @@ function isVideoFile(path) {
   const ext = getExtension(path);
   return [".mp4", ".mov", ".webm"].includes(ext);
 }
+function sortNodes(nodes) {
+  nodes.sort((a, b) => {
+    if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+  for (const node of nodes) {
+    if (node.children.length > 0) {
+      sortNodes(node.children);
+    }
+  }
+}
 function buildTree(files) {
   const root = { name: "", path: "", isDir: true, children: [] };
   for (const file of files) {
@@ -977,14 +1153,26 @@ function buildTree(files) {
       current = child;
     }
   }
-  root.children.sort((a, b) => {
-    if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
-    return a.name.localeCompare(b.name);
-  });
+  sortNodes(root.children);
   return root;
 }
-function TreeNodeComponent({ node, activeFile, onSelect, onReplaceFile, depth = 0 }) {
-  const [expanded, setExpanded] = useState(true);
+function TreeNodeComponent({
+  node,
+  activePath,
+  onSelect,
+  onSelectDirectory,
+  onReplaceFile,
+  onOpenInEditor,
+  openInEditorMode = "files",
+  openInEditorIcon,
+  openInEditorTitle = "Open in editor",
+  pinnedPaths,
+  onTogglePin,
+  pageSize = 10,
+  depth = 0
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [visibleCount, setVisibleCount] = useState(pageSize);
   const [isHovered, setIsHovered] = useState(false);
   const fileInputRef = useRef(null);
   const handleUploadClick = useCallback((e) => {
@@ -1003,48 +1191,119 @@ function TreeNodeComponent({ node, activeFile, onSelect, onReplaceFile, depth =
     reader.readAsDataURL(file);
     e.target.value = "";
   }, [node.path, onReplaceFile]);
+  const isPinned = pinnedPaths?.has(node.path) ?? false;
+  const showPin = onTogglePin && isHovered;
+  const handleTogglePin = useCallback((e) => {
+    e.stopPropagation();
+    onTogglePin?.(node.path, node.isDir);
+  }, [node.path, node.isDir, onTogglePin]);
   if (!node.name) {
     return /* @__PURE__ */ jsx(Fragment, { children: node.children.map((child) => /* @__PURE__ */ jsx(
       TreeNodeComponent,
       {
         node: child,
-        activeFile,
+        activePath,
         onSelect,
+        onSelectDirectory,
         onReplaceFile,
+        onOpenInEditor,
+        openInEditorMode,
+        openInEditorIcon,
+        openInEditorTitle,
+        pinnedPaths,
+        onTogglePin,
+        pageSize,
         depth
       },
       child.path
     )) });
   }
-  const isActive = node.path === activeFile;
+  const isActive = node.path === activePath;
   const isMedia = !node.isDir && isMediaFile(node.path);
   const showUpload = isMedia && isHovered && onReplaceFile;
+  const showOpenInEditor = !!onOpenInEditor && isHovered && (openInEditorMode === "all" || (openInEditorMode === "directories" ? node.isDir : !node.isDir));
+  const handleOpenInEditor = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onOpenInEditor?.(node.path, node.isDir);
+    },
+    [node.path, node.isDir, onOpenInEditor]
+  );
   if (node.isDir) {
     return /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: () => setExpanded(!expanded),
-          className: "flex items-center gap-1 w-full px-2 py-1 text-left text-sm hover:bg-muted/50 rounded",
+          onClick: () => {
+            onSelectDirectory?.(node.path);
+            setExpanded(!expanded);
+          },
+          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" : ""}`,
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false),
           style: { paddingLeft: `${depth * 12 + 8}px` },
           children: [
             expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0" }),
             /* @__PURE__ */ jsx(Folder, { className: "h-3 w-3 shrink-0 text-muted-foreground" }),
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: node.name })
+            /* @__PURE__ */ jsx("span", { className: "truncate flex-1 flex pl-2", children: node.name }),
+            (showPin || isPinned) && /* @__PURE__ */ jsx(
+              "span",
+              {
+                onClick: handleTogglePin,
+                className: "p-1 hover:bg-primary/20 rounded cursor-pointer",
+                title: isPinned ? "Unpin" : "Pin",
+                children: isPinned ? /* @__PURE__ */ jsx(PinOff, { className: "h-3 w-3 text-primary" }) : /* @__PURE__ */ jsx(Pin, { className: "h-3 w-3 text-muted-foreground" })
+              }
+            ),
+            showOpenInEditor && /* @__PURE__ */ jsx(
+              "span",
+              {
+                onClick: handleOpenInEditor,
+                className: "p-1 hover:bg-primary/20 rounded cursor-pointer",
+                title: openInEditorTitle,
+                children: openInEditorIcon ?? /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3 text-primary" })
+              }
+            )
           ]
         }
       ),
-      expanded && /* @__PURE__ */ jsx("div", { children: node.children.map((child) => /* @__PURE__ */ jsx(
-        TreeNodeComponent,
-        {
-          node: child,
-          activeFile,
-          onSelect,
-          onReplaceFile,
-          depth: depth + 1
-        },
-        child.path
-      )) })
+      expanded && /* @__PURE__ */ jsxs("div", { children: [
+        node.children.slice(0, visibleCount).map((child) => /* @__PURE__ */ jsx(
+          TreeNodeComponent,
+          {
+            node: child,
+            activePath,
+            onSelect,
+            onSelectDirectory,
+            onReplaceFile,
+            onOpenInEditor,
+            openInEditorMode,
+            openInEditorIcon,
+            openInEditorTitle,
+            pinnedPaths,
+            onTogglePin,
+            pageSize,
+            depth: depth + 1
+          },
+          child.path
+        )),
+        node.children.length > visibleCount && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setVisibleCount((prev) => prev + pageSize),
+            className: "flex items-center gap-1 w-full px-2 py-1 text-left text-xs hover:bg-muted/50 rounded text-muted-foreground",
+            style: { paddingLeft: `${(depth + 1) * 12 + 20}px` },
+            children: [
+              /* @__PURE__ */ jsx(ChevronsDown, { className: "h-3 w-3 shrink-0" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Show ",
+                Math.min(pageSize, node.children.length - visibleCount),
+                " more"
+              ] })
+            ]
+          }
+        )
+      ] })
     ] });
   }
   return /* @__PURE__ */ jsxs(
@@ -1062,7 +1321,25 @@ function TreeNodeComponent({ node, activeFile, onSelect, onReplaceFile, depth =
             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 }),
+              /* @__PURE__ */ jsx("span", { className: "truncate flex-1 flex pl-2", children: node.name }),
+              (showPin || isPinned) && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  onClick: handleTogglePin,
+                  className: "p-1 hover:bg-primary/20 rounded cursor-pointer",
+                  title: isPinned ? "Unpin" : "Pin",
+                  children: isPinned ? /* @__PURE__ */ jsx(PinOff, { className: "h-3 w-3 text-primary" }) : /* @__PURE__ */ jsx(Pin, { className: "h-3 w-3 text-muted-foreground" })
+                }
+              ),
+              showOpenInEditor && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  onClick: handleOpenInEditor,
+                  className: "p-1 hover:bg-primary/20 rounded cursor-pointer",
+                  title: openInEditorTitle,
+                  children: openInEditorIcon ?? /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3 text-primary" })
+                }
+              ),
               showUpload && /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -1089,17 +1366,309 @@ function TreeNodeComponent({ node, activeFile, onSelect, onReplaceFile, depth =
     }
   );
 }
-function FileTree({ files, activeFile, onSelectFile, onReplaceFile }) {
+function LazyTreeNode({
+  entry,
+  activePath,
+  onSelectFile,
+  onSelectDirectory,
+  onOpenInEditor,
+  openInEditorMode = "files",
+  openInEditorIcon,
+  openInEditorTitle = "Open in editor",
+  pinnedPaths,
+  onTogglePin,
+  directoryLoader,
+  pageSize,
+  depth = 0,
+  reloadToken
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const [children, setChildren] = useState(null);
+  const [visibleCount, setVisibleCount] = useState(pageSize);
+  useEffect(() => {
+    setChildren(null);
+    setVisibleCount(pageSize);
+    if (expanded) {
+      setLoading(true);
+      setLoadError(null);
+      directoryLoader(entry.path).then((loaded) => setChildren(loaded)).catch((err) => setLoadError(err instanceof Error ? err.message : "Failed to load directory")).finally(() => setLoading(false));
+    }
+  }, [reloadToken]);
+  const isActive = entry.path === activePath;
+  const isPinned = pinnedPaths?.has(entry.path) ?? false;
+  const showPin = onTogglePin && isHovered;
+  const showOpenInEditor = !!onOpenInEditor && isHovered && (openInEditorMode === "all" || (openInEditorMode === "directories" ? entry.isDir : !entry.isDir));
+  const handleOpenInEditor = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onOpenInEditor?.(entry.path, entry.isDir);
+    },
+    [entry.path, entry.isDir, onOpenInEditor]
+  );
+  const handleTogglePin = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onTogglePin?.(entry.path, entry.isDir);
+    },
+    [entry.path, entry.isDir, onTogglePin]
+  );
+  const toggleDirectory = useCallback(async () => {
+    if (!entry.isDir) return;
+    onSelectDirectory?.(entry.path);
+    if (!expanded && children === null) {
+      setLoading(true);
+      setLoadError(null);
+      try {
+        const loaded = await directoryLoader(entry.path);
+        setChildren(loaded);
+      } catch (err) {
+        setLoadError(err instanceof Error ? err.message : "Failed to load directory");
+      } finally {
+        setLoading(false);
+      }
+    }
+    setExpanded((prev) => !prev);
+  }, [entry.isDir, entry.path, onSelectDirectory, expanded, children, directoryLoader]);
+  if (!entry.isDir) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "relative",
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onSelectFile(entry.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 flex pl-2", children: entry.name }),
+              (showPin || isPinned) && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  onClick: handleTogglePin,
+                  className: "p-1 hover:bg-primary/20 rounded cursor-pointer",
+                  title: isPinned ? "Unpin" : "Pin",
+                  children: isPinned ? /* @__PURE__ */ jsx(PinOff, { className: "h-3 w-3 text-primary" }) : /* @__PURE__ */ jsx(Pin, { className: "h-3 w-3 text-muted-foreground" })
+                }
+              ),
+              showOpenInEditor && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  onClick: handleOpenInEditor,
+                  className: "p-1 hover:bg-primary/20 rounded cursor-pointer",
+                  title: openInEditorTitle,
+                  children: openInEditorIcon ?? /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3 text-primary" })
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => void toggleDirectory(),
+        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" : ""}`,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        style: { paddingLeft: `${depth * 12 + 8}px` },
+        children: [
+          expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0" }),
+          /* @__PURE__ */ jsx(Folder, { className: "h-3 w-3 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate flex-1 flex pl-2", children: entry.name }),
+          loading && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin text-muted-foreground" }),
+          (showPin || isPinned) && /* @__PURE__ */ jsx(
+            "span",
+            {
+              onClick: handleTogglePin,
+              className: "p-1 hover:bg-primary/20 rounded cursor-pointer",
+              title: isPinned ? "Unpin" : "Pin",
+              children: isPinned ? /* @__PURE__ */ jsx(PinOff, { className: "h-3 w-3 text-primary" }) : /* @__PURE__ */ jsx(Pin, { className: "h-3 w-3 text-muted-foreground" })
+            }
+          ),
+          showOpenInEditor && /* @__PURE__ */ jsx(
+            "span",
+            {
+              onClick: handleOpenInEditor,
+              className: "p-1 hover:bg-primary/20 rounded cursor-pointer",
+              title: openInEditorTitle,
+              children: openInEditorIcon ?? /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3 text-primary" })
+            }
+          )
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs("div", { children: [
+      loadError && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "px-2 py-1 text-xs text-destructive",
+          style: { paddingLeft: `${(depth + 1) * 12 + 20}px` },
+          children: loadError
+        }
+      ),
+      (children ?? []).slice(0, visibleCount).map((child) => /* @__PURE__ */ jsx(
+        LazyTreeNode,
+        {
+          entry: child,
+          activePath,
+          onSelectFile,
+          onSelectDirectory,
+          onOpenInEditor,
+          openInEditorMode,
+          openInEditorIcon,
+          openInEditorTitle,
+          pinnedPaths,
+          onTogglePin,
+          directoryLoader,
+          pageSize,
+          depth: depth + 1,
+          reloadToken
+        },
+        child.path
+      )),
+      (children?.length ?? 0) > visibleCount && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setVisibleCount((prev) => prev + pageSize),
+          className: "flex items-center gap-1 w-full px-2 py-1 text-left text-xs hover:bg-muted/50 rounded text-muted-foreground",
+          style: { paddingLeft: `${(depth + 1) * 12 + 20}px` },
+          children: [
+            /* @__PURE__ */ jsx(ChevronsDown, { className: "h-3 w-3 shrink-0" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Show ",
+              Math.min(pageSize, (children?.length ?? 0) - visibleCount),
+              " more"
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function FileTree({
+  files = [],
+  activeFile,
+  activePath,
+  title = "Files",
+  onSelectFile,
+  onSelectDirectory,
+  onReplaceFile,
+  onOpenInEditor,
+  openInEditorMode,
+  openInEditorIcon,
+  openInEditorTitle,
+  pinnedPaths,
+  onTogglePin,
+  directoryLoader,
+  pageSize = 10,
+  reloadToken
+}) {
   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" }),
-    /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(
+  const selectedPath = activePath ?? activeFile ?? "";
+  const [rootEntries, setRootEntries] = useState([]);
+  const [rootLoading, setRootLoading] = useState(false);
+  const [rootError, setRootError] = useState(null);
+  useEffect(() => {
+    if (!directoryLoader) return;
+    let cancelled = false;
+    const loadRoot = async () => {
+      setRootLoading(true);
+      setRootError(null);
+      try {
+        const entries = await directoryLoader("");
+        if (!cancelled) {
+          setRootEntries(entries);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setRootError(err instanceof Error ? err.message : "Failed to load files");
+        }
+      } finally {
+        if (!cancelled) {
+          setRootLoading(false);
+        }
+      }
+    };
+    void loadRoot();
+    return () => {
+      cancelled = true;
+    };
+  }, [directoryLoader, reloadToken]);
+  return /* @__PURE__ */ jsxs("div", { className: "min-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: title }),
+    pinnedPaths && pinnedPaths.size > 0 && /* @__PURE__ */ jsx("div", { className: "px-2 py-1 border-b flex flex-wrap gap-1", children: Array.from(pinnedPaths).map(([p, isDir]) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => isDir ? onSelectDirectory?.(p) : onSelectFile(p),
+        className: `inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs hover:bg-muted/50 ${(activePath ?? activeFile ?? "") === p ? "bg-primary/10 text-primary" : "text-muted-foreground"}`,
+        children: [
+          isDir ? /* @__PURE__ */ jsx(Folder, { className: "h-2.5 w-2.5 shrink-0" }) : /* @__PURE__ */ jsx(Pin, { className: "h-2.5 w-2.5 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate max-w-[120px]", children: p.split("/").pop() }),
+          onTogglePin && /* @__PURE__ */ jsx(
+            "span",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onTogglePin(p, isDir);
+              },
+              className: "hover:text-destructive",
+              children: /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
+            }
+          )
+        ]
+      },
+      p
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "p-1", children: directoryLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      rootLoading && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 py-1 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
+        /* @__PURE__ */ jsx("span", { children: "Loading..." })
+      ] }),
+      rootError && /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-xs text-destructive", children: rootError }),
+      rootEntries.map((entry) => /* @__PURE__ */ jsx(
+        LazyTreeNode,
+        {
+          entry,
+          activePath: selectedPath,
+          onSelectFile,
+          onSelectDirectory,
+          onOpenInEditor,
+          openInEditorMode,
+          openInEditorIcon,
+          openInEditorTitle,
+          pinnedPaths,
+          onTogglePin,
+          directoryLoader,
+          pageSize,
+          reloadToken
+        },
+        entry.path
+      ))
+    ] }) : /* @__PURE__ */ jsx(
       TreeNodeComponent,
       {
         node: tree,
-        activeFile,
+        activePath: selectedPath,
         onSelect: onSelectFile,
-        onReplaceFile
+        onSelectDirectory,
+        onReplaceFile,
+        onOpenInEditor,
+        openInEditorMode,
+        openInEditorIcon,
+        openInEditorTitle,
+        pinnedPaths,
+        onTogglePin,
+        pageSize
       }
     ) })
   ] });
@@ -1408,6 +1977,7 @@ function EditModal({
   renderError,
   previewError,
   previewLoading,
+  initialTreePath,
   initialState = {},
   hideFileTree = false,
   ...sessionOptions
@@ -1422,17 +1992,27 @@ function EditModal({
   const [pillContainer, setPillContainer] = useState(null);
   const [showConfirm, setShowConfirm] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
+  const [saveStatus, setSaveStatus] = useState("saved");
+  const [lastSavedSnapshot, setLastSavedSnapshot] = useState("");
   const [saveError, setSaveError] = useState(null);
   const [pendingClose, setPendingClose] = useState(null);
+  const [treePath, setTreePath] = useState(initialTreePath ?? "");
+  const wasOpenRef = useRef(false);
   const currentCodeRef = useRef("");
   const session = useEditSession(sessionOptions);
   const code = getActiveContent(session);
+  const effectiveTreePath = treePath || session.activeFile;
   currentCodeRef.current = code;
   const files = useMemo(() => getFiles(session.project), [session.project]);
+  const projectSnapshot = useMemo(
+    () => Array.from(session.project.files.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([path, file]) => `${path}\0${file.content}`).join("
"),
+    [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 isMarkdown = isMarkdownFile(session.activeFile);
+  const showPreviewToggle = isCompilableFile || isMarkdown;
   const handleBobbinChanges = useCallback((changes) => {
     setBobbinChanges(changes);
   }, []);
@@ -1454,6 +2034,26 @@ ${bobbinYaml}
     setBobbinChanges([]);
   };
   const hasSaveHandler = onSave || onSaveProject;
+  useEffect(() => {
+    if (isOpen && !wasOpenRef.current) {
+      setLastSavedSnapshot(projectSnapshot);
+      setSaveStatus("saved");
+      setSaveError(null);
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen, projectSnapshot]);
+  useEffect(() => {
+    if (!hasSaveHandler) return;
+    if (projectSnapshot === lastSavedSnapshot) {
+      if (saveStatus !== "saving" && saveStatus !== "saved") {
+        setSaveStatus("saved");
+      }
+      return;
+    }
+    if (saveStatus === "saved" || saveStatus === "error") {
+      setSaveStatus("unsaved");
+    }
+  }, [projectSnapshot, lastSavedSnapshot, saveStatus, hasSaveHandler]);
   const handleClose = useCallback(() => {
     const editCount = session.history.length;
     const finalCode = code;
@@ -1470,6 +2070,7 @@ ${bobbinYaml}
   const handleSaveAndClose = useCallback(async () => {
     if (!pendingClose || !hasSaveHandler) return;
     setIsSaving(true);
+    setSaveStatus("saving");
     setSaveError(null);
     try {
       if (onSaveProject) {
@@ -1477,6 +2078,8 @@ ${bobbinYaml}
       } else if (onSave) {
         await onSave(pendingClose.code);
       }
+      setLastSavedSnapshot(projectSnapshot);
+      setSaveStatus("saved");
       setShowConfirm(false);
       setEditInput("");
       session.clearError();
@@ -1484,10 +2087,11 @@ ${bobbinYaml}
       setPendingClose(null);
     } catch (e) {
       setSaveError(e instanceof Error ? e.message : "Save failed");
+      setSaveStatus("error");
     } finally {
       setIsSaving(false);
     }
-  }, [pendingClose, onSave, onSaveProject, session, onClose]);
+  }, [pendingClose, onSave, onSaveProject, session, onClose, projectSnapshot, hasSaveHandler]);
   const handleDiscard = useCallback(() => {
     if (!pendingClose) return;
     setShowConfirm(false);
@@ -1504,6 +2108,7 @@ ${bobbinYaml}
   const handleDirectSave = useCallback(async () => {
     if (!hasSaveHandler) return;
     setIsSaving(true);
+    setSaveStatus("saving");
     setSaveError(null);
     try {
       if (onSaveProject) {
@@ -1511,12 +2116,15 @@ ${bobbinYaml}
       } else if (onSave && currentCodeRef.current) {
         await onSave(currentCodeRef.current);
       }
+      setLastSavedSnapshot(projectSnapshot);
+      setSaveStatus("saved");
     } catch (e) {
       setSaveError(e instanceof Error ? e.message : "Save failed");
+      setSaveStatus("error");
     } finally {
       setIsSaving(false);
     }
-  }, [onSave, onSaveProject, session.project]);
+  }, [onSave, onSaveProject, session.project, hasSaveHandler, projectSnapshot]);
   if (!isOpen) return null;
   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: [
@@ -1545,30 +2153,26 @@ ${bobbinYaml}
               children: showTree ? /* @__PURE__ */ jsx(FileCode, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(FolderTree, { className: "h-3 w-3" })
             }
           ),
+          hasSaveHandler && /* @__PURE__ */ jsx(
+            SaveStatusButton,
+            {
+              status: saveStatus,
+              onClick: handleDirectSave,
+              disabled: isSaving,
+              tone: "primary"
+            }
+          ),
           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"}`,
+              className: `w-[5rem] 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",
             {
@@ -1589,7 +2193,12 @@ ${bobbinYaml}
           {
             files,
             activeFile: session.activeFile,
-            onSelectFile: session.setActiveFile,
+            activePath: effectiveTreePath,
+            onSelectFile: (path) => {
+              setTreePath(path);
+              session.setActiveFile(path);
+            },
+            onSelectDirectory: (path) => setTreePath(path),
             onReplaceFile: session.replaceFile
           }
         ),
@@ -1620,7 +2229,14 @@ ${bobbinYaml}
             editable: true,
             onChange: session.updateActiveFile
           }
-        ) : fileType.category === "text" ? /* @__PURE__ */ jsx(
+        ) : isMarkdown && showPreview ? /* @__PURE__ */ jsx("div", { className: "p-4 prose prose-sm dark:prose-invert max-w-none h-full overflow-auto", children: /* @__PURE__ */ jsx(
+          MarkdownPreview,
+          {
+            value: code,
+            editable: true,
+            onChange: session.updateActiveFile
+          }
+        ) }) : fileType.category === "text" ? /* @__PURE__ */ jsx(
           CodeBlockView,
           {
             content: code,
@@ -1635,7 +2251,15 @@ ${bobbinYaml}
             mimeType: getMimeType(session.activeFile),
             fileName: session.activeFile.split("/").pop() ?? session.activeFile
           }
-        ) : /* @__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(
+          CodeBlockView,
+          {
+            content: code,
+            language: fileType.language,
+            editable: true,
+            onChange: session.updateActiveFile
+          }
+        ) })
       ] }),
       /* @__PURE__ */ jsx(
         EditHistory,
@@ -1701,6 +2325,77 @@ ${bobbinYaml}
     )
   ] });
 }
+function createManifest(services) {
+  return {
+    name: "preview",
+    version: "1.0.0",
+    platform: "browser",
+    image: "@aprovan/patchwork-image-shadcn",
+    services
+  };
+}
+function WidgetPreview({
+  code,
+  compiler,
+  services,
+  enabled = true
+}) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const containerRef = useRef(null);
+  const mountedRef = useRef(null);
+  useEffect(() => {
+    if (!enabled || !compiler || !containerRef.current) return;
+    let cancelled = false;
+    const compileAndMount = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        if (mountedRef.current) {
+          compiler.unmount(mountedRef.current);
+          mountedRef.current = null;
+        }
+        const widget = await compiler.compile(code, createManifest(services), {
+          typescript: true
+        });
+        if (cancelled || !containerRef.current) return;
+        const mounted = await compiler.mount(widget, {
+          target: containerRef.current,
+          mode: "embedded"
+        });
+        mountedRef.current = mounted;
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Failed to render preview");
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+    void compileAndMount();
+    return () => {
+      cancelled = true;
+      if (mountedRef.current && compiler) {
+        compiler.unmount(mountedRef.current);
+        mountedRef.current = null;
+      }
+    };
+  }, [code, compiler, enabled, services]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    error && /* @__PURE__ */ jsxs("div", { className: "text-sm text-destructive flex items-center gap-2 p-3", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { children: error })
+    ] }),
+    loading && /* @__PURE__ */ jsxs("div", { className: "p-3 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..." })
+    ] }),
+    !compiler && enabled && !loading && !error && /* @__PURE__ */ jsx("div", { className: "p-3 text-sm text-muted-foreground", children: "Compiler not initialized" }),
+    /* @__PURE__ */ jsx("div", { ref: containerRef, className: "w-full" })
+  ] });
+}
 var VFS_BASE_URL = "/vfs";
 var vfsConfigCache = null;
 async function getVFSConfig() {
@@ -1764,7 +2459,7 @@ async function isVFSAvailable() {
     return false;
   }
 }
-function createManifest(services) {
+function createManifest2(services) {
   return {
     name: "preview",
     version: "1.0.0",
@@ -1773,63 +2468,19 @@ function createManifest(services) {
     services
   };
 }
-function useCodeCompiler(compiler, code, enabled, services) {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const containerRef = useRef(null);
-  const mountedRef = useRef(null);
-  useEffect(() => {
-    if (!enabled || !compiler || !containerRef.current) return;
-    let cancelled = false;
-    async function compileAndMount() {
-      if (!containerRef.current || !compiler) return;
-      setLoading(true);
-      setError(null);
-      try {
-        if (mountedRef.current) {
-          compiler.unmount(mountedRef.current);
-          mountedRef.current = null;
-        }
-        const widget = await compiler.compile(
-          code,
-          createManifest(services),
-          { typescript: true }
-        );
-        if (cancelled) {
-          return;
-        }
-        const mounted = await compiler.mount(widget, {
-          target: containerRef.current,
-          mode: "embedded"
-        });
-        mountedRef.current = mounted;
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : "Failed to render JSX");
-        }
-      } finally {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      }
-    }
-    compileAndMount();
-    return () => {
-      cancelled = true;
-      if (mountedRef.current && compiler) {
-        compiler.unmount(mountedRef.current);
-        mountedRef.current = null;
-      }
-    };
-  }, [code, compiler, enabled, services]);
-  return { containerRef, loading, error };
-}
-function CodePreview({ code: originalCode, compiler, services, filePath, entrypoint = "index.ts" }) {
+function CodePreview({
+  code: originalCode,
+  compiler,
+  services,
+  filePath,
+  entrypoint = "index.ts",
+  onOpenEditSession
+}) {
   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 [saveStatus, setSaveStatus] = useState("saved");
   const [lastSavedCode, setLastSavedCode] = useState(originalCode);
   const [vfsPath, setVfsPath] = useState(null);
   const currentCodeRef = useRef(currentCode);
@@ -1865,6 +2516,14 @@ function CodePreview({ code: originalCode, compiler, services, filePath, entrypo
   useEffect(() => {
     isEditingRef.current = isEditing;
   }, [isEditing]);
+  useEffect(() => {
+    if (saveStatus === "saving") return;
+    if (currentCode === lastSavedCode) {
+      if (saveStatus !== "saved") setSaveStatus("saved");
+      return;
+    }
+    if (saveStatus === "saved") setSaveStatus("unsaved");
+  }, [currentCode, lastSavedCode, saveStatus]);
   useEffect(() => {
     let active = true;
     void (async () => {
@@ -1917,14 +2576,12 @@ function CodePreview({ code: originalCode, compiler, services, filePath, entrypo
       setSaveStatus("error");
     }
   }, [currentCode, getProjectId, getEntryFile]);
-  const { containerRef, loading, error } = useCodeCompiler(
-    compiler,
-    currentCode,
-    showPreview && !isEditing,
-    services
-  );
+  const previewPath = filePath ?? entrypoint;
+  const fileType = useMemo(() => getFileType(previewPath), [previewPath]);
+  const canRenderWidget = fileType.category === "compilable";
   const compile = useCallback(
     async (code) => {
+      if (!canRenderWidget) return { success: true };
       if (!compiler) return { success: true };
       const errors = [];
       const originalError = console.error;
@@ -1935,7 +2592,7 @@ function CodePreview({ code: originalCode, compiler, services, filePath, entrypo
       try {
         await compiler.compile(
           code,
-          createManifest(services),
+          createManifest2(services),
           { typescript: true }
         );
         return { success: true };
@@ -1953,15 +2610,64 @@ ${errors.join("\n")}` : "";
         console.error = originalError;
       }
     },
-    [compiler, services]
+    [canRenderWidget, compiler, services]
   );
   const handleRevert = () => {
     setCurrentCode(originalCode);
     setEditCount(0);
   };
   const hasChanges = currentCode !== originalCode;
+  const previewBody = useMemo(() => {
+    if (canRenderWidget) {
+      return /* @__PURE__ */ jsx(
+        WidgetPreview,
+        {
+          code: currentCode,
+          compiler,
+          services,
+          enabled: showPreview && !isEditing
+        }
+      );
+    }
+    if (fileType.category === "media") {
+      return /* @__PURE__ */ jsx(
+        MediaPreview,
+        {
+          content: currentCode,
+          mimeType: fileType.mimeType,
+          fileName: previewPath
+        }
+      );
+    }
+    if (fileType.language === "markdown") {
+      return /* @__PURE__ */ jsx("div", { className: "p-4 prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx(MarkdownPreview, { value: currentCode }) });
+    }
+    return /* @__PURE__ */ jsx(
+      CodeBlockView,
+      {
+        content: currentCode,
+        language: fileType.language
+      }
+    );
+  }, [canRenderWidget, compiler, currentCode, fileType, isEditing, previewPath, services, showPreview]);
+  const handleOpenEditor = useCallback(async () => {
+    if (!onOpenEditSession) {
+      setIsEditing(true);
+      return;
+    }
+    const projectId = await getProjectId();
+    const entryFile = getEntryFile();
+    const initialProject = createSingleFileProject(currentCode, entryFile, projectId);
+    onOpenEditSession({
+      projectId,
+      entryFile,
+      filePath,
+      initialCode: currentCode,
+      initialProject
+    });
+  }, [onOpenEditSession, getProjectId, getEntryFile, currentCode, filePath]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "my-3 border rounded-lg", children: [
+    /* @__PURE__ */ jsxs("div", { className: "border rounded-lg overflow-hidden min-w-0", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted/50 border-b rounded-t-lg", children: [
         /* @__PURE__ */ jsx(Code, { className: "h-4 w-4 text-muted-foreground" }),
         editCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
@@ -1970,19 +2676,6 @@ ${errors.join("\n")}` : "";
           " edit",
           editCount !== 1 ? "s" : ""
         ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleSave,
-            disabled: saveStatus === "saving",
-            className: `px-2 py-1 text-xs rounded flex items-center gap-1 ${saveStatus === "saved" ? "text-green-600" : saveStatus === "error" ? "text-destructive hover:bg-muted" : "text-muted-foreground hover:bg-muted"}`,
-            title: saveStatus === "saved" ? "Saved to disk" : saveStatus === "saving" ? "Saving..." : saveStatus === "error" ? "Save failed - click to retry" : "Click to save",
-            children: saveStatus === "saving" ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsxs("span", { className: "relative", children: [
-              /* @__PURE__ */ jsx(Cloud, { className: "h-3 w-3" }),
-              saveStatus === "saved" && /* @__PURE__ */ jsx(Check, { className: "h-2 w-2 absolute -bottom-0.5 -right-0.5 stroke-[3]" })
-            ] })
-          }
-        ),
         /* @__PURE__ */ jsxs("div", { className: "ml-auto flex gap-1", children: [
           hasChanges && /* @__PURE__ */ jsx(
             "button",
@@ -1996,17 +2689,26 @@ ${errors.join("\n")}` : "";
           /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: () => setIsEditing(true),
+              onClick: () => void handleOpenEditor(),
               className: "px-2 py-1 text-xs rounded flex items-center gap-1 hover:bg-muted",
               title: "Edit component",
               children: /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" })
             }
           ),
+          /* @__PURE__ */ jsx(
+            SaveStatusButton,
+            {
+              status: saveStatus,
+              onClick: handleSave,
+              disabled: saveStatus === "saving",
+              tone: "muted"
+            }
+          ),
           /* @__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"}`,
+              className: `w-[5rem] 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"
@@ -2015,16 +2717,13 @@ ${errors.join("\n")}` : "";
           )
         ] })
       ] }),
-      showPreview ? /* @__PURE__ */ jsxs("div", { className: "bg-white", children: [
-        error ? /* @__PURE__ */ jsxs("div", { className: "p-3 text-sm text-destructive flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }),
-          /* @__PURE__ */ jsx("span", { children: error })
-        ] }) : loading ? /* @__PURE__ */ jsxs("div", { className: "p-3 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..." })
-        ] }) : !compiler ? /* @__PURE__ */ jsx("div", { className: "p-3 text-sm text-muted-foreground", children: "Compiler not initialized" }) : null,
-        /* @__PURE__ */ jsx("div", { ref: containerRef })
-      ] }) : /* @__PURE__ */ jsx("div", { className: "p-3 bg-muted/30 overflow-auto max-h-96", children: /* @__PURE__ */ jsx("pre", { className: "text-xs whitespace-pre-wrap break-words m-0", children: /* @__PURE__ */ jsx("code", { children: currentCode }) }) })
+      showPreview ? /* @__PURE__ */ jsx("div", { className: "bg-white overflow-y-auto overflow-x-hidden max-h-[60vh]", children: previewBody }) : /* @__PURE__ */ jsx("div", { className: "bg-muted/30 overflow-auto max-h-[60vh]", children: /* @__PURE__ */ jsx(
+        CodeBlockView,
+        {
+          content: currentCode,
+          language: fileType.language
+        }
+      ) })
     ] }),
     /* @__PURE__ */ jsx(
       EditModal,
@@ -2042,6 +2741,7 @@ ${errors.join("\n")}` : "";
                 const entryFile = getEntryFile();
                 const project = createSingleFileProject(finalCode, entryFile, projectId);
                 await saveProject(project);
+                setLastSavedCode(finalCode);
                 setSaveStatus("saved");
               } catch (err) {
                 console.warn("[VFS] Failed to save project:", err);
@@ -2052,49 +2752,77 @@ ${errors.join("\n")}` : "";
         },
         originalCode: currentCode,
         compile,
-        renderPreview: (code) => /* @__PURE__ */ jsx(ModalPreview, { code, compiler, services })
+        renderPreview: (code) => /* @__PURE__ */ jsx(
+          WidgetPreview,
+          {
+            code,
+            compiler,
+            services
+          }
+        )
       }
     )
   ] });
 }
-function ModalPreview({
-  code,
-  compiler,
-  services
+function DefaultBadge({
+  children,
+  className = ""
 }) {
-  const { containerRef, loading, error } = useCodeCompiler(compiler, code, true, services);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    error && /* @__PURE__ */ jsxs("div", { className: "text-sm text-destructive flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }),
-      /* @__PURE__ */ jsx("span", { children: error })
-    ] }),
-    loading && /* @__PURE__ */ jsxs("div", { className: "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..." })
-    ] }),
-    !compiler && !loading && !error && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Compiler not initialized" }),
-    /* @__PURE__ */ jsx("div", { ref: containerRef })
-  ] });
-}
-function DefaultBadge({ children, className = "" }) {
-  return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${className}`, children });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${className}`,
+      children
+    }
+  );
 }
-function DefaultDialog({ children, open, onOpenChange }) {
+function DefaultDialog({
+  children,
+  open,
+  onOpenChange
+}) {
   if (!open) return null;
-  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 bg-black/50", onClick: () => onOpenChange?.(false), children: /* @__PURE__ */ jsx("div", { className: "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-background p-6 shadow-lg rounded-lg", onClick: (e) => e.stopPropagation(), children }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 bg-black/50",
+      onClick: () => onOpenChange?.(false),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-background p-6 shadow-lg rounded-lg",
+          onClick: (e) => e.stopPropagation(),
+          children
+        }
+      )
+    }
+  );
 }
 function ServicesInspector({
   namespaces,
   services = [],
   BadgeComponent = DefaultBadge,
-  DialogComponent = DefaultDialog
+  DialogComponent = DefaultDialog,
+  DialogHeaderComponent = ({ children }) => /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center mb-4", children }),
+  DialogContentComponent = ({ children, className = "" }) => /* @__PURE__ */ jsx("div", { className, children }),
+  DialogCloseComponent = ({ onClose }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => onClose?.(),
+      className: "text-muted-foreground hover:text-foreground",
+      children: "\xD7"
+    }
+  )
 }) {
   const [open, setOpen] = useState(false);
   if (namespaces.length === 0) return null;
-  const groupedServices = services.reduce((acc, svc) => {
-    (acc[svc.namespace] ??= []).push(svc);
-    return acc;
-  }, {});
+  const groupedServices = services.reduce(
+    (acc, svc) => {
+      (acc[svc.namespace] ??= []).push(svc);
+      return acc;
+    },
+    {}
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -2112,11 +2840,11 @@ function ServicesInspector({
       }
     ),
     /* @__PURE__ */ jsxs(DialogComponent, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+      /* @__PURE__ */ jsxs(DialogHeaderComponent, { children: [
         /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Available Services" }),
-        /* @__PURE__ */ jsx("button", { onClick: () => setOpen(false), className: "text-muted-foreground hover:text-foreground", children: "\xD7" })
+        /* @__PURE__ */ jsx(DialogCloseComponent, { onClose: () => setOpen(false) })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-3 max-h-96 overflow-auto", children: namespaces.map((ns) => /* @__PURE__ */ jsxs("details", { open: namespaces.length === 1, children: [
+      /* @__PURE__ */ jsx(DialogContentComponent, { className: "space-y-3 max-h-96 overflow-auto", children: namespaces.map((ns) => /* @__PURE__ */ jsxs("details", { open: namespaces.length === 1, children: [
         /* @__PURE__ */ jsxs("summary", { className: "flex items-center gap-2 w-full p-2 rounded bg-muted/50 hover:bg-muted transition-colors cursor-pointer", children: [
           /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }),
           /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: ns }),
@@ -2128,11 +2856,11 @@ function ServicesInspector({
         ] }),
         /* @__PURE__ */ jsx("div", { className: "ml-6 mt-2 space-y-2", children: groupedServices[ns]?.map((svc) => /* @__PURE__ */ jsxs("details", { children: [
           /* @__PURE__ */ jsxs("summary", { className: "flex items-center gap-2 w-full text-left text-sm hover:text-foreground text-muted-foreground transition-colors cursor-pointer", children: [
-            /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }),
+            svc.parameters && /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx("code", { className: "font-mono text-xs", children: svc.procedure }),
             /* @__PURE__ */ jsx("span", { className: "truncate text-xs opacity-70", children: svc.description })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "ml-5 mt-1 p-2 rounded border bg-muted/30 overflow-auto max-h-48", children: /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap break-words m-0", children: JSON.stringify(svc.parameters.jsonSchema, null, 2) }) })
+          svc.parameters && /* @__PURE__ */ jsx("div", { className: "ml-5 mt-1 p-2 rounded border bg-muted/30 overflow-auto max-h-48", children: /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap break-words m-0", children: JSON.stringify(svc.parameters, null, 2) }) })
         ] }, svc.name)) ?? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No tool details available" }) })
       ] }, ns)) })
     ] })
@@ -2264,4 +2992,4 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-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 };
+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 };