@softwarity/geojson-editor 1.0.10 → 1.0.12

package/src/geojson-editor.js

@@ -1,2122 +1,2095 @@
+import styles from './geojson-editor.css?inline';
+import { getTemplate } from './geojson-editor.template.js';
+
+// GeoJSON constants
+const GEOJSON_KEYS = ['type', 'geometry', 'properties', 'coordinates', 'id', 'features'];
+const GEOMETRY_TYPES = ['Point', 'MultiPoint', 'LineString', 'MultiLineString', 'Polygon', 'MultiPolygon'];
+
+/**
+ * GeoJSON Editor Web Component
+ * Monaco-like architecture with virtualized line rendering
+ */
 class GeoJsonEditor extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
 
-    // Internal state
-    this.collapsedData = new Map(); // nodeKey -> {originalLines: string[], indent: number}
-    this.colorPositions = []; // {line, color}
-    this.booleanPositions = []; // {line, value, attributeName}
-    this.nodeTogglePositions = []; // {line, nodeKey, isCollapsed, indent}
-    this.hiddenFeatures = new Set(); // Set of feature keys (hidden from events)
+    // ========== 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}
-
-    // Debounce timer for syntax highlighting
-    this.highlightTimer = null;
-
-    // Cached computed styles (avoid repeated getComputedStyle calls)
-    this._cachedLineHeight = null;
-    this._cachedPaddingTop = null;
-
-    // Custom theme overrides (empty by default, CSS has defaults)
+    
+    // ========== 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 ==========
+    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: {} };
   }
 
