Inline component templates into JS

- Replace HTML template lookups with programmatically created
  `<template>` elements.
- Add component‑specific styles and markup for CanvasDisplay, including
  a grid overlay SVG.
- Add SideMenu markup with toggle button, menu styling, and slot
  content.

static/components/side-menu/side-menu.js

@@ -6,11 +6,51 @@ class SideMenu extends HTMLElement {
 
     // Attach a shadow root and clone the template defined in side-menu.html
     this.attachShadow({ mode: "open" });
-    const tmpl = document.getElementById("side-menu-template");
-    if (!tmpl) {
-      console.error("SideMenu: template not found");
-      return;
+    // Create a template element with the side‑menu markup directly in JS
+    const tmpl = document.createElement("template");
+    tmpl.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      width: var(--side-menu-width, 250px);
+      height: 100%;
+      background: var(--side-menu-bg, #f9f9f9);
+      border-right: 1px solid #ccc;
+      box-sizing: border-box;
+      position: relative;
+      transition: transform 0.3s ease;
     }
+
+    .menu {
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    .toggle {
+      position: absolute;
+      top: 0.5rem;
+      right: -1.5rem;
+      background: var(--toggle-bg, #f0f0f0);
+      border: 1px solid #ccc;
+      border-left: none;
+      border-radius: 0 4px 4px 0;
+      padding: 0.25rem 0.5rem;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .collapsed {
+      transform: translateX(-100%);
+    }
+  </style>
+
+  <div class="toggle" part="toggle">☰</div>
+  <nav class="menu" part="menu">
+    <slot></slot>
+    <color-picker></color-picker>
+    <label id="grid-toggle-label"><input type="checkbox" id="grid-toggle"> Grid</label>
+  </nav>
+`;
     this.shadowRoot.appendChild(tmpl.content.cloneNode(true));
 
     // Reference the toggle button and the menu container