@scalar/api-reference 1.49.3 → 1.49.5

package/dist/features/Operation/components/callbacks/Callbacks.vue.script.js

@@ -0,0 +1,67 @@
+import Callback_default from "./Callback.vue.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, openBlock, renderList } from "vue";
+import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+import { isHttpMethod } from "@scalar/helpers/http/is-http-method";
+import { objectEntries } from "@scalar/helpers/object/object-entries";
+//#region src/features/Operation/components/callbacks/Callbacks.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	"aria-label": "Callbacks",
+	class: "callbacks-list gap-3",
+	role: "group"
+};
+/** Extract the callbacks with method, url, and name */
+var Callbacks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Callbacks",
+	props: {
+		path: {},
+		callbacks: {},
+		eventBus: {},
+		options: {}
+	},
+	setup(__props) {
+		const flattenedCallbacks = computed(() => {
+			const _callbacks = [];
+			objectEntries(__props.callbacks).forEach(([name, pathItem]) => {
+				objectEntries(getResolvedRef(pathItem)).forEach(([url, methods]) => {
+					if (typeof methods !== "object" || !methods) return;
+					objectEntries(methods).forEach(([callbackMethod, callback]) => {
+						if (!isHttpMethod(callbackMethod)) return;
+						_callbacks.push({
+							name,
+							url,
+							method: callbackMethod,
+							callback
+						});
+					});
+				});
+			});
+			return _callbacks;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [_cache[0] || (_cache[0] = createElementVNode("div", { class: "callbacks-title text-c-1 my-3 text-lg font-medium" }, " Callbacks ", -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(flattenedCallbacks.value, ({ callback, method, name, url }) => {
+				return openBlock(), createBlock(Callback_default, {
+					key: `${name}-${url}-${method}`,
+					callback,
+					eventBus: __props.eventBus,
+					method,
+					name,
+					options: __props.options,
+					path: __props.path,
+					url
+				}, null, 8, [
+					"callback",
+					"eventBus",
+					"method",
+					"name",
+					"options",
+					"path",
+					"url"
+				]);
+			}), 128))]);
+		};
+	}
+});
+//#endregion
+export { Callbacks_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Callbacks.vue.script.js.map

package/dist/features/Operation/components/callbacks/Callbacks.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callbacks.vue.script.js","names":[],"sources":["../../../../../src/features/Operation/components/callbacks/Callbacks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { isHttpMethod } from '@scalar/helpers/http/is-http-method'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  CallbackObject,\n  OperationObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\n\nimport Callback from './Callback.vue'\n\nconst { path, callbacks, options } = defineProps<{\n  path: string\n  callbacks: CallbackObject\n  eventBus: WorkspaceEventBus | null\n  options: Pick<\n    OperationProps['options'],\n    'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'\n  >\n}>()\n\ntype CallbackType = {\n  name: string\n  url: string\n  method: HttpMethod\n  callback: OperationObject\n}\n\n/** Extract the callbacks with method, url, and name */\nconst flattenedCallbacks = computed<CallbackType[]>(() => {\n  const _callbacks: CallbackType[] = []\n\n  // Loop over the name level\n  objectEntries(callbacks).forEach(([name, pathItem]) => {\n    // Loop over the url level\n    objectEntries(getResolvedRef(pathItem)).forEach(([url, methods]) => {\n      if (typeof methods !== 'object' || !methods) {\n        return\n      }\n\n      // Loop over the method level\n      objectEntries(methods).forEach(([callbackMethod, callback]) => {\n        if (!isHttpMethod(callbackMethod)) {\n          return\n        }\n\n        _callbacks.push({\n          name,\n          url,\n          method: callbackMethod,\n          callback: callback,\n        })\n      })\n    })\n  })\n\n  return _callbacks\n})\n</script>\n\n<template>\n  <div\n    aria-label=\"Callbacks\"\n    class=\"callbacks-list gap-3\"\n    role=\"group\">\n    <div class=\"callbacks-title text-c-1 my-3 text-lg font-medium\">\n      Callbacks\n    </div>\n    <Callback\n      v-for=\"{ callback, method, name, url } in flattenedCallbacks\"\n      :key=\"`${name}-${url}-${method}`\"\n      :callback\n      :eventBus\n      :method\n      :name\n      :options\n      :path\n      :url />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAkCA,MAAM,qBAAqB,eAA+B;GACxD,MAAM,aAA6B,EAAC;AAGpC,iBAAc,QAAA,UAAU,CAAC,SAAS,CAAC,MAAM,cAAc;AAErD,kBAAc,eAAe,SAAS,CAAC,CAAC,SAAS,CAAC,KAAK,aAAa;AAClE,SAAI,OAAO,YAAY,YAAY,CAAC,QAClC;AAIF,mBAAc,QAAQ,CAAC,SAAS,CAAC,gBAAgB,cAAc;AAC7D,UAAI,CAAC,aAAa,eAAe,CAC/B;AAGF,iBAAW,KAAK;OACd;OACA;OACA,QAAQ;OACE;OACX,CAAA;OACF;MACF;KACF;AAED,UAAO;IACR;;uBAIC,mBAiBM,OAjBN,YAiBM,CAAA,OAAA,OAAA,OAAA,KAbJ,mBAEM,OAAA,EAFD,OAAM,qDAAmD,EAAC,eAE/D,GAAA,IAAA,UAAA,KAAA,EACA,mBASS,UAAA,MAAA,WARmC,mBAAA,QAAkB,EAAnD,UAAU,QAAQ,MAAM,UAAG;wBADtC,YASS,kBAAA;KAPN,KAAG,GAAK,KAAI,GAAI,IAAG,GAAI;KACvB;KACA,UAAA,QAAA;KACA;KACA;KACA,SAAA,QAAA;KACA,MAAA,QAAA;KACA"}

package/dist/features/Operation/helpers/filter-selected-security.js

@@ -0,0 +1,30 @@
+import { getSelectedSecurity } from "@scalar/api-client/v2/features/operation";
+import { getSecuritySchemes } from "@scalar/api-client/v2/blocks/operation-block";
+//#region src/features/Operation/helpers/filter-selected-security.ts
+/** Builds a quick cache key from the sorted object keys */
+var getKey = (requirement) => Object.keys(requirement).sort().join(",");
+/**
+* Find the intersection between which security is selected on the document and what this operation requires
+*
+* If there is no overlap, we return the first requirement
+*/
+var filterSelectedSecurity = (document, operation, selectedSecurityDocument, selectedSecurityOperation, securitySchemes = {}) => {
+	const securityRequirements = operation?.security ?? document.security ?? [];
+	/** The selected security keys for the document */
+	const selectedSecurity = getSelectedSecurity(selectedSecurityDocument, selectedSecurityOperation, securityRequirements);
+	/** Build a set for O(1) lookup */
+	const requirementSet = new Set(securityRequirements.map((r) => getKey(r)));
+	const selectedRequirement = selectedSecurity.selectedSchemes[selectedSecurity.selectedIndex];
+	if (selectedRequirement && requirementSet.has(getKey(selectedRequirement))) return getSecuritySchemes(securitySchemes, [selectedRequirement]);
+	for (const selected of selectedSecurity.selectedSchemes) if (requirementSet.has(getKey(selected))) return getSecuritySchemes(securitySchemes, [selected]);
+	/**
+	* If we are selected security on the document,
+	* we should show the first requirement of the operation to show auth is required
+	*/
+	if (operation?.security?.length) return getSecuritySchemes(securitySchemes, securityRequirements.slice(0, 1));
+	return [];
+};
+//#endregion
+export { filterSelectedSecurity };
+
+//# sourceMappingURL=filter-selected-security.js.map

package/dist/features/Operation/helpers/filter-selected-security.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-selected-security.js","names":[],"sources":["../../../../src/features/Operation/helpers/filter-selected-security.ts"],"sourcesContent":["import { getSecuritySchemes } from '@scalar/api-client/v2/blocks/operation-block'\nimport type {\n  MergedSecuritySchemes,\n  SecuritySchemeObjectSecret,\n} from '@scalar/api-client/v2/blocks/scalar-auth-selector-block'\nimport { getSelectedSecurity } from '@scalar/api-client/v2/features/operation'\nimport type { SelectedSecurity } from '@scalar/workspace-store/entities/auth'\nimport type {\n  OpenApiDocument,\n  OperationObject,\n  SecurityRequirementObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\n/** Builds a quick cache key from the sorted object keys */\nconst getKey = (requirement: SecurityRequirementObject) => Object.keys(requirement).sort().join(',')\n\n/**\n * Find the intersection between which security is selected on the document and what this operation requires\n *\n * If there is no overlap, we return the first requirement\n */\nexport const filterSelectedSecurity = (\n  document: OpenApiDocument,\n  operation: OperationObject | null,\n  selectedSecurityDocument?: SelectedSecurity,\n  selectedSecurityOperation?: SelectedSecurity,\n  securitySchemes: MergedSecuritySchemes = {},\n): SecuritySchemeObjectSecret[] => {\n  const securityRequirements = operation?.security ?? document.security ?? []\n\n  /** The selected security keys for the document */\n  const selectedSecurity = getSelectedSecurity(\n    selectedSecurityDocument,\n    selectedSecurityOperation,\n    securityRequirements,\n  )\n\n  /** Build a set for O(1) lookup */\n  const requirementSet = new Set(securityRequirements.map((r) => getKey(r)))\n\n  // Lets check the selectedIndex first\n  const selectedRequirement = selectedSecurity.selectedSchemes[selectedSecurity.selectedIndex]\n  if (selectedRequirement && requirementSet.has(getKey(selectedRequirement))) {\n    return getSecuritySchemes(securitySchemes, [selectedRequirement])\n  }\n\n  // Otherwise lets loop over all selected\n  for (const selected of selectedSecurity.selectedSchemes) {\n    if (requirementSet.has(getKey(selected))) {\n      return getSecuritySchemes(securitySchemes, [selected])\n    }\n  }\n\n  /**\n   * If we are selected security on the document,\n   * we should show the first requirement of the operation to show auth is required\n   */\n  if (operation?.security?.length) {\n    return getSecuritySchemes(securitySchemes, securityRequirements.slice(0, 1))\n  }\n\n  return []\n}\n"],"mappings":";;;;AAcA,IAAM,UAAU,gBAA2C,OAAO,KAAK,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI;;;;;;AAOpG,IAAa,0BACX,UACA,WACA,0BACA,2BACA,kBAAyC,EAAE,KACV;CACjC,MAAM,uBAAuB,WAAW,YAAY,SAAS,YAAY,EAAE;;CAG3E,MAAM,mBAAmB,oBACvB,0BACA,2BACA,qBACD;;CAGD,MAAM,iBAAiB,IAAI,IAAI,qBAAqB,KAAK,MAAM,OAAO,EAAE,CAAC,CAAC;CAG1E,MAAM,sBAAsB,iBAAiB,gBAAgB,iBAAiB;AAC9E,KAAI,uBAAuB,eAAe,IAAI,OAAO,oBAAoB,CAAC,CACxE,QAAO,mBAAmB,iBAAiB,CAAC,oBAAoB,CAAC;AAInE,MAAK,MAAM,YAAY,iBAAiB,gBACtC,KAAI,eAAe,IAAI,OAAO,SAAS,CAAC,CACtC,QAAO,mBAAmB,iBAAiB,CAAC,SAAS,CAAC;;;;;AAQ1D,KAAI,WAAW,UAAU,OACvB,QAAO,mBAAmB,iBAAiB,qBAAqB,MAAM,GAAG,EAAE,CAAC;AAG9E,QAAO,EAAE"}

package/dist/features/Operation/helpers/get-first-server.js

@@ -0,0 +1,27 @@
+import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+//#region src/features/Operation/helpers/get-first-server.ts
+/**
+* Iterate through all available servers and pick the first one
+*
+* @example
+* getFirstServer([operation.servers, pathItem.servers, server])
+*/
+var getFirstServer = (...availableServers) => {
+	for (const serverSource of availableServers) {
+		if (!serverSource) continue;
+		if (!Array.isArray(serverSource)) {
+			const resolvedServer = getResolvedRef(serverSource);
+			if (resolvedServer?.url) return resolvedServer;
+			continue;
+		}
+		for (const server of serverSource) {
+			const resolvedServer = getResolvedRef(server);
+			if (resolvedServer?.url) return resolvedServer;
+		}
+	}
+	return null;
+};
+//#endregion
+export { getFirstServer };
+
+//# sourceMappingURL=get-first-server.js.map

package/dist/features/Operation/helpers/get-first-server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-first-server.js","names":[],"sources":["../../../../src/features/Operation/helpers/get-first-server.ts"],"sourcesContent":["import { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\n/**\n * Iterate through all available servers and pick the first one\n *\n * @example\n * getFirstServer([operation.servers, pathItem.servers, server])\n */\nexport const getFirstServer = (...availableServers: (ServerObject[] | ServerObject | null)[]): ServerObject | null => {\n  for (const serverSource of availableServers) {\n    if (!serverSource) {\n      continue\n    }\n\n    // Handle single server object\n    if (!Array.isArray(serverSource)) {\n      const resolvedServer = getResolvedRef(serverSource) as ServerObject\n      if (resolvedServer?.url) {\n        return resolvedServer\n      }\n      continue\n    }\n\n    // Handle array of servers, pick the first one with a URL\n    for (const server of serverSource) {\n      const resolvedServer = getResolvedRef(server) as ServerObject\n      if (resolvedServer?.url) {\n        return resolvedServer\n      }\n    }\n  }\n\n  return null\n}\n"],"mappings":";;;;;;;;AASA,IAAa,kBAAkB,GAAG,qBAAoF;AACpH,MAAK,MAAM,gBAAgB,kBAAkB;AAC3C,MAAI,CAAC,aACH;AAIF,MAAI,CAAC,MAAM,QAAQ,aAAa,EAAE;GAChC,MAAM,iBAAiB,eAAe,aAAa;AACnD,OAAI,gBAAgB,IAClB,QAAO;AAET;;AAIF,OAAK,MAAM,UAAU,cAAc;GACjC,MAAM,iBAAiB,eAAe,OAAO;AAC7C,OAAI,gBAAgB,IAClB,QAAO;;;AAKb,QAAO"}

package/dist/features/Operation/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Operation } from './Operation.vue';
+export { default as Operation } from './Operation.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/features/Operation/layouts/ClassicLayout.vue.d.ts

@@ -1,6 +1,6 @@
 import type { SecuritySchemeObjectSecret } from '@scalar/api-client/v2/blocks/scalar-auth-selector-block';
 import type { OperationObject, ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
-import type { OperationProps } from '../../../features/Operation/Operation.vue';
+import type { OperationProps } from '../../../features/Operation/Operation.vue.js';
 type __VLS_Props = Omit<OperationProps, 'document' | 'pathValue' | 'server' | 'securitySchemes' | 'authStore'> & {
     /** Operation object with path params */
     operation: OperationObject;

package/dist/features/Operation/layouts/ClassicLayout.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClassicLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/layouts/ClassicLayout.vue"],"names":[],"mappings":"AAifA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yDAAyD,CAAA;AAkBzG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAcrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAMxE,KAAK,WAAW,GAAG,IAAI,CACnB,cAAc,EACd,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,iBAAiB,GAAG,WAAW,CACtE,GAAG;IACF,wCAAwC;IACxC,SAAS,EAAE,eAAe,CAAA;IAC1B,4CAA4C;IAC5C,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,sDAAsD;IACtD,uBAAuB,EAAE,0BAA0B,EAAE,CAAA;CACtD,CAAC;AAqmBJ,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ClassicLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/layouts/ClassicLayout.vue"],"names":[],"mappings":"AA2gBA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yDAAyD,CAAA;AAkBzG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAcrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAUxE,KAAK,WAAW,GAAG,IAAI,CACnB,cAAc,EACd,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,iBAAiB,GAAG,WAAW,CACtE,GAAG;IACF,wCAAwC;IACxC,SAAS,EAAE,eAAe,CAAA;IAC1B,4CAA4C;IAC5C,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,sDAAsD;IACtD,uBAAuB,EAAE,0BAA0B,EAAE,CAAA;CACtD,CAAC;AAooBJ,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/Operation/layouts/ClassicLayout.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import ClassicLayout_vue_vue_type_script_setup_true_lang_default from "./ClassicLayout.vue.script.js";
+/* empty css                            */
+//#region src/features/Operation/layouts/ClassicLayout.vue
+var ClassicLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ClassicLayout_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-29d6b17f"]]);
+//#endregion
+export { ClassicLayout_default as default };
+
+//# sourceMappingURL=ClassicLayout.vue.js.map

package/dist/features/Operation/layouts/ClassicLayout.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicLayout.vue.js","names":[],"sources":["../../../../src/features/Operation/layouts/ClassicLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/v2/blocks/operation-code-sample'\nimport type { SecuritySchemeObjectSecret } from '@scalar/api-client/v2/blocks/scalar-auth-selector-block'\nimport {\n  ScalarErrorBoundary,\n  ScalarIconButton,\n  ScalarMarkdown,\n} from '@scalar/components'\nimport {\n  ScalarIconCopy,\n  ScalarIconPlay,\n  ScalarIconWebhooksLogo,\n} from '@scalar/icons'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@scalar/oas-utils/helpers'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport { SectionAccordion } from '@/components/Section'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n  REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n  type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n  clientOptions,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n} = defineProps<\n  Omit<\n    OperationProps,\n    'document' | 'pathValue' | 'server' | 'securitySchemes' | 'authStore'\n  > & {\n    /** Operation object with path params */\n    operation: OperationObject\n    /** The selected server for the operation */\n    selectedServer: ServerObject | null\n    /** The selected security schemes for the operation */\n    selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n  }\n>()\n\nconst operationTitle = computed(() => operation.summary || path || '')\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Track the currently selected example for passing to the modal */\nconst selectedExampleKey = ref<string>('')\n\n/** Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample */\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n  (): RequestBodyCompositionSelection => ({\n    ...requestBodyCompositionSelection.value,\n  }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n  JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n\nconst { copyToClipboard } = useClipboard()\n</script>\n<template>\n  <SectionAccordion\n    :id=\"id\"\n    :aria-label=\"operationTitle\"\n    class=\"reference-endpoint\"\n    :modelValue=\"!isCollapsed\"\n    transparent\n    @update:modelValue=\"\n      (value) => eventBus?.emit('toggle:nav-item', { id, open: value })\n    \">\n    <template #title>\n      <div class=\"operation-title\">\n        <div class=\"operation-details\">\n          <HttpMethod\n            class=\"endpoint-type\"\n            :method=\"method\"\n            short />\n          <Anchor\n            class=\"endpoint-anchor\"\n            @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n            <h3 class=\"endpoint-label\">\n              <div class=\"endpoint-label-path\">\n                <OperationPath\n                  :deprecated=\"isOperationDeprecated(operation)\"\n                  :path=\"path\" />\n              </div>\n              <div class=\"endpoint-label-name\">\n                {{ operationTitle }}\n              </div>\n              <!-- Stability badge -->\n              <Badge\n                v-if=\"getOperationStability(operation)\"\n                class=\"capitalize\"\n                :class=\"getOperationStabilityColor(operation)\">\n                {{ getOperationStability(operation) }}\n              </Badge>\n\n              <!-- Webhook badge -->\n              <Badge\n                v-if=\"isWebhook\"\n                class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n                <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n              </Badge>\n\n              <!-- x-badges before -->\n              <XBadges\n                :badges=\"operation['x-badges']\"\n                position=\"before\" />\n            </h3>\n          </Anchor>\n        </div>\n      </div>\n    </template>\n    <template #actions=\"{ active }\">\n      <!-- x-badges after -->\n      <XBadges\n        :badges=\"operation['x-badges']\"\n        position=\"after\" />\n      <template v-if=\"!options.hideTestRequestButton\">\n        <TestRequestButton\n          v-if=\"active && !isWebhook\"\n          :id\n          :eventBus\n          :exampleName=\"selectedExampleKey\"\n          :method\n          :path\n          :requestBodyCompositionSelection=\"\n            requestBodyCompositionSelectionForCodeSample\n          \" />\n        <ScalarIconPlay\n          v-else\n          class=\"endpoint-try-hint size-4.5\" />\n      </template>\n      <span\n        v-if=\"options.showOperationId && operation.operationId\"\n        class=\"font-code text-sm\">\n        {{ operation.operationId }}\n      </span>\n      <ScalarIconButton\n        class=\"endpoint-copy p-0.5\"\n        :icon=\"ScalarIconCopy\"\n        label=\"Copy endpoint URL\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click.stop=\"copyToClipboard(path)\" />\n    </template>\n    <template\n      v-if=\"operation.description\"\n      #description>\n      <ScalarMarkdown\n        :anchorPrefix=\"id\"\n        aria-label=\"Operation Description\"\n        role=\"group\"\n        transformType=\"heading\"\n        :value=\"operation.description\"\n        withAnchors\n        withImages />\n    </template>\n    <div class=\"endpoint-content\">\n      <div class=\"operation-details-card\">\n        <div\n          v-if=\"Object.keys(operationExtensions).length > 0\"\n          class=\"operation-details-card-item\">\n          <SpecificationExtension :value=\"operationExtensions\" />\n        </div>\n        <div class=\"operation-details-card-item\">\n          <OperationParameters\n            :eventBus\n            :options\n            :parameters=\"operation.parameters\"\n            :requestBody=\"getResolvedRef(operation.requestBody)\" />\n        </div>\n        <div class=\"operation-details-card-item\">\n          <OperationResponses\n            :eventBus\n            :options\n            :responses=\"operation.responses\" />\n        </div>\n\n        <!-- Callbacks -->\n        <div\n          v-if=\"operation?.callbacks\"\n          class=\"operation-details-card-item\">\n          <Callbacks\n            :callbacks=\"operation.callbacks\"\n            :eventBus\n            :options\n            :path />\n        </div>\n      </div>\n\n      <ExampleResponses\n        v-if=\"operation.responses\"\n        class=\"operation-example-card\"\n        :responses=\"operation.responses\" />\n\n      <!-- New Example Request -->\n      <div>\n        <!-- External Docs -->\n        <LinkList v-if=\"operation.externalDocs\">\n          <ExternalDocs :value=\"operation.externalDocs\" />\n        </LinkList>\n        <!-- Request Example -->\n        <ScalarErrorBoundary>\n          <OperationCodeSample\n            v-model:selectedExample=\"selectedExampleKey\"\n            :key=\"requestBodyCompositionSelectionKey\"\n            class=\"operation-example-card\"\n            :clientOptions\n            :eventBus\n            fallback\n            :isWebhook\n            :method\n            :operation\n            :path\n            :requestBodyCompositionSelection=\"\n              requestBodyCompositionSelectionForCodeSample\n            \"\n            :securitySchemes=\"selectedSecuritySchemes\"\n            :selectedClient\n            :selectedServer />\n        </ScalarErrorBoundary>\n      </div>\n    </div>\n  </SectionAccordion>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.operation-title {\n  display: flex;\n  justify-content: space-between;\n}\n.operation-details {\n  display: flex;\n  align-items: center;\n  margin-top: 0;\n  gap: 9px;\n\n  min-width: 0;\n  flex-shrink: 1;\n}\n.operation-details :deep(.endpoint-anchor .scalar-button svg) {\n  width: 16px;\n  height: 16px;\n}\n.endpoint-type {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n\n  position: relative;\n  z-index: 0;\n\n  width: 60px;\n  padding: 6px;\n  flex-shrink: 0;\n\n  font-size: var(--scalar-small);\n\n  text-transform: uppercase;\n  font-weight: var(--scalar-bold);\n  font-family: var(--scalar-font);\n}\n.endpoint-type::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n\n  background: currentColor;\n  opacity: 0.15;\n\n  border-radius: var(--scalar-radius);\n}\n\n.endpoint-anchor {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  flex-shrink: 1;\n}\n.endpoint-anchor.label {\n  display: flex;\n}\n.endpoint-label {\n  display: flex;\n  align-items: baseline;\n  gap: 9px;\n\n  min-width: 0;\n  flex-shrink: 1;\n\n  color: var(--scalar-color-1);\n}\n\n.endpoint-label-path {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-mini);\n\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.endpoint-label-path :deep(em) {\n  color: var(--scalar-color-2);\n}\n.endpoint-label-name {\n  color: var(--scalar-color-2);\n  font-size: var(--scalar-small);\n\n  /* Concatenate the name before we shrink the path */\n  flex-shrink: 1000000000;\n\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.endpoint-try-hint {\n  padding: 2px;\n  flex-shrink: 0;\n}\n.endpoint-copy {\n  color: currentColor;\n}\n.endpoint-copy :deep(svg) {\n  stroke-width: 2px;\n}\n\n.endpoint-content {\n  display: grid;\n  grid-auto-columns: 1fr;\n  grid-auto-flow: row;\n  gap: 9px;\n  padding: 9px;\n}\n\n@variant lg {\n  .endpoint-content {\n    grid-auto-flow: column;\n  }\n}\n\n@container (max-width: 900px) {\n  .endpoint-content {\n    grid-template-columns: 1fr;\n  }\n}\n\n.endpoint-content > * {\n  min-width: 0;\n}\n\n.operation-details-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-width: 0;\n}\n.operation-details-card-item :deep(.parameter-list),\n.operation-details-card-item :deep(.callbacks-list) {\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg);\n  margin-top: 0;\n}\n\n.operation-details-card-item {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.operation-details-card-item :deep(.parameter-list-items) {\n  margin-bottom: 0;\n}\n.operation-details-card :deep(.parameter-item:last-of-type .parameter-schema) {\n  padding-bottom: 12px;\n}\n.operation-details-card :deep(.parameter-list .parameter-list) {\n  margin-bottom: 12px;\n}\n.operation-details-card :deep(.parameter-item) {\n  margin: 0;\n  padding: 0;\n}\n.operation-details-card :deep(.property) {\n  padding: 9px;\n  margin: 0;\n}\n.operation-details-card :deep(.parameter-list-title),\n.operation-details-card :deep(.request-body-title),\n.operation-details-card :deep(.callbacks-title) {\n  text-transform: uppercase;\n  font-weight: var(--scalar-bold);\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n  line-height: 1.33;\n  padding: 9px;\n  margin: 0;\n}\n\n.operation-details-card :deep(.callback-list-item-title) {\n  padding-left: 28px;\n  padding-right: 12px;\n}\n\n.operation-details-card :deep(.callback-list-item-icon) {\n  left: 6px;\n}\n\n.operation-details-card :deep(.callback-operation-container) {\n  padding-inline: 9px;\n  padding-bottom: 9px;\n}\n\n.operation-details-card :deep(.callback-operation-container > .request-body),\n.operation-details-card :deep(.callback-operation-container > .parameter-list) {\n  border: none;\n}\n\n.operation-details-card\n  :deep(.callback-operation-container > .request-body > .request-body-header) {\n  padding: 0;\n  padding-bottom: 9px;\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.operation-details-card :deep(.request-body-description) {\n  margin-top: 0;\n  padding: 9px 9px 0 9px;\n  border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.operation-details-card :deep(.request-body) {\n  margin-top: 0;\n  border-radius: var(--scalar-radius-lg);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n.operation-details-card\n  :deep(.request-body .schema-card--level-0 > .schema-card-description) {\n  padding-inline: 9px;\n}\n\n.operation-details-card :deep(.request-body-header) {\n  padding-bottom: 0;\n  border-bottom: 0;\n}\n\n.operation-details-card :deep(.contents button) {\n  margin-right: 9px;\n}\n\n.operation-details-card\n  :deep(.schema-card--open + .schema-card:not(.schema-card--open)) {\n  margin-inline: 9px;\n  margin-bottom: 9px;\n}\n.operation-details-card :deep(.request-body-schema .property--level-0) {\n  padding: 0;\n}\n.operation-details-card :deep(.request-body-schema .property--level-0) {\n  padding: 0;\n}\n\n.operation-details-card :deep(.selected-content-type) {\n  margin-right: 9px;\n}\n\n.operation-example-card {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n  max-height: calc(var(--refs-viewport-height) - 48px);\n}\n\n@media (max-width: 600px) {\n  .operation-example-card {\n    max-height: unset;\n    position: static;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/features/Operation/layouts/ClassicLayout.vue.script.js

@@ -0,0 +1,254 @@
+import Badge_default from "../../../components/Badge/Badge.vue.js";
+import SectionAccordion_default from "../../../components/Section/SectionAccordion.vue.js";
+import Anchor_default from "../../../components/Anchor/Anchor.vue.js";
+import { getXKeysFromObject } from "../../specification-extension/helpers.js";
+import SpecificationExtension_default from "../../specification-extension/SpecificationExtension.vue.js";
+import LinkList_default from "../../../components/LinkList/LinkList.vue.js";
+import ExternalDocs_default from "../../external-docs/ExternalDocs.vue.js";
+import { REQUEST_BODY_COMPOSITION_INDEX_SYMBOL } from "../request-body-composition-index.js";
+import HttpMethod_default from "../../../components/HttpMethod/HttpMethod.vue.js";
+import OperationPath_default from "../../../components/OperationPath.vue.js";
+import ExampleResponses_default from "../../example-responses/ExampleResponses.vue.js";
+import OperationParameters_default from "../components/OperationParameters.vue.js";
+import OperationResponses_default from "../components/OperationResponses.vue.js";
+import Callbacks_default from "../components/callbacks/Callbacks.vue.js";
+import TestRequestButton_default from "../../test-request-button/TestRequestButton.vue.js";
+import XBadges_default from "../../x-badges/XBadges.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, provide, ref, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { ScalarErrorBoundary, ScalarIconButton, ScalarMarkdown } from "@scalar/components";
+import { useClipboard } from "@scalar/use-hooks/useClipboard";
+import { ScalarIconCopy, ScalarIconPlay, ScalarIconWebhooksLogo } from "@scalar/icons";
+import { getOperationStability, getOperationStabilityColor, isOperationDeprecated } from "@scalar/oas-utils/helpers";
+import { OperationCodeSample } from "@scalar/api-client/v2/blocks/operation-code-sample";
+import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+//#region src/features/Operation/layouts/ClassicLayout.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "operation-title" };
+var _hoisted_2 = { class: "operation-details" };
+var _hoisted_3 = { class: "endpoint-label" };
+var _hoisted_4 = { class: "endpoint-label-path" };
+var _hoisted_5 = { class: "endpoint-label-name" };
+var _hoisted_6 = {
+	key: 1,
+	class: "font-code text-sm"
+};
+var _hoisted_7 = { class: "endpoint-content" };
+var _hoisted_8 = { class: "operation-details-card" };
+var _hoisted_9 = {
+	key: 0,
+	class: "operation-details-card-item"
+};
+var _hoisted_10 = { class: "operation-details-card-item" };
+var _hoisted_11 = { class: "operation-details-card-item" };
+var _hoisted_12 = {
+	key: 1,
+	class: "operation-details-card-item"
+};
+var ClassicLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ClassicLayout",
+	props: {
+		id: {},
+		method: {},
+		options: {},
+		path: {},
+		clientOptions: {},
+		isCollapsed: { type: Boolean },
+		isWebhook: { type: Boolean },
+		selectedClient: {},
+		eventBus: {},
+		operation: {},
+		selectedServer: {},
+		selectedSecuritySchemes: {}
+	},
+	setup(__props) {
+		const operationTitle = computed(() => __props.operation.summary || __props.path || "");
+		const operationExtensions = computed(() => getXKeysFromObject(__props.operation));
+		/** Track the currently selected example for passing to the modal */
+		const selectedExampleKey = ref("");
+		/** Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample */
+		const requestBodyCompositionSelection = ref({});
+		const requestBodyCompositionSelectionForCodeSample = computed(() => ({ ...requestBodyCompositionSelection.value }));
+		const requestBodyCompositionSelectionKey = computed(() => JSON.stringify(requestBodyCompositionSelectionForCodeSample.value));
+		provide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection);
+		const { copyToClipboard } = useClipboard();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SectionAccordion_default), {
+				id: __props.id,
+				"aria-label": operationTitle.value,
+				class: "reference-endpoint",
+				modelValue: !__props.isCollapsed,
+				transparent: "",
+				"onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => __props.eventBus?.emit("toggle:nav-item", {
+					id: __props.id,
+					open: value
+				}))
+			}, createSlots({
+				title: withCtx(() => [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(unref(HttpMethod_default), {
+					class: "endpoint-type",
+					method: __props.method,
+					short: ""
+				}, null, 8, ["method"]), createVNode(unref(Anchor_default), {
+					class: "endpoint-anchor",
+					onCopyAnchorUrl: _cache[0] || (_cache[0] = () => __props.eventBus?.emit("copy-url:nav-item", { id: __props.id }))
+				}, {
+					default: withCtx(() => [createElementVNode("h3", _hoisted_3, [
+						createElementVNode("div", _hoisted_4, [createVNode(OperationPath_default, {
+							deprecated: unref(isOperationDeprecated)(__props.operation),
+							path: __props.path
+						}, null, 8, ["deprecated", "path"])]),
+						createElementVNode("div", _hoisted_5, toDisplayString(operationTitle.value), 1),
+						unref(getOperationStability)(__props.operation) ? (openBlock(), createBlock(unref(Badge_default), {
+							key: 0,
+							class: normalizeClass(["capitalize", unref(getOperationStabilityColor)(__props.operation)])
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(unref(getOperationStability)(__props.operation)), 1)]),
+							_: 1
+						}, 8, ["class"])) : createCommentVNode("", true),
+						__props.isWebhook ? (openBlock(), createBlock(unref(Badge_default), {
+							key: 1,
+							class: "font-code text-green flex w-fit items-center justify-center gap-1"
+						}, {
+							default: withCtx(() => [createVNode(unref(ScalarIconWebhooksLogo), { weight: "bold" }), _cache[4] || (_cache[4] = createTextVNode("Webhook ", -1))]),
+							_: 1
+						})) : createCommentVNode("", true),
+						createVNode(unref(XBadges_default), {
+							badges: __props.operation["x-badges"],
+							position: "before"
+						}, null, 8, ["badges"])
+					])]),
+					_: 1
+				})])])]),
+				actions: withCtx(({ active }) => [
+					createVNode(unref(XBadges_default), {
+						badges: __props.operation["x-badges"],
+						position: "after"
+					}, null, 8, ["badges"]),
+					!__props.options.hideTestRequestButton ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [active && !__props.isWebhook ? (openBlock(), createBlock(unref(TestRequestButton_default), {
+						key: 0,
+						id: __props.id,
+						eventBus: __props.eventBus,
+						exampleName: selectedExampleKey.value,
+						method: __props.method,
+						path: __props.path,
+						requestBodyCompositionSelection: requestBodyCompositionSelectionForCodeSample.value
+					}, null, 8, [
+						"id",
+						"eventBus",
+						"exampleName",
+						"method",
+						"path",
+						"requestBodyCompositionSelection"
+					])) : (openBlock(), createBlock(unref(ScalarIconPlay), {
+						key: 1,
+						class: "endpoint-try-hint size-4.5"
+					}))], 64)) : createCommentVNode("", true),
+					__props.options.showOperationId && __props.operation.operationId ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.operation.operationId), 1)) : createCommentVNode("", true),
+					createVNode(unref(ScalarIconButton), {
+						class: "endpoint-copy p-0.5",
+						icon: unref(ScalarIconCopy),
+						label: "Copy endpoint URL",
+						size: "xs",
+						variant: "ghost",
+						onClick: _cache[1] || (_cache[1] = withModifiers(($event) => unref(copyToClipboard)(__props.path), ["stop"]))
+					}, null, 8, ["icon"])
+				]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_7, [
+					createElementVNode("div", _hoisted_8, [
+						Object.keys(operationExtensions.value).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_9, [createVNode(SpecificationExtension_default, { value: operationExtensions.value }, null, 8, ["value"])])) : createCommentVNode("", true),
+						createElementVNode("div", _hoisted_10, [createVNode(OperationParameters_default, {
+							eventBus: __props.eventBus,
+							options: __props.options,
+							parameters: __props.operation.parameters,
+							requestBody: unref(getResolvedRef)(__props.operation.requestBody)
+						}, null, 8, [
+							"eventBus",
+							"options",
+							"parameters",
+							"requestBody"
+						])]),
+						createElementVNode("div", _hoisted_11, [createVNode(OperationResponses_default, {
+							eventBus: __props.eventBus,
+							options: __props.options,
+							responses: __props.operation.responses
+						}, null, 8, [
+							"eventBus",
+							"options",
+							"responses"
+						])]),
+						__props.operation?.callbacks ? (openBlock(), createElementBlock("div", _hoisted_12, [createVNode(Callbacks_default, {
+							callbacks: __props.operation.callbacks,
+							eventBus: __props.eventBus,
+							options: __props.options,
+							path: __props.path
+						}, null, 8, [
+							"callbacks",
+							"eventBus",
+							"options",
+							"path"
+						])])) : createCommentVNode("", true)
+					]),
+					__props.operation.responses ? (openBlock(), createBlock(unref(ExampleResponses_default), {
+						key: 0,
+						class: "operation-example-card",
+						responses: __props.operation.responses
+					}, null, 8, ["responses"])) : createCommentVNode("", true),
+					createElementVNode("div", null, [__props.operation.externalDocs ? (openBlock(), createBlock(unref(LinkList_default), { key: 0 }, {
+						default: withCtx(() => [createVNode(unref(ExternalDocs_default), { value: __props.operation.externalDocs }, null, 8, ["value"])]),
+						_: 1
+					})) : createCommentVNode("", true), createVNode(unref(ScalarErrorBoundary), null, {
+						default: withCtx(() => [(openBlock(), createBlock(unref(OperationCodeSample), {
+							selectedExample: selectedExampleKey.value,
+							"onUpdate:selectedExample": _cache[2] || (_cache[2] = ($event) => selectedExampleKey.value = $event),
+							key: requestBodyCompositionSelectionKey.value,
+							class: "operation-example-card",
+							clientOptions: __props.clientOptions,
+							eventBus: __props.eventBus,
+							fallback: "",
+							isWebhook: __props.isWebhook,
+							method: __props.method,
+							operation: __props.operation,
+							path: __props.path,
+							requestBodyCompositionSelection: requestBodyCompositionSelectionForCodeSample.value,
+							securitySchemes: __props.selectedSecuritySchemes,
+							selectedClient: __props.selectedClient,
+							selectedServer: __props.selectedServer
+						}, null, 8, [
+							"selectedExample",
+							"clientOptions",
+							"eventBus",
+							"isWebhook",
+							"method",
+							"operation",
+							"path",
+							"requestBodyCompositionSelection",
+							"securitySchemes",
+							"selectedClient",
+							"selectedServer"
+						]))]),
+						_: 1
+					})])
+				])]),
+				_: 2
+			}, [__props.operation.description ? {
+				name: "description",
+				fn: withCtx(() => [createVNode(unref(ScalarMarkdown), {
+					anchorPrefix: __props.id,
+					"aria-label": "Operation Description",
+					role: "group",
+					transformType: "heading",
+					value: __props.operation.description,
+					withAnchors: "",
+					withImages: ""
+				}, null, 8, ["anchorPrefix", "value"])]),
+				key: "0"
+			} : void 0]), 1032, [
+				"id",
+				"aria-label",
+				"modelValue"
+			]);
+		};
+	}
+});
+//#endregion
+export { ClassicLayout_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ClassicLayout.vue.script.js.map

package/dist/features/Operation/layouts/ClassicLayout.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicLayout.vue.script.js","names":[],"sources":["../../../../src/features/Operation/layouts/ClassicLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/v2/blocks/operation-code-sample'\nimport type { SecuritySchemeObjectSecret } from '@scalar/api-client/v2/blocks/scalar-auth-selector-block'\nimport {\n  ScalarErrorBoundary,\n  ScalarIconButton,\n  ScalarMarkdown,\n} from '@scalar/components'\nimport {\n  ScalarIconCopy,\n  ScalarIconPlay,\n  ScalarIconWebhooksLogo,\n} from '@scalar/icons'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@scalar/oas-utils/helpers'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport { SectionAccordion } from '@/components/Section'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n  REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n  type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n  clientOptions,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n} = defineProps<\n  Omit<\n    OperationProps,\n    'document' | 'pathValue' | 'server' | 'securitySchemes' | 'authStore'\n  > & {\n    /** Operation object with path params */\n    operation: OperationObject\n    /** The selected server for the operation */\n    selectedServer: ServerObject | null\n    /** The selected security schemes for the operation */\n    selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n  }\n>()\n\nconst operationTitle = computed(() => operation.summary || path || '')\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Track the currently selected example for passing to the modal */\nconst selectedExampleKey = ref<string>('')\n\n/** Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample */\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n  (): RequestBodyCompositionSelection => ({\n    ...requestBodyCompositionSelection.value,\n  }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n  JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n\nconst { copyToClipboard } = useClipboard()\n</script>\n<template>\n  <SectionAccordion\n    :id=\"id\"\n    :aria-label=\"operationTitle\"\n    class=\"reference-endpoint\"\n    :modelValue=\"!isCollapsed\"\n    transparent\n    @update:modelValue=\"\n      (value) => eventBus?.emit('toggle:nav-item', { id, open: value })\n    \">\n    <template #title>\n      <div class=\"operation-title\">\n        <div class=\"operation-details\">\n          <HttpMethod\n            class=\"endpoint-type\"\n            :method=\"method\"\n            short />\n          <Anchor\n            class=\"endpoint-anchor\"\n            @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n            <h3 class=\"endpoint-label\">\n              <div class=\"endpoint-label-path\">\n                <OperationPath\n                  :deprecated=\"isOperationDeprecated(operation)\"\n                  :path=\"path\" />\n              </div>\n              <div class=\"endpoint-label-name\">\n                {{ operationTitle }}\n              </div>\n              <!-- Stability badge -->\n              <Badge\n                v-if=\"getOperationStability(operation)\"\n                class=\"capitalize\"\n                :class=\"getOperationStabilityColor(operation)\">\n                {{ getOperationStability(operation) }}\n              </Badge>\n\n              <!-- Webhook badge -->\n              <Badge\n                v-if=\"isWebhook\"\n                class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n                <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n              </Badge>\n\n              <!-- x-badges before -->\n              <XBadges\n                :badges=\"operation['x-badges']\"\n                position=\"before\" />\n            </h3>\n          </Anchor>\n        </div>\n      </div>\n    </template>\n    <template #actions=\"{ active }\">\n      <!-- x-badges after -->\n      <XBadges\n        :badges=\"operation['x-badges']\"\n        position=\"after\" />\n      <template v-if=\"!options.hideTestRequestButton\">\n        <TestRequestButton\n          v-if=\"active && !isWebhook\"\n          :id\n          :eventBus\n          :exampleName=\"selectedExampleKey\"\n          :method\n          :path\n          :requestBodyCompositionSelection=\"\n            requestBodyCompositionSelectionForCodeSample\n          \" />\n        <ScalarIconPlay\n          v-else\n          class=\"endpoint-try-hint size-4.5\" />\n      </template>\n      <span\n        v-if=\"options.showOperationId && operation.operationId\"\n        class=\"font-code text-sm\">\n        {{ operation.operationId }}\n      </span>\n      <ScalarIconButton\n        class=\"endpoint-copy p-0.5\"\n        :icon=\"ScalarIconCopy\"\n        label=\"Copy endpoint URL\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click.stop=\"copyToClipboard(path)\" />\n    </template>\n    <template\n      v-if=\"operation.description\"\n      #description>\n      <ScalarMarkdown\n        :anchorPrefix=\"id\"\n        aria-label=\"Operation Description\"\n        role=\"group\"\n        transformType=\"heading\"\n        :value=\"operation.description\"\n        withAnchors\n        withImages />\n    </template>\n    <div class=\"endpoint-content\">\n      <div class=\"operation-details-card\">\n        <div\n          v-if=\"Object.keys(operationExtensions).length > 0\"\n          class=\"operation-details-card-item\">\n          <SpecificationExtension :value=\"operationExtensions\" />\n        </div>\n        <div class=\"operation-details-card-item\">\n          <OperationParameters\n            :eventBus\n            :options\n            :parameters=\"operation.parameters\"\n            :requestBody=\"getResolvedRef(operation.requestBody)\" />\n        </div>\n        <div class=\"operation-details-card-item\">\n          <OperationResponses\n            :eventBus\n            :options\n            :responses=\"operation.responses\" />\n        </div>\n\n        <!-- Callbacks -->\n        <div\n          v-if=\"operation?.callbacks\"\n          class=\"operation-details-card-item\">\n          <Callbacks\n            :callbacks=\"operation.callbacks\"\n            :eventBus\n            :options\n            :path />\n        </div>\n      </div>\n\n      <ExampleResponses\n        v-if=\"operation.responses\"\n        class=\"operation-example-card\"\n        :responses=\"operation.responses\" />\n\n      <!-- New Example Request -->\n      <div>\n        <!-- External Docs -->\n        <LinkList v-if=\"operation.externalDocs\">\n          <ExternalDocs :value=\"operation.externalDocs\" />\n        </LinkList>\n        <!-- Request Example -->\n        <ScalarErrorBoundary>\n          <OperationCodeSample\n            v-model:selectedExample=\"selectedExampleKey\"\n            :key=\"requestBodyCompositionSelectionKey\"\n            class=\"operation-example-card\"\n            :clientOptions\n            :eventBus\n            fallback\n            :isWebhook\n            :method\n            :operation\n            :path\n            :requestBodyCompositionSelection=\"\n              requestBodyCompositionSelectionForCodeSample\n            \"\n            :securitySchemes=\"selectedSecuritySchemes\"\n            :selectedClient\n            :selectedServer />\n        </ScalarErrorBoundary>\n      </div>\n    </div>\n  </SectionAccordion>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.operation-title {\n  display: flex;\n  justify-content: space-between;\n}\n.operation-details {\n  display: flex;\n  align-items: center;\n  margin-top: 0;\n  gap: 9px;\n\n  min-width: 0;\n  flex-shrink: 1;\n}\n.operation-details :deep(.endpoint-anchor .scalar-button svg) {\n  width: 16px;\n  height: 16px;\n}\n.endpoint-type {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n\n  position: relative;\n  z-index: 0;\n\n  width: 60px;\n  padding: 6px;\n  flex-shrink: 0;\n\n  font-size: var(--scalar-small);\n\n  text-transform: uppercase;\n  font-weight: var(--scalar-bold);\n  font-family: var(--scalar-font);\n}\n.endpoint-type::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n\n  background: currentColor;\n  opacity: 0.15;\n\n  border-radius: var(--scalar-radius);\n}\n\n.endpoint-anchor {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  flex-shrink: 1;\n}\n.endpoint-anchor.label {\n  display: flex;\n}\n.endpoint-label {\n  display: flex;\n  align-items: baseline;\n  gap: 9px;\n\n  min-width: 0;\n  flex-shrink: 1;\n\n  color: var(--scalar-color-1);\n}\n\n.endpoint-label-path {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-mini);\n\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.endpoint-label-path :deep(em) {\n  color: var(--scalar-color-2);\n}\n.endpoint-label-name {\n  color: var(--scalar-color-2);\n  font-size: var(--scalar-small);\n\n  /* Concatenate the name before we shrink the path */\n  flex-shrink: 1000000000;\n\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.endpoint-try-hint {\n  padding: 2px;\n  flex-shrink: 0;\n}\n.endpoint-copy {\n  color: currentColor;\n}\n.endpoint-copy :deep(svg) {\n  stroke-width: 2px;\n}\n\n.endpoint-content {\n  display: grid;\n  grid-auto-columns: 1fr;\n  grid-auto-flow: row;\n  gap: 9px;\n  padding: 9px;\n}\n\n@variant lg {\n  .endpoint-content {\n    grid-auto-flow: column;\n  }\n}\n\n@container (max-width: 900px) {\n  .endpoint-content {\n    grid-template-columns: 1fr;\n  }\n}\n\n.endpoint-content > * {\n  min-width: 0;\n}\n\n.operation-details-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-width: 0;\n}\n.operation-details-card-item :deep(.parameter-list),\n.operation-details-card-item :deep(.callbacks-list) {\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg);\n  margin-top: 0;\n}\n\n.operation-details-card-item {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.operation-details-card-item :deep(.parameter-list-items) {\n  margin-bottom: 0;\n}\n.operation-details-card :deep(.parameter-item:last-of-type .parameter-schema) {\n  padding-bottom: 12px;\n}\n.operation-details-card :deep(.parameter-list .parameter-list) {\n  margin-bottom: 12px;\n}\n.operation-details-card :deep(.parameter-item) {\n  margin: 0;\n  padding: 0;\n}\n.operation-details-card :deep(.property) {\n  padding: 9px;\n  margin: 0;\n}\n.operation-details-card :deep(.parameter-list-title),\n.operation-details-card :deep(.request-body-title),\n.operation-details-card :deep(.callbacks-title) {\n  text-transform: uppercase;\n  font-weight: var(--scalar-bold);\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n  line-height: 1.33;\n  padding: 9px;\n  margin: 0;\n}\n\n.operation-details-card :deep(.callback-list-item-title) {\n  padding-left: 28px;\n  padding-right: 12px;\n}\n\n.operation-details-card :deep(.callback-list-item-icon) {\n  left: 6px;\n}\n\n.operation-details-card :deep(.callback-operation-container) {\n  padding-inline: 9px;\n  padding-bottom: 9px;\n}\n\n.operation-details-card :deep(.callback-operation-container > .request-body),\n.operation-details-card :deep(.callback-operation-container > .parameter-list) {\n  border: none;\n}\n\n.operation-details-card\n  :deep(.callback-operation-container > .request-body > .request-body-header) {\n  padding: 0;\n  padding-bottom: 9px;\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.operation-details-card :deep(.request-body-description) {\n  margin-top: 0;\n  padding: 9px 9px 0 9px;\n  border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.operation-details-card :deep(.request-body) {\n  margin-top: 0;\n  border-radius: var(--scalar-radius-lg);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n.operation-details-card\n  :deep(.request-body .schema-card--level-0 > .schema-card-description) {\n  padding-inline: 9px;\n}\n\n.operation-details-card :deep(.request-body-header) {\n  padding-bottom: 0;\n  border-bottom: 0;\n}\n\n.operation-details-card :deep(.contents button) {\n  margin-right: 9px;\n}\n\n.operation-details-card\n  :deep(.schema-card--open + .schema-card:not(.schema-card--open)) {\n  margin-inline: 9px;\n  margin-bottom: 9px;\n}\n.operation-details-card :deep(.request-body-schema .property--level-0) {\n  padding: 0;\n}\n.operation-details-card :deep(.request-body-schema .property--level-0) {\n  padding: 0;\n}\n\n.operation-details-card :deep(.selected-content-type) {\n  margin-right: 9px;\n}\n\n.operation-example-card {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n  max-height: calc(var(--refs-viewport-height) - 48px);\n}\n\n@media (max-width: 600px) {\n  .operation-example-card {\n    max-height: unset;\n    position: static;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/features/Operation/layouts/ModernLayout.vue.d.ts

@@ -1,6 +1,6 @@
 import type { SecuritySchemeObjectSecret } from '@scalar/api-client/v2/blocks/scalar-auth-selector-block';
 import type { OperationObject, ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
-import type { OperationProps } from '../../../features/Operation/Operation.vue';
+import type { OperationProps } from '../../../features/Operation/Operation.vue.js';
 type __VLS_Props = Omit<OperationProps, 'document' | 'pathValue' | 'server' | 'isCollapsed' | 'securitySchemes' | 'authStore'> & {
     /** Operation object with path params */
     operation: OperationObject;

package/dist/features/Operation/layouts/ModernLayout.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModernLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"names":[],"mappings":"AAgQA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yDAAyD,CAAA;AASzG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAqBrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAMxE,KAAK,WAAW,GAAG,IAAI,CACnB,cAAc,EACZ,UAAU,GACV,WAAW,GACX,QAAQ,GACR,aAAa,GACb,iBAAiB,GACjB,WAAW,CACd,GAAG;IACF,wCAAwC;IACxC,SAAS,EAAE,eAAe,CAAA;IAC1B,4CAA4C;IAC5C,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,sDAAsD;IACtD,uBAAuB,EAAE,0BAA0B,EAAE,CAAA;CACtD,CAAC;AAmjBJ,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ModernLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"names":[],"mappings":"AA0RA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yDAAyD,CAAA;AASzG,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAqBrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAUxE,KAAK,WAAW,GAAG,IAAI,CACnB,cAAc,EACZ,UAAU,GACV,WAAW,GACX,QAAQ,GACR,aAAa,GACb,iBAAiB,GACjB,WAAW,CACd,GAAG;IACF,wCAAwC;IACxC,SAAS,EAAE,eAAe,CAAA;IAC1B,4CAA4C;IAC5C,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,sDAAsD;IACtD,uBAAuB,EAAE,0BAA0B,EAAE,CAAA;CACtD,CAAC;AAklBJ,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/Operation/layouts/ModernLayout.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import ModernLayout_vue_vue_type_script_setup_true_lang_default from "./ModernLayout.vue.script.js";
+/* empty css                           */
+//#region src/features/Operation/layouts/ModernLayout.vue
+var ModernLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ModernLayout_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9c51b5c5"]]);
+//#endregion
+export { ModernLayout_default as default };
+
+//# sourceMappingURL=ModernLayout.vue.js.map

package/dist/features/Operation/layouts/ModernLayout.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModernLayout.vue.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/v2/blocks/operation-code-sample'\nimport type { SecuritySchemeObjectSecret } from '@scalar/api-client/v2/blocks/scalar-auth-selector-block'\nimport { ScalarErrorBoundary, ScalarMarkdown } from '@scalar/components'\nimport { ScalarIconWebhooksLogo } from '@scalar/icons'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@scalar/oas-utils/helpers'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref, useId } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport AskAgentButton from '@/features/ask-agent-button/AskAgentButton.vue'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n  REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n  type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n  clientOptions,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n} = defineProps<\n  Omit<\n    OperationProps,\n    | 'document'\n    | 'pathValue'\n    | 'server'\n    | 'isCollapsed'\n    | 'securitySchemes'\n    | 'authStore'\n  > & {\n    /** Operation object with path params */\n    operation: OperationObject\n    /** The selected server for the operation */\n    selectedServer: ServerObject | null\n    /** The selected security schemes for the operation */\n    selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n  }\n>()\n\nconst operationTitle = computed(() => operation.summary || path || '')\n\nconst labelId = useId()\n\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample */\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n  (): RequestBodyCompositionSelection => ({\n    ...requestBodyCompositionSelection.value,\n  }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n  JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n</script>\n\n<template>\n  <Section\n    :id=\"id\"\n    :aria-labelledby=\"labelId\"\n    :label=\"operationTitle\"\n    tabindex=\"-1\"\n    @intersecting=\"() => eventBus?.emit('intersecting:nav-item', { id })\">\n    <SectionContent>\n      <div class=\"flex flex-row justify-between gap-1\">\n        <!-- Left -->\n        <div class=\"flex gap-1\">\n          <!-- Operation ID -->\n          <Badge v-if=\"options?.showOperationId && operation.operationId\">\n            {{ operation.operationId }}\n          </Badge>\n          <!-- Stability badge -->\n          <Badge\n            v-if=\"getOperationStability(operation)\"\n            class=\"capitalize\"\n            :class=\"getOperationStabilityColor(operation)\">\n            {{ getOperationStability(operation) }}\n          </Badge>\n          <!-- Webhook badge -->\n          <Badge\n            v-if=\"isWebhook\"\n            class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n            <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n          </Badge>\n          <!-- x-badges before -->\n          <XBadges\n            :badges=\"operation['x-badges']\"\n            position=\"before\" />\n        </div>\n        <!-- Right -->\n        <div class=\"flex gap-1\">\n          <!-- x-badges after -->\n          <XBadges\n            :badges=\"operation['x-badges']\"\n            position=\"after\" />\n        </div>\n      </div>\n      <div :class=\"isOperationDeprecated(operation) ? 'deprecated' : ''\">\n        <SectionHeader>\n          <Anchor\n            @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n            <SectionHeaderTag\n              :id=\"labelId\"\n              :level=\"3\">\n              {{ operationTitle }}\n            </SectionHeaderTag>\n          </Anchor>\n        </SectionHeader>\n      </div>\n      <SectionColumns>\n        <SectionColumn>\n          <div class=\"operation-details\">\n            <SpecificationExtension :value=\"operationExtensions\" />\n            <ScalarMarkdown\n              :anchorPrefix=\"id\"\n              aria-label=\"Operation Description\"\n              role=\"group\"\n              transformType=\"heading\"\n              :value=\"operation.description\"\n              withAnchors\n              withImages />\n            <OperationParameters\n              :breadcrumb=\"[id]\"\n              :eventBus\n              :options\n              :parameters=\"operation.parameters\"\n              :requestBody=\"getResolvedRef(operation.requestBody)\" />\n            <OperationResponses\n              :breadcrumb=\"[id]\"\n              :collapsableItems=\"!options.expandAllResponses\"\n              :eventBus\n              :options\n              :responses=\"operation.responses\" />\n\n            <!-- Callbacks -->\n            <ScalarErrorBoundary>\n              <Callbacks\n                v-if=\"operation.callbacks\"\n                :callbacks=\"operation.callbacks\"\n                class=\"mt-6\"\n                :eventBus\n                :options\n                :path />\n            </ScalarErrorBoundary>\n          </div>\n        </SectionColumn>\n        <SectionColumn>\n          <div class=\"examples\">\n            <!-- External Docs -->\n            <LinkList v-if=\"operation.externalDocs\">\n              <ExternalDocs :value=\"operation.externalDocs\" />\n            </LinkList>\n\n            <!-- New Example Request -->\n            <ScalarErrorBoundary>\n              <OperationCodeSample\n                :key=\"requestBodyCompositionSelectionKey\"\n                :clientOptions\n                :eventBus\n                fallback\n                :isWebhook\n                :method\n                :operation\n                :path\n                :requestBodyCompositionSelection=\"\n                  requestBodyCompositionSelectionForCodeSample\n                \"\n                :securitySchemes=\"selectedSecuritySchemes\"\n                :selectedClient\n                :selectedServer>\n                <template #header>\n                  <OperationPath\n                    class=\"font-code text-c-2 [&_em]:text-c-1 [&_em]:not-italic\"\n                    :deprecated=\"operation?.deprecated\"\n                    :path=\"path\" />\n                </template>\n                <template\n                  v-if=\"!isWebhook\"\n                  #footer=\"{ exampleName }\">\n                  <div class=\"flex\">\n                    <AskAgentButton />\n                    <TestRequestButton\n                      v-if=\"!options.hideTestRequestButton\"\n                      :id\n                      :eventBus\n                      :exampleName\n                      :method\n                      :path\n                      :requestBodyCompositionSelection=\"\n                        requestBodyCompositionSelectionForCodeSample\n                      \" />\n                  </div>\n                </template>\n              </OperationCodeSample>\n            </ScalarErrorBoundary>\n\n            <ScalarErrorBoundary>\n              <ExampleResponses\n                v-if=\"operation.responses\"\n                :responses=\"operation.responses\"\n                style=\"margin-top: 12px\" />\n            </ScalarErrorBoundary>\n          </div>\n        </SectionColumn>\n      </SectionColumns>\n    </SectionContent>\n  </Section>\n</template>\n\n<style scoped>\n.examples {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n.examples > * {\n  max-height: calc((var(--refs-viewport-height) - 60px) / 2);\n  position: relative;\n}\n\n.examples > *:first-of-type:last-of-type {\n  max-height: calc((var(--refs-viewport-height) - 60px));\n}\n\n/*\n * Don't constrain card height on mobile\n * (or zoomed in screens)\n */\n@media (max-width: 600px) {\n  .examples > * {\n    max-height: unset;\n  }\n}\n.deprecated * {\n  text-decoration: line-through;\n}\n</style>\n"],"mappings":""}