@scalar/api-reference 1.60.0 → 1.62.0

package/dist/features/developer-tools/components/ModifyConfiguration.vue.script.js

@@ -1,8 +1,9 @@
+import { useLocalization } from "../../localization/use-localization.js";
 import ApiReferenceToolbarPopover_default from "./ApiReferenceToolbarPopover.vue.js";
 import ApiReferenceToolbarConfigLayout_default from "./ApiReferenceToolbarConfigLayout.vue.js";
 import ApiReferenceToolbarConfigLayoutOptions_default from "./ApiReferenceToolbarConfigLayoutOptions.vue.js";
 import ApiReferenceToolbarConfigTheme_default from "./ApiReferenceToolbarConfigTheme.vue.js";
-import { computed, createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, openBlock, unref, useModel, withCtx } from "vue";
+import { computed, createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, openBlock, toDisplayString, unref, useModel, withCtx } from "vue";
 import { ScalarCodeBlock } from "@scalar/components/code-block";
 import { prettyPrintJson } from "@scalar/helpers/json/pretty-print-json";
 import { ScalarFormField, ScalarFormSection } from "@scalar/components/form";
@@ -17,6 +18,7 @@ var ModifyConfiguration_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 	emits: ["update:overrides"],
 	setup(__props) {
 		const overrides = useModel(__props, "overrides");
+		const { translate } = useLocalization();
 		const snippet = computed(() => {
 			return prettyPrintJson({
 				...overrides.value,
@@ -40,9 +42,9 @@ var ModifyConfiguration_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(ApiReferenceToolbarPopover_default, { class: "w-120" }, {
-				label: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Configure", -1)])]),
+				label: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("developerTools.configure")), 1)]),
 				default: withCtx(() => [createVNode(unref(ScalarFormSection), null, {
-					label: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("Scalar Configuration", -1)])]),
+					label: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("developerTools.scalarConfiguration")), 1)]),
 					default: withCtx(() => [createVNode(unref(ScalarCodeBlock), {
 						class: "bg-b-1.5 flex max-h-40 flex-col rounded border text-sm",
 						content: snippet.value,
@@ -51,7 +53,7 @@ var ModifyConfiguration_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 					_: 1
 				}), createElementVNode("div", _hoisted_1, [
 					createVNode(unref(ScalarFormField), null, {
-						label: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("Theme", -1)])]),
+						label: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("developerTools.theme")), 1)]),
 						default: withCtx(() => [createVNode(ApiReferenceToolbarConfigTheme_default, {
 							modelValue: theme.value,
 							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => theme.value = $event)
@@ -59,7 +61,7 @@ var ModifyConfiguration_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 						_: 1
 					}),
 					createVNode(unref(ScalarFormField), null, {
-						label: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode("Layout", -1)])]),
+						label: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("developerTools.layout")), 1)]),
 						default: withCtx(() => [createVNode(ApiReferenceToolbarConfigLayout_default, {
 							modelValue: layout.value,
 							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => layout.value = $event)
@@ -67,7 +69,7 @@ var ModifyConfiguration_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 						_: 1
 					}),
 					createVNode(unref(ScalarFormField), { is: "div" }, {
-						label: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode("Layout Options", -1)])]),
+						label: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("developerTools.layoutOptions")), 1)]),
 						default: withCtx(() => [createVNode(ApiReferenceToolbarConfigLayoutOptions_default, {
 							modelValue: overrides.value,
 							"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => overrides.value = $event),

package/dist/features/developer-tools/components/ModifyConfiguration.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModifyConfiguration.vue.script.js","names":[],"sources":["../../../../src/features/developer-tools/components/ModifyConfiguration.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarFormField, ScalarFormSection } from '@scalar/components/form'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { type ThemeId } from '@scalar/themes'\nimport type { ApiReferenceConfiguration } from '@scalar/types/api-reference'\nimport { computed } from 'vue'\n\nimport ApiReferenceToolbarConfigLayout from './ApiReferenceToolbarConfigLayout.vue'\nimport ApiReferenceToolbarConfigLayoutOptions from './ApiReferenceToolbarConfigLayoutOptions.vue'\nimport ApiReferenceToolbarConfigTheme from './ApiReferenceToolbarConfigTheme.vue'\nimport ApiReferenceToolbarPopover from './ApiReferenceToolbarPopover.vue'\n\nconst { configuration } = defineProps<{\n  configuration?: Partial<ApiReferenceConfiguration>\n}>()\n\nconst overrides = defineModel<Partial<ApiReferenceConfiguration>>('overrides')\n\nconst snippet = computed<string>(() => {\n  return prettyPrintJson({\n    ...overrides.value, // Make sure the overrides are first\n    ...configuration,\n    ...overrides.value, // But also that they override the configuration\n  })\n})\n\nconst theme = computed<ThemeId>({\n  get: () => overrides.value?.theme ?? configuration?.theme ?? 'default',\n  set: (t) => (overrides.value = { ...overrides.value, theme: t }),\n})\n\nconst layout = computed<'modern' | 'classic'>({\n  get: () => overrides.value?.layout ?? configuration?.layout ?? 'modern',\n  set: (l) => (overrides.value = { ...overrides.value, layout: l }),\n})\n</script>\n<template>\n  <ApiReferenceToolbarPopover class=\"w-120\">\n    <template #label>Configure</template>\n    <ScalarFormSection>\n      <template #label>Scalar Configuration</template>\n      <ScalarCodeBlock\n        class=\"bg-b-1.5 flex max-h-40 flex-col rounded border text-sm\"\n        :content=\"snippet\"\n        lang=\"json\" />\n    </ScalarFormSection>\n    <div class=\"flex flex-col gap-4\">\n      <ScalarFormField>\n        <template #label>Theme</template>\n        <ApiReferenceToolbarConfigTheme v-model=\"theme\" />\n      </ScalarFormField>\n      <ScalarFormField>\n        <template #label>Layout</template>\n        <ApiReferenceToolbarConfigLayout v-model=\"layout\" />\n      </ScalarFormField>\n      <ScalarFormField is=\"div\">\n        <template #label>Layout Options</template>\n        <ApiReferenceToolbarConfigLayoutOptions\n          v-model=\"overrides\"\n          :configuration />\n      </ScalarFormField>\n    </div>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAiBA,MAAM,YAAY,SAA+C,SAAC,YAAW;EAE7E,MAAM,UAAU,eAAuB;AACrC,UAAO,gBAAgB;IACrB,GAAG,UAAU;IACb,GAAG,QAAA;IACH,GAAG,UAAU;IACd,CAAA;IACF;EAED,MAAM,QAAQ,SAAkB;GAC9B,WAAW,UAAU,OAAO,SAAS,QAAA,eAAe,SAAS;GAC7D,MAAM,MAAO,UAAU,QAAQ;IAAE,GAAG,UAAU;IAAO,OAAO;IAAG;GAChE,CAAA;EAED,MAAM,SAAS,SAA+B;GAC5C,WAAW,UAAU,OAAO,UAAU,QAAA,eAAe,UAAU;GAC/D,MAAM,MAAO,UAAU,QAAQ;IAAE,GAAG,UAAU;IAAO,QAAQ;IAAG;GACjE,CAAA;;uBAGC,YAyB6B,oCAAA,EAzBD,OAAM,SAAO,EAAA;IAC5B,OAAK,cAAU,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAT,aAAS,GAAA,CAAA,EAAA,CAAA;2BAON,CANpB,YAMoB,MAAA,kBAAA,EAAA,MAAA;KALP,OAAK,cAAqB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAApB,wBAAoB,GAAA,CAAA,EAAA,CAAA;4BAIrB,CAHhB,YAGgB,MAAA,gBAAA,EAAA;MAFd,OAAM;MACL,SAAS,QAAA;MACV,MAAK;;;QAET,mBAeM,OAfN,YAeM;KAdJ,YAGkB,MAAA,gBAAA,EAAA,MAAA;MAFL,OAAK,cAAM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAL,SAAK,GAAA,CAAA,EAAA,CAAA;6BAC4B,CAAlD,YAAkD,wCAAA;mBAAT,MAAA;0EAAK,QAAA;;;;KAEhD,YAGkB,MAAA,gBAAA,EAAA,MAAA;MAFL,OAAK,cAAO,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAN,UAAM,GAAA,CAAA,EAAA,CAAA;6BAC6B,CAApD,YAAoD,yCAAA;mBAAV,OAAA;2EAAM,QAAA;;;;KAElD,YAKkB,MAAA,gBAAA,EAAA,EALD,IAAG,OAAK,EAAA;MACZ,OAAK,cAAe,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAd,kBAAc,GAAA,CAAA,EAAA,CAAA;6BAGZ,CAFnB,YAEmB,gDAAA;mBADR,UAAA;8EAAS,QAAA;OACjB,eAAA,QAAA"}
+{"version":3,"file":"ModifyConfiguration.vue.script.js","names":[],"sources":["../../../../src/features/developer-tools/components/ModifyConfiguration.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarFormField, ScalarFormSection } from '@scalar/components/form'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { type ThemeId } from '@scalar/themes'\nimport type { ApiReferenceConfiguration } from '@scalar/types/api-reference'\nimport { computed } from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nimport ApiReferenceToolbarConfigLayout from './ApiReferenceToolbarConfigLayout.vue'\nimport ApiReferenceToolbarConfigLayoutOptions from './ApiReferenceToolbarConfigLayoutOptions.vue'\nimport ApiReferenceToolbarConfigTheme from './ApiReferenceToolbarConfigTheme.vue'\nimport ApiReferenceToolbarPopover from './ApiReferenceToolbarPopover.vue'\n\nconst { configuration } = defineProps<{\n  configuration?: Partial<ApiReferenceConfiguration>\n}>()\n\nconst overrides = defineModel<Partial<ApiReferenceConfiguration>>('overrides')\nconst { translate } = useLocalization()\n\nconst snippet = computed<string>(() => {\n  return prettyPrintJson({\n    ...overrides.value, // Make sure the overrides are first\n    ...configuration,\n    ...overrides.value, // But also that they override the configuration\n  })\n})\n\nconst theme = computed<ThemeId>({\n  get: () => overrides.value?.theme ?? configuration?.theme ?? 'default',\n  set: (t) => (overrides.value = { ...overrides.value, theme: t }),\n})\n\nconst layout = computed<'modern' | 'classic'>({\n  get: () => overrides.value?.layout ?? configuration?.layout ?? 'modern',\n  set: (l) => (overrides.value = { ...overrides.value, layout: l }),\n})\n</script>\n<template>\n  <ApiReferenceToolbarPopover class=\"w-120\">\n    <template #label>{{ translate('developerTools.configure') }}</template>\n    <ScalarFormSection>\n      <template #label>\n        {{ translate('developerTools.scalarConfiguration') }}\n      </template>\n      <ScalarCodeBlock\n        class=\"bg-b-1.5 flex max-h-40 flex-col rounded border text-sm\"\n        :content=\"snippet\"\n        lang=\"json\" />\n    </ScalarFormSection>\n    <div class=\"flex flex-col gap-4\">\n      <ScalarFormField>\n        <template #label>{{ translate('developerTools.theme') }}</template>\n        <ApiReferenceToolbarConfigTheme v-model=\"theme\" />\n      </ScalarFormField>\n      <ScalarFormField>\n        <template #label>{{ translate('developerTools.layout') }}</template>\n        <ApiReferenceToolbarConfigLayout v-model=\"layout\" />\n      </ScalarFormField>\n      <ScalarFormField is=\"div\">\n        <template #label>\n          {{ translate('developerTools.layoutOptions') }}\n        </template>\n        <ApiReferenceToolbarConfigLayoutOptions\n          v-model=\"overrides\"\n          :configuration />\n      </ScalarFormField>\n    </div>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAmBA,MAAM,YAAY,SAA+C,SAAC,YAAW;EAC7E,MAAM,EAAE,cAAc,iBAAgB;EAEtC,MAAM,UAAU,eAAuB;AACrC,UAAO,gBAAgB;IACrB,GAAG,UAAU;IACb,GAAG,QAAA;IACH,GAAG,UAAU;IACd,CAAA;IACF;EAED,MAAM,QAAQ,SAAkB;GAC9B,WAAW,UAAU,OAAO,SAAS,QAAA,eAAe,SAAS;GAC7D,MAAM,MAAO,UAAU,QAAQ;IAAE,GAAG,UAAU;IAAO,OAAO;IAAG;GAChE,CAAA;EAED,MAAM,SAAS,SAA+B;GAC5C,WAAW,UAAU,OAAO,UAAU,QAAA,eAAe,UAAU;GAC/D,MAAM,MAAO,UAAU,QAAQ;IAAE,GAAG,UAAU;IAAO,QAAQ;IAAG;GACjE,CAAA;;uBAGC,YA6B6B,oCAAA,EA7BD,OAAM,SAAO,EAAA;IAC5B,OAAK,cAA4C,CAAA,gBAAA,gBAAxC,MAAA,UAAS,CAAA,2BAAA,CAAA,EAAA,EAAA,CAAA,CAAA;2BAST,CARpB,YAQoB,MAAA,kBAAA,EAAA,MAAA;KAPP,OAAK,cACuC,CAAA,gBAAA,gBAAlD,MAAA,UAAS,CAAA,qCAAA,CAAA,EAAA,EAAA,CAAA,CAAA;4BAKE,CAHhB,YAGgB,MAAA,gBAAA,EAAA;MAFd,OAAM;MACL,SAAS,QAAA;MACV,MAAK;;;QAET,mBAiBM,OAjBN,YAiBM;KAhBJ,YAGkB,MAAA,gBAAA,EAAA,MAAA;MAFL,OAAK,cAAwC,CAAA,gBAAA,gBAApC,MAAA,UAAS,CAAA,uBAAA,CAAA,EAAA,EAAA,CAAA,CAAA;6BACqB,CAAlD,YAAkD,wCAAA;mBAAT,MAAA;0EAAK,QAAA;;;;KAEhD,YAGkB,MAAA,gBAAA,EAAA,MAAA;MAFL,OAAK,cAAyC,CAAA,gBAAA,gBAArC,MAAA,UAAS,CAAA,wBAAA,CAAA,EAAA,EAAA,CAAA,CAAA;6BACuB,CAApD,YAAoD,yCAAA;mBAAV,OAAA;2EAAM,QAAA;;;;KAElD,YAOkB,MAAA,gBAAA,EAAA,EAPD,IAAG,OAAK,EAAA;MACZ,OAAK,cACiC,CAAA,gBAAA,gBAA5C,MAAA,UAAS,CAAA,+BAAA,CAAA,EAAA,EAAA,CAAA,CAAA;6BAIK,CAFnB,YAEmB,gDAAA;mBADR,UAAA;8EAAS,QAAA;OACjB,eAAA,QAAA"}

package/dist/features/developer-tools/components/ShareApiReference.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShareApiReference.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/developer-tools/components/ShareApiReference.vue"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAKpE,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,cAAc,CAAA;IACzB,YAAY,EAAE,YAAY,CAAA;CAC3B,CAAC;AAmEF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ShareApiReference.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/developer-tools/components/ShareApiReference.vue"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAOpE,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,cAAc,CAAA;IACzB,YAAY,EAAE,YAAY,CAAA;CAC3B,CAAC;AAkFF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/developer-tools/components/ShareApiReference.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShareApiReference.vue.js","names":[],"sources":["../../../../src/features/developer-tools/components/ShareApiReference.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarFormSection } from '@scalar/components/form'\nimport type { ExternalUrls } from '@scalar/types/api-reference'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\n\nimport ApiReferenceToolbarPopover from './ApiReferenceToolbarPopover.vue'\nimport ApiReferenceToolbarShareTemporary from './ApiReferenceToolbarShareTemporary.vue'\n\nconst { workspace, externalUrls } = defineProps<{\n  workspace: WorkspaceStore\n  externalUrls: ExternalUrls\n}>()\n</script>\n<template>\n  <ApiReferenceToolbarPopover class=\"w-120\">\n    <template #label>Share</template>\n    <ScalarFormSection>\n      <template #label>Share your API Reference</template>\n      <p class=\"text-c-2 mb-2 leading-normal\">\n        Upload your OpenAPI document to share your API Reference with others. As\n        easy as pressing a button.\n      </p>\n      <ApiReferenceToolbarShareTemporary\n        :externalUrls\n        :workspace />\n    </ScalarFormSection>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ShareApiReference.vue.js","names":[],"sources":["../../../../src/features/developer-tools/components/ShareApiReference.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarFormSection } from '@scalar/components/form'\nimport type { ExternalUrls } from '@scalar/types/api-reference'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\n\nimport { useLocalization } from '@/features/localization'\n\nimport ApiReferenceToolbarPopover from './ApiReferenceToolbarPopover.vue'\nimport ApiReferenceToolbarShareTemporary from './ApiReferenceToolbarShareTemporary.vue'\n\nconst { workspace, externalUrls } = defineProps<{\n  workspace: WorkspaceStore\n  externalUrls: ExternalUrls\n}>()\nconst { translate } = useLocalization()\n</script>\n<template>\n  <ApiReferenceToolbarPopover class=\"w-120\">\n    <template #label>{{ translate('developerTools.share') }}</template>\n    <ScalarFormSection>\n      <template #label>{{ translate('developerTools.shareTitle') }}</template>\n      <p class=\"text-c-2 mb-2 leading-normal\">\n        {{ translate('developerTools.shareDescription') }}\n      </p>\n      <ApiReferenceToolbarShareTemporary\n        :externalUrls\n        :workspace />\n    </ScalarFormSection>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":""}

package/dist/features/developer-tools/components/ShareApiReference.vue.script.js

@@ -1,8 +1,10 @@
+import { useLocalization } from "../../localization/use-localization.js";
 import ApiReferenceToolbarPopover_default from "./ApiReferenceToolbarPopover.vue.js";
 import ApiReferenceToolbarShareTemporary_default from "./ApiReferenceToolbarShareTemporary.vue.js";
-import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
+import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { ScalarFormSection } from "@scalar/components/form";
 //#region src/features/developer-tools/components/ShareApiReference.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "text-c-2 mb-2 leading-normal" };
 var ShareApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ShareApiReference",
 	props: {
@@ -10,12 +12,13 @@ var ShareApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		externalUrls: {}
 	},
 	setup(__props) {
+		const { translate } = useLocalization();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(ApiReferenceToolbarPopover_default, { class: "w-120" }, {
-				label: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("Share", -1)])]),
+				label: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("developerTools.share")), 1)]),
 				default: withCtx(() => [createVNode(unref(ScalarFormSection), null, {
-					label: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("Share your API Reference", -1)])]),
-					default: withCtx(() => [_cache[2] || (_cache[2] = createElementVNode("p", { class: "text-c-2 mb-2 leading-normal" }, " Upload your OpenAPI document to share your API Reference with others. As easy as pressing a button. ", -1)), createVNode(ApiReferenceToolbarShareTemporary_default, {
+					label: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("developerTools.shareTitle")), 1)]),
+					default: withCtx(() => [createElementVNode("p", _hoisted_1, toDisplayString(unref(translate)("developerTools.shareDescription")), 1), createVNode(ApiReferenceToolbarShareTemporary_default, {
 						externalUrls: __props.externalUrls,
 						workspace: __props.workspace
 					}, null, 8, ["externalUrls", "workspace"])]),

package/dist/features/developer-tools/components/ShareApiReference.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShareApiReference.vue.script.js","names":[],"sources":["../../../../src/features/developer-tools/components/ShareApiReference.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarFormSection } from '@scalar/components/form'\nimport type { ExternalUrls } from '@scalar/types/api-reference'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\n\nimport ApiReferenceToolbarPopover from './ApiReferenceToolbarPopover.vue'\nimport ApiReferenceToolbarShareTemporary from './ApiReferenceToolbarShareTemporary.vue'\n\nconst { workspace, externalUrls } = defineProps<{\n  workspace: WorkspaceStore\n  externalUrls: ExternalUrls\n}>()\n</script>\n<template>\n  <ApiReferenceToolbarPopover class=\"w-120\">\n    <template #label>Share</template>\n    <ScalarFormSection>\n      <template #label>Share your API Reference</template>\n      <p class=\"text-c-2 mb-2 leading-normal\">\n        Upload your OpenAPI document to share your API Reference with others. As\n        easy as pressing a button.\n      </p>\n      <ApiReferenceToolbarShareTemporary\n        :externalUrls\n        :workspace />\n    </ScalarFormSection>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;uBAcE,YAY6B,oCAAA,EAZD,OAAM,SAAO,EAAA;IAC5B,OAAK,cAAM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAL,SAAK,GAAA,CAAA,EAAA,CAAA;2BAUF,CATpB,YASoB,MAAA,kBAAA,EAAA,MAAA;KARP,OAAK,cAAyB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAxB,4BAAwB,GAAA,CAAA,EAAA,CAAA;4BAIrC,CAAA,OAAA,OAAA,OAAA,KAHJ,mBAGI,KAAA,EAHD,OAAM,gCAA8B,EAAC,yGAGxC,GAAA,GACA,YAEe,2CAAA;MADZ,cAAA,QAAA;MACA,WAAA,QAAA"}
+{"version":3,"file":"ShareApiReference.vue.script.js","names":[],"sources":["../../../../src/features/developer-tools/components/ShareApiReference.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarFormSection } from '@scalar/components/form'\nimport type { ExternalUrls } from '@scalar/types/api-reference'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\n\nimport { useLocalization } from '@/features/localization'\n\nimport ApiReferenceToolbarPopover from './ApiReferenceToolbarPopover.vue'\nimport ApiReferenceToolbarShareTemporary from './ApiReferenceToolbarShareTemporary.vue'\n\nconst { workspace, externalUrls } = defineProps<{\n  workspace: WorkspaceStore\n  externalUrls: ExternalUrls\n}>()\nconst { translate } = useLocalization()\n</script>\n<template>\n  <ApiReferenceToolbarPopover class=\"w-120\">\n    <template #label>{{ translate('developerTools.share') }}</template>\n    <ScalarFormSection>\n      <template #label>{{ translate('developerTools.shareTitle') }}</template>\n      <p class=\"text-c-2 mb-2 leading-normal\">\n        {{ translate('developerTools.shareDescription') }}\n      </p>\n      <ApiReferenceToolbarShareTemporary\n        :externalUrls\n        :workspace />\n    </ScalarFormSection>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAcA,MAAM,EAAE,cAAc,iBAAgB;;uBAGpC,YAW6B,oCAAA,EAXD,OAAM,SAAO,EAAA;IAC5B,OAAK,cAAwC,CAAA,gBAAA,gBAApC,MAAA,UAAS,CAAA,uBAAA,CAAA,EAAA,EAAA,CAAA,CAAA;2BAST,CARpB,YAQoB,MAAA,kBAAA,EAAA,MAAA;KAPP,OAAK,cAA6C,CAAA,gBAAA,gBAAzC,MAAA,UAAS,CAAA,4BAAA,CAAA,EAAA,EAAA,CAAA,CAAA;4BAGzB,CAFJ,mBAEI,KAFJ,YAEI,gBADC,MAAA,UAAS,CAAA,kCAAA,CAAA,EAAA,EAAA,EAEd,YAEe,2CAAA;MADZ,cAAA,QAAA;MACA,WAAA,QAAA"}

package/dist/features/example-responses/ExampleResponse.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleResponse.vue.d.ts","sourceRoot":"","sources":["../../../src/features/example-responses/ExampleResponse.vue"],"names":[],"mappings":"AAgJA,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EAEhB,MAAM,8DAA8D,CAAA;AAGrE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,eAAe,GAAG,SAAS,CAAA;IACrC,OAAO,EAAE,aAAa,GAAG,SAAS,CAAA;CACnC,CAAC;AAwHF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ExampleResponse.vue.d.ts","sourceRoot":"","sources":["../../../src/features/example-responses/ExampleResponse.vue"],"names":[],"mappings":"AAmJA,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EAEhB,MAAM,8DAA8D,CAAA;AAKrE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,eAAe,GAAG,SAAS,CAAA;IACrC,OAAO,EAAE,aAAa,GAAG,SAAS,CAAA;CACnC,CAAC;AA2HF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/example-responses/ExampleResponse.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import ExampleResponse_vue_vue_type_script_setup_true_lang_default from "./ExampleResponse.vue.script.js";
 /* empty css                              */
 //#region src/features/example-responses/ExampleResponse.vue
-var ExampleResponse_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ExampleResponse_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-da52ac9d"]]);
+var ExampleResponse_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ExampleResponse_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ce6cfefc"]]);
 //#endregion
 export { ExampleResponse_default as default };
 

package/dist/features/example-responses/ExampleResponse.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleResponse.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponse.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { getResolvedRefDeep } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarVirtualCodeBlock } from '@scalar/components/virtual-code-block'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { getExampleFromSchema } from '@scalar/workspace-store/request-example'\nimport type {\n  ExampleObject,\n  MediaTypeObject,\n  SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nconst { example, response } = defineProps<{\n  response: MediaTypeObject | undefined\n  example: ExampleObject | undefined\n}>()\n\n/** Get content from the appropriate source */\nconst getContent = () => {\n  if (example !== undefined) {\n    return getResolvedRefDeep(example)?.value ?? ''\n  }\n\n  if (response?.schema) {\n    return getExampleFromSchema(\n      // Should be safe to deep resolve the schema here because we don't have to do any sibling resolution for example generation\n      getResolvedRefDeep(response.schema) as SchemaObject,\n      {\n        emptyString: 'string',\n        mode: 'read',\n      },\n    )\n  }\n\n  return undefined\n}\n\n/** Pre-pretty printed content string, avoids multiple pretty prints*/\nconst prettyPrintedContent = computed(() => {\n  const content = getContent()\n  if (content === undefined) {\n    return undefined\n  }\n  return prettyPrintJson(content)\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\n// Virtualize the code block if it's too large\nconst shouldVirtualize = computed(() => {\n  if (prettyPrintedContent.value === undefined) {\n    return false\n  }\n  return prettyPrintedContent.value.length > VIRTUALIZATION_THRESHOLD\n})\n</script>\n<template>\n  <!-- Example -->\n  <ScalarCodeBlock\n    v-if=\"prettyPrintedContent !== undefined && !shouldVirtualize\"\n    class=\"bg-b-2\"\n    lang=\"json\"\n    :prettyPrintedContent=\"prettyPrintedContent\" />\n\n  <ScalarVirtualCodeBlock\n    v-else-if=\"prettyPrintedContent !== undefined && shouldVirtualize\"\n    class=\"bg-b-2\"\n    :content=\"prettyPrintedContent\"\n    lang=\"json\" />\n\n  <div\n    v-else\n    class=\"empty-state\">\n    No Body\n  </div>\n</template>\n\n<style scoped>\n.empty-state {\n  margin: 10px 0 10px 12px;\n  text-align: center;\n  font-size: var(--scalar-mini);\n  min-height: 56px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--scalar-radius-lg);\n  color: var(--scalar-color-2);\n}\n\n.rule-title {\n  font-family: var(--scalar-font-code);\n  color: var(--scalar-color-1);\n  display: inline-block;\n  margin: 12px 0 6px;\n  border-radius: var(--scalar-radius);\n}\n\n.rule {\n  margin: 0 12px 0;\n  border-radius: var(--scalar-radius-lg);\n}\n\n.rule-items {\n  counter-reset: list-number;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  border-left: 1px solid var(--scalar-border-color);\n  padding: 12px 0 12px;\n}\n.rule-item {\n  counter-increment: list-number;\n  border: 1px solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg);\n  overflow: hidden;\n  margin-left: 24px;\n}\n.rule-item:before {\n  /* content: counter(list-number); */\n  border: 1px solid var(--scalar-border-color);\n  border-top: 0;\n  border-right: 0;\n  content: ' ';\n  display: block;\n  width: 24px;\n  height: 6px;\n  border-radius: 0 0 0 var(--scalar-radius-lg);\n  margin-top: 6px;\n  color: var(--scalar-color-2);\n  transform: translateX(-25px);\n  color: var(--scalar-color-1);\n  position: absolute;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ExampleResponse.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponse.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { getResolvedRefDeep } from '@scalar/blocks/code-example'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarVirtualCodeBlock } from '@scalar/components/virtual-code-block'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { getExampleFromSchema } from '@scalar/workspace-store/request-example'\nimport type {\n  ExampleObject,\n  MediaTypeObject,\n  SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nconst { example, response } = defineProps<{\n  response: MediaTypeObject | undefined\n  example: ExampleObject | undefined\n}>()\nconst { translate } = useLocalization()\n\n/** Get content from the appropriate source */\nconst getContent = () => {\n  if (example !== undefined) {\n    return getResolvedRefDeep(example)?.value ?? ''\n  }\n\n  if (response?.schema) {\n    return getExampleFromSchema(\n      // Should be safe to deep resolve the schema here because we don't have to do any sibling resolution for example generation\n      getResolvedRefDeep(response.schema) as SchemaObject,\n      {\n        emptyString: 'string',\n        mode: 'read',\n      },\n    )\n  }\n\n  return undefined\n}\n\n/** Pre-pretty printed content string, avoids multiple pretty prints*/\nconst prettyPrintedContent = computed(() => {\n  const content = getContent()\n  if (content === undefined) {\n    return undefined\n  }\n  return prettyPrintJson(content)\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\n// Virtualize the code block if it's too large\nconst shouldVirtualize = computed(() => {\n  if (prettyPrintedContent.value === undefined) {\n    return false\n  }\n  return prettyPrintedContent.value.length > VIRTUALIZATION_THRESHOLD\n})\n</script>\n<template>\n  <!-- Example -->\n  <ScalarCodeBlock\n    v-if=\"prettyPrintedContent !== undefined && !shouldVirtualize\"\n    class=\"bg-b-2\"\n    lang=\"json\"\n    :prettyPrintedContent=\"prettyPrintedContent\" />\n\n  <ScalarVirtualCodeBlock\n    v-else-if=\"prettyPrintedContent !== undefined && shouldVirtualize\"\n    class=\"bg-b-2\"\n    :content=\"prettyPrintedContent\"\n    lang=\"json\" />\n\n  <div\n    v-else\n    class=\"empty-state\">\n    {{ translate('response.noBody') }}\n  </div>\n</template>\n\n<style scoped>\n.empty-state {\n  margin: 10px 0 10px 12px;\n  text-align: center;\n  font-size: var(--scalar-mini);\n  min-height: 56px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--scalar-radius-lg);\n  color: var(--scalar-color-2);\n}\n\n.rule-title {\n  font-family: var(--scalar-font-code);\n  color: var(--scalar-color-1);\n  display: inline-block;\n  margin: 12px 0 6px;\n  border-radius: var(--scalar-radius);\n}\n\n.rule {\n  margin: 0 12px 0;\n  border-radius: var(--scalar-radius-lg);\n}\n\n.rule-items {\n  counter-reset: list-number;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  border-left: 1px solid var(--scalar-border-color);\n  padding: 12px 0 12px;\n}\n.rule-item {\n  counter-increment: list-number;\n  border: 1px solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg);\n  overflow: hidden;\n  margin-left: 24px;\n}\n.rule-item:before {\n  /* content: counter(list-number); */\n  border: 1px solid var(--scalar-border-color);\n  border-top: 0;\n  border-right: 0;\n  content: ' ';\n  display: block;\n  width: 24px;\n  height: 6px;\n  border-radius: 0 0 0 var(--scalar-radius-lg);\n  margin-top: 6px;\n  color: var(--scalar-color-2);\n  transform: translateX(-25px);\n  color: var(--scalar-color-1);\n  position: absolute;\n}\n</style>\n"],"mappings":""}

package/dist/features/example-responses/ExampleResponse.vue.script.js

@@ -1,6 +1,7 @@
-import { computed, createBlock, createElementBlock, defineComponent, openBlock, unref } from "vue";
+import { useLocalization } from "../localization/use-localization.js";
+import { computed, createBlock, createElementBlock, defineComponent, openBlock, toDisplayString, unref } from "vue";
 import { getExampleFromSchema } from "@scalar/workspace-store/request-example";
-import { getResolvedRefDeep } from "@scalar/api-client/blocks/operation-code-sample";
+import { getResolvedRefDeep } from "@scalar/blocks/code-example";
 import { ScalarCodeBlock } from "@scalar/components/code-block";
 import { ScalarVirtualCodeBlock } from "@scalar/components/virtual-code-block";
 import { prettyPrintJson } from "@scalar/helpers/json/pretty-print-json";
@@ -17,6 +18,7 @@ var ExampleResponse_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		example: {}
 	},
 	setup(__props) {
+		const { translate } = useLocalization();
 		/** Get content from the appropriate source */
 		const getContent = () => {
 			if (__props.example !== void 0) return getResolvedRefDeep(__props.example)?.value ?? "";
@@ -46,7 +48,7 @@ var ExampleResponse_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 				class: "bg-b-2",
 				content: prettyPrintedContent.value,
 				lang: "json"
-			}, null, 8, ["content"])) : (openBlock(), createElementBlock("div", _hoisted_1, " No Body "));
+			}, null, 8, ["content"])) : (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(unref(translate)("response.noBody")), 1));
 		};
 	}
 });

