@scalar/api-reference 1.62.9 → 1.64.0

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

@@ -8,6 +8,8 @@ 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 { getRequiredScopeGroups } from "../helpers/get-required-security.js";
+import OperationScopes_default from "../components/OperationScopes.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";
@@ -41,12 +43,16 @@ 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 = {
+var _hoisted_10 = {
 	key: 1,
 	class: "operation-details-card-item"
 };
+var _hoisted_11 = { class: "operation-details-card-item" };
+var _hoisted_12 = { class: "operation-details-card-item" };
+var _hoisted_13 = {
+	key: 2,
+	class: "operation-details-card-item"
+};
 var ClassicLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ClassicLayout",
 	props: {
@@ -70,6 +76,8 @@ var ClassicLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const { translate } = useLocalization();
 		const operationTitle = computed(() => __props.operation.summary || __props.path || "");
 		const operationExtensions = computed(() => getXKeysFromObject(__props.operation));
+		/** Whether the operation requires any OAuth scopes, used to skip the empty card item. */
+		const hasRequiredScopes = computed(() => getRequiredScopeGroups(__props.requiredSecurity).length > 0);
 		/** Track the selected request body content type so the code sample stays in sync */
 		const selectedRequestBodyContentType = ref();
 		/**
@@ -175,7 +183,8 @@ var ClassicLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				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, {
+						hasRequiredScopes.value ? (openBlock(), createElementBlock("div", _hoisted_10, [createVNode(OperationScopes_default, { requiredSecurity: __props.requiredSecurity }, null, 8, ["requiredSecurity"])])) : createCommentVNode("", true),
+						createElementVNode("div", _hoisted_11, [createVNode(OperationParameters_default, {
 							selectedContentType: selectedRequestBodyContentType.value,
 							"onUpdate:selectedContentType": _cache[2] || (_cache[2] = ($event) => selectedRequestBodyContentType.value = $event),
 							document: __props.document,
@@ -191,7 +200,7 @@ var ClassicLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							"parameters",
 							"requestBody"
 						])]),
-						createElementVNode("div", _hoisted_11, [createVNode(OperationResponses_default, {
+						createElementVNode("div", _hoisted_12, [createVNode(OperationResponses_default, {
 							document: __props.document,
 							eventBus: __props.eventBus,
 							options: __props.options,
@@ -202,7 +211,7 @@ var ClassicLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							"options",
 							"responses"
 						])]),
-						__props.operation?.callbacks ? (openBlock(), createElementBlock("div", _hoisted_12, [createVNode(Callbacks_default, {
+						__props.operation?.callbacks ? (openBlock(), createElementBlock("div", _hoisted_13, [createVNode(Callbacks_default, {
 							callbacks: __props.operation.callbacks,
 							document: __props.document,
 							eventBus: __props.eventBus,

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

@@ -1 +1 @@
-{"version":3,"file":"ClassicLayout.vue.script.js","names":[],"sources":["../../../../src/features/Operation/layouts/ClassicLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CodeExample } from '@scalar/blocks/code-example'\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport {\n  ScalarIconCopy,\n  ScalarIconPlay,\n  ScalarIconWebhooksLogo,\n} from '@scalar/icons'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n  OpenApiDocument,\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 { useLocalization } from '@/features/localization'\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 SecurityRequirementBadge from '@/features/Operation/components/SecurityRequirementBadge.vue'\nimport type { RequiredSecurity } from '@/features/Operation/helpers/get-required-security'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@/features/Operation/helpers/operation-stability'\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  document,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  requiredSecurity,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n  selectedExample,\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    /** Required/optional security state for the badge next to the path */\n    requiredSecurity: RequiredSecurity\n    /** The document the operation belongs to, used to resolve schema references for display */\n    document?: OpenApiDocument\n  }\n>()\nconst { translate } = useLocalization()\n\nconst operationTitle = computed(() => operation.summary || path || '')\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Track the selected request body content type so the code sample stays in sync */\nconst selectedRequestBodyContentType = ref<string | undefined>()\n\n/**\n * The example key actually shown in the request snippet for this operation.\n *\n * The test-request button lives in the accordion header, outside `OperationCodeSample`, so it\n * cannot read the resolved key from the footer slot like the modern layout does. We mirror it here\n * so the button opens the client with the same example the snippet displays, even when this\n * operation does not share the document-wide selection.\n */\nconst resolvedExampleKey = 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\" />\n                {{ translate('operation.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      <!-- Required auth indicator -->\n      <SecurityRequirementBadge\n        hideLabel\n        :requiredSecurity />\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=\"resolvedExampleKey\"\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=\"translate('actions.copyEndpointUrl')\"\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=\"translate('common.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            v-model:selectedContentType=\"selectedRequestBodyContentType\"\n            :document\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            :document\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            :document\n            :eventBus\n            :options\n            :path />\n        </div>\n      </div>\n\n      <ExampleResponses\n        v-if=\"operation.responses\"\n        class=\"operation-example-card\"\n        :eventBus\n        :responses=\"operation.responses\"\n        :selectedExample />\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          <CodeExample\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            :selectedContentType=\"selectedRequestBodyContentType\"\n            :selectedExample\n            :selectedServer\n            @update:exampleKey=\"resolvedExampleKey = $event\" />\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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"}
+{"version":3,"file":"ClassicLayout.vue.script.js","names":[],"sources":["../../../../src/features/Operation/layouts/ClassicLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CodeExample } from '@scalar/blocks/code-example'\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport {\n  ScalarIconCopy,\n  ScalarIconPlay,\n  ScalarIconWebhooksLogo,\n} from '@scalar/icons'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n  OpenApiDocument,\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 { useLocalization } from '@/features/localization'\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 OperationScopes from '@/features/Operation/components/OperationScopes.vue'\nimport SecurityRequirementBadge from '@/features/Operation/components/SecurityRequirementBadge.vue'\nimport {\n  getRequiredScopeGroups,\n  type RequiredSecurity,\n} from '@/features/Operation/helpers/get-required-security'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@/features/Operation/helpers/operation-stability'\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  document,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  requiredSecurity,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n  selectedExample,\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    /** Required/optional security state for the badge next to the path */\n    requiredSecurity: RequiredSecurity\n    /** The document the operation belongs to, used to resolve schema references for display */\n    document?: OpenApiDocument\n  }\n>()\nconst { translate } = useLocalization()\n\nconst operationTitle = computed(() => operation.summary || path || '')\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Whether the operation requires any OAuth scopes, used to skip the empty card item. */\nconst hasRequiredScopes = computed(\n  () => getRequiredScopeGroups(requiredSecurity).length > 0,\n)\n\n/** Track the selected request body content type so the code sample stays in sync */\nconst selectedRequestBodyContentType = ref<string | undefined>()\n\n/**\n * The example key actually shown in the request snippet for this operation.\n *\n * The test-request button lives in the accordion header, outside `OperationCodeSample`, so it\n * cannot read the resolved key from the footer slot like the modern layout does. We mirror it here\n * so the button opens the client with the same example the snippet displays, even when this\n * operation does not share the document-wide selection.\n */\nconst resolvedExampleKey = 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\" />\n                {{ translate('operation.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      <!-- Required auth indicator -->\n      <SecurityRequirementBadge\n        hideLabel\n        :requiredSecurity />\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=\"resolvedExampleKey\"\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=\"translate('actions.copyEndpointUrl')\"\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=\"translate('common.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\n          v-if=\"hasRequiredScopes\"\n          class=\"operation-details-card-item\">\n          <OperationScopes :requiredSecurity />\n        </div>\n        <div class=\"operation-details-card-item\">\n          <OperationParameters\n            v-model:selectedContentType=\"selectedRequestBodyContentType\"\n            :document\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            :document\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            :document\n            :eventBus\n            :options\n            :path />\n        </div>\n      </div>\n\n      <ExampleResponses\n        v-if=\"operation.responses\"\n        class=\"operation-example-card\"\n        :eventBus\n        :responses=\"operation.responses\"\n        :selectedExample />\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          <CodeExample\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            :selectedContentType=\"selectedRequestBodyContentType\"\n            :selectedExample\n            :selectedServer\n            @update:exampleKey=\"resolvedExampleKey = $event\" />\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoFA,MAAM,EAAE,cAAc,iBAAgB;EAEtC,MAAM,iBAAiB,eAAe,QAAA,UAAU,WAAW,QAAA,QAAQ,GAAE;EACrE,MAAM,sBAAsB,eAAe,mBAAmB,QAAA,UAAU,CAAA;;EAGxE,MAAM,oBAAoB,eAClB,uBAAuB,QAAA,iBAAiB,CAAC,SAAS,EAC1D;;EAGA,MAAM,iCAAiC,KAAwB;;;;;;;;;EAU/D,MAAM,qBAAqB,IAAY,GAAE;;EAGzC,MAAM,kCAAkC,IAAqC,EAAE,CAAA;EAE/E,MAAM,+CAA+C,gBACX,EACtC,GAAG,gCAAgC,OACpC,EACH;EAEA,MAAM,qCAAqC,eACzC,KAAK,UAAU,6CAA6C,MAAM,CACpE;AAEA,UAAQ,uCAAuC,gCAA+B;EAE9E,MAAM,EAAE,oBAAoB,cAAa;;uBAGvC,YAqLmB,MAAA,yBAAA,EAAA;IApLhB,IAAI,QAAA;IACJ,cAAY,eAAA;IACb,OAAM;IACL,YAAU,CAAG,QAAA;IACd,aAAA;IACC,uBAAiB,OAAA,OAAA,OAAA,MAAU,UAAU,QAAA,UAAU,KAAI,mBAAA;KAAA,IAAsB,QAAA;KAAE,MAAQ;KAAK,CAAA;;IAG9E,OAAK,cA0CR,CAzCN,mBAyCM,OAzCN,YAyCM,CAxCJ,mBAuCM,OAvCN,YAuCM,CAtCJ,YAGU,MAAA,mBAAA,EAAA;KAFR,OAAM;KACL,QAAQ,QAAA;KACT,OAAA;6BACF,YAiCS,MAAA,eAAA,EAAA;KAhCP,OAAM;KACL,iBAAa,OAAA,OAAA,OAAA,WAAQ,QAAA,UAAU,KAAI,qBAAA,EAAA,IAAwB,QAAA,IAAE,CAAA;;4BA8BzD,CA7BL,mBA6BK,MA7BL,YA6BK;MA5BH,mBAIM,OAJN,YAIM,CAHJ,YAEiB,uBAAA;OADd,YAAY,MAAA,sBAAqB,CAAC,QAAA,UAAS;OAC3C,MAAM,QAAA;;MAEX,mBAEM,OAFN,YAEM,gBADD,eAAA,MAAc,EAAA,EAAA;MAIX,MAAA,sBAAqB,CAAC,QAAA,UAAS,IAAA,WAAA,EADvC,YAKQ,MAAA,cAAA,EAAA;;OAHN,OAAK,eAAA,CAAC,cACE,MAAA,2BAA0B,CAAC,QAAA,UAAS,CAAA,CAAA;;8BACN,CAAA,gBAAA,gBAAnC,MAAA,sBAAqB,CAAC,QAAA,UAAS,CAAA,EAAA,EAAA,CAAA,CAAA;;;MAK5B,QAAA,aAAA,WAAA,EADR,YAKQ,MAAA,cAAA,EAAA;;OAHN,OAAM;;8BACkC,CAAxC,YAAwC,MAAA,uBAAA,EAAA,EAAhB,QAAO,QAAM,CAAA,EAAA,gBAAG,MACxC,gBAAG,MAAA,UAAS,CAAA,oBAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;;MAId,YAEsB,MAAA,gBAAA,EAAA;OADnB,QAAQ,QAAA,UAAS;OAClB,UAAS;;;;;IAMV,SAAO,SAIM,EAJF,aAAM;KAE1B,YAEsB,kCAAA;MADpB,WAAA;MACC,kBAAA,QAAA;;KAEH,YAEqB,MAAA,gBAAA,EAAA;MADlB,QAAQ,QAAA,UAAS;MAClB,UAAS;;MACM,QAAA,QAAQ,yBAAA,WAAA,EAAzB,mBAcW,UAAA,EAAA,KAAA,GAAA,EAAA,CAZD,UAAM,CAAK,QAAA,aAAA,WAAA,EADnB,YASM,MAAA,0BAAA,EAAA;;MAPH,IAAA,QAAA;MACA,UAAA,QAAA;MACA,aAAa,mBAAA;MACb,QAAA,QAAA;MACA,MAAA,QAAA;MACA,iCAA8C,6CAAA;;;;;;;;yBAGjD,YAEuC,MAAA,eAAA,EAAA;;MAArC,OAAM;;KAGF,QAAA,QAAQ,mBAAmB,QAAA,UAAU,eAAA,WAAA,EAD7C,mBAIO,QAJP,YAIO,gBADF,QAAA,UAAU,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAE1B,YAMwC,MAAA,iBAAA,EAAA;MALtC,OAAM;MACL,MAAM,MAAA,eAAc;MACpB,OAAO,MAAA,UAAS,CAAA,0BAAA;MACjB,MAAK;MACL,SAAQ;MACP,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,MAAA,gBAAe,CAAC,QAAA,KAAI,EAAA,CAAA,OAAA,CAAA;;;2BA4F/B,CA9EN,mBA8EM,OA9EN,YA8EM;KA7EJ,mBAuCM,OAvCN,YAuCM;MArCI,OAAO,KAAK,oBAAA,MAAmB,CAAE,SAAM,KAAA,WAAA,EAD/C,mBAIM,OAJN,YAIM,CADJ,YAAuD,gCAAA,EAA9B,OAAO,oBAAA,OAAmB,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;MAG7C,kBAAA,SAAA,WAAA,EADR,mBAIM,OAJN,aAIM,CADJ,YAAqC,yBAAA,EAAnB,kBAAA,QAAA,kBAAgB,EAAA,MAAA,GAAA,CAAA,mBAAA,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;MAEpC,mBAQM,OARN,aAQM,CAPJ,YAMyD,6BAAA;OAL/C,qBAAqB,+BAAA;4GAA8B,QAAA;OAC1D,UAAA,QAAA;OACA,UAAA,QAAA;OACA,SAAA,QAAA;OACA,YAAY,QAAA,UAAU;OACtB,aAAa,MAAA,eAAc,CAAC,QAAA,UAAU,YAAW;;;;;;;;;MAEtD,mBAMM,OANN,aAMM,CALJ,YAIqC,4BAAA;OAHlC,UAAA,QAAA;OACA,UAAA,QAAA;OACA,SAAA,QAAA;OACA,WAAW,QAAA,UAAU;;;;;;;MAKlB,QAAA,WAAW,aAAA,WAAA,EADnB,mBASM,OATN,aASM,CANJ,YAKU,mBAAA;OAJP,WAAW,QAAA,UAAU;OACrB,UAAA,QAAA;OACA,UAAA,QAAA;OACA,SAAA,QAAA;OACA,MAAA,QAAA;;;;;;;;;KAKC,QAAA,UAAU,aAAA,WAAA,EADlB,YAKqB,MAAA,yBAAA,EAAA;;MAHnB,OAAM;MACL,UAAA,QAAA;MACA,WAAW,QAAA,UAAU;MACrB,iBAAA,QAAA;;;;;;KAGH,mBA2BM,OAAA,MAAA,CAzBY,QAAA,UAAU,gBAAA,WAAA,EAA1B,YAEW,MAAA,iBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;6BADuC,CAAhD,YAAgD,MAAA,qBAAA,EAAA,EAAjC,OAAO,QAAA,UAAU,cAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;yCAGlC,YAoBsB,MAAA,oBAAA,EAAA,MAAA;6BADiC,EAAA,WAAA,EAlBrD,YAkBqD,MAAA,YAAA,EAAA;OAjBlD,KAAK,mCAAA;OACN,OAAM;OACL,eAAA,QAAA;OACA,UAAA,QAAA;OACD,UAAA;OACC,WAAA,QAAA;OACA,QAAA,QAAA;OACA,WAAA,QAAA;OACA,MAAA,QAAA;OACA,iCAAgD,6CAAA;OAGhD,iBAAiB,QAAA;OACjB,gBAAA,QAAA;OACA,qBAAqB,+BAAA;OACrB,iBAAA,QAAA;OACA,gBAAA,QAAA;OACA,uBAAiB,OAAA,OAAA,OAAA,MAAA,WAAE,mBAAA,QAAqB;;;;;;;;;;;;;;;;;;;OAtFzC,QAAA,UAAU,cAAA;UACf;sBAQc,CAPf,YAOe,MAAA,eAAA,EAAA;KANZ,cAAc,QAAA;KACd,cAAY,MAAA,UAAS,CAAA,qBAAA;KACtB,MAAK;KACL,eAAc;KACb,OAAO,QAAA,UAAU;KAClB,aAAA;KACA,YAAA"}

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":"AA8ZA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAgBrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oDAAoD,CAAA;AAM1F,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;IACrD,sEAAsE;IACtE,gBAAgB,EAAE,gBAAgB,CAAA;IAClC,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,eAAe,CAAA;CAC3B,CAAC;AA0lBJ,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":"AA4ZA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAiBrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oDAAoD,CAAA;AAM1F,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;IACrD,sEAAsE;IACtE,gBAAgB,EAAE,gBAAgB,CAAA;IAClC,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,eAAe,CAAA;CAC3B,CAAC;AAimBJ,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 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-eb0b9f7e"]]);
+var ModernLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ModernLayout_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2382aa8f"]]);
 //#endregion
 export { ModernLayout_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ModernLayout.vue.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CodeExample } from '@scalar/blocks/code-example'\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { ScalarIconWebhooksLogo } from '@scalar/icons'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n  OpenApiDocument,\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 { Section, SectionContent, SectionHeaderTag } 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 { useLocalization } from '@/features/localization'\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 SecurityRequirementBadge from '@/features/Operation/components/SecurityRequirementBadge.vue'\nimport type { RequiredSecurity } from '@/features/Operation/helpers/get-required-security'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@/features/Operation/helpers/operation-stability'\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  document,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  requiredSecurity,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n  selectedExample,\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    /** Required/optional security state for the badge next to the path */\n    requiredSecurity: RequiredSecurity\n    /** The document the operation belongs to, used to resolve schema references for display */\n    document?: OpenApiDocument\n  }\n>()\nconst { translate } = useLocalization()\n\nconst operationTitle = computed(() => operation.summary || path || '')\n\nconst labelId = useId()\n\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Track the selected request body content type so the code sample stays in sync */\nconst selectedRequestBodyContentType = ref<string | undefined>()\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      <!-- Badges -->\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\" />\n            {{ translate('operation.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=\"operation-layout\">\n        <!-- Title -->\n        <div\n          class=\"operation-title\"\n          :class=\"isOperationDeprecated(operation) && 'deprecated'\">\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        </div>\n\n        <!-- Required auth badge -->\n        <div class=\"operation-auth\">\n          <SecurityRequirementBadge :requiredSecurity />\n        </div>\n\n        <!-- Description -->\n        <div class=\"operation-description\">\n          <SpecificationExtension :value=\"operationExtensions\" />\n          <ScalarMarkdown\n            :anchorPrefix=\"id\"\n            :aria-label=\"translate('common.description')\"\n            role=\"group\"\n            transformType=\"heading\"\n            :value=\"operation.description\"\n            withAnchors\n            withImages />\n        </div>\n\n        <!--\n          Parameters, request body, responses and callbacks.\n\n          This block is kept before the examples in source order on purpose: the\n          request body schema (via SchemaComposition) seeds the shared\n          requestBodyCompositionSelection on mount, which drives the\n          CodeExample's :key. Mounting the details first means the code\n          sample reads the final key on its first render and is never remounted —\n          a remount would reset the selected client and tear down an open client\n          picker. The grid (see grid-template-areas below) still paints the\n          examples on the right, independent of this source order.\n        -->\n        <div class=\"operation-details\">\n          <OperationParameters\n            v-model:selectedContentType=\"selectedRequestBodyContentType\"\n            :breadcrumb=\"[id]\"\n            :document\n            :eventBus\n            :options\n            :parameters=\"operation.parameters\"\n            :requestBody=\"getResolvedRef(operation.requestBody)\" />\n          <OperationResponses\n            :breadcrumb=\"[id]\"\n            :collapsableItems=\"!options.expandAllResponses\"\n            :document\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              :document\n              :eventBus\n              :options\n              :path />\n          </ScalarErrorBoundary>\n        </div>\n\n        <!-- Example request and responses -->\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            <CodeExample\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              :selectedContentType=\"selectedRequestBodyContentType\"\n              :selectedExample\n              :selectedServer>\n              <template #header>\n                <OperationPath\n                  class=\"font-code text-c-2 [&_em]:text-c-1 min-w-0 [&_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            </CodeExample>\n          </ScalarErrorBoundary>\n\n          <ScalarErrorBoundary>\n            <ExampleResponses\n              v-if=\"operation.responses\"\n              :eventBus\n              :responses=\"operation.responses\"\n              :selectedExample\n              style=\"margin-top: 12px\" />\n          </ScalarErrorBoundary>\n        </div>\n      </div>\n    </SectionContent>\n  </Section>\n</template>\n\n<style scoped>\n/*\n * The operation is a single grid so the request example can sit beside the\n * details on wide screens, then be lifted directly under the description when\n * the layout collapses (see the container query below). Vertical rhythm comes\n * from element margins rather than row-gap, because the details block carries\n * its own leading margin (mt-6) that already spaces it from whatever precedes\n * it — a row-gap would double that gap.\n */\n.operation-layout {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: auto auto 1fr;\n  grid-template-areas:\n    'heading     badge'\n    'description examples'\n    'details     examples';\n  column-gap: 48px;\n  row-gap: 0;\n}\n\n.operation-title {\n  grid-area: heading;\n  margin-bottom: 12px;\n\n  /* Mirror the shared section header typography (see SectionHeader.vue) */\n  font-size: var(--font-size, var(--scalar-heading-1));\n  font-weight: var(--font-weight, var(--scalar-bold));\n  color: var(--scalar-color-1);\n  line-height: 1.45;\n}\n\n.operation-auth {\n  grid-area: badge;\n  justify-self: end;\n  align-self: start;\n}\n\n.operation-description {\n  grid-area: description;\n  min-width: 0;\n}\n\n.operation-details {\n  grid-area: details;\n  min-width: 0;\n}\n\n.examples {\n  grid-area: examples;\n  align-self: start;\n  min-width: 0;\n\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\n.deprecated * {\n  text-decoration: line-through;\n}\n\n/*\n * On narrow containers the layout collapses to a single column: the request\n * example is lifted directly under the description, and the auth badge becomes\n * an eyebrow above the title.\n */\n@container narrow-references-container (max-width: 900px) {\n  .operation-layout {\n    grid-template-columns: 1fr;\n    grid-template-areas:\n      'badge'\n      'heading'\n      'description'\n      'examples'\n      'details';\n    column-gap: 0;\n  }\n\n  .operation-auth {\n    justify-self: start;\n    margin-bottom: 4px;\n  }\n\n  .operation-title {\n    margin-bottom: 24px;\n  }\n\n  .operation-description {\n    margin-bottom: 24px;\n  }\n\n  /* Don't make the examples sticky on narrow viewports */\n  .examples {\n    position: static;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ModernLayout.vue.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CodeExample } from '@scalar/blocks/code-example'\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { ScalarIconWebhooksLogo } from '@scalar/icons'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n  OpenApiDocument,\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 { Section, SectionContent, SectionHeaderTag } 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 { useLocalization } from '@/features/localization'\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 OperationScopes from '@/features/Operation/components/OperationScopes.vue'\nimport SecurityRequirementBadge from '@/features/Operation/components/SecurityRequirementBadge.vue'\nimport type { RequiredSecurity } from '@/features/Operation/helpers/get-required-security'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@/features/Operation/helpers/operation-stability'\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  document,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  requiredSecurity,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n  selectedExample,\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    /** Required/optional security state for the badge next to the path */\n    requiredSecurity: RequiredSecurity\n    /** The document the operation belongs to, used to resolve schema references for display */\n    document?: OpenApiDocument\n  }\n>()\nconst { translate } = useLocalization()\n\nconst operationTitle = computed(() => operation.summary || path || '')\n\nconst labelId = useId()\n\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Track the selected request body content type so the code sample stays in sync */\nconst selectedRequestBodyContentType = ref<string | undefined>()\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      <!-- Badges -->\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\" />\n            {{ translate('operation.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=\"operation-layout\">\n        <!-- Title -->\n        <div\n          class=\"operation-title\"\n          :class=\"isOperationDeprecated(operation) && 'deprecated'\">\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        </div>\n\n        <!-- Required auth badge -->\n        <div class=\"operation-auth\">\n          <SecurityRequirementBadge :requiredSecurity />\n        </div>\n\n        <!-- Description -->\n        <div class=\"operation-description\">\n          <SpecificationExtension :value=\"operationExtensions\" />\n          <ScalarMarkdown\n            :anchorPrefix=\"id\"\n            :aria-label=\"translate('common.description')\"\n            role=\"group\"\n            transformType=\"heading\"\n            :value=\"operation.description\"\n            withAnchors\n            withImages />\n        </div>\n\n        <!--\n          Parameters, request body, responses and callbacks.\n\n          This block is kept before the examples in source order on purpose: the\n          request body schema (via SchemaComposition) seeds the shared\n          requestBodyCompositionSelection on mount, which drives the\n          CodeExample's :key. Mounting the details first means the code\n          sample reads the final key on its first render and is never remounted —\n          a remount would reset the selected client and tear down an open client\n          picker. The grid (see grid-template-areas below) still paints the\n          examples on the right, independent of this source order.\n        -->\n        <div class=\"operation-details\">\n          <OperationScopes :requiredSecurity />\n          <OperationParameters\n            v-model:selectedContentType=\"selectedRequestBodyContentType\"\n            :breadcrumb=\"[id]\"\n            :document\n            :eventBus\n            :options\n            :parameters=\"operation.parameters\"\n            :requestBody=\"getResolvedRef(operation.requestBody)\" />\n          <OperationResponses\n            :breadcrumb=\"[id]\"\n            :collapsableItems=\"!options.expandAllResponses\"\n            :document\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              :document\n              :eventBus\n              :options\n              :path />\n          </ScalarErrorBoundary>\n        </div>\n\n        <!-- Example request and responses -->\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            <CodeExample\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              :selectedContentType=\"selectedRequestBodyContentType\"\n              :selectedExample\n              :selectedServer>\n              <template #header>\n                <OperationPath\n                  class=\"font-code text-c-2 [&_em]:text-c-1 min-w-0 [&_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            </CodeExample>\n          </ScalarErrorBoundary>\n\n          <ScalarErrorBoundary>\n            <ExampleResponses\n              v-if=\"operation.responses\"\n              :eventBus\n              :responses=\"operation.responses\"\n              :selectedExample\n              style=\"margin-top: 12px\" />\n          </ScalarErrorBoundary>\n        </div>\n      </div>\n    </SectionContent>\n  </Section>\n</template>\n\n<style scoped>\n/*\n * The operation is a single grid so the request example can sit beside the\n * details on wide screens, then be lifted directly under the description when\n * the layout collapses (see the container query below). Vertical rhythm comes\n * from element margins rather than row-gap, because the details block carries\n * its own leading margin (mt-6) that already spaces it from whatever precedes\n * it — a row-gap would double that gap.\n */\n.operation-layout {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: auto auto 1fr;\n  grid-template-areas:\n    'heading     badge'\n    'description examples'\n    'details     examples';\n  column-gap: 48px;\n  row-gap: 0;\n}\n\n.operation-title {\n  grid-area: heading;\n  margin-bottom: 12px;\n\n  /* Mirror the shared section header typography (see SectionHeader.vue) */\n  font-size: var(--font-size, var(--scalar-heading-1));\n  font-weight: var(--font-weight, var(--scalar-bold));\n  color: var(--scalar-color-1);\n  line-height: 1.45;\n}\n\n.operation-auth {\n  grid-area: badge;\n  justify-self: end;\n  align-self: start;\n}\n\n.operation-description {\n  grid-area: description;\n  min-width: 0;\n}\n\n.operation-details {\n  grid-area: details;\n  min-width: 0;\n}\n\n.examples {\n  grid-area: examples;\n  align-self: start;\n  min-width: 0;\n\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\n.deprecated * {\n  text-decoration: line-through;\n}\n\n/*\n * On narrow containers the layout collapses to a single column: the request\n * example is lifted directly under the description, and the auth badge becomes\n * an eyebrow above the title.\n */\n@container narrow-references-container (max-width: 900px) {\n  .operation-layout {\n    grid-template-columns: 1fr;\n    grid-template-areas:\n      'badge'\n      'heading'\n      'description'\n      'examples'\n      'details';\n    column-gap: 0;\n  }\n\n  .operation-auth {\n    justify-self: start;\n    margin-bottom: 4px;\n  }\n\n  .operation-description {\n    margin-bottom: 24px;\n  }\n\n  /* Don't make the examples sticky on narrow viewports */\n  .examples {\n    position: static;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -9,6 +9,7 @@ import SpecificationExtension_default from "../../specification-extension/Specif
 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 OperationScopes_default from "../components/OperationScopes.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";
@@ -126,6 +127,7 @@ var ModernLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 							"value"
 						])]),
 						createElementVNode("div", _hoisted_7, [
+							createVNode(OperationScopes_default, { requiredSecurity: __props.requiredSecurity }, null, 8, ["requiredSecurity"]),
 							createVNode(OperationParameters_default, {
 								selectedContentType: selectedRequestBodyContentType.value,
 								"onUpdate:selectedContentType": _cache[1] || (_cache[1] = ($event) => selectedRequestBodyContentType.value = $event),

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

@@ -1 +1 @@
-{"version":3,"file":"ModernLayout.vue.script.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CodeExample } from '@scalar/blocks/code-example'\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { ScalarIconWebhooksLogo } from '@scalar/icons'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n  OpenApiDocument,\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 { Section, SectionContent, SectionHeaderTag } 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 { useLocalization } from '@/features/localization'\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 SecurityRequirementBadge from '@/features/Operation/components/SecurityRequirementBadge.vue'\nimport type { RequiredSecurity } from '@/features/Operation/helpers/get-required-security'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@/features/Operation/helpers/operation-stability'\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  document,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  requiredSecurity,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n  selectedExample,\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    /** Required/optional security state for the badge next to the path */\n    requiredSecurity: RequiredSecurity\n    /** The document the operation belongs to, used to resolve schema references for display */\n    document?: OpenApiDocument\n  }\n>()\nconst { translate } = useLocalization()\n\nconst operationTitle = computed(() => operation.summary || path || '')\n\nconst labelId = useId()\n\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Track the selected request body content type so the code sample stays in sync */\nconst selectedRequestBodyContentType = ref<string | undefined>()\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      <!-- Badges -->\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\" />\n            {{ translate('operation.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=\"operation-layout\">\n        <!-- Title -->\n        <div\n          class=\"operation-title\"\n          :class=\"isOperationDeprecated(operation) && 'deprecated'\">\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        </div>\n\n        <!-- Required auth badge -->\n        <div class=\"operation-auth\">\n          <SecurityRequirementBadge :requiredSecurity />\n        </div>\n\n        <!-- Description -->\n        <div class=\"operation-description\">\n          <SpecificationExtension :value=\"operationExtensions\" />\n          <ScalarMarkdown\n            :anchorPrefix=\"id\"\n            :aria-label=\"translate('common.description')\"\n            role=\"group\"\n            transformType=\"heading\"\n            :value=\"operation.description\"\n            withAnchors\n            withImages />\n        </div>\n\n        <!--\n          Parameters, request body, responses and callbacks.\n\n          This block is kept before the examples in source order on purpose: the\n          request body schema (via SchemaComposition) seeds the shared\n          requestBodyCompositionSelection on mount, which drives the\n          CodeExample's :key. Mounting the details first means the code\n          sample reads the final key on its first render and is never remounted —\n          a remount would reset the selected client and tear down an open client\n          picker. The grid (see grid-template-areas below) still paints the\n          examples on the right, independent of this source order.\n        -->\n        <div class=\"operation-details\">\n          <OperationParameters\n            v-model:selectedContentType=\"selectedRequestBodyContentType\"\n            :breadcrumb=\"[id]\"\n            :document\n            :eventBus\n            :options\n            :parameters=\"operation.parameters\"\n            :requestBody=\"getResolvedRef(operation.requestBody)\" />\n          <OperationResponses\n            :breadcrumb=\"[id]\"\n            :collapsableItems=\"!options.expandAllResponses\"\n            :document\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              :document\n              :eventBus\n              :options\n              :path />\n          </ScalarErrorBoundary>\n        </div>\n\n        <!-- Example request and responses -->\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            <CodeExample\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              :selectedContentType=\"selectedRequestBodyContentType\"\n              :selectedExample\n              :selectedServer>\n              <template #header>\n                <OperationPath\n                  class=\"font-code text-c-2 [&_em]:text-c-1 min-w-0 [&_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            </CodeExample>\n          </ScalarErrorBoundary>\n\n          <ScalarErrorBoundary>\n            <ExampleResponses\n              v-if=\"operation.responses\"\n              :eventBus\n              :responses=\"operation.responses\"\n              :selectedExample\n              style=\"margin-top: 12px\" />\n          </ScalarErrorBoundary>\n        </div>\n      </div>\n    </SectionContent>\n  </Section>\n</template>\n\n<style scoped>\n/*\n * The operation is a single grid so the request example can sit beside the\n * details on wide screens, then be lifted directly under the description when\n * the layout collapses (see the container query below). Vertical rhythm comes\n * from element margins rather than row-gap, because the details block carries\n * its own leading margin (mt-6) that already spaces it from whatever precedes\n * it — a row-gap would double that gap.\n */\n.operation-layout {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: auto auto 1fr;\n  grid-template-areas:\n    'heading     badge'\n    'description examples'\n    'details     examples';\n  column-gap: 48px;\n  row-gap: 0;\n}\n\n.operation-title {\n  grid-area: heading;\n  margin-bottom: 12px;\n\n  /* Mirror the shared section header typography (see SectionHeader.vue) */\n  font-size: var(--font-size, var(--scalar-heading-1));\n  font-weight: var(--font-weight, var(--scalar-bold));\n  color: var(--scalar-color-1);\n  line-height: 1.45;\n}\n\n.operation-auth {\n  grid-area: badge;\n  justify-self: end;\n  align-self: start;\n}\n\n.operation-description {\n  grid-area: description;\n  min-width: 0;\n}\n\n.operation-details {\n  grid-area: details;\n  min-width: 0;\n}\n\n.examples {\n  grid-area: examples;\n  align-self: start;\n  min-width: 0;\n\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\n.deprecated * {\n  text-decoration: line-through;\n}\n\n/*\n * On narrow containers the layout collapses to a single column: the request\n * example is lifted directly under the description, and the auth badge becomes\n * an eyebrow above the title.\n */\n@container narrow-references-container (max-width: 900px) {\n  .operation-layout {\n    grid-template-columns: 1fr;\n    grid-template-areas:\n      'badge'\n      'heading'\n      'description'\n      'examples'\n      'details';\n    column-gap: 0;\n  }\n\n  .operation-auth {\n    justify-self: start;\n    margin-bottom: 4px;\n  }\n\n  .operation-title {\n    margin-bottom: 24px;\n  }\n\n  .operation-description {\n    margin-bottom: 24px;\n  }\n\n  /* Don't make the examples sticky on narrow viewports */\n  .examples {\n    position: static;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ModernLayout.vue.script.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CodeExample } from '@scalar/blocks/code-example'\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { ScalarIconWebhooksLogo } from '@scalar/icons'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n  OpenApiDocument,\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 { Section, SectionContent, SectionHeaderTag } 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 { useLocalization } from '@/features/localization'\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 OperationScopes from '@/features/Operation/components/OperationScopes.vue'\nimport SecurityRequirementBadge from '@/features/Operation/components/SecurityRequirementBadge.vue'\nimport type { RequiredSecurity } from '@/features/Operation/helpers/get-required-security'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@/features/Operation/helpers/operation-stability'\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  document,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  requiredSecurity,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n  selectedExample,\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    /** Required/optional security state for the badge next to the path */\n    requiredSecurity: RequiredSecurity\n    /** The document the operation belongs to, used to resolve schema references for display */\n    document?: OpenApiDocument\n  }\n>()\nconst { translate } = useLocalization()\n\nconst operationTitle = computed(() => operation.summary || path || '')\n\nconst labelId = useId()\n\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Track the selected request body content type so the code sample stays in sync */\nconst selectedRequestBodyContentType = ref<string | undefined>()\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      <!-- Badges -->\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\" />\n            {{ translate('operation.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=\"operation-layout\">\n        <!-- Title -->\n        <div\n          class=\"operation-title\"\n          :class=\"isOperationDeprecated(operation) && 'deprecated'\">\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        </div>\n\n        <!-- Required auth badge -->\n        <div class=\"operation-auth\">\n          <SecurityRequirementBadge :requiredSecurity />\n        </div>\n\n        <!-- Description -->\n        <div class=\"operation-description\">\n          <SpecificationExtension :value=\"operationExtensions\" />\n          <ScalarMarkdown\n            :anchorPrefix=\"id\"\n            :aria-label=\"translate('common.description')\"\n            role=\"group\"\n            transformType=\"heading\"\n            :value=\"operation.description\"\n            withAnchors\n            withImages />\n        </div>\n\n        <!--\n          Parameters, request body, responses and callbacks.\n\n          This block is kept before the examples in source order on purpose: the\n          request body schema (via SchemaComposition) seeds the shared\n          requestBodyCompositionSelection on mount, which drives the\n          CodeExample's :key. Mounting the details first means the code\n          sample reads the final key on its first render and is never remounted —\n          a remount would reset the selected client and tear down an open client\n          picker. The grid (see grid-template-areas below) still paints the\n          examples on the right, independent of this source order.\n        -->\n        <div class=\"operation-details\">\n          <OperationScopes :requiredSecurity />\n          <OperationParameters\n            v-model:selectedContentType=\"selectedRequestBodyContentType\"\n            :breadcrumb=\"[id]\"\n            :document\n            :eventBus\n            :options\n            :parameters=\"operation.parameters\"\n            :requestBody=\"getResolvedRef(operation.requestBody)\" />\n          <OperationResponses\n            :breadcrumb=\"[id]\"\n            :collapsableItems=\"!options.expandAllResponses\"\n            :document\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              :document\n              :eventBus\n              :options\n              :path />\n          </ScalarErrorBoundary>\n        </div>\n\n        <!-- Example request and responses -->\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            <CodeExample\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              :selectedContentType=\"selectedRequestBodyContentType\"\n              :selectedExample\n              :selectedServer>\n              <template #header>\n                <OperationPath\n                  class=\"font-code text-c-2 [&_em]:text-c-1 min-w-0 [&_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            </CodeExample>\n          </ScalarErrorBoundary>\n\n          <ScalarErrorBoundary>\n            <ExampleResponses\n              v-if=\"operation.responses\"\n              :eventBus\n              :responses=\"operation.responses\"\n              :selectedExample\n              style=\"margin-top: 12px\" />\n          </ScalarErrorBoundary>\n        </div>\n      </div>\n    </SectionContent>\n  </Section>\n</template>\n\n<style scoped>\n/*\n * The operation is a single grid so the request example can sit beside the\n * details on wide screens, then be lifted directly under the description when\n * the layout collapses (see the container query below). Vertical rhythm comes\n * from element margins rather than row-gap, because the details block carries\n * its own leading margin (mt-6) that already spaces it from whatever precedes\n * it — a row-gap would double that gap.\n */\n.operation-layout {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: auto auto 1fr;\n  grid-template-areas:\n    'heading     badge'\n    'description examples'\n    'details     examples';\n  column-gap: 48px;\n  row-gap: 0;\n}\n\n.operation-title {\n  grid-area: heading;\n  margin-bottom: 12px;\n\n  /* Mirror the shared section header typography (see SectionHeader.vue) */\n  font-size: var(--font-size, var(--scalar-heading-1));\n  font-weight: var(--font-weight, var(--scalar-bold));\n  color: var(--scalar-color-1);\n  line-height: 1.45;\n}\n\n.operation-auth {\n  grid-area: badge;\n  justify-self: end;\n  align-self: start;\n}\n\n.operation-description {\n  grid-area: description;\n  min-width: 0;\n}\n\n.operation-details {\n  grid-area: details;\n  min-width: 0;\n}\n\n.examples {\n  grid-area: examples;\n  align-self: start;\n  min-width: 0;\n\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\n.deprecated * {\n  text-decoration: line-through;\n}\n\n/*\n * On narrow containers the layout collapses to a single column: the request\n * example is lifted directly under the description, and the auth badge becomes\n * an eyebrow above the title.\n */\n@container narrow-references-container (max-width: 900px) {\n  .operation-layout {\n    grid-template-columns: 1fr;\n    grid-template-areas:\n      'badge'\n      'heading'\n      'description'\n      'examples'\n      'details';\n    column-gap: 0;\n  }\n\n  .operation-auth {\n    justify-self: start;\n    margin-bottom: 4px;\n  }\n\n  .operation-description {\n    margin-bottom: 24px;\n  }\n\n  /* Don't make the examples sticky on narrow viewports */\n  .examples {\n    position: static;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/features/developer-tools/components/ApiReferenceToolbarConfigTheme.vue.d.ts

@@ -3,9 +3,9 @@ type __VLS_ModelProps = {
     modelValue?: ThemeId;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: "default" | "none" | "alternate" | "moon" | "purple" | "solarized" | "bluePlanet" | "deepSpace" | "saturn" | "kepler" | "elysiajs" | "fastify" | "mars" | "laserwave" | undefined) => any;
+    "update:modelValue": (value: "default" | "none" | "purple" | "alternate" | "moon" | "solarized" | "bluePlanet" | "deepSpace" | "saturn" | "kepler" | "elysiajs" | "fastify" | "mars" | "laserwave" | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: "default" | "none" | "alternate" | "moon" | "purple" | "solarized" | "bluePlanet" | "deepSpace" | "saturn" | "kepler" | "elysiajs" | "fastify" | "mars" | "laserwave" | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: "default" | "none" | "purple" | "alternate" | "moon" | "solarized" | "bluePlanet" | "deepSpace" | "saturn" | "kepler" | "elysiajs" | "fastify" | "mars" | "laserwave" | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/features/developer-tools/components/ApiReferenceToolbarPopover.vue.script.js

@@ -1,8 +1,8 @@
 import { useLocalization } from "../../localization/use-localization.js";
 import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 import { ScalarIconCaretDown, ScalarIconInfo } from "@scalar/icons";
-import { ScalarPopover } from "@scalar/components/popover";
 import { ScalarFloatingBackdrop } from "@scalar/components/floating";
+import { ScalarPopover } from "@scalar/components/popover";
 //#region src/features/developer-tools/components/ApiReferenceToolbarPopover.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	class: "text-c-2 hover:text-c-1 hover:bg-b-2 flex items-center gap-1 rounded px-2 py-2.25 text-base leading-none",

package/dist/features/external-docs/ExternalDocs.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalDocs.vue.d.ts","sourceRoot":"","sources":["../../../src/features/external-docs/ExternalDocs.vue"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,8DAA8D,CAAA;AAE/G,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,2BAA2B,CAAA;CACpC,CAAC;AAqFF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ExternalDocs.vue.d.ts","sourceRoot":"","sources":["../../../src/features/external-docs/ExternalDocs.vue"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,8DAA8D,CAAA;AAE/G,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,2BAA2B,CAAA;CACpC,CAAC;AAsFF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/external-docs/ExternalDocs.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalDocs.vue.js","names":[],"sources":["../../../src/features/external-docs/ExternalDocs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconBook } from '@scalar/icons'\nimport type { ExternalDocumentationObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\ndefineProps<{\n  value?: ExternalDocumentationObject\n}>()\n</script>\n\n<template>\n  <template v-if=\"value\">\n    <div\n      class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n      <a\n        :href=\"value.url\"\n        class=\"text-c-1 hover:bg-b-2 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 no-underline group-last:mr-0 xl:border-none\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        <ScalarIconBook\n          weight=\"bold\"\n          class=\"size-3 text-current\" />\n        <span\n          class=\"ml-1 empty:hidden\"\n          v-if=\"value.description\">\n          {{ value.description }}\n        </span>\n        <span\n          class=\"ml-1 empty:hidden\"\n          v-else>\n          {{ value.url }}\n        </span>\n      </a>\n    </div>\n  </template>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ExternalDocs.vue.js","names":[],"sources":["../../../src/features/external-docs/ExternalDocs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconBook } from '@scalar/icons'\nimport type { ExternalDocumentationObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\ndefineProps<{\n  value?: ExternalDocumentationObject\n}>()\n</script>\n\n<template>\n  <template v-if=\"value\">\n    <div\n      class=\"group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0\">\n      <a\n        class=\"text-c-1 hover:bg-b-2 narrow:border mr-2 flex min-h-7 min-w-7 items-center rounded-lg px-2 py-1 no-underline group-last:mr-0\"\n        :href=\"value.url\"\n        rel=\"noopener noreferrer\"\n        target=\"_blank\">\n        <ScalarIconBook\n          class=\"size-3 text-current\"\n          weight=\"bold\" />\n        <span\n          v-if=\"value.description\"\n          class=\"ml-1 empty:hidden\">\n          {{ value.description }}\n        </span>\n        <span\n          v-else\n          class=\"ml-1 empty:hidden\">\n          {{ value.url }}\n        </span>\n      </a>\n    </div>\n  </template>\n</template>\n"],"mappings":""}

package/dist/features/external-docs/ExternalDocs.vue.script.js

@@ -3,7 +3,7 @@ import { ScalarIconBook } from "@scalar/icons";
 //#region src/features/external-docs/ExternalDocs.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
-	class: "group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto"
+	class: "group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0"
 };
 var _hoisted_2 = ["href"];
 var _hoisted_3 = {
@@ -20,13 +20,13 @@ var ExternalDocs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return __props.value ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("a", {
+				class: "text-c-1 hover:bg-b-2 narrow:border mr-2 flex min-h-7 min-w-7 items-center rounded-lg px-2 py-1 no-underline group-last:mr-0",
 				href: __props.value.url,
-				class: "text-c-1 hover:bg-b-2 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 no-underline group-last:mr-0 xl:border-none",
-				target: "_blank",
-				rel: "noopener noreferrer"
+				rel: "noopener noreferrer",
+				target: "_blank"
 			}, [createVNode(unref(ScalarIconBook), {
-				weight: "bold",
-				class: "size-3 text-current"
+				class: "size-3 text-current",
+				weight: "bold"
 			}), __props.value.description ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.value.description), 1)) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.value.url), 1))], 8, _hoisted_2)])) : createCommentVNode("", true);
 		};
 	}

