@scalar/api-reference 1.60.0 → 1.62.0

package/dist/blocks/scalar-asyncapi-sidebar-filters-block/helpers/filter-async-api-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-async-api-navigation.js","names":[],"sources":["../../../../src/blocks/scalar-asyncapi-sidebar-filters-block/helpers/filter-async-api-navigation.ts"],"sourcesContent":["import type { AsyncApiDocument } from '@scalar/types/asyncapi/3.1'\nimport {\n  ALL,\n  type AsyncApiReachabilityContext,\n  createReachabilityContext,\n  getOperationReachability,\n} from '@scalar/workspace-store/channel-example'\nimport { getResolvedRef, mergeSiblingReferences } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation'\n\n/** The currently selected sidebar filters. Empty / sentinel values disable a filter. */\ntype AsyncApiNavigationFilter = {\n  /** Selected protocol id, or {@link ALL} / undefined for no protocol filter. */\n  protocol?: string\n  /** Selected server name, or {@link ALL} / undefined for no server filter. */\n  server?: string\n}\n\n/** Whether the filter would keep every entry, so the tree can be returned untouched. */\nconst isNoopFilter = ({ protocol, server }: AsyncApiNavigationFilter): boolean =>\n  (!protocol || protocol === ALL) && (!server || server === ALL)\n\n/** Whether a selection (protocol or server) keeps an operation, given the set it is reachable through. */\nconst selectionMatches = (reachable: Set<string>, selected: string | undefined): boolean =>\n  !selected || selected === ALL || reachable.has(selected)\n\n/**\n * Filters one navigation entry against the selected protocol/server.\n *\n * - `asyncapi-operation` — kept only when the operation matches both filters.\n * - `asyncapi-channel` / `tag` — recursed into, then dropped when they have no\n *   children left (so empty channels and tags disappear from the sidebar).\n * - Everything else (description, models, schemas) passes through unchanged.\n *\n * `context` carries the document-level lookups so they are built once per filter\n * pass rather than recomputed for every operation.\n *\n * Returns `null` when the entry should be removed.\n */\nconst filterEntry = (\n  entry: TraversedEntry,\n  document: AsyncApiDocument,\n  filter: AsyncApiNavigationFilter,\n  context: AsyncApiReachabilityContext,\n): TraversedEntry | null => {\n  if (entry.type === 'asyncapi-operation') {\n    const operationNode = document.operations?.[entry.operationName]\n    // If the operation can't be resolved we keep it rather than hide it by accident.\n    if (!operationNode) {\n      return entry\n    }\n\n    // Resolve the same way the navigation traversal did, so sibling overrides\n    // (e.g. an inline `channel` alongside a `$ref`) are honored consistently.\n    const operation = getResolvedRef(operationNode, mergeSiblingReferences)\n\n    // Resolve the operation's reachability once, then test both selections against it.\n    const { protocols, serverNames } = getOperationReachability(document, operation, context)\n    const keep = selectionMatches(protocols, filter.protocol) && selectionMatches(serverNames, filter.server)\n\n    return keep ? entry : null\n  }\n\n  if (entry.type === 'asyncapi-channel' || entry.type === 'tag') {\n    const originalChildren = entry.children ?? []\n    const children = originalChildren.flatMap((child) => {\n      const filtered = filterEntry(child, document, filter, context)\n      return filtered ? [filtered] : []\n    })\n\n    // Drop a container that had children but lost them all to the filter.\n    if (originalChildren.length > 0 && children.length === 0) {\n      return null\n    }\n\n    return { ...entry, children }\n  }\n\n  return entry\n}\n\n/**\n * Filters the AsyncAPI sidebar tree by the selected protocol and/or server.\n *\n * Returns the original entries untouched when no filter is active, so OpenAPI\n * documents and the unfiltered AsyncAPI case pay no cost.\n */\nexport const filterAsyncApiNavigation = (\n  entries: TraversedEntry[],\n  document: AsyncApiDocument,\n  filter: AsyncApiNavigationFilter,\n): TraversedEntry[] => {\n  if (isNoopFilter(filter)) {\n    return entries\n  }\n\n  // Build the document-level reachability lookups once for the whole pass.\n  const context = createReachabilityContext(document)\n\n  return entries.flatMap((entry) => {\n    const filtered = filterEntry(entry, document, filter, context)\n    return filtered ? [filtered] : []\n  })\n}\n"],"mappings":";;;;AAmBA,IAAM,gBAAgB,EAAE,UAAU,cAC/B,CAAC,YAAY,aAAa,SAAS,CAAC,UAAU,WAAW;;AAG5D,IAAM,oBAAoB,WAAwB,aAChD,CAAC,YAAY,aAAa,OAAO,UAAU,IAAI,SAAS;;;;;;;;;;;;;;AAe1D,IAAM,eACJ,OACA,UACA,QACA,YAC0B;AAC1B,KAAI,MAAM,SAAS,sBAAsB;EACvC,MAAM,gBAAgB,SAAS,aAAa,MAAM;AAElD,MAAI,CAAC,cACH,QAAO;EAQT,MAAM,EAAE,WAAW,gBAAgB,yBAAyB,UAH1C,eAAe,eAAe,uBAAuB,EAGU,QAAQ;AAGzF,SAFa,iBAAiB,WAAW,OAAO,SAAS,IAAI,iBAAiB,aAAa,OAAO,OAAO,GAE3F,QAAQ;;AAGxB,KAAI,MAAM,SAAS,sBAAsB,MAAM,SAAS,OAAO;EAC7D,MAAM,mBAAmB,MAAM,YAAY,EAAE;EAC7C,MAAM,WAAW,iBAAiB,SAAS,UAAU;GACnD,MAAM,WAAW,YAAY,OAAO,UAAU,QAAQ,QAAQ;AAC9D,UAAO,WAAW,CAAC,SAAS,GAAG,EAAE;IACjC;AAGF,MAAI,iBAAiB,SAAS,KAAK,SAAS,WAAW,EACrD,QAAO;AAGT,SAAO;GAAE,GAAG;GAAO;GAAU;;AAG/B,QAAO;;;;;;;;AAST,IAAa,4BACX,SACA,UACA,WACqB;AACrB,KAAI,aAAa,OAAO,CACtB,QAAO;CAIT,MAAM,UAAU,0BAA0B,SAAS;AAEnD,QAAO,QAAQ,SAAS,UAAU;EAChC,MAAM,WAAW,YAAY,OAAO,UAAU,QAAQ,QAAQ;AAC9D,SAAO,WAAW,CAAC,SAAS,GAAG,EAAE;GACjC"}

