changed latex

app/api/data/route.ts

@@ -120,6 +120,50 @@ export async function POST(request: NextRequest) {
 
                 await writeFile(filePath, content, 'utf-8')
 
+                // Auto-convert .tex files to PDF
+                if (fileName.endsWith('.tex')) {
+                    console.log('Detected .tex file, auto-converting to PDF...')
+                    try {
+                        // Compile LaTeX to PDF using LaTeX.Online
+                        const compileResponse = await fetch('https://latexonline.cc/compile', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'text/plain',
+                            },
+                            body: content
+                        })
+
+                        if (compileResponse.ok) {
+                            const pdfBuffer = await compileResponse.arrayBuffer()
+                            const pdfFileName = fileName.replace('.tex', '.pdf')
+                            const pdfFilePath = path.join(targetDir, pdfFileName)
+                            
+                            await writeFile(pdfFilePath, Buffer.from(pdfBuffer))
+                            console.log(`PDF generated successfully: ${pdfFilePath}`)
+                            
+                            return NextResponse.json({ 
+                                success: true, 
+                                pdfGenerated: true,
+                                pdfFileName: pdfFileName
+                            })
+                        } else {
+                            console.error('PDF compilation failed:', await compileResponse.text())
+                            return NextResponse.json({ 
+                                success: true, 
+                                pdfGenerated: false,
+                                error: 'LaTeX file saved but PDF generation failed'
+                            })
+                        }
+                    } catch (pdfError) {
+                        console.error('Error generating PDF:', pdfError)
+                        return NextResponse.json({ 
+                            success: true, 
+                            pdfGenerated: false,
+                            error: 'LaTeX file saved but PDF generation failed'
+                        })
+                    }
+                }
+
                 return NextResponse.json({ success: true })
             }
 

app/api/latex/compile/route.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from 'next/server'
 
 export async function POST(request: NextRequest) {
   try {
-    const { latex, sessionId } = await request.json()
+    const { latex, filename } = await request.json()
 
     if (!latex) {
       return NextResponse.json(
@@ -11,25 +11,48 @@ export async function POST(request: NextRequest) {
       )
     }
 
-    // Note: In a production environment, you would:
-    // 1. Use a LaTeX compiler service (like LaTeX online compiler API)
-    // 2. Or install and use pdflatex locally with child_process
-    // 3. Or use a Docker container with LaTeX installed
+    console.log('Compiling LaTeX to PDF using LaTeX.Online...')
 
-    // For now, we'll provide the LaTeX source as a downloadable .tex file
-    // since PDF compilation requires external LaTeX installation
+    // Use LaTeX.Online free API to compile LaTeX to PDF
+    const compileResponse = await fetch('https://latexonline.cc/compile', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'text/plain',
+      },
+      body: latex
+    })
 
-    // Return the LaTeX content as a downloadable file
-    const response = new NextResponse(latex)
-    response.headers.set('Content-Type', 'text/plain')
-    response.headers.set('Content-Disposition', 'attachment; filename="document.tex"')
+    if (!compileResponse.ok) {
+      const errorText = await compileResponse.text()
+      console.error('LaTeX compilation failed:', errorText)
+      return NextResponse.json(
+        { 
+          error: 'LaTeX compilation failed',
+          details: errorText 
+        },
+        { status: 500 }
+      )
+    }
+
+    // Get the PDF buffer
+    const pdfBuffer = await compileResponse.arrayBuffer()
+    
+    console.log('LaTeX compiled successfully, PDF size:', pdfBuffer.byteLength, 'bytes')
+
+    // Return the PDF
+    const response = new NextResponse(Buffer.from(pdfBuffer))
+    response.headers.set('Content-Type', 'application/pdf')
+    response.headers.set('Content-Disposition', `attachment; filename="${filename || 'document.pdf'}"`)
 
     return response
 
   } catch (error) {
     console.error('Error compiling LaTeX:', error)
     return NextResponse.json(
-      { error: 'Failed to compile LaTeX' },
+      { 
+        error: 'Failed to compile LaTeX',
+        details: error instanceof Error ? error.message : String(error)
+      },
       { status: 500 }
     )
   }

app/components/Desktop.tsx

@@ -20,9 +20,6 @@ import { ContextMenu } from './ContextMenu'
 import { AboutModal } from './AboutModal'
 
 import { FlutterRunner } from './FlutterRunner'
-
-
-import { LaTeXEditor } from './LaTeXEditor'
 import { QuizApp } from './QuizApp'
 import { motion, AnimatePresence } from 'framer-motion'
 import { SystemPowerOverlay } from './SystemPowerOverlay'
