@scalar/blocks 0.1.19 → 0.1.20

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalar/blocks
 
+## 0.1.20
+
+### Patch Changes
+
+- [#10240](https://github.com/scalar/scalar/pull/10240): Load external examples on demand when their selected preview is visible or Test Request opens, instead of downloading every payload while loading the API description. Share and cache downloads, preserve relative URL origins, and show loading and retry states while preventing incomplete requests from being sent.
+
 ## 0.1.19
 
 ## 0.1.18

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

@@ -1 +1 @@
-{"version":3,"file":"CodeExample.vue.d.ts","sourceRoot":"","sources":["../../../src/code-example/components/CodeExample.vue"],"names":[],"mappings":"AAukBA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAErF,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAkBrE,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,UAAU,CAAA;AAKjB,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+BG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAA;IAC3B;;OAEG;IACH,eAAe,EAAE,0BAA0B,EAAE,CAAA;IAC7C;;OAEG;IACH,MAAM,EAAE,cAAc,CAAA;IACtB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,SAAS,EAAE,eAAe,CAAA;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,MAAM,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,EAAE,CAAA;IAC/B;;;OAGG;IACH,+BAA+B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzD,CAAA;AAED;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;YAkCR,MAAM,OAAO;YACb,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO;EAwmB3D,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CodeExample.vue.d.ts","sourceRoot":"","sources":["../../../src/code-example/components/CodeExample.vue"],"names":[],"mappings":"AA4mBA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAErF,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAUvE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAkBrE,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,UAAU,CAAA;AAKjB,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+BG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAA;IAC3B;;OAEG;IACH,eAAe,EAAE,0BAA0B,EAAE,CAAA;IAC7C;;OAEG;IACH,MAAM,EAAE,cAAc,CAAA;IACtB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,SAAS,EAAE,eAAe,CAAA;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,MAAM,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,EAAE,CAAA;IAC/B;;;OAGG;IACH,+BAA+B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzD,CAAA;AAED;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;;;;;YAkCR,MAAM,OAAO;YACb,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO;EA4pB3D,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -2,7 +2,7 @@ import e from "./CodeExample.vue.script.js";
 /* empty css                          */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 //#region src/code-example/components/CodeExample.vue
-var n = /*#__PURE__*/ t(e, [["__scopeId", "data-v-82b2d155"]]);
+var n = /*#__PURE__*/ t(e, [["__scopeId", "data-v-8b0cd212"]]);
 //#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  /**\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: HttpMethodType\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  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 type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\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  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  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  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/** Generate HAR data for webhook requests */\nconst webhookHar = computed(() => {\n  if (!isWebhook) return null\n\n  try {\n    return operationToHar({\n      operation,\n      method,\n      path,\n      example: localExampleKey.value,\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>(() => {\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,\n    method,\n    path,\n    contentType: selectedContentType,\n    server: selectedServer,\n    securitySchemes,\n    example: localExampleKey.value,\n    globalCookies,\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/** Grab the ref to freeze the ui as the clients change so there's no jump as the size of the dom changes */\nconst elem = ref<ComponentPublicInstance | null>(null)\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=\"generatedCode\"\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          :modelValue=\"localSelectedClient\"\n          :options=\"clients\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectClient($event as ClientOption)\">\n          <ScalarButton\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        :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          :lang=\"codeBlockLanguage\"\n          lineNumbers />\n        <ScalarVirtualText\n          v-else\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          :text=\"generatedCode\" />\n      </div>\n    </ScalarCardSection>\n\n    <!-- Footer -->\n    <ScalarCardFooter\n      v-if=\"Object.keys(requestBodyExamples).length > 1 || $slots.footer\"\n      class=\"request-card-footer bg-b-3\">\n      <!-- Example picker -->\n      <div\n        v-if=\"Object.keys(requestBodyExamples).length > 1\"\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\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  text-transform: uppercase;\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.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":[],"sources":["../../../src/code-example/components/CodeExample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeExampleProps = {\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: HttpMethodType\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  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 type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\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  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  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  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\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/** 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      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>(() => {\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    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=\"generatedCode || externalExamples.pending.value\"\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          :modelValue=\"localSelectedClient\"\n          :options=\"clients\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectClient($event as ClientOption)\">\n          <ScalarButton\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\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          :lang=\"codeBlockLanguage\"\n          lineNumbers />\n        <ScalarVirtualText\n          v-else\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          :text=\"generatedCode\" />\n      </div>\n    </ScalarCardSection>\n\n    <!-- Footer -->\n    <ScalarCardFooter\n      v-if=\"Object.keys(requestBodyExamples).length > 1 || $slots.footer\"\n      class=\"request-card-footer bg-b-3\">\n      <!-- Example picker -->\n      <div\n        v-if=\"Object.keys(requestBodyExamples).length > 1\"\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\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  text-transform: uppercase;\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.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":""}

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

@@ -1,30 +1,36 @@
 import { filterClientsByQuery as e } from "../helpers/filter-clients-by-query.js";
 import { findClient as t } from "../helpers/find-client.js";
 import { operationToHar as n } from "../helpers/operation-to-har/operation-to-har.js";
-import { generateCodeSnippet as r } from "../helpers/generate-code-snippet.js";
-import { getCustomCodeSamples as i } from "../helpers/get-custom-code-samples.js";
-import { getClients as a } from "../helpers/get-clients.js";
-import { getSecrets as o } from "../helpers/get-secrets.js";
-import s from "./ExamplePicker.vue.js";
-import c from "./HttpMethod.vue.js";
-import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as h, createVNode as g, defineComponent as _, onBeforeMount as ee, openBlock as v, ref as y, renderSlot as b, toDisplayString as x, unref as S, useId as C, watch as w, watchEffect as T, withCtx as E } from "vue";
-import { ScalarButton as D } from "@scalar/components/button";
-import { ScalarCard as O, ScalarCardFooter as te, ScalarCardHeader as ne, ScalarCardSection as k } from "@scalar/components/card";
-import { ScalarCodeBlock as A } from "@scalar/components/code-block";
-import { ScalarCombobox as j } from "@scalar/components/combobox";
-import { ScalarVirtualText as M } from "@scalar/components/virtual-text";
-import { freezeElement as N } from "@scalar/helpers/dom/freeze-element";
-import { ScalarIconCaretDown as P } from "@scalar/icons";
-import { getResolvedRef as F } from "@scalar/workspace-store/helpers/get-resolved-ref";
+import { generateCodeSnippet as ee } from "../helpers/generate-code-snippet.js";
+import { getCustomCodeSamples as te } from "../helpers/get-custom-code-samples.js";
+import { getClients as r } from "../helpers/get-clients.js";
+import { getSecrets as i } from "../helpers/get-secrets.js";
+import ne from "./ExamplePicker.vue.js";
+import a from "./HttpMethod.vue.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as re, createTextVNode as f, createVNode as p, defineComponent as m, onBeforeMount as ie, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, unref as y, useId as b, watch as x, watchEffect as S, withCtx as C } from "vue";
+import { ScalarButton as w } from "@scalar/components/button";
+import { ScalarCard as T, ScalarCardFooter as ae, ScalarCardHeader as oe, ScalarCardSection as E } from "@scalar/components/card";
+import { ScalarCodeBlock as se } from "@scalar/components/code-block";
+import { ScalarCombobox as ce } from "@scalar/components/combobox";
+import { ScalarVirtualText as le } from "@scalar/components/virtual-text";
+import { freezeElement as D } from "@scalar/helpers/dom/freeze-element";
+import { ScalarIconCaretDown as O } from "@scalar/icons";
+import { getResolvedRef as k } from "@scalar/workspace-store/helpers/get-resolved-ref";
+import { getOperationExamples as A, resolveOperationExamples as j } from "@scalar/workspace-store/helpers/operation-examples";
+import { useExampleVisibility as M, useExternalExamples as N } from "@scalar/workspace-store/helpers/use-external-examples";
 //#region src/code-example/components/CodeExample.vue?vue&type=script&setup=true&lang.ts
-var I = ["innerHTML"], L = {
+var P = ["innerHTML"], F = {
 	key: 1,
 	class: "text-c-2 flex h-full w-fit items-center px-0.5 py-0 text-base font-normal",
 	"data-testid": "client-picker"
-}, R = ["id"], z = {
+}, I = {
+	key: 0,
+	class: "text-c-2 p-4",
+	role: "status"
+}, L = ["id"], R = {
 	key: 0,
 	class: "request-card-footer-addon"
-}, B = { class: "request-header" }, V = /*@__PURE__*/ _({
+}, z = { class: "request-header" }, B = /*@__PURE__*/ m({
 	__name: "CodeExample",
 	props: {
 		integration: {},
@@ -45,111 +51,111 @@ var I = ["innerHTML"], L = {
 		requestBodyCompositionSelection: {}
 	},
 	emits: ["update:exampleKey"],
-	setup(_, { emit: V }) {
-		let H = V, U = l(() => {
-			let e = F(_.operation.requestBody)?.content ?? {}, t = _.selectedContentType || Object.keys(e)[0];
+	setup(m, { emit: B }) {
+		let V = B, H = s(() => {
+			let e = k(m.operation.requestBody)?.content ?? {}, t = m.selectedContentType || Object.keys(e)[0];
 			return t ? e[t]?.examples ?? {} : {};
-		}), W = y(""), G = (e) => {
-			let t = Object.keys(U.value);
-			return e && t.includes(e) ? e : W.value && t.includes(W.value) ? W.value : t[0] ?? "";
+		}), U = g(""), W = (e) => {
+			let t = Object.keys(H.value);
+			return e && t.includes(e) ? e : U.value && t.includes(U.value) ? U.value : t[0] ?? "";
 		};
-		ee(() => {
-			W.value = G(_.selectedExample);
-		}), w(() => _.selectedExample, (e) => {
-			W.value = G(e);
-		}), w(() => _.selectedContentType, () => {
-			Object.keys(U.value).includes(W.value) || (W.value = G(_.selectedExample));
-		}), T(() => {
-			H("update:exampleKey", W.value);
+		ie(() => {
+			U.value = W(m.selectedExample);
+		}), x(() => m.selectedExample, (e) => {
+			U.value = W(e);
+		}), x(() => m.selectedContentType, () => {
+			Object.keys(H.value).includes(U.value) || (U.value = W(m.selectedExample));
+		}), S(() => {
+			V("update:exampleKey", U.value);
 		});
-		let K = (e) => {
-			W.value = e, _.eventBus.emit("workspace:update:selected-example", e);
-		}, q = l(() => i(_.operation)), J = l(() => a(q.value.samples, _.clientOptions, q.value.label)), Y = l(() => J.value.reduce((e, t) => e + t.options.length, 0)), X = y(t(J.value, _.selectedClient));
-		w([() => _.selectedClient, J], ([e]) => {
-			let n = t(J.value, e);
-			n && (X.value = n);
+		let ue = (e) => {
+			U.value = e, m.eventBus.emit("workspace:update:selected-example", e);
+		}, G = s(() => te(m.operation)), K = s(() => r(G.value.samples, m.clientOptions, G.value.label)), q = s(() => K.value.reduce((e, t) => e + t.options.length, 0)), J = g(t(K.value, m.selectedClient));
+		x([() => m.selectedClient, K], ([e]) => {
+			let n = t(K.value, e);
+			n && (J.value = n);
 		});
-		let Z = l(() => {
-			if (!_.isWebhook) return null;
+		let Y = g(null), de = M(Y), X = N(() => A(m.operation, U.value, m.selectedContentType), () => de.value), Z = s(() => j(m.operation, U.value, m.selectedContentType, X.resolve)), Q = s(() => {
+			if (!m.isWebhook) return null;
 			try {
 				return n({
-					operation: _.operation,
-					method: _.method,
-					path: _.path,
-					example: W.value,
-					requestBodyCompositionSelection: _.requestBodyCompositionSelection,
+					operation: Z.value,
+					method: m.method,
+					path: m.path,
+					example: U.value,
+					requestBodyCompositionSelection: m.requestBodyCompositionSelection,
 					defaultDisabledParameters: !0
 				});
 			} catch (e) {
 				return console.error("[webhookHar]", e), null;
 			}
-		}), Q = l(() => _.isWebhook ? Z.value?.postData?.text ?? "" : r({
+		}), $ = s(() => m.isWebhook ? Q.value?.postData?.text ?? "" : ee({
 			defaultDisabledParameters: !0,
-			includeDefaultHeaders: _.integration === "client",
-			clientId: X.value?.id,
-			customCodeSamples: q.value.samples,
-			operation: _.operation,
-			method: _.method,
-			path: _.path,
-			contentType: _.selectedContentType,
-			server: _.selectedServer,
-			securitySchemes: _.securitySchemes,
-			example: W.value,
-			globalCookies: _.globalCookies,
-			requestBodyCompositionSelection: _.requestBodyCompositionSelection
-		})), re = l(() => _.isWebhook ? ie.value : X.value?.lang), ie = l(() => {
-			if (!Z.value?.postData) return "json";
-			let e = Z.value.postData.mimeType;
+			includeDefaultHeaders: m.integration === "client",
+			clientId: J.value?.id,
+			customCodeSamples: G.value.samples,
+			operation: Z.value,
+			method: m.method,
+			path: m.path,
+			contentType: m.selectedContentType,
+			server: m.selectedServer,
+			securitySchemes: m.securitySchemes,
+			example: U.value,
+			globalCookies: m.globalCookies,
+			requestBodyCompositionSelection: m.requestBodyCompositionSelection
+		})), fe = s(() => m.isWebhook ? pe.value : J.value?.lang), pe = s(() => {
+			if (!Q.value?.postData) return "json";
+			let e = Q.value.postData.mimeType;
 			return e?.includes("json") ? "json" : e?.includes("xml") ? "xml" : e?.includes("yaml") || e?.includes("yml") ? "yaml" : e?.includes("text/plain") ? "text" : "json";
-		}), ae = l(() => o(_.securitySchemes)), $ = y(null), oe = (e) => {
-			if ($.value) {
-				let e = N($.value.$el);
+		}), me = s(() => i(m.securitySchemes)), he = (e) => {
+			if (Y.value) {
+				let e = D(Y.value.$el);
 				setTimeout(() => {
 					e();
 				}, 300);
 			}
-			X.value = e, e && _.eventBus.emit("workspace:update:selected-client", e.id);
-		}, se = l(() => (Q.value.length ?? 0) > 2e4), ce = C();
-		return (t, n) => Q.value ? (v(), u(S(O), {
+			J.value = e, e && m.eventBus.emit("workspace:update:selected-client", e.id);
+		}, ge = s(() => ($.value.length ?? 0) > 2e4), _e = b();
+		return (t, n) => $.value || y(X).pending.value ? (h(), c(y(T), {
 			key: 0,
 			ref_key: "elem",
-			ref: $,
+			ref: Y,
 			class: "request-card dark-mode"
 		}, {
-			default: E(() => [
-				g(S(ne), { class: "pr-2.5" }, m({
-					default: E(() => [
-						n[1] ||= p("span", { class: "sr-only" }, "Request Example for", -1),
-						g(c, {
+			default: C(() => [
+				p(y(oe), { class: "pr-2.5" }, re({
+					default: C(() => [
+						n[1] ||= d("span", { class: "sr-only" }, "Request Example for", -1),
+						p(a, {
 							as: "span",
 							class: "request-method",
-							method: _.method
+							method: m.method
 						}, null, 8, ["method"]),
-						_.generateLabel ? (v(), f("span", {
+						m.generateLabel ? (h(), u("span", {
 							key: 0,
-							innerHTML: _.generateLabel()
-						}, null, 8, I)) : d("", !0),
-						b(t.$slots, "header", {}, void 0, !0)
+							innerHTML: m.generateLabel()
+						}, null, 8, P)) : l("", !0),
+						_(t.$slots, "header", {}, void 0, !0)
 					]),
 					_: 2
-				}, [!_.isWebhook && Y.value ? {
+				}, [!m.isWebhook && q.value ? {
 					name: "actions",
-					fn: E(() => [Y.value > 1 ? (v(), u(S(j), {
+					fn: C(() => [q.value > 1 ? (h(), c(y(ce), {
 						key: 0,
 						class: "max-h-80",
-						filterFn: S(e),
-						modelValue: X.value,
-						options: J.value,
+						filterFn: y(e),
+						modelValue: J.value,
+						options: K.value,
 						placement: "bottom-end",
 						teleport: "",
-						"onUpdate:modelValue": n[0] ||= (e) => oe(e)
+						"onUpdate:modelValue": n[0] ||= (e) => he(e)
 					}, {
-						default: E(() => [g(S(D), {
+						default: C(() => [p(y(w), {
 							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",
 							"data-testid": "client-picker",
 							variant: "ghost"
 						}, {
-							default: E(() => [h(x(X.value?.title) + " ", 1), g(S(P), {
+							default: C(() => [f(v(J.value?.title) + " ", 1), p(y(O), {
 								class: "ui-open:rotate-180 mt-px size-3 transition-transform duration-100",
 								weight: "bold"
 							})]),
@@ -160,64 +166,72 @@ var I = ["innerHTML"], L = {
 						"filterFn",
 						"modelValue",
 						"options"
-					])) : (v(), f("span", L, x(X.value?.title), 1))]),
+					])) : (h(), u("span", F, v(J.value?.title), 1))]),
 					key: "0"
 				} : void 0]), 1024),
-				g(S(k), { class: "request-editor-section custom-scroll p-0" }, {
-					default: E(() => [p("div", {
-						id: `${S(ce)}-example`,
+				p(y(E), { class: "request-editor-section custom-scroll p-0" }, {
+					default: C(() => [y(X).pending.value ? (h(), u("div", I, [y(X).failed.value ? (h(), u(o, { key: 0 }, [n[3] ||= f(" Could not load this example. ", -1), p(y(w), {
+						size: "sm",
+						variant: "ghost",
+						onClick: y(X).retry
+					}, {
+						default: C(() => [...n[2] ||= [f(" Retry ", -1)]]),
+						_: 1
+					}, 8, ["onClick"])], 64)) : (h(), u(o, { key: 1 }, [f("Loading example…")], 64))])) : (h(), u("div", {
+						key: 1,
+						id: `${y(_e)}-example`,
 						class: "code-snippet"
-					}, [se.value ? (v(), u(S(M), {
+					}, [ge.value ? (h(), c(y(le), {
 						key: 1,
 						containerClass: "custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen",
 						contentClass: "language-plaintext whitespace-pre font-code text-base p-2",
 						lineHeight: 20,
-						text: Q.value
-					}, null, 8, ["text"])) : (v(), u(S(A), {
+						text: $.value
+					}, null, 8, ["text"])) : (h(), c(y(se), {
 						key: 0,
 						class: "bg-b-2 h-full",
-						content: Q.value,
-						hideCredentials: ae.value,
-						lang: re.value,
+						content: $.value,
+						hideCredentials: me.value,
+						lang: fe.value,
 						lineNumbers: ""
 					}, null, 8, [
 						"content",
 						"hideCredentials",
 						"lang"
-					]))], 8, R)]),
+					]))], 8, L))]),
 					_: 1
 				}),
-				Object.keys(U.value).length > 1 || t.$slots.footer ? (v(), u(S(te), {
+				Object.keys(H.value).length > 1 || t.$slots.footer ? (h(), c(y(ae), {
 					key: 0,
 					class: "request-card-footer bg-b-3"
 				}, {
-					default: E(() => [Object.keys(U.value).length > 1 ? (v(), f("div", z, [Object.keys(U.value).length ? (v(), u(s, {
+					default: C(() => [Object.keys(H.value).length > 1 ? (h(), u("div", R, [Object.keys(H.value).length ? (h(), c(ne, {
 						key: 0,
-						examples: U.value,
-						modelValue: W.value,
-						"onUpdate:modelValue": K
-					}, null, 8, ["examples", "modelValue"])) : d("", !0)])) : d("", !0), b(t.$slots, "footer", { exampleName: W.value }, void 0, !0)]),
+						examples: H.value,
+						modelValue: U.value,
+						"onUpdate:modelValue": ue
+					}, null, 8, ["examples", "modelValue"])) : l("", !0)])) : l("", !0), _(t.$slots, "footer", { exampleName: U.value }, void 0, !0)]),
 					_: 3
-				})) : d("", !0)
+				})) : l("", !0)
 			]),
 			_: 3
-		}, 512)) : _.fallback ? (v(), u(S(O), {
+		}, 512)) : m.fallback ? (h(), c(y(T), {
 			key: 1,
 			class: "request-card dark-mode"
 		}, {
-			default: E(() => [g(S(k), { class: "request-card-simple" }, {
-				default: E(() => [p("div", B, [g(c, {
+			default: C(() => [p(y(E), { class: "request-card-simple" }, {
+				default: C(() => [d("div", z, [p(a, {
 					as: "span",
 					class: "request-method",
-					method: _.method
-				}, null, 8, ["method"]), b(t.$slots, "header", {}, void 0, !0)]), b(t.$slots, "footer", { exampleName: W.value }, void 0, !0)]),
+					method: m.method
+				}, null, 8, ["method"]), _(t.$slots, "header", {}, void 0, !0)]), _(t.$slots, "footer", { exampleName: U.value }, void 0, !0)]),
 				_: 3
 			})]),
 			_: 3
-		})) : d("", !0);
+		})) : l("", !0);
 	}
 });
 //#endregion
-export { V as default };
+export { B as default };
 
 //# sourceMappingURL=CodeExample.vue.script.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeExample.vue.script.js","names":["$slots"],"sources":["../../../src/code-example/components/CodeExample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeExampleProps = {\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: HttpMethodType\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  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 type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\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  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  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  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/** Generate HAR data for webhook requests */\nconst webhookHar = computed(() => {\n  if (!isWebhook) return null\n\n  try {\n    return operationToHar({\n      operation,\n      method,\n      path,\n      example: localExampleKey.value,\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>(() => {\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,\n    method,\n    path,\n    contentType: selectedContentType,\n    server: selectedServer,\n    securitySchemes,\n    example: localExampleKey.value,\n    globalCookies,\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/** Grab the ref to freeze the ui as the clients change so there's no jump as the size of the dom changes */\nconst elem = ref<ComponentPublicInstance | null>(null)\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=\"generatedCode\"\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          :modelValue=\"localSelectedClient\"\n          :options=\"clients\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectClient($event as ClientOption)\">\n          <ScalarButton\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        :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          :lang=\"codeBlockLanguage\"\n          lineNumbers />\n        <ScalarVirtualText\n          v-else\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          :text=\"generatedCode\" />\n      </div>\n    </ScalarCardSection>\n\n    <!-- Footer -->\n    <ScalarCardFooter\n      v-if=\"Object.keys(requestBodyExamples).length > 1 || $slots.footer\"\n      class=\"request-card-footer bg-b-3\">\n      <!-- Example picker -->\n      <div\n        v-if=\"Object.keys(requestBodyExamples).length > 1\"\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\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  text-transform: uppercase;\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.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":"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"}
+{"version":3,"file":"CodeExample.vue.script.js","names":["$slots"],"sources":["../../../src/code-example/components/CodeExample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeExampleProps = {\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: HttpMethodType\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  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 type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\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  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  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  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\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/** 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      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>(() => {\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    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=\"generatedCode || externalExamples.pending.value\"\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          :modelValue=\"localSelectedClient\"\n          :options=\"clients\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectClient($event as ClientOption)\">\n          <ScalarButton\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\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          :lang=\"codeBlockLanguage\"\n          lineNumbers />\n        <ScalarVirtualText\n          v-else\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          :text=\"generatedCode\" />\n      </div>\n    </ScalarCardSection>\n\n    <!-- Footer -->\n    <ScalarCardFooter\n      v-if=\"Object.keys(requestBodyExamples).length > 1 || $slots.footer\"\n      class=\"request-card-footer bg-b-3\">\n      <!-- Example picker -->\n      <div\n        v-if=\"Object.keys(requestBodyExamples).length > 1\"\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\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  text-transform: uppercase;\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.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":"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"}

package/dist/code-example/mount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mount.d.ts","sourceRoot":"","sources":["../../src/code-example/mount.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAKpE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAmB,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAMjH,MAAM,MAAM,wBAAwB,GAAG;IACrC,yEAAyE;IACzE,KAAK,EAAE,cAAc,CAAA;IACrB,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAA;IACZ,8CAA8C;IAC9C,MAAM,EAAE,UAAU,CAAA;IAClB,iDAAiD;IACjD,cAAc,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACzC;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,oDAAoD;IACpD,eAAe,CAAC,EAAE,0BAA0B,EAAE,CAAA;IAC9C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAWD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,IAAI,WAAW,GAAG,MAAM,EAAE,SAAS,wBAAwB;;;CAqI5F,CAAA"}
+{"version":3,"file":"mount.d.ts","sourceRoot":"","sources":["../../src/code-example/mount.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAMpE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAmB,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAMjH,MAAM,MAAM,wBAAwB,GAAG;IACrC,yEAAyE;IACzE,KAAK,EAAE,cAAc,CAAA;IACrB,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAA;IACZ,8CAA8C;IAC9C,MAAM,EAAE,UAAU,CAAA;IAClB,iDAAiD;IACjD,cAAc,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACzC;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,oDAAoD;IACpD,eAAe,CAAC,EAAE,0BAA0B,EAAE,CAAA;IAC9C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAWD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,IAAI,WAAW,GAAG,MAAM,EAAE,SAAS,wBAAwB;;;CAsI5F,CAAA"}

package/dist/code-example/mount.js

@@ -3,59 +3,60 @@ import t from "./components/CodeExample.vue.js";
 import { createApp as n, h as r, reactive as i } from "vue";
 import { createWorkspaceEventBus as a } from "@scalar/workspace-store/events";
 import { getResolvedRef as o } from "@scalar/workspace-store/helpers/get-resolved-ref";
-import { ScalarTeleportRoot as s } from "@scalar/components/teleport";
-import { getFirstServer as c } from "@scalar/workspace-store/helpers/get-first-server";
-import { generateClientMutators as l } from "@scalar/workspace-store/mutators";
+import { EXTERNAL_EXAMPLES as s } from "@scalar/workspace-store/helpers/use-external-examples";
+import { ScalarTeleportRoot as c } from "@scalar/components/teleport";
+import { getFirstServer as l } from "@scalar/workspace-store/helpers/get-first-server";
+import { generateClientMutators as u } from "@scalar/workspace-store/mutators";
 //#region src/code-example/mount.ts
-var u = (e) => ["scalar-app", e === !0 ? "dark-mode" : e === !1 ? "light-mode" : ""].filter(Boolean).join(" "), d = (d, f) => {
-	let p = typeof d == "string" ? document.querySelector(d) : d;
-	if (!p) throw Error(`Element not found: ${d}`);
-	let m = a(), h = e(), g = l(f.store), _ = m.on("workspace:update:selected-client", (e) => g.workspace().workspace.updateSelectedClient(e)), v = m.on("workspace:update:selected-example", (e) => g.workspace().workspace.updateSelectedExample(e)), y = () => {
-		let e = f.store.workspace.activeDocument;
+var d = (e) => ["scalar-app", e === !0 ? "dark-mode" : e === !1 ? "light-mode" : ""].filter(Boolean).join(" "), f = (f, p) => {
+	let m = typeof f == "string" ? document.querySelector(f) : f;
+	if (!m) throw Error(`Element not found: ${f}`);
+	let h = a(), g = e(), _ = u(p.store), v = h.on("workspace:update:selected-client", (e) => _.workspace().workspace.updateSelectedClient(e)), y = h.on("workspace:update:selected-example", (e) => _.workspace().workspace.updateSelectedExample(e)), b = () => {
+		let e = p.store.workspace.activeDocument;
 		if (!e || !("paths" in e)) return;
-		let t = o(e.paths?.[f.path]), n = o(t?.[f.method]);
+		let t = o(e.paths?.[p.path]), n = o(t?.[p.method]);
 		if (n) return {
 			operation: n,
-			server: c(n.servers ?? null, t?.servers ?? null, e.servers ?? null)
+			server: l(n.servers ?? null, t?.servers ?? null, e.servers ?? null)
 		};
 	};
-	if (!y()) throw Error(`Operation not found: ${f.method.toUpperCase()} ${f.path}`);
-	let b, x = () => {
-		let e = y();
-		return e && (b = e), e ?? b;
-	}, S = i({
+	if (!b()) throw Error(`Operation not found: ${p.method.toUpperCase()} ${p.path}`);
+	let x, S = () => {
+		let e = b();
+		return e && (x = e), e ?? x;
+	}, C = i({
 		get operation() {
-			return x().operation;
+			return S().operation;
 		},
 		get method() {
-			return f.method;
+			return p.method;
 		},
 		get path() {
-			return f.path;
+			return p.path;
 		},
-		clientOptions: h,
-		eventBus: m,
+		clientOptions: g,
+		eventBus: h,
 		get securitySchemes() {
-			return f.securitySchemes ?? [];
+			return p.securitySchemes ?? [];
 		},
 		get selectedClient() {
-			return f.store.workspace["x-scalar-default-client"] ?? f.selectedClient;
+			return p.store.workspace["x-scalar-default-client"] ?? p.selectedClient;
 		},
 		get selectedExample() {
-			return f.store.workspace["x-scalar-default-example"] ?? f.selectedExample;
+			return p.store.workspace["x-scalar-default-example"] ?? p.selectedExample;
 		},
 		get selectedServer() {
-			return f.selectedServer === void 0 ? x().server : f.selectedServer;
+			return p.selectedServer === void 0 ? S().server : p.selectedServer;
 		}
-	}), C = () => r("span", { class: "font-code text-c-2 min-w-0 truncate" }, f.path), w = n(() => r("div", { class: u(f.darkMode) }, [r(s, null, { default: () => r(t, S, { header: C }) })]));
-	return w.mount(p), {
-		app: w,
+	}), w = () => r("span", { class: "font-code text-c-2 min-w-0 truncate" }, p.path), T = n(() => r("div", { class: d(p.darkMode) }, [r(c, null, { default: () => r(t, C, { header: w }) })]));
+	return T.provide(s, () => p.store.externalExamples()), T.mount(m), {
+		app: T,
 		destroy: () => {
-			_(), v(), w.unmount();
+			v(), y(), T.unmount();
 		}
 	};
 };
 //#endregion
-export { d as createCodeExample };
+export { f as createCodeExample };
 
 //# sourceMappingURL=mount.js.map

package/dist/code-example/mount.js.map

@@ -1 +1 @@
-{"version":3,"file":"mount.js","names":[],"sources":["../../src/code-example/mount.ts"],"sourcesContent":["import { ScalarTeleportRoot } from '@scalar/components/teleport'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { AvailableClients } from '@scalar/snippetz'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { createWorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getFirstServer } from '@scalar/workspace-store/helpers/get-first-server'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { generateClientMutators } from '@scalar/workspace-store/mutators'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { OperationObject, ServerObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { createApp, h, reactive } from 'vue'\n\nimport CodeExample, { type CodeExampleProps } from './components/CodeExample.vue'\nimport { generateClientOptions } from './helpers/generate-client-options'\n\nexport type CreateCodeExampleOptions = {\n  /** Workspace store that holds the OpenAPI document(s) to render from. */\n  store: WorkspaceStore\n  /** Path of the operation to render, e.g. '/users/{id}'. */\n  path: string\n  /** HTTP method of the operation to render. */\n  method: HttpMethod\n  /** Pre-selected client ID, e.g. 'shell/curl'. */\n  selectedClient?: AvailableClients[number]\n  /**\n   * Server object override used to build the example request.\n   *\n   * When omitted, the server is derived from the active document (operation,\n   * then path item, then document level), mirroring the API reference. Pass\n   * `null` to force \"no server\".\n   */\n  selectedServer?: ServerObject | null\n  /**\n   * Pre-selected example key for parameters and the request body.\n   *\n   * The store is the source of truth once an example is picked, so\n   * `x-scalar-default-example` wins over this initial seed and the selection\n   * round-trips through the store like the client selection does.\n   */\n  selectedExample?: string\n  /** Security schemes applicable to the operation. */\n  securitySchemes?: SecuritySchemeObjectSecret[]\n  /**\n   * Force a color mode on the rendered block.\n   *\n   * When omitted, the block inherits the ambient theme of the host page.\n   * Pass `true` for dark mode or `false` for light mode.\n   */\n  darkMode?: boolean\n}\n\n/**\n * Builds the wrapper classes for the mounted block.\n *\n * The `.scalar-app` class scopes the Tailwind utilities, and the optional\n * color-mode class lets consumers pin the block to dark or light.\n */\nconst getWrapperClass = (darkMode: boolean | undefined): string =>\n  ['scalar-app', darkMode === true ? 'dark-mode' : darkMode === false ? 'light-mode' : ''].filter(Boolean).join(' ')\n\n/**\n * Mount the CodeExample block to a DOM element without Vue.\n *\n * The consumer creates and controls their own workspace store,\n * then passes it in along with the path and method to render.\n */\nexport const createCodeExample = (el: HTMLElement | string, options: CreateCodeExampleOptions) => {\n  const element = typeof el === 'string' ? document.querySelector(el) : el\n  if (!element) {\n    throw new Error(`Element not found: ${el}`)\n  }\n\n  const eventBus = createWorkspaceEventBus()\n  const clientOptions = generateClientOptions()\n\n  // Persist client changes back to the store. The block emits\n  // `workspace:update:selected-client` on its private bus when the user picks a\n  // client; without this subscription the choice would never reach the store\n  // and `x-scalar-default-client` (the source of truth read below) would stay\n  // stale, so the selection would not survive a re-render or be shared with\n  // other blocks reading from the same store.\n  const mutators = generateClientMutators(options.store)\n  const unsubscribeClient = eventBus.on('workspace:update:selected-client', (payload) =>\n    mutators.workspace().workspace.updateSelectedClient(payload),\n  )\n\n  // Persist example changes back to the store as well, mirroring the client\n  // round-trip above. The block emits `workspace:update:selected-example` when\n  // the user picks an example; without this the choice would never reach\n  // `x-scalar-default-example` (read below) and would neither survive a\n  // re-render nor sync to other blocks reading from the same store.\n  const unsubscribeExample = eventBus.on('workspace:update:selected-example', (payload) =>\n    mutators.workspace().workspace.updateSelectedExample(payload),\n  )\n\n  type OperationContext = { operation: OperationObject; server: ServerObject | null }\n\n  /**\n   * Resolve the operation and its effective server from the active document.\n   *\n   * The server is resolved from the same document the operation came from\n   * (operation, then path item, then document level), so a snippet never pairs\n   * an operation with a server URL from a different spec.\n   */\n  const resolveContext = (): OperationContext | undefined => {\n    // The active document may be an AsyncAPI document, which has no `paths`.\n    const activeDocument = options.store.workspace.activeDocument\n    if (!activeDocument || !('paths' in activeDocument)) {\n      return undefined\n    }\n    const pathItem = getResolvedRef(activeDocument.paths?.[options.path])\n    const operation = getResolvedRef(pathItem?.[options.method])\n    if (!operation) {\n      return undefined\n    }\n    const server = getFirstServer(operation.servers ?? null, pathItem?.servers ?? null, activeDocument.servers ?? null)\n    return { operation, server }\n  }\n\n  // Fail loudly if the path and method do not point at an operation in the store,\n  // mirroring the \"element not found\" guard above.\n  if (!resolveContext()) {\n    throw new Error(`Operation not found: ${options.method.toUpperCase()} ${options.path}`)\n  }\n\n  // Remember the last context that resolved so a transient miss (e.g. the active\n  // document is swapped to one without this path or method after mount) keeps\n  // rendering the previous operation, paired with the server it actually came\n  // from, instead of feeding `undefined` to the block.\n  let lastContext: OperationContext | undefined\n\n  /** Current operation + server, falling back to the last good resolution on a transient miss. */\n  const currentContext = (): OperationContext => {\n    const context = resolveContext()\n    if (context) {\n      lastContext = context\n    }\n    return (context ?? lastContext) as OperationContext\n  }\n\n  // Props are getters so the block tracks the reactive store (active document,\n  // `x-scalar-default-client`, `x-scalar-default-example`) live. Change the\n  // client, example, or server through the store to drive re-renders.\n  const props = reactive<CodeExampleProps>({\n    get operation(): OperationObject {\n      return currentContext().operation\n    },\n    get method() {\n      return options.method\n    },\n    get path() {\n      return options.path\n    },\n    clientOptions,\n    eventBus,\n    get securitySchemes() {\n      return options.securitySchemes ?? []\n    },\n    get selectedClient() {\n      // The store is the source of truth once the user picks a client, so it\n      // wins over the initial `options.selectedClient` seed and the selection\n      // round-trips through the subscription above.\n      return options.store.workspace['x-scalar-default-client'] ?? options.selectedClient\n    },\n    get selectedExample() {\n      // Same as the client: the store wins over the initial seed so the example\n      // selection survives re-renders and syncs across blocks.\n      return options.store.workspace['x-scalar-default-example'] ?? options.selectedExample\n    },\n    get selectedServer() {\n      // An explicit option wins (including an explicit `null` for \"no server\");\n      // otherwise derive it from the same document the operation resolved from.\n      return options.selectedServer !== undefined ? options.selectedServer : currentContext().server\n    },\n  })\n\n  // Render the operation path in the header by default. The reference renders\n  // this via the `#header` slot too, so the standalone block matches its look.\n  const renderHeader = () => h('span', { class: 'font-code text-c-2 min-w-0 truncate' }, options.path)\n\n  // Wrap the block in its own teleport root so floating UI (the client picker\n  // popover) renders inside the themed `.scalar-app` wrapper instead of escaping\n  // to `body`, where it would miss the color-mode variables and lose its styling.\n  const app = createApp(() =>\n    h('div', { class: getWrapperClass(options.darkMode) }, [\n      h(ScalarTeleportRoot, null, { default: () => h(CodeExample, props, { header: renderHeader }) }),\n    ]),\n  )\n\n  app.mount(element)\n\n  return {\n    app,\n    destroy: () => {\n      unsubscribeClient()\n      unsubscribeExample()\n      app.unmount()\n    },\n  }\n}\n"],"mappings":";;;;;;;;;AAyDA,IAAM,KAAmB,MACvB,CAAC,cAAc,MAAa,KAAO,cAAc,MAAa,KAAQ,eAAe,EAAE,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GAQtG,KAAqB,GAA0B,MAAsC;CAChG,IAAM,IAAU,OAAO,KAAO,WAAW,SAAS,cAAc,CAAE,IAAI;CACtE,IAAI,CAAC,GACH,MAAU,MAAM,sBAAsB,GAAI;CAG5C,IAAM,IAAW,EAAwB,GACnC,IAAgB,EAAsB,GAQtC,IAAW,EAAuB,EAAQ,KAAK,GAC/C,IAAoB,EAAS,GAAG,qCAAqC,MACzE,EAAS,UAAU,CAAC,CAAC,UAAU,qBAAqB,CAAO,CAC7D,GAOM,IAAqB,EAAS,GAAG,sCAAsC,MAC3E,EAAS,UAAU,CAAC,CAAC,UAAU,sBAAsB,CAAO,CAC9D,GAWM,UAAqD;EAEzD,IAAM,IAAiB,EAAQ,MAAM,UAAU;EAC/C,IAAI,CAAC,KAAkB,EAAE,WAAW,IAClC;EAEF,IAAM,IAAW,EAAe,EAAe,QAAQ,EAAQ,KAAK,GAC9D,IAAY,EAAe,IAAW,EAAQ,OAAO;EACtD,OAIL,OAAO;GAAE;GAAW,QADL,EAAe,EAAU,WAAW,MAAM,GAAU,WAAW,MAAM,EAAe,WAAW,IAC1F;EAAO;CAC7B;CAIA,IAAI,CAAC,EAAe,GAClB,MAAU,MAAM,wBAAwB,EAAQ,OAAO,YAAY,EAAE,GAAG,EAAQ,MAAM;CAOxF,IAAI,GAGE,UAAyC;EAC7C,IAAM,IAAU,EAAe;EAI/B,OAHI,MACF,IAAc,IAER,KAAW;CACrB,GAKM,IAAQ,EAA2B;EACvC,IAAI,YAA6B;GAC/B,OAAO,EAAe,CAAC,CAAC;EAC1B;EACA,IAAI,SAAS;GACX,OAAO,EAAQ;EACjB;EACA,IAAI,OAAO;GACT,OAAO,EAAQ;EACjB;EACA;EACA;EACA,IAAI,kBAAkB;GACpB,OAAO,EAAQ,mBAAmB,CAAC;EACrC;EACA,IAAI,iBAAiB;GAInB,OAAO,EAAQ,MAAM,UAAU,8BAA8B,EAAQ;EACvE;EACA,IAAI,kBAAkB;GAGpB,OAAO,EAAQ,MAAM,UAAU,+BAA+B,EAAQ;EACxE;EACA,IAAI,iBAAiB;GAGnB,OAAO,EAAQ,mBAAmB,KAAA,IAAqC,EAAe,CAAC,CAAC,SAA1C,EAAQ;EACxD;CACF,CAAC,GAIK,UAAqB,EAAE,QAAQ,EAAE,OAAO,sCAAsC,GAAG,EAAQ,IAAI,GAK7F,IAAM,QACV,EAAE,OAAO,EAAE,OAAO,EAAgB,EAAQ,QAAQ,EAAE,GAAG,CACrD,EAAE,GAAoB,MAAM,EAAE,eAAe,EAAE,GAAa,GAAO,EAAE,QAAQ,EAAa,CAAC,EAAE,CAAC,CAChG,CAAC,CACH;CAIA,OAFA,EAAI,MAAM,CAAO,GAEV;EACL;EACA,eAAe;GAGb,AAFA,EAAkB,GAClB,EAAmB,GACnB,EAAI,QAAQ;EACd;CACF;AACF"}
+{"version":3,"file":"mount.js","names":[],"sources":["../../src/code-example/mount.ts"],"sourcesContent":["import { ScalarTeleportRoot } from '@scalar/components/teleport'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { AvailableClients } from '@scalar/snippetz'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { createWorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getFirstServer } from '@scalar/workspace-store/helpers/get-first-server'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { EXTERNAL_EXAMPLES } from '@scalar/workspace-store/helpers/use-external-examples'\nimport { generateClientMutators } from '@scalar/workspace-store/mutators'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { OperationObject, ServerObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { createApp, h, reactive } from 'vue'\n\nimport CodeExample, { type CodeExampleProps } from './components/CodeExample.vue'\nimport { generateClientOptions } from './helpers/generate-client-options'\n\nexport type CreateCodeExampleOptions = {\n  /** Workspace store that holds the OpenAPI document(s) to render from. */\n  store: WorkspaceStore\n  /** Path of the operation to render, e.g. '/users/{id}'. */\n  path: string\n  /** HTTP method of the operation to render. */\n  method: HttpMethod\n  /** Pre-selected client ID, e.g. 'shell/curl'. */\n  selectedClient?: AvailableClients[number]\n  /**\n   * Server object override used to build the example request.\n   *\n   * When omitted, the server is derived from the active document (operation,\n   * then path item, then document level), mirroring the API reference. Pass\n   * `null` to force \"no server\".\n   */\n  selectedServer?: ServerObject | null\n  /**\n   * Pre-selected example key for parameters and the request body.\n   *\n   * The store is the source of truth once an example is picked, so\n   * `x-scalar-default-example` wins over this initial seed and the selection\n   * round-trips through the store like the client selection does.\n   */\n  selectedExample?: string\n  /** Security schemes applicable to the operation. */\n  securitySchemes?: SecuritySchemeObjectSecret[]\n  /**\n   * Force a color mode on the rendered block.\n   *\n   * When omitted, the block inherits the ambient theme of the host page.\n   * Pass `true` for dark mode or `false` for light mode.\n   */\n  darkMode?: boolean\n}\n\n/**\n * Builds the wrapper classes for the mounted block.\n *\n * The `.scalar-app` class scopes the Tailwind utilities, and the optional\n * color-mode class lets consumers pin the block to dark or light.\n */\nconst getWrapperClass = (darkMode: boolean | undefined): string =>\n  ['scalar-app', darkMode === true ? 'dark-mode' : darkMode === false ? 'light-mode' : ''].filter(Boolean).join(' ')\n\n/**\n * Mount the CodeExample block to a DOM element without Vue.\n *\n * The consumer creates and controls their own workspace store,\n * then passes it in along with the path and method to render.\n */\nexport const createCodeExample = (el: HTMLElement | string, options: CreateCodeExampleOptions) => {\n  const element = typeof el === 'string' ? document.querySelector(el) : el\n  if (!element) {\n    throw new Error(`Element not found: ${el}`)\n  }\n\n  const eventBus = createWorkspaceEventBus()\n  const clientOptions = generateClientOptions()\n\n  // Persist client changes back to the store. The block emits\n  // `workspace:update:selected-client` on its private bus when the user picks a\n  // client; without this subscription the choice would never reach the store\n  // and `x-scalar-default-client` (the source of truth read below) would stay\n  // stale, so the selection would not survive a re-render or be shared with\n  // other blocks reading from the same store.\n  const mutators = generateClientMutators(options.store)\n  const unsubscribeClient = eventBus.on('workspace:update:selected-client', (payload) =>\n    mutators.workspace().workspace.updateSelectedClient(payload),\n  )\n\n  // Persist example changes back to the store as well, mirroring the client\n  // round-trip above. The block emits `workspace:update:selected-example` when\n  // the user picks an example; without this the choice would never reach\n  // `x-scalar-default-example` (read below) and would neither survive a\n  // re-render nor sync to other blocks reading from the same store.\n  const unsubscribeExample = eventBus.on('workspace:update:selected-example', (payload) =>\n    mutators.workspace().workspace.updateSelectedExample(payload),\n  )\n\n  type OperationContext = { operation: OperationObject; server: ServerObject | null }\n\n  /**\n   * Resolve the operation and its effective server from the active document.\n   *\n   * The server is resolved from the same document the operation came from\n   * (operation, then path item, then document level), so a snippet never pairs\n   * an operation with a server URL from a different spec.\n   */\n  const resolveContext = (): OperationContext | undefined => {\n    // The active document may be an AsyncAPI document, which has no `paths`.\n    const activeDocument = options.store.workspace.activeDocument\n    if (!activeDocument || !('paths' in activeDocument)) {\n      return undefined\n    }\n    const pathItem = getResolvedRef(activeDocument.paths?.[options.path])\n    const operation = getResolvedRef(pathItem?.[options.method])\n    if (!operation) {\n      return undefined\n    }\n    const server = getFirstServer(operation.servers ?? null, pathItem?.servers ?? null, activeDocument.servers ?? null)\n    return { operation, server }\n  }\n\n  // Fail loudly if the path and method do not point at an operation in the store,\n  // mirroring the \"element not found\" guard above.\n  if (!resolveContext()) {\n    throw new Error(`Operation not found: ${options.method.toUpperCase()} ${options.path}`)\n  }\n\n  // Remember the last context that resolved so a transient miss (e.g. the active\n  // document is swapped to one without this path or method after mount) keeps\n  // rendering the previous operation, paired with the server it actually came\n  // from, instead of feeding `undefined` to the block.\n  let lastContext: OperationContext | undefined\n\n  /** Current operation + server, falling back to the last good resolution on a transient miss. */\n  const currentContext = (): OperationContext => {\n    const context = resolveContext()\n    if (context) {\n      lastContext = context\n    }\n    return (context ?? lastContext) as OperationContext\n  }\n\n  // Props are getters so the block tracks the reactive store (active document,\n  // `x-scalar-default-client`, `x-scalar-default-example`) live. Change the\n  // client, example, or server through the store to drive re-renders.\n  const props = reactive<CodeExampleProps>({\n    get operation(): OperationObject {\n      return currentContext().operation\n    },\n    get method() {\n      return options.method\n    },\n    get path() {\n      return options.path\n    },\n    clientOptions,\n    eventBus,\n    get securitySchemes() {\n      return options.securitySchemes ?? []\n    },\n    get selectedClient() {\n      // The store is the source of truth once the user picks a client, so it\n      // wins over the initial `options.selectedClient` seed and the selection\n      // round-trips through the subscription above.\n      return options.store.workspace['x-scalar-default-client'] ?? options.selectedClient\n    },\n    get selectedExample() {\n      // Same as the client: the store wins over the initial seed so the example\n      // selection survives re-renders and syncs across blocks.\n      return options.store.workspace['x-scalar-default-example'] ?? options.selectedExample\n    },\n    get selectedServer() {\n      // An explicit option wins (including an explicit `null` for \"no server\");\n      // otherwise derive it from the same document the operation resolved from.\n      return options.selectedServer !== undefined ? options.selectedServer : currentContext().server\n    },\n  })\n\n  // Render the operation path in the header by default. The reference renders\n  // this via the `#header` slot too, so the standalone block matches its look.\n  const renderHeader = () => h('span', { class: 'font-code text-c-2 min-w-0 truncate' }, options.path)\n\n  // Wrap the block in its own teleport root so floating UI (the client picker\n  // popover) renders inside the themed `.scalar-app` wrapper instead of escaping\n  // to `body`, where it would miss the color-mode variables and lose its styling.\n  const app = createApp(() =>\n    h('div', { class: getWrapperClass(options.darkMode) }, [\n      h(ScalarTeleportRoot, null, { default: () => h(CodeExample, props, { header: renderHeader }) }),\n    ]),\n  )\n\n  app.provide(EXTERNAL_EXAMPLES, () => options.store.externalExamples())\n  app.mount(element)\n\n  return {\n    app,\n    destroy: () => {\n      unsubscribeClient()\n      unsubscribeExample()\n      app.unmount()\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;AA0DA,IAAM,KAAmB,MACvB,CAAC,cAAc,MAAa,KAAO,cAAc,MAAa,KAAQ,eAAe,EAAE,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GAQtG,KAAqB,GAA0B,MAAsC;CAChG,IAAM,IAAU,OAAO,KAAO,WAAW,SAAS,cAAc,CAAE,IAAI;CACtE,IAAI,CAAC,GACH,MAAU,MAAM,sBAAsB,GAAI;CAG5C,IAAM,IAAW,EAAwB,GACnC,IAAgB,EAAsB,GAQtC,IAAW,EAAuB,EAAQ,KAAK,GAC/C,IAAoB,EAAS,GAAG,qCAAqC,MACzE,EAAS,UAAU,CAAC,CAAC,UAAU,qBAAqB,CAAO,CAC7D,GAOM,IAAqB,EAAS,GAAG,sCAAsC,MAC3E,EAAS,UAAU,CAAC,CAAC,UAAU,sBAAsB,CAAO,CAC9D,GAWM,UAAqD;EAEzD,IAAM,IAAiB,EAAQ,MAAM,UAAU;EAC/C,IAAI,CAAC,KAAkB,EAAE,WAAW,IAClC;EAEF,IAAM,IAAW,EAAe,EAAe,QAAQ,EAAQ,KAAK,GAC9D,IAAY,EAAe,IAAW,EAAQ,OAAO;EACtD,OAIL,OAAO;GAAE;GAAW,QADL,EAAe,EAAU,WAAW,MAAM,GAAU,WAAW,MAAM,EAAe,WAAW,IAC1F;EAAO;CAC7B;CAIA,IAAI,CAAC,EAAe,GAClB,MAAU,MAAM,wBAAwB,EAAQ,OAAO,YAAY,EAAE,GAAG,EAAQ,MAAM;CAOxF,IAAI,GAGE,UAAyC;EAC7C,IAAM,IAAU,EAAe;EAI/B,OAHI,MACF,IAAc,IAER,KAAW;CACrB,GAKM,IAAQ,EAA2B;EACvC,IAAI,YAA6B;GAC/B,OAAO,EAAe,CAAC,CAAC;EAC1B;EACA,IAAI,SAAS;GACX,OAAO,EAAQ;EACjB;EACA,IAAI,OAAO;GACT,OAAO,EAAQ;EACjB;EACA;EACA;EACA,IAAI,kBAAkB;GACpB,OAAO,EAAQ,mBAAmB,CAAC;EACrC;EACA,IAAI,iBAAiB;GAInB,OAAO,EAAQ,MAAM,UAAU,8BAA8B,EAAQ;EACvE;EACA,IAAI,kBAAkB;GAGpB,OAAO,EAAQ,MAAM,UAAU,+BAA+B,EAAQ;EACxE;EACA,IAAI,iBAAiB;GAGnB,OAAO,EAAQ,mBAAmB,KAAA,IAAqC,EAAe,CAAC,CAAC,SAA1C,EAAQ;EACxD;CACF,CAAC,GAIK,UAAqB,EAAE,QAAQ,EAAE,OAAO,sCAAsC,GAAG,EAAQ,IAAI,GAK7F,IAAM,QACV,EAAE,OAAO,EAAE,OAAO,EAAgB,EAAQ,QAAQ,EAAE,GAAG,CACrD,EAAE,GAAoB,MAAM,EAAE,eAAe,EAAE,GAAa,GAAO,EAAE,QAAQ,EAAa,CAAC,EAAE,CAAC,CAChG,CAAC,CACH;CAKA,OAHA,EAAI,QAAQ,SAAyB,EAAQ,MAAM,iBAAiB,CAAC,GACrE,EAAI,MAAM,CAAO,GAEV;EACL;EACA,eAAe;GAGb,AAFA,EAAkB,GAClB,EAAmB,GACnB,EAAI,QAAQ;EACd;CACF;AACF"}

package/dist/constants.js

@@ -1,5 +1,5 @@
 //#region src/constants.ts
-var e = typeof OVERRIDE_PACKAGE_VERSION < "u" ? OVERRIDE_PACKAGE_VERSION : "0.1.19";
+var e = typeof OVERRIDE_PACKAGE_VERSION < "u" ? OVERRIDE_PACKAGE_VERSION : "0.1.20";
 //#endregion
 export { e as APP_VERSION };
 

package/dist/style.css

@@ -4463,5 +4463,5 @@
     opacity: .5;
   }
 }
-.request-card[data-v-82b2d155]{color:var(--scalar-color-1);font-size:var(--scalar-font-size-3)}.request-method[data-v-82b2d155]{font-family:var(--scalar-font-code);text-transform:uppercase;margin-right:6px}.request-card-footer[data-v-82b2d155]{flex-shrink:0;justify-content:flex-end;padding:6px;display:flex;position:relative}.request-card-footer-addon[data-v-82b2d155]{flex:1;align-items:center;min-width:0;display:flex}.request-editor-section[data-v-82b2d155]{flex:1;display:flex}.request-card-simple[data-v-82b2d155]{font-size:var(--scalar-small);justify-content:space-between;align-items:center;padding:8px 8px 8px 12px;display:flex}.code-snippet[data-v-82b2d155]{flex-direction:column;width:100%;display:flex}
+.request-card[data-v-8b0cd212]{color:var(--scalar-color-1);font-size:var(--scalar-font-size-3)}.request-method[data-v-8b0cd212]{font-family:var(--scalar-font-code);text-transform:uppercase;margin-right:6px}.request-card-footer[data-v-8b0cd212]{flex-shrink:0;justify-content:flex-end;padding:6px;display:flex;position:relative}.request-card-footer-addon[data-v-8b0cd212]{flex:1;align-items:center;min-width:0;display:flex}.request-editor-section[data-v-8b0cd212]{flex:1;display:flex}.request-card-simple[data-v-8b0cd212]{font-size:var(--scalar-small);justify-content:space-between;align-items:center;padding:8px 8px 8px 12px;display:flex}.code-snippet[data-v-8b0cd212]{flex-direction:column;width:100%;display:flex}
 /*$vite$:1*/

package/dist/vue-styles.css

@@ -1,2 +1,2 @@
-.request-card[data-v-82b2d155]{color:var(--scalar-color-1);font-size:var(--scalar-font-size-3)}.request-method[data-v-82b2d155]{font-family:var(--scalar-font-code);text-transform:uppercase;margin-right:6px}.request-card-footer[data-v-82b2d155]{flex-shrink:0;justify-content:flex-end;padding:6px;display:flex;position:relative}.request-card-footer-addon[data-v-82b2d155]{flex:1;align-items:center;min-width:0;display:flex}.request-editor-section[data-v-82b2d155]{flex:1;display:flex}.request-card-simple[data-v-82b2d155]{font-size:var(--scalar-small);justify-content:space-between;align-items:center;padding:8px 8px 8px 12px;display:flex}.code-snippet[data-v-82b2d155]{flex-direction:column;width:100%;display:flex}
+.request-card[data-v-8b0cd212]{color:var(--scalar-color-1);font-size:var(--scalar-font-size-3)}.request-method[data-v-8b0cd212]{font-family:var(--scalar-font-code);text-transform:uppercase;margin-right:6px}.request-card-footer[data-v-8b0cd212]{flex-shrink:0;justify-content:flex-end;padding:6px;display:flex;position:relative}.request-card-footer-addon[data-v-8b0cd212]{flex:1;align-items:center;min-width:0;display:flex}.request-editor-section[data-v-8b0cd212]{flex:1;display:flex}.request-card-simple[data-v-8b0cd212]{font-size:var(--scalar-small);justify-content:space-between;align-items:center;padding:8px 8px 8px 12px;display:flex}.code-snippet[data-v-8b0cd212]{flex-direction:column;width:100%;display:flex}
 /*$vite$:1*/

package/package.json

@@ -17,7 +17,7 @@
     "blocks",
     "docs"
   ],
-  "version": "0.1.19",
+  "version": "0.1.20",
   "engines": {
     "node": ">=22"
   },
@@ -37,13 +37,13 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@scalar/components": "0.29.3",
+    "@scalar/components": "0.30.0",
     "@scalar/helpers": "0.12.0",
     "@scalar/icons": "0.7.6",
-    "@scalar/snippetz": "0.9.31",
+    "@scalar/snippetz": "0.9.32",
     "@scalar/themes": "0.18.0",
-    "@scalar/types": "0.20.0",
-    "@scalar/workspace-store": "0.63.0",
+    "@scalar/types": "0.20.1",
+    "@scalar/workspace-store": "0.64.0",
     "@types/har-format": "^1.2.16",
     "js-base64": "^3.9.2",
     "vue": "^3.5.40"