@softwarity/geojson-editor 1.0.5 → 1.0.7

package/src/geojson-editor.js

@@ -17,68 +17,43 @@ 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', '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', 'default-properties'];
+  }
 
-  // FeatureCollection wrapper constants
-  static FEATURE_COLLECTION_PREFIX = '{"type": "FeatureCollection", "features": [';
-  static FEATURE_COLLECTION_SUFFIX = ']}';
+  // Parsed default properties rules (cache)
+  _defaultPropertiesRules = null;
 
-  // SVG icon for visibility toggle (single icon, style changes based on state)
-  static ICON_EYE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>';
+  // 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 = {
@@ -101,6 +76,31 @@ class GeoJsonEditor extends HTMLElement {
     collapsedMarker: /^(\s*)"(\w+)"\s*:\s*([{\[])\.\.\.([\]\}])/
   };
 
+  /**
+   * 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
+   */
+  _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 };
+      }
+    }
+
+    return null;
+  }
+
   connectedCallback() {
     this.render();
     this.setupEventListeners();
@@ -111,6 +111,9 @@ class GeoJsonEditor extends HTMLElement {
     // 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);
@@ -118,6 +121,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;
 
@@ -129,8 +147,9 @@ class GeoJsonEditor extends HTMLElement {
       this.updatePlaceholderContent();
     } else if (name === 'dark-selector') {
       this.updateThemeCSS();
-    } else if (name === 'feature-collection') {
-      this.updatePrefixSuffix();
+    } else if (name === 'default-properties') {
+      // Re-parse the default properties rules
+      this._parseDefaultProperties();
     }
   }
 
@@ -148,38 +167,139 @@ class GeoJsonEditor extends HTMLElement {
     return this.getAttribute('placeholder') || '';
   }
 
-  get featureCollection() {
-    return this.hasAttribute('feature-collection');
+  // Always in FeatureCollection mode - prefix/suffix are constant
+  get prefix() {
+    return '{"type": "FeatureCollection", "features": [';
+  }
+  
+  get suffix() {
+    return ']}';
   }
 
-  // Internal getters for prefix/suffix based on feature-collection mode
-  get prefix() {
-    return this.featureCollection ? GeoJsonEditor.FEATURE_COLLECTION_PREFIX : '';
+  get defaultProperties() {
+    return this.getAttribute('default-properties') || '';
   }
 
-  get suffix() {
-    return this.featureCollection ? GeoJsonEditor.FEATURE_COLLECTION_SUFFIX : '';
+  /**
+   * 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}]
+   */
+  _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 = [];
+    }
+
+    return this._defaultPropertiesRules;
+  }
+
+  /**
+   * Check if a feature matches a condition.
+   * Supports dot notation for nested properties:
+   * - "geometry.type": "Polygon"
+   * - "properties.category": "airport"
+   */
+  _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;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Get a nested value from an object using dot notation.
+   * E.g., _getNestedValue(feature, "geometry.type") => "Polygon"
+   */
+  _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;
+  }
+
+  /**
+   * Apply default properties to a single feature.
+   * Only adds properties that don't already exist.
+   * Returns a new feature object (doesn't mutate original).
+   */
+  _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);
+      }
+    }
+
+    if (Object.keys(propsToApply).length === 0) return feature;
+
+    // Apply only properties that don't already exist
+    const existingProps = feature.properties || {};
+    const newProps = { ...existingProps };
+    let hasChanges = false;
+
+    for (const [key, value] of Object.entries(propsToApply)) {
+      if (!(key in existingProps)) {
+        newProps[key] = value;
+        hasChanges = true;
+      }
+    }
+
+    if (!hasChanges) return feature;
+
+    return { ...feature, properties: newProps };
   }
 
   render() {
     const styles = `
       <style>
-        /* Global reset with exact values to prevent external CSS interference */
-        :host *,
-        :host *::before,
-        :host *::after {
+        /* Base reset - protect against inherited styles */
+        :host *, :host *::before, :host *::after {
           box-sizing: border-box;
-          font-family: 'Courier New', Courier, monospace;
-          font-size: 13px;
-          font-weight: normal;
-          font-style: normal;
+          font: normal normal 13px/1.5 'Courier New', Courier, monospace;
           font-variant: normal;
-          line-height: 1.5;
           letter-spacing: 0;
+          word-spacing: 0;
           text-transform: none;
           text-decoration: none;
           text-indent: 0;
-          word-spacing: 0;
         }
 
         :host {
@@ -188,9 +308,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;
         }
@@ -198,41 +315,27 @@ class GeoJsonEditor extends HTMLElement {
         :host([readonly]) .editor-wrapper::after {
           content: '';
           position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
+          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
-          );
+          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;
-        }
+        :host([readonly]) textarea { cursor: text; }
 
         .editor-wrapper {
           position: relative;
           width: 100%;
           flex: 1;
-          background: var(--bg-color);
+          background: var(--bg-color, #fff);
           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;
@@ -256,42 +359,37 @@ class GeoJsonEditor extends HTMLElement {
           justify-content: center;
         }
 
-        .color-indicator {
+        .color-indicator, .collapse-button {
           width: 12px;
           height: 12px;
           border-radius: 2px;
-          border: 1px solid #555;
           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;
         }
 
         .collapse-button {
-          width: 12px;
-          height: 12px;
-          background: var(--control-bg);
-          border: 1px solid var(--control-border);
-          border-radius: 2px;
-          color: var(--control-color);
+          padding-top: 1px;
+          background: var(--control-bg, #e8e8e8);
+          border: 1px solid var(--control-border, #c0c0c0);
+          color: var(--control-color, #000080);
           font-size: 8px;
           font-weight: bold;
-          cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
-          transition: all 0.1s;
-          flex-shrink: 0;
           user-select: none;
         }
-
         .collapse-button:hover {
-          background: var(--control-bg);
-          border-color: var(--control-color);
+          border-color: var(--control-color, #000080);
           transform: scale(1.1);
         }
 
@@ -299,8 +397,8 @@ class GeoJsonEditor extends HTMLElement {
           width: 14px;
           height: 14px;
           background: transparent;
+          color: var(--control-color, #000080);
           border: none;
-          color: var(--control-color);
           cursor: pointer;
           display: flex;
           align-items: center;
@@ -309,45 +407,12 @@ class GeoJsonEditor extends HTMLElement {
           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; }
 
-        .visibility-button:hover {
-          opacity: 1;
-          transform: scale(1.1);
-        }
-
-        .visibility-button.hidden {
-          opacity: 0.4;
-        }
-
-        .visibility-button svg {
-          width: 12px;
-          height: 12px;
-          fill: currentColor;
-        }
-
-        /* Hidden feature lines - grayed out */
-        .line-hidden {
-          opacity: 0.35;
-          filter: grayscale(50%);
-        }
-
-        .color-picker-popup {
-          position: absolute;
-          background: #2d2d30;
-          border: 1px solid #555;
-          border-radius: 4px;
-          padding: 8px;
-          z-index: 1000;
-          box-shadow: 0 4px 12px rgba(0,0,0,0.5);
-        }
-
-        .color-picker-popup input[type="color"] {
-          width: 150px;
-          height: 30px;
-          border: none;
-          cursor: pointer;
-        }
+        .line-hidden { opacity: 0.35; filter: grayscale(50%); }
 
         .editor-content {
           position: relative;
@@ -355,188 +420,118 @@ class GeoJsonEditor extends HTMLElement {
           overflow: hidden;
         }
 
-        .highlight-layer {
+        .highlight-layer, textarea, .placeholder-layer {
           position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
+          inset: 0;
           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;
+        }
+
+        .highlight-layer {
           overflow: auto;
           pointer-events: none;
           z-index: 1;
-          color: var(--text-color);
-        }
-
-        .highlight-layer::-webkit-scrollbar {
-          display: none;
+          color: var(--text-color, #000);
         }
+        .highlight-layer::-webkit-scrollbar { display: none; }
 
         textarea {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          padding: 8px 12px;
           margin: 0;
           border: none;
           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;
-          white-space: pre-wrap;
-          word-wrap: break-word;
+          caret-color: var(--caret-color, #000);
           resize: none;
           overflow: auto;
           z-index: 2;
-          box-sizing: border-box;
-        }
-
-        textarea::selection {
-          background: rgba(51, 153, 255, 0.3);
-        }
-
-        textarea::placeholder {
-          color: transparent;
         }
+        textarea::selection { background: rgba(51,153,255,0.3); }
+        textarea::placeholder { color: transparent; }
+        textarea:disabled { cursor: not-allowed; opacity: 0.6; }
 
         .placeholder-layer {
-          position: absolute;
-          top: 0;
-          left: 0;
-          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;
           pointer-events: none;
           z-index: 0;
           overflow: hidden;
         }
 
-        textarea:disabled {
-          cursor: not-allowed;
-          opacity: 0.6;
-        }
-
-        /* Syntax highlighting colors */
-        .json-key {
-          color: var(--json-key);
-        }
-
-        .json-string {
-          color: var(--json-string);
-        }
-
-        .json-number {
-          color: var(--json-number);
-        }
-
-        .json-boolean {
-          color: var(--json-boolean);
-        }
-
-        .json-null {
-          color: var(--json-null);
-        }
-
-        .json-punctuation {
-          color: var(--json-punct);
-        }
-
-        /* GeoJSON-specific highlighting */
-        .geojson-key {
-          color: var(--geojson-key);
-          font-weight: 600;
-        }
+        .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-type {
-          color: var(--geojson-type);
-          font-weight: 600;
-        }
+        .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; }
 
-        .geojson-type-invalid {
-          color: var(--geojson-type-invalid);
-          font-weight: 600;
+        .prefix-wrapper, .suffix-wrapper {
+          display: flex;
+          flex-shrink: 0;
+          background: var(--bg-color, #fff);
         }
 
-        .json-key-invalid {
-          color: var(--json-key-invalid);
+        .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 {
+        .editor-prefix, .editor-suffix {
+          flex: 1;
           padding: 4px 12px;
-          color: var(--text-color);
-          background: var(--bg-color);
+          color: var(--text-color, #000);
+          background: var(--bg-color, #fff);
           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 {
-          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
+        .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; }
 
-        .editor-suffix {
-          border-top: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        /* Scrollbar styling - WebKit (Chrome, Safari, Edge) */
-        textarea::-webkit-scrollbar {
-          width: 10px;
-          height: 10px;
-        }
-
-        textarea::-webkit-scrollbar-track {
-          background: var(--control-bg);
-        }
-
-        textarea::-webkit-scrollbar-thumb {
-          background: var(--control-border);
-          border-radius: 5px;
-        }
-
-        textarea::-webkit-scrollbar-thumb:hover {
-          background: var(--control-color);
+        .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;
         }
+        .clear-btn:hover { opacity: 0.7; background: rgba(255,255,255,0.1); }
+        .clear-btn[hidden] { display: none; }
 
-        /* Scrollbar styling - Firefox */
-        textarea {
-          scrollbar-width: thin;
-          scrollbar-color: var(--control-border) var(--control-bg);
-        }
+        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="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>
@@ -553,7 +548,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;
@@ -646,6 +645,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();
   }
@@ -660,14 +665,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() {
@@ -694,32 +705,18 @@ class GeoJsonEditor extends HTMLElement {
       // Auto-format JSON content
       if (newValue) {
         try {
-          const prefix = this.prefix;
-          const suffix = this.suffix;
-
-          // Check if prefix ends with [ and suffix starts with ]
-          const prefixEndsWithBracket = prefix.trimEnd().endsWith('[');
-          const suffixStartsWithBracket = suffix.trimStart().startsWith(']');
-
-          if (prefixEndsWithBracket && suffixStartsWithBracket) {
-            // 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 = '';
-            }
-          } else if (!prefix && !suffix) {
-            // No prefix/suffix - format directly
-            const parsed = JSON.parse(newValue);
-            textarea.value = JSON.stringify(parsed, null, 2);
+          // 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 = '';
           }
-          // else: keep as-is for complex cases
         } catch (e) {
           // Invalid JSON, keep as-is
         }
@@ -744,24 +741,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;
     }
   }
 
@@ -867,10 +853,12 @@ class GeoJsonEditor extends HTMLElement {
     };
   }
 
-  // GeoJSON type constants
-  static GEOJSON_TYPES_FEATURE = ['Feature', 'FeatureCollection'];
-  static GEOJSON_TYPES_GEOMETRY = ['Point', 'MultiPoint', 'LineString', 'MultiLineString', 'Polygon', 'MultiPolygon', 'GeometryCollection'];
-  static GEOJSON_TYPES_ALL = [...GeoJsonEditor.GEOJSON_TYPES_FEATURE, ...GeoJsonEditor.GEOJSON_TYPES_GEOMETRY];
+  // GeoJSON type constants (consolidated)
+  static GEOJSON = {
+    FEATURE_TYPES: ['Feature', 'FeatureCollection'],
+    GEOMETRY_TYPES: ['Point', 'MultiPoint', 'LineString', 'MultiLineString', 'Polygon', 'MultiPolygon', 'GeometryCollection'],
+    ALL_TYPES: ['Feature', 'FeatureCollection', 'Point', 'MultiPoint', 'LineString', 'MultiLineString', 'Polygon', 'MultiPolygon', 'GeometryCollection']
+  };
 
   // Valid keys per context (null = any key is valid)
   static VALID_KEYS_BY_CONTEXT = {
@@ -902,8 +890,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];
@@ -915,37 +903,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.ALL_TYPES.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;
@@ -953,10 +965,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;
@@ -1002,12 +1012,12 @@ class GeoJsonEditor extends HTMLElement {
       // Unknown context - don't validate (could be inside misspelled properties, etc.)
       if (!context) return true;
       if (context === 'properties') return true;  // Any type in properties
-      if (context === 'geometry' || GeoJsonEditor.GEOJSON_TYPES_GEOMETRY.includes(context)) {
-        return GeoJsonEditor.GEOJSON_TYPES_GEOMETRY.includes(typeValue);
+      if (context === 'geometry' || GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.includes(context)) {
+        return GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.includes(typeValue);
       }
       // Only validate as GeoJSON type in known Feature/FeatureCollection context
       if (context === 'Feature' || context === 'FeatureCollection') {
-        return GeoJsonEditor.GEOJSON_TYPES_ALL.includes(typeValue);
+        return GeoJsonEditor.GEOJSON.ALL_TYPES.includes(typeValue);
       }
       return true;  // Unknown context - accept any type
     };
@@ -1020,7 +1030,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>:`;
@@ -1037,7 +1047,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 {
@@ -1066,35 +1076,16 @@ class GeoJsonEditor extends HTMLElement {
     const hasMarker = currentLine.includes('{...}') || currentLine.includes('[...]');
 
     if (hasMarker) {
-      // Expand: find the correct collapsed data by searching for this nodeKey
-      let foundKey = null;
-      let foundData = null;
-
-      // Try exact match first
-      const exactKey = `${line}-${nodeKey}`;
-      if (this.collapsedData.has(exactKey)) {
-        foundKey = exactKey;
-        foundData = this.collapsedData.get(exactKey);
-      } else {
-        // Search for any key with this nodeKey (line numbers may have shifted)
-        for (const [key, data] of this.collapsedData.entries()) {
-          if (data.nodeKey === nodeKey) {
-            // Check indent to distinguish between multiple nodes with same name
-            const currentIndent = currentLine.match(/^(\s*)/)[1].length;
-            if (data.indent === currentIndent) {
-              foundKey = key;
-              foundData = data;
-              break;
-            }
-          }
-        }
-      }
+      // Expand: find the correct collapsed data
+      const currentIndent = currentLine.match(/^(\s*)/)[1].length;
+      const found = this._findCollapsedData(line, nodeKey, currentIndent);
 
-      if (!foundKey || !foundData) {
+      if (!found) {
         return;
       }
 
-      const {originalLine, content} = foundData;
+      const { key: foundKey, data: foundData } = found;
+      const { originalLine, content } = foundData;
 
       // Restore original line and content
       lines[line] = originalLine;
@@ -1109,48 +1100,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
@@ -1176,48 +1128,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);
         }
       }
     }
@@ -1285,7 +1198,7 @@ class GeoJsonEditor extends HTMLElement {
       elements.visibilityButtons.forEach(({ featureKey, isHidden }) => {
         const button = document.createElement('button');
         button.className = 'visibility-button' + (isHidden ? ' hidden' : '');
-        button.innerHTML = GeoJsonEditor.ICON_EYE;
+        button.textContent = '👁';
         button.dataset.featureKey = featureKey;
         button.title = isHidden ? 'Show feature in events' : 'Hide feature from events';
         gutterLine.appendChild(button);
@@ -1322,9 +1235,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');
@@ -1358,11 +1277,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);
 
@@ -1424,8 +1346,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();
@@ -1436,6 +1365,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 = [];
@@ -1445,20 +1375,31 @@ class GeoJsonEditor extends HTMLElement {
 
       // Check if this line has a collapsed marker
       if (line.includes('{...}') || line.includes('[...]')) {
-        // Find the collapsed node for this line
-        let found = false;
-        this.collapsedData.forEach((collapsed, key) => {
-          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;
+        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;
+            }
           }
-        });
-        if (!found) {
-          expandedLines.push(line);
         }
+
+        // Line not found in collapsed data, keep as-is
+        expandedLines.push(line);
       } else {
         expandedLines.push(line);
       }
@@ -1492,10 +1433,8 @@ class GeoJsonEditor extends HTMLElement {
     // Expand ALL collapsed nodes to get full content
     const editorContent = this.expandAllCollapsed(textarea.value);
 
-    // Build complete value with prefix/suffix
-    const prefix = this.prefix;
-    const suffix = this.suffix;
-    const fullValue = prefix + editorContent + suffix;
+    // Build complete value with prefix/suffix (fixed FeatureCollection wrapper)
+    const fullValue = this.prefix + editorContent + this.suffix;
 
     // Try to parse
     try {
@@ -1605,11 +1544,6 @@ class GeoJsonEditor extends HTMLElement {
     this.emitChange();
   }
 
-  // Check if a feature is hidden
-  isFeatureHidden(featureKey) {
-    return this.hiddenFeatures.has(featureKey);
-  }
-
   // Parse JSON and extract feature ranges (line numbers for each Feature)
   updateFeatureRanges() {
     const textarea = this.shadowRoot.getElementById('textarea');
@@ -1663,22 +1597,16 @@ class GeoJsonEditor extends HTMLElement {
           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
+          // 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];
-            // Skip the first { we already counted
-            let skipFirst = (k === startLine);
-            for (const char of scanLine) {
-              if (char === '{') {
-                if (skipFirst) {
-                  skipFirst = false;
-                } else {
-                  braceDepth++;
-                }
-              } else if (char === '}') {
-                braceDepth--;
-              }
+            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;
             }
           }
 
@@ -1687,11 +1615,9 @@ class GeoJsonEditor extends HTMLElement {
             currentFeatureKey = this.getFeatureKey(features[featureIndex]);
           }
         } else if (inFeature) {
-          // Count braces
-          for (const char of line) {
-            if (char === '{') braceDepth++;
-            else if (char === '}') braceDepth--;
-          }
+          // 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) {
@@ -1741,13 +1667,13 @@ class GeoJsonEditor extends HTMLElement {
       if (typeof typeValue === 'string') {
         if (context === 'geometry') {
           // In geometry: must be a geometry type
-          if (!GeoJsonEditor.GEOJSON_TYPES_GEOMETRY.includes(typeValue)) {
-            errors.push(`Invalid geometry type "${typeValue}" at ${path || 'root'} (expected: ${GeoJsonEditor.GEOJSON_TYPES_GEOMETRY.join(', ')})`);
+          if (!GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.includes(typeValue)) {
+            errors.push(`Invalid geometry type "${typeValue}" at ${path || 'root'} (expected: ${GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.join(', ')})`);
           }
         } else {
           // At root or in features: must be Feature or FeatureCollection
-          if (!GeoJsonEditor.GEOJSON_TYPES_FEATURE.includes(typeValue)) {
-            errors.push(`Invalid type "${typeValue}" at ${path || 'root'} (expected: ${GeoJsonEditor.GEOJSON_TYPES_FEATURE.join(', ')})`);
+          if (!GeoJsonEditor.GEOJSON.FEATURE_TYPES.includes(typeValue)) {
+            errors.push(`Invalid type "${typeValue}" at ${path || 'root'} (expected: ${GeoJsonEditor.GEOJSON.FEATURE_TYPES.join(', ')})`);
           }
         }
       }
@@ -1779,19 +1705,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
@@ -1811,20 +1849,10 @@ class GeoJsonEditor extends HTMLElement {
 
         const nodeKey = match[2];
         const currentIndent = match[1].length;
-        const exactKey = `${i}-${nodeKey}`;
+        const found = this._findCollapsedData(i, nodeKey, currentIndent);
 
-        let foundKey = this.collapsedData.has(exactKey) ? exactKey : null;
-        if (!foundKey) {
-          for (const [key, data] of this.collapsedData.entries()) {
-            if (data.nodeKey === nodeKey && data.indent === currentIndent) {
-              foundKey = key;
-              break;
-            }
-          }
-        }
-
-        if (foundKey) {
-          const {originalLine, content: nodeContent} = this.collapsedData.get(foundKey);
+        if (found) {
+          const { data: { originalLine, content: nodeContent } } = found;
           lines[i] = originalLine;
           lines.splice(i + 1, 0, ...nodeContent);
           expanded = true;
@@ -1838,27 +1866,20 @@ class GeoJsonEditor extends HTMLElement {
     return content;
   }
 
-  // Helper: Format JSON content respecting prefix/suffix
+  // Helper: Format JSON content (always in FeatureCollection mode)
+  // Also applies default properties to features if configured
   formatJSONContent(content) {
-    const prefix = this.prefix;
-    const suffix = this.suffix;
-    const prefixEndsWithBracket = prefix.trimEnd().endsWith('[');
-    const suffixStartsWithBracket = suffix.trimStart().startsWith(']');
-
-    if (prefixEndsWithBracket && suffixStartsWithBracket) {
-      const wrapped = '[' + content + ']';
-      const parsed = JSON.parse(wrapped);
-      const formatted = JSON.stringify(parsed, null, 2);
-      const lines = formatted.split('\n');
-      return lines.length > 2 ? lines.slice(1, -1).join('\n') : '';
-    } else if (!prefix && !suffix) {
-      const parsed = JSON.parse(content);
-      return JSON.stringify(parsed, null, 2);
-    } else {
-      const fullValue = prefix + content + suffix;
-      JSON.parse(fullValue); // Validate only
-      return 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));
     }
+    
+    const formatted = JSON.stringify(parsed, null, 2);
+    const lines = formatted.split('\n');
+    return lines.length > 2 ? lines.slice(1, -1).join('\n') : '';
   }
 
   autoFormatContentWithCursor() {
@@ -1908,34 +1929,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');
@@ -1967,50 +1960,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];
-
-            for (const char of scanLine) {
-              if (char === openBracket) depth++;
-              if (char === closeBracket) depth--;
-            }
-
-            content.push(scanLine);
+            const indent = match[1];
+            const openBracket = match[3];
 
-            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);
           }
         }
       }
@@ -2039,77 +1993,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 };
@@ -2117,19 +2035,282 @@ 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.GEOMETRY_TYPES.includes(feature.geometry.type)) {
+          errors.push(`Invalid geometry type "${feature.geometry.type}" (expected: ${GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.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('; ')}`);
+    }
+
+    // Apply default properties to each feature
+    const featuresWithDefaults = features.map(f => this._applyDefaultPropertiesToFeature(f));
+    this._setFeatures(featuresWithDefaults);
+  }
+
+  /**
+   * 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);
+  }
+
+  /**
+   * 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);
+  }
+
+  /**
+   * 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