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

package/src/components/edit/EditModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, type ReactNode } from 'react';
+import { useState, useCallback, useMemo, useRef, type ReactNode } from 'react';
 import {
   Code,
   Eye,
@@ -10,13 +10,19 @@ import {
   Send,
   FolderTree,
   FileCode,
+  Save,
 } from 'lucide-react';
 import { MarkdownEditor } from '../MarkdownEditor';
 import { EditHistory } from './EditHistory';
 import { FileTree } from './FileTree';
+import { SaveConfirmDialog } from './SaveConfirmDialog';
+import { CodeBlockView } from './CodeBlockView';
+import { MediaPreview } from './MediaPreview';
 import { useEditSession, type UseEditSessionOptions } from './useEditSession';
 import { getActiveContent, getFiles } from './types';
+import { getFileType, isCompilable, getMimeType } from './fileTypes';
 import { Bobbin, serializeChangesToYAML, type Change } from '@aprovan/bobbin';
+import type { VirtualProject } from '@aprovan/patchwork-compiler';
 
 // Simple hash for React key to force re-render on code changes
 function hashCode(str: string): number {
@@ -27,9 +33,17 @@ function hashCode(str: string): number {
   return hash;
 }
 
+
 export interface EditModalProps extends UseEditSessionOptions {
   isOpen: boolean;
+  initialState?: Partial<{
+    showTree: boolean;
+    showPreview: boolean;
+  }>;
+  hideFileTree?: boolean;
   onClose: (finalCode: string, editCount: number) => void;
+  onSave?: (code: string) => Promise<void>;
+  onSaveProject?: (project: VirtualProject) => Promise<void>;
   renderPreview: (code: string) => ReactNode;
   renderLoading?: () => ReactNode;
   renderError?: (error: string) => ReactNode;
@@ -40,24 +54,41 @@ export interface EditModalProps extends UseEditSessionOptions {
 export function EditModal({
   isOpen,
   onClose,
+  onSave,
+  onSaveProject,
   renderPreview,
   renderLoading,
   renderError,
   previewError,
   previewLoading,
+  initialState = {},
+  hideFileTree = false,
   ...sessionOptions
 }: EditModalProps) {
-  const [showPreview, setShowPreview] = useState(true);
-  const [showTree, setShowTree] = useState(false);
+  const [showPreview, setShowPreview] = useState(initialState?.showPreview ?? true);
+  const [showTree, setShowTree] = useState(
+    hideFileTree ? false : (initialState?.showTree ?? false)
+  );
   const [editInput, setEditInput] = useState('');
   const [bobbinChanges, setBobbinChanges] = useState<Change[]>([]);
   const [previewContainer, setPreviewContainer] = useState<HTMLDivElement | null>(null);
+  const [pillContainer, setPillContainer] = useState<HTMLDivElement | null>(null);
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [pendingClose, setPendingClose] = useState<{ code: string; count: number } | null>(null);
+  const currentCodeRef = useRef<string>('');
 
   const session = useEditSession(sessionOptions);
   const code = getActiveContent(session);
+  currentCodeRef.current = code;
   const files = useMemo(() => getFiles(session.project), [session.project]);
   const hasChanges = code !== (session.originalProject.files.get(session.activeFile)?.content ?? '');
 
+  const fileType = useMemo(() => getFileType(session.activeFile), [session.activeFile]);
+  const isCompilableFile = isCompilable(session.activeFile);
+  const showPreviewToggle = isCompilableFile;
+
   const handleBobbinChanges = useCallback((changes: Change[]) => {
     setBobbinChanges(changes);
   }, []);
@@ -78,17 +109,81 @@ export function EditModal({
     setBobbinChanges([]);
   };
 
-  const handleClose = () => {
+  const hasSaveHandler = onSave || onSaveProject;
+
+  const handleClose = useCallback(() => {
     const editCount = session.history.length;
     const finalCode = code;
+    const hasUnsavedChanges = editCount > 0 && finalCode !== (session.originalProject.files.get(session.activeFile)?.content ?? '');
+    
+    if (hasUnsavedChanges && hasSaveHandler) {
+      setPendingClose({ code: finalCode, count: editCount });
+      setShowConfirm(true);
+    } else {
+      setEditInput('');
+      session.clearError();
+      onClose(finalCode, editCount);
+    }
+  }, [code, session, hasSaveHandler, onClose]);
+
+  const handleSaveAndClose = useCallback(async () => {
+    if (!pendingClose || !hasSaveHandler) return;
+    setIsSaving(true);
+    setSaveError(null);
+    try {
+      if (onSaveProject) {
+        await onSaveProject(session.project);
+      } else if (onSave) {
+        await onSave(pendingClose.code);
+      }
+      setShowConfirm(false);
+      setEditInput('');
+      session.clearError();
+      onClose(pendingClose.code, pendingClose.count);
+      setPendingClose(null);
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : 'Save failed');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [pendingClose, onSave, onSaveProject, session, onClose]);
+
+  const handleDiscard = useCallback(() => {
+    if (!pendingClose) return;
+    setShowConfirm(false);
     setEditInput('');
     session.clearError();
-    onClose(finalCode, editCount);
-  };
+    onClose(pendingClose.code, pendingClose.count);
+    setPendingClose(null);
+  }, [pendingClose, session, onClose]);
+
+  const handleCancelClose = useCallback(() => {
+    setShowConfirm(false);
+    setPendingClose(null);
+    setSaveError(null);
+  }, []);
+
+  const handleDirectSave = useCallback(async () => {
+    if (!hasSaveHandler) return;
+    setIsSaving(true);
+    setSaveError(null);
+    try {
+      if (onSaveProject) {
+        await onSaveProject(session.project);
+      } else if (onSave && currentCodeRef.current) {
+        await onSave(currentCodeRef.current);
+      }
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : 'Save failed');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [onSave, onSaveProject, session.project]);
 
   if (!isOpen) return null;
 
   return (
+    <>
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-8">
       <div className="flex flex-col bg-background rounded-lg shadow-xl w-full h-full max-w-6xl max-h-[90vh] overflow-hidden">
         <div className="flex items-center gap-2 px-4 py-3 bg-background border-b-2">
@@ -109,20 +204,39 @@ export function EditModal({
                 <RotateCcw className="h-3 w-3" />
               </button>
             )}
-            <button
-              onClick={() => setShowTree(!showTree)}
-              className={`px-2 py-1 text-xs rounded flex items-center gap-1 ${showTree ? 'bg-primary text-primary-foreground' : 'hover:bg-primary/20 text-primary'}`}
-              title={showTree ? 'Single file' : 'File tree'}
-            >
-              {showTree ? <FileCode className="h-3 w-3" /> : <FolderTree className="h-3 w-3" />}
-            </button>
-            <button
-              onClick={() => setShowPreview(!showPreview)}
-              className={`px-2 py-1 text-xs rounded flex items-center gap-1 ${showPreview ? 'bg-primary text-primary-foreground' : 'hover:bg-primary/20 text-primary'}`}
-            >
-              {showPreview ? <Eye className="h-3 w-3" /> : <Code className="h-3 w-3" />}
-              {showPreview ? 'Preview' : 'Code'}
-            </button>
+            {!hideFileTree && (
+              <button
+                onClick={() => setShowTree(!showTree)}
+                className={`px-2 py-1 text-xs rounded flex items-center gap-1 ${showTree ? 'bg-primary text-primary-foreground' : 'hover:bg-primary/20 text-primary'}`}
+                title={showTree ? 'Single file' : 'File tree'}
+              >
+                {showTree ? <FileCode className="h-3 w-3" /> : <FolderTree className="h-3 w-3" />}
+              </button>
+            )}
+            {showPreviewToggle && (
+              <button
+                onClick={() => setShowPreview(!showPreview)}
+                className={`px-2 py-1 text-xs rounded flex items-center gap-1 ${showPreview ? 'bg-primary text-primary-foreground' : 'hover:bg-primary/20 text-primary'}`}
+              >
+                {showPreview ? <Eye className="h-3 w-3" /> : <Code className="h-3 w-3" />}
+                {showPreview ? 'Preview' : 'Code'}
+              </button>
+            )}
+            {hasSaveHandler && (
+              <button
+                onClick={handleDirectSave}
+                disabled={isSaving}
+                className="px-2 py-1 text-xs rounded flex items-center gap-1 hover:bg-primary/20 text-primary disabled:opacity-50"
+                title="Save changes"
+              >
+                {isSaving ? (
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                ) : (
+                  <Save className="h-3 w-3" />
+                )}
+                Save
+              </button>
+            )}
             <button
               onClick={handleClose}
               className="px-2 py-1 text-xs rounded flex items-center gap-1 bg-primary text-primary-foreground hover:bg-primary/90"
@@ -135,15 +249,16 @@ export function EditModal({
         </div>
 
         <div className="flex-1 min-h-0 border-b-2 overflow-hidden flex">
-          {showTree && (
+          {!hideFileTree && showTree && (
             <FileTree
               files={files}
               activeFile={session.activeFile}
               onSelectFile={session.setActiveFile}
+              onReplaceFile={session.replaceFile}
             />
           )}
-          <div className="flex-1 overflow-auto">
-            {showPreview ? (
+          <div className="flex-1 overflow-auto" ref={setPillContainer}>
+            {fileType.category === 'compilable' && showPreview ? (
               <div className="bg-white h-full relative" ref={setPreviewContainer}>
                 {previewError && renderError ? (
                   renderError(previewError)
@@ -164,18 +279,36 @@ export function EditModal({
                 )}
                 {!renderLoading && !renderError && !previewLoading && <Bobbin
                   container={previewContainer}
-                  pillContainer={previewContainer}
+                  pillContainer={pillContainer}
                   defaultActive={false}
                   showInspector
                   onChanges={handleBobbinChanges}
                   exclude={['.bobbin-pill', '[data-bobbin]']}
                 />}
               </div>
+            ) : fileType.category === 'compilable' && !showPreview ? (
+              <CodeBlockView
+                content={code}
+                language={fileType.language}
+                editable
+                onChange={session.updateActiveFile}
+              />
+            ) : fileType.category === 'text' ? (
+              <CodeBlockView
+                content={code}
+                language={fileType.language}
+                editable
+                onChange={session.updateActiveFile}
+              />
+            ) : fileType.category === 'media' ? (
+              <MediaPreview
+                content={code}
+                mimeType={getMimeType(session.activeFile)}
+                fileName={session.activeFile.split('/').pop() ?? session.activeFile}
+              />
             ) : (
-              <div className="p-4 bg-muted/10 h-full overflow-auto">
-                <pre className="text-xs whitespace-pre-wrap break-words m-0">
-                  <code>{code}</code>
-                </pre>
+              <div className="flex items-center justify-center h-full text-muted-foreground">
+                <p className="text-sm">Preview not available for this file type</p>
               </div>
             )}
           </div>
@@ -189,10 +322,10 @@ export function EditModal({
           className="h-48"
         />
 
-        {session.error && (
+        {(session.error || saveError) && (
           <div className="px-4 py-2 bg-destructive/10 text-destructive text-sm flex items-center gap-2 border-t-2 border-destructive">
             <AlertCircle className="h-4 w-4 shrink-0" />
-            {session.error}
+            {session.error || saveError}
           </div>
         )}
 
@@ -232,5 +365,14 @@ export function EditModal({
         </div>
       </div>
     </div>
+    <SaveConfirmDialog
+      isOpen={showConfirm}
+      isSaving={isSaving}
+      error={saveError}
+      onSave={handleSaveAndClose}
+      onDiscard={handleDiscard}
+      onCancel={handleCancelClose}
+    />
+    </>
   );
 }

package/src/components/edit/FileTree.tsx

@@ -1,6 +1,7 @@
-import { useMemo, useState } from 'react';
-import { ChevronRight, ChevronDown, File, Folder } from 'lucide-react';
+import { useMemo, useState, useRef, useCallback } from 'react';
+import { ChevronRight, ChevronDown, File, Folder, Upload } from 'lucide-react';
 import type { VirtualFile } from '@aprovan/patchwork-compiler';
+import { isMediaFile } from './fileTypes';
 
 interface TreeNode {
   name: string;
@@ -47,11 +48,34 @@ interface TreeNodeComponentProps {
   node: TreeNode;
   activeFile: string;
   onSelect: (path: string) => void;
+  onReplaceFile?: (path: string, content: string, encoding: 'utf8' | 'base64') => void;
   depth?: number;
 }
 
-function TreeNodeComponent({ node, activeFile, onSelect, depth = 0 }: TreeNodeComponentProps) {
+function TreeNodeComponent({ node, activeFile, onSelect, onReplaceFile, depth = 0 }: TreeNodeComponentProps) {
   const [expanded, setExpanded] = useState(true);
+  const [isHovered, setIsHovered] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleUploadClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !onReplaceFile) return;
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result as string;
+      const base64 = result.split(',')[1] ?? '';
+      onReplaceFile(node.path, base64, 'base64');
+    };
+    reader.readAsDataURL(file);
+
+    e.target.value = '';
+  }, [node.path, onReplaceFile]);
 
   if (!node.name) {
     return (
@@ -62,6 +86,7 @@ function TreeNodeComponent({ node, activeFile, onSelect, depth = 0 }: TreeNodeCo
             node={child}
             activeFile={activeFile}
             onSelect={onSelect}
+            onReplaceFile={onReplaceFile}
             depth={depth}
           />
         ))}
@@ -70,6 +95,8 @@ function TreeNodeComponent({ node, activeFile, onSelect, depth = 0 }: TreeNodeCo
   }
 
   const isActive = node.path === activeFile;
+  const isMedia = !node.isDir && isMediaFile(node.path);
+  const showUpload = isMedia && isHovered && onReplaceFile;
 
   if (node.isDir) {
     return (
@@ -95,6 +122,7 @@ function TreeNodeComponent({ node, activeFile, onSelect, depth = 0 }: TreeNodeCo
                 node={child}
                 activeFile={activeFile}
                 onSelect={onSelect}
+                onReplaceFile={onReplaceFile}
                 depth={depth + 1}
               />
             ))}
@@ -105,16 +133,40 @@ function TreeNodeComponent({ node, activeFile, onSelect, depth = 0 }: TreeNodeCo
   }
 
   return (
-    <button
-      onClick={() => onSelect(node.path)}
-      className={`flex items-center gap-1 w-full px-2 py-1 text-left text-sm hover:bg-muted/50 rounded ${
-        isActive ? 'bg-primary/10 text-primary' : ''
-      }`}
-      style={{ paddingLeft: `${depth * 12 + 20}px` }}
+    <div
+      className="relative"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      <File className="h-3 w-3 shrink-0 text-muted-foreground" />
-      <span className="truncate">{node.name}</span>
-    </button>
+      <button
+        onClick={() => onSelect(node.path)}
+        className={`flex items-center gap-1 w-full px-2 py-1 text-left text-sm hover:bg-muted/50 rounded ${
+          isActive ? 'bg-primary/10 text-primary' : ''
+        }`}
+        style={{ paddingLeft: `${depth * 12 + 20}px` }}
+      >
+        <File className="h-3 w-3 shrink-0 text-muted-foreground" />
+        <span className="truncate flex-1">{node.name}</span>
+        {showUpload && (
+          <span
+            onClick={handleUploadClick}
+            className="p-1 hover:bg-primary/20 rounded cursor-pointer"
+            title="Replace file"
+          >
+            <Upload className="h-3 w-3 text-primary" />
+          </span>
+        )}
+      </button>
+      {isMedia && (
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="hidden"
+          accept="image/*,video/*"
+          onChange={handleFileChange}
+        />
+      )}
+    </div>
   );
 }
 
@@ -122,9 +174,10 @@ export interface FileTreeProps {
   files: VirtualFile[];
   activeFile: string;
   onSelectFile: (path: string) => void;
+  onReplaceFile?: (path: string, content: string, encoding: 'utf8' | 'base64') => void;
 }
 
-export function FileTree({ files, activeFile, onSelectFile }: FileTreeProps) {
+export function FileTree({ files, activeFile, onSelectFile, onReplaceFile }: FileTreeProps) {
   const tree = useMemo(() => buildTree(files), [files]);
 
   return (
@@ -137,6 +190,7 @@ export function FileTree({ files, activeFile, onSelectFile }: FileTreeProps) {
           node={tree}
           activeFile={activeFile}
           onSelect={onSelectFile}
+          onReplaceFile={onReplaceFile}
         />
       </div>
     </div>

package/src/components/edit/MediaPreview.tsx

@@ -0,0 +1,124 @@
+import { useState, useEffect } from 'react';
+import { FileImage, FileVideo, AlertCircle } from 'lucide-react';
+import { isImageFile, isVideoFile } from './fileTypes';
+
+export interface MediaPreviewProps {
+  content: string;
+  mimeType: string;
+  fileName: string;
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function isUrl(content: string): boolean {
+  // Check if content is a URL (absolute or relative path)
+  return content.startsWith('/') ||
+    content.startsWith('http://') ||
+    content.startsWith('https://') ||
+    content.startsWith('./') ||
+    content.startsWith('../');
+}
+
+function getDataUrl(content: string, mimeType: string): string {
+  // If already a data URL, return as-is
+  if (content.startsWith('data:')) {
+    return content;
+  }
+  // If content is a URL path, return it directly (browser can fetch it)
+  if (isUrl(content)) {
+    return content;
+  }
+  // Otherwise, treat as raw base64 data and construct a data URL
+  return `data:${mimeType};base64,${content}`;
+}
+
+export function MediaPreview({ content, mimeType, fileName }: MediaPreviewProps) {
+  const [dimensions, setDimensions] = useState<{ width: number; height: number } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const dataUrl = getDataUrl(content, mimeType);
+  const isImage = isImageFile(fileName);
+  const isVideo = isVideoFile(fileName);
+  // For URLs, we can't estimate file size from the string
+  const isUrlContent = isUrl(content);
+  const estimatedBytes = isUrlContent
+    ? null
+    : content.startsWith('data:')
+      ? Math.floor((content.split(',')[1]?.length ?? 0) * 0.75)
+      : Math.floor(content.length * 0.75);
+
+  useEffect(() => {
+    setDimensions(null);
+    setError(null);
+
+    if (isImage) {
+      const img = new Image();
+      img.onload = () => {
+        setDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+      };
+      img.onerror = () => {
+        setError('Failed to load image');
+      };
+      img.src = dataUrl;
+    }
+  }, [dataUrl, isImage]);
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-8 text-muted-foreground">
+        <AlertCircle className="h-12 w-12 mb-4 text-destructive" />
+        <p className="text-sm">{error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-8 bg-muted/20">
+      <div className="flex-1 flex items-center justify-center w-full max-h-[60vh] overflow-hidden">
+        {isImage && (
+          <img
+            src={dataUrl}
+            alt={fileName}
+            className="max-w-full max-h-full object-contain rounded shadow-sm"
+            style={{ maxHeight: 'calc(60vh - 2rem)' }}
+          />
+        )}
+        {isVideo && (
+          <video
+            src={dataUrl}
+            controls
+            className="max-w-full max-h-full rounded shadow-sm"
+            style={{ maxHeight: 'calc(60vh - 2rem)' }}
+          >
+            Your browser does not support video playback.
+          </video>
+        )}
+        {!isImage && !isVideo && (
+          <div className="flex flex-col items-center text-muted-foreground">
+            <FileImage className="h-16 w-16 mb-4" />
+            <p className="text-sm">Preview not available for this file type</p>
+          </div>
+        )}
+      </div>
+
+      <div className="mt-6 text-center text-sm text-muted-foreground space-y-1">
+        <div className="flex items-center justify-center gap-2">
+          {isImage && <FileImage className="h-4 w-4" />}
+          {isVideo && <FileVideo className="h-4 w-4" />}
+          <span className="font-medium">{fileName}</span>
+        </div>
+        <div className="text-xs space-x-3">
+          {dimensions && (
+            <span>{dimensions.width} × {dimensions.height} px</span>
+          )}
+          {estimatedBytes !== null && <span>{formatFileSize(estimatedBytes)}</span>}
+          <span className="text-muted-foreground/60">{mimeType}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/edit/SaveConfirmDialog.tsx

@@ -0,0 +1,60 @@
+export interface SaveConfirmDialogProps {
+  isOpen: boolean;
+  isSaving: boolean;
+  error: string | null;
+  onSave: () => void;
+  onDiscard: () => void;
+  onCancel: () => void;
+}
+
+export function SaveConfirmDialog({
+  isOpen,
+  isSaving,
+  error,
+  onSave,
+  onDiscard,
+  onCancel,
+}: SaveConfirmDialogProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/80">
+      <div className="bg-background border rounded-lg shadow-lg w-full max-w-md">
+        <div className="p-6">
+          <h2 className="text-lg font-semibold leading-none tracking-tight">
+            Unsaved Changes
+          </h2>
+          <p className="text-sm text-muted-foreground mt-2">
+            You have unsaved changes. Would you like to save them before closing?
+          </p>
+          {error && (
+            <p className="text-sm text-destructive mt-3">Save failed: {error}</p>
+          )}
+        </div>
+        <div className="flex justify-end gap-2 p-6 pt-0">
+          <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"
+          >
+            Cancel
+          </button>
+          <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"
+          >
+            Discard
+          </button>
+          <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"
+          >
+            {isSaving ? 'Saving...' : 'Save'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}