@@ -68,8 +65,6 @@ export function Desktop() {
   const [activeFlutterApp, setActiveFlutterApp] = useState<any>(null)
 
   const [flutterCodeEditorOpen, setFlutterCodeEditorOpen] = useState(false)
-  const [latexEditorOpen, setLaTeXEditorOpen] = useState(false)
-  const [activeLaTeXApp, setActiveLaTeXApp] = useState<any>(null)
   const [quizAppOpen, setQuizAppOpen] = useState(false)
 
   // Minimized states
@@ -84,7 +79,6 @@ export function Desktop() {
   const [flutterRunnerMinimized, setFlutterRunnerMinimized] = useState(false)
 
   const [flutterCodeEditorMinimized, setFlutterCodeEditorMinimized] = useState(false)
-  const [latexEditorMinimized, setLaTeXEditorMinimized] = useState(false)
   const [quizAppMinimized, setQuizAppMinimized] = useState(false)
 
   const [powerState, setPowerState] = useState<'active' | 'sleep' | 'restart' | 'shutdown'>('active')
@@ -111,7 +105,6 @@ export function Desktop() {
     setFlutterRunnerOpen(false)
 
     setFlutterCodeEditorOpen(false)
-    setLaTeXEditorOpen(false)
     setQuizAppOpen(false)
 
     // Reset all minimized states
@@ -123,7 +116,6 @@ export function Desktop() {
     setFlutterRunnerMinimized(false)
 
     setFlutterCodeEditorMinimized(false)
-    setLaTeXEditorMinimized(false)
     setQuizAppMinimized(false)
 
     // Reset window z-indices
@@ -228,25 +220,6 @@ export function Desktop() {
     setFlutterCodeEditorMinimized(false)
   }
 
-  const openLaTeXEditor = () => {
-    // Check if there's file content stored from File Manager
-    const storedContent = sessionStorage.getItem('latexFileContent')
-    if (storedContent) {
-      setActiveLaTeXApp({ content: storedContent })
-      sessionStorage.removeItem('latexFileContent') // Clean up
-    } else {
-      setActiveLaTeXApp(null)
-    }
-    setLaTeXEditorOpen(true)
-    setLaTeXEditorMinimized(false)
-    bringWindowToFront('latexEditor')
-  }
-
-  const closeLaTeXEditor = () => {
-    setLaTeXEditorOpen(false)
-    setLaTeXEditorMinimized(false)
-  }
-
   const openQuizApp = () => {
     setQuizAppOpen(true)
     setQuizAppMinimized(false)
@@ -281,9 +254,6 @@ export function Desktop() {
       case 'flutter-editor':
         openFlutterCodeEditor()
         break
-      case 'latex-editor':
-        openLaTeXEditor()
-        break
       case 'quiz':
         openQuizApp()
         break
@@ -518,26 +488,6 @@ export function Desktop() {
     })
   }
 
-  if (latexEditorMinimized && latexEditorOpen) {
-    minimizedApps.push({
-      id: 'latex-editor',
-      label: 'LaTeX Studio',
-      icon: (
-        <div className="bg-gradient-to-b from-slate-700 to-slate-900 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
-          <div className="absolute inset-0 bg-gradient-to-b from-white/10 to-transparent opacity-30" />
-          <div className="relative z-10 flex flex-col items-center justify-center">
-            <Function size={18} weight="bold" className="text-green-400 drop-shadow-md" />
-            <span className="text-[5px] font-black text-gray-300 tracking-widest mt-0.5">TEX</span>
-          </div>
-        </div>
-      ),
-      onRestore: () => {
-        setLaTeXEditorMinimized(false)
-        bringWindowToFront('latexEditor')
-      }
-    })
-  }
-
   if (quizAppMinimized && quizAppOpen) {
     minimizedApps.push({
       id: 'quiz',
@@ -699,17 +649,6 @@ export function Desktop() {
             />
           </div>
 
-          <div className="pointer-events-auto w-24 h-24">
-            <DraggableDesktopIcon
-              id="latex-editor"
-              label="LaTeX Studio"
-              iconType="latex"
-              initialPosition={{ x: 0, y: 0 }}
-              onClick={() => { }}
-              onDoubleClick={openLaTeXEditor}
-            />
-          </div>
-
           <div className="pointer-events-auto w-24 h-24">
             <DraggableDesktopIcon
               id="quiz"
@@ -909,35 +848,6 @@ export function Desktop() {
               </motion.div>
             )}
 
-            {latexEditorOpen && (
-              <motion.div
-                key="latex-editor"
-                initial={{ opacity: 0, scale: 0.95 }}
-                animate={{
-                  opacity: latexEditorMinimized ? 0 : 1,
-                  scale: latexEditorMinimized ? 0.9 : 1,
-                  y: latexEditorMinimized ? 100 : 0,
-                }}
-                exit={{ opacity: 0, scale: 0.95 }}
-                transition={{ duration: 0.2 }}
-                style={{
-                  pointerEvents: latexEditorMinimized ? 'none' : 'auto',
-                  display: latexEditorMinimized ? 'none' : 'block'
-                }}
-              >
-                <LaTeXEditor
-                  initialContent={activeLaTeXApp?.content}
-                  onClose={() => {
-                    setLaTeXEditorOpen(false)
-                    setActiveLaTeXApp(null)
-                  }}
-                  onMinimize={() => setLaTeXEditorMinimized(true)}
-                  onFocus={() => bringWindowToFront('latexEditor')}
-                  zIndex={windowZIndices.latexEditor || 1000}
-                />
-              </motion.div>
-            )}
-
             {quizAppOpen && (
               <motion.div
                 key="quiz-app"

app/components/FlutterRunner.tsx

@@ -28,74 +28,7 @@ interface FileNode {
   isOpen?: boolean
 }
 
-const DEFAULT_FLUTTER_CODE = `import 'package:flutter/material.dart';
-
-void main() {
-  runApp(const MyApp());
-}
-
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Flutter Demo',
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-        useMaterial3: true,
-      ),
-      home: const MyHomePage(title: 'Flutter Demo Home Page'),
-    );
-  }
-}
-
-class MyHomePage extends StatefulWidget {
-  const MyHomePage({super.key, required this.title});
-
-  final String title;
-
-  @override
-  State<MyHomePage> createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      _counter++;
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(widget.title),
-      ),
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            const Text(
-              'You have pushed the button this many times:',
-            ),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.headlineMedium,
-            ),
-          ],
-        ),
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: const Icon(Icons.add),
-      ),
-    );
-  }
-}`
+const DEFAULT_FLUTTER_CODE = ``
 
 export function FlutterRunner({ onClose, onMinimize, onMaximize, onFocus, zIndex, initialCode }: FlutterRunnerProps) {
   const [code, setCode] = useState(initialCode || DEFAULT_FLUTTER_CODE)
@@ -371,9 +304,6 @@ export function FlutterRunner({ onClose, onMinimize, onMaximize, onFocus, zIndex
             <div className="w-24" /> {/* Spacer for centering */}
           </div>
           <div className="flex-1 bg-[#1e1e1e] relative overflow-hidden">
-            <div className="absolute top-0 left-0 right-0 bg-gray-900/95 backdrop-blur-sm px-4 py-2 z-10 border-b border-gray-700">
-              <p className="text-red-500 text-sm font-bold">Copy the code from editor to DartPad</p>
-            </div>
             <iframe
               
               src="https://dartpad.dev/embed-flutter.html?theme=dark&split=50"

app/components/LaTeXEditor.tsx

@@ -1,515 +0,0 @@
-'use client'
-
-import React, { useState, useEffect, useRef } from 'react'
-import Editor from '@monaco-editor/react'
-import {
-  Play,
-  Download,
-  X,
-  Minus,
-  Square,
-  SidebarSimple,
-  FileText,
-  ArrowsClockwise,
-  CaretDown,
-  FilePdf,
-  FloppyDisk,
-  Check
-} from '@phosphor-icons/react'
-import Window from './Window'
-import katex from 'katex'
-import 'katex/dist/katex.min.css'
-
-interface LaTeXEditorProps {
-  onClose: () => void
-  onMinimize?: () => void
-  onMaximize?: () => void
-  onFocus?: () => void
-  zIndex?: number
-  initialContent?: string
-}
-
-interface FileNode {
-  id: string
-  name: string
-  type: 'file' | 'folder'
-  content?: string
-  children?: FileNode[]
-  isOpen?: boolean
-}
-
-const DEFAULT_LATEX = `\\documentclass{article}
-\\usepackage{amsmath}
-\\title{My LaTeX Document}
-\\author{Reuben OS}
-\\date{\\today}
-
-\\begin{document}
-
-\\maketitle
-
-\\section{Introduction}
-Welcome to LaTeX Studio on Reuben OS.
-
-\\section{Mathematics}
-Here is an equation:
-\\[ E = mc^2 \\]
-
-\\end{document}`
-
-export function LaTeXEditor({ onClose, onMinimize, onMaximize, onFocus, zIndex, initialContent }: LaTeXEditorProps) {
-  const [code, setCode] = useState(initialContent || DEFAULT_LATEX)
-  const [showSidebar, setShowSidebar] = useState(true)
-  const [files, setFiles] = useState<FileNode[]>([])
-  const [activeFileId, setActiveFileId] = useState('main')
-  const [activeFileName, setActiveFileName] = useState('main.tex')
-  const previewRef = useRef<HTMLDivElement>(null)
-  const [lastSaved, setLastSaved] = useState<Date | null>(null)
-  const [isSaving, setIsSaving] = useState(false)
-  const [passkey, setPasskey] = useState('')
-  const [isUnlocked, setIsUnlocked] = useState(false)
-  const [tempPasskey, setTempPasskey] = useState('')
-  const [loading, setLoading] = useState(false)
-
-  // Load files from secure storage
-  const loadFiles = async (key: string) => {
-    setLoading(true)
-    try {
-      const response = await fetch(`/api/data?key=${encodeURIComponent(key)}&folder=`)
-      const data = await response.json()
-
-      if (data.error) {
-        throw new Error(data.error)
-      }
-
-      // Filter for .tex files
-      const texFiles = data.files?.filter((f: any) => f.name.endsWith('.tex')) || []
-
-      if (texFiles.length > 0) {
-        const fileNodes: FileNode[] = texFiles.map((file: any, index: number) => ({
-          id: `file_${index}`,
-          name: file.name,
-          type: 'file' as const,
-          content: file.content
-        }))
-
-        setFiles([{
-          id: 'root',
-          name: 'LaTeX Files',
-          type: 'folder',
-          isOpen: true,
-          children: fileNodes
-        }])
-
-        // Load first file
-        if (fileNodes.length > 0) {
-          setActiveFileId(fileNodes[0].id)
-          setActiveFileName(fileNodes[0].name)
-          setCode(fileNodes[0].content || DEFAULT_LATEX)
-        }
-      } else {
-        // No files found, create default
-        setFiles([{
-          id: 'root',
-          name: 'LaTeX Files',
-          type: 'folder',
-          isOpen: true,
-          children: [
-            { id: 'main', name: 'main.tex', type: 'file', content: DEFAULT_LATEX }
-          ]
-        }])
-        setCode(DEFAULT_LATEX)
-        setActiveFileName('main.tex')
-      }
-    } catch (err) {
-      console.error('Error loading files:', err)
-      // Create default on error
-      setFiles([{
-        id: 'root',
-        name: 'LaTeX Files',
-        type: 'folder',
-        isOpen: true,
-        children: [
-          { id: 'main', name: 'main.tex', type: 'file', content: DEFAULT_LATEX }
-        ]
-      }])
-      setCode(DEFAULT_LATEX)
-      setActiveFileName('main.tex')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleUnlock = async () => {
-    if (tempPasskey.trim().length >= 4) {
-      setPasskey(tempPasskey.trim())
-      setIsUnlocked(true)
-      await loadFiles(tempPasskey.trim())
-    } else {
-      alert('Passkey must be at least 4 characters')
-    }
-  }
-
-  const handleFileClick = (file: FileNode) => {
-    if (file.type === 'file') {
-      setActiveFileId(file.id)
-      setActiveFileName(file.name)
-      setCode(file.content || '')
-    }
-  }
-
-  // Update code if initialContent changes (e.g. opening a new file)
-  useEffect(() => {
-    if (initialContent) {
-      setCode(initialContent)
-      // Check if we have a passkey from session
-      const sessionPasskey = sessionStorage.getItem('currentPasskey')
-      if (sessionPasskey) {
-        setPasskey(sessionPasskey)
-        setIsUnlocked(true)
-        loadFiles(sessionPasskey)
-      }
-    }
-  }, [initialContent])
-
-  // Auto-save functionality
-  useEffect(() => {
-    if (!passkey || !isUnlocked || !activeFileName) return
-
-    const saveTimer = setTimeout(async () => {
-      setIsSaving(true)
-      try {
-        await fetch('/api/data', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            key: passkey,
-            passkey: passkey,
-            action: 'save_file',
-            fileName: activeFileName,
-            content: code
-          })
-        })
-        setLastSaved(new Date())
-      } catch (err) {
-        console.error('Auto-save failed:', err)
-      } finally {
-        setIsSaving(false)
-      }
-    }, 2000) // Debounce 2s
-
-    return () => clearTimeout(saveTimer)
-  }, [code, passkey, activeFileName, isUnlocked])
-
-  // Render LaTeX preview
-  useEffect(() => {
-    if (previewRef.current) {
-      try {
-        // Extract title, author, and date from LaTeX preamble
-        let title = 'Untitled Document'
-        let author = 'Anonymous'
-        let date = new Date().toLocaleDateString()
-
-        const titleMatch = code.match(/\\title\{([^}]+)\}/)
-        const authorMatch = code.match(/\\author\{([^}]+)\}/)
-        const dateMatch = code.match(/\\date\{([^}]+)\}/)
-
-        if (titleMatch) title = titleMatch[1]
-        if (authorMatch) author = authorMatch[1]
-        if (dateMatch) {
-          date = dateMatch[1].replace(/\\today/g, new Date().toLocaleDateString())
-        }
-
-        // Process the document content
-        let processedText = code
-          // Remove preamble
-          .replace(/\\documentclass\{[^}]+\}/g, '')
-          .replace(/\\usepackage\{[^}]+\}/g, '')
-          .replace(/\\title\{[^}]+\}/g, '')
-          .replace(/\\author\{[^}]+\}/g, '')
-          .replace(/\\date\{[^}]+\}/g, '')
-          .replace(/\\begin\{document\}/g, '')
-          .replace(/\\end\{document\}/g, '')
-
-          // Handle title
-          .replace(/\\maketitle/g, `
-            <div style="text-align: center; margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #ccc;">
-              <h1 style="font-size: 2em; margin: 0.5em 0;">${title}</h1>
-              <p style="margin: 0.3em 0; font-size: 1.1em;">${author}</p>
-              <p style="margin: 0.3em 0; color: #666;">${date}</p>
-            </div>
-          `)
-
-          // Sections and structure
-          .replace(/\\section\{([^}]+)\}/g, '<h2 style="font-size: 1.5em; margin-top: 1.5em; margin-bottom: 0.5em; font-weight: bold;">$1</h2>')
-          .replace(/\\subsection\{([^}]+)\}/g, '<h3 style="font-size: 1.2em; margin-top: 1em; margin-bottom: 0.5em; font-weight: bold;">$1</h3>')
-          .replace(/\\subsubsection\{([^}]+)\}/g, '<h4 style="font-size: 1em; margin-top: 0.8em; margin-bottom: 0.3em; font-weight: bold;">$1</h4>')
-          .replace(/\\paragraph\{([^}]+)\}/g, '<p style="font-weight: bold; margin-top: 0.5em;">$1</p>')
-
-          // Text formatting
-          .replace(/\\textbf\{([^}]+)\}/g, '<strong>$1</strong>')
-          .replace(/\\textit\{([^}]+)\}/g, '<em>$1</em>')
-          .replace(/\\underline\{([^}]+)\}/g, '<u>$1</u>')
-          .replace(/\\emph\{([^}]+)\}/g, '<em>$1</em>')
-          .replace(/\\texttt\{([^}]+)\}/g, '<code style="font-family: monospace; background: #f5f5f5; padding: 2px 4px; border-radius: 3px;">$1</code>')
-
-          // Lists
-          .replace(/\\begin\{itemize\}/g, '<ul style="margin: 0.5em 0; padding-left: 1.5em;">')
-          .replace(/\\end\{itemize\}/g, '</ul>')
-          .replace(/\\begin\{enumerate\}/g, '<ol style="margin: 0.5em 0; padding-left: 1.5em;">')
-          .replace(/\\end\{enumerate\}/g, '</ol>')
-          .replace(/\\item\s+/g, '<li style="margin: 0.3em 0;">')
-
-          // Paragraphs and line breaks
-          .replace(/\\\\/g, '<br />')
-          .replace(/\\newline/g, '<br />')
-          .replace(/\\par\b/g, '</p><p>')
-
-          // Clean up extra whitespace
-          .replace(/\n\n+/g, '</p><p style="margin: 0.5em 0;">')
-
-        // Split by math delimiters to render KaTeX (improved regex for display and inline math)
-        const parts = processedText.split(/(\\\[[\s\S]*?\\\]|\$\$[\s\S]*?\$\$|\$[^$]+\$|\\\([\s\S]*?\\\))/)
-        previewRef.current.innerHTML = ''
-
-        parts.forEach(part => {
-          if (part.startsWith('\\[') || part.startsWith('$$') || part.startsWith('$') || part.startsWith('\\(')) {
-            // Determine if it's display math or inline math
-            const isDisplayMath = part.startsWith('\\[') || part.startsWith('$$')
-
-            // Extract the math content
-            let math = part
-            if (part.startsWith('\\[') && part.endsWith('\\]')) {
-              math = part.slice(2, -2)
-            } else if (part.startsWith('$$') && part.endsWith('$$')) {
-              math = part.slice(2, -2)
-            } else if (part.startsWith('$') && part.endsWith('$')) {
-              math = part.slice(1, -1)
-            } else if (part.startsWith('\\(') && part.endsWith('\\)')) {
-              math = part.slice(2, -2)
-            }
-
-            const span = document.createElement(isDisplayMath ? 'div' : 'span')
-            if (isDisplayMath) {
-              span.style.textAlign = 'center'
-              span.style.margin = '1em 0'
-            }
-
-            try {
-              katex.render(math, span, {
-                throwOnError: false,
-                displayMode: isDisplayMath,
-                strict: false
-              })
-              previewRef.current?.appendChild(span)
-            } catch (e) {
-              // If KaTeX fails, show the raw math
-              const errorSpan = document.createElement('span')
-              errorSpan.style.color = '#cc0000'
-              errorSpan.textContent = part
-              previewRef.current?.appendChild(errorSpan)
-            }
-          } else if (part.trim()) {
-            // Only add non-empty parts
-            const div = document.createElement('div')
-            div.innerHTML = part
-            div.style.margin = '0.5em 0'
-            previewRef.current?.appendChild(div)
-          }
-        })
-      } catch (e) {
-        console.error('Render error:', e)
-      }
-    }
-  }, [code])
-
-  const handleDownload = () => {
-    const blob = new Blob([code], { type: 'text/plain' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = activeFileName || 'main.tex'
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  return (
-    <Window
-      id="latex-editor"
-      title="LaTeX Studio"
-      isOpen={true}
-      onClose={onClose}
-      onMinimize={onMinimize}
-      onMaximize={onMaximize}
-      onFocus={onFocus}
-      zIndex={zIndex}
-      width={1200}
-      height={800}
-      x={60}
-      y={60}
-      className="latex-studio-window"
-    >
-      {!isUnlocked ? (
-        <div className="flex h-full bg-[#1e1e1e] items-center justify-center">
-          <div className="bg-[#252526] p-8 rounded-lg shadow-xl border border-[#333] max-w-md w-full">
-            <h2 className="text-xl font-bold text-white mb-4">Enter Passkey</h2>
-            <p className="text-gray-400 mb-6">Enter your passkey to access LaTeX files</p>
-            <input
-              type="password"
-              value={tempPasskey}
-              onChange={(e) => setTempPasskey(e.target.value)}
-              onKeyPress={(e) => e.key === 'Enter' && handleUnlock()}
-              placeholder="Your passkey"
-              className="w-full px-4 py-2 bg-[#1e1e1e] border border-[#333] rounded text-white focus:outline-none focus:border-blue-500"
-              autoFocus
-            />
-            <button
-              onClick={handleUnlock}
-              disabled={loading}
-              className="w-full mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded font-medium disabled:opacity-50"
-            >
-              {loading ? 'Loading...' : 'Unlock'}
-            </button>
-          </div>
-        </div>
-      ) : (
-      <div className="flex h-full bg-[#1e1e1e] text-gray-300 font-sans">
-        {/* Sidebar */}
-        {showSidebar && (
-          <div className="w-64 bg-[#252526] border-r border-[#333] flex flex-col">
-            <div className="h-9 px-4 flex items-center text-xs font-bold text-gray-500 uppercase tracking-wider">
-              Explorer
-            </div>
-            <div className="flex-1 overflow-y-auto py-2">
-              <div className="px-2">
-                <div className="flex items-center gap-1 py-1 px-2 text-sm text-gray-300 hover:bg-[#2a2d2e] rounded cursor-pointer">
-                  <CaretDown size={12} weight="bold" />
-                  <span className="font-bold">PROJECT</span>
-                </div>
-                <div className="pl-4">
-                  {files.map(file => (
-                    <div key={file.id}>
-                      <div className="flex items-center gap-2 py-1 px-2 text-sm hover:bg-[#2a2d2e] rounded cursor-pointer text-blue-400">
-                        <CaretDown size={12} weight="bold" />
-                        {file.name}
-                      </div>
-                      {file.children?.map(child => (
-                        <div
-                          key={child.id}
-                          onClick={() => handleFileClick(child)}
-                          className={`flex items-center gap-2 py-1 px-2 ml-4 text-sm rounded cursor-pointer ${activeFileId === child.id ? 'bg-[#37373d] text-white' : 'text-gray-400 hover:bg-[#2a2d2e]'
-                            }`}
-                        >
-                          <FileText size={14} />
-                          {child.name}
-                        </div>
-                      ))}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Main Content */}
-        <div className="flex-1 flex flex-col min-w-0">
-          {/* Toolbar */}
-          <div className="h-10 bg-[#2d2d2d] border-b border-[#1e1e1e] flex items-center justify-between px-4">
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => setShowSidebar(!showSidebar)}
-                className={`p-1.5 rounded hover:bg-[#3e3e42] ${showSidebar ? 'text-white' : 'text-gray-500'}`}
-                title="Toggle Sidebar"
-              >
-                <SidebarSimple size={16} />
-              </button>
-              <div className="h-4 w-[1px] bg-gray-600 mx-2" />
-              <div className="flex items-center gap-2 px-3 py-1 bg-[#1e1e1e] rounded text-xs text-gray-400 border border-[#333]">
-                <FileText size={14} className="text-green-400" />
-                {activeFileName}
-              </div>
-              {lastSaved && (
-                <div className="flex items-center gap-1 text-xs text-gray-500 ml-2">
-                  {isSaving ? (
-                    <span className="text-yellow-500">Saving...</span>
-                  ) : (
-                    <>
-                      <Check size={12} className="text-green-500" />
-                      <span>Saved {lastSaved.toLocaleTimeString()}</span>
-                    </>
-                  )}
-                </div>
-              )}
-            </div>
-
-            <div className="flex items-center gap-2">
-              <button
-                className="flex items-center gap-2 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded text-xs font-medium transition-colors"
-              >
-                <Play size={14} weight="fill" />
-                Compile
-              </button>
-              <button
-                onClick={handleDownload}
-                className="p-1.5 text-gray-400 hover:text-white hover:bg-[#3e3e42] rounded transition-colors"
-                title="Download PDF"
-              >
-                <Download size={16} />
-              </button>
-            </div>
-          </div>
-
-          {/* Split View: Editor & Preview */}
-          <div className="flex-1 flex overflow-hidden">
-            {/* Editor */}
-            <div className="flex-1 border-r border-[#333]">
-              <Editor
-                height="100%"
-                defaultLanguage="latex"
-                theme="vs-dark"
-                value={code}
-                onChange={(value) => setCode(value || '')}
-                options={{
-                  minimap: { enabled: false },
-                  fontSize: 14,
-                  fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-                  lineNumbers: 'on',
-                  scrollBeyondLastLine: false,
-                  automaticLayout: true,
-                  padding: { top: 16, bottom: 16 },
-                  renderLineHighlight: 'all',
-                  smoothScrolling: true,
-                  cursorBlinking: 'smooth',
-                  cursorSmoothCaretAnimation: 'on'
-                }}
-              />
-            </div>
-
-            {/* Preview */}
-            <div className="w-[500px] bg-[#525659] flex flex-col border-l border-[#333]">
-              <div className="h-8 bg-[#323639] border-b border-[#2b2b2b] flex items-center justify-between px-3 shadow-md z-10">
-                <span className="text-xs font-bold text-gray-400 uppercase">PDF Preview</span>
-                <div className="flex items-center gap-2">
-                  <span className="text-xs text-gray-400">100%</span>
-                </div>
-              </div>
-              <div className="flex-1 overflow-y-auto p-8 flex justify-center">
-                <div
-                  className="bg-white w-full max-w-[800px] min-h-[1000px] shadow-2xl p-12 text-black font-serif"
-                  ref={previewRef}
-                  style={{
-                    boxShadow: '0 0 20px rgba(0,0,0,0.5)'
-                  }}
-                >
-                  {/* Content rendered via useEffect */}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      )}
-    </Window>
-  )
-}

package-lock.json

@@ -20,8 +20,8 @@
         "framer-motion": "^12.23.24",
         "highlight.js": "^11.11.1",
         "html-pdf-node": "^1.0.8",
-        "katex": "^0.16.25",
         "latex": "^0.0.1",
+        "latex.js": "^0.12.6",
         "lucide-react": "^0.553.0",
         "mammoth": "^1.11.0",
         "monaco-editor": "^0.54.0",
@@ -2504,6 +2504,12 @@
         "node": ">= 20"
       }
     },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "license": "MIT"
+    },
     "node_modules/@phosphor-icons/react": {
       "version": "2.1.10",
       "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz",
@@ -3926,6 +3932,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/abbrev": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/accepts": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
@@ -5146,6 +5161,16 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "license": "MIT"
     },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
     "node_modules/content-disposition": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.0.tgz",
@@ -5712,6 +5737,69 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/editorconfig": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
+      "integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "9.0.1",
+        "semver": "^7.5.3"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/editorconfig/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/minimatch": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
+      "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/editorconfig/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -7867,6 +7955,28 @@
         "node": ">= 6"
       }
     },
