npm - @writedocs/generator - Versions diffs - 0.1.0 - Mend

@writedocs/generator 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/LICENSE +15 -0
package/README.md +17 -0
package/astro.config.mjs +419 -0
package/bin/writedocs.js +73 -0
package/package.json +79 -0
package/src/assets/wd_watermark.png +0 -0
package/src/assets/wd_watermark_dark.png +0 -0
package/src/cli/build-auth.js +53 -0
package/src/cli/build.js +40 -0
package/src/cli/dev.js +12 -0
package/src/cli/generate-api-pages.js +359 -0
package/src/cli/init.js +81 -0
package/src/cli/preflight.js +40 -0
package/src/cli/run-astro.js +57 -0
package/src/cli/run-pagefind.js +66 -0
package/src/cli/write-redirects-file.js +80 -0
package/src/components/Accordion.astro +164 -0
package/src/components/AccordionGroup.astro +40 -0
package/src/components/ApiLangSelect.astro +168 -0
package/src/components/ApiPlayground.astro +281 -0
package/src/components/ApiReferencePanel.astro +1754 -0
package/src/components/ApiSchemaField.astro +54 -0
package/src/components/AppIcon.astro +32 -0
package/src/components/Badge.astro +128 -0
package/src/components/Callout.astro +168 -0
package/src/components/Card.astro +136 -0
package/src/components/CardGroup.astro +20 -0
package/src/components/CodeGroup.astro +184 -0
package/src/components/CopyPageMenu.astro +246 -0
package/src/components/Danger.astro +12 -0
package/src/components/Expandable.astro +126 -0
package/src/components/Frame.astro +102 -0
package/src/components/Hint.astro +99 -0
package/src/components/Icon.astro +70 -0
package/src/components/Image.astro +147 -0
package/src/components/Info.astro +12 -0
package/src/components/Note.astro +12 -0
package/src/components/Parameter.astro +119 -0
package/src/components/RequestExample.astro +33 -0
package/src/components/ResponseExample.astro +19 -0
package/src/components/Searchbar.astro +117 -0
package/src/components/Step.astro +10 -0
package/src/components/Steps.astro +32 -0
package/src/components/Tab.astro +9 -0
package/src/components/Tabs.astro +52 -0
package/src/components/Tip.astro +12 -0
package/src/components/Video.astro +135 -0
package/src/components/Warning.astro +12 -0
package/src/components/index.ts +48 -0
package/src/content.config.ts +223 -0
package/src/layout/BaseLayout.astro +750 -0
package/src/layout/components/AnalyticsScripts.astro +77 -0
package/src/layout/components/AskAiWidget.astro +37 -0
package/src/layout/components/Breadcrumbs.astro +97 -0
package/src/layout/components/ImageZoom.astro +19 -0
package/src/layout/components/MobileMenu.astro +200 -0
package/src/layout/components/NavTree.astro +351 -0
package/src/layout/components/SearchModal.astro +42 -0
package/src/layout/components/Sidebar.astro +122 -0
package/src/layout/components/SiteFooter.astro +85 -0
package/src/layout/components/TableOfContents.astro +117 -0
package/src/layout/components/TopBar.astro +311 -0
package/src/layout/styles/banner.css +44 -0
package/src/layout/styles/base.css +234 -0
package/src/layout/styles/dropdown.css +133 -0
package/src/layout/styles/footer.css +108 -0
package/src/layout/styles/image-zoom.css +50 -0
package/src/layout/styles/mobile-menu.css +258 -0
package/src/layout/styles/search-modal.css +122 -0
package/src/layout/styles/topbar.css +437 -0
package/src/lib/config.ts +2131 -0
package/src/lib/mdx-auto-hydrate.js +70 -0
package/src/lib/mdx-inject-builtins.js +87 -0
package/src/lib/mdx-substitute-variables.js +66 -0
package/src/lib/mdx-title-anchor-ids.js +84 -0
package/src/lib/mermaid-rehype.js +72 -0
package/src/lib/openapi-render.ts +479 -0
package/src/lib/shiki-code-block.js +102 -0
package/src/lib/shiki-copy-button.js +45 -0
package/src/lib/styles-asset-integration.js +210 -0
package/src/lib/writedocs-temp-dir.js +93 -0
package/src/pages/404.astro +62 -0
package/src/pages/[...slug].astro +1270 -0
package/src/pages/[...slug].md.ts +78 -0
package/src/pages/llms-full.txt.ts +71 -0
package/src/pages/llms.txt.ts +141 -0
package/src/scripts/banner.ts +20 -0
package/src/scripts/dropdowns.ts +61 -0
package/src/scripts/image-zoom.ts +66 -0
package/src/scripts/mobile-menu.ts +55 -0
package/src/scripts/search.ts +155 -0
package/src/scripts/sidebar-scroll.ts +65 -0
package/src/scripts/theme-toggle.ts +35 -0
package/src/scripts/topbar-offset.ts +141 -0
package/src/styles/global.css +18 -0

