@aprovan/patchwork-editor 0.1.2-dev.4a481e4 → 0.1.2-dev.4d82df8

package/dist/lib/vfs.d.ts

@@ -8,11 +8,10 @@ export declare function getVFSConfig(): Promise<{
 }>;
 /**
  * Get the VFS store instance (creates one if needed).
- * Store uses HttpBackend to persist to the stitchery server.
  */
 export declare function getVFSStore(): VFSStore;
 /**
- * Save a virtual project to disk via the stitchery server.
+ * Save a virtual project to disk via the VFS server.
  * Projects are saved under their ID in the VFS directory.
  */
 export declare function saveProject(project: VirtualProject): Promise<void>;
@@ -31,6 +30,6 @@ export declare function saveFile(path: string, content: string): Promise<void>;
 export declare function loadFile(path: string, encoding?: 'utf8' | 'base64'): Promise<string>;
 export declare function subscribeToChanges(callback: (record: ChangeRecord) => void): () => void;
 /**
- * Check if VFS is available (stitchery server is running with vfs-dir enabled).
+ * Check if VFS is available (backend server has /vfs routes enabled).
  */
 export declare function isVFSAvailable(): Promise<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aprovan/patchwork-editor",
-  "version": "0.1.2-dev.4a481e4",
+  "version": "0.1.2-dev.4d82df8",
   "description": "Components for facilitating widget generation and editing",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,15 +18,17 @@
     "@tiptap/pm": "^3.19.0",
     "@tiptap/react": "^3.19.0",
     "@tiptap/starter-kit": "^3.19.0",
+    "@types/dompurify": "^3.2.0",
     "clsx": "^2.1.1",
+    "dompurify": "^3.4.8",
     "lucide-react": "^0.511.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "shiki": "^3.22.0",
     "tailwind-merge": "^3.4.0",
     "tiptap-markdown": "^0.9.0",
-    "@aprovan/bobbin": "0.1.0-dev.4a481e4",
-    "@aprovan/patchwork-compiler": "0.1.2-dev.4a481e4"
+    "@aprovan/bobbin": "0.1.0-dev.4d82df8",
+    "@aprovan/patchwork-compiler": "0.1.2-dev.4d82df8"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -39,7 +41,7 @@
     "typescript": "^5.9.3"
   },
   "scripts": {
-    "build": "tsup && tsc --declaration --emitDeclarationOnly --outDir dist --jsx react-jsx --lib ES2022,DOM --skipLibCheck src/index.ts",
+    "build": "tsup && tsc -p tsconfig.json --emitDeclarationOnly",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit"
   }

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;
@@ -157,8 +156,7 @@ export function CodePreview({
       await saveProject(project);
       setLastSavedCode(currentCode);
       setSaveStatus('saved');
-    } catch (err) {
-      console.warn('[VFS] Failed to save project:', err);
+    } catch {
       setSaveStatus('error');
     }
   }, [currentCode, getProjectId, getEntryFile]);
@@ -340,8 +338,7 @@ export function CodePreview({
                 await saveProject(project);
                 setLastSavedCode(finalCode);
                 setSaveStatus('saved');
-              } catch (err) {
-                console.warn('[VFS] Failed to save project:', err);
+              } catch {
                 setSaveStatus('error');
               }
             })();

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/CodeBlockView.tsx

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import { useCallback, useRef, useEffect, useState, useMemo } from 'react';
 import { createHighlighter, type Highlighter, type BundledLanguage } from 'shiki';
 
