@scalar/api-reference 1.49.2 → 1.49.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @scalar/api-reference
 
+## 1.49.4
+
+### Patch Changes
+
+- [#8513](https://github.com/scalar/scalar/pull/8513): fix(api-reference): make responsive header rendering SSR-safe
+- [#8526](https://github.com/scalar/scalar/pull/8526): feat: improve filtering of client selector
+- [#8571](https://github.com/scalar/scalar/pull/8571): fix: [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for
+- [#8563](https://github.com/scalar/scalar/pull/8563): fix: type declarations don't use the full path for imports
+
+## 1.49.3
+
+### Patch Changes
+
+- [#8529](https://github.com/scalar/scalar/pull/8529): rewrite declaration aliases in built type files
+
 ## 1.49.2
 
 ### Patch Changes

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+export { _plugin_vue_export_helper_default as default };

package/dist/blocks/index.js

@@ -1,3 +1,5 @@
-import "../ExternalDocs-phu7GxpZ.js";
-import { a as ClientSelector_default, n as IntroductionCardItem_default, r as InfoBlock_default, t as ServerSelector_default } from "../ServerSelector-5y29y2BJ.js";
+import ClientSelector_default from "./scalar-client-selector-block/components/ClientSelector.vue.js";
+import InfoBlock_default from "./scalar-info-block/components/InfoBlock.vue.js";
+import IntroductionCardItem_default from "./scalar-info-block/components/IntroductionCardItem.vue.js";
+import ServerSelector_default from "./scalar-server-selector-block/components/ServerSelector.vue.js";
 export { ClientSelector_default as ClientSelector, InfoBlock_default as InfoBlock, IntroductionCardItem_default as IntroductionCardItem, ServerSelector_default as ServerSelector };

package/dist/blocks/scalar-client-selector-block/components/ClientDropdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClientDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientDropdown.vue"],"names":[],"mappings":"AAyPA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EAEvB,MAAM,oDAAoD,CAAA;AAG3D,OAAO,KAAK,EAAE,gBAAgB,EAAY,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAKvE,KAAK,WAAW,GAAG;IACf,qBAAqB;IACrB,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,yCAAyC;IACzC,cAAc,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACzC,+BAA+B;IAC/B,eAAe,EAAE,YAAY,EAAE,CAAA;IAC/B,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AAkPJ,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ClientDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientDropdown.vue"],"names":[],"mappings":"AA2PA,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EAEvB,MAAM,oDAAoD,CAAA;AAG3D,OAAO,KAAK,EAAE,gBAAgB,EAAY,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAKvE,KAAK,WAAW,GAAG;IACf,qBAAqB;IACrB,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,yCAAyC;IACzC,cAAc,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACzC,+BAA+B;IAC/B,eAAe,EAAE,YAAY,EAAE,CAAA;IAC/B,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AAqPJ,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClientDropdown.vue.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Tab } from '@headlessui/vue'\nimport {\n  filterClientsByQuery,\n  findClient,\n  type ClientOption,\n  type ClientOptionGroup,\n  type CustomClientOption,\n} from '@scalar/api-client/v2/blocks/operation-code-sample'\nimport { ScalarCombobox, ScalarIcon } from '@scalar/components'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport type { AvailableClients, TargetId } from '@scalar/types/snippetz'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref } from 'vue'\n\nimport { isFeaturedClient } from '@/blocks/scalar-client-selector-block/helpers/featured-clients'\n\nconst { clientOptions, featuredClients, eventBus, selectedClient } =\n  defineProps<{\n    /** Client options */\n    clientOptions: ClientOptionGroup[]\n    /** The currently selected Http Client */\n    selectedClient?: AvailableClients[number]\n    /** List of featured clients */\n    featuredClients: ClientOption[]\n    /** Event bus */\n    eventBus: WorkspaceEventBus\n  }>()\n\nconst containerRef = ref<HTMLElement>()\n\n/**\n * Icons have longer names to appear in icon searches, e.g. \"javascript-js\" instead of just \"javascript\". This function\n * maps the language key to the icon name.\n */\nconst getIconByLanguageKey = (targetKey: TargetId) =>\n  `programming-language-${targetKey === 'js' ? 'javascript' : targetKey}` as const\n\n/** Set custom example, or update the selected HTTP client globally */\nconst selectClient = (option: ClientOption | CustomClientOption) => {\n  if (!containerRef.value) {\n    return\n  }\n\n  // We need to freeze the ui to prevent scrolling as the clients change\n  const unfreeze = freezeElement(containerRef.value)\n  setTimeout(() => {\n    unfreeze()\n  }, 300)\n\n  // Update the store\n  if (option.clientKey !== 'custom') {\n    eventBus.emit('workspace:update:selected-client', option.id)\n  }\n}\n\n/** Calculates the targetKey from the selected client id */\nconst selectedTargetKey = computed(\n  () => selectedClient?.split('/')[0] as TargetId | undefined,\n)\n</script>\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"client-libraries-content\">\n    <Tab\n      v-for=\"featuredClient in featuredClients\"\n      :key=\"featuredClient.clientKey\"\n      class=\"client-libraries rendered-code-sdks\"\n      :class=\"{\n        'client-libraries__active': featuredClient.id === selectedClient,\n      }\">\n      <div :class=\"`client-libraries-icon__${featuredClient.targetKey}`\">\n        <ScalarIcon\n          class=\"client-libraries-icon\"\n          :icon=\"getIconByLanguageKey(featuredClient.targetKey)\" />\n      </div>\n      <span class=\"client-libraries-text\">{{\n        featuredClient.targetTitle\n      }}</span>\n    </Tab>\n\n    <!-- Client Dropdown -->\n    <ScalarCombobox\n      :filterFn=\"filterClientsByQuery\"\n      :modelValue=\"findClient(clientOptions, selectedClient)\"\n      :options=\"clientOptions\"\n      placement=\"bottom-end\"\n      teleport\n      @update:modelValue=\"selectClient($event as ClientOption)\">\n      <button\n        class=\"client-libraries client-libraries__select\"\n        :class=\"{\n          'client-libraries__active':\n            selectedClient && !isFeaturedClient(selectedClient),\n        }\"\n        type=\"button\">\n        <div\n          aria-hidden=\"true\"\n          class=\"client-libraries-icon__more\">\n          <template v-if=\"selectedClient && !isFeaturedClient(selectedClient)\">\n            <div :class=\"`client-libraries-icon__${selectedTargetKey}`\">\n              <ScalarIcon\n                v-if=\"selectedTargetKey\"\n                class=\"client-libraries-icon\"\n                :icon=\"getIconByLanguageKey(selectedTargetKey)\" />\n            </div>\n          </template>\n          <template v-else>\n            <svg\n              class=\"client-libraries-icon\"\n              height=\"50\"\n              role=\"presentation\"\n              viewBox=\"0 0 50 50\"\n              width=\"50\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <g\n                fill=\"currentColor\"\n                fill-rule=\"nonzero\">\n                <path\n                  d=\"M10.71 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M21.13 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M31.55 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0\" />\n              </g>\n            </svg>\n          </template>\n        </div>\n        <span\n          v-if=\"clientOptions.length\"\n          class=\"client-libraries-text client-libraries-text-more\">\n          More\n        </span>\n        <span class=\"sr-only\">Select from all clients</span>\n      </button>\n    </ScalarCombobox>\n  </div>\n</template>\n<style scoped>\n.client-libraries-content {\n  container: client-libraries-content / inline-size;\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\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}\n.client-libraries {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n  white-space: nowrap;\n  padding: 8px 2px;\n  gap: 6px;\n  color: var(--scalar-color-3);\n  border-bottom: 1px solid transparent;\n  user-select: none;\n}\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/* remove php and c on mobile */\n@media screen and (max-width: 450px) {\n  .client-libraries:nth-of-type(4),\n  .client-libraries:nth-of-type(5) {\n    display: none;\n  }\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-icon__more svg {\n  height: initial;\n}\n@container client-libraries-content (width < 400px) {\n  .client-libraries__select {\n    width: fit-content;\n\n    .client-libraries-icon__more + span {\n      display: none;\n    }\n  }\n}\n@container client-libraries-content (width < 380px) {\n  .client-libraries {\n    width: 100%;\n  }\n  .client-libraries span {\n    display: none;\n  }\n}\n.client-libraries__active {\n  color: var(--scalar-color-1);\n  border-bottom: 1px solid var(--scalar-color-1);\n}\n@keyframes codeloader {\n  0% {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(1turn);\n  }\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@media screen and (max-width: 600px) {\n  .references-classic .client-libraries {\n    flex-direction: column;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,106 @@
+import { isFeaturedClient } from "../helpers/featured-clients.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
+import { Tab } from "@headlessui/vue";
+import { ScalarCombobox, ScalarIcon } from "@scalar/components";
+import { filterClientsByQuery, findClient } from "@scalar/api-client/v2/blocks/operation-code-sample";
+import { freezeElement } from "@scalar/helpers/dom/freeze-element";
+//#region src/blocks/scalar-client-selector-block/components/ClientDropdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "client-libraries-text" };
+var _hoisted_2 = {
+	"aria-hidden": "true",
+	class: "client-libraries-icon__more"
+};
+var _hoisted_3 = {
+	key: 1,
+	class: "client-libraries-icon",
+	height: "50",
+	role: "presentation",
+	viewBox: "0 0 50 50",
+	width: "50",
+	xmlns: "http://www.w3.org/2000/svg"
+};
+var _hoisted_4 = {
+	key: 0,
+	class: "client-libraries-text client-libraries-text-more"
+};
+var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ClientDropdown",
+	props: {
+		clientOptions: {},
+		selectedClient: {},
+		featuredClients: {},
+		eventBus: {}
+	},
+	setup(__props) {
+		const containerRef = ref();
+		/**
+		* Icons have longer names to appear in icon searches, e.g. "javascript-js" instead of just "javascript". This function
+		* maps the language key to the icon name.
+		*/
+		const getIconByLanguageKey = (targetKey) => `programming-language-${targetKey === "js" ? "javascript" : targetKey}`;
+		/** Set custom example, or update the selected HTTP client globally */
+		const selectClient = (option) => {
+			if (!containerRef.value) return;
+			const unfreeze = freezeElement(containerRef.value);
+			setTimeout(() => {
+				unfreeze();
+			}, 300);
+			if (option.clientKey !== "custom") __props.eventBus.emit("workspace:update:selected-client", option.id);
+		};
+		/** Calculates the targetKey from the selected client id */
+		const selectedTargetKey = computed(() => __props.selectedClient?.split("/")[0]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: "client-libraries-content"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.featuredClients, (featuredClient) => {
+				return openBlock(), createBlock(unref(Tab), {
+					key: featuredClient.clientKey,
+					class: normalizeClass(["client-libraries rendered-code-sdks", { "client-libraries__active": featuredClient.id === __props.selectedClient }])
+				}, {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(`client-libraries-icon__${featuredClient.targetKey}`) }, [createVNode(unref(ScalarIcon), {
+						class: "client-libraries-icon",
+						icon: getIconByLanguageKey(featuredClient.targetKey)
+					}, null, 8, ["icon"])], 2), createElementVNode("span", _hoisted_1, toDisplayString(featuredClient.targetTitle), 1)]),
+					_: 2
+				}, 1032, ["class"]);
+			}), 128)), createVNode(unref(ScalarCombobox), {
+				filterFn: unref(filterClientsByQuery),
+				modelValue: unref(findClient)(__props.clientOptions, __props.selectedClient),
+				options: __props.clientOptions,
+				placement: "bottom-end",
+				teleport: "",
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectClient($event))
+			}, {
+				default: withCtx(() => [createElementVNode("button", {
+					class: normalizeClass(["client-libraries client-libraries__select", { "client-libraries__active": __props.selectedClient && !unref(isFeaturedClient)(__props.selectedClient) }]),
+					type: "button"
+				}, [
+					createElementVNode("div", _hoisted_2, [__props.selectedClient && !unref(isFeaturedClient)(__props.selectedClient) ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(`client-libraries-icon__${selectedTargetKey.value}`)
+					}, [selectedTargetKey.value ? (openBlock(), createBlock(unref(ScalarIcon), {
+						key: 0,
+						class: "client-libraries-icon",
+						icon: getIconByLanguageKey(selectedTargetKey.value)
+					}, null, 8, ["icon"])) : createCommentVNode("", true)], 2)) : (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[1] || (_cache[1] = [createElementVNode("g", {
+						fill: "currentColor",
+						"fill-rule": "nonzero"
+					}, [createElementVNode("path", { d: "M10.71 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M21.13 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M31.55 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0" })], -1)])]))]),
+					__props.clientOptions.length ? (openBlock(), createElementBlock("span", _hoisted_4, " More ")) : createCommentVNode("", true),
+					_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Select from all clients", -1))
+				], 2)]),
+				_: 1
+			}, 8, [
+				"filterFn",
+				"modelValue",
+				"options"
+			])], 512);
+		};
+	}
+});
+//#endregion
+export { ClientDropdown_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ClientDropdown.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClientDropdown.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Tab } from '@headlessui/vue'\nimport {\n  filterClientsByQuery,\n  findClient,\n  type ClientOption,\n  type ClientOptionGroup,\n  type CustomClientOption,\n} from '@scalar/api-client/v2/blocks/operation-code-sample'\nimport { ScalarCombobox, ScalarIcon } from '@scalar/components'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport type { AvailableClients, TargetId } from '@scalar/types/snippetz'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref } from 'vue'\n\nimport { isFeaturedClient } from '@/blocks/scalar-client-selector-block/helpers/featured-clients'\n\nconst { clientOptions, featuredClients, eventBus, selectedClient } =\n  defineProps<{\n    /** Client options */\n    clientOptions: ClientOptionGroup[]\n    /** The currently selected Http Client */\n    selectedClient?: AvailableClients[number]\n    /** List of featured clients */\n    featuredClients: ClientOption[]\n    /** Event bus */\n    eventBus: WorkspaceEventBus\n  }>()\n\nconst containerRef = ref<HTMLElement>()\n\n/**\n * Icons have longer names to appear in icon searches, e.g. \"javascript-js\" instead of just \"javascript\". This function\n * maps the language key to the icon name.\n */\nconst getIconByLanguageKey = (targetKey: TargetId) =>\n  `programming-language-${targetKey === 'js' ? 'javascript' : targetKey}` as const\n\n/** Set custom example, or update the selected HTTP client globally */\nconst selectClient = (option: ClientOption | CustomClientOption) => {\n  if (!containerRef.value) {\n    return\n  }\n\n  // We need to freeze the ui to prevent scrolling as the clients change\n  const unfreeze = freezeElement(containerRef.value)\n  setTimeout(() => {\n    unfreeze()\n  }, 300)\n\n  // Update the store\n  if (option.clientKey !== 'custom') {\n    eventBus.emit('workspace:update:selected-client', option.id)\n  }\n}\n\n/** Calculates the targetKey from the selected client id */\nconst selectedTargetKey = computed(\n  () => selectedClient?.split('/')[0] as TargetId | undefined,\n)\n</script>\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"client-libraries-content\">\n    <Tab\n      v-for=\"featuredClient in featuredClients\"\n      :key=\"featuredClient.clientKey\"\n      class=\"client-libraries rendered-code-sdks\"\n      :class=\"{\n        'client-libraries__active': featuredClient.id === selectedClient,\n      }\">\n      <div :class=\"`client-libraries-icon__${featuredClient.targetKey}`\">\n        <ScalarIcon\n          class=\"client-libraries-icon\"\n          :icon=\"getIconByLanguageKey(featuredClient.targetKey)\" />\n      </div>\n      <span class=\"client-libraries-text\">{{\n        featuredClient.targetTitle\n      }}</span>\n    </Tab>\n\n    <!-- Client Dropdown -->\n    <ScalarCombobox\n      :filterFn=\"filterClientsByQuery\"\n      :modelValue=\"findClient(clientOptions, selectedClient)\"\n      :options=\"clientOptions\"\n      placement=\"bottom-end\"\n      teleport\n      @update:modelValue=\"selectClient($event as ClientOption)\">\n      <button\n        class=\"client-libraries client-libraries__select\"\n        :class=\"{\n          'client-libraries__active':\n            selectedClient && !isFeaturedClient(selectedClient),\n        }\"\n        type=\"button\">\n        <div\n          aria-hidden=\"true\"\n          class=\"client-libraries-icon__more\">\n          <template v-if=\"selectedClient && !isFeaturedClient(selectedClient)\">\n            <div :class=\"`client-libraries-icon__${selectedTargetKey}`\">\n              <ScalarIcon\n                v-if=\"selectedTargetKey\"\n                class=\"client-libraries-icon\"\n                :icon=\"getIconByLanguageKey(selectedTargetKey)\" />\n            </div>\n          </template>\n          <template v-else>\n            <svg\n              class=\"client-libraries-icon\"\n              height=\"50\"\n              role=\"presentation\"\n              viewBox=\"0 0 50 50\"\n              width=\"50\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <g\n                fill=\"currentColor\"\n                fill-rule=\"nonzero\">\n                <path\n                  d=\"M10.71 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M21.13 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M31.55 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0\" />\n              </g>\n            </svg>\n          </template>\n        </div>\n        <span\n          v-if=\"clientOptions.length\"\n          class=\"client-libraries-text client-libraries-text-more\">\n          More\n        </span>\n        <span class=\"sr-only\">Select from all clients</span>\n      </button>\n    </ScalarCombobox>\n  </div>\n</template>\n<style scoped>\n.client-libraries-content {\n  container: client-libraries-content / inline-size;\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\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}\n.client-libraries {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n  white-space: nowrap;\n  padding: 8px 2px;\n  gap: 6px;\n  color: var(--scalar-color-3);\n  border-bottom: 1px solid transparent;\n  user-select: none;\n}\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/* remove php and c on mobile */\n@media screen and (max-width: 450px) {\n  .client-libraries:nth-of-type(4),\n  .client-libraries:nth-of-type(5) {\n    display: none;\n  }\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-icon__more svg {\n  height: initial;\n}\n@container client-libraries-content (width < 400px) {\n  .client-libraries__select {\n    width: fit-content;\n\n    .client-libraries-icon__more + span {\n      display: none;\n    }\n  }\n}\n@container client-libraries-content (width < 380px) {\n  .client-libraries {\n    width: 100%;\n  }\n  .client-libraries span {\n    display: none;\n  }\n}\n.client-libraries__active {\n  color: var(--scalar-color-1);\n  border-bottom: 1px solid var(--scalar-color-1);\n}\n@keyframes codeloader {\n  0% {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(1turn);\n  }\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@media screen and (max-width: 600px) {\n  .references-classic .client-libraries {\n    flex-direction: column;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,eAAe,KAAiB;;;;;EAMtC,MAAM,wBAAwB,cAC5B,wBAAwB,cAAc,OAAO,eAAe;;EAG9D,MAAM,gBAAgB,WAA8C;AAClE,OAAI,CAAC,aAAa,MAChB;GAIF,MAAM,WAAW,cAAc,aAAa,MAAK;AACjD,oBAAiB;AACf,cAAS;MACR,IAAG;AAGN,OAAI,OAAO,cAAc,SACvB,SAAA,SAAS,KAAK,oCAAoC,OAAO,GAAE;;;EAK/D,MAAM,oBAAoB,eAClB,QAAA,gBAAgB,MAAM,IAAI,CAAC,GACnC;;uBAGE,mBAuEM,OAAA;aAtEA;IAAJ,KAAI;IACJ,OAAM;yBACN,mBAeM,UAAA,MAAA,WAdqB,QAAA,kBAAlB,mBAAc;wBADvB,YAeM,MAAA,IAAA,EAAA;KAbH,KAAK,eAAe;KACrB,OAAK,eAAA,CAAC,uCAAqC,EAAA,4BACG,eAAe,OAAO,QAAA,gBAAA,CAAA,CAAA;;4BAO9D,CAJN,mBAIM,OAAA,EAJA,OAAK,eAAA,0BAA4B,eAAe,YAAS,EAAA,EAAA,CAC7D,YAE2D,MAAA,WAAA,EAAA;MADzD,OAAM;MACL,MAAM,qBAAqB,eAAe,UAAS;iCAExD,mBAES,QAFT,YAES,gBADP,eAAe,YAAW,EAAA,EAAA,CAAA,CAAA;;;cAK9B,YAiDiB,MAAA,eAAA,EAAA;IAhDd,UAAU,MAAA,qBAAoB;IAC9B,YAAY,MAAA,WAAU,CAAC,QAAA,eAAe,QAAA,eAAc;IACpD,SAAS,QAAA;IACV,WAAU;IACV,UAAA;IACC,uBAAiB,OAAA,OAAA,OAAA,MAAA,WAAE,aAAa,OAAM;;2BA0C9B,CAzCT,mBAyCS,UAAA;KAxCP,OAAK,eAAA,CAAC,6CAA2C,EAAA,4BACW,QAAA,kBAAc,CAAK,MAAA,iBAAgB,CAAC,QAAA,eAAc,EAAA,CAAA,CAAA;KAI9G,MAAK;;KACL,mBA2BM,OA3BN,YA2BM,CAxBY,QAAA,kBAAc,CAAK,MAAA,iBAAgB,CAAC,QAAA,eAAc,IAAA,WAAA,EAChE,mBAKM,OAAA;;MALA,OAAK,eAAA,0BAA4B,kBAAA,QAAiB;SAE9C,kBAAA,SAAA,WAAA,EADR,YAGoD,MAAA,WAAA,EAAA;;MADlD,OAAM;MACL,MAAM,qBAAqB,kBAAA,MAAiB;iFAIjD,mBAaM,OAbN,YAaM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CANJ,mBAKI,KAAA;MAJF,MAAK;MACL,aAAU;SACV,mBACoL,QAAA,EAAlL,GAAE,+KAA6K,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA;KAMjL,QAAA,cAAc,UAAA,WAAA,EADtB,mBAIO,QAJP,YAE2D,SAE3D,IAAA,mBAAA,IAAA,KAAA;+BACA,mBAAoD,QAAA,EAA9C,OAAM,WAAS,EAAC,2BAAuB,GAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClientSelector.vue.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/v2/blocks/operation-code-sample'\nimport { ScalarCodeBlock, ScalarMarkdown } from '@scalar/components'\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":""}

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

@@ -0,0 +1,121 @@
+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 { TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/vue";
+import { ScalarCodeBlock, ScalarMarkdown } from "@scalar/components";
+import { DEFAULT_CLIENT } from "@scalar/api-client/v2/blocks/operation-code-sample";
+//#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 ClientSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ClientSelector",
+	props: {
+		xScalarSdkInstallation: {},
+		clientOptions: {},
+		selectedClient: { default: () => DEFAULT_CLIENT },
+		eventBus: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const headingId = useId();
+		const morePanel = useId();
+		/** 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]);
+		/** 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 wrapper = useTemplateRef("wrapper-ref");
+		/** Emit the selected client event on tab */
+		const onTabSelect = (i) => {
+			const client = featuredClients.value[i];
+			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), {
+				manual: "",
+				selectedIndex: tabIndex.value,
+				onChange: onTabSelect
+			}, {
+				default: withCtx(() => [
+					createElementVNode("div", {
+						id: unref(headingId),
+						class: "client-libraries-heading"
+					}, " Client Libraries ", 8, _hoisted_2),
+					createVNode(unref(TabList), {
+						"aria-labelledby": unref(headingId),
+						class: "client-libraries-list"
+					}, {
+						default: withCtx(() => [createVNode(ClientDropdown_default, {
+							clientOptions: __props.clientOptions,
+							eventBus: __props.eventBus,
+							featuredClients: featuredClients.value,
+							morePanel: unref(morePanel),
+							selectedClient: __props.selectedClient
+						}, null, 8, [
+							"clientOptions",
+							"eventBus",
+							"featuredClients",
+							"morePanel",
+							"selectedClient"
+						])]),
+						_: 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) => {
+							return openBlock(), createBlock(unref(TabPanel), {
+								key: client.id,
+								class: "selected-client card-footer -outline-offset-2"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(client.title), 1)]),
+								_: 2
+							}, 1024);
+						}), 128)) : (openBlock(), createElementBlock("div", {
+							key: 2,
+							id: unref(morePanel),
+							class: "selected-client card-footer -outline-offset-2",
+							role: "tabpanel",
+							tabindex: "0"
+						}, toDisplayString(selectedClientOption.value?.title), 9, _hoisted_4))]),
+						_: 1
+					})
+				]),
+				_: 1
+			}, 8, ["selectedIndex"])], 512)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { ClientSelector_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ClientSelector.vue.script.js.map

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

@@ -0,0 +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/v2/blocks/operation-code-sample'\nimport { ScalarCodeBlock, ScalarMarkdown } from '@scalar/components'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,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"}

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

@@ -0,0 +1,27 @@
+//#region src/blocks/scalar-client-selector-block/helpers/featured-clients.ts
+/** Hard coded list of default featured clients */
+var FEATURED_CLIENTS = [
+	"shell/curl",
+	"ruby/native",
+	"node/undici",
+	"php/guzzle",
+	"python/python3"
+];
+/** Whether or not a client is in the featured list */
+var isFeaturedClient = (clientId, featuredClients = FEATURED_CLIENTS) => Boolean(clientId && featuredClients.includes(clientId));
+/**
+* Maps featured client IDs to their corresponding ClientOption objects.
+* Returns an array of ClientOption objects that match the featured clients list,
+* maintaining the order of the featured clients.
+*/
+var getFeaturedClients = (clientOptions, featuredClients = FEATURED_CLIENTS) => {
+	const clientMap = /* @__PURE__ */ new Map();
+	for (const group of clientOptions) for (const option of group.options) clientMap.set(option.id, option);
+	return featuredClients.flatMap((clientId) => {
+		return clientMap.get(clientId) ?? [];
+	});
+};
+//#endregion
+export { getFeaturedClients, isFeaturedClient };
+
+//# sourceMappingURL=featured-clients.js.map

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

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

package/dist/blocks/scalar-client-selector-block/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ClientSelector } from './components/ClientSelector.vue';
+export { default as ClientSelector } from './components/ClientSelector.vue.js';
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadLink.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/DownloadLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ApiReferenceConfiguration } from '@scalar/types/api-reference'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\n\nimport Badge from '@/components/Badge/Badge.vue'\n\nconst { eventBus, documentDownloadType, documentUrl } = defineProps<{\n  /** The document download type. */\n  documentDownloadType: ApiReferenceConfiguration['documentDownloadType']\n  /** The event bus for the handling all events. */\n  eventBus: WorkspaceEventBus\n  /**\n   * URL of the OpenAPI document. Required when documentDownloadType is 'direct'\n   * so the link can point to the document.\n   */\n  documentUrl?: string\n}>()\n\n// The id is retrieved at the layout level.\nconst handleDownloadClick = (format: 'json' | 'yaml') => {\n  eventBus.emit('ui:download:document', { format })\n}\n</script>\n<template>\n  <div\n    v-if=\"\n      ['yaml', 'json', 'both'].includes(documentDownloadType) ||\n      (documentDownloadType === 'direct' && documentUrl)\n    \"\n    class=\"download-container group\"\n    :class=\"{\n      'download-both': documentDownloadType === 'both',\n    }\">\n    <!-- Direct link to the document -->\n    <a\n      v-if=\"documentDownloadType === 'direct' && documentUrl\"\n      class=\"download-link download-button\"\n      :href=\"documentUrl\">\n      <span> Download OpenAPI Document </span>\n    </a>\n\n    <!-- JSON  -->\n    <button\n      v-if=\"documentDownloadType === 'json' || documentDownloadType === 'both'\"\n      class=\"download-button\"\n      type=\"button\"\n      @click.prevent=\"() => handleDownloadClick('json')\">\n      <span> Download OpenAPI Document </span>\n      <Badge class=\"extension hidden group-hover:flex\">json</Badge>\n    </button>\n\n    <!-- YAML -->\n    <button\n      v-if=\"documentDownloadType === 'yaml' || documentDownloadType === 'both'\"\n      class=\"download-button\"\n      type=\"button\"\n      @click.prevent=\"() => handleDownloadClick('yaml')\">\n      <span> Download OpenAPI Document </span>\n      <Badge class=\"extension hidden group-hover:flex\">yaml</Badge>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n@reference '@/style.css';\n\n.download-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin: 0 0.5px 8px;\n  position: relative;\n  width: fit-content;\n  z-index: 1;\n}\n\n.download-container:has(:focus-visible)::before,\n.download-container.download-both:hover::before {\n  content: '';\n  width: calc(100% + 24px);\n  height: 90px;\n  position: absolute;\n  top: -11px;\n  left: -12px;\n  border-radius: var(--scalar-radius-lg);\n  box-shadow: var(--scalar-shadow-2);\n  pointer-events: none;\n  background: var(--scalar-background-1);\n}\n\n.download-button {\n  color: var(--scalar-link-color);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  height: fit-content;\n  padding: 0;\n  position: relative;\n  white-space: nowrap !important;\n\n  outline: none;\n}\n\n.download-button::before {\n  border-radius: var(--scalar-radius);\n  content: '';\n  height: calc(100% + 16px);\n  left: -9px;\n  position: absolute;\n  top: -8px;\n  width: calc(100% + 18px);\n}\n\n.download-button:last-of-type::before {\n  width: calc(100% + 15px);\n}\n\n.download-button:hover::before {\n  background: var(--scalar-background-2);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.download-button:focus-visible::before {\n  background: var(--scalar-background-2);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  @apply outline;\n}\n\n.download-button span {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n\n  text-decoration: var(--scalar-text-decoration);\n  color: var(--font-color);\n  font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n  text-underline-offset: 0.25rem;\n  text-decoration-thickness: 1px;\n  text-decoration-color: color-mix(in srgb, var(--font-color) 30%, transparent);\n  align-items: center;\n  display: flex;\n  gap: 6px;\n  line-height: 1.625;\n  z-index: 1;\n}\n\n.download-button:hover span {\n  text-decoration-color: var(--scalar-color-1, currentColor);\n  color: var(--scalar-link-color-hover, var(--scalar-color-accent));\n  -webkit-text-decoration: var(--scalar-text-decoration-hover);\n  text-decoration: var(--scalar-text-decoration-hover);\n}\n\n/* Second button displayed when hovering over the download container */\n.download-button:nth-of-type(2) {\n  @apply sr-only;\n}\n\n.download-container:has(:focus-visible) .download-button:nth-of-type(2),\n.download-container:hover .download-button:nth-of-type(2) {\n  @apply not-sr-only;\n\n  position: absolute;\n  top: 42px;\n}\n\n.extension {\n  z-index: 1;\n  background: var(--scalar-link-color, var(--scalar-color-accent));\n  color: var(--scalar-background-1);\n}\n.download-container:has(:focus-visible) .extension,\n.download-container:hover .extension {\n  opacity: 1;\n}\n\n.download-link {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n\n  text-decoration: var(--scalar-text-decoration);\n  color: var(--font-color);\n  font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n  text-underline-offset: 0.25rem;\n  text-decoration-thickness: 1px;\n  text-decoration-color: color-mix(in srgb, var(--font-color) 30%, transparent);\n}\n\n.download-link:hover {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  text-decoration-color: var(--font-color);\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,55 @@
+import Badge_default from "../../../components/Badge/Badge.vue.js";
+import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, withCtx, withModifiers } from "vue";
+//#region src/blocks/scalar-info-block/components/DownloadLink.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["href"];
+var DownloadLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DownloadLink",
+	props: {
+		documentDownloadType: {},
+		eventBus: {},
+		documentUrl: {}
+	},
+	setup(__props) {
+		const handleDownloadClick = (format) => {
+			__props.eventBus.emit("ui:download:document", { format });
+		};
+		return (_ctx, _cache) => {
+			return [
+				"yaml",
+				"json",
+				"both"
+			].includes(__props.documentDownloadType) || __props.documentDownloadType === "direct" && __props.documentUrl ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["download-container group", { "download-both": __props.documentDownloadType === "both" }])
+			}, [
+				__props.documentDownloadType === "direct" && __props.documentUrl ? (openBlock(), createElementBlock("a", {
+					key: 0,
+					class: "download-link download-button",
+					href: __props.documentUrl
+				}, [..._cache[2] || (_cache[2] = [createElementVNode("span", null, " Download OpenAPI Document ", -1)])], 8, _hoisted_1)) : createCommentVNode("", true),
+				__props.documentDownloadType === "json" || __props.documentDownloadType === "both" ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					class: "download-button",
+					type: "button",
+					onClick: _cache[0] || (_cache[0] = withModifiers(() => handleDownloadClick("json"), ["prevent"]))
+				}, [_cache[4] || (_cache[4] = createElementVNode("span", null, " Download OpenAPI Document ", -1)), createVNode(Badge_default, { class: "extension hidden group-hover:flex" }, {
+					default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("json", -1)])]),
+					_: 1
+				})])) : createCommentVNode("", true),
+				__props.documentDownloadType === "yaml" || __props.documentDownloadType === "both" ? (openBlock(), createElementBlock("button", {
+					key: 2,
+					class: "download-button",
+					type: "button",
+					onClick: _cache[1] || (_cache[1] = withModifiers(() => handleDownloadClick("yaml"), ["prevent"]))
+				}, [_cache[6] || (_cache[6] = createElementVNode("span", null, " Download OpenAPI Document ", -1)), createVNode(Badge_default, { class: "extension hidden group-hover:flex" }, {
+					default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("yaml", -1)])]),
+					_: 1
+				})])) : createCommentVNode("", true)
+			], 2)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { DownloadLink_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DownloadLink.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadLink.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/DownloadLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ApiReferenceConfiguration } from '@scalar/types/api-reference'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\n\nimport Badge from '@/components/Badge/Badge.vue'\n\nconst { eventBus, documentDownloadType, documentUrl } = defineProps<{\n  /** The document download type. */\n  documentDownloadType: ApiReferenceConfiguration['documentDownloadType']\n  /** The event bus for the handling all events. */\n  eventBus: WorkspaceEventBus\n  /**\n   * URL of the OpenAPI document. Required when documentDownloadType is 'direct'\n   * so the link can point to the document.\n   */\n  documentUrl?: string\n}>()\n\n// The id is retrieved at the layout level.\nconst handleDownloadClick = (format: 'json' | 'yaml') => {\n  eventBus.emit('ui:download:document', { format })\n}\n</script>\n<template>\n  <div\n    v-if=\"\n      ['yaml', 'json', 'both'].includes(documentDownloadType) ||\n      (documentDownloadType === 'direct' && documentUrl)\n    \"\n    class=\"download-container group\"\n    :class=\"{\n      'download-both': documentDownloadType === 'both',\n    }\">\n    <!-- Direct link to the document -->\n    <a\n      v-if=\"documentDownloadType === 'direct' && documentUrl\"\n      class=\"download-link download-button\"\n      :href=\"documentUrl\">\n      <span> Download OpenAPI Document </span>\n    </a>\n\n    <!-- JSON  -->\n    <button\n      v-if=\"documentDownloadType === 'json' || documentDownloadType === 'both'\"\n      class=\"download-button\"\n      type=\"button\"\n      @click.prevent=\"() => handleDownloadClick('json')\">\n      <span> Download OpenAPI Document </span>\n      <Badge class=\"extension hidden group-hover:flex\">json</Badge>\n    </button>\n\n    <!-- YAML -->\n    <button\n      v-if=\"documentDownloadType === 'yaml' || documentDownloadType === 'both'\"\n      class=\"download-button\"\n      type=\"button\"\n      @click.prevent=\"() => handleDownloadClick('yaml')\">\n      <span> Download OpenAPI Document </span>\n      <Badge class=\"extension hidden group-hover:flex\">yaml</Badge>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n@reference '@/style.css';\n\n.download-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin: 0 0.5px 8px;\n  position: relative;\n  width: fit-content;\n  z-index: 1;\n}\n\n.download-container:has(:focus-visible)::before,\n.download-container.download-both:hover::before {\n  content: '';\n  width: calc(100% + 24px);\n  height: 90px;\n  position: absolute;\n  top: -11px;\n  left: -12px;\n  border-radius: var(--scalar-radius-lg);\n  box-shadow: var(--scalar-shadow-2);\n  pointer-events: none;\n  background: var(--scalar-background-1);\n}\n\n.download-button {\n  color: var(--scalar-link-color);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  height: fit-content;\n  padding: 0;\n  position: relative;\n  white-space: nowrap !important;\n\n  outline: none;\n}\n\n.download-button::before {\n  border-radius: var(--scalar-radius);\n  content: '';\n  height: calc(100% + 16px);\n  left: -9px;\n  position: absolute;\n  top: -8px;\n  width: calc(100% + 18px);\n}\n\n.download-button:last-of-type::before {\n  width: calc(100% + 15px);\n}\n\n.download-button:hover::before {\n  background: var(--scalar-background-2);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.download-button:focus-visible::before {\n  background: var(--scalar-background-2);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  @apply outline;\n}\n\n.download-button span {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n\n  text-decoration: var(--scalar-text-decoration);\n  color: var(--font-color);\n  font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n  text-underline-offset: 0.25rem;\n  text-decoration-thickness: 1px;\n  text-decoration-color: color-mix(in srgb, var(--font-color) 30%, transparent);\n  align-items: center;\n  display: flex;\n  gap: 6px;\n  line-height: 1.625;\n  z-index: 1;\n}\n\n.download-button:hover span {\n  text-decoration-color: var(--scalar-color-1, currentColor);\n  color: var(--scalar-link-color-hover, var(--scalar-color-accent));\n  -webkit-text-decoration: var(--scalar-text-decoration-hover);\n  text-decoration: var(--scalar-text-decoration-hover);\n}\n\n/* Second button displayed when hovering over the download container */\n.download-button:nth-of-type(2) {\n  @apply sr-only;\n}\n\n.download-container:has(:focus-visible) .download-button:nth-of-type(2),\n.download-container:hover .download-button:nth-of-type(2) {\n  @apply not-sr-only;\n\n  position: absolute;\n  top: 42px;\n}\n\n.extension {\n  z-index: 1;\n  background: var(--scalar-link-color, var(--scalar-color-accent));\n  color: var(--scalar-background-1);\n}\n.download-container:has(:focus-visible) .extension,\n.download-container:hover .extension {\n  opacity: 1;\n}\n\n.download-link {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  --font-visited: var(--scalar-link-color-visited, var(--scalar-color-2));\n\n  text-decoration: var(--scalar-text-decoration);\n  color: var(--font-color);\n  font-weight: var(--scalar-link-font-weight, var(--scalar-semibold));\n  text-underline-offset: 0.25rem;\n  text-decoration-thickness: 1px;\n  text-decoration-color: color-mix(in srgb, var(--font-color) 30%, transparent);\n}\n\n.download-link:hover {\n  --font-color: var(--scalar-link-color, var(--scalar-color-accent));\n  text-decoration-color: var(--font-color);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EAmBA,MAAM,uBAAuB,WAA4B;AACvD,WAAA,SAAS,KAAK,wBAAwB,EAAE,QAAQ,CAAA;;;;;;;KAKR,SAAS,QAAA,qBAAoB,IAAY,QAAA,yBAAoB,YAAiB,QAAA,eAAA,WAAA,EADtH,mBAoCM,OAAA;;IA/BJ,OAAK,eAAA,CAAC,4BAA0B,EAAA,iBACC,QAAA,yBAAoB,QAAA,CAAA,CAAA;;IAK7C,QAAA,yBAAoB,YAAiB,QAAA,eAAA,WAAA,EAD7C,mBAKI,KAAA;;KAHF,OAAM;KACL,MAAM,QAAA;sCACP,mBAAwC,QAAA,MAAlC,+BAA2B,GAAA,CAAA,EAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;IAK3B,QAAA,yBAAoB,UAAe,QAAA,yBAAoB,UAAA,WAAA,EAD/D,mBAOS,UAAA;;KALP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAgB,oBAAmB,OAAA,EAAA,CAAA,UAAA,CAAA;kCACzC,mBAAwC,QAAA,MAAlC,+BAA2B,GAAA,GACjC,YAA6D,eAAA,EAAtD,OAAM,qCAAmC,EAAA;4BAAK,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAJ,QAAI,GAAA,CAAA,EAAA,CAAA;;;IAK/C,QAAA,yBAAoB,UAAe,QAAA,yBAAoB,UAAA,WAAA,EAD/D,mBAOS,UAAA;;KALP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAgB,oBAAmB,OAAA,EAAA,CAAA,UAAA,CAAA;kCACzC,mBAAwC,QAAA,MAAlC,+BAA2B,GAAA,GACjC,YAA6D,eAAA,EAAtD,OAAM,qCAAmC,EAAA;4BAAK,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAJ,QAAI,GAAA,CAAA,EAAA,CAAA"}

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

