@scalar/api-client 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @scalar/api-client
 
+## 3.1.0
+
+### Minor Changes
+
+- [#8865](https://github.com/scalar/scalar/pull/8865): feat: add plugin support for custom response body content types
+
+### Patch Changes
+
+- [#8810](https://github.com/scalar/scalar/pull/8810): refactor: move telemetry to an optional plugin
+- [#8912](https://github.com/scalar/scalar/pull/8912): fix: provide a default summary when creating a new temp operation
+- [#8903](https://github.com/scalar/scalar/pull/8903): fix: share Postman collection detection from postman-to-openapi
+- [#8911](https://github.com/scalar/scalar/pull/8911): feat: switch from Request to RequestPayload to support body with GET
+- [#8887](https://github.com/scalar/scalar/pull/8887): fix: invalid json body handling and add root document for bulk operation selection
+
 ## 3.0.0
 
 ### Major Changes

package/README.md

@@ -165,6 +165,47 @@ The `createApiClientModal` call returns:
 ```
 
 
+## Plugins
+
+The `plugins` option accepts an array of `ClientPlugin` objects that extend the API Client with custom behavior. Plugins can add lifecycle hooks, custom UI components, and custom response body handlers for content types that the client does not natively support.
+
+### Custom Response Body Handling
+
+When your API returns a non-standard content type (for example, MessagePack), you can register a plugin with a `responseBody` handler to decode and display it:
+
+```ts
+import type { ClientPlugin } from '@scalar/oas-utils/helpers'
+
+const msgpackPlugin: ClientPlugin = {
+  responseBody: [
+    {
+      mimeTypes: ['application/msgpack', 'application/x-msgpack'],
+      decode: async (buffer) => {
+        const { decode } = await import('@msgpack/msgpack')
+        const decoded = decode(new Uint8Array(buffer))
+        return JSON.stringify(decoded, null, 2)
+      },
+      language: 'json',
+    },
+  ],
+}
+
+createApiClientApp(el, {
+  layout: 'web',
+  plugins: [msgpackPlugin],
+})
+```
+
+Each handler in `responseBody` supports:
+
+| Property | Description |
+|---|---|
+| `mimeTypes` | MIME type patterns to match (exact or wildcard like `application/vnd.*+json`). |
+| `decode` | Transforms the raw `ArrayBuffer` into a string or Blob for display. |
+| `language` | CodeMirror language hint for the built-in raw renderer (for example, `json`). |
+| `rawComponent` | A custom Vue component for the raw view (mutually exclusive with `language`). |
+| `previewComponent` | A custom Vue component for the preview view. |
+
 ## Community
 
 We are API nerds. You too? Let's chat on Discord: <https://discord.gg/scalar>

package/dist/plugins/posthog/index.d.ts

@@ -0,0 +1,23 @@
+import type { ClientPlugin } from '@scalar/oas-utils/helpers';
+import type { ConfigDefaults } from 'posthog-js';
+export type PostHogConfig = {
+    /** Your PostHog project API key */
+    apiKey: string;
+    /** The PostHog API host URL */
+    apiHost: string;
+    /** The PostHog UI host URL (for session recordings, surveys, etc.) */
+    uiHost?: string;
+    /** PostHog defaults version identifier */
+    defaults?: ConfigDefaults;
+};
+/**
+ * PostHog analytics plugin for the API Client.
+ *
+ * Loading this plugin opts in to analytics. If the plugin is not loaded,
+ * no tracking occurs.
+ *
+ * Respects the `telemetry` configuration option — when set to `false`,
+ * capturing is disabled. Reacts dynamically to config changes at runtime.
+ */
+export declare const PostHogClientPlugin: (config: PostHogConfig) => ClientPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/plugins/posthog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/posthog/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAW,MAAM,YAAY,CAAA;AAGzD,MAAM,MAAM,aAAa,GAAG;IAC1B,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,OAAO,EAAE,MAAM,CAAA;IACf,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,cAAc,CAAA;CAC1B,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,GAAI,QAAQ,aAAa,KAAG,YA4D3D,CAAA"}

package/dist/plugins/posthog/index.js

@@ -0,0 +1,58 @@
+import ph from "posthog-js";
+//#region src/plugins/posthog/index.ts
+/**
+* PostHog analytics plugin for the API Client.
+*
+* Loading this plugin opts in to analytics. If the plugin is not loaded,
+* no tracking occurs.
+*
+* Respects the `telemetry` configuration option — when set to `false`,
+* capturing is disabled. Reacts dynamically to config changes at runtime.
+*/
+var PostHogClientPlugin = (config) => {
+	let posthog = null;
+	return {
+		on: {
+			"hooks:on:request:sent": () => posthog?.capture("hooks:on:request:sent"),
+			"operation:create:operation": () => posthog?.capture("operation:create:operation"),
+			"operation:delete:operation": () => posthog?.capture("operation:delete:operation"),
+			"document:create:empty-document": () => posthog?.capture("document:create:empty-document"),
+			"document:delete:document": () => posthog?.capture("document:delete:document"),
+			"tag:create:tag": () => posthog?.capture("tag:create:tag"),
+			"server:add:server": () => posthog?.capture("server:add:server"),
+			"auth:update:selected-security-schemes": () => posthog?.capture("auth:update:selected-security-schemes"),
+			"environment:upsert:environment": () => posthog?.capture("environment:upsert:environment"),
+			"ui:open:client-modal": () => posthog?.capture("ui:open:client-modal"),
+			"ui:download:document": () => posthog?.capture("ui:download:document")
+		},
+		lifecycle: {
+			onInit(context) {
+				if (typeof window === "undefined") return;
+				const instance = ph.init(config.apiKey, {
+					api_host: config.apiHost,
+					...config.uiHost ? { ui_host: config.uiHost } : {},
+					...config.defaults ? { defaults: config.defaults } : {},
+					opt_out_capturing_by_default: true
+				}, "scalar-api-client");
+				if (instance) {
+					posthog = instance;
+					posthog.register({ product: "api-client" });
+					if (context?.config.telemetry !== false) posthog.opt_in_capturing();
+				}
+			},
+			onConfigChange(context) {
+				if (!posthog) return;
+				if (context.config.telemetry === false) posthog.opt_out_capturing();
+				else posthog.opt_in_capturing();
+			},
+			onDestroy() {
+				posthog?.reset();
+				posthog = null;
+			}
+		}
+	};
+};
+//#endregion
+export { PostHogClientPlugin };
+
+//# sourceMappingURL=index.js.map

package/dist/plugins/posthog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/plugins/posthog/index.ts"],"sourcesContent":["import type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { ConfigDefaults, PostHog } from 'posthog-js'\nimport ph from 'posthog-js'\n\nexport type PostHogConfig = {\n  /** Your PostHog project API key */\n  apiKey: string\n  /** The PostHog API host URL */\n  apiHost: string\n  /** The PostHog UI host URL (for session recordings, surveys, etc.) */\n  uiHost?: string\n  /** PostHog defaults version identifier */\n  defaults?: ConfigDefaults\n}\n\n/**\n * PostHog analytics plugin for the API Client.\n *\n * Loading this plugin opts in to analytics. If the plugin is not loaded,\n * no tracking occurs.\n *\n * Respects the `telemetry` configuration option — when set to `false`,\n * capturing is disabled. Reacts dynamically to config changes at runtime.\n */\nexport const PostHogClientPlugin = (config: PostHogConfig): ClientPlugin => {\n  let posthog: PostHog | null = null\n\n  return {\n    on: {\n      'hooks:on:request:sent': () => posthog?.capture('hooks:on:request:sent'),\n      'operation:create:operation': () => posthog?.capture('operation:create:operation'),\n      'operation:delete:operation': () => posthog?.capture('operation:delete:operation'),\n      'document:create:empty-document': () => posthog?.capture('document:create:empty-document'),\n      'document:delete:document': () => posthog?.capture('document:delete:document'),\n      'tag:create:tag': () => posthog?.capture('tag:create:tag'),\n      'server:add:server': () => posthog?.capture('server:add:server'),\n      'auth:update:selected-security-schemes': () => posthog?.capture('auth:update:selected-security-schemes'),\n      'environment:upsert:environment': () => posthog?.capture('environment:upsert:environment'),\n      'ui:open:client-modal': () => posthog?.capture('ui:open:client-modal'),\n      'ui:download:document': () => posthog?.capture('ui:download:document'),\n    },\n    lifecycle: {\n      onInit(context) {\n        if (typeof window === 'undefined') {\n          return\n        }\n\n        const instance = ph.init(\n          config.apiKey,\n          {\n            api_host: config.apiHost,\n            ...(config.uiHost ? { ui_host: config.uiHost } : {}),\n            ...(config.defaults ? { defaults: config.defaults } : {}),\n            opt_out_capturing_by_default: true,\n          },\n          'scalar-api-client',\n        )\n\n        if (instance) {\n          posthog = instance\n          posthog.register({ product: 'api-client' })\n\n          if (context?.config.telemetry !== false) {\n            posthog.opt_in_capturing()\n          }\n        }\n      },\n      onConfigChange(context) {\n        if (!posthog) {\n          return\n        }\n\n        if (context.config.telemetry === false) {\n          posthog.opt_out_capturing()\n        } else {\n          posthog.opt_in_capturing()\n        }\n      },\n      onDestroy() {\n        posthog?.reset()\n        posthog = null\n      },\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,uBAAuB,WAAwC;CAC1E,IAAI,UAA0B;AAE9B,QAAO;EACL,IAAI;GACF,+BAA+B,SAAS,QAAQ,wBAAwB;GACxE,oCAAoC,SAAS,QAAQ,6BAA6B;GAClF,oCAAoC,SAAS,QAAQ,6BAA6B;GAClF,wCAAwC,SAAS,QAAQ,iCAAiC;GAC1F,kCAAkC,SAAS,QAAQ,2BAA2B;GAC9E,wBAAwB,SAAS,QAAQ,iBAAiB;GAC1D,2BAA2B,SAAS,QAAQ,oBAAoB;GAChE,+CAA+C,SAAS,QAAQ,wCAAwC;GACxG,wCAAwC,SAAS,QAAQ,iCAAiC;GAC1F,8BAA8B,SAAS,QAAQ,uBAAuB;GACtE,8BAA8B,SAAS,QAAQ,uBAAuB;GACvE;EACD,WAAW;GACT,OAAO,SAAS;AACd,QAAI,OAAO,WAAW,YACpB;IAGF,MAAM,WAAW,GAAG,KAClB,OAAO,QACP;KACE,UAAU,OAAO;KACjB,GAAI,OAAO,SAAS,EAAE,SAAS,OAAO,QAAQ,GAAG,EAAE;KACnD,GAAI,OAAO,WAAW,EAAE,UAAU,OAAO,UAAU,GAAG,EAAE;KACxD,8BAA8B;KAC/B,EACD,oBACD;AAED,QAAI,UAAU;AACZ,eAAU;AACV,aAAQ,SAAS,EAAE,SAAS,cAAc,CAAC;AAE3C,SAAI,SAAS,OAAO,cAAc,MAChC,SAAQ,kBAAkB;;;GAIhC,eAAe,SAAS;AACtB,QAAI,CAAC,QACH;AAGF,QAAI,QAAQ,OAAO,cAAc,MAC/B,SAAQ,mBAAmB;QAE3B,SAAQ,kBAAkB;;GAG9B,YAAY;AACV,aAAS,OAAO;AAChB,cAAU;;GAEb;EACF"}

package/dist/style.css

@@ -1010,8 +1010,8 @@
     background-color: var(--scalar-sidebar-indent-border-hover, var(--scalar-border-color));
   }
 
-  .scalar-app .group-hover\/button\:text-c-1:is(:where(.group\/button):hover *) {
-    color: var(--scalar-color-1);
+  .scalar-app .group-hover\/button\:text-c-header-1:is(:where(.group\/button):hover *) {
+    color: var(--scalar-header-color-1, var(--scalar-color-1));
   }
 
   .scalar-app .hover\:bg-b-2:hover {
@@ -1022,10 +1022,24 @@
     background-color: var(--scalar-background-3);
   }
 
+  .scalar-app .hover\:bg-b-header-2:hover {
+    background-color: var(--scalar-header-background-2, var(--scalar-background-2));
+  }
+
   .scalar-app .hover\:bg-h-btn:hover {
     background-color: var(--scalar-button-1-hover);
   }
 
+  .scalar-app .hover\:bg-h-header-cta:hover {
+    background-color: var(--scalar-header-call-to-action-color, var(--scalar-button-1));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .scalar-app .hover\:bg-h-header-cta:hover {
+      background-color: color-mix(in srgb, var(--scalar-header-call-to-action-color, var(--scalar-button-1)), var(--scalar-header-background-1, var(--scalar-background-1)) 15%);
+    }
+  }
+
   .scalar-app .hover\:bg-sidebar-b-1:hover {
     background-color: var(--scalar-sidebar-background-1, var(--scalar-background-1));
   }
@@ -1066,6 +1080,10 @@
     color: var(--scalar-color-1);
   }
 
+  .scalar-app .hover\:text-c-header-1:hover {
+    color: var(--scalar-header-color-1, var(--scalar-color-1));
+  }
+
   .scalar-app .hover\:text-sidebar-c-1:hover {
     color: var(--scalar-sidebar-color-1, var(--scalar-color-1));
   }
@@ -3441,6 +3459,10 @@
   border-width: 1px;
 }
 
+.scalar-app .border-border-header {
+  border-color: var(--scalar-header-border-color, var(--scalar-border-color));
+}
+
 .scalar-app .border-c-alert {
   border-color: var(--scalar-color-alert);
 }
@@ -3483,6 +3505,14 @@
   background-color: var(--scalar-button-1);
 }
 
+.scalar-app .bg-b-header-1 {
+  background-color: var(--scalar-header-background-1, var(--scalar-background-1));
+}
+
+.scalar-app .bg-b-header-cta {
+  background-color: var(--scalar-header-call-to-action-color, var(--scalar-button-1));
+}
+
 .scalar-app .bg-b-tooltip {
   background-color: var(--scalar-tooltip-background);
 }
@@ -3666,6 +3696,18 @@
   overflow-wrap: break-word;
 }
 
+.scalar-app .text-c-header-1 {
+  color: var(--scalar-header-color-1, var(--scalar-color-1));
+}
+
+.scalar-app .text-c-header-2 {
+  color: var(--scalar-header-color-2, var(--scalar-color-2));
+}
+
+.scalar-app .text-c-header-cta {
+  color: var(--scalar-button-1-color);
+}
+
 .scalar-app .text-c-tooltip {
   color: var(--scalar-tooltip-color);
 }
@@ -3764,8 +3806,8 @@
   justify-content: center;
 }
 
-:is(.scalar-app .\*\:gap-px > *) {
-  gap: 1px;
+:is(.scalar-app .\*\:gap-1 > *) {
+  gap: 4px;
 }
 
 :is(.scalar-app .\*\:rounded > *) {
@@ -3804,8 +3846,8 @@
     background-color: var(--scalar-sidebar-indent-border-hover, var(--scalar-border-color));
   }
 
-  .scalar-app .group-hover\/button\:text-c-1:is(:where(.group\/button):hover *) {
-    color: var(--scalar-color-1);
+  .scalar-app .group-hover\/button\:text-c-header-1:is(:where(.group\/button):hover *) {
+    color: var(--scalar-header-color-1, var(--scalar-color-1));
   }
 }
 
@@ -3881,10 +3923,24 @@
     background-color: var(--scalar-background-3);
   }
 
+  .scalar-app .hover\:bg-b-header-2:hover {
+    background-color: var(--scalar-header-background-2, var(--scalar-background-2));
+  }
+
   .scalar-app .hover\:bg-h-btn:hover {
     background-color: var(--scalar-button-1-hover);
   }
 
+  .scalar-app .hover\:bg-h-header-cta:hover {
+    background-color: var(--scalar-header-call-to-action-color, var(--scalar-button-1));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .scalar-app .hover\:bg-h-header-cta:hover {
+      background-color: color-mix(in srgb, var(--scalar-header-call-to-action-color, var(--scalar-button-1)), var(--scalar-header-background-1, var(--scalar-background-1)) 15%);
+    }
+  }
+
   .scalar-app .hover\:bg-sidebar-b-1:hover {
     background-color: var(--scalar-sidebar-background-1, var(--scalar-background-1));
   }
@@ -3925,6 +3981,10 @@
     color: var(--scalar-color-1);
   }
 
+  .scalar-app .hover\:text-c-header-1:hover {
+    color: var(--scalar-header-color-1, var(--scalar-color-1));
+  }
+
   .scalar-app .hover\:text-sidebar-c-1:hover {
     color: var(--scalar-sidebar-color-1, var(--scalar-color-1));
   }
@@ -4711,6 +4771,10 @@
   height: 68px;
 }
 
+.scalar-app .h-\[300px\] {
+  height: 300px;
+}
+
 .scalar-app .h-\[calc\(100\%_-_50px\)\] {
   height: calc(100% - 50px);
 }
@@ -4779,10 +4843,6 @@
   max-height: 60svh;
 }
 
-.scalar-app .max-h-\[300px\] {
-  max-height: 300px;
-}
-
 .scalar-app .max-h-\[auto\] {
   max-height: auto;
 }
@@ -8092,7 +8152,7 @@ input[data-v-3157c3c7]::placeholder {
   min-width: 100%;
 }
 
-.scalar-code-block[data-v-94c74c13] .hljs * {
+.scalar-code-block[data-v-30c34ea4] .hljs * {
   font-size: var(--scalar-small);
 }
 
@@ -8165,11 +8225,11 @@ to {
   opacity: 0;
 }
 
-.animate-response-heading .response-heading[data-v-3d6c8e96] {
-  animation: push-response-3d6c8e96 0.2s ease-in-out forwards;
+.animate-response-heading .response-heading[data-v-82f4df98] {
+  animation: push-response-82f4df98 0.2s ease-in-out forwards;
   opacity: 1;
 }
-@keyframes push-response-3d6c8e96 {
+@keyframes push-response-82f4df98 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -8179,11 +8239,11 @@ to {
     transform: translateY(-4px);
 }
 }
-.animate-response-heading .animate-response-children[data-v-3d6c8e96] {
-  animation: response-spans-3d6c8e96 0.2s ease-in-out forwards 0.05s;
+.animate-response-heading .animate-response-children[data-v-82f4df98] {
+  animation: response-spans-82f4df98 0.2s ease-in-out forwards 0.05s;
   opacity: 0;
 }
-@keyframes response-spans-3d6c8e96 {
+@keyframes response-spans-82f4df98 {
 from {
     opacity: 0;
     transform: translateY(4px);
@@ -8812,7 +8872,7 @@ to {
   display: none;
 }
 
-.postman-import-path-conflict-callout[data-v-9f13a627] {
+.postman-import-path-conflict-callout[data-v-cc4f666d] {
   border-color: var(--scalar-color-red);
   background-color: var(--scalar-background-danger);
   color: var(--scalar-color-1);

package/dist/v2/blocks/operation-block/OperationBlock.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OperationBlock.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/blocks/operation-block/OperationBlock.vue"],"names":[],"mappings":"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"}
+{"version":3,"file":"OperationBlock.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/blocks/operation-block/OperationBlock.vue"],"names":[],"mappings":"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"}

package/dist/v2/blocks/operation-block/OperationBlock.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperationBlock.vue.js","names":[],"sources":["../../../../src/v2/blocks/operation-block/OperationBlock.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * OperationBlock\n *\n * Orchestrates the operation view by wiring together the Header, OperationBlock,\n * and ResponseBlock. Forwards user interactions to the workspace event bus and\n * passes through configuration such as auth, servers, plugins, and environment.\n * This component keeps the Operation page lean by centralizing event emission\n * and prop wiring between the blocks.\n *\n * Notable behavior:\n * - Uses operation['x-scalar-method'] and operation['x-scalar-path'] to provide\n *   draft overrides for the UI when present.\n */\nexport default {\n  name: 'OperationBlock',\n}\n\nexport type OperationBlockProps = {\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n  /** Application version */\n  appVersion: string\n  /** Openapi document */\n  document: OpenApiDocument\n  /** Workspace cookies */\n  workspaceCookies: XScalarCookie[]\n  /** Document cookies */\n  documentCookies: XScalarCookie[]\n  /** Current request path */\n  path: string\n  /** Current request method */\n  method: HttpMethodType\n  /** HTTP clients */\n  httpClients: AvailableClients\n  /** The history for the operation */\n  history?: HistoryEntry[]\n  /** Client layout */\n  layout: ClientLayout\n  /** Currently selected server */\n  server: ServerObject | null\n  /** Currently selected client */\n  selectedClient: WorkspaceStore['workspace']['x-scalar-default-client']\n  /** Server list available for operation/document */\n  servers: ServerObject[]\n  /** Meta information for the server */\n  serverMeta: ServerMeta\n  /** Hides the client button on the header */\n  hideClientButton?: boolean\n  /** Client integration  */\n  integration?: string | null\n  /** Openapi document url for `modal` mode to open the client app */\n  documentUrl?: string\n  /** Client source */\n  source?: 'gitbook' | 'api-reference'\n  /** Operation object */\n  operation: OperationObject\n  /** Currently selected example key for the current operation */\n  exampleKey: string\n  /** Meta information for the auth update */\n  authMeta: AuthMeta\n  /** Document defined security schemes */\n  securitySchemes: MergedSecuritySchemes\n  /** Client plugins */\n  plugins: ClientPlugin[]\n  /** Environment list */\n  environments?: string[]\n  /** Currently selected environment */\n  activeEnvironment?: string\n  /** For environment variables in the inputs */\n  environment: XScalarEnvironment\n  /** The proxy URL for sending requests */\n  proxyUrl: string\n  /** Currently selected security */\n  selectedSecurity: SelectedSecurity\n  /** Currently selected security schemes */\n  selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n  /** Security requirements */\n  securityRequirements: OpenApiDocument['security']\n  /** Default headers */\n  defaultHeaders: Record<string, string>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection?: Record<string, number>\n  /** Subset of config options for the modal */\n  options?: ModalProps['options']\n}\n</script>\n<script setup lang=\"ts\">\nimport { ERRORS } from '@scalar/helpers/errors/normalize-error'\nimport { isElectron } from '@scalar/helpers/general/is-electron'\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { executeHook, type ClientPlugin } from '@scalar/oas-utils/helpers'\nimport {\n  AVAILABLE_CLIENTS,\n  type AvailableClients,\n} from '@scalar/types/snippetz'\nimport { useToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { SelectedSecurity } from '@scalar/workspace-store/entities/auth'\nimport type { HistoryEntry } from '@scalar/workspace-store/entities/history/schema'\nimport type {\n  AuthMeta,\n  ServerMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport {\n  buildRequest,\n  createVariablesStoreForRequest,\n  getEnvironmentVariables,\n  requestFactory,\n  type MergedSecuritySchemes,\n  type SecuritySchemeObjectSecret,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n  OpenApiDocument,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport type { OperationObject } from '@scalar/workspace-store/schemas/v3.1/strict/operation'\nimport { computed, onBeforeUnmount, onMounted, ref, toValue, watch } from 'vue'\n\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutContent from '@/components/ViewLayout/ViewLayoutContent.vue'\nimport { harToFetchRequest } from '@/v2/blocks/operation-block/helpers/har-to-fetch-request'\nimport { harToFetchResponse } from '@/v2/blocks/operation-block/helpers/har-to-fetch-response'\nimport {\n  getOperationExampleKey,\n  isStreamingResponse,\n  responseCache,\n} from '@/v2/blocks/operation-block/helpers/response-cache'\nimport {\n  sendRequest,\n  type ResponseInstance,\n} from '@/v2/blocks/operation-block/helpers/send-request'\nimport { validatePathParameters } from '@/v2/blocks/operation-block/helpers/validate-path-parameters'\nimport { generateClientOptions } from '@/v2/blocks/operation-code-sample'\nimport { RequestBlock } from '@/v2/blocks/request-block'\nimport { ResponseBlock } from '@/v2/blocks/response-block'\nimport { type History } from '@/v2/blocks/scalar-address-bar-block'\nimport type { ModalProps } from '@/v2/features/modal/Modal.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport Header from './components/Header.vue'\n\nconst {\n  authMeta,\n  environment,\n  eventBus,\n  exampleKey,\n  document,\n  workspaceCookies = [],\n  documentCookies = [],\n  hideClientButton,\n  httpClients = AVAILABLE_CLIENTS,\n  history = [],\n  method,\n  operation,\n  path,\n  plugins = [],\n  proxyUrl,\n  requestBodyCompositionSelection,\n  securitySchemes,\n  selectedClient,\n  server,\n  environments,\n  options,\n  activeEnvironment,\n  serverMeta,\n  selectedSecurity,\n  selectedSecuritySchemes,\n  securityRequirements,\n  defaultHeaders,\n} = defineProps<OperationBlockProps>()\n\n/** Hoist up client generation so it doesn't get re-generated on every operation */\nconst clientOptions = computed(() => generateClientOptions(httpClients))\n\nconst { toast } = useToasts()\n\n// Refs\nconst abortController = ref<AbortController | null>(null)\nconst response = ref<ResponseInstance | null>(null)\nconst request = ref<Request | null>(null)\n\n/** Cancel the request */\nconst cancelRequest = () => abortController.value?.abort(ERRORS.REQUEST_ABORTED)\n\n/** Execute the current operation example */\nconst handleExecute = async () => {\n  const pathValidation = validatePathParameters(\n    operation.parameters ?? [],\n    exampleKey,\n  )\n  if (pathValidation.ok === false) {\n    toast('Path parameters must have values.', 'error')\n    return\n  }\n\n  const globalCookies = [...workspaceCookies, ...documentCookies]\n\n  const { request: requestBuilder } = requestFactory({\n    defaultHeaders,\n    environment,\n    exampleName: exampleKey,\n    globalCookies,\n    method,\n    operation,\n    path,\n    proxyUrl,\n    server,\n    selectedSecuritySchemes,\n    isElectron: isElectron(),\n    requestBodyCompositionSelection,\n  })\n\n  // Stop any previous streaming response\n  if (response.value && 'reader' in response.value) {\n    response.value.reader.cancel()\n  }\n\n  const variablesStore = createVariablesStoreForRequest()\n\n  // Execute the beforeRequest hook (plugins receive RequestFactory, not fetch Request)\n  await executeHook(\n    {\n      requestBuilder,\n      document,\n      operation,\n      variablesStore,\n    },\n    'beforeRequest',\n    plugins,\n  )\n\n  const envVariables = {\n    ...getEnvironmentVariables(environment),\n    ...variablesStore.getVariables(),\n  }\n\n  // Build the fetch Request after hooks may have mutated the factory\n  const requestResult = (() => {\n    try {\n      return {\n        ok: true,\n        result: buildRequest(requestBuilder, {\n          envVariables,\n        }),\n      } as const\n    } catch (error) {\n      const message = error instanceof Error ? error.message : String(error)\n      return {\n        ok: false,\n        error: message,\n      } as const\n    }\n  })()\n\n  if (requestResult.ok === false) {\n    toast(requestResult.error, 'error')\n    return\n  }\n\n  // Store the abort controller for cancellation\n  abortController.value = requestResult.result.controller\n\n  // Execute the hooks\n  eventBus.emit('hooks:on:request:sent', {\n    meta: {\n      method,\n      path,\n      exampleKey,\n    },\n  })\n\n  /** Execute the request */\n  const [sendError, sendResult] = await sendRequest({\n    isUsingProxy: requestResult.result.isUsingProxy,\n    request: requestResult.result.request,\n  })\n\n  if (sendResult) {\n    // Execute the responseReceived hook\n    await executeHook(\n      {\n        response: sendResult.originalResponse.clone(),\n        requestBuilder,\n        request: sendResult.request.clone(),\n        document,\n        operation,\n        variablesStore,\n      },\n      'responseReceived',\n      plugins,\n    )\n  }\n\n  // Execute the hooks\n  eventBus.emit('hooks:on:request:complete', {\n    payload: sendResult\n      ? {\n          response: sendResult.originalResponse.clone(),\n          request: sendResult.request.clone(),\n          duration: sendResult.response.duration,\n          timestamp: sendResult.timestamp,\n        }\n      : undefined,\n    meta: {\n      method,\n      path,\n      exampleKey,\n    },\n  })\n\n  if (sendError) {\n    // clean up the response and request\n    response.value = null\n    request.value = null\n    abortController.value = null\n\n    toast(sendError.message, 'error')\n    return\n  }\n\n  // Store the response\n  response.value = sendResult.response\n  request.value = sendResult.request\n\n  // Cache non-streaming responses so they can be restored when navigating back\n  if (!isStreamingResponse(sendResult.response)) {\n    responseCache.set(getOperationExampleKey(method, path, exampleKey), {\n      response: sendResult.response,\n      request: sendResult.request,\n    })\n  }\n}\n\nonMounted(() => {\n  eventBus.on('operation:send:request:hotkey', handleExecute)\n  eventBus.on('operation:cancel:request', cancelRequest)\n})\nonBeforeUnmount(() => {\n  eventBus.off('operation:send:request:hotkey', handleExecute)\n  eventBus.off('operation:cancel:request', cancelRequest)\n})\n\nconst operationHistory = computed<History[]>(() =>\n  history\n    .map((entry) => ({\n      method: entry.request.method as HttpMethodType,\n      path: entry.request.url,\n      duration: entry.time,\n      status: entry.response.status,\n    }))\n    .reverse(),\n)\n\nconst handleSelectHistoryItem = ({ index }: { index: number }) => {\n  const transformedIndex = (history.length ?? 0) - index - 1\n  const historyItem = history[transformedIndex]\n  if (!historyItem) {\n    return\n  }\n\n  const navigate = () =>\n    eventBus.emit('ui:navigate', {\n      page: 'example',\n      method,\n      path,\n      exampleName: 'draft',\n      callback: (status) => {\n        // Do not replace the response if the navigation was not successful\n        if (status !== 'success') {\n          return\n        }\n        // Reconstruct the response\n        const fetchResponse = harToFetchResponse({\n          harResponse: historyItem.response,\n          url: historyItem.request.url,\n          method,\n          path,\n          duration: historyItem.time,\n        })\n\n        // Reconstruct the request\n        const fetchRequest = harToFetchRequest({\n          harRequest: historyItem.request,\n        })\n\n        // Update the response and request\n        response.value = fetchResponse\n        request.value = fetchRequest\n      },\n    })\n\n  eventBus.emit('operation:reload:history', {\n    meta: {\n      path,\n      method,\n    },\n    index: transformedIndex,\n    callback: navigate,\n  })\n}\n\n/**\n * When the path, method, or example key changes: save current response to\n * cache (so it can be restored when navigating back), then restore from cache\n * for the new operation or clear if no cached response. Response is only\n * cleared on page refresh or when making a new request for that operation.\n */\nwatch(\n  [() => path, () => method, () => exampleKey],\n  ([newPath, newMethod, newExampleKey]) => {\n    const newKey = getOperationExampleKey(newMethod, newPath, newExampleKey)\n    const cached = responseCache.get(newKey)\n    if (cached) {\n      response.value = cached.response\n      request.value = cached.request\n    } else {\n      response.value = null\n      request.value = null\n    }\n\n    // Cancel any in-flight request\n    cancelRequest()\n  },\n  { immediate: true },\n)\n\nonBeforeUnmount(() => {\n  // We cancel the request if the component is unmounted\n  cancelRequest()\n})\n</script>\n<template>\n  <div class=\"bg-b-1 flex h-full flex-col\">\n    <div\n      class=\"lg:min-h-header flex w-full flex-wrap items-center justify-center p-2 lg:p-0\">\n      <!-- Address Bar -->\n      <Header\n        :activeEnvironment\n        :documentUrl\n        :environment\n        :environments\n        :eventBus\n        :hideClientButton\n        :history=\"operationHistory\"\n        :integration\n        :layout\n        :method\n        :path\n        :server\n        :serverMeta\n        :servers\n        :source\n        @execute=\"handleExecute\"\n        @select:history:item=\"handleSelectHistoryItem\" />\n    </div>\n\n    <ViewLayout class=\"border-t\">\n      <ViewLayoutContent class=\"flex-1\">\n        <!-- Request Section -->\n        <RequestBlock\n          :authMeta\n          :clientOptions\n          :defaultHeaders\n          :documentCookies\n          :environment\n          :eventBus\n          :exampleKey\n          :layout\n          :method\n          :operation\n          :options=\"toValue(options)\"\n          :path\n          :plugins\n          :proxyUrl\n          :requestBodyCompositionSelection\n          :securityRequirements\n          :securitySchemes\n          :selectedClient\n          :selectedSecurity\n          :selectedSecuritySchemes\n          :server\n          :workspaceCookies />\n\n        <!-- Response Section -->\n        <ResponseBlock\n          :appVersion\n          :eventBus\n          :layout\n          :plugins\n          :request\n          :response\n          :totalPerformedRequests=\"operationHistory.length\" />\n      </ViewLayoutContent>\n    </ViewLayout>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"OperationBlock.vue.js","names":[],"sources":["../../../../src/v2/blocks/operation-block/OperationBlock.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * OperationBlock\n *\n * Orchestrates the operation view by wiring together the Header, OperationBlock,\n * and ResponseBlock. Forwards user interactions to the workspace event bus and\n * passes through configuration such as auth, servers, plugins, and environment.\n * This component keeps the Operation page lean by centralizing event emission\n * and prop wiring between the blocks.\n *\n * Notable behavior:\n * - Uses operation['x-scalar-method'] and operation['x-scalar-path'] to provide\n *   draft overrides for the UI when present.\n */\nexport default {\n  name: 'OperationBlock',\n}\n\nexport type OperationBlockProps = {\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n  /** Application version */\n  appVersion: string\n  /** Openapi document */\n  document: OpenApiDocument\n  /** Workspace cookies */\n  workspaceCookies: XScalarCookie[]\n  /** Document cookies */\n  documentCookies: XScalarCookie[]\n  /** Current request path */\n  path: string\n  /** Current request method */\n  method: HttpMethodType\n  /** HTTP clients */\n  httpClients: AvailableClients\n  /** The history for the operation */\n  history?: HistoryEntry[]\n  /** Client layout */\n  layout: ClientLayout\n  /** Currently selected server */\n  server: ServerObject | null\n  /** Currently selected client */\n  selectedClient: WorkspaceStore['workspace']['x-scalar-default-client']\n  /** Server list available for operation/document */\n  servers: ServerObject[]\n  /** Meta information for the server */\n  serverMeta: ServerMeta\n  /** Hides the client button on the header */\n  hideClientButton?: boolean\n  /** Client integration  */\n  integration?: string | null\n  /** Openapi document url for `modal` mode to open the client app */\n  documentUrl?: string\n  /** Client source */\n  source?: 'gitbook' | 'api-reference'\n  /** Operation object */\n  operation: OperationObject\n  /** Currently selected example key for the current operation */\n  exampleKey: string\n  /** Meta information for the auth update */\n  authMeta: AuthMeta\n  /** Document defined security schemes */\n  securitySchemes: MergedSecuritySchemes\n  /** Client plugins */\n  plugins: ClientPlugin[]\n  /** Environment list */\n  environments?: string[]\n  /** Currently selected environment */\n  activeEnvironment?: string\n  /** For environment variables in the inputs */\n  environment: XScalarEnvironment\n  /** The proxy URL for sending requests */\n  proxyUrl: string\n  /** Currently selected security */\n  selectedSecurity: SelectedSecurity\n  /** Currently selected security schemes */\n  selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n  /** Security requirements */\n  securityRequirements: OpenApiDocument['security']\n  /** Default headers */\n  defaultHeaders: Record<string, string>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection?: Record<string, number>\n  /** Subset of config options for the modal */\n  options?: ModalProps['options']\n}\n</script>\n<script setup lang=\"ts\">\nimport { ERRORS } 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 as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { executeHook, type ClientPlugin } from '@scalar/oas-utils/helpers'\nimport {\n  AVAILABLE_CLIENTS,\n  type AvailableClients,\n} from '@scalar/types/snippetz'\nimport { useToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { SelectedSecurity } from '@scalar/workspace-store/entities/auth'\nimport type { HistoryEntry } from '@scalar/workspace-store/entities/history/schema'\nimport type {\n  AuthMeta,\n  ServerMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport {\n  buildRequest,\n  createVariablesStoreForRequest,\n  getEnvironmentVariables,\n  requestFactory,\n  type MergedSecuritySchemes,\n  type RequestPayload,\n  type SecuritySchemeObjectSecret,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n  OpenApiDocument,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport type { OperationObject } from '@scalar/workspace-store/schemas/v3.1/strict/operation'\nimport { computed, onBeforeUnmount, onMounted, ref, toValue, watch } from 'vue'\n\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutContent from '@/components/ViewLayout/ViewLayoutContent.vue'\nimport { harToFetchRequest } from '@/v2/blocks/operation-block/helpers/har-to-fetch-request'\nimport { harToFetchResponse } from '@/v2/blocks/operation-block/helpers/har-to-fetch-response'\nimport {\n  getOperationExampleKey,\n  isStreamingResponse,\n  responseCache,\n} from '@/v2/blocks/operation-block/helpers/response-cache'\nimport {\n  sendRequest,\n  type ResponseInstance,\n} from '@/v2/blocks/operation-block/helpers/send-request'\nimport { validatePathParameters } from '@/v2/blocks/operation-block/helpers/validate-path-parameters'\nimport { generateClientOptions } from '@/v2/blocks/operation-code-sample'\nimport { RequestBlock } from '@/v2/blocks/request-block'\nimport { ResponseBlock } from '@/v2/blocks/response-block'\nimport { type History } from '@/v2/blocks/scalar-address-bar-block'\nimport type { ModalProps } from '@/v2/features/modal/Modal.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport Header from './components/Header.vue'\n\nconst {\n  authMeta,\n  environment,\n  eventBus,\n  exampleKey,\n  document,\n  workspaceCookies = [],\n  documentCookies = [],\n  hideClientButton,\n  httpClients = AVAILABLE_CLIENTS,\n  history = [],\n  method,\n  operation,\n  path,\n  plugins = [],\n  proxyUrl,\n  requestBodyCompositionSelection,\n  securitySchemes,\n  selectedClient,\n  server,\n  environments,\n  options,\n  activeEnvironment,\n  serverMeta,\n  selectedSecurity,\n  selectedSecuritySchemes,\n  securityRequirements,\n  defaultHeaders,\n} = defineProps<OperationBlockProps>()\n\n/** Hoist up client generation so it doesn't get re-generated on every operation */\nconst clientOptions = computed(() => generateClientOptions(httpClients))\n\nconst { toast } = useToasts()\n\n// Refs\nconst abortController = ref<AbortController | null>(null)\nconst response = ref<ResponseInstance | null>(null)\nconst requestPayload = ref<RequestPayload | null>(null)\n\n/** Cancel the request */\nconst cancelRequest = () => abortController.value?.abort(ERRORS.REQUEST_ABORTED)\n\n/** Execute the current operation example */\nconst handleExecute = async () => {\n  const pathValidation = validatePathParameters(\n    operation.parameters ?? [],\n    exampleKey,\n  )\n  if (pathValidation.ok === false) {\n    toast('Path parameters must have values.', 'error')\n    return\n  }\n\n  const globalCookies = [...workspaceCookies, ...documentCookies]\n\n  const { request: requestBuilder } = requestFactory({\n    defaultHeaders,\n    environment,\n    exampleName: exampleKey,\n    globalCookies,\n    method,\n    operation,\n    path,\n    proxyUrl,\n    server,\n    selectedSecuritySchemes,\n    isElectron: isElectron(),\n    requestBodyCompositionSelection,\n  })\n\n  // Stop any previous streaming response\n  if (response.value && 'reader' in response.value) {\n    response.value.reader.cancel()\n  }\n\n  const variablesStore = createVariablesStoreForRequest()\n\n  // Execute the beforeRequest hook (plugins receive RequestFactory, not fetch Request)\n  await executeHook(\n    {\n      requestBuilder,\n      document,\n      operation,\n      variablesStore,\n    },\n    'beforeRequest',\n    plugins,\n  )\n\n  const envVariables = {\n    ...getEnvironmentVariables(environment),\n    ...variablesStore.getVariables(),\n  }\n\n  // Build the fetch Request after hooks may have mutated the factory\n  const requestResult = (() => {\n    try {\n      return {\n        ok: true,\n        result: buildRequest(requestBuilder, {\n          envVariables,\n        }),\n      } as const\n    } catch (error) {\n      const message = error instanceof Error ? error.message : String(error)\n      return {\n        ok: false,\n        error: message,\n      } as const\n    }\n  })()\n\n  if (requestResult.ok === false) {\n    toast(requestResult.error, 'error')\n    return\n  }\n\n  // Store the abort controller for cancellation\n  abortController.value = requestResult.result.controller\n\n  // Execute the hooks\n  eventBus.emit('hooks:on:request:sent', {\n    meta: {\n      method,\n      path,\n      exampleKey,\n    },\n  })\n\n  /** Execute the request */\n  const [sendError, sendResult] = await sendRequest({\n    isUsingProxy: requestResult.result.isUsingProxy,\n    requestPayload: requestResult.result.requestPayload,\n    plugins,\n  })\n\n  if (sendResult) {\n    // Execute the responseReceived hook\n    await executeHook(\n      {\n        response: sendResult.originalResponse.clone(),\n        requestBuilder,\n        request: buildSafeBodyRequest(...sendResult.requestPayload),\n        document,\n        operation,\n        variablesStore,\n      },\n      'responseReceived',\n      plugins,\n    )\n  }\n\n  // Execute the hooks\n  eventBus.emit('hooks:on:request:complete', {\n    payload: sendResult\n      ? {\n          response: sendResult.originalResponse.clone(),\n          requestPayload: sendResult.requestPayload,\n          duration: sendResult.response.duration,\n          timestamp: sendResult.timestamp,\n        }\n      : undefined,\n    meta: {\n      method,\n      path,\n      exampleKey,\n    },\n  })\n\n  if (sendError) {\n    // clean up the response and request\n    response.value = null\n    requestPayload.value = null\n    abortController.value = null\n\n    toast(sendError.message, 'error')\n    return\n  }\n\n  // Store the response\n  response.value = sendResult.response\n  requestPayload.value = sendResult.requestPayload\n\n  // Cache non-streaming responses so they can be restored when navigating back\n  if (!isStreamingResponse(sendResult.response)) {\n    responseCache.set(getOperationExampleKey(method, path, exampleKey), {\n      response: sendResult.response,\n      requestPayload: sendResult.requestPayload,\n    })\n  }\n}\n\nonMounted(() => {\n  eventBus.on('operation:send:request:hotkey', handleExecute)\n  eventBus.on('operation:cancel:request', cancelRequest)\n})\nonBeforeUnmount(() => {\n  eventBus.off('operation:send:request:hotkey', handleExecute)\n  eventBus.off('operation:cancel:request', cancelRequest)\n})\n\nconst operationHistory = computed<History[]>(() =>\n  history\n    .map((entry) => ({\n      method: entry.request.method as HttpMethodType,\n      path: entry.request.url,\n      duration: entry.time,\n      status: entry.response.status,\n    }))\n    .reverse(),\n)\n\nconst handleSelectHistoryItem = ({ index }: { index: number }) => {\n  const transformedIndex = (history.length ?? 0) - index - 1\n  const historyItem = history[transformedIndex]\n  if (!historyItem) {\n    return\n  }\n\n  const navigate = () =>\n    eventBus.emit('ui:navigate', {\n      page: 'example',\n      method,\n      path,\n      exampleName: 'draft',\n      callback: (status) => {\n        // Do not replace the response if the navigation was not successful\n        if (status !== 'success') {\n          return\n        }\n        // Reconstruct the response\n        const fetchResponse = harToFetchResponse({\n          harResponse: historyItem.response,\n          url: historyItem.request.url,\n          method,\n          path,\n          duration: historyItem.time,\n        })\n\n        // Reconstruct the request\n        const fetchRequest = harToFetchRequest({\n          harRequest: historyItem.request,\n        })\n\n        // Update the response and request\n        response.value = fetchResponse\n        requestPayload.value = fetchRequest\n      },\n    })\n\n  eventBus.emit('operation:reload:history', {\n    meta: {\n      path,\n      method,\n    },\n    index: transformedIndex,\n    callback: navigate,\n  })\n}\n\n/**\n * When the path, method, or example key changes: save current response to\n * cache (so it can be restored when navigating back), then restore from cache\n * for the new operation or clear if no cached response. Response is only\n * cleared on page refresh or when making a new request for that operation.\n */\nwatch(\n  [() => path, () => method, () => exampleKey],\n  ([newPath, newMethod, newExampleKey]) => {\n    const newKey = getOperationExampleKey(newMethod, newPath, newExampleKey)\n    const cached = responseCache.get(newKey)\n    if (cached) {\n      response.value = cached.response\n      requestPayload.value = cached.requestPayload\n    } else {\n      response.value = null\n      requestPayload.value = null\n    }\n\n    // Cancel any in-flight request\n    cancelRequest()\n  },\n  { immediate: true },\n)\n\nonBeforeUnmount(() => {\n  // We cancel the request if the component is unmounted\n  cancelRequest()\n})\n</script>\n<template>\n  <div class=\"bg-b-1 flex h-full flex-col\">\n    <div\n      class=\"lg:min-h-header flex w-full flex-wrap items-center justify-center p-2 lg:p-0\">\n      <!-- Address Bar -->\n      <Header\n        :activeEnvironment\n        :documentUrl\n        :environment\n        :environments\n        :eventBus\n        :hideClientButton\n        :history=\"operationHistory\"\n        :integration\n        :layout\n        :method\n        :path\n        :server\n        :serverMeta\n        :servers\n        :source\n        @execute=\"handleExecute\"\n        @select:history:item=\"handleSelectHistoryItem\" />\n    </div>\n\n    <ViewLayout class=\"border-t\">\n      <ViewLayoutContent class=\"flex-1\">\n        <!-- Request Section -->\n        <RequestBlock\n          :authMeta\n          :clientOptions\n          :defaultHeaders\n          :documentCookies\n          :environment\n          :eventBus\n          :exampleKey\n          :layout\n          :method\n          :operation\n          :options=\"toValue(options)\"\n          :path\n          :plugins\n          :proxyUrl\n          :requestBodyCompositionSelection\n          :securityRequirements\n          :securitySchemes\n          :selectedClient\n          :selectedSecurity\n          :selectedSecuritySchemes\n          :server\n          :workspaceCookies />\n\n        <!-- Response Section -->\n        <ResponseBlock\n          :appVersion\n          :eventBus\n          :layout\n          :plugins\n          :requestPayload\n          :response\n          :totalPerformedRequests=\"operationHistory.length\" />\n      </ViewLayoutContent>\n    </ViewLayout>\n  </div>\n</template>\n"],"mappings":""}

package/dist/v2/blocks/operation-block/OperationBlock.vue.script.js

@@ -12,6 +12,7 @@ import Header_default from "./components/Header.vue.js";
 import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, onBeforeUnmount, onMounted, openBlock, ref, toValue, unref, watch, withCtx } from "vue";
 import { ERRORS } from "@scalar/helpers/errors/normalize-error";
 import { isElectron } from "@scalar/helpers/general/is-electron";
+import { buildSafeBodyRequest } from "@scalar/helpers/http/can-method-have-body";
 import { executeHook } from "@scalar/oas-utils/helpers";
 import { AVAILABLE_CLIENTS } from "@scalar/types/snippetz";
 import { useToasts } from "@scalar/use-toasts";
@@ -62,7 +63,7 @@ var OperationBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const { toast } = useToasts();
 		const abortController = ref(null);
 		const response = ref(null);
-		const request = ref(null);
+		const requestPayload = ref(null);
 		/** Cancel the request */
 		const cancelRequest = () => abortController.value?.abort(ERRORS.REQUEST_ABORTED);
 		/** Execute the current operation example */
@@ -124,12 +125,13 @@ var OperationBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			/** Execute the request */
 			const [sendError, sendResult] = await sendRequest({
 				isUsingProxy: requestResult.result.isUsingProxy,
-				request: requestResult.result.request
+				requestPayload: requestResult.result.requestPayload,
+				plugins: __props.plugins
 			});
 			if (sendResult) await executeHook({
 				response: sendResult.originalResponse.clone(),
 				requestBuilder,
-				request: sendResult.request.clone(),
+				request: buildSafeBodyRequest(...sendResult.requestPayload),
 				document: __props.document,
 				operation: __props.operation,
 				variablesStore
@@ -137,7 +139,7 @@ var OperationBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			__props.eventBus.emit("hooks:on:request:complete", {
 				payload: sendResult ? {
 					response: sendResult.originalResponse.clone(),
-					request: sendResult.request.clone(),
+					requestPayload: sendResult.requestPayload,
 					duration: sendResult.response.duration,
 					timestamp: sendResult.timestamp
 				} : void 0,
@@ -149,16 +151,16 @@ var OperationBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			});
 			if (sendError) {
 				response.value = null;
-				request.value = null;
+				requestPayload.value = null;
 				abortController.value = null;
 				toast(sendError.message, "error");
 				return;
 			}
 			response.value = sendResult.response;
-			request.value = sendResult.request;
+			requestPayload.value = sendResult.requestPayload;
 			if (!isStreamingResponse(sendResult.response)) responseCache.set(getOperationExampleKey(__props.method, __props.path, __props.exampleKey), {
 				response: sendResult.response,
-				request: sendResult.request
+				requestPayload: sendResult.requestPayload
 			});
 		};
 		onMounted(() => {
@@ -195,7 +197,7 @@ var OperationBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					});
 					const fetchRequest = harToFetchRequest({ harRequest: historyItem.request });
 					response.value = fetchResponse;
-					request.value = fetchRequest;
+					requestPayload.value = fetchRequest;
 				}
 			});
 			__props.eventBus.emit("operation:reload:history", {
@@ -222,10 +224,10 @@ var OperationBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			const cached = responseCache.get(newKey);
 			if (cached) {
 				response.value = cached.response;
-				request.value = cached.request;
+				requestPayload.value = cached.requestPayload;
 			} else {
 				response.value = null;
-				request.value = null;
+				requestPayload.value = null;
 			}
 			cancelRequest();
 		}, { immediate: true });
@@ -320,7 +322,7 @@ var OperationBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						eventBus: __props.eventBus,
 						layout: __props.layout,
 						plugins: __props.plugins,
-						request: request.value,
+						requestPayload: requestPayload.value,
 						response: response.value,
 						totalPerformedRequests: operationHistory.value.length
 					}, null, 8, [
@@ -328,7 +330,7 @@ var OperationBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						"eventBus",
 						"layout",
 						"plugins",
-						"request",
+						"requestPayload",
 						"response",
 						"totalPerformedRequests"
 					])]),