@softwarity/geojson-editor 1.0.4 → 1.0.6

package/src/geojson-editor.js

@@ -7,6 +7,8 @@ class GeoJsonEditor extends HTMLElement {
     this.collapsedData = new Map(); // nodeKey -> {originalLines: string[], indent: number}
     this.colorPositions = []; // {line, color}
     this.nodeTogglePositions = []; // {line, nodeKey, isCollapsed, indent}
+    this.hiddenFeatures = new Set(); // Set of feature keys (hidden from events)
+    this.featureRanges = new Map(); // featureKey -> {startLine, endLine, featureIndex}
 
     // Debounce timer for syntax highlighting
     this.highlightTimer = null;
@@ -15,65 +17,40 @@ class GeoJsonEditor extends HTMLElement {
     this._cachedLineHeight = null;
     this._cachedPaddingTop = null;
 
-    // Initialize themes from defaults
-    this.themes = {
-      dark: { ...GeoJsonEditor.DEFAULT_THEMES.dark },
-      light: { ...GeoJsonEditor.DEFAULT_THEMES.light }
-    };
+    // Custom theme overrides (empty by default, CSS has defaults)
+    this.themes = { dark: {}, light: {} };
   }
 
   static get observedAttributes() {
-    return ['readonly', 'value', 'placeholder', 'auto-format', 'dark-selector', 'feature-collection'];
-  }
-
-
-  // Default theme values
-  static DEFAULT_THEMES = {
-    dark: {
-      background: '#1e1e1e',
-      textColor: '#d4d4d4',
-      caretColor: '#fff',
-      gutterBackground: '#252526',
-      gutterBorder: '#3e3e42',
-      jsonKey: '#9cdcfe',
-      jsonString: '#ce9178',
-      jsonNumber: '#b5cea8',
-      jsonBoolean: '#569cd6',
-      jsonNull: '#569cd6',
-      jsonPunctuation: '#d4d4d4',
-      controlColor: '#c586c0',
-      controlBg: '#3e3e42',
-      controlBorder: '#555',
-      geojsonKey: '#c586c0',
-      geojsonType: '#4ec9b0',
-      geojsonTypeInvalid: '#f44747',
-      jsonKeyInvalid: '#f44747'
-    },
-    light: {
-      background: '#ffffff',
-      textColor: '#333333',
-      caretColor: '#000',
-      gutterBackground: '#f5f5f5',
-      gutterBorder: '#ddd',
-      jsonKey: '#0000ff',
-      jsonString: '#a31515',
-      jsonNumber: '#098658',
-      jsonBoolean: '#0000ff',
-      jsonNull: '#0000ff',
-      jsonPunctuation: '#333333',
-      controlColor: '#a31515',
-      controlBg: '#e0e0e0',
-      controlBorder: '#999',
-      geojsonKey: '#af00db',
-      geojsonType: '#267f99',
-      geojsonTypeInvalid: '#d32f2f',
-      jsonKeyInvalid: '#d32f2f'
-    }
-  };
+    return ['readonly', 'value', 'placeholder', 'dark-selector'];
+  }
 
-  // FeatureCollection wrapper constants
-  static FEATURE_COLLECTION_PREFIX = '{"type": "FeatureCollection", "features": [';
-  static FEATURE_COLLECTION_SUFFIX = ']}';
+  // 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 = {
@@ -91,7 +68,7 @@ class GeoJsonEditor extends HTMLElement {
     allNumbers: /\b(-?\d+\.?\d*)\b/g,
     punctuation: /([{}[\],])/g,
     // Highlighting detection
-    colorInLine: /"(\w+)"\s*:\s*"(#[0-9a-fA-F]{6})"/g,
+    colorInLine: /"([\w-]+)"\s*:\s*"(#[0-9a-fA-F]{6})"/g,
     collapsibleNode: /^(\s*)"(\w+)"\s*:\s*([{\[])/,
     collapsedMarker: /^(\s*)"(\w+)"\s*:\s*([{\[])\.\.\.([\]\}])/
   };
@@ -113,6 +90,21 @@ class GeoJsonEditor extends HTMLElement {
     this.updatePlaceholderContent();
   }
 
+  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;
+    }
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
 
@@ -124,15 +116,6 @@ class GeoJsonEditor extends HTMLElement {
       this.updatePlaceholderContent();
     } else if (name === 'dark-selector') {
       this.updateThemeCSS();
-    } else if (name === 'feature-collection') {
-      this.updatePrefixSuffix();
-    } else if (name === 'auto-format') {
-      // When auto-format is enabled, format the current content
-      const textarea = this.shadowRoot?.getElementById('textarea');
-      if (textarea && textarea.value && this.autoFormat) {
-        this.autoFormatContent();
-        this.updateHighlight();
-      }
     }
   }
 
@@ -150,21 +133,13 @@ class GeoJsonEditor extends HTMLElement {
     return this.getAttribute('placeholder') || '';
   }
 
-  get autoFormat() {
-    return this.hasAttribute('auto-format');
-  }
-
-  get featureCollection() {
-    return this.hasAttribute('feature-collection');
-  }
-
-  // Internal getters for prefix/suffix based on feature-collection mode
+  // Always in FeatureCollection mode - prefix/suffix are constant
   get prefix() {
-    return this.featureCollection ? GeoJsonEditor.FEATURE_COLLECTION_PREFIX : '';
+    return '{"type": "FeatureCollection", "features": [';
   }