package/src/cli/run-pagefind.js ADDED Viewed

@@ -0,0 +1,66 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import { spawn } from 'node:child_process';
+/**
+ * Locates the installed pagefind package by walking up node_modules
+ * directories from packageRoot - the same lookup algorithm Node itself
+ * uses for bare-specifier resolution, just done by hand with fs instead
+ * of require.resolve()/import.meta.resolve(). This is necessary (rather
+ * than mirroring resolveAstroBin()'s simpler require.resolve()-based
+ * approach in run-astro.js) because pagefind's own package.json declares
+ * an "exports" map with only a "." entry scoped to the "import"
+ * condition: require.resolve('pagefind/package.json') is blocked
+ * outright (exports doesn't list a package.json subpath at all), and
+ * require.resolve('pagefind') also fails under CJS require() semantics
+ * (no "require"/"default" condition for it to satisfy).
+ * import.meta.resolve() would sidestep both, but needs Node 20.6+ -
+ * newer than this package's documented minimum (20.3.0, see engines in
+ * package.json). Walking node_modules ourselves avoids all of this - we
+ * only need pagefind's package.json (for its "bin" field) and the CLI
+ * script path, both plain file reads that "exports" doesn't restrict at
+ * all (only module *resolution* is subject to it).
+ */
+function findPagefindDir(startDir) {
+  let dir = startDir;
+  while (true) {
+    const candidate = path.join(dir, 'node_modules', 'pagefind');
+    if (fs.existsSync(path.join(candidate, 'package.json'))) return candidate;
+    const parent = path.dirname(dir);
+    if (parent === dir) {
+      throw new Error(`Could not find "pagefind" in any node_modules directory above ${startDir}`);
+    }
+    dir = parent;
+  }
+}
+function resolvePagefindBin(packageRoot) {
+  const dir = findPagefindDir(packageRoot);
+  const pkg = JSON.parse(fs.readFileSync(path.join(dir, 'package.json'), 'utf8'));
+  return path.join(dir, pkg.bin);
+}
+/**
+ * Indexes a built static site with Pagefind, writing the search bundle
+ * into <siteDir>/pagefind. Run as a postbuild step, after astro build has
+ * already produced the final HTML - Pagefind crawls that HTML directly
+ * rather than hooking into the Astro/Vite build pipeline, so search stays
+ * decoupled from whatever templating produced the pages. Only indexes
+ * elements carrying `data-pagefind-body` (see [...slug].astro's
+ * `.wd-article`) - without that scoping, Pagefind falls back to indexing
+ * every page's entire <body>, polluting every result with sidebar/topbar
+ * chrome text repeated on every page.
+ */
+export function runPagefind(siteDir, { packageRoot }) {
+  const bin = resolvePagefindBin(packageRoot);
+  return new Promise((resolve, reject) => {
+    const child = spawn(process.execPath, [bin, '--site', siteDir, '--quiet'], {
+      stdio: 'inherit',
+    });
+    child.on('exit', (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`pagefind exited with code ${code}`));
+    });
+    child.on('error', reject);
+  });
+}

package/src/cli/write-redirects-file.js ADDED Viewed