package/dist/features/example-responses/ExampleResponse.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleResponse.vue.script.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponse.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { getResolvedRefDeep } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarVirtualCodeBlock } from '@scalar/components/virtual-code-block'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { getExampleFromSchema } from '@scalar/workspace-store/request-example'\nimport type {\n  ExampleObject,\n  MediaTypeObject,\n  SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nconst { example, response } = defineProps<{\n  response: MediaTypeObject | undefined\n  example: ExampleObject | undefined\n}>()\n\n/** Get content from the appropriate source */\nconst getContent = () => {\n  if (example !== undefined) {\n    return getResolvedRefDeep(example)?.value ?? ''\n  }\n\n  if (response?.schema) {\n    return getExampleFromSchema(\n      // Should be safe to deep resolve the schema here because we don't have to do any sibling resolution for example generation\n      getResolvedRefDeep(response.schema) as SchemaObject,\n      {\n        emptyString: 'string',\n        mode: 'read',\n      },\n    )\n  }\n\n  return undefined\n}\n\n/** Pre-pretty printed content string, avoids multiple pretty prints*/\nconst prettyPrintedContent = computed(() => {\n  const content = getContent()\n  if (content === undefined) {\n    return undefined\n  }\n  return prettyPrintJson(content)\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\n// Virtualize the code block if it's too large\nconst shouldVirtualize = computed(() => {\n  if (prettyPrintedContent.value === undefined) {\n    return false\n  }\n  return prettyPrintedContent.value.length > VIRTUALIZATION_THRESHOLD\n})\n</script>\n<template>\n  <!-- Example -->\n  <ScalarCodeBlock\n    v-if=\"prettyPrintedContent !== undefined && !shouldVirtualize\"\n    class=\"bg-b-2\"\n    lang=\"json\"\n    :prettyPrintedContent=\"prettyPrintedContent\" />\n\n  <ScalarVirtualCodeBlock\n    v-else-if=\"prettyPrintedContent !== undefined && shouldVirtualize\"\n    class=\"bg-b-2\"\n    :content=\"prettyPrintedContent\"\n    lang=\"json\" />\n\n  <div\n    v-else\n    class=\"empty-state\">\n    No Body\n  </div>\n</template>\n\n<style scoped>\n.empty-state {\n  margin: 10px 0 10px 12px;\n  text-align: center;\n  font-size: var(--scalar-mini);\n  min-height: 56px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--scalar-radius-lg);\n  color: var(--scalar-color-2);\n}\n\n.rule-title {\n  font-family: var(--scalar-font-code);\n  color: var(--scalar-color-1);\n  display: inline-block;\n  margin: 12px 0 6px;\n  border-radius: var(--scalar-radius);\n}\n\n.rule {\n  margin: 0 12px 0;\n  border-radius: var(--scalar-radius-lg);\n}\n\n.rule-items {\n  counter-reset: list-number;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  border-left: 1px solid var(--scalar-border-color);\n  padding: 12px 0 12px;\n}\n.rule-item {\n  counter-increment: list-number;\n  border: 1px solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg);\n  overflow: hidden;\n  margin-left: 24px;\n}\n.rule-item:before {\n  /* content: counter(list-number); */\n  border: 1px solid var(--scalar-border-color);\n  border-top: 0;\n  border-right: 0;\n  content: ' ';\n  display: block;\n  width: 24px;\n  height: 6px;\n  border-radius: 0 0 0 var(--scalar-radius-lg);\n  margin-top: 6px;\n  color: var(--scalar-color-2);\n  transform: translateX(-25px);\n  color: var(--scalar-color-1);\n  position: absolute;\n}\n</style>\n"],"mappings":";;;;;;;;;;;AA+CA,IAAM,2BAA2B;;;;;;;;;EA5BjC,MAAM,mBAAmB;AACvB,OAAI,QAAA,YAAY,KAAA,EACd,QAAO,mBAAmB,QAAA,QAAQ,EAAE,SAAS;AAG/C,OAAI,QAAA,UAAU,OACZ,QAAO,qBAEL,mBAAmB,QAAA,SAAS,OAAO,EACnC;IACE,aAAa;IACb,MAAM;IACP,CACH;;;EAOJ,MAAM,uBAAuB,eAAe;GAC1C,MAAM,UAAU,YAAW;AAC3B,OAAI,YAAY,KAAA,EACd;AAEF,UAAO,gBAAgB,QAAO;IAC/B;EAKD,MAAM,mBAAmB,eAAe;AACtC,OAAI,qBAAqB,UAAU,KAAA,EACjC,QAAO;AAET,UAAO,qBAAqB,MAAM,SAAS;IAC5C;;UAKS,qBAAA,UAAyB,KAAA,KAAS,CAAK,iBAAA,SAAA,WAAA,EAD/C,YAIiD,MAAA,gBAAA,EAAA;;IAF/C,OAAM;IACN,MAAK;IACJ,sBAAsB,qBAAA;4CAGZ,qBAAA,UAAyB,KAAA,KAAa,iBAAA,SAAA,WAAA,EADnD,YAIgB,MAAA,uBAAA,EAAA;;IAFd,OAAM;IACL,SAAS,qBAAA;IACV,MAAK;6CAEP,mBAIM,OAJN,YAEsB,YAEtB"}
+{"version":3,"file":"ExampleResponse.vue.script.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponse.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { getResolvedRefDeep } from '@scalar/blocks/code-example'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarVirtualCodeBlock } from '@scalar/components/virtual-code-block'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { getExampleFromSchema } from '@scalar/workspace-store/request-example'\nimport type {\n  ExampleObject,\n  MediaTypeObject,\n  SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport { useLocalization } from '@/features/localization'\n\nconst { example, response } = defineProps<{\n  response: MediaTypeObject | undefined\n  example: ExampleObject | undefined\n}>()\nconst { translate } = useLocalization()\n\n/** Get content from the appropriate source */\nconst getContent = () => {\n  if (example !== undefined) {\n    return getResolvedRefDeep(example)?.value ?? ''\n  }\n\n  if (response?.schema) {\n    return getExampleFromSchema(\n      // Should be safe to deep resolve the schema here because we don't have to do any sibling resolution for example generation\n      getResolvedRefDeep(response.schema) as SchemaObject,\n      {\n        emptyString: 'string',\n        mode: 'read',\n      },\n    )\n  }\n\n  return undefined\n}\n\n/** Pre-pretty printed content string, avoids multiple pretty prints*/\nconst prettyPrintedContent = computed(() => {\n  const content = getContent()\n  if (content === undefined) {\n    return undefined\n  }\n  return prettyPrintJson(content)\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\n// Virtualize the code block if it's too large\nconst shouldVirtualize = computed(() => {\n  if (prettyPrintedContent.value === undefined) {\n    return false\n  }\n  return prettyPrintedContent.value.length > VIRTUALIZATION_THRESHOLD\n})\n</script>\n<template>\n  <!-- Example -->\n  <ScalarCodeBlock\n    v-if=\"prettyPrintedContent !== undefined && !shouldVirtualize\"\n    class=\"bg-b-2\"\n    lang=\"json\"\n    :prettyPrintedContent=\"prettyPrintedContent\" />\n\n  <ScalarVirtualCodeBlock\n    v-else-if=\"prettyPrintedContent !== undefined && shouldVirtualize\"\n    class=\"bg-b-2\"\n    :content=\"prettyPrintedContent\"\n    lang=\"json\" />\n\n  <div\n    v-else\n    class=\"empty-state\">\n    {{ translate('response.noBody') }}\n  </div>\n</template>\n\n<style scoped>\n.empty-state {\n  margin: 10px 0 10px 12px;\n  text-align: center;\n  font-size: var(--scalar-mini);\n  min-height: 56px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--scalar-radius-lg);\n  color: var(--scalar-color-2);\n}\n\n.rule-title {\n  font-family: var(--scalar-font-code);\n  color: var(--scalar-color-1);\n  display: inline-block;\n  margin: 12px 0 6px;\n  border-radius: var(--scalar-radius);\n}\n\n.rule {\n  margin: 0 12px 0;\n  border-radius: var(--scalar-radius-lg);\n}\n\n.rule-items {\n  counter-reset: list-number;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  border-left: 1px solid var(--scalar-border-color);\n  padding: 12px 0 12px;\n}\n.rule-item {\n  counter-increment: list-number;\n  border: 1px solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg);\n  overflow: hidden;\n  margin-left: 24px;\n}\n.rule-item:before {\n  /* content: counter(list-number); */\n  border: 1px solid var(--scalar-border-color);\n  border-top: 0;\n  border-right: 0;\n  content: ' ';\n  display: block;\n  width: 24px;\n  height: 6px;\n  border-radius: 0 0 0 var(--scalar-radius-lg);\n  margin-top: 6px;\n  color: var(--scalar-color-2);\n  transform: translateX(-25px);\n  color: var(--scalar-color-1);\n  position: absolute;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;AAkDA,IAAM,2BAA2B;;;;;;;;EA/BjC,MAAM,EAAE,cAAc,iBAAgB;;EAGtC,MAAM,mBAAmB;AACvB,OAAI,QAAA,YAAY,KAAA,EACd,QAAO,mBAAmB,QAAA,QAAQ,EAAE,SAAS;AAG/C,OAAI,QAAA,UAAU,OACZ,QAAO,qBAEL,mBAAmB,QAAA,SAAS,OAAO,EACnC;IACE,aAAa;IACb,MAAM;IACP,CACH;;;EAOJ,MAAM,uBAAuB,eAAe;GAC1C,MAAM,UAAU,YAAW;AAC3B,OAAI,YAAY,KAAA,EACd;AAEF,UAAO,gBAAgB,QAAO;IAC/B;EAKD,MAAM,mBAAmB,eAAe;AACtC,OAAI,qBAAqB,UAAU,KAAA,EACjC,QAAO;AAET,UAAO,qBAAqB,MAAM,SAAS;IAC5C;;UAKS,qBAAA,UAAyB,KAAA,KAAS,CAAK,iBAAA,SAAA,WAAA,EAD/C,YAIiD,MAAA,gBAAA,EAAA;;IAF/C,OAAM;IACN,MAAK;IACJ,sBAAsB,qBAAA;4CAGZ,qBAAA,UAAyB,KAAA,KAAa,iBAAA,SAAA,WAAA,EADnD,YAIgB,MAAA,uBAAA,EAAA;;IAFd,OAAM;IACL,SAAS,qBAAA;IACV,MAAK;6CAEP,mBAIM,OAJN,YAIM,gBADD,MAAA,UAAS,CAAA,kBAAA,CAAA,EAAA,EAAA"}

package/dist/features/example-responses/ExampleResponses.vue.d.ts

@@ -1,9 +1,18 @@
+import type { WorkspaceEventBus } from '@scalar/workspace-store/events';
 import type { ResponsesObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
 /**
  * TODO: copyToClipboard isn't using the right content if there are multiple examples
  */
 type __VLS_Props = {
     responses: ResponsesObject;
+    /**
+     * The document-wide selected example key. Honored only when the current response defines an
+     * example with the same key, so response example pickers stay in sync between operations without
+     * blanking out responses that do not share that key.
+     */
+    selectedExample?: string;
+    /** Event bus, used to broadcast the selected example so other operations can follow */
+    eventBus?: WorkspaceEventBus;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/features/example-responses/ExampleResponses.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleResponses.vue.d.ts","sourceRoot":"","sources":["../../../src/features/example-responses/ExampleResponses.vue"],"names":[],"mappings":"AAmWA,OAAO,KAAK,EAEV,eAAe,EAChB,MAAM,8DAA8D,CAAA;AAYrE;;GAEG;AAEH,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,eAAe,CAAA;CAC3B,CAAC;AA4WF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ExampleResponses.vue.d.ts","sourceRoot":"","sources":["../../../src/features/example-responses/ExampleResponses.vue"],"names":[],"mappings":"AA2YA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAGvE,OAAO,KAAK,EAEV,eAAe,EAChB,MAAM,8DAA8D,CAAA;AAarE;;GAEG;AAEH,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,eAAe,CAAA;IAC1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CAC7B,CAAC;AAuZF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/example-responses/ExampleResponses.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import ExampleResponses_vue_vue_type_script_setup_true_lang_default from "./ExampleResponses.vue.script.js";
 /* empty css                               */
 //#region src/features/example-responses/ExampleResponses.vue
-var ExampleResponses_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ExampleResponses_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b3a2a96e"]]);
+var ExampleResponses_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ExampleResponses_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5123cd9f"]]);
 //#endregion
 export { ExampleResponses_default as default };
 

package/dist/features/example-responses/ExampleResponses.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleResponses.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponses.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ExamplePicker } from '@scalar/api-client/blocks/operation-code-sample'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { objectKeys } from '@scalar/helpers/object/object-keys'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { getExample } from '@scalar/workspace-store/request-example'\nimport type {\n  MediaTypeObject,\n  ResponsesObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, toValue, useId, watch } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport ExampleSchema from '@/features/example-responses/ExampleSchema.vue'\n\nimport ExampleResponse from './ExampleResponse.vue'\nimport ExampleResponseTab from './ExampleResponseTab.vue'\nimport ExampleResponseTabList from './ExampleResponseTabList.vue'\nimport { hasResponseContent } from './helpers/has-response-content'\nimport { normalizeMimeTypeObject } from './helpers/normalize-mime-type-object'\n\n/**\n * TODO: copyToClipboard isn't using the right content if there are multiple examples\n */\n\nconst { responses } = defineProps<{\n  responses: ResponsesObject\n}>()\n\nconst id = useId()\nconst { copyToClipboard } = useClipboard()\n\n// Bring the status codes in the right order.\nconst orderedStatusCodes = computed<string[]>(() =>\n  Object.keys(responses ?? {}).sort(),\n)\n\n// Filter to only valid response keys that should render in the example responses panel\nconst statusCodesWithContent = computed<string[]>(() =>\n  orderedStatusCodes.value.filter((statusCode) =>\n    hasResponseContent(getResolvedRef(responses?.[statusCode]), statusCode),\n  ),\n)\n\n// Keep track of the current selected tab\nconst selectedResponseIndex = ref<number>(0)\n\n/**\n * Clamp the selected index when the filtered list shrinks.\n * Without this, the index can become out of bounds and cause a mismatch\n * between the visible tabs and the displayed content.\n *\n * We also reset `selectedExampleKey` to match the behavior of `changeTab`,\n * since the new response may not have the same example keys.\n */\nwatch(statusCodesWithContent, (codes) => {\n  if (codes.length === 0) {\n    selectedResponseIndex.value = 0\n    selectedExampleKey.value = ''\n  } else if (selectedResponseIndex.value >= codes.length) {\n    selectedResponseIndex.value = codes.length - 1\n    selectedExampleKey.value = ''\n  }\n})\n\n// Return the whole response object\nconst currentResponse = computed(() => {\n  const currentStatusCode =\n    toValue(statusCodesWithContent)[toValue(selectedResponseIndex)] ?? ''\n\n  return getResolvedRef(responses?.[currentStatusCode])\n})\n\nconst currentResponseContent = computed<MediaTypeObject | undefined>(() => {\n  const normalizedContent = normalizeMimeTypeObject(\n    currentResponse.value?.content,\n  )\n\n  /** All the keys of the normalized content */\n  const keys = objectKeys(normalizedContent ?? {})\n  return normalizedContent?.[keys[0] ?? '']\n})\n\nconst hasMultipleExamples = computed<boolean>(\n  () =>\n    !!currentResponseContent.value?.examples &&\n    Object.keys(currentResponseContent.value?.examples ?? {}).length > 1,\n)\n\nconst selectedExampleKey = ref<string>(\n  Object.keys(currentResponseContent.value?.examples ?? {})[0] ?? '',\n)\n\n/** Get the current example to display */\nconst currentExample = computed(() => {\n  if (!currentResponseContent.value) {\n    return undefined\n  }\n\n  // When multiple examples exist and one is selected, we access it directly\n  if (hasMultipleExamples.value && selectedExampleKey.value) {\n    return currentResponseContent.value.examples?.[selectedExampleKey.value]\n  }\n\n  // Otherwise, we use getExample with an undefined exampleKey to handle fallbacks\n  return getExample(currentResponseContent.value, undefined, undefined)\n})\n\nconst changeTab = (index: number) => {\n  selectedResponseIndex.value = index\n  selectedExampleKey.value = ''\n}\n\nconst showSchema = ref(false)\n</script>\n<template>\n  <ScalarCard\n    v-if=\"statusCodesWithContent.length\"\n    aria-label=\"Example Responses\"\n    class=\"response-card\"\n    role=\"region\">\n    <ExampleResponseTabList @change=\"changeTab\">\n      <ExampleResponseTab\n        v-for=\"statusCode in statusCodesWithContent\"\n        :key=\"statusCode\"\n        :aria-controls=\"id\">\n        <ScreenReader>Status:</ScreenReader>\n        {{ statusCode }}\n      </ExampleResponseTab>\n\n      <template #actions>\n        <button\n          v-if=\"currentResponseContent?.example\"\n          class=\"code-copy\"\n          type=\"button\"\n          @click=\"() => copyToClipboard(currentResponseContent?.example)\">\n          <ScalarIcon\n            icon=\"Clipboard\"\n            width=\"12px\" />\n        </button>\n        <label\n          v-if=\"currentResponseContent?.schema\"\n          class=\"scalar-card-checkbox\">\n          Show Schema\n          <input\n            v-model=\"showSchema\"\n            :aria-controls=\"id\"\n            class=\"scalar-card-checkbox-input\"\n            type=\"checkbox\" />\n          <span class=\"scalar-card-checkbox-checkmark\" />\n        </label>\n      </template>\n    </ExampleResponseTabList>\n    <ScalarCardSection class=\"grid flex-1\">\n      <!-- Schema -->\n      <ExampleSchema\n        v-if=\"currentResponseContent?.schema && showSchema\"\n        :id=\"id\"\n        :schema=\"currentResponseContent?.schema\" />\n\n      <!-- Example -->\n      <ExampleResponse\n        v-else\n        :id=\"id\"\n        :example=\"currentExample\"\n        :response=\"currentResponseContent\" />\n    </ScalarCardSection>\n    <ScalarCardFooter\n      v-if=\"currentResponse?.description || hasMultipleExamples\"\n      class=\"response-card-footer\">\n      <ExamplePicker\n        v-if=\"hasMultipleExamples\"\n        v-model=\"selectedExampleKey\"\n        class=\"response-example-selector px-0\"\n        :examples=\"currentResponseContent?.examples\" />\n      <div class=\"response-description\">\n        <ScalarMarkdown\n          v-if=\"currentResponse?.description\"\n          class=\"response-description-markdown\"\n          :value=\"currentResponse.description\" />\n      </div>\n    </ScalarCardFooter>\n  </ScalarCard>\n</template>\n\n<style scoped>\n.response-card {\n  font-size: var(--scalar-font-size-3);\n}\n\n.code-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  outline: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--scalar-color-3);\n  border: none;\n  padding: 0;\n  margin-right: 12px;\n}\n.code-copy:hover {\n  color: var(--scalar-color-1);\n}\n.code-copy svg {\n  width: 13px;\n  height: 13px;\n}\n.response-card-footer {\n  display: flex;\n  flex-direction: row-reverse;\n  flex-wrap: wrap;\n  justify-content: start;\n  flex-shrink: 0;\n  padding: 7px 12px;\n  column-gap: 8px;\n}\n.response-example-selector {\n  flex-shrink: 0;\n  margin: -4px;\n}\n.response-description {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-small);\n  color: var(--scalar-color--1);\n\n  box-sizing: border-box;\n\n  flex-grow: 1;\n}\n.response-description-markdown {\n  max-height: 3lh;\n}\n\n.response-description-markdown :deep(*) {\n  margin: 0;\n}\n.schema-type {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n  background: var(--scalar-background-3);\n  padding: 2px 4px;\n  border-radius: 4px;\n  margin-right: 4px;\n}\n.schema-example {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n}\n\n.example-response-tab {\n  display: block;\n  margin: 6px;\n}\n\n.scalar-card-checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  min-height: 17px;\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-normal);\n  color: var(--scalar-color-2);\n  width: fit-content;\n  white-space: nowrap;\n  gap: 6px;\n  padding: 7px 6px;\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:focus-visible)\n  .scalar-card-checkbox-checkmark {\n  outline: 1px solid var(--scalar-color-accent);\n}\n.scalar-card-checkbox:hover {\n  color: var(--scalar-color--1);\n}\n.scalar-card-checkbox .scalar-card-checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n.scalar-card-checkbox-checkmark {\n  height: 16px;\n  width: 16px;\n  border-radius: var(--scalar-radius);\n  background-color: transparent;\n  background-color: var(--scalar-background-3);\n  box-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:checked) {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark {\n  background-color: var(--scalar-button-1);\n  box-shadow: none;\n}\n\n.scalar-card-checkbox-checkmark:after {\n  content: '';\n  position: absolute;\n  display: none;\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark:after {\n  display: block;\n}\n\n.scalar-card-checkbox .scalar-card-checkbox-checkmark:after {\n  right: 11.5px;\n  top: 12.5px;\n  width: 5px;\n  height: 9px;\n  border: solid 1px var(--scalar-button-1-color);\n  border-width: 0 1.5px 1.5px 0;\n  transform: rotate(45deg);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ExampleResponses.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponses.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ExamplePicker } from '@scalar/blocks/code-example'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { objectKeys } from '@scalar/helpers/object/object-keys'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { getExample } from '@scalar/workspace-store/request-example'\nimport type {\n  MediaTypeObject,\n  ResponsesObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, toValue, useId, watch } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport ExampleSchema from '@/features/example-responses/ExampleSchema.vue'\nimport { useLocalization } from '@/features/localization'\n\nimport ExampleResponse from './ExampleResponse.vue'\nimport ExampleResponseTab from './ExampleResponseTab.vue'\nimport ExampleResponseTabList from './ExampleResponseTabList.vue'\nimport { hasResponseContent } from './helpers/has-response-content'\nimport { normalizeMimeTypeObject } from './helpers/normalize-mime-type-object'\n\n/**\n * TODO: copyToClipboard isn't using the right content if there are multiple examples\n */\n\nconst { responses, selectedExample, eventBus } = defineProps<{\n  responses: ResponsesObject\n  /**\n   * The document-wide selected example key. Honored only when the current response defines an\n   * example with the same key, so response example pickers stay in sync between operations without\n   * blanking out responses that do not share that key.\n   */\n  selectedExample?: string\n  /** Event bus, used to broadcast the selected example so other operations can follow */\n  eventBus?: WorkspaceEventBus\n}>()\nconst { translate } = useLocalization()\n\nconst id = useId()\nconst { copyToClipboard } = useClipboard()\n\n// Bring the status codes in the right order.\nconst orderedStatusCodes = computed<string[]>(() =>\n  Object.keys(responses ?? {}).sort(),\n)\n\n// Filter to only valid response keys that should render in the example responses panel\nconst statusCodesWithContent = computed<string[]>(() =>\n  orderedStatusCodes.value.filter((statusCode) =>\n    hasResponseContent(getResolvedRef(responses?.[statusCode]), statusCode),\n  ),\n)\n\n// Keep track of the current selected tab\nconst selectedResponseIndex = ref<number>(0)\n\n/**\n * Clamp the selected index when the filtered list shrinks.\n * Without this, the index can become out of bounds and cause a mismatch\n * between the visible tabs and the displayed content.\n *\n * We re-resolve `selectedExampleKey` the same way `changeTab` does, so the picker keeps the\n * document-wide selection when the newly active response defines it instead of being blanked out.\n */\nwatch(statusCodesWithContent, (codes) => {\n  if (codes.length === 0) {\n    selectedResponseIndex.value = 0\n  } else if (selectedResponseIndex.value >= codes.length) {\n    selectedResponseIndex.value = codes.length - 1\n  } else {\n    return\n  }\n  selectedExampleKey.value = resolveExampleKey(selectedExample)\n})\n\n// Return the whole response object\nconst currentResponse = computed(() => {\n  const currentStatusCode =\n    toValue(statusCodesWithContent)[toValue(selectedResponseIndex)] ?? ''\n\n  return getResolvedRef(responses?.[currentStatusCode])\n})\n\nconst currentResponseContent = computed<MediaTypeObject | undefined>(() => {\n  const normalizedContent = normalizeMimeTypeObject(\n    currentResponse.value?.content,\n  )\n\n  /** All the keys of the normalized content */\n  const keys = objectKeys(normalizedContent ?? {})\n  return normalizedContent?.[keys[0] ?? '']\n})\n\nconst hasMultipleExamples = computed<boolean>(\n  () =>\n    !!currentResponseContent.value?.examples &&\n    Object.keys(currentResponseContent.value?.examples ?? {}).length > 1,\n)\n\nconst selectedExampleKey = ref<string>('')\n\n/** Resolve the example key to show, preferring the document-wide selection when this response has it */\nconst resolveExampleKey = (preferred: string | undefined): string => {\n  const keys = Object.keys(currentResponseContent.value?.examples ?? {})\n  if (preferred && keys.includes(preferred)) {\n    return preferred\n  }\n  // Keep the current example when it is still valid, otherwise fall back to the first one\n  if (selectedExampleKey.value && keys.includes(selectedExampleKey.value)) {\n    return selectedExampleKey.value\n  }\n  return keys[0] ?? ''\n}\n\n// Initialize from the document-wide selection, falling back to the first example\nselectedExampleKey.value = resolveExampleKey(selectedExample)\n\n// Follow the document-wide selection when it changes and this response has that example\nwatch(\n  () => selectedExample,\n  (preferred) => {\n    selectedExampleKey.value = resolveExampleKey(preferred)\n  },\n)\n\n/** Select an example and sync the choice across the document so other operations follow */\nconst selectExample = (key: string) => {\n  selectedExampleKey.value = key\n  eventBus?.emit('workspace:update:selected-example', key)\n}\n\n/** Get the current example to display */\nconst currentExample = computed(() => {\n  if (!currentResponseContent.value) {\n    return undefined\n  }\n\n  // When multiple examples exist and one is selected, we access it directly\n  if (hasMultipleExamples.value && selectedExampleKey.value) {\n    return currentResponseContent.value.examples?.[selectedExampleKey.value]\n  }\n\n  // Otherwise, we use getExample with an undefined exampleKey to handle fallbacks\n  return getExample(currentResponseContent.value, undefined, undefined)\n})\n\nconst changeTab = (index: number) => {\n  selectedResponseIndex.value = index\n  // Re-apply the document-wide selection for the newly selected response, falling back to its first example\n  selectedExampleKey.value = resolveExampleKey(selectedExample)\n}\n\nconst showSchema = ref(false)\n</script>\n<template>\n  <ScalarCard\n    v-if=\"statusCodesWithContent.length\"\n    :aria-label=\"translate('response.exampleResponses')\"\n    class=\"response-card\"\n    role=\"region\">\n    <ExampleResponseTabList @change=\"changeTab\">\n      <ExampleResponseTab\n        v-for=\"statusCode in statusCodesWithContent\"\n        :key=\"statusCode\"\n        :aria-controls=\"id\">\n        <ScreenReader>{{ translate('response.status') }}:</ScreenReader>\n        {{ statusCode }}\n      </ExampleResponseTab>\n\n      <template #actions>\n        <button\n          v-if=\"currentResponseContent?.example\"\n          class=\"code-copy\"\n          type=\"button\"\n          @click=\"() => copyToClipboard(currentResponseContent?.example)\">\n          <ScalarIcon\n            icon=\"Clipboard\"\n            width=\"12px\" />\n        </button>\n        <label\n          v-if=\"currentResponseContent?.schema\"\n          class=\"scalar-card-checkbox\">\n          {{ translate('response.showSchema') }}\n          <input\n            v-model=\"showSchema\"\n            :aria-controls=\"id\"\n            class=\"scalar-card-checkbox-input\"\n            type=\"checkbox\" />\n          <span class=\"scalar-card-checkbox-checkmark\" />\n        </label>\n      </template>\n    </ExampleResponseTabList>\n    <ScalarCardSection class=\"grid flex-1\">\n      <!-- Schema -->\n      <ExampleSchema\n        v-if=\"currentResponseContent?.schema && showSchema\"\n        :id=\"id\"\n        :schema=\"currentResponseContent?.schema\" />\n\n      <!-- Example -->\n      <ExampleResponse\n        v-else\n        :id=\"id\"\n        :example=\"currentExample\"\n        :response=\"currentResponseContent\" />\n    </ScalarCardSection>\n    <ScalarCardFooter\n      v-if=\"currentResponse?.description || hasMultipleExamples\"\n      class=\"response-card-footer\">\n      <ExamplePicker\n        v-if=\"hasMultipleExamples\"\n        class=\"response-example-selector px-0\"\n        :examples=\"currentResponseContent?.examples\"\n        :modelValue=\"selectedExampleKey\"\n        @update:modelValue=\"selectExample\" />\n      <div class=\"response-description\">\n        <ScalarMarkdown\n          v-if=\"currentResponse?.description\"\n          class=\"response-description-markdown\"\n          :value=\"currentResponse.description\" />\n      </div>\n    </ScalarCardFooter>\n  </ScalarCard>\n</template>\n\n<style scoped>\n.response-card {\n  font-size: var(--scalar-font-size-3);\n}\n\n.code-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  outline: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--scalar-color-3);\n  border: none;\n  padding: 0;\n  margin-right: 12px;\n}\n.code-copy:hover {\n  color: var(--scalar-color-1);\n}\n.code-copy svg {\n  width: 13px;\n  height: 13px;\n}\n.response-card-footer {\n  display: flex;\n  flex-direction: row-reverse;\n  flex-wrap: wrap;\n  justify-content: start;\n  flex-shrink: 0;\n  padding: 7px 12px;\n  column-gap: 8px;\n}\n.response-example-selector {\n  flex-shrink: 0;\n  margin: -4px;\n}\n.response-description {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-small);\n  color: var(--scalar-color--1);\n\n  box-sizing: border-box;\n\n  flex-grow: 1;\n}\n.response-description-markdown {\n  max-height: 3lh;\n}\n\n.response-description-markdown :deep(*) {\n  margin: 0;\n}\n.schema-type {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n  background: var(--scalar-background-3);\n  padding: 2px 4px;\n  border-radius: 4px;\n  margin-right: 4px;\n}\n.schema-example {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n}\n\n.example-response-tab {\n  display: block;\n  margin: 6px;\n}\n\n.scalar-card-checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  min-height: 17px;\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-normal);\n  color: var(--scalar-color-2);\n  width: fit-content;\n  white-space: nowrap;\n  gap: 6px;\n  padding: 7px 6px;\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:focus-visible)\n  .scalar-card-checkbox-checkmark {\n  outline: 1px solid var(--scalar-color-accent);\n}\n.scalar-card-checkbox:hover {\n  color: var(--scalar-color--1);\n}\n.scalar-card-checkbox .scalar-card-checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n.scalar-card-checkbox-checkmark {\n  height: 16px;\n  width: 16px;\n  border-radius: var(--scalar-radius);\n  background-color: transparent;\n  background-color: var(--scalar-background-3);\n  box-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:checked) {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark {\n  background-color: var(--scalar-button-1);\n  box-shadow: none;\n}\n\n.scalar-card-checkbox-checkmark:after {\n  content: '';\n  position: absolute;\n  display: none;\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark:after {\n  display: block;\n}\n\n.scalar-card-checkbox .scalar-card-checkbox-checkmark:after {\n  right: 11.5px;\n  top: 12.5px;\n  width: 5px;\n  height: 9px;\n  border: solid 1px var(--scalar-button-1-color);\n  border-width: 0 1.5px 1.5px 0;\n  transform: rotate(45deg);\n}\n</style>\n"],"mappings":""}

package/dist/features/example-responses/ExampleResponses.vue.script.js

@@ -1,3 +1,4 @@
+import { useLocalization } from "../localization/use-localization.js";
 import ScreenReader_default from "../../components/ScreenReader.vue.js";
 import ExampleSchema_default from "./ExampleSchema.vue.js";
 import ExampleResponse_default from "./ExampleResponse.vue.js";
@@ -8,9 +9,9 @@ import { hasResponseContent } from "./helpers/has-response-content.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, toDisplayString, toValue, unref, useId, vModelCheckbox, watch, withCtx, withDirectives } from "vue";
 import { useClipboard } from "@scalar/use-hooks/useClipboard";
 import { getExample } from "@scalar/workspace-store/request-example";
-import { ExamplePicker } from "@scalar/api-client/blocks/operation-code-sample";
-import { ScalarMarkdown } from "@scalar/components/markdown";
 import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+import { ExamplePicker } from "@scalar/blocks/code-example";
+import { ScalarMarkdown } from "@scalar/components/markdown";
 import { ScalarIcon } from "@scalar/components/icon";
 import { objectKeys } from "@scalar/helpers/object/object-keys";
 import { ScalarCard, ScalarCardFooter, ScalarCardSection } from "@scalar/components/card";
@@ -26,8 +27,13 @@ var _hoisted_3 = { class: "response-description" };
 */
 var ExampleResponses_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ExampleResponses",
-	props: { responses: {} },
+	props: {
+		responses: {},
+		selectedExample: {},
+		eventBus: {}
+	},
 	setup(__props) {
+		const { translate } = useLocalization();
 		const id = useId();
 		const { copyToClipboard } = useClipboard();
 		const orderedStatusCodes = computed(() => Object.keys(__props.responses ?? {}).sort());
@@ -38,17 +44,14 @@ var ExampleResponses_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		* Without this, the index can become out of bounds and cause a mismatch
 		* between the visible tabs and the displayed content.
 		*
-		* We also reset `selectedExampleKey` to match the behavior of `changeTab`,
-		* since the new response may not have the same example keys.
+		* We re-resolve `selectedExampleKey` the same way `changeTab` does, so the picker keeps the
+		* document-wide selection when the newly active response defines it instead of being blanked out.
 		*/
 		watch(statusCodesWithContent, (codes) => {
-			if (codes.length === 0) {
-				selectedResponseIndex.value = 0;
-				selectedExampleKey.value = "";
-			} else if (selectedResponseIndex.value >= codes.length) {
-				selectedResponseIndex.value = codes.length - 1;
-				selectedExampleKey.value = "";
-			}
+			if (codes.length === 0) selectedResponseIndex.value = 0;
+			else if (selectedResponseIndex.value >= codes.length) selectedResponseIndex.value = codes.length - 1;
+			else return;
+			selectedExampleKey.value = resolveExampleKey(__props.selectedExample);
 		});
 		const currentResponse = computed(() => {
 			const currentStatusCode = toValue(statusCodesWithContent)[toValue(selectedResponseIndex)] ?? "";
@@ -61,7 +64,23 @@ var ExampleResponses_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			return normalizedContent?.[keys[0] ?? ""];
 		});
 		const hasMultipleExamples = computed(() => !!currentResponseContent.value?.examples && Object.keys(currentResponseContent.value?.examples ?? {}).length > 1);
-		const selectedExampleKey = ref(Object.keys(currentResponseContent.value?.examples ?? {})[0] ?? "");
+		const selectedExampleKey = ref("");
+		/** Resolve the example key to show, preferring the document-wide selection when this response has it */
+		const resolveExampleKey = (preferred) => {
+			const keys = Object.keys(currentResponseContent.value?.examples ?? {});
+			if (preferred && keys.includes(preferred)) return preferred;
+			if (selectedExampleKey.value && keys.includes(selectedExampleKey.value)) return selectedExampleKey.value;
+			return keys[0] ?? "";
+		};
+		selectedExampleKey.value = resolveExampleKey(__props.selectedExample);
+		watch(() => __props.selectedExample, (preferred) => {
+			selectedExampleKey.value = resolveExampleKey(preferred);
+		});
+		/** Select an example and sync the choice across the document so other operations follow */
+		const selectExample = (key) => {
+			selectedExampleKey.value = key;
+			__props.eventBus?.emit("workspace:update:selected-example", key);
+		};
 		/** Get the current example to display */
 		const currentExample = computed(() => {
 			if (!currentResponseContent.value) return;
@@ -70,13 +89,13 @@ var ExampleResponses_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		});
 		const changeTab = (index) => {
 			selectedResponseIndex.value = index;
-			selectedExampleKey.value = "";
+			selectedExampleKey.value = resolveExampleKey(__props.selectedExample);
 		};
 		const showSchema = ref(false);
 		return (_ctx, _cache) => {
 			return statusCodesWithContent.value.length ? (openBlock(), createBlock(unref(ScalarCard), {
 				key: 0,
-				"aria-label": "Example Responses",
+				"aria-label": unref(translate)("response.exampleResponses"),
 				class: "response-card",
 				role: "region"
 			}, {
@@ -91,14 +110,14 @@ var ExampleResponses_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 							icon: "Clipboard",
 							width: "12px"
 						})])) : createCommentVNode("", true), currentResponseContent.value?.schema ? (openBlock(), createElementBlock("label", _hoisted_1, [
-							_cache[4] || (_cache[4] = createTextVNode(" Show Schema ", -1)),
+							createTextVNode(toDisplayString(unref(translate)("response.showSchema")) + " ", 1),
 							withDirectives(createElementVNode("input", {
 								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showSchema.value = $event),
 								"aria-controls": unref(id),
 								class: "scalar-card-checkbox-input",
 								type: "checkbox"
 							}, null, 8, _hoisted_2), [[vModelCheckbox, showSchema.value]]),
-							_cache[5] || (_cache[5] = createElementVNode("span", { class: "scalar-card-checkbox-checkmark" }, null, -1))
+							_cache[2] || (_cache[2] = createElementVNode("span", { class: "scalar-card-checkbox-checkmark" }, null, -1))
 						])) : createCommentVNode("", true)]),
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(statusCodesWithContent.value, (statusCode) => {
 							return openBlock(), createBlock(ExampleResponseTab_default, {
@@ -106,7 +125,7 @@ var ExampleResponses_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 								"aria-controls": unref(id)
 							}, {
 								default: withCtx(() => [createVNode(ScreenReader_default, null, {
-									default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Status:", -1)])]),
+									default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("response.status")) + ":", 1)]),
 									_: 1
 								}), createTextVNode(" " + toDisplayString(statusCode), 1)]),
 								_: 2
@@ -137,11 +156,11 @@ var ExampleResponses_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					}, {
 						default: withCtx(() => [hasMultipleExamples.value ? (openBlock(), createBlock(unref(ExamplePicker), {
 							key: 0,
-							modelValue: selectedExampleKey.value,
-							"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedExampleKey.value = $event),
 							class: "response-example-selector px-0",
-							examples: currentResponseContent.value?.examples
-						}, null, 8, ["modelValue", "examples"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [currentResponse.value?.description ? (openBlock(), createBlock(unref(ScalarMarkdown), {
+							examples: currentResponseContent.value?.examples,
+							modelValue: selectedExampleKey.value,
+							"onUpdate:modelValue": selectExample
+						}, null, 8, ["examples", "modelValue"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [currentResponse.value?.description ? (openBlock(), createBlock(unref(ScalarMarkdown), {
 							key: 0,
 							class: "response-description-markdown",
 							value: currentResponse.value.description
@@ -150,7 +169,7 @@ var ExampleResponses_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					})) : createCommentVNode("", true)
 				]),
 				_: 1
-			})) : createCommentVNode("", true);
+			}, 8, ["aria-label"])) : createCommentVNode("", true);
 		};
 	}
 });

