@scalar/api-reference 1.52.0 → 1.52.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @scalar/api-reference
 
+## 1.52.2
+
+### Patch Changes
+
+- [#8827](https://github.com/scalar/scalar/pull/8827): chore: removed old client v1 code
+- [#8791](https://github.com/scalar/scalar/pull/8791): fix test requests so exploded array query parameters keep all values instead of collapsing to the last one
+- [#8863](https://github.com/scalar/scalar/pull/8863): chore: updated imports to new api client version
+- [#8780](https://github.com/scalar/scalar/pull/8780): fix: run intersect for the top of the document
+- [#8825](https://github.com/scalar/scalar/pull/8825): chore: moving files around in preparation for the big deletion of client v1
+- [#8831](https://github.com/scalar/scalar/pull/8831): refactor(api-reference): remove search index ts-expect-error by using typed collection access
+- [#8784](https://github.com/scalar/scalar/pull/8784): fix: correctly display schema names
+
+## 1.52.1
+
+### Patch Changes
+
+- [#8769](https://github.com/scalar/scalar/pull/8769): feat(themes): add Tailwind v3 transform reset
+- [#8767](https://github.com/scalar/scalar/pull/8767): feat(api-reference): collapse truncated descriptions
+- [#8776](https://github.com/scalar/scalar/pull/8776): fix: hide content type switch when there is no content
+- [#8777](https://github.com/scalar/scalar/pull/8777): fix(api-reference): set example z-index to context layer
+- [#8770](https://github.com/scalar/scalar/pull/8770): fix: generate the response examples by removing the priority order
+
 ## 1.52.0
 
 ### Minor Changes

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

@@ -1,4 +1,4 @@
-import { type ClientOption, type ClientOptionGroup } from '@scalar/api-client/v2/blocks/operation-code-sample';
+import { type ClientOption, type ClientOptionGroup } from '@scalar/api-client/blocks/operation-code-sample';
 import type { AvailableClients } from '@scalar/types/snippetz';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
 type __VLS_Props = {

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":"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"}
+{"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,iDAAiD,CAAA;AAGxD,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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 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"]]);
+var ClientDropdown_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ClientDropdown_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-75d206b8"]]);
 //#endregion
 export { ClientDropdown_default as default };
 

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

@@ -1 +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":""}
+{"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/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

@@ -2,7 +2,7 @@ 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 { filterClientsByQuery, findClient } from "@scalar/api-client/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" };

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

@@ -1 +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"}
+{"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/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.d.ts

@@ -1,4 +1,4 @@
-import { type ClientOptionGroup } from '@scalar/api-client/v2/blocks/operation-code-sample';
+import { type ClientOptionGroup } from '@scalar/api-client/blocks/operation-code-sample';
 import type { AvailableClient } from '@scalar/snippetz';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
 import type { XScalarSdkInstallation } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-sdk-installation';
@@ -13,7 +13,7 @@ type __VLS_Props = {
     eventBus: WorkspaceEventBus;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    selectedClientOption: import("vue").ComputedRef<import("@scalar/api-client/v2/blocks/operation-code-sample").ClientOption | undefined>;
+    selectedClientOption: import("vue").ComputedRef<import("@scalar/api-client/blocks/operation-code-sample").ClientOption | undefined>;
 }, {}, {}, {}, 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;

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

@@ -1 +1 @@
-{"version":3,"file":"ClientSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"names":[],"mappings":"AAiNA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,oDAAoD,CAAA;AAE3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+EAA+E,CAAA;AAU3H,KAAK,WAAW,GAAG;IACjB,6CAA6C;IAC7C,sBAAsB,CAAC,EAAE,sBAAsB,CAAC,2BAA2B,CAAC,CAAA;IAC5E,yDAAyD;IACzD,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,yCAAyC;IACzC,cAAc,CAAC,EAAE,eAAe,CAAA;IAChC,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AA8RF,QAAA,MAAM,YAAY;;oPAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ClientSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"names":[],"mappings":"AAiNA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,iDAAiD,CAAA;AAExD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+EAA+E,CAAA;AAU3H,KAAK,WAAW,GAAG;IACjB,6CAA6C;IAC7C,sBAAsB,CAAC,EAAE,sBAAsB,CAAC,2BAA2B,CAAC,CAAA;IAC5E,yDAAyD;IACzD,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,yCAAyC;IACzC,cAAc,CAAC,EAAE,eAAe,CAAA;IAChC,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AA8RF,QAAA,MAAM,YAAY;;oPAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 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"]]);
+var ClientSelector_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ClientSelector_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c6251633"]]);
 //#endregion
 export { ClientSelector_default as default };
 

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

@@ -1 +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":""}
+{"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/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

@@ -3,7 +3,7 @@ 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";
+import { DEFAULT_CLIENT } from "@scalar/api-client/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,

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/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"}
+{"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, 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.d.ts

@@ -1,4 +1,4 @@
-import type { ClientOption, ClientOptionGroup } from '@scalar/api-client/v2/blocks/operation-code-sample';
+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;

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,oDAAoD,CAAA;AACzG,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,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"}

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/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"}
+{"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"}

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

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

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

@@ -34,7 +34,7 @@ var ServerSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
-				_cache[0] || (_cache[0] = createElementVNode("label", { class: "bg-b-2 flex h-8 items-center rounded-t-xl border border-b-0 px-3 py-2.5 font-medium" }, " Server ", -1)),
+				_cache[0] || (_cache[0] = createElementVNode("label", { class: "bg-b-2 flex h-8 items-center rounded-t-xl border-x border-t px-3 py-2.5 font-medium" }, " Server ", -1)),
 				createElementVNode("div", {
 					id: unref(id),
 					class: normalizeClass(["border", { "rounded-b-xl": !__props.selectedServer?.description && !__props.selectedServer?.variables }])
@@ -56,7 +56,7 @@ var ServerSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				}, null, 8, ["variables"]),
 				__props.selectedServer?.description ? (openBlock(), createBlock(unref(ScalarMarkdown), {
 					key: 0,
-					class: "text-c-3 rounded-b-xl border border-t-0 px-3 py-1.5",
+					class: "text-c-3 rounded-b-xl border-x border-b px-3 py-1.5",
 					value: __props.selectedServer.description
 				}, null, 8, ["value"])) : createCommentVNode("", true)
 			], 64);

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

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