@scalar/api-reference 1.57.5 → 1.59.0

package/CHANGELOG.md

@@ -1,5 +1,117 @@
 # @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
+
+- [#9372](https://github.com/scalar/scalar/pull/9372): Render AsyncAPI `components.schemas` as Models, listed in the sidebar and content just like OpenAPI schemas
+- [#7618](https://github.com/scalar/scalar/pull/7618): feat(api-reference): add `setPageTitle` to customize the browser tab title
+
+  Pass a `setPageTitle` function to control the browser tab title. It is called whenever the section in view changes — on sidebar clicks, on scroll, and when switching documents — and receives the section title and the active OpenAPI document:
+
+  ```js
+  setPageTitle: ({ title, document }) => `${document.title} – ${title}`
+  ```
+
+### Patch Changes
+
+- [#9348](https://github.com/scalar/scalar/pull/9348): Render AsyncAPI channels as sections in the content area, with the channel address as the heading and the channel description below. Channels are grouped under tags when the navigation tree groups them. Operations and messages are not rendered yet.
+- [#9255](https://github.com/scalar/scalar/pull/9255): Surface the Introduction entry and any headings extracted from `info.description` of AsyncAPI documents in the sidebar, mirroring how OpenAPI documents are handled.
+- [#9347](https://github.com/scalar/scalar/pull/9347): Surface AsyncAPI `info.description` headings in the search modal, mirroring the sidebar behaviour. AsyncAPI channels, operations, and messages are not indexed yet.
+- [#9350](https://github.com/scalar/scalar/pull/9350): feat(api-reference): list Ask AI and MCP Servers as Scalar Docs features in the Deploy popover
+- [#9310](https://github.com/scalar/scalar/pull/9310): Add an ESM standalone build (`dist/browser/standalone.esm.js`) alongside the existing UMD bundle. The new bundle works as a side-effect script (registers `window.Scalar.createApiReference` and reads `data-*` configuration) and exports `createApiReference` for direct ESM consumers. It is fully minified through Rolldown's native minifier and uses code splitting so heavy features load asynchronously after first paint:
+  - The API client modal (request editor, response viewer, CodeMirror) is now `await import`'d inside `onMounted` instead of statically imported, moving ~265 KB into a `chunks/modal-*.js` chunk that loads in the background.
+  - The Agent Scalar chat interface (already wrapped in `defineAsyncComponent`) becomes a real `chunks/AgentScalarChatInterface-*.js` chunk (~200 KB), loaded only when the agent is enabled.
+  - The 84 per-icon dynamic imports from `@scalar/icons/library` are coalesced into a single `chunks/icons-*.js`.
+
+  Net effect: initial sync load drops from ~3.32 MB (UMD) to ~2.73 MB (ESM) — a ~570 KB improvement — while total bundle size shrinks by ~140 KB.
+
+  Also adds an `@scalar/api-client/modal/map-hidden-clients-config` deep export so consumers that only need the lightweight client-list helper don't pull the full modal barrel into their static graph.
+
+- [#9139](https://github.com/scalar/scalar/pull/9139): fix(api-reference): preserve OAuth redirect URL when switching between OpenAPI documents
+
+  Auth changes were being persisted under the wrong document slug and shared a single debounce queue across all documents. When switching documents quickly, the pending save for the first document could be overwritten or dropped by a save for the second document, causing the redirect URL (and other auth secrets) to appear cleared after switching back.
+
+  The fix uses `event.documentName` as both the debounce key and the storage key, giving each document its own independent debounce queue.
+
+- [#9194](https://github.com/scalar/scalar/pull/9194): fix(api-reference): break cycles in `mergeAllOfSchemas` for self-referencing schemas (whether they `$ref` back to themselves through array items or through a plain object property), which previously crashed the docs preview with "too much recursion"
+- [#9309](https://github.com/scalar/scalar/pull/9309): feat: add `modelsSectionLabel` configuration (`'Models' | 'Schemas' | string`) to use OpenAPI-style Schemas terminology in the sidebar, content, and search.
+
 ## 1.57.5
 
 ### Patch 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 };