@@ -0,0 +1,80 @@
+import fs from 'node:fs';
+import path from 'node:path';
+// Astro's own `output: 'static'` redirects (both writedocs.json's `redirects`
+// feature and the automatic "/" -> first-nav-page redirect in
+// [...slug].astro) are never real server/edge redirects - with no adapter
+// installed, Astro can only ever emit a client-side
+// `<meta http-equiv="refresh">` page (see redirectSchema's own comment in
+// lib/config.ts for why `permanent`/status-code isn't even offered as a
+// config option). That page is a real, working redirect, but it's a flash
+// of unstyled content before the browser honors the meta-refresh - visibly
+// bad on a deployed site, and exactly what a reader lands on for a second
+// or more depending on network/host latency.
+//
+// Cloudflare Pages and Netlify both read a `_redirects` file at the root
+// of the deployed output and turn each line into a real edge-level
+// redirect - no page ever renders, no flash. This step generates that file
+// as a purely additive improvement: hosts that honor `_redirects` get an
+// instant real redirect, and every other static host (S3, GitHub Pages,
+// etc.) falls back to the meta-refresh page Astro already generates, which
+// keeps working exactly as before. Neither this file nor its absence ever
+// changes what Astro itself builds.
+// `contentDir` rather than a pre-loaded config object: this runs from
+// build.js, invoked by plain `node`, not through Astro/Vite's TS
+// transform - loadDocsConfig() (lib/config.ts) can't be imported here the
+// way astro.config.mjs and every .astro file import it. writedocs.json has
+// already been through preflightCheck() (valid JSON) and Astro's own
+// loadDocsConfig() call inside astro.config.mjs (schema-valid, or the
+// build above would already have failed) by the time this runs, so a
+// second, un-validated JSON.parse() here is safe - this only ever reads
+// the one `redirects` array back out, nothing that needs zod's defaults
+// or transforms.
+export function writeRedirectsFile(distDir, contentDir) {
+  const writedocsJson = JSON.parse(fs.readFileSync(path.join(contentDir, 'writedocs.json'), 'utf8'));
+  const redirects = writedocsJson.redirects ?? [];
+  const lines = [];
+  // writedocs.json's own `redirects` array - one line per entry, always 301
+  // (there's nowhere else in this project to source a status code from;
+  // see redirectSchema's comment in lib/config.ts on why the schema itself
+  // has no field for one - a redirect a site author deliberately
+  // configured is safe to treat as permanent).
+  for (const { source, destination } of redirects) {
+    lines.push(`${source} ${destination} 301`);
+  }
+  // The automatic root "/" redirect (see the `rootRedirect` block in
+  // [...slug].astro's getStaticPaths()) isn't reachable from here without
+  // re-deriving the same first-nav-page resolution Astro already did -
+  // instead, read it straight back out of the meta-refresh tag in the
+  // already-built dist/index.html. If writedocs.json already defines its own
+  // `/` redirect above, that one wins (first match wins in `_redirects`,
+  // and it's already listed first) - skip the automatic one entirely
+  // rather than emit a second, unreachable rule for the same path.
+  const hasExplicitRootRedirect = redirects.some((r) => r.source === '/');
+  const indexHtmlPath = path.join(distDir, 'index.html');
+  if (!hasExplicitRootRedirect && fs.existsSync(indexHtmlPath)) {
+    const html = fs.readFileSync(indexHtmlPath, 'utf8');
+    const match = html.match(/<meta http-equiv="refresh" content="\d+;\s*url=([^"]+)"/i);
+    if (match) lines.push(`/ ${match[1]} 301`);
+  }
+  if (lines.length === 0) return;
+  const generated = [
+    '# Generated by writedocs (see src/cli/write-redirects-file.js).',
+    '# Gives Cloudflare Pages / Netlify a real edge redirect for the same',
+    "# paths Astro's own static-mode <meta http-equiv=\"refresh\"> pages",
+    '# already cover - other static hosts keep using those pages as-is.',
+    ...lines,
+    '',
+  ].join('\n');
+  const redirectsPath = path.join(distDir, '_redirects');
+  // A hand-written public/_redirects is already copied into dist by Astro
+  // by this point - preserve it (and its priority: first match wins) by
+  // appending after it rather than overwriting.
+  const existing = fs.existsSync(redirectsPath) ? fs.readFileSync(redirectsPath, 'utf8').replace(/\s*$/, '\n\n') : '';
+  fs.writeFileSync(redirectsPath, existing + generated);
+}

package/src/components/Accordion.astro ADDED Viewed

