npm - @softwarity/geojson-editor - Versions diffs - 1.0.17 → 1.0.19 - Mend

@softwarity/geojson-editor 1.0.17 → 1.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/README.md +34 -5
package/dist/geojson-editor.js +2 -2
package/package.json +2 -2
package/src/constants.ts +74 -0
package/src/geojson-editor.css +61 -4
package/src/geojson-editor.d.ts +155 -0
package/src/geojson-editor.template.ts +5 -0
package/src/geojson-editor.ts +1371 -856
package/src/internal-types.ts +101 -0
package/src/syntax-highlighter.ts +197 -0
package/src/types.ts +48 -0
package/src/utils.ts +59 -0
package/src/validation.ts +90 -0
package/types/geojson-editor.d.ts +146 -488
package/types/types.d.ts +44 -0
package/types/geojson-editor.template.d.ts +0 -4

package/src/geojson-editor.ts CHANGED Viewed

@@ -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
@@ -187,6 +66,7 @@ class GeoJsonEditor extends HTMLElement {
   private _nodeIdCounter: number = 0;
   private _lineToNodeId: Map<number, string> = new Map();
   private _nodeIdToLines: Map<string, NodeRangeInfo> = new Map();
+  private _openedNodeKeys: Set<string> = new Set(); // UniqueKeys (nodeKey:occurrence) that user opened
   // ========== Derived State (computed from model) ==========
   visibleLines: VisibleLine[] = [];
@@ -211,8 +91,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 +109,43 @@ 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;
+  private _errorLinesCache: Set<number> | null = null;
+  // ========== 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;
+  private _errorNav: HTMLElement | null = null;
+  private _errorCount: HTMLElement | null = null;
+  private _prevErrorBtn: HTMLButtonElement | null = null;
+  private _nextErrorBtn: HTMLButtonElement | 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 +157,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 +168,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 +184,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 +213,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 +221,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 +234,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 +242,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 +254,7 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Clear undo/redo history
    */
-  clearHistory() {
+  clearHistory(): void {
     this._undoStack = [];
     this._redoStack = [];
     this._lastActionType = null;
@@ -362,7 +265,7 @@ class GeoJsonEditor extends HTMLElement {
    * Check if undo is available
    * @returns {boolean}
    */
-  canUndo() {
+  canUndo(): boolean {
     return this._undoStack.length > 0;
   }
@@ -370,21 +273,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 +297,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 +309,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 +318,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 +331,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 +347,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,75 +372,67 @@ class GeoJsonEditor extends HTMLElement {
    * Rebuild nodeId mappings after content changes
    * Preserves collapsed state by matching nodeKey + sequential occurrence
    */
-  _rebuildNodeIdMappings() {
-    // Save old state to try to preserve collapsed nodes
-    const oldCollapsed = new Set(this.collapsedNodes);
-    const oldNodeKeyMap = new Map(); // nodeId -> nodeKey
-    for (const [nodeId, info] of this._nodeIdToLines) {
-      if (info.nodeKey) oldNodeKeyMap.set(nodeId, info.nodeKey);
-    }
-    // Build list of collapsed nodeKeys for matching
-    const collapsedNodeKeys = [];
-    for (const nodeId of oldCollapsed) {
-      const nodeKey = oldNodeKeyMap.get(nodeId);
-      if (nodeKey) collapsedNodeKeys.push(nodeKey);
+  private _rebuildNodeIdMappings() {
+    // Save collapsed uniqueKeys from old state
+    const collapsedUniqueKeys = new Set<string>();
+    for (const nodeId of this.collapsedNodes) {
+      const info = this._nodeIdToLines.get(nodeId);
+      if (info?.uniqueKey) collapsedUniqueKeys.add(info.uniqueKey);
     }
     // Reset mappings
     this._nodeIdCounter = 0;
     this._lineToNodeId.clear();
     this._nodeIdToLines.clear();
     this.collapsedNodes.clear();
-    // Track occurrences of each nodeKey for matching
-    const nodeKeyOccurrences = new Map();
+    // Track occurrences of each nodeKey
+    const nodeKeyOccurrences = new Map<string, number>();
     // Assign fresh IDs to all collapsible nodes
     for (let i = 0; i < this.lines.length; i++) {
       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);
       if (endLine === -1 || endLine === i) continue;
-      // Generate unique ID for this node
+      // Generate unique ID and unique key for this node
       const nodeId = this._generateNodeId();
-      this._lineToNodeId.set(i, nodeId);
-      this._nodeIdToLines.set(nodeId, { startLine: i, endLine, nodeKey, isRootFeature: !!rootMatch });
-      // Track occurrence of this nodeKey
       const occurrence = nodeKeyOccurrences.get(nodeKey) || 0;
       nodeKeyOccurrences.set(nodeKey, occurrence + 1);
-      // Check if this nodeKey was previously collapsed
-      const keyIndex = collapsedNodeKeys.indexOf(nodeKey);
-      if (keyIndex !== -1) {
-        // Remove from list so we don't match it again
-        collapsedNodeKeys.splice(keyIndex, 1);
+      const uniqueKey = `${nodeKey}:${occurrence}`;
+      this._lineToNodeId.set(i, nodeId);
+      this._nodeIdToLines.set(nodeId, { startLine: i, endLine, nodeKey, uniqueKey, isRootFeature: !!rootMatch });
+      // Restore collapsed state if was collapsed and not explicitly opened
+      if (collapsedUniqueKeys.has(uniqueKey) && !this._openedNodeKeys.has(uniqueKey)) {
         this.collapsedNodes.add(nodeId);
       }
     }
@@ -577,10 +446,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 +471,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 +499,52 @@ 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');
+    this._errorNav = this._id('errorNav');
+    this._errorCount = this._id('errorCount');
+    this._prevErrorBtn = this._id('prevErrorBtn') as HTMLButtonElement;
+    this._nextErrorBtn = this._id('nextErrorBtn') as HTMLButtonElement;
   }
   // ========== 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 +553,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 +582,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 +602,7 @@ class GeoJsonEditor extends HTMLElement {
         this.selectionEnd = null;
         this._isSelecting = true;
       }
       // Focus textarea
       hiddenTextarea.focus();
       this._invalidateRenderCache();
@@ -715,19 +610,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 +629,7 @@ class GeoJsonEditor extends HTMLElement {
         // Near bottom edge, scroll down
         viewport.scrollTop += scrollSpeed;
       }
       this._invalidateRenderCache();
       this.scheduleRender();
     });
@@ -763,7 +657,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 +688,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
@@ -833,6 +727,14 @@ class GeoJsonEditor extends HTMLElement {
       this.removeAll();
     });
+    // Error navigation buttons
+    this._prevErrorBtn?.addEventListener('click', () => {
+      this.goToPrevError();
+    });
+    this._nextErrorBtn?.addEventListener('click', () => {
+      this.goToNextError();
+    });
     // Initial readonly state
     this.updateReadonly();
   }
@@ -842,7 +744,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');
@@ -868,6 +770,7 @@ class GeoJsonEditor extends HTMLElement {
     // Clear state for new content
     this.collapsedNodes.clear();
     this.hiddenFeatures.clear();
+    this._openedNodeKeys.clear();
     this._lineToNodeId.clear();
     this._nodeIdToLines.clear();
     this.cursorLine = 0;
@@ -899,8 +802,9 @@ class GeoJsonEditor extends HTMLElement {
    * Rebuilds line-to-nodeId mapping while preserving collapsed state
    */
   updateModel() {
-    // Invalidate context map cache since content changed
+    // Invalidate caches since content changed
     this._contextMapCache = null;
+    this._errorLinesCache = null;
     // Rebuild lineToNodeId mapping (may shift due to edits)
     this._rebuildNodeIdMappings();
@@ -941,7 +845,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 +861,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 +870,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) {
@@ -996,35 +900,45 @@ class GeoJsonEditor extends HTMLElement {
    */
   computeLineMetadata() {
     this.lineMetadata.clear();
     const collapsibleRanges = this._findCollapsibleRanges();
+    // Compute error lines once (cached)
+    const errorLines = this._computeErrorLines();
     for (let i = 0; i < this.lines.length; i++) {
       const line = this.lines[i];
-      const meta = {
+      const meta: LineMeta = {
         colors: [],
         booleans: [],
         collapseButton: null,
         visibilityButton: null,
         isHidden: false,
         isCollapsed: false,
-        featureKey: null
+        featureKey: null,
+        hasError: errorLines.has(i)
       };
-      // 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
       const collapsible = collapsibleRanges.find(r => r.startLine === i);
       if (collapsible) {
@@ -1034,15 +948,15 @@ class GeoJsonEditor extends HTMLElement {
           isCollapsed: this.collapsedNodes.has(collapsible.nodeId)
         };
       }
       // Check if line is inside a collapsed node (exclude closing bracket line)
-      const insideCollapsed = collapsibleRanges.find(r =>
+      const insideCollapsed = collapsibleRanges.find(r =>
         this.collapsedNodes.has(r.nodeId) && i > r.startLine && i < r.endLine
       );
       if (insideCollapsed) {
         meta.isCollapsed = true;
       }
       // Check if line belongs to a hidden feature
       for (const [featureKey, range] of this.featureRanges) {
         if (i >= range.startLine && i <= range.endLine) {
@@ -1060,11 +974,152 @@ class GeoJsonEditor extends HTMLElement {
           break;
         }
       }
       this.lineMetadata.set(i, meta);
     }
   }
+  /**
+   * Compute error lines (syntax highlighting + structural errors)
+   * Called once per model update, result is used by computeLineMetadata
+   */
+  private _computeErrorLines(): Set<number> {
+    if (this._errorLinesCache !== null) {
+      return this._errorLinesCache;
+    }
+    const errorLines = new Set<number>();
+    // Check syntax highlighting errors for each line
+    for (let i = 0; i < this.lines.length; i++) {
+      const highlighted = highlightSyntax(this.lines[i], '', undefined);
+      if (highlighted.includes('json-error')) {
+        errorLines.add(i);
+      }
+    }
+    // Check structural error from JSON.parse
+    try {
+      const content = this.lines.join('\n');
+      const wrapped = '[' + content + ']';
+      JSON.parse(wrapped);
+    } catch (e) {
+      if (e instanceof Error) {
+        // Try to extract line number from error message
+        // Chrome/Node: "... at line X column Y"
+        const lineMatch = e.message.match(/line (\d+)/);
+        if (lineMatch) {
+          // Subtract 1 because we wrapped with '[' on first line
+          const errorLine = Math.max(0, parseInt(lineMatch[1], 10) - 1);
+          errorLines.add(errorLine);
+        }
+      }
+    }
+    this._errorLinesCache = errorLines;
+    return errorLines;
+  }
+  /**
+   * Get all lines that have errors (for navigation and counting)
+   * Returns array of line indices sorted by line number
+   */
+  private _getErrorLines(): number[] {
+    const errorLines: number[] = [];
+    for (const [lineIndex, meta] of this.lineMetadata) {
+      if (meta.hasError) {
+        errorLines.push(lineIndex);
+      }
+    }
+    return errorLines.sort((a, b) => a - b);
+  }
+  /**
+   * Navigate to the next error line
+   */
+  goToNextError(): boolean {
+    const errorLines = this._getErrorLines();
+    if (errorLines.length === 0) return false;
+    // Find next error after current cursor position
+    const nextError = errorLines.find(line => line > this.cursorLine);
+    const targetLine = nextError !== undefined ? nextError : errorLines[0]; // Wrap to first
+    return this._goToErrorLine(targetLine);
+  }
+  /**
+   * Navigate to the previous error line
+   */
+  goToPrevError(): boolean {
+    const errorLines = this._getErrorLines();
+    if (errorLines.length === 0) return false;
+    // Find previous error before current cursor position
+    const prevErrors = errorLines.filter(line => line < this.cursorLine);
+    const targetLine = prevErrors.length > 0 ? prevErrors[prevErrors.length - 1] : errorLines[errorLines.length - 1]; // Wrap to last
+    return this._goToErrorLine(targetLine);
+  }
+  /**
+   * Expand all collapsed nodes containing a specific line
+   * Returns true if any nodes were expanded
+   */
+  private _expandNodesContainingLine(lineIndex: number): boolean {
+    let expanded = false;
+    for (const [nodeId, nodeInfo] of this._nodeIdToLines) {
+      if (this.collapsedNodes.has(nodeId) && lineIndex > nodeInfo.startLine && lineIndex <= nodeInfo.endLine) {
+        this.collapsedNodes.delete(nodeId);
+        // Track that this node was opened - don't re-collapse during edits
+        if (nodeInfo.uniqueKey) {
+          this._openedNodeKeys.add(nodeInfo.uniqueKey);
+        }
+        expanded = true;
+      }
+    }
+    return expanded;
+  }
+  /**
+   * Navigate to a specific error line
+   */
+  private _goToErrorLine(lineIndex: number): boolean {
+    if (this._expandNodesContainingLine(lineIndex)) {
+      this.updateView();
+    }
+    this.cursorLine = lineIndex;
+    this.cursorColumn = 0;
+    this._invalidateRenderCache();
+    this._scrollToCursor(true); // Center the error line
+    this.renderViewport();
+    this._updateErrorDisplay();
+    // Focus the editor
+    this._hiddenTextarea?.focus();
+    return true;
+  }
+  /**
+   * Expand all collapsed nodes that contain error lines
+   */
+  private _expandErrorNodes(): void {
+    const errorLines = this._getErrorLines();
+    if (errorLines.length === 0) return;
+    let expanded = false;
+    for (const errorLine of errorLines) {
+      if (this._expandNodesContainingLine(errorLine)) {
+        expanded = true;
+      }
+    }
+    if (expanded) {
+      this.updateView();
+    }
+  }
   /**
    * Compute which lines are visible (not inside collapsed nodes)
    */
@@ -1084,8 +1139,6 @@ class GeoJsonEditor extends HTMLElement {
     // Reset render cache to force re-render
     this._invalidateRenderCache();
-    this._lastEndIndex = -1;
-    this._lastTotalLines = -1;
   }
   // ========== Rendering ==========
@@ -1093,7 +1146,7 @@ class GeoJsonEditor extends HTMLElement {
   scheduleRender() {
     if (this.renderTimer) return;
     this.renderTimer = requestAnimationFrame(() => {
-      this.renderTimer = null;
+      this.renderTimer = undefined;
       this.renderViewport();
     });
   }
@@ -1103,10 +1156,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;
@@ -1114,10 +1166,15 @@ class GeoJsonEditor extends HTMLElement {
     const totalLines = this.visibleLines.length;
     const totalHeight = totalLines * this.lineHeight;
-    // Set total scrollable height (only once or when content changes)
+    // Set total scrollable dimensions (height and width based on content)
     if (scrollContent) {
       scrollContent.style.height = `${totalHeight}px`;
+      // Calculate max line width to update horizontal scroll
+      const charWidth = this._getCharWidth();
+      const maxLineLength = this.lines.reduce((max, line) => Math.max(max, line.length), 0);
+      const minWidth = maxLineLength * charWidth + 20; // 20px padding
+      scrollContent.style.minWidth = `${minWidth}px`;
     }
     // Calculate visible range based on scroll position
@@ -1142,17 +1199,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 +1225,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 +1244,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 +1272,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 +1329,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
@@ -1297,23 +1365,28 @@ class GeoJsonEditor extends HTMLElement {
     for (let i = startIndex; i < endIndex; i++) {
       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;
+      // Add error indicator class
+      if (meta?.hasError) {
+        gutterLine.classList.add('has-error');
+      }
       // 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);
@@ -1322,7 +1395,7 @@ class GeoJsonEditor extends HTMLElement {
         collapseCol.appendChild(btn);
       }
       gutterLine.appendChild(collapseCol);
       fragment.appendChild(gutterLine);
     }
@@ -1331,28 +1404,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 +1439,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 +1500,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 +1519,14 @@ 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)
+      'PageUp': () => this._handlePageUpDown('up', e.shiftKey),
+      'PageDown': () => this._handlePageUpDown('down', e.shiftKey),
+      '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 +1548,46 @@ class GeoJsonEditor extends HTMLElement {
     }
   }
-  _handleEnter(ctx) {
-    // Block in collapsed zones
-    if (ctx.onCollapsedNode || ctx.inCollapsedZone) return;
-    // On closing line, before bracket -> block
-    if (ctx.onClosingLine) {
-      const line = this.lines[this.cursorLine];
-      const bracketPos = this._getClosingBracketPos(line);
-      if (bracketPos >= 0 && this.cursorColumn <= bracketPos) {
-        return;
+  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;
     }
-    this.insertNewline();
+    // 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;
+    // Enter anywhere else: do nothing (JSON structure is managed automatically)
   }
-  _handleBackspace(ctx) {
+  private _handleBackspace(ctx: CollapsedZoneContext): void {
     // Delete selection if any
     if (this._hasSelection()) {
       this._deleteSelection();
@@ -1502,7 +1615,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 +1624,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 +1645,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 +1656,328 @@ 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
+   * Also stops on collapsed node brackets to allow expansion with Enter
+   */
+  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._findNextAttributeOrBracket(line, startCol, vl.index);
+      if (pos !== null) {
+        this.cursorLine = vl.index;
+        this.cursorColumn = pos.start;
+        // Select the attribute key or value (not brackets)
+        if (!pos.isBracket) {
+          this.selectionStart = { line: vl.index, column: pos.start };
+          this.selectionEnd = { line: vl.index, column: pos.end };
+        } else {
+          this._clearSelection();
+        }
         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._findNextAttributeOrBracket(line, 0, vl.index);
+      if (pos !== null) {
+        this.cursorLine = vl.index;
+        this.cursorColumn = pos.start;
+        if (!pos.isBracket) {
+          this.selectionStart = { line: vl.index, column: pos.start };
+          this.selectionEnd = { line: vl.index, column: pos.end };
+        } else {
+          this._clearSelection();
+        }
+        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
+   * Also stops on collapsed node brackets to allow expansion with Enter
+   */
+  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._findPrevAttributeOrBracket(line, endCol, vl.index);
+      if (pos !== null) {
+        this.cursorLine = vl.index;
+        this.cursorColumn = pos.start;
+        if (!pos.isBracket) {
+          this.selectionStart = { line: vl.index, column: pos.start };
+          this.selectionEnd = { line: vl.index, column: pos.end };
+        } else {
+          this._clearSelection();
+        }
+        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._findPrevAttributeOrBracket(line, line.length, vl.index);
+      if (pos !== null) {
+        this.cursorLine = vl.index;
+        this.cursorColumn = pos.start;
+        if (!pos.isBracket) {
+          this.selectionStart = { line: vl.index, column: pos.start };
+          this.selectionEnd = { line: vl.index, column: pos.end };
+        } else {
+          this._clearSelection();
+        }
+        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
+   * Also finds standalone values (numbers in arrays, etc.)
+   */
+  private _findNextAttributeInLine(line: string, startCol: number): { start: number; end: number } | null {
+    // Collect all navigable positions
+    const positions: { start: number; end: number }[] = [];
+    // Pattern for "key": value pairs
+    const keyValueRe = /"([^"]+)"(?:\s*:\s*(?:"([^"]*)"|(-?\d+\.?\d*(?:e[+-]?\d+)?)|true|false|null))?/gi;
+    let match;
+    while ((match = keyValueRe.exec(line)) !== null) {
+      const keyStart = match.index + 1; // Skip opening quote
+      const keyEnd = keyStart + match[1].length;
+      positions.push({ start: keyStart, end: keyEnd });
+      // Check if there's a value (string, number, boolean, null)
+      if (match[2] !== undefined) {
+        // String value
+        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;
+          positions.push({ start: valueStart, end: valueEnd });
+        }
+      } else if (match[3] !== undefined) {
+        // Number value after colon
+        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;
+          positions.push({ start: valueStart, end: valueEnd });
+        }
+      } else {
+        // Boolean or null
+        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;
+          positions.push({ start: valueStart, end: valueEnd });
+        }
+      }
+    }
+    // Also find standalone numbers (not after a colon) - for array elements
+    const standaloneNumRe = /(?:^|[\[,\s])(-?\d+\.?\d*(?:e[+-]?\d+)?)\s*(?:[,\]]|$)/gi;
+    while ((match = standaloneNumRe.exec(line)) !== null) {
+      const numStr = match[1];
+      const numStart = match.index + match[0].indexOf(numStr);
+      const numEnd = numStart + numStr.length;
+      // Avoid duplicates (numbers already captured by key-value pattern)
+      if (!positions.some(p => p.start === numStart && p.end === numEnd)) {
+        positions.push({ start: numStart, end: numEnd });
+      }
+    }
+    // Sort by start position and find first after startCol
+    positions.sort((a, b) => a.start - b.start);
+    for (const pos of positions) {
+      if (pos.start > startCol) {
+        return pos;
+      }
     }
+    return null;
+  }
+  /**
+   * Find previous attribute position in a line before endCol
+   * Also finds standalone values (numbers in arrays, etc.)
+   */
+  private _findPrevAttributeInLine(line: string, endCol: number): { start: number; end: number } | null {
+    // Collect all navigable positions
+    const positions: { start: number; end: number }[] = [];
+    // Pattern for "key": value pairs
+    const keyValueRe = /"([^"]+)"(?:\s*:\s*(?:"([^"]*)"|(-?\d+\.?\d*(?:e[+-]?\d+)?)|true|false|null))?/gi;
+    let match;
+    while ((match = keyValueRe.exec(line)) !== null) {
+      const keyStart = match.index + 1;
+      const keyEnd = keyStart + match[1].length;
+      positions.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;
+          positions.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;
+          positions.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;
+          positions.push({ start: valueStart, end: valueEnd });
+        }
+      }
+    }
+    // Also find standalone numbers (not after a colon) - for array elements
+    const standaloneNumRe = /(?:^|[\[,\s])(-?\d+\.?\d*(?:e[+-]?\d+)?)\s*(?:[,\]]|$)/gi;
+    while ((match = standaloneNumRe.exec(line)) !== null) {
+      const numStr = match[1];
+      const numStart = match.index + match[0].indexOf(numStr);
+      const numEnd = numStart + numStr.length;
+      // Avoid duplicates
+      if (!positions.some(p => p.start === numStart && p.end === numEnd)) {
+        positions.push({ start: numStart, end: numEnd });
+      }
+    }
+    // Sort by start position and find last that ends before endCol
+    positions.sort((a, b) => a.start - b.start);
+    for (let i = positions.length - 1; i >= 0; i--) {
+      if (positions[i].end < endCol) {
+        return positions[i];
+      }
+    }
+    return null;
+  }
+  /**
+   * Find bracket position in a line (opening bracket for collapsible nodes)
+   * Looks for { or [ at end of line (for both expanded and collapsed nodes)
+   * Returns position AFTER the bracket, or null if not found
+   */
+  private _findBracketInLine(line: string): number | null {
+    // Look for { or [ at end of line (indicates a collapsible node)
+    // Works for both expanded and collapsed nodes - collapsed nodes still have
+    // the bracket in raw text, the "..." is only added visually via CSS
+    const bracketMatch = line.match(/[\[{]\s*$/);
+    if (bracketMatch && bracketMatch.index !== undefined) {
+      return bracketMatch.index + 1; // Position after bracket
+    }
+    return null;
+  }
+  /**
+   * Find next attribute or bracket position in a line
+   * Returns position with isBracket flag to indicate if it's a bracket
+   * For brackets, cursor is placed AFTER the bracket (where Enter/Shift+Enter works)
+   * Stops on ALL opening brackets to allow collapse/expand navigation
+   */
+  private _findNextAttributeOrBracket(line: string, startCol: number, _lineIndex: number): { start: number; end: number; isBracket: boolean } | null {
+    // First check for regular attributes
+    const attrPos = this._findNextAttributeInLine(line, startCol);
+    // Find opening bracket position (collapsed or expanded)
+    const bracketPos = this._findBracketInLine(line);
+    // Return whichever comes first after startCol
+    if (attrPos !== null && bracketPos !== null) {
+      if (bracketPos > startCol && (bracketPos < attrPos.start)) {
+        return { start: bracketPos, end: bracketPos, isBracket: true };
+      }
+      return { ...attrPos, isBracket: false };
+    } else if (attrPos !== null) {
+      return { ...attrPos, isBracket: false };
+    } else if (bracketPos !== null && bracketPos > startCol) {
+      return { start: bracketPos, end: bracketPos, isBracket: true };
+    }
+    return null;
+  }
+  /**
+   * Find previous attribute or bracket position in a line
+   * Returns position with isBracket flag to indicate if it's a bracket
+   * For brackets, cursor is placed AFTER the bracket (where Enter/Shift+Enter works)
+   * Stops on ALL opening brackets to allow collapse/expand navigation
+   */
+  private _findPrevAttributeOrBracket(line: string, endCol: number, _lineIndex: number): { start: number; end: number; isBracket: boolean } | null {
+    // First check for regular attributes
+    const attrPos = this._findPrevAttributeInLine(line, endCol);
+    // Find opening bracket position (collapsed or expanded)
+    const bracketPos = this._findBracketInLine(line);
+    // Return whichever comes last STRICTLY BEFORE endCol (to avoid staying in place)
+    if (attrPos !== null && bracketPos !== null) {
+      if (bracketPos < endCol && bracketPos > attrPos.end) {
+        return { start: bracketPos, end: bracketPos, isBracket: true };
+      }
+      return { ...attrPos, isBracket: false };
+    } else if (attrPos !== null) {
+      return { ...attrPos, isBracket: false };
+    } else if (bracketPos !== null && bracketPos < endCol) {
+      return { start: bracketPos, end: bracketPos, isBracket: true };
+    }
+    return null;
   }
   insertNewline() {
@@ -1629,7 +2041,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 +2054,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 +2073,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 +2084,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 +2102,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 +2126,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 +2139,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 +2165,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;
         }
@@ -1762,33 +2175,41 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Scroll viewport to ensure cursor is visible
+   * @param center - if true, center the cursor line in the viewport
    */
-  _scrollToCursor() {
-    const viewport = this.shadowRoot.getElementById('viewport');
+  private _scrollToCursor(center = false) {
+    const viewport = this._viewport;
     if (!viewport) return;
     // Find the visible line index for the cursor
     const visibleIndex = this.visibleLines.findIndex(vl => vl.index === this.cursorLine);
     if (visibleIndex === -1) return;
     const cursorY = visibleIndex * this.lineHeight;
-    const viewportTop = viewport.scrollTop;
-    const viewportBottom = viewportTop + viewport.clientHeight;
-    // Scroll up if cursor is above viewport
-    if (cursorY < viewportTop) {
-      viewport.scrollTop = cursorY;
-    }
-    // Scroll down if cursor is below viewport
-    else if (cursorY + this.lineHeight > viewportBottom) {
-      viewport.scrollTop = cursorY + this.lineHeight - viewport.clientHeight;
+    const viewportHeight = viewport.clientHeight;
+    if (center) {
+      // Center the cursor line in the viewport
+      viewport.scrollTop = Math.max(0, cursorY - viewportHeight / 2 + this.lineHeight / 2);
+    } else {
+      const viewportTop = viewport.scrollTop;
+      const viewportBottom = viewportTop + viewportHeight;
+      // Scroll up if cursor is above viewport
+      if (cursorY < viewportTop) {
+        viewport.scrollTop = cursorY;
+      }
+      // Scroll down if cursor is below viewport
+      else if (cursorY + this.lineHeight > viewportBottom) {
+        viewport.scrollTop = cursorY + this.lineHeight - viewportHeight;
+      }
     }
   }
   /**
    * 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 +2243,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 +2257,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 +2305,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,23 +2352,37 @@ 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 };
     }
     if (key === 'home') {
       if (onClosingLine) {
+        // On closing line of collapsed node: go to start line
         this.cursorLine = onClosingLine.startLine;
+        this.cursorColumn = 0;
+      } else if (this.cursorColumn === 0) {
+        // Already at start of line: go to start of document
+        this.cursorLine = 0;
+        this.cursorColumn = 0;
+      } else {
+        // Go to start of line
+        this.cursorColumn = 0;
       }
-      this.cursorColumn = 0;
     } else {
-      if (this.cursorLine < this.lines.length) {
-        this.cursorColumn = this.lines[this.cursorLine].length;
+      const lineLength = this.lines[this.cursorLine]?.length || 0;
+      if (this.cursorColumn === lineLength) {
+        // Already at end of line: go to end of document
+        this.cursorLine = this.lines.length - 1;
+        this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
+      } else {
+        // Go to end of line
+        this.cursorColumn = lineLength;
       }
     }
     // Update selection end if shift is pressed
     if (isShift) {
       this.selectionEnd = { line: this.cursorLine, column: this.cursorColumn };
@@ -1955,7 +2390,50 @@ class GeoJsonEditor extends HTMLElement {
       this.selectionStart = null;
       this.selectionEnd = null;
     }
+    this._invalidateRenderCache();
+    this._scrollToCursor();
+    this.scheduleRender();
+  }
+  /**
+   * Handle PageUp/PageDown
+   */
+  private _handlePageUpDown(direction: 'up' | 'down', isShift: boolean): void {
+    // Start selection if shift is pressed and no selection exists
+    if (isShift && !this.selectionStart) {
+      this.selectionStart = { line: this.cursorLine, column: this.cursorColumn };
+    }
+    const viewport = this._viewport;
+    if (!viewport) return;
+    // Calculate how many lines fit in the viewport
+    const linesPerPage = Math.floor(viewport.clientHeight / this.lineHeight);
+    if (direction === 'up') {
+      // Find current visible index and move up by page
+      const currentVisibleIdx = this.visibleLines.findIndex(vl => vl.index === this.cursorLine);
+      const newVisibleIdx = Math.max(0, currentVisibleIdx - linesPerPage);
+      this.cursorLine = this.visibleLines[newVisibleIdx]?.index || 0;
+    } else {
+      // Find current visible index and move down by page
+      const currentVisibleIdx = this.visibleLines.findIndex(vl => vl.index === this.cursorLine);
+      const newVisibleIdx = Math.min(this.visibleLines.length - 1, currentVisibleIdx + linesPerPage);
+      this.cursorLine = this.visibleLines[newVisibleIdx]?.index || this.lines.length - 1;
+    }
+    // Clamp cursor column to line length
+    this.cursorColumn = Math.min(this.cursorColumn, this.lines[this.cursorLine]?.length || 0);
+    // Update selection end if shift is pressed
+    if (isShift) {
+      this.selectionEnd = { line: this.cursorLine, column: this.cursorColumn };
+    } else {
+      this.selectionStart = null;
+      this.selectionEnd = null;
+    }
     this._invalidateRenderCache();
     this._scrollToCursor();
     this.scheduleRender();
@@ -1964,26 +2442,25 @@ 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 };
     this.cursorLine = lastLine;
     this.cursorColumn = this.lines[lastLine]?.length || 0;
     this._invalidateRenderCache();
-    this._scrollToCursor();
+    // Don't scroll - viewport should stay in place when selecting all
     this.scheduleRender();
   }
   /**
    * 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 +2478,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 +2496,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 +2505,7 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Clear the current selection
    */
-  _clearSelection() {
+  private _clearSelection() {
     this.selectionStart = null;
     this.selectionEnd = null;
   }
@@ -2036,13 +2513,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 +2540,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 +2561,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 +2583,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 +2593,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);
@@ -2125,19 +2602,27 @@ class GeoJsonEditor extends HTMLElement {
       this.insertText(text);
     }
+    // Cancel any pending render from insertText/formatAndUpdate
+    if (this.renderTimer) {
+      cancelAnimationFrame(this.renderTimer);
+      this.renderTimer = undefined;
+    }
     // Auto-collapse coordinates after pasting into empty editor
     if (wasEmpty && this.lines.length > 0) {
-      // Cancel pending render, collapse first, then render once
-      if (this.renderTimer) {
-        cancelAnimationFrame(this.renderTimer);
-        this.renderTimer = null;
-      }
       this.autoCollapseCoordinates();
     }
+    // Expand any collapsed nodes that contain errors
+    this._expandErrorNodes();
+    // Force immediate render (not via RAF) to ensure content displays instantly
+    this.renderViewport();
   }
-  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 +2631,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 +2653,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 +2697,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 +2738,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]);
@@ -2292,14 +2787,23 @@ class GeoJsonEditor extends HTMLElement {
   }
   // ========== Collapse/Expand ==========
-  toggleCollapse(nodeId) {
+  toggleCollapse(nodeId: string): void {
+    const nodeInfo = this._nodeIdToLines.get(nodeId);
     if (this.collapsedNodes.has(nodeId)) {
       this.collapsedNodes.delete(nodeId);
+      // Track that user opened this node - don't re-collapse during edits
+      if (nodeInfo?.uniqueKey) {
+        this._openedNodeKeys.add(nodeInfo.uniqueKey);
+      }
     } else {
       this.collapsedNodes.add(nodeId);
+      // User closed it - allow re-collapse
+      if (nodeInfo?.uniqueKey) {
+        this._openedNodeKeys.delete(nodeInfo.uniqueKey);
+      }
     }
     // Use updateView - don't rebuild nodeId mappings since content didn't change
     this.updateView();
     this._invalidateRenderCache(); // Force re-render
@@ -2307,15 +2811,47 @@ class GeoJsonEditor extends HTMLElement {
   }
   autoCollapseCoordinates() {
+    // Don't collapse if there are errors - they should remain visible
+    if (this._hasErrors()) {
+      return;
+    }
     this._applyCollapsedOption(['coordinates']);
   }
+  /**
+   * Check if current content has any errors (JSON parse errors or syntax highlighting errors)
+   */
+  private _hasErrors(): boolean {
+    // Check JSON parse errors
+    try {
+      const content = this.lines.join('\n');
+      const wrapped = '[' + content + ']';
+      JSON.parse(wrapped);
+    } catch {
+      return true;
+    }
+    // Check for syntax highlighting errors (json-error class)
+    for (const line of this.lines) {
+      const highlighted = highlightSyntax(line, '', undefined);
+      if (highlighted.includes('json-error')) {
+        return true;
+      }
+    }
+    return false;
+  }
   /**
    * 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
+   * Does not collapse if there are errors (so they remain visible)
    */
-  _applyCollapsedFromOptions(options, features) {
+  private _applyCollapsedFromOptions(options: SetOptions, features: Feature[]): void {
+    // Don't collapse if there are errors - they should remain visible
+    if (this._hasErrors()) {
+      return;
+    }
     const collapsed = options.collapsed !== undefined ? options.collapsed : ['coordinates'];
     if (collapsed && (Array.isArray(collapsed) ? collapsed.length > 0 : true)) {
       this._applyCollapsedOption(collapsed, features);
@@ -2324,10 +2860,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 +2906,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 +2921,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 +2943,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 +2972,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 +2984,7 @@ class GeoJsonEditor extends HTMLElement {
     };
     colorInput._closeListener = closeOnClickOutside;
     setTimeout(() => {
       document.addEventListener('click', closeOnClickOutside, true);
     }, 100);
@@ -2449,17 +2993,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}`);
@@ -2470,23 +3015,223 @@ class GeoJsonEditor extends HTMLElement {
   }
   // ========== Format and Update ==========
+  /**
+   * Best-effort formatting for invalid JSON
+   * Splits on structural characters and indents as much as possible
+   * @param content The content to format
+   * @param skipLineIndex Optional line index to skip (keep as-is)
+   */
+  private _bestEffortFormat(content: string, skipLineIndex?: number): string[] {
+    const sourceLines = content.split('\n');
+    // If we have a line to skip, handle it specially
+    if (skipLineIndex !== undefined && skipLineIndex >= 0 && skipLineIndex < sourceLines.length) {
+      const skippedLine = sourceLines[skipLineIndex];
+      // Format content before the skipped line
+      const beforeContent = sourceLines.slice(0, skipLineIndex).join('\n');
+      const beforeLines = beforeContent.trim() ? this._formatChunk(beforeContent) : [];
+      // Keep skipped line exactly as-is (don't re-indent, user is typing on it)
+      const depthBefore = this._computeDepthAtEnd(beforeLines);
+      // Compute depth after the skipped line (including its brackets)
+      const depthAfterSkipped = depthBefore + this._computeBracketDelta(skippedLine);
+      // Format content after the skipped line, starting at correct depth
+      const afterContent = sourceLines.slice(skipLineIndex + 1).join('\n');
+      const afterLines = afterContent.trim() ? this._formatChunk(afterContent, depthAfterSkipped) : [];
+      return [...beforeLines, skippedLine, ...afterLines];
+    }
+    // No line to skip - format everything
+    return this._formatChunk(content);
+  }
+  /**
+   * Compute the net bracket delta for a line (opens - closes)
+   */
+  private _computeBracketDelta(line: string): number {
+    let delta = 0;
+    let inString = false;
+    let escaped = false;
+    for (const char of line) {
+      if (escaped) { escaped = false; continue; }
+      if (char === '\\' && inString) { escaped = true; continue; }
+      if (char === '"') { inString = !inString; continue; }
+      if (inString) continue;
+      if (char === '{' || char === '[') delta++;
+      else if (char === '}' || char === ']') delta--;
+    }
+    return delta;
+  }
+  /**
+   * Compute the bracket depth at the end of formatted lines
+   * Starts at 1 to account for FeatureCollection wrapper
+   */
+  private _computeDepthAtEnd(lines: string[]): number {
+    let depth = 1; // Start at 1 for FeatureCollection wrapper
+    for (const line of lines) {
+      for (const char of line) {
+        if (char === '{' || char === '[') depth++;
+        else if (char === '}' || char === ']') depth = Math.max(0, depth - 1);
+      }
+    }
+    return depth;
+  }
+  /**
+   * Format a chunk of JSON content
+   * @param content The content to format
+   * @param initialDepth Starting indentation depth (default 1 for FeatureCollection wrapper)
+   */
+  private _formatChunk(content: string, initialDepth: number = 1): string[] {
+    const result: string[] = [];
+    let currentLine = '';
+    let depth = initialDepth;
+    let inString = false;
+    let escaped = false;
+    for (let i = 0; i < content.length; i++) {
+      const char = content[i];
+      // Track escape sequences inside strings
+      if (escaped) {
+        currentLine += char;
+        escaped = false;
+        continue;
+      }
+      if (char === '\\' && inString) {
+        currentLine += char;
+        escaped = true;
+        continue;
+      }
+      // Track if we're inside a string
+      if (char === '"') {
+        inString = !inString;
+        currentLine += char;
+        continue;
+      }
+      // Inside string - just append
+      if (inString) {
+        currentLine += char;
+        continue;
+      }
+      // Outside string - handle structural characters
+      if (char === '{' || char === '[') {
+        currentLine += char;
+        result.push('  '.repeat(depth) + currentLine.trim());
+        depth++;
+        currentLine = '';
+      } else if (char === '}' || char === ']') {
+        if (currentLine.trim()) {
+          result.push('  '.repeat(depth) + currentLine.trim());
+        }
+        depth = Math.max(0, depth - 1);
+        currentLine = char;
+      } else if (char === ',') {
+        currentLine += char;
+        result.push('  '.repeat(depth) + currentLine.trim());
+        currentLine = '';
+      } else if (char === ':') {
+        currentLine += ': '; // Add space after colon for readability
+        i++; // Skip if next char is space
+        if (content[i] === ' ') continue;
+        i--; // Not a space, go back
+      } else if (char === '\n' || char === '\r') {
+        // Ignore existing newlines
+        continue;
+      } else {
+        currentLine += char;
+      }
+    }
+    // Don't forget last line
+    if (currentLine.trim()) {
+      result.push('  '.repeat(depth) + currentLine.trim());
+    }
+    return result;
+  }
   formatAndUpdate() {
+    // Save cursor position
+    const oldCursorLine = this.cursorLine;
+    const oldCursorColumn = this.cursorColumn;
+    const oldContent = this.lines.join('\n');
     try {
-      const content = this.lines.join('\n');
-      const wrapped = '[' + content + ']';
+      const wrapped = '[' + oldContent + ']';
       const parsed = JSON.parse(wrapped);
       const formatted = JSON.stringify(parsed, null, 2);
       const lines = formatted.split('\n');
       this.lines = lines.slice(1, -1); // Remove wrapper brackets
-    } catch (e) {
-      // Invalid JSON, keep as-is
+    } catch {
+      // Invalid JSON - apply best-effort formatting
+      if (oldContent.trim()) {
+        // Skip the cursor line only for small content (typing, not paste)
+        // This avoids text jumping while user is typing
+        // For paste/large insertions, format everything for proper structure
+        const cursorLineContent = this.lines[oldCursorLine] || '';
+        // If cursor line is short, likely typing. Long lines = paste
+        const isSmallEdit = cursorLineContent.length < 80;
+        const skipLine = isSmallEdit ? oldCursorLine : undefined;
+        this.lines = this._bestEffortFormat(oldContent, skipLine);
+      }
     }
+    const newContent = this.lines.join('\n');
+    // If content didn't change, keep cursor exactly where it was
+    if (newContent === oldContent) {
+      this.cursorLine = oldCursorLine;
+      this.cursorColumn = oldCursorColumn;
+    } else {
+      // Content changed due to reformatting
+      // The cursor position (this.cursorLine, this.cursorColumn) was set by the calling
+      // operation (insertText, insertNewline, etc.) BEFORE formatAndUpdate was called.
+      // We need to adjust for indentation changes while keeping the logical position.
+      // If cursor is at column 0 (e.g., after newline), keep it there
+      // This preserves expected behavior for newline insertion
+      if (this.cursorColumn === 0) {
+        // Just keep line, column 0 - indentation will be handled by auto-indent
+      } else {
+        // For other cases, try to maintain position relative to content (not indentation)
+        const oldLines = oldContent.split('\n');
+        const oldLineContent = oldLines[oldCursorLine] || '';
+        const oldLeadingSpaces = oldLineContent.length - oldLineContent.trimStart().length;
+        const oldColumnInContent = Math.max(0, oldCursorColumn - oldLeadingSpaces);
+        // Apply same offset to new line's indentation
+        if (this.cursorLine < this.lines.length) {
+          const newLineContent = this.lines[this.cursorLine];
+          const newLeadingSpaces = newLineContent.length - newLineContent.trimStart().length;
+          this.cursorColumn = newLeadingSpaces + oldColumnInContent;
+        }
+      }
+    }
+    // Clamp cursor to valid range
+    this.cursorLine = Math.min(this.cursorLine, Math.max(0, this.lines.length - 1));
+    this.cursorColumn = Math.min(this.cursorColumn, this.lines[this.cursorLine]?.length || 0);
     this.updateModel();
+    // Expand any nodes that contain errors (prevents closing edited nodes with typos)
+    this._expandErrorNodes();
     this.scheduleRender();
     this.updatePlaceholderVisibility();
+    this._updateErrorDisplay();
     this.emitChange();
   }
@@ -2501,14 +3246,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 +3270,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 +3278,63 @@ 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';
+    }
+  }
+  /**
+   * Update error display (counter and navigation visibility)
+   */
+  private _updateErrorDisplay() {
+    const errorLines = this._getErrorLines();
+    const count = errorLines.length;
+    if (this._errorNav) {
+      this._errorNav.classList.toggle('visible', count > 0);
+    }
+    if (this._errorCount) {
+      this._errorCount.textContent = count > 0 ? String(count) : '';
     }
   }
   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 +3354,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 +3371,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 +3382,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 +3402,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 +3426,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 +3447,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 +3457,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 +3472,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 +3500,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 +3514,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 +3527,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 +3542,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 +3612,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 +3635,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 +3655,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 +3688,7 @@ class GeoJsonEditor extends HTMLElement {
     });
   }
-  _parseFeatures() {
+  private _parseFeatures() {
     try {
       const content = this.lines.join('\n');
       if (!content.trim()) return [];