package/dist/features/example-responses/ExampleResponses.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleResponses.vue.script.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponses.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ExamplePicker } from '@scalar/api-client/blocks/operation-code-sample'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { objectKeys } from '@scalar/helpers/object/object-keys'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { getExample } from '@scalar/workspace-store/request-example'\nimport type {\n  MediaTypeObject,\n  ResponsesObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, toValue, useId, watch } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport ExampleSchema from '@/features/example-responses/ExampleSchema.vue'\n\nimport ExampleResponse from './ExampleResponse.vue'\nimport ExampleResponseTab from './ExampleResponseTab.vue'\nimport ExampleResponseTabList from './ExampleResponseTabList.vue'\nimport { hasResponseContent } from './helpers/has-response-content'\nimport { normalizeMimeTypeObject } from './helpers/normalize-mime-type-object'\n\n/**\n * TODO: copyToClipboard isn't using the right content if there are multiple examples\n */\n\nconst { responses } = defineProps<{\n  responses: ResponsesObject\n}>()\n\nconst id = useId()\nconst { copyToClipboard } = useClipboard()\n\n// Bring the status codes in the right order.\nconst orderedStatusCodes = computed<string[]>(() =>\n  Object.keys(responses ?? {}).sort(),\n)\n\n// Filter to only valid response keys that should render in the example responses panel\nconst statusCodesWithContent = computed<string[]>(() =>\n  orderedStatusCodes.value.filter((statusCode) =>\n    hasResponseContent(getResolvedRef(responses?.[statusCode]), statusCode),\n  ),\n)\n\n// Keep track of the current selected tab\nconst selectedResponseIndex = ref<number>(0)\n\n/**\n * Clamp the selected index when the filtered list shrinks.\n * Without this, the index can become out of bounds and cause a mismatch\n * between the visible tabs and the displayed content.\n *\n * We also reset `selectedExampleKey` to match the behavior of `changeTab`,\n * since the new response may not have the same example keys.\n */\nwatch(statusCodesWithContent, (codes) => {\n  if (codes.length === 0) {\n    selectedResponseIndex.value = 0\n    selectedExampleKey.value = ''\n  } else if (selectedResponseIndex.value >= codes.length) {\n    selectedResponseIndex.value = codes.length - 1\n    selectedExampleKey.value = ''\n  }\n})\n\n// Return the whole response object\nconst currentResponse = computed(() => {\n  const currentStatusCode =\n    toValue(statusCodesWithContent)[toValue(selectedResponseIndex)] ?? ''\n\n  return getResolvedRef(responses?.[currentStatusCode])\n})\n\nconst currentResponseContent = computed<MediaTypeObject | undefined>(() => {\n  const normalizedContent = normalizeMimeTypeObject(\n    currentResponse.value?.content,\n  )\n\n  /** All the keys of the normalized content */\n  const keys = objectKeys(normalizedContent ?? {})\n  return normalizedContent?.[keys[0] ?? '']\n})\n\nconst hasMultipleExamples = computed<boolean>(\n  () =>\n    !!currentResponseContent.value?.examples &&\n    Object.keys(currentResponseContent.value?.examples ?? {}).length > 1,\n)\n\nconst selectedExampleKey = ref<string>(\n  Object.keys(currentResponseContent.value?.examples ?? {})[0] ?? '',\n)\n\n/** Get the current example to display */\nconst currentExample = computed(() => {\n  if (!currentResponseContent.value) {\n    return undefined\n  }\n\n  // When multiple examples exist and one is selected, we access it directly\n  if (hasMultipleExamples.value && selectedExampleKey.value) {\n    return currentResponseContent.value.examples?.[selectedExampleKey.value]\n  }\n\n  // Otherwise, we use getExample with an undefined exampleKey to handle fallbacks\n  return getExample(currentResponseContent.value, undefined, undefined)\n})\n\nconst changeTab = (index: number) => {\n  selectedResponseIndex.value = index\n  selectedExampleKey.value = ''\n}\n\nconst showSchema = ref(false)\n</script>\n<template>\n  <ScalarCard\n    v-if=\"statusCodesWithContent.length\"\n    aria-label=\"Example Responses\"\n    class=\"response-card\"\n    role=\"region\">\n    <ExampleResponseTabList @change=\"changeTab\">\n      <ExampleResponseTab\n        v-for=\"statusCode in statusCodesWithContent\"\n        :key=\"statusCode\"\n        :aria-controls=\"id\">\n        <ScreenReader>Status:</ScreenReader>\n        {{ statusCode }}\n      </ExampleResponseTab>\n\n      <template #actions>\n        <button\n          v-if=\"currentResponseContent?.example\"\n          class=\"code-copy\"\n          type=\"button\"\n          @click=\"() => copyToClipboard(currentResponseContent?.example)\">\n          <ScalarIcon\n            icon=\"Clipboard\"\n            width=\"12px\" />\n        </button>\n        <label\n          v-if=\"currentResponseContent?.schema\"\n          class=\"scalar-card-checkbox\">\n          Show Schema\n          <input\n            v-model=\"showSchema\"\n            :aria-controls=\"id\"\n            class=\"scalar-card-checkbox-input\"\n            type=\"checkbox\" />\n          <span class=\"scalar-card-checkbox-checkmark\" />\n        </label>\n      </template>\n    </ExampleResponseTabList>\n    <ScalarCardSection class=\"grid flex-1\">\n      <!-- Schema -->\n      <ExampleSchema\n        v-if=\"currentResponseContent?.schema && showSchema\"\n        :id=\"id\"\n        :schema=\"currentResponseContent?.schema\" />\n\n      <!-- Example -->\n      <ExampleResponse\n        v-else\n        :id=\"id\"\n        :example=\"currentExample\"\n        :response=\"currentResponseContent\" />\n    </ScalarCardSection>\n    <ScalarCardFooter\n      v-if=\"currentResponse?.description || hasMultipleExamples\"\n      class=\"response-card-footer\">\n      <ExamplePicker\n        v-if=\"hasMultipleExamples\"\n        v-model=\"selectedExampleKey\"\n        class=\"response-example-selector px-0\"\n        :examples=\"currentResponseContent?.examples\" />\n      <div class=\"response-description\">\n        <ScalarMarkdown\n          v-if=\"currentResponse?.description\"\n          class=\"response-description-markdown\"\n          :value=\"currentResponse.description\" />\n      </div>\n    </ScalarCardFooter>\n  </ScalarCard>\n</template>\n\n<style scoped>\n.response-card {\n  font-size: var(--scalar-font-size-3);\n}\n\n.code-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  outline: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--scalar-color-3);\n  border: none;\n  padding: 0;\n  margin-right: 12px;\n}\n.code-copy:hover {\n  color: var(--scalar-color-1);\n}\n.code-copy svg {\n  width: 13px;\n  height: 13px;\n}\n.response-card-footer {\n  display: flex;\n  flex-direction: row-reverse;\n  flex-wrap: wrap;\n  justify-content: start;\n  flex-shrink: 0;\n  padding: 7px 12px;\n  column-gap: 8px;\n}\n.response-example-selector {\n  flex-shrink: 0;\n  margin: -4px;\n}\n.response-description {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-small);\n  color: var(--scalar-color--1);\n\n  box-sizing: border-box;\n\n  flex-grow: 1;\n}\n.response-description-markdown {\n  max-height: 3lh;\n}\n\n.response-description-markdown :deep(*) {\n  margin: 0;\n}\n.schema-type {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n  background: var(--scalar-background-3);\n  padding: 2px 4px;\n  border-radius: 4px;\n  margin-right: 4px;\n}\n.schema-example {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n}\n\n.example-response-tab {\n  display: block;\n  margin: 6px;\n}\n\n.scalar-card-checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  min-height: 17px;\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-normal);\n  color: var(--scalar-color-2);\n  width: fit-content;\n  white-space: nowrap;\n  gap: 6px;\n  padding: 7px 6px;\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:focus-visible)\n  .scalar-card-checkbox-checkmark {\n  outline: 1px solid var(--scalar-color-accent);\n}\n.scalar-card-checkbox:hover {\n  color: var(--scalar-color--1);\n}\n.scalar-card-checkbox .scalar-card-checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n.scalar-card-checkbox-checkmark {\n  height: 16px;\n  width: 16px;\n  border-radius: var(--scalar-radius);\n  background-color: transparent;\n  background-color: var(--scalar-background-3);\n  box-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:checked) {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark {\n  background-color: var(--scalar-button-1);\n  box-shadow: none;\n}\n\n.scalar-card-checkbox-checkmark:after {\n  content: '';\n  position: absolute;\n  display: none;\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark:after {\n  display: block;\n}\n\n.scalar-card-checkbox .scalar-card-checkbox-checkmark:after {\n  right: 11.5px;\n  top: 12.5px;\n  width: 5px;\n  height: 9px;\n  border: solid 1px var(--scalar-button-1-color);\n  border-width: 0 1.5px 1.5px 0;\n  transform: rotate(45deg);\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ExampleResponses.vue.script.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponses.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ExamplePicker } from '@scalar/blocks/code-example'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { objectKeys } from '@scalar/helpers/object/object-keys'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { getExample } from '@scalar/workspace-store/request-example'\nimport type {\n  MediaTypeObject,\n  ResponsesObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, toValue, useId, watch } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport ExampleSchema from '@/features/example-responses/ExampleSchema.vue'\nimport { useLocalization } from '@/features/localization'\n\nimport ExampleResponse from './ExampleResponse.vue'\nimport ExampleResponseTab from './ExampleResponseTab.vue'\nimport ExampleResponseTabList from './ExampleResponseTabList.vue'\nimport { hasResponseContent } from './helpers/has-response-content'\nimport { normalizeMimeTypeObject } from './helpers/normalize-mime-type-object'\n\n/**\n * TODO: copyToClipboard isn't using the right content if there are multiple examples\n */\n\nconst { responses, selectedExample, eventBus } = defineProps<{\n  responses: ResponsesObject\n  /**\n   * The document-wide selected example key. Honored only when the current response defines an\n   * example with the same key, so response example pickers stay in sync between operations without\n   * blanking out responses that do not share that key.\n   */\n  selectedExample?: string\n  /** Event bus, used to broadcast the selected example so other operations can follow */\n  eventBus?: WorkspaceEventBus\n}>()\nconst { translate } = useLocalization()\n\nconst id = useId()\nconst { copyToClipboard } = useClipboard()\n\n// Bring the status codes in the right order.\nconst orderedStatusCodes = computed<string[]>(() =>\n  Object.keys(responses ?? {}).sort(),\n)\n\n// Filter to only valid response keys that should render in the example responses panel\nconst statusCodesWithContent = computed<string[]>(() =>\n  orderedStatusCodes.value.filter((statusCode) =>\n    hasResponseContent(getResolvedRef(responses?.[statusCode]), statusCode),\n  ),\n)\n\n// Keep track of the current selected tab\nconst selectedResponseIndex = ref<number>(0)\n\n/**\n * Clamp the selected index when the filtered list shrinks.\n * Without this, the index can become out of bounds and cause a mismatch\n * between the visible tabs and the displayed content.\n *\n * We re-resolve `selectedExampleKey` the same way `changeTab` does, so the picker keeps the\n * document-wide selection when the newly active response defines it instead of being blanked out.\n */\nwatch(statusCodesWithContent, (codes) => {\n  if (codes.length === 0) {\n    selectedResponseIndex.value = 0\n  } else if (selectedResponseIndex.value >= codes.length) {\n    selectedResponseIndex.value = codes.length - 1\n  } else {\n    return\n  }\n  selectedExampleKey.value = resolveExampleKey(selectedExample)\n})\n\n// Return the whole response object\nconst currentResponse = computed(() => {\n  const currentStatusCode =\n    toValue(statusCodesWithContent)[toValue(selectedResponseIndex)] ?? ''\n\n  return getResolvedRef(responses?.[currentStatusCode])\n})\n\nconst currentResponseContent = computed<MediaTypeObject | undefined>(() => {\n  const normalizedContent = normalizeMimeTypeObject(\n    currentResponse.value?.content,\n  )\n\n  /** All the keys of the normalized content */\n  const keys = objectKeys(normalizedContent ?? {})\n  return normalizedContent?.[keys[0] ?? '']\n})\n\nconst hasMultipleExamples = computed<boolean>(\n  () =>\n    !!currentResponseContent.value?.examples &&\n    Object.keys(currentResponseContent.value?.examples ?? {}).length > 1,\n)\n\nconst selectedExampleKey = ref<string>('')\n\n/** Resolve the example key to show, preferring the document-wide selection when this response has it */\nconst resolveExampleKey = (preferred: string | undefined): string => {\n  const keys = Object.keys(currentResponseContent.value?.examples ?? {})\n  if (preferred && keys.includes(preferred)) {\n    return preferred\n  }\n  // Keep the current example when it is still valid, otherwise fall back to the first one\n  if (selectedExampleKey.value && keys.includes(selectedExampleKey.value)) {\n    return selectedExampleKey.value\n  }\n  return keys[0] ?? ''\n}\n\n// Initialize from the document-wide selection, falling back to the first example\nselectedExampleKey.value = resolveExampleKey(selectedExample)\n\n// Follow the document-wide selection when it changes and this response has that example\nwatch(\n  () => selectedExample,\n  (preferred) => {\n    selectedExampleKey.value = resolveExampleKey(preferred)\n  },\n)\n\n/** Select an example and sync the choice across the document so other operations follow */\nconst selectExample = (key: string) => {\n  selectedExampleKey.value = key\n  eventBus?.emit('workspace:update:selected-example', key)\n}\n\n/** Get the current example to display */\nconst currentExample = computed(() => {\n  if (!currentResponseContent.value) {\n    return undefined\n  }\n\n  // When multiple examples exist and one is selected, we access it directly\n  if (hasMultipleExamples.value && selectedExampleKey.value) {\n    return currentResponseContent.value.examples?.[selectedExampleKey.value]\n  }\n\n  // Otherwise, we use getExample with an undefined exampleKey to handle fallbacks\n  return getExample(currentResponseContent.value, undefined, undefined)\n})\n\nconst changeTab = (index: number) => {\n  selectedResponseIndex.value = index\n  // Re-apply the document-wide selection for the newly selected response, falling back to its first example\n  selectedExampleKey.value = resolveExampleKey(selectedExample)\n}\n\nconst showSchema = ref(false)\n</script>\n<template>\n  <ScalarCard\n    v-if=\"statusCodesWithContent.length\"\n    :aria-label=\"translate('response.exampleResponses')\"\n    class=\"response-card\"\n    role=\"region\">\n    <ExampleResponseTabList @change=\"changeTab\">\n      <ExampleResponseTab\n        v-for=\"statusCode in statusCodesWithContent\"\n        :key=\"statusCode\"\n        :aria-controls=\"id\">\n        <ScreenReader>{{ translate('response.status') }}:</ScreenReader>\n        {{ statusCode }}\n      </ExampleResponseTab>\n\n      <template #actions>\n        <button\n          v-if=\"currentResponseContent?.example\"\n          class=\"code-copy\"\n          type=\"button\"\n          @click=\"() => copyToClipboard(currentResponseContent?.example)\">\n          <ScalarIcon\n            icon=\"Clipboard\"\n            width=\"12px\" />\n        </button>\n        <label\n          v-if=\"currentResponseContent?.schema\"\n          class=\"scalar-card-checkbox\">\n          {{ translate('response.showSchema') }}\n          <input\n            v-model=\"showSchema\"\n            :aria-controls=\"id\"\n            class=\"scalar-card-checkbox-input\"\n            type=\"checkbox\" />\n          <span class=\"scalar-card-checkbox-checkmark\" />\n        </label>\n      </template>\n    </ExampleResponseTabList>\n    <ScalarCardSection class=\"grid flex-1\">\n      <!-- Schema -->\n      <ExampleSchema\n        v-if=\"currentResponseContent?.schema && showSchema\"\n        :id=\"id\"\n        :schema=\"currentResponseContent?.schema\" />\n\n      <!-- Example -->\n      <ExampleResponse\n        v-else\n        :id=\"id\"\n        :example=\"currentExample\"\n        :response=\"currentResponseContent\" />\n    </ScalarCardSection>\n    <ScalarCardFooter\n      v-if=\"currentResponse?.description || hasMultipleExamples\"\n      class=\"response-card-footer\">\n      <ExamplePicker\n        v-if=\"hasMultipleExamples\"\n        class=\"response-example-selector px-0\"\n        :examples=\"currentResponseContent?.examples\"\n        :modelValue=\"selectedExampleKey\"\n        @update:modelValue=\"selectExample\" />\n      <div class=\"response-description\">\n        <ScalarMarkdown\n          v-if=\"currentResponse?.description\"\n          class=\"response-description-markdown\"\n          :value=\"currentResponse.description\" />\n      </div>\n    </ScalarCardFooter>\n  </ScalarCard>\n</template>\n\n<style scoped>\n.response-card {\n  font-size: var(--scalar-font-size-3);\n}\n\n.code-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  outline: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--scalar-color-3);\n  border: none;\n  padding: 0;\n  margin-right: 12px;\n}\n.code-copy:hover {\n  color: var(--scalar-color-1);\n}\n.code-copy svg {\n  width: 13px;\n  height: 13px;\n}\n.response-card-footer {\n  display: flex;\n  flex-direction: row-reverse;\n  flex-wrap: wrap;\n  justify-content: start;\n  flex-shrink: 0;\n  padding: 7px 12px;\n  column-gap: 8px;\n}\n.response-example-selector {\n  flex-shrink: 0;\n  margin: -4px;\n}\n.response-description {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-small);\n  color: var(--scalar-color--1);\n\n  box-sizing: border-box;\n\n  flex-grow: 1;\n}\n.response-description-markdown {\n  max-height: 3lh;\n}\n\n.response-description-markdown :deep(*) {\n  margin: 0;\n}\n.schema-type {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n  background: var(--scalar-background-3);\n  padding: 2px 4px;\n  border-radius: 4px;\n  margin-right: 4px;\n}\n.schema-example {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n}\n\n.example-response-tab {\n  display: block;\n  margin: 6px;\n}\n\n.scalar-card-checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  min-height: 17px;\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-normal);\n  color: var(--scalar-color-2);\n  width: fit-content;\n  white-space: nowrap;\n  gap: 6px;\n  padding: 7px 6px;\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:focus-visible)\n  .scalar-card-checkbox-checkmark {\n  outline: 1px solid var(--scalar-color-accent);\n}\n.scalar-card-checkbox:hover {\n  color: var(--scalar-color--1);\n}\n.scalar-card-checkbox .scalar-card-checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n.scalar-card-checkbox-checkmark {\n  height: 16px;\n  width: 16px;\n  border-radius: var(--scalar-radius);\n  background-color: transparent;\n  background-color: var(--scalar-background-3);\n  box-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:checked) {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark {\n  background-color: var(--scalar-button-1);\n  box-shadow: none;\n}\n\n.scalar-card-checkbox-checkmark:after {\n  content: '';\n  position: absolute;\n  display: none;\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark:after {\n  display: block;\n}\n\n.scalar-card-checkbox .scalar-card-checkbox-checkmark:after {\n  right: 11.5px;\n  top: 12.5px;\n  width: 5px;\n  height: 9px;\n  border: solid 1px var(--scalar-button-1-color);\n  border-width: 0 1.5px 1.5px 0;\n  transform: rotate(45deg);\n}\n</style>\n"],"mappings":"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"}

