Add URL-based tab state sync for WASI P2/P3 tabs

Supports shareable deep links with a ?wasi=p2 or ?wasi=p3 query
parameter. On page load, the parameter selects the matching tab
(and persists via the existing localStorage mechanism). Clicking
a tab updates the URL via history.replaceState.

- Add theme/tabs-url-sync.js alongside the mdbook-tabs plugin's
  tabs.js. The companion script runs after the plugin's handler,
  reads the URL on load, and listens for tab clicks via delegation.
- Register the new file in book.toml under additional-js
- Backward compatible: pages without the parameter retain the
  existing localStorage-based behavior

Author: ericgregory

component-model/book.toml

@@ -9,7 +9,7 @@ title = "The WebAssembly Component Model"
 git-repository-url = "https://github.com/bytecodealliance/component-docs/tree/main/component-model"
 edit-url-template = "https://github.com/bytecodealliance/component-docs/tree/main/component-model/{path}"
 additional-css = ["theme/head.hbs", "theme/tabs.css", "theme/version-notice.css"]
-additional-js = ["theme/tabs.js"]
+additional-js = ["theme/tabs.js", "theme/tabs-url-sync.js"]
 
 [output.html.fold]
 enable = true

component-model/theme/tabs-url-sync.js

@@ -0,0 +1,47 @@
+(function () {
+    'use strict';
+
+    const GLOBAL_NAME = 'wasi-version';
+    const PARAM_NAME = 'wasi';
+    const SLUG_TO_NAME = { p2: 'WASI P2', p3: 'WASI P3' };
+    const NAME_TO_SLUG = { 'WASI P2': 'p2', 'WASI P3': 'p3' };
+
+    function readSlugFromUrl() {
+        const value = new URLSearchParams(window.location.search).get(PARAM_NAME);
+        return value && SLUG_TO_NAME[value] ? value : null;
+    }
+
+    function writeSlugToUrl(slug) {
+        const url = new URL(window.location.href);
+        url.searchParams.set(PARAM_NAME, slug);
+        history.replaceState(null, '', url.toString());
+    }
+
+    function activateByName(name) {
+        const tab = document.querySelector(
+            '.mdbook-tabs-container[data-tabglobal="' + GLOBAL_NAME + '"] ' +
+            '.mdbook-tab[data-tabname="' + name + '"]'
+        );
+        if (tab) {
+            tab.click();
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        const slug = readSlugFromUrl();
+        if (slug) {
+            activateByName(SLUG_TO_NAME[slug]);
+        }
+
+        document.addEventListener('click', function (event) {
+            const tab = event.target.closest && event.target.closest('.mdbook-tab');
+            if (!tab) return;
+            const container = tab.closest('.mdbook-tabs-container');
+            if (!container || container.dataset.tabglobal !== GLOBAL_NAME) return;
+            const newSlug = NAME_TO_SLUG[tab.dataset.tabname];
+            if (newSlug) {
+                writeSlugToUrl(newSlug);
+            }
+        });
+    });
+})();