@writedocs/generator 0.8.1 → 0.9.1

package/src/pages/[...slug].astro

@@ -69,6 +69,8 @@ import Visibility from "../components/Visibility.astro";
 import { Tree, FileTree, Color, GitHub } from "../components/compound";
 import ApiPlayground from "../components/ApiPlayground.astro";
 import ApiReferencePanel from "../components/ApiReferencePanel.astro";
+import { searchScope, sectionTrail, ALL_SCOPES } from "../lib/search-scope.js";
+import { selectorPlacements } from "../lib/selector-placement.js";
 
 // A page is hand-written (the `pages` collection, sourced from anywhere
 // in the project - docs/ has no special status, see findAllPages() in
@@ -373,6 +375,11 @@ const selectors = buildSelectors(activeSection.path, hrefForSlug, activePagePosi
 // <html lang>: the `language` of the navigation level this page sits under,
 // if any. A hidden page has no level of its own (activeSection is only a
 // fallback for its chrome), so it keeps the default.
+// For search: the section line under this page's result (and words it can
+// be found by), and the version/language/product it belongs to - search
+// shows the reader's own first. A hidden page belongs to no section.
+const pageSearchScope = isHidden ? { key: ALL_SCOPES, label: "" } : searchScope(activeSection.path);
+const pageSectionTrail = isHidden ? "" : sectionTrail(activeSection.path, breadcrumbs);
 const languageSegment = isHidden ? undefined : activeSection.path.find((segment) => segment.kind === "language");
 const pageLang = languageSegment ? (languageSegment.items[languageSegment.index] as { language: string }).language : undefined;
 const globalDropdowns = buildGlobalDropdowns(
@@ -407,6 +414,10 @@ const currentPath = hrefForSlug(currentFileId);
 // it set one explicitly, still wins.
 const pageMode = isHidden && entry.data.mode === "default" ? "frame" : entry.data.mode;
 const showSidebar = pageMode === "default" || pageMode === "wide";
+// Products inside a tab or dropdown switch at the top of the sidebar, not in
+// the top bar (lib/selector-placement.js - TopBar.astro applies the same rule).
+const sidebarPlacements = selectorPlacements(selectors, { sidebar: showSidebar });
+const sidebarSwitchers = selectors.filter((_, i) => sidebarPlacements[i] === "sidebar");
 const showToc = pageMode === "default";
 // 'custom' and 'blank' both get the bare wd-canvas treatment below (no
 // auto <h1>, no prev/next, no prose width/padding) - they only differ in
@@ -425,7 +436,7 @@ const isCanvasMode = pageMode === "custom" || pageMode === "blank";
 // spec rather than prose - see [...slug].md.ts's own comment on why
 // those are excluded from the .md route this menu links to in the first
 // place, which this mirrors on the UI side.
-const contextMenuItems = contextMenuOptions(config.contextMenu);
+const contextMenuItems = contextMenuOptions(config.contextMenu, { mcp: config.mcp });
 const showCopyPageMenu = contextMenuItems.length > 0 && !isCanvasMode && !entry.data.openapi;
 const siteUrl = resolveSiteUrl(config);
 
@@ -487,7 +498,7 @@ const components = {
   mode={pageMode}
   lang={pageLang}
 >
-  {showSidebar && <Sidebar slot="sidebar" navTree={navTree} hrefForSlug={hrefForSlug} currentSlug={currentFileId} />}
+  {showSidebar && <Sidebar slot="sidebar" navTree={navTree} hrefForSlug={hrefForSlug} currentSlug={currentFileId} switchers={sidebarSwitchers} />}
   {
     isCanvasMode ? (
       // 'custom' and 'blank' both get this treatment: no auto <h1>, no
@@ -498,6 +509,11 @@ const components = {
       <div class="wd-canvas" data-pagefind-body>
         <Content components={components} />
         {entry.data.openapi && <ApiPlayground operation={entry.data.openapi} contentDir={contentDir} />}
+        {/* After the content: a result's excerpt shows the section only when
+            that's what matched. */}
+        <div hidden data-wd-search-scope={pageSearchScope.key} data-wd-search-scope-label={pageSearchScope.label} data-pagefind-filter={`scope:${pageSearchScope.key}`}>
+          {pageSectionTrail && <span data-pagefind-meta="section">{pageSectionTrail}</span>}
+        </div>
       </div>
     ) : (
       <article class={`wd-article ${pageMode === "wide" ? "wd-article-wide" : ""}`} data-pagefind-body>
@@ -516,11 +532,14 @@ const components = {
             )
           }
           {showCopyPageMenu && (
-            <CopyPageMenu currentPath={currentPath} siteUrl={siteUrl} options={contextMenuItems} />
+            <CopyPageMenu currentPath={currentPath} siteUrl={siteUrl} siteName={config.name} options={contextMenuItems} />
           )}
         </div>
         <Content components={components} />
         {entry.data.openapi && <ApiPlayground operation={entry.data.openapi} contentDir={contentDir} />}
+        <div hidden data-wd-search-scope={pageSearchScope.key} data-wd-search-scope-label={pageSearchScope.label} data-pagefind-filter={`scope:${pageSearchScope.key}`}>
+          {pageSectionTrail && <span data-pagefind-meta="section">{pageSectionTrail}</span>}
+        </div>
         {!entry.data.hideFooterPagination && (
         <nav class="wd-prevnext" data-pagefind-ignore>
           {prev && (
@@ -585,6 +604,8 @@ const components = {
 </BaseLayout>
 
 <script>
+  import { mcpServerUrl, cursorInstallLink, vscodeInstallLink } from "../lib/mcp-links.js";
+
   // Astro assigns every h2-h4 an id automatically, but doesn't add a
   // clickable anchor next to it. rehype-autolink-headings can't be used
   // for this directly: Astro's own heading-id rehype plugin always runs
@@ -648,7 +669,7 @@ const components = {
   // isn't otherwise present in the DOM anywhere (the rendered HTML
   // content is not the same text).
   function initCopyPageMenu(root: ParentNode) {
-    root.querySelectorAll<HTMLButtonElement>(".wd-copy-page-primary").forEach((btn) => {
+    root.querySelectorAll<HTMLButtonElement>("button[data-copy-page]").forEach((btn) => {
       if (btn.dataset.wdInit) return;
       btn.dataset.wdInit = "true";
       const label = btn.querySelector<HTMLElement>(".wd-copy-page-primary-label");
@@ -688,6 +709,40 @@ const components = {
   initAskLinks(document);
   document.addEventListener("astro:page-load", () => initAskLinks(document));
 
+  // The menu's MCP options (CopyPageMenu.astro). "Copy MCP server URL"
+  // copies it and says so in its own label - inside the menu, which stays
+  // open to show it. "Connect to Cursor / VS Code" on a site with no
+  // `domain` get their install links here, for the address the page is
+  // served from.
+  function initMcpMenu(root: ParentNode) {
+    const serverUrl = (el: HTMLElement) => el.dataset.copyMcp || mcpServerUrl(window.location.origin);
+    root.querySelectorAll<HTMLButtonElement>("button[data-copy-mcp]").forEach((btn) => {
+      if (btn.dataset.wdInit) return;
+      btn.dataset.wdInit = "true";
+      const label = btn.querySelector<HTMLElement>(".wd-copy-page-item-title, .wd-copy-page-primary-label");
+      const originalLabel = label?.textContent ?? "";
+      btn.addEventListener("click", async (e) => {
+        e.stopPropagation();
+        try {
+          await navigator.clipboard.writeText(serverUrl(btn));
+        } catch {
+          return;
+        }
+        if (label) label.textContent = "Copied!";
+        window.setTimeout(() => {
+          if (label) label.textContent = originalLabel;
+        }, 1500);
+      });
+    });
+    root.querySelectorAll<HTMLAnchorElement>("a[data-mcp-install]").forEach((link) => {
+      const url = mcpServerUrl(window.location.origin);
+      const name = link.dataset.mcpName ?? document.title;
+      link.href = link.dataset.mcpInstall === "cursor" ? cursorInstallLink(name, url) : vscodeInstallLink(name, url);
+    });
+  }
+  initMcpMenu(document);
+  document.addEventListener("astro:page-load", () => initMcpMenu(document));
+
   // Show more/less toggle for ```js expandable code blocks - same
   // build-time-emitted-button + client-wired-click pattern as the copy
   // button above; codeBlockTransformer only adds this button when the
@@ -873,13 +928,25 @@ const components = {
      direct .wd-article child. */
   .wd-article-header {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    gap: 1rem;
+    gap: 0.75rem 1rem;
     margin: 0 0 1rem;
   }
   .wd-article-header h1 {
     margin: 0;
+    /* A word longer than the whole line (a long product name on a phone)
+       breaks rather than pushing the page wider than the screen. */
+    overflow-wrap: break-word;
+  }
+  /* The title takes the room the menu leaves. Its basis is 0, so the row
+     only wraps when its longest word and the menu can't share a line - on
+     a desktop, a long title still wraps beside the menu; on a phone, a long
+     word sends the menu below the title instead of off the screen. */
+  .wd-article-header > h1,
+  .wd-article-header > .wd-article-title {
+    flex: 1 1 0;
   }
   /* Frontmatter `deprecated: true` (Mintlify's) - same amber as the
      sidebar's own deprecated tag (NavTree.astro) and Parameter's

package/src/scripts/dropdowns.ts

@@ -4,56 +4,91 @@
 // written for the topbar's own switcher/tab dropdowns, but the same
 // `.wd-dropdown`/`.wd-dropdown-trigger`/`.wd-dropdown-menu`/
 // `.wd-dropdown-menu-panel` shape is now reused by TopBar.astro (switchers,
-// tabs, the small-screen topbar.links ellipsis) and CopyPageMenu.astro, and
-// exported from here so any future component - MobileMenu.astro included,
-// even though it doesn't render any `.wd-dropdown` markup today - can import
-// and call it too without needing to know whether some other component
-// already has.
+// tabs, the small-screen topbar.links ellipsis), CopyPageMenu.astro and
+// ApiLangSelect.astro, and exported from here so any of them can call it
+// without needing to know whether some other component already has.
 //
-// That "might get called more than once per page" scenario is exactly why
-// the two `document`-level listeners at the bottom are behind their own
-// module-level guard, separate from the existing per-trigger
-// `dataset.wdInit` guard: querying `.wd-dropdown` from more than one
-// component's own `<script>` (each already idempotent per-trigger) would,
-// without this, still add a fresh pair of document click/keydown listeners
-// on every single call - harmless individually, but wasteful if it keeps
-// happening across repeated calls (e.g. once per component that imports
-// this, or once per `astro:page-load` firing from more than one place).
+// These are show/hide buttons for a list of links (the W3C's "disclosure"
+// pattern for navigation), not ARIA menus: the button says whether it's
+// open (aria-expanded), the options are ordinary links and buttons that
+// Tab reaches. For the keyboard, on top of that: Down/Up open the list and
+// move between its options (Home/End jump to the ends); Escape closes it
+// and puts focus back on its button; tabbing out of it closes it.
+//
+// The document-level listeners are bound once per page load, and act on
+// whichever dropdowns are open at the time - so they keep working for the
+// ones a client-side navigation brings in.
 let globalListenersBound = false;
 
-export function initDropdowns(root: ParentNode) {
-  const dropdowns = Array.from(root.querySelectorAll<HTMLElement>('.wd-dropdown'));
-  if (dropdowns.length === 0) return;
+const triggerOf = (dropdown: Element) => dropdown.querySelector<HTMLElement>('.wd-dropdown-trigger');
+const optionsOf = (dropdown: Element) =>
+  Array.from(dropdown.querySelectorAll<HTMLElement>('.wd-dropdown-menu a[href], .wd-dropdown-menu button'));
 
-  const closeAll = () => {
-    dropdowns.forEach((d) => {
-      d.classList.remove('open');
-      d.querySelector('.wd-dropdown-trigger')?.setAttribute('aria-expanded', 'false');
-    });
-  };
+function open(dropdown: Element) {
+  closeAll(dropdown);
+  dropdown.classList.add('open');
+  triggerOf(dropdown)?.setAttribute('aria-expanded', 'true');
+}
 
-  dropdowns.forEach((dropdown) => {
-    const trigger = dropdown.querySelector<HTMLButtonElement>('.wd-dropdown-trigger');
+function close(dropdown: Element) {
+  dropdown.classList.remove('open');
+  triggerOf(dropdown)?.setAttribute('aria-expanded', 'false');
+  // Focus on an option that just got hidden would drop to the top of the
+  // page - it goes back to the button instead.
+  const focused = document.activeElement;
+  if (focused && focused !== triggerOf(dropdown) && dropdown.contains(focused)) triggerOf(dropdown)?.focus();
+}
+
+function closeAll(except?: Element) {
+  document.querySelectorAll('.wd-dropdown.open').forEach((d) => {
+    if (d !== except) close(d);
+  });
+}
+
+export function initDropdowns(root: ParentNode) {
+  root.querySelectorAll<HTMLElement>('.wd-dropdown').forEach((dropdown) => {
+    const trigger = triggerOf(dropdown);
     if (!trigger || trigger.dataset.wdInit) return;
     trigger.dataset.wdInit = 'true';
+
     trigger.addEventListener('click', (e) => {
       e.stopPropagation();
-      const isOpen = dropdown.classList.contains('open');
-      closeAll();
-      if (!isOpen) {
-        dropdown.classList.add('open');
-        trigger.setAttribute('aria-expanded', 'true');
+      if (dropdown.classList.contains('open')) close(dropdown);
+      else open(dropdown);
+    });
+
+    dropdown.addEventListener('keydown', (e) => {
+      if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) return;
+      const options = optionsOf(dropdown);
+      if (options.length === 0) return;
+      e.preventDefault();
+      if (!dropdown.classList.contains('open')) open(dropdown);
+      const at = options.indexOf(document.activeElement as HTMLElement);
+      let next: number;
+      if (e.key === 'Home') next = 0;
+      else if (e.key === 'End') next = options.length - 1;
+      else if (at === -1) next = e.key === 'ArrowUp' ? options.length - 1 : 0;
+      else next = Math.min(Math.max(at + (e.key === 'ArrowDown' ? 1 : -1), 0), options.length - 1);
+      options[next].focus();
+    });
+
+    // Focus moving somewhere outside the dropdown (Tab, Shift+Tab) closes
+    // it. No `relatedTarget` means focus went nowhere in particular - a
+    // click on the page, which the click-outside listener already handles.
+    dropdown.addEventListener('focusout', (e) => {
+      const to = e.relatedTarget as Node | null;
+      if (to && !dropdown.contains(to) && dropdown.classList.contains('open')) {
+        dropdown.classList.remove('open');
+        trigger.setAttribute('aria-expanded', 'false');
       }
     });
   });
 
   if (!globalListenersBound) {
     globalListenersBound = true;
-    // Bound once against `document`, not `root` - closeAll() above already
-    // closes every dropdown found on the page regardless of which root a
-    // given call was scoped to, so there's no reason for these two to be
-    // scoped any narrower or bound more than once.
-    document.addEventListener('click', closeAll);
+    // A click anywhere closes what's open - including a click on one of its
+    // options, which has done its job by then.
+    document.addEventListener('click', () => closeAll());
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') closeAll();
     });

package/src/scripts/search.ts

@@ -72,15 +72,52 @@ export function initSearch(root: ParentNode) {
   let currentResults: HTMLElement[] = [];
   let activeIndex = -1;
 
+  // Down on the last result (or Up on the first) stays there - Enter always
+  // has a result to open.
   function setActive(index: number) {
     currentResults.forEach((el) => el.classList.remove('wd-search-result-active'));
-    activeIndex = index >= 0 && index < currentResults.length ? index : -1;
+    activeIndex = currentResults.length ? Math.min(Math.max(index, 0), currentResults.length - 1) : -1;
     if (activeIndex >= 0) {
       currentResults[activeIndex].classList.add('wd-search-result-active');
       currentResults[activeIndex].scrollIntoView({ block: 'nearest' });
     }
   }
 
+  // Search looks in the version, language and product of the page the reader
+  // is on (plus pages outside any of them), with a switch to search
+  // everything. [...slug].astro marks each page's scope for Pagefind and
+  // for this - see lib/search-scope.js.
+  let everything = false;
+  const pageScope = () => {
+    const el = document.querySelector<HTMLElement>('[data-wd-search-scope]');
+    const key = el?.dataset.wdSearchScope ?? 'all';
+    return key === 'all' ? null : { key, label: el?.dataset.wdSearchScopeLabel || key };
+  };
+  function scopeNote(scope: { label: string } | null, found: boolean) {
+    if (!scope) return null;
+    const note = document.createElement('div');
+    note.className = 'wd-search-scope';
+    const text = document.createElement('span');
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'wd-search-scope-toggle';
+    if (everything) {
+      text.textContent = 'Showing results from the whole site.';
+      button.textContent = `Only ${scope.label}`;
+    } else {
+      text.textContent = found ? `Showing results in ${scope.label}.` : `No results in ${scope.label}.`;
+      button.textContent = 'Search everything';
+    }
+    button.addEventListener('click', (e) => {
+      e.stopPropagation();
+      everything = !everything;
+      input.focus();
+      runSearch(input.value);
+    });
+    note.append(text, ' ', button);
+    return note;
+  }
+
   async function runSearch(term: string) {
     if (!term.trim()) {
       resultsEl.innerHTML = '<div class="wd-search-hint">Start typing to search...</div>';
@@ -94,10 +131,14 @@ export function initSearch(root: ParentNode) {
     // superseded this call - pagefind's own debounce, on top of (not
     // instead of) the plain `input` listener below, so a fast typist never
     // races two searches rendering out of order.
-    const search = await pf.debouncedSearch(term, {}, 150);
+    const scope = pageScope();
+    const options = scope && !everything ? { filters: { any: [{ scope: scope.key }, { scope: 'all' }] } } : {};
+    const search = await pf.debouncedSearch(term, options, 150);
     if (search === null) return;
     if (search.results.length === 0) {
       resultsEl.innerHTML = '<div class="wd-search-empty">No results.</div>';
+      const note = scopeNote(scope, false);
+      if (note) resultsEl.replaceChildren(note);
       currentResults = [];
       activeIndex = -1;
       return;
@@ -111,15 +152,27 @@ export function initSearch(root: ParentNode) {
       const title = document.createElement('div');
       title.className = 'wd-search-result-title';
       title.textContent = data.meta?.title ?? data.url;
+      // Where the page sits: "API Reference › Webhooks".
+      const section = data.meta?.section ? document.createElement('div') : null;
+      if (section) {
+        section.className = 'wd-search-result-section';
+        section.textContent = data.meta.section;
+      }
       const excerpt = document.createElement('div');
       excerpt.className = 'wd-search-result-excerpt';
       // innerHTML (not textContent) is deliberate: pagefind returns this
       // pre-sanitized with <mark> wrapping the matched terms, which is the
       // whole point - a plain-text excerpt couldn't highlight anything.
-      excerpt.innerHTML = data.excerpt;
-      a.append(title, excerpt);
+      // The section is indexed as the page's last words, so a short page's
+      // excerpt ends with it - shown once, on its own line, unless it's what
+      // matched (then the excerpt keeps it, highlighted).
+      const trailing = data.meta?.section ? ` ${data.meta.section}.` : null;
+      excerpt.innerHTML = trailing && data.excerpt.endsWith(trailing) ? data.excerpt.slice(0, -trailing.length) : data.excerpt;
+      a.append(title, ...(section ? [section] : []), excerpt);
       resultsEl.appendChild(a);
     }
+    const note = scopeNote(scope, true);
+    if (note) resultsEl.appendChild(note);
     currentResults = Array.from(resultsEl.querySelectorAll('.wd-search-result'));
     setActive(0);
   }
@@ -128,6 +181,7 @@ export function initSearch(root: ParentNode) {
     overlay.hidden = false;
     document.body.style.overflow = 'hidden';
     input.value = '';
+    everything = false;
     resultsEl.innerHTML = '<div class="wd-search-hint">Start typing to search...</div>';
     currentResults = [];
     activeIndex = -1;

package/src/scripts/tabs-strip.ts

@@ -0,0 +1,169 @@
+// A tab row with more tabs than fit slides sideways instead of wrapping:
+// an arrow shows on each side that has more, the active tab starts in
+// view, and keyboard focus, a horizontal wheel/trackpad swipe and a touch
+// swipe move the row too. TopBar.astro renders the markup:
+// [data-tabs-strip] > arrow, .wd-tabs-viewport > .wd-topbar-tabs, arrow.
+//
+// The row is moved with a transform inside an `overflow-x: clip` viewport,
+// not scrolled: a scroll container clips both directions, and would cut
+// off the menus of the tabs and global dropdowns that open below the row.
+// `clip` on one axis leaves the other visible. Browsers without it keep
+// the row wrapping (topbar.css), and this does nothing.
+import { maxOffset, clampOffset, stepOffset, revealOffset } from '../lib/tabs-strip-offset.js';
+
+export function initTabsStrips(root: ParentNode) {
+  if (!CSS.supports('overflow-x', 'clip')) return;
+  root.querySelectorAll<HTMLElement>('[data-tabs-strip]').forEach(initStrip);
+}
+
+function initStrip(strip: HTMLElement) {
+  if (strip.dataset.wdInit) return;
+  strip.dataset.wdInit = 'true';
+  const viewport = strip.querySelector<HTMLElement>('.wd-tabs-viewport');
+  const track = strip.querySelector<HTMLElement>('.wd-topbar-tabs');
+  const prev = strip.querySelector<HTMLElement>('[data-tabs-prev]');
+  const next = strip.querySelector<HTMLElement>('[data-tabs-next]');
+  if (!viewport || !track || !prev || !next) return;
+
+  let offset = 0;
+  const geometry = () => {
+    const view = viewport.clientWidth;
+    return { view, max: maxOffset(track.scrollWidth, view), edge: prev.offsetWidth || 36 };
+  };
+  const apply = () => {
+    const { max } = geometry();
+    offset = clampOffset(offset, max);
+    track.style.transform = offset ? `translateX(${-offset}px)` : '';
+    strip.classList.toggle('wd-can-prev', offset > 0);
+    strip.classList.toggle('wd-can-next', offset < max);
+  };
+  // The tab (or dropdown) a node belongs to - a direct child of the row.
+  const itemOf = (node: Element | null) => {
+    while (node && node.parentElement !== track) node = node.parentElement;
+    return node as HTMLElement | null;
+  };
+  const reveal = (item: HTMLElement | null) => {
+    if (!item) return;
+    offset = revealOffset(offset, item.offsetLeft, item.offsetLeft + item.offsetWidth, geometry());
+    apply();
+  };
+
+  // Where the page starts: the active tab in view, without sliding to it.
+  // Tabs widen when the web font arrives, after this first placement - until
+  // the reader moves the row, each resize puts the active tab back in view.
+  let readerMoved = false;
+  const activeItem = itemOf(track.querySelector('.wd-tab-link.active'));
+  const settle = () => {
+    strip.classList.remove('wd-tabs-animate');
+    reveal(activeItem);
+    requestAnimationFrame(() => strip.classList.add('wd-tabs-animate'));
+  };
+  settle();
+
+  prev.addEventListener('click', (e) => {
+    e.stopPropagation();
+    readerMoved = true;
+    offset = stepOffset(offset, -1, geometry());
+    apply();
+  });
+  next.addEventListener('click', (e) => {
+    e.stopPropagation();
+    readerMoved = true;
+    offset = stepOffset(offset, 1, geometry());
+    apply();
+  });
+  track.addEventListener('focusin', (e) => reveal(itemOf(e.target as Element)));
+
+  // A sideways swipe on a trackpad, or Shift + wheel. A plain vertical
+  // wheel still scrolls the page.
+  viewport.addEventListener(
+    'wheel',
+    (e) => {
+      const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.shiftKey ? e.deltaY : 0;
+      if (!delta || geometry().max === 0) return;
+      e.preventDefault();
+      readerMoved = true;
+      strip.classList.remove('wd-tabs-animate');
+      offset += delta;
+      apply();
+      requestAnimationFrame(() => strip.classList.add('wd-tabs-animate'));
+    },
+    { passive: false }
+  );
+
+  // Touch: a sideways swipe drags the row, and a quick one carries on a
+  // little after the finger lifts. `touch-action: pan-y` (topbar.css) leaves
+  // sideways moves to this and up/down ones to the page, which scrolls as
+  // usual. A swipe that ends on a tab doesn't open it.
+  let drag: { id: number; x: number; from: number; moving: boolean; last: [number, number][] } | null = null;
+  let swallowClick = false;
+  viewport.addEventListener('pointerdown', (e) => {
+    if (e.pointerType !== 'touch' || geometry().max === 0) return;
+    drag = { id: e.pointerId, x: e.clientX, from: offset, moving: false, last: [[e.clientX, e.timeStamp]] };
+  });
+  viewport.addEventListener('pointermove', (e) => {
+    if (!drag || e.pointerId !== drag.id) return;
+    const dx = e.clientX - drag.x;
+    if (!drag.moving) {
+      if (Math.abs(dx) < 8) return;
+      drag.moving = true;
+      readerMoved = true;
+      strip.classList.remove('wd-tabs-animate');
+      viewport.setPointerCapture(e.pointerId);
+    }
+    drag.last = [...drag.last.slice(-1), [e.clientX, e.timeStamp]];
+    offset = drag.from - dx;
+    apply();
+  });
+  const endDrag = (e: PointerEvent) => {
+    if (!drag || e.pointerId !== drag.id) return;
+    if (drag.moving && e.type === 'pointerup') {
+      const [[x0, t0], [x1, t1]] = drag.last.length > 1 ? drag.last : [drag.last[0], drag.last[0]];
+      const velocity = t1 > t0 ? (x1 - x0) / (t1 - t0) : 0; // px per ms
+      strip.classList.add('wd-tabs-animate');
+      offset -= velocity * 180;
+      apply();
+      swallowClick = true;
+      setTimeout(() => (swallowClick = false), 400);
+    } else {
+      requestAnimationFrame(() => strip.classList.add('wd-tabs-animate'));
+    }
+    drag = null;
+  };
+  viewport.addEventListener('pointerup', endDrag);
+  viewport.addEventListener('pointercancel', endDrag);
+  viewport.addEventListener(
+    'click',
+    (e) => {
+      if (!swallowClick) return;
+      e.preventDefault();
+      e.stopPropagation();
+      swallowClick = false;
+    },
+    true
+  );
+
+  // A menu that opens under a tab near the right end would be cut off
+  // there - it opens to the left of its tab instead.
+  track.querySelectorAll<HTMLElement>('.wd-dropdown').forEach((dropdown) => {
+    const menu = dropdown.querySelector<HTMLElement>('.wd-dropdown-menu');
+    if (!menu) return;
+    const place = () => {
+      const shown = menu.style.display;
+      menu.style.visibility = 'hidden';
+      menu.style.display = 'block';
+      const width = menu.offsetWidth;
+      menu.style.display = shown;
+      menu.style.visibility = '';
+      const right = dropdown.getBoundingClientRect().left + width;
+      dropdown.classList.toggle('wd-dropdown-align-end', right > viewport.getBoundingClientRect().right);
+    };
+    dropdown.addEventListener('pointerenter', place);
+    dropdown.addEventListener('focusin', place);
+  });
+
+  // Tabs change width as fonts load, and the space changes with the window.
+  const resized = () => (readerMoved ? apply() : settle());
+  new ResizeObserver(resized).observe(viewport);
+  new ResizeObserver(resized).observe(track);
+}

package/writedocs.schema.json

@@ -760,7 +760,10 @@
               "view",
               "chatgpt",
               "claude",
-              "perplexity"
+              "perplexity",
+              "mcp",
+              "cursor",
+              "vscode"
             ]
           }
         },
@@ -784,8 +787,8 @@
           "additionalProperties": false
         }
       ],
-      "description": "The \"Copy page\" menu on every page - copy as Markdown, view as Markdown, open in ChatGPT, Claude or Perplexity - and a Markdown copy of each page at its address + \".md\". On by default with every option. A list picks the options (\"copy\", \"view\", \"chatgpt\", \"claude\", \"perplexity\"); false turns it all off.",
-      "markdownDescription": "The \"Copy page\" menu on every page - copy as Markdown, view as Markdown, open in ChatGPT, Claude or Perplexity - and a Markdown copy of each page at its address + \".md\". On by default with every option. A list picks the options (\"copy\", \"view\", \"chatgpt\", \"claude\", \"perplexity\"); false turns it all off."
+      "description": "The \"Copy page\" menu on every page - copy as Markdown, view as Markdown, open in ChatGPT, Claude or Perplexity, copy the MCP server URL, connect to Cursor or VS Code - and a Markdown copy of each page at its address + \".md\". On by default with every option (the MCP ones only while `mcp` is on). A list picks the options (\"copy\", \"view\", \"chatgpt\", \"claude\", \"perplexity\", \"mcp\", \"cursor\", \"vscode\"); false turns it all off.",
+      "markdownDescription": "The \"Copy page\" menu on every page - copy as Markdown, view as Markdown, open in ChatGPT, Claude or Perplexity, copy the MCP server URL, connect to Cursor or VS Code - and a Markdown copy of each page at its address + \".md\". On by default with every option (the MCP ones only while `mcp` is on). A list picks the options (\"copy\", \"view\", \"chatgpt\", \"claude\", \"perplexity\", \"mcp\", \"cursor\", \"vscode\"); false turns it all off."
     },
     "mcp": {
       "default": true,