@scalar/api-reference 1.64.0 → 1.65.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @scalar/api-reference
 
+## 1.65.0
+
+### Minor Changes
+
+- [#9884](https://github.com/scalar/scalar/pull/9884): Export the AsyncAPI content components (AsyncApiChannel, AsyncApiOperation, AsyncApiMessage, AsyncApiTraversedEntry) from `@scalar/api-reference/components` so downstream renderers can render an individual channel/operation/message on its own page.
+
+### Patch Changes
+
+- [#9856](https://github.com/scalar/scalar/pull/9856): Render model names as plain text when there is no models section to link to. The names next to types and on the request body heading used to be links even when the whole models section was hidden via `hideModels`, or when the referenced model itself was hidden via `x-internal` / `x-scalar-ignore`. There was nothing to scroll to, so clicking them did nothing. They now render as plain text in both cases.
+- [#9858](https://github.com/scalar/scalar/pull/9858): Only render a clickable model name link when the `$ref` actually targets `#/components/schemas/`. Refs into other component buckets (parameters, responses, ...) or external files now show the name as plain text instead of a dead link that scrolls nowhere.
+- [#9857](https://github.com/scalar/scalar/pull/9857): Fix dead model-name links for schemas grouped under a tag via `x-tags`. The models index now collects model entries from the whole navigation tree, so clicking a model name that lives under a tag group scrolls to the model instead of doing nothing.
+- [#9859](https://github.com/scalar/scalar/pull/9859): Fix empty popup when hovering the "Generate MCP" button without an MCP config
+- [#9862](https://github.com/scalar/scalar/pull/9862): Use the webhook icon for webhooks in search results so they are easy to tell apart from operations
+
+## 1.64.1
+
+### Patch Changes
+
+- [#9828](https://github.com/scalar/scalar/pull/9828): Bump shared build and runtime dependencies to their latest compatible versions
+  (fuse.js, vite, vitest, tailwindcss, @vitejs/plugin-vue, @vue/test-utils,
+  posthog-js, yaml, and the CSS injection plugin). The fuse.js 7.5.0 upgrade
+  tightened generic inference, so the empty `new Fuse([])` search instances now
+  pass an explicit `FuseData` type argument.
+- [#9837](https://github.com/scalar/scalar/pull/9837): Keep the selected server when the configuration is updated. Pushing a config update to a mounted reference (for example a refreshed auth token via `updateConfiguration`) rebases the document in the store, which previously reset the server selector back to the first server. The user's selected server is now preserved across configuration updates.
+- [#9783](https://github.com/scalar/scalar/pull/9783): fix: resolve axe-core ARIA violations in the API reference sidebar and client tabs
+
+  Sidebar items used `aria-selected` on links/buttons (invalid for those roles) and the search trigger used `role="search"` on a button. Selected items now use `aria-current="page"`, the search control is a plain named button, and the sidebar no longer sets an invalid `role="navigation"` on `<aside>` (it keeps the default complementary landmark).
+
+  Client library and SDK installation "More" comboboxes sat inside `role="tablist"`, which fails `aria-required-children`. They now sit beside the tablist. MCP install controls without a target URL render as buttons instead of empty `a[href=""]` links.
+
+- [#9791](https://github.com/scalar/scalar/pull/9791): Stop recursive schema rendering when a discriminator variant `allOf`s back to its base type. The selected child now inherits the parent's discriminator context so the mapping is not re-inferred on every nest.
+- [#9830](https://github.com/scalar/scalar/pull/9830): Stop listing enum values twice for an array parameter whose `items` is a `$ref`
+  to an enum schema. The values are now listed only in the array items card, which
+  also shows the item schema's title and description.
+- [#9839](https://github.com/scalar/scalar/pull/9839): Harden the API reference against untrusted OpenAPI documents:
+  - Link targets taken from the document (`info.license.url`, `info.termsOfService`,
+    `info.contact.url`, `externalDocs.url`, `x-scalar-links`) and the direct download link are now
+    checked against an allow list of protocols, so a document can no longer render a `javascript:`
+    link that runs script when a reader clicks it. Unsafe values fall back to plain text.
+  - `deepMerge` (used by the exported `createEmptySpecification`) no longer writes through the
+    prototype chain, so a document can no longer add properties to `Object.prototype` via `__proto__`,
+    `constructor`, or `prototype`. Keys with those names are kept as plain data instead of being
+    dropped, so a schema is still free to describe a property named `constructor`.
+  - `customCss` can no longer close the injected `<style>` tag, which mattered during server
+    rendering where the value lands in the HTML stream verbatim.
+  - Added `rel="noopener noreferrer"` to the remaining `target="_blank"` links.
+
+  Adds `isSafeUrl` and `sanitizeUrl` to `@scalar/helpers/url/is-safe-url`.
+
+- [#9829](https://github.com/scalar/scalar/pull/9829): Update Vue to 3.5.40. Vue 3.5.36 tightened `defineModel` default validation, so
+  models with array or object defaults now use the factory form
+  (`defineModel<T[]>({ default: () => [] })`) as Vue already requires for regular
+  props. Behaviour is unchanged.
+- [#9790](https://github.com/scalar/scalar/pull/9790): fix: keep dots in webhook navigation deep links
+
+  Webhook event names that use dots (for example `account_holder.created`) had the
+  dot dropped when building the navigation id, joining adjacent words into
+  `account-holdercreated`. Dots are now kept, producing `account-holder.created`.
+
+  Old deep links using the dropped-dot slug are redirected to the new slug, so
+  existing bookmarks keep resolving.
+
 ## 1.64.0
 
 ### Minor Changes

package/dist/blocks/scalar-asyncapi-server-selector-block/components/AsyncApiServerSelector.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AsyncApiServerSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-asyncapi-server-selector-block/components/AsyncApiServerSelector.vue"],"names":[],"mappings":"AAsHA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAA;AAClF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AASvE,KAAK,aAAa,GAAG;IACnB,+CAA+C;IAC/C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,oCAAoC;IACpC,cAAc,EAAE,mBAAmB,GAAG,IAAI,CAAA;IAC1C,wBAAwB;IACxB,OAAO,EAAE,mBAAmB,EAAE,CAAA;CAC/B,CAAA;AAED;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,sSAoKd,CAAC"}
+{"version":3,"file":"AsyncApiServerSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-asyncapi-server-selector-block/components/AsyncApiServerSelector.vue"],"names":[],"mappings":"AAsHA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAA;AAClF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AASvE,KAAK,aAAa,GAAG;IACnB,+CAA+C;IAC/C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,oCAAoC;IACpC,cAAc,EAAE,mBAAmB,GAAG,IAAI,CAAA;IAC1C,wBAAwB;IACxB,OAAO,EAAE,mBAAmB,EAAE,CAAA;CAC/B,CAAA;AAED;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,sSAsKd,CAAC"}

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

@@ -7,7 +7,7 @@ import { ScalarMarkdown } from "@scalar/components/markdown";
 //#region src/blocks/scalar-asyncapi-server-selector-block/components/AsyncApiServerSelector.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "bg-b-2 flex h-8 items-center rounded-t-xl border-x border-t px-3 py-2.5 font-medium" };
 var _hoisted_2 = ["id"];
-var AsyncApiServerSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var AsyncApiServerSelector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "AsyncApiServerSelector",
 	props: {
 		eventBus: {},

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

@@ -1 +1 @@
-{"version":3,"file":"AsyncApiServerSelector.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-asyncapi-server-selector-block/components/AsyncApiServerSelector.vue"],"sourcesContent":["<script lang=\"ts\">\ntype SelectorProps = {\n  /** The event bus to use for emitting events */\n  eventBus: WorkspaceEventBus\n  /** The currently selected server */\n  selectedServer: AsyncApiServerEntry | null\n  /** Available servers */\n  servers: AsyncApiServerEntry[]\n}\n\n/**\n * AsyncApiServerSelector\n *\n * Core component for rendering an AsyncAPI server selector block. It mirrors the\n * OpenAPI ServerSelector, but works with the AsyncAPI server shape (a named map\n * of `host`/`protocol`/`pathname` rather than an array of `url`).\n *\n * @event asyncapi-server:update:selected - Emitted when the selected server changes\n * @event asyncapi-server:update:variables - Emitted when a server variable changes\n */\nexport default {}\n</script>\n\n<script lang=\"ts\" setup>\nimport { ServerVariablesForm } from '@scalar/api-client/components/Server'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { AsyncApiServerEntry } from '@scalar/workspace-store/channel-example'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { computed, useId } from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nimport Selector from './Selector.vue'\n\nconst { eventBus, servers, selectedServer } = defineProps<SelectorProps>()\n\nconst id = useId()\nconst { translate } = useLocalization()\n\n/**\n * Normalize AsyncAPI server variables into the shape the shared\n * ServerVariablesForm expects (resolving references and defaulting `default`).\n */\nconst serverVariables = computed(() => {\n  const variables = selectedServer?.server.variables\n  if (!variables) {\n    return undefined\n  }\n\n  return Object.fromEntries(\n    Object.entries(variables).map(([name, variable]) => {\n      const resolved = getResolvedRef(variable)\n      return [\n        name,\n        {\n          default: resolved.default ?? '',\n          enum: resolved.enum,\n          description: resolved.description,\n        },\n      ]\n    }),\n  )\n})\n\n/** Update the selected server */\nconst updateServer = (name: string) => {\n  eventBus.emit('asyncapi-server:update:selected', { name })\n}\n\n/** Update a server variable on the selected server */\nconst updateServerVariable = (key: string, value: string) => {\n  if (!selectedServer) {\n    return\n  }\n\n  eventBus.emit('asyncapi-server:update:variables', {\n    name: selectedServer.name,\n    key,\n    value,\n  })\n}\n</script>\n\n<template>\n  <label\n    class=\"bg-b-2 flex h-8 items-center rounded-t-xl border-x border-t px-3 py-2.5 font-medium\">\n    {{ translate('server.label') }}\n  </label>\n  <div\n    :id=\"id\"\n    class=\"border\"\n    :class=\"{\n      'rounded-b-xl': !selectedServer?.description && !serverVariables,\n    }\">\n    <Selector\n      v-if=\"servers.length\"\n      :selectedServer\n      :servers=\"servers\"\n      :target=\"id\"\n      @update:modelValue=\"updateServer\" />\n  </div>\n  <ServerVariablesForm\n    layout=\"reference\"\n    :variables=\"serverVariables\"\n    @update:variable=\"updateServerVariable\" />\n\n  <!-- Description -->\n  <ScalarMarkdown\n    v-if=\"selectedServer?.description\"\n    class=\"text-c-3 rounded-b-xl border-x border-b px-3 py-1.5\"\n    :value=\"selectedServer.description\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAqCA,MAAM,KAAK,OAAM;EACjB,MAAM,EAAE,cAAc,iBAAgB;;;;;EAMtC,MAAM,kBAAkB,eAAe;GACrC,MAAM,YAAY,QAAA,gBAAgB,OAAO;AACzC,OAAI,CAAC,UACH;AAGF,UAAO,OAAO,YACZ,OAAO,QAAQ,UAAU,CAAC,KAAK,CAAC,MAAM,cAAc;IAClD,MAAM,WAAW,eAAe,SAAQ;AACxC,WAAO,CACL,MACA;KACE,SAAS,SAAS,WAAW;KAC7B,MAAM,SAAS;KACf,aAAa,SAAS;KACvB,CACH;KACA,CACJ;IACD;;EAGD,MAAM,gBAAgB,SAAiB;AACrC,WAAA,SAAS,KAAK,mCAAmC,EAAE,MAAM,CAAA;;;EAI3D,MAAM,wBAAwB,KAAa,UAAkB;AAC3D,OAAI,CAAC,QAAA,eACH;AAGF,WAAA,SAAS,KAAK,oCAAoC;IAChD,MAAM,QAAA,eAAe;IACrB;IACA;IACD,CAAA;;;;IAKD,mBAGQ,SAHR,YAGQ,gBADH,MAAA,UAAS,CAAA,eAAA,CAAA,EAAA,EAAA;IAEd,mBAYM,OAAA;KAXH,IAAI,MAAA,GAAE;KACP,OAAK,eAAA,CAAC,UAAQ,EAAA,gBAAA,CACmB,QAAA,gBAAgB,eAAW,CAAK,gBAAA,OAAA,CAAA,CAAA;QAIzD,QAAA,QAAQ,UAAA,WAAA,EADhB,YAKsC,kBAAA;;KAHnC,gBAAA,QAAA;KACA,SAAS,QAAA;KACT,QAAQ,MAAA,GAAE;KACV,uBAAmB;;;;;;IAExB,YAG4C,MAAA,oBAAA,EAAA;KAF1C,QAAO;KACN,WAAW,gBAAA;KACX,qBAAiB;;IAIZ,QAAA,gBAAgB,eAAA,WAAA,EADxB,YAGwC,MAAA,eAAA,EAAA;;KADtC,OAAM;KACL,OAAO,QAAA,eAAe"}
+{"version":3,"file":"AsyncApiServerSelector.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-asyncapi-server-selector-block/components/AsyncApiServerSelector.vue"],"sourcesContent":["<script lang=\"ts\">\ntype SelectorProps = {\n  /** The event bus to use for emitting events */\n  eventBus: WorkspaceEventBus\n  /** The currently selected server */\n  selectedServer: AsyncApiServerEntry | null\n  /** Available servers */\n  servers: AsyncApiServerEntry[]\n}\n\n/**\n * AsyncApiServerSelector\n *\n * Core component for rendering an AsyncAPI server selector block. It mirrors the\n * OpenAPI ServerSelector, but works with the AsyncAPI server shape (a named map\n * of `host`/`protocol`/`pathname` rather than an array of `url`).\n *\n * @event asyncapi-server:update:selected - Emitted when the selected server changes\n * @event asyncapi-server:update:variables - Emitted when a server variable changes\n */\nexport default {}\n</script>\n\n<script lang=\"ts\" setup>\nimport { ServerVariablesForm } from '@scalar/api-client/components/Server'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { AsyncApiServerEntry } from '@scalar/workspace-store/channel-example'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { computed, useId } from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nimport Selector from './Selector.vue'\n\nconst { eventBus, servers, selectedServer } = defineProps<SelectorProps>()\n\nconst id = useId()\nconst { translate } = useLocalization()\n\n/**\n * Normalize AsyncAPI server variables into the shape the shared\n * ServerVariablesForm expects (resolving references and defaulting `default`).\n */\nconst serverVariables = computed(() => {\n  const variables = selectedServer?.server.variables\n  if (!variables) {\n    return undefined\n  }\n\n  return Object.fromEntries(\n    Object.entries(variables).map(([name, variable]) => {\n      const resolved = getResolvedRef(variable)\n      return [\n        name,\n        {\n          default: resolved.default ?? '',\n          enum: resolved.enum,\n          description: resolved.description,\n        },\n      ]\n    }),\n  )\n})\n\n/** Update the selected server */\nconst updateServer = (name: string) => {\n  eventBus.emit('asyncapi-server:update:selected', { name })\n}\n\n/** Update a server variable on the selected server */\nconst updateServerVariable = (key: string, value: string) => {\n  if (!selectedServer) {\n    return\n  }\n\n  eventBus.emit('asyncapi-server:update:variables', {\n    name: selectedServer.name,\n    key,\n    value,\n  })\n}\n</script>\n\n<template>\n  <label\n    class=\"bg-b-2 flex h-8 items-center rounded-t-xl border-x border-t px-3 py-2.5 font-medium\">\n    {{ translate('server.label') }}\n  </label>\n  <div\n    :id=\"id\"\n    class=\"border\"\n    :class=\"{\n      'rounded-b-xl': !selectedServer?.description && !serverVariables,\n    }\">\n    <Selector\n      v-if=\"servers.length\"\n      :selectedServer\n      :servers=\"servers\"\n      :target=\"id\"\n      @update:modelValue=\"updateServer\" />\n  </div>\n  <ServerVariablesForm\n    layout=\"reference\"\n    :variables=\"serverVariables\"\n    @update:variable=\"updateServerVariable\" />\n\n  <!-- Description -->\n  <ScalarMarkdown\n    v-if=\"selectedServer?.description\"\n    class=\"text-c-3 rounded-b-xl border-x border-b px-3 py-1.5\"\n    :value=\"selectedServer.description\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAqCA,MAAM,KAAK,MAAM;EACjB,MAAM,EAAE,cAAc,gBAAgB;;;;;EAMtC,MAAM,kBAAkB,eAAe;GACrC,MAAM,YAAY,QAAA,gBAAgB,OAAO;GACzC,IAAI,CAAC,WACH;GAGF,OAAO,OAAO,YACZ,OAAO,QAAQ,SAAS,CAAC,CAAC,KAAK,CAAC,MAAM,cAAc;IAClD,MAAM,WAAW,eAAe,QAAQ;IACxC,OAAO,CACL,MACA;KACE,SAAS,SAAS,WAAW;KAC7B,MAAM,SAAS;KACf,aAAa,SAAS;IACxB,CACF;GACF,CAAC,CACH;EACF,CAAC;;EAGD,MAAM,gBAAgB,SAAiB;GACrC,QAAA,SAAS,KAAK,mCAAmC,EAAE,KAAK,CAAC;EAC3D;;EAGA,MAAM,wBAAwB,KAAa,UAAkB;GAC3D,IAAI,CAAC,QAAA,gBACH;GAGF,QAAA,SAAS,KAAK,oCAAoC;IAChD,MAAM,QAAA,eAAe;IACrB;IACA;GACF,CAAC;EACH;;;IAIE,mBAGQ,SAHR,YAGQ,gBADH,MAAA,SAAA,CAAS,CAAA,cAAA,CAAA,GAAA,CAAA;IAEd,mBAYM,OAAA;KAXH,IAAI,MAAA,EAAA;KACL,OAAK,eAAA,CAAC,UAAQ,EAAA,gBAAA,CACmB,QAAA,gBAAgB,eAAW,CAAK,gBAAA,MAAA,CAAA,CAAA;QAIzD,QAAA,QAAQ,UAAA,UAAA,GADhB,YAKsC,kBAAA;;KAHnC,gBAAA,QAAA;KACA,SAAS,QAAA;KACT,QAAQ,MAAA,EAAA;KACR,uBAAmB;;;;;;IAExB,YAG4C,MAAA,mBAAA,GAAA;KAF1C,QAAO;KACN,WAAW,gBAAA;KACX,qBAAiB;;IAIZ,QAAA,gBAAgB,eAAA,UAAA,GADxB,YAGwC,MAAA,cAAA,GAAA;;KADtC,OAAM;KACL,OAAO,QAAA,eAAe"}

package/dist/blocks/scalar-asyncapi-server-selector-block/components/Selector.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Selector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-asyncapi-server-selector-block/components/Selector.vue"],"names":[],"mappings":"AAwFA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAA;AAKlF,KAAK,WAAW,GAAG;IACjB,0BAA0B;IAC1B,cAAc,EAAE,mBAAmB,GAAG,IAAI,CAAA;IAC1C,wBAAwB;IACxB,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAA;CACf,CAAC;AAsMF,QAAA,MAAM,YAAY;;;;;;;;;;;;kFAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Selector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-asyncapi-server-selector-block/components/Selector.vue"],"names":[],"mappings":"AAwFA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAA;AAKlF,KAAK,WAAW,GAAG;IACjB,0BAA0B;IAC1B,cAAc,EAAE,mBAAmB,GAAG,IAAI,CAAA;IAC1C,wBAAwB;IACxB,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAA;CACf,CAAC;AAuMF,QAAA,MAAM,YAAY;;;;;;;;;;;;kFAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -12,7 +12,7 @@ var _hoisted_3 = {
 };
 var _hoisted_4 = { class: "sr-only" };
 var _hoisted_5 = { class: "overflow-x-auto" };
-var Selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Selector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Selector",
 	props: {
 		selectedServer: {},

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

@@ -1 +1 @@
-{"version":3,"file":"Selector.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-asyncapi-server-selector-block/components/Selector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { AsyncApiServerEntry } from '@scalar/workspace-store/channel-example'\nimport { computed } from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nconst { target, servers, selectedServer } = defineProps<{\n  /** The selected server */\n  selectedServer: AsyncApiServerEntry | null\n  /** Available servers */\n  servers: AsyncApiServerEntry[]\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted with the server name when the selected server changes */\n  (e: 'update:modelValue', value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\n/**\n * AsyncAPI servers are a named map without a single `url`, so we key options by\n * the server name and label them with the constructed connection URL.\n */\nconst serverOptions = computed(() =>\n  servers.map((server) => ({\n    id: server.name,\n    label: server.url,\n  })),\n)\n\nconst serverUrlWithoutTrailingSlash = computed(\n  () => selectedServer?.url?.replace(/\\/$/, '') || '',\n)\n\nconst selectedServerOption = computed(() =>\n  serverOptions.value.find((opt) => opt.id === selectedServer?.name),\n)\n\n// For testing\ndefineExpose({\n  servers,\n  serverUrlWithoutTrailingSlash,\n  serverOptions,\n  selectedServer,\n})\n</script>\n<template>\n  <ScalarListbox\n    v-if=\"serverOptions.length > 1\"\n    ref=\"elem\"\n    class=\"group\"\n    :modelValue=\"selectedServerOption\"\n    :options=\"serverOptions\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    @update:modelValue=\"(e) => emit('update:modelValue', e.id)\">\n    <ScalarButton\n      class=\"bg-b-1 text-c-1 h-auto w-full justify-start gap-1.5 overflow-x-auto rounded-t-none !rounded-b-xl px-3 py-1.5 text-base/5.25 font-normal whitespace-nowrap -outline-offset-1\"\n      variant=\"ghost\">\n      <span class=\"sr-only\">{{ translate('server.label') }}:</span>\n      <span class=\"overflow-x-auto\">\n        {{ serverUrlWithoutTrailingSlash || translate('server.select') }}\n      </span>\n      <ScalarIconCaretDown\n        class=\"text-c-2 ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n  <div\n    v-else\n    class=\"text-c-1 flex h-auto w-full items-center gap-0.75 !rounded-b-xl px-3 py-1.5 text-base leading-[20px] whitespace-nowrap\">\n    <span class=\"sr-only\">{{ translate('server.label') }}:</span>\n    <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,OAAO;EAKb,MAAM,EAAE,cAAc,iBAAgB;;;;;EAMtC,MAAM,gBAAgB,eACpB,QAAA,QAAQ,KAAK,YAAY;GACvB,IAAI,OAAO;GACX,OAAO,OAAO;GACf,EAAE,CACL;EAEA,MAAM,gCAAgC,eAC9B,QAAA,gBAAgB,KAAK,QAAQ,OAAO,GAAG,IAAI,GACnD;EAEA,MAAM,uBAAuB,eAC3B,cAAc,MAAM,MAAM,QAAQ,IAAI,OAAO,QAAA,gBAAgB,KAAK,CACpE;AAGA,WAAa;GACX,SAAM,QAAA;GACN;GACA;GACA,gBAAa,QAAA;GACd,CAAA;;UAIS,cAAA,MAAc,SAAM,KAAA,WAAA,EAD5B,YAqBgB,MAAA,cAAA,EAAA;;IAnBd,KAAI;IACJ,OAAM;IACL,YAAY,qBAAA;IACZ,SAAS,cAAA;IACV,WAAU;IACV,QAAA;IACC,QAAQ,QAAA;IACR,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAM,KAAI,qBAAsB,EAAE,GAAE;;2BAW1C,CAVf,YAUe,MAAA,aAAA,EAAA;KATb,OAAM;KACN,SAAQ;;4BACqD;MAA7D,mBAA6D,QAA7D,YAA6D,gBAApC,MAAA,UAAS,CAAA,eAAA,CAAA,GAAmB,KAAC,EAAA;MACtD,mBAEO,QAFP,YAEO,gBADF,8BAAA,SAAiC,MAAA,UAAS,CAAA,gBAAA,CAAA,EAAA,EAAA;MAE/C,YAEkB,MAAA,oBAAA,EAAA;OADhB,OAAM;OACN,QAAO;;;;;;;;;;uBAGb,mBAKM,OALN,YAKM,CAFJ,mBAA6D,QAA7D,YAA6D,gBAApC,MAAA,UAAS,CAAA,eAAA,CAAA,GAAmB,KAAC,EAAA,EACtD,mBAAwE,QAAxE,YAAwE,gBAAvC,8BAAA,MAA6B,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"Selector.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-asyncapi-server-selector-block/components/Selector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { AsyncApiServerEntry } from '@scalar/workspace-store/channel-example'\nimport { computed } from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nconst { target, servers, selectedServer } = defineProps<{\n  /** The selected server */\n  selectedServer: AsyncApiServerEntry | null\n  /** Available servers */\n  servers: AsyncApiServerEntry[]\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted with the server name when the selected server changes */\n  (e: 'update:modelValue', value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\n/**\n * AsyncAPI servers are a named map without a single `url`, so we key options by\n * the server name and label them with the constructed connection URL.\n */\nconst serverOptions = computed(() =>\n  servers.map((server) => ({\n    id: server.name,\n    label: server.url,\n  })),\n)\n\nconst serverUrlWithoutTrailingSlash = computed(\n  () => selectedServer?.url?.replace(/\\/$/, '') || '',\n)\n\nconst selectedServerOption = computed(() =>\n  serverOptions.value.find((opt) => opt.id === selectedServer?.name),\n)\n\n// For testing\ndefineExpose({\n  servers,\n  serverUrlWithoutTrailingSlash,\n  serverOptions,\n  selectedServer,\n})\n</script>\n<template>\n  <ScalarListbox\n    v-if=\"serverOptions.length > 1\"\n    ref=\"elem\"\n    class=\"group\"\n    :modelValue=\"selectedServerOption\"\n    :options=\"serverOptions\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    @update:modelValue=\"(e) => emit('update:modelValue', e.id)\">\n    <ScalarButton\n      class=\"bg-b-1 text-c-1 h-auto w-full justify-start gap-1.5 overflow-x-auto rounded-t-none !rounded-b-xl px-3 py-1.5 text-base/5.25 font-normal whitespace-nowrap -outline-offset-1\"\n      variant=\"ghost\">\n      <span class=\"sr-only\">{{ translate('server.label') }}:</span>\n      <span class=\"overflow-x-auto\">\n        {{ serverUrlWithoutTrailingSlash || translate('server.select') }}\n      </span>\n      <ScalarIconCaretDown\n        class=\"text-c-2 ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n  <div\n    v-else\n    class=\"text-c-1 flex h-auto w-full items-center gap-0.75 !rounded-b-xl px-3 py-1.5 text-base leading-[20px] whitespace-nowrap\">\n    <span class=\"sr-only\">{{ translate('server.label') }}:</span>\n    <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,OAAO;EAKb,MAAM,EAAE,cAAc,gBAAgB;;;;;EAMtC,MAAM,gBAAgB,eACpB,QAAA,QAAQ,KAAK,YAAY;GACvB,IAAI,OAAO;GACX,OAAO,OAAO;EAChB,EAAE,CACJ;EAEA,MAAM,gCAAgC,eAC9B,QAAA,gBAAgB,KAAK,QAAQ,OAAO,EAAE,KAAK,EACnD;EAEA,MAAM,uBAAuB,eAC3B,cAAc,MAAM,MAAM,QAAQ,IAAI,OAAO,QAAA,gBAAgB,IAAI,CACnE;EAGA,SAAa;GACX,SAAM,QAAA;GACN;GACA;GACA,gBAAa,QAAA;EACf,CAAC;;UAIS,cAAA,MAAc,SAAM,KAAA,UAAA,GAD5B,YAqBgB,MAAA,aAAA,GAAA;;IAnBd,KAAI;IACJ,OAAM;IACL,YAAY,qBAAA;IACZ,SAAS,cAAA;IACV,WAAU;IACV,QAAA;IACC,QAAQ,QAAA;IACR,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAM,KAAI,qBAAsB,EAAE,EAAE;;2BAW1C,CAVf,YAUe,MAAA,YAAA,GAAA;KATb,OAAM;KACN,SAAQ;;4BACqD;MAA7D,mBAA6D,QAA7D,YAA6D,gBAApC,MAAA,SAAA,CAAS,CAAA,cAAA,CAAA,IAAmB,KAAC,CAAA;MACtD,mBAEO,QAFP,YAEO,gBADF,8BAAA,SAAiC,MAAA,SAAA,CAAS,CAAA,eAAA,CAAA,GAAA,CAAA;MAE/C,YAEkB,MAAA,mBAAA,GAAA;OADhB,OAAM;OACN,QAAO;;;;;;;;;;uBAGb,mBAKM,OALN,YAKM,CAFJ,mBAA6D,QAA7D,YAA6D,gBAApC,MAAA,SAAA,CAAS,CAAA,cAAA,CAAA,IAAmB,KAAC,CAAA,GACtD,mBAAwE,QAAxE,YAAwE,gBAAvC,8BAAA,KAA6B,GAAA,CAAA,CAAA,CAAA"}

package/dist/blocks/scalar-asyncapi-sidebar-filters-block/components/AsyncApiSidebarFilters.vue.script.js

@@ -14,9 +14,9 @@ import { getAsyncApiProtocols, getAsyncApiServerOptions } from "@scalar/workspac
 * section hides when neither picker has a real choice — so passing an OpenAPI
 * document (or `null`) renders nothing.
 */
-var AsyncApiSidebarFilters_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var AsyncApiSidebarFilters_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "AsyncApiSidebarFilters",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		document: {},
 		is: { default: "li" }
 	}, {

package/dist/blocks/scalar-asyncapi-sidebar-filters-block/components/AsyncApiSidebarFilters.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"AsyncApiSidebarFilters.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-asyncapi-sidebar-filters-block/components/AsyncApiSidebarFilters.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarSidebarSection } from '@scalar/components/sidebar'\nimport type { AsyncApiDocument } from '@scalar/types/asyncapi/3.1'\nimport {\n  getAsyncApiProtocols,\n  getAsyncApiServerOptions,\n} from '@scalar/workspace-store/channel-example'\nimport { computed, type Component } from 'vue'\n\nimport SidebarFilter from './SidebarFilter.vue'\n\n/**\n * AsyncApiSidebarFilters\n *\n * The \"Filters\" sidebar section shown for AsyncAPI documents. Bundling the\n * native sidebar title and picker pair here keeps the two sidebar layouts\n * (modern and classic) from each repeating the option-building logic.\n *\n * Each picker hides itself when there is nothing to choose from, and the whole\n * section hides when neither picker has a real choice — so passing an OpenAPI\n * document (or `null`) renders nothing.\n */\nconst { document, is = 'li' } = defineProps<{\n  /** The active document, or `null` for OpenAPI documents (renders nothing). */\n  document: AsyncApiDocument | null\n  /** Render element for the sidebar section wrapper. */\n  is?: Component | string\n}>()\n\n/** Selected protocol id; empty string clears the filter. */\nconst protocol = defineModel<string>('protocol', { default: '' })\n\n/** Selected server name; empty string clears the filter. */\nconst server = defineModel<string>('server', { default: '' })\n\n/** Protocol picker options, including the leading \"All protocols\" entry. */\nconst protocolOptions = computed(() =>\n  document ? getAsyncApiProtocols(document) : [],\n)\n\n/** Server picker options, including the leading \"All servers\" entry. */\nconst serverOptions = computed(() =>\n  document ? getAsyncApiServerOptions(document) : [],\n)\n\n/** Each picker is only worth showing when there is a choice beyond \"All …\". */\nconst showProtocol = computed(() => protocolOptions.value.length > 2)\nconst showServer = computed(() => serverOptions.value.length > 2)\n</script>\n\n<template>\n  <ScalarSidebarSection\n    :is\n    v-if=\"showProtocol || showServer\"\n    class=\"asyncapi-sidebar-filters\">\n    Filters\n    <template #items>\n      <SidebarFilter\n        v-if=\"showProtocol\"\n        v-model=\"protocol\"\n        label=\"Protocol\"\n        :options=\"protocolOptions\" />\n      <SidebarFilter\n        v-if=\"showServer\"\n        v-model=\"server\"\n        label=\"Server\"\n        :options=\"serverOptions\" />\n    </template>\n  </ScalarSidebarSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,WAAW,SAAmB,SAAC,WAA2B;;EAGhE,MAAM,SAAS,SAAmB,SAAC,SAAyB;;EAG5D,MAAM,kBAAkB,eACtB,QAAA,WAAW,qBAAqB,QAAA,SAAS,GAAG,EAAE,CAChD;;EAGA,MAAM,gBAAgB,eACpB,QAAA,WAAW,yBAAyB,QAAA,SAAS,GAAG,EAAE,CACpD;;EAGA,MAAM,eAAe,eAAe,gBAAgB,MAAM,SAAS,EAAC;EACpE,MAAM,aAAa,eAAe,cAAc,MAAM,SAAS,EAAC;;UAMtD,aAAA,SAAgB,WAAA,SAAA,WAAA,EAFxB,YAiBuB,MAAA,qBAAA,EAAA;;IAhBpB,IAAA,QAAA;IAED,OAAM;;IAEK,OAAK,cAKiB,CAHvB,aAAA,SAAA,WAAA,EADR,YAI+B,uBAAA;;iBAFpB,SAAA;2EAAQ,QAAA;KACjB,OAAM;KACL,SAAS,gBAAA;4EAEJ,WAAA,SAAA,WAAA,EADR,YAI6B,uBAAA;;iBAFlB,OAAA;yEAAM,QAAA;KACf,OAAM;KACL,SAAS,cAAA;;2BAVd,CAAA,OAAA,OAAA,OAAA,KAAA,gBAFiC,aAEjC,GAAA,EAAA,CAAA"}
+{"version":3,"file":"AsyncApiSidebarFilters.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-asyncapi-sidebar-filters-block/components/AsyncApiSidebarFilters.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarSidebarSection } from '@scalar/components/sidebar'\nimport type { AsyncApiDocument } from '@scalar/types/asyncapi/3.1'\nimport {\n  getAsyncApiProtocols,\n  getAsyncApiServerOptions,\n} from '@scalar/workspace-store/channel-example'\nimport { computed, type Component } from 'vue'\n\nimport SidebarFilter from './SidebarFilter.vue'\n\n/**\n * AsyncApiSidebarFilters\n *\n * The \"Filters\" sidebar section shown for AsyncAPI documents. Bundling the\n * native sidebar title and picker pair here keeps the two sidebar layouts\n * (modern and classic) from each repeating the option-building logic.\n *\n * Each picker hides itself when there is nothing to choose from, and the whole\n * section hides when neither picker has a real choice — so passing an OpenAPI\n * document (or `null`) renders nothing.\n */\nconst { document, is = 'li' } = defineProps<{\n  /** The active document, or `null` for OpenAPI documents (renders nothing). */\n  document: AsyncApiDocument | null\n  /** Render element for the sidebar section wrapper. */\n  is?: Component | string\n}>()\n\n/** Selected protocol id; empty string clears the filter. */\nconst protocol = defineModel<string>('protocol', { default: '' })\n\n/** Selected server name; empty string clears the filter. */\nconst server = defineModel<string>('server', { default: '' })\n\n/** Protocol picker options, including the leading \"All protocols\" entry. */\nconst protocolOptions = computed(() =>\n  document ? getAsyncApiProtocols(document) : [],\n)\n\n/** Server picker options, including the leading \"All servers\" entry. */\nconst serverOptions = computed(() =>\n  document ? getAsyncApiServerOptions(document) : [],\n)\n\n/** Each picker is only worth showing when there is a choice beyond \"All …\". */\nconst showProtocol = computed(() => protocolOptions.value.length > 2)\nconst showServer = computed(() => serverOptions.value.length > 2)\n</script>\n\n<template>\n  <ScalarSidebarSection\n    :is\n    v-if=\"showProtocol || showServer\"\n    class=\"asyncapi-sidebar-filters\">\n    Filters\n    <template #items>\n      <SidebarFilter\n        v-if=\"showProtocol\"\n        v-model=\"protocol\"\n        label=\"Protocol\"\n        :options=\"protocolOptions\" />\n      <SidebarFilter\n        v-if=\"showServer\"\n        v-model=\"server\"\n        label=\"Server\"\n        :options=\"serverOptions\" />\n    </template>\n  </ScalarSidebarSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,WAAW,SAAmB,SAAC,UAA2B;;EAGhE,MAAM,SAAS,SAAmB,SAAC,QAAyB;;EAG5D,MAAM,kBAAkB,eACtB,QAAA,WAAW,qBAAqB,QAAA,QAAQ,IAAI,CAAC,CAC/C;;EAGA,MAAM,gBAAgB,eACpB,QAAA,WAAW,yBAAyB,QAAA,QAAQ,IAAI,CAAC,CACnD;;EAGA,MAAM,eAAe,eAAe,gBAAgB,MAAM,SAAS,CAAC;EACpE,MAAM,aAAa,eAAe,cAAc,MAAM,SAAS,CAAC;;UAMtD,aAAA,SAAgB,WAAA,SAAA,UAAA,GAFxB,YAiBuB,MAAA,oBAAA,GAAA;;IAhBpB,IAAA,QAAA;IAED,OAAM;;IAEK,OAAK,cAKiB,CAHvB,aAAA,SAAA,UAAA,GADR,YAI+B,uBAAA;;iBAFpB,SAAA;2EAAQ,QAAA;KACjB,OAAM;KACL,SAAS,gBAAA;4EAEJ,WAAA,SAAA,UAAA,GADR,YAI6B,uBAAA;;iBAFlB,OAAA;yEAAM,QAAA;KACf,OAAM;KACL,SAAS,cAAA;;2BAVd,CAAA,OAAA,OAAA,OAAA,KAAA,gBAFiC,aAEjC,EAAA,EAAA,CAAA"}

package/dist/blocks/scalar-asyncapi-sidebar-filters-block/components/SidebarFilter.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarFilter.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-asyncapi-sidebar-filters-block/components/SidebarFilter.vue"],"names":[],"mappings":"AAmEA;;;;;;;;GAQG;AACH,KAAK,WAAW,GAAG;IACjB,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACxC,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAC;AA0HF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"SidebarFilter.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-asyncapi-sidebar-filters-block/components/SidebarFilter.vue"],"names":[],"mappings":"AAmEA;;;;;;;;GAQG;AACH,KAAK,WAAW,GAAG;IACjB,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACxC,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAC;AA2HF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/blocks/scalar-asyncapi-sidebar-filters-block/components/SidebarFilter.vue.script.js

@@ -14,7 +14,7 @@ var _hoisted_2 = { class: "text-c-1 truncate" };
 * `options` is expected to lead with an "All …" entry, which is also used as the
 * fallback selection — so the first option doubles as the cleared state.
 */
-var SidebarFilter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var SidebarFilter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "SidebarFilter",
 	props: {
 		label: {},

package/dist/blocks/scalar-asyncapi-sidebar-filters-block/components/SidebarFilter.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarFilter.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-asyncapi-sidebar-filters-block/components/SidebarFilter.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport { ScalarSidebarButton } from '@scalar/components/sidebar'\nimport { ScalarIconCaretUpDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\n/**\n * SidebarFilter\n *\n * A compact picker inside the AsyncAPI sidebar filters section. Reused for the\n * stacked protocol and server filters.\n *\n * `options` is expected to lead with an \"All …\" entry, which is also used as the\n * fallback selection — so the first option doubles as the cleared state.\n */\nconst props = defineProps<{\n  /** Row label shown to the left of the dropdown (e.g. \"Protocol\"). */\n  label: string\n  /** Filter options, leading with the \"All …\" entry that clears the filter. */\n  options: { id: string; label: string }[]\n  /** The currently selected option id. */\n  modelValue?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', id: string): void\n}>()\n\n/** Falls back to the first (\"All …\") option when nothing matches. */\nconst selected = computed(\n  () =>\n    props.options.find((o) => o.id === props.modelValue) ?? props.options[0],\n)\n</script>\n\n<template>\n  <li class=\"asyncapi-sidebar-filter min-w-0\">\n    <ScalarListbox\n      :label=\"label\"\n      :modelValue=\"selected\"\n      :options=\"options\"\n      resize\n      teleport\n      @update:modelValue=\"(e) => emit('update:modelValue', e.id)\">\n      <ScalarSidebarButton\n        is=\"button\"\n        class=\"w-full items-center text-left\">\n        <span class=\"text-c-1 truncate\">\n          {{ selected?.label }}\n        </span>\n        <template #aside>\n          <ScalarIconCaretUpDown\n            class=\"text-c-1 ml-1 size-3 shrink-0 self-center\"\n            weight=\"bold\" />\n        </template>\n      </ScalarSidebarButton>\n    </ScalarListbox>\n  </li>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EASd,MAAM,OAAO;;EAKb,MAAM,WAAW,eAEb,MAAM,QAAQ,MAAM,MAAM,EAAE,OAAO,MAAM,WAAW,IAAI,MAAM,QAAQ,GAC1E;;uBAIE,mBAqBK,MArBL,YAqBK,CApBH,YAmBgB,MAAA,cAAA,EAAA;IAlBb,OAAO,QAAA;IACP,YAAY,SAAA;IACZ,SAAS,QAAA;IACV,QAAA;IACA,UAAA;IACC,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAM,KAAI,qBAAsB,EAAE,GAAE;;2BAYnC,CAXtB,YAWsB,MAAA,oBAAA,EAAA;KAVpB,IAAG;KACH,OAAM;;KAIK,OAAK,cAGI,CAFlB,YAEkB,MAAA,sBAAA,EAAA;MADhB,OAAM;MACN,QAAO;;4BAJJ,CAFP,mBAEO,QAFP,YAEO,gBADF,SAAA,OAAU,MAAK,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"SidebarFilter.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-asyncapi-sidebar-filters-block/components/SidebarFilter.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport { ScalarSidebarButton } from '@scalar/components/sidebar'\nimport { ScalarIconCaretUpDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\n/**\n * SidebarFilter\n *\n * A compact picker inside the AsyncAPI sidebar filters section. Reused for the\n * stacked protocol and server filters.\n *\n * `options` is expected to lead with an \"All …\" entry, which is also used as the\n * fallback selection — so the first option doubles as the cleared state.\n */\nconst props = defineProps<{\n  /** Row label shown to the left of the dropdown (e.g. \"Protocol\"). */\n  label: string\n  /** Filter options, leading with the \"All …\" entry that clears the filter. */\n  options: { id: string; label: string }[]\n  /** The currently selected option id. */\n  modelValue?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', id: string): void\n}>()\n\n/** Falls back to the first (\"All …\") option when nothing matches. */\nconst selected = computed(\n  () =>\n    props.options.find((o) => o.id === props.modelValue) ?? props.options[0],\n)\n</script>\n\n<template>\n  <li class=\"asyncapi-sidebar-filter min-w-0\">\n    <ScalarListbox\n      :label=\"label\"\n      :modelValue=\"selected\"\n      :options=\"options\"\n      resize\n      teleport\n      @update:modelValue=\"(e) => emit('update:modelValue', e.id)\">\n      <ScalarSidebarButton\n        is=\"button\"\n        class=\"w-full items-center text-left\">\n        <span class=\"text-c-1 truncate\">\n          {{ selected?.label }}\n        </span>\n        <template #aside>\n          <ScalarIconCaretUpDown\n            class=\"text-c-1 ml-1 size-3 shrink-0 self-center\"\n            weight=\"bold\" />\n        </template>\n      </ScalarSidebarButton>\n    </ScalarListbox>\n  </li>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EASd,MAAM,OAAO;;EAKb,MAAM,WAAW,eAEb,MAAM,QAAQ,MAAM,MAAM,EAAE,OAAO,MAAM,UAAU,KAAK,MAAM,QAAQ,EAC1E;;uBAIE,mBAqBK,MArBL,YAqBK,CApBH,YAmBgB,MAAA,aAAA,GAAA;IAlBb,OAAO,QAAA;IACP,YAAY,SAAA;IACZ,SAAS,QAAA;IACV,QAAA;IACA,UAAA;IACC,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAM,KAAI,qBAAsB,EAAE,EAAE;;2BAYnC,CAXtB,YAWsB,MAAA,mBAAA,GAAA;KAVpB,IAAG;KACH,OAAM;;KAIK,OAAK,cAGI,CAFlB,YAEkB,MAAA,qBAAA,GAAA;MADhB,OAAM;MACN,QAAO;;4BAJJ,CAFP,mBAEO,QAFP,YAEO,gBADF,SAAA,OAAU,KAAK,GAAA,CAAA,CAAA,CAAA"}

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

@@ -1 +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"}
+{"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,QAAQ;;;;;;;;;;;;;;AAezD,IAAM,eACJ,OACA,UACA,QACA,YAC0B;CAC1B,IAAI,MAAM,SAAS,sBAAsB;EACvC,MAAM,gBAAgB,SAAS,aAAa,MAAM;EAElD,IAAI,CAAC,eACH,OAAO;EAQT,MAAM,EAAE,WAAW,gBAAgB,yBAAyB,UAH1C,eAAe,eAAe,sBAGsB,GAAW,OAAO;EAGxF,OAFa,iBAAiB,WAAW,OAAO,QAAQ,KAAK,iBAAiB,aAAa,OAAO,MAAM,IAE1F,QAAQ;CACxB;CAEA,IAAI,MAAM,SAAS,sBAAsB,MAAM,SAAS,OAAO;EAC7D,MAAM,mBAAmB,MAAM,YAAY,CAAC;EAC5C,MAAM,WAAW,iBAAiB,SAAS,UAAU;GACnD,MAAM,WAAW,YAAY,OAAO,UAAU,QAAQ,OAAO;GAC7D,OAAO,WAAW,CAAC,QAAQ,IAAI,CAAC;EAClC,CAAC;EAGD,IAAI,iBAAiB,SAAS,KAAK,SAAS,WAAW,GACrD,OAAO;EAGT,OAAO;GAAE,GAAG;GAAO;EAAS;CAC9B;CAEA,OAAO;AACT;;;;;;;AAQA,IAAa,4BACX,SACA,UACA,WACqB;CACrB,IAAI,aAAa,MAAM,GACrB,OAAO;CAIT,MAAM,UAAU,0BAA0B,QAAQ;CAElD,OAAO,QAAQ,SAAS,UAAU;EAChC,MAAM,WAAW,YAAY,OAAO,UAAU,QAAQ,OAAO;EAC7D,OAAO,WAAW,CAAC,QAAQ,IAAI,CAAC;CAClC,CAAC;AACH"}

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

@@ -1,12 +1,10 @@
-import { type ClientOption, type ClientOptionGroup } from '@scalar/blocks/code-example';
+import { type ClientOptionGroup } from '@scalar/blocks/code-example';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
 type __VLS_Props = {
     /** Client options */
     clientOptions: ClientOptionGroup[];
     /** The currently selected Http Client (a built-in client id or a custom sample id) */
     selectedClient?: string;
-    /** List of featured clients */
-    featuredClients: ClientOption[];
     /** Event bus */
     eventBus: WorkspaceEventBus;
 };

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":"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"}
+{"version":3,"file":"ClientDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientDropdown.vue"],"names":[],"mappings":"AAqNA,OAAO,EAIL,KAAK,iBAAiB,EAEvB,MAAM,6BAA6B,CAAA;AAKpC,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAMvE,KAAK,WAAW,GAAG;IACjB,qBAAqB;IACrB,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AAiMF,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-783c0ba4"]]);
+var ClientDropdown_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ClientDropdown_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-da3e3bd2"]]);
 //#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/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":""}
+{"version":3,"file":"ClientDropdown.vue.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\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, eventBus, selectedClient } = 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  /** 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  <!--\n    Lives beside the TabList (not inside it). A combobox button is not a tab,\n    so placing it in role=\"tablist\" fails aria-required-children.\n  -->\n  <div\n    ref=\"containerRef\"\n    class=\"client-libraries-more\">\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/* One even column, the same width as each tab beside it */\n.client-libraries-more {\n  display: flex;\n  flex: 1 1 0;\n  min-width: 0;\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.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.client-libraries__active {\n  color: var(--scalar-color-1);\n  border-bottom: 1px solid var(--scalar-color-1);\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@container client-libraries-list (width < 400px) {\n  .client-libraries-more {\n    flex: 0 0 auto;\n  }\n  .client-libraries__select {\n    width: fit-content;\n\n    .client-libraries-icon__more + span {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1,18 +1,16 @@
 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 { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, withCtx } from "vue";
 import { filterClientsByQuery, findClient } from "@scalar/blocks/code-example";
-import { ScalarCombobox } from "@scalar/components/combobox";
 import { ScalarIcon } from "@scalar/components/icon";
+import { ScalarCombobox } from "@scalar/components/combobox";
 import { freezeElement } from "@scalar/helpers/dom/freeze-element";
 //#region src/blocks/scalar-client-selector-block/components/ClientDropdown.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "client-libraries-text" };
-var _hoisted_2 = {
+var _hoisted_1 = {
 	"aria-hidden": "true",
 	class: "client-libraries-icon__more"
 };
-var _hoisted_3 = {
+var _hoisted_2 = {
 	key: 1,
 	class: "client-libraries-icon",
 	height: "50",
@@ -21,17 +19,16 @@ var _hoisted_3 = {
 	width: "50",
 	xmlns: "http://www.w3.org/2000/svg"
 };
-var _hoisted_4 = {
+var _hoisted_3 = {
 	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({
+var _hoisted_4 = { class: "sr-only" };
+var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ClientDropdown",
 	props: {
 		clientOptions: {},
 		selectedClient: {},
-		featuredClients: {},
 		eventBus: {}
 	},
 	setup(__props) {
@@ -57,19 +54,8 @@ var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			return openBlock(), createElementBlock("div", {
 				ref_key: "containerRef",
 				ref: containerRef,
-				class: "client-libraries-content"
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.featuredClients, (featuredClient) => {
-				return openBlock(), createBlock(unref(Tab), {
-					key: featuredClient.clientKey,
-					class: normalizeClass(["client-libraries rendered-code-sdks", { "client-libraries__active": featuredClient.id === __props.selectedClient }])
-				}, {
-					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(`client-libraries-icon__${featuredClient.targetKey}`) }, [createVNode(unref(ScalarIcon), {
-						class: "client-libraries-icon",
-						icon: getIconByLanguageKey(featuredClient.targetKey)
-					}, null, 8, ["icon"])], 2), createElementVNode("span", _hoisted_1, toDisplayString(featuredClient.targetTitle), 1)]),
-					_: 2
-				}, 1032, ["class"]);
-			}), 128)), createVNode(unref(ScalarCombobox), {
+				class: "client-libraries-more"
+			}, [createVNode(unref(ScalarCombobox), {
 				filterFn: unref(filterClientsByQuery),
 				modelValue: unref(findClient)(__props.clientOptions, __props.selectedClient),
 				options: __props.clientOptions,
@@ -81,19 +67,19 @@ var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					class: normalizeClass(["client-libraries client-libraries__select", { "client-libraries__active": __props.selectedClient && !unref(isFeaturedClient)(__props.selectedClient) }]),
 					type: "button"
 				}, [
-					createElementVNode("div", _hoisted_2, [__props.selectedClient && !unref(isFeaturedClient)(__props.selectedClient) ? (openBlock(), createElementBlock("div", {
+					createElementVNode("div", _hoisted_1, [__props.selectedClient && !unref(isFeaturedClient)(__props.selectedClient) ? (openBlock(), createElementBlock("div", {
 						key: 0,
 						class: normalizeClass(`client-libraries-icon__${selectedTargetKey.value}`)
 					}, [selectedTargetKey.value ? (openBlock(), createBlock(unref(ScalarIcon), {
 						key: 0,
 						class: "client-libraries-icon",
 						icon: getIconByLanguageKey(selectedTargetKey.value)
-					}, null, 8, ["icon"])) : createCommentVNode("", true)], 2)) : (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[1] || (_cache[1] = [createElementVNode("g", {
+					}, null, 8, ["icon"])) : createCommentVNode("", true)], 2)) : (openBlock(), createElementBlock("svg", _hoisted_2, [..._cache[1] || (_cache[1] = [createElementVNode("g", {
 						fill: "currentColor",
 						"fill-rule": "nonzero"
 					}, [createElementVNode("path", { d: "M10.71 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M21.13 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M31.55 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0" })], -1)])]))]),
-					__props.clientOptions.length ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(translate)("clientLibraries.more")), 1)) : createCommentVNode("", true),
-					createElementVNode("span", _hoisted_5, toDisplayString(unref(translate)("clientLibraries.selectAll")), 1)
+					__props.clientOptions.length ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(translate)("clientLibraries.more")), 1)) : createCommentVNode("", true),
+					createElementVNode("span", _hoisted_4, 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/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"}
+{"version":3,"file":"ClientDropdown.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\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, eventBus, selectedClient } = 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  /** 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  <!--\n    Lives beside the TabList (not inside it). A combobox button is not a tab,\n    so placing it in role=\"tablist\" fails aria-required-children.\n  -->\n  <div\n    ref=\"containerRef\"\n    class=\"client-libraries-more\">\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/* One even column, the same width as each tab beside it */\n.client-libraries-more {\n  display: flex;\n  flex: 1 1 0;\n  min-width: 0;\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.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.client-libraries__active {\n  color: var(--scalar-color-1);\n  border-bottom: 1px solid var(--scalar-color-1);\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@container client-libraries-list (width < 400px) {\n  .client-libraries-more {\n    flex: 0 0 auto;\n  }\n  .client-libraries__select {\n    width: fit-content;\n\n    .client-libraries-icon__more + span {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,eAAe,IAAiB;EACtC,MAAM,EAAE,cAAc,gBAAgB;;;;;EAMtC,MAAM,wBAAwB,cAC5B,wBAAwB,cAAc,OAAO,eAAe;;EAG9D,MAAM,gBAAgB,WAA8C;GAClE,IAAI,CAAC,aAAa,OAChB;GAIF,MAAM,WAAW,cAAc,aAAa,KAAK;GACjD,iBAAiB;IACf,SAAS;GACX,GAAG,GAAG;GAGN,IAAI,OAAO,cAAc,UACvB,QAAA,SAAS,KAAK,oCAAoC,OAAO,EAAE;EAE/D;;EAGA,MAAM,oBAAoB,eAClB,QAAA,gBAAgB,MAAM,GAAG,CAAC,CAAC,EACnC;;uBAOE,mBAuDM,OAAA;aAtDA;IAAJ,KAAI;IACJ,OAAM;OACN,YAmDiB,MAAA,cAAA,GAAA;IAlDd,UAAU,MAAA,oBAAA;IACV,YAAY,MAAA,UAAA,CAAU,CAAC,QAAA,eAAe,QAAA,cAAc;IACpD,SAAS,QAAA;IACV,WAAU;IACV,UAAA;IACC,uBAAiB,OAAA,OAAA,OAAA,MAAA,WAAE,aAAa,MAAM;;2BA4C9B,CA3CT,mBA2CS,UAAA;KA1CP,OAAK,eAAA,CAAC,6CAA2C,EAAA,4BACW,QAAA,kBAAc,CAAK,MAAA,gBAAA,CAAgB,CAAC,QAAA,cAAc,EAAA,CAAA,CAAA;KAI9G,MAAK;;KACL,mBA2BM,OA3BN,YA2BM,CAxBY,QAAA,kBAAc,CAAK,MAAA,gBAAA,CAAgB,CAAC,QAAA,cAAc,KAAA,UAAA,GAChE,mBAKM,OAAA;;MALA,OAAK,eAAA,0BAA4B,kBAAA,OAAiB;SAE9C,kBAAA,SAAA,UAAA,GADR,YAGoD,MAAA,UAAA,GAAA;;MADlD,OAAM;MACL,MAAM,qBAAqB,kBAAA,KAAiB;iFAIjD,mBAaM,OAbN,YAaM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CANJ,mBAKI,KAAA;MAJF,MAAK;MACL,aAAU;SACV,mBACoL,QAAA,EAAlL,GAAE,8KAA6K,CAAA,CAAA,GAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;KAMjL,QAAA,cAAc,UAAA,UAAA,GADtB,mBAIO,QAJP,YAIO,gBADF,MAAA,SAAA,CAAS,CAAA,sBAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEd,mBAEO,QAFP,YAEO,gBADF,MAAA,SAAA,CAAS,CAAA,2BAAA,CAAA,GAAA,CAAA"}

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":"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"}
+{"version":3,"file":"ClientSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"names":[],"mappings":"AA+SA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,6BAA6B,CAAA;AAGpC,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;AAyTF,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-d02a9cbe"]]);
+var ClientSelector_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ClientSelector_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-34beffcc"]]);
 //#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/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":""}
+{"version":3,"file":"ClientSelector.vue.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'\nimport {\n  DEFAULT_CLIENT,\n  type ClientOptionGroup,\n} from '@scalar/blocks/code-example'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport type { TargetId } from '@scalar/types/snippetz'\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((client) => client.id === activeClient.value),\n)\n\nconst wrapper = useTemplateRef('wrapper-ref')\n\nconst getIconByLanguageKey = (targetKey: TargetId) =>\n  `programming-language-${targetKey === 'js' ? 'javascript' : targetKey}` as const\n\n/** Handle tab selection */\nconst onTabSelect = (index: number) => {\n  const client = featuredClients.value[index]\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      <!--\n        TabList may only contain Tab children (aria-required-children).\n        The \"More\" combobox sits beside it in the same visual row.\n      -->\n      <div class=\"client-libraries-list\">\n        <TabList\n          :aria-labelledby=\"headingId\"\n          class=\"client-libraries-tabs\"\n          :style=\"{ flexGrow: featuredClients.length }\">\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 === activeClient,\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        </TabList>\n\n        <ClientDropdown\n          :clientOptions\n          :eventBus\n          :selectedClient=\"activeClient\" />\n      </div>\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.client-libraries-list {\n  container: client-libraries-list / 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/* Grows once per tab it holds, so tabs and the \"More\" trigger stay even */\n.client-libraries-tabs {\n  display: flex;\n  flex: 1 1 0;\n  min-width: 0;\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__active {\n  color: var(--scalar-color-1);\n  border-bottom: 1px solid var(--scalar-color-1);\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@container client-libraries-list (width < 380px) {\n  .client-libraries {\n    width: 100%;\n  }\n  .client-libraries span {\n    display: none;\n  }\n}\n</style>\n"],"mappings":""}