@scalar/api-client 3.19.2 → 3.20.0

package/dist/v2/blocks/response-block/helpers/response-stream.js

@@ -0,0 +1,97 @@
+import { createMultipartParser } from "./response-stream-multipart.js";
+import { parseMimeType } from "@scalar/helpers/http/mime-type";
+import { isStreamingContentType } from "@scalar/helpers/http/is-streaming-content-type";
+import { getUtf8ByteLength } from "@scalar/helpers/string/get-utf8-byte-length";
+//#region src/v2/blocks/response-block/helpers/response-stream.ts
+/** Only opt recognized streaming media types into the reader path. */
+var getResponseStreamFormat = (contentType) => {
+	if (!isStreamingContentType(contentType)) return;
+	const { essence, type, subtype } = parseMimeType(contentType);
+	if (essence === "text/event-stream") return "text";
+	if ([
+		"application/jsonl",
+		"application/x-ndjson",
+		"application/json-lines"
+	].includes(essence)) return "json-lines";
+	if (subtype === "json-seq" || subtype.endsWith("+json-seq")) return "json-seq";
+	return type === "multipart" ? "multipart" : void 0;
+};
+/** Bound unfinished records, including servers that never send a delimiter. */
+var MAX_STREAM_RECORD_SIZE = 8 * 1024 * 1024;
+/** Decode complete records while retaining partial UTF-8 characters across network chunks. */
+var createResponseStreamParser = (contentType, emit) => {
+	const format = getResponseStreamFormat(contentType);
+	if (format === "multipart") return createMultipartParser(contentType, emit);
+	const decoder = new TextDecoder("utf-8", { fatal: format !== "text" && format !== void 0 });
+	let buffer = "";
+	let recordBytes = 0;
+	let started = false;
+	let depth = 0;
+	let quoted = false;
+	let escaped = false;
+	const flush = () => {
+		const record = buffer;
+		buffer = "";
+		recordBytes = 0;
+		depth = 0;
+		quoted = false;
+		escaped = false;
+		if (!record.trim()) return;
+		let formatted;
+		try {
+			const value = JSON.parse(record);
+			if (format === "json-seq" && typeof value !== "object" && typeof value !== "string" && !/\s$/.test(record)) throw new Error("Truncated primitive");
+			if (format === "json-seq" && value === null && !/\s$/.test(record)) throw new Error("Truncated null");
+			formatted = `${JSON.stringify(value, null, 2)}\n`;
+		} catch {
+			formatted = `[Invalid JSON record]\n${record.trim()}\n`;
+		}
+		emit(formatted);
+	};
+	const consume = (text) => {
+		if (format !== "json-lines" && format !== "json-seq") {
+			emit(text);
+			return;
+		}
+		for (const char of text) {
+			if (format === "json-seq" && char === "") {
+				flush();
+				started = true;
+				continue;
+			}
+			if (format === "json-seq" && !started) {
+				if (char.trim()) throw new Error("JSON sequence record is missing its record separator.");
+				continue;
+			}
+			buffer += char;
+			recordBytes += getUtf8ByteLength(char);
+			if (recordBytes > MAX_STREAM_RECORD_SIZE) throw new Error("Stream record exceeds the 8 MiB display limit.");
+			if (format === "json-lines") {
+				if (char === "\n") flush();
+				continue;
+			}
+			if (quoted) {
+				if (escaped) escaped = false;
+				else if (char === "\\") escaped = true;
+				else if (char === "\"") quoted = false;
+			} else if (char === "\"") quoted = true;
+			else if (char === "{" || char === "[") depth++;
+			else if (char === "}" || char === "]") depth--;
+			if (char === "\n" && !quoted && depth === 0 && buffer.trim()) {
+				flush();
+				started = false;
+			}
+		}
+	};
+	return {
+		push: (chunk) => consume(decoder.decode(chunk, { stream: true })),
+		finish: () => {
+			consume(decoder.decode());
+			flush();
+		}
+	};
+};
+//#endregion
+export { createResponseStreamParser, getResponseStreamFormat };
+
+//# sourceMappingURL=response-stream.js.map

