@scalar/api-client 3.2.2 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @scalar/api-client
 
+## 3.3.1
+
+### Patch Changes
+
+- [#8839](https://github.com/scalar/scalar/pull/8839): Fix modal fade-in animation stutter by replacing v-show with CSS visibility/opacity to avoid forced layout recalculation on open
+
+## 3.3.0
+
+### Minor Changes
+
+- [#8972](https://github.com/scalar/scalar/pull/8972): feat: implement the new workspace sidebar
+- [#8977](https://github.com/scalar/scalar/pull/8977): feat: add app header
+
+### Patch Changes
+
+- [#8978](https://github.com/scalar/scalar/pull/8978): fix: layout height collapse and improve menu behavior
+
 ## 3.2.2
 
 ### Patch Changes

package/dist/style.css

@@ -588,6 +588,7 @@
     --ease-in: cubic-bezier(.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, .2, 1);
     --ease-in-out: cubic-bezier(.4, 0, .2, 1);
+    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --tracking-tight: -.025em;
@@ -983,6 +984,10 @@
   .scalar-app .bg-b-1\.5 {
     background-color: color-mix(in srgb, var(--scalar-background-1), var(--scalar-background-2));
   }
+
+  .scalar-app .bg-sidebar-c-2\/15 {
+    background-color: color-mix(in oklab, var(--scalar-sidebar-color-2, var(--scalar-color-2)) 15%, transparent);
+  }
 }
 
 @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -1496,6 +1501,12 @@
   inherits: false
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
 .sidebar-heading-type[data-v-1857170e] {
   text-transform: uppercase;
   color: var(--method-color, var(--scalar-color-1));
@@ -2592,6 +2603,10 @@
   bottom: 0;
 }
 
+.group\/item:last-of-type > .group\/button > .group\/button-label > .group\/button-loading {
+  width: 66.6667%;
+}
+
 .group\/items.-translate-x-full .group\/button {
   transition-behavior: allow-discrete;
   max-height: 0;
@@ -2860,10 +2875,6 @@
   }
 }
 
-.scalar-app .invisible {
-  visibility: hidden;
-}
-
 .scalar-app .-inset-y-0\.5 {
   inset-block: -2px;
 }
@@ -3032,10 +3043,6 @@
   margin: -8px;
 }
 
-.scalar-app .-m-px {
-  margin: -1px;
-}
-
 .scalar-app .m-1 {
   margin: 4px;
 }
@@ -3064,6 +3071,10 @@
   margin-block: -8px;
 }
 
+.scalar-app .-my-px {
+  margin-block: -1px;
+}
+
 .scalar-app .my-0\.75 {
   margin-block: 3px;
 }
@@ -3378,6 +3389,10 @@
   scale: var(--tw-scale-x) var(--tw-scale-y);
 }
 
+.scalar-app .animate-pulse {
+  animation: var(--animate-pulse);
+}
+
 .scalar-app .appearance-none {
   appearance: none;
 }
@@ -3537,6 +3552,16 @@
   background-color: var(--scalar-sidebar-search-background, var(--scalar-background-2));
 }
 
+.scalar-app .bg-sidebar-c-2\/15 {
+  background-color: var(--scalar-sidebar-color-2, var(--scalar-color-2));
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .scalar-app .bg-sidebar-c-2\/15 {
+    background-color: color-mix(in oklab, var(--scalar-sidebar-color-2, var(--scalar-color-2)) 15%, transparent);
+  }
+}
+
 .scalar-app .bg-sidebar-indent-border {
   background-color: var(--scalar-sidebar-indent-border, var(--scalar-border-color));
 }
@@ -3620,12 +3645,12 @@
   mask-repeat: repeat;
 }
 
-.scalar-app .p-\(--scalar-sidebar-padding\) {
-  padding: var(--scalar-sidebar-padding);
+.scalar-app .px-1\.25 {
+  padding-inline: 5px;
 }
 
-.scalar-app .p-0\.25 {
-  padding: 1px;
+.scalar-app .px-3\.5 {
+  padding-inline: 14px;
 }
 
 .scalar-app .px-9 {
@@ -3687,11 +3712,6 @@
   font-weight: var(--scalar-sidebar-font-weight, var(--scalar-regular));
 }
 
-.scalar-app .font-sidebar-active {
-  --tw-font-weight: var(--scalar-sidebar-font-weight-active, var(--scalar-semibold));
-  font-weight: var(--scalar-sidebar-font-weight-active, var(--scalar-semibold));
-}
-
 .scalar-app .break-words, .scalar-app .wrap-break-word {
   overflow-wrap: break-word;
 }
@@ -3712,10 +3732,6 @@
   color: var(--scalar-tooltip-color);
 }
 
-.scalar-app .text-sidebar-c-1 {
-  color: var(--scalar-sidebar-color-1, var(--scalar-color-1));
-}
-
 .scalar-app .text-sidebar-c-active {
   color: var(--scalar-sidebar-color-active, var(--scalar-sidebar-color-1));
 }
@@ -4142,6 +4158,10 @@
   visibility: collapse;
 }
 
