@scalar/api-client 3.9.0 → 3.10.1

package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperationCodeSample.vue.script.js","names":["$slots"],"sources":["../../../../../src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type OperationCodeSampleProps = {\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   *\n   * @defaults to shell/curl or a custom sample if one is available\n   */\n  selectedClient?: AvailableClients[number]\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   * @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 scalar-update-selected-example - removed for now, we can bring it back when we need it\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 AvailableClients } from '@scalar/snippetz'\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.1/strict/openapi-document'\nimport { operationToHar } from '@v2/blocks/operation-code-sample/helpers/operation-to-har/operation-to-har'\nimport {\n  computed,\n  onBeforeMount,\n  ref,\n  useId,\n  watch,\n  type ComponentPublicInstance,\n} from 'vue'\n\nimport HttpMethod from '@/v2/blocks/operation-code-sample/components/HttpMethod.vue'\nimport { filterClientsByQuery } from '@/v2/blocks/operation-code-sample/helpers/filter-clients-by-query'\nimport { findClient } from '@/v2/blocks/operation-code-sample/helpers/find-client'\nimport { getClients } from '@/v2/blocks/operation-code-sample/helpers/get-clients'\nimport { getCustomCodeSamples } from '@/v2/blocks/operation-code-sample/helpers/get-custom-code-samples'\nimport { getSecrets } from '@/v2/blocks/operation-code-sample/helpers/get-secrets'\nimport type {\n  ClientOption,\n  ClientOptionGroup,\n  CustomClientOption,\n} from '@/v2/blocks/operation-code-sample/types'\n\nimport { generateCodeSnippet } from '../helpers/generate-code-snippet'\nimport ExamplePicker from './ExamplePicker.vue'\n\nconst {\n  integration,\n  clientOptions,\n  selectedClient,\n  selectedServer = null,\n  selectedContentType,\n  securitySchemes = [],\n  method,\n  eventBus,\n  path,\n  operation,\n  isWebhook,\n  generateLabel,\n  globalCookies,\n  requestBodyCompositionSelection,\n} = defineProps<OperationCodeSampleProps>()\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/** The currently selected example key with v-model support */\nconst selectedExampleKey = defineModel<string>('selectedExample', {\n  default: '',\n})\n\n// Set default value to the first example\nonBeforeMount(() => {\n  selectedExampleKey.value ||= Object.keys(requestBodyExamples.value)[0] ?? ''\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(selectedExampleKey.value)\n    ) {\n      selectedExampleKey.value = Object.keys(requestBodyExamples.value)[0] ?? ''\n    }\n  },\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(customCodeSamples.value, clientOptions),\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/** If the globally selected client changes we can update the local one */\nwatch(\n  () => selectedClient,\n  (newClient) => {\n    const client = findClient(clients.value, newClient)\n    if (client) {\n      localSelectedClient.value = client\n    }\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: selectedExampleKey.value,\n      requestBodyCompositionSelection,\n      defaultDisabledParameters: false,\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    defaultDisabledParameters: false,\n    includeDefaultHeaders: integration === 'client',\n    clientId: localSelectedClient.value?.id,\n    customCodeSamples: customCodeSamples.value,\n    operation,\n    method,\n    path,\n    contentType: selectedContentType,\n    server: selectedServer,\n    securitySchemes,\n    example: selectedExampleKey.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  // Emit the change if it's not a custom example\n  if (option && !option.id.startsWith('custom')) {\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 && clients.length\"\n        #actions>\n        <ScalarCombobox\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      </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            v-model=\"selectedExampleKey\"\n            :examples=\"requestBodyExamples\" />\n        </template>\n      </div>\n\n      <!-- Footer -->\n      <slot\n        :exampleName=\"selectedExampleKey\"\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=\"selectedExampleKey\"\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":"OperationCodeSample.vue.script.js","names":["$slots"],"sources":["../../../../../src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type OperationCodeSampleProps = {\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   * @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 scalar-update-selected-example - removed for now, we can bring it back when we need it\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.1/strict/openapi-document'\nimport { operationToHar } from '@v2/blocks/operation-code-sample/helpers/operation-to-har/operation-to-har'\nimport {\n  computed,\n  onBeforeMount,\n  ref,\n  useId,\n  watch,\n  type ComponentPublicInstance,\n} from 'vue'\n\nimport HttpMethod from '@/v2/blocks/operation-code-sample/components/HttpMethod.vue'\nimport { filterClientsByQuery } from '@/v2/blocks/operation-code-sample/helpers/filter-clients-by-query'\nimport { findClient } from '@/v2/blocks/operation-code-sample/helpers/find-client'\nimport { getClients } from '@/v2/blocks/operation-code-sample/helpers/get-clients'\nimport { getCustomCodeSamples } from '@/v2/blocks/operation-code-sample/helpers/get-custom-code-samples'\nimport { getSecrets } from '@/v2/blocks/operation-code-sample/helpers/get-secrets'\nimport type {\n  ClientOption,\n  ClientOptionGroup,\n  CustomClientOption,\n} from '@/v2/blocks/operation-code-sample/types'\n\nimport { generateCodeSnippet } from '../helpers/generate-code-snippet'\nimport ExamplePicker from './ExamplePicker.vue'\n\nconst {\n  integration,\n  clientOptions,\n  selectedClient,\n  selectedServer = null,\n  selectedContentType,\n  securitySchemes = [],\n  method,\n  eventBus,\n  path,\n  operation,\n  isWebhook,\n  generateLabel,\n  globalCookies,\n  requestBodyCompositionSelection,\n} = defineProps<OperationCodeSampleProps>()\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/** The currently selected example key with v-model support */\nconst selectedExampleKey = defineModel<string>('selectedExample', {\n  default: '',\n})\n\n// Set default value to the first example\nonBeforeMount(() => {\n  selectedExampleKey.value ||= Object.keys(requestBodyExamples.value)[0] ?? ''\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(selectedExampleKey.value)\n    ) {\n      selectedExampleKey.value = Object.keys(requestBodyExamples.value)[0] ?? ''\n    }\n  },\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: selectedExampleKey.value,\n      requestBodyCompositionSelection,\n      defaultDisabledParameters: false,\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    defaultDisabledParameters: false,\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: selectedExampleKey.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            v-model=\"selectedExampleKey\"\n            :examples=\"requestBodyExamples\" />\n        </template>\n      </div>\n\n      <!-- Footer -->\n      <slot\n        :exampleName=\"selectedExampleKey\"\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=\"selectedExampleKey\"\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/v2/blocks/operation-code-sample/helpers/find-client.d.ts

@@ -1,41 +1,41 @@
 import { type AvailableClients } from '@scalar/snippetz';
 import type { ClientOption, CustomClientOption, CustomClientOptionGroup } from '../../../../v2/blocks/operation-code-sample/types';
 export declare const DEFAULT_CLIENT = "shell/curl";
-/** Type guard to check if a string is a valid client id */
-export declare const isClient: (id: any) => id is AvailableClients[number];
 /**
- * Finds and returns the appropriate client option from a list of client option groups.
- *
- * This function is used to determine which client should be initially selected in the
- * request example block. It prioritizes a specific client ID if provided, otherwise
- * falls back to the first available option.
+ * A selection the code sample picker understands: either a built-in client id
+ * (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).
  *
- * @param options - Array of client option groups, each containing a label and array of client options
- * @param id - Optional client identifier to search for (e.g., 'js/fetch', 'python/requests')
-
- * @returns The selected client option. If a specific ID is provided and found, returns that client.
- *          If the ID is not found or not provided, returns the first available client option.
+ * The custom part is typed as `string & {}` rather than the `custom/${string}`
+ * template literal: unioning that template literal with the (very large) built-in
+ * client-id union trips TypeScript's "union too complex" limit inside Vue's
+ * `defineProps` macro. `string & {}` keeps editor hints for the known client ids
+ * without expanding the union.
+ */
+export type SelectedClientId = AvailableClients[number] | (string & {});
+/** Type guard to check if a string is a valid built-in client id */
+export declare const isClient: (id: any) => id is AvailableClients[number];
+/** Type guard for any selection the picker can restore (built-in client or custom sample id) */
+export declare const isSelectedClient: (id: any) => id is SelectedClientId;
+/**
+ * Finds and returns the appropriate client option to select for an operation.
  *
- * @example
- * ```typescript
- * const clientGroups = [
- *   {
- *     label: 'JavaScript',
- *     options: [
- *       { id: 'js/fetch', label: 'Fetch API', lang: 'js' },
- *       { id: 'js/axios', label: 'Axios', lang: 'js' }
- *     ]
- *   }
- * ]
+ * Selection rules, given the globally selected client/sample id:
  *
- * // Find specific client
- * const client = findClient(clientGroups, 'js/fetch')
- * // Returns: { id: 'js/fetch', label: 'Fetch API', lang: 'js' }
+ * 1. A custom sample is selected (`custom/<lang>`): show the matching sample on
+ *    this operation. If this operation has no sample for that exact language, we
+ *    keep showing a custom sample (its first one) so the selection stays "global".
+ * 2. An explicit built-in client is selected: it wins, even when the operation
+ *    also has custom samples. This includes the default client (`shell/curl`):
+ *    a built-in id only reaches us through a real selection (config, persistence,
+ *    or the picker), never as an implicit default, so a deliberate cURL pick must
+ *    stick instead of snapping back to an SDK example.
+ * 3. Otherwise (nothing selected yet): prefer a custom sample when the operation
+ *    has one, so custom examples are the default.
+ * 4. Fall back to the default built-in client, then the first option.
  *
- * // Find first available client
- * const firstClient = findClient(clientGroups)
- * // Returns: { id: 'js/fetch', label: 'Fetch API', lang: 'js' }
- * ```
+ * @param clientGroups - Array of client option groups, each containing a label and array of client options
+ * @param clientId - Optional selection to restore (e.g. 'js/fetch' or 'custom/python')
+ * @returns The selected client option, or undefined when there is nothing to select
  */
-export declare const findClient: (clientGroups: CustomClientOptionGroup[], clientId?: AvailableClients[number] | undefined) => ClientOption | CustomClientOption | undefined;
+export declare const findClient: (clientGroups: CustomClientOptionGroup[], clientId?: SelectedClientId | undefined) => ClientOption | CustomClientOption | undefined;
 //# sourceMappingURL=find-client.d.ts.map

package/dist/v2/blocks/operation-code-sample/helpers/find-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"find-client.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/find-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAE3E,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAA;AAExH,eAAO,MAAM,cAAc,eAAe,CAAA;AAE1C,2DAA2D;AAC3D,eAAO,MAAM,QAAQ,GAAI,IAAI,GAAG,KAAG,EAAE,IAAI,gBAAgB,CAAC,MAAM,CAAmC,CAAA;AAEnG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,UAAU,GACrB,cAAc,uBAAuB,EAAE,EACvC,WAAW,gBAAgB,CAAC,MAAM,CAAC,GAAG,SAAS,KAC9C,YAAY,GAAG,kBAAkB,GAAG,SAwBtC,CAAA"}
+{"version":3,"file":"find-client.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/find-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAE3E,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAA;AAExH,eAAO,MAAM,cAAc,eAAe,CAAA;AAE1C;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAEvE,oEAAoE;AACpE,eAAO,MAAM,QAAQ,GAAI,IAAI,GAAG,KAAG,EAAE,IAAI,gBAAgB,CAAC,MAAM,CAAmC,CAAA;AAEnG,gGAAgG;AAChG,eAAO,MAAM,gBAAgB,GAAI,IAAI,GAAG,KAAG,EAAE,IAAI,gBACqB,CAAA;AAEtE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,UAAU,GACrB,cAAc,uBAAuB,EAAE,EACvC,WAAW,gBAAgB,GAAG,SAAS,KACtC,YAAY,GAAG,kBAAkB,GAAG,SAmCtC,CAAA"}

package/dist/v2/blocks/operation-code-sample/helpers/find-client.js

@@ -1,55 +1,48 @@
 import { AVAILABLE_CLIENTS } from "@scalar/snippetz";
 //#region src/v2/blocks/operation-code-sample/helpers/find-client.ts
 var DEFAULT_CLIENT = "shell/curl";
-/** Type guard to check if a string is a valid client id */
+/** Type guard to check if a string is a valid built-in client id */
 var isClient = (id) => AVAILABLE_CLIENTS.includes(id);
+/** Type guard for any selection the picker can restore (built-in client or custom sample id) */
+var isSelectedClient = (id) => isClient(id) || typeof id === "string" && id.startsWith("custom/");
 /**
-* Finds and returns the appropriate client option from a list of client option groups.
+* Finds and returns the appropriate client option to select for an operation.
 *
-* This function is used to determine which client should be initially selected in the
-* request example block. It prioritizes a specific client ID if provided, otherwise
-* falls back to the first available option.
+* Selection rules, given the globally selected client/sample id:
 *
-* @param options - Array of client option groups, each containing a label and array of client options
-* @param id - Optional client identifier to search for (e.g., 'js/fetch', 'python/requests')
-
-* @returns The selected client option. If a specific ID is provided and found, returns that client.
-*          If the ID is not found or not provided, returns the first available client option.
-*
-* @example
-* ```typescript
-* const clientGroups = [
-*   {
-*     label: 'JavaScript',
-*     options: [
-*       { id: 'js/fetch', label: 'Fetch API', lang: 'js' },
-*       { id: 'js/axios', label: 'Axios', lang: 'js' }
-*     ]
-*   }
-* ]
-*
-* // Find specific client
-* const client = findClient(clientGroups, 'js/fetch')
-* // Returns: { id: 'js/fetch', label: 'Fetch API', lang: 'js' }
+* 1. A custom sample is selected (`custom/<lang>`): show the matching sample on
+*    this operation. If this operation has no sample for that exact language, we
+*    keep showing a custom sample (its first one) so the selection stays "global".
+* 2. An explicit built-in client is selected: it wins, even when the operation
+*    also has custom samples. This includes the default client (`shell/curl`):
+*    a built-in id only reaches us through a real selection (config, persistence,
+*    or the picker), never as an implicit default, so a deliberate cURL pick must
+*    stick instead of snapping back to an SDK example.
+* 3. Otherwise (nothing selected yet): prefer a custom sample when the operation
+*    has one, so custom examples are the default.
+* 4. Fall back to the default built-in client, then the first option.
 *
-* // Find first available client
-* const firstClient = findClient(clientGroups)
-* // Returns: { id: 'js/fetch', label: 'Fetch API', lang: 'js' }
-* ```
+* @param clientGroups - Array of client option groups, each containing a label and array of client options
+* @param clientId - Optional selection to restore (e.g. 'js/fetch' or 'custom/python')
+* @returns The selected client option, or undefined when there is nothing to select
 */
 var findClient = (clientGroups, clientId) => {
-	const firstOption = clientGroups[0]?.options[0];
-	if (clientId) for (const group of clientGroups) {
-		const option = group.options.find((option) => option.id === clientId);
-		if (option) return option;
-	}
-	if (!firstOption?.id.startsWith("custom")) for (const group of clientGroups) {
-		const option = group.options.find((option) => option.id === DEFAULT_CLIENT);
+	const findById = (id) => {
+		for (const group of clientGroups) {
+			const option = group.options.find((option) => option.id === id);
+			if (option) return option;
+		}
+	};
+	const firstCustom = clientGroups.find((group) => group.key === "custom")?.options[0];
+	if (clientId?.startsWith("custom")) return findById(clientId) ?? firstCustom ?? findById("shell/curl") ?? clientGroups[0]?.options[0];
+	if (clientId) {
+		const option = findById(clientId);
 		if (option) return option;
 	}
-	return firstOption;
+	if (firstCustom) return firstCustom;
+	return findById("shell/curl") ?? clientGroups[0]?.options[0];
 };
 //#endregion
-export { DEFAULT_CLIENT, findClient, isClient };
+export { DEFAULT_CLIENT, findClient, isClient, isSelectedClient };
 
 //# sourceMappingURL=find-client.js.map

package/dist/v2/blocks/operation-code-sample/helpers/find-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"find-client.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/find-client.ts"],"sourcesContent":["import { AVAILABLE_CLIENTS, type AvailableClients } from '@scalar/snippetz'\n\nimport type { ClientOption, CustomClientOption, CustomClientOptionGroup } from '@/v2/blocks/operation-code-sample/types'\n\nexport const DEFAULT_CLIENT = 'shell/curl'\n\n/** Type guard to check if a string is a valid client id */\nexport const isClient = (id: any): id is AvailableClients[number] => AVAILABLE_CLIENTS.includes(id)\n\n/**\n * Finds and returns the appropriate client option from a list of client option groups.\n *\n * This function is used to determine which client should be initially selected in the\n * request example block. It prioritizes a specific client ID if provided, otherwise\n * falls back to the first available option.\n *\n * @param options - Array of client option groups, each containing a label and array of client options\n * @param id - Optional client identifier to search for (e.g., 'js/fetch', 'python/requests')\n\n * @returns The selected client option. If a specific ID is provided and found, returns that client.\n *          If the ID is not found or not provided, returns the first available client option.\n *\n * @example\n * ```typescript\n * const clientGroups = [\n *   {\n *     label: 'JavaScript',\n *     options: [\n *       { id: 'js/fetch', label: 'Fetch API', lang: 'js' },\n *       { id: 'js/axios', label: 'Axios', lang: 'js' }\n *     ]\n *   }\n * ]\n *\n * // Find specific client\n * const client = findClient(clientGroups, 'js/fetch')\n * // Returns: { id: 'js/fetch', label: 'Fetch API', lang: 'js' }\n *\n * // Find first available client\n * const firstClient = findClient(clientGroups)\n * // Returns: { id: 'js/fetch', label: 'Fetch API', lang: 'js' }\n * ```\n */\nexport const findClient = (\n  clientGroups: CustomClientOptionGroup[],\n  clientId?: AvailableClients[number] | undefined,\n): ClientOption | CustomClientOption | undefined => {\n  const firstOption = clientGroups[0]?.options[0]\n\n  // Client ID is passed in\n  if (clientId) {\n    for (const group of clientGroups) {\n      const option = group.options.find((option) => option.id === clientId)\n      if (option) {\n        return option\n      }\n    }\n  }\n\n  // If we dont have any custom examples, lets select the default client\n  if (!firstOption?.id.startsWith('custom')) {\n    for (const group of clientGroups) {\n      const option = group.options.find((option) => option.id === DEFAULT_CLIENT)\n      if (option) {\n        return option\n      }\n    }\n  }\n\n  return firstOption\n}\n"],"mappings":";;AAIA,IAAa,iBAAiB;;AAG9B,IAAa,YAAY,OAA4C,kBAAkB,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCnG,IAAa,cACX,cACA,aACkD;CAClD,MAAM,cAAc,aAAa,IAAI,QAAQ;AAG7C,KAAI,SACF,MAAK,MAAM,SAAS,cAAc;EAChC,MAAM,SAAS,MAAM,QAAQ,MAAM,WAAW,OAAO,OAAO,SAAS;AACrE,MAAI,OACF,QAAO;;AAMb,KAAI,CAAC,aAAa,GAAG,WAAW,SAAS,CACvC,MAAK,MAAM,SAAS,cAAc;EAChC,MAAM,SAAS,MAAM,QAAQ,MAAM,WAAW,OAAO,OAAO,eAAe;AAC3E,MAAI,OACF,QAAO;;AAKb,QAAO"}
+{"version":3,"file":"find-client.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/find-client.ts"],"sourcesContent":["import { AVAILABLE_CLIENTS, type AvailableClients } from '@scalar/snippetz'\n\nimport type { ClientOption, CustomClientOption, CustomClientOptionGroup } from '@/v2/blocks/operation-code-sample/types'\n\nexport const DEFAULT_CLIENT = 'shell/curl'\n\n/**\n * A selection the code sample picker understands: either a built-in client id\n * (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).\n *\n * The custom part is typed as `string & {}` rather than the `custom/${string}`\n * template literal: unioning that template literal with the (very large) built-in\n * client-id union trips TypeScript's \"union too complex\" limit inside Vue's\n * `defineProps` macro. `string & {}` keeps editor hints for the known client ids\n * without expanding the union.\n */\nexport type SelectedClientId = AvailableClients[number] | (string & {})\n\n/** Type guard to check if a string is a valid built-in client id */\nexport const isClient = (id: any): id is AvailableClients[number] => AVAILABLE_CLIENTS.includes(id)\n\n/** Type guard for any selection the picker can restore (built-in client or custom sample id) */\nexport const isSelectedClient = (id: any): id is SelectedClientId =>\n  isClient(id) || (typeof id === 'string' && id.startsWith('custom/'))\n\n/**\n * Finds and returns the appropriate client option to select for an operation.\n *\n * Selection rules, given the globally selected client/sample id:\n *\n * 1. A custom sample is selected (`custom/<lang>`): show the matching sample on\n *    this operation. If this operation has no sample for that exact language, we\n *    keep showing a custom sample (its first one) so the selection stays \"global\".\n * 2. An explicit built-in client is selected: it wins, even when the operation\n *    also has custom samples. This includes the default client (`shell/curl`):\n *    a built-in id only reaches us through a real selection (config, persistence,\n *    or the picker), never as an implicit default, so a deliberate cURL pick must\n *    stick instead of snapping back to an SDK example.\n * 3. Otherwise (nothing selected yet): prefer a custom sample when the operation\n *    has one, so custom examples are the default.\n * 4. Fall back to the default built-in client, then the first option.\n *\n * @param clientGroups - Array of client option groups, each containing a label and array of client options\n * @param clientId - Optional selection to restore (e.g. 'js/fetch' or 'custom/python')\n * @returns The selected client option, or undefined when there is nothing to select\n */\nexport const findClient = (\n  clientGroups: CustomClientOptionGroup[],\n  clientId?: SelectedClientId | undefined,\n): ClientOption | CustomClientOption | undefined => {\n  const findById = (id: string) => {\n    for (const group of clientGroups) {\n      const option = group.options.find((option) => option.id === id)\n      if (option) {\n        return option\n      }\n    }\n    return undefined\n  }\n\n  const firstCustom = clientGroups.find((group) => group.key === 'custom')?.options[0]\n\n  // 1. A custom sample is selected: match the language, otherwise stay on a custom sample\n  if (clientId?.startsWith('custom')) {\n    return findById(clientId) ?? firstCustom ?? findById(DEFAULT_CLIENT) ?? clientGroups[0]?.options[0]\n  }\n\n  // 2. An explicit built-in client wins, even when custom samples exist. A built-in\n  //    id (including the default `shell/curl`) only reaches us through a real\n  //    selection, so it must stick rather than snap back to a custom sample.\n  if (clientId) {\n    const option = findById(clientId)\n    if (option) {\n      return option\n    }\n  }\n\n  // 3. Nothing selected yet: prefer a custom sample when the operation has one\n  if (firstCustom) {\n    return firstCustom\n  }\n\n  // 4. Otherwise fall back to the default built-in client, then the first option\n  return findById(DEFAULT_CLIENT) ?? clientGroups[0]?.options[0]\n}\n"],"mappings":";;AAIA,IAAa,iBAAiB;;AAe9B,IAAa,YAAY,OAA4C,kBAAkB,SAAS,GAAG;;AAGnG,IAAa,oBAAoB,OAC/B,SAAS,GAAG,IAAK,OAAO,OAAO,YAAY,GAAG,WAAW,UAAU;;;;;;;;;;;;;;;;;;;;;;AAuBrE,IAAa,cACX,cACA,aACkD;CAClD,MAAM,YAAY,OAAe;AAC/B,OAAK,MAAM,SAAS,cAAc;GAChC,MAAM,SAAS,MAAM,QAAQ,MAAM,WAAW,OAAO,OAAO,GAAG;AAC/D,OAAI,OACF,QAAO;;;CAMb,MAAM,cAAc,aAAa,MAAM,UAAU,MAAM,QAAQ,SAAS,EAAE,QAAQ;AAGlF,KAAI,UAAU,WAAW,SAAS,CAChC,QAAO,SAAS,SAAS,IAAI,eAAe,SAAA,aAAwB,IAAI,aAAa,IAAI,QAAQ;AAMnG,KAAI,UAAU;EACZ,MAAM,SAAS,SAAS,SAAS;AACjC,MAAI,OACF,QAAO;;AAKX,KAAI,YACF,QAAO;AAIT,QAAO,SAAA,aAAwB,IAAI,aAAa,IAAI,QAAQ"}

