@scalar/api-client 2.38.3 → 2.39.0

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":";;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,OAAO;EAKb,MAAM,SAAS,IAAI,KAAI;EACvB,MAAM,cAAc,IAAwB,KAAI;EAChD,MAAM,wBAAwB,IAAI,EAAC;EAEnC,MAAM,8BAA8B;AAClC,QAAK,WAAU;AACf,UAAO,QAAQ;;;EAIjB,MAAM,sBAAsB,eAC1B,QAAA,YAAY,UAAU,KAAK,OAAO;GAChC,KAAK,EAAE;GACP,OAAO,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ,EAAE,MAAM;GACxD,EAAE,CACL;EAEA,MAAM,OAAO,IAAI,KAAK,oBAAoB,OAAO,EAC/C,MAAM,CAAC,OAAO,QAAQ,EACvB,CAAA;EAED,MAAM,oBAAoB,eAAe;AACvC,OAAI,CAAC,QAAA;;AAEH,UAAO,oBAAoB,MACxB,MAAM,GAAE,CACR,QAAQ,EAAE,KAAK,YAAY,QAAQ,MAAM,UAAU,GAAE;;GAI1D,MAAM,SAAS,KAAK,OAAO,QAAA,OAAO,EAAE,OAAO,IAAI,CAAA;AAC/C,OAAI,OAAO,SAAS,EAClB,QAAO,OACJ,KAAK,QAAQ,IAAI,KAAI,CACrB,QAAQ,EAAE,KAAK,YAAY,QAAQ,MAAM,UAAU,GAAE;AAG1D,UAAO,EAAC;IACT;EAED,MAAM,kBAAkB,gBAAwB;AAC9C,QAAK,UAAU,YAAW;;EAG5B,MAAM,kBAAkB,cAA6B;GACnD,MAAM,SAAS,cAAc,OAAO,KAAK;GACzC,MAAM,SAAS,kBAAkB,MAAM;AAEvC,OAAI,WAAW,EACb;AAGF,yBAAsB,SACnB,sBAAsB,QAAQ,SAAS,UAAU;;EAGtD,MAAM,qBAAqB;AACzB,OAAI,sBAAsB,SAAS,GAAG;IACpC,MAAM,mBACJ,kBAAkB,MAAM,sBAAsB;AAChD,QAAI,iBACF,gBAAe,iBAAiB,IAAG;;;AAKzC,WAAa;GACX;GACA;GACD,CAAA;AAED,kBAAgB;AAEd,yBAAsB,QAAQ;IAC/B;EAED,MAAM,gBAAgB,eAA8B;AAClD,UAAO;IACL,OAAO,QAAA,kBAAkB,QAAQ,KAAK;IAEtC,MAAM,QAAA,kBAAkB,OAAO,KAAK,IAAI;IAC1C;IACD;AAED,iBACE,mBACM;AACJ,UAAO,QAAQ;KAEjB,EAAE,QAAQ,CAAC,YAAY,EAAE,CAC3B;;UAIU,OAAA,SAAA,WAAA,EADR,YA4CiB,MAAA,eAAA,EAAA;;IA1Cf,OAAM;;2BAyCA,CAxCN,mBAwCM,OAAA;cAvCA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAK,eAAE,cAAA,MAAa;QAEb,kBAAA,MAAkB,UAAA,WAAA,EAD1B,mBAwBK,MAxBL,YAwBK,EAAA,UAAA,KAAA,EArBH,mBAoBW,UAAA,MAAA,WAnBe,kBAAA,QAAhB,MAAM,UAAK;yBAEnB,mBAgBK,MAAA;WAjBC,KAAK;MAET,OAAK,eAAA,CAAC,6IAA2I,EAAA,UAC7H,UAAU,sBAAA,OAAqB,CAAA,CAAA;MAClD,UAAK,WAAE,eAAe,KAAK,IAAG;SAC/B,mBAOM,OAPN,YAOM,CANJ,mBAIY,QAAA;MAHV,OAAM;MACL,OAAK,eAAA,EAAA,iBAAuC,QAAA,YAAY,OAAA,CAAA;kCAE/C,MACZ,gBAAG,KAAK,IAAG,EAAA,EAAA,CAAA,CAAA,EAEb,mBAGO,QAHP,YAGO,gBADF,KAAK,MAAK,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA;iCAKrB,YAOe,MAAA,aAAA,EAAA;;KALb,OAAM;KACN,SAAQ;KACP,SAAO;;4BACyB,CAAjC,YAAiC,MAAA,eAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,EAAA,OAAA,OAAA,OAAA,KAAA,gBAAG,kBAEnC,GAAA,EAAA,CAAA;;mCAEA,mBAC6E,OAAA,EAA3E,OAAM,oEAAkE,EAAA,MAAA,GAAA,EAAA,EAAA,EAAA,CAAA,CAAA"}

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

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

