@scalar/api-client 3.6.1 → 3.8.1

package/dist/v2/blocks/request-block/helpers/create-parameter-handlers.js

@@ -1,13 +1,39 @@
+import { setValueAtPath } from "@scalar/helpers/object/set-value-at-path";
 //#region src/v2/blocks/request-block/helpers/create-parameter-handlers.ts
+var isEmptyValue = (value) => value === void 0 || value === null || value === "";
+var getExpandedObjectPayload = (row, context, payload) => {
+	const value = {};
+	for (const contextRow of context) {
+		if (contextRow.originalParameter !== row.originalParameter || !contextRow.sourceParameterValuePath) continue;
+		if (contextRow === row && !payload) continue;
+		const nextValue = contextRow === row ? payload?.value : contextRow.value;
+		if (isEmptyValue(nextValue)) continue;
+		setValueAtPath(value, contextRow.sourceParameterValuePath, nextValue);
+	}
+	return {
+		name: row.originalParameter?.name ?? payload?.name ?? row.name,
+		value,
+		isDisabled: payload?.isDisabled ?? row.isDisabled ?? false
+	};
+};
 /** Create parameter event handlers for a given type */
-var createParameterHandlers = (type, eventBus, meta, { context, defaultParameters = 0, globalParameters = 0 }) => {
+var createParameterHandlers = (type, eventBus, meta, { context, defaultParameters = 0, globalParameters = 0, onDeleteExpandedRow }) => {
 	const offset = defaultParameters + globalParameters;
 	return {
 		delete: (payload) => {
-			const originalParameter = context[payload.index]?.originalParameter;
-			if (!originalParameter) return;
+			const row = context[payload.index];
+			if (!row?.originalParameter) return;
+			if (row.sourceParameterValuePath) {
+				onDeleteExpandedRow?.(row);
+				return eventBus.emit("operation:upsert:parameter", {
+					type,
+					payload: getExpandedObjectPayload(row, context),
+					originalParameter: row.originalParameter,
+					meta
+				}, { skipUnpackProxy: true });
+			}
 			eventBus.emit("operation:delete:parameter", {
-				originalParameter,
+				originalParameter: row.originalParameter,
 				meta
 			}, { skipUnpackProxy: true });
 		},
@@ -29,15 +55,18 @@ var createParameterHandlers = (type, eventBus, meta, { context, defaultParameter
 					payload: { isDisabled: payload.isDisabled ?? false }
 				});
 			}
-			if (index >= offset) return eventBus.emit("operation:upsert:parameter", {
-				type,
-				payload,
-				originalParameter: row?.originalParameter ?? null,
-				meta
-			}, {
-				skipUnpackProxy: true,
-				debounceKey: `update:parameter-${type}-${index - offset}`
-			});
+			if (index >= offset) {
+				const nextPayload = row?.sourceParameterValuePath && row.originalParameter ? getExpandedObjectPayload(row, context, payload) : payload;
+				return eventBus.emit("operation:upsert:parameter", {
+					type,
+					payload: nextPayload,
+					originalParameter: row?.originalParameter ?? null,
+					meta
+				}, {
+					skipUnpackProxy: true,
+					debounceKey: `update:parameter-${type}-${index - offset}`
+				});
+			}
 		}
 	};
 };

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

@@ -1 +1 @@
-{"version":3,"file":"create-parameter-handlers.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/helpers/create-parameter-handlers.ts"],"sourcesContent":["import type { OperationExampleMeta, WorkspaceEventBus } from '@scalar/workspace-store/events'\n\nimport type { TableRow } from '@/v2/blocks/request-block/components/RequestTableRow.vue'\n\ntype ParameterType = 'path' | 'cookie' | 'header' | 'query'\n\n/** Create parameter event handlers for a given type */\nexport const createParameterHandlers = (\n  type: ParameterType,\n  eventBus: WorkspaceEventBus,\n  meta: OperationExampleMeta,\n  {\n    context,\n    defaultParameters = 0,\n    globalParameters = 0,\n  }: {\n    context: TableRow[]\n    defaultParameters?: number\n    globalParameters?: number\n  },\n) => {\n  const offset = defaultParameters + globalParameters\n\n  return {\n    delete: (payload: { index: number }) => {\n      const originalParameter = context[payload.index]?.originalParameter\n      if (!originalParameter) {\n        return\n      }\n      eventBus.emit(\n        'operation:delete:parameter',\n        {\n          originalParameter,\n          meta,\n        },\n        {\n          skipUnpackProxy: true,\n        },\n      )\n    },\n    deleteAll: () =>\n      eventBus.emit('operation:delete-all:parameters', {\n        type,\n        meta,\n      }),\n    upsert: (index: number, payload: { name: string; value: string; isDisabled: boolean }) => {\n      const row = context[index]\n\n      if (index < defaultParameters + globalParameters) {\n        const extraParameterType = index < defaultParameters ? 'default' : 'global'\n\n        return eventBus.emit('operation:update:extra-parameters', {\n          type: extraParameterType,\n          in: type,\n          meta: { ...meta, name: row?.name?.toLowerCase?.() ?? 'NON_VALID' },\n          payload: { isDisabled: payload.isDisabled ?? false },\n        })\n      }\n\n      if (index >= offset) {\n        return eventBus.emit(\n          'operation:upsert:parameter',\n          {\n            type,\n            payload: payload,\n            originalParameter: row?.originalParameter ?? null,\n            meta,\n          },\n          {\n            skipUnpackProxy: true,\n            debounceKey: `update:parameter-${type}-${index - offset}`,\n          },\n        )\n      }\n    },\n  }\n}\n"],"mappings":";;AAOA,IAAa,2BACX,MACA,UACA,MACA,EACE,SACA,oBAAoB,GACpB,mBAAmB,QAMlB;CACH,MAAM,SAAS,oBAAoB;AAEnC,QAAO;EACL,SAAS,YAA+B;GACtC,MAAM,oBAAoB,QAAQ,QAAQ,QAAQ;AAClD,OAAI,CAAC,kBACH;AAEF,YAAS,KACP,8BACA;IACE;IACA;IACD,EACD,EACE,iBAAiB,MAClB,CACF;;EAEH,iBACE,SAAS,KAAK,mCAAmC;GAC/C;GACA;GACD,CAAC;EACJ,SAAS,OAAe,YAAkE;GACxF,MAAM,MAAM,QAAQ;AAEpB,OAAI,QAAQ,oBAAoB,kBAAkB;IAChD,MAAM,qBAAqB,QAAQ,oBAAoB,YAAY;AAEnE,WAAO,SAAS,KAAK,qCAAqC;KACxD,MAAM;KACN,IAAI;KACJ,MAAM;MAAE,GAAG;MAAM,MAAM,KAAK,MAAM,eAAe,IAAI;MAAa;KAClE,SAAS,EAAE,YAAY,QAAQ,cAAc,OAAO;KACrD,CAAC;;AAGJ,OAAI,SAAS,OACX,QAAO,SAAS,KACd,8BACA;IACE;IACS;IACT,mBAAmB,KAAK,qBAAqB;IAC7C;IACD,EACD;IACE,iBAAiB;IACjB,aAAa,oBAAoB,KAAK,GAAG,QAAQ;IAClD,CACF;;EAGN"}
+{"version":3,"file":"create-parameter-handlers.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/helpers/create-parameter-handlers.ts"],"sourcesContent":["import { setValueAtPath } from '@scalar/helpers/object/set-value-at-path'\nimport type { OperationExampleMeta, WorkspaceEventBus } from '@scalar/workspace-store/events'\n\nimport type { TableRow } from '@/v2/blocks/request-block/components/RequestTableRow.vue'\n\ntype ParameterType = 'path' | 'cookie' | 'header' | 'query'\n\nconst isEmptyValue = (value: unknown): boolean => value === undefined || value === null || value === ''\n\nconst getExpandedObjectPayload = (\n  row: TableRow,\n  context: TableRow[],\n  payload?: { name: string; value: string; isDisabled: boolean },\n): { name: string; value: Record<string, unknown>; isDisabled: boolean } => {\n  const value: Record<string, unknown> = {}\n\n  for (const contextRow of context) {\n    if (contextRow.originalParameter !== row.originalParameter || !contextRow.sourceParameterValuePath) {\n      continue\n    }\n\n    if (contextRow === row && !payload) {\n      continue\n    }\n\n    const nextValue = contextRow === row ? payload?.value : contextRow.value\n    if (isEmptyValue(nextValue)) {\n      continue\n    }\n\n    setValueAtPath(value, contextRow.sourceParameterValuePath, nextValue)\n  }\n\n  return {\n    name: row.originalParameter?.name ?? payload?.name ?? row.name,\n    value,\n    isDisabled: payload?.isDisabled ?? row.isDisabled ?? false,\n  }\n}\n\n/** Create parameter event handlers for a given type */\nexport const createParameterHandlers = (\n  type: ParameterType,\n  eventBus: WorkspaceEventBus,\n  meta: OperationExampleMeta,\n  {\n    context,\n    defaultParameters = 0,\n    globalParameters = 0,\n    onDeleteExpandedRow,\n  }: {\n    context: TableRow[]\n    defaultParameters?: number\n    globalParameters?: number\n    onDeleteExpandedRow?: (row: TableRow) => void\n  },\n) => {\n  const offset = defaultParameters + globalParameters\n\n  return {\n    delete: (payload: { index: number }) => {\n      const row = context[payload.index]\n      if (!row?.originalParameter) {\n        return\n      }\n\n      if (row.sourceParameterValuePath) {\n        onDeleteExpandedRow?.(row)\n\n        return eventBus.emit(\n          'operation:upsert:parameter',\n          {\n            type,\n            payload: getExpandedObjectPayload(row, context),\n            originalParameter: row.originalParameter,\n            meta,\n          },\n          {\n            skipUnpackProxy: true,\n          },\n        )\n      }\n\n      eventBus.emit(\n        'operation:delete:parameter',\n        {\n          originalParameter: row.originalParameter,\n          meta,\n        },\n        {\n          skipUnpackProxy: true,\n        },\n      )\n    },\n    deleteAll: () =>\n      eventBus.emit('operation:delete-all:parameters', {\n        type,\n        meta,\n      }),\n    upsert: (index: number, payload: { name: string; value: string; isDisabled: boolean }) => {\n      const row = context[index]\n\n      if (index < defaultParameters + globalParameters) {\n        const extraParameterType = index < defaultParameters ? 'default' : 'global'\n\n        return eventBus.emit('operation:update:extra-parameters', {\n          type: extraParameterType,\n          in: type,\n          meta: { ...meta, name: row?.name?.toLowerCase?.() ?? 'NON_VALID' },\n          payload: { isDisabled: payload.isDisabled ?? false },\n        })\n      }\n\n      if (index >= offset) {\n        const nextPayload =\n          row?.sourceParameterValuePath && row.originalParameter\n            ? getExpandedObjectPayload(row, context, payload)\n            : payload\n\n        return eventBus.emit(\n          'operation:upsert:parameter',\n          {\n            type,\n            payload: nextPayload,\n            originalParameter: row?.originalParameter ?? null,\n            meta,\n          },\n          {\n            skipUnpackProxy: true,\n            debounceKey: `update:parameter-${type}-${index - offset}`,\n          },\n        )\n      }\n    },\n  }\n}\n"],"mappings":";;AAOA,IAAM,gBAAgB,UAA4B,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU;AAErG,IAAM,4BACJ,KACA,SACA,YAC0E;CAC1E,MAAM,QAAiC,EAAE;AAEzC,MAAK,MAAM,cAAc,SAAS;AAChC,MAAI,WAAW,sBAAsB,IAAI,qBAAqB,CAAC,WAAW,yBACxE;AAGF,MAAI,eAAe,OAAO,CAAC,QACzB;EAGF,MAAM,YAAY,eAAe,MAAM,SAAS,QAAQ,WAAW;AACnE,MAAI,aAAa,UAAU,CACzB;AAGF,iBAAe,OAAO,WAAW,0BAA0B,UAAU;;AAGvE,QAAO;EACL,MAAM,IAAI,mBAAmB,QAAQ,SAAS,QAAQ,IAAI;EAC1D;EACA,YAAY,SAAS,cAAc,IAAI,cAAc;EACtD;;;AAIH,IAAa,2BACX,MACA,UACA,MACA,EACE,SACA,oBAAoB,GACpB,mBAAmB,GACnB,0BAOC;CACH,MAAM,SAAS,oBAAoB;AAEnC,QAAO;EACL,SAAS,YAA+B;GACtC,MAAM,MAAM,QAAQ,QAAQ;AAC5B,OAAI,CAAC,KAAK,kBACR;AAGF,OAAI,IAAI,0BAA0B;AAChC,0BAAsB,IAAI;AAE1B,WAAO,SAAS,KACd,8BACA;KACE;KACA,SAAS,yBAAyB,KAAK,QAAQ;KAC/C,mBAAmB,IAAI;KACvB;KACD,EACD,EACE,iBAAiB,MAClB,CACF;;AAGH,YAAS,KACP,8BACA;IACE,mBAAmB,IAAI;IACvB;IACD,EACD,EACE,iBAAiB,MAClB,CACF;;EAEH,iBACE,SAAS,KAAK,mCAAmC;GAC/C;GACA;GACD,CAAC;EACJ,SAAS,OAAe,YAAkE;GACxF,MAAM,MAAM,QAAQ;AAEpB,OAAI,QAAQ,oBAAoB,kBAAkB;IAChD,MAAM,qBAAqB,QAAQ,oBAAoB,YAAY;AAEnE,WAAO,SAAS,KAAK,qCAAqC;KACxD,MAAM;KACN,IAAI;KACJ,MAAM;MAAE,GAAG;MAAM,MAAM,KAAK,MAAM,eAAe,IAAI;MAAa;KAClE,SAAS,EAAE,YAAY,QAAQ,cAAc,OAAO;KACrD,CAAC;;AAGJ,OAAI,SAAS,QAAQ;IACnB,MAAM,cACJ,KAAK,4BAA4B,IAAI,oBACjC,yBAAyB,KAAK,SAAS,QAAQ,GAC/C;AAEN,WAAO,SAAS,KACd,8BACA;KACE;KACA,SAAS;KACT,mBAAmB,KAAK,qBAAqB;KAC7C;KACD,EACD;KACE,iBAAiB;KACjB,aAAa,oBAAoB,KAAK,GAAG,QAAQ;KAClD,CACF;;;EAGN"}

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

