blume 2.1.0 → 2.1.2

package/src/components/layout/search/analytics.ts

@@ -9,6 +9,10 @@
  * result is a `search_select` event with its position, for click-through. The
  * same query settling twice in a row (a filter toggled back and forth) counts
  * once.
+ *
+ * With `search.analytics.queries: false`, providers get each query's length
+ * (`queryChars`) instead of its text, and the text rides only the
+ * `blume:track` DOM event, the way the assistant reports questions.
  */
 import type { TrackProps } from "../analytics-client.ts";
 
@@ -18,8 +22,15 @@ export const MAX_QUERY_CHARS = 100;
 /** How long a query sits untouched before it counts as settled. */
 export const SETTLE_MS = 1000;
 
-/** Sends one analytics event. */
-export type SendEvent = (event: string, props: TrackProps) => void;
+/**
+ * Sends one analytics event; `local` rides only the `blume:track` DOM event
+ * (see `track`).
+ */
+export type SendEvent = (
+  event: string,
+  props: TrackProps,
+  local?: TrackProps
+) => void;
 
 /** The timer a tracker waits on; injectable for tests. */
 export interface SettleTimer {
@@ -27,6 +38,14 @@ export interface SettleTimer {
   start: (callback: () => void, ms: number) => number;
 }
 
+/** How a tracker reports. */
+export interface SearchTrackerOptions {
+  /** Whether providers receive each query's text (`search.analytics.queries`). */
+  queries?: boolean;
+  /** The timer a query waits on to settle; injectable for tests. */
+  timer?: SettleTimer;
+}
+
 /** What the dialog tells the tracker. */
 export interface SearchTracker {
   /** The dialog closed; record the query it was showing. */
@@ -51,23 +70,33 @@ const browserTimer: SettleTimer = {
 /** A tracker for one search dialog. */
 export const createSearchTracker = (
   send: SendEvent,
-  timer: SettleTimer = browserTimer
+  { queries = true, timer = browserTimer }: SearchTrackerOptions = {}
 ): SearchTracker => {
   let pending: PendingSearch | undefined;
   let handle: number | undefined;
   let last: string | undefined;
 
+  // Providers get the query's text, or only its length, in which case the
+  // text goes to the `blume:track` DOM event alone.
+  const report = (event: string, props: TrackProps, query: string): void => {
+    if (queries) {
+      send(event, { ...props, query });
+    } else {
+      send(event, { ...props, queryChars: query.length }, { query });
+    }
+  };
+
   const flush = (): void => {
     if (handle !== undefined) {
       timer.cancel(handle);
       handle = undefined;
     }
     if (pending && pending.query !== last) {
-      send("search", {
-        path: location.pathname,
-        query: pending.query,
-        results: pending.results,
-      });
+      report(
+        "search",
+        { path: location.pathname, results: pending.results },
+        pending.query
+      );
       last = pending.query;
     }
     pending = undefined;
@@ -80,12 +109,11 @@ export const createSearchTracker = (
     },
     selected: (query, position, url) => {
       flush();
-      send("search_select", {
-        path: location.pathname,
-        position,
-        query: query.slice(0, MAX_QUERY_CHARS),
-        url,
-      });
+      report(
+        "search_select",
+        { path: location.pathname, position, url },
+        query.slice(0, MAX_QUERY_CHARS)
+      );
     },
     settled: (query, results) => {
       if (handle !== undefined) {

package/src/components/layout/search/endpoint.ts

@@ -1,22 +1,64 @@
 import { highlight, SEARCH_LIMIT } from "./types.ts";
-import type { SearchFn, SearchHit } from "./types.ts";
+import type { SearchClientOptions, SearchFn, SearchHit } from "./types.ts";
+
+/**
+ * How long a typed query waits for the reader to stop typing before it's
+ * sent, in milliseconds. The dialog searches on every keystroke, and each
+ * request counts toward the endpoint's `rateLimit`.
+ */
+export const SEARCH_DEBOUNCE_MS = 250;
+
+/** Resolve after `ms`, or reject with the abort reason once `signal` aborts. */
+const pause = (ms: number, signal: AbortSignal): Promise<void> =>
+  // oxlint-disable-next-line promise/avoid-new -- adapt setTimeout and the abort event
+  new Promise((resolve, reject) => {
+    const timer = setTimeout(resolve, ms);
+    signal.addEventListener(
+      "abort",
+      () => {
+        clearTimeout(timer);
+        reject(signal.reason);
+      },
+      { once: true }
+    );
+  });
 
 /**
  * Server-proxied search (Mixedbread): POST the query to a generated endpoint
  * that holds the secret key and talks to the service. The returned hits carry
  * service-derived text and the dialog injects title/excerpt as HTML, so both
  * are escaped (and query matches marked) here, like every other provider.
+ * A failed request rejects, as a hosted provider's does, so the dialog shows
+ * its error rather than an empty "no results".
+ *
+ * With `typing` (the search dialog), a query waits {@link SEARCH_DEBOUNCE_MS}
+ * before it's sent, and a newer one supersedes it: the earlier call's wait or
+ * request is aborted and it rejects with an `AbortError`. Typing a word then
+ * costs one request rather than one per letter, and a slow earlier response
+ * can't land after a later one. Without it, every call is sent at once.
  */
-export const createSearch =
-  (opts: { api: string }): SearchFn =>
-  async (query) => {
+export const createSearch = (
+  opts: { api: string } & SearchClientOptions
+): SearchFn => {
+  let pending: AbortController | undefined;
+  return async (query) => {
+    let signal: AbortSignal | undefined;
+    if (opts.typing) {
+      pending?.abort();
+      pending = new AbortController();
+      ({ signal } = pending);
+      await pause(SEARCH_DEBOUNCE_MS, signal);
+    }
     const response = await fetch(opts.api, {
       body: JSON.stringify({ query }),
       headers: { "Content-Type": "application/json" },
       method: "POST",
+      signal,
     });
     if (!response.ok) {
-      return { hits: [], sections: [] };
+      throw new Error(
+        `Search failed: ${opts.api} answered ${response.status}.`
+      );
     }
     // SAFETY: the endpoint is Blume-generated (`search-endpoint` template) and
     // responds with the SearchHit list it built; title/excerpt are still
@@ -29,3 +71,4 @@ export const createSearch =
     }));
     return { hits, sections: [] };
   };
+};

package/src/components/layout/search/pagefind.ts

@@ -9,14 +9,63 @@ interface PagefindResult {
   }>;
 }
 
-interface PagefindModule {
+/** One Pagefind instance: a page language's index, plus any merged into it. */
+interface PagefindInstance {
+  mergeIndex: (
+    url: string,
+    options: { baseUrl: string; language: string }
+  ) => Promise<void>;
   search: (query: string) => Promise<{ results: PagefindResult[] }>;
 }
 
+interface PagefindModule {
+  createInstance: (options: {
+    basePath: string;
+    baseUrl: string;
+  }) => PagefindInstance;
+}
+
+/** `pagefind-entry.json`: the bundle's index for each language. */
+interface PagefindEntry {
+  languages: Record<string, { page_count: number }>;
+}
+
+// Pagefind names each page after its built file (`quickstart/index.html`), so
+// its URLs end in a slash. Blume serves pages without one (`trailingSlash:
+// "never"`): hosts redirect the slashed URL, and `blume preview` 404s it.
+const TRAILING_SLASH = /(?<=.)\/(?=[#?]|$)/u;
+
+/**
+ * The language whose index Pagefind loads for a page, picked the way its
+ * `findIndex` does: the page's own, else its base language (`pt` for
+ * `pt-br`), else the language with the most pages (a locale with no
+ * translated pages has no index of its own).
+ */
+const loadedLanguage = (
+  languages: PagefindEntry["languages"],
+  language: string
+): string | undefined => {
+  const [base = language] = language.split("-");
+  if (languages[language]) {
+    return language;
+  }
+  if (languages[base]) {
+    return base;
+  }
+  return Object.entries(languages).toSorted(
+    ([, a], [, b]) => b.page_count - a.page_count
+  )[0]?.[0];
+};
+
 /**
  * Pagefind: load the index emitted into the built site and query it. The bundle
  * lives in the output (not `node_modules`), so it is imported at runtime by URL
  * — which is why this only works in the production build, not `dev`.
+ *
+ * Pagefind keeps an index per language and searches the one for the page's
+ * `<html lang>`, which Blume sets to the locale the dialog scopes to. A
+ * search scoped to a locale is that index alone; a search across every
+ * language (no `locale`) merges every other language's index into it.
  */
 export const createSearch = async (opts: {
   url: string;
@@ -24,25 +73,85 @@ export const createSearch = async (opts: {
   // The pagefind bundle lives in the built site (not node_modules) and is
   // resolved at runtime by URL — it can't be a static, code-splittable path.
   // SAFETY: the URL points at the `pagefind.js` module our own build emitted,
-  // whose export contract (`search()`) is fixed by pagefind.
+  // whose export contract (`createInstance()`) is fixed by pagefind.
   // oxlint-disable-next-line react-doctor/no-dynamic-import-path
   const pagefind = (await import(
     /* @vite-ignore */
     opts.url
   )) as PagefindModule;
+  // The bundle's folder, which holds the entry file and every language's index.
+  const bundle = new URL("./", new URL(opts.url, document.baseURI));
+  // `baseUrl` "/" keeps result URLs base-less routes, like every other
+  // provider's: by default Pagefind prefixes the folder the bundle is served
+  // under, and the dialog adds the deployment base itself.
+  const create = (): PagefindInstance =>
+    pagefind.createInstance({ basePath: bundle.pathname, baseUrl: "/" });
+
+  // Every language's index: the page's own, and every other one merged in.
+  const everyLanguage = async (language: string): Promise<PagefindInstance> => {
+    const instance = create();
+    const response = await fetch(new URL("pagefind-entry.json", bundle));
+    // SAFETY: the entry file is the one Pagefind wrote into this bundle.
+    const { languages } = (await response.json()) as PagefindEntry;
+    const own = loadedLanguage(languages, language);
+    // Pagefind skips a merge whose path its own `basePath` starts with, as
+    // the same index twice, so the bundle is merged by its full URL.
+    await Promise.all(
+      Object.keys(languages)
+        .filter((code) => code !== own)
+        .map((code) =>
+          instance.mergeIndex(bundle.href, { baseUrl: "/", language: code })
+        )
+    );
+    return instance;
+  };
+
+  // Pagefind reads the page's language once, when an instance is created. A
+  // client-side language switch changes the page's language without a
+  // reload, so each language gets its own instance, created on its first
+  // search: after the switch, search moves to the new page's index. The
+  // every-language instance is one for the whole page load.
+  const instances = new Map<string, Promise<PagefindInstance>>();
+  const cached = (
+    key: string,
+    load: () => Promise<PagefindInstance>
+  ): Promise<PagefindInstance> => {
+    const existing = instances.get(key);
+    if (existing) {
+      return existing;
+    }
+    const loading = (async () => {
+      try {
+        return await load();
+      } catch (error) {
+        // A failed load (the entry file's fetch, say) is forgotten, so the
+        // next search retries it.
+        instances.delete(key);
+        throw error;
+      }
+    })();
+    instances.set(key, loading);
+    return loading;
+  };
+
   // Pagefind builds its own marked-up excerpt; we keep its `<mark>` highlights
   // (dropping any other markup — the excerpt is rendered via innerHTML) and
   // only highlight the title ourselves. It carries no section/breadcrumb data,
   // so pills stay hidden and the preview pane falls back to the excerpt.
-  return async (query) => {
-    const response = await pagefind.search(query);
+  return async (query, options) => {
+    // Lowercased like Pagefind's own reading, which names the entry's indexes.
+    const language = document.documentElement.lang.toLowerCase() || "unknown";
+    const instance = await (options?.locale
+      ? cached(language, () => Promise.resolve(create()))
+      : cached("*", () => everyLanguage(language)));
+    const response = await instance.search(query);
     const docs = await Promise.all(
       response.results.slice(0, SEARCH_LIMIT).map((result) => result.data())
     );
     const hits = docs.map((doc) => ({
       excerpt: sanitizeExcerpt(doc.excerpt),
       title: highlight(doc.meta?.title ?? doc.url, query),
-      url: doc.url,
+      url: doc.url.replace(TRAILING_SLASH, ""),
     }));
     return { hits, sections: [] };
   };

package/src/components/layout/search/types.ts

@@ -43,6 +43,18 @@ export type SearchFn = (
   }
 ) => Promise<SearchResult>;
 
+/** What a caller tells `createSearch` (`blume:search-client`) about its queries. */
+export interface SearchClientOptions {
+  /**
+   * The queries come from a reader typing, as in the search dialog, so each
+   * one supersedes the last. The server-proxied client (Mixedbread), whose
+   * endpoint is rate-limited, then waits for a pause in typing before it
+   * sends a query and aborts the one a newer query supersedes. Other
+   * providers ignore it.
+   */
+  typing?: boolean;
+}
+
 /** A document in the client-loaded `blume-search.json` index. */
 export interface IndexedDocument {
   route: string;

package/src/components/layout/search/typesense.ts

@@ -17,10 +17,19 @@ interface TypesenseRecord extends Record<string, unknown> {
  * key. Documents are imported at build time by the sync step. Every adapter
  * option Blume doesn't read (`connectionTimeoutSeconds`, `numRetries`, …) is
  * the site's own client option and goes to the `Client` untouched; the named
- * connection options still decide `apiKey` and `nodes`.
+ * connection options still decide `apiKey` and `nodes`. `locale` is the
+ * sync's: Typesense tokenizes a query for the fields it searches.
  */
 export const createSearch = (opts: TypesenseOptions): SearchFn => {
-  const { apiKey, collection, host, port, protocol, ...clientOptions } = opts;
+  const {
+    apiKey,
+    collection,
+    host,
+    locale: _locale,
+    port,
+    protocol,
+    ...clientOptions
+  } = opts;
   const client = new Client({
     ...clientOptions,
     apiKey,
@@ -35,10 +44,13 @@ export const createSearch = (opts: TypesenseOptions): SearchFn => {
           per_page: SEARCH_LIMIT,
           q: query,
           query_by: "title,keywords,description,content",
-          // Relevance first, in ten bands, then each page's `search.boost`
-          // within a band: a boost lifts a page past similar matches without
-          // floating it over clearly better ones.
-          sort_by: "_text_match(buckets: 10):desc,boost:desc",
+          // Relevance first, then each page's `search.boost` among pages that
+          // match equally well: a boost settles a tie without floating a page
+          // over a better match. Bucketing the relevance instead
+          // (`_text_match(buckets: 10)`) ranks by boost alone inside each
+          // bucket, so at equal boosts a bucket falls back to indexing order
+          // and the best match can land behind weaker ones.
+          sort_by: "_text_match:desc,boost:desc",
           // The sync marks `locale` and `version` as facets so hosted results
           // scope to the active language and the viewed docs version (the
           // current docs upload as "current").

package/src/components/openapi/AsyncApiOperation.astro

@@ -7,11 +7,12 @@ import { asyncApiOperationObject } from "../../openapi/asyncapi.ts";
 import { operationOf, specOf } from "../../openapi/model.ts";
 import { highlightCode } from "../../markdown/index.ts";
 import {
-  asyncApiSecurityEntries,
+  asyncApiSecurity,
   bindingGroups,
   channelParameters,
-  channelServers,
+  kafkaTopic,
   messageLabel,
+  namedChannelServers,
   operationMessages,
   payloadSchema,
   protocolOf,
@@ -33,7 +34,6 @@ import PanelTabs from "./PanelTabs.astro";
 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";
 
 /**
@@ -61,9 +61,11 @@ const schemas = (document.components?.schemas ?? {}) as Record<
   string,
   SchemaLike
 >;
-const servers = channelServers(channel, document);
-const security = resolveAsyncApiSecurity(
-  asyncApiSecurityEntries(operation, servers),
+const namedServers = namedChannelServers(channel, document);
+const servers = namedServers.map(({ server }) => server);
+const security = asyncApiSecurity(
+  operation,
+  namedServers,
   document.components?.securitySchemes as
     | Record<string, SecuritySchemeLike>
     | undefined
@@ -96,10 +98,15 @@ const messagePanels = await Promise.all(
 
 // One derived model feeds the static default sample, the composer form, and
 // (client-side) the live samples + WebSocket frame — they can never drift.
+// A Kafka channel binding's `topic` names the real topic when the address
+// doesn't, so the samples use it.
+const topic =
+  protocol === "kafka" ? kafkaTopic(channel, document.components) : undefined;
 const model = ref
   ? messageModel({
       action: ref.method === "send" ? "send" : "receive",
-      address: ref.path,
+      address: topic ?? ref.path,
+      components: document.components,
       messages,
       parameters,
       protocol,

package/src/components/openapi/Authorization.astro

@@ -28,6 +28,13 @@ const { security } = Astro.props;
           Optional — this operation also accepts unauthenticated requests.
         </p>
       )}
+      {security.unauthenticatedServers &&
+        security.unauthenticatedServers.length > 0 && (
+          <p class="mb-2 text-muted-foreground text-sm">
+            No authorization needed on{" "}
+            {security.unauthenticatedServers.join(", ")}.
+          </p>
+        )}
       {security.alternatives.map((alternative, index) => (
         <>
           {index > 0 && (
@@ -47,6 +54,9 @@ const { security } = Astro.props;
                     <span class="text-muted-foreground text-xs">
                       {schemeLabel(resolved)}
                       {carrier ? ` · ${carrier.in}` : ""}
+                      {resolved.servers
+                        ? ` · on ${resolved.servers.join(", ")}`
+                        : ""}
                     </span>
                     {!security.optional && (
                       <span class="font-medium text-[0.625rem] text-red-600 uppercase tracking-wide dark:text-red-400">

package/src/components/openapi/GraphqlOperation.astro

@@ -19,10 +19,12 @@ import {
   exampleVariables,
   graphqlPlaygroundModel,
   graphqlRoutes,
+  graphqlSecurity,
 } from "./graphql-helpers.ts";
 import { buildRequest, defaultValues } from "./request.ts";
 import { languageSamplePanels } from "./sample-panels.ts";
 import { sampleLanguages } from "./snippets.ts";
+import Authorization from "./Authorization.astro";
 import Description from "./Description.astro";
 import GraphqlChip from "./GraphqlChip.astro";
 import GraphqlFieldsTable from "./GraphqlFieldsTable.astro";
@@ -107,6 +109,7 @@ const responsePanels =
     : [];
 
 const returnRoute = field ? routes.get(field.type.name) : undefined;
+const security = spec ? graphqlSecurity(spec) : undefined;
 ---
 
 {
@@ -134,6 +137,7 @@ const returnRoute = field ? routes.get(field.type.name) : undefined;
               Deprecated: <span set:text={field.deprecationReason} />
             </p>
           )}
+          {security && <Authorization security={security} />}
           <GraphqlFieldsTable
             routes={routes}
             rows={field.args}
@@ -169,6 +173,7 @@ const returnRoute = field ? routes.get(field.type.name) : undefined;
                 model={model}
                 operation={id}
                 proxy={spec.playground.proxy}
+                proxyConfig="graphql"
                 slug={spec.slug}
               />
             )}

package/src/components/openapi/Operation.astro

@@ -131,6 +131,10 @@ const params = mergeParameters(
 const requestBody = operation?.requestBody
   ? resolveComponentRef(operation.requestBody, components, "requestBodies")
   : undefined;
+// A request body table leaves out `readOnly` fields. A webhook's or
+// callback's body is a request the API sends, so it reads like a response
+// (and like its payload example): `readOnly` fields in, `writeOnly` out.
+const bodyDirection = isWebhook ? "response" : "request";
 const responses = Object.fromEntries(
   Object.entries(operation?.responses ?? {}).map(([status, response]) => [
     status,
@@ -178,6 +182,8 @@ interface CallbackEntry {
   method: string;
   name: string;
   operation: FullOperation;
+  /** The callback path item's own parameters, which each method inherits. */
+  pathParameters?: ParameterLike[];
 }
 
 // Callbacks: for each named callback (resolved through
@@ -202,6 +208,10 @@ const callbacks: CallbackEntry[] = Object.entries(
               // SAFETY: a path item's method entry is an operation object; the
               // object check above guards a spec that put a scalar there.
               operation: entry as FullOperation,
+              // SAFETY: the object check above passed, and a path item's
+              // `parameters` is a parameter list, which `mergeParameters`
+              // reads the way it reads an operation's.
+              pathParameters: (item as PathItemLike).parameters,
             },
           ]
         : [];
@@ -209,8 +219,13 @@ const callbacks: CallbackEntry[] = Object.entries(
   });
 });
 
-/** A callback's request body and responses, `$ref`s resolved. */
+/** A callback's parameters, request body, and responses, `$ref`s resolved. */
 const callbackParts = (entry: CallbackEntry) => ({
+  parameters: mergeParameters(
+    entry.pathParameters,
+    entry.operation.parameters,
+    components
+  ),
   requestBody: entry.operation.requestBody
     ? resolveComponentRef(entry.operation.requestBody, components, "requestBodies")
     : undefined,
@@ -253,6 +268,7 @@ const callbackParts = (entry: CallbackEntry) => ({
           <ParametersTable parameters={params} schemas={schemas} />
           {requestBody && (
             <RequestBody
+              direction={bodyDirection}
               expandAll={spec.expandSchemas}
               requestBody={requestBody}
               schemas={schemas}
@@ -298,8 +314,14 @@ const callbackParts = (entry: CallbackEntry) => ({
                           text={entry.operation.description}
                         />
                       )}
+                      <ParametersTable
+                        level={4}
+                        parameters={parts.parameters}
+                        schemas={schemas}
+                      />
                       {parts.requestBody && (
                         <RequestBody
+                          direction="response"
                           expandAll={spec.expandSchemas}
                           level={4}
                           requestBody={parts.requestBody}
@@ -339,6 +361,7 @@ const callbackParts = (entry: CallbackEntry) => ({
                 model={model}
                 operation={id}
                 proxy={spec.playground.proxy}
+                proxyConfig="openapi"
                 slug={spec.slug}
               />
             )}

package/src/components/openapi/ParametersTable.astro

@@ -2,6 +2,7 @@
 import Description from "./Description.astro";
 import {
   constraints,
+  parameterDescription,
   resolveSchema,
   type SchemaLike,
   typeLabel,
@@ -19,9 +20,11 @@ interface ParamLike {
 interface Props {
   parameters: ParamLike[];
   schemas: Record<string, SchemaLike>;
+  /** The headings' level: 2 on an operation, deeper inside a callback. */
+  level?: number;
 }
 
-const { parameters, schemas } = Astro.props;
+const { parameters, schemas, level = 2 } = Astro.props;
 
 const SECTIONS: { in: string; title: string }[] = [
   { in: "path", title: "Path parameters" },
@@ -42,7 +45,7 @@ const groups = SECTIONS.map((section) => ({
   groups.map((group) => (
     <section class="mt-6">
       <div
-        aria-level="2"
+        aria-level={level}
         class="mb-2 font-semibold text-foreground text-sm"
         role="heading"
       >
@@ -54,6 +57,7 @@ const groups = SECTIONS.map((section) => ({
           const type = param.schema ? typeLabel(param.schema) : "string";
           const limits = constraints(resolved);
           const enumValues = Array.isArray(resolved.enum) ? resolved.enum : null;
+          const description = parameterDescription(param, schemas);
           return (
             <div class="border-border border-t py-4 first:border-t-0">
               <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
@@ -70,8 +74,8 @@ const groups = SECTIONS.map((section) => ({
                   </span>
                 )}
               </div>
-              {param.description && (
-                <Description class="mt-2 text-muted-foreground text-sm" text={param.description} />
+              {description && (
+                <Description class="mt-2 text-muted-foreground text-sm" text={description} />
               )}
               {limits.length > 0 && (
                 <div class="mt-2 text-muted-foreground text-xs">

package/src/components/openapi/Playground.astro

@@ -17,12 +17,17 @@ interface Props {
   model: PlaygroundModel;
   /** Proxy route for the send, or false to fetch the API directly. */
   proxy: string | false;
+  /**
+   * Where this panel's proxy is configured, which the CORS message names:
+   * an `openapi()` or `graphql()` reference, or `api` for hand-written pages.
+   */
+  proxyConfig: "api" | "graphql" | "openapi";
   /** Spec slug + operation key form the per-operation localStorage key. */
   slug: string;
   operation: string;
 }
 
-const { model, proxy, slug, operation } = Astro.props;
+const { model, proxy, proxyConfig, slug, operation } = Astro.props;
 
 // The built-in proxy route carries the site `basePath` but, like every
 // internal URL in the spec data, not `deployment.base`; `withMountedBase`
@@ -53,6 +58,7 @@ const CHECKBOX_ROW =
 <blume-playground
   class="mb-6 block"
   data-proxy={proxyUrl}
+  data-proxy-config={proxyConfig}
   data-storage-key={`blume-playground:${slug}:${operation}`}
 >
   <script