fix(lit-components): fix rendering and interaction issues in force-graph, html-table, and draggable-dom

- lit-force-graph: Refactored for instance reuse, better lifecycle management, and added dynamic imports for AR/VR modes.
- lit-html-table: Improved visual design, readability of headers, and fixed reactivity in editable mode.
- lit-draggable-dom: Fixed clipping issues by switching to relative/absolute positioning and resolved a panning speed bug caused by CSS variable inheritance.

lit-components/lit-sheet-music/sheet-music.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, test } from "vitest";
+import "./sheet-music";
+
+describe("Lit Sheet Music Component", () => {
+  test("registers sheet-music custom element successfully", () => {
+    expect(customElements.get("sheet-music")).toBeDefined();
+  });
+
+  test("mounts sheet-music successfully", async () => {
+    document.body.innerHTML = "<sheet-music></sheet-music>";
+    await window.happyDOM.whenAsyncComplete();
+
+    const element = document.body.querySelector("sheet-music");
+    expect(element).toBeDefined();
+    expect(element?.shadowRoot).toBeDefined();
+  });
+});

lit-components/lit-sheet-music/sheet-music.ts

@@ -0,0 +1,63 @@
+import { html, css, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { IOSMDOptions, OpenSheetMusicDisplay } from "opensheetmusicdisplay";
+
+type BackendType = "svg" | "canvas";
+type DrawingType = "compact" | "default";
+
+@customElement("sheet-music")
+export class SheetMusic extends LitElement {
+  _zoom = 1.0;
+  
+  @property({ type: Boolean }) allowDrop = false;
+  @property() src = "";
+
+  @query("main") canvas!: HTMLElement;
+
+  controller?: OpenSheetMusicDisplay;
+  options: IOSMDOptions = {
+    autoResize: true,
+    backend: "canvas" as BackendType,
+    drawingParameters: "default" as DrawingType,
+  };
+
+  static styles = css`
+    main {
+      overflow-x: auto;
+    }
+  `;
+
+  render() {
+    return html`<main></main>`;
+  }
+
+  async renderMusic(content: string) {
+    if (!this.controller) return;
+    await this.controller.load(content);
+    this.controller.zoom = this._zoom;
+    this.controller.render();
+    this.requestUpdate();
+  }
+
+  private async getMusic(): Promise<string> {
+    if (this.src.length > 0) return fetch(this.src).then((res) => res.text());
+    const elem = this.parentElement?.querySelector(
+      'script[type="text/xml"]'
+    ) as HTMLScriptElement;
+    if (elem) return elem.innerHTML;
+    return "";
+  }
+
+  async firstUpdated() {
+    this.controller = new OpenSheetMusicDisplay(this.canvas, this.options);
+    this.requestUpdate();
+    const music = await this.getMusic();
+    if (music) this.renderMusic(music);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sheet-music": SheetMusic;
+  }
+}