@@ -0,0 +1,164 @@
+---
+import AppIcon from "./AppIcon.astro";
+interface Props {
+  title: string;
+  icon?: string;
+  // Set automatically by remarkTitleAnchorIds (src/lib/mdx-title-anchor-ids.js)
+  // for every <Accordion title="..."> it finds in an .mdx file's own JSX,
+  // already deduped (-2, -3, ...) against every other Accordion/Callout
+  // title on that same page - see that plugin's own comment for why the
+  // dedup has to happen there, one level up, rather than here. Not meant
+  // to be set by hand in content; the slugify(title) fallback below covers
+  // every case this doesn't reach (plain .md content, a dynamic
+  // title={expr}, or this component used directly from a .astro file).
+  _titleId?: string;
+}
+const { title, icon, _titleId } = Astro.props as Props;
+// Astro's own heading-id slugging (github-slugger, via the markdown
+// pipeline) never sees this - `title` is a component prop, not a markdown
+// heading, so it gets no id unless we make one ourselves. Same slugify
+// Callout.astro's own fallback uses.
+function slugify(value: string): string {
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+const titleId = _titleId ?? slugify(title);
+---
+<details class="wd-accordion">
+  <summary>
+    <span class="wd-accordion-heading">
+      {icon && <AppIcon icon={icon} class="wd-accordion-icon" />}
+      <span class="wd-accordion-title" id={titleId}>
+        {title}
+        <a class="wd-heading-anchor" href={`#${titleId}`} aria-label="Link to this section"> # </a>
+      </span>
+    </span>
+    {
+      /* Same "hide the native marker, draw our own instead" approach as
+        the sidebar's own collapsible groups (NavTree.astro's
+        .wd-nav-chevron) - see the ::-webkit-details-marker / ::marker
+        rules below. Drawn pointing down already (a native summary
+        marker instead defaults to pointing right, then rotating open),
+        since that's the resting/idle direction the reference design
+        this was built from actually uses - it flips 180deg on [open]
+        instead, in the CSS below. */
+    }
+    <svg class="wd-accordion-chevron" width="11" height="11" viewBox="0 0 10 10" aria-hidden="true">
+      <path
+        d="M2 3.5L5 6.5L8 3.5"
+        stroke="currentColor"
+        stroke-width="1.4"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+    </svg>
+  </summary>
+  <div class="wd-accordion-body"><slot /></div>
+</details>
+<script>
+  // The anchor link lives inside <summary> - a real <a>, but nested
+  // inside the element <details> itself listens on for its native
+  // open/close toggle, so without this a click on "#" would both
+  // navigate/copy the link *and* toggle the accordion as an unrelated
+  // side effect of where it happens to sit in the DOM. stopPropagation()
+  // only, not preventDefault() - the link itself should still navigate
+  // normally, just not also bubble up into summary's own click handler.
+  function initAccordionAnchors(root: ParentNode) {
+    root.querySelectorAll<HTMLAnchorElement>(".wd-accordion > summary .wd-heading-anchor").forEach((a) => {
+      if (a.dataset.wdInit) return;
+      a.dataset.wdInit = "true";
+      a.addEventListener("click", (e) => e.stopPropagation());
+    });
+  }
+  initAccordionAnchors(document);
+  document.addEventListener("astro:page-load", () => initAccordionAnchors(document));
+</script>
+<style>
+  .wd-accordion {
+    border: 1px solid var(--wd-border);
+    border-radius: 0.6rem;
+    margin: 0.6rem 0;
+    overflow: hidden;
+  }
+  .wd-accordion summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.85rem 1.1rem;
+    cursor: pointer;
+    list-style: none;
+  }
+  /* Firefox/Chrome use ::marker for the default disclosure triangle,
+     Safari still needs the older, WebKit-specific pseudo-element -
+     both zeroed out so only the svg above ever shows. */
+  .wd-accordion summary::-webkit-details-marker {
+    display: none;
+  }
+  .wd-accordion summary::marker {
+    content: "";
+  }
+  .wd-accordion summary:hover {
+    background: var(--wd-surface);
+  }
+  .wd-accordion-heading {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    min-width: 0;
+  }
+  /* :global() is load-bearing: AppIcon.astro renders this span/svg, not
+     Accordion.astro, so it never carries Accordion's own scope
+     attribute - without :global() these selectors compile to something
+     that can never match. Same fix Card.astro/Callout.astro's own icon
+     rules already needed for the identical reason. */
+  :global(span.wd-accordion-icon) {
+    display: block;
+    font-size: 1rem;
+    flex-shrink: 0;
+  }
+  :global(svg.wd-accordion-icon) {
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: var(--wd-text-muted);
+  }
+  .wd-accordion-title {
+    font-weight: 700;
+    color: var(--wd-text);
+    scroll-margin-top: calc(var(--wd-topbar-offset, 5rem) + 1rem);
+  }
+  /* .wd-heading-anchor's base look (color, opacity: 0, transition) comes
+     from [...slug].astro's own <style is:global> block - see
+     Callout.astro's identical comment on its own title anchor. Only the
+     hover trigger needs to live here, and - since both
+     .wd-accordion-title and the anchor inside it are rendered directly
+     by this component's own template - no :global() is needed for it
+     either. */
+  .wd-accordion-title:hover .wd-heading-anchor {
+    opacity: 1;
+  }
+  .wd-accordion-chevron {
+    flex-shrink: 0;
+    color: var(--wd-text-muted);
+    transition: transform 0.15s ease;
+  }
+  .wd-accordion[open] > summary .wd-accordion-chevron {
+    transform: rotate(180deg);
+  }
+  .wd-accordion-body {
+    padding: 1.1rem 1rem;
+    color: var(--wd-text-muted);
+  }
+  .wd-accordion-body :global(p:first-child) {
+    margin-top: 0;
+  }
+  .wd-accordion-body :global(p:last-child) {
+    margin-bottom: 0;
+  }
+</style>

