Mats-Dodd typyst-electron .cursorrules file for TypeScript

Project Overview:
Typyst is a modern, desktop-based text editor application built using Electron and React, focusing on providing advanced writing assistance and suggestions. The application features a clean, modular architecture with clear separation of concerns between the main process and renderer components.

Technical Stack:
- Frontend: React with TypeScript
- Desktop Runtime: Electron
- Editor Framework: TipTap (ProseMirror-based rich text editor)
- Build Tools: Vite
- Writing Assistant: Vale
- AI Integration: LLama
- State Management: React Hooks
- Styling: CSS Modules

Architecture:
1. /electron
   - Main Process Architecture:
     * index.ts: Main entry point
       - Window management and lifecycle
       - Custom frameless window with macOS integration
       - Development tools configuration
       - App event handling (window creation, quit, activate)
     
     * preload.ts: Electron-Renderer Bridge
       - Secure IPC communication setup
       - Exposes safe APIs to renderer process
       - Type-safe bridge interfaces
       - File system operations bridge
       - Vale integration bridge

   - RPC (Remote Procedure Call) System:
     * fileSystemRpc.ts: File operations handler
       - Markdown file processing
       - File system access
       - Content conversion utilities
     * llmRpc.ts: LLama model integration
       - AI-powered suggestions
       - Context-aware completions
     * Bidirectional communication using birpc

   - Services:
     * vale/: Writing assistance service
       - Style checking integration
       - Real-time linting
       - Custom rule management
     * autocomplete/: Text completion service
       - AI-powered suggestions
       - Context-aware completions
       - Prediction management

2. /src
   - Application Architecture:
     * index.tsx: Application Entry Point
       - React initialization
       - Root component mounting
       - IPC bridge setup
       - Global style injection
     
     * /app: Core Application Setup
       - App.tsx: Root component
       - Application-wide providers
       - Global state management
       - Layout structure

   - Feature-based Organization:
     * /features: Core Application Features
       - editor/: Main Editor Implementation
         * components/: React Components
           - Editor.tsx: Main editor wrapper
             * Theme provider integration
             * Global layout management
           - EditorContent.tsx: Core editor functionality
             * TipTap integration
             * Content management
             * Feature coordination
           - FileSelector.tsx: File handling
             * Markdown file processing
             * File input management
           - MenuBar.tsx: Toolbar and controls
           - ValeSidebar.tsx: Writing suggestions panel
           - ErrorOverlay.tsx: Error display
           - RawContentPreview.tsx: Debug view
         * hooks/: Custom React Hooks
           - useEditorCore.ts: Core editor state and operations
           - useValeState.ts: Writing suggestions management
           - useEditorShortcuts.ts: Keyboard interactions
           - useEditorSpellcheck.ts: Spellcheck integration
         * services/: Feature-specific Logic
           - fileSystemService.ts: File operations
           - valeService.ts: Vale integration
           - eventHandlers.ts: Editor event management
         * types/: Feature-specific Types
         * constants/: Feature Configuration

       - theme/: Theming System
         * themeContext.tsx: Theme provider
         * themes/: Theme definitions
         * hooks/: Theme utilities

   - Editor Extensions:
     * /extensions: TipTap Extensions
       - extensions.ts: Extension configuration
       - indent/: Indentation handling
       - predictions/: AI suggestions
       - Custom ProseMirror plugins

   - Shared Resources:
     * /types: Global TypeScript Definitions
       - Global type declarations
       - API interfaces
       - Shared type utilities
     
     * /services: Shared Business Logic
       - Authentication
       - State management
       - Shared utilities
     
     * /styles: Global Styling
       - index.css: Global styles
       - Editor.css: Editor-specific styles
       - MenuBar.css: Toolbar styles
       - Theme variables

Key Features:
1. Rich Text Editing
   - TipTap/ProseMirror foundation
   - Advanced text formatting
   - Code block highlighting
   - Custom extensions
   - Real-time content updates

2. Writing Assistance
   - Vale integration for style checking
   - Real-time writing suggestions
   - Customizable rules and style guides
   - Interactive suggestion sidebar
   - Warning/error management
   - Ignorable warnings system

3. File Management
   - Markdown file support
   - File selection interface
   - Content conversion utilities
   - Error handling

4. Theme Support
   - Theme system
   - Customizable styling
   - Dark/light mode support

5. Advanced Editor Features
   - Keyboard shortcuts
   - Spellchecking
   - Raw content preview
   - Error handling
   - Sidebar management

Core Components:
1. Editor Component
   - Modular architecture:
     * Editor.tsx: Theme and layout wrapper
     * EditorContent.tsx: Core functionality
     * FileSelector.tsx: File handling
   - Feature integration through hooks:
     * useEditorCore
     * useValeState
     * useEditorShortcuts
     * useEditorSpellcheck

2. MenuBar
   - Editing tools and controls
   - Feature toggles
   - Raw output toggle

3. ValeSidebar
   - Writing suggestions display
   - Warning/error management
   - Interactive feedback
   - Ignorable warnings system

Technical Features:
1. RPC System
   - birpc for Electron-React communication
   - Structured service architecture
   - Type-safe interfaces

2. AI Integration
   - LLama model integration
   - AI-powered writing assistance
   - Context-aware suggestions

3. Extension System
   - Modular editor extensions
   - Custom TipTap extensions
   - ProseMirror plugins

Development:
- Modern development tooling
- TypeScript for type safety
- Linting and formatting
- Automated setup scripts
- Cross-platform support
- Modular component architecture
- Hook-based state management