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-modules/modules/app.ts

@@ -0,0 +1,48 @@
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import {
+  CounterModuleController,
+  counterModuleStyles,
+  counterModuleTemplate,
+} from "./counter";
+import { headerModuleStyles, headerModuleTemplate } from "./header";
+
+export const appModuleStyles = [
+  css`
+    main {
+      display: flex;
+      flex-direction: column;
+    }
+  `,
+  headerModuleStyles,
+  counterModuleStyles,
+];
+
+export interface AppModuleProps {
+  name: string;
+  counter: CounterModuleController;
+}
+
+export function appModuleTemplate(props: AppModuleProps) {
+  return html`<main>
+    ${headerModuleTemplate({
+      title: window.document.title,
+    })}
+    ${counterModuleTemplate({
+      counter: props.counter,
+    })}
+  </main> `;
+}
+
+@customElement("app-module")
+export class AppModule extends LitElement implements AppModuleProps {
+  static styles = appModuleStyles;
+
+  @property({ type: String }) name = "World";
+
+  counter = new CounterModuleController(this);
+
+  render() {
+    return appModuleTemplate(this);
+  }
+}

lit-components/lit-modules/modules/counter.ts

@@ -0,0 +1,70 @@
+import {
+  html,
+  css,
+  LitElement,
+  ReactiveController,
+  ReactiveControllerHost,
+} from "lit";
+import { customElement } from "lit/decorators.js";
+
+export const counterModuleStyles = [css`
+  .counter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .counter > .actions > * {
+    margin: 0.5rem;
+  }
+  .counter > span {
+    font-size: 1.5em;
+  }
+`];
+
+export class CounterModuleController implements ReactiveController {
+  constructor(public host: ReactiveControllerHost) {
+    host.addController(this);
+  }
+
+  value: number = 0;
+
+  hostConnected() {
+    this.value = 0;
+  }
+
+  increment() {
+    this.value++;
+    this.host.requestUpdate();
+  }
+
+  decrement() {
+    this.value--;
+    this.host.requestUpdate();
+  }
+}
+
+export interface CounterModuleProps {
+  counter: CounterModuleController;
+}
+
+export function counterModuleTemplate(props: CounterModuleProps) {
+  return html`<div class="counter">
+    <span>${props.counter.value}</span>
+    <div class="actions">
+      <button @click=${() => props.counter.increment()}>Increment +</button>
+      <button @click=${() => props.counter.decrement()}>Decrement -</button>
+    </div>
+  </div>`;
+}
+
+@customElement("counter-module")
+export class CounterModule extends LitElement implements CounterModuleProps {
+  static styles = counterModuleStyles;
+
+  counter = new CounterModuleController(this);
+
+  render() {
+    return counterModuleTemplate(this);
+  }
+}

lit-components/lit-modules/modules/header.ts

@@ -0,0 +1,32 @@
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export const headerModuleStyles = [css`
+  header {
+    height: 60px;
+    background-color: #f5f5f5;
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`];
+
+export interface HeaderModuleProps {
+  title: string;
+}
+
+export function headerModuleTemplate(props: HeaderModuleProps) {
+  return html`<header>${props.title}</header>`;
+}
+
+@customElement("header-module")
+export class HeaderModule extends LitElement implements HeaderModuleProps {
+  static styles = headerModuleStyles;
+
+  @property({ type: String }) title = "Lit Modules";
+
+  render() {
+    return headerModuleTemplate(this);
+  }
+}