Extract reusable settings UI

Move the Commonwealth Online settings screen into a shared module with its own data, styles, and controller API. The pause menu now mounts the reusable component, keeps the prompt bar behavior consistent, and animates the panel open/close with a subtler transition.

changelog.md

@@ -10,6 +10,11 @@ For testing notes, milestone summaries, known issues, and next steps, see [`docs
 ## [Unreleased]
 
 ### Changed
+- Pause menu settings panel fades and slides in subtly on open and animates out on back (opacity + 10px vertical offset, 220ms ease-out).
+- Pause menu no longer opens the settings panel automatically on load; the pause screen starts with no menu selection and no sub-view open.
+- Settings panel uses a fixed width/height and centered position in the pause menu; tab panes share a stacked content area so switching FALLOUT 4 / MULTIPLAYER no longer resizes the window.
+- Settings controller prompt bar no longer changes labels or visibility when switching tabs (MOVE, CHANGE, SELECT, BACK, SWITCH FOCUS stay consistent).
+- Pause menu settings UI extracted into reusable module at `ui/views/CommonwealthOnline/settings/` (`settings-data.js`, `settings.js`, `settings.css`). Pause menu mounts it via `CO_Settings.create()` so the same component can be embedded in a future custom main menu with `layout: "standalone"`.
 - Pause menu map wheel zoom now scales smoothly toward the mouse cursor instead of snapping to the viewport center.
 - Pause menu map drag-pan eases toward the pointer and coasts with inertia on release.
 - Pause menu settings prototype now uses two tabs only: **GAME SETTINGS** (placeholder to open vanilla Fallout 4 settings later) and **MULTIPLAYER SETTINGS** (custom Commonwealth Online options for Profile, Voice Chat, Map & Social, and Network). Removed the full category clone (Gameplay, Display, Audio, Controls, Accessibility, etc.).
@@ -18,10 +23,12 @@ For testing notes, milestone summaries, known issues, and next steps, see [`docs
 - Selected multiplayer setting rows use a solid amber bar with a thin green leading edge instead of a muddy green-to-amber fade.
 
 ### Added
+- Reusable settings UI module (`ui/views/CommonwealthOnline/settings/`) with `CO_Settings.create()` API for embedding in pause menu, main menu, or other PrismaUI views.
 - Plan for opening vanilla Fallout 4 settings from the custom pause UI (`docs/pause-menu-vanilla-settings-plan.md`): hide pause left column, show settings panel only, restore PrismaUI on back.
 - Settings view on the pause menu prototype (`ui/views/CommonwealthOnline/pause-menu/`) with keyboard navigation, controller prompt bar, and F4SE bridge placeholders.
 
 ### Fixed
+- Pause menu settings panel fade-in now runs reliably (dedicated `is-open` class with reflow before transition).
 - Pause menu settings: pause-nav selection bars no longer spill into the settings panel (clip bars in settings mode).
 - Dedicated PC back button on the pause menu map (`ESC` keycap + BACK label, top-left) so mouse users can leave map mode without relying on the controller B prompt. Fades in after the left panel hides and fades out immediately on exit so it does not overlap the logo.
 - Static HTML/CSS/JS pause menu concept prototype at `ui/views/CommonwealthOnline/pause-menu/` — Fallout 4–styled multiplayer map pause screen with left menu, server info panel, controller prompts, and keyboard navigation (MAP selected by default).

docs/pause-menu-vanilla-settings-plan.md

@@ -210,10 +210,11 @@ Run in-game with F4SE logging while PauseMenu is open:
 | Area | Path |
 | --- | --- |
 | HTML / bridge stub | `ui/views/CommonwealthOnline/pause-menu/script.js` |
+| Reusable settings UI | `ui/views/CommonwealthOnline/settings/` (`CO_Settings.create`) |
 | Pause PrismaUI (new, similar to browser) | `plugin/src/F4TPrismaUI.cpp` (or dedicated pause module) |
 | Pause list hide / settings open (new) | e.g. `plugin/src/F4TPauseMenuSettings.cpp` — mirror `F4TMainMenuInject.cpp` |
 | Types | `RE::PauseMenu`, `RE::StartMenuBase` in CommonLibF4 |
-| Prototype UI copy | `ui/views/CommonwealthOnline/pause-menu/index.html` (GAME SETTINGS pane) |
+| Prototype UI copy | `ui/views/CommonwealthOnline/pause-menu/` (embeds `../settings/`) |
 
 ---
 

ui/views/CommonwealthOnline/pause-menu/index.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Commonwealth Online — Pause Menu</title>
   <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="../settings/settings.css">
 </head>
 <body>
   <div class="pause-screen" id="pauseScreen">
@@ -85,71 +86,8 @@
       <p class="server-panel__players">12 / 24</p>
     </section>
 
-    <!-- Settings view: GAME SETTINGS | MULTIPLAYER SETTINGS -->
+    <!-- Settings view (content mounted by ../settings/settings.js) -->
-    <section class="settings-view" id="settingsPanel" aria-label="Settings" hidden>
+    <section class="settings-view" id="settingsPanel" aria-label="Settings" hidden></section>
-      <div class="settings-panel">
-        <h1 class="settings-panel__heading">SETTINGS</h1>
-
-        <div class="settings-tabs" id="settingsTabs" role="tablist" aria-label="Settings tabs">
-          <button
-            type="button"
-            class="settings-tab"
-            id="tabGameSettings"
-            role="tab"
-            data-tab="game"
-            aria-selected="false"
-            aria-controls="gameSettingsPane"
-          >
-            FALLOUT 4
-          </button>
-          <button
-            type="button"
-            class="settings-tab is-selected"
-            id="tabMultiplayerSettings"
-            role="tab"
-            data-tab="multiplayer"
-            aria-selected="true"
-            aria-controls="multiplayerSettingsPane"
-          >
-            MULTIPLAYER
-          </button>
-        </div>
-
-        <div
-          class="settings-pane settings-pane--game"
-          id="gameSettingsPane"
-          role="tabpanel"
-          aria-labelledby="tabGameSettings"
-          hidden
-        >
-          <h2 class="settings-pane__heading">GAME SETTINGS</h2>
-          <p class="settings-pane__description">
-            Adjust Fallout 4 controls, display, audio, and gameplay options using the default game settings menu.
-          </p>
-          <button type="button" class="settings-open-btn" id="openGameSettingsBtn">
-            OPEN FALLOUT 4 SETTINGS
-          </button>
-          <p class="settings-pane__note">
-            This will open the vanilla Fallout 4 settings menu. Commonwealth Online will return after it closes.
-          </p>
-        </div>
-
-        <div
-          class="settings-pane settings-pane--multiplayer"
-          id="multiplayerSettingsPane"
-          role="tabpanel"
-          aria-labelledby="tabMultiplayerSettings"
-        >
-          <div
-            class="settings-rows"
-            id="settingsRows"
-            aria-label="Multiplayer setting options"
-            role="listbox"
-          ></div>
-          <p class="settings-description" id="settingsDescription"></p>
-        </div>
-      </div>
-    </section>
 
     <!-- Bottom controller prompts (pause menu) -->
     <footer class="prompt-bar" id="pausePromptBar" aria-label="Controller prompts">
@@ -167,7 +105,7 @@
       </div>
     </footer>
 
-    <!-- Settings mode prompt bar (contents updated by script.js per active tab) -->
+    <!-- Settings mode prompt bar -->
     <footer class="prompt-bar prompt-bar--settings" id="settingsPromptBar" aria-label="Settings prompts" hidden>
       <div class="prompt" data-prompt="move">
         <span class="prompt__glyph prompt__glyph--text" aria-hidden="true">↑↓</span>
@@ -230,6 +168,8 @@
     </footer>
   </div>
 
+  <script src="../settings/settings-data.js"></script>
+  <script src="../settings/settings.js"></script>
   <script src="script.js"></script>
 </body>
 </html>

ui/views/CommonwealthOnline/pause-menu/script.js

@@ -147,194 +147,11 @@
 
   hydratePromptGlyphs();
 
-  // ── Multiplayer settings (data-driven) ─────────────────────────
-
-  var multiplayerSettings = [
-    {
-      section: "PROFILE",
-      items: [
-        {
-          key: "profile.displayName",
-          label: "Display Name",
-          type: "text",
-          value: "LoneWanderer",
-          description: "The name other players see in Commonwealth Online."
-        },
-        {
-          key: "profile.onlineStatus",
-          label: "Online Status",
-          type: "select",
-          value: "Friends",
-          options: ["Everyone", "Friends", "Nobody"],
-          description: "Who can see when you are online."
-        },
-        {
-          key: "profile.allowFriendJoin",
-          label: "Allow Friend Join",
-          type: "select",
-          value: "Ask First",
-          options: ["Always", "Ask First", "Never"],
-          description: "How friends may join your current session."
-        },
-        {
-          key: "profile.showLocationToFriends",
-          label: "Show Location To Friends",
-          type: "toggle",
-          value: true,
-          description: "Share your current cell or region with friends."
-        }
-      ]
-    },
-    {
-      section: "VOICE CHAT",
-      items: [
-        {
-          key: "voice.voiceChat",
-          label: "Voice Chat",
-          type: "toggle",
-          value: true,
-          description: "Enable voice chat with other players."
-        },
-        {
-          key: "voice.pushToTalk",
-          label: "Push To Talk",
-          type: "toggle",
-          value: true,
-          description: "Require a key hold to transmit voice chat."
-        },
-        {
-          key: "voice.pushToTalkKey",
-          label: "Push To Talk Key",
-          type: "keybind",
-          value: "V",
-          description: "Key used for push-to-talk voice chat."
-        },
-        {
-          key: "voice.voiceChatVolume",
-          label: "Voice Chat Volume",
-          type: "slider",
-          value: 85,
-          min: 0,
-          max: 100,
-          step: 5,
-          description: "Adjusts incoming voice chat volume."
-        },
-        {
-          key: "voice.mutePlayersByDefault",
-          label: "Mute Players By Default",
-          type: "toggle",
-          value: false,
-          description: "Start new sessions with other players muted."
-        }
-      ]
-    },
-    {
-      section: "MAP & SOCIAL",
-      items: [
-        {
-          key: "map.showPlayerMarkers",
-          label: "Show Player Markers",
-          type: "toggle",
-          value: true,
-          description: "Show other connected players on the world map."
-        },
-        {
-          key: "map.showFriendMarkers",
-          label: "Show Friend Markers",
-          type: "toggle",
-          value: true,
-          description: "Highlight friends with distinct map markers."
-        },
-        {
-          key: "map.showNameplates",
-          label: "Show Nameplates",
-          type: "toggle",
-          value: true,
-          description: "Show player nameplates above nearby remote players."
-        },
-        {
-          key: "map.mapMarkerSize",
-          label: "Map Marker Size",
-          type: "select",
-          value: "Medium",
-          options: ["Small", "Medium", "Large"],
-          description: "Size of player and friend markers on the map."
-        },
-        {
-          key: "map.friendRequests",
-          label: "Friend Requests",
-          type: "select",
-          value: "Everyone",
-          options: ["Everyone", "Friends of Friends", "Nobody"],
-          description: "Who can send you friend requests."
-        }
-      ]
-    },
-    {
-      section: "NETWORK",
-      items: [
-        {
-          key: "network.regionPreference",
-          label: "Region Preference",
-          type: "select",
-          value: "Auto",
-          options: ["Auto", "North America", "Europe", "Asia", "Oceania"],
-          description: "Preferred matchmaking region for public servers."
-        },
-        {
-          key: "network.networkSmoothing",
-          label: "Network Smoothing",
-          type: "toggle",
-          value: true,
-          description: "Smooth remote transforms when packets arrive late."
-        },
-        {
-          key: "network.interpolationQuality",
-          label: "Interpolation Quality",
-          type: "select",
-          value: "High",
-          options: ["Low", "Medium", "High"],
-          description: "Smoothness of remote player movement interpolation."
-        },
-        {
-          key: "network.showPing",
-          label: "Show Ping",
-          type: "toggle",
-          value: true,
-          description: "Display your current latency on the HUD."
-        },
-        {
-          key: "network.networkStatsOverlay",
-          label: "Network Stats Overlay",
-          type: "toggle",
-          value: false,
-          description: "Show packet and bandwidth stats for debugging."
-        }
-      ]
-    }
-  ];
-
-  // Flat list of all settings for keyboard navigation.
-  var flatSettings = [];
-  multiplayerSettings.forEach(function (section) {
-    section.items.forEach(function (item) {
-      flatSettings.push(item);
-    });
-  });
-
   // ── DOM refs ───────────────────────────────────────────────────
 
   var pauseScreen = document.getElementById("pauseScreen");
   var menu = document.getElementById("menu");
   var settingsPanel = document.getElementById("settingsPanel");
-  var settingsTabsEl = document.getElementById("settingsTabs");
-  var settingsRowsEl = document.getElementById("settingsRows");
-  var settingsDescriptionEl = document.getElementById("settingsDescription");
-  var gameSettingsPane = document.getElementById("gameSettingsPane");
-  var multiplayerSettingsPane = document.getElementById("multiplayerSettingsPane");
-  var openGameSettingsBtn = document.getElementById("openGameSettingsBtn");
-  var tabGameSettings = document.getElementById("tabGameSettings");
-  var tabMultiplayerSettings = document.getElementById("tabMultiplayerSettings");
   var pausePromptBar = document.getElementById("pausePromptBar");
   var settingsPromptBar = document.getElementById("settingsPromptBar");
   var mapPromptBar = document.getElementById("mapPromptBar");
@@ -343,22 +160,21 @@
   var leftPanel = document.querySelector(".left-panel");
   var mapWorld = document.getElementById("mapWorld");
 
-  if (!menu || !settingsPanel || !settingsTabsEl || !settingsRowsEl) {
+  if (!menu || !settingsPanel || !window.CO_Settings) {
     return;
   }
 
+  var settingsController = null;
+
   var items = Array.prototype.slice.call(menu.querySelectorAll(".menu-item"));
   var SETTINGS_INDEX = 4;
-  var TAB_IDS = ["game", "multiplayer"];
 
   // viewMode: "pause" | "map" | "settings"
-  // settingsFocus: "tabs" | "content"
-  // activeTab: "game" | "multiplayer"
   var viewMode = "pause";
-  var settingsFocus = "tabs";
-  var activeTab = "multiplayer";
   var selectedIndex = -1;
-  var settingIndex = 0;
+  var SETTINGS_TRANSITION_MS = 220;
+  var settingsHideFallbackId = 0;
+  var settingsHideOnTransitionEnd = null;
 
   // ── Pause menu selection ───────────────────────────────────────
 
@@ -435,443 +251,91 @@
     });
   });
 
