@scalar/api-client 3.9.0 → 3.10.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @scalar/api-client
 
+## 3.10.1
+
+### Patch Changes
+
+- [#9449](https://github.com/scalar/scalar/pull/9449): Replace the CommonJS-only `cookie` dependency with an in-repo ESM `serializeCookie` helper
+
+## 3.10.0
+
+### Minor Changes
+
+- [#9398](https://github.com/scalar/scalar/pull/9398): feat: read code samples from x-readme, x-stainless and x-scalar extensions
+
+  In addition to `x-codeSamples`, the code sample picker now reads custom samples from `x-scalar-examples`, `x-stainless-snippets`, `x-stainless-examples`, and `x-readme.code-samples`. When more than one is present on an operation, the highest-priority source is used (x-scalar-examples > x-stainless-snippets > x-stainless-examples > x-readme > x-codeSamples).
+
+### Patch Changes
+
+- [#9438](https://github.com/scalar/scalar/pull/9438): feat(api-reference): add an AsyncAPI server selector
+
+  Adds a server selector for AsyncAPI documents in the API reference introduction. It mirrors the OpenAPI server selector but works with the AsyncAPI server shape (a named map of `host`/`protocol`/`pathname`), labelling each server with its constructed connection URL.
+
+  Server selection and variable changes are now persisted to the workspace store via new `asyncapi-server:update:selected` and `asyncapi-server:update:variables` events and their mutators, mirroring the OpenAPI wiring.
+
+- [#9404](https://github.com/scalar/scalar/pull/9404): Send `multipart/form-data` and `application/x-www-form-urlencoded` object properties using their OpenAPI encoding `style`/`explode` (for example `style: deepObject` produces `address[city]=...` bracket notation) instead of always JSON-stringifying them. The request sent over the wire now matches the generated code snippet.
+- [#9408](https://github.com/scalar/scalar/pull/9408): Render the client library name as a plain label instead of a dropdown when only a single client is available
+
 ## 3.9.0
 
 ### Minor Changes

package/dist/plugins/posthog/sanitize-event-payload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sanitize-event-payload.d.ts","sourceRoot":"","sources":["../../../src/plugins/posthog/sanitize-event-payload.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAuBxE;;;;;;GAMG;AACH,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,kBAAkB,GAAG,MAAM,kBAAkB,IAAI,CACrF,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAC3B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAA;AAEpD,4EAA4E;AAC5E,KAAK,gBAAgB,GAAG;KACrB,CAAC,IAAI,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS;CACjE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,gBAkI5B,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,MAAM,kBAAkB,EACrE,OAAO,CAAC,EACR,SAAS,kBAAkB,CAAC,CAAC,CAAC,KAC7B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,GAAG,IAMpD,CAAA"}
+{"version":3,"file":"sanitize-event-payload.d.ts","sourceRoot":"","sources":["../../../src/plugins/posthog/sanitize-event-payload.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAuBxE;;;;;;GAMG;AACH,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,kBAAkB,GAAG,MAAM,kBAAkB,IAAI,CACrF,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAC3B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAA;AAEpD,4EAA4E;AAC5E,KAAK,gBAAgB,GAAG;KACrB,CAAC,IAAI,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS;CACjE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,gBAoI5B,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,MAAM,kBAAkB,EACrE,OAAO,CAAC,EACR,SAAS,kBAAkB,CAAC,CAAC,CAAC,KAC7B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,GAAG,IAMpD,CAAA"}

package/dist/plugins/posthog/sanitize-event-payload.js

@@ -98,6 +98,8 @@ var TRACKED_EVENTS = {
 	"server:update:variables": void 0,
 	"server:update:selected": void 0,
 	"server:clear:servers": void 0,
+	"asyncapi-server:update:selected": void 0,
+	"asyncapi-server:update:variables": void 0,
 	"tabs:update:tabs": void 0,
 	"tabs:close:tab": void 0,
 	"tabs:close:other-tabs": void 0,

package/dist/plugins/posthog/sanitize-event-payload.js.map

@@ -1 +1 @@
-{"version":3,"file":"sanitize-event-payload.js","names":[],"sources":["../../../src/plugins/posthog/sanitize-event-payload.ts"],"sourcesContent":["import { getValueAtPath } from '@scalar/helpers/object/get-value-at-path'\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\n\n/**\n * Builds an extractor that pulls a string from `payload` at `path` and emits\n * it under `{ [key]: value }`. Returns `{}` when the leaf is missing or is\n * not a string.\n *\n * `key` defaults to the dotted form of `path` (e.g. `['meta', 'type']` becomes\n * `'meta.type'`), matching the existing PostHog property names.\n *\n * Built on `getValueAtPath`, so null/undefined traversal and missing segments\n * are handled centrally.\n */\nconst stringAtPath = (path: string[], key: string = path.join('.')) => {\n  return (payload: unknown): Record<string, unknown> => {\n    const value = getValueAtPath(payload, path)\n    return typeof value === 'string' ? { [key]: value } : {}\n  }\n}\n\n/** Extractor for events whose only useful property is the fact they fired. */\nconst empty = (): Record<string, unknown> => ({})\n\n/**\n * Allowlist of events that should be forwarded to PostHog.\n *\n * Each key is an event name; its value is an extractor that pulls only the\n * safe, non-PII properties we want to track. Events not in this map are\n * silently dropped — this keeps the analytics surface explicit and auditable.\n */\ntype PayloadExtractor<K extends keyof ApiReferenceEvents = keyof ApiReferenceEvents> = (\n  payload: ApiReferenceEvents[K],\n) => Record<string, unknown> | ApiReferenceEvents[K]\n\n/** Maps every event to either a typed extractor or `undefined` (opt-out) */\ntype TrackedEventsMap = {\n  [K in keyof ApiReferenceEvents]: PayloadExtractor<K> | undefined\n}\n\nexport const TRACKED_EVENTS: TrackedEventsMap = {\n  // Auth events — track the scheme type so we know which auth methods are popular\n  'auth:update:selected-security-schemes': stringAtPath(['meta', 'type']),\n  'auth:update:active-index': stringAtPath(['meta', 'type']),\n  'auth:update:security-scheme': stringAtPath(['payload', 'type']),\n  'auth:clear:selected-security-schemes': stringAtPath(['meta', 'type']),\n  'auth:update:selected-scopes': stringAtPath(['meta', 'type']),\n  'auth:delete:security-scheme': empty,\n  'auth:clear:security-scheme-secrets': empty,\n  'auth:upsert:scopes': empty,\n  'auth:delete:scopes': empty,\n\n  // Cookie events — track whether it belongs to a document or workspace\n  'cookie:upsert:cookie': stringAtPath(['collectionType']),\n  'cookie:delete:cookie': stringAtPath(['collectionType']),\n\n  // Environment events — same document-vs-workspace distinction\n  'environment:upsert:environment': stringAtPath(['collectionType']),\n  'environment:delete:environment': stringAtPath(['collectionType']),\n  'environment:upsert:environment-variable': stringAtPath(['collectionType']),\n  'environment:delete:environment-variable': stringAtPath(['collectionType']),\n\n  // Document lifecycle\n  'document:create:empty-document': empty,\n  'document:delete:document': empty,\n  'document:update:info': empty,\n  'document:update:icon': empty,\n  'document:update:watch-mode': empty,\n\n  // Operation events — contentType helps us understand payload format usage\n  'operation:send:request:hotkey': empty,\n  'operation:cancel:request': empty,\n  'operation:create:operation': empty,\n  'operation:delete:operation': empty,\n  'operation:create:draft-example': empty,\n  'operation:delete:example': empty,\n  'operation:update:requestBody:contentType': stringAtPath(['payload', 'contentType']),\n  'operation:update:pathMethod': empty,\n  'operation:rename:example': empty,\n  'operation:reload:history': empty,\n\n  // UI events — track which surfaces users interact with\n  'ui:open:client-modal': empty,\n  'ui:open:command-palette': empty,\n  'ui:open:settings': empty,\n  'ui:download:document': stringAtPath(['format']),\n  'ui:toggle:sidebar': empty,\n  'ui:save:local-document': empty,\n  'copy-url:address-bar': empty,\n  'tabs:add:tab': empty,\n  'tabs:copy:url': empty,\n\n  // Server events\n  'server:add:server': empty,\n  'server:delete:server': empty,\n\n  // Tag events\n  'tag:create:tag': empty,\n  'tag:delete:tag': empty,\n\n  // Request lifecycle hooks — lets us measure request volume without capturing bodies\n  'hooks:on:request:sent': empty,\n  'hooks:on:request:complete': empty,\n  'hooks:on:rebase:document:complete': empty,\n\n  // Workspace preference events\n  'workspace:update:color-mode': empty,\n  'workspace:update:theme': empty,\n  'workspace:update:selected-client': empty,\n  'workspace:update:active-proxy': (payload) => ({ enabled: !!payload }),\n  'workspace:update:active-environment': empty,\n\n  // Meta events\n  'update:dark-mode': empty,\n  'update:active-document': empty,\n  'update:selected-client': empty,\n\n  // Account funnel events\n  'log:login-click': empty,\n  'log:register-click': empty,\n  'log:user-login': empty,\n  'log:user-logout': empty,\n\n  // Document sync and save events\n  'log:save-document': empty,\n  'log:sync-pull-document': empty,\n  'log:sync-push-document': empty,\n\n  // ---------------------------------------------------------------------------\n  // Do not track — explicitly opted out so new events cause a type error\n  // until they are consciously placed above with a payload\n  // ---------------------------------------------------------------------------\n  'auth:update:security-scheme-secrets': undefined,\n  'analytics:on:show-more': undefined,\n  'analytics:on:loaded': undefined,\n  'document:update:extension': undefined,\n  'operation:update:meta': undefined,\n  'operation:update:extension': undefined,\n  'operation:upsert:parameter': undefined,\n  'operation:update:extra-parameters': undefined,\n  'operation:delete:parameter': undefined,\n  'operation:delete-all:parameters': undefined,\n  'operation:update:requestBody:value': undefined,\n  'operation:update:requestBody:formValue': undefined,\n  'server:initialize:servers': undefined,\n  'server:update:server': undefined,\n  'server:update:variables': undefined,\n  'server:update:selected': undefined,\n  'server:clear:servers': undefined,\n  'tabs:update:tabs': undefined,\n  'tabs:close:tab': undefined,\n  'tabs:close:other-tabs': undefined,\n  'tabs:navigate:previous': undefined,\n  'tabs:navigate:next': undefined,\n  'tabs:focus:tab': undefined,\n  'tabs:focus:tab-last': undefined,\n  'ui:focus:address-bar': undefined,\n  'ui:focus:send-button': undefined,\n  'ui:focus:search': undefined,\n  'ui:open:create-workspace': undefined,\n  'ui:close:client-modal': undefined,\n  'ui:navigate': undefined,\n  'toggle:nav-item': undefined,\n  'select:nav-item': undefined,\n  'intersecting:nav-item': undefined,\n  'scroll-to:nav-item': undefined,\n  'scroll-to:model-by-name': undefined,\n  'copy-url:nav-item': undefined,\n  'tag:edit:tag': undefined,\n  'workspace:update:name': undefined,\n}\n\n/**\n * Returns sanitized properties for a tracked event, or `null` if the event\n * should not be captured at all.\n *\n * This is the only function that the PostHog plugin needs to call — it\n * encapsulates both the \"should we track this?\" decision and the \"what\n * properties are safe to send?\" extraction in one step.\n */\nexport const sanitizeEventPayload = <K extends keyof ApiReferenceEvents>(\n  event: K,\n  payload: ApiReferenceEvents[K],\n): Record<string, unknown> | ApiReferenceEvents[K] | null => {\n  const extractor = TRACKED_EVENTS[event]\n  if (!extractor) {\n    return null\n  }\n  return extractor(payload)\n}\n"],"mappings":"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"}
+{"version":3,"file":"sanitize-event-payload.js","names":[],"sources":["../../../src/plugins/posthog/sanitize-event-payload.ts"],"sourcesContent":["import { getValueAtPath } from '@scalar/helpers/object/get-value-at-path'\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\n\n/**\n * Builds an extractor that pulls a string from `payload` at `path` and emits\n * it under `{ [key]: value }`. Returns `{}` when the leaf is missing or is\n * not a string.\n *\n * `key` defaults to the dotted form of `path` (e.g. `['meta', 'type']` becomes\n * `'meta.type'`), matching the existing PostHog property names.\n *\n * Built on `getValueAtPath`, so null/undefined traversal and missing segments\n * are handled centrally.\n */\nconst stringAtPath = (path: string[], key: string = path.join('.')) => {\n  return (payload: unknown): Record<string, unknown> => {\n    const value = getValueAtPath(payload, path)\n    return typeof value === 'string' ? { [key]: value } : {}\n  }\n}\n\n/** Extractor for events whose only useful property is the fact they fired. */\nconst empty = (): Record<string, unknown> => ({})\n\n/**\n * Allowlist of events that should be forwarded to PostHog.\n *\n * Each key is an event name; its value is an extractor that pulls only the\n * safe, non-PII properties we want to track. Events not in this map are\n * silently dropped — this keeps the analytics surface explicit and auditable.\n */\ntype PayloadExtractor<K extends keyof ApiReferenceEvents = keyof ApiReferenceEvents> = (\n  payload: ApiReferenceEvents[K],\n) => Record<string, unknown> | ApiReferenceEvents[K]\n\n/** Maps every event to either a typed extractor or `undefined` (opt-out) */\ntype TrackedEventsMap = {\n  [K in keyof ApiReferenceEvents]: PayloadExtractor<K> | undefined\n}\n\nexport const TRACKED_EVENTS: TrackedEventsMap = {\n  // Auth events — track the scheme type so we know which auth methods are popular\n  'auth:update:selected-security-schemes': stringAtPath(['meta', 'type']),\n  'auth:update:active-index': stringAtPath(['meta', 'type']),\n  'auth:update:security-scheme': stringAtPath(['payload', 'type']),\n  'auth:clear:selected-security-schemes': stringAtPath(['meta', 'type']),\n  'auth:update:selected-scopes': stringAtPath(['meta', 'type']),\n  'auth:delete:security-scheme': empty,\n  'auth:clear:security-scheme-secrets': empty,\n  'auth:upsert:scopes': empty,\n  'auth:delete:scopes': empty,\n\n  // Cookie events — track whether it belongs to a document or workspace\n  'cookie:upsert:cookie': stringAtPath(['collectionType']),\n  'cookie:delete:cookie': stringAtPath(['collectionType']),\n\n  // Environment events — same document-vs-workspace distinction\n  'environment:upsert:environment': stringAtPath(['collectionType']),\n  'environment:delete:environment': stringAtPath(['collectionType']),\n  'environment:upsert:environment-variable': stringAtPath(['collectionType']),\n  'environment:delete:environment-variable': stringAtPath(['collectionType']),\n\n  // Document lifecycle\n  'document:create:empty-document': empty,\n  'document:delete:document': empty,\n  'document:update:info': empty,\n  'document:update:icon': empty,\n  'document:update:watch-mode': empty,\n\n  // Operation events — contentType helps us understand payload format usage\n  'operation:send:request:hotkey': empty,\n  'operation:cancel:request': empty,\n  'operation:create:operation': empty,\n  'operation:delete:operation': empty,\n  'operation:create:draft-example': empty,\n  'operation:delete:example': empty,\n  'operation:update:requestBody:contentType': stringAtPath(['payload', 'contentType']),\n  'operation:update:pathMethod': empty,\n  'operation:rename:example': empty,\n  'operation:reload:history': empty,\n\n  // UI events — track which surfaces users interact with\n  'ui:open:client-modal': empty,\n  'ui:open:command-palette': empty,\n  'ui:open:settings': empty,\n  'ui:download:document': stringAtPath(['format']),\n  'ui:toggle:sidebar': empty,\n  'ui:save:local-document': empty,\n  'copy-url:address-bar': empty,\n  'tabs:add:tab': empty,\n  'tabs:copy:url': empty,\n\n  // Server events\n  'server:add:server': empty,\n  'server:delete:server': empty,\n\n  // Tag events\n  'tag:create:tag': empty,\n  'tag:delete:tag': empty,\n\n  // Request lifecycle hooks — lets us measure request volume without capturing bodies\n  'hooks:on:request:sent': empty,\n  'hooks:on:request:complete': empty,\n  'hooks:on:rebase:document:complete': empty,\n\n  // Workspace preference events\n  'workspace:update:color-mode': empty,\n  'workspace:update:theme': empty,\n  'workspace:update:selected-client': empty,\n  'workspace:update:active-proxy': (payload) => ({ enabled: !!payload }),\n  'workspace:update:active-environment': empty,\n\n  // Meta events\n  'update:dark-mode': empty,\n  'update:active-document': empty,\n  'update:selected-client': empty,\n\n  // Account funnel events\n  'log:login-click': empty,\n  'log:register-click': empty,\n  'log:user-login': empty,\n  'log:user-logout': empty,\n\n  // Document sync and save events\n  'log:save-document': empty,\n  'log:sync-pull-document': empty,\n  'log:sync-push-document': empty,\n\n  // ---------------------------------------------------------------------------\n  // Do not track — explicitly opted out so new events cause a type error\n  // until they are consciously placed above with a payload\n  // ---------------------------------------------------------------------------\n  'auth:update:security-scheme-secrets': undefined,\n  'analytics:on:show-more': undefined,\n  'analytics:on:loaded': undefined,\n  'document:update:extension': undefined,\n  'operation:update:meta': undefined,\n  'operation:update:extension': undefined,\n  'operation:upsert:parameter': undefined,\n  'operation:update:extra-parameters': undefined,\n  'operation:delete:parameter': undefined,\n  'operation:delete-all:parameters': undefined,\n  'operation:update:requestBody:value': undefined,\n  'operation:update:requestBody:formValue': undefined,\n  'server:initialize:servers': undefined,\n  'server:update:server': undefined,\n  'server:update:variables': undefined,\n  'server:update:selected': undefined,\n  'server:clear:servers': undefined,\n  'asyncapi-server:update:selected': undefined,\n  'asyncapi-server:update:variables': undefined,\n  'tabs:update:tabs': undefined,\n  'tabs:close:tab': undefined,\n  'tabs:close:other-tabs': undefined,\n  'tabs:navigate:previous': undefined,\n  'tabs:navigate:next': undefined,\n  'tabs:focus:tab': undefined,\n  'tabs:focus:tab-last': undefined,\n  'ui:focus:address-bar': undefined,\n  'ui:focus:send-button': undefined,\n  'ui:focus:search': undefined,\n  'ui:open:create-workspace': undefined,\n  'ui:close:client-modal': undefined,\n  'ui:navigate': undefined,\n  'toggle:nav-item': undefined,\n  'select:nav-item': undefined,\n  'intersecting:nav-item': undefined,\n  'scroll-to:nav-item': undefined,\n  'scroll-to:model-by-name': undefined,\n  'copy-url:nav-item': undefined,\n  'tag:edit:tag': undefined,\n  'workspace:update:name': undefined,\n}\n\n/**\n * Returns sanitized properties for a tracked event, or `null` if the event\n * should not be captured at all.\n *\n * This is the only function that the PostHog plugin needs to call — it\n * encapsulates both the \"should we track this?\" decision and the \"what\n * properties are safe to send?\" extraction in one step.\n */\nexport const sanitizeEventPayload = <K extends keyof ApiReferenceEvents>(\n  event: K,\n  payload: ApiReferenceEvents[K],\n): Record<string, unknown> | ApiReferenceEvents[K] | null => {\n  const extractor = TRACKED_EVENTS[event]\n  if (!extractor) {\n    return null\n  }\n  return extractor(payload)\n}\n"],"mappings":"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"}

package/dist/style.css

@@ -102,12 +102,9 @@
     --scalar-radius: 3px;
     --scalar-radius-lg: 6px;
     --scalar-radius-xl: 8px;
-    --scalar-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
-    "Helvetica Neue", sans-serif;
-    --scalar-font-code: "JetBrains Mono", ui-monospace, Menlo, Monaco,
-    "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono",
-    "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
-    "Courier New", monospace;
+    --scalar-font: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+    --scalar-font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --scalar-heading-1: 24px;
     --scalar-page-description: 16px;
     --scalar-heading-2: 20px;
@@ -2012,10 +2009,6 @@
   top: 1lh;
 }
 
-.scalar-app .top-\[calc\(10px\+0\.5lh\)\] {
-  top: calc(10px + .5lh);
-}
-
 .scalar-app .top-\[calc\(100\%\+4px\)\] {
   top: calc(100% + 4px);
 }
@@ -6550,34 +6543,34 @@ to {
 }
 }
 
-.request-card[data-v-49c97039] {
+.request-card[data-v-70ede25b] {
   color: var(--scalar-color-1);
   font-size: var(--scalar-font-size-3);
 }
-.request-method[data-v-49c97039] {
+.request-method[data-v-70ede25b] {
   font-family: var(--scalar-font-code);
   text-transform: uppercase;
   margin-right: 6px;
 }
-.request-card-footer[data-v-49c97039] {
+.request-card-footer[data-v-70ede25b] {
   display: flex;
   justify-content: flex-end;
   padding: 6px;
   flex-shrink: 0;
   position: relative;
 }
-.request-card-footer-addon[data-v-49c97039] {
+.request-card-footer-addon[data-v-70ede25b] {
   display: flex;
   align-items: center;
 
   flex: 1;
   min-width: 0;
 }
-.request-editor-section[data-v-49c97039] {
+.request-editor-section[data-v-70ede25b] {
   display: flex;
   flex: 1;
 }
-.request-card-simple[data-v-49c97039] {
+.request-card-simple[data-v-70ede25b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -6586,7 +6579,7 @@ to {
 
   font-size: var(--scalar-small);
 }
-.code-snippet[data-v-49c97039] {
+.code-snippet[data-v-70ede25b] {
   display: flex;
   flex-direction: column;
   width: 100%;

package/dist/v2/blocks/operation-block/helpers/send-request.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"send-request.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-block/helpers/send-request.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,aAAa,EAAkB,MAAM,wCAAwC,CAAA;AAGnG,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAInE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAA;AAa7E,0DAA0D;AAC1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG;IACzD,iEAAiE;IACjE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,wCAAwC;IACxC,gBAAgB,EAAE,MAAM,EAAE,CAAA;IAC1B,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAA;IAChB,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,UAAU,EAAE,MAAM,CAAA;IAClB,0BAA0B;IAC1B,MAAM,EAAE,UAAU,CAAA;IAClB,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,CACE;IACE,wBAAwB;IACxB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAA;CACb,GACD;IACE,qDAAqD;IACrD,MAAM,EAAE,2BAA2B,CAAC,UAAU,CAAC,CAAA;CAChD,CACJ,CAAA;AAKH,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAA;AAEtC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,GAAU,yDAK/B;IACD,YAAY,EAAE,OAAO,CAAA;IACrB,cAAc,EAAE,cAAc,CAAA;IAC9B,iEAAiE;IACjE,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,uEAAuE;IACvE,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,KAAG,OAAO,CACT,aAAa,CAAC;IACZ,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,cAAc,EAAE,cAAc,CAAA;IAC9B,SAAS,EAAE,MAAM,CAAA;IACjB,gBAAgB,EAAE,QAAQ,CAAA;CAC3B,CAAC,CA0DH,CAAA"}
+{"version":3,"file":"send-request.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/operation-block/helpers/send-request.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,aAAa,EAAkB,MAAM,wCAAwC,CAAA;AAGnG,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAKnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAA;AAY7E,0DAA0D;AAC1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG;IACzD,iEAAiE;IACjE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,wCAAwC;IACxC,gBAAgB,EAAE,MAAM,EAAE,CAAA;IAC1B,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAA;IAChB,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,UAAU,EAAE,MAAM,CAAA;IAClB,0BAA0B;IAC1B,MAAM,EAAE,UAAU,CAAA;IAClB,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,CACE;IACE,wBAAwB;IACxB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAA;CACb,GACD;IACE,qDAAqD;IACrD,MAAM,EAAE,2BAA2B,CAAC,UAAU,CAAC,CAAA;CAChD,CACJ,CAAA;AAKH,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAA;AAEtC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,GAAU,yDAK/B;IACD,YAAY,EAAE,OAAO,CAAA;IACrB,cAAc,EAAE,cAAc,CAAA;IAC9B,iEAAiE;IACjE,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,uEAAuE;IACvE,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,KAAG,OAAO,CACT,aAAa,CAAC;IACZ,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,cAAc,EAAE,cAAc,CAAA;IAC9B,SAAS,EAAE,MAAM,CAAA;IACjB,gBAAgB,EAAE,QAAQ,CAAA;CAC3B,CAAC,CA0DH,CAAA"}

package/dist/v2/blocks/operation-block/helpers/send-request.js

@@ -8,7 +8,7 @@ import { buildSafeBodyRequest } from "@scalar/helpers/http/can-method-have-body"
 import { httpStatusCodes } from "@scalar/helpers/http/http-status-codes";
 import { normalizeHeaders } from "@scalar/helpers/http/normalize-headers";
 import { X_SCALAR_SET_COOKIE } from "@scalar/helpers/http/scalar-headers";
-import * as cookie from "cookie";
+import { serializeCookie } from "@scalar/helpers/http/serialize-cookie";
 import { parseSetCookie } from "set-cookie-parser";
 //#region src/v2/blocks/operation-block/helpers/send-request.ts
 /** HTTP status codes that should not include a response body */
@@ -79,17 +79,14 @@ var sendRequest = async ({ isUsingProxy, requestPayload, plugins = [], customFet
 /**
 * Extracts and serializes custom cookies from the response using the custom cookie header.
 *
-* This function parses the custom cookie header (if present), serializes each cookie using the
-* 'cookie' library, and then deletes the custom cookie header from the response.
+* This function parses the custom cookie header (if present), serializes each cookie using our
+* in-repo `serializeCookie` helper, and then deletes the custom cookie header from the response.
 * Returns an array of serialized cookie strings, or null if no cookies were found.
-*
-* The @ts-expect-error is present due to a type mismatch between the 'cookie' parsing and serialization libraries.
 */
 var getCustomCookie = (response) => {
-	const result = parseSetCookie(response.headers.get(X_SCALAR_SET_COOKIE) ?? "").map((c) => cookie.serialize(c.name, c.value, {
+	const result = parseSetCookie(response.headers.get(X_SCALAR_SET_COOKIE) ?? "").map((c) => serializeCookie(c.name, c.value, {
 		...c,
-		sameSite: c.sameSite,
-		encode: (str) => str
+		sameSite: c.sameSite
 	}));
 	if (result.length) return result;
 	return null;

package/dist/v2/blocks/operation-block/helpers/send-request.js.map

@@ -1 +1 @@
-{"version":3,"file":"send-request.js","names":[],"sources":["../../../../../src/v2/blocks/operation-block/helpers/send-request.ts"],"sourcesContent":["import { ERRORS, type ErrorResponse, normalizeError } from '@scalar/helpers/errors/normalize-error'\nimport { isElectron } from '@scalar/helpers/general/is-electron'\nimport { buildSafeBodyRequest } from '@scalar/helpers/http/can-method-have-body'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { httpStatusCodes } from '@scalar/helpers/http/http-status-codes'\nimport { normalizeHeaders } from '@scalar/helpers/http/normalize-headers'\nimport { X_SCALAR_SET_COOKIE } from '@scalar/helpers/http/scalar-headers'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { RequestPayload } from '@scalar/workspace-store/request-example'\nimport * as cookie from 'cookie'\nimport { parseSetCookie } from 'set-cookie-parser'\n\nimport { getCookieHeaderKeys } from '@/v2/blocks/operation-block/helpers/get-cookie-header-keys'\nimport { resolveResponseBodyHandler } from '@/v2/blocks/response-block/helpers/resolve-response-body-handler'\nimport {\n  resolveResponseContentType,\n  resolveResponseMimeType,\n} from '@/v2/blocks/response-block/helpers/resolve-response-content-type'\n\nimport { decodeBuffer } from './decode-buffer'\n\n/** A single set of populated values for a sent request */\nexport type ResponseInstance = Omit<Response, 'headers'> & {\n  /** Store headers as an object to match what we had with axios */\n  headers: Record<string, string>\n  /** Keys of headers which set cookies */\n  cookieHeaderKeys: string[]\n  /** Time in ms the request took */\n  duration: number\n  /** The response status */\n  status: number\n  /** The response status text */\n  statusText: string\n  /** The response method */\n  method: HttpMethod\n  /** The request path */\n  path: string\n} & (\n    | {\n        /** The response data */\n        data: string | Blob\n        /** The response size in bytes */\n        size: number\n      }\n    | {\n        /** A stream reader for a streamable response body */\n        reader: ReadableStreamDefaultReader<Uint8Array>\n      }\n  )\n\n/** HTTP status codes that should not include a response body */\nconst NO_BODY_STATUS_CODES = [204, 205, 304]\n\n/** Custom fetch function signature compatible with the global fetch API */\nexport type CustomFetch = typeof fetch\n\n/**\n * Execute the built fetch request and return a structured response.\n *\n * This function handles the complete request lifecycle including plugin hooks,\n * response processing, streaming detection, and error handling. It supports both\n * standard responses and server-sent event streams.\n *\n * @param request - The request built by the buildRequest helper\n * @param operation - The OpenAPI operation being executed\n * @param plugins - Array of client plugins to execute hooks\n * @param isUsingProxy - Whether the request is being proxied for header handling\n * @returns A tuple with either an error or the response data\n */\nexport const sendRequest = async ({\n  isUsingProxy,\n  requestPayload,\n  plugins = [],\n  customFetch = fetch,\n}: {\n  isUsingProxy: boolean\n  requestPayload: RequestPayload\n  /** Registered client plugins for custom content type handling */\n  plugins?: ClientPlugin[]\n  /** Optional custom fetch implementation, overrides the global fetch */\n  customFetch?: CustomFetch\n}): Promise<\n  ErrorResponse<{\n    response: ResponseInstance\n    requestPayload: RequestPayload\n    timestamp: number\n    originalResponse: Response\n  }>\n> => {\n  try {\n    // Execute the request and measure duration\n    const startTime = performance.now()\n\n    // In electron we allow GET requests to have a body\n    const response = isElectron()\n      ? await customFetch(...requestPayload)\n      : await customFetch(buildSafeBodyRequest(...requestPayload))\n\n    const endTime = performance.now()\n    const timestamp = Date.now()\n    const duration = endTime - startTime\n\n    // Extract response metadata early for reuse\n    const contentType = response.headers.get('content-type')\n    const responseHeaders = normalizeHeaders(response.headers, isUsingProxy)\n    const responseUrl = new URL(response.url)\n    const fullPath = responseUrl.pathname + responseUrl.search\n    const statusText = response.statusText || httpStatusCodes[response.status]?.name || ''\n    const method = (requestPayload[1].method ?? 'GET') as HttpMethod\n    const shouldSkipBody = NO_BODY_STATUS_CODES.includes(response.status)\n\n    /**\n     * Handle server-sent event streams separately.\n     * These responses need a reader instead of buffered data.\n     * We check this early to avoid unnecessary body reading.\n     */\n    if (contentType?.startsWith('text/event-stream') && response.body) {\n      return buildStreamingResponse({\n        response,\n        requestPayload,\n        timestamp,\n        duration,\n        responseHeaders,\n        statusText,\n        method,\n        fullPath,\n      })\n    }\n\n    return buildStandardResponse({\n      response,\n      requestPayload,\n      timestamp,\n      duration,\n      responseHeaders,\n      statusText,\n      method,\n      fullPath,\n      contentType,\n      shouldSkipBody,\n      plugins,\n    })\n  } catch (error) {\n    return [normalizeError(error, ERRORS.REQUEST_FAILED), null]\n  }\n}\n\n/**\n * Extracts and serializes custom cookies from the response using the custom cookie header.\n *\n * This function parses the custom cookie header (if present), serializes each cookie using the\n * 'cookie' library, and then deletes the custom cookie header from the response.\n * Returns an array of serialized cookie strings, or null if no cookies were found.\n *\n * The @ts-expect-error is present due to a type mismatch between the 'cookie' parsing and serialization libraries.\n */\nconst getCustomCookie = (response: Response): string[] | null => {\n  const result = parseSetCookie(response.headers.get(X_SCALAR_SET_COOKIE) ?? '').map((c) =>\n    cookie.serialize(c.name, c.value, {\n      ...c,\n      sameSite: c.sameSite as boolean | 'lax' | 'strict' | 'none' | undefined,\n      encode: (str: string) => str,\n    }),\n  )\n\n  if (result.length) {\n    return result\n  }\n\n  return null\n}\n\n/**\n * Build a streaming response for server-sent events.\n * Streaming responses use a reader instead of buffering the entire body.\n */\nconst buildStreamingResponse = ({\n  response,\n  requestPayload,\n  timestamp,\n  duration,\n  responseHeaders,\n  statusText,\n  method,\n  fullPath,\n}: {\n  response: Response\n  requestPayload: RequestPayload\n  timestamp: number\n  duration: number\n  responseHeaders: Record<string, string>\n  statusText: string\n  method: HttpMethod\n  fullPath: string\n}): ErrorResponse<{\n  response: ResponseInstance\n  requestPayload: RequestPayload\n  timestamp: number\n  originalResponse: Response\n}> => {\n  const normalizedResponse = new Response(null, {\n    status: response.status,\n    statusText,\n    headers: response.headers,\n  })\n\n  const customCookie = getCustomCookie(normalizedResponse)\n  const cookieHeaderKeys = customCookie ?? getCookieHeaderKeys(normalizedResponse.headers)\n\n  return [\n    null,\n    {\n      timestamp,\n      requestPayload,\n      response: {\n        ...normalizedResponse,\n        headers: responseHeaders,\n        cookieHeaderKeys,\n        reader: response.body!.getReader(),\n        duration,\n        method,\n        path: fullPath,\n      },\n      originalResponse: normalizedResponse.clone(),\n    },\n  ]\n}\n\n/**\n * Build a standard response with buffered body data.\n * This handles all non-streaming responses including JSON, text, and binary data.\n */\nconst buildStandardResponse = async ({\n  response,\n  requestPayload,\n  timestamp,\n  duration,\n  responseHeaders,\n  statusText,\n  method,\n  fullPath,\n  contentType,\n  shouldSkipBody,\n  plugins,\n}: {\n  response: Response\n  requestPayload: RequestPayload\n  timestamp: number\n  duration: number\n  responseHeaders: Record<string, string>\n  statusText: string\n  method: HttpMethod\n  fullPath: string\n  contentType: string | null\n  shouldSkipBody: boolean\n  plugins: ClientPlugin[]\n}): Promise<\n  ErrorResponse<{\n    response: ResponseInstance\n    requestPayload: RequestPayload\n    timestamp: number\n    originalResponse: Response\n  }>\n> => {\n  /**\n   * Clone the response to preserve the original for body reading.\n   * Read the body once and reuse the buffer for both decoding and creating a new Response.\n   */\n  const clonedResponse = response.clone()\n  const arrayBuffer = await clonedResponse.arrayBuffer()\n  const responseType = resolveResponseContentType(contentType)\n  const mimeEssence = resolveResponseMimeType(contentType).essence\n  const pluginHandler = resolveResponseBodyHandler(mimeEssence, plugins)\n  const responseData = await decodeBuffer(arrayBuffer, responseType, pluginHandler)\n\n  /**\n   * Create a new Response using the arrayBuffer we already read.\n   * ArrayBuffers can be reused to create new Response objects without additional memory.\n   */\n  const normalizedResponse = new Response(shouldSkipBody ? null : arrayBuffer, {\n    status: response.status,\n    statusText,\n    headers: response.headers,\n  })\n\n  const customCookie = getCustomCookie(normalizedResponse)\n  const cookieHeaderKeys = customCookie ?? getCookieHeaderKeys(normalizedResponse.headers)\n\n  return [\n    null,\n    {\n      timestamp,\n      requestPayload,\n      response: {\n        ...normalizedResponse,\n        headers: responseHeaders,\n        cookieHeaderKeys,\n        data: responseData,\n        size: arrayBuffer.byteLength,\n        duration,\n        method,\n        status: response.status,\n        path: fullPath,\n      },\n      originalResponse: response.clone(),\n    },\n  ]\n}\n"],"mappings":";;;;;;;;;;;;;;AAmDA,IAAM,uBAAuB;CAAC;CAAK;CAAK;CAAI;;;;;;;;;;;;;;AAkB5C,IAAa,cAAc,OAAO,EAChC,cACA,gBACA,UAAU,EAAE,EACZ,cAAc,YAeX;AACH,KAAI;EAEF,MAAM,YAAY,YAAY,KAAK;EAGnC,MAAM,WAAW,YAAY,GACzB,MAAM,YAAY,GAAG,eAAe,GACpC,MAAM,YAAY,qBAAqB,GAAG,eAAe,CAAC;EAE9D,MAAM,UAAU,YAAY,KAAK;EACjC,MAAM,YAAY,KAAK,KAAK;EAC5B,MAAM,WAAW,UAAU;EAG3B,MAAM,cAAc,SAAS,QAAQ,IAAI,eAAe;EACxD,MAAM,kBAAkB,iBAAiB,SAAS,SAAS,aAAa;EACxE,MAAM,cAAc,IAAI,IAAI,SAAS,IAAI;EACzC,MAAM,WAAW,YAAY,WAAW,YAAY;EACpD,MAAM,aAAa,SAAS,cAAc,gBAAgB,SAAS,SAAS,QAAQ;EACpF,MAAM,SAAU,eAAe,GAAG,UAAU;EAC5C,MAAM,iBAAiB,qBAAqB,SAAS,SAAS,OAAO;;;;;;AAOrE,MAAI,aAAa,WAAW,oBAAoB,IAAI,SAAS,KAC3D,QAAO,uBAAuB;GAC5B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;AAGJ,SAAO,sBAAsB;GAC3B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;UACK,OAAO;AACd,SAAO,CAAC,eAAe,OAAO,OAAO,eAAe,EAAE,KAAK;;;;;;;;;;;;AAa/D,IAAM,mBAAmB,aAAwC;CAC/D,MAAM,SAAS,eAAe,SAAS,QAAQ,IAAI,oBAAoB,IAAI,GAAG,CAAC,KAAK,MAClF,OAAO,UAAU,EAAE,MAAM,EAAE,OAAO;EAChC,GAAG;EACH,UAAU,EAAE;EACZ,SAAS,QAAgB;EAC1B,CAAC,CACH;AAED,KAAI,OAAO,OACT,QAAO;AAGT,QAAO;;;;;;AAOT,IAAM,0BAA0B,EAC9B,UACA,gBACA,WACA,UACA,iBACA,YACA,QACA,eAeI;CACJ,MAAM,qBAAqB,IAAI,SAAS,MAAM;EAC5C,QAAQ,SAAS;EACjB;EACA,SAAS,SAAS;EACnB,CAAC;CAGF,MAAM,mBADe,gBAAgB,mBAAmB,IACf,oBAAoB,mBAAmB,QAAQ;AAExF,QAAO,CACL,MACA;EACE;EACA;EACA,UAAU;GACR,GAAG;GACH,SAAS;GACT;GACA,QAAQ,SAAS,KAAM,WAAW;GAClC;GACA;GACA,MAAM;GACP;EACD,kBAAkB,mBAAmB,OAAO;EAC7C,CACF;;;;;;AAOH,IAAM,wBAAwB,OAAO,EACnC,UACA,gBACA,WACA,UACA,iBACA,YACA,QACA,UACA,aACA,gBACA,cAoBG;CAMH,MAAM,cAAc,MADG,SAAS,OAAO,CACE,aAAa;CACtD,MAAM,eAAe,2BAA2B,YAAY;CAC5D,MAAM,cAAc,wBAAwB,YAAY,CAAC;CAEzD,MAAM,eAAe,MAAM,aAAa,aAAa,cAD/B,2BAA2B,aAAa,QAAQ,CACW;;;;;CAMjF,MAAM,qBAAqB,IAAI,SAAS,iBAAiB,OAAO,aAAa;EAC3E,QAAQ,SAAS;EACjB;EACA,SAAS,SAAS;EACnB,CAAC;CAGF,MAAM,mBADe,gBAAgB,mBAAmB,IACf,oBAAoB,mBAAmB,QAAQ;AAExF,QAAO,CACL,MACA;EACE;EACA;EACA,UAAU;GACR,GAAG;GACH,SAAS;GACT;GACA,MAAM;GACN,MAAM,YAAY;GAClB;GACA;GACA,QAAQ,SAAS;GACjB,MAAM;GACP;EACD,kBAAkB,SAAS,OAAO;EACnC,CACF"}
+{"version":3,"file":"send-request.js","names":[],"sources":["../../../../../src/v2/blocks/operation-block/helpers/send-request.ts"],"sourcesContent":["import { ERRORS, type ErrorResponse, normalizeError } from '@scalar/helpers/errors/normalize-error'\nimport { isElectron } from '@scalar/helpers/general/is-electron'\nimport { buildSafeBodyRequest } from '@scalar/helpers/http/can-method-have-body'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { httpStatusCodes } from '@scalar/helpers/http/http-status-codes'\nimport { normalizeHeaders } from '@scalar/helpers/http/normalize-headers'\nimport { X_SCALAR_SET_COOKIE } from '@scalar/helpers/http/scalar-headers'\nimport { serializeCookie } from '@scalar/helpers/http/serialize-cookie'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { RequestPayload } from '@scalar/workspace-store/request-example'\nimport { parseSetCookie } from 'set-cookie-parser'\n\nimport { getCookieHeaderKeys } from '@/v2/blocks/operation-block/helpers/get-cookie-header-keys'\nimport { resolveResponseBodyHandler } from '@/v2/blocks/response-block/helpers/resolve-response-body-handler'\nimport {\n  resolveResponseContentType,\n  resolveResponseMimeType,\n} from '@/v2/blocks/response-block/helpers/resolve-response-content-type'\n\nimport { decodeBuffer } from './decode-buffer'\n\n/** A single set of populated values for a sent request */\nexport type ResponseInstance = Omit<Response, 'headers'> & {\n  /** Store headers as an object to match what we had with axios */\n  headers: Record<string, string>\n  /** Keys of headers which set cookies */\n  cookieHeaderKeys: string[]\n  /** Time in ms the request took */\n  duration: number\n  /** The response status */\n  status: number\n  /** The response status text */\n  statusText: string\n  /** The response method */\n  method: HttpMethod\n  /** The request path */\n  path: string\n} & (\n    | {\n        /** The response data */\n        data: string | Blob\n        /** The response size in bytes */\n        size: number\n      }\n    | {\n        /** A stream reader for a streamable response body */\n        reader: ReadableStreamDefaultReader<Uint8Array>\n      }\n  )\n\n/** HTTP status codes that should not include a response body */\nconst NO_BODY_STATUS_CODES = [204, 205, 304]\n\n/** Custom fetch function signature compatible with the global fetch API */\nexport type CustomFetch = typeof fetch\n\n/**\n * Execute the built fetch request and return a structured response.\n *\n * This function handles the complete request lifecycle including plugin hooks,\n * response processing, streaming detection, and error handling. It supports both\n * standard responses and server-sent event streams.\n *\n * @param request - The request built by the buildRequest helper\n * @param operation - The OpenAPI operation being executed\n * @param plugins - Array of client plugins to execute hooks\n * @param isUsingProxy - Whether the request is being proxied for header handling\n * @returns A tuple with either an error or the response data\n */\nexport const sendRequest = async ({\n  isUsingProxy,\n  requestPayload,\n  plugins = [],\n  customFetch = fetch,\n}: {\n  isUsingProxy: boolean\n  requestPayload: RequestPayload\n  /** Registered client plugins for custom content type handling */\n  plugins?: ClientPlugin[]\n  /** Optional custom fetch implementation, overrides the global fetch */\n  customFetch?: CustomFetch\n}): Promise<\n  ErrorResponse<{\n    response: ResponseInstance\n    requestPayload: RequestPayload\n    timestamp: number\n    originalResponse: Response\n  }>\n> => {\n  try {\n    // Execute the request and measure duration\n    const startTime = performance.now()\n\n    // In electron we allow GET requests to have a body\n    const response = isElectron()\n      ? await customFetch(...requestPayload)\n      : await customFetch(buildSafeBodyRequest(...requestPayload))\n\n    const endTime = performance.now()\n    const timestamp = Date.now()\n    const duration = endTime - startTime\n\n    // Extract response metadata early for reuse\n    const contentType = response.headers.get('content-type')\n    const responseHeaders = normalizeHeaders(response.headers, isUsingProxy)\n    const responseUrl = new URL(response.url)\n    const fullPath = responseUrl.pathname + responseUrl.search\n    const statusText = response.statusText || httpStatusCodes[response.status]?.name || ''\n    const method = (requestPayload[1].method ?? 'GET') as HttpMethod\n    const shouldSkipBody = NO_BODY_STATUS_CODES.includes(response.status)\n\n    /**\n     * Handle server-sent event streams separately.\n     * These responses need a reader instead of buffered data.\n     * We check this early to avoid unnecessary body reading.\n     */\n    if (contentType?.startsWith('text/event-stream') && response.body) {\n      return buildStreamingResponse({\n        response,\n        requestPayload,\n        timestamp,\n        duration,\n        responseHeaders,\n        statusText,\n        method,\n        fullPath,\n      })\n    }\n\n    return buildStandardResponse({\n      response,\n      requestPayload,\n      timestamp,\n      duration,\n      responseHeaders,\n      statusText,\n      method,\n      fullPath,\n      contentType,\n      shouldSkipBody,\n      plugins,\n    })\n  } catch (error) {\n    return [normalizeError(error, ERRORS.REQUEST_FAILED), null]\n  }\n}\n\n/**\n * Extracts and serializes custom cookies from the response using the custom cookie header.\n *\n * This function parses the custom cookie header (if present), serializes each cookie using our\n * in-repo `serializeCookie` helper, and then deletes the custom cookie header from the response.\n * Returns an array of serialized cookie strings, or null if no cookies were found.\n */\nconst getCustomCookie = (response: Response): string[] | null => {\n  const result = parseSetCookie(response.headers.get(X_SCALAR_SET_COOKIE) ?? '').map((c) =>\n    serializeCookie(c.name, c.value, {\n      ...c,\n      sameSite: c.sameSite as boolean | 'lax' | 'strict' | 'none' | undefined,\n    }),\n  )\n\n  if (result.length) {\n    return result\n  }\n\n  return null\n}\n\n/**\n * Build a streaming response for server-sent events.\n * Streaming responses use a reader instead of buffering the entire body.\n */\nconst buildStreamingResponse = ({\n  response,\n  requestPayload,\n  timestamp,\n  duration,\n  responseHeaders,\n  statusText,\n  method,\n  fullPath,\n}: {\n  response: Response\n  requestPayload: RequestPayload\n  timestamp: number\n  duration: number\n  responseHeaders: Record<string, string>\n  statusText: string\n  method: HttpMethod\n  fullPath: string\n}): ErrorResponse<{\n  response: ResponseInstance\n  requestPayload: RequestPayload\n  timestamp: number\n  originalResponse: Response\n}> => {\n  const normalizedResponse = new Response(null, {\n    status: response.status,\n    statusText,\n    headers: response.headers,\n  })\n\n  const customCookie = getCustomCookie(normalizedResponse)\n  const cookieHeaderKeys = customCookie ?? getCookieHeaderKeys(normalizedResponse.headers)\n\n  return [\n    null,\n    {\n      timestamp,\n      requestPayload,\n      response: {\n        ...normalizedResponse,\n        headers: responseHeaders,\n        cookieHeaderKeys,\n        reader: response.body!.getReader(),\n        duration,\n        method,\n        path: fullPath,\n      },\n      originalResponse: normalizedResponse.clone(),\n    },\n  ]\n}\n\n/**\n * Build a standard response with buffered body data.\n * This handles all non-streaming responses including JSON, text, and binary data.\n */\nconst buildStandardResponse = async ({\n  response,\n  requestPayload,\n  timestamp,\n  duration,\n  responseHeaders,\n  statusText,\n  method,\n  fullPath,\n  contentType,\n  shouldSkipBody,\n  plugins,\n}: {\n  response: Response\n  requestPayload: RequestPayload\n  timestamp: number\n  duration: number\n  responseHeaders: Record<string, string>\n  statusText: string\n  method: HttpMethod\n  fullPath: string\n  contentType: string | null\n  shouldSkipBody: boolean\n  plugins: ClientPlugin[]\n}): Promise<\n  ErrorResponse<{\n    response: ResponseInstance\n    requestPayload: RequestPayload\n    timestamp: number\n    originalResponse: Response\n  }>\n> => {\n  /**\n   * Clone the response to preserve the original for body reading.\n   * Read the body once and reuse the buffer for both decoding and creating a new Response.\n   */\n  const clonedResponse = response.clone()\n  const arrayBuffer = await clonedResponse.arrayBuffer()\n  const responseType = resolveResponseContentType(contentType)\n  const mimeEssence = resolveResponseMimeType(contentType).essence\n  const pluginHandler = resolveResponseBodyHandler(mimeEssence, plugins)\n  const responseData = await decodeBuffer(arrayBuffer, responseType, pluginHandler)\n\n  /**\n   * Create a new Response using the arrayBuffer we already read.\n   * ArrayBuffers can be reused to create new Response objects without additional memory.\n   */\n  const normalizedResponse = new Response(shouldSkipBody ? null : arrayBuffer, {\n    status: response.status,\n    statusText,\n    headers: response.headers,\n  })\n\n  const customCookie = getCustomCookie(normalizedResponse)\n  const cookieHeaderKeys = customCookie ?? getCookieHeaderKeys(normalizedResponse.headers)\n\n  return [\n    null,\n    {\n      timestamp,\n      requestPayload,\n      response: {\n        ...normalizedResponse,\n        headers: responseHeaders,\n        cookieHeaderKeys,\n        data: responseData,\n        size: arrayBuffer.byteLength,\n        duration,\n        method,\n        status: response.status,\n        path: fullPath,\n      },\n      originalResponse: response.clone(),\n    },\n  ]\n}\n"],"mappings":";;;;;;;;;;;;;;AAmDA,IAAM,uBAAuB;CAAC;CAAK;CAAK;CAAI;;;;;;;;;;;;;;AAkB5C,IAAa,cAAc,OAAO,EAChC,cACA,gBACA,UAAU,EAAE,EACZ,cAAc,YAeX;AACH,KAAI;EAEF,MAAM,YAAY,YAAY,KAAK;EAGnC,MAAM,WAAW,YAAY,GACzB,MAAM,YAAY,GAAG,eAAe,GACpC,MAAM,YAAY,qBAAqB,GAAG,eAAe,CAAC;EAE9D,MAAM,UAAU,YAAY,KAAK;EACjC,MAAM,YAAY,KAAK,KAAK;EAC5B,MAAM,WAAW,UAAU;EAG3B,MAAM,cAAc,SAAS,QAAQ,IAAI,eAAe;EACxD,MAAM,kBAAkB,iBAAiB,SAAS,SAAS,aAAa;EACxE,MAAM,cAAc,IAAI,IAAI,SAAS,IAAI;EACzC,MAAM,WAAW,YAAY,WAAW,YAAY;EACpD,MAAM,aAAa,SAAS,cAAc,gBAAgB,SAAS,SAAS,QAAQ;EACpF,MAAM,SAAU,eAAe,GAAG,UAAU;EAC5C,MAAM,iBAAiB,qBAAqB,SAAS,SAAS,OAAO;;;;;;AAOrE,MAAI,aAAa,WAAW,oBAAoB,IAAI,SAAS,KAC3D,QAAO,uBAAuB;GAC5B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;AAGJ,SAAO,sBAAsB;GAC3B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;UACK,OAAO;AACd,SAAO,CAAC,eAAe,OAAO,OAAO,eAAe,EAAE,KAAK;;;;;;;;;;AAW/D,IAAM,mBAAmB,aAAwC;CAC/D,MAAM,SAAS,eAAe,SAAS,QAAQ,IAAI,oBAAoB,IAAI,GAAG,CAAC,KAAK,MAClF,gBAAgB,EAAE,MAAM,EAAE,OAAO;EAC/B,GAAG;EACH,UAAU,EAAE;EACb,CAAC,CACH;AAED,KAAI,OAAO,OACT,QAAO;AAGT,QAAO;;;;;;AAOT,IAAM,0BAA0B,EAC9B,UACA,gBACA,WACA,UACA,iBACA,YACA,QACA,eAeI;CACJ,MAAM,qBAAqB,IAAI,SAAS,MAAM;EAC5C,QAAQ,SAAS;EACjB;EACA,SAAS,SAAS;EACnB,CAAC;CAGF,MAAM,mBADe,gBAAgB,mBAAmB,IACf,oBAAoB,mBAAmB,QAAQ;AAExF,QAAO,CACL,MACA;EACE;EACA;EACA,UAAU;GACR,GAAG;GACH,SAAS;GACT;GACA,QAAQ,SAAS,KAAM,WAAW;GAClC;GACA;GACA,MAAM;GACP;EACD,kBAAkB,mBAAmB,OAAO;EAC7C,CACF;;;;;;AAOH,IAAM,wBAAwB,OAAO,EACnC,UACA,gBACA,WACA,UACA,iBACA,YACA,QACA,UACA,aACA,gBACA,cAoBG;CAMH,MAAM,cAAc,MADG,SAAS,OAAO,CACE,aAAa;CACtD,MAAM,eAAe,2BAA2B,YAAY;CAC5D,MAAM,cAAc,wBAAwB,YAAY,CAAC;CAEzD,MAAM,eAAe,MAAM,aAAa,aAAa,cAD/B,2BAA2B,aAAa,QAAQ,CACW;;;;;CAMjF,MAAM,qBAAqB,IAAI,SAAS,iBAAiB,OAAO,aAAa;EAC3E,QAAQ,SAAS;EACjB;EACA,SAAS,SAAS;EACnB,CAAC;CAGF,MAAM,mBADe,gBAAgB,mBAAmB,IACf,oBAAoB,mBAAmB,QAAQ;AAExF,QAAO,CACL,MACA;EACE;EACA;EACA,UAAU;GACR,GAAG;GACH,SAAS;GACT;GACA,MAAM;GACN,MAAM,YAAY;GAClB;GACA;GACA,QAAQ,SAAS;GACjB,MAAM;GACP;EACD,kBAAkB,SAAS,OAAO;EACnC,CACF"}

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

@@ -1,5 +1,4 @@
 import type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods';
-import { type AvailableClients } from '@scalar/snippetz';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
 import type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example';
 import type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies';
@@ -16,11 +15,15 @@ export type OperationCodeSampleProps = {
      */
     clientOptions: ClientOptionGroup[];
     /**
-     * Pre-selected client, this will determine which client is initially selected in the dropdown
+     * Pre-selected client, this will determine which client is initially selected in the dropdown.
+     * Either a built-in client id (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).
      *
-     * @defaults to shell/curl or a custom sample if one is available
+     * Typed as a plain string: unioning the (large) client-id union with the `custom/...`
+     * ids overflows TypeScript's union-complexity limit inside this component's `defineProps`.
+     *
+     * @defaults to a custom sample if one is available, otherwise shell/curl
      */
-    selectedClient?: AvailableClients[number];
+    selectedClient?: string;
     /**
      * Which server from the spec to use for the code 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":"AAkfA,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,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAiBrE,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,yCAAyC,CAAA;AAMhD,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;IA4LlB,8DAA8D;sBAC1C,MAAM;;;;IAD1B,8DAA8D;sBAC1C,MAAM;;;;YAxKhB,MAAM,OAAO;YACb,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO;EA4hB3D,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":"AA2gBA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAErF,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAiBrE,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,yCAAyC,CAAA;AAMhD,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;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;IAyMlB,8DAA8D;sBAC1C,MAAM;;;;IAD1B,8DAA8D;sBAC1C,MAAM;;;;YArLhB,MAAM,OAAO;YACb,CAAC,EAAE,WAAW,EAAE,EAAE;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO;EA6jB3D,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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 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-49c97039"]]);
+var OperationCodeSample_default = /* @__PURE__ */ _plugin_vue_export_helper_default(OperationCodeSample_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-70ede25b"]]);
 //#endregion
 export { OperationCodeSample_default as default };
 

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

@@ -1 +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 { 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":""}
+{"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   * 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":""}

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

@@ -3,8 +3,8 @@ import HttpMethod_default from "./HttpMethod.vue.js";
 import { operationToHar } from "../helpers/operation-to-har/operation-to-har.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 { getClients } from "../helpers/get-clients.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";
@@ -18,12 +18,17 @@ import { ScalarVirtualText } from "@scalar/components/virtual-text";
 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 = {
+var _hoisted_2 = {
+	key: 1,
+	class: "text-c-2 flex h-full w-fit items-center px-0.5 py-0 text-base font-normal",
+	"data-testid": "client-picker"
+};
+var _hoisted_3 = ["id"];
+var _hoisted_4 = {
 	key: 0,
 	class: "request-card-footer-addon"
 };
-var _hoisted_4 = { class: "request-header" };
+var _hoisted_5 = { class: "request-header" };
 var OperationCodeSample_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "OperationCodeSample",
 	props: /* @__PURE__ */ mergeModels({
@@ -68,11 +73,18 @@ var OperationCodeSample_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		/** 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));
+		const clients = computed(() => getClients(customCodeSamples.value.samples, __props.clientOptions, customCodeSamples.value.label));
+		/** Total number of available clients across all option groups */
+		const clientCount = computed(() => clients.value.reduce((total, group) => total + group.options.length, 0));
 		/** 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) => {
+		/**
+		* Re-resolve the local client whenever the global selection or the available
+		* clients change. Watching `clients` matters when navigating between operations:
+		* the stored id stays the same, but the matching option (e.g. a custom sample)
+		* differs per operation, so without this the snippet could go stale.
+		*/
+		watch([() => __props.selectedClient, clients], ([newClient]) => {
 			const client = findClient(clients.value, newClient);
 			if (client) localSelectedClient.value = client;
 		});
@@ -100,7 +112,7 @@ var OperationCodeSample_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				defaultDisabledParameters: false,
 				includeDefaultHeaders: __props.integration === "client",
 				clientId: localSelectedClient.value?.id,
-				customCodeSamples: customCodeSamples.value,
+				customCodeSamples: customCodeSamples.value.samples,
 				operation: __props.operation,
 				method: __props.method,
 				path: __props.path,
@@ -140,7 +152,7 @@ var OperationCodeSample_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				}, 300);
 			}
 			localSelectedClient.value = option;
-			if (option && !option.id.startsWith("custom")) __props.eventBus.emit("workspace:update:selected-client", option.id);
+			if (option) __props.eventBus.emit("workspace:update:selected-client", option.id);
 		};
 		const VIRTUALIZATION_THRESHOLD = 2e4;
 		const shouldVirtualize = computed(() => (generatedCode.value.length ?? 0) > VIRTUALIZATION_THRESHOLD);
@@ -168,9 +180,10 @@ var OperationCodeSample_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 							renderSlot(_ctx.$slots, "header", {}, void 0, true)
 						]),
 						_: 2
-					}, [!__props.isWebhook && clients.value.length ? {
+					}, [!__props.isWebhook && clientCount.value ? {
 						name: "actions",
-						fn: withCtx(() => [createVNode(unref(ScalarCombobox), {
+						fn: withCtx(() => [clientCount.value > 1 ? (openBlock(), createBlock(unref(ScalarCombobox), {
+							key: 0,
 							class: "max-h-80",
 							filterFn: unref(filterClientsByQuery),
 							modelValue: localSelectedClient.value,
@@ -195,7 +208,7 @@ var OperationCodeSample_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 							"filterFn",
 							"modelValue",
 							"options"
-						])]),
+						])) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(localSelectedClient.value?.title), 1))]),
 						key: "0"
 					} : void 0]), 1024),
 					createVNode(unref(ScalarCardSection), { class: "request-editor-section custom-scroll p-0" }, {
@@ -219,14 +232,14 @@ var OperationCodeSample_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 							contentClass: "language-plaintext whitespace-pre font-code text-base p-2",
 							lineHeight: 20,
 							text: generatedCode.value
-						}, null, 8, ["text"]))], 8, _hoisted_2)]),
+						}, null, 8, ["text"]))], 8, _hoisted_3)]),
 						_: 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, {
+						default: withCtx(() => [Object.keys(requestBodyExamples.value).length > 1 ? (openBlock(), createElementBlock("div", _hoisted_4, [Object.keys(requestBodyExamples.value).length ? (openBlock(), createBlock(ExamplePicker_default, {
 							key: 0,
 							modelValue: selectedExampleKey.value,
 							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedExampleKey.value = $event),
@@ -241,7 +254,7 @@ var OperationCodeSample_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				class: "request-card dark-mode"
 			}, {
 				default: withCtx(() => [createVNode(unref(ScalarCardSection), { class: "request-card-simple" }, {
-					default: withCtx(() => [createElementVNode("div", _hoisted_4, [createVNode(HttpMethod_default, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(HttpMethod_default, {
 						as: "span",
 						class: "request-method",
 						method: __props.method