@scalar/api-reference 1.61.0 → 1.62.1

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

@@ -1 +1 @@
-{"version":3,"file":"ApiReferenceToolbarTitle.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/developer-tools/components/ApiReferenceToolbarTitle.vue"],"names":[],"mappings":"AA+LA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ApiReferenceToolbarTitle.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/developer-tools/components/ApiReferenceToolbarTitle.vue"],"names":[],"mappings":"AAyMA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ApiReferenceToolbarTitle.vue.js","names":[],"sources":["../../../../src/features/developer-tools/components/ApiReferenceToolbarTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconCopy, ScalarIconInfo } from '@scalar/icons'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\n\nimport ApiReferenceToolbarPopover from './ApiReferenceToolbarPopover.vue'\n\nconst CONFIG_SETTING = 'showDeveloperTools: \"never\"'\n\nconst { copyToClipboard } = useClipboard()\n</script>\n<template>\n  <ApiReferenceToolbarPopover\n    class=\"w-120\"\n    placement=\"bottom-start\">\n    <template #button>\n      <button\n        class=\"text-c-2 hover:text-c-1 hover:bg-b-2 ml-auto flex items-center gap-1 rounded px-2 py-2.25 text-base leading-none\"\n        type=\"button\">\n        <ScalarIconInfo />\n        Developer Tools\n      </button>\n    </template>\n    <div class=\"-m-2 flex flex-col gap-2 leading-relaxed\">\n      <div>\n        The developer tools allow you to customize the appearance and behavior\n        of your documentation. You can also share your documentation using the\n        Scalar Registry.\n      </div>\n      <div>\n        To disable the toolbar, set\n        <div\n          class=\"bg-b-2 inline-flex items-center gap-0.5 rounded border px-1 py-0.5 text-sm\">\n          <code class=\"font-code\">{{ CONFIG_SETTING }}</code>\n          <ScalarIconButton\n            class=\"-m-1 p-1.25\"\n            :icon=\"ScalarIconCopy\"\n            label=\"Copy link to clipboard\"\n            size=\"sm\"\n            @click=\"copyToClipboard(CONFIG_SETTING)\" />\n        </div>\n        in your configuration.\n      </div>\n    </div>\n    <template #info>\n      The developer tools will only appear when running on localhost.\n    </template>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ApiReferenceToolbarTitle.vue.js","names":[],"sources":["../../../../src/features/developer-tools/components/ApiReferenceToolbarTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconCopy, ScalarIconInfo } from '@scalar/icons'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\n\nimport { useLocalization } from '@/features/localization'\n\nimport ApiReferenceToolbarPopover from './ApiReferenceToolbarPopover.vue'\n\nconst CONFIG_SETTING = 'showDeveloperTools: \"never\"'\n\nconst { copyToClipboard } = useClipboard()\nconst { translate } = useLocalization()\n</script>\n<template>\n  <ApiReferenceToolbarPopover\n    class=\"w-120\"\n    placement=\"bottom-start\">\n    <template #button>\n      <button\n        class=\"text-c-2 hover:text-c-1 hover:bg-b-2 ml-auto flex items-center gap-1 rounded px-2 py-2.25 text-base leading-none\"\n        type=\"button\">\n        <ScalarIconInfo />\n        {{ translate('developerTools.title') }}\n      </button>\n    </template>\n    <div class=\"-m-2 flex flex-col gap-2 leading-relaxed\">\n      <div>{{ translate('developerTools.intro') }}</div>\n      <div>\n        {{ translate('developerTools.disableToolbarBefore') }}\n        <div\n          class=\"bg-b-2 inline-flex items-center gap-0.5 rounded border px-1 py-0.5 text-sm\">\n          <code class=\"font-code\">{{ CONFIG_SETTING }}</code>\n          <ScalarIconButton\n            class=\"-m-1 p-1.25\"\n            :icon=\"ScalarIconCopy\"\n            :label=\"translate('actions.copyToClipboard')\"\n            size=\"sm\"\n            @click=\"copyToClipboard(CONFIG_SETTING)\" />\n        </div>\n        {{ translate('developerTools.disableToolbarAfter') }}\n      </div>\n    </div>\n    <template #info>\n      {{ translate('developerTools.localhostOnly') }}\n    </template>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":""}

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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../localization/use-localization.js";
 import ApiReferenceToolbarPopover_default from "./ApiReferenceToolbarPopover.vue.js";
 import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { useClipboard } from "@scalar/use-hooks/useClipboard";
@@ -15,23 +16,24 @@ var ApiReferenceToolbarTitle_vue_vue_type_script_setup_true_lang_default = /* @_
 	__name: "ApiReferenceToolbarTitle",
 	setup(__props) {
 		const { copyToClipboard } = useClipboard();
+		const { translate } = useLocalization();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(ApiReferenceToolbarPopover_default, {
 				class: "w-120",
 				placement: "bottom-start"
 			}, {
-				button: withCtx(() => [createElementVNode("button", _hoisted_1, [createVNode(unref(ScalarIconInfo)), _cache[1] || (_cache[1] = createTextVNode(" Developer Tools ", -1))])]),
-				info: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode(" The developer tools will only appear when running on localhost. ", -1)])]),
-				default: withCtx(() => [createElementVNode("div", _hoisted_2, [_cache[4] || (_cache[4] = createElementVNode("div", null, " The developer tools allow you to customize the appearance and behavior of your documentation. You can also share your documentation using the Scalar Registry. ", -1)), createElementVNode("div", null, [
-					_cache[2] || (_cache[2] = createTextVNode(" To disable the toolbar, set ", -1)),
+				button: withCtx(() => [createElementVNode("button", _hoisted_1, [createVNode(unref(ScalarIconInfo)), createTextVNode(" " + toDisplayString(unref(translate)("developerTools.title")), 1)])]),
+				info: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("developerTools.localhostOnly")), 1)]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_2, [createElementVNode("div", null, toDisplayString(unref(translate)("developerTools.intro")), 1), createElementVNode("div", null, [
+					createTextVNode(toDisplayString(unref(translate)("developerTools.disableToolbarBefore")) + " ", 1),
 					createElementVNode("div", _hoisted_3, [createElementVNode("code", { class: "font-code" }, toDisplayString(CONFIG_SETTING)), createVNode(unref(ScalarIconButton), {
 						class: "-m-1 p-1.25",
 						icon: unref(ScalarIconCopy),
-						label: "Copy link to clipboard",
+						label: unref(translate)("actions.copyToClipboard"),
 						size: "sm",
 						onClick: _cache[0] || (_cache[0] = ($event) => unref(copyToClipboard)(CONFIG_SETTING))
-					}, null, 8, ["icon"])]),
-					_cache[3] || (_cache[3] = createTextVNode(" in your configuration. ", -1))
+					}, null, 8, ["icon", "label"])]),
+					createTextVNode(" " + toDisplayString(unref(translate)("developerTools.disableToolbarAfter")), 1)
 				])])]),
 				_: 1
 			});

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

@@ -1 +1 @@
-{"version":3,"file":"ApiReferenceToolbarTitle.vue.script.js","names":[],"sources":["../../../../src/features/developer-tools/components/ApiReferenceToolbarTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconCopy, ScalarIconInfo } from '@scalar/icons'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\n\nimport ApiReferenceToolbarPopover from './ApiReferenceToolbarPopover.vue'\n\nconst CONFIG_SETTING = 'showDeveloperTools: \"never\"'\n\nconst { copyToClipboard } = useClipboard()\n</script>\n<template>\n  <ApiReferenceToolbarPopover\n    class=\"w-120\"\n    placement=\"bottom-start\">\n    <template #button>\n      <button\n        class=\"text-c-2 hover:text-c-1 hover:bg-b-2 ml-auto flex items-center gap-1 rounded px-2 py-2.25 text-base leading-none\"\n        type=\"button\">\n        <ScalarIconInfo />\n        Developer Tools\n      </button>\n    </template>\n    <div class=\"-m-2 flex flex-col gap-2 leading-relaxed\">\n      <div>\n        The developer tools allow you to customize the appearance and behavior\n        of your documentation. You can also share your documentation using the\n        Scalar Registry.\n      </div>\n      <div>\n        To disable the toolbar, set\n        <div\n          class=\"bg-b-2 inline-flex items-center gap-0.5 rounded border px-1 py-0.5 text-sm\">\n          <code class=\"font-code\">{{ CONFIG_SETTING }}</code>\n          <ScalarIconButton\n            class=\"-m-1 p-1.25\"\n            :icon=\"ScalarIconCopy\"\n            label=\"Copy link to clipboard\"\n            size=\"sm\"\n            @click=\"copyToClipboard(CONFIG_SETTING)\" />\n        </div>\n        in your configuration.\n      </div>\n    </div>\n    <template #info>\n      The developer tools will only appear when running on localhost.\n    </template>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;AAOA,IAAM,iBAAiB;;;;EAEvB,MAAM,EAAE,oBAAoB,cAAa;;uBAGvC,YAmC6B,oCAAA;IAlC3B,OAAM;IACN,WAAU;;IACC,QAAM,cAMN,CALT,mBAKS,UALT,YAKS,CAFP,YAAkB,MAAA,eAAA,CAAA,EAAA,OAAA,OAAA,OAAA,KAAA,gBAAA,qBAEpB,GAAA,EAAA,CAAA,CAAA,CAAA;IAuBS,MAAI,cAEf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFgB,qEAEhB,GAAA,CAAA,EAAA,CAAA;2BAHM,CApBN,mBAoBM,OApBN,YAoBM,CAAA,OAAA,OAAA,OAAA,KAnBJ,mBAIM,OAAA,MAJD,oKAIL,GAAA,GACA,mBAaM,OAAA,MAAA;+CAbD,iCAEH,GAAA;KAAA,mBASM,OATN,YASM,CAPJ,mBAAmD,QAAA,EAA7C,OAAM,aAAW,EAAA,gBAAI,eAAc,CAAA,EACzC,YAK6C,MAAA,iBAAA,EAAA;MAJ3C,OAAM;MACL,MAAM,MAAA,eAAc;MACrB,OAAM;MACN,MAAK;MACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,gBAAe,CAAC,eAAc;;+CACpC,4BAER,GAAA"}
+{"version":3,"file":"ApiReferenceToolbarTitle.vue.script.js","names":[],"sources":["../../../../src/features/developer-tools/components/ApiReferenceToolbarTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconCopy, ScalarIconInfo } from '@scalar/icons'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\n\nimport { useLocalization } from '@/features/localization'\n\nimport ApiReferenceToolbarPopover from './ApiReferenceToolbarPopover.vue'\n\nconst CONFIG_SETTING = 'showDeveloperTools: \"never\"'\n\nconst { copyToClipboard } = useClipboard()\nconst { translate } = useLocalization()\n</script>\n<template>\n  <ApiReferenceToolbarPopover\n    class=\"w-120\"\n    placement=\"bottom-start\">\n    <template #button>\n      <button\n        class=\"text-c-2 hover:text-c-1 hover:bg-b-2 ml-auto flex items-center gap-1 rounded px-2 py-2.25 text-base leading-none\"\n        type=\"button\">\n        <ScalarIconInfo />\n        {{ translate('developerTools.title') }}\n      </button>\n    </template>\n    <div class=\"-m-2 flex flex-col gap-2 leading-relaxed\">\n      <div>{{ translate('developerTools.intro') }}</div>\n      <div>\n        {{ translate('developerTools.disableToolbarBefore') }}\n        <div\n          class=\"bg-b-2 inline-flex items-center gap-0.5 rounded border px-1 py-0.5 text-sm\">\n          <code class=\"font-code\">{{ CONFIG_SETTING }}</code>\n          <ScalarIconButton\n            class=\"-m-1 p-1.25\"\n            :icon=\"ScalarIconCopy\"\n            :label=\"translate('actions.copyToClipboard')\"\n            size=\"sm\"\n            @click=\"copyToClipboard(CONFIG_SETTING)\" />\n        </div>\n        {{ translate('developerTools.disableToolbarAfter') }}\n      </div>\n    </div>\n    <template #info>\n      {{ translate('developerTools.localhostOnly') }}\n    </template>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;AASA,IAAM,iBAAiB;;;;EAEvB,MAAM,EAAE,oBAAoB,cAAa;EACzC,MAAM,EAAE,cAAc,iBAAgB;;uBAGpC,YA+B6B,oCAAA;IA9B3B,OAAM;IACN,WAAU;;IACC,QAAM,cAMN,CALT,mBAKS,UALT,YAKS,CAFP,YAAkB,MAAA,eAAA,CAAA,EAAA,gBAAA,MAClB,gBAAG,MAAA,UAAS,CAAA,uBAAA,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;IAoBL,MAAI,cACkC,CAAA,gBAAA,gBAA5C,MAAA,UAAS,CAAA,+BAAA,CAAA,EAAA,EAAA,CAAA,CAAA;2BAFR,CAhBN,mBAgBM,OAhBN,YAgBM,CAfJ,mBAAkD,OAAA,MAAA,gBAA1C,MAAA,UAAS,CAAA,uBAAA,CAAA,EAAA,EAAA,EACjB,mBAaM,OAAA,MAAA;qCAZD,MAAA,UAAS,CAAA,sCAAA,CAAA,GAA0C,KACtD,EAAA;KAAA,mBASM,OATN,YASM,CAPJ,mBAAmD,QAAA,EAA7C,OAAM,aAAW,EAAA,gBAAI,eAAc,CAAA,EACzC,YAK6C,MAAA,iBAAA,EAAA;MAJ3C,OAAM;MACL,MAAM,MAAA,eAAc;MACpB,OAAO,MAAA,UAAS,CAAA,0BAAA;MACjB,MAAK;MACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,gBAAe,CAAC,eAAc;;qBACpC,MACN,gBAAG,MAAA,UAAS,CAAA,qCAAA,CAAA,EAAA,EAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"DeployApiReference.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/developer-tools/components/DeployApiReference.vue"],"names":[],"mappings":"AAiCA,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":"DeployApiReference.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/developer-tools/components/DeployApiReference.vue"],"names":[],"mappings":"AAmCA,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/DeployApiReference.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeployApiReference.vue.js","names":[],"sources":["../../../../src/features/developer-tools/components/DeployApiReference.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 ApiReferenceToolbarShareRegister from './ApiReferenceToolbarShareRegister.vue'\n\nconst { workspace, externalUrls } = defineProps<{\n  workspace: WorkspaceStore\n  externalUrls: ExternalUrls\n}>()\n</script>\n\n<template>\n  <ApiReferenceToolbarPopover class=\"w-120\">\n    <template #label>Deploy</template>\n    <ScalarFormSection>\n      <template #label>Scalar Docs</template>\n      <p class=\"text-c-2 mb-2 leading-normal\">\n        Deploy your documentation on Scalar, the modern documentation platform\n        for your API and everything else.\n      </p>\n      <ApiReferenceToolbarShareRegister\n        :externalUrls\n        :workspace />\n    </ScalarFormSection>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DeployApiReference.vue.js","names":[],"sources":["../../../../src/features/developer-tools/components/DeployApiReference.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 ApiReferenceToolbarShareRegister from './ApiReferenceToolbarShareRegister.vue'\n\nconst { workspace, externalUrls } = defineProps<{\n  workspace: WorkspaceStore\n  externalUrls: ExternalUrls\n}>()\nconst { translate } = useLocalization()\n</script>\n\n<template>\n  <ApiReferenceToolbarPopover class=\"w-120\">\n    <template #label>{{ translate('developerTools.deploy') }}</template>\n    <ScalarFormSection>\n      <template #label>{{ translate('developerTools.scalarDocs') }}</template>\n      <p class=\"text-c-2 mb-2 leading-normal\">\n        {{ translate('developerTools.deployDescription') }}\n      </p>\n      <ApiReferenceToolbarShareRegister\n        :externalUrls\n        :workspace />\n    </ScalarFormSection>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":""}

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

@@ -1,8 +1,10 @@
+import { useLocalization } from "../../localization/use-localization.js";
 import ApiReferenceToolbarPopover_default from "./ApiReferenceToolbarPopover.vue.js";
 import ApiReferenceToolbarShareRegister_default from "./ApiReferenceToolbarShareRegister.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/DeployApiReference.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "text-c-2 mb-2 leading-normal" };
 var DeployApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "DeployApiReference",
 	props: {
@@ -10,12 +12,13 @@ var DeployApiReference_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("Deploy", -1)])]),
+				label: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("developerTools.deploy")), 1)]),
 				default: withCtx(() => [createVNode(unref(ScalarFormSection), null, {
-					label: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("Scalar Docs", -1)])]),
-					default: withCtx(() => [_cache[2] || (_cache[2] = createElementVNode("p", { class: "text-c-2 mb-2 leading-normal" }, " Deploy your documentation on Scalar, the modern documentation platform for your API and everything else. ", -1)), createVNode(ApiReferenceToolbarShareRegister_default, {
+					label: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("developerTools.scalarDocs")), 1)]),
+					default: withCtx(() => [createElementVNode("p", _hoisted_1, toDisplayString(unref(translate)("developerTools.deployDescription")), 1), createVNode(ApiReferenceToolbarShareRegister_default, {
 						externalUrls: __props.externalUrls,
 						workspace: __props.workspace
 					}, null, 8, ["externalUrls", "workspace"])]),

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

@@ -1 +1 @@
-{"version":3,"file":"DeployApiReference.vue.script.js","names":[],"sources":["../../../../src/features/developer-tools/components/DeployApiReference.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 ApiReferenceToolbarShareRegister from './ApiReferenceToolbarShareRegister.vue'\n\nconst { workspace, externalUrls } = defineProps<{\n  workspace: WorkspaceStore\n  externalUrls: ExternalUrls\n}>()\n</script>\n\n<template>\n  <ApiReferenceToolbarPopover class=\"w-120\">\n    <template #label>Deploy</template>\n    <ScalarFormSection>\n      <template #label>Scalar Docs</template>\n      <p class=\"text-c-2 mb-2 leading-normal\">\n        Deploy your documentation on Scalar, the modern documentation platform\n        for your API and everything else.\n      </p>\n      <ApiReferenceToolbarShareRegister\n        :externalUrls\n        :workspace />\n    </ScalarFormSection>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;uBAeE,YAY6B,oCAAA,EAZD,OAAM,SAAO,EAAA;IAC5B,OAAK,cAAO,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAN,UAAM,GAAA,CAAA,EAAA,CAAA;2BAUH,CATpB,YASoB,MAAA,kBAAA,EAAA,MAAA;KARP,OAAK,cAAY,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAX,eAAW,GAAA,CAAA,EAAA,CAAA;4BAIxB,CAAA,OAAA,OAAA,OAAA,KAHJ,mBAGI,KAAA,EAHD,OAAM,gCAA8B,EAAC,8GAGxC,GAAA,GACA,YAEe,0CAAA;MADZ,cAAA,QAAA;MACA,WAAA,QAAA"}
+{"version":3,"file":"DeployApiReference.vue.script.js","names":[],"sources":["../../../../src/features/developer-tools/components/DeployApiReference.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 ApiReferenceToolbarShareRegister from './ApiReferenceToolbarShareRegister.vue'\n\nconst { workspace, externalUrls } = defineProps<{\n  workspace: WorkspaceStore\n  externalUrls: ExternalUrls\n}>()\nconst { translate } = useLocalization()\n</script>\n\n<template>\n  <ApiReferenceToolbarPopover class=\"w-120\">\n    <template #label>{{ translate('developerTools.deploy') }}</template>\n    <ScalarFormSection>\n      <template #label>{{ translate('developerTools.scalarDocs') }}</template>\n      <p class=\"text-c-2 mb-2 leading-normal\">\n        {{ translate('developerTools.deployDescription') }}\n      </p>\n      <ApiReferenceToolbarShareRegister\n        :externalUrls\n        :workspace />\n    </ScalarFormSection>\n  </ApiReferenceToolbarPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAcA,MAAM,EAAE,cAAc,iBAAgB;;uBAIpC,YAW6B,oCAAA,EAXD,OAAM,SAAO,EAAA;IAC5B,OAAK,cAAyC,CAAA,gBAAA,gBAArC,MAAA,UAAS,CAAA,wBAAA,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,mCAAA,CAAA,EAAA,EAAA,EAEd,YAEe,0CAAA;MADZ,cAAA,QAAA;MACA,WAAA,QAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ModifyConfiguration.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/developer-tools/components/ModifyConfiguration.vue"],"names":[],"mappings":"AAwEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAQ5E,KAAK,WAAW,GAAG;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CACnD,CAAC;AAyBF,KAAK,gBAAgB,GAAG;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;CAChD,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAsKxD,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ModifyConfiguration.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/developer-tools/components/ModifyConfiguration.vue"],"names":[],"mappings":"AA+EA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAU5E,KAAK,WAAW,GAAG;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CACnD,CAAC;AA0BF,KAAK,gBAAgB,GAAG;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;CAChD,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAgLxD,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ModifyConfiguration.vue.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":""}
+{"version":3,"file":"ModifyConfiguration.vue.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":""}

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":""}