@aprovan/patchwork-editor 0.1.2-dev.ba8f277 → 0.1.2-dev.c1ac1dc

package/.turbo/turbo-build.log

@@ -9,5 +9,5 @@
 CLI Target: es2022
 CLI Cleaning output folder
 ESM Build start
-ESM dist/index.js 104.90 KB
-ESM ⚡️ Build success in 261ms
+ESM dist/index.js 104.93 KB
+ESM ⚡️ Build success in 450ms

package/dist/components/CodePreview.d.ts

@@ -1,5 +1,4 @@
-import type { Compiler } from '@aprovan/patchwork-compiler';
-import type { VirtualProject } from '@aprovan/patchwork-compiler';
+import type { Compiler, VirtualProject } from '@aprovan/patchwork-compiler';
 interface CodePreviewProps {
     code: string;
     compiler: Compiler | null;
@@ -18,5 +17,5 @@ interface CodePreviewProps {
         initialProject: VirtualProject;
     }) => void;
 }
-export declare function CodePreview({ code: originalCode, compiler, services, filePath, entrypoint, onOpenEditSession, }: CodePreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodePreview({ code: originalCode, compiler, services, filePath, entrypoint, onOpenEditSession, }: CodePreviewProps): import("react").JSX.Element;
 export {};

package/dist/components/MarkdownEditor.d.ts

@@ -6,5 +6,5 @@ interface MarkdownEditorProps {
     disabled?: boolean;
     className?: string;
 }
-export declare function MarkdownEditor({ value, onChange, onSubmit, placeholder, disabled, className, }: MarkdownEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function MarkdownEditor({ value, onChange, onSubmit, placeholder, disabled, className, }: MarkdownEditorProps): import("react").JSX.Element;
 export {};

package/dist/components/MarkdownPreview.d.ts

@@ -4,5 +4,5 @@ interface MarkdownPreviewProps {
     editable?: boolean;
     className?: string;
 }
-export declare function MarkdownPreview({ value, onChange, editable, className, }: MarkdownPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MarkdownPreview({ value, onChange, editable, className, }: MarkdownPreviewProps): import("react").JSX.Element;
 export {};

package/dist/components/SaveStatusButton.d.ts

@@ -5,5 +5,5 @@ interface SaveStatusButtonProps {
     disabled?: boolean;
     tone: 'muted' | 'primary';
 }
-export declare function SaveStatusButton({ status, onClick, disabled, tone, }: SaveStatusButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SaveStatusButton({ status, onClick, disabled, tone, }: SaveStatusButtonProps): import("react").JSX.Element;
 export {};

package/dist/components/ServicesInspector.d.ts

@@ -44,5 +44,5 @@ interface ServicesInspectorProps {
         onClose?: () => void;
     }>;
 }
-export declare function ServicesInspector({ namespaces, services, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogContentComponent, DialogCloseComponent, }: ServicesInspectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ServicesInspector({ namespaces, services, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogContentComponent, DialogCloseComponent, }: ServicesInspectorProps): import("react").JSX.Element;
 export {};

package/dist/components/WidgetPreview.d.ts

@@ -5,4 +5,4 @@ export interface WidgetPreviewProps {
     services?: string[];
     enabled?: boolean;
 }
-export declare function WidgetPreview({ code, compiler, services, enabled, }: WidgetPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function WidgetPreview({ code, compiler, services, enabled, }: WidgetPreviewProps): import("react").JSX.Element;

package/dist/components/edit/CodeBlockView.d.ts

@@ -4,4 +4,4 @@ export interface CodeBlockViewProps {
     editable?: boolean;
     onChange?: (content: string) => void;
 }
-export declare function CodeBlockView({ content, language, editable, onChange }: CodeBlockViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockView({ content, language, editable, onChange }: CodeBlockViewProps): import("react").JSX.Element;

package/dist/components/edit/EditHistory.d.ts

@@ -6,5 +6,5 @@ interface EditHistoryProps {
     pendingPrompt?: string | null;
     className?: string;
 }
-export declare function EditHistory({ entries, streamingNotes, isStreaming, pendingPrompt, className, }: EditHistoryProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditHistory({ entries, streamingNotes, isStreaming, pendingPrompt, className, }: EditHistoryProps): import("react").JSX.Element;
 export {};

package/dist/components/edit/EditModal.d.ts

@@ -18,4 +18,4 @@ export interface EditModalProps extends UseEditSessionOptions {
     previewError?: string | null;
     previewLoading?: boolean;
 }
-export declare function EditModal({ isOpen, onClose, onSave, onSaveProject, renderPreview, renderLoading, renderError, previewError, previewLoading, initialTreePath, initialState, hideFileTree, ...sessionOptions }: EditModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditModal({ isOpen, onClose, onSave, onSaveProject, renderPreview, renderLoading, renderError, previewError, previewLoading, initialTreePath, initialState, hideFileTree, ...sessionOptions }: EditModalProps): import("react").JSX.Element;

package/dist/components/edit/FileTree.d.ts

@@ -24,4 +24,4 @@ export interface FileTreeProps {
     pageSize?: number;
     reloadToken?: number;
 }
-export declare function FileTree({ files, activeFile, activePath, title, onSelectFile, onSelectDirectory, onReplaceFile, onOpenInEditor, openInEditorMode, openInEditorIcon, openInEditorTitle, pinnedPaths, onTogglePin, directoryLoader, pageSize, reloadToken, }: FileTreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileTree({ files, activeFile, activePath, title, onSelectFile, onSelectDirectory, onReplaceFile, onOpenInEditor, openInEditorMode, openInEditorIcon, openInEditorTitle, pinnedPaths, onTogglePin, directoryLoader, pageSize, reloadToken, }: FileTreeProps): import("react").JSX.Element;

package/dist/components/edit/MediaPreview.d.ts

@@ -3,4 +3,4 @@ export interface MediaPreviewProps {
     mimeType: string;
     fileName: string;
 }
-export declare function MediaPreview({ content, mimeType, fileName }: MediaPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaPreview({ content, mimeType, fileName }: MediaPreviewProps): import("react").JSX.Element;

package/dist/components/edit/SaveConfirmDialog.d.ts

@@ -6,4 +6,4 @@ export interface SaveConfirmDialogProps {
     onDiscard: () => void;
     onCancel: () => void;
 }
-export declare function SaveConfirmDialog({ isOpen, isSaving, error, onSave, onDiscard, onCancel, }: SaveConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function SaveConfirmDialog({ isOpen, isSaving, error, onSave, onDiscard, onCancel, }: SaveConfirmDialogProps): import("react").JSX.Element;

package/dist/components/edit/api.d.ts

@@ -1,4 +1,4 @@
-import type { EditRequest, EditResponse } from './types';
+import type { EditRequest, EditResponse } from "./types";
 export interface EditApiOptions {
     endpoint?: string;
     onProgress?: (note: string) => void;

package/dist/components/edit/fileTypes.d.ts

@@ -1,4 +1,4 @@
-export type FileCategory = 'compilable' | 'text' | 'media' | 'binary';
+export type FileCategory = "compilable" | "text" | "media" | "binary";
 export interface FileTypeInfo {
     category: FileCategory;
     language: string | null;

package/dist/components/edit/useEditSession.d.ts

@@ -1,5 +1,5 @@
-import type { VirtualProject } from "@aprovan/patchwork-compiler";
 import type { EditSessionState, EditSessionActions, CompileFn } from "./types";
+import type { VirtualProject } from "@aprovan/patchwork-compiler";
 export interface UseEditSessionOptions {
     originalCode?: string;
     originalProject?: VirtualProject;

package/dist/index.js

@@ -2,17 +2,17 @@ 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 { createHighlighter } from 'shiki';
-import { Bobbin, serializeChangesToYAML } from '@aprovan/bobbin';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
@@ -180,6 +180,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) {
@@ -1010,11 +1073,179 @@ function SaveStatusButton({
     }
   );
 }
+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 }) }) }) })
+  ] });
+}
 
 // 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 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",
@@ -1673,203 +1904,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`;
@@ -1960,6 +1994,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++) {
@@ -2396,69 +2479,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",
@@ -2841,7 +2861,7 @@ function ServicesInspector({
     ),
     /* @__PURE__ */ jsxs(DialogComponent, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsxs(DialogHeaderComponent, { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Available Services" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Services" }),
         /* @__PURE__ */ jsx(DialogCloseComponent, { onClose: () => setOpen(false) })
       ] }),
       /* @__PURE__ */ jsx(DialogContentComponent, { className: "space-y-3 max-h-96 overflow-auto", children: namespaces.map((ns) => /* @__PURE__ */ jsxs("details", { open: namespaces.length === 1, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aprovan/patchwork-editor",
-  "version": "0.1.2-dev.ba8f277",
+  "version": "0.1.2-dev.c1ac1dc",
   "description": "Components for facilitating widget generation and editing",
   "type": "module",
   "main": "./dist/index.js",
@@ -25,8 +25,8 @@
     "shiki": "^3.22.0",
     "tailwind-merge": "^3.4.0",
     "tiptap-markdown": "^0.9.0",
-    "@aprovan/patchwork-compiler": "0.1.2-dev.ba8f277",
-    "@aprovan/bobbin": "0.1.0-dev.ba8f277"
+    "@aprovan/bobbin": "0.1.0-dev.c1ac1dc",
+    "@aprovan/patchwork-compiler": "0.1.2-dev.c1ac1dc"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/CodePreview.tsx

@@ -1,13 +1,12 @@
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { Code, Eye, Pencil, RotateCcw, MessageSquare } from 'lucide-react';
-import type { Compiler, Manifest } from '@aprovan/patchwork-compiler';
 import { createSingleFileProject } from '@aprovan/patchwork-compiler';
+import { Code, Eye, Pencil, RotateCcw, MessageSquare } from 'lucide-react';
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { saveProject, getVFSConfig, loadFile, subscribeToChanges } from '../lib/vfs';
 import { EditModal, type CompileFn, CodeBlockView, MediaPreview, getFileType } from './edit';
+import { MarkdownPreview } from './MarkdownPreview';
 import { SaveStatusButton, type SaveStatus } from './SaveStatusButton';
 import { WidgetPreview } from './WidgetPreview';
-import { MarkdownPreview } from './MarkdownPreview';
-import { saveProject, getVFSConfig, loadFile, subscribeToChanges } from '../lib/vfs';
-import type { VirtualProject } from '@aprovan/patchwork-compiler';
+import type { Compiler, Manifest , VirtualProject } from '@aprovan/patchwork-compiler';
 
 interface CodePreviewProps {
   code: string;

package/src/components/MarkdownEditor.tsx

@@ -1,10 +1,10 @@
-import { useEditor, EditorContent } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
 import Placeholder from '@tiptap/extension-placeholder';
 import Typography from '@tiptap/extension-typography';
-import { Markdown } from 'tiptap-markdown';
 import { TextSelection } from '@tiptap/pm/state';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
 import { useEffect, useCallback, useRef } from 'react';
+import { Markdown } from 'tiptap-markdown';
 import { CodeBlockExtension } from './CodeBlockExtension';
 
 interface MarkdownEditorProps {

package/src/components/MarkdownPreview.tsx

@@ -1,14 +1,14 @@
+import Typography from '@tiptap/extension-typography';
 import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
-import Typography from '@tiptap/extension-typography';
-import { Markdown } from 'tiptap-markdown';
 import { useEffect, useCallback, useRef, useState } from 'react';
+import { Markdown } from 'tiptap-markdown';
 import { CodeBlockExtension } from './CodeBlockExtension';
 
 function parseFrontmatter(content: string): { frontmatter: string; body: string } {
   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] };
+  return { frontmatter: match[1]!, body: match[2]! };
 }
 
 function assembleFrontmatter(frontmatter: string, body: string): string {

package/src/components/ServicesInspector.tsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
 import { ChevronDown, Server } from "lucide-react";
+import { useState } from "react";
 
 export interface ServiceInfo {
   name: string;
@@ -133,7 +133,7 @@ export function ServicesInspector({
 
       <DialogComponent open={open} onOpenChange={setOpen}>
         <DialogHeaderComponent>
-          <h2 className="text-lg font-semibold">Available Services</h2>
+          <h2 className="text-lg font-semibold">Services</h2>
           <DialogCloseComponent onClose={() => setOpen(false)} />
         </DialogHeaderComponent>
         <DialogContentComponent className="space-y-3 max-h-96 overflow-auto">

package/src/components/WidgetPreview.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from 'react';
 import { AlertCircle, Loader2 } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
 import type { Compiler, Manifest, MountedWidget } from '@aprovan/patchwork-compiler';
 
 export interface WidgetPreviewProps {

package/src/components/edit/EditHistory.tsx

@@ -1,5 +1,5 @@
-import { useRef, useEffect } from 'react';
 import { Loader2 } from 'lucide-react';
+import { useRef, useEffect } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import type { EditHistoryEntry } from './types';

package/src/components/edit/EditModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useRef, useEffect, type ReactNode } from 'react';
+import { Bobbin, serializeChangesToYAML, type Change } from '@aprovan/bobbin';
 import {
   Code,
   Eye,
@@ -11,18 +11,18 @@ import {
   FolderTree,
   FileCode,
 } from 'lucide-react';
+import { useState, useCallback, useMemo, useRef, useEffect, type ReactNode } from 'react';
 import { MarkdownEditor } from '../MarkdownEditor';
 import { MarkdownPreview } from '../MarkdownPreview';
 import { SaveStatusButton, type SaveStatus } from '../SaveStatusButton';
+import { CodeBlockView } from './CodeBlockView';
 import { EditHistory } from './EditHistory';
 import { FileTree } from './FileTree';
-import { SaveConfirmDialog } from './SaveConfirmDialog';
-import { CodeBlockView } from './CodeBlockView';
+import { getFileType, isCompilable, isMarkdownFile, getMimeType } from './fileTypes';
 import { MediaPreview } from './MediaPreview';
-import { useEditSession, type UseEditSessionOptions } from './useEditSession';
+import { SaveConfirmDialog } from './SaveConfirmDialog';
 import { getActiveContent, getFiles } from './types';
-import { getFileType, isCompilable, isMarkdownFile, getMimeType } from './fileTypes';
-import { Bobbin, serializeChangesToYAML, type Change } from '@aprovan/bobbin';
+import { useEditSession, type UseEditSessionOptions } from './useEditSession';
 import type { VirtualProject } from '@aprovan/patchwork-compiler';
 
 // Simple hash for React key to force re-render on code changes

package/src/components/edit/FileTree.tsx

@@ -1,4 +1,3 @@
-import { useMemo, useState, useRef, useCallback, useEffect, type ReactNode } from 'react';
 import {
   ChevronRight,
   ChevronDown,
@@ -12,8 +11,9 @@ import {
   PinOff,
   X,
 } from 'lucide-react';
-import type { VirtualFile } from '@aprovan/patchwork-compiler';
+import { useMemo, useState, useRef, useCallback, useEffect, type ReactNode } from 'react';
 import { isMediaFile } from './fileTypes';
+import type { VirtualFile } from '@aprovan/patchwork-compiler';
 
 interface TreeNode {
   name: string;
@@ -384,7 +384,6 @@ function LazyTreeNode({
         .catch((err) => setLoadError(err instanceof Error ? err.message : 'Failed to load directory'))
         .finally(() => setLoading(false));
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [reloadToken]);
 
   const isActive = entry.path === activePath;

package/src/components/edit/MediaPreview.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
 import { FileImage, FileVideo, AlertCircle } from 'lucide-react';
+import { useState, useEffect } from 'react';
 import { isImageFile, isVideoFile } from './fileTypes';
 
 export interface MediaPreviewProps {

package/src/components/edit/api.ts

@@ -1,5 +1,5 @@
-import { applyDiffs, hasDiffBlocks, parseEditResponse } from '../../lib/diff';
-import type { EditRequest, EditResponse } from './types';
+import { applyDiffs, hasDiffBlocks, parseEditResponse } from "../../lib/diff";
+import type { EditRequest, EditResponse } from "./types";
 
 export interface EditApiOptions {
   endpoint?: string;
@@ -12,16 +12,16 @@ export async function sendEditRequest(
   request: EditRequest,
   options: EditApiOptions = {},
 ): Promise<EditResponse> {
-  const { endpoint = '/api/edit', onProgress, sanitize = true } = options;
+  const { endpoint = "/api/edit", onProgress, sanitize = true } = options;
 
   const response = await fetch(endpoint, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
     body: JSON.stringify(request),
   });
 
   if (!response.ok) {
-    throw new Error('Edit request failed');
+    throw new Error("Edit request failed");
   }
 
   const text = await streamResponse(response, onProgress);
@@ -42,7 +42,7 @@ export async function sendEditRequest(
     // Provide detailed context about failed diffs for better error feedback
     const failedDetails = result.failed
       .map((f, i) => `[${i + 1}] "${f}"`)
-      .join('\n');
+      .join("\n");
     throw new Error(
       `Failed to apply ${parsed.diffs.length} diff(s). None of the SEARCH blocks matched the code.\n\nFailed searches:\n${failedDetails}\n\nThis usually means the code has changed or the SEARCH text doesn't match exactly.`,
     );
