export function initMeshPanel() {
  const panel = document.querySelector("[data-mesh-panel]");
  if (!panel) return;

  const root = document.documentElement;
  const controls = Array.from(panel.querySelectorAll("[data-mesh-control]"));
  if (!controls.length) return;

  const map = {
    size: "--mesh-size-mult",
  };

  controls.forEach((input) => {
    if (!(input instanceof HTMLInputElement)) return;
    const key = input.dataset.meshControl;
    const token = key ? map[key] : null;
    if (!token) return;

    const apply = () => {
      const raw = input.value;
      root.style.setProperty(token, raw);
      const out = panel.querySelector(`[data-mesh-value-for="${key}"]`);
      if (out) out.textContent = Number.parseFloat(raw).toFixed(2);
    };

    input.addEventListener("input", apply);
    apply();
  });
}