@scalar/api-client 2.38.3 → 2.38.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalar/api-client
 
+## 2.38.4
+
+### Patch Changes
+
+- [#8529](https://github.com/scalar/scalar/pull/8529): rewrite declaration aliases in built type files
+
 ## 2.38.3
 
 ### Patch Changes

package/dist/{AddressBar-CX8xiYoe.js → AddressBar-BOZGKSoz.js}

@@ -1,10 +1,10 @@
-import { r as useWorkspace } from "./store-DaPoVtIS.js";
+import { r as useWorkspace } from "./store-DnlAQK5d.js";
 import { a as useLayout } from "./useSidebar-DLTwHDI-.js";
 import { n as formatMs } from "./formatters-DOGXZq9R.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
 import { t as HttpMethod_default } from "./HttpMethod-rnWEgC3T.js";
-import { t as CodeInput_default } from "./CodeInput-BN7uw3Bh.js";
-import { n as ServerDropdown_default } from "./Server-BS4zjUdO.js";
+import { t as CodeInput_default } from "./CodeInput-BTN8cC5h.js";
+import { n as ServerDropdown_default } from "./Server-CEKGIEfE.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, useId, watch, withCtx } from "vue";
 import { ScalarButton, ScalarFloating, ScalarFloatingBackdrop, ScalarIcon } from "@scalar/components";
 import { httpStatusCodes } from "@scalar/oas-utils/helpers";
@@ -299,4 +299,4 @@ var AddressBar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 //#endregion
 export { AddressBar_default as t };
 
-//# sourceMappingURL=AddressBar-CX8xiYoe.js.map
+//# sourceMappingURL=AddressBar-BOZGKSoz.js.map

package/dist/{AddressBar-CX8xiYoe.js.map → AddressBar-BOZGKSoz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"AddressBar-CX8xiYoe.js","names":["$emit"],"sources":["../src/components/AddressBar/httpStatusCodeColors.ts","../src/components/AddressBar/AddressBarHistory.vue","../src/components/AddressBar/AddressBarHistory.vue","../src/components/AddressBar/AddressBar.vue","../src/components/AddressBar/AddressBar.vue"],"sourcesContent":["const STATUS_CODES_COLORS = {\n  100: {\n    color: 'text-yellow',\n  },\n  200: {\n    color: 'text-green',\n  },\n  202: {\n    color: 'text-green',\n  },\n  300: {\n    color: 'text-blue',\n  },\n  304: {\n    color: 'text-blue',\n  },\n  400: {\n    color: 'text-red',\n  },\n  401: {\n    color: 'text-orange',\n  },\n  422: {\n    color: 'text-yellow',\n  },\n  423: {\n    color: 'text-purple',\n  },\n  505: {\n    color: 'text-orange',\n  },\n} as const\n\ntype StatusCode = keyof typeof STATUS_CODES_COLORS\n\nexport const getStatusCodeColor = (statusCode: number) => {\n  const code = statusCode as StatusCode\n  return (\n    STATUS_CODES_COLORS[code] || {\n      /** default color */\n      color: 'text-grey',\n    }\n  )\n}\n","<script setup lang=\"ts\">\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  ScalarIcon,\n} from '@scalar/components'\nimport type { Operation, RequestEvent } from '@scalar/oas-utils/entities/spec'\nimport { httpStatusCodes } from '@scalar/oas-utils/helpers'\nimport { computed } from 'vue'\n\nimport { formatMs } from '@/libs/formatters'\nimport { useWorkspace } from '@/store'\n\nimport HttpMethod from '../HttpMethod/HttpMethod.vue'\nimport { getStatusCodeColor } from './httpStatusCodeColors'\n\nconst { operation, target } = defineProps<{\n  operation: Operation\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst { requestHistory } = useWorkspace()\n\n/** Use a local copy to prevent mutation of the reactive object */\nconst history = computed(() =>\n  requestHistory\n    .filter((entry) => entry.request.requestUid === operation.uid)\n    .slice()\n    .reverse(),\n)\n\nfunction handleHistoryClick(requestHistoryItem: RequestEvent) {\n  console.warn(\n    \"Restoring from the request history doesn't work yet. Request History Item:\",\n    requestHistoryItem,\n  )\n  // TODO: Restore the request data with the history item\n  // TODO: Restore the response data with the history item\n}\n</script>\n<template>\n  <Menu\n    v-slot=\"{ open }\"\n    as=\"div\">\n    <ScalarFloating\n      :offset=\"0\"\n      resize\n      :target=\"target\">\n      <!-- History -->\n      <MenuButton\n        v-if=\"history?.length\"\n        class=\"address-bar-history-button z-context-plus text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5\">\n        <ScalarIcon\n          icon=\"History\"\n          size=\"sm\"\n          thickness=\"2.25\" />\n        <span class=\"sr-only\">Request History</span>\n      </MenuButton>\n      <!-- History shadow and placement-->\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <!-- History Item -->\n        <MenuItems\n          class=\"custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center border-t p-0.75\"\n          static\n          :style=\"{ width }\">\n          <MenuItem\n            v-for=\"(entry, index) in history\"\n            :key=\"entry.timestamp\"\n            as=\"button\"\n            class=\"font-code ui-active:*:bg-b-2 text-c-2 contents text-sm font-medium *:flex *:h-8 *:cursor-pointer *:items-center *:rounded-none *:px-1.5 *:first:rounded-l *:last:rounded-r\"\n            :value=\"index\"\n            @click=\"handleHistoryClick(entry)\">\n            <HttpMethod\n              v-if=\"entry.response.method\"\n              class=\"text-[11px]\"\n              :method=\"entry.response.method\" />\n            <div class=\"min-w-0\">\n              <div class=\"text-c-1 min-w-0 truncate\">\n                {{ entry.response.path }}\n              </div>\n            </div>\n            <div>{{ formatMs(entry.response.duration) }}</div>\n            <div :class=\"[getStatusCodeColor(entry.response.status).color]\">\n              {{ entry.response.status }}\n            </div>\n            <div>\n              {{ httpStatusCodes[entry.response.status]?.name }}\n            </div>\n          </MenuItem>\n        </MenuItems>\n        <ScalarFloatingBackdrop\n          class=\"-top-(--scalar-address-bar-height) rounded-lg\" />\n      </template>\n    </ScalarFloating>\n  </Menu>\n</template>\n<style scoped>\n.address-bar-history-button:hover {\n  background: var(--scalar-background-3);\n}\n.address-bar-history-button:focus-within {\n  background: var(--scalar-background-2);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  ScalarIcon,\n} from '@scalar/components'\nimport type { Operation, RequestEvent } from '@scalar/oas-utils/entities/spec'\nimport { httpStatusCodes } from '@scalar/oas-utils/helpers'\nimport { computed } from 'vue'\n\nimport { formatMs } from '@/libs/formatters'\nimport { useWorkspace } from '@/store'\n\nimport HttpMethod from '../HttpMethod/HttpMethod.vue'\nimport { getStatusCodeColor } from './httpStatusCodeColors'\n\nconst { operation, target } = defineProps<{\n  operation: Operation\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst { requestHistory } = useWorkspace()\n\n/** Use a local copy to prevent mutation of the reactive object */\nconst history = computed(() =>\n  requestHistory\n    .filter((entry) => entry.request.requestUid === operation.uid)\n    .slice()\n    .reverse(),\n)\n\nfunction handleHistoryClick(requestHistoryItem: RequestEvent) {\n  console.warn(\n    \"Restoring from the request history doesn't work yet. Request History Item:\",\n    requestHistoryItem,\n  )\n  // TODO: Restore the request data with the history item\n  // TODO: Restore the response data with the history item\n}\n</script>\n<template>\n  <Menu\n    v-slot=\"{ open }\"\n    as=\"div\">\n    <ScalarFloating\n      :offset=\"0\"\n      resize\n      :target=\"target\">\n      <!-- History -->\n      <MenuButton\n        v-if=\"history?.length\"\n        class=\"address-bar-history-button z-context-plus text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5\">\n        <ScalarIcon\n          icon=\"History\"\n          size=\"sm\"\n          thickness=\"2.25\" />\n        <span class=\"sr-only\">Request History</span>\n      </MenuButton>\n      <!-- History shadow and placement-->\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <!-- History Item -->\n        <MenuItems\n          class=\"custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center border-t p-0.75\"\n          static\n          :style=\"{ width }\">\n          <MenuItem\n            v-for=\"(entry, index) in history\"\n            :key=\"entry.timestamp\"\n            as=\"button\"\n            class=\"font-code ui-active:*:bg-b-2 text-c-2 contents text-sm font-medium *:flex *:h-8 *:cursor-pointer *:items-center *:rounded-none *:px-1.5 *:first:rounded-l *:last:rounded-r\"\n            :value=\"index\"\n            @click=\"handleHistoryClick(entry)\">\n            <HttpMethod\n              v-if=\"entry.response.method\"\n              class=\"text-[11px]\"\n              :method=\"entry.response.method\" />\n            <div class=\"min-w-0\">\n              <div class=\"text-c-1 min-w-0 truncate\">\n                {{ entry.response.path }}\n              </div>\n            </div>\n            <div>{{ formatMs(entry.response.duration) }}</div>\n            <div :class=\"[getStatusCodeColor(entry.response.status).color]\">\n              {{ entry.response.status }}\n            </div>\n            <div>\n              {{ httpStatusCodes[entry.response.status]?.name }}\n            </div>\n          </MenuItem>\n        </MenuItems>\n        <ScalarFloatingBackdrop\n          class=\"-top-(--scalar-address-bar-height) rounded-lg\" />\n      </template>\n    </ScalarFloating>\n  </Menu>\n</template>\n<style scoped>\n.address-bar-history-button:hover {\n  background: var(--scalar-background-3);\n}\n.address-bar-history-button:focus-within {\n  background: var(--scalar-background-2);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { REQUEST_METHODS } from '@scalar/helpers/http/http-info'\nimport { ScalarIconPlay } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type {\n  Collection,\n  Operation,\n  RequestMethod,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { ref, useId, watch } from 'vue'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport { ServerDropdown } from '@/components/Server'\nimport { useLayout } from '@/hooks'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport HttpMethod from '../HttpMethod/HttpMethod.vue'\nimport AddressBarHistory from './AddressBarHistory.vue'\n\nconst { collection, operation, server, environment, envVariables, workspace } =\n  defineProps<{\n    collection: Collection\n    operation: Operation\n    server: Server | undefined\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n  }>()\n\ndefineEmits<{\n  (e: 'importCurl', value: string): void\n}>()\n\nconst id = useId()\n\nconst { requestMutators, events } = useWorkspace()\n\nconst { layout } = useLayout()\n\nconst addressBarRef = ref<typeof CodeInput | null>(null)\nconst sendButtonRef = ref<typeof ScalarButton | null>(null)\n\n/** update the instance path parameters on change */\nconst onUrlChange = (newPath: string) => {\n  if (operation.path === newPath) {\n    return\n  }\n  requestMutators.edit(operation.uid, 'path', newPath)\n}\n\n/** watch for changes in the URL */\nwatch(\n  () => operation.path,\n  (newURL) => {\n    if (!newURL) {\n      return\n    }\n    onUrlChange(newURL)\n  },\n)\n\n/** The amount remaining to load from 100 -> 0 */\nconst percentage = ref(100)\n/** Keeps track of how much was left when the request finished */\nconst remaining = ref(0)\n/** Whether or not there is a request loading */\nconst isRequesting = ref(false)\n/** The loading interval */\nconst interval = ref<ReturnType<typeof setInterval>>()\n\nfunction load() {\n  if (isRequesting.value) {\n    // Reduce asymptotically up to 85% loaded\n    percentage.value -= (percentage.value - 15) / 60\n  } else {\n    // Always finish loading linearly over 400ms\n    percentage.value -= remaining.value / 20\n  }\n  if (percentage.value <= 0) {\n    clearInterval(interval.value)\n    interval.value = undefined\n    percentage.value = 100\n    isRequesting.value = false\n  }\n}\n\nfunction startLoading() {\n  if (interval.value) {\n    return\n  }\n  isRequesting.value = true\n  interval.value = setInterval(load, 20)\n}\n\nfunction stopLoading() {\n  remaining.value = percentage.value\n  isRequesting.value = false\n}\n\nfunction abortLoading() {\n  clearInterval(interval.value)\n  interval.value = undefined\n  percentage.value = 100\n  isRequesting.value = false\n}\n\nevents.requestStatus.on((status) => {\n  if (status === 'start') {\n    return startLoading()\n  }\n  if (status === 'stop') {\n    return stopLoading()\n  }\n  if (status === 'abort') {\n    return abortLoading()\n  }\n\n  status satisfies undefined\n})\n\n/** Focus the address bar (or the send button if in modal layout) */\nevents.focusAddressBar.on(() => {\n  if (layout === 'modal') {\n    sendButtonRef.value?.$el?.focus()\n  } else {\n    addressBarRef.value?.focus()\n  }\n})\n\nfunction updateRequestMethod(method: RequestMethod) {\n  requestMutators.edit(operation.uid, 'method', method)\n}\n\nfunction getBackgroundColor() {\n  const { method } = operation\n  return REQUEST_METHODS[method].colorVar\n}\n\nfunction handleExecuteRequest() {\n  if (isRequesting.value) {\n    return\n  }\n  isRequesting.value = true\n  events.executeRequest.emit({ requestUid: operation.uid })\n}\n\n/** Handle hotkeys */\nevents.hotKeys.on((event) => {\n  if (event?.focusAddressBar) {\n    addressBarRef.value?.focus()\n  }\n  if (event?.executeRequest) {\n    handleExecuteRequest()\n  }\n})\n\n/**\n * TODO: Should we handle query params here somehow?\n */\nfunction updateRequestPath(url: string) {\n  requestMutators.edit(operation.uid, 'path', url)\n}\n</script>\n<template>\n  <div\n    :id=\"id\"\n    class=\"scalar-address-bar order-last flex h-(--scalar-address-bar-height) w-full [--scalar-address-bar-height:32px] lg:order-none lg:w-auto\">\n    <!-- Address Bar -->\n    <div\n      class=\"address-bar-bg-states text-xxs group relative order-last flex w-full max-w-[calc(100dvw-24px)] flex-1 flex-row items-stretch rounded-lg p-0.75 lg:order-none lg:max-w-[580px] lg:min-w-[580px] xl:max-w-[720px] xl:min-w-[720px]\">\n      <div\n        class=\"pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border\">\n        <div\n          class=\"absolute top-0 left-0 z-[1002] h-full w-full\"\n          :style=\"{\n            backgroundColor: `color-mix(in srgb, transparent 90%, ${getBackgroundColor()})`,\n            transform: `translate3d(-${percentage}%,0,0)`,\n          }\" />\n      </div>\n      <div class=\"z-context-plus flex gap-1\">\n        <HttpMethod\n          :isEditable=\"layout !== 'modal'\"\n          isSquare\n          :method=\"operation.method\"\n          teleport\n          @change=\"updateRequestMethod\" />\n      </div>\n\n      <div\n        class=\"scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal\">\n        <!-- Servers -->\n        <ServerDropdown\n          v-if=\"collection.servers.length\"\n          :collection=\"collection\"\n          layout=\"client\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :target=\"id\" />\n\n        <div class=\"fade-left\" />\n        <!-- Path + URL + env vars -->\n        <CodeInput\n          ref=\"addressBarRef\"\n          aria-label=\"Path\"\n          class=\"min-w-fit outline-none\"\n          disableCloseBrackets\n          :disabled=\"layout === 'modal'\"\n          disableEnter\n          disableTabIndent\n          :emitOnBlur=\"false\"\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          importCurl\n          :modelValue=\"operation.path\"\n          :placeholder=\"\n            server?.uid && collection.servers.includes(server.uid)\n              ? ''\n              : 'Enter a URL or cURL command'\n          \"\n          server\n          :workspace=\"workspace\"\n          @curl=\"$emit('importCurl', $event)\"\n          @submit=\"handleExecuteRequest\"\n          @update:modelValue=\"updateRequestPath\" />\n        <div class=\"fade-right\" />\n      </div>\n\n      <AddressBarHistory\n        :operation=\"operation\"\n        :target=\"id\" />\n      <ScalarButton\n        ref=\"sendButtonRef\"\n        class=\"z-context-plus relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold\"\n        :disabled=\"isRequesting\"\n        @click=\"handleExecuteRequest\">\n        <span\n          aria-hidden=\"true\"\n          class=\"inline-flex items-center gap-1\">\n          <ScalarIconPlay\n            class=\"relative shrink-0\"\n            size=\"xs\"\n            weight=\"fill\" />\n          <span class=\"text-xxs hidden lg:flex\">Send</span>\n        </span>\n        <span class=\"sr-only\">\n          Send {{ operation.method }} request to {{ server?.url ?? ''\n          }}{{ operation.path }}\n        </span>\n      </ScalarButton>\n    </div>\n  </div>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  width: 100%;\n}\n:deep(.cm-line) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  padding: 0;\n  display: flex;\n  align-items: center;\n  font-size: var(--scalar-small);\n}\n.scroll-timeline-x {\n  scroll-timeline: --scroll-timeline x;\n  /* Firefox supports */\n  scroll-timeline: --scroll-timeline horizontal;\n  -ms-overflow-style: none; /* IE and Edge */\n}\n.scroll-timeline-x-hidden {\n  overflow-x: auto;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller) {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  padding-right: 20px;\n  overflow: auto;\n}\n.scroll-timeline-x-hidden::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller::-webkit-scrollbar) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-address {\n  line-height: 27px;\n  scrollbar-width: none; /* Firefox */\n}\n/* make clickable are to left of send button */\n.scroll-timeline-x-address:after {\n  content: '';\n  position: absolute;\n  height: 100%;\n  width: 24px;\n  right: 0;\n  cursor: text;\n}\n.scroll-timeline-x-address:empty:before {\n  content: 'Enter URL or cURL request';\n  color: var(--scalar-color-3);\n  pointer-events: none;\n}\n.fade-left,\n.fade-right {\n  content: '';\n  position: sticky;\n  height: 100%;\n  animation-name: fadein;\n  animation-duration: 1ms;\n  animation-direction: reverse;\n  animation-timeline: --scroll-timeline;\n  pointer-events: none;\n  z-index: 1;\n}\n.fade-left {\n  background: linear-gradient(\n    -90deg,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 20%) 30%,\n    var(--scalar-address-bar-bg) 100%\n  );\n  left: -1px;\n  min-width: 6px;\n  animation-direction: normal;\n}\n.fade-right {\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 20%) 30%,\n    var(--scalar-address-bar-bg) 100%\n  );\n  right: -1px;\n  min-width: 24px;\n}\n@keyframes fadein {\n  0% {\n    opacity: 0;\n  }\n  1% {\n    opacity: 1;\n  }\n}\n.address-bar-bg-states {\n  --scalar-address-bar-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: var(--scalar-address-bar-bg);\n}\n.address-bar-bg-states:has(.cm-focused) {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n  border-color: var(--scalar-border-color);\n  outline: 1px solid var(--scalar-color-accent);\n}\n.address-bar-bg-states:has(.cm-focused) .fade-left,\n.address-bar-bg-states:has(.cm-focused) .fade-right {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { REQUEST_METHODS } from '@scalar/helpers/http/http-info'\nimport { ScalarIconPlay } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type {\n  Collection,\n  Operation,\n  RequestMethod,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { ref, useId, watch } from 'vue'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport { ServerDropdown } from '@/components/Server'\nimport { useLayout } from '@/hooks'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport HttpMethod from '../HttpMethod/HttpMethod.vue'\nimport AddressBarHistory from './AddressBarHistory.vue'\n\nconst { collection, operation, server, environment, envVariables, workspace } =\n  defineProps<{\n    collection: Collection\n    operation: Operation\n    server: Server | undefined\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n  }>()\n\ndefineEmits<{\n  (e: 'importCurl', value: string): void\n}>()\n\nconst id = useId()\n\nconst { requestMutators, events } = useWorkspace()\n\nconst { layout } = useLayout()\n\nconst addressBarRef = ref<typeof CodeInput | null>(null)\nconst sendButtonRef = ref<typeof ScalarButton | null>(null)\n\n/** update the instance path parameters on change */\nconst onUrlChange = (newPath: string) => {\n  if (operation.path === newPath) {\n    return\n  }\n  requestMutators.edit(operation.uid, 'path', newPath)\n}\n\n/** watch for changes in the URL */\nwatch(\n  () => operation.path,\n  (newURL) => {\n    if (!newURL) {\n      return\n    }\n    onUrlChange(newURL)\n  },\n)\n\n/** The amount remaining to load from 100 -> 0 */\nconst percentage = ref(100)\n/** Keeps track of how much was left when the request finished */\nconst remaining = ref(0)\n/** Whether or not there is a request loading */\nconst isRequesting = ref(false)\n/** The loading interval */\nconst interval = ref<ReturnType<typeof setInterval>>()\n\nfunction load() {\n  if (isRequesting.value) {\n    // Reduce asymptotically up to 85% loaded\n    percentage.value -= (percentage.value - 15) / 60\n  } else {\n    // Always finish loading linearly over 400ms\n    percentage.value -= remaining.value / 20\n  }\n  if (percentage.value <= 0) {\n    clearInterval(interval.value)\n    interval.value = undefined\n    percentage.value = 100\n    isRequesting.value = false\n  }\n}\n\nfunction startLoading() {\n  if (interval.value) {\n    return\n  }\n  isRequesting.value = true\n  interval.value = setInterval(load, 20)\n}\n\nfunction stopLoading() {\n  remaining.value = percentage.value\n  isRequesting.value = false\n}\n\nfunction abortLoading() {\n  clearInterval(interval.value)\n  interval.value = undefined\n  percentage.value = 100\n  isRequesting.value = false\n}\n\nevents.requestStatus.on((status) => {\n  if (status === 'start') {\n    return startLoading()\n  }\n  if (status === 'stop') {\n    return stopLoading()\n  }\n  if (status === 'abort') {\n    return abortLoading()\n  }\n\n  status satisfies undefined\n})\n\n/** Focus the address bar (or the send button if in modal layout) */\nevents.focusAddressBar.on(() => {\n  if (layout === 'modal') {\n    sendButtonRef.value?.$el?.focus()\n  } else {\n    addressBarRef.value?.focus()\n  }\n})\n\nfunction updateRequestMethod(method: RequestMethod) {\n  requestMutators.edit(operation.uid, 'method', method)\n}\n\nfunction getBackgroundColor() {\n  const { method } = operation\n  return REQUEST_METHODS[method].colorVar\n}\n\nfunction handleExecuteRequest() {\n  if (isRequesting.value) {\n    return\n  }\n  isRequesting.value = true\n  events.executeRequest.emit({ requestUid: operation.uid })\n}\n\n/** Handle hotkeys */\nevents.hotKeys.on((event) => {\n  if (event?.focusAddressBar) {\n    addressBarRef.value?.focus()\n  }\n  if (event?.executeRequest) {\n    handleExecuteRequest()\n  }\n})\n\n/**\n * TODO: Should we handle query params here somehow?\n */\nfunction updateRequestPath(url: string) {\n  requestMutators.edit(operation.uid, 'path', url)\n}\n</script>\n<template>\n  <div\n    :id=\"id\"\n    class=\"scalar-address-bar order-last flex h-(--scalar-address-bar-height) w-full [--scalar-address-bar-height:32px] lg:order-none lg:w-auto\">\n    <!-- Address Bar -->\n    <div\n      class=\"address-bar-bg-states text-xxs group relative order-last flex w-full max-w-[calc(100dvw-24px)] flex-1 flex-row items-stretch rounded-lg p-0.75 lg:order-none lg:max-w-[580px] lg:min-w-[580px] xl:max-w-[720px] xl:min-w-[720px]\">\n      <div\n        class=\"pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border\">\n        <div\n          class=\"absolute top-0 left-0 z-[1002] h-full w-full\"\n          :style=\"{\n            backgroundColor: `color-mix(in srgb, transparent 90%, ${getBackgroundColor()})`,\n            transform: `translate3d(-${percentage}%,0,0)`,\n          }\" />\n      </div>\n      <div class=\"z-context-plus flex gap-1\">\n        <HttpMethod\n          :isEditable=\"layout !== 'modal'\"\n          isSquare\n          :method=\"operation.method\"\n          teleport\n          @change=\"updateRequestMethod\" />\n      </div>\n\n      <div\n        class=\"scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal\">\n        <!-- Servers -->\n        <ServerDropdown\n          v-if=\"collection.servers.length\"\n          :collection=\"collection\"\n          layout=\"client\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :target=\"id\" />\n\n        <div class=\"fade-left\" />\n        <!-- Path + URL + env vars -->\n        <CodeInput\n          ref=\"addressBarRef\"\n          aria-label=\"Path\"\n          class=\"min-w-fit outline-none\"\n          disableCloseBrackets\n          :disabled=\"layout === 'modal'\"\n          disableEnter\n          disableTabIndent\n          :emitOnBlur=\"false\"\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          importCurl\n          :modelValue=\"operation.path\"\n          :placeholder=\"\n            server?.uid && collection.servers.includes(server.uid)\n              ? ''\n              : 'Enter a URL or cURL command'\n          \"\n          server\n          :workspace=\"workspace\"\n          @curl=\"$emit('importCurl', $event)\"\n          @submit=\"handleExecuteRequest\"\n          @update:modelValue=\"updateRequestPath\" />\n        <div class=\"fade-right\" />\n      </div>\n\n      <AddressBarHistory\n        :operation=\"operation\"\n        :target=\"id\" />\n      <ScalarButton\n        ref=\"sendButtonRef\"\n        class=\"z-context-plus relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold\"\n        :disabled=\"isRequesting\"\n        @click=\"handleExecuteRequest\">\n        <span\n          aria-hidden=\"true\"\n          class=\"inline-flex items-center gap-1\">\n          <ScalarIconPlay\n            class=\"relative shrink-0\"\n            size=\"xs\"\n            weight=\"fill\" />\n          <span class=\"text-xxs hidden lg:flex\">Send</span>\n        </span>\n        <span class=\"sr-only\">\n          Send {{ operation.method }} request to {{ server?.url ?? ''\n          }}{{ operation.path }}\n        </span>\n      </ScalarButton>\n    </div>\n  </div>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  width: 100%;\n}\n:deep(.cm-line) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  padding: 0;\n  display: flex;\n  align-items: center;\n  font-size: var(--scalar-small);\n}\n.scroll-timeline-x {\n  scroll-timeline: --scroll-timeline x;\n  /* Firefox supports */\n  scroll-timeline: --scroll-timeline horizontal;\n  -ms-overflow-style: none; /* IE and Edge */\n}\n.scroll-timeline-x-hidden {\n  overflow-x: auto;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller) {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  padding-right: 20px;\n  overflow: auto;\n}\n.scroll-timeline-x-hidden::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller::-webkit-scrollbar) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-address {\n  line-height: 27px;\n  scrollbar-width: none; /* Firefox */\n}\n/* make clickable are to left of send button */\n.scroll-timeline-x-address:after {\n  content: '';\n  position: absolute;\n  height: 100%;\n  width: 24px;\n  right: 0;\n  cursor: text;\n}\n.scroll-timeline-x-address:empty:before {\n  content: 'Enter URL or cURL request';\n  color: var(--scalar-color-3);\n  pointer-events: none;\n}\n.fade-left,\n.fade-right {\n  content: '';\n  position: sticky;\n  height: 100%;\n  animation-name: fadein;\n  animation-duration: 1ms;\n  animation-direction: reverse;\n  animation-timeline: --scroll-timeline;\n  pointer-events: none;\n  z-index: 1;\n}\n.fade-left {\n  background: linear-gradient(\n    -90deg,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 20%) 30%,\n    var(--scalar-address-bar-bg) 100%\n  );\n  left: -1px;\n  min-width: 6px;\n  animation-direction: normal;\n}\n.fade-right {\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 20%) 30%,\n    var(--scalar-address-bar-bg) 100%\n  );\n  right: -1px;\n  min-width: 24px;\n}\n@keyframes fadein {\n  0% {\n    opacity: 0;\n  }\n  1% {\n    opacity: 1;\n  }\n}\n.address-bar-bg-states {\n  --scalar-address-bar-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: var(--scalar-address-bar-bg);\n}\n.address-bar-bg-states:has(.cm-focused) {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n  border-color: var(--scalar-border-color);\n  outline: 1px solid var(--scalar-color-accent);\n}\n.address-bar-bg-states:has(.cm-focused) .fade-left,\n.address-bar-bg-states:has(.cm-focused) .fade-right {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"AddressBar-BOZGKSoz.js","names":["$emit"],"sources":["../src/components/AddressBar/httpStatusCodeColors.ts","../src/components/AddressBar/AddressBarHistory.vue","../src/components/AddressBar/AddressBarHistory.vue","../src/components/AddressBar/AddressBar.vue","../src/components/AddressBar/AddressBar.vue"],"sourcesContent":["const STATUS_CODES_COLORS = {\n  100: {\n    color: 'text-yellow',\n  },\n  200: {\n    color: 'text-green',\n  },\n  202: {\n    color: 'text-green',\n  },\n  300: {\n    color: 'text-blue',\n  },\n  304: {\n    color: 'text-blue',\n  },\n  400: {\n    color: 'text-red',\n  },\n  401: {\n    color: 'text-orange',\n  },\n  422: {\n    color: 'text-yellow',\n  },\n  423: {\n    color: 'text-purple',\n  },\n  505: {\n    color: 'text-orange',\n  },\n} as const\n\ntype StatusCode = keyof typeof STATUS_CODES_COLORS\n\nexport const getStatusCodeColor = (statusCode: number) => {\n  const code = statusCode as StatusCode\n  return (\n    STATUS_CODES_COLORS[code] || {\n      /** default color */\n      color: 'text-grey',\n    }\n  )\n}\n","<script setup lang=\"ts\">\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  ScalarIcon,\n} from '@scalar/components'\nimport type { Operation, RequestEvent } from '@scalar/oas-utils/entities/spec'\nimport { httpStatusCodes } from '@scalar/oas-utils/helpers'\nimport { computed } from 'vue'\n\nimport { formatMs } from '@/libs/formatters'\nimport { useWorkspace } from '@/store'\n\nimport HttpMethod from '../HttpMethod/HttpMethod.vue'\nimport { getStatusCodeColor } from './httpStatusCodeColors'\n\nconst { operation, target } = defineProps<{\n  operation: Operation\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst { requestHistory } = useWorkspace()\n\n/** Use a local copy to prevent mutation of the reactive object */\nconst history = computed(() =>\n  requestHistory\n    .filter((entry) => entry.request.requestUid === operation.uid)\n    .slice()\n    .reverse(),\n)\n\nfunction handleHistoryClick(requestHistoryItem: RequestEvent) {\n  console.warn(\n    \"Restoring from the request history doesn't work yet. Request History Item:\",\n    requestHistoryItem,\n  )\n  // TODO: Restore the request data with the history item\n  // TODO: Restore the response data with the history item\n}\n</script>\n<template>\n  <Menu\n    v-slot=\"{ open }\"\n    as=\"div\">\n    <ScalarFloating\n      :offset=\"0\"\n      resize\n      :target=\"target\">\n      <!-- History -->\n      <MenuButton\n        v-if=\"history?.length\"\n        class=\"address-bar-history-button z-context-plus text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5\">\n        <ScalarIcon\n          icon=\"History\"\n          size=\"sm\"\n          thickness=\"2.25\" />\n        <span class=\"sr-only\">Request History</span>\n      </MenuButton>\n      <!-- History shadow and placement-->\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <!-- History Item -->\n        <MenuItems\n          class=\"custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center border-t p-0.75\"\n          static\n          :style=\"{ width }\">\n          <MenuItem\n            v-for=\"(entry, index) in history\"\n            :key=\"entry.timestamp\"\n            as=\"button\"\n            class=\"font-code ui-active:*:bg-b-2 text-c-2 contents text-sm font-medium *:flex *:h-8 *:cursor-pointer *:items-center *:rounded-none *:px-1.5 *:first:rounded-l *:last:rounded-r\"\n            :value=\"index\"\n            @click=\"handleHistoryClick(entry)\">\n            <HttpMethod\n              v-if=\"entry.response.method\"\n              class=\"text-[11px]\"\n              :method=\"entry.response.method\" />\n            <div class=\"min-w-0\">\n              <div class=\"text-c-1 min-w-0 truncate\">\n                {{ entry.response.path }}\n              </div>\n            </div>\n            <div>{{ formatMs(entry.response.duration) }}</div>\n            <div :class=\"[getStatusCodeColor(entry.response.status).color]\">\n              {{ entry.response.status }}\n            </div>\n            <div>\n              {{ httpStatusCodes[entry.response.status]?.name }}\n            </div>\n          </MenuItem>\n        </MenuItems>\n        <ScalarFloatingBackdrop\n          class=\"-top-(--scalar-address-bar-height) rounded-lg\" />\n      </template>\n    </ScalarFloating>\n  </Menu>\n</template>\n<style scoped>\n.address-bar-history-button:hover {\n  background: var(--scalar-background-3);\n}\n.address-bar-history-button:focus-within {\n  background: var(--scalar-background-2);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n  ScalarIcon,\n} from '@scalar/components'\nimport type { Operation, RequestEvent } from '@scalar/oas-utils/entities/spec'\nimport { httpStatusCodes } from '@scalar/oas-utils/helpers'\nimport { computed } from 'vue'\n\nimport { formatMs } from '@/libs/formatters'\nimport { useWorkspace } from '@/store'\n\nimport HttpMethod from '../HttpMethod/HttpMethod.vue'\nimport { getStatusCodeColor } from './httpStatusCodeColors'\n\nconst { operation, target } = defineProps<{\n  operation: Operation\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst { requestHistory } = useWorkspace()\n\n/** Use a local copy to prevent mutation of the reactive object */\nconst history = computed(() =>\n  requestHistory\n    .filter((entry) => entry.request.requestUid === operation.uid)\n    .slice()\n    .reverse(),\n)\n\nfunction handleHistoryClick(requestHistoryItem: RequestEvent) {\n  console.warn(\n    \"Restoring from the request history doesn't work yet. Request History Item:\",\n    requestHistoryItem,\n  )\n  // TODO: Restore the request data with the history item\n  // TODO: Restore the response data with the history item\n}\n</script>\n<template>\n  <Menu\n    v-slot=\"{ open }\"\n    as=\"div\">\n    <ScalarFloating\n      :offset=\"0\"\n      resize\n      :target=\"target\">\n      <!-- History -->\n      <MenuButton\n        v-if=\"history?.length\"\n        class=\"address-bar-history-button z-context-plus text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5\">\n        <ScalarIcon\n          icon=\"History\"\n          size=\"sm\"\n          thickness=\"2.25\" />\n        <span class=\"sr-only\">Request History</span>\n      </MenuButton>\n      <!-- History shadow and placement-->\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <!-- History Item -->\n        <MenuItems\n          class=\"custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center border-t p-0.75\"\n          static\n          :style=\"{ width }\">\n          <MenuItem\n            v-for=\"(entry, index) in history\"\n            :key=\"entry.timestamp\"\n            as=\"button\"\n            class=\"font-code ui-active:*:bg-b-2 text-c-2 contents text-sm font-medium *:flex *:h-8 *:cursor-pointer *:items-center *:rounded-none *:px-1.5 *:first:rounded-l *:last:rounded-r\"\n            :value=\"index\"\n            @click=\"handleHistoryClick(entry)\">\n            <HttpMethod\n              v-if=\"entry.response.method\"\n              class=\"text-[11px]\"\n              :method=\"entry.response.method\" />\n            <div class=\"min-w-0\">\n              <div class=\"text-c-1 min-w-0 truncate\">\n                {{ entry.response.path }}\n              </div>\n            </div>\n            <div>{{ formatMs(entry.response.duration) }}</div>\n            <div :class=\"[getStatusCodeColor(entry.response.status).color]\">\n              {{ entry.response.status }}\n            </div>\n            <div>\n              {{ httpStatusCodes[entry.response.status]?.name }}\n            </div>\n          </MenuItem>\n        </MenuItems>\n        <ScalarFloatingBackdrop\n          class=\"-top-(--scalar-address-bar-height) rounded-lg\" />\n      </template>\n    </ScalarFloating>\n  </Menu>\n</template>\n<style scoped>\n.address-bar-history-button:hover {\n  background: var(--scalar-background-3);\n}\n.address-bar-history-button:focus-within {\n  background: var(--scalar-background-2);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { REQUEST_METHODS } from '@scalar/helpers/http/http-info'\nimport { ScalarIconPlay } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type {\n  Collection,\n  Operation,\n  RequestMethod,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { ref, useId, watch } from 'vue'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport { ServerDropdown } from '@/components/Server'\nimport { useLayout } from '@/hooks'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport HttpMethod from '../HttpMethod/HttpMethod.vue'\nimport AddressBarHistory from './AddressBarHistory.vue'\n\nconst { collection, operation, server, environment, envVariables, workspace } =\n  defineProps<{\n    collection: Collection\n    operation: Operation\n    server: Server | undefined\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n  }>()\n\ndefineEmits<{\n  (e: 'importCurl', value: string): void\n}>()\n\nconst id = useId()\n\nconst { requestMutators, events } = useWorkspace()\n\nconst { layout } = useLayout()\n\nconst addressBarRef = ref<typeof CodeInput | null>(null)\nconst sendButtonRef = ref<typeof ScalarButton | null>(null)\n\n/** update the instance path parameters on change */\nconst onUrlChange = (newPath: string) => {\n  if (operation.path === newPath) {\n    return\n  }\n  requestMutators.edit(operation.uid, 'path', newPath)\n}\n\n/** watch for changes in the URL */\nwatch(\n  () => operation.path,\n  (newURL) => {\n    if (!newURL) {\n      return\n    }\n    onUrlChange(newURL)\n  },\n)\n\n/** The amount remaining to load from 100 -> 0 */\nconst percentage = ref(100)\n/** Keeps track of how much was left when the request finished */\nconst remaining = ref(0)\n/** Whether or not there is a request loading */\nconst isRequesting = ref(false)\n/** The loading interval */\nconst interval = ref<ReturnType<typeof setInterval>>()\n\nfunction load() {\n  if (isRequesting.value) {\n    // Reduce asymptotically up to 85% loaded\n    percentage.value -= (percentage.value - 15) / 60\n  } else {\n    // Always finish loading linearly over 400ms\n    percentage.value -= remaining.value / 20\n  }\n  if (percentage.value <= 0) {\n    clearInterval(interval.value)\n    interval.value = undefined\n    percentage.value = 100\n    isRequesting.value = false\n  }\n}\n\nfunction startLoading() {\n  if (interval.value) {\n    return\n  }\n  isRequesting.value = true\n  interval.value = setInterval(load, 20)\n}\n\nfunction stopLoading() {\n  remaining.value = percentage.value\n  isRequesting.value = false\n}\n\nfunction abortLoading() {\n  clearInterval(interval.value)\n  interval.value = undefined\n  percentage.value = 100\n  isRequesting.value = false\n}\n\nevents.requestStatus.on((status) => {\n  if (status === 'start') {\n    return startLoading()\n  }\n  if (status === 'stop') {\n    return stopLoading()\n  }\n  if (status === 'abort') {\n    return abortLoading()\n  }\n\n  status satisfies undefined\n})\n\n/** Focus the address bar (or the send button if in modal layout) */\nevents.focusAddressBar.on(() => {\n  if (layout === 'modal') {\n    sendButtonRef.value?.$el?.focus()\n  } else {\n    addressBarRef.value?.focus()\n  }\n})\n\nfunction updateRequestMethod(method: RequestMethod) {\n  requestMutators.edit(operation.uid, 'method', method)\n}\n\nfunction getBackgroundColor() {\n  const { method } = operation\n  return REQUEST_METHODS[method].colorVar\n}\n\nfunction handleExecuteRequest() {\n  if (isRequesting.value) {\n    return\n  }\n  isRequesting.value = true\n  events.executeRequest.emit({ requestUid: operation.uid })\n}\n\n/** Handle hotkeys */\nevents.hotKeys.on((event) => {\n  if (event?.focusAddressBar) {\n    addressBarRef.value?.focus()\n  }\n  if (event?.executeRequest) {\n    handleExecuteRequest()\n  }\n})\n\n/**\n * TODO: Should we handle query params here somehow?\n */\nfunction updateRequestPath(url: string) {\n  requestMutators.edit(operation.uid, 'path', url)\n}\n</script>\n<template>\n  <div\n    :id=\"id\"\n    class=\"scalar-address-bar order-last flex h-(--scalar-address-bar-height) w-full [--scalar-address-bar-height:32px] lg:order-none lg:w-auto\">\n    <!-- Address Bar -->\n    <div\n      class=\"address-bar-bg-states text-xxs group relative order-last flex w-full max-w-[calc(100dvw-24px)] flex-1 flex-row items-stretch rounded-lg p-0.75 lg:order-none lg:max-w-[580px] lg:min-w-[580px] xl:max-w-[720px] xl:min-w-[720px]\">\n      <div\n        class=\"pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border\">\n        <div\n          class=\"absolute top-0 left-0 z-[1002] h-full w-full\"\n          :style=\"{\n            backgroundColor: `color-mix(in srgb, transparent 90%, ${getBackgroundColor()})`,\n            transform: `translate3d(-${percentage}%,0,0)`,\n          }\" />\n      </div>\n      <div class=\"z-context-plus flex gap-1\">\n        <HttpMethod\n          :isEditable=\"layout !== 'modal'\"\n          isSquare\n          :method=\"operation.method\"\n          teleport\n          @change=\"updateRequestMethod\" />\n      </div>\n\n      <div\n        class=\"scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal\">\n        <!-- Servers -->\n        <ServerDropdown\n          v-if=\"collection.servers.length\"\n          :collection=\"collection\"\n          layout=\"client\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :target=\"id\" />\n\n        <div class=\"fade-left\" />\n        <!-- Path + URL + env vars -->\n        <CodeInput\n          ref=\"addressBarRef\"\n          aria-label=\"Path\"\n          class=\"min-w-fit outline-none\"\n          disableCloseBrackets\n          :disabled=\"layout === 'modal'\"\n          disableEnter\n          disableTabIndent\n          :emitOnBlur=\"false\"\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          importCurl\n          :modelValue=\"operation.path\"\n          :placeholder=\"\n            server?.uid && collection.servers.includes(server.uid)\n              ? ''\n              : 'Enter a URL or cURL command'\n          \"\n          server\n          :workspace=\"workspace\"\n          @curl=\"$emit('importCurl', $event)\"\n          @submit=\"handleExecuteRequest\"\n          @update:modelValue=\"updateRequestPath\" />\n        <div class=\"fade-right\" />\n      </div>\n\n      <AddressBarHistory\n        :operation=\"operation\"\n        :target=\"id\" />\n      <ScalarButton\n        ref=\"sendButtonRef\"\n        class=\"z-context-plus relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold\"\n        :disabled=\"isRequesting\"\n        @click=\"handleExecuteRequest\">\n        <span\n          aria-hidden=\"true\"\n          class=\"inline-flex items-center gap-1\">\n          <ScalarIconPlay\n            class=\"relative shrink-0\"\n            size=\"xs\"\n            weight=\"fill\" />\n          <span class=\"text-xxs hidden lg:flex\">Send</span>\n        </span>\n        <span class=\"sr-only\">\n          Send {{ operation.method }} request to {{ server?.url ?? ''\n          }}{{ operation.path }}\n        </span>\n      </ScalarButton>\n    </div>\n  </div>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  width: 100%;\n}\n:deep(.cm-line) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  padding: 0;\n  display: flex;\n  align-items: center;\n  font-size: var(--scalar-small);\n}\n.scroll-timeline-x {\n  scroll-timeline: --scroll-timeline x;\n  /* Firefox supports */\n  scroll-timeline: --scroll-timeline horizontal;\n  -ms-overflow-style: none; /* IE and Edge */\n}\n.scroll-timeline-x-hidden {\n  overflow-x: auto;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller) {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  padding-right: 20px;\n  overflow: auto;\n}\n.scroll-timeline-x-hidden::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller::-webkit-scrollbar) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-address {\n  line-height: 27px;\n  scrollbar-width: none; /* Firefox */\n}\n/* make clickable are to left of send button */\n.scroll-timeline-x-address:after {\n  content: '';\n  position: absolute;\n  height: 100%;\n  width: 24px;\n  right: 0;\n  cursor: text;\n}\n.scroll-timeline-x-address:empty:before {\n  content: 'Enter URL or cURL request';\n  color: var(--scalar-color-3);\n  pointer-events: none;\n}\n.fade-left,\n.fade-right {\n  content: '';\n  position: sticky;\n  height: 100%;\n  animation-name: fadein;\n  animation-duration: 1ms;\n  animation-direction: reverse;\n  animation-timeline: --scroll-timeline;\n  pointer-events: none;\n  z-index: 1;\n}\n.fade-left {\n  background: linear-gradient(\n    -90deg,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 20%) 30%,\n    var(--scalar-address-bar-bg) 100%\n  );\n  left: -1px;\n  min-width: 6px;\n  animation-direction: normal;\n}\n.fade-right {\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 20%) 30%,\n    var(--scalar-address-bar-bg) 100%\n  );\n  right: -1px;\n  min-width: 24px;\n}\n@keyframes fadein {\n  0% {\n    opacity: 0;\n  }\n  1% {\n    opacity: 1;\n  }\n}\n.address-bar-bg-states {\n  --scalar-address-bar-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: var(--scalar-address-bar-bg);\n}\n.address-bar-bg-states:has(.cm-focused) {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n  border-color: var(--scalar-border-color);\n  outline: 1px solid var(--scalar-color-accent);\n}\n.address-bar-bg-states:has(.cm-focused) .fade-left,\n.address-bar-bg-states:has(.cm-focused) .fade-right {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { REQUEST_METHODS } from '@scalar/helpers/http/http-info'\nimport { ScalarIconPlay } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type {\n  Collection,\n  Operation,\n  RequestMethod,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { ref, useId, watch } from 'vue'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport { ServerDropdown } from '@/components/Server'\nimport { useLayout } from '@/hooks'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport HttpMethod from '../HttpMethod/HttpMethod.vue'\nimport AddressBarHistory from './AddressBarHistory.vue'\n\nconst { collection, operation, server, environment, envVariables, workspace } =\n  defineProps<{\n    collection: Collection\n    operation: Operation\n    server: Server | undefined\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n  }>()\n\ndefineEmits<{\n  (e: 'importCurl', value: string): void\n}>()\n\nconst id = useId()\n\nconst { requestMutators, events } = useWorkspace()\n\nconst { layout } = useLayout()\n\nconst addressBarRef = ref<typeof CodeInput | null>(null)\nconst sendButtonRef = ref<typeof ScalarButton | null>(null)\n\n/** update the instance path parameters on change */\nconst onUrlChange = (newPath: string) => {\n  if (operation.path === newPath) {\n    return\n  }\n  requestMutators.edit(operation.uid, 'path', newPath)\n}\n\n/** watch for changes in the URL */\nwatch(\n  () => operation.path,\n  (newURL) => {\n    if (!newURL) {\n      return\n    }\n    onUrlChange(newURL)\n  },\n)\n\n/** The amount remaining to load from 100 -> 0 */\nconst percentage = ref(100)\n/** Keeps track of how much was left when the request finished */\nconst remaining = ref(0)\n/** Whether or not there is a request loading */\nconst isRequesting = ref(false)\n/** The loading interval */\nconst interval = ref<ReturnType<typeof setInterval>>()\n\nfunction load() {\n  if (isRequesting.value) {\n    // Reduce asymptotically up to 85% loaded\n    percentage.value -= (percentage.value - 15) / 60\n  } else {\n    // Always finish loading linearly over 400ms\n    percentage.value -= remaining.value / 20\n  }\n  if (percentage.value <= 0) {\n    clearInterval(interval.value)\n    interval.value = undefined\n    percentage.value = 100\n    isRequesting.value = false\n  }\n}\n\nfunction startLoading() {\n  if (interval.value) {\n    return\n  }\n  isRequesting.value = true\n  interval.value = setInterval(load, 20)\n}\n\nfunction stopLoading() {\n  remaining.value = percentage.value\n  isRequesting.value = false\n}\n\nfunction abortLoading() {\n  clearInterval(interval.value)\n  interval.value = undefined\n  percentage.value = 100\n  isRequesting.value = false\n}\n\nevents.requestStatus.on((status) => {\n  if (status === 'start') {\n    return startLoading()\n  }\n  if (status === 'stop') {\n    return stopLoading()\n  }\n  if (status === 'abort') {\n    return abortLoading()\n  }\n\n  status satisfies undefined\n})\n\n/** Focus the address bar (or the send button if in modal layout) */\nevents.focusAddressBar.on(() => {\n  if (layout === 'modal') {\n    sendButtonRef.value?.$el?.focus()\n  } else {\n    addressBarRef.value?.focus()\n  }\n})\n\nfunction updateRequestMethod(method: RequestMethod) {\n  requestMutators.edit(operation.uid, 'method', method)\n}\n\nfunction getBackgroundColor() {\n  const { method } = operation\n  return REQUEST_METHODS[method].colorVar\n}\n\nfunction handleExecuteRequest() {\n  if (isRequesting.value) {\n    return\n  }\n  isRequesting.value = true\n  events.executeRequest.emit({ requestUid: operation.uid })\n}\n\n/** Handle hotkeys */\nevents.hotKeys.on((event) => {\n  if (event?.focusAddressBar) {\n    addressBarRef.value?.focus()\n  }\n  if (event?.executeRequest) {\n    handleExecuteRequest()\n  }\n})\n\n/**\n * TODO: Should we handle query params here somehow?\n */\nfunction updateRequestPath(url: string) {\n  requestMutators.edit(operation.uid, 'path', url)\n}\n</script>\n<template>\n  <div\n    :id=\"id\"\n    class=\"scalar-address-bar order-last flex h-(--scalar-address-bar-height) w-full [--scalar-address-bar-height:32px] lg:order-none lg:w-auto\">\n    <!-- Address Bar -->\n    <div\n      class=\"address-bar-bg-states text-xxs group relative order-last flex w-full max-w-[calc(100dvw-24px)] flex-1 flex-row items-stretch rounded-lg p-0.75 lg:order-none lg:max-w-[580px] lg:min-w-[580px] xl:max-w-[720px] xl:min-w-[720px]\">\n      <div\n        class=\"pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border\">\n        <div\n          class=\"absolute top-0 left-0 z-[1002] h-full w-full\"\n          :style=\"{\n            backgroundColor: `color-mix(in srgb, transparent 90%, ${getBackgroundColor()})`,\n            transform: `translate3d(-${percentage}%,0,0)`,\n          }\" />\n      </div>\n      <div class=\"z-context-plus flex gap-1\">\n        <HttpMethod\n          :isEditable=\"layout !== 'modal'\"\n          isSquare\n          :method=\"operation.method\"\n          teleport\n          @change=\"updateRequestMethod\" />\n      </div>\n\n      <div\n        class=\"scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal\">\n        <!-- Servers -->\n        <ServerDropdown\n          v-if=\"collection.servers.length\"\n          :collection=\"collection\"\n          layout=\"client\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :target=\"id\" />\n\n        <div class=\"fade-left\" />\n        <!-- Path + URL + env vars -->\n        <CodeInput\n          ref=\"addressBarRef\"\n          aria-label=\"Path\"\n          class=\"min-w-fit outline-none\"\n          disableCloseBrackets\n          :disabled=\"layout === 'modal'\"\n          disableEnter\n          disableTabIndent\n          :emitOnBlur=\"false\"\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          importCurl\n          :modelValue=\"operation.path\"\n          :placeholder=\"\n            server?.uid && collection.servers.includes(server.uid)\n              ? ''\n              : 'Enter a URL or cURL command'\n          \"\n          server\n          :workspace=\"workspace\"\n          @curl=\"$emit('importCurl', $event)\"\n          @submit=\"handleExecuteRequest\"\n          @update:modelValue=\"updateRequestPath\" />\n        <div class=\"fade-right\" />\n      </div>\n\n      <AddressBarHistory\n        :operation=\"operation\"\n        :target=\"id\" />\n      <ScalarButton\n        ref=\"sendButtonRef\"\n        class=\"z-context-plus relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold\"\n        :disabled=\"isRequesting\"\n        @click=\"handleExecuteRequest\">\n        <span\n          aria-hidden=\"true\"\n          class=\"inline-flex items-center gap-1\">\n          <ScalarIconPlay\n            class=\"relative shrink-0\"\n            size=\"xs\"\n            weight=\"fill\" />\n          <span class=\"text-xxs hidden lg:flex\">Send</span>\n        </span>\n        <span class=\"sr-only\">\n          Send {{ operation.method }} request to {{ server?.url ?? ''\n          }}{{ operation.path }}\n        </span>\n      </ScalarButton>\n    </div>\n  </div>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  width: 100%;\n}\n:deep(.cm-line) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  padding: 0;\n  display: flex;\n  align-items: center;\n  font-size: var(--scalar-small);\n}\n.scroll-timeline-x {\n  scroll-timeline: --scroll-timeline x;\n  /* Firefox supports */\n  scroll-timeline: --scroll-timeline horizontal;\n  -ms-overflow-style: none; /* IE and Edge */\n}\n.scroll-timeline-x-hidden {\n  overflow-x: auto;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller) {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  padding-right: 20px;\n  overflow: auto;\n}\n.scroll-timeline-x-hidden::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller::-webkit-scrollbar) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-address {\n  line-height: 27px;\n  scrollbar-width: none; /* Firefox */\n}\n/* make clickable are to left of send button */\n.scroll-timeline-x-address:after {\n  content: '';\n  position: absolute;\n  height: 100%;\n  width: 24px;\n  right: 0;\n  cursor: text;\n}\n.scroll-timeline-x-address:empty:before {\n  content: 'Enter URL or cURL request';\n  color: var(--scalar-color-3);\n  pointer-events: none;\n}\n.fade-left,\n.fade-right {\n  content: '';\n  position: sticky;\n  height: 100%;\n  animation-name: fadein;\n  animation-duration: 1ms;\n  animation-direction: reverse;\n  animation-timeline: --scroll-timeline;\n  pointer-events: none;\n  z-index: 1;\n}\n.fade-left {\n  background: linear-gradient(\n    -90deg,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 20%) 30%,\n    var(--scalar-address-bar-bg) 100%\n  );\n  left: -1px;\n  min-width: 6px;\n  animation-direction: normal;\n}\n.fade-right {\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--scalar-address-bar-bg), transparent 20%) 30%,\n    var(--scalar-address-bar-bg) 100%\n  );\n  right: -1px;\n  min-width: 24px;\n}\n@keyframes fadein {\n  0% {\n    opacity: 0;\n  }\n  1% {\n    opacity: 1;\n  }\n}\n.address-bar-bg-states {\n  --scalar-address-bar-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: var(--scalar-address-bar-bg);\n}\n.address-bar-bg-states:has(.cm-focused) {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n  border-color: var(--scalar-border-color);\n  outline: 1px solid var(--scalar-color-accent);\n}\n.address-bar-bg-states:has(.cm-focused) .fade-left,\n.address-bar-bg-states:has(.cm-focused) .fade-right {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAM,sBAAsB;CAC1B,KAAK,EACH,OAAO,eACR;CACD,KAAK,EACH,OAAO,cACR;CACD,KAAK,EACH,OAAO,cACR;CACD,KAAK,EACH,OAAO,aACR;CACD,KAAK,EACH,OAAO,aACR;CACD,KAAK,EACH,OAAO,YACR;CACD,KAAK,EACH,OAAO,eACR;CACD,KAAK,EACH,OAAO,eACR;CACD,KAAK,EACH,OAAO,eACR;CACD,KAAK,EACH,OAAO,eACR;CACF;AAID,IAAa,sBAAsB,eAAuB;AAExD,QACE,oBAFW,eAEkB,EAE3B,OAAO,aACR;;;;;;;;;;;;;;;EElBL,MAAM,EAAE,mBAAmB,cAAa;;EAGxC,MAAM,UAAU,eACd,eACG,QAAQ,UAAU,MAAM,QAAQ,eAAe,QAAA,UAAU,IAAG,CAC5D,OAAM,CACN,SAAS,CACd;EAEA,SAAS,mBAAmB,oBAAkC;AAC5D,WAAQ,KACN,8EACA,mBACF;;;uBAMA,YAuDO,MAAA,KAAA,EAAA,EArDL,IAAG,OAAK,EAAA;sBAoDS,EArDP,WAAI,CAEd,YAmDiB,MAAA,eAAA,EAAA;KAlDd,QAAQ;KACT,QAAA;KACC,QAAQ,QAAA;;4BAUI,CAPL,QAAA,OAAS,UAAA,WAAA,EADjB,YAQa,MAAA,WAAA,EAAA;;MANX,OAAM;;6BAIe,CAHrB,YAGqB,MAAA,WAAA,EAAA;OAFnB,MAAK;OACL,MAAK;OACL,WAAU;oCACZ,mBAA4C,QAAA,EAAtC,OAAM,WAAS,EAAC,mBAAe,GAAA,EAAA,CAAA;;;;QAI/B,OAAA;WACL;kBA8BW,EA9BC,YAAK,CAElB,YA4BY,MAAA,UAAA,EAAA;MA3BV,OAAM;MACN,QAAA;MACC,OAAK,eAAA,EAAI,OAAK,CAAA;;6BAEoB,EAAA,UAAA,KAAA,EADnC,mBAuBW,UAAA,MAAA,WAtBgB,QAAA,QAAjB,OAAO,UAAK;2BADtB,YAuBW,MAAA,SAAA,EAAA;QArBR,KAAK,MAAM;QACZ,IAAG;QACH,OAAM;QACL,OAAO;QACP,UAAK,WAAE,mBAAmB,MAAK;;+BAII;SAF5B,MAAM,SAAS,UAAA,WAAA,EADvB,YAGoC,oBAAA;;UADlC,OAAM;UACL,QAAQ,MAAM,SAAS;;SAC1B,mBAIM,OAJN,cAIM,CAHJ,mBAEM,OAFN,cAEM,gBADD,MAAM,SAAS,KAAI,EAAA,EAAA,CAAA,CAAA;SAG1B,mBAAkD,OAAA,MAAA,gBAA1C,MAAA,SAAQ,CAAC,MAAM,SAAS,SAAQ,CAAA,EAAA,EAAA;SACxC,mBAEM,OAAA,EAFA,OAAK,eAAA,CAAG,MAAA,mBAAkB,CAAC,MAAM,SAAS,OAAM,CAAE,MAAK,CAAA,EAAA,EAAA,gBACxD,MAAM,SAAS,OAAM,EAAA,EAAA;SAE1B,mBAEM,OAAA,MAAA,gBADD,MAAA,gBAAe,CAAC,MAAM,SAAS,SAAS,KAAI,EAAA,EAAA;;;;;;uBAIrD,YAC0D,MAAA,uBAAA,EAAA,EAAxD,OAAM,iDAA+C,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EE1D/D,MAAM,KAAK,OAAM;EAEjB,MAAM,EAAE,iBAAiB,WAAW,cAAa;EAEjD,MAAM,EAAE,WAAW,WAAU;EAE7B,MAAM,gBAAgB,IAA6B,KAAI;EACvD,MAAM,gBAAgB,IAAgC,KAAI;;EAG1D,MAAM,eAAe,YAAoB;AACvC,OAAI,QAAA,UAAU,SAAS,QACrB;AAEF,mBAAgB,KAAK,QAAA,UAAU,KAAK,QAAQ,QAAO;;;AAIrD,cACQ,QAAA,UAAU,OACf,WAAW;AACV,OAAI,CAAC,OACH;AAEF,eAAY,OAAM;IAEtB;;EAGA,MAAM,aAAa,IAAI,IAAG;;EAE1B,MAAM,YAAY,IAAI,EAAC;;EAEvB,MAAM,eAAe,IAAI,MAAK;;EAE9B,MAAM,WAAW,KAAoC;EAErD,SAAS,OAAO;AACd,OAAI,aAAa,MAEf,YAAW,UAAU,WAAW,QAAQ,MAAM;OAG9C,YAAW,SAAS,UAAU,QAAQ;AAExC,OAAI,WAAW,SAAS,GAAG;AACzB,kBAAc,SAAS,MAAK;AAC5B,aAAS,QAAQ,KAAA;AACjB,eAAW,QAAQ;AACnB,iBAAa,QAAQ;;;EAIzB,SAAS,eAAe;AACtB,OAAI,SAAS,MACX;AAEF,gBAAa,QAAQ;AACrB,YAAS,QAAQ,YAAY,MAAM,GAAE;;EAGvC,SAAS,cAAc;AACrB,aAAU,QAAQ,WAAW;AAC7B,gBAAa,QAAQ;;EAGvB,SAAS,eAAe;AACtB,iBAAc,SAAS,MAAK;AAC5B,YAAS,QAAQ,KAAA;AACjB,cAAW,QAAQ;AACnB,gBAAa,QAAQ;;AAGvB,SAAO,cAAc,IAAI,WAAW;AAClC,OAAI,WAAW,QACb,QAAO,cAAa;AAEtB,OAAI,WAAW,OACb,QAAO,aAAY;AAErB,OAAI,WAAW,QACb,QAAO,cAAa;IAIvB;;AAGD,SAAO,gBAAgB,SAAS;AAC9B,OAAI,WAAW,QACb,eAAc,OAAO,KAAK,OAAM;OAEhC,eAAc,OAAO,OAAM;IAE9B;EAED,SAAS,oBAAoB,QAAuB;AAClD,mBAAgB,KAAK,QAAA,UAAU,KAAK,UAAU,OAAM;;EAGtD,SAAS,qBAAqB;GAC5B,MAAM,EAAE,WAAW,QAAA;AACnB,UAAO,gBAAgB,QAAQ;;EAGjC,SAAS,uBAAuB;AAC9B,OAAI,aAAa,MACf;AAEF,gBAAa,QAAQ;AACrB,UAAO,eAAe,KAAK,EAAE,YAAY,QAAA,UAAU,KAAK,CAAA;;;AAI1D,SAAO,QAAQ,IAAI,UAAU;AAC3B,OAAI,OAAO,gBACT,eAAc,OAAO,OAAM;AAE7B,OAAI,OAAO,eACT,uBAAqB;IAExB;;;;EAKD,SAAS,kBAAkB,KAAa;AACtC,mBAAgB,KAAK,QAAA,UAAU,KAAK,QAAQ,IAAG;;;uBAI/C,mBAsFM,OAAA;IArFH,IAAI,MAAA,GAAE;IACP,OAAM;OAEN,mBAiFM,OAjFN,YAiFM;IA/EJ,mBAQM,OARN,YAQM,CANJ,mBAKO,OAAA;KAJL,OAAM;KACL,OAAK,eAAA;8DAAwE,oBAAkB,CAAA;iCAA8C,WAAA,MAAU;;;IAK5J,mBAOM,OAPN,YAOM,CANJ,YAKkC,oBAAA;KAJ/B,YAAY,MAAA,OAAM,KAAA;KACnB,UAAA;KACC,QAAQ,QAAA,UAAU;KACnB,UAAA;KACC,UAAQ;;IAGb,mBAqCM,OArCN,YAqCM;KAjCI,QAAA,WAAW,QAAQ,UAAA,WAAA,EAD3B,YAMiB,MAAA,uBAAA,EAAA;;MAJd,YAAY,QAAA;MACb,QAAO;MACN,WAAW,QAAA;MACX,QAAQ,QAAA;MACR,QAAQ,MAAA,GAAE;;;;;;;+BAEb,mBAAyB,OAAA,EAApB,OAAM,aAAW,EAAA,MAAA,GAAA;KAEtB,YAsB2C,mBAAA;eArBrC;MAAJ,KAAI;MACJ,cAAW;MACX,OAAM;MACN,sBAAA;MACC,UAAU,MAAA,OAAM,KAAA;MACjB,cAAA;MACA,kBAAA;MACC,YAAY;MACZ,cAAc,QAAA;MACd,aAAa,QAAA;MACd,YAAA;MACC,YAAY,QAAA,UAAU;MACtB,aAA0B,QAAA,QAAQ,OAAO,QAAA,WAAW,QAAQ,SAAS,QAAA,OAAO,IAAG,GAAA,KAAA;MAKhF,QAAA;MACC,WAAW,QAAA;MACX,QAAI,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,cAAe,OAAM;MAChC,UAAQ;MACR,uBAAmB;;;;;;;;;+BACtB,mBAA0B,OAAA,EAArB,OAAM,cAAY,EAAA,MAAA,GAAA;;IAGzB,YAEiB,2BAAA;KADd,WAAW,QAAA;KACX,QAAQ,MAAA,GAAE;;IACb,YAkBe,MAAA,aAAA,EAAA;cAjBT;KAAJ,KAAI;KACJ,OAAM;KACL,UAAU,aAAA;KACV,SAAO;;4BASD,CARP,mBAQO,QARP,YAQO,CALL,YAGkB,MAAA,eAAA,EAAA;MAFhB,OAAM;MACN,MAAK;MACL,QAAO;mCACT,mBAAiD,QAAA,EAA3C,OAAM,2BAAyB,EAAC,QAAI,GAAA,EAAA,CAAA,EAE5C,mBAGO,QAHP,YAAsB,WACf,gBAAG,QAAA,UAAU,OAAM,GAAG,iBAAY,gBAAG,QAAA,QAAQ,OAAG,GAAA,GAAA,gBAChD,QAAA,UAAU,KAAI,EAAA,EAAA,CAAA,CAAA"}

package/dist/{App-BpNPKHmM.js → App-DHBmpWJI.js}

@@ -1,8 +1,8 @@
-import { n as ROUTES } from "./CommandPalette-BiA0IgO8.js";
-import { D as routes, O as saveActiveWorkspace, _ as createApiClient, d as handleHotKeyDown, l as DEFAULT_HOTKEYS, r as useWorkspace, w as useActiveEntities } from "./store-DaPoVtIS.js";
+import { n as ROUTES } from "./CommandPalette-BxoEK8TY.js";
+import { D as routes, O as saveActiveWorkspace, _ as createApiClient, d as handleHotKeyDown, l as DEFAULT_HOTKEYS, r as useWorkspace, w as useActiveEntities } from "./store-DnlAQK5d.js";
 import { r as useSidebar } from "./useSidebar-DLTwHDI-.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
-import { t as MainLayout_default } from "./MainLayout-oMIJ5QXF.js";
+import { t as MainLayout_default } from "./MainLayout-BnLwst16.js";
 import { t as analytics } from "./analytics-BZimCWcw.js";
 import { Fragment, KeepAlive, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, onBeforeMount, onBeforeUnmount, onMounted, openBlock, reactive, ref, renderList, resolveDynamicComponent, toDisplayString, unref, watch, withCtx } from "vue";
 import { ScalarContextMenu, ScalarDropdownButton, ScalarDropdownDivider, ScalarDropdownMenu, ScalarFloating, ScalarHotkey, ScalarIcon, ScalarTeleportRoot, ScalarTooltip, addScalarClassesToHeadless } from "@scalar/components";
@@ -530,4 +530,4 @@ var createApiClientApp = async (el, configuration = {}, mountOnInitialize = true
 //#endregion
 export { ApiClientApp_default as n, createApiClientApp as t };
 
-//# sourceMappingURL=App-BpNPKHmM.js.map
+//# sourceMappingURL=App-DHBmpWJI.js.map

package/dist/{App-BpNPKHmM.js.map → App-DHBmpWJI.js.map}

@@ -1 +1 @@
-{"version":3,"file":"App-BpNPKHmM.js","names":["$emit"],"sources":["../src/components/TopNav/TopNavItem.vue","../src/components/TopNav/TopNavItem.vue","../src/components/TopNav/TopNav.vue","../src/components/TopNav/TopNav.vue","../src/layouts/App/hotkeys.ts","../src/layouts/App/ApiClientApp.vue","../src/layouts/App/ApiClientApp.vue","../src/layouts/App/create-api-client-app.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarContextMenu,\n  ScalarDropdownButton,\n  ScalarDropdownDivider,\n  ScalarDropdownMenu,\n  ScalarFloating,\n  ScalarHotkey,\n  ScalarIcon,\n  ScalarTooltip,\n  type Icon,\n} from '@scalar/components'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport { LibraryIcon } from '@scalar/icons/library'\n\ndefineProps<{\n  hotkey?: string\n  active: boolean\n  label: string\n  icon: Icon\n  isCollection?: boolean\n}>()\n\ndefineEmits<{\n  (e: 'click'): void\n  (e: 'close'): void\n  (e: 'newTab'): void\n  (e: 'copyUrl'): void\n  (e: 'closeOtherTabs'): void\n}>()\n</script>\n\n<template>\n  <ScalarContextMenu triggerClass=\"overflow-hidden w-full\">\n    <template #trigger>\n      <ScalarTooltip\n        :content=\"`${isMacOS() ? '⌘' : '^'} ${hotkey}`\"\n        placement=\"bottom\">\n        <div\n          class=\"nav-item app-no-drag-region\"\n          :class=\"{ 'nav-item__active': active }\"\n          @click=\"$emit('click')\">\n          <div\n            class=\"nav-item-icon-copy flex flex-1 items-center justify-center gap-1.5\">\n            <LibraryIcon\n              v-if=\"isCollection\"\n              class=\"size-3.5 min-w-3.5 stroke-2\"\n              :src=\"icon\" />\n            <ScalarIcon\n              v-else\n              :icon=\"icon\"\n              size=\"xs\"\n              thickness=\"2.5\" />\n            <span class=\"custom-scroll nav-item-copy text-sm\">{{ label }}</span>\n          </div>\n          <button\n            class=\"nav-item-close\"\n            type=\"button\"\n            @click=\"$emit('close')\">\n            <ScalarIcon\n              icon=\"Close\"\n              thickness=\"1.75\" />\n          </button>\n        </div>\n      </ScalarTooltip>\n    </template>\n    <template #content>\n      <ScalarFloating placement=\"right-start\">\n        <template #floating>\n          <ScalarDropdownMenu class=\"scalar-app scalar-client\">\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('newTab')\">\n              <ScalarIcon\n                icon=\"AddTab\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              New Tab\n              <ScalarHotkey\n                class=\"bg-b-2 ml-auto\"\n                hotkey=\"T\" />\n            </ScalarDropdownButton>\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('copyUrl')\">\n              <ScalarIcon\n                icon=\"Link\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Copy URL\n            </ScalarDropdownButton>\n            <ScalarDropdownDivider />\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('close')\">\n              <ScalarIcon\n                icon=\"CloseTab\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Close Tab\n              <ScalarHotkey\n                class=\"bg-b-2 ml-auto\"\n                hotkey=\"W\" />\n            </ScalarDropdownButton>\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('closeOtherTabs')\">\n              <ScalarIcon\n                icon=\"CloseTabs\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Close Other Tabs\n            </ScalarDropdownButton>\n          </ScalarDropdownMenu>\n        </template>\n      </ScalarFloating>\n    </template>\n  </ScalarContextMenu>\n</template>\n\n<style scoped>\n.nav-item {\n  padding: 0 1rem;\n  cursor: pointer;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: var(--scalar-radius-lg);\n  background: var(--scalar-background-3);\n  border: var(--scalar-border-width) solid var(--scalar-background-2);\n  color: var(--scalar-color-3);\n  padding: 4.5px;\n  min-width: 0;\n  overflow: hidden;\n  position: relative;\n}\n.dark-mode .nav-item {\n  background: color-mix(in srgb, var(--scalar-background-2), transparent);\n}\n.nav-item-icon-copy {\n  max-width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  mask-image: linear-gradient(\n    to left,\n    transparent 0,\n    var(--scalar-background-2) 20px\n  );\n}\n.nav-item:hover .nav-item-icon-copy {\n  mask-image: linear-gradient(\n    to left,\n    transparent 20px,\n    var(--scalar-background-2) 40px\n  );\n}\n.nav-item-copy {\n  max-width: calc(100% - 20px);\n}\n.nav-item:hover {\n  color: var(--scalar-color-1);\n}\n.nav-item__active {\n  background-color: var(--scalar-background-1);\n  color: var(--scalar-color-1);\n  border-color: var(--scalar-border-color);\n}\n.dark-mode .nav-item__active {\n  background-color: var(--scalar-background-2);\n}\n.nav-item-close {\n  position: absolute;\n  right: 3px;\n  padding: 2px;\n  border-radius: var(--scalar-radius);\n  background: transparent;\n  max-width: 20px;\n  stroke-width: 1.5px;\n  color: var(--scalar-color-3);\n  margin-left: -20px;\n  opacity: 0;\n}\n.nav-item:hover .nav-item-close {\n  opacity: 1;\n}\n.nav-item-close:hover {\n  background-color: var(--scalar-background-4);\n}\n.nav-item__active .nav-item-close:hover {\n  background-color: var(--scalar-background-2);\n}\n</style>\n","<script setup lang=\"ts\">\nimport {\n  ScalarContextMenu,\n  ScalarDropdownButton,\n  ScalarDropdownDivider,\n  ScalarDropdownMenu,\n  ScalarFloating,\n  ScalarHotkey,\n  ScalarIcon,\n  ScalarTooltip,\n  type Icon,\n} from '@scalar/components'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport { LibraryIcon } from '@scalar/icons/library'\n\ndefineProps<{\n  hotkey?: string\n  active: boolean\n  label: string\n  icon: Icon\n  isCollection?: boolean\n}>()\n\ndefineEmits<{\n  (e: 'click'): void\n  (e: 'close'): void\n  (e: 'newTab'): void\n  (e: 'copyUrl'): void\n  (e: 'closeOtherTabs'): void\n}>()\n</script>\n\n<template>\n  <ScalarContextMenu triggerClass=\"overflow-hidden w-full\">\n    <template #trigger>\n      <ScalarTooltip\n        :content=\"`${isMacOS() ? '⌘' : '^'} ${hotkey}`\"\n        placement=\"bottom\">\n        <div\n          class=\"nav-item app-no-drag-region\"\n          :class=\"{ 'nav-item__active': active }\"\n          @click=\"$emit('click')\">\n          <div\n            class=\"nav-item-icon-copy flex flex-1 items-center justify-center gap-1.5\">\n            <LibraryIcon\n              v-if=\"isCollection\"\n              class=\"size-3.5 min-w-3.5 stroke-2\"\n              :src=\"icon\" />\n            <ScalarIcon\n              v-else\n              :icon=\"icon\"\n              size=\"xs\"\n              thickness=\"2.5\" />\n            <span class=\"custom-scroll nav-item-copy text-sm\">{{ label }}</span>\n          </div>\n          <button\n            class=\"nav-item-close\"\n            type=\"button\"\n            @click=\"$emit('close')\">\n            <ScalarIcon\n              icon=\"Close\"\n              thickness=\"1.75\" />\n          </button>\n        </div>\n      </ScalarTooltip>\n    </template>\n    <template #content>\n      <ScalarFloating placement=\"right-start\">\n        <template #floating>\n          <ScalarDropdownMenu class=\"scalar-app scalar-client\">\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('newTab')\">\n              <ScalarIcon\n                icon=\"AddTab\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              New Tab\n              <ScalarHotkey\n                class=\"bg-b-2 ml-auto\"\n                hotkey=\"T\" />\n            </ScalarDropdownButton>\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('copyUrl')\">\n              <ScalarIcon\n                icon=\"Link\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Copy URL\n            </ScalarDropdownButton>\n            <ScalarDropdownDivider />\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('close')\">\n              <ScalarIcon\n                icon=\"CloseTab\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Close Tab\n              <ScalarHotkey\n                class=\"bg-b-2 ml-auto\"\n                hotkey=\"W\" />\n            </ScalarDropdownButton>\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('closeOtherTabs')\">\n              <ScalarIcon\n                icon=\"CloseTabs\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Close Other Tabs\n            </ScalarDropdownButton>\n          </ScalarDropdownMenu>\n        </template>\n      </ScalarFloating>\n    </template>\n  </ScalarContextMenu>\n</template>\n\n<style scoped>\n.nav-item {\n  padding: 0 1rem;\n  cursor: pointer;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: var(--scalar-radius-lg);\n  background: var(--scalar-background-3);\n  border: var(--scalar-border-width) solid var(--scalar-background-2);\n  color: var(--scalar-color-3);\n  padding: 4.5px;\n  min-width: 0;\n  overflow: hidden;\n  position: relative;\n}\n.dark-mode .nav-item {\n  background: color-mix(in srgb, var(--scalar-background-2), transparent);\n}\n.nav-item-icon-copy {\n  max-width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  mask-image: linear-gradient(\n    to left,\n    transparent 0,\n    var(--scalar-background-2) 20px\n  );\n}\n.nav-item:hover .nav-item-icon-copy {\n  mask-image: linear-gradient(\n    to left,\n    transparent 20px,\n    var(--scalar-background-2) 40px\n  );\n}\n.nav-item-copy {\n  max-width: calc(100% - 20px);\n}\n.nav-item:hover {\n  color: var(--scalar-color-1);\n}\n.nav-item__active {\n  background-color: var(--scalar-background-1);\n  color: var(--scalar-color-1);\n  border-color: var(--scalar-border-color);\n}\n.dark-mode .nav-item__active {\n  background-color: var(--scalar-background-2);\n}\n.nav-item-close {\n  position: absolute;\n  right: 3px;\n  padding: 2px;\n  border-radius: var(--scalar-radius);\n  background: transparent;\n  max-width: 20px;\n  stroke-width: 1.5px;\n  color: var(--scalar-color-3);\n  margin-left: -20px;\n  opacity: 0;\n}\n.nav-item:hover .nav-item-close {\n  opacity: 1;\n}\n.nav-item-close:hover {\n  background-color: var(--scalar-background-4);\n}\n.nav-item__active .nav-item-close:hover {\n  background-color: var(--scalar-background-2);\n}\n</style>\n","<script setup lang=\"ts\">\nimport {\n  ScalarContextMenu,\n  ScalarDropdownButton,\n  ScalarDropdownMenu,\n  ScalarFloating,\n  ScalarHotkey,\n  ScalarIcon,\n  type Icon,\n} from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { ROUTES } from '@/constants'\nimport type { HotKeyEvent } from '@/libs'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport TopNavItem from './TopNavItem.vue'\n\nconst props = defineProps<{\n  openNewTab: { name: string; uid: string } | null\n}>()\nconst { activeRequest, activeCollection } = useActiveEntities()\nconst router = useRouter()\nconst { events } = useWorkspace()\nconst { copyToClipboard } = useClipboard()\n\n/** Nav Items list */\nconst topNavItems = reactive([\n  {\n    label: '',\n    path: '',\n    icon: 'Add' as Icon | Collection['x-scalar-icon'],\n    isCollection: false,\n  },\n])\nconst activeNavItemIdx = ref(0)\nconst activeNavItemIdxValue = computed(() => activeNavItemIdx.value)\n\n/**\n * Check if the current route is a collection\n */\nconst isCollection = computed(() => {\n  return router.currentRoute.value.name?.toString().startsWith('collection.')\n})\n\n/**\n * Logic to handle adding a nav item\n * based on the current route\n */\nfunction handleNavLabelAdd() {\n  // Collection\n  if (isCollection.value) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeCollection.value?.info?.title || 'Untitled Collection',\n      path: router.currentRoute.value.path,\n      icon: activeCollection.value?.['x-scalar-icon'] || 'Collection',\n      isCollection: true,\n    }\n\n    return\n  }\n\n  // Request\n  if (router.currentRoute.value.name?.toString().startsWith('request')) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeRequest.value?.summary || '',\n      path: router.currentRoute.value.path,\n      icon: 'ExternalLink',\n      isCollection: false,\n    }\n\n    return\n  }\n\n  // Something from the sidebar\n  const activeRoute = ROUTES.find((route) => {\n    return route.to.name.startsWith(\n      router.currentRoute.value.name?.toString() ?? '',\n    )\n  })\n\n  if (activeRoute) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeRoute.displayName,\n      path: router.currentRoute.value.path,\n      icon: activeRoute.icon,\n      isCollection: false,\n    }\n\n    return\n  }\n}\n\nfunction handleNavRoute() {\n  const path = topNavItems[activeNavItemIdx.value]?.path\n  if (path) {\n    router.push(path)\n  }\n}\n\n/**\n * adding a nav item sets the new index and nav item\n * based on the route\n */\nfunction addNavItem() {\n  topNavItems.push({\n    label: '',\n    path: '',\n    icon: 'Add' as Icon,\n    isCollection: false,\n  })\n  activeNavItemIdx.value = topNavItems.length - 1\n  handleNavLabelAdd()\n}\n\nfunction setNavItemIdx(idx: number) {\n  activeNavItemIdx.value = idx\n  handleNavRoute()\n}\n\n// when the route changes we need update the active nav item\nwatch(\n  () => router.currentRoute.value.path,\n  () => {\n    handleNavLabelAdd()\n  },\n  { immediate: true },\n)\n\nfunction removeNavItem(idx: number) {\n  topNavItems.splice(idx, 1)\n  activeNavItemIdx.value = Math.min(\n    activeNavItemIdx.value,\n    topNavItems.length - 1,\n  )\n  handleNavRoute()\n}\n\nconst copyUrl = async (idx: number) => {\n  if (!topNavItems[idx]?.path) {\n    return\n  }\n\n  const fullUrl = new URL(window.location.href)\n  fullUrl.pathname = topNavItems[idx].path\n  await copyToClipboard(fullUrl.toString())\n}\n\nconst closeOtherTabs = (idx: number) => {\n  topNavItems.splice(0, idx)\n  topNavItems.splice(1)\n  activeNavItemIdx.value = 0\n  handleNavRoute()\n}\n\n/** Handle hotkeys */\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (!event) {\n    return\n  }\n  if (event.addTopNav) {\n    addNavItem()\n  }\n  if (event.closeTopNav) {\n    removeNavItem(activeNavItemIdx.value)\n  }\n  if (event.navigateTopNavLeft) {\n    setNavItemIdx(Math.max(activeNavItemIdx.value - 1, 0))\n  }\n  if (event.navigateTopNavRight) {\n    setNavItemIdx(Math.min(activeNavItemIdx.value + 1, topNavItems.length - 1))\n  }\n  if (event.jumpToTab) {\n    const tabIndex = Number(event.jumpToTab.key) - 1\n    if (tabIndex >= 0 && tabIndex < topNavItems.length) {\n      setNavItemIdx(tabIndex)\n    }\n  }\n  if (event.jumpToLastTab) {\n    setNavItemIdx(topNavItems.length - 1)\n  }\n}\n\nconst addTopNavTab = (item: { name: string; uid: string }) => {\n  topNavItems.push({\n    label: item.name,\n    path: item.uid,\n    icon: 'ExternalLink',\n    isCollection: false,\n  })\n}\n\nwatch(\n  () => props.openNewTab,\n  (openNewTab) => {\n    if (openNewTab) {\n      addTopNavTab(openNewTab)\n    }\n  },\n  { immediate: true },\n)\n\nonMounted(() => events.hotKeys.on(handleHotKey))\nonBeforeUnmount(() => events.hotKeys.off(handleHotKey))\n</script>\n<template>\n  <nav class=\"mac:pl-[72px] t-app__top-nav relative flex h-10 pl-2\">\n    <!-- Add a draggable overlay -->\n    <div class=\"app-drag-region absolute inset-0\" />\n    <div\n      class=\"relative flex h-10 flex-1 items-center gap-1.5 overflow-hidden pr-2.5 text-base font-medium\">\n      <template v-if=\"topNavItems.length === 1\">\n        <div class=\"h-full w-full overflow-hidden\">\n          <ScalarContextMenu\n            triggerClass=\"flex custom-scroll gap-1.5 h-full items-center justify-center w-full whitespace-nowrap\">\n            <template #trigger>\n              <LibraryIcon\n                v-if=\"isCollection\"\n                class=\"size-3.5 min-w-3.5 stroke-2\"\n                :src=\"activeCollection?.['x-scalar-icon'] || 'Collection'\" />\n              <ScalarIcon\n                v-else-if=\"topNavItems[0]?.icon\"\n                :icon=\"topNavItems[0]?.icon as Icon\"\n                size=\"xs\"\n                thickness=\"2.5\" />\n              <span>{{ topNavItems[0]?.label }}</span>\n            </template>\n            <template #content>\n              <ScalarFloating placement=\"right-start\">\n                <template #floating>\n                  <ScalarDropdownMenu class=\"scalar-app scalar-client\">\n                    <ScalarDropdownButton\n                      class=\"flex items-center gap-1.5\"\n                      @click=\"addNavItem\">\n                      <ScalarIcon\n                        icon=\"AddTab\"\n                        size=\"sm\"\n                        thickness=\"1.5\" />\n                      New Tab\n                      <ScalarHotkey\n                        class=\"bg-b-2 ml-auto\"\n                        hotkey=\"T\" />\n                    </ScalarDropdownButton>\n                    <ScalarDropdownButton\n                      class=\"flex items-center gap-1.5\"\n                      @click=\"copyUrl(activeNavItemIdxValue)\">\n                      <ScalarIcon\n                        icon=\"Link\"\n                        size=\"sm\"\n                        thickness=\"1.5\" />\n                      Copy URL\n                    </ScalarDropdownButton>\n                  </ScalarDropdownMenu>\n                </template>\n              </ScalarFloating>\n            </template>\n          </ScalarContextMenu>\n        </div>\n      </template>\n      <template v-else>\n        <TopNavItem\n          v-for=\"(topNavItem, index) in topNavItems\"\n          :key=\"topNavItem.path\"\n          :active=\"index === activeNavItemIdxValue\"\n          :hotkey=\"(index + 1).toString()\"\n          :icon=\"\n            topNavItem.isCollection\n              ? ((activeCollection?.['x-scalar-icon'] || 'Collection') as Icon)\n              : (topNavItem.icon as Icon)\n          \"\n          :isCollection=\"topNavItem.isCollection || false\"\n          :label=\"topNavItem.label\"\n          @click=\"setNavItemIdx(index)\"\n          @close=\"removeNavItem(index)\"\n          @closeOtherTabs=\"closeOtherTabs(index)\"\n          @copyUrl=\"copyUrl(index)\"\n          @newTab=\"addNavItem\" />\n      </template>\n      <button\n        class=\"text-c-3 hover:bg-b-3 app-no-drag-region rounded p-1.5\"\n        type=\"button\"\n        @click=\"addNavItem\">\n        <ScalarIcon\n          icon=\"Add\"\n          size=\"sm\"\n          thickness=\"2.5\" />\n      </button>\n    </div>\n  </nav>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarContextMenu,\n  ScalarDropdownButton,\n  ScalarDropdownMenu,\n  ScalarFloating,\n  ScalarHotkey,\n  ScalarIcon,\n  type Icon,\n} from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { ROUTES } from '@/constants'\nimport type { HotKeyEvent } from '@/libs'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport TopNavItem from './TopNavItem.vue'\n\nconst props = defineProps<{\n  openNewTab: { name: string; uid: string } | null\n}>()\nconst { activeRequest, activeCollection } = useActiveEntities()\nconst router = useRouter()\nconst { events } = useWorkspace()\nconst { copyToClipboard } = useClipboard()\n\n/** Nav Items list */\nconst topNavItems = reactive([\n  {\n    label: '',\n    path: '',\n    icon: 'Add' as Icon | Collection['x-scalar-icon'],\n    isCollection: false,\n  },\n])\nconst activeNavItemIdx = ref(0)\nconst activeNavItemIdxValue = computed(() => activeNavItemIdx.value)\n\n/**\n * Check if the current route is a collection\n */\nconst isCollection = computed(() => {\n  return router.currentRoute.value.name?.toString().startsWith('collection.')\n})\n\n/**\n * Logic to handle adding a nav item\n * based on the current route\n */\nfunction handleNavLabelAdd() {\n  // Collection\n  if (isCollection.value) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeCollection.value?.info?.title || 'Untitled Collection',\n      path: router.currentRoute.value.path,\n      icon: activeCollection.value?.['x-scalar-icon'] || 'Collection',\n      isCollection: true,\n    }\n\n    return\n  }\n\n  // Request\n  if (router.currentRoute.value.name?.toString().startsWith('request')) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeRequest.value?.summary || '',\n      path: router.currentRoute.value.path,\n      icon: 'ExternalLink',\n      isCollection: false,\n    }\n\n    return\n  }\n\n  // Something from the sidebar\n  const activeRoute = ROUTES.find((route) => {\n    return route.to.name.startsWith(\n      router.currentRoute.value.name?.toString() ?? '',\n    )\n  })\n\n  if (activeRoute) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeRoute.displayName,\n      path: router.currentRoute.value.path,\n      icon: activeRoute.icon,\n      isCollection: false,\n    }\n\n    return\n  }\n}\n\nfunction handleNavRoute() {\n  const path = topNavItems[activeNavItemIdx.value]?.path\n  if (path) {\n    router.push(path)\n  }\n}\n\n/**\n * adding a nav item sets the new index and nav item\n * based on the route\n */\nfunction addNavItem() {\n  topNavItems.push({\n    label: '',\n    path: '',\n    icon: 'Add' as Icon,\n    isCollection: false,\n  })\n  activeNavItemIdx.value = topNavItems.length - 1\n  handleNavLabelAdd()\n}\n\nfunction setNavItemIdx(idx: number) {\n  activeNavItemIdx.value = idx\n  handleNavRoute()\n}\n\n// when the route changes we need update the active nav item\nwatch(\n  () => router.currentRoute.value.path,\n  () => {\n    handleNavLabelAdd()\n  },\n  { immediate: true },\n)\n\nfunction removeNavItem(idx: number) {\n  topNavItems.splice(idx, 1)\n  activeNavItemIdx.value = Math.min(\n    activeNavItemIdx.value,\n    topNavItems.length - 1,\n  )\n  handleNavRoute()\n}\n\nconst copyUrl = async (idx: number) => {\n  if (!topNavItems[idx]?.path) {\n    return\n  }\n\n  const fullUrl = new URL(window.location.href)\n  fullUrl.pathname = topNavItems[idx].path\n  await copyToClipboard(fullUrl.toString())\n}\n\nconst closeOtherTabs = (idx: number) => {\n  topNavItems.splice(0, idx)\n  topNavItems.splice(1)\n  activeNavItemIdx.value = 0\n  handleNavRoute()\n}\n\n/** Handle hotkeys */\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (!event) {\n    return\n  }\n  if (event.addTopNav) {\n    addNavItem()\n  }\n  if (event.closeTopNav) {\n    removeNavItem(activeNavItemIdx.value)\n  }\n  if (event.navigateTopNavLeft) {\n    setNavItemIdx(Math.max(activeNavItemIdx.value - 1, 0))\n  }\n  if (event.navigateTopNavRight) {\n    setNavItemIdx(Math.min(activeNavItemIdx.value + 1, topNavItems.length - 1))\n  }\n  if (event.jumpToTab) {\n    const tabIndex = Number(event.jumpToTab.key) - 1\n    if (tabIndex >= 0 && tabIndex < topNavItems.length) {\n      setNavItemIdx(tabIndex)\n    }\n  }\n  if (event.jumpToLastTab) {\n    setNavItemIdx(topNavItems.length - 1)\n  }\n}\n\nconst addTopNavTab = (item: { name: string; uid: string }) => {\n  topNavItems.push({\n    label: item.name,\n    path: item.uid,\n    icon: 'ExternalLink',\n    isCollection: false,\n  })\n}\n\nwatch(\n  () => props.openNewTab,\n  (openNewTab) => {\n    if (openNewTab) {\n      addTopNavTab(openNewTab)\n    }\n  },\n  { immediate: true },\n)\n\nonMounted(() => events.hotKeys.on(handleHotKey))\nonBeforeUnmount(() => events.hotKeys.off(handleHotKey))\n</script>\n<template>\n  <nav class=\"mac:pl-[72px] t-app__top-nav relative flex h-10 pl-2\">\n    <!-- Add a draggable overlay -->\n    <div class=\"app-drag-region absolute inset-0\" />\n    <div\n      class=\"relative flex h-10 flex-1 items-center gap-1.5 overflow-hidden pr-2.5 text-base font-medium\">\n      <template v-if=\"topNavItems.length === 1\">\n        <div class=\"h-full w-full overflow-hidden\">\n          <ScalarContextMenu\n            triggerClass=\"flex custom-scroll gap-1.5 h-full items-center justify-center w-full whitespace-nowrap\">\n            <template #trigger>\n              <LibraryIcon\n                v-if=\"isCollection\"\n                class=\"size-3.5 min-w-3.5 stroke-2\"\n                :src=\"activeCollection?.['x-scalar-icon'] || 'Collection'\" />\n              <ScalarIcon\n                v-else-if=\"topNavItems[0]?.icon\"\n                :icon=\"topNavItems[0]?.icon as Icon\"\n                size=\"xs\"\n                thickness=\"2.5\" />\n              <span>{{ topNavItems[0]?.label }}</span>\n            </template>\n            <template #content>\n              <ScalarFloating placement=\"right-start\">\n                <template #floating>\n                  <ScalarDropdownMenu class=\"scalar-app scalar-client\">\n                    <ScalarDropdownButton\n                      class=\"flex items-center gap-1.5\"\n                      @click=\"addNavItem\">\n                      <ScalarIcon\n                        icon=\"AddTab\"\n                        size=\"sm\"\n                        thickness=\"1.5\" />\n                      New Tab\n                      <ScalarHotkey\n                        class=\"bg-b-2 ml-auto\"\n                        hotkey=\"T\" />\n                    </ScalarDropdownButton>\n                    <ScalarDropdownButton\n                      class=\"flex items-center gap-1.5\"\n                      @click=\"copyUrl(activeNavItemIdxValue)\">\n                      <ScalarIcon\n                        icon=\"Link\"\n                        size=\"sm\"\n                        thickness=\"1.5\" />\n                      Copy URL\n                    </ScalarDropdownButton>\n                  </ScalarDropdownMenu>\n                </template>\n              </ScalarFloating>\n            </template>\n          </ScalarContextMenu>\n        </div>\n      </template>\n      <template v-else>\n        <TopNavItem\n          v-for=\"(topNavItem, index) in topNavItems\"\n          :key=\"topNavItem.path\"\n          :active=\"index === activeNavItemIdxValue\"\n          :hotkey=\"(index + 1).toString()\"\n          :icon=\"\n            topNavItem.isCollection\n              ? ((activeCollection?.['x-scalar-icon'] || 'Collection') as Icon)\n              : (topNavItem.icon as Icon)\n          \"\n          :isCollection=\"topNavItem.isCollection || false\"\n          :label=\"topNavItem.label\"\n          @click=\"setNavItemIdx(index)\"\n          @close=\"removeNavItem(index)\"\n          @closeOtherTabs=\"closeOtherTabs(index)\"\n          @copyUrl=\"copyUrl(index)\"\n          @newTab=\"addNavItem\" />\n      </template>\n      <button\n        class=\"text-c-3 hover:bg-b-3 app-no-drag-region rounded p-1.5\"\n        type=\"button\"\n        @click=\"addNavItem\">\n        <ScalarIcon\n          icon=\"Add\"\n          size=\"sm\"\n          thickness=\"2.5\" />\n      </button>\n    </div>\n  </nav>\n</template>\n","import type { HotKeyConfig } from '@scalar/oas-utils/entities/workspace'\n\n/**\n * Default set of keybindings for the client app\n */\nexport const APP_HOTKEYS: HotKeyConfig = {\n  t: { event: 'addTopNav', modifiers: ['default'] },\n  w: { event: 'closeTopNav', modifiers: ['default'] },\n  ArrowLeft: { event: 'navigateTopNavLeft', modifiers: ['default', 'Alt'] },\n  ArrowRight: { event: 'navigateTopNavRight', modifiers: ['default', 'Alt'] },\n  l: { event: 'focusAddressBar', modifiers: ['default'] },\n  1: { event: 'jumpToTab', modifiers: ['default'] },\n  2: { event: 'jumpToTab', modifiers: ['default'] },\n  3: { event: 'jumpToTab', modifiers: ['default'] },\n  4: { event: 'jumpToTab', modifiers: ['default'] },\n  5: { event: 'jumpToTab', modifiers: ['default'] },\n  6: { event: 'jumpToTab', modifiers: ['default'] },\n  7: { event: 'jumpToTab', modifiers: ['default'] },\n  8: { event: 'jumpToTab', modifiers: ['default'] },\n  9: { event: 'jumpToLastTab', modifiers: ['default'] },\n  f: { event: 'focusRequestSearch', modifiers: ['default'] },\n  n: { event: 'createNew', modifiers: ['default'] },\n}\n","<script setup lang=\"ts\">\n// TODO: Disabled until we polished the UI.\n// import { ImportCollectionListener } from '@/components/ImportCollection'\nimport {\n  addScalarClassesToHeadless,\n  ScalarTeleportRoot,\n} from '@scalar/components'\nimport { getThemeStyles } from '@scalar/themes'\nimport { useBreakpoints } from '@scalar/use-hooks/useBreakpoints'\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport {\n  computed,\n  onBeforeMount,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { RouterView } from 'vue-router'\n\nimport TopNav from '@/components/TopNav/TopNav.vue'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport MainLayout from '@/layouts/App/MainLayout.vue'\nimport { DEFAULT_HOTKEYS, handleHotKeyDown, type HotKeyEvent } from '@/libs'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport { APP_HOTKEYS } from './hotkeys'\n\ndefineEmits<{\n  (e: 'newTab', item: { name: string; uid: string }): void\n}>()\n\nconst hotKeys = { ...DEFAULT_HOTKEYS, ...APP_HOTKEYS }\n\nconst newTab = ref<{ name: string; uid: string } | null>(null)\n\nconst handleNewTab = (item: { name: string; uid: string }) => {\n  newTab.value = item\n}\n\n// Initialize color mode state globally\nuseColorMode()\n\nconst { activeWorkspace } = useActiveEntities()\nconst { events } = useWorkspace()\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n/** Handles the hotkey events, we will pass in custom hotkeys here */\nconst handleKeyDown = (ev: KeyboardEvent) =>\n  handleHotKeyDown(ev, events.hotKeys, { hotKeys })\n\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (!event) {\n    return\n  }\n\n  // We prevent default on open command so we can use it on the web\n  if (event.openCommandPalette) {\n    event.openCommandPalette.preventDefault()\n    events.commandPalette.emit()\n  }\n}\n\n// Hotkey listeners\nonMounted(() => {\n  window.addEventListener('keydown', handleKeyDown)\n  events.hotKeys.on(handleHotKey)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keydown', handleKeyDown)\n  events.hotKeys.off(handleHotKey)\n})\n\nconst { mediaQueries } = useBreakpoints()\nconst { setSidebarOpen } = useSidebar()\n\n// Single watcher instance for handling responsive behavior\nwatch(mediaQueries.xl, setSidebarOpen, {\n  immediate: true,\n})\n\nconst themeStyleTag = computed(\n  () =>\n    activeWorkspace.value &&\n    `<style>${getThemeStyles(activeWorkspace.value?.themeId)}</style>`,\n)\n</script>\n<template>\n  <ScalarTeleportRoot>\n    <div\n      id=\"scalar-client-app\"\n      class=\"contents\">\n      <!-- Listen for paste and drop events, and look for `url` query parameters to import collections -->\n      <!-- <ImportCollectionListener> -->\n      <div v-html=\"themeStyleTag\" />\n      <TopNav :openNewTab=\"newTab\" />\n\n      <!-- Ensure we have the workspace loaded from localStorage above -->\n      <MainLayout v-if=\"activeWorkspace?.uid\">\n        <RouterView\n          v-slot=\"{ Component }\"\n          @newTab=\"handleNewTab\">\n          <keep-alive>\n            <component :is=\"Component\" />\n          </keep-alive>\n        </RouterView>\n      </MainLayout>\n\n      <ScalarToasts />\n      <!-- </ImportCollectionListener> -->\n    </div>\n  </ScalarTeleportRoot>\n</template>\n<style>\n#scalar-client {\n  display: flex;\n  flex-direction: column;\n  height: 100dvh;\n  width: 100dvw;\n  position: relative;\n  background-color: var(--scalar-background-2);\n}\n.dark-mode #scalar-client {\n  background-color: color-mix(in srgb, var(--scalar-background-1) 65%, black);\n}\n</style>\n","<script setup lang=\"ts\">\n// TODO: Disabled until we polished the UI.\n// import { ImportCollectionListener } from '@/components/ImportCollection'\nimport {\n  addScalarClassesToHeadless,\n  ScalarTeleportRoot,\n} from '@scalar/components'\nimport { getThemeStyles } from '@scalar/themes'\nimport { useBreakpoints } from '@scalar/use-hooks/useBreakpoints'\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport {\n  computed,\n  onBeforeMount,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { RouterView } from 'vue-router'\n\nimport TopNav from '@/components/TopNav/TopNav.vue'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport MainLayout from '@/layouts/App/MainLayout.vue'\nimport { DEFAULT_HOTKEYS, handleHotKeyDown, type HotKeyEvent } from '@/libs'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport { APP_HOTKEYS } from './hotkeys'\n\ndefineEmits<{\n  (e: 'newTab', item: { name: string; uid: string }): void\n}>()\n\nconst hotKeys = { ...DEFAULT_HOTKEYS, ...APP_HOTKEYS }\n\nconst newTab = ref<{ name: string; uid: string } | null>(null)\n\nconst handleNewTab = (item: { name: string; uid: string }) => {\n  newTab.value = item\n}\n\n// Initialize color mode state globally\nuseColorMode()\n\nconst { activeWorkspace } = useActiveEntities()\nconst { events } = useWorkspace()\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n/** Handles the hotkey events, we will pass in custom hotkeys here */\nconst handleKeyDown = (ev: KeyboardEvent) =>\n  handleHotKeyDown(ev, events.hotKeys, { hotKeys })\n\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (!event) {\n    return\n  }\n\n  // We prevent default on open command so we can use it on the web\n  if (event.openCommandPalette) {\n    event.openCommandPalette.preventDefault()\n    events.commandPalette.emit()\n  }\n}\n\n// Hotkey listeners\nonMounted(() => {\n  window.addEventListener('keydown', handleKeyDown)\n  events.hotKeys.on(handleHotKey)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keydown', handleKeyDown)\n  events.hotKeys.off(handleHotKey)\n})\n\nconst { mediaQueries } = useBreakpoints()\nconst { setSidebarOpen } = useSidebar()\n\n// Single watcher instance for handling responsive behavior\nwatch(mediaQueries.xl, setSidebarOpen, {\n  immediate: true,\n})\n\nconst themeStyleTag = computed(\n  () =>\n    activeWorkspace.value &&\n    `<style>${getThemeStyles(activeWorkspace.value?.themeId)}</style>`,\n)\n</script>\n<template>\n  <ScalarTeleportRoot>\n    <div\n      id=\"scalar-client-app\"\n      class=\"contents\">\n      <!-- Listen for paste and drop events, and look for `url` query parameters to import collections -->\n      <!-- <ImportCollectionListener> -->\n      <div v-html=\"themeStyleTag\" />\n      <TopNav :openNewTab=\"newTab\" />\n\n      <!-- Ensure we have the workspace loaded from localStorage above -->\n      <MainLayout v-if=\"activeWorkspace?.uid\">\n        <RouterView\n          v-slot=\"{ Component }\"\n          @newTab=\"handleNewTab\">\n          <keep-alive>\n            <component :is=\"Component\" />\n          </keep-alive>\n        </RouterView>\n      </MainLayout>\n\n      <ScalarToasts />\n      <!-- </ImportCollectionListener> -->\n    </div>\n  </ScalarTeleportRoot>\n</template>\n<style>\n#scalar-client {\n  display: flex;\n  flex-direction: column;\n  height: 100dvh;\n  width: 100dvw;\n  position: relative;\n  background-color: var(--scalar-background-2);\n}\n.dark-mode #scalar-client {\n  background-color: color-mix(in srgb, var(--scalar-background-1) 65%, black);\n}\n</style>\n","import type { ApiClientConfiguration } from '@scalar/types/api-reference'\nimport { createRouter, createWebHistory } from 'vue-router'\n\nimport { analytics } from '@/analytics'\nimport { createApiClient } from '@/libs'\nimport { routes, saveActiveWorkspace } from '@/routes'\n\nimport ApiClientApp from './ApiClientApp.vue'\n\n/**\n * Mount the full-blown API Client modal to a given element.\n */\nexport const createApiClientApp = async (\n  /** Element to mount the references to */\n  el: HTMLElement | null,\n  /** Configuration object for API client */\n  configuration: Partial<ApiClientConfiguration> = {},\n  /**\n   * Will attempt to mount the references immediately\n   * For SSR this may need to be blocked and done client side\n   */\n  mountOnInitialize = true,\n) => {\n  const router = createRouter({\n    history: createWebHistory(),\n    routes,\n  })\n\n  const client = createApiClient({\n    el,\n    appComponent: ApiClientApp,\n    configuration: configuration,\n    mountOnInitialize,\n    router,\n    layout: 'desktop',\n  })\n\n  const { importSpecFile, importSpecFromUrl } = client.store\n\n  router.afterEach((to, from) => {\n    if (configuration.telemetry) {\n      analytics?.capture('page-view', {\n        hostname: window.location.hostname,\n        to: to.path, // capture path excluding query params\n        from: from.path,\n      })\n    }\n\n    saveActiveWorkspace(to)\n  })\n\n  // Import the spec if needed\n  if (configuration.url) {\n    await importSpecFromUrl(configuration.url, 'default', {\n      proxyUrl: configuration.proxyUrl,\n    })\n  } else if (configuration.content) {\n    await importSpecFile(configuration.content, 'default')\n  }\n\n  return {\n    client,\n    router,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"App-DHBmpWJI.js","names":["$emit"],"sources":["../src/components/TopNav/TopNavItem.vue","../src/components/TopNav/TopNavItem.vue","../src/components/TopNav/TopNav.vue","../src/components/TopNav/TopNav.vue","../src/layouts/App/hotkeys.ts","../src/layouts/App/ApiClientApp.vue","../src/layouts/App/ApiClientApp.vue","../src/layouts/App/create-api-client-app.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarContextMenu,\n  ScalarDropdownButton,\n  ScalarDropdownDivider,\n  ScalarDropdownMenu,\n  ScalarFloating,\n  ScalarHotkey,\n  ScalarIcon,\n  ScalarTooltip,\n  type Icon,\n} from '@scalar/components'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport { LibraryIcon } from '@scalar/icons/library'\n\ndefineProps<{\n  hotkey?: string\n  active: boolean\n  label: string\n  icon: Icon\n  isCollection?: boolean\n}>()\n\ndefineEmits<{\n  (e: 'click'): void\n  (e: 'close'): void\n  (e: 'newTab'): void\n  (e: 'copyUrl'): void\n  (e: 'closeOtherTabs'): void\n}>()\n</script>\n\n<template>\n  <ScalarContextMenu triggerClass=\"overflow-hidden w-full\">\n    <template #trigger>\n      <ScalarTooltip\n        :content=\"`${isMacOS() ? '⌘' : '^'} ${hotkey}`\"\n        placement=\"bottom\">\n        <div\n          class=\"nav-item app-no-drag-region\"\n          :class=\"{ 'nav-item__active': active }\"\n          @click=\"$emit('click')\">\n          <div\n            class=\"nav-item-icon-copy flex flex-1 items-center justify-center gap-1.5\">\n            <LibraryIcon\n              v-if=\"isCollection\"\n              class=\"size-3.5 min-w-3.5 stroke-2\"\n              :src=\"icon\" />\n            <ScalarIcon\n              v-else\n              :icon=\"icon\"\n              size=\"xs\"\n              thickness=\"2.5\" />\n            <span class=\"custom-scroll nav-item-copy text-sm\">{{ label }}</span>\n          </div>\n          <button\n            class=\"nav-item-close\"\n            type=\"button\"\n            @click=\"$emit('close')\">\n            <ScalarIcon\n              icon=\"Close\"\n              thickness=\"1.75\" />\n          </button>\n        </div>\n      </ScalarTooltip>\n    </template>\n    <template #content>\n      <ScalarFloating placement=\"right-start\">\n        <template #floating>\n          <ScalarDropdownMenu class=\"scalar-app scalar-client\">\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('newTab')\">\n              <ScalarIcon\n                icon=\"AddTab\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              New Tab\n              <ScalarHotkey\n                class=\"bg-b-2 ml-auto\"\n                hotkey=\"T\" />\n            </ScalarDropdownButton>\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('copyUrl')\">\n              <ScalarIcon\n                icon=\"Link\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Copy URL\n            </ScalarDropdownButton>\n            <ScalarDropdownDivider />\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('close')\">\n              <ScalarIcon\n                icon=\"CloseTab\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Close Tab\n              <ScalarHotkey\n                class=\"bg-b-2 ml-auto\"\n                hotkey=\"W\" />\n            </ScalarDropdownButton>\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('closeOtherTabs')\">\n              <ScalarIcon\n                icon=\"CloseTabs\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Close Other Tabs\n            </ScalarDropdownButton>\n          </ScalarDropdownMenu>\n        </template>\n      </ScalarFloating>\n    </template>\n  </ScalarContextMenu>\n</template>\n\n<style scoped>\n.nav-item {\n  padding: 0 1rem;\n  cursor: pointer;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: var(--scalar-radius-lg);\n  background: var(--scalar-background-3);\n  border: var(--scalar-border-width) solid var(--scalar-background-2);\n  color: var(--scalar-color-3);\n  padding: 4.5px;\n  min-width: 0;\n  overflow: hidden;\n  position: relative;\n}\n.dark-mode .nav-item {\n  background: color-mix(in srgb, var(--scalar-background-2), transparent);\n}\n.nav-item-icon-copy {\n  max-width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  mask-image: linear-gradient(\n    to left,\n    transparent 0,\n    var(--scalar-background-2) 20px\n  );\n}\n.nav-item:hover .nav-item-icon-copy {\n  mask-image: linear-gradient(\n    to left,\n    transparent 20px,\n    var(--scalar-background-2) 40px\n  );\n}\n.nav-item-copy {\n  max-width: calc(100% - 20px);\n}\n.nav-item:hover {\n  color: var(--scalar-color-1);\n}\n.nav-item__active {\n  background-color: var(--scalar-background-1);\n  color: var(--scalar-color-1);\n  border-color: var(--scalar-border-color);\n}\n.dark-mode .nav-item__active {\n  background-color: var(--scalar-background-2);\n}\n.nav-item-close {\n  position: absolute;\n  right: 3px;\n  padding: 2px;\n  border-radius: var(--scalar-radius);\n  background: transparent;\n  max-width: 20px;\n  stroke-width: 1.5px;\n  color: var(--scalar-color-3);\n  margin-left: -20px;\n  opacity: 0;\n}\n.nav-item:hover .nav-item-close {\n  opacity: 1;\n}\n.nav-item-close:hover {\n  background-color: var(--scalar-background-4);\n}\n.nav-item__active .nav-item-close:hover {\n  background-color: var(--scalar-background-2);\n}\n</style>\n","<script setup lang=\"ts\">\nimport {\n  ScalarContextMenu,\n  ScalarDropdownButton,\n  ScalarDropdownDivider,\n  ScalarDropdownMenu,\n  ScalarFloating,\n  ScalarHotkey,\n  ScalarIcon,\n  ScalarTooltip,\n  type Icon,\n} from '@scalar/components'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport { LibraryIcon } from '@scalar/icons/library'\n\ndefineProps<{\n  hotkey?: string\n  active: boolean\n  label: string\n  icon: Icon\n  isCollection?: boolean\n}>()\n\ndefineEmits<{\n  (e: 'click'): void\n  (e: 'close'): void\n  (e: 'newTab'): void\n  (e: 'copyUrl'): void\n  (e: 'closeOtherTabs'): void\n}>()\n</script>\n\n<template>\n  <ScalarContextMenu triggerClass=\"overflow-hidden w-full\">\n    <template #trigger>\n      <ScalarTooltip\n        :content=\"`${isMacOS() ? '⌘' : '^'} ${hotkey}`\"\n        placement=\"bottom\">\n        <div\n          class=\"nav-item app-no-drag-region\"\n          :class=\"{ 'nav-item__active': active }\"\n          @click=\"$emit('click')\">\n          <div\n            class=\"nav-item-icon-copy flex flex-1 items-center justify-center gap-1.5\">\n            <LibraryIcon\n              v-if=\"isCollection\"\n              class=\"size-3.5 min-w-3.5 stroke-2\"\n              :src=\"icon\" />\n            <ScalarIcon\n              v-else\n              :icon=\"icon\"\n              size=\"xs\"\n              thickness=\"2.5\" />\n            <span class=\"custom-scroll nav-item-copy text-sm\">{{ label }}</span>\n          </div>\n          <button\n            class=\"nav-item-close\"\n            type=\"button\"\n            @click=\"$emit('close')\">\n            <ScalarIcon\n              icon=\"Close\"\n              thickness=\"1.75\" />\n          </button>\n        </div>\n      </ScalarTooltip>\n    </template>\n    <template #content>\n      <ScalarFloating placement=\"right-start\">\n        <template #floating>\n          <ScalarDropdownMenu class=\"scalar-app scalar-client\">\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('newTab')\">\n              <ScalarIcon\n                icon=\"AddTab\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              New Tab\n              <ScalarHotkey\n                class=\"bg-b-2 ml-auto\"\n                hotkey=\"T\" />\n            </ScalarDropdownButton>\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('copyUrl')\">\n              <ScalarIcon\n                icon=\"Link\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Copy URL\n            </ScalarDropdownButton>\n            <ScalarDropdownDivider />\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('close')\">\n              <ScalarIcon\n                icon=\"CloseTab\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Close Tab\n              <ScalarHotkey\n                class=\"bg-b-2 ml-auto\"\n                hotkey=\"W\" />\n            </ScalarDropdownButton>\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('closeOtherTabs')\">\n              <ScalarIcon\n                icon=\"CloseTabs\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Close Other Tabs\n            </ScalarDropdownButton>\n          </ScalarDropdownMenu>\n        </template>\n      </ScalarFloating>\n    </template>\n  </ScalarContextMenu>\n</template>\n\n<style scoped>\n.nav-item {\n  padding: 0 1rem;\n  cursor: pointer;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: var(--scalar-radius-lg);\n  background: var(--scalar-background-3);\n  border: var(--scalar-border-width) solid var(--scalar-background-2);\n  color: var(--scalar-color-3);\n  padding: 4.5px;\n  min-width: 0;\n  overflow: hidden;\n  position: relative;\n}\n.dark-mode .nav-item {\n  background: color-mix(in srgb, var(--scalar-background-2), transparent);\n}\n.nav-item-icon-copy {\n  max-width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  mask-image: linear-gradient(\n    to left,\n    transparent 0,\n    var(--scalar-background-2) 20px\n  );\n}\n.nav-item:hover .nav-item-icon-copy {\n  mask-image: linear-gradient(\n    to left,\n    transparent 20px,\n    var(--scalar-background-2) 40px\n  );\n}\n.nav-item-copy {\n  max-width: calc(100% - 20px);\n}\n.nav-item:hover {\n  color: var(--scalar-color-1);\n}\n.nav-item__active {\n  background-color: var(--scalar-background-1);\n  color: var(--scalar-color-1);\n  border-color: var(--scalar-border-color);\n}\n.dark-mode .nav-item__active {\n  background-color: var(--scalar-background-2);\n}\n.nav-item-close {\n  position: absolute;\n  right: 3px;\n  padding: 2px;\n  border-radius: var(--scalar-radius);\n  background: transparent;\n  max-width: 20px;\n  stroke-width: 1.5px;\n  color: var(--scalar-color-3);\n  margin-left: -20px;\n  opacity: 0;\n}\n.nav-item:hover .nav-item-close {\n  opacity: 1;\n}\n.nav-item-close:hover {\n  background-color: var(--scalar-background-4);\n}\n.nav-item__active .nav-item-close:hover {\n  background-color: var(--scalar-background-2);\n}\n</style>\n","<script setup lang=\"ts\">\nimport {\n  ScalarContextMenu,\n  ScalarDropdownButton,\n  ScalarDropdownMenu,\n  ScalarFloating,\n  ScalarHotkey,\n  ScalarIcon,\n  type Icon,\n} from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { ROUTES } from '@/constants'\nimport type { HotKeyEvent } from '@/libs'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport TopNavItem from './TopNavItem.vue'\n\nconst props = defineProps<{\n  openNewTab: { name: string; uid: string } | null\n}>()\nconst { activeRequest, activeCollection } = useActiveEntities()\nconst router = useRouter()\nconst { events } = useWorkspace()\nconst { copyToClipboard } = useClipboard()\n\n/** Nav Items list */\nconst topNavItems = reactive([\n  {\n    label: '',\n    path: '',\n    icon: 'Add' as Icon | Collection['x-scalar-icon'],\n    isCollection: false,\n  },\n])\nconst activeNavItemIdx = ref(0)\nconst activeNavItemIdxValue = computed(() => activeNavItemIdx.value)\n\n/**\n * Check if the current route is a collection\n */\nconst isCollection = computed(() => {\n  return router.currentRoute.value.name?.toString().startsWith('collection.')\n})\n\n/**\n * Logic to handle adding a nav item\n * based on the current route\n */\nfunction handleNavLabelAdd() {\n  // Collection\n  if (isCollection.value) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeCollection.value?.info?.title || 'Untitled Collection',\n      path: router.currentRoute.value.path,\n      icon: activeCollection.value?.['x-scalar-icon'] || 'Collection',\n      isCollection: true,\n    }\n\n    return\n  }\n\n  // Request\n  if (router.currentRoute.value.name?.toString().startsWith('request')) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeRequest.value?.summary || '',\n      path: router.currentRoute.value.path,\n      icon: 'ExternalLink',\n      isCollection: false,\n    }\n\n    return\n  }\n\n  // Something from the sidebar\n  const activeRoute = ROUTES.find((route) => {\n    return route.to.name.startsWith(\n      router.currentRoute.value.name?.toString() ?? '',\n    )\n  })\n\n  if (activeRoute) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeRoute.displayName,\n      path: router.currentRoute.value.path,\n      icon: activeRoute.icon,\n      isCollection: false,\n    }\n\n    return\n  }\n}\n\nfunction handleNavRoute() {\n  const path = topNavItems[activeNavItemIdx.value]?.path\n  if (path) {\n    router.push(path)\n  }\n}\n\n/**\n * adding a nav item sets the new index and nav item\n * based on the route\n */\nfunction addNavItem() {\n  topNavItems.push({\n    label: '',\n    path: '',\n    icon: 'Add' as Icon,\n    isCollection: false,\n  })\n  activeNavItemIdx.value = topNavItems.length - 1\n  handleNavLabelAdd()\n}\n\nfunction setNavItemIdx(idx: number) {\n  activeNavItemIdx.value = idx\n  handleNavRoute()\n}\n\n// when the route changes we need update the active nav item\nwatch(\n  () => router.currentRoute.value.path,\n  () => {\n    handleNavLabelAdd()\n  },\n  { immediate: true },\n)\n\nfunction removeNavItem(idx: number) {\n  topNavItems.splice(idx, 1)\n  activeNavItemIdx.value = Math.min(\n    activeNavItemIdx.value,\n    topNavItems.length - 1,\n  )\n  handleNavRoute()\n}\n\nconst copyUrl = async (idx: number) => {\n  if (!topNavItems[idx]?.path) {\n    return\n  }\n\n  const fullUrl = new URL(window.location.href)\n  fullUrl.pathname = topNavItems[idx].path\n  await copyToClipboard(fullUrl.toString())\n}\n\nconst closeOtherTabs = (idx: number) => {\n  topNavItems.splice(0, idx)\n  topNavItems.splice(1)\n  activeNavItemIdx.value = 0\n  handleNavRoute()\n}\n\n/** Handle hotkeys */\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (!event) {\n    return\n  }\n  if (event.addTopNav) {\n    addNavItem()\n  }\n  if (event.closeTopNav) {\n    removeNavItem(activeNavItemIdx.value)\n  }\n  if (event.navigateTopNavLeft) {\n    setNavItemIdx(Math.max(activeNavItemIdx.value - 1, 0))\n  }\n  if (event.navigateTopNavRight) {\n    setNavItemIdx(Math.min(activeNavItemIdx.value + 1, topNavItems.length - 1))\n  }\n  if (event.jumpToTab) {\n    const tabIndex = Number(event.jumpToTab.key) - 1\n    if (tabIndex >= 0 && tabIndex < topNavItems.length) {\n      setNavItemIdx(tabIndex)\n    }\n  }\n  if (event.jumpToLastTab) {\n    setNavItemIdx(topNavItems.length - 1)\n  }\n}\n\nconst addTopNavTab = (item: { name: string; uid: string }) => {\n  topNavItems.push({\n    label: item.name,\n    path: item.uid,\n    icon: 'ExternalLink',\n    isCollection: false,\n  })\n}\n\nwatch(\n  () => props.openNewTab,\n  (openNewTab) => {\n    if (openNewTab) {\n      addTopNavTab(openNewTab)\n    }\n  },\n  { immediate: true },\n)\n\nonMounted(() => events.hotKeys.on(handleHotKey))\nonBeforeUnmount(() => events.hotKeys.off(handleHotKey))\n</script>\n<template>\n  <nav class=\"mac:pl-[72px] t-app__top-nav relative flex h-10 pl-2\">\n    <!-- Add a draggable overlay -->\n    <div class=\"app-drag-region absolute inset-0\" />\n    <div\n      class=\"relative flex h-10 flex-1 items-center gap-1.5 overflow-hidden pr-2.5 text-base font-medium\">\n      <template v-if=\"topNavItems.length === 1\">\n        <div class=\"h-full w-full overflow-hidden\">\n          <ScalarContextMenu\n            triggerClass=\"flex custom-scroll gap-1.5 h-full items-center justify-center w-full whitespace-nowrap\">\n            <template #trigger>\n              <LibraryIcon\n                v-if=\"isCollection\"\n                class=\"size-3.5 min-w-3.5 stroke-2\"\n                :src=\"activeCollection?.['x-scalar-icon'] || 'Collection'\" />\n              <ScalarIcon\n                v-else-if=\"topNavItems[0]?.icon\"\n                :icon=\"topNavItems[0]?.icon as Icon\"\n                size=\"xs\"\n                thickness=\"2.5\" />\n              <span>{{ topNavItems[0]?.label }}</span>\n            </template>\n            <template #content>\n              <ScalarFloating placement=\"right-start\">\n                <template #floating>\n                  <ScalarDropdownMenu class=\"scalar-app scalar-client\">\n                    <ScalarDropdownButton\n                      class=\"flex items-center gap-1.5\"\n                      @click=\"addNavItem\">\n                      <ScalarIcon\n                        icon=\"AddTab\"\n                        size=\"sm\"\n                        thickness=\"1.5\" />\n                      New Tab\n                      <ScalarHotkey\n                        class=\"bg-b-2 ml-auto\"\n                        hotkey=\"T\" />\n                    </ScalarDropdownButton>\n                    <ScalarDropdownButton\n                      class=\"flex items-center gap-1.5\"\n                      @click=\"copyUrl(activeNavItemIdxValue)\">\n                      <ScalarIcon\n                        icon=\"Link\"\n                        size=\"sm\"\n                        thickness=\"1.5\" />\n                      Copy URL\n                    </ScalarDropdownButton>\n                  </ScalarDropdownMenu>\n                </template>\n              </ScalarFloating>\n            </template>\n          </ScalarContextMenu>\n        </div>\n      </template>\n      <template v-else>\n        <TopNavItem\n          v-for=\"(topNavItem, index) in topNavItems\"\n          :key=\"topNavItem.path\"\n          :active=\"index === activeNavItemIdxValue\"\n          :hotkey=\"(index + 1).toString()\"\n          :icon=\"\n            topNavItem.isCollection\n              ? ((activeCollection?.['x-scalar-icon'] || 'Collection') as Icon)\n              : (topNavItem.icon as Icon)\n          \"\n          :isCollection=\"topNavItem.isCollection || false\"\n          :label=\"topNavItem.label\"\n          @click=\"setNavItemIdx(index)\"\n          @close=\"removeNavItem(index)\"\n          @closeOtherTabs=\"closeOtherTabs(index)\"\n          @copyUrl=\"copyUrl(index)\"\n          @newTab=\"addNavItem\" />\n      </template>\n      <button\n        class=\"text-c-3 hover:bg-b-3 app-no-drag-region rounded p-1.5\"\n        type=\"button\"\n        @click=\"addNavItem\">\n        <ScalarIcon\n          icon=\"Add\"\n          size=\"sm\"\n          thickness=\"2.5\" />\n      </button>\n    </div>\n  </nav>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarContextMenu,\n  ScalarDropdownButton,\n  ScalarDropdownMenu,\n  ScalarFloating,\n  ScalarHotkey,\n  ScalarIcon,\n  type Icon,\n} from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { ROUTES } from '@/constants'\nimport type { HotKeyEvent } from '@/libs'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport TopNavItem from './TopNavItem.vue'\n\nconst props = defineProps<{\n  openNewTab: { name: string; uid: string } | null\n}>()\nconst { activeRequest, activeCollection } = useActiveEntities()\nconst router = useRouter()\nconst { events } = useWorkspace()\nconst { copyToClipboard } = useClipboard()\n\n/** Nav Items list */\nconst topNavItems = reactive([\n  {\n    label: '',\n    path: '',\n    icon: 'Add' as Icon | Collection['x-scalar-icon'],\n    isCollection: false,\n  },\n])\nconst activeNavItemIdx = ref(0)\nconst activeNavItemIdxValue = computed(() => activeNavItemIdx.value)\n\n/**\n * Check if the current route is a collection\n */\nconst isCollection = computed(() => {\n  return router.currentRoute.value.name?.toString().startsWith('collection.')\n})\n\n/**\n * Logic to handle adding a nav item\n * based on the current route\n */\nfunction handleNavLabelAdd() {\n  // Collection\n  if (isCollection.value) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeCollection.value?.info?.title || 'Untitled Collection',\n      path: router.currentRoute.value.path,\n      icon: activeCollection.value?.['x-scalar-icon'] || 'Collection',\n      isCollection: true,\n    }\n\n    return\n  }\n\n  // Request\n  if (router.currentRoute.value.name?.toString().startsWith('request')) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeRequest.value?.summary || '',\n      path: router.currentRoute.value.path,\n      icon: 'ExternalLink',\n      isCollection: false,\n    }\n\n    return\n  }\n\n  // Something from the sidebar\n  const activeRoute = ROUTES.find((route) => {\n    return route.to.name.startsWith(\n      router.currentRoute.value.name?.toString() ?? '',\n    )\n  })\n\n  if (activeRoute) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeRoute.displayName,\n      path: router.currentRoute.value.path,\n      icon: activeRoute.icon,\n      isCollection: false,\n    }\n\n    return\n  }\n}\n\nfunction handleNavRoute() {\n  const path = topNavItems[activeNavItemIdx.value]?.path\n  if (path) {\n    router.push(path)\n  }\n}\n\n/**\n * adding a nav item sets the new index and nav item\n * based on the route\n */\nfunction addNavItem() {\n  topNavItems.push({\n    label: '',\n    path: '',\n    icon: 'Add' as Icon,\n    isCollection: false,\n  })\n  activeNavItemIdx.value = topNavItems.length - 1\n  handleNavLabelAdd()\n}\n\nfunction setNavItemIdx(idx: number) {\n  activeNavItemIdx.value = idx\n  handleNavRoute()\n}\n\n// when the route changes we need update the active nav item\nwatch(\n  () => router.currentRoute.value.path,\n  () => {\n    handleNavLabelAdd()\n  },\n  { immediate: true },\n)\n\nfunction removeNavItem(idx: number) {\n  topNavItems.splice(idx, 1)\n  activeNavItemIdx.value = Math.min(\n    activeNavItemIdx.value,\n    topNavItems.length - 1,\n  )\n  handleNavRoute()\n}\n\nconst copyUrl = async (idx: number) => {\n  if (!topNavItems[idx]?.path) {\n    return\n  }\n\n  const fullUrl = new URL(window.location.href)\n  fullUrl.pathname = topNavItems[idx].path\n  await copyToClipboard(fullUrl.toString())\n}\n\nconst closeOtherTabs = (idx: number) => {\n  topNavItems.splice(0, idx)\n  topNavItems.splice(1)\n  activeNavItemIdx.value = 0\n  handleNavRoute()\n}\n\n/** Handle hotkeys */\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (!event) {\n    return\n  }\n  if (event.addTopNav) {\n    addNavItem()\n  }\n  if (event.closeTopNav) {\n    removeNavItem(activeNavItemIdx.value)\n  }\n  if (event.navigateTopNavLeft) {\n    setNavItemIdx(Math.max(activeNavItemIdx.value - 1, 0))\n  }\n  if (event.navigateTopNavRight) {\n    setNavItemIdx(Math.min(activeNavItemIdx.value + 1, topNavItems.length - 1))\n  }\n  if (event.jumpToTab) {\n    const tabIndex = Number(event.jumpToTab.key) - 1\n    if (tabIndex >= 0 && tabIndex < topNavItems.length) {\n      setNavItemIdx(tabIndex)\n    }\n  }\n  if (event.jumpToLastTab) {\n    setNavItemIdx(topNavItems.length - 1)\n  }\n}\n\nconst addTopNavTab = (item: { name: string; uid: string }) => {\n  topNavItems.push({\n    label: item.name,\n    path: item.uid,\n    icon: 'ExternalLink',\n    isCollection: false,\n  })\n}\n\nwatch(\n  () => props.openNewTab,\n  (openNewTab) => {\n    if (openNewTab) {\n      addTopNavTab(openNewTab)\n    }\n  },\n  { immediate: true },\n)\n\nonMounted(() => events.hotKeys.on(handleHotKey))\nonBeforeUnmount(() => events.hotKeys.off(handleHotKey))\n</script>\n<template>\n  <nav class=\"mac:pl-[72px] t-app__top-nav relative flex h-10 pl-2\">\n    <!-- Add a draggable overlay -->\n    <div class=\"app-drag-region absolute inset-0\" />\n    <div\n      class=\"relative flex h-10 flex-1 items-center gap-1.5 overflow-hidden pr-2.5 text-base font-medium\">\n      <template v-if=\"topNavItems.length === 1\">\n        <div class=\"h-full w-full overflow-hidden\">\n          <ScalarContextMenu\n            triggerClass=\"flex custom-scroll gap-1.5 h-full items-center justify-center w-full whitespace-nowrap\">\n            <template #trigger>\n              <LibraryIcon\n                v-if=\"isCollection\"\n                class=\"size-3.5 min-w-3.5 stroke-2\"\n                :src=\"activeCollection?.['x-scalar-icon'] || 'Collection'\" />\n              <ScalarIcon\n                v-else-if=\"topNavItems[0]?.icon\"\n                :icon=\"topNavItems[0]?.icon as Icon\"\n                size=\"xs\"\n                thickness=\"2.5\" />\n              <span>{{ topNavItems[0]?.label }}</span>\n            </template>\n            <template #content>\n              <ScalarFloating placement=\"right-start\">\n                <template #floating>\n                  <ScalarDropdownMenu class=\"scalar-app scalar-client\">\n                    <ScalarDropdownButton\n                      class=\"flex items-center gap-1.5\"\n                      @click=\"addNavItem\">\n                      <ScalarIcon\n                        icon=\"AddTab\"\n                        size=\"sm\"\n                        thickness=\"1.5\" />\n                      New Tab\n                      <ScalarHotkey\n                        class=\"bg-b-2 ml-auto\"\n                        hotkey=\"T\" />\n                    </ScalarDropdownButton>\n                    <ScalarDropdownButton\n                      class=\"flex items-center gap-1.5\"\n                      @click=\"copyUrl(activeNavItemIdxValue)\">\n                      <ScalarIcon\n                        icon=\"Link\"\n                        size=\"sm\"\n                        thickness=\"1.5\" />\n                      Copy URL\n                    </ScalarDropdownButton>\n                  </ScalarDropdownMenu>\n                </template>\n              </ScalarFloating>\n            </template>\n          </ScalarContextMenu>\n        </div>\n      </template>\n      <template v-else>\n        <TopNavItem\n          v-for=\"(topNavItem, index) in topNavItems\"\n          :key=\"topNavItem.path\"\n          :active=\"index === activeNavItemIdxValue\"\n          :hotkey=\"(index + 1).toString()\"\n          :icon=\"\n            topNavItem.isCollection\n              ? ((activeCollection?.['x-scalar-icon'] || 'Collection') as Icon)\n              : (topNavItem.icon as Icon)\n          \"\n          :isCollection=\"topNavItem.isCollection || false\"\n          :label=\"topNavItem.label\"\n          @click=\"setNavItemIdx(index)\"\n          @close=\"removeNavItem(index)\"\n          @closeOtherTabs=\"closeOtherTabs(index)\"\n          @copyUrl=\"copyUrl(index)\"\n          @newTab=\"addNavItem\" />\n      </template>\n      <button\n        class=\"text-c-3 hover:bg-b-3 app-no-drag-region rounded p-1.5\"\n        type=\"button\"\n        @click=\"addNavItem\">\n        <ScalarIcon\n          icon=\"Add\"\n          size=\"sm\"\n          thickness=\"2.5\" />\n      </button>\n    </div>\n  </nav>\n</template>\n","import type { HotKeyConfig } from '@scalar/oas-utils/entities/workspace'\n\n/**\n * Default set of keybindings for the client app\n */\nexport const APP_HOTKEYS: HotKeyConfig = {\n  t: { event: 'addTopNav', modifiers: ['default'] },\n  w: { event: 'closeTopNav', modifiers: ['default'] },\n  ArrowLeft: { event: 'navigateTopNavLeft', modifiers: ['default', 'Alt'] },\n  ArrowRight: { event: 'navigateTopNavRight', modifiers: ['default', 'Alt'] },\n  l: { event: 'focusAddressBar', modifiers: ['default'] },\n  1: { event: 'jumpToTab', modifiers: ['default'] },\n  2: { event: 'jumpToTab', modifiers: ['default'] },\n  3: { event: 'jumpToTab', modifiers: ['default'] },\n  4: { event: 'jumpToTab', modifiers: ['default'] },\n  5: { event: 'jumpToTab', modifiers: ['default'] },\n  6: { event: 'jumpToTab', modifiers: ['default'] },\n  7: { event: 'jumpToTab', modifiers: ['default'] },\n  8: { event: 'jumpToTab', modifiers: ['default'] },\n  9: { event: 'jumpToLastTab', modifiers: ['default'] },\n  f: { event: 'focusRequestSearch', modifiers: ['default'] },\n  n: { event: 'createNew', modifiers: ['default'] },\n}\n","<script setup lang=\"ts\">\n// TODO: Disabled until we polished the UI.\n// import { ImportCollectionListener } from '@/components/ImportCollection'\nimport {\n  addScalarClassesToHeadless,\n  ScalarTeleportRoot,\n} from '@scalar/components'\nimport { getThemeStyles } from '@scalar/themes'\nimport { useBreakpoints } from '@scalar/use-hooks/useBreakpoints'\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport {\n  computed,\n  onBeforeMount,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { RouterView } from 'vue-router'\n\nimport TopNav from '@/components/TopNav/TopNav.vue'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport MainLayout from '@/layouts/App/MainLayout.vue'\nimport { DEFAULT_HOTKEYS, handleHotKeyDown, type HotKeyEvent } from '@/libs'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport { APP_HOTKEYS } from './hotkeys'\n\ndefineEmits<{\n  (e: 'newTab', item: { name: string; uid: string }): void\n}>()\n\nconst hotKeys = { ...DEFAULT_HOTKEYS, ...APP_HOTKEYS }\n\nconst newTab = ref<{ name: string; uid: string } | null>(null)\n\nconst handleNewTab = (item: { name: string; uid: string }) => {\n  newTab.value = item\n}\n\n// Initialize color mode state globally\nuseColorMode()\n\nconst { activeWorkspace } = useActiveEntities()\nconst { events } = useWorkspace()\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n/** Handles the hotkey events, we will pass in custom hotkeys here */\nconst handleKeyDown = (ev: KeyboardEvent) =>\n  handleHotKeyDown(ev, events.hotKeys, { hotKeys })\n\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (!event) {\n    return\n  }\n\n  // We prevent default on open command so we can use it on the web\n  if (event.openCommandPalette) {\n    event.openCommandPalette.preventDefault()\n    events.commandPalette.emit()\n  }\n}\n\n// Hotkey listeners\nonMounted(() => {\n  window.addEventListener('keydown', handleKeyDown)\n  events.hotKeys.on(handleHotKey)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keydown', handleKeyDown)\n  events.hotKeys.off(handleHotKey)\n})\n\nconst { mediaQueries } = useBreakpoints()\nconst { setSidebarOpen } = useSidebar()\n\n// Single watcher instance for handling responsive behavior\nwatch(mediaQueries.xl, setSidebarOpen, {\n  immediate: true,\n})\n\nconst themeStyleTag = computed(\n  () =>\n    activeWorkspace.value &&\n    `<style>${getThemeStyles(activeWorkspace.value?.themeId)}</style>`,\n)\n</script>\n<template>\n  <ScalarTeleportRoot>\n    <div\n      id=\"scalar-client-app\"\n      class=\"contents\">\n      <!-- Listen for paste and drop events, and look for `url` query parameters to import collections -->\n      <!-- <ImportCollectionListener> -->\n      <div v-html=\"themeStyleTag\" />\n      <TopNav :openNewTab=\"newTab\" />\n\n      <!-- Ensure we have the workspace loaded from localStorage above -->\n      <MainLayout v-if=\"activeWorkspace?.uid\">\n        <RouterView\n          v-slot=\"{ Component }\"\n          @newTab=\"handleNewTab\">\n          <keep-alive>\n            <component :is=\"Component\" />\n          </keep-alive>\n        </RouterView>\n      </MainLayout>\n\n      <ScalarToasts />\n      <!-- </ImportCollectionListener> -->\n    </div>\n  </ScalarTeleportRoot>\n</template>\n<style>\n#scalar-client {\n  display: flex;\n  flex-direction: column;\n  height: 100dvh;\n  width: 100dvw;\n  position: relative;\n  background-color: var(--scalar-background-2);\n}\n.dark-mode #scalar-client {\n  background-color: color-mix(in srgb, var(--scalar-background-1) 65%, black);\n}\n</style>\n","<script setup lang=\"ts\">\n// TODO: Disabled until we polished the UI.\n// import { ImportCollectionListener } from '@/components/ImportCollection'\nimport {\n  addScalarClassesToHeadless,\n  ScalarTeleportRoot,\n} from '@scalar/components'\nimport { getThemeStyles } from '@scalar/themes'\nimport { useBreakpoints } from '@scalar/use-hooks/useBreakpoints'\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport {\n  computed,\n  onBeforeMount,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { RouterView } from 'vue-router'\n\nimport TopNav from '@/components/TopNav/TopNav.vue'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport MainLayout from '@/layouts/App/MainLayout.vue'\nimport { DEFAULT_HOTKEYS, handleHotKeyDown, type HotKeyEvent } from '@/libs'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport { APP_HOTKEYS } from './hotkeys'\n\ndefineEmits<{\n  (e: 'newTab', item: { name: string; uid: string }): void\n}>()\n\nconst hotKeys = { ...DEFAULT_HOTKEYS, ...APP_HOTKEYS }\n\nconst newTab = ref<{ name: string; uid: string } | null>(null)\n\nconst handleNewTab = (item: { name: string; uid: string }) => {\n  newTab.value = item\n}\n\n// Initialize color mode state globally\nuseColorMode()\n\nconst { activeWorkspace } = useActiveEntities()\nconst { events } = useWorkspace()\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n/** Handles the hotkey events, we will pass in custom hotkeys here */\nconst handleKeyDown = (ev: KeyboardEvent) =>\n  handleHotKeyDown(ev, events.hotKeys, { hotKeys })\n\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (!event) {\n    return\n  }\n\n  // We prevent default on open command so we can use it on the web\n  if (event.openCommandPalette) {\n    event.openCommandPalette.preventDefault()\n    events.commandPalette.emit()\n  }\n}\n\n// Hotkey listeners\nonMounted(() => {\n  window.addEventListener('keydown', handleKeyDown)\n  events.hotKeys.on(handleHotKey)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keydown', handleKeyDown)\n  events.hotKeys.off(handleHotKey)\n})\n\nconst { mediaQueries } = useBreakpoints()\nconst { setSidebarOpen } = useSidebar()\n\n// Single watcher instance for handling responsive behavior\nwatch(mediaQueries.xl, setSidebarOpen, {\n  immediate: true,\n})\n\nconst themeStyleTag = computed(\n  () =>\n    activeWorkspace.value &&\n    `<style>${getThemeStyles(activeWorkspace.value?.themeId)}</style>`,\n)\n</script>\n<template>\n  <ScalarTeleportRoot>\n    <div\n      id=\"scalar-client-app\"\n      class=\"contents\">\n      <!-- Listen for paste and drop events, and look for `url` query parameters to import collections -->\n      <!-- <ImportCollectionListener> -->\n      <div v-html=\"themeStyleTag\" />\n      <TopNav :openNewTab=\"newTab\" />\n\n      <!-- Ensure we have the workspace loaded from localStorage above -->\n      <MainLayout v-if=\"activeWorkspace?.uid\">\n        <RouterView\n          v-slot=\"{ Component }\"\n          @newTab=\"handleNewTab\">\n          <keep-alive>\n            <component :is=\"Component\" />\n          </keep-alive>\n        </RouterView>\n      </MainLayout>\n\n      <ScalarToasts />\n      <!-- </ImportCollectionListener> -->\n    </div>\n  </ScalarTeleportRoot>\n</template>\n<style>\n#scalar-client {\n  display: flex;\n  flex-direction: column;\n  height: 100dvh;\n  width: 100dvw;\n  position: relative;\n  background-color: var(--scalar-background-2);\n}\n.dark-mode #scalar-client {\n  background-color: color-mix(in srgb, var(--scalar-background-1) 65%, black);\n}\n</style>\n","import type { ApiClientConfiguration } from '@scalar/types/api-reference'\nimport { createRouter, createWebHistory } from 'vue-router'\n\nimport { analytics } from '@/analytics'\nimport { createApiClient } from '@/libs'\nimport { routes, saveActiveWorkspace } from '@/routes'\n\nimport ApiClientApp from './ApiClientApp.vue'\n\n/**\n * Mount the full-blown API Client modal to a given element.\n */\nexport const createApiClientApp = async (\n  /** Element to mount the references to */\n  el: HTMLElement | null,\n  /** Configuration object for API client */\n  configuration: Partial<ApiClientConfiguration> = {},\n  /**\n   * Will attempt to mount the references immediately\n   * For SSR this may need to be blocked and done client side\n   */\n  mountOnInitialize = true,\n) => {\n  const router = createRouter({\n    history: createWebHistory(),\n    routes,\n  })\n\n  const client = createApiClient({\n    el,\n    appComponent: ApiClientApp,\n    configuration: configuration,\n    mountOnInitialize,\n    router,\n    layout: 'desktop',\n  })\n\n  const { importSpecFile, importSpecFromUrl } = client.store\n\n  router.afterEach((to, from) => {\n    if (configuration.telemetry) {\n      analytics?.capture('page-view', {\n        hostname: window.location.hostname,\n        to: to.path, // capture path excluding query params\n        from: from.path,\n      })\n    }\n\n    saveActiveWorkspace(to)\n  })\n\n  // Import the spec if needed\n  if (configuration.url) {\n    await importSpecFromUrl(configuration.url, 'default', {\n      proxyUrl: configuration.proxyUrl,\n    })\n  } else if (configuration.content) {\n    await importSpecFile(configuration.content, 'default')\n  }\n\n  return {\n    client,\n    router,\n  }\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { T as PathId, g as getEnvColor, h as parseEnvVariables, w as useActiveEntities } from "./store-DaPoVtIS.js";
+import { T as PathId, g as getEnvColor, h as parseEnvVariables, w as useActiveEntities } from "./store-DnlAQK5d.js";
 import { a as useLayout } from "./useSidebar-DLTwHDI-.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
 import { Fragment, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, h, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, toRef, unref, useAttrs, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
@@ -691,4 +691,4 @@ var CodeInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 //#endregion
 export { DataTableInputSelect_default as n, CodeInput_default as t };
 
-//# sourceMappingURL=CodeInput-BN7uw3Bh.js.map
+//# sourceMappingURL=CodeInput-BTN8cC5h.js.map