-
+  
   get suffix() {
-    return this.featureCollection ? GeoJsonEditor.FEATURE_COLLECTION_SUFFIX : '';
+    return ']}';
   }
 
   render() {
@@ -194,9 +169,6 @@ class GeoJsonEditor extends HTMLElement {
           position: relative;
           width: 100%;
           height: 400px;
-          font-family: 'Courier New', Courier, monospace;
-          font-size: 13px;
-          line-height: 1.5;
           border-radius: 4px;
           overflow: hidden;
         }
@@ -227,18 +199,15 @@ class GeoJsonEditor extends HTMLElement {
           position: relative;
           width: 100%;
           flex: 1;
-          background: var(--bg-color);
+          background: var(--bg-color, #ffffff);
           display: flex;
-          font-family: 'Courier New', Courier, monospace;
-          font-size: 13px;
-          line-height: 1.5;
         }
 
         .gutter {
           width: 24px;
           height: 100%;
-          background: var(--gutter-bg);
-          border-right: 1px solid var(--gutter-border);
+          background: var(--gutter-bg, #f0f0f0);
+          border-right: 1px solid var(--gutter-border, #e0e0e0);
           overflow: hidden;
           flex-shrink: 0;
           position: relative;
@@ -280,10 +249,10 @@ class GeoJsonEditor extends HTMLElement {
         .collapse-button {
           width: 12px;
           height: 12px;
-          background: var(--control-bg);
-          border: 1px solid var(--control-border);
+          background: var(--control-bg, #e8e8e8);
+          border: 1px solid var(--control-border, #c0c0c0);
           border-radius: 2px;
-          color: var(--control-color);
+          color: var(--control-color, #000080);
           font-size: 8px;
           font-weight: bold;
           cursor: pointer;
@@ -296,11 +265,42 @@ class GeoJsonEditor extends HTMLElement {
         }
 
         .collapse-button:hover {
-          background: var(--control-bg);
-          border-color: var(--control-color);
+          background: var(--control-bg, #e8e8e8);
+          border-color: var(--control-color, #000080);
           transform: scale(1.1);
         }
 
+        .visibility-button {
+          width: 14px;
+          height: 14px;
+          background: transparent;
+          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;
+        }
+
+        /* Hidden feature lines - grayed out */
+        .line-hidden {
+          opacity: 0.35;
+          filter: grayscale(50%);
+        }
+
         .color-picker-popup {
           position: absolute;
           background: #2d2d30;
@@ -331,17 +331,12 @@ class GeoJsonEditor extends HTMLElement {
           width: 100%;
           height: 100%;
           padding: 8px 12px;
-          font-family: 'Courier New', Courier, monospace;
-          font-size: 13px;
-          font-weight: normal;
-          font-style: normal;
-          line-height: 1.5;
           white-space: pre-wrap;
           word-wrap: break-word;
           overflow: auto;
           pointer-events: none;
           z-index: 1;
-          color: var(--text-color);
+          color: var(--text-color, #000000);
         }
 
         .highlight-layer::-webkit-scrollbar {
@@ -360,18 +355,12 @@ class GeoJsonEditor extends HTMLElement {
           outline: none;
           background: transparent;
           color: transparent;
-          caret-color: var(--caret-color);
-          font-family: 'Courier New', Courier, monospace;
-          font-size: 13px;
-          font-weight: normal;
-          font-style: normal;
-          line-height: 1.5;
+          caret-color: var(--caret-color, #000);
           white-space: pre-wrap;
           word-wrap: break-word;
           resize: none;
           overflow: auto;
           z-index: 2;
-          box-sizing: border-box;
         }
 
         textarea::selection {
@@ -389,11 +378,6 @@ class GeoJsonEditor extends HTMLElement {
           width: 100%;
           height: 100%;
           padding: 8px 12px;
-          font-family: 'Courier New', Courier, monospace;
-          font-size: 13px;
-          font-weight: normal;
-          font-style: normal;
-          line-height: 1.5;
           white-space: pre-wrap;
           word-wrap: break-word;
           color: #6a6a6a;
@@ -407,74 +391,116 @@ class GeoJsonEditor extends HTMLElement {
           opacity: 0.6;
         }
 
-        /* Syntax highlighting colors */
+        /* Syntax highlighting colors - IntelliJ Light defaults */
         .json-key {
-          color: var(--json-key);
+          color: var(--json-key, #660e7a);
         }
 
         .json-string {
-          color: var(--json-string);
+          color: var(--json-string, #008000);
         }
 
         .json-number {
-          color: var(--json-number);
+          color: var(--json-number, #0000ff);
         }
 
         .json-boolean {
-          color: var(--json-boolean);
+          color: var(--json-boolean, #000080);
         }
 
         .json-null {
-          color: var(--json-null);
+          color: var(--json-null, #000080);
         }
 
         .json-punctuation {
-          color: var(--json-punct);
+          color: var(--json-punct, #000000);
         }
 
         /* GeoJSON-specific highlighting */
         .geojson-key {
-          color: var(--geojson-key);
+          color: var(--geojson-key, #660e7a);
           font-weight: 600;
         }
 
         .geojson-type {
-          color: var(--geojson-type);
+          color: var(--geojson-type, #008000);
           font-weight: 600;
         }
 
         .geojson-type-invalid {
-          color: var(--geojson-type-invalid);
+          color: var(--geojson-type-invalid, #ff0000);
           font-weight: 600;
         }
 
         .json-key-invalid {
-          color: var(--json-key-invalid);
+          color: var(--json-key-invalid, #ff0000);
+        }
+
+        /* Prefix and suffix wrapper with gutter */
+        .prefix-wrapper,
+        .suffix-wrapper {
+          display: flex;
+          flex-shrink: 0;
+          background: var(--bg-color, #ffffff);
+        }
+
+        .prefix-gutter,
+        .suffix-gutter {
+          width: 24px;
+          background: var(--gutter-bg, #f0f0f0);
+          border-right: 1px solid var(--gutter-border, #e0e0e0);
+          flex-shrink: 0;
         }
 
-        /* Prefix and suffix styling */
         .editor-prefix,
         .editor-suffix {
+          flex: 1;
           padding: 4px 12px;
-          color: var(--text-color);
-          background: var(--bg-color);
+          color: var(--text-color, #000000);
+          background: var(--bg-color, #ffffff);
           user-select: none;
           white-space: pre-wrap;
           word-wrap: break-word;
-          flex-shrink: 0;
-          font-family: 'Courier New', Courier, monospace;
-          font-size: 13px;
-          line-height: 1.5;
           opacity: 0.6;
-          border-left: 3px solid rgba(102, 126, 234, 0.5);
         }
 
-        .editor-prefix {
+        .prefix-wrapper {
           border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
 
-        .editor-suffix {
+        .suffix-wrapper {
           border-top: 1px solid rgba(255, 255, 255, 0.1);
+          position: relative;
+        }
+
+        /* Clear button in suffix area */
+        .clear-btn {
+          position: absolute;
+          right: 0.5rem;
+          top: 50%;
+          transform: translateY(-50%);
+          background: transparent;
+          border: none;
+          color: var(--text-color, #000000);
+          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;
+          box-sizing: border-box;
+          transition: opacity 0.2s, background 0.2s;
+        }
+        .clear-btn:hover {
+          opacity: 0.7;
+          background: rgba(255, 255, 255, 0.1);
+        }
+        .clear-btn[hidden] {
+          display: none;
         }
 
         /* Scrollbar styling - WebKit (Chrome, Safari, Edge) */
@@ -484,28 +510,31 @@ class GeoJsonEditor extends HTMLElement {
         }
 
         textarea::-webkit-scrollbar-track {
-          background: var(--control-bg);
+          background: var(--control-bg, #e8e8e8);
         }
 
         textarea::-webkit-scrollbar-thumb {
-          background: var(--control-border);
+          background: var(--control-border, #c0c0c0);
           border-radius: 5px;
         }
 
         textarea::-webkit-scrollbar-thumb:hover {
-          background: var(--control-color);
+          background: var(--control-color, #000080);
         }
 
         /* Scrollbar styling - Firefox */
         textarea {
           scrollbar-width: thin;
-          scrollbar-color: var(--control-border) var(--control-bg);
+          scrollbar-color: var(--control-border, #c0c0c0) var(--control-bg, #e8e8e8);
         }
       </style>
     `;
 
     const template = `
-      <div class="editor-prefix" id="editorPrefix"></div>
+      <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>
@@ -522,7 +551,11 @@ class GeoJsonEditor extends HTMLElement {
           ></textarea>
         </div>
       </div>
-      <div class="editor-suffix" id="editorSuffix"></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>
     `;
 
     this.shadowRoot.innerHTML = styles + template;
@@ -546,10 +579,8 @@ class GeoJsonEditor extends HTMLElement {
 
       clearTimeout(this.highlightTimer);
       this.highlightTimer = setTimeout(() => {
-        // Auto-format if enabled and JSON is valid
-        if (this.autoFormat) {
-          this.autoFormatContentWithCursor();
-        }
+        // Auto-format JSON content
+        this.autoFormatContentWithCursor();
         this.updateHighlight();
         this.emitChange();
       }, 150);
@@ -563,10 +594,8 @@ class GeoJsonEditor extends HTMLElement {
       // Use a short delay to let the paste complete
       setTimeout(() => {
         this.updatePlaceholderVisibility();
-        // Auto-format if enabled and JSON is valid
-        if (this.autoFormat) {
-          this.autoFormatContentWithCursor();
-        }
+        // Auto-format JSON content
+        this.autoFormatContentWithCursor();
         this.updateHighlight();
         this.emitChange();
         // Auto-collapse coordinates after paste
@@ -577,6 +606,14 @@ class GeoJsonEditor extends HTMLElement {
     // Gutter clicks (color indicators 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;
+      }
+
       if (e.target.classList.contains('color-indicator')) {
         const line = parseInt(e.target.dataset.line);
         const color = e.target.dataset.color;
@@ -611,6 +648,12 @@ class GeoJsonEditor extends HTMLElement {
       this.handleCutWithCollapsedContent(e);
     });
 
+    // Clear button
+    const clearBtn = this.shadowRoot.getElementById('clearBtn');
+    clearBtn.addEventListener('click', () => {
+      this.removeAll();
+    });
+
     // Update readonly state
     this.updateReadonly();
   }
@@ -625,14 +668,20 @@ class GeoJsonEditor extends HTMLElement {
     if (textarea) {
       textarea.disabled = this.readonly;
     }
+    // Hide clear button in readonly mode
+    const clearBtn = this.shadowRoot.getElementById('clearBtn');
+    if (clearBtn) {
+      clearBtn.hidden = this.readonly;
+    }
   }
 
   escapeHtml(text) {
     if (!text) return '';
+    const R = GeoJsonEditor.REGEX;
     return text
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;');
+      .replace(R.ampersand, '&amp;')
+      .replace(R.lessThan, '&lt;')
+      .replace(R.greaterThan, '&gt;');
   }
 
   updatePlaceholderVisibility() {
@@ -656,8 +705,8 @@ class GeoJsonEditor extends HTMLElement {
     if (textarea && textarea.value !== newValue) {
       textarea.value = newValue || '';
 
-      // Apply auto-format if enabled
-      if (this.autoFormat && newValue) {
+      // Auto-format JSON content
+      if (newValue) {
         try {
           const prefix = this.prefix;
           const suffix = this.suffix;
@@ -709,24 +758,13 @@ class GeoJsonEditor extends HTMLElement {
     const prefixEl = this.shadowRoot.getElementById('editorPrefix');
     const suffixEl = this.shadowRoot.getElementById('editorSuffix');
 
+    // Always show prefix/suffix (always in FeatureCollection mode)
     if (prefixEl) {
-      if (this.prefix) {
-        prefixEl.textContent = this.prefix;
-        prefixEl.style.display = 'block';
-      } else {
-        prefixEl.textContent = '';
-        prefixEl.style.display = 'none';
-      }
+      prefixEl.textContent = this.prefix;
     }
 
     if (suffixEl) {
-      if (this.suffix) {
-        suffixEl.textContent = this.suffix;
-        suffixEl.style.display = 'block';
-      } else {
-        suffixEl.textContent = '';
-        suffixEl.style.display = 'none';
-      }
+      suffixEl.textContent = this.suffix;
     }
   }
 
@@ -738,8 +776,14 @@ class GeoJsonEditor extends HTMLElement {
 
     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, toggles } = this.highlightJSON(text);
+    const { highlighted, colors, toggles } = this.highlightJSON(text, hiddenRanges);
 
     highlightLayer.innerHTML = highlighted;
     this.colorPositions = colors;
@@ -749,7 +793,7 @@ class GeoJsonEditor extends HTMLElement {
     this.updateGutter();
   }
 
-  highlightJSON(text) {
+  highlightJSON(text, hiddenRanges = []) {
     if (!text.trim()) {
       return { highlighted: '', colors: [], toggles: [] };
     }
@@ -762,6 +806,11 @@ class GeoJsonEditor extends HTMLElement {
     // 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;
@@ -804,7 +853,14 @@ class GeoJsonEditor extends HTMLElement {
 
       // Highlight the line with context
       const context = contextMap.get(lineIndex);
-      highlightedLines.push(this.highlightSyntax(line, context));
+      let highlightedLine = this.highlightSyntax(line, context);
+
+      // Wrap hidden lines with .line-hidden class
+      if (isLineHidden(lineIndex)) {
+        highlightedLine = `<span class="line-hidden">${highlightedLine}</span>`;
+      }
+
+      highlightedLines.push(highlightedLine);
     });
 
     return {
@@ -849,8 +905,8 @@ class GeoJsonEditor extends HTMLElement {
     const contextStack = [];       // Stack of {context, isArray}
     let pendingContext = null;     // Context for next object/array
 
-    // Determine root context based on feature-collection mode
-    const rootContext = this.featureCollection ? 'Feature' : null;
+    // Root context is always 'Feature' (always in FeatureCollection mode)
+    const rootContext = 'Feature';
 
     for (let i = 0; i < lines.length; i++) {
       const line = lines[i];
@@ -862,37 +918,61 @@ class GeoJsonEditor extends HTMLElement {
       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];
 
-        // Check for key that changes context: "keyName":
+        // Handle escape sequences
+        if (escape) {
+          escape = false;
+          continue;
+        }
+        if (char === '\\' && inString) {
+          escape = true;
+          continue;
+        }
+
+        // Track string boundaries
         if (char === '"') {
-          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];
+          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;
             }
-            j += keyMatch[0].length - 1;  // Skip past the key
-            continue;
-          }
-        }
 
-        // Check for type value to refine context: "type": "Point"
-        if (char === '"' && contextStack.length > 0) {
-          const typeMatch = line.substring(0, j).match(/"type"\s*:\s*$/);
-          if (typeMatch) {
-            const valueMatch = line.substring(j).match(/^"([^"]+)"/);
-            if (valueMatch && GeoJsonEditor.GEOJSON_TYPES_ALL.includes(valueMatch[1])) {
-              // Update current context to the specific type
-              const currentCtx = contextStack[contextStack.length - 1];
-              if (currentCtx) {
-                currentCtx.context = valueMatch[1];
+            // 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(/^"([^"\\]*(?:\\.[^"\\]*)*)"/);
+                if (valueMatch && GeoJsonEditor.GEOJSON_TYPES_ALL.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;
               }
             }
           }
+          inString = !inString;
+          continue;
         }
 
+        // Skip everything inside strings (brackets, etc.)
+        if (inString) continue;
+
         // Opening bracket - push context
         if (char === '{' || char === '[') {
           let newContext;
@@ -900,10 +980,8 @@ class GeoJsonEditor extends HTMLElement {
             newContext = pendingContext;
             pendingContext = null;
           } else if (contextStack.length === 0) {
-            // Root level
             newContext = rootContext;
           } else {
-            // Inherit from parent if in array
             const parent = contextStack[contextStack.length - 1];
             if (parent && parent.isArray) {
               newContext = parent.context;
@@ -967,7 +1045,7 @@ class GeoJsonEditor extends HTMLElement {
       .replace(R.lessThan, '&lt;')
       .replace(R.greaterThan, '&gt;')
       // All JSON keys - validate against context
-      .replace(R.jsonKey, (match, key) => {
+      .replace(R.jsonKey, (_, key) => {
         // Inside properties - all keys are regular user keys
         if (context === 'properties') {
           return `<span class="json-key">"${key}"</span>:`;
@@ -984,7 +1062,7 @@ class GeoJsonEditor extends HTMLElement {
         }
       })
       // GeoJSON "type" values - validate based on context
-      .replace(R.typeValue, (match, typeValue) => {
+      .replace(R.typeValue, (_, typeValue) => {
         if (isTypeValid(typeValue)) {
           return `<span class="geojson-key">"type"</span>: <span class="geojson-type">"${typeValue}"</span>`;
         } else {
@@ -1056,48 +1134,9 @@ class GeoJsonEditor extends HTMLElement {
 
       const indent = match[1];
       const openBracket = match[3];
-      const closeBracket = openBracket === '{' ? '}' : ']';
-
-      // Check if bracket closes on same line - can't collapse
-      if (this.bracketClosesOnSameLine(currentLine, openBracket)) return;
 
-      // Find closing bracket in following lines
-      let depth = 1;
-      let endLine = line;
-      const content = [];
-
-      for (let i = line + 1; i < lines.length; i++) {
-        const scanLine = lines[i];
-
-        for (const char of scanLine) {
-          if (char === openBracket) depth++;
-          if (char === closeBracket) depth--;
-        }
-
-        content.push(scanLine);
-
-        if (depth === 0) {
-          endLine = i;
-          break;
-        }
-      }
-
-      // Store the original data with unique key
-      const uniqueKey = `${line}-${nodeKey}`;
-      this.collapsedData.set(uniqueKey, {
-        originalLine: currentLine,
-        content: content,
-        indent: indent.length,
-        nodeKey: nodeKey  // Store nodeKey for later use
-      });
-
-      // Replace with marker
-      const beforeBracket = currentLine.substring(0, currentLine.indexOf(openBracket));
-      const hasTrailingComma = lines[endLine] && lines[endLine].trim().endsWith(',');
-      lines[line] = `${beforeBracket}${openBracket}...${closeBracket}${hasTrailingComma ? ',' : ''}`;
-
-      // Remove content lines
-      lines.splice(line + 1, endLine - line);
+      // Use common collapse helper
+      if (this._performCollapse(lines, line, nodeKey, indent, openBracket) === 0) return;
     }
 
     // Update textarea
@@ -1123,48 +1162,9 @@ class GeoJsonEditor extends HTMLElement {
         if (nodeKey === 'coordinates') {
           const indent = match[1];
           const openBracket = match[3];
-          const closeBracket = openBracket === '{' ? '}' : ']';
-
-          // Skip if bracket closes on same line
-          if (this.bracketClosesOnSameLine(line, openBracket)) continue;
 
-          // Find closing bracket in following lines
-          let depth = 1;
-          let endLine = i;
-          const content = [];
-
-          for (let j = i + 1; j < lines.length; j++) {
-            const scanLine = lines[j];
-
-            for (const char of scanLine) {
-              if (char === openBracket) depth++;
-              if (char === closeBracket) depth--;
-            }
-
-            content.push(scanLine);
-
-            if (depth === 0) {
-              endLine = j;
-              break;
-            }
-          }
-
-          // Store the original data with unique key
-          const uniqueKey = `${i}-${nodeKey}`;
-          this.collapsedData.set(uniqueKey, {
-            originalLine: line,
-            content: content,
-            indent: indent.length,
-            nodeKey: nodeKey
-          });
-
-          // Replace with marker
-          const beforeBracket = line.substring(0, line.indexOf(openBracket));
-          const hasTrailingComma = lines[endLine] && lines[endLine].trim().endsWith(',');
-          lines[i] = `${beforeBracket}${openBracket}...${closeBracket}${hasTrailingComma ? ',' : ''}`;
-
-          // Remove content lines
-          lines.splice(i + 1, endLine - i);
+          // Use common collapse helper
+          this._performCollapse(lines, i, nodeKey, indent, openBracket);
         }
       }
     }
@@ -1193,25 +1193,33 @@ class GeoJsonEditor extends HTMLElement {
     // Clear gutter
     gutterContent.textContent = '';
 
-    // Create a map of line -> elements (color, collapse button, or both)
+    // Create a map of line -> elements (color, collapse button, visibility button)
     const lineElements = new Map();
 
-    // Add color indicators
-    this.colorPositions.forEach(({ line, color, attributeName }) => {
+    // Helper to ensure line entry exists
+    const ensureLine = (line) => {
       if (!lineElements.has(line)) {
-        lineElements.set(line, { colors: [], buttons: [] });
+        lineElements.set(line, { colors: [], buttons: [], visibilityButtons: [] });
       }
-      lineElements.get(line).colors.push({ color, attributeName });
+      return lineElements.get(line);
+    };
+
+    // Add color indicators
+    this.colorPositions.forEach(({ line, color, attributeName }) => {
+      ensureLine(line).colors.push({ color, attributeName });
     });
 
     // Add collapse buttons
     this.nodeTogglePositions.forEach(({ line, nodeKey, isCollapsed }) => {
-      if (!lineElements.has(line)) {
-        lineElements.set(line, { colors: [], buttons: [] });
-      }
-      lineElements.get(line).buttons.push({ 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 });
+    }
+
     // Create gutter lines with DocumentFragment (single DOM update)
     const fragment = document.createDocumentFragment();
 
@@ -1220,6 +1228,16 @@ class GeoJsonEditor extends HTMLElement {
       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 = '👁';
+        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');
@@ -1251,9 +1269,15 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   showColorPicker(indicator, line, currentColor, attributeName) {
-    // Remove existing picker
+    // Remove existing picker and clean up its listener
     const existing = document.querySelector('.geojson-color-picker-input');
-    if (existing) existing.remove();
+    if (existing) {
+      // Clean up the stored listener before removing
+      if (existing._closeListener) {
+        document.removeEventListener('click', existing._closeListener, true);
+      }
+      existing.remove();
+    }
 
     // Create small color input positioned at the indicator
     const colorInput = document.createElement('input');
@@ -1287,11 +1311,14 @@ class GeoJsonEditor extends HTMLElement {
     // Close picker when clicking anywhere else
     const closeOnClickOutside = (e) => {
       if (e.target !== colorInput && !colorInput.contains(e.target)) {
-        colorInput.remove();
         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);
 
@@ -1353,8 +1380,15 @@ class GeoJsonEditor extends HTMLElement {
       return; // No collapsed content, use default copy behavior
     }
 
-    // Replace collapsed markers with real content
-    const expandedText = this.expandCollapsedMarkersInText(selectedText, start);
+    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);
+    }
 
     // Put expanded text in clipboard
     e.preventDefault();
@@ -1365,6 +1399,7 @@ class GeoJsonEditor extends HTMLElement {
     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 = [];
@@ -1374,17 +1409,43 @@ class GeoJsonEditor extends HTMLElement {
 
       // Check if this line has a collapsed marker
       if (line.includes('{...}') || line.includes('[...]')) {
-        // Find the collapsed node for this line
+        const match = line.match(R.collapsedMarker);
+        if (match) {
+          const nodeKey = match[2]; // Extract nodeKey from the marker
+          const exactKey = `${absoluteLineNum}-${nodeKey}`;
+
+          // Try exact key match first
+          if (this.collapsedData.has(exactKey)) {
+            const collapsed = this.collapsedData.get(exactKey);
+            expandedLines.push(collapsed.originalLine);
+            expandedLines.push(...collapsed.content);
+            return;
+          }
+
+          // Fallback: search by line number and nodeKey
+          let found = false;
+          for (const [key, collapsed] of this.collapsedData.entries()) {
+            if (key.endsWith(`-${nodeKey}`)) {
+              expandedLines.push(collapsed.originalLine);
+              expandedLines.push(...collapsed.content);
+              found = true;
+              break;
+            }
+          }
+          if (found) return;
+        }
+
+        // Fallback: search by line number only
         let found = false;
-        this.collapsedData.forEach((collapsed, key) => {
+        for (const [key, collapsed] of this.collapsedData.entries()) {
           const collapsedLineNum = parseInt(key.split('-')[0]);
           if (collapsedLineNum === absoluteLineNum) {
-            // Replace with original line and all collapsed content
             expandedLines.push(collapsed.originalLine);
             expandedLines.push(...collapsed.content);
             found = true;
+            break;
           }
-        });
+        }
         if (!found) {
           expandedLines.push(line);
         }
@@ -1428,7 +1489,10 @@ class GeoJsonEditor extends HTMLElement {
 
     // Try to parse
     try {
-      const parsed = JSON.parse(fullValue);
+      let parsed = JSON.parse(fullValue);
+
+      // Filter out hidden features before emitting
+      parsed = this.filterHiddenFeatures(parsed);
 
       // Validate GeoJSON types
       const validationErrors = this.validateGeoJSON(parsed);
@@ -1467,6 +1531,178 @@ class GeoJsonEditor extends HTMLElement {
     }
   }
 
+  // Filter hidden features from parsed GeoJSON before emitting events
+  filterHiddenFeatures(parsed) {
+    if (!parsed || this.hiddenFeatures.size === 0) return parsed;
+
+    if (parsed.type === 'FeatureCollection' && Array.isArray(parsed.features)) {
+      // Filter features array
+      const visibleFeatures = parsed.features.filter(feature => {
+        const key = this.getFeatureKey(feature);
+        return !this.hiddenFeatures.has(key);
+      });
+      return { ...parsed, features: visibleFeatures };
+    } else if (parsed.type === 'Feature') {
+      // Single feature - check if hidden
+      const key = this.getFeatureKey(parsed);
+      if (this.hiddenFeatures.has(key)) {
+        // Return empty FeatureCollection when single feature is hidden
+        return { type: 'FeatureCollection', features: [] };
+      }
+    }
+
+    return parsed;
+  }
+
+  // ========== 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 + first coordinates
+    const geomType = feature.geometry?.type || 'null';
+    const coords = JSON.stringify(feature.geometry?.coordinates || []).slice(0, 100);
+    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);
+    }
+    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);
+
+      let features = [];
+      if (parsed.type === 'FeatureCollection' && Array.isArray(parsed.features)) {
+        features = parsed.features;
+      } else if (parsed.type === 'Feature') {
+        features = [parsed];
+      }
+
+      // 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 the opening brace
+          let startLine = i;
+          for (let j = i; j >= 0; j--) {
+            if (lines[j].includes('{')) {
+              startLine = j;
+              break;
+            }
+          }
+          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;
+            }
+          }
+
+          // Get the feature key
+          if (featureIndex < features.length) {
+            currentFeatureKey = this.getFeatureKey(features[featureIndex]);
+          }
+        } 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;
+          }
+        }
+      }
+    } catch (e) {
+      // Invalid JSON, can't extract feature ranges
+    }
+  }
+
+  // Get hidden line ranges for highlighting
+  getHiddenLineRanges() {
+    const ranges = [];
+    for (const [featureKey, range] of this.featureRanges) {
+      if (this.hiddenFeatures.has(featureKey)) {
+        ranges.push(range);
+      }
+    }
+    return ranges;
+  }
+
+  // ========== GeoJSON Validation ==========
+
   // Validate GeoJSON structure and types
   // context: 'root' | 'geometry' | 'properties'
   validateGeoJSON(obj, path = '', context = 'root') {
@@ -1520,19 +1756,131 @@ class GeoJsonEditor extends HTMLElement {
     return errors;
   }
 
-  // Helper: Check if bracket closes on same line
-  bracketClosesOnSameLine(line, openBracket) {
+  // 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];
+
+      if (escape) {
+        escape = false;
+        continue;
+      }
+
+      if (char === '\\' && inString) {
+        escape = true;
+        continue;
+      }
+
+      if (char === '"') {
+        inString = !inString;
+        continue;
+      }
+
+      if (!inString) {
+        if (char === openBracket) openCount++;
+        if (char === closeBracket) closeCount++;
+      }
+    }
+
+    return { open: openCount, close: closeCount };
+  }
+
+  // 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;
+  }
+
+  // Helper: Find closing bracket line starting from startLine
+  // Returns { endLine, content: string[] } or null if not found
+  _findClosingBracket(lines, startLine, openBracket) {
     let depth = 1;
-    for (const char of restOfLine) {
-      if (char === openBracket) depth++;
-      if (char === closeBracket) depth--;
-      if (depth === 0) return true;
+    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: [] };
+      }
     }
-    return false;
+
+    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 };
+      }
+    }
+
+    return null; // Not found (malformed JSON)
+  }
+
+  /**
+   * 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
+   */
+  _performCollapse(lines, lineIndex, nodeKey, indent, openBracket) {
+    const line = lines[lineIndex];
+    const closeBracket = openBracket === '{' ? '}' : ']';
+
+    // Skip if bracket closes on same line
+    if (this.bracketClosesOnSameLine(line, openBracket)) return 0;
+
+    // Find closing bracket
+    const result = this._findClosingBracket(lines, lineIndex, openBracket);
+    if (!result) return 0;
+
+    const { endLine, content } = result;
+
+    // Store the original data with unique key
+    const uniqueKey = `${lineIndex}-${nodeKey}`;
+    this.collapsedData.set(uniqueKey, {
+      originalLine: line,
+      content: content,
+      indent: indent.length,
+      nodeKey: nodeKey
+    });
+
+    // 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 ? ',' : ''}`;
+
+    // Remove content lines
+    const linesRemoved = endLine - lineIndex;
+    lines.splice(lineIndex + 1, linesRemoved);
+
+    return linesRemoved;
   }
 
   // Helper: Expand all collapsed markers and return expanded content
@@ -1649,34 +1997,6 @@ class GeoJsonEditor extends HTMLElement {
     }
   }
 
-  autoFormatContent() {
-    const textarea = this.shadowRoot.getElementById('textarea');
-
-    // 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);
-
-    try {
-      const formattedContent = this.formatJSONContent(content);
-
-      if (formattedContent !== content) {
-        this.collapsedData.clear();
-        textarea.value = formattedContent;
-
-        if (collapsedNodes.length > 0) {
-          this.reapplyCollapsed(collapsedNodes);
-        }
-      }
-    } catch (e) {
-      // Invalid JSON, don't format
-    }
-  }
-
   reapplyCollapsed(collapsedNodes) {
     const textarea = this.shadowRoot.getElementById('textarea');
     const lines = textarea.value.split('\n');
@@ -1708,50 +2028,11 @@ class GeoJsonEditor extends HTMLElement {
 
           // Only collapse if this occurrence should be collapsed
           if (currentOccurrence <= collapseMap.get(key)) {
-          const indent = match[1];
-          const openBracket = match[3];
-          const closeBracket = openBracket === '{' ? '}' : ']';
-
-          // Skip if closes on same line
-          if (this.bracketClosesOnSameLine(line, openBracket)) continue;
-
-          // Find closing bracket
-          let depth = 1;
-          let endLine = i;
-          const content = [];
-
-          for (let j = i + 1; j < lines.length; j++) {
-            const scanLine = lines[j];
+            const indent = match[1];
+            const openBracket = match[3];
 
-            for (const char of scanLine) {
-              if (char === openBracket) depth++;
-              if (char === closeBracket) depth--;
-            }
-
-            content.push(scanLine);
-
-            if (depth === 0) {
-              endLine = j;
-              break;
-            }
-          }
-
-          // Store with unique key
-          const uniqueKey = `${i}-${nodeKey}`;
-          this.collapsedData.set(uniqueKey, {
-            originalLine: line,
-            content: content,
-            indent: indent.length,
-            nodeKey: nodeKey
-          });
-
-          // Replace with marker
-          const beforeBracket = line.substring(0, line.indexOf(openBracket));
-          const hasTrailingComma = lines[endLine] && lines[endLine].trim().endsWith(',');
-          lines[i] = `${beforeBracket}${openBracket}...${closeBracket}${hasTrailingComma ? ',' : ''}`;
-
-          // Remove content lines
-          lines.splice(i + 1, endLine - i);
+            // Use common collapse helper
+            this._performCollapse(lines, i, nodeKey, indent, openBracket);
           }
         }
       }
@@ -1780,77 +2061,41 @@ class GeoJsonEditor extends HTMLElement {
   // Generate and inject theme CSS based on dark selector
   updateThemeCSS() {
     const darkSelector = this.getAttribute('dark-selector') || '.dark';
-
-    // Parse selector to create CSS rule for dark theme
     const darkRule = this.parseSelectorToHostRule(darkSelector);
-    // Light theme is the default (no selector = light)
-    const lightRule = ':host';
 
     // Find or create theme style element
     let themeStyle = this.shadowRoot.getElementById('theme-styles');
     if (!themeStyle) {
       themeStyle = document.createElement('style');
       themeStyle.id = 'theme-styles';
-      // Insert at the beginning of shadow root to ensure it's before static styles
       this.shadowRoot.insertBefore(themeStyle, this.shadowRoot.firstChild);
     }
 
-    // Generate CSS with theme variables (light first as default, then dark overrides)
-    const css = `
-      ${lightRule} {
-        --bg-color: ${this.themes.light.background};
-        --text-color: ${this.themes.light.textColor};
-        --caret-color: ${this.themes.light.caretColor};
-        --gutter-bg: ${this.themes.light.gutterBackground};
-        --gutter-border: ${this.themes.light.gutterBorder};
-        --json-key: ${this.themes.light.jsonKey};
-        --json-string: ${this.themes.light.jsonString};
-        --json-number: ${this.themes.light.jsonNumber};
-        --json-boolean: ${this.themes.light.jsonBoolean};
-        --json-null: ${this.themes.light.jsonNull};
-        --json-punct: ${this.themes.light.jsonPunctuation};
-        --control-color: ${this.themes.light.controlColor};
-        --control-bg: ${this.themes.light.controlBg};
-        --control-border: ${this.themes.light.controlBorder};
-        --geojson-key: ${this.themes.light.geojsonKey};
-        --geojson-type: ${this.themes.light.geojsonType};
-        --geojson-type-invalid: ${this.themes.light.geojsonTypeInvalid};
-        --json-key-invalid: ${this.themes.light.jsonKeyInvalid};
-      }
+    // Helper to generate CSS variables from theme object
+    const generateVars = (themeObj) => {
+      return Object.entries(themeObj || {})
+        .map(([key, value]) => `--${GeoJsonEditor._toKebabCase(key)}: ${value};`)
+        .join('\n        ');
+    };
 
-      ${darkRule} {
-        --bg-color: ${this.themes.dark.background};
-        --text-color: ${this.themes.dark.textColor};
-        --caret-color: ${this.themes.dark.caretColor};
-        --gutter-bg: ${this.themes.dark.gutterBackground};
-        --gutter-border: ${this.themes.dark.gutterBorder};
-        --json-key: ${this.themes.dark.jsonKey};
-        --json-string: ${this.themes.dark.jsonString};
-        --json-number: ${this.themes.dark.jsonNumber};
-        --json-boolean: ${this.themes.dark.jsonBoolean};
-        --json-null: ${this.themes.dark.jsonNull};
-        --json-punct: ${this.themes.dark.jsonPunctuation};
-        --control-color: ${this.themes.dark.controlColor};
-        --control-bg: ${this.themes.dark.controlBg};
-        --control-border: ${this.themes.dark.controlBorder};
-        --geojson-key: ${this.themes.dark.geojsonKey};
-        --geojson-type: ${this.themes.dark.geojsonType};
-        --geojson-type-invalid: ${this.themes.dark.geojsonTypeInvalid};
-        --json-key-invalid: ${this.themes.dark.jsonKeyInvalid};
-      }
-    `;
+    // 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 darkVars = generateVars(darkTheme);
+
+    let css = '';
+    if (lightVars) {
+      css += `:host {\n        ${lightVars}\n      }\n`;
+    }
+    // Dark theme is always generated (selector is configurable)
+    css += `${darkRule} {\n        ${darkVars}\n      }`;
 
     themeStyle.textContent = css;
   }
 
   // Public API: Theme management
-  getTheme() {
-    return {
-      dark: { ...this.themes.dark },
-      light: { ...this.themes.light }
-    };
-  }
-
   setTheme(theme) {
     if (theme.dark) {
       this.themes.dark = { ...this.themes.dark, ...theme.dark };
@@ -1858,19 +2103,278 @@ class GeoJsonEditor extends HTMLElement {
     if (theme.light) {
       this.themes.light = { ...this.themes.light, ...theme.light };
     }
-
-    // Regenerate CSS with new theme values
     this.updateThemeCSS();
   }
 
   resetTheme() {
-    // Reset to defaults
-    this.themes = {
-      dark: { ...GeoJsonEditor.DEFAULT_THEMES.dark },
-      light: { ...GeoJsonEditor.DEFAULT_THEMES.light }
-    };
+    this.themes = { dark: {}, light: {} };
     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));
+    }
+    return (idx < 0 || idx >= length) ? -1 : idx;
+  }
+
+  /**
+   * 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 [];
+    }
+  }
+
+  /**
+   * Update textarea with features array and trigger all updates
+   * @param {Array} features - Array of feature objects
+   * @private
+   */
+  _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();
+      });
+    }
+
+    // Emit change event
+    this.emitChange();
+  }
+
+  /**
+   * 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;
+    }
+
+    if (Array.isArray(feature)) {
+      errors.push('Feature cannot be an array');
+      return errors;
+    }
+
+    // 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}"`);
+    }
+
+    // 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_TYPES_GEOMETRY.includes(feature.geometry.type)) {
+          errors.push(`Invalid geometry type "${feature.geometry.type}" (expected: ${GeoJsonEditor.GEOJSON_TYPES_GEOMETRY.join(', ')})`);
+        }
+
+        // Check geometry has coordinates (except GeometryCollection)
+        if (feature.geometry.type !== 'GeometryCollection' && !('coordinates' in feature.geometry)) {
+          errors.push('Geometry must have a "coordinates" property');
+        }
+
+        // GeometryCollection must have geometries array
+        if (feature.geometry.type === 'GeometryCollection' && !Array.isArray(feature.geometry.geometries)) {
+          errors.push('GeometryCollection must have a "geometries" array');
+        }
+      }
+    }
+
+    // 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;
+  }
+
+  /**
+   * 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(', ')}`);
+      }
+    });
+
+    if (allErrors.length > 0) {
+      throw new Error(`Invalid features: ${allErrors.join('; ')}`);
+    }
+
+    this._setFeatures(features);
+  }
+
+  /**
+   * 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();
+    features.push(feature);
+    this._setFeatures(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);
+
+    features.splice(idx, 0, feature);
+    this._setFeatures(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;
+  }
+
+  /**
+   * Remove all features
+   * @returns {Array} Array of removed features
+   */
+  removeAll() {
+    const removed = this._parseFeatures();
+    this._setFeatures([]);
+    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;
+
+    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();
+  }
 }
 
 // Register the custom element