@softwarity/geojson-editor 1.0.14 → 1.0.16

package/src/{geojson-editor.js → geojson-editor.ts}

@@ -1,61 +1,377 @@
 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 = ['type', 'geometry', 'properties', 'coordinates', 'id', 'features'];
-const GEOMETRY_TYPES = ['Point', 'MultiPoint', 'LineString', 'MultiLineString', 'Polygon', 'MultiPolygon'];
+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+)/;
 
 /**
  * GeoJSON Editor Web Component
  * Monaco-like architecture with virtualized line rendering
  */
 class GeoJsonEditor extends HTMLElement {
+  // ========== Model (Source of Truth) ==========
+  lines: string[] = [];
+  collapsedNodes: Set<string> = new Set();
+  hiddenFeatures: Set<string> = new Set();
+
+  // ========== Node ID Management ==========
+  private _nodeIdCounter: number = 0;
+  private _lineToNodeId: Map<number, string> = new Map();
+  private _nodeIdToLines: Map<string, NodeRangeInfo> = new Map();
+
+  // ========== Derived State (computed from model) ==========
+  visibleLines: VisibleLine[] = [];
+  lineMetadata: Map<number, LineMeta> = new Map();
+  featureRanges: Map<string, FeatureRange> = new Map();
+
+  // ========== View State ==========
+  viewportHeight: number = 0;
+  lineHeight: number = 19.5;
+  bufferLines: number = 5;
+
+  // ========== Render Cache ==========
+  private _lastStartIndex: number = -1;
+  private _lastEndIndex: number = -1;
+  private _lastTotalLines: number = -1;
+  private _scrollRaf: number | null = null;
+
+  // ========== Cursor/Selection ==========
+  cursorLine: number = 0;
+  cursorColumn: number = 0;
+  selectionStart: CursorPosition | null = null;
+  selectionEnd: CursorPosition | null = null;
+
+  // ========== Debounce ==========
+  private renderTimer: number | null = null;
+  private inputTimer: number | null = null;
+
+  // ========== Theme ==========
+  themes: ThemeSettings = { dark: {}, light: {} };
+
+  // ========== Undo/Redo History ==========
+  private _undoStack: EditorSnapshot[] = [];
+  private _redoStack: EditorSnapshot[] = [];
+  private _maxHistorySize: number = 100;
+  private _lastActionTime: number = 0;
+  private _lastActionType: string | null = null;
+  private _groupingDelay: number = 500;
+
+  // ========== Internal State ==========
+  private _isSelecting: boolean = false;
+  private _isComposing: boolean = false;
+  private _blockRender: boolean = false;
+  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;
+
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+  }
 
-    // ========== Model (Source of Truth) ==========
-    this.lines = [];              // Array of line strings
-    this.collapsedNodes = new Set(); // Set of unique node IDs that are collapsed
-    this.hiddenFeatures = new Set(); // Set of feature keys hidden from events
-    
-    // ========== Node ID Management ==========
-    this._nodeIdCounter = 0;      // Counter for generating unique node IDs
-    this._lineToNodeId = new Map(); // lineIndex -> nodeId (for collapsible lines)
-    this._nodeIdToLines = new Map(); // nodeId -> {startLine, endLine} (range of collapsed content)
-    
-    // ========== Derived State (computed from model) ==========
-    this.visibleLines = [];       // Lines to render (after collapse filter)
-    this.lineMetadata = new Map(); // lineIndex -> {colors, booleans, collapse, visibility, hidden, featureKey}
-    this.featureRanges = new Map(); // featureKey -> {startLine, endLine, featureIndex}
-    
-    // ========== View State ==========
-    this.scrollTop = 0;
-    this.viewportHeight = 0;
-    this.lineHeight = 19.5;       // CSS: line-height * font-size = 1.5 * 13px
-    this.bufferLines = 5;         // Extra lines to render above/below viewport
-    
-    // ========== Render Cache ==========
+  // ========== Render Cache ==========
+  _invalidateRenderCache() {
     this._lastStartIndex = -1;
     this._lastEndIndex = -1;
     this._lastTotalLines = -1;
-    this._scrollRaf = null;
-    
-    // ========== Cursor/Selection ==========
-    this.cursorLine = 0;
-    this.cursorColumn = 0;
-    this.selectionStart = null;   // {line, column}
-    this.selectionEnd = null;     // {line, column}
-    
-    // ========== Debounce ==========
-    this.renderTimer = null;
-    this.inputTimer = null;
-    
-    // ========== Theme ==========
-    this.themes = { dark: {}, light: {} };
+  }
+
+  // ========== Undo/Redo System ==========
+
+  /**
+   * Create a snapshot of current editor state
+   * @returns {Object} State snapshot
+   */
+  _createSnapshot() {
+    return {
+      lines: [...this.lines],
+      cursorLine: this.cursorLine,
+      cursorColumn: this.cursorColumn,
+      timestamp: Date.now()
+    };
+  }
+
+  /**
+   * Restore editor state from snapshot
+   * @param {Object} snapshot - State to restore
+   */
+  _restoreSnapshot(snapshot) {
+    this.lines = [...snapshot.lines];
+    this.cursorLine = snapshot.cursorLine;
+    this.cursorColumn = snapshot.cursorColumn;
+    this.updateModel();
+    this._invalidateRenderCache();
+    this.scheduleRender();
+    this.updatePlaceholderVisibility();
+    this.emitChange();
+  }
+
+  /**
+   * Save current state to undo stack before making changes
+   * @param {string} actionType - Type of action (insert, delete, paste, etc.)
+   */
+  _saveToHistory(actionType = 'edit') {
+    const now = Date.now();
+    const shouldGroup = (
+      actionType === this._lastActionType &&
+      (now - this._lastActionTime) < this._groupingDelay
+    );
+
+    // If same action type within grouping delay, don't create new entry
+    if (!shouldGroup) {
+      const snapshot = this._createSnapshot();
+      this._undoStack.push(snapshot);
+
+      // Limit stack size
+      if (this._undoStack.length > this._maxHistorySize) {
+        this._undoStack.shift();
+      }
+
+      // Clear redo stack on new action
+      this._redoStack = [];
+    }
+
+    this._lastActionTime = now;
+    this._lastActionType = actionType;
+  }
+
+  /**
+   * Undo last action
+   * @returns {boolean} True if undo was performed
+   */
+  undo() {
+    if (this._undoStack.length === 0) return false;
+
+    // Save current state to redo stack
+    this._redoStack.push(this._createSnapshot());
+
+    // Restore previous state
+    const previousState = this._undoStack.pop();
+    this._restoreSnapshot(previousState);
+
+    // Reset action tracking
+    this._lastActionType = null;
+    this._lastActionTime = 0;
+
+    return true;
+  }
+
+  /**
+   * Redo previously undone action
+   * @returns {boolean} True if redo was performed
+   */
+  redo() {
+    if (this._redoStack.length === 0) return false;
+
+    // Save current state to undo stack
+    this._undoStack.push(this._createSnapshot());
+
+    // Restore next state
+    const nextState = this._redoStack.pop();
+    this._restoreSnapshot(nextState);
+
+    // Reset action tracking
+    this._lastActionType = null;
+    this._lastActionTime = 0;
+
+    return true;
+  }
+
+  /**
+   * Clear undo/redo history
+   */
+  clearHistory() {
+    this._undoStack = [];
+    this._redoStack = [];
+    this._lastActionType = null;
+    this._lastActionTime = 0;
+  }
+
+  /**
+   * Check if undo is available
+   * @returns {boolean}
+   */
+  canUndo() {
+    return this._undoStack.length > 0;
+  }
+
+  /**
+   * Check if redo is available
+   * @returns {boolean}
+   */
+  canRedo() {
+    return this._redoStack.length > 0;
   }
 
   // ========== Unique ID Generation ==========