package/dist/v2/blocks/operation-code-sample/helpers/format-language.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Turn a free-form language identifier into a display label for the code sample picker.
+ *
+ * @param lang - The language identifier from a custom code sample (e.g. `typescript`)
+ * @returns A properly cased label (e.g. `TypeScript`), or `undefined` when no language is given
+ */
+export declare const formatLanguage: (lang?: string) => string | undefined;
+//# sourceMappingURL=format-language.d.ts.map

package/dist/v2/blocks/operation-code-sample/helpers/format-language.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-language.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/format-language.ts"],"names":[],"mappings":"AAyDA;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAAM,GAAG,SAMvD,CAAA"}

package/dist/v2/blocks/operation-code-sample/helpers/format-language.js

@@ -0,0 +1,70 @@
+import { capitalize } from "@scalar/helpers/string/capitalize";
+//#region src/v2/blocks/operation-code-sample/helpers/format-language.ts
+/**
+* Display names for the most common languages found in custom code samples.
+*
+* Custom samples (`x-scalar-examples`, `x-readme`, `x-stainless-*`, …) carry a
+* free-form `lang` string that we otherwise show verbatim in the picker. This
+* map gives the common ones a properly cased label (e.g. `typescript` →
+* `TypeScript`). Anything not listed falls back to a simple capitalization.
+*/
+var LANGUAGE_LABELS = {
+	c: "C",
+	clojure: "Clojure",
+	cpp: "C++",
+	"c++": "C++",
+	csharp: "C#",
+	"c#": "C#",
+	css: "CSS",
+	curl: "cURL",
+	dart: "Dart",
+	fsharp: "F#",
+	"f#": "F#",
+	go: "Go",
+	golang: "Go",
+	graphql: "GraphQL",
+	html: "HTML",
+	http: "HTTP",
+	java: "Java",
+	javascript: "JavaScript",
+	js: "JavaScript",
+	json: "JSON",
+	kotlin: "Kotlin",
+	node: "Node.js",
+	nodejs: "Node.js",
+	objc: "Objective-C",
+	"objective-c": "Objective-C",
+	ocaml: "OCaml",
+	php: "PHP",
+	powershell: "PowerShell",
+	py: "Python",
+	python: "Python",
+	r: "R",
+	ruby: "Ruby",
+	rust: "Rust",
+	scala: "Scala",
+	sh: "Shell",
+	shell: "Shell",
+	bash: "Shell",
+	sql: "SQL",
+	swift: "Swift",
+	ts: "TypeScript",
+	typescript: "TypeScript",
+	xml: "XML",
+	yaml: "YAML",
+	yml: "YAML"
+};
+/**
+* Turn a free-form language identifier into a display label for the code sample picker.
+*
+* @param lang - The language identifier from a custom code sample (e.g. `typescript`)
+* @returns A properly cased label (e.g. `TypeScript`), or `undefined` when no language is given
+*/
+var formatLanguage = (lang) => {
+	if (!lang) return;
+	return LANGUAGE_LABELS[lang.toLowerCase()] ?? capitalize(lang);
+};
+//#endregion
+export { formatLanguage };
+
+//# sourceMappingURL=format-language.js.map

