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/test-support/mocks/empty.css

@@ -0,0 +1 @@
+/* Empty CSS Mock */

lit-components/test-support/mocks/monaco.ts

@@ -0,0 +1,18 @@
+export const editor = {
+  create: () => ({
+    dispose: () => {},
+    getValue: () => "",
+    setValue: () => {},
+    updateOptions: () => {},
+    getModel: () => ({
+      onDidChangeContent: () => ({ dispose: () => {} }),
+    }),
+  }),
+  setTheme: () => {},
+};
+
+const monacoMock = {
+  editor,
+};
+
+export default monacoMock;

lit-components/test-support/mocks/opensheetmusicdisplay.ts

@@ -0,0 +1,6 @@
+export class OpenSheetMusicDisplay {
+  constructor() {}
+  load() { return Promise.resolve(); }
+  render() {}
+  zoom() {}
+}

lit-components/test-support/mocks/orbitcontrols.ts

@@ -0,0 +1,5 @@
+export class OrbitControls {
+  update() {}
+  addEventListener() {}
+  removeEventListener() {}
+}

lit-components/test-support/mocks/rxdb.ts

@@ -0,0 +1,27 @@
+import { Observable } from "rxjs";
+
+export const addRxPlugin = () => {};
+export const createRxDatabase = async () => {
+  const todosCollection = {
+    $: new Observable((subscriber) => {
+      subscriber.next([]);
+    }),
+    find: () => ({
+      $: new Observable((subscriber) => {
+        subscriber.next([]);
+      }),
+      exec: async () => [],
+    }),
+    insert: async (data) => data,
+    remove: async () => {},
+  };
+
+  return {
+    addCollections: async (collections) => {
+      return {
+        todos: todosCollection,
+      };
+    },
+    todos: todosCollection,
+  };
+};

lit-components/test-support/mocks/styles.ts

@@ -0,0 +1 @@
+export default "";

lit-components/test-support/mocks/three.ts

@@ -0,0 +1,79 @@
+export class WebGLRenderer {
+  domElement = document.createElement("div");
+  setSize() {}
+  render() {}
+  dispose() {}
+  setAnimationLoop() {}
+  setClearColor() {}
+}
+
+export class Scene {
+  add() {}
+  remove() {}
+}
+
+export class PerspectiveCamera {
+  position = { set: () => {}, x: 0, y: 0, z: 0 };
+  lookAt() {}
+  aspect = 1;
+  updateProjectionMatrix() {}
+}
+
+export class AmbientLight {}
+export class DirectionalLight {
+  position = { set: () => {} };
+  shadow = {
+    mapSize: { width: 0, height: 0 },
+    camera: { near: 0, far: 0, left: 0, right: 0, top: 0, bottom: 0 }
+  };
+}
+
+export class Mesh {
+  position = { set: () => {}, x: 0, y: 0, z: 0 };
+  rotation = { x: 0, y: 0, z: 0 };
+  scale = { set: () => {} };
+  userData = {};
+}
+
+export class BoxGeometry {}
+export class MeshStandardMaterial {}
+export class MeshBasicMaterial {}
+export class Color {
+  set() {}
+}
+export class Vector3 {
+  set() {}
+}
+export class Group {
+  add() {}
+  remove() {}
+  position = { set: () => {} };
+}
+export class Object3D {
+  add() {}
+  remove() {}
+}
+
+export class Raycaster {
+  setFromCamera() {}
+  intersectObjects() { return []; }
+}
+
+const threeMock = {
+  WebGLRenderer,
+  Scene,
+  PerspectiveCamera,
+  AmbientLight,
+  DirectionalLight,
+  Mesh,
+  BoxGeometry,
+  MeshStandardMaterial,
+  MeshBasicMaterial,
+  Color,
+  Vector3,
+  Group,
+  Object3D,
+  Raycaster,
+};
+
+export default threeMock;

lit-components/test-support/mocks/tone.ts

@@ -0,0 +1,16 @@
+export class Synth {
+  triggerAttackRelease() {}
+  toDestination() { return this; }
+}
+
+export class PolySynth {
+  triggerAttackRelease() {}
+  toDestination() { return this; }
+}
+
+const toneMock = {
+  Synth,
+  PolySynth,
+};
+
+export default toneMock;