+.scalar-app .invisible {
+  visibility: hidden;
+}
+
 .scalar-app .visible {
   visibility: visible;
 }
@@ -4236,10 +4256,6 @@
   inset-inline-end: 4px;
 }
 
-.scalar-app .-top-0\.5 {
-  top: -2px;
-}
-
 .scalar-app .top-0 {
   top: 0;
 }
@@ -4260,10 +4276,6 @@
   top: calc(100% + 4px);
 }
 
-.scalar-app .-right-0\.5 {
-  right: -2px;
-}
-
 .scalar-app .-right-\[30px\] {
   right: -30px;
 }
@@ -4410,6 +4422,10 @@
   margin: -2px;
 }
 
+.scalar-app .-m-px {
+  margin: -1px;
+}
+
 .scalar-app .m-0 {
   margin: 0;
 }
@@ -4767,10 +4783,6 @@
   height: 500px;
 }
 
-.scalar-app .h-\[68px\] {
-  height: 68px;
-}
-
 .scalar-app .h-\[300px\] {
   height: 300px;
 }
@@ -4795,10 +4807,6 @@
   height: 100%;
 }
 
-.scalar-app .h-header {
-  height: 48px;
-}
-
 .scalar-app .h-min {
   height: min-content;
 }
@@ -4975,10 +4983,6 @@
   width: 288px;
 }
 
-.scalar-app .w-\[60px\] {
-  width: 60px;
-}
-
 .scalar-app .w-\[100px\] {
   width: 100px;
 }
@@ -5870,6 +5874,10 @@
   padding: 0 !important;
 }
 
+.scalar-app .p-\(--scalar-sidebar-padding\) {
+  padding: var(--scalar-sidebar-padding);
+}
+
 .scalar-app .p-0 {
   padding: 0;
 }
@@ -5914,6 +5922,10 @@
   padding: 16px;
 }
 
+.scalar-app .p-6 {
+  padding: 24px;
+}
+
 .scalar-app .p-\[3px\] {
   padding: 3px;
 }
@@ -5922,6 +5934,10 @@
   padding: 1px;
 }
 
+.scalar-app .px-\(--scalar-sidebar-padding\) {
+  padding-inline: var(--scalar-sidebar-padding);
+}
+
 .scalar-app .px-0 {
   padding-inline: 0;
 }
@@ -5942,10 +5958,6 @@
   padding-inline: 6px;
 }
 
-.scalar-app .px-1\.25 {
-  padding-inline: 5px;
-}
-
 .scalar-app .px-2 {
   padding-inline: 8px;
 }
@@ -5958,10 +5970,6 @@
   padding-inline: 12px;
 }
 
-.scalar-app .px-3\.5 {
-  padding-inline: 14px;
-}
-
 .scalar-app .px-4 {
   padding-inline: 16px;
 }
@@ -6126,6 +6134,10 @@
   padding-right: 26px;
 }
 
+.scalar-app .pb-1 {
+  padding-bottom: 4px;
+}
+
 .scalar-app .pb-1\.5 {
   padding-bottom: 6px;
 }
@@ -6345,6 +6357,11 @@
   font-weight: var(--scalar-regular);
 }
 
+.scalar-app .font-sidebar-active {
+  --tw-font-weight: var(--scalar-sidebar-font-weight-active, var(--scalar-semibold));
+  font-weight: var(--scalar-sidebar-font-weight-active, var(--scalar-semibold));
+}
+
 .scalar-app .tracking-tight {
   --tw-tracking: var(--tracking-tight);
   letter-spacing: var(--tracking-tight);
@@ -6467,6 +6484,10 @@
   color: var(--scalar-color-red);
 }
 
+.scalar-app .text-sidebar-c-1 {
+  color: var(--scalar-sidebar-color-1, var(--scalar-color-1));
+}
+
 .scalar-app .text-sidebar-c-2 {
   color: var(--scalar-sidebar-color-2, var(--scalar-color-2));
 }
