Mode:
PASSTHROUGH
`;
const slot = root.querySelector("slot");
const container = slot?.parentElement as HTMLElement;
if (container) container.replaceWith(wrapper);
// Cache refs
this.#titleEl = wrapper.querySelector(".title-input") as HTMLInputElement;
this.#modeEl = wrapper.querySelector(".mode-select") as HTMLSelectElement;
this.#chartEl = wrapper.querySelector(".chart-area") as HTMLElement;
this.#listEl = wrapper.querySelector(".entries-list") as HTMLElement;
// Set initial values
this.#titleEl.value = this.#title;
this.#modeEl.value = this.#mode;
this.#updateVisuals();
// Wire events
this.#titleEl.addEventListener("input", (e) => {
e.stopPropagation();
this.#title = this.#titleEl.value;
this.dispatchEvent(new CustomEvent("content-change"));
});
this.#modeEl.addEventListener("change", (e) => {
e.stopPropagation();
this.#mode = this.#modeEl.value as TransformMode;
this.#recalc();
});
wrapper.querySelector(".close-btn")!.addEventListener("click", (e) => {
e.stopPropagation();
this.dispatchEvent(new CustomEvent("close"));
});
// Prevent drag on inputs
for (const el of wrapper.querySelectorAll("input, select, button")) {
el.addEventListener("pointerdown", (e) => e.stopPropagation());
}
// Handle input port
this.addEventListener("port-value-changed", ((e: CustomEvent) => {
const { name, value } = e.detail;
if (name === "weight-in" && value && typeof value === "object") {
const v = value as any;
// Accept { who, weight } or { who, raw }
const who = v.who || v.memberName || "anonymous";
const raw = v.weight || v.raw || v.amount || 0;
// Update or add
const existing = this.#entries.find(e => e.who === who);
if (existing) {
existing.raw = raw;
existing.effective = this.#transform(raw);
} else {
this.#entries.push({ who, raw, effective: this.#transform(raw) });
}
this.#updateVisuals();
this.#emitPorts();
this.dispatchEvent(new CustomEvent("content-change"));
}
}) as EventListener);
return root;
}
#updateVisuals() {
this.#renderChart();
this.#renderList();
}
#renderChart() {
if (!this.#chartEl) return;
if (this.#entries.length === 0) {
this.#chartEl.innerHTML = "";
return;
}
const W = 220;
const H = 70;
const PAD = { top: 6, right: 8, bottom: 16, left: 8 };
const plotW = W - PAD.left - PAD.right;
const plotH = H - PAD.top - PAD.bottom;
const maxRaw = Math.max(1, ...this.#entries.map(e => e.raw));
const maxEff = Math.max(1, ...this.#entries.map(e => e.effective));
const maxVal = Math.max(maxRaw, maxEff);
const barW = Math.max(6, Math.min(20, plotW / (this.#entries.length * 2.5)));
let svg = `