@scalar/api-client 3.17.0 → 3.19.0

package/dist/v2/blocks/request-block/helpers/group-by.js

@@ -1,14 +1,16 @@
 //#region src/v2/blocks/request-block/helpers/group-by.ts
-/**
-* Group together array objects by a specific key
-*/
-var groupBy = (arr, key, transform) => {
-	return arr.reduce((acc, obj) => {
-		const transformedItem = transform ? transform(obj) : obj;
-		(acc[obj[key]] ??= []).push(transformedItem);
-		return acc;
-	}, {});
-};
+function groupBy(arr, key, transform) {
+	const groups = {};
+	Object.setPrototypeOf(groups, null);
+	for (const item of arr) {
+		const groupKey = item[key];
+		const value = transform ? transform(item) : item;
+		const group = groups[groupKey];
+		if (group) group.push(value);
+		else groups[groupKey] = [value];
+	}
+	return groups;
+}
 //#endregion
 export { groupBy };
 

package/dist/v2/blocks/request-block/helpers/group-by.js.map

@@ -1 +1 @@
-{"version":3,"file":"group-by.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/helpers/group-by.ts"],"sourcesContent":["/**\n * Group together array objects by a specific key\n */\nexport const groupBy = <\n  T extends Record<string, unknown>,\n  K extends keyof T,\n  V extends string | number | symbol = Extract<T[K], string | number | symbol>,\n  R = T,\n>(\n  arr: T[],\n  key: K,\n  transform?: (item: T) => R,\n): Record<V, R[]> => {\n  return arr.reduce(\n    (acc, obj) => {\n      const transformedItem = transform ? transform(obj) : (obj as unknown as R)\n      ;(acc[obj[key] as V] ??= []).push(transformedItem)\n      return acc\n    },\n    {} as Record<V, R[]>,\n  )\n}\n"],"mappings":";;;;AAGA,IAAa,WAMX,KACA,KACA,cACmB;CACnB,OAAO,IAAI,QACR,KAAK,QAAQ;EACZ,MAAM,kBAAkB,YAAY,UAAU,GAAG,IAAK;EACrD,CAAC,IAAI,IAAI,UAAe,CAAC,EAAA,CAAG,KAAK,eAAe;EACjD,OAAO;CACT,GACA,CAAC,CACH;AACF"}
+{"version":3,"file":"group-by.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/helpers/group-by.ts"],"sourcesContent":["/** Groups items by a property key; groups absent from the input remain absent. */\nexport function groupBy<K extends PropertyKey, T extends Record<K, PropertyKey>>(\n  arr: T[],\n  key: K,\n): Partial<Record<T[K], T[]>>\nexport function groupBy<K extends PropertyKey, T extends Record<K, PropertyKey>, R>(\n  arr: T[],\n  key: K,\n  transform: (item: T) => R,\n): Partial<Record<T[K], R[]>>\nexport function groupBy<K extends PropertyKey, T extends Record<K, PropertyKey>, R>(\n  arr: T[],\n  key: K,\n  transform?: (item: T) => R,\n): Partial<Record<T[K], (T | R)[]>> {\n  const groups: Partial<Record<T[K], (T | R)[]>> = {}\n  // Missing groups must stay undefined even for names inherited from Object.prototype.\n  Object.setPrototypeOf(groups, null)\n  for (const item of arr) {\n    const groupKey = item[key]\n    const value = transform ? transform(item) : item\n    const group = groups[groupKey]\n    if (group) {\n      group.push(value)\n    } else {\n      groups[groupKey] = [value]\n    }\n  }\n  return groups\n}\n"],"mappings":";AAUA,SAAgB,QACd,KACA,KACA,WACkC;CAClC,MAAM,SAA2C,CAAC;CAElD,OAAO,eAAe,QAAQ,IAAI;CAClC,KAAK,MAAM,QAAQ,KAAK;EACtB,MAAM,WAAW,KAAK;EACtB,MAAM,QAAQ,YAAY,UAAU,IAAI,IAAI;EAC5C,MAAM,QAAQ,OAAO;EACrB,IAAI,OACF,MAAM,KAAK,KAAK;OAEhB,OAAO,YAAY,CAAC,KAAK;CAE7B;CACA,OAAO;AACT"}

package/dist/v2/blocks/request-block/helpers/validate-parameter.d.ts

