@scalar/api-client 2.38.1 → 2.38.3

package/dist/scalar-address-bar-block-BbysOhkE.js

@@ -0,0 +1,425 @@
+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 getResolvedUrl } from "./get-resolved-url-SybDPV0U.js";
+import { t as CodeInput_default } from "./code-input-iq-moLxi.js";
+import { t as ValueEmitter_default } from "./ValueEmitter-QYkZ9Hdc.js";
+import { t as ServerDropdown_default } from "./server-tcI-OCyx.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, useId, useTemplateRef, withCtx } from "vue";
+import { ScalarButton, ScalarFloating, ScalarFloatingBackdrop, ScalarIcon, ScalarWrappingText } from "@scalar/components";
+import { useClipboard } from "@scalar/use-hooks/useClipboard";
+import { httpStatusCodes } from "@scalar/oas-utils/helpers";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import { REQUEST_METHODS } from "@scalar/helpers/http/http-info";
+import { ScalarIconCopy, ScalarIconWarningCircle } from "@scalar/icons";
+//#region src/v2/blocks/scalar-address-bar-block/hooks/use-loading-animation.ts
+/**
+* Constants for the loading animation behavior.
+* These control how the progress bar animates during and after requests.
+*/
+var TICK_INTERVAL_MS = 20;
+var MAX_PERCENTAGE = 100;
+var MIN_PERCENTAGE = 0;
+var ASYMPTOTIC_LIMIT = 15;
+var ASYMPTOTIC_DIVISOR = 60;
+var FINISH_ANIMATION_STEPS = 400 / TICK_INTERVAL_MS;
+/**
+* Manages the loading animation for the address bar.
+*
+* The animation has two phases:
+* 1. While requesting: Animates asymptotically toward 85% to indicate ongoing work
+* 2. After request completes: Animates linearly to 100% over 400ms for smooth completion
+*
+* This creates a natural feel where the bar does not instantly jump to 100%,
+* making the loading experience more predictable and less jarring.
+*
+* @returns An object with methods to control the loading animation and the current percentage
+*/
+var useLoadingAnimation = () => {
+	/** The current loading percentage from 100 (not started) to 0 (complete) */
+	const percentage = ref(MAX_PERCENTAGE);
+	/** Tracks how much percentage was remaining when the request completed */
+	const remaining = ref(0);
+	/** Indicates whether a request is currently in progress */
+	const isRequesting = ref(false);
+	/** The interval timer that drives the animation */
+	const interval = ref();
+	/**
+	* Resets the animation state to initial values.
+	* This is called when the animation completes.
+	*/
+	const resetAnimation = () => {
+		clearInterval(interval.value);
+		interval.value = void 0;
+		percentage.value = MAX_PERCENTAGE;
+		isRequesting.value = false;
+	};
+	/**
+	* Advances the loading animation by one tick.
+	* Uses different animation strategies based on whether a request is active.
+	*/
+	const load = () => {
+		if (isRequesting.value) percentage.value -= (percentage.value - ASYMPTOTIC_LIMIT) / ASYMPTOTIC_DIVISOR;
+		else percentage.value -= remaining.value / FINISH_ANIMATION_STEPS;
+		if (percentage.value <= MIN_PERCENTAGE) resetAnimation();
+	};
+	/**
+	* Starts the loading animation.
+	* If called while the finishing animation is running, it switches back to requesting mode.
+	* This handles the case where a new request starts before the previous animation completes.
+	*/
+	const startLoading = () => {
+		if (interval.value) {
+			isRequesting.value = true;
+			return;
+		}
+		isRequesting.value = true;
+		interval.value = setInterval(load, TICK_INTERVAL_MS);
+	};
+	/**
+	* Marks the request as complete and begins the finish animation.
+	* The animation will continue until it reaches 100% to provide visual feedback.
+	*/
+	const stopLoading = () => {
+		remaining.value = percentage.value;
+		isRequesting.value = false;
+	};
+	return {
+		startLoading,
+		stopLoading,
+		percentage,
+		isLoading: isRequesting
+	};
+};
+//#endregion
+//#region src/v2/blocks/scalar-address-bar-block/components/httpStatusCodeColors.ts
+var STATUS_CODES_COLORS = {
+	100: { color: "text-yellow" },
+	200: { color: "text-green" },
+	202: { color: "text-green" },
+	300: { color: "text-blue" },
+	304: { color: "text-blue" },
+	400: { color: "text-red" },
+	401: { color: "text-orange" },
+	422: { color: "text-yellow" },
+	423: { color: "text-purple" },
+	505: { color: "text-orange" }
+};
+var getStatusCodeColor = (statusCode) => {
+	return STATUS_CODES_COLORS[statusCode] || { color: "text-grey" };
+};
+//#endregion
+//#region src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "min-w-0" };
+var _hoisted_2$1 = { class: "text-c-1 min-w-0 truncate" };
+//#endregion
+//#region src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue
+var AddressBarHistory_default = /* @__PURE__ */ _plugin_vue_export_helper_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$1, [createElementVNode("div", _hoisted_2$1, 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
+			});
+		};
+	}
+}), [["__scopeId", "data-v-c15c6573"]]);
+//#endregion
+//#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" };
+//#endregion
+//#region src/v2/blocks/scalar-address-bar-block/components/AddressBar.vue
+var AddressBar_default = /* @__PURE__ */ _plugin_vue_export_helper_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);
+		};
+	}
+}), [["__scopeId", "data-v-f5565642"]]);
+//#endregion
+export { AddressBar_default as t };
+
+//# sourceMappingURL=scalar-address-bar-block-BbysOhkE.js.map