@@ -0,0 +1,14 @@
+import type { ParameterObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
+import type { TableRow } from '../components/RequestTableRow.vue.js';
+/**
+ * Turns a single OpenAPI parameter into one or more table rows.
+ *
+ * For object-typed query parameters with `form`/`explode: true` (the default) or `deepObject`
+ * serialization, each property becomes its own row so the user can edit them individually,
+ * matching how tools like Postman present the same parameter. Every other parameter passes
+ * through as a single row.
+ */
+export declare const createParameterRows: (parameter: ParameterObject, exampleKey: string, options?: {
+    hiddenValuePaths?: readonly string[][];
+}) => TableRow[];
+//# sourceMappingURL=create-parameter-rows.d.ts.map

package/dist/v2/blocks/request-block/helpers/create-parameter-rows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-parameter-rows.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/request-block/helpers/create-parameter-rows.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,8DAA8D,CAAA;AAGrE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAA;AA0MjE;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,GAC9B,WAAW,eAAe,EAC1B,YAAY,MAAM,EAClB,UAAS;IAAE,gBAAgB,CAAC,EAAE,SAAS,MAAM,EAAE,EAAE,CAAA;CAAO,KACvD,QAAQ,EAmCV,CAAA"}

package/dist/v2/blocks/request-block/helpers/create-parameter-rows.js

@@ -0,0 +1,136 @@
+import { isParamDisabled } from "./is-param-disabled.js";
+import { getParameterSchema } from "./get-parameter-schema.js";
+import { getValueAtPath } from "@scalar/helpers/object/get-value-at-path";
+import { deSerializeParameter, getExample } from "@scalar/workspace-store/request-example";
+import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+import { isObjectSchema } from "@scalar/workspace-store/schemas/v3.1/strict/type-guards";
+//#region src/v2/blocks/request-block/helpers/create-parameter-rows.ts
+var isParameterWithSchema = (parameter) => "schema" in parameter && parameter.schema !== void 0;
+var resolveSchema = (schema) => {
+	return getResolvedRef(schema);
+};
+/**
+* Resolves the OpenAPI serialization style and explode flag for a parameter, falling back to the
+* spec defaults (style: 'form', explode: true when style is 'form').
+*/
+var getParameterStyleAndExplode = (parameter) => {
+	const style = "style" in parameter && parameter.style ? parameter.style : "form";
+	return {
+		style,
+		explode: "explode" in parameter && parameter.explode !== void 0 ? parameter.explode : style === "form"
+	};
+};
+/**
+* Decides whether an object-typed query parameter should be expanded into one row per property,
+* and which expansion mode to use. Returns null when the parameter should stay as a single row
+* (non-query, non-object schema, or a serialization style we do not expand).
+*/
+var getExpansionMode = (parameter, schema) => {
+	if (parameter.in !== "query" || !isParameterWithSchema(parameter) || !schema || !isObjectSchema(schema)) return null;
+	const { style, explode } = getParameterStyleAndExplode(parameter);
+	if (!explode) return null;
+	if (style === "form") return "form";
+	if (style === "deepObject") return "deepObject";
+	return null;
+};
+var toTableValue = (value) => {
+	if (value === void 0 || value === null) return "";
+	if (Array.isArray(value)) return value.join(",");
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+};
+var toPathKey = (path) => path.join("\0");
+var toTableRow = ({ parameter, name, value, description, schema, isRequired, isDisabled, sourceParameterValuePath }) => ({
+	name,
+	value: toTableValue(value),
+	description,
+	schema,
+	isRequired,
+	isDisabled,
+	originalParameter: parameter,
+	sourceParameterValuePath
+});
+/** Build the single-row representation used when a parameter is not expanded. */
+var toSingleParameterRow = (parameter, schema, value, isDisabled) => toTableRow({
+	parameter,
+	name: parameter.name,
+	value,
+	description: parameter.description,
+	schema,
+	isRequired: parameter.required,
+	isDisabled
+});
+/**
+* Walks an object schema and produces one row per property.
+*
+* - In `form` mode (the OpenAPI default for query parameters) only the top-level properties are
+*   flattened, and each row is named after the property itself (`status`).
+* - In `deepObject` mode we recurse into nested objects and emit bracketed names that mirror the
+*   serialization on the wire (`filter[user][id]`).
+*
+* `pathPrefix` tracks the path inside the parent parameter value so the handler can later
+* reassemble all sibling rows back into a single object payload.
+*/
+var getExpandedPropertyRows = ({ parameter, schema, value, pathPrefix, namePrefix, mode, isDisabled, hiddenValuePaths }) => {
+	if (!schema.properties) return [];
+	const requiredProperties = new Set(schema.required ?? []);
+	return Object.entries(schema.properties).flatMap(([propertyName, propertySchema]) => {
+		const resolvedPropertySchema = resolveSchema(propertySchema);
+		if (!resolvedPropertySchema) return [];
+		const path = [...pathPrefix, propertyName];
+		const name = namePrefix ? `${namePrefix}[${propertyName}]` : propertyName;
+		if (hiddenValuePaths.has(toPathKey(path))) return [];
+		if (mode === "deepObject" && isObjectSchema(resolvedPropertySchema) && Boolean(resolvedPropertySchema.properties)) return getExpandedPropertyRows({
+			parameter,
+			schema: resolvedPropertySchema,
+			value,
+			pathPrefix: path,
+			namePrefix: name,
+			mode,
+			isDisabled,
+			hiddenValuePaths
+		});
+		return [toTableRow({
+			parameter,
+			name,
+			value: getValueAtPath(value, path),
+			description: resolvedPropertySchema.description ?? parameter.description,
+			schema: resolvedPropertySchema,
+			isRequired: requiredProperties.has(propertyName),
+			isDisabled,
+			sourceParameterValuePath: path
+		})];
+	});
+};
+/**
+* Turns a single OpenAPI parameter into one or more table rows.
+*
+* For object-typed query parameters with `form`/`explode: true` (the default) or `deepObject`
+* serialization, each property becomes its own row so the user can edit them individually,
+* matching how tools like Postman present the same parameter. Every other parameter passes
+* through as a single row.
+*/
+var createParameterRows = (parameter, exampleKey, options = {}) => {
+	const example = getExample(parameter, exampleKey, void 0);
+	const isDisabled = isParamDisabled(parameter, example);
+	const schema = getParameterSchema(parameter);
+	const mode = getExpansionMode(parameter, schema);
+	if (mode === null || !schema || !isObjectSchema(schema)) return [toSingleParameterRow(parameter, schema, example?.value, isDisabled)];
+	const value = example?.value === void 0 ? void 0 : deSerializeParameter(example.value, parameter);
+	if (!schema.properties) return [toSingleParameterRow(parameter, schema, example?.value, isDisabled)];
+	const hiddenValuePaths = new Set(options.hiddenValuePaths?.map(toPathKey) ?? []);
+	return getExpandedPropertyRows({
+		parameter,
+		schema,
+		value,
+		pathPrefix: [],
+		namePrefix: mode === "deepObject" ? parameter.name : "",
+		mode,
+		isDisabled,
+		hiddenValuePaths
+	});
+};
+//#endregion
+export { createParameterRows };
+
+//# sourceMappingURL=create-parameter-rows.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"create-parameter-rows.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/helpers/create-parameter-rows.ts"],"sourcesContent":["import { getValueAtPath } from '@scalar/helpers/object/get-value-at-path'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { deSerializeParameter, getExample } from '@scalar/workspace-store/request-example'\nimport type {\n  ParameterObject,\n  ParameterWithSchemaObject,\n  ReferenceType,\n  SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { isObjectSchema } from '@scalar/workspace-store/schemas/v3.1/strict/type-guards'\n\nimport type { TableRow } from '../components/RequestTableRow.vue'\nimport { getParameterSchema } from './get-parameter-schema'\nimport { isParamDisabled } from './is-param-disabled'\n\ntype ParameterWithRequiredSchema = ParameterWithSchemaObject & {\n  schema: ReferenceType<SchemaObject>\n}\n\n/** Serialization mode for object-typed query parameters that we expand into multiple rows. */\ntype ExpansionMode = 'form' | 'deepObject'\n\nconst isParameterWithSchema = (parameter: ParameterObject): parameter is ParameterWithRequiredSchema =>\n  'schema' in parameter && parameter.schema !== undefined\n\nconst resolveSchema = (schema: unknown): SchemaObject | undefined => {\n  const resolvedSchema = getResolvedRef(schema as SchemaObject | { '$ref': string; '$ref-value': SchemaObject })\n\n  return resolvedSchema as SchemaObject | undefined\n}\n\n/**\n * Resolves the OpenAPI serialization style and explode flag for a parameter, falling back to the\n * spec defaults (style: 'form', explode: true when style is 'form').\n */\nconst getParameterStyleAndExplode = (parameter: ParameterObject): { style: string; explode: boolean } => {\n  const style = 'style' in parameter && parameter.style ? parameter.style : 'form'\n  const explode = 'explode' in parameter && parameter.explode !== undefined ? parameter.explode : style === 'form'\n\n  return { style, explode }\n}\n\n/**\n * Decides whether an object-typed query parameter should be expanded into one row per property,\n * and which expansion mode to use. Returns null when the parameter should stay as a single row\n * (non-query, non-object schema, or a serialization style we do not expand).\n */\nconst getExpansionMode = (parameter: ParameterObject, schema: SchemaObject | undefined): ExpansionMode | null => {\n  if (parameter.in !== 'query' || !isParameterWithSchema(parameter) || !schema || !isObjectSchema(schema)) {\n    return null\n  }\n\n  const { style, explode } = getParameterStyleAndExplode(parameter)\n  if (!explode) {\n    return null\n  }\n\n  if (style === 'form') {\n    return 'form'\n  }\n  if (style === 'deepObject') {\n    return 'deepObject'\n  }\n\n  return null\n}\n\nconst toTableValue = (value: unknown): string => {\n  if (value === undefined || value === null) {\n    return ''\n  }\n\n  if (Array.isArray(value)) {\n    return value.join(',')\n  }\n\n  if (typeof value === 'object') {\n    return JSON.stringify(value)\n  }\n\n  return String(value)\n}\n\nconst toPathKey = (path: readonly string[]): string => path.join('\\u0000')\n\nconst toTableRow = ({\n  parameter,\n  name,\n  value,\n  description,\n  schema,\n  isRequired,\n  isDisabled,\n  sourceParameterValuePath,\n}: {\n  parameter: ParameterObject\n  name: string\n  value: unknown\n  description: string | undefined\n  schema: SchemaObject | undefined\n  isRequired: boolean | undefined\n  isDisabled: boolean\n  sourceParameterValuePath?: string[]\n}): TableRow => ({\n  name,\n  value: toTableValue(value),\n  description,\n  schema,\n  isRequired,\n  isDisabled,\n  originalParameter: parameter,\n  sourceParameterValuePath,\n})\n\n/** Build the single-row representation used when a parameter is not expanded. */\nconst toSingleParameterRow = (\n  parameter: ParameterObject,\n  schema: SchemaObject | undefined,\n  value: unknown,\n  isDisabled: boolean,\n): TableRow =>\n  toTableRow({\n    parameter,\n    name: parameter.name,\n    value,\n    description: parameter.description,\n    schema,\n    isRequired: parameter.required,\n    isDisabled,\n  })\n\n/**\n * Walks an object schema and produces one row per property.\n *\n * - In `form` mode (the OpenAPI default for query parameters) only the top-level properties are\n *   flattened, and each row is named after the property itself (`status`).\n * - In `deepObject` mode we recurse into nested objects and emit bracketed names that mirror the\n *   serialization on the wire (`filter[user][id]`).\n *\n * `pathPrefix` tracks the path inside the parent parameter value so the handler can later\n * reassemble all sibling rows back into a single object payload.\n */\nconst getExpandedPropertyRows = ({\n  parameter,\n  schema,\n  value,\n  pathPrefix,\n  namePrefix,\n  mode,\n  isDisabled,\n  hiddenValuePaths,\n}: {\n  parameter: ParameterObject\n  schema: Extract<SchemaObject, { type: 'object' }>\n  value: unknown\n  pathPrefix: string[]\n  namePrefix: string\n  mode: ExpansionMode\n  isDisabled: boolean\n  hiddenValuePaths: ReadonlySet<string>\n}): TableRow[] => {\n  if (!schema.properties) {\n    return []\n  }\n\n  const requiredProperties = new Set(schema.required ?? [])\n\n  return Object.entries(schema.properties).flatMap(([propertyName, propertySchema]) => {\n    const resolvedPropertySchema = resolveSchema(propertySchema)\n    if (!resolvedPropertySchema) {\n      return []\n    }\n\n    const path = [...pathPrefix, propertyName]\n    const name = namePrefix ? `${namePrefix}[${propertyName}]` : propertyName\n\n    if (hiddenValuePaths.has(toPathKey(path))) {\n      return []\n    }\n\n    // Only deepObject style recurses into nested objects. The OpenAPI 3.1 spec says form-style\n    // explode flattens only the top-level properties.\n    const shouldRecurse =\n      mode === 'deepObject' && isObjectSchema(resolvedPropertySchema) && Boolean(resolvedPropertySchema.properties)\n\n    if (shouldRecurse) {\n      return getExpandedPropertyRows({\n        parameter,\n        schema: resolvedPropertySchema,\n        value,\n        pathPrefix: path,\n        namePrefix: name,\n        mode,\n        isDisabled,\n        hiddenValuePaths,\n      })\n    }\n\n    return [\n      toTableRow({\n        parameter,\n        name,\n        value: getValueAtPath(value, path),\n        description: resolvedPropertySchema.description ?? parameter.description,\n        schema: resolvedPropertySchema,\n        isRequired: requiredProperties.has(propertyName),\n        isDisabled,\n        sourceParameterValuePath: path,\n      }),\n    ]\n  })\n}\n\n/**\n * Turns a single OpenAPI parameter into one or more table rows.\n *\n * For object-typed query parameters with `form`/`explode: true` (the default) or `deepObject`\n * serialization, each property becomes its own row so the user can edit them individually,\n * matching how tools like Postman present the same parameter. Every other parameter passes\n * through as a single row.\n */\nexport const createParameterRows = (\n  parameter: ParameterObject,\n  exampleKey: string,\n  options: { hiddenValuePaths?: readonly string[][] } = {},\n): TableRow[] => {\n  const example = getExample(parameter, exampleKey, undefined)\n  const isDisabled = isParamDisabled(parameter, example)\n  const schema = getParameterSchema(parameter)\n  const mode = getExpansionMode(parameter, schema)\n\n  // Non-expandable parameters: render as a single row.\n  if (mode === null || !schema || !isObjectSchema(schema)) {\n    return [toSingleParameterRow(parameter, schema, example?.value, isDisabled)]\n  }\n\n  // Expand into per-property rows. The deserialized value is used so existing per-property values\n  // can be displayed in the table even when the example arrives as a serialized string.\n  const value = example?.value === undefined ? undefined : deSerializeParameter(example.value, parameter)\n\n  // Fall back to a single row only when the schema has no properties to expand.\n  if (!schema.properties) {\n    return [toSingleParameterRow(parameter, schema, example?.value, isDisabled)]\n  }\n\n  const hiddenValuePaths = new Set(options.hiddenValuePaths?.map(toPathKey) ?? [])\n\n  const rows = getExpandedPropertyRows({\n    parameter,\n    schema,\n    value,\n    pathPrefix: [],\n    // deepObject names every row with a `parent[child]` prefix; form-style names use bare property names.\n    namePrefix: mode === 'deepObject' ? parameter.name : '',\n    mode,\n    isDisabled,\n    hiddenValuePaths,\n  })\n\n  return rows\n}\n"],"mappings":";;;;;;;AAsBA,IAAM,yBAAyB,cAC7B,YAAY,aAAa,UAAU,WAAW,KAAA;AAEhD,IAAM,iBAAiB,WAA8C;AAGnE,QAFuB,eAAe,OAAwE;;;;;;AAShH,IAAM,+BAA+B,cAAoE;CACvG,MAAM,QAAQ,WAAW,aAAa,UAAU,QAAQ,UAAU,QAAQ;AAG1E,QAAO;EAAE;EAAO,SAFA,aAAa,aAAa,UAAU,YAAY,KAAA,IAAY,UAAU,UAAU,UAAU;EAEjF;;;;;;;AAQ3B,IAAM,oBAAoB,WAA4B,WAA2D;AAC/G,KAAI,UAAU,OAAO,WAAW,CAAC,sBAAsB,UAAU,IAAI,CAAC,UAAU,CAAC,eAAe,OAAO,CACrG,QAAO;CAGT,MAAM,EAAE,OAAO,YAAY,4BAA4B,UAAU;AACjE,KAAI,CAAC,QACH,QAAO;AAGT,KAAI,UAAU,OACZ,QAAO;AAET,KAAI,UAAU,aACZ,QAAO;AAGT,QAAO;;AAGT,IAAM,gBAAgB,UAA2B;AAC/C,KAAI,UAAU,KAAA,KAAa,UAAU,KACnC,QAAO;AAGT,KAAI,MAAM,QAAQ,MAAM,CACtB,QAAO,MAAM,KAAK,IAAI;AAGxB,KAAI,OAAO,UAAU,SACnB,QAAO,KAAK,UAAU,MAAM;AAG9B,QAAO,OAAO,MAAM;;AAGtB,IAAM,aAAa,SAAoC,KAAK,KAAK,KAAS;AAE1E,IAAM,cAAc,EAClB,WACA,MACA,OACA,aACA,QACA,YACA,YACA,gCAUe;CACf;CACA,OAAO,aAAa,MAAM;CAC1B;CACA;CACA;CACA;CACA,mBAAmB;CACnB;CACD;;AAGD,IAAM,wBACJ,WACA,QACA,OACA,eAEA,WAAW;CACT;CACA,MAAM,UAAU;CAChB;CACA,aAAa,UAAU;CACvB;CACA,YAAY,UAAU;CACtB;CACD,CAAC;;;;;;;;;;;;AAaJ,IAAM,2BAA2B,EAC/B,WACA,QACA,OACA,YACA,YACA,MACA,YACA,uBAUgB;AAChB,KAAI,CAAC,OAAO,WACV,QAAO,EAAE;CAGX,MAAM,qBAAqB,IAAI,IAAI,OAAO,YAAY,EAAE,CAAC;AAEzD,QAAO,OAAO,QAAQ,OAAO,WAAW,CAAC,SAAS,CAAC,cAAc,oBAAoB;EACnF,MAAM,yBAAyB,cAAc,eAAe;AAC5D,MAAI,CAAC,uBACH,QAAO,EAAE;EAGX,MAAM,OAAO,CAAC,GAAG,YAAY,aAAa;EAC1C,MAAM,OAAO,aAAa,GAAG,WAAW,GAAG,aAAa,KAAK;AAE7D,MAAI,iBAAiB,IAAI,UAAU,KAAK,CAAC,CACvC,QAAO,EAAE;AAQX,MAFE,SAAS,gBAAgB,eAAe,uBAAuB,IAAI,QAAQ,uBAAuB,WAAW,CAG7G,QAAO,wBAAwB;GAC7B;GACA,QAAQ;GACR;GACA,YAAY;GACZ,YAAY;GACZ;GACA;GACA;GACD,CAAC;AAGJ,SAAO,CACL,WAAW;GACT;GACA;GACA,OAAO,eAAe,OAAO,KAAK;GAClC,aAAa,uBAAuB,eAAe,UAAU;GAC7D,QAAQ;GACR,YAAY,mBAAmB,IAAI,aAAa;GAChD;GACA,0BAA0B;GAC3B,CAAC,CACH;GACD;;;;;;;;;;AAWJ,IAAa,uBACX,WACA,YACA,UAAsD,EAAE,KACzC;CACf,MAAM,UAAU,WAAW,WAAW,YAAY,KAAA,EAAU;CAC5D,MAAM,aAAa,gBAAgB,WAAW,QAAQ;CACtD,MAAM,SAAS,mBAAmB,UAAU;CAC5C,MAAM,OAAO,iBAAiB,WAAW,OAAO;AAGhD,KAAI,SAAS,QAAQ,CAAC,UAAU,CAAC,eAAe,OAAO,CACrD,QAAO,CAAC,qBAAqB,WAAW,QAAQ,SAAS,OAAO,WAAW,CAAC;CAK9E,MAAM,QAAQ,SAAS,UAAU,KAAA,IAAY,KAAA,IAAY,qBAAqB,QAAQ,OAAO,UAAU;AAGvG,KAAI,CAAC,OAAO,WACV,QAAO,CAAC,qBAAqB,WAAW,QAAQ,SAAS,OAAO,WAAW,CAAC;CAG9E,MAAM,mBAAmB,IAAI,IAAI,QAAQ,kBAAkB,IAAI,UAAU,IAAI,EAAE,CAAC;AAchF,QAZa,wBAAwB;EACnC;EACA;EACA;EACA,YAAY,EAAE;EAEd,YAAY,SAAS,eAAe,UAAU,OAAO;EACrD;EACA;EACA;EACD,CAAC"}

package/dist/v2/blocks/request-block/helpers/get-form-body-rows.js

@@ -1,5 +1,5 @@
-import { isObject } from "@scalar/helpers/object/is-object";
 import { objectEntries } from "@scalar/helpers/object/object-entries";
+import { isObject } from "@scalar/helpers/object/is-object";
 import { resolve } from "@scalar/workspace-store/resolve";
 import { isObjectSchema } from "@scalar/workspace-store/schemas/v3.1/strict/type-guards";
 //#region src/v2/blocks/request-block/helpers/get-form-body-rows.ts

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

@@ -1,6 +1,6 @@
+import ViewLayoutSection_default from "../../../components/ViewLayout/ViewLayoutSection.vue.js";
 import { textMediaTypes } from "./helpers/media-types.js";
 import SectionFilter_default from "../../../components/SectionFilter.vue.js";
-import ViewLayoutSection_default from "../../../components/ViewLayout/ViewLayoutSection.vue.js";
 import Headers_default from "./components/Headers.vue.js";
 import ResponseBody_default from "./components/ResponseBody.vue.js";
 import ResponseBodyStreaming_default from "./components/ResponseBodyStreaming.vue.js";

package/dist/v2/blocks/response-block/components/ResponseBody.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBody.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/response-block/components/ResponseBody.vue"],"names":[],"mappings":"AAyIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAe7D,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,QAAQ,GAAG,WAAW,CAAA;IAC9B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC1C,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;CACzB,CAAC;AA4OF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ResponseBody.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/response-block/components/ResponseBody.vue"],"names":[],"mappings":"AA0IA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAe7D,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,QAAQ,GAAG,WAAW,CAAA;IAC9B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC1C,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;CACzB,CAAC;AA8OF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/response-block/components/ResponseBody.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import ResponseBody_vue_vue_type_script_setup_true_lang_default from "./ResponseBody.vue.script.js";
 /* empty css                           */
 //#region src/v2/blocks/response-block/components/ResponseBody.vue
-var ResponseBody_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ResponseBody_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-30c34ea4"]]);
+var ResponseBody_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ResponseBody_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bb31ac6f"]]);
 //#endregion
 export { ResponseBody_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ResponseBody.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBody.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport { computed, ref } from 'vue'\n\nimport { getMediaTypeConfig } from '@/v2/blocks/response-block/helpers/media-types'\nimport { processResponseBody } from '@/v2/blocks/response-block/helpers/process-response-body'\nimport { resolveResponseBodyHandler } from '@/v2/blocks/response-block/helpers/resolve-response-body-handler'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nimport ResponseBodyDownload from './ResponseBodyDownload.vue'\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\nimport ResponseBodyPreview from './ResponseBodyPreview.vue'\nimport ResponseBodyRaw from './ResponseBodyRaw.vue'\nimport ResponseBodyToggle from './ResponseBodyToggle.vue'\n\nconst {\n  data,\n  headers,\n  plugins = [],\n} = defineProps<{\n  title: string\n  layout: 'client' | 'reference'\n  data: unknown\n  headers: { name: string; value: string }[]\n  plugins?: ClientPlugin[]\n}>()\n\n/** Preview / Raw toggle */\nconst toggle = ref(true)\n\nconst responseBody = computed(() =>\n  processResponseBody({\n    data,\n    headers,\n  }),\n)\n\nconst mimeEssence = computed(() => responseBody.value.mimeType.essence)\n\nconst mediaConfig = computed(() => getMediaTypeConfig(mimeEssence.value))\n\nconst pluginHandler = computed(() =>\n  resolveResponseBodyHandler(mimeEssence.value, plugins),\n)\n\nconst hasRaw = computed(\n  () =>\n    !!pluginHandler.value?.rawComponent ||\n    !!pluginHandler.value?.decode ||\n    !!mediaConfig.value?.raw,\n)\n\nconst hasPreview = computed(\n  () => !!pluginHandler.value?.previewComponent || !!mediaConfig.value?.preview,\n)\n\nconst showToggle = computed(() => hasRaw.value && hasPreview.value)\n\nconst showPreview = computed(() => toggle.value || !showToggle.value)\nconst showRaw = computed(() => !toggle.value || !showToggle.value)\n\nconst rawLanguage = computed(\n  () => pluginHandler.value?.language ?? mediaConfig.value?.language,\n)\n</script>\n<template>\n  <CollapsibleSection\n    class=\"max-h-content overflow-y-hidden\"\n    :isStatic=\"layout === 'reference'\">\n    <template #title>{{ title }}</template>\n    <template\n      v-if=\"data && responseBody.dataUrl\"\n      #actions>\n      <ResponseBodyDownload\n        :filename=\"responseBody.attachmentFilename\"\n        :href=\"responseBody.dataUrl\"\n        :type=\"responseBody.mimeType?.essence\" />\n    </template>\n    <div\n      v-if=\"data\"\n      class=\"bg-b-1 flex max-h-[calc(100%-32px)] flex-col overflow-hidden\">\n      <div\n        class=\"box-content flex min-h-8 items-center justify-between border-y px-3\">\n        <span class=\"text-xxs font-code leading-5\">\n          {{ mimeEssence }}\n        </span>\n        <ResponseBodyToggle\n          v-if=\"showToggle\"\n          v-model=\"toggle\" />\n      </div>\n\n      <!-- Plugin custom raw component -->\n      <component\n        :is=\"pluginHandler.rawComponent\"\n        v-if=\"pluginHandler?.rawComponent && hasRaw && showRaw\"\n        :key=\"`plugin-raw-${responseBody.dataUrl}`\"\n        :content=\"data\"\n        :contentType=\"mimeEssence\" />\n      <!-- Default raw renderer (used when plugin provides decode but no custom component) -->\n      <ResponseBodyRaw\n        v-else-if=\"hasRaw && showRaw\"\n        :key=\"`raw-${responseBody.dataUrl}`\"\n        :content=\"data\"\n        :language=\"rawLanguage as CodeMirrorLanguage\" />\n\n      <!-- Plugin custom preview component -->\n      <component\n        :is=\"pluginHandler.previewComponent\"\n        v-if=\"pluginHandler?.previewComponent && hasPreview && showPreview\"\n        :key=\"`plugin-preview-${responseBody.dataUrl}`\"\n        :content=\"data\"\n        :contentType=\"mimeEssence\"\n        :dataUrl=\"responseBody.dataUrl\" />\n      <!-- Default preview renderer -->\n      <ResponseBodyPreview\n        v-else-if=\"mediaConfig?.preview && showPreview\"\n        :key=\"`preview-${responseBody.dataUrl}`\"\n        :alpha=\"mediaConfig.alpha\"\n        :mode=\"mediaConfig.preview\"\n        :src=\"responseBody.dataUrl\"\n        :type=\"mimeEssence\" />\n\n      <ResponseBodyInfo v-if=\"!hasRaw && !hasPreview\">\n        Binary file\n      </ResponseBodyInfo>\n    </div>\n  </CollapsibleSection>\n</template>\n<style scoped>\n.scalar-code-block :deep(.hljs *) {\n  font-size: var(--scalar-small);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ResponseBody.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBody.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport { computed, ref } from 'vue'\n\nimport { getMediaTypeConfig } from '@/v2/blocks/response-block/helpers/media-types'\nimport { processResponseBody } from '@/v2/blocks/response-block/helpers/process-response-body'\nimport { resolveResponseBodyHandler } from '@/v2/blocks/response-block/helpers/resolve-response-body-handler'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nimport ResponseBodyDownload from './ResponseBodyDownload.vue'\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\nimport ResponseBodyPreview from './ResponseBodyPreview.vue'\nimport ResponseBodyRaw from './ResponseBodyRaw.vue'\nimport ResponseBodyToggle from './ResponseBodyToggle.vue'\n\nconst {\n  data,\n  headers,\n  plugins = [],\n} = defineProps<{\n  title: string\n  layout: 'client' | 'reference'\n  data: unknown\n  headers: { name: string; value: string }[]\n  plugins?: ClientPlugin[]\n}>()\n\n/** Preview / Raw toggle */\nconst toggle = ref(true)\n\nconst responseBody = computed(() =>\n  processResponseBody({\n    data,\n    headers,\n  }),\n)\n\nconst mimeEssence = computed(() => responseBody.value.mimeType.essence)\n\nconst mediaConfig = computed(() => getMediaTypeConfig(mimeEssence.value))\n\nconst pluginHandler = computed(() =>\n  resolveResponseBodyHandler(mimeEssence.value, plugins),\n)\n\nconst hasRaw = computed(\n  () =>\n    !!pluginHandler.value?.rawComponent ||\n    !!pluginHandler.value?.decode ||\n    !!mediaConfig.value?.raw,\n)\n\nconst hasPreview = computed(\n  () => !!pluginHandler.value?.previewComponent || !!mediaConfig.value?.preview,\n)\n\nconst showToggle = computed(() => hasRaw.value && hasPreview.value)\n\nconst showPreview = computed(() => toggle.value || !showToggle.value)\nconst showRaw = computed(() => !toggle.value || !showToggle.value)\n\nconst rawLanguage = computed(\n  () => pluginHandler.value?.language ?? mediaConfig.value?.language,\n)\n</script>\n<template>\n  <CollapsibleSection\n    class=\"max-h-content overflow-y-hidden\"\n    :isStatic=\"layout === 'reference'\">\n    <template #title>{{ title }}</template>\n    <template\n      v-if=\"data && responseBody.dataUrl\"\n      #actions>\n      <ResponseBodyDownload\n        :filename=\"responseBody.attachmentFilename\"\n        :href=\"responseBody.dataUrl\"\n        :type=\"responseBody.mimeType?.essence\" />\n    </template>\n    <div\n      v-if=\"data\"\n      class=\"bg-b-1 flex max-h-[calc(100%-32px)] flex-col overflow-hidden\">\n      <div\n        class=\"box-content flex min-h-8 items-center justify-between border-y px-3\">\n        <span class=\"text-xxs font-code leading-5\">\n          {{ mimeEssence }}\n        </span>\n        <ResponseBodyToggle\n          v-if=\"showToggle\"\n          v-model=\"toggle\" />\n      </div>\n\n      <!-- Plugin custom preview component -->\n      <component\n        :is=\"pluginHandler.previewComponent\"\n        v-if=\"pluginHandler?.previewComponent && hasPreview && showPreview\"\n        :key=\"`plugin-preview-${responseBody.dataUrl}`\"\n        :content=\"data\"\n        :contentType=\"mimeEssence\"\n        :dataUrl=\"responseBody.dataUrl\" />\n      <!-- Default preview renderer (JSON, image, video, HTML object, …) -->\n      <ResponseBodyPreview\n        v-else-if=\"mediaConfig?.preview && showPreview\"\n        :key=\"`preview-${responseBody.dataUrl}`\"\n        :alpha=\"mediaConfig.alpha\"\n        :content=\"data\"\n        :mode=\"mediaConfig.preview\"\n        :src=\"responseBody.dataUrl\"\n        :type=\"mimeEssence\" />\n\n      <!-- Plugin custom raw component -->\n      <component\n        :is=\"pluginHandler.rawComponent\"\n        v-if=\"pluginHandler?.rawComponent && hasRaw && showRaw\"\n        :key=\"`plugin-raw-${responseBody.dataUrl}`\"\n        :content=\"data\"\n        :contentType=\"mimeEssence\" />\n      <!-- Default raw: exact decoded body (no JSON pretty-print) -->\n      <ResponseBodyRaw\n        v-else-if=\"hasRaw && showRaw && !pluginHandler?.rawComponent\"\n        :key=\"`raw-${responseBody.dataUrl}`\"\n        :content=\"data\"\n        :language=\"rawLanguage as CodeMirrorLanguage\" />\n\n      <ResponseBodyInfo v-if=\"!hasRaw && !hasPreview\">\n        Binary file\n      </ResponseBodyInfo>\n    </div>\n  </CollapsibleSection>\n</template>\n<style scoped>\n.scalar-code-block :deep(.hljs *) {\n  font-size: var(--scalar-small);\n}\n</style>\n"],"mappings":""}

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

