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

package/dist/lib/code-extractor.d.ts

@@ -0,0 +1,44 @@
+import type { VirtualProject } from '@aprovan/patchwork-compiler';
+export type TextPart = {
+    type: 'text';
+    content: string;
+};
+export type CodePart = {
+    type: 'code' | string;
+    content: string;
+    language: 'jsx' | 'tsx' | string;
+    attributes?: Record<string, string>;
+};
+export type ParsedPart = TextPart | CodePart;
+export interface ExtractOptions {
+    /** Only extract these languages (default: all) */
+    filterLanguages?: Set<string>;
+    /** Include unclosed code blocks at the end (for streaming) */
+    includeUnclosed?: boolean;
+}
+/**
+ * Extract code blocks from markdown text.
+ */
+export declare function extractCodeBlocks(text: string, options?: ExtractOptions): ParsedPart[];
+/**
+ * Find the first JSX/TSX block in the text.
+ * Returns null if no JSX block is found.
+ */
+export declare function findFirstCodeBlock(text: string): CodePart | null;
+/**
+ * Check if text contains any JSX/TSX code blocks.
+ */
+export declare function hasCodeBlock(text: string): boolean;
+/**
+ * Get all unique languages found in code blocks.
+ */
+export declare function getCodeBlockLanguages(text: string): Set<string>;
+/**
+ * Extract code blocks as a VirtualProject.
+ * Groups files with path attributes into a multi-file project.
+ * Files without paths are treated as the main entry file.
+ */
+export declare function extractProject(text: string, options?: ExtractOptions): {
+    project: VirtualProject;
+    textParts: TextPart[];
+};

package/dist/lib/diff.d.ts

@@ -0,0 +1,90 @@
+export interface CodeBlockAttributes {
+    /** Progress note for UI display (optional but encouraged, comes first) */
+    note?: string;
+    /** Virtual file path for multi-file generation (uses \@/ prefix) */
+    path?: string;
+    /** Additional arbitrary attributes */
+    [key: string]: string | undefined;
+}
+export interface CodeBlock {
+    /** Language identifier (e.g., tsx, json, diff) */
+    language: string;
+    /** Parsed attributes from the fence line */
+    attributes: CodeBlockAttributes;
+    /** Raw content between the fence markers */
+    content: string;
+}
+export interface DiffBlock {
+    search: string;
+    replace: string;
+    /** Progress note from the code fence attributes */
+    note?: string;
+    /** Target file path for multi-file edits */
+    path?: string;
+}
+/**
+ * Parse attributes from a code fence line.
+ *
+ * Example input: 'note="Adding handler" path="\@/components/Button.tsx"'
+ *
+ * Returns: an object with note, path, and any other attributes
+ */
+export declare function parseCodeBlockAttributes(attrString: string): CodeBlockAttributes;
+/**
+ * Parse all code blocks from text, extracting language and attributes.
+ * Returns blocks in order of appearance.
+ */
+export declare function parseCodeBlocks(text: string): CodeBlock[];
+/**
+ * Check if text contains any diff markers.
+ * Returns the first marker found, or null if clean.
+ */
+export declare function findDiffMarkers(text: string): string | null;
+/**
+ * Remove stray diff markers from text.
+ * Use as a fallback when markers leak into output.
+ */
+export declare function sanitizeDiffMarkers(text: string): string;
+export interface ParsedEditResponse {
+    /** Progress notes extracted from code block attributes (in order of appearance) */
+    progressNotes: string[];
+    /** Parsed diff blocks with their attributes */
+    diffs: DiffBlock[];
+    /** Summary markdown text (content outside of code blocks) */
+    summary: string;
+}
+/**
+ * Parse progress notes and diffs from an edit response.
+ *
+ * ```diff note="Adding handler" path="@/components/Button.tsx"
+ * <<<<<<< SEARCH
+ * exact code
+ * =======
+ * replacement
+ * >>>>>>> REPLACE
+ * ```
+ *
+ * Summary markdown is everything outside of code blocks.
+ */
+export declare function parseEditResponse(text: string): ParsedEditResponse;
+/**
+ * Parse diff blocks from text, extracting attributes from code fences.
+ * Supports both fenced code blocks with attributes and raw diff markers.
+ */
+export declare function parseDiffs(text: string): DiffBlock[];
+export declare function applyDiffs(code: string, diffs: DiffBlock[], options?: {
+    sanitize?: boolean;
+}): {
+    code: string;
+    applied: number;
+    failed: string[];
+    warning?: string;
+};
+export declare function hasDiffBlocks(text: string): boolean;
+export declare function extractTextWithoutDiffs(text: string): string;
+/**
+ * Extract the summary markdown from an edit response.
+ * Removes code blocks (with their attributes), and any leading/trailing whitespace.
+ * Preserves regular markdown prose outside of code blocks.
+ */
+export declare function extractSummary(text: string): string;

package/dist/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from './code-extractor';
+export * from './diff';
+export * from './vfs';
+export { cn } from './utils';

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/vfs.d.ts

