@scalar/api-client 3.19.2 → 3.20.0

package/dist/v2/features/environments/EnvironmentsList.vue.script.js

@@ -1,7 +1,8 @@
+import { useLocalization } from "../localization/index.js";
 import EnvironmentCreateModal_default from "./components/EnvironmentCreateModal.vue.js";
 import EnvironmentDeleteModal_default from "./components/EnvironmentDeleteModal.vue.js";
 import Environment_default from "./components/Environment.vue.js";
-import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, unref, withCtx } from "vue";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
 import { ScalarButton } from "@scalar/components/button";
 import { ScalarIconPlus } from "@scalar/icons";
 import { useModal } from "@scalar/components/modal";
@@ -16,6 +17,7 @@ var EnvironmentsList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		collectionType: {}
 	},
 	setup(__props) {
+		const { translate } = useLocalization();
 		const createEnvironmentModalState = useModal();
 		const deleteEnvironmentModalState = useModal();
 		/** Track the currently selected environment for editing or deleting */
@@ -66,7 +68,7 @@ var EnvironmentsList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					variant: "ghost",
 					onClick: _cache[0] || (_cache[0] = () => openUpsertModal())
 				}, {
-					default: withCtx(() => [createVNode(unref(ScalarIconPlus)), _cache[1] || (_cache[1] = createTextVNode(" Add Environment ", -1))]),
+					default: withCtx(() => [createVNode(unref(ScalarIconPlus)), createTextVNode(toDisplayString(unref(translate)("apiClient.environmentsList.addEnvironment")), 1)]),
 					_: 1
 				})]),
 				createVNode(EnvironmentCreateModal_default, {

package/dist/v2/features/environments/EnvironmentsList.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentsList.vue.script.js","names":[],"sources":["../../../../src/v2/features/environments/EnvironmentsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { ref } from 'vue'\n\nimport EnvironmentCreateModal from '@/v2/features/environments/components/EnvironmentCreateModal.vue'\nimport EnvironmentDeleteModal from '@/v2/features/environments/components/EnvironmentDeleteModal.vue'\n\nimport EnvironmentComponent from './components/Environment.vue'\n\nconst { environments, eventBus, collectionType, activeEnvironment } =\n  defineProps<\n    {\n      /** List of environments, ensured to be non-nullable for safety */\n      environments: NonNullable<XScalarEnvironments['x-scalar-environments']>\n      /** Event bus to handle workspace-related events */\n      eventBus: WorkspaceEventBus\n      /** The currently active environment name */\n      activeEnvironment?: string\n    } & CollectionType\n  >()\n\nconst createEnvironmentModalState = useModal()\nconst deleteEnvironmentModalState = useModal()\n\n/** Track the currently selected environment for editing or deleting */\nconst selectedEnvironmentName = ref<string | null>(null)\n\n/** Opens the delete modal */\nconst openDeleteModal = (name: string) => {\n  selectedEnvironmentName.value = name\n  deleteEnvironmentModalState.show()\n}\n\n/** Deletes the selected environment */\nconst deleteEnvironment = () => {\n  if (!selectedEnvironmentName.value) {\n    return\n  }\n  eventBus.emit('environment:delete:environment', {\n    environmentName: selectedEnvironmentName.value,\n    collectionType,\n  })\n}\n\n/** Opens the upsert modal, leave name empty for add */\nconst openUpsertModal = (name?: string) => {\n  selectedEnvironmentName.value = name ?? null\n  createEnvironmentModalState.show()\n}\n</script>\n\n<template>\n  <EnvironmentComponent\n    v-for=\"[environmentName, environment] in Object.entries(environments)\"\n    :key=\"environmentName\"\n    :collectionType=\"collectionType\"\n    :environment\n    :environmentName\n    :eventBus=\"eventBus\"\n    :isActive=\"activeEnvironment === environmentName\"\n    @delete=\"() => openDeleteModal(environmentName)\"\n    @edit=\"() => openUpsertModal(environmentName)\" />\n\n  <!-- Add Environment CTA -->\n  <div\n    class=\"text-c-3 flex h-full items-center justify-center rounded-lg border p-4\">\n    <ScalarButton\n      class=\"hover:bg-b-2 hover:text-c-1 flex items-center gap-2\"\n      size=\"xs\"\n      variant=\"ghost\"\n      @click=\"() => openUpsertModal()\">\n      <ScalarIconPlus />\n      Add Environment\n    </ScalarButton>\n  </div>\n\n  <!-- Upsert Modal -->\n  <EnvironmentCreateModal\n    :collectionType=\"collectionType\"\n    :environments\n    :eventBus\n    :selectedEnvironmentName\n    :state=\"createEnvironmentModalState\" />\n\n  <!-- Delete Modal -->\n  <EnvironmentDeleteModal\n    :name=\"selectedEnvironmentName\"\n    :state=\"deleteEnvironmentModalState\"\n    @submit=\"deleteEnvironment\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA4BA,MAAM,8BAA8B,SAAS;EAC7C,MAAM,8BAA8B,SAAS;;EAG7C,MAAM,0BAA0B,IAAmB,IAAI;;EAGvD,MAAM,mBAAmB,SAAiB;GACxC,wBAAwB,QAAQ;GAChC,4BAA4B,KAAK;EACnC;;EAGA,MAAM,0BAA0B;GAC9B,IAAI,CAAC,wBAAwB,OAC3B;GAEF,QAAA,SAAS,KAAK,kCAAkC;IAC9C,iBAAiB,wBAAwB;IACzC,gBAAa,QAAA;GACf,CAAC;EACH;;EAGA,MAAM,mBAAmB,SAAkB;GACzC,wBAAwB,QAAQ,QAAQ;GACxC,4BAA4B,KAAK;EACnC;;;sBAIE,mBASmD,UAAA,MAAA,WARR,OAAO,QAAQ,QAAA,YAAY,IAAA,CAA5D,iBAAiB,iBAAW;yBADtC,YASmD,qBAAA;MAPhD,KAAK;MACL,gBAAgB,QAAA;MAChB;MACA;MACA,UAAU,QAAA;MACV,UAAU,QAAA,sBAAsB;MAChC,gBAAc,gBAAgB,eAAe;MAC7C,cAAY,gBAAgB,eAAe;;;;;;;;;;;IAG9C,mBAUM,OAVN,YAUM,CARJ,YAOe,MAAA,YAAA,GAAA;KANb,OAAM;KACN,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAQ,gBAAe;;4BACX,CAAlB,YAAkB,MAAA,cAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,gBAAA,qBAEpB,EAAA,EAAA,CAAA;;;IAIF,YAKyC,gCAAA;KAJtC,gBAAgB,QAAA;KAChB,cAAA,QAAA;KACA,UAAA,QAAA;KACA,yBAAA,wBAAA;KACA,OAAO,MAAA,2BAAA;;;;;;;;IAGV,YAGgC,gCAAA;KAF7B,MAAM,wBAAA;KACN,OAAO,MAAA,2BAAA;KACP,UAAQ"}
+{"version":3,"file":"EnvironmentsList.vue.script.js","names":[],"sources":["../../../../src/v2/features/environments/EnvironmentsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { ref } from 'vue'\n\nimport EnvironmentCreateModal from '@/v2/features/environments/components/EnvironmentCreateModal.vue'\nimport EnvironmentDeleteModal from '@/v2/features/environments/components/EnvironmentDeleteModal.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport EnvironmentComponent from './components/Environment.vue'\n\nconst { environments, eventBus, collectionType, activeEnvironment } =\n  defineProps<\n    {\n      /** List of environments, ensured to be non-nullable for safety */\n      environments: NonNullable<XScalarEnvironments['x-scalar-environments']>\n      /** Event bus to handle workspace-related events */\n      eventBus: WorkspaceEventBus\n      /** The currently active environment name */\n      activeEnvironment?: string\n    } & CollectionType\n  >()\n\nconst { translate } = useLocalization()\n\nconst createEnvironmentModalState = useModal()\nconst deleteEnvironmentModalState = useModal()\n\n/** Track the currently selected environment for editing or deleting */\nconst selectedEnvironmentName = ref<string | null>(null)\n\n/** Opens the delete modal */\nconst openDeleteModal = (name: string) => {\n  selectedEnvironmentName.value = name\n  deleteEnvironmentModalState.show()\n}\n\n/** Deletes the selected environment */\nconst deleteEnvironment = () => {\n  if (!selectedEnvironmentName.value) {\n    return\n  }\n  eventBus.emit('environment:delete:environment', {\n    environmentName: selectedEnvironmentName.value,\n    collectionType,\n  })\n}\n\n/** Opens the upsert modal, leave name empty for add */\nconst openUpsertModal = (name?: string) => {\n  selectedEnvironmentName.value = name ?? null\n  createEnvironmentModalState.show()\n}\n</script>\n\n<template>\n  <EnvironmentComponent\n    v-for=\"[environmentName, environment] in Object.entries(environments)\"\n    :key=\"environmentName\"\n    :collectionType=\"collectionType\"\n    :environment\n    :environmentName\n    :eventBus=\"eventBus\"\n    :isActive=\"activeEnvironment === environmentName\"\n    @delete=\"() => openDeleteModal(environmentName)\"\n    @edit=\"() => openUpsertModal(environmentName)\" />\n\n  <!-- Add Environment CTA -->\n  <div\n    class=\"text-c-3 flex h-full items-center justify-center rounded-lg border p-4\">\n    <ScalarButton\n      class=\"hover:bg-b-2 hover:text-c-1 flex items-center gap-2\"\n      size=\"xs\"\n      variant=\"ghost\"\n      @click=\"() => openUpsertModal()\">\n      <ScalarIconPlus />{{\n        translate('apiClient.environmentsList.addEnvironment')\n      }}\n    </ScalarButton>\n  </div>\n\n  <!-- Upsert Modal -->\n  <EnvironmentCreateModal\n    :collectionType=\"collectionType\"\n    :environments\n    :eventBus\n    :selectedEnvironmentName\n    :state=\"createEnvironmentModalState\" />\n\n  <!-- Delete Modal -->\n  <EnvironmentDeleteModal\n    :name=\"selectedEnvironmentName\"\n    :state=\"deleteEnvironmentModalState\"\n    @submit=\"deleteEnvironment\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA6BA,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,8BAA8B,SAAS;EAC7C,MAAM,8BAA8B,SAAS;;EAG7C,MAAM,0BAA0B,IAAmB,IAAI;;EAGvD,MAAM,mBAAmB,SAAiB;GACxC,wBAAwB,QAAQ;GAChC,4BAA4B,KAAK;EACnC;;EAGA,MAAM,0BAA0B;GAC9B,IAAI,CAAC,wBAAwB,OAC3B;GAEF,QAAA,SAAS,KAAK,kCAAkC;IAC9C,iBAAiB,wBAAwB;IACzC,gBAAa,QAAA;GACf,CAAC;EACH;;EAGA,MAAM,mBAAmB,SAAkB;GACzC,wBAAwB,QAAQ,QAAQ;GACxC,4BAA4B,KAAK;EACnC;;;sBAIE,mBASmD,UAAA,MAAA,WARR,OAAO,QAAQ,QAAA,YAAY,IAAA,CAA5D,iBAAiB,iBAAW;yBADtC,YASmD,qBAAA;MAPhD,KAAK;MACL,gBAAgB,QAAA;MAChB;MACA;MACA,UAAU,QAAA;MACV,UAAU,QAAA,sBAAsB;MAChC,gBAAc,gBAAgB,eAAe;MAC7C,cAAY,gBAAgB,eAAe;;;;;;;;;;;IAG9C,mBAWM,OAXN,YAWM,CATJ,YAQe,MAAA,YAAA,GAAA;KAPb,OAAM;KACN,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAQ,gBAAe;;4BACX,CAAlB,YAAkB,MAAA,cAAA,CAAA,GAAA,gBAAA,gBAChB,MAAA,SAAA,CAAS,CAAA,2CAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;IAMf,YAKyC,gCAAA;KAJtC,gBAAgB,QAAA;KAChB,cAAA,QAAA;KACA,UAAA,QAAA;KACA,yBAAA,wBAAA;KACA,OAAO,MAAA,2BAAA;;;;;;;;IAGV,YAGgC,gCAAA;KAF7B,MAAM,wBAAA;KACN,OAAO,MAAA,2BAAA;KACP,UAAQ"}

package/dist/v2/features/environments/components/Environment.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Environment.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"names":[],"mappings":"AAuFA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAInH,KAAK,WAAW,GAAG;IACf,WAAW,EAAE,kBAAkB,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,cAAc,CAAC;AA+LrB,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Environment.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"names":[],"mappings":"AA4FA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAKnH,KAAK,WAAW,GAAG;IACf,WAAW,EAAE,kBAAkB,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,cAAc,CAAC;AAqMrB,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/environments/components/Environment.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Environment.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconNotePencil, ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\n\nimport EnvironmentVariablesTable from '@/v2/features/environments/components/EnvironmentVariablesTable.vue'\n\nconst {\n  environmentName,\n  environment,\n  eventBus,\n  collectionType,\n  isActive = false,\n} = defineProps<\n  {\n    environment: XScalarEnvironment\n    environmentName: string\n    eventBus: WorkspaceEventBus\n    isActive?: boolean\n  } & CollectionType\n>()\n\nconst emit = defineEmits<{\n  (e: 'edit'): void\n  (e: 'delete'): void\n}>()\n</script>\n<template>\n  <div\n    class=\"group relative rounded-lg border transition-colors\"\n    :class=\"isActive ? 'border-c-accent bg-c-accent/5' : ''\">\n    <!-- Info -->\n    <div\n      class=\"flex justify-between rounded-t-lg px-1 py-1 text-sm\"\n      :class=\"isActive ? 'bg-c-accent/10' : 'bg-b-2'\">\n      <div class=\"flex items-center gap-1.5\">\n        <div class=\"flex h-6 w-6 items-center justify-center p-1\">\n          <span\n            class=\"h-2.5 w-2.5 rounded-full\"\n            :style=\"{ backgroundColor: environment.color }\"></span>\n        </div>\n        <span class=\"px-1 py-0.5 text-sm font-medium\">\n          {{ environmentName }}\n        </span>\n        <!-- Active badge -->\n        <span\n          v-if=\"isActive\"\n          class=\"bg-c-accent text-b-1 flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium\"\n          title=\"This is the active environment\">\n          <span class=\"size-1.5 rounded-full bg-current\"></span>\n          Active\n        </span>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"hidden flex-row items-center gap-1 group-hover:flex\">\n        <ScalarIconButton\n          :icon=\"ScalarIconNotePencil\"\n          label=\"Edit Environment\"\n          size=\"sm\"\n          @click=\"emit('edit')\" />\n\n        <ScalarIconButton\n          :icon=\"ScalarIconTrash\"\n          label=\"Delete Environment\"\n          size=\"sm\"\n          @click=\"emit('delete')\" />\n      </div>\n    </div>\n\n    <!-- Variables Table -->\n    <EnvironmentVariablesTable\n      :collectionType\n      :environment\n      :environmentName\n      :eventBus />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Environment.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconNotePencil, ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\n\nimport EnvironmentVariablesTable from '@/v2/features/environments/components/EnvironmentVariablesTable.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  environmentName,\n  environment,\n  eventBus,\n  collectionType,\n  isActive = false,\n} = defineProps<\n  {\n    environment: XScalarEnvironment\n    environmentName: string\n    eventBus: WorkspaceEventBus\n    isActive?: boolean\n  } & CollectionType\n>()\n\nconst emit = defineEmits<{\n  (e: 'edit'): void\n  (e: 'delete'): void\n}>()\n\nconst { translate } = useLocalization()\n</script>\n<template>\n  <div\n    class=\"group relative rounded-lg border transition-colors\"\n    :class=\"isActive ? 'border-c-accent bg-c-accent/5' : ''\">\n    <!-- Info -->\n    <div\n      class=\"flex justify-between rounded-t-lg px-1 py-1 text-sm\"\n      :class=\"isActive ? 'bg-c-accent/10' : 'bg-b-2'\">\n      <div class=\"flex items-center gap-1.5\">\n        <div class=\"flex h-6 w-6 items-center justify-center p-1\">\n          <span\n            class=\"h-2.5 w-2.5 rounded-full\"\n            :style=\"{ backgroundColor: environment.color }\"></span>\n        </div>\n        <span class=\"px-1 py-0.5 text-sm font-medium\">\n          {{ environmentName }}\n        </span>\n        <!-- Active badge -->\n        <span\n          v-if=\"isActive\"\n          class=\"bg-c-accent text-b-1 flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium\"\n          :title=\"\n            translate('apiClient.environment.thisIsTheActiveEnvironment')\n          \">\n          <span class=\"size-1.5 rounded-full bg-current\"></span\n          >{{ translate('apiClient.environment.active') }}</span\n        >\n      </div>\n\n      <!-- Actions -->\n      <div class=\"hidden flex-row items-center gap-1 group-hover:flex\">\n        <ScalarIconButton\n          :icon=\"ScalarIconNotePencil\"\n          :label=\"translate('apiClient.environment.editEnvironment')\"\n          size=\"sm\"\n          @click=\"emit('edit')\" />\n\n        <ScalarIconButton\n          :icon=\"ScalarIconTrash\"\n          :label=\"translate('apiClient.environment.deleteEnvironment')\"\n          size=\"sm\"\n          @click=\"emit('delete')\" />\n      </div>\n    </div>\n\n    <!-- Variables Table -->\n    <EnvironmentVariablesTable\n      :collectionType\n      :environment\n      :environmentName\n      :eventBus />\n  </div>\n</template>\n"],"mappings":""}

