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/canvas-display/canvas-display.js

@@ -13,12 +13,47 @@ class CanvasDisplay extends HTMLElement {
     // Attach shadow root
     this.attachShadow({ mode: "open" });
 
-    // Grab the template defined in canvas-display.html
-    const tmpl = document.getElementById("canvas-display-template");
-    if (!tmpl) {
-      console.error("CanvasDisplay: template not found");
-      return;
-    }
+    // Create a template element with the canvas-display markup directly in JS
+    const tmpl = document.createElement("template");
+    tmpl.innerHTML = `
+    <style>
+      :host {
+        display: block;
+        position: relative;
+        font-family: sans-serif;
+      }
+
+      .canvas-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background: var(--bg-color, #ffffff);
+      }
+
+      /* grid overlay */
+      .grid-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+      }
+    </style>
+
+    <div class="canvas-wrapper">
+      <canvas id="draw-canvas"></canvas>
+      <svg class="grid-overlay" id="grid-overlay"></svg>
+    </div>
+
+`;
     this.shadowRoot.appendChild(tmpl.content.cloneNode(true));
 
     // Elements inside the shadow DOM