@@ -0,0 +1,36 @@
+import { VFSStore, type ChangeRecord, type VirtualProject } from '@aprovan/patchwork-compiler';
+/**
+ * Get VFS configuration from the server.
+ * Caches the result for subsequent calls.
+ */
+export declare function getVFSConfig(): Promise<{
+    usePaths: boolean;
+}>;
+/**
+ * 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.
+ * Projects are saved under their ID in the VFS directory.
+ */
+export declare function saveProject(project: VirtualProject): Promise<void>;
+/**
+ * Load a project from disk by ID.
+ */
+export declare function loadProject(id: string): Promise<VirtualProject | null>;
+/**
+ * List all stored project IDs.
+ */
+export declare function listProjects(): Promise<string[]>;
+/**
+ * Save a single file to the VFS.
+ */
+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).
+ */
+export declare function isVFSAvailable(): Promise<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aprovan/patchwork-editor",
-  "version": "0.1.0",
+  "version": "0.1.2-dev.03aaf5b",
   "description": "Components for facilitating widget generation and editing",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,10 +22,11 @@
     "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",
-    "@aprovan/patchwork-compiler": "0.1.0"
+    "@aprovan/bobbin": "0.1.0-dev.03aaf5b",
+    "@aprovan/patchwork-compiler": "0.1.2-dev.03aaf5b"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -38,7 +39,7 @@
     "typescript": "^5.9.3"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && tsc --declaration --emitDeclarationOnly --outDir dist --jsx react-jsx --lib ES2022,DOM --skipLibCheck src/index.ts",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit"
   }

package/src/components/CodeBlockExtension.tsx

