@writedocs/generator 0.1.0

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

@@ -0,0 +1,1270 @@
+---
+import { getCollection, render, type CollectionEntry } from "astro:content";
+import fs from "node:fs";
+import path from "node:path";
+import {
+  loadDocsConfig,
+  resolveSections,
+  resolveGlobalDropdowns,
+  findSectionIndexForSlug,
+  buildNavTree,
+  ancestorGroupsForSlug,
+  buildSelectors,
+  buildGlobalDropdowns,
+  fileIdForEntry,
+  normalizeEntryId,
+  flattenNav,
+  firstSlugOfNavigation,
+  mergeSeo,
+  resolveSiteUrl,
+  findAllPages,
+} from "../lib/config";
+import { writedocsTempDir } from "../lib/writedocs-temp-dir.js";
+import BaseLayout from "../layout/BaseLayout.astro";
+import Sidebar from "../layout/components/Sidebar.astro";
+import TableOfContents from "../layout/components/TableOfContents.astro";
+import Breadcrumbs from "../layout/components/Breadcrumbs.astro";
+import CopyPageMenu from "../components/CopyPageMenu.astro";
+import Callout from "../components/Callout.astro";
+import Note from "../components/Note.astro";
+import Info from "../components/Info.astro";
+import Tip from "../components/Tip.astro";
+import Warning from "../components/Warning.astro";
+import Danger from "../components/Danger.astro";
+import Card from "../components/Card.astro";
+import CardGroup from "../components/CardGroup.astro";
+import Tabs from "../components/Tabs.astro";
+import Tab from "../components/Tab.astro";
+import CodeGroup from "../components/CodeGroup.astro";
+import Accordion from "../components/Accordion.astro";
+import AccordionGroup from "../components/AccordionGroup.astro";
+import Steps from "../components/Steps.astro";
+import Step from "../components/Step.astro";
+import Hint from "../components/Hint.astro";
+import Image from "../components/Image.astro";
+import Frame from "../components/Frame.astro";
+import Video from "../components/Video.astro";
+import Parameter from "../components/Parameter.astro";
+import Expandable from "../components/Expandable.astro";
+import Searchbar from "../components/Searchbar.astro";
+import Badge from "../components/Badge.astro";
+import Icon from "../components/Icon.astro";
+import RequestExample from "../components/RequestExample.astro";
+import ResponseExample from "../components/ResponseExample.astro";
+import ApiPlayground from "../components/ApiPlayground.astro";
+import ApiReferencePanel from "../components/ApiReferencePanel.astro";
+
+// A page is hand-written (the `pages` collection, sourced from anywhere
+// in the project - docs/ has no special status, see findAllPages() in
+// lib/config.ts) or an auto-generated OpenAPI stub (the `generatedDocs`
+// collection, sourced from writedocsTempDir()'s generated-docs/
+// directory - see content.config.ts / generate-api-pages.js) - kept as two separate
+// collections rather than one, since Astro's loader API has no supported
+// way to point a single collection's glob() at more than one base
+// directory without one's own cleanup pass deleting the other's entries
+// (see content.config.ts's own comment on this). Both share the exact
+// same schema, so every consumer below just treats them as one combined
+// list.
+//
+// The two `getCollection()` calls below are inlined at each of their two
+// call sites (getStaticPaths, and the component body further down)
+// rather than factored into one shared top-level helper: Astro's
+// getStaticPaths extraction (a separate bundling pass from the rest of
+// the component - see the pathDescription comment further down for
+// another instance of this) was observed to silently drop a top-level
+// function declaration referenced from inside getStaticPaths, producing
+// a raw "getAllDocsEntries is not defined" ReferenceError at build time
+// instead of ever running. Keeping both call sites self-contained avoids
+// relying on whatever static-analysis pass decides what counts as
+// "used" by the extracted chunk.
+//
+// Each site also only calls getCollection('generatedDocs') when there's
+// actually something in it (most sites have no OpenAPI groups - see
+// generate-api-pages.js), rather than unconditionally calling it and
+// letting content.config.ts's skipIfMissing() loader no-op internally:
+// astro:content's own getCollection() logs "The collection ... does not
+// exist or is empty" to the console whenever a collection ends up with
+// zero registered entries, regardless of *why* it's empty - the data
+// store has no supported way to mark a collection as "intentionally
+// empty" short of writing at least one entry to it. Not calling
+// getCollection() at all for an empty one sidesteps that warning at the
+// source instead of trying to suppress it after the fact.
+type DocsEntry = CollectionEntry<"pages"> | CollectionEntry<"generatedDocs">;
+
+export async function getStaticPaths() {
+  const contentDir = process.env.WRITEDOCS_CONTENT_DIR || process.cwd();
+  const packageRoot = process.env.WRITEDOCS_PACKAGE_ROOT || process.cwd();
+  const config = loadDocsConfig(contentDir);
+  const sections = resolveSections(config.navigation);
+  const hasGeneratedDocs = fs.existsSync(path.join(writedocsTempDir(contentDir), "generated-docs"));
+  const hasPages = findAllPages(contentDir).length > 0;
+  const [pagesEntries, generatedDocsEntries] = await Promise.all([
+    hasPages ? getCollection("pages") : Promise.resolve([]),
+    hasGeneratedDocs ? getCollection("generatedDocs") : Promise.resolve([]),
+  ]);
+  const entries: DocsEntry[] = [...pagesEntries, ...generatedDocsEntries];
+  // writedocs.json always references a page by its file id; `entry.id` is
+  // Astro's own resolved slug for it (the file-path default, or a
+  // frontmatter `slug` override it recognizes natively - see
+  // fileIdForEntry() in lib/config.ts) and is what the page is actually
+  // routed at. Keyed by file id so every navEntry.slug below finds its
+  // entry regardless of which one is in play.
+  const entryByFileId = new Map(entries.map((e) => [fileIdForEntry(contentDir, packageRoot, e), e]));
+
+  // "/" is only produced below when some page's *resolved* slug
+  // (entry.id) is literally "index" - the conventional home page (an
+  // index.mdx at the project root; a root-level index.mdx keeps file id
+  // "index" verbatim, since Astro's own default id computation only
+  // strips a trailing `/index` *segment*, which a single-segment root
+  // file doesn't have - see fileIdForEntry()'s own comment on this in
+  // lib/config.ts), or any page overriding its own slug to "index"/"/".
+  // Most navigations don't have such a page - Astro then warns "no
+  // matching static path was found for /" on every request. Rather than
+  // requiring every writedocs.json to name a page "index", synthesize a
+  // redirect-only route for "/" pointing at the site's first real page
+  // whenever nothing already claims root.
+  // Checked against every entry, not just nav-referenced ones - a hidden
+  // page (see hiddenRoutes below) sitting at "index" claims root exactly
+  // as well as a nav-listed one would, and needs to suppress the synthetic
+  // redirect below the same way (two routes both wanting `params.slug:
+  // undefined` is a build error, not a silent pick-one).
+  const rootAlreadyClaimed = entries.some((e) => normalizeEntryId(e.id) === "index");
+  const firstSlug = rootAlreadyClaimed ? null : firstSlugOfNavigation(config.navigation);
+  const firstEntry = firstSlug ? entryByFileId.get(firstSlug) : undefined;
+  // Not calling the top-level hrefForSlug() here: it's only otherwise
+  // referenced from the component body, not from inside getStaticPaths,
+  // and per the describeSectionPath lesson above, closures introduced
+  // into getStaticPaths should be self-contained rather than assume a
+  // module-level binding survives Astro's bundling extraction. firstEntry
+  // can never resolve to "index" here (that's exactly what
+  // rootAlreadyClaimed rules out), so the ternary below always resolves
+  // to the non-root branch.
+  const rootRedirect = firstEntry
+    ? [{ params: { slug: undefined }, props: { redirectTo: `/${normalizeEntryId(firstEntry.id)}/` } }]
+    : [];
+
+  // Tracks every file id a nav-driven route below already claims, so
+  // hiddenRoutes (further down) knows which entries are left over - any
+  // page/generatedDocs entry that exists (findAllPages() already required
+  // it to have frontmatter with a `title` - see content.config.ts's
+  // docsSchema) but isn't reachable by walking writedocs.json's navigation at
+  // all. Those still get routed here, just without a nav-derived
+  // prev/next or section - a page doesn't have to be in the sidebar to be
+  // a real, directly-linkable page (an in-progress draft, an unlisted
+  // landing page, etc.).
+  const claimedFileIds = new Set<string>();
+
+  const pageRoutes = sections.flatMap((section, sectionIndex) => {
+    const flatNav = flattenNav(section.pages);
+    return flatNav.map((navEntry, i) => {
+      const entry = entryByFileId.get(navEntry.slug);
+      if (!entry) {
+        // Inlined rather than a separate top-level helper: Astro's
+        // getStaticPaths extraction (a separate bundling pass from the
+        // rest of the component) was observed to silently drop a
+        // top-level function declaration that's only referenced inside
+        // this rarely-taken branch, producing a raw "X is not defined"
+        // ReferenceError instead of this readable message. Keeping the
+        // logic inside getStaticPaths' own closure avoids relying on
+        // whatever static-analysis pass decides what counts as "used".
+        const pathDescription =
+          section.path.length === 0
+            ? "(root)"
+            : section.path
+                .map((seg) => {
+                  const item = seg.items[seg.index] as Record<string, unknown>;
+                  const name = (item.tab ?? item.version ?? item.language ?? item.dropdown ?? item.product) as string;
+                  return `${seg.kind} "${name}"`;
+                })
+                .join(" > ");
+        throw new Error(
+          `[writedocs] writedocs.json references page "${navEntry.slug}"` +
+            ` (${pathDescription})` +
+            ` but no matching file was found`,
+        );
+      }
+      claimedFileIds.add(navEntry.slug);
+      const prev = i > 0 ? flatNav[i - 1] : null;
+      const next = i < flatNav.length - 1 ? flatNav[i + 1] : null;
+      const urlSlug = normalizeEntryId(entry.id);
+      return {
+        params: { slug: urlSlug === "index" ? undefined : urlSlug },
+        props: { entry, prev, next, sectionIndex },
+      };
+    });
+  });
+
+  // "Hidden" pages: any file the `pages`/`generatedDocs` collections
+  // picked up that writedocs.json's navigation never references (see
+  // claimedFileIds above) still gets a real route here - just with no
+  // prev/next (nothing in nav to derive that from) and no section of its
+  // own to be "active" in. findSectionIndexForSlug's existing "0 if this
+  // slug isn't in any section" fallback (already used nowhere else in
+  // this file, but built for exactly this) picks which section's
+  // sidebar/selectors a hidden page borrows - arbitrary, but no worse
+  // than the alternative of hidden pages having no chrome at all.
+  const hiddenRoutes = entries
+    .filter((entry) => !claimedFileIds.has(fileIdForEntry(contentDir, packageRoot, entry)))
+    .map((entry) => {
+      const urlSlug = normalizeEntryId(entry.id);
+      return {
+        params: { slug: urlSlug === "index" ? undefined : urlSlug },
+        props: {
+          entry,
+          prev: null,
+          next: null,
+          sectionIndex: findSectionIndexForSlug(sections, fileIdForEntry(contentDir, packageRoot, entry)),
+          isHidden: true,
+        },
+      };
+    });
+
+  return [...rootRedirect, ...pageRoutes, ...hiddenRoutes];
+}
+
+interface Props {
+  redirectTo?: string;
+  entry?: DocsEntry;
+  prev?: { slug: string; group: string | null } | null;
+  next?: { slug: string; group: string | null } | null;
+  sectionIndex?: number;
+  // Set by hiddenRoutes in getStaticPaths above - a page with no place in
+  // writedocs.json's navigation has no sidebar section of its own to show, so
+  // its default mode drops the sidebar entirely (see pageMode below)
+  // rather than borrowing findSectionIndexForSlug's arbitrary fallback
+  // section's sidebar contents, which would misleadingly suggest the page
+  // belongs there.
+  isHidden?: boolean;
+}
+
+const rawProps = Astro.props as Props;
+if (rawProps.redirectTo) {
+  return Astro.redirect(rawProps.redirectTo);
+}
+const {
+  entry,
+  prev = null,
+  next = null,
+  sectionIndex = 0,
+  isHidden = false,
+} = rawProps as Required<Props>;
+
+const contentDir = process.env.WRITEDOCS_CONTENT_DIR || process.cwd();
+const packageRoot = process.env.WRITEDOCS_PACKAGE_ROOT || process.cwd();
+const config = loadDocsConfig(contentDir);
+const sections = resolveSections(config.navigation);
+// Falls back to an empty stand-in section rather than crashing on
+// `.pages` below - only reachable for a hidden page (see hiddenRoutes in
+// getStaticPaths above) on a site whose writedocs.json has no navigation
+// sections at all, which previously could never produce a route to
+// render in the first place.
+const activeSection = sections[sectionIndex] ?? { pages: [], path: [] };
+
+const { Content, headings } = await render(entry);
+const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
+
+const hasGeneratedDocs = fs.existsSync(path.join(writedocsTempDir(contentDir), "generated-docs"));
+const hasPages = findAllPages(contentDir).length > 0;
+const [pagesEntries, generatedDocsEntries] = await Promise.all([
+  hasPages ? getCollection("pages") : Promise.resolve([]),
+  hasGeneratedDocs ? getCollection("generatedDocs") : Promise.resolve([]),
+]);
+const entries: DocsEntry[] = [...pagesEntries, ...generatedDocsEntries];
+// Two maps keyed by file id (not `entry.id` - see fileIdForEntry() in
+// lib/config.ts for why those can differ once a page overrides its own
+// slug): titles for prev/next and sidebar labels, and the entries
+// themselves so hrefForSlug can resolve a writedocs.json file-id reference to
+// wherever that page actually got routed.
+const titleByFileId = new Map<string, string>();
+const entryByFileId = new Map<string, DocsEntry>();
+// The HTTP method badge NavTree.astro shows next to an API operation
+// page in the sidebar - read straight off the page's own `openapi:
+// "METHOD /path"` frontmatter rather than the resolved operation JSON,
+// since the method itself is right there in that string already and
+// doesn't need a spec lookup.
+const methodByFileId = new Map<string, string>();
+for (const e of entries) {
+  const fileId = fileIdForEntry(contentDir, packageRoot, e);
+  titleByFileId.set(fileId, e.data.title);
+  entryByFileId.set(fileId, e);
+  if (e.data.openapi) {
+    methodByFileId.set(fileId, e.data.openapi.trim().split(/\s+/, 1)[0].toUpperCase());
+  }
+}
+const titleForSlug = (slug: string) => titleByFileId.get(slug) ?? slug;
+const methodForSlug = (slug: string) => methodByFileId.get(slug) ?? null;
+const hrefForSlug = (slug: string) => {
+  const raw = entryByFileId.get(slug)?.id ?? slug;
+  const effective = normalizeEntryId(raw);
+  return effective === "index" ? "/" : `/${effective}/`;
+};
+// The current page's own file id (as writedocs.json references it) - distinct
+// from `entry.id` (its resolved URL slug) for the same reason as above,
+// and what every "is this the active page" comparison below needs, since
+// navTree/globalDropdowns are built from writedocs.json's file-id space.
+const currentFileId = fileIdForEntry(contentDir, packageRoot, entry);
+const navTree = buildNavTree(activeSection.pages, titleForSlug, methodForSlug);
+// The ancestor sidebar-group trail above the auto <h1> (Breadcrumbs.astro)
+// - empty for a page sitting at the top level of its Section with no
+// enclosing group, in which case [...slug].astro below skips rendering
+// the component entirely rather than showing a breadcrumb bar with
+// nothing in it but the page's own title.
+const breadcrumbs = ancestorGroupsForSlug(navTree, currentFileId, hrefForSlug);
+
+// The reader's page's own position within the active Section's flattened
+// pages list - passed to buildSelectors() so a version/language switch
+// can try to land on the *same* page in the target option instead of
+// always its first page (equivalentPageIn() in lib/config.ts). -1 (not
+// found) just disables that - firstSlugOf() is still the fallback.
+const activePagePosition = flattenNav(activeSection.pages).findIndex((e) => e.slug === currentFileId);
+
+// One selector per level of the active page's navigation path (tabs,
+// versions, languages, products, or a dropdown nested partway down),
+// plus the always-visible global dropdown list - see BaseLayout.astro
+// for how each renders.
+const selectors = buildSelectors(activeSection.path, hrefForSlug, activePagePosition);
+const globalDropdowns = buildGlobalDropdowns(
+  resolveGlobalDropdowns(config.navigation),
+  currentFileId,
+  titleForSlug,
+  hrefForSlug,
+);
+
+// Meta tags: this page's own frontmatter `seo` overrides writedocs.json's
+// site-wide `seo` field by field (mergeSeo() in lib/config.ts), and the
+// canonical/OG/Twitter URLs need this page's actual served path - reusing
+// hrefForSlug (already built above for prev/next and the sidebar) rather
+// than recomputing it, since it already encodes the same
+// frontmatter-slug-override-aware routing logic.
+const pageSeo = mergeSeo(config.seo, entry.data.seo);
+const currentPath = hrefForSlug(currentFileId);
+
+// Page mode (content.config.ts's docsSchema `mode` field, defaulted to
+// 'default' there so this is never actually undefined) - see
+// BaseLayout.astro for what each value strips out of the topbar/shell,
+// and the comment on <BaseLayout mode=...> below for what this file
+// itself controls (which slots get filled at all, and how the article
+// itself renders).
+// A hidden page (isHidden - see hiddenRoutes/Props above) defaults to
+// "frame" instead of "default": it has no real section of its own, so
+// the sidebar would otherwise show findSectionIndexForSlug's arbitrary
+// fallback section with nothing in it actually active - "frame" drops
+// the sidebar (and ToC) while keeping the topbar and normal article
+// styling. Only a *default*: a hidden page's own frontmatter mode, if
+// it set one explicitly, still wins.
+const pageMode = isHidden && entry.data.mode === "default" ? "frame" : entry.data.mode;
+const showSidebar = pageMode === "default" || pageMode === "wide";
+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
+// whether BaseLayout keeps the topbar, which is BaseLayout's own concern
+// (mode is passed straight through), not something this file needs to
+// branch on separately.
+const isCanvasMode = pageMode === "custom" || pageMode === "blank";
+
+// The "Copy page" dropdown (CopyPageMenu.astro) - opt-in via writedocs.json's
+// `contextMenu` field (see contextMenuSchema in lib/config.ts), and only
+// shown where there's a real auto-rendered <h1> to sit next to: canvas
+// mode pages (custom/blank) have no such header (a hand-built landing
+// page controls its own layout, there's nothing standard to anchor the
+// menu to), and OpenAPI operation pages render almost entirely from the
+// 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 showCopyPageMenu = Boolean(config.contextMenu) && !isCanvasMode && !entry.data.openapi;
+const siteUrl = resolveSiteUrl(config);
+
+const components = {
+  Callout,
+  Note,
+  Info,
+  Tip,
+  Warning,
+  Danger,
+  Card,
+  CardGroup,
+  Tabs,
+  Tab,
+  CodeGroup,
+  Accordion,
+  AccordionGroup,
+  Steps,
+  Step,
+  Hint,
+  Image,
+  Frame,
+  Video,
+  Parameter,
+  Expandable,
+  Searchbar,
+  Badge,
+  Icon,
+  RequestExample,
+  ResponseExample,
+};
+---
+
+<BaseLayout
+  config={config}
+  title={entry.data.title}
+  description={entry.data.description}
+  path={currentPath}
+  seo={pageSeo}
+  selectors={selectors}
+  globalDropdowns={globalDropdowns}
+  mode={pageMode}
+>
+  {showSidebar && <Sidebar slot="sidebar" navTree={navTree} hrefForSlug={hrefForSlug} currentSlug={currentFileId} />}
+  {
+    isCanvasMode ? (
+      // 'custom' and 'blank' both get this treatment: no auto <h1>, no
+      // prev/next nav, none of .wd-article's own prose max-width/padding -
+      // just the page's own MDX/component content, edge to edge. Still gets
+      // a data-pagefind-body wrapper so a hand-built page's own text is
+      // still searchable.
+      <div class="wd-canvas" data-pagefind-body>
+        <Content components={components} />
+        {entry.data.openapi && <ApiPlayground operation={entry.data.openapi} contentDir={contentDir} />}
+      </div>
+    ) : (
+      <article class={`wd-article ${pageMode === "wide" ? "wd-article-wide" : ""}`} data-pagefind-body>
+        {breadcrumbs.length > 0 && <Breadcrumbs items={breadcrumbs} />}
+        <div class="wd-article-header">
+          <h1 data-pagefind-meta="title">{entry.data.title}</h1>
+          {showCopyPageMenu && (
+            <CopyPageMenu currentPath={currentPath} siteUrl={siteUrl} contextMenu={config.contextMenu!} />
+          )}
+        </div>
+        <Content components={components} />
+        {entry.data.openapi && <ApiPlayground operation={entry.data.openapi} contentDir={contentDir} />}
+        <nav class="wd-prevnext" data-pagefind-ignore>
+          {prev && (
+            <a class="wd-prevnext-card wd-prevnext-prev" href={hrefForSlug(prev.slug)}>
+              <span class="wd-prevnext-row">
+                <svg
+                  class="wd-prevnext-icon"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <line x1="19" y1="12" x2="5" y2="12" />
+                  <polyline points="12 19 5 12 12 5" />
+                </svg>
+                <span class="wd-prevnext-label">Previous</span>
+              </span>
+              <span class="wd-prevnext-title">{titleForSlug(prev.slug)}</span>
+            </a>
+          )}
+          {next && (
+            <a class="wd-prevnext-card wd-prevnext-next" href={hrefForSlug(next.slug)}>
+              <span class="wd-prevnext-row">
+                <span class="wd-prevnext-label">Next</span>
+                <svg
+                  class="wd-prevnext-icon"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <line x1="5" y1="12" x2="19" y2="12" />
+                  <polyline points="12 5 19 12 12 19" />
+                </svg>
+              </span>
+              <span class="wd-prevnext-title">{titleForSlug(next.slug)}</span>
+            </a>
+          )}
+        </nav>
+      </article>
+    )
+  }
+  {
+    showToc &&
+      (entry.data.openapi ? (
+        <ApiReferencePanel slot="toc" operation={entry.data.openapi} contentDir={contentDir} />
+      ) : (
+        <TableOfContents slot="toc" headings={tocHeadings} />
+      ))
+  }
+</BaseLayout>
+
+<script>
+  // 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
+  // AFTER any user-supplied rehypePlugins in its pipeline, so a plugin
+  // that links existing ids never sees them. Adding the anchor client-side
+  // sidesteps that ordering constraint entirely.
+  function addHeadingAnchors(root: ParentNode) {
+    root
+      .querySelectorAll<HTMLElement>(".wd-article > h2[id], .wd-article > h3[id], .wd-article > h4[id]")
+      .forEach((heading) => {
+        if (heading.querySelector(".wd-heading-anchor")) return;
+        const anchor = document.createElement("a");
+        anchor.className = "wd-heading-anchor";
+        anchor.href = `#${heading.id}`;
+        anchor.setAttribute("aria-label", "Link to this section");
+        anchor.textContent = "#";
+        heading.appendChild(anchor);
+      });
+  }
+  addHeadingAnchors(document);
+  document.addEventListener("astro:page-load", () => addHeadingAnchors(document));
+
+  // Copy-to-clipboard button for every fenced (```) code block - the
+  // button itself is emitted at build time by codeBlockTransformer
+  // (astro.config.mjs / src/lib/shiki-code-block.js), wrapping each
+  // <pre> in a .wd-code-block container; this just wires up the click
+  // behavior client-side, same dataset-guarded init pattern as
+  // addHeadingAnchors above.
+  function initCodeCopyButtons(root: ParentNode) {
+    root.querySelectorAll<HTMLButtonElement>(".wd-code-copy-btn").forEach((btn) => {
+      if (btn.dataset.wdInit) return;
+      btn.dataset.wdInit = "true";
+      btn.addEventListener("click", async () => {
+        const pre = btn.closest(".wd-code-block")?.querySelector("pre");
+        if (!pre) return;
+        try {
+          await navigator.clipboard.writeText(pre.textContent ?? "");
+        } catch {
+          return; // clipboard unavailable (e.g. insecure context) - fail silently
+        }
+        btn.textContent = "✓";
+        btn.classList.add("wd-code-copied");
+        window.setTimeout(() => {
+          btn.textContent = "⧉";
+          btn.classList.remove("wd-code-copied");
+        }, 1500);
+      });
+    });
+  }
+  initCodeCopyButtons(document);
+  document.addEventListener("astro:page-load", () => initCodeCopyButtons(document));
+
+  // Clipboard-copy button for CopyPageMenu.astro's primary "Copy page"
+  // button (the split button's left half - the right half is just a
+  // .wd-dropdown-trigger caret, handled by BaseLayout's own
+  // initDropdowns()) - same dataset-guarded init pattern as
+  // initCodeCopyButtons above, but fetches its content from the button's
+  // own data-md-path (the [...slug].md.ts route for the current page -
+  // see CopyPageMenu.astro) rather than reading it from an
+  // already-rendered element on the page, since the raw Markdown source
+  // 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) => {
+      if (btn.dataset.wdInit) return;
+      btn.dataset.wdInit = "true";
+      const label = btn.querySelector<HTMLElement>(".wd-copy-page-primary-label");
+      const originalLabel = label?.textContent ?? "Copy page";
+      btn.addEventListener("click", async () => {
+        const mdPath = btn.dataset.mdPath;
+        if (!mdPath) return;
+        try {
+          const res = await fetch(mdPath);
+          const text = await res.text();
+          await navigator.clipboard.writeText(text);
+        } catch {
+          return; // fetch/clipboard unavailable - fail silently, same as initCodeCopyButtons
+        }
+        btn.classList.add("wd-copy-page-copied");
+        if (label) label.textContent = "Copied!";
+        window.setTimeout(() => {
+          btn.classList.remove("wd-copy-page-copied");
+          if (label) label.textContent = originalLabel;
+        }, 1500);
+      });
+    });
+  }
+  initCopyPageMenu(document);
+  document.addEventListener("astro:page-load", () => initCopyPageMenu(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
+  // fence's meta string contains the `expandable` keyword.
+  function initCodeExpandButtons(root: ParentNode) {
+    root.querySelectorAll<HTMLButtonElement>(".wd-code-expand-btn").forEach((btn) => {
+      if (btn.dataset.wdInit) return;
+      btn.dataset.wdInit = "true";
+      btn.addEventListener("click", () => {
+        const block = btn.closest(".wd-code-expandable");
+        if (!block) return;
+        const expanded = block.classList.toggle("wd-code-expanded");
+        btn.textContent = expanded ? "Show less" : "Show more";
+      });
+    });
+  }
+  initCodeExpandButtons(document);
+  document.addEventListener("astro:page-load", () => initCodeExpandButtons(document));
+
+  // Renders ```mermaid fenced blocks - already reshaped at build time into
+  // plain <div class="mermaid">source text</div> containers (see
+  // rehypeMermaid in astro.config.mjs/src/lib/mermaid-rehype.js) - into
+  // actual SVG diagrams. Lazily imports the mermaid package itself, same
+  // reasoning as initSearch's Pagefind import above: most pages have no
+  // diagrams at all, no reason to ship/parse that bundle on every load.
+  let mermaidLoadPromise: Promise<typeof import("mermaid")> | null = null;
+  function ensureMermaid() {
+    if (!mermaidLoadPromise) mermaidLoadPromise = import("mermaid");
+    return mermaidLoadPromise;
+  }
+
+  // mermaid.run() replaces a block's contents with the rendered SVG,
+  // destroying the original diagram source - stashed in a data attribute
+  // the first time a block is seen (before it's ever rendered), so a
+  // later re-render (see the wd:theme-change listener below - diagrams
+  // are baked to static SVG at render time, so a theme change needs an
+  // actual re-render, unlike Shiki code blocks which swap colors live via
+  // CSS custom properties) has something to restore from.
+  function stashMermaidSource(root: ParentNode) {
+    root.querySelectorAll<HTMLElement>(".mermaid").forEach((el) => {
+      if (el.dataset.mermaidSource === undefined) el.dataset.mermaidSource = el.textContent ?? "";
+    });
+  }
+
+  async function renderMermaid(root: ParentNode, theme: "light" | "dark") {
+    const blocks = Array.from(root.querySelectorAll<HTMLElement>(".mermaid"));
+    if (blocks.length === 0) return;
+    const { default: mermaid } = await ensureMermaid();
+    mermaid.initialize({ startOnLoad: false, theme: theme === "dark" ? "dark" : "default", securityLevel: "strict" });
+    blocks.forEach((el) => {
+      el.removeAttribute("data-processed"); // mermaid's own re-render guard - see run()'s docs
+      el.innerHTML = el.dataset.mermaidSource ?? "";
+    });
+    // suppressErrors: a malformed diagram on one block shouldn't take
+    // down every other diagram on the page - mermaid still renders a
+    // per-block error SVG in place and logs details to the console.
+    await mermaid.run({ nodes: blocks, suppressErrors: true });
+  }
+
+  function initMermaid(root: ParentNode) {
+    stashMermaidSource(root);
+    if (!root.querySelector(".mermaid")) return;
+    const theme = document.documentElement.dataset.theme === "dark" ? "dark" : "light";
+    renderMermaid(root, theme);
+  }
+  initMermaid(document);
+  document.addEventListener("astro:page-load", () => initMermaid(document));
+  document.addEventListener("wd:theme-change", ((e: CustomEvent<{ theme: "light" | "dark" }>) => {
+    renderMermaid(document, e.detail.theme);
+  }) as EventListener);
+
+  // RequestExample/ResponseExample.astro's own docking behavior - on
+  // desktop, moves their rendered .wd-example-panel(s) out of the normal
+  // article flow and into .wd-toc-col (replacing whatever it would
+  // otherwise show - the heading-based TableOfContents or
+  // ApiReferencePanel, per those two components' own comment), matching
+  // Mintlify's stated behavior for the components this was modeled on:
+  // pinned in the sidebar on desktop, plain in-place code blocks below
+  // 1150px (the exact breakpoint .wd-toc-col itself disappears at - see
+  // base.css). This can't be done at build time: MDX compiles a page's
+  // whole body into one content flow, with no way for a static render to
+  // place part of that flow into a *different* column's own slot output
+  // - a client-side move after the fact is the only way to get this
+  // content into a sibling column's subtree at all.
+  function initExamplePanels(root: ParentNode) {
+    const tocCol = document.querySelector<HTMLElement>(".wd-toc-col");
+    if (!tocCol) return; // no toc column on this page (mode !== 'default') - nothing to dock into
+
+    const panels = Array.from(root.querySelectorAll<HTMLElement>(".wd-example-panel"));
+    if (panels.length === 0) return;
+    if (tocCol.dataset.wdExampleInit) return;
+    tocCol.dataset.wdExampleInit = "true";
+
+    // Response always docks below Request regardless of source order,
+    // matching Mintlify's own stated behavior for these two components.
+    panels.sort((a, b) => {
+      const rank = (el: HTMLElement) => (el.classList.contains("wd-request-example") ? 0 : 1);
+      return rank(a) - rank(b);
+    });
+
+    // A comment node marks each panel's original in-flow position, so
+    // undock() (a desktop -> mobile resize, or simply no matching media
+    // query at all) can put it back exactly where the article's own
+    // content expects it, rather than leaving a permanent gap.
+    const anchors = panels.map((panel) => {
+      const anchor = document.createComment("wd-example-anchor");
+      panel.before(anchor);
+      return anchor;
+    });
+
+    let host = tocCol.querySelector<HTMLElement>(".wd-example-host");
+    if (!host) {
+      host = document.createElement("div");
+      host.className = "wd-example-host";
+      tocCol.prepend(host);
+    }
+    const dockedHost = host;
+
+    // Whatever .wd-toc-col would otherwise render (TableOfContents' own
+    // <nav class="wd-toc">, or ApiReferencePanel's own markup) - hidden
+    // while panels are docked rather than removed, so undock() has
+    // something to restore instead of needing to re-render it.
+    const existingTocContent = Array.from(tocCol.children).filter((el) => el !== dockedHost) as HTMLElement[];
+
+    function dock() {
+      existingTocContent.forEach((el) => (el.style.display = "none"));
+      dockedHost.hidden = false;
+      panels.forEach((panel) => dockedHost.appendChild(panel));
+    }
+    function undock() {
+      dockedHost.hidden = true;
+      existingTocContent.forEach((el) => (el.style.display = ""));
+      panels.forEach((panel, i) => anchors[i].after(panel));
+    }
+    const desktopQuery = window.matchMedia("(min-width: 1151px)");
+    const sync = () => (desktopQuery.matches ? dock() : undock());
+    sync();
+    desktopQuery.addEventListener("change", sync);
+  }
+  initExamplePanels(document);
+  document.addEventListener("astro:page-load", () => initExamplePanels(document));
+</script>
+
+<style>
+  .wd-article {
+    max-width: 900px;
+    margin: 0 auto;
+    /* Top padding matches Sidebar.astro's .wd-sidebar and
+       TableOfContents.astro's .wd-toc exactly (both 1.5rem) - all three
+       are siblings in the same .wd-shell row with no padding of their
+       own on .wd-main-col in between, so this is what actually lines up
+       the article's top edge with the sidebar/TOC's first item instead
+       of starting visibly lower than both. */
+    padding: 1.5rem 1.5rem 4rem;
+  }
+  /* frontmatter `mode: wide` - the table of contents column is gone (see
+     BaseLayout.astro), so the article itself gets more room too, rather
+     than just recentering the same 760px column into now-empty space. */
+  .wd-article-wide {
+    max-width: 1040px;
+  }
+  /* frontmatter `mode: custom` - no prose width/padding at all, no
+     max-width, no centering: a hand-built landing page controls its own
+     layout completely, full-bleed if it wants to. */
+  .wd-canvas {
+    width: 100%;
+  }
+  /* Wraps the auto-rendered <h1> together with CopyPageMenu (only
+     rendered when writedocs.json's `contextMenu` is set - see
+     showCopyPageMenu above) so the two sit on one row, menu pinned to
+     the right. Always present (even with no menu) rather than only
+     wrapping the <h1> conditionally, so the <h1>'s own top/bottom
+     spacing comes from exactly one place regardless of whether the menu
+     renders - flex items don't margin-collapse with their container the
+     way a bare <h1> would with .wd-article, so that margin is
+     reset/reapplied here instead of relying on the browser's default
+     heading margin still doing the right thing once it's no longer a
+     direct .wd-article child. */
+  .wd-article-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin: 0 0 1rem;
+  }
+  .wd-article-header h1 {
+    margin: 0;
+  }
+  .wd-prevnext {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 3rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--wd-border);
+    gap: 1rem;
+  }
+  /* Two side-by-side cards, each taking up to half the row - flex: 1 1
+     0 rather than a fixed 50% so a single remaining card (first page:
+     only next, last page: only prev) grows to fill the width instead
+     of leaving an empty gap next to it. */
+  .wd-prevnext-card {
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    flex-direction: column;
+    gap: 0.1rem;
+    padding: 0.75rem 1.1rem;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.75rem;
+    text-decoration: none;
+    color: inherit;
+    transition:
+      border-color 0.15s ease,
+      box-shadow 0.15s ease;
+  }
+  /* Both cards are identical at rest - the accent border/glow in the
+     reference screenshot is that card's :hover state, not a permanent
+     treatment on Next, so both wd-prevnext-prev and wd-prevnext-next
+     share this one hover rule instead of Next getting its own always-on
+     copy. Built from --wd-primary via color-mix() rather than a flat
+     hardcoded color, so it stays correct under any theme's own accent. */
+  .wd-prevnext-card:hover {
+    border-color: var(--wd-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-primary) 10%, transparent);
+  }
+  .wd-prevnext-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    color: var(--wd-text-muted);
+    font-size: 0.75rem;
+  }
+  .wd-prevnext-icon {
+    flex-shrink: 0;
+    color: var(--wd-text-muted);
+    transition: color 0.15s ease;
+  }
+  .wd-prevnext-title {
+    font-weight: 600;
+    font-size: 0.85rem;
+    color: var(--wd-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: color 0.15s ease;
+  }
+  /* Previous's title sits at the same end of the card its own
+     "Previous" label already does (right-aligned, next to the arrow's
+     fixed spot on the left) - Next's title stays left-aligned, at the
+     same end its own "Next" label sits. Keeps each card's two rows
+     reading as one consistent left/right-anchored column instead of
+     the title always defaulting to the left regardless of which side
+     its card's own label/arrow occupy. */
+  .wd-prevnext-prev .wd-prevnext-title {
+    text-align: right;
+  }
+  /* Icon and title pick up the accent color on hover - the
+     "Next"/"Previous" label itself stays muted even then, since it's a
+     plain UI affordance rather than the actual content being pointed
+     to. */
+  .wd-prevnext-card:hover .wd-prevnext-icon,
+  .wd-prevnext-card:hover .wd-prevnext-title {
+    color: var(--wd-primary);
+  }
+  @media (width <= 640px) {
+    .wd-prevnext {
+      flex-direction: column;
+    }
+  }
+</style>
+
+<style is:global>
+  /*
+   * These target direct children of .wd-article (or, for inline marks,
+   * specific prose containers) rather than bare tag selectors. MDX
+   * component internals (Card titles/links, prev/next nav links) also
+   * live inside .wd-article but nested deeper - a bare ".wd-article h3"
+   * or ".wd-article a" would win the specificity tie against those
+   * components' own scoped styles and visibly break them (oversized
+   * card titles, underlined cards, underlined prev/next links). Real
+   * MDX content (headings, paragraphs, lists, etc.) renders as flat
+   * direct children of .wd-article, so the ">" combinator is enough to
+   * separate "actual content" from "component chrome" without needing
+   * per-component :not() exceptions.
+   */
+  /* --wd-topbar-offset is set by initTopbarOffset() (src/scripts/
+     topbar-offset.ts) to the sticky topbar's real measured height - see
+     its own file comment for why a fixed 5rem (this var()'s own
+     fallback, for the instant before that script's first measurement)
+     isn't enough once a site's topbar grows a second row. Without this,
+     jumping straight to a #heading link (a hard load, or clicking one of
+     the .wd-heading-anchor links below) lands the heading partly hidden
+     under the sticky topbar. */
+  .wd-article > h2 {
+    font-size: 1.5rem;
+    margin: 2.75rem 0 1rem;
+    padding-top: 0.25rem;
+    scroll-margin-top: var(--wd-topbar-offset, 5rem);
+  }
+  .wd-article > h3 {
+    font-size: 1.2rem;
+    margin: 2rem 0 0.75rem;
+    scroll-margin-top: var(--wd-topbar-offset, 5rem);
+  }
+  .wd-article > h4 {
+    font-size: 1rem;
+    margin: 1.5rem 0 0.5rem;
+    scroll-margin-top: var(--wd-topbar-offset, 5rem);
+  }
+  .wd-article > h2:first-child,
+  .wd-article > h3:first-child {
+    margin-top: 0;
+  }
+  .wd-article > p {
+    margin: 0.9rem 0;
+  }
+  .wd-article > ul,
+  .wd-article > ol {
+    margin: 0.9rem 0;
+    padding-left: 1.4rem;
+  }
+  .wd-article li {
+    margin: 0.35rem 0;
+  }
+  .wd-article li > ul,
+  .wd-article li > ol {
+    margin: 0.35rem 0;
+  }
+  .wd-article > blockquote {
+    margin: 1.25rem 0;
+    padding: 0.1rem 1rem;
+    border-left: 3px solid var(--wd-primary);
+    background: var(--wd-surface);
+    border-radius: 0 0.4rem 0.4rem 0;
+    color: var(--wd-text-muted);
+  }
+  .wd-article blockquote p {
+    margin: 0.7rem 0;
+  }
+  .wd-article > table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.25rem 0;
+    font-size: 0.9rem;
+  }
+  .wd-article th,
+  .wd-article td {
+    text-align: left;
+    padding: 0.55rem 0.75rem;
+    border-bottom: 1px solid var(--wd-border);
+    vertical-align: top;
+  }
+  .wd-article th {
+    color: var(--wd-text-muted);
+    font-weight: 600;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+  .wd-article > hr {
+    border: none;
+    border-top: 1px solid var(--wd-border);
+    margin: 2.5rem 0;
+  }
+  /* Fenced (```) code blocks - codeBlockTransformer
+     (src/lib/shiki-code-block.js) wraps every one's <pre> in this
+     .wd-code-block div at build time (plus an optional .wd-code-title
+     bar, and the copy/expand buttons - see below). The card-like chrome
+     (border/radius/background) lives on the wrapper rather than the
+     <pre> itself so a title bar, when present, can sit flush above it
+     inside the same box; Astro's Shiki pipeline (dual light/dark themes
+     configured in astro.config.mjs) already supplies the <pre>'s own
+     background/text colors via inline styles. Matches both a standalone
+     block (direct child of .wd-article) and one nested inside
+     <CodeGroup> (which re-targets the margin/radius itself via its own
+     more specific `.wd-codegroup > .wd-code-block` rule in
+     CodeGroup.astro). */
+  .wd-code-block {
+    position: relative;
+    margin: 1.25rem 0;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.55rem;
+    overflow: hidden;
+  }
+  .wd-article pre.astro-code {
+    margin: 0;
+    padding: 1rem 1.1rem;
+    border: none;
+    border-radius: 0;
+    font-size: 0.85rem;
+    line-height: 1.55;
+  }
+  .wd-code-title {
+    padding: 0.5rem 1rem;
+    font-family: monospace;
+    font-size: 0.78rem;
+    font-weight: 500;
+    color: var(--wd-text-muted);
+    background: var(--wd-surface);
+    border-bottom: 1px solid var(--wd-border);
+  }
+  .wd-code-copy-btn {
+    position: absolute;
+    top: 0.6rem;
+    right: 0.6rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.85rem;
+    height: 1.85rem;
+    padding: 0;
+    border-radius: 0.4rem;
+    border: 1px solid var(--wd-border);
+    background: var(--wd-background);
+    color: var(--wd-text-muted);
+    font-size: 0.9rem;
+    line-height: 1;
+    cursor: pointer;
+    opacity: 0;
+    transition:
+      opacity 0.15s ease,
+      color 0.15s ease,
+      background 0.15s ease,
+      border-color 0.15s ease;
+  }
+  .wd-code-block:hover .wd-code-copy-btn,
+  .wd-code-copy-btn:focus-visible {
+    opacity: 1;
+  }
+  .wd-code-copy-btn:hover {
+    color: var(--wd-text);
+    background: var(--wd-surface);
+  }
+  .wd-code-copy-btn.wd-code-copied {
+    opacity: 1;
+    color: #16a34a;
+    border-color: #16a34a;
+  }
+  /* ```js wrap - opts a single block into wrapping long lines instead
+     of horizontal-scrolling (the default). */
+  .wd-code-wrap pre.astro-code,
+  .wd-code-wrap pre.astro-code code {
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-x: hidden;
+  }
+  /* ```js lines (or showLineNumbers) - a CSS-counter gutter, no markup
+     needed beyond a class since every line is already its own .line
+     span. */
+  .wd-code-lines pre.astro-code code {
+    counter-reset: wd-code-line;
+  }
+  .wd-code-lines pre.astro-code .line {
+    counter-increment: wd-code-line;
+  }
+  .wd-code-lines pre.astro-code .line::before {
+    content: counter(wd-code-line);
+    display: inline-block;
+    width: 1.8em;
+    margin-right: 1em;
+    text-align: right;
+    color: var(--wd-text-muted);
+    user-select: none;
+  }
+  /* ```js expandable - collapses to a fixed height with a "Show more"
+     button below; toggled via .wd-code-expanded, added by the click
+     handler in the <script> block below. */
+  .wd-code-expandable pre.astro-code {
+    max-height: 340px;
+    overflow-y: hidden;
+  }
+  .wd-code-expandable.wd-code-expanded pre.astro-code {
+    max-height: none;
+  }
+  .wd-code-expand-btn {
+    display: block;
+    width: 100%;
+    padding: 0.5rem;
+    border: none;
+    border-top: 1px solid var(--wd-border);
+    background: var(--wd-surface);
+    color: var(--wd-primary);
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+  }
+  .wd-code-expand-btn:hover {
+    background: color-mix(in srgb, var(--wd-primary) 8%, var(--wd-surface));
+  }
+  /* Line/word annotation classes added by the official
+     @shikijs/transformers transformers configured alongside
+     codeBlockTransformer in astro.config.mjs:
+       .line.highlighted              - transformerMetaHighlight
+                                         (```js {1,3-5}) and
+                                         transformerNotationHighlight
+                                         (// [!code highlight]/[!code hl])
+       .line.diff.add / .diff.remove  - transformerNotationDiff
+                                         (// [!code ++] / // [!code --])
+       .line.error / .warning / .info - transformerNotationErrorLevel
+                                         (// [!code error]/[!code warning])
+                                         (also carries .highlighted)
+       pre.has-focused, .line.focused - transformerNotationFocus
+                                         (// [!code focus])
+       .highlighted-word               - transformerMetaWordHighlight
+                                         (```js /someWord/) and
+                                         transformerNotationWordHighlight
+                                         (// [!code word:someWord])
+     Every .line needs display:inline-block + full width for its
+     highlight background to stretch edge-to-edge (by default a <span>
+     only extends as wide as its own text) - harmless for plain lines,
+     since inline-block with no other styling renders identically to
+     the browser's normal inline flow here. */
+  .astro-code .line {
+    display: inline-block;
+    width: 100%;
+  }
+  .astro-code .line.highlighted {
+    background: color-mix(in srgb, var(--wd-primary) 12%, transparent);
+    margin: 0 -1.1rem;
+    padding: 0 1.1rem;
+    width: calc(100% + 2.2rem);
+  }
+  .astro-code .line.diff {
+    margin: 0 -1.1rem;
+    padding: 0 1.1rem 0 1.6rem;
+    width: calc(100% + 2.2rem);
+    position: relative;
+  }
+  .astro-code .line.diff.add {
+    background: color-mix(in srgb, #16a34a 15%, transparent);
+  }
+  .astro-code .line.diff.remove {
+    background: color-mix(in srgb, #dc2626 15%, transparent);
+    opacity: 0.85;
+  }
+  .astro-code .line.diff.add::before,
+  .astro-code .line.diff.remove::before {
+    position: absolute;
+    left: 0.5rem;
+    font-weight: 700;
+  }
+  .astro-code .line.diff.add::before {
+    content: "+";
+    color: #16a34a;
+  }
+  .astro-code .line.diff.remove::before {
+    content: "-";
+    color: #dc2626;
+  }
+  .astro-code .line.error {
+    background: color-mix(in srgb, #dc2626 15%, transparent);
+  }
+  .astro-code .line.warning {
+    background: color-mix(in srgb, #d97706 15%, transparent);
+  }
+  .astro-code .line.info {
+    background: color-mix(in srgb, #2563eb 12%, transparent);
+  }
+  pre.astro-code.has-focused .line {
+    opacity: 0.45;
+    filter: blur(0.3px);
+    transition:
+      opacity 0.2s ease,
+      filter 0.2s ease;
+  }
+  pre.astro-code.has-focused .line.focused {
+    opacity: 1;
+    filter: none;
+  }
+  pre.astro-code.has-focused:hover .line {
+    opacity: 1;
+    filter: none;
+  }
+  .astro-code .highlighted-word {
+    background: color-mix(in srgb, var(--wd-primary) 20%, transparent);
+    border-radius: 0.25rem;
+    padding: 0.05rem 0.2rem;
+    margin: -0.05rem -0.15rem;
+  }
+  .wd-article img {
+    max-width: 100%;
+    border-radius: 0.5rem;
+    border: 1px solid var(--wd-border);
+  }
+  /* ```mermaid fenced blocks (rehypeMermaid in astro.config.mjs reshapes
+     them into this plain <div class="mermaid"> container at build time -
+     see mermaid-rehype.js) - mermaid.js (initMermaid() below) replaces
+     the raw source text with a rendered <svg> in place, client-side.
+     overflow-x: auto rather than shrinking the diagram, since a wide
+     flowchart squeezed into the article's ~760px column becomes
+     unreadable; centering only kicks in once the svg fits, via the
+     inline-block + text-align combo below. */
+  .wd-article > div.mermaid {
+    margin: 1.25rem 0;
+    padding: 1rem;
+    overflow-x: auto;
+    text-align: center;
+    background: var(--wd-surface);
+    border: 1px solid var(--wd-border);
+    border-radius: 0.55rem;
+  }
+  .wd-article > div.mermaid svg {
+    display: inline-block;
+    max-width: 100%;
+  }
+  /* Only style links inside actual prose containers - excludes Card
+     (which is itself an <a>) and the prev/next nav links. */
+  .wd-article p a,
+  .wd-article li a,
+  .wd-article td a,
+  .wd-article blockquote a {
+    text-decoration: underline;
+    text-decoration-color: color-mix(in srgb, var(--wd-primary) 40%, transparent);
+    text-underline-offset: 2px;
+  }
+  .wd-article strong {
+    font-weight: 600;
+  }
+  .wd-article > h2 a[href^="#"],
+  .wd-article > h3 a[href^="#"],
+  .wd-article > h4 a[href^="#"] {
+    text-decoration: none;
+  }
+  .wd-heading-anchor {
+    display: inline-block;
+    margin-left: 0.5rem;
+    color: var(--wd-text-muted);
+    opacity: 0;
+    text-decoration: none;
+    font-weight: 400;
+    transition: opacity 0.1s ease;
+  }
+  .wd-article > h2:hover .wd-heading-anchor,
+  .wd-article > h3:hover .wd-heading-anchor,
+  .wd-article > h4:hover .wd-heading-anchor,
+  .wd-heading-anchor:focus {
+    opacity: 1;
+  }
+  /* RequestExample/ResponseExample.astro's own panels, and the
+     .wd-toc-col host initExamplePanels() (see the <script> above) docks
+     them into on desktop - is:global (this whole style block already
+     is) since .wd-toc-col itself is BaseLayout.astro's own markup, a
+     completely different component than this one. Widens .wd-toc-col
+     itself only while it actually contains a non-empty host - the same
+     :has() technique ApiReferencePanel.astro's own identical comment
+     already uses to widen it for its own markup, so a page with neither
+     feature keeps the narrower 230px default from base.css. */
+  .wd-toc-col:has(.wd-example-host:not(:empty)) {
+    width: 340px;
+  }
+  .wd-example-host {
+    position: sticky;
+    top: var(--wd-topbar-offset, 5rem);
+    max-height: calc(100vh - var(--wd-topbar-offset, 5rem));
+    overflow-y: auto;
+    padding: 1.5rem 0 1.5rem 0.5rem;
+  }
+  /* Spacing between multiple docked panels (e.g. Request above
+     Response) is this wrapper's own job only once docked - inline
+     (mobile, no-toc-column, or not-yet-docked), the wrapped
+     .wd-codegroup's own default margin already spaces stacked panels
+     out correctly, so adding a second margin here unscoped would just
+     double it up. */
+  .wd-example-host .wd-example-panel {
+    margin-bottom: 1.25rem;
+  }
+  .wd-example-host .wd-example-panel:last-child {
+    margin-bottom: 0;
+  }
+  .wd-example-host .wd-codegroup {
+    margin: 0;
+  }
+
+  .wd-example-host .astro-code {
+    margin: 0;
+    border-radius: 0 0 0.55rem 0.55rem;
+  }
+</style>