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

package/src/components/edit/fileTypes.ts

@@ -0,0 +1,125 @@
+export type FileCategory = 'compilable' | 'text' | 'media' | 'binary';
+
+export interface FileTypeInfo {
+  category: FileCategory;
+  language: string | null;
+  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 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',
+};
+
+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',
+};
+
+function getExtension(path: string): string {
+  const lastDot = path.lastIndexOf('.');
+  if (lastDot === -1) return '';
+  return path.slice(lastDot).toLowerCase();
+}
+
+export function getFileType(path: string): FileTypeInfo {
+  const ext = getExtension(path);
+
+  if (COMPILABLE_EXTENSIONS.includes(ext)) {
+    return {
+      category: 'compilable',
+      language: EXTENSION_TO_LANGUAGE[ext] ?? null,
+      mimeType: EXTENSION_TO_MIME[ext] ?? 'text/plain',
+    };
+  }
+
+  if (TEXT_EXTENSIONS.includes(ext)) {
+    return {
+      category: 'text',
+      language: EXTENSION_TO_LANGUAGE[ext] ?? null,
+      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',
+    };
+  }
+
+  return {
+    category: 'binary',
+    language: null,
+    mimeType: 'application/octet-stream',
+  };
+}
+
+export function isCompilable(path: string): boolean {
+  return COMPILABLE_EXTENSIONS.includes(getExtension(path));
+}
+
+export function isMediaFile(path: string): boolean {
+  return MEDIA_EXTENSIONS.includes(getExtension(path));
+}
+
+export function isTextFile(path: string): boolean {
+  return TEXT_EXTENSIONS.includes(getExtension(path));
+}
+
+export function getLanguageFromExt(path: string): string | null {
+  const ext = getExtension(path);
+  return EXTENSION_TO_LANGUAGE[ext] ?? null;
+}
+
+export function getMimeType(path: string): string {
+  const ext = getExtension(path);
+  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);
+}
+
+export function isVideoFile(path: string): boolean {
+  const ext = getExtension(path);
+  return ['.mp4', '.mov', '.webm'].includes(ext);
+}

package/src/components/edit/index.ts

@@ -4,3 +4,7 @@ export * from './useEditSession';
 export * from './EditHistory';
 export * from './EditModal';
 export * from './FileTree';
+export * from './SaveConfirmDialog';
+export * from './fileTypes';
+export * from './CodeBlockView';
+export * from './MediaPreview';

package/src/components/edit/types.ts

@@ -23,8 +23,11 @@ export interface EditSessionActions {
   updateActiveFile: (content: string) => void;
   setActiveFile: (path: string) => void;
   clearError: () => void;
+  replaceFile: (path: string, content: string, encoding?: 'utf8' | 'base64') => void;
 }
 
+export type FileEncoding = 'utf8' | 'base64';
+
 // Convenience getters
 export function getActiveContent(state: EditSessionState): string {
   return state.project.files.get(state.activeFile)?.content ?? '';

package/src/components/edit/useEditSession.ts

@@ -1,16 +1,17 @@
-import { useState, useCallback, useMemo } from 'react';
-import type { VirtualProject } from '@aprovan/patchwork-compiler';
-import { createSingleFileProject } from '@aprovan/patchwork-compiler';
-import { sendEditRequest } from './api';
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import type { VirtualProject } from "@aprovan/patchwork-compiler";
+import { createSingleFileProject } from "@aprovan/patchwork-compiler";
+import { sendEditRequest } from "./api";
 import type {
   EditHistoryEntry,
   EditSessionState,
   EditSessionActions,
   CompileFn,
-} from './types';
+} from "./types";
 
 export interface UseEditSessionOptions {
-  originalCode: string;
+  originalCode?: string;
+  originalProject?: VirtualProject;
   compile?: CompileFn;
   apiEndpoint?: string;
 }
@@ -25,13 +26,28 @@ function cloneProject(project: VirtualProject): VirtualProject {
 export function useEditSession(
   options: UseEditSessionOptions,
 ): EditSessionState & EditSessionActions {
-  const { originalCode, compile, apiEndpoint } = options;
+  const {
+    originalCode,
+    originalProject: providedProject,
+    compile,
+    apiEndpoint,
+  } = options;
+
+  console.log(
+    "[useEditSession] providedProject:",
+    providedProject?.id,
+    "files:",
+    providedProject ? Array.from(providedProject.files.keys()) : "none",
+  );
 
   const originalProject = useMemo(
-    () => createSingleFileProject(originalCode),
-    [originalCode],
+    () => 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(originalProject.entry);
   const [history, setHistory] = useState<EditHistoryEntry[]>([]);
@@ -40,6 +56,18 @@ export function useEditSession(
   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(originalProject.entry);
+      setHistory([]);
+      setError(null);
+      setStreamingNotes([]);
+    }
+  }, [originalProject]);
+
   const performEdit = useCallback(
     async (
       currentCode: string,
@@ -85,7 +113,7 @@ export function useEditSession(
   );
 
   const currentCode = useMemo(
-    () => project.files.get(activeFile)?.content ?? '',
+    () => project.files.get(activeFile)?.content ?? "",
     [project, activeFile],
   );
 
@@ -110,7 +138,7 @@ export function useEditSession(
         });
         setHistory((prev) => [...prev, ...result.entries]);
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Edit failed');
+        setError(err instanceof Error ? err.message : "Edit failed");
       } finally {
         setIsApplying(false);
         setStreamingNotes([]);
@@ -142,6 +170,22 @@ export function useEditSession(
     [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;
+      });
+    },
+    [],
+  );
+
   const clearError = useCallback(() => {
     setError(null);
   }, []);