@@ -4,8 +4,8 @@ import CollapsibleSection_default from "../../../components/layout/CollapsibleSe
 import { processResponseBody } from "../helpers/process-response-body.js";
 import ResponseBodyDownload_default from "./ResponseBodyDownload.vue.js";
 import ResponseBodyInfo_default from "./ResponseBodyInfo.vue.js";
-import ResponseBodyPreview_default from "./ResponseBodyPreview.vue.js";
 import ResponseBodyRaw_default from "./ResponseBodyRaw.vue.js";
+import ResponseBodyPreview_default from "./ResponseBodyPreview.vue.js";
 import ResponseBodyToggle_default from "./ResponseBodyToggle.vue.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
 //#region src/v2/blocks/response-block/components/ResponseBody.vue?vue&type=script&setup=true&lang.ts
@@ -52,15 +52,6 @@ var ResponseBody_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 						modelValue: toggle.value,
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => toggle.value = $event)
 					}, null, 8, ["modelValue"])) : createCommentVNode("", true)]),
-					pluginHandler.value?.rawComponent && hasRaw.value && showRaw.value ? (openBlock(), createBlock(resolveDynamicComponent(pluginHandler.value.rawComponent), {
-						key: `plugin-raw-${responseBody.value.dataUrl}`,
-						content: __props.data,
-						contentType: mimeEssence.value
-					}, null, 8, ["content", "contentType"])) : hasRaw.value && showRaw.value ? (openBlock(), createBlock(ResponseBodyRaw_default, {
-						key: `raw-${responseBody.value.dataUrl}`,
-						content: __props.data,
-						language: rawLanguage.value
-					}, null, 8, ["content", "language"])) : createCommentVNode("", true),
 					pluginHandler.value?.previewComponent && hasPreview.value && showPreview.value ? (openBlock(), createBlock(resolveDynamicComponent(pluginHandler.value.previewComponent), {
 						key: `plugin-preview-${responseBody.value.dataUrl}`,
 						content: __props.data,
@@ -73,15 +64,26 @@ var ResponseBody_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					])) : mediaConfig.value?.preview && showPreview.value ? (openBlock(), createBlock(ResponseBodyPreview_default, {
 						key: `preview-${responseBody.value.dataUrl}`,
 						alpha: mediaConfig.value.alpha,
+						content: __props.data,
 						mode: mediaConfig.value.preview,
 						src: responseBody.value.dataUrl,
 						type: mimeEssence.value
 					}, null, 8, [
 						"alpha",
+						"content",
 						"mode",
 						"src",
 						"type"
 					])) : createCommentVNode("", true),
