From 275c74f0c2736c8b0f7682f169ea4207f63ea53b Mon Sep 17 00:00:00 2001
From: Buddy <git@buddy.wtf>
Date: Mon, 8 Jun 2026 21:45:09 -0700
Subject: [PATCH] feat: two-pane dev controls panel with tree, editor,
 add-child, and pick-on-map

- Left pane: nested component tree with +/x buttons for add/remove
- Right pane: attribute editor with per-input MutationObserver sync
- Shared pick-on-map: single click picks both lat/lng from one map click
- Add-child wizard replaces editor pane, Cancel restores previous content
- Source HTML display for selected element
- Missing attributes added: min/max-zoom, zoom-snap/delta, path style attrs,
  popup/tooltip lat/lng, overlay interactive/loop/autoplay, and more
---
 index.html | 1177 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 1175 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index a897bb7..0604c1d 100644
--- a/index.html
+++ b/index.html
@@ -5,21 +5,273 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Leaflet Components Demo</title>
     <style>
+      * { box-sizing: border-box; }
       body {
         margin: 0;
         padding: 20px;
         font-family: sans-serif;
       }
+      .two-pane {
+        display: flex;
+        gap: 16px;
+        margin-bottom: 16px;
+        height: 600px;
+      }
+      .pane {
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .pane-header {
+        padding: 10px 14px;
+        font-weight: 600;
+        font-size: 13px;
+        background: #f0f0f0;
+        border-bottom: 1px solid #ddd;
+        flex-shrink: 0;
+      }
+      .pane-body {
+        flex: 1;
+        overflow-y: auto;
+        padding: 10px 14px;
+      }
+      #tree-pane {
+        width: 280px;
+        min-width: 200px;
+      }
+      #editor-pane {
+        flex: 1;
+        min-width: 300px;
+      }
+
+      /* ── Tree styles ── */
+      .tree-node {
+        margin: 2px 0;
+      }
+      .tree-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 6px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-family: monospace;
+        font-size: 13px;
+      }
+      .tree-row:hover {
+        background: #e8e8e8;
+      }
+      .tree-row.selected {
+        background: #dbeafe;
+        font-weight: 600;
+      }
+      .tree-row .tag {
+        color: #2563eb;
+      }
+      .tree-children {
+        margin-left: 18px;
+        border-left: 1px solid #ddd;
+        padding-left: 4px;
+      }
+      .tree-row .remove-btn {
+        margin-left: auto;
+        background: none;
+        border: none;
+        color: #999;
+        cursor: pointer;
+        font-size: 14px;
+        line-height: 1;
+        padding: 0 2px;
+      }
+      .tree-row .remove-btn:hover {
+        color: #dc2626;
+      }
+      .tree-row .add-child-btn {
+        background: none;
+        border: none;
+        color: #999;
+        cursor: pointer;
+        font-size: 14px;
+        line-height: 1;
+        padding: 0 2px;
+        margin: 0 0 0 4px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .tree-row .add-child-btn:hover {
+        color: #22c55e;
+      }
+      .add-child-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        margin-top: 6px;
+        padding: 4px 10px;
+        font-size: 12px;
+        border: 1px dashed #aaa;
+        border-radius: 4px;
+        background: none;
+        color: #666;
+        cursor: pointer;
+      }
+      .add-child-btn:hover {
+        border-color: #3b82f6;
+        color: #2563eb;
+      }
+
+      /* ── Editor styles ── */
+      .editor-empty {
+        color: #999;
+        font-style: italic;
+        font-size: 13px;
+      }
+      .editor-section {
+        margin-bottom: 14px;
+      }
+      .editor-section h4 {
+        margin: 0 0 8px;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: #888;
+      }
+      .editor-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 6px;
+      }
+      .editor-row label {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 13px;
+        color: #555;
+        min-width: 120px;
+      }
+      .editor-row label:has(input[type="checkbox"]) {
+        font-family: monospace;
+        font-size: 12px;
+        min-width: auto;
+      }
+      .editor-row input[type="number"],
+      .editor-row input[type="text"] {
+        flex: 1;
+        max-width: 200px;
+        padding: 5px 8px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 13px;
+        font-family: monospace;
+      }
+      .editor-row input:focus {
+        outline: none;
+        border-color: #66f;
+      }
+      .editor-row input[type="checkbox"] {
+        width: 16px;
+        height: 16px;
+      }
+      .pick-btn {
+        padding: 4px 8px;
+        font-size: 11px;
+        border: 1px solid #22c55e;
+        border-radius: 4px;
+        background: #f0fdf4;
+        color: #16a34a;
+        cursor: pointer;
+        white-space: nowrap;
+      }
+      .pick-btn:hover {
+        background: #dcfce7;
+      }
+      .pick-btn.picking {
+        background: #16a34a;
+        color: white;
+        animation: pulse 1s infinite;
+      }
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.7; }
+      }
+
+      /* ── Add-child modal ── */
+      .add-child-form {
+        margin-top: 10px;
+        padding: 10px;
+        background: #fafafa;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+      }
+      .add-child-form h5 {
+        margin: 0 0 8px;
+        font-size: 12px;
+        color: #555;
+      }
+      .add-child-form select,
+      .add-child-form input {
+        width: 100%;
+        padding: 5px 8px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 13px;
+        margin-bottom: 6px;
+      }
+      .add-child-form .form-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 8px;
+      }
+      .add-child-form button {
+        padding: 6px 14px;
+        border-radius: 4px;
+        font-size: 13px;
+        cursor: pointer;
+        border: 1px solid #ccc;
+        background: white;
+      }
+      .add-child-form button.primary {
+        background: #2563eb;
+        color: white;
+        border-color: #2563eb;
+      }
+      .add-child-form button.primary:hover {
+        background: #1d4ed8;
+      }
+      .add-child-form button.cancel {
+        background: #f5f5f5;
+      }
+
       leaflet-map {
         height: 500px;
         border: 1px solid #ccc;
+        display: block;
       }
     </style>
   </head>
   <body>
     <h1>Leaflet Web Components</h1>
 
