@scalar/api-reference 1.58.0 → 1.59.0

package/dist/blocks/scalar-client-selector-block/components/ClientSelector.vue.script.js

@@ -1,27 +1,18 @@
 import { getFeaturedClients, isFeaturedClient } from "../helpers/featured-clients.js";
 import ClientDropdown_default from "./ClientDropdown.vue.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, useId, useTemplateRef, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, toDisplayString, unref, useId, useTemplateRef, watch, withCtx } from "vue";
 import { TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/vue";
 import { DEFAULT_CLIENT } from "@scalar/api-client/blocks/operation-code-sample";
-import { ScalarCodeBlock } from "@scalar/components/code-block";
-import { ScalarMarkdown } from "@scalar/components/markdown";
 //#region src/blocks/scalar-client-selector-block/components/ClientSelector.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
 	ref: "wrapper-ref"
 };
 var _hoisted_2 = ["id"];
-var _hoisted_3 = {
-	key: 1,
-	class: "selected-client card-footer border-t-0 p-0",
-	role: "tabpanel",
-	tabindex: "1"
-};
-var _hoisted_4 = ["id"];
+var _hoisted_3 = ["id"];
 var ClientSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ClientSelector",
 	props: {
-		xScalarSdkInstallation: {},
 		clientOptions: {},
 		selectedClient: { default: () => DEFAULT_CLIENT },
 		eventBus: {}
@@ -29,12 +20,30 @@ var ClientSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	setup(__props, { expose: __expose }) {
 		const headingId = useId();
 		const morePanel = useId();
+		/**
+		* Whether a selection is a custom code sample (e.g. `custom/python`) rather than
+		* a built-in client. Custom samples are matched by the `custom/` id prefix, which
+		* mirrors the `^custom/` pattern enforced on the stored default client.
+		*/
+		const isCustomSelection = (client) => Boolean(client?.startsWith("custom/"));
+		/**
+		* The generic client this selector actually displays.
+		*
+		* The introduction selector only represents the built-in HTTP clients. Custom
+		* code samples are operation-specific and "always just have the generic
+		* clients", so when one is selected globally we keep showing the last generic
+		* client here instead of switching to (and failing to render) a custom sample.
+		*/
+		const activeClient = ref(isCustomSelection(__props.selectedClient) ? DEFAULT_CLIENT : __props.selectedClient);
+		watch(() => __props.selectedClient, (newClient) => {
+			if (!isCustomSelection(newClient)) activeClient.value = newClient;
+		});
 		/** Grab the option for the currently selected Http Client */
-		const selectedClientOption = computed(() => __props.clientOptions.flatMap((optionGroup) => optionGroup.options.find((option) => option.id === __props.selectedClient) ?? [])[0]);
+		const selectedClientOption = computed(() => __props.clientOptions.flatMap((optionGroup) => optionGroup.options.find((option) => option.id === activeClient.value) ?? [])[0]);
 		/** List of featured clients */
 		const featuredClients = computed(() => getFeaturedClients(__props.clientOptions));
 		/** Currently selected tab index */
-		const tabIndex = computed(() => featuredClients.value.findIndex((featuredClient) => __props.selectedClient === featuredClient.id));
+		const tabIndex = computed(() => featuredClients.value.findIndex((featuredClient) => activeClient.value === featuredClient.id));
 		const wrapper = useTemplateRef("wrapper-ref");
 		/** Emit the selected client event on tab */
 		const onTabSelect = (i) => {
@@ -42,15 +51,6 @@ var ClientSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			if (!client || !wrapper.value) return;
 			__props.eventBus.emit("workspace:update:selected-client", client.id);
 		};
-		const installationInstructions = computed(() => {
-			if (!Array.isArray(__props.xScalarSdkInstallation) || !__props.xScalarSdkInstallation?.length) return;
-			const instruction = __props.xScalarSdkInstallation.find((instruction) => {
-				const targetKey = __props.selectedClient?.split("/")[0]?.toLowerCase();
-				return instruction.lang.toLowerCase() === targetKey;
-			});
-			if (!instruction) return;
-			return instruction;
-		});
 		__expose({ selectedClientOption });
 		return (_ctx, _cache) => {
 			return __props.clientOptions.length ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(TabGroup), {
@@ -72,7 +72,7 @@ var ClientSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							eventBus: __props.eventBus,
 							featuredClients: featuredClients.value,
 							morePanel: unref(morePanel),
-							selectedClient: __props.selectedClient
+							selectedClient: activeClient.value
 						}, null, 8, [
 							"clientOptions",
 							"eventBus",
@@ -83,17 +83,7 @@ var ClientSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						_: 1
 					}, 8, ["aria-labelledby"]),
 					createVNode(unref(TabPanels), null, {
-						default: withCtx(() => [installationInstructions.value?.source || installationInstructions.value?.description ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [installationInstructions.value.description ? (openBlock(), createElementBlock("div", {
-							key: 0,
-							class: normalizeClass(["selected-client card-footer -outline-offset-2", installationInstructions.value.source && "rounded-b-none"]),
-							role: "tabpanel",
-							tabindex: "0"
-						}, [createVNode(unref(ScalarMarkdown), { value: installationInstructions.value.description }, null, 8, ["value"])], 2)) : createCommentVNode("", true), installationInstructions.value.source ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(ScalarCodeBlock), {
-							class: "rounded-b-lg *:first:p-3",
-							content: installationInstructions.value.source,
-							copy: "always",
-							lang: "shell"
-						}, null, 8, ["content"])])) : createCommentVNode("", true)], 64)) : unref(isFeaturedClient)(__props.selectedClient) ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(featuredClients.value, (client) => {
+						default: withCtx(() => [unref(isFeaturedClient)(activeClient.value) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(featuredClients.value, (client) => {
 							return openBlock(), createBlock(unref(TabPanel), {
 								key: client.id,
 								class: "selected-client card-footer -outline-offset-2"
@@ -102,12 +92,12 @@ var ClientSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 								_: 2
 							}, 1024);
 						}), 128)) : (openBlock(), createElementBlock("div", {
-							key: 2,
+							key: 1,
 							id: unref(morePanel),
 							class: "selected-client card-footer -outline-offset-2",
 							role: "tabpanel",
 							tabindex: "0"
-						}, toDisplayString(selectedClientOption.value?.title), 9, _hoisted_4))]),
+						}, toDisplayString(selectedClientOption.value?.title), 9, _hoisted_3))]),
 						_: 1
 					})
 				]),

