@writedocs/generator 0.1.0

package/src/components/CodeGroup.astro

@@ -0,0 +1,184 @@
+---
+// `dropdown` is only ever passed down from RequestExample/
+// ResponseExample.astro today (CodeGroup itself is never used with it
+// directly in any fixture/doc) - kept as a real prop rather than a
+// RequestExample-only concern so the switcher-style logic lives in one
+// place instead of being duplicated for a second "tabbed code" component.
+interface Props {
+  dropdown?: boolean;
+}
+const { dropdown = false } = Astro.props as Props;
+---
+<div class="wd-codegroup" data-dropdown={dropdown ? "true" : undefined}>
+  <slot />
+</div>
+<script>
+  // Mirrors Tabs.astro's own initTabs() almost exactly (see that file's
+  // comment for the dataset.wdInit re-run guard and astro:page-load
+  // rationale) - CodeGroup just reads each tab's label off the fenced
+  // block itself instead of a `title` prop, since a code fence's own
+  // ```lang title="..." meta (see shiki-code-block.js's parseMeta())
+  // already carries exactly that string, rendered as a .wd-code-title
+  // bar at build time - no reason to make an MDX author repeat it as a
+  // second prop on <CodeGroup>'s own children.
+  function labelFor(block: HTMLElement, index: number): string {
+    const title = block.querySelector<HTMLElement>('.wd-code-title')?.textContent?.trim();
+    if (title) return title;
+    // No `title=` meta on this fence - fall back to the language Shiki
+    // already tagged the <pre> with (data-language, always present),
+    // then a plain ordinal as the last resort for a truly bare ``` fence.
+    const lang = block.querySelector('pre[data-language]')?.getAttribute('data-language');
+    return lang ? lang.toUpperCase() : `Snippet ${index + 1}`;
+  }
+
+  function initCodeGroups(root: ParentNode) {
+    root.querySelectorAll<HTMLElement>('.wd-codegroup').forEach((group) => {
+      if (group.dataset.wdInit) return;
+      const blocks = Array.from(group.querySelectorAll<HTMLElement>(':scope > .wd-code-block'));
+      // A single-block <CodeGroup> has nothing to switch between - a
+      // one-tab tab strip (or a one-option dropdown) is pure noise, so
+      // it's left exactly as the CSS below already renders it: one
+      // plain bordered block, no nav.
+      if (blocks.length < 2) return;
+      group.dataset.wdInit = 'true';
+      // Only added once there's an actual tab strip/dropdown - see the
+      // CSS below, this is what hides each block's own now-redundant
+      // .wd-code-title bar in favor of the tab/option label showing the
+      // same text. Without JS (or a group too small to switch), that
+      // class never gets added and every block's title bar stays
+      // visible - the CodeGroup then just degrades to last commit's
+      // "stacked, shared border" look rather than losing the title text
+      // outright.
+      group.classList.add('wd-codegroup-tabbed');
+      blocks.forEach((block, i) => {
+        block.style.display = i === 0 ? '' : 'none';
+      });
+
+      if (group.dataset.dropdown === 'true') {
+        // RequestExample/ResponseExample's own `dropdown` prop - a
+        // <select> instead of a tab strip, per Mintlify's own prop of
+        // the same name/meaning on those two components. Same
+        // show/hide-blocks logic as the tab case below, just driven by
+        // a `change` event instead of individual button clicks.
+        const select = document.createElement('select');
+        select.className = 'wd-codegroup-select';
+        blocks.forEach((block, i) => {
+          const option = document.createElement('option');
+          option.value = String(i);
+          option.textContent = labelFor(block, i);
+          select.appendChild(option);
+        });
+        select.addEventListener('change', () => {
+          const index = Number(select.value);
+          blocks.forEach((b, i) => (b.style.display = i === index ? '' : 'none'));
+        });
+        group.prepend(select);
+        return;
+      }
+
+      const nav = document.createElement('div');
+      nav.className = 'wd-codegroup-nav';
+      blocks.forEach((block, i) => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.textContent = labelFor(block, i);
+        btn.className = 'wd-codegroup-tab' + (i === 0 ? ' active' : '');
+        btn.addEventListener('click', () => {
+          nav.querySelectorAll('.wd-codegroup-tab').forEach((b) => b.classList.remove('active'));
+          blocks.forEach((b) => (b.style.display = 'none'));
+          btn.classList.add('active');
+          block.style.display = '';
+        });
+        nav.appendChild(btn);
+      });
+      group.prepend(nav);
+    });
+  }
+  initCodeGroups(document);
+  document.addEventListener('astro:page-load', () => initCodeGroups(document));
+</script>
+<style is:global>
+  /* The single rounded border the docs promise ("a tabbed interface,
+     switching between snippets the same way Tabs does" - see
+     site/docs/content/components.mdx and kitchen-sink's own copy)
+     lives here now, on the group itself, not on each block -
+     overflow: hidden is load-bearing: every .wd-code-block inside loses
+     its own border-radius below, so it's this container's own radius
+     clipping the first/last block's corners (and, once tabbed, the
+     tab strip's own top corners) into that outer radius, not each
+     piece rounding itself. */
+  .wd-codegroup {
+    margin: 1.25rem 0;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.55rem;
+    overflow: hidden;
+  }
+  /* Each fenced code block inside a <CodeGroup> is wrapped in a
+     .wd-code-block div by codeBlockTransformer (see astro.config.mjs /
+     src/lib/shiki-code-block.js) rather than being a bare <pre> - and
+     .wd-code-block itself now owns the card chrome (border/radius),
+     not the <pre> inside it (see [...slug].astro's base rule). Zeroes
+     out that per-block chrome entirely - margin (so blocks stack flush
+     with no visible gap between them, unlike a standalone block),
+     border and radius (both now the group's own job, above). */
+  .wd-codegroup > .wd-code-block {
+    margin: 0;
+    border: none;
+    border-radius: 0;
+  }
+  /* No-JS / too-small-to-tab fallback only - once initCodeGroups() above
+     hides every block but the active one, there's never two adjacent
+     *visible* blocks left for this to draw a line between, so it's
+     inert in the normal tabbed case. Without JS, every block stays
+     visible and stacked, and this is what still separates them. */
+  .wd-codegroup > .wd-code-block + .wd-code-block {
+    border-top: 1px solid var(--wd-border);
+  }
+  .wd-codegroup-nav {
+    display: flex;
+    gap: 0.25rem;
+    padding: 0 0.5rem;
+    overflow-x: auto;
+    background: var(--wd-surface);
+    border-bottom: 1px solid var(--wd-border);
+  }
+  .wd-codegroup-tab {
+    flex-shrink: 0;
+    padding: 0.55rem 0.7rem;
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: none;
+    font-family: monospace;
+    font-size: 0.78rem;
+    font-weight: 500;
+    color: var(--wd-text-muted);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  .wd-codegroup-tab.active {
+    color: var(--wd-primary);
+    border-bottom-color: var(--wd-primary);
+  }
+  /* dropdown="true" case - same background/border-bottom as the tab
+     strip it replaces, so a RequestExample/ResponseExample's dropdown
+     mode still reads as the same "code block chrome" family. */
+  .wd-codegroup-select {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 0.7rem;
+    border: none;
+    border-bottom: 1px solid var(--wd-border);
+    background: var(--wd-surface);
+    color: var(--wd-text);
+    font-family: monospace;
+    font-size: 0.78rem;
+    font-weight: 500;
+    cursor: pointer;
+  }
+  /* The tab/option label already shows this same text - see labelFor()
+     above - so the per-block title bar underneath would just repeat
+     it. */
+  .wd-codegroup-tabbed .wd-code-title {
+    display: none;
+  }
+</style>

package/src/components/CopyPageMenu.astro

@@ -0,0 +1,246 @@
+---
+// The "Copy page" split button - opt-in via writedocs.json's `contextMenu`
+// field (see contextMenuSchema in lib/config.ts). A primary button
+// (always-visible "Copy page" action, copies this page's Markdown
+// straight to the clipboard on click - see initCopyPageMenu() in
+// [...slug].astro) plus a small caret-only button next to it that opens
+// a dropdown for the rest (View as Markdown, Open in ChatGPT/Claude/
+// Perplexity) - only the caret button is a .wd-dropdown-trigger, so only
+// clicking (or hovering, per the shared CSS) *it* opens the menu, not
+// the primary action next to it. The dropdown itself reuses the exact
+// .wd-dropdown/.wd-dropdown-trigger/.wd-dropdown-menu/
+// .wd-dropdown-menu-panel markup pattern BaseLayout.astro's topbar
+// selectors already use - open/close/outside-click/Escape all come free
+// from BaseLayout's initDropdowns(document), which queries `.wd-dropdown`
+// anywhere in the page, not just its own template. See BaseLayout.astro's
+// own comment on the :global() wrapping its copy of that CSS needed so
+// the rules reach markup rendered by a different component (this one).
+//
+// Rendered from [...slug].astro (see its own comment on where/when),
+// which passes in everything needed to build both same-origin links (the
+// .md route from [...slug].md.ts) and the external "Open in X" links
+// (which need an absolute URL - siteUrl is null on sites with no
+// writedocs.json `domain` set, in which case those three are left out
+// entirely rather than linking a service at a URL it could never fetch).
+import { Icon } from 'astro-icon/components';
+import type { ContextMenuConfig } from '../lib/config';
+
+interface Props {
+  currentPath: string; // e.g. "/" or "/guides/foo/" - see hrefForSlug() in [...slug].astro
+  siteUrl: string | null;
+  contextMenu: ContextMenuConfig;
+}
+
+const { currentPath, siteUrl, contextMenu } = Astro.props as Props;
+
+// The [...slug].md.ts route this page is also served at - same
+// normalizeEntryId()-driven convention that file uses to build its own
+// getStaticPaths params ("/" -> "index.md", everything else -> its own
+// slug with a literal ".md" appended instead of the trailing slash).
+const mdPath = currentPath === '/' ? '/index.md' : `${currentPath.replace(/\/$/, '')}.md`;
+const mdAbsoluteUrl = siteUrl ? `${siteUrl}${mdPath}` : null;
+
+// Well-known query-string conventions for starting a new conversation
+// pre-seeded with a prompt (not an official API for any of the three -
+// just the same `?q=`/`/new?q=`/`/search?q=` pattern each already
+// supports for search-engine-style deep links). Pointing the prompt at
+// this page's own .md URL rather than pasting the page content directly
+// into the query string keeps the link itself short and lets the
+// assistant fetch the current content instead of a snapshot baked into
+// a bookmarked/shared link.
+const promptFor = (url: string) => `Read ${url} so you can answer questions about it.`;
+
+const assistants = [
+  { id: 'chatgpt' as const, label: 'ChatGPT', icon: 'simple-icons:openai', buildHref: (q: string) => `https://chatgpt.com/?q=${q}` },
+  { id: 'claude' as const, label: 'Claude', icon: 'simple-icons:claude', buildHref: (q: string) => `https://claude.ai/new?q=${q}` },
+  { id: 'perplexity' as const, label: 'Perplexity', icon: 'simple-icons:perplexity', buildHref: (q: string) => `https://www.perplexity.ai/search?q=${q}` },
+];
+
+// No siteUrl at all -> mdAbsoluteUrl is null -> none of these render,
+// regardless of what contextMenu.openIn lists: a link these services
+// could never actually fetch (a bare relative path, meaningless once
+// it's opened on a different origin) is worse than not offering it.
+const enabledAssistants = mdAbsoluteUrl
+  ? assistants.filter((a) => contextMenu.openIn.includes(a.id))
+  : [];
+---
+<div class="wd-copy-page-split">
+  <button type="button" class="wd-copy-page-primary" data-md-path={mdPath} aria-label="Copy page as Markdown">
+    <Icon name="lucide:copy" class="wd-copy-page-icon" />
+    <span class="wd-copy-page-primary-label">Copy page</span>
+  </button>
+  <div class="wd-dropdown wd-copy-page">
+    <button type="button" class="wd-dropdown-trigger wd-copy-page-caret-trigger" aria-haspopup="true" aria-expanded="false" aria-label="More copy options">
+      <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-copy-page-menu" role="menu">
+      <div class="wd-dropdown-menu-panel wd-copy-page-menu-panel">
+        <a class="wd-copy-page-item" href={mdPath} target="_blank" rel="noopener">
+          <Icon name="lucide:external-link" class="wd-copy-page-icon" />
+          <span class="wd-copy-page-item-text">
+            <span class="wd-copy-page-item-title">View as Markdown</span>
+            <span class="wd-copy-page-item-desc">View this page as plain text</span>
+          </span>
+        </a>
+        {enabledAssistants.map((a) => (
+          <a class="wd-copy-page-item" href={a.buildHref(encodeURIComponent(promptFor(mdAbsoluteUrl!)))} target="_blank" rel="noopener">
+            <Icon name={a.icon} class="wd-copy-page-icon" />
+            <span class="wd-copy-page-item-text">
+              <span class="wd-copy-page-item-title">Open in {a.label}</span>
+              <span class="wd-copy-page-item-desc">Ask questions about this page</span>
+            </span>
+          </a>
+        ))}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* The split button: a primary "Copy page" action (always visible,
+     copies on click - see initCopyPageMenu() in [...slug].astro) and a
+     small caret-only button next to it that opens the rest (View as
+     Markdown, Open in X). Each button gets its own half of the shared
+     border-radius (left corners on the primary button, right corners on
+     the caret button) rather than `overflow: hidden` on the wrapper -
+     overflow: hidden was tried first and clips more than intended: the
+     dropdown menu itself is an absolutely-positioned descendant of
+     .wd-dropdown, which lives inside this wrapper, so clipping the
+     wrapper's overflow silently clipped the open menu away too (the
+     caret still visibly rotated on hover/open, since that's a transform
+     on the caret itself, not the menu - only the menu's own visibility
+     was affected, which is what made this look like "nothing happens"
+     rather than an obvious rendering glitch). */
+  .wd-copy-page-split {
+    display: flex;
+    align-items: stretch;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.4rem;
+    flex-shrink: 0;
+  }
+  /* .wd-copy-page is this instance's own class on the .wd-dropdown div
+     wrapping the caret button + menu (see BaseLayout.astro's shared
+     .wd-dropdown rule for `position: relative`, which still applies
+     alongside this). .wd-copy-page-split's `align-items: stretch` above
+     stretches this div's own height to match the primary button next to
+     it, but that alone doesn't stretch the *caret button inside it* -
+     .wd-dropdown is a plain block div, not a flex container, so its
+     child sizes itself independently and just sits at the top of the
+     now-taller div, which is what made the arrow look vertically
+     off-center against the primary button. Making this div a flex
+     container too (with its own stretch) propagates the height down to
+     the button, which centers the svg within it via the shared
+     .wd-dropdown-trigger rule's own align-items: center. */
+  .wd-copy-page {
+    display: flex;
+    align-items: stretch;
+  }
+  .wd-copy-page-primary {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.35rem 0.65rem;
+    border: none;
+    border-radius: 0.35rem 0 0 0.35rem;
+    background: none;
+    cursor: pointer;
+    color: var(--wd-text-muted);
+    font-size: 0.85rem;
+    font-weight: 500;
+    font-family: inherit;
+  }
+  .wd-copy-page-primary:hover {
+    color: var(--wd-text);
+    background: var(--wd-surface);
+  }
+  /* Toggled by initCopyPageMenu() for ~1.5s after a successful copy -
+     the label itself swaps to "Copied!" via JS (not CSS content, so a
+     screen reader announces it), this just tints icon+text green to
+     match. */
+  .wd-copy-page-primary.wd-copy-page-copied {
+    color: #16a34a;
+  }
+  /* Overrides the shared .wd-dropdown-trigger base rule (BaseLayout.astro)
+     down to an icon-only square button - no padding/border of its own
+     beyond the divider line, and only the right corners rounded (to
+     match .wd-copy-page-split's own outer radius on that side - see the
+     comment above on why the wrapper itself no longer clips to its
+     radius via overflow: hidden). */
+  .wd-copy-page-caret-trigger {
+    padding: 0.35rem 0.5rem;
+    border: none;
+    border-left: 1px solid var(--wd-border);
+    border-radius: 0 0.35rem 0.35rem 0;
+  }
+  .wd-copy-page-menu {
+    left: auto;
+    right: 0;
+  }
+  /* overflow: hidden here (in addition to .wd-copy-page-item below no
+     longer overflowing its own box) is defensive belt-and-suspenders -
+     keeps any future item's hover background from ever visibly poking
+     past the panel's own rounded corners, the exact bug .wd-copy-page-item
+     used to have. */
+  .wd-copy-page-menu-panel {
+    min-width: 260px;
+    overflow: hidden;
+  }
+  .wd-copy-page-icon {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }
+  /* .wd-dropdown-menu a (BaseLayout.astro) is single-line only
+     (align-items: center on one row of text) - these items need a
+     title + description subtitle, so .wd-copy-page-item re-implements
+     that layout instead (icon top-aligned next to a two-line text
+     stack) rather than trying to make the shared single-line rule cover
+     both shapes.
+     No explicit `width` here - deliberately: this codebase doesn't set
+     a global `box-sizing: border-box` reset (see the comment on
+     Tailwind's preflight in src/styles/global.css), so a block-level
+     element's default `width: auto` already correctly fills its
+     container *net of* its own padding, while an explicit `width: 100%`
+     would add that padding on top instead, overflowing past the
+     container's edge - exactly what an earlier version of this rule did
+     (visible as the hover background bleeding out past the panel's
+     rounded corner on hover). Leave width unset rather than reaching for
+     `box-sizing: border-box` here alone, which would just be one rule
+     quietly relying on a codebase-wide convention it doesn't establish. */
+  .wd-copy-page-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.6rem;
+    padding: 0.5rem 0.6rem;
+    border: none;
+    border-radius: 0.35rem;
+    background: none;
+    text-decoration: none;
+    color: var(--wd-text);
+    font-family: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+  .wd-copy-page-item:hover {
+    background: var(--wd-surface);
+  }
+  .wd-copy-page-item .wd-copy-page-icon {
+    margin-top: 0.15rem;
+    color: var(--wd-text-muted);
+  }
+  .wd-copy-page-item-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+  }
+  .wd-copy-page-item-title {
+    font-size: 0.86rem;
+    font-weight: 500;
+  }
+  .wd-copy-page-item-desc {
+    font-size: 0.76rem;
+    color: var(--wd-text-muted);
+  }
+</style>