package/dist/features/external-docs/ExternalDocs.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalDocs.vue.script.js","names":[],"sources":["../../../src/features/external-docs/ExternalDocs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconBook } from '@scalar/icons'\nimport type { ExternalDocumentationObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\ndefineProps<{\n  value?: ExternalDocumentationObject\n}>()\n</script>\n\n<template>\n  <template v-if=\"value\">\n    <div\n      class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n      <a\n        :href=\"value.url\"\n        class=\"text-c-1 hover:bg-b-2 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 no-underline group-last:mr-0 xl:border-none\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        <ScalarIconBook\n          weight=\"bold\"\n          class=\"size-3 text-current\" />\n        <span\n          class=\"ml-1 empty:hidden\"\n          v-if=\"value.description\">\n          {{ value.description }}\n        </span>\n        <span\n          class=\"ml-1 empty:hidden\"\n          v-else>\n          {{ value.url }}\n        </span>\n      </a>\n    </div>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;UAUkB,QAAA,SAAA,WAAA,EACd,mBAqBM,OArBN,YAqBM,CAnBJ,mBAkBI,KAAA;IAjBD,MAAM,QAAA,MAAM;IACb,OAAM;IACN,QAAO;IACP,KAAI;OACJ,YAEgC,MAAA,eAAA,EAAA;IAD9B,QAAO;IACP,OAAM;OAGA,QAAA,MAAM,eAAA,WAAA,EAFd,mBAIO,QAJP,YAIO,gBADF,QAAA,MAAM,YAAW,EAAA,EAAA,KAAA,WAAA,EAEtB,mBAIO,QAJP,YAIO,gBADF,QAAA,MAAM,IAAG,EAAA,EAAA,EAAA,EAAA,GAAA,WAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"ExternalDocs.vue.script.js","names":[],"sources":["../../../src/features/external-docs/ExternalDocs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconBook } from '@scalar/icons'\nimport type { ExternalDocumentationObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\ndefineProps<{\n  value?: ExternalDocumentationObject\n}>()\n</script>\n\n<template>\n  <template v-if=\"value\">\n    <div\n      class=\"group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0\">\n      <a\n        class=\"text-c-1 hover:bg-b-2 narrow:border mr-2 flex min-h-7 min-w-7 items-center rounded-lg px-2 py-1 no-underline group-last:mr-0\"\n        :href=\"value.url\"\n        rel=\"noopener noreferrer\"\n        target=\"_blank\">\n        <ScalarIconBook\n          class=\"size-3 text-current\"\n          weight=\"bold\" />\n        <span\n          v-if=\"value.description\"\n          class=\"ml-1 empty:hidden\">\n          {{ value.description }}\n        </span>\n        <span\n          v-else\n          class=\"ml-1 empty:hidden\">\n          {{ value.url }}\n        </span>\n      </a>\n    </div>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;UAUkB,QAAA,SAAA,WAAA,EACd,mBAqBM,OArBN,YAqBM,CAnBJ,mBAkBI,KAAA;IAjBF,OAAM;IACL,MAAM,QAAA,MAAM;IACb,KAAI;IACJ,QAAO;OACP,YAEkB,MAAA,eAAA,EAAA;IADhB,OAAM;IACN,QAAO;OAED,QAAA,MAAM,eAAA,WAAA,EADd,mBAIO,QAJP,YAIO,gBADF,QAAA,MAAM,YAAW,EAAA,EAAA,KAAA,WAAA,EAEtB,mBAIO,QAJP,YAIO,gBADF,QAAA,MAAM,IAAG,EAAA,EAAA,EAAA,EAAA,GAAA,WAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/features/info-object/Contact.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Contact.vue.d.ts","sourceRoot":"","sources":["../../../src/features/info-object/Contact.vue"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8DAA8D,CAAA;AAWjG,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAC;AAmHF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Contact.vue.d.ts","sourceRoot":"","sources":["../../../src/features/info-object/Contact.vue"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8DAA8D,CAAA;AAEjG,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAC;AAkIF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/info-object/Contact.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Contact.vue.js","names":[],"sources":["../../../src/features/info-object/Contact.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconEnvelopeSimple, ScalarIconLink } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\nimport type { ContactObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nconst variants = cva({\n  base: 'text-c-1 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 group-last:mr-0 xl:border-none',\n  variants: {\n    link: {\n      true: 'no-underline hover:bg-b-2',\n    },\n  },\n})\n\ndefineProps<{\n  value?: ContactObject\n}>()\n</script>\n\n<template>\n  <template v-if=\"value\">\n    <!-- Each link gets its own wrapper so the dividers render between them -->\n    <div\n      v-if=\"value.email\"\n      class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n      <a\n        :class=\"variants({ link: true })\"\n        :href=\"`mailto:${value.email}`\">\n        <ScalarIconEnvelopeSimple\n          weight=\"bold\"\n          class=\"size-3 text-current\" />\n        <span class=\"ml-1 empty:hidden\">{{ value.name }}</span>\n      </a>\n    </div>\n    <div\n      v-if=\"value.url\"\n      class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n      <a\n        :class=\"variants({ link: true })\"\n        :href=\"value.url\"\n        rel=\"noopener noreferrer\"\n        target=\"_blank\">\n        <ScalarIconLink\n          weight=\"bold\"\n          class=\"size-3 text-current\" />\n        <!-- Avoid repeating the name when the email link already shows it -->\n        <span class=\"ml-1 empty:hidden\">{{\n          value.email ? '' : value.name\n        }}</span>\n      </a>\n    </div>\n    <div\n      v-else-if=\"!value.email && value.name\"\n      class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n      <span :class=\"variants({ link: false })\">\n        {{ value.name }}\n      </span>\n    </div>\n  </template>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Contact.vue.js","names":[],"sources":["../../../src/features/info-object/Contact.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconEnvelopeSimple, ScalarIconLink } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\nimport type { ContactObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\ndefineProps<{\n  value?: ContactObject\n}>()\n\nconst variants = cva({\n  base: 'text-c-1 mr-2 flex min-h-7 min-w-7 items-center rounded-lg px-2 py-1 group-last:mr-0 narrow:border',\n  variants: {\n    link: {\n      true: 'no-underline hover:bg-b-2',\n    },\n  },\n})\n</script>\n\n<template>\n  <template v-if=\"value\">\n    <!-- Each link gets its own wrapper so the dividers render between them -->\n    <div\n      v-if=\"value.email\"\n      class=\"group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0\">\n      <a\n        :class=\"variants({ link: true })\"\n        :href=\"`mailto:${value.email}`\">\n        <ScalarIconEnvelopeSimple\n          class=\"size-3 text-current\"\n          weight=\"bold\" />\n        <span class=\"ml-1 empty:hidden\">{{ value.name }}</span>\n      </a>\n    </div>\n    <div\n      v-if=\"value.url\"\n      class=\"group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0\">\n      <a\n        :class=\"variants({ link: true })\"\n        :href=\"value.url\"\n        rel=\"noopener noreferrer\"\n        target=\"_blank\">\n        <ScalarIconLink\n          class=\"size-3 text-current\"\n          weight=\"bold\" />\n        <!-- Avoid repeating the name when the email link already shows it -->\n        <span class=\"ml-1 empty:hidden\">{{\n          value.email ? '' : value.name\n        }}</span>\n      </a>\n    </div>\n    <div\n      v-else-if=\"!value.email && value.name\"\n      class=\"group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0\">\n      <span :class=\"variants({ link: false })\">\n        {{ value.name }}\n      </span>\n    </div>\n  </template>\n</template>\n"],"mappings":""}

package/dist/features/info-object/Contact.vue.script.js

@@ -4,26 +4,26 @@ import { cva } from "@scalar/use-hooks/useBindCx";
 //#region src/features/info-object/Contact.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
-	class: "group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto"
+	class: "group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0"
 };
 var _hoisted_2 = ["href"];
 var _hoisted_3 = { class: "ml-1 empty:hidden" };
 var _hoisted_4 = {
 	key: 1,
-	class: "group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto"
+	class: "group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0"
 };
 var _hoisted_5 = ["href"];
 var _hoisted_6 = { class: "ml-1 empty:hidden" };
 var _hoisted_7 = {
 	key: 2,
-	class: "group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto"
+	class: "group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0"
 };
 var Contact_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Contact",
 	props: { value: {} },
 	setup(__props) {
 		const variants = cva({
-			base: "text-c-1 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 group-last:mr-0 xl:border-none",
+			base: "text-c-1 mr-2 flex min-h-7 min-w-7 items-center rounded-lg px-2 py-1 group-last:mr-0 narrow:border",
 			variants: { link: { true: "no-underline hover:bg-b-2" } }
 		});
 		return (_ctx, _cache) => {
@@ -31,16 +31,16 @@ var Contact_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				class: normalizeClass(unref(variants)({ link: true })),
 				href: `mailto:${__props.value.email}`
 			}, [createVNode(unref(ScalarIconEnvelopeSimple), {
-				weight: "bold",
-				class: "size-3 text-current"
+				class: "size-3 text-current",
+				weight: "bold"
 			}), createElementVNode("span", _hoisted_3, toDisplayString(__props.value.name), 1)], 10, _hoisted_2)])) : createCommentVNode("", true), __props.value.url ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("a", {
 				class: normalizeClass(unref(variants)({ link: true })),
 				href: __props.value.url,
 				rel: "noopener noreferrer",
 				target: "_blank"
 			}, [createVNode(unref(ScalarIconLink), {
-				weight: "bold",
-				class: "size-3 text-current"
+				class: "size-3 text-current",
+				weight: "bold"
 			}), createElementVNode("span", _hoisted_6, toDisplayString(__props.value.email ? "" : __props.value.name), 1)], 10, _hoisted_5)])) : !__props.value.email && __props.value.name ? (openBlock(), createElementBlock("div", _hoisted_7, [createElementVNode("span", { class: normalizeClass(unref(variants)({ link: false })) }, toDisplayString(__props.value.name), 3)])) : createCommentVNode("", true)], 64)) : createCommentVNode("", true);
 		};
 	}