package/dist/scalar-address-bar-block-BbysOhkE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scalar-address-bar-block-BbysOhkE.js","names":[],"sources":["../src/v2/blocks/scalar-address-bar-block/hooks/use-loading-animation.ts","../src/v2/blocks/scalar-address-bar-block/components/httpStatusCodeColors.ts","../src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue","../src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue","../src/v2/blocks/scalar-address-bar-block/components/AddressBar.vue","../src/v2/blocks/scalar-address-bar-block/components/AddressBar.vue"],"sourcesContent":["import type { Ref } from 'vue'\nimport { ref } from 'vue'\n\n/**\n * Constants for the loading animation behavior.\n * These control how the progress bar animates during and after requests.\n */\nconst TICK_INTERVAL_MS = 20\nconst MAX_PERCENTAGE = 100\nconst MIN_PERCENTAGE = 0\nconst ASYMPTOTIC_LIMIT = 15 // Stops at 85% (100 - 15) to show ongoing progress\nconst ASYMPTOTIC_DIVISOR = 60 // Controls the speed of asymptotic approach\nconst FINISH_ANIMATION_DURATION_MS = 400\nconst FINISH_ANIMATION_STEPS = FINISH_ANIMATION_DURATION_MS / TICK_INTERVAL_MS\n\n/**\n * Manages the loading animation for the address bar.\n *\n * The animation has two phases:\n * 1. While requesting: Animates asymptotically toward 85% to indicate ongoing work\n * 2. After request completes: Animates linearly to 100% over 400ms for smooth completion\n *\n * This creates a natural feel where the bar does not instantly jump to 100%,\n * making the loading experience more predictable and less jarring.\n *\n * @returns An object with methods to control the loading animation and the current percentage\n */\nexport const useLoadingAnimation = (): {\n  startLoading: () => void\n  stopLoading: () => void\n  percentage: Ref<number>\n  isLoading: Ref<boolean>\n} => {\n  /** The current loading percentage from 100 (not started) to 0 (complete) */\n  const percentage = ref(MAX_PERCENTAGE)\n  /** Tracks how much percentage was remaining when the request completed */\n  const remaining = ref(0)\n  /** Indicates whether a request is currently in progress */\n  const isRequesting = ref(false)\n  /** The interval timer that drives the animation */\n  const interval = ref<ReturnType<typeof setInterval>>()\n\n  /**\n   * Resets the animation state to initial values.\n   * This is called when the animation completes.\n   */\n  const resetAnimation = (): void => {\n    clearInterval(interval.value)\n    interval.value = undefined\n    percentage.value = MAX_PERCENTAGE\n    isRequesting.value = false\n  }\n\n  /**\n   * Advances the loading animation by one tick.\n   * Uses different animation strategies based on whether a request is active.\n   */\n  const load = (): void => {\n    if (isRequesting.value) {\n      // Asymptotic approach: Slows down as it nears 85% to indicate ongoing work\n      // without reaching 100% until the request actually completes\n      percentage.value -= (percentage.value - ASYMPTOTIC_LIMIT) / ASYMPTOTIC_DIVISOR\n    } else {\n      // Linear finish: Complete the remaining percentage smoothly over a fixed duration\n      // to avoid jarring jumps when the request completes\n      percentage.value -= remaining.value / FINISH_ANIMATION_STEPS\n    }\n\n    if (percentage.value <= MIN_PERCENTAGE) {\n      resetAnimation()\n    }\n  }\n\n  /**\n   * Starts the loading animation.\n   * If called while the finishing animation is running, it switches back to requesting mode.\n   * This handles the case where a new request starts before the previous animation completes.\n   */\n  const startLoading = (): void => {\n    if (interval.value) {\n      // Switch back to requesting mode if we are in finishing mode.\n      // This prevents the animation from completing while a new request is active.\n      isRequesting.value = true\n      return\n    }\n    isRequesting.value = true\n    interval.value = setInterval(load, TICK_INTERVAL_MS)\n  }\n\n  /**\n   * Marks the request as complete and begins the finish animation.\n   * The animation will continue until it reaches 100% to provide visual feedback.\n   */\n  const stopLoading = (): void => {\n    remaining.value = percentage.value\n    isRequesting.value = false\n  }\n\n  return {\n    startLoading,\n    stopLoading,\n    percentage,\n    isLoading: isRequesting,\n  }\n}\n","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 { 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","<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","<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","<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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"}