package/dist/v2/blocks/response-block/helpers/response-stream.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"response-stream.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/helpers/response-stream.ts"],"sourcesContent":["import { isStreamingContentType } from '@scalar/helpers/http/is-streaming-content-type'\nimport { parseMimeType } from '@scalar/helpers/http/mime-type'\nimport { getUtf8ByteLength } from '@scalar/helpers/string/get-utf8-byte-length'\n\nimport { createMultipartParser } from './response-stream-multipart'\n\n/** Formats with record framing that can be displayed before the response finishes. */\ntype ResponseStreamFormat = 'text' | 'json-lines' | 'json-seq' | 'multipart'\n\n/** Only opt recognized streaming media types into the reader path. */\nexport const getResponseStreamFormat = (contentType: string): ResponseStreamFormat | undefined => {\n  // Aggregate multipart/form-data and multipart/related bodies keep the buffered viewer.\n  if (!isStreamingContentType(contentType)) {\n    return undefined\n  }\n  const { essence, type, subtype } = parseMimeType(contentType)\n  if (essence === 'text/event-stream') {\n    return 'text'\n  }\n  if (['application/jsonl', 'application/x-ndjson', 'application/json-lines'].includes(essence)) {\n    return 'json-lines'\n  }\n  if (subtype === 'json-seq' || subtype.endsWith('+json-seq')) {\n    return 'json-seq'\n  }\n  return type === 'multipart' ? 'multipart' : undefined\n}\n\n/** A push parser keeps transport cancellation and UI updates outside the framing logic. */\nexport type ResponseStreamParser = {\n  push: (chunk: Uint8Array) => void\n  finish: () => void\n}\n\n/** Bound unfinished records, including servers that never send a delimiter. */\nconst MAX_STREAM_RECORD_SIZE = 8 * 1024 * 1024\n\n/** Decode complete records while retaining partial UTF-8 characters across network chunks. */\nexport const createResponseStreamParser = (contentType: string, emit: (text: string) => void): ResponseStreamParser => {\n  const format = getResponseStreamFormat(contentType)\n  if (format === 'multipart') {\n    return createMultipartParser(contentType, emit)\n  }\n  const decoder = new TextDecoder('utf-8', { fatal: format !== 'text' && format !== undefined })\n  let buffer = ''\n  let recordBytes = 0\n  let started = false\n  let depth = 0\n  let quoted = false\n  let escaped = false\n\n  const flush = (): void => {\n    const record = buffer\n    buffer = ''\n    recordBytes = 0\n    depth = 0\n    quoted = false\n    escaped = false\n    if (!record.trim()) {\n      return\n    }\n    let formatted: string\n    try {\n      const value: unknown = JSON.parse(record)\n      // RFC 7464 requires trailing whitespace for non-self-delimiting primitive values.\n      if (format === 'json-seq' && typeof value !== 'object' && typeof value !== 'string' && !/\\s$/.test(record)) {\n        throw new Error('Truncated primitive')\n      }\n      if (format === 'json-seq' && value === null && !/\\s$/.test(record)) {\n        throw new Error('Truncated null')\n      }\n      formatted = `${JSON.stringify(value, null, 2)}\\n`\n    } catch {\n      formatted = `[Invalid JSON record]\\n${record.trim()}\\n`\n    }\n    emit(formatted)\n  }\n\n  const consume = (text: string): void => {\n    if (format !== 'json-lines' && format !== 'json-seq') {\n      emit(text)\n      return\n    }\n    for (const char of text) {\n      if (format === 'json-seq' && char === '\\x1e') {\n        flush()\n        started = true\n        continue\n      }\n      if (format === 'json-seq' && !started) {\n        if (char.trim()) {\n          throw new Error('JSON sequence record is missing its record separator.')\n        }\n        continue\n      }\n      buffer += char\n      recordBytes += getUtf8ByteLength(char)\n      if (recordBytes > MAX_STREAM_RECORD_SIZE) {\n        throw new Error('Stream record exceeds the 8 MiB display limit.')\n      }\n      if (format === 'json-lines') {\n        if (char === '\\n') {\n          flush()\n        }\n        continue\n      }\n      if (quoted) {\n        if (escaped) {\n          escaped = false\n        } else if (char === '\\\\') {\n          escaped = true\n        } else if (char === '\"') {\n          quoted = false\n        }\n      } else if (char === '\"') {\n        quoted = true\n      } else if (char === '{' || char === '[') {\n        depth++\n      } else if (char === '}' || char === ']') {\n        depth--\n      }\n      if (char === '\\n' && !quoted && depth === 0 && buffer.trim()) {\n        flush()\n        started = false\n      }\n    }\n  }\n\n  return {\n    push: (chunk) => consume(decoder.decode(chunk, { stream: true })),\n    finish: () => {\n      consume(decoder.decode())\n      flush()\n    },\n  }\n}\n"],"mappings":";;;;;;AAUA,IAAa,2BAA2B,gBAA0D;CAEhG,IAAI,CAAC,uBAAuB,WAAW,GACrC;CAEF,MAAM,EAAE,SAAS,MAAM,YAAY,cAAc,WAAW;CAC5D,IAAI,YAAY,qBACd,OAAO;CAET,IAAI;EAAC;EAAqB;EAAwB;CAAwB,CAAC,CAAC,SAAS,OAAO,GAC1F,OAAO;CAET,IAAI,YAAY,cAAc,QAAQ,SAAS,WAAW,GACxD,OAAO;CAET,OAAO,SAAS,cAAc,cAAc,KAAA;AAC9C;;AASA,IAAM,yBAAyB,IAAI,OAAO;;AAG1C,IAAa,8BAA8B,aAAqB,SAAuD;CACrH,MAAM,SAAS,wBAAwB,WAAW;CAClD,IAAI,WAAW,aACb,OAAO,sBAAsB,aAAa,IAAI;CAEhD,MAAM,UAAU,IAAI,YAAY,SAAS,EAAE,OAAO,WAAW,UAAU,WAAW,KAAA,EAAU,CAAC;CAC7F,IAAI,SAAS;CACb,IAAI,cAAc;CAClB,IAAI,UAAU;CACd,IAAI,QAAQ;CACZ,IAAI,SAAS;CACb,IAAI,UAAU;CAEd,MAAM,cAAoB;EACxB,MAAM,SAAS;EACf,SAAS;EACT,cAAc;EACd,QAAQ;EACR,SAAS;EACT,UAAU;EACV,IAAI,CAAC,OAAO,KAAK,GACf;EAEF,IAAI;EACJ,IAAI;GACF,MAAM,QAAiB,KAAK,MAAM,MAAM;GAExC,IAAI,WAAW,cAAc,OAAO,UAAU,YAAY,OAAO,UAAU,YAAY,CAAC,MAAM,KAAK,MAAM,GACvG,MAAM,IAAI,MAAM,qBAAqB;GAEvC,IAAI,WAAW,cAAc,UAAU,QAAQ,CAAC,MAAM,KAAK,MAAM,GAC/D,MAAM,IAAI,MAAM,gBAAgB;GAElC,YAAY,GAAG,KAAK,UAAU,OAAO,MAAM,CAAC,EAAE;EAChD,QAAQ;GACN,YAAY,0BAA0B,OAAO,KAAK,EAAE;EACtD;EACA,KAAK,SAAS;CAChB;CAEA,MAAM,WAAW,SAAuB;EACtC,IAAI,WAAW,gBAAgB,WAAW,YAAY;GACpD,KAAK,IAAI;GACT;EACF;EACA,KAAK,MAAM,QAAQ,MAAM;GACvB,IAAI,WAAW,cAAc,SAAS,KAAQ;IAC5C,MAAM;IACN,UAAU;IACV;GACF;GACA,IAAI,WAAW,cAAc,CAAC,SAAS;IACrC,IAAI,KAAK,KAAK,GACZ,MAAM,IAAI,MAAM,uDAAuD;IAEzE;GACF;GACA,UAAU;GACV,eAAe,kBAAkB,IAAI;GACrC,IAAI,cAAc,wBAChB,MAAM,IAAI,MAAM,gDAAgD;GAElE,IAAI,WAAW,cAAc;IAC3B,IAAI,SAAS,MACX,MAAM;IAER;GACF;GACA,IAAI;QACE,SACF,UAAU;SACL,IAAI,SAAS,MAClB,UAAU;SACL,IAAI,SAAS,MAClB,SAAS;GAAA,OAEN,IAAI,SAAS,MAClB,SAAS;QACJ,IAAI,SAAS,OAAO,SAAS,KAClC;QACK,IAAI,SAAS,OAAO,SAAS,KAClC;GAEF,IAAI,SAAS,QAAQ,CAAC,UAAU,UAAU,KAAK,OAAO,KAAK,GAAG;IAC5D,MAAM;IACN,UAAU;GACZ;EACF;CACF;CAEA,OAAO;EACL,OAAO,UAAU,QAAQ,QAAQ,OAAO,OAAO,EAAE,QAAQ,KAAK,CAAC,CAAC;EAChE,cAAc;GACZ,QAAQ,QAAQ,OAAO,CAAC;GACxB,MAAM;EACR;CACF;AACF"}

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBar.vue.d.ts

@@ -12,6 +12,8 @@ import { type History } from './AddressBarHistory.vue.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 export type AddressBarProps = {
+    /** An external example must finish loading before sending. */
+    executionDisabled?: boolean;
     /** Current request path */
     path: string;
     /** Current request method */