package/src/components/AccordionGroup.astro ADDED Viewed

@@ -0,0 +1,40 @@
+<div class="wd-accordion-group">
+  <slot />
+</div>
+<style is:global>
+  /* Same "one shared border, not N separate ones" pattern CodeGroup.astro
+     already uses for its own children (see that file's comment) -
+     overflow: hidden here is what actually clips the first/last
+     accordion's corners into this container's own radius, since every
+     .wd-accordion inside loses its own border-radius below. */
+  .wd-accordion-group {
+    margin: 1.25rem 0;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.6rem;
+    overflow: hidden;
+  }
+  /* Overrides Accordion.astro's own scoped border/radius/margin - needs
+     is:global (this whole <style> block already is) since .wd-accordion
+     carries Accordion.astro's own scope attribute, not this file's. */
+  .wd-accordion-group > .wd-accordion {
+    margin: 0;
+    border: none;
+    border-radius: 0;
+  }
+  /* Divides one accordion from the next - not before the first one,
+     the group's own outer border above already closes that edge off.
+     ~ (general sibling), not + (strictly adjacent): Accordion.astro's
+     own per-instance <script> tag is small enough that Astro/Vite
+     inlines it directly in the page body rather than extracting it to
+     an external bundle - it lands as a literal sibling element between
+     whichever pair of accordions happens to trigger the (deduped,
+     so it only ever appears once) inline, breaking + for exactly that
+     one pair while every other pair still matched. ~ tolerates
+     whatever non-.wd-accordion siblings end up between two accordions
+     for reasons like this, matching any accordion preceded by another
+     one anywhere earlier among its siblings instead of requiring zero
+     gap. */
+  .wd-accordion-group > .wd-accordion ~ .wd-accordion {
+    border-top: 1px solid var(--wd-border);
+  }
+</style>

package/src/components/ApiLangSelect.astro ADDED Viewed

