Add UI web components and adjust .gitignore

static/components/toolbar/toolbar.js

@@ -0,0 +1,57 @@
+// Toolbar component logic
+
+class Toolbar extends HTMLElement {
+  constructor() {
+    super();
+
+    // Attach a shadow root and clone the template defined in toolbar.html
+    this.attachShadow({ mode: 'open' });
+    const tmpl = document.getElementById('toolbar-template');
+    if (!tmpl) {
+      console.error('Toolbar: template not found in DOM');
+      return;
+    }
+    this.shadowRoot.appendChild(tmpl.content.cloneNode(true));
+
+    // Bind internal handlers
+    this._onColorChange = this._onColorChange.bind(this);
+    this._onGridChange = this._onGridChange.bind(this);
+  }
+
+  connectedCallback() {
+    // Listen for events bubbled up from slotted child components
+    this.addEventListener('colorchange', this._onColorChange);
+    this.addEventListener('gridchange', this._onGridChange);
+  }
+
+  disconnectedCallback() {
+    // Clean up listeners when the element is removed
+    this.removeEventListener('colorchange', this._onColorChange);
+    this.removeEventListener('gridchange', this._onGridChange);
+  }
+
+  // Forward background color changes as a toolbar‑specific event
+  _onColorChange(e) {
+    this.dispatchEvent(
+      new CustomEvent('bgcolorchange', {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  // Forward grid setting changes as a toolbar‑specific event
+  _onGridChange(e) {
+    this.dispatchEvent(
+      new CustomEvent('gridsettingschange', {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+}
+
+// Register the custom element; the tag name follows kebab‑case convention
+customElements.define('toolbar-component', Toolbar);