package/dist/features/example-responses/ExampleSchema.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleSchema.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleSchema.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getResolvedRefDeep } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarVirtualCodeBlock } from '@scalar/components/virtual-code-block'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport type { ReferenceType } from '@scalar/workspace-store/schemas/v3.1/strict/reference'\nimport type { SchemaObject } from '@scalar/workspace-store/schemas/v3.1/strict/schema'\nimport { computed } from 'vue'\n\nconst { id, schema } = defineProps<{\n  id: string\n  schema: ReferenceType<SchemaObject>\n}>()\n\nconst schemaContent = computed(() => {\n  if (!schema) {\n    return undefined\n  }\n\n  return prettyPrintJson(getResolvedRefDeep(schema))\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualizeSchema = computed(() => {\n  return (schemaContent.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n</script>\n\n<template>\n  <ScalarCodeBlock\n    v-if=\"!shouldVirtualizeSchema\"\n    :id=\"id\"\n    class=\"bg-b-2\"\n    lang=\"json\"\n    :prettyPrintedContent=\"schemaContent ?? ''\" />\n  <ScalarVirtualCodeBlock\n    v-else\n    :id=\"id\"\n    class=\"bg-b-2\"\n    :content=\"schemaContent ?? ''\"\n    lang=\"json\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"ExampleSchema.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleSchema.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getResolvedRefDeep } from '@scalar/blocks/code-example'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarVirtualCodeBlock } from '@scalar/components/virtual-code-block'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport type { ReferenceType } from '@scalar/workspace-store/schemas/v3.1/strict/reference'\nimport type { SchemaObject } from '@scalar/workspace-store/schemas/v3.1/strict/schema'\nimport { computed } from 'vue'\n\nconst { id, schema } = defineProps<{\n  id: string\n  schema: ReferenceType<SchemaObject>\n}>()\n\nconst schemaContent = computed(() => {\n  if (!schema) {\n    return undefined\n  }\n\n  return prettyPrintJson(getResolvedRefDeep(schema))\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualizeSchema = computed(() => {\n  return (schemaContent.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n</script>\n\n<template>\n  <ScalarCodeBlock\n    v-if=\"!shouldVirtualizeSchema\"\n    :id=\"id\"\n    class=\"bg-b-2\"\n    lang=\"json\"\n    :prettyPrintedContent=\"schemaContent ?? ''\" />\n  <ScalarVirtualCodeBlock\n    v-else\n    :id=\"id\"\n    class=\"bg-b-2\"\n    :content=\"schemaContent ?? ''\"\n    lang=\"json\" />\n</template>\n"],"mappings":""}

package/dist/features/example-responses/ExampleSchema.vue.script.js

@@ -1,5 +1,5 @@
 import { computed, createBlock, defineComponent, openBlock, unref } from "vue";
-import { getResolvedRefDeep } from "@scalar/api-client/blocks/operation-code-sample";
+import { getResolvedRefDeep } from "@scalar/blocks/code-example";
 import { ScalarCodeBlock } from "@scalar/components/code-block";
 import { ScalarVirtualCodeBlock } from "@scalar/components/virtual-code-block";
 import { prettyPrintJson } from "@scalar/helpers/json/pretty-print-json";

package/dist/features/example-responses/ExampleSchema.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleSchema.vue.script.js","names":[],"sources":["../../../src/features/example-responses/ExampleSchema.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getResolvedRefDeep } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarVirtualCodeBlock } from '@scalar/components/virtual-code-block'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport type { ReferenceType } from '@scalar/workspace-store/schemas/v3.1/strict/reference'\nimport type { SchemaObject } from '@scalar/workspace-store/schemas/v3.1/strict/schema'\nimport { computed } from 'vue'\n\nconst { id, schema } = defineProps<{\n  id: string\n  schema: ReferenceType<SchemaObject>\n}>()\n\nconst schemaContent = computed(() => {\n  if (!schema) {\n    return undefined\n  }\n\n  return prettyPrintJson(getResolvedRefDeep(schema))\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualizeSchema = computed(() => {\n  return (schemaContent.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n</script>\n\n<template>\n  <ScalarCodeBlock\n    v-if=\"!shouldVirtualizeSchema\"\n    :id=\"id\"\n    class=\"bg-b-2\"\n    lang=\"json\"\n    :prettyPrintedContent=\"schemaContent ?? ''\" />\n  <ScalarVirtualCodeBlock\n    v-else\n    :id=\"id\"\n    class=\"bg-b-2\"\n    :content=\"schemaContent ?? ''\"\n    lang=\"json\" />\n</template>\n"],"mappings":";;;;;;AAsBA,IAAM,2BAA2B;;;;;;;;EARjC,MAAM,gBAAgB,eAAe;AACnC,OAAI,CAAC,QAAA,OACH;AAGF,UAAO,gBAAgB,mBAAmB,QAAA,OAAO,CAAA;IAClD;EAID,MAAM,yBAAyB,eAAe;AAC5C,WAAQ,cAAc,OAAO,UAAU,KAAK;IAC7C;;WAKU,uBAAA,SAAA,WAAA,EADT,YAKgD,MAAA,gBAAA,EAAA;;IAH7C,IAAI,QAAA;IACL,OAAM;IACN,MAAK;IACJ,sBAAsB,cAAA,SAAa;gEACtC,YAKgB,MAAA,uBAAA,EAAA;;IAHb,IAAI,QAAA;IACL,OAAM;IACL,SAAS,cAAA,SAAa;IACvB,MAAK"}
+{"version":3,"file":"ExampleSchema.vue.script.js","names":[],"sources":["../../../src/features/example-responses/ExampleSchema.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getResolvedRefDeep } from '@scalar/blocks/code-example'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarVirtualCodeBlock } from '@scalar/components/virtual-code-block'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport type { ReferenceType } from '@scalar/workspace-store/schemas/v3.1/strict/reference'\nimport type { SchemaObject } from '@scalar/workspace-store/schemas/v3.1/strict/schema'\nimport { computed } from 'vue'\n\nconst { id, schema } = defineProps<{\n  id: string\n  schema: ReferenceType<SchemaObject>\n}>()\n\nconst schemaContent = computed(() => {\n  if (!schema) {\n    return undefined\n  }\n\n  return prettyPrintJson(getResolvedRefDeep(schema))\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualizeSchema = computed(() => {\n  return (schemaContent.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n</script>\n\n<template>\n  <ScalarCodeBlock\n    v-if=\"!shouldVirtualizeSchema\"\n    :id=\"id\"\n    class=\"bg-b-2\"\n    lang=\"json\"\n    :prettyPrintedContent=\"schemaContent ?? ''\" />\n  <ScalarVirtualCodeBlock\n    v-else\n    :id=\"id\"\n    class=\"bg-b-2\"\n    :content=\"schemaContent ?? ''\"\n    lang=\"json\" />\n</template>\n"],"mappings":";;;;;;AAsBA,IAAM,2BAA2B;;;;;;;;EARjC,MAAM,gBAAgB,eAAe;AACnC,OAAI,CAAC,QAAA,OACH;AAGF,UAAO,gBAAgB,mBAAmB,QAAA,OAAO,CAAA;IAClD;EAID,MAAM,yBAAyB,eAAe;AAC5C,WAAQ,cAAc,OAAO,UAAU,KAAK;IAC7C;;WAKU,uBAAA,SAAA,WAAA,EADT,YAKgD,MAAA,gBAAA,EAAA;;IAH7C,IAAI,QAAA;IACL,OAAM;IACN,MAAK;IACJ,sBAAsB,cAAA,SAAa;gEACtC,YAKgB,MAAA,uBAAA,EAAA;;IAHb,IAAI,QAAA;IACL,OAAM;IACL,SAAS,cAAA,SAAa;IACvB,MAAK"}