feat: group child tags by type in add-child wizard

When adding a child to leaflet-map, the tag select is now grouped
into categories: Tile Layers, Markers, Shapes, Data, Overlays,
Groups, and Controls, using <optgroup> elements.

index.html

@@ -354,6 +354,18 @@
         'leaflet-geojson': ['leaflet-popup', 'leaflet-tooltip'],
       };
 
+      const TAG_GROUPS = {
+        'leaflet-map': [
+          { label: 'Tile Layers', tags: ['leaflet-tile-layer', 'leaflet-tile-layer-wms'] },
+          { label: 'Markers', tags: ['leaflet-marker'] },
+          { label: 'Shapes', tags: ['leaflet-circle', 'leaflet-circle-marker', 'leaflet-polygon', 'leaflet-polyline', 'leaflet-rectangle'] },
+          { label: 'Data', tags: ['leaflet-geojson'] },
+          { label: 'Overlays', tags: ['leaflet-image-overlay', 'leaflet-video-overlay', 'leaflet-svg-overlay'] },
+          { label: 'Groups', tags: ['leaflet-layer-group', 'leaflet-feature-group'] },
+          { label: 'Controls', tags: ['leaflet-control-zoom', 'leaflet-control-scale', 'leaflet-control-attribution'] },
+        ],
+      };
+
       const ATTRS = {
         'leaflet-map': {
           View: [
@@ -1096,11 +1108,26 @@
         form.appendChild(h5);
 
         const select = document.createElement('select');
-        for (const childTag of validChildren) {
+        const groups = TAG_GROUPS[tagName(parentEl)];
-          const opt = document.createElement('option');
+        if (groups) {
-          opt.value = childTag;
+          for (const group of groups) {
-          opt.textContent = childTag;
+            const optgroup = document.createElement('optgroup');
-          select.appendChild(opt);
+            optgroup.label = group.label;
+            for (const childTag of group.tags) {
+              const opt = document.createElement('option');
+              opt.value = childTag;
+              opt.textContent = childTag;
+              optgroup.appendChild(opt);
+            }
+            select.appendChild(optgroup);
+          }
+        } else {
+          for (const childTag of validChildren) {
+            const opt = document.createElement('option');
+            opt.value = childTag;
+            opt.textContent = childTag;
+            select.appendChild(opt);
+          }
         }
         form.appendChild(select);