+    "node_modules/hyphenation.de": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/hyphenation.de/-/hyphenation.de-0.2.1.tgz",
+      "integrity": "sha512-s6Y4TFA8xWjRLneOPI6HV/+wzfm2c2yurTvFaXlznmsbeI6waZhMpxu94fSXGNGsrPxrzI1zTtYDEWeEeaANnw==",
+      "dependencies": {
+        "hypher": "*"
+      }
+    },
+    "node_modules/hyphenation.en-us": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/hyphenation.en-us/-/hyphenation.en-us-0.2.1.tgz",
+      "integrity": "sha512-ItXYgvIpfN8rfXl/GTBQC7DsSb5PPsKh9gGzViK/iWzCS5mvjDebFJ6xCcIYo8dal+nSp2rUzvTT7BosrKlL8A==",
+      "dependencies": {
+        "hypher": "*"
+      }
+    },
+    "node_modules/hypher": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/hypher/-/hypher-0.2.5.tgz",
+      "integrity": "sha512-kUTpuyzBWWDO2VakmjHC/cxesg4lKQP+Fdc+7lrK4yvjNjkV9vm5UTZMDAwOyyHTOpbkYrAMlNZHG61NnE9vYQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -7909,6 +8019,21 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-size": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.1.tgz",
+      "integrity": "sha512-rH+46sQJ2dlwfjfhCyNx5thzrv+dtmBIhPHk0zgRUukHzZ/kRueTJXoYYsclBaKcSMBWuGbOFXtioLpzTb5euw==",
+      "license": "MIT",
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
@@ -7959,6 +8084,12 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC"
+    },
     "node_modules/inline-css": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/inline-css/-/inline-css-3.0.0.tgz",
