create-stylus-ide 1.0.0

package/frontend/components/editor/MonacoEditor.tsx

@@ -0,0 +1,306 @@
+'use client';
+
+import Editor, { Monaco } from '@monaco-editor/react';
+import { useEffect, useRef, useState } from 'react';
+import type { editor, languages, IDisposable } from 'monaco-editor';
+import { AICompletionPopup } from '../ai/AICompletionPopup';
+import { useAICompletion } from '@/hooks/useAICompletion';
+
+interface MonacoEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSave?: () => void;
+  readOnly?: boolean;
+  errors?: Array<{ line: number; column: number; message: string }>;
+  language?: string;
+}
+
+export function MonacoEditor({
+  value,
+  onChange,
+  onSave,
+  readOnly = false,
+  errors = [],
+  language = 'rust',
+}: MonacoEditorProps) {
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const monacoRef = useRef<Monaco | null>(null);
+
+  const [showCompletion, setShowCompletion] = useState(false);
+  const [completionPosition, setCompletionPosition] = useState({ top: 0, left: 0 });
+
+  const { isLoading, completion, generateCompletion, clearCompletion } = useAICompletion();
+
+  // ✅ SSR-safe minimap enablement
+  const [minimapEnabled, setMinimapEnabled] = useState(false);
+
+  // (optional but nice) avoid provider leaks / duplicates across unmounts
+  const completionProviderDisposableRef = useRef<IDisposable | null>(null);
+
+  useEffect(() => {
+    const update = () => setMinimapEnabled(window.innerWidth > 768);
+    update();
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, []);
+
+  // keep minimap synced after mount + on resize changes
+  useEffect(() => {
+    editorRef.current?.updateOptions({ minimap: { enabled: minimapEnabled } });
+  }, [minimapEnabled]);
+
+  // cleanup any registered provider on unmount (prevents StrictMode duplicates)
+  useEffect(() => {
+    return () => {
+      completionProviderDisposableRef.current?.dispose?.();
+      completionProviderDisposableRef.current = null;
+    };
+  }, []);
+
+  // Apply error markers when errors change
+  useEffect(() => {
+    const monaco = monacoRef.current;
+    const ed = editorRef.current;
+    if (!monaco || !ed) return;
+
+    const model = ed.getModel();
+    if (!model) return;
+
+    const owner = 'stylus-errors';
+    monaco.editor.setModelMarkers(model, owner, []);
+
+    if (errors.length > 0) {
+      const markers: editor.IMarkerData[] = errors.map((error) => ({
+        severity: monaco.MarkerSeverity.Error,
+        startLineNumber: error.line,
+        startColumn: error.column,
+        endLineNumber: error.line,
+        endColumn: Math.max(error.column + 1, error.column + 10),
+        message: error.message,
+        source: language,
+      }));
+
+      monaco.editor.setModelMarkers(model, owner, markers);
+    }
+  }, [errors, language]);
+
+  // Handle keyboard shortcuts for completion
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Escape to close
+      if (e.key === 'Escape' && showCompletion) {
+        setShowCompletion(false);
+        clearCompletion();
+      }
+
+      // Tab to accept
+      if (e.key === 'Tab' && showCompletion && completion) {
+        e.preventDefault();
+        handleAcceptCompletion(completion);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [showCompletion, completion, clearCompletion]);
+
+  function handleEditorDidMount(ed: editor.IStandaloneCodeEditor, monaco: Monaco) {
+    editorRef.current = ed;
+    monacoRef.current = monaco;
+
+    // ✅ ensure minimap is correct immediately after mount
+    ed.updateOptions({ minimap: { enabled: minimapEnabled } });
+
+    // Register Stylus-specific snippets (and avoid duplicates)
+    if (!completionProviderDisposableRef.current) {
+      const provider: languages.CompletionItemProvider = {
+        provideCompletionItems: (model, position) => {
+          const word = model.getWordUntilPosition(position);
+          const range = {
+            startLineNumber: position.lineNumber,
+            endLineNumber: position.lineNumber,
+            startColumn: word.startColumn,
+            endColumn: word.endColumn,
+          };
+
+          const suggestions: languages.CompletionItem[] = [
+            {
+              label: 'sol_storage',
+              kind: monaco.languages.CompletionItemKind.Snippet,
+              insertText: [
+                'sol_storage! {',
+                '    #[entrypoint]',
+                '    pub struct ${1:ContractName} {',
+                '        ${2:// Add storage variables}',
+                '    }',
+                '}',
+              ].join('\n'),
+              insertTextRules:
+                monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+              documentation: 'Stylus storage macro',
+              range,
+            },
+            {
+              label: '#[public]',
+              kind: monaco.languages.CompletionItemKind.Snippet,
+              insertText: [
+                '#[public]',
+                'impl ${1:ContractName} {',
+                '    pub fn ${2:function_name}(&self) -> ${3:ReturnType} {',
+                '        ${4:// Implementation}',
+                '    }',
+                '}',
+              ].join('\n'),
+              insertTextRules:
+                monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+              documentation: 'Stylus public implementation',
+              range,
+            },
+          ];
+
+          return { suggestions };
+        },
+      };
+
+      completionProviderDisposableRef.current =
+        monaco.languages.registerCompletionItemProvider('rust', provider);
+    }
+
+    // AI Completion - Ctrl/Cmd + K
+    ed.addAction({
+      id: 'ai-complete',
+      label: 'AI Complete',
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK],
+      run: () => {
+        handleAIComplete();
+      },
+    });
+
+    // Compile - Ctrl/Cmd + S
+    ed.addAction({
+      id: 'compile-contract',
+      label: 'Compile Contract',
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+      run: () => onSave?.(),
+    });
+
+    ed.focus();
+  }
+
+  function handleEditorChange(newValue: string | undefined) {
+    onChange(newValue || '');
+  }
+
+  async function handleAIComplete() {
+    if (!editorRef.current) return;
+
+    const position = editorRef.current.getPosition();
+    if (!position) return;
+
+    const model = editorRef.current.getModel();
+    if (!model) return;
+
+    // Get current line text
+    const lineContent = model.getLineContent(position.lineNumber);
+    const currentLineText = lineContent.substring(0, position.column - 1);
+
+    // Get context (previous 20 lines)
+    const startLine = Math.max(1, position.lineNumber - 20);
+    const contextRange = {
+      startLineNumber: startLine,
+      startColumn: 1,
+      endLineNumber: position.lineNumber,
+      endColumn: position.column,
+    };
+    const context = model.getValueInRange(contextRange);
+
+    // Calculate popup position
+    const coords = editorRef.current.getScrolledVisiblePosition(position);
+    if (coords) {
+      const editorDom = editorRef.current.getDomNode();
+      if (editorDom) {
+        const rect = editorDom.getBoundingClientRect();
+        setCompletionPosition({
+          top: rect.top + coords.top + coords.height + 5,
+          left: rect.left + coords.left,
+        });
+      }
+    }
+
+    setShowCompletion(true);
+    await generateCompletion(currentLineText, context);
+  }
+
+  function handleAcceptCompletion(completionText: string) {
+    if (!editorRef.current) return;
+
+    const position = editorRef.current.getPosition();
+    if (!position) return;
+
+    // Insert completion at current position
+    const range = {
+      startLineNumber: position.lineNumber,
+      startColumn: position.column,
+      endLineNumber: position.lineNumber,
+      endColumn: position.column,
+    };
+
+    editorRef.current.executeEdits('ai-completion', [
+      {
+        range,
+        text: completionText,
+        forceMoveMarkers: true,
+      },
+    ]);
+
+    setShowCompletion(false);
+    clearCompletion();
+    editorRef.current.focus();
+  }
+
+  function handleRejectCompletion() {
+    setShowCompletion(false);
+    clearCompletion();
+    editorRef.current?.focus();
+  }
+
+  return (
+    <>
+      <Editor
+        height="100%"
+        defaultLanguage={language}
+        language={language}
+        value={value}
+        onChange={handleEditorChange}
+        onMount={handleEditorDidMount}
+        theme="vs-dark"
+        options={{
+          readOnly,
+          fontSize: 14,
+          fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+          minimap: { enabled: minimapEnabled }, // ✅ no window here
+          scrollBeyondLastLine: false,
+          automaticLayout: true,
+          tabSize: 4,
+          formatOnPaste: true,
+          formatOnType: true,
+          rulers: [80, 100],
+          wordWrap: 'on',
+          lineNumbers: 'on',
+          glyphMargin: true,
+          folding: true,
+          bracketPairColorization: { enabled: true },
+        }}
+      />
+
+      <AICompletionPopup
+        visible={showCompletion}
+        position={completionPosition}
+        onAccept={handleAcceptCompletion}
+        onReject={handleRejectCompletion}
+        isLoading={isLoading}
+        completion={completion}
+      />
+    </>
+  );
+}

