fix(lit-components): fix rendering and interaction issues in force-graph, html-table, and draggable-dom
Build and Deploy / build-and-deploy (push) Has been cancelled

- 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.
This commit is contained in:
2026-05-17 00:41:14 -07:00
parent bbdbeb9788
commit b9e42c3ef4
253 changed files with 2555 additions and 4471 deletions
@@ -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);
}
}