@@ -1,4 +1,4 @@
-import type { SchemaObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
+import type { SchemaObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document';
 /**
  * Checks if the value of a example parameter is the expected type or format
  */

package/dist/v2/blocks/request-block/helpers/validate-parameter.js.map

@@ -1 +1 @@
-{"version":3,"file":"validate-parameter.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/helpers/validate-parameter.ts"],"sourcesContent":["import type { SchemaObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\n/**\n * Checks if the value of a example parameter is the expected type or format\n */\nexport const validateParameter = (\n  schema?: SchemaObject,\n  value?: string | File | null,\n): { ok: true } | { ok: false; message: string } => {\n  if (!schema || !('type' in schema) || typeof value !== 'string') {\n    return { ok: true }\n  }\n\n  // Numbers and integers validation\n  if (schema.type === 'integer' || schema.type === 'number') {\n    const numberValue = Number(value)\n\n    if (isNaN(numberValue)) {\n      return { ok: false, message: 'Value must be a number (e.g., 42.5)' }\n    }\n\n    if (schema.type === 'integer' && !Number.isInteger(numberValue)) {\n      return { ok: false, message: 'Value must be a whole number (e.g., 42)' }\n    }\n\n    if (schema.minimum !== undefined && numberValue < schema.minimum) {\n      return { ok: false, message: `Value must be ${schema.minimum} or greater` }\n    }\n    if (schema.maximum !== undefined && numberValue > schema.maximum) {\n      return { ok: false, message: `Value must be ${schema.maximum} or less` }\n    }\n  }\n\n  // string validations\n  if (schema.type === 'string' && schema.format) {\n    if (schema.format === 'date' && !/^\\d{4}-\\d{2}-\\d{2}$/.test(value ?? '')) {\n      return { ok: false, message: 'Please enter a valid date in YYYY-MM-DD format (e.g., 2024-03-20)' }\n    }\n    if (\n      schema.format === 'date-time' &&\n      !/^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}(\\.\\d+)?(Z|[+-]\\d{2}:\\d{2})$/.test(value ?? '')\n    ) {\n      return {\n        ok: false,\n        message: 'Please enter a valid date and time in RFC 3339 format (e.g., 2024-03-20T13:45:30Z)',\n      }\n    }\n    if (schema.format === 'email' && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value ?? '')) {\n      return { ok: false, message: 'Please enter a valid email address (e.g., user@example.com)' }\n    }\n    if (schema.format === 'uri' && !/^[a-zA-Z][a-zA-Z0-9+.-]*:.+$/.test(value ?? '')) {\n      return { ok: false, message: 'Please enter a valid URI (e.g., https://example.com)' }\n    }\n  }\n\n  return { ok: true }\n}\n"],"mappings":";;;;AAKA,IAAa,qBACX,QACA,UACkD;CAClD,IAAI,CAAC,UAAU,EAAE,UAAU,WAAW,OAAO,UAAU,UACrD,OAAO,EAAE,IAAI,KAAK;CAIpB,IAAI,OAAO,SAAS,aAAa,OAAO,SAAS,UAAU;EACzD,MAAM,cAAc,OAAO,KAAK;EAEhC,IAAI,MAAM,WAAW,GACnB,OAAO;GAAE,IAAI;GAAO,SAAS;EAAsC;EAGrE,IAAI,OAAO,SAAS,aAAa,CAAC,OAAO,UAAU,WAAW,GAC5D,OAAO;GAAE,IAAI;GAAO,SAAS;EAA0C;EAGzE,IAAI,OAAO,YAAY,KAAA,KAAa,cAAc,OAAO,SACvD,OAAO;GAAE,IAAI;GAAO,SAAS,iBAAiB,OAAO,QAAQ;EAAa;EAE5E,IAAI,OAAO,YAAY,KAAA,KAAa,cAAc,OAAO,SACvD,OAAO;GAAE,IAAI;GAAO,SAAS,iBAAiB,OAAO,QAAQ;EAAU;CAE3E;CAGA,IAAI,OAAO,SAAS,YAAY,OAAO,QAAQ;EAC7C,IAAI,OAAO,WAAW,UAAU,CAAC,sBAAsB,KAAK,SAAS,EAAE,GACrE,OAAO;GAAE,IAAI;GAAO,SAAS;EAAoE;EAEnG,IACE,OAAO,WAAW,eAClB,CAAC,mEAAmE,KAAK,SAAS,EAAE,GAEpF,OAAO;GACL,IAAI;GACJ,SAAS;EACX;EAEF,IAAI,OAAO,WAAW,WAAW,CAAC,6BAA6B,KAAK,SAAS,EAAE,GAC7E,OAAO;GAAE,IAAI;GAAO,SAAS;EAA8D;EAE7F,IAAI,OAAO,WAAW,SAAS,CAAC,+BAA+B,KAAK,SAAS,EAAE,GAC7E,OAAO;GAAE,IAAI;GAAO,SAAS;EAAuD;CAExF;CAEA,OAAO,EAAE,IAAI,KAAK;AACpB"}
+{"version":3,"file":"validate-parameter.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/helpers/validate-parameter.ts"],"sourcesContent":["import type { SchemaObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\n\n/**\n * Checks if the value of a example parameter is the expected type or format\n */\nexport const validateParameter = (\n  schema?: SchemaObject,\n  value?: string | File | null,\n): { ok: true } | { ok: false; message: string } => {\n  if (!schema || !('type' in schema) || typeof value !== 'string') {\n    return { ok: true }\n  }\n\n  // Numbers and integers validation\n  if (schema.type === 'integer' || schema.type === 'number') {\n    const numberValue = Number(value)\n\n    if (isNaN(numberValue)) {\n      return { ok: false, message: 'Value must be a number (e.g., 42.5)' }\n    }\n\n    if (schema.type === 'integer' && !Number.isInteger(numberValue)) {\n      return { ok: false, message: 'Value must be a whole number (e.g., 42)' }\n    }\n\n    if (schema.minimum !== undefined && numberValue < schema.minimum) {\n      return { ok: false, message: `Value must be ${schema.minimum} or greater` }\n    }\n    if (schema.maximum !== undefined && numberValue > schema.maximum) {\n      return { ok: false, message: `Value must be ${schema.maximum} or less` }\n    }\n  }\n\n  // string validations\n  if (schema.type === 'string' && schema.format) {\n    if (schema.format === 'date' && !/^\\d{4}-\\d{2}-\\d{2}$/.test(value ?? '')) {\n      return { ok: false, message: 'Please enter a valid date in YYYY-MM-DD format (e.g., 2024-03-20)' }\n    }\n    if (\n      schema.format === 'date-time' &&\n      !/^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}(\\.\\d+)?(Z|[+-]\\d{2}:\\d{2})$/.test(value ?? '')\n    ) {\n      return {\n        ok: false,\n        message: 'Please enter a valid date and time in RFC 3339 format (e.g., 2024-03-20T13:45:30Z)',\n      }\n    }\n    if (schema.format === 'email' && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value ?? '')) {\n      return { ok: false, message: 'Please enter a valid email address (e.g., user@example.com)' }\n    }\n    if (schema.format === 'uri' && !/^[a-zA-Z][a-zA-Z0-9+.-]*:.+$/.test(value ?? '')) {\n      return { ok: false, message: 'Please enter a valid URI (e.g., https://example.com)' }\n    }\n  }\n\n  return { ok: true }\n}\n"],"mappings":";;;;AAKA,IAAa,qBACX,QACA,UACkD;CAClD,IAAI,CAAC,UAAU,EAAE,UAAU,WAAW,OAAO,UAAU,UACrD,OAAO,EAAE,IAAI,KAAK;CAIpB,IAAI,OAAO,SAAS,aAAa,OAAO,SAAS,UAAU;EACzD,MAAM,cAAc,OAAO,KAAK;EAEhC,IAAI,MAAM,WAAW,GACnB,OAAO;GAAE,IAAI;GAAO,SAAS;EAAsC;EAGrE,IAAI,OAAO,SAAS,aAAa,CAAC,OAAO,UAAU,WAAW,GAC5D,OAAO;GAAE,IAAI;GAAO,SAAS;EAA0C;EAGzE,IAAI,OAAO,YAAY,KAAA,KAAa,cAAc,OAAO,SACvD,OAAO;GAAE,IAAI;GAAO,SAAS,iBAAiB,OAAO,QAAQ;EAAa;EAE5E,IAAI,OAAO,YAAY,KAAA,KAAa,cAAc,OAAO,SACvD,OAAO;GAAE,IAAI;GAAO,SAAS,iBAAiB,OAAO,QAAQ;EAAU;CAE3E;CAGA,IAAI,OAAO,SAAS,YAAY,OAAO,QAAQ;EAC7C,IAAI,OAAO,WAAW,UAAU,CAAC,sBAAsB,KAAK,SAAS,EAAE,GACrE,OAAO;GAAE,IAAI;GAAO,SAAS;EAAoE;EAEnG,IACE,OAAO,WAAW,eAClB,CAAC,mEAAmE,KAAK,SAAS,EAAE,GAEpF,OAAO;GACL,IAAI;GACJ,SAAS;EACX;EAEF,IAAI,OAAO,WAAW,WAAW,CAAC,6BAA6B,KAAK,SAAS,EAAE,GAC7E,OAAO;GAAE,IAAI;GAAO,SAAS;EAA8D;EAE7F,IAAI,OAAO,WAAW,SAAS,CAAC,+BAA+B,KAAK,SAAS,EAAE,GAC7E,OAAO;GAAE,IAAI;GAAO,SAAS;EAAuD;CAExF;CAEA,OAAO,EAAE,IAAI,KAAK;AACpB"}

