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/vite-rxdb-lit/services/base.ts

@@ -0,0 +1,73 @@
+import { RxCollection, RxDocument, RxJsonSchema } from "rxdb";
+import type { TopLevelProperty } from "rxdb/dist/types/types";
+
+export interface Base {
+  id: string;
+  [key: string]: any;
+}
+
+type BaseMethods = {};
+
+type BaseStatics = {};
+
+export type BaseCollection<
+  T extends Base,
+  M extends BaseMethods = BaseMethods,
+  C extends BaseStatics = BaseStatics
+> = RxCollection<T, M, C>;
+
+export type BaseDoc<T extends Base> = RxDocument<T, BaseMethods>;
+
+export interface SchemaOptions {
+  title: string;
+  description?: string;
+  version?: number;
+  keyCompression?: boolean;
+  properties: {
+    [key: string]: TopLevelProperty;
+  };
+}
+
+export function buildSchema<T extends Base>(
+  options: SchemaOptions
+): RxJsonSchema<T> {
+  return {
+    title: options.title,
+    description: options?.description ?? options.title,
+    version: options?.version ?? 0,
+    keyCompression: options?.keyCompression ?? true,
+    type: "object",
+    // @ts-ignore
+    properties: {
+      id: {
+        type: "string",
+        primary: true,
+      },
+      ...options.properties,
+    },
+    required: [
+      "id",
+      ...Object.entries(options.properties)
+        .filter((n) => {
+          const [_, value] = n;
+          return value.required;
+        })
+        .map((n) => {
+          const [key, _] = n;
+          return key;
+        }),
+    ],
+  };
+}
+
+const _methods: BaseMethods = {};
+
+const _statics: BaseStatics = {};
+
+export function createBase<T extends Base>(options: SchemaOptions) {
+  return {
+    schema: buildSchema<T>(options),
+    methods: _methods,
+    statics: _statics,
+  };
+}

lit-components/vite-rxdb-lit/services/database.ts

@@ -0,0 +1,54 @@
+// import "@babel/polyfill";
+
+import {
+  addRxPlugin,
+  createRxDatabase,
+  RxDatabase,
+  RxDocument,
+  RxQuery,
+} from "rxdb";
+
+// @ts-ignore
+import * as idb from "pouchdb-adapter-idb";
+import { TemplateResult } from "lit";
+import { futureBuilder } from "../components/future-builder";
+import { Todo, todosSchema } from "./todos";
+import { Base, BaseCollection } from "./base";
+import { DEFAULT_LOADING } from "../components/loading";
+
+const DATABASE_NAME = "todos" + "db";
+
+addRxPlugin(idb);
+
+export type Schema = {
+  todos: BaseCollection<Todo>;
+};
+
+export var db: RxDatabase<Schema>;
+
+async function setupDB() {
+  if (db) return db;
+  db = await createRxDatabase<Schema>({
+    name: DATABASE_NAME,
+    adapter: "idb",
+  });
+  await db.addCollections({
+    todos: todosSchema,
+  });
+  return db;
+}
+
+export const dbProvider = (
+  builder: (db: RxDatabase<Schema>) => TemplateResult,
+  loading: TemplateResult = DEFAULT_LOADING
+) => {
+  return futureBuilder(setupDB(), (res) => builder(res), loading);
+};
+
+export const queryBuilder = <T extends Base>(
+  query: RxQuery<any>,
+  builder: (result: RxDocument<T> | RxDocument<T>[]) => TemplateResult,
+  loading: TemplateResult = DEFAULT_LOADING
+) => {
+  return futureBuilder(query.exec(), (res) => builder(res), loading);
+};

lit-components/vite-rxdb-lit/services/todos.ts

@@ -0,0 +1,14 @@
+import { Base, createBase } from "./base";
+
+export interface Todo extends Base {
+  title: string;
+}
+
+export const todosSchema = createBase<Todo>({
+  title: "todos",
+  properties: {
+    title: {
+      type: "string",
+    },
+  },
+});