@scalar/api-reference 1.59.0 → 1.59.2

package/dist/components/ApiReference.vue.script.js

@@ -56,7 +56,7 @@ var _hoisted_5 = {
 	key: 2,
 	class: "references-footer"
 };
-var version = "1.59.0";
+var version = "1.59.2";
 if (typeof window !== "undefined") console.info(`@scalar/api-reference@${version}`);
 var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ApiReference",

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":"AAgZA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAerE,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;AA+kBJ,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":"AAuZA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAerE,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;AAglBJ,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-b7fa71b9"]]);
+var ModernLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ModernLayout_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-af3f9eee"]]);
 //#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 { OperationCodeSample } from '@scalar/api-client/blocks/operation-code-sample'\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 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} = 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>()\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\" />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=\"Operation 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          OperationCodeSample'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            <OperationCodeSample\n              :key=\"requestBodyCompositionSelectionKey\"\n              :clientOptions\n              :eventBus\n              fallback\n              :isWebhook\n              :method\n              :operation\n              :path\n              :requestBodyCompositionSelection=\"\n                requestBodyCompositionSelectionForCodeSample\n              \"\n              :securitySchemes=\"selectedSecuritySchemes\"\n              :selectedClient\n              :selectedContentType=\"selectedRequestBodyContentType\"\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            </OperationCodeSample>\n          </ScalarErrorBoundary>\n\n          <ScalarErrorBoundary>\n            <ExampleResponses\n              v-if=\"operation.responses\"\n              :responses=\"operation.responses\"\n              style=\"margin-top: 12px\" />\n          </ScalarErrorBoundary>\n        </div>\n      </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-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  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</style>\n"],"mappings":""}
+{"version":3,"file":"ModernLayout.vue.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/blocks/operation-code-sample'\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 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} = 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>()\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\" />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=\"Operation 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          OperationCodeSample'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            <OperationCodeSample\n              :key=\"requestBodyCompositionSelectionKey\"\n              :clientOptions\n              :eventBus\n              fallback\n              :isWebhook\n              :method\n              :operation\n              :path\n              :requestBodyCompositionSelection=\"\n                requestBodyCompositionSelectionForCodeSample\n              \"\n              :securitySchemes=\"selectedSecuritySchemes\"\n              :selectedClient\n              :selectedContentType=\"selectedRequestBodyContentType\"\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            </OperationCodeSample>\n          </ScalarErrorBoundary>\n\n          <ScalarErrorBoundary>\n            <ExampleResponses\n              v-if=\"operation.responses\"\n              :responses=\"operation.responses\"\n              style=\"margin-top: 12px\" />\n          </ScalarErrorBoundary>\n        </div>\n      </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":""}

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 { OperationCodeSample } from '@scalar/api-client/blocks/operation-code-sample'\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 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} = 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>()\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\" />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=\"Operation 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          OperationCodeSample'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            <OperationCodeSample\n              :key=\"requestBodyCompositionSelectionKey\"\n              :clientOptions\n              :eventBus\n              fallback\n              :isWebhook\n              :method\n              :operation\n              :path\n              :requestBodyCompositionSelection=\"\n                requestBodyCompositionSelectionForCodeSample\n              \"\n              :securitySchemes=\"selectedSecuritySchemes\"\n              :selectedClient\n              :selectedContentType=\"selectedRequestBodyContentType\"\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            </OperationCodeSample>\n          </ScalarErrorBoundary>\n\n          <ScalarErrorBoundary>\n            <ExampleResponses\n              v-if=\"operation.responses\"\n              :responses=\"operation.responses\"\n              style=\"margin-top: 12px\" />\n          </ScalarErrorBoundary>\n        </div>\n      </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-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  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</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 { OperationCodeSample } from '@scalar/api-client/blocks/operation-code-sample'\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 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} = 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>()\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\" />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=\"Operation 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          OperationCodeSample'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            <OperationCodeSample\n              :key=\"requestBodyCompositionSelectionKey\"\n              :clientOptions\n              :eventBus\n              fallback\n              :isWebhook\n              :method\n              :operation\n              :path\n              :requestBodyCompositionSelection=\"\n                requestBodyCompositionSelectionForCodeSample\n              \"\n              :securitySchemes=\"selectedSecuritySchemes\"\n              :selectedClient\n              :selectedContentType=\"selectedRequestBodyContentType\"\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            </OperationCodeSample>\n          </ScalarErrorBoundary>\n\n          <ScalarErrorBoundary>\n            <ExampleResponses\n              v-if=\"operation.responses\"\n              :responses=\"operation.responses\"\n              style=\"margin-top: 12px\" />\n          </ScalarErrorBoundary>\n        </div>\n      </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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"}

package/dist/style.css