package/dist/v2/blocks/response-block/ResponseBlock.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import ResponseBlock_vue_vue_type_script_setup_true_lang_default from "./ResponseBlock.vue.script.js";
 /* empty css                            */
 //#region src/v2/blocks/response-block/ResponseBlock.vue
-var ResponseBlock_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ResponseBlock_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-7a7c6611"]]);
+var ResponseBlock_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ResponseBlock_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b969ac76"]]);
 //#endregion
 export { ResponseBlock_default as default };
 

package/dist/v2/blocks/response-block/ResponseBlock.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBlock.vue.js","names":[],"sources":["../../../../src/v2/blocks/response-block/ResponseBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { isDefined } from '@scalar/helpers/array/is-defined'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { RequestPayload } from '@scalar/workspace-store/request-example'\nimport { computed, ref, useId } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport type { ResponseInstance } from '@/v2/blocks/operation-block/helpers/send-request'\nimport HeadersComponent from '@/v2/blocks/response-block/components/Headers.vue'\nimport ResponseBody from '@/v2/blocks/response-block/components/ResponseBody.vue'\nimport ResponseBodyStreaming from '@/v2/blocks/response-block/components/ResponseBodyStreaming.vue'\nimport ResponseBodyVirtual from '@/v2/blocks/response-block/components/ResponseBodyVirtual.vue'\nimport ResponseCookies from '@/v2/blocks/response-block/components/ResponseCookies.vue'\nimport ResponseEmpty from '@/v2/blocks/response-block/components/ResponseEmpty.vue'\nimport ResponseLoadingOverlay from '@/v2/blocks/response-block/components/ResponseLoadingOverlay.vue'\nimport ResponseMetaInformation from '@/v2/blocks/response-block/components/ResponseMetaInformation.vue'\nimport { textMediaTypes } from '@/v2/blocks/response-block/helpers/media-types'\nimport { parseSetCookie } from '@/v2/blocks/response-block/helpers/parse-set-cookie'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nconst { layout, totalPerformedRequests, response, requestPayload } =\n  defineProps<{\n    /** Preprocessed response */\n    response: ResponseInstance | null\n    /** Original request as a [url, RequestInit] tuple */\n    requestPayload: RequestPayload | null\n    /** Client layout */\n    layout: ClientLayout\n    /** Total number of performed requests */\n    totalPerformedRequests: number\n    /** Application version */\n    appVersion: string\n    /** Registered app plugins */\n    plugins: ClientPlugin[]\n    /** Workspace event bus */\n    eventBus: WorkspaceEventBus\n  }>()\n\n// Headers\nconst responseHeaders = computed(() => {\n  const headers = response?.headers\n\n  return headers\n    ? Object.keys(headers).map((key) => ({\n        name: key,\n        value: headers[key] ?? '',\n      }))\n    : []\n})\n\n// Cookies\nconst responseCookies = computed(\n  () =>\n    response?.cookieHeaderKeys\n      .map((setCookieValue) => parseSetCookie(setCookieValue))\n      .filter(isDefined) ?? [],\n)\n\nconst responseSections = ['Cookies', 'Headers', 'Body'] as const\ntype Filter = 'All' | (typeof responseSections)[number]\nconst activeFilter = ref<Filter>('All')\n\nconst filters = computed<Filter[]>(() => ['All', ...responseSections])\n\nconst filterIds = computed(\n  () =>\n    Object.fromEntries(\n      filters.value.map((section) => [section, useId()]),\n    ) as Record<Filter, string>,\n)\n\n/** Threshold for virtualizing response bodies in bytes */\nconst VIRTUALIZATION_THRESHOLD = 200_000\nconst shouldVirtualize = computed(() => {\n  if (!response || !('size' in response)) {\n    return false\n  }\n\n  // Get content type from headers\n  const contentType =\n    response.headers?.['content-type'] || response.headers?.['Content-Type']\n\n  // If no content type or response size is small, don't virtualize\n  if (!contentType || (response.size ?? 0) <= VIRTUALIZATION_THRESHOLD) {\n    return false\n  }\n\n  // Do not virtualize html\n  if (contentType.includes('text/html')) {\n    return false\n  }\n\n  // Check if content type matches any text-based type\n  const isTextBased = textMediaTypes.some((type) => contentType.includes(type))\n\n  return isTextBased && (response.size ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n\nconst requestHeaders = computed(() => {\n  const headers = requestPayload?.[1]?.headers\n  if (!headers) {\n    return []\n  }\n\n  // Normalise via the Headers constructor, and then spread\n  return [...new Headers(headers)].map(([name, value]) => ({\n    name,\n    value,\n    required: false,\n  }))\n})\n\nconst isSectionVisible = (\n  section: (typeof responseSections)[number] | 'All',\n) => {\n  if (activeFilter.value === 'All' || activeFilter.value === section) {\n    return true\n  }\n  return false\n}\n\ndefineExpose({\n  responseHeaders,\n  responseCookies,\n  requestHeaders,\n  shouldVirtualize,\n  activeFilter,\n  filters,\n})\n</script>\n<template>\n  <ViewLayoutSection aria-label=\"Response\">\n    <template #title>\n      <div class=\"flex h-8 flex-1 items-center\">\n        <div\n          aria-live=\"polite\"\n          class=\"flex items-center\"\n          :class=\"{ 'animate-response-heading': response }\">\n          <span class=\"response-heading pointer-events-none absolute\">\n            Response\n          </span>\n          <ResponseMetaInformation\n            v-if=\"response\"\n            class=\"animate-response-children\"\n            :eventBus=\"eventBus\"\n            :response=\"response\" />\n        </div>\n        <SectionFilter\n          v-model=\"activeFilter\"\n          :filterIds=\"filterIds\"\n          :filters=\"filters\" />\n      </div>\n    </template>\n    <div\n      :id=\"filterIds.All\"\n      class=\"custom-scroll response-section-content relative grid h-full justify-stretch\"\n      :class=\"{\n        'content-start': response,\n      }\"\n      :role=\"activeFilter === 'All' && response ? 'tabpanel' : 'none'\">\n      <template v-if=\"!response\">\n        <ResponseEmpty\n          :appVersion=\"appVersion\"\n          :layout=\"layout\"\n          :totalPerformedRequests=\"totalPerformedRequests\"\n          @addRequest=\"\n            eventBus.emit('ui:open:command-palette', {\n              action: 'create-request',\n              payload: undefined,\n            })\n          \"\n          @openCommandPalette=\"eventBus.emit('ui:open:command-palette')\"\n          @sendRequest=\"eventBus.emit('operation:send:request:hotkey')\" />\n      </template>\n      <template v-else>\n        <!-- Cookies section -->\n        <ResponseCookies\n          v-if=\"isSectionVisible('Cookies')\"\n          :id=\"filterIds.Cookies\"\n          class=\"response-section-content-cookies\"\n          :cookies=\"responseCookies\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n        <!-- Request headers section -->\n        <HeadersComponent\n          v-if=\"isSectionVisible('Headers')\"\n          :id=\"filterIds.Headers\"\n          class=\"response-section-content-headers\"\n          :headers=\"requestHeaders\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\">\n          <template #title>Request Headers</template>\n        </HeadersComponent>\n        <!-- Response headers section -->\n        <HeadersComponent\n          v-if=\"isSectionVisible('Headers')\"\n          :id=\"filterIds.Headers\"\n          class=\"response-section-content-headers\"\n          :headers=\"responseHeaders\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\">\n          <template #title>Response Headers</template>\n        </HeadersComponent>\n\n        <!-- Inject response section plugin components -->\n        <ScalarErrorBoundary\n          v-for=\"(plugin, index) in plugins\"\n          :key=\"index\">\n          <component\n            :is=\"plugin.components.response.component\"\n            v-if=\"plugin?.components?.response\"\n            v-show=\"activeFilter === 'All'\"\n            v-bind=\"plugin.components.response.additionalProps\" />\n        </ScalarErrorBoundary>\n\n        <template v-if=\"activeFilter === 'All' || activeFilter === 'Body'\">\n          <!-- Streaming response body -->\n          <ResponseBodyStreaming\n            v-if=\"'reader' in response\"\n            :id=\"filterIds.Body\"\n            class=\"response-section-content-body\"\n            :reader=\"response.reader\" />\n\n          <!-- Virtualized Text for massive responses -->\n          <ResponseBodyVirtual\n            v-else-if=\"shouldVirtualize && typeof response?.data === 'string'\"\n            :id=\"filterIds.Body\"\n            :content=\"response!.data\"\n            :data=\"response?.data\"\n            :headers=\"responseHeaders\"\n            :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n\n          <!-- Regular response body -->\n          <ResponseBody\n            v-else\n            :id=\"filterIds.Body\"\n            :active=\"true\"\n            class=\"response-section-content-body\"\n            :data=\"response?.data\"\n            :headers=\"responseHeaders\"\n            layout=\"client\"\n            :plugins=\"plugins\"\n            :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\"\n            title=\"Body\" />\n        </template>\n      </template>\n      <ResponseLoadingOverlay :eventBus=\"eventBus\" />\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.animate-response-heading .response-heading {\n  animation: push-response 0.2s ease-in-out forwards;\n  opacity: 1;\n}\n@keyframes push-response {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n.animate-response-heading .animate-response-children {\n  animation: response-spans 0.2s ease-in-out forwards 0.05s;\n  opacity: 0;\n}\n\n@keyframes response-spans {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ResponseBlock.vue.js","names":[],"sources":["../../../../src/v2/blocks/response-block/ResponseBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { isDefined } from '@scalar/helpers/array/is-defined'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { RequestPayload } from '@scalar/workspace-store/request-example'\nimport { computed, ref, useId } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport type { ResponseInstance } from '@/v2/blocks/operation-block/helpers/send-request'\nimport HeadersComponent from '@/v2/blocks/response-block/components/Headers.vue'\nimport ResponseBody from '@/v2/blocks/response-block/components/ResponseBody.vue'\nimport ResponseBodyStreaming from '@/v2/blocks/response-block/components/ResponseBodyStreaming.vue'\nimport ResponseBodyVirtual from '@/v2/blocks/response-block/components/ResponseBodyVirtual.vue'\nimport ResponseCookies from '@/v2/blocks/response-block/components/ResponseCookies.vue'\nimport ResponseEmpty from '@/v2/blocks/response-block/components/ResponseEmpty.vue'\nimport ResponseLoadingOverlay from '@/v2/blocks/response-block/components/ResponseLoadingOverlay.vue'\nimport ResponseMetaInformation from '@/v2/blocks/response-block/components/ResponseMetaInformation.vue'\nimport { textMediaTypes } from '@/v2/blocks/response-block/helpers/media-types'\nimport { parseSetCookie } from '@/v2/blocks/response-block/helpers/parse-set-cookie'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nconst { layout, totalPerformedRequests, response, requestPayload } =\n  defineProps<{\n    /** Preprocessed response */\n    response: ResponseInstance | null\n    /** Original request as a [url, RequestInit] tuple */\n    requestPayload: RequestPayload | null\n    /** Client layout */\n    layout: ClientLayout\n    /** Total number of performed requests */\n    totalPerformedRequests: number\n    /** Application version */\n    appVersion: string\n    /** Registered app plugins */\n    plugins: ClientPlugin[]\n    /** Workspace event bus */\n    eventBus: WorkspaceEventBus\n  }>()\n\n// Headers\nconst responseHeaders = computed(() => {\n  const headers = response?.headers\n\n  return headers\n    ? Object.keys(headers).map((key) => ({\n        name: key,\n        value: headers[key] ?? '',\n      }))\n    : []\n})\n\n// Cookies\nconst responseCookies = computed(\n  () =>\n    response?.cookieHeaderKeys\n      .map((setCookieValue) => parseSetCookie(setCookieValue))\n      .filter(isDefined) ?? [],\n)\n\nconst responseSections = ['Cookies', 'Headers', 'Body'] as const\ntype Filter = 'All' | (typeof responseSections)[number]\nconst activeFilter = ref<Filter>('All')\n\nconst filters = computed<Filter[]>(() => ['All', ...responseSections])\n\nconst filterIds = computed<Record<Filter, string>>(() => ({\n  All: useId(),\n  Cookies: useId(),\n  Headers: useId(),\n  Body: useId(),\n}))\n\n/** Threshold for virtualizing response bodies in bytes */\nconst VIRTUALIZATION_THRESHOLD = 200_000\nconst shouldVirtualize = computed(() => {\n  if (!response || !('size' in response)) {\n    return false\n  }\n\n  // Get content type from headers\n  const contentType =\n    response.headers?.['content-type'] || response.headers?.['Content-Type']\n\n  // If no content type or response size is small, don't virtualize\n  if (!contentType || (response.size ?? 0) <= VIRTUALIZATION_THRESHOLD) {\n    return false\n  }\n\n  // Do not virtualize html\n  if (contentType.includes('text/html')) {\n    return false\n  }\n\n  // Check if content type matches any text-based type\n  const isTextBased = textMediaTypes.some((type) => contentType.includes(type))\n\n  return isTextBased && (response.size ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n\nconst requestHeaders = computed(() => {\n  const headers = requestPayload?.[1]?.headers\n  if (!headers) {\n    return []\n  }\n\n  // Normalise via the Headers constructor, and then spread\n  return [...new Headers(headers)].map(([name, value]) => ({\n    name,\n    value,\n    required: false,\n  }))\n})\n\nconst isSectionVisible = (\n  section: (typeof responseSections)[number] | 'All',\n) => {\n  if (activeFilter.value === 'All' || activeFilter.value === section) {\n    return true\n  }\n  return false\n}\n\ndefineExpose({\n  responseHeaders,\n  responseCookies,\n  requestHeaders,\n  shouldVirtualize,\n  activeFilter,\n  filters,\n})\n</script>\n<template>\n  <ViewLayoutSection aria-label=\"Response\">\n    <template #title>\n      <div class=\"flex h-8 flex-1 items-center\">\n        <div\n          aria-live=\"polite\"\n          class=\"flex items-center\"\n          :class=\"{ 'animate-response-heading': response }\">\n          <span class=\"response-heading pointer-events-none absolute\">\n            Response\n          </span>\n          <ResponseMetaInformation\n            v-if=\"response\"\n            class=\"animate-response-children\"\n            :eventBus=\"eventBus\"\n            :response=\"response\" />\n        </div>\n        <SectionFilter\n          v-model=\"activeFilter\"\n          :filterIds=\"filterIds\"\n          :filters=\"filters\" />\n      </div>\n    </template>\n    <div\n      :id=\"filterIds.All\"\n      class=\"custom-scroll response-section-content relative grid h-full justify-stretch\"\n      :class=\"{\n        'content-start': response,\n      }\"\n      :role=\"activeFilter === 'All' && response ? 'tabpanel' : 'none'\">\n      <template v-if=\"!response\">\n        <ResponseEmpty\n          :appVersion=\"appVersion\"\n          :layout=\"layout\"\n          :totalPerformedRequests=\"totalPerformedRequests\"\n          @addRequest=\"\n            eventBus.emit('ui:open:command-palette', {\n              action: 'create-request',\n              payload: undefined,\n            })\n          \"\n          @openCommandPalette=\"eventBus.emit('ui:open:command-palette')\"\n          @sendRequest=\"eventBus.emit('operation:send:request:hotkey')\" />\n      </template>\n      <template v-else>\n        <!-- Cookies section -->\n        <ResponseCookies\n          v-if=\"isSectionVisible('Cookies')\"\n          :id=\"filterIds.Cookies\"\n          class=\"response-section-content-cookies\"\n          :cookies=\"responseCookies\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n        <!-- Request headers section -->\n        <HeadersComponent\n          v-if=\"isSectionVisible('Headers')\"\n          :id=\"filterIds.Headers\"\n          class=\"response-section-content-headers\"\n          :headers=\"requestHeaders\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\">\n          <template #title>Request Headers</template>\n        </HeadersComponent>\n        <!-- Response headers section -->\n        <HeadersComponent\n          v-if=\"isSectionVisible('Headers')\"\n          :id=\"filterIds.Headers\"\n          class=\"response-section-content-headers\"\n          :headers=\"responseHeaders\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\">\n          <template #title>Response Headers</template>\n        </HeadersComponent>\n\n        <!-- Inject response section plugin components -->\n        <ScalarErrorBoundary\n          v-for=\"(plugin, index) in plugins\"\n          :key=\"index\">\n          <component\n            :is=\"plugin.components.response.component\"\n            v-if=\"plugin?.components?.response\"\n            v-show=\"activeFilter === 'All'\"\n            v-bind=\"plugin.components.response.additionalProps\" />\n        </ScalarErrorBoundary>\n\n        <template v-if=\"activeFilter === 'All' || activeFilter === 'Body'\">\n          <!-- Streaming response body -->\n          <ResponseBodyStreaming\n            v-if=\"'reader' in response\"\n            :id=\"filterIds.Body\"\n            class=\"response-section-content-body\"\n            :reader=\"response.reader\" />\n\n          <!-- Virtualized Text for massive responses -->\n          <ResponseBodyVirtual\n            v-else-if=\"shouldVirtualize && typeof response?.data === 'string'\"\n            :id=\"filterIds.Body\"\n            :content=\"response!.data\"\n            :data=\"response?.data\"\n            :headers=\"responseHeaders\"\n            :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n\n          <!-- Regular response body -->\n          <ResponseBody\n            v-else\n            :id=\"filterIds.Body\"\n            :active=\"true\"\n            class=\"response-section-content-body\"\n            :data=\"response?.data\"\n            :headers=\"responseHeaders\"\n            layout=\"client\"\n            :plugins=\"plugins\"\n            :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\"\n            title=\"Body\" />\n        </template>\n      </template>\n      <ResponseLoadingOverlay :eventBus=\"eventBus\" />\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.animate-response-heading .response-heading {\n  animation: push-response 0.2s ease-in-out forwards;\n  opacity: 1;\n}\n@keyframes push-response {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n.animate-response-heading .animate-response-children {\n  animation: response-spans 0.2s ease-in-out forwards 0.05s;\n  opacity: 0;\n}\n\n@keyframes response-spans {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/v2/blocks/response-block/ResponseBlock.vue.script.js

