@scalar/api-client 2.38.4 → 2.39.0

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

@@ -0,0 +1,158 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeStyle, openBlock, ref, renderList, unref, vModelText, withDirectives } from "vue";
+import { ScalarIcon } from "@scalar/components";
+//#region src/v2/features/environments/components/EnvironmentColors.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "color-selector flex h-4 flex-row items-center justify-between gap-1.5 space-x-1"
+};
+var _hoisted_2 = ["onClick"];
+var _hoisted_3 = {
+	key: 2,
+	class: "color-selector flex h-4 flex-1 items-center gap-2 rounded"
+};
+var _hoisted_4 = ["placeholder"];
+var DEFAULT_GRADIENT = "linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122))";
+/** Check if the active color is one of the preset options. */
+var EnvironmentColors_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EnvironmentColors",
+	props: { activeColor: {} },
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const customColor = ref("");
+		const customColorInputRef = ref(null);
+		const showCustomInput = ref(false);
+		const showSelector = ref(false);
+		/**
+		* Predefined color options available in the color picker.
+		* Each option provides a standard color choice for the environment.
+		*/
+		const colorOptions = [
+			"#FFFFFF",
+			"#EF0006",
+			"#EDBE20",
+			"#069061",
+			"#FB892C",
+			"#0082D0",
+			"#5203D1",
+			"#FFC0CB"
+		];
+		/** Default gradient shown when no custom color is selected. */
+		const isPresetColor = computed(() => colorOptions.includes(__props.activeColor));
+		/** Check if a custom color is being used (not in the preset list). */
+		const isCustomColor = computed(() => __props.activeColor && !isPresetColor.value && !showCustomInput.value);
+		/** Check if the given color matches the currently active color. */
+		const isActiveColor = (color) => __props.activeColor === color;
+		/**
+		* Style for the custom color button.
+		* Shows the actual color if custom, otherwise shows a gradient.
+		*/
+		const customButtonStyle = computed(() => {
+			const displayColor = customColor.value || __props.activeColor;
+			return isCustomColor.value || customColor.value ? `background-color: ${displayColor};` : `background: ${DEFAULT_GRADIENT};`;
+		});
+		/**
+		* Toggle the custom color input visibility.
+		* Focuses the input after it becomes visible.
+		*/
+		const toggleCustomInput = async () => {
+			showCustomInput.value = !showCustomInput.value;
+			showSelector.value = false;
+			if (!showCustomInput.value) return;
+			await nextTick();
+			customColorInputRef.value?.focus();
+		};
+		/** Toggle the color selector visibility. */
+		const toggleSelector = () => {
+			showSelector.value = !showSelector.value;
+		};
+		/**
+		* Select a color and emit the selection event.
+		* Ensures the color value has a # prefix for hex colors.
+		*/
+		const selectColor = (color) => {
+			emit("select", color && !color.startsWith("#") ? `#${color}` : color);
+			showSelector.value = false;
+		};
+		/**
+		* Handle custom color input changes.
+		* Formats the color and emits the selection.
+		*/
+		const handleCustomColorInput = () => {
+			if (!customColor.value) return;
+			const formattedColor = customColor.value.startsWith("#") ? customColor.value : `#${customColor.value}`;
+			customColor.value = formattedColor;
+			selectColor(formattedColor);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [
+				!showCustomInput.value && !showSelector.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "flex h-4 w-4 cursor-pointer items-center justify-center rounded-full",
+					style: normalizeStyle({ backgroundColor: __props.activeColor }),
+					onClick: toggleSelector
+				}, [__props.activeColor ? (openBlock(), createBlock(unref(ScalarIcon), {
+					key: 0,
+					class: "text-c-btn p-0.5",
+					icon: "Checkmark",
+					size: "xs"
+				})) : createCommentVNode("", true)], 4)) : createCommentVNode("", true),
+				!showCustomInput.value && showSelector.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+					(openBlock(), createElementBlock(Fragment, null, renderList(colorOptions, (option) => {
+						return createElementVNode("div", {
+							key: option,
+							class: "flex h-4 w-4 cursor-pointer items-center justify-center rounded-full",
+							style: normalizeStyle({ backgroundColor: option }),
+							onClick: ($event) => selectColor(option)
+						}, [isActiveColor(option) ? (openBlock(), createBlock(unref(ScalarIcon), {
+							key: 0,
+							class: "text-c-btn p-0.5",
+							icon: "Checkmark",
+							size: "xs"
+						})) : createCommentVNode("", true)], 12, _hoisted_2);
+					}), 64)),
+					_cache[1] || (_cache[1] = createElementVNode("hr", { class: "border-ghost h-5 w-0.5 border-l" }, null, -1)),
+					createElementVNode("button", {
+						class: "z-10 flex h-4 w-4 cursor-pointer flex-row items-center justify-center gap-2 rounded-full",
+						style: normalizeStyle(customButtonStyle.value),
+						type: "button",
+						onClick: toggleCustomInput
+					}, [isCustomColor.value ? (openBlock(), createBlock(unref(ScalarIcon), {
+						key: 0,
+						class: "text-c-btn",
+						icon: "Checkmark",
+						size: "xs"
+					})) : createCommentVNode("", true)], 4)
+				])) : createCommentVNode("", true),
+				showCustomInput.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+					_cache[2] || (_cache[2] = createElementVNode("span", { class: "absolute h-4 w-4 rounded-full border border-dashed" }, null, -1)),
+					createElementVNode("span", {
+						class: "z-[1] h-4 w-4 rounded-full",
+						style: normalizeStyle(customButtonStyle.value)
+					}, null, 4),
+					withDirectives(createElementVNode("input", {
+						ref_key: "customColorInputRef",
+						ref: customColorInputRef,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customColor.value = $event),
+						class: "w-full flex-1 border-transparent text-sm outline-none",
+						placeholder: __props.activeColor || "#000000",
+						type: "text",
+						onInput: handleCustomColorInput
+					}, null, 40, _hoisted_4), [[vModelText, customColor.value]]),
+					createElementVNode("button", {
+						class: "text-c-3 hover:bg-b-2 rounded-lg p-1.5",
+						type: "button",
+						onClick: toggleCustomInput
+					}, [createVNode(unref(ScalarIcon), {
+						icon: "Checkmark",
+						size: "xs"
+					})])
+				])) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { EnvironmentColors_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EnvironmentColors.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentColors.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentColors.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport { computed, nextTick, ref } from 'vue'\n\nconst { activeColor } = defineProps<{\n  activeColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', color: string): void\n}>()\n\nconst customColor = ref('')\nconst customColorInputRef = ref<HTMLInputElement | null>(null)\nconst showCustomInput = ref(false)\nconst showSelector = ref(false)\n\n/**\n * Predefined color options available in the color picker.\n * Each option provides a standard color choice for the environment.\n */\nconst colorOptions = [\n  '#FFFFFF',\n  '#EF0006',\n  '#EDBE20',\n  '#069061',\n  '#FB892C',\n  '#0082D0',\n  '#5203D1',\n  '#FFC0CB',\n] as const\n\n/** Default gradient shown when no custom color is selected. */\nconst DEFAULT_GRADIENT =\n  'linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122))'\n\n/** Check if the active color is one of the preset options. */\nconst isPresetColor = computed(() =>\n  colorOptions.includes(activeColor as (typeof colorOptions)[number]),\n)\n\n/** Check if a custom color is being used (not in the preset list). */\nconst isCustomColor = computed(\n  () => activeColor && !isPresetColor.value && !showCustomInput.value,\n)\n\n/** Check if the given color matches the currently active color. */\nconst isActiveColor = (color: string): boolean => activeColor === color\n\n/**\n * Style for the custom color button.\n * Shows the actual color if custom, otherwise shows a gradient.\n */\nconst customButtonStyle = computed(() => {\n  const displayColor = customColor.value || activeColor\n  return isCustomColor.value || customColor.value\n    ? `background-color: ${displayColor};`\n    : `background: ${DEFAULT_GRADIENT};`\n})\n\n/**\n * Toggle the custom color input visibility.\n * Focuses the input after it becomes visible.\n */\nconst toggleCustomInput = async () => {\n  showCustomInput.value = !showCustomInput.value\n  showSelector.value = false\n\n  if (!showCustomInput.value) {\n    return\n  }\n\n  await nextTick()\n  customColorInputRef.value?.focus()\n}\n\n/** Toggle the color selector visibility. */\nconst toggleSelector = (): void => {\n  showSelector.value = !showSelector.value\n}\n\n/**\n * Select a color and emit the selection event.\n * Ensures the color value has a # prefix for hex colors.\n */\nconst selectColor = (color: string): void => {\n  const formattedColor = color && !color.startsWith('#') ? `#${color}` : color\n  emit('select', formattedColor)\n  showSelector.value = false\n}\n\n/**\n * Handle custom color input changes.\n * Formats the color and emits the selection.\n */\nconst handleCustomColorInput = (): void => {\n  if (!customColor.value) {\n    return\n  }\n\n  const formattedColor = customColor.value.startsWith('#')\n    ? customColor.value\n    : `#${customColor.value}`\n\n  customColor.value = formattedColor\n  selectColor(formattedColor)\n}\n</script>\n<template>\n  <div>\n    <!-- Collapsed view: single color dot -->\n    <div\n      v-if=\"!showCustomInput && !showSelector\"\n      class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n      :style=\"{ backgroundColor: activeColor }\"\n      @click=\"toggleSelector\">\n      <ScalarIcon\n        v-if=\"activeColor\"\n        class=\"text-c-btn p-0.5\"\n        icon=\"Checkmark\"\n        size=\"xs\" />\n    </div>\n\n    <!-- Expanded view: color palette selector -->\n    <div\n      v-if=\"!showCustomInput && showSelector\"\n      class=\"color-selector flex h-4 flex-row items-center justify-between gap-1.5 space-x-1\">\n      <!-- Preset color options -->\n      <div\n        v-for=\"option in colorOptions\"\n        :key=\"option\"\n        class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n        :style=\"{ backgroundColor: option }\"\n        @click=\"selectColor(option)\">\n        <ScalarIcon\n          v-if=\"isActiveColor(option)\"\n          class=\"text-c-btn p-0.5\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </div>\n\n      <!-- Divider -->\n      <hr class=\"border-ghost h-5 w-0.5 border-l\" />\n\n      <!-- Custom color button -->\n      <button\n        class=\"z-10 flex h-4 w-4 cursor-pointer flex-row items-center justify-center gap-2 rounded-full\"\n        :style=\"customButtonStyle\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          v-if=\"isCustomColor\"\n          class=\"text-c-btn\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n\n    <!-- Custom color input view -->\n    <div\n      v-if=\"showCustomInput\"\n      class=\"color-selector flex h-4 flex-1 items-center gap-2 rounded\">\n      <span class=\"absolute h-4 w-4 rounded-full border border-dashed\" />\n      <span\n        class=\"z-[1] h-4 w-4 rounded-full\"\n        :style=\"customButtonStyle\" />\n      <input\n        ref=\"customColorInputRef\"\n        v-model=\"customColor\"\n        class=\"w-full flex-1 border-transparent text-sm outline-none\"\n        :placeholder=\"activeColor || '#000000'\"\n        type=\"text\"\n        @input=\"handleCustomColorInput\" />\n      <button\n        class=\"text-c-3 hover:bg-b-2 rounded-lg p-1.5\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import EnvironmentCreateModal_vue_vue_type_script_setup_true_lang_default from "./EnvironmentCreateModal.vue.script.js";
+//#region src/v2/features/environments/components/EnvironmentCreateModal.vue
+var EnvironmentCreateModal_default = EnvironmentCreateModal_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { EnvironmentCreateModal_default as default };
+
+//# sourceMappingURL=EnvironmentCreateModal.vue.js.map

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

@@ -0,0 +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'\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 CommandActionForm from '@/components/CommandPalette/CommandActionForm.vue'\nimport CommandActionInput from '@/components/CommandPalette/CommandActionInput.vue'\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":""}

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

@@ -0,0 +1,97 @@
+import CommandActionForm_default from "../../../../components/CommandPalette/CommandActionForm.vue.js";
+import CommandActionInput_default from "../../../../components/CommandPalette/CommandActionInput.vue.js";
+import EnvironmentColors_default from "./EnvironmentColors.vue.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
+import { ScalarModal } from "@scalar/components";
+//#region src/v2/features/environments/components/EnvironmentCreateModal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex items-start gap-2" };
+var _hoisted_2 = {
+	key: 0,
+	class: "text-red text-xs"
+};
+var DEFAULT_COLOR = "#FFFFFF";
+var EnvironmentCreateModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EnvironmentCreateModal",
+	props: {
+		environments: {},
+		selectedEnvironmentName: {},
+		state: {},
+		eventBus: {},
+		collectionType: {}
+	},
+	setup(__props) {
+		/** Default color for new environments. */
+		const name = ref("");
+		const selectedColor = ref(DEFAULT_COLOR);
+		/** Ensure [re]set the form on open */
+		watch(() => __props.state.open, (isOpen) => {
+			if (isOpen) {
+				const environment = __props.environments[__props.selectedEnvironmentName ?? ""];
+				if (__props.selectedEnvironmentName && environment) {
+					name.value = __props.selectedEnvironmentName;
+					selectedColor.value = environment.color;
+				} else {
+					name.value = "";
+					selectedColor.value = DEFAULT_COLOR;
+				}
+			}
+		});
+		/**
+		* Handle color selection from the color picker.
+		* Updates the selected color for the new environment.
+		*/
+		const handleColorSelect = (color) => {
+			selectedColor.value = color;
+		};
+		/** Emits an event to create the environment with the provided name and color. */
+		const handleSubmit = () => {
+			if (__props.selectedEnvironmentName) __props.eventBus.emit("environment:upsert:environment", {
+				oldEnvironmentName: __props.selectedEnvironmentName,
+				payload: { color: selectedColor.value },
+				environmentName: name.value.trim(),
+				collectionType: __props.collectionType
+			});
+			else __props.eventBus.emit("environment:upsert:environment", {
+				environmentName: name.value.trim(),
+				payload: { color: selectedColor.value },
+				collectionType: __props.collectionType
+			});
+			__props.state.hide();
+		};
+		/** Check if the environment name is a duplicate */
+		const isDuplicateName = computed(() => {
+			if (__props.selectedEnvironmentName) return name.value !== __props.selectedEnvironmentName && Object.keys(__props.environments).includes(name.value);
+			return Object.keys(__props.environments).includes(name.value);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarModal), {
+				bodyClass: "border-t-0 rounded-t-lg",
+				size: "xs",
+				state: __props.state
+			}, {
+				default: withCtx(() => [createVNode(CommandActionForm_default, {
+					disabled: !name.value.trim() || isDuplicateName.value,
+					onSubmit: handleSubmit
+				}, {
+					submit: withCtx(() => [createTextVNode(toDisplayString(__props.selectedEnvironmentName ? "Update" : "Add") + " Environment ", 1)]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(EnvironmentColors_default, {
+						activeColor: selectedColor.value,
+						class: "peer",
+						onSelect: handleColorSelect
+					}, null, 8, ["activeColor"]), createVNode(CommandActionInput_default, {
+						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)]),
+					_: 1
+				}, 8, ["disabled"])]),
+				_: 1
+			}, 8, ["state"]);
+		};
+	}
+});
+//#endregion
+export { EnvironmentCreateModal_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EnvironmentCreateModal.vue.script.js.map

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

@@ -0,0 +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'\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 CommandActionForm from '@/components/CommandPalette/CommandActionForm.vue'\nimport CommandActionInput from '@/components/CommandPalette/CommandActionInput.vue'\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":";;;;;;;;;;;AA8BA,IAAM,gBAAgB;;;;;;;;;;;;EAEtB,MAAM,OAAO,IAAI,GAAE;EACnB,MAAM,gBAAgB,IAAI,cAAa;;AAGvC,cACQ,QAAA,MAAM,OACX,WAAW;AACV,OAAI,QAAQ;IACV,MAAM,cAAc,QAAA,aAAa,QAAA,2BAA2B;AAG5D,QAAI,QAAA,2BAA2B,aAAa;AAC1C,UAAK,QAAQ,QAAA;AACb,mBAAc,QAAQ,YAAY;WAI/B;AACH,UAAK,QAAQ;AACb,mBAAc,QAAQ;;;IAI9B;;;;;EAMA,MAAM,qBAAqB,UAAwB;AACjD,iBAAc,QAAQ;;;EAIxB,MAAM,qBAA2B;AAE/B,OAAI,QAAA,wBACF,SAAA,SAAS,KAAK,kCAAkC;IAC9C,oBAAoB,QAAA;IACpB,SAAS,EACP,OAAO,cAAc,OACtB;IACD,iBAAiB,KAAK,MAAM,MAAM;IAClC,gBAAa,QAAA;IACd,CAAA;OAID,SAAA,SAAS,KAAK,kCAAkC;IAC9C,iBAAiB,KAAK,MAAM,MAAM;IAClC,SAAS,EACP,OAAO,cAAc,OACtB;IACD,gBAAa,QAAA;IACd,CAAA;AAGH,WAAA,MAAM,MAAK;;;EAIb,MAAM,kBAAkB,eAAe;AACrC,OAAI,QAAA,wBACF,QACE,KAAK,UAAU,QAAA,2BACf,OAAO,KAAK,QAAA,aAAa,CAAC,SAAS,KAAK,MAAK;AAIjD,UAAO,OAAO,KAAK,QAAA,aAAa,CAAC,SAAS,KAAK,MAAK;IACrD;;uBAIC,YAiCc,MAAA,YAAA,EAAA;IAhCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;;2BA6BY,CA5BpB,YA4BoB,2BAAA;KA3BjB,UAAQ,CAAG,KAAA,MAAK,MAAI,IAAM,gBAAA;KAC1B,UAAQ;;KAuBE,QAAM,cACiC,CAAA,gBAAA,gBAA7C,QAAA,0BAAuB,WAAA,MAAA,GAAsB,iBAClD,EAAA,CAAA,CAAA;4BAZM,CAZN,mBAYM,OAZN,YAYM,CAVJ,YAGgC,2BAAA;MAF7B,aAAa,cAAA;MACd,OAAM;MACL,UAAQ;mCAGX,YAGmC,4BAAA;kBAFxB,KAAA;wEAAI,QAAA;MACb,OAAM;MACN,aAAY;oCAKR,gBAAA,SAAA,WAAA,EADR,mBAIM,OAJN,YAE2B,6CAE3B,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

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

@@ -0,0 +1,7 @@
+import EnvironmentDeleteModal_vue_vue_type_script_setup_true_lang_default from "./EnvironmentDeleteModal.vue.script.js";
+//#region src/v2/features/environments/components/EnvironmentDeleteModal.vue
+var EnvironmentDeleteModal_default = EnvironmentDeleteModal_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { EnvironmentDeleteModal_default as default };
+
+//# sourceMappingURL=EnvironmentDeleteModal.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentDeleteModal.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarModal, type ModalState } from '@scalar/components'\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":""}

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

@@ -0,0 +1,50 @@
+import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
+import { ScalarButton, ScalarModal } from "@scalar/components";
+//#region src/v2/features/environments/components/EnvironmentDeleteModal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex justify-between" };
+var EnvironmentDeleteModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EnvironmentDeleteModal",
+	props: {
+		state: {},
+		name: { default: "unknown" }
+	},
+	emits: ["cancel", "submit"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		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}`
+			}, {
+				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), {
+					size: "sm",
+					variant: "outlined",
+					onClick: _cache[0] || (_cache[0] = () => {
+						emit("cancel");
+						__props.state.hide();
+					})
+				}, {
+					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Cancel ", -1)])]),
+					_: 1
+				}), createVNode(unref(ScalarButton), {
+					size: "sm",
+					variant: "danger",
+					onClick: _cache[1] || (_cache[1] = () => {
+						emit("submit");
+						__props.state.hide();
+					})
+				}, {
+					default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Delete Environment ", -1)])]),
+					_: 1
+				})])]),
+				_: 1
+			}, 8, ["state", "title"]);
+		};
+	}
+});
+//#endregion
+export { EnvironmentDeleteModal_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EnvironmentDeleteModal.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentDeleteModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarModal, type ModalState } from '@scalar/components'\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":";;;;;;;;;;;;EAQA,MAAM,OAAO;;uBAOX,YAiCc,MAAA,YAAA,EAAA;IAhCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;IACP,OAAK,UAAY,QAAA;;2BAId,CAAA,OAAA,OAAA,OAAA,KAHJ,mBAGI,KAAA,EAHD,OAAM,+CAA6C,EAAC,qFAGvD,GAAA,GACA,mBAuBM,OAvBN,YAuBM,CAtBJ,YAUe,MAAA,aAAA,EAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;AAAiC,WAAI,SAAA;AAAuB,cAAA,MAAM,MAAI;;;4BAO9E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,YAEJ,GAAA,CAAA,EAAA,CAAA;;QACA,YAUe,MAAA,aAAA,EAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;AAAiC,WAAI,SAAA;AAAuB,cAAA,MAAM,MAAI;;;4BAO9E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,wBAEJ,GAAA,CAAA,EAAA,CAAA"}

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

@@ -0,0 +1,7 @@
+import EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default from "./EnvironmentVariablesDropdown.vue.script.js";
+//#region src/v2/features/environments/components/EnvironmentVariablesDropdown.vue
+var EnvironmentVariablesDropdown_default = EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { EnvironmentVariablesDropdown_default as default };
+
+//# sourceMappingURL=EnvironmentVariablesDropdown.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentVariablesDropdown.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconPlus } from '@scalar/icons'\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, type CSSProperties } from 'vue'\n\nconst { query, environment, dropdownPosition } = defineProps<{\n  query: string\n  environment: XScalarEnvironment\n  dropdownPosition?: { left: number; top: number }\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n  (e: 'redirect'): 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}\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 fuse = new Fuse(normalizedVariables.value, {\n  keys: ['key', 'value'],\n})\n\nconst filteredVariables = computed(() => {\n  if (!query) {\n    /** return the last 4 environment variables on first display */\n    return normalizedVariables.value\n      .slice(-4)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  /** filter environment variables by name */\n  const result = fuse.search(query, { limit: 10 })\n  if (result.length > 0) {\n    return result\n      .map((res) => res.item)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  return []\n})\n\nconst selectVariable = (variableKey: string) => {\n  emit('select', variableKey)\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})\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  },\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 fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\">\n      <ul\n        v-if=\"filteredVariables.length\"\n        class=\"gap-1/2 flex flex-col\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"item.key\">\n          <li\n            class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: environment.color,\n                }\"></span>\n              {{ item.key }}\n            </div>\n            <span\n              class=\"w-20 overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.value }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-else\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 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":""}

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

@@ -0,0 +1,113 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
+import { ScalarButton, ScalarTeleport } from "@scalar/components";
+import { ScalarIconPlus } from "@scalar/icons";
+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 = {
+	key: 0,
+	class: "gap-1/2 flex flex-col"
+};
+var _hoisted_2 = ["onClick"];
+var _hoisted_3 = { class: "flex items-center gap-2 whitespace-nowrap" };
+var _hoisted_4 = { class: "w-20 overflow-hidden text-right text-ellipsis whitespace-nowrap" };
+var EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EnvironmentVariablesDropdown",
+	props: {
+		query: {},
+		environment: {},
+		dropdownPosition: {}
+	},
+	emits: ["select", "redirect"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const isOpen = ref(true);
+		const dropdownRef = ref(null);
+		const selectedVariableIndex = ref(0);
+		const redirectToEnvironment = () => {
+			emit("redirect");
+			isOpen.value = false;
+		};
+		/** Normalize the variables to have a name and value */
+		const normalizedVariables = computed(() => __props.environment.variables.map((v) => ({
+			key: v.name,
+			value: typeof v.value === "string" ? v.value : v.value.default
+		})));
+		const fuse = new Fuse(normalizedVariables.value, { keys: ["key", "value"] });
+		const filteredVariables = computed(() => {
+			if (!__props.query)
+ /** return the last 4 environment variables on first display */
+			return normalizedVariables.value.slice(-4).filter(({ key, value }) => key !== "" || value !== "");
+			/** filter environment variables by name */
+			const result = fuse.search(__props.query, { limit: 10 });
+			if (result.length > 0) return result.map((res) => res.item).filter(({ key, value }) => key !== "" || value !== "");
+			return [];
+		});
+		const selectVariable = (variableKey) => {
+			emit("select", variableKey);
+		};
+		const handleArrowKey = (direction) => {
+			const offset = direction === "up" ? -1 : 1;
+			const length = filteredVariables.value.length;
+			if (length === 0) return;
+			selectedVariableIndex.value = (selectedVariableIndex.value + offset + length) % length;
+		};
+		const handleSelect = () => {
+			if (selectedVariableIndex.value >= 0) {
+				const selectedVariable = filteredVariables.value[selectedVariableIndex.value];
+				if (selectedVariable) selectVariable(selectedVariable.key);
+			}
+		};
+		__expose({
+			handleArrowKey,
+			handleSelect
+		});
+		onMounted(() => {
+			selectedVariableIndex.value = 0;
+		});
+		const dropdownStyle = computed(() => {
+			return {
+				left: (__props.dropdownPosition?.left ?? 0) + "px",
+				top: (__props.dropdownPosition?.top ?? 0) + 5 + "px"
+			};
+		});
+		onClickOutside(dropdownRef, () => {
+			isOpen.value = false;
+		}, { ignore: [dropdownRef] });
+		return (_ctx, _cache) => {
+			return isOpen.value ? (openBlock(), createBlock(unref(ScalarTeleport), {
+				key: 0,
+				class: "scalar-client"
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "dropdownRef",
+					ref: dropdownRef,
+					class: "custom-scroll fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75",
+					style: normalizeStyle(dropdownStyle.value)
+				}, [filteredVariables.value.length ? (openBlock(), createElementBlock("ul", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredVariables.value, (item, index) => {
+					return openBlock(), createElementBlock("li", {
+						key: item.key,
+						class: normalizeClass(["font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150", { "bg-b-2": index === selectedVariableIndex.value }]),
+						onClick: ($event) => selectVariable(item.key)
+					}, [createElementVNode("div", _hoisted_3, [createElementVNode("span", {
+						class: "h-2.25 w-2.25 min-w-2.25 rounded-full",
+						style: normalizeStyle({ backgroundColor: __props.environment.color })
+					}, null, 4), createTextVNode(" " + toDisplayString(item.key), 1)]), createElementVNode("span", _hoisted_4, toDisplayString(item.value), 1)], 10, _hoisted_2);
+				}), 128))])) : (openBlock(), createBlock(unref(ScalarButton), {
+					key: 1,
+					class: "font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150",
+					variant: "outlined",
+					onClick: redirectToEnvironment
+				}, {
+					default: withCtx(() => [createVNode(unref(ScalarIconPlus), { class: "size-3" }), _cache[0] || (_cache[0] = createTextVNode(" Add Variable ", -1))]),
+					_: 1
+				})), _cache[1] || (_cache[1] = createElementVNode("div", { class: "bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg" }, null, -1))], 4)]),
+				_: 1
+			})) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EnvironmentVariablesDropdown.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentVariablesDropdown.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconPlus } from '@scalar/icons'\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, type CSSProperties } from 'vue'\n\nconst { query, environment, dropdownPosition } = defineProps<{\n  query: string\n  environment: XScalarEnvironment\n  dropdownPosition?: { left: number; top: number }\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n  (e: 'redirect'): 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}\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 fuse = new Fuse(normalizedVariables.value, {\n  keys: ['key', 'value'],\n})\n\nconst filteredVariables = computed(() => {\n  if (!query) {\n    /** return the last 4 environment variables on first display */\n    return normalizedVariables.value\n      .slice(-4)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  /** filter environment variables by name */\n  const result = fuse.search(query, { limit: 10 })\n  if (result.length > 0) {\n    return result\n      .map((res) => res.item)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  return []\n})\n\nconst selectVariable = (variableKey: string) => {\n  emit('select', variableKey)\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})\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  },\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 fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\">\n      <ul\n        v-if=\"filteredVariables.length\"\n        class=\"gap-1/2 flex flex-col\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"item.key\">\n          <li\n            class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: environment.color,\n                }\"></span>\n              {{ item.key }}\n            </div>\n            <span\n              class=\"w-20 overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.value }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-else\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 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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"}

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

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.js";
+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-28c8509c"]]);
+//#endregion
+export { EnvironmentVariablesTable_default as default };
+
+//# sourceMappingURL=EnvironmentVariablesTable.vue.js.map

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

@@ -0,0 +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'\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 { CodeInput } 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        <CodeInput\n          aria-label=\"Environment Variable Name\"\n          disableCloseBrackets\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\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        <CodeInput\n          aria-label=\"Environment Variable Value\"\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\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(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n</style>\n"],"mappings":""}