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-node-editor/canvas/label.ts

@@ -0,0 +1,63 @@
+import { ColorMixin, Offset, Size } from "./utils";
+
+interface LabelOptions extends Offset, ColorMixin {
+  text: string;
+  maxWidth?: number;
+  fontFamily?: string;
+  fontSize?: number;
+  fontStyle?: "normal" | "italic" | "oblique" | "initial" | "inherit";
+  fontWeight?: string;
+  textAlign?: "left" | "center" | "right";
+  lineHeight?: number;
+  textBaseline?:
+    | "top"
+    | "hanging"
+    | "middle"
+    | "alphabetic"
+    | "ideographic"
+    | "bottom";
+}
+
+const DEFAULT_TEXT_HEIGHT = 8;
+
+export function drawLabel(
+  ctx: CanvasRenderingContext2D,
+  options: LabelOptions
+): Size {
+  const {
+    x = 0,
+    y = 0,
+    maxWidth,
+    fontFamily = "Roboto",
+    fontSize = DEFAULT_TEXT_HEIGHT,
+    fontStyle = "normal",
+    fontWeight = "normal",
+    textAlign = "left",
+    textBaseline = "alphabetic",
+    lineHeight = 1.2,
+    text,
+    fillColor,
+    strokeColor,
+  } = options;
+  ctx.save();
+  ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${lineHeight}em ${fontFamily}`;
+  ctx.textAlign = textAlign;
+  ctx.textBaseline = textBaseline;
+
+  if (fillColor) {
+    ctx.fillStyle = fillColor;
+    ctx.fillText(text, x, y, maxWidth);
+  }
+
+  if (strokeColor) {
+    ctx.strokeStyle = strokeColor;
+    ctx.strokeText(text, x, y, maxWidth);
+  }
+
+  ctx.restore();
+
+  // Measure the text
+  const metrics = ctx.measureText(options.text);
+  const height = fontSize * lineHeight;
+  return { height, width: metrics.width };
+}