package/dist/v2/features/environments/components/Environment.vue.script.js

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../localization/index.js";
 import EnvironmentVariablesTable_default from "./EnvironmentVariablesTable.vue.js";
 import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref } from "vue";
 import { ScalarIconNotePencil, ScalarIconTrash } from "@scalar/icons";
@@ -6,11 +7,7 @@ import { ScalarIconButton } from "@scalar/components/icon-button";
 var _hoisted_1 = { class: "flex items-center gap-1.5" };
 var _hoisted_2 = { class: "flex h-6 w-6 items-center justify-center p-1" };
 var _hoisted_3 = { class: "px-1 py-0.5 text-sm font-medium" };
-var _hoisted_4 = {
-	key: 0,
-	class: "bg-c-accent text-b-1 flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium",
-	title: "This is the active environment"
-};
+var _hoisted_4 = ["title"];
 var _hoisted_5 = { class: "hidden flex-row items-center gap-1 group-hover:flex" };
 var Environment_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Environment",
@@ -27,6 +24,7 @@ var Environment_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 	emits: ["edit", "delete"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const { translate } = useLocalization();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(["group relative rounded-lg border transition-colors", __props.isActive ? "border-c-accent bg-c-accent/5" : ""]) }, [createElementVNode("div", { class: normalizeClass(["flex justify-between rounded-t-lg px-1 py-1 text-sm", __props.isActive ? "bg-c-accent/10" : "bg-b-2"]) }, [createElementVNode("div", _hoisted_1, [
 				createElementVNode("div", _hoisted_2, [createElementVNode("span", {
@@ -34,18 +32,22 @@ var Environment_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					style: normalizeStyle({ backgroundColor: __props.environment.color })
 				}, null, 4)]),
 				createElementVNode("span", _hoisted_3, toDisplayString(__props.environmentName), 1),
-				__props.isActive ? (openBlock(), createElementBlock("span", _hoisted_4, [..._cache[2] || (_cache[2] = [createElementVNode("span", { class: "size-1.5 rounded-full bg-current" }, null, -1), createTextVNode(" Active ", -1)])])) : createCommentVNode("", true)
+				__props.isActive ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "bg-c-accent text-b-1 flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium",
+					title: unref(translate)("apiClient.environment.thisIsTheActiveEnvironment")
+				}, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "size-1.5 rounded-full bg-current" }, null, -1)), createTextVNode(toDisplayString(unref(translate)("apiClient.environment.active")), 1)], 8, _hoisted_4)) : createCommentVNode("", true)
 			]), createElementVNode("div", _hoisted_5, [createVNode(unref(ScalarIconButton), {
 				icon: unref(ScalarIconNotePencil),
-				label: "Edit Environment",
+				label: unref(translate)("apiClient.environment.editEnvironment"),
 				size: "sm",
 				onClick: _cache[0] || (_cache[0] = ($event) => emit("edit"))
-			}, null, 8, ["icon"]), createVNode(unref(ScalarIconButton), {
+			}, null, 8, ["icon", "label"]), createVNode(unref(ScalarIconButton), {
 				icon: unref(ScalarIconTrash),
-				label: "Delete Environment",
+				label: unref(translate)("apiClient.environment.deleteEnvironment"),
 				size: "sm",
 				onClick: _cache[1] || (_cache[1] = ($event) => emit("delete"))
-			}, null, 8, ["icon"])])], 2), createVNode(EnvironmentVariablesTable_default, {
+			}, null, 8, ["icon", "label"])])], 2), createVNode(EnvironmentVariablesTable_default, {
 				collectionType: __props.collectionType,
 				environment: __props.environment,
 				environmentName: __props.environmentName,

package/dist/v2/features/environments/components/Environment.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"Environment.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconNotePencil, ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\n\nimport EnvironmentVariablesTable from '@/v2/features/environments/components/EnvironmentVariablesTable.vue'\n\nconst {\n  environmentName,\n  environment,\n  eventBus,\n  collectionType,\n  isActive = false,\n} = defineProps<\n  {\n    environment: XScalarEnvironment\n    environmentName: string\n    eventBus: WorkspaceEventBus\n    isActive?: boolean\n  } & CollectionType\n>()\n\nconst emit = defineEmits<{\n  (e: 'edit'): void\n  (e: 'delete'): void\n}>()\n</script>\n<template>\n  <div\n    class=\"group relative rounded-lg border transition-colors\"\n    :class=\"isActive ? 'border-c-accent bg-c-accent/5' : ''\">\n    <!-- Info -->\n    <div\n      class=\"flex justify-between rounded-t-lg px-1 py-1 text-sm\"\n      :class=\"isActive ? 'bg-c-accent/10' : 'bg-b-2'\">\n      <div class=\"flex items-center gap-1.5\">\n        <div class=\"flex h-6 w-6 items-center justify-center p-1\">\n          <span\n            class=\"h-2.5 w-2.5 rounded-full\"\n            :style=\"{ backgroundColor: environment.color }\"></span>\n        </div>\n        <span class=\"px-1 py-0.5 text-sm font-medium\">\n          {{ environmentName }}\n        </span>\n        <!-- Active badge -->\n        <span\n          v-if=\"isActive\"\n          class=\"bg-c-accent text-b-1 flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium\"\n          title=\"This is the active environment\">\n          <span class=\"size-1.5 rounded-full bg-current\"></span>\n          Active\n        </span>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"hidden flex-row items-center gap-1 group-hover:flex\">\n        <ScalarIconButton\n          :icon=\"ScalarIconNotePencil\"\n          label=\"Edit Environment\"\n          size=\"sm\"\n          @click=\"emit('edit')\" />\n\n        <ScalarIconButton\n          :icon=\"ScalarIconTrash\"\n          label=\"Delete Environment\"\n          size=\"sm\"\n          @click=\"emit('delete')\" />\n      </div>\n    </div>\n\n    <!-- Variables Table -->\n    <EnvironmentVariablesTable\n      :collectionType\n      :environment\n      :environmentName\n      :eventBus />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,OAAO;;uBAMX,mBAgDM,OAAA,EA/CJ,OAAK,eAAA,CAAC,sDACE,QAAA,WAAQ,kCAAA,EAAA,CAAA,EAAA,GAAA,CAEhB,mBAoCM,OAAA,EAnCJ,OAAK,eAAA,CAAC,uDACE,QAAA,WAAQ,mBAAA,QAAA,CAAA,EAAA,GAAA,CAChB,mBAiBM,OAjBN,YAiBM;IAhBJ,mBAIM,OAJN,YAIM,CAHJ,mBAEyD,QAAA;KADvD,OAAM;KACL,OAAK,eAAA,EAAA,iBAAqB,QAAA,YAAY,MAAK,CAAA;;IAEhD,mBAEO,QAFP,YAEO,gBADF,QAAA,eAAe,GAAA,CAAA;IAIZ,QAAA,YAAA,UAAA,GADR,mBAMO,QANP,YAMO,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAFL,mBAAsD,QAAA,EAAhD,OAAM,mCAAkC,GAAA,MAAA,EAAA,GAAA,gBAAQ,YAExD,EAAA,CAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;OAIF,mBAYM,OAZN,YAYM,CAXJ,YAI0B,MAAA,gBAAA,GAAA;IAHvB,MAAM,MAAA,oBAAA;IACP,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;0BAEd,YAI4B,MAAA,gBAAA,GAAA;IAHzB,MAAM,MAAA,eAAA;IACP,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;iCAKlB,YAIc,mCAAA;IAHX,gBAAA,QAAA;IACA,aAAA,QAAA;IACA,iBAAA,QAAA;IACA,UAAA,QAAA"}
+{"version":3,"file":"Environment.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconNotePencil, ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\n\nimport EnvironmentVariablesTable from '@/v2/features/environments/components/EnvironmentVariablesTable.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  environmentName,\n  environment,\n  eventBus,\n  collectionType,\n  isActive = false,\n} = defineProps<\n  {\n    environment: XScalarEnvironment\n    environmentName: string\n    eventBus: WorkspaceEventBus\n    isActive?: boolean\n  } & CollectionType\n>()\n\nconst emit = defineEmits<{\n  (e: 'edit'): void\n  (e: 'delete'): void\n}>()\n\nconst { translate } = useLocalization()\n</script>\n<template>\n  <div\n    class=\"group relative rounded-lg border transition-colors\"\n    :class=\"isActive ? 'border-c-accent bg-c-accent/5' : ''\">\n    <!-- Info -->\n    <div\n      class=\"flex justify-between rounded-t-lg px-1 py-1 text-sm\"\n      :class=\"isActive ? 'bg-c-accent/10' : 'bg-b-2'\">\n      <div class=\"flex items-center gap-1.5\">\n        <div class=\"flex h-6 w-6 items-center justify-center p-1\">\n          <span\n            class=\"h-2.5 w-2.5 rounded-full\"\n            :style=\"{ backgroundColor: environment.color }\"></span>\n        </div>\n        <span class=\"px-1 py-0.5 text-sm font-medium\">\n          {{ environmentName }}\n        </span>\n        <!-- Active badge -->\n        <span\n          v-if=\"isActive\"\n          class=\"bg-c-accent text-b-1 flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium\"\n          :title=\"\n            translate('apiClient.environment.thisIsTheActiveEnvironment')\n          \">\n          <span class=\"size-1.5 rounded-full bg-current\"></span\n          >{{ translate('apiClient.environment.active') }}</span\n        >\n      </div>\n\n      <!-- Actions -->\n      <div class=\"hidden flex-row items-center gap-1 group-hover:flex\">\n        <ScalarIconButton\n          :icon=\"ScalarIconNotePencil\"\n          :label=\"translate('apiClient.environment.editEnvironment')\"\n          size=\"sm\"\n          @click=\"emit('edit')\" />\n\n        <ScalarIconButton\n          :icon=\"ScalarIconTrash\"\n          :label=\"translate('apiClient.environment.deleteEnvironment')\"\n          size=\"sm\"\n          @click=\"emit('delete')\" />\n      </div>\n    </div>\n\n    <!-- Variables Table -->\n    <EnvironmentVariablesTable\n      :collectionType\n      :environment\n      :environmentName\n      :eventBus />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,OAAO;EAKb,MAAM,EAAE,cAAc,gBAAgB;;uBAGpC,mBAkDM,OAAA,EAjDJ,OAAK,eAAA,CAAC,sDACE,QAAA,WAAQ,kCAAA,EAAA,CAAA,EAAA,GAAA,CAEhB,mBAsCM,OAAA,EArCJ,OAAK,eAAA,CAAC,uDACE,QAAA,WAAQ,mBAAA,QAAA,CAAA,EAAA,GAAA,CAChB,mBAmBM,OAnBN,YAmBM;IAlBJ,mBAIM,OAJN,YAIM,CAHJ,mBAEyD,QAAA;KADvD,OAAM;KACL,OAAK,eAAA,EAAA,iBAAqB,QAAA,YAAY,MAAK,CAAA;;IAEhD,mBAEO,QAFP,YAEO,gBADF,QAAA,eAAe,GAAA,CAAA;IAIZ,QAAA,YAAA,UAAA,GADR,mBAQC,QAAA;;KANC,OAAM;KACL,OAAoB,MAAA,SAAA,CAAS,CAAA,kDAAA;kCAG9B,mBACC,QAAA,EADK,OAAM,mCAAkC,GAAA,MAAA,EAAA,IAAA,gBAAA,gBAC1C,MAAA,SAAA,CAAS,CAAA,8BAAA,CAAA,GAAA,CAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;OAKjB,mBAYM,OAZN,YAYM,CAXJ,YAI0B,MAAA,gBAAA,GAAA;IAHvB,MAAM,MAAA,oBAAA;IACN,OAAO,MAAA,SAAA,CAAS,CAAA,uCAAA;IACjB,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;mCAEd,YAI4B,MAAA,gBAAA,GAAA;IAHzB,MAAM,MAAA,eAAA;IACN,OAAO,MAAA,SAAA,CAAS,CAAA,yCAAA;IACjB,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;0CAKlB,YAIc,mCAAA;IAHX,gBAAA,QAAA;IACA,aAAA,QAAA;IACA,iBAAA,QAAA;IACA,UAAA,QAAA"}

package/dist/v2/features/environments/components/EnvironmentCreateModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentCreateModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"names":[],"mappings":"AAkJA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACvE,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2EAA2E,CAAA;AAUpH,KAAK,WAAW,GAAG;IACf,YAAY,EAAE,WAAW,CAAC,mBAAmB,CAAC,uBAAuB,CAAC,CAAC,CAAA;IACvE,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAA;IACtC,KAAK,EAAE,UAAU,CAAA;IACjB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GAAG,cAAc,CAAC;AAoNrB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"EnvironmentCreateModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"names":[],"mappings":"AA+JA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACvE,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2EAA2E,CAAA;AAWpH,KAAK,WAAW,GAAG;IACf,YAAY,EAAE,WAAW,CAAC,mBAAmB,CAAC,uBAAuB,CAAC,CAAC,CAAA;IACvE,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAA;IACtC,KAAK,EAAE,UAAU,CAAA;IACjB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GAAG,cAAc,CAAC;AAoOrB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/environments/components/EnvironmentCreateModal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentCreateModal.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  CommandActionForm,\n  CommandActionInput,\n} from '@/v2/features/command-palette'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst {\n  state,\n  eventBus,\n  collectionType,\n  environments,\n  selectedEnvironmentName,\n} = defineProps<\n  {\n    environments: NonNullable<XScalarEnvironments['x-scalar-environments']>\n    selectedEnvironmentName: string | null\n    state: ModalState\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Default color for new environments. */\nconst DEFAULT_COLOR = '#FFFFFF'\n\nconst name = ref('')\nconst selectedColor = ref(DEFAULT_COLOR)\n\n/** Ensure [re]set the form on open */\nwatch(\n  () => state.open,\n  (isOpen) => {\n    if (isOpen) {\n      const environment = environments[selectedEnvironmentName ?? '']\n\n      // We are editing so lets fill in the form with the existing data\n      if (selectedEnvironmentName && environment) {\n        name.value = selectedEnvironmentName\n        selectedColor.value = environment.color\n      }\n\n      // We are adding a new environment so lets clear the form\n      else {\n        name.value = ''\n        selectedColor.value = DEFAULT_COLOR\n      }\n    }\n  },\n)\n\n/**\n * Handle color selection from the color picker.\n * Updates the selected color for the new environment.\n */\nconst handleColorSelect = (color: string): void => {\n  selectedColor.value = color\n}\n\n/** Emits an event to create the environment with the provided name and color. */\nconst handleSubmit = (): void => {\n  // Editing an existing environment\n  if (selectedEnvironmentName) {\n    eventBus.emit('environment:upsert:environment', {\n      oldEnvironmentName: selectedEnvironmentName,\n      payload: {\n        color: selectedColor.value,\n      },\n      environmentName: name.value.trim(),\n      collectionType,\n    })\n  }\n  // Adding a new environment\n  else {\n    eventBus.emit('environment:upsert:environment', {\n      environmentName: name.value.trim(),\n      payload: {\n        color: selectedColor.value,\n      },\n      collectionType,\n    })\n  }\n\n  state.hide()\n}\n\n/** Check if the environment name is a duplicate */\nconst isDuplicateName = computed(() => {\n  if (selectedEnvironmentName) {\n    return (\n      name.value !== selectedEnvironmentName &&\n      Object.keys(environments).includes(name.value)\n    )\n  }\n\n  return Object.keys(environments).includes(name.value)\n})\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!name.trim() || isDuplicateName\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <!-- Color picker for environment -->\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          @select=\"handleColorSelect\" />\n\n        <!-- Environment name input, hidden when color selector is expanded -->\n        <CommandActionInput\n          v-model=\"name\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          placeholder=\"Environment name\" />\n      </div>\n\n      <!-- Error message -->\n      <div\n        v-if=\"isDuplicateName\"\n        class=\"text-red text-xs\">\n        This environment name is already in use.\n      </div>\n\n      <!-- Submit button -->\n      <template #submit>\n        {{ selectedEnvironmentName ? 'Update' : 'Add' }} Environment\n      </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":""}
+{"version":3,"file":"EnvironmentCreateModal.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  CommandActionForm,\n  CommandActionInput,\n} from '@/v2/features/command-palette'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst {\n  state,\n  eventBus,\n  collectionType,\n  environments,\n  selectedEnvironmentName,\n} = defineProps<\n  {\n    environments: NonNullable<XScalarEnvironments['x-scalar-environments']>\n    selectedEnvironmentName: string | null\n    state: ModalState\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\nconst { translate } = useLocalization()\n\n/** Default color for new environments. */\nconst DEFAULT_COLOR = '#FFFFFF'\n\nconst name = ref('')\nconst selectedColor = ref(DEFAULT_COLOR)\n\n/** Ensure [re]set the form on open */\nwatch(\n  () => state.open,\n  (isOpen) => {\n    if (isOpen) {\n      const environment = environments[selectedEnvironmentName ?? '']\n\n      // We are editing so lets fill in the form with the existing data\n      if (selectedEnvironmentName && environment) {\n        name.value = selectedEnvironmentName\n        selectedColor.value = environment.color\n      }\n\n      // We are adding a new environment so lets clear the form\n      else {\n        name.value = ''\n        selectedColor.value = DEFAULT_COLOR\n      }\n    }\n  },\n)\n\n/**\n * Handle color selection from the color picker.\n * Updates the selected color for the new environment.\n */\nconst handleColorSelect = (color: string): void => {\n  selectedColor.value = color\n}\n\n/** Emits an event to create the environment with the provided name and color. */\nconst handleSubmit = (): void => {\n  // Editing an existing environment\n  if (selectedEnvironmentName) {\n    eventBus.emit('environment:upsert:environment', {\n      oldEnvironmentName: selectedEnvironmentName,\n      payload: {\n        color: selectedColor.value,\n      },\n      environmentName: name.value.trim(),\n      collectionType,\n    })\n  }\n  // Adding a new environment\n  else {\n    eventBus.emit('environment:upsert:environment', {\n      environmentName: name.value.trim(),\n      payload: {\n        color: selectedColor.value,\n      },\n      collectionType,\n    })\n  }\n\n  state.hide()\n}\n\n/** Check if the environment name is a duplicate */\nconst isDuplicateName = computed(() => {\n  if (selectedEnvironmentName) {\n    return (\n      name.value !== selectedEnvironmentName &&\n      Object.keys(environments).includes(name.value)\n    )\n  }\n\n  return Object.keys(environments).includes(name.value)\n})\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!name.trim() || isDuplicateName\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <!-- Color picker for environment -->\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          @select=\"handleColorSelect\" />\n\n        <!-- Environment name input, hidden when color selector is expanded -->\n        <CommandActionInput\n          v-model=\"name\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          :placeholder=\"\n            translate('apiClient.environmentCreateModal.environmentName')\n          \" />\n      </div>\n\n      <!-- Error message -->\n      <div\n        v-if=\"isDuplicateName\"\n        class=\"text-red text-xs\">\n        {{\n          translate(\n            'apiClient.environmentCreateModal.thisEnvironmentNameIsAlreadyInUse',\n          )\n        }}\n      </div>\n\n      <!-- Submit button -->\n      <template #submit>\n        {{\n          selectedEnvironmentName\n            ? translate('apiClient.environmentCreateModal.update')\n            : translate('apiClient.environmentCreateModal.add')\n        }}\n      </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":""}