+					pluginHandler.value?.rawComponent && hasRaw.value && showRaw.value ? (openBlock(), createBlock(resolveDynamicComponent(pluginHandler.value.rawComponent), {
+						key: `plugin-raw-${responseBody.value.dataUrl}`,
+						content: __props.data,
+						contentType: mimeEssence.value
+					}, null, 8, ["content", "contentType"])) : hasRaw.value && showRaw.value && !pluginHandler.value?.rawComponent ? (openBlock(), createBlock(ResponseBodyRaw_default, {
+						key: `raw-${responseBody.value.dataUrl}`,
+						content: __props.data,
+						language: rawLanguage.value
+					}, null, 8, ["content", "language"])) : createCommentVNode("", true),
 					!hasRaw.value && !hasPreview.value ? (openBlock(), createBlock(ResponseBodyInfo_default, { key: 4 }, {
 						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode(" Binary file ", -1)])]),
 						_: 1

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

@@ -1 +1 @@
-{"version":3,"file":"ResponseBody.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBody.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport { computed, ref } from 'vue'\n\nimport { getMediaTypeConfig } from '@/v2/blocks/response-block/helpers/media-types'\nimport { processResponseBody } from '@/v2/blocks/response-block/helpers/process-response-body'\nimport { resolveResponseBodyHandler } from '@/v2/blocks/response-block/helpers/resolve-response-body-handler'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nimport ResponseBodyDownload from './ResponseBodyDownload.vue'\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\nimport ResponseBodyPreview from './ResponseBodyPreview.vue'\nimport ResponseBodyRaw from './ResponseBodyRaw.vue'\nimport ResponseBodyToggle from './ResponseBodyToggle.vue'\n\nconst {\n  data,\n  headers,\n  plugins = [],\n} = defineProps<{\n  title: string\n  layout: 'client' | 'reference'\n  data: unknown\n  headers: { name: string; value: string }[]\n  plugins?: ClientPlugin[]\n}>()\n\n/** Preview / Raw toggle */\nconst toggle = ref(true)\n\nconst responseBody = computed(() =>\n  processResponseBody({\n    data,\n    headers,\n  }),\n)\n\nconst mimeEssence = computed(() => responseBody.value.mimeType.essence)\n\nconst mediaConfig = computed(() => getMediaTypeConfig(mimeEssence.value))\n\nconst pluginHandler = computed(() =>\n  resolveResponseBodyHandler(mimeEssence.value, plugins),\n)\n\nconst hasRaw = computed(\n  () =>\n    !!pluginHandler.value?.rawComponent ||\n    !!pluginHandler.value?.decode ||\n    !!mediaConfig.value?.raw,\n)\n\nconst hasPreview = computed(\n  () => !!pluginHandler.value?.previewComponent || !!mediaConfig.value?.preview,\n)\n\nconst showToggle = computed(() => hasRaw.value && hasPreview.value)\n\nconst showPreview = computed(() => toggle.value || !showToggle.value)\nconst showRaw = computed(() => !toggle.value || !showToggle.value)\n\nconst rawLanguage = computed(\n  () => pluginHandler.value?.language ?? mediaConfig.value?.language,\n)\n</script>\n<template>\n  <CollapsibleSection\n    class=\"max-h-content overflow-y-hidden\"\n    :isStatic=\"layout === 'reference'\">\n    <template #title>{{ title }}</template>\n    <template\n      v-if=\"data && responseBody.dataUrl\"\n      #actions>\n      <ResponseBodyDownload\n        :filename=\"responseBody.attachmentFilename\"\n        :href=\"responseBody.dataUrl\"\n        :type=\"responseBody.mimeType?.essence\" />\n    </template>\n    <div\n      v-if=\"data\"\n      class=\"bg-b-1 flex max-h-[calc(100%-32px)] flex-col overflow-hidden\">\n      <div\n        class=\"box-content flex min-h-8 items-center justify-between border-y px-3\">\n        <span class=\"text-xxs font-code leading-5\">\n          {{ mimeEssence }}\n        </span>\n        <ResponseBodyToggle\n          v-if=\"showToggle\"\n          v-model=\"toggle\" />\n      </div>\n\n      <!-- Plugin custom raw component -->\n      <component\n        :is=\"pluginHandler.rawComponent\"\n        v-if=\"pluginHandler?.rawComponent && hasRaw && showRaw\"\n        :key=\"`plugin-raw-${responseBody.dataUrl}`\"\n        :content=\"data\"\n        :contentType=\"mimeEssence\" />\n      <!-- Default raw renderer (used when plugin provides decode but no custom component) -->\n      <ResponseBodyRaw\n        v-else-if=\"hasRaw && showRaw\"\n        :key=\"`raw-${responseBody.dataUrl}`\"\n        :content=\"data\"\n        :language=\"rawLanguage as CodeMirrorLanguage\" />\n\n      <!-- Plugin custom preview component -->\n      <component\n        :is=\"pluginHandler.previewComponent\"\n        v-if=\"pluginHandler?.previewComponent && hasPreview && showPreview\"\n        :key=\"`plugin-preview-${responseBody.dataUrl}`\"\n        :content=\"data\"\n        :contentType=\"mimeEssence\"\n        :dataUrl=\"responseBody.dataUrl\" />\n      <!-- Default preview renderer -->\n      <ResponseBodyPreview\n        v-else-if=\"mediaConfig?.preview && showPreview\"\n        :key=\"`preview-${responseBody.dataUrl}`\"\n        :alpha=\"mediaConfig.alpha\"\n        :mode=\"mediaConfig.preview\"\n        :src=\"responseBody.dataUrl\"\n        :type=\"mimeEssence\" />\n\n      <ResponseBodyInfo v-if=\"!hasRaw && !hasPreview\">\n        Binary file\n      </ResponseBodyInfo>\n    </div>\n  </CollapsibleSection>\n</template>\n<style scoped>\n.scalar-code-block :deep(.hljs *) {\n  font-size: var(--scalar-small);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,SAAS,IAAI,KAAI;EAEvB,MAAM,eAAe,eACnB,oBAAoB;GAClB,MAAG,QAAA;GACH,SAAM,QAAA;GACP,CAAC,CACJ;EAEA,MAAM,cAAc,eAAe,aAAa,MAAM,SAAS,QAAO;EAEtE,MAAM,cAAc,eAAe,mBAAmB,YAAY,MAAM,CAAA;EAExE,MAAM,gBAAgB,eACpB,2BAA2B,YAAY,OAAO,QAAA,QAAQ,CACxD;EAEA,MAAM,SAAS,eAEX,CAAC,CAAC,cAAc,OAAO,gBACvB,CAAC,CAAC,cAAc,OAAO,UACvB,CAAC,CAAC,YAAY,OAAO,IACzB;EAEA,MAAM,aAAa,eACX,CAAC,CAAC,cAAc,OAAO,oBAAoB,CAAC,CAAC,YAAY,OAAO,QACxE;EAEA,MAAM,aAAa,eAAe,OAAO,SAAS,WAAW,MAAK;EAElE,MAAM,cAAc,eAAe,OAAO,SAAS,CAAC,WAAW,MAAK;EACpE,MAAM,UAAU,eAAe,CAAC,OAAO,SAAS,CAAC,WAAW,MAAK;EAEjE,MAAM,cAAc,eACZ,cAAc,OAAO,YAAY,YAAY,OAAO,SAC5D;;uBAGE,YA4DqB,MAAA,2BAAA,EAAA;IA3DnB,OAAM;IACL,UAAU,QAAA,WAAM;;IACN,OAAK,cAAY,CAAA,gBAAA,gBAAR,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA;2BAwDnB,CA9CE,QAAA,QAAA,WAAA,EADR,mBA+CM,OA/CN,YA+CM;KA5CJ,mBAQM,OARN,YAQM,CANJ,mBAEO,QAFP,YAEO,gBADF,YAAA,MAAW,EAAA,EAAA,EAGR,WAAA,SAAA,WAAA,EADR,YAEqB,4BAAA;;kBAAV,OAAA;0EAAM,QAAA;;KAMX,cAAA,OAAe,gBAAgB,OAAA,SAAU,QAAA,SAAA,WAAA,EAFjD,YAK+B,wBAJxB,cAAA,MAAc,aAAY,EAAA;MAE9B,KAAG,cAAgB,aAAA,MAAa;MAChC,SAAS,QAAA;MACT,aAAa,YAAA;gDAGH,OAAA,SAAU,QAAA,SAAA,WAAA,EADvB,YAIkD,yBAAA;MAF/C,KAAG,OAAS,aAAA,MAAa;MACzB,SAAS,QAAA;MACT,UAAU,YAAA;;KAKL,cAAA,OAAe,oBAAoB,WAAA,SAAc,YAAA,SAAA,WAAA,EAFzD,YAMoC,wBAL7B,cAAA,MAAc,iBAAgB,EAAA;MAElC,KAAG,kBAAoB,aAAA,MAAa;MACpC,SAAS,QAAA;MACT,aAAa,YAAA;MACb,SAAS,aAAA,MAAa;;;;;WAGZ,YAAA,OAAa,WAAW,YAAA,SAAA,WAAA,EADrC,YAMwB,6BAAA;MAJrB,KAAG,WAAa,aAAA,MAAa;MAC7B,OAAO,YAAA,MAAY;MACnB,MAAM,YAAA,MAAY;MAClB,KAAK,aAAA,MAAa;MAClB,MAAM,YAAA;;;;;;;MAEgB,OAAA,SAAM,CAAK,WAAA,SAAA,WAAA,EAApC,YAEmB,0BAAA,EAAA,KAAA,GAAA,EAAA;6BAAnB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFgD,iBAEhD,GAAA,CAAA,EAAA,CAAA;;;;;OArDM,QAAA,QAAQ,aAAA,MAAa,UAAA;UAC1B;sBAI0C,CAH3C,YAG2C,8BAAA;KAFxC,UAAU,aAAA,MAAa;KACvB,MAAM,aAAA,MAAa;KACnB,MAAM,aAAA,MAAa,UAAU"}
+{"version":3,"file":"ResponseBody.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBody.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport { computed, ref } from 'vue'\n\nimport { getMediaTypeConfig } from '@/v2/blocks/response-block/helpers/media-types'\nimport { processResponseBody } from '@/v2/blocks/response-block/helpers/process-response-body'\nimport { resolveResponseBodyHandler } from '@/v2/blocks/response-block/helpers/resolve-response-body-handler'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nimport ResponseBodyDownload from './ResponseBodyDownload.vue'\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\nimport ResponseBodyPreview from './ResponseBodyPreview.vue'\nimport ResponseBodyRaw from './ResponseBodyRaw.vue'\nimport ResponseBodyToggle from './ResponseBodyToggle.vue'\n\nconst {\n  data,\n  headers,\n  plugins = [],\n} = defineProps<{\n  title: string\n  layout: 'client' | 'reference'\n  data: unknown\n  headers: { name: string; value: string }[]\n  plugins?: ClientPlugin[]\n}>()\n\n/** Preview / Raw toggle */\nconst toggle = ref(true)\n\nconst responseBody = computed(() =>\n  processResponseBody({\n    data,\n    headers,\n  }),\n)\n\nconst mimeEssence = computed(() => responseBody.value.mimeType.essence)\n\nconst mediaConfig = computed(() => getMediaTypeConfig(mimeEssence.value))\n\nconst pluginHandler = computed(() =>\n  resolveResponseBodyHandler(mimeEssence.value, plugins),\n)\n\nconst hasRaw = computed(\n  () =>\n    !!pluginHandler.value?.rawComponent ||\n    !!pluginHandler.value?.decode ||\n    !!mediaConfig.value?.raw,\n)\n\nconst hasPreview = computed(\n  () => !!pluginHandler.value?.previewComponent || !!mediaConfig.value?.preview,\n)\n\nconst showToggle = computed(() => hasRaw.value && hasPreview.value)\n\nconst showPreview = computed(() => toggle.value || !showToggle.value)\nconst showRaw = computed(() => !toggle.value || !showToggle.value)\n\nconst rawLanguage = computed(\n  () => pluginHandler.value?.language ?? mediaConfig.value?.language,\n)\n</script>\n<template>\n  <CollapsibleSection\n    class=\"max-h-content overflow-y-hidden\"\n    :isStatic=\"layout === 'reference'\">\n    <template #title>{{ title }}</template>\n    <template\n      v-if=\"data && responseBody.dataUrl\"\n      #actions>\n      <ResponseBodyDownload\n        :filename=\"responseBody.attachmentFilename\"\n        :href=\"responseBody.dataUrl\"\n        :type=\"responseBody.mimeType?.essence\" />\n    </template>\n    <div\n      v-if=\"data\"\n      class=\"bg-b-1 flex max-h-[calc(100%-32px)] flex-col overflow-hidden\">\n      <div\n        class=\"box-content flex min-h-8 items-center justify-between border-y px-3\">\n        <span class=\"text-xxs font-code leading-5\">\n          {{ mimeEssence }}\n        </span>\n        <ResponseBodyToggle\n          v-if=\"showToggle\"\n          v-model=\"toggle\" />\n      </div>\n\n      <!-- Plugin custom preview component -->\n      <component\n        :is=\"pluginHandler.previewComponent\"\n        v-if=\"pluginHandler?.previewComponent && hasPreview && showPreview\"\n        :key=\"`plugin-preview-${responseBody.dataUrl}`\"\n        :content=\"data\"\n        :contentType=\"mimeEssence\"\n        :dataUrl=\"responseBody.dataUrl\" />\n      <!-- Default preview renderer (JSON, image, video, HTML object, …) -->\n      <ResponseBodyPreview\n        v-else-if=\"mediaConfig?.preview && showPreview\"\n        :key=\"`preview-${responseBody.dataUrl}`\"\n        :alpha=\"mediaConfig.alpha\"\n        :content=\"data\"\n        :mode=\"mediaConfig.preview\"\n        :src=\"responseBody.dataUrl\"\n        :type=\"mimeEssence\" />\n\n      <!-- Plugin custom raw component -->\n      <component\n        :is=\"pluginHandler.rawComponent\"\n        v-if=\"pluginHandler?.rawComponent && hasRaw && showRaw\"\n        :key=\"`plugin-raw-${responseBody.dataUrl}`\"\n        :content=\"data\"\n        :contentType=\"mimeEssence\" />\n      <!-- Default raw: exact decoded body (no JSON pretty-print) -->\n      <ResponseBodyRaw\n        v-else-if=\"hasRaw && showRaw && !pluginHandler?.rawComponent\"\n        :key=\"`raw-${responseBody.dataUrl}`\"\n        :content=\"data\"\n        :language=\"rawLanguage as CodeMirrorLanguage\" />\n\n      <ResponseBodyInfo v-if=\"!hasRaw && !hasPreview\">\n        Binary file\n      </ResponseBodyInfo>\n    </div>\n  </CollapsibleSection>\n</template>\n<style scoped>\n.scalar-code-block :deep(.hljs *) {\n  font-size: var(--scalar-small);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,SAAS,IAAI,KAAI;EAEvB,MAAM,eAAe,eACnB,oBAAoB;GAClB,MAAG,QAAA;GACH,SAAM,QAAA;GACP,CAAC,CACJ;EAEA,MAAM,cAAc,eAAe,aAAa,MAAM,SAAS,QAAO;EAEtE,MAAM,cAAc,eAAe,mBAAmB,YAAY,MAAM,CAAA;EAExE,MAAM,gBAAgB,eACpB,2BAA2B,YAAY,OAAO,QAAA,QAAQ,CACxD;EAEA,MAAM,SAAS,eAEX,CAAC,CAAC,cAAc,OAAO,gBACvB,CAAC,CAAC,cAAc,OAAO,UACvB,CAAC,CAAC,YAAY,OAAO,IACzB;EAEA,MAAM,aAAa,eACX,CAAC,CAAC,cAAc,OAAO,oBAAoB,CAAC,CAAC,YAAY,OAAO,QACxE;EAEA,MAAM,aAAa,eAAe,OAAO,SAAS,WAAW,MAAK;EAElE,MAAM,cAAc,eAAe,OAAO,SAAS,CAAC,WAAW,MAAK;EACpE,MAAM,UAAU,eAAe,CAAC,OAAO,SAAS,CAAC,WAAW,MAAK;EAEjE,MAAM,cAAc,eACZ,cAAc,OAAO,YAAY,YAAY,OAAO,SAC5D;;uBAGE,YA6DqB,MAAA,2BAAA,EAAA;IA5DnB,OAAM;IACL,UAAU,QAAA,WAAM;;IACN,OAAK,cAAY,CAAA,gBAAA,gBAAR,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA;2BAyDnB,CA/CE,QAAA,QAAA,WAAA,EADR,mBAgDM,OAhDN,YAgDM;KA7CJ,mBAQM,OARN,YAQM,CANJ,mBAEO,QAFP,YAEO,gBADF,YAAA,MAAW,EAAA,EAAA,EAGR,WAAA,SAAA,WAAA,EADR,YAEqB,4BAAA;;kBAAV,OAAA;0EAAM,QAAA;;KAMX,cAAA,OAAe,oBAAoB,WAAA,SAAc,YAAA,SAAA,WAAA,EAFzD,YAMoC,wBAL7B,cAAA,MAAc,iBAAgB,EAAA;MAElC,KAAG,kBAAoB,aAAA,MAAa;MACpC,SAAS,QAAA;MACT,aAAa,YAAA;MACb,SAAS,aAAA,MAAa;;;;;WAGZ,YAAA,OAAa,WAAW,YAAA,SAAA,WAAA,EADrC,YAOwB,6BAAA;MALrB,KAAG,WAAa,aAAA,MAAa;MAC7B,OAAO,YAAA,MAAY;MACnB,SAAS,QAAA;MACT,MAAM,YAAA,MAAY;MAClB,KAAK,aAAA,MAAa;MAClB,MAAM,YAAA;;;;;;;;KAKD,cAAA,OAAe,gBAAgB,OAAA,SAAU,QAAA,SAAA,WAAA,EAFjD,YAK+B,wBAJxB,cAAA,MAAc,aAAY,EAAA;MAE9B,KAAG,cAAgB,aAAA,MAAa;MAChC,SAAS,QAAA;MACT,aAAa,YAAA;gDAGH,OAAA,SAAU,QAAA,SAAO,CAAK,cAAA,OAAe,gBAAA,WAAA,EADlD,YAIkD,yBAAA;MAF/C,KAAG,OAAS,aAAA,MAAa;MACzB,SAAS,QAAA;MACT,UAAU,YAAA;;MAEY,OAAA,SAAM,CAAK,WAAA,SAAA,WAAA,EAApC,YAEmB,0BAAA,EAAA,KAAA,GAAA,EAAA;6BAAnB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFgD,iBAEhD,GAAA,CAAA,EAAA,CAAA;;;;;OAtDM,QAAA,QAAQ,aAAA,MAAa,UAAA;UAC1B;sBAI0C,CAH3C,YAG2C,8BAAA;KAFxC,UAAU,aAAA,MAAa;KACvB,MAAM,aAAA,MAAa;KACnB,MAAM,aAAA,MAAa,UAAU"}