package/dist/blocks/scalar-asyncapi-sidebar-filters-block/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AsyncApiSidebarFilters } from './components/AsyncApiSidebarFilters.vue.js';
+export { filterAsyncApiNavigation } from './helpers/filter-async-api-navigation.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/scalar-asyncapi-sidebar-filters-block/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/scalar-asyncapi-sidebar-filters-block/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAC3F,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAA"}

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/blocks/operation-code-sample';
+import { type ClientOption, type ClientOptionGroup } from '@scalar/blocks/code-example';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
 type __VLS_Props = {
     /** Client options */

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":"AA4PA,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EAEvB,MAAM,iDAAiD,CAAA;AAKxD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAKvE,KAAK,WAAW,GAAG;IACf,qBAAqB;IACrB,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,+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":"AAgQA,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EAEvB,MAAM,6BAA6B,CAAA;AAKpC,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAMvE,KAAK,WAAW,GAAG;IACf,qBAAqB;IACrB,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,+BAA+B;IAC/B,eAAe,EAAE,YAAY,EAAE,CAAA;IAC/B,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AAyPJ,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-c2617b43"]]);
+var ClientDropdown_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ClientDropdown_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-783c0ba4"]]);
 //#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/blocks/operation-code-sample'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport type { 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 (a built-in client id or a custom sample id) */\n    selectedClient?: string\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/blocks/code-example'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport type { 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'\nimport { useLocalization } from '@/features/localization'\n\nconst { clientOptions, featuredClients, eventBus, selectedClient } =\n  defineProps<{\n    /** Client options */\n    clientOptions: ClientOptionGroup[]\n    /** The currently selected Http Client (a built-in client id or a custom sample id) */\n    selectedClient?: string\n    /** List of featured clients */\n    featuredClients: ClientOption[]\n    /** Event bus */\n    eventBus: WorkspaceEventBus\n  }>()\n\nconst containerRef = ref<HTMLElement>()\nconst { translate } = useLocalization()\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          {{ translate('clientLibraries.more') }}\n        </span>\n        <span class=\"sr-only\">\n          {{ translate('clientLibraries.selectAll') }}\n        </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

@@ -1,7 +1,8 @@
+import { useLocalization } from "../../../features/localization/use-localization.js";
 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 { filterClientsByQuery, findClient } from "@scalar/api-client/blocks/operation-code-sample";
+import { filterClientsByQuery, findClient } from "@scalar/blocks/code-example";
 import { ScalarCombobox } from "@scalar/components/combobox";
 import { ScalarIcon } from "@scalar/components/icon";
 import { freezeElement } from "@scalar/helpers/dom/freeze-element";
@@ -24,6 +25,7 @@ var _hoisted_4 = {
 	key: 0,
 	class: "client-libraries-text client-libraries-text-more"
 };
+var _hoisted_5 = { class: "sr-only" };
 var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ClientDropdown",
 	props: {
@@ -34,6 +36,7 @@ var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	},
 	setup(__props) {
 		const containerRef = ref();
+		const { translate } = useLocalization();
 		/**
 		* Icons have longer names to appear in icon searches, e.g. "javascript-js" instead of just "javascript". This function
 		* maps the language key to the icon name.
@@ -89,8 +92,8 @@ var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						fill: "currentColor",
 						"fill-rule": "nonzero"
 					}, [createElementVNode("path", { d: "M10.71 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M21.13 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M31.55 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0" })], -1)])]))]),
-					__props.clientOptions.length ? (openBlock(), createElementBlock("span", _hoisted_4, " More ")) : createCommentVNode("", true),
-					_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Select from all clients", -1))
+					__props.clientOptions.length ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(translate)("clientLibraries.more")), 1)) : createCommentVNode("", true),
+					createElementVNode("span", _hoisted_5, toDisplayString(unref(translate)("clientLibraries.selectAll")), 1)
 				], 2)]),
 				_: 1
 			}, 8, [

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/blocks/operation-code-sample'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport type { 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 (a built-in client id or a custom sample id) */\n    selectedClient?: string\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,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/blocks/code-example'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { freezeElement } from '@scalar/helpers/dom/freeze-element'\nimport type { 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'\nimport { useLocalization } from '@/features/localization'\n\nconst { clientOptions, featuredClients, eventBus, selectedClient } =\n  defineProps<{\n    /** Client options */\n    clientOptions: ClientOptionGroup[]\n    /** The currently selected Http Client (a built-in client id or a custom sample id) */\n    selectedClient?: string\n    /** List of featured clients */\n    featuredClients: ClientOption[]\n    /** Event bus */\n    eventBus: WorkspaceEventBus\n  }>()\n\nconst containerRef = ref<HTMLElement>()\nconst { translate } = useLocalization()\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          {{ translate('clientLibraries.more') }}\n        </span>\n        <span class=\"sr-only\">\n          {{ translate('clientLibraries.selectAll') }}\n        </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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,eAAe,KAAiB;EACtC,MAAM,EAAE,cAAc,iBAAgB;;;;;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,mBAyEM,OAAA;aAxEA;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,YAmDiB,MAAA,eAAA,EAAA;IAlDd,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;;2BA4C9B,CA3CT,mBA2CS,UAAA;KA1CP,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,YAIO,gBADF,MAAA,UAAS,CAAA,uBAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAEd,mBAEO,QAFP,YAEO,gBADF,MAAA,UAAS,CAAA,4BAAA,CAAA,EAAA,EAAA"}

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

@@ -1,4 +1,4 @@
-import { type ClientOptionGroup } from '@scalar/api-client/blocks/operation-code-sample';
+import { type ClientOptionGroup } from '@scalar/blocks/code-example';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
 type __VLS_Props = {
     /** Computed list of all available Http Client options */
@@ -9,7 +9,7 @@ type __VLS_Props = {
     eventBus: WorkspaceEventBus;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    selectedClientOption: import("vue").ComputedRef<import("@scalar/api-client/blocks/operation-code-sample").ClientOption | undefined>;
+    selectedClientOption: import("vue").ComputedRef<import("@scalar/blocks/code-example").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":"AAqLA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,iDAAiD,CAAA;AACxD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAUvE,KAAK,WAAW,GAAG;IACjB,yDAAyD;IACzD,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AAwOF,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":"AAuLA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAWvE,KAAK,WAAW,GAAG;IACjB,yDAAyD;IACzD,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AA2OF,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-0769d07b"]]);
+var ClientSelector_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ClientSelector_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d02a9cbe"]]);
 //#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/blocks/operation-code-sample'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref, useId, useTemplateRef, watch } from 'vue'\n\nimport {\n  getFeaturedClients,\n  isFeaturedClient,\n} from '@/blocks/scalar-client-selector-block/helpers/featured-clients'\n\nimport ClientDropdown from './ClientDropdown.vue'\n\nconst {\n  clientOptions,\n  eventBus,\n  selectedClient = DEFAULT_CLIENT,\n} = defineProps<{\n  /** Computed list of all available Http Client options */\n  clientOptions: ClientOptionGroup[]\n  /** The currently selected Http Client (a built-in client id or a custom sample id) */\n  selectedClient?: string\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\nconst morePanel = useId()\n\n/**\n * Whether a selection is a custom code sample (e.g. `custom/python`) rather than\n * a built-in client. Custom samples are matched by the `custom/` id prefix, which\n * mirrors the `^custom/` pattern enforced on the stored default client.\n */\nconst isCustomSelection = (client: string | undefined) =>\n  Boolean(client?.startsWith('custom/'))\n\n/**\n * The generic client this selector actually displays.\n *\n * The introduction selector only represents the built-in HTTP clients. Custom\n * code samples are operation-specific and \"always just have the generic\n * clients\", so when one is selected globally we keep showing the last generic\n * client here instead of switching to (and failing to render) a custom sample.\n */\nconst activeClient = ref(\n  isCustomSelection(selectedClient) ? DEFAULT_CLIENT : selectedClient,\n)\n\nwatch(\n  () => selectedClient,\n  (newClient) => {\n    if (!isCustomSelection(newClient)) {\n      activeClient.value = newClient\n    }\n  },\n)\n\n/** Grab the option for the currently selected Http Client */\nconst selectedClientOption = computed(\n  () =>\n    clientOptions.flatMap(\n      (optionGroup) =>\n        optionGroup.options.find(\n          (option) => option.id === activeClient.value,\n        ) ?? [],\n    )[0],\n)\n\n/** List of featured clients */\nconst featuredClients = computed(() => getFeaturedClients(clientOptions))\n\n/** Currently selected tab index */\nconst tabIndex = computed(() =>\n  featuredClients.value.findIndex(\n    (featuredClient) => activeClient.value === featuredClient.id,\n  ),\n)\n\nconst wrapper = useTemplateRef('wrapper-ref')\n\n/** Emit the selected client event on tab */\nconst onTabSelect = (i: number) => {\n  const client = featuredClients.value[i]\n\n  if (!client || !wrapper.value) {\n    return\n  }\n\n  eventBus.emit('workspace:update:selected-client', client.id)\n}\n\ndefineExpose({\n  selectedClientOption,\n})\n</script>\n<template>\n  <div\n    v-if=\"clientOptions.length\"\n    ref=\"wrapper-ref\">\n    <TabGroup\n      manual\n      :selectedIndex=\"tabIndex\"\n      @change=\"onTabSelect\">\n      <div\n        :id=\"headingId\"\n        class=\"client-libraries-heading\">\n        Client Libraries\n      </div>\n\n      <!-- Tabs -->\n      <TabList\n        :aria-labelledby=\"headingId\"\n        class=\"client-libraries-list\">\n        <ClientDropdown\n          :clientOptions\n          :eventBus\n          :featuredClients\n          :morePanel\n          :selectedClient=\"activeClient\" />\n      </TabList>\n\n      <!-- Content -->\n      <TabPanels>\n        <template v-if=\"isFeaturedClient(activeClient)\">\n          <TabPanel\n            v-for=\"client in featuredClients\"\n            :key=\"client.id\"\n            class=\"selected-client card-footer -outline-offset-2\">\n            {{ client.title }}\n          </TabPanel>\n        </template>\n        <div\n          v-else\n          :id=\"morePanel\"\n          class=\"selected-client card-footer -outline-offset-2\"\n          role=\"tabpanel\"\n          tabindex=\"0\">\n          {{ selectedClientOption?.title }}\n        </div>\n      </TabPanels>\n    </TabGroup>\n  </div>\n</template>\n<style scoped>\n.selected-client {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  font-family: var(--scalar-font-code);\n  padding: 9px 12px;\n  border-top: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n  min-height: fit-content;\n}\n.client-libraries-heading {\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-medium);\n  color: var(--scalar-color-1);\n  padding: 9px 12px;\n  background-color: var(--scalar-background-2);\n  display: flex;\n  align-items: center;\n  max-height: 32px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top-left-radius: var(--scalar-radius-xl);\n  border-top-right-radius: var(--scalar-radius-xl);\n}\n</style>\n"],"mappings":""}
+{"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/blocks/code-example'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref, useId, useTemplateRef, watch } from 'vue'\n\nimport {\n  getFeaturedClients,\n  isFeaturedClient,\n} from '@/blocks/scalar-client-selector-block/helpers/featured-clients'\nimport { useLocalization } from '@/features/localization'\n\nimport ClientDropdown from './ClientDropdown.vue'\n\nconst {\n  clientOptions,\n  eventBus,\n  selectedClient = DEFAULT_CLIENT,\n} = defineProps<{\n  /** Computed list of all available Http Client options */\n  clientOptions: ClientOptionGroup[]\n  /** The currently selected Http Client (a built-in client id or a custom sample id) */\n  selectedClient?: string\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\nconst morePanel = useId()\nconst { translate } = useLocalization()\n\n/**\n * Whether a selection is a custom code sample (e.g. `custom/python`) rather than\n * a built-in client. Custom samples are matched by the `custom/` id prefix, which\n * mirrors the `^custom/` pattern enforced on the stored default client.\n */\nconst isCustomSelection = (client: string | undefined) =>\n  Boolean(client?.startsWith('custom/'))\n\n/**\n * The generic client this selector actually displays.\n *\n * The introduction selector only represents the built-in HTTP clients. Custom\n * code samples are operation-specific and \"always just have the generic\n * clients\", so when one is selected globally we keep showing the last generic\n * client here instead of switching to (and failing to render) a custom sample.\n */\nconst activeClient = ref(\n  isCustomSelection(selectedClient) ? DEFAULT_CLIENT : selectedClient,\n)\n\nwatch(\n  () => selectedClient,\n  (newClient) => {\n    if (!isCustomSelection(newClient)) {\n      activeClient.value = newClient\n    }\n  },\n)\n\n/** Grab the option for the currently selected Http Client */\nconst selectedClientOption = computed(\n  () =>\n    clientOptions.flatMap(\n      (optionGroup) =>\n        optionGroup.options.find(\n          (option) => option.id === activeClient.value,\n        ) ?? [],\n    )[0],\n)\n\n/** List of featured clients */\nconst featuredClients = computed(() => getFeaturedClients(clientOptions))\n\n/** Currently selected tab index */\nconst tabIndex = computed(() =>\n  featuredClients.value.findIndex(\n    (featuredClient) => activeClient.value === featuredClient.id,\n  ),\n)\n\nconst wrapper = useTemplateRef('wrapper-ref')\n\n/** Emit the selected client event on tab */\nconst onTabSelect = (i: number) => {\n  const client = featuredClients.value[i]\n\n  if (!client || !wrapper.value) {\n    return\n  }\n\n  eventBus.emit('workspace:update:selected-client', client.id)\n}\n\ndefineExpose({\n  selectedClientOption,\n})\n</script>\n<template>\n  <div\n    v-if=\"clientOptions.length\"\n    ref=\"wrapper-ref\">\n    <TabGroup\n      manual\n      :selectedIndex=\"tabIndex\"\n      @change=\"onTabSelect\">\n      <div\n        :id=\"headingId\"\n        class=\"client-libraries-heading\">\n        {{ translate('clientLibraries.heading') }}\n      </div>\n\n      <!-- Tabs -->\n      <TabList\n        :aria-labelledby=\"headingId\"\n        class=\"client-libraries-list\">\n        <ClientDropdown\n          :clientOptions\n          :eventBus\n          :featuredClients\n          :morePanel\n          :selectedClient=\"activeClient\" />\n      </TabList>\n\n      <!-- Content -->\n      <TabPanels>\n        <template v-if=\"isFeaturedClient(activeClient)\">\n          <TabPanel\n            v-for=\"client in featuredClients\"\n            :key=\"client.id\"\n            class=\"selected-client card-footer -outline-offset-2\">\n            {{ client.title }}\n          </TabPanel>\n        </template>\n        <div\n          v-else\n          :id=\"morePanel\"\n          class=\"selected-client card-footer -outline-offset-2\"\n          role=\"tabpanel\"\n          tabindex=\"0\">\n          {{ selectedClientOption?.title }}\n        </div>\n      </TabPanels>\n    </TabGroup>\n  </div>\n</template>\n<style scoped>\n.selected-client {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  font-family: var(--scalar-font-code);\n  padding: 9px 12px;\n  border-top: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n  min-height: fit-content;\n}\n.client-libraries-heading {\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-medium);\n  color: var(--scalar-color-1);\n  padding: 9px 12px;\n  background-color: var(--scalar-background-2);\n  display: flex;\n  align-items: center;\n  max-height: 32px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top-left-radius: var(--scalar-radius-xl);\n  border-top-right-radius: var(--scalar-radius-xl);\n}\n</style>\n"],"mappings":""}

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

@@ -1,8 +1,9 @@
+import { useLocalization } from "../../../features/localization/use-localization.js";
 import { getFeaturedClients, isFeaturedClient } from "../helpers/featured-clients.js";
 import ClientDropdown_default from "./ClientDropdown.vue.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, toDisplayString, unref, useId, useTemplateRef, watch, withCtx } from "vue";
 import { TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/vue";
-import { DEFAULT_CLIENT } from "@scalar/api-client/blocks/operation-code-sample";
+import { DEFAULT_CLIENT } from "@scalar/blocks/code-example";
 //#region src/blocks/scalar-client-selector-block/components/ClientSelector.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -20,6 +21,7 @@ var ClientSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	setup(__props, { expose: __expose }) {
 		const headingId = useId();
 		const morePanel = useId();
+		const { translate } = useLocalization();
 		/**
 		* Whether a selection is a custom code sample (e.g. `custom/python`) rather than
 		* a built-in client. Custom samples are matched by the `custom/` id prefix, which
@@ -62,7 +64,7 @@ var ClientSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					createElementVNode("div", {
 						id: unref(headingId),
 						class: "client-libraries-heading"
-					}, " Client Libraries ", 8, _hoisted_2),
+					}, toDisplayString(unref(translate)("clientLibraries.heading")), 9, _hoisted_2),
 					createVNode(unref(TabList), {
 						"aria-labelledby": unref(headingId),
 						class: "client-libraries-list"

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

@@ -1 +1 @@
-{"version":3,"file":"ClientSelector.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'\nimport {\n  DEFAULT_CLIENT,\n  type ClientOptionGroup,\n} from '@scalar/api-client/blocks/operation-code-sample'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref, useId, useTemplateRef, watch } from 'vue'\n\nimport {\n  getFeaturedClients,\n  isFeaturedClient,\n} from '@/blocks/scalar-client-selector-block/helpers/featured-clients'\n\nimport ClientDropdown from './ClientDropdown.vue'\n\nconst {\n  clientOptions,\n  eventBus,\n  selectedClient = DEFAULT_CLIENT,\n} = defineProps<{\n  /** Computed list of all available Http Client options */\n  clientOptions: ClientOptionGroup[]\n  /** The currently selected Http Client (a built-in client id or a custom sample id) */\n  selectedClient?: string\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\nconst morePanel = useId()\n\n/**\n * Whether a selection is a custom code sample (e.g. `custom/python`) rather than\n * a built-in client. Custom samples are matched by the `custom/` id prefix, which\n * mirrors the `^custom/` pattern enforced on the stored default client.\n */\nconst isCustomSelection = (client: string | undefined) =>\n  Boolean(client?.startsWith('custom/'))\n\n/**\n * The generic client this selector actually displays.\n *\n * The introduction selector only represents the built-in HTTP clients. Custom\n * code samples are operation-specific and \"always just have the generic\n * clients\", so when one is selected globally we keep showing the last generic\n * client here instead of switching to (and failing to render) a custom sample.\n */\nconst activeClient = ref(\n  isCustomSelection(selectedClient) ? DEFAULT_CLIENT : selectedClient,\n)\n\nwatch(\n  () => selectedClient,\n  (newClient) => {\n    if (!isCustomSelection(newClient)) {\n      activeClient.value = newClient\n    }\n  },\n)\n\n/** Grab the option for the currently selected Http Client */\nconst selectedClientOption = computed(\n  () =>\n    clientOptions.flatMap(\n      (optionGroup) =>\n        optionGroup.options.find(\n          (option) => option.id === activeClient.value,\n        ) ?? [],\n    )[0],\n)\n\n/** List of featured clients */\nconst featuredClients = computed(() => getFeaturedClients(clientOptions))\n\n/** Currently selected tab index */\nconst tabIndex = computed(() =>\n  featuredClients.value.findIndex(\n    (featuredClient) => activeClient.value === featuredClient.id,\n  ),\n)\n\nconst wrapper = useTemplateRef('wrapper-ref')\n\n/** Emit the selected client event on tab */\nconst onTabSelect = (i: number) => {\n  const client = featuredClients.value[i]\n\n  if (!client || !wrapper.value) {\n    return\n  }\n\n  eventBus.emit('workspace:update:selected-client', client.id)\n}\n\ndefineExpose({\n  selectedClientOption,\n})\n</script>\n<template>\n  <div\n    v-if=\"clientOptions.length\"\n    ref=\"wrapper-ref\">\n    <TabGroup\n      manual\n      :selectedIndex=\"tabIndex\"\n      @change=\"onTabSelect\">\n      <div\n        :id=\"headingId\"\n        class=\"client-libraries-heading\">\n        Client Libraries\n      </div>\n\n      <!-- Tabs -->\n      <TabList\n        :aria-labelledby=\"headingId\"\n        class=\"client-libraries-list\">\n        <ClientDropdown\n          :clientOptions\n          :eventBus\n          :featuredClients\n          :morePanel\n          :selectedClient=\"activeClient\" />\n      </TabList>\n\n      <!-- Content -->\n      <TabPanels>\n        <template v-if=\"isFeaturedClient(activeClient)\">\n          <TabPanel\n            v-for=\"client in featuredClients\"\n            :key=\"client.id\"\n            class=\"selected-client card-footer -outline-offset-2\">\n            {{ client.title }}\n          </TabPanel>\n        </template>\n        <div\n          v-else\n          :id=\"morePanel\"\n          class=\"selected-client card-footer -outline-offset-2\"\n          role=\"tabpanel\"\n          tabindex=\"0\">\n          {{ selectedClientOption?.title }}\n        </div>\n      </TabPanels>\n    </TabGroup>\n  </div>\n</template>\n<style scoped>\n.selected-client {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  font-family: var(--scalar-font-code);\n  padding: 9px 12px;\n  border-top: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n  min-height: fit-content;\n}\n.client-libraries-heading {\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-medium);\n  color: var(--scalar-color-1);\n  padding: 9px 12px;\n  background-color: var(--scalar-background-2);\n  display: flex;\n  align-items: center;\n  max-height: 32px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top-left-radius: var(--scalar-radius-xl);\n  border-top-right-radius: var(--scalar-radius-xl);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,YAAY,OAAM;EACxB,MAAM,YAAY,OAAM;;;;;;EAOxB,MAAM,qBAAqB,WACzB,QAAQ,QAAQ,WAAW,UAAU,CAAA;;;;;;;;;EAUvC,MAAM,eAAe,IACnB,kBAAkB,QAAA,eAAe,GAAG,iBAAiB,QAAA,eACvD;AAEA,cACQ,QAAA,iBACL,cAAc;AACb,OAAI,CAAC,kBAAkB,UAAU,CAC/B,cAAa,QAAQ;IAG3B;;EAGA,MAAM,uBAAuB,eAEzB,QAAA,cAAc,SACX,gBACC,YAAY,QAAQ,MACjB,WAAW,OAAO,OAAO,aAAa,MACxC,IAAI,EAAE,CACV,CAAC,GACN;;EAGA,MAAM,kBAAkB,eAAe,mBAAmB,QAAA,cAAc,CAAA;;EAGxE,MAAM,WAAW,eACf,gBAAgB,MAAM,WACnB,mBAAmB,aAAa,UAAU,eAAe,GAC3D,CACH;EAEA,MAAM,UAAU,eAAe,cAAa;;EAG5C,MAAM,eAAe,MAAc;GACjC,MAAM,SAAS,gBAAgB,MAAM;AAErC,OAAI,CAAC,UAAU,CAAC,QAAQ,MACtB;AAGF,WAAA,SAAS,KAAK,oCAAoC,OAAO,GAAE;;AAG7D,WAAa,EACX,sBACD,CAAA;;UAIS,QAAA,cAAc,UAAA,WAAA,EADtB,mBA6CM,OA7CN,YA6CM,CA1CJ,YAyCW,MAAA,SAAA,EAAA;IAxCT,QAAA;IACC,eAAe,SAAA;IACf,UAAQ;;2BAKH;KAJN,mBAIM,OAAA;MAHH,IAAI,MAAA,UAAS;MACd,OAAM;QAA2B,sBAEnC,GAAA,WAAA;KAGA,YASU,MAAA,QAAA,EAAA;MARP,mBAAiB,MAAA,UAAS;MAC3B,OAAM;;6BAM6B,CALnC,YAKmC,wBAAA;OAJhC,eAAA,QAAA;OACA,UAAA,QAAA;OACA,iBAAA,gBAAA;OACA,WAAA,MAAA,UAAS;OACT,gBAAgB,aAAA;;;;;;;;;;KAIrB,YAiBY,MAAA,UAAA,EAAA,MAAA;6BATC,CAPK,MAAA,iBAAgB,CAAC,aAAA,MAAY,IAAA,UAAA,KAAA,EAC3C,mBAKW,UAAA,EAAA,KAAA,GAAA,EAAA,WAJQ,gBAAA,QAAV,WAAM;2BADf,YAKW,MAAA,SAAA,EAAA;QAHR,KAAK,OAAO;QACb,OAAM;;+BACY,CAAA,gBAAA,gBAAf,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA;;;gCAGnB,mBAOM,OAAA;;OALH,IAAI,MAAA,UAAS;OACd,OAAM;OACN,MAAK;OACL,UAAS;yBACN,qBAAA,OAAsB,MAAK,EAAA,GAAA,WAAA,EAAA,CAAA"}
+{"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/blocks/code-example'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref, useId, useTemplateRef, watch } from 'vue'\n\nimport {\n  getFeaturedClients,\n  isFeaturedClient,\n} from '@/blocks/scalar-client-selector-block/helpers/featured-clients'\nimport { useLocalization } from '@/features/localization'\n\nimport ClientDropdown from './ClientDropdown.vue'\n\nconst {\n  clientOptions,\n  eventBus,\n  selectedClient = DEFAULT_CLIENT,\n} = defineProps<{\n  /** Computed list of all available Http Client options */\n  clientOptions: ClientOptionGroup[]\n  /** The currently selected Http Client (a built-in client id or a custom sample id) */\n  selectedClient?: string\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\nconst morePanel = useId()\nconst { translate } = useLocalization()\n\n/**\n * Whether a selection is a custom code sample (e.g. `custom/python`) rather than\n * a built-in client. Custom samples are matched by the `custom/` id prefix, which\n * mirrors the `^custom/` pattern enforced on the stored default client.\n */\nconst isCustomSelection = (client: string | undefined) =>\n  Boolean(client?.startsWith('custom/'))\n\n/**\n * The generic client this selector actually displays.\n *\n * The introduction selector only represents the built-in HTTP clients. Custom\n * code samples are operation-specific and \"always just have the generic\n * clients\", so when one is selected globally we keep showing the last generic\n * client here instead of switching to (and failing to render) a custom sample.\n */\nconst activeClient = ref(\n  isCustomSelection(selectedClient) ? DEFAULT_CLIENT : selectedClient,\n)\n\nwatch(\n  () => selectedClient,\n  (newClient) => {\n    if (!isCustomSelection(newClient)) {\n      activeClient.value = newClient\n    }\n  },\n)\n\n/** Grab the option for the currently selected Http Client */\nconst selectedClientOption = computed(\n  () =>\n    clientOptions.flatMap(\n      (optionGroup) =>\n        optionGroup.options.find(\n          (option) => option.id === activeClient.value,\n        ) ?? [],\n    )[0],\n)\n\n/** List of featured clients */\nconst featuredClients = computed(() => getFeaturedClients(clientOptions))\n\n/** Currently selected tab index */\nconst tabIndex = computed(() =>\n  featuredClients.value.findIndex(\n    (featuredClient) => activeClient.value === featuredClient.id,\n  ),\n)\n\nconst wrapper = useTemplateRef('wrapper-ref')\n\n/** Emit the selected client event on tab */\nconst onTabSelect = (i: number) => {\n  const client = featuredClients.value[i]\n\n  if (!client || !wrapper.value) {\n    return\n  }\n\n  eventBus.emit('workspace:update:selected-client', client.id)\n}\n\ndefineExpose({\n  selectedClientOption,\n})\n</script>\n<template>\n  <div\n    v-if=\"clientOptions.length\"\n    ref=\"wrapper-ref\">\n    <TabGroup\n      manual\n      :selectedIndex=\"tabIndex\"\n      @change=\"onTabSelect\">\n      <div\n        :id=\"headingId\"\n        class=\"client-libraries-heading\">\n        {{ translate('clientLibraries.heading') }}\n      </div>\n\n      <!-- Tabs -->\n      <TabList\n        :aria-labelledby=\"headingId\"\n        class=\"client-libraries-list\">\n        <ClientDropdown\n          :clientOptions\n          :eventBus\n          :featuredClients\n          :morePanel\n          :selectedClient=\"activeClient\" />\n      </TabList>\n\n      <!-- Content -->\n      <TabPanels>\n        <template v-if=\"isFeaturedClient(activeClient)\">\n          <TabPanel\n            v-for=\"client in featuredClients\"\n            :key=\"client.id\"\n            class=\"selected-client card-footer -outline-offset-2\">\n            {{ client.title }}\n          </TabPanel>\n        </template>\n        <div\n          v-else\n          :id=\"morePanel\"\n          class=\"selected-client card-footer -outline-offset-2\"\n          role=\"tabpanel\"\n          tabindex=\"0\">\n          {{ selectedClientOption?.title }}\n        </div>\n      </TabPanels>\n    </TabGroup>\n  </div>\n</template>\n<style scoped>\n.selected-client {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  font-family: var(--scalar-font-code);\n  padding: 9px 12px;\n  border-top: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n  min-height: fit-content;\n}\n.client-libraries-heading {\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-medium);\n  color: var(--scalar-color-1);\n  padding: 9px 12px;\n  background-color: var(--scalar-background-2);\n  display: flex;\n  align-items: center;\n  max-height: 32px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top-left-radius: var(--scalar-radius-xl);\n  border-top-right-radius: var(--scalar-radius-xl);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,YAAY,OAAM;EACxB,MAAM,YAAY,OAAM;EACxB,MAAM,EAAE,cAAc,iBAAgB;;;;;;EAOtC,MAAM,qBAAqB,WACzB,QAAQ,QAAQ,WAAW,UAAU,CAAA;;;;;;;;;EAUvC,MAAM,eAAe,IACnB,kBAAkB,QAAA,eAAe,GAAG,iBAAiB,QAAA,eACvD;AAEA,cACQ,QAAA,iBACL,cAAc;AACb,OAAI,CAAC,kBAAkB,UAAU,CAC/B,cAAa,QAAQ;IAG3B;;EAGA,MAAM,uBAAuB,eAEzB,QAAA,cAAc,SACX,gBACC,YAAY,QAAQ,MACjB,WAAW,OAAO,OAAO,aAAa,MACxC,IAAI,EAAE,CACV,CAAC,GACN;;EAGA,MAAM,kBAAkB,eAAe,mBAAmB,QAAA,cAAc,CAAA;;EAGxE,MAAM,WAAW,eACf,gBAAgB,MAAM,WACnB,mBAAmB,aAAa,UAAU,eAAe,GAC3D,CACH;EAEA,MAAM,UAAU,eAAe,cAAa;;EAG5C,MAAM,eAAe,MAAc;GACjC,MAAM,SAAS,gBAAgB,MAAM;AAErC,OAAI,CAAC,UAAU,CAAC,QAAQ,MACtB;AAGF,WAAA,SAAS,KAAK,oCAAoC,OAAO,GAAE;;AAG7D,WAAa,EACX,sBACD,CAAA;;UAIS,QAAA,cAAc,UAAA,WAAA,EADtB,mBA6CM,OA7CN,YA6CM,CA1CJ,YAyCW,MAAA,SAAA,EAAA;IAxCT,QAAA;IACC,eAAe,SAAA;IACf,UAAQ;;2BAKH;KAJN,mBAIM,OAAA;MAHH,IAAI,MAAA,UAAS;MACd,OAAM;wBACH,MAAA,UAAS,CAAA,0BAAA,CAAA,EAAA,GAAA,WAAA;KAId,YASU,MAAA,QAAA,EAAA;MARP,mBAAiB,MAAA,UAAS;MAC3B,OAAM;;6BAM6B,CALnC,YAKmC,wBAAA;OAJhC,eAAA,QAAA;OACA,UAAA,QAAA;OACA,iBAAA,gBAAA;OACA,WAAA,MAAA,UAAS;OACT,gBAAgB,aAAA;;;;;;;;;;KAIrB,YAiBY,MAAA,UAAA,EAAA,MAAA;6BATC,CAPK,MAAA,iBAAgB,CAAC,aAAA,MAAY,IAAA,UAAA,KAAA,EAC3C,mBAKW,UAAA,EAAA,KAAA,GAAA,EAAA,WAJQ,gBAAA,QAAV,WAAM;2BADf,YAKW,MAAA,SAAA,EAAA;QAHR,KAAK,OAAO;QACb,OAAM;;+BACY,CAAA,gBAAA,gBAAf,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA;;;gCAGnB,mBAOM,OAAA;;OALH,IAAI,MAAA,UAAS;OACd,OAAM;OACN,MAAK;OACL,UAAS;yBACN,qBAAA,OAAsB,MAAK,EAAA,GAAA,WAAA,EAAA,CAAA"}

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

@@ -1,4 +1,4 @@
-import type { ClientOption, ClientOptionGroup } from '@scalar/api-client/blocks/operation-code-sample';
+import type { ClientOption, ClientOptionGroup } from '@scalar/blocks/code-example';
 import type { AvailableClients } from '@scalar/snippetz';
 /** Whether or not a client is in the featured list */
 export declare const isFeaturedClient: (clientId: string | 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,iDAAiD,CAAA;AACtG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAWxD,sDAAsD;AACtD,eAAO,MAAM,gBAAgB,GAC3B,UAAU,MAAM,GAAG,SAAS,EAC5B,kBAAiB,gBAAgB,CAAC,MAAM,CAAC,EAAqB,YACgC,CAAA;AAEhG;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,eAAe,iBAAiB,EAAE,EAClC,kBAAiB,gBAAgB,CAAC,MAAM,CAAC,EAAqB,KAC7D,YAAY,EAgBd,CAAA"}
+{"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,6BAA6B,CAAA;AAClF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAWxD,sDAAsD;AACtD,eAAO,MAAM,gBAAgB,GAC3B,UAAU,MAAM,GAAG,SAAS,EAC5B,kBAAiB,gBAAgB,CAAC,MAAM,CAAC,EAAqB,YACgC,CAAA;AAEhG;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,eAAe,iBAAiB,EAAE,EAClC,kBAAiB,gBAAgB,CAAC,MAAM,CAAC,EAAqB,KAC7D,YAAY,EAgBd,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DownloadLink.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/DownloadLink.vue"],"names":[],"mappings":"AAmNA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAKvE,KAAK,WAAW,GAAG;IACjB,kCAAkC;IAClC,oBAAoB,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,CAAA;IACvE,iDAAiD;IACjD,QAAQ,EAAE,iBAAiB,CAAA;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oEAAoE;IACpE,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACtC,CAAC;AA+IF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"DownloadLink.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/DownloadLink.vue"],"names":[],"mappings":"AAqNA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAMvE,KAAK,WAAW,GAAG;IACjB,kCAAkC;IAClC,oBAAoB,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,CAAA;IACvE,iDAAiD;IACjD,QAAQ,EAAE,iBAAiB,CAAA;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oEAAoE;IACpE,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACtC,CAAC;AAgJF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

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

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

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

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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../../features/localization/use-localization.js";
 import Badge_default from "../../../components/Badge/Badge.vue.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, withCtx, withModifiers } from "vue";
 //#region src/blocks/scalar-info-block/components/DownloadLink.vue?vue&type=script&setup=true&lang.ts
@@ -11,7 +12,8 @@ var DownloadLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		documentType: { default: "openapi" }
 	},
 	setup(__props) {
-		const label = computed(() => __props.documentType === "asyncapi" ? "Download AsyncAPI Document" : "Download OpenAPI Document");
+		const { translate } = useLocalization();
+		const label = computed(() => __props.documentType === "asyncapi" ? translate("download.asyncapi") : translate("download.openapi"));
 		const handleDownloadClick = (format) => {
 			__props.eventBus.emit("ui:download:document", { format });
 		};

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"InfoLinks.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/InfoLinks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport { LinkList } from '@/components/LinkList'\nimport { ExternalDocs } from '@/features/external-docs'\nimport { Contact, License, TermsOfService } from '@/features/info-object'\n\nconst { info, externalDocs } = defineProps<{\n  info: InfoObject | AsyncApiInfoObject\n  externalDocs?: ExternalDocumentationObject\n}>()\n\n/** Whether there is at least one link to show, so we do not render an empty list */\nconst hasLinks = computed(() =>\n  Boolean(externalDocs || info.contact || info.license || info.termsOfService),\n)\n</script>\n\n<template>\n  <LinkList v-if=\"hasLinks\">\n    <ExternalDocs\n      v-if=\"externalDocs\"\n      :value=\"externalDocs\" />\n    <Contact\n      v-if=\"info.contact\"\n      :value=\"info.contact\" />\n    <License\n      v-if=\"info.license\"\n      :value=\"getResolvedRef(info.license)\" />\n    <TermsOfService\n      v-if=\"info.termsOfService\"\n      :value=\"info.termsOfService\" />\n  </LinkList>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InfoLinks.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/InfoLinks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport { LinkList } from '@/components/LinkList'\nimport { ExternalDocs } from '@/features/external-docs'\nimport {\n  Contact,\n  InfoLink,\n  License,\n  TermsOfService,\n} from '@/features/info-object'\n\nconst { info, externalDocs } = defineProps<{\n  info: InfoObject | AsyncApiInfoObject\n  externalDocs?: ExternalDocumentationObject\n}>()\n\n/** Additional named links from the `x-scalar-links` extension (e.g. privacy policy, imprint) */\nconst links = computed(() => {\n  const value = (info as InfoObject)['x-scalar-links']\n\n  // Guard against malformed extension values from the OpenAPI document (a string, a single object, …)\n  // so we only ever render well-formed `{ name, url }` entries.\n  if (!Array.isArray(value)) {\n    return []\n  }\n\n  return value.filter(\n    (link) => typeof link?.name === 'string' && typeof link?.url === 'string',\n  )\n})\n\n/** Whether there is at least one link to show, so we do not render an empty list */\nconst hasLinks = computed(() =>\n  Boolean(\n    externalDocs ||\n    info.contact ||\n    info.license ||\n    info.termsOfService ||\n    links.value.length,\n  ),\n)\n</script>\n\n<template>\n  <LinkList v-if=\"hasLinks\">\n    <ExternalDocs\n      v-if=\"externalDocs\"\n      :value=\"externalDocs\" />\n    <Contact\n      v-if=\"info.contact\"\n      :value=\"info.contact\" />\n    <License\n      v-if=\"info.license\"\n      :value=\"getResolvedRef(info.license)\" />\n    <TermsOfService\n      v-if=\"info.termsOfService\"\n      :value=\"info.termsOfService\" />\n    <InfoLink\n      v-for=\"link in links\"\n      :key=\"link.url\"\n      :name=\"link.name\"\n      :url=\"link.url\" />\n  </LinkList>\n</template>\n"],"mappings":""}

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

@@ -1,9 +1,10 @@
 import LinkList_default from "../../../components/LinkList/LinkList.vue.js";
 import ExternalDocs_default from "../../../features/external-docs/ExternalDocs.vue.js";
 import Contact_default from "../../../features/info-object/Contact.vue.js";
+import InfoLink_default from "../../../features/info-object/InfoLink.vue.js";
 import License_default from "../../../features/info-object/License.vue.js";
 import TermsOfService_default from "../../../features/info-object/TermsOfService.vue.js";
-import { computed, createBlock, createCommentVNode, defineComponent, openBlock, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
 import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
 //#region src/blocks/scalar-info-block/components/InfoLinks.vue?vue&type=script&setup=true&lang.ts
 var InfoLinks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -13,8 +14,14 @@ var InfoLinks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		externalDocs: {}
 	},
 	setup(__props) {
+		/** Additional named links from the `x-scalar-links` extension (e.g. privacy policy, imprint) */
+		const links = computed(() => {
+			const value = __props.info["x-scalar-links"];
+			if (!Array.isArray(value)) return [];
+			return value.filter((link) => typeof link?.name === "string" && typeof link?.url === "string");
+		});
 		/** Whether there is at least one link to show, so we do not render an empty list */
-		const hasLinks = computed(() => Boolean(__props.externalDocs || __props.info.contact || __props.info.license || __props.info.termsOfService));
+		const hasLinks = computed(() => Boolean(__props.externalDocs || __props.info.contact || __props.info.license || __props.info.termsOfService || links.value.length));
 		return (_ctx, _cache) => {
 			return hasLinks.value ? (openBlock(), createBlock(unref(LinkList_default), { key: 0 }, {
 				default: withCtx(() => [
@@ -33,7 +40,14 @@ var InfoLinks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					__props.info.termsOfService ? (openBlock(), createBlock(unref(TermsOfService_default), {
 						key: 3,
 						value: __props.info.termsOfService
-					}, null, 8, ["value"])) : createCommentVNode("", true)
+					}, null, 8, ["value"])) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(links.value, (link) => {
+						return openBlock(), createBlock(unref(InfoLink_default), {
+							key: link.url,
+							name: link.name,
+							url: link.url
+						}, null, 8, ["name", "url"]);
+					}), 128))
 				]),
 				_: 1
 			})) : createCommentVNode("", true);

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

