@scalar/api-client 2.38.3 → 2.39.0

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBar.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressBar.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * AddressBar component\n * This component is used to display the address bar for the operation block\n * It is used to display the path, method, server, and history for the operation\n */\nexport default {\n  name: 'AddressBar',\n}\nexport type AddressBarProps = {\n  /** Current request path */\n  path: string\n  /** Current request method */\n  method: HttpMethodType\n  /** Currently selected server */\n  server: ServerObject | null\n  /** Server list available for operation/document */\n  servers: ServerObject[]\n  /** List of request history */\n  history: History[]\n  /** Client layout */\n  layout: ClientLayout\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n  /** Environment */\n  environment: XScalarEnvironment\n  /** Meta information for the server */\n  serverMeta: ServerMeta\n}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarWrappingText,\n} from '@scalar/components'\nimport { REQUEST_METHODS } from '@scalar/helpers/http/http-info'\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconCopy, ScalarIconWarningCircle } from '@scalar/icons'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport type {\n  ApiReferenceEvents,\n  ServerMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  useTemplateRef,\n} from 'vue'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { type ClientLayout } from '@/hooks'\nimport { getResolvedUrl } from '@/v2/blocks/operation-block/helpers/get-resolved-url'\nimport { useLoadingAnimation } from '@/v2/blocks/scalar-address-bar-block/hooks/use-loading-animation'\nimport { CodeInput } from '@/v2/components/code-input'\nimport { ServerDropdown } from '@/v2/components/server'\n\nimport AddressBarHistory, { type History } from './AddressBarHistory.vue'\n\nconst {\n  path,\n  method,\n  layout,\n  eventBus,\n  history,\n  server,\n  servers,\n  environment,\n  serverMeta,\n} = defineProps<AddressBarProps>()\n\nconst emit = defineEmits<{\n  /** Execute the current operation example */\n  (e: 'execute'): void\n  /** Select a request history item by index */\n  (e: 'select:history:item', payload: { index: number }): void\n}>()\n\nconst id = useId()\nconst { percentage, startLoading, stopLoading, isLoading } =\n  useLoadingAnimation()\n\n/** Calculate the style for the address bar */\nconst style = computed(() => ({\n  backgroundColor: `color-mix(in srgb, transparent 90%, ${REQUEST_METHODS[method].colorVar})`,\n  transform: `translate3d(-${percentage.value}%,0,0)`,\n}))\n\nconst pathConflict = ref<string | null>(null)\nconst methodConflict = ref<HttpMethodType | null>(null)\n\n/** Whether there is a path or method conflict */\nconst hasConflict = computed(() => methodConflict.value || pathConflict.value)\n\n/** Emit the path/method update event with conflict handling */\nconst emitPathMethodUpdate = (\n  targetMethod: HttpMethodType,\n  targetPath: string,\n  /** We only want to debounce when the path changes */\n  emitOptions?: { debounceKey?: string },\n): void => {\n  const position = addressBarRef.value?.cursorPosition()\n  eventBus.emit(\n    'operation:update:pathMethod',\n    {\n      meta: { method, path },\n      payload: { method: targetMethod, path: targetPath },\n      callback: (status) => {\n        // Clear conflicts if the operation was successful or no change was made\n        if (status === 'success' || status === 'no-change') {\n          methodConflict.value = null\n          pathConflict.value = null\n        }\n        if (status === 'success') {\n          eventBus.emit('ui:focus:address-bar', { position })\n        }\n        // Otherwise set the conflict if needed\n        else if (status === 'conflict') {\n          if (targetMethod !== method) {\n            methodConflict.value = targetMethod\n          }\n          if (targetPath !== path) {\n            pathConflict.value = targetPath\n          }\n        }\n      },\n    },\n    emitOptions,\n  )\n}\n\n/** Update the operation's HTTP method, handling conflicts */\nconst handleMethodChange = (newMethod: HttpMethodType): void =>\n  emitPathMethodUpdate(newMethod, pathConflict.value ?? path)\n\n/** Update the operation's path, handling conflicts */\nconst handlePathChange = (newPath: string): void => {\n  const normalizedPath = newPath.startsWith('/') ? newPath : `/${newPath}`\n  emitPathMethodUpdate(methodConflict.value ?? method, normalizedPath, {\n    debounceKey: `operation:update:pathMethod-${path}-${method}`,\n  })\n}\n\n/** Handle focus events */\nconst sendButtonRef = useTemplateRef('sendButtonRef')\nconst addressBarRef = useTemplateRef('addressBarRef')\nconst handleFocusSendButton = () => sendButtonRef.value?.$el?.focus()\n\nconst handleFocusAddressBar = (\n  payload: ApiReferenceEvents['ui:focus:address-bar'],\n) => {\n  // If it already has focus we just propagate native behavior which should focus the browser address bar\n  if (addressBarRef.value?.isFocused && layout !== 'desktop') {\n    return\n  }\n\n  const position = payload && 'position' in payload ? payload.position : 'end'\n  addressBarRef.value?.focus(position)\n\n  if (payload && 'event' in payload) {\n    payload.event.preventDefault()\n  }\n}\n\nonMounted(() => {\n  eventBus.on('ui:focus:address-bar', handleFocusAddressBar)\n  eventBus.on('ui:focus:send-button', handleFocusSendButton)\n  eventBus.on('hooks:on:request:sent', startLoading)\n  eventBus.on('hooks:on:request:complete', stopLoading)\n})\n\nonBeforeUnmount(() => {\n  eventBus.off('ui:focus:address-bar', handleFocusAddressBar)\n  eventBus.off('ui:focus:send-button', handleFocusSendButton)\n  eventBus.off('hooks:on:request:sent', startLoading)\n  eventBus.off('hooks:on:request:complete', stopLoading)\n\n  // Stop the animation when the component is unmounted\n  // This is to prevent the animation from continuing after the component is unmounted\n  stopLoading()\n})\n\nconst { copyToClipboard } = useClipboard()\n\nconst copyUrl = async () => {\n  await copyToClipboard(\n    getResolvedUrl({ environment, server, path, pathVariables: {} }),\n  )\n}\n\nconst isServerDropdownOpen = ref(false)\nconst isHistoryDropdownOpen = ref(false)\n\n/** Whether either dropdown is open */\nconst isDropdownOpen = computed(\n  () => isServerDropdownOpen.value || isHistoryDropdownOpen.value,\n)\n\nconst navigateToServersPage = () => {\n  if (serverMeta.type === 'operation') {\n    return eventBus.emit('ui:navigate', {\n      page: 'operation',\n      path: 'servers',\n      operationPath: serverMeta.path,\n      method: serverMeta.method,\n    })\n  }\n  return eventBus.emit('ui:navigate', {\n    page: 'document',\n    path: 'servers',\n  })\n}\n\ndefineExpose({\n  methodConflict,\n  pathConflict,\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-0 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      :class=\"{\n        'outline-c-danger outline': hasConflict,\n        'rounded-b-none': isDropdownOpen,\n      }\">\n      <div\n        class=\"pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border\"\n        :class=\"{\n          'rounded-b-none': isDropdownOpen,\n        }\">\n        <div\n          class=\"absolute top-0 left-0 h-full w-full\"\n          :style />\n      </div>\n      <div class=\"flex gap-1\">\n        <HttpMethod\n          :isEditable=\"layout !== 'modal'\"\n          isSquare\n          :method=\"methodConflict ?? method\"\n          teleport\n          @change=\"handleMethodChange\" />\n      </div>\n\n      <div\n        class=\"scroll-timeline-x scroll-timeline-x-hidden relative flex w-full bg-blend-normal\">\n        <!-- Servers -->\n        <ServerDropdown\n          v-if=\"servers.length\"\n          :layout=\"layout\"\n          :meta=\"serverMeta\"\n          :server=\"server\"\n          :servers=\"servers\"\n          :target=\"id\"\n          @update:open=\"(value) => (isServerDropdownOpen = value)\"\n          @update:selectedServer=\"\n            (payload) => eventBus.emit('server:update:selected', payload)\n          \"\n          @update:servers=\"navigateToServersPage\"\n          @update:variable=\"\n            (payload) => eventBus.emit('server:update:variables', payload)\n          \" />\n\n        <div class=\"fade-left\" />\n        <!-- Path + URL + env vars -->\n        <CodeInput\n          ref=\"addressBarRef\"\n          alwaysEmitChange\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          :environment=\"environment\"\n          importCurl\n          :layout=\"layout\"\n          :modelValue=\"path\"\n          :placeholder=\"server ? '' : 'Enter a URL'\"\n          server\n          @submit=\"emit('execute')\"\n          @update:modelValue=\"handlePathChange\" />\n        <div class=\"fade-right\" />\n      </div>\n\n      <!-- Copy url button -->\n      <ScalarButton\n        class=\"hover:bg-b-3 mx-1\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click=\"copyUrl\">\n        <ScalarIconCopy />\n        <span class=\"sr-only\">Copy URL</span>\n      </ScalarButton>\n\n      <AddressBarHistory\n        :history=\"history\"\n        :target=\"id\"\n        @select:history:item=\"(payload) => emit('select:history:item', payload)\"\n        @update:open=\"(value) => (isHistoryDropdownOpen = value)\" />\n      <!-- Error message -->\n      <div\n        v-if=\"hasConflict\"\n        class=\"absolute inset-x-0 top-[calc(100%+4px)] flex flex-col items-center rounded px-6\">\n        <div\n          class=\"text-c-danger bg-b-danger border-c-danger flex items-center gap-1 rounded border p-1\">\n          <ScalarIconWarningCircle size=\"sm\" />\n          <div class=\"min-w-0 flex-1\">\n            A\n            <em>{{ methodConflict?.toUpperCase() ?? method.toUpperCase() }}</em>\n            request to\n            <ScalarWrappingText :text=\"pathConflict ?? path\" />\n            already exists in this document\n          </div>\n        </div>\n      </div>\n      <ScalarButton\n        ref=\"sendButtonRef\"\n        class=\"relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold\"\n        :disabled=\"isLoading\"\n        @click=\"emit('execute')\">\n        <span\n          aria-hidden=\"true\"\n          class=\"inline-flex items-center gap-1\">\n          <ScalarIcon\n            class=\"relative shrink-0 fill-current\"\n            icon=\"Play\"\n            size=\"xs\" />\n          <span class=\"text-xxs hidden lg:flex\">Send</span>\n        </span>\n        <span class=\"sr-only\">\n          Send {{ method }} request to {{ server?.url ?? '' }}{{ 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-width: 1px;\n  outline-style: solid;\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":""}

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBar.vue.script.js

@@ -0,0 +1,248 @@
+import HttpMethod_default from "../../../../components/HttpMethod/HttpMethod.vue.js";
+import { getResolvedUrl } from "../../operation-block/helpers/get-resolved-url.js";
+import CodeInput_default from "../../../components/code-input/CodeInput.vue.js";
+import { useLoadingAnimation } from "../hooks/use-loading-animation.js";
+import ServerDropdown_default from "../../../components/server/ServerDropdown.vue.js";
+import AddressBarHistory_default from "./AddressBarHistory.vue.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, toDisplayString, unref, useId, useTemplateRef, withCtx } from "vue";
+import { ScalarButton, ScalarIcon, ScalarWrappingText } from "@scalar/components";
+import { useClipboard } from "@scalar/use-hooks/useClipboard";
+import { REQUEST_METHODS } from "@scalar/helpers/http/http-info";
+import { ScalarIconCopy, ScalarIconWarningCircle } from "@scalar/icons";
+//#region src/v2/blocks/scalar-address-bar-block/components/AddressBar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var _hoisted_2 = { class: "flex gap-1" };
+var _hoisted_3 = { class: "scroll-timeline-x scroll-timeline-x-hidden relative flex w-full bg-blend-normal" };
+var _hoisted_4 = {
+	key: 0,
+	class: "absolute inset-x-0 top-[calc(100%+4px)] flex flex-col items-center rounded px-6"
+};
+var _hoisted_5 = { class: "text-c-danger bg-b-danger border-c-danger flex items-center gap-1 rounded border p-1" };
+var _hoisted_6 = { class: "min-w-0 flex-1" };
+var _hoisted_7 = {
+	"aria-hidden": "true",
+	class: "inline-flex items-center gap-1"
+};
+var _hoisted_8 = { class: "sr-only" };
+var AddressBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "AddressBar",
+	props: {
+		path: {},
+		method: {},
+		server: {},
+		servers: {},
+		history: {},
+		layout: {},
+		eventBus: {},
+		environment: {},
+		serverMeta: {}
+	},
+	emits: ["execute", "select:history:item"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const id = useId();
+		const { percentage, startLoading, stopLoading, isLoading } = useLoadingAnimation();
+		/** Calculate the style for the address bar */
+		const style = computed(() => ({
+			backgroundColor: `color-mix(in srgb, transparent 90%, ${REQUEST_METHODS[__props.method].colorVar})`,
+			transform: `translate3d(-${percentage.value}%,0,0)`
+		}));
+		const pathConflict = ref(null);
+		const methodConflict = ref(null);
+		/** Whether there is a path or method conflict */
+		const hasConflict = computed(() => methodConflict.value || pathConflict.value);
+		/** Emit the path/method update event with conflict handling */
+		const emitPathMethodUpdate = (targetMethod, targetPath, emitOptions) => {
+			const position = addressBarRef.value?.cursorPosition();
+			__props.eventBus.emit("operation:update:pathMethod", {
+				meta: {
+					method: __props.method,
+					path: __props.path
+				},
+				payload: {
+					method: targetMethod,
+					path: targetPath
+				},
+				callback: (status) => {
+					if (status === "success" || status === "no-change") {
+						methodConflict.value = null;
+						pathConflict.value = null;
+					}
+					if (status === "success") __props.eventBus.emit("ui:focus:address-bar", { position });
+					else if (status === "conflict") {
+						if (targetMethod !== __props.method) methodConflict.value = targetMethod;
+						if (targetPath !== __props.path) pathConflict.value = targetPath;
+					}
+				}
+			}, emitOptions);
+		};
+		/** Update the operation's HTTP method, handling conflicts */
+		const handleMethodChange = (newMethod) => emitPathMethodUpdate(newMethod, pathConflict.value ?? __props.path);
+		/** Update the operation's path, handling conflicts */
+		const handlePathChange = (newPath) => {
+			const normalizedPath = newPath.startsWith("/") ? newPath : `/${newPath}`;
+			emitPathMethodUpdate(methodConflict.value ?? __props.method, normalizedPath, { debounceKey: `operation:update:pathMethod-${__props.path}-${__props.method}` });
+		};
+		/** Handle focus events */
+		const sendButtonRef = useTemplateRef("sendButtonRef");
+		const addressBarRef = useTemplateRef("addressBarRef");
+		const handleFocusSendButton = () => sendButtonRef.value?.$el?.focus();
+		const handleFocusAddressBar = (payload) => {
+			if (addressBarRef.value?.isFocused && __props.layout !== "desktop") return;
+			const position = payload && "position" in payload ? payload.position : "end";
+			addressBarRef.value?.focus(position);
+			if (payload && "event" in payload) payload.event.preventDefault();
+		};
+		onMounted(() => {
+			__props.eventBus.on("ui:focus:address-bar", handleFocusAddressBar);
+			__props.eventBus.on("ui:focus:send-button", handleFocusSendButton);
+			__props.eventBus.on("hooks:on:request:sent", startLoading);
+			__props.eventBus.on("hooks:on:request:complete", stopLoading);
+		});
+		onBeforeUnmount(() => {
+			__props.eventBus.off("ui:focus:address-bar", handleFocusAddressBar);
+			__props.eventBus.off("ui:focus:send-button", handleFocusSendButton);
+			__props.eventBus.off("hooks:on:request:sent", startLoading);
+			__props.eventBus.off("hooks:on:request:complete", stopLoading);
+			stopLoading();
+		});
+		const { copyToClipboard } = useClipboard();
+		const copyUrl = async () => {
+			await copyToClipboard(getResolvedUrl({
+				environment: __props.environment,
+				server: __props.server,
+				path: __props.path,
+				pathVariables: {}
+			}));
+		};
+		const isServerDropdownOpen = ref(false);
+		const isHistoryDropdownOpen = ref(false);
+		/** Whether either dropdown is open */
+		const isDropdownOpen = computed(() => isServerDropdownOpen.value || isHistoryDropdownOpen.value);
+		const navigateToServersPage = () => {
+			if (__props.serverMeta.type === "operation") return __props.eventBus.emit("ui:navigate", {
+				page: "operation",
+				path: "servers",
+				operationPath: __props.serverMeta.path,
+				method: __props.serverMeta.method
+			});
+			return __props.eventBus.emit("ui:navigate", {
+				page: "document",
+				path: "servers"
+			});
+		};
+		__expose({
+			methodConflict,
+			pathConflict
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(id),
+				class: "scalar-address-bar order-last flex h-(--scalar-address-bar-height) w-full [--scalar-address-bar-height:32px] lg:order-0 lg:w-auto"
+			}, [createElementVNode("div", { class: normalizeClass(["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]", {
+				"outline-c-danger outline": hasConflict.value,
+				"rounded-b-none": isDropdownOpen.value
+			}]) }, [
+				createElementVNode("div", { class: normalizeClass(["pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border", { "rounded-b-none": isDropdownOpen.value }]) }, [createElementVNode("div", {
+					class: "absolute top-0 left-0 h-full w-full",
+					style: normalizeStyle(style.value)
+				}, null, 4)], 2),
+				createElementVNode("div", _hoisted_2, [createVNode(unref(HttpMethod_default), {
+					isEditable: __props.layout !== "modal",
+					isSquare: "",
+					method: methodConflict.value ?? __props.method,
+					teleport: "",
+					onChange: handleMethodChange
+				}, null, 8, ["isEditable", "method"])]),
+				createElementVNode("div", _hoisted_3, [
+					__props.servers.length ? (openBlock(), createBlock(unref(ServerDropdown_default), {
+						key: 0,
+						layout: __props.layout,
+						meta: __props.serverMeta,
+						server: __props.server,
+						servers: __props.servers,
+						target: unref(id),
+						"onUpdate:open": _cache[0] || (_cache[0] = (value) => isServerDropdownOpen.value = value),
+						"onUpdate:selectedServer": _cache[1] || (_cache[1] = (payload) => __props.eventBus.emit("server:update:selected", payload)),
+						"onUpdate:servers": navigateToServersPage,
+						"onUpdate:variable": _cache[2] || (_cache[2] = (payload) => __props.eventBus.emit("server:update:variables", payload))
+					}, null, 8, [
+						"layout",
+						"meta",
+						"server",
+						"servers",
+						"target"
+					])) : createCommentVNode("", true),
+					_cache[7] || (_cache[7] = createElementVNode("div", { class: "fade-left" }, null, -1)),
+					createVNode(unref(CodeInput_default), {
+						ref_key: "addressBarRef",
+						ref: addressBarRef,
+						alwaysEmitChange: "",
+						"aria-label": "Path",
+						class: "min-w-fit outline-none",
+						disableCloseBrackets: "",
+						disabled: __props.layout === "modal",
+						disableEnter: "",
+						disableTabIndent: "",
+						emitOnBlur: false,
+						environment: __props.environment,
+						importCurl: "",
+						layout: __props.layout,
+						modelValue: __props.path,
+						placeholder: __props.server ? "" : "Enter a URL",
+						server: "",
+						onSubmit: _cache[3] || (_cache[3] = ($event) => emit("execute")),
+						"onUpdate:modelValue": handlePathChange
+					}, null, 8, [
+						"disabled",
+						"environment",
+						"layout",
+						"modelValue",
+						"placeholder"
+					]),
+					_cache[8] || (_cache[8] = createElementVNode("div", { class: "fade-right" }, null, -1))
+				]),
+				createVNode(unref(ScalarButton), {
+					class: "hover:bg-b-3 mx-1",
+					size: "xs",
+					variant: "ghost",
+					onClick: copyUrl
+				}, {
+					default: withCtx(() => [createVNode(unref(ScalarIconCopy)), _cache[9] || (_cache[9] = createElementVNode("span", { class: "sr-only" }, "Copy URL", -1))]),
+					_: 1
+				}),
+				createVNode(AddressBarHistory_default, {
+					history: __props.history,
+					target: unref(id),
+					"onSelect:history:item": _cache[4] || (_cache[4] = (payload) => emit("select:history:item", payload)),
+					"onUpdate:open": _cache[5] || (_cache[5] = (value) => isHistoryDropdownOpen.value = value)
+				}, null, 8, ["history", "target"]),
+				hasConflict.value ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [createVNode(unref(ScalarIconWarningCircle), { size: "sm" }), createElementVNode("div", _hoisted_6, [
+					_cache[10] || (_cache[10] = createTextVNode(" A ", -1)),
+					createElementVNode("em", null, toDisplayString(methodConflict.value?.toUpperCase() ?? __props.method.toUpperCase()), 1),
+					_cache[11] || (_cache[11] = createTextVNode(" request to ", -1)),
+					createVNode(unref(ScalarWrappingText), { text: pathConflict.value ?? __props.path }, null, 8, ["text"]),
+					_cache[12] || (_cache[12] = createTextVNode(" already exists in this document ", -1))
+				])])])) : createCommentVNode("", true),
+				createVNode(unref(ScalarButton), {
+					ref_key: "sendButtonRef",
+					ref: sendButtonRef,
+					class: "relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold",
+					disabled: unref(isLoading),
+					onClick: _cache[6] || (_cache[6] = ($event) => emit("execute"))
+				}, {
+					default: withCtx(() => [createElementVNode("span", _hoisted_7, [createVNode(unref(ScalarIcon), {
+						class: "relative shrink-0 fill-current",
+						icon: "Play",
+						size: "xs"
+					}), _cache[13] || (_cache[13] = createElementVNode("span", { class: "text-xxs hidden lg:flex" }, "Send", -1))]), createElementVNode("span", _hoisted_8, " Send " + toDisplayString(__props.method) + " request to " + toDisplayString(__props.server?.url ?? "") + toDisplayString(__props.path), 1)]),
+					_: 1
+				}, 8, ["disabled"])
+			], 2)], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { AddressBar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=AddressBar.vue.script.js.map

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBar.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressBar.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * AddressBar component\n * This component is used to display the address bar for the operation block\n * It is used to display the path, method, server, and history for the operation\n */\nexport default {\n  name: 'AddressBar',\n}\nexport type AddressBarProps = {\n  /** Current request path */\n  path: string\n  /** Current request method */\n  method: HttpMethodType\n  /** Currently selected server */\n  server: ServerObject | null\n  /** Server list available for operation/document */\n  servers: ServerObject[]\n  /** List of request history */\n  history: History[]\n  /** Client layout */\n  layout: ClientLayout\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n  /** Environment */\n  environment: XScalarEnvironment\n  /** Meta information for the server */\n  serverMeta: ServerMeta\n}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarWrappingText,\n} from '@scalar/components'\nimport { REQUEST_METHODS } from '@scalar/helpers/http/http-info'\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconCopy, ScalarIconWarningCircle } from '@scalar/icons'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport type {\n  ApiReferenceEvents,\n  ServerMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  useTemplateRef,\n} from 'vue'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { type ClientLayout } from '@/hooks'\nimport { getResolvedUrl } from '@/v2/blocks/operation-block/helpers/get-resolved-url'\nimport { useLoadingAnimation } from '@/v2/blocks/scalar-address-bar-block/hooks/use-loading-animation'\nimport { CodeInput } from '@/v2/components/code-input'\nimport { ServerDropdown } from '@/v2/components/server'\n\nimport AddressBarHistory, { type History } from './AddressBarHistory.vue'\n\nconst {\n  path,\n  method,\n  layout,\n  eventBus,\n  history,\n  server,\n  servers,\n  environment,\n  serverMeta,\n} = defineProps<AddressBarProps>()\n\nconst emit = defineEmits<{\n  /** Execute the current operation example */\n  (e: 'execute'): void\n  /** Select a request history item by index */\n  (e: 'select:history:item', payload: { index: number }): void\n}>()\n\nconst id = useId()\nconst { percentage, startLoading, stopLoading, isLoading } =\n  useLoadingAnimation()\n\n/** Calculate the style for the address bar */\nconst style = computed(() => ({\n  backgroundColor: `color-mix(in srgb, transparent 90%, ${REQUEST_METHODS[method].colorVar})`,\n  transform: `translate3d(-${percentage.value}%,0,0)`,\n}))\n\nconst pathConflict = ref<string | null>(null)\nconst methodConflict = ref<HttpMethodType | null>(null)\n\n/** Whether there is a path or method conflict */\nconst hasConflict = computed(() => methodConflict.value || pathConflict.value)\n\n/** Emit the path/method update event with conflict handling */\nconst emitPathMethodUpdate = (\n  targetMethod: HttpMethodType,\n  targetPath: string,\n  /** We only want to debounce when the path changes */\n  emitOptions?: { debounceKey?: string },\n): void => {\n  const position = addressBarRef.value?.cursorPosition()\n  eventBus.emit(\n    'operation:update:pathMethod',\n    {\n      meta: { method, path },\n      payload: { method: targetMethod, path: targetPath },\n      callback: (status) => {\n        // Clear conflicts if the operation was successful or no change was made\n        if (status === 'success' || status === 'no-change') {\n          methodConflict.value = null\n          pathConflict.value = null\n        }\n        if (status === 'success') {\n          eventBus.emit('ui:focus:address-bar', { position })\n        }\n        // Otherwise set the conflict if needed\n        else if (status === 'conflict') {\n          if (targetMethod !== method) {\n            methodConflict.value = targetMethod\n          }\n          if (targetPath !== path) {\n            pathConflict.value = targetPath\n          }\n        }\n      },\n    },\n    emitOptions,\n  )\n}\n\n/** Update the operation's HTTP method, handling conflicts */\nconst handleMethodChange = (newMethod: HttpMethodType): void =>\n  emitPathMethodUpdate(newMethod, pathConflict.value ?? path)\n\n/** Update the operation's path, handling conflicts */\nconst handlePathChange = (newPath: string): void => {\n  const normalizedPath = newPath.startsWith('/') ? newPath : `/${newPath}`\n  emitPathMethodUpdate(methodConflict.value ?? method, normalizedPath, {\n    debounceKey: `operation:update:pathMethod-${path}-${method}`,\n  })\n}\n\n/** Handle focus events */\nconst sendButtonRef = useTemplateRef('sendButtonRef')\nconst addressBarRef = useTemplateRef('addressBarRef')\nconst handleFocusSendButton = () => sendButtonRef.value?.$el?.focus()\n\nconst handleFocusAddressBar = (\n  payload: ApiReferenceEvents['ui:focus:address-bar'],\n) => {\n  // If it already has focus we just propagate native behavior which should focus the browser address bar\n  if (addressBarRef.value?.isFocused && layout !== 'desktop') {\n    return\n  }\n\n  const position = payload && 'position' in payload ? payload.position : 'end'\n  addressBarRef.value?.focus(position)\n\n  if (payload && 'event' in payload) {\n    payload.event.preventDefault()\n  }\n}\n\nonMounted(() => {\n  eventBus.on('ui:focus:address-bar', handleFocusAddressBar)\n  eventBus.on('ui:focus:send-button', handleFocusSendButton)\n  eventBus.on('hooks:on:request:sent', startLoading)\n  eventBus.on('hooks:on:request:complete', stopLoading)\n})\n\nonBeforeUnmount(() => {\n  eventBus.off('ui:focus:address-bar', handleFocusAddressBar)\n  eventBus.off('ui:focus:send-button', handleFocusSendButton)\n  eventBus.off('hooks:on:request:sent', startLoading)\n  eventBus.off('hooks:on:request:complete', stopLoading)\n\n  // Stop the animation when the component is unmounted\n  // This is to prevent the animation from continuing after the component is unmounted\n  stopLoading()\n})\n\nconst { copyToClipboard } = useClipboard()\n\nconst copyUrl = async () => {\n  await copyToClipboard(\n    getResolvedUrl({ environment, server, path, pathVariables: {} }),\n  )\n}\n\nconst isServerDropdownOpen = ref(false)\nconst isHistoryDropdownOpen = ref(false)\n\n/** Whether either dropdown is open */\nconst isDropdownOpen = computed(\n  () => isServerDropdownOpen.value || isHistoryDropdownOpen.value,\n)\n\nconst navigateToServersPage = () => {\n  if (serverMeta.type === 'operation') {\n    return eventBus.emit('ui:navigate', {\n      page: 'operation',\n      path: 'servers',\n      operationPath: serverMeta.path,\n      method: serverMeta.method,\n    })\n  }\n  return eventBus.emit('ui:navigate', {\n    page: 'document',\n    path: 'servers',\n  })\n}\n\ndefineExpose({\n  methodConflict,\n  pathConflict,\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-0 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      :class=\"{\n        'outline-c-danger outline': hasConflict,\n        'rounded-b-none': isDropdownOpen,\n      }\">\n      <div\n        class=\"pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border\"\n        :class=\"{\n          'rounded-b-none': isDropdownOpen,\n        }\">\n        <div\n          class=\"absolute top-0 left-0 h-full w-full\"\n          :style />\n      </div>\n      <div class=\"flex gap-1\">\n        <HttpMethod\n          :isEditable=\"layout !== 'modal'\"\n          isSquare\n          :method=\"methodConflict ?? method\"\n          teleport\n          @change=\"handleMethodChange\" />\n      </div>\n\n      <div\n        class=\"scroll-timeline-x scroll-timeline-x-hidden relative flex w-full bg-blend-normal\">\n        <!-- Servers -->\n        <ServerDropdown\n          v-if=\"servers.length\"\n          :layout=\"layout\"\n          :meta=\"serverMeta\"\n          :server=\"server\"\n          :servers=\"servers\"\n          :target=\"id\"\n          @update:open=\"(value) => (isServerDropdownOpen = value)\"\n          @update:selectedServer=\"\n            (payload) => eventBus.emit('server:update:selected', payload)\n          \"\n          @update:servers=\"navigateToServersPage\"\n          @update:variable=\"\n            (payload) => eventBus.emit('server:update:variables', payload)\n          \" />\n\n        <div class=\"fade-left\" />\n        <!-- Path + URL + env vars -->\n        <CodeInput\n          ref=\"addressBarRef\"\n          alwaysEmitChange\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          :environment=\"environment\"\n          importCurl\n          :layout=\"layout\"\n          :modelValue=\"path\"\n          :placeholder=\"server ? '' : 'Enter a URL'\"\n          server\n          @submit=\"emit('execute')\"\n          @update:modelValue=\"handlePathChange\" />\n        <div class=\"fade-right\" />\n      </div>\n\n      <!-- Copy url button -->\n      <ScalarButton\n        class=\"hover:bg-b-3 mx-1\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click=\"copyUrl\">\n        <ScalarIconCopy />\n        <span class=\"sr-only\">Copy URL</span>\n      </ScalarButton>\n\n      <AddressBarHistory\n        :history=\"history\"\n        :target=\"id\"\n        @select:history:item=\"(payload) => emit('select:history:item', payload)\"\n        @update:open=\"(value) => (isHistoryDropdownOpen = value)\" />\n      <!-- Error message -->\n      <div\n        v-if=\"hasConflict\"\n        class=\"absolute inset-x-0 top-[calc(100%+4px)] flex flex-col items-center rounded px-6\">\n        <div\n          class=\"text-c-danger bg-b-danger border-c-danger flex items-center gap-1 rounded border p-1\">\n          <ScalarIconWarningCircle size=\"sm\" />\n          <div class=\"min-w-0 flex-1\">\n            A\n            <em>{{ methodConflict?.toUpperCase() ?? method.toUpperCase() }}</em>\n            request to\n            <ScalarWrappingText :text=\"pathConflict ?? path\" />\n            already exists in this document\n          </div>\n        </div>\n      </div>\n      <ScalarButton\n        ref=\"sendButtonRef\"\n        class=\"relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold\"\n        :disabled=\"isLoading\"\n        @click=\"emit('execute')\">\n        <span\n          aria-hidden=\"true\"\n          class=\"inline-flex items-center gap-1\">\n          <ScalarIcon\n            class=\"relative shrink-0 fill-current\"\n            icon=\"Play\"\n            size=\"xs\" />\n          <span class=\"text-xxs hidden lg:flex\">Send</span>\n        </span>\n        <span class=\"sr-only\">\n          Send {{ method }} request to {{ server?.url ?? '' }}{{ 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-width: 1px;\n  outline-style: solid;\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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"}

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.js";
+import AddressBarHistory_vue_vue_type_script_setup_true_lang_default from "./AddressBarHistory.vue.script.js";
+/* empty css                                */
+//#region src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue
+var AddressBarHistory_default = /* @__PURE__ */ _plugin_vue_export_helper_default(AddressBarHistory_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c15c6573"]]);
+//#endregion
+export { AddressBarHistory_default as default };
+
+//# sourceMappingURL=AddressBarHistory.vue.js.map

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressBarHistory.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue"],"sourcesContent":["<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 { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { httpStatusCodes } from '@scalar/oas-utils/helpers'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { formatMs } from '@/libs/formatters'\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\n\nimport { getStatusCodeColor } from './httpStatusCodeColors'\n\nexport type History = {\n  method: HttpMethodType\n  path: string\n  duration: number\n  status: number\n}\n\nconst { target } = defineProps<{\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** List of all request history items */\n  history: History[]\n}>()\n\nconst emits = defineEmits<{\n  /** Select a request history item by index */\n  (e: 'select:history:item', payload: { index: number }): void\n  /** Update the open state of the history popover */\n  (e: 'update:open', value: boolean): void\n}>()\n</script>\n<template>\n  <Menu\n    v-slot=\"{ open }\"\n    as=\"div\">\n    <!-- Emit the slot value back out the parent -->\n    <ValueEmitter\n      :value=\"open\"\n      @change=\"(value) => emits('update:open', value)\"\n      @unmount=\"emits('update:open', false)\" />\n\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 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 p-0.75\"\n          static\n          :style=\"{ width }\">\n          <MenuItem\n            v-for=\"(entry, index) in history\"\n            :key=\"index\"\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=\"emits('select:history:item', { index })\">\n            <HttpMethod\n              class=\"text-[11px]\"\n              :method=\"entry.method\" />\n            <div class=\"min-w-0\">\n              <div class=\"text-c-1 min-w-0 truncate\">\n                {{ entry.path }}\n              </div>\n            </div>\n            <div>{{ formatMs(entry.duration) }}</div>\n            <div :class=\"[getStatusCodeColor(entry.status).color]\">\n              {{ entry.status }}\n            </div>\n            <div>\n              {{ httpStatusCodes[entry.status]?.name }}\n            </div>\n          </MenuItem>\n        </MenuItems>\n        <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-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"],"mappings":""}

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue.script.js

@@ -0,0 +1,84 @@
+import { formatMs } from "../../../../libs/formatters.js";
+import HttpMethod_default from "../../../../components/HttpMethod/HttpMethod.vue.js";
+import ValueEmitter_default from "../../../components/layout/ValueEmitter.vue.js";
+import { getStatusCodeColor } from "./httpStatusCodeColors.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { ScalarFloating, ScalarFloatingBackdrop, ScalarIcon } from "@scalar/components";
+import { httpStatusCodes } from "@scalar/oas-utils/helpers";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+//#region src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "min-w-0" };
+var _hoisted_2 = { class: "text-c-1 min-w-0 truncate" };
+var AddressBarHistory_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "AddressBarHistory",
+	props: {
+		target: {},
+		history: {}
+	},
+	emits: ["select:history:item", "update:open"],
+	setup(__props, { emit: __emit }) {
+		const emits = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Menu), { as: "div" }, {
+				default: withCtx(({ open }) => [createVNode(ValueEmitter_default, {
+					value: open,
+					onChange: _cache[0] || (_cache[0] = (value) => emits("update:open", value)),
+					onUnmount: _cache[1] || (_cache[1] = ($event) => emits("update:open", false))
+				}, null, 8, ["value"]), createVNode(unref(ScalarFloating), {
+					offset: 0,
+					resize: "",
+					target: __props.target
+				}, createSlots({
+					default: withCtx(() => [__props.history.length ? (openBlock(), createBlock(unref(MenuButton), {
+						key: 0,
+						class: "address-bar-history-button text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5"
+					}, {
+						default: withCtx(() => [createVNode(unref(ScalarIcon), {
+							icon: "History",
+							size: "sm",
+							thickness: "2.25"
+						}), _cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Request History", -1))]),
+						_: 1
+					})) : createCommentVNode("", true)]),
+					_: 2
+				}, [open ? {
+					name: "floating",
+					fn: withCtx(({ width }) => [createVNode(unref(MenuItems), {
+						class: "custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center p-0.75",
+						static: "",
+						style: normalizeStyle({ width })
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.history, (entry, index) => {
+							return openBlock(), createBlock(unref(MenuItem), {
+								key: index,
+								as: "button",
+								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",
+								value: index,
+								onClick: ($event) => emits("select:history:item", { index })
+							}, {
+								default: withCtx(() => [
+									createVNode(unref(HttpMethod_default), {
+										class: "text-[11px]",
+										method: entry.method
+									}, null, 8, ["method"]),
+									createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, toDisplayString(entry.path), 1)]),
+									createElementVNode("div", null, toDisplayString(unref(formatMs)(entry.duration)), 1),
+									createElementVNode("div", { class: normalizeClass([unref(getStatusCodeColor)(entry.status).color]) }, toDisplayString(entry.status), 3),
+									createElementVNode("div", null, toDisplayString(unref(httpStatusCodes)[entry.status]?.name), 1)
+								]),
+								_: 2
+							}, 1032, ["value", "onClick"]);
+						}), 128))]),
+						_: 1
+					}, 8, ["style"]), createVNode(unref(ScalarFloatingBackdrop), { class: "inset-x-px rounded-none rounded-b-lg" })]),
+					key: "0"
+				} : void 0]), 1032, ["target"])]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { AddressBarHistory_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=AddressBarHistory.vue.script.js.map

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressBarHistory.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue"],"sourcesContent":["<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 { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { httpStatusCodes } from '@scalar/oas-utils/helpers'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { formatMs } from '@/libs/formatters'\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\n\nimport { getStatusCodeColor } from './httpStatusCodeColors'\n\nexport type History = {\n  method: HttpMethodType\n  path: string\n  duration: number\n  status: number\n}\n\nconst { target } = defineProps<{\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** List of all request history items */\n  history: History[]\n}>()\n\nconst emits = defineEmits<{\n  /** Select a request history item by index */\n  (e: 'select:history:item', payload: { index: number }): void\n  /** Update the open state of the history popover */\n  (e: 'update:open', value: boolean): void\n}>()\n</script>\n<template>\n  <Menu\n    v-slot=\"{ open }\"\n    as=\"div\">\n    <!-- Emit the slot value back out the parent -->\n    <ValueEmitter\n      :value=\"open\"\n      @change=\"(value) => emits('update:open', value)\"\n      @unmount=\"emits('update:open', false)\" />\n\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 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 p-0.75\"\n          static\n          :style=\"{ width }\">\n          <MenuItem\n            v-for=\"(entry, index) in history\"\n            :key=\"index\"\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=\"emits('select:history:item', { index })\">\n            <HttpMethod\n              class=\"text-[11px]\"\n              :method=\"entry.method\" />\n            <div class=\"min-w-0\">\n              <div class=\"text-c-1 min-w-0 truncate\">\n                {{ entry.path }}\n              </div>\n            </div>\n            <div>{{ formatMs(entry.duration) }}</div>\n            <div :class=\"[getStatusCodeColor(entry.status).color]\">\n              {{ entry.status }}\n            </div>\n            <div>\n              {{ httpStatusCodes[entry.status]?.name }}\n            </div>\n          </MenuItem>\n        </MenuItems>\n        <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-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"],"mappings":";;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ;;uBAQZ,YA2DO,MAAA,KAAA,EAAA,EAzDL,IAAG,OAAK,EAAA;sBAKmC,EANjC,WAAI,CAGd,YAG2C,sBAAA;KAFxC,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,MAAK,eAAgB,MAAK;KAC7C,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,MAAK,eAAA,MAAA;4BAEjB,YAiDiB,MAAA,eAAA,EAAA;KAhDd,QAAQ;KACT,QAAA;KACC,QAAQ,QAAA;;4BAUI,CAPL,QAAA,QAAQ,UAAA,WAAA,EADhB,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;kBA6BW,EA7BC,YAAK,CAElB,YA2BY,MAAA,UAAA,EAAA;MA1BV,OAAM;MACN,QAAA;MACC,OAAK,eAAA,EAAI,OAAK,CAAA;;6BAEoB,EAAA,UAAA,KAAA,EADnC,mBAsBW,UAAA,MAAA,WArBgB,QAAA,UAAjB,OAAO,UAAK;2BADtB,YAsBW,MAAA,SAAA,EAAA;QApBR,KAAK;QACN,IAAG;QACH,OAAM;QACL,OAAO;QACP,UAAK,WAAE,MAAK,uBAAA,EAA0B,OAAK,CAAA;;+BAGjB;SAF3B,YAE2B,MAAA,mBAAA,EAAA;UADzB,OAAM;UACL,QAAQ,MAAM;;SACjB,mBAIM,OAJN,YAIM,CAHJ,mBAEM,OAFN,YAEM,gBADD,MAAM,KAAI,EAAA,EAAA,CAAA,CAAA;SAGjB,mBAAyC,OAAA,MAAA,gBAAjC,MAAA,SAAQ,CAAC,MAAM,SAAQ,CAAA,EAAA,EAAA;SAC/B,mBAEM,OAAA,EAFA,OAAK,eAAA,CAAG,MAAA,mBAAkB,CAAC,MAAM,OAAM,CAAE,MAAK,CAAA,EAAA,EAAA,gBAC/C,MAAM,OAAM,EAAA,EAAA;SAEjB,mBAEM,OAAA,MAAA,gBADD,MAAA,gBAAe,CAAC,MAAM,SAAS,KAAI,EAAA,EAAA;;;;;;uBAI5C,YAAuE,MAAA,uBAAA,EAAA,EAA/C,OAAM,wCAAsC,CAAA,CAAA,CAAA"}

package/dist/v2/blocks/scalar-address-bar-block/components/EnvironmentSelector.vue.js

@@ -0,0 +1,7 @@
+import EnvironmentSelector_vue_vue_type_script_setup_true_lang_default from "./EnvironmentSelector.vue.script.js";
+//#region src/v2/blocks/scalar-address-bar-block/components/EnvironmentSelector.vue
+var EnvironmentSelector_default = EnvironmentSelector_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { EnvironmentSelector_default as default };
+
+//# sourceMappingURL=EnvironmentSelector.vue.js.map

package/dist/v2/blocks/scalar-address-bar-block/components/EnvironmentSelector.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentSelector.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/EnvironmentSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n  ScalarIcon,\n} from '@scalar/components'\nimport { computed } from 'vue'\n\nconst { environments = [], activeEnvironment } = defineProps<{\n  /** List of available environments */\n  environments?: string[]\n  /** Currently selected environment */\n  activeEnvironment?: string\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when an environment is selected */\n  (e: 'select:environment', environmentName: string): void\n  /** Emitted when user wants to add a new environment */\n  (e: 'add:environment'): void\n}>()\n\n/** Whether an environment is currently active */\nconst hasActiveEnvironment = computed(() => !!activeEnvironment)\n\n/** Whether environments exist */\nconst hasEnvironments = computed(() => environments.length > 0)\n\n/** Whether the currently selected environment exists in the dropdown options */\nconst hasSelectedEnvironmentInOptions = computed(() => {\n  if (!activeEnvironment) {\n    return false\n  }\n\n  return environments.includes(activeEnvironment)\n})\n\n/** True when an environment is selected but unavailable in the current context */\nconst hasMissingActiveEnvironment = computed(\n  () => hasActiveEnvironment.value && !hasSelectedEnvironmentInOptions.value,\n)\n\n/** Display text for the button */\nconst displayText = computed(() => {\n  if (hasMissingActiveEnvironment.value) {\n    return `${activeEnvironment} (Unavailable)`\n  }\n\n  if (hasActiveEnvironment.value) {\n    return activeEnvironment\n  }\n  if (!hasEnvironments.value) {\n    return 'Add Environment'\n  }\n  return 'Select Environment'\n})\n\n/** Button styling based on state */\nconst buttonClass = computed(() => {\n  if (hasMissingActiveEnvironment.value) {\n    return 'hover:bg-b-2 text-c-2 border-transparent'\n  }\n\n  if (hasActiveEnvironment.value) {\n    return 'bg-c-accent/10 text-c-accent hover:bg-c-accent/20 border-c-accent/30'\n  }\n  if (!hasEnvironments.value) {\n    return 'hover:bg-b-2 text-c-3 border-transparent'\n  }\n  return 'hover:bg-b-2 text-c-2 border-transparent'\n})\n\nconst handleAddEnvironment = () => {\n  emit('add:environment')\n}\n\nconst handleSelectEnvironment = (environmentName: string) => {\n  emit('select:environment', environmentName)\n}\n</script>\n\n<template>\n  <div class=\"relative flex items-center\">\n    <!-- Environment indicator badge (only show when active) -->\n\n    <ScalarDropdown>\n      <ScalarButton\n        :aria-label=\"`Current environment: ${displayText}`\"\n        class=\"line-clamp-1 h-full w-fit justify-start border px-2 py-1 font-normal transition-colors\"\n        :class=\"buttonClass\"\n        size=\"sm\"\n        variant=\"ghost\">\n        <div class=\"flex max-w-[220px] min-w-0 items-center gap-1.5\">\n          <!-- Icon indicator -->\n          <ScalarIcon\n            class=\"shrink-0\"\n            :class=\"\n              hasActiveEnvironment && !hasMissingActiveEnvironment\n                ? 'text-c-accent'\n                : 'text-c-3'\n            \"\n            icon=\"Globe\"\n            size=\"sm\" />\n\n          <!-- Environment name -->\n          <span\n            class=\"text-xxs block max-w-[160px] min-w-0 truncate text-left font-medium\">\n            {{ displayText }}\n          </span>\n\n          <!-- Dropdown arrow -->\n          <ScalarIcon\n            class=\"shrink-0\"\n            icon=\"ChevronDown\"\n            size=\"xs\" />\n        </div>\n      </ScalarButton>\n\n      <template #items>\n        <!-- No environment option (clear selection) -->\n        <ScalarDropdownItem\n          v-if=\"hasActiveEnvironment\"\n          class=\"group/item flex w-full items-center gap-1.5\"\n          @click.stop=\"handleSelectEnvironment('')\">\n          <div\n            class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n            :class=\"\n              !activeEnvironment\n                ? 'bg-c-accent text-b-1'\n                : 'shadow-border text-transparent'\n            \">\n            <ScalarIcon\n              class=\"size-2.5\"\n              icon=\"Checkmark\"\n              thickness=\"3\" />\n          </div>\n          <span class=\"text-c-2\">No Environment</span>\n        </ScalarDropdownItem>\n\n        <ScalarDropdownDivider v-if=\"hasActiveEnvironment && hasEnvironments\" />\n\n        <!-- Environment list -->\n        <ScalarDropdownItem\n          v-for=\"environmentName in environments\"\n          :key=\"environmentName\"\n          class=\"group/item flex w-full min-w-0 items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n          @click.stop=\"handleSelectEnvironment(environmentName)\">\n          <div\n            class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n            :class=\"\n              activeEnvironment === environmentName\n                ? 'bg-c-accent text-b-1'\n                : 'shadow-border text-transparent'\n            \">\n            <ScalarIcon\n              class=\"size-2.5\"\n              icon=\"Checkmark\"\n              thickness=\"3\" />\n          </div>\n          <span class=\"min-w-0 flex-1 truncate\">{{ environmentName }}</span>\n        </ScalarDropdownItem>\n        <ScalarDropdownDivider v-if=\"hasMissingActiveEnvironment\" />\n\n        <ScalarDropdownItem\n          v-if=\"hasMissingActiveEnvironment\"\n          class=\"group/item flex h-auto w-full min-w-0 items-start gap-1.5 overflow-hidden\"\n          disabled>\n          <div\n            class=\"bg-c-accent text-b-1 mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full p-[3px]\">\n            <ScalarIcon\n              class=\"size-2.5\"\n              icon=\"Checkmark\"\n              thickness=\"3\" />\n          </div>\n          <div class=\"min-w-0 flex-1 text-left\">\n            <span class=\"block truncate\">\n              {{ activeEnvironment }}\n            </span>\n            <span class=\"text-c-3 block truncate text-xs\">\n              Not available in this context\n            </span>\n          </div>\n        </ScalarDropdownItem>\n\n        <ScalarDropdownDivider v-if=\"hasEnvironments\" />\n\n        <!-- Add new environment button -->\n        <ScalarDropdownItem\n          class=\"text-c-accent flex items-center gap-1.5\"\n          @click=\"handleAddEnvironment\">\n          <div class=\"flex h-4 w-4 items-center justify-center\">\n            <ScalarIcon\n              icon=\"Add\"\n              size=\"sm\" />\n          </div>\n          <span>{{\n            hasEnvironments ? 'New Environment' : 'Create Environment'\n          }}</span>\n        </ScalarDropdownItem>\n\n        <!-- Helper text for empty state -->\n        <div\n          v-if=\"!hasEnvironments && !hasActiveEnvironment\"\n          class=\"text-c-3 px-2 py-1.5 text-xs\">\n          <p class=\"mb-1\">\n            Environments let you manage variables like API keys and base URLs\n            across different contexts.\n          </p>\n        </div>\n      </template>\n    </ScalarDropdown>\n  </div>\n</template>\n"],"mappings":""}