package/src/components/Danger.astro

@@ -0,0 +1,12 @@
+---
+// Shorthand for <Callout type="danger">. See Callout.astro's own comment.
+import Callout from './Callout.astro';
+interface Props {
+  title?: string;
+  // See Callout.astro's own comment - set automatically by
+  // remarkCalloutAnchorIds, not meant to be passed by hand.
+  _titleId?: string;
+}
+const { title, _titleId } = Astro.props as Props;
+---
+<Callout type="danger" title={title} _titleId={_titleId}><slot /></Callout>

package/src/components/Expandable.astro

@@ -0,0 +1,126 @@
+---
+// The collapsible "Show/Hide properties" wrapper that pairs with
+// Parameter for nested object properties - modeled directly on
+// Mintlify's own Expandable (https://www.mintlify.com/docs/components/
+// expandables), the reference this was built against. Structurally
+// near-identical to Accordion.astro (same <details>/<summary>, same
+// custom chevron svg, same border/radius language) - deliberately reused
+// rather than reinvented, since "apply the same styles as our api
+// pages" means this should read as the same family of collapsible box
+// as everything else in this site, not a one-off. Two real differences
+// from Accordion, both because the two components solve different
+// problems: this defaults to *open* (Accordion defaults closed - an
+// Expandable's whole point in the reference design is showing a nested
+// object's properties immediately, with room to collapse if they're
+// not needed, the opposite default of an FAQ-style Accordion), and its
+// toggle label is computed ("Show "/"Hide " + title) rather than a
+// fixed heading, updated live via the <script> below rather than at
+// build time - a bare CSS/HTML approach can't express "this text
+// depends on live open/closed state" the way a details' own [open]
+// attribute can drive a CSS transform.
+interface Props {
+  title?: string;
+  defaultOpen?: boolean;
+}
+const { title = "properties", defaultOpen = true } = Astro.props as Props;
+---
+
+<details class="wd-expandable" open={defaultOpen}>
+  <summary>
+    <svg class="wd-expandable-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>
+    <span class="wd-expandable-label" data-title={title}>{defaultOpen ? `Hide ${title}` : `Show ${title}`}</span>
+  </summary>
+  <div class="wd-expandable-body"><slot /></div>
+</details>
+<script>
+  // The label text isn't a static title (unlike Accordion's own
+  // <summary>) - it flips between "Show "/"Hide " + title as the
+  // <details> element's own open/closed state changes, so it has to be
+  // driven by the native `toggle` event rather than expressed purely
+  // in markup/CSS. data-title (set from the `title` prop above) is
+  // what the prefix gets rebuilt around each time.
+  function initExpandables(root: ParentNode) {
+    root.querySelectorAll<HTMLDetailsElement>(".wd-expandable").forEach((details) => {
+      if (details.dataset.wdInit) return;
+      details.dataset.wdInit = "true";
+      const label = details.querySelector<HTMLElement>(".wd-expandable-label");
+      details.addEventListener("toggle", () => {
+        const title = label?.dataset.title ?? "properties";
+        if (label) label.textContent = `${details.open ? "Hide" : "Show"} ${title}`;
+      });
+    });
+  }
+  initExpandables(document);
+  document.addEventListener("astro:page-load", () => initExpandables(document));
+</script>
+<style>
+  .wd-expandable {
+    border: 1px solid var(--wd-border);
+    border-radius: 0.6rem;
+    margin: 0.75rem 0;
+    overflow: hidden;
+  }
+  .wd-expandable summary {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.5rem 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. Same as
+     Accordion.astro's own identical rules. */
+  .wd-expandable summary::-webkit-details-marker {
+    display: none;
+  }
+  .wd-expandable summary::marker {
+    content: "";
+  }
+  .wd-expandable summary:hover {
+    background: var(--wd-surface);
+  }
+  /* The divider between the "Show/Hide" row and the fields beneath it -
+     only drawn while open, matching the reference design (a closed
+     Expandable has nothing below the row to separate from, so drawing
+     a border under it while collapsed would just be an orphaned line
+     under an otherwise plain pill). */
+  .wd-expandable[open] > summary {
+    border-bottom: 1px solid var(--wd-border);
+  }
+  .wd-expandable-chevron {
+    flex-shrink: 0;
+    color: var(--wd-text-muted);
+    transition: transform 0.15s ease;
+  }
+  .wd-expandable[open] > summary .wd-expandable-chevron {
+    transform: rotate(180deg);
+  }
+  /* Plain weight + muted color, not bold - unlike Accordion's own
+     title (a real heading for the section beneath it), this label is a
+     UI affordance ("there's more, click to see it"/"click to hide it
+     again"), not content in its own right, matching the lighter-weight
+     treatment the reference design uses for it. */
+  .wd-expandable-label {
+    color: var(--wd-text-muted);
+    font-size: 0.75rem;
+  }
+  /* No top padding on the body itself - Parameter's own top-level
+     padding (0.9rem 0 - see its own comment) is exactly the gap wanted
+     between the divider above and the first field's name/type row, so
+     adding more here would just double it up. Bottom/side padding
+     still applies normally since Parameter has no matching
+     horizontal inset of its own. */
+  .wd-expandable-body {
+    padding: 0 1rem 0.9rem;
+  }
+</style>

package/src/components/Frame.astro

@@ -0,0 +1,102 @@
+---
+// A generic "put a rounded, bordered card around this" wrapper -
+// deliberately different from Image (a specific <img> with its own
+// src/srcDark/size handling): Frame wraps *arbitrary* slot content - a
+// raw HTML <img>, a markdown ![]() image (which the markdown pipeline
+// still turns into a real <img>, just possibly wrapped in a <p> by the
+// surrounding paragraph parsing), a <video>, an <iframe> embed, or
+// anything else a site author already has and just wants the card
+// treatment on - matching Mintlify's own <Frame>, which exists for
+// exactly this "I already have markup, give it the frame" case rather
+// than duplicating Image's own prop-driven API. Nothing here about this
+// component's name collides with frontmatter's own `mode: "frame"`
+// page-rendering option (BaseLayout.astro) - that's an unrelated,
+// page-level concept keyed off a plain string, not a JSX component.
+interface Props {
+  caption?: string;
+}
+const { caption } = Astro.props as Props;
+---
+
+<figure class="wd-frame">
+  <div class="wd-frame-content">
+    <slot />
+  </div>
+  {caption && <figcaption class="wd-frame-caption">{caption}</figcaption>}
+</figure>
+<style>
+  /* Border/background/padding live on the outer <figure>, not the inner
+     content div, so a caption renders *inside* the same bordered card as
+     the media above it - one continuous box, not a border tight around
+     just the image with plain caption text floating separately below it
+     (an earlier version of this file did exactly that; a real reference
+     screenshot showing the border wrapping the caption too is what this
+     was rebuilt against). Image.astro's own caption case mirrors this
+     same card language for the same reason - see its own comment. */
+  .wd-frame {
+    margin: 1.25rem 0;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.75rem;
+    background: var(--wd-surface);
+    padding: 0.5rem;
+    /* Belt-and-suspenders alongside the border - see Image.astro's own
+       identical box-shadow comment. var(--wd-border)/var(--wd-surface)
+       are low-contrast by default, and a real user report traced an
+       "invisible card" complaint to exactly that: a demo asset that
+       happened to be the same image as the page's own background,
+       leaving nothing but a barely-visible 1px line to signal a card
+       was even there. A shadow reads regardless of border/background
+       contrast against whatever the page looks like. */
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+  .wd-frame-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  /* Slot content isn't rendered by this component's own template - it's
+     whatever markup the author put between <Frame> and </Frame> (a raw
+     <img>, markdown's own ![]() output, possibly wrapped in a <p> by the
+     surrounding paragraph parsing) - same as Accordion-body's own
+     :global(p:first-child)/:global(p:last-child) rules, this needs
+     :global() to reach it at all; without it these selectors would
+     compile with this component's own scope attribute and never match
+     anything actually inside <slot />. iframe included alongside img/
+     video since an embed (a YouTube player, a CodeSandbox, ...) is just
+     as plausible a Frame child as an image - border: 0 clears the
+     default inset border some browsers still draw around a bare
+     <iframe>, which would otherwise double up with this card's own
+     border. border-radius on the media itself (rather than clipping via
+     the container's own overflow: hidden) matches Image's own approach -
+     modern browsers clip img/video/iframe content to their own
+     border-radius directly, no wrapping element needed purely for that. */
+  .wd-frame-content :global(img),
+  .wd-frame-content :global(video),
+  .wd-frame-content :global(iframe) {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    margin: 0;
+    border: 0;
+    border-radius: 0.5rem;
+  }
+  /* A markdown ![]() image lands wrapped in its own <p> (the surrounding
+     paragraph the image syntax was written inside) - display: contents
+     drops that wrapper's own box entirely, so the width: 100% rule above
+     still sizes the <img> itself against .wd-frame-content directly,
+     regardless of whether the author wrote a raw <img> (no wrapping <p>
+     at all) or markdown image syntax (always one). Harmless no-op for
+     any other block-level slot content (a code block, a Callout, ...) -
+     display: contents only changes how *this* one wrapper participates
+     in layout, never anything it contains. */
+  .wd-frame-content :global(p) {
+    display: contents;
+  }
+  .wd-frame-caption {
+    margin: 0.6rem 0 0;
+    text-align: center;
+    color: var(--wd-text-muted);
+    font-size: 0.75rem;
+  }
+</style>