@scalar/api-reference 1.60.0 → 1.62.0

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

@@ -1 +1 @@
-{"version":3,"file":"IntroductionLayout.vue.js","names":[],"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 { 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</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=\"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":""}
+{"version":3,"file":"IntroductionLayout.vue.js","names":[],"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":""}

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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../../features/localization/use-localization.js";
 import Section_default from "../../../components/Section/Section.vue.js";
 import SectionColumn_default from "../../../components/Section/SectionColumn.vue.js";
 import SectionColumns_default from "../../../components/Section/SectionColumns.vue.js";
@@ -29,11 +30,12 @@ var IntroductionLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		eventBus: {}
 	},
 	setup(__props) {
+		const { translate } = useLocalization();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(SectionContainer_default), null, {
 				default: withCtx(() => [createVNode(unref(Section_default), {
 					id: __props.id,
-					"aria-label": "Introduction",
+					"aria-label": unref(translate)("navigation.introduction"),
 					class: "introduction-section z-1 gap-12",
 					onIntersecting: _cache[0] || (_cache[0] = () => __props.id && __props.eventBus?.emit("intersecting:nav-item", { id: __props.id }))
 				}, {
@@ -81,7 +83,7 @@ var IntroductionLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 						_: 3
 					}), renderSlot(_ctx.$slots, "after", {}, void 0, true)]),
 					_: 3
-				}, 8, ["id"])]),
+				}, 8, ["id", "aria-label"])]),
 				_: 3
 			});
 		};

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 { 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</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=\"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAwCE,YAoDmB,MAAA,yBAAA,EAAA,MAAA;2BADP,CAjDV,YAiDU,MAAA,gBAAA,EAAA;KAhDP,IAAI,QAAA;KACL,cAAW;KACX,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,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"}

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":"AA8fA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+EAA+E,CAAA;AAe3H,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;AAqfF,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":"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"}

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-4bb21500"]]);
+var SdkInstallationInstructions_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9cbb007b"]]);
 //#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/api-client/blocks/operation-code-sample'\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 { 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`\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      Client Libraries\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\">More</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\">More</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\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":""}

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

@@ -1,8 +1,9 @@
+import { useLocalization } from "../../../features/localization/use-localization.js";
 import { getLanguageIcon } from "../helpers/language-icon.js";
 import { getRenderableSdks } from "../helpers/renderable-sdks.js";
 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/api-client/blocks/operation-code-sample";
+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";
@@ -19,13 +20,15 @@ var _hoisted_5 = [
 	"onKeydown"
 ];
 var _hoisted_6 = { class: "client-libraries-text" };