-  // ── Settings helpers ───────────────────────────────────────────
-
-  function getCurrentSetting() {
-    return flatSettings[settingIndex] || null;
-  }
-
-  function formatSettingValue(setting) {
-    if (setting.type === "toggle") {
-      return setting.value ? "ON" : "OFF";
-    }
-    if (setting.type === "slider") {
-      return setting.value + "%";
-    }
-    return String(setting.value);
-  }
-
-  function notifySettingChanged(setting) {
-    window.CommonwealthOnlineUI.setMultiplayerSetting(setting.key, setting.value);
-  }
-
-  // ── Prompt bar ────────────────────────────────────────────────
-
-  function updateSettingsPromptBar() {
-    if (!settingsPromptBar) {
-      return;
-    }
-
-    var movePrompt = settingsPromptBar.querySelector('[data-prompt="move"]');
-    var changePrompt = settingsPromptBar.querySelector('[data-prompt="change"]');
-    var selectPrompt = settingsPromptBar.querySelector('[data-prompt="select"]');
-    var tabPrompt = settingsPromptBar.querySelector('[data-prompt="tab"]');
-
-    if (activeTab === "game") {
-      if (movePrompt) {
-        movePrompt.hidden = true;
-      }
-      if (changePrompt) {
-        changePrompt.hidden = false;
-        var changeLabel = changePrompt.querySelector(".prompt__label");
-        var changeGlyph = changePrompt.querySelector(".prompt__glyph");
-        if (changeLabel) {
-          changeLabel.textContent = "TAB";
-        }
-        if (changeGlyph) {
-          changeGlyph.textContent = "←→";
-        }
-      }
-      if (selectPrompt) {
-        var selectLabel = selectPrompt.querySelector(".prompt__label");
-        if (selectLabel) {
-          selectLabel.textContent = "OPEN";
-        }
-      }
-      if (tabPrompt) {
-        tabPrompt.hidden = true;
-      }
-    } else {
-      if (movePrompt) {
-        movePrompt.hidden = false;
-      }
-      if (changePrompt) {
-        changePrompt.hidden = false;
-        var changeLabelMp = changePrompt.querySelector(".prompt__label");
-        var changeGlyphMp = changePrompt.querySelector(".prompt__glyph");
-        if (changeLabelMp) {
-          changeLabelMp.textContent = "CHANGE";
-        }
-        if (changeGlyphMp) {
-          changeGlyphMp.textContent = "←→";
-        }
-      }
-      if (selectPrompt) {
-        var selectLabelMp = selectPrompt.querySelector(".prompt__label");
-        if (selectLabelMp) {
-          selectLabelMp.textContent = "SELECT";
-        }
-      }
-      if (tabPrompt) {
-        tabPrompt.hidden = false;
-        var tabLabel = tabPrompt.querySelector(".prompt__label");
-        var tabGlyph = tabPrompt.querySelector(".prompt__glyph");
-        if (tabLabel) {
-          tabLabel.textContent = "SWITCH FOCUS";
-        }
-        if (tabGlyph) {
-          tabGlyph.textContent = "TAB";
-        }
-      }
-    }
-  }
-
-  // ── Settings rendering ─────────────────────────────────────────
-
-  function renderTabs() {
-    var tabs = settingsTabsEl.querySelectorAll(".settings-tab");
-    for (var i = 0; i < tabs.length; i++) {
-      var tab = tabs[i];
-      var tabId = tab.getAttribute("data-tab");
-      var isSelected = tabId === activeTab;
-      tab.classList.toggle("is-selected", isSelected);
-      tab.setAttribute("aria-selected", isSelected ? "true" : "false");
-      tab.tabIndex = isSelected ? 0 : -1;
-    }
-    settingsTabsEl.classList.toggle("is-focus-region", settingsFocus === "tabs");
-  }
-
-  function buildValueMarkup(setting) {
-    if (setting.type === "slider") {
-      var min = setting.min != null ? setting.min : 0;
-      var max = setting.max != null ? setting.max : 100;
-      var fill = ((setting.value - min) / (max - min)) * 100;
-      return (
-        '<span class="settings-slider" aria-hidden="true">' +
-        '<span class="settings-slider__track">' +
-        '<span class="settings-slider__fill" style="width:' + fill + '%"></span>' +
-        '<span class="settings-slider__thumb" style="left:' + fill + '%"></span>' +
-        "</span>" +
-        '<span class="settings-slider__pct">' + setting.value + "%</span>" +
-        "</span>"
-      );
-    }
-
-    var usesCycler =
-      setting.type === "toggle" ||
-      setting.type === "select";
-
-    if (usesCycler) {
-      return (
-        '<span class="settings-cycler">' +
-        '<span class="settings-cycler__arrow" aria-hidden="true">&lt;</span>' +
-        '<span class="settings-row__value-text"></span>' +
-        '<span class="settings-cycler__arrow" aria-hidden="true">&gt;</span>' +
-        "</span>"
-      );
-    }
-
-    return '<span class="settings-row__value-text"></span>';
-  }
-
-  function renderRows() {
-    settingsRowsEl.innerHTML = "";
-    var flatIndex = 0;
-
-    multiplayerSettings.forEach(function (section) {
-      var sectionEl = document.createElement("div");
-      sectionEl.className = "settings-section";
-
-      var heading = document.createElement("h3");
-      heading.className = "settings-section__heading";
-      heading.textContent = section.section;
-      sectionEl.appendChild(heading);
-
-      section.items.forEach(function (setting) {
-        var index = flatIndex;
-        flatIndex += 1;
-
-        var button = document.createElement("button");
-        button.type = "button";
-        button.className = "settings-row";
-        button.setAttribute("role", "option");
-        button.setAttribute("data-setting-index", String(index));
-        button.setAttribute("data-setting-key", setting.key);
-
-        if (index === settingIndex) {
-          button.classList.add("is-selected");
-        }
-        if (setting.type === "text" || setting.type === "keybind") {
-          button.classList.add("is-readonly");
-        }
-
-        button.innerHTML =
-          '<span class="settings-row__label"></span>' +
-          '<span class="settings-row__value">' + buildValueMarkup(setting) + "</span>" +
-          '<span class="settings-row__bar" aria-hidden="true"></span>';
-
-        button.querySelector(".settings-row__label").textContent = setting.label;
-
-        var valueText = button.querySelector(".settings-row__value-text");
-        if (valueText) {
-          valueText.textContent = formatSettingValue(setting);
-        }
-
-        button.addEventListener("click", function () {
-          settingIndex = index;
-          settingsFocus = "content";
-          activeTab = "multiplayer";
-          console.log("[CO Settings] Row selected:", setting.key);
-          renderSettings();
-        });
-
-        sectionEl.appendChild(button);
-      });
-
-      settingsRowsEl.appendChild(sectionEl);
-    });
-
-    settingsRowsEl.classList.toggle(
-      "is-focus-region",
-      settingsFocus === "content" && activeTab === "multiplayer"
-    );
-  }
-
-  function renderDescription() {
-    if (!settingsDescriptionEl) {
-      return;
-    }
-    var setting = getCurrentSetting();
-    settingsDescriptionEl.textContent =
-      setting && setting.description ? setting.description : "";
-  }
-
-  function renderPanes() {
-    if (gameSettingsPane) {
-      gameSettingsPane.hidden = activeTab !== "game";
-      gameSettingsPane.classList.toggle(
-        "is-focus-region",
-        settingsFocus === "content" && activeTab === "game"
-      );
-    }
-    if (multiplayerSettingsPane) {
-      multiplayerSettingsPane.hidden = activeTab !== "multiplayer";
-    }
-    if (openGameSettingsBtn) {
-      openGameSettingsBtn.classList.toggle(
-        "is-focused",
-        settingsFocus === "content" && activeTab === "game"
-      );
-    }
-  }
-
-  function renderSettings() {
-    renderTabs();
-    renderPanes();
-    renderRows();
-    renderDescription();
-    updateSettingsPromptBar();
-  }
-
-  function setActiveTab(tabId) {
-    if (TAB_IDS.indexOf(tabId) === -1) {
-      return;
-    }
-    activeTab = tabId;
-    console.log("[CO Settings] Tab selected:", activeTab);
-    renderSettings();
-  }
-
-  function moveTab(delta) {
-    var current = TAB_IDS.indexOf(activeTab);
-    if (current < 0) {
-      current = 0;
-    }
-    var next = current + delta;
-    if (next < 0) {
-      next = TAB_IDS.length - 1;
-    } else if (next >= TAB_IDS.length) {
-      next = 0;
-    }
-    setActiveTab(TAB_IDS[next]);
-  }
-
-  function setSettingsFocus(region) {
-    settingsFocus = region;
-    console.log("[CO Settings] Focus:", settingsFocus);
-    renderSettings();
-  }
-
-  // ── Settings value changes ─────────────────────────────────────
-
-  function adjustSetting(delta) {
-    var setting = getCurrentSetting();
-    if (!setting || activeTab !== "multiplayer") {
-      return;
-    }
-
-    if (setting.type === "text") {
-      console.log("[CO Settings] Display name editing not implemented:", setting.key);
-      return;
-    }
-
-    if (setting.type === "keybind") {
-      console.log(
-        "[CO Settings] Keybind selected (rebinding not implemented):",
-        setting.key,
-        setting.value
-      );
-      return;
-    }
-
-    if (setting.type === "toggle") {
-      setting.value = !setting.value;
-      console.log("[CO Settings] Toggle:", setting.key, setting.value);
-      notifySettingChanged(setting);
-      renderSettings();
-      return;
-    }
-
-    if (setting.type === "select") {
-      var options = setting.options || [];
-      if (!options.length) {
-        return;
-      }
-      var current = options.indexOf(setting.value);
-      if (current < 0) {
-        current = 0;
-      }
-      var next = current + (delta === 0 ? 1 : delta);
-      if (next < 0) {
-        next = options.length - 1;
-      } else if (next >= options.length) {
-        next = 0;
-      }
-      setting.value = options[next];
-      console.log("[CO Settings] Select:", setting.key, setting.value);
-      notifySettingChanged(setting);
-      renderSettings();
-      return;
-    }
-
-    if (setting.type === "slider") {
-      var step = setting.step != null ? setting.step : 5;
-      var min = setting.min != null ? setting.min : 0;
-      var max = setting.max != null ? setting.max : 100;
-      var amount = delta === 0 ? step : delta * step;
-      var nextValue = Math.max(min, Math.min(max, setting.value + amount));
-      if (nextValue === setting.value) {
-        return;
-      }
-      setting.value = nextValue;
-      console.log("[CO Settings] Slider:", setting.key, setting.value);
-      notifySettingChanged(setting);
-      renderSettings();
-    }
-  }
-
-  function activateSetting() {
-    var setting = getCurrentSetting();
-    if (!setting || activeTab !== "multiplayer") {
-      return;
-    }
-
-    if (setting.type === "toggle" || setting.type === "select" || setting.type === "slider") {
-      adjustSetting(setting.type === "toggle" ? 0 : 1);
-      return;
-    }
-
-    if (setting.type === "keybind") {
-      console.log(
-        "[CO Settings] Keybind selected (rebinding not implemented):",
-        setting.key,
-        setting.value
-      );
-      return;
-    }
-
-    if (setting.type === "text") {
-      console.log("[CO Settings] Display name editing not implemented:", setting.key);
-    }
-  }
-
-  function moveSettingRow(delta) {
-    if (!flatSettings.length) {
-      return;
-    }
-    var next = settingIndex + delta;
-    if (next < 0) {
-      next = flatSettings.length - 1;
-    } else if (next >= flatSettings.length) {
-      next = 0;
-    }
-    settingIndex = next;
-    renderSettings();
-
-    var selectedRow = settingsRowsEl.querySelector(
-      '[data-setting-index="' + settingIndex + '"]'
-    );
-    if (selectedRow && typeof selectedRow.scrollIntoView === "function") {
-      selectedRow.scrollIntoView({ block: "nearest" });
-    }
-  }
-
-  function openVanillaGameSettings() {
-    window.CommonwealthOnlineUI.openGameSettings();
-  }
-
-  // ── Tab / button click handlers ────────────────────────────────
-
-  if (tabGameSettings) {
-    tabGameSettings.addEventListener("click", function () {
-      settingsFocus = "tabs";
-      setActiveTab("game");
-    });
-  }
-
-  if (tabMultiplayerSettings) {
-    tabMultiplayerSettings.addEventListener("click", function () {
-      settingsFocus = "tabs";
-      setActiveTab("multiplayer");
-    });
-  }
-
-  if (openGameSettingsBtn) {
-    openGameSettingsBtn.addEventListener("click", function () {
-      settingsFocus = "content";
-      activeTab = "game";
-      renderSettings();
-      openVanillaGameSettings();
-    });
-  }
-
   // ── View mode transitions ──────────────────────────────────────
 
