@softwarity/geojson-editor 1.0.6 → 1.0.8

package/src/geojson-editor.js

@@ -6,6 +6,7 @@ class GeoJsonEditor extends HTMLElement {
     // Internal state
     this.collapsedData = new Map(); // nodeKey -> {originalLines: string[], indent: number}
     this.colorPositions = []; // {line, color}
+    this.booleanPositions = []; // {line, value, attributeName}
     this.nodeTogglePositions = []; // {line, nodeKey, isCollapsed, indent}
     this.hiddenFeatures = new Set(); // Set of feature keys (hidden from events)
     this.featureRanges = new Map(); // featureKey -> {startLine, endLine, featureIndex}
@@ -22,9 +23,12 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ['readonly', 'value', 'placeholder', 'dark-selector'];
+    return ['readonly', 'value', 'placeholder', 'dark-selector', 'default-properties'];
   }
 
+  // Parsed default properties rules (cache)
+  _defaultPropertiesRules = null;
+
   // Helper: Convert camelCase to kebab-case
   static _toKebabCase(str) {
     return str.replace(/([A-Z])/g, '-$1').toLowerCase();
@@ -69,10 +73,36 @@ class GeoJsonEditor extends HTMLElement {
     punctuation: /([{}[\],])/g,
     // Highlighting detection
     colorInLine: /"([\w-]+)"\s*:\s*"(#[0-9a-fA-F]{6})"/g,
+    booleanInLine: /"([\w-]+)"\s*:\s*(true|false)/g,
     collapsibleNode: /^(\s*)"(\w+)"\s*:\s*([{\[])/,
     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();
@@ -83,6 +113,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);
@@ -116,6 +149,9 @@ class GeoJsonEditor extends HTMLElement {
       this.updatePlaceholderContent();
     } else if (name === 'dark-selector') {
       this.updateThemeCSS();
+    } else if (name === 'default-properties') {
+      // Re-parse the default properties rules
+      this._parseDefaultProperties();
     }
   }
 
@@ -142,25 +178,130 @@ class GeoJsonEditor extends HTMLElement {
     return ']}';
   }
 
+  get defaultProperties() {
+    return this.getAttribute('default-properties') || '';
+  }
+
+  /**
+   * 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 {
@@ -176,30 +317,19 @@ 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, #ffffff);
+          background: var(--bg-color, #fff);
           display: flex;
         }
 
@@ -231,41 +361,62 @@ class GeoJsonEditor extends HTMLElement {
           justify-content: center;
         }
 
-        .color-indicator {
+        .color-indicator, .collapse-button, .boolean-checkbox {
           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;
         }
 
+        .boolean-checkbox {
+          appearance: none;
+          -webkit-appearance: none;
+          background: transparent;
+          border: 1.5px solid var(--control-border, #c0c0c0);
+          border-radius: 2px;
+          margin: 0;
+          position: relative;
+        }
+        .boolean-checkbox:checked {
+          border-color: var(--control-color, #000080);
+        }
+        .boolean-checkbox:checked::after {
+          content: '✔';
+          color: var(--control-color, #000080);
+          font-size: 11px;
+          font-weight: bold;
+          position: absolute;
+          top: -3px;
+          right: -1px;
+        }
+        .boolean-checkbox:hover {
+          transform: scale(1.2);
+          border-color: var(--control-color, #000080);
+        }
+
         .collapse-button {
-          width: 12px;
-          height: 12px;
+          padding-top: 1px;
           background: var(--control-bg, #e8e8e8);
           border: 1px solid var(--control-border, #c0c0c0);
-          border-radius: 2px;
           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, #e8e8e8);
           border-color: var(--control-color, #000080);
           transform: scale(1.1);
         }
@@ -274,6 +425,7 @@ class GeoJsonEditor extends HTMLElement {
           width: 14px;
           height: 14px;
           background: transparent;
+          color: var(--control-color, #000080);
           border: none;
           cursor: pointer;
           display: flex;
@@ -285,38 +437,10 @@ class GeoJsonEditor extends HTMLElement {
           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.15);
-        }
-
-        .visibility-button.hidden {
-          opacity: 0.35;
-        }
-
-        /* Hidden feature lines - grayed out */
-        .line-hidden {
-          opacity: 0.35;
-          filter: grayscale(50%);
-        }
-
-        .color-picker-popup {
-          position: absolute;
-          background: #2d2d30;
-          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;
@@ -324,156 +448,82 @@ 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;
           white-space: pre-wrap;
           word-wrap: break-word;
+        }
+
+        .highlight-layer {
           overflow: auto;
           pointer-events: none;
           z-index: 1;
-          color: var(--text-color, #000000);
-        }
-
-        .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, #000);
-          white-space: pre-wrap;
-          word-wrap: break-word;
           resize: none;
           overflow: auto;
           z-index: 2;
         }
-
-        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;
-          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 - IntelliJ Light defaults */
-        .json-key {
-          color: var(--json-key, #660e7a);
-        }
-
-        .json-string {
-          color: var(--json-string, #008000);
-        }
+        .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); }
 
-        .json-number {
-          color: var(--json-number, #0000ff);
-        }
+        .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; }
 
-        .json-boolean {
-          color: var(--json-boolean, #000080);
-        }
-
-        .json-null {
-          color: var(--json-null, #000080);
-        }
-
-        .json-punctuation {
-          color: var(--json-punct, #000000);
-        }
-
-        /* GeoJSON-specific highlighting */
-        .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, #ff0000);
-          font-weight: 600;
-        }
-
-        .json-key-invalid {
-          color: var(--json-key-invalid, #ff0000);
-        }
-
-        /* Prefix and suffix wrapper with gutter */
-        .prefix-wrapper,
-        .suffix-wrapper {
+        .prefix-wrapper, .suffix-wrapper {
           display: flex;
           flex-shrink: 0;
-          background: var(--bg-color, #ffffff);
+          background: var(--bg-color, #fff);
         }
 
-        .prefix-gutter,
-        .suffix-gutter {
+        .prefix-gutter, .suffix-gutter {
           width: 24px;
           background: var(--gutter-bg, #f0f0f0);
           border-right: 1px solid var(--gutter-border, #e0e0e0);
           flex-shrink: 0;
         }
 
-        .editor-prefix,
-        .editor-suffix {
+        .editor-prefix, .editor-suffix {
           flex: 1;
           padding: 4px 12px;
-          color: var(--text-color, #000000);
-          background: var(--bg-color, #ffffff);
+          color: var(--text-color, #000);
+          background: var(--bg-color, #fff);
           user-select: none;
           white-space: pre-wrap;
           word-wrap: break-word;
           opacity: 0.6;
         }
 
-        .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;
-        }
+        .prefix-wrapper { border-bottom: 1px solid rgba(255,255,255,0.1); }
+        .suffix-wrapper { border-top: 1px solid rgba(255,255,255,0.1); position: relative; }
 
-        /* Clear button in suffix area */
         .clear-btn {
           position: absolute;
           right: 0.5rem;
@@ -481,7 +531,7 @@ class GeoJsonEditor extends HTMLElement {
           transform: translateY(-50%);
           background: transparent;
           border: none;
-          color: var(--text-color, #000000);
+          color: var(--text-color, #000);
           opacity: 0.3;
           cursor: pointer;
           font-size: 0.65rem;
@@ -492,41 +542,16 @@ class GeoJsonEditor extends HTMLElement {
           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) */
-        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);
-        }
+        .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, #c0c0c0) var(--control-bg, #e8e8e8);
-        }
+        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>
     `;
 
@@ -603,7 +628,7 @@ class GeoJsonEditor extends HTMLElement {
       }, 10);
     });
 
-    // Gutter clicks (color indicators and collapse buttons)
+    // Gutter clicks (color indicators, boolean checkboxes, and collapse buttons)
     const gutterContent = this.shadowRoot.getElementById('gutterContent');
     gutterContent.addEventListener('click', (e) => {
       // Check for visibility button (may click on SVG inside button)
@@ -619,6 +644,11 @@ class GeoJsonEditor extends HTMLElement {
         const color = e.target.dataset.color;
         const attributeName = e.target.dataset.attributeName;
         this.showColorPicker(e.target, line, color, attributeName);
+      } else if (e.target.classList.contains('boolean-checkbox')) {
+        const line = parseInt(e.target.dataset.line);
+        const attributeName = e.target.dataset.attributeName;
+        const newValue = e.target.checked;
+        this.updateBooleanValue(line, newValue, attributeName);
       } else if (e.target.classList.contains('collapse-button')) {
         const nodeKey = e.target.dataset.nodeKey;
         const line = parseInt(e.target.dataset.line);
@@ -708,32 +738,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
         }
@@ -783,10 +799,11 @@ class GeoJsonEditor extends HTMLElement {
     const hiddenRanges = this.getHiddenLineRanges();
 
     // Parse and highlight
-    const { highlighted, colors, toggles } = this.highlightJSON(text, hiddenRanges);
+    const { highlighted, colors, booleans, toggles } = this.highlightJSON(text, hiddenRanges);
 
     highlightLayer.innerHTML = highlighted;
     this.colorPositions = colors;
+    this.booleanPositions = booleans;
     this.nodeTogglePositions = toggles;
 
     // Update gutter with color indicators
@@ -795,11 +812,12 @@ class GeoJsonEditor extends HTMLElement {
 
   highlightJSON(text, hiddenRanges = []) {
     if (!text.trim()) {
-      return { highlighted: '', colors: [], toggles: [] };
+      return { highlighted: '', colors: [], booleans: [], toggles: [] };
     }
 
     const lines = text.split('\n');
     const colors = [];
+    const booleans = [];
     const toggles = [];
     let highlightedLines = [];
 
@@ -824,6 +842,17 @@ class GeoJsonEditor extends HTMLElement {
         });
       }
 
+      // Detect boolean values in properties
+      R.booleanInLine.lastIndex = 0; // Reset for global regex
+      let booleanMatch;
+      while ((booleanMatch = R.booleanInLine.exec(line)) !== null) {
+        booleans.push({
+          line: lineIndex,
+          value: booleanMatch[2] === 'true',  // The boolean value
+          attributeName: booleanMatch[1]  // The attribute name
+        });
+      }
+
       // Detect collapsible nodes (all nodes are collapsible)
       const nodeMatch = line.match(R.collapsibleNode);
       if (nodeMatch) {
@@ -866,28 +895,21 @@ class GeoJsonEditor extends HTMLElement {
     return {
       highlighted: highlightedLines.join('\n'),
       colors,
+      booleans,
       toggles
     };
   }
 
-  // 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 = {
+    GEOMETRY_TYPES: ['Point', 'MultiPoint', 'LineString', 'MultiLineString', 'Polygon', 'MultiPolygon'],
+  };
 
   // Valid keys per context (null = any key is valid)
   static VALID_KEYS_BY_CONTEXT = {
-    Feature: ['type', 'geometry', 'properties', 'id', 'bbox'],
-    FeatureCollection: ['type', 'features', 'bbox', 'properties'],
-    Point: ['type', 'coordinates', 'bbox'],
-    MultiPoint: ['type', 'coordinates', 'bbox'],
-    LineString: ['type', 'coordinates', 'bbox'],
-    MultiLineString: ['type', 'coordinates', 'bbox'],
-    Polygon: ['type', 'coordinates', 'bbox'],
-    MultiPolygon: ['type', 'coordinates', 'bbox'],
-    GeometryCollection: ['type', 'geometries', 'bbox'],
+    Feature: ['type', 'geometry', 'properties', 'id'],
     properties: null,  // Any key valid in properties
-    geometry: ['type', 'coordinates', 'geometries', 'bbox'],  // Generic geometry context
+    geometry: ['type', 'coordinates'],  // Generic geometry context
   };
 
   // Keys that change context for their value
@@ -895,7 +917,6 @@ class GeoJsonEditor extends HTMLElement {
     geometry: 'geometry',
     properties: 'properties',
     features: 'Feature',      // Array of Features
-    geometries: 'geometry',   // Array of geometries
   };
 
   // Build context map for each line by analyzing JSON structure
@@ -954,7 +975,8 @@ class GeoJsonEditor extends HTMLElement {
               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 validTypes = ['Feature', ...GeoJsonEditor.GEOJSON.GEOMETRY_TYPES];
+                if (valueMatch && validTypes.includes(valueMatch[1])) {
                   const currentCtx = contextStack[contextStack.length - 1];
                   if (currentCtx) {
                     currentCtx.context = valueMatch[1];
@@ -1005,7 +1027,8 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   // All known GeoJSON structural keys (always valid in GeoJSON)
-  static GEOJSON_STRUCTURAL_KEYS = ['type', 'geometry', 'properties', 'features', 'geometries', 'coordinates', 'bbox', 'id', 'crs'];
+  // GeoJSON structural keys that are always valid (not user properties)
+  static GEOJSON_STRUCTURAL_KEYS = ['type', 'geometry', 'properties', 'coordinates', 'id'];
 
   highlightSyntax(text, context) {
     if (!text.trim()) return '';
@@ -1024,15 +1047,15 @@ class GeoJsonEditor extends HTMLElement {
 
     // Helper to check if a type value is valid in current context
     const isTypeValid = (typeValue) => {
-      // Unknown context - don't validate (could be inside misspelled properties, etc.)
+      // Unknown context - don't validate
       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);
+      // In Feature context: accept Feature or geometry types
+      if (context === 'Feature') {
+        return typeValue === 'Feature' || GeoJsonEditor.GEOJSON.GEOMETRY_TYPES.includes(typeValue);
       }
       return true;  // Unknown context - accept any type
     };
@@ -1091,35 +1114,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;
@@ -1193,13 +1197,13 @@ class GeoJsonEditor extends HTMLElement {
     // Clear gutter
     gutterContent.textContent = '';
 
-    // Create a map of line -> elements (color, collapse button, visibility button)
+    // Create a map of line -> elements (color, boolean, collapse button, visibility button)
     const lineElements = new Map();
 
     // Helper to ensure line entry exists
     const ensureLine = (line) => {
       if (!lineElements.has(line)) {
-        lineElements.set(line, { colors: [], buttons: [], visibilityButtons: [] });
+        lineElements.set(line, { colors: [], booleans: [], buttons: [], visibilityButtons: [] });
       }
       return lineElements.get(line);
     };
@@ -1209,6 +1213,11 @@ class GeoJsonEditor extends HTMLElement {
       ensureLine(line).colors.push({ color, attributeName });
     });
 
+    // Add boolean checkboxes
+    this.booleanPositions.forEach(({ line, value, attributeName }) => {
+      ensureLine(line).booleans.push({ value, attributeName });
+    });
+
     // Add collapse buttons
     this.nodeTogglePositions.forEach(({ line, nodeKey, isCollapsed }) => {
       ensureLine(line).buttons.push({ nodeKey, isCollapsed });
@@ -1250,6 +1259,18 @@ class GeoJsonEditor extends HTMLElement {
         gutterLine.appendChild(indicator);
       });
 
+      // Add boolean checkboxes
+      elements.booleans.forEach(({ value, attributeName }) => {
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.className = 'boolean-checkbox';
+        checkbox.checked = value;
+        checkbox.dataset.line = line;
+        checkbox.dataset.attributeName = attributeName;
+        checkbox.title = `${attributeName}: ${value}`;
+        gutterLine.appendChild(checkbox);
+      });
+
       // Add collapse buttons
       elements.buttons.forEach(({ nodeKey, isCollapsed }) => {
         const button = document.createElement('div');
@@ -1345,6 +1366,19 @@ class GeoJsonEditor extends HTMLElement {
     this.emitChange();
   }
 
+  updateBooleanValue(line, newValue, attributeName) {
+    const textarea = this.shadowRoot.getElementById('textarea');
+    const lines = textarea.value.split('\n');
+
+    // Replace boolean value on the specified line for the specific attribute
+    const regex = new RegExp(`"${attributeName}"\\s*:\\s*(true|false)`);
+    lines[line] = lines[line].replace(regex, `"${attributeName}": ${newValue}`);
+
+    textarea.value = lines.join('\n');
+    this.updateHighlight();
+    this.emitChange();
+  }
+
   handleKeydownInCollapsedArea(e) {
     // Allow navigation keys
     const navigationKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', 'Tab'];
@@ -1411,44 +1445,29 @@ class GeoJsonEditor extends HTMLElement {
       if (line.includes('{...}') || line.includes('[...]')) {
         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);
+          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 line number and nodeKey
-          let found = false;
-          for (const [key, collapsed] of this.collapsedData.entries()) {
-            if (key.endsWith(`-${nodeKey}`)) {
+          // 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);
-              found = true;
-              break;
+              return;
             }
           }
-          if (found) return;
         }
 
-        // Fallback: search by line number only
-        let found = false;
-        for (const [key, collapsed] of this.collapsedData.entries()) {
-          const collapsedLineNum = parseInt(key.split('-')[0]);
-          if (collapsedLineNum === absoluteLineNum) {
-            expandedLines.push(collapsed.originalLine);
-            expandedLines.push(...collapsed.content);
-            found = true;
-            break;
-          }
-        }
-        if (!found) {
-          expandedLines.push(line);
-        }
+        // Line not found in collapsed data, keep as-is
+        expandedLines.push(line);
       } else {
         expandedLines.push(line);
       }
@@ -1482,10 +1501,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 {
@@ -1494,8 +1511,11 @@ class GeoJsonEditor extends HTMLElement {
       // Filter out hidden features before emitting
       parsed = this.filterHiddenFeatures(parsed);
 
-      // Validate GeoJSON types
-      const validationErrors = this.validateGeoJSON(parsed);
+      // Validate GeoJSON types (validate only features, not the wrapper)
+      let validationErrors = [];
+      parsed.features.forEach((feature, index) => {
+        validationErrors.push(...this.validateGeoJSON(feature, `features[${index}]`, 'root'));
+      });
 
       if (validationErrors.length > 0) {
         // Emit error event for GeoJSON validation errors
@@ -1535,23 +1555,12 @@ class GeoJsonEditor extends HTMLElement {
   filterHiddenFeatures(parsed) {
     if (!parsed || this.hiddenFeatures.size === 0) return parsed;
 
-    if (parsed.type === 'FeatureCollection' && Array.isArray(parsed.features)) {
-      // Filter features array
-      const visibleFeatures = parsed.features.filter(feature => {
-        const key = this.getFeatureKey(feature);
-        return !this.hiddenFeatures.has(key);
-      });
-      return { ...parsed, features: visibleFeatures };
-    } else if (parsed.type === 'Feature') {
-      // Single feature - check if hidden
-      const key = this.getFeatureKey(parsed);
-      if (this.hiddenFeatures.has(key)) {
-        // Return empty FeatureCollection when single feature is hidden
-        return { type: 'FeatureCollection', features: [] };
-      }
-    }
-
-    return parsed;
+    // parsed is always a FeatureCollection (from wrapper)
+    const visibleFeatures = parsed.features.filter((feature) => {
+      const key = this.getFeatureKey(feature);
+      return !this.hiddenFeatures.has(key);
+    });
+    return { ...parsed, features: visibleFeatures };
   }
 
   // ========== Feature Visibility Management ==========
@@ -1566,9 +1575,9 @@ class GeoJsonEditor extends HTMLElement {
     // 2. Use properties.id if present
     if (feature.properties?.id !== undefined) return `prop:${feature.properties.id}`;
 
-    // 3. Fallback: hash based on geometry type + first coordinates
+    // 3. Fallback: hash based on geometry type + ALL coordinates
     const geomType = feature.geometry?.type || 'null';
-    const coords = JSON.stringify(feature.geometry?.coordinates || []).slice(0, 100);
+    const coords = JSON.stringify(feature.geometry?.coordinates || []);
     return `hash:${geomType}:${this.simpleHash(coords)}`;
   }
 
@@ -1613,12 +1622,8 @@ class GeoJsonEditor extends HTMLElement {
       const fullValue = prefix + expandedText + suffix;
       const parsed = JSON.parse(fullValue);
 
-      let features = [];
-      if (parsed.type === 'FeatureCollection' && Array.isArray(parsed.features)) {
-        features = parsed.features;
-      } else if (parsed.type === 'Feature') {
-        features = [parsed];
-      }
+      // parsed is always a FeatureCollection (from wrapper)
+      const features = parsed.features;
 
       // Now find each feature's line range in the text
       const lines = text.split('\n');
@@ -1636,10 +1641,18 @@ class GeoJsonEditor extends HTMLElement {
         const isFeatureTypeLine = /"type"\s*:\s*"Feature"/.test(line);
         if (!inFeature && isFeatureTypeLine) {
           // Find the opening brace for this Feature
-          // Look backwards for the opening brace
+          // Look backwards for a line that starts with just '{' (the Feature's opening brace)
+          // Not a line like '"geometry": {' which contains other content before the brace
           let startLine = i;
           for (let j = i; j >= 0; j--) {
-            if (lines[j].includes('{')) {
+            const trimmed = lines[j].trim();
+            // Line is just '{' or '{' followed by nothing significant (opening brace only)
+            if (trimmed === '{' || trimmed === '{,') {
+              startLine = j;
+              break;
+            }
+            // Also handle case where Feature starts on same line: { "type": "Feature"
+            if (trimmed.startsWith('{') && !trimmed.includes(':')) {
               startLine = j;
               break;
             }
@@ -1718,13 +1731,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(', ')})`);
+          // At root or in features: must be Feature
+          if (typeValue !== 'Feature') {
+            errors.push(`Invalid type "${typeValue}" at ${path || 'root'} (expected: Feature)`);
           }
         }
       }
@@ -1900,20 +1913,10 @@ class GeoJsonEditor extends HTMLElement {
 
         const nodeKey = match[2];
         const currentIndent = match[1].length;
-        const exactKey = `${i}-${nodeKey}`;
-
-        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;
-            }
-          }
-        }
+        const found = this._findCollapsedData(i, nodeKey, currentIndent);
 
-        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;
@@ -1927,27 +1930,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() {
@@ -2232,19 +2228,14 @@ class GeoJsonEditor extends HTMLElement {
         // 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(', ')})`);
+        } 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)) {
+        // Check geometry has coordinates
+        if (!('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');
-        }
       }
     }
 
@@ -2281,7 +2272,9 @@ class GeoJsonEditor extends HTMLElement {
       throw new Error(`Invalid features: ${allErrors.join('; ')}`);
     }
 
-    this._setFeatures(features);
+    // Apply default properties to each feature
+    const featuresWithDefaults = features.map(f => this._applyDefaultPropertiesToFeature(f));
+    this._setFeatures(featuresWithDefaults);
   }
 
   /**
@@ -2296,7 +2289,8 @@ class GeoJsonEditor extends HTMLElement {
     }
 
     const features = this._parseFeatures();
-    features.push(feature);
+    // Apply default properties before adding
+    features.push(this._applyDefaultPropertiesToFeature(feature));
     this._setFeatures(features);
   }
 
@@ -2315,7 +2309,8 @@ class GeoJsonEditor extends HTMLElement {
     const features = this._parseFeatures();
     const idx = this._normalizeIndex(index, features.length, true);
 
-    features.splice(idx, 0, feature);
+    // Apply default properties before inserting
+    features.splice(idx, 0, this._applyDefaultPropertiesToFeature(feature));
     this._setFeatures(features);
   }