@@ -115,7 +115,7 @@ export const CodeBlockExtension = Node.create({
         default: null,
         parseHTML: (element: HTMLElement) => {
           const { languageClassPrefix } = this.options;
-          const classNames = [...(element.firstElementChild?.classList || [])];
+          const classNames = Array.from(element.firstElementChild?.classList || []);
           const languages = classNames
             .filter((className) => className.startsWith(languageClassPrefix))
             .map((className) => className.replace(languageClassPrefix, ''));

package/src/components/CodePreview.tsx

@@ -3,13 +3,15 @@ import { Code, Eye, AlertCircle, Loader2, Pencil, RotateCcw, MessageSquare, Clou
 import type { Compiler, MountedWidget, Manifest } from '@aprovan/patchwork-compiler';
 import { createSingleFileProject } from '@aprovan/patchwork-compiler';
 import { EditModal, type CompileFn } from './edit';
-import { saveProject, getVFSConfig } from '../lib/vfs';
+import { saveProject, getVFSConfig, loadFile, subscribeToChanges } from '../lib/vfs';
 
 type SaveStatus = 'unsaved' | 'saving' | 'saved' | 'error';
 
 interface CodePreviewProps {
   code: string;
   compiler: Compiler | null;
+  /** Optional entrypoint file for the widget (default: "index.ts") */
+  entrypoint?: string;
   /** Available service namespaces for widget calls */
   services?: string[];
   /** Optional file path from code block attributes (e.g., "components/calculator.tsx") */
@@ -90,12 +92,17 @@ function useCodeCompiler(compiler: Compiler | null, code: string, enabled: boole
   return { containerRef, loading, error };
 }
 
-export function CodePreview({ code: originalCode, compiler, services, filePath }: CodePreviewProps) {
+export function CodePreview({ code: originalCode, compiler, services, filePath, entrypoint = 'index.ts' }: CodePreviewProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [showPreview, setShowPreview] = useState(true);
   const [currentCode, setCurrentCode] = useState(originalCode);
   const [editCount, setEditCount] = useState(0);
   const [saveStatus, setSaveStatus] = useState<SaveStatus>('unsaved');
+  const [lastSavedCode, setLastSavedCode] = useState(originalCode);
+  const [vfsPath, setVfsPath] = useState<string | null>(null);
+  const currentCodeRef = useRef(currentCode);
+  const lastSavedRef = useRef(lastSavedCode);
+  const isEditingRef = useRef(isEditing);
 
   // Stable project ID for this widget instance (fallback when not using paths)
   const fallbackId = useMemo(() => crypto.randomUUID(), []);
@@ -121,11 +128,63 @@ export function CodePreview({ code: originalCode, compiler, services, filePath }
   const getEntryFile = useCallback(() => {
     if (filePath) {
       const parts = filePath.split('/');
-      return parts[parts.length - 1] || 'main.tsx';
+      return parts[parts.length - 1] || entrypoint;
     }
-    return 'main.tsx';
+    return entrypoint;
   }, [filePath]);
 
+  useEffect(() => {
+    currentCodeRef.current = currentCode;
+  }, [currentCode]);
+
+  useEffect(() => {
+    lastSavedRef.current = lastSavedCode;
+  }, [lastSavedCode]);
+
+  useEffect(() => {
+    isEditingRef.current = isEditing;
+  }, [isEditing]);
+
+  useEffect(() => {
+    let active = true;
+    void (async () => {
+      const projectId = await getProjectId();
+      const entryFile = getEntryFile();
+      if (!active) return;
+      setVfsPath(`${projectId}/${entryFile}`);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [getProjectId, getEntryFile]);
+
+  useEffect(() => {
+    if (!vfsPath) return;
+    const unsubscribe = subscribeToChanges(async (record) => {
+      if (record.path !== vfsPath) return;
+      if (record.type === 'delete') {
+        setSaveStatus('unsaved');
+        return;
+      }
+      if (isEditingRef.current) return;
+      try {
+        const remote = await loadFile(vfsPath);
+        if (currentCodeRef.current !== lastSavedRef.current) {
+          setSaveStatus('unsaved');
+          return;
+        }
+        if (remote !== currentCodeRef.current) {
+          setCurrentCode(remote);
+          setLastSavedCode(remote);
+          setSaveStatus('saved');
+        }
+      } catch {
+        setSaveStatus('error');
+      }
+    });
+    return () => unsubscribe();
+  }, [vfsPath]);
+
   // Manual save handler
   const handleSave = useCallback(async () => {
     setSaveStatus('saving');
@@ -134,6 +193,7 @@ export function CodePreview({ code: originalCode, compiler, services, filePath }
       const entryFile = getEntryFile();
       const project = createSingleFileProject(currentCode, entryFile, projectId);
       await saveProject(project);
+      setLastSavedCode(currentCode);
       setSaveStatus('saved');
     } catch (err) {
       console.warn('[VFS] Failed to save project:', err);

package/src/components/edit/CodeBlockView.tsx

@@ -0,0 +1,188 @@
+import { useCallback, useRef, useEffect, useState, useMemo } from 'react';
+import { createHighlighter, type Highlighter, type BundledLanguage } from 'shiki';
+
+// Singleton highlighter instance
+let highlighterPromise: Promise<Highlighter> | null = null;
+
+const COMMON_LANGUAGES: BundledLanguage[] = [
+  'typescript',
+  'javascript',
+  'tsx',
+  'jsx',
+  'json',
+  'html',
+  'css',
+  'markdown',
+  'yaml',
+  'python',
+  'bash',
+  'sql',
+];
+
+function getHighlighter(): Promise<Highlighter> {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ['github-light'],
+      langs: COMMON_LANGUAGES,
+    });
+  }
+  return highlighterPromise;
+}
+
+// Map common file extensions/language names to shiki language identifiers
+function normalizeLanguage(lang: string | null): BundledLanguage {
+  if (!lang) return 'typescript';
+  const normalized = lang.toLowerCase();
+  const mapping: Record<string, BundledLanguage> = {
+    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';
+}
+
+export interface CodeBlockViewProps {
+  content: string;
+  language: string | null;
+  editable?: boolean;
+  onChange?: (content: string) => void;
+}
+
+export function CodeBlockView({ content, language, editable = false, onChange }: CodeBlockViewProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [highlighter, setHighlighter] = useState<Highlighter | null>(null);
+
+  // Load the highlighter
+  useEffect(() => {
+    let mounted = true;
+    getHighlighter().then((h) => {
+      if (mounted) setHighlighter(h);
+    });
+    return () => { mounted = false; };
+  }, []);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  }, [content]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChange?.(e.target.value);
+    },
+    [onChange]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Tab') {
+        e.preventDefault();
+        const target = e.target as HTMLTextAreaElement;
+        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]);
+
+  // Generate highlighted HTML
+  const highlightedHtml = useMemo(() => {
+    if (!highlighter) return null;
+    try {
+      return highlighter.codeToHtml(content, {
+        lang: shikiLang,
+        theme: 'github-light',
+      });
+    } catch {
+      // Fallback if language is not supported
+      return null;
+    }
+  }, [highlighter, content, shikiLang]);
+
+  return (
+    <div className="h-full flex flex-col bg-[#ffffff]">
+      <div className="flex items-center justify-between px-4 py-2 bg-[#f6f8fa] border-b border-[#d0d7de] text-xs">
+        <span className="font-mono text-[#57606a]">{langLabel}</span>
+      </div>
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+        {editable ? (
+          <div className="relative min-h-full">
+            {/* Highlighted code layer (background) - scrolls with content */}
+            <div
+              ref={containerRef}
+              className="absolute top-0 left-0 right-0 pointer-events-none p-4"
+              aria-hidden="true"
+            >
+              {highlightedHtml ? (
+                <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 }}
+                />
+              ) : (
+                <pre className="text-xs font-mono whitespace-pre-wrap break-words text-[#24292f] m-0 leading-relaxed">
+                  <code>{content}</code>
+                </pre>
+              )}
+            </div>
+            {/* Editable textarea layer (foreground) */}
+            <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',
+              }}
+            />
+          </div>
+        ) : (
+          <div className="p-4">
+            {highlightedHtml ? (
+              <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 }}
+              />
+            ) : (
+              <pre className="text-xs font-mono whitespace-pre-wrap break-words m-0 leading-relaxed text-[#24292f]">
+                <code>{content}</code>
+              </pre>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}