@@ -0,0 +1,152 @@
+import CodeInput_default from "../../../components/code-input/CodeInput.vue.js";
+import DataTable_default from "../../../components/data-table/DataTable.vue.js";
+import DataTableCell_default from "../../../components/data-table/DataTableCell.vue.js";
+import DataTableHeader_default from "../../../components/data-table/DataTableHeader.vue.js";
+import DataTableRow_default from "../../../components/data-table/DataTableRow.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
+import { ScalarButton } from "@scalar/components";
+import { ScalarIconTrash } from "@scalar/icons";
+//#region src/v2/features/environments/components/EnvironmentVariablesTable.vue?vue&type=script&setup=true&lang.ts
+var EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EnvironmentVariablesTable",
+	props: {
+		environment: {},
+		environmentName: {},
+		eventBus: {},
+		collectionType: {}
+	},
+	setup(__props) {
+		/** Column widths: Name, Value, Actions (delete button) */
+		const COLUMNS = [
+			"1fr",
+			"1fr",
+			"36px"
+		];
+		/** Adds an empty row at the end for creating new variables */
+		const displayRows = computed(() => {
+			/** Normalize the variables to have a name and value */
+			const variableRows = __props.environment.variables.map((v) => ({
+				name: v.name,
+				value: typeof v.value === "string" ? v.value : v.value.default
+			}));
+			const lastRow = __props.environment.variables.at(-1);
+			const hasContentInLastRow = lastRow && (lastRow.name !== "" || lastRow.value !== "");
+			if (!lastRow || hasContentInLastRow) return [...variableRows, {
+				name: "",
+				value: ""
+			}];
+			return variableRows;
+		});
+		/** Updates an existing variable or creates a new one */
+		const handleVariableChange = (name, value, index) => {
+			const isNewVariable = index >= __props.environment.variables.length;
+			/**
+			* Do not allow adding a new variable with an empty name on the last row,
+			* we allow it on other rows as it will delete the row
+			*/
+			if (!name && isNewVariable) return;
+			if (index >= __props.environment.variables.length) {
+				__props.eventBus.emit("environment:upsert:environment-variable", {
+					environmentName: __props.environmentName,
+					variable: {
+						name,
+						value
+					},
+					collectionType: __props.collectionType
+				});
+				return;
+			}
+			__props.eventBus.emit("environment:upsert:environment-variable", {
+				environmentName: __props.environmentName,
+				variable: {
+					name,
+					value
+				},
+				index,
+				collectionType: __props.collectionType
+			});
+		};
+		/** Deletes a variable by index */
+		const handleVariableDelete = (index) => __props.eventBus.emit("environment:delete:environment-variable", {
+			environmentName: __props.environmentName,
+			index,
+			collectionType: __props.collectionType
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DataTable_default), {
+				class: "group/table data-table h-min flex-1 rounded",
+				columns: COLUMNS
+			}, {
+				default: withCtx(() => [createVNode(unref(DataTableRow_default), { class: "sr-only !block" }, {
+					default: withCtx(() => [
+						createVNode(unref(DataTableHeader_default), null, {
+							default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("Name", -1)])]),
+							_: 1
+						}),
+						createVNode(unref(DataTableHeader_default), null, {
+							default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("Value", -1)])]),
+							_: 1
+						}),
+						createVNode(unref(DataTableHeader_default), null, {
+							default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Actions", -1)])]),
+							_: 1
+						})
+					]),
+					_: 1
+				}), (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
+					return openBlock(), createBlock(unref(DataTableRow_default), {
+						key: index,
+						class: "group/row"
+					}, {
+						default: withCtx(() => [
+							createVNode(unref(DataTableCell_default), null, {
+								default: withCtx(() => [createVNode(unref(CodeInput_default), {
+									"aria-label": "Environment Variable Name",
+									disableCloseBrackets: "",
+									disableTabIndent: "",
+									environment: void 0,
+									lineWrapping: "",
+									modelValue: row.name,
+									placeholder: "Name",
+									"onUpdate:modelValue": (name) => handleVariableChange(name, row.value, index)
+								}, null, 8, ["modelValue", "onUpdate:modelValue"])]),
+								_: 2
+							}, 1024),
+							createVNode(unref(DataTableCell_default), null, {
+								default: withCtx(() => [createVNode(unref(CodeInput_default), {
+									"aria-label": "Environment Variable Value",
+									disableTabIndent: "",
+									environment: void 0,
+									lineWrapping: "",
+									modelValue: row.value,
+									placeholder: "Value",
+									"onUpdate:modelValue": (value) => handleVariableChange(row.name, value, index)
+								}, null, 8, ["modelValue", "onUpdate:modelValue"])]),
+								_: 2
+							}, 1024),
+							createVNode(unref(DataTableCell_default), { class: "flex items-center justify-center" }, {
+								default: withCtx(() => [index < __props.environment.variables.length ? (openBlock(), createBlock(unref(ScalarButton), {
+									key: 0,
+									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",
+									size: "sm",
+									variant: "ghost",
+									onClick: ($event) => handleVariableDelete(index)
+								}, {
+									default: withCtx(() => [createVNode(unref(ScalarIconTrash), { class: "size-3.5" })]),
+									_: 1
+								}, 8, ["onClick"])) : createCommentVNode("", true)]),
+								_: 2
+							}, 1024)
+						]),
+						_: 2
+					}, 1024);
+				}), 128))]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EnvironmentVariablesTable.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentVariablesTable.vue.script.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":";;;;;;;;;;;;;;;;;;;EA2BA,MAAM,UAAU;GAAC;GAAO;GAAO;GAAM;;EAGrC,MAAM,cAAc,eAKZ;;GAEN,MAAM,eAAe,QAAA,YAAY,UAAU,KAAK,OAAO;IACrD,MAAM,EAAE;IACR,OAAO,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ,EAAE,MAAM;IACxD,EAAC;GAEF,MAAM,UAAU,QAAA,YAAY,UAAU,GAAG,GAAE;GAC3C,MAAM,sBACJ,YAAY,QAAQ,SAAS,MAAM,QAAQ,UAAU;AAGvD,OAAI,CAAC,WAAW,oBACd,QAAO,CAAC,GAAG,cAAc;IAAE,MAAM;IAAI,OAAO;IAAI,CAAA;AAGlD,UAAO;IACR;;EAGD,MAAM,wBACJ,MACA,OACA,UACS;GACT,MAAM,gBAAgB,SAAS,QAAA,YAAY,UAAU;;;;;AAMrD,OAAI,CAAC,QAAQ,cACX;AAIF,OAAI,SAAS,QAAA,YAAY,UAAU,QAAQ;AACzC,YAAA,SAAS,KAAK,2CAA2C;KACvD,iBAAc,QAAA;KACd,UAAU;MAAE;MAAM;MAAO;KACzB,gBAAa,QAAA;KACd,CAAA;AACD;;AAIF,WAAA,SAAS,KAAK,2CAA2C;IACvD,iBAAc,QAAA;IACd,UAAU;KAAE;KAAM;KAAO;IACzB;IACA,gBAAa,QAAA;IACd,CAAA;;;EAIH,MAAM,wBAAwB,UAC5B,QAAA,SAAS,KAAK,2CAA2C;GACvD,iBAAc,QAAA;GACd;GACA,gBAAa,QAAA;GACd,CAAA;;uBAID,YAwDY,MAAA,kBAAA,EAAA;IAvDV,OAAM;IACL,SAAS;;2BAMK,CAJf,YAIe,MAAA,qBAAA,EAAA,EAJD,OAAM,kBAAgB,EAAA;4BACK;MAAvC,YAAuC,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAJ,QAAI,GAAA,CAAA,EAAA,CAAA;;;MACrB,YAAwC,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAL,SAAK,GAAA,CAAA,EAAA,CAAA;;;MACtB,YAA0C,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAP,WAAO,GAAA,CAAA,EAAA,CAAA;;;;;0BAI1B,mBA4Ce,UAAA,MAAA,WA3CU,YAAA,QAAf,KAAK,UAAK;yBADpB,YA4Ce,MAAA,qBAAA,EAAA;MA1CZ,KAAK;MACN,OAAM;;6BAcU;OAZhB,YAYgB,MAAA,sBAAA,EAAA,MAAA;+BADR,CAVN,YAUM,MAAA,kBAAA,EAAA;SATJ,cAAW;SACX,sBAAA;SACA,kBAAA;SACC,aAAa,KAAA;SACd,cAAA;SACC,YAAY,IAAI;SACjB,aAAY;SACX,wBAAiC,SAAS,qBAAqB,MAAM,IAAI,OAAO,MAAK;;;;OAM1F,YAWgB,MAAA,sBAAA,EAAA,MAAA;+BADR,CATN,YASM,MAAA,kBAAA,EAAA;SARJ,cAAW;SACX,kBAAA;SACC,aAAa,KAAA;SACd,cAAA;SACC,YAAY,IAAI;SACjB,aAAY;SACX,wBAAiC,UAAU,qBAAqB,IAAI,MAAM,OAAO,MAAK;;;;OAM3F,YASgB,MAAA,sBAAA,EAAA,EATD,OAAM,oCAAkC,EAAA;+BAQtC,CANP,QAAQ,QAAA,YAAY,UAAU,UAAA,WAAA,EADtC,YAOe,MAAA,aAAA,EAAA;;SALb,OAAM;SACN,MAAK;SACL,SAAQ;SACP,UAAK,WAAE,qBAAqB,MAAK;;gCACE,CAApC,YAAoC,MAAA,gBAAA,EAAA,EAAnB,OAAM,YAAU,CAAA,CAAA,CAAA"}