-var _hoisted_7 = {
+var _hoisted_7 = { class: "client-libraries-text" };
+var _hoisted_8 = {
 	"aria-hidden": "true",
 	class: "client-libraries-measure-clip"
 };
-var _hoisted_8 = { class: "client-libraries-text" };
-var _hoisted_9 = { class: "client-libraries" };
-var _hoisted_10 = ["aria-labelledby"];
+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({
 	__name: "SdkInstallationInstructions",
 	props: {
@@ -38,6 +41,7 @@ var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /*
 		/** Base id used to associate each tab with the shared panel for assistive tech */
 		const baseId = useId();
 		const panelId = `${baseId}-panel`;
+		const { translate } = useLocalization();
 		/** Only the SDKs that actually have something to show, with their resolved icon */
 		const sdks = computed(() => getRenderableSdks(__props.xScalarSdkInstallation).map((sdk) => ({
 			...sdk,
@@ -174,7 +178,7 @@ var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /*
 				createElementVNode("div", {
 					id: unref(headingId),
 					class: "client-libraries-heading"
-				}, " Client Libraries ", 8, _hoisted_2),
+				}, toDisplayString(unref(translate)("clientLibraries.heading")), 9, _hoisted_2),
 				createElementVNode("div", _hoisted_3, [createElementVNode("div", {
 					ref_key: "tabsRef",
 					ref: tabsRef,
@@ -212,9 +216,9 @@ var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /*
 					}, [createVNode(unref(ScalarIcon), {
 						class: "client-libraries-icon",
 						icon: isMoreActive.value && selected.value?.icon ? selected.value.icon : "Ellipses"
-					}, null, 8, ["icon"]), _cache[0] || (_cache[0] = createElementVNode("span", { class: "client-libraries-text" }, "More", -1))], 2)]),
+					}, 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_7, [createElementVNode("div", {
+				}, 8, ["modelValue", "options"])) : createCommentVNode("", true)], 8, _hoisted_4), createElementVNode("div", _hoisted_8, [createElementVNode("div", {
 					ref_key: "measureRef",
 					ref: measureRef,
 					class: "client-libraries-row client-libraries-row--measure"
@@ -226,11 +230,11 @@ var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /*
 						key: 0,
 						class: "client-libraries-icon",
 						icon: sdk.icon
-					}, null, 8, ["icon"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_8, toDisplayString(sdk.lang), 1)]);
-				}), 128)), createElementVNode("span", _hoisted_9, [createVNode(unref(ScalarIcon), {
+					}, null, 8, ["icon"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_9, toDisplayString(sdk.lang), 1)]);
+				}), 128)), createElementVNode("span", _hoisted_10, [createVNode(unref(ScalarIcon), {
 					class: "client-libraries-icon",
 					icon: "Ellipses"
-				}), _cache[1] || (_cache[1] = createElementVNode("span", { class: "client-libraries-text" }, "More", -1))])], 512)])]),
+				}), createElementVNode("span", _hoisted_11, toDisplayString(unref(translate)("clientLibraries.more")), 1)])], 512)])]),
 				selected.value?.description ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					id: panelId,
@@ -238,7 +242,7 @@ var SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /*
 					class: "selected-client",
 					role: "tabpanel",
 					tabindex: "0"
-				}, [createVNode(unref(ScalarMarkdown), { value: selected.value.description }, null, 8, ["value"])], 8, _hoisted_10)) : createCommentVNode("", true)
+				}, [createVNode(unref(ScalarMarkdown), { value: selected.value.description }, null, 8, ["value"])], 8, _hoisted_12)) : createCommentVNode("", true)
 			])) : createCommentVNode("", true);
 		};
 	}

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/api-client/blocks/operation-code-sample'\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 { 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`\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      Client Libraries\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\">More</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\">More</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\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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"}

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":"AAgFA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAGhG,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;AA+LF,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;AAkMF,QAAA,MAAM,YAAY;;;;;;;;;;;;kFAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Selector.vue.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\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 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\">Server:</span>\n      <span class=\"overflow-x-auto\">{{\n        serverUrlWithoutTrailingSlash || 'Select a server'\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\">Server:</span>\n    <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Selector.vue.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":""}

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

@@ -1,14 +1,17 @@
+import { useLocalization } from "../../../features/localization/use-localization.js";
 import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { ScalarListbox } from "@scalar/components/listbox";
 import { ScalarIconCaretDown } from "@scalar/icons";
 import { ScalarButton } from "@scalar/components/button";
-import { ScalarListbox } from "@scalar/components/listbox";
 //#region src/blocks/scalar-server-selector-block/components/Selector.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "overflow-x-auto" };
-var _hoisted_2 = {
+var _hoisted_1 = { class: "sr-only" };
+var _hoisted_2 = { class: "overflow-x-auto" };
+var _hoisted_3 = {
 	key: 1,
 	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"
 };
-var _hoisted_3 = { class: "overflow-x-auto" };
+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({
 	__name: "Selector",
 	props: {
@@ -19,6 +22,7 @@ var Selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	emits: ["update:modelValue"],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
+		const { translate } = useLocalization();
 		const serverOptions = computed(() => __props.servers.map((server) => ({
 			id: server.url,
 			label: server.url
@@ -48,8 +52,8 @@ var Selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					variant: "ghost"
 				}, {
 					default: withCtx(() => [
-						_cache[1] || (_cache[1] = createElementVNode("span", { class: "sr-only" }, "Server:", -1)),
-						createElementVNode("span", _hoisted_1, toDisplayString(serverUrlWithoutTrailingSlash.value || "Select a server"), 1),
+						createElementVNode("span", _hoisted_1, toDisplayString(unref(translate)("server.label")) + ":", 1),
+						createElementVNode("span", _hoisted_2, toDisplayString(serverUrlWithoutTrailingSlash.value || unref(translate)("server.select")), 1),
 						createVNode(unref(ScalarIconCaretDown), {
 							class: "text-c-2 ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100",
 							weight: "bold"
@@ -62,7 +66,7 @@ var Selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				"modelValue",
 				"options",
 				"target"
-			])) : (openBlock(), createElementBlock("div", _hoisted_2, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Server:", -1)), createElementVNode("span", _hoisted_3, toDisplayString(serverUrlWithoutTrailingSlash.value), 1)]));
+			])) : (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("span", _hoisted_4, toDisplayString(unref(translate)("server.label")) + ":", 1), createElementVNode("span", _hoisted_5, toDisplayString(serverUrlWithoutTrailingSlash.value), 1)]));
 		};
 	}
 });

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\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 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\">Server:</span>\n      <span class=\"overflow-x-auto\">{{\n        serverUrlWithoutTrailingSlash || 'Select a server'\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\">Server:</span>\n    <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,OAAO;EAKb,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;;4BAC4B;gCAApC,mBAAoC,QAAA,EAA9B,OAAM,WAAS,EAAC,WAAO,GAAA;MAC7B,mBAES,QAFT,YAES,gBADP,8BAAA,SAA6B,kBAAA,EAAA,EAAA;MAE/B,YAEkB,MAAA,oBAAA,EAAA;OADhB,OAAM;OACN,QAAO;;;;;;;;;;uBAGb,mBAKM,OALN,YAKM,CAAA,OAAA,OAAA,OAAA,KAFJ,mBAAoC,QAAA,EAA9B,OAAM,WAAS,EAAC,WAAO,GAAA,GAC7B,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,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"}

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":"AAmGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAMhG,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,sSAkJd,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,sSAqJd,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ServerSelector.vue.js","names":[],"sources":["../../../../src/blocks/scalar-server-selector-block/components/ServerSelector.vue"],"sourcesContent":["<script lang=\"ts\">\ntype SelectorProps = {\n  /** The event bus to use for emitting events */\n  eventBus: WorkspaceEventBus\n  /** The selected server  */\n  selectedServer: ServerObject | null\n  /** Available servers */\n  servers: ServerObject[]\n}\n\n/**\n * ServerSelector\n *\n * Core component for rendering a server selector block.\n * Handles server selection and emits a 'server:update:selected' event when the selected server changes.\n *\n * @event server:update:selected - Emitted when the selected server changes\n * @event server:update:variables - Emitted when a server variable changes\n */\nexport default {}\n</script>\n\n<script lang=\"ts\" setup>\nimport { ServerVariablesForm } from '@scalar/api-client/components/Server'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { useId } from 'vue'\n\nimport Selector from './Selector.vue'\n\nconst { eventBus, servers, selectedServer } = defineProps<SelectorProps>()\n\nconst id = useId()\n\n/** Update the selected server */\nconst updateServer = (newServer: string) => {\n  eventBus.emit('server:update:selected', {\n    url: selectedServer?.url === newServer ? '' : newServer,\n    meta: {\n      type: 'document',\n    },\n  })\n}\n\n/** Update the server variable */\nconst updateServerVariable = (key: string, value: string) => {\n  /** Find the index of the selected server */\n  const index = servers.findIndex((s) => s.url === selectedServer?.url)\n  if (index === -1) {\n    return\n  }\n\n  eventBus.emit('server:update:variables', {\n    index,\n    key,\n    value,\n    meta: {\n      type: 'document',\n    },\n  })\n}\n</script>\n\n<template>\n  <label\n    class=\"bg-b-2 flex h-8 items-center rounded-t-xl border-x border-t px-3 py-2.5 font-medium\">\n    Server\n  </label>\n  <div\n    :id=\"id\"\n    class=\"border\"\n    :class=\"{\n      'rounded-b-xl':\n        !selectedServer?.description && !selectedServer?.variables,\n    }\">\n    <Selector\n      v-if=\"servers.length\"\n      :selectedServer\n      :servers=\"servers\"\n      :target=\"id\"\n      @update:modelValue=\"updateServer\" />\n  </div>\n  <ServerVariablesForm\n    layout=\"reference\"\n    :variables=\"selectedServer?.variables\"\n    @update:variable=\"updateServerVariable\" />\n\n  <!-- Description -->\n  <ScalarMarkdown\n    v-if=\"selectedServer?.description\"\n    class=\"text-c-3 rounded-b-xl border-x border-b px-3 py-1.5\"\n    :value=\"selectedServer.description\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"ServerSelector.vue.js","names":[],"sources":["../../../../src/blocks/scalar-server-selector-block/components/ServerSelector.vue"],"sourcesContent":["<script lang=\"ts\">\ntype SelectorProps = {\n  /** The event bus to use for emitting events */\n  eventBus: WorkspaceEventBus\n  /** The selected server  */\n  selectedServer: ServerObject | null\n  /** Available servers */\n  servers: ServerObject[]\n}\n\n/**\n * ServerSelector\n *\n * Core component for rendering a server selector block.\n * Handles server selection and emits a 'server:update:selected' event when the selected server changes.\n *\n * @event server:update:selected - Emitted when the selected server changes\n * @event server:update:variables - Emitted when a server variable changes\n */\nexport default {}\n</script>\n\n<script lang=\"ts\" setup>\nimport { ServerVariablesForm } from '@scalar/api-client/components/Server'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { useId } from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nimport Selector from './Selector.vue'\n\nconst { eventBus, servers, selectedServer } = defineProps<SelectorProps>()\n\nconst id = useId()\nconst { translate } = useLocalization()\n\n/** Update the selected server */\nconst updateServer = (newServer: string) => {\n  eventBus.emit('server:update:selected', {\n    url: selectedServer?.url === newServer ? '' : newServer,\n    meta: {\n      type: 'document',\n    },\n  })\n}\n\n/** Update the server variable */\nconst updateServerVariable = (key: string, value: string) => {\n  /** Find the index of the selected server */\n  const index = servers.findIndex((s) => s.url === selectedServer?.url)\n  if (index === -1) {\n    return\n  }\n\n  eventBus.emit('server:update:variables', {\n    index,\n    key,\n    value,\n    meta: {\n      type: 'document',\n    },\n  })\n}\n</script>\n\n<template>\n  <label\n    class=\"bg-b-2 flex h-8 items-center rounded-t-xl border-x border-t px-3 py-2.5 font-medium\">\n    {{ translate('server.label') }}\n  </label>\n  <div\n    :id=\"id\"\n    class=\"border\"\n    :class=\"{\n      'rounded-b-xl':\n        !selectedServer?.description && !selectedServer?.variables,\n    }\">\n    <Selector\n      v-if=\"servers.length\"\n      :selectedServer\n      :servers=\"servers\"\n      :target=\"id\"\n      @update:modelValue=\"updateServer\" />\n  </div>\n  <ServerVariablesForm\n    layout=\"reference\"\n    :variables=\"selectedServer?.variables\"\n    @update:variable=\"updateServerVariable\" />\n\n  <!-- Description -->\n  <ScalarMarkdown\n    v-if=\"selectedServer?.description\"\n    class=\"text-c-3 rounded-b-xl border-x border-b px-3 py-1.5\"\n    :value=\"selectedServer.description\" />\n</template>\n"],"mappings":""}

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

@@ -1,9 +1,11 @@
+import { useLocalization } from "../../../features/localization/use-localization.js";
 import Selector_default from "./Selector.vue.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, unref, useId } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, useId } from "vue";
 import { ServerVariablesForm } from "@scalar/api-client/components/Server";
 import { ScalarMarkdown } from "@scalar/components/markdown";
 //#region src/blocks/scalar-server-selector-block/components/ServerSelector.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["id"];
+var _hoisted_1 = { class: "bg-b-2 flex h-8 items-center rounded-t-xl border-x border-t px-3 py-2.5 font-medium" };
+var _hoisted_2 = ["id"];
 var ServerSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ServerSelector",
 	props: {
@@ -13,6 +15,7 @@ var ServerSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	},
 	setup(__props) {
 		const id = useId();
+		const { translate } = useLocalization();
 		/** Update the selected server */
 		const updateServer = (newServer) => {
 			__props.eventBus.emit("server:update:selected", {
@@ -34,7 +37,7 @@ var ServerSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
-				_cache[0] || (_cache[0] = createElementVNode("label", { class: "bg-b-2 flex h-8 items-center rounded-t-xl border-x border-t px-3 py-2.5 font-medium" }, " Server ", -1)),
+				createElementVNode("label", _hoisted_1, toDisplayString(unref(translate)("server.label")), 1),
 				createElementVNode("div", {
 					id: unref(id),
 					class: normalizeClass(["border", { "rounded-b-xl": !__props.selectedServer?.description && !__props.selectedServer?.variables }])
@@ -48,7 +51,7 @@ var ServerSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					"selectedServer",
 					"servers",
 					"target"
-				])) : createCommentVNode("", true)], 10, _hoisted_1),
+				])) : createCommentVNode("", true)], 10, _hoisted_2),
 				createVNode(unref(ServerVariablesForm), {
 					layout: "reference",
 					variables: __props.selectedServer?.variables,

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

@@ -1 +1 @@
-{"version":3,"file":"ServerSelector.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-server-selector-block/components/ServerSelector.vue"],"sourcesContent":["<script lang=\"ts\">\ntype SelectorProps = {\n  /** The event bus to use for emitting events */\n  eventBus: WorkspaceEventBus\n  /** The selected server  */\n  selectedServer: ServerObject | null\n  /** Available servers */\n  servers: ServerObject[]\n}\n\n/**\n * ServerSelector\n *\n * Core component for rendering a server selector block.\n * Handles server selection and emits a 'server:update:selected' event when the selected server changes.\n *\n * @event server:update:selected - Emitted when the selected server changes\n * @event server:update:variables - Emitted when a server variable changes\n */\nexport default {}\n</script>\n\n<script lang=\"ts\" setup>\nimport { ServerVariablesForm } from '@scalar/api-client/components/Server'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { useId } from 'vue'\n\nimport Selector from './Selector.vue'\n\nconst { eventBus, servers, selectedServer } = defineProps<SelectorProps>()\n\nconst id = useId()\n\n/** Update the selected server */\nconst updateServer = (newServer: string) => {\n  eventBus.emit('server:update:selected', {\n    url: selectedServer?.url === newServer ? '' : newServer,\n    meta: {\n      type: 'document',\n    },\n  })\n}\n\n/** Update the server variable */\nconst updateServerVariable = (key: string, value: string) => {\n  /** Find the index of the selected server */\n  const index = servers.findIndex((s) => s.url === selectedServer?.url)\n  if (index === -1) {\n    return\n  }\n\n  eventBus.emit('server:update:variables', {\n    index,\n    key,\n    value,\n    meta: {\n      type: 'document',\n    },\n  })\n}\n</script>\n\n<template>\n  <label\n    class=\"bg-b-2 flex h-8 items-center rounded-t-xl border-x border-t px-3 py-2.5 font-medium\">\n    Server\n  </label>\n  <div\n    :id=\"id\"\n    class=\"border\"\n    :class=\"{\n      'rounded-b-xl':\n        !selectedServer?.description && !selectedServer?.variables,\n    }\">\n    <Selector\n      v-if=\"servers.length\"\n      :selectedServer\n      :servers=\"servers\"\n      :target=\"id\"\n      @update:modelValue=\"updateServer\" />\n  </div>\n  <ServerVariablesForm\n    layout=\"reference\"\n    :variables=\"selectedServer?.variables\"\n    @update:variable=\"updateServerVariable\" />\n\n  <!-- Description -->\n  <ScalarMarkdown\n    v-if=\"selectedServer?.description\"\n    class=\"text-c-3 rounded-b-xl border-x border-b px-3 py-1.5\"\n    :value=\"selectedServer.description\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAiCA,MAAM,KAAK,OAAM;;EAGjB,MAAM,gBAAgB,cAAsB;AAC1C,WAAA,SAAS,KAAK,0BAA0B;IACtC,KAAK,QAAA,gBAAgB,QAAQ,YAAY,KAAK;IAC9C,MAAM,EACJ,MAAM,YACP;IACF,CAAA;;;EAIH,MAAM,wBAAwB,KAAa,UAAkB;;GAE3D,MAAM,QAAQ,QAAA,QAAQ,WAAW,MAAM,EAAE,QAAQ,QAAA,gBAAgB,IAAG;AACpE,OAAI,UAAU,GACZ;AAGF,WAAA,SAAS,KAAK,2BAA2B;IACvC;IACA;IACA;IACA,MAAM,EACJ,MAAM,YACP;IACF,CAAA;;;;8BAKD,mBAGQ,SAAA,EAFN,OAAM,uFAAqF,EAAC,YAE9F,GAAA;IACA,mBAaM,OAAA;KAZH,IAAI,MAAA,GAAE;KACP,OAAK,eAAA,CAAC,UAAQ,EAAA,gBAAA,CAC2B,QAAA,gBAAgB,eAAW,CAAK,QAAA,gBAAgB,WAAA,CAAA,CAAA;QAKjF,QAAA,QAAQ,UAAA,WAAA,EADhB,YAKsC,kBAAA;;KAHnC,gBAAA,QAAA;KACA,SAAS,QAAA;KACT,QAAQ,MAAA,GAAE;KACV,uBAAmB;;;;;;IAExB,YAG4C,MAAA,oBAAA,EAAA;KAF1C,QAAO;KACN,WAAW,QAAA,gBAAgB;KAC3B,qBAAiB;;IAIZ,QAAA,gBAAgB,eAAA,WAAA,EADxB,YAGwC,MAAA,eAAA,EAAA;;KADtC,OAAM;KACL,OAAO,QAAA,eAAe"}
+{"version":3,"file":"ServerSelector.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-server-selector-block/components/ServerSelector.vue"],"sourcesContent":["<script lang=\"ts\">\ntype SelectorProps = {\n  /** The event bus to use for emitting events */\n  eventBus: WorkspaceEventBus\n  /** The selected server  */\n  selectedServer: ServerObject | null\n  /** Available servers */\n  servers: ServerObject[]\n}\n\n/**\n * ServerSelector\n *\n * Core component for rendering a server selector block.\n * Handles server selection and emits a 'server:update:selected' event when the selected server changes.\n *\n * @event server:update:selected - Emitted when the selected server changes\n * @event server:update:variables - Emitted when a server variable changes\n */\nexport default {}\n</script>\n\n<script lang=\"ts\" setup>\nimport { ServerVariablesForm } from '@scalar/api-client/components/Server'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { useId } from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nimport Selector from './Selector.vue'\n\nconst { eventBus, servers, selectedServer } = defineProps<SelectorProps>()\n\nconst id = useId()\nconst { translate } = useLocalization()\n\n/** Update the selected server */\nconst updateServer = (newServer: string) => {\n  eventBus.emit('server:update:selected', {\n    url: selectedServer?.url === newServer ? '' : newServer,\n    meta: {\n      type: 'document',\n    },\n  })\n}\n\n/** Update the server variable */\nconst updateServerVariable = (key: string, value: string) => {\n  /** Find the index of the selected server */\n  const index = servers.findIndex((s) => s.url === selectedServer?.url)\n  if (index === -1) {\n    return\n  }\n\n  eventBus.emit('server:update:variables', {\n    index,\n    key,\n    value,\n    meta: {\n      type: 'document',\n    },\n  })\n}\n</script>\n\n<template>\n  <label\n    class=\"bg-b-2 flex h-8 items-center rounded-t-xl border-x border-t px-3 py-2.5 font-medium\">\n    {{ translate('server.label') }}\n  </label>\n  <div\n    :id=\"id\"\n    class=\"border\"\n    :class=\"{\n      'rounded-b-xl':\n        !selectedServer?.description && !selectedServer?.variables,\n    }\">\n    <Selector\n      v-if=\"servers.length\"\n      :selectedServer\n      :servers=\"servers\"\n      :target=\"id\"\n      @update:modelValue=\"updateServer\" />\n  </div>\n  <ServerVariablesForm\n    layout=\"reference\"\n    :variables=\"selectedServer?.variables\"\n    @update:variable=\"updateServerVariable\" />\n\n  <!-- Description -->\n  <ScalarMarkdown\n    v-if=\"selectedServer?.description\"\n    class=\"text-c-3 rounded-b-xl border-x border-b px-3 py-1.5\"\n    :value=\"selectedServer.description\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAmCA,MAAM,KAAK,OAAM;EACjB,MAAM,EAAE,cAAc,iBAAgB;;EAGtC,MAAM,gBAAgB,cAAsB;AAC1C,WAAA,SAAS,KAAK,0BAA0B;IACtC,KAAK,QAAA,gBAAgB,QAAQ,YAAY,KAAK;IAC9C,MAAM,EACJ,MAAM,YACP;IACF,CAAA;;;EAIH,MAAM,wBAAwB,KAAa,UAAkB;;GAE3D,MAAM,QAAQ,QAAA,QAAQ,WAAW,MAAM,EAAE,QAAQ,QAAA,gBAAgB,IAAG;AACpE,OAAI,UAAU,GACZ;AAGF,WAAA,SAAS,KAAK,2BAA2B;IACvC;IACA;IACA;IACA,MAAM,EACJ,MAAM,YACP;IACF,CAAA;;;;IAKD,mBAGQ,SAHR,YAGQ,gBADH,MAAA,UAAS,CAAA,eAAA,CAAA,EAAA,EAAA;IAEd,mBAaM,OAAA;KAZH,IAAI,MAAA,GAAE;KACP,OAAK,eAAA,CAAC,UAAQ,EAAA,gBAAA,CAC2B,QAAA,gBAAgB,eAAW,CAAK,QAAA,gBAAgB,WAAA,CAAA,CAAA;QAKjF,QAAA,QAAQ,UAAA,WAAA,EADhB,YAKsC,kBAAA;;KAHnC,gBAAA,QAAA;KACA,SAAS,QAAA;KACT,QAAQ,MAAA,GAAE;KACV,uBAAmB;;;;;;IAExB,YAG4C,MAAA,oBAAA,EAAA;KAF1C,QAAO;KACN,WAAW,QAAA,gBAAgB;KAC3B,qBAAiB;;IAIZ,QAAA,gBAAgB,eAAA,WAAA,EADxB,YAGwC,MAAA,eAAA,EAAA;;KADtC,OAAM;KACL,OAAO,QAAA,eAAe"}