package/dist/v2/blocks/scalar-address-bar-block/components/EnvironmentSelector.vue.script.js

@@ -0,0 +1,141 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { ScalarButton, ScalarDropdown, ScalarDropdownDivider, ScalarDropdownItem, ScalarIcon } from "@scalar/components";
+//#region src/v2/blocks/scalar-address-bar-block/components/EnvironmentSelector.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "relative flex items-center" };
+var _hoisted_2 = { class: "flex max-w-[220px] min-w-0 items-center gap-1.5" };
+var _hoisted_3 = { class: "text-xxs block max-w-[160px] min-w-0 truncate text-left font-medium" };
+var _hoisted_4 = { class: "min-w-0 flex-1 truncate" };
+var _hoisted_5 = { class: "bg-c-accent text-b-1 mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full p-[3px]" };
+var _hoisted_6 = { class: "min-w-0 flex-1 text-left" };
+var _hoisted_7 = { class: "block truncate" };
+var _hoisted_8 = { class: "flex h-4 w-4 items-center justify-center" };
+var _hoisted_9 = {
+	key: 5,
+	class: "text-c-3 px-2 py-1.5 text-xs"
+};
+var EnvironmentSelector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EnvironmentSelector",
+	props: {
+		environments: { default: () => [] },
+		activeEnvironment: {}
+	},
+	emits: ["select:environment", "add:environment"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		/** Whether an environment is currently active */
+		const hasActiveEnvironment = computed(() => !!__props.activeEnvironment);
+		/** Whether environments exist */
+		const hasEnvironments = computed(() => __props.environments.length > 0);
+		/** Whether the currently selected environment exists in the dropdown options */
+		const hasSelectedEnvironmentInOptions = computed(() => {
+			if (!__props.activeEnvironment) return false;
+			return __props.environments.includes(__props.activeEnvironment);
+		});
+		/** True when an environment is selected but unavailable in the current context */
+		const hasMissingActiveEnvironment = computed(() => hasActiveEnvironment.value && !hasSelectedEnvironmentInOptions.value);
+		/** Display text for the button */
+		const displayText = computed(() => {
+			if (hasMissingActiveEnvironment.value) return `${__props.activeEnvironment} (Unavailable)`;
+			if (hasActiveEnvironment.value) return __props.activeEnvironment;
+			if (!hasEnvironments.value) return "Add Environment";
+			return "Select Environment";
+		});
+		/** Button styling based on state */
+		const buttonClass = computed(() => {
+			if (hasMissingActiveEnvironment.value) return "hover:bg-b-2 text-c-2 border-transparent";
+			if (hasActiveEnvironment.value) return "bg-c-accent/10 text-c-accent hover:bg-c-accent/20 border-c-accent/30";
+			if (!hasEnvironments.value) return "hover:bg-b-2 text-c-3 border-transparent";
+			return "hover:bg-b-2 text-c-2 border-transparent";
+		});
+		const handleAddEnvironment = () => {
+			emit("add:environment");
+		};
+		const handleSelectEnvironment = (environmentName) => {
+			emit("select:environment", environmentName);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(ScalarDropdown), null, {
+				items: withCtx(() => [
+					hasActiveEnvironment.value ? (openBlock(), createBlock(unref(ScalarDropdownItem), {
+						key: 0,
+						class: "group/item flex w-full items-center gap-1.5",
+						onClick: _cache[0] || (_cache[0] = withModifiers(($event) => handleSelectEnvironment(""), ["stop"]))
+					}, {
+						default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-4 w-4 items-center justify-center rounded-full p-[3px]", !__props.activeEnvironment ? "bg-c-accent text-b-1" : "shadow-border text-transparent"]) }, [createVNode(unref(ScalarIcon), {
+							class: "size-2.5",
+							icon: "Checkmark",
+							thickness: "3"
+						})], 2), _cache[1] || (_cache[1] = createElementVNode("span", { class: "text-c-2" }, "No Environment", -1))]),
+						_: 1
+					})) : createCommentVNode("", true),
+					hasActiveEnvironment.value && hasEnvironments.value ? (openBlock(), createBlock(unref(ScalarDropdownDivider), { key: 1 })) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(__props.environments, (environmentName) => {
+						return openBlock(), createBlock(unref(ScalarDropdownItem), {
+							key: environmentName,
+							class: "group/item flex w-full min-w-0 items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap",
+							onClick: withModifiers(($event) => handleSelectEnvironment(environmentName), ["stop"])
+						}, {
+							default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-4 w-4 items-center justify-center rounded-full p-[3px]", __props.activeEnvironment === environmentName ? "bg-c-accent text-b-1" : "shadow-border text-transparent"]) }, [createVNode(unref(ScalarIcon), {
+								class: "size-2.5",
+								icon: "Checkmark",
+								thickness: "3"
+							})], 2), createElementVNode("span", _hoisted_4, toDisplayString(environmentName), 1)]),
+							_: 2
+						}, 1032, ["onClick"]);
+					}), 128)),
+					hasMissingActiveEnvironment.value ? (openBlock(), createBlock(unref(ScalarDropdownDivider), { key: 2 })) : createCommentVNode("", true),
+					hasMissingActiveEnvironment.value ? (openBlock(), createBlock(unref(ScalarDropdownItem), {
+						key: 3,
+						class: "group/item flex h-auto w-full min-w-0 items-start gap-1.5 overflow-hidden",
+						disabled: ""
+					}, {
+						default: withCtx(() => [createElementVNode("div", _hoisted_5, [createVNode(unref(ScalarIcon), {
+							class: "size-2.5",
+							icon: "Checkmark",
+							thickness: "3"
+						})]), createElementVNode("div", _hoisted_6, [createElementVNode("span", _hoisted_7, toDisplayString(__props.activeEnvironment), 1), _cache[2] || (_cache[2] = createElementVNode("span", { class: "text-c-3 block truncate text-xs" }, " Not available in this context ", -1))])]),
+						_: 1
+					})) : createCommentVNode("", true),
+					hasEnvironments.value ? (openBlock(), createBlock(unref(ScalarDropdownDivider), { key: 4 })) : createCommentVNode("", true),
+					createVNode(unref(ScalarDropdownItem), {
+						class: "text-c-accent flex items-center gap-1.5",
+						onClick: handleAddEnvironment
+					}, {
+						default: withCtx(() => [createElementVNode("div", _hoisted_8, [createVNode(unref(ScalarIcon), {
+							icon: "Add",
+							size: "sm"
+						})]), createElementVNode("span", null, toDisplayString(hasEnvironments.value ? "New Environment" : "Create Environment"), 1)]),
+						_: 1
+					}),
+					!hasEnvironments.value && !hasActiveEnvironment.value ? (openBlock(), createElementBlock("div", _hoisted_9, [..._cache[3] || (_cache[3] = [createElementVNode("p", { class: "mb-1" }, " Environments let you manage variables like API keys and base URLs across different contexts. ", -1)])])) : createCommentVNode("", true)
+				]),
+				default: withCtx(() => [createVNode(unref(ScalarButton), {
+					"aria-label": `Current environment: ${displayText.value}`,
+					class: normalizeClass(["line-clamp-1 h-full w-fit justify-start border px-2 py-1 font-normal transition-colors", buttonClass.value]),
+					size: "sm",
+					variant: "ghost"
+				}, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_2, [
+						createVNode(unref(ScalarIcon), {
+							class: normalizeClass(["shrink-0", hasActiveEnvironment.value && !hasMissingActiveEnvironment.value ? "text-c-accent" : "text-c-3"]),
+							icon: "Globe",
+							size: "sm"
+						}, null, 8, ["class"]),
+						createElementVNode("span", _hoisted_3, toDisplayString(displayText.value), 1),
+						createVNode(unref(ScalarIcon), {
+							class: "shrink-0",
+							icon: "ChevronDown",
+							size: "xs"
+						})
+					])]),
+					_: 1
+				}, 8, ["aria-label", "class"])]),
+				_: 1
+			})]);
+		};
+	}
+});
+//#endregion
+export { EnvironmentSelector_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EnvironmentSelector.vue.script.js.map