@softwarity/geojson-editor 1.0.17 → 1.0.18

package/src/geojson-editor.ts

@@ -1,177 +1,56 @@
 import styles from './geojson-editor.css?inline';
 import { getTemplate } from './geojson-editor.template.js';
-import type { Feature, FeatureCollection } from 'geojson';
-
-// ========== Type Definitions ==========
-
-/** Geometry type names */
-export type GeometryType = 'Point' | 'MultiPoint' | 'LineString' | 'MultiLineString' | 'Polygon' | 'MultiPolygon';
-
-/** Position in the editor (line and column) */
-export interface CursorPosition {
-  line: number;
-  column: number;
-}
-
-/** Options for set/add/insertAt/open methods */
-export interface SetOptions {
-  /**
-   * Attributes to collapse after loading.
-   * - string[]: List of attribute names (e.g., ['coordinates', 'geometry'])
-   * - function: Dynamic function (feature, index) => string[]
-   * - '$root': Special keyword to collapse entire features
-   * - Empty array: No auto-collapse
-   * @default ['coordinates']
-   */
-  collapsed?: string[] | ((feature: Feature, index: number) => string[]);
-}
-
-/** Theme configuration */
-export interface ThemeConfig {
-  bgColor?: string;
-  textColor?: string;
-  caretColor?: string;
-  gutterBg?: string;
-  gutterBorder?: string;
-  gutterText?: string;
-  jsonKey?: string;
-  jsonString?: string;
-  jsonNumber?: string;
-  jsonBoolean?: string;
-  jsonNull?: string;
-  jsonPunct?: string;
-  jsonError?: string;
-  controlColor?: string;
-  controlBg?: string;
-  controlBorder?: string;
-  geojsonKey?: string;
-  geojsonType?: string;
-  geojsonTypeInvalid?: string;
-  jsonKeyInvalid?: string;
-}
-
-/** Theme settings for dark and light modes */
-export interface ThemeSettings {
-  dark?: ThemeConfig;
-  light?: ThemeConfig;
-}
-
-/** Color metadata for a line */
-interface ColorMeta {
-  attributeName: string;
-  color: string;
-}
-
-/** Boolean metadata for a line */
-interface BooleanMeta {
-  attributeName: string;
-  value: boolean;
-}
-
-/** Collapse button metadata */
-interface CollapseButtonMeta {
-  nodeKey: string;
-  nodeId: string;
-  isCollapsed: boolean;
-}
-
-/** Visibility button metadata */
-interface VisibilityButtonMeta {
-  featureKey: string;
-  isHidden: boolean;
-}
-
-/** Line metadata */
-interface LineMeta {
-  colors: ColorMeta[];
-  booleans: BooleanMeta[];
-  collapseButton: CollapseButtonMeta | null;
-  visibilityButton: VisibilityButtonMeta | null;
-  isHidden: boolean;
-  isCollapsed: boolean;
-  featureKey: string | null;
-}
-
-/** Visible line data */
-interface VisibleLine {
-  index: number;
-  content: string;
-  meta: LineMeta | undefined;
-}
-
-/** Feature range in the editor */
-interface FeatureRange {
-  startLine: number;
-  endLine: number;
-  featureIndex: number;
-}
-
-/** Node range info */
-interface NodeRangeInfo {
-  startLine: number;
-  endLine: number;
-  nodeKey?: string;
-  isRootFeature?: boolean;
-}
-
-/** Collapsible range info */
-interface CollapsibleRange extends NodeRangeInfo {
-  nodeId: string;
-  openBracket: string;
-}
-
-/** Editor state snapshot for undo/redo */
-interface EditorSnapshot {
-  lines: string[];
-  cursorLine: number;
-  cursorColumn: number;
-  timestamp: number;
-}
-
-/** Bracket count result */
-interface BracketCount {
-  open: number;
-  close: number;
-}
-
-/** Context stack item */
-interface ContextStackItem {
-  context: string;
-  isArray: boolean;
-}
-
-/** Input types accepted by API methods */
-export type FeatureInput = Feature | Feature[] | FeatureCollection;
-
-// Version injected by Vite build from package.json
-const VERSION = typeof __VERSION__ !== 'undefined' ? __VERSION__ : 'dev';
-
-// GeoJSON constants
-const GEOJSON_KEYS: string[] = ['type', 'geometry', 'properties', 'coordinates', 'id', 'features'];
-const GEOMETRY_TYPES: GeometryType[] = ['Point', 'MultiPoint', 'LineString', 'MultiLineString', 'Polygon', 'MultiPolygon'];
-
-// Pre-compiled regex patterns for performance (avoid re-creation on each call)
-const RE_CONTEXT_GEOMETRY = /"geometry"\s*:/;
-const RE_CONTEXT_PROPERTIES = /"properties"\s*:/;
-const RE_CONTEXT_FEATURES = /"features"\s*:/;
-const RE_COLLAPSED_BRACKET = /^(\s*"[^"]+"\s*:\s*)([{\[])/;
-const RE_COLLAPSED_ROOT = /^(\s*)([{\[]),?\s*$/;
-const RE_ESCAPE_AMP = /&/g;
-const RE_ESCAPE_LT = /</g;
-const RE_ESCAPE_GT = />/g;
-const RE_PUNCTUATION = /([{}[\],:])/g;
-const RE_JSON_KEYS = /"([^"]+)"(<span class="json-punctuation">:<\/span>)/g;
-const RE_TYPE_VALUES = /<span class="geojson-key">"type"<\/span><span class="json-punctuation">:<\/span>(\s*)"([^"]*)"/g;
-const RE_STRING_VALUES = /(<span class="json-punctuation">:<\/span>)(\s*)"([^"]*)"/g;
-const RE_COLOR_HEX = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
-const RE_NUMBERS_COLON = /(<span class="json-punctuation">:<\/span>)(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi;
-const RE_NUMBERS_ARRAY = /(<span class="json-punctuation">[\[,]<\/span>)(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi;
-const RE_NUMBERS_START = /^(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gim;
-const RE_BOOLEANS = /(<span class="json-punctuation">:<\/span>)(\s*)(true|false)/g;
-const RE_NULL = /(<span class="json-punctuation">:<\/span>)(\s*)(null)/g;
-const RE_UNRECOGNIZED = /(<\/span>|^)([^<]+)(<span|$)/g;
-const RE_WHITESPACE_ONLY = /^\s*$/;
-const RE_WHITESPACE_SPLIT = /(\s+)/;
+import type { Feature } from 'geojson';
+
+// ========== Imports from extracted modules ==========
+import type {
+  SetOptions,
+  ThemeSettings
+} from './types.js';
+
+import type {
+  CursorPosition,
+  FeatureInput,
+  LineMeta,
+  VisibleLine,
+  FeatureRange,
+  NodeRangeInfo,
+  EditorSnapshot,
+  CollapsedZoneContext,
+  CollapsedNodeInfo
+} from './internal-types.js';
+
+import {
+  VERSION,
+  RE_CONTEXT_GEOMETRY,
+  RE_CONTEXT_PROPERTIES,
+  RE_CONTEXT_FEATURES,
+  RE_ATTR_VALUE,
+  RE_ATTR_VALUE_SINGLE,
+  RE_NORMALIZE_COLOR,
+  RE_COLOR_HEX,
+  RE_IS_FEATURE,
+  RE_KV_MATCH,
+  RE_ROOT_MATCH,
+  RE_BRACKET_POS,
+  RE_IS_WORD_CHAR,
+  RE_ATTR_AND_BOOL_VALUE,
+  RE_TO_KEBAB,
+  RE_OPEN_BRACES,
+  RE_CLOSE_BRACES,
+  RE_OPEN_BRACKETS,
+  RE_CLOSE_BRACKET
+} from './constants.js';
+
+import { createElement, getFeatureKey, countBrackets, parseSelectorToHostRule } from './utils.js';
+import { validateGeoJSON, normalizeToFeatures } from './validation.js';
+import { highlightSyntax, namedColorToHex, isNamedColor } from './syntax-highlighter.js';
+
+// Re-export public types
+export type { SetOptions, ThemeConfig, ThemeSettings } from './types.js';
+
+// Alias for minification
+const _ce = createElement;
 
 /**
  * GeoJSON Editor Web Component
@@ -211,8 +90,8 @@ class GeoJsonEditor extends HTMLElement {
   selectionEnd: CursorPosition | null = null;
 
   // ========== Debounce ==========
-  private renderTimer: number | null = null;
-  private inputTimer: number | null = null;
+  private renderTimer: ReturnType<typeof setTimeout> | undefined = undefined;
+  private inputTimer: ReturnType<typeof setTimeout> | undefined = undefined;
 
   // ========== Theme ==========
   themes: ThemeSettings = { dark: {}, light: {} };
@@ -229,19 +108,38 @@ class GeoJsonEditor extends HTMLElement {
   private _isSelecting: boolean = false;
   private _isComposing: boolean = false;
   private _blockRender: boolean = false;
+  private _insertMode: boolean = true; // true = insert, false = overwrite
   private _charWidth: number | null = null;
   private _contextMapCache: Map<number, string> | null = null;
   private _contextMapLinesLength: number = 0;
   private _contextMapFirstLine: string | undefined = undefined;
   private _contextMapLastLine: string | undefined = undefined;
 
+  // ========== Cached DOM Elements ==========
+  private _viewport: HTMLElement | null = null;
+  private _linesContainer: HTMLElement | null = null;
+  private _scrollContent: HTMLElement | null = null;
+  private _hiddenTextarea: HTMLTextAreaElement | null = null;
+  private _gutterContent: HTMLElement | null = null;
+  private _gutterScrollContent: HTMLElement | null = null;
+  private _gutterScroll: HTMLElement | null = null;
+  private _gutter: HTMLElement | null = null;
+  private _clearBtn: HTMLButtonElement | null = null;
+  private _editorWrapper: HTMLElement | null = null;
+  private _placeholderLayer: HTMLElement | null = null;
+  private _editorPrefix: HTMLElement | null = null;
+  private _editorSuffix: HTMLElement | null = null;
+
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
   }
 
+  // Alias for shadowRoot.getElementById (minification)
+  private _id(id: string) { return this.shadowRoot!.getElementById(id); }
+
   // ========== Render Cache ==========
-  _invalidateRenderCache() {
+  private _invalidateRenderCache() {
     this._lastStartIndex = -1;
     this._lastEndIndex = -1;
     this._lastTotalLines = -1;
@@ -253,7 +151,7 @@ class GeoJsonEditor extends HTMLElement {
    * Create a snapshot of current editor state
    * @returns {Object} State snapshot
    */
-  _createSnapshot() {
+  private _createSnapshot() {
     return {
       lines: [...this.lines],
       cursorLine: this.cursorLine,
@@ -264,9 +162,8 @@ class GeoJsonEditor extends HTMLElement {
 
   /**
    * Restore editor state from snapshot
-   * @param {Object} snapshot - State to restore
    */
-  _restoreSnapshot(snapshot) {
+  private _restoreSnapshot(snapshot: EditorSnapshot): void {
     this.lines = [...snapshot.lines];
     this.cursorLine = snapshot.cursorLine;
     this.cursorColumn = snapshot.cursorColumn;
@@ -281,7 +178,7 @@ class GeoJsonEditor extends HTMLElement {
    * Save current state to undo stack before making changes
    * @param {string} actionType - Type of action (insert, delete, paste, etc.)
    */
-  _saveToHistory(actionType = 'edit') {
+  private _saveToHistory(actionType = 'edit') {
     const now = Date.now();
     const shouldGroup = (
       actionType === this._lastActionType &&
@@ -310,7 +207,7 @@ class GeoJsonEditor extends HTMLElement {
    * Undo last action
    * @returns {boolean} True if undo was performed
    */
-  undo() {
+  undo(): boolean {
     if (this._undoStack.length === 0) return false;
 
     // Save current state to redo stack
@@ -318,7 +215,7 @@ class GeoJsonEditor extends HTMLElement {
 
     // Restore previous state
     const previousState = this._undoStack.pop();
-    this._restoreSnapshot(previousState);
+    if (previousState) this._restoreSnapshot(previousState);
 
     // Reset action tracking
     this._lastActionType = null;
@@ -331,7 +228,7 @@ class GeoJsonEditor extends HTMLElement {
    * Redo previously undone action
    * @returns {boolean} True if redo was performed
    */
-  redo() {
+  redo(): boolean {
     if (this._redoStack.length === 0) return false;
 
     // Save current state to undo stack
@@ -339,7 +236,7 @@ class GeoJsonEditor extends HTMLElement {
 
     // Restore next state
     const nextState = this._redoStack.pop();
-    this._restoreSnapshot(nextState);
+    if (nextState) this._restoreSnapshot(nextState);
 
     // Reset action tracking
     this._lastActionType = null;
@@ -351,7 +248,7 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Clear undo/redo history
    */
-  clearHistory() {
+  clearHistory(): void {
     this._undoStack = [];
     this._redoStack = [];
     this._lastActionType = null;
@@ -362,7 +259,7 @@ class GeoJsonEditor extends HTMLElement {
    * Check if undo is available
    * @returns {boolean}
    */
-  canUndo() {
+  canUndo(): boolean {
     return this._undoStack.length > 0;
   }
 
@@ -370,21 +267,19 @@ class GeoJsonEditor extends HTMLElement {
    * Check if redo is available
    * @returns {boolean}
    */
-  canRedo() {
+  canRedo(): boolean {
     return this._redoStack.length > 0;
   }
 
   // ========== Unique ID Generation ==========
-  _generateNodeId() {
+  private _generateNodeId() {
     return `node_${++this._nodeIdCounter}`;
   }
 
   /**
    * Check if a line is inside a collapsed node (hidden lines between opening and closing)
-   * @param {number} lineIndex - The line index to check
-   * @returns {Object|null} - The collapsed range info or null
    */
-  _getCollapsedRangeForLine(lineIndex) {
+  private _getCollapsedRangeForLine(lineIndex: number): CollapsedNodeInfo | null {
     for (const [nodeId, info] of this._nodeIdToLines) {
       // Lines strictly between opening and closing are hidden
       if (this.collapsedNodes.has(nodeId) && lineIndex > info.startLine && lineIndex < info.endLine) {
@@ -396,10 +291,8 @@ class GeoJsonEditor extends HTMLElement {
 
   /**
    * Check if cursor is on the closing line of a collapsed node
-   * @param {number} lineIndex - The line index to check
-   * @returns {Object|null} - The collapsed range info or null
    */
-  _getCollapsedClosingLine(lineIndex) {
+  private _getCollapsedClosingLine(lineIndex: number): CollapsedNodeInfo | null {
     for (const [nodeId, info] of this._nodeIdToLines) {
       if (this.collapsedNodes.has(nodeId) && lineIndex === info.endLine) {
         return { nodeId, ...info };
@@ -410,10 +303,8 @@ class GeoJsonEditor extends HTMLElement {
 
   /**
    * Get the position of the closing bracket on a line
-   * @param {string} line - The line content
-   * @returns {number} - Position of bracket or -1
    */
-  _getClosingBracketPos(line) {
+  private _getClosingBracketPos(line: string): number {
     // Find the last ] or } on the line
     const lastBracket = Math.max(line.lastIndexOf(']'), line.lastIndexOf('}'));
     return lastBracket;
@@ -421,29 +312,12 @@ class GeoJsonEditor extends HTMLElement {
 
   /**
    * Check if cursor is on the opening line of a collapsed node
-   * @param {number} lineIndex - The line index to check  
-   * @returns {Object|null} - The collapsed range info or null
    */
-  _getCollapsedNodeAtLine(lineIndex) {
+  private _getCollapsedNodeAtLine(lineIndex: number): CollapsedNodeInfo | null {
     const nodeId = this._lineToNodeId.get(lineIndex);
     if (nodeId && this.collapsedNodes.has(nodeId)) {
       const info = this._nodeIdToLines.get(nodeId);
-      return { nodeId, ...info };
-    }
-    return null;
-  }
-
-  /**
-   * Check if cursor is on a line that has a collapsible node (expanded or collapsed)
-   * @param {number} lineIndex - The line index to check  
-   * @returns {Object|null} - The node info with isCollapsed flag or null
-   */
-  _getCollapsibleNodeAtLine(lineIndex) {
-    const nodeId = this._lineToNodeId.get(lineIndex);
-    if (nodeId) {
-      const info = this._nodeIdToLines.get(nodeId);
-      const isCollapsed = this.collapsedNodes.has(nodeId);
-      return { nodeId, isCollapsed, ...info };
+      if (info) return { nodeId, ...info };
     }
     return null;
   }
@@ -451,16 +325,14 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Find the innermost expanded node that contains the given line
    * Used for Shift+Tab to collapse the parent node from anywhere inside it
-   * @param {number} lineIndex - The line index to check  
-   * @returns {Object|null} - The containing node info or null
    */
-  _getContainingExpandedNode(lineIndex) {
-    let bestMatch = null;
-    
+  private _getContainingExpandedNode(lineIndex: number): CollapsedNodeInfo | null {
+    let bestMatch: CollapsedNodeInfo | null = null;
+
     for (const [nodeId, info] of this._nodeIdToLines) {
       // Skip collapsed nodes
       if (this.collapsedNodes.has(nodeId)) continue;
-      
+
       // Check if line is within this node's range
       if (lineIndex >= info.startLine && lineIndex <= info.endLine) {
         // Prefer the innermost (smallest) containing node
@@ -469,15 +341,14 @@ class GeoJsonEditor extends HTMLElement {
         }
       }
     }
-    
+
     return bestMatch;
   }
 
   /**
    * Delete an entire collapsed node (opening line to closing line)
-   * @param {Object} range - The range info {startLine, endLine}
    */
-  _deleteCollapsedNode(range) {
+  private _deleteCollapsedNode(range: CollapsedNodeInfo): void {
     this._saveToHistory('delete');
 
     // Remove all lines from startLine to endLine
@@ -495,7 +366,7 @@ class GeoJsonEditor extends HTMLElement {
    * Rebuild nodeId mappings after content changes
    * Preserves collapsed state by matching nodeKey + sequential occurrence
    */
-  _rebuildNodeIdMappings() {
+  private _rebuildNodeIdMappings() {
     // Save old state to try to preserve collapsed nodes
     const oldCollapsed = new Set(this.collapsedNodes);
     const oldNodeKeyMap = new Map(); // nodeId -> nodeKey
@@ -524,26 +395,29 @@ class GeoJsonEditor extends HTMLElement {
       const line = this.lines[i];
       
       // Match "key": { or "key": [
-      const kvMatch = line.match(/^\s*"([^"]+)"\s*:\s*([{\[])/);
+      const kvMatch = line.match(RE_KV_MATCH);
       // Also match standalone { or {, (root Feature objects)
-      const rootMatch = !kvMatch && line.match(/^\s*([{\[]),?\s*$/);
+      const rootMatch = !kvMatch && line.match(RE_ROOT_MATCH);
       
       if (!kvMatch && !rootMatch) continue;
-      
-      let nodeKey, openBracket;
-      
+
+      let nodeKey: string;
+      let openBracket: string;
+
       if (kvMatch) {
         nodeKey = kvMatch[1];
         openBracket = kvMatch[2];
-      } else {
+      } else if (rootMatch) {
         // Root object - use special key based on line number and bracket type
         openBracket = rootMatch[1];
         nodeKey = `__root_${openBracket}_${i}`;
+      } else {
+        continue;
       }
       
       // Check if closes on same line
       const rest = line.substring(line.indexOf(openBracket) + 1);
-      const counts = this._countBrackets(rest, openBracket);
+      const counts = countBrackets(rest, openBracket);
       if (counts.close > counts.open) continue;
       
       const endLine = this._findClosingLine(i, openBracket);
@@ -577,10 +451,11 @@ class GeoJsonEditor extends HTMLElement {
   // ========== Lifecycle ==========
   connectedCallback() {
     this.render();
+    this._cacheElements();
     this.setupEventListeners();
     this.updatePrefixSuffix();
     this.updateThemeCSS();
-    
+
     if (this.value) {
       this.setValue(this.value);
     }
@@ -601,7 +476,7 @@ class GeoJsonEditor extends HTMLElement {
     }
   }
 
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {
     if (oldValue === newValue) return;
 
     switch (name) {
@@ -629,27 +504,48 @@ class GeoJsonEditor extends HTMLElement {
 
   // ========== Initial Render ==========
   render() {
-    const styleEl = document.createElement('style');
+    const shadowRoot = this.shadowRoot!;
+    const styleEl = _ce('style');
     styleEl.textContent = styles;
-    
-    const template = document.createElement('div');
+
+    const template = _ce('div');
     template.innerHTML = getTemplate(this.placeholder, VERSION);
-    
-    this.shadowRoot.innerHTML = '';
-    this.shadowRoot.appendChild(styleEl);
+
+    shadowRoot.innerHTML = '';
+    shadowRoot.appendChild(styleEl);
     while (template.firstChild) {
-      this.shadowRoot.appendChild(template.firstChild);
+      shadowRoot.appendChild(template.firstChild);
     }
   }
 
+  // ========== DOM Element Cache ==========
+  private _cacheElements() {
+    this._viewport = this._id('viewport');
+    this._linesContainer = this._id('linesContainer');
+    this._scrollContent = this._id('scrollContent');
+    this._hiddenTextarea = this._id('hiddenTextarea') as HTMLTextAreaElement;
+    this._gutterContent = this._id('gutterContent');
+    this._gutterScrollContent = this._id('gutterScrollContent');
+    this._gutterScroll = this._id('gutterScroll');
+    this._gutter = this.shadowRoot!.querySelector('.gutter');
+    this._clearBtn = this._id('clearBtn') as HTMLButtonElement;
+    this._editorWrapper = this.shadowRoot!.querySelector('.editor-wrapper');
+    this._placeholderLayer = this._id('placeholderLayer');
+    this._editorPrefix = this._id('editorPrefix');
+    this._editorSuffix = this._id('editorSuffix');
+  }
+
   // ========== Event Listeners ==========
   setupEventListeners() {
-    const hiddenTextarea = this.shadowRoot.getElementById('hiddenTextarea');
-    const viewport = this.shadowRoot.getElementById('viewport');
-    const gutterContent = this.shadowRoot.getElementById('gutterContent');
-    const gutter = this.shadowRoot.querySelector('.gutter');
-    const clearBtn = this.shadowRoot.getElementById('clearBtn');
-    const editorWrapper = this.shadowRoot.querySelector('.editor-wrapper');
+    const hiddenTextarea = this._hiddenTextarea;
+    const viewport = this._viewport;
+    const gutterContent = this._gutterContent;
+    const gutter = this._gutter;
+    const clearBtn = this._clearBtn;
+    const editorWrapper = this._editorWrapper;
+
+    // Guard: all elements must exist
+    if (!hiddenTextarea || !viewport || !gutterContent || !gutter || !clearBtn || !editorWrapper) return;
 
     // Mouse selection state
     this._isSelecting = false;
@@ -658,7 +554,7 @@ class GeoJsonEditor extends HTMLElement {
     // Editor inline control clicks (color swatches, checkboxes, visibility icons)
     // Use capture phase to intercept before mousedown
     viewport.addEventListener('click', (e) => {
-      this.handleEditorClick(e);
+      this.handleEditorClick(e as MouseEvent);
     }, true);
 
     viewport.addEventListener('mousedown', (e: MouseEvent) => {
@@ -687,13 +583,13 @@ class GeoJsonEditor extends HTMLElement {
           return;
         }
       }
-      
+
       // Prevent default to avoid losing focus after click
       e.preventDefault();
-      
+
       // Calculate click position
       const pos = this._getPositionFromClick(e);
-      
+
       if (e.shiftKey && this.selectionStart) {
         // Shift+click: extend selection
         this.selectionEnd = pos;
@@ -707,7 +603,7 @@ class GeoJsonEditor extends HTMLElement {
         this.selectionEnd = null;
         this._isSelecting = true;
       }
-      
+
       // Focus textarea
       hiddenTextarea.focus();
       this._invalidateRenderCache();
@@ -715,19 +611,18 @@ class GeoJsonEditor extends HTMLElement {
     });
     
     // Mouse move for drag selection
-    viewport.addEventListener('mousemove', (e) => {
+    viewport.addEventListener('mousemove', (e: MouseEvent) => {
       if (!this._isSelecting) return;
-      
       const pos = this._getPositionFromClick(e);
       this.selectionEnd = pos;
       this.cursorLine = pos.line;
       this.cursorColumn = pos.column;
-      
+
       // Auto-scroll when near edges
       const rect = viewport.getBoundingClientRect();
       const scrollMargin = 30; // pixels from edge to start scrolling
       const scrollSpeed = 20; // pixels to scroll per frame
-      
+
       if (e.clientY < rect.top + scrollMargin) {
         // Near top edge, scroll up
         viewport.scrollTop -= scrollSpeed;
@@ -735,7 +630,7 @@ class GeoJsonEditor extends HTMLElement {
         // Near bottom edge, scroll down
         viewport.scrollTop += scrollSpeed;
       }
-      
+
       this._invalidateRenderCache();
       this.scheduleRender();
     });
@@ -763,7 +658,7 @@ class GeoJsonEditor extends HTMLElement {
     viewport.addEventListener('scroll', () => {
       if (isRendering) return;
       this.syncGutterScroll();
-      
+
       // Use requestAnimationFrame to batch scroll updates
       if (!this._scrollRaf) {
         this._scrollRaf = requestAnimationFrame(() => {
@@ -794,38 +689,38 @@ class GeoJsonEditor extends HTMLElement {
     });
 
     hiddenTextarea.addEventListener('keydown', (e) => {
-      this.handleKeydown(e);
+      this.handleKeydown(e as KeyboardEvent);
     });
 
     // Paste handling
     hiddenTextarea.addEventListener('paste', (e) => {
-      this.handlePaste(e);
+      this.handlePaste(e as ClipboardEvent);
     });
 
     // Copy handling
     hiddenTextarea.addEventListener('copy', (e) => {
-      this.handleCopy(e);
+      this.handleCopy(e as ClipboardEvent);
     });
 
     // Cut handling
     hiddenTextarea.addEventListener('cut', (e) => {
-      this.handleCut(e);
+      this.handleCut(e as ClipboardEvent);
     });
 
     // Gutter interactions
     gutterContent.addEventListener('click', (e) => {
-      this.handleGutterClick(e);
+      this.handleGutterClick(e as MouseEvent);
     });
-    
+
     // Prevent gutter from stealing focus
     gutter.addEventListener('mousedown', (e) => {
       e.preventDefault();
     });
 
     // Wheel on gutter -> scroll viewport
-    gutter.addEventListener('wheel', (e: WheelEvent) => {
+    gutter.addEventListener('wheel', (e) => {
       e.preventDefault();
-      viewport.scrollTop += e.deltaY;
+      viewport.scrollTop += (e as WheelEvent).deltaY;
     });
 
     // Clear button
@@ -842,7 +737,7 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Set the editor content from a string value
    */
-  setValue(value, autoCollapse = true) {
+  setValue(value: string | null, autoCollapse = true): void {
     // Save to history only if there's existing content
     if (this.lines.length > 0) {
       this._saveToHistory('setValue');
@@ -941,7 +836,7 @@ class GeoJsonEditor extends HTMLElement {
       for (let i = 0; i < this.lines.length; i++) {
         const line = this.lines[i];
         
-        if (!inFeature && /"type"\s*:\s*"Feature"/.test(line)) {
+        if (!inFeature && RE_IS_FEATURE.test(line)) {
           // Find opening brace
           let startLine = i;
           for (let j = i; j >= 0; j--) {
@@ -957,7 +852,7 @@ class GeoJsonEditor extends HTMLElement {
           
           // Count braces from start to current line
           for (let k = startLine; k <= i; k++) {
-            const counts = this._countBrackets(this.lines[k], '{');
+            const counts = countBrackets(this.lines[k], '{');
             if (k === startLine) {
               braceDepth += (counts.open - 1) - counts.close;
             } else {
@@ -966,10 +861,10 @@ class GeoJsonEditor extends HTMLElement {
           }
           
           if (featureIndex < parsed.features.length) {
-            currentFeatureKey = this._getFeatureKey(parsed.features[featureIndex]);
+            currentFeatureKey = getFeatureKey(parsed.features[featureIndex]);
           }
         } else if (inFeature) {
-          const counts = this._countBrackets(line, '{');
+          const counts = countBrackets(line, '{');
           braceDepth += counts.open - counts.close;
           
           if (braceDepth <= 0) {
@@ -1001,7 +896,7 @@ class GeoJsonEditor extends HTMLElement {
     
     for (let i = 0; i < this.lines.length; i++) {
       const line = this.lines[i];
-      const meta = {
+      const meta: LineMeta = {
         colors: [],
         booleans: [],
         collapseButton: null,
@@ -1011,18 +906,24 @@ class GeoJsonEditor extends HTMLElement {
         featureKey: null
       };
       
-      // Detect colors
-      const colorRegex = /"([\w-]+)"\s*:\s*"(#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}))"/g;
-      let colorMatch;
-      while ((colorMatch = colorRegex.exec(line)) !== null) {
-        meta.colors.push({ attributeName: colorMatch[1], color: colorMatch[2] });
-      }
-      
-      // Detect booleans
-      const boolRegex = /"([\w-]+)"\s*:\s*(true|false)/g;
-      let boolMatch;
-      while ((boolMatch = boolRegex.exec(line)) !== null) {
-        meta.booleans.push({ attributeName: boolMatch[1], value: boolMatch[2] === 'true' });
+      // Detect colors and booleans in a single pass
+      RE_ATTR_VALUE.lastIndex = 0;
+      let match: RegExpExecArray | null;
+      while ((match = RE_ATTR_VALUE.exec(line)) !== null) {
+        const [, attributeName, strValue, boolValue] = match;
+        if (boolValue) {
+          // Boolean value
+          meta.booleans.push({ attributeName, value: boolValue === 'true' });
+        } else if (strValue) {
+          // String value - check if it's a color
+          if (RE_COLOR_HEX.test(strValue)) {
+            // Hex color (#fff or #ffffff)
+            meta.colors.push({ attributeName, color: strValue });
+          } else if (isNamedColor(strValue)) {
+            // Named CSS color (red, blue, etc.) - validated via browser
+            meta.colors.push({ attributeName, color: strValue });
+          }
+        }
       }
       
       // Check if line starts a collapsible node
@@ -1084,8 +985,6 @@ class GeoJsonEditor extends HTMLElement {
     
     // Reset render cache to force re-render
     this._invalidateRenderCache();
-    this._lastEndIndex = -1;
-    this._lastTotalLines = -1;
   }
 
   // ========== Rendering ==========
@@ -1093,7 +992,7 @@ class GeoJsonEditor extends HTMLElement {
   scheduleRender() {
     if (this.renderTimer) return;
     this.renderTimer = requestAnimationFrame(() => {
-      this.renderTimer = null;
+      this.renderTimer = undefined;
       this.renderViewport();
     });
   }
@@ -1103,10 +1002,9 @@ class GeoJsonEditor extends HTMLElement {
     if (this._blockRender) {
       return;
     }
-    const viewport = this.shadowRoot.getElementById('viewport');
-    const linesContainer = this.shadowRoot.getElementById('linesContainer');
-    const scrollContent = this.shadowRoot.getElementById('scrollContent');
-    const gutterContent = this.shadowRoot.getElementById('gutterContent');
+    const viewport = this._viewport;
+    const linesContainer = this._linesContainer;
+    const scrollContent = this._scrollContent;
 
     if (!viewport || !linesContainer) return;
     
@@ -1142,17 +1040,16 @@ class GeoJsonEditor extends HTMLElement {
     
     // Build context map for syntax highlighting
     const contextMap = this._buildContextMap();
-    
+
     // Check if editor is focused (for cursor display)
-    const editorWrapper = this.shadowRoot.querySelector('.editor-wrapper');
-    const isFocused = editorWrapper?.classList.contains('focused');
+    const isFocused = this._editorWrapper?.classList.contains('focused');
     
     // Render visible lines
     const fragment = document.createDocumentFragment();
     
     // Handle empty editor: render an empty line with cursor
     if (totalLines === 0) {
-      const lineEl = document.createElement('div');
+      const lineEl = _ce('div');
       lineEl.className = 'line empty-line';
       lineEl.dataset.lineIndex = '0';
       if (isFocused) {
@@ -1169,7 +1066,7 @@ class GeoJsonEditor extends HTMLElement {
       const lineData = this.visibleLines[i];
       if (!lineData) continue;
       
-      const lineEl = document.createElement('div');
+      const lineEl = _ce('div');
       lineEl.className = 'line';
       lineEl.dataset.lineIndex = String(lineData.index);
       
@@ -1188,8 +1085,8 @@ class GeoJsonEditor extends HTMLElement {
       }
       
       // Highlight syntax and add cursor if this is the cursor line and editor is focused
-      const context = contextMap.get(lineData.index);
-      let html = this._highlightSyntax(lineData.content, context, lineData.meta);
+      const context = contextMap.get(lineData.index) || 'Feature';
+      let html = highlightSyntax(lineData.content, context, lineData.meta);
       
       // Add selection highlight if line is in selection
       if (isFocused && this._hasSelection()) {
@@ -1216,20 +1113,27 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Insert cursor element at the specified column position
    * Uses absolute positioning to avoid affecting text layout
+   * In overwrite mode, cursor is a block covering the next character
    */
-  _insertCursor(column) {
-    // Calculate cursor position in pixels using character width
+  private _insertCursor(column: number): string {
     const charWidth = this._getCharWidth();
     const left = column * charWidth;
-    return `<span class="cursor" style="left: ${left}px"></span>`;
+    if (this._insertMode) {
+      // Insert mode: thin line cursor
+      return `<span class="cursor" style="left: ${left}px"></span>`;
+    } else {
+      // Overwrite mode: block cursor covering the character
+      return `<span class="cursor cursor-block" style="left: ${left}px; width: ${charWidth}px"></span>`;
+    }
   }
 
   /**
    * Add selection highlight to a line
    */
-  _addSelectionHighlight(html, lineIndex, content) {
-    const { start, end } = this._normalizeSelection();
-    if (!start || !end) return html;
+  private _addSelectionHighlight(html: string, lineIndex: number, content: string): string {
+    const sel = this._normalizeSelection();
+    if (!sel) return html;
+    const { start, end } = sel;
     
     // Check if this line is in the selection
     if (lineIndex < start.line || lineIndex > end.line) return html;
@@ -1266,20 +1170,25 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Get character width for monospace font
    */
-  _getCharWidth() {
+  private _getCharWidth(): number {
     if (!this._charWidth) {
-      const canvas = document.createElement('canvas');
+      const canvas = _ce('canvas') as HTMLCanvasElement;
       const ctx = canvas.getContext('2d');
-      // Use exact same font as CSS: 'Courier New', Courier, monospace at 13px
-      ctx.font = "13px 'Courier New', Courier, monospace";
-      this._charWidth = ctx.measureText('M').width;
+      if (ctx) {
+        // Use exact same font as CSS: 'Courier New', Courier, monospace at 13px
+        ctx.font = "13px 'Courier New', Courier, monospace";
+        this._charWidth = ctx.measureText('M').width;
+      } else {
+        // Fallback to approximate monospace character width
+        this._charWidth = 7.8;
+      }
     }
     return this._charWidth;
   }
 
-  renderGutter(startIndex, endIndex) {
-    const gutterContent = this.shadowRoot.getElementById('gutterContent');
-    const gutterScrollContent = this.shadowRoot.getElementById('gutterScrollContent');
+  renderGutter(startIndex: number, endIndex: number): void {
+    const gutterContent = this._gutterContent;
+    const gutterScrollContent = this._gutterScrollContent;
     if (!gutterContent) return;
     
     // Set total height for gutter scroll
@@ -1298,22 +1207,22 @@ class GeoJsonEditor extends HTMLElement {
       const lineData = this.visibleLines[i];
       if (!lineData) continue;
       
-      const gutterLine = document.createElement('div');
+      const gutterLine = _ce('div');
       gutterLine.className = 'gutter-line';
       
       const meta = lineData.meta;
       
       // Line number first
-      const lineNum = document.createElement('span');
+      const lineNum = _ce('span');
       lineNum.className = 'line-number';
       lineNum.textContent = String(lineData.index + 1);
       gutterLine.appendChild(lineNum);
       
       // Collapse column (always present for alignment)
-      const collapseCol = document.createElement('div');
+      const collapseCol = _ce('div');
       collapseCol.className = 'collapse-column';
       if (meta?.collapseButton) {
-        const btn = document.createElement('div');
+        const btn = _ce('div');
         btn.className = 'collapse-button' + (meta.collapseButton.isCollapsed ? ' collapsed' : '');
         btn.textContent = meta.collapseButton.isCollapsed ? '›' : '⌄';
         btn.dataset.line = String(lineData.index);
@@ -1331,28 +1240,31 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   syncGutterScroll() {
-    const gutterScroll = this.shadowRoot.getElementById('gutterScroll');
-    const viewport = this.shadowRoot.getElementById('viewport');
-    if (gutterScroll && viewport) {
+    if (this._gutterScroll && this._viewport) {
       // Sync gutter scroll position with viewport
-      gutterScroll.scrollTop = viewport.scrollTop;
+      this._gutterScroll.scrollTop = this._viewport.scrollTop;
     }
   }
 
   // ========== Input Handling ==========
 
   handleInput(): void {
-    const textarea = this.shadowRoot!.getElementById('hiddenTextarea') as HTMLTextAreaElement;
-    const inputValue = textarea.value;
-    
+    const textarea = this._hiddenTextarea;
+    const inputValue = textarea?.value;
+
     if (!inputValue) return;
-    
+
+    // Delete selection first if any (replace selection with input)
+    if (this._hasSelection()) {
+      this._deleteSelection();
+    }
+
     // Block input in hidden collapsed zones
     if (this._getCollapsedRangeForLine(this.cursorLine)) {
       textarea.value = '';
       return;
     }
-    
+
     // On closing line, only allow after bracket
     const onClosingLine = this._getCollapsedClosingLine(this.cursorLine);
     if (onClosingLine) {
@@ -1363,31 +1275,40 @@ class GeoJsonEditor extends HTMLElement {
         return;
       }
     }
-    
+
     // On collapsed opening line, only allow before bracket
     const onCollapsed = this._getCollapsedNodeAtLine(this.cursorLine);
     if (onCollapsed) {
       const line = this.lines[this.cursorLine];
-      const bracketPos = line.search(/[{\[]/);
+      const bracketPos = line.search(RE_BRACKET_POS);
       if (this.cursorColumn > bracketPos) {
         textarea.value = '';
         return;
       }
     }
-    
-    // Insert the input at cursor position
+
+    // Insert or overwrite the input at cursor position
     if (this.cursorLine < this.lines.length) {
       const line = this.lines[this.cursorLine];
       const before = line.substring(0, this.cursorColumn);
-      const after = line.substring(this.cursorColumn);
-      
+
       // Handle newlines in input
       const inputLines = inputValue.split('\n');
       if (inputLines.length === 1) {
-        this.lines[this.cursorLine] = before + inputValue + after;
+        // Single line input: insert or overwrite mode
+        if (this._insertMode) {
+          // Insert mode: keep text after cursor
+          const after = line.substring(this.cursorColumn);
+          this.lines[this.cursorLine] = before + inputValue + after;
+        } else {
+          // Overwrite mode: replace characters after cursor
+          const after = line.substring(this.cursorColumn + inputValue.length);
+          this.lines[this.cursorLine] = before + inputValue + after;
+        }
         this.cursorColumn += inputValue.length;
       } else {
-        // Multi-line input
+        // Multi-line input: always insert mode
+        const after = line.substring(this.cursorColumn);
         this.lines[this.cursorLine] = before + inputLines[0];
         for (let i = 1; i < inputLines.length - 1; i++) {
           this.lines.splice(this.cursorLine + i, 0, inputLines[i]);
@@ -1415,17 +1336,17 @@ class GeoJsonEditor extends HTMLElement {
     }, 150);
   }
 
-  handleKeydown(e) {
+  handleKeydown(e: KeyboardEvent): void {
     // Build context for collapsed zone detection
-    const ctx = {
+    const ctx: CollapsedZoneContext = {
       inCollapsedZone: this._getCollapsedRangeForLine(this.cursorLine),
       onCollapsedNode: this._getCollapsedNodeAtLine(this.cursorLine),
       onClosingLine: this._getCollapsedClosingLine(this.cursorLine)
     };
 
     // Lookup table for key handlers
-    const keyHandlers = {
-      'Enter': () => this._handleEnter(ctx),
+    const keyHandlers: Record<string, () => void> = {
+      'Enter': () => this._handleEnter(e.shiftKey, ctx),
       'Backspace': () => this._handleBackspace(ctx),
       'Delete': () => this._handleDelete(ctx),
       'ArrowUp': () => this._handleArrowKey(-1, 0, e.shiftKey, e.ctrlKey || e.metaKey),
@@ -1434,11 +1355,12 @@ class GeoJsonEditor extends HTMLElement {
       'ArrowRight': () => this._handleArrowKey(0, 1, e.shiftKey, e.ctrlKey || e.metaKey),
       'Home': () => this._handleHomeEnd('home', e.shiftKey, ctx.onClosingLine),
       'End': () => this._handleHomeEnd('end', e.shiftKey, ctx.onClosingLine),
-      'Tab': () => this._handleTab(e.shiftKey, ctx)
+      'Tab': () => this._handleTab(e.shiftKey, ctx),
+      'Insert': () => { this._insertMode = !this._insertMode; this.scheduleRender(); }
     };
 
     // Modifier key handlers (Ctrl/Cmd)
-    const modifierHandlers = {
+    const modifierHandlers: Record<string, () => void | boolean | Promise<boolean>> = {
       'a': () => this._selectAll(),
       'z': () => e.shiftKey ? this.redo() : this.undo(),
       'y': () => this.redo(),
@@ -1460,21 +1382,47 @@ class GeoJsonEditor extends HTMLElement {
     }
   }
 
-  _handleEnter(ctx) {
-    // Block in collapsed zones
-    if (ctx.onCollapsedNode || ctx.inCollapsedZone) return;
-    // On closing line, before bracket -> block
+  private _handleEnter(isShiftKey: boolean, ctx: CollapsedZoneContext): void {
+    // Shift+Enter: collapse the containing expanded node
+    if (isShiftKey) {
+      const containingNode = this._getContainingExpandedNode(this.cursorLine);
+      if (containingNode) {
+        const startLine = this.lines[containingNode.startLine];
+        const bracketPos = startLine.search(RE_BRACKET_POS);
+        this.toggleCollapse(containingNode.nodeId);
+        this.cursorLine = containingNode.startLine;
+        this.cursorColumn = bracketPos >= 0 ? bracketPos + 1 : startLine.length;
+        this._clearSelection();
+        this._scrollToCursor();
+      }
+      return;
+    }
+
+    // Enter on collapsed node: expand it
+    if (ctx.onCollapsedNode) {
+      this.toggleCollapse(ctx.onCollapsedNode.nodeId);
+      return;
+    }
+
+    // Enter on closing line of collapsed node: expand it
     if (ctx.onClosingLine) {
       const line = this.lines[this.cursorLine];
       const bracketPos = this._getClosingBracketPos(line);
+      // If cursor is before or on bracket, expand
       if (bracketPos >= 0 && this.cursorColumn <= bracketPos) {
+        this.toggleCollapse(ctx.onClosingLine.nodeId);
         return;
       }
     }
+
+    // Block in collapsed zones
+    if (ctx.inCollapsedZone) return;
+
+    // Normal Enter: insert newline
     this.insertNewline();
   }
 
-  _handleBackspace(ctx) {
+  private _handleBackspace(ctx: CollapsedZoneContext): void {
     // Delete selection if any
     if (this._hasSelection()) {
       this._deleteSelection();
@@ -1502,7 +1450,7 @@ class GeoJsonEditor extends HTMLElement {
     // On opening line, allow editing before bracket
     if (ctx.onCollapsedNode) {
       const line = this.lines[this.cursorLine];
-      const bracketPos = line.search(/[{\[]/);
+      const bracketPos = line.search(RE_BRACKET_POS);
       if (this.cursorColumn > bracketPos + 1) {
         this._deleteCollapsedNode(ctx.onCollapsedNode);
         return;
@@ -1511,7 +1459,7 @@ class GeoJsonEditor extends HTMLElement {
     this.deleteBackward();
   }
 
-  _handleDelete(ctx) {
+  private _handleDelete(ctx: CollapsedZoneContext): void {
     // Delete selection if any
     if (this._hasSelection()) {
       this._deleteSelection();
@@ -1532,7 +1480,7 @@ class GeoJsonEditor extends HTMLElement {
     // If on collapsed node opening line
     if (ctx.onCollapsedNode) {
       const line = this.lines[this.cursorLine];
-      const bracketPos = line.search(/[{\[]/);
+      const bracketPos = line.search(RE_BRACKET_POS);
       if (this.cursorColumn > bracketPos) {
         this._deleteCollapsedNode(ctx.onCollapsedNode);
         return;
@@ -1543,29 +1491,208 @@ class GeoJsonEditor extends HTMLElement {
     this.deleteForward();
   }
 
-  _handleTab(isShiftKey, ctx) {
-    // Shift+Tab: collapse the containing expanded node
+  private _handleTab(isShiftKey: boolean, _ctx: CollapsedZoneContext): void {
+    // Tab/Shift+Tab: navigate between attributes (key and value)
     if (isShiftKey) {
-      const containingNode = this._getContainingExpandedNode(this.cursorLine);
-      if (containingNode) {
-        const startLine = this.lines[containingNode.startLine];
-        const bracketPos = startLine.search(/[{\[]/);
-        this.toggleCollapse(containingNode.nodeId);
-        this.cursorLine = containingNode.startLine;
-        this.cursorColumn = bracketPos >= 0 ? bracketPos + 1 : startLine.length;
-        this._clearSelection();
+      this._navigateToPrevAttribute();
+    } else {
+      this._navigateToNextAttribute();
+    }
+  }
+
+  /**
+   * Navigate to the next attribute (key or value) in the JSON
+   */
+  private _navigateToNextAttribute(): void {
+    const totalLines = this.visibleLines.length;
+    let currentVisibleIdx = this.visibleLines.findIndex(vl => vl.index === this.cursorLine);
+    if (currentVisibleIdx < 0) currentVisibleIdx = 0;
+
+    // Search from current position forward
+    for (let i = currentVisibleIdx; i < totalLines; i++) {
+      const vl = this.visibleLines[i];
+      const line = this.lines[vl.index];
+      const startCol = (i === currentVisibleIdx) ? this.cursorColumn : 0;
+
+      const pos = this._findNextAttributeInLine(line, startCol);
+      if (pos !== null) {
+        this.cursorLine = vl.index;
+        this.cursorColumn = pos.start;
+        // Select the attribute key or value
+        this.selectionStart = { line: vl.index, column: pos.start };
+        this.selectionEnd = { line: vl.index, column: pos.end };
         this._scrollToCursor();
+        this._invalidateRenderCache();
+        this.scheduleRender();
+        return;
       }
-      return;
     }
-    // Tab: expand collapsed node if on one
-    if (ctx.onCollapsedNode) {
-      this.toggleCollapse(ctx.onCollapsedNode.nodeId);
-      return;
+
+    // Wrap to beginning
+    for (let i = 0; i < currentVisibleIdx; i++) {
+      const vl = this.visibleLines[i];
+      const line = this.lines[vl.index];
+      const pos = this._findNextAttributeInLine(line, 0);
+      if (pos !== null) {
+        this.cursorLine = vl.index;
+        this.cursorColumn = pos.start;
+        this.selectionStart = { line: vl.index, column: pos.start };
+        this.selectionEnd = { line: vl.index, column: pos.end };
+        this._scrollToCursor();
+        this._invalidateRenderCache();
+        this.scheduleRender();
+        return;
+      }
     }
-    if (ctx.onClosingLine) {
-      this.toggleCollapse(ctx.onClosingLine.nodeId);
+  }
+
+  /**
+   * Navigate to the previous attribute (key or value) in the JSON
+   */
+  private _navigateToPrevAttribute(): void {
+    const totalLines = this.visibleLines.length;
+    let currentVisibleIdx = this.visibleLines.findIndex(vl => vl.index === this.cursorLine);
+    if (currentVisibleIdx < 0) currentVisibleIdx = totalLines - 1;
+
+    // Search from current position backward
+    for (let i = currentVisibleIdx; i >= 0; i--) {
+      const vl = this.visibleLines[i];
+      const line = this.lines[vl.index];
+      const endCol = (i === currentVisibleIdx) ? this.cursorColumn : line.length;
+
+      const pos = this._findPrevAttributeInLine(line, endCol);
+      if (pos !== null) {
+        this.cursorLine = vl.index;
+        this.cursorColumn = pos.start;
+        this.selectionStart = { line: vl.index, column: pos.start };
+        this.selectionEnd = { line: vl.index, column: pos.end };
+        this._scrollToCursor();
+        this._invalidateRenderCache();
+        this.scheduleRender();
+        return;
+      }
+    }
+
+    // Wrap to end
+    for (let i = totalLines - 1; i > currentVisibleIdx; i--) {
+      const vl = this.visibleLines[i];
+      const line = this.lines[vl.index];
+      const pos = this._findPrevAttributeInLine(line, line.length);
+      if (pos !== null) {
+        this.cursorLine = vl.index;
+        this.cursorColumn = pos.start;
+        this.selectionStart = { line: vl.index, column: pos.start };
+        this.selectionEnd = { line: vl.index, column: pos.end };
+        this._scrollToCursor();
+        this._invalidateRenderCache();
+        this.scheduleRender();
+        return;
+      }
+    }
+  }
+
+  /**
+   * Find next attribute position in a line after startCol
+   * Returns {start, end} for the key or value, or null if none found
+   */
+  private _findNextAttributeInLine(line: string, startCol: number): { start: number; end: number } | null {
+    // Pattern: "key": value where value can be "string", number, true, false, null
+    const re = /"([^"]+)"(?:\s*:\s*(?:"([^"]*)"|(-?\d+\.?\d*(?:e[+-]?\d+)?)|true|false|null))?/gi;
+    let match;
+
+    while ((match = re.exec(line)) !== null) {
+      const keyStart = match.index + 1; // Skip opening quote
+      const keyEnd = keyStart + match[1].length;
+
+      // If key is after startCol, return key position
+      if (keyStart > startCol) {
+        return { start: keyStart, end: keyEnd };
+      }
+
+      // Check if there's a value (string, number, boolean, null)
+      if (match[2] !== undefined) {
+        // String value - find its position
+        const valueMatch = line.substring(match.index).match(/:\s*"([^"]*)"/);
+        if (valueMatch) {
+          const valueStart = match.index + (valueMatch.index || 0) + valueMatch[0].indexOf('"') + 1;
+          const valueEnd = valueStart + match[2].length;
+          if (valueStart > startCol) {
+            return { start: valueStart, end: valueEnd };
+          }
+        }
+      } else if (match[3] !== undefined) {
+        // Number value
+        const numMatch = line.substring(match.index).match(/:\s*(-?\d+\.?\d*(?:e[+-]?\d+)?)/i);
+        if (numMatch) {
+          const valueStart = match.index + (numMatch.index || 0) + numMatch[0].indexOf(numMatch[1]);
+          const valueEnd = valueStart + numMatch[1].length;
+          if (valueStart > startCol) {
+            return { start: valueStart, end: valueEnd };
+          }
+        }
+      } else {
+        // Boolean or null - check after the colon
+        const boolMatch = line.substring(match.index).match(/:\s*(true|false|null)/);
+        if (boolMatch) {
+          const valueStart = match.index + (boolMatch.index || 0) + boolMatch[0].indexOf(boolMatch[1]);
+          const valueEnd = valueStart + boolMatch[1].length;
+          if (valueStart > startCol) {
+            return { start: valueStart, end: valueEnd };
+          }
+        }
+      }
     }
+
+    return null;
+  }
+
+  /**
+   * Find previous attribute position in a line before endCol
+   */
+  private _findPrevAttributeInLine(line: string, endCol: number): { start: number; end: number } | null {
+    // Collect all attributes in the line
+    const attrs: { start: number; end: number }[] = [];
+    const re = /"([^"]+)"(?:\s*:\s*(?:"([^"]*)"|(-?\d+\.?\d*(?:e[+-]?\d+)?)|true|false|null))?/gi;
+    let match;
+
+    while ((match = re.exec(line)) !== null) {
+      const keyStart = match.index + 1;
+      const keyEnd = keyStart + match[1].length;
+      attrs.push({ start: keyStart, end: keyEnd });
+
+      // Check for value
+      if (match[2] !== undefined) {
+        const valueMatch = line.substring(match.index).match(/:\s*"([^"]*)"/);
+        if (valueMatch) {
+          const valueStart = match.index + (valueMatch.index || 0) + valueMatch[0].indexOf('"') + 1;
+          const valueEnd = valueStart + match[2].length;
+          attrs.push({ start: valueStart, end: valueEnd });
+        }
+      } else if (match[3] !== undefined) {
+        const numMatch = line.substring(match.index).match(/:\s*(-?\d+\.?\d*(?:e[+-]?\d+)?)/i);
+        if (numMatch) {
+          const valueStart = match.index + (numMatch.index || 0) + numMatch[0].indexOf(numMatch[1]);
+          const valueEnd = valueStart + numMatch[1].length;
+          attrs.push({ start: valueStart, end: valueEnd });
+        }
+      } else {
+        const boolMatch = line.substring(match.index).match(/:\s*(true|false|null)/);
+        if (boolMatch) {
+          const valueStart = match.index + (boolMatch.index || 0) + boolMatch[0].indexOf(boolMatch[1]);
+          const valueEnd = valueStart + boolMatch[1].length;
+          attrs.push({ start: valueStart, end: valueEnd });
+        }
+      }
+    }
+
+    // Find the last attribute that ends before endCol
+    for (let i = attrs.length - 1; i >= 0; i--) {
+      if (attrs[i].end < endCol) {
+        return attrs[i];
+      }
+    }
+
+    return null;
   }
 
   insertNewline() {
@@ -1629,7 +1756,7 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Move cursor vertically, skipping hidden collapsed lines only
    */
-  moveCursorSkipCollapsed(deltaLine) {
+  moveCursorSkipCollapsed(deltaLine: number): void {
     let targetLine = this.cursorLine + deltaLine;
     
     // Skip over hidden collapsed zones only (not opening/closing lines)
@@ -1642,8 +1769,9 @@ class GeoJsonEditor extends HTMLElement {
         } else {
           targetLine = collapsed.startLine; // Jump to opening line
         }
+      } else {
+        break; // Not in a collapsed zone, stop
       }
-      break;
     }
     
     this.cursorLine = Math.max(0, Math.min(this.lines.length - 1, targetLine));
@@ -1660,7 +1788,7 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Move cursor horizontally with smart navigation around collapsed nodes
    */
-  moveCursorHorizontal(delta) {
+  moveCursorHorizontal(delta: number): void {
     if (delta > 0) {
       this._moveCursorRight();
     } else {
@@ -1671,7 +1799,7 @@ class GeoJsonEditor extends HTMLElement {
     this.scheduleRender();
   }
 
-  _moveCursorRight() {
+  private _moveCursorRight() {
     const line = this.lines[this.cursorLine];
     const onCollapsed = this._getCollapsedNodeAtLine(this.cursorLine);
     const onClosingLine = this._getCollapsedClosingLine(this.cursorLine);
@@ -1689,7 +1817,7 @@ class GeoJsonEditor extends HTMLElement {
         this.cursorColumn++;
       }
     } else if (onCollapsed) {
-      const bracketPos = line.search(/[{\[]/);
+      const bracketPos = line.search(RE_BRACKET_POS);
       if (this.cursorColumn < bracketPos) {
         this.cursorColumn++;
       } else if (this.cursorColumn === bracketPos) {
@@ -1713,7 +1841,7 @@ class GeoJsonEditor extends HTMLElement {
     }
   }
 
-  _moveCursorLeft() {
+  private _moveCursorLeft() {
     const line = this.lines[this.cursorLine];
     const onCollapsed = this._getCollapsedNodeAtLine(this.cursorLine);
     const onClosingLine = this._getCollapsedClosingLine(this.cursorLine);
@@ -1726,10 +1854,10 @@ class GeoJsonEditor extends HTMLElement {
         // Jump to opening line after bracket
         this.cursorLine = onClosingLine.startLine;
         const openLine = this.lines[this.cursorLine];
-        this.cursorColumn = openLine.search(/[{\[]/) + 1;
+        this.cursorColumn = openLine.search(RE_BRACKET_POS) + 1;
       }
     } else if (onCollapsed) {
-      const bracketPos = line.search(/[{\[]/);
+      const bracketPos = line.search(RE_BRACKET_POS);
       if (this.cursorColumn > bracketPos + 1) {
         this.cursorColumn = bracketPos + 1;
       } else if (this.cursorColumn === bracketPos + 1) {
@@ -1752,7 +1880,7 @@ class GeoJsonEditor extends HTMLElement {
         if (collapsed) {
           this.cursorLine = collapsed.startLine;
           const openLine = this.lines[this.cursorLine];
-          this.cursorColumn = openLine.search(/[{\[]/) + 1;
+          this.cursorColumn = openLine.search(RE_BRACKET_POS) + 1;
         } else {
           this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
         }
@@ -1763,8 +1891,8 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Scroll viewport to ensure cursor is visible
    */
-  _scrollToCursor() {
-    const viewport = this.shadowRoot.getElementById('viewport');
+  private _scrollToCursor() {
+    const viewport = this._viewport;
     if (!viewport) return;
     
     // Find the visible line index for the cursor
@@ -1788,7 +1916,7 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Handle arrow key with optional selection and word jump
    */
-  _handleArrowKey(deltaLine, deltaCol, isShift, isCtrl = false) {
+  private _handleArrowKey(deltaLine: number, deltaCol: number, isShift: boolean, isCtrl = false): void {
     // Start selection if shift is pressed and no selection exists
     if (isShift && !this.selectionStart) {
       this.selectionStart = { line: this.cursorLine, column: this.cursorColumn };
@@ -1822,10 +1950,10 @@ class GeoJsonEditor extends HTMLElement {
    * - Ctrl+Right: move to end of current word, or start of next word
    * - Ctrl+Left: move to start of current word, or start of previous word
    */
-  _moveCursorByWord(direction) {
+  private _moveCursorByWord(direction: number): void {
     const line = this.lines[this.cursorLine] || '';
     // Word character: alphanumeric, underscore, or hyphen (for kebab-case identifiers)
-    const isWordChar = (ch) => /[\w-]/.test(ch);
+    const isWordChar = (ch: string) => RE_IS_WORD_CHAR.test(ch);
 
     // Check if we're on a collapsed node's opening line
     const onCollapsed = this._getCollapsedNodeAtLine(this.cursorLine);
@@ -1836,7 +1964,7 @@ class GeoJsonEditor extends HTMLElement {
 
       // If on collapsed node opening line and cursor is at/after the bracket, jump to closing line
       if (onCollapsed) {
-        const bracketPos = line.search(/[{\[]/);
+        const bracketPos = line.search(RE_BRACKET_POS);
         if (bracketPos >= 0 && pos >= bracketPos) {
           this.cursorLine = onCollapsed.endLine;
           this.cursorColumn = (this.lines[this.cursorLine] || '').length;
@@ -1884,7 +2012,7 @@ class GeoJsonEditor extends HTMLElement {
           // Jump to opening line, after the bracket
           this.cursorLine = onClosingLine.startLine;
           const openLine = this.lines[this.cursorLine] || '';
-          const openBracketPos = openLine.search(/[{\[]/);
+          const openBracketPos = openLine.search(RE_BRACKET_POS);
           this.cursorColumn = openBracketPos >= 0 ? openBracketPos : 0;
           this._invalidateRenderCache();
           this._scrollToCursor();
@@ -1931,7 +2059,7 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Handle Home/End with optional selection
    */
-  _handleHomeEnd(key, isShift, onClosingLine) {
+  private _handleHomeEnd(key: string, isShift: boolean, onClosingLine: CollapsedNodeInfo | null): void {
     // Start selection if shift is pressed and no selection exists
     if (isShift && !this.selectionStart) {
       this.selectionStart = { line: this.cursorLine, column: this.cursorColumn };
@@ -1964,7 +2092,7 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Select all content
    */
-  _selectAll() {
+  private _selectAll() {
     this.selectionStart = { line: 0, column: 0 };
     const lastLine = this.lines.length - 1;
     this.selectionEnd = { line: lastLine, column: this.lines[lastLine]?.length || 0 };
@@ -1979,11 +2107,10 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Get selected text
    */
-  _getSelectedText() {
-    if (!this.selectionStart || !this.selectionEnd) return '';
-    
-    const { start, end } = this._normalizeSelection();
-    if (!start || !end) return '';
+  private _getSelectedText(): string {
+    const sel = this._normalizeSelection();
+    if (!sel) return '';
+    const { start, end } = sel;
     
     if (start.line === end.line) {
       return this.lines[start.line].substring(start.column, end.column);
@@ -2001,14 +2128,14 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Normalize selection so start is before end
    */
-  _normalizeSelection() {
+  private _normalizeSelection(): { start: CursorPosition; end: CursorPosition } | null {
     if (!this.selectionStart || !this.selectionEnd) {
-      return { start: null, end: null };
+      return null;
     }
-    
+
     const s = this.selectionStart;
     const e = this.selectionEnd;
-    
+
     if (s.line < e.line || (s.line === e.line && s.column <= e.column)) {
       return { start: s, end: e };
     } else {
@@ -2019,7 +2146,7 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Check if there is an active selection
    */
-  _hasSelection() {
+  private _hasSelection() {
     if (!this.selectionStart || !this.selectionEnd) return false;
     return this.selectionStart.line !== this.selectionEnd.line ||
            this.selectionStart.column !== this.selectionEnd.column;
@@ -2028,7 +2155,7 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Clear the current selection
    */
-  _clearSelection() {
+  private _clearSelection() {
     this.selectionStart = null;
     this.selectionEnd = null;
   }
@@ -2036,13 +2163,13 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Delete selected text
    */
-  _deleteSelection() {
-    if (!this._hasSelection()) return false;
+  private _deleteSelection(): boolean {
+    const sel = this._normalizeSelection();
+    if (!sel) return false;
+    const { start, end } = sel;
 
     this._saveToHistory('delete');
 
-    const { start, end } = this._normalizeSelection();
-
     if (start.line === end.line) {
       // Single line selection
       const line = this.lines[start.line];
@@ -2063,7 +2190,7 @@ class GeoJsonEditor extends HTMLElement {
     return true;
   }
 
-  insertText(text) {
+  insertText(text: string): void {
     // Delete selection first if any
     if (this._hasSelection()) {
       this._deleteSelection();
@@ -2084,7 +2211,7 @@ class GeoJsonEditor extends HTMLElement {
     const onCollapsed = this._getCollapsedNodeAtLine(this.cursorLine);
     if (onCollapsed) {
       const line = this.lines[this.cursorLine];
-      const bracketPos = line.search(/[{\[]/);
+      const bracketPos = line.search(RE_BRACKET_POS);
       if (this.cursorColumn > bracketPos) return;
     }
 
@@ -2106,9 +2233,9 @@ class GeoJsonEditor extends HTMLElement {
     this.formatAndUpdate();
   }
 
-  handlePaste(e) {
+  handlePaste(e: ClipboardEvent): void {
     e.preventDefault();
-    const text = e.clipboardData.getData('text/plain');
+    const text = e.clipboardData?.getData('text/plain');
     if (!text) return;
 
     const wasEmpty = this.lines.length === 0;
@@ -2116,7 +2243,7 @@ class GeoJsonEditor extends HTMLElement {
     // Try to parse as GeoJSON and normalize
     try {
       const parsed = JSON.parse(text);
-      const features = this._normalizeToFeatures(parsed);
+      const features = normalizeToFeatures(parsed);
       // Valid GeoJSON - insert formatted features
       const formatted = features.map(f => JSON.stringify(f, null, 2)).join(',\n');
       this.insertText(formatted);
@@ -2130,14 +2257,15 @@ class GeoJsonEditor extends HTMLElement {
       // Cancel pending render, collapse first, then render once
       if (this.renderTimer) {
         cancelAnimationFrame(this.renderTimer);
-        this.renderTimer = null;
+        this.renderTimer = undefined;
       }
       this.autoCollapseCoordinates();
     }
   }
 
-  handleCopy(e) {
+  handleCopy(e: ClipboardEvent): void {
     e.preventDefault();
+    if (!e.clipboardData) return;
     // Copy selected text if there's a selection, otherwise copy all
     if (this._hasSelection()) {
       e.clipboardData.setData('text/plain', this._getSelectedText());
@@ -2146,8 +2274,9 @@ class GeoJsonEditor extends HTMLElement {
     }
   }
 
-  handleCut(e) {
+  handleCut(e: ClipboardEvent): void {
     e.preventDefault();
+    if (!e.clipboardData) return;
     if (this._hasSelection()) {
       e.clipboardData.setData('text/plain', this._getSelectedText());
       this._saveToHistory('cut');
@@ -2167,9 +2296,10 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Get line/column position from mouse event
    */
-  _getPositionFromClick(e) {
-    const viewport = this.shadowRoot.getElementById('viewport');
-    const linesContainer = this.shadowRoot.getElementById('linesContainer');
+  private _getPositionFromClick(e: MouseEvent): { line: number; column: number } {
+    const viewport = this._viewport;
+    const linesContainer = this._linesContainer;
+    if (!viewport) return { line: 0, column: 0 };
     const rect = viewport.getBoundingClientRect();
 
     const paddingTop = 8;
@@ -2210,28 +2340,34 @@ class GeoJsonEditor extends HTMLElement {
 
   // ========== Gutter Interactions ==========
   
-  handleGutterClick(e) {
+  handleGutterClick(e: MouseEvent): void {
+    const target = e.target as HTMLElement;
+    if (!target) return;
+
     // Visibility button in gutter
-    const visBtn = e.target.closest('.visibility-button');
+    const visBtn = target.closest('.visibility-button') as HTMLElement | null;
     if (visBtn) {
       this.toggleFeatureVisibility(visBtn.dataset.featureKey);
       return;
     }
-    
+
     // Collapse button in gutter
-    if (e.target.classList.contains('collapse-button')) {
-      const nodeId = e.target.dataset.nodeId;
-      this.toggleCollapse(nodeId);
+    if (target.classList.contains('collapse-button')) {
+      const nodeId = target.dataset.nodeId;
+      if (nodeId) this.toggleCollapse(nodeId);
       return;
     }
   }
   
-  handleEditorClick(e) {
+  handleEditorClick(e: MouseEvent): void {
+    const target = e.target as HTMLElement;
+    if (!target) return;
+
     // Unblock render now that click is being processed
     this._blockRender = false;
 
     // Line-level visibility button (pseudo-element ::before on .line.has-visibility)
-    const lineEl = e.target.closest('.line.has-visibility');
+    const lineEl = target.closest('.line.has-visibility') as HTMLElement | null;
     if (lineEl) {
       const rect = lineEl.getBoundingClientRect();
       const clickX = e.clientX - rect.left;
@@ -2245,42 +2381,44 @@ class GeoJsonEditor extends HTMLElement {
         return;
       }
     }
-    
+
     // Inline color swatch (pseudo-element positioned with left: -8px)
-    if (e.target.classList.contains('json-color')) {
-      const rect = e.target.getBoundingClientRect();
+    if (target.classList.contains('json-color')) {
+      const rect = target.getBoundingClientRect();
       const clickX = e.clientX - rect.left;
       // Pseudo-element is at left: -8px, so clickX will be negative when clicking on it
       if (clickX < 0 && clickX >= -8) {
         e.preventDefault();
         e.stopPropagation();
-        const color = e.target.dataset.color;
-        const targetLineEl = e.target.closest('.line');
+        const color = target.dataset.color;
+        const targetLineEl = target.closest('.line') as HTMLElement | null;
         if (targetLineEl) {
-          const lineIndex = parseInt(targetLineEl.dataset.lineIndex);
+          const lineIndex = parseInt(targetLineEl.dataset.lineIndex || '0');
           const line = this.lines[lineIndex];
-          const match = line.match(/"([\w-]+)"\s*:\s*"#/);
-          if (match) {
-            this.showColorPicker(e.target, lineIndex, color, match[1]);
+          // Match any string attribute (hex or named color)
+          // RE_ATTR_VALUE_SINGLE captures: [1] attributeName, [2] stringValue
+          const match = line.match(RE_ATTR_VALUE_SINGLE);
+          if (match && match[1] && color) {
+            this.showColorPicker(target, lineIndex, color, match[1]);
           }
         }
         return;
       }
     }
-    
+
     // Inline boolean checkbox (pseudo-element positioned with left: -8px)
-    if (e.target.classList.contains('json-boolean')) {
-      const rect = e.target.getBoundingClientRect();
+    if (target.classList.contains('json-boolean')) {
+      const rect = target.getBoundingClientRect();
       const clickX = e.clientX - rect.left;
       // Pseudo-element is at left: -8px, so clickX will be negative when clicking on it
       if (clickX < 0 && clickX >= -8) {
         e.preventDefault();
         e.stopPropagation();
-        const targetLineEl = e.target.closest('.line');
+        const targetLineEl = target.closest('.line') as HTMLElement | null;
         if (targetLineEl) {
-          const lineIndex = parseInt(targetLineEl.dataset.lineIndex);
+          const lineIndex = parseInt(targetLineEl.dataset.lineIndex || '0');
           const line = this.lines[lineIndex];
-          const match = line.match(/"([\w-]+)"\s*:\s*(true|false)/);
+          const match = line.match(RE_ATTR_AND_BOOL_VALUE);
           if (match) {
             const currentValue = match[2] === 'true';
             this.updateBooleanValue(lineIndex, !currentValue, match[1]);
@@ -2293,7 +2431,7 @@ class GeoJsonEditor extends HTMLElement {
 
   // ========== Collapse/Expand ==========
   
-  toggleCollapse(nodeId) {
+  toggleCollapse(nodeId: string): void {
     if (this.collapsedNodes.has(nodeId)) {
       this.collapsedNodes.delete(nodeId);
     } else {
@@ -2312,10 +2450,8 @@ class GeoJsonEditor extends HTMLElement {
 
   /**
    * Helper to apply collapsed option from API methods
-   * @param {object} options - Options object with optional collapsed property
-   * @param {array} features - Features array for function mode
    */
-  _applyCollapsedFromOptions(options, features) {
+  private _applyCollapsedFromOptions(options: SetOptions, features: Feature[]): void {
     const collapsed = options.collapsed !== undefined ? options.collapsed : ['coordinates'];
     if (collapsed && (Array.isArray(collapsed) ? collapsed.length > 0 : true)) {
       this._applyCollapsedOption(collapsed, features);
@@ -2324,10 +2460,8 @@ class GeoJsonEditor extends HTMLElement {
 
   /**
    * Apply collapsed option to nodes
-   * @param {string[]|function} collapsed - Attributes to collapse or function returning them
-   * @param {array} features - Features array for function mode (optional)
    */
-  _applyCollapsedOption(collapsed, features = null) {
+  private _applyCollapsedOption(collapsed: string[] | ((feature: Feature | null, index: number) => string[]), features: Feature[] | null = null): void {
     const ranges = this._findCollapsibleRanges();
 
     // Group ranges by feature (root nodes)
@@ -2372,7 +2506,8 @@ class GeoJsonEditor extends HTMLElement {
 
   // ========== Feature Visibility ==========
 
-  toggleFeatureVisibility(featureKey) {
+  toggleFeatureVisibility(featureKey: string | undefined): void {
+    if (!featureKey) return;
     if (this.hiddenFeatures.has(featureKey)) {
       this.hiddenFeatures.delete(featureKey);
     } else {
@@ -2386,17 +2521,17 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   // ========== Color Picker ==========
-  
-  showColorPicker(indicator, line, currentColor, attributeName) {
+
+  showColorPicker(indicator: HTMLElement, line: number, currentColor: string, attributeName: string) {
     // Remove existing picker and anchor
     const existing = document.querySelector('.geojson-color-picker-anchor');
     if (existing) {
       existing.remove();
     }
-    
+
     // Create an anchor element at the pseudo-element position
     // The browser will position the color picker popup relative to this
-    const anchor = document.createElement('div');
+    const anchor = _ce('div');
     anchor.className = 'geojson-color-picker-anchor';
     const rect = indicator.getBoundingClientRect();
     anchor.style.cssText = `
@@ -2408,10 +2543,19 @@ class GeoJsonEditor extends HTMLElement {
       z-index: 9998;
     `;
     document.body.appendChild(anchor);
-    
-    const colorInput = document.createElement('input') as HTMLInputElement & { _closeListener?: EventListener };
+
+    const colorInput = _ce('input') as HTMLInputElement & { _closeListener?: EventListener };
     colorInput.type = 'color';
-    colorInput.value = currentColor;
+    // Convert color to hex format for the color picker
+    let hexColor = currentColor;
+    if (!currentColor.startsWith('#')) {
+      // Named color - convert to hex
+      hexColor = namedColorToHex(currentColor) || '#000000';
+    } else {
+      // Expand 3-char hex to 6-char (#abc -> #aabbcc)
+      hexColor = currentColor.replace(RE_NORMALIZE_COLOR, '#$1$1$2$2$3$3');
+    }
+    colorInput.value = hexColor;
     colorInput.className = 'geojson-color-picker-input';
 
     // Position the color input inside the anchor
@@ -2428,7 +2572,7 @@ class GeoJsonEditor extends HTMLElement {
     `;
     anchor.appendChild(colorInput);
 
-    colorInput.addEventListener('input', (e: Event) => {
+    colorInput.addEventListener('input', (e) => {
       this.updateColorValue(line, (e.target as HTMLInputElement).value, attributeName);
     });
 
@@ -2440,7 +2584,7 @@ class GeoJsonEditor extends HTMLElement {
     };
 
     colorInput._closeListener = closeOnClickOutside;
-    
+
     setTimeout(() => {
       document.addEventListener('click', closeOnClickOutside, true);
     }, 100);
@@ -2449,17 +2593,18 @@ class GeoJsonEditor extends HTMLElement {
     colorInput.click();
   }
 
-  updateColorValue(line, newColor, attributeName) {
-    const regex = new RegExp(`"${attributeName}"\\s*:\\s*"#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})"`);
+  updateColorValue(line: number, newColor: string, attributeName: string) {
+    // Match both hex colors (#xxx, #xxxxxx) and named colors (red, blue, etc.)
+    const regex = new RegExp(`"${attributeName}"\\s*:\\s*"(?:#[0-9a-fA-F]{3,6}|[a-zA-Z]+)"`);
     this.lines[line] = this.lines[line].replace(regex, `"${attributeName}": "${newColor}"`);
-    
+
     // Use updateView to preserve collapsed state (line count didn't change)
     this.updateView();
     this.scheduleRender();
     this.emitChange();
   }
 
-  updateBooleanValue(line, newValue, attributeName) {
+  updateBooleanValue(line: number, newValue: boolean, attributeName: string): void {
     const regex = new RegExp(`"${attributeName}"\\s*:\\s*(true|false)`);
     this.lines[line] = this.lines[line].replace(regex, `"${attributeName}": ${newValue}`);
     
@@ -2501,14 +2646,14 @@ class GeoJsonEditor extends HTMLElement {
       
       // Filter hidden features
       if (this.hiddenFeatures.size > 0) {
-        parsed.features = parsed.features.filter((feature) => {
-          const key = this._getFeatureKey(feature);
-          return !this.hiddenFeatures.has(key);
+        parsed.features = parsed.features.filter((feature: Feature) => {
+          const key = getFeatureKey(feature);
+          return key ? !this.hiddenFeatures.has(key) : true;
         });
       }
       
       // Validate
-      const errors = this._validateGeoJSON(parsed);
+      const errors = validateGeoJSON(parsed);
       
       if (errors.length > 0) {
         this.dispatchEvent(new CustomEvent('error', {
@@ -2525,7 +2670,7 @@ class GeoJsonEditor extends HTMLElement {
       }
     } catch (e) {
       this.dispatchEvent(new CustomEvent('error', {
-        detail: { error: e.message, content },
+        detail: { error: e instanceof Error ? e.message : 'Unknown error', content },
         bubbles: true,
         composed: true
       }));
@@ -2533,56 +2678,48 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   // ========== UI Updates ==========
-  
-  updateReadonly() {
-    const textarea = this.shadowRoot.getElementById('hiddenTextarea');
-    const clearBtn = this.shadowRoot!.getElementById('clearBtn') as HTMLButtonElement;
 
+  updateReadonly() {
     // Use readOnly instead of disabled to allow text selection for copying
-    if (textarea) (textarea as HTMLTextAreaElement).readOnly = this.readonly;
-    if (clearBtn) clearBtn.hidden = this.readonly;
+    if (this._hiddenTextarea) this._hiddenTextarea.readOnly = this.readonly;
+    if (this._clearBtn) this._clearBtn.hidden = this.readonly;
   }
 
   updatePlaceholderVisibility() {
-    const placeholder = this.shadowRoot.getElementById('placeholderLayer');
-    if (placeholder) {
-      placeholder.style.display = this.lines.length > 0 ? 'none' : 'block';
+    if (this._placeholderLayer) {
+      this._placeholderLayer.style.display = this.lines.length > 0 ? 'none' : 'block';
     }
   }
 
   updatePlaceholderContent() {
-    const placeholder = this.shadowRoot.getElementById('placeholderLayer');
-    if (placeholder) {
-      placeholder.textContent = this.placeholder;
+    if (this._placeholderLayer) {
+      this._placeholderLayer.textContent = this.placeholder;
     }
     this.updatePlaceholderVisibility();
   }
 
   updatePrefixSuffix() {
-    const prefix = this.shadowRoot.getElementById('editorPrefix');
-    const suffix = this.shadowRoot.getElementById('editorSuffix');
-    
-    if (prefix) prefix.textContent = this.prefix;
-    if (suffix) suffix.textContent = this.suffix;
+    if (this._editorPrefix) this._editorPrefix.textContent = this.prefix;
+    if (this._editorSuffix) this._editorSuffix.textContent = this.suffix;
   }
 
   // ========== Theme ==========
   
   updateThemeCSS() {
     const darkSelector = this.getAttribute('dark-selector') || '.dark';
-    const darkRule = this._parseSelectorToHostRule(darkSelector);
-    
-    let themeStyle = this.shadowRoot.getElementById('theme-styles');
+    const darkRule = parseSelectorToHostRule(darkSelector);
+
+    let themeStyle = this._id('theme-styles') as HTMLStyleElement;
     if (!themeStyle) {
-      themeStyle = document.createElement('style');
+      themeStyle = _ce('style') as HTMLStyleElement;
       themeStyle.id = 'theme-styles';
-      this.shadowRoot.insertBefore(themeStyle, this.shadowRoot.firstChild);
+      this.shadowRoot!.insertBefore(themeStyle, this.shadowRoot!.firstChild);
     }
     
     const darkDefaults = {
       bgColor: '#2b2b2b',
       textColor: '#a9b7c6',
-      caretColor: '#bbbbbb',
+      caretColor: '#bbb',
       gutterBg: '#313335',
       gutterBorder: '#3c3f41',
       gutterText: '#606366',
@@ -2602,14 +2739,16 @@ class GeoJsonEditor extends HTMLElement {
       jsonKeyInvalid: '#ff6b68'
     };
     
-    const toKebab = (str) => str.replace(/([A-Z])/g, '-$1').toLowerCase();
-    const generateVars = (obj) => Object.entries(obj)
+    RE_TO_KEBAB.lastIndex = 0;
+    const toKebab = (str: string) => str.replace(RE_TO_KEBAB, '-$1').toLowerCase();
+    const generateVars = (obj: Record<string, string | undefined>) => Object.entries(obj)
+      .filter((entry): entry is [string, string] => entry[1] !== undefined)
       .map(([k, v]) => `--${toKebab(k)}: ${v};`)
       .join('\n        ');
     
-    const lightVars = generateVars(this.themes.light || {});
+    const lightVars = generateVars(this.themes.light as Record<string, string | undefined> || {});
     const darkTheme = { ...darkDefaults, ...this.themes.dark };
-    const darkVars = generateVars(darkTheme);
+    const darkVars = generateVars(darkTheme as Record<string, string | undefined>);
     
     let css = lightVars ? `:host {\n        ${lightVars}\n      }\n` : '';
     css += `${darkRule} {\n        ${darkVars}\n      }`;
@@ -2617,14 +2756,6 @@ class GeoJsonEditor extends HTMLElement {
     themeStyle.textContent = css;
   }
 
-  _parseSelectorToHostRule(selector) {
-    if (!selector) return ':host([data-color-scheme="dark"])';
-    if (selector.startsWith('.') && !selector.includes(' ')) {
-      return `:host(${selector})`;
-    }
-    return `:host-context(${selector})`;
-  }
-
   setTheme(theme: ThemeSettings): void {
     if (theme.dark) this.themes.dark = { ...this.themes.dark, ...theme.dark };
     if (theme.light) this.themes.light = { ...this.themes.light, ...theme.light };
@@ -2636,45 +2767,15 @@ class GeoJsonEditor extends HTMLElement {
     this.updateThemeCSS();
   }
 
-  // ========== Helper Methods ==========
-  
-  _getFeatureKey(feature) {
-    if (!feature) return null;
-    if (feature.id !== undefined) return `id:${feature.id}`;
-    if (feature.properties?.id !== undefined) return `prop:${feature.properties.id}`;
-    
-    const geomType = feature.geometry?.type || 'null';
-    const coords = JSON.stringify(feature.geometry?.coordinates || []);
-    let hash = 0;
-    for (let i = 0; i < coords.length; i++) {
-      hash = ((hash << 5) - hash) + coords.charCodeAt(i);
-      hash = hash & hash;
-    }
-    return `hash:${geomType}:${hash.toString(36)}`;
-  }
-
-  _countBrackets(line, openBracket) {
-    const closeBracket = openBracket === '{' ? '}' : ']';
-    let open = 0, close = 0, inString = false, escape = false;
-    
-    for (const char of line) {
-      if (escape) { escape = false; continue; }
-      if (char === '\\' && inString) { escape = true; continue; }
-      if (char === '"') { inString = !inString; continue; }
-      if (!inString) {
-        if (char === openBracket) open++;
-        if (char === closeBracket) close++;
-      }
-    }
-    
-    return { open, close };
+  getTheme(): ThemeSettings {
+    return { ...this.themes };
   }
 
   /**
    * Find all collapsible ranges using the mappings built by _rebuildNodeIdMappings
    * This method only READS the existing mappings, it doesn't create new IDs
    */
-  _findCollapsibleRanges() {
+  private _findCollapsibleRanges() {
     const ranges = [];
     
     // Simply iterate through the existing mappings
@@ -2686,13 +2787,13 @@ class GeoJsonEditor extends HTMLElement {
       if (!line) continue;
       
       // Match "key": { or "key": [
-      const kvMatch = line.match(/^\s*"([^"]+)"\s*:\s*([{\[])/);
+      const kvMatch = line.match(RE_KV_MATCH);
       // Also match standalone { or [ (root Feature objects)
-      const rootMatch = !kvMatch && line.match(/^\s*([{\[]),?\s*$/);
+      const rootMatch = !kvMatch && line.match(RE_ROOT_MATCH);
       
       if (!kvMatch && !rootMatch) continue;
-      
-      const openBracket = kvMatch ? kvMatch[2] : rootMatch[1];
+
+      const openBracket = kvMatch ? kvMatch[2] : (rootMatch ? rootMatch[1] : '{');
       
       ranges.push({
         startLine: rangeInfo.startLine,
@@ -2710,20 +2811,20 @@ class GeoJsonEditor extends HTMLElement {
     return ranges;
   }
 
-  _findClosingLine(startLine, openBracket) {
+  private _findClosingLine(startLine: number, openBracket: string): number {
     let depth = 1;
     const line = this.lines[startLine];
     const bracketPos = line.indexOf(openBracket);
     
     if (bracketPos !== -1) {
       const rest = line.substring(bracketPos + 1);
-      const counts = this._countBrackets(rest, openBracket);
+      const counts = countBrackets(rest, openBracket);
       depth += counts.open - counts.close;
       if (depth === 0) return startLine;
     }
     
     for (let i = startLine + 1; i < this.lines.length; i++) {
-      const counts = this._countBrackets(this.lines[i], openBracket);
+      const counts = countBrackets(this.lines[i], openBracket);
       depth += counts.open - counts.close;
       if (depth === 0) return i;
     }
@@ -2731,7 +2832,7 @@ class GeoJsonEditor extends HTMLElement {
     return -1;
   }
 
-  _buildContextMap() {
+  private _buildContextMap() {
     // Memoization: return cached result if content hasn't changed
     const linesLength = this.lines.length;
     if (this._contextMapCache &&
@@ -2741,9 +2842,9 @@ class GeoJsonEditor extends HTMLElement {
       return this._contextMapCache;
     }
 
-    const contextMap = new Map();
-    const contextStack = [];
-    let pendingContext = null;
+    const contextMap = new Map<number, string>();
+    const contextStack: { context: string; isArray: boolean }[] = [];
+    let pendingContext: string | null = null;
 
     for (let i = 0; i < linesLength; i++) {
       const line = this.lines[i];
@@ -2756,10 +2857,14 @@ class GeoJsonEditor extends HTMLElement {
       else if (RE_CONTEXT_FEATURES.test(line)) pendingContext = 'Feature';
 
       // Track brackets
-      const openBraces = (line.match(/\{/g) || []).length;
-      const closeBraces = (line.match(/\}/g) || []).length;
-      const openBrackets = (line.match(/\[/g) || []).length;
-      const closeBrackets = (line.match(/\]/g) || []).length;
+      RE_OPEN_BRACES.lastIndex = 0;
+      RE_CLOSE_BRACES.lastIndex = 0;
+      RE_OPEN_BRACKETS.lastIndex = 0;
+      RE_CLOSE_BRACKET.lastIndex = 0;
+      const openBraces = (line.match(RE_OPEN_BRACES) || []).length;
+      const closeBraces = (line.match(RE_CLOSE_BRACES) || []).length;
+      const openBrackets = (line.match(RE_OPEN_BRACKETS) || []).length;
+      const closeBrackets = (line.match(RE_CLOSE_BRACKET) || []).length;
 
       for (let j = 0; j < openBraces + openBrackets; j++) {
         contextStack.push({ context: pendingContext || currentContext, isArray: j >= openBraces });
@@ -2780,214 +2885,7 @@ class GeoJsonEditor extends HTMLElement {
     return contextMap;
   }
 
-  _highlightSyntax(text, context, meta) {
-    if (!text) return '';
-
-    // For collapsed nodes, truncate the text at the opening bracket
-    let displayText = text;
-    let collapsedBracket = null;
-
-    if (meta?.collapseButton?.isCollapsed) {
-      // Match "key": { or "key": [
-      const bracketMatch = text.match(RE_COLLAPSED_BRACKET);
-      // Also match standalone { or [ (root Feature objects)
-      const rootMatch = !bracketMatch && text.match(RE_COLLAPSED_ROOT);
-
-      if (bracketMatch) {
-        displayText = bracketMatch[1] + bracketMatch[2];
-        collapsedBracket = bracketMatch[2];
-      } else if (rootMatch) {
-        displayText = rootMatch[1] + rootMatch[2];
-        collapsedBracket = rootMatch[2];
-      }
-    }
-
-    // Escape HTML first
-    let result = displayText
-      .replace(RE_ESCAPE_AMP, '&amp;')
-      .replace(RE_ESCAPE_LT, '&lt;')
-      .replace(RE_ESCAPE_GT, '&gt;');
-
-    // Punctuation FIRST (before other replacements can interfere)
-    result = result.replace(RE_PUNCTUATION, '<span class="json-punctuation">$1</span>');
-
-    // JSON keys - match "key" followed by :
-    // In properties context, all keys are treated as regular JSON keys
-    RE_JSON_KEYS.lastIndex = 0;
-    result = result.replace(RE_JSON_KEYS, (match, key, colon) => {
-      if (context !== 'properties' && GEOJSON_KEYS.includes(key)) {
-        return `<span class="geojson-key">"${key}"</span>${colon}`;
-      }
-      return `<span class="json-key">"${key}"</span>${colon}`;
-    });
-
-    // Type values - "type": "Value" - but NOT inside properties context
-    if (context !== 'properties') {
-      RE_TYPE_VALUES.lastIndex = 0;
-      result = result.replace(RE_TYPE_VALUES, (match, space, type) => {
-        const isValid = type === 'Feature' || type === 'FeatureCollection' || GEOMETRY_TYPES.includes(type);
-        const cls = isValid ? 'geojson-type' : 'geojson-type-invalid';
-        return `<span class="geojson-key">"type"</span><span class="json-punctuation">:</span>${space}<span class="${cls}">"${type}"</span>`;
-      });
-    }
-
-    // String values (not already wrapped in spans)
-    RE_STRING_VALUES.lastIndex = 0;
-    result = result.replace(RE_STRING_VALUES, (match, colon, space, val) => {
-      if (match.includes('geojson-type') || match.includes('json-string')) return match;
-      if (RE_COLOR_HEX.test(val)) {
-        return `${colon}${space}<span class="json-string json-color" data-color="${val}" style="--swatch-color: ${val}">"${val}"</span>`;
-      }
-      return `${colon}${space}<span class="json-string">"${val}"</span>`;
-    });
-
-    // Numbers after colon
-    RE_NUMBERS_COLON.lastIndex = 0;
-    result = result.replace(RE_NUMBERS_COLON, '$1$2<span class="json-number">$3</span>');
-
-    // Numbers in arrays (after [ or ,)
-    RE_NUMBERS_ARRAY.lastIndex = 0;
-    result = result.replace(RE_NUMBERS_ARRAY, '$1$2<span class="json-number">$3</span>');
-
-    // Standalone numbers at start of line (coordinates arrays)
-    RE_NUMBERS_START.lastIndex = 0;
-    result = result.replace(RE_NUMBERS_START, '$1<span class="json-number">$2</span>');
-
-    // Booleans - use ::before for checkbox via CSS class
-    RE_BOOLEANS.lastIndex = 0;
-    result = result.replace(RE_BOOLEANS, (match, colon, space, val) => {
-      const checkedClass = val === 'true' ? ' json-bool-true' : ' json-bool-false';
-      return `${colon}${space}<span class="json-boolean${checkedClass}">${val}</span>`;
-    });
-
-    // Null
-    RE_NULL.lastIndex = 0;
-    result = result.replace(RE_NULL, '$1$2<span class="json-null">$3</span>');
-
-    // Collapsed bracket indicator
-    if (collapsedBracket) {
-      const bracketClass = collapsedBracket === '[' ? 'collapsed-bracket-array' : 'collapsed-bracket-object';
-      result = result.replace(
-        new RegExp(`<span class="json-punctuation">\\${collapsedBracket}<\\/span>$`),
-        `<span class="${bracketClass}">${collapsedBracket}</span>`
-      );
-    }
-
-    // Mark unrecognized text as error
-    RE_UNRECOGNIZED.lastIndex = 0;
-    result = result.replace(RE_UNRECOGNIZED, (match, before, text, after) => {
-      if (!text || RE_WHITESPACE_ONLY.test(text)) return match;
-      // Check for unrecognized words/tokens (not whitespace, not just spaces/commas)
-      // Keep whitespace as-is, wrap any non-whitespace unrecognized token
-      const parts = text.split(RE_WHITESPACE_SPLIT);
-      let hasError = false;
-      const processed = parts.map(part => {
-        // If it's whitespace, keep it
-        if (RE_WHITESPACE_ONLY.test(part)) return part;
-        // Mark as error
-        hasError = true;
-        return `<span class="json-error">${part}</span>`;
-      }).join('');
-      return hasError ? before + processed + after : match;
-    });
-    
-    // Note: visibility is now handled at line level (has-visibility class on .line element)
-    
-    return result;
-  }
-
-  _validateGeoJSON(parsed) {
-    const errors = [];
-    
-    if (!parsed.features) return errors;
-    
-    parsed.features.forEach((feature, i) => {
-      if (feature.type !== 'Feature') {
-        errors.push(`features[${i}]: type must be "Feature"`);
-      }
-      if (feature.geometry && feature.geometry.type) {
-        if (!GEOMETRY_TYPES.includes(feature.geometry.type)) {
-          errors.push(`features[${i}].geometry: invalid type "${feature.geometry.type}"`);
-        }
-      }
-    });
-    
-    return errors;
-  }
-
-  /**
-   * Validate a single feature object
-   * @param {object} feature - The feature to validate
-   * @throws {Error} If the feature is invalid
-   */
-  _validateFeature(feature) {
-    if (!feature || typeof feature !== 'object') {
-      throw new Error('Feature must be an object');
-    }
-    if (feature.type !== 'Feature') {
-      throw new Error('Feature type must be "Feature"');
-    }
-    if (!('geometry' in feature)) {
-      throw new Error('Feature must have a geometry property');
-    }
-    if (!('properties' in feature)) {
-      throw new Error('Feature must have a properties property');
-    }
-    if (feature.geometry !== null) {
-      if (!feature.geometry || typeof feature.geometry !== 'object') {
-        throw new Error('Feature geometry must be an object or null');
-      }
-      if (!feature.geometry.type) {
-        throw new Error('Feature geometry must have a type');
-      }
-      if (!GEOMETRY_TYPES.includes(feature.geometry.type)) {
-        throw new Error(`Invalid geometry type: "${feature.geometry.type}"`);
-      }
-      if (!('coordinates' in feature.geometry)) {
-        throw new Error('Feature geometry must have coordinates');
-      }
-    }
-    if (feature.properties !== null && typeof feature.properties !== 'object') {
-      throw new Error('Feature properties must be an object or null');
-    }
-  }
-
-  /**
-   * Normalize input to an array of features
-   * Accepts: FeatureCollection, Feature[], or single Feature
-   * @param {object|array} input - Input to normalize
-   * @returns {array} Array of features
-   * @throws {Error} If input is invalid
-   */
-  _normalizeToFeatures(input) {
-    let features = [];
-
-    if (Array.isArray(input)) {
-      // Array of features
-      features = input;
-    } else if (input && typeof input === 'object') {
-      if (input.type === 'FeatureCollection' && Array.isArray(input.features)) {
-        // FeatureCollection
-        features = input.features;
-      } else if (input.type === 'Feature') {
-        // Single Feature
-        features = [input];
-      } else {
-        throw new Error('Input must be a Feature, array of Features, or FeatureCollection');
-      }
-    } else {
-      throw new Error('Input must be a Feature, array of Features, or FeatureCollection');
-    }
-
-    // Validate each feature
-    for (const feature of features) {
-      this._validateFeature(feature);
-    }
-
-    return features;
-  }
-
-  // ========== Public API ==========
+// ========== Public API ==========
 
   /**
    * Replace all features in the editor
@@ -3001,10 +2899,8 @@ class GeoJsonEditor extends HTMLElement {
    * @throws {Error} If input is invalid
    */
   set(input: FeatureInput, options: SetOptions = {}): void {
-    const features = this._normalizeToFeatures(input);
-    const formatted = features.map(f => JSON.stringify(f, null, 2)).join(',\n');
-    this.setValue(formatted, false); // Don't auto-collapse coordinates
-    this._applyCollapsedFromOptions(options, features);
+    const features = normalizeToFeatures(input);
+    this._setFeaturesInternal(features, options);
   }
 
   /**
@@ -3016,12 +2912,9 @@ class GeoJsonEditor extends HTMLElement {
    * @throws {Error} If input is invalid
    */
   add(input: FeatureInput, options: SetOptions = {}): void {
-    const newFeatures = this._normalizeToFeatures(input);
-    const existingFeatures = this._parseFeatures();
-    const allFeatures = [...existingFeatures, ...newFeatures];
-    const formatted = allFeatures.map(f => JSON.stringify(f, null, 2)).join(',\n');
-    this.setValue(formatted, false); // Don't auto-collapse coordinates
-    this._applyCollapsedFromOptions(options, allFeatures);
+    const newFeatures = normalizeToFeatures(input);
+    const allFeatures = [...this._parseFeatures(), ...newFeatures];
+    this._setFeaturesInternal(allFeatures, options);
   }
 
   /**
@@ -3034,12 +2927,19 @@ class GeoJsonEditor extends HTMLElement {
    * @throws {Error} If input is invalid
    */
   insertAt(input: FeatureInput, index: number, options: SetOptions = {}): void {
-    const newFeatures = this._normalizeToFeatures(input);
+    const newFeatures = normalizeToFeatures(input);
     const features = this._parseFeatures();
     const idx = index < 0 ? features.length + index : index;
     features.splice(Math.max(0, Math.min(idx, features.length)), 0, ...newFeatures);
+    this._setFeaturesInternal(features, options);
+  }
+
+  /**
+   * Internal method to set features with formatting and collapse options
+   */
+  private _setFeaturesInternal(features: Feature[], options: SetOptions): void {
     const formatted = features.map(f => JSON.stringify(f, null, 2)).join(',\n');
-    this.setValue(formatted, false); // Don't auto-collapse coordinates
+    this.setValue(formatted, false);
     this._applyCollapsedFromOptions(options, features);
   }
 
@@ -3097,7 +2997,7 @@ class GeoJsonEditor extends HTMLElement {
       const blob = new Blob([json], { type: 'application/geo+json' });
       const url = URL.createObjectURL(blob);
 
-      const a = document.createElement('a');
+      const a = _ce('a') as HTMLAnchorElement;
       a.href = url;
       a.download = filename;
       document.body.appendChild(a);
@@ -3120,12 +3020,12 @@ class GeoJsonEditor extends HTMLElement {
    */
   open(options: SetOptions = {}): Promise<boolean> {
     return new Promise((resolve) => {
-      const input = document.createElement('input');
+      const input = _ce('input') as HTMLInputElement;
       input.type = 'file';
       input.accept = '.geojson,.json,application/geo+json,application/json';
       input.style.display = 'none';
 
-      input.addEventListener('change', (e: Event) => {
+      input.addEventListener('change', (e) => {
         const file = (e.target as HTMLInputElement).files?.[0];
         if (!file) {
           document.body.removeChild(input);
@@ -3140,7 +3040,7 @@ class GeoJsonEditor extends HTMLElement {
             const parsed = JSON.parse(content);
 
             // Normalize and validate features
-            const features = this._normalizeToFeatures(parsed);
+            const features = normalizeToFeatures(parsed);
 
             // Load features into editor
             this._saveToHistory('open');
@@ -3173,7 +3073,7 @@ class GeoJsonEditor extends HTMLElement {
     });
   }
 
-  _parseFeatures() {
+  private _parseFeatures() {
     try {
       const content = this.lines.join('\n');
       if (!content.trim()) return [];