3 files changed, 26 insertions, 10 deletions
diff --git a/src/ts/editor-standalone.ts b/src/ts/editor-standalone.ts
index 45e6573..905a3cf 100644
--- a/src/ts/editor-standalone.ts
+++ b/src/ts/editor-standalone.ts
@@ -1,3 +1,4 @@
+import type { EditorView } from 'codemirror';
 import { createEditor, setEditorTheme } from './editor';
 
 // Global API
diff --git a/src/ts/editor.ts b/src/ts/editor.ts
index 1c52569..3884317 100644
--- a/src/ts/editor.ts
+++ b/src/ts/editor.ts
@@ -1,15 +1,16 @@
-import { EditorView, minimalSetup } from 'codemirror';
-import { javascript } from '@codemirror/lang-javascript';
+import { closeBrackets } from '@codemirror/autocomplete';
 import { css } from '@codemirror/lang-css';
 import { html } from '@codemirror/lang-html';
+import { javascript } from '@codemirror/lang-javascript';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { Compartment, EditorState } from '@codemirror/state';
+import { RangeSetBuilder } from '@codemirror/state';
+import { Decoration, GutterMarker, ViewPlugin, gutter } from '@codemirror/view';
+import type { DecorationSet, ViewUpdate } from '@codemirror/view';
 import { tabloid } from '@emprespresso/codemirror-lang-tabloid';
-import { EditorState, Compartment } from '@codemirror/state';
-import { syntaxHighlighting, HighlightStyle } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import { vim } from '@replit/codemirror-vim';
-import { ViewPlugin, Decoration, DecorationSet, gutter, GutterMarker } from '@codemirror/view';
-import { RangeSetBuilder } from '@codemirror/state';
-import { closeBrackets } from '@codemirror/autocomplete';
+import { EditorView, minimalSetup } from 'codemirror';
 
 const themeConfig = new Compartment();
 
@@ -28,7 +29,7 @@ function highlightWhitespace() {
                 this.decorations = this.buildDecorations(view);
             }
 
-            update(update: any) {
+            update(update: ViewUpdate) {
                 if (update.docChanged || update.viewportChanged || update.selectionSet) {
                     this.decorations = this.buildDecorations(update.view);
                 }
@@ -41,7 +42,7 @@ function highlightWhitespace() {
                 // Only show whitespace in selected ranges
                 if (!selection.empty) {
                     const text = view.state.doc.sliceString(selection.from, selection.to);
-                    let pos = selection.from;
+                    const pos = selection.from;
 
                     for (let i = 0; i < text.length; i++) {
                         const char = text[i];
@@ -84,7 +85,7 @@ const relativeLineNumberGutter = ViewPlugin.fromClass(
     class {
         constructor(private view: EditorView) {}
 
-        update(update: any) {
+        update(update: ViewUpdate) {
             // Force update on selection change
             if (update.selectionSet || update.docChanged || update.viewportChanged) {
                 this.view.requestMeasure();
@@ -160,10 +161,17 @@ const lightTheme = EditorView.theme({
         border: 'none',
         borderRight: '1px solid var(--border)',
     },
+    '.cm-lineNumbers': {
+        minWidth: '3ch',
+    },
+    '.cm-lineNumbers .cm-gutterElement': {
+        width: '100%',
+    },
     '.cm-activeLineGutter': {
         backgroundColor: 'var(--primary-light)',
         color: 'var(--text)',
     },
+
     '.cm-activeLine': {
         backgroundColor: 'rgba(229, 106, 166, 0.08)',
     },
@@ -206,6 +214,12 @@ const darkTheme = EditorView.theme(
             border: 'none',
             borderRight: '1px solid var(--border)',
         },
+        '.cm-lineNumbers': {
+            minWidth: '3ch',
+        },
+        '.cm-lineNumbers .cm-gutterElement': {
+            width: '100%',
+        },
         '.cm-activeLineGutter': {
             backgroundColor: 'rgba(229, 106, 166, 0.2)',
             color: 'var(--text)',
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 3c8c458..73e03e4 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1,5 +1,6 @@
 declare module 'prismjs';
 declare module 'prismjs/components/*';
+declare module '@emprespresso/codemirror-lang-tabloid';
 
 interface Window {
     ASSET_BASE?: string;