@@ -6983,6 +7004,10 @@
   border-radius: var(--scalar-radius);
 }
 
+:is(.scalar-app .\*\:first\:flex-none > *):first-child {
+  flex: none;
+}
+
 :is(.scalar-app .\*\:first\:rounded-l > *):first-child {
   border-top-left-radius: var(--scalar-radius);
   border-bottom-left-radius: var(--scalar-radius);
@@ -7116,6 +7141,10 @@
     color: var(--scalar-color-red);
   }
 
+  .scalar-app .hover\:text-sidebar-c-1:hover {
+    color: var(--scalar-sidebar-color-1, var(--scalar-color-1));
+  }
+
   .scalar-app .hover\:underline:hover {
     text-decoration-line: underline;
   }
@@ -7270,19 +7299,6 @@
   }
 }
 
-@media (min-width: 600px) {
-  .scalar-app .sm\:not-sr-only {
-    clip-path: none;
-    white-space: normal;
-    width: auto;
-    height: auto;
-    margin: 0;
-    padding: 0;
-    position: static;
-    overflow: visible;
-  }
-}
-
 @media (min-width: 800px) {
   .scalar-app .md\:pointer-events-none {
     pointer-events: none;
@@ -7936,11 +7952,11 @@
   --scalar-address-bar-bg: var(--scalar-background-1);
 }
 
-.app-exit-button[data-v-bcbdc356] {
+.app-exit-button[data-v-1c2b0dae] {
   color: white;
   background: rgba(0, 0, 0, 0.1);
 }
-.app-exit-button[data-v-bcbdc356]:hover {
+.app-exit-button[data-v-1c2b0dae]:hover {
   background: rgba(255, 255, 255, 0.1);
 }
 
@@ -8352,77 +8368,33 @@ to {
   bottom: 0;
 }
 
-.download-app-button[data-v-9b609275] {
-  box-shadow: 0 0 0 0.5px var(--scalar-border-color);
-  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));
-}
-.dark-mode .download-app-button[data-v-9b609275] {
-  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.15));
-}
-.download-app-button[data-v-9b609275]:hover {
-  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));
-}
-.dark-mode .download-app-button[data-v-9b609275]:hover {
-  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.1));
+.ref-search-meta[data-v-a00657cc] {
+  background: var(--scalar-background-1);
+  border-bottom-left-radius: var(--scalar-radius-lg);
+  border-bottom-right-radius: var(--scalar-radius-lg);
+  padding: 6px 12px;
+  font-size: var(--scalar-font-size-4);
+  color: var(--scalar-color-3);
+  font-weight: var(--scalar-semibold);
+  display: flex;
+  gap: 12px;
+  border-top: var(--scalar-border-width) solid var(--scalar-border-color);
 }
 