@@ -162,14 +478,16 @@ class GeoJsonEditor extends HTMLElement {
    * @param {Object} range - The range info {startLine, endLine}
    */
   _deleteCollapsedNode(range) {
+    this._saveToHistory('delete');
+
     // Remove all lines from startLine to endLine
     const count = range.endLine - range.startLine + 1;
     this.lines.splice(range.startLine, count);
-    
+
     // Position cursor at the line where the node was
     this.cursorLine = Math.min(range.startLine, this.lines.length - 1);
     this.cursorColumn = 0;
-    
+
     this.formatAndUpdate();
   }
 
@@ -269,12 +587,12 @@ class GeoJsonEditor extends HTMLElement {
     this.updatePlaceholderVisibility();
   }
 
-  disconnectedCallback() {
+  disconnectedCallback(): void {
     if (this.renderTimer) clearTimeout(this.renderTimer);
     if (this.inputTimer) clearTimeout(this.inputTimer);
-    
+
     // Cleanup color picker
-    const colorPicker = document.querySelector('.geojson-color-picker-input');
+    const colorPicker = document.querySelector('.geojson-color-picker-input') as HTMLInputElement & { _closeListener?: EventListener };
     if (colorPicker) {
       if (colorPicker._closeListener) {
         document.removeEventListener('click', colorPicker._closeListener, true);
@@ -343,9 +661,10 @@ class GeoJsonEditor extends HTMLElement {
       this.handleEditorClick(e);
     }, true);
 
-    viewport.addEventListener('mousedown', (e) => {
+    viewport.addEventListener('mousedown', (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
       // Skip if clicking on visibility pseudo-element (line-level)
-      const lineEl = e.target.closest('.line.has-visibility');
+      const lineEl = target.closest('.line.has-visibility');
       if (lineEl) {
         const rect = lineEl.getBoundingClientRect();
         const clickX = e.clientX - rect.left;
@@ -357,9 +676,9 @@ class GeoJsonEditor extends HTMLElement {
       }
 
       // Skip if clicking on an inline control pseudo-element (positioned with negative left)
-      if (e.target.classList.contains('json-color') ||
-          e.target.classList.contains('json-boolean')) {
-        const rect = e.target.getBoundingClientRect();
+      if (target.classList.contains('json-color') ||
+          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) {
@@ -391,7 +710,7 @@ class GeoJsonEditor extends HTMLElement {
       
       // Focus textarea
       hiddenTextarea.focus();
-      this._lastStartIndex = -1;
+      this._invalidateRenderCache();
       this.scheduleRender();
     });
     
@@ -417,7 +736,7 @@ class GeoJsonEditor extends HTMLElement {
         viewport.scrollTop += scrollSpeed;
       }
       
-      this._lastStartIndex = -1;
+      this._invalidateRenderCache();
       this.scheduleRender();
     });
     
@@ -429,13 +748,13 @@ class GeoJsonEditor extends HTMLElement {
     // Focus/blur handling to show/hide cursor
     hiddenTextarea.addEventListener('focus', () => {
       editorWrapper.classList.add('focused');
-      this._lastStartIndex = -1; // Force re-render to show cursor
+      this._invalidateRenderCache(); // Force re-render to show cursor
       this.scheduleRender();
     });
 
     hiddenTextarea.addEventListener('blur', () => {
       editorWrapper.classList.remove('focused');
-      this._lastStartIndex = -1; // Force re-render to hide cursor
+      this._invalidateRenderCache(); // Force re-render to hide cursor
       this.scheduleRender();
     });
 
@@ -443,7 +762,6 @@ class GeoJsonEditor extends HTMLElement {
     let isRendering = false;
     viewport.addEventListener('scroll', () => {
       if (isRendering) return;
-      this.scrollTop = viewport.scrollTop;
       this.syncGutterScroll();
       
       // Use requestAnimationFrame to batch scroll updates
@@ -505,7 +823,7 @@ class GeoJsonEditor extends HTMLElement {
     });
 
     // Wheel on gutter -> scroll viewport
-    gutter.addEventListener('wheel', (e) => {
+    gutter.addEventListener('wheel', (e: WheelEvent) => {
       e.preventDefault();
       viewport.scrollTop += e.deltaY;
     });
@@ -524,7 +842,12 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Set the editor content from a string value
    */
-  setValue(value) {
+  setValue(value, autoCollapse = true) {
+    // Save to history only if there's existing content
+    if (this.lines.length > 0) {
+      this._saveToHistory('setValue');
+    }
+
     if (!value || !value.trim()) {
       this.lines = [];
     } else {
@@ -541,7 +864,7 @@ class GeoJsonEditor extends HTMLElement {
         this.lines = value.split('\n');
       }
     }
-    
+
     // Clear state for new content
     this.collapsedNodes.clear();
     this.hiddenFeatures.clear();
@@ -549,18 +872,18 @@ class GeoJsonEditor extends HTMLElement {
     this._nodeIdToLines.clear();
     this.cursorLine = 0;
     this.cursorColumn = 0;
-    
+
     this.updateModel();
     this.scheduleRender();
     this.updatePlaceholderVisibility();
-    
-    // Auto-collapse coordinates
-    if (this.lines.length > 0) {
+
+    // Auto-collapse coordinates (unless disabled)
+    if (autoCollapse && this.lines.length > 0) {
       requestAnimationFrame(() => {
         this.autoCollapseCoordinates();
       });
     }
-    
+
     this.emitChange();
   }
 
@@ -576,9 +899,12 @@ class GeoJsonEditor extends HTMLElement {
    * Rebuilds line-to-nodeId mapping while preserving collapsed state
    */
   updateModel() {
+    // Invalidate context map cache since content changed
+    this._contextMapCache = null;
+
     // Rebuild lineToNodeId mapping (may shift due to edits)
     this._rebuildNodeIdMappings();
-    
+
     this.computeFeatureRanges();
     this.computeLineMetadata();
     this.computeVisibleLines();
@@ -757,7 +1083,7 @@ class GeoJsonEditor extends HTMLElement {
     }
     
     // Reset render cache to force re-render
-    this._lastStartIndex = -1;
+    this._invalidateRenderCache();
     this._lastEndIndex = -1;
     this._lastTotalLines = -1;
   }
@@ -845,7 +1171,7 @@ class GeoJsonEditor extends HTMLElement {
       
       const lineEl = document.createElement('div');
       lineEl.className = 'line';
-      lineEl.dataset.lineIndex = lineData.index;
+      lineEl.dataset.lineIndex = String(lineData.index);
       
       // Add visibility button on line (uses ::before pseudo-element)
       if (lineData.meta?.visibilityButton) {
@@ -980,7 +1306,7 @@ class GeoJsonEditor extends HTMLElement {
       // Line number first
       const lineNum = document.createElement('span');
       lineNum.className = 'line-number';
-      lineNum.textContent = lineData.index + 1;
+      lineNum.textContent = String(lineData.index + 1);
       gutterLine.appendChild(lineNum);
       
       // Collapse column (always present for alignment)
@@ -990,7 +1316,7 @@ class GeoJsonEditor extends HTMLElement {
         const btn = document.createElement('div');
         btn.className = 'collapse-button' + (meta.collapseButton.isCollapsed ? ' collapsed' : '');
         btn.textContent = meta.collapseButton.isCollapsed ? '›' : '⌄';
-        btn.dataset.line = lineData.index;
+        btn.dataset.line = String(lineData.index);
         btn.dataset.nodeId = meta.collapseButton.nodeId;
         btn.title = meta.collapseButton.isCollapsed ? 'Expand' : 'Collapse';
         collapseCol.appendChild(btn);
@@ -1014,9 +1340,9 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   // ========== Input Handling ==========
-  
-  handleInput() {
-    const textarea = this.shadowRoot.getElementById('hiddenTextarea');
+
+  handleInput(): void {
+    const textarea = this.shadowRoot!.getElementById('hiddenTextarea') as HTMLTextAreaElement;
     const inputValue = textarea.value;
     
     if (!inputValue) return;
@@ -1090,183 +1416,166 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   handleKeydown(e) {
-    // Check if cursor is in a collapsed zone
-    const inCollapsedZone = this._getCollapsedRangeForLine(this.cursorLine);
-    const onCollapsedNode = this._getCollapsedNodeAtLine(this.cursorLine);
-    const onClosingLine = this._getCollapsedClosingLine(this.cursorLine);
-    
-    switch (e.key) {
-      case 'Enter':
-        e.preventDefault();
-        // Block in collapsed zones
-        if (onCollapsedNode || inCollapsedZone) return;
-        // On closing line, before bracket -> block
-        if (onClosingLine) {
-          const line = this.lines[this.cursorLine];
-          const bracketPos = this._getClosingBracketPos(line);
-          if (bracketPos >= 0 && this.cursorColumn <= bracketPos) {
-            return;
-          }
-          // After bracket, allow normal enter (add new line)
-        }
-        this.insertNewline();
-        break;
-      case 'Backspace':
-        e.preventDefault();
-        // Delete selection if any
-        if (this._hasSelection()) {
-          this._deleteSelection();
-          this.formatAndUpdate();
-          return;
-        }
-        // On closing line
-        if (onClosingLine) {
-          const line = this.lines[this.cursorLine];
-          const bracketPos = this._getClosingBracketPos(line);
-          if (bracketPos >= 0 && this.cursorColumn > bracketPos + 1) {
-            // After bracket, allow delete
-            this.deleteBackward();
-            return;
-          } else if (this.cursorColumn === bracketPos + 1) {
-            // Just after bracket, delete whole node
-            this._deleteCollapsedNode(onClosingLine);
-            return;
-          }
-          // On or before bracket, delete whole node
-          this._deleteCollapsedNode(onClosingLine);
-          return;
-        }
-        // If on collapsed node opening line at position 0, delete whole node
-        if (onCollapsedNode && this.cursorColumn === 0) {
-          this._deleteCollapsedNode(onCollapsedNode);
-          return;
-        }
-        // Block inside collapsed zones
-        if (inCollapsedZone) return;
-        // On opening line, allow editing before and at bracket
-        if (onCollapsedNode) {
-          const line = this.lines[this.cursorLine];
-          const bracketPos = line.search(/[{\[]/);
-          if (this.cursorColumn > bracketPos + 1) {
-            // After bracket, delete whole node
-            this._deleteCollapsedNode(onCollapsedNode);
-            return;
-          }
-        }
+    // Build context for collapsed zone detection
+    const ctx = {
+      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),
+      'Backspace': () => this._handleBackspace(ctx),
+      'Delete': () => this._handleDelete(ctx),
+      'ArrowUp': () => this._handleArrowKey(-1, 0, e.shiftKey, e.ctrlKey || e.metaKey),
+      'ArrowDown': () => this._handleArrowKey(1, 0, e.shiftKey, e.ctrlKey || e.metaKey),
+      'ArrowLeft': () => this._handleArrowKey(0, -1, e.shiftKey, e.ctrlKey || e.metaKey),
+      '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)
+    };
+
+    // Modifier key handlers (Ctrl/Cmd)
+    const modifierHandlers = {
+      'a': () => this._selectAll(),
+      'z': () => e.shiftKey ? this.redo() : this.undo(),
+      'y': () => this.redo(),
+      's': () => this.save(),
+      'o': () => !this.hasAttribute('readonly') && this.open()
+    };
+
+    // Check for direct key match
+    if (keyHandlers[e.key]) {
+      e.preventDefault();
+      keyHandlers[e.key]();
+      return;
+    }
+
+    // Check for modifier key combinations
+    if ((e.ctrlKey || e.metaKey) && modifierHandlers[e.key]) {
+      e.preventDefault();
+      modifierHandlers[e.key]();
+    }
+  }
+
+  _handleEnter(ctx) {
+    // Block in collapsed zones
+    if (ctx.onCollapsedNode || ctx.inCollapsedZone) return;
+    // On closing line, before bracket -> block
+    if (ctx.onClosingLine) {
+      const line = this.lines[this.cursorLine];
+      const bracketPos = this._getClosingBracketPos(line);
+      if (bracketPos >= 0 && this.cursorColumn <= bracketPos) {
+        return;
+      }
+    }
+    this.insertNewline();
+  }
+
+  _handleBackspace(ctx) {
+    // Delete selection if any
+    if (this._hasSelection()) {
+      this._deleteSelection();
+      this.formatAndUpdate();
+      return;
+    }
+    // On closing line
+    if (ctx.onClosingLine) {
+      const line = this.lines[this.cursorLine];
+      const bracketPos = this._getClosingBracketPos(line);
+      if (bracketPos >= 0 && this.cursorColumn > bracketPos + 1) {
         this.deleteBackward();
-        break;
-      case 'Delete':
-        e.preventDefault();
-        // Delete selection if any
-        if (this._hasSelection()) {
-          this._deleteSelection();
-          this.formatAndUpdate();
-          return;
-        }
-        // On closing line
-        if (onClosingLine) {
-          const line = this.lines[this.cursorLine];
-          const bracketPos = this._getClosingBracketPos(line);
-          if (bracketPos >= 0 && this.cursorColumn > bracketPos) {
-            // After bracket, allow delete
-            this.deleteForward();
-            return;
-          }
-          // On or before bracket, delete whole node
-          this._deleteCollapsedNode(onClosingLine);
-          return;
-        }
-        // If on collapsed node opening line
-        if (onCollapsedNode) {
-          const line = this.lines[this.cursorLine];
-          const bracketPos = line.search(/[{\[]/);
-          if (this.cursorColumn > bracketPos) {
-            // After bracket, delete whole node
-            this._deleteCollapsedNode(onCollapsedNode);
-            return;
-          }
-          // Before bracket, allow editing key name
-        }
-        // Block inside collapsed zones
-        if (inCollapsedZone) return;
+        return;
+      }
+      this._deleteCollapsedNode(ctx.onClosingLine);
+      return;
+    }
+    // If on collapsed node opening line at position 0, delete whole node
+    if (ctx.onCollapsedNode && this.cursorColumn === 0) {
+      this._deleteCollapsedNode(ctx.onCollapsedNode);
+      return;
+    }
+    // Block inside collapsed zones
+    if (ctx.inCollapsedZone) return;
+    // On opening line, allow editing before bracket
+    if (ctx.onCollapsedNode) {
+      const line = this.lines[this.cursorLine];
+      const bracketPos = line.search(/[{\[]/);
+      if (this.cursorColumn > bracketPos + 1) {
+        this._deleteCollapsedNode(ctx.onCollapsedNode);
+        return;
+      }
+    }
+    this.deleteBackward();
+  }
+
+  _handleDelete(ctx) {
+    // Delete selection if any
+    if (this._hasSelection()) {
+      this._deleteSelection();
+      this.formatAndUpdate();
+      return;
+    }
+    // On closing line
+    if (ctx.onClosingLine) {
+      const line = this.lines[this.cursorLine];
+      const bracketPos = this._getClosingBracketPos(line);
+      if (bracketPos >= 0 && this.cursorColumn > bracketPos) {
         this.deleteForward();
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        this._handleArrowKey(-1, 0, e.shiftKey);
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        this._handleArrowKey(1, 0, e.shiftKey);
-        break;
-      case 'ArrowLeft':
-        e.preventDefault();
-        this._handleArrowKey(0, -1, e.shiftKey);
-        break;
-      case 'ArrowRight':
-        e.preventDefault();
-        this._handleArrowKey(0, 1, e.shiftKey);
-        break;
-      case 'Home':
-        e.preventDefault();
-        this._handleHomeEnd('home', e.shiftKey, onClosingLine);
-        break;
-      case 'End':
-        e.preventDefault();
-        this._handleHomeEnd('end', e.shiftKey, onClosingLine);
-        break;
-      case 'a':
-        // Ctrl+A or Cmd+A: select all
-        if (e.ctrlKey || e.metaKey) {
-          e.preventDefault();
-          this._selectAll();
-          return;
-        }
-        break;
-      case 'Tab':
-        e.preventDefault();
-        
-        // Shift+Tab: collapse the containing expanded node
-        if (e.shiftKey) {
-          const containingNode = this._getContainingExpandedNode(this.cursorLine);
-          if (containingNode) {
-            // Find the position just after the opening bracket
-            const startLine = this.lines[containingNode.startLine];
-            const bracketPos = startLine.search(/[{\[]/);
-            
-            this.toggleCollapse(containingNode.nodeId);
-            
-            // Move cursor to just after the opening bracket
-            this.cursorLine = containingNode.startLine;
-            this.cursorColumn = bracketPos >= 0 ? bracketPos + 1 : startLine.length;
-            this._clearSelection();
-            this._scrollToCursor();
-          }
-          return;
-        }
-        
-        // Tab: expand collapsed node if on one
-        if (onCollapsedNode) {
-          this.toggleCollapse(onCollapsedNode.nodeId);
-          return;
-        }
-        if (onClosingLine) {
-          this.toggleCollapse(onClosingLine.nodeId);
-          return;
-        }
-        
-        // Block in hidden collapsed zones
-        if (inCollapsedZone) return;
-        break;
+        return;
+      }
+      this._deleteCollapsedNode(ctx.onClosingLine);
+      return;
+    }
+    // If on collapsed node opening line
+    if (ctx.onCollapsedNode) {
+      const line = this.lines[this.cursorLine];
+      const bracketPos = line.search(/[{\[]/);
+      if (this.cursorColumn > bracketPos) {
+        this._deleteCollapsedNode(ctx.onCollapsedNode);
+        return;
+      }
+    }
+    // Block inside collapsed zones
+    if (ctx.inCollapsedZone) return;
+    this.deleteForward();
+  }
+
+  _handleTab(isShiftKey, ctx) {
+    // Shift+Tab: 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(/[{\[]/);
+        this.toggleCollapse(containingNode.nodeId);
+        this.cursorLine = containingNode.startLine;
+        this.cursorColumn = bracketPos >= 0 ? bracketPos + 1 : startLine.length;
+        this._clearSelection();
+        this._scrollToCursor();
+      }
+      return;
+    }
+    // Tab: expand collapsed node if on one
+    if (ctx.onCollapsedNode) {
+      this.toggleCollapse(ctx.onCollapsedNode.nodeId);
+      return;
+    }
+    if (ctx.onClosingLine) {
+      this.toggleCollapse(ctx.onClosingLine.nodeId);
     }
   }
 
   insertNewline() {
+    this._saveToHistory('newline');
+
     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);
-      
+
       this.lines[this.cursorLine] = before;
       this.lines.splice(this.cursorLine + 1, 0, after);
       this.cursorLine++;
@@ -1276,11 +1585,13 @@ class GeoJsonEditor extends HTMLElement {
       this.cursorLine = this.lines.length - 1;
       this.cursorColumn = 0;
     }
-    
+
     this.formatAndUpdate();
   }
 
   deleteBackward() {
+    this._saveToHistory('delete');
+
     if (this.cursorColumn > 0) {
       const line = this.lines[this.cursorLine];
       this.lines[this.cursorLine] = line.substring(0, this.cursorColumn - 1) + line.substring(this.cursorColumn);
@@ -1294,11 +1605,13 @@ class GeoJsonEditor extends HTMLElement {
       this.lines.splice(this.cursorLine, 1);
       this.cursorLine--;
     }
-    
+
     this.formatAndUpdate();
   }
 
   deleteForward() {
+    this._saveToHistory('delete');
+
     if (this.cursorLine < this.lines.length) {
       const line = this.lines[this.cursorLine];
       if (this.cursorColumn < line.length) {
@@ -1309,7 +1622,7 @@ class GeoJsonEditor extends HTMLElement {
         this.lines.splice(this.cursorLine + 1, 1);
       }
     }
-    
+
     this.formatAndUpdate();
   }
 
@@ -1339,7 +1652,7 @@ class GeoJsonEditor extends HTMLElement {
     const maxCol = this.lines[this.cursorLine]?.length || 0;
     this.cursorColumn = Math.min(this.cursorColumn, maxCol);
     
-    this._lastStartIndex = -1;
+    this._invalidateRenderCache();
     this._scrollToCursor();
     this.scheduleRender();
   }
@@ -1348,124 +1661,103 @@ class GeoJsonEditor extends HTMLElement {
    * Move cursor horizontally with smart navigation around collapsed nodes
    */
   moveCursorHorizontal(delta) {
+    if (delta > 0) {
+      this._moveCursorRight();
+    } else {
+      this._moveCursorLeft();
+    }
+    this._invalidateRenderCache();
+    this._scrollToCursor();
+    this.scheduleRender();
+  }
+
+  _moveCursorRight() {
     const line = this.lines[this.cursorLine];
     const onCollapsed = this._getCollapsedNodeAtLine(this.cursorLine);
     const onClosingLine = this._getCollapsedClosingLine(this.cursorLine);
-    
-    if (delta > 0) {
-      // Moving right
-      if (onClosingLine) {
-        const bracketPos = this._getClosingBracketPos(line);
-        if (this.cursorColumn < bracketPos) {
-          // Before bracket, jump to bracket
-          this.cursorColumn = bracketPos;
-        } else if (this.cursorColumn >= line.length) {
-          // At end, go to next line
-          if (this.cursorLine < this.lines.length - 1) {
-            this.cursorLine++;
-            this.cursorColumn = 0;
-          }
-        } else {
-          // On or after bracket, move normally
-          this.cursorColumn++;
-        }
-      } else if (onCollapsed) {
-        const bracketPos = line.search(/[{\[]/);
-        if (this.cursorColumn < bracketPos) {
-          // Before bracket, move normally
-          this.cursorColumn++;
-        } else if (this.cursorColumn === bracketPos) {
-          // On bracket, go to after bracket
-          this.cursorColumn = bracketPos + 1;
-        } else {
-          // After bracket, jump to closing line at bracket
-          this.cursorLine = onCollapsed.endLine;
-          const closingLine = this.lines[this.cursorLine];
-          this.cursorColumn = this._getClosingBracketPos(closingLine);
-        }
+
+    if (onClosingLine) {
+      const bracketPos = this._getClosingBracketPos(line);
+      if (this.cursorColumn < bracketPos) {
+        this.cursorColumn = bracketPos;
       } else if (this.cursorColumn >= line.length) {
-        // Move to next line
         if (this.cursorLine < this.lines.length - 1) {
           this.cursorLine++;
           this.cursorColumn = 0;
-          // Skip hidden collapsed zones
-          const collapsed = this._getCollapsedRangeForLine(this.cursorLine);
-          if (collapsed) {
-            this.cursorLine = collapsed.endLine;
-            this.cursorColumn = 0;
-          }
         }
       } else {
         this.cursorColumn++;
       }
-    } else {
-      // Moving left
-      if (onClosingLine) {
-        const bracketPos = this._getClosingBracketPos(line);
-        if (this.cursorColumn > bracketPos + 1) {
-          // After bracket, move normally
-          this.cursorColumn--;
-        } else if (this.cursorColumn === bracketPos + 1) {
-          // Just after bracket, jump to opening line after bracket
-          this.cursorLine = onClosingLine.startLine;
-          const openLine = this.lines[this.cursorLine];
-          const openBracketPos = openLine.search(/[{\[]/);
-          this.cursorColumn = openBracketPos + 1;
-        } else {
-          // On bracket, jump to opening line after bracket
-          this.cursorLine = onClosingLine.startLine;
-          const openLine = this.lines[this.cursorLine];
-          const openBracketPos = openLine.search(/[{\[]/);
-          this.cursorColumn = openBracketPos + 1;
-        }
-      } else if (onCollapsed) {
-        const bracketPos = line.search(/[{\[]/);
-        if (this.cursorColumn > bracketPos + 1) {
-          // After bracket, go to just after bracket
-          this.cursorColumn = bracketPos + 1;
-        } else if (this.cursorColumn === bracketPos + 1) {
-          // Just after bracket, go to bracket
-          this.cursorColumn = bracketPos;
-        } else if (this.cursorColumn > 0) {
-          // Before bracket, move normally
-          this.cursorColumn--;
-        } else {
-          // At start, go to previous line
-          if (this.cursorLine > 0) {
-            this.cursorLine--;
-            this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
-          }
+    } else if (onCollapsed) {
+      const bracketPos = line.search(/[{\[]/);
+      if (this.cursorColumn < bracketPos) {
+        this.cursorColumn++;
+      } else if (this.cursorColumn === bracketPos) {
+        this.cursorColumn = bracketPos + 1;
+      } else {
+        this.cursorLine = onCollapsed.endLine;
+        this.cursorColumn = this._getClosingBracketPos(this.lines[this.cursorLine]);
+      }
+    } else if (this.cursorColumn >= line.length) {
+      if (this.cursorLine < this.lines.length - 1) {
+        this.cursorLine++;
+        this.cursorColumn = 0;
+        const collapsed = this._getCollapsedRangeForLine(this.cursorLine);
+        if (collapsed) {
+          this.cursorLine = collapsed.endLine;
+          this.cursorColumn = 0;
         }
+      }
+    } else {
+      this.cursorColumn++;
+    }
+  }
+
+  _moveCursorLeft() {
+    const line = this.lines[this.cursorLine];
+    const onCollapsed = this._getCollapsedNodeAtLine(this.cursorLine);
+    const onClosingLine = this._getCollapsedClosingLine(this.cursorLine);
+
+    if (onClosingLine) {
+      const bracketPos = this._getClosingBracketPos(line);
+      if (this.cursorColumn > bracketPos + 1) {
+        this.cursorColumn--;
+      } else {
+        // Jump to opening line after bracket
+        this.cursorLine = onClosingLine.startLine;
+        const openLine = this.lines[this.cursorLine];
+        this.cursorColumn = openLine.search(/[{\[]/) + 1;
+      }
+    } else if (onCollapsed) {
+      const bracketPos = line.search(/[{\[]/);
+      if (this.cursorColumn > bracketPos + 1) {
+        this.cursorColumn = bracketPos + 1;
+      } else if (this.cursorColumn === bracketPos + 1) {
+        this.cursorColumn = bracketPos;
       } else if (this.cursorColumn > 0) {
         this.cursorColumn--;
       } else if (this.cursorLine > 0) {
-        // Move to previous line
         this.cursorLine--;
-        
-        // Check if previous line is closing line of collapsed
-        const closing = this._getCollapsedClosingLine(this.cursorLine);
-        if (closing) {
-          // Go to end of closing line
-          this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
+        this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
+      }
+    } else if (this.cursorColumn > 0) {
+      this.cursorColumn--;
+    } else if (this.cursorLine > 0) {
+      this.cursorLine--;
+      const closing = this._getCollapsedClosingLine(this.cursorLine);
+      if (closing) {
+        this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
+      } else {
+        const collapsed = this._getCollapsedRangeForLine(this.cursorLine);
+        if (collapsed) {
+          this.cursorLine = collapsed.startLine;
+          const openLine = this.lines[this.cursorLine];
+          this.cursorColumn = openLine.search(/[{\[]/) + 1;
         } else {
-          // Check if previous line is inside collapsed zone
-          const collapsed = this._getCollapsedRangeForLine(this.cursorLine);
-          if (collapsed) {
-            // Jump to opening line after bracket
-            this.cursorLine = collapsed.startLine;
-            const openLine = this.lines[this.cursorLine];
-            const bracketPos = openLine.search(/[{\[]/);
-            this.cursorColumn = bracketPos + 1;
-          } else {
-            this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
-          }
+          this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
         }
       }
     }
-    
-    this._lastStartIndex = -1;
-    this._scrollToCursor();
-    this.scheduleRender();
   }
 
   /**
@@ -1494,32 +1786,26 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   /**
-   * Legacy moveCursor for compatibility
+   * Handle arrow key with optional selection and word jump
    */
-  moveCursor(deltaLine, deltaCol) {
-    if (deltaLine !== 0) {
-      this.moveCursorSkipCollapsed(deltaLine);
-    } else if (deltaCol !== 0) {
-      this.moveCursorHorizontal(deltaCol);
-    }
-  }
-
-  /**
-   * Handle arrow key with optional selection
-   */
-  _handleArrowKey(deltaLine, deltaCol, isShift) {
+  _handleArrowKey(deltaLine, deltaCol, isShift, isCtrl = false) {
     // Start selection if shift is pressed and no selection exists
     if (isShift && !this.selectionStart) {
       this.selectionStart = { line: this.cursorLine, column: this.cursorColumn };
     }
-    
+
     // Move cursor
     if (deltaLine !== 0) {
       this.moveCursorSkipCollapsed(deltaLine);
     } else if (deltaCol !== 0) {
-      this.moveCursorHorizontal(deltaCol);
+      if (isCtrl) {
+        // Word-by-word movement
+        this._moveCursorByWord(deltaCol);
+      } else {
+        this.moveCursorHorizontal(deltaCol);
+      }
     }
-    
+
     // Update selection end if shift is pressed
     if (isShift) {
       this.selectionEnd = { line: this.cursorLine, column: this.cursorColumn };
@@ -1530,6 +1816,73 @@ class GeoJsonEditor extends HTMLElement {
     }
   }
 
+  /**
+   * Move cursor by word (Ctrl+Arrow)
+   * Behavior matches VSCode/Monaco:
+   * - 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) {
+    const line = this.lines[this.cursorLine] || '';
+    // Word character: alphanumeric, underscore, or hyphen (for kebab-case identifiers)
+    const isWordChar = (ch) => /[\w-]/.test(ch);
+
+    if (direction > 0) {
+      // Move right
+      let pos = this.cursorColumn;
+
+      if (pos >= line.length) {
+        // At end of line, move to start of next line
+        if (this.cursorLine < this.lines.length - 1) {
+          this.cursorLine++;
+          this.cursorColumn = 0;
+        }
+      } else if (isWordChar(line[pos])) {
+        // Inside a word: move to end of word
+        while (pos < line.length && isWordChar(line[pos])) {
+          pos++;
+        }
+        this.cursorColumn = pos;
+      } else {
+        // On non-word char: skip non-word chars only (stop at start of next word)
+        while (pos < line.length && !isWordChar(line[pos])) {
+          pos++;
+        }
+        this.cursorColumn = pos;
+      }
+    } else {
+      // Move left
+      let pos = this.cursorColumn;
+
+      if (pos === 0) {
+        // At start of line, move to end of previous line
+        if (this.cursorLine > 0) {
+          this.cursorLine--;
+          this.cursorColumn = this.lines[this.cursorLine].length;
+        }
+      } else if (pos > 0 && isWordChar(line[pos - 1])) {
+        // Just after a word char: move to start of word
+        while (pos > 0 && isWordChar(line[pos - 1])) {
+          pos--;
+        }
+        this.cursorColumn = pos;
+      } else {
+        // On or after non-word char: skip non-word chars, then skip word
+        while (pos > 0 && !isWordChar(line[pos - 1])) {
+          pos--;
+        }
+        while (pos > 0 && isWordChar(line[pos - 1])) {
+          pos--;
+        }
+        this.cursorColumn = pos;
+      }
+    }
+
+    this._invalidateRenderCache();
+    this._scrollToCursor();
+    this.scheduleRender();
+  }
+
   /**
    * Handle Home/End with optional selection
    */
@@ -1558,7 +1911,7 @@ class GeoJsonEditor extends HTMLElement {
       this.selectionEnd = null;
     }
     
-    this._lastStartIndex = -1;
+    this._invalidateRenderCache();
     this._scrollToCursor();
     this.scheduleRender();
   }
@@ -1573,7 +1926,7 @@ class GeoJsonEditor extends HTMLElement {
     this.cursorLine = lastLine;
     this.cursorColumn = this.lines[lastLine]?.length || 0;
     
-    this._lastStartIndex = -1;
+    this._invalidateRenderCache();
     this._scrollToCursor();
     this.scheduleRender();
   }
@@ -1640,9 +1993,11 @@ class GeoJsonEditor extends HTMLElement {
    */
   _deleteSelection() {
     if (!this._hasSelection()) return false;
-    
+
+    this._saveToHistory('delete');
+
     const { start, end } = this._normalizeSelection();
-    
+
     if (start.line === end.line) {
       // Single line selection
       const line = this.lines[start.line];
@@ -1654,12 +2009,12 @@ class GeoJsonEditor extends HTMLElement {
       this.lines[start.line] = startLine + endLine;
       this.lines.splice(start.line + 1, end.line - start.line);
     }
-    
+
     this.cursorLine = start.line;
     this.cursorColumn = start.column;
     this.selectionStart = null;
     this.selectionEnd = null;
-    
+
     return true;
   }
 
@@ -1668,10 +2023,10 @@ class GeoJsonEditor extends HTMLElement {
     if (this._hasSelection()) {
       this._deleteSelection();
     }
-    
+
     // Block insertion in hidden collapsed zones
     if (this._getCollapsedRangeForLine(this.cursorLine)) return;
-    
+
     // On closing line, only allow after bracket
     const onClosingLine = this._getCollapsedClosingLine(this.cursorLine);
     if (onClosingLine) {
@@ -1679,7 +2034,7 @@ class GeoJsonEditor extends HTMLElement {
       const bracketPos = this._getClosingBracketPos(line);
       if (this.cursorColumn <= bracketPos) return;
     }
-    
+
     // On collapsed opening line, only allow before bracket
     const onCollapsed = this._getCollapsedNodeAtLine(this.cursorLine);
     if (onCollapsed) {
@@ -1687,7 +2042,10 @@ class GeoJsonEditor extends HTMLElement {
       const bracketPos = line.search(/[{\[]/);
       if (this.cursorColumn > bracketPos) return;
     }
-    
+
+    // Save to history before making changes
+    this._saveToHistory('insert');
+
     // Handle empty editor case
     if (this.lines.length === 0) {
       // Split text by newlines to properly handle multi-line paste
@@ -1706,18 +2064,30 @@ class GeoJsonEditor extends HTMLElement {
   handlePaste(e) {
     e.preventDefault();
     const text = e.clipboardData.getData('text/plain');
-    if (text) {
-      const wasEmpty = this.lines.length === 0;
+    if (!text) return;
+
+    const wasEmpty = this.lines.length === 0;
+
+    // Try to parse as GeoJSON and normalize
+    try {
+      const parsed = JSON.parse(text);
+      const features = this._normalizeToFeatures(parsed);
+      // Valid GeoJSON - insert formatted features
+      const formatted = features.map(f => JSON.stringify(f, null, 2)).join(',\n');
+      this.insertText(formatted);
+    } catch {
+      // Invalid GeoJSON - fallback to raw text insertion
       this.insertText(text);
-      // Auto-collapse coordinates after pasting into empty editor
-      if (wasEmpty && this.lines.length > 0) {
-        // Cancel pending render, collapse first, then render once
-        if (this.renderTimer) {
-          cancelAnimationFrame(this.renderTimer);
-          this.renderTimer = null;
-        }
-        this.autoCollapseCoordinates();
+    }
+
+    // Auto-collapse coordinates after pasting into empty editor
+    if (wasEmpty && this.lines.length > 0) {
+      // Cancel pending render, collapse first, then render once
+      if (this.renderTimer) {
+        cancelAnimationFrame(this.renderTimer);
+        this.renderTimer = null;
       }
+      this.autoCollapseCoordinates();
     }
   }
 
@@ -1735,11 +2105,13 @@ class GeoJsonEditor extends HTMLElement {
     e.preventDefault();
     if (this._hasSelection()) {
       e.clipboardData.setData('text/plain', this._getSelectedText());
+      this._saveToHistory('cut');
       this._deleteSelection();
       this.formatAndUpdate();
     } else {
       // Cut all content
       e.clipboardData.setData('text/plain', this.getContent());
+      this._saveToHistory('cut');
       this.lines = [];
       this.cursorLine = 0;
       this.cursorColumn = 0;
@@ -1885,21 +2257,70 @@ class GeoJsonEditor extends HTMLElement {
     
     // Use updateView - don't rebuild nodeId mappings since content didn't change
     this.updateView();
-    this._lastStartIndex = -1; // Force re-render
+    this._invalidateRenderCache(); // Force re-render
     this.scheduleRender();
   }
 
   autoCollapseCoordinates() {
+    this._applyCollapsedOption(['coordinates']);
+  }
+
+  /**
+   * 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) {
+    const collapsed = options.collapsed !== undefined ? options.collapsed : ['coordinates'];
+    if (collapsed && (Array.isArray(collapsed) ? collapsed.length > 0 : true)) {
+      this._applyCollapsedOption(collapsed, features);
+    }
+  }
+
+  /**
+   * 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) {
     const ranges = this._findCollapsibleRanges();
 
+    // Group ranges by feature (root nodes)
+    const featureRanges = ranges.filter(r => r.isRootFeature);
+
+    // Determine which attributes to collapse per feature
     for (const range of ranges) {
-      if (range.nodeKey === 'coordinates') {
+      let shouldCollapse = false;
+
+      if (typeof collapsed === 'function') {
+        // Find which feature this range belongs to
+        const featureIndex = featureRanges.findIndex(fr =>
+          range.startLine >= fr.startLine && range.endLine <= fr.endLine
+        );
+        const feature = features?.[featureIndex] || null;
+        const collapsedAttrs = collapsed(feature, featureIndex);
+
+        // Check if this range should be collapsed
+        if (range.isRootFeature) {
+          shouldCollapse = collapsedAttrs.includes('$root');
+        } else {
+          shouldCollapse = collapsedAttrs.includes(range.nodeKey);
+        }
+      } else if (Array.isArray(collapsed)) {
+        // Static list
+        if (range.isRootFeature) {
+          shouldCollapse = collapsed.includes('$root');
+        } else {
+          shouldCollapse = collapsed.includes(range.nodeKey);
+        }
+      }
+
+      if (shouldCollapse) {
         this.collapsedNodes.add(range.nodeId);
       }
     }
 
     // Rebuild everything to ensure consistent state after collapse changes
-    // This is especially important after paste into empty editor
     this.updateModel();
     this.scheduleRender();
   }
@@ -1943,11 +2364,11 @@ class GeoJsonEditor extends HTMLElement {
     `;
     document.body.appendChild(anchor);
     
-    const colorInput = document.createElement('input');
+    const colorInput = document.createElement('input') as HTMLInputElement & { _closeListener?: EventListener };
     colorInput.type = 'color';
     colorInput.value = currentColor;
     colorInput.className = 'geojson-color-picker-input';
-    
+
     // Position the color input inside the anchor
     colorInput.style.cssText = `
       position: absolute;
@@ -1961,18 +2382,18 @@ class GeoJsonEditor extends HTMLElement {
       cursor: pointer;
     `;
     anchor.appendChild(colorInput);
-    
-    colorInput.addEventListener('input', (e) => {
-      this.updateColorValue(line, e.target.value, attributeName);
+
+    colorInput.addEventListener('input', (e: Event) => {
+      this.updateColorValue(line, (e.target as HTMLInputElement).value, attributeName);
     });
-    
-    const closeOnClickOutside = (e) => {
+
+    const closeOnClickOutside = (e: Event) => {
       if (e.target !== colorInput) {
         document.removeEventListener('click', closeOnClickOutside, true);
         anchor.remove(); // Remove anchor (which contains the input)
       }
     };
-    
+
     colorInput._closeListener = closeOnClickOutside;
     
     setTimeout(() => {
@@ -2070,10 +2491,10 @@ class GeoJsonEditor extends HTMLElement {
   
   updateReadonly() {
     const textarea = this.shadowRoot.getElementById('hiddenTextarea');
-    const clearBtn = this.shadowRoot.getElementById('clearBtn');
-    
+    const clearBtn = this.shadowRoot!.getElementById('clearBtn') as HTMLButtonElement;
+
     // Use readOnly instead of disabled to allow text selection for copying
-    if (textarea) textarea.readOnly = this.readonly;
+    if (textarea) (textarea as HTMLTextAreaElement).readOnly = this.readonly;
     if (clearBtn) clearBtn.hidden = this.readonly;
   }
 
@@ -2159,13 +2580,13 @@ class GeoJsonEditor extends HTMLElement {
     return `:host-context(${selector})`;
   }
 
-  setTheme(theme) {
+  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 };
     this.updateThemeCSS();
   }
 
-  resetTheme() {
+  resetTheme(): void {
     this.themes = { dark: {}, light: {} };
     this.updateThemeCSS();
   }
@@ -2266,178 +2687,164 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   _buildContextMap() {
+    // Memoization: return cached result if content hasn't changed
+    const linesLength = this.lines.length;
+    if (this._contextMapCache &&
+        this._contextMapLinesLength === linesLength &&
+        this._contextMapFirstLine === this.lines[0] &&
+        this._contextMapLastLine === this.lines[linesLength - 1]) {
+      return this._contextMapCache;
+    }
+
     const contextMap = new Map();
     const contextStack = [];
     let pendingContext = null;
-    
-    for (let i = 0; i < this.lines.length; i++) {
+
+    for (let i = 0; i < linesLength; i++) {
       const line = this.lines[i];
       const currentContext = contextStack[contextStack.length - 1]?.context || 'Feature';
       contextMap.set(i, currentContext);
-      
+
       // Check for context-changing keys
-      if (/"geometry"\s*:/.test(line)) pendingContext = 'geometry';
-      else if (/"properties"\s*:/.test(line)) pendingContext = 'properties';
-      else if (/"features"\s*:/.test(line)) pendingContext = 'Feature';
-      
+      if (RE_CONTEXT_GEOMETRY.test(line)) pendingContext = 'geometry';
+      else if (RE_CONTEXT_PROPERTIES.test(line)) pendingContext = 'properties';
+      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;
-      
+
       for (let j = 0; j < openBraces + openBrackets; j++) {
         contextStack.push({ context: pendingContext || currentContext, isArray: j >= openBraces });
         pendingContext = null;
       }
-      
+
       for (let j = 0; j < closeBraces + closeBrackets && contextStack.length > 0; j++) {
         contextStack.pop();
       }
     }
-    
+
+    // Cache the result
+    this._contextMapCache = contextMap;
+    this._contextMapLinesLength = linesLength;
+    this._contextMapFirstLine = this.lines[0];
+    this._contextMapLastLine = this.lines[linesLength - 1];
+
     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(/^(\s*"[^"]+"\s*:\s*)([{\[])/);
+      const bracketMatch = text.match(RE_COLLAPSED_BRACKET);
       // Also match standalone { or [ (root Feature objects)
-      const rootMatch = !bracketMatch && text.match(/^(\s*)([{\[]),?\s*$/);
-      
+      const rootMatch = !bracketMatch && text.match(RE_COLLAPSED_ROOT);
+
       if (bracketMatch) {
-        // Keep only the part up to and including the opening bracket
         displayText = bracketMatch[1] + bracketMatch[2];
         collapsedBracket = bracketMatch[2];
       } else if (rootMatch) {
-        // Root object - just keep the bracket
         displayText = rootMatch[1] + rootMatch[2];
         collapsedBracket = rootMatch[2];
       }
     }
-    
+
     // Escape HTML first
     let result = displayText
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;');
-    
+      .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(/([{}[\],:])/g, '<span class="json-punctuation">$1</span>');
-    
+    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
-    result = result.replace(/"([^"]+)"(<span class="json-punctuation">:<\/span>)/g, (match, key, colon) => {
+    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
-    // IMPORTANT: Preserve original spacing by capturing and re-emitting whitespace
     if (context !== 'properties') {
-      result = result.replace(
-        /<span class="geojson-key">"type"<\/span><span class="json-punctuation">:<\/span>(\s*)"([^"]*)"/g,
-        (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>`;
-        }
-      );
+      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)
-    // IMPORTANT: Preserve original spacing by capturing and re-emitting whitespace
-    result = result.replace(
-      /(<span class="json-punctuation">:<\/span>)(\s*)"([^"]*)"/g,
-      (match, colon, space, val) => {
-        // Don't double-wrap if already has a span after colon
-        if (match.includes('geojson-type') || match.includes('json-string')) return match;
-
-        // Check if it's a color value (hex) - use ::before for swatch via CSS class
-        if (/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.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>`;
+    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
-    // IMPORTANT: Preserve original spacing by capturing and re-emitting whitespace
-    result = result.replace(
-      /(<span class="json-punctuation">:<\/span>)(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi,
-      '$1$2<span class="json-number">$3</span>'
-    );
+    RE_NUMBERS_COLON.lastIndex = 0;
+    result = result.replace(RE_NUMBERS_COLON, '$1$2<span class="json-number">$3</span>');
 
     // Numbers in arrays (after [ or ,)
-    result = result.replace(
-      /(<span class="json-punctuation">[\[,]<\/span>)(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi,
-      '$1$2<span class="json-number">$3</span>'
-    );
+    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)
-    result = result.replace(
-      /^(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gim,
-      '$1<span class="json-number">$2</span>'
-    );
+    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
-    // IMPORTANT: Preserve original spacing by capturing and re-emitting whitespace
-    result = result.replace(
-      /(<span class="json-punctuation">:<\/span>)(\s*)(true|false)/g,
-      (match, colon, space, val) => {
-        const checkedClass = val === 'true' ? ' json-bool-true' : ' json-bool-false';
-        return `${colon}${space}<span class="json-boolean${checkedClass}">${val}</span>`;
-      }
-    );
+    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
-    // IMPORTANT: Preserve original spacing by capturing and re-emitting whitespace
-    result = result.replace(
-      /(<span class="json-punctuation">:<\/span>)(\s*)(null)/g,
-      '$1$2<span class="json-null">$3</span>'
-    );
-    
-    // Collapsed bracket indicator - just add the class, CSS ::after adds the "...]" or "...}"
+    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';
-      // Replace the last punctuation span (the opening bracket) with collapsed style class
       result = result.replace(
         new RegExp(`<span class="json-punctuation">\\${collapsedBracket}<\\/span>$`),
         `<span class="${bracketClass}">${collapsedBracket}</span>`
       );
     }
-    
-    // Mark unrecognized text as error - text that's not inside a span and not just whitespace
-    // This catches invalid JSON like unquoted strings, malformed values, etc.
-    result = result.replace(
-      /(<\/span>|^)([^<]+)(<span|$)/g,
-      (match, before, text, after) => {
-        // Skip if text is only whitespace or empty
-        if (!text || /^\s*$/.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(/(\s+)/);
-        let hasError = false;
-        const processed = parts.map(part => {
-          // If it's whitespace, keep it
-          if (/^\s*$/.test(part)) return part;
-          // Mark as error
-          hasError = true;
-          return `<span class="json-error">${part}</span>`;
-        }).join('');
-        return hasError ? before + processed + after : match;
-      }
-    );
+
+    // 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)
     
@@ -2463,28 +2870,135 @@ class GeoJsonEditor extends HTMLElement {
     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 ==========
-  
-  set(features) {
-    if (!Array.isArray(features)) throw new Error('set() expects an array');
+
+  /**
+   * Replace all features in the editor
+   * Accepts: FeatureCollection, Feature[], or single Feature
+   * @param {object|array} input - Features to set
+   * @param {object} options - Optional settings
+   * @param {string[]|function} options.collapsed - Attributes to collapse (default: ['coordinates'])
+   *   - string[]: List of attributes to collapse (e.g., ['coordinates', 'geometry'])
+   *   - function(feature, index): Returns string[] of attributes to collapse per feature
+   *   - Use '$root' to collapse the entire feature
+   * @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);
+    this.setValue(formatted, false); // Don't auto-collapse coordinates
+    this._applyCollapsedFromOptions(options, features);
   }
 
-  add(feature) {
-    const features = this._parseFeatures();
-    features.push(feature);
-    this.set(features);
+  /**
+   * Add features to the end of the editor
+   * Accepts: FeatureCollection, Feature[], or single Feature
+   * @param {object|array} input - Features to add
+   * @param {object} options - Optional settings
+   * @param {string[]|function} options.collapsed - Attributes to collapse (default: ['coordinates'])
+   * @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);
   }
 
-  insertAt(feature, index) {
+  /**
+   * Insert features at a specific index
+   * Accepts: FeatureCollection, Feature[], or single Feature
+   * @param {object|array} input - Features to insert
+   * @param {number} index - Index to insert at (negative = from end)
+   * @param {object} options - Optional settings
+   * @param {string[]|function} options.collapsed - Attributes to collapse (default: ['coordinates'])
+   * @throws {Error} If input is invalid
+   */
+  insertAt(input: FeatureInput, index: number, options: SetOptions = {}): void {
+    const newFeatures = this._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, feature);
-    this.set(features);
+    features.splice(Math.max(0, Math.min(idx, features.length)), 0, ...newFeatures);
+    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);
   }
 
-  removeAt(index) {
+  removeAt(index: number): Feature | undefined {
     const features = this._parseFeatures();
     const idx = index < 0 ? features.length + index : index;
     if (idx >= 0 && idx < features.length) {
@@ -2495,7 +3009,10 @@ class GeoJsonEditor extends HTMLElement {
     return undefined;
   }
 
-  removeAll() {
+  removeAll(): Feature[] {
+    if (this.lines.length > 0) {
+      this._saveToHistory('removeAll');
+    }
     const removed = this._parseFeatures();
     this.lines = [];
     this.collapsedNodes.clear();
@@ -2507,20 +3024,110 @@ class GeoJsonEditor extends HTMLElement {
     return removed;
   }
 
-  get(index) {
+  get(index: number): Feature | undefined {
     const features = this._parseFeatures();
     const idx = index < 0 ? features.length + index : index;
     return features[idx];
   }
 
-  getAll() {
+  getAll(): Feature[] {
     return this._parseFeatures();
   }
 
-  emit() {
+  emit(): void {
     this.emitChange();
   }
 
+  /**
+   * Save GeoJSON to a file (triggers download)
+   */
+  save(filename: string = 'features.geojson'): boolean {
+    try {
+      const features = this._parseFeatures();
+      const geojson = {
+        type: 'FeatureCollection',
+        features: features
+      };
+      const json = JSON.stringify(geojson, null, 2);
+      const blob = new Blob([json], { type: 'application/geo+json' });
+      const url = URL.createObjectURL(blob);
+
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  /**
+   * Open a GeoJSON file from the client filesystem
+   * Note: Available even in readonly mode via API (only Ctrl+O shortcut is blocked)
+   * @param {object} options - Optional settings
+   * @param {string[]|function} options.collapsed - Attributes to collapse (default: ['coordinates'])
+   * @returns {Promise<boolean>} Promise that resolves to true if file was loaded successfully
+   */
+  open(options: SetOptions = {}): Promise<boolean> {
+    return new Promise((resolve) => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = '.geojson,.json,application/geo+json,application/json';
+      input.style.display = 'none';
+
+      input.addEventListener('change', (e: Event) => {
+        const file = (e.target as HTMLInputElement).files?.[0];
+        if (!file) {
+          document.body.removeChild(input);
+          resolve(false);
+          return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = (event: ProgressEvent<FileReader>) => {
+          try {
+            const content = event.target?.result as string;
+            const parsed = JSON.parse(content);
+
+            // Normalize and validate features
+            const features = this._normalizeToFeatures(parsed);
+
+            // Load features into editor
+            this._saveToHistory('open');
+            this.set(features, options);
+            this.clearHistory(); // Clear history after opening new file
+            document.body.removeChild(input);
+            resolve(true);
+          } catch (err) {
+            document.body.removeChild(input);
+            resolve(false);
+          }
+        };
+
+        reader.onerror = () => {
+          document.body.removeChild(input);
+          resolve(false);
+        };
+
+        reader.readAsText(file);
+      });
+
+      // Handle cancel (no file selected)
+      input.addEventListener('cancel', () => {
+        document.body.removeChild(input);
+        resolve(false);
+      });
+
+      document.body.appendChild(input);
+      input.click();
+    });
+  }
+
   _parseFeatures() {
     try {
       const content = this.lines.join('\n');