package/dist/v2/blocks/response-block/components/ResponseBodyPreview.vue.d.ts

@@ -4,6 +4,8 @@ type __VLS_Props = {
     type: string;
     mode: MediaPreview;
     alpha?: boolean | undefined;
+    /** Decoded body; used when `mode` is `json` for pretty-printed preview (no JSON.parse round-trip). */
+    content?: unknown;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/v2/blocks/response-block/components/ResponseBodyPreview.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyPreview.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyPreview.vue"],"names":[],"mappings":"AA8EA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,gDAAgD,CAAA;AAIlF,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,YAAY,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC5B,CAAC;AA8IF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ResponseBodyPreview.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyPreview.vue"],"names":[],"mappings":"AAkGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,gDAAgD,CAAA;AAKlF,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,YAAY,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC3B,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAC;AAgLF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/response-block/components/ResponseBodyPreview.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import ResponseBodyPreview_vue_vue_type_script_setup_true_lang_default from "./ResponseBodyPreview.vue.script.js";
 /* empty css                                  */
 //#region src/v2/blocks/response-block/components/ResponseBodyPreview.vue
-var ResponseBodyPreview_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ResponseBodyPreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-154c2abf"]]);
+var ResponseBodyPreview_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ResponseBodyPreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-65a8f4ce"]]);
 //#endregion
 export { ResponseBodyPreview_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyPreview.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyPreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, watch } from 'vue'\n\nimport { type MediaPreview } from '@/v2/blocks/response-block/helpers/media-types'\n\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\n\nconst {\n  src,\n  type,\n  mode,\n  alpha = false,\n} = defineProps<{\n  src: string\n  type: string\n  mode: MediaPreview\n  alpha?: boolean | undefined\n}>()\n\nconst error = ref(false)\n\nwatch(\n  () => src,\n  () => (error.value = false),\n)\n</script>\n<template>\n  <div\n    v-if=\"!error && src\"\n    class=\"flex justify-center overflow-auto rounded-b\"\n    :class=\"{ 'bg-preview p-2': alpha }\">\n    <img\n      v-if=\"mode === 'image'\"\n      class=\"h-full max-w-full\"\n      :class=\"{ rounded: alpha }\"\n      :src=\"src\"\n      @error=\"error = true\" />\n    <video\n      v-else-if=\"mode === 'video'\"\n      autoplay\n      controls\n      width=\"100%\"\n      @error=\"error = true\">\n      <source\n        :src=\"src\"\n        :type=\"type\" />\n    </video>\n    <audio\n      v-else-if=\"mode === 'audio'\"\n      class=\"my-12\"\n      controls\n      @error=\"error = true\">\n      <source\n        :src=\"src\"\n        :type=\"type\" />\n    </audio>\n    <object\n      v-else\n      class=\"aspect-[4/3] w-full\"\n      :data=\"src\"\n      :type=\"type\"\n      @error=\"error = true\" />\n  </div>\n  <ResponseBodyInfo v-else>Preview unavailable</ResponseBodyInfo>\n</template>\n<style scoped>\n.light-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n.dark-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFF' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ResponseBodyPreview.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyPreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue'\n\nimport { type MediaPreview } from '@/v2/blocks/response-block/helpers/media-types'\n\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\nimport ResponseBodyRaw from './ResponseBodyRaw.vue'\n\nconst {\n  src,\n  type,\n  mode,\n  alpha = false,\n  content,\n} = defineProps<{\n  src: string\n  type: string\n  mode: MediaPreview\n  alpha?: boolean | undefined\n  /** Decoded body; used when `mode` is `json` for pretty-printed preview (no JSON.parse round-trip). */\n  content?: unknown\n}>()\n\nconst jsonPreviewContent = computed((): string => {\n  const value = content\n  if (typeof value === 'string') {\n    return value\n  }\n  if (value == null) {\n    return ''\n  }\n  return String(value)\n})\n\nconst error = ref(false)\n\nwatch(\n  () => src,\n  () => (error.value = false),\n)\n</script>\n<template>\n  <ResponseBodyRaw\n    v-if=\"mode === 'json'\"\n    :content=\"jsonPreviewContent\"\n    language=\"json\"\n    prettyPrintJson />\n  <div\n    v-else-if=\"!error && src\"\n    class=\"flex justify-center overflow-auto rounded-b\"\n    :class=\"{ 'bg-preview p-2': alpha }\">\n    <img\n      v-if=\"mode === 'image'\"\n      class=\"h-full max-w-full\"\n      :class=\"{ rounded: alpha }\"\n      :src=\"src\"\n      @error=\"error = true\" />\n    <video\n      v-else-if=\"mode === 'video'\"\n      autoplay\n      controls\n      width=\"100%\"\n      @error=\"error = true\">\n      <source\n        :src=\"src\"\n        :type=\"type\" />\n    </video>\n    <audio\n      v-else-if=\"mode === 'audio'\"\n      class=\"my-12\"\n      controls\n      @error=\"error = true\">\n      <source\n        :src=\"src\"\n        :type=\"type\" />\n    </audio>\n    <object\n      v-else\n      class=\"aspect-[4/3] w-full\"\n      :data=\"src\"\n      :type=\"type\"\n      @error=\"error = true\" />\n  </div>\n  <ResponseBodyInfo v-else>Preview unavailable</ResponseBodyInfo>\n</template>\n<style scoped>\n.light-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n.dark-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFF' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n</style>\n"],"mappings":""}

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

