@softwarity/geojson-editor 1.0.24 → 1.0.26

package/src/geojson-editor.css

@@ -11,10 +11,15 @@
 }
 
 :host {
+  /* Color scheme - inherits from parent, falls back to system preference if not set */
+  color-scheme: inherit;
+
+  /* Layout variables (internal only) */
   --line-height: 19.5px;
   --gutter-width: 50px;
   --editor-padding-y: 8px;
   --editor-padding-x: 12px;
+
   display: flex;
   flex-direction: column;
   position: relative;
@@ -39,7 +44,7 @@
   position: relative;
   width: 100%;
   flex: 1;
-  background: var(--bg-color, #fff);
+  background: var(--geojson-editor-bg-color, light-dark(#fff, #2b2b2b));
   display: flex;
   overflow: hidden;
 }
@@ -47,8 +52,8 @@
 /* ========== Gutter ========== */
 .gutter {
   width: var(--gutter-width);
-  background: var(--gutter-bg, #f0f0f0);
-  border-right: 1px solid var(--gutter-border, #e0e0e0);
+  background: var(--geojson-editor-gutter-bg, light-dark(#f0f0f0, #313335));
+  border-right: 1px solid var(--geojson-editor-gutter-border, light-dark(#e0e0e0, #3c3f41));
   overflow: hidden;
   flex-shrink: 0;
   position: relative;
@@ -90,12 +95,12 @@
   top: 0;
   bottom: 0;
   width: 3px;
-  background: var(--error-color, #dc3545);
+  background: var(--geojson-editor-error-color, light-dark(#dc3545, #ff6b68));
 }
 
 .line-number {
   font-size: 11px;
-  color: var(--gutter-text, #999);
+  color: var(--geojson-editor-gutter-text, light-dark(#999, #606366));
   user-select: none;
   min-width: 20px;
   text-align: right;
@@ -118,7 +123,7 @@
   flex-shrink: 0;
   background: transparent;
   border: none;
-  color: var(--json-punct, #a9b7c6);
+  color: var(--geojson-editor-json-punct, light-dark(#000, #a9b7c6));
   font-size: 10px;
   display: flex;
   align-items: center;
@@ -178,7 +183,7 @@
   padding: var(--editor-padding-y) var(--editor-padding-x);
   overscroll-behavior: contain; /* Prevent scroll chaining to parent */
   scrollbar-width: thin;
-  scrollbar-color: var(--control-border, #c0c0c0) var(--control-bg, #e8e8e8);
+  scrollbar-color: var(--geojson-editor-control-border, light-dark(#c0c0c0, #5a5a5a)) var(--geojson-editor-control-bg, light-dark(#e8e8e8, #3c3f41));
 }
 
 /* Scroll content - defines total scrollable height */
@@ -209,7 +214,7 @@
   position: absolute;
   width: 2px;
   height: 1em;
-  background: var(--caret-color, #000);
+  background: var(--geojson-editor-caret-color, light-dark(#000, #bbb));
   top: 0.15em;
   pointer-events: none;
   animation: cursor-blink 1s step-end infinite;
@@ -237,7 +242,7 @@
   position: absolute;
   height: 100%;
   top: 0;
-  background: var(--selection-color, rgba(51, 153, 255, 0.3));
+  background: var(--geojson-editor-selection-color, light-dark(rgba(51, 153, 255, 0.3), rgba(51, 153, 255, 0.4)));
   pointer-events: none;
   z-index: 0;
 }
@@ -259,47 +264,47 @@
 }
 
 /* ========== Syntax Highlighting ========== */
-.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-error { color: var(--json-error, #f00); }
+.json-key { color: var(--geojson-editor-json-key, light-dark(#660e7a, #9876aa)); }
+.json-string { color: var(--geojson-editor-json-string, light-dark(#008000, #6a8759)); }
+.json-number { color: var(--geojson-editor-json-number, light-dark(#00f, #6897bb)); }
+.json-boolean, .json-null { color: var(--geojson-editor-json-boolean, light-dark(#000080, #cc7832)); }
+.json-punctuation { color: var(--geojson-editor-json-punct, light-dark(#000, #a9b7c6)); }
+.json-error { color: var(--geojson-editor-json-error, light-dark(#f00, #ff6b68)); }
 
-.geojson-key { color: var(--geojson-key, #660e7a); font-weight: 600; }
-.geojson-type { color: var(--geojson-type, #008000); font-weight: 600; }
-.geojson-type-invalid { color: var(--geojson-type-invalid, #f00); font-weight: 600; }
+.geojson-key { color: var(--geojson-editor-geojson-key, light-dark(#660e7a, #9876aa)); font-weight: 600; }
+.geojson-type { color: var(--geojson-editor-geojson-type, light-dark(#008000, #6a8759)); font-weight: 600; }
+.geojson-type-invalid { color: var(--geojson-editor-geojson-type-invalid, light-dark(#f00, #ff6b68)); font-weight: 600; }
 
 /* Collapsed node styling */
 .collapsed-bracket-array,
 .collapsed-bracket-object {
-  color: var(--json-punct, #000);
+  color: var(--geojson-editor-json-punct, light-dark(#000, #a9b7c6));
 }
 .collapsed-bracket-array::after,
 .collapsed-bracket-object::after {
   content: '…';
-  color: var(--json-punct, #888);
+  color: var(--geojson-editor-json-punct, light-dark(#000, #a9b7c6));
 }
 
 /* ========== Prefix/Suffix ========== */
 .prefix-wrapper, .suffix-wrapper {
   display: flex;
   flex-shrink: 0;
-  background: var(--bg-color, #fff);
+  background: var(--geojson-editor-bg-color, light-dark(#fff, #2b2b2b));
 }
 
 .prefix-gutter, .suffix-gutter {
   width: var(--gutter-width);
-  background: var(--gutter-bg, #f0f0f0);
-  border-right: 1px solid var(--gutter-border, #e0e0e0);
+  background: var(--geojson-editor-gutter-bg, light-dark(#f0f0f0, #313335));
+  border-right: 1px solid var(--geojson-editor-gutter-border, light-dark(#e0e0e0, #3c3f41));
   flex-shrink: 0;
 }
 
 .editor-prefix, .editor-suffix {
   flex: 1;
   padding: 4px 12px;
-  color: var(--text-color, #000);
-  background: var(--bg-color, #fff);
+  color: var(--geojson-editor-text-color, light-dark(#000, #a9b7c6));
+  background: var(--geojson-editor-bg-color, light-dark(#fff, #2b2b2b));
   user-select: none;
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -316,7 +321,7 @@
   transform: translateY(-50%);
   background: transparent;
   border: none;
-  color: var(--text-color, #000);
+  color: var(--geojson-editor-text-color, light-dark(#000, #a9b7c6));
   opacity: 0.15;
   cursor: pointer;
   font-size: 0.7rem;
@@ -339,8 +344,8 @@
   top: 2rem;
   right: 0.5rem;
   z-index: 1000;
-  background: var(--bg-color, #ffffff);
-  border: 1px solid var(--gutter-border, #e0e0e0);
+  background: var(--geojson-editor-bg-color, light-dark(#fff, #2b2b2b));
+  border: 1px solid var(--geojson-editor-gutter-border, light-dark(#e0e0e0, #3c3f41));
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   padding: 12px 16px;
@@ -356,13 +361,13 @@
 .info-popup-title {
   font-weight: bold;
   font-size: 13px;
-  color: var(--text-color, #000000);
+  color: var(--geojson-editor-text-color, light-dark(#000, #a9b7c6));
   margin-bottom: 4px;
 }
 .info-popup-version {
   display: block;
   font-size: 11px;
-  color: var(--text-color, #000000);
+  color: var(--geojson-editor-text-color, light-dark(#000, #a9b7c6));
   opacity: 0.6;
   margin-bottom: 8px;
   text-decoration: none;
@@ -373,7 +378,7 @@
 }
 .info-popup-copyright {
   font-size: 10px;
-  color: var(--text-color, #000000);
+  color: var(--geojson-editor-text-color, light-dark(#000, #a9b7c6));
   opacity: 0.5;
 }
 
@@ -384,7 +389,7 @@
   transform: translateY(-50%);
   background: transparent;
   border: none;
-  color: var(--text-color, #000);
+  color: var(--geojson-editor-text-color, light-dark(#000, #a9b7c6));
   opacity: 0.3;
   cursor: pointer;
   font-size: 0.65rem;
@@ -413,7 +418,7 @@
 .error-nav-btn {
   background: transparent;
   border: none;
-  color: var(--error-color, #dc3545);
+  color: var(--geojson-editor-error-color, light-dark(#dc3545, #ff6b68));
   cursor: pointer;
   font-size: 8px;
   width: 16px;
@@ -429,7 +434,7 @@
   opacity: 1;
 }
 .error-count {
-  color: var(--error-color, #dc3545);
+  color: var(--geojson-editor-error-color, light-dark(#dc3545, #ff6b68));
   font-size: 11px;
   min-width: 20px;
   text-align: center;
@@ -437,9 +442,9 @@
 
 /* ========== Scrollbar ========== */
 .viewport::-webkit-scrollbar { width: 10px; height: 10px; }
-.viewport::-webkit-scrollbar-track { background: var(--control-bg, #e8e8e8); }
-.viewport::-webkit-scrollbar-thumb { background: var(--control-border, #c0c0c0); border-radius: 5px; }
-.viewport::-webkit-scrollbar-thumb:hover { background: var(--control-color, #000080); }
+.viewport::-webkit-scrollbar-track { background: var(--geojson-editor-control-bg, light-dark(#e8e8e8, #3c3f41)); }
+.viewport::-webkit-scrollbar-thumb { background: var(--geojson-editor-control-border, light-dark(#c0c0c0, #5a5a5a)); border-radius: 5px; }
+.viewport::-webkit-scrollbar-thumb:hover { background: var(--geojson-editor-control-color, light-dark(#000080, #cc7832)); }
 
 /* ========== Inline Controls (using ::before pseudo-elements) ========== */
 
@@ -464,24 +469,24 @@
 .json-color:hover::before,
 .json-boolean:hover::before {
   transform: translateY(-50%) scale(1.2);
-  border-color: var(--control-color, #000080);
+  border-color: var(--geojson-editor-control-color, light-dark(#000080, #cc7832));
 }
 
 /* Color swatch specific styles */
 .json-color::before {
   background-color: var(--swatch-color);
-  border: 1px solid var(--json-punct, #a9b7c6);
+  border: 1px solid var(--geojson-editor-json-punct, light-dark(#000, #a9b7c6));
 }
 
 /* Boolean checkbox specific styles */
 .json-boolean::before {
-  border: 1.5px solid var(--control-border, #c0c0c0);
+  border: 1.5px solid var(--geojson-editor-control-border, light-dark(#c0c0c0, #5a5a5a));
   background: transparent;
 }
 .json-bool-true::before {
   content: '✔';
-  border-color: var(--control-color, #000080);
-  color: var(--control-color, #000080);
+  border-color: var(--geojson-editor-control-color, light-dark(#000080, #cc7832));
+  color: var(--geojson-editor-control-color, light-dark(#000080, #cc7832));
   font-size: 8px;
   display: flex;
   align-items: center;
@@ -496,7 +501,7 @@
   left: 0;
   top: 3px;
   font-size: 10px;
-  color: var(--control-color, #000080);
+  color: var(--geojson-editor-control-color, light-dark(#000080, #cc7832));
   opacity: 0.6;
   cursor: pointer;
   z-index: 1;

package/src/geojson-editor.ts

@@ -4,8 +4,7 @@ import type { Feature } from 'geojson';
 
 // ========== Imports from extracted modules ==========
 import type {
-  SetOptions,
-  ThemeSettings
+  SetOptions
 } from './types.js';
 
 import type {
@@ -35,19 +34,18 @@ import {
   RE_BRACKET_POS,
   RE_IS_WORD_CHAR,
   RE_ATTR_AND_BOOL_VALUE,
-  RE_TO_KEBAB,
   RE_OPEN_BRACES,
   RE_CLOSE_BRACES,
   RE_OPEN_BRACKETS,
   RE_CLOSE_BRACKET
 } from './constants.js';
 
-import { createElement, countBrackets, parseSelectorToHostRule } from './utils.js';
+import { createElement, countBrackets } from './utils.js';
 import { validateGeoJSON, normalizeToFeatures } from './validation.js';
 import { highlightSyntax, namedColorToHex, isNamedColor } from './syntax-highlighter.js';
 
 // Re-export public types
-export type { SetOptions, ThemeConfig, ThemeSettings } from './types.js';
+export type { SetOptions } from './types.js';
 
 // Alias for minification
 const _ce = createElement;
@@ -94,8 +92,6 @@ class GeoJsonEditor extends HTMLElement {
   private renderTimer: ReturnType<typeof setTimeout> | undefined = undefined;
   private inputTimer: ReturnType<typeof setTimeout> | undefined = undefined;
 
-  // ========== Theme ==========
-  themes: ThemeSettings = { dark: {}, light: {} };
 
   // ========== Undo/Redo History ==========
   private _undoStack: EditorSnapshot[] = [];
@@ -116,6 +112,7 @@ class GeoJsonEditor extends HTMLElement {
   private _contextMapFirstLine: string | undefined = undefined;
   private _contextMapLastLine: string | undefined = undefined;
   private _errorLinesCache: Set<number> | null = null;
+  private _lastCurrentFeatureIndices: string | null = null; // For current-features event deduplication (JSON stringified indices)
 
   // ========== Cached DOM Elements ==========
   private _viewport: HTMLElement | null = null;
@@ -440,7 +437,7 @@ class GeoJsonEditor extends HTMLElement {
 
   // ========== Observed Attributes ==========
   static get observedAttributes() {
-    return ['readonly', 'value', 'placeholder', 'dark-selector', 'internal-add-shortcut'];
+    return ['readonly', 'value', 'placeholder', 'internal-add-shortcut'];
   }
 
   // ========== Lifecycle ==========
@@ -449,7 +446,6 @@ class GeoJsonEditor extends HTMLElement {
     this._cacheElements();
     this.setupEventListeners();
     this.updatePrefixSuffix();
-    this.updateThemeCSS();
 
     if (this.value) {
       this.setValue(this.value);
@@ -484,9 +480,6 @@ class GeoJsonEditor extends HTMLElement {
       case 'placeholder':
         this.updatePlaceholderContent();
         break;
-      case 'dark-selector':
-        this.updateThemeCSS();
-        break;
     }
   }
 
@@ -697,12 +690,16 @@ class GeoJsonEditor extends HTMLElement {
       editorWrapper.classList.add('focused');
       this._invalidateRenderCache(); // Force re-render to show cursor
       this.scheduleRender();
+      // Emit current feature on focus (force to always emit on focus gain)
+      this._emitCurrentFeature(true);
     });
 
     hiddenTextarea.addEventListener('blur', () => {
       editorWrapper.classList.remove('focused');
       this._invalidateRenderCache(); // Force re-render to hide cursor
       this.scheduleRender();
+      // Emit null on blur
+      this._emitCurrentFeatureNull();
     });
 
     // Scroll handling
@@ -1324,11 +1321,16 @@ class GeoJsonEditor extends HTMLElement {
     
     linesContainer.innerHTML = '';
     linesContainer.appendChild(fragment);
-    
+
     // Render gutter with same range
     this.renderGutter(startIndex, endIndex);
+
+    // Emit current-features event if feature changed (only when editor is focused)
+    if (this._editorWrapper?.classList.contains('focused')) {
+      this._emitCurrentFeature();
+    }
   }
-  
+
   /**
    * Insert cursor element at the specified column position
    * Uses absolute positioning to avoid affecting text layout
@@ -2237,7 +2239,7 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   /**
-   * Scroll viewport to ensure cursor is visible
+   * Scroll viewport to ensure cursor is visible with comfortable margin
    * @param center - if true, center the cursor line in the viewport
    */
   private _scrollToCursor(center = false) {
@@ -2250,6 +2252,8 @@ class GeoJsonEditor extends HTMLElement {
 
     const cursorY = visibleIndex * this.lineHeight;
     const viewportHeight = viewport.clientHeight;
+    // Add margin of 2 lines for comfortable visibility
+    const scrollMargin = this.lineHeight * 2;
 
     if (center) {
       // Center the cursor line in the viewport
@@ -2258,13 +2262,13 @@ class GeoJsonEditor extends HTMLElement {
       const viewportTop = viewport.scrollTop;
       const viewportBottom = viewportTop + viewportHeight;
 
-      // Scroll up if cursor is above viewport
-      if (cursorY < viewportTop) {
-        viewport.scrollTop = cursorY;
+      // Scroll up if cursor is above viewport (with margin)
+      if (cursorY < viewportTop + scrollMargin) {
+        viewport.scrollTop = Math.max(0, cursorY - scrollMargin);
       }
-      // Scroll down if cursor is below viewport
-      else if (cursorY + this.lineHeight > viewportBottom) {
-        viewport.scrollTop = cursorY + this.lineHeight - viewportHeight;
+      // Scroll down if cursor is below viewport (with margin)
+      else if (cursorY + this.lineHeight > viewportBottom - scrollMargin) {
+        viewport.scrollTop = cursorY + this.lineHeight + scrollMargin - viewportHeight;
       }
     }
   }
@@ -2757,7 +2761,14 @@ class GeoJsonEditor extends HTMLElement {
     // Try to parse as GeoJSON and normalize
     let pastedFeatureCount = 0;
     try {
-      const parsed = JSON.parse(text);
+      // First try direct parse (single Feature, Feature[], or FeatureCollection)
+      let parsed;
+      try {
+        parsed = JSON.parse(text);
+      } catch {
+        // If direct parse fails, try wrapping with [] (for "feature, feature" format from editor copy)
+        parsed = JSON.parse('[' + text + ']');
+      }
       const features = normalizeToFeatures(parsed);
       pastedFeatureCount = features.length;
       // Valid GeoJSON - insert formatted features
@@ -2808,6 +2819,12 @@ class GeoJsonEditor extends HTMLElement {
 
     // Force immediate render (not via RAF) to ensure content displays instantly
     this.renderViewport();
+
+    // Ensure cursor is visible in viewport after paste
+    // Use RAF to ensure layout is updated before scrolling
+    requestAnimationFrame(() => {
+      this._scrollToCursor();
+    });
   }
 
   handleCopy(e: ClipboardEvent): void {
@@ -3532,6 +3549,96 @@ class GeoJsonEditor extends HTMLElement {
     }
   }
 
+  /**
+   * Emit current-features event when cursor/selection changes
+   * Includes all features that overlap with the selection (or just cursor position if no selection)
+   * Only emits when the set of features changes (not on every cursor move)
+   * @param force - If true, emit even if features haven't changed (used on focus)
+   */
+  private _emitCurrentFeature(force: boolean = false): void {
+    // Collect feature indices based on cursor or selection
+    const featureIndices = this._getFeatureIndicesForCurrentSelection();
+
+    // Stringify for comparison (deduplication)
+    const indicesKey = JSON.stringify(featureIndices);
+
+    // Only emit if features changed (unless forced)
+    if (!force && indicesKey === this._lastCurrentFeatureIndices) return;
+    this._lastCurrentFeatureIndices = indicesKey;
+
+    if (featureIndices.length === 0) {
+      // Cursor/selection is not in any feature - emit empty FeatureCollection
+      this.dispatchEvent(new CustomEvent('current-features', {
+        detail: { type: 'FeatureCollection', features: [] },
+        bubbles: true,
+        composed: true
+      }));
+    } else {
+      // Get all features that overlap with cursor/selection
+      const allFeatures = this._parseFeatures();
+      const selectedFeatures = featureIndices
+        .map(idx => allFeatures[idx])
+        .filter(f => f != null);
+
+      const featureCollection = {
+        type: 'FeatureCollection',
+        features: selectedFeatures
+      };
+
+      this.dispatchEvent(new CustomEvent('current-features', {
+        detail: featureCollection,
+        bubbles: true,
+        composed: true
+      }));
+    }
+  }
+
+  /**
+   * Get all feature indices that overlap with the current cursor position or selection
+   * Returns sorted unique indices
+   */
+  private _getFeatureIndicesForCurrentSelection(): number[] {
+    const indices = new Set<number>();
+
+    // Determine the line range to check
+    let startLine: number;
+    let endLine: number;
+
+    if (this.selectionStart && this.selectionEnd) {
+      // Selection exists - get all features overlapping the selection
+      startLine = Math.min(this.selectionStart.line, this.selectionEnd.line);
+      endLine = Math.max(this.selectionStart.line, this.selectionEnd.line);
+    } else {
+      // No selection - just use cursor position
+      startLine = this.cursorLine;
+      endLine = this.cursorLine;
+    }
+
+    // Find all features that overlap with the line range
+    for (const [, range] of this.featureRanges) {
+      // Check if feature range overlaps with selection range
+      if (range.startLine <= endLine && range.endLine >= startLine) {
+        indices.add(range.featureIndex);
+      }
+    }
+
+    // Return sorted array for consistent comparison
+    return Array.from(indices).sort((a, b) => a - b);
+  }
+
+  /**
+   * Emit current-features with empty FeatureCollection (used on blur)
+   * Always emits to ensure map is cleared when editor loses focus
+   */
+  private _emitCurrentFeatureNull(): void {
+    this._lastCurrentFeatureIndices = null;
+    this.dispatchEvent(new CustomEvent('current-features', {
+      detail: { type: 'FeatureCollection', features: [] },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
   // ========== UI Updates ==========
 
   updateReadonly() {
@@ -3573,74 +3680,6 @@ class GeoJsonEditor extends HTMLElement {
     if (this._editorSuffix) this._editorSuffix.textContent = this.suffix;
   }
 
-  // ========== Theme ==========
-  
-  updateThemeCSS() {
-    const darkSelector = this.getAttribute('dark-selector') || '.dark';
-    const darkRule = parseSelectorToHostRule(darkSelector);
-
-    let themeStyle = this._id('theme-styles') as HTMLStyleElement;
-    if (!themeStyle) {
-      themeStyle = _ce('style') as HTMLStyleElement;
-      themeStyle.id = 'theme-styles';
-      this.shadowRoot!.insertBefore(themeStyle, this.shadowRoot!.firstChild);
-    }
-    
-    const darkDefaults = {
-      bgColor: '#2b2b2b',
-      textColor: '#a9b7c6',
-      caretColor: '#bbb',
-      gutterBg: '#313335',
-      gutterBorder: '#3c3f41',
-      gutterText: '#606366',
-      jsonKey: '#9876aa',
-      jsonString: '#6a8759',
-      jsonNumber: '#6897bb',
-      jsonBoolean: '#cc7832',
-      jsonNull: '#cc7832',
-      jsonPunct: '#a9b7c6',
-      jsonError: '#ff6b68',
-      controlColor: '#cc7832',
-      controlBg: '#3c3f41',
-      controlBorder: '#5a5a5a',
-      geojsonKey: '#9876aa',
-      geojsonType: '#6a8759',
-      geojsonTypeInvalid: '#ff6b68',
-      jsonKeyInvalid: '#ff6b68'
-    };
-    
-    RE_TO_KEBAB.lastIndex = 0;
-    const toKebab = (str: string) => str.replace(RE_TO_KEBAB, '-$1').toLowerCase();
-    const generateVars = (obj: Record<string, string | undefined>) => Object.entries(obj)
-      .filter((entry): entry is [string, string] => entry[1] !== undefined)
-      .map(([k, v]) => `--${toKebab(k)}: ${v};`)
-      .join('\n        ');
-    
-    const lightVars = generateVars(this.themes.light as Record<string, string | undefined> || {});
-    const darkTheme = { ...darkDefaults, ...this.themes.dark };
-    const darkVars = generateVars(darkTheme as Record<string, string | undefined>);
-    
-    let css = lightVars ? `:host {\n        ${lightVars}\n      }\n` : '';
-    css += `${darkRule} {\n        ${darkVars}\n      }`;
-    
-    themeStyle.textContent = css;
-  }
-
-  setTheme(theme: ThemeSettings): void {
-    if (theme.dark) this.themes.dark = { ...this.themes.dark, ...theme.dark };
-    if (theme.light) this.themes.light = { ...this.themes.light, ...theme.light };
-    this.updateThemeCSS();
-  }
-
-  resetTheme(): void {
-    this.themes = { dark: {}, light: {} };
-    this.updateThemeCSS();
-  }
-
-  getTheme(): ThemeSettings {
-    return { ...this.themes };
-  }
-
   /**
    * Find all collapsible ranges using the mappings built by _rebuildNodeIdMappings
    * This method only READS the existing mappings, it doesn't create new IDs
@@ -4053,6 +4092,11 @@ class GeoJsonEditor extends HTMLElement {
       this.updateView();
       this.scheduleRender();
       this.emitChange();
+      // Invalidate current-features cache and emit if focused (feature removal changes context)
+      this._lastCurrentFeatureIndices = null;
+      if (this._editorWrapper?.classList.contains('focused')) {
+        this._emitCurrentFeature(true);
+      }
       return removed;
     }
     return undefined;
@@ -4066,10 +4110,19 @@ class GeoJsonEditor extends HTMLElement {
     this.lines = [];
     this.collapsedNodes.clear();
     this.hiddenFeatures.clear();
+    this.cursorLine = 0;
+    this.cursorColumn = 0;
+    this.selectionStart = null;
+    this.selectionEnd = null;
     this.updateModel();
     this.scheduleRender();
     this.updatePlaceholderVisibility();
     this.emitChange();
+    // Invalidate current-features cache and emit empty if focused (all features removed)
+    this._lastCurrentFeatureIndices = null;
+    if (this._editorWrapper?.classList.contains('focused')) {
+      this._emitCurrentFeature(true);
+    }
     return removed;
   }
 

package/src/types.ts

@@ -16,33 +16,3 @@ export interface SetOptions {
    */
   collapsed?: string[] | ((feature: Feature | null, index: number) => string[]);
 }
-
-/** Theme configuration */
-export interface ThemeConfig {
-  bgColor?: string;
-  textColor?: string;
-  caretColor?: string;
-  gutterBg?: string;
-  gutterBorder?: string;
-  gutterText?: string;
-  jsonKey?: string;
-  jsonString?: string;
-  jsonNumber?: string;
-  jsonBoolean?: string;
-  jsonNull?: string;
-  jsonPunct?: string;
-  jsonError?: string;
-  controlColor?: string;
-  controlBg?: string;
-  controlBorder?: string;
-  geojsonKey?: string;
-  geojsonType?: string;
-  geojsonTypeInvalid?: string;
-  jsonKeyInvalid?: string;
-}
-
-/** Theme settings for dark and light modes */
-export interface ThemeSettings {
-  dark?: ThemeConfig;
-  light?: ThemeConfig;
-}

package/src/utils.ts

@@ -26,13 +26,3 @@ export function countBrackets(line: string, openBracket: string): BracketCount {
   return { open, close };
 }
 
-/**
- * Parse a CSS selector to a :host rule for shadow DOM
- */
-export function parseSelectorToHostRule(selector: string | null): string {
-  if (!selector) return ':host([data-color-scheme="dark"])';
-  if (selector.startsWith('.') && !selector.includes(' ')) {
-    return `:host(${selector})`;
-  }
-  return `:host-context(${selector})`;
-}