overplay 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 4.2.0 — 2026-10-17
+
+- Widget Settings has two tabs: **General** (panel, notifications and the shortcut) and **Appearance** (theme, pins and the comments button).
+- Opening the sidebar with the shortcut no longer shows a focus ring on the Settings button. Focus moves to the panel; Tab still reaches every button.
+- Website: new pages **How It Works** and **MCP Server** in the header. The MCP Server page lists all 20 MCP tools by permission. The New pill on the landing page opens it.
+- Website: Pricing, Docs, How It Works and MCP Server share one page header (label, title, text, buttons).
+- Dashboard: the usage bars on Plan & Billing use the full width. Team rows no longer push the arrow out of the card on hover, and Teams in the sidebar has a two-people icon.
+
 ## 4.1.0 — 2026-10-17
 
 - New default shortcut to open and close comments: **Alt+C** (**Option+C** on Mac). It works on any keyboard layout. Alt+Shift+C still works, but on Windows Alt+Shift can switch the keyboard language. Settings shows Option on Mac. Set `keyboardShortcut` to keep another key.

package/dist/overplay.esm.js

@@ -474,7 +474,7 @@ function newActivity(comments, seen, selfId) {
 function sameComments(a, b) {
   return a.length === b.length && JSON.stringify(a) === JSON.stringify(b);
 }
-const version = "4.1.0";
+const version = "4.2.0";
 const VERSION = version;
 const PACKAGE = "overplay";
 function updatePrompt(current, latest) {
@@ -781,7 +781,7 @@ const styles = `
 .menu-note{display:flex;align-items:center;gap:2px;margin:4px 0 0;padding:8px 10px 4px;border-top:1px solid var(--cw-line);font-size:12px;color:var(--cw-muted)}
 .footer{justify-content:space-between}
 .footer-note{font-size:13px;color:var(--cw-muted)}
-.settings-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 20px 12px}
+.panel:focus{outline:0}.settings-tabs{grid-template-columns:1fr 1fr;margin:0 0 12px}.settings-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 20px 12px}
 .setting-group{padding:14px 0 6px}
 .setting-group+.setting-group{border-top:1px solid var(--cw-line)}
 .setting-group h3{margin:0 0 6px;font-size:12px;font-weight:650;letter-spacing:1.1px;text-transform:uppercase;color:var(--cw-muted)}
@@ -1697,6 +1697,7 @@ class Overlay {
     /** A newer npm version, found when the sidebar first opens. See checkForUpdate(). */
     __publicField(this, "update", null);
     __publicField(this, "updatePromptOpen", false);
+    __publicField(this, "settingsTab", "general");
     __publicField(this, "updateChecked", false);
     /** The page margin we replaced to make room for the sidebar, restored when it closes. */
     __publicField(this, "pushed", null);
@@ -2259,7 +2260,11 @@ ${this.currentPage()}`;
     this.visible = true;
     this.render();
     this.trackLayoutMotion();
-    (_a = this.shadow.querySelector(".panel button, .launcher")) == null ? void 0 : _a.focus();
+    const panel = this.shadow.querySelector(".panel");
+    if (panel) {
+      panel.tabIndex = -1;
+      panel.focus({ preventScroll: true });
+    } else (_a = this.shadow.querySelector(".launcher")) == null ? void 0 : _a.focus();
     this.checkForUpdate();
   }
   hide() {
@@ -3689,10 +3694,23 @@ ${this.currentPage()}`;
     const view = this.view("Settings", "settings");
     view.append(this.detailHeading("Settings", "Your choices for this project. Other people keep their own."));
     const current = this.settings, body = element("div", "settings-body");
-    const section = (title) => {
+    const tabs = element("div", "tabs settings-tabs");
+    tabs.setAttribute("role", "group");
+    tabs.setAttribute("aria-label", "Settings section");
+    for (const [id, label2] of [["general", "General"], ["appearance", "Appearance"]]) {
+      const tab = button(label2, "tab", () => {
+        this.settingsTab = id;
+        this.render();
+      });
+      tab.setAttribute("aria-pressed", String(this.settingsTab === id));
+      tab.dataset.focus = `settings-tab-${id}`;
+      tabs.append(tab);
+    }
+    body.append(tabs);
+    const section = (title, tab) => {
       const group = element("section", "setting-group");
       group.append(element("h3", "", title));
-      body.append(group);
+      if (tab === this.settingsTab) body.append(group);
       return group;
     };
     const row = (group, label2, hint, control) => {
@@ -3728,9 +3746,9 @@ ${this.currentPage()}`;
       control.addEventListener("click", () => this.setSetting(name, !on));
       return control;
     };
-    const look = section("Appearance");
+    const look = section("Theme", "appearance");
     row(look, "Theme", current.theme === "system" ? "Follows your device" : "", choice("theme", "Theme", [["light", "Light"], ["dark", "Dark"], ["system", "System"]]));
-    const pins = section("Pins");
+    const pins = section("Pins", "appearance");
     const sample = element("div", `pin-sample${current.pinSize === "small" ? " small" : ""}${current.resolvedPins === "gray" ? " resolved-gray" : ""}`);
     sample.setAttribute("aria-hidden", "true");
     sample.style.setProperty("--cw-accent", this.pinColor());
@@ -3754,7 +3772,7 @@ ${this.currentPage()}`;
     row(pins, "Resolved pins", "", choice("resolvedPins", "Resolved pins", [["green", "Green"], ["gray", "Gray"]]));
     row(pins, "Size", "", choice("pinSize", "Pin size", [["regular", "Regular"], ["small", "Small"]]));
     row(pins, "Label", "", choice("pinLabel", "Pin label", [["number", "Number"], ["initials", "Initials"]]));
-    const floating = section("Comments button");
+    const floating = section("Comments button", "appearance");
     const buttonSample = element("div", "launcher-sample");
     buttonSample.setAttribute("aria-hidden", "true");
     const mini = element("span", "launcher-mini");
@@ -3776,7 +3794,7 @@ ${this.currentPage()}`;
     }
     const buttonHint = current.buttonColor === "default" ? "Dark. Takes the site color while open." : current.buttonColor === "site" ? "The color of this site" : PIN_COLORS[current.buttonColor].label;
     row(floating, "Color", buttonHint, buttonSwatches).classList.add("wide");
-    const panel = section("Panel");
+    const panel = section("Panel", "general");
     const open = element("div", "segmented");
     open.setAttribute("role", "group");
     open.setAttribute("aria-label", "Open comments");
@@ -3790,7 +3808,7 @@ ${this.currentPage()}`;
     }
     row(panel, "Open comments", "", open);
     row(panel, "Push the page aside", "The open panel does not cover the page.", toggle("pushContent", "Push the page aside"));
-    const alerts = section("Notifications and keys");
+    const alerts = section("Notifications and keys", "general");
     row(alerts, "New activity", "Show a short notice when others comment or reply.", toggle("notifications", "Show new activity"));
     const keys = shortcutLabel(this.config.keyboardShortcut ?? "", /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent));
     row(alerts, "Keyboard shortcut", this.shortcut ? `${keys} opens and closes comments.` : "This site has no shortcut.", toggle("shortcut", "Keyboard shortcut", !this.shortcut));