package/dist/v2/features/environments/index.d.ts

@@ -1,2 +1,2 @@
-export { default as EnvironmentsList } from './EnvironmentsList.vue';
+export { default as EnvironmentsList } from './EnvironmentsList.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/features/environments/index.js

@@ -1,4 +1,2 @@
-import "../../../code-input-iq-moLxi.js";
-import "../../../data-table-PL7e8NRO.js";
-import { t as EnvironmentsList_default } from "../../../environments-ByLK9lnC.js";
+import EnvironmentsList_default from "./EnvironmentsList.vue.js";
 export { EnvironmentsList_default as EnvironmentsList };

package/dist/v2/features/global-cookies/components/CookiesTable.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.js";
+import CookiesTable_vue_vue_type_script_setup_true_lang_default from "./CookiesTable.vue.script.js";
+/* empty css                           */
+//#region src/v2/features/global-cookies/components/CookiesTable.vue
+var CookiesTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CookiesTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ddfccc08"]]);
+//#endregion
+export { CookiesTable_default as default };
+
+//# sourceMappingURL=CookiesTable.vue.js.map

package/dist/v2/features/global-cookies/components/CookiesTable.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CookiesTable.vue.js","names":[],"sources":["../../../../../src/v2/features/global-cookies/components/CookiesTable.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 { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport { computed } from 'vue'\n\nimport { CodeInput } from '@/v2/components/code-input'\nimport {\n  DataTable,\n  DataTableCell,\n  DataTableCheckbox,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\n\nconst { cookies, eventBus, collectionType } = defineProps<\n  {\n    cookies: XScalarCookie[]\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Column widths: Enabled checkbox, Name, Value, Domain, Actions (delete button) */\nconst COLUMNS = ['32px', '1fr', '1fr', '1fr', '36px']\n\n/** Adds an empty row at the end for creating new cookies */\nconst displayRows = computed<\n  {\n    name: string\n    value: string\n    domain: string\n    isDisabled: boolean\n  }[]\n>(() => {\n  /** Normalize the cookies to have name, value, and domain */\n  const cookieRows = cookies.map((cookie) => ({\n    name: cookie.name,\n    value: cookie.value,\n    domain: cookie.domain ?? '',\n    isDisabled: cookie.isDisabled ?? false,\n  }))\n\n  const lastCookie = cookies.at(-1)\n  const hasContentInLastRow =\n    lastCookie &&\n    (lastCookie.name !== '' ||\n      lastCookie.value !== '' ||\n      lastCookie.domain !== '')\n\n  // Add the extra row at the end\n  if (!lastCookie || hasContentInLastRow) {\n    return [\n      ...cookieRows,\n      { name: '', value: '', domain: '', isDisabled: true },\n    ]\n  }\n\n  return cookieRows\n})\n\n/** Updates an existing cookie or creates a new one */\nconst handleCookieChange = (\n  name: string,\n  value: string,\n  domain: string,\n  isDisabled: boolean,\n  index: number,\n): void => {\n  const isNewCookie = index >= cookies.length\n\n  /**\n   * Do not allow adding a new cookie 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 && isNewCookie) {\n    return\n  }\n\n  // Adding a new cookie\n  if (index >= cookies.length) {\n    eventBus.emit('cookie:upsert:cookie', {\n      payload: { name, value, domain, isDisabled: false },\n      collectionType,\n    })\n    return\n  }\n\n  // Updating existing cookie\n  eventBus.emit('cookie:upsert:cookie', {\n    payload: { name, value, domain, isDisabled },\n    collectionType,\n    index,\n  })\n}\n\n/** Deletes a cookie by index */\nconst handleCookieDelete = (index: number): void =>\n  eventBus.emit('cookie:delete:cookie', {\n    cookieName: cookies[index]?.name ?? '',\n    index,\n    collectionType,\n  })\n</script>\n<template>\n  <!-- Cookies table -->\n  <DataTable\n    class=\"group/table data-table h-min flex-1 rounded border border-t-0\"\n    :columns=\"COLUMNS\">\n    <!-- Accessibility header row -->\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>Enabled</DataTableHeader>\n      <DataTableHeader>Name</DataTableHeader>\n      <DataTableHeader>Value</DataTableHeader>\n      <DataTableHeader>Domain</DataTableHeader>\n      <DataTableHeader>Actions</DataTableHeader>\n    </DataTableRow>\n\n    <!-- Cookie rows -->\n    <DataTableRow\n      v-for=\"(row, index) in displayRows\"\n      :key=\"index\"\n      class=\"group/row\">\n      <!-- Enabled checkbox -->\n      <DataTableCheckbox\n        class=\"!border-r\"\n        :modelValue=\"!row.isDisabled\"\n        @update:modelValue=\"\n          (value) =>\n            handleCookieChange(row.name, row.value, row.domain, !value, index)\n        \" />\n\n      <!-- Name -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Cookie Name\"\n          disableCloseBrackets\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.name\"\n          placeholder=\"Name\"\n          @update:modelValue=\"\n            (name) =>\n              handleCookieChange(\n                name,\n                row.value,\n                row.domain,\n                row.isDisabled,\n                index,\n              )\n          \" />\n      </DataTableCell>\n\n      <!-- Value -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Cookie Value\"\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.value\"\n          placeholder=\"Value\"\n          @update:modelValue=\"\n            (value) =>\n              handleCookieChange(\n                row.name,\n                value,\n                row.domain,\n                row.isDisabled,\n                index,\n              )\n          \" />\n      </DataTableCell>\n\n      <!-- Domain -->\n      <DataTableCell>\n        <CodeInput\n          aria-label=\"Cookie Domain\"\n          disableCloseBrackets\n          disableTabIndent\n          :environment=\"undefined\"\n          lineWrapping\n          :modelValue=\"row.domain\"\n          placeholder=\"Domain\"\n          @update:modelValue=\"\n            (domain) =>\n              handleCookieChange(\n                row.name,\n                row.value,\n                domain,\n                row.isDisabled,\n                index,\n              )\n          \" />\n      </DataTableCell>\n\n      <!-- Delete button -->\n      <DataTableCell class=\"flex items-center justify-center\">\n        <ScalarButton\n          v-if=\"index < cookies.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=\"handleCookieDelete(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":""}