package/dist/blocks/scalar-client-selector-block/components/ClientSelector.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClientSelector.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'\nimport {\n  DEFAULT_CLIENT,\n  type ClientOptionGroup,\n} from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { AvailableClient } from '@scalar/snippetz'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { XScalarSdkInstallation } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-sdk-installation'\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport {\n  getFeaturedClients,\n  isFeaturedClient,\n} from '@/blocks/scalar-client-selector-block/helpers/featured-clients'\n\nimport ClientDropdown from './ClientDropdown.vue'\n\nconst {\n  clientOptions,\n  xScalarSdkInstallation,\n  eventBus,\n  selectedClient = DEFAULT_CLIENT,\n} = defineProps<{\n  /** Selected SDK installation instructions */\n  xScalarSdkInstallation?: XScalarSdkInstallation['x-scalar-sdk-installation']\n  /** Computed list of all available Http Client options */\n  clientOptions: ClientOptionGroup[]\n  /** The currently selected Http Client */\n  selectedClient?: AvailableClient\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\nconst morePanel = useId()\n\n/** Grab the option for the currently selected Http Client */\nconst selectedClientOption = computed(\n  () =>\n    clientOptions.flatMap(\n      (optionGroup) =>\n        optionGroup.options.find((option) => option.id === selectedClient) ??\n        [],\n    )[0],\n)\n\n/** List of featured clients */\nconst featuredClients = computed(() => getFeaturedClients(clientOptions))\n\n/** Currently selected tab index */\nconst tabIndex = computed(() =>\n  featuredClients.value.findIndex(\n    (featuredClient) => selectedClient === featuredClient.id,\n  ),\n)\n\nconst wrapper = useTemplateRef('wrapper-ref')\n\n/** Emit the selected client event on tab */\nconst onTabSelect = (i: number) => {\n  const client = featuredClients.value[i]\n\n  if (!client || !wrapper.value) {\n    return\n  }\n\n  eventBus.emit('workspace:update:selected-client', client.id)\n}\n\nconst installationInstructions = computed(() => {\n  // Check whether we have instructions at all\n  if (\n    !Array.isArray(xScalarSdkInstallation) ||\n    !xScalarSdkInstallation?.length\n  ) {\n    return undefined\n  }\n\n  // Find the instructions for the current language\n  const instruction = xScalarSdkInstallation.find((instruction) => {\n    const targetKey = selectedClient?.split('/')[0]?.toLowerCase()\n    return instruction.lang.toLowerCase() === targetKey\n  })\n\n  // Nothing found?\n  if (!instruction) {\n    return undefined\n  }\n\n  // Got it!\n  return instruction\n})\n\ndefineExpose({\n  selectedClientOption,\n})\n</script>\n<template>\n  <div\n    v-if=\"clientOptions.length\"\n    ref=\"wrapper-ref\">\n    <TabGroup\n      manual\n      :selectedIndex=\"tabIndex\"\n      @change=\"onTabSelect\">\n      <div\n        :id=\"headingId\"\n        class=\"client-libraries-heading\">\n        Client Libraries\n      </div>\n\n      <!-- Tabs -->\n      <TabList\n        :aria-labelledby=\"headingId\"\n        class=\"client-libraries-list\">\n        <ClientDropdown\n          :clientOptions\n          :eventBus\n          :featuredClients\n          :morePanel\n          :selectedClient />\n      </TabList>\n\n      <!-- Content -->\n      <TabPanels>\n        <template\n          v-if=\"\n            installationInstructions?.source ||\n            installationInstructions?.description\n          \">\n          <div\n            v-if=\"installationInstructions.description\"\n            class=\"selected-client card-footer -outline-offset-2\"\n            :class=\"installationInstructions.source && 'rounded-b-none'\"\n            role=\"tabpanel\"\n            tabindex=\"0\">\n            <ScalarMarkdown :value=\"installationInstructions.description\" />\n          </div>\n          <div\n            v-if=\"installationInstructions.source\"\n            class=\"selected-client card-footer border-t-0 p-0\"\n            role=\"tabpanel\"\n            tabindex=\"1\">\n            <ScalarCodeBlock\n              class=\"rounded-b-lg *:first:p-3\"\n              :content=\"installationInstructions.source\"\n              copy=\"always\"\n              lang=\"shell\" />\n          </div>\n        </template>\n        <template v-else-if=\"isFeaturedClient(selectedClient)\">\n          <TabPanel\n            v-for=\"client in featuredClients\"\n            :key=\"client.id\"\n            class=\"selected-client card-footer -outline-offset-2\">\n            {{ client.title }}\n          </TabPanel>\n        </template>\n        <div\n          v-else\n          :id=\"morePanel\"\n          class=\"selected-client card-footer -outline-offset-2\"\n          role=\"tabpanel\"\n          tabindex=\"0\">\n          {{ selectedClientOption?.title }}\n        </div>\n      </TabPanels>\n    </TabGroup>\n  </div>\n</template>\n<style scoped>\n.selected-client {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  font-family: var(--scalar-font-code);\n  padding: 9px 12px;\n  border-top: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n  min-height: fit-content;\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:deep(.scalar-codeblock-pre .hljs) {\n  margin-top: 8px;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,YAAY,OAAM;EACxB,MAAM,YAAY,OAAM;;EAGxB,MAAM,uBAAuB,eAEzB,QAAA,cAAc,SACX,gBACC,YAAY,QAAQ,MAAM,WAAW,OAAO,OAAO,QAAA,eAAe,IAClE,EAAE,CACL,CAAC,GACN;;EAGA,MAAM,kBAAkB,eAAe,mBAAmB,QAAA,cAAc,CAAA;;EAGxE,MAAM,WAAW,eACf,gBAAgB,MAAM,WACnB,mBAAmB,QAAA,mBAAmB,eAAe,GACvD,CACH;EAEA,MAAM,UAAU,eAAe,cAAa;;EAG5C,MAAM,eAAe,MAAc;GACjC,MAAM,SAAS,gBAAgB,MAAM;AAErC,OAAI,CAAC,UAAU,CAAC,QAAQ,MACtB;AAGF,WAAA,SAAS,KAAK,oCAAoC,OAAO,GAAE;;EAG7D,MAAM,2BAA2B,eAAe;AAE9C,OACE,CAAC,MAAM,QAAQ,QAAA,uBAAuB,IACtC,CAAC,QAAA,wBAAwB,OAEzB;GAIF,MAAM,cAAc,QAAA,uBAAuB,MAAM,gBAAgB;IAC/D,MAAM,YAAY,QAAA,gBAAgB,MAAM,IAAI,CAAC,IAAI,aAAY;AAC7D,WAAO,YAAY,KAAK,aAAa,KAAK;KAC3C;AAGD,OAAI,CAAC,YACH;AAIF,UAAO;IACR;AAED,WAAa,EACX,sBACD,CAAA;;UAIS,QAAA,cAAc,UAAA,WAAA,EADtB,mBAsEM,OAtEN,YAsEM,CAnEJ,YAkEW,MAAA,SAAA,EAAA;IAjET,QAAA;IACC,eAAe,SAAA;IACf,UAAQ;;2BAKH;KAJN,mBAIM,OAAA;MAHH,IAAI,MAAA,UAAS;MACd,OAAM;QAA2B,sBAEnC,GAAA,WAAA;KAGA,YASU,MAAA,QAAA,EAAA;MARP,mBAAiB,MAAA,UAAS;MAC3B,OAAM;;6BAMc,CALpB,YAKoB,wBAAA;OAJjB,eAAA,QAAA;OACA,UAAA,QAAA;OACA,iBAAA,gBAAA;OACA,WAAA,MAAA,UAAS;OACT,gBAAA,QAAA;;;;;;;;;;KAIL,YA0CY,MAAA,UAAA,EAAA,MAAA;6BAjBC,CAvBU,yBAAA,OAA0B,UAAsB,yBAAA,OAA0B,eAAA,WAAA,EAD/F,mBAwBW,UAAA,EAAA,KAAA,GAAA,EAAA,CAlBD,yBAAA,MAAyB,eAAA,WAAA,EADjC,mBAOM,OAAA;;OALJ,OAAK,eAAA,CAAC,iDACE,yBAAA,MAAyB,UAAM,iBAAA,CAAA;OACvC,MAAK;OACL,UAAS;UACT,YAAgE,MAAA,eAAA,EAAA,EAA/C,OAAO,yBAAA,MAAyB,aAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAG3C,yBAAA,MAAyB,UAAA,WAAA,EADjC,mBAUM,OAVN,YAUM,CALJ,YAIiB,MAAA,gBAAA,EAAA;OAHf,OAAM;OACL,SAAS,yBAAA,MAAyB;OACnC,MAAK;OACL,MAAK;0EAGU,MAAA,iBAAgB,CAAC,QAAA,eAAc,IAAA,UAAA,KAAA,EAClD,mBAKW,UAAA,EAAA,KAAA,GAAA,EAAA,WAJQ,gBAAA,QAAV,WAAM;2BADf,YAKW,MAAA,SAAA,EAAA;QAHR,KAAK,OAAO;QACb,OAAM;;+BACY,CAAA,gBAAA,gBAAf,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA;;;gCAGnB,mBAOM,OAAA;;OALH,IAAI,MAAA,UAAS;OACd,OAAM;OACN,MAAK;OACL,UAAS;yBACN,qBAAA,OAAsB,MAAK,EAAA,GAAA,WAAA,EAAA,CAAA"}
+{"version":3,"file":"ClientSelector.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'\nimport {\n  DEFAULT_CLIENT,\n  type ClientOptionGroup,\n} from '@scalar/api-client/blocks/operation-code-sample'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref, useId, useTemplateRef, watch } from 'vue'\n\nimport {\n  getFeaturedClients,\n  isFeaturedClient,\n} from '@/blocks/scalar-client-selector-block/helpers/featured-clients'\n\nimport ClientDropdown from './ClientDropdown.vue'\n\nconst {\n  clientOptions,\n  eventBus,\n  selectedClient = DEFAULT_CLIENT,\n} = defineProps<{\n  /** Computed list of all available Http Client options */\n  clientOptions: ClientOptionGroup[]\n  /** The currently selected Http Client (a built-in client id or a custom sample id) */\n  selectedClient?: string\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\nconst morePanel = useId()\n\n/**\n * Whether a selection is a custom code sample (e.g. `custom/python`) rather than\n * a built-in client. Custom samples are matched by the `custom/` id prefix, which\n * mirrors the `^custom/` pattern enforced on the stored default client.\n */\nconst isCustomSelection = (client: string | undefined) =>\n  Boolean(client?.startsWith('custom/'))\n\n/**\n * The generic client this selector actually displays.\n *\n * The introduction selector only represents the built-in HTTP clients. Custom\n * code samples are operation-specific and \"always just have the generic\n * clients\", so when one is selected globally we keep showing the last generic\n * client here instead of switching to (and failing to render) a custom sample.\n */\nconst activeClient = ref(\n  isCustomSelection(selectedClient) ? DEFAULT_CLIENT : selectedClient,\n)\n\nwatch(\n  () => selectedClient,\n  (newClient) => {\n    if (!isCustomSelection(newClient)) {\n      activeClient.value = newClient\n    }\n  },\n)\n\n/** Grab the option for the currently selected Http Client */\nconst selectedClientOption = computed(\n  () =>\n    clientOptions.flatMap(\n      (optionGroup) =>\n        optionGroup.options.find(\n          (option) => option.id === activeClient.value,\n        ) ?? [],\n    )[0],\n)\n\n/** List of featured clients */\nconst featuredClients = computed(() => getFeaturedClients(clientOptions))\n\n/** Currently selected tab index */\nconst tabIndex = computed(() =>\n  featuredClients.value.findIndex(\n    (featuredClient) => activeClient.value === featuredClient.id,\n  ),\n)\n\nconst wrapper = useTemplateRef('wrapper-ref')\n\n/** Emit the selected client event on tab */\nconst onTabSelect = (i: number) => {\n  const client = featuredClients.value[i]\n\n  if (!client || !wrapper.value) {\n    return\n  }\n\n  eventBus.emit('workspace:update:selected-client', client.id)\n}\n\ndefineExpose({\n  selectedClientOption,\n})\n</script>\n<template>\n  <div\n    v-if=\"clientOptions.length\"\n    ref=\"wrapper-ref\">\n    <TabGroup\n      manual\n      :selectedIndex=\"tabIndex\"\n      @change=\"onTabSelect\">\n      <div\n        :id=\"headingId\"\n        class=\"client-libraries-heading\">\n        Client Libraries\n      </div>\n\n      <!-- Tabs -->\n      <TabList\n        :aria-labelledby=\"headingId\"\n        class=\"client-libraries-list\">\n        <ClientDropdown\n          :clientOptions\n          :eventBus\n          :featuredClients\n          :morePanel\n          :selectedClient=\"activeClient\" />\n      </TabList>\n\n      <!-- Content -->\n      <TabPanels>\n        <template v-if=\"isFeaturedClient(activeClient)\">\n          <TabPanel\n            v-for=\"client in featuredClients\"\n            :key=\"client.id\"\n            class=\"selected-client card-footer -outline-offset-2\">\n            {{ client.title }}\n          </TabPanel>\n        </template>\n        <div\n          v-else\n          :id=\"morePanel\"\n          class=\"selected-client card-footer -outline-offset-2\"\n          role=\"tabpanel\"\n          tabindex=\"0\">\n          {{ selectedClientOption?.title }}\n        </div>\n      </TabPanels>\n    </TabGroup>\n  </div>\n</template>\n<style scoped>\n.selected-client {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  font-family: var(--scalar-font-code);\n  padding: 9px 12px;\n  border-top: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n  min-height: fit-content;\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</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,YAAY,OAAM;EACxB,MAAM,YAAY,OAAM;;;;;;EAOxB,MAAM,qBAAqB,WACzB,QAAQ,QAAQ,WAAW,UAAU,CAAA;;;;;;;;;EAUvC,MAAM,eAAe,IACnB,kBAAkB,QAAA,eAAe,GAAG,iBAAiB,QAAA,eACvD;AAEA,cACQ,QAAA,iBACL,cAAc;AACb,OAAI,CAAC,kBAAkB,UAAU,CAC/B,cAAa,QAAQ;IAG3B;;EAGA,MAAM,uBAAuB,eAEzB,QAAA,cAAc,SACX,gBACC,YAAY,QAAQ,MACjB,WAAW,OAAO,OAAO,aAAa,MACxC,IAAI,EAAE,CACV,CAAC,GACN;;EAGA,MAAM,kBAAkB,eAAe,mBAAmB,QAAA,cAAc,CAAA;;EAGxE,MAAM,WAAW,eACf,gBAAgB,MAAM,WACnB,mBAAmB,aAAa,UAAU,eAAe,GAC3D,CACH;EAEA,MAAM,UAAU,eAAe,cAAa;;EAG5C,MAAM,eAAe,MAAc;GACjC,MAAM,SAAS,gBAAgB,MAAM;AAErC,OAAI,CAAC,UAAU,CAAC,QAAQ,MACtB;AAGF,WAAA,SAAS,KAAK,oCAAoC,OAAO,GAAE;;AAG7D,WAAa,EACX,sBACD,CAAA;;UAIS,QAAA,cAAc,UAAA,WAAA,EADtB,mBA6CM,OA7CN,YA6CM,CA1CJ,YAyCW,MAAA,SAAA,EAAA;IAxCT,QAAA;IACC,eAAe,SAAA;IACf,UAAQ;;2BAKH;KAJN,mBAIM,OAAA;MAHH,IAAI,MAAA,UAAS;MACd,OAAM;QAA2B,sBAEnC,GAAA,WAAA;KAGA,YASU,MAAA,QAAA,EAAA;MARP,mBAAiB,MAAA,UAAS;MAC3B,OAAM;;6BAM6B,CALnC,YAKmC,wBAAA;OAJhC,eAAA,QAAA;OACA,UAAA,QAAA;OACA,iBAAA,gBAAA;OACA,WAAA,MAAA,UAAS;OACT,gBAAgB,aAAA;;;;;;;;;;KAIrB,YAiBY,MAAA,UAAA,EAAA,MAAA;6BATC,CAPK,MAAA,iBAAgB,CAAC,aAAA,MAAY,IAAA,UAAA,KAAA,EAC3C,mBAKW,UAAA,EAAA,KAAA,GAAA,EAAA,WAJQ,gBAAA,QAAV,WAAM;2BADf,YAKW,MAAA,SAAA,EAAA;QAHR,KAAK,OAAO;QACb,OAAM;;+BACY,CAAA,gBAAA,gBAAf,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA;;;gCAGnB,mBAOM,OAAA;;OALH,IAAI,MAAA,UAAS;OACd,OAAM;OACN,MAAK;OACL,UAAS;yBACN,qBAAA,OAAsB,MAAK,EAAA,GAAA,WAAA,EAAA,CAAA"}

package/dist/blocks/scalar-client-selector-block/helpers/featured-clients.d.ts

@@ -1,7 +1,7 @@
 import type { ClientOption, ClientOptionGroup } from '@scalar/api-client/blocks/operation-code-sample';
 import type { AvailableClients } from '@scalar/snippetz';
 /** Whether or not a client is in the featured list */
-export declare const isFeaturedClient: (clientId: AvailableClients[number] | undefined, featuredClients?: AvailableClients[number][]) => boolean;
+export declare const isFeaturedClient: (clientId: string | undefined, featuredClients?: AvailableClients[number][]) => boolean;
 /**
  * Maps featured client IDs to their corresponding ClientOption objects.
  * Returns an array of ClientOption objects that match the featured clients list,

package/dist/blocks/scalar-client-selector-block/helpers/featured-clients.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"featured-clients.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/helpers/featured-clients.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AACtG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAWxD,sDAAsD;AACtD,eAAO,MAAM,gBAAgB,GAC3B,UAAU,gBAAgB,CAAC,MAAM,CAAC,GAAG,SAAS,EAC9C,kBAAiB,gBAAgB,CAAC,MAAM,CAAC,EAAqB,YACgC,CAAA;AAEhG;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,eAAe,iBAAiB,EAAE,EAClC,kBAAiB,gBAAgB,CAAC,MAAM,CAAC,EAAqB,KAC7D,YAAY,EAgBd,CAAA"}
+{"version":3,"file":"featured-clients.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/helpers/featured-clients.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AACtG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAWxD,sDAAsD;AACtD,eAAO,MAAM,gBAAgB,GAC3B,UAAU,MAAM,GAAG,SAAS,EAC5B,kBAAiB,gBAAgB,CAAC,MAAM,CAAC,EAAqB,YACgC,CAAA;AAEhG;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,eAAe,iBAAiB,EAAE,EAClC,kBAAiB,gBAAgB,CAAC,MAAM,CAAC,EAAqB,KAC7D,YAAY,EAgBd,CAAA"}

package/dist/blocks/scalar-client-selector-block/helpers/featured-clients.js.map

@@ -1 +1 @@
-{"version":3,"file":"featured-clients.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/helpers/featured-clients.ts"],"sourcesContent":["import type { ClientOption, ClientOptionGroup } from '@scalar/api-client/blocks/operation-code-sample'\nimport type { AvailableClients } from '@scalar/snippetz'\n\n/** Hard coded list of default featured clients */\nconst FEATURED_CLIENTS = [\n  'shell/curl',\n  'ruby/native',\n  'node/undici',\n  'php/guzzle',\n  'python/python3',\n] satisfies AvailableClients[number][]\n\n/** Whether or not a client is in the featured list */\nexport const isFeaturedClient = (\n  clientId: AvailableClients[number] | undefined,\n  featuredClients: AvailableClients[number][] = FEATURED_CLIENTS,\n) => Boolean(clientId && featuredClients.includes(clientId as (typeof featuredClients)[number]))\n\n/**\n * Maps featured client IDs to their corresponding ClientOption objects.\n * Returns an array of ClientOption objects that match the featured clients list,\n * maintaining the order of the featured clients.\n */\nexport const getFeaturedClients = (\n  clientOptions: ClientOptionGroup[],\n  featuredClients: AvailableClients[number][] = FEATURED_CLIENTS,\n): ClientOption[] => {\n  // Create a map of all available client options for quick lookup\n  const clientMap = new Map<string, ClientOption>()\n\n  // Using the map means we only have to loop through once\n  for (const group of clientOptions) {\n    for (const option of group.options) {\n      clientMap.set(option.id, option)\n    }\n  }\n\n  // Map featured clients to their corresponding options, maintaining order\n  return featuredClients.flatMap((clientId) => {\n    const client = clientMap.get(clientId)\n    return client ?? []\n  })\n}\n"],"mappings":";;AAIA,IAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACD;;AAGD,IAAa,oBACX,UACA,kBAA8C,qBAC3C,QAAQ,YAAY,gBAAgB,SAAS,SAA6C,CAAC;;;;;;AAOhG,IAAa,sBACX,eACA,kBAA8C,qBAC3B;CAEnB,MAAM,4BAAY,IAAI,KAA2B;AAGjD,MAAK,MAAM,SAAS,cAClB,MAAK,MAAM,UAAU,MAAM,QACzB,WAAU,IAAI,OAAO,IAAI,OAAO;AAKpC,QAAO,gBAAgB,SAAS,aAAa;AAE3C,SADe,UAAU,IAAI,SAAS,IACrB,EAAE;GACnB"}
+{"version":3,"file":"featured-clients.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/helpers/featured-clients.ts"],"sourcesContent":["import type { ClientOption, ClientOptionGroup } from '@scalar/api-client/blocks/operation-code-sample'\nimport type { AvailableClients } from '@scalar/snippetz'\n\n/** Hard coded list of default featured clients */\nconst FEATURED_CLIENTS = [\n  'shell/curl',\n  'ruby/native',\n  'node/undici',\n  'php/guzzle',\n  'python/python3',\n] satisfies AvailableClients[number][]\n\n/** Whether or not a client is in the featured list */\nexport const isFeaturedClient = (\n  clientId: string | undefined,\n  featuredClients: AvailableClients[number][] = FEATURED_CLIENTS,\n) => Boolean(clientId && featuredClients.includes(clientId as (typeof featuredClients)[number]))\n\n/**\n * Maps featured client IDs to their corresponding ClientOption objects.\n * Returns an array of ClientOption objects that match the featured clients list,\n * maintaining the order of the featured clients.\n */\nexport const getFeaturedClients = (\n  clientOptions: ClientOptionGroup[],\n  featuredClients: AvailableClients[number][] = FEATURED_CLIENTS,\n): ClientOption[] => {\n  // Create a map of all available client options for quick lookup\n  const clientMap = new Map<string, ClientOption>()\n\n  // Using the map means we only have to loop through once\n  for (const group of clientOptions) {\n    for (const option of group.options) {\n      clientMap.set(option.id, option)\n    }\n  }\n\n  // Map featured clients to their corresponding options, maintaining order\n  return featuredClients.flatMap((clientId) => {\n    const client = clientMap.get(clientId)\n    return client ?? []\n  })\n}\n"],"mappings":";;AAIA,IAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACD;;AAGD,IAAa,oBACX,UACA,kBAA8C,qBAC3C,QAAQ,YAAY,gBAAgB,SAAS,SAA6C,CAAC;;;;;;AAOhG,IAAa,sBACX,eACA,kBAA8C,qBAC3B;CAEnB,MAAM,4BAAY,IAAI,KAA2B;AAGjD,MAAK,MAAM,SAAS,cAClB,MAAK,MAAM,UAAU,MAAM,QACzB,WAAU,IAAI,OAAO,IAAI,OAAO;AAKpC,QAAO,gBAAgB,SAAS,aAAa;AAE3C,SADe,UAAU,IAAI,SAAS,IACrB,EAAE;GACnB"}

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

@@ -0,0 +1,9 @@
+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'];
+};
+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=SdkInstallationInstructions.vue.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+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"]]);
+//#endregion
+export { SdkInstallationInstructions_default as default };
+
+//# sourceMappingURL=SdkInstallationInstructions.vue.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,225 @@
+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 { ScalarMarkdown } from "@scalar/components/markdown";
+import { ScalarCombobox } from "@scalar/components/combobox";
+import { ScalarIcon } from "@scalar/components/icon";
+//#region src/blocks/scalar-sdk-installation-instructions/components/SdkInstallationInstructions.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
+var _hoisted_2 = ["id"];
+var _hoisted_3 = { class: "client-libraries-content" };
+var _hoisted_4 = ["aria-labelledby"];
+var _hoisted_5 = [
+	"id",
+	"aria-selected",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_6 = { class: "client-libraries-text" };
+var _hoisted_7 = {
+	"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 SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SdkInstallationInstructions",
+	props: { xScalarSdkInstallation: {} },
+	setup(__props) {
+		const headingId = useId();
+		/** Base id used to associate each tab with the shared panel for assistive tech */
+		const baseId = useId();
+		const panelId = `${baseId}-panel`;
+		/** Only the SDKs that actually have something to show, with their resolved icon */
+		const sdks = computed(() => getRenderableSdks(__props.xScalarSdkInstallation).map((sdk) => ({
+			...sdk,
+			icon: getLanguageIcon(sdk.lang)
+		})));
+		/** Index of the currently selected SDK */
+		const selectedIndex = ref(0);
+		/** The currently selected SDK */
+		const selected = computed(() => sdks.value[selectedIndex.value]);
+		watch(() => sdks.value.map((sdk) => sdk.lang).join("\n"), () => {
+			if (selectedIndex.value > sdks.value.length - 1) selectedIndex.value = 0;
+			nextTick(measure);
+		});
+		const tabsRef = ref();
+		const measureRef = ref();
+		/** The width available to render the tabs in */
+		const availableWidth = ref(0);
+		/** The natural width of each tab */
+		const tabWidths = ref([]);
+		/** The width of the "More" dropdown trigger */
+		const moreWidth = ref(0);
+		/** Measure the available width and the natural width of each tab */
+		const measure = () => {
+			const measureEl = measureRef.value;
+			const tabsEl = tabsRef.value;
+			if (!measureEl || !tabsEl) return;
+			const widths = Array.from(measureEl.children).map((child) => child.offsetWidth);
+			tabWidths.value = widths.slice(0, sdks.value.length);
+			moreWidth.value = widths[sdks.value.length] ?? 0;
+			availableWidth.value = tabsEl.clientWidth;
+		};
+		/** How many tabs fit inline before we need the "More" dropdown */
+		const visibleCount = computed(() => {
+			if (!tabWidths.value.length || availableWidth.value <= 0) return sdks.value.length;
+			return getVisibleTabCount(tabWidths.value, availableWidth.value, moreWidth.value);
+		});
+		/** The SDKs shown as inline tabs */
+		const visibleSdks = computed(() => sdks.value.slice(0, visibleCount.value));
+		/** Whether the selected SDK lives in the "More" dropdown */
+		const isMoreActive = computed(() => selectedIndex.value >= visibleCount.value);
+		/** The overflowing SDKs as combobox options, keyed by their original index */
+		const moreOptions = computed(() => sdks.value.slice(visibleCount.value).map((sdk, index) => ({
+			id: String(visibleCount.value + index),
+			label: sdk.lang
+		})));
+		/** The selected option within the "More" dropdown, if any */
+		const selectedMoreOption = computed(() => moreOptions.value.find((option) => option.id === String(selectedIndex.value)));
+		const selectMore = (option) => {
+			if (option) selectedIndex.value = Number(option.id);
+		};
+		/** The id of the tab that labels the panel (falls back to the heading when the selection lives in "More") */
+		const activeTabId = computed(() => isMoreActive.value ? headingId : `${baseId}-tab-${selectedIndex.value}`);
+		/**
+		* The visible tab that holds the roving tabindex. When the selection lives in
+		* the "More" dropdown, that trigger is the tab stop instead, so no inline tab
+		* should be focusable.
+		*/
+		const tabStopIndex = computed(() => isMoreActive.value ? -1 : selectedIndex.value);
+		/** Focus a visible tab by index after the DOM has settled */
+		const focusTab = (index) => {
+			nextTick(() => {
+				tabsRef.value?.querySelectorAll("[role=\"tab\"]")[index]?.focus();
+			});
+		};
+		/** Arrow / Home / End keyboard navigation across the visible tabs (WAI-ARIA tabs pattern) */
+		const onTabKeydown = (event, index) => {
+			const lastVisible = visibleCount.value - 1;
+			let next = index;
+			switch (event.key) {
+				case "ArrowRight":
+				case "ArrowDown":
+					next = index >= lastVisible ? 0 : index + 1;
+					break;
+				case "ArrowLeft":
+				case "ArrowUp":
+					next = index <= 0 ? lastVisible : index - 1;
+					break;
+				case "Home":
+					next = 0;
+					break;
+				case "End":
+					next = lastVisible;
+					break;
+				default: return;
+			}
+			event.preventDefault();
+			selectedIndex.value = next;
+			focusTab(next);
+		};
+		let observer;
+		let frame = 0;
+		/** Coalesce resize bursts into a single measure before the next paint */
+		const scheduleMeasure = () => {
+			if (typeof requestAnimationFrame === "undefined") {
+				measure();
+				return;
+			}
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		};
+		onMounted(() => {
+			if (typeof ResizeObserver !== "undefined") {
+				observer = new ResizeObserver(scheduleMeasure);
+				if (tabsRef.value) observer.observe(tabsRef.value);
+				if (measureRef.value) observer.observe(measureRef.value);
+			}
+			measure();
+		});
+		onBeforeUnmount(() => {
+			observer?.disconnect();
+			if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(frame);
+		});
+		return (_ctx, _cache) => {
+			return sdks.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", {
+					id: unref(headingId),
+					class: "client-libraries-heading"
+				}, " Client Libraries ", 8, _hoisted_2),
+				createElementVNode("div", _hoisted_3, [createElementVNode("div", {
+					ref_key: "tabsRef",
+					ref: tabsRef,
+					"aria-labelledby": unref(headingId),
+					class: "client-libraries-row",
+					role: "tablist"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleSdks.value, (sdk, index) => {
+					return openBlock(), createElementBlock("button", {
+						id: `${unref(baseId)}-tab-${index}`,
+						key: index,
+						"aria-controls": panelId,
+						"aria-selected": index === selectedIndex.value,
+						class: normalizeClass(["client-libraries", { "client-libraries__active": index === selectedIndex.value }]),
+						role: "tab",
+						tabindex: index === tabStopIndex.value ? 0 : -1,
+						type: "button",
+						onClick: ($event) => selectedIndex.value = index,
+						onKeydown: ($event) => onTabKeydown($event, index)
+					}, [sdk.icon ? (openBlock(), createBlock(unref(ScalarIcon), {
+						key: 0,
+						class: "client-libraries-icon",
+						icon: sdk.icon
+					}, null, 8, ["icon"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_6, toDisplayString(sdk.lang), 1)], 42, _hoisted_5);
+				}), 128)), visibleCount.value < sdks.value.length ? (openBlock(), createBlock(unref(ScalarCombobox), {
+					key: 0,
+					modelValue: selectedMoreOption.value,
+					options: moreOptions.value,
+					placement: "bottom-end",
+					teleport: "",
+					"onUpdate:modelValue": selectMore
+				}, {
+					default: withCtx(() => [createElementVNode("button", {
+						class: normalizeClass(["client-libraries client-libraries-more", { "client-libraries__active": isMoreActive.value }]),
+						type: "button"
+					}, [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)]),
+					_: 1
+				}, 8, ["modelValue", "options"])) : createCommentVNode("", true)], 8, _hoisted_4), createElementVNode("div", _hoisted_7, [createElementVNode("div", {
+					ref_key: "measureRef",
+					ref: measureRef,
+					class: "client-libraries-row client-libraries-row--measure"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(sdks.value, (sdk, index) => {
+					return openBlock(), createElementBlock("span", {
+						key: index,
+						class: "client-libraries"
+					}, [sdk.icon ? (openBlock(), createBlock(unref(ScalarIcon), {
+						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), {
+					class: "client-libraries-icon",
+					icon: "Ellipses"
+				}), _cache[1] || (_cache[1] = createElementVNode("span", { class: "client-libraries-text" }, "More", -1))])], 512)])]),
+				selected.value?.description ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					id: panelId,
+					"aria-labelledby": activeTabId.value,
+					class: "selected-client",
+					role: "tabpanel",
+					tabindex: "0"
+				}, [createVNode(unref(ScalarMarkdown), { value: selected.value.description }, null, 8, ["value"])], 8, _hoisted_10)) : createCommentVNode("", true)
+			])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { SdkInstallationInstructions_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SdkInstallationInstructions.vue.script.js.map

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

@@ -0,0 +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 {\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":"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"}

package/dist/blocks/scalar-sdk-installation-instructions/helpers/language-icon.d.ts

@@ -0,0 +1,4 @@
+import type { Icon } from '@scalar/components/icon';
+/** Find the programming language icon for a given language name, if we have one. */
+export declare const getLanguageIcon: (lang: string) => Icon | undefined;
+//# sourceMappingURL=language-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"language-icon.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-sdk-installation-instructions/helpers/language-icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAuDnD,oFAAoF;AACpF,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,KAAG,IAAI,GAAG,SAAsD,CAAA"}

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

@@ -0,0 +1,59 @@
+//#region src/blocks/scalar-sdk-installation-instructions/helpers/language-icon.ts
+/**
+* Maps common language names (and a few aliases) to the matching
+* `programming-language-*` icon.
+*
+* The `lang` in `x-scalar-sdk-installation` is a freeform string, so we only
+* resolve the ones we have a logo for and let the caller fall back to text.
+*/
+var LANGUAGE_ICONS = {
+	c: "programming-language-c",
+	clojure: "programming-language-clojure",
+	csharp: "programming-language-csharp",
+	"c#": "programming-language-csharp",
+	cs: "programming-language-csharp",
+	css: "programming-language-css3",
+	css3: "programming-language-css3",
+	dart: "programming-language-dart",
+	fsharp: "programming-language-fsharp",
+	"f#": "programming-language-fsharp",
+	go: "programming-language-go",
+	golang: "programming-language-go",
+	html: "programming-language-html5",
+	html5: "programming-language-html5",
+	http: "programming-language-http",
+	java: "programming-language-java",
+	javascript: "programming-language-javascript",
+	js: "programming-language-javascript",
+	json: "programming-language-json",
+	kotlin: "programming-language-kotlin",
+	node: "programming-language-node",
+	"node.js": "programming-language-node",
+	nodejs: "programming-language-node",
+	objc: "programming-language-objc",
+	"objective-c": "programming-language-objc",
+	ocaml: "programming-language-ocaml",
+	php: "programming-language-php",
+	powershell: "programming-language-powershell",
+	python: "programming-language-python",
+	py: "programming-language-python",
+	r: "programming-language-r",
+	ruby: "programming-language-ruby",
+	rb: "programming-language-ruby",
+	rust: "programming-language-rust",
+	rs: "programming-language-rust",
+	scala: "programming-language-scala",
+	shell: "programming-language-shell",
+	bash: "programming-language-shell",
+	sh: "programming-language-shell",
+	curl: "programming-language-shell",
+	swift: "programming-language-swift",
+	typescript: "programming-language-typescript",
+	ts: "programming-language-typescript"
+};
+/** Find the programming language icon for a given language name, if we have one. */
+var getLanguageIcon = (lang) => LANGUAGE_ICONS[lang.trim().toLowerCase()];
+//#endregion
+export { getLanguageIcon };
+
+//# sourceMappingURL=language-icon.js.map

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

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