+  function cancelSettingsPanelHide() {
+    if (settingsHideFallbackId) {
+      window.clearTimeout(settingsHideFallbackId);
+      settingsHideFallbackId = 0;
+    }
+    if (settingsHideOnTransitionEnd) {
+      settingsPanel.removeEventListener("transitionend", settingsHideOnTransitionEnd);
+      settingsHideOnTransitionEnd = null;
+    }
+  }
+
+  function showSettingsPanelAnimated() {
+    cancelSettingsPanelHide();
+    if (pauseScreen) {
+      pauseScreen.classList.add("is-settings-mode");
+    }
+    settingsPanel.hidden = false;
+    settingsPanel.classList.remove("is-open");
+    void settingsPanel.offsetWidth;
+    settingsPanel.classList.add("is-open");
+  }
+
+  function hideSettingsPanelAnimated(done) {
+    if (settingsPanel.hidden) {
+      if (done) {
+        done();
+      }
+      return;
+    }
+
+    cancelSettingsPanelHide();
+    settingsPanel.classList.remove("is-open");
+
+    var completed = false;
+
+    function finishHide() {
+      if (completed) {
+        return;
+      }
+      completed = true;
+      cancelSettingsPanelHide();
+      if (viewMode === "settings" || settingsPanel.classList.contains("is-open")) {
+        if (done) {
+          done();
+        }
+        return;
+      }
+      if (pauseScreen) {
+        pauseScreen.classList.remove("is-settings-mode");
+      }
+      settingsPanel.hidden = true;
+      if (done) {
+        done();
+      }
+    }
+
+    settingsHideOnTransitionEnd = function (event) {
+      if (event.target !== settingsPanel || event.propertyName !== "opacity") {
+        return;
+      }
+      finishHide();
+    };
+
+    settingsPanel.addEventListener("transitionend", settingsHideOnTransitionEnd);
+    settingsHideFallbackId = window.setTimeout(finishHide, SETTINGS_TRANSITION_MS + 80);
+  }
+
   function enterSettingsMode() {
     if (viewMode === "map") {
       exitMapMode();
     }
 
     viewMode = "settings";
-    settingsFocus = "tabs";
-    activeTab = "multiplayer";
-    settingIndex = 0;
 
     console.log("[CO Pause Menu] Entering settings mode");
     window.CommonwealthOnlineUI.onOpenView("settings");
 
     setSelected(SETTINGS_INDEX);
 
-    if (pauseScreen) {
+    showSettingsPanelAnimated();
-      pauseScreen.classList.add("is-settings-mode");
-    }
-    settingsPanel.hidden = false;
     if (pausePromptBar) {
       pausePromptBar.hidden = true;
     }
-    if (settingsPromptBar) {
-      settingsPromptBar.hidden = false;
-    }
     if (mapPromptBar) {
       mapPromptBar.hidden = true;
     }
@@ -880,7 +344,7 @@
       mapWorld.classList.remove("is-interactive");
     }
 