package/dist/v2/features/environments/components/EnvironmentCreateModal.vue.script.js

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../localization/index.js";
 import CommandActionForm_default from "../../command-palette/components/CommandActionForm.vue.js";
 import CommandActionInput_default from "../../command-palette/components/CommandActionInput.vue.js";
 import EnvironmentColors_default from "./EnvironmentColors.vue.js";
@@ -20,6 +21,7 @@ var EnvironmentCreateModal_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		collectionType: {}
 	},
 	setup(__props) {
+		const { translate } = useLocalization();
 		/** Default color for new environments. */
 		const name = ref("");
 		const selectedColor = ref(DEFAULT_COLOR);
@@ -73,7 +75,7 @@ var EnvironmentCreateModal_vue_vue_type_script_setup_true_lang_default = /*@__PU
 					disabled: !name.value.trim() || isDuplicateName.value,
 					onSubmit: handleSubmit
 				}, {
-					submit: withCtx(() => [createTextVNode(toDisplayString(__props.selectedEnvironmentName ? "Update" : "Add") + " Environment ", 1)]),
+					submit: withCtx(() => [createTextVNode(toDisplayString(__props.selectedEnvironmentName ? unref(translate)("apiClient.environmentCreateModal.update") : unref(translate)("apiClient.environmentCreateModal.add")), 1)]),
 					default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(EnvironmentColors_default, {
 						activeColor: selectedColor.value,
 						class: "peer",
@@ -82,8 +84,8 @@ var EnvironmentCreateModal_vue_vue_type_script_setup_true_lang_default = /*@__PU
 						modelValue: name.value,
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => name.value = $event),
 						class: "-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden",
-						placeholder: "Environment name"
-					}, null, 8, ["modelValue"])]), isDuplicateName.value ? (openBlock(), createElementBlock("div", _hoisted_2, " This environment name is already in use. ")) : createCommentVNode("", true)]),
+						placeholder: unref(translate)("apiClient.environmentCreateModal.environmentName")
+					}, null, 8, ["modelValue", "placeholder"])]), isDuplicateName.value ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(translate)("apiClient.environmentCreateModal.thisEnvironmentNameIsAlreadyInUse")), 1)) : createCommentVNode("", true)]),
 					_: 1
 				}, 8, ["disabled"])]),
 				_: 1

package/dist/v2/features/environments/components/EnvironmentCreateModal.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentCreateModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  CommandActionForm,\n  CommandActionInput,\n} from '@/v2/features/command-palette'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst {\n  state,\n  eventBus,\n  collectionType,\n  environments,\n  selectedEnvironmentName,\n} = defineProps<\n  {\n    environments: NonNullable<XScalarEnvironments['x-scalar-environments']>\n    selectedEnvironmentName: string | null\n    state: ModalState\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Default color for new environments. */\nconst DEFAULT_COLOR = '#FFFFFF'\n\nconst name = ref('')\nconst selectedColor = ref(DEFAULT_COLOR)\n\n/** Ensure [re]set the form on open */\nwatch(\n  () => state.open,\n  (isOpen) => {\n    if (isOpen) {\n      const environment = environments[selectedEnvironmentName ?? '']\n\n      // We are editing so lets fill in the form with the existing data\n      if (selectedEnvironmentName && environment) {\n        name.value = selectedEnvironmentName\n        selectedColor.value = environment.color\n      }\n\n      // We are adding a new environment so lets clear the form\n      else {\n        name.value = ''\n        selectedColor.value = DEFAULT_COLOR\n      }\n    }\n  },\n)\n\n/**\n * Handle color selection from the color picker.\n * Updates the selected color for the new environment.\n */\nconst handleColorSelect = (color: string): void => {\n  selectedColor.value = color\n}\n\n/** Emits an event to create the environment with the provided name and color. */\nconst handleSubmit = (): void => {\n  // Editing an existing environment\n  if (selectedEnvironmentName) {\n    eventBus.emit('environment:upsert:environment', {\n      oldEnvironmentName: selectedEnvironmentName,\n      payload: {\n        color: selectedColor.value,\n      },\n      environmentName: name.value.trim(),\n      collectionType,\n    })\n  }\n  // Adding a new environment\n  else {\n    eventBus.emit('environment:upsert:environment', {\n      environmentName: name.value.trim(),\n      payload: {\n        color: selectedColor.value,\n      },\n      collectionType,\n    })\n  }\n\n  state.hide()\n}\n\n/** Check if the environment name is a duplicate */\nconst isDuplicateName = computed(() => {\n  if (selectedEnvironmentName) {\n    return (\n      name.value !== selectedEnvironmentName &&\n      Object.keys(environments).includes(name.value)\n    )\n  }\n\n  return Object.keys(environments).includes(name.value)\n})\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!name.trim() || isDuplicateName\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <!-- Color picker for environment -->\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          @select=\"handleColorSelect\" />\n\n        <!-- Environment name input, hidden when color selector is expanded -->\n        <CommandActionInput\n          v-model=\"name\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          placeholder=\"Environment name\" />\n      </div>\n\n      <!-- Error message -->\n      <div\n        v-if=\"isDuplicateName\"\n        class=\"text-red text-xs\">\n        This environment name is already in use.\n      </div>\n\n      <!-- Submit button -->\n      <template #submit>\n        {{ selectedEnvironmentName ? 'Update' : 'Add' }} Environment\n      </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;AAgCA,IAAM,gBAAgB;;;;;;;;;;;;EAEtB,MAAM,OAAO,IAAI,EAAE;EACnB,MAAM,gBAAgB,IAAI,aAAa;;EAGvC,YACQ,QAAA,MAAM,OACX,WAAW;GACV,IAAI,QAAQ;IACV,MAAM,cAAc,QAAA,aAAa,QAAA,2BAA2B;IAG5D,IAAI,QAAA,2BAA2B,aAAa;KAC1C,KAAK,QAAQ,QAAA;KACb,cAAc,QAAQ,YAAY;IACpC,OAGK;KACH,KAAK,QAAQ;KACb,cAAc,QAAQ;IACxB;GACF;EACF,CACF;;;;;EAMA,MAAM,qBAAqB,UAAwB;GACjD,cAAc,QAAQ;EACxB;;EAGA,MAAM,qBAA2B;GAE/B,IAAI,QAAA,yBACF,QAAA,SAAS,KAAK,kCAAkC;IAC9C,oBAAoB,QAAA;IACpB,SAAS,EACP,OAAO,cAAc,MACvB;IACA,iBAAiB,KAAK,MAAM,KAAK;IACjC,gBAAa,QAAA;GACf,CAAC;QAID,QAAA,SAAS,KAAK,kCAAkC;IAC9C,iBAAiB,KAAK,MAAM,KAAK;IACjC,SAAS,EACP,OAAO,cAAc,MACvB;IACA,gBAAa,QAAA;GACf,CAAC;GAGH,QAAA,MAAM,KAAK;EACb;;EAGA,MAAM,kBAAkB,eAAe;GACrC,IAAI,QAAA,yBACF,OACE,KAAK,UAAU,QAAA,2BACf,OAAO,KAAK,QAAA,YAAY,CAAC,CAAC,SAAS,KAAK,KAAK;GAIjD,OAAO,OAAO,KAAK,QAAA,YAAY,CAAC,CAAC,SAAS,KAAK,KAAK;EACtD,CAAC;;uBAIC,YAiCc,MAAA,WAAA,GAAA;IAhCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;;2BA6BY,CA5BpB,YA4BoB,MAAA,yBAAA,GAAA;KA3BjB,UAAQ,CAAG,KAAA,MAAK,KAAI,KAAM,gBAAA;KAC1B,UAAQ;;KAuBE,QAAM,cACiC,CAAA,gBAAA,gBAA7C,QAAA,0BAAuB,WAAA,KAAA,IAAsB,iBAClD,CAAA,CAAA,CAAA;4BAZM,CAZN,mBAYM,OAZN,YAYM,CAVJ,YAGgC,2BAAA;MAF7B,aAAa,cAAA;MACd,OAAM;MACL,UAAQ;mCAGX,YAGmC,MAAA,0BAAA,GAAA;kBAFxB,KAAA;wEAAI,QAAA;MACb,OAAM;MACN,aAAY;oCAKR,gBAAA,SAAA,UAAA,GADR,mBAIM,OAJN,YAE2B,4CAE3B,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"EnvironmentCreateModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  CommandActionForm,\n  CommandActionInput,\n} from '@/v2/features/command-palette'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst {\n  state,\n  eventBus,\n  collectionType,\n  environments,\n  selectedEnvironmentName,\n} = defineProps<\n  {\n    environments: NonNullable<XScalarEnvironments['x-scalar-environments']>\n    selectedEnvironmentName: string | null\n    state: ModalState\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\nconst { translate } = useLocalization()\n\n/** Default color for new environments. */\nconst DEFAULT_COLOR = '#FFFFFF'\n\nconst name = ref('')\nconst selectedColor = ref(DEFAULT_COLOR)\n\n/** Ensure [re]set the form on open */\nwatch(\n  () => state.open,\n  (isOpen) => {\n    if (isOpen) {\n      const environment = environments[selectedEnvironmentName ?? '']\n\n      // We are editing so lets fill in the form with the existing data\n      if (selectedEnvironmentName && environment) {\n        name.value = selectedEnvironmentName\n        selectedColor.value = environment.color\n      }\n\n      // We are adding a new environment so lets clear the form\n      else {\n        name.value = ''\n        selectedColor.value = DEFAULT_COLOR\n      }\n    }\n  },\n)\n\n/**\n * Handle color selection from the color picker.\n * Updates the selected color for the new environment.\n */\nconst handleColorSelect = (color: string): void => {\n  selectedColor.value = color\n}\n\n/** Emits an event to create the environment with the provided name and color. */\nconst handleSubmit = (): void => {\n  // Editing an existing environment\n  if (selectedEnvironmentName) {\n    eventBus.emit('environment:upsert:environment', {\n      oldEnvironmentName: selectedEnvironmentName,\n      payload: {\n        color: selectedColor.value,\n      },\n      environmentName: name.value.trim(),\n      collectionType,\n    })\n  }\n  // Adding a new environment\n  else {\n    eventBus.emit('environment:upsert:environment', {\n      environmentName: name.value.trim(),\n      payload: {\n        color: selectedColor.value,\n      },\n      collectionType,\n    })\n  }\n\n  state.hide()\n}\n\n/** Check if the environment name is a duplicate */\nconst isDuplicateName = computed(() => {\n  if (selectedEnvironmentName) {\n    return (\n      name.value !== selectedEnvironmentName &&\n      Object.keys(environments).includes(name.value)\n    )\n  }\n\n  return Object.keys(environments).includes(name.value)\n})\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!name.trim() || isDuplicateName\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <!-- Color picker for environment -->\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          @select=\"handleColorSelect\" />\n\n        <!-- Environment name input, hidden when color selector is expanded -->\n        <CommandActionInput\n          v-model=\"name\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          :placeholder=\"\n            translate('apiClient.environmentCreateModal.environmentName')\n          \" />\n      </div>\n\n      <!-- Error message -->\n      <div\n        v-if=\"isDuplicateName\"\n        class=\"text-red text-xs\">\n        {{\n          translate(\n            'apiClient.environmentCreateModal.thisEnvironmentNameIsAlreadyInUse',\n          )\n        }}\n      </div>\n\n      <!-- Submit button -->\n      <template #submit>\n        {{\n          selectedEnvironmentName\n            ? translate('apiClient.environmentCreateModal.update')\n            : translate('apiClient.environmentCreateModal.add')\n        }}\n      </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;AAmCA,IAAM,gBAAgB;;;;;;;;;;;EAHtB,MAAM,EAAE,cAAc,gBAAgB;;EAKtC,MAAM,OAAO,IAAI,EAAE;EACnB,MAAM,gBAAgB,IAAI,aAAa;;EAGvC,YACQ,QAAA,MAAM,OACX,WAAW;GACV,IAAI,QAAQ;IACV,MAAM,cAAc,QAAA,aAAa,QAAA,2BAA2B;IAG5D,IAAI,QAAA,2BAA2B,aAAa;KAC1C,KAAK,QAAQ,QAAA;KACb,cAAc,QAAQ,YAAY;IACpC,OAGK;KACH,KAAK,QAAQ;KACb,cAAc,QAAQ;IACxB;GACF;EACF,CACF;;;;;EAMA,MAAM,qBAAqB,UAAwB;GACjD,cAAc,QAAQ;EACxB;;EAGA,MAAM,qBAA2B;GAE/B,IAAI,QAAA,yBACF,QAAA,SAAS,KAAK,kCAAkC;IAC9C,oBAAoB,QAAA;IACpB,SAAS,EACP,OAAO,cAAc,MACvB;IACA,iBAAiB,KAAK,MAAM,KAAK;IACjC,gBAAa,QAAA;GACf,CAAC;QAID,QAAA,SAAS,KAAK,kCAAkC;IAC9C,iBAAiB,KAAK,MAAM,KAAK;IACjC,SAAS,EACP,OAAO,cAAc,MACvB;IACA,gBAAa,QAAA;GACf,CAAC;GAGH,QAAA,MAAM,KAAK;EACb;;EAGA,MAAM,kBAAkB,eAAe;GACrC,IAAI,QAAA,yBACF,OACE,KAAK,UAAU,QAAA,2BACf,OAAO,KAAK,QAAA,YAAY,CAAC,CAAC,SAAS,KAAK,KAAK;GAIjD,OAAO,OAAO,KAAK,QAAA,YAAY,CAAC,CAAC,SAAS,KAAK,KAAK;EACtD,CAAC;;uBAIC,YA2Cc,MAAA,WAAA,GAAA;IA1CZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;;2BAuCY,CAtCpB,YAsCoB,MAAA,yBAAA,GAAA;KArCjB,UAAQ,CAAG,KAAA,MAAK,KAAI,KAAM,gBAAA;KAC1B,UAAQ;;KA6BE,QAAM,cAKb,CAAA,gBAAA,gBAHA,QAAA,0BAAsC,MAAA,SAAA,CAAS,CAAA,yCAAA,IAA0D,MAAA,SAAA,CAAS,CAAA,sCAAA,CAAA,GAAA,CAAA,CAAA,CAAA;4BAhBhH,CAdN,mBAcM,OAdN,YAcM,CAZJ,YAGgC,2BAAA;MAF7B,aAAa,cAAA;MACd,OAAM;MACL,UAAQ;mCAGX,YAKM,MAAA,0BAAA,GAAA;kBAJK,KAAA;wEAAI,QAAA;MACb,OAAM;MACL,aAA0B,MAAA,SAAA,CAAS,CAAA,kDAAA;mDAOhC,gBAAA,SAAA,UAAA,GADR,mBAQM,OARN,YAQM,gBAJF,MAAA,SAAA,CAAS,CAAA,oEAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/v2/features/environments/components/EnvironmentDeleteModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentDeleteModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"names":[],"mappings":"AAuDA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAEvE,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,UAAU,CAAA;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB,CAAC;AA8HF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"EnvironmentDeleteModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"names":[],"mappings":"AA4DA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAIvE,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,UAAU,CAAA;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB,CAAC;AAwIF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/environments/components/EnvironmentDeleteModal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentDeleteModal.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\n\nconst { state, name = 'unknown' } = defineProps<{\n  state: ModalState\n  name: string | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (event: 'submit'): void\n}>()\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg flex flex-col gap-4\"\n    size=\"xxs\"\n    :state=\"state\"\n    :title=\"`Delete ${name}`\">\n    <p class=\"text-c-2 text-sm leading-normal text-pretty\">\n      Are you sure you want to delete this environment? This action cannot be\n      undone.\n    </p>\n    <div class=\"flex justify-between\">\n      <ScalarButton\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"\n          () => {\n            emit('cancel')\n            state.hide()\n          }\n        \">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        size=\"sm\"\n        variant=\"danger\"\n        @click=\"\n          () => {\n            emit('submit')\n            state.hide()\n          }\n        \">\n        Delete Environment\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":""}
+{"version":3,"file":"EnvironmentDeleteModal.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\n\nimport { useLocalization } from '@/v2/features/localization'\n\nconst { state, name = 'unknown' } = defineProps<{\n  state: ModalState\n  name: string | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (event: 'submit'): void\n}>()\n\nconst { translate } = useLocalization()\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg flex flex-col gap-4\"\n    size=\"xxs\"\n    :state=\"state\"\n    :title=\"\n      translate('apiClient.environmentDeleteModal.title', { name: name ?? '' })\n    \">\n    <p class=\"text-c-2 text-sm leading-normal text-pretty\">\n      {{ translate('apiClient.environmentDeleteModal.deleteConfirmation') }}\n    </p>\n    <div class=\"flex justify-between\">\n      <ScalarButton\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"\n          () => {\n            emit('cancel')\n            state.hide()\n          }\n        \">\n        {{ translate('apiClient.environmentDeleteModal.cancel') }}\n      </ScalarButton>\n      <ScalarButton\n        size=\"sm\"\n        variant=\"danger\"\n        @click=\"\n          () => {\n            emit('submit')\n            state.hide()\n          }\n        \">\n        {{ translate('apiClient.environmentDeleteModal.deleteEnvironment') }}\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":""}

package/dist/v2/features/environments/components/EnvironmentDeleteModal.vue.script.js

@@ -1,8 +1,10 @@
-import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
+import { useLocalization } from "../../localization/index.js";
+import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { ScalarButton } from "@scalar/components/button";
 import { ScalarModal } from "@scalar/components/modal";
 //#region src/v2/features/environments/components/EnvironmentDeleteModal.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "flex justify-between" };
+var _hoisted_1 = { class: "text-c-2 text-sm leading-normal text-pretty" };
+var _hoisted_2 = { class: "flex justify-between" };
 var EnvironmentDeleteModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "EnvironmentDeleteModal",
 	props: {
@@ -12,14 +14,15 @@ var EnvironmentDeleteModal_vue_vue_type_script_setup_true_lang_default = /*@__PU
 	emits: ["cancel", "submit"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const { translate } = useLocalization();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ScalarModal), {
 				bodyClass: "border-t-0 rounded-t-lg flex flex-col gap-4",
 				size: "xxs",
 				state: __props.state,
-				title: `Delete ${__props.name}`
+				title: unref(translate)("apiClient.environmentDeleteModal.title", { name: __props.name ?? "" })
 			}, {
-				default: withCtx(() => [_cache[4] || (_cache[4] = createElementVNode("p", { class: "text-c-2 text-sm leading-normal text-pretty" }, " Are you sure you want to delete this environment? This action cannot be undone. ", -1)), createElementVNode("div", _hoisted_1, [createVNode(unref(ScalarButton), {
+				default: withCtx(() => [createElementVNode("p", _hoisted_1, toDisplayString(unref(translate)("apiClient.environmentDeleteModal.deleteConfirmation")), 1), createElementVNode("div", _hoisted_2, [createVNode(unref(ScalarButton), {
 					size: "sm",
 					variant: "outlined",
 					onClick: _cache[0] || (_cache[0] = () => {
@@ -27,7 +30,7 @@ var EnvironmentDeleteModal_vue_vue_type_script_setup_true_lang_default = /*@__PU
 						__props.state.hide();
 					})
 				}, {
-					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Cancel ", -1)])]),
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.environmentDeleteModal.cancel")), 1)]),
 					_: 1
 				}), createVNode(unref(ScalarButton), {
 					size: "sm",
@@ -37,7 +40,7 @@ var EnvironmentDeleteModal_vue_vue_type_script_setup_true_lang_default = /*@__PU
 						__props.state.hide();
 					})
 				}, {
-					default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Delete Environment ", -1)])]),
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.environmentDeleteModal.deleteEnvironment")), 1)]),
 					_: 1
 				})])]),
 				_: 1

package/dist/v2/features/environments/components/EnvironmentDeleteModal.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentDeleteModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\n\nconst { state, name = 'unknown' } = defineProps<{\n  state: ModalState\n  name: string | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (event: 'submit'): void\n}>()\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg flex flex-col gap-4\"\n    size=\"xxs\"\n    :state=\"state\"\n    :title=\"`Delete ${name}`\">\n    <p class=\"text-c-2 text-sm leading-normal text-pretty\">\n      Are you sure you want to delete this environment? This action cannot be\n      undone.\n    </p>\n    <div class=\"flex justify-between\">\n      <ScalarButton\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"\n          () => {\n            emit('cancel')\n            state.hide()\n          }\n        \">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        size=\"sm\"\n        variant=\"danger\"\n        @click=\"\n          () => {\n            emit('submit')\n            state.hide()\n          }\n        \">\n        Delete Environment\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;EASA,MAAM,OAAO;;uBAOX,YAiCc,MAAA,WAAA,GAAA;IAhCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;IACP,OAAK,UAAY,QAAA;;2BAId,CAAA,OAAA,OAAA,OAAA,KAHJ,mBAGI,KAAA,EAHD,OAAM,8CAA6C,GAAC,qFAGvD,EAAA,IACA,mBAuBM,OAvBN,YAuBM,CAtBJ,YAUe,MAAA,YAAA,GAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;MAAiC,KAAI,QAAA;MAAuB,QAAA,MAAM,KAAI;;;4BAO9E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,YAEJ,EAAA,CAAA,EAAA,CAAA;;QACA,YAUe,MAAA,YAAA,GAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;MAAiC,KAAI,QAAA;MAAuB,QAAA,MAAM,KAAI;;;4BAO9E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,wBAEJ,EAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"EnvironmentDeleteModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\n\nimport { useLocalization } from '@/v2/features/localization'\n\nconst { state, name = 'unknown' } = defineProps<{\n  state: ModalState\n  name: string | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (event: 'submit'): void\n}>()\n\nconst { translate } = useLocalization()\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg flex flex-col gap-4\"\n    size=\"xxs\"\n    :state=\"state\"\n    :title=\"\n      translate('apiClient.environmentDeleteModal.title', { name: name ?? '' })\n    \">\n    <p class=\"text-c-2 text-sm leading-normal text-pretty\">\n      {{ translate('apiClient.environmentDeleteModal.deleteConfirmation') }}\n    </p>\n    <div class=\"flex justify-between\">\n      <ScalarButton\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"\n          () => {\n            emit('cancel')\n            state.hide()\n          }\n        \">\n        {{ translate('apiClient.environmentDeleteModal.cancel') }}\n      </ScalarButton>\n      <ScalarButton\n        size=\"sm\"\n        variant=\"danger\"\n        @click=\"\n          () => {\n            emit('submit')\n            state.hide()\n          }\n        \">\n        {{ translate('apiClient.environmentDeleteModal.deleteEnvironment') }}\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAWA,MAAM,OAAO;EAKb,MAAM,EAAE,cAAc,gBAAgB;;uBAIpC,YAkCc,MAAA,WAAA,GAAA;IAjCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;IACP,OAAc,MAAA,SAAA,CAAS,CAAA,0CAAA,EAAA,MAAmD,QAAA,QAAI,GAAA,CAAA;;2BAK3E,CAFJ,mBAEI,KAFJ,YAEI,gBADC,MAAA,SAAA,CAAS,CAAA,qDAAA,CAAA,GAAA,CAAA,GAEd,mBAuBM,OAvBN,YAuBM,CAtBJ,YAUe,MAAA,YAAA,GAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;MAAiC,KAAI,QAAA;MAAuB,QAAA,MAAM,KAAI;;;4BAMlB,CAAA,gBAAA,gBAAvD,MAAA,SAAA,CAAS,CAAA,yCAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;QAEd,YAUe,MAAA,YAAA,GAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;MAAiC,KAAI,QAAA;MAAuB,QAAA,MAAM,KAAI;;;4BAMP,CAAA,gBAAA,gBAAlE,MAAA,SAAA,CAAS,CAAA,oDAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"names":[],"mappings":"AAmTA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AASnH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC,gBAAgB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,iFAAiF;IACjF,oBAAoB,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC7D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC;AAibF,QAAA,MAAM,YAAY;gCA7QiB,IAAI,GAAG,MAAM;;;;;;;;;;;kFAiR9C,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"EnvironmentVariablesDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"names":[],"mappings":"AA4TA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAOnH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC,gBAAgB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,iFAAiF;IACjF,oBAAoB,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC7D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC;AA+bF,QAAA,MAAM,YAAY;gCArRiB,IAAI,GAAG,MAAM;;;;;;;;;;;kFAyR9C,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesDropdown.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarTeleport } from '@scalar/components/teleport'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, watch, type CSSProperties } from 'vue'\n\ntype DropdownRow =\n  | { kind: 'env'; key: string; secondary: string }\n  | { kind: 'context'; key: string; secondary: string }\n\nconst {\n  query,\n  environment,\n  dropdownPosition,\n  contextFunctionItems = [],\n  listboxId,\n} = defineProps<{\n  query: string\n  environment?: XScalarEnvironment\n  dropdownPosition?: { left: number; top: number }\n  /** Runtime placeholders such as `{{$guid}}`, shown with environment variables */\n  contextFunctionItems?: { key: string; description: string }[]\n  /**\n   * Id for the `role=\"listbox\"` element. When set, each option also receives a\n   * stable id so the owning combobox input can reference the active option via\n   * `aria-activedescendant` (W3C combobox pattern).\n   */\n  listboxId?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n  (e: 'redirect'): void\n  /**\n   * Fired when the user dismisses the panel by clicking outside. The owning\n   * combobox needs this to clear its `aria-expanded`/`aria-controls` state,\n   * which would otherwise keep pointing at a listbox that is no longer mounted.\n   */\n  (e: 'close'): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n  emit('redirect')\n  isOpen.value = false\n  // The panel is gone, so tell the combobox to drop its aria-expanded /\n  // aria-controls — otherwise they keep pointing at a dismissed listbox.\n  emit('close')\n}\n\n/** Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n  (environment?.variables ?? []).map((v) => ({\n    key: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n  contextFunctionItems.map((item) => ({\n    kind: 'context',\n    key: item.key,\n    secondary: item.description,\n  })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n  normalizedVariables.value\n    .filter(({ key, value }) => key !== '' || value !== '')\n    .map(({ key, value }) => ({\n      kind: 'env' as const,\n      key,\n      secondary: value,\n    })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n  envRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n  contextRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst fuseEnv = computed(\n  () =>\n    new Fuse(envFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst fuseContext = computed(\n  () =>\n    new Fuse(contextFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n  const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n  return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n    const item = byKey.get(key)\n    return item\n      ? [\n          {\n            kind: 'context' as const,\n            key: item.key,\n            secondary: item.description,\n          },\n        ]\n      : []\n  })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n  if (!query.trim()) {\n    const envSlice = envRows.value.slice(-4)\n    return [...envSlice, ...popularContextRows.value]\n  }\n\n  const q = query.trim()\n  const envMatches = fuseEnv.value\n    .search(q, { limit: DROPDOWN_LIMIT })\n    .map((res) => {\n      const { kind, key, secondary } = res.item\n      return { kind, key, secondary }\n    })\n\n  const remaining = DROPDOWN_LIMIT - envMatches.length\n  const contextMatches =\n    remaining > 0\n      ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n          const { kind, key, secondary } = res.item\n          return { kind, key, secondary }\n        })\n      : []\n\n  return [...envMatches, ...contextMatches]\n})\n\nconst optionId = (index: number): string | undefined =>\n  listboxId ? `${listboxId}-option-${index}` : undefined\n\n/**\n * Id of the currently highlighted option, for the combobox's\n * `aria-activedescendant`. Undefined when there is no list to point at.\n */\nconst activeOptionId = computed((): string | undefined =>\n  filteredVariables.value.length\n    ? optionId(selectedVariableIndex.value)\n    : undefined,\n)\n\nconst selectVariable = (variableKey: string): void => {\n  emit('select', variableKey)\n}\n\n// Narrowing the query shrinks the list; keep the highlight in range so both the\n// visible selection and `aria-activedescendant` never reference a dropped option.\nwatch(\n  () => filteredVariables.value.length,\n  (length) => {\n    if (selectedVariableIndex.value > length - 1) {\n      selectedVariableIndex.value = Math.max(0, length - 1)\n    }\n  },\n)\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n  activeOptionId,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n    emit('close')\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\"\n      @mousedown.prevent>\n      <!--\n        Always rendered (even with no matches) so the combobox's `aria-controls`\n        always resolves to a real listbox; an empty list simply has no options.\n      -->\n      <ul\n        :id=\"listboxId\"\n        aria-label=\"Variable suggestions\"\n        class=\"gap-1/2 flex flex-col\"\n        role=\"listbox\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"`${item.kind}-${item.key}`\">\n          <li\n            :id=\"optionId(index)\"\n            :aria-selected=\"index === selectedVariableIndex\"\n            class=\"font-code text-xxs hover:bg-b-3 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-3': index === selectedVariableIndex }\"\n            role=\"option\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"item.kind === 'env'\"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: environment?.color,\n                }\" />\n              <span\n                v-else\n                class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n                fn\n              </span>\n              {{ item.key }}\n            </div>\n            <span\n              class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.secondary }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-if=\"!filteredVariables.length\"\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-3 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />\n        Add Variable\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":""}
+{"version":3,"file":"EnvironmentVariablesDropdown.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarTeleport } from '@scalar/components/teleport'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, watch, type CSSProperties } from 'vue'\n\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  query,\n  environment,\n  dropdownPosition,\n  contextFunctionItems = [],\n  listboxId,\n} = defineProps<{\n  query: string\n  environment?: XScalarEnvironment\n  dropdownPosition?: { left: number; top: number }\n  /** Runtime placeholders such as `{{$guid}}`, shown with environment variables */\n  contextFunctionItems?: { key: string; description: string }[]\n  /**\n   * Id for the `role=\"listbox\"` element. When set, each option also receives a\n   * stable id so the owning combobox input can reference the active option via\n   * `aria-activedescendant` (W3C combobox pattern).\n   */\n  listboxId?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n  (e: 'redirect'): void\n  /**\n   * Fired when the user dismisses the panel by clicking outside. The owning\n   * combobox needs this to clear its `aria-expanded`/`aria-controls` state,\n   * which would otherwise keep pointing at a listbox that is no longer mounted.\n   */\n  (e: 'close'): void\n}>()\n\nconst { translate } = useLocalization()\n\ntype DropdownRow =\n  | { kind: 'env'; key: string; secondary: string }\n  | { kind: 'context'; key: string; secondary: string }\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n  emit('redirect')\n  isOpen.value = false\n  // The panel is gone, so tell the combobox to drop its aria-expanded /\n  // aria-controls — otherwise they keep pointing at a dismissed listbox.\n  emit('close')\n}\n\n/** Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n  (environment?.variables ?? []).map((v) => ({\n    key: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n  contextFunctionItems.map((item) => ({\n    kind: 'context',\n    key: item.key,\n    secondary: item.description,\n  })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n  normalizedVariables.value\n    .filter(({ key, value }) => key !== '' || value !== '')\n    .map(({ key, value }) => ({\n      kind: 'env' as const,\n      key,\n      secondary: value,\n    })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n  envRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n  contextRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst fuseEnv = computed(\n  () =>\n    new Fuse(envFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst fuseContext = computed(\n  () =>\n    new Fuse(contextFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n  const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n  return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n    const item = byKey.get(key)\n    return item\n      ? [\n          {\n            kind: 'context' as const,\n            key: item.key,\n            secondary: item.description,\n          },\n        ]\n      : []\n  })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n  if (!query.trim()) {\n    const envSlice = envRows.value.slice(-4)\n    return [...envSlice, ...popularContextRows.value]\n  }\n\n  const q = query.trim()\n  const envMatches = fuseEnv.value\n    .search(q, { limit: DROPDOWN_LIMIT })\n    .map((res) => {\n      const { kind, key, secondary } = res.item\n      return { kind, key, secondary }\n    })\n\n  const remaining = DROPDOWN_LIMIT - envMatches.length\n  const contextMatches =\n    remaining > 0\n      ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n          const { kind, key, secondary } = res.item\n          return { kind, key, secondary }\n        })\n      : []\n\n  return [...envMatches, ...contextMatches]\n})\n\nconst optionId = (index: number): string | undefined =>\n  listboxId ? `${listboxId}-option-${index}` : undefined\n\n/**\n * Id of the currently highlighted option, for the combobox's\n * `aria-activedescendant`. Undefined when there is no list to point at.\n */\nconst activeOptionId = computed((): string | undefined =>\n  filteredVariables.value.length\n    ? optionId(selectedVariableIndex.value)\n    : undefined,\n)\n\nconst selectVariable = (variableKey: string): void => {\n  emit('select', variableKey)\n}\n\n// Narrowing the query shrinks the list; keep the highlight in range so both the\n// visible selection and `aria-activedescendant` never reference a dropped option.\nwatch(\n  () => filteredVariables.value.length,\n  (length) => {\n    if (selectedVariableIndex.value > length - 1) {\n      selectedVariableIndex.value = Math.max(0, length - 1)\n    }\n  },\n)\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n  activeOptionId,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n    emit('close')\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\"\n      @mousedown.prevent>\n      <!--\n        Always rendered (even with no matches) so the combobox's `aria-controls`\n        always resolves to a real listbox; an empty list simply has no options.\n      -->\n      <ul\n        :id=\"listboxId\"\n        :aria-label=\"\n          translate(\n            'apiClient.environmentVariablesDropdown.variableSuggestions',\n          )\n        \"\n        class=\"gap-1/2 flex flex-col\"\n        role=\"listbox\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"`${item.kind}-${item.key}`\">\n          <li\n            :id=\"optionId(index)\"\n            :aria-selected=\"index === selectedVariableIndex\"\n            class=\"font-code text-xxs hover:bg-b-3 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-3': index === selectedVariableIndex }\"\n            role=\"option\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"item.kind === 'env'\"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: environment?.color,\n                }\" />\n              <span\n                v-else\n                class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n                fn\n              </span>\n              {{ item.key }}\n            </div>\n            <span\n              class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.secondary }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-if=\"!filteredVariables.length\"\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-3 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />{{\n          translate('apiClient.environmentVariablesDropdown.addVariable')\n        }}\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":""}

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.script.js

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../localization/index.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
 import { ScalarButton } from "@scalar/components/button";
 import { ScalarIconPlus } from "@scalar/icons";
@@ -6,7 +7,7 @@ import { ScalarTeleport } from "@scalar/components/teleport";
 import { onClickOutside } from "@vueuse/core";
 import Fuse from "fuse.js";
 //#region src/v2/features/environments/components/EnvironmentVariablesDropdown.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["id"];
+var _hoisted_1 = ["id", "aria-label"];
 var _hoisted_2 = [
 	"id",
 	"aria-selected",
@@ -35,6 +36,7 @@ var EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default = /
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
+		const { translate } = useLocalization();
 		const isOpen = ref(true);
 		const dropdownRef = ref(null);
 		const selectedVariableIndex = ref(0);
@@ -163,7 +165,7 @@ var EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default = /
 				}, [
 					createElementVNode("ul", {
 						id: __props.listboxId,
-						"aria-label": "Variable suggestions",
+						"aria-label": unref(translate)("apiClient.environmentVariablesDropdown.variableSuggestions"),
 						class: "gap-1/2 flex flex-col",
 						role: "listbox"
 					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredVariables.value, (item, index) => {
@@ -186,10 +188,10 @@ var EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default = /
 						variant: "outlined",
 						onClick: redirectToEnvironment
 					}, {
-						default: withCtx(() => [createVNode(unref(ScalarIconPlus), { class: "size-3" }), _cache[1] || (_cache[1] = createTextVNode(" Add Variable ", -1))]),
+						default: withCtx(() => [createVNode(unref(ScalarIconPlus), { class: "size-3" }), createTextVNode(toDisplayString(unref(translate)("apiClient.environmentVariablesDropdown.addVariable")), 1)]),
 						_: 1
 					})) : createCommentVNode("", true),
-					_cache[2] || (_cache[2] = createElementVNode("div", { class: "bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg" }, null, -1))
+					_cache[1] || (_cache[1] = createElementVNode("div", { class: "bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg" }, null, -1))
 				], 36)]),
 				_: 1
 			})) : createCommentVNode("", true);

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesDropdown.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarTeleport } from '@scalar/components/teleport'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, watch, type CSSProperties } from 'vue'\n\ntype DropdownRow =\n  | { kind: 'env'; key: string; secondary: string }\n  | { kind: 'context'; key: string; secondary: string }\n\nconst {\n  query,\n  environment,\n  dropdownPosition,\n  contextFunctionItems = [],\n  listboxId,\n} = defineProps<{\n  query: string\n  environment?: XScalarEnvironment\n  dropdownPosition?: { left: number; top: number }\n  /** Runtime placeholders such as `{{$guid}}`, shown with environment variables */\n  contextFunctionItems?: { key: string; description: string }[]\n  /**\n   * Id for the `role=\"listbox\"` element. When set, each option also receives a\n   * stable id so the owning combobox input can reference the active option via\n   * `aria-activedescendant` (W3C combobox pattern).\n   */\n  listboxId?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n  (e: 'redirect'): void\n  /**\n   * Fired when the user dismisses the panel by clicking outside. The owning\n   * combobox needs this to clear its `aria-expanded`/`aria-controls` state,\n   * which would otherwise keep pointing at a listbox that is no longer mounted.\n   */\n  (e: 'close'): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n  emit('redirect')\n  isOpen.value = false\n  // The panel is gone, so tell the combobox to drop its aria-expanded /\n  // aria-controls — otherwise they keep pointing at a dismissed listbox.\n  emit('close')\n}\n\n/** Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n  (environment?.variables ?? []).map((v) => ({\n    key: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n  contextFunctionItems.map((item) => ({\n    kind: 'context',\n    key: item.key,\n    secondary: item.description,\n  })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n  normalizedVariables.value\n    .filter(({ key, value }) => key !== '' || value !== '')\n    .map(({ key, value }) => ({\n      kind: 'env' as const,\n      key,\n      secondary: value,\n    })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n  envRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n  contextRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst fuseEnv = computed(\n  () =>\n    new Fuse(envFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst fuseContext = computed(\n  () =>\n    new Fuse(contextFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n  const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n  return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n    const item = byKey.get(key)\n    return item\n      ? [\n          {\n            kind: 'context' as const,\n            key: item.key,\n            secondary: item.description,\n          },\n        ]\n      : []\n  })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n  if (!query.trim()) {\n    const envSlice = envRows.value.slice(-4)\n    return [...envSlice, ...popularContextRows.value]\n  }\n\n  const q = query.trim()\n  const envMatches = fuseEnv.value\n    .search(q, { limit: DROPDOWN_LIMIT })\n    .map((res) => {\n      const { kind, key, secondary } = res.item\n      return { kind, key, secondary }\n    })\n\n  const remaining = DROPDOWN_LIMIT - envMatches.length\n  const contextMatches =\n    remaining > 0\n      ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n          const { kind, key, secondary } = res.item\n          return { kind, key, secondary }\n        })\n      : []\n\n  return [...envMatches, ...contextMatches]\n})\n\nconst optionId = (index: number): string | undefined =>\n  listboxId ? `${listboxId}-option-${index}` : undefined\n\n/**\n * Id of the currently highlighted option, for the combobox's\n * `aria-activedescendant`. Undefined when there is no list to point at.\n */\nconst activeOptionId = computed((): string | undefined =>\n  filteredVariables.value.length\n    ? optionId(selectedVariableIndex.value)\n    : undefined,\n)\n\nconst selectVariable = (variableKey: string): void => {\n  emit('select', variableKey)\n}\n\n// Narrowing the query shrinks the list; keep the highlight in range so both the\n// visible selection and `aria-activedescendant` never reference a dropped option.\nwatch(\n  () => filteredVariables.value.length,\n  (length) => {\n    if (selectedVariableIndex.value > length - 1) {\n      selectedVariableIndex.value = Math.max(0, length - 1)\n    }\n  },\n)\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n  activeOptionId,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n    emit('close')\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\"\n      @mousedown.prevent>\n      <!--\n        Always rendered (even with no matches) so the combobox's `aria-controls`\n        always resolves to a real listbox; an empty list simply has no options.\n      -->\n      <ul\n        :id=\"listboxId\"\n        aria-label=\"Variable suggestions\"\n        class=\"gap-1/2 flex flex-col\"\n        role=\"listbox\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"`${item.kind}-${item.key}`\">\n          <li\n            :id=\"optionId(index)\"\n            :aria-selected=\"index === selectedVariableIndex\"\n            class=\"font-code text-xxs hover:bg-b-3 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-3': index === selectedVariableIndex }\"\n            role=\"option\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"item.kind === 'env'\"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: environment?.color,\n                }\" />\n              <span\n                v-else\n                class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n                fn\n              </span>\n              {{ item.key }}\n            </div>\n            <span\n              class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.secondary }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-if=\"!filteredVariables.length\"\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-3 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />\n        Add Variable\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"EnvironmentVariablesDropdown.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarTeleport } from '@scalar/components/teleport'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, watch, type CSSProperties } from 'vue'\n\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  query,\n  environment,\n  dropdownPosition,\n  contextFunctionItems = [],\n  listboxId,\n} = defineProps<{\n  query: string\n  environment?: XScalarEnvironment\n  dropdownPosition?: { left: number; top: number }\n  /** Runtime placeholders such as `{{$guid}}`, shown with environment variables */\n  contextFunctionItems?: { key: string; description: string }[]\n  /**\n   * Id for the `role=\"listbox\"` element. When set, each option also receives a\n   * stable id so the owning combobox input can reference the active option via\n   * `aria-activedescendant` (W3C combobox pattern).\n   */\n  listboxId?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n  (e: 'redirect'): void\n  /**\n   * Fired when the user dismisses the panel by clicking outside. The owning\n   * combobox needs this to clear its `aria-expanded`/`aria-controls` state,\n   * which would otherwise keep pointing at a listbox that is no longer mounted.\n   */\n  (e: 'close'): void\n}>()\n\nconst { translate } = useLocalization()\n\ntype DropdownRow =\n  | { kind: 'env'; key: string; secondary: string }\n  | { kind: 'context'; key: string; secondary: string }\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n  emit('redirect')\n  isOpen.value = false\n  // The panel is gone, so tell the combobox to drop its aria-expanded /\n  // aria-controls — otherwise they keep pointing at a dismissed listbox.\n  emit('close')\n}\n\n/** Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n  (environment?.variables ?? []).map((v) => ({\n    key: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n  contextFunctionItems.map((item) => ({\n    kind: 'context',\n    key: item.key,\n    secondary: item.description,\n  })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n  normalizedVariables.value\n    .filter(({ key, value }) => key !== '' || value !== '')\n    .map(({ key, value }) => ({\n      kind: 'env' as const,\n      key,\n      secondary: value,\n    })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n  envRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n  contextRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst fuseEnv = computed(\n  () =>\n    new Fuse(envFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst fuseContext = computed(\n  () =>\n    new Fuse(contextFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n  const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n  return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n    const item = byKey.get(key)\n    return item\n      ? [\n          {\n            kind: 'context' as const,\n            key: item.key,\n            secondary: item.description,\n          },\n        ]\n      : []\n  })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n  if (!query.trim()) {\n    const envSlice = envRows.value.slice(-4)\n    return [...envSlice, ...popularContextRows.value]\n  }\n\n  const q = query.trim()\n  const envMatches = fuseEnv.value\n    .search(q, { limit: DROPDOWN_LIMIT })\n    .map((res) => {\n      const { kind, key, secondary } = res.item\n      return { kind, key, secondary }\n    })\n\n  const remaining = DROPDOWN_LIMIT - envMatches.length\n  const contextMatches =\n    remaining > 0\n      ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n          const { kind, key, secondary } = res.item\n          return { kind, key, secondary }\n        })\n      : []\n\n  return [...envMatches, ...contextMatches]\n})\n\nconst optionId = (index: number): string | undefined =>\n  listboxId ? `${listboxId}-option-${index}` : undefined\n\n/**\n * Id of the currently highlighted option, for the combobox's\n * `aria-activedescendant`. Undefined when there is no list to point at.\n */\nconst activeOptionId = computed((): string | undefined =>\n  filteredVariables.value.length\n    ? optionId(selectedVariableIndex.value)\n    : undefined,\n)\n\nconst selectVariable = (variableKey: string): void => {\n  emit('select', variableKey)\n}\n\n// Narrowing the query shrinks the list; keep the highlight in range so both the\n// visible selection and `aria-activedescendant` never reference a dropped option.\nwatch(\n  () => filteredVariables.value.length,\n  (length) => {\n    if (selectedVariableIndex.value > length - 1) {\n      selectedVariableIndex.value = Math.max(0, length - 1)\n    }\n  },\n)\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n  activeOptionId,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n    emit('close')\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\"\n      @mousedown.prevent>\n      <!--\n        Always rendered (even with no matches) so the combobox's `aria-controls`\n        always resolves to a real listbox; an empty list simply has no options.\n      -->\n      <ul\n        :id=\"listboxId\"\n        :aria-label=\"\n          translate(\n            'apiClient.environmentVariablesDropdown.variableSuggestions',\n          )\n        \"\n        class=\"gap-1/2 flex flex-col\"\n        role=\"listbox\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"`${item.kind}-${item.key}`\">\n          <li\n            :id=\"optionId(index)\"\n            :aria-selected=\"index === selectedVariableIndex\"\n            class=\"font-code text-xxs hover:bg-b-3 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-3': index === selectedVariableIndex }\"\n            role=\"option\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"item.kind === 'env'\"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: environment?.color,\n                }\" />\n              <span\n                v-else\n                class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n                fn\n              </span>\n              {{ item.key }}\n            </div>\n            <span\n              class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.secondary }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-if=\"!filteredVariables.length\"\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-3 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />{{\n          translate('apiClient.environmentVariablesDropdown.addVariable')\n        }}\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":"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"}

package/dist/v2/features/environments/components/EnvironmentVariablesTable.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesTable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesTable.vue"],"names":[],"mappings":"AA2KA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAWnH,KAAK,WAAW,GAAG;IACf,WAAW,EAAE,kBAAkB,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GAAG,cAAc,CAAC;AAmWrB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"EnvironmentVariablesTable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesTable.vue"],"names":[],"mappings":"AA4LA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAYnH,KAAK,WAAW,GAAG;IACf,WAAW,EAAE,kBAAkB,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GAAG,cAAc,CAAC;AAyXrB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/environments/components/EnvironmentVariablesTable.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default from "./EnvironmentVariablesTable.vue.script.js";
 /* empty css                                        */
 //#region src/v2/features/environments/components/EnvironmentVariablesTable.vue