@@ -44,7 +44,12 @@ var ResponseBlock_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		];
 		const activeFilter = ref("All");
 		const filters = computed(() => ["All", ...responseSections]);
-		const filterIds = computed(() => Object.fromEntries(filters.value.map((section) => [section, useId()])));
+		const filterIds = computed(() => ({
+			All: useId(),
+			Cookies: useId(),
+			Headers: useId(),
+			Body: useId()
+		}));
 		/** Threshold for virtualizing response bodies in bytes */
 		const shouldVirtualize = computed(() => {
 			if (!__props.response || !("size" in __props.response)) return false;

package/dist/v2/blocks/response-block/ResponseBlock.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBlock.vue.script.js","names":[],"sources":["../../../../src/v2/blocks/response-block/ResponseBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { isDefined } from '@scalar/helpers/array/is-defined'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { RequestPayload } from '@scalar/workspace-store/request-example'\nimport { computed, ref, useId } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport type { ResponseInstance } from '@/v2/blocks/operation-block/helpers/send-request'\nimport HeadersComponent from '@/v2/blocks/response-block/components/Headers.vue'\nimport ResponseBody from '@/v2/blocks/response-block/components/ResponseBody.vue'\nimport ResponseBodyStreaming from '@/v2/blocks/response-block/components/ResponseBodyStreaming.vue'\nimport ResponseBodyVirtual from '@/v2/blocks/response-block/components/ResponseBodyVirtual.vue'\nimport ResponseCookies from '@/v2/blocks/response-block/components/ResponseCookies.vue'\nimport ResponseEmpty from '@/v2/blocks/response-block/components/ResponseEmpty.vue'\nimport ResponseLoadingOverlay from '@/v2/blocks/response-block/components/ResponseLoadingOverlay.vue'\nimport ResponseMetaInformation from '@/v2/blocks/response-block/components/ResponseMetaInformation.vue'\nimport { textMediaTypes } from '@/v2/blocks/response-block/helpers/media-types'\nimport { parseSetCookie } from '@/v2/blocks/response-block/helpers/parse-set-cookie'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nconst { layout, totalPerformedRequests, response, requestPayload } =\n  defineProps<{\n    /** Preprocessed response */\n    response: ResponseInstance | null\n    /** Original request as a [url, RequestInit] tuple */\n    requestPayload: RequestPayload | null\n    /** Client layout */\n    layout: ClientLayout\n    /** Total number of performed requests */\n    totalPerformedRequests: number\n    /** Application version */\n    appVersion: string\n    /** Registered app plugins */\n    plugins: ClientPlugin[]\n    /** Workspace event bus */\n    eventBus: WorkspaceEventBus\n  }>()\n\n// Headers\nconst responseHeaders = computed(() => {\n  const headers = response?.headers\n\n  return headers\n    ? Object.keys(headers).map((key) => ({\n        name: key,\n        value: headers[key] ?? '',\n      }))\n    : []\n})\n\n// Cookies\nconst responseCookies = computed(\n  () =>\n    response?.cookieHeaderKeys\n      .map((setCookieValue) => parseSetCookie(setCookieValue))\n      .filter(isDefined) ?? [],\n)\n\nconst responseSections = ['Cookies', 'Headers', 'Body'] as const\ntype Filter = 'All' | (typeof responseSections)[number]\nconst activeFilter = ref<Filter>('All')\n\nconst filters = computed<Filter[]>(() => ['All', ...responseSections])\n\nconst filterIds = computed(\n  () =>\n    Object.fromEntries(\n      filters.value.map((section) => [section, useId()]),\n    ) as Record<Filter, string>,\n)\n\n/** Threshold for virtualizing response bodies in bytes */\nconst VIRTUALIZATION_THRESHOLD = 200_000\nconst shouldVirtualize = computed(() => {\n  if (!response || !('size' in response)) {\n    return false\n  }\n\n  // Get content type from headers\n  const contentType =\n    response.headers?.['content-type'] || response.headers?.['Content-Type']\n\n  // If no content type or response size is small, don't virtualize\n  if (!contentType || (response.size ?? 0) <= VIRTUALIZATION_THRESHOLD) {\n    return false\n  }\n\n  // Do not virtualize html\n  if (contentType.includes('text/html')) {\n    return false\n  }\n\n  // Check if content type matches any text-based type\n  const isTextBased = textMediaTypes.some((type) => contentType.includes(type))\n\n  return isTextBased && (response.size ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n\nconst requestHeaders = computed(() => {\n  const headers = requestPayload?.[1]?.headers\n  if (!headers) {\n    return []\n  }\n\n  // Normalise via the Headers constructor, and then spread\n  return [...new Headers(headers)].map(([name, value]) => ({\n    name,\n    value,\n    required: false,\n  }))\n})\n\nconst isSectionVisible = (\n  section: (typeof responseSections)[number] | 'All',\n) => {\n  if (activeFilter.value === 'All' || activeFilter.value === section) {\n    return true\n  }\n  return false\n}\n\ndefineExpose({\n  responseHeaders,\n  responseCookies,\n  requestHeaders,\n  shouldVirtualize,\n  activeFilter,\n  filters,\n})\n</script>\n<template>\n  <ViewLayoutSection aria-label=\"Response\">\n    <template #title>\n      <div class=\"flex h-8 flex-1 items-center\">\n        <div\n          aria-live=\"polite\"\n          class=\"flex items-center\"\n          :class=\"{ 'animate-response-heading': response }\">\n          <span class=\"response-heading pointer-events-none absolute\">\n            Response\n          </span>\n          <ResponseMetaInformation\n            v-if=\"response\"\n            class=\"animate-response-children\"\n            :eventBus=\"eventBus\"\n            :response=\"response\" />\n        </div>\n        <SectionFilter\n          v-model=\"activeFilter\"\n          :filterIds=\"filterIds\"\n          :filters=\"filters\" />\n      </div>\n    </template>\n    <div\n      :id=\"filterIds.All\"\n      class=\"custom-scroll response-section-content relative grid h-full justify-stretch\"\n      :class=\"{\n        'content-start': response,\n      }\"\n      :role=\"activeFilter === 'All' && response ? 'tabpanel' : 'none'\">\n      <template v-if=\"!response\">\n        <ResponseEmpty\n          :appVersion=\"appVersion\"\n          :layout=\"layout\"\n          :totalPerformedRequests=\"totalPerformedRequests\"\n          @addRequest=\"\n            eventBus.emit('ui:open:command-palette', {\n              action: 'create-request',\n              payload: undefined,\n            })\n          \"\n          @openCommandPalette=\"eventBus.emit('ui:open:command-palette')\"\n          @sendRequest=\"eventBus.emit('operation:send:request:hotkey')\" />\n      </template>\n      <template v-else>\n        <!-- Cookies section -->\n        <ResponseCookies\n          v-if=\"isSectionVisible('Cookies')\"\n          :id=\"filterIds.Cookies\"\n          class=\"response-section-content-cookies\"\n          :cookies=\"responseCookies\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n        <!-- Request headers section -->\n        <HeadersComponent\n          v-if=\"isSectionVisible('Headers')\"\n          :id=\"filterIds.Headers\"\n          class=\"response-section-content-headers\"\n          :headers=\"requestHeaders\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\">\n          <template #title>Request Headers</template>\n        </HeadersComponent>\n        <!-- Response headers section -->\n        <HeadersComponent\n          v-if=\"isSectionVisible('Headers')\"\n          :id=\"filterIds.Headers\"\n          class=\"response-section-content-headers\"\n          :headers=\"responseHeaders\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\">\n          <template #title>Response Headers</template>\n        </HeadersComponent>\n\n        <!-- Inject response section plugin components -->\n        <ScalarErrorBoundary\n          v-for=\"(plugin, index) in plugins\"\n          :key=\"index\">\n          <component\n            :is=\"plugin.components.response.component\"\n            v-if=\"plugin?.components?.response\"\n            v-show=\"activeFilter === 'All'\"\n            v-bind=\"plugin.components.response.additionalProps\" />\n        </ScalarErrorBoundary>\n\n        <template v-if=\"activeFilter === 'All' || activeFilter === 'Body'\">\n          <!-- Streaming response body -->\n          <ResponseBodyStreaming\n            v-if=\"'reader' in response\"\n            :id=\"filterIds.Body\"\n            class=\"response-section-content-body\"\n            :reader=\"response.reader\" />\n\n          <!-- Virtualized Text for massive responses -->\n          <ResponseBodyVirtual\n            v-else-if=\"shouldVirtualize && typeof response?.data === 'string'\"\n            :id=\"filterIds.Body\"\n            :content=\"response!.data\"\n            :data=\"response?.data\"\n            :headers=\"responseHeaders\"\n            :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n\n          <!-- Regular response body -->\n          <ResponseBody\n            v-else\n            :id=\"filterIds.Body\"\n            :active=\"true\"\n            class=\"response-section-content-body\"\n            :data=\"response?.data\"\n            :headers=\"responseHeaders\"\n            layout=\"client\"\n            :plugins=\"plugins\"\n            :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\"\n            title=\"Body\" />\n        </template>\n      </template>\n      <ResponseLoadingOverlay :eventBus=\"eventBus\" />\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.animate-response-heading .response-heading {\n  animation: push-response 0.2s ease-in-out forwards;\n  opacity: 1;\n}\n@keyframes push-response {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n.animate-response-heading .animate-response-children {\n  animation: response-spans 0.2s ease-in-out forwards 0.05s;\n  opacity: 0;\n}\n\n@keyframes response-spans {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ResponseBlock.vue.script.js","names":[],"sources":["../../../../src/v2/blocks/response-block/ResponseBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { isDefined } from '@scalar/helpers/array/is-defined'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { RequestPayload } from '@scalar/workspace-store/request-example'\nimport { computed, ref, useId } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport type { ResponseInstance } from '@/v2/blocks/operation-block/helpers/send-request'\nimport HeadersComponent from '@/v2/blocks/response-block/components/Headers.vue'\nimport ResponseBody from '@/v2/blocks/response-block/components/ResponseBody.vue'\nimport ResponseBodyStreaming from '@/v2/blocks/response-block/components/ResponseBodyStreaming.vue'\nimport ResponseBodyVirtual from '@/v2/blocks/response-block/components/ResponseBodyVirtual.vue'\nimport ResponseCookies from '@/v2/blocks/response-block/components/ResponseCookies.vue'\nimport ResponseEmpty from '@/v2/blocks/response-block/components/ResponseEmpty.vue'\nimport ResponseLoadingOverlay from '@/v2/blocks/response-block/components/ResponseLoadingOverlay.vue'\nimport ResponseMetaInformation from '@/v2/blocks/response-block/components/ResponseMetaInformation.vue'\nimport { textMediaTypes } from '@/v2/blocks/response-block/helpers/media-types'\nimport { parseSetCookie } from '@/v2/blocks/response-block/helpers/parse-set-cookie'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nconst { layout, totalPerformedRequests, response, requestPayload } =\n  defineProps<{\n    /** Preprocessed response */\n    response: ResponseInstance | null\n    /** Original request as a [url, RequestInit] tuple */\n    requestPayload: RequestPayload | null\n    /** Client layout */\n    layout: ClientLayout\n    /** Total number of performed requests */\n    totalPerformedRequests: number\n    /** Application version */\n    appVersion: string\n    /** Registered app plugins */\n    plugins: ClientPlugin[]\n    /** Workspace event bus */\n    eventBus: WorkspaceEventBus\n  }>()\n\n// Headers\nconst responseHeaders = computed(() => {\n  const headers = response?.headers\n\n  return headers\n    ? Object.keys(headers).map((key) => ({\n        name: key,\n        value: headers[key] ?? '',\n      }))\n    : []\n})\n\n// Cookies\nconst responseCookies = computed(\n  () =>\n    response?.cookieHeaderKeys\n      .map((setCookieValue) => parseSetCookie(setCookieValue))\n      .filter(isDefined) ?? [],\n)\n\nconst responseSections = ['Cookies', 'Headers', 'Body'] as const\ntype Filter = 'All' | (typeof responseSections)[number]\nconst activeFilter = ref<Filter>('All')\n\nconst filters = computed<Filter[]>(() => ['All', ...responseSections])\n\nconst filterIds = computed<Record<Filter, string>>(() => ({\n  All: useId(),\n  Cookies: useId(),\n  Headers: useId(),\n  Body: useId(),\n}))\n\n/** Threshold for virtualizing response bodies in bytes */\nconst VIRTUALIZATION_THRESHOLD = 200_000\nconst shouldVirtualize = computed(() => {\n  if (!response || !('size' in response)) {\n    return false\n  }\n\n  // Get content type from headers\n  const contentType =\n    response.headers?.['content-type'] || response.headers?.['Content-Type']\n\n  // If no content type or response size is small, don't virtualize\n  if (!contentType || (response.size ?? 0) <= VIRTUALIZATION_THRESHOLD) {\n    return false\n  }\n\n  // Do not virtualize html\n  if (contentType.includes('text/html')) {\n    return false\n  }\n\n  // Check if content type matches any text-based type\n  const isTextBased = textMediaTypes.some((type) => contentType.includes(type))\n\n  return isTextBased && (response.size ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n\nconst requestHeaders = computed(() => {\n  const headers = requestPayload?.[1]?.headers\n  if (!headers) {\n    return []\n  }\n\n  // Normalise via the Headers constructor, and then spread\n  return [...new Headers(headers)].map(([name, value]) => ({\n    name,\n    value,\n    required: false,\n  }))\n})\n\nconst isSectionVisible = (\n  section: (typeof responseSections)[number] | 'All',\n) => {\n  if (activeFilter.value === 'All' || activeFilter.value === section) {\n    return true\n  }\n  return false\n}\n\ndefineExpose({\n  responseHeaders,\n  responseCookies,\n  requestHeaders,\n  shouldVirtualize,\n  activeFilter,\n  filters,\n})\n</script>\n<template>\n  <ViewLayoutSection aria-label=\"Response\">\n    <template #title>\n      <div class=\"flex h-8 flex-1 items-center\">\n        <div\n          aria-live=\"polite\"\n          class=\"flex items-center\"\n          :class=\"{ 'animate-response-heading': response }\">\n          <span class=\"response-heading pointer-events-none absolute\">\n            Response\n          </span>\n          <ResponseMetaInformation\n            v-if=\"response\"\n            class=\"animate-response-children\"\n            :eventBus=\"eventBus\"\n            :response=\"response\" />\n        </div>\n        <SectionFilter\n          v-model=\"activeFilter\"\n          :filterIds=\"filterIds\"\n          :filters=\"filters\" />\n      </div>\n    </template>\n    <div\n      :id=\"filterIds.All\"\n      class=\"custom-scroll response-section-content relative grid h-full justify-stretch\"\n      :class=\"{\n        'content-start': response,\n      }\"\n      :role=\"activeFilter === 'All' && response ? 'tabpanel' : 'none'\">\n      <template v-if=\"!response\">\n        <ResponseEmpty\n          :appVersion=\"appVersion\"\n          :layout=\"layout\"\n          :totalPerformedRequests=\"totalPerformedRequests\"\n          @addRequest=\"\n            eventBus.emit('ui:open:command-palette', {\n              action: 'create-request',\n              payload: undefined,\n            })\n          \"\n          @openCommandPalette=\"eventBus.emit('ui:open:command-palette')\"\n          @sendRequest=\"eventBus.emit('operation:send:request:hotkey')\" />\n      </template>\n      <template v-else>\n        <!-- Cookies section -->\n        <ResponseCookies\n          v-if=\"isSectionVisible('Cookies')\"\n          :id=\"filterIds.Cookies\"\n          class=\"response-section-content-cookies\"\n          :cookies=\"responseCookies\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n        <!-- Request headers section -->\n        <HeadersComponent\n          v-if=\"isSectionVisible('Headers')\"\n          :id=\"filterIds.Headers\"\n          class=\"response-section-content-headers\"\n          :headers=\"requestHeaders\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\">\n          <template #title>Request Headers</template>\n        </HeadersComponent>\n        <!-- Response headers section -->\n        <HeadersComponent\n          v-if=\"isSectionVisible('Headers')\"\n          :id=\"filterIds.Headers\"\n          class=\"response-section-content-headers\"\n          :headers=\"responseHeaders\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\">\n          <template #title>Response Headers</template>\n        </HeadersComponent>\n\n        <!-- Inject response section plugin components -->\n        <ScalarErrorBoundary\n          v-for=\"(plugin, index) in plugins\"\n          :key=\"index\">\n          <component\n            :is=\"plugin.components.response.component\"\n            v-if=\"plugin?.components?.response\"\n            v-show=\"activeFilter === 'All'\"\n            v-bind=\"plugin.components.response.additionalProps\" />\n        </ScalarErrorBoundary>\n\n        <template v-if=\"activeFilter === 'All' || activeFilter === 'Body'\">\n          <!-- Streaming response body -->\n          <ResponseBodyStreaming\n            v-if=\"'reader' in response\"\n            :id=\"filterIds.Body\"\n            class=\"response-section-content-body\"\n            :reader=\"response.reader\" />\n\n          <!-- Virtualized Text for massive responses -->\n          <ResponseBodyVirtual\n            v-else-if=\"shouldVirtualize && typeof response?.data === 'string'\"\n            :id=\"filterIds.Body\"\n            :content=\"response!.data\"\n            :data=\"response?.data\"\n            :headers=\"responseHeaders\"\n            :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n\n          <!-- Regular response body -->\n          <ResponseBody\n            v-else\n            :id=\"filterIds.Body\"\n            :active=\"true\"\n            class=\"response-section-content-body\"\n            :data=\"response?.data\"\n            :headers=\"responseHeaders\"\n            layout=\"client\"\n            :plugins=\"plugins\"\n            :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\"\n            title=\"Body\" />\n        </template>\n      </template>\n      <ResponseLoadingOverlay :eventBus=\"eventBus\" />\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.animate-response-heading .response-heading {\n  animation: push-response 0.2s ease-in-out forwards;\n  opacity: 1;\n}\n@keyframes push-response {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n.animate-response-heading .animate-response-children {\n  animation: response-spans 0.2s ease-in-out forwards 0.05s;\n  opacity: 0;\n}\n\n@keyframes response-spans {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n</style>\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods';
 import type { ServerMeta, WorkspaceEventBus } from '@scalar/workspace-store/events';
 import type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments';
-import type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
+import type { ServerObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document';
 import type { ClientLayout } from '../../../../v2/types/layout';
 import { type History } from './AddressBarHistory.vue.js';
 /**
@@ -38,7 +38,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" | "trace" | null, "head" | "delete" | "get" | "options" | "patch" | "post" | "put" | "trace" | null>;
+    methodConflict: import("vue").Ref<"head" | "delete" | "get" | "options" | "patch" | "post" | "put" | "query" | "trace" | null, "head" | "delete" | "get" | "options" | "patch" | "post" | "put" | "query" | "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":"AAkuBA,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;;;;kFAygCjD,CAAC"}
+{"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"}

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-c414dc68"]]);
+var AddressBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(AddressBar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1f68de05"]]);
 //#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.1/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 = event.relatedTarget as Element | 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 as HTMLElement)?.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  /** 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":""}

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

@@ -208,7 +208,7 @@ var AddressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		* blur that precedes the click, so we still replay Send and other buttons.
 		*/
 		const handlePathBlur = (newPath, event) => {
-			const relatedTarget = event.relatedTarget;
+			const relatedTarget = event.relatedTarget instanceof Element ? event.relatedTarget : null;
 			const blurTargetSelector = tabbedOut.value || "sourceCapabilities" in event && event.sourceCapabilities === null ? null : getSelector(relatedTarget);
 			tabbedOut.value = false;
 			emitPathMethodUpdate(methodConflict.value ?? __props.method, newPath, blurTargetSelector);
@@ -220,7 +220,7 @@ var AddressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		};
 		/** Unset the server when backspace is pressed on an empty path */
 		const handlePathBackspace = (event) => {
-			if (event.target?.innerText === "\n") {
+			if (event.target instanceof HTMLElement && event.target.innerText === "\n") {
 				if (__props.isWebhook) return;
 				__props.eventBus.emit("server:update:selected", {
 					url: "",