@@ -160,5 +204,6 @@ export function useEditSession(
     updateActiveFile,
     setActiveFile,
     clearError,
+    replaceFile,
   };
 }

package/src/index.ts

@@ -12,6 +12,9 @@ export {
   EditModal,
   EditHistory,
   FileTree,
+  SaveConfirmDialog,
+  CodeBlockView,
+  MediaPreview,
   useEditSession,
   sendEditRequest,
   type EditModalProps,
@@ -25,8 +28,22 @@ export {
   type CompileFn,
   type EditApiOptions,
   type FileTreeProps,
+  type SaveConfirmDialogProps,
+  type CodeBlockViewProps,
+  type MediaPreviewProps,
+  type FileCategory,
+  type FileTypeInfo,
+  type FileEncoding,
   getActiveContent,
   getFiles,
+  getFileType,
+  isCompilable,
+  isMediaFile,
+  isTextFile,
+  isImageFile,
+  isVideoFile,
+  getLanguageFromExt,
+  getMimeType,
 } from './components/edit';
 
 // Lib utilities

package/src/lib/diff.ts

@@ -155,7 +155,6 @@ export interface ParsedEditResponse {
 /**
  * Parse progress notes and diffs from an edit response.
  * 
- * New format uses tagged attributes on code fences:
  * ```diff note="Adding handler" path="@/components/Button.tsx"
  * <<<<<<< SEARCH
  * exact code
@@ -275,6 +274,8 @@ export function applyDiffs(
 }
 
 export function hasDiffBlocks(text: string): boolean {
+  // Reset lastIndex to avoid state issues from the global regex flag
+  DIFF_BLOCK_REGEX.lastIndex = 0;
   return DIFF_BLOCK_REGEX.test(text);
 }
 

package/src/lib/vfs.ts

@@ -1,13 +1,13 @@
-import { 
-  VFSStore, 
-  LocalFSBackend, 
+import {
+  VFSStore,
+  HttpBackend,
+  type ChangeRecord,
   type VirtualProject,
-  type VirtualFile 
 } from '@aprovan/patchwork-compiler';
 
 /**
  * VFS client for persisting virtual projects to the stitchery server.
- * Uses LocalFSBackend which makes HTTP requests to /vfs routes.
+ * Uses HttpBackend which makes HTTP requests to /vfs routes.
  */
 
 // VFS base URL - points to stitchery server's VFS routes
@@ -41,12 +41,15 @@ let storeInstance: VFSStore | null = null;
 
 /**
  * Get the VFS store instance (creates one if needed).
- * Store uses LocalFSBackend to persist to the stitchery server.
+ * Store uses HttpBackend to persist to the stitchery server.
  */
 export function getVFSStore(): VFSStore {
   if (!storeInstance) {
-    const backend = new LocalFSBackend({ baseUrl: VFS_BASE_URL });
-    storeInstance = new VFSStore(backend);
+    const provider = new HttpBackend({ baseUrl: VFS_BASE_URL });
+    storeInstance = new VFSStore(provider, {
+      sync: true,
+      conflictStrategy: 'local-wins',
+    });
   }
   return storeInstance;
 }
@@ -88,9 +91,24 @@ export async function listProjects(): Promise<string[]> {
 /**
  * Save a single file to the VFS.
  */
-export async function saveFile(file: VirtualFile): Promise<void> {
+export async function saveFile(path: string, content: string): Promise<void> {
   const store = getVFSStore();
-  await store.putFile(file);
+  await store.writeFile(path, content);
+}
+
+export async function loadFile(
+  path: string,
+  encoding?: 'utf8' | 'base64',
+): Promise<string> {
+  const store = getVFSStore();
+  return store.readFile(path, encoding);
+}
+
+export function subscribeToChanges(
+  callback: (record: ChangeRecord) => void,
+): () => void {
+  const store = getVFSStore();
+  return store.on('change', callback);
 }
 
 /**

package/tsup.config.ts

@@ -1,10 +1,15 @@
-import { defineConfig } from 'tsup';
+import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['esm'],
-  dts: true,
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: false,
   clean: true,
-  external: ['react', 'react-dom'],
+  external: [
+    "react",
+    "react-dom",
+    "@aprovan/bobbin",
+    "@aprovan/patchwork-compiler",
+  ],
   treeshake: true,
 });