@softwarity/geojson-editor 1.0.24 → 1.0.25

package/README.md

@@ -71,7 +71,7 @@ A feature-rich, framework-agnostic **Web Component** for editing GeoJSON feature
 - **Feature Visibility Toggle** - Hide/show individual Features via eye icon in gutter; hidden features are grayed out and excluded from `change` events (useful for temporary filtering without deleting data)
 - **Color Picker** - Built-in color swatch for hex color properties (`#rrggbb`) displayed inline next to the value; click to open native color picker
 - **Boolean Checkbox** - Inline checkbox for boolean properties displayed next to the value; toggle to switch between `true`/`false` and emit changes (e.g., `marker: true` to show vertices)
-- **Dark/Light Color Schemes** - Automatic color scheme detection from parent page (Bootstrap, Tailwind, custom)
+- **Dark/Light Color Schemes** - Automatic color scheme based on system preference via CSS `light-dark()` function
 - **Auto-format** - Automatic JSON formatting in real-time (always enabled)
 - **Readonly Mode** - Visual indicator with diagonal stripes when editing is disabled
 - **Block Editing in Collapsed Areas** - Prevents accidental edits in collapsed sections
@@ -82,6 +82,7 @@ A feature-rich, framework-agnostic **Web Component** for editing GeoJSON feature
 - **Save to File** - Ctrl+S to download GeoJSON as `.geojson` file; programmatic `save(filename)` method available
 - **Open from File** - Ctrl+O to open a `.geojson` or `.json` file from the client filesystem; programmatic `open()` method available
 - **Error Navigation** - Visual error indicators in gutter with navigation buttons (◀ ▶) to jump between errors; error count displayed in suffix area
+- **Current Feature Event** - `current-feature` event emitted when cursor enters/leaves a feature or editor gains/loses focus; useful for synchronizing with maps
 
 ## Installation
 
@@ -127,21 +128,18 @@ This package includes TypeScript type definitions out of the box. No additional
 
 ```typescript
 import '@softwarity/geojson-editor';
-import type { SetOptions, ThemeSettings, CursorPosition, GeometryType } from '@softwarity/geojson-editor';
+import type { SetOptions, CursorPosition, GeometryType } from '@softwarity/geojson-editor';
 
 // Type-safe editor access
 const editor = document.querySelector('geojson-editor') as GeoJsonEditor;
 
 // Full autocompletion and type checking
 editor.set(features, { collapsed: ['coordinates'] });
-editor.setTheme({ dark: { bgColor: '#1a1a1a' } });
 ```
 
 **Exported types:**
 - `GeoJsonEditor` - The Web Component class
 - `SetOptions` - Options for `set()`, `add()`, `insertAt()`, `open()`
-- `ThemeConfig` - Theme color configuration
-- `ThemeSettings` - Dark/light color scheme settings
 - `CursorPosition` - Cursor position `{ line, column }`
 - `GeometryType` - GeoJSON geometry types union
 
@@ -164,10 +162,16 @@ editor.setTheme({ dark: { bgColor: '#1a1a1a' } });
 
 Users edit features directly (comma-separated), and the component automatically wraps them in a `{"type": "FeatureCollection", "features": [...]}` structure for validation and events.
 
-### With Theme Detection
+### With Theme Control
+
+The component automatically adapts to system color scheme. Override with CSS:
 
 ```html
-<geojson-editor dark-selector="html.dark"></geojson-editor>
+<!-- Force dark mode -->
+<geojson-editor style="color-scheme: dark;"></geojson-editor>
+
+<!-- Force light mode -->
+<geojson-editor style="color-scheme: light;"></geojson-editor>
 ```
 
 ### Listen to Changes
