@scalar/api-client 2.38.4 → 2.39.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"HttpMethod.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/components/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getHttpMethodInfo } from '@scalar/helpers/http/http-info'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { normalizeHttpMethod } from '@scalar/helpers/http/normalize-http-method'\nimport { computed, type Component } from 'vue'\n\nconst props = defineProps<{\n  /** The type of element to render as, defaults to `span` */\n  as?: Component | string\n  /** The css style property or variable that will be set to the request method color, defaults to `color` */\n  property?: string\n  /** Whether or not to abbreviated the slot content */\n  short?: boolean\n  /** The HTTP method to show */\n  method: HttpMethod | string\n}>()\n\n/** Grabs the method info object which contains abbreviation, color, and background color etc */\nconst httpMethodInfo = computed(() =>\n  getHttpMethodInfo(String(props.method || '')),\n)\n\n/** Full method name */\nconst normalized = computed(() => normalizeHttpMethod(props.method))\n</script>\n\n<template>\n  <component\n    :is=\"as ?? 'span'\"\n    class=\"uppercase\"\n    :style=\"{ [property || 'color']: httpMethodInfo.colorVar }\">\n    <slot />\n    {{ short ? httpMethodInfo.short : normalized }}\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAMA,MAAM,QAAQ;;EAYd,MAAM,iBAAiB,eACrB,kBAAkB,OAAO,MAAM,UAAU,GAAG,CAAC,CAC/C;;EAGA,MAAM,aAAa,eAAe,oBAAoB,MAAM,OAAO,CAAA;;uBAIjE,YAMY,wBALL,QAAA,MAAE,OAAA,EAAA;IACP,OAAM;IACL,OAAK,eAAA,GAAK,QAAA,YAAQ,UAAc,eAAA,MAAe,UAAQ,CAAA;;2BAChD,CAAR,WAAQ,KAAA,QAAA,UAAA,EAAA,gBAAA,MACR,gBAAG,QAAA,QAAQ,eAAA,MAAe,QAAQ,WAAA,MAAU,EAAA,EAAA,CAAA,CAAA"}

package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.d.ts

