@shoalrun/cli 0.0.0-stage → 0.1.0-alpha.11

package/assets/cookbook-chooser.js

@@ -0,0 +1,170 @@
+const cookbookInstances = new Map();
+for (const [chooserIndex, chooser] of [...document.querySelectorAll('[data-cookbook-chooser]')].entries()) {
+  const controls = chooser.querySelector('.cookbook-chooser-controls');
+  const status = chooser.querySelector('.cookbook-chooser-status');
+  const result = chooser.querySelector('.cookbook-chooser-result');
+  const actions = chooser.querySelector('.cookbook-path-actions');
+  if (!controls || !status || !result || !actions) continue;
+  let config;
+  try { config = JSON.parse(chooser.getAttribute('data-cookbook-chooser')); }
+  catch { continue; }
+  const { options, mode, title } = config;
+  if (!Array.isArray(options)) continue;
+  const inputs = [...controls.querySelectorAll('input')];
+  const instance = cookbookInstances.get(config.id) ?? 0;
+  cookbookInstances.set(config.id, instance + 1);
+  const parameter = `cookbook.${config.id}.${instance}`;
+  for (const input of inputs) input.name = parameter;
+  const cache = new Map();
+  let revision = 0;
+  let selected = [];
+  const fetchText = (route, kind) => {
+    const key = `${kind}:${route}`;
+    if (!cache.has(key)) cache.set(key, fetch(route).then(response => {
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      return response.text();
+    }).catch(error => { cache.delete(key); throw error; }));
+    return cache.get(key);
+  };
+  const recipeArticle = async option => {
+    const html = await fetchText(option.route, 'html');
+    const page = new DOMParser().parseFromString(html, 'text/html');
+    const article = page.querySelector('main[data-document-type="recipe"] > article');
+    if (!article) throw new Error('Recipe content was not found');
+    return article;
+  };
+  const restore = () => {
+    const values = new URL(location.href).searchParams.get(parameter)?.split(',') ?? [];
+    let chosen = false;
+    for (const input of inputs) {
+      input.checked = values.includes(input.value) && (mode !== 'single' || !chosen);
+      chosen ||= input.checked;
+    }
+  };
+  const share = actions.querySelector('.cookbook-share');
+  const update = async (save = true) => {
+    const current = ++revision;
+    selected = options.filter(option => inputs.some(input => input.value === option.id && input.checked));
+    const currentSelection = selected;
+    const url = new URL(location.href);
+    if (selected.length) url.searchParams.set(parameter, selected.map(option => option.id).join(','));
+    else url.searchParams.delete(parameter);
+    if (save) history.replaceState(null, '', url);
+    share.href = url.href;
+    result.replaceChildren();
+    actions.hidden = true;
+    if (!selected.length) {
+      status.textContent = mode === 'single' ? 'Choose one recipe.' : 'Choose one or more recipes.';
+      return;
+    }
+    status.textContent = 'Loading your path…';
+    const articles = await Promise.allSettled(selected.map(recipeArticle));
+    if (current !== revision) return;
+    const path = document.createElement('div');
+    path.className = 'cookbook-assembled-path';
+    const heading = document.createElement('h2');
+    heading.textContent = 'Your path';
+    path.append(heading);
+    for (const [index, option] of currentSelection.entries()) {
+      const step = document.createElement('section');
+      step.className = 'cookbook-assembled-recipe';
+      const heading = document.createElement('h3');
+      heading.textContent = `${index + 1}. ${option.title}`;
+      step.append(heading);
+      const source = document.createElement('p');
+      const sourceLink = document.createElement('a');
+      sourceLink.href = option.route;
+      sourceLink.textContent = 'Open the full recipe';
+      source.append(sourceLink);
+      step.append(source);
+      const article = articles[index];
+      if (article.status === 'fulfilled') {
+        const body = document.importNode(article.value, true);
+        for (const oldHeading of body.querySelectorAll('h1,h2,h3,h4,h5,h6')) {
+          const level = Math.min(Number(oldHeading.tagName.slice(1)) + 2, 6);
+          const newHeading = document.createElement(`h${level}`);
+          for (const attribute of oldHeading.attributes) newHeading.setAttribute(attribute.name, attribute.value);
+          newHeading.append(...oldHeading.childNodes);
+          oldHeading.replaceWith(newHeading);
+        }
+        const idMap = new Map();
+        for (const element of body.querySelectorAll('[id]')) {
+          const oldId = element.id;
+          const newId = `cookbook-${chooserIndex}-${option.id}-${oldId}`;
+          idMap.set(oldId, newId);
+          element.id = newId;
+        }
+        for (const element of body.querySelectorAll('[aria-labelledby],[aria-describedby],[aria-controls],[for]')) {
+          for (const name of ['aria-labelledby', 'aria-describedby', 'aria-controls', 'for']) {
+            if (element.hasAttribute(name)) element.setAttribute(name, element.getAttribute(name).split(/\s+/).map(id => idMap.get(id) ?? id).join(' '));
+          }
+        }
+        for (const element of body.querySelectorAll('[href],[src]')) {
+          for (const name of ['href', 'src']) {
+            const value = element.getAttribute(name);
+            if (!value) continue;
+            if (name === 'href' && value.startsWith('#')) {
+              let id;
+              try { id = decodeURIComponent(value.slice(1)); } catch { id = value.slice(1); }
+              if (idMap.has(id)) { element.setAttribute(name, `#${idMap.get(id)}`); continue; }
+            }
+            element.setAttribute(name, new URL(value, new URL(option.route, location.href)).href);
+          }
+        }
+        step.append(...body.childNodes);
+      } else {
+        const error = document.createElement('p');
+        error.textContent = 'This recipe could not be loaded here. Open the full recipe to continue, or select it again to retry.';
+        step.append(error);
+      }
+      path.append(step);
+    }
+    result.replaceChildren(path);
+    document.dispatchEvent(new CustomEvent('shoalrun:content', { detail: { root: chooser } }));
+    actions.hidden = false;
+    const failed = articles.some(article => article.status === 'rejected');
+    actions.querySelector('.cookbook-print').disabled = failed;
+    status.textContent = failed ? 'Some instructions could not be loaded. Open the full recipe or try again.' : `${selected.length} ${selected.length === 1 ? 'recipe' : 'recipes'} in your path.`;
+  };
+  const download = actions.querySelector('.cookbook-download');
+  download.addEventListener('click', async () => {
+    const current = revision;
+    const selection = [...selected];
+    download.disabled = true;
+    try {
+      const pages = await Promise.all(selection.map(option => fetchText(option.markdownRoute, 'markdown')));
+      if (current !== revision) return;
+      // Preserve the complete authored Markdown, including fenced code. Each recipe retains its own heading.
+      const markdown = pages.length === 1 ? pages[0] : `# ${title}\n\n${pages.map(page => page.replace(/^---\r?\n[\s\S]*?\r?\n---\r?\n/, '').trim()).join('\n\n---\n\n')}\n`;
+      const objectUrl = URL.createObjectURL(new Blob([markdown], { type: 'text/markdown;charset=utf-8' }));
+      const link = document.createElement('a');
+      link.href = objectUrl;
+      link.download = `${config.id}-${selection.map(option => option.id).join('-')}.md`;
+      document.body.append(link);
+      link.click();
+      link.remove();
+      setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
+      status.textContent = 'Your Markdown download is ready.';
+    } catch {
+      if (current === revision) status.textContent = 'Markdown could not be downloaded. Try again or open the full recipe.';
+    } finally { download.disabled = false; }
+  });
+  actions.querySelector('.cookbook-print').addEventListener('click', () => {
+    const sheet = document.createElement('div');
+    sheet.className = 'cookbook-print-sheet';
+    const heading = document.createElement('h1');
+    heading.textContent = title;
+    sheet.append(heading, result.cloneNode(true));
+    for (const details of sheet.querySelectorAll('details')) details.open = true;
+    document.body.append(sheet);
+    document.body.classList.add('cookbook-printing');
+    const cleanup = () => { sheet.remove(); document.body.classList.remove('cookbook-printing'); };
+    window.addEventListener('afterprint', cleanup, { once: true });
+    try { window.print(); } catch { cleanup(); }
+  });
+  for (const input of inputs) input.addEventListener('change', () => update());
+  window.addEventListener('popstate', () => { restore(); update(false); });
+  controls.hidden = false;
+  restore();
+  update(false);
+}