@@ -117,12 +118,15 @@ export function CodeBlockView({ content, language, editable = false, onChange }:
   const highlightedHtml = useMemo(() => {
     if (!highlighter) return null;
     try {
-      return highlighter.codeToHtml(content, {
+      const raw = highlighter.codeToHtml(content, {
         lang: shikiLang,
         theme: 'github-light',
       });
+      return DOMPurify.sanitize(raw, {
+        ALLOWED_TAGS: ['pre', 'code', 'span', 'div'],
+        ALLOWED_ATTR: ['class', 'style'],
+      });
     } catch {
-      // Fallback if language is not supported
       return null;
     }
   }, [highlighter, content, shikiLang]);

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/index.ts

@@ -1,5 +1,9 @@
+// Intentional public API boundary for the edit sub-module.
+// Consumers: src/index.ts, CodePreview.tsx, and internal edit components.
+
 export * from './types';
 export * from './api';
+export * from './useProjectState';
 export * from './useEditSession';
 export * from './EditHistory';
 export * from './EditModal';

package/src/components/edit/useEditSession.ts

@@ -1,13 +1,13 @@
-import { useState, useCallback, useMemo, useEffect, useRef } from "react";
-import type { VirtualProject } from "@aprovan/patchwork-compiler";
-import { createSingleFileProject } from "@aprovan/patchwork-compiler";
+import { useState, useCallback } from "react";
 import { sendEditRequest } from "./api";
+import { useProjectState } from "./useProjectState";
 import type {
   EditHistoryEntry,
   EditSessionState,
   EditSessionActions,
   CompileFn,
 } from "./types";
+import type { VirtualProject } from "@aprovan/patchwork-compiler";
 
 export interface UseEditSessionOptions {
   originalCode?: string;
@@ -17,67 +17,20 @@ export interface UseEditSessionOptions {
   apiEndpoint?: string;
 }
 
-function cloneProject(project: VirtualProject): VirtualProject {
-  return {
-    ...project,
-    files: new Map(project.files),
-  };
-}
-
 export function useEditSession(
   options: UseEditSessionOptions,
 ): EditSessionState & EditSessionActions {
   const {
-    originalCode,
-    originalProject: providedProject,
-    initialActiveFile,
     compile,
     apiEndpoint,
   } = options;
 
-  console.log(
-    "[useEditSession] providedProject:",
-    providedProject?.id,
-    "files:",
-    providedProject ? Array.from(providedProject.files.keys()) : "none",
-  );
-
-  const originalProject = useMemo(
-    () => providedProject ?? createSingleFileProject(originalCode ?? ""),
-    [providedProject, originalCode],
-  );
-
-  // Track the last project we synced from to detect reference changes
-  const lastSyncedProjectRef = useRef<VirtualProject>(originalProject);
-
-  const [project, setProject] = useState<VirtualProject>(originalProject);
-  const [activeFile, setActiveFile] = useState(
-    initialActiveFile && originalProject.files.has(initialActiveFile)
-      ? initialActiveFile
-      : originalProject.entry,
-  );
-  const [history, setHistory] = useState<EditHistoryEntry[]>([]);
+  const state = useProjectState(options);
   const [isApplying, setIsApplying] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [streamingNotes, setStreamingNotes] = useState<string[]>([]);
   const [pendingPrompt, setPendingPrompt] = useState<string | null>(null);
 
-  // Sync state when the original project reference changes (new project or files loaded)
-  useEffect(() => {
-    if (originalProject !== lastSyncedProjectRef.current) {
-      lastSyncedProjectRef.current = originalProject;
-      setProject(originalProject);
-      setActiveFile(
-        initialActiveFile && originalProject.files.has(initialActiveFile)
-          ? initialActiveFile
-          : originalProject.entry,
-      );
-      setHistory([]);
-      setError(null);
-      setStreamingNotes([]);
-    }
-  }, [originalProject, initialActiveFile]);
-
   const performEdit = useCallback(
     async (
       currentCode: string,
@@ -122,11 +75,6 @@ export function useEditSession(
     [compile, apiEndpoint],
   );
 
-  const currentCode = useMemo(
-    () => project.files.get(activeFile)?.content ?? "",
-    [project, activeFile],
-  );
-
   const submitEdit = useCallback(
     async (prompt: string) => {
       if (!prompt.trim() || isApplying) return;
@@ -137,16 +85,16 @@ export function useEditSession(
       setPendingPrompt(prompt);
 
       try {
-        const result = await performEdit(currentCode, prompt);
-        setProject((prev) => {
-          const updated = cloneProject(prev);
-          const file = updated.files.get(activeFile);
+        const result = await performEdit(state.currentCode, prompt);
+        state.setProject((prev: VirtualProject) => {
+          const updated = { ...prev, files: new Map(prev.files) };
+          const file = updated.files.get(state.activeFile);
           if (file) {
-            updated.files.set(activeFile, { ...file, content: result.newCode });
+            updated.files.set(state.activeFile, { ...file, content: result.newCode });
           }
           return updated;
         });
-        setHistory((prev) => [...prev, ...result.entries]);
+        state.setHistory((prev: EditHistoryEntry[]) => [...prev, ...result.entries]);
       } catch (err) {
         setError(err instanceof Error ? err.message : "Edit failed");
       } finally {
@@ -155,45 +103,7 @@ export function useEditSession(
         setPendingPrompt(null);
       }
     },
-    [currentCode, activeFile, isApplying, performEdit],
-  );
-
-  const revert = useCallback(() => {
-    setProject(originalProject);
-    setActiveFile(originalProject.entry);
-    setHistory([]);
-    setError(null);
-    setStreamingNotes([]);
-  }, [originalProject]);
-
-  const updateActiveFile = useCallback(
-    (content: string) => {
-      setProject((prev) => {
-        const updated = cloneProject(prev);
-        const file = updated.files.get(activeFile);
-        if (file) {
-          updated.files.set(activeFile, { ...file, content });
-        }
-        return updated;
-      });
-    },
-    [activeFile],
-  );
-
-  const replaceFile = useCallback(
-    (path: string, content: string, encoding: "utf8" | "base64" = "utf8") => {
-      setProject((prev) => {
-        const updated = cloneProject(prev);
-        const file = updated.files.get(path);
-        if (file) {
-          updated.files.set(path, { ...file, content, encoding });
-        } else {
-          updated.files.set(path, { path, content, encoding });
-        }
-        return updated;
-      });
-    },
-    [],
+    [state.currentCode, state.activeFile, state.setProject, state.setHistory, isApplying, performEdit],
   );
 
   const clearError = useCallback(() => {
@@ -201,19 +111,19 @@ export function useEditSession(
   }, []);
 
   return {
-    project,
-    originalProject,
-    activeFile,
-    history,
+    project: state.project,
+    originalProject: state.originalProject,
+    activeFile: state.activeFile,
+    history: state.history,
     isApplying,
     error,
     streamingNotes,
     pendingPrompt,
     submitEdit,
-    revert,
-    updateActiveFile,
-    setActiveFile,
+    revert: state.revert,
+    updateActiveFile: state.updateActiveFile,
+    setActiveFile: state.setActiveFile,
     clearError,
-    replaceFile,
+    replaceFile: state.replaceFile,
   };
 }

package/src/components/edit/useProjectState.ts

@@ -0,0 +1,122 @@
+import { createSingleFileProject } from "@aprovan/patchwork-compiler";
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import type {
+  EditHistoryEntry,
+  EditSessionState,
+} from "./types";
+import type { VirtualProject } from "@aprovan/patchwork-compiler";
+
+export interface UseProjectStateOptions {
+  originalCode?: string;
+  originalProject?: VirtualProject;
+  initialActiveFile?: string;
+}
+
+function cloneProject(project: VirtualProject): VirtualProject {
+  return {
+    ...project,
+    files: new Map(project.files),
+  };
+}
+
+export function useProjectState(
+  options: UseProjectStateOptions,
+): Omit<EditSessionState, "isApplying" | "error" | "streamingNotes" | "pendingPrompt"> & {
+  setProject: React.Dispatch<React.SetStateAction<VirtualProject>>;
+  setActiveFile: React.Dispatch<React.SetStateAction<string>>;
+  history: EditHistoryEntry[];
+  setHistory: React.Dispatch<React.SetStateAction<EditHistoryEntry[]>>;
+  revert: () => void;
+  updateActiveFile: (content: string) => void;
+  replaceFile: (path: string, content: string, encoding?: "utf8" | "base64") => void;
+  currentCode: string;
+} {
+  const {
+    originalCode,
+    originalProject: providedProject,
+    initialActiveFile,
+  } = options;
+
+  const originalProject = useMemo(
+    () => providedProject ?? createSingleFileProject(originalCode ?? ""),
+    [providedProject, originalCode],
+  );
+
+  const lastSyncedProjectRef = useRef<VirtualProject>(originalProject);
+
+  const [project, setProject] = useState<VirtualProject>(originalProject);
+  const [activeFile, setActiveFile] = useState(
+    initialActiveFile && originalProject.files.has(initialActiveFile)
+      ? initialActiveFile
+      : originalProject.entry,
+  );
+  const [history, setHistory] = useState<EditHistoryEntry[]>([]);
+
+  useEffect(() => {
+    if (originalProject !== lastSyncedProjectRef.current) {
+      lastSyncedProjectRef.current = originalProject;
+      setProject(originalProject);
+      setActiveFile(
+        initialActiveFile && originalProject.files.has(initialActiveFile)
+          ? initialActiveFile
+          : originalProject.entry,
+      );
+      setHistory([]);
+    }
+  }, [originalProject, initialActiveFile]);
+
+  const currentCode = useMemo(
+    () => project.files.get(activeFile)?.content ?? "",
+    [project, activeFile],
+  );
+
+  const revert = useCallback(() => {
+    setProject(originalProject);
+    setActiveFile(originalProject.entry);
+    setHistory([]);
+  }, [originalProject]);
+
+  const updateActiveFile = useCallback(
+    (content: string) => {
+      setProject((prev: VirtualProject) => {
+        const updated = cloneProject(prev);
+        const file = updated.files.get(activeFile);
+        if (file) {
+          updated.files.set(activeFile, { ...file, content });
+        }
+        return updated;
+      });
+    },
+    [activeFile],
+  );
+
+  const replaceFile = useCallback(
+    (path: string, content: string, encoding: "utf8" | "base64" = "utf8") => {
+      setProject((prev: VirtualProject) => {
+        const updated = cloneProject(prev);
+        const file = updated.files.get(path);
+        if (file) {
+          updated.files.set(path, { ...file, content, encoding });
+        } else {
+          updated.files.set(path, { path, content, encoding });
+        }
+        return updated;
+      });
+    },
+    [],
+  );
+
+  return {
+    project,
+    originalProject,
+    activeFile,
+    setActiveFile,
+    history,
+    setHistory,
+    setProject,
+    revert,
+    updateActiveFile,
+    replaceFile,
+    currentCode,
+  };
+}

package/src/index.ts

@@ -1,15 +1,11 @@
-// Components
-export {
-  CodeBlockExtension,
-  CodePreview,
-  WidgetPreview,
-  MarkdownEditor,
-  MarkdownPreview,
-  ServicesInspector,
-  type ServiceInfo,
-} from "./components";
+export { CodeBlockExtension } from "./components/CodeBlockExtension";
+export { CodePreview } from "./components/CodePreview";
+export { WidgetPreview } from "./components/WidgetPreview";
+export { MarkdownEditor } from "./components/MarkdownEditor";
+export { MarkdownPreview } from "./components/MarkdownPreview";
+export { ServicesInspector, type ServiceInfo } from "./components/ServicesInspector";
 
-// Edit components
+// Edit components — intentional public API boundary (see components/edit/index.ts)
 export {
   EditModal,
   EditHistory,
@@ -18,9 +14,11 @@ export {
   CodeBlockView,
   MediaPreview,
   useEditSession,
+  useProjectState,
   sendEditRequest,
   type EditModalProps,
   type UseEditSessionOptions,
+  type UseProjectStateOptions,
   type EditHistoryEntry,
   type EditSessionState,
   type EditSessionActions,
@@ -50,9 +48,7 @@ export {
   getMimeType,
 } from "./components/edit";
 
-// Lib utilities
 export {
-  // Code extractor
   extractCodeBlocks,
   findFirstCodeBlock,
   hasCodeBlock,
@@ -62,8 +58,9 @@ export {
   type CodePart,
   type ParsedPart,
   type ExtractOptions,
+} from "./lib/code-extractor";
 
-  // Diff utilities
+export {
   parseCodeBlockAttributes,
   parseCodeBlocks,
   findDiffMarkers,
@@ -78,8 +75,9 @@ export {
   type CodeBlock,
   type DiffBlock,
   type ParsedEditResponse,
+} from "./lib/diff";
 
-  // VFS utilities
+export {
   getVFSConfig,
   getVFSStore,
   saveProject,
@@ -87,7 +85,6 @@ export {
   listProjects,
   saveFile,
   isVFSAvailable,
+} from "./lib/vfs";
 
-  // General utilities
-  cn,
-} from "./lib";
+export { cn } from "./lib/utils";

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