package/dist/v2/blocks/operation-code-sample/helpers/format-language.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-language.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/format-language.ts"],"sourcesContent":["import { capitalize } from '@scalar/helpers/string/capitalize'\n\n/**\n * Display names for the most common languages found in custom code samples.\n *\n * Custom samples (`x-scalar-examples`, `x-readme`, `x-stainless-*`, …) carry a\n * free-form `lang` string that we otherwise show verbatim in the picker. This\n * map gives the common ones a properly cased label (e.g. `typescript` →\n * `TypeScript`). Anything not listed falls back to a simple capitalization.\n */\nconst LANGUAGE_LABELS: Record<string, string> = {\n  c: 'C',\n  clojure: 'Clojure',\n  cpp: 'C++',\n  'c++': 'C++',\n  csharp: 'C#',\n  'c#': 'C#',\n  css: 'CSS',\n  curl: 'cURL',\n  dart: 'Dart',\n  fsharp: 'F#',\n  'f#': 'F#',\n  go: 'Go',\n  golang: 'Go',\n  graphql: 'GraphQL',\n  html: 'HTML',\n  http: 'HTTP',\n  java: 'Java',\n  javascript: 'JavaScript',\n  js: 'JavaScript',\n  json: 'JSON',\n  kotlin: 'Kotlin',\n  node: 'Node.js',\n  nodejs: 'Node.js',\n  objc: 'Objective-C',\n  'objective-c': 'Objective-C',\n  ocaml: 'OCaml',\n  php: 'PHP',\n  powershell: 'PowerShell',\n  py: 'Python',\n  python: 'Python',\n  r: 'R',\n  ruby: 'Ruby',\n  rust: 'Rust',\n  scala: 'Scala',\n  sh: 'Shell',\n  shell: 'Shell',\n  bash: 'Shell',\n  sql: 'SQL',\n  swift: 'Swift',\n  ts: 'TypeScript',\n  typescript: 'TypeScript',\n  xml: 'XML',\n  yaml: 'YAML',\n  yml: 'YAML',\n}\n\n/**\n * Turn a free-form language identifier into a display label for the code sample picker.\n *\n * @param lang - The language identifier from a custom code sample (e.g. `typescript`)\n * @returns A properly cased label (e.g. `TypeScript`), or `undefined` when no language is given\n */\nexport const formatLanguage = (lang?: string): string | undefined => {\n  if (!lang) {\n    return undefined\n  }\n\n  return LANGUAGE_LABELS[lang.toLowerCase()] ?? capitalize(lang)\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAM,kBAA0C;CAC9C,GAAG;CACH,SAAS;CACT,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;CACN,KAAK;CACL,MAAM;CACN,MAAM;CACN,QAAQ;CACR,MAAM;CACN,IAAI;CACJ,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;CACN,MAAM;CACN,YAAY;CACZ,IAAI;CACJ,MAAM;CACN,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,MAAM;CACN,eAAe;CACf,OAAO;CACP,KAAK;CACL,YAAY;CACZ,IAAI;CACJ,QAAQ;CACR,GAAG;CACH,MAAM;CACN,MAAM;CACN,OAAO;CACP,IAAI;CACJ,OAAO;CACP,MAAM;CACN,KAAK;CACL,OAAO;CACP,IAAI;CACJ,YAAY;CACZ,KAAK;CACL,MAAM;CACN,KAAK;CACN;;;;;;;AAQD,IAAa,kBAAkB,SAAsC;AACnE,KAAI,CAAC,KACH;AAGF,QAAO,gBAAgB,KAAK,aAAa,KAAK,WAAW,KAAK"}

package/dist/v2/blocks/operation-code-sample/helpers/generate-client-options.d.ts

@@ -1,15 +1,25 @@
 import { type AvailableClients } from '@scalar/snippetz';
+import type { XCodeSample } from '@scalar/workspace-store/schemas/extensions/operation';
 import type { ClientOptionGroup } from '../../../../v2/blocks/operation-code-sample/types';
 /** Type of custom code sample IDs */
 export type CustomCodeSampleId = `custom/${string}`;
 /**
- * Generate a unique ID for a custom code sample.
+ * Build stable, language-keyed ids for an operation's custom code samples.
  *
- * The ID is keyed by the sample's position in the operation's code samples, so multiple
- * samples that share the same `lang` (e.g. separate sync and async examples) stay
- * individually selectable.
+ * Custom samples are defined per operation, but a selection (e.g. the Python SDK
+ * example) should sync across every operation that ships the same language. So we
+ * key the id by language rather than by position: the first sample of a language
+ * becomes `custom/<lang>`, and any further samples that repeat a language fall back
+ * to `custom/<lang>/<n>` so they stay individually selectable within the operation.
+ *
+ * The language is lower-cased so a selection still matches when operations (or
+ * extensions) spell the same language with different casing (e.g. `Python` vs
+ * `python`).
+ *
+ * @param samples - The custom code samples for a single operation
+ * @returns A list of ids aligned by index with the input samples
  */
-export declare const generateCustomId: (index: number) => CustomCodeSampleId;
+export declare const getCustomClientIds: (samples: XCodeSample[]) => CustomCodeSampleId[];
 /**
  * Generate client options for the request example block by filtering by allowed clients
  *

package/dist/v2/blocks/operation-code-sample/helpers/generate-client-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-client-options.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/generate-client-options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,gBAAgB,EAAY,MAAM,kBAAkB,CAAA;AAGrF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAA;AAEhF,qCAAqC;AACrC,MAAM,MAAM,kBAAkB,GAAG,UAAU,MAAM,EAAE,CAAA;AAEnD;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM,KAAG,kBAAuC,CAAA;AAExF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,iBAAgB,gBAAoC,KAAG,iBAAiB,EAuC7G,CAAA"}
+{"version":3,"file":"generate-client-options.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/generate-client-options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,gBAAgB,EAAY,MAAM,kBAAkB,CAAA;AACrF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAA;AAGvF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAA;AAEhF,qCAAqC;AACrC,MAAM,MAAM,kBAAkB,GAAG,UAAU,MAAM,EAAE,CAAA;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,GAAI,SAAS,WAAW,EAAE,KAAG,kBAAkB,EAU7E,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,iBAAgB,gBAAoC,KAAG,iBAAiB,EAuC7G,CAAA"}

package/dist/v2/blocks/operation-code-sample/helpers/generate-client-options.js

@@ -2,13 +2,30 @@ import { capitalize } from "vue";
 import { AVAILABLE_CLIENTS, snippetz } from "@scalar/snippetz";
 //#region src/v2/blocks/operation-code-sample/helpers/generate-client-options.ts
 /**
-* Generate a unique ID for a custom code sample.
+* Build stable, language-keyed ids for an operation's custom code samples.
 *
-* The ID is keyed by the sample's position in the operation's code samples, so multiple
-* samples that share the same `lang` (e.g. separate sync and async examples) stay
-* individually selectable.
+* Custom samples are defined per operation, but a selection (e.g. the Python SDK
+* example) should sync across every operation that ships the same language. So we
+* key the id by language rather than by position: the first sample of a language
+* becomes `custom/<lang>`, and any further samples that repeat a language fall back
+* to `custom/<lang>/<n>` so they stay individually selectable within the operation.
+*
+* The language is lower-cased so a selection still matches when operations (or
+* extensions) spell the same language with different casing (e.g. `Python` vs
+* `python`).
+*
+* @param samples - The custom code samples for a single operation
+* @returns A list of ids aligned by index with the input samples
 */
-var generateCustomId = (index) => `custom/${index}`;
+var getCustomClientIds = (samples) => {
+	const countByLang = /* @__PURE__ */ new Map();
+	return samples.map((sample) => {
+		const lang = (sample.lang || "plaintext").toLowerCase();
+		const seen = countByLang.get(lang) ?? 0;
+		countByLang.set(lang, seen + 1);
+		return seen === 0 ? `custom/${lang}` : `custom/${lang}/${seen}`;
+	});
+};
 /**
 * Generate client options for the request example block by filtering by allowed clients
 *
@@ -41,6 +58,6 @@ var generateClientOptions = (allowedClients = AVAILABLE_CLIENTS) => {
 	});
 };
 //#endregion
-export { generateClientOptions, generateCustomId };
+export { generateClientOptions, getCustomClientIds };
 
 //# sourceMappingURL=generate-client-options.js.map

package/dist/v2/blocks/operation-code-sample/helpers/generate-client-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"generate-client-options.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/generate-client-options.ts"],"sourcesContent":["import { AVAILABLE_CLIENTS, type AvailableClients, snippetz } from '@scalar/snippetz'\nimport { capitalize } from 'vue'\n\nimport type { ClientOptionGroup } from '@/v2/blocks/operation-code-sample/types'\n\n/** Type of custom code sample IDs */\nexport type CustomCodeSampleId = `custom/${string}`\n\n/**\n * Generate a unique ID for a custom code sample.\n *\n * The ID is keyed by the sample's position in the operation's code samples, so multiple\n * samples that share the same `lang` (e.g. separate sync and async examples) stay\n * individually selectable.\n */\nexport const generateCustomId = (index: number): CustomCodeSampleId => `custom/${index}`\n\n/**\n * Generate client options for the request example block by filtering by allowed clients\n *\n * @param allowedClients - The list of allowed clients to include in the options\n * @returns A list of client option groups\n */\nexport const generateClientOptions = (allowedClients: AvailableClients = AVAILABLE_CLIENTS): ClientOptionGroup[] => {\n  /** Create set of allowlist for quicker lookups */\n  const allowedClientsSet = new Set(allowedClients)\n\n  const options = snippetz()\n    .clients()\n    .flatMap((group) => {\n      const options = group.clients.flatMap((plugin) => {\n        const id = `${group.key}/${plugin.client}` as AvailableClients[number]\n\n        // If the client is not allowed, skip it\n        if (!allowedClientsSet.has(id)) {\n          return []\n        }\n\n        return {\n          id,\n          lang: plugin.client === 'curl' ? ('curl' as const) : group.key,\n          title: `${capitalize(group.title)} ${plugin.title}`,\n          label: plugin.title,\n          targetKey: group.key,\n          targetTitle: group.title,\n          clientKey: plugin.client,\n        }\n      })\n\n      // If no clients are allowed, skip this group\n      if (options.length === 0) {\n        return []\n      }\n\n      return {\n        label: group.title,\n        key: group.key,\n        options,\n      }\n    })\n\n  return options\n}\n"],"mappings":";;;;;;;;;;AAeA,IAAa,oBAAoB,UAAsC,UAAU;;;;;;;AAQjF,IAAa,yBAAyB,iBAAmC,sBAA2C;;CAElH,MAAM,oBAAoB,IAAI,IAAI,eAAe;AAoCjD,QAlCgB,UAAU,CACvB,SAAS,CACT,SAAS,UAAU;EAClB,MAAM,UAAU,MAAM,QAAQ,SAAS,WAAW;GAChD,MAAM,KAAK,GAAG,MAAM,IAAI,GAAG,OAAO;AAGlC,OAAI,CAAC,kBAAkB,IAAI,GAAG,CAC5B,QAAO,EAAE;AAGX,UAAO;IACL;IACA,MAAM,OAAO,WAAW,SAAU,SAAmB,MAAM;IAC3D,OAAO,GAAG,WAAW,MAAM,MAAM,CAAC,GAAG,OAAO;IAC5C,OAAO,OAAO;IACd,WAAW,MAAM;IACjB,aAAa,MAAM;IACnB,WAAW,OAAO;IACnB;IACD;AAGF,MAAI,QAAQ,WAAW,EACrB,QAAO,EAAE;AAGX,SAAO;GACL,OAAO,MAAM;GACb,KAAK,MAAM;GACX;GACD;GACD"}
+{"version":3,"file":"generate-client-options.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/generate-client-options.ts"],"sourcesContent":["import { AVAILABLE_CLIENTS, type AvailableClients, snippetz } from '@scalar/snippetz'\nimport type { XCodeSample } from '@scalar/workspace-store/schemas/extensions/operation'\nimport { capitalize } from 'vue'\n\nimport type { ClientOptionGroup } from '@/v2/blocks/operation-code-sample/types'\n\n/** Type of custom code sample IDs */\nexport type CustomCodeSampleId = `custom/${string}`\n\n/**\n * Build stable, language-keyed ids for an operation's custom code samples.\n *\n * Custom samples are defined per operation, but a selection (e.g. the Python SDK\n * example) should sync across every operation that ships the same language. So we\n * key the id by language rather than by position: the first sample of a language\n * becomes `custom/<lang>`, and any further samples that repeat a language fall back\n * to `custom/<lang>/<n>` so they stay individually selectable within the operation.\n *\n * The language is lower-cased so a selection still matches when operations (or\n * extensions) spell the same language with different casing (e.g. `Python` vs\n * `python`).\n *\n * @param samples - The custom code samples for a single operation\n * @returns A list of ids aligned by index with the input samples\n */\nexport const getCustomClientIds = (samples: XCodeSample[]): CustomCodeSampleId[] => {\n  const countByLang = new Map<string, number>()\n\n  return samples.map((sample): CustomCodeSampleId => {\n    const lang = (sample.lang || 'plaintext').toLowerCase()\n    const seen = countByLang.get(lang) ?? 0\n    countByLang.set(lang, seen + 1)\n\n    return seen === 0 ? `custom/${lang}` : `custom/${lang}/${seen}`\n  })\n}\n\n/**\n * Generate client options for the request example block by filtering by allowed clients\n *\n * @param allowedClients - The list of allowed clients to include in the options\n * @returns A list of client option groups\n */\nexport const generateClientOptions = (allowedClients: AvailableClients = AVAILABLE_CLIENTS): ClientOptionGroup[] => {\n  /** Create set of allowlist for quicker lookups */\n  const allowedClientsSet = new Set(allowedClients)\n\n  const options = snippetz()\n    .clients()\n    .flatMap((group) => {\n      const options = group.clients.flatMap((plugin) => {\n        const id = `${group.key}/${plugin.client}` as AvailableClients[number]\n\n        // If the client is not allowed, skip it\n        if (!allowedClientsSet.has(id)) {\n          return []\n        }\n\n        return {\n          id,\n          lang: plugin.client === 'curl' ? ('curl' as const) : group.key,\n          title: `${capitalize(group.title)} ${plugin.title}`,\n          label: plugin.title,\n          targetKey: group.key,\n          targetTitle: group.title,\n          clientKey: plugin.client,\n        }\n      })\n\n      // If no clients are allowed, skip this group\n      if (options.length === 0) {\n        return []\n      }\n\n      return {\n        label: group.title,\n        key: group.key,\n        options,\n      }\n    })\n\n  return options\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,IAAa,sBAAsB,YAAiD;CAClF,MAAM,8BAAc,IAAI,KAAqB;AAE7C,QAAO,QAAQ,KAAK,WAA+B;EACjD,MAAM,QAAQ,OAAO,QAAQ,aAAa,aAAa;EACvD,MAAM,OAAO,YAAY,IAAI,KAAK,IAAI;AACtC,cAAY,IAAI,MAAM,OAAO,EAAE;AAE/B,SAAO,SAAS,IAAI,UAAU,SAAS,UAAU,KAAK,GAAG;GACzD;;;;;;;;AASJ,IAAa,yBAAyB,iBAAmC,sBAA2C;;CAElH,MAAM,oBAAoB,IAAI,IAAI,eAAe;AAoCjD,QAlCgB,UAAU,CACvB,SAAS,CACT,SAAS,UAAU;EAClB,MAAM,UAAU,MAAM,QAAQ,SAAS,WAAW;GAChD,MAAM,KAAK,GAAG,MAAM,IAAI,GAAG,OAAO;AAGlC,OAAI,CAAC,kBAAkB,IAAI,GAAG,CAC5B,QAAO,EAAE;AAGX,UAAO;IACL;IACA,MAAM,OAAO,WAAW,SAAU,SAAmB,MAAM;IAC3D,OAAO,GAAG,WAAW,MAAM,MAAM,CAAC,GAAG,OAAO;IAC5C,OAAO,OAAO;IACd,WAAW,MAAM;IACjB,aAAa,MAAM;IACnB,WAAW,OAAO;IACnB;IACD;AAGF,MAAI,QAAQ,WAAW,EACrB,QAAO,EAAE;AAGX,SAAO;GACL,OAAO,MAAM;GACb,KAAK,MAAM;GACX;GACD;GACD"}

package/dist/v2/blocks/operation-code-sample/helpers/generate-code-snippet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-code-snippet.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/generate-code-snippet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,KAAK,EAAE,eAAe,EAAsB,MAAM,kBAAkB,CAAA;AAC3E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAA;AACvF,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAIjH,OAAO,EAAE,KAAK,kBAAkB,EAAoB,MAAM,2BAA2B,CAAA;AAGrF,KAAK,wBAAwB,GAAG;IAC9B,wGAAwG;IACxG,QAAQ,EAAE,eAAe,GAAG,kBAAkB,GAAG,SAAS,CAAA;IAC1D,qFAAqF;IACrF,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,mFAAmF;IACnF,iBAAiB,EAAE,WAAW,EAAE,CAAA;IAChC,0EAA0E;IAC1E,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,gEAAgE;IAChE,MAAM,EAAE,UAAU,CAAA;IAClB,wEAAwE;IACxE,SAAS,EAAE,eAAe,CAAA;IAC1B,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAA;IACZ,iFAAiF;IACjF,eAAe,EAAE,0BAA0B,EAAE,CAAA;IAC7C,mEAAmE;IACnE,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,mCAAmC;IACnC,aAAa,CAAC,EAAE,aAAa,EAAE,CAAA;IAC/B,qFAAqF;IACrF,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,gFAAgF;IAChF,+BAA+B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxD,gDAAgD;IAChD,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAA;AAED,sEAAsE;AACtE,eAAO,MAAM,mBAAmB,GAAI,4MAcjC,wBAAwB,KAAG,MAwC7B,CAAA"}
+{"version":3,"file":"generate-code-snippet.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/generate-code-snippet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,KAAK,EAAE,eAAe,EAAsB,MAAM,kBAAkB,CAAA;AAC3E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAA;AACvF,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAIjH,OAAO,EAAE,KAAK,kBAAkB,EAAsB,MAAM,2BAA2B,CAAA;AAGvF,KAAK,wBAAwB,GAAG;IAC9B,wGAAwG;IACxG,QAAQ,EAAE,eAAe,GAAG,kBAAkB,GAAG,SAAS,CAAA;IAC1D,qFAAqF;IACrF,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,mFAAmF;IACnF,iBAAiB,EAAE,WAAW,EAAE,CAAA;IAChC,0EAA0E;IAC1E,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,gEAAgE;IAChE,MAAM,EAAE,UAAU,CAAA;IAClB,wEAAwE;IACxE,SAAS,EAAE,eAAe,CAAA;IAC1B,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAA;IACZ,iFAAiF;IACjF,eAAe,EAAE,0BAA0B,EAAE,CAAA;IAC7C,mEAAmE;IACnE,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,mCAAmC;IACnC,aAAa,CAAC,EAAE,aAAa,EAAE,CAAA;IAC/B,qFAAqF;IACrF,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,gFAAgF;IAChF,+BAA+B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxD,gDAAgD;IAChD,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAA;AAED,sEAAsE;AACtE,eAAO,MAAM,mBAAmB,GAAI,4MAcjC,wBAAwB,KAAG,MAyC7B,CAAA"}

package/dist/v2/blocks/operation-code-sample/helpers/generate-code-snippet.js

@@ -1,12 +1,12 @@
 import { operationToHar } from "./operation-to-har/operation-to-har.js";
-import { generateCustomId } from "./generate-client-options.js";
+import { getCustomClientIds } from "./generate-client-options.js";
 import { getSnippet } from "./get-snippet.js";
 //#region src/v2/blocks/operation-code-sample/helpers/generate-code-snippet.ts
 /** Generate the code snippet for the selected example OR operation */
 var generateCodeSnippet = ({ clientId, customCodeSamples, includeDefaultHeaders = false, operation, method, path, example, contentType, server, securitySchemes, globalCookies, requestBodyCompositionSelection, defaultDisabledParameters }) => {
 	try {
 		if (!clientId) return "";
-		if (clientId.startsWith("custom")) return customCodeSamples.find((_, index) => generateCustomId(index) === clientId)?.source ?? "Custom example not found";
+		if (clientId.startsWith("custom")) return customCodeSamples[getCustomClientIds(customCodeSamples).indexOf(clientId)]?.source ?? "Custom example not found";
 		const harRequest = operationToHar({
 			operation,
 			contentType,

package/dist/v2/blocks/operation-code-sample/helpers/generate-code-snippet.js.map

@@ -1 +1 @@
-{"version":3,"file":"generate-code-snippet.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/generate-code-snippet.ts"],"sourcesContent":["import type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { AvailableClient, ClientId, TargetId } from '@scalar/snippetz'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type { XCodeSample } from '@scalar/workspace-store/schemas/extensions/operation'\nimport type { OperationObject, ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport { operationToHar } from '@/v2/blocks/operation-code-sample/helpers/operation-to-har/operation-to-har'\n\nimport { type CustomCodeSampleId, generateCustomId } from './generate-client-options'\nimport { getSnippet } from './get-snippet'\n\ntype GenerateCodeSnippetProps = {\n  /** The selected client/language for code generation (e.g., 'node/fetch') or a custom code sample ID. */\n  clientId: AvailableClient | CustomCodeSampleId | undefined\n  /** The Content-Type header value for the request body (e.g., 'application/json'). */\n  contentType: string | undefined\n  /** Array of custom code samples defined in the OpenAPI x-codeSamples extension. */\n  customCodeSamples: XCodeSample[]\n  /** The specific example value to use when generating the code snippet. */\n  example: string | undefined\n  /** The HTTP method for the operation (e.g., GET, POST, PUT). */\n  method: HttpMethod\n  /** The OpenAPI operation object containing request/response details. */\n  operation: OperationObject\n  /** The API endpoint path (e.g., '/users/{id}'). */\n  path: string\n  /** Array of security schemes to apply to the request (e.g., API keys, OAuth). */\n  securitySchemes: SecuritySchemeObjectSecret[]\n  /** The server object defining the base URL for the API request. */\n  server: ServerObject | null\n  /** Workspace + document cookies */\n  globalCookies?: XScalarCookie[]\n  /** Whether to include default headers (e.g., Accept, Content-Type) automatically. */\n  includeDefaultHeaders?: boolean\n  /** Selected oneOf/anyOf variants for nested request body example generation. */\n  requestBodyCompositionSelection?: Record<string, number>\n  /** Whether to disable parameters by default. */\n  defaultDisabledParameters?: boolean\n}\n\n/** Generate the code snippet for the selected example OR operation */\nexport const generateCodeSnippet = ({\n  clientId,\n  customCodeSamples,\n  includeDefaultHeaders = false,\n  operation,\n  method,\n  path,\n  example,\n  contentType,\n  server,\n  securitySchemes,\n  globalCookies,\n  requestBodyCompositionSelection,\n  defaultDisabledParameters,\n}: GenerateCodeSnippetProps): string => {\n  try {\n    if (!clientId) {\n      return ''\n    }\n\n    // Use the selected custom example\n    if (clientId.startsWith('custom')) {\n      return (\n        customCodeSamples.find((_, index) => generateCustomId(index) === clientId)?.source ?? 'Custom example not found'\n      )\n    }\n\n    const harRequest = operationToHar({\n      operation,\n      contentType,\n      method,\n      path,\n      server,\n      securitySchemes,\n      example,\n      globalCookies,\n      includeDefaultHeaders,\n      requestBodyCompositionSelection,\n      defaultDisabledParameters,\n    })\n\n    const [targetKey, clientKey] = clientId.split('/') as [TargetId, ClientId<TargetId>]\n\n    const [error, payload] = getSnippet(targetKey, clientKey, harRequest)\n    if (error) {\n      console.error('[generateCodeSnippet]', error)\n      return error.message ?? 'Error generating code snippet'\n    }\n\n    return payload\n  } catch (error) {\n    console.error('[generateCodeSnippet]', error)\n    return 'Error generating code snippet'\n  }\n}\n"],"mappings":";;;;;AA0CA,IAAa,uBAAuB,EAClC,UACA,mBACA,wBAAwB,OACxB,WACA,QACA,MACA,SACA,aACA,QACA,iBACA,eACA,iCACA,gCACsC;AACtC,KAAI;AACF,MAAI,CAAC,SACH,QAAO;AAIT,MAAI,SAAS,WAAW,SAAS,CAC/B,QACE,kBAAkB,MAAM,GAAG,UAAU,iBAAiB,MAAM,KAAK,SAAS,EAAE,UAAU;EAI1F,MAAM,aAAa,eAAe;GAChC;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EAEF,MAAM,CAAC,WAAW,aAAa,SAAS,MAAM,IAAI;EAElD,MAAM,CAAC,OAAO,WAAW,WAAW,WAAW,WAAW,WAAW;AACrE,MAAI,OAAO;AACT,WAAQ,MAAM,yBAAyB,MAAM;AAC7C,UAAO,MAAM,WAAW;;AAG1B,SAAO;UACA,OAAO;AACd,UAAQ,MAAM,yBAAyB,MAAM;AAC7C,SAAO"}
+{"version":3,"file":"generate-code-snippet.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/generate-code-snippet.ts"],"sourcesContent":["import type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { AvailableClient, ClientId, TargetId } from '@scalar/snippetz'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type { XCodeSample } from '@scalar/workspace-store/schemas/extensions/operation'\nimport type { OperationObject, ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport { operationToHar } from '@/v2/blocks/operation-code-sample/helpers/operation-to-har/operation-to-har'\n\nimport { type CustomCodeSampleId, getCustomClientIds } from './generate-client-options'\nimport { getSnippet } from './get-snippet'\n\ntype GenerateCodeSnippetProps = {\n  /** The selected client/language for code generation (e.g., 'node/fetch') or a custom code sample ID. */\n  clientId: AvailableClient | CustomCodeSampleId | undefined\n  /** The Content-Type header value for the request body (e.g., 'application/json'). */\n  contentType: string | undefined\n  /** Array of custom code samples defined in the OpenAPI x-codeSamples extension. */\n  customCodeSamples: XCodeSample[]\n  /** The specific example value to use when generating the code snippet. */\n  example: string | undefined\n  /** The HTTP method for the operation (e.g., GET, POST, PUT). */\n  method: HttpMethod\n  /** The OpenAPI operation object containing request/response details. */\n  operation: OperationObject\n  /** The API endpoint path (e.g., '/users/{id}'). */\n  path: string\n  /** Array of security schemes to apply to the request (e.g., API keys, OAuth). */\n  securitySchemes: SecuritySchemeObjectSecret[]\n  /** The server object defining the base URL for the API request. */\n  server: ServerObject | null\n  /** Workspace + document cookies */\n  globalCookies?: XScalarCookie[]\n  /** Whether to include default headers (e.g., Accept, Content-Type) automatically. */\n  includeDefaultHeaders?: boolean\n  /** Selected oneOf/anyOf variants for nested request body example generation. */\n  requestBodyCompositionSelection?: Record<string, number>\n  /** Whether to disable parameters by default. */\n  defaultDisabledParameters?: boolean\n}\n\n/** Generate the code snippet for the selected example OR operation */\nexport const generateCodeSnippet = ({\n  clientId,\n  customCodeSamples,\n  includeDefaultHeaders = false,\n  operation,\n  method,\n  path,\n  example,\n  contentType,\n  server,\n  securitySchemes,\n  globalCookies,\n  requestBodyCompositionSelection,\n  defaultDisabledParameters,\n}: GenerateCodeSnippetProps): string => {\n  try {\n    if (!clientId) {\n      return ''\n    }\n\n    // Use the selected custom example, matched by its language-keyed id\n    if (clientId.startsWith('custom')) {\n      const ids = getCustomClientIds(customCodeSamples)\n      const index = ids.indexOf(clientId as CustomCodeSampleId)\n\n      return customCodeSamples[index]?.source ?? 'Custom example not found'\n    }\n\n    const harRequest = operationToHar({\n      operation,\n      contentType,\n      method,\n      path,\n      server,\n      securitySchemes,\n      example,\n      globalCookies,\n      includeDefaultHeaders,\n      requestBodyCompositionSelection,\n      defaultDisabledParameters,\n    })\n\n    const [targetKey, clientKey] = clientId.split('/') as [TargetId, ClientId<TargetId>]\n\n    const [error, payload] = getSnippet(targetKey, clientKey, harRequest)\n    if (error) {\n      console.error('[generateCodeSnippet]', error)\n      return error.message ?? 'Error generating code snippet'\n    }\n\n    return payload\n  } catch (error) {\n    console.error('[generateCodeSnippet]', error)\n    return 'Error generating code snippet'\n  }\n}\n"],"mappings":";;;;;AA0CA,IAAa,uBAAuB,EAClC,UACA,mBACA,wBAAwB,OACxB,WACA,QACA,MACA,SACA,aACA,QACA,iBACA,eACA,iCACA,gCACsC;AACtC,KAAI;AACF,MAAI,CAAC,SACH,QAAO;AAIT,MAAI,SAAS,WAAW,SAAS,CAI/B,QAAO,kBAHK,mBAAmB,kBAAkB,CAC/B,QAAQ,SAA+B,GAExB,UAAU;EAG7C,MAAM,aAAa,eAAe;GAChC;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EAEF,MAAM,CAAC,WAAW,aAAa,SAAS,MAAM,IAAI;EAElD,MAAM,CAAC,OAAO,WAAW,WAAW,WAAW,WAAW,WAAW;AACrE,MAAI,OAAO;AACT,WAAQ,MAAM,yBAAyB,MAAM;AAC7C,UAAO,MAAM,WAAW;;AAG1B,SAAO;UACA,OAAO;AACd,UAAQ,MAAM,yBAAyB,MAAM;AAC7C,SAAO"}

package/dist/v2/blocks/operation-code-sample/helpers/get-clients.d.ts

@@ -6,7 +6,8 @@ import type { CustomClientOptionGroup } from '../../../../v2/blocks/operation-co
  *
  * @param customCodeSamples - The custom code samples from the operation to merge with the client options
  * @param clientOptions - The client options to merge with the custom code samples
+ * @param label - The label for the custom samples group (e.g. "SDK" or "Code Examples")
  * @returns A list of client option groups
  */
-export declare const getClients: (customCodeSamples: XCodeSample[], clientOptions: ClientOptionGroup[]) => CustomClientOptionGroup[];
+export declare const getClients: (customCodeSamples: XCodeSample[], clientOptions: ClientOptionGroup[], label?: string) => CustomClientOptionGroup[];
 //# sourceMappingURL=get-clients.d.ts.map

package/dist/v2/blocks/operation-code-sample/helpers/get-clients.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-clients.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/get-clients.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAA;AAEvF,OAAO,KAAK,EAAE,iBAAiB,EAAsB,MAAM,mCAAmC,CAAA;AAE9F,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAA;AAEtF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GACrB,mBAAmB,WAAW,EAAE,EAChC,eAAe,iBAAiB,EAAE,KACjC,uBAAuB,EA4BzB,CAAA"}
+{"version":3,"file":"get-clients.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/get-clients.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAA;AAEvF,OAAO,KAAK,EAAE,iBAAiB,EAAsB,MAAM,mCAAmC,CAAA;AAI9F,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAA;AAEtF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GACrB,mBAAmB,WAAW,EAAE,EAChC,eAAe,iBAAiB,EAAE,EAClC,QAAO,MAAkC,KACxC,uBAAuB,EA+BzB,CAAA"}