-  static get observedAttributes() {
-    return ['readonly', 'value', 'placeholder', 'dark-selector', 'default-properties'];
-  }
-
-  // Parsed default properties rules (cache)
-  _defaultPropertiesRules = null;
-
-  // Helper: Convert camelCase to kebab-case
-  static _toKebabCase(str) {
-    return str.replace(/([A-Z])/g, '-$1').toLowerCase();
-  }
-
-  // Dark theme defaults - IntelliJ Darcula (light defaults are CSS fallbacks)
-  static DARK_THEME_DEFAULTS = {
-    bgColor: '#2b2b2b',
-    textColor: '#a9b7c6',
-    caretColor: '#bbbbbb',
-    gutterBg: '#313335',
-    gutterBorder: '#3c3f41',
-    jsonKey: '#9876aa',
-    jsonString: '#6a8759',
-    jsonNumber: '#6897bb',
-    jsonBoolean: '#cc7832',
-    jsonNull: '#cc7832',
-    jsonPunct: '#a9b7c6',
-    controlColor: '#cc7832',
-    controlBg: '#3c3f41',
-    controlBorder: '#5a5a5a',
-    geojsonKey: '#9876aa',
-    geojsonType: '#6a8759',
-    geojsonTypeInvalid: '#ff6b68',
-    jsonKeyInvalid: '#ff6b68'
-  };
-
-  // Pre-compiled regex patterns (avoid recompilation on each call)
-  static REGEX = {
-    // HTML escaping
-    ampersand: /&/g,
-    lessThan: /</g,
-    greaterThan: />/g,
-    // JSON structure
-    jsonKey: /"([^"]+)"\s*:/g,
-    typeValue: /<span class="geojson-key">"type"<\/span>:\s*"([^"]*)"/g,
-    stringValue: /:\s*"([^"]*)"/g,
-    numberAfterColon: /:\s*(-?\d+\.?\d*)/g,
-    boolean: /:\s*(true|false)/g,
-    nullValue: /:\s*(null)/g,
-    allNumbers: /\b(-?\d+\.?\d*)\b/g,
-    punctuation: /([{}[\],])/g,
-    // Highlighting detection
-    colorInLine: /"([\w-]+)"\s*:\s*"(#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}))"/g,
-    booleanInLine: /"([\w-]+)"\s*:\s*(true|false)/g,
-    collapsibleNode: /^(\s*)"(\w+)"\s*:\s*([{\[])/,
-    collapsedMarker: /^(\s*)"(\w+)"\s*:\s*([{\[])\.\.\.([\]\}])/
-  };
-
-  // Icons used in the gutter
-  static ICONS = {
-    expanded: '⌄',    // Chevron down (collapse button when expanded)
-    collapsed: '›',   // Chevron right (expand button when collapsed)
-    visibility: '👁'  // Eye icon for visibility toggle
-  };
+  // ========== Unique ID Generation ==========
+  _generateNodeId() {
+    return `node_${++this._nodeIdCounter}`;
+  }
 
   /**
-   * Find collapsed data by line index, nodeKey, and indent
-   * @param {number} lineIndex - Current line index
-   * @param {string} nodeKey - Node key to find
-   * @param {number} indent - Indentation level to match
-   * @returns {{key: string, data: Object}|null} Found key and data, or null
-   * @private
+   * 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
    */
-  _findCollapsedData(lineIndex, nodeKey, indent) {
-    // Try exact match first
-    const exactKey = `${lineIndex}-${nodeKey}`;
-    if (this.collapsedData.has(exactKey)) {
-      return { key: exactKey, data: this.collapsedData.get(exactKey) };
-    }
-
-    // Search for any key with this nodeKey and matching indent
-    for (const [key, data] of this.collapsedData.entries()) {
-      if (data.nodeKey === nodeKey && data.indent === indent) {
-        return { key, data };
+  _getCollapsedRangeForLine(lineIndex) {
+    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) {
+        return { nodeId, ...info };
       }
     }
-
     return null;
   }
 
-  connectedCallback() {
-    this.render();
-    this.setupEventListeners();
-
-    // Update prefix/suffix display
-    this.updatePrefixSuffix();
-
-    // Setup theme CSS
-    this.updateThemeCSS();
-
-    // Parse default properties rules
-    this._parseDefaultProperties();
-
-    // Initialize textarea with value attribute (attributeChangedCallback fires before render)
-    if (this.value) {
-      this.updateValue(this.value);
+  /**
+   * 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) {
+    for (const [nodeId, info] of this._nodeIdToLines) {
+      if (this.collapsedNodes.has(nodeId) && lineIndex === info.endLine) {
+        return { nodeId, ...info };
+      }
     }
-    this.updatePlaceholderContent();
+    return null;
   }
 
-  disconnectedCallback() {
-    // Clean up any open color picker and its global listener
-    const colorPicker = document.querySelector('.geojson-color-picker-input');
-    if (colorPicker && colorPicker._closeListener) {
-      document.removeEventListener('click', colorPicker._closeListener, true);
-      colorPicker.remove();
-    }
-
-    // Clear any pending highlight timer
-    if (this.highlightTimer) {
-      clearTimeout(this.highlightTimer);
-      this.highlightTimer = null;
-    }
+  /**
+   * 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) {
+    // Find the last ] or } on the line
+    const lastBracket = Math.max(line.lastIndexOf(']'), line.lastIndexOf('}'));
+    return lastBracket;
   }
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue) return;
-
-    if (name === 'value') {
-      this.updateValue(newValue);
-    } else if (name === 'readonly') {
-      this.updateReadonly();
-    } else if (name === 'placeholder') {
-      this.updatePlaceholderContent();
-    } else if (name === 'dark-selector') {
-      this.updateThemeCSS();
-    } else if (name === 'default-properties') {
-      // Re-parse the default properties rules
-      this._parseDefaultProperties();
+  /**
+   * 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) {
+    const nodeId = this._lineToNodeId.get(lineIndex);
+    if (nodeId && this.collapsedNodes.has(nodeId)) {
+      const info = this._nodeIdToLines.get(nodeId);
+      return { nodeId, ...info };
     }
-  }
-
-  // Properties
-  get readonly() {
-    return this.hasAttribute('readonly');
-  }
-
-
-  get value() {
-    return this.getAttribute('value') || '';
-  }
-
-  get placeholder() {
-    return this.getAttribute('placeholder') || '';
-  }
-
-  // Always in FeatureCollection mode - prefix/suffix are constant
-  get prefix() {
-    return '{"type": "FeatureCollection", "features": [';
-  }
-  
-  get suffix() {
-    return ']}';
-  }
-
-  get defaultProperties() {
-    return this.getAttribute('default-properties') || '';
+    return null;
   }
 
   /**
-   * Parse and cache the default-properties attribute.
-   * Supports two formats:
-   * 1. Simple object: {"fill-color": "#1a465b", "stroke-width": 2}
-   * 2. Conditional array: [{"match": {"geometry.type": "Polygon"}, "values": {...}}, ...]
-   * 
-   * Returns an array of rules: [{match: null|object, values: object}]
+   * 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
    */
-  _parseDefaultProperties() {
-    const attr = this.defaultProperties;
-    if (!attr) {
-      this._defaultPropertiesRules = [];
-      return this._defaultPropertiesRules;
-    }
-
-    try {
-      const parsed = JSON.parse(attr);
-      
-      if (Array.isArray(parsed)) {
-        // Conditional format: array of rules
-        this._defaultPropertiesRules = parsed.map(rule => ({
-          match: rule.match || null,
-          values: rule.values || {}
-        }));
-      } else if (typeof parsed === 'object' && parsed !== null) {
-        // Simple format: single object of properties for all features
-        this._defaultPropertiesRules = [{ match: null, values: parsed }];
-      } else {
-        this._defaultPropertiesRules = [];
-      }
-    } catch (e) {
-      console.warn('geojson-editor: Invalid default-properties JSON:', e.message);
-      this._defaultPropertiesRules = [];
+  _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 };
     }
-
-    return this._defaultPropertiesRules;
+    return null;
   }
 
   /**
-   * Check if a feature matches a condition.
-   * Supports dot notation for nested properties:
-   * - "geometry.type": "Polygon"
-   * - "properties.category": "airport"
+   * 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
    */
-  _matchesCondition(feature, match) {
-    if (!match || typeof match !== 'object') return true;
-
-    for (const [path, expectedValue] of Object.entries(match)) {
-      const actualValue = this._getNestedValue(feature, path);
-      if (actualValue !== expectedValue) {
-        return false;
+  _getContainingExpandedNode(lineIndex) {
+    let bestMatch = 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
+        if (!bestMatch || (info.endLine - info.startLine) < (bestMatch.endLine - bestMatch.startLine)) {
+          bestMatch = { nodeId, ...info };
+        }
       }
     }
-    return true;
+    
+    return bestMatch;
   }
 
   /**
-   * Get a nested value from an object using dot notation.
-   * E.g., _getNestedValue(feature, "geometry.type") => "Polygon"
+   * Delete an entire collapsed node (opening line to closing line)
+   * @param {Object} range - The range info {startLine, endLine}
    */
-  _getNestedValue(obj, path) {
-    const parts = path.split('.');
-    let current = obj;
-    for (const part of parts) {
-      if (current === null || current === undefined) return undefined;
-      current = current[part];
-    }
-    return current;
+  _deleteCollapsedNode(range) {
+    // 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();
   }
 
   /**
-   * Apply default properties to a single feature.
-   * Only adds properties that don't already exist.
-   * Returns a new feature object (doesn't mutate original).
+   * Rebuild nodeId mappings after content changes
+   * Preserves collapsed state by matching nodeKey + sequential occurrence
    */
-  _applyDefaultPropertiesToFeature(feature) {
-    if (!feature || typeof feature !== 'object') return feature;
-    if (!this._defaultPropertiesRules || this._defaultPropertiesRules.length === 0) return feature;
-
-    // Collect all properties to apply (later rules override earlier for same key)
-    const propsToApply = {};
-
-    for (const rule of this._defaultPropertiesRules) {
-      if (this._matchesCondition(feature, rule.match)) {
-        Object.assign(propsToApply, rule.values);
+  _rebuildNodeIdMappings() {
+    // Save old state to try to preserve collapsed nodes
+    const oldCollapsed = new Set(this.collapsedNodes);
+    const oldNodeKeyMap = new Map(); // nodeId -> nodeKey
+    for (const [nodeId, info] of this._nodeIdToLines) {
+      if (info.nodeKey) oldNodeKeyMap.set(nodeId, info.nodeKey);
+    }
+    
+    // Build list of collapsed nodeKeys for matching
+    const collapsedNodeKeys = [];
+    for (const nodeId of oldCollapsed) {
+      const nodeKey = oldNodeKeyMap.get(nodeId);
+      if (nodeKey) collapsedNodeKeys.push(nodeKey);
+    }
+    
+    // Reset mappings
+    this._nodeIdCounter = 0;
+    this._lineToNodeId.clear();
+    this._nodeIdToLines.clear();
+    this.collapsedNodes.clear();
+    
+    // Track occurrences of each nodeKey for matching
+    const nodeKeyOccurrences = new Map();
+    
+    // Assign fresh IDs to all collapsible nodes
+    for (let i = 0; i < this.lines.length; i++) {
+      const line = this.lines[i];
+      
+      // Match "key": { or "key": [
+      const kvMatch = line.match(/^\s*"([^"]+)"\s*:\s*([{\[])/);
+      // Also match standalone { or {, (root Feature objects)
+      const rootMatch = !kvMatch && line.match(/^\s*([{\[]),?\s*$/);
+      
+      if (!kvMatch && !rootMatch) continue;
+      
+      let nodeKey, openBracket;
+      
+      if (kvMatch) {
+        nodeKey = kvMatch[1];
+        openBracket = kvMatch[2];
+      } else {
+        // Root object - use special key based on line number and bracket type
+        openBracket = rootMatch[1];
+        nodeKey = `__root_${openBracket}_${i}`;
+      }
+      
+      // Check if closes on same line
+      const rest = line.substring(line.indexOf(openBracket) + 1);
+      const counts = this._countBrackets(rest, openBracket);
+      if (counts.close > counts.open) continue;
+      
+      const endLine = this._findClosingLine(i, openBracket);
+      if (endLine === -1 || endLine === i) continue;
+      
+      // Generate unique ID for this node
+      const nodeId = this._generateNodeId();
+      
+      this._lineToNodeId.set(i, nodeId);
+      this._nodeIdToLines.set(nodeId, { startLine: i, endLine, nodeKey, isRootFeature: !!rootMatch });
+      
+      // Track occurrence of this nodeKey
+      const occurrence = nodeKeyOccurrences.get(nodeKey) || 0;
+      nodeKeyOccurrences.set(nodeKey, occurrence + 1);
+      
+      // Check if this nodeKey was previously collapsed
+      const keyIndex = collapsedNodeKeys.indexOf(nodeKey);
+      if (keyIndex !== -1) {
+        // Remove from list so we don't match it again
+        collapsedNodeKeys.splice(keyIndex, 1);
+        this.collapsedNodes.add(nodeId);
       }
     }
+  }
 
-    if (Object.keys(propsToApply).length === 0) return feature;
+  // ========== Observed Attributes ==========
+  static get observedAttributes() {
+    return ['readonly', 'value', 'placeholder', 'dark-selector'];
+  }
 
-    // Apply only properties that don't already exist
-    const existingProps = feature.properties || {};
-    const newProps = { ...existingProps };
-    let hasChanges = false;
+  // ========== Lifecycle ==========
+  connectedCallback() {
+    this.render();
+    this.setupEventListeners();
+    this.updatePrefixSuffix();
+    this.updateThemeCSS();
+    
+    if (this.value) {
+      this.setValue(this.value);
+    }
+    this.updatePlaceholderVisibility();
+  }
 
-    for (const [key, value] of Object.entries(propsToApply)) {
-      if (!(key in existingProps)) {
-        newProps[key] = value;
-        hasChanges = true;
+  disconnectedCallback() {
+    if (this.renderTimer) clearTimeout(this.renderTimer);
+    if (this.inputTimer) clearTimeout(this.inputTimer);
+    
+    // Cleanup color picker
+    const colorPicker = document.querySelector('.geojson-color-picker-input');
+    if (colorPicker) {
+      if (colorPicker._closeListener) {
+        document.removeEventListener('click', colorPicker._closeListener, true);
       }
+      colorPicker.remove();
     }
-
-    if (!hasChanges) return feature;
-
-    return { ...feature, properties: newProps };
   }
 
-  render() {
-    const styles = `
-      <style>
-        /* Base reset - protect against inherited styles */
-        :host *, :host *::before, :host *::after {
-          box-sizing: border-box;
-          font: normal normal 13px/1.5 'Courier New', Courier, monospace;
-          font-variant: normal;
-          letter-spacing: 0;
-          word-spacing: 0;
-          text-transform: none;
-          text-decoration: none;
-          text-indent: 0;
-        }
-
-        :host {
-          display: flex;
-          flex-direction: column;
-          position: relative;
-          width: 100%;
-          height: 400px;
-          border-radius: 4px;
-          overflow: hidden;
-        }
-
-        :host([readonly]) .editor-wrapper::after {
-          content: '';
-          position: absolute;
-          inset: 0;
-          pointer-events: none;
-          background: repeating-linear-gradient(-45deg, rgba(128,128,128,0.08), rgba(128,128,128,0.08) 3px, transparent 3px, transparent 12px);
-          z-index: 1;
-        }
-
-        :host([readonly]) textarea { cursor: text; }
-
-        .editor-wrapper {
-          position: relative;
-          width: 100%;
-          flex: 1;
-          background: var(--bg-color, #fff);
-          display: flex;
-        }
-
-        .gutter {
-          width: 24px;
-          height: 100%;
-          background: var(--gutter-bg, #f0f0f0);
-          border-right: 1px solid var(--gutter-border, #e0e0e0);
-          overflow: hidden;
-          flex-shrink: 0;
-          position: relative;
-        }
-
-        .gutter-content {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          padding: 8px 4px;
-        }
-
-        .gutter-line {
-          position: absolute;
-          left: 0;
-          width: 100%;
-          height: 1.5em;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .color-indicator, .collapse-button, .boolean-checkbox {
-          width: 12px;
-          height: 12px;
-          border-radius: 2px;
-          cursor: pointer;
-          transition: transform 0.1s;
-          flex-shrink: 0;
-        }
-
-        .color-indicator {
-          border: 1px solid #555;
-        }
-        .color-indicator:hover {
-          transform: scale(1.2);
-          border-color: #fff;
-        }
-
-        .boolean-checkbox {
-          appearance: none;
-          -webkit-appearance: none;
-          background: transparent;
-          border: 1.5px solid var(--control-border, #c0c0c0);
-          border-radius: 2px;
-          margin: 0;
-          position: relative;
-        }
-        .boolean-checkbox:checked {
-          border-color: var(--control-color, #000080);
-        }
-        .boolean-checkbox:checked::after {
-          content: '✔';
-          color: var(--control-color, #000080);
-          font-size: 11px;
-          font-weight: bold;
-          position: absolute;
-          top: -3px;
-          right: -1px;
-        }
-        .boolean-checkbox:hover {
-          transform: scale(1.2);
-          border-color: var(--control-color, #000080);
-        }
-
-        .collapse-button {
-          background: transparent;
-          border: none;
-          color: var(--json-punct, #a9b7c6);
-          font-size: 10px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          user-select: none;
-          opacity: 0;
-          transition: opacity 0.15s;
-        }
-        .collapse-button.collapsed {
-          opacity: 1;
-        }
-        .gutter:hover .collapse-button {
-          opacity: 1;
-        }
-        .collapse-button:hover {
-          transform: scale(1.2);
-        }
-
-        /* Touch devices: always show collapse buttons */
-        @media (hover: none), (pointer: coarse) {
-          .collapse-button {
-            opacity: 1;
-          }
-        }
-
-        .visibility-button {
-          width: 14px;
-          height: 14px;
-          background: transparent;
-          color: var(--control-color, #000080);
-          border: none;
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          transition: all 0.1s;
-          flex-shrink: 0;
-          opacity: 0.7;
-          padding: 0;
-          font-size: 11px;
-        }
-        .visibility-button:hover { opacity: 1; transform: scale(1.15); }
-        .visibility-button.hidden { opacity: 0.35; }
-
-        .line-hidden { opacity: 0.35; filter: grayscale(50%); }
-
-        .editor-content {
-          position: relative;
-          flex: 1;
-          overflow: hidden;
-        }
-
-        .highlight-layer, textarea, .placeholder-layer {
-          position: absolute;
-          inset: 0;
-          padding: 8px 12px;
-          white-space: pre;
-          word-wrap: normal;
-        }
-
-        .highlight-layer {
-          overflow: hidden;
-          pointer-events: none;
-          z-index: 1;
-          color: var(--text-color, #000);
-        }
-
-        textarea {
-          margin: 0;
-          border: none;
-          outline: none;
-          background: transparent;
-          color: transparent;
-          caret-color: var(--caret-color, #000);
-          resize: none;
-          overflow: auto;
-          z-index: 2;
-        }
-        textarea::selection { background: rgba(51,153,255,0.3); }
-        textarea::placeholder { color: transparent; }
-        textarea:disabled { cursor: not-allowed; opacity: 0.6; }
-
-        .placeholder-layer {
-          color: #6a6a6a;
-          pointer-events: none;
-          z-index: 0;
-          overflow: hidden;
-        }
-
-        .json-key { color: var(--json-key, #660e7a); }
-        .json-string { color: var(--json-string, #008000); }
-        .json-number { color: var(--json-number, #00f); }
-        .json-boolean, .json-null { color: var(--json-boolean, #000080); }
-        .json-punctuation { color: var(--json-punct, #000); }
-        .json-key-invalid { color: var(--json-key-invalid, #f00); }
-
-        .geojson-key { color: var(--geojson-key, #660e7a); font-weight: 600; }
-        .geojson-type { color: var(--geojson-type, #008000); font-weight: 600; }
-        .geojson-type-invalid { color: var(--geojson-type-invalid, #f00); font-weight: 600; }
-
-        .prefix-wrapper, .suffix-wrapper {
-          display: flex;
-          flex-shrink: 0;
-          background: var(--bg-color, #fff);
-        }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
 
-        .prefix-gutter, .suffix-gutter {
-          width: 24px;
-          background: var(--gutter-bg, #f0f0f0);
-          border-right: 1px solid var(--gutter-border, #e0e0e0);
-          flex-shrink: 0;
-        }
+    switch (name) {
+      case 'value':
+        this.setValue(newValue);
+        break;
+      case 'readonly':
+        this.updateReadonly();
+        break;
+      case 'placeholder':
+        this.updatePlaceholderContent();
+        break;
+      case 'dark-selector':
+        this.updateThemeCSS();
+        break;
+    }
+  }
+
+  // ========== Properties ==========
+  get readonly() { return this.hasAttribute('readonly'); }
+  get value() { return this.getAttribute('value') || ''; }
+  get placeholder() { return this.getAttribute('placeholder') || ''; }
+  get prefix() { return '{"type": "FeatureCollection", "features": ['; }
+  get suffix() { return ']}'; }
+
+  // ========== Initial Render ==========
+  render() {
+    const styleEl = document.createElement('style');
+    styleEl.textContent = styles;
+    
+    const template = document.createElement('div');
+    template.innerHTML = getTemplate(this.placeholder);
+    
+    this.shadowRoot.innerHTML = '';
+    this.shadowRoot.appendChild(styleEl);
+    while (template.firstChild) {
+      this.shadowRoot.appendChild(template.firstChild);
+    }
+  }
 
-        .editor-prefix, .editor-suffix {
-          flex: 1;
-          padding: 4px 12px;
-          color: var(--text-color, #000);
-          background: var(--bg-color, #fff);
-          user-select: none;
-          white-space: pre-wrap;
-          word-wrap: break-word;
-          opacity: 0.6;
+  // ========== 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');
+
+    // Mouse selection state
+    this._isSelecting = false;
+
+    // Focus hidden textarea when clicking viewport
+    // Editor inline control clicks (color swatches, checkboxes, visibility icons)
+    // Use capture phase to intercept before mousedown
+    viewport.addEventListener('click', (e) => {
+      this.handleEditorClick(e);
+    }, true);
+
+    viewport.addEventListener('mousedown', (e) => {
+      // Skip if clicking on visibility pseudo-element (line-level)
+      const lineEl = e.target.closest('.line.has-visibility');
+      if (lineEl) {
+        const rect = lineEl.getBoundingClientRect();
+        const clickX = e.clientX - rect.left;
+        if (clickX < 14) {
+          return;
         }
-
-        .prefix-wrapper { border-bottom: 1px solid rgba(255,255,255,0.1); }
-        .suffix-wrapper { border-top: 1px solid rgba(255,255,255,0.1); position: relative; }
-
-        .clear-btn {
-          position: absolute;
-          right: 0.5rem;
-          top: 50%;
-          transform: translateY(-50%);
-          background: transparent;
-          border: none;
-          color: var(--text-color, #000);
-          opacity: 0.3;
-          cursor: pointer;
-          font-size: 0.65rem;
-          width: 1rem;
-          height: 1rem;
-          padding: 0.15rem 0 0 0;
-          border-radius: 3px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          transition: opacity 0.2s, background 0.2s;
+      }
+      
+      // 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();
+        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) {
+          return;
         }
-        .clear-btn:hover { opacity: 0.7; background: rgba(255,255,255,0.1); }
-        .clear-btn[hidden] { display: none; }
-
-        textarea::-webkit-scrollbar { width: 10px; height: 10px; }
-        textarea::-webkit-scrollbar-track { background: var(--control-bg, #e8e8e8); }
-        textarea::-webkit-scrollbar-thumb { background: var(--control-border, #c0c0c0); border-radius: 5px; }
-        textarea::-webkit-scrollbar-thumb:hover { background: var(--control-color, #000080); }
-        textarea { scrollbar-width: thin; scrollbar-color: var(--control-border, #c0c0c0) var(--control-bg, #e8e8e8); }
-      </style>
-    `;
-
-    const template = `
-      <div class="prefix-wrapper">
-        <div class="prefix-gutter"></div>
-        <div class="editor-prefix" id="editorPrefix"></div>
-      </div>
-      <div class="editor-wrapper">
-        <div class="gutter">
-          <div class="gutter-content" id="gutterContent"></div>
-        </div>
-        <div class="editor-content">
-          <div class="placeholder-layer" id="placeholderLayer">${this.escapeHtml(this.placeholder)}</div>
-          <div class="highlight-layer" id="highlightLayer"></div>
-          <textarea
-            id="textarea"
-            spellcheck="false"
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-          ></textarea>
-        </div>
-      </div>
-      <div class="suffix-wrapper">
-        <div class="suffix-gutter"></div>
-        <div class="editor-suffix" id="editorSuffix"></div>
-        <button class="clear-btn" id="clearBtn" title="Clear editor">✕</button>
-      </div>
-    `;
+      }
+      
+      // 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;
+        this.cursorLine = pos.line;
+        this.cursorColumn = pos.column;
+      } else {
+        // Normal click: start new selection
+        this.cursorLine = pos.line;
+        this.cursorColumn = pos.column;
+        this.selectionStart = { line: pos.line, column: pos.column };
+        this.selectionEnd = null;
+        this._isSelecting = true;
+      }
+      
+      // Focus textarea
+      hiddenTextarea.focus();
+      this._lastStartIndex = -1;
+      this.scheduleRender();
+    });
+    
+    // Mouse move for drag selection
+    viewport.addEventListener('mousemove', (e) => {
+      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;
+      } else if (e.clientY > rect.bottom - scrollMargin) {
+        // Near bottom edge, scroll down
+        viewport.scrollTop += scrollSpeed;
+      }
+      
+      this._lastStartIndex = -1;
+      this.scheduleRender();
+    });
+    
+    // Mouse up to end selection
+    document.addEventListener('mouseup', () => {
+      this._isSelecting = false;
+    });
 
-    this.shadowRoot.innerHTML = styles + template;
-  }
+    // Focus/blur handling to show/hide cursor
+    hiddenTextarea.addEventListener('focus', () => {
+      editorWrapper.classList.add('focused');
+      this._lastStartIndex = -1; // Force re-render to show cursor
+      this.scheduleRender();
+    });
 
-  setupEventListeners() {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    const highlightLayer = this.shadowRoot.getElementById('highlightLayer');
-
-    // Sync scroll between textarea and highlight layer
-    textarea.addEventListener('scroll', () => {
-      highlightLayer.scrollTop = textarea.scrollTop;
-      highlightLayer.scrollLeft = textarea.scrollLeft;
-      this.syncGutterScroll(textarea.scrollTop);
+    hiddenTextarea.addEventListener('blur', () => {
+      editorWrapper.classList.remove('focused');
+      this._lastStartIndex = -1; // Force re-render to hide cursor
+      this.scheduleRender();
     });
 
-    // Input handling with debounced highlight and auto-format
-    textarea.addEventListener('input', () => {
-      // Update placeholder visibility immediately (no debounce)
-      this.updatePlaceholderVisibility();
-
-      clearTimeout(this.highlightTimer);
-      this.highlightTimer = setTimeout(() => {
-        // Auto-format JSON content
-        this.autoFormatContentWithCursor();
-        this.updateHighlight();
-        this.emitChange();
-      }, 150);
+    // Scroll handling
+    let isRendering = false;
+    viewport.addEventListener('scroll', () => {
+      if (isRendering) return;
+      this.scrollTop = viewport.scrollTop;
+      this.syncGutterScroll();
+      
+      // Use requestAnimationFrame to batch scroll updates
+      if (!this._scrollRaf) {
+        this._scrollRaf = requestAnimationFrame(() => {
+          this._scrollRaf = null;
+          isRendering = true;
+          this.renderViewport();
+          isRendering = false;
+        });
+      }
     });
 
-    // Paste handling - trigger immediately without debounce
-    textarea.addEventListener('paste', () => {
-      // Clear any pending highlight timer to avoid duplicate processing
-      clearTimeout(this.highlightTimer);
-
-      // Use a short delay to let the paste complete
-      setTimeout(() => {
-        this.updatePlaceholderVisibility();
-        // Auto-format JSON content
-        this.autoFormatContentWithCursor();
-        this.updateHighlight();
-        this.emitChange();
-        // Auto-collapse coordinates after paste
-        this.applyAutoCollapsed();
-      }, 10);
+    // Input handling (hidden textarea)
+    hiddenTextarea.addEventListener('input', () => {
+      this.handleInput();
     });
 
-    // Gutter clicks (color indicators, boolean checkboxes, and collapse buttons)
-    const gutterContent = this.shadowRoot.getElementById('gutterContent');
-    gutterContent.addEventListener('click', (e) => {
-      // Check for visibility button (may click on SVG inside button)
-      const visibilityButton = e.target.closest('.visibility-button');
-      if (visibilityButton) {
-        const featureKey = visibilityButton.dataset.featureKey;
-        this.toggleFeatureVisibility(featureKey);
-        return;
-      }
+    hiddenTextarea.addEventListener('keydown', (e) => {
+      this.handleKeydown(e);
+    });
 
-      if (e.target.classList.contains('color-indicator')) {
-        const line = parseInt(e.target.dataset.line);
-        const color = e.target.dataset.color;
-        const attributeName = e.target.dataset.attributeName;
-        this.showColorPicker(e.target, line, color, attributeName);
-      } else if (e.target.classList.contains('boolean-checkbox')) {
-        const line = parseInt(e.target.dataset.line);
-        const attributeName = e.target.dataset.attributeName;
-        const newValue = e.target.checked;
-        this.updateBooleanValue(line, newValue, attributeName);
-      } else if (e.target.classList.contains('collapse-button')) {
-        const nodeKey = e.target.dataset.nodeKey;
-        const line = parseInt(e.target.dataset.line);
-        this.toggleCollapse(nodeKey, line);
-      }
+    // Paste handling
+    hiddenTextarea.addEventListener('paste', (e) => {
+      this.handlePaste(e);
     });
 
-    // Transfer wheel scroll from gutter to textarea
-    const gutter = this.shadowRoot.querySelector('.gutter');
-    gutter.addEventListener('wheel', (e) => {
-      e.preventDefault();
-      textarea.scrollTop += e.deltaY;
+    // Copy handling
+    hiddenTextarea.addEventListener('copy', (e) => {
+      this.handleCopy(e);
     });
 
-    // Block editing in collapsed areas
-    textarea.addEventListener('keydown', (e) => {
-      this.handleKeydownInCollapsedArea(e);
+    // Cut handling
+    hiddenTextarea.addEventListener('cut', (e) => {
+      this.handleCut(e);
     });
 
-    // Handle copy to include collapsed content
-    textarea.addEventListener('copy', (e) => {
-      this.handleCopyWithCollapsedContent(e);
+    // Gutter interactions
+    gutterContent.addEventListener('click', (e) => {
+      this.handleGutterClick(e);
+    });
+    
+    // Prevent gutter from stealing focus
+    gutter.addEventListener('mousedown', (e) => {
+      e.preventDefault();
     });
 
-    // Handle cut to include collapsed content
-    textarea.addEventListener('cut', (e) => {
-      this.handleCutWithCollapsedContent(e);
+    // Wheel on gutter -> scroll viewport
+    gutter.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      viewport.scrollTop += e.deltaY;
     });
 
     // Clear button
-    const clearBtn = this.shadowRoot.getElementById('clearBtn');
     clearBtn.addEventListener('click', () => {
       this.removeAll();
     });
 
-    // Update readonly state
+    // Initial readonly state
     this.updateReadonly();
   }
 
-  syncGutterScroll(scrollTop) {
-    const gutterContent = this.shadowRoot.getElementById('gutterContent');
-    gutterContent.style.transform = `translateY(-${scrollTop}px)`;
-  }
-
-  updateReadonly() {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    if (textarea) {
-      textarea.disabled = this.readonly;
+  // ========== Model Operations ==========
+  
+  /**
+   * Set the editor content from a string value
+   */
+  setValue(value) {
+    if (!value || !value.trim()) {
+      this.lines = [];
+    } else {
+      // Try to format JSON
+      try {
+        const wrapped = '[' + value + ']';
+        const parsed = JSON.parse(wrapped);
+        const formatted = JSON.stringify(parsed, null, 2);
+        const lines = formatted.split('\n');
+        // Remove wrapper brackets
+        this.lines = lines.slice(1, -1);
+      } catch (e) {
+        // Invalid JSON, use as-is
+        this.lines = value.split('\n');
+      }
     }
-    // Hide clear button in readonly mode
-    const clearBtn = this.shadowRoot.getElementById('clearBtn');
-    if (clearBtn) {
-      clearBtn.hidden = this.readonly;
+    
+    // Clear state for new content
+    this.collapsedNodes.clear();
+    this.hiddenFeatures.clear();
+    this._lineToNodeId.clear();
+    this._nodeIdToLines.clear();
+    this.cursorLine = 0;
+    this.cursorColumn = 0;
+    
+    this.updateModel();
+    this.scheduleRender();
+    this.updatePlaceholderVisibility();
+    
+    // Auto-collapse coordinates
+    if (this.lines.length > 0) {
+      requestAnimationFrame(() => {
+        this.autoCollapseCoordinates();
+      });
     }
+    
+    this.emitChange();
   }
 
-  escapeHtml(text) {
-    if (!text) return '';
-    const R = GeoJsonEditor.REGEX;
-    return text
-      .replace(R.ampersand, '&amp;')
-      .replace(R.lessThan, '&lt;')
-      .replace(R.greaterThan, '&gt;');
+  /**
+   * Get full content as string (expanded, no hidden markers)
+   */
+  getContent() {
+    return this.lines.join('\n');
   }
 
-  updatePlaceholderVisibility() {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    const placeholderLayer = this.shadowRoot.getElementById('placeholderLayer');
-    if (textarea && placeholderLayer) {
-      placeholderLayer.style.display = textarea.value ? 'none' : 'block';
-    }
+  /**
+   * Update derived state from model
+   * Rebuilds line-to-nodeId mapping while preserving collapsed state
+   */
+  updateModel() {
+    // Rebuild lineToNodeId mapping (may shift due to edits)
+    this._rebuildNodeIdMappings();
+    
+    this.computeFeatureRanges();
+    this.computeLineMetadata();
+    this.computeVisibleLines();
   }
 
-  updatePlaceholderContent() {
-    const placeholderLayer = this.shadowRoot.getElementById('placeholderLayer');
-    if (placeholderLayer) {
-      placeholderLayer.textContent = this.placeholder;
-    }
-    this.updatePlaceholderVisibility();
+  /**
+   * Update view state without rebuilding nodeId mappings
+   * Used for collapse/expand operations where content doesn't change
+   */
+  updateView() {
+    this.computeLineMetadata();
+    this.computeVisibleLines();
   }
 
-  updateValue(newValue) {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    if (textarea && textarea.value !== newValue) {
-      textarea.value = newValue || '';
-
-      // Auto-format JSON content
-      if (newValue) {
-        try {
-          // Wrap content in array brackets for validation and formatting
-          const wrapped = '[' + newValue + ']';
-          const parsed = JSON.parse(wrapped);
-          const formatted = JSON.stringify(parsed, null, 2);
-
-          // Remove first [ and last ] from formatted
-          const lines = formatted.split('\n');
-          if (lines.length > 2) {
-            textarea.value = lines.slice(1, -1).join('\n');
-          } else {
-            textarea.value = '';
+  /**
+   * Compute feature ranges (which lines belong to which feature)
+   */
+  computeFeatureRanges() {
+    this.featureRanges.clear();
+    
+    try {
+      const content = this.lines.join('\n');
+      const fullValue = this.prefix + content + this.suffix;
+      const parsed = JSON.parse(fullValue);
+      
+      if (!parsed.features) return;
+      
+      let featureIndex = 0;
+      let braceDepth = 0;
+      let inFeature = false;
+      let featureStartLine = -1;
+      let currentFeatureKey = null;
+      
+      for (let i = 0; i < this.lines.length; i++) {
+        const line = this.lines[i];
+        
+        if (!inFeature && /"type"\s*:\s*"Feature"/.test(line)) {
+          // Find opening brace
+          let startLine = i;
+          for (let j = i; j >= 0; j--) {
+            const trimmed = this.lines[j].trim();
+            if (trimmed === '{' || trimmed === '{,') {
+              startLine = j;
+              break;
+            }
+          }
+          featureStartLine = startLine;
+          inFeature = true;
+          braceDepth = 1;
+          
+          // Count braces from start to current line
+          for (let k = startLine; k <= i; k++) {
+            const counts = this._countBrackets(this.lines[k], '{');
+            if (k === startLine) {
+              braceDepth += (counts.open - 1) - counts.close;
+            } else {
+              braceDepth += counts.open - counts.close;
+            }
+          }
+          
+          if (featureIndex < parsed.features.length) {
+            currentFeatureKey = this._getFeatureKey(parsed.features[featureIndex]);
+          }
+        } else if (inFeature) {
+          const counts = this._countBrackets(line, '{');
+          braceDepth += counts.open - counts.close;
+          
+          if (braceDepth <= 0) {
+            if (currentFeatureKey) {
+              this.featureRanges.set(currentFeatureKey, {
+                startLine: featureStartLine,
+                endLine: i,
+                featureIndex
+              });
+            }
+            featureIndex++;
+            inFeature = false;
+            currentFeatureKey = null;
           }
-        } catch (e) {
-          // Invalid JSON, keep as-is
         }
       }
-
-      this.updateHighlight();
-      this.updatePlaceholderVisibility();
-
-      // Auto-collapse coordinates nodes after value is set
-      if (textarea.value) {
-        requestAnimationFrame(() => {
-          this.applyAutoCollapsed();
-        });
-      }
-
-      // Emit change/error event for programmatic value changes
-      this.emitChange();
-    }
-  }
-
-  updatePrefixSuffix() {
-    const prefixEl = this.shadowRoot.getElementById('editorPrefix');
-    const suffixEl = this.shadowRoot.getElementById('editorSuffix');
-
-    // Always show prefix/suffix (always in FeatureCollection mode)
-    if (prefixEl) {
-      prefixEl.textContent = this.prefix;
-    }
-
-    if (suffixEl) {
-      suffixEl.textContent = this.suffix;
+    } catch (e) {
+      // Invalid JSON
     }
   }
 
-  updateHighlight() {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    const highlightLayer = this.shadowRoot.getElementById('highlightLayer');
-
-    if (!textarea || !highlightLayer) return;
-
-    const text = textarea.value;
-
-    // Update feature ranges for visibility tracking
-    this.updateFeatureRanges();
-
-    // Get hidden line ranges
-    const hiddenRanges = this.getHiddenLineRanges();
-
-    // Parse and highlight
-    const { highlighted, colors, booleans, toggles } = this.highlightJSON(text, hiddenRanges);
-
-    highlightLayer.innerHTML = highlighted;
-    this.colorPositions = colors;
-    this.booleanPositions = booleans;
-    this.nodeTogglePositions = toggles;
-
-    // Update gutter with color indicators
-    this.updateGutter();
-  }
-
-  highlightJSON(text, hiddenRanges = []) {
-    if (!text.trim()) {
-      return { highlighted: '', colors: [], booleans: [], toggles: [] };
-    }
-
-    const lines = text.split('\n');
-    const colors = [];
-    const booleans = [];
-    const toggles = [];
-    let highlightedLines = [];
-
-    // Build context map for validation
-    const contextMap = this.buildContextMap(text);
-
-    // Helper to check if a line is in a hidden range
-    const isLineHidden = (lineIndex) => {
-      return hiddenRanges.some(range => lineIndex >= range.startLine && lineIndex <= range.endLine);
-    };
-
-    lines.forEach((line, lineIndex) => {
-      // Detect any hex color (6 digits) in string values
-      const R = GeoJsonEditor.REGEX;
-      R.colorInLine.lastIndex = 0; // Reset for global regex
+  /**
+   * Compute metadata for each line (colors, booleans, collapse buttons, etc.)
+   */
+  computeLineMetadata() {
+    this.lineMetadata.clear();
+    
+    const collapsibleRanges = this._findCollapsibleRanges();
+    
+    for (let i = 0; i < this.lines.length; i++) {
+      const line = this.lines[i];
+      const meta = {
+        colors: [],
+        booleans: [],
+        collapseButton: null,
+        visibilityButton: null,
+        isHidden: false,
+        isCollapsed: false,
+        featureKey: null
+      };
+      
+      // Detect colors
+      const colorRegex = /"([\w-]+)"\s*:\s*"(#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}))"/g;
       let colorMatch;
-      while ((colorMatch = R.colorInLine.exec(line)) !== null) {
-        colors.push({
-          line: lineIndex,
-          color: colorMatch[2],  // The hex color
-          attributeName: colorMatch[1]  // The attribute name
-        });
+      while ((colorMatch = colorRegex.exec(line)) !== null) {
+        meta.colors.push({ attributeName: colorMatch[1], color: colorMatch[2] });
       }
-
-      // Detect boolean values in properties
-      R.booleanInLine.lastIndex = 0; // Reset for global regex
-      let booleanMatch;
-      while ((booleanMatch = R.booleanInLine.exec(line)) !== null) {
-        booleans.push({
-          line: lineIndex,
-          value: booleanMatch[2] === 'true',  // The boolean value
-          attributeName: booleanMatch[1]  // The attribute name
-        });
+      
+      // 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 collapsible nodes (all nodes are collapsible)
-      const nodeMatch = line.match(R.collapsibleNode);
-      if (nodeMatch) {
-        const nodeKey = nodeMatch[2];
-
-        // Check if this is a collapsed marker first
-        const isCollapsed = line.includes('{...}') || line.includes('[...]');
-
-        if (isCollapsed) {
-          // It's collapsed, always show button
-          toggles.push({
-            line: lineIndex,
-            nodeKey,
-            isCollapsed: true
-          });
-        } else {
-          // Not collapsed - only add toggle button if it doesn't close on same line
-          if (!this.bracketClosesOnSameLine(line, nodeMatch[3])) {
-            toggles.push({
-              line: lineIndex,
-              nodeKey,
-              isCollapsed: false
-            });
-          }
-        }
+      
+      // Check if line starts a collapsible node
+      const collapsible = collapsibleRanges.find(r => r.startLine === i);
+      if (collapsible) {
+        meta.collapseButton = {
+          nodeKey: collapsible.nodeKey,
+          nodeId: collapsible.nodeId,
+          isCollapsed: this.collapsedNodes.has(collapsible.nodeId)
+        };
       }
-
-      // Highlight the line with context
-      const context = contextMap.get(lineIndex);
-      let highlightedLine = this.highlightSyntax(line, context);
-
-      // Wrap hidden lines with .line-hidden class
-      if (isLineHidden(lineIndex)) {
-        highlightedLine = `<span class="line-hidden">${highlightedLine}</span>`;
+      
+      // Check if line is inside a collapsed node (exclude closing bracket line)
+      const insideCollapsed = collapsibleRanges.find(r => 
+        this.collapsedNodes.has(r.nodeId) && i > r.startLine && i < r.endLine
+      );
+      if (insideCollapsed) {
+        meta.isCollapsed = true;
       }
-
-      highlightedLines.push(highlightedLine);
-    });
-
-    return {
-      highlighted: highlightedLines.join('\n'),
-      colors,
-      booleans,
-      toggles
-    };
-  }
-
-  // GeoJSON type constants (consolidated)
-  static GEOJSON = {
-    GEOMETRY_TYPES: ['Point', 'MultiPoint', 'LineString', 'MultiLineString', 'Polygon', 'MultiPolygon'],
-  };
-
-  // Valid keys per context (null = any key is valid)
-  static VALID_KEYS_BY_CONTEXT = {
-    Feature: ['type', 'geometry', 'properties', 'id'],
-    properties: null,  // Any key valid in properties
-    geometry: ['type', 'coordinates'],  // Generic geometry context
-  };
-
-  // Keys that change context for their value
-  static CONTEXT_CHANGING_KEYS = {
-    geometry: 'geometry',
-    properties: 'properties',
-    features: 'Feature',      // Array of Features
-  };
-
-  // Build context map for each line by analyzing JSON structure
-  buildContextMap(text) {
-    const lines = text.split('\n');
-    const contextMap = new Map();  // line index -> context
-    const contextStack = [];       // Stack of {context, isArray}
-    let pendingContext = null;     // Context for next object/array
-
-    // Root context is always 'Feature' (always in FeatureCollection mode)
-    const rootContext = 'Feature';
-
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-
-      // Record context at START of line (for key validation)
-      const lineContext = contextStack.length > 0
-        ? contextStack[contextStack.length - 1]?.context
-        : rootContext;
-      contextMap.set(i, lineContext);
-
-      // Process each character to track brackets for subsequent lines
-      // Track string state to ignore brackets inside strings
-      let inString = false;
-      let escape = false;
-
-      for (let j = 0; j < line.length; j++) {
-        const char = line[j];
-
-        // Handle escape sequences
-        if (escape) {
-          escape = false;
-          continue;
-        }
-        if (char === '\\' && inString) {
-          escape = true;
-          continue;
-        }
-
-        // Track string boundaries
-        if (char === '"') {
-          if (!inString) {
-            // Entering string - check for special patterns before toggling
-            const keyMatch = line.substring(j).match(/^"([^"\\]*(?:\\.[^"\\]*)*)"\s*:/);
-            if (keyMatch) {
-              const keyName = keyMatch[1];
-              if (GeoJsonEditor.CONTEXT_CHANGING_KEYS[keyName]) {
-                pendingContext = GeoJsonEditor.CONTEXT_CHANGING_KEYS[keyName];
-              }
-              j += keyMatch[0].length - 1;  // Skip past the key
-              continue;
-            }
-
-            // Check for type value to refine context: "type": "Point"
-            if (contextStack.length > 0) {
-              const typeMatch = line.substring(0, j).match(/"type"\s*:\s*$/);
-              if (typeMatch) {
-                const valueMatch = line.substring(j).match(/^"([^"\\]*(?:\\.[^"\\]*)*)"/);
-                const validTypes = ['Feature', ...GeoJsonEditor.GEOJSON.GEOMETRY_TYPES];
-                if (valueMatch && validTypes.includes(valueMatch[1])) {
-                  const currentCtx = contextStack[contextStack.length - 1];
-                  if (currentCtx) {
-                    currentCtx.context = valueMatch[1];
-                  }
-                }
-                // Skip past this string value
-                j += valueMatch ? valueMatch[0].length - 1 : 0;
-                continue;
-              }
-            }
+      
+      // Check if line belongs to a hidden feature
+      for (const [featureKey, range] of this.featureRanges) {
+        if (i >= range.startLine && i <= range.endLine) {
+          meta.featureKey = featureKey;
+          if (this.hiddenFeatures.has(featureKey)) {
+            meta.isHidden = true;
           }
-          inString = !inString;
-          continue;
-        }
-
-        // Skip everything inside strings (brackets, etc.)
-        if (inString) continue;
-
-        // Opening bracket - push context
-        if (char === '{' || char === '[') {
-          let newContext;
-          if (pendingContext) {
-            newContext = pendingContext;
-            pendingContext = null;
-          } else if (contextStack.length === 0) {
-            newContext = rootContext;
-          } else {
-            const parent = contextStack[contextStack.length - 1];
-            if (parent && parent.isArray) {
-              newContext = parent.context;
-            } else {
-              newContext = null;
-            }
-          }
-          contextStack.push({ context: newContext, isArray: char === '[' });
-        }
-
-        // Closing bracket - pop context
-        if (char === '}' || char === ']') {
-          if (contextStack.length > 0) {
-            contextStack.pop();
+          // Add visibility button only on feature start line
+          if (i === range.startLine) {
+            meta.visibilityButton = {
+              featureKey,
+              isHidden: this.hiddenFeatures.has(featureKey)
+            };
           }
+          break;
         }
       }
+      
+      this.lineMetadata.set(i, meta);
     }
-
-    return contextMap;
   }
 
-  // All known GeoJSON structural keys (always valid in GeoJSON)
-  // GeoJSON structural keys that are always valid (not user properties)
-  static GEOJSON_STRUCTURAL_KEYS = ['type', 'geometry', 'properties', 'coordinates', 'id'];
-
-  highlightSyntax(text, context) {
-    if (!text.trim()) return '';
-
-    // Get valid keys for current context
-    const validKeys = context ? GeoJsonEditor.VALID_KEYS_BY_CONTEXT[context] : null;
+  /**
+   * Compute which lines are visible (not inside collapsed nodes)
+   */
+  computeVisibleLines() {
+    this.visibleLines = [];
+    
+    for (let i = 0; i < this.lines.length; i++) {
+      const meta = this.lineMetadata.get(i);
+      if (!meta || !meta.isCollapsed) {
+        this.visibleLines.push({
+          index: i,
+          content: this.lines[i],
+          meta
+        });
+      }
+    }
+    
+    // Reset render cache to force re-render
+    this._lastStartIndex = -1;
+    this._lastEndIndex = -1;
+    this._lastTotalLines = -1;
+  }
 
-    // Helper to check if a key is valid in current context
-    const isKeyValid = (key) => {
-      // GeoJSON structural keys are always valid
-      if (GeoJsonEditor.GEOJSON_STRUCTURAL_KEYS.includes(key)) return true;
-      // No context or null validKeys means all keys are valid
-      if (!context || validKeys === null || validKeys === undefined) return true;
-      return validKeys.includes(key);
-    };
+  // ========== Rendering ==========
+  
+  scheduleRender() {
+    if (this.renderTimer) return;
+    this.renderTimer = requestAnimationFrame(() => {
+      this.renderTimer = null;
+      this.renderViewport();
+    });
+  }
 
-    // Helper to check if a type value is valid in current context
-    const isTypeValid = (typeValue) => {
-      // Unknown context - don't validate
-      if (!context) return true;
-      if (context === 'properties') return true;  // Any type in properties
-      if (context === 'geometry' || GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.includes(context)) {
-        return GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.includes(typeValue);
+  renderViewport() {
+    const viewport = this.shadowRoot.getElementById('viewport');
+    const linesContainer = this.shadowRoot.getElementById('linesContainer');
+    const scrollContent = this.shadowRoot.getElementById('scrollContent');
+    const gutterContent = this.shadowRoot.getElementById('gutterContent');
+    
+    if (!viewport || !linesContainer) return;
+    
+    this.viewportHeight = viewport.clientHeight;
+    
+    const totalLines = this.visibleLines.length;
+    const totalHeight = totalLines * this.lineHeight;
+    
+    // Set total scrollable height (only once or when content changes)
+    if (scrollContent) {
+      scrollContent.style.height = `${totalHeight}px`;
+    }
+    
+    // Calculate visible range based on scroll position
+    const scrollTop = viewport.scrollTop;
+    const firstVisible = Math.floor(scrollTop / this.lineHeight);
+    const visibleCount = Math.ceil(this.viewportHeight / this.lineHeight);
+    
+    const startIndex = Math.max(0, firstVisible - this.bufferLines);
+    const endIndex = Math.min(totalLines, firstVisible + visibleCount + this.bufferLines);
+    
+    // Skip render if visible range hasn't changed
+    if (this._lastStartIndex === startIndex && this._lastEndIndex === endIndex && this._lastTotalLines === totalLines) {
+      return;
+    }
+    this._lastStartIndex = startIndex;
+    this._lastEndIndex = endIndex;
+    this._lastTotalLines = totalLines;
+    
+    // Position linesContainer using transform (no layout recalc)
+    const offsetY = startIndex * this.lineHeight;
+    linesContainer.style.transform = `translateY(${offsetY}px)`;
+    
+    // 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');
+    
+    // Render visible lines
+    const fragment = document.createDocumentFragment();
+    
+    for (let i = startIndex; i < endIndex; i++) {
+      const lineData = this.visibleLines[i];
+      if (!lineData) continue;
+      
+      const lineEl = document.createElement('div');
+      lineEl.className = 'line';
+      lineEl.dataset.lineIndex = lineData.index;
+      
+      // Add visibility button on line (uses ::before pseudo-element)
+      if (lineData.meta?.visibilityButton) {
+        lineEl.classList.add('has-visibility');
+        lineEl.dataset.featureKey = lineData.meta.visibilityButton.featureKey;
+        if (lineData.meta.visibilityButton.isHidden) {
+          lineEl.classList.add('feature-hidden');
+        }
       }
-      // In Feature context: accept Feature or geometry types
-      if (context === 'Feature') {
-        return typeValue === 'Feature' || GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.includes(typeValue);
+      
+      // Add hidden class if feature is hidden
+      if (lineData.meta?.isHidden) {
+        lineEl.classList.add('line-hidden');
       }
-      return true;  // Unknown context - accept any type
-    };
-
-    const R = GeoJsonEditor.REGEX;
-
-    return text
-      // Escape HTML first
-      .replace(R.ampersand, '&amp;')
-      .replace(R.lessThan, '&lt;')
-      .replace(R.greaterThan, '&gt;')
-      // All JSON keys - validate against context
-      .replace(R.jsonKey, (_, key) => {
-        // Inside properties - all keys are regular user keys
-        if (context === 'properties') {
-          return `<span class="json-key">"${key}"</span>:`;
-        }
-        // GeoJSON structural keys - highlighted as geojson-key
-        if (GeoJsonEditor.GEOJSON_STRUCTURAL_KEYS.includes(key)) {
-          return `<span class="geojson-key">"${key}"</span>:`;
-        }
-        // Regular key - validate against context
-        if (isKeyValid(key)) {
-          return `<span class="json-key">"${key}"</span>:`;
-        } else {
-          return `<span class="json-key-invalid">"${key}"</span>:`;
-        }
-      })
-      // GeoJSON "type" values - validate based on context
-      .replace(R.typeValue, (_, typeValue) => {
-        if (isTypeValid(typeValue)) {
-          return `<span class="geojson-key">"type"</span>: <span class="geojson-type">"${typeValue}"</span>`;
-        } else {
-          return `<span class="geojson-key">"type"</span>: <span class="geojson-type-invalid">"${typeValue}"</span>`;
-        }
-      })
-      // Generic string values
-      .replace(R.stringValue, (match, value) => {
-        // Skip if already highlighted (has span)
-        if (match.includes('<span')) return match;
-        return `: <span class="json-string">"${value}"</span>`;
-      })
-      .replace(R.numberAfterColon, ': <span class="json-number">$1</span>')
-      .replace(R.boolean, ': <span class="json-boolean">$1</span>')
-      .replace(R.nullValue, ': <span class="json-null">$1</span>')
-      .replace(R.allNumbers, '<span class="json-number">$1</span>')
-      .replace(R.punctuation, '<span class="json-punctuation">$1</span>');
-  }
-
-  toggleCollapse(nodeKey, line) {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    const lines = textarea.value.split('\n');
-    const currentLine = lines[line];
-
-    // Check if line has collapse marker
-    const hasMarker = currentLine.includes('{...}') || currentLine.includes('[...]');
-
-    if (hasMarker) {
-      // Expand: find the correct collapsed data
-      const currentIndent = currentLine.match(/^(\s*)/)[1].length;
-      const found = this._findCollapsedData(line, nodeKey, currentIndent);
-
-      if (!found) {
-        return;
+      
+      // 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);
+      
+      // Add selection highlight if line is in selection
+      if (isFocused && this._hasSelection()) {
+        html = this._addSelectionHighlight(html, lineData.index, lineData.content);
       }
+      
+      // Add cursor if this is the cursor line and editor is focused
+      if (isFocused && lineData.index === this.cursorLine) {
+        html += this._insertCursor(this.cursorColumn);
+      }
+      
+      lineEl.innerHTML = html;
+      
+      fragment.appendChild(lineEl);
+    }
+    
+    linesContainer.innerHTML = '';
+    linesContainer.appendChild(fragment);
+    
+    // Render gutter with same range
+    this.renderGutter(startIndex, endIndex);
+  }
+  
+  /**
+   * Insert cursor element at the specified column position
+   * Uses absolute positioning to avoid affecting text layout
+   */
+  _insertCursor(column) {
+    // Calculate cursor position in pixels using character width
+    const charWidth = this._getCharWidth();
+    const left = column * charWidth;
+    return `<span class="cursor" style="left: ${left}px"></span>`;
+  }
 
-      const { key: foundKey, data: foundData } = found;
-      const { originalLine, content } = foundData;
-
-      // Restore original line and content
-      lines[line] = originalLine;
-      lines.splice(line + 1, 0, ...content);
-
-      // Remove from storage
-      this.collapsedData.delete(foundKey);
+  /**
+   * Add selection highlight to a line
+   */
+  _addSelectionHighlight(html, lineIndex, content) {
+    const { start, end } = this._normalizeSelection();
+    if (!start || !end) return html;
+    
+    // Check if this line is in the selection
+    if (lineIndex < start.line || lineIndex > end.line) return html;
+    
+    const charWidth = this._getCharWidth();
+    let selStart, selEnd;
+    
+    if (lineIndex === start.line && lineIndex === end.line) {
+      // Selection is within this line
+      selStart = start.column;
+      selEnd = end.column;
+    } else if (lineIndex === start.line) {
+      // Selection starts on this line
+      selStart = start.column;
+      selEnd = content.length;
+    } else if (lineIndex === end.line) {
+      // Selection ends on this line
+      selStart = 0;
+      selEnd = end.column;
     } else {
-      // Collapse: read and store content
-      const match = currentLine.match(/^(\s*)"([^"]+)"\s*:\s*([{\[])/);
-      if (!match) return;
-
-      const indent = match[1];
-      const openBracket = match[3];
-
-      // Use common collapse helper
-      if (this._performCollapse(lines, line, nodeKey, indent, openBracket) === 0) return;
+      // Entire line is selected
+      selStart = 0;
+      selEnd = content.length;
     }
-
-    // Update textarea
-    textarea.value = lines.join('\n');
-    this.updateHighlight();
+    
+    const left = selStart * charWidth;
+    const width = (selEnd - selStart) * charWidth;
+    
+    // Add selection overlay
+    const selectionSpan = `<span class="selection" style="left: ${left}px; width: ${width}px"></span>`;
+    return selectionSpan + html;
   }
-
-  applyAutoCollapsed() {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    if (!textarea || !textarea.value) return;
-
-    const lines = textarea.value.split('\n');
-
-    // Iterate backwards to avoid index issues when collapsing
-    for (let i = lines.length - 1; i >= 0; i--) {
-      const line = lines[i];
-      const match = line.match(/^(\s*)"(\w+)"\s*:\s*([{\[])/);
-
-      if (match) {
-        const nodeKey = match[2];
-
-        // Check if this node should be auto-collapsed (coordinates only)
-        if (nodeKey === 'coordinates') {
-          const indent = match[1];
-          const openBracket = match[3];
-
-          // Use common collapse helper
-          this._performCollapse(lines, i, nodeKey, indent, openBracket);
-        }
-      }
+  
+  /**
+   * Get character width for monospace font
+   */
+  _getCharWidth() {
+    if (!this._charWidth) {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      ctx.font = '13px monospace';
+      this._charWidth = ctx.measureText('M').width;
     }
-
-    // Update textarea
-    textarea.value = lines.join('\n');
-    this.updateHighlight();
+    return this._charWidth;
   }
 
-
-  updateGutter() {
+  renderGutter(startIndex, endIndex) {
     const gutterContent = this.shadowRoot.getElementById('gutterContent');
-    const textarea = this.shadowRoot.getElementById('textarea');
-
-    if (!textarea) return;
-
-    // Use cached computed styles (computed once, reused)
-    if (this._cachedLineHeight === null) {
-      const styles = getComputedStyle(textarea);
-      this._cachedLineHeight = parseFloat(styles.lineHeight);
-      this._cachedPaddingTop = parseFloat(styles.paddingTop);
-    }
-    const lineHeight = this._cachedLineHeight;
-    const paddingTop = this._cachedPaddingTop;
-
-    // Clear gutter
-    gutterContent.textContent = '';
-
-    // Create a map of line -> elements (color, boolean, collapse button, visibility button)
-    const lineElements = new Map();
-
-    // Helper to ensure line entry exists
-    const ensureLine = (line) => {
-      if (!lineElements.has(line)) {
-        lineElements.set(line, { colors: [], booleans: [], buttons: [], visibilityButtons: [] });
-      }
-      return lineElements.get(line);
-    };
-
-    // Add color indicators
-    this.colorPositions.forEach(({ line, color, attributeName }) => {
-      ensureLine(line).colors.push({ color, attributeName });
-    });
-
-    // Add boolean checkboxes
-    this.booleanPositions.forEach(({ line, value, attributeName }) => {
-      ensureLine(line).booleans.push({ value, attributeName });
-    });
-
-    // Add collapse buttons
-    this.nodeTogglePositions.forEach(({ line, nodeKey, isCollapsed }) => {
-      ensureLine(line).buttons.push({ nodeKey, isCollapsed });
-    });
-
-    // Add visibility buttons for Features (on the opening brace line)
-    for (const [featureKey, range] of this.featureRanges) {
-      const isHidden = this.hiddenFeatures.has(featureKey);
-      ensureLine(range.startLine).visibilityButtons.push({ featureKey, isHidden });
+    const gutterScrollContent = this.shadowRoot.getElementById('gutterScrollContent');
+    if (!gutterContent) return;
+    
+    // Set total height for gutter scroll
+    const totalHeight = this.visibleLines.length * this.lineHeight;
+    if (gutterScrollContent) {
+      gutterScrollContent.style.height = `${totalHeight}px`;
     }
-
-    // Create gutter lines with DocumentFragment (single DOM update)
+    
+    // Position gutter content using transform
+    const offsetY = startIndex * this.lineHeight;
+    gutterContent.style.transform = `translateY(${offsetY}px)`;
+    
     const fragment = document.createDocumentFragment();
-
-    lineElements.forEach((elements, line) => {
+    
+    for (let i = startIndex; i < endIndex; i++) {
+      const lineData = this.visibleLines[i];
+      if (!lineData) continue;
+      
       const gutterLine = document.createElement('div');
       gutterLine.className = 'gutter-line';
-      gutterLine.style.top = `${paddingTop + line * lineHeight}px`;
-
-      // Add visibility buttons first (leftmost)
-      elements.visibilityButtons.forEach(({ featureKey, isHidden }) => {
-        const button = document.createElement('button');
-        button.className = 'visibility-button' + (isHidden ? ' hidden' : '');
-        button.textContent = GeoJsonEditor.ICONS.visibility;
-        button.dataset.featureKey = featureKey;
-        button.title = isHidden ? 'Show feature in events' : 'Hide feature from events';
-        gutterLine.appendChild(button);
-      });
-
-      // Add color indicators
-      elements.colors.forEach(({ color, attributeName }) => {
-        const indicator = document.createElement('div');
-        indicator.className = 'color-indicator';
-        indicator.style.backgroundColor = color;
-        indicator.dataset.line = line;
-        indicator.dataset.color = color;
-        indicator.dataset.attributeName = attributeName;
-        indicator.title = `${attributeName}: ${color}`;
-        gutterLine.appendChild(indicator);
-      });
-
-      // Add boolean checkboxes
-      elements.booleans.forEach(({ value, attributeName }) => {
-        const checkbox = document.createElement('input');
-        checkbox.type = 'checkbox';
-        checkbox.className = 'boolean-checkbox';
-        checkbox.checked = value;
-        checkbox.dataset.line = line;
-        checkbox.dataset.attributeName = attributeName;
-        checkbox.title = `${attributeName}: ${value}`;
-        gutterLine.appendChild(checkbox);
-      });
-
-      // Add collapse buttons
-      elements.buttons.forEach(({ nodeKey, isCollapsed }) => {
-        const button = document.createElement('div');
-        button.className = isCollapsed ? 'collapse-button collapsed' : 'collapse-button';
-        button.textContent = isCollapsed ? GeoJsonEditor.ICONS.collapsed : GeoJsonEditor.ICONS.expanded;
-        button.dataset.line = line;
-        button.dataset.nodeKey = nodeKey;
-        button.title = isCollapsed ? 'Expand' : 'Collapse';
-        gutterLine.appendChild(button);
-      });
-
-      fragment.appendChild(gutterLine);
-    });
-
-    // Single DOM insertion
-    gutterContent.appendChild(fragment);
-  }
-
-  showColorPicker(indicator, line, currentColor, attributeName) {
-    // Remove existing picker and clean up its listener
-    const existing = document.querySelector('.geojson-color-picker-input');
-    if (existing) {
-      // Clean up the stored listener before removing
-      if (existing._closeListener) {
-        document.removeEventListener('click', existing._closeListener, true);
+      
+      const meta = lineData.meta;
+      
+      // Line number first
+      const lineNum = document.createElement('span');
+      lineNum.className = 'line-number';
+      lineNum.textContent = lineData.index + 1;
+      gutterLine.appendChild(lineNum);
+      
+      // Collapse column (always present for alignment)
+      const collapseCol = document.createElement('div');
+      collapseCol.className = 'collapse-column';
+      if (meta?.collapseButton) {
+        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.nodeId = meta.collapseButton.nodeId;
+        btn.title = meta.collapseButton.isCollapsed ? 'Expand' : 'Collapse';
+        collapseCol.appendChild(btn);
       }
-      existing.remove();
+      gutterLine.appendChild(collapseCol);
+      
+      fragment.appendChild(gutterLine);
     }
-
-    // Create small color input positioned at the indicator
-    const colorInput = document.createElement('input');
-    colorInput.type = 'color';
-    colorInput.value = currentColor;
-    colorInput.className = 'geojson-color-picker-input';
-
-    // Get indicator position in viewport
-    const rect = indicator.getBoundingClientRect();
-
-    colorInput.style.position = 'fixed';
-    colorInput.style.left = `${rect.left}px`;
-    colorInput.style.top = `${rect.top}px`;
-    colorInput.style.width = '12px';
-    colorInput.style.height = '12px';
-    colorInput.style.opacity = '0.01';
-    colorInput.style.border = 'none';
-    colorInput.style.padding = '0';
-    colorInput.style.zIndex = '9999';
-
-    colorInput.addEventListener('input', (e) => {
-      // User is actively changing the color - update in real-time
-      this.updateColorValue(line, e.target.value, attributeName);
-    });
-
-    colorInput.addEventListener('change', (e) => {
-      // Picker closed with validation
-      this.updateColorValue(line, e.target.value, attributeName);
-    });
-
-    // Close picker when clicking anywhere else
-    const closeOnClickOutside = (e) => {
-      if (e.target !== colorInput && !colorInput.contains(e.target)) {
-        document.removeEventListener('click', closeOnClickOutside, true);
-        colorInput.remove();
-      }
-    };
-
-    // Store the listener reference on the element for cleanup
-    colorInput._closeListener = closeOnClickOutside;
-
-    // Add to document body with fixed positioning
-    document.body.appendChild(colorInput);
-
-    // Add click listener after a short delay to avoid immediate close
-    setTimeout(() => {
-      document.addEventListener('click', closeOnClickOutside, true);
-    }, 100);
-
-    // Open the picker and focus it
-    colorInput.focus();
-    colorInput.click();
-  }
-
-  updateColorValue(line, newColor, attributeName) {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    const lines = textarea.value.split('\n');
-
-    // Replace color value on the specified line for the specific attribute (supports #rgb and #rrggbb)
-    const regex = new RegExp(`"${attributeName}"\\s*:\\s*"#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})"`);
-    lines[line] = lines[line].replace(regex, `"${attributeName}": "${newColor}"`);
-
-    textarea.value = lines.join('\n');
-    this.updateHighlight();
-    this.emitChange();
-  }
-
-  updateBooleanValue(line, newValue, attributeName) {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    const lines = textarea.value.split('\n');
-
-    // Replace boolean value on the specified line for the specific attribute
-    const regex = new RegExp(`"${attributeName}"\\s*:\\s*(true|false)`);
-    lines[line] = lines[line].replace(regex, `"${attributeName}": ${newValue}`);
-
-    textarea.value = lines.join('\n');
-    this.updateHighlight();
-    this.emitChange();
+    
+    gutterContent.innerHTML = '';
+    gutterContent.appendChild(fragment);
   }
 
-  handleKeydownInCollapsedArea(e) {
-    // Allow navigation keys
-    const navigationKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', 'Tab'];
-    if (navigationKeys.includes(e.key)) return;
-
-    // Allow copy/cut/paste (handled separately)
-    if (e.ctrlKey || e.metaKey) return;
-
-    const textarea = this.shadowRoot.getElementById('textarea');
-    const cursorPos = textarea.selectionStart;
-    const textBeforeCursor = textarea.value.substring(0, cursorPos);
-    const currentLineNum = textBeforeCursor.split('\n').length - 1;
-    const lines = textarea.value.split('\n');
-    const currentLine = lines[currentLineNum];
-
-    // Check if current line is collapsed (contains {...} or [...])
-    if (currentLine && (currentLine.includes('{...}') || currentLine.includes('[...]'))) {
-      e.preventDefault();
+  syncGutterScroll() {
+    const gutterScroll = this.shadowRoot.getElementById('gutterScroll');
+    const viewport = this.shadowRoot.getElementById('viewport');
+    if (gutterScroll && viewport) {
+      // Sync gutter scroll position with viewport
+      gutterScroll.scrollTop = viewport.scrollTop;
     }
   }
 
-  handleCopyWithCollapsedContent(e) {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-
-    if (start === end) return; // No selection
-
-    const selectedText = textarea.value.substring(start, end);
-
-    // Check if selection contains collapsed content
-    if (!selectedText.includes('{...}') && !selectedText.includes('[...]')) {
-      return; // No collapsed content, use default copy behavior
+  // ========== Input Handling ==========
+  
+  handleInput() {
+    const textarea = this.shadowRoot.getElementById('hiddenTextarea');
+    const inputValue = textarea.value;
+    
+    if (!inputValue) return;
+    
+    // Block input in hidden collapsed zones
+    if (this._getCollapsedRangeForLine(this.cursorLine)) {
+      textarea.value = '';
+      return;
     }
-
-    let expandedText;
-
-    // If selecting all content, use expandAllCollapsed directly (more reliable)
-    if (start === 0 && end === textarea.value.length) {
-      expandedText = this.expandAllCollapsed(selectedText);
-    } else {
-      // For partial selection, expand using line-by-line matching
-      expandedText = this.expandCollapsedMarkersInText(selectedText, start);
+    
+    // On closing line, only allow after bracket
+    const onClosingLine = this._getCollapsedClosingLine(this.cursorLine);
+    if (onClosingLine) {
+      const line = this.lines[this.cursorLine];
+      const bracketPos = this._getClosingBracketPos(line);
+      if (this.cursorColumn <= bracketPos) {
+        textarea.value = '';
+        return;
+      }
     }
-
-    // Put expanded text in clipboard
-    e.preventDefault();
-    e.clipboardData.setData('text/plain', expandedText);
-  }
-
-  expandCollapsedMarkersInText(text, startPos) {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    const beforeSelection = textarea.value.substring(0, startPos);
-    const startLineNum = beforeSelection.split('\n').length - 1;
-    const R = GeoJsonEditor.REGEX;
-
-    const lines = text.split('\n');
-    const expandedLines = [];
-
-    lines.forEach((line, relativeLineNum) => {
-      const absoluteLineNum = startLineNum + relativeLineNum;
-
-      // Check if this line has a collapsed marker
-      if (line.includes('{...}') || line.includes('[...]')) {
-        const match = line.match(R.collapsedMarker);
-        if (match) {
-          const nodeKey = match[2];
-          const currentIndent = match[1].length;
-
-          // Try to find collapsed data using helper
-          const found = this._findCollapsedData(absoluteLineNum, nodeKey, currentIndent);
-          if (found) {
-            expandedLines.push(found.data.originalLine);
-            expandedLines.push(...found.data.content);
-            return;
-          }
-
-          // Fallback: search by nodeKey only (line numbers may have shifted)
-          for (const [, collapsed] of this.collapsedData.entries()) {
-            if (collapsed.nodeKey === nodeKey) {
-              expandedLines.push(collapsed.originalLine);
-              expandedLines.push(...collapsed.content);
-              return;
-            }
-          }
-        }
-
-        // Line not found in collapsed data, keep as-is
-        expandedLines.push(line);
-      } else {
-        expandedLines.push(line);
+    
+    // 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(/[{\[]/);
+      if (this.cursorColumn > bracketPos) {
+        textarea.value = '';
+        return;
       }
-    });
-
-    return expandedLines.join('\n');
-  }
-
-  handleCutWithCollapsedContent(e) {
-    // First copy with expanded content
-    this.handleCopyWithCollapsedContent(e);
-
-    // Then delete the selection normally
-    const textarea = this.shadowRoot.getElementById('textarea');
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-
-    if (start !== end) {
-      const value = textarea.value;
-      textarea.value = value.substring(0, start) + value.substring(end);
-      textarea.selectionStart = textarea.selectionEnd = start;
-      this.updateHighlight();
-      this.updatePlaceholderVisibility();
-      this.emitChange();
     }
-  }
-
-  emitChange() {
-    const textarea = this.shadowRoot.getElementById('textarea');
-
-    // Expand ALL collapsed nodes to get full content
-    const editorContent = this.expandAllCollapsed(textarea.value);
-
-    // Build complete value with prefix/suffix (fixed FeatureCollection wrapper)
-    const fullValue = this.prefix + editorContent + this.suffix;
-
-    // Try to parse
-    try {
-      let parsed = JSON.parse(fullValue);
-
-      // Filter out hidden features before emitting
-      parsed = this.filterHiddenFeatures(parsed);
-
-      // Validate GeoJSON types (validate only features, not the wrapper)
-      let validationErrors = [];
-      parsed.features.forEach((feature, index) => {
-        validationErrors.push(...this.validateGeoJSON(feature, `features[${index}]`, 'root'));
-      });
-
-      if (validationErrors.length > 0) {
-        // Emit error event for GeoJSON validation errors
-        this.dispatchEvent(new CustomEvent('error', {
-          detail: {
-            timestamp: new Date().toISOString(),
-            error: `GeoJSON validation: ${validationErrors.join('; ')}`,
-            errors: validationErrors,
-            content: editorContent
-          },
-          bubbles: true,
-          composed: true
-        }));
+    
+    // Insert 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;
+        this.cursorColumn += inputValue.length;
       } else {
-        // Emit change event with parsed GeoJSON directly
-        this.dispatchEvent(new CustomEvent('change', {
-          detail: parsed,
-          bubbles: true,
-          composed: true
-        }));
+        // Multi-line input
+        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]);
+        }
+        const lastLine = inputLines[inputLines.length - 1] + after;
+        this.lines.splice(this.cursorLine + inputLines.length - 1, 0, lastLine);
+        this.cursorLine += inputLines.length - 1;
+        this.cursorColumn = inputLines[inputLines.length - 1].length;
       }
-    } catch (e) {
-      // Emit error event for invalid JSON
-      this.dispatchEvent(new CustomEvent('error', {
-        detail: {
-          timestamp: new Date().toISOString(),
-          error: e.message,
-          content: editorContent  // Raw content for debugging
-        },
-        bubbles: true,
-        composed: true
-      }));
-    }
-  }
-
-  // Filter hidden features from parsed GeoJSON before emitting events
-  filterHiddenFeatures(parsed) {
-    if (!parsed || this.hiddenFeatures.size === 0) return parsed;
-
-    // parsed is always a FeatureCollection (from wrapper)
-    const visibleFeatures = parsed.features.filter((feature) => {
-      const key = this.getFeatureKey(feature);
-      return !this.hiddenFeatures.has(key);
-    });
-    return { ...parsed, features: visibleFeatures };
-  }
-
-  // ========== Feature Visibility Management ==========
-
-  // Generate a unique key for a Feature to track visibility state
-  getFeatureKey(feature) {
-    if (!feature || typeof feature !== 'object') return null;
-
-    // 1. Use GeoJSON id if present (most stable)
-    if (feature.id !== undefined) return `id:${feature.id}`;
-
-    // 2. Use properties.id if present
-    if (feature.properties?.id !== undefined) return `prop:${feature.properties.id}`;
-
-    // 3. Fallback: hash based on geometry type + ALL coordinates
-    const geomType = feature.geometry?.type || 'null';
-    const coords = JSON.stringify(feature.geometry?.coordinates || []);
-    return `hash:${geomType}:${this.simpleHash(coords)}`;
-  }
-
-  // Simple hash function for string
-  simpleHash(str) {
-    let hash = 0;
-    for (let i = 0; i < str.length; i++) {
-      const char = str.charCodeAt(i);
-      hash = ((hash << 5) - hash) + char;
-      hash = hash & hash; // Convert to 32bit integer
-    }
-    return hash.toString(36);
-  }
-
-  // Toggle feature visibility
-  toggleFeatureVisibility(featureKey) {
-    if (this.hiddenFeatures.has(featureKey)) {
-      this.hiddenFeatures.delete(featureKey);
     } else {
-      this.hiddenFeatures.add(featureKey);
+      // Append new lines
+      const inputLines = inputValue.split('\n');
+      this.lines.push(...inputLines);
+      this.cursorLine = this.lines.length - 1;
+      this.cursorColumn = this.lines[this.cursorLine].length;
     }
-    this.updateHighlight();
-    this.updateGutter();
-    this.emitChange();
-  }
-
-  // Parse JSON and extract feature ranges (line numbers for each Feature)
-  updateFeatureRanges() {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    if (!textarea) return;
-
-    const text = textarea.value;
-    this.featureRanges.clear();
-
-    try {
-      // Expand collapsed content for parsing (collapsed markers like [...] are not valid JSON)
-      const expandedText = this.expandAllCollapsed(text);
-
-      // Try to parse and find Features
-      const prefix = this.prefix;
-      const suffix = this.suffix;
-      const fullValue = prefix + expandedText + suffix;
-      const parsed = JSON.parse(fullValue);
-
-      // parsed is always a FeatureCollection (from wrapper)
-      const features = parsed.features;
-
-      // Now find each feature's line range in the text
-      const lines = text.split('\n');
-      let featureIndex = 0;
-      let braceDepth = 0;
-      let inFeature = false;
-      let featureStartLine = -1;
-      let currentFeatureKey = null;
-
-      for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-
-        // Detect start of a Feature object (not FeatureCollection)
-        // Use regex to match exact "Feature" value, not "FeatureCollection"
-        const isFeatureTypeLine = /"type"\s*:\s*"Feature"/.test(line);
-        if (!inFeature && isFeatureTypeLine) {
-          // Find the opening brace for this Feature
-          // Look backwards for a line that starts with just '{' (the Feature's opening brace)
-          // Not a line like '"geometry": {' which contains other content before the brace
-          let startLine = i;
-          for (let j = i; j >= 0; j--) {
-            const trimmed = lines[j].trim();
-            // Line is just '{' or '{' followed by nothing significant (opening brace only)
-            if (trimmed === '{' || trimmed === '{,') {
-              startLine = j;
-              break;
-            }
-            // Also handle case where Feature starts on same line: { "type": "Feature"
-            if (trimmed.startsWith('{') && !trimmed.includes(':')) {
-              startLine = j;
-              break;
-            }
+    
+    // Clear textarea
+    textarea.value = '';
+    
+    // Debounce formatting and update
+    clearTimeout(this.inputTimer);
+    this.inputTimer = setTimeout(() => {
+      this.formatAndUpdate();
+    }, 150);
+  }
+
+  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;
           }
-          featureStartLine = startLine;
-          inFeature = true;
-
-          // Start braceDepth at 1 since we're inside the Feature's opening brace
-          // Then count any additional braces from startLine to current line (ignoring strings)
-          braceDepth = 1;
-          for (let k = startLine; k <= i; k++) {
-            const scanLine = lines[k];
-            const counts = this._countBracketsOutsideStrings(scanLine, '{');
-            if (k === startLine) {
-              // Skip the first { we already counted
-              braceDepth += (counts.open - 1) - counts.close;
-            } else {
-              braceDepth += counts.open - counts.close;
-            }
+          // 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;
           }
-
-          // Get the feature key
-          if (featureIndex < features.length) {
-            currentFeatureKey = this.getFeatureKey(features[featureIndex]);
+          // 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;
+          }
+        }
+        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;
           }
-        } else if (inFeature) {
-          // Count braces (ignoring those in strings)
-          const counts = this._countBracketsOutsideStrings(line, '{');
-          braceDepth += counts.open - counts.close;
-
-          // Feature ends when braceDepth returns to 0
-          if (braceDepth <= 0) {
-            if (currentFeatureKey) {
-              this.featureRanges.set(currentFeatureKey, {
-                startLine: featureStartLine,
-                endLine: i,
-                featureIndex: featureIndex
-              });
-            }
-            featureIndex++;
-            inFeature = false;
-            currentFeatureKey = null;
+          // Before bracket, allow editing key name
+        }
+        // Block inside collapsed zones
+        if (inCollapsedZone) return;
+        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;
         }
-      }
-    } catch (e) {
-      // Invalid JSON, can't extract feature ranges
+        
+        // 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;
     }
   }
 
-  // Get hidden line ranges for highlighting
-  getHiddenLineRanges() {
-    const ranges = [];
-    for (const [featureKey, range] of this.featureRanges) {
-      if (this.hiddenFeatures.has(featureKey)) {
-        ranges.push(range);
+  insertNewline() {
+    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++;
+      this.cursorColumn = 0;
+    } else {
+      this.lines.push('');
+      this.cursorLine = this.lines.length - 1;
+      this.cursorColumn = 0;
+    }
+    
+    this.formatAndUpdate();
+  }
+
+  deleteBackward() {
+    if (this.cursorColumn > 0) {
+      const line = this.lines[this.cursorLine];
+      this.lines[this.cursorLine] = line.substring(0, this.cursorColumn - 1) + line.substring(this.cursorColumn);
+      this.cursorColumn--;
+    } else if (this.cursorLine > 0) {
+      // Merge with previous line
+      const currentLine = this.lines[this.cursorLine];
+      const prevLine = this.lines[this.cursorLine - 1];
+      this.cursorColumn = prevLine.length;
+      this.lines[this.cursorLine - 1] = prevLine + currentLine;
+      this.lines.splice(this.cursorLine, 1);
+      this.cursorLine--;
+    }
+    
+    this.formatAndUpdate();
+  }
+
+  deleteForward() {
+    if (this.cursorLine < this.lines.length) {
+      const line = this.lines[this.cursorLine];
+      if (this.cursorColumn < line.length) {
+        this.lines[this.cursorLine] = line.substring(0, this.cursorColumn) + line.substring(this.cursorColumn + 1);
+      } else if (this.cursorLine < this.lines.length - 1) {
+        // Merge with next line
+        this.lines[this.cursorLine] = line + this.lines[this.cursorLine + 1];
+        this.lines.splice(this.cursorLine + 1, 1);
       }
     }
-    return ranges;
+    
+    this.formatAndUpdate();
   }
 
-  // ========== GeoJSON Validation ==========
-
-  // Validate GeoJSON structure and types
-  // context: 'root' | 'geometry' | 'properties'
-  validateGeoJSON(obj, path = '', context = 'root') {
-    const errors = [];
-
-    if (!obj || typeof obj !== 'object') {
-      return errors;
+  /**
+   * Move cursor vertically, skipping hidden collapsed lines only
+   */
+  moveCursorSkipCollapsed(deltaLine) {
+    let targetLine = this.cursorLine + deltaLine;
+    
+    // Skip over hidden collapsed zones only (not opening/closing lines)
+    while (targetLine >= 0 && targetLine < this.lines.length) {
+      const collapsed = this._getCollapsedRangeForLine(targetLine);
+      if (collapsed) {
+        // Jump past the hidden zone
+        if (deltaLine > 0) {
+          targetLine = collapsed.endLine; // Jump to closing bracket line
+        } else {
+          targetLine = collapsed.startLine; // Jump to opening line
+        }
+      }
+      break;
     }
+    
+    this.cursorLine = Math.max(0, Math.min(this.lines.length - 1, targetLine));
+    
+    // Clamp column to line length
+    const maxCol = this.lines[this.cursorLine]?.length || 0;
+    this.cursorColumn = Math.min(this.cursorColumn, maxCol);
+    
+    this._lastStartIndex = -1;
+    this._scrollToCursor();
+    this.scheduleRender();
+  }
 
-    // Check for invalid type values based on context
-    if (context !== 'properties' && obj.type !== undefined) {
-      const typeValue = obj.type;
-      if (typeof typeValue === 'string') {
-        if (context === 'geometry') {
-          // In geometry: must be a geometry type
-          if (!GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.includes(typeValue)) {
-            errors.push(`Invalid geometry type "${typeValue}" at ${path || 'root'} (expected: ${GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.join(', ')})`);
+  /**
+   * Move cursor horizontally with smart navigation around collapsed nodes
+   */
+  moveCursorHorizontal(delta) {
+    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 {
-          // At root or in features: must be Feature
-          if (typeValue !== 'Feature') {
-            errors.push(`Invalid type "${typeValue}" at ${path || 'root'} (expected: Feature)`);
+          // 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);
+        }
+      } 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++;
       }
-    }
-
-    // Recursively validate nested objects
-    if (Array.isArray(obj)) {
-      obj.forEach((item, index) => {
-        errors.push(...this.validateGeoJSON(item, `${path}[${index}]`, context));
-      });
     } else {
-      for (const [key, value] of Object.entries(obj)) {
-        if (typeof value === 'object' && value !== null) {
-          const newPath = path ? `${path}.${key}` : key;
-          // Determine context for nested objects
-          let newContext = context;
-          if (key === 'properties') {
-            newContext = 'properties';
-          } else if (key === 'geometry' || key === 'geometries') {
-            newContext = 'geometry';
-          } else if (key === 'features') {
-            newContext = 'root'; // features contains Feature objects
+      // 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 (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;
+        } 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;
           }
-          errors.push(...this.validateGeoJSON(value, newPath, newContext));
         }
       }
     }
-
-    return errors;
+    
+    this._lastStartIndex = -1;
+    this._scrollToCursor();
+    this.scheduleRender();
   }
 
-  // Helper: Count bracket depth change in a line, ignoring brackets inside strings
-  // Returns {open: count, close: count} for the specified bracket type
-  _countBracketsOutsideStrings(line, openBracket) {
-    const closeBracket = openBracket === '{' ? '}' : ']';
-    let openCount = 0;
-    let closeCount = 0;
-    let inString = false;
-    let escape = false;
-
-    for (let i = 0; i < line.length; i++) {
-      const char = line[i];
+  /**
+   * Scroll viewport to ensure cursor is visible
+   */
+  _scrollToCursor() {
+    const viewport = this.shadowRoot.getElementById('viewport');
+    if (!viewport) return;
+    
+    // Find the visible line index for the cursor
+    const visibleIndex = this.visibleLines.findIndex(vl => vl.index === this.cursorLine);
+    if (visibleIndex === -1) return;
+    
+    const cursorY = visibleIndex * this.lineHeight;
+    const viewportTop = viewport.scrollTop;
+    const viewportBottom = viewportTop + viewport.clientHeight;
+    
+    // Scroll up if cursor is above viewport
+    if (cursorY < viewportTop) {
+      viewport.scrollTop = cursorY;
+    }
+    // Scroll down if cursor is below viewport
+    else if (cursorY + this.lineHeight > viewportBottom) {
+      viewport.scrollTop = cursorY + this.lineHeight - viewport.clientHeight;
+    }
+  }
 
-      if (escape) {
-        escape = false;
-        continue;
-      }
+  /**
+   * Legacy moveCursor for compatibility
+   */
+  moveCursor(deltaLine, deltaCol) {
+    if (deltaLine !== 0) {
+      this.moveCursorSkipCollapsed(deltaLine);
+    } else if (deltaCol !== 0) {
+      this.moveCursorHorizontal(deltaCol);
+    }
+  }
 
-      if (char === '\\' && inString) {
-        escape = true;
-        continue;
-      }
+  /**
+   * Handle arrow key with optional selection
+   */
+  _handleArrowKey(deltaLine, deltaCol, isShift) {
+    // 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);
+    }
+    
+    // Update selection end if shift is pressed
+    if (isShift) {
+      this.selectionEnd = { line: this.cursorLine, column: this.cursorColumn };
+    } else {
+      // Clear selection if shift not pressed
+      this.selectionStart = null;
+      this.selectionEnd = null;
+    }
+  }
 
-      if (char === '"') {
-        inString = !inString;
-        continue;
+  /**
+   * Handle Home/End with optional selection
+   */
+  _handleHomeEnd(key, isShift, onClosingLine) {
+    // Start selection if shift is pressed and no selection exists
+    if (isShift && !this.selectionStart) {
+      this.selectionStart = { line: this.cursorLine, column: this.cursorColumn };
+    }
+    
+    if (key === 'home') {
+      if (onClosingLine) {
+        this.cursorLine = onClosingLine.startLine;
       }
-
-      if (!inString) {
-        if (char === openBracket) openCount++;
-        if (char === closeBracket) closeCount++;
+      this.cursorColumn = 0;
+    } else {
+      if (this.cursorLine < this.lines.length) {
+        this.cursorColumn = this.lines[this.cursorLine].length;
       }
     }
-
-    return { open: openCount, close: closeCount };
+    
+    // Update selection end if shift is pressed
+    if (isShift) {
+      this.selectionEnd = { line: this.cursorLine, column: this.cursorColumn };
+    } else {
+      this.selectionStart = null;
+      this.selectionEnd = null;
+    }
+    
+    this._lastStartIndex = -1;
+    this._scrollToCursor();
+    this.scheduleRender();
   }
 
-  // Helper: Check if bracket closes on same line (ignores brackets in strings)
-  bracketClosesOnSameLine(line, openBracket) {
-    const bracketPos = line.indexOf(openBracket);
-    if (bracketPos === -1) return false;
-
-    const restOfLine = line.substring(bracketPos + 1);
-    const counts = this._countBracketsOutsideStrings(restOfLine, openBracket);
-
-    // Depth starts at 1 (we're after the opening bracket)
-    // If closes equal or exceed opens + 1, the bracket closes on this line
-    return counts.close > counts.open;
+  /**
+   * Select all content
+   */
+  _selectAll() {
+    this.selectionStart = { line: 0, column: 0 };
+    const lastLine = this.lines.length - 1;
+    this.selectionEnd = { line: lastLine, column: this.lines[lastLine]?.length || 0 };
+    this.cursorLine = lastLine;
+    this.cursorColumn = this.lines[lastLine]?.length || 0;
+    
+    this._lastStartIndex = -1;
+    this._scrollToCursor();
+    this.scheduleRender();
   }
 
-  // Helper: Find closing bracket line starting from startLine
-  // Returns { endLine, content: string[] } or null if not found
-  _findClosingBracket(lines, startLine, openBracket) {
-    let depth = 1;
-    const content = [];
-
-    // Count remaining brackets on the start line (after the opening bracket)
-    const startLineContent = lines[startLine];
-    const bracketPos = startLineContent.indexOf(openBracket);
-    if (bracketPos !== -1) {
-      const restOfStartLine = startLineContent.substring(bracketPos + 1);
-      const startCounts = this._countBracketsOutsideStrings(restOfStartLine, openBracket);
-      depth += startCounts.open - startCounts.close;
-      if (depth === 0) {
-        return { endLine: startLine, content: [] };
-      }
+  /**
+   * Get selected text
+   */
+  _getSelectedText() {
+    if (!this.selectionStart || !this.selectionEnd) return '';
+    
+    const { start, end } = this._normalizeSelection();
+    if (!start || !end) return '';
+    
+    if (start.line === end.line) {
+      return this.lines[start.line].substring(start.column, end.column);
     }
-
-    for (let i = startLine + 1; i < lines.length; i++) {
-      const scanLine = lines[i];
-      const counts = this._countBracketsOutsideStrings(scanLine, openBracket);
-      depth += counts.open - counts.close;
-
-      content.push(scanLine);
-
-      if (depth === 0) {
-        return { endLine: i, content };
-      }
+    
+    let text = this.lines[start.line].substring(start.column) + '\n';
+    for (let i = start.line + 1; i < end.line; i++) {
+      text += this.lines[i] + '\n';
     }
-
-    return null; // Not found (malformed JSON)
+    text += this.lines[end.line].substring(0, end.column);
+    
+    return text;
   }
 
   /**
-   * Helper: Perform collapse operation on a node at given line
-   * Stores data in collapsedData, replaces line with marker, removes content lines
-   * @param {string[]} lines - Array of lines (modified in place)
-   * @param {number} lineIndex - Index of line to collapse
-   * @param {string} nodeKey - Key of the node (e.g., 'coordinates')
-   * @param {string} indent - Indentation string
-   * @param {string} openBracket - Opening bracket character ('{' or '[')
-   * @returns {number} Number of lines removed, or 0 if collapse failed
-   * @private
+   * Normalize selection so start is before end
    */
-  _performCollapse(lines, lineIndex, nodeKey, indent, openBracket) {
-    const line = lines[lineIndex];
-    const closeBracket = openBracket === '{' ? '}' : ']';
+  _normalizeSelection() {
+    if (!this.selectionStart || !this.selectionEnd) {
+      return { start: null, end: 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 {
+      return { start: e, end: s };
+    }
+  }
 
-    // Skip if bracket closes on same line
-    if (this.bracketClosesOnSameLine(line, openBracket)) return 0;
+  /**
+   * Check if there is an active selection
+   */
+  _hasSelection() {
+    if (!this.selectionStart || !this.selectionEnd) return false;
+    return this.selectionStart.line !== this.selectionEnd.line ||
+           this.selectionStart.column !== this.selectionEnd.column;
+  }
 
-    // Find closing bracket
-    const result = this._findClosingBracket(lines, lineIndex, openBracket);
-    if (!result) return 0;
+  /**
+   * Clear the current selection
+   */
+  _clearSelection() {
+    this.selectionStart = null;
+    this.selectionEnd = null;
+  }
 
-    const { endLine, content } = result;
+  /**
+   * Delete selected text
+   */
+  _deleteSelection() {
+    if (!this._hasSelection()) return false;
+    
+    const { start, end } = this._normalizeSelection();
+    
+    if (start.line === end.line) {
+      // Single line selection
+      const line = this.lines[start.line];
+      this.lines[start.line] = line.substring(0, start.column) + line.substring(end.column);
+    } else {
+      // Multi-line selection
+      const startLine = this.lines[start.line].substring(0, start.column);
+      const endLine = this.lines[end.line].substring(end.column);
+      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;
+  }
 
-    // Store the original data with unique key
-    const uniqueKey = `${lineIndex}-${nodeKey}`;
-    this.collapsedData.set(uniqueKey, {
-      originalLine: line,
-      content: content,
-      indent: indent.length,
-      nodeKey: nodeKey
-    });
+  insertText(text) {
+    // Delete selection first if any
+    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) {
+      const line = this.lines[this.cursorLine];
+      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) {
+      const line = this.lines[this.cursorLine];
+      const bracketPos = line.search(/[{\[]/);
+      if (this.cursorColumn > bracketPos) return;
+    }
+    
+    // Handle empty editor case
+    if (this.lines.length === 0) {
+      this.lines = [text];
+      this.cursorColumn = text.length;
+    } else if (this.cursorLine < this.lines.length) {
+      const line = this.lines[this.cursorLine];
+      this.lines[this.cursorLine] = line.substring(0, this.cursorColumn) + text + line.substring(this.cursorColumn);
+      this.cursorColumn += text.length;
+    }
+    this.formatAndUpdate();
+  }
 
-    // Replace with marker
-    const beforeBracket = line.substring(0, line.indexOf(openBracket));
-    const hasTrailingComma = lines[endLine] && lines[endLine].trim().endsWith(',');
-    lines[lineIndex] = `${beforeBracket}${openBracket}...${closeBracket}${hasTrailingComma ? ',' : ''}`;
+  handlePaste(e) {
+    e.preventDefault();
+    const text = e.clipboardData.getData('text/plain');
+    if (text) {
+      this.insertText(text);
+    }
+  }
 
-    // Remove content lines
-    const linesRemoved = endLine - lineIndex;
-    lines.splice(lineIndex + 1, linesRemoved);
+  handleCopy(e) {
+    e.preventDefault();
+    // Copy selected text if there's a selection, otherwise copy all
+    if (this._hasSelection()) {
+      e.clipboardData.setData('text/plain', this._getSelectedText());
+    } else {
+      e.clipboardData.setData('text/plain', this.getContent());
+    }
+  }
 
-    return linesRemoved;
+  handleCut(e) {
+    e.preventDefault();
+    if (this._hasSelection()) {
+      e.clipboardData.setData('text/plain', this._getSelectedText());
+      this._deleteSelection();
+      this.formatAndUpdate();
+    } else {
+      // Cut all content
+      e.clipboardData.setData('text/plain', this.getContent());
+      this.lines = [];
+      this.cursorLine = 0;
+      this.cursorColumn = 0;
+      this.formatAndUpdate();
+    }
   }
 
-  // Helper: Expand all collapsed markers and return expanded content
-  expandAllCollapsed(content) {
-    const R = GeoJsonEditor.REGEX;
+  /**
+   * Get line/column position from mouse event
+   */
+  _getPositionFromClick(e) {
+    const viewport = this.shadowRoot.getElementById('viewport');
+    const rect = viewport.getBoundingClientRect();
+    
+    const paddingTop = 8;
+    const paddingLeft = 12;
+    
+    const y = e.clientY - rect.top + viewport.scrollTop - paddingTop;
+    const x = e.clientX - rect.left - paddingLeft;
+    
+    const visibleLineIndex = Math.floor(y / this.lineHeight);
+    
+    let line = 0;
+    let column = 0;
+    
+    if (visibleLineIndex >= 0 && visibleLineIndex < this.visibleLines.length) {
+      const lineData = this.visibleLines[visibleLineIndex];
+      line = lineData.index;
+      
+      const charWidth = this._getCharWidth();
+      const rawColumn = Math.round(x / charWidth);
+      const lineLength = lineData.content?.length || 0;
+      column = Math.max(0, Math.min(rawColumn, lineLength));
+    }
+    
+    return { line, column };
+  }
 
-    while (content.includes('{...}') || content.includes('[...]')) {
-      const lines = content.split('\n');
-      let expanded = false;
+  // ========== Gutter Interactions ==========
+  
+  handleGutterClick(e) {
+    // Visibility button in gutter
+    const visBtn = e.target.closest('.visibility-button');
+    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);
+      return;
+    }
+  }
+  
+  handleEditorClick(e) {
+    // Line-level visibility button (pseudo-element ::before on .line.has-visibility)
+    const lineEl = e.target.closest('.line.has-visibility');
+    if (lineEl) {
+      const rect = lineEl.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      // Pseudo-element is at the start of the line, check first ~14px
+      if (clickX < 14) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleFeatureVisibility(lineEl.dataset.featureKey);
+        return;
+      }
+    }
+    
+    // Inline color swatch (pseudo-element positioned with left: -8px)
+    if (e.target.classList.contains('json-color')) {
+      const rect = e.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');
+        if (targetLineEl) {
+          const lineIndex = parseInt(targetLineEl.dataset.lineIndex);
+          const line = this.lines[lineIndex];
+          const match = line.match(/"([\w-]+)"\s*:\s*"#/);
+          if (match) {
+            this.showColorPicker(e.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();
+      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');
+        if (targetLineEl) {
+          const lineIndex = parseInt(targetLineEl.dataset.lineIndex);
+          const line = this.lines[lineIndex];
+          const match = line.match(/"([\w-]+)"\s*:\s*(true|false)/);
+          if (match) {
+            const currentValue = match[2] === 'true';
+            this.updateBooleanValue(lineIndex, !currentValue, match[1]);
+          }
+        }
+        return;
+      }
+    }
+  }
 
-      for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-        if (!line.includes('{...}') && !line.includes('[...]')) continue;
+  // ========== Collapse/Expand ==========
+  
+  toggleCollapse(nodeId) {
+    if (this.collapsedNodes.has(nodeId)) {
+      this.collapsedNodes.delete(nodeId);
+    } else {
+      this.collapsedNodes.add(nodeId);
+    }
+    
+    // Use updateView - don't rebuild nodeId mappings since content didn't change
+    this.updateView();
+    this._lastStartIndex = -1; // Force re-render
+    this.scheduleRender();
+  }
 
-        const match = line.match(R.collapsedMarker);
-        if (!match) continue;
+  autoCollapseCoordinates() {
+    const ranges = this._findCollapsibleRanges();
+    
+    for (const range of ranges) {
+      if (range.nodeKey === 'coordinates') {
+        this.collapsedNodes.add(range.nodeId);
+      }
+    }
+    
+    // Use updateView since nodeIds were just assigned by updateModel/setValue
+    this.updateView();
+    this.scheduleRender();
+  }
 
-        const nodeKey = match[2];
-        const currentIndent = match[1].length;
-        const found = this._findCollapsedData(i, nodeKey, currentIndent);
+  // ========== Feature Visibility ==========
+  
+  toggleFeatureVisibility(featureKey) {
+    if (this.hiddenFeatures.has(featureKey)) {
+      this.hiddenFeatures.delete(featureKey);
+    } else {
+      this.hiddenFeatures.add(featureKey);
+    }
+    
+    // Use updateView - content didn't change, just visibility
+    this.updateView();
+    this.scheduleRender();
+    this.emitChange();
+  }
 
-        if (found) {
-          const { data: { originalLine, content: nodeContent } } = found;
-          lines[i] = originalLine;
-          lines.splice(i + 1, 0, ...nodeContent);
-          expanded = true;
-          break;
-        }
+  // ========== Color Picker ==========
+  
+  showColorPicker(indicator, line, currentColor, attributeName) {
+    // 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');
+    anchor.className = 'geojson-color-picker-anchor';
+    const rect = indicator.getBoundingClientRect();
+    anchor.style.cssText = `
+      position: fixed;
+      left: ${rect.left - 8}px;
+      top: ${rect.top + rect.height}px;
+      width: 10px;
+      height: 10px;
+      z-index: 9998;
+    `;
+    document.body.appendChild(anchor);
+    
+    const colorInput = document.createElement('input');
+    colorInput.type = 'color';
+    colorInput.value = currentColor;
+    colorInput.className = 'geojson-color-picker-input';
+    
+    // Position the color input inside the anchor
+    colorInput.style.cssText = `
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 10px;
+      height: 10px;
+      opacity: 0;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+    `;
+    anchor.appendChild(colorInput);
+    
+    colorInput.addEventListener('input', (e) => {
+      this.updateColorValue(line, e.target.value, attributeName);
+    });
+    
+    const closeOnClickOutside = (e) => {
+      if (e.target !== colorInput) {
+        document.removeEventListener('click', closeOnClickOutside, true);
+        anchor.remove(); // Remove anchor (which contains the input)
       }
+    };
+    
+    colorInput._closeListener = closeOnClickOutside;
+    
+    setTimeout(() => {
+      document.addEventListener('click', closeOnClickOutside, true);
+    }, 100);
+    
+    colorInput.focus();
+    colorInput.click();
+  }
 
-      if (!expanded) break;
-      content = lines.join('\n');
-    }
-    return content;
+  updateColorValue(line, newColor, attributeName) {
+    const regex = new RegExp(`"${attributeName}"\\s*:\\s*"#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})"`);
+    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();
   }
 
-  // Helper: Format JSON content (always in FeatureCollection mode)
-  // Also applies default properties to features if configured
-  formatJSONContent(content) {
-    const wrapped = '[' + content + ']';
-    let parsed = JSON.parse(wrapped);
-    
-    // Apply default properties to each feature in the array
-    if (Array.isArray(parsed)) {
-      parsed = parsed.map(f => this._applyDefaultPropertiesToFeature(f));
-    }
+  updateBooleanValue(line, newValue, attributeName) {
+    const regex = new RegExp(`"${attributeName}"\\s*:\\s*(true|false)`);
+    this.lines[line] = this.lines[line].replace(regex, `"${attributeName}": ${newValue}`);
     
-    const formatted = JSON.stringify(parsed, null, 2);
-    const lines = formatted.split('\n');
-    return lines.length > 2 ? lines.slice(1, -1).join('\n') : '';
+    // Use updateView to preserve collapsed state (line count didn't change)
+    this.updateView();
+    this.scheduleRender();
+    this.emitChange();
   }
 
-  autoFormatContentWithCursor() {
-    const textarea = this.shadowRoot.getElementById('textarea');
-
-    // Save cursor position
-    const cursorPos = textarea.selectionStart;
-    const textBeforeCursor = textarea.value.substring(0, cursorPos);
-    const linesBeforeCursor = textBeforeCursor.split('\n');
-    const cursorLine = linesBeforeCursor.length - 1;
-    const cursorColumn = linesBeforeCursor[linesBeforeCursor.length - 1].length;
-
-    // Save collapsed node details
-    const collapsedNodes = Array.from(this.collapsedData.values()).map(data => ({
-      nodeKey: data.nodeKey,
-      indent: data.indent
-    }));
-
-    // Expand and format
-    const content = this.expandAllCollapsed(textarea.value);
-
+  // ========== Format and Update ==========
+  
+  formatAndUpdate() {
     try {
-      const formattedContent = this.formatJSONContent(content);
-
-      if (formattedContent !== content) {
-        this.collapsedData.clear();
-        textarea.value = formattedContent;
-
-        if (collapsedNodes.length > 0) {
-          this.reapplyCollapsed(collapsedNodes);
-        }
-
-        // Restore cursor position
-        const newLines = textarea.value.split('\n');
-        if (cursorLine < newLines.length) {
-          const newColumn = Math.min(cursorColumn, newLines[cursorLine].length);
-          let newPos = 0;
-          for (let i = 0; i < cursorLine; i++) {
-            newPos += newLines[i].length + 1;
-          }
-          newPos += newColumn;
-          textarea.setSelectionRange(newPos, newPos);
-        }
-      }
+      const content = this.lines.join('\n');
+      const wrapped = '[' + content + ']';
+      const parsed = JSON.parse(wrapped);
+      
+      const formatted = JSON.stringify(parsed, null, 2);
+      const lines = formatted.split('\n');
+      this.lines = lines.slice(1, -1); // Remove wrapper brackets
     } catch (e) {
-      // Invalid JSON, don't format
+      // Invalid JSON, keep as-is
     }
+    
+    this.updateModel();
+    this.scheduleRender();
+    this.updatePlaceholderVisibility();
+    this.emitChange();
   }
 
-  reapplyCollapsed(collapsedNodes) {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    const lines = textarea.value.split('\n');
-
-    // Group collapsed nodes by nodeKey+indent and count occurrences
-    const collapseMap = new Map();
-    collapsedNodes.forEach(({nodeKey, indent}) => {
-      const key = `${nodeKey}-${indent}`;
-      collapseMap.set(key, (collapseMap.get(key) || 0) + 1);
-    });
-
-    // Track occurrences as we iterate
-    const occurrenceCount = new Map();
-
-    // Iterate backwards to avoid index issues
-    for (let i = lines.length - 1; i >= 0; i--) {
-      const line = lines[i];
-      const match = line.match(/^(\s*)"(\w+)"\s*:\s*([{\[])/);
-
-      if (match) {
-        const nodeKey = match[2];
-        const currentIndent = match[1].length;
-        const key = `${nodeKey}-${currentIndent}`;
-
-        if (collapseMap.has(key)) {
-          // Count this occurrence
-          occurrenceCount.set(key, (occurrenceCount.get(key) || 0) + 1);
-          const currentOccurrence = occurrenceCount.get(key);
-
-          // Only collapse if this occurrence should be collapsed
-          if (currentOccurrence <= collapseMap.get(key)) {
-            const indent = match[1];
-            const openBracket = match[3];
-
-            // Use common collapse helper
-            this._performCollapse(lines, i, nodeKey, indent, openBracket);
-          }
-        }
+  // ========== Event Emission ==========
+  
+  emitChange() {
+    const content = this.getContent();
+    const fullValue = this.prefix + content + this.suffix;
+    
+    try {
+      let parsed = JSON.parse(fullValue);
+      
+      // Filter hidden features
+      if (this.hiddenFeatures.size > 0) {
+        parsed.features = parsed.features.filter((feature) => {
+          const key = this._getFeatureKey(feature);
+          return !this.hiddenFeatures.has(key);
+        });
+      }
+      
+      // Validate
+      const errors = this._validateGeoJSON(parsed);
+      
+      if (errors.length > 0) {
+        this.dispatchEvent(new CustomEvent('error', {
+          detail: { error: errors.join('; '), errors, content },
+          bubbles: true,
+          composed: true
+        }));
+      } else {
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: parsed,
+          bubbles: true,
+          composed: true
+        }));
       }
+    } catch (e) {
+      this.dispatchEvent(new CustomEvent('error', {
+        detail: { error: e.message, content },
+        bubbles: true,
+        composed: true
+      }));
     }
-
-    textarea.value = lines.join('\n');
   }
 
+  // ========== UI Updates ==========
+  
+  updateReadonly() {
+    const textarea = this.shadowRoot.getElementById('hiddenTextarea');
+    const clearBtn = this.shadowRoot.getElementById('clearBtn');
+    
+    // Use readOnly instead of disabled to allow text selection for copying
+    if (textarea) textarea.readOnly = this.readonly;
+    if (clearBtn) clearBtn.hidden = this.readonly;
+  }
 
-  // Parse selector and generate CSS rule for dark theme
-  parseSelectorToHostRule(selector) {
-    if (!selector || selector === '') {
-      // Fallback: use data attribute on host element
-      return ':host([data-color-scheme="dark"])';
+  updatePlaceholderVisibility() {
+    const placeholder = this.shadowRoot.getElementById('placeholderLayer');
+    if (placeholder) {
+      placeholder.style.display = this.lines.length > 0 ? 'none' : 'block';
     }
+  }
 
-    // Check if it's a simple class on host (.dark)
-    if (selector.startsWith('.') && !selector.includes(' ')) {
-      return `:host(${selector})`;
+  updatePlaceholderContent() {
+    const placeholder = this.shadowRoot.getElementById('placeholderLayer');
+    if (placeholder) {
+      placeholder.textContent = this.placeholder;
     }
+    this.updatePlaceholderVisibility();
+  }
 
-    // Complex selector - use :host-context for parent elements
-    return `:host-context(${selector})`;
+  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;
   }
 
-  // Generate and inject theme CSS based on dark selector
+  // ========== Theme ==========
+  
   updateThemeCSS() {
     const darkSelector = this.getAttribute('dark-selector') || '.dark';
-    const darkRule = this.parseSelectorToHostRule(darkSelector);
-
-    // Find or create theme style element
+    const darkRule = this._parseSelectorToHostRule(darkSelector);
+    
     let themeStyle = this.shadowRoot.getElementById('theme-styles');
     if (!themeStyle) {
       themeStyle = document.createElement('style');
       themeStyle.id = 'theme-styles';
       this.shadowRoot.insertBefore(themeStyle, this.shadowRoot.firstChild);
     }
-
-    // Helper to generate CSS variables from theme object
-    const generateVars = (themeObj) => {
-      return Object.entries(themeObj || {})
-        .map(([key, value]) => `--${GeoJsonEditor._toKebabCase(key)}: ${value};`)
-        .join('\n        ');
+    
+    const darkDefaults = {
+      bgColor: '#2b2b2b',
+      textColor: '#a9b7c6',
+      caretColor: '#bbbbbb',
+      gutterBg: '#313335',
+      gutterBorder: '#3c3f41',
+      gutterText: '#606366',
+      jsonKey: '#9876aa',
+      jsonString: '#6a8759',
+      jsonNumber: '#6897bb',
+      jsonBoolean: '#cc7832',
+      jsonNull: '#cc7832',
+      jsonPunct: '#a9b7c6',
+      jsonError: '#ff6b68',
+      controlColor: '#cc7832',
+      controlBg: '#3c3f41',
+      controlBorder: '#5a5a5a',
+      geojsonKey: '#9876aa',
+      geojsonType: '#6a8759',
+      geojsonTypeInvalid: '#ff6b68',
+      jsonKeyInvalid: '#ff6b68'
     };
-
-    // Light theme: only overrides (defaults are in static CSS)
-    const lightVars = generateVars(this.themes.light);
-
-    // Dark theme: ALWAYS generate with defaults + overrides (selector is dynamic)
-    const darkTheme = { ...GeoJsonEditor.DARK_THEME_DEFAULTS, ...this.themes.dark };
+    
+    const toKebab = (str) => str.replace(/([A-Z])/g, '-$1').toLowerCase();
+    const generateVars = (obj) => Object.entries(obj)
+      .map(([k, v]) => `--${toKebab(k)}: ${v};`)
+      .join('\n        ');
+    
+    const lightVars = generateVars(this.themes.light || {});
+    const darkTheme = { ...darkDefaults, ...this.themes.dark };
     const darkVars = generateVars(darkTheme);
-
-    let css = '';
-    if (lightVars) {
-      css += `:host {\n        ${lightVars}\n      }\n`;
-    }
-    // Dark theme is always generated (selector is configurable)
+    
+    let css = lightVars ? `:host {\n        ${lightVars}\n      }\n` : '';
     css += `${darkRule} {\n        ${darkVars}\n      }`;
-
+    
     themeStyle.textContent = css;
   }
 
-  // Public API: Theme management
-  setTheme(theme) {
-    if (theme.dark) {
-      this.themes.dark = { ...this.themes.dark, ...theme.dark };
-    }
-    if (theme.light) {
-      this.themes.light = { ...this.themes.light, ...theme.light };
+  _parseSelectorToHostRule(selector) {
+    if (!selector) return ':host([data-color-scheme="dark"])';
+    if (selector.startsWith('.') && !selector.includes(' ')) {
+      return `:host(${selector})`;
     }
+    return `:host-context(${selector})`;
+  }
+
+  setTheme(theme) {
+    if (theme.dark) this.themes.dark = { ...this.themes.dark, ...theme.dark };
+    if (theme.light) this.themes.light = { ...this.themes.light, ...theme.light };
     this.updateThemeCSS();
   }
 
@@ -2125,272 +2098,363 @@ class GeoJsonEditor extends HTMLElement {
     this.updateThemeCSS();
   }
 
-  // ========================================
-  // Features API - Programmatic manipulation
-  // ========================================
-
-  /**
-   * Normalize a Python-style index (supports negative values)
-   * @param {number} index - Index to normalize (negative = from end)
-   * @param {number} length - Length of the array
-   * @param {boolean} clamp - If true, clamp to valid range; if false, return -1 for out of bounds
-   * @returns {number} Normalized index, or -1 if out of bounds (when clamp=false)
-   * @private
-   */
-  _normalizeIndex(index, length, clamp = false) {
-    let idx = index;
-    if (idx < 0) {
-      idx = length + idx;
-    }
-    if (clamp) {
-      return Math.max(0, Math.min(idx, length));
+  // ========== 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 (idx < 0 || idx >= length) ? -1 : idx;
+    return `hash:${geomType}:${hash.toString(36)}`;
   }
 
-  /**
-   * Parse current textarea content into an array of features
-   * @returns {Array} Array of feature objects
-   * @private
-   */
-  _parseFeatures() {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    if (!textarea || !textarea.value.trim()) {
-      return [];
-    }
-
-    try {
-      // Expand collapsed nodes to get full content
-      const content = this.expandAllCollapsed(textarea.value);
-      // Wrap in array brackets and parse
-      const wrapped = '[' + content + ']';
-      return JSON.parse(wrapped);
-    } catch (e) {
-      return [];
+  _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 };
   }
 
   /**
-   * Update textarea with features array and trigger all updates
-   * @param {Array} features - Array of feature objects
-   * @private
+   * Find all collapsible ranges using the mappings built by _rebuildNodeIdMappings
+   * This method only READS the existing mappings, it doesn't create new IDs
    */
-  _setFeatures(features) {
-    const textarea = this.shadowRoot.getElementById('textarea');
-    if (!textarea) return;
-
-    // Clear internal state when replacing features (prevent memory leaks)
-    this.collapsedData.clear();
-    this.hiddenFeatures.clear();
-
-    if (!features || features.length === 0) {
-      textarea.value = '';
-    } else {
-      // Format each feature and join with comma
-      const formatted = features
-        .map(f => JSON.stringify(f, null, 2))
-        .join(',\n');
-
-      textarea.value = formatted;
-    }
-
-    // Trigger all updates
-    this.updateHighlight();
-    this.updatePlaceholderVisibility();
-
-    // Auto-collapse coordinates
-    if (textarea.value) {
-      requestAnimationFrame(() => {
-        this.applyAutoCollapsed();
+  _findCollapsibleRanges() {
+    const ranges = [];
+    
+    // Simply iterate through the existing mappings
+    for (const [lineIndex, nodeId] of this._lineToNodeId) {
+      const rangeInfo = this._nodeIdToLines.get(nodeId);
+      if (!rangeInfo) continue;
+      
+      const line = this.lines[lineIndex];
+      if (!line) continue;
+      
+      // Match "key": { or "key": [
+      const kvMatch = line.match(/^\s*"([^"]+)"\s*:\s*([{\[])/);
+      // Also match standalone { or [ (root Feature objects)
+      const rootMatch = !kvMatch && line.match(/^\s*([{\[]),?\s*$/);
+      
+      if (!kvMatch && !rootMatch) continue;
+      
+      const openBracket = kvMatch ? kvMatch[2] : rootMatch[1];
+      
+      ranges.push({
+        startLine: rangeInfo.startLine,
+        endLine: rangeInfo.endLine,
+        nodeKey: rangeInfo.nodeKey || (kvMatch ? kvMatch[1] : `__root_${lineIndex}`),
+        nodeId,
+        openBracket,
+        isRootFeature: !!rootMatch
       });
     }
-
-    // Emit change event
-    this.emitChange();
+    
+    // Sort by startLine for consistent ordering
+    ranges.sort((a, b) => a.startLine - b.startLine);
+    
+    return ranges;
   }
 
-  /**
-   * Validate a single feature object
-   * @param {Object} feature - Feature object to validate
-   * @returns {string[]} Array of validation error messages (empty if valid)
-   * @private
-   */
-  _validateFeature(feature) {
-    const errors = [];
-
-    if (!feature || typeof feature !== 'object') {
-      errors.push('Feature must be an object');
-      return errors;
+  _findClosingLine(startLine, openBracket) {
+    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);
+      depth += counts.open - counts.close;
+      if (depth === 0) return startLine;
     }
-
-    if (Array.isArray(feature)) {
-      errors.push('Feature cannot be an array');
-      return errors;
+    
+    for (let i = startLine + 1; i < this.lines.length; i++) {
+      const counts = this._countBrackets(this.lines[i], openBracket);
+      depth += counts.open - counts.close;
+      if (depth === 0) return i;
     }
+    
+    return -1;
+  }
 
-    // Check required type field
-    if (!('type' in feature)) {
-      errors.push('Feature must have a "type" property');
-    } else if (feature.type !== 'Feature') {
-      errors.push(`Feature type must be "Feature", got "${feature.type}"`);
+  _buildContextMap() {
+    const contextMap = new Map();
+    const contextStack = [];
+    let pendingContext = null;
+    
+    for (let i = 0; i < this.lines.length; 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';
+      
+      // 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();
+      }
     }
+    
+    return contextMap;
+  }
 
-    // Check geometry field exists (can be null for features without location)
-    if (!('geometry' in feature)) {
-      errors.push('Feature must have a "geometry" property (can be null)');
-    } else if (feature.geometry !== null) {
-      // Validate geometry if not null
-      if (typeof feature.geometry !== 'object' || Array.isArray(feature.geometry)) {
-        errors.push('Feature geometry must be an object or null');
-      } else {
-        // Check geometry has valid type
-        if (!('type' in feature.geometry)) {
-          errors.push('Geometry must have a "type" property');
-        } else if (!GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.includes(feature.geometry.type)) {
-          errors.push(`Invalid geometry type "${feature.geometry.type}" (expected: ${GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.join(', ')})`);
+  _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*)([{\[])/);
+      // Also match standalone { or [ (root Feature objects)
+      const rootMatch = !bracketMatch && text.match(/^(\s*)([{\[]),?\s*$/);
+      
+      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;');
+    
+    // Punctuation FIRST (before other replacements can interfere)
+    result = result.replace(/([{}[\],:])/g, '<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) => {
+      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') {
+      result = result.replace(
+        /<span class="geojson-key">"type"<\/span><span class="json-punctuation">:<\/span>\s*"([^"]*)"/g, 
+        (match, 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> <span class="${cls}">"${type}"</span>`;
         }
-
-        // Check geometry has coordinates
-        if (!('coordinates' in feature.geometry)) {
-          errors.push('Geometry must have a "coordinates" property');
+      );
+    }
+    
+    // String values (not already wrapped in spans)
+    result = result.replace(
+      /(<span class="json-punctuation">:<\/span>)\s*"([^"]*)"/g, 
+      (match, colon, 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} <span class="json-string json-color" data-color="${val}" style="--swatch-color: ${val}">"${val}"</span>`;
         }
+        
+        return `${colon} <span class="json-string">"${val}"</span>`;
       }
+    );
+    
+    // Numbers after colon
+    result = result.replace(
+      /(<span class="json-punctuation">:<\/span>)\s*(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi, 
+      '$1 <span class="json-number">$2</span>'
+    );
+    
+    // Numbers in arrays (after [ or ,)
+    result = result.replace(
+      /(<span class="json-punctuation">[\[,]<\/span>)\s*(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi, 
+      '$1<span class="json-number">$2</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>'
+    );
+    
+    // Booleans - use ::before for checkbox via CSS class
+    result = result.replace(
+      /(<span class="json-punctuation">:<\/span>)\s*(true|false)/g, 
+      (match, colon, val) => {
+        const checkedClass = val === 'true' ? ' json-bool-true' : ' json-bool-false';
+        return `${colon} <span class="json-boolean${checkedClass}">${val}</span>`;
+      }
+    );
+    
+    // Null
+    result = result.replace(
+      /(<span class="json-punctuation">:<\/span>)\s*(null)/g, 
+      '$1 <span class="json-null">$2</span>'
+    );
+    
+    // Collapsed bracket indicator - just add the class, CSS ::after adds the "...]" or "...}"
+    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>`
+      );
     }
-
-    // Check properties field exists (can be null)
-    if (!('properties' in feature)) {
-      errors.push('Feature must have a "properties" property (can be null)');
-    } else if (feature.properties !== null && (typeof feature.properties !== 'object' || Array.isArray(feature.properties))) {
-      errors.push('Feature properties must be an object or null');
-    }
-
-    return errors;
+    
+    // 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;
+      }
+    );
+    
+    // Note: visibility is now handled at line level (has-visibility class on .line element)
+    
+    return result;
   }
 
-  /**
-   * Replace all features with the given array
-   * @param {Array} features - Array of feature objects to set
-   * @throws {Error} If features is not an array or contains invalid features
-   */
-  set(features) {
-    if (!Array.isArray(features)) {
-      throw new Error('set() expects an array of features');
-    }
-
-    // Validate each feature
-    const allErrors = [];
-    features.forEach((feature, index) => {
-      const errors = this._validateFeature(feature);
-      if (errors.length > 0) {
-        allErrors.push(`Feature[${index}]: ${errors.join(', ')}`);
+  _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;
+  }
 
-    if (allErrors.length > 0) {
-      throw new Error(`Invalid features: ${allErrors.join('; ')}`);
-    }
-
-    // Apply default properties to each feature
-    const featuresWithDefaults = features.map(f => this._applyDefaultPropertiesToFeature(f));
-    this._setFeatures(featuresWithDefaults);
+  // ========== Public API ==========
+  
+  set(features) {
+    if (!Array.isArray(features)) throw new Error('set() expects an array');
+    const formatted = features.map(f => JSON.stringify(f, null, 2)).join(',\n');
+    this.setValue(formatted);
   }
 
-  /**
-   * Add a feature at the end of the list
-   * @param {Object} feature - Feature object to add
-   * @throws {Error} If feature is invalid
-   */
   add(feature) {
-    const errors = this._validateFeature(feature);
-    if (errors.length > 0) {
-      throw new Error(`Invalid feature: ${errors.join(', ')}`);
-    }
-
     const features = this._parseFeatures();
-    // Apply default properties before adding
-    features.push(this._applyDefaultPropertiesToFeature(feature));
-    this._setFeatures(features);
+    features.push(feature);
+    this.set(features);
   }
 
-  /**
-   * Insert a feature at the specified index
-   * @param {Object} feature - Feature object to insert
-   * @param {number} index - Index to insert at (negative = from end)
-   * @throws {Error} If feature is invalid
-   */
   insertAt(feature, index) {
-    const errors = this._validateFeature(feature);
-    if (errors.length > 0) {
-      throw new Error(`Invalid feature: ${errors.join(', ')}`);
-    }
-
     const features = this._parseFeatures();
-    const idx = this._normalizeIndex(index, features.length, true);
-
-    // Apply default properties before inserting
-    features.splice(idx, 0, this._applyDefaultPropertiesToFeature(feature));
-    this._setFeatures(features);
+    const idx = index < 0 ? features.length + index : index;
+    features.splice(Math.max(0, Math.min(idx, features.length)), 0, feature);
+    this.set(features);
   }
 
-  /**
-   * Remove the feature at the specified index
-   * @param {number} index - Index to remove (negative = from end)
-   * @returns {Object|undefined} The removed feature, or undefined if index out of bounds
-   */
   removeAt(index) {
     const features = this._parseFeatures();
-    if (features.length === 0) return undefined;
-
-    const idx = this._normalizeIndex(index, features.length);
-    if (idx === -1) return undefined;
-
-    const removed = features.splice(idx, 1)[0];
-    this._setFeatures(features);
-    return removed;
+    const idx = index < 0 ? features.length + index : index;
+    if (idx >= 0 && idx < features.length) {
+      const removed = features.splice(idx, 1)[0];
+      this.set(features);
+      return removed;
+    }
+    return undefined;
   }
 
-  /**
-   * Remove all features
-   * @returns {Array} Array of removed features
-   */
   removeAll() {
     const removed = this._parseFeatures();
-    this._setFeatures([]);
+    this.lines = [];
+    this.collapsedNodes.clear();
+    this.hiddenFeatures.clear();
+    this.updateModel();
+    this.scheduleRender();
+    this.updatePlaceholderVisibility();
+    this.emitChange();
     return removed;
   }
 
-  /**
-   * Get the feature at the specified index
-   * @param {number} index - Index to get (negative = from end)
-   * @returns {Object|undefined} The feature, or undefined if index out of bounds
-   */
   get(index) {
     const features = this._parseFeatures();
-    if (features.length === 0) return undefined;
-
-    const idx = this._normalizeIndex(index, features.length);
-    if (idx === -1) return undefined;
-
+    const idx = index < 0 ? features.length + index : index;
     return features[idx];
   }
 
-  /**
-   * Get all features as an array
-   * @returns {Array} Array of all feature objects
-   */
   getAll() {
     return this._parseFeatures();
   }
 
-  /**
-   * Emit the current document on the change event
-   */
   emit() {
     this.emitChange();
   }
+
+  _parseFeatures() {
+    try {
+      const content = this.lines.join('\n');
+      if (!content.trim()) return [];
+      return JSON.parse('[' + content + ']');
+    } catch (e) {
+      return [];
+    }
+  }
 }
 
-// Register the custom element
 customElements.define('geojson-editor', GeoJsonEditor);
 
 export default GeoJsonEditor;