package/assets/copy-markdown.js

@@ -0,0 +1,24 @@
+const button = document.querySelector('[data-copy-markdown]');
+const status = document.querySelector('[data-copy-markdown-status]');
+const link = document.querySelector('.page-formats a');
+if (button && status && link) {
+  button.hidden = false;
+  button.addEventListener('click', async () => {
+    if (button.getAttribute('aria-disabled') === 'true') return;
+    button.setAttribute('aria-disabled', 'true');
+    status.textContent = 'Copying Markdown…';
+    try {
+      if (!navigator.clipboard?.writeText) throw new Error('clipboard');
+      const response = await fetch(link.href);
+      if (!response.ok) throw new Error('fetch');
+      const markdown = await response.text();
+      await navigator.clipboard.writeText(markdown);
+      status.textContent = 'Markdown copied.';
+      globalThis.shoalrunAnalytics?.track('markdown_copy', {}, button);
+    } catch {
+      status.textContent = 'Could not copy Markdown. Open Read as Markdown to copy it manually.';
+    } finally {
+      button.removeAttribute('aria-disabled');
+    }
+  });
+}

package/assets/example-panel.js

@@ -0,0 +1,77 @@
+const panel = document.querySelector('.examples');
+
+if (panel) {
+  const expandButton = panel.querySelector('.examples-expand');
+  const setExpanded = expanded => {
+    panel.classList.toggle('is-expanded', expanded);
+    panel.closest('.page-rail')?.classList.toggle('has-expanded-examples', expanded);
+    expandButton?.setAttribute('aria-pressed', String(expanded));
+    if (expandButton) expandButton.textContent = expanded ? 'Close wide view' : 'Expand';
+  };
+  expandButton?.addEventListener('click', () => setExpanded(!panel.classList.contains('is-expanded')));
+  addEventListener('keydown', event => {
+    if (event.key === 'Escape' && panel.classList.contains('is-expanded')) {
+      setExpanded(false);
+      expandButton?.focus();
+    }
+  });
+  const chooser = panel.querySelector('.api-view-control');
+  const select = panel.querySelector('#api-view-select');
+  const views = [...panel.querySelectorAll('[data-api-view]')];
+  const showView = value => {
+    for (const view of views) view.hidden = view.dataset.apiView !== value;
+    if (select) select.value = value;
+  };
+  if (chooser && select) {
+    showView('examples');
+    chooser.hidden = false;
+    select.addEventListener('change', () => showView(select.value));
+  }
+  const scenarios = [...panel.querySelectorAll('details[name]')];
+  const show = (selected, focus = false, scroll = true) => {
+    for (const scenario of scenarios) {
+      if (scenario.name === selected.name && scenario !== selected) scenario.open = false;
+    }
+    const group = selected.closest('.example-group[data-compact]');
+    if (group) {
+      for (const scenario of group.querySelectorAll('details[name]')) scenario.hidden = scenario !== selected;
+      const picker = group.querySelector('.example-picker select');
+      if (picker) picker.value = selected.id;
+    }
+    selected.open = true;
+    if (scroll) selected.scrollIntoView({ block: 'nearest' });
+    if (focus) selected.querySelector('summary')?.focus({ preventScroll: true });
+  };
+
+  for (const group of panel.querySelectorAll('.example-group[data-compact]')) {
+    const picker = group.querySelector('.example-picker');
+    const select = picker?.querySelector('select');
+    const entries = [...group.querySelectorAll('details[name]')];
+    if (!picker || !select || !entries.length) continue;
+    picker.hidden = false;
+    show(entries.find(entry => entry.open) ?? entries[0], false, false);
+    select.addEventListener('change', () => {
+      const selected = entries.find(entry => entry.id === select.value);
+      if (selected) show(selected);
+    });
+  }
+
+  for (const scenario of scenarios) {
+    scenario.addEventListener('toggle', () => {
+      if (scenario.open && (!chooser || select.value === 'examples')) show(scenario);
+    });
+  }
+
+  const revealHash = () => {
+    if (!location.hash) return;
+    let target;
+    try { target = document.getElementById(decodeURIComponent(location.hash.slice(1))); }
+    catch { return; }
+    if (target instanceof HTMLDetailsElement && panel.contains(target)) {
+      if (chooser) showView('examples');
+      show(target, true);
+    }
+  };
+  addEventListener('hashchange', revealHash);
+  revealHash();
+}

