@writedocs/generator 0.1.0

package/src/components/ApiReferencePanel.astro

@@ -0,0 +1,1754 @@
+---
+import fs from 'node:fs';
+import { Code } from 'astro:components';
+import {
+  exampleFromSchema,
+  emptyValueFromSchema,
+  primaryContentType,
+  buildCurlSnippet,
+  buildFetchSnippet,
+  buildPythonSnippet,
+  buildPhpSnippet,
+  buildGoSnippet,
+  buildJavaSnippet,
+  buildRubySnippet,
+  findOperationFile,
+  type OpenApiOperation,
+} from '../lib/openapi-render';
+import { loadDocsConfig, resolveCodeblockTheme } from '../lib/config';
+import ApiLangSelect from './ApiLangSelect.astro';
+
+interface Props {
+  operation: string;
+  contentDir: string;
+}
+const { operation, contentDir } = Astro.props as Props;
+
+// Shiki language id for each request-sample tab - <Code/> falls back to
+// "plaintext" for anything it doesn't recognize, so this only needs to
+// cover the ids actually used by `samples` below.
+const SNIPPET_LANG: Record<string, string> = {
+  curl: 'bash',
+  js: 'javascript',
+  py: 'python',
+  php: 'php',
+  go: 'go',
+  java: 'java',
+  ruby: 'ruby',
+};
+// Iconify id for each request-sample tab's language, shown in both of
+// this panel's language dropdowns (sidebar + Try-it modal) - see
+// ApiLangSelect.astro. mdi's language-* set (not simple-icons' brand
+// marks) since those render as plain currentColor monochrome glyphs,
+// matching every other inline icon on this page instead of introducing
+// a second, full-color icon style just for this one control.
+const LANG_ICON: Record<string, string> = {
+  curl: 'mdi:console',
+  js: 'mdi:language-javascript',
+  py: 'mdi:language-python',
+  php: 'mdi:language-php',
+  go: 'mdi:language-go',
+  java: 'mdi:language-java',
+  ruby: 'mdi:language-ruby',
+};
+// Same dual light/dark themes as the sitewide MDX code-fence config in
+// astro.config.mjs (writedocs.json's styles.codeblocks, via the shared
+// resolveCodeblockTheme() helper - <Code/> doesn't inherit
+// markdown.shikiConfig at all, so this needs its own copy of the same
+// resolved value), so the response/request panels here follow the
+// [data-theme] toggle exactly like article content does - see the
+// [data-theme='dark'] :global(.astro-code) override in BaseLayout.astro.
+const docsConfig = loadDocsConfig(contentDir);
+const SNIPPET_THEMES = resolveCodeblockTheme(docsConfig);
+// Whether the Send button in the Try-it modal routes its request through
+// writedocs' CORS proxy - see PROXY_BASE_URL in the <script> below.
+const proxyEnabled = docsConfig.api.proxy;
+
+const [method = '', urlPath = ''] = operation.trim().split(/\s+/, 2);
+const opFile = findOperationFile(contentDir, method, urlPath);
+const op: OpenApiOperation | null = opFile ? JSON.parse(fs.readFileSync(opFile, 'utf-8')) : null;
+
+// ApiPlayground.astro (rendered in the article column) already shows a
+// clear error when no matching operation is found - this panel just
+// quietly renders nothing in that case rather than duplicating it.
+const servers = op?.servers ?? [];
+const baseUrl = servers[0]?.url ?? '';
+const sampleBaseUrl = baseUrl || 'https://api.example.com';
+const pathParams = op?.parameters.filter((p) => p.in === 'path') ?? [];
+const queryParams = op?.parameters.filter((p) => p.in === 'query') ?? [];
+const headerParams = op?.parameters.filter((p) => p.in === 'header') ?? [];
+
+const requestContentType = op ? primaryContentType(op.requestBody?.content) : null;
+const requestSchema = requestContentType ? op?.requestBody?.content?.[requestContentType]?.schema : undefined;
+const requestExample = requestSchema ? JSON.stringify(exampleFromSchema(requestSchema), null, 2) : null;
+// What the Body textarea resets to when the reader picks "Default" in
+// the examples select (see requestExampleEntries below) - the same
+// field shape as requestExample above, but blank rather than filled
+// with synthesized placeholder values, so picking it clears prior
+// input without losing sight of what the body actually needs.
+const blankRequestExample = requestSchema ? JSON.stringify(emptyValueFromSchema(requestSchema), null, 2) : null;
+// OpenAPI's plural, *named* `examples` map on the request body's media
+// type object (distinct from the singular `example`/schema-derived
+// default above) - when a spec author provides one or more of these,
+// the modal gets a selector for them (see the "Example" <select> in the
+// modal head below) that swaps the Body textarea to that exact value on
+// selection. Scoped deliberately to the request body only, not
+// parameters - OpenAPI parameters can carry their own `examples` map
+// too, but there's no standard link between "this body example" and
+// "these parameter values" the way there sometimes conceptually is in a
+// hand-written doc, so auto-populating anything beyond the body from a
+// body example would be guessing at an association the spec itself
+// doesn't actually make.
+const requestExamples = requestContentType ? (op?.requestBody?.content?.[requestContentType]?.examples ?? {}) : {};
+const requestExampleEntries = Object.entries(requestExamples);
+// The modal's own header title - "the endpoint title, not a dropdown"
+// (an earlier version showed the raw path here instead, which reads
+// more like plumbing than a title a reader would recognize). Same
+// summary-with-a-fallback op.summary ?? "METHOD /path" that
+// generate-api-pages.js already uses for a generated stub page's own
+// <title>, so the modal's heading matches whatever the reader already
+// clicked "Try it" from.
+const modalTitle = op ? (op.summary ?? `${op.method} ${op.path}`) : '';
+
+const samples = op
+  ? [
+      { id: 'curl', label: 'cURL', code: buildCurlSnippet(op, sampleBaseUrl) },
+      { id: 'js', label: 'JavaScript', code: buildFetchSnippet(op, sampleBaseUrl) },
+      { id: 'py', label: 'Python', code: buildPythonSnippet(op, sampleBaseUrl) },
+      { id: 'php', label: 'PHP', code: buildPhpSnippet(op, sampleBaseUrl) },
+      { id: 'go', label: 'Go', code: buildGoSnippet(op, sampleBaseUrl) },
+      { id: 'java', label: 'Java', code: buildJavaSnippet(op, sampleBaseUrl) },
+      { id: 'ruby', label: 'Ruby', code: buildRubySnippet(op, sampleBaseUrl) },
+    ]
+  : [];
+// Same {id, label} shape samples already carries, plus the icon each
+// dropdown item shows - kept as its own array (not folded into samples
+// itself) since ApiLangSelect.astro only needs id/label/icon, not the
+// snippet code samples also carries.
+const langOptions = samples.map((s) => ({ id: s.id, label: s.label, icon: LANG_ICON[s.id] ?? 'mdi:code-tags' }));
+
+// Classifies a response status into the same ok/error tone the Try-it
+// modal's own live response status already uses (wd-api-status-ok/
+// -error, see the <script> below) - reused here for the status select's
+// leading color dot, so "green means success, red means an error status"
+// reads consistently whether it's a live request result or just a
+// static example being browsed. Anything outside 2xx/4xx/5xx (a 3xx
+// redirect, mainly) gets a neutral gray dot rather than being force-fit
+// into ok-or-error.
+function statusToneClass(status: string): string {
+  const code = parseInt(status, 10);
+  if (code >= 200 && code < 300) return 'wd-api-status-dot-ok';
+  if (code >= 400) return 'wd-api-status-dot-error';
+  return 'wd-api-status-dot-neutral';
+}
+
+const responseExamples = op
+  ? Object.entries(op.responses).map(([status, resp]) => {
+      const contentType = primaryContentType(resp.content);
+      const schema = contentType ? resp.content?.[contentType]?.schema : undefined;
+      return {
+        status,
+        tone: statusToneClass(status),
+        code: schema ? JSON.stringify(exampleFromSchema(schema), null, 2) : '(no body)',
+      };
+    })
+  : [];
+
+const paramsJson = JSON.stringify(op?.parameters ?? []);
+const securityJson = JSON.stringify(op?.security ?? []);
+---
+
+{op && (
+  <div class="wd-api-panel" data-api-panel data-method={op.method} data-path={op.path}>
+    <div class="wd-api-card">
+      <div class="wd-api-card-head">
+        <span class="wd-api-card-label">Request</span>
+        <div class="wd-api-card-actions">
+          <ApiLangSelect options={langOptions} rolePrefix="lang" ariaLabel="Language" />
+          <button type="button" class="wd-api-try-inline" data-role="open-modal">
+            Try <span class="wd-api-try-icon" aria-hidden="true">&#9656;</span>
+          </button>
+        </div>
+      </div>
+      <div class="wd-api-card-body">
+        {samples.map((s, i) => (
+          <Code
+            code={s.code}
+            lang={SNIPPET_LANG[s.id] ?? 'plaintext'}
+            themes={SNIPPET_THEMES}
+            class="wd-api-pre wd-api-pre-lines"
+            data-lang-panel={s.id}
+            style={`display: ${i === 0 ? 'block' : 'none'}`}
+          />
+        ))}
+        <button type="button" class="wd-api-code-copy-btn" data-role="copy-request" aria-label="Copy">⧉</button>
+      </div>
+    </div>
+
+    {responseExamples.length > 0 && (
+      <div class="wd-api-card">
+        <div class="wd-api-card-head">
+          <span class="wd-api-card-label">Response</span>
+          <div class="wd-api-card-actions">
+            <span class="wd-api-select-wrap wd-api-status-select-wrap">
+              <span class={`wd-api-status-dot ${responseExamples[0].tone}`} data-role="status-dot"></span>
+              <select class="wd-api-select" data-role="status-select" aria-label="Status">
+                {responseExamples.map((r) => <option value={r.status} data-tone={r.tone}>{r.status}</option>)}
+              </select>
+            </span>
+          </div>
+        </div>
+        <div class="wd-api-card-body">
+          {responseExamples.map((r, i) => (
+            <Code
+              code={r.code}
+              lang="json"
+              themes={SNIPPET_THEMES}
+              class="wd-api-pre wd-api-pre-lines"
+              data-status-panel={r.status}
+              style={`display: ${i === 0 ? 'block' : 'none'}`}
+            />
+          ))}
+          <button type="button" class="wd-api-code-copy-btn" data-role="copy-response" aria-label="Copy">⧉</button>
+        </div>
+      </div>
+    )}
+  </div>
+
+  <div class="wd-api-modal-overlay" data-role="modal-overlay" hidden>
+    <div class="wd-api-modal" role="dialog" aria-modal="true" aria-label="Try it">
+      <div class="wd-api-modal-head">
+        <div class="wd-api-modal-title">
+          <span class={`wd-api-method wd-api-method-${op.method.toLowerCase()}`}>{op.method}</span>
+          <span class="wd-api-modal-title-text">{modalTitle}</span>
+        </div>
+        {requestExampleEntries.length > 0 && (
+          <span class="wd-api-select-wrap wd-api-modal-example-wrap">
+            <select class="wd-api-select" data-role="example-select" aria-label="Example">
+              <option value="">Default</option>
+              {requestExampleEntries.map(([name, ex]) => (
+                <option value={name}>{ex.summary ?? name}</option>
+              ))}
+            </select>
+          </span>
+        )}
+        <div class="wd-api-modal-actions">
+          <button type="button" class="wd-api-send" data-role="send">Send <span aria-hidden="true">&#9656;</span></button>
+          <button type="button" class="wd-api-icon-btn" data-role="close-modal" aria-label="Close">&times;</button>
+        </div>
+      </div>
+      <div
+        class="wd-api-modal-body"
+        data-api-tryit
+        data-params={paramsJson}
+        data-security={securityJson}
+        data-examples={JSON.stringify(requestExamples)}
+        data-blank-body={blankRequestExample}
+        data-method={op.method}
+        data-path={op.path}
+        data-themes={JSON.stringify(SNIPPET_THEMES)}
+        data-proxy={proxyEnabled}
+      >
+        <div class="wd-api-modal-form">
+          <div class="wd-api-modal-url-bar">
+            <span class={`wd-api-method wd-api-method-${op.method.toLowerCase()}`}>{op.method}</span>
+            {servers.length > 1 ? (
+              // Multiple servers in the spec - a real <select>, not free
+              // text, since these are the only base URLs the operation
+              // actually supports. Each option's own label is the full
+              // concatenated URL (server + path), not just the server,
+              // so the control always reads as one complete request URL
+              // whether it's open or closed - never a bare host with the
+              // path implied elsewhere.
+              <select class="wd-api-url-select" data-role="base-url" aria-label="Server">
+                {servers.map((s) => (
+                  <option value={s.url}>{s.url}{op.path}</option>
+                ))}
+              </select>
+            ) : (
+              // Single server (the common case) - nothing to choose
+              // between, so this is plain non-editable text rather than
+              // an input the reader might mistake for something they
+              // need to fill in. data-value carries the base URL alone
+              // (the part collectLiveRequest() below needs) since the
+              // element's own text content is the base+path combined.
+              <span class="wd-api-url-full" data-role="base-url" data-value={baseUrl}>{baseUrl}{op.path}</span>
+            )}
+          </div>
+
+          {headerParams.length > 0 && (
+            <div class="wd-api-field-group">
+              <span class="wd-api-field-group-label">Header</span>
+              {headerParams.map((p) => (
+                <label class="wd-api-field">
+                  <span>{p.name}{p.required && <span class="wd-api-pill wd-api-pill-required">required</span>}</span>
+                  <input type="text" class="wd-api-input" data-role="param" data-param-name={p.name} data-param-in="header" />
+                </label>
+              ))}
+            </div>
+          )}
+
+          {pathParams.length > 0 && (
+            <div class="wd-api-field-group">
+              <span class="wd-api-field-group-label">Path</span>
+              {pathParams.map((p) => (
+                <label class="wd-api-field">
+                  <span>{p.name}{p.required && <span class="wd-api-pill wd-api-pill-required">required</span>}</span>
+                  <input
+                    type="text"
+                    class="wd-api-input"
+                    data-role="param"
+                    data-param-name={p.name}
+                    data-param-in="path"
+                    value={String(p.example ?? p.schema?.example ?? p.schema?.default ?? '')}
+                  />
+                </label>
+              ))}
+            </div>
+          )}
+
+          {queryParams.length > 0 && (
+            <div class="wd-api-field-group">
+              <span class="wd-api-field-group-label">Query</span>
+              {queryParams.map((p) => (
+                <label class="wd-api-field">
+                  <span>{p.name}{p.required && <span class="wd-api-pill wd-api-pill-required">required</span>}</span>
+                  <input
+                    type="text"
+                    class="wd-api-input"
+                    data-role="param"
+                    data-param-name={p.name}
+                    data-param-in="query"
+                    value={String(p.example ?? p.schema?.example ?? p.schema?.default ?? '')}
+                  />
+                </label>
+              ))}
+            </div>
+          )}
+
+          {requestSchema && (
+            <div class="wd-api-field-group">
+              <span class="wd-api-field-group-label">Body</span>
+              <textarea class="wd-api-textarea" data-role="body" rows="8">{requestExample}</textarea>
+            </div>
+          )}
+        </div>
+
+        <div class="wd-api-modal-preview">
+          {op.security.length > 0 && (
+            <div class="wd-api-card wd-api-auth-card">
+              <div class="wd-api-card-head">
+                <span class="wd-api-card-label">Authentication</span>
+              </div>
+              <div class="wd-api-card-body wd-api-auth-card-body">
+                {op.security.map((s) => {
+                  const label =
+                    s.type === 'http' && s.scheme === 'bearer' ? 'Bearer token' :
+                    s.type === 'http' && s.scheme === 'basic' ? 'Basic auth (user:pass)' :
+                    s.name;
+                  return (
+                    <label class="wd-api-auth-field">
+                      <input
+                        type="text"
+                        class="wd-api-input wd-api-auth-input"
+                        data-role="auth"
+                        data-auth-name={s.name}
+                        data-auth-type={s.type}
+                        data-auth-scheme={s.scheme ?? ''}
+                        data-auth-in={s.in ?? ''}
+                        placeholder={`<${label}>`}
+                      />
+                      <span class="wd-api-auth-icons">
+                        <span class="wd-api-auth-icon" title="Sent with your request, kept only in this browser">
+                          <svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true">
+                            <rect x="2.5" y="5.5" width="7" height="5" rx="1" stroke="currentColor" stroke-width="1.1" fill="none" />
+                            <path d="M4 5.5V4a2 2 0 0 1 4 0v1.5" stroke="currentColor" stroke-width="1.1" fill="none" stroke-linecap="round" />
+                          </svg>
+                        </span>
+                        <span class="wd-api-auth-icon" title={label}>
+                          <svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true">
+                            <circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.1" fill="none" />
+                            <text x="6" y="8.3" text-anchor="middle" font-size="6.5" fill="currentColor" stroke="none" font-family="sans-serif">?</text>
+                          </svg>
+                        </span>
+                      </span>
+                    </label>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+          <div class="wd-api-card">
+            <div class="wd-api-card-head">
+              <span class="wd-api-card-label">Request</span>
+              <ApiLangSelect options={langOptions} rolePrefix="modal-lang" ariaLabel="Language" />
+            </div>
+            <div class="wd-api-card-body">
+              {samples.map((s, i) => (
+                <pre
+                  class="wd-api-pre"
+                  data-modal-lang-panel={s.id}
+                  style={`display: ${i === 0 ? 'block' : 'none'}`}
+                ><code>{s.code}</code></pre>
+              ))}
+            </div>
+          </div>
+          <div class="wd-api-card">
+            <div class="wd-api-card-head">
+              <span class="wd-api-card-label">Response</span>
+            </div>
+            <div class="wd-api-card-body">
+              <div class="wd-api-response-status" data-role="response-status"></div>
+              <pre class="wd-api-pre" data-role="response-body"><code></code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+)}
+
+<style is:global>
+  /* Widens the shared .wd-toc-col (defined in BaseLayout.astro) only on
+     pages that actually render this panel into it, rather than adding a
+     prop BaseLayout has to thread through just for this - :has() lets
+     the override live entirely in this component instead. */
+  .wd-toc-col:has(.wd-api-panel) {
+    width: 380px;
+  }
+  /* top/max-height match Sidebar.astro/TableOfContents.astro's own
+     sticky columns - see Sidebar.astro's comment on --wd-topbar-offset
+     (src/scripts/topbar-offset.ts), the topbar's real measured height. */
+  .wd-api-panel {
+    position: sticky;
+    top: var(--wd-topbar-offset, 5rem);
+    padding: 1.5rem 1.5rem 1.5rem 1rem;
+    max-height: calc(100vh - var(--wd-topbar-offset, 5rem));
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .wd-api-card {
+    background: var(--wd-surface);
+    border: 1px solid var(--wd-border);
+    border-radius: 0.75rem;
+    /* Soft elevation - same scale TopBar/MobileMenu's own dropdown panel
+       (dropdown.css's .wd-dropdown-menu) already uses for a resting,
+       non-modal floating panel - what turns this from a flat bordered
+       box into a card that visually lifts off the page background,
+       matching the reference design's own drop shadow around both
+       cards. */
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  }
+  /* Sidebar-only (the Try-it modal reuses .wd-api-card too, inside
+     .wd-api-modal-preview - a plain scrolling column with no height cap
+     of its own, so it never needs any of this). .wd-api-panel is a flex
+     column with its own bounded max-height + overflow-y: auto (see that
+     rule's comment) - by default a flex item won't shrink below its own
+     content's natural height, so without help here, two cards taller
+     than the panel just push the *panel* into needing to scroll as a
+     whole (previously "fixed" by giving cards flex-shrink: 0, forcing
+     every code block to keep its own fixed max-height regardless of how
+     little room was actually left - the panel scrolling, not the code
+     blocks resizing to fit it, which is backwards from what a reader
+     actually wants: both Request and Response staying visible at once,
+     each shrinking to fit, only truly overflowing (this rule's own
+     overflow-y: auto, still very much intentional as a last resort) once
+     even a sensible minimum won't fit both.
+     flex: 0 1 auto (grow: 0, shrink: 1, basis: auto) is what makes a
+     card sit at its own natural size when there's room, and only shrink
+     - never stretch - when there isn't; min-height: 0 lifts the default
+     "never shrink below natural content height" floor so that shrink
+     can actually happen. The genuine floor lives one level down, on
+     .wd-api-card-head (never shrinks at all - the RESPONSE label,
+     language dropdown etc. always stay fully visible) and
+     .wd-api-card-body (shrinks, but never below a legible minimum - see
+     that rule's own comment).
+
+     Two things had to be true at once here, and getting only one right
+     broke the other (both tried and measured against a real headless
+     render before landing on this):
+
+     1) min-height: 0 is required for the card to shrink at all below its
+        natural content height - flex items default to min-height: auto,
+        which without this override refuses to shrink a flex *container*
+        item below its own children's natural (max-content) size. Tried
+        leaving this at the default `auto` instead, on the theory that
+        auto would resolve to the "real" content-based minimum (head's
+        natural height + body's own 8rem floor, ~11rem) - measured
+        against a real build instead of assumed, and it doesn't: Chromium
+        resolves a flex container's automatic minimum size to something
+        much closer to its full natural (unshrunk) content height here,
+        not the smaller nested-floor value - so `auto` just pinned every
+        card at full height regardless of available space, the opposite
+        of what this whole redesign is for.
+
+     2) But min-height: 0 alone throws away the card's *only* protection
+        against being shrunk smaller than its own children can actually
+        render at - .wd-api-panel's own flex-shrink distributes the
+        deficit across both cards using each card's min-height as its
+        floor, with no visibility into what's two levels further down
+        (card-head's flex-shrink: 0, card-body's own min-height: 8rem);
+        min-height: 0 tells that outer algorithm "I have no floor," so it
+        shrinks the card's own box smaller than head+body's genuine
+        minimum, and - since a shrunk-too-small flex item doesn't clip
+        its own overflowing children by default - the code block renders
+        at its real 8rem floor anyway, just spilling past the card's own
+        (too-small) box into the space belowe reserved for the next
+        sibling card. Measured this directly: at a short enough viewport,
+        card height read smaller than head-height + body-height combined.
+
+     The explicit calc() below is what actually fixes both at once: an
+     honest floor (safely above the ~2.95rem this card-head design
+     measures at across themes, rounded up to 3.5rem for headroom) plus
+     card-body's own real 8rem floor, so .wd-api-panel's shrink algorithm
+     now sees the true minimum instead of either extreme. */
+  .wd-api-panel .wd-api-card {
+    display: flex;
+    flex-direction: column;
+    flex: 0 1 auto;
+    min-height: calc(3.5rem + 8rem);
+  }
+  .wd-api-panel .wd-api-card-head {
+    flex-shrink: 0;
+  }
+  .wd-api-card-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.65rem 0.85rem;
+    border-bottom: 1px solid var(--wd-border);
+  }
+  .wd-api-card-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--wd-text-muted);
+  }
+  .wd-api-card-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  /* Distinct tinted card so Authentication reads as its own concern
+     sitting above Request/Response, not a third copy of the same
+     neutral-surface card - color-mix over --wd-primary matches the
+     tinted-background convention used elsewhere (NavTree.astro's hover
+     state, the status dot colors below). */
+  .wd-api-auth-card {
+    background: color-mix(in srgb, var(--wd-primary) 6%, var(--wd-surface));
+    border-color: color-mix(in srgb, var(--wd-primary) 18%, var(--wd-border));
+  }
+  .wd-api-auth-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    padding: 0.85rem;
+  }
+  .wd-api-auth-field {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .wd-api-auth-input {
+    flex: 1;
+    min-width: 0;
+  }
+  .wd-api-auth-icons {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    flex-shrink: 0;
+    color: var(--wd-text-muted);
+  }
+  .wd-api-auth-icon {
+    display: inline-flex;
+  }
+  /* Wraps the remaining plain <select> controls on this panel - the
+     status select-with-dot (Response), the Try-it modal's Example picker,
+     and its multi-server base-URL select - in the same rounded-pill
+     chrome as ApiLangSelect.astro's own trigger button, so every control
+     in this family still reads as one kind of thing even though the
+     language pickers themselves moved to that separate icon+label+
+     checkmark dropdown rather than a native <select>. The wrapper owns
+     border/radius/background; the <select> inside is stripped down to
+     borderless/transparent (below) so it doesn't paint a second,
+     conflicting box on top of its own wrapper's. */
+  .wd-api-select-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.2rem 0.55rem;
+    border-radius: 999px;
+    border: 1px solid var(--wd-border);
+    background: var(--wd-background);
+  }
+  .wd-api-select {
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    font-size: 0.75rem;
+    font-family: inherit;
+    color: var(--wd-text);
+    cursor: pointer;
+    /* appearance: none + this file's own chevron svg (data-uri, same
+       stroke/curve as Expandable.astro's/NavTree.astro's own chevrons -
+       one visual "this is a dropdown" affordance across the whole site,
+       not a second one improvised just for this control) replaces each
+       browser's own inconsistently-styled native arrow, so the pill
+       reads the same in Chrome/Firefox/Safari alike. */
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%23888' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right center;
+    padding-right: 1rem;
+  }
+  /* The dropdown list a native <select> opens is a separate,
+     browser-rendered popup that the rules above (all scoped to the
+     closed box) can't reach - left alone it renders with the OS/browser
+     default light popup (white background, near-black text) regardless
+     of the site's dark theme, which is exactly the jarring flash of
+     light seen against everything else here. Chrome/Firefox/Edge do
+     respect background-color/color set directly on <option>, so this
+     is the most that can be done without replacing the native <select>
+     with a fully custom listbox - Safari has weaker support and falls
+     back to its own default popup, but degrades no worse than before. */
+  .wd-api-select option,
+  .wd-api-url-select option {
+    background-color: var(--wd-surface);
+    color: var(--wd-text);
+  }
+  .wd-api-status-select-wrap {
+    padding-left: 0.45rem;
+  }
+  .wd-api-status-dot {
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 999px;
+    background: var(--wd-text-muted);
+  }
+  .wd-api-status-dot-ok {
+    background: #16a34a;
+  }
+  .wd-api-status-dot-error {
+    background: #dc2626;
+  }
+  .wd-api-status-dot-neutral {
+    background: var(--wd-text-muted);
+  }
+  /* The "Try it" button used to be a separate full-width block below the
+     card; moved inline into the Request card's own header, next to the
+     language select, matching the reference design - a compact pill
+     button rather than a full-width bar. */
+  .wd-api-try-inline {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.3rem 0.75rem;
+    border-radius: 0.5rem;
+    border: none;
+    background: var(--wd-primary);
+    color: #fff;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .wd-api-try-icon {
+    font-size: 0.65rem;
+  }
+  .wd-api-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.8rem;
+    height: 1.8rem;
+    border-radius: 0.4rem;
+    border: none;
+    background: none;
+    color: var(--wd-text-muted);
+    cursor: pointer;
+    font-size: 0.95rem;
+  }
+  .wd-api-icon-btn:hover {
+    background: var(--wd-background);
+    color: var(--wd-text);
+  }
+  /* Clips its own content (a code block's baked-in Shiki background,
+     mainly) to the card's bottom corners - moved here from .wd-api-card
+     itself so that clip only ever applies to the body, not the head
+     above it, where ApiLangSelect.astro's dropdown menu now lives.
+     overflow: hidden directly on .wd-api-card clipped that menu too
+     whenever it opened past the card's own edge (visible on any
+     narrower/shorter card, e.g. a short request sample) - the head
+     never had a distinct background box of its own needing this same
+     clip, so it doesn't need overflow: hidden at all. */
+  .wd-api-card-body {
+    position: relative;
+    padding: 0.75rem;
+    overflow: hidden;
+    border-radius: 0 0 0.75rem 0.75rem;
+  }
+  /* Floating overlay on top of the code block itself, not a header
+     button - matches the reference design, where the copy affordance
+     sits at the top-right corner of the code area rather than beside
+     the language/status select. Always visible here (unlike
+     .wd-code-copy-btn's hover-reveal in [...slug].astro, the same idea
+     applied to prose code fences) - this is a persistent reference
+     panel a reader is actively using, not flowing article content where
+     a visible-on-hover control is less visually noisy. */
+  .wd-api-code-copy-btn {
+    position: absolute;
+    top: 0.65rem;
+    right: 0.65rem;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.7rem;
+    height: 1.7rem;
+    padding: 0;
+    border-radius: 0.4rem;
+    border: 1px solid var(--wd-border);
+    background: var(--wd-surface);
+    color: var(--wd-text-muted);
+    font-size: 0.85rem;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .wd-api-code-copy-btn:hover {
+    color: var(--wd-text);
+    background: var(--wd-background);
+  }
+  /* Line-number gutter - the exact same CSS-counter approach
+     .wd-code-lines uses for a fenced (```) content code block
+     ([...slug].astro's own comment on that rule explains the mechanism)
+     - Astro's <Code/> (used for these sidebar samples) produces the
+     identical per-line `.line` span structure Shiki's markdown pipeline
+     does, so the same counter trick applies unchanged. Unconditional
+     here (no opt-in class/meta-flag needed, unlike article content) -
+     every request/response sample in this panel always shows line
+     numbers, matching the reference design. */
+  .wd-api-pre-lines code {
+    counter-reset: wd-api-code-line;
+  }
+  .wd-api-pre-lines .line {
+    counter-increment: wd-api-code-line;
+  }
+  .wd-api-pre-lines .line::before {
+    content: counter(wd-api-code-line);
+    display: inline-block;
+    width: 1.6em;
+    margin-right: 1em;
+    text-align: right;
+    color: var(--wd-text-muted);
+    user-select: none;
+  }
+  .wd-api-card-body .wd-api-pre {
+    border: none;
+    background: none;
+    padding: 0;
+  }
+  /* max-height + overflow-y (on top of the pre-existing overflow-x, for
+     a long single line like a curl command's own URL) is what makes a
+     long code block scroll *internally* instead of just growing the
+     card to fit it - without this, a request/response body long enough
+     to need it (the kitchen-sink POST .../variants example this was
+     caught against, comparing its 201/400/404 response bodies of very
+     different lengths) just kept growing the Request card taller every
+     time more of it needed to render, which - since both cards share
+     one sticky, fixed-max-height panel (.wd-api-panel, see its own
+     comment) - pushed the Response card further down and further out of
+     the panel's own bounded height each time, looking like it was
+     "getting more hidden" the more content the Request card grew to
+     fit. Bounding every .wd-api-pre's own height here fixes both at
+     once: the block itself gets a real scrollbar for content past this
+     height, and neither card can grow tall enough to squeeze its sibling
+     out of view anymore. Applies to every .wd-api-pre in this file
+     uniformly - the sidebar's Request/Response cards and the Try-it
+     modal's own preview panels (request samples + the live response
+     body) all share this one class, so one rule covers all of them. */
+  .wd-api-pre {
+    overflow-x: auto;
+    overflow-y: auto;
+    max-height: 20rem;
+    font-size: 0.8rem;
+    margin: 0;
+  }
+  .wd-api-pre code {
+    background: none;
+    padding: 0;
+    white-space: pre;
+  }
+  /* The sidebar request/response samples are rendered via astro:components'
+     <Code/> (see the frontmatter) so they get real Shiki highlighting
+     that follows the site's [data-theme] toggle. Earlier this forced
+     the baked-in background transparent to blend into .wd-api-card's
+     own surface color - but that strips a theme's background away
+     while keeping its foreground, which only looks right for themes
+     whose foreground happens to already have enough contrast against
+     the card's own (unrelated) surface color. A regular MDX fenced
+     code block never does this (see .wd-article pre.astro-code in
+     [...slug].astro) - it always keeps the theme's own background+
+     foreground pairing intact, which is what makes *any* Shiki theme
+     name safe to use on either side of writedocs.json's styles.codeblocks.
+     Matching that here instead: the card-body's own padding moves onto
+     the codeblock itself, so the theme's real background fills the
+     card edge-to-edge (clipped to its rounded corners by .wd-api-card's
+     own overflow: hidden) exactly like a regular content codeblock,
+     rather than floating disconnected from it. */
+  .wd-api-panel .wd-api-card-body {
+    padding: 0;
+    /* The genuine floor .wd-api-panel .wd-api-card's own comment refers
+       to: this can shrink (flex: 1 1 auto, min-height overridden down
+       from its own multi-rem default below) as the panel runs out of
+       room, but never past ~8rem - enough for a handful of code lines to
+       stay readable. display: flex here (not the .astro-code child
+       directly) is what lets that child claim 100% of whatever height
+       this ends up with via its own flex: 1 below, in place of the fixed
+       max-height: 20rem every other .wd-api-pre in this file still uses
+       (Try-it modal's own preview panels, .wd-api-pre's own comment) -
+       those sit in .wd-api-modal-preview, a plain scrolling column with
+       no height cap of its own, so they never hit this squeeze at all. */
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 8rem;
+  }
+  .wd-api-panel .wd-api-card-body .astro-code {
+    margin: 0;
+    padding: 0.75rem 0.9rem;
+    border-radius: 0;
+    /* Overrides .wd-api-pre's own max-height: 20rem (that rule's own
+       comment) - here the code block fills whatever height its
+       flex-column parent above actually has, shrinking or growing with
+       it, rather than sitting at a fixed height regardless of how much
+       (or little) room is actually available. min-height: 0 lets it
+       shrink freely - the real floor is the parent's own min-height:
+       8rem above, not this element's. */
+    flex: 1 1 auto;
+    min-height: 0;
+    max-height: none;
+  }
+
+  .wd-api-card .wd-api-card-body .shiki {
+    border-radius: 0;
+  }
+  /* The modal's request preview starts as a plain <pre> (see the
+     frontmatter) and only gains the .astro-code class once
+     initApiPanel()'s renderModalPanel() swaps in real Shiki output -
+     lazily, the first time the modal is opened (see loadHighlighter()
+     in the <script> below). :has() lets the same edge-to-edge treatment
+     as the sidebar above apply the instant that happens, without any
+     extra JS to toggle a class on the card-body itself. Before that,
+     the plain-text panel keeps the ordinary blended-into-the-card look
+     via .wd-api-card-body .wd-api-pre above. */
+  .wd-api-modal-preview .wd-api-card-body:has(.astro-code) {
+    padding: 0;
+  }
+  .wd-api-modal-preview .wd-api-card-body .astro-code {
+    margin: 0;
+    padding: 0.75rem 0.9rem;
+  }
+
+  .wd-api-modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: rgba(15, 23, 42, 0.5);
+  }
+  .wd-api-modal-overlay[hidden] { display: none; }
+  .wd-api-modal {
+    width: 100%;
+    max-width: min(96vw, 1440px);
+    max-height: 85vh;
+    display: flex;
+    flex-direction: column;
+    background: var(--wd-background);
+    border: 1px solid var(--wd-border);
+    border-radius: 0.75rem;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+  }
+  .wd-api-modal-head {
+    display: flex;
+    align-items: center;
+    /* Not space-between: the title stays flush left and everything
+       else (examples select, then Send/Close) is pushed flush right by
+       .wd-api-modal-example-wrap's margin-left: auto below - so a spec
+       with no examples still ends up with title-left/actions-right,
+       the same layout space-between gave before this component had a
+       middle item to place. */
+    justify-content: flex-start;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--wd-border);
+    flex-shrink: 0;
+  }
+  .wd-api-modal-title {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    font-size: 0.95rem;
+  }
+  .wd-api-modal-title-text {
+    font-weight: 600;
+    color: var(--wd-text);
+  }
+  /* Only rendered when the operation's request body actually carries a
+     named `examples` map (see requestExampleEntries above) - sits
+     between the title and the Send/Close actions when present. */
+  .wd-api-modal-example-wrap {
+    flex-shrink: 0;
+  }
+  .wd-api-modal-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    /* Pushes just this element flush to the right edge, leaving the
+       title (and the examples select right after it, when present)
+       packed on the left per the mockup - works whether or not the
+       examples select is rendered, so a spec without any `examples`
+       still lands title-left/actions-right same as before this select
+       existed. */
+    margin-left: auto;
+  }
+  .wd-api-send {
+    padding: 0.5rem 1rem;
+    border-radius: 0.4rem;
+    border: none;
+    background: var(--wd-primary);
+    color: #fff;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .wd-api-send:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+  .wd-api-modal-body {
+    display: grid;
+    /* Form (params/body inputs) gets roughly twice the preview
+       column's width - the form has more to lay out (header/path/
+       query groups, the body textarea, potentially long field lists),
+       while the preview is just two-three fixed-height cards. */
+    grid-template-columns: 2fr 1fr;
+    gap: 0;
+    overflow-y: auto;
+  }
+  .wd-api-modal-form {
+    padding: 1.25rem;
+    border-right: 1px solid var(--wd-border);
+    overflow-y: auto;
+  }
+  .wd-api-modal-preview {
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    overflow-y: auto;
+    /* No background of its own - inherits .wd-api-modal's background,
+       same as .wd-api-modal-form on the other side of the divider, so
+       the two columns read as one surface. The Authentication/Request/
+       Response cards inside still pop off it via their own
+       background: var(--wd-surface) (.wd-api-card below). */
+  }
+  @media (max-width: 760px) {
+    .wd-api-modal-body {
+      grid-template-columns: 1fr;
+    }
+    .wd-api-modal-form {
+      border-right: none;
+      border-bottom: 1px solid var(--wd-border);
+    }
+  }
+  .wd-api-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    margin-bottom: 0.75rem;
+    font-size: 0.85rem;
+  }
+  .wd-api-field > span:first-child {
+    color: var(--wd-text-muted);
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  .wd-api-field-group {
+    margin-bottom: 1.1rem;
+  }
+  /* Replaces the old standalone "Base URL" labeled field - a single
+     method+URL bar where the URL itself is always one element showing
+     the complete request URL (server + path together), never an
+     editable text input split from a separately-boxed path. With one
+     server in the spec it's plain non-editable text (.wd-api-url-full);
+     with more than one, a real <select> (.wd-api-url-select) whose
+     every option's own label is already the full concatenated URL, so
+     the control still reads as one complete URL whether it's open or
+     closed - see the markup above for which one renders. */
+  .wd-api-modal-url-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.5rem;
+    margin-bottom: 1.1rem;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.5rem;
+    background: var(--wd-background);
+  }
+  .wd-api-url-full {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    color: var(--wd-text);
+    font-size: 0.85rem;
+    font-family: monospace;
+  }
+  .wd-api-url-select {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    background: none;
+    padding: 0.2rem 1rem 0.2rem 0;
+    color: var(--wd-text);
+    font-size: 0.85rem;
+    font-family: monospace;
+    /* Same custom-chevron treatment as .wd-api-select below - unlike
+       that one this isn't wrapped in a pill, since it needs to read as
+       plain inline text flowing right after the method badge, not a
+       separate control floating in the bar. */
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%23888' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right center;
+    cursor: pointer;
+  }
+  .wd-api-url-select:focus {
+    outline: none;
+  }
+  .wd-api-field-group-label {
+    display: block;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--wd-text);
+    margin-bottom: 0.6rem;
+    padding-bottom: 0.4rem;
+    border-bottom: 1px solid var(--wd-border);
+  }
+  .wd-api-input,
+  .wd-api-textarea {
+    width: 100%;
+    padding: 0.5rem 0.65rem;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.4rem;
+    background: var(--wd-background);
+    color: var(--wd-text);
+    font-size: 0.85rem;
+    font-family: inherit;
+  }
+  .wd-api-textarea {
+    font-family: monospace;
+    resize: vertical;
+  }
+  .wd-api-response-status {
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--wd-text-muted);
+  }
+  .wd-api-response-status.wd-api-status-ok { color: #16a34a; }
+  .wd-api-response-status.wd-api-status-error { color: #dc2626; }
+  @media (max-width: 1150px) {
+    .wd-api-panel { display: none; }
+  }
+</style>
+
+<script>
+  // Shiki's WASM engine, exactly the 3 grammars the Try-it modal needs,
+  // and the 2 writedocs.json styles.codeblocks themes are fetched lazily, only
+  // once the modal is actually opened - not on every operation page load
+  // - so the live-updating preview can use *real* Shiki highlighting
+  // (matching every other codeblock on the site, see ApiReferencePanel's
+  // own CSS comment on this) without adding that weight to pages nobody
+  // ever opens Try-it on. Declared at true module scope (outside
+  // initApiPanel) so it's fetched once and reused across astro:page-load
+  // navigations between operation pages - they all share the same
+  // writedocs.json styles.codeblocks, so one cached highlighter is always
+  // correct regardless of which operation is currently active.
+  //
+  // Deliberately the fine-grained core API (shiki/core +
+  // shiki/engine/oniguruma + the individual @shikijs/langs/* packages)
+  // rather than shiki/bundle/web's own createHighlighter(): that
+  // convenience wrapper's own docs note "importing this function will
+  // bundle all languages and themes" - true even though each is only
+  // *fetched* on demand, Vite still has to code-split and ship every
+  // bundled language (100+, several hundred KB each for ts/tsx/jsx/...)
+  // as its own chunk, just in case. Themes still come from shiki/themes'
+  // full by-name lookup table (unavoidable - which theme is needed isn't
+  // known until writedocs.json is read, so it can't be a static import like
+  // the 3 languages below can), but that alone is a much smaller tax
+  // than the language side would have been.
+  interface ShikiHighlighter {
+    codeToHtml(code: string, options: { lang: string; themes: { light: string; dark: string } }): string;
+  }
+  let wdHighlighter: ShikiHighlighter | null = null;
+  let wdHighlighterPromise: Promise<ShikiHighlighter> | null = null;
+  const MODAL_LANG_TO_SHIKI: Record<string, string> = {
+    curl: 'bash',
+    js: 'javascript',
+    py: 'python',
+    php: 'php',
+    go: 'go',
+    java: 'java',
+    ruby: 'ruby',
+  };
+  // cors-anywhere-style proxy: forwards GET/POST/etc to the URL appended
+  // after the base (protocol required), preserving method/headers/body,
+  // and returns CORS headers so the browser fetch() below succeeds even
+  // when the target API itself doesn't send Access-Control-Allow-Origin.
+  // Toggle via writedocs.json's `api.proxy` (see data-proxy on the tryit
+  // section below); the displayed curl/fetch/python snippets deliberately
+  // keep showing the real, non-proxied URL - only this in-browser request
+  // actually routes through the proxy.
+  const PROXY_BASE_URL = 'https://proxy.writechoice.io/';
+  function loadHighlighter(themes: { light: string; dark: string }): Promise<ShikiHighlighter> {
+    if (!wdHighlighterPromise) {
+      wdHighlighterPromise = Promise.all([
+        import('shiki/core'),
+        import('shiki/engine/oniguruma'),
+        import('shiki/themes'),
+        import('@shikijs/langs/bash'),
+        import('@shikijs/langs/javascript'),
+        import('@shikijs/langs/python'),
+        import('@shikijs/langs/php'),
+        import('@shikijs/langs/go'),
+        import('@shikijs/langs/java'),
+        import('@shikijs/langs/ruby'),
+      ]).then(([core, engine, themeTable, bash, javascript, python, php, go, java, ruby]) =>
+        core.createHighlighterCore({
+          langs: [bash.default, javascript.default, python.default, php.default, go.default, java.default, ruby.default],
+          themes: [themeTable.bundledThemes[themes.light](), themeTable.bundledThemes[themes.dark]()],
+          engine: engine.createOnigurumaEngine(import('shiki/wasm')),
+        })
+      ) as Promise<ShikiHighlighter>;
+    }
+    return wdHighlighterPromise;
+  }
+  // Same github-light/github-dark fallback as resolveCodeblockTheme()
+  // (src/lib/config.ts) - kept as a literal default here rather than
+  // imported, since this <script> runs in the browser and can't reach
+  // back into server-only modules; the data-themes JSON below is
+  // already resolveCodeblockTheme()'s own output, so this only matters
+  // if that attribute is ever missing or malformed.
+  function parseThemes(raw: string | undefined): { light: string; dark: string } {
+    try {
+      const parsed = raw ? JSON.parse(raw) : {};
+      return { light: parsed.light ?? 'github-light', dark: parsed.dark ?? 'github-dark' };
+    } catch {
+      return { light: 'github-light', dark: 'github-dark' };
+    }
+  }
+
+  // Drives the hidden <select data-role="{rolePrefix}-select"> rendered
+  // by ApiLangSelect.astro from a click on its custom icon+label+
+  // checkmark dropdown - open/close/outside-click/Escape all come free
+  // from the site's shared initDropdowns() (already wired globally
+  // against `document` by TopBar.astro/MobileMenu.astro), so this only
+  // needs to: swap the trigger's icon/label to match the pick (by
+  // cloning the clicked item's own already-rendered <svg> rather than
+  // this script knowing any Iconify id itself), move which item shows
+  // .active, and set+dispatch 'change' on the hidden select so every
+  // listener already written against lang-select/modal-lang-select
+  // below (panel-toggle, live-preview refresh) keeps working unchanged.
+  function initLangDropdown(scope: ParentNode, rolePrefix: string) {
+    const nativeSelect = scope.querySelector<HTMLSelectElement>(`[data-role="${rolePrefix}-select"]`);
+    const trigger = scope.querySelector<HTMLElement>(`[data-role="${rolePrefix}-trigger"]`);
+    // A distinct dataset key from plain wdInit - the trigger is also a
+    // .wd-dropdown-trigger, and initDropdowns() (dropdowns.ts, wired
+    // globally by TopBar.astro/MobileMenu.astro) already claims
+    // trigger.dataset.wdInit as its own "have I wired open/close yet"
+    // guard on this exact element. Sharing that key meant whichever of
+    // the two ran first silently blocked the other from ever attaching -
+    // in practice initDropdowns() always won the race, so the item click
+    // listeners below were never being attached at all.
+    if (!nativeSelect || !trigger || trigger.dataset.wdLangInit) return;
+    trigger.dataset.wdLangInit = 'true';
+    const items = Array.from(scope.querySelectorAll<HTMLButtonElement>(`[data-role="${rolePrefix}-item"]`));
+    items.forEach((item) => {
+      item.addEventListener('click', () => {
+        items.forEach((it) => it.classList.toggle('active', it === item));
+        const icon = item.querySelector('.wd-api-lang-icon');
+        const triggerIcon = trigger.querySelector('.wd-api-lang-icon');
+        if (icon && triggerIcon) triggerIcon.replaceWith(icon.cloneNode(true));
+        const label = item.querySelector('.wd-api-lang-label')?.textContent ?? '';
+        const triggerLabel = trigger.querySelector('.wd-api-lang-label');
+        if (triggerLabel) triggerLabel.textContent = label;
+        nativeSelect.value = item.dataset.value ?? '';
+        nativeSelect.dispatchEvent(new Event('change'));
+      });
+    });
+  }
+
+  function initApiPanel(root: ParentNode) {
+    // Set once the tryit section below wires it up - there's exactly one
+    // Try-it modal per operation page, so a single shared reference (like
+    // the existing `document.querySelector('[data-role="send"]')` a few
+    // lines down, which makes the same single-instance assumption) is all
+    // that's needed for the open-modal handler in the loop below to
+    // trigger a re-render once Shiki finishes loading.
+    let refreshModalPreview: (() => void) | null = null;
+
+    root.querySelectorAll<HTMLElement>('[data-api-panel]').forEach((panel) => {
+      if (panel.dataset.wdInit) return;
+      panel.dataset.wdInit = 'true';
+
+      const langSelect = panel.querySelector<HTMLSelectElement>('[data-role="lang-select"]');
+      const langPanels = Array.from(panel.querySelectorAll<HTMLElement>('[data-lang-panel]'));
+      langSelect?.addEventListener('change', () => {
+        langPanels.forEach((p) => {
+          p.style.display = p.dataset.langPanel === langSelect.value ? 'block' : 'none';
+        });
+      });
+      initLangDropdown(panel, 'lang');
+
+      const statusSelect = panel.querySelector<HTMLSelectElement>('[data-role="status-select"]');
+      const statusPanels = Array.from(panel.querySelectorAll<HTMLElement>('[data-status-panel]'));
+      const statusDot = panel.querySelector<HTMLElement>('[data-role="status-dot"]');
+      statusSelect?.addEventListener('change', () => {
+        statusPanels.forEach((p) => {
+          p.style.display = p.dataset.statusPanel === statusSelect.value ? 'block' : 'none';
+        });
+        // Keeps the leading color dot (green/red/gray, set server-side
+        // from statusToneClass() in the frontmatter - see this file's
+        // own comment there) in sync with whichever status the reader
+        // has switched to - each <option> carries its own tone as a
+        // data attribute for exactly this, since the dot itself isn't
+        // part of the native <select> box the browser renders.
+        const tone = statusSelect.selectedOptions[0]?.dataset.tone;
+        if (statusDot && tone) statusDot.className = `wd-api-status-dot ${tone}`;
+      });
+
+      panel.querySelector('[data-role="copy-request"]')?.addEventListener('click', () => {
+        const visible = langPanels.find((p) => p.style.display !== 'none');
+        if (visible) navigator.clipboard?.writeText(visible.textContent ?? '');
+      });
+      panel.querySelector('[data-role="copy-response"]')?.addEventListener('click', () => {
+        const visible = statusPanels.find((p) => p.style.display !== 'none');
+        if (visible) navigator.clipboard?.writeText(visible.textContent ?? '');
+      });
+
+      const overlay = document.querySelector<HTMLElement>('[data-role="modal-overlay"]');
+      panel.querySelector('[data-role="open-modal"]')?.addEventListener('click', () => {
+        if (overlay) {
+          overlay.hidden = false;
+          document.body.style.overflow = 'hidden';
+        }
+        if (!wdHighlighter) {
+          const tryitSection = document.querySelector<HTMLElement>('[data-api-tryit]');
+          const themes = parseThemes(tryitSection?.dataset.themes);
+          loadHighlighter(themes).then((h) => {
+            wdHighlighter = h;
+            refreshModalPreview?.();
+          });
+        }
+      });
+    });
+
+    const overlay = root.querySelector<HTMLElement>('[data-role="modal-overlay"]');
+    if (overlay && !overlay.dataset.wdInit) {
+      overlay.dataset.wdInit = 'true';
+      const close = () => {
+        overlay.hidden = true;
+        document.body.style.overflow = '';
+      };
+      overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) close();
+      });
+      overlay.querySelector('[data-role="close-modal"]')?.addEventListener('click', close);
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && !overlay.hidden) close();
+      });
+
+      const modalLangSelect = overlay.querySelector<HTMLSelectElement>('[data-role="modal-lang-select"]');
+      const modalLangPanels = Array.from(overlay.querySelectorAll<HTMLElement>('[data-modal-lang-panel]'));
+      modalLangSelect?.addEventListener('change', () => {
+        modalLangPanels.forEach((p) => {
+          p.style.display = p.dataset.modalLangPanel === modalLangSelect.value ? 'block' : 'none';
+        });
+      });
+      initLangDropdown(overlay, 'modal-lang');
+    }
+
+    root.querySelectorAll<HTMLElement>('[data-api-tryit]').forEach((section) => {
+      if (section.dataset.wdInit) return;
+      section.dataset.wdInit = 'true';
+
+      const method = section.dataset.method ?? 'GET';
+      const opPath = section.dataset.path ?? '';
+      const themes = parseThemes(section.dataset.themes);
+      const proxyEnabled = section.dataset.proxy === 'true';
+      // Either a plain <span data-value="..."> (single-server spec) or a
+      // <select> (multiple servers) - see the markup comment above.
+      // getBaseUrl() normalizes the two into one string, whichever
+      // element actually rendered.
+      const baseUrlEl = section.querySelector<HTMLElement>('[data-role="base-url"]');
+      function getBaseUrl(): string {
+        if (!baseUrlEl) return '';
+        if (baseUrlEl instanceof HTMLSelectElement) return baseUrlEl.value;
+        return baseUrlEl.dataset.value ?? '';
+      }
+      const authInputs = Array.from(section.querySelectorAll<HTMLInputElement>('[data-role="auth"]'));
+      const paramInputs = Array.from(section.querySelectorAll<HTMLInputElement>('[data-role="param"]'));
+      const bodyInput = section.querySelector<HTMLTextAreaElement>('[data-role="body"]');
+      const sendBtn = document.querySelector<HTMLButtonElement>('[data-role="send"]');
+      const responseStatusEl = section.querySelector<HTMLElement>('[data-role="response-status"]');
+      const responseBodyEl = section.querySelector<HTMLElement>('[data-role="response-body"] code');
+      const modalLangPanels = Array.from(section.querySelectorAll<HTMLElement>('[data-modal-lang-panel]'));
+
+      authInputs.forEach((input) => {
+        const name = input.dataset.authName ?? '';
+        try {
+          const saved = localStorage.getItem(`wd-api-auth:${name}`);
+          if (saved) input.value = saved;
+        } catch {
+          // localStorage unavailable - auth just won't persist across reloads
+        }
+        input.addEventListener('input', () => {
+          try {
+            localStorage.setItem(`wd-api-auth:${name}`, input.value);
+          } catch {
+            // ignore
+          }
+        });
+      });
+
+      // Keeps the modal's request-sample preview (plain <pre><code> - see
+      // the frontmatter) in sync with whatever the user has typed into
+      // the form so far, substituting a bracketed placeholder (<name>,
+      // <token>, ...) for anything still empty so the preview always
+      // renders something readable instead of looking broken. This is
+      // deliberately its own code path rather than reusing the Send
+      // handler below: Send needs strict validation with user-facing
+      // error messages, while this needs lenient, always-renders-
+      // something behavior on every keystroke. It loosely mirrors the
+      // structure of buildCurlSnippet/buildFetchSnippet/buildPythonSnippet
+      // (src/lib/openapi-render.ts) - same per-language shape, live values
+      // instead of a schema-derived example.
+      function collectLiveRequest() {
+        const baseUrl = (getBaseUrl().trim() || 'https://api.example.com').replace(/\/$/, '');
+        let path = opPath;
+        const queryParams: { name: string; value: string }[] = [];
+        const headerParams: { name: string; value: string }[] = [];
+        for (const input of paramInputs) {
+          const name = input.dataset.paramName ?? '';
+          const paramIn = input.dataset.paramIn;
+          const value = input.value.trim() || `<${name}>`;
+          if (paramIn === 'path') {
+            path = path.replace(`{${name}}`, value);
+          } else if (paramIn === 'query') {
+            queryParams.push({ name, value });
+          } else if (paramIn === 'header') {
+            headerParams.push({ name, value });
+          }
+        }
+
+        const securityHeaders: { name: string; value: string }[] = [];
+        const securityQuery: { name: string; value: string }[] = [];
+        let basicAuth: string | null = null;
+        for (const input of authInputs) {
+          const name = input.dataset.authName ?? '';
+          const type = input.dataset.authType;
+          const scheme = input.dataset.authScheme;
+          const authIn = input.dataset.authIn;
+          const value = input.value.trim();
+          if (type === 'apiKey' && authIn === 'header') {
+            securityHeaders.push({ name, value: value || `<${name}>` });
+          } else if (type === 'apiKey' && authIn === 'query') {
+            securityQuery.push({ name, value: value || `<${name}>` });
+          } else if (type === 'http' && scheme === 'bearer') {
+            securityHeaders.push({ name: 'Authorization', value: `Bearer ${value || '<token>'}` });
+          } else if (type === 'http' && scheme === 'basic') {
+            basicAuth = value || '<username>:<password>';
+          }
+        }
+
+        const hasBodyField = !!bodyInput;
+        const bodyRaw = bodyInput?.value.trim() ?? '';
+
+        return { method, baseUrl, path, queryParams, headerParams, securityHeaders, securityQuery, basicAuth, hasBodyField, bodyRaw };
+      }
+      type LiveRequestState = ReturnType<typeof collectLiveRequest>;
+
+      function liveCurlSnippet(state: LiveRequestState): string {
+        const query = [...state.queryParams, ...state.securityQuery];
+        const url =
+          state.baseUrl + state.path + (query.length ? '?' + query.map((q) => `${q.name}=${q.value}`).join('&') : '');
+        const lines = [`curl -X ${state.method} "${url}" \\`];
+        if (state.hasBodyField) lines.push(`  -H "Content-Type: application/json" \\`);
+        for (const h of state.headerParams) lines.push(`  -H "${h.name}: ${h.value}" \\`);
+        for (const h of state.securityHeaders) lines.push(`  -H "${h.name}: ${h.value}" \\`);
+        if (state.basicAuth) lines.push(`  -u "${state.basicAuth}" \\`);
+        if (state.bodyRaw) lines.push(`  -d '${state.bodyRaw}'`);
+        const last = lines[lines.length - 1];
+        lines[lines.length - 1] = last.endsWith('\\') ? last.slice(0, -2) : last;
+        return lines.join('\n');
+      }
+
+      function liveFetchSnippet(state: LiveRequestState): string {
+        const url = state.baseUrl + state.path;
+        const headers = [
+          ...(state.hasBodyField ? [`'Content-Type': 'application/json'`] : []),
+          ...state.securityHeaders.map((h) => `'${h.name}': '${h.value}'`),
+        ];
+        const optsLines = [
+          `method: '${state.method}'`,
+          headers.length ? `headers: { ${headers.join(', ')} }` : null,
+          state.hasBodyField && state.bodyRaw ? `body: JSON.stringify(${state.bodyRaw})` : null,
+        ].filter(Boolean);
+        return `const response = await fetch(\`${url}\`, {\n  ${optsLines.join(',\n  ')}\n});\nconst data = await response.json();`;
+      }
+
+      function livePythonSnippet(state: LiveRequestState): string {
+        const url = state.baseUrl + state.path;
+        const headers = state.securityHeaders.map((h) => `"${h.name}": "${h.value}"`);
+        const lines = ['import requests', '', `response = requests.request(`, `    "${state.method}",`, `    "${url}",`];
+        if (headers.length) lines.push(`    headers={ ${headers.join(', ')} },`);
+        if (state.hasBodyField && state.bodyRaw) {
+          lines.push(
+            `    json=${state.bodyRaw.replace(/\btrue\b/g, 'True').replace(/\bfalse\b/g, 'False').replace(/\bnull\b/g, 'None')},`
+          );
+        }
+        lines.push(')', 'data = response.json()');
+        return lines.join('\n');
+      }
+
+      // php/go/java/ruby mirror liveFetchSnippet/livePythonSnippet's own
+      // subset of liveCurlSnippet's behavior (no query-param URL
+      // building, no basic-auth) - same precedent buildPhpSnippet/
+      // buildGoSnippet/buildJavaSnippet/buildRubySnippet in
+      // src/lib/openapi-render.ts follow for the static versions of
+      // these same four, for the same reason (see that file's comment).
+      function livePhpSnippet(state: LiveRequestState): string {
+        const url = state.baseUrl + state.path;
+        const headers = [
+          ...(state.hasBodyField ? [`"Content-Type: application/json"`] : []),
+          ...state.headerParams.map((h) => `"${h.name}: ${h.value}"`),
+          ...state.securityHeaders.map((h) => `"${h.name}: ${h.value}"`),
+        ];
+        const lines = [
+          '$ch = curl_init();',
+          `curl_setopt($ch, CURLOPT_URL, "${url}");`,
+          'curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);',
+          `curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "${state.method}");`,
+        ];
+        if (headers.length) lines.push(`curl_setopt($ch, CURLOPT_HTTPHEADER, [${headers.join(', ')}]);`);
+        if (state.hasBodyField && state.bodyRaw) lines.push(`curl_setopt($ch, CURLOPT_POSTFIELDS, '${state.bodyRaw}');`);
+        lines.push('$response = curl_exec($ch);', 'curl_close($ch);');
+        return `<?php\n${lines.join('\n')}`;
+      }
+
+      function liveGoSnippet(state: LiveRequestState): string {
+        const url = state.baseUrl + state.path;
+        const headers = [
+          ...(state.hasBodyField ? [`req.Header.Set("Content-Type", "application/json")`] : []),
+          ...state.headerParams.map((h) => `req.Header.Set("${h.name}", "${h.value}")`),
+          ...state.securityHeaders.map((h) => `req.Header.Set("${h.name}", "${h.value}")`),
+        ];
+        const hasBody = state.hasBodyField && state.bodyRaw;
+        const bodyExpr = hasBody ? `strings.NewReader(\`${state.bodyRaw}\`)` : 'nil';
+        const lines = [
+          'package main',
+          '',
+          'import (',
+          '\t"fmt"',
+          '\t"io"',
+          '\t"net/http"',
+          ...(hasBody ? ['\t"strings"'] : []),
+          ')',
+          '',
+          'func main() {',
+          `\treq, _ := http.NewRequest("${state.method}", "${url}", ${bodyExpr})`,
+          ...headers.map((h) => `\t${h}`),
+          '',
+          '\tresp, err := http.DefaultClient.Do(req)',
+          '\tif err != nil {',
+          '\t\tpanic(err)',
+          '\t}',
+          '\tdefer resp.Body.Close()',
+          '',
+          '\tdata, _ := io.ReadAll(resp.Body)',
+          '\tfmt.Println(string(data))',
+          '}',
+        ];
+        return lines.join('\n');
+      }
+
+      function liveJavaSnippet(state: LiveRequestState): string {
+        const url = state.baseUrl + state.path;
+        const headers = [
+          ...(state.hasBodyField ? [`.header("Content-Type", "application/json")`] : []),
+          ...state.headerParams.map((h) => `.header("${h.name}", "${h.value}")`),
+          ...state.securityHeaders.map((h) => `.header("${h.name}", "${h.value}")`),
+        ];
+        const hasBody = state.hasBodyField && state.bodyRaw;
+        const bodyPublisher = hasBody
+          ? `HttpRequest.BodyPublishers.ofString(${JSON.stringify(state.bodyRaw)})`
+          : 'HttpRequest.BodyPublishers.noBody()';
+        const lines = [
+          'HttpClient client = HttpClient.newHttpClient();',
+          'HttpRequest request = HttpRequest.newBuilder()',
+          `    .uri(URI.create("${url}"))`,
+          ...headers.map((h) => `    ${h}`),
+          `    .method("${state.method}", ${bodyPublisher})`,
+          '    .build();',
+          '',
+          'HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());',
+          'System.out.println(response.body());',
+        ];
+        return lines.join('\n');
+      }
+
+      function liveRubySnippet(state: LiveRequestState): string {
+        const url = state.baseUrl + state.path;
+        const methodClass = state.method.charAt(0).toUpperCase() + state.method.slice(1).toLowerCase();
+        const headers = [
+          ...(state.hasBodyField ? [`request["Content-Type"] = "application/json"`] : []),
+          ...state.headerParams.map((h) => `request["${h.name}"] = "${h.value}"`),
+          ...state.securityHeaders.map((h) => `request["${h.name}"] = "${h.value}"`),
+        ];
+        const hasBody = state.hasBodyField && state.bodyRaw;
+        const lines = [
+          'require "net/http"',
+          'require "uri"',
+          '',
+          `uri = URI("${url}")`,
+          'http = Net::HTTP.new(uri.host, uri.port)',
+          'http.use_ssl = uri.scheme == "https"',
+          '',
+          `request = Net::HTTP::${methodClass}.new(uri)`,
+          ...headers,
+          ...(hasBody ? [`request.body = ${JSON.stringify(state.bodyRaw)}`] : []),
+          '',
+          'response = http.request(request)',
+          'puts response.body',
+        ];
+        return lines.join('\n');
+      }
+
+      const LIVE_SNIPPET_BUILDERS: Record<string, (state: LiveRequestState) => string> = {
+        curl: liveCurlSnippet,
+        js: liveFetchSnippet,
+        py: livePythonSnippet,
+        php: livePhpSnippet,
+        go: liveGoSnippet,
+        java: liveJavaSnippet,
+        ruby: liveRubySnippet,
+      };
+
+      // Renders one modal panel's code - through real Shiki once
+      // wdHighlighter has loaded (see the open-modal click handler above),
+      // so the live preview ends up looking identical to every other
+      // codeblock on the site; until then, plain text keeps it accurate
+      // without blocking on the network. codeToHtml() on an already-built
+      // highlighter instance is synchronous (all langs/themes are already
+      // loaded into it), so this is cheap enough to call on every
+      // keystroke with no debouncing needed.
+      function renderModalPanel(panel: HTMLElement, code: string) {
+        if (!wdHighlighter) {
+          const codeEl = panel.querySelector('code');
+          if (codeEl) codeEl.textContent = code;
+          return;
+        }
+        const shikiLang = MODAL_LANG_TO_SHIKI[panel.dataset.modalLangPanel ?? ''] ?? 'plaintext';
+        const html = wdHighlighter.codeToHtml(code, { lang: shikiLang, themes });
+        const template = document.createElement('template');
+        template.innerHTML = html.trim();
+        const rendered = template.content.firstElementChild as HTMLElement | null;
+        if (!rendered) return;
+        // Shiki's own output owns class/style (background, --shiki-dark-*
+        // vars, etc. - same as the sidebar's <Code/> panels, see
+        // ApiReferencePanel's CSS) but display: block/none is this
+        // panel's own toggle state (driven by modalLangSelect above), not
+        // something Shiki knows about - preserved across the swap rather
+        // than clobbered by it.
+        const currentDisplay = panel.style.display;
+        panel.setAttribute('style', rendered.getAttribute('style') ?? '');
+        panel.style.display = currentDisplay;
+        panel.className = `${rendered.className} wd-api-pre astro-code`.trim();
+        panel.innerHTML = rendered.innerHTML;
+      }
+
+      function updateModalPreview() {
+        if (modalLangPanels.length === 0) return;
+        const state = collectLiveRequest();
+        modalLangPanels.forEach((panel) => {
+          const build = LIVE_SNIPPET_BUILDERS[panel.dataset.modalLangPanel ?? ''];
+          if (build) renderModalPanel(panel, build(state));
+        });
+      }
+      refreshModalPreview = updateModalPreview;
+
+      // Only a <select> fires a meaningful change here - the static
+      // <span> case has nothing for the reader to alter, so there's no
+      // listener to attach for it (getBaseUrl() above still reads its
+      // fixed data-value on every other input's own 'input' event).
+      if (baseUrlEl instanceof HTMLSelectElement) {
+        baseUrlEl.addEventListener('change', updateModalPreview);
+      }
+      paramInputs.forEach((input) => input.addEventListener('input', updateModalPreview));
+      authInputs.forEach((input) => input.addEventListener('input', updateModalPreview));
+      bodyInput?.addEventListener('input', updateModalPreview);
+      updateModalPreview();
+
+      // Examples select (only rendered when the spec's request body
+      // carries a named `examples` map - see requestExampleEntries in
+      // the frontmatter). Selecting one only ever touches the Body
+      // field: OpenAPI's `examples` keyword lives on the request body's
+      // media-type object, with no standard link to path/query/header
+      // parameter values, so there's nothing else to populate from it.
+      // "Default" (value="") is its own real option, not a no-op
+      // placeholder - picking it resets the Body to blankRequestExample
+      // (see the frontmatter's emptyValueFromSchema call), the same
+      // field shape as a named example but with every value left empty,
+      // so the reader still sees what the body needs instead of losing
+      // the shape to a blank textarea.
+      const exampleSelect = section.parentElement?.querySelector<HTMLSelectElement>('[data-role="example-select"]');
+      const blankBody = section.dataset.blankBody ?? '';
+      let examples: Record<string, { summary?: string; description?: string; value?: unknown }> = {};
+      try {
+        examples = JSON.parse(section.dataset.examples ?? '{}');
+      } catch {
+        // malformed/absent - examples select just won't populate anything
+      }
+      exampleSelect?.addEventListener('change', () => {
+        if (!bodyInput) return;
+        const chosen = examples[exampleSelect.value];
+        bodyInput.value = chosen ? JSON.stringify(chosen.value, null, 2) : blankBody;
+        updateModalPreview();
+      });
+      // Once the reader edits the body by hand, it no longer matches
+      // whichever example (if any) is still shown selected - reset the
+      // select back to "Default" so it doesn't keep claiming a match
+      // that's now stale. Only fires on direct typing into the
+      // textarea, not on the programmatic set above (that dispatches no
+      // 'input' event), so picking an example doesn't immediately
+      // un-pick itself.
+      bodyInput?.addEventListener('input', () => {
+        if (exampleSelect) exampleSelect.value = '';
+      });
+
+      sendBtn?.addEventListener('click', async () => {
+        if (!responseStatusEl || !responseBodyEl) return;
+        const baseUrl = getBaseUrl().replace(/\/$/, '');
+        if (!baseUrl) {
+          responseStatusEl.textContent = 'No base URL is configured for this operation.';
+          responseStatusEl.className = 'wd-api-response-status wd-api-status-error';
+          responseBodyEl.textContent = '';
+          return;
+        }
+
+        let requestPath = opPath;
+        const query = new URLSearchParams();
+        for (const input of paramInputs) {
+          const name = input.dataset.paramName ?? '';
+          const paramIn = input.dataset.paramIn;
+          const value = input.value;
+          if (paramIn === 'path') {
+            requestPath = requestPath.replace(`{${name}}`, encodeURIComponent(value));
+          } else if (paramIn === 'query' && value) {
+            query.set(name, value);
+          }
+        }
+
+        const headers: Record<string, string> = {};
+        for (const input of paramInputs) {
+          if (input.dataset.paramIn === 'header' && input.value) {
+            headers[input.dataset.paramName ?? ''] = input.value;
+          }
+        }
+        for (const input of authInputs) {
+          const type = input.dataset.authType;
+          const scheme = input.dataset.authScheme;
+          const authIn = input.dataset.authIn;
+          const value = input.value;
+          if (!value) continue;
+          if (type === 'apiKey' && authIn === 'header') {
+            headers[input.dataset.authName ?? ''] = value;
+          } else if (type === 'apiKey' && authIn === 'query') {
+            query.set(input.dataset.authName ?? '', value);
+          } else if (type === 'http' && scheme === 'bearer') {
+            headers['Authorization'] = `Bearer ${value}`;
+          } else if (type === 'http' && scheme === 'basic') {
+            headers['Authorization'] = `Basic ${btoa(value)}`;
+          }
+        }
+
+        let body: string | undefined;
+        if (bodyInput && bodyInput.value.trim()) {
+          try {
+            body = JSON.stringify(JSON.parse(bodyInput.value));
+            headers['Content-Type'] = headers['Content-Type'] ?? 'application/json';
+          } catch {
+            responseStatusEl.textContent = 'Request body is not valid JSON.';
+            responseStatusEl.className = 'wd-api-response-status wd-api-status-error';
+            responseBodyEl.textContent = '';
+            return;
+          }
+        }
+
+        const targetUrl = baseUrl + requestPath + (query.toString() ? `?${query.toString()}` : '');
+        // Route through writedocs' CORS proxy unless disabled via writedocs.json's
+        // `api.proxy: false` - see PROXY_BASE_URL above for the contract.
+        const url = proxyEnabled ? `${PROXY_BASE_URL}${targetUrl}` : targetUrl;
+
+        if (sendBtn) {
+          sendBtn.disabled = true;
+          sendBtn.textContent = 'Sending...';
+        }
+        responseStatusEl.textContent = 'Sending request...';
+        responseStatusEl.className = 'wd-api-response-status';
+        responseBodyEl.textContent = '';
+
+        const startedAt = performance.now();
+        try {
+          const res = await fetch(url, { method, headers, body });
+          const elapsed = Math.round(performance.now() - startedAt);
+          const text = await res.text();
+          let pretty = text;
+          try {
+            pretty = JSON.stringify(JSON.parse(text), null, 2);
+          } catch {
+            // not JSON - show raw text as-is
+          }
+          responseStatusEl.textContent = `${res.status} ${res.statusText} - ${elapsed}ms`;
+          responseStatusEl.className = `wd-api-response-status ${res.ok ? 'wd-api-status-ok' : 'wd-api-status-error'}`;
+          responseBodyEl.textContent = pretty;
+        } catch (err) {
+          responseStatusEl.textContent = 'Request failed - likely blocked by CORS, or the base URL is unreachable from your browser.';
+          responseStatusEl.className = 'wd-api-response-status wd-api-status-error';
+          responseBodyEl.textContent = err instanceof Error ? err.message : String(err);
+        } finally {
+          if (sendBtn) {
+            sendBtn.disabled = false;
+            sendBtn.innerHTML = 'Send <span aria-hidden="true">&#9656;</span>';
+          }
+        }
+      });
+    });
+  }
+  initApiPanel(document);
+  document.addEventListener('astro:page-load', () => initApiPanel(document));
+</script>