@scalar/api-reference 1.58.0 → 1.59.0

package/CHANGELOG.md

@@ -1,5 +1,80 @@
 # @scalar/api-reference
 
+## 1.59.0
+
+### Minor Changes
+
+- [#9435](https://github.com/scalar/scalar/pull/9435): feat(api-reference): render AsyncAPI channel parameters
+
+  Channel address parameters (the `{param}` placeholders in a channel address) are now shown in the API reference, reusing the same parameter list component as OpenAPI operations. Their `enum`, `default`, and `examples` are displayed on a string schema.
+
+- [#9438](https://github.com/scalar/scalar/pull/9438): feat(api-reference): add an AsyncAPI server selector
+
+  Adds a server selector for AsyncAPI documents in the API reference introduction. It mirrors the OpenAPI server selector but works with the AsyncAPI server shape (a named map of `host`/`protocol`/`pathname`), labelling each server with its constructed connection URL.
+
+  Server selection and variable changes are now persisted to the workspace store via new `asyncapi-server:update:selected` and `asyncapi-server:update:variables` events and their mutators, mirroring the OpenAPI wiring.
+
+- [#9422](https://github.com/scalar/scalar/pull/9422): Add a `nonce` option for Content Security Policy support.
+
+  When you pass a `nonce`, the rendered HTML stamps it onto the inline `<script>` and the CDN `<script>` tag (and Scalar's own `<style>` tags, plus a matching `<meta property="csp-nonce">`). This lets the API Reference run under a strict `script-src` with no `unsafe-inline` and no `unsafe-eval`.
+
+  ```ts
+  ApiReference({
+    url: '/openapi.json',
+    // Match this value in your `script-src` CSP directive.
+    nonce: 'r4nd0m',
+  })
+  ```
+
+  Note: `style-src` still needs `'unsafe-inline'`. The reference renders inline `style="…"` attributes, which a CSP nonce can never authorize (nonces only apply to `<script>`, `<style>` and `<link>` elements), so a nonce-only `style-src` is not possible. The win is a fully strict `script-src`.
+
+- [#9400](https://github.com/scalar/scalar/pull/9400): feat(api-reference): add `expandAllSchemaProperties` config option.
+
+  When enabled, nested schema properties are expanded by default while keeping the
+  "Show/Hide Child Attributes" button available for manual collapsing. Expansion
+  is cycle-safe: every finite branch is expanded fully, and self-referential
+  ($ref or inline) schemas stop at the point they would otherwise recurse forever.
+
+- [#9399](https://github.com/scalar/scalar/pull/9399): Show custom SDK installation instructions from `x-scalar-sdk-installation` in the introduction card, falling back to the client selector when there are none. Each entry takes a `lang` and a Markdown `description`, so a single tab can render rich instructions with syntax-highlighted code blocks (for example Maven and Gradle for Java)
+
+### Patch Changes
+
+- [#9388](https://github.com/scalar/scalar/pull/9388): Add `ScalarVirtualCodeBlock` component with copy button support for virtualized code blocks
+- [#9436](https://github.com/scalar/scalar/pull/9436): Hide the client selector for AsyncAPI documents
+- [#9398](https://github.com/scalar/scalar/pull/9398): feat: read code samples from x-readme, x-stainless and x-scalar extensions
+
+  In addition to `x-codeSamples`, the code sample picker now reads custom samples from `x-scalar-examples`, `x-stainless-snippets`, `x-stainless-examples`, and `x-readme.code-samples`. When more than one is present on an operation, the highest-priority source is used (x-scalar-examples > x-stainless-snippets > x-stainless-examples > x-readme > x-codeSamples).
+
+- [#9426](https://github.com/scalar/scalar/pull/9426): feat(api-reference): render the contact URL from `info.contact.url`
+- [#8573](https://github.com/scalar/scalar/pull/8573): fix(api-reference): infer discriminator variants from mapping
+- [#9131](https://github.com/scalar/scalar/pull/9131): fix(api-reference): preserve OAuth redirect URI when switching OpenAPI documents
+
+  When using multiple OpenAPI documents with OAuth configured via `oauth2RedirectUri`,
+  switching to another document no longer clears the Redirect URL in the Authentication
+  section.
+
+  The fix threads `oauth2RedirectUri` from the top-level configuration into the security
+  scheme merge chain so that each newly loaded document's OAuth flows are pre-populated
+  with the configured redirect URI, rather than relying solely on a component-level watcher
+  that would skip re-population when the same OAuth flow identity was detected across
+  documents.
+
+- [#9391](https://github.com/scalar/scalar/pull/9391): fix: stabilize the tab title at the top of the document
+
+  The document-start sentinel and the Introduction section both fire an intersection event at scroll-top. They resolved to different entries, so the tab title raced between the section title and the document title. The sentinel now emits the Introduction entry, so both agree.
+
+- [#9370](https://github.com/scalar/scalar/pull/9370): fix(api-reference): rework the modern operation layout with CSS grid so the request example sits directly under the description on narrow screens, and move the operation title and auth badge into the same grid
+- [#9421](https://github.com/scalar/scalar/pull/9421): fix(api-reference): avoid SSR hydration mismatch from the search shortcut and teleport ids
+
+  The macOS search shortcut symbol was derived from `navigator` during render, so a Mac client hydrated `⌘` where the server sent `⌃`. The platform is now resolved after mount. Teleport target ids and the search modal ids also switched from `nanoid()` to Vue's SSR-stable `useId()`.
+
+- [#9392](https://github.com/scalar/scalar/pull/9392): Clean up the standalone build's injected `<head>` styles on `destroy()` so they no longer linger after SPA-style navigation (Turbo Drive, htmx). The styles are re-attached when a new instance mounts.
+- [#9420](https://github.com/scalar/scalar/pull/9420): fix(api-reference): make x-tagGroups titles navigable from search
+
+  Tag group titles appeared as search results but clicking them did nothing,
+  because the flattened modern layout rendered no element carrying the tag
+  group id to scroll to. The group now exposes its id as a scroll anchor.
+
 ## 1.58.0
 
 ### Minor Changes

package/dist/blocks/index.d.ts

@@ -1,3 +1,4 @@
+export { AsyncApiServerSelector } from './scalar-asyncapi-server-selector-block';
 export { ClientSelector } from './scalar-client-selector-block';
 export { InfoBlock, IntroductionCardItem } from './scalar-info-block';
 export { ServerSelector } from './scalar-server-selector-block';

package/dist/blocks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA"}

package/dist/blocks/index.js

@@ -1,5 +1,6 @@
+import AsyncApiServerSelector_default from "./scalar-asyncapi-server-selector-block/components/AsyncApiServerSelector.vue.js";
 import ClientSelector_default from "./scalar-client-selector-block/components/ClientSelector.vue.js";
 import InfoBlock_default from "./scalar-info-block/components/InfoBlock.vue.js";
 import IntroductionCardItem_default from "./scalar-info-block/components/IntroductionCardItem.vue.js";
 import ServerSelector_default from "./scalar-server-selector-block/components/ServerSelector.vue.js";
-export { ClientSelector_default as ClientSelector, InfoBlock_default as InfoBlock, IntroductionCardItem_default as IntroductionCardItem, ServerSelector_default as ServerSelector };
+export { AsyncApiServerSelector_default as AsyncApiServerSelector, ClientSelector_default as ClientSelector, InfoBlock_default as InfoBlock, IntroductionCardItem_default as IntroductionCardItem, ServerSelector_default as ServerSelector };

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

@@ -0,0 +1,24 @@
+import type { AsyncApiServerEntry } from '@scalar/workspace-store/channel-example';
+import type { WorkspaceEventBus } from '@scalar/workspace-store/events';
+type SelectorProps = {
+    /** The event bus to use for emitting events */
+    eventBus: WorkspaceEventBus;
+    /** The currently selected server */
+    selectedServer: AsyncApiServerEntry | null;
+    /** Available servers */
+    servers: AsyncApiServerEntry[];
+};
+/**
+ * AsyncApiServerSelector
+ *
+ * Core component for rendering an AsyncAPI server selector block. It mirrors the
+ * OpenAPI ServerSelector, but works with the AsyncAPI server shape (a named map
+ * of `host`/`protocol`/`pathname` rather than an array of `url`).
+ *
+ * @event asyncapi-server:update:selected - Emitted when the selected server changes
+ * @event asyncapi-server:update:variables - Emitted when a server variable changes
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<SelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SelectorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=AsyncApiServerSelector.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncApiServerSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-asyncapi-server-selector-block/components/AsyncApiServerSelector.vue"],"names":[],"mappings":"AAmHA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAA;AAClF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAOvE,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,sSAiKd,CAAC"}

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

@@ -0,0 +1,7 @@
+import AsyncApiServerSelector_vue_vue_type_script_setup_true_lang_default from "./AsyncApiServerSelector.vue.script.js";
+//#region src/blocks/scalar-asyncapi-server-selector-block/components/AsyncApiServerSelector.vue
+var AsyncApiServerSelector_default = AsyncApiServerSelector_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { AsyncApiServerSelector_default as default };
+
+//# sourceMappingURL=AsyncApiServerSelector.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncApiServerSelector.vue.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 Selector from './Selector.vue'\n\nconst { eventBus, servers, selectedServer } = defineProps<SelectorProps>()\n\nconst id = useId()\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    Server\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":""}

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

@@ -0,0 +1,80 @@
+import Selector_default from "./Selector.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, unref, useId } from "vue";
+import { ServerVariablesForm } from "@scalar/api-client/components/Server";
+import { ScalarMarkdown } from "@scalar/components/markdown";
+import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+//#region src/blocks/scalar-asyncapi-server-selector-block/components/AsyncApiServerSelector.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var AsyncApiServerSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "AsyncApiServerSelector",
+	props: {
+		eventBus: {},
+		selectedServer: {},
+		servers: {}
+	},
+	setup(__props) {
+		const id = useId();
+		/**
+		* Normalize AsyncAPI server variables into the shape the shared
+		* ServerVariablesForm expects (resolving references and defaulting `default`).
+		*/
+		const serverVariables = computed(() => {
+			const variables = __props.selectedServer?.server.variables;
+			if (!variables) return;
+			return Object.fromEntries(Object.entries(variables).map(([name, variable]) => {
+				const resolved = getResolvedRef(variable);
+				return [name, {
+					default: resolved.default ?? "",
+					enum: resolved.enum,
+					description: resolved.description
+				}];
+			}));
+		});
+		/** Update the selected server */
+		const updateServer = (name) => {
+			__props.eventBus.emit("asyncapi-server:update:selected", { name });
+		};
+		/** Update a server variable on the selected server */
+		const updateServerVariable = (key, value) => {
+			if (!__props.selectedServer) return;
+			__props.eventBus.emit("asyncapi-server:update:variables", {
+				name: __props.selectedServer.name,
+				key,
+				value
+			});
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				_cache[0] || (_cache[0] = createElementVNode("label", { class: "bg-b-2 flex h-8 items-center rounded-t-xl border-x border-t px-3 py-2.5 font-medium" }, " Server ", -1)),
+				createElementVNode("div", {
+					id: unref(id),
+					class: normalizeClass(["border", { "rounded-b-xl": !__props.selectedServer?.description && !serverVariables.value }])
+				}, [__props.servers.length ? (openBlock(), createBlock(Selector_default, {
+					key: 0,
+					selectedServer: __props.selectedServer,
+					servers: __props.servers,
+					target: unref(id),
+					"onUpdate:modelValue": updateServer
+				}, null, 8, [
+					"selectedServer",
+					"servers",
+					"target"
+				])) : createCommentVNode("", true)], 10, _hoisted_1),
+				createVNode(unref(ServerVariablesForm), {
+					layout: "reference",
+					variables: serverVariables.value,
+					"onUpdate:variable": updateServerVariable
+				}, null, 8, ["variables"]),
+				__props.selectedServer?.description ? (openBlock(), createBlock(unref(ScalarMarkdown), {
+					key: 0,
+					class: "text-c-3 rounded-b-xl border-x border-b px-3 py-1.5",
+					value: __props.selectedServer.description
+				}, null, 8, ["value"])) : createCommentVNode("", true)
+			], 64);
+		};
+	}
+});
+//#endregion
+export { AsyncApiServerSelector_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=AsyncApiServerSelector.vue.script.js.map

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

@@ -0,0 +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 Selector from './Selector.vue'\n\nconst { eventBus, servers, selectedServer } = defineProps<SelectorProps>()\n\nconst id = useId()\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    Server\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":";;;;;;;;;;;;;;;EAmCA,MAAM,KAAK,OAAM;;;;;EAMjB,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;;;;8BAKD,mBAGQ,SAAA,EAFN,OAAM,uFAAqF,EAAC,YAE9F,GAAA;IACA,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"}

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

@@ -0,0 +1,25 @@
+import type { AsyncApiServerEntry } from '@scalar/workspace-store/channel-example';
+type __VLS_Props = {
+    /** The selected server */
+    selectedServer: AsyncApiServerEntry | null;
+    /** Available servers */
+    servers: AsyncApiServerEntry[];
+    /** The id of the target to use for the popover (e.g. address bar) */
+    target: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    servers: AsyncApiServerEntry[];
+    serverUrlWithoutTrailingSlash: import("vue").ComputedRef<string>;
+    serverOptions: import("vue").ComputedRef<{
+        id: string;
+        label: string;
+    }[]>;
+    selectedServer: AsyncApiServerEntry | null;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=Selector.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-asyncapi-server-selector-block/components/Selector.vue"],"names":[],"mappings":"AAoFA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAA;AAGlF,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;AAmMF,QAAA,MAAM,YAAY;;;;;;;;;;;;kFAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -0,0 +1,7 @@
+import Selector_vue_vue_type_script_setup_true_lang_default from "./Selector.vue.script.js";
+//#region src/blocks/scalar-asyncapi-server-selector-block/components/Selector.vue
+var Selector_default = Selector_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Selector_default as default };
+
+//# sourceMappingURL=Selector.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.vue.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\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\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\">Server:</span>\n      <span class=\"overflow-x-auto\">{{\n        serverUrlWithoutTrailingSlash || 'Select a server'\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\">Server:</span>\n    <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,76 @@
+import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { ScalarIconCaretDown } from "@scalar/icons";
+import { ScalarButton } from "@scalar/components/button";
+import { ScalarListbox } from "@scalar/components/listbox";
+//#region src/blocks/scalar-asyncapi-server-selector-block/components/Selector.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "overflow-x-auto" };
+var _hoisted_2 = {
+	key: 1,
+	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"
+};
+var _hoisted_3 = { class: "overflow-x-auto" };
+var Selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Selector",
+	props: {
+		selectedServer: {},
+		servers: {},
+		target: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		/**
+		* AsyncAPI servers are a named map without a single `url`, so we key options by
+		* the server name and label them with the constructed connection URL.
+		*/
+		const serverOptions = computed(() => __props.servers.map((server) => ({
+			id: server.name,
+			label: server.url
+		})));
+		const serverUrlWithoutTrailingSlash = computed(() => __props.selectedServer?.url?.replace(/\/$/, "") || "");
+		const selectedServerOption = computed(() => serverOptions.value.find((opt) => opt.id === __props.selectedServer?.name));
+		__expose({
+			servers: __props.servers,
+			serverUrlWithoutTrailingSlash,
+			serverOptions,
+			selectedServer: __props.selectedServer
+		});
+		return (_ctx, _cache) => {
+			return serverOptions.value.length > 1 ? (openBlock(), createBlock(unref(ScalarListbox), {
+				key: 0,
+				ref: "elem",
+				class: "group",
+				modelValue: selectedServerOption.value,
+				options: serverOptions.value,
+				placement: "bottom-start",
+				resize: "",
+				target: __props.target,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = (e) => emit("update:modelValue", e.id))
+			}, {
+				default: withCtx(() => [createVNode(unref(ScalarButton), {
+					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",
+					variant: "ghost"
+				}, {
+					default: withCtx(() => [
+						_cache[1] || (_cache[1] = createElementVNode("span", { class: "sr-only" }, "Server:", -1)),
+						createElementVNode("span", _hoisted_1, toDisplayString(serverUrlWithoutTrailingSlash.value || "Select a server"), 1),
+						createVNode(unref(ScalarIconCaretDown), {
+							class: "text-c-2 ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100",
+							weight: "bold"
+						})
+					]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, [
+				"modelValue",
+				"options",
+				"target"
+			])) : (openBlock(), createElementBlock("div", _hoisted_2, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Server:", -1)), createElementVNode("span", _hoisted_3, toDisplayString(serverUrlWithoutTrailingSlash.value), 1)]));
+		};
+	}
+});
+//#endregion
+export { Selector_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Selector.vue.script.js.map

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

@@ -0,0 +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\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\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\">Server:</span>\n      <span class=\"overflow-x-auto\">{{\n        serverUrlWithoutTrailingSlash || 'Select a server'\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\">Server:</span>\n    <span class=\"overflow-x-auto\">{{ serverUrlWithoutTrailingSlash }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,OAAO;;;;;EASb,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;;4BAC4B;gCAApC,mBAAoC,QAAA,EAA9B,OAAM,WAAS,EAAC,WAAO,GAAA;MAC7B,mBAES,QAFT,YAES,gBADP,8BAAA,SAA6B,kBAAA,EAAA,EAAA;MAE/B,YAEkB,MAAA,oBAAA,EAAA;OADhB,OAAM;OACN,QAAO;;;;;;;;;;uBAGb,mBAKM,OALN,YAKM,CAAA,OAAA,OAAA,OAAA,KAFJ,mBAAoC,QAAA,EAA9B,OAAM,WAAS,EAAC,WAAO,GAAA,GAC7B,mBAAwE,QAAxE,YAAwE,gBAAvC,8BAAA,MAA6B,EAAA,EAAA,CAAA,CAAA"}

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

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

package/dist/blocks/scalar-asyncapi-server-selector-block/index.d.ts.map

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

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

@@ -1,11 +1,10 @@
 import { type ClientOption, type ClientOptionGroup } from '@scalar/api-client/blocks/operation-code-sample';
-import type { AvailableClients } from '@scalar/types/snippetz';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
 type __VLS_Props = {
     /** Client options */
     clientOptions: ClientOptionGroup[];
-    /** The currently selected Http Client */
-    selectedClient?: AvailableClients[number];
+    /** 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 */

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

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

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-3150aaa3"]]);
+var ClientDropdown_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ClientDropdown_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c2617b43"]]);
 //#endregion
 export { ClientDropdown_default as default };
 

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

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

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

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

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

@@ -1,14 +1,10 @@
 import { type ClientOptionGroup } from '@scalar/api-client/blocks/operation-code-sample';
-import type { AvailableClient } from '@scalar/snippetz';
 import { type WorkspaceEventBus } from '@scalar/workspace-store/events';
-import type { XScalarSdkInstallation } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-sdk-installation';
 type __VLS_Props = {
-    /** Selected SDK installation instructions */
-    xScalarSdkInstallation?: XScalarSdkInstallation['x-scalar-sdk-installation'];
     /** Computed list of all available Http Client options */
     clientOptions: ClientOptionGroup[];
-    /** The currently selected Http Client */
-    selectedClient?: AvailableClient;
+    /** The currently selected Http Client (a built-in client id or a custom sample id) */
+    selectedClient?: string;
     /** Event bus */
     eventBus: WorkspaceEventBus;
 };

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":"AAkNA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,iDAAiD,CAAA;AAGxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+EAA+E,CAAA;AAU3H,KAAK,WAAW,GAAG;IACjB,6CAA6C;IAC7C,sBAAsB,CAAC,EAAE,sBAAsB,CAAC,2BAA2B,CAAC,CAAA;IAC5E,yDAAyD;IACzD,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,yCAAyC;IACzC,cAAc,CAAC,EAAE,eAAe,CAAA;IAChC,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AA8RF,QAAA,MAAM,YAAY;;oPAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ClientSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"names":[],"mappings":"AAqLA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,iDAAiD,CAAA;AACxD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAUvE,KAAK,WAAW,GAAG;IACjB,yDAAyD;IACzD,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AAwOF,QAAA,MAAM,YAAY;;oPAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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-570e3418"]]);
+var ClientSelector_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ClientSelector_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0769d07b"]]);
 //#endregion
 export { ClientSelector_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ClientSelector.vue.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'\nimport {\n  DEFAULT_CLIENT,\n  type ClientOptionGroup,\n} from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { AvailableClient } from '@scalar/snippetz'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { XScalarSdkInstallation } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-sdk-installation'\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport {\n  getFeaturedClients,\n  isFeaturedClient,\n} from '@/blocks/scalar-client-selector-block/helpers/featured-clients'\n\nimport ClientDropdown from './ClientDropdown.vue'\n\nconst {\n  clientOptions,\n  xScalarSdkInstallation,\n  eventBus,\n  selectedClient = DEFAULT_CLIENT,\n} = defineProps<{\n  /** Selected SDK installation instructions */\n  xScalarSdkInstallation?: XScalarSdkInstallation['x-scalar-sdk-installation']\n  /** Computed list of all available Http Client options */\n  clientOptions: ClientOptionGroup[]\n  /** The currently selected Http Client */\n  selectedClient?: AvailableClient\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\nconst morePanel = useId()\n\n/** Grab the option for the currently selected Http Client */\nconst selectedClientOption = computed(\n  () =>\n    clientOptions.flatMap(\n      (optionGroup) =>\n        optionGroup.options.find((option) => option.id === selectedClient) ??\n        [],\n    )[0],\n)\n\n/** List of featured clients */\nconst featuredClients = computed(() => getFeaturedClients(clientOptions))\n\n/** Currently selected tab index */\nconst tabIndex = computed(() =>\n  featuredClients.value.findIndex(\n    (featuredClient) => selectedClient === featuredClient.id,\n  ),\n)\n\nconst wrapper = useTemplateRef('wrapper-ref')\n\n/** Emit the selected client event on tab */\nconst onTabSelect = (i: number) => {\n  const client = featuredClients.value[i]\n\n  if (!client || !wrapper.value) {\n    return\n  }\n\n  eventBus.emit('workspace:update:selected-client', client.id)\n}\n\nconst installationInstructions = computed(() => {\n  // Check whether we have instructions at all\n  if (\n    !Array.isArray(xScalarSdkInstallation) ||\n    !xScalarSdkInstallation?.length\n  ) {\n    return undefined\n  }\n\n  // Find the instructions for the current language\n  const instruction = xScalarSdkInstallation.find((instruction) => {\n    const targetKey = selectedClient?.split('/')[0]?.toLowerCase()\n    return instruction.lang.toLowerCase() === targetKey\n  })\n\n  // Nothing found?\n  if (!instruction) {\n    return undefined\n  }\n\n  // Got it!\n  return instruction\n})\n\ndefineExpose({\n  selectedClientOption,\n})\n</script>\n<template>\n  <div\n    v-if=\"clientOptions.length\"\n    ref=\"wrapper-ref\">\n    <TabGroup\n      manual\n      :selectedIndex=\"tabIndex\"\n      @change=\"onTabSelect\">\n      <div\n        :id=\"headingId\"\n        class=\"client-libraries-heading\">\n        Client Libraries\n      </div>\n\n      <!-- Tabs -->\n      <TabList\n        :aria-labelledby=\"headingId\"\n        class=\"client-libraries-list\">\n        <ClientDropdown\n          :clientOptions\n          :eventBus\n          :featuredClients\n          :morePanel\n          :selectedClient />\n      </TabList>\n\n      <!-- Content -->\n      <TabPanels>\n        <template\n          v-if=\"\n            installationInstructions?.source ||\n            installationInstructions?.description\n          \">\n          <div\n            v-if=\"installationInstructions.description\"\n            class=\"selected-client card-footer -outline-offset-2\"\n            :class=\"installationInstructions.source && 'rounded-b-none'\"\n            role=\"tabpanel\"\n            tabindex=\"0\">\n            <ScalarMarkdown :value=\"installationInstructions.description\" />\n          </div>\n          <div\n            v-if=\"installationInstructions.source\"\n            class=\"selected-client card-footer border-t-0 p-0\"\n            role=\"tabpanel\"\n            tabindex=\"1\">\n            <ScalarCodeBlock\n              class=\"rounded-b-lg *:first:p-3\"\n              :content=\"installationInstructions.source\"\n              copy=\"always\"\n              lang=\"shell\" />\n          </div>\n        </template>\n        <template v-else-if=\"isFeaturedClient(selectedClient)\">\n          <TabPanel\n            v-for=\"client in featuredClients\"\n            :key=\"client.id\"\n            class=\"selected-client card-footer -outline-offset-2\">\n            {{ client.title }}\n          </TabPanel>\n        </template>\n        <div\n          v-else\n          :id=\"morePanel\"\n          class=\"selected-client card-footer -outline-offset-2\"\n          role=\"tabpanel\"\n          tabindex=\"0\">\n          {{ selectedClientOption?.title }}\n        </div>\n      </TabPanels>\n    </TabGroup>\n  </div>\n</template>\n<style scoped>\n.selected-client {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  font-family: var(--scalar-font-code);\n  padding: 9px 12px;\n  border-top: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n  min-height: fit-content;\n}\n.client-libraries-heading {\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-medium);\n  color: var(--scalar-color-1);\n  padding: 9px 12px;\n  background-color: var(--scalar-background-2);\n  display: flex;\n  align-items: center;\n  max-height: 32px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top-left-radius: var(--scalar-radius-xl);\n  border-top-right-radius: var(--scalar-radius-xl);\n}\n:deep(.scalar-codeblock-pre .hljs) {\n  margin-top: 8px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ClientSelector.vue.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'\nimport {\n  DEFAULT_CLIENT,\n  type ClientOptionGroup,\n} from '@scalar/api-client/blocks/operation-code-sample'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref, useId, useTemplateRef, watch } from 'vue'\n\nimport {\n  getFeaturedClients,\n  isFeaturedClient,\n} from '@/blocks/scalar-client-selector-block/helpers/featured-clients'\n\nimport ClientDropdown from './ClientDropdown.vue'\n\nconst {\n  clientOptions,\n  eventBus,\n  selectedClient = DEFAULT_CLIENT,\n} = defineProps<{\n  /** Computed list of all available Http Client options */\n  clientOptions: ClientOptionGroup[]\n  /** The currently selected Http Client (a built-in client id or a custom sample id) */\n  selectedClient?: string\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\nconst morePanel = useId()\n\n/**\n * Whether a selection is a custom code sample (e.g. `custom/python`) rather than\n * a built-in client. Custom samples are matched by the `custom/` id prefix, which\n * mirrors the `^custom/` pattern enforced on the stored default client.\n */\nconst isCustomSelection = (client: string | undefined) =>\n  Boolean(client?.startsWith('custom/'))\n\n/**\n * The generic client this selector actually displays.\n *\n * The introduction selector only represents the built-in HTTP clients. Custom\n * code samples are operation-specific and \"always just have the generic\n * clients\", so when one is selected globally we keep showing the last generic\n * client here instead of switching to (and failing to render) a custom sample.\n */\nconst activeClient = ref(\n  isCustomSelection(selectedClient) ? DEFAULT_CLIENT : selectedClient,\n)\n\nwatch(\n  () => selectedClient,\n  (newClient) => {\n    if (!isCustomSelection(newClient)) {\n      activeClient.value = newClient\n    }\n  },\n)\n\n/** Grab the option for the currently selected Http Client */\nconst selectedClientOption = computed(\n  () =>\n    clientOptions.flatMap(\n      (optionGroup) =>\n        optionGroup.options.find(\n          (option) => option.id === activeClient.value,\n        ) ?? [],\n    )[0],\n)\n\n/** List of featured clients */\nconst featuredClients = computed(() => getFeaturedClients(clientOptions))\n\n/** Currently selected tab index */\nconst tabIndex = computed(() =>\n  featuredClients.value.findIndex(\n    (featuredClient) => activeClient.value === featuredClient.id,\n  ),\n)\n\nconst wrapper = useTemplateRef('wrapper-ref')\n\n/** Emit the selected client event on tab */\nconst onTabSelect = (i: number) => {\n  const client = featuredClients.value[i]\n\n  if (!client || !wrapper.value) {\n    return\n  }\n\n  eventBus.emit('workspace:update:selected-client', client.id)\n}\n\ndefineExpose({\n  selectedClientOption,\n})\n</script>\n<template>\n  <div\n    v-if=\"clientOptions.length\"\n    ref=\"wrapper-ref\">\n    <TabGroup\n      manual\n      :selectedIndex=\"tabIndex\"\n      @change=\"onTabSelect\">\n      <div\n        :id=\"headingId\"\n        class=\"client-libraries-heading\">\n        Client Libraries\n      </div>\n\n      <!-- Tabs -->\n      <TabList\n        :aria-labelledby=\"headingId\"\n        class=\"client-libraries-list\">\n        <ClientDropdown\n          :clientOptions\n          :eventBus\n          :featuredClients\n          :morePanel\n          :selectedClient=\"activeClient\" />\n      </TabList>\n\n      <!-- Content -->\n      <TabPanels>\n        <template v-if=\"isFeaturedClient(activeClient)\">\n          <TabPanel\n            v-for=\"client in featuredClients\"\n            :key=\"client.id\"\n            class=\"selected-client card-footer -outline-offset-2\">\n            {{ client.title }}\n          </TabPanel>\n        </template>\n        <div\n          v-else\n          :id=\"morePanel\"\n          class=\"selected-client card-footer -outline-offset-2\"\n          role=\"tabpanel\"\n          tabindex=\"0\">\n          {{ selectedClientOption?.title }}\n        </div>\n      </TabPanels>\n    </TabGroup>\n  </div>\n</template>\n<style scoped>\n.selected-client {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  font-family: var(--scalar-font-code);\n  padding: 9px 12px;\n  border-top: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n  min-height: fit-content;\n}\n.client-libraries-heading {\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-medium);\n  color: var(--scalar-color-1);\n  padding: 9px 12px;\n  background-color: var(--scalar-background-2);\n  display: flex;\n  align-items: center;\n  max-height: 32px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top-left-radius: var(--scalar-radius-xl);\n  border-top-right-radius: var(--scalar-radius-xl);\n}\n</style>\n"],"mappings":""}