@catalystsoftware/ui 1.0.11 → 1.0.14

package/dist/components/catalyst-ui/tools/editor.tsx

@@ -0,0 +1,1744 @@
+import { AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuPortal, DropdownMenuSubContent, DropdownMenu, AlertDialog, Separator, Button, cn, CopyText, TooltipButton, KBD, DropdownMenuShortcut, AlertDialogHeader, AlertDialogFooter, options, useCopyToClipboard, useExport, getIconByLanguage, Badge } from "~/components/catalyst-ui";
+import { useDS, DSTrigger } from "~/components/catalyst-ui";
+import { Editor, } from "@monaco-editor/react";
+import { TextWrap } from '@catalystsoftware/icons'
+import { Search, Pen, Plus, X, Save, Download, Copy, ListRestart, RotateCcw, RotateCw, Braces, Code, Eye, Trash, Minimize2, Maximize2, BookOpenText, Map } from "lucide-react";
+import { useNavigate } from "@remix-run/react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+const FONT_SIZES = [8, 10, 12, 14, 16, 18, 20, 24, 26, 28, 30, 32, 34, 36, 38, 44];
+const FONT_WEIGHTS = ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'];
+const CURSOR_STYLES = ['line', 'block', 'underline', 'line-thin', 'block-outline', 'underline-thin'];
+const CURSOR_BLINKING = ['blink', 'smooth', 'phase', 'expand', 'solid'];
+const TAB_SIZES = [2, 4, 8];
+const LINE_HEIGHT_OPTIONS = [0, 1, 1.2, 1.5, 1.8, 2];
+export const STORAGE_KEY = 'catalyst-monaco-editor-settings-v1';
+
+const languages = [
+    { value: "markdown", label: "Markdown" },
+    { value: "javascript", label: "JavaScript" },
+    { value: "typescript", label: "TypeScript" },
+    { value: "html", label: "HTML" },
+    { value: "css", label: "CSS" },
+    { value: "scss", label: "SCSS" },
+    { value: "json", label: "JSON" },
+    { value: "python", label: "Python" },
+    { value: "sql", label: "SQL" },
+    { value: "yaml", label: "YAML" },
+    { value: "xml", label: "XML" },
+    { value: "java", label: "Java" },
+    { value: "csharp", label: "C#" },
+    { value: "cpp", label: "C++" },
+    { value: "php", label: "PHP" },
+    { value: "rust", label: "Rust" },
+    { value: "go", label: "Go" },
+    { value: "shell", label: "Shell" },
+];
+
+
+export const DEFAULT_PREF = {
+    // View & Layout
+    theme: 'customDark',
+    isSplitView: false,
+    isPreview: false,
+    isFullscreen: false,
+
+    // Display & Appearance
+    showMinimap: true,
+    showLineNumbers: true,
+    fontFamily: 'Consolas, "Courier New", monospace',
+    fontSize: 14,
+    fontWeight: 'normal',
+    letterSpacing: 0,
+    lineHeight: 0,
+    fontLigatures: false,
+    renderLineHighlight: 'all',
+    renderFinalNewline: 'on',
+    rulers: [],
+    glyphMargin: false,
+    lineDecorationsWidth: 10,
+
+    // Scrolling
+    scrollBeyondLastLine: true,
+    smoothScrolling: true,
+    mouseWheelZoom: false,
+    mouseWheelScrollSensitivity: 1,
+    fastScrollSensitivity: 5,
+    scrollbar: {
+        vertical: 'auto',
+        horizontal: 'auto',
+        useShadows: true,
+        verticalHasArrows: false,
+        horizontalHasArrows: false,
+        verticalScrollbarSize: 10,
+        horizontalScrollbarSize: 10,
+        arrowSize: 30,
+    },
+
+    // Cursor & Selection
+    cursorStyle: 'line',
+    cursorBlinking: 'blink',
+    cursorSmoothCaretAnimation: 'off',
+    cursorWidth: 0,
+    cursorSurroundingLines: 0,
+    cursorSurroundingLinesStyle: 'default',
+    selectOnLineNumbers: true,
+    selectionHighlight: true,
+    occurrencesHighlight: true,
+
+    // Editing Behavior
+    wordWrap: 'off',
+    autoSaveEnabled: true,
+    folding: true,
+    showFoldingControls: 'mouseover',
+    foldingStrategy: 'auto',
+    foldingHighlight: true,
+    foldingImportsByDefault: false,
+    unfoldOnClickAfterEndOfLine: false,
+
+    // Brackets & Quotes
+    bracketMatching: 'always',
+    autoClosingBrackets: 'languageDefined',
+    autoClosingQuotes: 'languageDefined',
+    guides: {
+        bracketPairs: true,
+        bracketPairsHorizontal: 'active',
+        highlightActiveBracketPair: true,
+        indentation: true,
+        highlightActiveIndentation: true,
+    },
+
+    // Indentation
+    tabSize: 2,
+    insertSpaces: true,
+    detectIndentation: true,
+    autoIndent: 'advanced',
+    renderIndentGuides: true,
+    highlightActiveIndentGuide: true,
+
+    // Whitespace & Formatting
+    renderWhitespace: 'selection',
+    formatOnPaste: false,
+    formatOnType: false,
+
+    // Suggestions & IntelliSense
+    quickSuggestions: {
+        other: true,
+        comments: false,
+        strings: false,
+    },
+    quickSuggestionsDelay: 10,
+    acceptSuggestionOnCommitCharacter: true,
+    acceptSuggestionOnEnter: 'on',
+    tabCompletion: 'on',
+    suggestOnTriggerCharacters: true,
+    wordBasedSuggestions: 'matchingDocuments',
+    suggestSelection: 'first',
+    snippetSuggestions: 'top',
+
+    // Find & Replace
+    find: {
+        seedSearchStringFromSelection: 'always',
+        autoFindInSelection: 'never',
+        addExtraSpaceOnTop: true,
+        loop: true,
+    },
+
+    // Links, Hover & Color
+    links: true,
+    colorDecorators: true,
+    hover: {
+        enabled: true,
+        delay: 300,
+        sticky: true,
+    },
+
+    // Advanced Features
+    codeLens: true,
+    showUnused: true,
+    showDeprecated: true,
+    inlayHints: {
+        enabled: 'on',
+        fontSize: 12,
+        fontFamily: '',
+    },
+    stickyScroll: {
+        enabled: false,
+        maxLineCount: 5,
+        defaultModel: 'outlineModel',
+    },
+
+    // Editor Behavior
+    multiCursorModifier: 'alt',
+    contextmenu: true,
+    mouseStyle: 'text',
+    dragAndDrop: true,
+    dropIntoEditor: {
+        enabled: true,
+    },
+    emptySelectionClipboard: true,
+    copyWithSyntaxHighlighting: true,
+
+    // Unicode & Special Characters
+    unicodeHighlight: {
+        ambiguousCharacters: true,
+        invisibleCharacters: true,
+        nonBasicASCII: true,
+    },
+
+    // Accessibility
+    accessibilitySupport: 'auto',
+    accessibilityPageSize: 10,
+    ariaLabel: 'Editor content',
+    screenReaderAnnounceInlineSuggestion: true,
+
+    // Diff Editor (if using)
+    ignoreTrimWhitespace: true,
+    renderSideBySide: true,
+    originalEditable: false,
+    diffCodeLens: false,
+    renderOverviewRuler: true,
+    diffWordWrap: 'inherit',
+};
+
+// Save settings to localStorage
+export const saveEditorSettings = (settings: typeof DEFAULT_PREF) => {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+        return true;
+    } catch (error) {
+        console.error('Failed to save editor settings:', error);
+        return false;
+    }
+};
+
+// Load settings from localStorage
+export const loadEditorSettings = (): typeof DEFAULT_PREF => {
+    try {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+            const parsed = JSON.parse(saved);
+            // Deep merge with defaults to handle new settings added in updates
+            return deepMerge(DEFAULT_PREF, parsed);
+        }
+    } catch (error) {
+        console.error('Failed to load editor settings:', error);
+    }
+    return DEFAULT_PREF;
+};
+
+// Deep merge function to combine default and saved settings
+const deepMerge = (target: any, source: any): any => {
+    const output = { ...target };
+
+    if (isObject(target) && isObject(source)) {
+        Object.keys(source).forEach(key => {
+            if (isObject(source[key])) {
+                if (!(key in target)) {
+                    output[key] = source[key];
+                } else {
+                    output[key] = deepMerge(target[key], source[key]);
+                }
+            } else {
+                output[key] = source[key];
+            }
+        });
+    }
+
+    return output;
+};
+
+const isObject = (item: any): boolean => {
+    return item && typeof item === 'object' && !Array.isArray(item);
+};
+
+// Auto-save settings with debounce
+export const autoSaveSettings = (() => {
+    let timeoutId: NodeJS.Timeout | null = null;
+
+    return (settings: typeof DEFAULT_PREF, delay: number = 1000) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+
+        timeoutId = setTimeout(() => {
+            saveEditorSettings(settings);
+        }, delay);
+    };
+})();
+
+// Reset settings to defaults
+export const resetEditorSettings = () => {
+    try {
+        localStorage.removeItem(STORAGE_KEY);
+        return DEFAULT_PREF;
+    } catch (error) {
+        console.error('Failed to reset editor settings:', error);
+        return DEFAULT_PREF;
+    }
+};
+
+// Export settings as JSON file
+export const exportEditorSettings = (settings: typeof DEFAULT_PREF) => {
+    const dataStr = JSON.stringify(settings, null, 2);
+    const dataBlob = new Blob([dataStr], { type: 'application/json' });
+    const url = URL.createObjectURL(dataBlob);
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'monaco-editor-settings.json';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+};
+
+// Import settings from JSON file
+export const importEditorSettings = (file: File): Promise<typeof DEFAULT_PREF> => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        reader.onload = (e) => {
+            try {
+                const settings = JSON.parse(e.target?.result as string);
+                const merged = deepMerge(DEFAULT_PREF, settings);
+                saveEditorSettings(merged);
+                resolve(merged);
+            } catch (error) {
+                reject(error);
+            }
+        };
+
+        reader.onerror = () => reject(reader.error);
+        reader.readAsText(file);
+    });
+};
+
+export const useEditorSettings = () => {
+    const [settings, setSettings] = React.useState<typeof DEFAULT_PREF>(() => loadEditorSettings());
+
+    const updateSetting = React.useCallback((key: string, value: any) => {
+        setSettings(prev => {
+            const newSettings = { ...prev };
+
+            // Handle nested keys like 'scrollbar.vertical'
+            const keys = key.split('.');
+            let current: any = newSettings;
+
+            for (let i = 0; i < keys.length - 1; i++) {
+                if (!(keys[i] in current)) {
+                    current[keys[i]] = {};
+                }
+                current = current[keys[i]];
+            }
+
+            current[keys[keys.length - 1]] = value;
+
+            // Auto-save after update
+            autoSaveSettings(newSettings);
+
+            return newSettings;
+        });
+    }, []);
+
+    const resetSettings = React.useCallback(() => {
+        const defaults = resetEditorSettings();
+        setSettings(defaults);
+    }, []);
+
+    const exportSettings = React.useCallback(() => {
+        exportEditorSettings(settings);
+    }, [settings]);
+
+    const importSettings = React.useCallback(async (file: File) => {
+        try {
+            const imported = await importEditorSettings(file);
+            setSettings(imported);
+            return true;
+        } catch (error) {
+            console.error('Failed to import settings:', error);
+            return false;
+        }
+    }, []);
+
+    return {
+        settings,
+        updateSetting,
+        resetSettings,
+        exportSettings,
+        importSettings,
+    };
+};
+
+export function MonacoToolbar({ createNewTab, closeTab, closeAllTabs, activeTab, handleManualSave, code, setTabs, editorRef, activeTabId, isWhitespaceRendered, setIsWhitespaceRendered, areIndentGuidesRendered, setAreIndentGuidesRendered, isStickyScrollEnabled, setIsStickyScrollEnabled, isWordWrapEnabled, setIsWordWrapEnabled, toast, isFullscreen, setIsFullscreen, tabs, lastSaved, isVisible, fileInputRef, es, setSetState, duplicateTab, onOpen, setEditorRenameTab, setNestedSetting, parent = 'monaco', isEditing = false }) {
+
+    const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
+    const nav = useNavigate()
+    const exportFile = useExport();
+
+    const activeItemStyle = 'border-l-4 border-transparent hover:bg-accent/50 hover:border-primary aria-selected:border-primary'
+
+
+    function resetLocalStorage() {
+        localStorage.clear();
+        toast.success("Success", "Local storage has been reset!", { variant: "accent" });
+        // Optional: reload the page if needed
+        return nav(0)
+        // window.location.reload();
+    }
+
+    const toggleFullscreen = () => {
+        if (!document.fullscreenElement) {
+            document.documentElement.requestFullscreen();
+            setIsFullscreen(true);
+        } else {
+            document.exitFullscreen();
+            setIsFullscreen(false);
+        }
+    };
+
+    function KBDShortcut({ name = 'Save', sc = (
+        <>
+            <KBD>Alt</KBD>{' & '}<KBD>S</KBD>
+        </>
+    ) }) {
+        return (
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground">
+                {name}
+                <DropdownMenuShortcut>
+                    {sc}
+                </DropdownMenuShortcut>
+            </DropdownMenuItem>
+        )
+    }
+
+    const editorFind = () => {
+        if (editorRef.current) {
+            editorRef.current.trigger(
+                'menu',
+                'actions.find', // Opens the Find widget (Ctrl+F)
+                null
+            );
+        }
+    };
+    const editorFindReplace = () => {
+        if (editorRef.current) {
+            editorRef.current.trigger(
+                'menu',
+                'editor.action.startFindReplace', // Opens the Find/Replace widget (Ctrl+H)
+                null
+            );
+        }
+    };
+    const editorFoldAll = () => {
+        if (editorRef.current) {
+            editorRef.current.trigger(
+                'menu',
+                'editor.foldAll',
+                null
+            );
+        }
+    };
+    const editorUnfoldAll = () => {
+        if (editorRef.current) {
+            editorRef.current.trigger(
+                'menu',
+                'editor.unfoldAll',
+                null
+            );
+        }
+    };
+    const editorChangeAllOccurrences = () => {
+        if (editorRef.current) {
+            editorRef.current.trigger(
+                'menu',
+                'editor.action.selectHighlights', // Finds and selects all instances of the current word
+                null
+            );
+        }
+    };
+    const editorToggleBlockComment = () => {
+        if (editorRef.current) {
+            editorRef.current.trigger(
+                'menu',
+                'editor.action.blockComment', // Toggles C-style block comments (/* ... */)
+                null
+            );
+        }
+    };
+
+    const editorToggleRenderWhitespace = () => {
+        const newStatus = !isWhitespaceRendered;
+        setIsWhitespaceRendered(newStatus);
+
+        // 'all' shows all whitespace, 'none' hides it.
+        const renderMode = newStatus ? 'all' : 'none';
+
+        if (editorRef.current) {
+            editorRef.current.updateOptions({
+                renderWhitespace: renderMode,
+            });
+        }
+    };
+    const editorToggleIndentGuides = () => {
+        const newStatus = !areIndentGuidesRendered;
+        setAreIndentGuidesRendered(newStatus);
+
+        if (editorRef.current) {
+            editorRef.current.updateOptions({
+                renderIndentGuides: newStatus,
+            });
+        }
+    };
+    const editorToggleStickyScroll = () => {
+        const newStatus = !isStickyScrollEnabled;
+        setIsStickyScrollEnabled(newStatus); // Update local state
+
+        if (editorRef.current) {
+            editorRef.current.updateOptions({
+                'stickyScroll.enabled': newStatus, // The key change
+            });
+        }
+    };
+    const editorToggleSoftWraps = () => {
+        const newStatus = !isWordWrapEnabled;
+        setIsWordWrapEnabled(newStatus);
+
+        if (editorRef.current) {
+            editorRef.current.updateOptions({
+                wordWrap: newStatus ? 'on' : 'off',
+            });
+        }
+    };
+
+    const handleClick = (code = null, filename = 'untitled.md') => {
+        if (!code || !filename) return null;
+        exportFile(code, filename);
+    };
+
+    return (
+        <div className="flex items-center justify-between border-b border-border bg-background">
+            <div className="flex items-center space-x-2">
+                {parent === 'monaco' && (<DSTrigger className='ml-3' />)}
+                {parent === 'snippet' && (
+                    <Button size='icon' variant='ghost' onClick={() => setIsEditing((prev) => !prev)} >
+                        {isEditing ? (<Search className="h-4 w-4" />) : (<Pen className="h-4 w-4" />)}
+                    </Button>
+                )}
+                {/** File Menu */}
+                <DropdownMenu>
+                    <DropdownMenuTrigger>
+                        <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+                            File
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        <DropdownMenuLabel>Monaco Editor</DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => createNewTab()}>
+                                Create Tab
+                                <DropdownMenuShortcut><Plus /></DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => closeTab()}>
+                                Close Tab
+                                <DropdownMenuShortcut><X /></DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => closeAllTabs()}>
+                                Close All Tabs
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => fileInputRef.current?.click()}>
+                                Open File
+                                <DropdownMenuShortcut><BookOpenText /></DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                            <input ref={fileInputRef} type="file" accept=".md" onChange={onOpen} style={{ display: "none" }} />
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" disabled={!activeTab?.isDirty} onClick={handleManualSave}>
+                                Save
+                                <DropdownMenuShortcut><Save /></DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => handleClick(code, activeTab.name)}>
+                                Export
+                                <DropdownMenuShortcut><Download /></DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>Languages</DropdownMenuSubTrigger>
+                                <DropdownMenuPortal>
+                                    <DropdownMenuSubContent>
+                                        {languages.map((lang) => {
+                                            const Icon = getIconByLanguage(lang.value)
+                                            return (
+                                                <DropdownMenuItem
+                                                    key={lang.value}
+                                                    onSelect={() => {
+                                                        setTabs((prev) => prev.map((tab) => (tab.id === activeTabId ? { ...tab, language: lang.value, isDirty: true } : tab)));
+                                                    }}
+                                                    className={cn(activeItemStyle, "text-muted-foreground hover:text-foreground flex items-center justify-between", lang.value === (activeTab?.language || "markdown") ? "bg-muted-background" : "")}
+                                                >
+                                                    <span>{lang.label}</span>
+                                                    <Icon />
+                                                </DropdownMenuItem>
+                                            )
+                                        })}
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuPortal>
+                            </DropdownMenuSub>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => copyToClipboard(code)}>
+                                Copy File Contents
+                                <DropdownMenuShortcut><Copy /></DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                            <AlertDialog>
+                                <AlertDialogTrigger asChild>
+                                    <DropdownMenuItem className="text-muted-foreground hover:text-foreground">
+                                        Reset Local Storage
+                                        <DropdownMenuShortcut><ListRestart /></DropdownMenuShortcut>
+                                    </DropdownMenuItem>
+                                </AlertDialogTrigger>
+                                <AlertDialogContent>
+                                    <AlertDialogHeader>
+                                        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                                        <AlertDialogDescription>This action cannot be undone. This will permanently delete your local storage data.</AlertDialogDescription>
+                                    </AlertDialogHeader>
+                                    <AlertDialogFooter>
+                                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                        <AlertDialogAction onClick={() => resetLocalStorage()}>Continue</AlertDialogAction>
+                                    </AlertDialogFooter>
+                                </AlertDialogContent>
+                            </AlertDialog>
+                        </DropdownMenuGroup>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+
+                {/** Edit Menu */}
+                <DropdownMenu>
+                    <DropdownMenuTrigger>
+                        <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+                            Edit
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger('dropdown-menu', 'undo', null)}>
+                                Undo
+                                <DropdownMenuShortcut><RotateCcw /></DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger('dropdown-menu', 'redo', null)}>
+                                Redo
+                                <DropdownMenuShortcut><RotateCw /></DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger('dropdown-menu', 'editor.action.commentLine', null)}>
+                                Toggle Line Comment
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger('dropdown-menu', 'editor.action.gotoLine', null)}>
+                                Go To Line
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger('dropdown-menu', 'editor.action.formatDocument', null)}>
+                                Format Document
+                                <DropdownMenuShortcut><Braces /></DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleBlockComment()}>
+                                Toggle Block Comment
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorChangeAllOccurrences()}>
+                                Change All Occurrences
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleSoftWraps()}>
+                                Toggle Soft Wraps
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setEditorRenameTab(true)}>
+                                Rename Tab
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => duplicateTab(activeTabId)}>
+                                Duplicate Tab
+                            </DropdownMenuItem>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>Font Size</DropdownMenuSubTrigger>
+                                <DropdownMenuPortal>
+                                    <DropdownMenuSubContent>
+                                        {FONT_SIZES.map((size) => (
+                                            <DropdownMenuItem
+                                                key={size}
+                                                onClick={() => {
+                                                    setSetState('fontSize', size);
+                                                    editorRef.current?.updateOptions({ fontSize: size });
+                                                }}
+                                                className={cn(size === es.fontSize ? "bg-muted font-semibold" : "", "text-muted-foreground hover:text-foreground")}
+                                            >
+                                                {size}px
+                                            </DropdownMenuItem>
+                                        ))}
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuPortal>
+                            </DropdownMenuSub>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorFind()}>
+                                Find
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorFindReplace()}>
+                                Find & Replace
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+
+                {/** View Menu */}
+                <DropdownMenu>
+                    <DropdownMenuTrigger>
+                        <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+                            View
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground"
+                                onClick={() => editorRef.current?.trigger('dropdown-menu', 'editor.action.quickCommand', null)}>
+                                Command Palette
+                            </DropdownMenuItem>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>Shortcuts</DropdownMenuSubTrigger>
+                                <DropdownMenuPortal>
+                                    <DropdownMenuSubContent>
+                                        <KBDShortcut name="Open File" sc={(<><KBD>Alt</KBD>{' & '}<KBD>O</KBD></>)} />
+                                        <KBDShortcut name="Save File" sc={(<><KBD>Alt</KBD>{' & '}<KBD>S</KBD></>)} />
+                                        <KBDShortcut name="Rename Tab" sc={(<><KBD>Alt</KBD>{' & '}<KBD>R</KBD></>)} />
+                                        <KBDShortcut name="Toggle Preview" sc={(<><KBD>Alt</KBD>{' & '}<KBD>P</KBD></>)} />
+                                        <KBDShortcut name="Create Tab" sc={(<><KBD>Alt</KBD>{' & '}<KBD>N</KBD></>)} />
+                                        <KBDShortcut name="Create tab: Typescript" sc={(<><KBD>Alt</KBD>{' & '}<KBD>T</KBD></>)} />
+                                        <KBDShortcut name="Create tab: Markdown" sc={(<><KBD>Alt</KBD>{' & '}<KBD>M</KBD></>)} />
+                                        <KBDShortcut name="Close Tab" sc={(<><KBD>Alt</KBD>{' & '}<KBD>W</KBD></>)} />
+                                        <KBDShortcut name="Search" sc={(<><KBD>Alt</KBD>{' & '}<KBD>F</KBD></>)} />
+                                        <KBDShortcut name="Increase Font Size" sc={(<><KBD>Ctrl</KBD>{' & '}<KBD>+</KBD></>)} />
+                                        <KBDShortcut name="Decrease Font Size" sc={(<><KBD>Ctrl</KBD>{' & '}<KBD>-</KBD></>)} />
+                                        <KBDShortcut name="Open MD Sidebar" sc={(<><KBD>Ctrl</KBD>{' & '}<KBD>B</KBD></>)} />
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuPortal>
+                            </DropdownMenuSub>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorFoldAll()}>
+                                Fold All
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorUnfoldAll()}>
+                                Unfold All
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setSetState('showMinimap', (prev) => !prev)}>
+                                Mini Map
+                                <DropdownMenuShortcut><Map /></DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setSetState('wordWrap', (prev) => prev === 'off' ? 'on' : 'off')}>
+                                Word Wrap
+                                <DropdownMenuShortcut><TextWrap /></DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setSetState('showLineNumbers', (prev) => !prev)}>
+                                Line Numbers
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setSetState('isPreview', !es.isPreview)}>
+                                {es.isPreview ? (
+                                    <>Code<DropdownMenuShortcut><Code /></DropdownMenuShortcut></>
+                                ) : (
+                                    <>Preview<DropdownMenuShortcut><Eye /></DropdownMenuShortcut></>
+                                )}
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleRenderWhitespace()}>
+                                {isWhitespaceRendered ? 'Hide Whitespace' : 'Show Whitespace'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleIndentGuides()}>
+                                {areIndentGuidesRendered ? 'Hide Indent Guides' : 'Show Indent Guides'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleStickyScroll()}>
+                                {isStickyScrollEnabled ? 'Disable Sticky Scroll' : 'Enable Sticky Scroll'}
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+                <DropdownMenu>
+                    <DropdownMenuTrigger>
+                        <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+                            Settings
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        <DropdownMenuLabel>Editor Settings</DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+
+                        {/** Appearance */}
+                        <DropdownMenuGroup>
+                            <DropdownMenuLabel className="text-xs text-muted-foreground">Appearance</DropdownMenuLabel>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>Font Weight</DropdownMenuSubTrigger>
+                                <DropdownMenuPortal>
+                                    <DropdownMenuSubContent>
+                                        {FONT_WEIGHTS.map((weight) => (
+                                            <DropdownMenuItem
+                                                key={weight}
+                                                onClick={() => {
+                                                    setSetState('fontWeight', weight);
+                                                    editorRef.current?.updateOptions({ fontWeight: weight });
+                                                }}
+                                                className={cn(weight === es.fontWeight ? "bg-muted font-semibold" : "")}
+                                            >
+                                                {weight}
+                                            </DropdownMenuItem>
+                                        ))}
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuPortal>
+                            </DropdownMenuSub>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>Line Height</DropdownMenuSubTrigger>
+                                <DropdownMenuPortal>
+                                    <DropdownMenuSubContent>
+                                        {LINE_HEIGHT_OPTIONS.map((height) => (
+                                            <DropdownMenuItem
+                                                key={height}
+                                                onClick={() => {
+                                                    setSetState('lineHeight', height);
+                                                    editorRef.current?.updateOptions({ lineHeight: height });
+                                                }}
+                                                className={cn(height === es.lineHeight ? "bg-muted font-semibold" : "")}
+                                            >
+                                                {height === 0 ? 'Auto' : height}
+                                            </DropdownMenuItem>
+                                        ))}
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuPortal>
+                            </DropdownMenuSub>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('fontLigatures', !es.fontLigatures);
+                                editorRef.current?.updateOptions({ fontLigatures: !es.fontLigatures });
+                            }}>
+                                Font Ligatures {es.fontLigatures && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('glyphMargin', !es.glyphMargin);
+                                editorRef.current?.updateOptions({ glyphMargin: !es.glyphMargin });
+                            }}>
+                                Glyph Margin {es.glyphMargin && '✓'}
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+
+                        {/** Cursor & Selection */}
+                        <DropdownMenuGroup>
+                            <DropdownMenuLabel className="text-xs text-muted-foreground">Cursor & Selection</DropdownMenuLabel>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>Cursor Style</DropdownMenuSubTrigger>
+                                <DropdownMenuPortal>
+                                    <DropdownMenuSubContent>
+                                        {CURSOR_STYLES.map((style) => (
+                                            <DropdownMenuItem
+                                                key={style}
+                                                onClick={() => {
+                                                    setSetState('cursorStyle', style);
+                                                    editorRef.current?.updateOptions({ cursorStyle: style });
+                                                }}
+                                                className={cn(style === es.cursorStyle ? "bg-muted font-semibold" : "")}
+                                            >
+                                                {style}
+                                            </DropdownMenuItem>
+                                        ))}
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuPortal>
+                            </DropdownMenuSub>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>Cursor Blinking</DropdownMenuSubTrigger>
+                                <DropdownMenuPortal>
+                                    <DropdownMenuSubContent>
+                                        {CURSOR_BLINKING.map((blink) => (
+                                            <DropdownMenuItem
+                                                key={blink}
+                                                onClick={() => {
+                                                    setSetState('cursorBlinking', blink);
+                                                    editorRef.current?.updateOptions({ cursorBlinking: blink });
+                                                }}
+                                                className={cn(blink === es.cursorBlinking ? "bg-muted font-semibold" : "")}
+                                            >
+                                                {blink}
+                                            </DropdownMenuItem>
+                                        ))}
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuPortal>
+                            </DropdownMenuSub>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('cursorSmoothCaretAnimation', es.cursorSmoothCaretAnimation === 'off' ? 'on' : 'off');
+                                editorRef.current?.updateOptions({ cursorSmoothCaretAnimation: es.cursorSmoothCaretAnimation === 'off' ? 'on' : 'off' });
+                            }}>
+                                Smooth Cursor {es.cursorSmoothCaretAnimation === 'on' && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('selectionHighlight', !es.selectionHighlight);
+                                editorRef.current?.updateOptions({ selectionHighlight: !es.selectionHighlight });
+                            }}>
+                                Selection Highlight {es.selectionHighlight && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('occurrencesHighlight', !es.occurrencesHighlight);
+                                editorRef.current?.updateOptions({ occurrencesHighlight: !es.occurrencesHighlight });
+                            }}>
+                                Occurrences Highlight {es.occurrencesHighlight && '✓'}
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+
+                        {/** Indentation */}
+                        <DropdownMenuGroup>
+                            <DropdownMenuLabel className="text-xs text-muted-foreground">Indentation</DropdownMenuLabel>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>Tab Size</DropdownMenuSubTrigger>
+                                <DropdownMenuPortal>
+                                    <DropdownMenuSubContent>
+                                        {TAB_SIZES.map((size) => (
+                                            <DropdownMenuItem
+                                                key={size}
+                                                onClick={() => {
+                                                    setSetState('tabSize', size);
+                                                    editorRef.current?.updateOptions({ tabSize: size });
+                                                }}
+                                                className={cn(size === es.tabSize ? "bg-muted font-semibold" : "")}
+                                            >
+                                                {size} spaces
+                                            </DropdownMenuItem>
+                                        ))}
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuPortal>
+                            </DropdownMenuSub>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('insertSpaces', !es.insertSpaces);
+                                editorRef.current?.updateOptions({ insertSpaces: !es.insertSpaces });
+                            }}>
+                                Use Spaces {es.insertSpaces && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('detectIndentation', !es.detectIndentation);
+                                editorRef.current?.updateOptions({ detectIndentation: !es.detectIndentation });
+                            }}>
+                                Auto Detect Indentation {es.detectIndentation && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setNestedSetting('guides.bracketPairs', !es.guides?.bracketPairs);
+                                editorRef.current?.updateOptions({ 'guides.bracketPairs': !es.guides?.bracketPairs });
+                            }}>
+                                Bracket Pair Guides {es.guides?.bracketPairs && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setNestedSetting('guides.indentation', !es.guides?.indentation);
+                                editorRef.current?.updateOptions({ 'guides.indentation': !es.guides?.indentation });
+                            }}>
+                                Indentation Guides {es.guides?.indentation && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setNestedSetting('guides.highlightActiveIndentation', !es.guides?.highlightActiveIndentation);
+                                editorRef.current?.updateOptions({ 'guides.highlightActiveIndentation': !es.guides?.highlightActiveIndentation });
+                            }}>
+                                Highlight Active Indent {es.guides?.highlightActiveIndentation && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setNestedSetting('guides.highlightActiveBracketPair', !es.guides?.highlightActiveBracketPair);
+                                editorRef.current?.updateOptions({ 'guides.highlightActiveBracketPair': !es.guides?.highlightActiveBracketPair });
+                            }}>
+                                Highlight Active Bracket Pair {es.guides?.highlightActiveBracketPair && '✓'}
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+
+                        {/** Code Features */}
+                        <DropdownMenuGroup>
+                            <DropdownMenuLabel className="text-xs text-muted-foreground">Code Features</DropdownMenuLabel>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('codeLens', !es.codeLens);
+                                editorRef.current?.updateOptions({ codeLens: !es.codeLens });
+                            }}>
+                                Code Lens {es.codeLens && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('showUnused', !es.showUnused);
+                                editorRef.current?.updateOptions({ showUnused: !es.showUnused });
+                            }}>
+                                Show Unused Code {es.showUnused && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('showDeprecated', !es.showDeprecated);
+                                editorRef.current?.updateOptions({ showDeprecated: !es.showDeprecated });
+                            }}>
+                                Show Deprecated {es.showDeprecated && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('colorDecorators', !es.colorDecorators);
+                                editorRef.current?.updateOptions({ colorDecorators: !es.colorDecorators });
+                            }}>
+                                Color Decorators {es.colorDecorators && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('links', !es.links);
+                                editorRef.current?.updateOptions({ links: !es.links });
+                            }}>
+                                Clickable Links {es.links && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>Hover Settings</DropdownMenuSubTrigger>
+                                <DropdownMenuPortal>
+                                    <DropdownMenuSubContent>
+                                        <DropdownMenuItem onClick={() => {
+                                            setNestedSetting('hover.enabled', !es.hover?.enabled);
+                                            editorRef.current?.updateOptions({ 'hover.enabled': !es.hover?.enabled });
+                                        }}>
+                                            Enable Hover {es.hover?.enabled && '✓'}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onClick={() => {
+                                            setNestedSetting('hover.sticky', !es.hover?.sticky);
+                                            editorRef.current?.updateOptions({ 'hover.sticky': !es.hover?.sticky });
+                                        }}>
+                                            Sticky Hover {es.hover?.sticky && '✓'}
+                                        </DropdownMenuItem>
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuPortal>
+                            </DropdownMenuSub>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+
+                        {/** Behavior */}
+                        <DropdownMenuGroup>
+                            <DropdownMenuLabel className="text-xs text-muted-foreground">Behavior</DropdownMenuLabel>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('mouseWheelZoom', !es.mouseWheelZoom);
+                                editorRef.current?.updateOptions({ mouseWheelZoom: !es.mouseWheelZoom });
+                            }}>
+                                Mouse Wheel Zoom {es.mouseWheelZoom && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('dragAndDrop', !es.dragAndDrop);
+                                editorRef.current?.updateOptions({ dragAndDrop: !es.dragAndDrop });
+                            }}>
+                                Drag & Drop {es.dragAndDrop && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('formatOnPaste', !es.formatOnPaste);
+                                editorRef.current?.updateOptions({ formatOnPaste: !es.formatOnPaste });
+                            }}>
+                                Format On Paste {es.formatOnPaste && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('formatOnType', !es.formatOnType);
+                                editorRef.current?.updateOptions({ formatOnType: !es.formatOnType });
+                            }}>
+                                Format On Type {es.formatOnType && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('autoSaveEnabled', !es.autoSaveEnabled);
+                            }}>
+                                Auto Save {es.autoSaveEnabled && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setNestedSetting('dropIntoEditor.enabled', !es.dropIntoEditor?.enabled);
+                                editorRef.current?.updateOptions({ 'dropIntoEditor.enabled': !es.dropIntoEditor?.enabled });
+                            }}>
+                                Drop Into Editor {es.dropIntoEditor?.enabled && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>Find Settings</DropdownMenuSubTrigger>
+                                <DropdownMenuPortal>
+                                    <DropdownMenuSubContent>
+                                        <DropdownMenuItem onClick={() => {
+                                            setNestedSetting('find.loop', !es.find?.loop);
+                                            editorRef.current?.updateOptions({ 'find.loop': !es.find?.loop });
+                                        }}>
+                                            Loop Search {es.find?.loop && '✓'}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onClick={() => {
+                                            setNestedSetting('find.addExtraSpaceOnTop', !es.find?.addExtraSpaceOnTop);
+                                            editorRef.current?.updateOptions({ 'find.addExtraSpaceOnTop': !es.find?.addExtraSpaceOnTop });
+                                        }}>
+                                            Extra Space on Top {es.find?.addExtraSpaceOnTop && '✓'}
+                                        </DropdownMenuItem>
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuPortal>
+                            </DropdownMenuSub>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+
+                        {/** Suggestions */}
+                        <DropdownMenuGroup>
+                            <DropdownMenuLabel className="text-xs text-muted-foreground">IntelliSense</DropdownMenuLabel>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('tabCompletion', es.tabCompletion === 'on' ? 'off' : 'on');
+                                editorRef.current?.updateOptions({ tabCompletion: es.tabCompletion === 'on' ? 'off' : 'on' });
+                            }}>
+                                Tab Completion {es.tabCompletion === 'on' && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setSetState('acceptSuggestionOnEnter', es.acceptSuggestionOnEnter === 'on' ? 'off' : 'on');
+                                editorRef.current?.updateOptions({ acceptSuggestionOnEnter: es.acceptSuggestionOnEnter === 'on' ? 'off' : 'on' });
+                            }}>
+                                Accept Suggestion on Enter {es.acceptSuggestionOnEnter === 'on' && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                const enabled = es.inlayHints?.enabled === 'on' ? 'off' : 'on';
+                                setNestedSetting('inlayHints.enabled', enabled);
+                                editorRef.current?.updateOptions({ 'inlayHints.enabled': enabled });
+                            }}>
+                                Inlay Hints {es.inlayHints?.enabled === 'on' && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>Quick Suggestions</DropdownMenuSubTrigger>
+                                <DropdownMenuPortal>
+                                    <DropdownMenuSubContent>
+                                        <DropdownMenuItem onClick={() => {
+                                            setNestedSetting('quickSuggestions.other', !es.quickSuggestions?.other);
+                                            editorRef.current?.updateOptions({ 'quickSuggestions.other': !es.quickSuggestions?.other });
+                                        }}>
+                                            Other {es.quickSuggestions?.other && '✓'}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onClick={() => {
+                                            setNestedSetting('quickSuggestions.comments', !es.quickSuggestions?.comments);
+                                            editorRef.current?.updateOptions({ 'quickSuggestions.comments': !es.quickSuggestions?.comments });
+                                        }}>
+                                            Comments {es.quickSuggestions?.comments && '✓'}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onClick={() => {
+                                            setNestedSetting('quickSuggestions.strings', !es.quickSuggestions?.strings);
+                                            editorRef.current?.updateOptions({ 'quickSuggestions.strings': !es.quickSuggestions?.strings });
+                                        }}>
+                                            Strings {es.quickSuggestions?.strings && '✓'}
+                                        </DropdownMenuItem>
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuPortal>
+                            </DropdownMenuSub>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+
+                        {/* Scrollbar Settings */}
+                        <DropdownMenuGroup>
+                            <DropdownMenuLabel className="text-xs text-muted-foreground">Scrollbar</DropdownMenuLabel>
+                            <DropdownMenuItem onClick={() => {
+                                setNestedSetting('scrollbar.useShadows', !es.scrollbar?.useShadows);
+                                editorRef.current?.updateOptions({ 'scrollbar.useShadows': !es.scrollbar?.useShadows });
+                            }}>
+                                Scrollbar Shadows {es.scrollbar?.useShadows && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setNestedSetting('scrollbar.verticalHasArrows', !es.scrollbar?.verticalHasArrows);
+                                editorRef.current?.updateOptions({ 'scrollbar.verticalHasArrows': !es.scrollbar?.verticalHasArrows });
+                            }}>
+                                Vertical Arrows {es.scrollbar?.verticalHasArrows && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setNestedSetting('scrollbar.horizontalHasArrows', !es.scrollbar?.horizontalHasArrows);
+                                editorRef.current?.updateOptions({ 'scrollbar.horizontalHasArrows': !es.scrollbar?.horizontalHasArrows });
+                            }}>
+                                Horizontal Arrows {es.scrollbar?.horizontalHasArrows && '✓'}
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+
+                        {/* Sticky Scroll */}
+                        <DropdownMenuGroup>
+                            <DropdownMenuLabel className="text-xs text-muted-foreground">Sticky Scroll</DropdownMenuLabel>
+                            <DropdownMenuItem onClick={() => {
+                                setNestedSetting('stickyScroll.enabled', !es.stickyScroll?.enabled);
+                                editorRef.current?.updateOptions({ 'stickyScroll.enabled': !es.stickyScroll?.enabled });
+                            }}>
+                                Enable Sticky Scroll {es.stickyScroll?.enabled && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>Max Line Count</DropdownMenuSubTrigger>
+                                <DropdownMenuPortal>
+                                    <DropdownMenuSubContent>
+                                        {[3, 5, 7, 10].map((count) => (
+                                            <DropdownMenuItem
+                                                key={count}
+                                                onClick={() => {
+                                                    setNestedSetting('stickyScroll.maxLineCount', count);
+                                                    editorRef.current?.updateOptions({ 'stickyScroll.maxLineCount': count });
+                                                }}
+                                                className={cn(count === es.stickyScroll?.maxLineCount ? "bg-muted font-semibold" : "")}
+                                            >
+                                                {count} lines
+                                            </DropdownMenuItem>
+                                        ))}
+                                    </DropdownMenuSubContent>
+                                </DropdownMenuPortal>
+                            </DropdownMenuSub>
+                        </DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+
+                        {/* Unicode Highlight */}
+                        <DropdownMenuGroup>
+                            <DropdownMenuLabel className="text-xs text-muted-foreground">Unicode Highlight</DropdownMenuLabel>
+                            <DropdownMenuItem onClick={() => {
+                                setNestedSetting('unicodeHighlight.ambiguousCharacters', !es.unicodeHighlight?.ambiguousCharacters);
+                                editorRef.current?.updateOptions({ 'unicodeHighlight.ambiguousCharacters': !es.unicodeHighlight?.ambiguousCharacters });
+                            }}>
+                                Ambiguous Characters {es.unicodeHighlight?.ambiguousCharacters && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setNestedSetting('unicodeHighlight.invisibleCharacters', !es.unicodeHighlight?.invisibleCharacters);
+                                editorRef.current?.updateOptions({ 'unicodeHighlight.invisibleCharacters': !es.unicodeHighlight?.invisibleCharacters });
+                            }}>
+                                Invisible Characters {es.unicodeHighlight?.invisibleCharacters && '✓'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => {
+                                setNestedSetting('unicodeHighlight.nonBasicASCII', !es.unicodeHighlight?.nonBasicASCII);
+                                editorRef.current?.updateOptions({ 'unicodeHighlight.nonBasicASCII': !es.unicodeHighlight?.nonBasicASCII });
+                            }}>
+                                Non-Basic ASCII {es.unicodeHighlight?.nonBasicASCII && '✓'}
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+                {/** Info Menu */}
+                <DropdownMenu>
+                    <DropdownMenuTrigger>
+                        <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+                            Info
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                     <DropdownMenuGroup>
+							{/** Files  */}
+							<DropdownMenuItem className="text-muted-foreground hover:text-foreground" >
+								Files
+								<DropdownMenuShortcut>
+									{tabs.length} file{tabs.length !== 1 ? "s" : ""}
+								</DropdownMenuShortcut>
+							</DropdownMenuItem>
+							{/** Lines  
+                             * 
+                            	<DropdownMenuItem className="text-muted-foreground hover:text-foreground" >
+								lines
+								<DropdownMenuShortcut>
+									{activeTab?.content && activeTab?.content.split("\n").length || 0}
+								</DropdownMenuShortcut>
+							</DropdownMenuItem>
+							<DropdownMenuItem className="text-muted-foreground hover:text-foreground" >
+								Chars
+								<DropdownMenuShortcut>
+									{activeTab?.content.length || 0}
+								</DropdownMenuShortcut>
+							</DropdownMenuItem>
+							<DropdownMenuItem className="text-muted-foreground hover:text-foreground" >
+								Words
+								<DropdownMenuShortcut>
+									{activeTab?.content && activeTab?.content.split(/\s+/).filter((w) => w.length > 0).length || 0}
+								</DropdownMenuShortcut>
+							</DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" >
+								Lang
+								<DropdownMenuShortcut>
+									{activeTab?.language || "none"}
+								</DropdownMenuShortcut>
+							</DropdownMenuItem>
+                            */}
+						
+							
+						</DropdownMenuGroup>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground">
+                                Encoding
+                                <DropdownMenuShortcut>UTF-8</DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground">
+                                Font
+                                <DropdownMenuShortcut>{es.fontSize}px</DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-muted-foreground hover:text-foreground">
+                                Tab Size
+                                <DropdownMenuShortcut>{es.tabSize || 2}</DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+
+                {/** Last Save Badge */}
+                {isVisible && lastSaved && (
+                    <Badge variant="outline" className="text-muted-foreground w-fit transition-opacity duration-500">
+                        Saved: {new Date(lastSaved).toLocaleString("en-US")}
+                    </Badge>
+                )}
+            </div>
+
+
+            {parent === 'monaco' && (
+                <div className={cn("flex items-center space-x-2 mr-3")}>
+                    {isFullscreen ?
+                        <TooltipButton icon={<Minimize2 />} onClick={toggleFullscreen} content="Minimize" /> :
+                        <TooltipButton icon={<Maximize2 />} onClick={toggleFullscreen} content="Maximize" />
+                    }
+                    <DSTrigger className='ml-3' side='right' />
+                </div>
+            )
+            }
+            {
+                parent === 'snippet' && (
+                    <div className={cn("flex items-center space-x-2 mr-3")}>
+                        <Button size='icon' variant='ghost' disabled={activeTab?.content.length === 0} onClick={() => handleDelete(activeTab)}>
+                            <Trash className="h-4 w-4" />
+                        </Button>
+                    </div>
+                )
+            }
+        </div >
+    )
+}
+
+// Complete handleEditorDidMount and renderEditor with all new settings
+
+export const handleEditorDidMount = (editor, monaco, {
+    setCode,
+    editorRef,
+    customDarkTheme,
+    handleManualSave,
+    renameTab,
+    setSetState,
+    createNewTab,
+    closeTab,
+    activeTabId,
+    setOpen
+}) => {
+    setCode(editor);
+    editorRef.current = editor;
+    monaco.editor.defineTheme("customDark", customDarkTheme);
+    monaco.editor.setTheme("customDark");
+
+    // Handle Enter key for list continuation
+    editor.addCommand(
+        monaco.KeyCode.Enter,
+        () => {
+            const model = editor.getModel();
+            const position = editor.getPosition();
+            const lineContent = model.getLineContent(position.lineNumber);
+
+                  // --- BLOCKQUOTE (Notes/Important/Warning) ---
+            const blockquoteMatch = lineContent.match(/^(>\s*)+(.*)$/);
+            if (blockquoteMatch) {
+                const [fullMatch, quotes, content] = blockquoteMatch;
+                const quotePrefix = fullMatch.match(/^(>\s*)+/)[0];
+                
+                // If the content after `>` is empty, break out of blockquote
+                if (content.trim() === "") {
+                    editor.executeEdits("blockquote-break", [
+                        {
+                            range: new monaco.Range(position.lineNumber, 1, position.lineNumber, lineContent.length + 1),
+                            text: "",
+                        },
+                        {
+                            range: new monaco.Range(position.lineNumber, lineContent.length + 1, position.lineNumber, lineContent.length + 1),
+                            text: "\n",
+                        }
+                    ]);
+                    editor.setPosition({ lineNumber: position.lineNumber + 1, column: 1 });
+                } else {
+                    // Continue blockquote
+                    const newText = "\n" + quotePrefix;
+                    editor.executeEdits("blockquote-continue", [
+                        {
+                            range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+                            text: newText,
+                        },
+                    ]);
+                    editor.setPosition({
+                        lineNumber: position.lineNumber + 1,
+                        column: quotePrefix.length + 1,
+                    });
+                }
+                return true;
+            }
+
+            const taskMatch = lineContent.match(/^(\s*)-\s+\[([ xX])\]\s*(.*)$/);
+            const unorderedMatch = lineContent.match(/^(\s*)([-*+])\s+(.*)$/);
+            const orderedMatch = lineContent.match(/^(\s*)(\d+)\.\s+(.*)$/);
+
+            // --- TASK LIST ---
+            if (taskMatch) {
+                const [fullMatch, indent, checked, content] = taskMatch;
+                const isCursorAtEnd = position.column === lineContent.length + 1;
+
+                if (content.trim() === "" || (content.trim() === "" && isCursorAtEnd)) {
+                    const endOfMarker = indent.length + 6;
+                    editor.executeEdits("list-break", [
+                        {
+                            range: new monaco.Range(position.lineNumber, indent.length + 1, position.lineNumber, lineContent.length + 1),
+                            text: "",
+                        },
+                        {
+                            range: new monaco.Range(position.lineNumber, lineContent.length + 1, position.lineNumber, lineContent.length + 1),
+                            text: "\n",
+                        }
+                    ]);
+                    editor.setPosition({ lineNumber: position.lineNumber + 1, column: indent.length + 1 });
+                } else {
+                    const newText = "\n" + indent + "- [ ] ";
+                    editor.executeEdits("list-continue", [
+                        {
+                            range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+                            text: newText,
+                        },
+                    ]);
+                    editor.setPosition({
+                        lineNumber: position.lineNumber + 1,
+                        column: indent.length + 7,
+                    });
+                }
+                return true;
+            }
+
+            // --- UNORDERED LIST ---
+            else if (unorderedMatch) {
+                const [fullMatch, indent, marker, content] = unorderedMatch;
+
+                if (content.trim() === "") {
+                    editor.executeEdits("list-break", [
+                        {
+                            range: new monaco.Range(position.lineNumber, indent.length + 1, position.lineNumber, lineContent.length + 1),
+                            text: "",
+                        },
+                        {
+                            range: new monaco.Range(position.lineNumber, lineContent.length + 1, position.lineNumber, lineContent.length + 1),
+                            text: "\n",
+                        }
+                    ]);
+                    editor.setPosition({ lineNumber: position.lineNumber + 1, column: indent.length + 1 });
+                } else {
+                    const newText = "\n" + indent + marker + " ";
+                    editor.executeEdits("list-continue", [
+                        {
+                            range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+                            text: newText,
+                        },
+                    ]);
+                    editor.setPosition({
+                        lineNumber: position.lineNumber + 1,
+                        column: indent.length + marker.length + 2,
+                    });
+                }
+                return true;
+            }
+
+            // --- ORDERED LIST ---
+            else if (orderedMatch) {
+                const [fullMatch, indent, num, content] = orderedMatch;
+
+                if (content.trim() === "") {
+                    editor.executeEdits("list-break", [
+                        {
+                            range: new monaco.Range(position.lineNumber, indent.length + 1, position.lineNumber, lineContent.length + 1),
+                            text: "",
+                        },
+                        {
+                            range: new monaco.Range(position.lineNumber, lineContent.length + 1, position.lineNumber, lineContent.length + 1),
+                            text: "\n",
+                        }
+                    ]);
+                    editor.setPosition({ lineNumber: position.lineNumber + 1, column: indent.length + 1 });
+                } else {
+                    const nextNum = parseInt(num) + 1;
+                    const newText = "\n" + indent + nextNum + ". ";
+                    editor.executeEdits("list-continue", [
+                        {
+                            range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+                            text: newText,
+                        },
+                    ]);
+                    editor.setPosition({
+                        lineNumber: position.lineNumber + 1,
+                        column: indent.length + nextNum.toString().length + 3,
+                    });
+                }
+                return true;
+            }
+
+            // --- DEFAULT ENTER ---
+            else {
+                editor.trigger("keyboard", "type", { text: "\n" });
+                return false;
+            }
+        },
+        ""
+    );
+
+    // Custom keyboard shortcuts
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyS, () => {
+        handleManualSave();
+    });
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyW, () => {
+        // wrap selection with `// #region` &&  `// #endregion`
+    });
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyE, () => {
+      // INSERT `// #endregion`
+    });
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyR, () => {
+              // INSERT `// #region`
+    });
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyP, () => {
+        setSetState('showMinimap', (prev) => !prev)
+    });
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyN, () => {
+        createNewTab();
+    });
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyQ, () => {
+        closeTab(activeTabId);
+    });
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyF, () => {
+        renameTab();
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Equal, () => {
+        setSetState('fontSize', (prev) => Math.min(prev + 1, 30))
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Minus, () => {
+        setSetState('fontSize', (prev) => Math.max(prev - 1, 8))
+    });
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyT, () => {
+        createNewTab("typescript");
+    });
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyM, () => {
+        createNewTab("markdown");
+    });
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyO, () => {
+        setOpen();
+    });
+
+    editor.focus();
+};
+
+export const renderEditor = ({
+    isClient,
+    activeTab,
+    theme,
+    handleEditorChange,
+    handleEditorDidMount,
+    es,
+    LoadingComponent,
+    SpinnerComponent
+}) => {
+    const EditorLoading = () => {
+        return (
+            <div>
+                {LoadingComponent ? <LoadingComponent /> : <div>Loading...</div>}
+            </div>
+        );
+    };
+
+    if (!isClient || !activeTab) {
+        return <EditorLoading />;
+    }
+
+    return (
+        <div className="h-[calc(100vh-120px)]">
+            <Editor
+                height="97%"
+                className=""
+                loading={SpinnerComponent || <div>Loading editor...</div>}
+                language={activeTab.language}
+                value={activeTab.content}
+                theme={theme}
+                onChange={handleEditorChange}
+                onMount={handleEditorDidMount}
+                options={{
+                    // Display & Appearance
+                    minimap: { enabled: es.showMinimap },
+                    fontSize: es.fontSize,
+                    fontFamily: es.fontFamily,
+                    fontWeight: es.fontWeight,
+                    letterSpacing: es.letterSpacing,
+                    lineHeight: es.lineHeight,
+                    fontLigatures: es.fontLigatures,
+                    lineNumbers: es.showLineNumbers ? "on" : "off",
+                    renderLineHighlight: es.renderLineHighlight,
+                    renderFinalNewline: es.renderFinalNewline,
+                    rulers: es.rulers,
+                    glyphMargin: es.glyphMargin,
+                    lineDecorationsWidth: es.lineDecorationsWidth,
+
+                    // Scrolling
+                    scrollBeyondLastLine: es.scrollBeyondLastLine,
+                    smoothScrolling: es.smoothScrolling,
+                    mouseWheelZoom: es.mouseWheelZoom,
+                    mouseWheelScrollSensitivity: es.mouseWheelScrollSensitivity,
+                    fastScrollSensitivity: es.fastScrollSensitivity,
+                    scrollbar: {
+                        vertical: es.scrollbar?.vertical || 'auto',
+                        horizontal: es.scrollbar?.horizontal || 'auto',
+                        useShadows: es.scrollbar?.useShadows !== false,
+                        verticalHasArrows: es.scrollbar?.verticalHasArrows || false,
+                        horizontalHasArrows: es.scrollbar?.horizontalHasArrows || false,
+                        verticalScrollbarSize: es.scrollbar?.verticalScrollbarSize || 10,
+                        horizontalScrollbarSize: es.scrollbar?.horizontalScrollbarSize || 10,
+                        arrowSize: es.scrollbar?.arrowSize || 30,
+                    },
+
+                    // Cursor & Selection
+                    cursorStyle: es.cursorStyle,
+                    cursorBlinking: es.cursorBlinking,
+                    cursorSmoothCaretAnimation: es.cursorSmoothCaretAnimation,
+                    cursorWidth: es.cursorWidth,
+                    cursorSurroundingLines: es.cursorSurroundingLines,
+                    cursorSurroundingLinesStyle: es.cursorSurroundingLinesStyle,
+                    selectOnLineNumbers: es.selectOnLineNumbers,
+                    selectionHighlight: es.selectionHighlight,
+                    occurrencesHighlight: es.occurrencesHighlight,
+
+                    // Word Wrap & Folding
+                    wordWrap: es.wordWrap,
+                    folding: es.folding,
+                    showFoldingControls: es.showFoldingControls,
+                    foldingStrategy: es.foldingStrategy,
+                    foldingHighlight: es.foldingHighlight,
+                    foldingImportsByDefault: es.foldingImportsByDefault,
+                    unfoldOnClickAfterEndOfLine: es.unfoldOnClickAfterEndOfLine,
+
+                    // Brackets & Indentation
+                    bracketMatching: es.bracketMatching,
+                    autoClosingBrackets: es.autoClosingBrackets,
+                    autoClosingQuotes: es.autoClosingQuotes,
+                    autoIndent: es.autoIndent,
+                    tabSize: es.tabSize,
+                    insertSpaces: es.insertSpaces,
+                    detectIndentation: es.detectIndentation,
+                    renderIndentGuides: es.renderIndentGuides,
+                    highlightActiveIndentGuide: es.highlightActiveIndentGuide,
+                    guides: {
+                        bracketPairs: es.guides?.bracketPairs !== false,
+                        bracketPairsHorizontal: es.guides?.bracketPairsHorizontal || 'active',
+                        highlightActiveBracketPair: es.guides?.highlightActiveBracketPair !== false,
+                        indentation: es.guides?.indentation !== false,
+                        highlightActiveIndentation: es.guides?.highlightActiveIndentation !== false,
+                    },
+
+                    // Whitespace & Formatting
+                    renderWhitespace: es.renderWhitespace,
+                    formatOnPaste: es.formatOnPaste,
+                    formatOnType: es.formatOnType,
+
+                    // Suggestions & IntelliSense
+                    quickSuggestions: {
+                        other: es.quickSuggestions?.other !== false,
+                        comments: es.quickSuggestions?.comments || false,
+                        strings: es.quickSuggestions?.strings || false,
+                    },
+                    quickSuggestionsDelay: es.quickSuggestionsDelay || 10,
+                    acceptSuggestionOnCommitCharacter: es.acceptSuggestionOnCommitCharacter !== false,
+                    acceptSuggestionOnEnter: es.acceptSuggestionOnEnter || 'on',
+                    tabCompletion: es.tabCompletion || 'on',
+                    suggestOnTriggerCharacters: es.suggestOnTriggerCharacters !== false,
+                    wordBasedSuggestions: es.wordBasedSuggestions || 'matchingDocuments',
+                    suggestSelection: es.suggestSelection || 'first',
+                    snippetSuggestions: es.snippetSuggestions || 'top',
+                    suggest: {
+                        showKeywords: true,
+                        showSnippets: true,
+                        showFunctions: true,
+                        showConstructors: true,
+                        showFields: true,
+                        showVariables: true,
+                        showClasses: true,
+                        showStructs: true,
+                        showInterfaces: true,
+                        showModules: true,
+                        showProperties: true,
+                        showEvents: true,
+                        showOperators: true,
+                        showUnits: true,
+                        showValues: true,
+                        showConstants: true,
+                        showEnums: true,
+                        showEnumMembers: true,
+                        showColors: true,
+                        showFiles: true,
+                        showReferences: true,
+                        showFolders: true,
+                        showTypeParameters: true,
+                    },
+
+                    // Find & Replace
+                    find: {
+                        seedSearchStringFromSelection: es.find?.seedSearchStringFromSelection || 'always',
+                        autoFindInSelection: es.find?.autoFindInSelection || 'never',
+                        addExtraSpaceOnTop: es.find?.addExtraSpaceOnTop !== false,
+                        loop: es.find?.loop !== false,
+                    },
+
+                    // Links, Hover & Colors
+                    links: es.links !== false,
+                    colorDecorators: es.colorDecorators !== false,
+                    hover: {
+                        enabled: es.hover?.enabled !== false,
+                        delay: es.hover?.delay || 300,
+                        sticky: es.hover?.sticky !== false,
+                    },
+
+                    // Advanced Features
+                    codeLens: es.codeLens !== false,
+                    showUnused: es.showUnused !== false,
+                    showDeprecated: es.showDeprecated !== false,
+                    inlayHints: {
+                        enabled: es.inlayHints?.enabled || 'on',
+                        fontSize: es.inlayHints?.fontSize || 12,
+                        fontFamily: es.inlayHints?.fontFamily || '',
+                    },
+                    stickyScroll: {
+                        enabled: es.stickyScroll?.enabled || false,
+                        maxLineCount: es.stickyScroll?.maxLineCount || 5,
+                        defaultModel: es.stickyScroll?.defaultModel || 'outlineModel',
+                    },
+
+                    // Editor Behavior
+                    multiCursorModifier: es.multiCursorModifier || 'alt',
+                    contextmenu: es.contextmenu !== false,
+                    mouseStyle: es.mouseStyle || 'text',
+                    dragAndDrop: es.dragAndDrop !== false,
+                    dropIntoEditor: {
+                        enabled: es.dropIntoEditor?.enabled !== false,
+                    },
+                    emptySelectionClipboard: es.emptySelectionClipboard !== false,
+                    copyWithSyntaxHighlighting: es.copyWithSyntaxHighlighting !== false,
+
+                    // Unicode & Special Characters
+                    unicodeHighlight: {
+                        ambiguousCharacters: es.unicodeHighlight?.ambiguousCharacters !== false,
+                        invisibleCharacters: es.unicodeHighlight?.invisibleCharacters !== false,
+                        nonBasicASCII: es.unicodeHighlight?.nonBasicASCII !== false,
+                    },
+
+                    // Accessibility
+                    accessibilitySupport: es.accessibilitySupport || 'auto',
+                    accessibilityPageSize: es.accessibilityPageSize || 10,
+                    ariaLabel: es.ariaLabel || 'Editor content',
+                    screenReaderAnnounceInlineSuggestion: es.screenReaderAnnounceInlineSuggestion !== false,
+
+                    // Other Options
+                    automaticLayout: true,
+                    gotoLocation: {
+                        multiple: 'goto',
+                        multipleDefinitions: 'goto',
+                        multipleTypeDefinitions: 'goto',
+                        multipleDeclarations: 'goto',
+                        multipleImplementations: 'goto',
+                        multipleReferences: 'goto',
+                    },
+                }}
+            />
+        </div>
+    );
+};