package/assets/file-tree.js

@@ -0,0 +1,49 @@
+// Native disclosures work without this enhancement; arrows add convenient navigation.
+for (const root of document.querySelectorAll('[data-file-tree]')) {
+  const branches = [...root.querySelectorAll('.file-tree-branch')];
+  const controls = root.querySelector('.file-tree-controls');
+  if (controls && branches.length) {
+    controls.hidden = false;
+    controls.querySelector('[data-tree-expand]').addEventListener('click', () => branches.forEach(branch => { branch.open = true; }));
+    controls.querySelector('[data-tree-collapse]').addEventListener('click', () => branches.forEach(branch => { branch.open = false; }));
+  }
+  // Keep regular links and disclosure semantics rather than claiming an ARIA tree widget.
+  for (const label of root.querySelectorAll('.file-tree-file > .file-tree-label')) {
+    if (!label.querySelector('a')) label.tabIndex = 0;
+  }
+  const visibleNodes = () => [...root.querySelectorAll('summary, .file-tree-file > .file-tree-label > a, .file-tree-file > .file-tree-label[tabindex]')].filter(node => node.getClientRects().length);
+  let prefix = '', typedAt = 0;
+  root.addEventListener('keydown', event => {
+    if (event.altKey || event.ctrlKey || event.metaKey || (event.shiftKey && event.key.length !== 1)) return;
+    const target = event.target;
+    const nodes = visibleNodes();
+    const index = nodes.indexOf(target);
+    if (index < 0) return;
+    const branch = target.matches('summary') ? target.parentElement : null;
+    let next;
+    if (event.key === 'ArrowDown') next = nodes[Math.min(index + 1, nodes.length - 1)];
+    else if (event.key === 'ArrowUp') next = nodes[Math.max(index - 1, 0)];
+    else if (event.key === 'Home') next = nodes[0];
+    else if (event.key === 'End') next = nodes.at(-1);
+    else if (event.key === 'ArrowRight' && branch) {
+      if (!branch.open) branch.open = true;
+      else next = nodes[index + 1];
+    } else if (event.key === 'ArrowLeft') {
+      if (branch?.open) branch.open = false;
+      else next = (branch?.parentElement ?? target).parentElement.closest('.file-tree-branch')?.querySelector(':scope > summary');
+    } else if (event.key === '*') {
+      const siblings = target.closest('li')?.parentElement;
+      siblings?.querySelectorAll(':scope > li > .file-tree-branch').forEach(folder => { folder.open = true; });
+    } else if (event.key.length === 1 && event.key !== ' ') {
+      const now = Date.now();
+      prefix = now - typedAt > 700 ? event.key.toLocaleLowerCase() : prefix + event.key.toLocaleLowerCase();
+      typedAt = now;
+      const find = value => [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)].find(node => node.textContent.trim().toLocaleLowerCase().startsWith(value));
+      next = find(prefix);
+      if (!next && prefix.length > 1) { prefix = event.key.toLocaleLowerCase(); next = find(prefix); }
+      if (!next) return;
+    } else return;
+    event.preventDefault();
+    next?.focus();
+  });
+}

