npm - @softwarity/geojson-editor - Versions diffs - 1.0.16 → 1.0.18 - Mend

@softwarity/geojson-editor 1.0.16 → 1.0.18

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 (15) hide show

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