-    renderSettings();
+    settingsController.show();
   }
 
   function exitSettingsMode() {
@@ -892,29 +356,35 @@
     console.log("[CO Pause Menu] Exiting settings mode");
     window.CommonwealthOnlineUI.onBack();
 
-    if (pauseScreen) {
+    settingsController.hide();
-      pauseScreen.classList.remove("is-settings-mode");
+
-    }
+    hideSettingsPanelAnimated(function () {
-    settingsPanel.hidden = true;
       if (pausePromptBar) {
         pausePromptBar.hidden = false;
       }
-    if (settingsPromptBar) {
+      setSelected(SETTINGS_INDEX);
-      settingsPromptBar.hidden = true;
+    });
   }
 
-    setSelected(SETTINGS_INDEX);
+  settingsController = window.CO_Settings.create({
+    mount: settingsPanel,
+    promptBar: settingsPromptBar,
+    bridge: window.CommonwealthOnlineUI,
+    layout: "embedded",
+    onBack: function () {
+      exitSettingsMode();
     }
+  });
 
   function enterMapMode() {
     if (viewMode === "settings") {
+      cancelSettingsPanelHide();
+      settingsController.hide();
+      settingsPanel.classList.remove("is-open");
       settingsPanel.hidden = true;
       if (pauseScreen) {
         pauseScreen.classList.remove("is-settings-mode");
       }
-      if (settingsPromptBar) {
-        settingsPromptBar.hidden = true;
-      }
     }
 
     viewMode = "map";
@@ -979,72 +449,6 @@
 
   // ── Keyboard navigation ────────────────────────────────────────
 
-  function handleSettingsKeydown(event) {
-    switch (event.key) {
-      case "ArrowUp":
-        event.preventDefault();
-        if (settingsFocus === "content" && activeTab === "multiplayer") {
-          moveSettingRow(-1);
-        }
-        break;
-
-      case "ArrowDown":
-        event.preventDefault();
-        if (settingsFocus === "content" && activeTab === "multiplayer") {
-          moveSettingRow(1);
-        }
-        break;
-
-      case "ArrowLeft":
-        event.preventDefault();
-        if (settingsFocus === "tabs") {
-          moveTab(-1);
-        } else if (activeTab === "multiplayer") {
-          adjustSetting(-1);
-        } else {
-          moveTab(-1);
-        }
-        break;
-
-      case "ArrowRight":
-        event.preventDefault();
-        if (settingsFocus === "tabs") {
-          moveTab(1);
-        } else if (activeTab === "multiplayer") {
-          adjustSetting(1);
-        } else {
-          moveTab(1);
-        }
-        break;
-
-      case "Tab":
-        event.preventDefault();
-        setSettingsFocus(settingsFocus === "tabs" ? "content" : "tabs");
-        break;
-
-      case "Enter":
-      case " ":
-        event.preventDefault();
-        if (settingsFocus === "tabs") {
-          setSettingsFocus("content");
-        } else if (activeTab === "game") {
-          openVanillaGameSettings();
-        } else {
-          activateSetting();
-        }
-        break;
-
-      case "Escape":
-        event.preventDefault();
-        console.log("[CO Settings] Back");
-        exitSettingsMode();
-        break;
-
-      default:
-        break;
-    }
-  }
-
   function handlePauseKeydown(event) {
     switch (event.key) {
       case "ArrowUp":
@@ -1079,7 +483,7 @@
 
   document.addEventListener("keydown", function (event) {
     if (viewMode === "settings") {
-      handleSettingsKeydown(event);
+      settingsController.handleKeydown(event);
       return;
     }
     if (viewMode === "map") {
@@ -1420,6 +824,4 @@
     });
   }
 
-  // Open settings by default so the settings prototype is immediately visible.
-  enterSettingsMode();
 })();

ui/views/CommonwealthOnline/pause-menu/styles.css

@@ -375,6 +375,7 @@ body {
   box-shadow:
     inset 0 0 20px rgba(0, 0, 0, 0.4),
     0 2px 8px rgba(0, 0, 0, 0.35);
+  transition: opacity 220ms ease-out, visibility 220ms ease-out;
 }
 
 .server-panel__heading {
@@ -602,463 +603,8 @@ body {
   outline-offset: 2px;
 }
 
-/* ── Settings view (GAME / MULTIPLAYER tabs) ──────────────────── */
-/*
- * Pause nav stays on the far left with SETTINGS selected.
- * A single translucent panel holds two Fallout-style tabs and the
- * active tab content. Game Settings only explains opening vanilla FO4
- * settings; Multiplayer Settings is the custom CO options list.
- */
-
-.settings-view {
-  position: absolute;
-  top: calc(114px * var(--co-ui-scale));
-  left: max(calc(320px * var(--co-ui-scale)), calc(28% + 20px * var(--co-ui-scale)));
-  right: calc(32px * var(--co-ui-scale));
-  bottom: calc(52px * var(--co-ui-scale));
-  z-index: 11;
-  display: flex;
-  align-items: stretch;
-  min-width: 0;
-  transition: opacity 180ms ease-out, visibility 180ms ease-out;
-}
-
-.settings-view[hidden] {
-  display: none;
-}
-
-.settings-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  padding:
-    calc(16px * var(--co-ui-scale))
-    calc(20px * var(--co-ui-scale))
-    calc(12px * var(--co-ui-scale));
-  background: rgba(6, 12, 8, 0.78);
-  border: 1px solid rgba(201, 168, 74, 0.28);
-  box-shadow:
-    inset 0 0 28px rgba(0, 0, 0, 0.35),
-    0 2px 16px rgba(0, 0, 0, 0.3);
-}
-
-.settings-panel__heading {
-  flex-shrink: 0;
-  margin-bottom: calc(14px * var(--co-ui-scale));
-  font-size: calc(22px * var(--co-ui-scale));
-  font-weight: 700;
-  letter-spacing: 0.2em;
-  color: var(--co-amber);
-}
-
-/* Fallout-style tab row */
-
-.settings-tabs {
-  flex-shrink: 0;
-  display: flex;
-  align-items: stretch;
-  gap: calc(4px * var(--co-ui-scale));
-  margin-bottom: calc(16px * var(--co-ui-scale));
-  border-bottom: 1px solid rgba(62, 207, 74, 0.22);
-}
-
-.settings-tab {
-  position: relative;
-  flex: 1;
-  min-height: calc(44px * var(--co-ui-scale));
-  padding:
-    calc(10px * var(--co-ui-scale))
-    calc(16px * var(--co-ui-scale));
-  border: 1px solid transparent;
-  border-bottom: none;
-  background: rgba(4, 10, 6, 0.35);
-  color: var(--co-text-pale);
-  font-family: inherit;
-  font-size: calc(15px * var(--co-ui-scale));
-  font-weight: 700;
-  letter-spacing: 0.16em;
-  text-align: center;
-  cursor: pointer;
-  outline: none;
-  transition:
-    color var(--co-transition),
-    background var(--co-transition),
-    border-color var(--co-transition);
-}
-
-.settings-tab:hover {
-  color: var(--co-text-pale);
-  background: rgba(62, 207, 74, 0.08);
-}
-
-.settings-tab.is-selected {
-  color: var(--co-select-text);
-  background: linear-gradient(
-    180deg,
-    var(--co-select-yellow) 0%,
-    var(--co-select-yellow-bright) 100%
-  );
-  border-color: rgba(201, 168, 74, 0.55);
-  box-shadow: 0 0 12px rgba(196, 168, 75, 0.2);
-}
-
-.settings-tabs.is-focus-region .settings-tab.is-selected {
-  box-shadow:
-    0 0 0 1px rgba(62, 207, 74, 0.45),
-    0 0 14px rgba(196, 168, 75, 0.28);
-}
-
-.settings-tabs.is-focus-region .settings-tab:not(.is-selected) {
-  outline: 1px solid rgba(62, 207, 74, 0.2);
-  outline-offset: -1px;
-}
-
-/* Tab panes */
-
-.settings-pane {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-}
-
-.settings-pane[hidden] {
-  display: none;
-}
-
-.settings-pane--game {
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding:
-    calc(20px * var(--co-ui-scale))
-    calc(8px * var(--co-ui-scale))
-    calc(8px * var(--co-ui-scale));
-  gap: calc(16px * var(--co-ui-scale));
-}
-
-.settings-pane__heading {
-  font-size: calc(18px * var(--co-ui-scale));
-  font-weight: 700;
-  letter-spacing: 0.16em;
-  color: var(--co-text-pale);
-}
-
-.settings-pane__description {
-  max-width: calc(640px * var(--co-ui-scale));
-  font-size: calc(15px * var(--co-ui-scale));
-  font-weight: 600;
-  letter-spacing: 0.03em;
-  line-height: 1.5;
-  color: var(--co-text-muted);
-}
-
-.settings-open-btn {
-  margin-top: calc(8px * var(--co-ui-scale));
-  min-width: calc(360px * var(--co-ui-scale));
-  min-height: calc(48px * var(--co-ui-scale));
-  padding:
-    calc(12px * var(--co-ui-scale))
-    calc(24px * var(--co-ui-scale));
-  border: 1px solid rgba(201, 168, 74, 0.45);
-  background: rgba(8, 16, 10, 0.65);
-  color: var(--co-text-pale);
-  font-family: inherit;
-  font-size: calc(16px * var(--co-ui-scale));
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  cursor: pointer;
-  outline: none;
-  transition:
-    color var(--co-transition),
-    background var(--co-transition),
-    border-color var(--co-transition),
-    box-shadow var(--co-transition);
-}
-
-.settings-open-btn:hover,
-.settings-open-btn.is-focused {
-  color: var(--co-select-text);
-  background: linear-gradient(
-    90deg,
-    var(--co-select-yellow) 0%,
-    var(--co-select-yellow-bright) 100%
-  );
-  border-color: rgba(201, 168, 74, 0.7);
-  box-shadow: 0 0 14px rgba(196, 168, 75, 0.25);
-}
-
-.settings-pane--game.is-focus-region .settings-open-btn {
-  box-shadow:
-    0 0 0 1px rgba(62, 207, 74, 0.4),
-    0 0 14px rgba(196, 168, 75, 0.22);
-}
-
-.settings-pane__note {
-  max-width: calc(560px * var(--co-ui-scale));
-  font-size: calc(12px * var(--co-ui-scale));
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  line-height: 1.45;
-  color: var(--co-text-muted);
-  opacity: 0.8;
-}
-
-/* Multiplayer settings list */
-
-.settings-pane--multiplayer {
-  min-height: 0;
-}
-
-.settings-rows {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: calc(2px * var(--co-ui-scale));
-  overflow-y: auto;
-  min-height: 0;
-  padding: calc(2px * var(--co-ui-scale)) 0;
-}
-
-.settings-section {
-  display: flex;
-  flex-direction: column;
-  gap: calc(2px * var(--co-ui-scale));
-}
-
-.settings-section + .settings-section {
-  margin-top: calc(10px * var(--co-ui-scale));
-}
-
-.settings-section__heading {
-  padding:
-    calc(6px * var(--co-ui-scale))
-    calc(14px * var(--co-ui-scale))
-    calc(4px * var(--co-ui-scale));
-  font-size: calc(11px * var(--co-ui-scale));
-  font-weight: 700;
-  letter-spacing: 0.18em;
-  color: var(--co-amber);
-  border-bottom: 1px solid rgba(62, 207, 74, 0.15);
-  margin-bottom: calc(2px * var(--co-ui-scale));
-}
-
-.settings-row {
-  position: relative;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
-  align-items: center;
-  gap: calc(20px * var(--co-ui-scale));
-  min-height: calc(40px * var(--co-ui-scale));
-  padding:
-    calc(8px * var(--co-ui-scale))
-    calc(14px * var(--co-ui-scale));
-  border: none;
-  background: transparent;
-  color: var(--co-text-pale);
-  font-family: inherit;
-  font-size: calc(16px * var(--co-ui-scale));
-  font-weight: 600;
-  letter-spacing: 0.03em;
-  text-align: left;
-  cursor: pointer;
-  outline: none;
-  transition:
-    color var(--co-transition),
-    background var(--co-transition);
-}
-
-.settings-row__label {
-  position: relative;
-  z-index: 2;
-  color: var(--co-text-pale);
-  opacity: 0.88;
-}
-
-.settings-row__value {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: calc(12px * var(--co-ui-scale));
-  min-width: 0;
-  color: var(--co-text-pale);
-  text-align: right;
-}
-
-.settings-row__value-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Selected row: solid amber bar with a thin green leading edge */
-
-.settings-row__bar {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    var(--co-select-yellow) 0%,
-    var(--co-select-yellow-bright) 100%
-  );
-  opacity: 0;
-  transition: opacity var(--co-transition);
-  z-index: 1;
-  box-shadow:
-    inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
-    0 0 12px rgba(196, 168, 75, 0.2);
-}
-
-.settings-row:hover:not(.is-selected) {
-  background: rgba(201, 168, 74, 0.08);
-}
-
-.settings-row.is-selected .settings-row__bar {
-  opacity: 1;
-}
-
-.settings-row.is-selected,
-.settings-row.is-selected .settings-row__label,
-.settings-row.is-selected .settings-row__value,
-.settings-row.is-selected .settings-row__value-text,
-.settings-row.is-selected .settings-cycler__arrow,
-.settings-row.is-selected .settings-slider__pct {
-  color: var(--co-select-text);
-  opacity: 1;
-}
-
-.settings-rows.is-focus-region .settings-row.is-selected .settings-row__bar {
-  box-shadow:
-    inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
-    0 0 0 1px rgba(62, 207, 74, 0.35),
-    0 0 14px rgba(196, 168, 75, 0.28);
-}
-
-.settings-row.is-readonly:not(.is-selected) .settings-row__label,
-.settings-row.is-readonly:not(.is-selected) .settings-row__value-text {
-  opacity: 0.78;
-}
-
-/* Cycler: < value > */
-
-.settings-cycler {
-  display: inline-flex;
-  align-items: center;
-  gap: calc(10px * var(--co-ui-scale));
-  min-width: 0;
-}
-
-.settings-cycler__arrow {
-  flex-shrink: 0;
-  font-size: calc(14px * var(--co-ui-scale));
-  font-weight: 700;
-  color: var(--co-amber-muted);
-  opacity: 0.75;
-  line-height: 1;
-}
-
-.settings-row.is-selected .settings-cycler__arrow {
-  color: var(--co-select-text);
-  opacity: 0.9;
-}
-
-.settings-row.is-readonly .settings-cycler__arrow {
-  visibility: hidden;
-}
-
-/* Slider control */
-
-.settings-slider {
-  display: flex;
-  align-items: center;
-  gap: calc(14px * var(--co-ui-scale));
-  width: min(100%, calc(260px * var(--co-ui-scale)));
-}
-
-.settings-slider__track {
-  position: relative;
-  flex: 1;
-  height: calc(2px * var(--co-ui-scale));
-  background: rgba(216, 221, 208, 0.35);
-}
-
-.settings-slider__fill {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(216, 221, 208, 0.85);
-}
-
-.settings-slider__thumb {
-  position: absolute;
-  top: 50%;
-  width: calc(4px * var(--co-ui-scale));
-  height: calc(14px * var(--co-ui-scale));
-  background: var(--co-text-pale);
-  transform: translate(-50%, -50%);
-}
-
-.settings-slider__pct {
-  flex-shrink: 0;
-  min-width: calc(42px * var(--co-ui-scale));
-  font-size: calc(15px * var(--co-ui-scale));
-  letter-spacing: 0.04em;
-  color: var(--co-text-pale);
-  text-align: right;
-}
-
-.settings-row.is-selected .settings-slider__track {
-  background: rgba(26, 28, 24, 0.35);
-}
-
-.settings-row.is-selected .settings-slider__fill,
-.settings-row.is-selected .settings-slider__thumb {
-  background: var(--co-select-text);
-}
-
-/* Description footer */
-
-.settings-description {
-  flex-shrink: 0;
-  margin-top: calc(6px * var(--co-ui-scale));
-  padding:
-    calc(12px * var(--co-ui-scale))
-    calc(14px * var(--co-ui-scale))
-    calc(4px * var(--co-ui-scale));
-  border-top: 1px solid rgba(201, 168, 74, 0.18);
-  min-height: calc(44px * var(--co-ui-scale));
-  font-size: calc(13px * var(--co-ui-scale));
-  font-weight: 600;
-  letter-spacing: 0.03em;
-  line-height: 1.45;
-  color: var(--co-text-muted);
-}
-
-/* Settings prompt bar */
-
-.prompt-bar--settings {
-  gap: calc(28px * var(--co-ui-scale));
-}
-
-.prompt-bar--settings .prompt[hidden] {
-  display: none;
-}
-
-.prompt__glyph--text {
-  min-width: calc(28px * var(--co-ui-scale));
-  height: calc(22px * var(--co-ui-scale));
-  padding: 0 calc(6px * var(--co-ui-scale));
-  border-radius: 2px;
-  font-size: calc(11px * var(--co-ui-scale));
-  letter-spacing: 0.04em;
-}
-
 /* Settings mode: keep pause nav, dim map more, hide server panel */
+/* (Settings panel styles live in ../settings/settings.css) */
 
 .pause-screen.is-settings-mode .left-panel {
   overflow: hidden;

ui/views/CommonwealthOnline/settings/settings-data.js

@@ -0,0 +1,172 @@
+(function () {
+  "use strict";
+
+  /**
+   * Default multiplayer settings schema for Commonwealth Online.
+   * Host views can pass a custom copy via CO_Settings.create({ settingsData }).
+   */
+  window.CO_SettingsData = [
+    {
+      section: "PROFILE",
+      items: [
+        {
+          key: "profile.displayName",
+          label: "Display Name",
+          type: "text",
+          value: "LoneWanderer",
+          description: "The name other players see in Commonwealth Online."
+        },
+        {
+          key: "profile.onlineStatus",
+          label: "Online Status",
+          type: "select",
+          value: "Friends",
+          options: ["Everyone", "Friends", "Nobody"],
+          description: "Who can see when you are online."
+        },
+        {
+          key: "profile.allowFriendJoin",
+          label: "Allow Friend Join",
+          type: "select",
+          value: "Ask First",
+          options: ["Always", "Ask First", "Never"],
+          description: "How friends may join your current session."
+        },
+        {
+          key: "profile.showLocationToFriends",
+          label: "Show Location To Friends",
+          type: "toggle",
+          value: true,
+          description: "Share your current cell or region with friends."
+        }
+      ]
+    },
+    {
+      section: "VOICE CHAT",
+      items: [
+        {
+          key: "voice.voiceChat",
+          label: "Voice Chat",
+          type: "toggle",
+          value: true,
+          description: "Enable voice chat with other players."
+        },
+        {
+          key: "voice.pushToTalk",
+          label: "Push To Talk",
+          type: "toggle",
+          value: true,
+          description: "Require a key hold to transmit voice chat."
+        },
+        {
+          key: "voice.pushToTalkKey",
+          label: "Push To Talk Key",
+          type: "keybind",
+          value: "V",
+          description: "Key used for push-to-talk voice chat."
+        },
+        {
+          key: "voice.voiceChatVolume",
+          label: "Voice Chat Volume",
+          type: "slider",
+          value: 85,
+          min: 0,
+          max: 100,
+          step: 5,
+          description: "Adjusts incoming voice chat volume."
+        },
+        {
+          key: "voice.mutePlayersByDefault",
+          label: "Mute Players By Default",
+          type: "toggle",
+          value: false,
+          description: "Start new sessions with other players muted."
+        }
+      ]
+    },
+    {
+      section: "MAP & SOCIAL",
+      items: [
+        {
+          key: "map.showPlayerMarkers",
+          label: "Show Player Markers",
+          type: "toggle",
+          value: true,
+          description: "Show other connected players on the world map."
+        },
+        {
+          key: "map.showFriendMarkers",
+          label: "Show Friend Markers",
+          type: "toggle",
+          value: true,
+          description: "Highlight friends with distinct map markers."
+        },
+        {
+          key: "map.showNameplates",
+          label: "Show Nameplates",
+          type: "toggle",
+          value: true,
+          description: "Show player nameplates above nearby remote players."
+        },
+        {
+          key: "map.mapMarkerSize",
+          label: "Map Marker Size",
+          type: "select",
+          value: "Medium",
+          options: ["Small", "Medium", "Large"],
+          description: "Size of player and friend markers on the map."
+        },
+        {
+          key: "map.friendRequests",
+          label: "Friend Requests",
+          type: "select",
+          value: "Everyone",
+          options: ["Everyone", "Friends of Friends", "Nobody"],
+          description: "Who can send you friend requests."
+        }
+      ]
+    },
+    {
+      section: "NETWORK",
+      items: [
+        {
+          key: "network.regionPreference",
+          label: "Region Preference",
+          type: "select",
+          value: "Auto",
+          options: ["Auto", "North America", "Europe", "Asia", "Oceania"],
+          description: "Preferred matchmaking region for public servers."
+        },
+        {
+          key: "network.networkSmoothing",
+          label: "Network Smoothing",
+          type: "toggle",
+          value: true,
+          description: "Smooth remote transforms when packets arrive late."
+        },
+        {
+          key: "network.interpolationQuality",
+          label: "Interpolation Quality",
+          type: "select",
+          value: "High",
+          options: ["Low", "Medium", "High"],
+          description: "Smoothness of remote player movement interpolation."
+        },
+        {
+          key: "network.showPing",
+          label: "Show Ping",
+          type: "toggle",
+          value: true,
+          description: "Display your current latency on the HUD."
+        },
+        {
+          key: "network.networkStatsOverlay",
+          label: "Network Stats Overlay",
+          type: "toggle",
+          value: false,
+          description: "Show packet and bandwidth stats for debugging."
+        }
+      ]
+    }
+  ];
+})();

ui/views/CommonwealthOnline/settings/settings.css

@@ -0,0 +1,518 @@
+/* Commonwealth Online — reusable settings UI (GAME / MULTIPLAYER tabs) */
+/*
+ * Expects theme tokens from the host view:
+ * --co-ui-scale, --co-amber, --co-text-pale, --co-text-muted,
+ * --co-select-yellow, --co-select-yellow-bright, --co-select-text,
+ * --co-transition, --co-green, --co-amber-muted
+ */
+
+.co-settings {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.co-settings--standalone {
+  width: 100%;
+  max-width: calc(920px * var(--co-ui-scale));
+  height: min(calc(720px * var(--co-ui-scale)), calc(100vh - 120px * var(--co-ui-scale)));
+  margin: 0 auto;
+  padding:
+    calc(28px * var(--co-ui-scale))
+    calc(32px * var(--co-ui-scale));
+}
+
+.settings-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  padding:
+    calc(16px * var(--co-ui-scale))
+    calc(20px * var(--co-ui-scale))
+    calc(12px * var(--co-ui-scale));
+  background: rgba(6, 12, 8, 0.78);
+  border: 1px solid rgba(201, 168, 74, 0.28);
+  box-shadow:
+    inset 0 0 28px rgba(0, 0, 0, 0.35),
+    0 2px 16px rgba(0, 0, 0, 0.3);
+}
+
+.settings-panel__heading {
+  flex-shrink: 0;
+  margin-bottom: calc(14px * var(--co-ui-scale));
+  font-size: calc(22px * var(--co-ui-scale));
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  color: var(--co-amber);
+}
+
+.settings-tabs {
+  flex-shrink: 0;
+  display: flex;
+  align-items: stretch;
+  gap: calc(4px * var(--co-ui-scale));
+  margin-bottom: calc(16px * var(--co-ui-scale));
+  border-bottom: 1px solid rgba(62, 207, 74, 0.22);
+}
+
+.settings-tab {
+  position: relative;
+  flex: 1;
+  min-height: calc(44px * var(--co-ui-scale));
+  padding:
+    calc(10px * var(--co-ui-scale))
+    calc(16px * var(--co-ui-scale));
+  border: 1px solid transparent;
+  border-bottom: none;
+  background: rgba(4, 10, 6, 0.35);
+  color: var(--co-text-pale);
+  font-family: inherit;
+  font-size: calc(15px * var(--co-ui-scale));
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  transition:
+    color var(--co-transition),
+    background var(--co-transition),
+    border-color var(--co-transition);
+}
+
+.settings-tab:hover {
+  color: var(--co-text-pale);
+  background: rgba(62, 207, 74, 0.08);
+}
+
+.settings-tab.is-selected {
+  color: var(--co-select-text);
+  background: linear-gradient(
+    180deg,
+    var(--co-select-yellow) 0%,
+    var(--co-select-yellow-bright) 100%
+  );
+  border-color: rgba(201, 168, 74, 0.55);
+  box-shadow: 0 0 12px rgba(196, 168, 75, 0.2);
+}
+
+.settings-tabs.is-focus-region .settings-tab.is-selected {
+  box-shadow:
+    0 0 0 1px rgba(62, 207, 74, 0.45),
+    0 0 14px rgba(196, 168, 75, 0.28);
+}
+
+.settings-tabs.is-focus-region .settings-tab:not(.is-selected) {
+  outline: 1px solid rgba(62, 207, 74, 0.2);
+  outline-offset: -1px;
+}
+
+/* Fixed-height body: both panes occupy the same box so tab switches do not resize the panel */
+
+.settings-pane-stack {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.settings-pane-stack > .settings-pane {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.settings-pane-stack > .settings-pane[hidden] {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.settings-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.settings-pane[hidden]:not(.settings-pane-stack > .settings-pane) {
+  display: none;
+}
+
+.settings-pane--game {
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding:
+    calc(20px * var(--co-ui-scale))
+    calc(8px * var(--co-ui-scale))
+    calc(8px * var(--co-ui-scale));
+  gap: calc(16px * var(--co-ui-scale));
+}
+
+.settings-pane__heading {
+  font-size: calc(18px * var(--co-ui-scale));
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  color: var(--co-text-pale);
+}
+
+.settings-pane__description {
+  max-width: calc(640px * var(--co-ui-scale));
+  font-size: calc(15px * var(--co-ui-scale));
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  line-height: 1.5;
+  color: var(--co-text-muted);
+}
+
+.settings-open-btn {
+  margin-top: calc(8px * var(--co-ui-scale));
+  min-width: calc(360px * var(--co-ui-scale));
+  min-height: calc(48px * var(--co-ui-scale));
+  padding:
+    calc(12px * var(--co-ui-scale))
+    calc(24px * var(--co-ui-scale));
+  border: 1px solid rgba(201, 168, 74, 0.45);
+  background: rgba(8, 16, 10, 0.65);
+  color: var(--co-text-pale);
+  font-family: inherit;
+  font-size: calc(16px * var(--co-ui-scale));
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  cursor: pointer;
+  outline: none;
+  transition:
+    color var(--co-transition),
+    background var(--co-transition),
+    border-color var(--co-transition),
+    box-shadow var(--co-transition);
+}
+
+.settings-open-btn:hover,
+.settings-open-btn.is-focused {
+  color: var(--co-select-text);
+  background: linear-gradient(
+    90deg,
+    var(--co-select-yellow) 0%,
+    var(--co-select-yellow-bright) 100%
+  );
+  border-color: rgba(201, 168, 74, 0.7);
+  box-shadow: 0 0 14px rgba(196, 168, 75, 0.25);
+}
+
+.settings-pane--game.is-focus-region .settings-open-btn {
+  box-shadow:
+    0 0 0 1px rgba(62, 207, 74, 0.4),
+    0 0 14px rgba(196, 168, 75, 0.22);
+}
+
+.settings-pane__note {
+  max-width: calc(560px * var(--co-ui-scale));
+  font-size: calc(12px * var(--co-ui-scale));
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1.45;
+  color: var(--co-text-muted);
+  opacity: 0.8;
+}
+
+.settings-pane--multiplayer {
+  min-height: 0;
+}
+
+.settings-rows {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: calc(2px * var(--co-ui-scale));
+  overflow-y: auto;
+  min-height: 0;
+  padding: calc(2px * var(--co-ui-scale)) 0;
+}
+
+.settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: calc(2px * var(--co-ui-scale));
+}
+
+.settings-section + .settings-section {
+  margin-top: calc(10px * var(--co-ui-scale));
+}
+
+.settings-section__heading {
+  padding:
+    calc(6px * var(--co-ui-scale))
+    calc(14px * var(--co-ui-scale))
+    calc(4px * var(--co-ui-scale));
+  font-size: calc(11px * var(--co-ui-scale));
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  color: var(--co-amber);
+  border-bottom: 1px solid rgba(62, 207, 74, 0.15);
+  margin-bottom: calc(2px * var(--co-ui-scale));
+}
+
+.settings-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+  align-items: center;
+  gap: calc(20px * var(--co-ui-scale));
+  min-height: calc(40px * var(--co-ui-scale));
+  padding:
+    calc(8px * var(--co-ui-scale))
+    calc(14px * var(--co-ui-scale));
+  border: none;
+  background: transparent;
+  color: var(--co-text-pale);
+  font-family: inherit;
+  font-size: calc(16px * var(--co-ui-scale));
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  transition:
+    color var(--co-transition),
+    background var(--co-transition);
+}
+
+.settings-row__label {
+  position: relative;
+  z-index: 2;
+  color: var(--co-text-pale);
+  opacity: 0.88;
+}
+
+.settings-row__value {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: calc(12px * var(--co-ui-scale));
+  min-width: 0;
+  color: var(--co-text-pale);
+  text-align: right;
+}
+
+.settings-row__value-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.settings-row__bar {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    var(--co-select-yellow) 0%,
+    var(--co-select-yellow-bright) 100%
+  );
+  opacity: 0;
+  transition: opacity var(--co-transition);
+  z-index: 1;
+  box-shadow:
+    inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
+    0 0 12px rgba(196, 168, 75, 0.2);
+}
+
+.settings-row:hover:not(.is-selected) {
+  background: rgba(201, 168, 74, 0.08);
+}
+
+.settings-row.is-selected .settings-row__bar {
+  opacity: 1;
+}
+
+.settings-row.is-selected,
+.settings-row.is-selected .settings-row__label,
+.settings-row.is-selected .settings-row__value,
+.settings-row.is-selected .settings-row__value-text,
+.settings-row.is-selected .settings-cycler__arrow,
+.settings-row.is-selected .settings-slider__pct {
+  color: var(--co-select-text);
+  opacity: 1;
+}
+
+.settings-rows.is-focus-region .settings-row.is-selected .settings-row__bar {
+  box-shadow:
+    inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
+    0 0 0 1px rgba(62, 207, 74, 0.35),
+    0 0 14px rgba(196, 168, 75, 0.28);
+}
+
+.settings-row.is-readonly:not(.is-selected) .settings-row__label,
+.settings-row.is-readonly:not(.is-selected) .settings-row__value-text {
+  opacity: 0.78;
+}
+
+.settings-cycler {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(10px * var(--co-ui-scale));
+  min-width: 0;
+}
+
+.settings-cycler__arrow {
+  flex-shrink: 0;
+  font-size: calc(14px * var(--co-ui-scale));
+  font-weight: 700;
+  color: var(--co-amber-muted);
+  opacity: 0.75;
+  line-height: 1;
+}
+
+.settings-row.is-selected .settings-cycler__arrow {
+  color: var(--co-select-text);
+  opacity: 0.9;
+}
+
+.settings-row.is-readonly .settings-cycler__arrow {
+  visibility: hidden;
+}
+
+.settings-slider {
+  display: flex;
+  align-items: center;
+  gap: calc(14px * var(--co-ui-scale));
+  width: min(100%, calc(260px * var(--co-ui-scale)));
+}
+
+.settings-slider__track {
+  position: relative;
+  flex: 1;
+  height: calc(2px * var(--co-ui-scale));
+  background: rgba(216, 221, 208, 0.35);
+}
+
+.settings-slider__fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(216, 221, 208, 0.85);
+}
+
+.settings-slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: calc(4px * var(--co-ui-scale));
+  height: calc(14px * var(--co-ui-scale));
+  background: var(--co-text-pale);
+  transform: translate(-50%, -50%);
+}
+
+.settings-slider__pct {
+  flex-shrink: 0;
+  min-width: calc(42px * var(--co-ui-scale));
+  font-size: calc(15px * var(--co-ui-scale));
+  letter-spacing: 0.04em;
+  color: var(--co-text-pale);
+  text-align: right;
+}
+
+.settings-row.is-selected .settings-slider__track {
+  background: rgba(26, 28, 24, 0.35);
+}
+
+.settings-row.is-selected .settings-slider__fill,
+.settings-row.is-selected .settings-slider__thumb {
+  background: var(--co-select-text);
+}
+
+.settings-description {
+  flex-shrink: 0;
+  margin-top: calc(6px * var(--co-ui-scale));
+  padding:
+    calc(12px * var(--co-ui-scale))
+    calc(14px * var(--co-ui-scale))
+    calc(4px * var(--co-ui-scale));
+  border-top: 1px solid rgba(201, 168, 74, 0.18);
+  min-height: calc(44px * var(--co-ui-scale));
+  font-size: calc(13px * var(--co-ui-scale));
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  line-height: 1.45;
+  color: var(--co-text-muted);
+}
+
+/* Host-specific: embedded in pause menu (left nav visible) */
+
+.settings-view {
+  position: absolute;
+  top: 50%;
+  left: calc(50% + 48px * var(--co-ui-scale));
+  transform: translate(-50%, calc(-50% + 10px * var(--co-ui-scale)));
+  z-index: 11;
+  width: min(calc(920px * var(--co-ui-scale)), calc(100vw - 80px * var(--co-ui-scale)));
+  height: min(calc(720px * var(--co-ui-scale)), calc(100vh - 120px * var(--co-ui-scale)));
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity 220ms ease-out,
+    transform 220ms ease-out,
+    visibility 0ms linear 220ms;
+}
+
+.settings-view.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translate(-50%, -50%);
+  transition:
+    opacity 220ms ease-out,
+    transform 220ms ease-out,
+    visibility 0ms linear 0ms;
+}
+
+.settings-view[hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .settings-view {
+    transform: translate(-50%, -50%);
+    transition: opacity 120ms ease-out, visibility 0ms linear 120ms;
+  }
+
+  .settings-view.is-open {
+    transition: opacity 120ms ease-out, visibility 0ms linear 0ms;
+  }
+}
+
+/* Settings prompt bar (host provides the element; these are shared styles) */
+
+.prompt-bar--settings {
+  gap: calc(28px * var(--co-ui-scale));
+}
+
+.prompt-bar--settings .prompt[hidden] {
+  display: none;
+}
+
+.prompt__glyph--text {
+  min-width: calc(28px * var(--co-ui-scale));
+  height: calc(22px * var(--co-ui-scale));
+  padding: 0 calc(6px * var(--co-ui-scale));
+  border-radius: 2px;
+  font-size: calc(11px * var(--co-ui-scale));
+  letter-spacing: 0.04em;
+}