package/assets/image-viewer.js

@@ -0,0 +1,41 @@
+// Links remain normal original-image links when modal dialogs are unavailable.
+if (typeof HTMLDialogElement !== 'undefined' && typeof HTMLDialogElement.prototype.showModal === 'function') {
+  let dialog, image, caption, origin;
+  const prepare = () => {
+    if (dialog) return;
+    dialog = document.createElement('dialog');
+    dialog.className = 'doc-image-viewer';
+    dialog.setAttribute('aria-label', 'Expanded image');
+    const close = document.createElement('button');
+    close.type = 'button';
+    close.className = 'image-viewer-close';
+    close.textContent = '×';
+    close.setAttribute('aria-label', 'Close image');
+    close.title = 'Close image';
+    close.addEventListener('click', () => dialog.close());
+    image = document.createElement('img');
+    caption = document.createElement('p');
+    caption.className = 'image-viewer-caption';
+    dialog.append(close, image, caption);
+    document.body.append(dialog);
+    dialog.addEventListener('close', () => { if (origin?.isConnected) origin.focus(); });
+    dialog.addEventListener('click', event => {
+      const bounds = dialog.getBoundingClientRect();
+      if (event.target === dialog && (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom)) dialog.close();
+    });
+  };
+  for (const link of document.querySelectorAll('a[data-image-expand]')) {
+    link.setAttribute('aria-haspopup', 'dialog');
+    link.addEventListener('click', event => {
+      if (event.button || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+      event.preventDefault();
+      prepare();
+      origin = link;
+      image.src = link.href;
+      image.alt = link.querySelector('img')?.alt ?? '';
+      caption.textContent = link.closest('figure')?.querySelector('figcaption')?.textContent ?? image.alt;
+      caption.hidden = !caption.textContent;
+      dialog.showModal();
+    });
+  }
+}

package/assets/mode.js

@@ -0,0 +1,26 @@
+// Loaded in <head> without defer so a saved choice applies before first paint.
+// data-mode on <html> overrides the reader's OS preference; without it, prefers-color-scheme decides.
+(() => {
+  const key = 'shoalrun-color-mode';
+  const root = document.documentElement;
+  const read = () => { try { return localStorage.getItem(key); } catch { return null; } };
+  const saved = read();
+  if (saved === 'light' || saved === 'dark') root.dataset.mode = saved;
+  const system = matchMedia('(prefers-color-scheme: dark)');
+  const isDark = () => root.dataset.mode ? root.dataset.mode === 'dark' : system.matches;
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const toggle = document.querySelector('.mode-toggle');
+    if (!toggle) return;
+    const sync = () => toggle.setAttribute('aria-pressed', String(isDark()));
+    toggle.hidden = false;
+    sync();
+    system.addEventListener('change', sync);
+    toggle.addEventListener('click', () => {
+      const next = isDark() ? 'light' : 'dark';
+      root.dataset.mode = next;
+      try { localStorage.setItem(key, next); } catch {}
+      sync();
+    });
+  });
+})();

