@scalar/api-client 2.38.3 → 2.38.4

package/dist/{CodeInput-BN7uw3Bh.js.map → CodeInput-BTN8cC5h.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CodeInput-BN7uw3Bh.js","names":["$attrs","$slots"],"sources":["../src/views/Environment/EnvironmentVariableDropdown.vue","../src/views/Environment/EnvironmentVariableDropdown.vue","../src/components/DataTable/DataTableInputSelect.vue","../src/components/DataTable/DataTableInputSelect.vue","../src/components/CodeInput/codeVariableWidget.ts","../src/components/CodeInput/CodeInput.vue","../src/components/CodeInput/CodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconGlobe, ScalarIconPlus } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { parseEnvVariables } from '@/libs'\nimport { getEnvColor, type EnvVariables } from '@/libs/env-helpers'\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\n\nconst props = defineProps<{\n  query: string\n  environment: Environment\n  envVariables: EnvVariables\n  // withServers?: boolean\n  dropdownPosition?: { left: number; top: number }\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\nconst router = useRouter()\nconst { activeCollection } = useActiveEntities()\n\nconst redirectToEnvironment = () => {\n  if (!router) {\n    return\n  }\n  const { currentRoute, push } = router\n  const workspaceId = currentRoute.value.params.workspace\n\n  // Global environment page for draft collection\n  if (\n    !activeCollection.value ||\n    activeCollection.value.info?.title === 'Drafts'\n  ) {\n    push({\n      name: 'environment.default',\n      params: {\n        [PathId.Workspace]: workspaceId,\n      },\n    })\n  } else {\n    // Collection environment page for collections\n    push({\n      name: 'collection.environment',\n      params: {\n        [PathId.Collection]: activeCollection.value.uid,\n      },\n    })\n  }\n  isOpen.value = false\n}\n\nconst fuse = new Fuse(parseEnvVariables(props.envVariables), {\n  keys: ['key', 'value'],\n})\n\nconst filteredVariables = computed(() => {\n  const searchQuery = props.query\n\n  if (!searchQuery) {\n    /** return the last 4 environment variables on first display */\n    return parseEnvVariables(props.envVariables)\n      .slice(-4)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  /** filter environment variables by name */\n  const result = fuse.search(searchQuery, { 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: (props.dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (props.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                v-if=\"\n                  item.source === 'collection' &&\n                  environment.name !== 'No Environment'\n                \"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: getEnvColor(environment),\n                }\"></span>\n              <ScalarIconGlobe\n                v-else\n                class=\"-ml-0.25 size-2.5\"\n                icon=\"Globe\" />\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-if=\"router\"\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","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconGlobe, ScalarIconPlus } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { parseEnvVariables } from '@/libs'\nimport { getEnvColor, type EnvVariables } from '@/libs/env-helpers'\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\n\nconst props = defineProps<{\n  query: string\n  environment: Environment\n  envVariables: EnvVariables\n  // withServers?: boolean\n  dropdownPosition?: { left: number; top: number }\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\nconst router = useRouter()\nconst { activeCollection } = useActiveEntities()\n\nconst redirectToEnvironment = () => {\n  if (!router) {\n    return\n  }\n  const { currentRoute, push } = router\n  const workspaceId = currentRoute.value.params.workspace\n\n  // Global environment page for draft collection\n  if (\n    !activeCollection.value ||\n    activeCollection.value.info?.title === 'Drafts'\n  ) {\n    push({\n      name: 'environment.default',\n      params: {\n        [PathId.Workspace]: workspaceId,\n      },\n    })\n  } else {\n    // Collection environment page for collections\n    push({\n      name: 'collection.environment',\n      params: {\n        [PathId.Collection]: activeCollection.value.uid,\n      },\n    })\n  }\n  isOpen.value = false\n}\n\nconst fuse = new Fuse(parseEnvVariables(props.envVariables), {\n  keys: ['key', 'value'],\n})\n\nconst filteredVariables = computed(() => {\n  const searchQuery = props.query\n\n  if (!searchQuery) {\n    /** return the last 4 environment variables on first display */\n    return parseEnvVariables(props.envVariables)\n      .slice(-4)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  /** filter environment variables by name */\n  const result = fuse.search(searchQuery, { 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: (props.dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (props.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                v-if=\"\n                  item.source === 'collection' &&\n                  environment.name !== 'No Environment'\n                \"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: getEnvColor(environment),\n                }\"></span>\n              <ScalarIconGlobe\n                v-else\n                class=\"-ml-0.25 size-2.5\"\n                icon=\"Globe\" />\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-if=\"router\"\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","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarComboboxMultiselect,\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n  ScalarIcon,\n} from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string | number\n    value?: string[]\n    default?: string | number | undefined\n    canAddCustomValue?: boolean\n    type?: string | undefined\n  }>(),\n  { canAddCustomValue: true },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string): void\n}>()\n\nconst options = computed(() => props.value ?? [])\nconst addingCustomValue = ref(false)\nconst customValue = ref('')\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nwatch(customValue, (newValue) => {\n  emit('update:modelValue', newValue)\n})\n\nconst updateSelected = (value: string) => {\n  emit('update:modelValue', value)\n  addingCustomValue.value = false\n}\n\nconst addCustomValue = () => {\n  if (customValue.value.trim()) {\n    updateSelected(customValue.value)\n  }\n}\n\nconst handleBlur = () => {\n  if (!customValue.value.trim()) {\n    emit('update:modelValue', '')\n  }\n  addingCustomValue.value = false\n}\n\nconst isSelected = (value: string) => {\n  return props.modelValue.toString() === value\n}\n\nwatch(addingCustomValue, (newValue) => {\n  if (newValue) {\n    nextTick(() => {\n      inputRef.value?.focus()\n    })\n  }\n})\n\nconst initialValue = computed(() => {\n  return props.modelValue !== undefined ? props.modelValue : props.default\n})\n\n/** Currently selected array example values */\nconst selectedArrayOptions = computed(() => {\n  const selectedValues = new Set(props.modelValue.toString().split(', '))\n  return options.value\n    .filter((option) => selectedValues.has(option))\n    .map((option) => ({ id: option, label: option, value: option }))\n})\n\n/** Options for the array type */\nconst arrayOptions = computed(() =>\n  options.value.map((option) => ({ id: option, label: option, value: option })),\n)\n\n/** Update the model value when the selected options change */\nconst updateSelectedOptions = (selectedOptions: any) => {\n  const selectedValues = selectedOptions.map((option: any) => option.value)\n  emit('update:modelValue', selectedValues.join(', '))\n}\n</script>\n\n<template>\n  <div\n    class=\"group-[.alert]:outline-orange group-[.error]:outline-red w-full pr-10 -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\">\n    <template v-if=\"type === 'array'\">\n      <ScalarComboboxMultiselect\n        :modelValue=\"selectedArrayOptions\"\n        :options=\"arrayOptions\"\n        @update:modelValue=\"updateSelectedOptions\">\n        <ScalarButton\n          class=\"custom-scroll h-full justify-start gap-1.5 px-2 py-1.5 pr-6 font-normal outline-none\"\n          fullWidth\n          variant=\"ghost\">\n          <span class=\"text-c-1 whitespace-nowrap\">{{\n            selectedArrayOptions.length > 0\n              ? selectedArrayOptions.map((option) => option.label).join(', ')\n              : 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\"\n            class=\"min-w-4\" />\n        </ScalarButton>\n      </ScalarComboboxMultiselect>\n    </template>\n    <template v-else-if=\"addingCustomValue\">\n      <input\n        ref=\"inputRef\"\n        v-model=\"customValue\"\n        class=\"text-c-1 w-full min-w-0 border-none px-2 py-1.5 outline-none\"\n        placeholder=\"Value\"\n        type=\"text\"\n        @blur=\"handleBlur\"\n        @keyup.enter=\"addCustomValue\" />\n    </template>\n    <template v-else>\n      <ScalarDropdown\n        resize\n        :value=\"initialValue\">\n        <ScalarButton\n          class=\"size-full justify-start gap-1.5 overflow-auto px-2 py-1.5 font-normal whitespace-nowrap outline-none\"\n          variant=\"ghost\">\n          <span class=\"text-c-1 overflow-hidden text-ellipsis\">{{\n            initialValue || 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\" />\n        </ScalarButton>\n        <template #items>\n          <ScalarDropdownItem\n            v-for=\"option in options\"\n            :key=\"option\"\n            class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n            :value=\"option\"\n            @click=\"updateSelected(option)\">\n            <div\n              class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n              :class=\"\n                isSelected(option)\n                  ? 'bg-c-accent text-b-1'\n                  : 'shadow-border text-transparent'\n              \">\n              <ScalarIcon\n                class=\"size-2.5\"\n                icon=\"Checkmark\"\n                thickness=\"3\" />\n            </div>\n            <span class=\"overflow-hidden text-ellipsis\">{{ option }}</span>\n          </ScalarDropdownItem>\n          <template v-if=\"canAddCustomValue\">\n            <ScalarDropdownDivider v-if=\"options.length\" />\n            <ScalarDropdownItem\n              class=\"flex items-center gap-1.5\"\n              @click=\"addingCustomValue = true\">\n              <div class=\"flex h-4 w-4 items-center justify-center\">\n                <ScalarIcon\n                  icon=\"Add\"\n                  size=\"sm\" />\n              </div>\n              <span>Add value</span>\n            </ScalarDropdownItem>\n          </template>\n        </template>\n      </ScalarDropdown>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarComboboxMultiselect,\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n  ScalarIcon,\n} from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string | number\n    value?: string[]\n    default?: string | number | undefined\n    canAddCustomValue?: boolean\n    type?: string | undefined\n  }>(),\n  { canAddCustomValue: true },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string): void\n}>()\n\nconst options = computed(() => props.value ?? [])\nconst addingCustomValue = ref(false)\nconst customValue = ref('')\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nwatch(customValue, (newValue) => {\n  emit('update:modelValue', newValue)\n})\n\nconst updateSelected = (value: string) => {\n  emit('update:modelValue', value)\n  addingCustomValue.value = false\n}\n\nconst addCustomValue = () => {\n  if (customValue.value.trim()) {\n    updateSelected(customValue.value)\n  }\n}\n\nconst handleBlur = () => {\n  if (!customValue.value.trim()) {\n    emit('update:modelValue', '')\n  }\n  addingCustomValue.value = false\n}\n\nconst isSelected = (value: string) => {\n  return props.modelValue.toString() === value\n}\n\nwatch(addingCustomValue, (newValue) => {\n  if (newValue) {\n    nextTick(() => {\n      inputRef.value?.focus()\n    })\n  }\n})\n\nconst initialValue = computed(() => {\n  return props.modelValue !== undefined ? props.modelValue : props.default\n})\n\n/** Currently selected array example values */\nconst selectedArrayOptions = computed(() => {\n  const selectedValues = new Set(props.modelValue.toString().split(', '))\n  return options.value\n    .filter((option) => selectedValues.has(option))\n    .map((option) => ({ id: option, label: option, value: option }))\n})\n\n/** Options for the array type */\nconst arrayOptions = computed(() =>\n  options.value.map((option) => ({ id: option, label: option, value: option })),\n)\n\n/** Update the model value when the selected options change */\nconst updateSelectedOptions = (selectedOptions: any) => {\n  const selectedValues = selectedOptions.map((option: any) => option.value)\n  emit('update:modelValue', selectedValues.join(', '))\n}\n</script>\n\n<template>\n  <div\n    class=\"group-[.alert]:outline-orange group-[.error]:outline-red w-full pr-10 -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\">\n    <template v-if=\"type === 'array'\">\n      <ScalarComboboxMultiselect\n        :modelValue=\"selectedArrayOptions\"\n        :options=\"arrayOptions\"\n        @update:modelValue=\"updateSelectedOptions\">\n        <ScalarButton\n          class=\"custom-scroll h-full justify-start gap-1.5 px-2 py-1.5 pr-6 font-normal outline-none\"\n          fullWidth\n          variant=\"ghost\">\n          <span class=\"text-c-1 whitespace-nowrap\">{{\n            selectedArrayOptions.length > 0\n              ? selectedArrayOptions.map((option) => option.label).join(', ')\n              : 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\"\n            class=\"min-w-4\" />\n        </ScalarButton>\n      </ScalarComboboxMultiselect>\n    </template>\n    <template v-else-if=\"addingCustomValue\">\n      <input\n        ref=\"inputRef\"\n        v-model=\"customValue\"\n        class=\"text-c-1 w-full min-w-0 border-none px-2 py-1.5 outline-none\"\n        placeholder=\"Value\"\n        type=\"text\"\n        @blur=\"handleBlur\"\n        @keyup.enter=\"addCustomValue\" />\n    </template>\n    <template v-else>\n      <ScalarDropdown\n        resize\n        :value=\"initialValue\">\n        <ScalarButton\n          class=\"size-full justify-start gap-1.5 overflow-auto px-2 py-1.5 font-normal whitespace-nowrap outline-none\"\n          variant=\"ghost\">\n          <span class=\"text-c-1 overflow-hidden text-ellipsis\">{{\n            initialValue || 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\" />\n        </ScalarButton>\n        <template #items>\n          <ScalarDropdownItem\n            v-for=\"option in options\"\n            :key=\"option\"\n            class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n            :value=\"option\"\n            @click=\"updateSelected(option)\">\n            <div\n              class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n              :class=\"\n                isSelected(option)\n                  ? 'bg-c-accent text-b-1'\n                  : 'shadow-border text-transparent'\n              \">\n              <ScalarIcon\n                class=\"size-2.5\"\n                icon=\"Checkmark\"\n                thickness=\"3\" />\n            </div>\n            <span class=\"overflow-hidden text-ellipsis\">{{ option }}</span>\n          </ScalarDropdownItem>\n          <template v-if=\"canAddCustomValue\">\n            <ScalarDropdownDivider v-if=\"options.length\" />\n            <ScalarDropdownItem\n              class=\"flex items-center gap-1.5\"\n              @click=\"addingCustomValue = true\">\n              <div class=\"flex h-4 w-4 items-center justify-center\">\n                <ScalarIcon\n                  icon=\"Add\"\n                  size=\"sm\" />\n              </div>\n              <span>Add value</span>\n            </ScalarDropdownItem>\n          </template>\n        </template>\n      </ScalarDropdown>\n    </template>\n  </div>\n</template>\n","import { ScalarTooltip } from '@scalar/components'\nimport { ScalarIconGlobe } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport { REGEX } from '@scalar/oas-utils/helpers'\nimport {\n  Decoration,\n  type DecorationSet,\n  EditorView,\n  RangeSetBuilder,\n  ViewPlugin,\n  type ViewUpdate,\n  WidgetType,\n} from '@scalar/use-codemirror'\nimport { nanoid } from 'nanoid'\nimport { createApp, defineComponent, h } from 'vue'\n\nimport { parseEnvVariables } from '@/libs'\nimport { type EnvVariables, getEnvColor } from '@/libs/env-helpers'\n\n/**\n * Displays the value of a variable of the active environment in a pill\n */\nclass PillWidget extends WidgetType {\n  private app: any\n  private uid: string\n  environment: Environment | undefined\n  envVariables: EnvVariables | undefined\n  isReadOnly: boolean\n\n  constructor(\n    private variableName: string,\n    environment: Environment | undefined,\n    envVariables: EnvVariables | undefined,\n    isReadOnly: boolean | undefined,\n  ) {\n    super()\n    this.variableName = variableName\n    this.environment = environment\n    this.envVariables = envVariables\n    this.isReadOnly = isReadOnly ?? false\n    this.uid = nanoid()\n  }\n\n  toDOM() {\n    const span = document.createElement('span')\n    span.className = 'cm-pill'\n    span.textContent = `${this.variableName}`\n\n    const tooltipComponent = defineComponent({\n      props: { variableName: { type: String, default: null } },\n      render: () => {\n        const val = this.envVariables\n          ? parseEnvVariables(this.envVariables).find((thing) => thing.key === this.variableName)\n          : undefined\n\n        // Set the pill color based on the environment source or fallback to default color\n        const isGlobal = val?.source === 'global'\n        const pillColor = isGlobal\n          ? 'var(--scalar-color-1)'\n          : val && this.environment && this.environment.name !== 'No Environment'\n            ? getEnvColor(this.environment)\n            : 'var(--scalar-color-1)'\n\n        span.style.setProperty('--tw-bg-base', pillColor)\n\n        // Set opacity based on the existence of a value\n        span.style.opacity = val?.value ? '1' : '0.5'\n\n        // Tooltip content as string\n        const tooltipContent = val?.value || 'No value'\n\n        // Tooltip trigger element\n        const tooltipTrigger = h('div', { class: 'flex items-center gap-1 whitespace-nowrap' }, [\n          (isGlobal || (this.environment?.name === 'No Environment' && val?.value)) &&\n            h(ScalarIconGlobe, { class: 'size-3 -ml-1', icon: 'Globe' }),\n          h('span', this.variableName),\n        ])\n\n        return h(\n          ScalarTooltip,\n          {\n            content: tooltipContent,\n            delay: 0,\n            placement: 'bottom',\n            offset: 6,\n          },\n          {\n            default: () => tooltipTrigger,\n          },\n        )\n      },\n    })\n\n    this.app = createApp(tooltipComponent, { variableName: this.variableName })\n    this.app.mount(span)\n\n    return span\n  }\n\n  override destroy() {\n    if (this.app) {\n      this.app.unmount()\n    }\n  }\n\n  override eq(other: WidgetType) {\n    return other instanceof PillWidget && other.variableName === this.variableName && other.uid === this.uid\n  }\n\n  override ignoreEvent() {\n    return false\n  }\n}\n\n/**\n * Styles the active environment variable pill\n */\nexport const pillPlugin = (props: {\n  environment: Environment | undefined\n  envVariables: EnvVariables | undefined\n  isReadOnly: boolean | undefined\n}) =>\n  ViewPlugin.fromClass(\n    class {\n      decorations: DecorationSet\n\n      constructor(view: EditorView) {\n        this.decorations = this.buildDecorations(view)\n      }\n\n      update(update: ViewUpdate) {\n        if (update.docChanged || update.viewportChanged) {\n          requestAnimationFrame(() => {\n            this.decorations = this.buildDecorations(update.view)\n            update.view.update([])\n          })\n        }\n      }\n\n      buildDecorations(view: EditorView) {\n        const builder = new RangeSetBuilder<Decoration>()\n\n        for (const { from, to } of view.visibleRanges) {\n          const text = view.state.doc.sliceString(from, to)\n          let match\n\n          while ((match = REGEX.VARIABLES.exec(text)) !== null) {\n            const start = from + match.index\n            const end = start + match[0].length\n            const variableName = match[1] ?? ''\n            builder.add(\n              start,\n              end,\n              Decoration.widget({\n                widget: new PillWidget(variableName, props.environment, props.envVariables, props.isReadOnly),\n                side: 1,\n              }),\n            )\n          }\n        }\n\n        return builder.finish()\n      }\n    },\n    {\n      decorations: (v) => v.decorations,\n    },\n  )\n\nexport const backspaceCommand = EditorView.domEventHandlers({\n  keydown(event, view) {\n    if (event.key === 'Backspace') {\n      const { state } = view\n      const { from, to } = state.selection.main\n\n      // Prevent breaking line content addition on pill removal\n      if (from === 0 && to === state.doc.length) {\n        view.dispatch({\n          changes: { from: 0, to: state.doc.length },\n          selection: { anchor: 0 },\n        })\n        event.preventDefault()\n        return true\n      }\n\n      if (from === to && from > 0) {\n        const before = state.doc.sliceString(from - 2, from)\n        if (before === '}}') {\n          view.dispatch({\n            changes: { from: from - 2, to },\n            selection: { anchor: from - 2 },\n          })\n          event.preventDefault()\n          return true\n        }\n      }\n    }\n    return false\n  },\n})\n","<script setup lang=\"ts\">\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport { useLayout } from '@/hooks'\nimport type { EnvVariable } from '@/store/active-entities'\nimport EnvironmentVariableDropdown from '@/views/Environment/EnvironmentVariableDropdown.vue'\n\nimport DataTableInputSelect from '../DataTable/DataTableInputSelect.vue'\nimport { backspaceCommand, pillPlugin } from './codeVariableWidget'\n\nconst props = withDefaults(\n  defineProps<{\n    colorPicker?: boolean\n    disabled?: boolean\n    modelValue: string | number\n    error?: boolean\n    emitOnBlur?: boolean\n    extensions?: Extension[]\n    lineNumbers?: boolean\n    lint?: boolean\n    disableTabIndent?: boolean\n    language?: CodeMirrorLanguage\n    handleFieldSubmit?: (e: string) => void\n    handleFieldChange?: (e: string) => void\n    placeholder?: string\n    required?: boolean\n    disableEnter?: boolean\n    disableCloseBrackets?: boolean\n    enum?: string[]\n    examples?: string[]\n    type?: string | string[] | undefined\n    nullable?: boolean\n    withVariables?: boolean\n    importCurl?: boolean\n    default?: string | number\n    environment: Environment\n    envVariables: EnvVariable[]\n    lineWrapping?: boolean\n  }>(),\n  {\n    disableCloseBrackets: false,\n    disableEnter: false,\n    extensions: () => [],\n    disableTabIndent: false,\n    emitOnBlur: true,\n    colorPicker: false,\n    nullable: false,\n    withVariables: true,\n    disabled: false,\n    lineWrapping: false,\n  },\n)\nconst emit = defineEmits<{\n  (e: 'submit', v: string): void\n  (e: 'update:modelValue', v: string): void\n  (e: 'curl', v: string): void\n  (e: 'blur', v: string): void\n}>()\n\nconst attrs = useAttrs() as { id?: string }\nconst uid = (attrs.id as string) || `id-${nanoid()}`\n\nconst isFocused = ref(false)\n\n// Environment variable dropdown init\nconst showDropdown = ref(false)\nconst dropdownQuery = ref('')\nconst dropdownPosition = ref({ left: 0, top: 0 })\nconst dropdownRef = ref<InstanceType<\n  typeof EnvironmentVariableDropdown\n> | null>(null)\n\nconst { layout } = useLayout()\n\n// ---------------------------------------------------------------------------\n// Event mapping from codemirror to standard input interfaces\n\n/** Change is emitted during typing. This does not trigger validation */\nfunction handleChange(value: string) {\n  // We need to be careful, only if the value is different we trigger an update\n  // on initial load of the component, this gets triggered cause we set the content\n  if (value === props.modelValue) {\n    return null\n  }\n  if (props.importCurl && value.trim().toLowerCase().startsWith('curl')) {\n    emit('curl', value)\n    // Maintain previous input value\n    codeMirror.value?.dispatch({\n      changes: {\n        from: 0,\n        to: codeMirror.value.state.doc.length,\n        insert: String(props.modelValue),\n      },\n    })\n    // Prevent table value population on current request\n    return null\n  }\n\n  return props.handleFieldChange\n    ? props.handleFieldChange(value)\n    : emit('update:modelValue', value)\n}\n\n/** Submit is emitted on blur and enter. This will trigger validation */\nfunction handleSubmit(value: string) {\n  return props.handleFieldSubmit\n    ? props.handleFieldSubmit(value)\n    : emit('submit', value)\n}\n\n/** Optional submit on blur.  */\nfunction handleBlur(value: string) {\n  isFocused.value = false\n  if (props.emitOnBlur && props.modelValue) {\n    handleSubmit(value)\n  }\n  emit('blur', value)\n}\n\n// ---------------------------------------------------------------------------\n// Codemirror instance handling\n\n// WARNING: Extensions are non-reactive! If props change nothing will happen\n\nconst extensions: Extension[] = [...props.extensions]\nif (props.colorPicker) {\n  extensions.push(colorPickerExtension)\n}\n\n// Create a reactive pill plugin that updates when environment changes\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment: props.environment,\n    envVariables: props.envVariables,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n// Base extensions that will be used for the editor\nconst baseExtensions = computed(() => [\n  ...extensions,\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\nconst { codeMirror } = useCodeMirror({\n  content: toRef(() =>\n    props.modelValue !== undefined ? String(props.modelValue) : '',\n  ),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => (isFocused.value = true),\n  onBlur: (val) => handleBlur(val),\n  codeMirrorRef,\n  disableTabIndent: toRef(() => props.disableTabIndent),\n  disableEnter: toRef(() => props.disableEnter),\n  disableCloseBrackets: toRef(() => props.disableCloseBrackets),\n  lineNumbers: toRef(() => props.lineNumbers),\n  language: toRef(() => props.language),\n  lint: toRef(() => props.lint),\n  extensions: baseExtensions,\n  placeholder: toRef(() => props.placeholder),\n})\n\ncodeMirror.value?.focus()\n\n// If we specify autofocus then focus codemirror on creation\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\nconst { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n// Computed property to check if type is boolean and nullable\nconst booleanOptions = computed(() =>\n  props.nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\nconst handleKeyDown = (key: string, event: KeyboardEvent) => {\n  if (showDropdown.value) {\n    if (key === 'down') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('down')\n    } else if (key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('up')\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n  } else if (key === 'escape') {\n    if (!props.disableTabIndent) {\n      event.stopPropagation()\n    }\n  } else if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '')\n  }\n}\n\nconst defaultType = computed(() => {\n  return Array.isArray(props.type)\n    ? // Find the first type, that's not 'null'\n      (props.type.find((type) => type !== 'null') ?? 'string')\n    : // If it's not an array, just return the type\n      props.type\n})\n\nconst displayVariablesDropdown = computed(\n  () =>\n    showDropdown.value &&\n    props.withVariables &&\n    layout !== 'modal' &&\n    props.environment,\n)\n\ndefineExpose({\n  /** Expose focus method */\n  focus: () => {\n    codeMirror.value?.focus()\n  },\n  // Expose these methods for testing\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  modelValue: props.modelValue,\n})\n</script>\n<script lang=\"ts\">\n// use normal <script> to declare options\nexport default {\n  inheritAttrs: false,\n}\n</script>\n<template>\n  <template v-if=\"disabled\">\n    <div\n      class=\"text-c-2 flex cursor-default items-center justify-center\"\n      :class=\"layout === 'modal' ? 'font-code pr-2 pl-1 text-base' : 'px-2'\"\n      data-testid=\"code-input-disabled\">\n      <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n    </div>\n  </template>\n  <template v-else-if=\"props.enum && props.enum.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :type=\"defaultType\"\n      :value=\"props.enum\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"type === 'boolean' || type?.includes('boolean')\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :value=\"booleanOptions\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"props.examples && props.examples.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"props.modelValue\"\n      :value=\"props.examples\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else>\n    <div\n      :id=\"uid\"\n      v-bind=\"$attrs\"\n      ref=\"codeMirrorRef\"\n      class=\"group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden text-xs leading-[1.44] whitespace-nowrap -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\"\n      :class=\"{\n        'line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1':\n          lineWrapping,\n        'flow-code-input--error': error,\n      }\"\n      @keydown.down.stop=\"handleKeyDown('down', $event)\"\n      @keydown.enter=\"handleKeyDown('enter', $event)\"\n      @keydown.escape=\"handleKeyDown('escape', $event)\"\n      @keydown.up.stop=\"handleKeyDown('up', $event)\">\n      <div\n        v-if=\"!disableTabIndent\"\n        class=\"z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block\"\n        role=\"alert\">\n        Press\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Esc</kbd> then\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Tab</kbd> to exit\n      </div>\n    </div>\n  </template>\n  <div\n    v-if=\"$slots.warning\"\n    class=\"centered-y text-orange absolute right-7 text-xs\">\n    <slot name=\"warning\" />\n  </div>\n  <div\n    v-if=\"$slots.icon\"\n    class=\"centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1\">\n    <slot name=\"icon\" />\n  </div>\n  <div\n    v-if=\"required\"\n    class=\"required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 mr-0.5 pt-px pr-2 opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.alert]:shadow-none group-[.error]:bg-transparent group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0\">\n    Required\n  </div>\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown\"\n    ref=\"dropdownRef\"\n    :dropdownPosition=\"dropdownPosition\"\n    :envVariables=\"envVariables\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @select=\"handleDropdownSelect\" />\n</template>\n<style scoped>\n/*\n Deep styling for customizing Codemirror\n*/\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  padding: 0;\n  background: transparent;\n}\n:deep(.cm-placeholder) {\n  color: var(--scalar-color-3);\n}\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  max-height: 20px;\n  padding: 8px 0;\n}\n/* Tooltip helper */\n:deep(.cm-tooltip) {\n  background: transparent !important;\n  filter: brightness(var(--scalar-lifted-brightness));\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n  border: none !important;\n  outline: none !important;\n  overflow: hidden !important;\n}\n:deep(.cm-tooltip-autocomplete ul li) {\n  padding: 3px 6px !important;\n}\n:deep(.cm-completionIcon-type:after) {\n  color: var(--scalar-color-3) !important;\n}\n:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-1) !important;\n}\n:deep(.cm-tooltip-autocomplete ul) {\n  padding: 6px !important;\n  position: relative;\n}\n:deep(.cm-tooltip-autocomplete ul li:hover) {\n  border-radius: 3px;\n  color: var(--scalar-color-1) !important;\n  background: var(--scalar-background-3) !important;\n}\n/* Disable active line highlighting */\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: transparent;\n}\n/* Color selection matching */\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n/* Color Picker Swatches */\n:deep(.cm-css-color-picker-wrapper) {\n  display: inline-flex;\n  outline: 1px solid var(--scalar-background-3);\n  border-radius: 3px;\n  overflow: hidden;\n}\n/* Number gutter */\n:deep(.cm-gutters) {\n  background-color: transparent;\n  border-right: none;\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-small);\n  line-height: 22px;\n  border-radius: 0 0 0 3px;\n}\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n  background-color: var(--scalar-background-1);\n}\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  padding-left: 0px !important;\n  padding-right: 6px !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n:deep(.cm-lineNumbers .cm-gutterElement) {\n  min-width: fit-content;\n}\n:deep(.cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement) {\n  padding-left: 0 !important;\n}\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n.line-wrapping:focus-within :deep(.cm-content) {\n  display: inline-table;\n  min-height: fit-content;\n  padding: 3px 6px;\n  white-space: break-spaces;\n  word-break: break-all;\n}\n</style>\n<style>\n.cm-pill {\n  --tw-bg-base: var(--scalar-color-1);\n  color: var(--tw-bg-base);\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 94%) !important;\n}\n.cm-pill.bg-grey {\n  background: var(--scalar-background-3) !important;\n}\n.dark-mode .cm-pill {\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 90%) !important;\n}\n.cm-pill:first-of-type {\n  margin-left: 0;\n}\n.cm-editor .cm-widgetBuffer {\n  display: none;\n}\n.cm-foldPlaceholder:hover {\n  color: var(--scalar-color-1);\n}\n.cm-foldGutter .cm-gutterElement {\n  font-size: var(--scalar-heading-4);\n  padding: 2px !important;\n}\n.cm-foldGutter .cm-gutterElement:first-of-type {\n  display: none;\n}\n.cm-foldGutter .cm-gutterElement .cm-foldMarker {\n  padding: 2px;\n  padding-top: 2px;\n}\n.cm-foldGutter .cm-gutterElement:hover .cm-foldMarker {\n  background: var(--scalar-background-2);\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport { useLayout } from '@/hooks'\nimport type { EnvVariable } from '@/store/active-entities'\nimport EnvironmentVariableDropdown from '@/views/Environment/EnvironmentVariableDropdown.vue'\n\nimport DataTableInputSelect from '../DataTable/DataTableInputSelect.vue'\nimport { backspaceCommand, pillPlugin } from './codeVariableWidget'\n\nconst props = withDefaults(\n  defineProps<{\n    colorPicker?: boolean\n    disabled?: boolean\n    modelValue: string | number\n    error?: boolean\n    emitOnBlur?: boolean\n    extensions?: Extension[]\n    lineNumbers?: boolean\n    lint?: boolean\n    disableTabIndent?: boolean\n    language?: CodeMirrorLanguage\n    handleFieldSubmit?: (e: string) => void\n    handleFieldChange?: (e: string) => void\n    placeholder?: string\n    required?: boolean\n    disableEnter?: boolean\n    disableCloseBrackets?: boolean\n    enum?: string[]\n    examples?: string[]\n    type?: string | string[] | undefined\n    nullable?: boolean\n    withVariables?: boolean\n    importCurl?: boolean\n    default?: string | number\n    environment: Environment\n    envVariables: EnvVariable[]\n    lineWrapping?: boolean\n  }>(),\n  {\n    disableCloseBrackets: false,\n    disableEnter: false,\n    extensions: () => [],\n    disableTabIndent: false,\n    emitOnBlur: true,\n    colorPicker: false,\n    nullable: false,\n    withVariables: true,\n    disabled: false,\n    lineWrapping: false,\n  },\n)\nconst emit = defineEmits<{\n  (e: 'submit', v: string): void\n  (e: 'update:modelValue', v: string): void\n  (e: 'curl', v: string): void\n  (e: 'blur', v: string): void\n}>()\n\nconst attrs = useAttrs() as { id?: string }\nconst uid = (attrs.id as string) || `id-${nanoid()}`\n\nconst isFocused = ref(false)\n\n// Environment variable dropdown init\nconst showDropdown = ref(false)\nconst dropdownQuery = ref('')\nconst dropdownPosition = ref({ left: 0, top: 0 })\nconst dropdownRef = ref<InstanceType<\n  typeof EnvironmentVariableDropdown\n> | null>(null)\n\nconst { layout } = useLayout()\n\n// ---------------------------------------------------------------------------\n// Event mapping from codemirror to standard input interfaces\n\n/** Change is emitted during typing. This does not trigger validation */\nfunction handleChange(value: string) {\n  // We need to be careful, only if the value is different we trigger an update\n  // on initial load of the component, this gets triggered cause we set the content\n  if (value === props.modelValue) {\n    return null\n  }\n  if (props.importCurl && value.trim().toLowerCase().startsWith('curl')) {\n    emit('curl', value)\n    // Maintain previous input value\n    codeMirror.value?.dispatch({\n      changes: {\n        from: 0,\n        to: codeMirror.value.state.doc.length,\n        insert: String(props.modelValue),\n      },\n    })\n    // Prevent table value population on current request\n    return null\n  }\n\n  return props.handleFieldChange\n    ? props.handleFieldChange(value)\n    : emit('update:modelValue', value)\n}\n\n/** Submit is emitted on blur and enter. This will trigger validation */\nfunction handleSubmit(value: string) {\n  return props.handleFieldSubmit\n    ? props.handleFieldSubmit(value)\n    : emit('submit', value)\n}\n\n/** Optional submit on blur.  */\nfunction handleBlur(value: string) {\n  isFocused.value = false\n  if (props.emitOnBlur && props.modelValue) {\n    handleSubmit(value)\n  }\n  emit('blur', value)\n}\n\n// ---------------------------------------------------------------------------\n// Codemirror instance handling\n\n// WARNING: Extensions are non-reactive! If props change nothing will happen\n\nconst extensions: Extension[] = [...props.extensions]\nif (props.colorPicker) {\n  extensions.push(colorPickerExtension)\n}\n\n// Create a reactive pill plugin that updates when environment changes\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment: props.environment,\n    envVariables: props.envVariables,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n// Base extensions that will be used for the editor\nconst baseExtensions = computed(() => [\n  ...extensions,\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\nconst { codeMirror } = useCodeMirror({\n  content: toRef(() =>\n    props.modelValue !== undefined ? String(props.modelValue) : '',\n  ),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => (isFocused.value = true),\n  onBlur: (val) => handleBlur(val),\n  codeMirrorRef,\n  disableTabIndent: toRef(() => props.disableTabIndent),\n  disableEnter: toRef(() => props.disableEnter),\n  disableCloseBrackets: toRef(() => props.disableCloseBrackets),\n  lineNumbers: toRef(() => props.lineNumbers),\n  language: toRef(() => props.language),\n  lint: toRef(() => props.lint),\n  extensions: baseExtensions,\n  placeholder: toRef(() => props.placeholder),\n})\n\ncodeMirror.value?.focus()\n\n// If we specify autofocus then focus codemirror on creation\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\nconst { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n// Computed property to check if type is boolean and nullable\nconst booleanOptions = computed(() =>\n  props.nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\nconst handleKeyDown = (key: string, event: KeyboardEvent) => {\n  if (showDropdown.value) {\n    if (key === 'down') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('down')\n    } else if (key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('up')\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n  } else if (key === 'escape') {\n    if (!props.disableTabIndent) {\n      event.stopPropagation()\n    }\n  } else if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '')\n  }\n}\n\nconst defaultType = computed(() => {\n  return Array.isArray(props.type)\n    ? // Find the first type, that's not 'null'\n      (props.type.find((type) => type !== 'null') ?? 'string')\n    : // If it's not an array, just return the type\n      props.type\n})\n\nconst displayVariablesDropdown = computed(\n  () =>\n    showDropdown.value &&\n    props.withVariables &&\n    layout !== 'modal' &&\n    props.environment,\n)\n\ndefineExpose({\n  /** Expose focus method */\n  focus: () => {\n    codeMirror.value?.focus()\n  },\n  // Expose these methods for testing\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  modelValue: props.modelValue,\n})\n</script>\n<script lang=\"ts\">\n// use normal <script> to declare options\nexport default {\n  inheritAttrs: false,\n}\n</script>\n<template>\n  <template v-if=\"disabled\">\n    <div\n      class=\"text-c-2 flex cursor-default items-center justify-center\"\n      :class=\"layout === 'modal' ? 'font-code pr-2 pl-1 text-base' : 'px-2'\"\n      data-testid=\"code-input-disabled\">\n      <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n    </div>\n  </template>\n  <template v-else-if=\"props.enum && props.enum.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :type=\"defaultType\"\n      :value=\"props.enum\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"type === 'boolean' || type?.includes('boolean')\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :value=\"booleanOptions\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"props.examples && props.examples.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"props.modelValue\"\n      :value=\"props.examples\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else>\n    <div\n      :id=\"uid\"\n      v-bind=\"$attrs\"\n      ref=\"codeMirrorRef\"\n      class=\"group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden text-xs leading-[1.44] whitespace-nowrap -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\"\n      :class=\"{\n        'line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1':\n          lineWrapping,\n        'flow-code-input--error': error,\n      }\"\n      @keydown.down.stop=\"handleKeyDown('down', $event)\"\n      @keydown.enter=\"handleKeyDown('enter', $event)\"\n      @keydown.escape=\"handleKeyDown('escape', $event)\"\n      @keydown.up.stop=\"handleKeyDown('up', $event)\">\n      <div\n        v-if=\"!disableTabIndent\"\n        class=\"z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block\"\n        role=\"alert\">\n        Press\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Esc</kbd> then\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Tab</kbd> to exit\n      </div>\n    </div>\n  </template>\n  <div\n    v-if=\"$slots.warning\"\n    class=\"centered-y text-orange absolute right-7 text-xs\">\n    <slot name=\"warning\" />\n  </div>\n  <div\n    v-if=\"$slots.icon\"\n    class=\"centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1\">\n    <slot name=\"icon\" />\n  </div>\n  <div\n    v-if=\"required\"\n    class=\"required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 mr-0.5 pt-px pr-2 opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.alert]:shadow-none group-[.error]:bg-transparent group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0\">\n    Required\n  </div>\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown\"\n    ref=\"dropdownRef\"\n    :dropdownPosition=\"dropdownPosition\"\n    :envVariables=\"envVariables\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @select=\"handleDropdownSelect\" />\n</template>\n<style scoped>\n/*\n Deep styling for customizing Codemirror\n*/\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  padding: 0;\n  background: transparent;\n}\n:deep(.cm-placeholder) {\n  color: var(--scalar-color-3);\n}\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  max-height: 20px;\n  padding: 8px 0;\n}\n/* Tooltip helper */\n:deep(.cm-tooltip) {\n  background: transparent !important;\n  filter: brightness(var(--scalar-lifted-brightness));\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n  border: none !important;\n  outline: none !important;\n  overflow: hidden !important;\n}\n:deep(.cm-tooltip-autocomplete ul li) {\n  padding: 3px 6px !important;\n}\n:deep(.cm-completionIcon-type:after) {\n  color: var(--scalar-color-3) !important;\n}\n:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-1) !important;\n}\n:deep(.cm-tooltip-autocomplete ul) {\n  padding: 6px !important;\n  position: relative;\n}\n:deep(.cm-tooltip-autocomplete ul li:hover) {\n  border-radius: 3px;\n  color: var(--scalar-color-1) !important;\n  background: var(--scalar-background-3) !important;\n}\n/* Disable active line highlighting */\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: transparent;\n}\n/* Color selection matching */\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n/* Color Picker Swatches */\n:deep(.cm-css-color-picker-wrapper) {\n  display: inline-flex;\n  outline: 1px solid var(--scalar-background-3);\n  border-radius: 3px;\n  overflow: hidden;\n}\n/* Number gutter */\n:deep(.cm-gutters) {\n  background-color: transparent;\n  border-right: none;\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-small);\n  line-height: 22px;\n  border-radius: 0 0 0 3px;\n}\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n  background-color: var(--scalar-background-1);\n}\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  padding-left: 0px !important;\n  padding-right: 6px !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n:deep(.cm-lineNumbers .cm-gutterElement) {\n  min-width: fit-content;\n}\n:deep(.cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement) {\n  padding-left: 0 !important;\n}\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n.line-wrapping:focus-within :deep(.cm-content) {\n  display: inline-table;\n  min-height: fit-content;\n  padding: 3px 6px;\n  white-space: break-spaces;\n  word-break: break-all;\n}\n</style>\n<style>\n.cm-pill {\n  --tw-bg-base: var(--scalar-color-1);\n  color: var(--tw-bg-base);\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 94%) !important;\n}\n.cm-pill.bg-grey {\n  background: var(--scalar-background-3) !important;\n}\n.dark-mode .cm-pill {\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 90%) !important;\n}\n.cm-pill:first-of-type {\n  margin-left: 0;\n}\n.cm-editor .cm-widgetBuffer {\n  display: none;\n}\n.cm-foldPlaceholder:hover {\n  color: var(--scalar-color-1);\n}\n.cm-foldGutter .cm-gutterElement {\n  font-size: var(--scalar-heading-4);\n  padding: 2px !important;\n}\n.cm-foldGutter .cm-gutterElement:first-of-type {\n  display: none;\n}\n.cm-foldGutter .cm-gutterElement .cm-foldMarker {\n  padding: 2px;\n  padding-top: 2px;\n}\n.cm-foldGutter .cm-gutterElement:hover .cm-foldMarker {\n  background: var(--scalar-background-2);\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-1);\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"CodeInput-BTN8cC5h.js","names":["$attrs","$slots"],"sources":["../src/views/Environment/EnvironmentVariableDropdown.vue","../src/views/Environment/EnvironmentVariableDropdown.vue","../src/components/DataTable/DataTableInputSelect.vue","../src/components/DataTable/DataTableInputSelect.vue","../src/components/CodeInput/codeVariableWidget.ts","../src/components/CodeInput/CodeInput.vue","../src/components/CodeInput/CodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconGlobe, ScalarIconPlus } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { parseEnvVariables } from '@/libs'\nimport { getEnvColor, type EnvVariables } from '@/libs/env-helpers'\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\n\nconst props = defineProps<{\n  query: string\n  environment: Environment\n  envVariables: EnvVariables\n  // withServers?: boolean\n  dropdownPosition?: { left: number; top: number }\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\nconst router = useRouter()\nconst { activeCollection } = useActiveEntities()\n\nconst redirectToEnvironment = () => {\n  if (!router) {\n    return\n  }\n  const { currentRoute, push } = router\n  const workspaceId = currentRoute.value.params.workspace\n\n  // Global environment page for draft collection\n  if (\n    !activeCollection.value ||\n    activeCollection.value.info?.title === 'Drafts'\n  ) {\n    push({\n      name: 'environment.default',\n      params: {\n        [PathId.Workspace]: workspaceId,\n      },\n    })\n  } else {\n    // Collection environment page for collections\n    push({\n      name: 'collection.environment',\n      params: {\n        [PathId.Collection]: activeCollection.value.uid,\n      },\n    })\n  }\n  isOpen.value = false\n}\n\nconst fuse = new Fuse(parseEnvVariables(props.envVariables), {\n  keys: ['key', 'value'],\n})\n\nconst filteredVariables = computed(() => {\n  const searchQuery = props.query\n\n  if (!searchQuery) {\n    /** return the last 4 environment variables on first display */\n    return parseEnvVariables(props.envVariables)\n      .slice(-4)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  /** filter environment variables by name */\n  const result = fuse.search(searchQuery, { 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: (props.dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (props.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                v-if=\"\n                  item.source === 'collection' &&\n                  environment.name !== 'No Environment'\n                \"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: getEnvColor(environment),\n                }\"></span>\n              <ScalarIconGlobe\n                v-else\n                class=\"-ml-0.25 size-2.5\"\n                icon=\"Globe\" />\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-if=\"router\"\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","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconGlobe, ScalarIconPlus } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { parseEnvVariables } from '@/libs'\nimport { getEnvColor, type EnvVariables } from '@/libs/env-helpers'\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\n\nconst props = defineProps<{\n  query: string\n  environment: Environment\n  envVariables: EnvVariables\n  // withServers?: boolean\n  dropdownPosition?: { left: number; top: number }\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\nconst router = useRouter()\nconst { activeCollection } = useActiveEntities()\n\nconst redirectToEnvironment = () => {\n  if (!router) {\n    return\n  }\n  const { currentRoute, push } = router\n  const workspaceId = currentRoute.value.params.workspace\n\n  // Global environment page for draft collection\n  if (\n    !activeCollection.value ||\n    activeCollection.value.info?.title === 'Drafts'\n  ) {\n    push({\n      name: 'environment.default',\n      params: {\n        [PathId.Workspace]: workspaceId,\n      },\n    })\n  } else {\n    // Collection environment page for collections\n    push({\n      name: 'collection.environment',\n      params: {\n        [PathId.Collection]: activeCollection.value.uid,\n      },\n    })\n  }\n  isOpen.value = false\n}\n\nconst fuse = new Fuse(parseEnvVariables(props.envVariables), {\n  keys: ['key', 'value'],\n})\n\nconst filteredVariables = computed(() => {\n  const searchQuery = props.query\n\n  if (!searchQuery) {\n    /** return the last 4 environment variables on first display */\n    return parseEnvVariables(props.envVariables)\n      .slice(-4)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  /** filter environment variables by name */\n  const result = fuse.search(searchQuery, { 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: (props.dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (props.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                v-if=\"\n                  item.source === 'collection' &&\n                  environment.name !== 'No Environment'\n                \"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: getEnvColor(environment),\n                }\"></span>\n              <ScalarIconGlobe\n                v-else\n                class=\"-ml-0.25 size-2.5\"\n                icon=\"Globe\" />\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-if=\"router\"\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","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarComboboxMultiselect,\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n  ScalarIcon,\n} from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string | number\n    value?: string[]\n    default?: string | number | undefined\n    canAddCustomValue?: boolean\n    type?: string | undefined\n  }>(),\n  { canAddCustomValue: true },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string): void\n}>()\n\nconst options = computed(() => props.value ?? [])\nconst addingCustomValue = ref(false)\nconst customValue = ref('')\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nwatch(customValue, (newValue) => {\n  emit('update:modelValue', newValue)\n})\n\nconst updateSelected = (value: string) => {\n  emit('update:modelValue', value)\n  addingCustomValue.value = false\n}\n\nconst addCustomValue = () => {\n  if (customValue.value.trim()) {\n    updateSelected(customValue.value)\n  }\n}\n\nconst handleBlur = () => {\n  if (!customValue.value.trim()) {\n    emit('update:modelValue', '')\n  }\n  addingCustomValue.value = false\n}\n\nconst isSelected = (value: string) => {\n  return props.modelValue.toString() === value\n}\n\nwatch(addingCustomValue, (newValue) => {\n  if (newValue) {\n    nextTick(() => {\n      inputRef.value?.focus()\n    })\n  }\n})\n\nconst initialValue = computed(() => {\n  return props.modelValue !== undefined ? props.modelValue : props.default\n})\n\n/** Currently selected array example values */\nconst selectedArrayOptions = computed(() => {\n  const selectedValues = new Set(props.modelValue.toString().split(', '))\n  return options.value\n    .filter((option) => selectedValues.has(option))\n    .map((option) => ({ id: option, label: option, value: option }))\n})\n\n/** Options for the array type */\nconst arrayOptions = computed(() =>\n  options.value.map((option) => ({ id: option, label: option, value: option })),\n)\n\n/** Update the model value when the selected options change */\nconst updateSelectedOptions = (selectedOptions: any) => {\n  const selectedValues = selectedOptions.map((option: any) => option.value)\n  emit('update:modelValue', selectedValues.join(', '))\n}\n</script>\n\n<template>\n  <div\n    class=\"group-[.alert]:outline-orange group-[.error]:outline-red w-full pr-10 -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\">\n    <template v-if=\"type === 'array'\">\n      <ScalarComboboxMultiselect\n        :modelValue=\"selectedArrayOptions\"\n        :options=\"arrayOptions\"\n        @update:modelValue=\"updateSelectedOptions\">\n        <ScalarButton\n          class=\"custom-scroll h-full justify-start gap-1.5 px-2 py-1.5 pr-6 font-normal outline-none\"\n          fullWidth\n          variant=\"ghost\">\n          <span class=\"text-c-1 whitespace-nowrap\">{{\n            selectedArrayOptions.length > 0\n              ? selectedArrayOptions.map((option) => option.label).join(', ')\n              : 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\"\n            class=\"min-w-4\" />\n        </ScalarButton>\n      </ScalarComboboxMultiselect>\n    </template>\n    <template v-else-if=\"addingCustomValue\">\n      <input\n        ref=\"inputRef\"\n        v-model=\"customValue\"\n        class=\"text-c-1 w-full min-w-0 border-none px-2 py-1.5 outline-none\"\n        placeholder=\"Value\"\n        type=\"text\"\n        @blur=\"handleBlur\"\n        @keyup.enter=\"addCustomValue\" />\n    </template>\n    <template v-else>\n      <ScalarDropdown\n        resize\n        :value=\"initialValue\">\n        <ScalarButton\n          class=\"size-full justify-start gap-1.5 overflow-auto px-2 py-1.5 font-normal whitespace-nowrap outline-none\"\n          variant=\"ghost\">\n          <span class=\"text-c-1 overflow-hidden text-ellipsis\">{{\n            initialValue || 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\" />\n        </ScalarButton>\n        <template #items>\n          <ScalarDropdownItem\n            v-for=\"option in options\"\n            :key=\"option\"\n            class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n            :value=\"option\"\n            @click=\"updateSelected(option)\">\n            <div\n              class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n              :class=\"\n                isSelected(option)\n                  ? 'bg-c-accent text-b-1'\n                  : 'shadow-border text-transparent'\n              \">\n              <ScalarIcon\n                class=\"size-2.5\"\n                icon=\"Checkmark\"\n                thickness=\"3\" />\n            </div>\n            <span class=\"overflow-hidden text-ellipsis\">{{ option }}</span>\n          </ScalarDropdownItem>\n          <template v-if=\"canAddCustomValue\">\n            <ScalarDropdownDivider v-if=\"options.length\" />\n            <ScalarDropdownItem\n              class=\"flex items-center gap-1.5\"\n              @click=\"addingCustomValue = true\">\n              <div class=\"flex h-4 w-4 items-center justify-center\">\n                <ScalarIcon\n                  icon=\"Add\"\n                  size=\"sm\" />\n              </div>\n              <span>Add value</span>\n            </ScalarDropdownItem>\n          </template>\n        </template>\n      </ScalarDropdown>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarComboboxMultiselect,\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n  ScalarIcon,\n} from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string | number\n    value?: string[]\n    default?: string | number | undefined\n    canAddCustomValue?: boolean\n    type?: string | undefined\n  }>(),\n  { canAddCustomValue: true },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string): void\n}>()\n\nconst options = computed(() => props.value ?? [])\nconst addingCustomValue = ref(false)\nconst customValue = ref('')\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nwatch(customValue, (newValue) => {\n  emit('update:modelValue', newValue)\n})\n\nconst updateSelected = (value: string) => {\n  emit('update:modelValue', value)\n  addingCustomValue.value = false\n}\n\nconst addCustomValue = () => {\n  if (customValue.value.trim()) {\n    updateSelected(customValue.value)\n  }\n}\n\nconst handleBlur = () => {\n  if (!customValue.value.trim()) {\n    emit('update:modelValue', '')\n  }\n  addingCustomValue.value = false\n}\n\nconst isSelected = (value: string) => {\n  return props.modelValue.toString() === value\n}\n\nwatch(addingCustomValue, (newValue) => {\n  if (newValue) {\n    nextTick(() => {\n      inputRef.value?.focus()\n    })\n  }\n})\n\nconst initialValue = computed(() => {\n  return props.modelValue !== undefined ? props.modelValue : props.default\n})\n\n/** Currently selected array example values */\nconst selectedArrayOptions = computed(() => {\n  const selectedValues = new Set(props.modelValue.toString().split(', '))\n  return options.value\n    .filter((option) => selectedValues.has(option))\n    .map((option) => ({ id: option, label: option, value: option }))\n})\n\n/** Options for the array type */\nconst arrayOptions = computed(() =>\n  options.value.map((option) => ({ id: option, label: option, value: option })),\n)\n\n/** Update the model value when the selected options change */\nconst updateSelectedOptions = (selectedOptions: any) => {\n  const selectedValues = selectedOptions.map((option: any) => option.value)\n  emit('update:modelValue', selectedValues.join(', '))\n}\n</script>\n\n<template>\n  <div\n    class=\"group-[.alert]:outline-orange group-[.error]:outline-red w-full pr-10 -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\">\n    <template v-if=\"type === 'array'\">\n      <ScalarComboboxMultiselect\n        :modelValue=\"selectedArrayOptions\"\n        :options=\"arrayOptions\"\n        @update:modelValue=\"updateSelectedOptions\">\n        <ScalarButton\n          class=\"custom-scroll h-full justify-start gap-1.5 px-2 py-1.5 pr-6 font-normal outline-none\"\n          fullWidth\n          variant=\"ghost\">\n          <span class=\"text-c-1 whitespace-nowrap\">{{\n            selectedArrayOptions.length > 0\n              ? selectedArrayOptions.map((option) => option.label).join(', ')\n              : 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\"\n            class=\"min-w-4\" />\n        </ScalarButton>\n      </ScalarComboboxMultiselect>\n    </template>\n    <template v-else-if=\"addingCustomValue\">\n      <input\n        ref=\"inputRef\"\n        v-model=\"customValue\"\n        class=\"text-c-1 w-full min-w-0 border-none px-2 py-1.5 outline-none\"\n        placeholder=\"Value\"\n        type=\"text\"\n        @blur=\"handleBlur\"\n        @keyup.enter=\"addCustomValue\" />\n    </template>\n    <template v-else>\n      <ScalarDropdown\n        resize\n        :value=\"initialValue\">\n        <ScalarButton\n          class=\"size-full justify-start gap-1.5 overflow-auto px-2 py-1.5 font-normal whitespace-nowrap outline-none\"\n          variant=\"ghost\">\n          <span class=\"text-c-1 overflow-hidden text-ellipsis\">{{\n            initialValue || 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\" />\n        </ScalarButton>\n        <template #items>\n          <ScalarDropdownItem\n            v-for=\"option in options\"\n            :key=\"option\"\n            class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n            :value=\"option\"\n            @click=\"updateSelected(option)\">\n            <div\n              class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n              :class=\"\n                isSelected(option)\n                  ? 'bg-c-accent text-b-1'\n                  : 'shadow-border text-transparent'\n              \">\n              <ScalarIcon\n                class=\"size-2.5\"\n                icon=\"Checkmark\"\n                thickness=\"3\" />\n            </div>\n            <span class=\"overflow-hidden text-ellipsis\">{{ option }}</span>\n          </ScalarDropdownItem>\n          <template v-if=\"canAddCustomValue\">\n            <ScalarDropdownDivider v-if=\"options.length\" />\n            <ScalarDropdownItem\n              class=\"flex items-center gap-1.5\"\n              @click=\"addingCustomValue = true\">\n              <div class=\"flex h-4 w-4 items-center justify-center\">\n                <ScalarIcon\n                  icon=\"Add\"\n                  size=\"sm\" />\n              </div>\n              <span>Add value</span>\n            </ScalarDropdownItem>\n          </template>\n        </template>\n      </ScalarDropdown>\n    </template>\n  </div>\n</template>\n","import { ScalarTooltip } from '@scalar/components'\nimport { ScalarIconGlobe } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport { REGEX } from '@scalar/oas-utils/helpers'\nimport {\n  Decoration,\n  type DecorationSet,\n  EditorView,\n  RangeSetBuilder,\n  ViewPlugin,\n  type ViewUpdate,\n  WidgetType,\n} from '@scalar/use-codemirror'\nimport { nanoid } from 'nanoid'\nimport { createApp, defineComponent, h } from 'vue'\n\nimport { parseEnvVariables } from '@/libs'\nimport { type EnvVariables, getEnvColor } from '@/libs/env-helpers'\n\n/**\n * Displays the value of a variable of the active environment in a pill\n */\nclass PillWidget extends WidgetType {\n  private app: any\n  private uid: string\n  environment: Environment | undefined\n  envVariables: EnvVariables | undefined\n  isReadOnly: boolean\n\n  constructor(\n    private variableName: string,\n    environment: Environment | undefined,\n    envVariables: EnvVariables | undefined,\n    isReadOnly: boolean | undefined,\n  ) {\n    super()\n    this.variableName = variableName\n    this.environment = environment\n    this.envVariables = envVariables\n    this.isReadOnly = isReadOnly ?? false\n    this.uid = nanoid()\n  }\n\n  toDOM() {\n    const span = document.createElement('span')\n    span.className = 'cm-pill'\n    span.textContent = `${this.variableName}`\n\n    const tooltipComponent = defineComponent({\n      props: { variableName: { type: String, default: null } },\n      render: () => {\n        const val = this.envVariables\n          ? parseEnvVariables(this.envVariables).find((thing) => thing.key === this.variableName)\n          : undefined\n\n        // Set the pill color based on the environment source or fallback to default color\n        const isGlobal = val?.source === 'global'\n        const pillColor = isGlobal\n          ? 'var(--scalar-color-1)'\n          : val && this.environment && this.environment.name !== 'No Environment'\n            ? getEnvColor(this.environment)\n            : 'var(--scalar-color-1)'\n\n        span.style.setProperty('--tw-bg-base', pillColor)\n\n        // Set opacity based on the existence of a value\n        span.style.opacity = val?.value ? '1' : '0.5'\n\n        // Tooltip content as string\n        const tooltipContent = val?.value || 'No value'\n\n        // Tooltip trigger element\n        const tooltipTrigger = h('div', { class: 'flex items-center gap-1 whitespace-nowrap' }, [\n          (isGlobal || (this.environment?.name === 'No Environment' && val?.value)) &&\n            h(ScalarIconGlobe, { class: 'size-3 -ml-1', icon: 'Globe' }),\n          h('span', this.variableName),\n        ])\n\n        return h(\n          ScalarTooltip,\n          {\n            content: tooltipContent,\n            delay: 0,\n            placement: 'bottom',\n            offset: 6,\n          },\n          {\n            default: () => tooltipTrigger,\n          },\n        )\n      },\n    })\n\n    this.app = createApp(tooltipComponent, { variableName: this.variableName })\n    this.app.mount(span)\n\n    return span\n  }\n\n  override destroy() {\n    if (this.app) {\n      this.app.unmount()\n    }\n  }\n\n  override eq(other: WidgetType) {\n    return other instanceof PillWidget && other.variableName === this.variableName && other.uid === this.uid\n  }\n\n  override ignoreEvent() {\n    return false\n  }\n}\n\n/**\n * Styles the active environment variable pill\n */\nexport const pillPlugin = (props: {\n  environment: Environment | undefined\n  envVariables: EnvVariables | undefined\n  isReadOnly: boolean | undefined\n}) =>\n  ViewPlugin.fromClass(\n    class {\n      decorations: DecorationSet\n\n      constructor(view: EditorView) {\n        this.decorations = this.buildDecorations(view)\n      }\n\n      update(update: ViewUpdate) {\n        if (update.docChanged || update.viewportChanged) {\n          requestAnimationFrame(() => {\n            this.decorations = this.buildDecorations(update.view)\n            update.view.update([])\n          })\n        }\n      }\n\n      buildDecorations(view: EditorView) {\n        const builder = new RangeSetBuilder<Decoration>()\n\n        for (const { from, to } of view.visibleRanges) {\n          const text = view.state.doc.sliceString(from, to)\n          let match\n\n          while ((match = REGEX.VARIABLES.exec(text)) !== null) {\n            const start = from + match.index\n            const end = start + match[0].length\n            const variableName = match[1] ?? ''\n            builder.add(\n              start,\n              end,\n              Decoration.widget({\n                widget: new PillWidget(variableName, props.environment, props.envVariables, props.isReadOnly),\n                side: 1,\n              }),\n            )\n          }\n        }\n\n        return builder.finish()\n      }\n    },\n    {\n      decorations: (v) => v.decorations,\n    },\n  )\n\nexport const backspaceCommand = EditorView.domEventHandlers({\n  keydown(event, view) {\n    if (event.key === 'Backspace') {\n      const { state } = view\n      const { from, to } = state.selection.main\n\n      // Prevent breaking line content addition on pill removal\n      if (from === 0 && to === state.doc.length) {\n        view.dispatch({\n          changes: { from: 0, to: state.doc.length },\n          selection: { anchor: 0 },\n        })\n        event.preventDefault()\n        return true\n      }\n\n      if (from === to && from > 0) {\n        const before = state.doc.sliceString(from - 2, from)\n        if (before === '}}') {\n          view.dispatch({\n            changes: { from: from - 2, to },\n            selection: { anchor: from - 2 },\n          })\n          event.preventDefault()\n          return true\n        }\n      }\n    }\n    return false\n  },\n})\n","<script setup lang=\"ts\">\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport { useLayout } from '@/hooks'\nimport type { EnvVariable } from '@/store/active-entities'\nimport EnvironmentVariableDropdown from '@/views/Environment/EnvironmentVariableDropdown.vue'\n\nimport DataTableInputSelect from '../DataTable/DataTableInputSelect.vue'\nimport { backspaceCommand, pillPlugin } from './codeVariableWidget'\n\nconst props = withDefaults(\n  defineProps<{\n    colorPicker?: boolean\n    disabled?: boolean\n    modelValue: string | number\n    error?: boolean\n    emitOnBlur?: boolean\n    extensions?: Extension[]\n    lineNumbers?: boolean\n    lint?: boolean\n    disableTabIndent?: boolean\n    language?: CodeMirrorLanguage\n    handleFieldSubmit?: (e: string) => void\n    handleFieldChange?: (e: string) => void\n    placeholder?: string\n    required?: boolean\n    disableEnter?: boolean\n    disableCloseBrackets?: boolean\n    enum?: string[]\n    examples?: string[]\n    type?: string | string[] | undefined\n    nullable?: boolean\n    withVariables?: boolean\n    importCurl?: boolean\n    default?: string | number\n    environment: Environment\n    envVariables: EnvVariable[]\n    lineWrapping?: boolean\n  }>(),\n  {\n    disableCloseBrackets: false,\n    disableEnter: false,\n    extensions: () => [],\n    disableTabIndent: false,\n    emitOnBlur: true,\n    colorPicker: false,\n    nullable: false,\n    withVariables: true,\n    disabled: false,\n    lineWrapping: false,\n  },\n)\nconst emit = defineEmits<{\n  (e: 'submit', v: string): void\n  (e: 'update:modelValue', v: string): void\n  (e: 'curl', v: string): void\n  (e: 'blur', v: string): void\n}>()\n\nconst attrs = useAttrs() as { id?: string }\nconst uid = (attrs.id as string) || `id-${nanoid()}`\n\nconst isFocused = ref(false)\n\n// Environment variable dropdown init\nconst showDropdown = ref(false)\nconst dropdownQuery = ref('')\nconst dropdownPosition = ref({ left: 0, top: 0 })\nconst dropdownRef = ref<InstanceType<\n  typeof EnvironmentVariableDropdown\n> | null>(null)\n\nconst { layout } = useLayout()\n\n// ---------------------------------------------------------------------------\n// Event mapping from codemirror to standard input interfaces\n\n/** Change is emitted during typing. This does not trigger validation */\nfunction handleChange(value: string) {\n  // We need to be careful, only if the value is different we trigger an update\n  // on initial load of the component, this gets triggered cause we set the content\n  if (value === props.modelValue) {\n    return null\n  }\n  if (props.importCurl && value.trim().toLowerCase().startsWith('curl')) {\n    emit('curl', value)\n    // Maintain previous input value\n    codeMirror.value?.dispatch({\n      changes: {\n        from: 0,\n        to: codeMirror.value.state.doc.length,\n        insert: String(props.modelValue),\n      },\n    })\n    // Prevent table value population on current request\n    return null\n  }\n\n  return props.handleFieldChange\n    ? props.handleFieldChange(value)\n    : emit('update:modelValue', value)\n}\n\n/** Submit is emitted on blur and enter. This will trigger validation */\nfunction handleSubmit(value: string) {\n  return props.handleFieldSubmit\n    ? props.handleFieldSubmit(value)\n    : emit('submit', value)\n}\n\n/** Optional submit on blur.  */\nfunction handleBlur(value: string) {\n  isFocused.value = false\n  if (props.emitOnBlur && props.modelValue) {\n    handleSubmit(value)\n  }\n  emit('blur', value)\n}\n\n// ---------------------------------------------------------------------------\n// Codemirror instance handling\n\n// WARNING: Extensions are non-reactive! If props change nothing will happen\n\nconst extensions: Extension[] = [...props.extensions]\nif (props.colorPicker) {\n  extensions.push(colorPickerExtension)\n}\n\n// Create a reactive pill plugin that updates when environment changes\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment: props.environment,\n    envVariables: props.envVariables,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n// Base extensions that will be used for the editor\nconst baseExtensions = computed(() => [\n  ...extensions,\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\nconst { codeMirror } = useCodeMirror({\n  content: toRef(() =>\n    props.modelValue !== undefined ? String(props.modelValue) : '',\n  ),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => (isFocused.value = true),\n  onBlur: (val) => handleBlur(val),\n  codeMirrorRef,\n  disableTabIndent: toRef(() => props.disableTabIndent),\n  disableEnter: toRef(() => props.disableEnter),\n  disableCloseBrackets: toRef(() => props.disableCloseBrackets),\n  lineNumbers: toRef(() => props.lineNumbers),\n  language: toRef(() => props.language),\n  lint: toRef(() => props.lint),\n  extensions: baseExtensions,\n  placeholder: toRef(() => props.placeholder),\n})\n\ncodeMirror.value?.focus()\n\n// If we specify autofocus then focus codemirror on creation\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\nconst { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n// Computed property to check if type is boolean and nullable\nconst booleanOptions = computed(() =>\n  props.nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\nconst handleKeyDown = (key: string, event: KeyboardEvent) => {\n  if (showDropdown.value) {\n    if (key === 'down') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('down')\n    } else if (key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('up')\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n  } else if (key === 'escape') {\n    if (!props.disableTabIndent) {\n      event.stopPropagation()\n    }\n  } else if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '')\n  }\n}\n\nconst defaultType = computed(() => {\n  return Array.isArray(props.type)\n    ? // Find the first type, that's not 'null'\n      (props.type.find((type) => type !== 'null') ?? 'string')\n    : // If it's not an array, just return the type\n      props.type\n})\n\nconst displayVariablesDropdown = computed(\n  () =>\n    showDropdown.value &&\n    props.withVariables &&\n    layout !== 'modal' &&\n    props.environment,\n)\n\ndefineExpose({\n  /** Expose focus method */\n  focus: () => {\n    codeMirror.value?.focus()\n  },\n  // Expose these methods for testing\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  modelValue: props.modelValue,\n})\n</script>\n<script lang=\"ts\">\n// use normal <script> to declare options\nexport default {\n  inheritAttrs: false,\n}\n</script>\n<template>\n  <template v-if=\"disabled\">\n    <div\n      class=\"text-c-2 flex cursor-default items-center justify-center\"\n      :class=\"layout === 'modal' ? 'font-code pr-2 pl-1 text-base' : 'px-2'\"\n      data-testid=\"code-input-disabled\">\n      <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n    </div>\n  </template>\n  <template v-else-if=\"props.enum && props.enum.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :type=\"defaultType\"\n      :value=\"props.enum\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"type === 'boolean' || type?.includes('boolean')\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :value=\"booleanOptions\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"props.examples && props.examples.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"props.modelValue\"\n      :value=\"props.examples\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else>\n    <div\n      :id=\"uid\"\n      v-bind=\"$attrs\"\n      ref=\"codeMirrorRef\"\n      class=\"group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden text-xs leading-[1.44] whitespace-nowrap -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\"\n      :class=\"{\n        'line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1':\n          lineWrapping,\n        'flow-code-input--error': error,\n      }\"\n      @keydown.down.stop=\"handleKeyDown('down', $event)\"\n      @keydown.enter=\"handleKeyDown('enter', $event)\"\n      @keydown.escape=\"handleKeyDown('escape', $event)\"\n      @keydown.up.stop=\"handleKeyDown('up', $event)\">\n      <div\n        v-if=\"!disableTabIndent\"\n        class=\"z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block\"\n        role=\"alert\">\n        Press\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Esc</kbd> then\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Tab</kbd> to exit\n      </div>\n    </div>\n  </template>\n  <div\n    v-if=\"$slots.warning\"\n    class=\"centered-y text-orange absolute right-7 text-xs\">\n    <slot name=\"warning\" />\n  </div>\n  <div\n    v-if=\"$slots.icon\"\n    class=\"centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1\">\n    <slot name=\"icon\" />\n  </div>\n  <div\n    v-if=\"required\"\n    class=\"required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 mr-0.5 pt-px pr-2 opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.alert]:shadow-none group-[.error]:bg-transparent group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0\">\n    Required\n  </div>\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown\"\n    ref=\"dropdownRef\"\n    :dropdownPosition=\"dropdownPosition\"\n    :envVariables=\"envVariables\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @select=\"handleDropdownSelect\" />\n</template>\n<style scoped>\n/*\n Deep styling for customizing Codemirror\n*/\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  padding: 0;\n  background: transparent;\n}\n:deep(.cm-placeholder) {\n  color: var(--scalar-color-3);\n}\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  max-height: 20px;\n  padding: 8px 0;\n}\n/* Tooltip helper */\n:deep(.cm-tooltip) {\n  background: transparent !important;\n  filter: brightness(var(--scalar-lifted-brightness));\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n  border: none !important;\n  outline: none !important;\n  overflow: hidden !important;\n}\n:deep(.cm-tooltip-autocomplete ul li) {\n  padding: 3px 6px !important;\n}\n:deep(.cm-completionIcon-type:after) {\n  color: var(--scalar-color-3) !important;\n}\n:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-1) !important;\n}\n:deep(.cm-tooltip-autocomplete ul) {\n  padding: 6px !important;\n  position: relative;\n}\n:deep(.cm-tooltip-autocomplete ul li:hover) {\n  border-radius: 3px;\n  color: var(--scalar-color-1) !important;\n  background: var(--scalar-background-3) !important;\n}\n/* Disable active line highlighting */\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: transparent;\n}\n/* Color selection matching */\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n/* Color Picker Swatches */\n:deep(.cm-css-color-picker-wrapper) {\n  display: inline-flex;\n  outline: 1px solid var(--scalar-background-3);\n  border-radius: 3px;\n  overflow: hidden;\n}\n/* Number gutter */\n:deep(.cm-gutters) {\n  background-color: transparent;\n  border-right: none;\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-small);\n  line-height: 22px;\n  border-radius: 0 0 0 3px;\n}\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n  background-color: var(--scalar-background-1);\n}\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  padding-left: 0px !important;\n  padding-right: 6px !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n:deep(.cm-lineNumbers .cm-gutterElement) {\n  min-width: fit-content;\n}\n:deep(.cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement) {\n  padding-left: 0 !important;\n}\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n.line-wrapping:focus-within :deep(.cm-content) {\n  display: inline-table;\n  min-height: fit-content;\n  padding: 3px 6px;\n  white-space: break-spaces;\n  word-break: break-all;\n}\n</style>\n<style>\n.cm-pill {\n  --tw-bg-base: var(--scalar-color-1);\n  color: var(--tw-bg-base);\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 94%) !important;\n}\n.cm-pill.bg-grey {\n  background: var(--scalar-background-3) !important;\n}\n.dark-mode .cm-pill {\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 90%) !important;\n}\n.cm-pill:first-of-type {\n  margin-left: 0;\n}\n.cm-editor .cm-widgetBuffer {\n  display: none;\n}\n.cm-foldPlaceholder:hover {\n  color: var(--scalar-color-1);\n}\n.cm-foldGutter .cm-gutterElement {\n  font-size: var(--scalar-heading-4);\n  padding: 2px !important;\n}\n.cm-foldGutter .cm-gutterElement:first-of-type {\n  display: none;\n}\n.cm-foldGutter .cm-gutterElement .cm-foldMarker {\n  padding: 2px;\n  padding-top: 2px;\n}\n.cm-foldGutter .cm-gutterElement:hover .cm-foldMarker {\n  background: var(--scalar-background-2);\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport { useLayout } from '@/hooks'\nimport type { EnvVariable } from '@/store/active-entities'\nimport EnvironmentVariableDropdown from '@/views/Environment/EnvironmentVariableDropdown.vue'\n\nimport DataTableInputSelect from '../DataTable/DataTableInputSelect.vue'\nimport { backspaceCommand, pillPlugin } from './codeVariableWidget'\n\nconst props = withDefaults(\n  defineProps<{\n    colorPicker?: boolean\n    disabled?: boolean\n    modelValue: string | number\n    error?: boolean\n    emitOnBlur?: boolean\n    extensions?: Extension[]\n    lineNumbers?: boolean\n    lint?: boolean\n    disableTabIndent?: boolean\n    language?: CodeMirrorLanguage\n    handleFieldSubmit?: (e: string) => void\n    handleFieldChange?: (e: string) => void\n    placeholder?: string\n    required?: boolean\n    disableEnter?: boolean\n    disableCloseBrackets?: boolean\n    enum?: string[]\n    examples?: string[]\n    type?: string | string[] | undefined\n    nullable?: boolean\n    withVariables?: boolean\n    importCurl?: boolean\n    default?: string | number\n    environment: Environment\n    envVariables: EnvVariable[]\n    lineWrapping?: boolean\n  }>(),\n  {\n    disableCloseBrackets: false,\n    disableEnter: false,\n    extensions: () => [],\n    disableTabIndent: false,\n    emitOnBlur: true,\n    colorPicker: false,\n    nullable: false,\n    withVariables: true,\n    disabled: false,\n    lineWrapping: false,\n  },\n)\nconst emit = defineEmits<{\n  (e: 'submit', v: string): void\n  (e: 'update:modelValue', v: string): void\n  (e: 'curl', v: string): void\n  (e: 'blur', v: string): void\n}>()\n\nconst attrs = useAttrs() as { id?: string }\nconst uid = (attrs.id as string) || `id-${nanoid()}`\n\nconst isFocused = ref(false)\n\n// Environment variable dropdown init\nconst showDropdown = ref(false)\nconst dropdownQuery = ref('')\nconst dropdownPosition = ref({ left: 0, top: 0 })\nconst dropdownRef = ref<InstanceType<\n  typeof EnvironmentVariableDropdown\n> | null>(null)\n\nconst { layout } = useLayout()\n\n// ---------------------------------------------------------------------------\n// Event mapping from codemirror to standard input interfaces\n\n/** Change is emitted during typing. This does not trigger validation */\nfunction handleChange(value: string) {\n  // We need to be careful, only if the value is different we trigger an update\n  // on initial load of the component, this gets triggered cause we set the content\n  if (value === props.modelValue) {\n    return null\n  }\n  if (props.importCurl && value.trim().toLowerCase().startsWith('curl')) {\n    emit('curl', value)\n    // Maintain previous input value\n    codeMirror.value?.dispatch({\n      changes: {\n        from: 0,\n        to: codeMirror.value.state.doc.length,\n        insert: String(props.modelValue),\n      },\n    })\n    // Prevent table value population on current request\n    return null\n  }\n\n  return props.handleFieldChange\n    ? props.handleFieldChange(value)\n    : emit('update:modelValue', value)\n}\n\n/** Submit is emitted on blur and enter. This will trigger validation */\nfunction handleSubmit(value: string) {\n  return props.handleFieldSubmit\n    ? props.handleFieldSubmit(value)\n    : emit('submit', value)\n}\n\n/** Optional submit on blur.  */\nfunction handleBlur(value: string) {\n  isFocused.value = false\n  if (props.emitOnBlur && props.modelValue) {\n    handleSubmit(value)\n  }\n  emit('blur', value)\n}\n\n// ---------------------------------------------------------------------------\n// Codemirror instance handling\n\n// WARNING: Extensions are non-reactive! If props change nothing will happen\n\nconst extensions: Extension[] = [...props.extensions]\nif (props.colorPicker) {\n  extensions.push(colorPickerExtension)\n}\n\n// Create a reactive pill plugin that updates when environment changes\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment: props.environment,\n    envVariables: props.envVariables,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n// Base extensions that will be used for the editor\nconst baseExtensions = computed(() => [\n  ...extensions,\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\nconst { codeMirror } = useCodeMirror({\n  content: toRef(() =>\n    props.modelValue !== undefined ? String(props.modelValue) : '',\n  ),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => (isFocused.value = true),\n  onBlur: (val) => handleBlur(val),\n  codeMirrorRef,\n  disableTabIndent: toRef(() => props.disableTabIndent),\n  disableEnter: toRef(() => props.disableEnter),\n  disableCloseBrackets: toRef(() => props.disableCloseBrackets),\n  lineNumbers: toRef(() => props.lineNumbers),\n  language: toRef(() => props.language),\n  lint: toRef(() => props.lint),\n  extensions: baseExtensions,\n  placeholder: toRef(() => props.placeholder),\n})\n\ncodeMirror.value?.focus()\n\n// If we specify autofocus then focus codemirror on creation\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\nconst { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n// Computed property to check if type is boolean and nullable\nconst booleanOptions = computed(() =>\n  props.nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\nconst handleKeyDown = (key: string, event: KeyboardEvent) => {\n  if (showDropdown.value) {\n    if (key === 'down') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('down')\n    } else if (key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('up')\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n  } else if (key === 'escape') {\n    if (!props.disableTabIndent) {\n      event.stopPropagation()\n    }\n  } else if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '')\n  }\n}\n\nconst defaultType = computed(() => {\n  return Array.isArray(props.type)\n    ? // Find the first type, that's not 'null'\n      (props.type.find((type) => type !== 'null') ?? 'string')\n    : // If it's not an array, just return the type\n      props.type\n})\n\nconst displayVariablesDropdown = computed(\n  () =>\n    showDropdown.value &&\n    props.withVariables &&\n    layout !== 'modal' &&\n    props.environment,\n)\n\ndefineExpose({\n  /** Expose focus method */\n  focus: () => {\n    codeMirror.value?.focus()\n  },\n  // Expose these methods for testing\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  modelValue: props.modelValue,\n})\n</script>\n<script lang=\"ts\">\n// use normal <script> to declare options\nexport default {\n  inheritAttrs: false,\n}\n</script>\n<template>\n  <template v-if=\"disabled\">\n    <div\n      class=\"text-c-2 flex cursor-default items-center justify-center\"\n      :class=\"layout === 'modal' ? 'font-code pr-2 pl-1 text-base' : 'px-2'\"\n      data-testid=\"code-input-disabled\">\n      <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n    </div>\n  </template>\n  <template v-else-if=\"props.enum && props.enum.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :type=\"defaultType\"\n      :value=\"props.enum\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"type === 'boolean' || type?.includes('boolean')\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :value=\"booleanOptions\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"props.examples && props.examples.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"props.modelValue\"\n      :value=\"props.examples\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else>\n    <div\n      :id=\"uid\"\n      v-bind=\"$attrs\"\n      ref=\"codeMirrorRef\"\n      class=\"group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden text-xs leading-[1.44] whitespace-nowrap -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\"\n      :class=\"{\n        'line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1':\n          lineWrapping,\n        'flow-code-input--error': error,\n      }\"\n      @keydown.down.stop=\"handleKeyDown('down', $event)\"\n      @keydown.enter=\"handleKeyDown('enter', $event)\"\n      @keydown.escape=\"handleKeyDown('escape', $event)\"\n      @keydown.up.stop=\"handleKeyDown('up', $event)\">\n      <div\n        v-if=\"!disableTabIndent\"\n        class=\"z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block\"\n        role=\"alert\">\n        Press\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Esc</kbd> then\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Tab</kbd> to exit\n      </div>\n    </div>\n  </template>\n  <div\n    v-if=\"$slots.warning\"\n    class=\"centered-y text-orange absolute right-7 text-xs\">\n    <slot name=\"warning\" />\n  </div>\n  <div\n    v-if=\"$slots.icon\"\n    class=\"centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1\">\n    <slot name=\"icon\" />\n  </div>\n  <div\n    v-if=\"required\"\n    class=\"required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 mr-0.5 pt-px pr-2 opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.alert]:shadow-none group-[.error]:bg-transparent group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0\">\n    Required\n  </div>\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown\"\n    ref=\"dropdownRef\"\n    :dropdownPosition=\"dropdownPosition\"\n    :envVariables=\"envVariables\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @select=\"handleDropdownSelect\" />\n</template>\n<style scoped>\n/*\n Deep styling for customizing Codemirror\n*/\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  padding: 0;\n  background: transparent;\n}\n:deep(.cm-placeholder) {\n  color: var(--scalar-color-3);\n}\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  max-height: 20px;\n  padding: 8px 0;\n}\n/* Tooltip helper */\n:deep(.cm-tooltip) {\n  background: transparent !important;\n  filter: brightness(var(--scalar-lifted-brightness));\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n  border: none !important;\n  outline: none !important;\n  overflow: hidden !important;\n}\n:deep(.cm-tooltip-autocomplete ul li) {\n  padding: 3px 6px !important;\n}\n:deep(.cm-completionIcon-type:after) {\n  color: var(--scalar-color-3) !important;\n}\n:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-1) !important;\n}\n:deep(.cm-tooltip-autocomplete ul) {\n  padding: 6px !important;\n  position: relative;\n}\n:deep(.cm-tooltip-autocomplete ul li:hover) {\n  border-radius: 3px;\n  color: var(--scalar-color-1) !important;\n  background: var(--scalar-background-3) !important;\n}\n/* Disable active line highlighting */\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: transparent;\n}\n/* Color selection matching */\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n/* Color Picker Swatches */\n:deep(.cm-css-color-picker-wrapper) {\n  display: inline-flex;\n  outline: 1px solid var(--scalar-background-3);\n  border-radius: 3px;\n  overflow: hidden;\n}\n/* Number gutter */\n:deep(.cm-gutters) {\n  background-color: transparent;\n  border-right: none;\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-small);\n  line-height: 22px;\n  border-radius: 0 0 0 3px;\n}\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n  background-color: var(--scalar-background-1);\n}\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  padding-left: 0px !important;\n  padding-right: 6px !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n:deep(.cm-lineNumbers .cm-gutterElement) {\n  min-width: fit-content;\n}\n:deep(.cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement) {\n  padding-left: 0 !important;\n}\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n.line-wrapping:focus-within :deep(.cm-content) {\n  display: inline-table;\n  min-height: fit-content;\n  padding: 3px 6px;\n  white-space: break-spaces;\n  word-break: break-all;\n}\n</style>\n<style>\n.cm-pill {\n  --tw-bg-base: var(--scalar-color-1);\n  color: var(--tw-bg-base);\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 94%) !important;\n}\n.cm-pill.bg-grey {\n  background: var(--scalar-background-3) !important;\n}\n.dark-mode .cm-pill {\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 90%) !important;\n}\n.cm-pill:first-of-type {\n  margin-left: 0;\n}\n.cm-editor .cm-widgetBuffer {\n  display: none;\n}\n.cm-foldPlaceholder:hover {\n  color: var(--scalar-color-1);\n}\n.cm-foldGutter .cm-gutterElement {\n  font-size: var(--scalar-heading-4);\n  padding: 2px !important;\n}\n.cm-foldGutter .cm-gutterElement:first-of-type {\n  display: none;\n}\n.cm-foldGutter .cm-gutterElement .cm-foldMarker {\n  padding: 2px;\n  padding-top: 2px;\n}\n.cm-foldGutter .cm-gutterElement:hover .cm-foldMarker {\n  background: var(--scalar-background-2);\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-1);\n}\n</style>\n"],"mappings":"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"}

package/dist/{Collection-ChAxs3rz.js → Collection-BsAG7ms5.js}

@@ -1,4 +1,4 @@
-import { T as PathId, r as useWorkspace, w as useActiveEntities } from "./store-DaPoVtIS.js";
+import { T as PathId, r as useWorkspace, w as useActiveEntities } from "./store-DnlAQK5d.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
 import { t as IconSelector_default } from "./IconSelector-BDC_GQXv.js";
 import { t as ViewLayout_default } from "./ViewLayout-BOXN0IYo.js";
@@ -216,4 +216,4 @@ var Collection_default = /* @__PURE__ */ defineComponent({
 //#endregion
 export { Collection_default as default };
 
-//# sourceMappingURL=Collection-ChAxs3rz.js.map
+//# sourceMappingURL=Collection-BsAG7ms5.js.map

package/dist/{Collection-ChAxs3rz.js.map → Collection-BsAG7ms5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Collection-ChAxs3rz.js","names":[],"sources":["../src/components/Form/LabelInput.vue","../src/components/Form/LabelInput.vue","../src/views/Collection/CollectionInfoForm.vue","../src/views/Collection/CollectionInfoForm.vue","../src/views/Collection/CollectionNavigation.vue","../src/views/Collection/CollectionNavigation.vue","../src/views/Collection/Collection.vue","../src/views/Collection/Collection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\nimport type { ClientLayout } from '@/hooks/useLayout'\n\ndefineProps<{\n  inputId: string\n  placeholder: string\n  value: string | undefined\n  layout?: ClientLayout\n}>()\n\nconst emit = defineEmits<{\n  (e: 'updateValue', value: string): void\n}>()\n\nconst { cx } = useBindCx()\n\nconst onInput = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  emit('updateValue', target.value)\n}\n</script>\n<template>\n  <div v-bind=\"cx('flex-1 flex gap-1 items-center pointer-events-none group')\">\n    <template v-if=\"layout !== 'modal'\">\n      <label\n        v-bind=\"\n          cx(\n            'absolute w-full h-full top-0 left-0 pointer-events-auto opacity-0 cursor-text',\n          )\n        \"\n        :for=\"inputId\" />\n      <input\n        v-bind=\"\n          cx(\n            'flex-1 text-c-1 rounded pointer-events-auto relative w-full pl-1.25 -ml-0.5 md:-ml-1.25 h-8 group-hover-input has-[:focus-visible]:outline z-10',\n          )\n        \"\n        :id=\"inputId\"\n        :placeholder=\"placeholder\"\n        :value=\"value\"\n        @input=\"onInput\" />\n    </template>\n    <span\n      v-else\n      v-bind=\"cx('flex items-center text-c-1 h-8')\">\n      {{ value }}\n    </span>\n  </div>\n</template>\n<style scoped>\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\nimport type { ClientLayout } from '@/hooks/useLayout'\n\ndefineProps<{\n  inputId: string\n  placeholder: string\n  value: string | undefined\n  layout?: ClientLayout\n}>()\n\nconst emit = defineEmits<{\n  (e: 'updateValue', value: string): void\n}>()\n\nconst { cx } = useBindCx()\n\nconst onInput = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  emit('updateValue', target.value)\n}\n</script>\n<template>\n  <div v-bind=\"cx('flex-1 flex gap-1 items-center pointer-events-none group')\">\n    <template v-if=\"layout !== 'modal'\">\n      <label\n        v-bind=\"\n          cx(\n            'absolute w-full h-full top-0 left-0 pointer-events-auto opacity-0 cursor-text',\n          )\n        \"\n        :for=\"inputId\" />\n      <input\n        v-bind=\"\n          cx(\n            'flex-1 text-c-1 rounded pointer-events-auto relative w-full pl-1.25 -ml-0.5 md:-ml-1.25 h-8 group-hover-input has-[:focus-visible]:outline z-10',\n          )\n        \"\n        :id=\"inputId\"\n        :placeholder=\"placeholder\"\n        :value=\"value\"\n        @input=\"onInput\" />\n    </template>\n    <span\n      v-else\n      v-bind=\"cx('flex items-center text-c-1 h-8')\">\n      {{ value }}\n    </span>\n  </div>\n</template>\n<style scoped>\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { computed } from 'vue'\n\nimport LabelInput from '@/components/Form/LabelInput.vue'\nimport IconSelector from '@/components/IconSelector.vue'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nconst { activeCollection } = useActiveEntities()\nconst { collectionMutators } = useWorkspace()\n\nconst icon = computed(\n  () =>\n    activeCollection?.value?.['x-scalar-icon'] || 'interface-content-folder',\n)\n\nconst updateCollectionIcon = (value: string) => {\n  if (!activeCollection?.value?.uid) {\n    return\n  }\n\n  collectionMutators.edit(activeCollection?.value?.uid, 'x-scalar-icon', value)\n}\n\n/**\n * Update info.title\n */\nconst updateCollectionTitle = (value: string) => {\n  if (!activeCollection.value) {\n    return\n  }\n\n  collectionMutators.edit(activeCollection.value.uid, 'info.title', value)\n}\n\n/**\n * Alias for the data that we'd like to display.\n */\nconst data = computed(() => {\n  return {\n    icon: activeCollection?.value?.['x-scalar-icon'],\n    title: activeCollection?.value?.info?.title,\n    description: activeCollection?.value?.info?.description,\n    version: activeCollection?.value?.info?.version,\n  }\n})\n</script>\n\n<template>\n  <div\n    :aria-label=\"`Collection: ${data.title}`\"\n    class=\"mx-auto flex h-fit w-full flex-col gap-2 pt-6 pb-3 md:mx-auto md:max-w-[720px]\">\n    <IconSelector\n      :modelValue=\"icon\"\n      placement=\"bottom-start\"\n      @update:modelValue=\"(value) => updateCollectionIcon(value)\">\n      <ScalarButton\n        class=\"hover:bg-b-2 aspect-square h-7 w-7 cursor-pointer rounded border border-transparent p-0 hover:border-inherit\"\n        variant=\"ghost\">\n        <LibraryIcon\n          class=\"text-c-2 size-5\"\n          :src=\"icon\"\n          stroke-width=\"2\" />\n      </ScalarButton>\n    </IconSelector>\n    <div class=\"group relative ml-1.25\">\n      <LabelInput\n        class=\"text-xl font-bold\"\n        inputId=\"collectionName\"\n        placeholder=\"Untitled Collection\"\n        :value=\"data.title\"\n        @updateValue=\"updateCollectionTitle\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n:deep(.markdown) h2 {\n  @apply text-lg;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { computed } from 'vue'\n\nimport LabelInput from '@/components/Form/LabelInput.vue'\nimport IconSelector from '@/components/IconSelector.vue'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nconst { activeCollection } = useActiveEntities()\nconst { collectionMutators } = useWorkspace()\n\nconst icon = computed(\n  () =>\n    activeCollection?.value?.['x-scalar-icon'] || 'interface-content-folder',\n)\n\nconst updateCollectionIcon = (value: string) => {\n  if (!activeCollection?.value?.uid) {\n    return\n  }\n\n  collectionMutators.edit(activeCollection?.value?.uid, 'x-scalar-icon', value)\n}\n\n/**\n * Update info.title\n */\nconst updateCollectionTitle = (value: string) => {\n  if (!activeCollection.value) {\n    return\n  }\n\n  collectionMutators.edit(activeCollection.value.uid, 'info.title', value)\n}\n\n/**\n * Alias for the data that we'd like to display.\n */\nconst data = computed(() => {\n  return {\n    icon: activeCollection?.value?.['x-scalar-icon'],\n    title: activeCollection?.value?.info?.title,\n    description: activeCollection?.value?.info?.description,\n    version: activeCollection?.value?.info?.version,\n  }\n})\n</script>\n\n<template>\n  <div\n    :aria-label=\"`Collection: ${data.title}`\"\n    class=\"mx-auto flex h-fit w-full flex-col gap-2 pt-6 pb-3 md:mx-auto md:max-w-[720px]\">\n    <IconSelector\n      :modelValue=\"icon\"\n      placement=\"bottom-start\"\n      @update:modelValue=\"(value) => updateCollectionIcon(value)\">\n      <ScalarButton\n        class=\"hover:bg-b-2 aspect-square h-7 w-7 cursor-pointer rounded border border-transparent p-0 hover:border-inherit\"\n        variant=\"ghost\">\n        <LibraryIcon\n          class=\"text-c-2 size-5\"\n          :src=\"icon\"\n          stroke-width=\"2\" />\n      </ScalarButton>\n    </IconSelector>\n    <div class=\"group relative ml-1.25\">\n      <LabelInput\n        class=\"text-xl font-bold\"\n        inputId=\"collectionName\"\n        placeholder=\"Untitled Collection\"\n        :value=\"data.title\"\n        @updateValue=\"updateCollectionTitle\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n:deep(.markdown) h2 {\n  @apply text-lg;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { computed } from 'vue'\nimport { RouterLink, useRouter, type RouteLocationNamedRaw } from 'vue-router'\n\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\n\nimport CollectionInfoForm from './CollectionInfoForm.vue'\n\ndefineProps<{\n  isSticky: boolean\n}>()\n\nconst { currentRoute } = useRouter()\nconst { activeCollection } = useActiveEntities()\n\ntype CollectionSidebarEntry = {\n  // icon: Icon\n  to: RouteLocationNamedRaw\n  displayName: string\n}\n\nconst routes = computed<CollectionSidebarEntry[]>(() => [\n  {\n    displayName: 'Overview',\n    // icon: 'Collection',\n    to: {\n      name: 'collection.overview',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  {\n    displayName: 'Servers',\n    // icon: 'Server',\n    to: {\n      name: 'collection.servers',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  {\n    displayName: 'Authentication',\n    // icon: 'Lock',\n    to: {\n      name: 'collection.authentication',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  {\n    displayName: 'Environment',\n    // icon: 'Brackets',\n    to: {\n      name: 'collection.environment',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  // {\n  //   displayName: 'Cookies',\n  //   // icon: 'Cookie',\n  //   to: {\n  //     name: 'collection.cookies',\n  //     params: {\n  //       [PathId.Collection]: activeCollection.value?.uid,\n  //     },\n  //   },\n  // },\n  // {\n  //   displayName: 'Scripts',\n  //   // icon: 'CodeFolder',\n  //   to: {\n  //     name: 'collection.scripts',\n  //     params: {\n  //       [PathId.Collection]: activeCollection.value?.uid,\n  //     },\n  //   },\n  // },\n  // {\n  //   displayName: 'Sync',\n  //   // icon: 'Download',\n  //   to: {\n  //     name: 'collection.sync',\n  //   },\n  // },\n  {\n    displayName: 'Settings',\n    // icon: 'Settings',\n    to: {\n      name: 'collection.settings',\n    },\n  },\n])\n</script>\n<template>\n  <div class=\"bg-b-1 sticky -top-[104px] z-10 mx-auto w-full\">\n    <CollectionInfoForm />\n    <div\n      class=\"items-center text-sm font-medium\"\n      :class=\"\n        isSticky\n          ? 'h-fit border-b md:grid md:grid-cols-[1fr_720px_1fr] md:px-4'\n          : 'flex md:mx-auto md:max-w-[720px]'\n      \">\n      <div\n        v-if=\"isSticky\"\n        class=\"flex max-w-40 items-center\">\n        <LibraryIcon\n          class=\"text-c-2 hidden size-3.5 md:block\"\n          :src=\"\n            activeCollection?.['x-scalar-icon'] || 'interface-content-folder'\n          \"\n          stroke-width=\"2\" />\n        <span\n          class=\"text-c-1 mr-[6.25px] hidden overflow-hidden px-2 font-medium text-ellipsis whitespace-nowrap md:block\"\n          >{{ activeCollection?.info?.title }}</span\n        >\n      </div>\n      <div\n        class=\"flex w-full max-w-[720px] gap-2 pl-1.5 md:ml-1.5 md:pl-0\"\n        :class=\"!isSticky && 'border-b'\">\n        <RouterLink\n          v-for=\"({ to, displayName }, i) in routes\"\n          :key=\"i\"\n          class=\"-ml-2 flex h-10 cursor-pointer items-center px-2 text-center text-sm font-medium whitespace-nowrap no-underline -outline-offset-1 has-[:focus-visible]:outline\"\n          :to=\"to\">\n          <span\n            class=\"flex-center h-full w-full border-b\"\n            :class=\"\n              typeof to.name === 'string' &&\n              typeof currentRoute.name === 'string' &&\n              currentRoute.name?.startsWith(to.name)\n                ? 'text-c-1 border-c-1'\n                : 'text-c-2 hover:text-c-1 border-transparent'\n            \">\n            {{ displayName }}\n          </span>\n        </RouterLink>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { computed } from 'vue'\nimport { RouterLink, useRouter, type RouteLocationNamedRaw } from 'vue-router'\n\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\n\nimport CollectionInfoForm from './CollectionInfoForm.vue'\n\ndefineProps<{\n  isSticky: boolean\n}>()\n\nconst { currentRoute } = useRouter()\nconst { activeCollection } = useActiveEntities()\n\ntype CollectionSidebarEntry = {\n  // icon: Icon\n  to: RouteLocationNamedRaw\n  displayName: string\n}\n\nconst routes = computed<CollectionSidebarEntry[]>(() => [\n  {\n    displayName: 'Overview',\n    // icon: 'Collection',\n    to: {\n      name: 'collection.overview',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  {\n    displayName: 'Servers',\n    // icon: 'Server',\n    to: {\n      name: 'collection.servers',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  {\n    displayName: 'Authentication',\n    // icon: 'Lock',\n    to: {\n      name: 'collection.authentication',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  {\n    displayName: 'Environment',\n    // icon: 'Brackets',\n    to: {\n      name: 'collection.environment',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  // {\n  //   displayName: 'Cookies',\n  //   // icon: 'Cookie',\n  //   to: {\n  //     name: 'collection.cookies',\n  //     params: {\n  //       [PathId.Collection]: activeCollection.value?.uid,\n  //     },\n  //   },\n  // },\n  // {\n  //   displayName: 'Scripts',\n  //   // icon: 'CodeFolder',\n  //   to: {\n  //     name: 'collection.scripts',\n  //     params: {\n  //       [PathId.Collection]: activeCollection.value?.uid,\n  //     },\n  //   },\n  // },\n  // {\n  //   displayName: 'Sync',\n  //   // icon: 'Download',\n  //   to: {\n  //     name: 'collection.sync',\n  //   },\n  // },\n  {\n    displayName: 'Settings',\n    // icon: 'Settings',\n    to: {\n      name: 'collection.settings',\n    },\n  },\n])\n</script>\n<template>\n  <div class=\"bg-b-1 sticky -top-[104px] z-10 mx-auto w-full\">\n    <CollectionInfoForm />\n    <div\n      class=\"items-center text-sm font-medium\"\n      :class=\"\n        isSticky\n          ? 'h-fit border-b md:grid md:grid-cols-[1fr_720px_1fr] md:px-4'\n          : 'flex md:mx-auto md:max-w-[720px]'\n      \">\n      <div\n        v-if=\"isSticky\"\n        class=\"flex max-w-40 items-center\">\n        <LibraryIcon\n          class=\"text-c-2 hidden size-3.5 md:block\"\n          :src=\"\n            activeCollection?.['x-scalar-icon'] || 'interface-content-folder'\n          \"\n          stroke-width=\"2\" />\n        <span\n          class=\"text-c-1 mr-[6.25px] hidden overflow-hidden px-2 font-medium text-ellipsis whitespace-nowrap md:block\"\n          >{{ activeCollection?.info?.title }}</span\n        >\n      </div>\n      <div\n        class=\"flex w-full max-w-[720px] gap-2 pl-1.5 md:ml-1.5 md:pl-0\"\n        :class=\"!isSticky && 'border-b'\">\n        <RouterLink\n          v-for=\"({ to, displayName }, i) in routes\"\n          :key=\"i\"\n          class=\"-ml-2 flex h-10 cursor-pointer items-center px-2 text-center text-sm font-medium whitespace-nowrap no-underline -outline-offset-1 has-[:focus-visible]:outline\"\n          :to=\"to\">\n          <span\n            class=\"flex-center h-full w-full border-b\"\n            :class=\"\n              typeof to.name === 'string' &&\n              typeof currentRoute.name === 'string' &&\n              currentRoute.name?.startsWith(to.name)\n                ? 'text-c-1 border-c-1'\n                : 'text-c-2 hover:text-c-1 border-transparent'\n            \">\n            {{ displayName }}\n          </span>\n        </RouterLink>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useScroll } from '@vueuse/core'\nimport { computed, ref, watch } from 'vue'\nimport { RouterView, useRouter } from 'vue-router'\n\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\nimport CollectionNavigation from '@/views/Collection/CollectionNavigation.vue'\n\nconst { activeCollection } = useActiveEntities()\nconst router = useRouter()\n\nconst el = ref<HTMLElement | null>(null)\nconst { y } = useScroll(el)\nconst isSticky = computed(() => y.value > 104)\n\n// If collection is called 'Drafts', redirect to the first request\nwatch(\n  activeCollection,\n  (collection) => {\n    if (collection?.info?.title === 'Drafts') {\n      const firstRequest = collection.requests[0]\n      router.push({\n        name: 'request',\n        params: { [PathId.Request]: firstRequest },\n      })\n    }\n  },\n  {\n    immediate: true,\n  },\n)\n</script>\n\n<template>\n  <ViewLayout\n    ref=\"el\"\n    class=\"h-fit overflow-auto pb-6 xl:overflow-auto\">\n    <ViewLayoutSection class=\"xl:h-fit\">\n      <CollectionNavigation :isSticky=\"isSticky\" />\n      <div class=\"w-full md:mx-auto md:max-w-[720px]\">\n        <RouterView />\n      </div>\n    </ViewLayoutSection>\n  </ViewLayout>\n</template>\n","<script setup lang=\"ts\">\nimport { useScroll } from '@vueuse/core'\nimport { computed, ref, watch } from 'vue'\nimport { RouterView, useRouter } from 'vue-router'\n\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\nimport CollectionNavigation from '@/views/Collection/CollectionNavigation.vue'\n\nconst { activeCollection } = useActiveEntities()\nconst router = useRouter()\n\nconst el = ref<HTMLElement | null>(null)\nconst { y } = useScroll(el)\nconst isSticky = computed(() => y.value > 104)\n\n// If collection is called 'Drafts', redirect to the first request\nwatch(\n  activeCollection,\n  (collection) => {\n    if (collection?.info?.title === 'Drafts') {\n      const firstRequest = collection.requests[0]\n      router.push({\n        name: 'request',\n        params: { [PathId.Request]: firstRequest },\n      })\n    }\n  },\n  {\n    immediate: true,\n  },\n)\n</script>\n\n<template>\n  <ViewLayout\n    ref=\"el\"\n    class=\"h-fit overflow-auto pb-6 xl:overflow-auto\">\n    <ViewLayoutSection class=\"xl:h-fit\">\n      <CollectionNavigation :isSticky=\"isSticky\" />\n      <div class=\"w-full md:mx-auto md:max-w-[720px]\">\n        <RouterView />\n      </div>\n    </ViewLayoutSection>\n  </ViewLayout>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Collection-BsAG7ms5.js","names":[],"sources":["../src/components/Form/LabelInput.vue","../src/components/Form/LabelInput.vue","../src/views/Collection/CollectionInfoForm.vue","../src/views/Collection/CollectionInfoForm.vue","../src/views/Collection/CollectionNavigation.vue","../src/views/Collection/CollectionNavigation.vue","../src/views/Collection/Collection.vue","../src/views/Collection/Collection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\nimport type { ClientLayout } from '@/hooks/useLayout'\n\ndefineProps<{\n  inputId: string\n  placeholder: string\n  value: string | undefined\n  layout?: ClientLayout\n}>()\n\nconst emit = defineEmits<{\n  (e: 'updateValue', value: string): void\n}>()\n\nconst { cx } = useBindCx()\n\nconst onInput = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  emit('updateValue', target.value)\n}\n</script>\n<template>\n  <div v-bind=\"cx('flex-1 flex gap-1 items-center pointer-events-none group')\">\n    <template v-if=\"layout !== 'modal'\">\n      <label\n        v-bind=\"\n          cx(\n            'absolute w-full h-full top-0 left-0 pointer-events-auto opacity-0 cursor-text',\n          )\n        \"\n        :for=\"inputId\" />\n      <input\n        v-bind=\"\n          cx(\n            'flex-1 text-c-1 rounded pointer-events-auto relative w-full pl-1.25 -ml-0.5 md:-ml-1.25 h-8 group-hover-input has-[:focus-visible]:outline z-10',\n          )\n        \"\n        :id=\"inputId\"\n        :placeholder=\"placeholder\"\n        :value=\"value\"\n        @input=\"onInput\" />\n    </template>\n    <span\n      v-else\n      v-bind=\"cx('flex items-center text-c-1 h-8')\">\n      {{ value }}\n    </span>\n  </div>\n</template>\n<style scoped>\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\nimport type { ClientLayout } from '@/hooks/useLayout'\n\ndefineProps<{\n  inputId: string\n  placeholder: string\n  value: string | undefined\n  layout?: ClientLayout\n}>()\n\nconst emit = defineEmits<{\n  (e: 'updateValue', value: string): void\n}>()\n\nconst { cx } = useBindCx()\n\nconst onInput = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  emit('updateValue', target.value)\n}\n</script>\n<template>\n  <div v-bind=\"cx('flex-1 flex gap-1 items-center pointer-events-none group')\">\n    <template v-if=\"layout !== 'modal'\">\n      <label\n        v-bind=\"\n          cx(\n            'absolute w-full h-full top-0 left-0 pointer-events-auto opacity-0 cursor-text',\n          )\n        \"\n        :for=\"inputId\" />\n      <input\n        v-bind=\"\n          cx(\n            'flex-1 text-c-1 rounded pointer-events-auto relative w-full pl-1.25 -ml-0.5 md:-ml-1.25 h-8 group-hover-input has-[:focus-visible]:outline z-10',\n          )\n        \"\n        :id=\"inputId\"\n        :placeholder=\"placeholder\"\n        :value=\"value\"\n        @input=\"onInput\" />\n    </template>\n    <span\n      v-else\n      v-bind=\"cx('flex items-center text-c-1 h-8')\">\n      {{ value }}\n    </span>\n  </div>\n</template>\n<style scoped>\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { computed } from 'vue'\n\nimport LabelInput from '@/components/Form/LabelInput.vue'\nimport IconSelector from '@/components/IconSelector.vue'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nconst { activeCollection } = useActiveEntities()\nconst { collectionMutators } = useWorkspace()\n\nconst icon = computed(\n  () =>\n    activeCollection?.value?.['x-scalar-icon'] || 'interface-content-folder',\n)\n\nconst updateCollectionIcon = (value: string) => {\n  if (!activeCollection?.value?.uid) {\n    return\n  }\n\n  collectionMutators.edit(activeCollection?.value?.uid, 'x-scalar-icon', value)\n}\n\n/**\n * Update info.title\n */\nconst updateCollectionTitle = (value: string) => {\n  if (!activeCollection.value) {\n    return\n  }\n\n  collectionMutators.edit(activeCollection.value.uid, 'info.title', value)\n}\n\n/**\n * Alias for the data that we'd like to display.\n */\nconst data = computed(() => {\n  return {\n    icon: activeCollection?.value?.['x-scalar-icon'],\n    title: activeCollection?.value?.info?.title,\n    description: activeCollection?.value?.info?.description,\n    version: activeCollection?.value?.info?.version,\n  }\n})\n</script>\n\n<template>\n  <div\n    :aria-label=\"`Collection: ${data.title}`\"\n    class=\"mx-auto flex h-fit w-full flex-col gap-2 pt-6 pb-3 md:mx-auto md:max-w-[720px]\">\n    <IconSelector\n      :modelValue=\"icon\"\n      placement=\"bottom-start\"\n      @update:modelValue=\"(value) => updateCollectionIcon(value)\">\n      <ScalarButton\n        class=\"hover:bg-b-2 aspect-square h-7 w-7 cursor-pointer rounded border border-transparent p-0 hover:border-inherit\"\n        variant=\"ghost\">\n        <LibraryIcon\n          class=\"text-c-2 size-5\"\n          :src=\"icon\"\n          stroke-width=\"2\" />\n      </ScalarButton>\n    </IconSelector>\n    <div class=\"group relative ml-1.25\">\n      <LabelInput\n        class=\"text-xl font-bold\"\n        inputId=\"collectionName\"\n        placeholder=\"Untitled Collection\"\n        :value=\"data.title\"\n        @updateValue=\"updateCollectionTitle\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n:deep(.markdown) h2 {\n  @apply text-lg;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { computed } from 'vue'\n\nimport LabelInput from '@/components/Form/LabelInput.vue'\nimport IconSelector from '@/components/IconSelector.vue'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nconst { activeCollection } = useActiveEntities()\nconst { collectionMutators } = useWorkspace()\n\nconst icon = computed(\n  () =>\n    activeCollection?.value?.['x-scalar-icon'] || 'interface-content-folder',\n)\n\nconst updateCollectionIcon = (value: string) => {\n  if (!activeCollection?.value?.uid) {\n    return\n  }\n\n  collectionMutators.edit(activeCollection?.value?.uid, 'x-scalar-icon', value)\n}\n\n/**\n * Update info.title\n */\nconst updateCollectionTitle = (value: string) => {\n  if (!activeCollection.value) {\n    return\n  }\n\n  collectionMutators.edit(activeCollection.value.uid, 'info.title', value)\n}\n\n/**\n * Alias for the data that we'd like to display.\n */\nconst data = computed(() => {\n  return {\n    icon: activeCollection?.value?.['x-scalar-icon'],\n    title: activeCollection?.value?.info?.title,\n    description: activeCollection?.value?.info?.description,\n    version: activeCollection?.value?.info?.version,\n  }\n})\n</script>\n\n<template>\n  <div\n    :aria-label=\"`Collection: ${data.title}`\"\n    class=\"mx-auto flex h-fit w-full flex-col gap-2 pt-6 pb-3 md:mx-auto md:max-w-[720px]\">\n    <IconSelector\n      :modelValue=\"icon\"\n      placement=\"bottom-start\"\n      @update:modelValue=\"(value) => updateCollectionIcon(value)\">\n      <ScalarButton\n        class=\"hover:bg-b-2 aspect-square h-7 w-7 cursor-pointer rounded border border-transparent p-0 hover:border-inherit\"\n        variant=\"ghost\">\n        <LibraryIcon\n          class=\"text-c-2 size-5\"\n          :src=\"icon\"\n          stroke-width=\"2\" />\n      </ScalarButton>\n    </IconSelector>\n    <div class=\"group relative ml-1.25\">\n      <LabelInput\n        class=\"text-xl font-bold\"\n        inputId=\"collectionName\"\n        placeholder=\"Untitled Collection\"\n        :value=\"data.title\"\n        @updateValue=\"updateCollectionTitle\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n:deep(.markdown) h2 {\n  @apply text-lg;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { computed } from 'vue'\nimport { RouterLink, useRouter, type RouteLocationNamedRaw } from 'vue-router'\n\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\n\nimport CollectionInfoForm from './CollectionInfoForm.vue'\n\ndefineProps<{\n  isSticky: boolean\n}>()\n\nconst { currentRoute } = useRouter()\nconst { activeCollection } = useActiveEntities()\n\ntype CollectionSidebarEntry = {\n  // icon: Icon\n  to: RouteLocationNamedRaw\n  displayName: string\n}\n\nconst routes = computed<CollectionSidebarEntry[]>(() => [\n  {\n    displayName: 'Overview',\n    // icon: 'Collection',\n    to: {\n      name: 'collection.overview',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  {\n    displayName: 'Servers',\n    // icon: 'Server',\n    to: {\n      name: 'collection.servers',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  {\n    displayName: 'Authentication',\n    // icon: 'Lock',\n    to: {\n      name: 'collection.authentication',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  {\n    displayName: 'Environment',\n    // icon: 'Brackets',\n    to: {\n      name: 'collection.environment',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  // {\n  //   displayName: 'Cookies',\n  //   // icon: 'Cookie',\n  //   to: {\n  //     name: 'collection.cookies',\n  //     params: {\n  //       [PathId.Collection]: activeCollection.value?.uid,\n  //     },\n  //   },\n  // },\n  // {\n  //   displayName: 'Scripts',\n  //   // icon: 'CodeFolder',\n  //   to: {\n  //     name: 'collection.scripts',\n  //     params: {\n  //       [PathId.Collection]: activeCollection.value?.uid,\n  //     },\n  //   },\n  // },\n  // {\n  //   displayName: 'Sync',\n  //   // icon: 'Download',\n  //   to: {\n  //     name: 'collection.sync',\n  //   },\n  // },\n  {\n    displayName: 'Settings',\n    // icon: 'Settings',\n    to: {\n      name: 'collection.settings',\n    },\n  },\n])\n</script>\n<template>\n  <div class=\"bg-b-1 sticky -top-[104px] z-10 mx-auto w-full\">\n    <CollectionInfoForm />\n    <div\n      class=\"items-center text-sm font-medium\"\n      :class=\"\n        isSticky\n          ? 'h-fit border-b md:grid md:grid-cols-[1fr_720px_1fr] md:px-4'\n          : 'flex md:mx-auto md:max-w-[720px]'\n      \">\n      <div\n        v-if=\"isSticky\"\n        class=\"flex max-w-40 items-center\">\n        <LibraryIcon\n          class=\"text-c-2 hidden size-3.5 md:block\"\n          :src=\"\n            activeCollection?.['x-scalar-icon'] || 'interface-content-folder'\n          \"\n          stroke-width=\"2\" />\n        <span\n          class=\"text-c-1 mr-[6.25px] hidden overflow-hidden px-2 font-medium text-ellipsis whitespace-nowrap md:block\"\n          >{{ activeCollection?.info?.title }}</span\n        >\n      </div>\n      <div\n        class=\"flex w-full max-w-[720px] gap-2 pl-1.5 md:ml-1.5 md:pl-0\"\n        :class=\"!isSticky && 'border-b'\">\n        <RouterLink\n          v-for=\"({ to, displayName }, i) in routes\"\n          :key=\"i\"\n          class=\"-ml-2 flex h-10 cursor-pointer items-center px-2 text-center text-sm font-medium whitespace-nowrap no-underline -outline-offset-1 has-[:focus-visible]:outline\"\n          :to=\"to\">\n          <span\n            class=\"flex-center h-full w-full border-b\"\n            :class=\"\n              typeof to.name === 'string' &&\n              typeof currentRoute.name === 'string' &&\n              currentRoute.name?.startsWith(to.name)\n                ? 'text-c-1 border-c-1'\n                : 'text-c-2 hover:text-c-1 border-transparent'\n            \">\n            {{ displayName }}\n          </span>\n        </RouterLink>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { LibraryIcon } from '@scalar/icons/library'\nimport { computed } from 'vue'\nimport { RouterLink, useRouter, type RouteLocationNamedRaw } from 'vue-router'\n\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\n\nimport CollectionInfoForm from './CollectionInfoForm.vue'\n\ndefineProps<{\n  isSticky: boolean\n}>()\n\nconst { currentRoute } = useRouter()\nconst { activeCollection } = useActiveEntities()\n\ntype CollectionSidebarEntry = {\n  // icon: Icon\n  to: RouteLocationNamedRaw\n  displayName: string\n}\n\nconst routes = computed<CollectionSidebarEntry[]>(() => [\n  {\n    displayName: 'Overview',\n    // icon: 'Collection',\n    to: {\n      name: 'collection.overview',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  {\n    displayName: 'Servers',\n    // icon: 'Server',\n    to: {\n      name: 'collection.servers',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  {\n    displayName: 'Authentication',\n    // icon: 'Lock',\n    to: {\n      name: 'collection.authentication',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  {\n    displayName: 'Environment',\n    // icon: 'Brackets',\n    to: {\n      name: 'collection.environment',\n      params: {\n        [PathId.Collection]: activeCollection.value?.uid,\n      },\n    },\n  },\n  // {\n  //   displayName: 'Cookies',\n  //   // icon: 'Cookie',\n  //   to: {\n  //     name: 'collection.cookies',\n  //     params: {\n  //       [PathId.Collection]: activeCollection.value?.uid,\n  //     },\n  //   },\n  // },\n  // {\n  //   displayName: 'Scripts',\n  //   // icon: 'CodeFolder',\n  //   to: {\n  //     name: 'collection.scripts',\n  //     params: {\n  //       [PathId.Collection]: activeCollection.value?.uid,\n  //     },\n  //   },\n  // },\n  // {\n  //   displayName: 'Sync',\n  //   // icon: 'Download',\n  //   to: {\n  //     name: 'collection.sync',\n  //   },\n  // },\n  {\n    displayName: 'Settings',\n    // icon: 'Settings',\n    to: {\n      name: 'collection.settings',\n    },\n  },\n])\n</script>\n<template>\n  <div class=\"bg-b-1 sticky -top-[104px] z-10 mx-auto w-full\">\n    <CollectionInfoForm />\n    <div\n      class=\"items-center text-sm font-medium\"\n      :class=\"\n        isSticky\n          ? 'h-fit border-b md:grid md:grid-cols-[1fr_720px_1fr] md:px-4'\n          : 'flex md:mx-auto md:max-w-[720px]'\n      \">\n      <div\n        v-if=\"isSticky\"\n        class=\"flex max-w-40 items-center\">\n        <LibraryIcon\n          class=\"text-c-2 hidden size-3.5 md:block\"\n          :src=\"\n            activeCollection?.['x-scalar-icon'] || 'interface-content-folder'\n          \"\n          stroke-width=\"2\" />\n        <span\n          class=\"text-c-1 mr-[6.25px] hidden overflow-hidden px-2 font-medium text-ellipsis whitespace-nowrap md:block\"\n          >{{ activeCollection?.info?.title }}</span\n        >\n      </div>\n      <div\n        class=\"flex w-full max-w-[720px] gap-2 pl-1.5 md:ml-1.5 md:pl-0\"\n        :class=\"!isSticky && 'border-b'\">\n        <RouterLink\n          v-for=\"({ to, displayName }, i) in routes\"\n          :key=\"i\"\n          class=\"-ml-2 flex h-10 cursor-pointer items-center px-2 text-center text-sm font-medium whitespace-nowrap no-underline -outline-offset-1 has-[:focus-visible]:outline\"\n          :to=\"to\">\n          <span\n            class=\"flex-center h-full w-full border-b\"\n            :class=\"\n              typeof to.name === 'string' &&\n              typeof currentRoute.name === 'string' &&\n              currentRoute.name?.startsWith(to.name)\n                ? 'text-c-1 border-c-1'\n                : 'text-c-2 hover:text-c-1 border-transparent'\n            \">\n            {{ displayName }}\n          </span>\n        </RouterLink>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useScroll } from '@vueuse/core'\nimport { computed, ref, watch } from 'vue'\nimport { RouterView, useRouter } from 'vue-router'\n\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\nimport CollectionNavigation from '@/views/Collection/CollectionNavigation.vue'\n\nconst { activeCollection } = useActiveEntities()\nconst router = useRouter()\n\nconst el = ref<HTMLElement | null>(null)\nconst { y } = useScroll(el)\nconst isSticky = computed(() => y.value > 104)\n\n// If collection is called 'Drafts', redirect to the first request\nwatch(\n  activeCollection,\n  (collection) => {\n    if (collection?.info?.title === 'Drafts') {\n      const firstRequest = collection.requests[0]\n      router.push({\n        name: 'request',\n        params: { [PathId.Request]: firstRequest },\n      })\n    }\n  },\n  {\n    immediate: true,\n  },\n)\n</script>\n\n<template>\n  <ViewLayout\n    ref=\"el\"\n    class=\"h-fit overflow-auto pb-6 xl:overflow-auto\">\n    <ViewLayoutSection class=\"xl:h-fit\">\n      <CollectionNavigation :isSticky=\"isSticky\" />\n      <div class=\"w-full md:mx-auto md:max-w-[720px]\">\n        <RouterView />\n      </div>\n    </ViewLayoutSection>\n  </ViewLayout>\n</template>\n","<script setup lang=\"ts\">\nimport { useScroll } from '@vueuse/core'\nimport { computed, ref, watch } from 'vue'\nimport { RouterView, useRouter } from 'vue-router'\n\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\nimport CollectionNavigation from '@/views/Collection/CollectionNavigation.vue'\n\nconst { activeCollection } = useActiveEntities()\nconst router = useRouter()\n\nconst el = ref<HTMLElement | null>(null)\nconst { y } = useScroll(el)\nconst isSticky = computed(() => y.value > 104)\n\n// If collection is called 'Drafts', redirect to the first request\nwatch(\n  activeCollection,\n  (collection) => {\n    if (collection?.info?.title === 'Drafts') {\n      const firstRequest = collection.requests[0]\n      router.push({\n        name: 'request',\n        params: { [PathId.Request]: firstRequest },\n      })\n    }\n  },\n  {\n    immediate: true,\n  },\n)\n</script>\n\n<template>\n  <ViewLayout\n    ref=\"el\"\n    class=\"h-fit overflow-auto pb-6 xl:overflow-auto\">\n    <ViewLayoutSection class=\"xl:h-fit\">\n      <CollectionNavigation :isSticky=\"isSticky\" />\n      <div class=\"w-full md:mx-auto md:max-w-[720px]\">\n        <RouterView />\n      </div>\n    </ViewLayoutSection>\n  </ViewLayout>\n</template>\n"],"mappings":"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"}

package/dist/{CollectionAuthentication-BDpvv8cA.js → CollectionAuthentication-BMGhRnpo.js}

@@ -1,8 +1,8 @@
-import { r as useWorkspace, w as useActiveEntities } from "./store-DaPoVtIS.js";
+import { r as useWorkspace, w as useActiveEntities } from "./store-DnlAQK5d.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
-import "./CodeInput-BN7uw3Bh.js";
-import "./DataTableInput-SkIUPlrB.js";
-import { t as RequestAuth_default } from "./RequestAuth-BU6ubH-c.js";
+import "./CodeInput-BTN8cC5h.js";
+import "./DataTableInput-RydMDjn2.js";
+import { t as RequestAuth_default } from "./RequestAuth-1cRH3DDn.js";
 import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, unref } from "vue";
 import { ScalarToggle } from "@scalar/components";
 //#region src/views/Collection/CollectionAuthentication.vue?vue&type=script&setup=true&lang.ts
@@ -53,4 +53,4 @@ var CollectionAuthentication_default = /* @__PURE__ */ _plugin_vue_export_helper
 //#endregion
 export { CollectionAuthentication_default as default };
 
-//# sourceMappingURL=CollectionAuthentication-BDpvv8cA.js.map
+//# sourceMappingURL=CollectionAuthentication-BMGhRnpo.js.map

package/dist/{CollectionAuthentication-BDpvv8cA.js.map → CollectionAuthentication-BMGhRnpo.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CollectionAuthentication-BDpvv8cA.js","names":[],"sources":["../src/views/Collection/CollectionAuthentication.vue","../src/views/Collection/CollectionAuthentication.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarToggle } from '@scalar/components'\n\nimport { useActiveEntities } from '@/store/active-entities'\nimport { useWorkspace } from '@/store/store'\nimport { RequestAuth } from '@/views/Request/RequestSection/RequestAuth'\n\nconst {\n  activeCollection,\n  activeEnvVariables,\n  activeEnvironment,\n  activeServer,\n  activeWorkspace,\n} = useActiveEntities()\n\nconst { collectionMutators } = useWorkspace()\n\n/** Toggle the collection security */\nconst handleToggleCollectionSecurity = () => {\n  if (!activeCollection.value?.uid) {\n    return\n  }\n\n  collectionMutators.edit(\n    activeCollection.value.uid,\n    'useCollectionSecurity',\n    !activeCollection.value.useCollectionSecurity,\n  )\n}\n</script>\n\n<template>\n  <div class=\"flex h-full w-full flex-col gap-12 px-1.5 pt-8\">\n    <div class=\"flex flex-col gap-4\">\n      <div class=\"flex flex-col gap-2\">\n        <div class=\"flex h-8 items-center justify-between\">\n          <h3 class=\"font-bold\">Authentication</h3>\n          <ScalarToggle\n            class=\"w-4\"\n            :modelValue=\"activeCollection?.useCollectionSecurity ?? false\"\n            @update:modelValue=\"handleToggleCollectionSecurity\" />\n        </div>\n        <p class=\"pr-6 text-sm\">\n          Added authentication will apply to all requests under this collection.\n          You can override this by specifying another one in the request.\n        </p>\n      </div>\n\n      <RequestAuth\n        class=\"scalar-collection-auth\"\n        :class=\"\n          !activeCollection?.useCollectionSecurity &&\n          'pointer-events-none opacity-50 mix-blend-luminosity'\n        \"\n        v-if=\"activeCollection && activeWorkspace\"\n        :collection=\"activeCollection\"\n        :envVariables=\"activeEnvVariables\"\n        :environment=\"activeEnvironment\"\n        layout=\"client\"\n        :selectedSecuritySchemeUids=\"\n          activeCollection?.selectedSecuritySchemeUids ?? []\n        \"\n        :server=\"activeServer\"\n        title=\"Authentication\"\n        :workspace=\"activeWorkspace\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.scalar-collection-auth {\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg);\n  overflow: hidden;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarToggle } from '@scalar/components'\n\nimport { useActiveEntities } from '@/store/active-entities'\nimport { useWorkspace } from '@/store/store'\nimport { RequestAuth } from '@/views/Request/RequestSection/RequestAuth'\n\nconst {\n  activeCollection,\n  activeEnvVariables,\n  activeEnvironment,\n  activeServer,\n  activeWorkspace,\n} = useActiveEntities()\n\nconst { collectionMutators } = useWorkspace()\n\n/** Toggle the collection security */\nconst handleToggleCollectionSecurity = () => {\n  if (!activeCollection.value?.uid) {\n    return\n  }\n\n  collectionMutators.edit(\n    activeCollection.value.uid,\n    'useCollectionSecurity',\n    !activeCollection.value.useCollectionSecurity,\n  )\n}\n</script>\n\n<template>\n  <div class=\"flex h-full w-full flex-col gap-12 px-1.5 pt-8\">\n    <div class=\"flex flex-col gap-4\">\n      <div class=\"flex flex-col gap-2\">\n        <div class=\"flex h-8 items-center justify-between\">\n          <h3 class=\"font-bold\">Authentication</h3>\n          <ScalarToggle\n            class=\"w-4\"\n            :modelValue=\"activeCollection?.useCollectionSecurity ?? false\"\n            @update:modelValue=\"handleToggleCollectionSecurity\" />\n        </div>\n        <p class=\"pr-6 text-sm\">\n          Added authentication will apply to all requests under this collection.\n          You can override this by specifying another one in the request.\n        </p>\n      </div>\n\n      <RequestAuth\n        class=\"scalar-collection-auth\"\n        :class=\"\n          !activeCollection?.useCollectionSecurity &&\n          'pointer-events-none opacity-50 mix-blend-luminosity'\n        \"\n        v-if=\"activeCollection && activeWorkspace\"\n        :collection=\"activeCollection\"\n        :envVariables=\"activeEnvVariables\"\n        :environment=\"activeEnvironment\"\n        layout=\"client\"\n        :selectedSecuritySchemeUids=\"\n          activeCollection?.selectedSecuritySchemeUids ?? []\n        \"\n        :server=\"activeServer\"\n        title=\"Authentication\"\n        :workspace=\"activeWorkspace\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.scalar-collection-auth {\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg);\n  overflow: hidden;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;ECOA,MAAM,EACJ,kBACA,oBACA,mBACA,cACA,oBACE,mBAAkB;EAEtB,MAAM,EAAE,uBAAuB,cAAa;;EAG5C,MAAM,uCAAuC;AAC3C,OAAI,CAAC,iBAAiB,OAAO,IAC3B;AAGF,sBAAmB,KACjB,iBAAiB,MAAM,KACvB,yBACA,CAAC,iBAAiB,MAAM,sBAC1B;;;uBAKA,mBAkCM,OAlCN,YAkCM,CAjCJ,mBAgCM,OAhCN,YAgCM,CA/BJ,mBAYM,OAZN,YAYM,CAXJ,mBAMM,OANN,YAMM,CAAA,OAAA,OAAA,OAAA,KALJ,mBAAyC,MAAA,EAArC,OAAM,aAAW,EAAC,kBAAc,GAAA,GACpC,YAGwD,MAAA,aAAA,EAAA;IAFtD,OAAM;IACL,YAAY,MAAA,iBAAgB,EAAE,yBAAqB;IACnD,uBAAmB;4DAExB,mBAGI,KAAA,EAHD,OAAM,gBAAc,EAAC,4IAGxB,GAAA,EAAA,CAAA,EASM,MAAA,iBAAgB,IAAI,MAAA,gBAAe,IAAA,WAAA,EAN3C,YAgBiC,MAAA,oBAAA,EAAA;;IAf/B,OAAK,eAAA,CAAC,0BAAA,CACc,MAAA,iBAAgB,EAAE,yBAAA,sDAAA,CAAA;IAKrC,YAAY,MAAA,iBAAgB;IAC5B,cAAc,MAAA,mBAAkB;IAChC,aAAa,MAAA,kBAAiB;IAC/B,QAAO;IACN,4BAAuC,MAAA,iBAAgB,EAAE,8BAA0B,EAAA;IAGnF,QAAQ,MAAA,aAAY;IACrB,OAAM;IACL,WAAW,MAAA,gBAAe"}
+{"version":3,"file":"CollectionAuthentication-BMGhRnpo.js","names":[],"sources":["../src/views/Collection/CollectionAuthentication.vue","../src/views/Collection/CollectionAuthentication.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarToggle } from '@scalar/components'\n\nimport { useActiveEntities } from '@/store/active-entities'\nimport { useWorkspace } from '@/store/store'\nimport { RequestAuth } from '@/views/Request/RequestSection/RequestAuth'\n\nconst {\n  activeCollection,\n  activeEnvVariables,\n  activeEnvironment,\n  activeServer,\n  activeWorkspace,\n} = useActiveEntities()\n\nconst { collectionMutators } = useWorkspace()\n\n/** Toggle the collection security */\nconst handleToggleCollectionSecurity = () => {\n  if (!activeCollection.value?.uid) {\n    return\n  }\n\n  collectionMutators.edit(\n    activeCollection.value.uid,\n    'useCollectionSecurity',\n    !activeCollection.value.useCollectionSecurity,\n  )\n}\n</script>\n\n<template>\n  <div class=\"flex h-full w-full flex-col gap-12 px-1.5 pt-8\">\n    <div class=\"flex flex-col gap-4\">\n      <div class=\"flex flex-col gap-2\">\n        <div class=\"flex h-8 items-center justify-between\">\n          <h3 class=\"font-bold\">Authentication</h3>\n          <ScalarToggle\n            class=\"w-4\"\n            :modelValue=\"activeCollection?.useCollectionSecurity ?? false\"\n            @update:modelValue=\"handleToggleCollectionSecurity\" />\n        </div>\n        <p class=\"pr-6 text-sm\">\n          Added authentication will apply to all requests under this collection.\n          You can override this by specifying another one in the request.\n        </p>\n      </div>\n\n      <RequestAuth\n        class=\"scalar-collection-auth\"\n        :class=\"\n          !activeCollection?.useCollectionSecurity &&\n          'pointer-events-none opacity-50 mix-blend-luminosity'\n        \"\n        v-if=\"activeCollection && activeWorkspace\"\n        :collection=\"activeCollection\"\n        :envVariables=\"activeEnvVariables\"\n        :environment=\"activeEnvironment\"\n        layout=\"client\"\n        :selectedSecuritySchemeUids=\"\n          activeCollection?.selectedSecuritySchemeUids ?? []\n        \"\n        :server=\"activeServer\"\n        title=\"Authentication\"\n        :workspace=\"activeWorkspace\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.scalar-collection-auth {\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg);\n  overflow: hidden;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarToggle } from '@scalar/components'\n\nimport { useActiveEntities } from '@/store/active-entities'\nimport { useWorkspace } from '@/store/store'\nimport { RequestAuth } from '@/views/Request/RequestSection/RequestAuth'\n\nconst {\n  activeCollection,\n  activeEnvVariables,\n  activeEnvironment,\n  activeServer,\n  activeWorkspace,\n} = useActiveEntities()\n\nconst { collectionMutators } = useWorkspace()\n\n/** Toggle the collection security */\nconst handleToggleCollectionSecurity = () => {\n  if (!activeCollection.value?.uid) {\n    return\n  }\n\n  collectionMutators.edit(\n    activeCollection.value.uid,\n    'useCollectionSecurity',\n    !activeCollection.value.useCollectionSecurity,\n  )\n}\n</script>\n\n<template>\n  <div class=\"flex h-full w-full flex-col gap-12 px-1.5 pt-8\">\n    <div class=\"flex flex-col gap-4\">\n      <div class=\"flex flex-col gap-2\">\n        <div class=\"flex h-8 items-center justify-between\">\n          <h3 class=\"font-bold\">Authentication</h3>\n          <ScalarToggle\n            class=\"w-4\"\n            :modelValue=\"activeCollection?.useCollectionSecurity ?? false\"\n            @update:modelValue=\"handleToggleCollectionSecurity\" />\n        </div>\n        <p class=\"pr-6 text-sm\">\n          Added authentication will apply to all requests under this collection.\n          You can override this by specifying another one in the request.\n        </p>\n      </div>\n\n      <RequestAuth\n        class=\"scalar-collection-auth\"\n        :class=\"\n          !activeCollection?.useCollectionSecurity &&\n          'pointer-events-none opacity-50 mix-blend-luminosity'\n        \"\n        v-if=\"activeCollection && activeWorkspace\"\n        :collection=\"activeCollection\"\n        :envVariables=\"activeEnvVariables\"\n        :environment=\"activeEnvironment\"\n        layout=\"client\"\n        :selectedSecuritySchemeUids=\"\n          activeCollection?.selectedSecuritySchemeUids ?? []\n        \"\n        :server=\"activeServer\"\n        title=\"Authentication\"\n        :workspace=\"activeWorkspace\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.scalar-collection-auth {\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg);\n  overflow: hidden;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;ECOA,MAAM,EACJ,kBACA,oBACA,mBACA,cACA,oBACE,mBAAkB;EAEtB,MAAM,EAAE,uBAAuB,cAAa;;EAG5C,MAAM,uCAAuC;AAC3C,OAAI,CAAC,iBAAiB,OAAO,IAC3B;AAGF,sBAAmB,KACjB,iBAAiB,MAAM,KACvB,yBACA,CAAC,iBAAiB,MAAM,sBAC1B;;;uBAKA,mBAkCM,OAlCN,YAkCM,CAjCJ,mBAgCM,OAhCN,YAgCM,CA/BJ,mBAYM,OAZN,YAYM,CAXJ,mBAMM,OANN,YAMM,CAAA,OAAA,OAAA,OAAA,KALJ,mBAAyC,MAAA,EAArC,OAAM,aAAW,EAAC,kBAAc,GAAA,GACpC,YAGwD,MAAA,aAAA,EAAA;IAFtD,OAAM;IACL,YAAY,MAAA,iBAAgB,EAAE,yBAAqB;IACnD,uBAAmB;4DAExB,mBAGI,KAAA,EAHD,OAAM,gBAAc,EAAC,4IAGxB,GAAA,EAAA,CAAA,EASM,MAAA,iBAAgB,IAAI,MAAA,gBAAe,IAAA,WAAA,EAN3C,YAgBiC,MAAA,oBAAA,EAAA;;IAf/B,OAAK,eAAA,CAAC,0BAAA,CACc,MAAA,iBAAgB,EAAE,yBAAA,sDAAA,CAAA;IAKrC,YAAY,MAAA,iBAAgB;IAC5B,cAAc,MAAA,mBAAkB;IAChC,aAAa,MAAA,kBAAiB;IAC/B,QAAO;IACN,4BAAuC,MAAA,iBAAgB,EAAE,8BAA0B,EAAA;IAGnF,QAAQ,MAAA,aAAY;IACrB,OAAM;IACL,WAAW,MAAA,gBAAe"}

package/dist/{CollectionEnvironment-dwisJ-h5.js → CollectionEnvironment-BY9Gcnln.js}

@@ -1,12 +1,12 @@
-import { r as useWorkspace, w as useActiveEntities } from "./store-DaPoVtIS.js";
+import { r as useWorkspace, w as useActiveEntities } from "./store-DnlAQK5d.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
-import { t as CodeInput_default } from "./CodeInput-BN7uw3Bh.js";
+import { t as CodeInput_default } from "./CodeInput-BTN8cC5h.js";
 import { n as DataTableCell_default, r as DataTable_default, t as DataTableRow_default } from "./DataTableRow-c3XveEUO.js";
 import { t as DataTableHeader_default } from "./DataTableHeader-DJVB0jCZ.js";
 import { t as ViewLayoutSection_default } from "./ViewLayoutSection-mUqKbQry.js";
 import { t as DeleteSidebarListElement_default } from "./DeleteSidebarListElement-C-p87d03.js";
 import { t as EditSidebarListElement_default } from "./EditSidebarListElement-CodWPnM6.js";
-import { n as EnvironmentColorModal_default, t as EnvironmentModal_default } from "./EnvironmentModal-CcyqnPc2.js";
+import { n as EnvironmentColorModal_default, t as EnvironmentModal_default } from "./EnvironmentModal-C0lYytkh.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
 import { ScalarButton, ScalarIcon, ScalarModal, useModal } from "@scalar/components";
 import { ScalarIconTrash, ScalarIconWarning } from "@scalar/icons";
@@ -511,4 +511,4 @@ var CollectionEnvironment_default = /* @__PURE__ */ defineComponent({
 //#endregion
 export { CollectionEnvironment_default as default };
 
-//# sourceMappingURL=CollectionEnvironment-dwisJ-h5.js.map
+//# sourceMappingURL=CollectionEnvironment-BY9Gcnln.js.map