@@ -1 +1 @@
-{"version":3,"file":"InfoLinks.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/InfoLinks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport { LinkList } from '@/components/LinkList'\nimport { ExternalDocs } from '@/features/external-docs'\nimport { Contact, License, TermsOfService } from '@/features/info-object'\n\nconst { info, externalDocs } = defineProps<{\n  info: InfoObject | AsyncApiInfoObject\n  externalDocs?: ExternalDocumentationObject\n}>()\n\n/** Whether there is at least one link to show, so we do not render an empty list */\nconst hasLinks = computed(() =>\n  Boolean(externalDocs || info.contact || info.license || info.termsOfService),\n)\n</script>\n\n<template>\n  <LinkList v-if=\"hasLinks\">\n    <ExternalDocs\n      v-if=\"externalDocs\"\n      :value=\"externalDocs\" />\n    <Contact\n      v-if=\"info.contact\"\n      :value=\"info.contact\" />\n    <License\n      v-if=\"info.license\"\n      :value=\"getResolvedRef(info.license)\" />\n    <TermsOfService\n      v-if=\"info.termsOfService\"\n      :value=\"info.termsOfService\" />\n  </LinkList>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAmBA,MAAM,WAAW,eACf,QAAQ,QAAA,gBAAgB,QAAA,KAAK,WAAW,QAAA,KAAK,WAAW,QAAA,KAAK,eAAe,CAC9E;;UAIkB,SAAA,SAAA,WAAA,EAAhB,YAaW,MAAA,iBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;2BAViB;KADlB,QAAA,gBAAA,WAAA,EADR,YAE0B,MAAA,qBAAA,EAAA;;MAAvB,OAAO,QAAA;;KAEF,QAAA,KAAK,WAAA,WAAA,EADb,YAE0B,MAAA,gBAAA,EAAA;;MAAvB,OAAO,QAAA,KAAK;;KAEP,QAAA,KAAK,WAAA,WAAA,EADb,YAE0C,MAAA,gBAAA,EAAA;;MAAvC,OAAO,MAAA,eAAc,CAAC,QAAA,KAAK,QAAO;;KAE7B,QAAA,KAAK,kBAAA,WAAA,EADb,YAEiC,MAAA,uBAAA,EAAA;;MAA9B,OAAO,QAAA,KAAK"}
+{"version":3,"file":"InfoLinks.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/InfoLinks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport { LinkList } from '@/components/LinkList'\nimport { ExternalDocs } from '@/features/external-docs'\nimport {\n  Contact,\n  InfoLink,\n  License,\n  TermsOfService,\n} from '@/features/info-object'\n\nconst { info, externalDocs } = defineProps<{\n  info: InfoObject | AsyncApiInfoObject\n  externalDocs?: ExternalDocumentationObject\n}>()\n\n/** Additional named links from the `x-scalar-links` extension (e.g. privacy policy, imprint) */\nconst links = computed(() => {\n  const value = (info as InfoObject)['x-scalar-links']\n\n  // Guard against malformed extension values from the OpenAPI document (a string, a single object, …)\n  // so we only ever render well-formed `{ name, url }` entries.\n  if (!Array.isArray(value)) {\n    return []\n  }\n\n  return value.filter(\n    (link) => typeof link?.name === 'string' && typeof link?.url === 'string',\n  )\n})\n\n/** Whether there is at least one link to show, so we do not render an empty list */\nconst hasLinks = computed(() =>\n  Boolean(\n    externalDocs ||\n    info.contact ||\n    info.license ||\n    info.termsOfService ||\n    links.value.length,\n  ),\n)\n</script>\n\n<template>\n  <LinkList v-if=\"hasLinks\">\n    <ExternalDocs\n      v-if=\"externalDocs\"\n      :value=\"externalDocs\" />\n    <Contact\n      v-if=\"info.contact\"\n      :value=\"info.contact\" />\n    <License\n      v-if=\"info.license\"\n      :value=\"getResolvedRef(info.license)\" />\n    <TermsOfService\n      v-if=\"info.termsOfService\"\n      :value=\"info.termsOfService\" />\n    <InfoLink\n      v-for=\"link in links\"\n      :key=\"link.url\"\n      :name=\"link.name\"\n      :url=\"link.url\" />\n  </LinkList>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAwBA,MAAM,QAAQ,eAAe;GAC3B,MAAM,QAAS,QAAA,KAAoB;AAInC,OAAI,CAAC,MAAM,QAAQ,MAAM,CACvB,QAAO,EAAC;AAGV,UAAO,MAAM,QACV,SAAS,OAAO,MAAM,SAAS,YAAY,OAAO,MAAM,QAAQ,SACnE;IACD;;EAGD,MAAM,WAAW,eACf,QACE,QAAA,gBACA,QAAA,KAAK,WACL,QAAA,KAAK,WACL,QAAA,KAAK,kBACL,MAAM,MAAM,OACb,CACH;;UAIkB,SAAA,SAAA,WAAA,EAAhB,YAkBW,MAAA,iBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;2BAfiB;KADlB,QAAA,gBAAA,WAAA,EADR,YAE0B,MAAA,qBAAA,EAAA;;MAAvB,OAAO,QAAA;;KAEF,QAAA,KAAK,WAAA,WAAA,EADb,YAE0B,MAAA,gBAAA,EAAA;;MAAvB,OAAO,QAAA,KAAK;;KAEP,QAAA,KAAK,WAAA,WAAA,EADb,YAE0C,MAAA,gBAAA,EAAA;;MAAvC,OAAO,MAAA,eAAc,CAAC,QAAA,KAAK,QAAO;;KAE7B,QAAA,KAAK,kBAAA,WAAA,EADb,YAEiC,MAAA,uBAAA,EAAA;;MAA9B,OAAO,QAAA,KAAK;;uBACf,mBAIoB,UAAA,MAAA,WAHH,MAAA,QAAR,SAAI;0BADb,YAIoB,MAAA,iBAAA,EAAA;OAFjB,KAAK,KAAK;OACV,MAAM,KAAK;OACX,KAAK,KAAK"}

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

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

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

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