package/dist/features/info-object/Contact.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"Contact.vue.script.js","names":[],"sources":["../../../src/features/info-object/Contact.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconEnvelopeSimple, ScalarIconLink } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\nimport type { ContactObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nconst variants = cva({\n  base: 'text-c-1 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 group-last:mr-0 xl:border-none',\n  variants: {\n    link: {\n      true: 'no-underline hover:bg-b-2',\n    },\n  },\n})\n\ndefineProps<{\n  value?: ContactObject\n}>()\n</script>\n\n<template>\n  <template v-if=\"value\">\n    <!-- Each link gets its own wrapper so the dividers render between them -->\n    <div\n      v-if=\"value.email\"\n      class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n      <a\n        :class=\"variants({ link: true })\"\n        :href=\"`mailto:${value.email}`\">\n        <ScalarIconEnvelopeSimple\n          weight=\"bold\"\n          class=\"size-3 text-current\" />\n        <span class=\"ml-1 empty:hidden\">{{ value.name }}</span>\n      </a>\n    </div>\n    <div\n      v-if=\"value.url\"\n      class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n      <a\n        :class=\"variants({ link: true })\"\n        :href=\"value.url\"\n        rel=\"noopener noreferrer\"\n        target=\"_blank\">\n        <ScalarIconLink\n          weight=\"bold\"\n          class=\"size-3 text-current\" />\n        <!-- Avoid repeating the name when the email link already shows it -->\n        <span class=\"ml-1 empty:hidden\">{{\n          value.email ? '' : value.name\n        }}</span>\n      </a>\n    </div>\n    <div\n      v-else-if=\"!value.email && value.name\"\n      class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n      <span :class=\"variants({ link: false })\">\n        {{ value.name }}\n      </span>\n    </div>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,MAAM,EACJ,MAAM,6BACP,EACF;GACF,CAAA;;UAQiB,QAAA,SAAA,WAAA,EAAhB,mBAsCW,UAAA,EAAA,KAAA,GAAA,EAAA,CAnCD,QAAA,MAAM,SAAA,WAAA,EADd,mBAWM,OAXN,YAWM,CARJ,mBAOI,KAAA;IAND,OAAK,eAAE,MAAA,SAAQ,CAAA,EAAA,MAAA,MAAA,CAAA,CAAA;IACf,MAAI,UAAY,QAAA,MAAM;OACvB,YAEgC,MAAA,yBAAA,EAAA;IAD9B,QAAO;IACP,OAAM;OACR,mBAAuD,QAAvD,YAAuD,gBAApB,QAAA,MAAM,KAAI,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,EAIzC,QAAA,MAAM,OAAA,WAAA,EADd,mBAgBM,OAhBN,YAgBM,CAbJ,mBAYI,KAAA;IAXD,OAAK,eAAE,MAAA,SAAQ,CAAA,EAAA,MAAA,MAAA,CAAA,CAAA;IACf,MAAM,QAAA,MAAM;IACb,KAAI;IACJ,QAAO;OACP,YAEgC,MAAA,eAAA,EAAA;IAD9B,QAAO;IACP,OAAM;OAER,mBAES,QAFT,YAES,gBADP,QAAA,MAAM,QAAK,KAAQ,QAAA,MAAM,KAAI,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA,CAAA,CAAA,IAAA,CAKrB,QAAA,MAAM,SAAS,QAAA,MAAM,QAAA,WAAA,EADnC,mBAMM,OANN,YAMM,CAHJ,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,SAAQ,CAAA,EAAA,MAAA,OAAA,CAAA,CAAA,EAAA,EAAA,gBACjB,QAAA,MAAM,KAAI,EAAA,EAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"Contact.vue.script.js","names":[],"sources":["../../../src/features/info-object/Contact.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconEnvelopeSimple, ScalarIconLink } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\nimport type { ContactObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\ndefineProps<{\n  value?: ContactObject\n}>()\n\nconst variants = cva({\n  base: 'text-c-1 mr-2 flex min-h-7 min-w-7 items-center rounded-lg px-2 py-1 group-last:mr-0 narrow:border',\n  variants: {\n    link: {\n      true: 'no-underline hover:bg-b-2',\n    },\n  },\n})\n</script>\n\n<template>\n  <template v-if=\"value\">\n    <!-- Each link gets its own wrapper so the dividers render between them -->\n    <div\n      v-if=\"value.email\"\n      class=\"group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0\">\n      <a\n        :class=\"variants({ link: true })\"\n        :href=\"`mailto:${value.email}`\">\n        <ScalarIconEnvelopeSimple\n          class=\"size-3 text-current\"\n          weight=\"bold\" />\n        <span class=\"ml-1 empty:hidden\">{{ value.name }}</span>\n      </a>\n    </div>\n    <div\n      v-if=\"value.url\"\n      class=\"group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0\">\n      <a\n        :class=\"variants({ link: true })\"\n        :href=\"value.url\"\n        rel=\"noopener noreferrer\"\n        target=\"_blank\">\n        <ScalarIconLink\n          class=\"size-3 text-current\"\n          weight=\"bold\" />\n        <!-- Avoid repeating the name when the email link already shows it -->\n        <span class=\"ml-1 empty:hidden\">{{\n          value.email ? '' : value.name\n        }}</span>\n      </a>\n    </div>\n    <div\n      v-else-if=\"!value.email && value.name\"\n      class=\"group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0\">\n      <span :class=\"variants({ link: false })\">\n        {{ value.name }}\n      </span>\n    </div>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EASA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,MAAM,EACJ,MAAM,6BACP,EACF;GACF,CAAA;;UAIiB,QAAA,SAAA,WAAA,EAAhB,mBAsCW,UAAA,EAAA,KAAA,GAAA,EAAA,CAnCD,QAAA,MAAM,SAAA,WAAA,EADd,mBAWM,OAXN,YAWM,CARJ,mBAOI,KAAA;IAND,OAAK,eAAE,MAAA,SAAQ,CAAA,EAAA,MAAA,MAAA,CAAA,CAAA;IACf,MAAI,UAAY,QAAA,MAAM;OACvB,YAEkB,MAAA,yBAAA,EAAA;IADhB,OAAM;IACN,QAAO;OACT,mBAAuD,QAAvD,YAAuD,gBAApB,QAAA,MAAM,KAAI,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,EAIzC,QAAA,MAAM,OAAA,WAAA,EADd,mBAgBM,OAhBN,YAgBM,CAbJ,mBAYI,KAAA;IAXD,OAAK,eAAE,MAAA,SAAQ,CAAA,EAAA,MAAA,MAAA,CAAA,CAAA;IACf,MAAM,QAAA,MAAM;IACb,KAAI;IACJ,QAAO;OACP,YAEkB,MAAA,eAAA,EAAA;IADhB,OAAM;IACN,QAAO;OAET,mBAES,QAFT,YAES,gBADP,QAAA,MAAM,QAAK,KAAQ,QAAA,MAAM,KAAI,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA,CAAA,CAAA,IAAA,CAKrB,QAAA,MAAM,SAAS,QAAA,MAAM,QAAA,WAAA,EADnC,mBAMM,OANN,YAMM,CAHJ,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,SAAQ,CAAA,EAAA,MAAA,OAAA,CAAA,CAAA,EAAA,EAAA,gBACjB,QAAA,MAAM,KAAI,EAAA,EAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/features/info-object/InfoLink.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoLink.vue.d.ts","sourceRoot":"","sources":["../../../src/features/info-object/InfoLink.vue"],"names":[],"mappings":"AA6BA,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ,CAAC;AAyEF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"InfoLink.vue.d.ts","sourceRoot":"","sources":["../../../src/features/info-object/InfoLink.vue"],"names":[],"mappings":"AA6BA,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ,CAAC;AA0EF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/info-object/InfoLink.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoLink.vue.js","names":[],"sources":["../../../src/features/info-object/InfoLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconLink } from '@scalar/icons'\n\ndefineProps<{\n  name: string\n  url: string\n}>()\n</script>\n\n<template>\n  <div\n    class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n    <a\n      class=\"text-c-1 hover:bg-b-2 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 no-underline group-last:mr-0 xl:border-none\"\n      :href=\"url\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\">\n      <ScalarIconLink\n        weight=\"bold\"\n        class=\"size-3 text-current\" />\n      <span class=\"ml-1 empty:hidden\">{{ name }}</span>\n    </a>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InfoLink.vue.js","names":[],"sources":["../../../src/features/info-object/InfoLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconLink } from '@scalar/icons'\n\ndefineProps<{\n  name: string\n  url: string\n}>()\n</script>\n\n<template>\n  <div\n    class=\"group narrow:border-r-0 narrow:first:ml-0 flex items-center border-r first:ml-auto last:border-r-0\">\n    <a\n      class=\"text-c-1 hover:bg-b-2 narrow:border mr-2 flex min-h-7 min-w-7 items-center rounded-lg px-2 py-1 no-underline group-last:mr-0\"\n      :href=\"url\"\n      rel=\"noopener noreferrer\"\n      target=\"_blank\">\n      <ScalarIconLink\n        class=\"size-3 text-current\"\n        weight=\"bold\" />\n      <span class=\"ml-1 empty:hidden\">{{ name }}</span>\n    </a>\n  </div>\n</template>\n"],"mappings":""}