-var EnvironmentVariablesTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5b336842"]]);
+var EnvironmentVariablesTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4b7f675d"]]);
 //#endregion
 export { EnvironmentVariablesTable_default as default };
 

package/dist/v2/features/environments/components/EnvironmentVariablesTable.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesTable.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport { CodeInputLite } from '@/v2/components/code-input'\nimport {\n  DataTable,\n  DataTableCell,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\n\nconst { environment, environmentName, eventBus, collectionType } = defineProps<\n  {\n    environment: XScalarEnvironment\n    environmentName: string\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Column widths: Name, Value, Actions (delete button) */\nconst COLUMNS = ['1fr', '1fr', '36px']\n\n/** Adds an empty row at the end for creating new variables */\nconst displayRows = computed<\n  {\n    name: string\n    value: string\n  }[]\n>(() => {\n  /** Normalize the variables to have a name and value */\n  const variableRows = environment.variables.map((v) => ({\n    name: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  }))\n\n  const lastRow = environment.variables.at(-1)\n  const hasContentInLastRow =\n    lastRow && (lastRow.name !== '' || lastRow.value !== '')\n\n  // Add the extra row at the end\n  if (!lastRow || hasContentInLastRow) {\n    return [...variableRows, { name: '', value: '' }]\n  }\n\n  return variableRows\n})\n\n/** Updates an existing variable or creates a new one */\nconst handleVariableChange = (\n  name: string,\n  value: string,\n  index: number,\n): void => {\n  const isNewVariable = index >= environment.variables.length\n\n  /**\n   * Do not allow adding a new variable with an empty name on the last row,\n   * we allow it on other rows as it will delete the row\n   */\n  if (!name && isNewVariable) {\n    return\n  }\n\n  // Adding a new variable\n  if (index >= environment.variables.length) {\n    eventBus.emit('environment:upsert:environment-variable', {\n      environmentName,\n      variable: { name, value },\n      collectionType,\n    })\n    return\n  }\n\n  // Updating\n  eventBus.emit('environment:upsert:environment-variable', {\n    environmentName,\n    variable: { name, value },\n    index,\n    collectionType,\n  })\n}\n\n/** Deletes a variable by index */\nconst handleVariableDelete = (index: number): void =>\n  eventBus.emit('environment:delete:environment-variable', {\n    environmentName,\n    index,\n    collectionType,\n  })\n</script>\n<template>\n  <!-- Environment variables table -->\n  <DataTable\n    class=\"group/table data-table h-min flex-1 rounded\"\n    :columns=\"COLUMNS\">\n    <!-- Accessibility header row -->\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>Name</DataTableHeader>\n      <DataTableHeader>Value</DataTableHeader>\n      <DataTableHeader>Actions</DataTableHeader>\n    </DataTableRow>\n\n    <!-- Variable rows -->\n    <DataTableRow\n      v-for=\"(row, index) in displayRows\"\n      :key=\"index\"\n      class=\"group/row\">\n      <!-- Name -->\n      <DataTableCell>\n        <CodeInputLite\n          aria-label=\"Environment Variable Name\"\n          :environment=\"undefined\"\n          :modelValue=\"row.name\"\n          placeholder=\"Name\"\n          @update:modelValue=\"\n            (name) => handleVariableChange(name, row.value, index)\n          \" />\n      </DataTableCell>\n\n      <!-- Value -->\n      <DataTableCell>\n        <CodeInputLite\n          aria-label=\"Environment Variable Value\"\n          :environment=\"undefined\"\n          :modelValue=\"row.value\"\n          placeholder=\"Value\"\n          @update:modelValue=\"\n            (value) => handleVariableChange(row.name, value, index)\n          \" />\n      </DataTableCell>\n\n      <!-- Delete button -->\n      <DataTableCell class=\"flex items-center justify-center\">\n        <ScalarButton\n          v-if=\"index < environment.variables.length\"\n          class=\"text-c-2 hover:text-c-1 hover:bg-b-2 hidden h-fit rounded p-1 group-focus-within:flex group-hover/row:flex\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"handleVariableDelete(index)\">\n          <ScalarIconTrash class=\"size-3.5\" />\n        </ScalarButton>\n      </DataTableCell>\n    </DataTableRow>\n  </DataTable>\n</template>\n<style scoped>\n:deep(.code-input-lite__editor) {\n  background-color: transparent;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n}\n:deep(.scalar-pill:not(:last-of-type)) {\n  margin-right: 0.15em;\n}\n:deep(.scalar-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EnvironmentVariablesTable.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport { CodeInputLite } from '@/v2/components/code-input'\nimport {\n  DataTable,\n  DataTableCell,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst { environment, environmentName, eventBus, collectionType } = defineProps<\n  {\n    environment: XScalarEnvironment\n    environmentName: string\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\nconst { translate } = useLocalization()\n\n/** Column widths: Name, Value, Actions (delete button) */\nconst COLUMNS = ['1fr', '1fr', '36px']\n\n/** Adds an empty row at the end for creating new variables */\nconst displayRows = computed<\n  {\n    name: string\n    value: string\n  }[]\n>(() => {\n  /** Normalize the variables to have a name and value */\n  const variableRows = environment.variables.map((v) => ({\n    name: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  }))\n\n  const lastRow = environment.variables.at(-1)\n  const hasContentInLastRow =\n    lastRow && (lastRow.name !== '' || lastRow.value !== '')\n\n  // Add the extra row at the end\n  if (!lastRow || hasContentInLastRow) {\n    return [...variableRows, { name: '', value: '' }]\n  }\n\n  return variableRows\n})\n\n/** Updates an existing variable or creates a new one */\nconst handleVariableChange = (\n  name: string,\n  value: string,\n  index: number,\n): void => {\n  const isNewVariable = index >= environment.variables.length\n\n  /**\n   * Do not allow adding a new variable with an empty name on the last row,\n   * we allow it on other rows as it will delete the row\n   */\n  if (!name && isNewVariable) {\n    return\n  }\n\n  // Adding a new variable\n  if (index >= environment.variables.length) {\n    eventBus.emit('environment:upsert:environment-variable', {\n      environmentName,\n      variable: { name, value },\n      collectionType,\n    })\n    return\n  }\n\n  // Updating\n  eventBus.emit('environment:upsert:environment-variable', {\n    environmentName,\n    variable: { name, value },\n    index,\n    collectionType,\n  })\n}\n\n/** Deletes a variable by index */\nconst handleVariableDelete = (index: number): void =>\n  eventBus.emit('environment:delete:environment-variable', {\n    environmentName,\n    index,\n    collectionType,\n  })\n</script>\n<template>\n  <!-- Environment variables table -->\n  <DataTable\n    class=\"group/table data-table h-min flex-1 rounded\"\n    :columns=\"COLUMNS\">\n    <!-- Accessibility header row -->\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>\n        {{ translate('apiClient.environmentVariablesTable.name') }}\n      </DataTableHeader>\n      <DataTableHeader>\n        {{ translate('apiClient.environmentVariablesTable.value') }}\n      </DataTableHeader>\n      <DataTableHeader>\n        {{ translate('apiClient.environmentVariablesTable.actions') }}\n      </DataTableHeader>\n    </DataTableRow>\n\n    <!-- Variable rows -->\n    <DataTableRow\n      v-for=\"(row, index) in displayRows\"\n      :key=\"index\"\n      class=\"group/row\">\n      <!-- Name -->\n      <DataTableCell>\n        <CodeInputLite\n          :aria-label=\"\n            translate(\n              'apiClient.environmentVariablesTable.environmentVariableName',\n            )\n          \"\n          :environment=\"undefined\"\n          :modelValue=\"row.name\"\n          :placeholder=\"translate('apiClient.environmentVariablesTable.name')\"\n          @update:modelValue=\"\n            (name) => handleVariableChange(name, row.value, index)\n          \" />\n      </DataTableCell>\n\n      <!-- Value -->\n      <DataTableCell>\n        <CodeInputLite\n          :aria-label=\"\n            translate(\n              'apiClient.environmentVariablesTable.environmentVariableValue',\n            )\n          \"\n          :environment=\"undefined\"\n          :modelValue=\"row.value\"\n          :placeholder=\"translate('apiClient.environmentVariablesTable.value')\"\n          @update:modelValue=\"\n            (value) => handleVariableChange(row.name, value, index)\n          \" />\n      </DataTableCell>\n\n      <!-- Delete button -->\n      <DataTableCell class=\"flex items-center justify-center\">\n        <ScalarButton\n          v-if=\"index < environment.variables.length\"\n          class=\"text-c-2 hover:text-c-1 hover:bg-b-2 hidden h-fit rounded p-1 group-focus-within:flex group-hover/row:flex\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"handleVariableDelete(index)\">\n          <ScalarIconTrash class=\"size-3.5\" />\n        </ScalarButton>\n      </DataTableCell>\n    </DataTableRow>\n  </DataTable>\n</template>\n<style scoped>\n:deep(.code-input-lite__editor) {\n  background-color: transparent;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n}\n:deep(.scalar-pill:not(:last-of-type)) {\n  margin-right: 0.15em;\n}\n:deep(.scalar-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n</style>\n"],"mappings":""}