@scalar/api-reference 1.63.0 → 1.64.1

package/CHANGELOG.md

@@ -1,5 +1,95 @@
 # @scalar/api-reference
 
+## 1.64.1
+
+### Patch Changes
+
+- [#9828](https://github.com/scalar/scalar/pull/9828): Bump shared build and runtime dependencies to their latest compatible versions
+  (fuse.js, vite, vitest, tailwindcss, @vitejs/plugin-vue, @vue/test-utils,
+  posthog-js, yaml, and the CSS injection plugin). The fuse.js 7.5.0 upgrade
+  tightened generic inference, so the empty `new Fuse([])` search instances now
+  pass an explicit `FuseData` type argument.
+- [#9837](https://github.com/scalar/scalar/pull/9837): Keep the selected server when the configuration is updated. Pushing a config update to a mounted reference (for example a refreshed auth token via `updateConfiguration`) rebases the document in the store, which previously reset the server selector back to the first server. The user's selected server is now preserved across configuration updates.
+- [#9783](https://github.com/scalar/scalar/pull/9783): fix: resolve axe-core ARIA violations in the API reference sidebar and client tabs
+
+  Sidebar items used `aria-selected` on links/buttons (invalid for those roles) and the search trigger used `role="search"` on a button. Selected items now use `aria-current="page"`, the search control is a plain named button, and the sidebar no longer sets an invalid `role="navigation"` on `<aside>` (it keeps the default complementary landmark).
+
+  Client library and SDK installation "More" comboboxes sat inside `role="tablist"`, which fails `aria-required-children`. They now sit beside the tablist. MCP install controls without a target URL render as buttons instead of empty `a[href=""]` links.
+
+- [#9791](https://github.com/scalar/scalar/pull/9791): Stop recursive schema rendering when a discriminator variant `allOf`s back to its base type. The selected child now inherits the parent's discriminator context so the mapping is not re-inferred on every nest.
+- [#9830](https://github.com/scalar/scalar/pull/9830): Stop listing enum values twice for an array parameter whose `items` is a `$ref`
+  to an enum schema. The values are now listed only in the array items card, which
+  also shows the item schema's title and description.
+- [#9839](https://github.com/scalar/scalar/pull/9839): Harden the API reference against untrusted OpenAPI documents:
+  - Link targets taken from the document (`info.license.url`, `info.termsOfService`,
+    `info.contact.url`, `externalDocs.url`, `x-scalar-links`) and the direct download link are now
+    checked against an allow list of protocols, so a document can no longer render a `javascript:`
+    link that runs script when a reader clicks it. Unsafe values fall back to plain text.
+  - `deepMerge` (used by the exported `createEmptySpecification`) no longer writes through the
+    prototype chain, so a document can no longer add properties to `Object.prototype` via `__proto__`,
+    `constructor`, or `prototype`. Keys with those names are kept as plain data instead of being
+    dropped, so a schema is still free to describe a property named `constructor`.
+  - `customCss` can no longer close the injected `<style>` tag, which mattered during server
+    rendering where the value lands in the HTML stream verbatim.
+  - Added `rel="noopener noreferrer"` to the remaining `target="_blank"` links.
+
+  Adds `isSafeUrl` and `sanitizeUrl` to `@scalar/helpers/url/is-safe-url`.
+
+- [#9829](https://github.com/scalar/scalar/pull/9829): Update Vue to 3.5.40. Vue 3.5.36 tightened `defineModel` default validation, so
+  models with array or object defaults now use the factory form
+  (`defineModel<T[]>({ default: () => [] })`) as Vue already requires for regular
+  props. Behaviour is unchanged.
+- [#9790](https://github.com/scalar/scalar/pull/9790): fix: keep dots in webhook navigation deep links
+
+  Webhook event names that use dots (for example `account_holder.created`) had the
+  dot dropped when building the navigation id, joining adjacent words into
+  `account-holdercreated`. Dots are now kept, producing `account-holder.created`.
+
+  Old deep links using the dropped-dot slug are redirected to the new slug, so
+  existing bookmarks keep resolving.
+
+## 1.64.0
+
+### Minor Changes
+
+- [#9683](https://github.com/scalar/scalar/pull/9683): Surface the required OAuth scopes for an operation as a dedicated "OAuth scopes" section below the description (above parameters), instead of only inside the "Auth Required" badge popover. Scopes are de-duplicated across security alternatives and shown in both the modern and classic layouts, as well as on AsyncAPI operations.
+- [#9711](https://github.com/scalar/scalar/pull/9711): feat: add `pluginUrls` configuration option to load API Reference plugins from URLs
+
+  Each entry must point to an ESM module that exports a plugin (the same shape as the `plugins` entries) as its default export. The standalone build (`Scalar.createApiReference`) imports the modules before the API reference mounts and registers their default exports alongside the plugins passed directly. Unlike `plugins`, the new option is JSON-serializable, so integrations that pass their configuration as JSON (for example the Docker container or Scalar for Aspire) can load plugins without replacing the whole bundle.
+
+### Patch Changes
+
+- [#9732](https://github.com/scalar/scalar/pull/9732): Render every `oneOf`/`anyOf` group of an `allOf` in place. Previously, when one object composed several mutually-exclusive choices as sibling `oneOf`/`anyOf` under `allOf`, only the first group was shown and the rest were silently dropped. Each choice group now renders its own selector in the position it was declared, and the generated request example stays in sync per group.
+- [#9794](https://github.com/scalar/scalar/pull/9794): Keep sibling `properties` when flattening a single-member `allOf`. Previously, a schema declaring its own `properties` next to an `allOf` holding a single `$ref` lost those sibling properties: the referenced schema's `properties` overwrote them instead of being combined, and the referenced schema's `title`/`description` replaced the parent's. Sibling and inherited properties now render together, `required` lists are unioned, and the parent schema's own annotations win over the base it extends.
+- [#9757](https://github.com/scalar/scalar/pull/9757): fix: read enum metadata from array items
+
+  When an enum is defined inside an array schema's `items`, the enum values were resolved from `items` but their `x-enum-varnames`, `x-enumNames`, and `x-enumDescriptions` were still read from the outer schema, so the metadata was dropped. Both the values and their metadata are now read from the same schema.
+
+- [#9681](https://github.com/scalar/scalar/pull/9681): The "Auth Required" / "Auth Optional" badge on operations now opens on hover, not just on click
+- [#9753](https://github.com/scalar/scalar/pull/9753): fix: badge base styles no longer rely on zero specificity
+
+  The badge base rule was written with `:where(.badge)`, which the scoped-style compiler collapsed to zero specificity, letting any late-loading reset clobber the badge font size, padding, and colors. The base styles now carry real specificity, and consumers that intentionally override them (the download-link json/yaml badges and the webhook badge) keep winning through tailwind-merge and higher-specificity variant rules.
+
+- [#9766](https://github.com/scalar/scalar/pull/9766): fix: give the collapsible section trigger an accessible name and a valid `aria-controls` target
+
+  The trigger button rendered by `CompactSection` carried `aria-controls` set to its own `id`, so it declared that it controls itself, and it exposed no accessible name of its own. Screen reader users heard an unnamed button, and axe-core reported `button-name` and `aria-allowed-attr` on every model section.
+
+  The trigger now points `aria-controls` at the collapsible region, which carries its own id. While the section is collapsed the attribute is dropped entirely rather than left pointing at an element that is not rendered.
+
+  The accessible name now comes from `aria-labelledby` pointing at the heading the trigger already renders, so the name is always the visible text. Referencing the heading rather than copying it into an `aria-label` means the name cannot drift out of sync with what is on screen, which is the WCAG 2.5.3 (Label in Name) failure a duplicated string would risk.
+
+- [#9754](https://github.com/scalar/scalar/pull/9754): fix: adapt the info links to the rendered width of the reference instead of the viewport
+
+  The introduction's info links (contact, license, terms of service, external docs, and `x-scalar-links`), the section header grid, and the classic-layout selector cards switched their layout based on viewport media queries, while the rest of the reference adapts to the rendered width of the reference through the `narrow-references-container` container query. They now restyle based on the container as well, through a new `narrow:` Tailwind variant.
+
+- [#9751](https://github.com/scalar/scalar/pull/9751): fix: keep even heading-to-description spacing on the operation title in narrow layouts
+
+  The narrow (single-column) operation layout bumped the operation title's bottom margin to 24px, so the gap between the heading and its description no longer matched the 12px used on wider screens. The override is removed so the title keeps the shared 12px spacing at every width.
+
+- [#9676](https://github.com/scalar/scalar/pull/9676): Preload additional documents in a multi-document setup while the browser is idle, so switching between them is instant.
+- [#9788](https://github.com/scalar/scalar/pull/9788): Add print styles so printing (or saving to PDF) no longer renders expanded content over the text that follows it. The reference lays itself out as a fixed-viewport application, and its sticky columns were pinned to a screen measurement that is meaningless on paper. Printing now flattens that shell into ordinary document flow: navigation and floating chrome are hidden, sticky positioning and viewport-derived height caps are dropped so long examples are no longer truncated, and small units such as properties and cards avoid breaking across pages.
+- [#9691](https://github.com/scalar/scalar/pull/9691): Show the `format` of primitive array items (e.g. an array of `uuid` strings) in the schema property heading
+
 ## 1.63.0
 
 ### Minor Changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ClientDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientDropdown.vue"],"names":[],"mappings":"AAgQA,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EAEvB,MAAM,6BAA6B,CAAA;AAKpC,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAMvE,KAAK,WAAW,GAAG;IACf,qBAAqB;IACrB,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,+BAA+B;IAC/B,eAAe,EAAE,YAAY,EAAE,CAAA;IAC/B,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AAyPJ,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ClientDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientDropdown.vue"],"names":[],"mappings":"AAqNA,OAAO,EAIL,KAAK,iBAAiB,EAEvB,MAAM,6BAA6B,CAAA;AAKpC,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAMvE,KAAK,WAAW,GAAG;IACjB,qBAAqB;IACrB,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AAiMF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import ClientDropdown_vue_vue_type_script_setup_true_lang_default from "./ClientDropdown.vue.script.js";
 /* empty css                             */
 //#region src/blocks/scalar-client-selector-block/components/ClientDropdown.vue
-var ClientDropdown_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ClientDropdown_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-783c0ba4"]]);
+var ClientDropdown_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ClientDropdown_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-da3e3bd2"]]);
 //#endregion
 export { ClientDropdown_default as default };
 

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

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

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

@@ -1,18 +1,16 @@
 import { useLocalization } from "../../../features/localization/use-localization.js";
 import { isFeaturedClient } from "../helpers/featured-clients.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
-import { Tab } from "@headlessui/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, withCtx } from "vue";
 import { filterClientsByQuery, findClient } from "@scalar/blocks/code-example";
-import { ScalarCombobox } from "@scalar/components/combobox";
 import { ScalarIcon } from "@scalar/components/icon";
+import { ScalarCombobox } from "@scalar/components/combobox";
 import { freezeElement } from "@scalar/helpers/dom/freeze-element";
 //#region src/blocks/scalar-client-selector-block/components/ClientDropdown.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "client-libraries-text" };
-var _hoisted_2 = {
+var _hoisted_1 = {
 	"aria-hidden": "true",
 	class: "client-libraries-icon__more"
 };
-var _hoisted_3 = {
+var _hoisted_2 = {
 	key: 1,
 	class: "client-libraries-icon",
 	height: "50",
@@ -21,17 +19,16 @@ var _hoisted_3 = {
 	width: "50",
 	xmlns: "http://www.w3.org/2000/svg"
 };
-var _hoisted_4 = {
+var _hoisted_3 = {
 	key: 0,
 	class: "client-libraries-text client-libraries-text-more"
 };
-var _hoisted_5 = { class: "sr-only" };
-var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var _hoisted_4 = { class: "sr-only" };
+var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ClientDropdown",
 	props: {
 		clientOptions: {},
 		selectedClient: {},
-		featuredClients: {},
 		eventBus: {}
 	},
 	setup(__props) {
@@ -57,19 +54,8 @@ var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			return openBlock(), createElementBlock("div", {
 				ref_key: "containerRef",
 				ref: containerRef,
-				class: "client-libraries-content"
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.featuredClients, (featuredClient) => {
-				return openBlock(), createBlock(unref(Tab), {
-					key: featuredClient.clientKey,
-					class: normalizeClass(["client-libraries rendered-code-sdks", { "client-libraries__active": featuredClient.id === __props.selectedClient }])
-				}, {
-					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(`client-libraries-icon__${featuredClient.targetKey}`) }, [createVNode(unref(ScalarIcon), {
-						class: "client-libraries-icon",
-						icon: getIconByLanguageKey(featuredClient.targetKey)
-					}, null, 8, ["icon"])], 2), createElementVNode("span", _hoisted_1, toDisplayString(featuredClient.targetTitle), 1)]),
-					_: 2
-				}, 1032, ["class"]);
-			}), 128)), createVNode(unref(ScalarCombobox), {
+				class: "client-libraries-more"
+			}, [createVNode(unref(ScalarCombobox), {
 				filterFn: unref(filterClientsByQuery),
 				modelValue: unref(findClient)(__props.clientOptions, __props.selectedClient),
 				options: __props.clientOptions,
@@ -81,19 +67,19 @@ var ClientDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					class: normalizeClass(["client-libraries client-libraries__select", { "client-libraries__active": __props.selectedClient && !unref(isFeaturedClient)(__props.selectedClient) }]),
 					type: "button"
 				}, [
-					createElementVNode("div", _hoisted_2, [__props.selectedClient && !unref(isFeaturedClient)(__props.selectedClient) ? (openBlock(), createElementBlock("div", {
+					createElementVNode("div", _hoisted_1, [__props.selectedClient && !unref(isFeaturedClient)(__props.selectedClient) ? (openBlock(), createElementBlock("div", {
 						key: 0,
 						class: normalizeClass(`client-libraries-icon__${selectedTargetKey.value}`)
 					}, [selectedTargetKey.value ? (openBlock(), createBlock(unref(ScalarIcon), {
 						key: 0,
 						class: "client-libraries-icon",
 						icon: getIconByLanguageKey(selectedTargetKey.value)
-					}, null, 8, ["icon"])) : createCommentVNode("", true)], 2)) : (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[1] || (_cache[1] = [createElementVNode("g", {
+					}, null, 8, ["icon"])) : createCommentVNode("", true)], 2)) : (openBlock(), createElementBlock("svg", _hoisted_2, [..._cache[1] || (_cache[1] = [createElementVNode("g", {
 						fill: "currentColor",
 						"fill-rule": "nonzero"
 					}, [createElementVNode("path", { d: "M10.71 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M21.13 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M31.55 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0" })], -1)])]))]),
-					__props.clientOptions.length ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(translate)("clientLibraries.more")), 1)) : createCommentVNode("", true),
-					createElementVNode("span", _hoisted_5, toDisplayString(unref(translate)("clientLibraries.selectAll")), 1)
+					__props.clientOptions.length ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(translate)("clientLibraries.more")), 1)) : createCommentVNode("", true),
+					createElementVNode("span", _hoisted_4, toDisplayString(unref(translate)("clientLibraries.selectAll")), 1)
 				], 2)]),
 				_: 1
 			}, 8, [

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ClientSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"names":[],"mappings":"AAuLA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAWvE,KAAK,WAAW,GAAG;IACjB,yDAAyD;IACzD,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AA2OF,QAAA,MAAM,YAAY;;oPAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ClientSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"names":[],"mappings":"AA+SA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,6BAA6B,CAAA;AAGpC,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAWvE,KAAK,WAAW,GAAG;IACjB,yDAAyD;IACzD,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AAyTF,QAAA,MAAM,YAAY;;oPAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import ClientSelector_vue_vue_type_script_setup_true_lang_default from "./ClientSelector.vue.script.js";
 /* empty css                             */
 //#region src/blocks/scalar-client-selector-block/components/ClientSelector.vue
-var ClientSelector_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ClientSelector_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d02a9cbe"]]);
+var ClientSelector_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ClientSelector_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-34beffcc"]]);
 //#endregion
 export { ClientSelector_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ClientSelector.vue.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'\nimport {\n  DEFAULT_CLIENT,\n  type ClientOptionGroup,\n} from '@scalar/blocks/code-example'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref, useId, useTemplateRef, watch } from 'vue'\n\nimport {\n  getFeaturedClients,\n  isFeaturedClient,\n} from '@/blocks/scalar-client-selector-block/helpers/featured-clients'\nimport { useLocalization } from '@/features/localization'\n\nimport ClientDropdown from './ClientDropdown.vue'\n\nconst {\n  clientOptions,\n  eventBus,\n  selectedClient = DEFAULT_CLIENT,\n} = defineProps<{\n  /** Computed list of all available Http Client options */\n  clientOptions: ClientOptionGroup[]\n  /** The currently selected Http Client (a built-in client id or a custom sample id) */\n  selectedClient?: string\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\nconst morePanel = useId()\nconst { translate } = useLocalization()\n\n/**\n * Whether a selection is a custom code sample (e.g. `custom/python`) rather than\n * a built-in client. Custom samples are matched by the `custom/` id prefix, which\n * mirrors the `^custom/` pattern enforced on the stored default client.\n */\nconst isCustomSelection = (client: string | undefined) =>\n  Boolean(client?.startsWith('custom/'))\n\n/**\n * The generic client this selector actually displays.\n *\n * The introduction selector only represents the built-in HTTP clients. Custom\n * code samples are operation-specific and \"always just have the generic\n * clients\", so when one is selected globally we keep showing the last generic\n * client here instead of switching to (and failing to render) a custom sample.\n */\nconst activeClient = ref(\n  isCustomSelection(selectedClient) ? DEFAULT_CLIENT : selectedClient,\n)\n\nwatch(\n  () => selectedClient,\n  (newClient) => {\n    if (!isCustomSelection(newClient)) {\n      activeClient.value = newClient\n    }\n  },\n)\n\n/** Grab the option for the currently selected Http Client */\nconst selectedClientOption = computed(\n  () =>\n    clientOptions.flatMap(\n      (optionGroup) =>\n        optionGroup.options.find(\n          (option) => option.id === activeClient.value,\n        ) ?? [],\n    )[0],\n)\n\n/** List of featured clients */\nconst featuredClients = computed(() => getFeaturedClients(clientOptions))\n\n/** Currently selected tab index */\nconst tabIndex = computed(() =>\n  featuredClients.value.findIndex(\n    (featuredClient) => activeClient.value === featuredClient.id,\n  ),\n)\n\nconst wrapper = useTemplateRef('wrapper-ref')\n\n/** Emit the selected client event on tab */\nconst onTabSelect = (i: number) => {\n  const client = featuredClients.value[i]\n\n  if (!client || !wrapper.value) {\n    return\n  }\n\n  eventBus.emit('workspace:update:selected-client', client.id)\n}\n\ndefineExpose({\n  selectedClientOption,\n})\n</script>\n<template>\n  <div\n    v-if=\"clientOptions.length\"\n    ref=\"wrapper-ref\">\n    <TabGroup\n      manual\n      :selectedIndex=\"tabIndex\"\n      @change=\"onTabSelect\">\n      <div\n        :id=\"headingId\"\n        class=\"client-libraries-heading\">\n        {{ translate('clientLibraries.heading') }}\n      </div>\n\n      <!-- Tabs -->\n      <TabList\n        :aria-labelledby=\"headingId\"\n        class=\"client-libraries-list\">\n        <ClientDropdown\n          :clientOptions\n          :eventBus\n          :featuredClients\n          :morePanel\n          :selectedClient=\"activeClient\" />\n      </TabList>\n\n      <!-- Content -->\n      <TabPanels>\n        <template v-if=\"isFeaturedClient(activeClient)\">\n          <TabPanel\n            v-for=\"client in featuredClients\"\n            :key=\"client.id\"\n            class=\"selected-client card-footer -outline-offset-2\">\n            {{ client.title }}\n          </TabPanel>\n        </template>\n        <div\n          v-else\n          :id=\"morePanel\"\n          class=\"selected-client card-footer -outline-offset-2\"\n          role=\"tabpanel\"\n          tabindex=\"0\">\n          {{ selectedClientOption?.title }}\n        </div>\n      </TabPanels>\n    </TabGroup>\n  </div>\n</template>\n<style scoped>\n.selected-client {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  font-family: var(--scalar-font-code);\n  padding: 9px 12px;\n  border-top: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n  min-height: fit-content;\n}\n.client-libraries-heading {\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-medium);\n  color: var(--scalar-color-1);\n  padding: 9px 12px;\n  background-color: var(--scalar-background-2);\n  display: flex;\n  align-items: center;\n  max-height: 32px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top-left-radius: var(--scalar-radius-xl);\n  border-top-right-radius: var(--scalar-radius-xl);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ClientSelector.vue.js","names":[],"sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'\nimport {\n  DEFAULT_CLIENT,\n  type ClientOptionGroup,\n} from '@scalar/blocks/code-example'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport type { TargetId } from '@scalar/types/snippetz'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref, useId, useTemplateRef, watch } from 'vue'\n\nimport {\n  getFeaturedClients,\n  isFeaturedClient,\n} from '@/blocks/scalar-client-selector-block/helpers/featured-clients'\nimport { useLocalization } from '@/features/localization'\n\nimport ClientDropdown from './ClientDropdown.vue'\n\nconst {\n  clientOptions,\n  eventBus,\n  selectedClient = DEFAULT_CLIENT,\n} = defineProps<{\n  /** Computed list of all available Http Client options */\n  clientOptions: ClientOptionGroup[]\n  /** The currently selected Http Client (a built-in client id or a custom sample id) */\n  selectedClient?: string\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n}>()\n\nconst headingId = useId()\nconst morePanel = useId()\nconst { translate } = useLocalization()\n\n/**\n * Whether a selection is a custom code sample (e.g. `custom/python`) rather than\n * a built-in client. Custom samples are matched by the `custom/` id prefix, which\n * mirrors the `^custom/` pattern enforced on the stored default client.\n */\nconst isCustomSelection = (client: string | undefined) =>\n  Boolean(client?.startsWith('custom/'))\n\n/**\n * The generic client this selector actually displays.\n *\n * The introduction selector only represents the built-in HTTP clients. Custom\n * code samples are operation-specific and \"always just have the generic\n * clients\", so when one is selected globally we keep showing the last generic\n * client here instead of switching to (and failing to render) a custom sample.\n */\nconst activeClient = ref(\n  isCustomSelection(selectedClient) ? DEFAULT_CLIENT : selectedClient,\n)\n\nwatch(\n  () => selectedClient,\n  (newClient) => {\n    if (!isCustomSelection(newClient)) {\n      activeClient.value = newClient\n    }\n  },\n)\n\n/** Grab the option for the currently selected Http Client */\nconst selectedClientOption = computed(\n  () =>\n    clientOptions.flatMap(\n      (optionGroup) =>\n        optionGroup.options.find(\n          (option) => option.id === activeClient.value,\n        ) ?? [],\n    )[0],\n)\n\n/** List of featured clients */\nconst featuredClients = computed(() => getFeaturedClients(clientOptions))\n\n/** Currently selected tab index */\nconst tabIndex = computed(() =>\n  featuredClients.value.findIndex((client) => client.id === activeClient.value),\n)\n\nconst wrapper = useTemplateRef('wrapper-ref')\n\nconst getIconByLanguageKey = (targetKey: TargetId) =>\n  `programming-language-${targetKey === 'js' ? 'javascript' : targetKey}` as const\n\n/** Handle tab selection */\nconst onTabSelect = (index: number) => {\n  const client = featuredClients.value[index]\n\n  if (!client || !wrapper.value) {\n    return\n  }\n\n  eventBus.emit('workspace:update:selected-client', client.id)\n}\n\ndefineExpose({\n  selectedClientOption,\n})\n</script>\n<template>\n  <div\n    v-if=\"clientOptions.length\"\n    ref=\"wrapper-ref\">\n    <TabGroup\n      manual\n      :selectedIndex=\"tabIndex\"\n      @change=\"onTabSelect\">\n      <div\n        :id=\"headingId\"\n        class=\"client-libraries-heading\">\n        {{ translate('clientLibraries.heading') }}\n      </div>\n\n      <!--\n        TabList may only contain Tab children (aria-required-children).\n        The \"More\" combobox sits beside it in the same visual row.\n      -->\n      <div class=\"client-libraries-list\">\n        <TabList\n          :aria-labelledby=\"headingId\"\n          class=\"client-libraries-tabs\"\n          :style=\"{ flexGrow: featuredClients.length }\">\n          <Tab\n            v-for=\"featuredClient in featuredClients\"\n            :key=\"featuredClient.clientKey\"\n            class=\"client-libraries rendered-code-sdks\"\n            :class=\"{\n              'client-libraries__active': featuredClient.id === activeClient,\n            }\">\n            <div :class=\"`client-libraries-icon__${featuredClient.targetKey}`\">\n              <ScalarIcon\n                class=\"client-libraries-icon\"\n                :icon=\"getIconByLanguageKey(featuredClient.targetKey)\" />\n            </div>\n            <span class=\"client-libraries-text\">{{\n              featuredClient.targetTitle\n            }}</span>\n          </Tab>\n        </TabList>\n\n        <ClientDropdown\n          :clientOptions\n          :eventBus\n          :selectedClient=\"activeClient\" />\n      </div>\n\n      <!-- Content -->\n      <TabPanels>\n        <template v-if=\"isFeaturedClient(activeClient)\">\n          <TabPanel\n            v-for=\"client in featuredClients\"\n            :key=\"client.id\"\n            class=\"selected-client card-footer -outline-offset-2\">\n            {{ client.title }}\n          </TabPanel>\n        </template>\n        <div\n          v-else\n          :id=\"morePanel\"\n          class=\"selected-client card-footer -outline-offset-2\"\n          role=\"tabpanel\"\n          tabindex=\"0\">\n          {{ selectedClientOption?.title }}\n        </div>\n      </TabPanels>\n    </TabGroup>\n  </div>\n</template>\n<style scoped>\n.selected-client {\n  color: var(--scalar-color-1);\n  font-size: var(--scalar-small);\n  font-family: var(--scalar-font-code);\n  padding: 9px 12px;\n  border-top: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom-left-radius: var(--scalar-radius-xl);\n  border-bottom-right-radius: var(--scalar-radius-xl);\n  min-height: fit-content;\n}\n.client-libraries-heading {\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-medium);\n  color: var(--scalar-color-1);\n  padding: 9px 12px;\n  background-color: var(--scalar-background-2);\n  display: flex;\n  align-items: center;\n  max-height: 32px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top-left-radius: var(--scalar-radius-xl);\n  border-top-right-radius: var(--scalar-radius-xl);\n}\n.client-libraries-list {\n  container: client-libraries-list / inline-size;\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\n  padding: 0 12px;\n  background-color: var(--scalar-background-1);\n  border-left: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-right: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n/* Grows once per tab it holds, so tabs and the \"More\" trigger stay even */\n.client-libraries-tabs {\n  display: flex;\n  flex: 1 1 0;\n  min-width: 0;\n}\n.client-libraries {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n  white-space: nowrap;\n  padding: 8px 2px;\n  gap: 6px;\n  color: var(--scalar-color-3);\n  border-bottom: 1px solid transparent;\n  user-select: none;\n}\n\n.client-libraries:not(.client-libraries__active):hover:before {\n  content: '';\n  position: absolute;\n  width: calc(100% - 4px);\n  height: calc(100% - 4px);\n  background: var(--scalar-background-2);\n  left: 2px;\n  top: 2px;\n  z-index: 0;\n  border-radius: var(--scalar-radius);\n}\n.client-libraries:active {\n  color: var(--scalar-color-1);\n}\n.client-libraries:focus-visible {\n  outline: none;\n  box-shadow: inset 0 0 0 1px var(--scalar-color-accent);\n}\n/* remove php and c on mobile */\n@media screen and (max-width: 450px) {\n  .client-libraries:nth-of-type(4),\n  .client-libraries:nth-of-type(5) {\n    display: none;\n  }\n}\n.client-libraries-icon {\n  max-width: 14px;\n  max-height: 14px;\n  min-width: 14px;\n  width: 100%;\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  box-sizing: border-box;\n  color: currentColor;\n}\n.client-libraries__active {\n  color: var(--scalar-color-1);\n  border-bottom: 1px solid var(--scalar-color-1);\n}\n.client-libraries .client-libraries-text {\n  font-size: var(--scalar-small);\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.client-libraries__active .client-libraries-text {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n@media screen and (max-width: 600px) {\n  .references-classic .client-libraries {\n    flex-direction: column;\n  }\n}\n@container client-libraries-list (width < 380px) {\n  .client-libraries {\n    width: 100%;\n  }\n  .client-libraries span {\n    display: none;\n  }\n}\n</style>\n"],"mappings":""}