@@ -11298,9 +11298,10 @@ button.headers-card-title[data-v-4a9699e9]:hover {
  * its own leading margin (mt-6) that already spaces it from whatever precedes
  * it — a row-gap would double that gap.
  */
-.operation-layout[data-v-b7fa71b9] {
+.operation-layout[data-v-af3f9eee] {
   display: grid;
   grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto 1fr;
   grid-template-areas:
     'heading     badge'
     'description examples'
@@ -11308,7 +11309,7 @@ button.headers-card-title[data-v-4a9699e9]:hover {
   column-gap: 48px;
   row-gap: 0;
 }
-.operation-title[data-v-b7fa71b9] {
+.operation-title[data-v-af3f9eee] {
   grid-area: heading;
   margin-bottom: 12px;
 
@@ -11318,31 +11319,32 @@ button.headers-card-title[data-v-4a9699e9]:hover {
   color: var(--scalar-color-1);
   line-height: 1.45;
 }
-.operation-auth[data-v-b7fa71b9] {
+.operation-auth[data-v-af3f9eee] {
   grid-area: badge;
   justify-self: end;
   align-self: start;
 }
-.operation-description[data-v-b7fa71b9] {
+.operation-description[data-v-af3f9eee] {
   grid-area: description;
   min-width: 0;
 }
-.operation-details[data-v-b7fa71b9] {
+.operation-details[data-v-af3f9eee] {
   grid-area: details;
   min-width: 0;
 }
-.examples[data-v-b7fa71b9] {
+.examples[data-v-af3f9eee] {
   grid-area: examples;
+  align-self: start;
   min-width: 0;
 
   position: sticky;
   top: calc(var(--refs-viewport-offset) + 24px);
 }
-.examples[data-v-b7fa71b9] > * {
+.examples[data-v-af3f9eee] > * {
   max-height: calc((var(--refs-viewport-height) - 60px) / 2);
   position: relative;
 }
-.examples[data-v-b7fa71b9] > *:first-of-type:last-of-type {
+.examples[data-v-af3f9eee] > *:first-of-type:last-of-type {
   max-height: calc((var(--refs-viewport-height) - 60px));
 }
 
@@ -11351,11 +11353,11 @@ button.headers-card-title[data-v-4a9699e9]:hover {
  * (or zoomed in screens)
  */
 @media (max-width: 600px) {
-.examples[data-v-b7fa71b9] > * {
+.examples[data-v-af3f9eee] > * {
     max-height: unset;
 }
 }
-.deprecated[data-v-b7fa71b9] * {
+.deprecated[data-v-af3f9eee] * {
   text-decoration: line-through;
 }
 
@@ -11365,7 +11367,7 @@ button.headers-card-title[data-v-4a9699e9]:hover {
  * an eyebrow above the title.
  */
 @container narrow-references-container (max-width: 900px) {
-.operation-layout[data-v-b7fa71b9] {
+.operation-layout[data-v-af3f9eee] {
     grid-template-columns: 1fr;
     grid-template-areas:
       'badge'
@@ -11375,16 +11377,21 @@ button.headers-card-title[data-v-4a9699e9]:hover {
       'details';
     column-gap: 0;
 }
-.operation-auth[data-v-b7fa71b9] {
+.operation-auth[data-v-af3f9eee] {
     justify-self: start;
     margin-bottom: 4px;
 }
-.operation-title[data-v-b7fa71b9] {
+.operation-title[data-v-af3f9eee] {
     margin-bottom: 24px;
 }
-.operation-description[data-v-b7fa71b9] {
+.operation-description[data-v-af3f9eee] {
     margin-bottom: 24px;
 }
+
+  /* Don't make the examples sticky on narrow viewports */
+.examples[data-v-af3f9eee] {
+    position: static;
+}
 }
 
 .section-flare[data-v-5cebff7a] {

package/dist/vue-styles.css

@@ -2505,9 +2505,10 @@ button.headers-card-title[data-v-4a9699e9]:hover {
  * its own leading margin (mt-6) that already spaces it from whatever precedes
  * it — a row-gap would double that gap.
  */
-.operation-layout[data-v-b7fa71b9] {
+.operation-layout[data-v-af3f9eee] {
   display: grid;
   grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto 1fr;
   grid-template-areas:
     'heading     badge'
     'description examples'
@@ -2515,7 +2516,7 @@ button.headers-card-title[data-v-4a9699e9]:hover {
   column-gap: 48px;
   row-gap: 0;
 }
-.operation-title[data-v-b7fa71b9] {
+.operation-title[data-v-af3f9eee] {
   grid-area: heading;
   margin-bottom: 12px;
 
@@ -2525,31 +2526,32 @@ button.headers-card-title[data-v-4a9699e9]:hover {
   color: var(--scalar-color-1);
   line-height: 1.45;
 }
-.operation-auth[data-v-b7fa71b9] {
+.operation-auth[data-v-af3f9eee] {
   grid-area: badge;
   justify-self: end;
   align-self: start;
 }
-.operation-description[data-v-b7fa71b9] {
+.operation-description[data-v-af3f9eee] {
   grid-area: description;
   min-width: 0;
 }
-.operation-details[data-v-b7fa71b9] {
+.operation-details[data-v-af3f9eee] {
   grid-area: details;
   min-width: 0;
 }
-.examples[data-v-b7fa71b9] {
+.examples[data-v-af3f9eee] {
   grid-area: examples;
+  align-self: start;
   min-width: 0;
 
   position: sticky;
   top: calc(var(--refs-viewport-offset) + 24px);
 }
-.examples[data-v-b7fa71b9] > * {
+.examples[data-v-af3f9eee] > * {
   max-height: calc((var(--refs-viewport-height) - 60px) / 2);
   position: relative;
 }
-.examples[data-v-b7fa71b9] > *:first-of-type:last-of-type {
+.examples[data-v-af3f9eee] > *:first-of-type:last-of-type {
   max-height: calc((var(--refs-viewport-height) - 60px));
 }
 
@@ -2558,11 +2560,11 @@ button.headers-card-title[data-v-4a9699e9]:hover {
  * (or zoomed in screens)
  */
 @media (max-width: 600px) {
-.examples[data-v-b7fa71b9] > * {
+.examples[data-v-af3f9eee] > * {
     max-height: unset;
 }
 }
-.deprecated[data-v-b7fa71b9] * {
+.deprecated[data-v-af3f9eee] * {
   text-decoration: line-through;
 }
 
@@ -2572,7 +2574,7 @@ button.headers-card-title[data-v-4a9699e9]:hover {
  * an eyebrow above the title.
  */
 @container narrow-references-container (max-width: 900px) {
-.operation-layout[data-v-b7fa71b9] {
+.operation-layout[data-v-af3f9eee] {
     grid-template-columns: 1fr;
     grid-template-areas:
       'badge'
@@ -2582,16 +2584,21 @@ button.headers-card-title[data-v-4a9699e9]:hover {
       'details';
     column-gap: 0;
 }
-.operation-auth[data-v-b7fa71b9] {
+.operation-auth[data-v-af3f9eee] {
     justify-self: start;
     margin-bottom: 4px;
 }
-.operation-title[data-v-b7fa71b9] {
+.operation-title[data-v-af3f9eee] {
     margin-bottom: 24px;
 }
-.operation-description[data-v-b7fa71b9] {
+.operation-description[data-v-af3f9eee] {
     margin-bottom: 24px;
 }
+
+  /* Don't make the examples sticky on narrow viewports */
+.examples[data-v-af3f9eee] {
+    position: static;
+}
 }
 
 .section-flare[data-v-5cebff7a] {

package/package.json

@@ -20,7 +20,7 @@
     "vue",
     "vue3"
   ],
-  "version": "1.59.0",
+  "version": "1.59.2",
   "engines": {
     "node": ">=22"
   },
@@ -92,22 +92,22 @@
     "nanoid": "^5.1.6",
     "vue": "^3.5.30",
     "yaml": "^2.8.3",
-    "@scalar/agent-chat": "0.12.7",
-    "@scalar/code-highlight": "0.3.4",
-    "@scalar/api-client": "3.10.0",
-    "@scalar/components": "0.27.0",
+    "@scalar/api-client": "3.10.2",
+    "@scalar/agent-chat": "0.12.9",
+    "@scalar/code-highlight": "0.3.5",
+    "@scalar/components": "0.27.1",
+    "@scalar/helpers": "0.8.2",
     "@scalar/icons": "0.7.3",
-    "@scalar/sidebar": "0.9.19",
-    "@scalar/helpers": "0.8.1",
-    "@scalar/oas-utils": "0.18.1",
-    "@scalar/schemas": "0.4.0",
-    "@scalar/snippetz": "0.9.13",
+    "@scalar/oas-utils": "0.18.3",
+    "@scalar/schemas": "0.4.2",
+    "@scalar/sidebar": "0.9.21",
+    "@scalar/snippetz": "0.9.15",
     "@scalar/themes": "0.16.0",
+    "@scalar/types": "0.13.2",
     "@scalar/use-hooks": "0.4.6",
     "@scalar/use-toasts": "0.10.2",
-    "@scalar/types": "0.13.0",
-    "@scalar/workspace-store": "0.54.0",
-    "@scalar/validation": "0.6.0"
+    "@scalar/validation": "0.6.0",
+    "@scalar/workspace-store": "0.54.2"
   },
   "devDependencies": {
     "@hono/node-server": "^1.19.10",
@@ -126,8 +126,8 @@
     "vite-plugin-banner": "^0.8.1",
     "vite-plugin-css-injected-by-js": "^5.0.0",
     "vitest": "4.1.0",
-    "@scalar/galaxy": "0.6.6",
-    "@scalar/core": "0.5.14"
+    "@scalar/core": "0.5.16",
+    "@scalar/galaxy": "0.6.7"
   },
   "scripts": {
     "build": "pnpm build:default && pnpm build:styles && pnpm build:standalone && pnpm build:standalone:esm && vue-tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",