blume 1.5.2 → 1.6.0

package/src/components/layout/Search.astro

@@ -117,8 +117,17 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
       data-blume-search-grid
     >
       <div class="flex min-h-0 flex-col md:border-border md:border-e">
+        {/* The cap shows two full rows of pills plus most of a third as the
+            scroll cue: pills are 26px (PILL_BASE below: text-xs, py-1, 1px
+            border — change that string and this cap together) on a 32px pitch
+            (gap-1.5) below the row's py-2, so their tops sit at 8, 40 and 72
+            inside the 91px scrollport 5.75rem leaves after border-b — the
+            third row shows 19px of its pills, a recognizable cut rather than
+            a sliver of rounded caps. Pills never wrap (whitespace-nowrap), so
+            the arithmetic holds for long section labels; one wider than the
+            column is clipped rather than growing a horizontal bar. */}
         <div
-          class="flex flex-wrap gap-1.5 border-border border-b px-3 py-2"
+          class="flex max-h-[5.75rem] flex-wrap gap-1.5 overflow-x-hidden overflow-y-auto overscroll-contain border-border border-b px-3 py-2 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent"
           data-blume-search-filters
           hidden
         >
@@ -235,7 +244,7 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
     const MARK =
       "[&_mark]:rounded-sm [&_mark]:bg-accent/25 [&_mark]:text-inherit";
     const PILL_BASE =
-      "inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-2.5 py-1 font-medium text-xs transition-colors";
+      "inline-flex cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 py-1 font-medium text-xs transition-colors";
     const PILL_ON = "border-transparent bg-foreground text-background";
     const PILL_OFF = "border-border text-muted-foreground hover:text-foreground";
 
@@ -280,6 +289,8 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
       selectables: Selectable[] = [];
       selectedIndex = -1;
       activeSection: string | null = null;
+      /** The section pill for `activeSection` in the current filter row. */
+      activePill: HTMLElement | undefined;
       renderGeneration = 0;
       /** Monotonic id source for option rows (aria-activedescendant). */
       optionSeq = 0;