@@ -1,5 +1,6 @@
 import ResponseBodyInfo_default from "./ResponseBodyInfo.vue.js";
-import { createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, ref, watch, withCtx } from "vue";
+import ResponseBodyRaw_default from "./ResponseBodyRaw.vue.js";
+import { computed, createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, ref, watch, withCtx } from "vue";
 //#region src/v2/blocks/response-block/components/ResponseBodyPreview.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src"];
 var _hoisted_2 = ["src", "type"];
@@ -14,14 +15,26 @@ var ResponseBodyPreview_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		alpha: {
 			type: Boolean,
 			default: false
-		}
+		},
+		content: {}
 	},
 	setup(__props) {
+		const jsonPreviewContent = computed(() => {
+			const value = __props.content;
+			if (typeof value === "string") return value;
+			if (value == null) return "";
+			return String(value);
+		});
 		const error = ref(false);
 		watch(() => __props.src, () => error.value = false);
 		return (_ctx, _cache) => {
-			return !error.value && __props.src ? (openBlock(), createElementBlock("div", {
+			return __props.mode === "json" ? (openBlock(), createBlock(ResponseBodyRaw_default, {
 				key: 0,
+				content: jsonPreviewContent.value,
+				language: "json",
+				prettyPrintJson: ""
+			}, null, 8, ["content"])) : !error.value && __props.src ? (openBlock(), createElementBlock("div", {
+				key: 1,
 				class: normalizeClass(["flex justify-center overflow-auto rounded-b", { "bg-preview p-2": __props.alpha }])
 			}, [__props.mode === "image" ? (openBlock(), createElementBlock("img", {
 				key: 0,
@@ -51,7 +64,7 @@ var ResponseBodyPreview_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				data: __props.src,
 				type: __props.type,
 				onError: _cache[3] || (_cache[3] = ($event) => error.value = true)
-			}, null, 40, _hoisted_4))], 2)) : (openBlock(), createBlock(ResponseBodyInfo_default, { key: 1 }, {
+			}, null, 40, _hoisted_4))], 2)) : (openBlock(), createBlock(ResponseBodyInfo_default, { key: 2 }, {
 				default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("Preview unavailable", -1)])]),
 				_: 1
 			}));

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

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyPreview.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyPreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, watch } from 'vue'\n\nimport { type MediaPreview } from '@/v2/blocks/response-block/helpers/media-types'\n\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\n\nconst {\n  src,\n  type,\n  mode,\n  alpha = false,\n} = defineProps<{\n  src: string\n  type: string\n  mode: MediaPreview\n  alpha?: boolean | undefined\n}>()\n\nconst error = ref(false)\n\nwatch(\n  () => src,\n  () => (error.value = false),\n)\n</script>\n<template>\n  <div\n    v-if=\"!error && src\"\n    class=\"flex justify-center overflow-auto rounded-b\"\n    :class=\"{ 'bg-preview p-2': alpha }\">\n    <img\n      v-if=\"mode === 'image'\"\n      class=\"h-full max-w-full\"\n      :class=\"{ rounded: alpha }\"\n      :src=\"src\"\n      @error=\"error = true\" />\n    <video\n      v-else-if=\"mode === 'video'\"\n      autoplay\n      controls\n      width=\"100%\"\n      @error=\"error = true\">\n      <source\n        :src=\"src\"\n        :type=\"type\" />\n    </video>\n    <audio\n      v-else-if=\"mode === 'audio'\"\n      class=\"my-12\"\n      controls\n      @error=\"error = true\">\n      <source\n        :src=\"src\"\n        :type=\"type\" />\n    </audio>\n    <object\n      v-else\n      class=\"aspect-[4/3] w-full\"\n      :data=\"src\"\n      :type=\"type\"\n      @error=\"error = true\" />\n  </div>\n  <ResponseBodyInfo v-else>Preview unavailable</ResponseBodyInfo>\n</template>\n<style scoped>\n.light-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n.dark-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFF' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ,IAAI,MAAK;AAEvB,cACQ,QAAA,WACC,MAAM,QAAQ,MACvB;;WAIW,MAAA,SAAS,QAAA,OAAA,WAAA,EADlB,mBAmCM,OAAA;;IAjCJ,OAAK,eAAA,CAAC,+CAA6C,EAAA,kBACvB,QAAA,OAAK,CAAA,CAAA;OAEzB,QAAA,SAAI,WAAA,WAAA,EADZ,mBAK0B,OAAA;;IAHxB,OAAK,eAAA,CAAC,qBAAmB,EAAA,SACN,QAAA,OAAK,CAAA,CAAA;IACvB,KAAK,QAAA;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;+BAEF,QAAA,SAAI,WAAA,WAAA,EADjB,mBASQ,SAAA;;IAPN,UAAA;IACA,UAAA;IACA,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;OACb,mBAEiB,UAAA;IADd,KAAK,QAAA;IACL,MAAM,QAAA;oCAGE,QAAA,SAAI,WAAA,WAAA,EADjB,mBAQQ,SAAA;;IANN,OAAM;IACN,UAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;OACb,mBAEiB,UAAA;IADd,KAAK,QAAA;IACL,MAAM,QAAA;kDAEX,mBAK0B,UAAA;;IAHxB,OAAM;IACL,MAAM,QAAA;IACN,MAAM,QAAA;IACN,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;mDAEjB,YAA+D,0BAAA,EAAA,KAAA,GAAA,EAAA;2BAAnB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAnB,uBAAmB,GAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"ResponseBodyPreview.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyPreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue'\n\nimport { type MediaPreview } from '@/v2/blocks/response-block/helpers/media-types'\n\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\nimport ResponseBodyRaw from './ResponseBodyRaw.vue'\n\nconst {\n  src,\n  type,\n  mode,\n  alpha = false,\n  content,\n} = defineProps<{\n  src: string\n  type: string\n  mode: MediaPreview\n  alpha?: boolean | undefined\n  /** Decoded body; used when `mode` is `json` for pretty-printed preview (no JSON.parse round-trip). */\n  content?: unknown\n}>()\n\nconst jsonPreviewContent = computed((): string => {\n  const value = content\n  if (typeof value === 'string') {\n    return value\n  }\n  if (value == null) {\n    return ''\n  }\n  return String(value)\n})\n\nconst error = ref(false)\n\nwatch(\n  () => src,\n  () => (error.value = false),\n)\n</script>\n<template>\n  <ResponseBodyRaw\n    v-if=\"mode === 'json'\"\n    :content=\"jsonPreviewContent\"\n    language=\"json\"\n    prettyPrintJson />\n  <div\n    v-else-if=\"!error && src\"\n    class=\"flex justify-center overflow-auto rounded-b\"\n    :class=\"{ 'bg-preview p-2': alpha }\">\n    <img\n      v-if=\"mode === 'image'\"\n      class=\"h-full max-w-full\"\n      :class=\"{ rounded: alpha }\"\n      :src=\"src\"\n      @error=\"error = true\" />\n    <video\n      v-else-if=\"mode === 'video'\"\n      autoplay\n      controls\n      width=\"100%\"\n      @error=\"error = true\">\n      <source\n        :src=\"src\"\n        :type=\"type\" />\n    </video>\n    <audio\n      v-else-if=\"mode === 'audio'\"\n      class=\"my-12\"\n      controls\n      @error=\"error = true\">\n      <source\n        :src=\"src\"\n        :type=\"type\" />\n    </audio>\n    <object\n      v-else\n      class=\"aspect-[4/3] w-full\"\n      :data=\"src\"\n      :type=\"type\"\n      @error=\"error = true\" />\n  </div>\n  <ResponseBodyInfo v-else>Preview unavailable</ResponseBodyInfo>\n</template>\n<style scoped>\n.light-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n.dark-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFF' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,qBAAqB,eAAuB;GAChD,MAAM,QAAQ,QAAA;AACd,OAAI,OAAO,UAAU,SACnB,QAAO;AAET,OAAI,SAAS,KACX,QAAO;AAET,UAAO,OAAO,MAAK;IACpB;EAED,MAAM,QAAQ,IAAI,MAAK;AAEvB,cACQ,QAAA,WACC,MAAM,QAAQ,MACvB;;UAIU,QAAA,SAAI,UAAA,WAAA,EADZ,YAIoB,yBAAA;;IAFjB,SAAS,mBAAA;IACV,UAAS;IACT,iBAAA;gCAEY,MAAA,SAAS,QAAA,OAAA,WAAA,EADvB,mBAmCM,OAAA;;IAjCJ,OAAK,eAAA,CAAC,+CAA6C,EAAA,kBACvB,QAAA,OAAK,CAAA,CAAA;OAEzB,QAAA,SAAI,WAAA,WAAA,EADZ,mBAK0B,OAAA;;IAHxB,OAAK,eAAA,CAAC,qBAAmB,EAAA,SACN,QAAA,OAAK,CAAA,CAAA;IACvB,KAAK,QAAA;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;+BAEF,QAAA,SAAI,WAAA,WAAA,EADjB,mBASQ,SAAA;;IAPN,UAAA;IACA,UAAA;IACA,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;OACb,mBAEiB,UAAA;IADd,KAAK,QAAA;IACL,MAAM,QAAA;oCAGE,QAAA,SAAI,WAAA,WAAA,EADjB,mBAQQ,SAAA;;IANN,OAAM;IACN,UAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;OACb,mBAEiB,UAAA;IADd,KAAK,QAAA;IACL,MAAM,QAAA;kDAEX,mBAK0B,UAAA;;IAHxB,OAAM;IACL,MAAM,QAAA;IACN,MAAM,QAAA;IACN,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;mDAEjB,YAA+D,0BAAA,EAAA,KAAA,GAAA,EAAA;2BAAnB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAnB,uBAAmB,GAAA,CAAA,EAAA,CAAA"}

