@aprovan/patchwork-editor 0.1.2-dev.9d1cd22 → 0.1.2-dev.c1ac1dc

package/.turbo/turbo-build.log

@@ -10,4 +10,4 @@
 CLI Cleaning output folder
 ESM Build start
 ESM dist/index.js 104.93 KB
-ESM ⚡️ Build success in 266ms
+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/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,6 +1073,154 @@ 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"];
@@ -1693,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`;
@@ -1980,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++) {
@@ -2416,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aprovan/patchwork-editor",
-  "version": "0.1.2-dev.9d1cd22",
+  "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/bobbin": "0.1.0-dev.9d1cd22",
-    "@aprovan/patchwork-compiler": "0.1.2-dev.9d1cd22"
+    "@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,8 +1,8 @@
+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 } {

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;

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/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