@@ -8564,6 +8695,70 @@
       "integrity": "sha512-a+bKEcCjtuW5WTdgeXFzswSrdqi0jk4XlEtZlx5A94wCoBpFjfFTbo/Tra5SpNCl/YFZPvcV1dJc+TAYeg6ROQ==",
       "license": "MIT"
     },
+    "node_modules/js-beautify": {
+      "version": "1.14.11",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.11.tgz",
+      "integrity": "sha512-rPogWqAfoYh1Ryqqh2agUpVfbxAhbjuN1SmU86dskQUKouRiggUTCO4+2ym9UPXllc2WAp0J+T5qxn7Um3lCdw==",
+      "license": "MIT",
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.3",
+        "glob": "^10.3.3",
+        "nopt": "^7.2.0"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-beautify/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/js-beautify/node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/js-beautify/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8693,22 +8888,6 @@
         "safe-buffer": "^5.0.1"
       }
     },
-    "node_modules/katex": {
-      "version": "0.16.25",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.25.tgz",
-      "integrity": "sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==",
-      "funding": [
-        "https://opencollective.com/katex",
-        "https://github.com/sponsors/katex"
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "commander": "^8.3.0"
-      },
-      "bin": {
-        "katex": "cli.js"
-      }
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -8750,6 +8929,53 @@
         "through": "~2.1.0"
       }
     },
