@scalar/api-reference 1.59.2 → 1.60.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @scalar/api-reference
 
+## 1.60.0
+
+### Minor Changes
+
+- [#9478](https://github.com/scalar/scalar/pull/9478): Add `content.start` plugin view slot and `sidebar` visibility option for plugin view components.
+  - **`content.start`**: A new view slot that renders custom plugin components **before** the Introduction/Info section (at the top of the content area).
+  - **`sidebar` option on `ViewComponent`**: Plugins can now opt-in to display a sidebar entry for their custom views by providing `sidebar: { show: true, label: 'My Page' }`. Omitting `sidebar` or setting `show: false` hides the entry from the sidebar. The entry hooks into the existing navigation, so clicking it scrolls to the plugin view and it highlights as it scrolls into view.
+
+### Patch Changes
+
+- [#9504](https://github.com/scalar/scalar/pull/9504): Fix extra nesting and duplicated description when array items are wrapped in a single-item composition (`allOf`, `oneOf`, or `anyOf`)
+- [#9526](https://github.com/scalar/scalar/pull/9526): Fix anchor links to schema properties that are hidden inside collapsed sections. Deep links now expand the disclosures on the path to the target property and scroll to it, so links work without enabling `expandAllSchemaProperties`.
+- [#9484](https://github.com/scalar/scalar/pull/9484): Fix the schema description being hidden for responses when `expandAllResponses` is enabled. A response's own description and its content schema's description are now both shown.
+- [#9531](https://github.com/scalar/scalar/pull/9531): fix: the introduction loading skeleton now mirrors the actual layout (badges, title, links, description and selector cards) instead of generic stacked bars, so the page no longer jumps once the document loads
+- [#9524](https://github.com/scalar/scalar/pull/9524): Fix sidebar overlapping the content at exactly 1000px wide. The layout grid switched to the mobile (stacked) layout at `max-width: 1000px` while the sidebar visibility is driven by Tailwind's `lg:` variant (`min-width: 1000px`), so both fired at 1000px. The mobile breakpoint now uses `width < 1000px`, the exact complement of `lg:`, so 1000px is treated as desktop.
+
+## 1.59.3
+
+### Patch Changes
+
+- [#9396](https://github.com/scalar/scalar/pull/9396): Refactor URL redirects into a routing-agnostic, list-driven engine. Redirects now operate on the bare navigation id, so each rule works across hash, hash-base-path, and path routing automatically. Also redirect old `models/<name>` bookmarks to the configured models section slug when the section label is customized (e.g. `schemas/`).
+- [#9489](https://github.com/scalar/scalar/pull/9489): Do not render the info link list when no links are available.
+- [#9342](https://github.com/scalar/scalar/pull/9342): fix: resolve operations when OpenAPI path items use `$ref`
+
+  Path entries and webhooks can reference `components.pathItems` instead of inlining operations. Navigation, mutators, search, and markdown export now resolve path-item references before reading HTTP methods and path-level parameters.
+
+- [#9498](https://github.com/scalar/scalar/pull/9498): Sync the SDK installation tabs with the operation code examples: picking a language under "Client Libraries" now switches every operation's code sample to that language's custom example
+
 ## 1.59.2
 
 ### Patch Changes

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

@@ -1 +1 @@
-{"version":3,"file":"InfoLinks.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/InfoLinks.vue"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAEpE,OAAO,KAAK,EACV,2BAA2B,EAC3B,UAAU,EACX,MAAM,8DAA8D,CAAA;AAMrE,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,UAAU,GAAG,kBAAkB,CAAA;IACrC,YAAY,CAAC,EAAE,2BAA2B,CAAA;CAC3C,CAAC;AAwFF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"InfoLinks.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/InfoLinks.vue"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAEpE,OAAO,KAAK,EACV,2BAA2B,EAC3B,UAAU,EACX,MAAM,8DAA8D,CAAA;AAOrE,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,UAAU,GAAG,kBAAkB,CAAA;IACrC,YAAY,CAAC,EAAE,2BAA2B,CAAA;CAC3C,CAAC;AAmGF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +1 @@
-{"version":3,"file":"InfoLinks.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/InfoLinks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport { LinkList } from '@/components/LinkList'\nimport { ExternalDocs } from '@/features/external-docs'\nimport { Contact, License, TermsOfService } from '@/features/info-object'\n\ndefineProps<{\n  info: InfoObject | AsyncApiInfoObject\n  externalDocs?: ExternalDocumentationObject\n}>()\n</script>\n\n<template>\n  <LinkList>\n    <ExternalDocs :value=\"externalDocs\" />\n    <Contact\n      v-if=\"info.contact\"\n      :value=\"info.contact\" />\n    <License\n      v-if=\"info.license\"\n      :value=\"getResolvedRef(info.license)\" />\n    <TermsOfService\n      v-if=\"info.termsOfService\"\n      :value=\"info.termsOfService\" />\n  </LinkList>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InfoLinks.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/InfoLinks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport { LinkList } from '@/components/LinkList'\nimport { ExternalDocs } from '@/features/external-docs'\nimport { Contact, License, TermsOfService } from '@/features/info-object'\n\nconst { info, externalDocs } = defineProps<{\n  info: InfoObject | AsyncApiInfoObject\n  externalDocs?: ExternalDocumentationObject\n}>()\n\n/** Whether there is at least one link to show, so we do not render an empty list */\nconst hasLinks = computed(() =>\n  Boolean(externalDocs || info.contact || info.license || info.termsOfService),\n)\n</script>\n\n<template>\n  <LinkList v-if=\"hasLinks\">\n    <ExternalDocs\n      v-if=\"externalDocs\"\n      :value=\"externalDocs\" />\n    <Contact\n      v-if=\"info.contact\"\n      :value=\"info.contact\" />\n    <License\n      v-if=\"info.license\"\n      :value=\"getResolvedRef(info.license)\" />\n    <TermsOfService\n      v-if=\"info.termsOfService\"\n      :value=\"info.termsOfService\" />\n  </LinkList>\n</template>\n"],"mappings":""}

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

@@ -3,7 +3,7 @@ import ExternalDocs_default from "../../../features/external-docs/ExternalDocs.v
 import Contact_default from "../../../features/info-object/Contact.vue.js";
 import License_default from "../../../features/info-object/License.vue.js";
 import TermsOfService_default from "../../../features/info-object/TermsOfService.vue.js";
-import { createBlock, createCommentVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, defineComponent, openBlock, unref, withCtx } from "vue";
 import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
 //#region src/blocks/scalar-info-block/components/InfoLinks.vue?vue&type=script&setup=true&lang.ts
 var InfoLinks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -13,25 +13,30 @@ var InfoLinks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		externalDocs: {}
 	},
 	setup(__props) {
+		/** Whether there is at least one link to show, so we do not render an empty list */
+		const hasLinks = computed(() => Boolean(__props.externalDocs || __props.info.contact || __props.info.license || __props.info.termsOfService));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(LinkList_default), null, {
+			return hasLinks.value ? (openBlock(), createBlock(unref(LinkList_default), { key: 0 }, {
 				default: withCtx(() => [
-					createVNode(unref(ExternalDocs_default), { value: __props.externalDocs }, null, 8, ["value"]),
-					__props.info.contact ? (openBlock(), createBlock(unref(Contact_default), {
+					__props.externalDocs ? (openBlock(), createBlock(unref(ExternalDocs_default), {
 						key: 0,
+						value: __props.externalDocs
+					}, null, 8, ["value"])) : createCommentVNode("", true),
+					__props.info.contact ? (openBlock(), createBlock(unref(Contact_default), {
+						key: 1,
 						value: __props.info.contact
 					}, null, 8, ["value"])) : createCommentVNode("", true),
 					__props.info.license ? (openBlock(), createBlock(unref(License_default), {
-						key: 1,
+						key: 2,
 						value: unref(getResolvedRef)(__props.info.license)
 					}, null, 8, ["value"])) : createCommentVNode("", true),
 					__props.info.termsOfService ? (openBlock(), createBlock(unref(TermsOfService_default), {
-						key: 2,
+						key: 3,
 						value: __props.info.termsOfService
 					}, null, 8, ["value"])) : createCommentVNode("", true)
 				]),
 				_: 1
-			});
+			})) : createCommentVNode("", true);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"InfoLinks.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/InfoLinks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport { LinkList } from '@/components/LinkList'\nimport { ExternalDocs } from '@/features/external-docs'\nimport { Contact, License, TermsOfService } from '@/features/info-object'\n\ndefineProps<{\n  info: InfoObject | AsyncApiInfoObject\n  externalDocs?: ExternalDocumentationObject\n}>()\n</script>\n\n<template>\n  <LinkList>\n    <ExternalDocs :value=\"externalDocs\" />\n    <Contact\n      v-if=\"info.contact\"\n      :value=\"info.contact\" />\n    <License\n      v-if=\"info.license\"\n      :value=\"getResolvedRef(info.license)\" />\n    <TermsOfService\n      v-if=\"info.termsOfService\"\n      :value=\"info.termsOfService\" />\n  </LinkList>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;uBAmBE,YAWW,MAAA,iBAAA,EAAA,MAAA;2BAV6B;KAAtC,YAAsC,MAAA,qBAAA,EAAA,EAAvB,OAAO,QAAA,cAAY,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA;KAE1B,QAAA,KAAK,WAAA,WAAA,EADb,YAE0B,MAAA,gBAAA,EAAA;;MAAvB,OAAO,QAAA,KAAK;;KAEP,QAAA,KAAK,WAAA,WAAA,EADb,YAE0C,MAAA,gBAAA,EAAA;;MAAvC,OAAO,MAAA,eAAc,CAAC,QAAA,KAAK,QAAO;;KAE7B,QAAA,KAAK,kBAAA,WAAA,EADb,YAEiC,MAAA,uBAAA,EAAA;;MAA9B,OAAO,QAAA,KAAK"}
+{"version":3,"file":"InfoLinks.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/InfoLinks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport { LinkList } from '@/components/LinkList'\nimport { ExternalDocs } from '@/features/external-docs'\nimport { Contact, License, TermsOfService } from '@/features/info-object'\n\nconst { info, externalDocs } = defineProps<{\n  info: InfoObject | AsyncApiInfoObject\n  externalDocs?: ExternalDocumentationObject\n}>()\n\n/** Whether there is at least one link to show, so we do not render an empty list */\nconst hasLinks = computed(() =>\n  Boolean(externalDocs || info.contact || info.license || info.termsOfService),\n)\n</script>\n\n<template>\n  <LinkList v-if=\"hasLinks\">\n    <ExternalDocs\n      v-if=\"externalDocs\"\n      :value=\"externalDocs\" />\n    <Contact\n      v-if=\"info.contact\"\n      :value=\"info.contact\" />\n    <License\n      v-if=\"info.license\"\n      :value=\"getResolvedRef(info.license)\" />\n    <TermsOfService\n      v-if=\"info.termsOfService\"\n      :value=\"info.termsOfService\" />\n  </LinkList>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAmBA,MAAM,WAAW,eACf,QAAQ,QAAA,gBAAgB,QAAA,KAAK,WAAW,QAAA,KAAK,WAAW,QAAA,KAAK,eAAe,CAC9E;;UAIkB,SAAA,SAAA,WAAA,EAAhB,YAaW,MAAA,iBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;2BAViB;KADlB,QAAA,gBAAA,WAAA,EADR,YAE0B,MAAA,qBAAA,EAAA;;MAAvB,OAAO,QAAA;;KAEF,QAAA,KAAK,WAAA,WAAA,EADb,YAE0B,MAAA,gBAAA,EAAA;;MAAvB,OAAO,QAAA,KAAK;;KAEP,QAAA,KAAK,WAAA,WAAA,EADb,YAE0C,MAAA,gBAAA,EAAA;;MAAvC,OAAO,MAAA,eAAc,CAAC,QAAA,KAAK,QAAO;;KAE7B,QAAA,KAAK,kBAAA,WAAA,EADb,YAEiC,MAAA,uBAAA,EAAA;;MAA9B,OAAO,QAAA,KAAK"}

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

@@ -13,13 +13,13 @@ type __VLS_Props = {
     headingSlugGenerator: (heading: Heading) => string;
     eventBus: WorkspaceEventBus | null;
 };
-declare var __VLS_62: {}, __VLS_75: {}, __VLS_87: {};
+declare var __VLS_67: {}, __VLS_80: {}, __VLS_92: {};
 type __VLS_Slots = {} & {
-    'download-link'?: (props: typeof __VLS_62) => any;
+    'download-link'?: (props: typeof __VLS_67) => any;
 } & {
-    aside?: (props: typeof __VLS_75) => any;
+    aside?: (props: typeof __VLS_80) => any;
 } & {
-    after?: (props: typeof __VLS_87) => any;
+    after?: (props: typeof __VLS_92) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1 +1 @@
-{"version":3,"file":"IntroductionLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLayout.vue"],"names":[],"mappings":"AAuGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EACV,2BAA2B,EAC3B,UAAU,EACX,MAAM,8DAA8D,CAAA;AAkBrE,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAA;IACtB,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IACrC,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAA;IACxC,IAAI,EAAE,UAAU,GAAG,kBAAkB,GAAG,SAAS,CAAA;IACjD,YAAY,CAAC,EAAE,2BAA2B,CAAA;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAA;IAClD,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;CACnC,CAAC;AAgPF,QAAA,IAAI,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACpE,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GACrD;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAK9C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"IntroductionLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLayout.vue"],"names":[],"mappings":"AA0GA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EACV,2BAA2B,EAC3B,UAAU,EACX,MAAM,8DAA8D,CAAA;AAmBrE,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAA;IACtB,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IACrC,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAA;IACxC,IAAI,EAAE,UAAU,GAAG,kBAAkB,GAAG,SAAS,CAAA;IACjD,YAAY,CAAC,EAAE,2BAA2B,CAAA;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAA;IAClD,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;CACnC,CAAC;AAoPF,QAAA,IAAI,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACpE,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GACrD;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAK9C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import IntroductionLayout_vue_vue_type_script_setup_true_lang_default from "./IntroductionLayout.vue.script.js";
 /* empty css                                 */
 //#region src/blocks/scalar-info-block/components/IntroductionLayout.vue
-var IntroductionLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(IntroductionLayout_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bd137508"]]);
+var IntroductionLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(IntroductionLayout_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4e3a9e30"]]);
 //#endregion
 export { IntroductionLayout_default as default };
 

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 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 :loading=\"!info\">\n        <div class=\"flex gap-1.5\">\n          <InfoVersion\n            v-if=\"info\"\n            :version=\"info?.version\" />\n          <SpecificationVersion\n            :documentType\n            :version=\"specificationVersion\" />\n        </div>\n        <SectionHeader\n          :loading=\"!info?.title\"\n          tight>\n          <SectionHeaderTag :level=\"1\">\n            {{ info?.title }}\n          </SectionHeaderTag>\n          <template #links>\n            <InfoLinks\n              v-if=\"info\"\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      </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 { 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":""}

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

@@ -9,8 +9,9 @@ import SpecificationExtension_default from "../../../features/specification-exte
 import InfoDescription_default from "./InfoDescription.vue.js";
 import InfoLinks_default from "./InfoLinks.vue.js";
 import InfoVersion_default from "./InfoVersion.vue.js";
+import IntroductionLoading_default from "./IntroductionLoading.vue.js";
 import SpecificationVersion_default from "./SpecificationVersion.vue.js";
-import { createBlock, createCommentVNode, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 //#region src/blocks/scalar-info-block/components/IntroductionLayout.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex gap-1.5" };
 var _hoisted_2 = { class: "sticky-cards" };
@@ -36,30 +37,26 @@ var IntroductionLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 					class: "introduction-section z-1 gap-12",
 					onIntersecting: _cache[0] || (_cache[0] = () => __props.id && __props.eventBus?.emit("intersecting:nav-item", { id: __props.id }))
 				}, {
-					default: withCtx(() => [createVNode(unref(SectionContent_default), { loading: !__props.info }, {
-						default: withCtx(() => [
-							createElementVNode("div", _hoisted_1, [__props.info ? (openBlock(), createBlock(InfoVersion_default, {
-								key: 0,
-								version: __props.info?.version
-							}, null, 8, ["version"])) : createCommentVNode("", true), createVNode(SpecificationVersion_default, {
+					default: withCtx(() => [createVNode(unref(SectionContent_default), null, {
+						default: withCtx(() => [!__props.info ? (openBlock(), createBlock(IntroductionLoading_default, {
+							key: 0,
+							hasAside: Boolean(_ctx.$slots.aside)
+						}, null, 8, ["hasAside"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+							createElementVNode("div", _hoisted_1, [createVNode(InfoVersion_default, { version: __props.info?.version }, null, 8, ["version"]), createVNode(SpecificationVersion_default, {
 								documentType: __props.documentType,
 								version: __props.specificationVersion
 							}, null, 8, ["documentType", "version"])]),
-							createVNode(unref(SectionHeader_default), {
-								loading: !__props.info?.title,
-								tight: ""
-							}, {
-								links: withCtx(() => [__props.info ? (openBlock(), createBlock(InfoLinks_default, {
-									key: 0,
+							createVNode(unref(SectionHeader_default), { tight: "" }, {
+								links: withCtx(() => [createVNode(InfoLinks_default, {
 									externalDocs: __props.externalDocs,
 									info: __props.info
-								}, null, 8, ["externalDocs", "info"])) : createCommentVNode("", true)]),
+								}, null, 8, ["externalDocs", "info"])]),
 								default: withCtx(() => [createVNode(unref(SectionHeaderTag_default), { level: 1 }, {
 									default: withCtx(() => [createTextVNode(toDisplayString(__props.info?.title), 1)]),
 									_: 1
 								})]),
 								_: 1
-							}, 8, ["loading"]),
+							}),
 							createVNode(unref(SectionColumns_default), null, {
 								default: withCtx(() => [createVNode(unref(SectionColumn_default), null, {
 									default: withCtx(() => [renderSlot(_ctx.$slots, "download-link", {}, void 0, true), createVNode(InfoDescription_default, {
@@ -80,9 +77,9 @@ var IntroductionLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 							}),
 							createVNode(unref(SpecificationExtension_default), { value: __props.documentExtensions }, null, 8, ["value"]),
 							createVNode(unref(SpecificationExtension_default), { value: __props.infoExtensions }, null, 8, ["value"])
-						]),
+						], 64))]),
 						_: 3
-					}, 8, ["loading"]), renderSlot(_ctx.$slots, "after", {}, void 0, true)]),
+					}), renderSlot(_ctx.$slots, "after", {}, void 0, true)]),
 					_: 3
 				}, 8, ["id"])]),
 				_: 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 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 :loading=\"!info\">\n        <div class=\"flex gap-1.5\">\n          <InfoVersion\n            v-if=\"info\"\n            :version=\"info?.version\" />\n          <SpecificationVersion\n            :documentType\n            :version=\"specificationVersion\" />\n        </div>\n        <SectionHeader\n          :loading=\"!info?.title\"\n          tight>\n          <SectionHeaderTag :level=\"1\">\n            {{ info?.title }}\n          </SectionHeaderTag>\n          <template #links>\n            <InfoLinks\n              v-if=\"info\"\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      </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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuCE,YAkDmB,MAAA,yBAAA,EAAA,MAAA;2BADP,CA/CV,YA+CU,MAAA,gBAAA,EAAA;KA9CP,IAAI,QAAA;KACL,cAAW;KACX,OAAM;KACL,gBAAY,OAAA,OAAA,OAAA,WAAiB,QAAA,MAAM,QAAA,UAAU,KAAI,yBAAA,EAAA,IAA4B,QAAA,IAAE,CAAA;;4BAyC/D,CAtCjB,YAsCiB,MAAA,uBAAA,EAAA,EAtCA,SAAO,CAAG,QAAA,MAAA,EAAA;6BAQnB;OAPN,mBAOM,OAPN,YAOM,CALI,QAAA,QAAA,WAAA,EADR,YAE6B,qBAAA;;QAA1B,SAAS,QAAA,MAAM;iEAClB,YAEoC,8BAAA;QADjC,cAAA,QAAA;QACA,SAAS,QAAA;;OAEd,YAYgB,MAAA,sBAAA,EAAA;QAXb,SAAO,CAAG,QAAA,MAAM;QACjB,OAAA;;QAIW,OAAK,cAIG,CAFT,QAAA,QAAA,WAAA,EADR,YAGiB,mBAAA;;SADd,cAAc,QAAA;SACd,MAAM,QAAA;;+BALQ,CAFnB,YAEmB,MAAA,yBAAA,EAAA,EAFA,OAAO,GAAC,EAAA;gCACR,CAAA,gBAAA,gBAAd,QAAA,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;OASlB,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;;;yBAEhD,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 { 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"}

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

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    /**
+     * Whether the selector cards live in a sticky aside column (modern layout)
+     * or in a row below the description (classic layout). Mirrors the
+     * `$slots.aside` check in the loaded layout.
+     */
+    hasAside?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=IntroductionLoading.vue.d.ts.map

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

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

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

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

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

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

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

@@ -0,0 +1,63 @@
+import SectionColumn_default from "../../../components/Section/SectionColumn.vue.js";
+import SectionColumns_default from "../../../components/Section/SectionColumns.vue.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
+//#region src/blocks/scalar-info-block/components/IntroductionLoading.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "introduction-loading flex flex-col gap-5",
+	"aria-hidden": "true"
+};
+var _hoisted_2 = {
+	key: 0,
+	class: "flex flex-col gap-3 sm:flex-row sm:gap-6"
+};
+var IntroductionLoading_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "IntroductionLoading",
+	props: { hasAside: {
+		type: Boolean,
+		default: true
+	} },
+	setup(__props) {
+		/**
+		* Loading skeleton for the introduction block. It mirrors the real layout
+		* (badges, title, links, description and selector cards) so the page does not
+		* jump once the document has loaded.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				_cache[3] || (_cache[3] = createStaticVNode("<div class=\"flex gap-1.5\" data-v-1bd6e256><div class=\"introduction-skeleton h-6 w-14 rounded-full\" data-v-1bd6e256></div><div class=\"introduction-skeleton h-6 w-24 rounded-full\" data-v-1bd6e256></div></div><div class=\"grid grid-cols-1 gap-3 xl:grid-cols-2 xl:gap-12\" data-v-1bd6e256><div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" data-v-1bd6e256></div><div class=\"flex flex-wrap items-center gap-2 xl:justify-end\" data-v-1bd6e256><div class=\"introduction-skeleton h-5 w-28 rounded\" data-v-1bd6e256></div><div class=\"introduction-skeleton h-5 w-28 rounded\" data-v-1bd6e256></div><div class=\"introduction-skeleton h-5 w-12 rounded\" data-v-1bd6e256></div></div></div>", 2)),
+				createVNode(unref(SectionColumns_default), null, {
+					default: withCtx(() => [createVNode(unref(SectionColumn_default), null, {
+						default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "flex flex-col gap-3" }, [
+							createElementVNode("div", { class: "introduction-skeleton mb-2 h-5 w-56 rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton h-4 w-full rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton h-4 w-11/12 rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton h-4 w-4/5 rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton mt-4 h-6 w-40 rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton h-4 w-3/4 rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton h-4 w-2/3 rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton h-4 w-1/2 rounded" })
+						], -1)])]),
+						_: 1
+					}), __props.hasAside ? (openBlock(), createBlock(unref(SectionColumn_default), { key: 0 }, {
+						default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("div", { class: "sticky-cards gap-3" }, [
+							createElementVNode("div", { class: "introduction-skeleton h-20 w-full rounded-lg" }),
+							createElementVNode("div", { class: "introduction-skeleton h-28 w-full rounded-lg" }),
+							createElementVNode("div", { class: "introduction-skeleton h-28 w-full rounded-lg" })
+						], -1)])]),
+						_: 1
+					})) : createCommentVNode("", true)]),
+					_: 1
+				}),
+				!__props.hasAside ? (openBlock(), createElementBlock("div", _hoisted_2, [..._cache[2] || (_cache[2] = [
+					createElementVNode("div", { class: "introduction-skeleton h-28 w-full flex-1 rounded-lg" }, null, -1),
+					createElementVNode("div", { class: "introduction-skeleton h-28 w-full flex-1 rounded-lg" }, null, -1),
+					createElementVNode("div", { class: "introduction-skeleton h-28 w-full flex-1 rounded-lg" }, null, -1)
+				])])) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { IntroductionLoading_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=IntroductionLoading.vue.script.js.map

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

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

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

@@ -1,7 +1,20 @@
+import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
 import type { XScalarSdkInstallation } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-sdk-installation';
 type __VLS_Props = {
     /** Custom SDK installation instructions from `x-scalar-sdk-installation` */
     xScalarSdkInstallation?: XScalarSdkInstallation['x-scalar-sdk-installation'];
+    /**
+     * The globally selected client id. When it matches one of the SDK languages
+     * (as a `custom/<lang>` id) the matching tab is shown as active, keeping the
+     * tabs in sync with the operation code samples.
+     */
+    selectedClient?: string;
+    /**
+     * Event bus used to broadcast the selected client. Picking a language here
+     * switches the operation code samples to that language's custom example, the
+     * same channel the generic client selector uses.
+     */
+    eventBus?: WorkspaceEventBus;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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":"AA0cA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+EAA+E,CAAA;AAe3H,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,sBAAsB,CAAC,EAAE,sBAAsB,CAAC,2BAA2B,CAAC,CAAA;CAC7E,CAAC;AA+cF,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":"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"}

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-9931144b"]]);
+var SdkInstallationInstructions_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4bb21500"]]);
 //#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 {\n  ScalarCombobox,\n  type ScalarComboboxOption,\n} from '@scalar/components/combobox'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\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 } = defineProps<{\n  /** Custom SDK installation instructions from `x-scalar-sdk-installation` */\n  xScalarSdkInstallation?: XScalarSdkInstallation['x-scalar-sdk-installation']\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// Keep the selection in range and re-measure whenever the set of SDKs changes.\n// Keying on the languages (not just the count) also catches documents that swap\n// in a different set of the same size, which would otherwise leave the cached\n// tab widths — and the \"More\" overflow logic — stale.\nwatch(\n  () => sdks.value.map((sdk) => sdk.lang).join('\\n'),\n  () => {\n    if (selectedIndex.value > sdks.value.length - 1) {\n      selectedIndex.value = 0\n    }\n    void nextTick(measure)\n  },\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    selectedIndex.value = 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  selectedIndex.value = 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=\"selectedIndex = 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/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":""}