@scalar/api-reference 1.63.0 → 1.64.1

package/dist/blocks/scalar-info-block/components/IntroductionLayout.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionLayout.vue.script.js","names":["$slots"],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport type { Heading } from '@scalar/types/legacy'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContainer,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { useLocalization } from '@/features/localization'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nimport InfoDescription from './InfoDescription.vue'\nimport InfoLinks from './InfoLinks.vue'\nimport InfoVersion from './InfoVersion.vue'\nimport IntroductionLoading from './IntroductionLoading.vue'\nimport SpecificationVersion from './SpecificationVersion.vue'\n\ndefineProps<{\n  id: string | undefined\n  documentType?: 'openapi' | 'asyncapi'\n  specificationVersion: string | undefined\n  info: InfoObject | AsyncApiInfoObject | undefined\n  externalDocs?: ExternalDocumentationObject\n  documentExtensions?: Record<string, unknown>\n  infoExtensions?: Record<string, unknown>\n  headingSlugGenerator: (heading: Heading) => string\n  eventBus: WorkspaceEventBus | null\n}>()\n\nconst { translate } = useLocalization()\n</script>\n\n<template>\n  <SectionContainer>\n    <!-- If the #after slot is used, we need to add a gap to the section. -->\n    <Section\n      :id=\"id\"\n      :aria-label=\"translate('navigation.introduction')\"\n      class=\"introduction-section z-1 gap-12\"\n      @intersecting=\"\n        () => id && eventBus?.emit('intersecting:nav-item', { id })\n      \">\n      <SectionContent>\n        <!-- While the document loads we show a skeleton that mirrors this layout. -->\n        <IntroductionLoading\n          v-if=\"!info\"\n          :hasAside=\"Boolean($slots.aside)\" />\n\n        <template v-else>\n          <div class=\"flex gap-1.5\">\n            <InfoVersion :version=\"info?.version\" />\n            <SpecificationVersion\n              :documentType\n              :version=\"specificationVersion\" />\n          </div>\n          <SectionHeader tight>\n            <SectionHeaderTag :level=\"1\">\n              {{ info?.title }}\n            </SectionHeaderTag>\n            <template #links>\n              <InfoLinks\n                :externalDocs=\"externalDocs\"\n                :info=\"info\" />\n            </template>\n          </SectionHeader>\n          <SectionColumns>\n            <SectionColumn>\n              <slot name=\"download-link\" />\n              <InfoDescription\n                :description=\"info?.description\"\n                :eventBus=\"eventBus\"\n                :headingSlugGenerator=\"headingSlugGenerator\" />\n            </SectionColumn>\n            <SectionColumn v-if=\"$slots.aside\">\n              <div class=\"sticky-cards\">\n                <slot name=\"aside\" />\n              </div>\n            </SectionColumn>\n          </SectionColumns>\n          <SpecificationExtension :value=\"documentExtensions\" />\n          <SpecificationExtension :value=\"infoExtensions\" />\n        </template>\n      </SectionContent>\n      <slot name=\"after\" />\n    </Section>\n  </SectionContainer>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCA,MAAM,EAAE,cAAc,iBAAgB;;uBAIpC,YAoDmB,MAAA,yBAAA,EAAA,MAAA;2BADP,CAjDV,YAiDU,MAAA,gBAAA,EAAA;KAhDP,IAAI,QAAA;KACJ,cAAY,MAAA,UAAS,CAAA,0BAAA;KACtB,OAAM;KACL,gBAAY,OAAA,OAAA,OAAA,WAAiB,QAAA,MAAM,QAAA,UAAU,KAAI,yBAAA,EAAA,IAA4B,QAAA,IAAE,CAAA;;4BA2C/D,CAxCjB,YAwCiB,MAAA,uBAAA,EAAA,MAAA;6BApCuB,CAAA,CAD7B,QAAA,QAAA,WAAA,EADT,YAEsC,6BAAA;;OAAnC,UAAU,QAAQA,KAAAA,OAAO,MAAK;iDAEjC,mBAiCW,UAAA,EAAA,KAAA,GAAA,EAAA;OAhCT,mBAKM,OALN,YAKM,CAJJ,YAAwC,qBAAA,EAA1B,SAAS,QAAA,MAAM,SAAA,EAAA,MAAA,GAAA,CAAA,UAAA,CAAA,EAC7B,YAEoC,8BAAA;QADjC,cAAA,QAAA;QACA,SAAS,QAAA;;OAEd,YASgB,MAAA,sBAAA,EAAA,EATD,OAAA,IAAK,EAAA;QAIP,OAAK,cAGG,CAFjB,YAEiB,mBAAA;SADd,cAAc,QAAA;SACd,MAAM,QAAA;;+BAJQ,CAFnB,YAEmB,MAAA,yBAAA,EAAA,EAFA,OAAO,GAAC,EAAA;gCACR,CAAA,gBAAA,gBAAd,QAAA,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;OAQlB,YAaiB,MAAA,uBAAA,EAAA,MAAA;+BANC,CANhB,YAMgB,MAAA,sBAAA,EAAA,MAAA;gCALe,CAA7B,WAA6B,KAAA,QAAA,iBAAA,EAAA,EAAA,KAAA,GAAA,KAAA,EAC7B,YAGiD,yBAAA;UAF9C,aAAa,QAAA,MAAM;UACnB,UAAU,QAAA;UACV,sBAAsB,QAAA;;;;;;;YAENA,KAAAA,OAAO,SAAA,WAAA,EAA5B,YAIgB,MAAA,sBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;gCADR,CAFN,mBAEM,OAFN,YAEM,CADJ,WAAqB,KAAA,QAAA,SAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA,CAAA,CAAA;;;;;OAI3B,YAAsD,MAAA,+BAAA,EAAA,EAA7B,OAAO,QAAA,oBAAkB,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA;OAClD,YAAkD,MAAA,+BAAA,EAAA,EAAzB,OAAO,QAAA,gBAAc,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA;;;SAGlD,WAAqB,KAAA,QAAA,SAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA"}
+{"version":3,"file":"IntroductionLayout.vue.script.js","names":["$slots"],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport type { Heading } from '@scalar/types/legacy'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContainer,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { useLocalization } from '@/features/localization'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nimport InfoDescription from './InfoDescription.vue'\nimport InfoLinks from './InfoLinks.vue'\nimport InfoVersion from './InfoVersion.vue'\nimport IntroductionLoading from './IntroductionLoading.vue'\nimport SpecificationVersion from './SpecificationVersion.vue'\n\ndefineProps<{\n  id: string | undefined\n  documentType?: 'openapi' | 'asyncapi'\n  specificationVersion: string | undefined\n  info: InfoObject | AsyncApiInfoObject | undefined\n  externalDocs?: ExternalDocumentationObject\n  documentExtensions?: Record<string, unknown>\n  infoExtensions?: Record<string, unknown>\n  headingSlugGenerator: (heading: Heading) => string\n  eventBus: WorkspaceEventBus | null\n}>()\n\nconst { translate } = useLocalization()\n</script>\n\n<template>\n  <SectionContainer>\n    <!-- If the #after slot is used, we need to add a gap to the section. -->\n    <Section\n      :id=\"id\"\n      :aria-label=\"translate('navigation.introduction')\"\n      class=\"introduction-section z-1 gap-12\"\n      @intersecting=\"\n        () => id && eventBus?.emit('intersecting:nav-item', { id })\n      \">\n      <SectionContent>\n        <!-- While the document loads we show a skeleton that mirrors this layout. -->\n        <IntroductionLoading\n          v-if=\"!info\"\n          :hasAside=\"Boolean($slots.aside)\" />\n\n        <template v-else>\n          <div class=\"flex gap-1.5\">\n            <InfoVersion :version=\"info?.version\" />\n            <SpecificationVersion\n              :documentType\n              :version=\"specificationVersion\" />\n          </div>\n          <SectionHeader tight>\n            <SectionHeaderTag :level=\"1\">\n              {{ info?.title }}\n            </SectionHeaderTag>\n            <template #links>\n              <InfoLinks\n                :externalDocs=\"externalDocs\"\n                :info=\"info\" />\n            </template>\n          </SectionHeader>\n          <SectionColumns>\n            <SectionColumn>\n              <slot name=\"download-link\" />\n              <InfoDescription\n                :description=\"info?.description\"\n                :eventBus=\"eventBus\"\n                :headingSlugGenerator=\"headingSlugGenerator\" />\n            </SectionColumn>\n            <SectionColumn v-if=\"$slots.aside\">\n              <div class=\"sticky-cards\">\n                <slot name=\"aside\" />\n              </div>\n            </SectionColumn>\n          </SectionColumns>\n          <SpecificationExtension :value=\"documentExtensions\" />\n          <SpecificationExtension :value=\"infoExtensions\" />\n        </template>\n      </SectionContent>\n      <slot name=\"after\" />\n    </Section>\n  </SectionContainer>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCA,MAAM,EAAE,cAAc,gBAAgB;;uBAIpC,YAoDmB,MAAA,wBAAA,GAAA,MAAA;2BADP,CAjDV,YAiDU,MAAA,eAAA,GAAA;KAhDP,IAAI,QAAA;KACJ,cAAY,MAAA,SAAA,CAAS,CAAA,yBAAA;KACtB,OAAM;KACL,gBAAY,OAAA,OAAA,OAAA,WAAiB,QAAA,MAAM,QAAA,UAAU,KAAI,yBAAA,EAAA,IAA4B,QAAA,GAAE,CAAA;;4BA2C/D,CAxCjB,YAwCiB,MAAA,sBAAA,GAAA,MAAA;6BApCuB,CAAA,CAD7B,QAAA,QAAA,UAAA,GADT,YAEsC,6BAAA;;OAAnC,UAAU,QAAQA,KAAAA,OAAO,KAAK;iDAEjC,mBAiCW,UAAA,EAAA,KAAA,EAAA,GAAA;OAhCT,mBAKM,OALN,YAKM,CAJJ,YAAwC,qBAAA,EAA1B,SAAS,QAAA,MAAM,QAAA,GAAA,MAAA,GAAA,CAAA,SAAA,CAAA,GAC7B,YAEoC,8BAAA;QADjC,cAAA,QAAA;QACA,SAAS,QAAA;;OAEd,YASgB,MAAA,qBAAA,GAAA,EATD,OAAA,GAAK,GAAA;QAIP,OAAK,cAGG,CAFjB,YAEiB,mBAAA;SADd,cAAc,QAAA;SACd,MAAM,QAAA;;+BAJQ,CAFnB,YAEmB,MAAA,wBAAA,GAAA,EAFA,OAAO,EAAC,GAAA;gCACR,CAAA,gBAAA,gBAAd,QAAA,MAAM,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;OAQlB,YAaiB,MAAA,sBAAA,GAAA,MAAA;+BANC,CANhB,YAMgB,MAAA,qBAAA,GAAA,MAAA;gCALe,CAA7B,WAA6B,KAAA,QAAA,iBAAA,CAAA,GAAA,KAAA,GAAA,IAAA,GAC7B,YAGiD,yBAAA;UAF9C,aAAa,QAAA,MAAM;UACnB,UAAU,QAAA;UACV,sBAAsB,QAAA;;;;;;;YAENA,KAAAA,OAAO,SAAA,UAAA,GAA5B,YAIgB,MAAA,qBAAA,GAAA,EAAA,KAAA,EAAA,GAAA;gCADR,CAFN,mBAEM,OAFN,YAEM,CADJ,WAAqB,KAAA,QAAA,SAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA,CAAA,CAAA;;;;;OAI3B,YAAsD,MAAA,8BAAA,GAAA,EAA7B,OAAO,QAAA,mBAAkB,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA;OAClD,YAAkD,MAAA,8BAAA,GAAA,EAAzB,OAAO,QAAA,eAAc,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA;;;SAGlD,WAAqB,KAAA,QAAA,SAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA"}

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionLoading.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"names":[],"mappings":"AAyGA,KAAK,WAAW,GAAG;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA8PF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"IntroductionLoading.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"names":[],"mappings":"AA0GA,KAAK,WAAW,GAAG;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA8PF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import IntroductionLoading_vue_vue_type_script_setup_true_lang_default from "./IntroductionLoading.vue.script.js";
 /* empty css                                  */
 //#region src/blocks/scalar-info-block/components/IntroductionLoading.vue
-var IntroductionLoading_default = /* @__PURE__ */ _plugin_vue_export_helper_default(IntroductionLoading_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1bd6e256"]]);
+var IntroductionLoading_default = /*#__PURE__*/ _plugin_vue_export_helper_default(IntroductionLoading_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-41a61989"]]);
 //#endregion
 export { IntroductionLoading_default as default };
 

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionLoading.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Loading skeleton for the introduction block. It mirrors the real layout\n * (badges, title, links, description and selector cards) so the page does not\n * jump once the document has loaded.\n */\nimport { SectionColumn, SectionColumns } from '@/components/Section'\n\nconst { hasAside = true } = defineProps<{\n  /**\n   * Whether the selector cards live in a sticky aside column (modern layout)\n   * or in a row below the description (classic layout). Mirrors the\n   * `$slots.aside` check in the loaded layout.\n   */\n  hasAside?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    class=\"introduction-loading flex flex-col gap-5\"\n    aria-hidden=\"true\">\n    <!-- Version and specification badges -->\n    <div class=\"flex gap-1.5\">\n      <div class=\"introduction-skeleton h-6 w-14 rounded-full\" />\n      <div class=\"introduction-skeleton h-6 w-24 rounded-full\" />\n    </div>\n    <!-- Title and links (mirrors SectionHeader's two-column grid at xl) -->\n    <div class=\"grid grid-cols-1 gap-3 xl:grid-cols-2 xl:gap-12\">\n      <div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" />\n      <div class=\"flex flex-wrap items-center gap-2 xl:justify-end\">\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-12 rounded\" />\n      </div>\n    </div>\n    <SectionColumns>\n      <SectionColumn>\n        <div class=\"flex flex-col gap-3\">\n          <!-- Download link -->\n          <div class=\"introduction-skeleton mb-2 h-5 w-56 rounded\" />\n          <!-- Description -->\n          <div class=\"introduction-skeleton h-4 w-full rounded\" />\n          <div class=\"introduction-skeleton h-4 w-11/12 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-4/5 rounded\" />\n          <!-- Section heading -->\n          <div class=\"introduction-skeleton mt-4 h-6 w-40 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-3/4 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-2/3 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-1/2 rounded\" />\n        </div>\n      </SectionColumn>\n      <!-- Modern layout: selector cards in a sticky aside column -->\n      <SectionColumn v-if=\"hasAside\">\n        <div class=\"sticky-cards gap-3\">\n          <div class=\"introduction-skeleton h-20 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n        </div>\n      </SectionColumn>\n    </SectionColumns>\n    <!-- Classic layout: selector cards in a row below the description -->\n    <div\n      v-if=\"!hasAside\"\n      class=\"flex flex-col gap-3 sm:flex-row sm:gap-6\">\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n/* Pulsing placeholder, matching the look of the rest of the loading states. */\n.introduction-skeleton {\n  background: var(--scalar-background-3);\n  animation: introduction-skeleton-pulse 1.5s infinite alternate;\n}\n\n@keyframes introduction-skeleton-pulse {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0.33;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"IntroductionLoading.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Loading skeleton for the introduction block. It mirrors the real layout\n * (badges, title, links, description and selector cards) so the page does not\n * jump once the document has loaded.\n */\nimport { SectionColumn, SectionColumns } from '@/components/Section'\n\nconst { hasAside = true } = defineProps<{\n  /**\n   * Whether the selector cards live in a sticky aside column (modern layout)\n   * or in a row below the description (classic layout). Mirrors the\n   * `$slots.aside` check in the loaded layout.\n   */\n  hasAside?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"introduction-loading flex flex-col gap-5\">\n    <!-- Version and specification badges -->\n    <div class=\"flex gap-1.5\">\n      <div class=\"introduction-skeleton h-6 w-14 rounded-full\" />\n      <div class=\"introduction-skeleton h-6 w-24 rounded-full\" />\n    </div>\n    <!-- Title and links (mirrors SectionHeader's two-column grid on wide references) -->\n    <div class=\"narrow:grid-cols-1 narrow:gap-3 grid grid-cols-2 gap-12\">\n      <div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" />\n      <div\n        class=\"narrow:justify-start flex flex-wrap items-center justify-end gap-2\">\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-12 rounded\" />\n      </div>\n    </div>\n    <SectionColumns>\n      <SectionColumn>\n        <div class=\"flex flex-col gap-3\">\n          <!-- Download link -->\n          <div class=\"introduction-skeleton mb-2 h-5 w-56 rounded\" />\n          <!-- Description -->\n          <div class=\"introduction-skeleton h-4 w-full rounded\" />\n          <div class=\"introduction-skeleton h-4 w-11/12 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-4/5 rounded\" />\n          <!-- Section heading -->\n          <div class=\"introduction-skeleton mt-4 h-6 w-40 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-3/4 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-2/3 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-1/2 rounded\" />\n        </div>\n      </SectionColumn>\n      <!-- Modern layout: selector cards in a sticky aside column -->\n      <SectionColumn v-if=\"hasAside\">\n        <div class=\"sticky-cards gap-3\">\n          <div class=\"introduction-skeleton h-20 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n        </div>\n      </SectionColumn>\n    </SectionColumns>\n    <!-- Classic layout: selector cards in a row below the description -->\n    <div\n      v-if=\"!hasAside\"\n      class=\"narrow:flex-col narrow:gap-3 flex gap-6\">\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n/* Pulsing placeholder, matching the look of the rest of the loading states. */\n.introduction-skeleton {\n  background: var(--scalar-background-3);\n  animation: introduction-skeleton-pulse 1.5s infinite alternate;\n}\n\n@keyframes introduction-skeleton-pulse {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0.33;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.script.js

@@ -3,14 +3,14 @@ import SectionColumns_default from "../../../components/Section/SectionColumns.v
 import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
 //#region src/blocks/scalar-info-block/components/IntroductionLoading.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
-	class: "introduction-loading flex flex-col gap-5",
-	"aria-hidden": "true"
+	"aria-hidden": "true",
+	class: "introduction-loading flex flex-col gap-5"
 };
 var _hoisted_2 = {
 	key: 0,
-	class: "flex flex-col gap-3 sm:flex-row sm:gap-6"
+	class: "narrow:flex-col narrow:gap-3 flex gap-6"
 };
-var IntroductionLoading_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var IntroductionLoading_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "IntroductionLoading",
 	props: { hasAside: {
 		type: Boolean,
@@ -24,7 +24,7 @@ var IntroductionLoading_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		*/
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
-				_cache[3] || (_cache[3] = createStaticVNode("<div class=\"flex gap-1.5\" data-v-1bd6e256><div class=\"introduction-skeleton h-6 w-14 rounded-full\" data-v-1bd6e256></div><div class=\"introduction-skeleton h-6 w-24 rounded-full\" data-v-1bd6e256></div></div><div class=\"grid grid-cols-1 gap-3 xl:grid-cols-2 xl:gap-12\" data-v-1bd6e256><div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" data-v-1bd6e256></div><div class=\"flex flex-wrap items-center gap-2 xl:justify-end\" data-v-1bd6e256><div class=\"introduction-skeleton h-5 w-28 rounded\" data-v-1bd6e256></div><div class=\"introduction-skeleton h-5 w-28 rounded\" data-v-1bd6e256></div><div class=\"introduction-skeleton h-5 w-12 rounded\" data-v-1bd6e256></div></div></div>", 2)),
+				_cache[3] || (_cache[3] = createStaticVNode("<div class=\"flex gap-1.5\" data-v-41a61989><div class=\"introduction-skeleton h-6 w-14 rounded-full\" data-v-41a61989></div><div class=\"introduction-skeleton h-6 w-24 rounded-full\" data-v-41a61989></div></div><div class=\"narrow:grid-cols-1 narrow:gap-3 grid grid-cols-2 gap-12\" data-v-41a61989><div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" data-v-41a61989></div><div class=\"narrow:justify-start flex flex-wrap items-center justify-end gap-2\" data-v-41a61989><div class=\"introduction-skeleton h-5 w-28 rounded\" data-v-41a61989></div><div class=\"introduction-skeleton h-5 w-28 rounded\" data-v-41a61989></div><div class=\"introduction-skeleton h-5 w-12 rounded\" data-v-41a61989></div></div></div>", 2)),
 				createVNode(unref(SectionColumns_default), null, {
 					default: withCtx(() => [createVNode(unref(SectionColumn_default), null, {
 						default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "flex flex-col gap-3" }, [

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionLoading.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Loading skeleton for the introduction block. It mirrors the real layout\n * (badges, title, links, description and selector cards) so the page does not\n * jump once the document has loaded.\n */\nimport { SectionColumn, SectionColumns } from '@/components/Section'\n\nconst { hasAside = true } = defineProps<{\n  /**\n   * Whether the selector cards live in a sticky aside column (modern layout)\n   * or in a row below the description (classic layout). Mirrors the\n   * `$slots.aside` check in the loaded layout.\n   */\n  hasAside?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    class=\"introduction-loading flex flex-col gap-5\"\n    aria-hidden=\"true\">\n    <!-- Version and specification badges -->\n    <div class=\"flex gap-1.5\">\n      <div class=\"introduction-skeleton h-6 w-14 rounded-full\" />\n      <div class=\"introduction-skeleton h-6 w-24 rounded-full\" />\n    </div>\n    <!-- Title and links (mirrors SectionHeader's two-column grid at xl) -->\n    <div class=\"grid grid-cols-1 gap-3 xl:grid-cols-2 xl:gap-12\">\n      <div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" />\n      <div class=\"flex flex-wrap items-center gap-2 xl:justify-end\">\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-12 rounded\" />\n      </div>\n    </div>\n    <SectionColumns>\n      <SectionColumn>\n        <div class=\"flex flex-col gap-3\">\n          <!-- Download link -->\n          <div class=\"introduction-skeleton mb-2 h-5 w-56 rounded\" />\n          <!-- Description -->\n          <div class=\"introduction-skeleton h-4 w-full rounded\" />\n          <div class=\"introduction-skeleton h-4 w-11/12 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-4/5 rounded\" />\n          <!-- Section heading -->\n          <div class=\"introduction-skeleton mt-4 h-6 w-40 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-3/4 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-2/3 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-1/2 rounded\" />\n        </div>\n      </SectionColumn>\n      <!-- Modern layout: selector cards in a sticky aside column -->\n      <SectionColumn v-if=\"hasAside\">\n        <div class=\"sticky-cards gap-3\">\n          <div class=\"introduction-skeleton h-20 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n        </div>\n      </SectionColumn>\n    </SectionColumns>\n    <!-- Classic layout: selector cards in a row below the description -->\n    <div\n      v-if=\"!hasAside\"\n      class=\"flex flex-col gap-3 sm:flex-row sm:gap-6\">\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n/* Pulsing placeholder, matching the look of the rest of the loading states. */\n.introduction-skeleton {\n  background: var(--scalar-background-3);\n  animation: introduction-skeleton-pulse 1.5s infinite alternate;\n}\n\n@keyframes introduction-skeleton-pulse {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0.33;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;uBAmBE,mBAkDM,OAlDN,YAkDM;;IAjCJ,YAwBiB,MAAA,uBAAA,EAAA,MAAA;4BATC,CAdhB,YAcgB,MAAA,sBAAA,EAAA,MAAA;6BADR,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAZN,mBAYM,OAAA,EAZD,OAAM,uBAAqB,EAAA;OAE9B,mBAA2D,OAAA,EAAtD,OAAM,+CAA6C,CAAA;OAExD,mBAAwD,OAAA,EAAnD,OAAM,4CAA0C,CAAA;OACrD,mBAAyD,OAAA,EAApD,OAAM,6CAA2C,CAAA;OACtD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;OAEpD,mBAA2D,OAAA,EAAtD,OAAM,+CAA6C,CAAA;OACxD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;OACpD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;OACpD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;;;SAInC,QAAA,YAAA,WAAA,EAArB,YAMgB,MAAA,sBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;6BADR,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAJN,mBAIM,OAAA,EAJD,OAAM,sBAAoB,EAAA;OAC7B,mBAA4D,OAAA,EAAvD,OAAM,gDAA8C,CAAA;OACzD,mBAA4D,OAAA,EAAvD,OAAM,gDAA8C,CAAA;OACzD,mBAA4D,OAAA,EAAvD,OAAM,gDAA8C,CAAA;;;;;;KAMtD,QAAA,YAAA,WAAA,EADT,mBAMM,OANN,YAMM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA;KAHJ,mBAAmE,OAAA,EAA9D,OAAM,uDAAqD,EAAA,MAAA,GAAA;KAChE,mBAAmE,OAAA,EAA9D,OAAM,uDAAqD,EAAA,MAAA,GAAA;KAChE,mBAAmE,OAAA,EAA9D,OAAM,uDAAqD,EAAA,MAAA,GAAA"}
+{"version":3,"file":"IntroductionLoading.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Loading skeleton for the introduction block. It mirrors the real layout\n * (badges, title, links, description and selector cards) so the page does not\n * jump once the document has loaded.\n */\nimport { SectionColumn, SectionColumns } from '@/components/Section'\n\nconst { hasAside = true } = defineProps<{\n  /**\n   * Whether the selector cards live in a sticky aside column (modern layout)\n   * or in a row below the description (classic layout). Mirrors the\n   * `$slots.aside` check in the loaded layout.\n   */\n  hasAside?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"introduction-loading flex flex-col gap-5\">\n    <!-- Version and specification badges -->\n    <div class=\"flex gap-1.5\">\n      <div class=\"introduction-skeleton h-6 w-14 rounded-full\" />\n      <div class=\"introduction-skeleton h-6 w-24 rounded-full\" />\n    </div>\n    <!-- Title and links (mirrors SectionHeader's two-column grid on wide references) -->\n    <div class=\"narrow:grid-cols-1 narrow:gap-3 grid grid-cols-2 gap-12\">\n      <div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" />\n      <div\n        class=\"narrow:justify-start flex flex-wrap items-center justify-end gap-2\">\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-12 rounded\" />\n      </div>\n    </div>\n    <SectionColumns>\n      <SectionColumn>\n        <div class=\"flex flex-col gap-3\">\n          <!-- Download link -->\n          <div class=\"introduction-skeleton mb-2 h-5 w-56 rounded\" />\n          <!-- Description -->\n          <div class=\"introduction-skeleton h-4 w-full rounded\" />\n          <div class=\"introduction-skeleton h-4 w-11/12 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-4/5 rounded\" />\n          <!-- Section heading -->\n          <div class=\"introduction-skeleton mt-4 h-6 w-40 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-3/4 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-2/3 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-1/2 rounded\" />\n        </div>\n      </SectionColumn>\n      <!-- Modern layout: selector cards in a sticky aside column -->\n      <SectionColumn v-if=\"hasAside\">\n        <div class=\"sticky-cards gap-3\">\n          <div class=\"introduction-skeleton h-20 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n        </div>\n      </SectionColumn>\n    </SectionColumns>\n    <!-- Classic layout: selector cards in a row below the description -->\n    <div\n      v-if=\"!hasAside\"\n      class=\"narrow:flex-col narrow:gap-3 flex gap-6\">\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n/* Pulsing placeholder, matching the look of the rest of the loading states. */\n.introduction-skeleton {\n  background: var(--scalar-background-3);\n  animation: introduction-skeleton-pulse 1.5s infinite alternate;\n}\n\n@keyframes introduction-skeleton-pulse {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0.33;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;uBAmBE,mBAmDM,OAnDN,YAmDM;;IAjCJ,YAwBiB,MAAA,sBAAA,GAAA,MAAA;4BATC,CAdhB,YAcgB,MAAA,qBAAA,GAAA,MAAA;6BADR,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAZN,mBAYM,OAAA,EAZD,OAAM,sBAAqB,GAAA;OAE9B,mBAA2D,OAAA,EAAtD,OAAM,8CAA6C,CAAA;OAExD,mBAAwD,OAAA,EAAnD,OAAM,2CAA0C,CAAA;OACrD,mBAAyD,OAAA,EAApD,OAAM,4CAA2C,CAAA;OACtD,mBAAuD,OAAA,EAAlD,OAAM,0CAAyC,CAAA;OAEpD,mBAA2D,OAAA,EAAtD,OAAM,8CAA6C,CAAA;OACxD,mBAAuD,OAAA,EAAlD,OAAM,0CAAyC,CAAA;OACpD,mBAAuD,OAAA,EAAlD,OAAM,0CAAyC,CAAA;OACpD,mBAAuD,OAAA,EAAlD,OAAM,0CAAyC,CAAA;;;SAInC,QAAA,YAAA,UAAA,GAArB,YAMgB,MAAA,qBAAA,GAAA,EAAA,KAAA,EAAA,GAAA;6BADR,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAJN,mBAIM,OAAA,EAJD,OAAM,qBAAoB,GAAA;OAC7B,mBAA4D,OAAA,EAAvD,OAAM,+CAA8C,CAAA;OACzD,mBAA4D,OAAA,EAAvD,OAAM,+CAA8C,CAAA;OACzD,mBAA4D,OAAA,EAAvD,OAAM,+CAA8C,CAAA;;;;;;KAMtD,QAAA,YAAA,UAAA,GADT,mBAMM,OANN,YAMM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA;KAHJ,mBAAmE,OAAA,EAA9D,OAAM,sDAAqD,GAAA,MAAA,EAAA;KAChE,mBAAmE,OAAA,EAA9D,OAAM,sDAAqD,GAAA,MAAA,EAAA;KAChE,mBAAmE,OAAA,EAA9D,OAAM,sDAAqD,GAAA,MAAA,EAAA"}

package/dist/blocks/scalar-info-block/components/SpecificationVersion.vue.script.js

@@ -2,7 +2,7 @@ import Badge_default from "../../../components/Badge/Badge.vue.js";
 import { computed, createBlock, createCommentVNode, createTextVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { getDocumentTypeLabel } from "@scalar/workspace-store/schemas/type-guards";
 //#region src/blocks/scalar-info-block/components/SpecificationVersion.vue?vue&type=script&setup=true&lang.ts
-var SpecificationVersion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var SpecificationVersion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "SpecificationVersion",
 	props: {
 		documentType: { default: "openapi" },

package/dist/blocks/scalar-info-block/components/SpecificationVersion.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpecificationVersion.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/SpecificationVersion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getDocumentTypeLabel } from '@scalar/workspace-store/schemas/type-guards'\nimport { computed } from 'vue'\n\nimport { Badge } from '@/components/Badge'\n\nconst { documentType = 'openapi', version } = defineProps<{\n  /** The kind of document being described. Drives the badge label. */\n  documentType?: 'openapi' | 'asyncapi'\n  /** The original specification version (e.g. \"3.1.0\" for OpenAPI, \"3.0.0\" for AsyncAPI). */\n  version?: string\n}>()\n\nconst label = computed(() => getDocumentTypeLabel(documentType))\n</script>\n\n<template>\n  <Badge v-if=\"version\">{{ label }} {{ version }}</Badge>\n</template>\n"],"mappings":";;;;;;;;;;;EAaA,MAAM,QAAQ,eAAe,qBAAqB,QAAA,aAAa,CAAA;;UAIhD,QAAA,WAAA,WAAA,EAAb,YAAuD,MAAA,cAAA,EAAA,EAAA,KAAA,GAAA,EAAA;2BAAtB,CAAA,gBAAA,gBAAR,MAAA,MAAK,GAAG,MAAC,gBAAG,QAAA,QAAO,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"SpecificationVersion.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/SpecificationVersion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getDocumentTypeLabel } from '@scalar/workspace-store/schemas/type-guards'\nimport { computed } from 'vue'\n\nimport { Badge } from '@/components/Badge'\n\nconst { documentType = 'openapi', version } = defineProps<{\n  /** The kind of document being described. Drives the badge label. */\n  documentType?: 'openapi' | 'asyncapi'\n  /** The original specification version (e.g. \"3.1.0\" for OpenAPI, \"3.0.0\" for AsyncAPI). */\n  version?: string\n}>()\n\nconst label = computed(() => getDocumentTypeLabel(documentType))\n</script>\n\n<template>\n  <Badge v-if=\"version\">{{ label }} {{ version }}</Badge>\n</template>\n"],"mappings":";;;;;;;;;;;EAaA,MAAM,QAAQ,eAAe,qBAAqB,QAAA,YAAY,CAAC;;UAIhD,QAAA,WAAA,UAAA,GAAb,YAAuD,MAAA,aAAA,GAAA,EAAA,KAAA,EAAA,GAAA;2BAAtB,CAAA,gBAAA,gBAAR,MAAA,KAAK,IAAG,MAAC,gBAAG,QAAA,OAAO,GAAA,CAAA,CAAA,CAAA"}

package/dist/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SdkInstallationInstructions.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue"],"names":[],"mappings":"AAqgBA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+EAA+E,CAAA;AAiB3H,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,sBAAsB,CAAC,EAAE,sBAAsB,CAAC,2BAA2B,CAAC,CAAA;IAC5E;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CAC7B,CAAC;AA0fF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"SdkInstallationInstructions.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue"],"names":[],"mappings":"AAkhBA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+EAA+E,CAAA;AAiB3H,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,sBAAsB,CAAC,EAAE,sBAAsB,CAAC,2BAA2B,CAAC,CAAA;IAC5E;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CAC7B,CAAC;AAqgBF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default from "./SdkInstallationInstructions.vue.script.js";
 /* empty css                                          */
 //#region src/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue
-var SdkInstallationInstructions_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9cbb007b"]]);
+var SdkInstallationInstructions_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-76e5ff4d"]]);
 //#endregion
 export { SdkInstallationInstructions_default as default };
 

package/dist/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SdkInstallationInstructions.vue.js","names":[],"sources":["../../../../src/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getCustomClientIds } from '@scalar/blocks/code-example'\nimport {\n  ScalarCombobox,\n  type ScalarComboboxOption,\n} from '@scalar/components/combobox'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { XScalarSdkInstallation } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-sdk-installation'\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  watch,\n} from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nimport { getLanguageIcon } from '../helpers/language-icon'\nimport { getRenderableSdks } from '../helpers/renderable-sdks'\nimport { getVisibleTabCount } from '../helpers/visible-tab-count'\n\nconst { xScalarSdkInstallation, selectedClient, eventBus } = defineProps<{\n  /** Custom SDK installation instructions from `x-scalar-sdk-installation` */\n  xScalarSdkInstallation?: XScalarSdkInstallation['x-scalar-sdk-installation']\n  /**\n   * The globally selected client id. When it matches one of the SDK languages\n   * (as a `custom/<lang>` id) the matching tab is shown as active, keeping the\n   * tabs in sync with the operation code samples.\n   */\n  selectedClient?: string\n  /**\n   * Event bus used to broadcast the selected client. Picking a language here\n   * switches the operation code samples to that language's custom example, the\n   * same channel the generic client selector uses.\n   */\n  eventBus?: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\n/** Base id used to associate each tab with the shared panel for assistive tech */\nconst baseId = useId()\nconst panelId = `${baseId}-panel`\nconst { translate } = useLocalization()\n\n/** Only the SDKs that actually have something to show, with their resolved icon */\nconst sdks = computed(() =>\n  getRenderableSdks(xScalarSdkInstallation).map((sdk) => ({\n    ...sdk,\n    icon: getLanguageIcon(sdk.lang),\n  })),\n)\n\n/** Index of the currently selected SDK */\nconst selectedIndex = ref(0)\n\n/** The currently selected SDK */\nconst selected = computed(() => sdks.value[selectedIndex.value])\n\n/**\n * The `custom/<lang>` client id for each SDK, aligned by index with `sdks`.\n *\n * We reuse the exact id scheme the operation code samples use for their custom\n * examples, so selecting a language here resolves to the same id those samples\n * are keyed by — that shared id is what keeps the two surfaces in sync.\n */\nconst sdkClientIds = computed(() =>\n  getCustomClientIds(sdks.value.map((sdk) => ({ lang: sdk.lang, source: '' }))),\n)\n\n/** Select an SDK by index and broadcast it so the operation code samples follow */\nconst select = (index: number) => {\n  selectedIndex.value = index\n\n  const id = sdkClientIds.value[index]\n  if (id) {\n    eventBus?.emit('workspace:update:selected-client', id)\n  }\n}\n\n// Keep the active tab aligned with the global selection, re-evaluating whenever\n// either the selection or the available SDKs change. Watching `sdkClientIds`\n// (not just `selectedClient`) is what stops the intro tab and the operation\n// samples from disagreeing after the SDK list is reordered or resized: the tab\n// follows the selected language to its new position. When the selection is a\n// built-in client (or a language this document has no install entry for) we keep\n// the current tab, only clamping it back into range if the list shrank past it.\nwatch(\n  [() => selectedClient, sdkClientIds],\n  ([client, ids]) => {\n    const matched = client ? ids.findIndex((id) => id === client) : -1\n\n    if (matched >= 0) {\n      selectedIndex.value = matched\n    } else if (selectedIndex.value > ids.length - 1) {\n      selectedIndex.value = 0\n    }\n  },\n  { immediate: true },\n)\n\n// Re-measure whenever the set of SDKs changes. Keying on the languages (not just\n// the count) also catches documents that swap in a different set of the same\n// size, which would otherwise leave the cached tab widths — and the \"More\"\n// overflow logic — stale.\nwatch(\n  () => sdks.value.map((sdk) => sdk.lang).join('\\n'),\n  () => void nextTick(measure),\n)\n\nconst tabsRef = ref<HTMLElement>()\nconst measureRef = ref<HTMLElement>()\n\n/** The width available to render the tabs in */\nconst availableWidth = ref(0)\n/** The natural width of each tab */\nconst tabWidths = ref<number[]>([])\n/** The width of the \"More\" dropdown trigger */\nconst moreWidth = ref(0)\n\n/** Measure the available width and the natural width of each tab */\nconst measure = () => {\n  const measureEl = measureRef.value\n  const tabsEl = tabsRef.value\n\n  if (!measureEl || !tabsEl) {\n    return\n  }\n\n  // The measuring row renders every tab followed by the \"More\" trigger\n  const widths = Array.from(measureEl.children).map(\n    (child) => (child as HTMLElement).offsetWidth,\n  )\n\n  tabWidths.value = widths.slice(0, sdks.value.length)\n  moreWidth.value = widths[sdks.value.length] ?? 0\n  availableWidth.value = tabsEl.clientWidth\n}\n\n/** How many tabs fit inline before we need the \"More\" dropdown */\nconst visibleCount = computed(() => {\n  // Until we have measured, render everything (also the server-rendered state)\n  if (!tabWidths.value.length || availableWidth.value <= 0) {\n    return sdks.value.length\n  }\n\n  return getVisibleTabCount(\n    tabWidths.value,\n    availableWidth.value,\n    moreWidth.value,\n  )\n})\n\n/** The SDKs shown as inline tabs */\nconst visibleSdks = computed(() => sdks.value.slice(0, visibleCount.value))\n\n/** Whether the selected SDK lives in the \"More\" dropdown */\nconst isMoreActive = computed(() => selectedIndex.value >= visibleCount.value)\n\n/** The overflowing SDKs as combobox options, keyed by their original index */\nconst moreOptions = computed<ScalarComboboxOption[]>(() =>\n  sdks.value.slice(visibleCount.value).map((sdk, index) => ({\n    id: String(visibleCount.value + index),\n    label: sdk.lang,\n  })),\n)\n\n/** The selected option within the \"More\" dropdown, if any */\nconst selectedMoreOption = computed(() =>\n  moreOptions.value.find((option) => option.id === String(selectedIndex.value)),\n)\n\nconst selectMore = (option: ScalarComboboxOption | undefined) => {\n  if (option) {\n    select(Number(option.id))\n  }\n}\n\n/** The id of the tab that labels the panel (falls back to the heading when the selection lives in \"More\") */\nconst activeTabId = computed(() =>\n  isMoreActive.value ? headingId : `${baseId}-tab-${selectedIndex.value}`,\n)\n\n/**\n * The visible tab that holds the roving tabindex. When the selection lives in\n * the \"More\" dropdown, that trigger is the tab stop instead, so no inline tab\n * should be focusable.\n */\nconst tabStopIndex = computed(() =>\n  isMoreActive.value ? -1 : selectedIndex.value,\n)\n\n/** Focus a visible tab by index after the DOM has settled */\nconst focusTab = (index: number) => {\n  void nextTick(() => {\n    tabsRef.value\n      ?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')\n      [index]?.focus()\n  })\n}\n\n/** Arrow / Home / End keyboard navigation across the visible tabs (WAI-ARIA tabs pattern) */\nconst onTabKeydown = (event: KeyboardEvent, index: number) => {\n  const lastVisible = visibleCount.value - 1\n\n  let next = index\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowDown':\n      next = index >= lastVisible ? 0 : index + 1\n      break\n    case 'ArrowLeft':\n    case 'ArrowUp':\n      next = index <= 0 ? lastVisible : index - 1\n      break\n    case 'Home':\n      next = 0\n      break\n    case 'End':\n      next = lastVisible\n      break\n    default:\n      return\n  }\n\n  event.preventDefault()\n  select(next)\n  focusTab(next)\n}\n\nlet observer: ResizeObserver | undefined\nlet frame = 0\n\n/** Coalesce resize bursts into a single measure before the next paint */\nconst scheduleMeasure = () => {\n  if (typeof requestAnimationFrame === 'undefined') {\n    measure()\n    return\n  }\n  cancelAnimationFrame(frame)\n  frame = requestAnimationFrame(measure)\n}\n\nonMounted(() => {\n  if (typeof ResizeObserver !== 'undefined') {\n    observer = new ResizeObserver(scheduleMeasure)\n    // Observe the visible row for the available width, and the hidden measure\n    // row for the natural tab widths. The latter catches changes the container\n    // never sees — web fonts loading, or labels changing without the count\n    // changing — which would otherwise leave the overflow logic stale.\n    if (tabsRef.value) {\n      observer.observe(tabsRef.value)\n    }\n    if (measureRef.value) {\n      observer.observe(measureRef.value)\n    }\n  }\n  measure()\n})\n\nonBeforeUnmount(() => {\n  observer?.disconnect()\n  if (typeof cancelAnimationFrame !== 'undefined') {\n    cancelAnimationFrame(frame)\n  }\n})\n</script>\n<template>\n  <div v-if=\"sdks.length\">\n    <div\n      :id=\"headingId\"\n      class=\"client-libraries-heading\">\n      {{ translate('clientLibraries.heading') }}\n    </div>\n\n    <!-- Tabs -->\n    <div class=\"client-libraries-content\">\n      <div\n        ref=\"tabsRef\"\n        :aria-labelledby=\"headingId\"\n        class=\"client-libraries-row\"\n        role=\"tablist\">\n        <button\n          v-for=\"(sdk, index) in visibleSdks\"\n          :id=\"`${baseId}-tab-${index}`\"\n          :key=\"index\"\n          :aria-controls=\"panelId\"\n          :aria-selected=\"index === selectedIndex\"\n          class=\"client-libraries\"\n          :class=\"{ 'client-libraries__active': index === selectedIndex }\"\n          role=\"tab\"\n          :tabindex=\"index === tabStopIndex ? 0 : -1\"\n          type=\"button\"\n          @click=\"select(index)\"\n          @keydown=\"onTabKeydown($event, index)\">\n          <ScalarIcon\n            v-if=\"sdk.icon\"\n            class=\"client-libraries-icon\"\n            :icon=\"sdk.icon\" />\n          <span class=\"client-libraries-text\">{{ sdk.lang }}</span>\n        </button>\n\n        <!-- More dropdown -->\n        <ScalarCombobox\n          v-if=\"visibleCount < sdks.length\"\n          :modelValue=\"selectedMoreOption\"\n          :options=\"moreOptions\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectMore\">\n          <button\n            class=\"client-libraries client-libraries-more\"\n            :class=\"{ 'client-libraries__active': isMoreActive }\"\n            type=\"button\">\n            <ScalarIcon\n              class=\"client-libraries-icon\"\n              :icon=\"\n                isMoreActive && selected?.icon ? selected.icon : 'Ellipses'\n              \" />\n            <span class=\"client-libraries-text\">\n              {{ translate('clientLibraries.more') }}\n            </span>\n          </button>\n        </ScalarCombobox>\n      </div>\n\n      <!-- Hidden row used to measure the natural width of every tab. It is\n           clipped to a zero-size box so it never contributes to the scrollable\n           width of the (horizontally scrollable) row above. -->\n      <div\n        aria-hidden=\"true\"\n        class=\"client-libraries-measure-clip\">\n        <div\n          ref=\"measureRef\"\n          class=\"client-libraries-row client-libraries-row--measure\">\n          <span\n            v-for=\"(sdk, index) in sdks\"\n            :key=\"index\"\n            class=\"client-libraries\">\n            <ScalarIcon\n              v-if=\"sdk.icon\"\n              class=\"client-libraries-icon\"\n              :icon=\"sdk.icon\" />\n            <span class=\"client-libraries-text\">{{ sdk.lang }}</span>\n          </span>\n          <span class=\"client-libraries\">\n            <ScalarIcon\n              class=\"client-libraries-icon\"\n              icon=\"Ellipses\" />\n            <span class=\"client-libraries-text\">\n              {{ translate('clientLibraries.more') }}\n            </span>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Content: Markdown installation instructions (supports code blocks) -->\n    <div\n      v-if=\"selected?.description\"\n      :id=\"panelId\"\n      :aria-labelledby=\"activeTabId\"\n      class=\"selected-client\"\n      role=\"tabpanel\"\n      tabindex=\"0\">\n      <ScalarMarkdown :value=\"selected.description\" />\n    </div>\n  </div>\n</template>\n<style scoped>\n/* One panel holds the Markdown installation instructions */\n.selected-client {\n  display: flex;\n  flex-direction: column;\n  gap: 9px;\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  padding: 9px 12px;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top: none;\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n}\n.client-libraries-heading {\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-medium);\n  color: var(--scalar-color-1);\n  padding: 9px 12px;\n  background-color: var(--scalar-background-2);\n  display: flex;\n  align-items: center;\n  max-height: 32px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top-left-radius: var(--scalar-radius-xl);\n  border-top-right-radius: var(--scalar-radius-xl);\n}\n.client-libraries-content {\n  position: relative;\n  /*\n   * Scroll horizontally rather than clip: before JS measures the tab widths\n   * (and without JS at all) every tab is rendered, so overflowing tabs must\n   * stay reachable. Once measured, the \"More\" dropdown absorbs the overflow and\n   * no scrollbar is shown. The bar itself is hidden — keyboard focus and touch\n   * still scroll clipped tabs into view.\n   */\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  padding: 0 12px;\n  background-color: var(--scalar-background-1);\n  border-left: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-right: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n.client-libraries-content::-webkit-scrollbar {\n  display: none;\n}\n.client-libraries-row {\n  display: flex;\n  justify-content: flex-start;\n}\n/* Zero-size clip so the measure row never adds to the scrollable width */\n.client-libraries-measure-clip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: hidden;\n}\n/* Off-screen row used only to measure natural tab widths */\n.client-libraries-row--measure {\n  width: max-content;\n  visibility: hidden;\n  pointer-events: none;\n}\n.client-libraries {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n  white-space: nowrap;\n  /* Keep tabs at their natural (measured) width so they scroll rather than squish */\n  flex-shrink: 0;\n  padding: 8px 12px;\n  gap: 6px;\n  color: var(--scalar-color-3);\n  border-bottom: 1px solid transparent;\n  background: transparent;\n  user-select: none;\n}\n.client-libraries:not(.client-libraries__active):hover:before {\n  content: '';\n  position: absolute;\n  width: calc(100% - 4px);\n  height: calc(100% - 4px);\n  background: var(--scalar-background-2);\n  left: 2px;\n  top: 2px;\n  z-index: 0;\n  border-radius: var(--scalar-radius);\n}\n.client-libraries:active {\n  color: var(--scalar-color-1);\n}\n.client-libraries:focus-visible {\n  outline: none;\n  box-shadow: inset 0 0 0 1px var(--scalar-color-accent);\n}\n.client-libraries__active {\n  color: var(--scalar-color-1);\n  border-bottom: 1px solid var(--scalar-color-1);\n}\n/* Always pin the \"More\" dropdown to the right edge */\n.client-libraries-more {\n  margin-left: auto;\n}\n.client-libraries-icon {\n  max-width: 14px;\n  max-height: 14px;\n  min-width: 14px;\n  width: 100%;\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  box-sizing: border-box;\n  color: currentColor;\n}\n.client-libraries .client-libraries-text {\n  font-size: var(--scalar-small);\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.client-libraries__active .client-libraries-text {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"SdkInstallationInstructions.vue.js","names":[],"sources":["../../../../src/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getCustomClientIds } from '@scalar/blocks/code-example'\nimport {\n  ScalarCombobox,\n  type ScalarComboboxOption,\n} from '@scalar/components/combobox'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { XScalarSdkInstallation } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-sdk-installation'\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  watch,\n} from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nimport { getLanguageIcon } from '../helpers/language-icon'\nimport { getRenderableSdks } from '../helpers/renderable-sdks'\nimport { getVisibleTabCount } from '../helpers/visible-tab-count'\n\nconst { xScalarSdkInstallation, selectedClient, eventBus } = defineProps<{\n  /** Custom SDK installation instructions from `x-scalar-sdk-installation` */\n  xScalarSdkInstallation?: XScalarSdkInstallation['x-scalar-sdk-installation']\n  /**\n   * The globally selected client id. When it matches one of the SDK languages\n   * (as a `custom/<lang>` id) the matching tab is shown as active, keeping the\n   * tabs in sync with the operation code samples.\n   */\n  selectedClient?: string\n  /**\n   * Event bus used to broadcast the selected client. Picking a language here\n   * switches the operation code samples to that language's custom example, the\n   * same channel the generic client selector uses.\n   */\n  eventBus?: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\n/** Base id used to associate each tab with the shared panel for assistive tech */\nconst baseId = useId()\nconst panelId = `${baseId}-panel`\nconst { translate } = useLocalization()\n\n/** Only the SDKs that actually have something to show, with their resolved icon */\nconst sdks = computed(() =>\n  getRenderableSdks(xScalarSdkInstallation).map((sdk) => ({\n    ...sdk,\n    icon: getLanguageIcon(sdk.lang),\n  })),\n)\n\n/** Index of the currently selected SDK */\nconst selectedIndex = ref(0)\n\n/** The currently selected SDK */\nconst selected = computed(() => sdks.value[selectedIndex.value])\n\n/**\n * The `custom/<lang>` client id for each SDK, aligned by index with `sdks`.\n *\n * We reuse the exact id scheme the operation code samples use for their custom\n * examples, so selecting a language here resolves to the same id those samples\n * are keyed by — that shared id is what keeps the two surfaces in sync.\n */\nconst sdkClientIds = computed(() =>\n  getCustomClientIds(sdks.value.map((sdk) => ({ lang: sdk.lang, source: '' }))),\n)\n\n/** Select an SDK by index and broadcast it so the operation code samples follow */\nconst select = (index: number) => {\n  selectedIndex.value = index\n\n  const id = sdkClientIds.value[index]\n  if (id) {\n    eventBus?.emit('workspace:update:selected-client', id)\n  }\n}\n\n// Keep the active tab aligned with the global selection, re-evaluating whenever\n// either the selection or the available SDKs change. Watching `sdkClientIds`\n// (not just `selectedClient`) is what stops the intro tab and the operation\n// samples from disagreeing after the SDK list is reordered or resized: the tab\n// follows the selected language to its new position. When the selection is a\n// built-in client (or a language this document has no install entry for) we keep\n// the current tab, only clamping it back into range if the list shrank past it.\nwatch(\n  [() => selectedClient, sdkClientIds],\n  ([client, ids]) => {\n    const matched = client ? ids.findIndex((id) => id === client) : -1\n\n    if (matched >= 0) {\n      selectedIndex.value = matched\n    } else if (selectedIndex.value > ids.length - 1) {\n      selectedIndex.value = 0\n    }\n  },\n  { immediate: true },\n)\n\n// Re-measure whenever the set of SDKs changes. Keying on the languages (not just\n// the count) also catches documents that swap in a different set of the same\n// size, which would otherwise leave the cached tab widths — and the \"More\"\n// overflow logic — stale.\nwatch(\n  () => sdks.value.map((sdk) => sdk.lang).join('\\n'),\n  () => void nextTick(measure),\n)\n\n/** The full row, measured for available width (the tab strip's own width depends on the outcome) */\nconst rowRef = ref<HTMLElement>()\n/** The tab strip, used to move focus between tabs */\nconst tabsRef = ref<HTMLElement>()\nconst measureRef = ref<HTMLElement>()\n\n/** The width available to render the tabs in */\nconst availableWidth = ref(0)\n/** The natural width of each tab */\nconst tabWidths = ref<number[]>([])\n/** The width of the \"More\" dropdown trigger */\nconst moreWidth = ref(0)\n\n/** Measure the available width and the natural width of each tab */\nconst measure = () => {\n  const measureEl = measureRef.value\n  const rowEl = rowRef.value\n\n  if (!measureEl || !rowEl) {\n    return\n  }\n\n  // The measuring row renders every tab followed by the \"More\" trigger\n  const widths = Array.from(measureEl.children).map(\n    (child) => (child as HTMLElement).offsetWidth,\n  )\n\n  tabWidths.value = widths.slice(0, sdks.value.length)\n  moreWidth.value = widths[sdks.value.length] ?? 0\n  availableWidth.value = rowEl.clientWidth\n}\n\n/** How many tabs fit inline before we need the \"More\" dropdown */\nconst visibleCount = computed(() => {\n  // Until we have measured, render everything (also the server-rendered state)\n  if (!tabWidths.value.length || availableWidth.value <= 0) {\n    return sdks.value.length\n  }\n\n  return getVisibleTabCount(\n    tabWidths.value,\n    availableWidth.value,\n    moreWidth.value,\n  )\n})\n\n/** The SDKs shown as inline tabs */\nconst visibleSdks = computed(() => sdks.value.slice(0, visibleCount.value))\n\n/** Whether the selected SDK lives in the \"More\" dropdown */\nconst isMoreActive = computed(() => selectedIndex.value >= visibleCount.value)\n\n/** The overflowing SDKs as combobox options, keyed by their original index */\nconst moreOptions = computed<ScalarComboboxOption[]>(() =>\n  sdks.value.slice(visibleCount.value).map((sdk, index) => ({\n    id: String(visibleCount.value + index),\n    label: sdk.lang,\n  })),\n)\n\n/** The selected option within the \"More\" dropdown, if any */\nconst selectedMoreOption = computed(() =>\n  moreOptions.value.find((option) => option.id === String(selectedIndex.value)),\n)\n\nconst selectMore = (option: ScalarComboboxOption | undefined) => {\n  if (option) {\n    select(Number(option.id))\n  }\n}\n\n/** The id of the tab that labels the panel (falls back to the heading when the selection lives in \"More\") */\nconst activeTabId = computed(() =>\n  isMoreActive.value ? headingId : `${baseId}-tab-${selectedIndex.value}`,\n)\n\n/**\n * The visible tab that holds the roving tabindex. When the selection lives in\n * the \"More\" dropdown, that trigger is the tab stop instead, so no inline tab\n * should be focusable.\n */\nconst tabStopIndex = computed(() =>\n  isMoreActive.value ? -1 : selectedIndex.value,\n)\n\n/** Focus a visible tab by index after the DOM has settled */\nconst focusTab = (index: number) => {\n  void nextTick(() => {\n    tabsRef.value\n      ?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')\n      [index]?.focus()\n  })\n}\n\n/** Arrow / Home / End keyboard navigation across the visible tabs (WAI-ARIA tabs pattern) */\nconst onTabKeydown = (event: KeyboardEvent, index: number) => {\n  const lastVisible = visibleCount.value - 1\n\n  let next = index\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowDown':\n      next = index >= lastVisible ? 0 : index + 1\n      break\n    case 'ArrowLeft':\n    case 'ArrowUp':\n      next = index <= 0 ? lastVisible : index - 1\n      break\n    case 'Home':\n      next = 0\n      break\n    case 'End':\n      next = lastVisible\n      break\n    default:\n      return\n  }\n\n  event.preventDefault()\n  select(next)\n  focusTab(next)\n}\n\nlet observer: ResizeObserver | undefined\nlet frame = 0\n\n/** Coalesce resize bursts into a single measure before the next paint */\nconst scheduleMeasure = () => {\n  if (typeof requestAnimationFrame === 'undefined') {\n    measure()\n    return\n  }\n  cancelAnimationFrame(frame)\n  frame = requestAnimationFrame(measure)\n}\n\nonMounted(() => {\n  if (typeof ResizeObserver !== 'undefined') {\n    observer = new ResizeObserver(scheduleMeasure)\n    // Observe the visible row for the available width, and the hidden measure\n    // row for the natural tab widths. The latter catches changes the container\n    // never sees — web fonts loading, or labels changing without the count\n    // changing — which would otherwise leave the overflow logic stale.\n    if (rowRef.value) {\n      observer.observe(rowRef.value)\n    }\n    if (measureRef.value) {\n      observer.observe(measureRef.value)\n    }\n  }\n  measure()\n})\n\nonBeforeUnmount(() => {\n  observer?.disconnect()\n  if (typeof cancelAnimationFrame !== 'undefined') {\n    cancelAnimationFrame(frame)\n  }\n})\n</script>\n<template>\n  <div v-if=\"sdks.length\">\n    <div\n      :id=\"headingId\"\n      class=\"client-libraries-heading\">\n      {{ translate('clientLibraries.heading') }}\n    </div>\n\n    <!-- Tabs: keep the More combobox outside the tablist so every tablist\n         child is a tab (aria-required-children). -->\n    <div class=\"client-libraries-content\">\n      <div\n        ref=\"rowRef\"\n        class=\"client-libraries-row\">\n        <div\n          ref=\"tabsRef\"\n          :aria-labelledby=\"headingId\"\n          class=\"client-libraries-tabs\"\n          role=\"tablist\">\n          <button\n            v-for=\"(sdk, index) in visibleSdks\"\n            :id=\"`${baseId}-tab-${index}`\"\n            :key=\"index\"\n            :aria-controls=\"panelId\"\n            :aria-selected=\"index === selectedIndex\"\n            class=\"client-libraries\"\n            :class=\"{ 'client-libraries__active': index === selectedIndex }\"\n            role=\"tab\"\n            :tabindex=\"index === tabStopIndex ? 0 : -1\"\n            type=\"button\"\n            @click=\"select(index)\"\n            @keydown=\"onTabKeydown($event, index)\">\n            <ScalarIcon\n              v-if=\"sdk.icon\"\n              class=\"client-libraries-icon\"\n              :icon=\"sdk.icon\" />\n            <span class=\"client-libraries-text\">{{ sdk.lang }}</span>\n          </button>\n        </div>\n\n        <!-- More dropdown (not a tab — lives beside the tablist) -->\n        <ScalarCombobox\n          v-if=\"visibleCount < sdks.length\"\n          :modelValue=\"selectedMoreOption\"\n          :options=\"moreOptions\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectMore\">\n          <button\n            class=\"client-libraries client-libraries-more\"\n            :class=\"{ 'client-libraries__active': isMoreActive }\"\n            type=\"button\">\n            <ScalarIcon\n              class=\"client-libraries-icon\"\n              :icon=\"\n                isMoreActive && selected?.icon ? selected.icon : 'Ellipses'\n              \" />\n            <span class=\"client-libraries-text\">\n              {{ translate('clientLibraries.more') }}\n            </span>\n          </button>\n        </ScalarCombobox>\n      </div>\n\n      <!-- Hidden row used to measure the natural width of every tab. It is\n           clipped to a zero-size box so it never contributes to the scrollable\n           width of the (horizontally scrollable) row above. -->\n      <div\n        aria-hidden=\"true\"\n        class=\"client-libraries-measure-clip\">\n        <div\n          ref=\"measureRef\"\n          class=\"client-libraries-row client-libraries-row--measure\">\n          <span\n            v-for=\"(sdk, index) in sdks\"\n            :key=\"index\"\n            class=\"client-libraries\">\n            <ScalarIcon\n              v-if=\"sdk.icon\"\n              class=\"client-libraries-icon\"\n              :icon=\"sdk.icon\" />\n            <span class=\"client-libraries-text\">{{ sdk.lang }}</span>\n          </span>\n          <span class=\"client-libraries\">\n            <ScalarIcon\n              class=\"client-libraries-icon\"\n              icon=\"Ellipses\" />\n            <span class=\"client-libraries-text\">\n              {{ translate('clientLibraries.more') }}\n            </span>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Content: Markdown installation instructions (supports code blocks) -->\n    <div\n      v-if=\"selected?.description\"\n      :id=\"panelId\"\n      :aria-labelledby=\"activeTabId\"\n      class=\"selected-client\"\n      role=\"tabpanel\"\n      tabindex=\"0\">\n      <ScalarMarkdown :value=\"selected.description\" />\n    </div>\n  </div>\n</template>\n<style scoped>\n/* One panel holds the Markdown installation instructions */\n.selected-client {\n  display: flex;\n  flex-direction: column;\n  gap: 9px;\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  padding: 9px 12px;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top: none;\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n}\n.client-libraries-heading {\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-medium);\n  color: var(--scalar-color-1);\n  padding: 9px 12px;\n  background-color: var(--scalar-background-2);\n  display: flex;\n  align-items: center;\n  max-height: 32px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top-left-radius: var(--scalar-radius-xl);\n  border-top-right-radius: var(--scalar-radius-xl);\n}\n.client-libraries-content {\n  position: relative;\n  /*\n   * Scroll horizontally rather than clip: before JS measures the tab widths\n   * (and without JS at all) every tab is rendered, so overflowing tabs must\n   * stay reachable. Once measured, the \"More\" dropdown absorbs the overflow and\n   * no scrollbar is shown. The bar itself is hidden — keyboard focus and touch\n   * still scroll clipped tabs into view.\n   */\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  padding: 0 12px;\n  background-color: var(--scalar-background-1);\n  border-left: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-right: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n.client-libraries-content::-webkit-scrollbar {\n  display: none;\n}\n.client-libraries-row {\n  display: flex;\n  justify-content: flex-start;\n}\n/* Sized to its tabs, so the \"More\" trigger still pins to the right edge */\n.client-libraries-tabs {\n  display: flex;\n  flex: 0 0 auto;\n}\n/* Zero-size clip so the measure row never adds to the scrollable width */\n.client-libraries-measure-clip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: hidden;\n}\n/* Off-screen row used only to measure natural tab widths */\n.client-libraries-row--measure {\n  width: max-content;\n  visibility: hidden;\n  pointer-events: none;\n}\n.client-libraries {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n  white-space: nowrap;\n  /* Keep tabs at their natural (measured) width so they scroll rather than squish */\n  flex-shrink: 0;\n  padding: 8px 12px;\n  gap: 6px;\n  color: var(--scalar-color-3);\n  border-bottom: 1px solid transparent;\n  background: transparent;\n  user-select: none;\n}\n.client-libraries:not(.client-libraries__active):hover:before {\n  content: '';\n  position: absolute;\n  width: calc(100% - 4px);\n  height: calc(100% - 4px);\n  background: var(--scalar-background-2);\n  left: 2px;\n  top: 2px;\n  z-index: 0;\n  border-radius: var(--scalar-radius);\n}\n.client-libraries:active {\n  color: var(--scalar-color-1);\n}\n.client-libraries:focus-visible {\n  outline: none;\n  box-shadow: inset 0 0 0 1px var(--scalar-color-accent);\n}\n.client-libraries__active {\n  color: var(--scalar-color-1);\n  border-bottom: 1px solid var(--scalar-color-1);\n}\n/* Always pin the \"More\" dropdown to the right edge */\n.client-libraries-more {\n  margin-left: auto;\n}\n.client-libraries-icon {\n  max-width: 14px;\n  max-height: 14px;\n  min-width: 14px;\n  width: 100%;\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  box-sizing: border-box;\n  color: currentColor;\n}\n.client-libraries .client-libraries-text {\n  font-size: var(--scalar-small);\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.client-libraries__active .client-libraries-text {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n</style>\n"],"mappings":""}

package/dist/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue.script.js

@@ -5,8 +5,8 @@ import { getVisibleTabCount } from "../helpers/visible-tab-count.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, useId, watch, withCtx } from "vue";
 import { getCustomClientIds } from "@scalar/blocks/code-example";
 import { ScalarMarkdown } from "@scalar/components/markdown";
-import { ScalarCombobox } from "@scalar/components/combobox";
 import { ScalarIcon } from "@scalar/components/icon";
+import { ScalarCombobox } from "@scalar/components/combobox";
 //#region src/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { key: 0 };
 var _hoisted_2 = ["id"];
@@ -29,7 +29,7 @@ var _hoisted_9 = { class: "client-libraries-text" };
 var _hoisted_10 = { class: "client-libraries" };
 var _hoisted_11 = { class: "client-libraries-text" };
 var _hoisted_12 = ["aria-labelledby"];
-var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "SdkInstallationInstructions",
 	props: {
 		xScalarSdkInstallation: {},
@@ -74,6 +74,9 @@ var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /*
 			else if (selectedIndex.value > ids.length - 1) selectedIndex.value = 0;
 		}, { immediate: true });
 		watch(() => sdks.value.map((sdk) => sdk.lang).join("\n"), () => void nextTick(measure));
+		/** The full row, measured for available width (the tab strip's own width depends on the outcome) */
+		const rowRef = ref();
+		/** The tab strip, used to move focus between tabs */
 		const tabsRef = ref();
 		const measureRef = ref();
 		/** The width available to render the tabs in */
@@ -85,12 +88,12 @@ var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /*
 		/** Measure the available width and the natural width of each tab */
 		const measure = () => {
 			const measureEl = measureRef.value;
-			const tabsEl = tabsRef.value;
-			if (!measureEl || !tabsEl) return;
+			const rowEl = rowRef.value;
+			if (!measureEl || !rowEl) return;
 			const widths = Array.from(measureEl.children).map((child) => child.offsetWidth);
 			tabWidths.value = widths.slice(0, sdks.value.length);
 			moreWidth.value = widths[sdks.value.length] ?? 0;
-			availableWidth.value = tabsEl.clientWidth;
+			availableWidth.value = rowEl.clientWidth;
 		};
 		/** How many tabs fit inline before we need the "More" dropdown */
 		const visibleCount = computed(() => {
@@ -164,7 +167,7 @@ var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /*
 		onMounted(() => {
 			if (typeof ResizeObserver !== "undefined") {
 				observer = new ResizeObserver(scheduleMeasure);
-				if (tabsRef.value) observer.observe(tabsRef.value);
+				if (rowRef.value) observer.observe(rowRef.value);
 				if (measureRef.value) observer.observe(measureRef.value);
 			}
 			measure();
@@ -180,10 +183,14 @@ var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /*
 					class: "client-libraries-heading"
 				}, toDisplayString(unref(translate)("clientLibraries.heading")), 9, _hoisted_2),
 				createElementVNode("div", _hoisted_3, [createElementVNode("div", {
+					ref_key: "rowRef",
+					ref: rowRef,
+					class: "client-libraries-row"
+				}, [createElementVNode("div", {
 					ref_key: "tabsRef",
 					ref: tabsRef,
 					"aria-labelledby": unref(headingId),
-					class: "client-libraries-row",
+					class: "client-libraries-tabs",
 					role: "tablist"
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleSdks.value, (sdk, index) => {
 					return openBlock(), createElementBlock("button", {
@@ -202,7 +209,7 @@ var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /*
 						class: "client-libraries-icon",
 						icon: sdk.icon
 					}, null, 8, ["icon"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_6, toDisplayString(sdk.lang), 1)], 42, _hoisted_5);
-				}), 128)), visibleCount.value < sdks.value.length ? (openBlock(), createBlock(unref(ScalarCombobox), {
+				}), 128))], 8, _hoisted_4), visibleCount.value < sdks.value.length ? (openBlock(), createBlock(unref(ScalarCombobox), {
 					key: 0,
 					modelValue: selectedMoreOption.value,
 					options: moreOptions.value,
@@ -218,7 +225,7 @@ var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /*
 						icon: isMoreActive.value && selected.value?.icon ? selected.value.icon : "Ellipses"
 					}, null, 8, ["icon"]), createElementVNode("span", _hoisted_7, toDisplayString(unref(translate)("clientLibraries.more")), 1)], 2)]),
 					_: 1
-				}, 8, ["modelValue", "options"])) : createCommentVNode("", true)], 8, _hoisted_4), createElementVNode("div", _hoisted_8, [createElementVNode("div", {
+				}, 8, ["modelValue", "options"])) : createCommentVNode("", true)], 512), createElementVNode("div", _hoisted_8, [createElementVNode("div", {
 					ref_key: "measureRef",
 					ref: measureRef,
 					class: "client-libraries-row client-libraries-row--measure"

package/dist/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"SdkInstallationInstructions.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getCustomClientIds } from '@scalar/blocks/code-example'\nimport {\n  ScalarCombobox,\n  type ScalarComboboxOption,\n} from '@scalar/components/combobox'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { XScalarSdkInstallation } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-sdk-installation'\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  watch,\n} from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nimport { getLanguageIcon } from '../helpers/language-icon'\nimport { getRenderableSdks } from '../helpers/renderable-sdks'\nimport { getVisibleTabCount } from '../helpers/visible-tab-count'\n\nconst { xScalarSdkInstallation, selectedClient, eventBus } = defineProps<{\n  /** Custom SDK installation instructions from `x-scalar-sdk-installation` */\n  xScalarSdkInstallation?: XScalarSdkInstallation['x-scalar-sdk-installation']\n  /**\n   * The globally selected client id. When it matches one of the SDK languages\n   * (as a `custom/<lang>` id) the matching tab is shown as active, keeping the\n   * tabs in sync with the operation code samples.\n   */\n  selectedClient?: string\n  /**\n   * Event bus used to broadcast the selected client. Picking a language here\n   * switches the operation code samples to that language's custom example, the\n   * same channel the generic client selector uses.\n   */\n  eventBus?: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\n/** Base id used to associate each tab with the shared panel for assistive tech */\nconst baseId = useId()\nconst panelId = `${baseId}-panel`\nconst { translate } = useLocalization()\n\n/** Only the SDKs that actually have something to show, with their resolved icon */\nconst sdks = computed(() =>\n  getRenderableSdks(xScalarSdkInstallation).map((sdk) => ({\n    ...sdk,\n    icon: getLanguageIcon(sdk.lang),\n  })),\n)\n\n/** Index of the currently selected SDK */\nconst selectedIndex = ref(0)\n\n/** The currently selected SDK */\nconst selected = computed(() => sdks.value[selectedIndex.value])\n\n/**\n * The `custom/<lang>` client id for each SDK, aligned by index with `sdks`.\n *\n * We reuse the exact id scheme the operation code samples use for their custom\n * examples, so selecting a language here resolves to the same id those samples\n * are keyed by — that shared id is what keeps the two surfaces in sync.\n */\nconst sdkClientIds = computed(() =>\n  getCustomClientIds(sdks.value.map((sdk) => ({ lang: sdk.lang, source: '' }))),\n)\n\n/** Select an SDK by index and broadcast it so the operation code samples follow */\nconst select = (index: number) => {\n  selectedIndex.value = index\n\n  const id = sdkClientIds.value[index]\n  if (id) {\n    eventBus?.emit('workspace:update:selected-client', id)\n  }\n}\n\n// Keep the active tab aligned with the global selection, re-evaluating whenever\n// either the selection or the available SDKs change. Watching `sdkClientIds`\n// (not just `selectedClient`) is what stops the intro tab and the operation\n// samples from disagreeing after the SDK list is reordered or resized: the tab\n// follows the selected language to its new position. When the selection is a\n// built-in client (or a language this document has no install entry for) we keep\n// the current tab, only clamping it back into range if the list shrank past it.\nwatch(\n  [() => selectedClient, sdkClientIds],\n  ([client, ids]) => {\n    const matched = client ? ids.findIndex((id) => id === client) : -1\n\n    if (matched >= 0) {\n      selectedIndex.value = matched\n    } else if (selectedIndex.value > ids.length - 1) {\n      selectedIndex.value = 0\n    }\n  },\n  { immediate: true },\n)\n\n// Re-measure whenever the set of SDKs changes. Keying on the languages (not just\n// the count) also catches documents that swap in a different set of the same\n// size, which would otherwise leave the cached tab widths — and the \"More\"\n// overflow logic — stale.\nwatch(\n  () => sdks.value.map((sdk) => sdk.lang).join('\\n'),\n  () => void nextTick(measure),\n)\n\nconst tabsRef = ref<HTMLElement>()\nconst measureRef = ref<HTMLElement>()\n\n/** The width available to render the tabs in */\nconst availableWidth = ref(0)\n/** The natural width of each tab */\nconst tabWidths = ref<number[]>([])\n/** The width of the \"More\" dropdown trigger */\nconst moreWidth = ref(0)\n\n/** Measure the available width and the natural width of each tab */\nconst measure = () => {\n  const measureEl = measureRef.value\n  const tabsEl = tabsRef.value\n\n  if (!measureEl || !tabsEl) {\n    return\n  }\n\n  // The measuring row renders every tab followed by the \"More\" trigger\n  const widths = Array.from(measureEl.children).map(\n    (child) => (child as HTMLElement).offsetWidth,\n  )\n\n  tabWidths.value = widths.slice(0, sdks.value.length)\n  moreWidth.value = widths[sdks.value.length] ?? 0\n  availableWidth.value = tabsEl.clientWidth\n}\n\n/** How many tabs fit inline before we need the \"More\" dropdown */\nconst visibleCount = computed(() => {\n  // Until we have measured, render everything (also the server-rendered state)\n  if (!tabWidths.value.length || availableWidth.value <= 0) {\n    return sdks.value.length\n  }\n\n  return getVisibleTabCount(\n    tabWidths.value,\n    availableWidth.value,\n    moreWidth.value,\n  )\n})\n\n/** The SDKs shown as inline tabs */\nconst visibleSdks = computed(() => sdks.value.slice(0, visibleCount.value))\n\n/** Whether the selected SDK lives in the \"More\" dropdown */\nconst isMoreActive = computed(() => selectedIndex.value >= visibleCount.value)\n\n/** The overflowing SDKs as combobox options, keyed by their original index */\nconst moreOptions = computed<ScalarComboboxOption[]>(() =>\n  sdks.value.slice(visibleCount.value).map((sdk, index) => ({\n    id: String(visibleCount.value + index),\n    label: sdk.lang,\n  })),\n)\n\n/** The selected option within the \"More\" dropdown, if any */\nconst selectedMoreOption = computed(() =>\n  moreOptions.value.find((option) => option.id === String(selectedIndex.value)),\n)\n\nconst selectMore = (option: ScalarComboboxOption | undefined) => {\n  if (option) {\n    select(Number(option.id))\n  }\n}\n\n/** The id of the tab that labels the panel (falls back to the heading when the selection lives in \"More\") */\nconst activeTabId = computed(() =>\n  isMoreActive.value ? headingId : `${baseId}-tab-${selectedIndex.value}`,\n)\n\n/**\n * The visible tab that holds the roving tabindex. When the selection lives in\n * the \"More\" dropdown, that trigger is the tab stop instead, so no inline tab\n * should be focusable.\n */\nconst tabStopIndex = computed(() =>\n  isMoreActive.value ? -1 : selectedIndex.value,\n)\n\n/** Focus a visible tab by index after the DOM has settled */\nconst focusTab = (index: number) => {\n  void nextTick(() => {\n    tabsRef.value\n      ?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')\n      [index]?.focus()\n  })\n}\n\n/** Arrow / Home / End keyboard navigation across the visible tabs (WAI-ARIA tabs pattern) */\nconst onTabKeydown = (event: KeyboardEvent, index: number) => {\n  const lastVisible = visibleCount.value - 1\n\n  let next = index\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowDown':\n      next = index >= lastVisible ? 0 : index + 1\n      break\n    case 'ArrowLeft':\n    case 'ArrowUp':\n      next = index <= 0 ? lastVisible : index - 1\n      break\n    case 'Home':\n      next = 0\n      break\n    case 'End':\n      next = lastVisible\n      break\n    default:\n      return\n  }\n\n  event.preventDefault()\n  select(next)\n  focusTab(next)\n}\n\nlet observer: ResizeObserver | undefined\nlet frame = 0\n\n/** Coalesce resize bursts into a single measure before the next paint */\nconst scheduleMeasure = () => {\n  if (typeof requestAnimationFrame === 'undefined') {\n    measure()\n    return\n  }\n  cancelAnimationFrame(frame)\n  frame = requestAnimationFrame(measure)\n}\n\nonMounted(() => {\n  if (typeof ResizeObserver !== 'undefined') {\n    observer = new ResizeObserver(scheduleMeasure)\n    // Observe the visible row for the available width, and the hidden measure\n    // row for the natural tab widths. The latter catches changes the container\n    // never sees — web fonts loading, or labels changing without the count\n    // changing — which would otherwise leave the overflow logic stale.\n    if (tabsRef.value) {\n      observer.observe(tabsRef.value)\n    }\n    if (measureRef.value) {\n      observer.observe(measureRef.value)\n    }\n  }\n  measure()\n})\n\nonBeforeUnmount(() => {\n  observer?.disconnect()\n  if (typeof cancelAnimationFrame !== 'undefined') {\n    cancelAnimationFrame(frame)\n  }\n})\n</script>\n<template>\n  <div v-if=\"sdks.length\">\n    <div\n      :id=\"headingId\"\n      class=\"client-libraries-heading\">\n      {{ translate('clientLibraries.heading') }}\n    </div>\n\n    <!-- Tabs -->\n    <div class=\"client-libraries-content\">\n      <div\n        ref=\"tabsRef\"\n        :aria-labelledby=\"headingId\"\n        class=\"client-libraries-row\"\n        role=\"tablist\">\n        <button\n          v-for=\"(sdk, index) in visibleSdks\"\n          :id=\"`${baseId}-tab-${index}`\"\n          :key=\"index\"\n          :aria-controls=\"panelId\"\n          :aria-selected=\"index === selectedIndex\"\n          class=\"client-libraries\"\n          :class=\"{ 'client-libraries__active': index === selectedIndex }\"\n          role=\"tab\"\n          :tabindex=\"index === tabStopIndex ? 0 : -1\"\n          type=\"button\"\n          @click=\"select(index)\"\n          @keydown=\"onTabKeydown($event, index)\">\n          <ScalarIcon\n            v-if=\"sdk.icon\"\n            class=\"client-libraries-icon\"\n            :icon=\"sdk.icon\" />\n          <span class=\"client-libraries-text\">{{ sdk.lang }}</span>\n        </button>\n\n        <!-- More dropdown -->\n        <ScalarCombobox\n          v-if=\"visibleCount < sdks.length\"\n          :modelValue=\"selectedMoreOption\"\n          :options=\"moreOptions\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectMore\">\n          <button\n            class=\"client-libraries client-libraries-more\"\n            :class=\"{ 'client-libraries__active': isMoreActive }\"\n            type=\"button\">\n            <ScalarIcon\n              class=\"client-libraries-icon\"\n              :icon=\"\n                isMoreActive && selected?.icon ? selected.icon : 'Ellipses'\n              \" />\n            <span class=\"client-libraries-text\">\n              {{ translate('clientLibraries.more') }}\n            </span>\n          </button>\n        </ScalarCombobox>\n      </div>\n\n      <!-- Hidden row used to measure the natural width of every tab. It is\n           clipped to a zero-size box so it never contributes to the scrollable\n           width of the (horizontally scrollable) row above. -->\n      <div\n        aria-hidden=\"true\"\n        class=\"client-libraries-measure-clip\">\n        <div\n          ref=\"measureRef\"\n          class=\"client-libraries-row client-libraries-row--measure\">\n          <span\n            v-for=\"(sdk, index) in sdks\"\n            :key=\"index\"\n            class=\"client-libraries\">\n            <ScalarIcon\n              v-if=\"sdk.icon\"\n              class=\"client-libraries-icon\"\n              :icon=\"sdk.icon\" />\n            <span class=\"client-libraries-text\">{{ sdk.lang }}</span>\n          </span>\n          <span class=\"client-libraries\">\n            <ScalarIcon\n              class=\"client-libraries-icon\"\n              icon=\"Ellipses\" />\n            <span class=\"client-libraries-text\">\n              {{ translate('clientLibraries.more') }}\n            </span>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Content: Markdown installation instructions (supports code blocks) -->\n    <div\n      v-if=\"selected?.description\"\n      :id=\"panelId\"\n      :aria-labelledby=\"activeTabId\"\n      class=\"selected-client\"\n      role=\"tabpanel\"\n      tabindex=\"0\">\n      <ScalarMarkdown :value=\"selected.description\" />\n    </div>\n  </div>\n</template>\n<style scoped>\n/* One panel holds the Markdown installation instructions */\n.selected-client {\n  display: flex;\n  flex-direction: column;\n  gap: 9px;\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  padding: 9px 12px;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top: none;\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n}\n.client-libraries-heading {\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-medium);\n  color: var(--scalar-color-1);\n  padding: 9px 12px;\n  background-color: var(--scalar-background-2);\n  display: flex;\n  align-items: center;\n  max-height: 32px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top-left-radius: var(--scalar-radius-xl);\n  border-top-right-radius: var(--scalar-radius-xl);\n}\n.client-libraries-content {\n  position: relative;\n  /*\n   * Scroll horizontally rather than clip: before JS measures the tab widths\n   * (and without JS at all) every tab is rendered, so overflowing tabs must\n   * stay reachable. Once measured, the \"More\" dropdown absorbs the overflow and\n   * no scrollbar is shown. The bar itself is hidden — keyboard focus and touch\n   * still scroll clipped tabs into view.\n   */\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  padding: 0 12px;\n  background-color: var(--scalar-background-1);\n  border-left: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-right: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n.client-libraries-content::-webkit-scrollbar {\n  display: none;\n}\n.client-libraries-row {\n  display: flex;\n  justify-content: flex-start;\n}\n/* Zero-size clip so the measure row never adds to the scrollable width */\n.client-libraries-measure-clip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: hidden;\n}\n/* Off-screen row used only to measure natural tab widths */\n.client-libraries-row--measure {\n  width: max-content;\n  visibility: hidden;\n  pointer-events: none;\n}\n.client-libraries {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n  white-space: nowrap;\n  /* Keep tabs at their natural (measured) width so they scroll rather than squish */\n  flex-shrink: 0;\n  padding: 8px 12px;\n  gap: 6px;\n  color: var(--scalar-color-3);\n  border-bottom: 1px solid transparent;\n  background: transparent;\n  user-select: none;\n}\n.client-libraries:not(.client-libraries__active):hover:before {\n  content: '';\n  position: absolute;\n  width: calc(100% - 4px);\n  height: calc(100% - 4px);\n  background: var(--scalar-background-2);\n  left: 2px;\n  top: 2px;\n  z-index: 0;\n  border-radius: var(--scalar-radius);\n}\n.client-libraries:active {\n  color: var(--scalar-color-1);\n}\n.client-libraries:focus-visible {\n  outline: none;\n  box-shadow: inset 0 0 0 1px var(--scalar-color-accent);\n}\n.client-libraries__active {\n  color: var(--scalar-color-1);\n  border-bottom: 1px solid var(--scalar-color-1);\n}\n/* Always pin the \"More\" dropdown to the right edge */\n.client-libraries-more {\n  margin-left: auto;\n}\n.client-libraries-icon {\n  max-width: 14px;\n  max-height: 14px;\n  min-width: 14px;\n  width: 100%;\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  box-sizing: border-box;\n  color: currentColor;\n}\n.client-libraries .client-libraries-text {\n  font-size: var(--scalar-small);\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.client-libraries__active .client-libraries-text {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"SdkInstallationInstructions.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getCustomClientIds } from '@scalar/blocks/code-example'\nimport {\n  ScalarCombobox,\n  type ScalarComboboxOption,\n} from '@scalar/components/combobox'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { XScalarSdkInstallation } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-sdk-installation'\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  watch,\n} from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nimport { getLanguageIcon } from '../helpers/language-icon'\nimport { getRenderableSdks } from '../helpers/renderable-sdks'\nimport { getVisibleTabCount } from '../helpers/visible-tab-count'\n\nconst { xScalarSdkInstallation, selectedClient, eventBus } = defineProps<{\n  /** Custom SDK installation instructions from `x-scalar-sdk-installation` */\n  xScalarSdkInstallation?: XScalarSdkInstallation['x-scalar-sdk-installation']\n  /**\n   * The globally selected client id. When it matches one of the SDK languages\n   * (as a `custom/<lang>` id) the matching tab is shown as active, keeping the\n   * tabs in sync with the operation code samples.\n   */\n  selectedClient?: string\n  /**\n   * Event bus used to broadcast the selected client. Picking a language here\n   * switches the operation code samples to that language's custom example, the\n   * same channel the generic client selector uses.\n   */\n  eventBus?: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\n/** Base id used to associate each tab with the shared panel for assistive tech */\nconst baseId = useId()\nconst panelId = `${baseId}-panel`\nconst { translate } = useLocalization()\n\n/** Only the SDKs that actually have something to show, with their resolved icon */\nconst sdks = computed(() =>\n  getRenderableSdks(xScalarSdkInstallation).map((sdk) => ({\n    ...sdk,\n    icon: getLanguageIcon(sdk.lang),\n  })),\n)\n\n/** Index of the currently selected SDK */\nconst selectedIndex = ref(0)\n\n/** The currently selected SDK */\nconst selected = computed(() => sdks.value[selectedIndex.value])\n\n/**\n * The `custom/<lang>` client id for each SDK, aligned by index with `sdks`.\n *\n * We reuse the exact id scheme the operation code samples use for their custom\n * examples, so selecting a language here resolves to the same id those samples\n * are keyed by — that shared id is what keeps the two surfaces in sync.\n */\nconst sdkClientIds = computed(() =>\n  getCustomClientIds(sdks.value.map((sdk) => ({ lang: sdk.lang, source: '' }))),\n)\n\n/** Select an SDK by index and broadcast it so the operation code samples follow */\nconst select = (index: number) => {\n  selectedIndex.value = index\n\n  const id = sdkClientIds.value[index]\n  if (id) {\n    eventBus?.emit('workspace:update:selected-client', id)\n  }\n}\n\n// Keep the active tab aligned with the global selection, re-evaluating whenever\n// either the selection or the available SDKs change. Watching `sdkClientIds`\n// (not just `selectedClient`) is what stops the intro tab and the operation\n// samples from disagreeing after the SDK list is reordered or resized: the tab\n// follows the selected language to its new position. When the selection is a\n// built-in client (or a language this document has no install entry for) we keep\n// the current tab, only clamping it back into range if the list shrank past it.\nwatch(\n  [() => selectedClient, sdkClientIds],\n  ([client, ids]) => {\n    const matched = client ? ids.findIndex((id) => id === client) : -1\n\n    if (matched >= 0) {\n      selectedIndex.value = matched\n    } else if (selectedIndex.value > ids.length - 1) {\n      selectedIndex.value = 0\n    }\n  },\n  { immediate: true },\n)\n\n// Re-measure whenever the set of SDKs changes. Keying on the languages (not just\n// the count) also catches documents that swap in a different set of the same\n// size, which would otherwise leave the cached tab widths — and the \"More\"\n// overflow logic — stale.\nwatch(\n  () => sdks.value.map((sdk) => sdk.lang).join('\\n'),\n  () => void nextTick(measure),\n)\n\n/** The full row, measured for available width (the tab strip's own width depends on the outcome) */\nconst rowRef = ref<HTMLElement>()\n/** The tab strip, used to move focus between tabs */\nconst tabsRef = ref<HTMLElement>()\nconst measureRef = ref<HTMLElement>()\n\n/** The width available to render the tabs in */\nconst availableWidth = ref(0)\n/** The natural width of each tab */\nconst tabWidths = ref<number[]>([])\n/** The width of the \"More\" dropdown trigger */\nconst moreWidth = ref(0)\n\n/** Measure the available width and the natural width of each tab */\nconst measure = () => {\n  const measureEl = measureRef.value\n  const rowEl = rowRef.value\n\n  if (!measureEl || !rowEl) {\n    return\n  }\n\n  // The measuring row renders every tab followed by the \"More\" trigger\n  const widths = Array.from(measureEl.children).map(\n    (child) => (child as HTMLElement).offsetWidth,\n  )\n\n  tabWidths.value = widths.slice(0, sdks.value.length)\n  moreWidth.value = widths[sdks.value.length] ?? 0\n  availableWidth.value = rowEl.clientWidth\n}\n\n/** How many tabs fit inline before we need the \"More\" dropdown */\nconst visibleCount = computed(() => {\n  // Until we have measured, render everything (also the server-rendered state)\n  if (!tabWidths.value.length || availableWidth.value <= 0) {\n    return sdks.value.length\n  }\n\n  return getVisibleTabCount(\n    tabWidths.value,\n    availableWidth.value,\n    moreWidth.value,\n  )\n})\n\n/** The SDKs shown as inline tabs */\nconst visibleSdks = computed(() => sdks.value.slice(0, visibleCount.value))\n\n/** Whether the selected SDK lives in the \"More\" dropdown */\nconst isMoreActive = computed(() => selectedIndex.value >= visibleCount.value)\n\n/** The overflowing SDKs as combobox options, keyed by their original index */\nconst moreOptions = computed<ScalarComboboxOption[]>(() =>\n  sdks.value.slice(visibleCount.value).map((sdk, index) => ({\n    id: String(visibleCount.value + index),\n    label: sdk.lang,\n  })),\n)\n\n/** The selected option within the \"More\" dropdown, if any */\nconst selectedMoreOption = computed(() =>\n  moreOptions.value.find((option) => option.id === String(selectedIndex.value)),\n)\n\nconst selectMore = (option: ScalarComboboxOption | undefined) => {\n  if (option) {\n    select(Number(option.id))\n  }\n}\n\n/** The id of the tab that labels the panel (falls back to the heading when the selection lives in \"More\") */\nconst activeTabId = computed(() =>\n  isMoreActive.value ? headingId : `${baseId}-tab-${selectedIndex.value}`,\n)\n\n/**\n * The visible tab that holds the roving tabindex. When the selection lives in\n * the \"More\" dropdown, that trigger is the tab stop instead, so no inline tab\n * should be focusable.\n */\nconst tabStopIndex = computed(() =>\n  isMoreActive.value ? -1 : selectedIndex.value,\n)\n\n/** Focus a visible tab by index after the DOM has settled */\nconst focusTab = (index: number) => {\n  void nextTick(() => {\n    tabsRef.value\n      ?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')\n      [index]?.focus()\n  })\n}\n\n/** Arrow / Home / End keyboard navigation across the visible tabs (WAI-ARIA tabs pattern) */\nconst onTabKeydown = (event: KeyboardEvent, index: number) => {\n  const lastVisible = visibleCount.value - 1\n\n  let next = index\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowDown':\n      next = index >= lastVisible ? 0 : index + 1\n      break\n    case 'ArrowLeft':\n    case 'ArrowUp':\n      next = index <= 0 ? lastVisible : index - 1\n      break\n    case 'Home':\n      next = 0\n      break\n    case 'End':\n      next = lastVisible\n      break\n    default:\n      return\n  }\n\n  event.preventDefault()\n  select(next)\n  focusTab(next)\n}\n\nlet observer: ResizeObserver | undefined\nlet frame = 0\n\n/** Coalesce resize bursts into a single measure before the next paint */\nconst scheduleMeasure = () => {\n  if (typeof requestAnimationFrame === 'undefined') {\n    measure()\n    return\n  }\n  cancelAnimationFrame(frame)\n  frame = requestAnimationFrame(measure)\n}\n\nonMounted(() => {\n  if (typeof ResizeObserver !== 'undefined') {\n    observer = new ResizeObserver(scheduleMeasure)\n    // Observe the visible row for the available width, and the hidden measure\n    // row for the natural tab widths. The latter catches changes the container\n    // never sees — web fonts loading, or labels changing without the count\n    // changing — which would otherwise leave the overflow logic stale.\n    if (rowRef.value) {\n      observer.observe(rowRef.value)\n    }\n    if (measureRef.value) {\n      observer.observe(measureRef.value)\n    }\n  }\n  measure()\n})\n\nonBeforeUnmount(() => {\n  observer?.disconnect()\n  if (typeof cancelAnimationFrame !== 'undefined') {\n    cancelAnimationFrame(frame)\n  }\n})\n</script>\n<template>\n  <div v-if=\"sdks.length\">\n    <div\n      :id=\"headingId\"\n      class=\"client-libraries-heading\">\n      {{ translate('clientLibraries.heading') }}\n    </div>\n\n    <!-- Tabs: keep the More combobox outside the tablist so every tablist\n         child is a tab (aria-required-children). -->\n    <div class=\"client-libraries-content\">\n      <div\n        ref=\"rowRef\"\n        class=\"client-libraries-row\">\n        <div\n          ref=\"tabsRef\"\n          :aria-labelledby=\"headingId\"\n          class=\"client-libraries-tabs\"\n          role=\"tablist\">\n          <button\n            v-for=\"(sdk, index) in visibleSdks\"\n            :id=\"`${baseId}-tab-${index}`\"\n            :key=\"index\"\n            :aria-controls=\"panelId\"\n            :aria-selected=\"index === selectedIndex\"\n            class=\"client-libraries\"\n            :class=\"{ 'client-libraries__active': index === selectedIndex }\"\n            role=\"tab\"\n            :tabindex=\"index === tabStopIndex ? 0 : -1\"\n            type=\"button\"\n            @click=\"select(index)\"\n            @keydown=\"onTabKeydown($event, index)\">\n            <ScalarIcon\n              v-if=\"sdk.icon\"\n              class=\"client-libraries-icon\"\n              :icon=\"sdk.icon\" />\n            <span class=\"client-libraries-text\">{{ sdk.lang }}</span>\n          </button>\n        </div>\n\n        <!-- More dropdown (not a tab — lives beside the tablist) -->\n        <ScalarCombobox\n          v-if=\"visibleCount < sdks.length\"\n          :modelValue=\"selectedMoreOption\"\n          :options=\"moreOptions\"\n          placement=\"bottom-end\"\n          teleport\n          @update:modelValue=\"selectMore\">\n          <button\n            class=\"client-libraries client-libraries-more\"\n            :class=\"{ 'client-libraries__active': isMoreActive }\"\n            type=\"button\">\n            <ScalarIcon\n              class=\"client-libraries-icon\"\n              :icon=\"\n                isMoreActive && selected?.icon ? selected.icon : 'Ellipses'\n              \" />\n            <span class=\"client-libraries-text\">\n              {{ translate('clientLibraries.more') }}\n            </span>\n          </button>\n        </ScalarCombobox>\n      </div>\n\n      <!-- Hidden row used to measure the natural width of every tab. It is\n           clipped to a zero-size box so it never contributes to the scrollable\n           width of the (horizontally scrollable) row above. -->\n      <div\n        aria-hidden=\"true\"\n        class=\"client-libraries-measure-clip\">\n        <div\n          ref=\"measureRef\"\n          class=\"client-libraries-row client-libraries-row--measure\">\n          <span\n            v-for=\"(sdk, index) in sdks\"\n            :key=\"index\"\n            class=\"client-libraries\">\n            <ScalarIcon\n              v-if=\"sdk.icon\"\n              class=\"client-libraries-icon\"\n              :icon=\"sdk.icon\" />\n            <span class=\"client-libraries-text\">{{ sdk.lang }}</span>\n          </span>\n          <span class=\"client-libraries\">\n            <ScalarIcon\n              class=\"client-libraries-icon\"\n              icon=\"Ellipses\" />\n            <span class=\"client-libraries-text\">\n              {{ translate('clientLibraries.more') }}\n            </span>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Content: Markdown installation instructions (supports code blocks) -->\n    <div\n      v-if=\"selected?.description\"\n      :id=\"panelId\"\n      :aria-labelledby=\"activeTabId\"\n      class=\"selected-client\"\n      role=\"tabpanel\"\n      tabindex=\"0\">\n      <ScalarMarkdown :value=\"selected.description\" />\n    </div>\n  </div>\n</template>\n<style scoped>\n/* One panel holds the Markdown installation instructions */\n.selected-client {\n  display: flex;\n  flex-direction: column;\n  gap: 9px;\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  padding: 9px 12px;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top: none;\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n}\n.client-libraries-heading {\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-medium);\n  color: var(--scalar-color-1);\n  padding: 9px 12px;\n  background-color: var(--scalar-background-2);\n  display: flex;\n  align-items: center;\n  max-height: 32px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top-left-radius: var(--scalar-radius-xl);\n  border-top-right-radius: var(--scalar-radius-xl);\n}\n.client-libraries-content {\n  position: relative;\n  /*\n   * Scroll horizontally rather than clip: before JS measures the tab widths\n   * (and without JS at all) every tab is rendered, so overflowing tabs must\n   * stay reachable. Once measured, the \"More\" dropdown absorbs the overflow and\n   * no scrollbar is shown. The bar itself is hidden — keyboard focus and touch\n   * still scroll clipped tabs into view.\n   */\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  padding: 0 12px;\n  background-color: var(--scalar-background-1);\n  border-left: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-right: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n.client-libraries-content::-webkit-scrollbar {\n  display: none;\n}\n.client-libraries-row {\n  display: flex;\n  justify-content: flex-start;\n}\n/* Sized to its tabs, so the \"More\" trigger still pins to the right edge */\n.client-libraries-tabs {\n  display: flex;\n  flex: 0 0 auto;\n}\n/* Zero-size clip so the measure row never adds to the scrollable width */\n.client-libraries-measure-clip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: hidden;\n}\n/* Off-screen row used only to measure natural tab widths */\n.client-libraries-row--measure {\n  width: max-content;\n  visibility: hidden;\n  pointer-events: none;\n}\n.client-libraries {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n  white-space: nowrap;\n  /* Keep tabs at their natural (measured) width so they scroll rather than squish */\n  flex-shrink: 0;\n  padding: 8px 12px;\n  gap: 6px;\n  color: var(--scalar-color-3);\n  border-bottom: 1px solid transparent;\n  background: transparent;\n  user-select: none;\n}\n.client-libraries:not(.client-libraries__active):hover:before {\n  content: '';\n  position: absolute;\n  width: calc(100% - 4px);\n  height: calc(100% - 4px);\n  background: var(--scalar-background-2);\n  left: 2px;\n  top: 2px;\n  z-index: 0;\n  border-radius: var(--scalar-radius);\n}\n.client-libraries:active {\n  color: var(--scalar-color-1);\n}\n.client-libraries:focus-visible {\n  outline: none;\n  box-shadow: inset 0 0 0 1px var(--scalar-color-accent);\n}\n.client-libraries__active {\n  color: var(--scalar-color-1);\n  border-bottom: 1px solid var(--scalar-color-1);\n}\n/* Always pin the \"More\" dropdown to the right edge */\n.client-libraries-more {\n  margin-left: auto;\n}\n.client-libraries-icon {\n  max-width: 14px;\n  max-height: 14px;\n  min-width: 14px;\n  width: 100%;\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  box-sizing: border-box;\n  color: currentColor;\n}\n.client-libraries .client-libraries-text {\n  font-size: var(--scalar-small);\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.client-libraries__active .client-libraries-text {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n</style>\n"],"mappings":"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"}

package/dist/blocks/scalar-sdk-installation-instructions/helpers/language-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"language-icon.js","names":[],"sources":["../../../../src/blocks/scalar-sdk-installation-instructions/helpers/language-icon.ts"],"sourcesContent":["import type { Icon } from '@scalar/components/icon'\n\n/**\n * Maps common language names (and a few aliases) to the matching\n * `programming-language-*` icon.\n *\n * The `lang` in `x-scalar-sdk-installation` is a freeform string, so we only\n * resolve the ones we have a logo for and let the caller fall back to text.\n */\nconst LANGUAGE_ICONS: Record<string, Icon> = {\n  c: 'programming-language-c',\n  clojure: 'programming-language-clojure',\n  csharp: 'programming-language-csharp',\n  'c#': 'programming-language-csharp',\n  cs: 'programming-language-csharp',\n  css: 'programming-language-css3',\n  css3: 'programming-language-css3',\n  dart: 'programming-language-dart',\n  fsharp: 'programming-language-fsharp',\n  'f#': 'programming-language-fsharp',\n  go: 'programming-language-go',\n  golang: 'programming-language-go',\n  html: 'programming-language-html5',\n  html5: 'programming-language-html5',\n  http: 'programming-language-http',\n  java: 'programming-language-java',\n  javascript: 'programming-language-javascript',\n  js: 'programming-language-javascript',\n  json: 'programming-language-json',\n  kotlin: 'programming-language-kotlin',\n  node: 'programming-language-node',\n  'node.js': 'programming-language-node',\n  nodejs: 'programming-language-node',\n  objc: 'programming-language-objc',\n  'objective-c': 'programming-language-objc',\n  ocaml: 'programming-language-ocaml',\n  php: 'programming-language-php',\n  powershell: 'programming-language-powershell',\n  python: 'programming-language-python',\n  py: 'programming-language-python',\n  r: 'programming-language-r',\n  ruby: 'programming-language-ruby',\n  rb: 'programming-language-ruby',\n  rust: 'programming-language-rust',\n  rs: 'programming-language-rust',\n  scala: 'programming-language-scala',\n  shell: 'programming-language-shell',\n  bash: 'programming-language-shell',\n  sh: 'programming-language-shell',\n  curl: 'programming-language-shell',\n  swift: 'programming-language-swift',\n  typescript: 'programming-language-typescript',\n  ts: 'programming-language-typescript',\n}\n\n/** Find the programming language icon for a given language name, if we have one. */\nexport const getLanguageIcon = (lang: string): Icon | undefined => LANGUAGE_ICONS[lang.trim().toLowerCase()]\n"],"mappings":";;;;;;;;AASA,IAAM,iBAAuC;CAC3C,GAAG;CACH,SAAS;CACT,QAAQ;CACR,MAAM;CACN,IAAI;CACJ,KAAK;CACL,MAAM;CACN,MAAM;CACN,QAAQ;CACR,MAAM;CACN,IAAI;CACJ,QAAQ;CACR,MAAM;CACN,OAAO;CACP,MAAM;CACN,MAAM;CACN,YAAY;CACZ,IAAI;CACJ,MAAM;CACN,QAAQ;CACR,MAAM;CACN,WAAW;CACX,QAAQ;CACR,MAAM;CACN,eAAe;CACf,OAAO;CACP,KAAK;CACL,YAAY;CACZ,QAAQ;CACR,IAAI;CACJ,GAAG;CACH,MAAM;CACN,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;CACN,IAAI;CACJ,MAAM;CACN,OAAO;CACP,YAAY;CACZ,IAAI;CACL;;AAGD,IAAa,mBAAmB,SAAmC,eAAe,KAAK,MAAM,CAAC,aAAa"}
+{"version":3,"file":"language-icon.js","names":[],"sources":["../../../../src/blocks/scalar-sdk-installation-instructions/helpers/language-icon.ts"],"sourcesContent":["import type { Icon } from '@scalar/components/icon'\n\n/**\n * Maps common language names (and a few aliases) to the matching\n * `programming-language-*` icon.\n *\n * The `lang` in `x-scalar-sdk-installation` is a freeform string, so we only\n * resolve the ones we have a logo for and let the caller fall back to text.\n */\nconst LANGUAGE_ICONS: Record<string, Icon> = {\n  c: 'programming-language-c',\n  clojure: 'programming-language-clojure',\n  csharp: 'programming-language-csharp',\n  'c#': 'programming-language-csharp',\n  cs: 'programming-language-csharp',\n  css: 'programming-language-css3',\n  css3: 'programming-language-css3',\n  dart: 'programming-language-dart',\n  fsharp: 'programming-language-fsharp',\n  'f#': 'programming-language-fsharp',\n  go: 'programming-language-go',\n  golang: 'programming-language-go',\n  html: 'programming-language-html5',\n  html5: 'programming-language-html5',\n  http: 'programming-language-http',\n  java: 'programming-language-java',\n  javascript: 'programming-language-javascript',\n  js: 'programming-language-javascript',\n  json: 'programming-language-json',\n  kotlin: 'programming-language-kotlin',\n  node: 'programming-language-node',\n  'node.js': 'programming-language-node',\n  nodejs: 'programming-language-node',\n  objc: 'programming-language-objc',\n  'objective-c': 'programming-language-objc',\n  ocaml: 'programming-language-ocaml',\n  php: 'programming-language-php',\n  powershell: 'programming-language-powershell',\n  python: 'programming-language-python',\n  py: 'programming-language-python',\n  r: 'programming-language-r',\n  ruby: 'programming-language-ruby',\n  rb: 'programming-language-ruby',\n  rust: 'programming-language-rust',\n  rs: 'programming-language-rust',\n  scala: 'programming-language-scala',\n  shell: 'programming-language-shell',\n  bash: 'programming-language-shell',\n  sh: 'programming-language-shell',\n  curl: 'programming-language-shell',\n  swift: 'programming-language-swift',\n  typescript: 'programming-language-typescript',\n  ts: 'programming-language-typescript',\n}\n\n/** Find the programming language icon for a given language name, if we have one. */\nexport const getLanguageIcon = (lang: string): Icon | undefined => LANGUAGE_ICONS[lang.trim().toLowerCase()]\n"],"mappings":";;;;;;;;AASA,IAAM,iBAAuC;CAC3C,GAAG;CACH,SAAS;CACT,QAAQ;CACR,MAAM;CACN,IAAI;CACJ,KAAK;CACL,MAAM;CACN,MAAM;CACN,QAAQ;CACR,MAAM;CACN,IAAI;CACJ,QAAQ;CACR,MAAM;CACN,OAAO;CACP,MAAM;CACN,MAAM;CACN,YAAY;CACZ,IAAI;CACJ,MAAM;CACN,QAAQ;CACR,MAAM;CACN,WAAW;CACX,QAAQ;CACR,MAAM;CACN,eAAe;CACf,OAAO;CACP,KAAK;CACL,YAAY;CACZ,QAAQ;CACR,IAAI;CACJ,GAAG;CACH,MAAM;CACN,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;CACN,IAAI;CACJ,MAAM;CACN,OAAO;CACP,YAAY;CACZ,IAAI;AACN;;AAGA,IAAa,mBAAmB,SAAmC,eAAe,KAAK,KAAK,CAAC,CAAC,YAAY"}

package/dist/blocks/scalar-sdk-installation-instructions/helpers/renderable-sdks.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderable-sdks.js","names":[],"sources":["../../../../src/blocks/scalar-sdk-installation-instructions/helpers/renderable-sdks.ts"],"sourcesContent":["import type { XScalarSdkInstallation } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-sdk-installation'\n\n/** The array shape stored under `x-scalar-sdk-installation`. */\ntype SdkInstallationList = NonNullable<XScalarSdkInstallation['x-scalar-sdk-installation']>\n\n/** A renderable SDK entry whose `description` is the resolved Markdown to show. */\ntype RenderableSdk = {\n  lang: string\n  description: string\n}\n\n/**\n * Wrap a raw install command in a fenced code block.\n *\n * The fence uses a run of backticks longer than the longest run inside the\n * source, so a `source` that itself contains backticks (or a nested fence)\n * still renders as a single code block instead of breaking out of it.\n */\nconst toFencedCodeBlock = (source: string): string => {\n  const longestRun = Math.max(0, ...[...source.matchAll(/`+/g)].map((match) => match[0].length))\n  const fence = '`'.repeat(Math.max(3, longestRun + 1))\n\n  return `${fence}\\n${source}\\n${fence}`\n}\n\n/**\n * The SDK installation entries that actually have something to render, each\n * resolved to a single Markdown `description`.\n *\n * A `description` is the promoted content, but the legacy `source` install\n * command is still supported: when both are present it is appended to the\n * description as a fenced code block, and when only `source` is present it\n * becomes the description on its own. Entries that carry neither are ignored so\n * the UI can fall back to the generic client selector instead of showing an\n * empty card. Both the gate in `Content.vue` and the tab list in the block rely\n * on this, so the \"has instructions\" rule lives in one place.\n *\n * The value comes straight from an untrusted OpenAPI document, so anything\n * malformed — a non-array extension, a non-object entry, or an entry missing a\n * string `lang` (the tab label and icon key) and any content — is treated as\n * \"no instructions\" rather than allowed to throw at render time.\n */\nexport const getRenderableSdks = (xScalarSdkInstallation: SdkInstallationList | undefined): RenderableSdk[] =>\n  Array.isArray(xScalarSdkInstallation)\n    ? xScalarSdkInstallation.flatMap((sdk) => {\n        if (typeof sdk?.lang !== 'string') {\n          return []\n        }\n\n        // Keep the description verbatim so indented code blocks and other\n        // significant whitespace survive; only a whitespace-only value counts\n        // as \"no description\".\n        const description = typeof sdk.description === 'string' && sdk.description.trim() ? sdk.description : ''\n        const source = typeof sdk.source === 'string' ? sdk.source.trim() : ''\n\n        if (!description && !source) {\n          return []\n        }\n\n        const resolved = [description, source && toFencedCodeBlock(source)].filter(Boolean).join('\\n\\n')\n\n        return [{ lang: sdk.lang, description: resolved }]\n      })\n    : []\n"],"mappings":";;;;;;;;AAkBA,IAAM,qBAAqB,WAA2B;CACpD,MAAM,aAAa,KAAK,IAAI,GAAG,GAAG,CAAC,GAAG,OAAO,SAAS,MAAM,CAAC,CAAC,KAAK,UAAU,MAAM,GAAG,OAAO,CAAC;CAC9F,MAAM,QAAQ,IAAI,OAAO,KAAK,IAAI,GAAG,aAAa,EAAE,CAAC;AAErD,QAAO,GAAG,MAAM,IAAI,OAAO,IAAI;;;;;;;;;;;;;;;;;;;AAoBjC,IAAa,qBAAqB,2BAChC,MAAM,QAAQ,uBAAuB,GACjC,uBAAuB,SAAS,QAAQ;AACtC,KAAI,OAAO,KAAK,SAAS,SACvB,QAAO,EAAE;CAMX,MAAM,cAAc,OAAO,IAAI,gBAAgB,YAAY,IAAI,YAAY,MAAM,GAAG,IAAI,cAAc;CACtG,MAAM,SAAS,OAAO,IAAI,WAAW,WAAW,IAAI,OAAO,MAAM,GAAG;AAEpE,KAAI,CAAC,eAAe,CAAC,OACnB,QAAO,EAAE;CAGX,MAAM,WAAW,CAAC,aAAa,UAAU,kBAAkB,OAAO,CAAC,CAAC,OAAO,QAAQ,CAAC,KAAK,OAAO;AAEhG,QAAO,CAAC;EAAE,MAAM,IAAI;EAAM,aAAa;EAAU,CAAC;EAClD,GACF,EAAE"}
+{"version":3,"file":"renderable-sdks.js","names":[],"sources":["../../../../src/blocks/scalar-sdk-installation-instructions/helpers/renderable-sdks.ts"],"sourcesContent":["import type { XScalarSdkInstallation } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-sdk-installation'\n\n/** The array shape stored under `x-scalar-sdk-installation`. */\ntype SdkInstallationList = NonNullable<XScalarSdkInstallation['x-scalar-sdk-installation']>\n\n/** A renderable SDK entry whose `description` is the resolved Markdown to show. */\ntype RenderableSdk = {\n  lang: string\n  description: string\n}\n\n/**\n * Wrap a raw install command in a fenced code block.\n *\n * The fence uses a run of backticks longer than the longest run inside the\n * source, so a `source` that itself contains backticks (or a nested fence)\n * still renders as a single code block instead of breaking out of it.\n */\nconst toFencedCodeBlock = (source: string): string => {\n  const longestRun = Math.max(0, ...[...source.matchAll(/`+/g)].map((match) => match[0].length))\n  const fence = '`'.repeat(Math.max(3, longestRun + 1))\n\n  return `${fence}\\n${source}\\n${fence}`\n}\n\n/**\n * The SDK installation entries that actually have something to render, each\n * resolved to a single Markdown `description`.\n *\n * A `description` is the promoted content, but the legacy `source` install\n * command is still supported: when both are present it is appended to the\n * description as a fenced code block, and when only `source` is present it\n * becomes the description on its own. Entries that carry neither are ignored so\n * the UI can fall back to the generic client selector instead of showing an\n * empty card. Both the gate in `Content.vue` and the tab list in the block rely\n * on this, so the \"has instructions\" rule lives in one place.\n *\n * The value comes straight from an untrusted OpenAPI document, so anything\n * malformed — a non-array extension, a non-object entry, or an entry missing a\n * string `lang` (the tab label and icon key) and any content — is treated as\n * \"no instructions\" rather than allowed to throw at render time.\n */\nexport const getRenderableSdks = (xScalarSdkInstallation: SdkInstallationList | undefined): RenderableSdk[] =>\n  Array.isArray(xScalarSdkInstallation)\n    ? xScalarSdkInstallation.flatMap((sdk) => {\n        if (typeof sdk?.lang !== 'string') {\n          return []\n        }\n\n        // Keep the description verbatim so indented code blocks and other\n        // significant whitespace survive; only a whitespace-only value counts\n        // as \"no description\".\n        const description = typeof sdk.description === 'string' && sdk.description.trim() ? sdk.description : ''\n        const source = typeof sdk.source === 'string' ? sdk.source.trim() : ''\n\n        if (!description && !source) {\n          return []\n        }\n\n        const resolved = [description, source && toFencedCodeBlock(source)].filter(Boolean).join('\\n\\n')\n\n        return [{ lang: sdk.lang, description: resolved }]\n      })\n    : []\n"],"mappings":";;;;;;;;AAkBA,IAAM,qBAAqB,WAA2B;CACpD,MAAM,aAAa,KAAK,IAAI,GAAG,GAAG,CAAC,GAAG,OAAO,SAAS,KAAK,CAAC,CAAC,CAAC,KAAK,UAAU,MAAM,EAAE,CAAC,MAAM,CAAC;CAC7F,MAAM,QAAQ,IAAI,OAAO,KAAK,IAAI,GAAG,aAAa,CAAC,CAAC;CAEpD,OAAO,GAAG,MAAM,IAAI,OAAO,IAAI;AACjC;;;;;;;;;;;;;;;;;;AAmBA,IAAa,qBAAqB,2BAChC,MAAM,QAAQ,sBAAsB,IAChC,uBAAuB,SAAS,QAAQ;CACtC,IAAI,OAAO,KAAK,SAAS,UACvB,OAAO,CAAC;CAMV,MAAM,cAAc,OAAO,IAAI,gBAAgB,YAAY,IAAI,YAAY,KAAK,IAAI,IAAI,cAAc;CACtG,MAAM,SAAS,OAAO,IAAI,WAAW,WAAW,IAAI,OAAO,KAAK,IAAI;CAEpE,IAAI,CAAC,eAAe,CAAC,QACnB,OAAO,CAAC;CAGV,MAAM,WAAW,CAAC,aAAa,UAAU,kBAAkB,MAAM,CAAC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,MAAM;CAE/F,OAAO,CAAC;EAAE,MAAM,IAAI;EAAM,aAAa;CAAS,CAAC;AACnD,CAAC,IACD,CAAC"}

package/dist/blocks/scalar-sdk-installation-instructions/helpers/visible-tab-count.js.map

@@ -1 +1 @@
-{"version":3,"file":"visible-tab-count.js","names":[],"sources":["../../../../src/blocks/scalar-sdk-installation-instructions/helpers/visible-tab-count.ts"],"sourcesContent":["/**\n * Work out how many tabs fit inline given the width of each tab and the width\n * available to render them in.\n *\n * When everything fits, all tabs are shown. Otherwise we reserve room for the\n * \"More\" dropdown trigger and return how many tabs fit alongside it (always at\n * least one, so the row is never empty).\n */\nexport const getVisibleTabCount = (\n  /** The natural width of each tab, in order */\n  tabWidths: number[],\n  /** The width available to render the tabs in */\n  availableWidth: number,\n  /** The width of the \"More\" dropdown trigger */\n  moreWidth: number,\n): number => {\n  const total = tabWidths.length\n\n  // Without a measurement yet, render everything and correct on the next pass\n  if (availableWidth <= 0) {\n    return total\n  }\n\n  const countThatFits = (reserved: number) => {\n    let used = 0\n    let count = 0\n\n    for (const width of tabWidths) {\n      if (used + width > availableWidth - reserved) {\n        break\n      }\n      used += width\n      count++\n    }\n\n    return count\n  }\n\n  // Everything fits, so there is no need for a \"More\" dropdown\n  if (countThatFits(0) >= total) {\n    return total\n  }\n\n  // Reserve room for the \"More\" trigger and keep at least one tab visible\n  return Math.max(1, countThatFits(moreWidth))\n}\n"],"mappings":";;;;;;;;;AAQA,IAAa,sBAEX,WAEA,gBAEA,cACW;CACX,MAAM,QAAQ,UAAU;AAGxB,KAAI,kBAAkB,EACpB,QAAO;CAGT,MAAM,iBAAiB,aAAqB;EAC1C,IAAI,OAAO;EACX,IAAI,QAAQ;AAEZ,OAAK,MAAM,SAAS,WAAW;AAC7B,OAAI,OAAO,QAAQ,iBAAiB,SAClC;AAEF,WAAQ;AACR;;AAGF,SAAO;;AAIT,KAAI,cAAc,EAAE,IAAI,MACtB,QAAO;AAIT,QAAO,KAAK,IAAI,GAAG,cAAc,UAAU,CAAC"}
+{"version":3,"file":"visible-tab-count.js","names":[],"sources":["../../../../src/blocks/scalar-sdk-installation-instructions/helpers/visible-tab-count.ts"],"sourcesContent":["/**\n * Work out how many tabs fit inline given the width of each tab and the width\n * available to render them in.\n *\n * When everything fits, all tabs are shown. Otherwise we reserve room for the\n * \"More\" dropdown trigger and return how many tabs fit alongside it (always at\n * least one, so the row is never empty).\n */\nexport const getVisibleTabCount = (\n  /** The natural width of each tab, in order */\n  tabWidths: number[],\n  /** The width available to render the tabs in */\n  availableWidth: number,\n  /** The width of the \"More\" dropdown trigger */\n  moreWidth: number,\n): number => {\n  const total = tabWidths.length\n\n  // Without a measurement yet, render everything and correct on the next pass\n  if (availableWidth <= 0) {\n    return total\n  }\n\n  const countThatFits = (reserved: number) => {\n    let used = 0\n    let count = 0\n\n    for (const width of tabWidths) {\n      if (used + width > availableWidth - reserved) {\n        break\n      }\n      used += width\n      count++\n    }\n\n    return count\n  }\n\n  // Everything fits, so there is no need for a \"More\" dropdown\n  if (countThatFits(0) >= total) {\n    return total\n  }\n\n  // Reserve room for the \"More\" trigger and keep at least one tab visible\n  return Math.max(1, countThatFits(moreWidth))\n}\n"],"mappings":";;;;;;;;;AAQA,IAAa,sBAEX,WAEA,gBAEA,cACW;CACX,MAAM,QAAQ,UAAU;CAGxB,IAAI,kBAAkB,GACpB,OAAO;CAGT,MAAM,iBAAiB,aAAqB;EAC1C,IAAI,OAAO;EACX,IAAI,QAAQ;EAEZ,KAAK,MAAM,SAAS,WAAW;GAC7B,IAAI,OAAO,QAAQ,iBAAiB,UAClC;GAEF,QAAQ;GACR;EACF;EAEA,OAAO;CACT;CAGA,IAAI,cAAc,CAAC,KAAK,OACtB,OAAO;CAIT,OAAO,KAAK,IAAI,GAAG,cAAc,SAAS,CAAC;AAC7C"}

package/dist/blocks/scalar-server-selector-block/components/Selector.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Selector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-server-selector-block/components/Selector.vue"],"names":[],"mappings":"AAoFA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAKhG,KAAK,WAAW,GAAG;IACjB,8BAA8B;IAC9B,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,wBAAwB;IACxB,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAA;CACf,CAAC;AAkMF,QAAA,MAAM,YAAY;;;;;;;;;;;;kFAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Selector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-server-selector-block/components/Selector.vue"],"names":[],"mappings":"AAoFA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAKhG,KAAK,WAAW,GAAG;IACjB,8BAA8B;IAC9B,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,wBAAwB;IACxB,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAA;CACf,CAAC;AAmMF,QAAA,MAAM,YAAY;;;;;;;;;;;;kFAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/blocks/scalar-server-selector-block/components/Selector.vue.script.js

@@ -12,7 +12,7 @@ var _hoisted_3 = {
 };
 var _hoisted_4 = { class: "sr-only" };
 var _hoisted_5 = { class: "overflow-x-auto" };
-var Selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Selector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Selector",
 	props: {
 		selectedServer: {},

package/dist/blocks/scalar-server-selector-block/components/Selector.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selector.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-server-selector-block/components/Selector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nconst { target, servers, selectedServer } = defineProps<{\n  /** The selected server URL */\n  selectedServer: ServerObject | null\n  /** Available servers */\n  servers: ServerObject[]\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the selected server changes */\n  (e: 'update:modelValue', value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst serverOptions = computed(() =>\n  servers.map((server) => ({\n    id: server.url,\n    label: server.url,\n  })),\n)\n\nconst serverUrlWithoutTrailingSlash = computed(\n  () => selectedServer?.url?.replace(/\\/$/, '') || '',\n)\n\nconst selectedServerOption = computed(() =>\n  serverOptions.value.find((opt) => opt.id === selectedServer?.url),\n)\n\n// For testing\ndefineExpose({\n  servers,\n  serverUrlWithoutTrailingSlash,\n  serverOptions,\n  selectedServer,\n})\n</script>\n<template>\n  <ScalarListbox\n    v-if=\"serverOptions.length > 1\"\n    ref=\"elem\"\n    class=\"group\"\n    :modelValue=\"selectedServerOption\"\n    :options=\"serverOptions\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    @update:modelValue=\"(e) => emit('update:modelValue', e.id)\">\n    <ScalarButton\n      class=\"bg-b-1 text-c-1 h-auto w-full justify-start gap-1.5 overflow-x-auto rounded-t-none !rounded-b-xl px-3 py-1.5 text-base/5.25 font-normal whitespace-nowrap -outline-offset-1\"\n      variant=\"ghost\">\n      <span class=\"sr-only\">{{ translate('server.label') }}:</span>\n      <span class=\"overflow-x-auto\">\n        {{ serverUrlWithoutTrailingSlash || translate('server.select') }}\n      </span>\n      <ScalarIconCaretDown\n        class=\"text-c-2 ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n  <div\n    v-else\n    class=\"text-c-1 flex h-auto w-full items-center gap-0.75 !rounded-b-xl px-3 py-1.5 text-base leading-[20px] whitespace-nowrap\">\n    <span class=\"sr-only\">{{ translate('server.label') }}:</span>\n    <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,OAAO;EAKb,MAAM,EAAE,cAAc,iBAAgB;EAEtC,MAAM,gBAAgB,eACpB,QAAA,QAAQ,KAAK,YAAY;GACvB,IAAI,OAAO;GACX,OAAO,OAAO;GACf,EAAE,CACL;EAEA,MAAM,gCAAgC,eAC9B,QAAA,gBAAgB,KAAK,QAAQ,OAAO,GAAG,IAAI,GACnD;EAEA,MAAM,uBAAuB,eAC3B,cAAc,MAAM,MAAM,QAAQ,IAAI,OAAO,QAAA,gBAAgB,IAAI,CACnE;AAGA,WAAa;GACX,SAAM,QAAA;GACN;GACA;GACA,gBAAa,QAAA;GACd,CAAA;;UAIS,cAAA,MAAc,SAAM,KAAA,WAAA,EAD5B,YAqBgB,MAAA,cAAA,EAAA;;IAnBd,KAAI;IACJ,OAAM;IACL,YAAY,qBAAA;IACZ,SAAS,cAAA;IACV,WAAU;IACV,QAAA;IACC,QAAQ,QAAA;IACR,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAM,KAAI,qBAAsB,EAAE,GAAE;;2BAW1C,CAVf,YAUe,MAAA,aAAA,EAAA;KATb,OAAM;KACN,SAAQ;;4BACqD;MAA7D,mBAA6D,QAA7D,YAA6D,gBAApC,MAAA,UAAS,CAAA,eAAA,CAAA,GAAmB,KAAC,EAAA;MACtD,mBAEO,QAFP,YAEO,gBADF,8BAAA,SAAiC,MAAA,UAAS,CAAA,gBAAA,CAAA,EAAA,EAAA;MAE/C,YAEkB,MAAA,oBAAA,EAAA;OADhB,OAAM;OACN,QAAO;;;;;;;;;;uBAGb,mBAKM,OALN,YAKM,CAFJ,mBAA6D,QAA7D,YAA6D,gBAApC,MAAA,UAAS,CAAA,eAAA,CAAA,GAAmB,KAAC,EAAA,EACtD,mBAAwE,QAAxE,YAAwE,gBAAvC,8BAAA,MAA6B,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"Selector.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-server-selector-block/components/Selector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nconst { target, servers, selectedServer } = defineProps<{\n  /** The selected server URL */\n  selectedServer: ServerObject | null\n  /** Available servers */\n  servers: ServerObject[]\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the selected server changes */\n  (e: 'update:modelValue', value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst serverOptions = computed(() =>\n  servers.map((server) => ({\n    id: server.url,\n    label: server.url,\n  })),\n)\n\nconst serverUrlWithoutTrailingSlash = computed(\n  () => selectedServer?.url?.replace(/\\/$/, '') || '',\n)\n\nconst selectedServerOption = computed(() =>\n  serverOptions.value.find((opt) => opt.id === selectedServer?.url),\n)\n\n// For testing\ndefineExpose({\n  servers,\n  serverUrlWithoutTrailingSlash,\n  serverOptions,\n  selectedServer,\n})\n</script>\n<template>\n  <ScalarListbox\n    v-if=\"serverOptions.length > 1\"\n    ref=\"elem\"\n    class=\"group\"\n    :modelValue=\"selectedServerOption\"\n    :options=\"serverOptions\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    @update:modelValue=\"(e) => emit('update:modelValue', e.id)\">\n    <ScalarButton\n      class=\"bg-b-1 text-c-1 h-auto w-full justify-start gap-1.5 overflow-x-auto rounded-t-none !rounded-b-xl px-3 py-1.5 text-base/5.25 font-normal whitespace-nowrap -outline-offset-1\"\n      variant=\"ghost\">\n      <span class=\"sr-only\">{{ translate('server.label') }}:</span>\n      <span class=\"overflow-x-auto\">\n        {{ serverUrlWithoutTrailingSlash || translate('server.select') }}\n      </span>\n      <ScalarIconCaretDown\n        class=\"text-c-2 ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n  <div\n    v-else\n    class=\"text-c-1 flex h-auto w-full items-center gap-0.75 !rounded-b-xl px-3 py-1.5 text-base leading-[20px] whitespace-nowrap\">\n    <span class=\"sr-only\">{{ translate('server.label') }}:</span>\n    <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,OAAO;EAKb,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,gBAAgB,eACpB,QAAA,QAAQ,KAAK,YAAY;GACvB,IAAI,OAAO;GACX,OAAO,OAAO;EAChB,EAAE,CACJ;EAEA,MAAM,gCAAgC,eAC9B,QAAA,gBAAgB,KAAK,QAAQ,OAAO,EAAE,KAAK,EACnD;EAEA,MAAM,uBAAuB,eAC3B,cAAc,MAAM,MAAM,QAAQ,IAAI,OAAO,QAAA,gBAAgB,GAAG,CAClE;EAGA,SAAa;GACX,SAAM,QAAA;GACN;GACA;GACA,gBAAa,QAAA;EACf,CAAC;;UAIS,cAAA,MAAc,SAAM,KAAA,UAAA,GAD5B,YAqBgB,MAAA,aAAA,GAAA;;IAnBd,KAAI;IACJ,OAAM;IACL,YAAY,qBAAA;IACZ,SAAS,cAAA;IACV,WAAU;IACV,QAAA;IACC,QAAQ,QAAA;IACR,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAM,KAAI,qBAAsB,EAAE,EAAE;;2BAW1C,CAVf,YAUe,MAAA,YAAA,GAAA;KATb,OAAM;KACN,SAAQ;;4BACqD;MAA7D,mBAA6D,QAA7D,YAA6D,gBAApC,MAAA,SAAA,CAAS,CAAA,cAAA,CAAA,IAAmB,KAAC,CAAA;MACtD,mBAEO,QAFP,YAEO,gBADF,8BAAA,SAAiC,MAAA,SAAA,CAAS,CAAA,eAAA,CAAA,GAAA,CAAA;MAE/C,YAEkB,MAAA,mBAAA,GAAA;OADhB,OAAM;OACN,QAAO;;;;;;;;;;uBAGb,mBAKM,OALN,YAKM,CAFJ,mBAA6D,QAA7D,YAA6D,gBAApC,MAAA,SAAA,CAAS,CAAA,cAAA,CAAA,IAAmB,KAAC,CAAA,GACtD,mBAAwE,QAAxE,YAAwE,gBAAvC,8BAAA,KAA6B,GAAA,CAAA,CAAA,CAAA"}

package/dist/blocks/scalar-server-selector-block/components/ServerSelector.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServerSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-server-selector-block/components/ServerSelector.vue"],"names":[],"mappings":"AAsGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAQhG,KAAK,aAAa,GAAG;IACnB,+CAA+C;IAC/C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,2BAA2B;IAC3B,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,wBAAwB;IACxB,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB,CAAA;AAED;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,sSAqJd,CAAC"}
+{"version":3,"file":"ServerSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-server-selector-block/components/ServerSelector.vue"],"names":[],"mappings":"AAsGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAQhG,KAAK,aAAa,GAAG;IACnB,+CAA+C;IAC/C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,2BAA2B;IAC3B,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,wBAAwB;IACxB,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB,CAAA;AAED;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,sSAuJd,CAAC"}