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
+    // Create a template element with the canvas-display markup directly in JS
-    const tmpl = document.getElementById("canvas-display-template");
+    const tmpl = document.createElement("template");
-    if (!tmpl) {
+    tmpl.innerHTML = `
-      console.error("CanvasDisplay: template not found");
+    <style>
-      return;
+      :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

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");
+    // Create a template element with the side‑menu markup directly in JS
-    if (!tmpl) {
+    const tmpl = document.createElement("template");
-      console.error("SideMenu: template not found");
+    tmpl.innerHTML = `
-      return;
+  <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