-.empty-sidebar-item-content[data-v-8269f62b] {
-  display: none;
-}
-.empty-sidebar-item .empty-sidebar-item-content[data-v-8269f62b] {
-  display: block;
-}
-.rabbitjump[data-v-8269f62b] {
-  opacity: 0;
-}
-.empty-sidebar-item:hover .rabbitjump[data-v-8269f62b] {
-  opacity: 1;
-  animation: rabbitAnimation-8269f62b 0.5s steps(1) infinite;
-}
-.empty-sidebar-item:hover .rabbitsit[data-v-8269f62b] {
-  opacity: 0;
-  animation: rabbitAnimation2-8269f62b 0.5s steps(1) infinite;
-}
-.empty-sidebar-item:hover .rabbit-ascii[data-v-8269f62b] {
-  animation: rabbitRun-8269f62b 8s infinite linear;
-}
-@keyframes rabbitRun-8269f62b {
-0% {
-    transform: translate3d(0, 0, 0);
-}
-25% {
-    transform: translate3d(250px, 0, 0);
-}
-25.01% {
-    transform: translate3d(-250px, 0, 0);
-}
-75% {
-    transform: translate3d(250px, 0, 0);
-}
-75.01% {
-    transform: translate3d(-250px, 0, 0);
-}
-100% {
-    transform: translate3d(0, 0, 0);
-}
+/*
+ * Gentle pulse for the registry loading skeletons. Matches the existing
+ * `LoadingSkeleton.vue` easing/duration used in `@scalar/api-reference` so
+ * any skeleton in the app feels consistent.
+ */
+.sidebar-skeleton-row > span[data-v-e803152c] {
+  animation: sidebar-skeleton-pulse-e803152c 1.5s infinite alternate;
 }
-@keyframes rabbitAnimation-8269f62b {
-0%,
-  100% {
+@keyframes sidebar-skeleton-pulse-e803152c {
+from {
     opacity: 1;
 }
-50% {
-    opacity: 0;
-}
-}
-@keyframes rabbitAnimation2-8269f62b {
-0%,
-  100% {
-    opacity: 0;
-}
-50% {
-    opacity: 1;
-    transform: translate3d(0, -8px, 0);
+to {
+    opacity: 0.33;
 }
 }
 
@@ -8923,7 +8895,7 @@ to {
   background-color: var(--scalar-background-danger);
 }
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
-.scalar .scalar-app-layout[data-v-6118685a] {
+.scalar .scalar-app-layout[data-v-ae5e8531] {
   background: var(--scalar-background-1);
   border: var(--scalar-border-width) solid var(--scalar-border-color);
   border-radius: 8px;
@@ -8935,12 +8907,12 @@ to {
   overflow: hidden;
 }
 @media (max-width: 720px) and (max-height: 480px) {
-.scalar .scalar-app-layout[data-v-6118685a] {
+.scalar .scalar-app-layout[data-v-ae5e8531] {
     height: 100%;
     max-height: 90svh;
 }
 }
-.scalar .scalar-app-exit[data-v-6118685a] {
+.scalar .scalar-app-exit[data-v-ae5e8531] {
   cursor: pointer;
   z-index: -1;
   background: #00000038;
@@ -8950,10 +8922,10 @@ to {
   top: 0;
   left: 0;
 }
-.dark-mode .scalar .scalar-app-exit[data-v-6118685a] {
+.dark-mode .scalar .scalar-app-exit[data-v-ae5e8531] {
   background: #00000073;
 }
-.scalar .scalar-app-exit[data-v-6118685a]:before {
+.scalar .scalar-app-exit[data-v-ae5e8531]:before {
   text-align: center;
   color: #fff;
   opacity: .6;
@@ -8965,15 +8937,19 @@ to {
   top: 0;
   right: 12px;
 }
-.scalar .scalar-app-exit[data-v-6118685a]:hover:before {
+.scalar .scalar-app-exit[data-v-ae5e8531]:hover:before {
   opacity: 1;
 }
-.scalar-container[data-v-6118685a] {
-  visibility: visible;
+.scalar-container[data-v-ae5e8531] {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  will-change: opacity;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
+  transition: opacity .35s, visibility 0s linear .35s;
   display: flex;
   position: fixed;
   top: 0;
@@ -8981,18 +8957,18 @@ to {
   left: 0;
   overflow: hidden;
 }
-.scalar .url-form-input[data-v-6118685a] {
+.scalar-container.scalar-client--open[data-v-ae5e8531] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: opacity .35s;
+}
+.scalar .url-form-input[data-v-ae5e8531] {
   min-height: auto !important;
 }
-.scalar .scalar-container[data-v-6118685a] {
+.scalar .scalar-container[data-v-ae5e8531] {
   line-height: normal;
 }
-.scalar-client-fade-enter-active[data-v-6118685a], .scalar-client-fade-leave-active[data-v-6118685a] {
-  transition: opacity .35s;
-}
-.scalar-client-fade-enter-from[data-v-6118685a], .scalar-client-fade-leave-to[data-v-6118685a] {
-  opacity: 0;
-}
 
 .document-scripts-editors__container[data-v-8c8fa790] {
   min-height: 300px;

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 { 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    customFetch: toValue(options)?.customFetch,\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":""}
+{"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    customFetch: toValue(options)?.customFetch,\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\nconst handleNavigateSettings = () => {\n  eventBus.emit('ui:navigate', {\n    page: 'operation',\n    path: 'overview',\n    operationPath: path,\n    method,\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        @navigate:settings=\"handleNavigateSettings\"\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

@@ -210,6 +210,14 @@ var OperationBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				callback: navigate
 			});
 		};
+		const handleNavigateSettings = () => {
+			__props.eventBus.emit("ui:navigate", {
+				page: "operation",
+				path: "overview",
+				operationPath: __props.path,
+				method: __props.method
+			});
+		};
 		/**
 		* When the path, method, or example key changes: save current response to
 		* cache (so it can be restored when navigating back), then restore from cache
@@ -253,6 +261,7 @@ var OperationBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				servers: __props.servers,
 				source: __props.source,
 				onExecute: handleExecute,
+				"onNavigate:settings": handleNavigateSettings,
 				"onSelect:history:item": handleSelectHistoryItem
 			}, null, 8, [
 				"activeEnvironment",