@@ -0,0 +1,7 @@
+import InfoBlock_vue_vue_type_script_setup_true_lang_default from "./InfoBlock.vue.script.js";
+//#region src/blocks/scalar-info-block/components/InfoBlock.vue
+var InfoBlock_default = InfoBlock_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { InfoBlock_default as default };
+
+//# sourceMappingURL=InfoBlock.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfoBlock.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/InfoBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ApiReferenceConfiguration } from '@scalar/types/api-reference'\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'\nimport { computed } from 'vue'\n\nimport DownloadLink from '@/blocks/scalar-info-block/components/DownloadLink.vue'\n\nimport IntroductionCard from './IntroductionCard.vue'\nimport IntroductionLayout from './IntroductionLayout.vue'\n\nconst {\n  headingSlugGenerator,\n  layout,\n  eventBus,\n  documentDownloadType = 'both',\n  documentUrl,\n} = defineProps<{\n  /** Optional unique identifier for the info block. */\n  id?: string\n  /** Original openapi version of the input document */\n  oasVersion?: string\n  /** The Info object from the OpenAPI document. */\n  info: InfoObject | undefined\n  /** The external documentation object from the OpenAPI document, if present. */\n  externalDocs?: ExternalDocumentationObject\n  /** OpenAPI extension fields at the document level. */\n  documentExtensions?: Record<string, unknown>\n  /** OpenAPI extension fields at the info object level. */\n  infoExtensions?: Record<string, unknown>\n  /** The event bus for the handling all events. */\n  eventBus: WorkspaceEventBus\n  /** Heading id generator for Markdown headings */\n  headingSlugGenerator: (heading: Heading) => string\n  /** Determines the layout style for the info block ('modern' or 'classic'). */\n  layout?: 'modern' | 'classic'\n  /** The document download type. */\n  documentDownloadType?: ApiReferenceConfiguration['documentDownloadType']\n  /** URL of the OpenAPI document. Used when documentDownloadType is 'direct'. */\n  documentUrl?: string\n}>()\n\n/**\n * Put the selectors in\n * - the after slot for classic layout,\n * - and the aside slot for other layouts.\n */\nconst introCardsSlot = computed(() =>\n  layout === 'classic' ? 'after' : 'aside',\n)\n</script>\n\n<template>\n  <IntroductionLayout\n    :id\n    :documentExtensions\n    :eventBus=\"eventBus\"\n    :externalDocs\n    :headingSlugGenerator\n    :info\n    :infoExtensions\n    :oasVersion>\n    <template #[introCardsSlot]>\n      <IntroductionCard :row=\"layout === 'classic'\">\n        <slot name=\"selectors\" />\n      </IntroductionCard>\n    </template>\n    <template #download-link>\n      <DownloadLink\n        :documentDownloadType\n        :documentUrl\n        :eventBus />\n    </template>\n  </IntroductionLayout>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,69 @@
+import DownloadLink_default from "./DownloadLink.vue.js";
+import IntroductionCard_default from "./IntroductionCard.vue.js";
+import IntroductionLayout_default from "./IntroductionLayout.vue.js";
+import { computed, createBlock, createVNode, defineComponent, openBlock, renderSlot, withCtx } from "vue";
+//#region src/blocks/scalar-info-block/components/InfoBlock.vue?vue&type=script&setup=true&lang.ts
+var InfoBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "InfoBlock",
+	props: {
+		id: {},
+		oasVersion: {},
+		info: {},
+		externalDocs: {},
+		documentExtensions: {},
+		infoExtensions: {},
+		eventBus: {},
+		headingSlugGenerator: { type: Function },
+		layout: {},
+		documentDownloadType: { default: "both" },
+		documentUrl: {}
+	},
+	setup(__props) {
+		/**
+		* Put the selectors in
+		* - the after slot for classic layout,
+		* - and the aside slot for other layouts.
+		*/
+		const introCardsSlot = computed(() => __props.layout === "classic" ? "after" : "aside");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(IntroductionLayout_default, {
+				id: __props.id,
+				documentExtensions: __props.documentExtensions,
+				eventBus: __props.eventBus,
+				externalDocs: __props.externalDocs,
+				headingSlugGenerator: __props.headingSlugGenerator,
+				info: __props.info,
+				infoExtensions: __props.infoExtensions,
+				oasVersion: __props.oasVersion
+			}, {
+				[introCardsSlot.value]: withCtx(() => [createVNode(IntroductionCard_default, { row: __props.layout === "classic" }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "selectors")]),
+					_: 3
+				}, 8, ["row"])]),
+				"download-link": withCtx(() => [createVNode(DownloadLink_default, {
+					documentDownloadType: __props.documentDownloadType,
+					documentUrl: __props.documentUrl,
+					eventBus: __props.eventBus
+				}, null, 8, [
+					"documentDownloadType",
+					"documentUrl",
+					"eventBus"
+				])]),
+				_: 2
+			}, 1032, [
+				"id",
+				"documentExtensions",
+				"eventBus",
+				"externalDocs",
+				"headingSlugGenerator",
+				"info",
+				"infoExtensions",
+				"oasVersion"
+			]);
+		};
+	}
+});
+//#endregion
+export { InfoBlock_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=InfoBlock.vue.script.js.map