package/assets/navigation.js

@@ -0,0 +1,233 @@
+const navigation = document.querySelector('.side');
+const tree = navigation?.querySelector('.nav-tree');
+const search = navigation?.querySelector('.nav-search');
+const filter = navigation?.querySelector('#nav-filter');
+if (filter) filter.placeholder = 'Find a page…';
+const mobile = matchMedia('(max-width: 72rem)');
+const sections = document.querySelector('.section-nav');
+const outline = document.querySelector('.page-toc');
+const outlineSlot = document.querySelector('.mobile-outline-slot');
+const outlineHome = outline ? document.createComment('Page outline') : null;
+outline?.before(outlineHome);
+const menuLink = document.querySelector('.mobile-menu');
+let openMenu;
+
+// Keep one copy of each navigation region. The static document stays readable
+// without scripts; only the enhanced mobile UI moves navigation into a dialog.
+if (menuLink && typeof HTMLDialogElement !== 'undefined' && HTMLDialogElement.prototype.showModal) {
+  const regions = [sections, navigation].filter(Boolean).map(node => {
+    const home = document.createComment('Navigation region');
+    node.before(home);
+    return { node, home };
+  });
+  const menu = document.createElement('button');
+  menu.type = 'button';
+  menu.className = menuLink.className;
+  menu.textContent = 'Menu';
+  menu.setAttribute('aria-haspopup', 'dialog');
+  menu.setAttribute('aria-controls', 'documentation-menu');
+  menu.setAttribute('aria-expanded', 'false');
+  menuLink.replaceWith(menu);
+  const dialog = document.createElement('dialog');
+  dialog.id = 'documentation-menu';
+  dialog.className = 'navigation-dialog';
+  dialog.setAttribute('aria-label', 'Documentation navigation');
+  const header = document.createElement('div');
+  header.className = 'navigation-dialog-header';
+  const title = document.createElement('strong');
+  title.textContent = 'Documentation';
+  const close = document.createElement('button');
+  close.type = 'button';
+  close.textContent = 'Close';
+  close.setAttribute('aria-label', 'Close navigation');
+  close.autofocus = true;
+  header.append(title, close);
+  dialog.append(header);
+  document.body.append(dialog);
+  let readingPosition;
+  let opener;
+  const finishClose = (restoreFocus = true) => {
+    if (!readingPosition) return;
+    document.documentElement.classList.remove('navigation-open');
+    menu.setAttribute('aria-expanded', 'false');
+    if (restoreFocus) (opener?.isConnected ? opener : menu).focus({ preventScroll: true });
+    window.scrollTo({ ...readingPosition, behavior: 'instant' });
+    readingPosition = null;
+    opener = null;
+  };
+  const closeMenu = (restoreFocus = true) => {
+    if (dialog.open) dialog.close();
+    finishClose(restoreFocus);
+  };
+  openMenu = (trigger = menu) => {
+    if (!mobile.matches || dialog.open) return;
+    readingPosition = { left: scrollX, top: scrollY };
+    opener = trigger;
+    document.documentElement.classList.add('navigation-open');
+    menu.setAttribute('aria-expanded', 'true');
+    dialog.showModal();
+    // Reveal the current page without moving the underlying article.
+    const current = tree?.querySelector('[aria-current="page"]');
+    if (current) {
+      const top = header.getBoundingClientRect().bottom;
+      const rect = current.getBoundingClientRect();
+      if (rect.top < top || rect.bottom > innerHeight) dialog.scrollTop += rect.top - top - 16;
+    }
+  };
+  menu.addEventListener('click', () => openMenu(menu));
+  close.addEventListener('click', () => closeMenu());
+  dialog.addEventListener('cancel', event => { event.preventDefault(); closeMenu(); });
+  dialog.addEventListener('close', () => { if (!dialog.open) finishClose(); });
+  dialog.addEventListener('keydown', event => {
+    // Filtering consumes the first Escape; the next closes navigation.
+    if (event.key === 'Escape' && !event.defaultPrevented) {
+      event.preventDefault();
+      closeMenu();
+    }
+  });
+  const outside = event => {
+    const rect = dialog.getBoundingClientRect();
+    return event.target === dialog && (event.clientX < rect.left || event.clientX >= rect.right || event.clientY < rect.top || event.clientY >= rect.bottom);
+  };
+  let backdropPress = false;
+  dialog.addEventListener('pointerdown', event => { backdropPress = outside(event); });
+  dialog.addEventListener('click', event => {
+    if (backdropPress && outside(event)) closeMenu();
+    backdropPress = false;
+  });
+  const updateMenu = () => {
+    const active = document.activeElement;
+    const inRegion = regions.some(({ node }) => node.contains(active));
+    if (mobile.matches) {
+      for (const { node } of regions) {
+        dialog.append(node);
+        const disclosure = node.querySelector(':scope > details');
+        if (disclosure) disclosure.open = true;
+      }
+      // Do not hide a focused desktop control when shrinking the viewport.
+      if (inRegion) {
+        openMenu(menu);
+        const target = active.matches('.nav-disclosure > summary') ? close : active;
+        target.focus({ preventScroll: true });
+      }
+    } else {
+      closeMenu(false);
+      for (const { node, home } of regions) {
+        home.after(node);
+        const disclosure = node.querySelector(':scope > details');
+        if (disclosure) disclosure.open = true;
+      }
+      if (inRegion) active.focus({ preventScroll: true });
+      else if (active === menu || dialog.contains(active)) (navigation ?? sections).focus({ preventScroll: true });
+    }
+  };
+  updateMenu();
+  mobile.addEventListener('change', updateMenu);
+}
+
+const updateOutline = () => {
+  if (!outline || !outlineSlot) return;
+  const active = document.activeElement;
+  const focused = outline.contains(active);
+  if (mobile.matches) outlineSlot.append(outline);
+  else outlineHome.after(outline);
+  outline.querySelector('details').open = !mobile.matches || focused;
+  if (focused) active.focus({ preventScroll: true });
+};
+updateOutline();
+mobile.addEventListener('change', updateOutline);
+
+// Real fragment links remain the no-script fallback. Desktop skip links reveal
+// individually on focus, without inserting a new row into the reading layout.
+for (const link of document.querySelectorAll('[data-region-jump], [data-region-return]')) {
+  link.addEventListener('click', event => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const region = document.getElementById(link.hash.slice(1));
+    if (!region) return;
+    if (region === navigation && mobile.matches && openMenu) {
+      event.preventDefault();
+      openMenu(link);
+      return;
+    }
+    const disclosure = region.querySelector(':scope > details');
+    if (disclosure) disclosure.open = true;
+    region.focus({ preventScroll: true });
+  });
+}
+outline?.addEventListener('keydown', event => {
+  if (event.key !== 'Escape' || event.defaultPrevented || !mobile.matches) return;
+  const disclosure = outline.querySelector('details');
+  if (!disclosure.open) return;
+  event.preventDefault();
+  disclosure.querySelector('summary').focus({ preventScroll: true });
+  disclosure.open = false;
+});
+outline?.addEventListener('click', event => {
+  const link = event.target.closest('li a[href^="#"]');
+  if (!link || !mobile.matches || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+  const heading = document.getElementById(decodeURIComponent(link.hash.slice(1)));
+  if (!heading) return;
+  // Collapse before the native anchor scroll, so the destination does not move.
+  outline.querySelector('details').open = false;
+  if (!heading.hasAttribute('tabindex')) {
+    heading.tabIndex = -1;
+    heading.addEventListener('blur', () => heading.removeAttribute('tabindex'), { once: true });
+  }
+  heading.focus({ preventScroll: true });
+});
+
+if (tree && search && filter) {
+  search.hidden = false;
+  const entries = [...tree.querySelectorAll('.nav-entry')];
+  const groups = [...tree.querySelectorAll('.nav-group')];
+  const status = search.querySelector('.nav-filter-status');
+  let beforeFilter = null;
+
+  const current = tree.querySelector('[aria-current="page"]');
+  if (current && !mobile.matches) {
+    const visibleTop = navigation.querySelector('.nav-tools').getBoundingClientRect().bottom + 8;
+    const visibleBottom = navigation.getBoundingClientRect().bottom - 8;
+    const position = current.getBoundingClientRect();
+    const group = current.closest('.nav-group')?.querySelector(':scope > details > summary');
+    const groupTop = group?.getBoundingClientRect().top ?? position.top;
+    const canShowGroup = position.bottom - groupTop <= visibleBottom - visibleTop;
+    if (position.top < visibleTop || position.bottom > visibleBottom || (canShowGroup && groupTop < visibleTop)) {
+      const targetTop = canShowGroup ? groupTop : position.bottom > visibleBottom ? position.bottom - (visibleBottom - visibleTop) : position.top;
+      navigation.scrollTop += targetTop - visibleTop;
+    }
+  }
+
+  const update = () => {
+    const terms = filter.value.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
+    if (terms.length && !beforeFilter) beforeFilter = new Map(groups.map(group => [group, group.querySelector(':scope > details').open]));
+    let found = 0;
+    for (const entry of entries) {
+      const haystack = entry.dataset.search.toLocaleLowerCase();
+      const match = entry.dataset.readerHidden !== 'true' && terms.every(term => haystack.includes(term));
+      entry.hidden = !match;
+      if (match) found += 1;
+    }
+    for (const group of [...groups].reverse()) {
+      const count = [...group.querySelectorAll('.nav-entry')].filter(entry => !entry.hidden).length;
+      group.hidden = count === 0;
+      const countLabel = group.querySelector(':scope > details > summary .nav-count');
+      if (countLabel) countLabel.textContent = String(count);
+      const details = group.querySelector(':scope > details');
+      if (terms.length) details.open = count > 0;
+      else if (beforeFilter) details.open = beforeFilter.get(group);
+    }
+    if (!terms.length) beforeFilter = null;
+    status.textContent = terms.length ? `${found} ${found === 1 ? 'result' : 'results'}` : '';
+  };
+
+  filter.addEventListener('input', update);
+  document.addEventListener('reader-view-change', update);
+  update();
+  filter.addEventListener('keydown', event => {
+    if (event.key === 'Escape' && filter.value) {
+      filter.value = '';
+      update();
+      event.preventDefault();
+    }
+  });
+}