package/dist/v2/blocks/response-block/components/ResponseBodyRaw.vue.d.ts

@@ -1,7 +1,9 @@
 import { type CodeMirrorLanguage } from '@scalar/use-codemirror';
 type __VLS_Props = {
-    content: any;
+    content: unknown;
     language: CodeMirrorLanguage | undefined;
+    /** When true, JSON/JSONC strings are pretty-printed for the Preview tab (wire bytes stay unchanged in Raw). */
+    prettyPrintJson?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/v2/blocks/response-block/components/ResponseBodyRaw.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyRaw.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyRaw.vue"],"names":[],"mappings":"AAoEA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAG/E,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,GAAG,CAAA;IACZ,QAAQ,EAAE,kBAAkB,GAAG,SAAS,CAAA;CACzC,CAAC;AA8FF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ResponseBodyRaw.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyRaw.vue"],"names":[],"mappings":"AAqFA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAK/E,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACxC,+GAA+G;IAC/G,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAC;AA0GF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/response-block/components/ResponseBodyRaw.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import ResponseBodyRaw_vue_vue_type_script_setup_true_lang_default from "./ResponseBodyRaw.vue.script.js";
 /* empty css                              */
 //#region src/v2/blocks/response-block/components/ResponseBodyRaw.vue
-var ResponseBodyRaw_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ResponseBodyRaw_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-194605f9"]]);
+var ResponseBodyRaw_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ResponseBodyRaw_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-20050fd6"]]);
 //#endregion
 export { ResponseBodyRaw_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyRaw.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyRaw.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarCodeBlockCopy } from '@scalar/components'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { useCodeMirror, type CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport { ref, toRef, useId } from 'vue'\n\nconst props = defineProps<{\n  content: any\n  language: CodeMirrorLanguage | undefined\n}>()\n\nconst codeMirrorRef = ref<HTMLDivElement | null>(null)\n/** Base id for the code block */\nconst id = useId()\n\nconst { codeMirror } = useCodeMirror({\n  codeMirrorRef,\n  readOnly: true,\n  lineNumbers: true,\n  content: toRef(() => prettyPrintJson(props.content)),\n  language: toRef(() => props.language),\n  forceFoldGutter: true,\n})\n\n// Function to get current content\nconst getCurrentContent = () => {\n  return codeMirror.value?.state.doc.toString() || ''\n}\n</script>\n<template>\n  <div\n    class=\"scalar-code-block group/code-block body-raw relative grid min-h-0 overflow-hidden p-px outline-none has-focus-visible:outline\">\n    <div\n      class=\"body-raw-scroller custom-scroll relative pr-1\"\n      tabindex=\"0\">\n      <!-- CodeMirror container -->\n      <div ref=\"codeMirrorRef\" />\n    </div>\n    <!-- Copy button -->\n    <ScalarCodeBlockCopy\n      v-if=\"getCurrentContent()\"\n      class=\"absolute top-2 right-2\"\n      :content=\"getCurrentContent()\"\n      :aria-controls=\"id\" />\n  </div>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  background-color: transparent;\n  font-size: var(--scalar-small);\n  outline: none;\n}\n\n:deep(.cm-gutters) {\n  background-color: var(--scalar-background-1);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n}\n\n.body-raw :deep(.cm-scroller) {\n  overflow: auto;\n  min-width: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ResponseBodyRaw.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyRaw.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarCodeBlockCopy } from '@scalar/components'\nimport { useCodeMirror, type CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport { computed, ref, toRef, useId } from 'vue'\n\nimport { prettifyJsoncString } from '@/v2/blocks/response-block/helpers/prettify-jsonc-string'\n\nconst props = defineProps<{\n  content: unknown\n  language: CodeMirrorLanguage | undefined\n  /** When true, JSON/JSONC strings are pretty-printed for the Preview tab (wire bytes stay unchanged in Raw). */\n  prettyPrintJson?: boolean\n}>()\n\nconst codeMirrorRef = ref<HTMLDivElement | null>(null)\n/** Base id for the code block */\nconst id = useId()\n\nconst displayContent = computed((): string => {\n  const { content, language, prettyPrintJson = false } = props\n  if (typeof content !== 'string') {\n    if (content == null) {\n      return ''\n    }\n    return String(content)\n  }\n  if (prettyPrintJson && language === 'json') {\n    return prettifyJsoncString(content)\n  }\n  return content\n})\n\nconst { codeMirror } = useCodeMirror({\n  codeMirrorRef,\n  readOnly: true,\n  lineNumbers: true,\n  content: toRef(displayContent),\n  language: toRef(() => props.language),\n  forceFoldGutter: true,\n})\n\n// Function to get current content\nconst getCurrentContent = () => {\n  return codeMirror.value?.state.doc.toString() || ''\n}\n</script>\n<template>\n  <div\n    class=\"scalar-code-block group/code-block relative grid min-h-0 overflow-hidden p-px outline-none has-focus-visible:outline\"\n    data-testid=\"response-body-raw\">\n    <div\n      class=\"custom-scroll relative pr-1\"\n      tabindex=\"0\">\n      <!-- CodeMirror container -->\n      <div ref=\"codeMirrorRef\" />\n    </div>\n    <!-- Copy button -->\n    <ScalarCodeBlockCopy\n      v-if=\"getCurrentContent()\"\n      :aria-controls=\"id\"\n      class=\"absolute top-2 right-2\"\n      :content=\"getCurrentContent()\" />\n  </div>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  background-color: transparent;\n  font-size: var(--scalar-small);\n  outline: none;\n}\n\n:deep(.cm-gutters) {\n  background-color: var(--scalar-background-1);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n}\n\n:deep(.cm-scroller) {\n  overflow: auto;\n  min-width: 100%;\n}\n</style>\n"],"mappings":""}