@@ -97,6 +97,11 @@ export type OperationCodeSampleProps = {
      * Workspace + document cookies
      */
     globalCookies?: XScalarCookie[];
+    /**
+     * When the request body schema uses oneOf/anyOf, use these selected variants
+     * for the example snippet (e.g. from the schema dropdowns in the API reference).
+     */
+    requestBodyCompositionSelection?: Record<string, number>;
 };
 /**
  * Request Example

package/dist/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OperationCodeSample.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue"],"names":[],"mappings":"AAydA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAErF,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAgBrE,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,yCAAyC,CAAA;AAChD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,6DAA6D,CAAA;AAM7G,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACzC;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;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;CAChC,CAAA;AAED;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IA2KlB,8DAA8D;sBAC1C,MAAM;;;;IAD1B,8DAA8D;sBAC1C,MAAM;;;;YAxJhB,MAAM,OAAO;YACb,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO;EAygB3D,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":"OperationCodeSample.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue"],"names":[],"mappings":"AAmeA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAErF,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAiBrE,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,yCAAyC,CAAA;AAChD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,6DAA6D,CAAA;AAM7G,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACzC;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;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;IA8KlB,8DAA8D;sBAC1C,MAAM;;;;IAD1B,8DAA8D;sBAC1C,MAAM;;;;YA1JhB,MAAM,OAAO;YACb,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO;EA8gB3D,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.js";
+import OperationCodeSample_vue_vue_type_script_setup_true_lang_default from "./OperationCodeSample.vue.script.js";
+/* empty css                                  */
+//#region src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue
+var OperationCodeSample_default = /* @__PURE__ */ _plugin_vue_export_helper_default(OperationCodeSample_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f52db2cc"]]);
+//#endregion
+export { OperationCodeSample_default as default };
+
+//# sourceMappingURL=OperationCodeSample.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OperationCodeSample.vue.js","names":[],"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 {\n  ScalarButton,\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardHeader,\n  ScalarCardSection,\n  ScalarCodeBlock,\n  ScalarCombobox,\n  ScalarVirtualText,\n} from '@scalar/components'\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 { 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'\nimport type { SecuritySchemeObjectSecret } from '@/v2/blocks/scalar-auth-selector-block/helpers/secret-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/** 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    })\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    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\"\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  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/v2/blocks/operation-code-sample/components/OperationCodeSample.vue.script.js

@@ -0,0 +1,249 @@
+import ExamplePicker_default from "./ExamplePicker.vue.js";
+import { operationToHar } from "../helpers/operation-to-har/operation-to-har.js";
+import HttpMethod_default from "./HttpMethod.vue.js";
+import { filterClientsByQuery } from "../helpers/filter-clients-by-query.js";
+import { findClient } from "../helpers/find-client.js";
+import { getClients } from "../helpers/get-clients.js";
+import { getCustomCodeSamples } from "../helpers/get-custom-code-samples.js";
+import { getSecrets } from "../helpers/get-secrets.js";
+import { generateCodeSnippet } from "../helpers/generate-code-snippet.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, onBeforeMount, openBlock, ref, renderSlot, toDisplayString, unref, useId, useModel, watch, withCtx } from "vue";
+import { ScalarButton, ScalarCard, ScalarCardFooter, ScalarCardHeader, ScalarCardSection, ScalarCodeBlock, ScalarCombobox, ScalarVirtualText } from "@scalar/components";
+import { ScalarIconCaretDown } from "@scalar/icons";
+import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+import { freezeElement } from "@scalar/helpers/dom/freeze-element";
+//#region src/v2/blocks/operation-code-sample/components/OperationCodeSample.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = ["id"];
+var _hoisted_3 = {
+	key: 0,
+	class: "request-card-footer-addon"
+};
+var _hoisted_4 = { class: "request-header" };
+var OperationCodeSample_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "OperationCodeSample",
+	props: /* @__PURE__ */ mergeModels({
+		integration: {},
+		clientOptions: {},
+		selectedClient: {},
+		selectedServer: { default: null },
+		selectedContentType: {},
+		selectedExample: {},
+		eventBus: {},
+		securitySchemes: { default: () => [] },
+		method: {},
+		path: {},
+		operation: {},
+		fallback: { type: Boolean },
+		generateLabel: { type: Function },
+		isWebhook: { type: Boolean },
+		globalCookies: {},
+		requestBodyCompositionSelection: {}
+	}, {
+		"selectedExample": { default: "" },
+		"selectedExampleModifiers": {}
+	}),
+	emits: ["update:selectedExample"],
+	setup(__props) {
+		/** Grab the examples for the given content type */
+		const requestBodyExamples = computed(() => {
+			const content = getResolvedRef(__props.operation.requestBody)?.content ?? {};
+			const contentType = __props.selectedContentType || Object.keys(content)[0];
+			if (!contentType) return {};
+			return content[contentType]?.examples ?? {};
+		});
+		/** The currently selected example key with v-model support */
+		const selectedExampleKey = useModel(__props, "selectedExample");
+		onBeforeMount(() => {
+			selectedExampleKey.value ||= Object.keys(requestBodyExamples.value)[0] ?? "";
+		});
+		/** Grab any custom code samples from the operation */
+		const customCodeSamples = computed(() => getCustomCodeSamples(__props.operation));
+		/** Merge custom code samples with the client options */
+		const clients = computed(() => getClients(customCodeSamples.value, __props.clientOptions));
+		/** The locally selected client which would include code samples from this operation only */
+		const localSelectedClient = ref(findClient(clients.value, __props.selectedClient));
+		/** If the globally selected client changes we can update the local one */
+		watch(() => __props.selectedClient, (newClient) => {
+			const client = findClient(clients.value, newClient);
+			if (client) localSelectedClient.value = client;
+		});
+		/** Generate HAR data for webhook requests */
+		const webhookHar = computed(() => {
+			if (!__props.isWebhook) return null;
+			try {
+				return operationToHar({
+					operation: __props.operation,
+					method: __props.method,
+					path: __props.path,
+					example: selectedExampleKey.value,
+					requestBodyCompositionSelection: __props.requestBodyCompositionSelection
+				});
+			} catch (error) {
+				console.error("[webhookHar]", error);
+				return null;
+			}
+		});
+		/** Generate the code snippet for the selected example */
+		const generatedCode = computed(() => {
+			if (__props.isWebhook) return webhookHar.value?.postData?.text ?? "";
+			return generateCodeSnippet({
+				includeDefaultHeaders: __props.integration === "client",
+				clientId: localSelectedClient.value?.id,
+				customCodeSamples: customCodeSamples.value,
+				operation: __props.operation,
+				method: __props.method,
+				path: __props.path,
+				contentType: __props.selectedContentType,
+				server: __props.selectedServer,
+				securitySchemes: __props.securitySchemes,
+				example: selectedExampleKey.value,
+				globalCookies: __props.globalCookies,
+				requestBodyCompositionSelection: __props.requestBodyCompositionSelection
+			});
+		});
+		/** The language for the code block, used for syntax highlighting */
+		const codeBlockLanguage = computed(() => {
+			if (__props.isWebhook) return webhookLanguage.value;
+			return localSelectedClient.value?.lang;
+		});
+		/** Determine the language for webhook content based on MIME type */
+		const webhookLanguage = computed(() => {
+			if (!webhookHar.value?.postData) return "json";
+			const contentType = webhookHar.value.postData.mimeType;
+			if (contentType?.includes("json")) return "json";
+			if (contentType?.includes("xml")) return "xml";
+			if (contentType?.includes("yaml") || contentType?.includes("yml")) return "yaml";
+			if (contentType?.includes("text/plain")) return "text";
+			return "json";
+		});
+		/**  Block secrets from being shown in the code block */
+		const secretCredentials = computed(() => getSecrets(__props.securitySchemes));
+		/** Grab the ref to freeze the ui as the clients change so there's no jump as the size of the dom changes */
+		const elem = ref(null);
+		/** Set custom example, or update the selected HTTP client globally */
+		const selectClient = (option) => {
+			if (elem.value) {
+				const unfreeze = freezeElement(elem.value.$el);
+				setTimeout(() => {
+					unfreeze();
+				}, 300);
+			}
+			localSelectedClient.value = option;
+			if (option && !option.id.startsWith("custom")) __props.eventBus.emit("workspace:update:selected-client", option.id);
+		};
+		const VIRTUALIZATION_THRESHOLD = 2e4;
+		const shouldVirtualize = computed(() => (generatedCode.value.length ?? 0) > VIRTUALIZATION_THRESHOLD);
+		const id = useId();
+		return (_ctx, _cache) => {
+			return generatedCode.value ? (openBlock(), createBlock(unref(ScalarCard), {
+				key: 0,
+				ref_key: "elem",
+				ref: elem,
+				class: "request-card dark-mode"
+			}, {
+				default: withCtx(() => [
+					createVNode(unref(ScalarCardHeader), { class: "pr-2.5" }, createSlots({
+						default: withCtx(() => [
+							_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Request Example for", -1)),
+							createVNode(HttpMethod_default, {
+								as: "span",
+								class: "request-method",
+								method: __props.method
+							}, null, 8, ["method"]),
+							__props.generateLabel ? (openBlock(), createElementBlock("span", {
+								key: 0,
+								innerHTML: __props.generateLabel()
+							}, null, 8, _hoisted_1)) : createCommentVNode("", true),
+							renderSlot(_ctx.$slots, "header", {}, void 0, true)
+						]),
+						_: 2
+					}, [!__props.isWebhook && clients.value.length ? {
+						name: "actions",
+						fn: withCtx(() => [createVNode(unref(ScalarCombobox), {
+							class: "max-h-80",
+							filterFn: unref(filterClientsByQuery),
+							modelValue: localSelectedClient.value,
+							options: clients.value,
+							placement: "bottom-end",
+							teleport: "",
+							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectClient($event))
+						}, {
+							default: withCtx(() => [createVNode(unref(ScalarButton), {
+								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: withCtx(() => [createTextVNode(toDisplayString(localSelectedClient.value?.title) + " ", 1), createVNode(unref(ScalarIconCaretDown), {
+									class: "ui-open:rotate-180 mt-px size-3 transition-transform duration-100",
+									weight: "bold"
+								})]),
+								_: 1
+							})]),
+							_: 1
+						}, 8, [
+							"filterFn",
+							"modelValue",
+							"options"
+						])]),
+						key: "0"
+					} : void 0]), 1024),
+					createVNode(unref(ScalarCardSection), { class: "request-editor-section custom-scroll p-0" }, {
+						default: withCtx(() => [createElementVNode("div", {
+							id: `${unref(id)}-example`,
+							class: "code-snippet"
+						}, [!shouldVirtualize.value ? (openBlock(), createBlock(unref(ScalarCodeBlock), {
+							key: 0,
+							class: "bg-b-2 h-full",
+							content: generatedCode.value,
+							hideCredentials: secretCredentials.value,
+							lang: codeBlockLanguage.value,
+							lineNumbers: ""
+						}, null, 8, [
+							"content",
+							"hideCredentials",
+							"lang"
+						])) : (openBlock(), createBlock(unref(ScalarVirtualText), {
+							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",
+							lineHeight: 20,
+							text: generatedCode.value
+						}, null, 8, ["text"]))], 8, _hoisted_2)]),
+						_: 1
+					}),
+					Object.keys(requestBodyExamples.value).length > 1 || _ctx.$slots.footer ? (openBlock(), createBlock(unref(ScalarCardFooter), {
+						key: 0,
+						class: "request-card-footer bg-b-3"
+					}, {
+						default: withCtx(() => [Object.keys(requestBodyExamples.value).length > 1 ? (openBlock(), createElementBlock("div", _hoisted_3, [Object.keys(requestBodyExamples.value).length ? (openBlock(), createBlock(ExamplePicker_default, {
+							key: 0,
+							modelValue: selectedExampleKey.value,
+							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedExampleKey.value = $event),
+							examples: requestBodyExamples.value
+						}, null, 8, ["modelValue", "examples"])) : createCommentVNode("", true)])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "footer", { exampleName: selectedExampleKey.value }, void 0, true)]),
+						_: 3
+					})) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 512)) : __props.fallback ? (openBlock(), createBlock(unref(ScalarCard), {
+				key: 1,
+				class: "request-card dark-mode"
+			}, {
+				default: withCtx(() => [createVNode(unref(ScalarCardSection), { class: "request-card-simple" }, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_4, [createVNode(HttpMethod_default, {
+						as: "span",
+						class: "request-method",
+						method: __props.method
+					}, null, 8, ["method"]), renderSlot(_ctx.$slots, "header", {}, void 0, true)]), renderSlot(_ctx.$slots, "footer", { exampleName: selectedExampleKey.value }, void 0, true)]),
+					_: 3
+				})]),
+				_: 3
+			})) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { OperationCodeSample_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=OperationCodeSample.vue.script.js.map

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

@@ -0,0 +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 {\n  ScalarButton,\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardHeader,\n  ScalarCardSection,\n  ScalarCodeBlock,\n  ScalarCombobox,\n  ScalarVirtualText,\n} from '@scalar/components'\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 { 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'\nimport type { SecuritySchemeObjectSecret } from '@/v2/blocks/scalar-auth-selector-block/helpers/secret-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/** 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    })\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    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\"\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  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/filter-clients-by-query.d.ts

@@ -0,0 +1,9 @@
+import type { CustomClientOptionGroup, CustomOrDefaultClientOption } from '../../../../v2/blocks/operation-code-sample/types';
+/**
+ * Filters the clients based on a query
+ *
+ * When dealing with multiple groups, include all options from a group if the
+ * group label itself matches — so searching "JavaScript" shows all JS clients.
+ */
+export declare const filterClientsByQuery: (query: string, options: CustomOrDefaultClientOption[], groups: CustomClientOptionGroup[]) => CustomOrDefaultClientOption[];
+//# sourceMappingURL=filter-clients-by-query.d.ts.map

package/dist/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-clients-by-query.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,MAAM,yCAAyC,CAAA;AAsBnH;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,UACxB,MAAM,WACJ,2BAA2B,EAAE,UAC9B,uBAAuB,EAAE,KAChC,2BAA2B,EAuBiE,CAAA"}

package/dist/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.js

@@ -0,0 +1,37 @@
+//#region src/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.ts
+/**
+* Checks if a client label, client key, or language matches a query
+*/
+var matchesOption = (option, query) => {
+	const q = query.toLowerCase();
+	return option.label.toLowerCase().includes(q) || option.clientKey.toLowerCase().includes(q) || option.lang.toLowerCase().includes(q);
+};
+/**
+* Checks if a client label, client key, or language matches a query
+*/
+var matchesGroup = (group, query) => {
+	const q = query.toLowerCase();
+	return group.label.toLowerCase().includes(q) || group.key.toLowerCase().includes(q);
+};
+/**
+* Filters the clients based on a query
+*
+* When dealing with multiple groups, include all options from a group if the
+* group label itself matches — so searching "JavaScript" shows all JS clients.
+*/
+var filterClientsByQuery = ((query, options, groups) => {
+	if (query === "") return options;
+	const q = query.toLowerCase();
+	const visibleGroupCount = groups ? groups.filter((g) => g.label && g.options.length > 0).length : 0;
+	if (groups && visibleGroupCount > 1) {
+		const result = [];
+		for (const group of groups) if (matchesGroup(group, q)) result.push(...group.options);
+		else result.push(...group.options.filter((o) => matchesOption(o, q)));
+		return result;
+	}
+	return options.filter((o) => matchesOption(o, q));
+});
+//#endregion
+export { filterClientsByQuery };
+
+//# sourceMappingURL=filter-clients-by-query.js.map

package/dist/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-clients-by-query.js","names":[],"sources":["../../../../../src/v2/blocks/operation-code-sample/helpers/filter-clients-by-query.ts"],"sourcesContent":["import type { ScalarComboboxFilterFunction } from '@scalar/components'\n\nimport type { CustomClientOptionGroup, CustomOrDefaultClientOption } from '@/v2/blocks/operation-code-sample/types'\n\n/**\n * Checks if a client label, client key, or language matches a query\n */\nconst matchesOption = (option: CustomOrDefaultClientOption, query: string) => {\n  const q = query.toLowerCase()\n  return (\n    option.label.toLowerCase().includes(q) ||\n    option.clientKey.toLowerCase().includes(q) ||\n    option.lang.toLowerCase().includes(q)\n  )\n}\n\n/**\n * Checks if a client label, client key, or language matches a query\n */\nconst matchesGroup = (group: CustomClientOptionGroup, query: string) => {\n  const q = query.toLowerCase()\n  return group.label.toLowerCase().includes(q) || group.key.toLowerCase().includes(q)\n}\n\n/**\n * Filters the clients based on a query\n *\n * When dealing with multiple groups, include all options from a group if the\n * group label itself matches — so searching \"JavaScript\" shows all JS clients.\n */\nexport const filterClientsByQuery = ((\n  query: string,\n  options: CustomOrDefaultClientOption[],\n  groups: CustomClientOptionGroup[],\n): CustomOrDefaultClientOption[] => {\n  if (query === '') {\n    return options\n  }\n\n  const q = query.toLowerCase()\n\n  // Only activate when more than one group is actually visible (has a label and options).\n  const visibleGroupCount = groups ? groups.filter((g) => g.label && g.options.length > 0).length : 0\n\n  if (groups && visibleGroupCount > 1) {\n    const result: CustomOrDefaultClientOption[] = []\n    for (const group of groups) {\n      if (matchesGroup(group, q)) {\n        result.push(...group.options)\n      } else {\n        result.push(...group.options.filter((o) => matchesOption(o, q)))\n      }\n    }\n    return result\n  }\n\n  return options.filter((o) => matchesOption(o, q))\n}) satisfies ScalarComboboxFilterFunction<CustomOrDefaultClientOption, CustomClientOptionGroup>\n"],"mappings":";;;;AAOA,IAAM,iBAAiB,QAAqC,UAAkB;CAC5E,MAAM,IAAI,MAAM,aAAa;AAC7B,QACE,OAAO,MAAM,aAAa,CAAC,SAAS,EAAE,IACtC,OAAO,UAAU,aAAa,CAAC,SAAS,EAAE,IAC1C,OAAO,KAAK,aAAa,CAAC,SAAS,EAAE;;;;;AAOzC,IAAM,gBAAgB,OAAgC,UAAkB;CACtE,MAAM,IAAI,MAAM,aAAa;AAC7B,QAAO,MAAM,MAAM,aAAa,CAAC,SAAS,EAAE,IAAI,MAAM,IAAI,aAAa,CAAC,SAAS,EAAE;;;;;;;;AASrF,IAAa,yBACX,OACA,SACA,WACkC;AAClC,KAAI,UAAU,GACZ,QAAO;CAGT,MAAM,IAAI,MAAM,aAAa;CAG7B,MAAM,oBAAoB,SAAS,OAAO,QAAQ,MAAM,EAAE,SAAS,EAAE,QAAQ,SAAS,EAAE,CAAC,SAAS;AAElG,KAAI,UAAU,oBAAoB,GAAG;EACnC,MAAM,SAAwC,EAAE;AAChD,OAAK,MAAM,SAAS,OAClB,KAAI,aAAa,OAAO,EAAE,CACxB,QAAO,KAAK,GAAG,MAAM,QAAQ;MAE7B,QAAO,KAAK,GAAG,MAAM,QAAQ,QAAQ,MAAM,cAAc,GAAG,EAAE,CAAC,CAAC;AAGpE,SAAO;;AAGT,QAAO,QAAQ,QAAQ,MAAM,cAAc,GAAG,EAAE,CAAC"}

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

@@ -0,0 +1,55 @@
+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 */
+var isClient = (id) => AVAILABLE_CLIENTS.includes(id);
+/**
+* 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.
+*
+* @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' }
+*
+* // Find first available client
+* const firstClient = findClient(clientGroups)
+* // Returns: { id: 'js/fetch', label: 'Fetch API', lang: 'js' }
+* ```
+*/
+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);
+		if (option) return option;
+	}
+	return firstOption;
+};
+//#endregion
+export { DEFAULT_CLIENT, findClient, isClient };
+
+//# sourceMappingURL=find-client.js.map

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

@@ -0,0 +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"}

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;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,uDAAuD;AACvD,eAAO,MAAM,gBAAgB,GAAI,SAAS,WAAW,KAAG,kBAA8C,CAAA;AAEtG;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,iBAAgB,gBAAoC,KAAG,iBAAiB,EAsC7G,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,uDAAuD;AACvD,eAAO,MAAM,gBAAgB,GAAI,SAAS,WAAW,KAAG,kBAA8C,CAAA;AAEtG;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,iBAAgB,gBAAoC,KAAG,iBAAiB,EAuC7G,CAAA"}

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

@@ -0,0 +1,40 @@
+import { capitalize } from "vue";
+import { AVAILABLE_CLIENTS, snippetz } from "@scalar/snippetz";
+//#region src/v2/blocks/operation-code-sample/helpers/generate-client-options.ts
+/** Helper to generate an ID for custom code samples */
+var generateCustomId = (example) => `custom/${example.lang}`;
+/**
+* Generate client options for the request example block by filtering by allowed clients
+*
+* @param allowedClients - The list of allowed clients to include in the options
+* @returns A list of client option groups
+*/
+var generateClientOptions = (allowedClients = AVAILABLE_CLIENTS) => {
+	/** Create set of allowlist for quicker lookups */
+	const allowedClientsSet = new Set(allowedClients);
+	return snippetz().clients().flatMap((group) => {
+		const options = group.clients.flatMap((plugin) => {
+			const id = `${group.key}/${plugin.client}`;
+			if (!allowedClientsSet.has(id)) return [];
+			return {
+				id,
+				lang: plugin.client === "curl" ? "curl" : group.key,
+				title: `${capitalize(group.title)} ${plugin.title}`,
+				label: plugin.title,
+				targetKey: group.key,
+				targetTitle: group.title,
+				clientKey: plugin.client
+			};
+		});
+		if (options.length === 0) return [];
+		return {
+			label: group.title,
+			key: group.key,
+			options
+		};
+	});
+};
+//#endregion
+export { generateClientOptions, generateCustomId };
+
+//# sourceMappingURL=generate-client-options.js.map

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

@@ -0,0 +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 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/** Helper to generate an ID for custom code samples */\nexport const generateCustomId = (example: XCodeSample): CustomCodeSampleId => `custom/${example.lang}`\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":";;;;AAUA,IAAa,oBAAoB,YAA6C,UAAU,QAAQ;;;;;;;AAQhG,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

@@ -4,7 +4,7 @@ import type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/g
 import type { XCodeSample } from '@scalar/workspace-store/schemas/extensions/operation';
 import type { OperationObject, ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
 import type { SecuritySchemeObjectSecret } from '../../../../v2/blocks/scalar-auth-selector-block/helpers/secret-types';
-import { type CustomCodeSampleId } from './generate-client-options';
+import { type CustomCodeSampleId } from './generate-client-options.js';
 type GenerateCodeSnippetProps = {
     /** The selected client/language for code generation (e.g., 'node/fetch') or a custom code sample ID. */
     clientId: AvailableClient | CustomCodeSampleId | undefined;
@@ -28,8 +28,10 @@ type GenerateCodeSnippetProps = {
     globalCookies?: XScalarCookie[];
     /** Whether to include default headers (e.g., Accept, Content-Type) automatically. */
     includeDefaultHeaders?: boolean;
+    /** Selected oneOf/anyOf variants for nested request body example generation. */
+    requestBodyCompositionSelection?: Record<string, number>;
 };
 /** Generate the code snippet for the selected example OR operation */
-export declare const generateCodeSnippet: ({ clientId, customCodeSamples, includeDefaultHeaders, operation, method, path, example, contentType, server, securitySchemes, globalCookies, }: GenerateCodeSnippetProps) => string;
+export declare const generateCodeSnippet: ({ clientId, customCodeSamples, includeDefaultHeaders, operation, method, path, example, contentType, server, securitySchemes, globalCookies, requestBodyCompositionSelection, }: GenerateCodeSnippetProps) => string;
 export {};
 //# sourceMappingURL=generate-code-snippet.d.ts.map

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,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;AAGjH,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,6DAA6D,CAAA;AAG7G,OAAO,EAAE,KAAK,kBAAkB,EAAoB,MAAM,2BAA2B,CAAA;AAErF,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;CAChC,CAAA;AAED,sEAAsE;AACtE,eAAO,MAAM,mBAAmB,GAAI,gJAYjC,wBAAwB,KAAG,MAuC7B,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,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;AAGjH,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,6DAA6D,CAAA;AAG7G,OAAO,EAAE,KAAK,kBAAkB,EAAoB,MAAM,2BAA2B,CAAA;AAErF,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;CACzD,CAAA;AAED,sEAAsE;AACtE,eAAO,MAAM,mBAAmB,GAAI,iLAajC,wBAAwB,KAAG,MAwC7B,CAAA"}

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

@@ -0,0 +1,37 @@
+import { operationToHar } from "./operation-to-har/operation-to-har.js";
+import { generateCustomId } from "./generate-client-options.js";
+import { getSnippet } from "../../../../views/Components/CodeSnippet/helpers/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 }) => {
+	try {
+		if (!clientId) return "";
+		if (clientId.startsWith("custom")) return customCodeSamples.find((example) => generateCustomId(example) === clientId)?.source ?? "Custom example not found";
+		const harRequest = operationToHar({
+			operation,
+			contentType,
+			method,
+			path,
+			server,
+			securitySchemes,
+			example,
+			globalCookies,
+			includeDefaultHeaders,
+			requestBodyCompositionSelection
+		});
+		const [targetKey, clientKey] = clientId.split("/");
+		const [error, payload] = getSnippet(targetKey, clientKey, harRequest);
+		if (error) {
+			console.error("[generateCodeSnippet]", error);
+			return error.message ?? "Error generating code snippet";
+		}
+		return payload;
+	} catch (error) {
+		console.error("[generateCodeSnippet]", error);
+		return "Error generating code snippet";
+	}
+};
+//#endregion
+export { generateCodeSnippet };
+
+//# sourceMappingURL=generate-code-snippet.js.map