@@ -629,6 +640,7 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
       }
 
       renderFilters(sections: { count: number; label: string }[]) {
+        this.activePill = undefined;
         if (sections.length < 2) {
           this.filters.hidden = true;
           this.filters.replaceChildren();
@@ -639,9 +651,15 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
         const total = sections.reduce((sum, s) => sum + s.count, 0);
         this.filters.appendChild(this.createPill(this.allMsg, total, null));
         for (const section of sections) {
-          this.filters.appendChild(
-            this.createPill(section.label, section.count, section.label)
+          const pill = this.createPill(
+            section.label,
+            section.count,
+            section.label
           );
+          this.filters.appendChild(pill);
+          if (section.label === this.activeSection) {
+            this.activePill = pill;
+          }
         }
       }
 
@@ -649,6 +667,9 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
         const button = document.createElement("button");
         button.type = "button";
         const active = this.activeSection === value;
+        // A filter chip is a toggle whose only visual state is color; the
+        // pressed state gives assistive tech the same information.
+        button.setAttribute("aria-pressed", String(active));
         button.className = `${PILL_BASE} ${active ? PILL_ON : PILL_OFF}`;
         button.innerHTML = `${escapeHtml(label)} <span class="opacity-60">${count}</span>`;
         button.addEventListener("click", () => {
@@ -769,6 +790,17 @@ const kbd = "rounded border border-border bg-muted px-1 py-0.5 font-mono";
           this.input.removeAttribute("aria-activedescendant");
           this.clearPreview();
         }
+        // The filter row is height-capped and scrolls. Pills sit in the pool's
+        // first-seen order and sections drop out as the query narrows, so the
+        // active pill can move rows between renders — and the row's scrollTop
+        // survives replaceChildren — so without this the reader can be looking
+        // at filtered results with no highlighted pill in view. Only a section
+        // pill: with "All" selected every render (each keystroke, each resolved
+        // search) would otherwise snap a row the reader scrolled back to the
+        // top, moving the pill they were about to click. Issued here, after
+        // the results are in the DOM, so it shares one layout flush with
+        // selectIndex instead of forcing a second one mid-render.
+        this.activePill?.scrollIntoView({ block: "nearest" });
       }
 
       selectIndex(index: number) {

package/src/components/layout/TableOfContents.astro

@@ -31,7 +31,10 @@ const { headings, title, variant } = Astro.props;
       <blume-toc class="block">
         <ul class="m-0 list-none border-border border-t p-2">
           {headings.map((heading) => (
-            <li style={`padding-inline-start:${(heading.depth - 2) * 0.75}rem`}>
+            <li
+              data-depth={heading.depth}
+              style={`padding-inline-start:${(heading.depth - 2) * 0.75}rem`}
+            >
               <a
                 class="block rounded-md px-2 py-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground aria-[current=location]:font-medium aria-[current=location]:text-foreground"
                 href={`#${heading.slug}`}
@@ -52,7 +55,10 @@ const { headings, title, variant } = Astro.props;
       <blume-toc class="block">
         <ul class="m-0 list-none p-0">
           {headings.map((heading) => (
-            <li style={`padding-inline-start:${(heading.depth - 2) * 0.75}rem`}>
+            <li
+              data-depth={heading.depth}
+              style={`padding-inline-start:${(heading.depth - 2) * 0.75}rem`}
+            >
               <a
                 class="block py-1.5 text-muted-foreground transition-colors hover:text-foreground aria-[current=location]:font-medium aria-[current=location]:text-foreground"
                 href={`#${heading.slug}`}

package/src/components/layout/head-scripts.ts

@@ -29,9 +29,38 @@
  * and again after every client-router swap, which resets `<html>` attributes to
  * the incoming page's server-rendered (theme-less) set.
  *
+ * Re-applying on `astro:after-swap` alone is too late for CSS transitions: the
+ * router's `swapRootAttributes` drops `data-theme`, then its scroll restoration
+ * (`scrollTo`) forces a style flush before `after-swap` fires, so every
+ * `transition-colors` element in the new body gets a light-theme computed
+ * style and animates to dark once the attribute returns. `astro:before-swap`
+ * therefore stamps the current theme onto the incoming document's root, so the
+ * attribute swap carries it over and the theme never drops in the first place;
+ * the `after-swap` re-apply stays as the fallback that also picks up a
+ * preference changed in another tab.
+ *
  * Reads `data-mode` — `"system" | "light" | "dark"`.
  */
-export const THEME_INIT_SCRIPT = `(()=>{const m=document.currentScript?.dataset.mode??"system";const apply=()=>{const s=localStorage.getItem("blume-theme");const sys=matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";document.documentElement.dataset.theme=s??(m==="system"?sys:m);};apply();document.addEventListener("astro:after-swap",apply);})();`;
+export const THEME_INIT_SCRIPT = `(()=>{const m=document.currentScript?.dataset.mode??"system";const apply=()=>{const s=localStorage.getItem("blume-theme");const sys=matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";document.documentElement.dataset.theme=s??(m==="system"?sys:m);};apply();document.addEventListener("astro:before-swap",(e)=>{const t=document.documentElement.dataset.theme;if(t){e.newDocument.documentElement.dataset.theme=t;}});document.addEventListener("astro:after-swap",apply);})();`;
+
+/**
+ * Keep an embedded Scalar reference on Blume's theme. Scalar picks its own
+ * color mode — its \`forceDarkModeState\` option, else the \`colorMode\` key its
+ * own toggle writes to localStorage, else the OS setting — and never looks at
+ * \`data-theme\`. A reader whose Blume preference disagrees with their OS (a
+ * browser that reports dark to \`prefers-color-scheme\` while the docs are set
+ * to light, say) got a light navbar over a dark reference.
+ *
+ * Runs inline right after the reference's mount container, before Scalar's
+ * client module executes: it rewrites the container's \`data-configuration\` to
+ * force the current theme, which also hides Scalar's own toggle. Scalar reads
+ * that override once at mount and keys its styles off \`dark-mode\`/\`light-mode\`
+ * classes on \`<body>\`, so later flips of Blume's toggle are mirrored onto
+ * those classes directly. A container whose author already set
+ * \`forceDarkModeState\` or \`darkMode\` through the \`scalar\` escape hatch is left
+ * to Scalar, per the contract that author options win.
+ */
+export const SCALAR_THEME_INIT_SCRIPT = `(()=>{const d=document.documentElement;const mode=()=>d.dataset.theme==="dark"?"dark":"light";let pinned=0;for(const el of document.querySelectorAll("[data-scalar-client]")){let c;try{c=JSON.parse(el.dataset.configuration||"{}");}catch{continue;}if("forceDarkModeState" in c||"darkMode" in c){continue;}c.forceDarkModeState=mode();el.dataset.configuration=JSON.stringify(c);pinned+=1;}if(!pinned){return;}new MutationObserver(()=>{const dark=mode()==="dark";document.body.classList.toggle("dark-mode",dark);document.body.classList.toggle("light-mode",!dark);}).observe(d,{attributes:true,attributeFilter:["data-theme"]});})();`;
 
 /**
  * Hide a previously-dismissed banner before it can flash in — and again after
@@ -41,6 +70,29 @@ export const THEME_INIT_SCRIPT = `(()=>{const m=document.currentScript?.dataset.
  */
 export const BANNER_INIT_SCRIPT = `(()=>{const k=document.currentScript?.dataset.key;if(!k){return;}const apply=()=>{if(localStorage.getItem("blume-banner:"+k)){document.documentElement.setAttribute("data-blume-banner-hidden","");}};apply();document.addEventListener("astro:after-swap",apply);})();`;
 
+/**
+ * Keep the page styled across client-router swaps. Astro hoists the CSS of a
+ * component rendered after the head has streamed (the page's MDX content, the
+ * WebMcp island) into the **body** as `<link rel="stylesheet">` tags — and the
+ * client router only preloads and persists stylesheets it finds in the head.
+ * A swapped-in body `<link>` applies asynchronously, so every navigation to a
+ * page with body CSS painted one or two completely unstyled frames (giant raw
+ * SVG logo, default link colors) before the sheet kicked in — even when the
+ * same sheet was already loaded on the outgoing page, because the swap throws
+ * the old body (and its link element) away.
+ *
+ * Two listeners close the gap. `astro:before-preparation` wraps the router's
+ * loader: after the next document is fetched, any of its body stylesheets not
+ * already in the live head are appended there and awaited, so their rules
+ * apply before the swap. `astro:before-swap` then moves the incoming
+ * document's body stylesheets into its head, where the router's head diff
+ * keeps the already-loaded copy (matched by `href`) instead of re-inserting a
+ * fresh, not-yet-applied link — and drops it again on a later navigation to a
+ * page that doesn't use it. A sheet that fails to load resolves rather than
+ * wedging the navigation; the page renders as it would have without this.
+ */
+export const SWAP_STYLESHEET_INIT_SCRIPT = `(()=>{const sel='body link[rel="stylesheet"]';document.addEventListener("astro:before-preparation",(e)=>{const load=e.loader;e.loader=async()=>{await load();const links=[...e.newDocument.querySelectorAll(sel)].filter((l)=>!document.head.querySelector('link[rel="stylesheet"][href="'+l.getAttribute("href")+'"]'));await Promise.all(links.map((l)=>new Promise((done)=>{const c=document.createElement("link");for(const a of l.attributes){c.setAttribute(a.name,a.value);}c.onload=done;c.onerror=done;document.head.append(c);})));};});document.addEventListener("astro:before-swap",(e)=>{for(const l of e.newDocument.querySelectorAll(sel)){e.newDocument.head.append(l);}});})();`;
+
 /**
  * Keep the sidebar's scroll useful across page changes. The sidebar is its own
  * scroll container, reborn scrolled to the top whenever its markup is rebuilt —

package/src/components/openapi/ApiOverview.astro

@@ -15,9 +15,14 @@ const { source } = Astro.props;
 const spec = specs[source];
 
 // OpenAPI declares `servers` as an array of URLs; AsyncAPI as a named map of
-// host/protocol/pathname. Both flatten into one list of address chips.
+// host/protocol/pathname; a GraphQL schema names no server, so its configured
+// live endpoint stands in. All flatten into one list of address chips.
 const addresses: string[] = [];
-if (spec?.kind === "asyncapi") {
+if (spec?.kind === "graphql") {
+  if (spec.endpoint) {
+    addresses.push(spec.endpoint);
+  }
+} else if (spec?.kind === "asyncapi") {
   const servers = (spec.document as AsyncApiDocument).servers ?? {};
   for (const server of Object.values(servers)) {
     if (server?.host) {
@@ -38,7 +43,12 @@ if (spec?.kind === "asyncapi") {
     }
   }
 }
-const addressLabel = spec?.kind === "asyncapi" ? "Servers" : "Base URL";
+let addressLabel = "Base URL";
+if (spec?.kind === "asyncapi") {
+  addressLabel = "Servers";
+} else if (spec?.kind === "graphql") {
+  addressLabel = "Endpoint";
+}
 ---
 
 {

package/src/components/openapi/AsyncApiOperation.astro

@@ -17,7 +17,9 @@ import {
   schemaOf,
 } from "./async.ts";
 import type { MessageSample } from "./async-snippets.ts";
+import { DEPRECATED_LABEL_CLASS } from "../colors.ts";
 import { asyncSampleLanguages } from "./async-snippets.ts";
+import { languageSamplePanels } from "./sample-panels.ts";
 import { buildMessage, defaultMessageValues } from "./message.ts";
 import { messageModel } from "./message-model.ts";
 import MessageComposer from "./MessageComposer.astro";
@@ -30,6 +32,7 @@ import ParametersTable from "./ParametersTable.astro";
 import SchemaTable from "./SchemaTable.astro";
 import type { SecuritySchemeLike } from "./security.ts";
 import { resolveAsyncApiSecurity } from "./security.ts";
+import OperationPanel from "./OperationPanel.astro";
 
 /**
  * The AsyncAPI front-end of the operation page: message payloads instead of
@@ -107,17 +110,7 @@ const sample: MessageSample | null = model
   : null;
 const languages = asyncSampleLanguages(spec?.codeSamples ?? [], protocol);
 const samplePanels = sample
-  ? await Promise.all(
-      languages.map(async (language) => ({
-        html: await highlightCode(language.build(sample), language.lang, {
-          icons: false,
-          themes: data.config.codeThemes,
-        }),
-        key: language.id,
-        label: language.label,
-        lang: language.id,
-      }))
-    )
+  ? await languageSamplePanels(languages, sample, data.config.codeThemes)
   : [];
 
 const operationBindings = bindingGroups(operation?.bindings);
@@ -135,7 +128,7 @@ const channelBindings = bindingGroups(channel?.bindings);
           {ref.path}
         </code>
         {ref.deprecated && (
-          <span class="font-medium text-[0.625rem] text-orange-600 uppercase tracking-wide dark:text-orange-400">
+          <span class={DEPRECATED_LABEL_CLASS}>
             deprecated
           </span>
         )}
@@ -238,13 +231,13 @@ const channelBindings = bindingGroups(channel?.bindings);
         {(spec.playground.enabled ||
           samplePanels.length > 0 ||
           messagePanels.length > 0) && (
-          <div class="xl:sticky xl:top-24 xl:self-start" data-operation-panel>
+          <OperationPanel>
             {spec.playground.enabled && model && <MessageComposer model={model} />}
             <div class="not-prose flex flex-col gap-6">
               <PanelTabs copy heading="Example" panels={samplePanels} />
               <PanelTabs heading="Message" panels={messagePanels} />
             </div>
-          </div>
+          </OperationPanel>
         )}
       </div>
     </div>

package/src/components/openapi/GraphqlChip.astro

@@ -0,0 +1,33 @@
+---
+import { withBase } from "../islands/base-path.ts";
+
+/**
+ * A schema name (or full type display like `[Pet!]!`) rendered as a link when
+ * the named type has a reference page, plain muted text otherwise — the one
+ * chip every GraphQL component uses for type and operation names. `class`
+ * carries sizing (`text-xs`, `text-sm`); some containers set the size
+ * themselves and pass none.
+ */
+interface Props {
+  name: string;
+  route?: string;
+  class?: string;
+}
+
+const { name, route, class: className } = Astro.props;
+---
+
+{
+  route ? (
+    <a
+      class:list={["font-mono text-accent hover:underline", className]}
+      href={withBase(route)}
+    >
+      {name}
+    </a>
+  ) : (
+    <span class:list={["font-mono text-muted-foreground", className]}>
+      {name}
+    </span>
+  )
+}

package/src/components/openapi/GraphqlFieldsTable.astro

@@ -0,0 +1,111 @@
+---
+import type { GraphqlFieldRow } from "./graphql-helpers.ts";
+import { isOutputField } from "./graphql-helpers.ts";
+import GraphqlChip from "./GraphqlChip.astro";
+
+/**
+ * The row list shared by every GraphQL member table: a type page's fields or
+ * input fields, and an operation page's arguments (enum values render their
+ * own simpler list in `GraphqlType.astro` — they carry no type). Types link
+ * to their pages via `routes`; a name with no page (a built-in scalar)
+ * renders as plain text.
+ */
+interface Props {
+  title: string;
+  rows: GraphqlFieldRow[];
+  routes: Map<string, string>;
+}
+
+const { title, rows, routes } = Astro.props;
+
+/**
+ * Whether a value must be supplied by the caller: an argument or input field
+ * in a non-null position with no default. Output fields never take the badge
+ * — a response field isn't something the reader provides, and its `!` already
+ * shows in the type display — and a defaulted non-null argument is omittable
+ * per the GraphQL spec.
+ */
+const isRequired = (row: GraphqlFieldRow): boolean =>
+  !isOutputField(row) &&
+  row.type.display.endsWith("!") &&
+  row.default === undefined;
+---
+
+{
+  rows.length > 0 && (
+    <section class="mt-6">
+      <div
+        aria-level="2"
+        class="mb-2 font-semibold text-foreground text-sm"
+        role="heading"
+      >
+        {title}
+      </div>
+      <div class="not-prose rounded-blume border border-border px-4">
+        {rows.map((row) => {
+          const route = routes.get(row.type.name);
+          const args = isOutputField(row) ? row.args : [];
+          return (
+            <div class="border-border border-t py-3 first:border-t-0">
+              <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+                <code class="font-mono text-foreground text-sm">
+                  {row.name}
+                </code>
+                <GraphqlChip
+                  class="text-xs"
+                  name={row.type.display}
+                  route={route}
+                />
+                {isRequired(row) && (
+                  <span class="font-medium text-[0.625rem] text-red-600 uppercase tracking-wide dark:text-red-400">
+                    required
+                  </span>
+                )}
+                {row.deprecationReason !== undefined && (
+                  <span class="font-medium text-[0.625rem] text-muted-foreground uppercase tracking-wide line-through">
+                    deprecated
+                  </span>
+                )}
+              </div>
+              {row.description && (
+                <div
+                  class="mt-1 text-muted-foreground text-sm"
+                  set:text={row.description}
+                />
+              )}
+              {"default" in row && row.default !== undefined && (
+                <div class="mt-1 text-muted-foreground text-xs">
+                  Default:{" "}
+                  <code class="rounded bg-muted px-1 py-0.5 text-foreground">
+                    {row.default}
+                  </code>
+                </div>
+              )}
+              {row.deprecationReason && (
+                <div class="mt-1 text-muted-foreground text-xs">
+                  Deprecated: <span set:text={row.deprecationReason} />
+                </div>
+              )}
+              {args.length > 0 && (
+                <div class="mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-1 text-xs">
+                  <span class="text-muted-foreground">Arguments:</span>
+                  {args.map((arg) => (
+                    <span class="inline-flex items-baseline gap-1">
+                      <code class="rounded bg-muted px-1 py-0.5 text-foreground">
+                        {arg.name}
+                      </code>
+                      <GraphqlChip
+                        name={arg.type.display}
+                        route={routes.get(arg.type.name)}
+                      />
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  )
+}

package/src/components/openapi/GraphqlOperation.astro

@@ -0,0 +1,186 @@
+---
+import data from "blume:data";
+import specs from "blume:openapi";
+
+import type {
+  GraphqlDocument,
+  GraphqlOperationKind,
+} from "../../openapi/graphql.ts";
+import {
+  graphqlRootField,
+  isGraphqlOperationKind,
+} from "../../openapi/graphql.ts";
+import { highlightCode } from "../../markdown/index.ts";
+import { DEPRECATED_LABEL_CLASS } from "../colors.ts";
+import {
+  exampleQuery,
+  exampleResponse,
+  exampleVariables,
+  graphqlPlaygroundModel,
+  graphqlRoutes,
+} from "./graphql-helpers.ts";
+import { buildRequest, defaultValues } from "./request.ts";
+import { languageSamplePanels } from "./sample-panels.ts";
+import { sampleLanguages } from "./snippets.ts";
+import GraphqlChip from "./GraphqlChip.astro";
+import GraphqlFieldsTable from "./GraphqlFieldsTable.astro";
+import GraphqlType from "./GraphqlType.astro";
+import MethodBadge from "./MethodBadge.astro";
+import PanelTabs from "./PanelTabs.astro";
+import Playground from "./Playground.astro";
+import OperationPanel from "./OperationPanel.astro";
+
+/**
+ * The GraphQL front-end of the reference page, dispatched from
+ * `Operation.astro`: root fields render as operations — arguments, return
+ * type, a generated example query, live code samples, and the "Try it"
+ * playground (the OpenAPI panel reused verbatim: a GraphQL call is a plain
+ * POST whose JSON body carries the query and variables) — while named types
+ * defer to `GraphqlType.astro`. Subscriptions are the exception: they don't
+ * run over a plain POST, so their pages show the generated operation instead
+ * of the playground and HTTP samples.
+ */
+interface Props {
+  source: string;
+  id: string;
+}
+
+const { source, id } = Astro.props;
+const spec = specs[source];
+const ref = spec?.operations[id];
+const document = (spec?.document ?? { roots: {}, types: {} }) as GraphqlDocument;
+const isOperation = ref !== undefined && isGraphqlOperationKind(ref.method);
+const field = ref && isOperation ? graphqlRootField(document, ref) : undefined;
+const routes = spec ? graphqlRoutes(spec) : new Map<string, string>();
+
+const query =
+  field && isOperation
+    ? exampleQuery(document, field, ref.method as GraphqlOperationKind)
+    : "";
+const variables = field ? exampleVariables(document, field) : undefined;
+// Subscriptions run over a stateful transport (WebSocket/SSE) that a standard
+// GraphQL server does not serve from a single-response POST — so, like
+// AsyncAPI's streaming operations, their pages get no playground and no HTTP
+// code samples; the generated operation itself is shown instead.
+const isSubscription = ref?.method === "subscription";
+const model =
+  spec && field && !isSubscription
+    ? graphqlPlaygroundModel(spec, query, variables)
+    : null;
+const sample = model ? buildRequest(model, defaultValues(model)) : null;
+const languages = sampleLanguages(spec?.codeSamples ?? []);
+
+const highlight = (code: string, lang: string) =>
+  highlightCode(code, lang, { icons: false, themes: data.config.codeThemes });
+const requestPanels = sample
+  ? await languageSamplePanels(languages, sample, data.config.codeThemes)
+  : [];
+const operationPanels =
+  field && isSubscription
+    ? [
+        { html: await highlight(query, "graphql"), key: "operation", label: "Operation" },
+        ...(variables
+          ? [
+              {
+                html: await highlight(JSON.stringify(variables, null, 2), "json"),
+                key: "variables",
+                label: "Variables",
+              },
+            ]
+          : []),
+      ]
+    : [];
+const responsePanels =
+  field && spec
+    ? [
+        {
+          html: await highlight(
+            JSON.stringify(exampleResponse(document, field), null, 2),
+            "json"
+          ),
+          key: "example",
+          label: "Example",
+        },
+      ]
+    : [];
+
+const returnRoute = field ? routes.get(field.type.name) : undefined;
+---
+
+{
+  ref && !isOperation ? (
+    spec && <GraphqlType refOp={ref} spec={spec} />
+  ) : !(spec && ref && field) ? (
+    <div class="text-muted-foreground">This API operation could not be found.</div>
+  ) : (
+    <div class="not-prose">
+      <div class="mb-6 flex flex-wrap items-center gap-3">
+        <MethodBadge method={ref.method} />
+        <code class="break-all font-mono text-foreground text-sm">
+          {field.name}
+        </code>
+        {field.deprecationReason !== undefined && (
+          <span class={DEPRECATED_LABEL_CLASS}>
+            deprecated
+          </span>
+        )}
+      </div>
+      <div class="grid grid-cols-1 items-start gap-x-10 gap-y-8 xl:grid-cols-[minmax(0,1fr)_minmax(0,28rem)]">
+        <div>
+          {field.deprecationReason && (
+            <p class="mb-4 text-muted-foreground text-sm">
+              Deprecated: <span set:text={field.deprecationReason} />
+            </p>
+          )}
+          <GraphqlFieldsTable
+            routes={routes}
+            rows={field.args}
+            title="Arguments"
+          />
+          <section class="mt-6">
+            <div
+              aria-level="2"
+              class="mb-2 font-semibold text-foreground text-sm"
+              role="heading"
+            >
+              Returns
+            </div>
+            <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+              <GraphqlChip
+                class="text-sm"
+                name={field.type.display}
+                route={returnRoute}
+              />
+            </div>
+            {document.types[field.type.name]?.description && (
+              <p
+                class="mt-1 text-muted-foreground text-sm"
+                set:text={document.types[field.type.name]?.description}
+              />
+            )}
+          </section>
+        </div>
+        {((sample && model) || isSubscription) && (
+          <OperationPanel>
+            {sample && model && spec.playground.enabled && (
+              <Playground
+                model={model}
+                operation={id}
+                proxy={spec.playground.proxy}
+                slug={spec.slug}
+              />
+            )}
+            <div class="not-prose flex flex-col gap-6">
+              {isSubscription ? (
+                <PanelTabs copy heading="Operation" panels={operationPanels} />
+              ) : (
+                <PanelTabs copy heading="Request" panels={requestPanels} />
+              )}
+              <PanelTabs heading="Response" panels={responsePanels} />
+            </div>
+          </OperationPanel>
+        )}
+      </div>
+    </div>
+  )
+}