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;

lit-components/test-support/setup.ts

@@ -0,0 +1,67 @@
+import { vi } from "vitest";
+
+if (typeof customElements !== "undefined") {
+  const originalDefine = customElements.define;
+  customElements.define = function (name, constructor, options) {
+    if (customElements.get(name)) {
+      return;
+    }
+    originalDefine.call(customElements, name, constructor, options);
+  };
+}
+
+if (typeof window !== "undefined") {
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  window.ResizeObserver = ResizeObserverMock;
+}
+
+if (typeof HTMLCanvasElement !== "undefined") {
+  const dummyContext = {
+    measureText: () => ({ width: 0 }),
+  };
+  const canvasContextProxy = new Proxy(dummyContext, {
+    get(target, prop) {
+      if (prop in target) {
+        return target[prop];
+      }
+      return () => {};
+    }
+  });
+
+  HTMLCanvasElement.prototype.getContext = function (type) {
+    if (type === "2d") {
+      return canvasContextProxy;
+    }
+    return null;
+  };
+}
+
+if (typeof document !== "undefined" && !document.execCommand) {
+  document.execCommand = function () {
+    return true;
+  };
+}
+
+vi.mock("@capacitor/status-bar", () => {
+  return {
+    StatusBar: {
+      setStyle: async () => {},
+      show: async () => {},
+      hide: async () => {},
+      setOverlaysWebView: async () => {},
+    },
+    Style: {
+      Dark: "DARK",
+      Light: "LIGHT",
+      Default: "DEFAULT",
+    }
+  };
+});
+
+vi.mock("pouchdb-adapter-idb", () => {
+  return {};
+});