blume 1.5.3 → 1.6.1

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>
+  )
+}

package/src/components/openapi/GraphqlType.astro

@@ -0,0 +1,154 @@
+---
+import type { GraphqlDocument } from "../../openapi/graphql.ts";
+import { graphqlTypeDef } from "../../openapi/graphql.ts";
+import type { ApiOperationRef, ApiSpecData } from "../../openapi/model.ts";
+import {
+  graphqlOperationRoutes,
+  graphqlRoutes,
+  graphqlUsage,
+} from "./graphql-helpers.ts";
+import GraphqlChip from "./GraphqlChip.astro";
+import GraphqlFieldsTable from "./GraphqlFieldsTable.astro";
+import MethodBadge from "./MethodBadge.astro";
+
+/**
+ * A named-type reference page: the type's fields (or input fields, enum
+ * values, union members), what it implements or is implemented by, and usage
+ * backlinks — which operations return or accept it and which types reference
+ * it. The description prose is already in the MDX body above this component.
+ */
+interface Props {
+  spec: ApiSpecData;
+  refOp: ApiOperationRef;
+}
+
+const { spec, refOp } = Astro.props;
+const document = spec.document as GraphqlDocument;
+const type = graphqlTypeDef(document, refOp);
+const routes = graphqlRoutes(spec);
+const operationRoutes = graphqlOperationRoutes(spec);
+
+const usage = type ? graphqlUsage(document, type.name) : { operations: [], types: [] };
+
+// The chip sections a kind can render, empty ones dropped: `possibleTypes`
+// carries a union's members or an interface's implementers, so its heading
+// follows the kind.
+const sections = type
+  ? [
+      {
+        names: type.kind === "union" ? (type.possibleTypes ?? []) : [],
+        title: "Member types",
+      },
+      {
+        names: type.kind === "interface" ? (type.possibleTypes ?? []) : [],
+        title: "Implemented by",
+      },
+      { names: type.interfaces ?? [], title: "Implements" },
+    ].filter((section) => section.names.length > 0)
+  : [];
+
+const SECTION_HEADING = "mb-2 font-semibold text-foreground text-sm";
+---
+
+{
+  !(type) ? (
+    <div class="text-muted-foreground">This GraphQL type could not be found.</div>
+  ) : (
+    <div class="not-prose">
+      <div class="mb-6 flex flex-wrap items-center gap-3">
+        <MethodBadge method={refOp.method} />
+        <code class="break-all font-mono text-foreground text-sm">
+          {type.name}
+        </code>
+      </div>
+      {type.specifiedByUrl && (
+        <div class="mb-4 text-muted-foreground text-sm">
+          Specified by{" "}
+          <a class="text-accent hover:underline" href={type.specifiedByUrl}>
+            {type.specifiedByUrl}
+          </a>
+        </div>
+      )}
+      <GraphqlFieldsTable
+        routes={routes}
+        rows={type.fields ?? []}
+        title="Fields"
+      />
+      <GraphqlFieldsTable
+        routes={routes}
+        rows={type.inputFields ?? []}
+        title="Input fields"
+      />
+      {(type.enumValues ?? []).length > 0 && (
+        <section class="mt-6">
+          <div aria-level="2" class={SECTION_HEADING} role="heading">
+            Values
+          </div>
+          <div class="rounded-blume border border-border px-4">
+            {(type.enumValues ?? []).map((value) => (
+              <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">
+                    {value.name}
+                  </code>
+                  {value.deprecationReason !== undefined && (
+                    <span class="font-medium text-[0.625rem] text-muted-foreground uppercase tracking-wide line-through">
+                      deprecated
+                    </span>
+                  )}
+                </div>
+                {value.description && (
+                  <div
+                    class="mt-1 text-muted-foreground text-sm"
+                    set:text={value.description}
+                  />
+                )}
+                {value.deprecationReason && (
+                  <div class="mt-1 text-muted-foreground text-xs">
+                    Deprecated: <span set:text={value.deprecationReason} />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+      {sections.map((section) => (
+        <section class="mt-6">
+          <div aria-level="2" class={SECTION_HEADING} role="heading">
+            {section.title}
+          </div>
+          <div class="flex flex-wrap gap-2">
+            {section.names.map((name) => (
+              <GraphqlChip class="text-xs" name={name} route={routes.get(name)} />
+            ))}
+          </div>
+        </section>
+      ))}
+      {(usage.operations.length > 0 || usage.types.length > 0) && (
+        <section class="mt-6">
+          <div aria-level="2" class={SECTION_HEADING} role="heading">
+            Used by
+          </div>
+          <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+            {usage.operations.map((operation) => (
+              <span class="inline-flex items-baseline gap-1 text-xs">
+                <GraphqlChip
+                  class="text-xs"
+                  name={operation.name}
+                  route={operationRoutes.get(
+                    `${operation.kind}:${operation.name}`
+                  )}
+                />
+                <span class="text-muted-foreground">{operation.kind}</span>
+              </span>
+            ))}
+            {usage.types.map((name) => (
+              <GraphqlChip class="text-xs" name={name} route={routes.get(name)} />
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}

package/src/components/openapi/MethodBadge.astro

@@ -1,4 +1,6 @@
 ---
+import { methodColor } from "../colors.ts";
+
 interface Props {
   method: string;
   class?: string;
@@ -6,20 +8,7 @@ interface Props {
 
 const { method, class: className } = Astro.props;
 const upper = method.toUpperCase();
-
-const COLORS: Record<string, string> = {
-  DELETE: "bg-red-500/15 text-red-700 dark:text-red-300",
-  GET: "bg-green-500/15 text-green-700 dark:text-green-300",
-  HEAD: "bg-muted text-muted-foreground",
-  OPTIONS: "bg-muted text-muted-foreground",
-  PATCH: "bg-yellow-500/20 text-yellow-800 dark:text-yellow-300",
-  POST: "bg-blue-500/15 text-blue-700 dark:text-blue-300",
-  PUT: "bg-orange-500/15 text-orange-700 dark:text-orange-300",
-  // AsyncAPI actions.
-  RECEIVE: "bg-teal-500/15 text-teal-700 dark:text-teal-300",
-  SEND: "bg-violet-500/15 text-violet-700 dark:text-violet-300",
-};
-const color = COLORS[upper] ?? "bg-muted text-muted-foreground";
+const color = methodColor(upper);
 ---
 
 <span

package/src/components/openapi/Operation.astro

@@ -14,8 +14,10 @@ import {
   type SecurityRequirementLike,
   type SecuritySchemeLike,
 } from "./security.ts";
+import { DEPRECATED_LABEL_CLASS } from "../colors.ts";
 import { sampleLanguages } from "./snippets.ts";
 import AsyncApiOperation from "./AsyncApiOperation.astro";
+import GraphqlOperation from "./GraphqlOperation.astro";
 import Authorization from "./Authorization.astro";
 import MethodBadge from "./MethodBadge.astro";
 import ParametersTable from "./ParametersTable.astro";
@@ -23,6 +25,7 @@ import Playground from "./Playground.astro";
 import RequestBody from "./RequestBody.astro";
 import RequestPanel from "./RequestPanel.astro";
 import Responses from "./Responses.astro";
+import OperationPanel from "./OperationPanel.astro";
 
 interface Props {
   source: string;
@@ -60,9 +63,11 @@ interface FullOperation {
 const { source, id } = Astro.props;
 const spec = specs[source];
 const ref = spec?.operations[id];
-// The AsyncAPI front-end renders its own body; the lookups below are
-// OpenAPI-shaped (paths, request/response) and resolve to nothing for it.
+// The AsyncAPI and GraphQL front-ends render their own bodies; the lookups
+// below are OpenAPI-shaped (paths, request/response) and resolve to nothing
+// for them.
 const isAsyncApi = spec?.kind === "asyncapi";
+const isGraphql = spec?.kind === "graphql";
 
 const doc = (spec?.document ?? {}) as {
   paths?: Record<
@@ -126,6 +131,8 @@ const languages = sampleLanguages(spec?.codeSamples ?? []);
 {
   isAsyncApi ? (
     <AsyncApiOperation id={id} source={source} />
+  ) : isGraphql ? (
+    <GraphqlOperation id={id} source={source} />
   ) : !(spec && ref && operation) ? (
     <div class="text-muted-foreground">This API operation could not be found.</div>
   ) : (
@@ -136,7 +143,7 @@ const languages = sampleLanguages(spec?.codeSamples ?? []);
           {ref.path}
         </code>
         {operation.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>
         )}
@@ -161,7 +168,7 @@ const languages = sampleLanguages(spec?.codeSamples ?? []);
           )}
         </div>
         {sample && model && (
-          <div class="xl:sticky xl:top-24 xl:self-start" data-operation-panel>
+          <OperationPanel>
             {spec.playground.enabled && (
               <Playground
                 model={model}
@@ -176,7 +183,7 @@ const languages = sampleLanguages(spec?.codeSamples ?? []);
               sample={sample}
               schemas={schemas}
             />
-          </div>
+          </OperationPanel>
         )}
       </div>
     </div>

package/src/components/openapi/OperationPanel.astro

@@ -0,0 +1,43 @@
+---
+/**
+ * The API reference's sample panel: the right-hand column of an operation
+ * page holding the playground and the request/response examples. OpenAPI,
+ * AsyncAPI and GraphQL operation pages share it, so the layout lives here
+ * once. It stays utility classes rather than a theme rule on purpose: an
+ * ejected site freezes its generated app.css but keeps pulling components from
+ * node_modules through its `@source` glob, so utilities survive a blume
+ * upgrade there and a theme rule would not.
+ *
+ * At xl the panel sits beside the docs column and sticks below the 4rem header
+ * with the same 2rem gap the content keeps. It is bounded to the viewport with
+ * its own scroll region: a grid item's sticky containing block is its row, and
+ * the row is as tall as its tallest item, so a long request schema on the left
+ * would otherwise pin the panel with everything below the fold unreachable
+ * until the left column ended. The tradeoff runs the other way when the left
+ * column is the short one — the row is then only as tall as the capped panel
+ * and the overhang is reached by scrolling the panel, not the page. No
+ * overscroll containment, like the sidebar and table of contents: once the
+ * panel reaches its end, wheel input chains to the page. The scrollbar matches
+ * theirs, the end padding keeps it off the Request card's edge, and the stable
+ * gutter stops a bar appearing at the cap ("Try it" opening, a tab switch)
+ * from narrowing the content on classic-scrollbar platforms.
+ *
+ * The 0.25rem inset (`pt-1 ps-1 pb-1`) keeps the global focus ring — 2px
+ * outline, 2px offset — on the first child, the playground's `<summary>` at
+ * the scroller's origin, inside the padding box where it can paint; the
+ * negative margins pull the box back so the content still aligns with the left
+ * column, and the sticky offset (`top-24` less the inset) and the viewport cap
+ * (`7.5rem` less the inset) are adjusted by the same amount. The end side
+ * uses the same trick at 1rem (`-me-4 pe-4`): the box spills into the page
+ * gutter (`<main>` keeps `xl:px-10`), so the scrollbar and the reserved gutter
+ * live there, off the Request card's edge, and with overlay scrollbars the
+ * cards keep the column's full 28rem; a classic bar costs its own width.
+ */
+---
+
+<div
+  class="xl:-ms-1 xl:-mt-1 xl:-me-4 xl:sticky xl:top-[5.75rem] xl:max-h-[calc(100dvh-7.25rem)] xl:overflow-y-auto xl:scrollbar-thin xl:scrollbar-thumb-border xl:scrollbar-track-transparent xl:[scrollbar-gutter:stable] xl:pt-1 xl:ps-1 xl:pb-1 xl:pe-4"
+  data-operation-panel
+>
+  <slot />
+</div>