@@ -38,7 +40,7 @@ export type AddressBarProps = {
     serverMeta: ServerMeta;
 };
 declare const __VLS_export: import("vue").DefineComponent<AddressBarProps, {
-    methodConflict: import("vue").Ref<"head" | "delete" | "get" | "options" | "patch" | "post" | "put" | "query" | "trace" | null, "head" | "delete" | "get" | "options" | "patch" | "post" | "put" | "query" | "trace" | null>;
+    methodConflict: import("vue").Ref<"head" | "delete" | "query" | "get" | "options" | "patch" | "post" | "put" | "trace" | null, "head" | "delete" | "query" | "get" | "options" | "patch" | "post" | "put" | "trace" | null>;
     pathConflict: import("vue").Ref<string | null, string | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "select:history:item": (payload: {

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

@@ -1 +1 @@
-{"version":3,"file":"AddressBar.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBar.vue"],"names":[],"mappings":"AAmuBA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAIrF,OAAO,KAAK,EAEV,UAAU,EACV,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAoBhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAA0B,EAAE,KAAK,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAGzE;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,MAAM,MAAM,eAAe,GAAG;IAC5B,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,MAAM,EAAE,cAAc,CAAA;IACtB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4BAA4B;IAC5B,YAAY,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAA;IAClB,gCAAgC;IAChC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,mDAAmD;IACnD,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,8BAA8B;IAC9B,OAAO,EAAE,OAAO,EAAE,CAAA;IAClB,oBAAoB;IACpB,MAAM,EAAE,YAAY,CAAA;IACpB,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,kBAAkB;IAClB,WAAW,EAAE,kBAAkB,CAAA;IAC/B,sCAAsC;IACtC,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AACD,QAAA,MAAM,YAAY;;;;;eAqB6B,MAAM;;;;;;eAAN,MAAM;;;;kFA0gCjD,CAAC"}
+{"version":3,"file":"AddressBar.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBar.vue"],"names":[],"mappings":"AAqvBA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAIrF,OAAO,KAAK,EAEV,UAAU,EACV,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAqBhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAA0B,EAAE,KAAK,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAGzE;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,MAAM,MAAM,eAAe,GAAG;IAC5B,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,MAAM,EAAE,cAAc,CAAA;IACtB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4BAA4B;IAC5B,YAAY,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAA;IAClB,gCAAgC;IAChC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,mDAAmD;IACnD,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,8BAA8B;IAC9B,OAAO,EAAE,OAAO,EAAE,CAAA;IAClB,oBAAoB;IACpB,MAAM,EAAE,YAAY,CAAA;IACpB,gBAAgB;IAChB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,kBAAkB;IAClB,WAAW,EAAE,kBAAkB,CAAA;IAC/B,sCAAsC;IACtC,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AACD,QAAA,MAAM,YAAY;;;;;eAqB6B,MAAM;;;;;;eAAN,MAAM;;;;kFAuhCjD,CAAC"}

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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import AddressBar_vue_vue_type_script_setup_true_lang_default from "./AddressBar.vue.script.js";
 /* empty css                         */
 //#region src/v2/blocks/scalar-address-bar-block/components/AddressBar.vue
-var AddressBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(AddressBar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1f68de05"]]);
+var AddressBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(AddressBar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-65ff0ebf"]]);
 //#endregion
 export { AddressBar_default as default };
 

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

@@ -1 +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  /** Whether the request target belongs to an OpenAPI webhook. */\n  isWebhook?: boolean\n  /** Openapi document slug */\n  documentSlug: string\n  /** Currently selected example key for the current operation */\n  exampleKey: string\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 { ScalarButton } from '@scalar/components/button'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarWrappingText } from '@scalar/components/wrapping-text'\nimport { getSelector } from '@scalar/helpers/dom/get-selector'\nimport { REQUEST_METHODS } from '@scalar/helpers/http/http-info'\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { extractServerFromPath } from '@scalar/helpers/url/extract-server-from-path'\nimport { ScalarIconCopy, ScalarIconWarningCircle } from '@scalar/icons'\nimport { EditorView } from '@scalar/use-codemirror'\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.2/strict/openapi-document'\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { getOperationExampleKey } from '@/v2/blocks/operation-block/helpers/response-cache'\nimport { isPlaceholderPath } from '@/v2/blocks/scalar-address-bar-block/helpers/is-placeholder-path'\nimport { refocusBlurTarget } from '@/v2/blocks/scalar-address-bar-block/helpers/refocus-blur-target'\nimport { useLoadingAnimation } from '@/v2/blocks/scalar-address-bar-block/hooks/use-loading-animation'\nimport { usePathMasking } from '@/v2/blocks/scalar-address-bar-block/hooks/use-path-masking'\nimport { CodeInput } from '@/v2/components/code-input'\nimport { ServerDropdown } from '@/v2/components/server'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport AddressBarHistory, { type History } from './AddressBarHistory.vue'\n\nconst {\n  path,\n  method,\n  layout,\n  eventBus,\n  exampleKey,\n  documentSlug,\n  server,\n  servers,\n  environment,\n  serverMeta,\n  isWebhook = false,\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  /** Update the full destination URL used to deliver a webhook. */\n  (e: 'update:webhook-url', url: string): void\n}>()\n\n// ───────────────────────────────────────────────────────────────────\n// Template refs & reactive state\n// ───────────────────────────────────────────────────────────────────\n\nconst id = useId()\nconst sendButtonRef = useTemplateRef('sendButtonRef')\nconst mobileSendButtonRef = useTemplateRef('mobileSendButtonRef')\nconst addressBarRef = useTemplateRef('addressBarRef')\n\nconst { percentage, startLoading, stopLoading, isLoading } =\n  useLoadingAnimation()\n\nconst pathConflict = ref<string | null>(null)\nconst methodConflict = ref<HttpMethodType | null>(null)\nconst tabbedOut = ref(false)\nconst isServerDropdownOpen = ref(false)\nconst isHistoryDropdownOpen = ref(false)\n\n// ───────────────────────────────────────────────────────────────────\n// Derived state\n// ───────────────────────────────────────────────────────────────────\n\n/** Keeps the cursor visible past the fade-right overlay while typing */\nconst addressBarScrollMargins = EditorView.scrollMargins.of(() => ({\n  right: 24,\n}))\n\n/** Animated background transform for the loading indicator */\nconst style = computed(() => ({\n  backgroundColor: `color-mix(in srgb, transparent 90%, ${REQUEST_METHODS[method].colorVar})`,\n  transform: `translate3d(-${percentage.value}%,0,0)`,\n}))\n\n/** Whether there is a path or method conflict */\nconst hasConflict = computed(() => methodConflict.value || pathConflict.value)\n\n/**\n * Placeholder for the path field.\n *\n * Webhooks have no server to prefix the path, so the field doubles as the full\n * destination URL. Hint that a complete URL (including the host) is expected,\n * rather than a bare path.\n */\nconst pathPlaceholder = computed(() => {\n  if (server) {\n    return ''\n  }\n  return isWebhook\n    ? 'Enter the full webhook URL, e.g. https://example.com/hook'\n    : 'Enter a URL'\n})\n\n/** Whether either dropdown (server or history) is open */\nconst isDropdownOpen = computed(\n  () => isServerDropdownOpen.value || isHistoryDropdownOpen.value,\n)\n\n/** Uniquely identifies the currently selected operation + example */\nconst uniqueKey = computed(() =>\n  getOperationExampleKey(method, path, exampleKey, documentSlug),\n)\n\n/** Clear conflict state when switching to a different operation */\nwatch(uniqueKey, () => {\n  pathConflict.value = null\n  methodConflict.value = null\n})\n\n// ───────────────────────────────────────────────────────────────────\n// Focus helpers\n// ───────────────────────────────────────────────────────────────────\n\nconst handleFocusSendButton = (): void => {\n  const desktop = sendButtonRef.value?.$el\n  const mobile = mobileSendButtonRef.value?.$el\n\n  // Focus whichever send button is currently visible\n  if (desktop && desktop.offsetParent !== null) {\n    desktop.focus()\n  } else {\n    mobile?.focus()\n  }\n}\n\nconst handleFocusAddressBar = (\n  payload: ApiReferenceEvents['ui:focus:address-bar'],\n): void => {\n  // On non-desktop layouts, if already focused we let the browser handle the\n  // native behavior (e.g. selecting the browser's own address bar).\n  if (addressBarRef.value?.isFocused && layout !== 'desktop') {\n    return\n  }\n\n  addressBarRef.value?.focus('end')\n\n  if (payload && 'clear' in payload && payload.clear) {\n    addressBarRef.value?.setCodeMirrorContent('')\n  }\n\n  if (payload && 'event' in payload) {\n    payload.event.preventDefault()\n  }\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Path masking\n//\n// Drafts on `/` and auto-generated `/_scalar_temp...` paths are internal\n// placeholders — the address bar focuses and clears on mount and on\n// navigation so the user sees a blank prompt instead of the internal\n// path. The deferred mask only clears when CodeMirror still contains that\n// placeholder path, so a user edit that lands before the frame is preserved.\n// ───────────────────────────────────────────────────────────────────\n\nusePathMasking({\n  isReady: () => addressBarRef.value?.codeMirror,\n  operationKey: () => uniqueKey.value,\n  shouldMask: () => isPlaceholderPath(path, documentSlug),\n  // Defer to the next frame so focus() runs after click-handler side\n  // effects that move focus (e.g. a dropdown refocusing its trigger),\n  // which would otherwise blur our input and emit a spurious path\n  // update against the now-empty value.\n  onMask: () =>\n    requestAnimationFrame(() => {\n      const editorContent =\n        addressBarRef.value?.codeMirror?.state.doc.toString()\n\n      if (editorContent && editorContent !== path) {\n        return\n      }\n\n      handleFocusAddressBar({ clear: true })\n    }),\n})\n\n// ───────────────────────────────────────────────────────────────────\n// Server extraction\n// ───────────────────────────────────────────────────────────────────\n\n/** If the path contains a server URL, extract it and select or add that server */\nconst extractAndSelectServer = (targetPath: string): string => {\n  const extracted = extractServerFromPath(targetPath)\n  if (!extracted) {\n    return targetPath\n  }\n\n  const [url, remainingPath] = extracted\n\n  // Server is already selected — nothing to do\n  if (url === server?.url) {\n    return remainingPath\n  }\n\n  const matchingServer = servers.find((s) => s.url === url)\n  if (matchingServer) {\n    eventBus.emit('server:update:selected', { url, meta: serverMeta })\n  } else {\n    eventBus.emit('server:add:server', {\n      url,\n      select: true,\n      meta: { type: 'operation', path, method },\n    })\n  }\n\n  return remainingPath\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Path / method updates\n// ───────────────────────────────────────────────────────────────────\n\nconst normalizePath = (value: string): string =>\n  value.startsWith('/') ? value : `/${value}`\n\n/** Emit a path/method update and reconcile conflicts + cursor state on the result */\nconst emitPathMethodUpdate = (\n  targetMethod: HttpMethodType,\n  targetPath: string,\n  blurTargetSelector: string | null = null,\n): void => {\n  if (isWebhook) {\n    // A webhook has no OpenAPI server, so the field holds the full destination\n    // URL. Keep exactly what the user entered — do not split it into an invisible\n    // server plus a leftover path, and do not force a leading slash. That split\n    // is what made a typed URL collapse to a stray \"/\" on blur.\n    const webhookUrl = targetPath.trim()\n    addressBarRef.value?.setCodeMirrorContent(webhookUrl)\n    emit('update:webhook-url', webhookUrl)\n    methodConflict.value = null\n    pathConflict.value = null\n    nextTick(() => refocusBlurTarget(blurTargetSelector))\n    return\n  }\n\n  const extractedPath = extractAndSelectServer(targetPath)\n  const normalizedPath = normalizePath(extractedPath)\n\n  // Keep CodeMirror in sync so a conflict does not leave a stale value on screen\n  addressBarRef.value?.setCodeMirrorContent(normalizedPath)\n\n  eventBus.emit('operation:update:pathMethod', {\n    meta: { method, path },\n    blurTargetSelector,\n    payload: { method: targetMethod, path: normalizedPath },\n    callback: (status, returnedSelector) => {\n      if (status === 'success' || status === 'no-change') {\n        methodConflict.value = null\n        pathConflict.value = null\n      } else if (status === 'conflict') {\n        if (targetMethod !== method) {\n          methodConflict.value = targetMethod\n        }\n        if (normalizedPath !== path) {\n          pathConflict.value = normalizedPath\n        }\n\n        return\n      }\n\n      // Edge case: pasting a full URL extracts the server but leaves the path\n      // unchanged. CodeMirror still shows the full URL, so force it back to\n      // just the path.\n      const mirrorContent = addressBarRef.value?.codeMirrorRef?.textContent\n      if (\n        status === 'no-change' &&\n        mirrorContent &&\n        mirrorContent !== extractedPath\n      ) {\n        addressBarRef.value?.setCodeMirrorContent(extractedPath)\n      }\n\n      nextTick(() => refocusBlurTarget(returnedSelector))\n    },\n  })\n}\n\n/** Change the operation's method, preferring the conflicting path if present */\nconst handleMethodChange = (newMethod: HttpMethodType): void =>\n  emitPathMethodUpdate(newMethod, pathConflict.value ?? path)\n\n/**\n * Save the path on blur and replay the click that caused the blur (so e.g. a\n * click on the Send button still fires after the async update resolves).\n *\n * Tab-outs do not replay — tabbing to a button should not trigger its click\n * (`tabbedOut` is set on `@keydown.tab`).\n *\n * Programmatic focus moves also do not replay. On first navigation into a\n * draft operation, `usePathMasking` focuses and clears the address bar while\n * `ScalarSidebarNestedItems` focuses the drilled-in Back button in\n * `nextTick`. That steals focus from CodeMirror, fires blur with a\n * `relatedTarget` (the Back button), and without a guard we would treat it\n * like a user click: capture the selector, then `refocusBlurTarget` would\n * synthesize `.click()` on Back and navigate away.\n *\n * `FocusEvent.sourceCapabilities` is null when no input device caused the\n * focus change (e.g. `element.focus()`). A real pointer click sets it on the\n * blur that precedes the click, so we still replay Send and other buttons.\n */\nconst handlePathBlur = (newPath: string, event: FocusEvent): void => {\n  const relatedTarget =\n    event.relatedTarget instanceof Element ? event.relatedTarget : null\n  const blurTargetSelector =\n    tabbedOut.value ||\n    ('sourceCapabilities' in event && event.sourceCapabilities === null)\n      ? null\n      : getSelector(relatedTarget)\n  tabbedOut.value = false\n\n  emitPathMethodUpdate(\n    methodConflict.value ?? method,\n    newPath,\n    blurTargetSelector,\n  )\n}\n\n/** Save the path on Enter and trigger the Send button after the update resolves */\nconst handlePathSubmit = (\n  newPath: string,\n  event: KeyboardEvent | FocusEvent,\n): void => {\n  // Prevent the global hotkey listener from also handling this Enter press\n  event.stopPropagation()\n\n  emitPathMethodUpdate(\n    methodConflict.value ?? method,\n    newPath,\n    '[data-addressbar-action=\"send\"]',\n  )\n}\n\n/** Unset the server when backspace is pressed on an empty path */\nconst handlePathBackspace = (event: KeyboardEvent): void => {\n  if (event.target instanceof HTMLElement && event.target.innerText === '\\n') {\n    // A webhook has no server to unset; its full URL lives in the field itself.\n    if (isWebhook) {\n      return\n    }\n    eventBus.emit('server:update:selected', { url: '', meta: serverMeta })\n  }\n}\n\nconst handleServerSelect = (\n  payload: ApiReferenceEvents['server:update:selected'],\n): void => {\n  eventBus.emit('server:update:selected', payload)\n}\n\nconst handleServerVariable = (\n  payload: ApiReferenceEvents['server:update:variables'],\n): void => {\n  eventBus.emit('server:update:variables', payload)\n}\n\n/** Address bar copy is handled in OperationBlock (same URL as Send). */\nconst requestCopyUrl = (): void => {\n  eventBus.emit('copy-url:address-bar')\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Navigation\n// ───────────────────────────────────────────────────────────────────\n\nconst navigateToServersPage = (): void => {\n  if (serverMeta.type === 'operation') {\n    eventBus.emit('ui:navigate', {\n      page: 'operation',\n      path: 'servers',\n      operationPath: serverMeta.path,\n      method: serverMeta.method,\n    })\n    return\n  }\n\n  eventBus.emit('ui:navigate', { page: 'document', path: 'servers' })\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Lifecycle\n// ───────────────────────────────────────────────────────────────────\n\nconst unsubscribes: Array<() => void> = []\n\nonMounted(() => {\n  unsubscribes.push(\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})\n\nonBeforeUnmount(() => {\n  for (const unsubscribe of unsubscribes) {\n    unsubscribe()\n  }\n\n  // Prevents the loading animation from continuing after unmount\n  stopLoading()\n})\n\ndefineExpose({\n  methodConflict,\n  pathConflict,\n})\n</script>\n<template>\n  <!--\n    Address bar.\n\n    The wide-container layout matches the original single-row bar:\n    `[Method | URL | Copy | History | Send]`. When the surrounding\n    `@container` drops below `@3xl` the bar collapses to\n    `[URL | History]` and a second row appears beneath it with a\n    duplicate `Method`, `Copy`, and `Send` so the URL gets the full\n    container width while every action stays on the same line as the\n    send button.\n  -->\n  <div\n    class=\"order-last flex h-auto w-full max-w-3xl grow-3 flex-wrap items-stretch [--scalar-address-bar-height:32px] @3xl:order-0 @3xl:flex-nowrap\">\n    <!-- Address Bar -->\n    <div\n      :id=\"id\"\n      class=\"address-bar-bg-states text-xxs group relative flex h-(--scalar-address-bar-height) w-full flex-1 flex-row items-stretch rounded-lg p-0.75\"\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\n      <!--\n        Method, Copy, and Send are hidden in mobile mode (container\n        narrower than `@3xl`) and the duplicate buttons in the trailing\n        mobile actions row take over at that point.\n      -->\n      <div class=\"hidden @3xl:flex\">\n        <HttpMethod\n          :isEditable=\"layout !== 'modal' && !isWebhook\"\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=\"isWebhook ? 'modal' : layout\"\n          :meta=\"serverMeta\"\n          :server=\"server\"\n          :servers=\"servers\"\n          :target=\"id\"\n          @update:open=\"(value) => (isServerDropdownOpen = value)\"\n          @update:selectedServer=\"handleServerSelect\"\n          @update:servers=\"navigateToServersPage\"\n          @update:variable=\"handleServerVariable\" />\n\n        <!-- Path + URL + env vars -->\n        <CodeInput\n          ref=\"addressBarRef\"\n          alwaysEmitChange\n          aria-label=\"Path\"\n          class=\"ml-1 min-w-fit pl-px outline-none\"\n          disableCloseBrackets\n          :disabled=\"layout === 'modal' && !isWebhook\"\n          disableEnter\n          disableTabIndent\n          :emitOnBlur=\"false\"\n          :environment=\"environment\"\n          :extensions=\"[addressBarScrollMargins]\"\n          importCurl\n          :layout=\"layout\"\n          :modelValue=\"path\"\n          :placeholder=\"pathPlaceholder\"\n          server\n          @blur=\"handlePathBlur\"\n          @keydown.delete=\"handlePathBackspace\"\n          @keydown.tab=\"tabbedOut = true\"\n          @submit=\"handlePathSubmit\" />\n      </div>\n\n      <!-- Copy url button -->\n      <ScalarButton\n        class=\"hover:bg-b-3 mx-1 hidden @3xl:flex\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click=\"requestCopyUrl\">\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=\"z-context 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\n      <ScalarButton\n        ref=\"sendButtonRef\"\n        class=\"relative hidden h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold @3xl:flex\"\n        data-addressbar-action=\"send\"\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 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\n    <!--\n      Mobile actions row. Visible by default and hidden once the\n      container reaches `@3xl`, where the duplicate Method / Copy /\n      Send buttons move back into the bar itself.\n    -->\n    <div\n      class=\"mt-2 flex h-(--scalar-address-bar-height) w-full items-stretch gap-1 @3xl:hidden\">\n      <HttpMethod\n        :isEditable=\"layout !== 'modal' && !isWebhook\"\n        isSquare\n        :method=\"methodConflict ?? method\"\n        teleport\n        @change=\"handleMethodChange\" />\n      <ScalarButton\n        class=\"hover:bg-b-3 ml-auto\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click=\"requestCopyUrl\">\n        <ScalarIconCopy />\n        <span class=\"sr-only\">Copy URL</span>\n      </ScalarButton>\n      <ScalarButton\n        ref=\"mobileSendButtonRef\"\n        class=\"relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold\"\n        data-addressbar-action=\"send\"\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\">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  -ms-overflow-style: none;\n  /* Fade the URL at the viewport edges. Mask lives on the scrollport (this\n     element) rather than on `.cm-scroller`, whose width follows the URL's\n     full content and pushes the right edge off-screen when overflowing. */\n  mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    black 6px,\n    black calc(100% - 24px),\n    transparent 100%\n  );\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\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":""}
+{"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  /** An external example must finish loading before sending. */\n  executionDisabled?: boolean\n  /** Current request path */\n  path: string\n  /** Current request method */\n  method: HttpMethodType\n  /** Whether the request target belongs to an OpenAPI webhook. */\n  isWebhook?: boolean\n  /** Openapi document slug */\n  documentSlug: string\n  /** Currently selected example key for the current operation */\n  exampleKey: string\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 { ScalarButton } from '@scalar/components/button'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { getSelector } from '@scalar/helpers/dom/get-selector'\nimport { REQUEST_METHODS } from '@scalar/helpers/http/http-info'\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { extractServerFromPath } from '@scalar/helpers/url/extract-server-from-path'\nimport { ScalarIconCopy, ScalarIconWarningCircle } from '@scalar/icons'\nimport { EditorView } from '@scalar/use-codemirror'\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.2/strict/openapi-document'\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { getOperationExampleKey } from '@/v2/blocks/operation-block/helpers/response-cache'\nimport { isPlaceholderPath } from '@/v2/blocks/scalar-address-bar-block/helpers/is-placeholder-path'\nimport { refocusBlurTarget } from '@/v2/blocks/scalar-address-bar-block/helpers/refocus-blur-target'\nimport { useLoadingAnimation } from '@/v2/blocks/scalar-address-bar-block/hooks/use-loading-animation'\nimport { usePathMasking } from '@/v2/blocks/scalar-address-bar-block/hooks/use-path-masking'\nimport { CodeInput } from '@/v2/components/code-input'\nimport { ServerDropdown } from '@/v2/components/server'\nimport { useLocalization } from '@/v2/features/localization'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport AddressBarHistory, { type History } from './AddressBarHistory.vue'\n\nconst {\n  path,\n  method,\n  layout,\n  eventBus,\n  exampleKey,\n  documentSlug,\n  server,\n  servers,\n  environment,\n  serverMeta,\n  isWebhook = false,\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  /** Update the full destination URL used to deliver a webhook. */\n  (e: 'update:webhook-url', url: string): void\n}>()\n\nconst { translate } = useLocalization()\n\n// ───────────────────────────────────────────────────────────────────\n// Template refs & reactive state\n// ───────────────────────────────────────────────────────────────────\n\nconst id = useId()\nconst sendButtonRef = useTemplateRef('sendButtonRef')\nconst mobileSendButtonRef = useTemplateRef('mobileSendButtonRef')\nconst addressBarRef = useTemplateRef('addressBarRef')\n\nconst { percentage, startLoading, stopLoading, isLoading } =\n  useLoadingAnimation()\n\nconst pathConflict = ref<string | null>(null)\nconst methodConflict = ref<HttpMethodType | null>(null)\nconst tabbedOut = ref(false)\nconst isServerDropdownOpen = ref(false)\nconst isHistoryDropdownOpen = ref(false)\n\n// ───────────────────────────────────────────────────────────────────\n// Derived state\n// ───────────────────────────────────────────────────────────────────\n\n/** Keeps the cursor visible past the fade-right overlay while typing */\nconst addressBarScrollMargins = EditorView.scrollMargins.of(() => ({\n  right: 24,\n}))\n\n/** Animated background transform for the loading indicator */\nconst style = computed(() => ({\n  backgroundColor: `color-mix(in srgb, transparent 90%, ${REQUEST_METHODS[method].colorVar})`,\n  transform: `translate3d(-${percentage.value}%,0,0)`,\n}))\n\n/** Whether there is a path or method conflict */\nconst hasConflict = computed(() => methodConflict.value || pathConflict.value)\n\n/**\n * Placeholder for the path field.\n *\n * Webhooks have no server to prefix the path, so the field doubles as the full\n * destination URL. Hint that a complete URL (including the host) is expected,\n * rather than a bare path.\n */\nconst pathPlaceholder = computed(() => {\n  if (server) {\n    return ''\n  }\n  return isWebhook\n    ? translate('apiClient.addressBar.webhookUrlPlaceholder')\n    : translate('apiClient.addressBar.urlPlaceholder')\n})\n\n/** Whether either dropdown (server or history) is open */\nconst isDropdownOpen = computed(\n  () => isServerDropdownOpen.value || isHistoryDropdownOpen.value,\n)\n\n/** Uniquely identifies the currently selected operation + example */\nconst uniqueKey = computed(() =>\n  getOperationExampleKey(method, path, exampleKey, documentSlug),\n)\n\n/** Clear conflict state when switching to a different operation */\nwatch(uniqueKey, () => {\n  pathConflict.value = null\n  methodConflict.value = null\n})\n\n// ───────────────────────────────────────────────────────────────────\n// Focus helpers\n// ───────────────────────────────────────────────────────────────────\n\nconst handleFocusSendButton = (): void => {\n  const desktop = sendButtonRef.value?.$el\n  const mobile = mobileSendButtonRef.value?.$el\n\n  // Focus whichever send button is currently visible\n  if (desktop && desktop.offsetParent !== null) {\n    desktop.focus()\n  } else {\n    mobile?.focus()\n  }\n}\n\nconst handleFocusAddressBar = (\n  payload: ApiReferenceEvents['ui:focus:address-bar'],\n): void => {\n  // On non-desktop layouts, if already focused we let the browser handle the\n  // native behavior (e.g. selecting the browser's own address bar).\n  if (addressBarRef.value?.isFocused && layout !== 'desktop') {\n    return\n  }\n\n  addressBarRef.value?.focus('end')\n\n  if (payload && 'clear' in payload && payload.clear) {\n    addressBarRef.value?.setCodeMirrorContent('')\n  }\n\n  if (payload && 'event' in payload) {\n    payload.event.preventDefault()\n  }\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Path masking\n//\n// Drafts on `/` and auto-generated `/_scalar_temp...` paths are internal\n// placeholders — the address bar focuses and clears on mount and on\n// navigation so the user sees a blank prompt instead of the internal\n// path. The deferred mask only clears when CodeMirror still contains that\n// placeholder path, so a user edit that lands before the frame is preserved.\n// ───────────────────────────────────────────────────────────────────\n\nusePathMasking({\n  isReady: () => addressBarRef.value?.codeMirror,\n  operationKey: () => uniqueKey.value,\n  shouldMask: () => isPlaceholderPath(path, documentSlug),\n  // Defer to the next frame so focus() runs after click-handler side\n  // effects that move focus (e.g. a dropdown refocusing its trigger),\n  // which would otherwise blur our input and emit a spurious path\n  // update against the now-empty value.\n  onMask: () =>\n    requestAnimationFrame(() => {\n      const editorContent =\n        addressBarRef.value?.codeMirror?.state.doc.toString()\n\n      if (editorContent && editorContent !== path) {\n        return\n      }\n\n      handleFocusAddressBar({ clear: true })\n    }),\n})\n\n// ───────────────────────────────────────────────────────────────────\n// Server extraction\n// ───────────────────────────────────────────────────────────────────\n\n/** If the path contains a server URL, extract it and select or add that server */\nconst extractAndSelectServer = (targetPath: string): string => {\n  const extracted = extractServerFromPath(targetPath)\n  if (!extracted) {\n    return targetPath\n  }\n\n  const [url, remainingPath] = extracted\n\n  // Server is already selected — nothing to do\n  if (url === server?.url) {\n    return remainingPath\n  }\n\n  const matchingServer = servers.find((s) => s.url === url)\n  if (matchingServer) {\n    eventBus.emit('server:update:selected', { url, meta: serverMeta })\n  } else {\n    eventBus.emit('server:add:server', {\n      url,\n      select: true,\n      meta: { type: 'operation', path, method },\n    })\n  }\n\n  return remainingPath\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Path / method updates\n// ───────────────────────────────────────────────────────────────────\n\nconst normalizePath = (value: string): string =>\n  value.startsWith('/') ? value : `/${value}`\n\n/** Emit a path/method update and reconcile conflicts + cursor state on the result */\nconst emitPathMethodUpdate = (\n  targetMethod: HttpMethodType,\n  targetPath: string,\n  blurTargetSelector: string | null = null,\n): void => {\n  if (isWebhook) {\n    // A webhook has no OpenAPI server, so the field holds the full destination\n    // URL. Keep exactly what the user entered — do not split it into an invisible\n    // server plus a leftover path, and do not force a leading slash. That split\n    // is what made a typed URL collapse to a stray \"/\" on blur.\n    const webhookUrl = targetPath.trim()\n    addressBarRef.value?.setCodeMirrorContent(webhookUrl)\n    emit('update:webhook-url', webhookUrl)\n    methodConflict.value = null\n    pathConflict.value = null\n    nextTick(() => refocusBlurTarget(blurTargetSelector))\n    return\n  }\n\n  const extractedPath = extractAndSelectServer(targetPath)\n  const normalizedPath = normalizePath(extractedPath)\n\n  // Keep CodeMirror in sync so a conflict does not leave a stale value on screen\n  addressBarRef.value?.setCodeMirrorContent(normalizedPath)\n\n  eventBus.emit('operation:update:pathMethod', {\n    meta: { method, path },\n    blurTargetSelector,\n    payload: { method: targetMethod, path: normalizedPath },\n    callback: (status, returnedSelector) => {\n      if (status === 'success' || status === 'no-change') {\n        methodConflict.value = null\n        pathConflict.value = null\n      } else if (status === 'conflict') {\n        if (targetMethod !== method) {\n          methodConflict.value = targetMethod\n        }\n        if (normalizedPath !== path) {\n          pathConflict.value = normalizedPath\n        }\n\n        return\n      }\n\n      // Edge case: pasting a full URL extracts the server but leaves the path\n      // unchanged. CodeMirror still shows the full URL, so force it back to\n      // just the path.\n      const mirrorContent = addressBarRef.value?.codeMirrorRef?.textContent\n      if (\n        status === 'no-change' &&\n        mirrorContent &&\n        mirrorContent !== extractedPath\n      ) {\n        addressBarRef.value?.setCodeMirrorContent(extractedPath)\n      }\n\n      nextTick(() => refocusBlurTarget(returnedSelector))\n    },\n  })\n}\n\n/** Change the operation's method, preferring the conflicting path if present */\nconst handleMethodChange = (newMethod: HttpMethodType): void =>\n  emitPathMethodUpdate(newMethod, pathConflict.value ?? path)\n\n/**\n * Save the path on blur and replay the click that caused the blur (so e.g. a\n * click on the Send button still fires after the async update resolves).\n *\n * Tab-outs do not replay — tabbing to a button should not trigger its click\n * (`tabbedOut` is set on `@keydown.tab`).\n *\n * Programmatic focus moves also do not replay. On first navigation into a\n * draft operation, `usePathMasking` focuses and clears the address bar while\n * `ScalarSidebarNestedItems` focuses the drilled-in Back button in\n * `nextTick`. That steals focus from CodeMirror, fires blur with a\n * `relatedTarget` (the Back button), and without a guard we would treat it\n * like a user click: capture the selector, then `refocusBlurTarget` would\n * synthesize `.click()` on Back and navigate away.\n *\n * `FocusEvent.sourceCapabilities` is null when no input device caused the\n * focus change (e.g. `element.focus()`). A real pointer click sets it on the\n * blur that precedes the click, so we still replay Send and other buttons.\n */\nconst handlePathBlur = (newPath: string, event: FocusEvent): void => {\n  const relatedTarget =\n    event.relatedTarget instanceof Element ? event.relatedTarget : null\n  const blurTargetSelector =\n    tabbedOut.value ||\n    ('sourceCapabilities' in event && event.sourceCapabilities === null)\n      ? null\n      : getSelector(relatedTarget)\n  tabbedOut.value = false\n\n  emitPathMethodUpdate(\n    methodConflict.value ?? method,\n    newPath,\n    blurTargetSelector,\n  )\n}\n\n/** Save the path on Enter and trigger the Send button after the update resolves */\nconst handlePathSubmit = (\n  newPath: string,\n  event: KeyboardEvent | FocusEvent,\n): void => {\n  // Prevent the global hotkey listener from also handling this Enter press\n  event.stopPropagation()\n\n  emitPathMethodUpdate(\n    methodConflict.value ?? method,\n    newPath,\n    '[data-addressbar-action=\"send\"]',\n  )\n}\n\n/** Unset the server when backspace is pressed on an empty path */\nconst handlePathBackspace = (event: KeyboardEvent): void => {\n  if (event.target instanceof HTMLElement && event.target.innerText === '\\n') {\n    // A webhook has no server to unset; its full URL lives in the field itself.\n    if (isWebhook) {\n      return\n    }\n    eventBus.emit('server:update:selected', { url: '', meta: serverMeta })\n  }\n}\n\nconst handleServerSelect = (\n  payload: ApiReferenceEvents['server:update:selected'],\n): void => {\n  eventBus.emit('server:update:selected', payload)\n}\n\nconst handleServerVariable = (\n  payload: ApiReferenceEvents['server:update:variables'],\n): void => {\n  eventBus.emit('server:update:variables', payload)\n}\n\n/** Address bar copy is handled in OperationBlock (same URL as Send). */\nconst requestCopyUrl = (): void => {\n  eventBus.emit('copy-url:address-bar')\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Navigation\n// ───────────────────────────────────────────────────────────────────\n\nconst navigateToServersPage = (): void => {\n  if (serverMeta.type === 'operation') {\n    eventBus.emit('ui:navigate', {\n      page: 'operation',\n      path: 'servers',\n      operationPath: serverMeta.path,\n      method: serverMeta.method,\n    })\n    return\n  }\n\n  eventBus.emit('ui:navigate', { page: 'document', path: 'servers' })\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Lifecycle\n// ───────────────────────────────────────────────────────────────────\n\nconst unsubscribes: Array<() => void> = []\n\nonMounted(() => {\n  unsubscribes.push(\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})\n\nonBeforeUnmount(() => {\n  for (const unsubscribe of unsubscribes) {\n    unsubscribe()\n  }\n\n  // Prevents the loading animation from continuing after unmount\n  stopLoading()\n})\n\ndefineExpose({\n  methodConflict,\n  pathConflict,\n})\n</script>\n<template>\n  <!--\n    Address bar.\n\n    The wide-container layout matches the original single-row bar:\n    `[Method | URL | Copy | History | Send]`. When the surrounding\n    `@container` drops below `@3xl` the bar collapses to\n    `[URL | History]` and a second row appears beneath it with a\n    duplicate `Method`, `Copy`, and `Send` so the URL gets the full\n    container width while every action stays on the same line as the\n    send button.\n  -->\n  <div\n    class=\"order-last flex h-auto w-full max-w-3xl grow-3 flex-wrap items-stretch [--scalar-address-bar-height:32px] @3xl:order-0 @3xl:flex-nowrap\">\n    <!-- Address Bar -->\n    <div\n      :id=\"id\"\n      class=\"address-bar-bg-states text-xxs group relative flex h-(--scalar-address-bar-height) w-full flex-1 flex-row items-stretch rounded-lg p-0.75\"\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\n      <!--\n        Method, Copy, and Send are hidden in mobile mode (container\n        narrower than `@3xl`) and the duplicate buttons in the trailing\n        mobile actions row take over at that point.\n      -->\n      <div class=\"hidden @3xl:flex\">\n        <HttpMethod\n          :isEditable=\"layout !== 'modal' && !isWebhook\"\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        dir=\"ltr\">\n        <!-- Servers -->\n        <ServerDropdown\n          v-if=\"servers.length\"\n          :layout=\"isWebhook ? 'modal' : layout\"\n          :meta=\"serverMeta\"\n          :server=\"server\"\n          :servers=\"servers\"\n          :target=\"id\"\n          @update:open=\"(value) => (isServerDropdownOpen = value)\"\n          @update:selectedServer=\"handleServerSelect\"\n          @update:servers=\"navigateToServersPage\"\n          @update:variable=\"handleServerVariable\" />\n\n        <!-- Path + URL + env vars -->\n        <CodeInput\n          ref=\"addressBarRef\"\n          alwaysEmitChange\n          :aria-label=\"translate('apiClient.addressBar.path')\"\n          class=\"ml-1 min-w-fit pl-px outline-none\"\n          disableCloseBrackets\n          :disabled=\"layout === 'modal' && !isWebhook\"\n          disableEnter\n          disableTabIndent\n          :emitOnBlur=\"false\"\n          :environment=\"environment\"\n          :extensions=\"[addressBarScrollMargins]\"\n          importCurl\n          :layout=\"layout\"\n          :modelValue=\"path\"\n          :placeholder=\"pathPlaceholder\"\n          server\n          @blur=\"handlePathBlur\"\n          @keydown.delete=\"handlePathBackspace\"\n          @keydown.tab=\"tabbedOut = true\"\n          @submit=\"handlePathSubmit\" />\n      </div>\n\n      <!-- Copy url button -->\n      <ScalarButton\n        class=\"hover:bg-b-3 mx-1 hidden @3xl:flex\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click=\"requestCopyUrl\">\n        <ScalarIconCopy />\n        <span class=\"sr-only\">{{\n          translate('apiClient.addressBar.copyUrl')\n        }}</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=\"z-context 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            {{\n              translate('apiClient.addressBar.duplicateRequest', {\n                method: (methodConflict ?? method).toUpperCase(),\n                path: pathConflict ?? path,\n              })\n            }}\n          </div>\n        </div>\n      </div>\n\n      <ScalarButton\n        ref=\"sendButtonRef\"\n        class=\"relative hidden h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold @3xl:flex\"\n        data-addressbar-action=\"send\"\n        :disabled=\"isLoading || executionDisabled\"\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 flex\">{{\n            translate('apiClient.addressBar.send')\n          }}</span>\n        </span>\n        <span class=\"sr-only\"\n          >{{\n            translate('apiClient.addressBar.sendRequest', {\n              method,\n              url: `${server?.url ?? ''}${path}`,\n            })\n          }}\n        </span>\n      </ScalarButton>\n    </div>\n\n    <!--\n      Mobile actions row. Visible by default and hidden once the\n      container reaches `@3xl`, where the duplicate Method / Copy /\n      Send buttons move back into the bar itself.\n    -->\n    <div\n      class=\"mt-2 flex h-(--scalar-address-bar-height) w-full items-stretch gap-1 @3xl:hidden\">\n      <HttpMethod\n        :isEditable=\"layout !== 'modal' && !isWebhook\"\n        isSquare\n        :method=\"methodConflict ?? method\"\n        teleport\n        @change=\"handleMethodChange\" />\n      <ScalarButton\n        class=\"hover:bg-b-3 ml-auto\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click=\"requestCopyUrl\">\n        <ScalarIconCopy />\n        <span class=\"sr-only\">{{\n          translate('apiClient.addressBar.copyUrl')\n        }}</span>\n      </ScalarButton>\n      <ScalarButton\n        ref=\"mobileSendButtonRef\"\n        class=\"relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold\"\n        data-addressbar-action=\"send\"\n        :disabled=\"isLoading || executionDisabled\"\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\">{{\n            translate('apiClient.addressBar.send')\n          }}</span>\n        </span>\n        <span class=\"sr-only\"\n          >{{\n            translate('apiClient.addressBar.sendRequest', {\n              method,\n              url: `${server?.url ?? ''}${path}`,\n            })\n          }}\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  -ms-overflow-style: none;\n  /* Fade the URL at the viewport edges. Mask lives on the scrollport (this\n     element) rather than on `.cm-scroller`, whose width follows the URL's\n     full content and pushes the right edge off-screen when overflowing. */\n  mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    black 6px,\n    black calc(100% - 24px),\n    transparent 100%\n  );\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\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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../../features/localization/index.js";
 import HttpMethod_default from "../../../../components/HttpMethod/HttpMethod.vue.js";
 import CodeInput_default from "../../../components/code-input/CodeInput.vue.js";
 import { getOperationExampleKey } from "../../operation-block/helpers/response-cache.js";
@@ -7,40 +8,47 @@ import { useLoadingAnimation } from "../hooks/use-loading-animation.js";
 import { usePathMasking } from "../hooks/use-path-masking.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, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, toDisplayString, unref, useId, useTemplateRef, watch, withCtx, withKeys } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, toDisplayString, unref, useId, useTemplateRef, watch, withCtx, withKeys } from "vue";
 import { ScalarButton } from "@scalar/components/button";
 import { ScalarIconCopy, ScalarIconWarningCircle } from "@scalar/icons";
 import { REQUEST_METHODS } from "@scalar/helpers/http/http-info";
 import { ScalarIcon } from "@scalar/components/icon";
 import { EditorView } from "@scalar/use-codemirror";
-import { ScalarWrappingText } from "@scalar/components/wrapping-text";
 import { getSelector } from "@scalar/helpers/dom/get-selector";
 import { extractServerFromPath } from "@scalar/helpers/url/extract-server-from-path";
 //#region src/v2/blocks/scalar-address-bar-block/components/AddressBar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "order-last flex h-auto w-full max-w-3xl grow-3 flex-wrap items-stretch [--scalar-address-bar-height:32px] @3xl:order-0 @3xl:flex-nowrap" };
 var _hoisted_2 = ["id"];
 var _hoisted_3 = { class: "hidden @3xl:flex" };
-var _hoisted_4 = { class: "scroll-timeline-x scroll-timeline-x-hidden relative flex w-full bg-blend-normal" };
-var _hoisted_5 = {
+var _hoisted_4 = {
+	class: "scroll-timeline-x scroll-timeline-x-hidden relative flex w-full bg-blend-normal",
+	dir: "ltr"
+};
+var _hoisted_5 = { class: "sr-only" };
+var _hoisted_6 = {
 	key: 0,
 	class: "z-context absolute inset-x-0 top-[calc(100%+4px)] flex flex-col items-center rounded px-6"
 };
-var _hoisted_6 = { class: "text-c-danger bg-b-danger border-c-danger flex items-center gap-1 rounded border p-1" };
-var _hoisted_7 = { class: "min-w-0 flex-1" };
-var _hoisted_8 = {
+var _hoisted_7 = { class: "text-c-danger bg-b-danger border-c-danger flex items-center gap-1 rounded border p-1" };
+var _hoisted_8 = { class: "min-w-0 flex-1" };
+var _hoisted_9 = {
 	"aria-hidden": "true",
 	class: "inline-flex items-center gap-1"
 };
-var _hoisted_9 = { class: "sr-only" };
-var _hoisted_10 = { class: "mt-2 flex h-(--scalar-address-bar-height) w-full items-stretch gap-1 @3xl:hidden" };
-var _hoisted_11 = {
+var _hoisted_10 = { class: "text-xxs flex" };
+var _hoisted_11 = { class: "sr-only" };
+var _hoisted_12 = { class: "mt-2 flex h-(--scalar-address-bar-height) w-full items-stretch gap-1 @3xl:hidden" };
+var _hoisted_13 = { class: "sr-only" };
+var _hoisted_14 = {
 	"aria-hidden": "true",
 	class: "inline-flex items-center gap-1"
 };
-var _hoisted_12 = { class: "sr-only" };
+var _hoisted_15 = { class: "text-xxs" };
+var _hoisted_16 = { class: "sr-only" };
 var AddressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "AddressBar",
 	props: {
+		executionDisabled: { type: Boolean },
 		path: {},
 		method: {},
 		isWebhook: {
@@ -64,6 +72,7 @@ var AddressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
+		const { translate } = useLocalization();
 		const id = useId();
 		const sendButtonRef = useTemplateRef("sendButtonRef");
 		const mobileSendButtonRef = useTemplateRef("mobileSendButtonRef");
@@ -92,7 +101,7 @@ var AddressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		*/
 		const pathPlaceholder = computed(() => {
 			if (__props.server) return "";
-			return __props.isWebhook ? "Enter the full webhook URL, e.g. https://example.com/hook" : "Enter a URL";
+			return __props.isWebhook ? translate("apiClient.addressBar.webhookUrlPlaceholder") : translate("apiClient.addressBar.urlPlaceholder");
 		});
 		/** Whether either dropdown (server or history) is open */
 		const isDropdownOpen = computed(() => isServerDropdownOpen.value || isHistoryDropdownOpen.value);
@@ -305,7 +314,7 @@ var AddressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					ref_key: "addressBarRef",
 					ref: addressBarRef,
 					alwaysEmitChange: "",
-					"aria-label": "Path",
+					"aria-label": unref(translate)("apiClient.addressBar.path"),
 					class: "ml-1 min-w-fit pl-px outline-none",
 					disableCloseBrackets: "",
 					disabled: __props.layout === "modal" && !__props.isWebhook,
@@ -323,6 +332,7 @@ var AddressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					onKeydown: [withKeys(handlePathBackspace, ["delete"]), _cache[1] || (_cache[1] = withKeys(($event) => tabbedOut.value = true, ["tab"]))],
 					onSubmit: handlePathSubmit
 				}, null, 8, [
+					"aria-label",
 					"disabled",
 					"environment",
 					"extensions",
@@ -336,7 +346,7 @@ var AddressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					variant: "ghost",
 					onClick: requestCopyUrl
 				}, {
-					default: withCtx(() => [createVNode(unref(ScalarIconCopy)), _cache[6] || (_cache[6] = createElementVNode("span", { class: "sr-only" }, "Copy URL", -1))]),
+					default: withCtx(() => [createVNode(unref(ScalarIconCopy)), createElementVNode("span", _hoisted_5, toDisplayString(unref(translate)("apiClient.addressBar.copyUrl")), 1)]),
 					_: 1
 				}),
 				createVNode(AddressBarHistory_default, {
@@ -345,29 +355,29 @@ var AddressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					"onSelect:history:item": _cache[2] || (_cache[2] = (payload) => emit("select:history:item", payload)),
 					"onUpdate:open": _cache[3] || (_cache[3] = (value) => isHistoryDropdownOpen.value = value)
 				}, null, 8, ["history", "target"]),
-				hasConflict.value ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [createVNode(unref(ScalarIconWarningCircle), { size: "sm" }), createElementVNode("div", _hoisted_7, [
-					_cache[7] || (_cache[7] = createTextVNode(" A ", -1)),
-					createElementVNode("em", null, toDisplayString(methodConflict.value?.toUpperCase() ?? __props.method.toUpperCase()), 1),
-					_cache[8] || (_cache[8] = createTextVNode(" request to ", -1)),
-					createVNode(unref(ScalarWrappingText), { text: pathConflict.value ?? __props.path }, null, 8, ["text"]),
-					_cache[9] || (_cache[9] = createTextVNode(" already exists in this document ", -1))
-				])])])) : createCommentVNode("", true),
+				hasConflict.value ? (openBlock(), createElementBlock("div", _hoisted_6, [createElementVNode("div", _hoisted_7, [createVNode(unref(ScalarIconWarningCircle), { size: "sm" }), createElementVNode("div", _hoisted_8, toDisplayString(unref(translate)("apiClient.addressBar.duplicateRequest", {
+					method: (methodConflict.value ?? __props.method).toUpperCase(),
+					path: pathConflict.value ?? __props.path
+				})), 1)])])) : createCommentVNode("", true),
 				createVNode(unref(ScalarButton), {
 					ref_key: "sendButtonRef",
 					ref: sendButtonRef,
 					class: "relative hidden h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold @3xl:flex",
 					"data-addressbar-action": "send",
-					disabled: unref(isLoading),
+					disabled: unref(isLoading) || __props.executionDisabled,
 					onClick: _cache[4] || (_cache[4] = ($event) => emit("execute"))
 				}, {
-					default: withCtx(() => [createElementVNode("span", _hoisted_8, [createVNode(unref(ScalarIcon), {
+					default: withCtx(() => [createElementVNode("span", _hoisted_9, [createVNode(unref(ScalarIcon), {
 						class: "relative shrink-0 fill-current",
 						icon: "Play",
 						size: "xs"
-					}), _cache[10] || (_cache[10] = createElementVNode("span", { class: "text-xxs flex" }, "Send", -1))]), createElementVNode("span", _hoisted_9, " Send " + toDisplayString(__props.method) + " request to " + toDisplayString(__props.server?.url ?? "") + toDisplayString(__props.path), 1)]),
+					}), createElementVNode("span", _hoisted_10, toDisplayString(unref(translate)("apiClient.addressBar.send")), 1)]), createElementVNode("span", _hoisted_11, toDisplayString(unref(translate)("apiClient.addressBar.sendRequest", {
+						method: __props.method,
+						url: `${__props.server?.url ?? ""}${__props.path}`
+					})), 1)]),
 					_: 1
 				}, 8, ["disabled"])
-			], 10, _hoisted_2), createElementVNode("div", _hoisted_10, [
+			], 10, _hoisted_2), createElementVNode("div", _hoisted_12, [
 				createVNode(unref(HttpMethod_default), {
 					isEditable: __props.layout !== "modal" && !__props.isWebhook,
 					isSquare: "",
@@ -381,7 +391,7 @@ var AddressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					variant: "ghost",
 					onClick: requestCopyUrl
 				}, {
-					default: withCtx(() => [createVNode(unref(ScalarIconCopy)), _cache[11] || (_cache[11] = createElementVNode("span", { class: "sr-only" }, "Copy URL", -1))]),
+					default: withCtx(() => [createVNode(unref(ScalarIconCopy)), createElementVNode("span", _hoisted_13, toDisplayString(unref(translate)("apiClient.addressBar.copyUrl")), 1)]),
 					_: 1
 				}),
 				createVNode(unref(ScalarButton), {
@@ -389,14 +399,17 @@ var AddressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					ref: mobileSendButtonRef,
 					class: "relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold",
 					"data-addressbar-action": "send",
-					disabled: unref(isLoading),
+					disabled: unref(isLoading) || __props.executionDisabled,
 					onClick: _cache[5] || (_cache[5] = ($event) => emit("execute"))
 				}, {
-					default: withCtx(() => [createElementVNode("span", _hoisted_11, [createVNode(unref(ScalarIcon), {
+					default: withCtx(() => [createElementVNode("span", _hoisted_14, [createVNode(unref(ScalarIcon), {
 						class: "relative shrink-0 fill-current",
 						icon: "Play",
 						size: "xs"
-					}), _cache[12] || (_cache[12] = createElementVNode("span", { class: "text-xxs" }, "Send", -1))]), createElementVNode("span", _hoisted_12, " Send " + toDisplayString(__props.method) + " request to " + toDisplayString(__props.server?.url ?? "") + toDisplayString(__props.path), 1)]),
+					}), createElementVNode("span", _hoisted_15, toDisplayString(unref(translate)("apiClient.addressBar.send")), 1)]), createElementVNode("span", _hoisted_16, toDisplayString(unref(translate)("apiClient.addressBar.sendRequest", {
+						method: __props.method,
+						url: `${__props.server?.url ?? ""}${__props.path}`
+					})), 1)]),
 					_: 1
 				}, 8, ["disabled"])
 			])]);