package/frontend/components/file-tree/ContextMenu.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useEffect, useCallback } from 'react';
+import { FileNode } from '@/types/project';
+import {
+  ContextMenu as ContextMenuPrimitive,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from '@/components/ui/context-menu';
+import {
+  FilePlus,
+  FolderPlus,
+  Pencil,
+  Copy,
+  Trash2,
+} from 'lucide-react';
+
+interface ContextMenuProps {
+  node: FileNode | null;
+  onNewFile: (parentPath?: string) => void;
+  onNewFolder: (parentPath?: string) => void;
+  onRename: (path: string) => void;
+  onDuplicate: (path: string) => void;
+  onDelete: (path: string, isFolder: boolean) => void;
+  children: React.ReactNode;
+}
+
+export function FileTreeContextMenu({
+  node,
+  onNewFile,
+  onNewFolder,
+  onRename,
+  onDuplicate,
+  onDelete,
+  children,
+}: ContextMenuProps) {
+  const isFolder = node?.type === 'folder';
+  const isFile = node?.type === 'file';
+
+  return (
+    <ContextMenuPrimitive>
+      <ContextMenuTrigger asChild>
+        {children}
+      </ContextMenuTrigger>
+      
+      <ContextMenuContent className="w-56">
+        {/* New File/Folder - Available for folders and empty space */}
+        {(isFolder || !node) && (
+          <>
+            <ContextMenuItem
+              onClick={() => onNewFile(node?.path)}
+              className="cursor-pointer"
+            >
+              <FilePlus className="h-4 w-4 mr-2" />
+              New File
+            </ContextMenuItem>
+            
+            <ContextMenuItem
+              onClick={() => onNewFolder(node?.path)}
+              className="cursor-pointer"
+            >
+              <FolderPlus className="h-4 w-4 mr-2" />
+              New Folder
+            </ContextMenuItem>
+            
+            {node && <ContextMenuSeparator />}
+          </>
+        )}
+
+        {/* File-specific actions */}
+        {isFile && (
+          <>
+            <ContextMenuItem
+              onClick={() => onDuplicate(node.path)}
+              className="cursor-pointer"
+            >
+              <Copy className="h-4 w-4 mr-2" />
+              Duplicate
+            </ContextMenuItem>
+            
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        {/* Rename & Delete - Available for both files and folders */}
+        {node && (
+          <>
+            <ContextMenuItem
+              onClick={() => onRename(node.path)}
+              className="cursor-pointer"
+            >
+              <Pencil className="h-4 w-4 mr-2" />
+              Rename
+            </ContextMenuItem>
+            
+            <ContextMenuItem
+              onClick={() => onDelete(node.path, isFolder)}
+              className="cursor-pointer text-red-600 focus:text-red-600"
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete
+            </ContextMenuItem>
+          </>
+        )}
+      </ContextMenuContent>
+    </ContextMenuPrimitive>
+  );
+}

package/frontend/components/file-tree/DeleteConfirmDialog.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+interface DeleteConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  itemName: string;
+  isFolder: boolean;
+  onConfirm: () => void;
+}
+
+export function DeleteConfirmDialog({
+  open,
+  onOpenChange,
+  itemName,
+  isFolder,
+  onConfirm,
+}: DeleteConfirmDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Delete {isFolder ? 'Folder' : 'File'}?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete <strong>{itemName}</strong>?
+            {isFolder && (
+              <span className="block mt-2 text-red-600">
+                This will delete all files inside this folder.
+              </span>
+            )}
+            <span className="block mt-2">
+              This action cannot be undone.
+            </span>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            className="bg-red-600 hover:bg-red-700 focus:ring-red-600"
+          >
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/frontend/components/file-tree/FileInputDialog.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+interface FileInputDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  defaultValue?: string;
+  placeholder?: string;
+  onConfirm: (value: string) => void;
+}
+
+export function FileInputDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  defaultValue = '',
+  placeholder = '',
+  onConfirm,
+}: FileInputDialogProps) {
+  const [value, setValue] = useState(defaultValue);
+
+  // Reset value when dialog opens
+  useEffect(() => {
+    if (open) {
+      setValue(defaultValue);
+    }
+  }, [open, defaultValue]);
+
+  const handleConfirm = () => {
+    if (value.trim()) {
+      onConfirm(value.trim());
+      onOpenChange(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleConfirm();
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-106.25">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={placeholder}
+              autoFocus
+            />
+          </div>
+        </div>
+        
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            disabled={!value.trim()}
+          >
+            Confirm
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/components/file-tree/FileNode.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { FileNode as FileNodeType } from '@/types/project';
+import { FileCode, FileText, File } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface FileNodeProps {
+  node: FileNodeType;
+  isActive: boolean;
+  onClick: () => void;
+  onContextMenu: () => void;  // Keep this prop
+  depth: number;
+}
+
+export function FileNode({
+  node,
+  isActive,
+  onClick,
+  onContextMenu,
+  depth,
+}: FileNodeProps) {
+  const paddingLeft = depth * 12 + 8;
+
+  const getFileIcon = () => {
+    const name = node.name.toLowerCase();
+    
+    if (name.endsWith('.rs')) {
+      return <FileCode className="h-4 w-4 text-orange-500" />;
+    }
+    
+    if (name.endsWith('.toml')) {
+      return <FileText className="h-4 w-4 text-blue-500" />;
+    }
+    
+    if (name.endsWith('.md')) {
+      return <FileText className="h-4 w-4 text-gray-500" />;
+    }
+    
+    return <File className="h-4 w-4 text-gray-400" />;
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer text-sm',
+        'hover:bg-accent transition-colors select-none',
+        isActive && 'bg-accent text-accent-foreground font-medium'
+      )}
+      style={{ paddingLeft: `${paddingLeft}px` }}
+      onClick={onClick}
+      onContextMenu={(e) => {
+        e.stopPropagation();
+        onContextMenu();
+      }}
+    >
+      {getFileIcon()}
+      <span className="truncate">{node.name}</span>
+    </div>
+  );
+}