chore: initialize monorepo with project scaffolding, configs, and CI setup

apps/explorer-web/src/components/dataModeToggle.ts

@@ -0,0 +1,45 @@
+import { CONFIG, type DataMode } from "../config";
+import { getDataMode, setDataMode } from "../lib/mockData";
+
+const LABELS: Record<DataMode, string> = {
+  mock: "Mock Data",
+  live: "Live API",
+};
+
+export function initDataModeToggle(onChange: () => void): void {
+  const container = document.querySelector<HTMLDivElement>("[data-role='data-mode-toggle']");
+  if (!container) {
+    return;
+  }
+
+  container.innerHTML = renderControls(getDataMode());
+
+  const select = container.querySelector<HTMLSelectElement>("select[data-mode-select]");
+  if (!select) {
+    return;
+  }
+
+  select.value = getDataMode();
+  select.addEventListener("change", (event) => {
+    const value = (event.target as HTMLSelectElement).value as DataMode;
+    setDataMode(value);
+    document.documentElement.dataset.mode = value;
+    onChange();
+  });
+}
+
+function renderControls(mode: DataMode): string {
+  const options = (Object.keys(LABELS) as DataMode[])
+    .map((id) => `<option value="${id}" ${id === mode ? "selected" : ""}>${LABELS[id]}</option>`)
+    .join("");
+
+  return `
+    <label class="data-mode-toggle">
+      <span>Data Mode</span>
+      <select data-mode-select>
+        ${options}
+      </select>
+      <small>${mode === "mock" ? "Static JSON samples" : `Coordinator API (${CONFIG.apiBaseUrl})`}</small>
+    </label>
+  `;
+}