@@ -194,20 +198,141 @@ editor.addEventListener('error', (e) => {
 | `value` | `string` | `""` | Initial editor content (features array content) |
 | `placeholder` | `string` | `""` | Placeholder text |
 | `readonly` | `boolean` | `false` | Make editor read-only |
-| `dark-selector` | `string` | `".dark"` | CSS selector for dark color scheme detection |
 
 **Note:** `coordinates` nodes are automatically collapsed when content is loaded to improve readability. Use Enter to expand and Shift+Enter to collapse nodes, or click the gutter toggle. Use Tab/Shift+Tab to navigate between attributes.
 
-### Dark Selector Syntax
+### Themes
+
+The component uses CSS `light-dark()` function for automatic dark/light mode switching based on the system's `color-scheme` preference.
+
+#### Pre-built Themes
+
+Ready-to-use theme CSS files are available:
+
+| Theme | Description | CDN Link |
+|-------|-------------|----------|
+| **Default (IntelliJ)** | Built-in, no extra CSS needed | - |
+| **VS Code** | Visual Studio Code inspired colors | [vscode.css](https://unpkg.com/@softwarity/geojson-editor/themes/vscode.css) |
+| **GitHub** | GitHub's code styling | [github.css](https://unpkg.com/@softwarity/geojson-editor/themes/github.css) |
+| **Monokai** | Classic dark Monokai palette | [monokai.css](https://unpkg.com/@softwarity/geojson-editor/themes/monokai.css) |
+| **Solarized** | Ethan Schoonover's precision colors | [solarized.css](https://unpkg.com/@softwarity/geojson-editor/themes/solarized.css) |
+
+**Using via CDN:**
+```html
+<!-- Include theme CSS before the component -->
+<link rel="stylesheet" href="https://unpkg.com/@softwarity/geojson-editor/themes/monokai.css">
+
+<!-- Then use the component -->
+<script type="module" src="https://unpkg.com/@softwarity/geojson-editor"></script>
+```
+
+**Using via npm:**
+```javascript
+// Import theme CSS in your build
+import '@softwarity/geojson-editor/themes/github.css';
+import '@softwarity/geojson-editor';
+```
+
+#### Custom Themes
+
+Create your own theme by overriding CSS custom properties on `:root` with the `light-dark()` function:
+
+```css
+:root {
+  /* Editor background and text */
+  --geojson-editor-bg-color: light-dark(#ffffff, #1e1e1e);
+  --geojson-editor-text-color: light-dark(#000000, #d4d4d4);
+  --geojson-editor-caret-color: light-dark(#000000, #aeafad);
+
+  /* Gutter (line numbers area) */
+  --geojson-editor-gutter-bg: light-dark(#f3f3f3, #1e1e1e);
+  --geojson-editor-gutter-border: light-dark(#e0e0e0, #333333);
+  --geojson-editor-gutter-text: light-dark(#237893, #858585);
+
+  /* JSON syntax highlighting */
+  --geojson-editor-json-key: light-dark(#0451a5, #9cdcfe);
+  --geojson-editor-json-string: light-dark(#a31515, #ce9178);
+  --geojson-editor-json-number: light-dark(#098658, #b5cea8);
+  --geojson-editor-json-boolean: light-dark(#0000ff, #569cd6);
+  --geojson-editor-json-punct: light-dark(#000000, #d4d4d4);
+  --geojson-editor-json-error: light-dark(#cd3131, #f44747);
+
+  /* GeoJSON-specific */
+  --geojson-editor-geojson-key: light-dark(#800000, #9cdcfe);
+  --geojson-editor-geojson-type: light-dark(#008000, #4ec9b0);
+  --geojson-editor-geojson-type-invalid: light-dark(#cd3131, #f44747);
+
+  /* Controls (checkboxes, color swatches) */
+  --geojson-editor-control-color: light-dark(#0000ff, #569cd6);
+  --geojson-editor-control-bg: light-dark(#f3f3f3, #3c3c3c);
+  --geojson-editor-control-border: light-dark(#c0c0c0, #6b6b6b);
+
+  /* Selection and errors */
+  --geojson-editor-selection-color: light-dark(rgba(173, 214, 255, 0.5), rgba(38, 79, 120, 0.5));
+  --geojson-editor-error-color: light-dark(#cd3131, #f44747);
+}
+```
 
-The `dark-selector` attribute determines when the dark color scheme is active. If the selector matches, dark colors are applied; otherwise, light colors are used.
+#### Forcing Light or Dark Mode
 
-**Examples:**
+```css
+/* Force dark mode on specific editor */
+geojson-editor.dark-editor {
+  color-scheme: dark;
+}
+
+/* Force light mode */
+geojson-editor.light-editor {
+  color-scheme: light;
+}
+```
+
+#### Integration with CSS Frameworks
 
-- `.dark` - Component has `dark` class: `<geojson-editor class="dark">`
-- `html.dark` - HTML element has `dark` class (Tailwind CSS): `<html class="dark">`
-- `html[data-bs-theme=dark]` - HTML has Bootstrap theme attribute: `<html data-bs-theme="dark">`
-- Empty string `""` - Uses component's `data-color-scheme` attribute as fallback
+The editor inherits `color-scheme` from parent elements. To integrate with frameworks that use class-based dark mode:
+
+**Tailwind CSS** (uses `html.dark`):
+```css
+html.dark { color-scheme: dark; }
+html:not(.dark) { color-scheme: light; }
+```
+
+**Bootstrap 5** (uses `[data-bs-theme]`):
+```css
+[data-bs-theme="dark"] { color-scheme: dark; }
+[data-bs-theme="light"] { color-scheme: light; }
+```
+
+**DaisyUI / Other** (any class-based theme):
+```css
+.dark-theme { color-scheme: dark; }
+.light-theme { color-scheme: light; }
+```
+
+#### CSS Custom Properties Reference
+
+| Variable | Description |
+|----------|-------------|
+| `--geojson-editor-bg-color` | Editor background |
+| `--geojson-editor-text-color` | Default text color |
+| `--geojson-editor-caret-color` | Cursor color |
+| `--geojson-editor-gutter-bg` | Line numbers background |
+| `--geojson-editor-gutter-border` | Gutter border color |
+| `--geojson-editor-gutter-text` | Line numbers color |
+| `--geojson-editor-json-key` | JSON property keys |
+| `--geojson-editor-json-string` | String values |
+| `--geojson-editor-json-number` | Number values |
+| `--geojson-editor-json-boolean` | Boolean/null values |
+| `--geojson-editor-json-punct` | Punctuation (brackets, colons) |
+| `--geojson-editor-json-error` | Invalid JSON highlighting |
+| `--geojson-editor-geojson-key` | GeoJSON keywords (type, geometry, etc.) |
+| `--geojson-editor-geojson-type` | Valid geometry types (Point, Polygon, etc.) |
+| `--geojson-editor-geojson-type-invalid` | Invalid geometry types |
+| `--geojson-editor-control-color` | Inline controls accent color |
+| `--geojson-editor-control-bg` | Inline controls background |
+| `--geojson-editor-control-border` | Inline controls border |
+| `--geojson-editor-selection-color` | Text selection background |
+| `--geojson-editor-error-color` | Error indicators |
 
 ## API Methods
 
@@ -310,22 +435,6 @@ const features = editor.getAll();
 editor.emit();
 ```
 
-### Theme API
-
-```javascript
-// Get current theme
-const themes = editor.getTheme();
-
-// Set custom theme (partial update)
-editor.setTheme({
-  dark: { background: '#000', textColor: '#fff' },
-  light: { background: '#fff', textColor: '#000' }
-});
-
-// Reset to defaults
-editor.resetTheme();
-```
-
 ### Undo/Redo API
 
 Full undo/redo support with action grouping:
@@ -522,9 +631,36 @@ editor.addEventListener('error', (e) => {
 - Invalid types (e.g., `"LinearRing"`)
 - Unknown types (any `type` value not in the GeoJSON specification)
 
+### `current-feature`
+
+Fired when the current feature changes. Useful for synchronizing the editor with a map display.
+
+**Triggers:**
+- Editor gains focus → emits current feature at cursor
+- Cursor moves to a different feature → emits new feature
+- Cursor moves outside any feature → emits `null`
+- Editor loses focus → emits `null`
+
+```javascript
+editor.addEventListener('current-feature', (e) => {
+  const feature = e.detail;  // Feature object or null
+  if (feature) {
+    // Highlight this feature on your map
+    highlightLayer.setData(feature);
+  } else {
+    // No current feature
+    highlightLayer.setData({ type: 'FeatureCollection', features: [] });
+  }
+});
+```
+
+**Event detail:** The Feature object at the cursor position, or `null` if no feature is current.
+
+**Note:** The event is only fired when the feature changes, not on every cursor movement within the same feature. This prevents excessive event firing during normal editing.
+
 ## Styling
 
-The component uses Shadow DOM with CSS variables for theming. Themes can be customized via the `setTheme()` API.
+The component uses Shadow DOM with CSS variables for theming. Customize colors via CSS custom properties (see [Theme Control](#theme-control)).
 
 ## Browser Support