-    <leaflet-map lat="51.505" lng="-0.09" zoom="13">
+    <div class="two-pane">
+      <!-- LEFT PANE: Component tree -->
+      <div class="pane" id="tree-pane">
+        <div class="pane-header">Component Tree</div>
+        <div class="pane-body" id="tree-root"></div>
+      </div>
+
+      <!-- RIGHT PANE: Attribute editor -->
+      <div class="pane" id="editor-pane">
+        <div class="pane-header">Attributes</div>
+        <div class="pane-body" id="editor-root">
+          <p class="editor-empty">Select a component in the tree to edit its attributes.</p>
+        </div>
+      </div>
+    </div>
+
+    <leaflet-map id="map" lat="51.505" lng="-0.09" zoom="13">
       <leaflet-tile-layer
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
@@ -68,7 +320,928 @@
       <leaflet-control-scale position="bottomleft"></leaflet-control-scale>
     </leaflet-map>
 
-    <!-- script type="module" src="./src/index.ts"></script -->
     <script type="module" src="/dist/index.js"></script>
+    <script type="module">
+      // ── Component metadata ──────────────────────────────────────────────────
+      // Defines valid child types for each parent and attributes for each component.
+      const CHILDREN_OF = {
+        'leaflet-map': [
+          'leaflet-tile-layer', 'leaflet-tile-layer-wms', 'leaflet-marker',
+          'leaflet-circle', 'leaflet-circle-marker', 'leaflet-polygon',
+          'leaflet-polyline', 'leaflet-rectangle', 'leaflet-geojson',
+          'leaflet-image-overlay', 'leaflet-video-overlay', 'leaflet-svg-overlay',
+          'leaflet-layer-group', 'leaflet-feature-group', 'leaflet-control-zoom',
+          'leaflet-control-scale', 'leaflet-control-attribution',
+        ],
+        'leaflet-layer-group': [
+          'leaflet-marker', 'leaflet-circle', 'leaflet-circle-marker',
+          'leaflet-polygon', 'leaflet-polyline', 'leaflet-rectangle',
+          'leaflet-geojson', 'leaflet-image-overlay', 'leaflet-video-overlay',
+          'leaflet-svg-overlay', 'leaflet-layer-group', 'leaflet-feature-group',
+        ],
+        'leaflet-feature-group': [
+          'leaflet-marker', 'leaflet-circle', 'leaflet-circle-marker',
+          'leaflet-polygon', 'leaflet-polyline', 'leaflet-rectangle',
+        ],
+        'leaflet-polygon': ['leaflet-line', 'leaflet-popup'],
+        'leaflet-polyline': ['leaflet-line', 'leaflet-popup'],
+        'leaflet-rectangle': ['leaflet-popup'],
+        'leaflet-marker': ['leaflet-popup', 'leaflet-tooltip'],
+        'leaflet-circle': ['leaflet-popup', 'leaflet-tooltip'],
+        'leaflet-circle-marker': ['leaflet-popup', 'leaflet-tooltip'],
+        'leaflet-image-overlay': ['leaflet-popup', 'leaflet-tooltip'],
+        'leaflet-video-overlay': ['leaflet-popup', 'leaflet-tooltip'],
+        'leaflet-geojson': ['leaflet-popup', 'leaflet-tooltip'],
+      };
+
+      const ATTRS = {
+        'leaflet-map': {
+          View: [
+            { attr: 'lat', kind: 'num', step: 'any' },
+            { attr: 'lng', kind: 'num', step: 'any' },
+            { attr: 'zoom', kind: 'num', step: '1', min: '0', max: '22' },
+            { attr: 'min-zoom', kind: 'num', min: '0', max: '22' },
+            { attr: 'max-zoom', kind: 'num', min: '0', max: '22' },
+          ],
+          Toggles: [
+            { attr: 'prefer-canvas', kind: 'bool' },
+            { attr: 'world-copy-jump', kind: 'bool' },
+            { attr: 'disable-scroll-wheel-zoom', kind: 'bool' },
+            { attr: 'disable-dragging', kind: 'bool' },
+            { attr: 'disable-touch-zoom', kind: 'bool' },
+            { attr: 'disable-double-click-zoom', kind: 'bool' },
+            { attr: 'disable-box-zoom', kind: 'bool' },
+            { attr: 'disable-keyboard', kind: 'bool' },
+            { attr: 'disable-tap-hold', kind: 'bool' },
+            { attr: 'disable-inertia', kind: 'bool' },
+            { attr: 'disable-close-popup-on-click', kind: 'bool' },
+            { attr: 'disable-track-resize', kind: 'bool' },
+            { attr: 'disable-zoom-control', kind: 'bool' },
+            { attr: 'disable-attribution-control', kind: 'bool' },
+            { attr: 'disable-zoom-animation', kind: 'bool' },
+            { attr: 'disable-fade-animation', kind: 'bool' },
+            { attr: 'disable-marker-zoom-animation', kind: 'bool' },
+            { attr: 'disable-bounce-at-zoom-limits', kind: 'bool' },
+          ],
+          Animation: [
+            { attr: 'zoom-animation-threshold', kind: 'num' },
+          ],
+          'Inertia & panning': [
+            { attr: 'inertia-deceleration', kind: 'num' },
+            { attr: 'inertia-max-speed', kind: 'num' },
+            { attr: 'ease-linearity', kind: 'num', step: 'any' },
+          ],
+          'Zoom behaviour': [
+            { attr: 'zoom-snap', kind: 'num', step: 'any' },
+            { attr: 'zoom-delta', kind: 'num', step: 'any' },
+            { attr: 'max-bounds-viscosity', kind: 'num', step: 'any', min: '0', max: '1' },
+          ],
+          'Scroll wheel': [
+            { attr: 'wheel-debounce-time', kind: 'num' },
+            { attr: 'wheel-px-per-zoom-level', kind: 'num' },
+          ],
+          'Keyboard & touch': [
+            { attr: 'keyboard-pan-delta', kind: 'num' },
+            { attr: 'tap-tolerance', kind: 'num' },
+          ],
+          Rendering: [
+            { attr: 'transform-3d-limit', kind: 'num' },
+          ],
+          CSS: [
+            { attr: 'css-url', kind: 'text' },
+            { attr: 'css-integrity', kind: 'text' },
+            { attr: 'css-crossorigin', kind: 'text' },
+          ],
+        },
+        'leaflet-tile-layer': {
+          Required: [
+            { attr: 'url', kind: 'text' },
+          ],
+          Options: [
+            { attr: 'attribution', kind: 'text' },
+            { attr: 'max-zoom', kind: 'num', min: '0', max: '22' },
+            { attr: 'min-zoom', kind: 'num', min: '0', max: '22' },
+            { attr: 'opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'tile-size', kind: 'num', min: '0' },
+            { attr: 'z-index', kind: 'num' },
+            { attr: 'bounds', kind: 'text' },
+            { attr: 'cross-origin', kind: 'bool' },
+          ],
+        },
+        'leaflet-tile-layer-wms': {
+          Required: [
+            { attr: 'url', kind: 'text' },
+            { attr: 'layers', kind: 'text' },
+          ],
+          Options: [
+            { attr: 'attribution', kind: 'text' },
+            { attr: 'styles', kind: 'text' },
+            { attr: 'format', kind: 'text' },
+            { attr: 'transparent', kind: 'bool' },
+            { attr: 'version', kind: 'text' },
+            { attr: 'uppercase', kind: 'bool' },
+            { attr: 'max-zoom', kind: 'num', min: '0', max: '22' },
+            { attr: 'min-zoom', kind: 'num', min: '0', max: '22' },
+            { attr: 'z-index', kind: 'num' },
+          ],
+        },
+        'leaflet-marker': {
+          Position: [
+            { attr: 'lat', kind: 'num', step: 'any' },
+            { attr: 'lng', kind: 'num', step: 'any' },
+          ],
+          Options: [
+            { attr: 'title', kind: 'text' },
+            { attr: 'alt', kind: 'text' },
+            { attr: 'draggable', kind: 'bool' },
+            { attr: 'opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'z-index-offset', kind: 'num' },
+          ],
+        },
+        'leaflet-circle': {
+          Position: [
+            { attr: 'lat', kind: 'num', step: 'any' },
+            { attr: 'lng', kind: 'num', step: 'any' },
+          ],
+          Options: [
+            { attr: 'radius', kind: 'num', min: '0' },
+            { attr: 'color', kind: 'text' },
+            { attr: 'weight', kind: 'num', min: '0' },
+            { attr: 'opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'line-cap', kind: 'text' },
+            { attr: 'line-join', kind: 'text' },
+            { attr: 'dash-array', kind: 'text' },
+            { attr: 'dash-offset', kind: 'text' },
+            { attr: 'fill', kind: 'bool' },
+            { attr: 'fill-color', kind: 'text' },
+            { attr: 'fill-opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'fill-rule', kind: 'text' },
+            { attr: 'bubbling-mouse-events', kind: 'bool' },
+          ],
+        },
+        'leaflet-circle-marker': {
+          Position: [
+            { attr: 'lat', kind: 'num', step: 'any' },
+            { attr: 'lng', kind: 'num', step: 'any' },
+          ],
+          Options: [
+            { attr: 'radius', kind: 'num', min: '0' },
+            { attr: 'color', kind: 'text' },
+            { attr: 'weight', kind: 'num', min: '0' },
+            { attr: 'opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'line-cap', kind: 'text' },
+            { attr: 'line-join', kind: 'text' },
+            { attr: 'dash-array', kind: 'text' },
+            { attr: 'dash-offset', kind: 'text' },
+            { attr: 'fill', kind: 'bool' },
+            { attr: 'fill-color', kind: 'text' },
+            { attr: 'fill-opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'fill-rule', kind: 'text' },
+          ],
+        },
+        'leaflet-polygon': {
+          Options: [
+            { attr: 'color', kind: 'text' },
+            { attr: 'weight', kind: 'num', min: '0' },
+            { attr: 'opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'line-cap', kind: 'text' },
+            { attr: 'line-join', kind: 'text' },
+            { attr: 'dash-array', kind: 'text' },
+            { attr: 'dash-offset', kind: 'text' },
+            { attr: 'fill', kind: 'bool' },
+            { attr: 'fill-color', kind: 'text' },
+            { attr: 'fill-opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'fill-rule', kind: 'text' },
+          ],
+        },
+        'leaflet-polyline': {
+          Options: [
+            { attr: 'color', kind: 'text' },
+            { attr: 'weight', kind: 'num', min: '0' },
+            { attr: 'opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'line-cap', kind: 'text' },
+            { attr: 'line-join', kind: 'text' },
+            { attr: 'dash-array', kind: 'text' },
+            { attr: 'dash-offset', kind: 'text' },
+          ],
+        },
+        'leaflet-line': {
+          Position: [
+            { attr: 'lat', kind: 'num', step: 'any' },
+            { attr: 'lng', kind: 'num', step: 'any' },
+          ],
+        },
+        'leaflet-rectangle': {
+          Options: [
+            { attr: 'bounds', kind: 'text' },
+            { attr: 'color', kind: 'text' },
+            { attr: 'weight', kind: 'num', min: '0' },
+            { attr: 'opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'line-cap', kind: 'text' },
+            { attr: 'line-join', kind: 'text' },
+            { attr: 'dash-array', kind: 'text' },
+            { attr: 'dash-offset', kind: 'text' },
+            { attr: 'fill', kind: 'bool' },
+            { attr: 'fill-color', kind: 'text' },
+            { attr: 'fill-opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'fill-rule', kind: 'text' },
+          ],
+        },
+        'leaflet-geojson': {
+          Data: [
+            { attr: 'data', kind: 'text' },
+          ],
+          Style: [
+            { attr: 'stroke', kind: 'text' },
+            { attr: 'color', kind: 'text' },
+            { attr: 'weight', kind: 'num', min: '0' },
+            { attr: 'opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'line-cap', kind: 'text' },
+            { attr: 'line-join', kind: 'text' },
+            { attr: 'dash-array', kind: 'text' },
+            { attr: 'dash-offset', kind: 'text' },
+            { attr: 'fill', kind: 'bool' },
+            { attr: 'fill-color', kind: 'text' },
+            { attr: 'fill-opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'fill-rule', kind: 'text' },
+          ],
+        },
+        'leaflet-image-overlay': {
+          Required: [
+            { attr: 'url', kind: 'text' },
+            { attr: 'bounds', kind: 'text' },
+          ],
+          Options: [
+            { attr: 'opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'alt', kind: 'text' },
+            { attr: 'interactive', kind: 'bool' },
+            { attr: 'cross-origin', kind: 'text' },
+            { attr: 'error-overlay-url', kind: 'text' },
+            { attr: 'z-index', kind: 'num' },
+            { attr: 'class-name', kind: 'text' },
+            { attr: 'attribution', kind: 'text' },
+          ],
+        },
+        'leaflet-video-overlay': {
+          Required: [
+            { attr: 'url', kind: 'text' },
+            { attr: 'bounds', kind: 'text' },
+          ],
+          Options: [
+            { attr: 'opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'alt', kind: 'text' },
+            { attr: 'interactive', kind: 'bool' },
+            { attr: 'cross-origin', kind: 'text' },
+            { attr: 'loop', kind: 'bool' },
+            { attr: 'autoplay', kind: 'bool' },
+            { attr: 'muted', kind: 'bool' },
+            { attr: 'playsinline', kind: 'bool' },
+            { attr: 'attribution', kind: 'text' },
+          ],
+        },
+        'leaflet-svg-overlay': {
+          Options: [
+            { attr: 'bounds', kind: 'text' },
+            { attr: 'opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+            { attr: 'interactive', kind: 'bool' },
+            { attr: 'cross-origin', kind: 'text' },
+            { attr: 'z-index', kind: 'num' },
+            { attr: 'class-name', kind: 'text' },
+          ],
+        },
+        'leaflet-layer-group': {},
+        'leaflet-feature-group': {},
+        'leaflet-popup': {
+          Position: [
+            { attr: 'lat', kind: 'num', step: 'any' },
+            { attr: 'lng', kind: 'num', step: 'any' },
+          ],
+          Options: [
+            { attr: 'max-width', kind: 'num' },
+            { attr: 'min-width', kind: 'num' },
+            { attr: 'max-height', kind: 'num' },
+            { attr: 'auto-pan', kind: 'bool' },
+            { attr: 'close-button', kind: 'bool' },
+            { attr: 'auto-close', kind: 'bool' },
+          ],
+        },
+        'leaflet-tooltip': {
+          Position: [
+            { attr: 'lat', kind: 'num', step: 'any' },
+            { attr: 'lng', kind: 'num', step: 'any' },
+          ],
+          Options: [
+            { attr: 'pane', kind: 'text' },
+            { attr: 'offset', kind: 'text' },
+            { attr: 'direction', kind: 'text' },
+            { attr: 'permanent', kind: 'bool' },
+            { attr: 'sticky', kind: 'bool' },
+            { attr: 'opacity', kind: 'num', step: 'any', min: '0', max: '1' },
+          ],
+        },
+        'leaflet-control-zoom': {
+          Options: [
+            { attr: 'position', kind: 'text' },
+            { attr: 'zoom-in-text', kind: 'text' },
+            { attr: 'zoom-in-title', kind: 'text' },
+            { attr: 'zoom-out-text', kind: 'text' },
+            { attr: 'zoom-out-title', kind: 'text' },
+          ],
+        },
+        'leaflet-control-scale': {
+          Options: [
+            { attr: 'position', kind: 'text' },
+            { attr: 'max-width', kind: 'num' },
+            { attr: 'metric', kind: 'bool' },
+            { attr: 'imperial', kind: 'bool' },
+            { attr: 'update-when-idle', kind: 'bool' },
+          ],
+        },
+        'leaflet-control-attribution': {
+          Options: [
+            { attr: 'position', kind: 'text' },
+            { attr: 'prefix', kind: 'text' },
+          ],
+        },
+      };
+
+      // ── State ────────────────────────────────────────────────────────────────
+      let selectedEl = null;
+      let addingToEl = null;
+      const observer = new MutationObserver(rebuildTree);
+      const elMap = new WeakMap(); // node -> tree DOM node
+
+      // ── Tree rendering ──────────────────────────────────────────────────────
+      function tagName(el) {
+        return el.tagName.toLowerCase();
+      }
+
+      function buildTree(parentEl, container) {
+        for (const child of parentEl.children) {
+          if (!child.tagName.startsWith('LEAFLET-')) continue;
+
+          const node = document.createElement('div');
+          node.className = 'tree-node';
+
+          const row = document.createElement('div');
+          row.className = 'tree-row' + (child === selectedEl ? ' selected' : '');
+          row.dataset.el = child;
+
+          const tag = document.createElement('span');
+          tag.className = 'tag';
+          tag.textContent = tagName(child);
+
+          row.appendChild(tag);
+
+          // Add-child button (before remove-btn for non-map, after tag for map)
+          const validChildren = CHILDREN_OF[tagName(child)];
+          if (validChildren && validChildren.length > 0) {
+            const addBtn = document.createElement('button');
+            addBtn.className = 'add-child-btn';
+            addBtn.textContent = '+';
+            addBtn.title = 'Add child';
+            addBtn.addEventListener('click', (e) => {
+              e.stopPropagation();
+              startAddChild(child);
+            });
+            row.appendChild(addBtn);
+          }
+
+          // Remove button (not for root map)
+          if (tagName(child) !== 'leaflet-map') {
+            const removeBtn = document.createElement('button');
+            removeBtn.className = 'remove-btn';
+            removeBtn.textContent = '\u00d7';
+            removeBtn.title = 'Remove';
+            removeBtn.addEventListener('click', (e) => {
+              e.stopPropagation();
+              child.remove();
+            });
+            row.appendChild(removeBtn);
+          }
+
+          row.addEventListener('click', (e) => {
+            e.stopPropagation();
+            selectElement(child);
+          });
+
+          node.appendChild(row);
+
+          // Children
+          const childContainer = document.createElement('div');
+          childContainer.className = 'tree-children';
+          buildTree(child, childContainer);
+          if (childContainer.childNodes.length > 0) {
+            node.appendChild(childContainer);
+          }
+
+          container.appendChild(node);
+        }
+      }
+
+      function rebuildTree() {
+        const treeRoot = document.getElementById('tree-root');
+        treeRoot.innerHTML = '';
+        const mapEl = document.getElementById('map');
+        if (!mapEl) return;
+
+        // Map row
+        const mapNode = document.createElement('div');
+        mapNode.className = 'tree-node';
+        const mapRow = document.createElement('div');
+        mapRow.className = 'tree-row' + (selectedEl === mapEl ? ' selected' : '');
+        mapRow.dataset.el = mapEl;
+        const mapTag = document.createElement('span');
+        mapTag.className = 'tag';
+        mapTag.textContent = 'leaflet-map';
+        mapRow.appendChild(mapTag);
+
+        // Add-child button
+        const mapAddBtn = document.createElement('button');
+        mapAddBtn.className = 'add-child-btn';
+        mapAddBtn.textContent = '+';
+        mapAddBtn.title = 'Add child';
+        mapAddBtn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          startAddChild(mapEl);
+        });
+        mapRow.appendChild(mapAddBtn);
+
+        mapRow.addEventListener('click', (e) => {
+          e.stopPropagation();
+          selectElement(mapEl);
+        });
+        mapNode.appendChild(mapRow);
+
+        const childContainer = document.createElement('div');
+        childContainer.className = 'tree-children';
+        buildTree(mapEl, childContainer);
+        mapNode.appendChild(childContainer);
+
+        treeRoot.appendChild(mapNode);
+      }
+
+      // ── Element selection ───────────────────────────────────────────────────
+      function selectElement(el) {
+        selectedEl = el;
+        rebuildTree();
+        renderEditor(el);
+      }
+
+      // ── Editor rendering ────────────────────────────────────────────────────
+      function renderEditor(el) {
+        const editorRoot = document.getElementById('editor-root');
+        editorRoot.innerHTML = '';
+
+        if (!el) {
+          editorRoot.innerHTML = '<p class="editor-empty">Select a component in the tree to edit its attributes.</p>';
+          return;
+        }
+
+        const tag = tagName(el);
+        const attrDefs = ATTRS[tag] || {};
+
+        // Component name header
+        const header = document.createElement('div');
+        header.style.marginBottom = '12px';
+        const tagSpan = document.createElement('span');
+        tagSpan.style.fontFamily = 'monospace';
+        tagSpan.style.fontSize = '14px';
+        tagSpan.style.color = '#2563eb';
+        tagSpan.style.fontWeight = '600';
+        tagSpan.textContent = tag;
+        header.appendChild(tagSpan);
+        if (el.id) {
+          const idSpan = document.createElement('span');
+          idSpan.style.marginLeft = '8px';
+          idSpan.style.fontSize = '12px';
+          idSpan.style.color = '#888';
+          idSpan.textContent = `#${el.id}`;
+          header.appendChild(idSpan);
+        }
+        editorRoot.appendChild(header);
+
+        // Render attribute sections
+        for (const [section, attrs] of Object.entries(attrDefs)) {
+          if (attrs.length === 0) continue;
+
+          const sectionDiv = document.createElement('div');
+          sectionDiv.className = 'editor-section';
+
+          const h4 = document.createElement('h4');
+          h4.textContent = section;
+          sectionDiv.appendChild(h4);
+
+          for (const attrDef of attrs) {
+            const row = document.createElement('div');
+            row.className = 'editor-row';
+
+            const label = document.createElement('label');
+            label.textContent = attrDef.attr;
+
+            if (attrDef.kind === 'bool') {
+              const checkbox = document.createElement('input');
+              checkbox.type = 'checkbox';
+              checkbox.checked = el.hasAttribute(attrDef.attr);
+              checkbox.addEventListener('change', () => {
+                if (checkbox.checked) {
+                  el.setAttribute(attrDef.attr, '');
+                } else {
+                  el.removeAttribute(attrDef.attr);
+                }
+              });
+
+              // Sync from DOM
+              const syncObs = new MutationObserver(() => {
+                checkbox.checked = el.hasAttribute(attrDef.attr);
+              });
+              syncObs.observe(el, { attributes: true, attributeFilter: [attrDef.attr] });
+
+              label.prepend(checkbox);
+              row.appendChild(label);
+            } else if (attrDef.kind === 'num') {
+              const input = document.createElement('input');
+              input.type = 'number';
+              input.value = el.getAttribute(attrDef.attr) ?? '';
+              if (attrDef.step) input.step = attrDef.step;
+              if (attrDef.min) input.min = attrDef.min;
+              if (attrDef.max) input.max = attrDef.max;
+              input.placeholder = attrDef.attr;
+
+              input.addEventListener('input', () => {
+                if (input.value === '') {
+                  el.removeAttribute(attrDef.attr);
+                } else {
+                  el.setAttribute(attrDef.attr, input.value);
+                }
+              });
+
+              // Sync from DOM
+              const syncObs = new MutationObserver(() => {
+                input.value = el.getAttribute(attrDef.attr) ?? '';
+              });
+              syncObs.observe(el, { attributes: true, attributeFilter: [attrDef.attr] });
+
+              row.appendChild(label);
+              row.appendChild(input);
+            } else {
+              const input = document.createElement('input');
+              input.type = 'text';
+              input.value = el.getAttribute(attrDef.attr) ?? '';
+              input.placeholder = attrDef.attr;
+
+              input.addEventListener('input', () => {
+                if (input.value === '') {
+                  el.removeAttribute(attrDef.attr);
+                } else {
+                  el.setAttribute(attrDef.attr, input.value);
+                }
+              });
+
+              // Sync from DOM
+              const syncObs = new MutationObserver(() => {
+                input.value = el.getAttribute(attrDef.attr) ?? '';
+              });
+              syncObs.observe(el, { attributes: true, attributeFilter: [attrDef.attr] });
+
+              row.appendChild(label);
+              row.appendChild(input);
+            }
+
+            sectionDiv.appendChild(row);
+          }
+
+          // Add single "Pick on map" button if section has lat/lng pair
+          const hasLat = attrs.some(a => a.attr === 'lat');
+          const hasLng = attrs.some(a => a.attr === 'lng');
+          if (hasLat && hasLng) {
+            const pickRow = document.createElement('div');
+            pickRow.className = 'editor-row';
+            const pickBtn = document.createElement('button');
+            pickBtn.className = 'pick-btn';
+            pickBtn.textContent = 'Pick on map';
+            pickBtn.addEventListener('click', () => startPickLatLng(el, pickBtn));
+            pickRow.appendChild(pickBtn);
+            sectionDiv.appendChild(pickRow);
+          }
+
+          editorRoot.appendChild(sectionDiv);
+        }
+
+        // Show innerHTML content for popup/tooltip
+        if (tag === 'leaflet-popup' || tag === 'leaflet-tooltip') {
+          const sectionDiv = document.createElement('div');
+          sectionDiv.className = 'editor-section';
+
+          const h4 = document.createElement('h4');
+          h4.textContent = 'Inner HTML';
+          sectionDiv.appendChild(h4);
+
+          const textarea = document.createElement('textarea');
+          textarea.style.width = '100%';
+          textarea.style.minHeight = '80px';
+          textarea.style.fontFamily = 'monospace';
+          textarea.style.fontSize = '12px';
+          textarea.style.padding = '6px';
+          textarea.style.border = '1px solid #ccc';
+          textarea.style.borderRadius = '4px';
+          textarea.value = el.innerHTML;
+          textarea.addEventListener('input', () => {
+            el.innerHTML = textarea.value;
+          });
+
+          // Sync from DOM
+          const syncObs = new MutationObserver(() => {
+            if (document.activeElement !== textarea) {
+              textarea.value = el.innerHTML;
+            }
+          });
+          syncObs.observe(el, { childList: true, characterData: true, subtree: true });
+
+          sectionDiv.appendChild(textarea);
+          editorRoot.appendChild(sectionDiv);
+        }
+
+        // Show data attribute for geojson
+        if (tag === 'leaflet-geojson') {
+          const sectionDiv = document.createElement('div');
+          sectionDiv.className = 'editor-section';
+
+          const h4 = document.createElement('h4');
+          h4.textContent = 'GeoJSON Data';
+          sectionDiv.appendChild(h4);
+
+          const textarea = document.createElement('textarea');
+          textarea.style.width = '100%';
+          textarea.style.minHeight = '120px';
+          textarea.style.fontFamily = 'monospace';
+          textarea.style.fontSize = '12px';
+          textarea.style.padding = '6px';
+          textarea.style.border = '1px solid #ccc';
+          textarea.style.borderRadius = '4px';
+          textarea.value = el.getAttribute('data') ?? '';
+          textarea.addEventListener('input', () => {
+            el.setAttribute('data', textarea.value);
+          });
+
+          sectionDiv.appendChild(textarea);
+          editorRoot.appendChild(sectionDiv);
+        }
+
+        // Source HTML
+        const htmlSection = document.createElement('div');
+        htmlSection.className = 'editor-section';
+
+        const htmlH4 = document.createElement('h4');
+        htmlH4.textContent = 'Source HTML';
+        htmlSection.appendChild(htmlH4);
+
+        const htmlDisplay = document.createElement('textarea');
+        htmlDisplay.readOnly = true;
+        htmlDisplay.style.width = '100%';
+        htmlDisplay.style.minHeight = '60px';
+        htmlDisplay.style.fontFamily = 'monospace';
+        htmlDisplay.style.fontSize = '12px';
+        htmlDisplay.style.padding = '6px';
+        htmlDisplay.style.border = '1px solid #ddd';
+        htmlDisplay.style.borderRadius = '4px';
+        htmlDisplay.style.background = '#fafafa';
+        htmlDisplay.style.color = '#333';
+        htmlDisplay.value = el.outerHTML;
+        htmlSection.appendChild(htmlDisplay);
+
+        const htmlSync = new MutationObserver(() => {
+          htmlDisplay.value = el.outerHTML;
+        });
+        htmlSync.observe(el, { attributes: true, childList: true, subtree: true, characterData: true });
+
+        editorRoot.appendChild(htmlSection);
+
+        // Add-child form for container elements
+        const validChildren = CHILDREN_OF[tag];
+        if (validChildren && validChildren.length > 0) {
+          const addBtn = document.createElement('button');
+          addBtn.className = 'add-child-btn';
+          addBtn.textContent = '+ Add child';
+          addBtn.style.marginTop = '12px';
+          addBtn.addEventListener('click', () => startAddChild(el));
+          editorRoot.appendChild(addBtn);
+        }
+      }
+
+      // ── Pick lat/lng from map ──────────────────────────────────────────────
+      function startPickLatLng(el, btn, onPickCallback) {
+        const mapEl = document.getElementById('map');
+        const map = mapEl.map;
+        if (!map) return;
+
+        btn.classList.add('picking');
+        btn.textContent = 'Click on map...';
+
+        const cleanup = () => {
+          btn.classList.remove('picking');
+          btn.textContent = onPickCallback ? 'Pick' : 'Pick on map';
+          map.off('click', onPick);
+          map.off('keydown', onEscape);
+        };
+
+        const onPick = (e) => {
+          const lat = e.latlng.lat;
+          const lng = e.latlng.lng;
+          if (onPickCallback) {
+            onPickCallback(lat, lng);
+          } else {
+            el.setAttribute('lat', String(lat));
+            el.setAttribute('lng', String(lng));
+            // Update editor inputs if visible
+            const latInput = document.querySelector(`[data-attr="lat"]`);
+            const lngInput = document.querySelector(`[data-attr="lng"]`);
+            if (latInput && latInput.closest('.pane-body')?.id === 'editor-root') {
+              latInput.value = String(lat);
+            }
+            if (lngInput && lngInput.closest('.pane-body')?.id === 'editor-root') {
+              lngInput.value = String(lng);
+            }
+          }
+          cleanup();
+        };
+
+        const onEscape = (e) => {
+          if (e.originalEvent.key === 'Escape') cleanup();
+        };
+
+        map.on('click', onPick);
+        map.on('keydown', onEscape);
+      }
+
+      // ── Add child flow ──────────────────────────────────────────────────────
+      let prevEditorHTML = '';
+
+      function startAddChild(parentEl) {
+        addingToEl = parentEl;
+        const editorRoot = document.getElementById('editor-root');
+        const validChildren = CHILDREN_OF[tagName(parentEl)];
+        if (!validChildren || validChildren.length === 0) return;
+
+        // Save current editor content and replace with wizard
+        prevEditorHTML = editorRoot.innerHTML;
+        editorRoot.innerHTML = '';
+
+        const form = document.createElement('div');
+        form.className = 'add-child-form';
+
+        const h5 = document.createElement('h5');
+        h5.textContent = `Add child to <${tagName(parentEl)}>`;
+        h5.style.fontFamily = 'monospace';
+        form.appendChild(h5);
+
+        const select = document.createElement('select');
+        for (const childTag of validChildren) {
+          const opt = document.createElement('option');
+          opt.value = childTag;
+          opt.textContent = childTag;
+          select.appendChild(opt);
+        }
+        form.appendChild(select);
+
+        // Preview
+        const preview = document.createElement('div');
+        preview.style.fontFamily = 'monospace';
+        preview.style.fontSize = '12px';
+        preview.style.color = '#2563eb';
+        preview.style.margin = '6px 0';
+        form.appendChild(preview);
+
+        // Dynamic attribute form container
+        const attrFormContainer = document.createElement('div');
+        form.appendChild(attrFormContainer);
+
+        function renderAddChildAttrs() {
+          const tag = select.value;
+          const attrDefs = ATTRS[tag] || {};
+          attrFormContainer.innerHTML = '';
+          preview.textContent = `<${tag}></${tag}>`;
+
+          for (const [section, attrs] of Object.entries(attrDefs)) {
+            if (attrs.length === 0) continue;
+
+            const sectionDiv = document.createElement('div');
+            sectionDiv.className = 'editor-section';
+
+            const h4 = document.createElement('h4');
+            h4.textContent = section;
+            sectionDiv.appendChild(h4);
+
+            for (const attrDef of attrs) {
+              const row = document.createElement('div');
+              row.className = 'editor-row';
+
+              const label = document.createElement('label');
+              label.textContent = attrDef.attr;
+
+              if (attrDef.kind === 'bool') {
+                const checkbox = document.createElement('input');
+                checkbox.type = 'checkbox';
+                checkbox.dataset.addAttr = attrDef.attr;
+                label.prepend(checkbox);
+                row.appendChild(label);
+              } else if (attrDef.kind === 'num') {
+                const input = document.createElement('input');
+                input.type = 'number';
+                input.dataset.addAttr = attrDef.attr;
+                if (attrDef.step) input.step = attrDef.step;
+                if (attrDef.min) input.min = attrDef.min;
+                if (attrDef.max) input.max = attrDef.max;
+                input.placeholder = attrDef.attr;
+
+                row.appendChild(label);
+                row.appendChild(input);
+
+                if (attrDef.attr === 'lng') {
+                  const pickBtn = document.createElement('button');
+                  pickBtn.className = 'pick-btn';
+                  pickBtn.textContent = 'Pick';
+                  pickBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    startPickLatLng(null, pickBtn, (lat, lng) => {
+                      const latInput = attrFormContainer.querySelector('[data-add-attr="lat"]');
+                      const lngInput = attrFormContainer.querySelector('[data-add-attr="lng"]');
+                      if (latInput) latInput.value = String(lat);
+                      if (lngInput) lngInput.value = String(lng);
+                    });
+                  });
+                  row.appendChild(pickBtn);
+                }
+              } else {
+                const input = document.createElement('input');
+                input.type = 'text';
+                input.dataset.addAttr = attrDef.attr;
+                input.placeholder = attrDef.attr;
+
+                row.appendChild(label);
+                row.appendChild(input);
+              }
+
+              sectionDiv.appendChild(row);
+            }
+
+            attrFormContainer.appendChild(sectionDiv);
+          }
+        }
+
+        select.addEventListener('change', renderAddChildAttrs);
+        renderAddChildAttrs();
+
+        // Actions
+        const actions = document.createElement('div');
+        actions.className = 'form-actions';
+
+        const insertBtn = document.createElement('button');
+        insertBtn.className = 'primary';
+        insertBtn.textContent = 'Insert';
+        insertBtn.addEventListener('click', () => {
+          const tag = select.value;
+          const newEl = document.createElement(tag);
+
+          for (const input of attrFormContainer.querySelectorAll('[data-add-attr]')) {
+            const attr = input.dataset.addAttr;
+            if (input.type === 'checkbox') {
+              if (input.checked) newEl.setAttribute(attr, '');
+            } else if (input.value !== '') {
+              newEl.setAttribute(attr, input.value);
+            }
+          }
+
+          parentEl.appendChild(newEl);
+          addingToEl = null;
+          selectElement(newEl);
+        });
+
+        const cancelBtn = document.createElement('button');
+        cancelBtn.className = 'cancel';
+        cancelBtn.textContent = 'Cancel';
+        cancelBtn.addEventListener('click', () => {
+          addingToEl = null;
+          editorRoot.innerHTML = prevEditorHTML;
+          prevEditorHTML = '';
+        });
+
+        actions.appendChild(insertBtn);
+        actions.appendChild(cancelBtn);
+        form.appendChild(actions);
+
+        editorRoot.appendChild(form);
+      }
+
+      // ── Initialize ──────────────────────────────────────────────────────────
+      const mapEl = document.getElementById('map');
+
+      // Watch for DOM changes to rebuild tree
+      observer.observe(mapEl, { childList: true, subtree: true, attributes: false });
+
+      rebuildTree();
+      selectElement(mapEl);
+    </script>
   </body>
 </html>