@softwarity/geojson-editor 1.0.5 → 1.0.6

package/src/geojson-editor.js

@@ -17,68 +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', '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();
+  }
 
-  // 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>';
+  // 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 = {
@@ -118,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;
 
@@ -129,8 +116,6 @@ class GeoJsonEditor extends HTMLElement {
       this.updatePlaceholderContent();
     } else if (name === 'dark-selector') {
       this.updateThemeCSS();
-    } else if (name === 'feature-collection') {
-      this.updatePrefixSuffix();
     }
   }
 
@@ -148,17 +133,13 @@ class GeoJsonEditor extends HTMLElement {
     return this.getAttribute('placeholder') || '';
   }
 
-  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() {
@@ -188,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;
         }
@@ -221,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;
@@ -274,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;
@@ -290,8 +265,8 @@ 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);
         }
 
@@ -300,7 +275,6 @@ class GeoJsonEditor extends HTMLElement {
           height: 14px;
           background: transparent;
           border: none;
-          color: var(--control-color);
           cursor: pointer;
           display: flex;
           align-items: center;
@@ -309,21 +283,16 @@ class GeoJsonEditor extends HTMLElement {
           flex-shrink: 0;
           opacity: 0.7;
           padding: 0;
+          font-size: 11px;
         }
 
         .visibility-button:hover {
           opacity: 1;
-          transform: scale(1.1);
+          transform: scale(1.15);
         }
 
         .visibility-button.hidden {
-          opacity: 0.4;
-        }
-
-        .visibility-button svg {
-          width: 12px;
-          height: 12px;
-          fill: currentColor;
+          opacity: 0.35;
         }
 
         /* Hidden feature lines - grayed out */
@@ -362,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 {
@@ -391,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 {
@@ -420,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;
@@ -438,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) */
@@ -515,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>
@@ -553,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;
@@ -646,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();
   }
@@ -660,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() {
@@ -744,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;
     }
   }
 
@@ -902,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];
@@ -915,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;
@@ -953,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;
@@ -1020,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>:`;
@@ -1037,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 {
@@ -1109,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
@@ -1176,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);
         }
       }
     }
@@ -1285,7 +1232,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 +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');
@@ -1358,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);
 
@@ -1424,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();
@@ -1436,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 = [];
@@ -1445,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);
         }
@@ -1605,11 +1595,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 +1648,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 +1666,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) {
@@ -1779,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
@@ -1908,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');
@@ -1967,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 = [];
+            const indent = match[1];
+            const openBracket = match[3];
 
-          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 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 +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 };
@@ -2117,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