+    "node_modules/latex.js": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/latex.js/-/latex.js-0.12.6.tgz",
+      "integrity": "sha512-spMTeSq9cP4vidMQuPgoYGKmsQTMElZhDtNF3NyLIRc03XkuuPvMA0tzb0ShS/otaIJrB7DIHDk0GL3knCisEw==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "8.x",
+        "fs-extra": "10.x",
+        "hyphenation.de": "*",
+        "hyphenation.en-us": "*",
+        "js-beautify": "1.14.x",
+        "stdin": "*",
+        "svgdom": "^0.1.8"
+      },
+      "bin": {
+        "latex.js": "bin/latex.js"
+      },
+      "engines": {
+        "node": ">= 14.0"
+      }
+    },
+    "node_modules/latex.js/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/latex.js/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/lazystream": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
@@ -10627,6 +10853,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nopt": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
+      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -11556,6 +11797,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "license": "ISC"
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -11778,6 +12025,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -12883,6 +13139,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stdin": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/stdin/-/stdin-0.0.1.tgz",
+      "integrity": "sha512-2bacd1TXzqOEsqRa+eEWkRdOSznwptrs4gqFcpMq5tOtmJUGPZd10W5Lam6wQ4YQ/+qjQt4e9u35yXCF6mrlfQ=="
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -13211,6 +13472,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svgdom": {
+      "version": "0.1.22",
+      "resolved": "https://registry.npmjs.org/svgdom/-/svgdom-0.1.22.tgz",
+      "integrity": "sha512-NPf43Dha2ocSjgyVSDWrKuY5XfV6+nngTzeVypRFNj+OjKUNwWr4eWx9IrWQ8wXdaHguOTHvzEji0v46z0iwKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fontkit": "^2.0.4",
+        "image-size": "^1.2.1",
+        "sax": "^1.4.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Fuzzyma"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
@@ -13883,6 +14159,15 @@
       "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==",
       "license": "ISC"
     },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

package.json

@@ -24,8 +24,8 @@
     "framer-motion": "^12.23.24",
     "highlight.js": "^11.11.1",
     "html-pdf-node": "^1.0.8",
-    "katex": "^0.16.25",
     "latex": "^0.0.1",
+    "latex.js": "^0.12.6",
     "lucide-react": "^0.553.0",
     "mammoth": "^1.11.0",
     "monaco-editor": "^0.54.0",

public/data/reuben/main.tex

@@ -0,0 +1,18 @@
+\documentclass{article}
+\usepackage{amsmath}
+\title{My LaTeX Document}
+\author{Reuben OS}
+\date{\today}
+
+\begin{document}
+
+\maketitle
+
+\section{Introduction}
+Welcome to LaTeX Studio on Reuben OS.
+
+\section{Mathematics}
+Here is an equation:
+\[ E = mc^2 \]
+
+\end{document}