@scalar/blocks 0.5.4 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @scalar/blocks
 
+## 0.6.0
+
+### Minor Changes
+
+- [#10687](https://github.com/scalar/scalar/pull/10687): Display operation-level AsyncAPI message payload examples in a dark code card with message and example selection, plus selectable reply payload examples below it. Keep message and reply schemas in the left column.
+
+  Preserve declared AsyncAPI message order in the documentation and example picker.
+
+### Patch Changes
+
+- [#10721](https://github.com/scalar/scalar/pull/10721): Update compatible dependencies while retaining the existing Node.js support and five-day release-age policy.
+- [#10652](https://github.com/scalar/scalar/pull/10652): Display authored AsyncAPI server-variable examples in the shared Example/Examples popup with copy support, including examples from referenced variables.
+
+  Keep the shared examples popup label clickable when hovered and align server-variable popups with their labels to avoid overlapping the sidebar.
+
 ## 0.5.4
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,11 @@
 # Scalar Blocks
 
-🚧 WIP 🚧
+Embed individual pieces of API documentation in your own application.
+
+- [Getting Started](https://scalar.com/products/api-references/blocks/getting-started)
+- [Code Example](https://scalar.com/products/api-references/blocks/code-example): request snippets with a JavaScript mounting helper or Vue component.
+- [Schema](https://scalar.com/products/api-references/blocks/schema): schema properties and compositions for Vue.
+- [Specification Extensions](https://scalar.com/products/api-references/blocks/specification-extensions): selected extension values for Vue.
 
 ---
 
@@ -17,33 +22,7 @@ Scalar is an open-source API platform for teams who want beautiful developer int
 
 ## Usage
 
-```ts
-import { createWorkspaceStore } from '@scalar/workspace-store/client'
-import { createCodeExample } from '@scalar/blocks/code-example'
-import '@scalar/blocks/style.css'
-
-// Load OpenAPI documents
-const store = createWorkspaceStore()
-
-await store.addDocument({
-  name: 'default',
-  url: '/openapi.json'
-})
-
-// Mount a block
-createCodeExample('#block', {
-  // Data Source
-  store,
-  // Operation
-  path: '/hello',
-  method: 'post',
-  // Configuration
-  selectedClient: 'node/undici',
-  selectedServer: {
-    url: 'https://api.example.com',
-  },
-})
-```
+See [Getting Started](https://scalar.com/products/api-references/blocks/getting-started) for installation, styles, and a complete runnable example.
 
 ## Schema tree
 
@@ -64,7 +43,12 @@ const expansion = useSchemaExpansion(scrollTargetId)
 
 <template>
   <div class="scalar-app">
-    <Schema :schema="schema" :eventBus="null" :options="{ hideModels: true }" :scrollTargetId="scrollTargetId" :expansion="expansion" />
+    <Schema
+      :schema="schema"
+      :eventBus="null"
+      :options="{ hideModels: true }"
+      :scrollTargetId="scrollTargetId"
+      :expansion="expansion" />
   </div>
 </template>
 ```

package/dist/code-example/components/AsyncApiCodeExample.vue.d.ts

@@ -0,0 +1,19 @@
+import type { AsyncApiDocument } from '@scalar/types/asyncapi/3.1';
+type __VLS_Props = {
+    /** A workspace-resolved AsyncAPI 3.x document. */
+    document: AsyncApiDocument;
+    /** Key in document.operations. */
+    operationName: string;
+};
+type __VLS_ModelProps = {
+    'selectedMessage'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selectedMessage": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selectedMessage"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=AsyncApiCodeExample.vue.d.ts.map

package/dist/code-example/components/AsyncApiCodeExample.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncApiCodeExample.vue.d.ts","sourceRoot":"","sources":["../../../src/code-example/components/AsyncApiCodeExample.vue"],"names":[],"mappings":"AAqNA,OAAO,KAAK,EACV,gBAAgB,EAEjB,MAAM,4BAA4B,CAAA;AASnC,KAAK,WAAW,GAAG;IACjB,kDAAkD;IAClD,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,kCAAkC;IAClC,aAAa,EAAE,MAAM,CAAA;CACtB,CAAC;AA8FF,KAAK,gBAAgB,GAAG;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA2RxD,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/code-example/components/AsyncApiCodeExample.vue.js

@@ -0,0 +1,9 @@
+import e from "./AsyncApiCodeExample.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                        */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+//#region src/code-example/components/AsyncApiCodeExample.vue
+var n = /*#__PURE__*/ t(e, [["__scopeId", "data-v-41f67ce2"]]);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=AsyncApiCodeExample.vue.js.map

package/dist/code-example/components/AsyncApiCodeExample.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncApiCodeExample.vue.js","names":["_sfc_main","AsyncApiCodeExample_vue_vue_type_script_setup_true_lang_default","_plugin_vue_export_helper_default","AsyncApiCodeExample_default"],"sources":["../../../src/code-example/components/AsyncApiCodeExample.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarWrappingText } from '@scalar/components/wrapping-text'\nimport type {\n  AsyncApiDocument,\n  AsyncApiMessageObject,\n} from '@scalar/types/asyncapi/3.1'\nimport { getResolvedAsyncApiRef } from '@scalar/workspace-store/helpers/get-resolved-async-api-ref'\nimport { computed, ref, watch } from 'vue'\n\nimport { getAsyncApiExampleContext } from '../helpers/get-asyncapi-example-context'\nimport { getGeneratedPayloadExample } from '../helpers/get-generated-payload-example'\nimport { getMessageExampleContent } from '../helpers/get-message-example-content'\nimport ExamplePicker from './ExamplePicker.vue'\n\nconst { document, operationName } = defineProps<{\n  /** A workspace-resolved AsyncAPI 3.x document. */\n  document: AsyncApiDocument\n  /** Key in document.operations. */\n  operationName: string\n}>()\n\ntype PickerOptions = Record<string, { summary: string }>\ntype MessageExample = Exclude<\n  NonNullable<AsyncApiMessageObject['examples']>[number],\n  { $ref: string }\n> & { key: string }\nconst context = computed<ReturnType<typeof getAsyncApiExampleContext>>(() =>\n  getAsyncApiExampleContext(document, operationName),\n)\nconst channelPathParts = computed(() =>\n  (context.value?.channel?.address ?? operationName).split(/({[^}]+})/),\n)\n\nconst selectedMessage = defineModel<string>('selectedMessage', { default: '' })\nconst selectedExample = ref<string>('')\nconst messages = computed<PickerOptions>(() =>\n  Object.fromEntries(\n    (context.value?.messages ?? []).map(({ name, message }) => [\n      name,\n      { summary: message.title || message.name || name },\n    ]),\n  ),\n)\nconst message = computed<AsyncApiMessageObject | undefined>(\n  () =>\n    context.value?.messages.find(({ name }) => name === selectedMessage.value)\n      ?.message,\n)\nconst examples = computed<MessageExample[]>(() =>\n  (message.value?.examples ?? []).flatMap((node, index) => {\n    const example = getResolvedAsyncApiRef(node)\n    return example?.payload !== undefined\n      ? [{ key: String(index), ...example }]\n      : []\n  }),\n)\nconst exampleOptions = computed<PickerOptions>(() =>\n  Object.fromEntries(\n    examples.value.map((example, index) => [\n      example.key,\n      { summary: example.name || example.summary || `Example ${index + 1}` },\n    ]),\n  ),\n)\nconst example = computed<MessageExample | undefined>(() =>\n  examples.value.find(({ key }) => key === selectedExample.value),\n)\nconst messageLabel = computed<string>(\n  () =>\n    `Message: ${messages.value[selectedMessage.value]?.summary ?? 'Select a message'}`,\n)\nconst exampleLabel = computed<string>(\n  () =>\n    `Message example: ${exampleOptions.value[selectedExample.value]?.summary ?? 'Select an example'}`,\n)\n\n// Keep selections valid when operations, messages, or the active document change.\nwatch(\n  messages,\n  (options) => {\n    if (!Object.hasOwn(options, selectedMessage.value))\n      selectedMessage.value = Object.keys(options)[0] ?? ''\n  },\n  { immediate: true },\n)\nwatch([selectedMessage, () => operationName], () => {\n  selectedExample.value = Object.keys(exampleOptions.value)[0] ?? ''\n})\nwatch(\n  exampleOptions,\n  (options) => {\n    if (!Object.hasOwn(options, selectedExample.value))\n      selectedExample.value = Object.keys(options)[0] ?? ''\n  },\n  { immediate: true },\n)\nconst content = computed(() =>\n  getMessageExampleContent(\n    example.value\n      ? example.value.payload\n      : message.value\n        ? getGeneratedPayloadExample(message.value)\n        : undefined,\n    message.value?.contentType ?? document.defaultContentType,\n  ),\n)\n</script>\n\n<template>\n  <ScalarCard\n    class=\"request-card dark-mode min-w-0\"\n    label=\"Message example\">\n    <ScalarCardHeader\n      class=\"flex-nowrap items-start gap-3 pr-2.5 [&_.scalar-card-header-title]:flex-1 [&_.scalar-card-header-title]:whitespace-normal [&>div:last-child]:shrink-0\">\n      <span class=\"sr-only\">Message example for</span>\n      <span\n        class=\"font-code mr-1.5 uppercase\"\n        :class=\"\n          context?.operation.action === 'send' ? 'text-blue' : 'text-green'\n        \"\n        >{{ context?.operation.action }}</span\n      >\n      <span class=\"text-c-2 font-code min-w-0 font-semibold break-words\">\n        <template\n          v-for=\"(part, index) in channelPathParts\"\n          :key=\"index\">\n          <span\n            v-if=\"part.startsWith('{') && part.endsWith('}')\"\n            class=\"text-c-1 whitespace-nowrap\"\n            >{{ part }}</span\n          >\n          <ScalarWrappingText\n            v-else\n            :text=\"part\" />\n        </template>\n      </span>\n    </ScalarCardHeader>\n    <ScalarCardSection class=\"custom-scroll flex flex-1 p-0\">\n      <div class=\"flex w-full flex-col\">\n        <p\n          v-if=\"content?.structural\"\n          class=\"text-c-2 px-3 py-2 text-sm\">\n          Structure only; not encoded\n        </p>\n        <ScalarCodeBlock\n          v-if=\"content\"\n          class=\"bg-b-2 h-full\"\n          :content=\"content.content\"\n          :lang=\"content.lang\"\n          lineNumbers />\n        <p\n          v-else\n          class=\"text-c-2 p-4\"\n          role=\"status\">\n          No message payload example available.\n        </p>\n      </div>\n    </ScalarCardSection>\n    <ScalarCardFooter\n      v-if=\"Object.keys(messages).length || examples.length\"\n      class=\"bg-b-3 relative flex shrink-0 flex-wrap items-center justify-end gap-2 p-1.5\">\n      <div class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n        <ExamplePicker\n          v-if=\"examples.length > 1\"\n          v-model=\"selectedExample\"\n          :aria-label=\"exampleLabel\"\n          :examples=\"exampleOptions\" />\n        <span\n          v-else-if=\"examples.length === 1\"\n          class=\"text-c-2 min-w-0 truncate px-1.5 py-0.75 text-base\">\n          {{ exampleOptions[selectedExample]?.summary }}\n        </span>\n        <div class=\"ml-auto flex min-w-0 items-center\">\n          <ExamplePicker\n            v-if=\"Object.keys(messages).length > 1\"\n            v-model=\"selectedMessage\"\n            :aria-label=\"messageLabel\"\n            :examples=\"messages\" />\n          <span\n            v-else-if=\"Object.keys(messages).length === 1\"\n            class=\"text-c-2 min-w-0 truncate px-1.5 py-0.75 text-base\">\n            {{ messages[selectedMessage]?.summary }}\n          </span>\n        </div>\n      </div>\n    </ScalarCardFooter>\n  </ScalarCard>\n</template>\n\n<style scoped>\n.request-card {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-font-size-3);\n}\n</style>\n"],"mappings":""}

package/dist/code-example/components/AsyncApiCodeExample.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,114 @@
+import { getAsyncApiExampleContext as e } from "../helpers/get-asyncapi-example-context.js";
+import { getGeneratedPayloadExample as t } from "../helpers/get-generated-payload-example.js";
+import { getMessageExampleContent as n } from "../helpers/get-message-example-content.js";
+import r from "./ExamplePicker.vue.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, useModel as y, watch as b, withCtx as x } from "vue";
+import { ScalarCard as S, ScalarCardFooter as C, ScalarCardHeader as w, ScalarCardSection as T } from "@scalar/components/card";
+import { ScalarCodeBlock as E } from "@scalar/components/code-block";
+import { ScalarWrappingText as D } from "@scalar/components/wrapping-text";
+import { getResolvedAsyncApiRef as O } from "@scalar/workspace-store/helpers/get-resolved-async-api-ref";
+//#region src/code-example/components/AsyncApiCodeExample.vue?vue&type=script&setup=true&lang.ts
+var k = { class: "text-c-2 font-code min-w-0 font-semibold break-words" }, A = {
+	key: 0,
+	class: "text-c-1 whitespace-nowrap"
+}, j = { class: "flex w-full flex-col" }, M = {
+	key: 0,
+	class: "text-c-2 px-3 py-2 text-sm"
+}, N = {
+	key: 2,
+	class: "text-c-2 p-4",
+	role: "status"
+}, P = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-2" }, F = {
+	key: 1,
+	class: "text-c-2 min-w-0 truncate px-1.5 py-0.75 text-base"
+}, I = { class: "ml-auto flex min-w-0 items-center" }, L = {
+	key: 1,
+	class: "text-c-2 min-w-0 truncate px-1.5 py-0.75 text-base"
+}, R = /*@__PURE__*/ d({
+	__name: "AsyncApiCodeExample",
+	props: /*@__PURE__*/ f({
+		document: {},
+		operationName: {}
+	}, {
+		selectedMessage: { default: "" },
+		selectedMessageModifiers: {}
+	}),
+	emits: ["update:selectedMessage"],
+	setup(d) {
+		let f = a(() => e(d.document, d.operationName)), R = a(() => (f.value?.channel?.address ?? d.operationName).split(/({[^}]+})/)), z = y(d, "selectedMessage"), B = h(""), V = a(() => Object.fromEntries((f.value?.messages ?? []).map(({ name: e, message: t }) => [e, { summary: t.title || t.name || e }]))), H = a(() => f.value?.messages.find(({ name: e }) => e === z.value)?.message), U = a(() => (H.value?.examples ?? []).flatMap((e, t) => {
+			let n = O(e);
+			return n?.payload === void 0 ? [] : [{
+				key: String(t),
+				...n
+			}];
+		})), W = a(() => Object.fromEntries(U.value.map((e, t) => [e.key, { summary: e.name || e.summary || `Example ${t + 1}` }]))), G = a(() => U.value.find(({ key: e }) => e === B.value)), K = a(() => `Message: ${V.value[z.value]?.summary ?? "Select a message"}`), q = a(() => `Message example: ${W.value[B.value]?.summary ?? "Select an example"}`);
+		b(V, (e) => {
+			Object.hasOwn(e, z.value) || (z.value = Object.keys(e)[0] ?? "");
+		}, { immediate: !0 }), b([z, () => d.operationName], () => {
+			B.value = Object.keys(W.value)[0] ?? "";
+		}), b(W, (e) => {
+			Object.hasOwn(e, B.value) || (B.value = Object.keys(e)[0] ?? "");
+		}, { immediate: !0 });
+		let J = a(() => n(G.value ? G.value.payload : H.value ? t(H.value) : void 0, H.value?.contentType ?? d.document.defaultContentType));
+		return (e, t) => (m(), o(v(S), {
+			class: "request-card dark-mode min-w-0",
+			label: "Message example"
+		}, {
+			default: x(() => [
+				u(v(w), { class: "flex-nowrap items-start gap-3 pr-2.5 [&_.scalar-card-header-title]:flex-1 [&_.scalar-card-header-title]:whitespace-normal [&>div:last-child]:shrink-0" }, {
+					default: x(() => [
+						t[2] ||= l("span", { class: "sr-only" }, "Message example for", -1),
+						l("span", { class: p(["font-code mr-1.5 uppercase", f.value?.operation.action === "send" ? "text-blue" : "text-green"]) }, _(f.value?.operation.action), 3),
+						l("span", k, [(m(!0), c(i, null, g(R.value, (e, t) => (m(), c(i, { key: t }, [e.startsWith("{") && e.endsWith("}") ? (m(), c("span", A, _(e), 1)) : (m(), o(v(D), {
+							key: 1,
+							text: e
+						}, null, 8, ["text"]))], 64))), 128))])
+					]),
+					_: 1
+				}),
+				u(v(T), { class: "custom-scroll flex flex-1 p-0" }, {
+					default: x(() => [l("div", j, [J.value?.structural ? (m(), c("p", M, " Structure only; not encoded ")) : s("", !0), J.value ? (m(), o(v(E), {
+						key: 1,
+						class: "bg-b-2 h-full",
+						content: J.value.content,
+						lang: J.value.lang,
+						lineNumbers: ""
+					}, null, 8, ["content", "lang"])) : (m(), c("p", N, " No message payload example available. "))])]),
+					_: 1
+				}),
+				Object.keys(V.value).length || U.value.length ? (m(), o(v(C), {
+					key: 0,
+					class: "bg-b-3 relative flex shrink-0 flex-wrap items-center justify-end gap-2 p-1.5"
+				}, {
+					default: x(() => [l("div", P, [U.value.length > 1 ? (m(), o(r, {
+						key: 0,
+						modelValue: B.value,
+						"onUpdate:modelValue": t[0] ||= (e) => B.value = e,
+						"aria-label": q.value,
+						examples: W.value
+					}, null, 8, [
+						"modelValue",
+						"aria-label",
+						"examples"
+					])) : U.value.length === 1 ? (m(), c("span", F, _(W.value[B.value]?.summary), 1)) : s("", !0), l("div", I, [Object.keys(V.value).length > 1 ? (m(), o(r, {
+						key: 0,
+						modelValue: z.value,
+						"onUpdate:modelValue": t[1] ||= (e) => z.value = e,
+						"aria-label": K.value,
+						examples: V.value
+					}, null, 8, [
+						"modelValue",
+						"aria-label",
+						"examples"
+					])) : Object.keys(V.value).length === 1 ? (m(), c("span", L, _(V.value[z.value]?.summary), 1)) : s("", !0)])])]),
+					_: 1
+				})) : s("", !0)
+			]),
+			_: 1
+		}));
+	}
+});
+//#endregion
+export { R as default };
+
+//# sourceMappingURL=AsyncApiCodeExample.vue_vue_type_script_setup_true_lang.js.map

package/dist/code-example/components/AsyncApiCodeExample.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncApiCodeExample.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createElementVNode","_normalizeClass","_toDisplayString","_createElementBlock","_Fragment","_renderList","_createCommentVNode","ExamplePicker","ExamplePicker_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","AsyncApiCodeExample_vue_vue_type_script_setup_true_lang_default","\"selectedMessage\"","\"selectedMessageModifiers\"","context","computed","getAsyncApiExampleContext","__props","channelPathParts","selectedMessage","useModel","selectedExample","ref","messages","name","message","examples","example","getResolvedAsyncApiRef","node","index","exampleOptions","key","messageLabel","exampleLabel","watch","options","content","getMessageExampleContent","getGeneratedPayloadExample","openBlock","createBlock","unref","ScalarCard","withCtx","createVNode","ScalarCardHeader","_cache","createElementVNode","normalizeClass","toDisplayString","createElementBlock","Fragment","renderList","part","ScalarWrappingText","ScalarCardSection","createCommentVNode","ScalarCodeBlock","ScalarCardFooter","$event"],"sources":["../../../src/code-example/components/AsyncApiCodeExample.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarWrappingText } from '@scalar/components/wrapping-text'\nimport type {\n  AsyncApiDocument,\n  AsyncApiMessageObject,\n} from '@scalar/types/asyncapi/3.1'\nimport { getResolvedAsyncApiRef } from '@scalar/workspace-store/helpers/get-resolved-async-api-ref'\nimport { computed, ref, watch } from 'vue'\n\nimport { getAsyncApiExampleContext } from '../helpers/get-asyncapi-example-context'\nimport { getGeneratedPayloadExample } from '../helpers/get-generated-payload-example'\nimport { getMessageExampleContent } from '../helpers/get-message-example-content'\nimport ExamplePicker from './ExamplePicker.vue'\n\nconst { document, operationName } = defineProps<{\n  /** A workspace-resolved AsyncAPI 3.x document. */\n  document: AsyncApiDocument\n  /** Key in document.operations. */\n  operationName: string\n}>()\n\ntype PickerOptions = Record<string, { summary: string }>\ntype MessageExample = Exclude<\n  NonNullable<AsyncApiMessageObject['examples']>[number],\n  { $ref: string }\n> & { key: string }\nconst context = computed<ReturnType<typeof getAsyncApiExampleContext>>(() =>\n  getAsyncApiExampleContext(document, operationName),\n)\nconst channelPathParts = computed(() =>\n  (context.value?.channel?.address ?? operationName).split(/({[^}]+})/),\n)\n\nconst selectedMessage = defineModel<string>('selectedMessage', { default: '' })\nconst selectedExample = ref<string>('')\nconst messages = computed<PickerOptions>(() =>\n  Object.fromEntries(\n    (context.value?.messages ?? []).map(({ name, message }) => [\n      name,\n      { summary: message.title || message.name || name },\n    ]),\n  ),\n)\nconst message = computed<AsyncApiMessageObject | undefined>(\n  () =>\n    context.value?.messages.find(({ name }) => name === selectedMessage.value)\n      ?.message,\n)\nconst examples = computed<MessageExample[]>(() =>\n  (message.value?.examples ?? []).flatMap((node, index) => {\n    const example = getResolvedAsyncApiRef(node)\n    return example?.payload !== undefined\n      ? [{ key: String(index), ...example }]\n      : []\n  }),\n)\nconst exampleOptions = computed<PickerOptions>(() =>\n  Object.fromEntries(\n    examples.value.map((example, index) => [\n      example.key,\n      { summary: example.name || example.summary || `Example ${index + 1}` },\n    ]),\n  ),\n)\nconst example = computed<MessageExample | undefined>(() =>\n  examples.value.find(({ key }) => key === selectedExample.value),\n)\nconst messageLabel = computed<string>(\n  () =>\n    `Message: ${messages.value[selectedMessage.value]?.summary ?? 'Select a message'}`,\n)\nconst exampleLabel = computed<string>(\n  () =>\n    `Message example: ${exampleOptions.value[selectedExample.value]?.summary ?? 'Select an example'}`,\n)\n\n// Keep selections valid when operations, messages, or the active document change.\nwatch(\n  messages,\n  (options) => {\n    if (!Object.hasOwn(options, selectedMessage.value))\n      selectedMessage.value = Object.keys(options)[0] ?? ''\n  },\n  { immediate: true },\n)\nwatch([selectedMessage, () => operationName], () => {\n  selectedExample.value = Object.keys(exampleOptions.value)[0] ?? ''\n})\nwatch(\n  exampleOptions,\n  (options) => {\n    if (!Object.hasOwn(options, selectedExample.value))\n      selectedExample.value = Object.keys(options)[0] ?? ''\n  },\n  { immediate: true },\n)\nconst content = computed(() =>\n  getMessageExampleContent(\n    example.value\n      ? example.value.payload\n      : message.value\n        ? getGeneratedPayloadExample(message.value)\n        : undefined,\n    message.value?.contentType ?? document.defaultContentType,\n  ),\n)\n</script>\n\n<template>\n  <ScalarCard\n    class=\"request-card dark-mode min-w-0\"\n    label=\"Message example\">\n    <ScalarCardHeader\n      class=\"flex-nowrap items-start gap-3 pr-2.5 [&_.scalar-card-header-title]:flex-1 [&_.scalar-card-header-title]:whitespace-normal [&>div:last-child]:shrink-0\">\n      <span class=\"sr-only\">Message example for</span>\n      <span\n        class=\"font-code mr-1.5 uppercase\"\n        :class=\"\n          context?.operation.action === 'send' ? 'text-blue' : 'text-green'\n        \"\n        >{{ context?.operation.action }}</span\n      >\n      <span class=\"text-c-2 font-code min-w-0 font-semibold break-words\">\n        <template\n          v-for=\"(part, index) in channelPathParts\"\n          :key=\"index\">\n          <span\n            v-if=\"part.startsWith('{') && part.endsWith('}')\"\n            class=\"text-c-1 whitespace-nowrap\"\n            >{{ part }}</span\n          >\n          <ScalarWrappingText\n            v-else\n            :text=\"part\" />\n        </template>\n      </span>\n    </ScalarCardHeader>\n    <ScalarCardSection class=\"custom-scroll flex flex-1 p-0\">\n      <div class=\"flex w-full flex-col\">\n        <p\n          v-if=\"content?.structural\"\n          class=\"text-c-2 px-3 py-2 text-sm\">\n          Structure only; not encoded\n        </p>\n        <ScalarCodeBlock\n          v-if=\"content\"\n          class=\"bg-b-2 h-full\"\n          :content=\"content.content\"\n          :lang=\"content.lang\"\n          lineNumbers />\n        <p\n          v-else\n          class=\"text-c-2 p-4\"\n          role=\"status\">\n          No message payload example available.\n        </p>\n      </div>\n    </ScalarCardSection>\n    <ScalarCardFooter\n      v-if=\"Object.keys(messages).length || examples.length\"\n      class=\"bg-b-3 relative flex shrink-0 flex-wrap items-center justify-end gap-2 p-1.5\">\n      <div class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n        <ExamplePicker\n          v-if=\"examples.length > 1\"\n          v-model=\"selectedExample\"\n          :aria-label=\"exampleLabel\"\n          :examples=\"exampleOptions\" />\n        <span\n          v-else-if=\"examples.length === 1\"\n          class=\"text-c-2 min-w-0 truncate px-1.5 py-0.75 text-base\">\n          {{ exampleOptions[selectedExample]?.summary }}\n        </span>\n        <div class=\"ml-auto flex min-w-0 items-center\">\n          <ExamplePicker\n            v-if=\"Object.keys(messages).length > 1\"\n            v-model=\"selectedMessage\"\n            :aria-label=\"messageLabel\"\n            :examples=\"messages\" />\n          <span\n            v-else-if=\"Object.keys(messages).length === 1\"\n            class=\"text-c-2 min-w-0 truncate px-1.5 py-0.75 text-base\">\n            {{ messages[selectedMessage]?.summary }}\n          </span>\n        </div>\n      </div>\n    </ScalarCardFooter>\n  </ScalarCard>\n</template>\n\n<style scoped>\n.request-card {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-font-size-3);\n}\n</style>\n"],"mappings":"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"}

package/dist/code-example/components/CodeExample.vue.js

@@ -1,8 +1,8 @@
-import e from "./CodeExample.vue.script.js";
-/* empty css                          */
-import t from "../../_virtual/_plugin-vue_export-helper.js";
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./CodeExample.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                */
 //#region src/code-example/components/CodeExample.vue
-var n = /*#__PURE__*/ t(e, [["__scopeId", "data-v-5374efff"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-5374efff"]]);
 //#endregion
 export { n as default };
 

package/dist/code-example/components/CodeExample.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeExample.vue.js","names":[],"sources":["../../../src/code-example/components/CodeExample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeExampleProps = {\n  /** Localized status text shown when the selected example has no linked code sample. */\n  codeSampleUnavailable?: string\n  /**\n   * Localized purpose of the client picker. It opens the button's accessible name and the\n   * selected client's title is appended, so the name still contains the visible label.\n   */\n  clientPickerLabel?: string\n  /** Localized accessible name for the search field inside the client picker. */\n  clientSearchLabel?: string\n  /**\n   * Localized accessible name for the focusable code sample. The selected client's title is\n   * appended so the announcement also says which language the sample is in.\n   */\n  codeSampleLabel?: string\n  /**\n   * Integration type: determines if the code sample is displayed in a client environment\n   * or in an API reference environment.\n   */\n  integration?: 'client' | 'reference'\n  /**\n   * List of all http clients formatted into option groups for the client selector\n   */\n  clientOptions: ClientOptionGroup[]\n  /**\n   * Pre-selected client, this will determine which client is initially selected in the dropdown.\n   * Either a built-in client id (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).\n   *\n   * Typed as a plain string: unioning the (large) client-id union with the `custom/...`\n   * ids overflows TypeScript's union-complexity limit inside this component's `defineProps`.\n   *\n   * @defaults to a custom sample if one is available, otherwise shell/curl\n   */\n  selectedClient?: string\n  /**\n   * Which server from the spec to use for the code example\n   */\n  selectedServer?: ServerObject | null\n  /**\n   * The selected content type from the requestBody.content, this will determine which examples are available\n   * as well as the content type of the code example\n   *\n   * @defaults to the first content type if not provided\n   */\n  selectedContentType?: string\n  /**\n   * Example name to use for resolving example values for parameters AND requestBody.\n   *\n   * This is the document-wide selection: it is honored only when this operation defines an example\n   * with the same key, so picking an example on one operation syncs the rest without blanking out\n   * operations that do not share that key.\n   *\n   * @example \"limited\"\n   * ```ts\n   * parameters: {\n   *   name: 'foobar',\n   *   in: 'query',\n   *   examples: {\n   *     limited: {\n   *       dataValue: 10,\n   *     }\n   *   }\n   * },\n   * body: {\n   *   content: {\n   *     'application/json': {\n   *       examples: {\n   *         limited: {\n   *           dataValue: { foo: 'bar' },\n   *         }\n   *       }\n   *     }\n   *   }\n   * }\n   *\n   * ```\n   */\n  selectedExample?: string\n  /**\n   * Event bus\n   */\n  eventBus: WorkspaceEventBus\n  /**\n   * The security schemes which are applicable to this operation\n   */\n  securitySchemes: SecuritySchemeObjectSecret[]\n  /**\n   * HTTP method of the operation\n   */\n  method: string\n  /**\n   * Path of the operation\n   */\n  path: string\n  /**\n   * De-referenced OpenAPI Operation object\n   */\n  operation: OperationObject\n  /**\n   * If true and there's no example, we will display a small card with the method and path only\n   */\n  fallback?: boolean\n  /**\n   * A method to generate the label of the block, should return an html string\n   */\n  generateLabel?: () => string\n  /**\n   * If true, render this as a webhook request example\n   */\n  isWebhook?: boolean\n  /**\n   * Workspace + document cookies\n   */\n  globalCookies?: XScalarCookie[]\n  /**\n   * When the request body schema uses oneOf/anyOf, use these selected variants\n   * for the example snippet (e.g. from the schema dropdowns in the API reference).\n   */\n  /** Originating OpenAPI version, used for XML mapping rules. */\n  openapiVersion?: string\n  requestBodyCompositionSelection?: Record<string, number>\n}\n\n/**\n * Request Example\n *\n * The core component for rendering a request example block,\n * this component does not have much of its own state but operates on props and custom events\n *\n * @event workspace:update:selected-client - Emitted when the selected client changes\n * @event workspace:update:selected-example - Emitted when the selected example changes, so other operations can sync\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport {\n  getOperationExamples,\n  resolveOperationExamples,\n} from '@scalar/workspace-store/helpers/operation-examples'\nimport {\n  useExampleVisibility,\n  useExternalExamples,\n} from '@scalar/workspace-store/helpers/use-external-examples'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  onBeforeMount,\n  ref,\n  useId,\n  watch,\n  watchEffect,\n  type ComponentPublicInstance,\n} from 'vue'\n\nimport { filterClientsByQuery } from '../helpers/filter-clients-by-query'\nimport { findClient } from '../helpers/find-client'\nimport { generateCodeSnippet } from '../helpers/generate-code-snippet'\nimport { getClients } from '../helpers/get-clients'\nimport { getCustomCodeSamples } from '../helpers/get-custom-code-samples'\nimport { getSecrets } from '../helpers/get-secrets'\nimport { operationToHar } from '../helpers/operation-to-har/operation-to-har'\nimport type {\n  ClientOption,\n  ClientOptionGroup,\n  CustomClientOption,\n} from '../types'\nimport ExamplePicker from './ExamplePicker.vue'\nimport HttpMethod from './HttpMethod.vue'\n\nconst {\n  integration,\n  codeSampleUnavailable = 'No code sample available for this example.',\n  clientPickerLabel = 'Change code sample language',\n  clientSearchLabel = 'Search clients',\n  codeSampleLabel = 'Code sample',\n  clientOptions,\n  selectedClient,\n  selectedServer = null,\n  selectedContentType,\n  selectedExample,\n  securitySchemes = [],\n  method,\n  eventBus,\n  path,\n  operation,\n  isWebhook,\n  generateLabel,\n  globalCookies,\n  openapiVersion,\n  requestBodyCompositionSelection,\n} = defineProps<CodeExampleProps>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted whenever the example key actually shown for this operation changes.\n   *\n   * This is the resolved local key (not the raw document-wide selection), so layouts that render\n   * the test-request button outside this component can open the client with the same example the\n   * snippet displays.\n   */\n  (e: 'update:exampleKey', value: string): void\n}>()\n\ndefineSlots<{\n  'header': () => unknown\n  /** Rendered at the start of the footer, only while the example picker does not need that space */\n  'footer-start'?: () => unknown\n  'footer': ({ exampleName }: { exampleName: string }) => unknown\n}>()\n\n/** Grab the examples for the given content type */\nconst requestBodyExamples = computed(() => {\n  const content = getResolvedRef(operation.requestBody)?.content ?? {}\n  const contentType = selectedContentType || Object.keys(content)[0]\n  if (!contentType) return {}\n\n  const examples = content[contentType]?.examples ?? {}\n\n  return examples\n})\n\n/**\n * The example key actually shown for this operation.\n *\n * `selectedExample` is the document-wide selection that syncs across operations. We honor it only\n * when this operation actually defines that key, otherwise we keep the local example: a selection\n * on one operation should never blank out an operation that does not share the same example.\n */\nconst localExampleKey = ref('')\n\n/** Resolve the key to display, preferring the document-wide selection when this operation has it */\nconst resolveExampleKey = (preferred: string | undefined): string => {\n  const keys = Object.keys(requestBodyExamples.value)\n  if (preferred && keys.includes(preferred)) {\n    return preferred\n  }\n  // Keep the current local example when it is still valid, otherwise fall back to the first one\n  if (localExampleKey.value && keys.includes(localExampleKey.value)) {\n    return localExampleKey.value\n  }\n  return keys[0] ?? ''\n}\n\n// Set the initial example from the document-wide selection, falling back to the first example\nonBeforeMount(() => {\n  localExampleKey.value = resolveExampleKey(selectedExample)\n})\n\n// Follow the document-wide selection when it changes and this operation has that example\nwatch(\n  () => selectedExample,\n  (preferred) => {\n    localExampleKey.value = resolveExampleKey(preferred)\n  },\n)\n\n/** Reset the selected example key if the content type changes and the new content type doesn't have the previously selected example */\nwatch(\n  () => selectedContentType,\n  () => {\n    if (\n      !Object.keys(requestBodyExamples.value).includes(localExampleKey.value)\n    ) {\n      // Re-resolve so the new content type still follows the document-wide selection when it has\n      // that key, instead of always snapping back to the first example\n      localExampleKey.value = resolveExampleKey(selectedExample)\n    }\n  },\n)\n\n// Keep the parent informed of the resolved key so a test-request button rendered outside this\n// component (e.g. the classic layout header) opens the client with the example the snippet shows\nwatchEffect(() => {\n  emit('update:exampleKey', localExampleKey.value)\n})\n\n/** Select an example locally and sync the choice across the document */\nconst selectExample = (key: string) => {\n  localExampleKey.value = key\n  eventBus.emit('workspace:update:selected-example', key)\n}\n\n/** Grab any custom code samples from the operation */\nconst customCodeSamples = computed(() => getCustomCodeSamples(operation))\n\n/** Merge custom code samples with the client options */\nconst clients = computed(() =>\n  getClients(\n    customCodeSamples.value.samples,\n    clientOptions,\n    customCodeSamples.value.label,\n  ),\n)\n\n/** Total number of available clients across all option groups */\nconst clientCount = computed(() =>\n  clients.value.reduce((total, group) => total + group.options.length, 0),\n)\n\n/** The locally selected client which would include code samples from this operation only */\nconst localSelectedClient = ref<ClientOption | CustomClientOption | undefined>(\n  findClient(clients.value, selectedClient),\n)\n\n/**\n * Re-resolve the local client whenever the global selection or the available\n * clients change. Watching `clients` matters when navigating between operations:\n * the stored id stays the same, but the matching option (e.g. a custom sample)\n * differs per operation, so without this the snippet could go stale.\n */\nwatch([() => selectedClient, clients], ([newClient]) => {\n  const client = findClient(clients.value, newClient)\n  if (client) {\n    localSelectedClient.value = client\n  }\n})\n\n/**\n * Accessible name for the client picker.\n *\n * On its own the button reads as its current value (\"C Libcurl\"), which never\n * says what activating it does. The visible title stays part of the name so it\n * still matches what is on screen.\n */\nconst clientPickerAriaLabel = computed(() =>\n  [clientPickerLabel, localSelectedClient.value?.title]\n    .filter(Boolean)\n    .join(': '),\n)\n\n/**\n * Accessible name for the focusable code sample, e.g. \"Code sample: Shell cURL\".\n *\n * Screen readers announce only the name and role when focus lands on the scroller, so the\n * name tells the user both what the region is and which client it is generated for.\n */\nconst codeSampleAriaLabel = computed(() =>\n  [codeSampleLabel, localSelectedClient.value?.title]\n    .filter(Boolean)\n    .join(': '),\n)\n\nconst elem = ref<ComponentPublicInstance | null>(null)\nconst visible = useExampleVisibility(elem)\nconst externalExamples = useExternalExamples(\n  () =>\n    getOperationExamples(operation, localExampleKey.value, selectedContentType),\n  () => visible.value,\n)\nconst resolvedOperation = computed(() =>\n  resolveOperationExamples(\n    operation,\n    localExampleKey.value,\n    selectedContentType,\n    externalExamples.resolve,\n  ),\n)\n\n/** Keep the picker available because it also selects the example opened by Test Request. */\nconst showExamplePicker = computed(\n  () => Object.keys(requestBodyExamples.value).length > 1,\n)\n\n/** Generate HAR data for webhook requests */\nconst webhookHar = computed(() => {\n  if (!isWebhook) return null\n\n  try {\n    return operationToHar({\n      operation: resolvedOperation.value,\n      method,\n      path,\n      example: localExampleKey.value,\n      openapiVersion,\n      requestBodyCompositionSelection,\n      // Only required parameters are shown in code examples; optional parameters\n      // are omitted unless explicitly enabled via `x-disabled: false`.\n      defaultDisabledParameters: true,\n    })\n  } catch (error) {\n    console.error('[webhookHar]', error)\n    return null\n  }\n})\n\n/** Generate the code snippet for the selected example */\nconst generatedCode = computed<string | null>(() => {\n  if (isWebhook) {\n    return webhookHar.value?.postData?.text ?? ''\n  }\n\n  return generateCodeSnippet({\n    // Only required parameters are shown in code examples; optional parameters\n    // are omitted unless explicitly enabled via `x-disabled: false`.\n    defaultDisabledParameters: true,\n    includeDefaultHeaders: integration === 'client',\n    clientId: localSelectedClient.value?.id,\n    customCodeSamples: customCodeSamples.value.samples,\n    operation: resolvedOperation.value,\n    method,\n    path,\n    contentType: selectedContentType,\n    server: selectedServer,\n    securitySchemes,\n    example: localExampleKey.value,\n    globalCookies,\n    openapiVersion,\n    requestBodyCompositionSelection,\n  })\n})\n\n/** The language for the code block, used for syntax highlighting */\nconst codeBlockLanguage = computed(() => {\n  if (isWebhook) {\n    return webhookLanguage.value\n  }\n\n  return localSelectedClient.value?.lang\n})\n\n/** Determine the language for webhook content based on MIME type */\nconst webhookLanguage = computed<string>(() => {\n  if (!webhookHar.value?.postData) return 'json'\n\n  const contentType = webhookHar.value.postData.mimeType\n  if (contentType?.includes('json')) return 'json'\n  if (contentType?.includes('xml')) return 'xml'\n  if (contentType?.includes('yaml') || contentType?.includes('yml'))\n    return 'yaml'\n  if (contentType?.includes('text/plain')) return 'text'\n\n  return 'json'\n})\n\n/**  Block secrets from being shown in the code block */\nconst secretCredentials = computed(() => getSecrets(securitySchemes))\n\n/** Set custom example, or update the selected HTTP client globally */\nconst selectClient = (option: ClientOption) => {\n  // We need to freeze the ui to prevent scrolling as the clients change\n  if (elem.value) {\n    const unfreeze = freezeElement(elem.value.$el)\n    setTimeout(() => {\n      unfreeze()\n    }, 300)\n  }\n  // Update to the local example\n  localSelectedClient.value = option\n\n  // Sync the selection globally so other operations follow along. Custom samples\n  // sync too (keyed by language), so picking e.g. the Python SDK example here\n  // shows the Python example on every operation that ships one.\n  if (option) {\n    eventBus.emit('workspace:update:selected-client', option.id)\n  }\n}\n\n// Virtualize the code block if it's too large\n// This prevents the entire app from freezing up if there's a massive example\n// We set a lower threshold here as code examples can get quite large\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualize = computed(\n  () => (generatedCode.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD,\n)\n\nconst id = useId()\n</script>\n<template>\n  <ScalarCard\n    v-if=\"\n      generatedCode === null || generatedCode || externalExamples.pending.value\n    \"\n    ref=\"elem\"\n    class=\"request-card dark-mode\">\n    <!-- Header -->\n    <ScalarCardHeader class=\"pr-2.5\">\n      <span class=\"sr-only\">Request Example for</span>\n      <HttpMethod\n        as=\"span\"\n        class=\"request-method\"\n        :method=\"method\" />\n      <span\n        v-if=\"generateLabel\"\n        v-html=\"generateLabel()\" />\n      <slot name=\"header\" />\n      <!-- Client picker -->\n      <template\n        v-if=\"!isWebhook && clientCount\"\n        #actions>\n        <!-- Multiple clients: render a dropdown to switch between them -->\n        <ScalarCombobox\n          v-if=\"clientCount > 1\"\n          class=\"max-h-80\"\n          :filterFn=\"filterClientsByQuery\"\n          :inputLabel=\"clientSearchLabel\"\n          :modelValue=\"localSelectedClient\"\n          :options=\"clients\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectClient($event as ClientOption)\">\n          <ScalarButton\n            :aria-label=\"clientPickerAriaLabel\"\n            class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal\"\n            data-testid=\"client-picker\"\n            variant=\"ghost\">\n            {{ localSelectedClient?.title }}\n            <ScalarIconCaretDown\n              class=\"ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n              weight=\"bold\" />\n          </ScalarButton>\n        </ScalarCombobox>\n        <!-- Single client: just show its label, no need for a dropdown -->\n        <span\n          v-else\n          class=\"text-c-2 flex h-full w-fit items-center px-0.5 py-0 text-base font-normal\"\n          data-testid=\"client-picker\">\n          {{ localSelectedClient?.title }}\n        </span>\n      </template>\n    </ScalarCardHeader>\n\n    <!-- Code snippet -->\n    <ScalarCardSection class=\"request-editor-section custom-scroll p-0\">\n      <div\n        v-if=\"externalExamples.pending.value\"\n        class=\"text-c-2 p-4\"\n        role=\"status\">\n        <template v-if=\"externalExamples.failed.value\">\n          Could not load this example.\n          <ScalarButton\n            size=\"sm\"\n            variant=\"ghost\"\n            @click=\"externalExamples.retry\">\n            Retry\n          </ScalarButton>\n        </template>\n        <template v-else>Loading example…</template>\n      </div>\n      <div\n        v-else-if=\"generatedCode === null\"\n        class=\"text-c-2 p-4\"\n        role=\"status\">\n        {{ codeSampleUnavailable }}\n      </div>\n      <div\n        v-else\n        :id=\"`${id}-example`\"\n        class=\"code-snippet\">\n        <ScalarCodeBlock\n          v-if=\"!shouldVirtualize\"\n          class=\"bg-b-2 h-full\"\n          :content=\"generatedCode\"\n          :hideCredentials=\"secretCredentials\"\n          :label=\"codeSampleAriaLabel\"\n          :lang=\"codeBlockLanguage\"\n          lineNumbers />\n        <ScalarVirtualText\n          v-else\n          aria-label=\"Request code sample\"\n          containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n          contentClass=\"language-plaintext whitespace-pre font-code text-base p-2\"\n          :lineHeight=\"20\"\n          role=\"region\"\n          :text=\"generatedCode\" />\n      </div>\n    </ScalarCardSection>\n\n    <!-- Footer -->\n    <ScalarCardFooter\n      v-if=\"showExamplePicker || $slots.footer || $slots['footer-start']\"\n      class=\"request-card-footer bg-b-3\"\n      :class=\"{\n        'request-card-footer--wraps':\n          !showExamplePicker && $slots['footer-start'],\n      }\">\n      <!-- Example picker -->\n      <div\n        v-if=\"showExamplePicker\"\n        class=\"request-card-footer-addon\">\n        <template v-if=\"Object.keys(requestBodyExamples).length\">\n          <ExamplePicker\n            :examples=\"requestBodyExamples\"\n            :modelValue=\"localExampleKey\"\n            @update:modelValue=\"selectExample\" />\n        </template>\n      </div>\n      <!-- Otherwise the start of the footer is free for the caller -->\n      <div\n        v-else-if=\"$slots['footer-start']\"\n        class=\"request-card-footer-start\">\n        <slot name=\"footer-start\" />\n      </div>\n\n      <!-- Footer -->\n      <slot\n        :exampleName=\"localExampleKey\"\n        name=\"footer\" />\n    </ScalarCardFooter>\n  </ScalarCard>\n\n  <!-- Fallback card with just method and path in the case of no examples -->\n  <ScalarCard\n    v-else-if=\"fallback\"\n    class=\"request-card dark-mode\">\n    <ScalarCardSection class=\"request-card-simple\">\n      <div class=\"request-header\">\n        <HttpMethod\n          as=\"span\"\n          class=\"request-method\"\n          :method=\"method\" />\n        <slot name=\"header\" />\n      </div>\n      <slot\n        :exampleName=\"localExampleKey\"\n        name=\"footer\" />\n    </ScalarCardSection>\n  </ScalarCard>\n</template>\n<style scoped>\n.request-card {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-font-size-3);\n}\n.request-method {\n  font-family: var(--scalar-font-code);\n  margin-right: 6px;\n}\n.request-card-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding: 6px;\n  flex-shrink: 0;\n  position: relative;\n}\n/*\n * Footer-start content keeps its full width; when the footer is too narrow for everything,\n * the end controls wrap onto a second line instead of squeezing or covering it.\n */\n.request-card-footer--wraps {\n  flex-wrap: wrap;\n  row-gap: 4px;\n}\n.request-card-footer-start {\n  display: flex;\n  align-items: center;\n  flex: 1 0 auto;\n}\n.request-card-footer-addon {\n  display: flex;\n  align-items: center;\n\n  flex: 1;\n  min-width: 0;\n}\n.request-editor-section {\n  display: flex;\n  flex: 1;\n}\n.request-card-simple {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: 8px 8px 8px 12px;\n\n  font-size: var(--scalar-small);\n}\n.code-snippet {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"CodeExample.vue.js","names":["_sfc_main","_plugin_vue_export_helper_default","CodeExample_vue_vue_type_script_setup_true_lang_default","CodeExample_default"],"sources":["../../../src/code-example/components/CodeExample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeExampleProps = {\n  /** Localized status text shown when the selected example has no linked code sample. */\n  codeSampleUnavailable?: string\n  /**\n   * Localized purpose of the client picker. It opens the button's accessible name and the\n   * selected client's title is appended, so the name still contains the visible label.\n   */\n  clientPickerLabel?: string\n  /** Localized accessible name for the search field inside the client picker. */\n  clientSearchLabel?: string\n  /**\n   * Localized accessible name for the focusable code sample. The selected client's title is\n   * appended so the announcement also says which language the sample is in.\n   */\n  codeSampleLabel?: string\n  /**\n   * Integration type: determines if the code sample is displayed in a client environment\n   * or in an API reference environment.\n   */\n  integration?: 'client' | 'reference'\n  /**\n   * List of all http clients formatted into option groups for the client selector\n   */\n  clientOptions: ClientOptionGroup[]\n  /**\n   * Pre-selected client, this will determine which client is initially selected in the dropdown.\n   * Either a built-in client id (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).\n   *\n   * Typed as a plain string: unioning the (large) client-id union with the `custom/...`\n   * ids overflows TypeScript's union-complexity limit inside this component's `defineProps`.\n   *\n   * @defaults to a custom sample if one is available, otherwise shell/curl\n   */\n  selectedClient?: string\n  /**\n   * Which server from the spec to use for the code example\n   */\n  selectedServer?: ServerObject | null\n  /**\n   * The selected content type from the requestBody.content, this will determine which examples are available\n   * as well as the content type of the code example\n   *\n   * @defaults to the first content type if not provided\n   */\n  selectedContentType?: string\n  /**\n   * Example name to use for resolving example values for parameters AND requestBody.\n   *\n   * This is the document-wide selection: it is honored only when this operation defines an example\n   * with the same key, so picking an example on one operation syncs the rest without blanking out\n   * operations that do not share that key.\n   *\n   * @example \"limited\"\n   * ```ts\n   * parameters: {\n   *   name: 'foobar',\n   *   in: 'query',\n   *   examples: {\n   *     limited: {\n   *       dataValue: 10,\n   *     }\n   *   }\n   * },\n   * body: {\n   *   content: {\n   *     'application/json': {\n   *       examples: {\n   *         limited: {\n   *           dataValue: { foo: 'bar' },\n   *         }\n   *       }\n   *     }\n   *   }\n   * }\n   *\n   * ```\n   */\n  selectedExample?: string\n  /**\n   * Event bus\n   */\n  eventBus: WorkspaceEventBus\n  /**\n   * The security schemes which are applicable to this operation\n   */\n  securitySchemes: SecuritySchemeObjectSecret[]\n  /**\n   * HTTP method of the operation\n   */\n  method: string\n  /**\n   * Path of the operation\n   */\n  path: string\n  /**\n   * De-referenced OpenAPI Operation object\n   */\n  operation: OperationObject\n  /**\n   * If true and there's no example, we will display a small card with the method and path only\n   */\n  fallback?: boolean\n  /**\n   * A method to generate the label of the block, should return an html string\n   */\n  generateLabel?: () => string\n  /**\n   * If true, render this as a webhook request example\n   */\n  isWebhook?: boolean\n  /**\n   * Workspace + document cookies\n   */\n  globalCookies?: XScalarCookie[]\n  /**\n   * When the request body schema uses oneOf/anyOf, use these selected variants\n   * for the example snippet (e.g. from the schema dropdowns in the API reference).\n   */\n  /** Originating OpenAPI version, used for XML mapping rules. */\n  openapiVersion?: string\n  requestBodyCompositionSelection?: Record<string, number>\n}\n\n/**\n * Request Example\n *\n * The core component for rendering a request example block,\n * this component does not have much of its own state but operates on props and custom events\n *\n * @event workspace:update:selected-client - Emitted when the selected client changes\n * @event workspace:update:selected-example - Emitted when the selected example changes, so other operations can sync\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport {\n  getOperationExamples,\n  resolveOperationExamples,\n} from '@scalar/workspace-store/helpers/operation-examples'\nimport {\n  useExampleVisibility,\n  useExternalExamples,\n} from '@scalar/workspace-store/helpers/use-external-examples'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  onBeforeMount,\n  ref,\n  useId,\n  watch,\n  watchEffect,\n  type ComponentPublicInstance,\n} from 'vue'\n\nimport { filterClientsByQuery } from '../helpers/filter-clients-by-query'\nimport { findClient } from '../helpers/find-client'\nimport { generateCodeSnippet } from '../helpers/generate-code-snippet'\nimport { getClients } from '../helpers/get-clients'\nimport { getCustomCodeSamples } from '../helpers/get-custom-code-samples'\nimport { getSecrets } from '../helpers/get-secrets'\nimport { operationToHar } from '../helpers/operation-to-har/operation-to-har'\nimport type {\n  ClientOption,\n  ClientOptionGroup,\n  CustomClientOption,\n} from '../types'\nimport ExamplePicker from './ExamplePicker.vue'\nimport HttpMethod from './HttpMethod.vue'\n\nconst {\n  integration,\n  codeSampleUnavailable = 'No code sample available for this example.',\n  clientPickerLabel = 'Change code sample language',\n  clientSearchLabel = 'Search clients',\n  codeSampleLabel = 'Code sample',\n  clientOptions,\n  selectedClient,\n  selectedServer = null,\n  selectedContentType,\n  selectedExample,\n  securitySchemes = [],\n  method,\n  eventBus,\n  path,\n  operation,\n  isWebhook,\n  generateLabel,\n  globalCookies,\n  openapiVersion,\n  requestBodyCompositionSelection,\n} = defineProps<CodeExampleProps>()\n\nconst emit = defineEmits<{\n  /**\n   * Emitted whenever the example key actually shown for this operation changes.\n   *\n   * This is the resolved local key (not the raw document-wide selection), so layouts that render\n   * the test-request button outside this component can open the client with the same example the\n   * snippet displays.\n   */\n  (e: 'update:exampleKey', value: string): void\n}>()\n\ndefineSlots<{\n  'header': () => unknown\n  /** Rendered at the start of the footer, only while the example picker does not need that space */\n  'footer-start'?: () => unknown\n  'footer': ({ exampleName }: { exampleName: string }) => unknown\n}>()\n\n/** Grab the examples for the given content type */\nconst requestBodyExamples = computed(() => {\n  const content = getResolvedRef(operation.requestBody)?.content ?? {}\n  const contentType = selectedContentType || Object.keys(content)[0]\n  if (!contentType) return {}\n\n  const examples = content[contentType]?.examples ?? {}\n\n  return examples\n})\n\n/**\n * The example key actually shown for this operation.\n *\n * `selectedExample` is the document-wide selection that syncs across operations. We honor it only\n * when this operation actually defines that key, otherwise we keep the local example: a selection\n * on one operation should never blank out an operation that does not share the same example.\n */\nconst localExampleKey = ref('')\n\n/** Resolve the key to display, preferring the document-wide selection when this operation has it */\nconst resolveExampleKey = (preferred: string | undefined): string => {\n  const keys = Object.keys(requestBodyExamples.value)\n  if (preferred && keys.includes(preferred)) {\n    return preferred\n  }\n  // Keep the current local example when it is still valid, otherwise fall back to the first one\n  if (localExampleKey.value && keys.includes(localExampleKey.value)) {\n    return localExampleKey.value\n  }\n  return keys[0] ?? ''\n}\n\n// Set the initial example from the document-wide selection, falling back to the first example\nonBeforeMount(() => {\n  localExampleKey.value = resolveExampleKey(selectedExample)\n})\n\n// Follow the document-wide selection when it changes and this operation has that example\nwatch(\n  () => selectedExample,\n  (preferred) => {\n    localExampleKey.value = resolveExampleKey(preferred)\n  },\n)\n\n/** Reset the selected example key if the content type changes and the new content type doesn't have the previously selected example */\nwatch(\n  () => selectedContentType,\n  () => {\n    if (\n      !Object.keys(requestBodyExamples.value).includes(localExampleKey.value)\n    ) {\n      // Re-resolve so the new content type still follows the document-wide selection when it has\n      // that key, instead of always snapping back to the first example\n      localExampleKey.value = resolveExampleKey(selectedExample)\n    }\n  },\n)\n\n// Keep the parent informed of the resolved key so a test-request button rendered outside this\n// component (e.g. the classic layout header) opens the client with the example the snippet shows\nwatchEffect(() => {\n  emit('update:exampleKey', localExampleKey.value)\n})\n\n/** Select an example locally and sync the choice across the document */\nconst selectExample = (key: string) => {\n  localExampleKey.value = key\n  eventBus.emit('workspace:update:selected-example', key)\n}\n\n/** Grab any custom code samples from the operation */\nconst customCodeSamples = computed(() => getCustomCodeSamples(operation))\n\n/** Merge custom code samples with the client options */\nconst clients = computed(() =>\n  getClients(\n    customCodeSamples.value.samples,\n    clientOptions,\n    customCodeSamples.value.label,\n  ),\n)\n\n/** Total number of available clients across all option groups */\nconst clientCount = computed(() =>\n  clients.value.reduce((total, group) => total + group.options.length, 0),\n)\n\n/** The locally selected client which would include code samples from this operation only */\nconst localSelectedClient = ref<ClientOption | CustomClientOption | undefined>(\n  findClient(clients.value, selectedClient),\n)\n\n/**\n * Re-resolve the local client whenever the global selection or the available\n * clients change. Watching `clients` matters when navigating between operations:\n * the stored id stays the same, but the matching option (e.g. a custom sample)\n * differs per operation, so without this the snippet could go stale.\n */\nwatch([() => selectedClient, clients], ([newClient]) => {\n  const client = findClient(clients.value, newClient)\n  if (client) {\n    localSelectedClient.value = client\n  }\n})\n\n/**\n * Accessible name for the client picker.\n *\n * On its own the button reads as its current value (\"C Libcurl\"), which never\n * says what activating it does. The visible title stays part of the name so it\n * still matches what is on screen.\n */\nconst clientPickerAriaLabel = computed(() =>\n  [clientPickerLabel, localSelectedClient.value?.title]\n    .filter(Boolean)\n    .join(': '),\n)\n\n/**\n * Accessible name for the focusable code sample, e.g. \"Code sample: Shell cURL\".\n *\n * Screen readers announce only the name and role when focus lands on the scroller, so the\n * name tells the user both what the region is and which client it is generated for.\n */\nconst codeSampleAriaLabel = computed(() =>\n  [codeSampleLabel, localSelectedClient.value?.title]\n    .filter(Boolean)\n    .join(': '),\n)\n\nconst elem = ref<ComponentPublicInstance | null>(null)\nconst visible = useExampleVisibility(elem)\nconst externalExamples = useExternalExamples(\n  () =>\n    getOperationExamples(operation, localExampleKey.value, selectedContentType),\n  () => visible.value,\n)\nconst resolvedOperation = computed(() =>\n  resolveOperationExamples(\n    operation,\n    localExampleKey.value,\n    selectedContentType,\n    externalExamples.resolve,\n  ),\n)\n\n/** Keep the picker available because it also selects the example opened by Test Request. */\nconst showExamplePicker = computed(\n  () => Object.keys(requestBodyExamples.value).length > 1,\n)\n\n/** Generate HAR data for webhook requests */\nconst webhookHar = computed(() => {\n  if (!isWebhook) return null\n\n  try {\n    return operationToHar({\n      operation: resolvedOperation.value,\n      method,\n      path,\n      example: localExampleKey.value,\n      openapiVersion,\n      requestBodyCompositionSelection,\n      // Only required parameters are shown in code examples; optional parameters\n      // are omitted unless explicitly enabled via `x-disabled: false`.\n      defaultDisabledParameters: true,\n    })\n  } catch (error) {\n    console.error('[webhookHar]', error)\n    return null\n  }\n})\n\n/** Generate the code snippet for the selected example */\nconst generatedCode = computed<string | null>(() => {\n  if (isWebhook) {\n    return webhookHar.value?.postData?.text ?? ''\n  }\n\n  return generateCodeSnippet({\n    // Only required parameters are shown in code examples; optional parameters\n    // are omitted unless explicitly enabled via `x-disabled: false`.\n    defaultDisabledParameters: true,\n    includeDefaultHeaders: integration === 'client',\n    clientId: localSelectedClient.value?.id,\n    customCodeSamples: customCodeSamples.value.samples,\n    operation: resolvedOperation.value,\n    method,\n    path,\n    contentType: selectedContentType,\n    server: selectedServer,\n    securitySchemes,\n    example: localExampleKey.value,\n    globalCookies,\n    openapiVersion,\n    requestBodyCompositionSelection,\n  })\n})\n\n/** The language for the code block, used for syntax highlighting */\nconst codeBlockLanguage = computed(() => {\n  if (isWebhook) {\n    return webhookLanguage.value\n  }\n\n  return localSelectedClient.value?.lang\n})\n\n/** Determine the language for webhook content based on MIME type */\nconst webhookLanguage = computed<string>(() => {\n  if (!webhookHar.value?.postData) return 'json'\n\n  const contentType = webhookHar.value.postData.mimeType\n  if (contentType?.includes('json')) return 'json'\n  if (contentType?.includes('xml')) return 'xml'\n  if (contentType?.includes('yaml') || contentType?.includes('yml'))\n    return 'yaml'\n  if (contentType?.includes('text/plain')) return 'text'\n\n  return 'json'\n})\n\n/**  Block secrets from being shown in the code block */\nconst secretCredentials = computed(() => getSecrets(securitySchemes))\n\n/** Set custom example, or update the selected HTTP client globally */\nconst selectClient = (option: ClientOption) => {\n  // We need to freeze the ui to prevent scrolling as the clients change\n  if (elem.value) {\n    const unfreeze = freezeElement(elem.value.$el)\n    setTimeout(() => {\n      unfreeze()\n    }, 300)\n  }\n  // Update to the local example\n  localSelectedClient.value = option\n\n  // Sync the selection globally so other operations follow along. Custom samples\n  // sync too (keyed by language), so picking e.g. the Python SDK example here\n  // shows the Python example on every operation that ships one.\n  if (option) {\n    eventBus.emit('workspace:update:selected-client', option.id)\n  }\n}\n\n// Virtualize the code block if it's too large\n// This prevents the entire app from freezing up if there's a massive example\n// We set a lower threshold here as code examples can get quite large\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualize = computed(\n  () => (generatedCode.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD,\n)\n\nconst id = useId()\n</script>\n<template>\n  <ScalarCard\n    v-if=\"\n      generatedCode === null || generatedCode || externalExamples.pending.value\n    \"\n    ref=\"elem\"\n    class=\"request-card dark-mode\">\n    <!-- Header -->\n    <ScalarCardHeader class=\"pr-2.5\">\n      <span class=\"sr-only\">Request Example for</span>\n      <HttpMethod\n        as=\"span\"\n        class=\"request-method\"\n        :method=\"method\" />\n      <span\n        v-if=\"generateLabel\"\n        v-html=\"generateLabel()\" />\n      <slot name=\"header\" />\n      <!-- Client picker -->\n      <template\n        v-if=\"!isWebhook && clientCount\"\n        #actions>\n        <!-- Multiple clients: render a dropdown to switch between them -->\n        <ScalarCombobox\n          v-if=\"clientCount > 1\"\n          class=\"max-h-80\"\n          :filterFn=\"filterClientsByQuery\"\n          :inputLabel=\"clientSearchLabel\"\n          :modelValue=\"localSelectedClient\"\n          :options=\"clients\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectClient($event as ClientOption)\">\n          <ScalarButton\n            :aria-label=\"clientPickerAriaLabel\"\n            class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal\"\n            data-testid=\"client-picker\"\n            variant=\"ghost\">\n            {{ localSelectedClient?.title }}\n            <ScalarIconCaretDown\n              class=\"ui-open:rotate-180 mt-px size-3 transition-transform duration-100\"\n              weight=\"bold\" />\n          </ScalarButton>\n        </ScalarCombobox>\n        <!-- Single client: just show its label, no need for a dropdown -->\n        <span\n          v-else\n          class=\"text-c-2 flex h-full w-fit items-center px-0.5 py-0 text-base font-normal\"\n          data-testid=\"client-picker\">\n          {{ localSelectedClient?.title }}\n        </span>\n      </template>\n    </ScalarCardHeader>\n\n    <!-- Code snippet -->\n    <ScalarCardSection class=\"request-editor-section custom-scroll p-0\">\n      <div\n        v-if=\"externalExamples.pending.value\"\n        class=\"text-c-2 p-4\"\n        role=\"status\">\n        <template v-if=\"externalExamples.failed.value\">\n          Could not load this example.\n          <ScalarButton\n            size=\"sm\"\n            variant=\"ghost\"\n            @click=\"externalExamples.retry\">\n            Retry\n          </ScalarButton>\n        </template>\n        <template v-else>Loading example…</template>\n      </div>\n      <div\n        v-else-if=\"generatedCode === null\"\n        class=\"text-c-2 p-4\"\n        role=\"status\">\n        {{ codeSampleUnavailable }}\n      </div>\n      <div\n        v-else\n        :id=\"`${id}-example`\"\n        class=\"code-snippet\">\n        <ScalarCodeBlock\n          v-if=\"!shouldVirtualize\"\n          class=\"bg-b-2 h-full\"\n          :content=\"generatedCode\"\n          :hideCredentials=\"secretCredentials\"\n          :label=\"codeSampleAriaLabel\"\n          :lang=\"codeBlockLanguage\"\n          lineNumbers />\n        <ScalarVirtualText\n          v-else\n          aria-label=\"Request code sample\"\n          containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n          contentClass=\"language-plaintext whitespace-pre font-code text-base p-2\"\n          :lineHeight=\"20\"\n          role=\"region\"\n          :text=\"generatedCode\" />\n      </div>\n    </ScalarCardSection>\n\n    <!-- Footer -->\n    <ScalarCardFooter\n      v-if=\"showExamplePicker || $slots.footer || $slots['footer-start']\"\n      class=\"request-card-footer bg-b-3\"\n      :class=\"{\n        'request-card-footer--wraps':\n          !showExamplePicker && $slots['footer-start'],\n      }\">\n      <!-- Example picker -->\n      <div\n        v-if=\"showExamplePicker\"\n        class=\"request-card-footer-addon\">\n        <template v-if=\"Object.keys(requestBodyExamples).length\">\n          <ExamplePicker\n            :examples=\"requestBodyExamples\"\n            :modelValue=\"localExampleKey\"\n            @update:modelValue=\"selectExample\" />\n        </template>\n      </div>\n      <!-- Otherwise the start of the footer is free for the caller -->\n      <div\n        v-else-if=\"$slots['footer-start']\"\n        class=\"request-card-footer-start\">\n        <slot name=\"footer-start\" />\n      </div>\n\n      <!-- Footer -->\n      <slot\n        :exampleName=\"localExampleKey\"\n        name=\"footer\" />\n    </ScalarCardFooter>\n  </ScalarCard>\n\n  <!-- Fallback card with just method and path in the case of no examples -->\n  <ScalarCard\n    v-else-if=\"fallback\"\n    class=\"request-card dark-mode\">\n    <ScalarCardSection class=\"request-card-simple\">\n      <div class=\"request-header\">\n        <HttpMethod\n          as=\"span\"\n          class=\"request-method\"\n          :method=\"method\" />\n        <slot name=\"header\" />\n      </div>\n      <slot\n        :exampleName=\"localExampleKey\"\n        name=\"footer\" />\n    </ScalarCardSection>\n  </ScalarCard>\n</template>\n<style scoped>\n.request-card {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-font-size-3);\n}\n.request-method {\n  font-family: var(--scalar-font-code);\n  margin-right: 6px;\n}\n.request-card-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding: 6px;\n  flex-shrink: 0;\n  position: relative;\n}\n/*\n * Footer-start content keeps its full width; when the footer is too narrow for everything,\n * the end controls wrap onto a second line instead of squeezing or covering it.\n */\n.request-card-footer--wraps {\n  flex-wrap: wrap;\n  row-gap: 4px;\n}\n.request-card-footer-start {\n  display: flex;\n  align-items: center;\n  flex: 1 0 auto;\n}\n.request-card-footer-addon {\n  display: flex;\n  align-items: center;\n\n  flex: 1;\n  min-width: 0;\n}\n.request-editor-section {\n  display: flex;\n  flex: 1;\n}\n.request-card-simple {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: 8px 8px 8px 12px;\n\n  font-size: var(--scalar-small);\n}\n.code-snippet {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n</style>\n"],"mappings":""}