ui/views/CommonwealthOnline/settings/settings.js

@@ -0,0 +1,556 @@
+(function () {
+  "use strict";
+
+  var TAB_IDS = ["game", "multiplayer"];
+
+  function deepCloneSettingsData(source) {
+    return JSON.parse(JSON.stringify(source || []));
+  }
+
+  function flattenSettings(sections) {
+    var flat = [];
+    sections.forEach(function (section) {
+      section.items.forEach(function (item) {
+        flat.push(item);
+      });
+    });
+    return flat;
+  }
+
+  function buildMarkup(options) {
+    var showHeading = options.showHeading !== false;
+    var gameTabLabel = options.gameTabLabel || "FALLOUT 4";
+    var multiplayerTabLabel = options.multiplayerTabLabel || "MULTIPLAYER";
+
+    return (
+      '<div class="co-settings' +
+      (options.layout === "standalone" ? " co-settings--standalone" : "") +
+      '">' +
+      '<div class="settings-panel">' +
+      (showHeading
+        ? '<h1 class="settings-panel__heading">SETTINGS</h1>'
+        : "") +
+      '<div class="settings-tabs" data-co-settings-tabs role="tablist" aria-label="Settings tabs">' +
+      '<button type="button" class="settings-tab" role="tab" data-tab="game" aria-selected="false" aria-controls="gameSettingsPane">' +
+      gameTabLabel +
+      "</button>" +
+      '<button type="button" class="settings-tab is-selected" role="tab" data-tab="multiplayer" aria-selected="true" aria-controls="multiplayerSettingsPane">' +
+      multiplayerTabLabel +
+      "</button>" +
+      "</div>" +
+      '<div class="settings-pane-stack">' +
+      '<div class="settings-pane settings-pane--game" data-co-settings-pane="game" role="tabpanel" hidden>' +
+      '<h2 class="settings-pane__heading">GAME SETTINGS</h2>' +
+      '<p class="settings-pane__description">' +
+      "Adjust Fallout 4 controls, display, audio, and gameplay options using the default game settings menu." +
+      "</p>" +
+      '<button type="button" class="settings-open-btn" data-co-settings-open-game>' +
+      "OPEN FALLOUT 4 SETTINGS" +
+      "</button>" +
+      '<p class="settings-pane__note">' +
+      "This will open the vanilla Fallout 4 settings menu. Commonwealth Online will return after it closes." +
+      "</p>" +
+      "</div>" +
+      '<div class="settings-pane settings-pane--multiplayer" data-co-settings-pane="multiplayer" role="tabpanel">' +
+      '<div class="settings-rows" data-co-settings-rows aria-label="Multiplayer setting options" role="listbox"></div>' +
+      '<p class="settings-description" data-co-settings-description></p>' +
+      "</div>" +
+      "</div>" +
+      "</div>" +
+      "</div>"
+    );
+  }
+
+  /**
+   * Reusable Commonwealth Online settings UI.
+   *
+   * Usage (pause menu, main menu, etc.):
+   *
+   *   var settings = CO_Settings.create({
+   *     mount: document.getElementById("settingsMount"),
+   *     promptBar: document.getElementById("settingsPromptBar"), // optional
+   *     bridge: window.CommonwealthOnlineUI,
+   *     onBack: function () { ... },
+   *     layout: "embedded", // or "standalone"
+   *   });
+   *   settings.show();
+   */
+  function create(options) {
+    if (!options || !options.mount) {
+      throw new Error("CO_Settings.create requires a mount element");
+    }
+
+    var mountEl = options.mount;
+    var promptBarEl = options.promptBar || null;
+    var bridge = options.bridge || {};
+    var onBack = typeof options.onBack === "function" ? options.onBack : function () {};
+    var layout = options.layout || "embedded";
+    var showHeading = options.showHeading !== false;
+
+    var multiplayerSettings = deepCloneSettingsData(
+      options.settingsData || window.CO_SettingsData
+    );
+    var flatSettings = flattenSettings(multiplayerSettings);
+
+    var visible = false;
+    var settingsFocus = "tabs";
+    var activeTab = options.defaultTab || "multiplayer";
+    var settingIndex = 0;
+
+    mountEl.innerHTML = buildMarkup({
+      layout: layout,
+      showHeading: showHeading,
+      gameTabLabel: options.gameTabLabel,
+      multiplayerTabLabel: options.multiplayerTabLabel
+    });
+
+    var rootEl = mountEl.querySelector(".co-settings");
+    var settingsTabsEl = mountEl.querySelector("[data-co-settings-tabs]");
+    var settingsRowsEl = mountEl.querySelector("[data-co-settings-rows]");
+    var settingsDescriptionEl = mountEl.querySelector("[data-co-settings-description]");
+    var gameSettingsPane = mountEl.querySelector('[data-co-settings-pane="game"]');
+    var multiplayerSettingsPane = mountEl.querySelector('[data-co-settings-pane="multiplayer"]');
+    var openGameSettingsBtn = mountEl.querySelector("[data-co-settings-open-game]");
+    var tabButtons = settingsTabsEl
+      ? Array.prototype.slice.call(settingsTabsEl.querySelectorAll(".settings-tab"))
+      : [];
+
+    function getCurrentSetting() {
+      return flatSettings[settingIndex] || null;
+    }
+
+    function formatSettingValue(setting) {
+      if (setting.type === "toggle") {
+        return setting.value ? "ON" : "OFF";
+      }
+      if (setting.type === "slider") {
+        return setting.value + "%";
+      }
+      return String(setting.value);
+    }
+
+    function notifySettingChanged(setting) {
+      if (typeof bridge.setMultiplayerSetting === "function") {
+        bridge.setMultiplayerSetting(setting.key, setting.value);
+      }
+    }
+
+    function renderTabs() {
+      if (!settingsTabsEl) {
+        return;
+      }
+
+      tabButtons.forEach(function (tab) {
+        var tabId = tab.getAttribute("data-tab");
+        var isSelected = tabId === activeTab;
+        tab.classList.toggle("is-selected", isSelected);
+        tab.setAttribute("aria-selected", isSelected ? "true" : "false");
+        tab.tabIndex = isSelected ? 0 : -1;
+      });
+      settingsTabsEl.classList.toggle("is-focus-region", settingsFocus === "tabs");
+    }
+
+    function buildValueMarkup(setting) {
+      if (setting.type === "slider") {
+        var min = setting.min != null ? setting.min : 0;
+        var max = setting.max != null ? setting.max : 100;
+        var fill = ((setting.value - min) / (max - min)) * 100;
+        return (
+          '<span class="settings-slider" aria-hidden="true">' +
+          '<span class="settings-slider__track">' +
+          '<span class="settings-slider__fill" style="width:' + fill + '%"></span>' +
+          '<span class="settings-slider__thumb" style="left:' + fill + '%"></span>' +
+          "</span>" +
+          '<span class="settings-slider__pct">' + setting.value + "%</span>" +
+          "</span>"
+        );
+      }
+
+      var usesCycler = setting.type === "toggle" || setting.type === "select";
+
+      if (usesCycler) {
+        return (
+          '<span class="settings-cycler">' +
+          '<span class="settings-cycler__arrow" aria-hidden="true">&lt;</span>' +
+          '<span class="settings-row__value-text"></span>' +
+          '<span class="settings-cycler__arrow" aria-hidden="true">&gt;</span>' +
+          "</span>"
+        );
+      }
+
+      return '<span class="settings-row__value-text"></span>';
+    }
+
+    function renderRows() {
+      if (!settingsRowsEl) {
+        return;
+      }
+
+      settingsRowsEl.innerHTML = "";
+      var flatIndex = 0;
+
+      multiplayerSettings.forEach(function (section) {
+        var sectionEl = document.createElement("div");
+        sectionEl.className = "settings-section";
+
+        var heading = document.createElement("h3");
+        heading.className = "settings-section__heading";
+        heading.textContent = section.section;
+        sectionEl.appendChild(heading);
+
+        section.items.forEach(function (setting) {
+          var index = flatIndex;
+          flatIndex += 1;
+
+          var button = document.createElement("button");
+          button.type = "button";
+          button.className = "settings-row";
+          button.setAttribute("role", "option");
+          button.setAttribute("data-setting-index", String(index));
+          button.setAttribute("data-setting-key", setting.key);
+
+          if (index === settingIndex) {
+            button.classList.add("is-selected");
+          }
+          if (setting.type === "text" || setting.type === "keybind") {
+            button.classList.add("is-readonly");
+          }
+
+          button.innerHTML =
+            '<span class="settings-row__label"></span>' +
+            '<span class="settings-row__value">' + buildValueMarkup(setting) + "</span>" +
+            '<span class="settings-row__bar" aria-hidden="true"></span>';
+
+          button.querySelector(".settings-row__label").textContent = setting.label;
+
+          var valueText = button.querySelector(".settings-row__value-text");
+          if (valueText) {
+            valueText.textContent = formatSettingValue(setting);
+          }
+
+          button.addEventListener("click", function () {
+            settingIndex = index;
+            settingsFocus = "content";
+            activeTab = "multiplayer";
+            render();
+          });
+
+          sectionEl.appendChild(button);
+        });
+
+        settingsRowsEl.appendChild(sectionEl);
+      });
+
+      settingsRowsEl.classList.toggle(
+        "is-focus-region",
+        settingsFocus === "content" && activeTab === "multiplayer"
+      );
+    }
+
+    function renderDescription() {
+      if (!settingsDescriptionEl) {
+        return;
+      }
+      var setting = getCurrentSetting();
+      settingsDescriptionEl.textContent =
+        setting && setting.description ? setting.description : "";
+    }
+
+    function renderPanes() {
+      if (gameSettingsPane) {
+        gameSettingsPane.hidden = activeTab !== "game";
+        gameSettingsPane.classList.toggle(
+          "is-focus-region",
+          settingsFocus === "content" && activeTab === "game"
+        );
+      }
+      if (multiplayerSettingsPane) {
+        multiplayerSettingsPane.hidden = activeTab !== "multiplayer";
+      }
+      if (openGameSettingsBtn) {
+        openGameSettingsBtn.classList.toggle(
+          "is-focused",
+          settingsFocus === "content" && activeTab === "game"
+        );
+      }
+    }
+
+    function render() {
+      renderTabs();
+      renderPanes();
+      renderRows();
+      renderDescription();
+    }
+
+    function setActiveTab(tabId) {
+      if (TAB_IDS.indexOf(tabId) === -1) {
+        return;
+      }
+      activeTab = tabId;
+      render();
+    }
+
+    function moveTab(delta) {
+      var current = TAB_IDS.indexOf(activeTab);
+      if (current < 0) {
+        current = 0;
+      }
+      var next = current + delta;
+      if (next < 0) {
+        next = TAB_IDS.length - 1;
+      } else if (next >= TAB_IDS.length) {
+        next = 0;
+      }
+      setActiveTab(TAB_IDS[next]);
+    }
+
+    function setSettingsFocus(region) {
+      settingsFocus = region;
+      render();
+    }
+
+    function adjustSetting(delta) {
+      var setting = getCurrentSetting();
+      if (!setting || activeTab !== "multiplayer") {
+        return;
+      }
+
+      if (setting.type === "text") {
+        console.log("[CO Settings] Display name editing not implemented:", setting.key);
+        return;
+      }
+
+      if (setting.type === "keybind") {
+        console.log(
+          "[CO Settings] Keybind selected (rebinding not implemented):",
+          setting.key,
+          setting.value
+        );
+        return;
+      }
+
+      if (setting.type === "toggle") {
+        setting.value = !setting.value;
+        notifySettingChanged(setting);
+        render();
+        return;
+      }
+
+      if (setting.type === "select") {
+        var optionsList = setting.options || [];
+        if (!optionsList.length) {
+          return;
+        }
+        var current = optionsList.indexOf(setting.value);
+        if (current < 0) {
+          current = 0;
+        }
+        var next = current + (delta === 0 ? 1 : delta);
+        if (next < 0) {
+          next = optionsList.length - 1;
+        } else if (next >= optionsList.length) {
+          next = 0;
+        }
+        setting.value = optionsList[next];
+        notifySettingChanged(setting);
+        render();
+        return;
+      }
+
+      if (setting.type === "slider") {
+        var step = setting.step != null ? setting.step : 5;
+        var min = setting.min != null ? setting.min : 0;
+        var max = setting.max != null ? setting.max : 100;
+        var amount = delta === 0 ? step : delta * step;
+        var nextValue = Math.max(min, Math.min(max, setting.value + amount));
+        if (nextValue === setting.value) {
+          return;
+        }
+        setting.value = nextValue;
+        notifySettingChanged(setting);
+        render();
+      }
+    }
+
+    function activateSetting() {
+      var setting = getCurrentSetting();
+      if (!setting || activeTab !== "multiplayer") {
+        return;
+      }
+
+      if (setting.type === "toggle" || setting.type === "select" || setting.type === "slider") {
+        adjustSetting(setting.type === "toggle" ? 0 : 1);
+        return;
+      }
+
+      if (setting.type === "keybind") {
+        console.log(
+          "[CO Settings] Keybind selected (rebinding not implemented):",
+          setting.key,
+          setting.value
+        );
+        return;
+      }
+
+      if (setting.type === "text") {
+        console.log("[CO Settings] Display name editing not implemented:", setting.key);
+      }
+    }
+
+    function moveSettingRow(delta) {
+      if (!flatSettings.length) {
+        return;
+      }
+      var next = settingIndex + delta;
+      if (next < 0) {
+        next = flatSettings.length - 1;
+      } else if (next >= flatSettings.length) {
+        next = 0;
+      }
+      settingIndex = next;
+      render();
+
+      if (settingsRowsEl) {
+        var selectedRow = settingsRowsEl.querySelector(
+          '[data-setting-index="' + settingIndex + '"]'
+        );
+        if (selectedRow && typeof selectedRow.scrollIntoView === "function") {
+          selectedRow.scrollIntoView({ block: "nearest" });
+        }
+      }
+    }
+
+    function openVanillaGameSettings() {
+      if (typeof bridge.openGameSettings === "function") {
+        bridge.openGameSettings();
+      }
+    }
+
+    tabButtons.forEach(function (tab) {
+      tab.addEventListener("click", function () {
+        settingsFocus = "tabs";
+        setActiveTab(tab.getAttribute("data-tab"));
+      });
+    });
+
+    if (openGameSettingsBtn) {
+      openGameSettingsBtn.addEventListener("click", function () {
+        settingsFocus = "content";
+        activeTab = "game";
+        render();
+        openVanillaGameSettings();
+      });
+    }
+
+    function show() {
+      visible = true;
+      settingsFocus = "tabs";
+      activeTab = options.defaultTab || "multiplayer";
+      settingIndex = 0;
+      if (promptBarEl) {
+        promptBarEl.hidden = false;
+      }
+      render();
+    }
+
+    function hide() {
+      visible = false;
+      if (promptBarEl) {
+        promptBarEl.hidden = true;
+      }
+    }
+
+    function handleKeydown(event) {
+      if (!visible) {
+        return false;
+      }
+
+      switch (event.key) {
+        case "ArrowUp":
+          event.preventDefault();
+          if (settingsFocus === "content" && activeTab === "multiplayer") {
+            moveSettingRow(-1);
+          }
+          return true;
+
+        case "ArrowDown":
+          event.preventDefault();
+          if (settingsFocus === "content" && activeTab === "multiplayer") {
+            moveSettingRow(1);
+          }
+          return true;
+
+        case "ArrowLeft":
+          event.preventDefault();
+          if (settingsFocus === "tabs") {
+            moveTab(-1);
+          } else if (activeTab === "multiplayer") {
+            adjustSetting(-1);
+          } else {
+            moveTab(-1);
+          }
+          return true;
+
+        case "ArrowRight":
+          event.preventDefault();
+          if (settingsFocus === "tabs") {
+            moveTab(1);
+          } else if (activeTab === "multiplayer") {
+            adjustSetting(1);
+          } else {
+            moveTab(1);
+          }
+          return true;
+
+        case "Tab":
+          event.preventDefault();
+          setSettingsFocus(settingsFocus === "tabs" ? "content" : "tabs");
+          return true;
+
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          if (settingsFocus === "tabs") {
+            setSettingsFocus("content");
+          } else if (activeTab === "game") {
+            openVanillaGameSettings();
+          } else {
+            activateSetting();
+          }
+          return true;
+
+        case "Escape":
+          event.preventDefault();
+          hide();
+          onBack();
+          return true;
+
+        default:
+          return false;
+      }
+    }
+
+    function destroy() {
+      hide();
+      mountEl.innerHTML = "";
+    }
+
+    return {
+      show: show,
+      hide: hide,
+      isVisible: function () {
+        return visible;
+      },
+      handleKeydown: handleKeydown,
+      render: render,
+      destroy: destroy,
+      getSettingsData: function () {
+        return multiplayerSettings;
+      }
+    };
+  }
+
+  window.CO_Settings = {
+    create: create
+  };
+})();