@@ -0,0 +1,168 @@
+---
+// Icon + label + checkmark language dropdown used by both of
+// ApiReferencePanel's language pickers - the sidebar Request card's, and
+// the Try-it modal's own copy (see rolePrefix below). Reuses the site's
+// shared .wd-dropdown/.wd-dropdown-trigger/.wd-dropdown-menu/
+// .wd-dropdown-menu-panel pattern (dropdown.css + initDropdowns() in
+// src/scripts/dropdowns.ts, already wired globally against `document` by
+// TopBar.astro/MobileMenu.astro on load and on every astro:page-load) so
+// open/close/outside-click/Escape all come free here too, the same way
+// CopyPageMenu.astro's own dropdown does - no separate wiring needed for
+// any of that in this file or in ApiReferencePanel's own <script>.
+//
+// A hidden native <select> (data-role={rolePrefix}-select) stays the
+// actual source of truth for "which language is selected" - every
+// existing 'change' listener in ApiReferencePanel.astro's <script>
+// (panel-toggle logic, live-preview refresh) was already written against
+// that select, so ApiReferencePanel's own initLangDropdown() only ever
+// *drives* it (sets .value, dispatches 'change') from a click on one of
+// the buttons below, rather than replacing that wiring.
+import { Icon } from 'astro-icon/components';
+interface LangOption {
+  id: string;
+  label: string;
+  icon: string; // an astro-icon/Iconify id, e.g. "mdi:language-python"
+}
+interface Props {
+  options: LangOption[];
+  rolePrefix: string; // "lang" (sidebar) or "modal-lang" (Try-it modal)
+  ariaLabel: string;
+}
+const { options, rolePrefix, ariaLabel } = Astro.props as Props;
+const first = options[0];
+---
+{first && (
+  <div class="wd-dropdown wd-api-lang-dropdown">
+    <select class="wd-api-lang-native-select" data-role={`${rolePrefix}-select`} tabindex="-1" aria-hidden="true">
+      {options.map((o) => <option value={o.id}>{o.label}</option>)}
+    </select>
+    <button
+      type="button"
+      class="wd-dropdown-trigger wd-api-lang-trigger"
+      data-role={`${rolePrefix}-trigger`}
+      aria-haspopup="true"
+      aria-expanded="false"
+      aria-label={ariaLabel}
+    >
+      <Icon name={first.icon} class="wd-api-lang-icon" />
+      <span class="wd-api-lang-label">{first.label}</span>
+      <svg class="wd-dropdown-caret" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+        <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </button>
+    <div class="wd-dropdown-menu wd-api-lang-menu" role="menu">
+      <div class="wd-dropdown-menu-panel wd-api-lang-menu-panel">
+        {options.map((o, i) => (
+          <button
+            type="button"
+            class={`wd-api-lang-item${i === 0 ? ' active' : ''}`}
+            data-role={`${rolePrefix}-item`}
+            data-value={o.id}
+          >
+            <Icon name={o.icon} class="wd-api-lang-icon" />
+            <span class="wd-api-lang-label">{o.label}</span>
+            <svg class="wd-api-lang-check" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
+              <path d="M2.5 6.2L5 8.7L9.5 3.5" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </button>
+        ))}
+      </div>
+    </div>
+  </div>
+)}
+<style>
+  .wd-api-lang-native-select {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  /* Overrides the shared .wd-dropdown-trigger base (dropdown.css, sized
+     for the topbar's larger switchers) down to the same small pill this
+     control replaced (.wd-api-select-wrap in ApiReferencePanel.astro's
+     own CSS) - scoped-style specificity wins this over the plain global
+     class rule regardless of import order. */
+  .wd-api-lang-trigger {
+    padding: 0.2rem 0.55rem;
+    border-radius: 999px;
+    border: 1px solid var(--wd-border);
+    background: var(--wd-background);
+    font-size: 0.75rem;
+    color: var(--wd-text);
+  }
+  .wd-api-lang-trigger:hover {
+    color: var(--wd-text);
+    border-color: var(--wd-text-muted);
+  }
+  .wd-api-lang-icon {
+    width: 0.95rem;
+    height: 0.95rem;
+    flex-shrink: 0;
+    color: var(--wd-text-muted);
+  }
+  /* Right-aligned, same as CopyPageMenu's own .wd-copy-page-menu override
+     - the default .wd-dropdown-menu (dropdown.css) is left: 0, correct
+     for the topbar's own left-anchored triggers but not for a trigger
+     that sits at the right edge of its own card. */
+  .wd-api-lang-menu {
+    left: auto;
+    right: 0;
+  }
+  .wd-api-lang-menu-panel {
+    min-width: 11rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.05rem;
+  }
+  .wd-api-lang-item {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    width: 100%;
+    padding: 0.4rem 0.6rem;
+    border: none;
+    border-radius: 0.35rem;
+    background: none;
+    font-family: inherit;
+    font-size: 0.82rem;
+    color: var(--wd-text);
+    text-align: left;
+    cursor: pointer;
+  }
+  .wd-api-lang-item:hover {
+    background: var(--wd-surface);
+  }
+  .wd-api-lang-item .wd-api-lang-icon {
+    color: var(--wd-text-muted);
+  }
+  .wd-api-lang-item .wd-api-lang-label {
+    flex: 1;
+  }
+  .wd-api-lang-check {
+    flex-shrink: 0;
+    color: var(--wd-primary);
+    opacity: 0;
+  }
+  /* Same active-item convention as .wd-dropdown-menu a.active
+     (dropdown.css) - tinted text/background in the primary color, plus
+     the checkmark fading in, kept in sync with the hidden <select> by
+     ApiReferencePanel.astro's initLangDropdown(). */
+  .wd-api-lang-item.active {
+    color: var(--wd-primary);
+    background: color-mix(in srgb, var(--wd-primary) 10%, transparent);
+  }
+  .wd-api-lang-item.active .wd-api-lang-icon {
+    color: var(--wd-primary);
+  }
+  .wd-api-lang-item.active .wd-api-lang-check {
+    opacity: 1;
+  }
+</style>