@@ -71,7 +71,7 @@ async function streamResponse(
   }
 
   const decoder = new TextDecoder();
-  let fullText = '';
+  let fullText = "";
   const emittedNotes = new Set<string>();
 
   let done = false;

package/src/components/edit/fileTypes.ts

@@ -1,4 +1,4 @@
-export type FileCategory = 'compilable' | 'text' | 'media' | 'binary';
+export type FileCategory = "compilable" | "text" | "media" | "binary";
 
 export interface FileTypeInfo {
   category: FileCategory;
@@ -6,55 +6,75 @@ export interface FileTypeInfo {
   mimeType: string;
 }
 
-const COMPILABLE_EXTENSIONS = ['.tsx', '.jsx', '.ts', '.js'];
-const MEDIA_EXTENSIONS = ['.svg', '.png', '.jpg', '.jpeg', '.gif', '.webp', '.mp4', '.mov', '.webm'];
-const TEXT_EXTENSIONS = ['.json', '.yaml', '.yml', '.md', '.txt', '.css', '.html', '.xml', '.toml'];
+const COMPILABLE_EXTENSIONS = [".tsx", ".jsx", ".ts", ".js"];
+const MEDIA_EXTENSIONS = [
+  ".svg",
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".webp",
+  ".mp4",
+  ".mov",
+  ".webm",
+];
+const TEXT_EXTENSIONS = [
+  ".json",
+  ".yaml",
+  ".yml",
+  ".md",
+  ".txt",
+  ".css",
+  ".html",
+  ".xml",
+  ".toml",
+];
 
 const EXTENSION_TO_LANGUAGE: Record<string, string> = {
-  '.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',
+  ".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",
 };
 
 const EXTENSION_TO_MIME: Record<string, string> = {
-  '.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',
+  ".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: string): string {
-  const lastDot = path.lastIndexOf('.');
-  if (lastDot === -1) return '';
+  const lastDot = path.lastIndexOf(".");
+  if (lastDot === -1) return "";
   return path.slice(lastDot).toLowerCase();
 }
 
@@ -63,32 +83,32 @@ export function getFileType(path: string): FileTypeInfo {
 
   if (COMPILABLE_EXTENSIONS.includes(ext)) {
     return {
-      category: 'compilable',
+      category: "compilable",
       language: EXTENSION_TO_LANGUAGE[ext] ?? null,
-      mimeType: EXTENSION_TO_MIME[ext] ?? 'text/plain',
+      mimeType: EXTENSION_TO_MIME[ext] ?? "text/plain",
     };
   }
 
   if (TEXT_EXTENSIONS.includes(ext)) {
     return {
-      category: 'text',
+      category: "text",
       language: EXTENSION_TO_LANGUAGE[ext] ?? null,
-      mimeType: EXTENSION_TO_MIME[ext] ?? 'text/plain',
+      mimeType: EXTENSION_TO_MIME[ext] ?? "text/plain",
     };
   }
 
   if (MEDIA_EXTENSIONS.includes(ext)) {
     return {
-      category: 'media',
-      language: ext === '.svg' ? 'xml' : null,
-      mimeType: EXTENSION_TO_MIME[ext] ?? 'application/octet-stream',
+      category: "media",
+      language: ext === ".svg" ? "xml" : null,
+      mimeType: EXTENSION_TO_MIME[ext] ?? "application/octet-stream",
     };
   }
 
   return {
-    category: 'binary',
+    category: "binary",
     language: null,
-    mimeType: 'application/octet-stream',
+    mimeType: "application/octet-stream",
   };
 }
 
@@ -105,7 +125,7 @@ export function isTextFile(path: string): boolean {
 }
 
 export function isMarkdownFile(path: string): boolean {
-  return getExtension(path) === '.md';
+  return getExtension(path) === ".md";
 }
 
 export function isPreviewable(path: string): boolean {
@@ -119,15 +139,15 @@ export function getLanguageFromExt(path: string): string | null {
 
 export function getMimeType(path: string): string {
   const ext = getExtension(path);
-  return EXTENSION_TO_MIME[ext] ?? 'application/octet-stream';
+  return EXTENSION_TO_MIME[ext] ?? "application/octet-stream";
 }
 
 export function isImageFile(path: string): boolean {
   const ext = getExtension(path);
-  return ['.svg', '.png', '.jpg', '.jpeg', '.gif', '.webp'].includes(ext);
+  return [".svg", ".png", ".jpg", ".jpeg", ".gif", ".webp"].includes(ext);
 }
 
 export function isVideoFile(path: string): boolean {
   const ext = getExtension(path);
-  return ['.mp4', '.mov', '.webm'].includes(ext);
+  return [".mp4", ".mov", ".webm"].includes(ext);
 }

package/src/components/edit/useEditSession.ts

@@ -1,6 +1,5 @@
-import { useState, useCallback, useMemo, useEffect, useRef } from "react";
-import type { VirtualProject } from "@aprovan/patchwork-compiler";
 import { createSingleFileProject } from "@aprovan/patchwork-compiler";
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
 import { sendEditRequest } from "./api";
 import type {
   EditHistoryEntry,
@@ -8,6 +7,7 @@ import type {
   EditSessionActions,
   CompileFn,
 } from "./types";
+import type { VirtualProject } from "@aprovan/patchwork-compiler";
 
 export interface UseEditSessionOptions {
   originalCode?: string;

package/src/lib/code-extractor.ts

@@ -1,5 +1,5 @@
-import type { VirtualFile, VirtualProject } from '@aprovan/patchwork-compiler';
 import { createProjectFromFiles, detectMainFile } from '@aprovan/patchwork-compiler';
+import type { VirtualFile, VirtualProject } from '@aprovan/patchwork-compiler';
 
 // Matches fenced code blocks with optional attributes: ```language attr="value"\n...content...```
 // Captures: [1] = language (optional), [2] = attributes (optional), [3] = content