@scalar/api-client 3.13.7 → 3.14.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @scalar/api-client
 
+## 3.14.0
+
+### Minor Changes
+
+- [#9709](https://github.com/scalar/scalar/pull/9709): Add an OAuth2 token-acquisition shortcut to HTTP bearer schemes, so a bearer
+  token can be obtained through an OAuth2 flow without switching auth methods.
+  - The bearer scheme's form gains an inline **Authorize via OAuth2** shortcut
+    (and, for authorization-code, **Refresh**) that runs the flow and writes the
+    resulting access token onto the bearer scheme — so the panel never switches
+    to oauth2 and the request sends `Authorization: Bearer`. A gear opens the
+    oauth2 configuration in a modal (`OAuth2.hideActions`).
+  - A new `getOauth2AcquisitionTarget` helper finds the oauth2 flow the shortcut
+    uses, preferring the authorization-code grant (which can refresh) over
+    implicit. Every defined security scheme, oauth2 included, stays selectable in
+    the auth dropdown — the shortcut is purely additive.
+  - `runOAuth2Authorize` + `storeOAuth2Tokens` route the access token to the
+    bearer scheme and the refresh token to the oauth2 scheme.
+
+- [#9726](https://github.com/scalar/scalar/pull/9726): feat: add a switchable form view for JSON and YAML request bodies
+
+  When a request body's content type is JSON or YAML and its schema (or the current example) describes an object, a "Form / Raw" toggle now appears next to the content type selector. The form view renders one row per schema property — with enum dropdowns, required badges, defaults, and per-field validation, matching the existing `multipart/form-data` editor — and folds edits back into a nested object using the schema's declared types (numbers, booleans, arrays, and nested objects survive the round-trip instead of becoming strings). The raw code editor remains the default and is unaffected for non-object bodies or unparseable text.
+
+  `@scalar/workspace-store` gains reusable exports for this: `buildDottedNestedRowPredicate`, `coerceLeafValueToSchemaType`, `coerceUntypedValue`, and `resolveLeafSchema` from `@scalar/workspace-store/request-example`, factored out of the existing multipart request-body builder.
+
+### Patch Changes
+
+- [#9697](https://github.com/scalar/scalar/pull/9697): Add credential input UIs for the AsyncAPI broker-specific security scheme types, which previously showed a "not supported yet" message in the Authentication selector. The SASL-style schemes (`userPassword`, `plain`, `scramSha256`, `scramSha512`) get a username + password form like HTTP basic, `X509` gets client certificate + private key (PEM) inputs, `symmetricEncryption`/`asymmetricEncryption` get a single key input, and `gssapi` gets a service name input. The entered credentials are persisted in the auth store with new type-specific secret shapes (`x-scalar-secret-client-certificate`, `x-scalar-secret-private-key`, `x-scalar-secret-service-name`, plus the existing username/password/token extensions) and round-trip through the merged scheme objects the same way as the OpenAPI types. The Galaxy AsyncAPI sample document now defines one scheme of each broker group so the inputs can be exercised.
+- [#9723](https://github.com/scalar/scalar/pull/9723): Fix missing accessible names on request/scopes table checkboxes and their row delete buttons. `DataTableCheckbox` now accepts an `ariaLabel` prop, and `RequestTableRow`/`OAuthScopesInput` pass row-specific labels (e.g. "Include x-api-key in request", "Select read:users scope") so screen reader users can tell which row a control acts on.
+- [#9595](https://github.com/scalar/scalar/pull/9595): Clicking an OAuth2 scope checkbox no longer toggles the scope twice. The click no longer bubbles to the surrounding row, which had its own toggle handler.
+- [#9594](https://github.com/scalar/scalar/pull/9594): Fix OAuth2 scope checkboxes losing selections on quick clicks. Each scope is now toggled against the stored selection instead of a list computed in the component, so the "Scopes Selected" counter and the scopes sent to the token endpoint stay in sync with the checkboxes.
+- [#9773](https://github.com/scalar/scalar/pull/9773): Allow using a client secret together with PKCE in the OAuth authorization code flow, so confidential clients can use both (as recommended by RFC 9700).
+
 ## 3.13.7
 
 ### Patch Changes

package/README.md

@@ -17,7 +17,7 @@ Scalar is an open-source API platform for teams who want beautiful developer int
 
 - **[API References](https://scalar.com/products/api-references/getting-started)** — Interactive API documentation from OpenAPI and AsyncAPI specs.
 - **[Developer Docs](https://scalar.com/products/docs/getting-started)** — Write in Markdown/MDX, generate API references, sync with two-way Git.
-- **[SDK Generator](https://scalar.com/products/sdks/getting-started)** — Type-safe SDKs and CLIs in TypeScript, Python, Go, PHP, Java, and Ruby.
+- **[SDK Generator](https://scalar.com/products/sdk-generator/getting-started)** — Type-safe SDKs and CLIs in TypeScript, Python, Go, PHP, Java, and Ruby.
 - **[API Client](https://scalar.com/products/api-client/getting-started)** — Open-source, offline-first Postman alternative built on OpenAPI.
 
 20M+ monthly npm installs · 15,500+ GitHub stars · MIT licensed · [scalar.com](https://scalar.com)
@@ -35,6 +35,7 @@ We have removed the old version of the clients so you must update your imports a
 - Real-time request/response logging
 - Customizable request headers and parameters
 - Response visualization and formatting options
+- Switchable form/raw editor for JSON and YAML request bodies, driven by the OpenAPI schema (enum dropdowns, required fields, validation)
 
 ## Installation
 

package/dist/style.css

@@ -3,15 +3,7 @@
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-font-weight: initial;
-      --tw-backdrop-blur: initial;
-      --tw-backdrop-brightness: initial;
-      --tw-backdrop-contrast: initial;
-      --tw-backdrop-grayscale: initial;
-      --tw-backdrop-hue-rotate: initial;
-      --tw-backdrop-invert: initial;
-      --tw-backdrop-opacity: initial;
-      --tw-backdrop-saturate: initial;
-      --tw-backdrop-sepia: initial;
+      --tw-border-style: solid;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -26,6 +18,15 @@
       --tw-ring-offset-width: 0;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -39,7 +40,6 @@
       --tw-skew-y: initial;
       --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;
-      --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;
       --tw-gradient-via: #0000;
@@ -195,6 +195,14 @@
     }
   }
 
+  @media (max-resolution: 1.5x) {
+    @supports ((-moz-appearance: none)) {
+      :root {
+        --scalar-border-width: 1px;
+      }
+    }
+  }
+
   :root {
     --scalar-text-decoration: underline;
     --scalar-text-decoration-hover: underline;
@@ -262,8 +270,17 @@
     --scalar-button-1: #000;
     --scalar-button-1-hover: #000c;
     --scalar-button-1-color: #fff;
-    --scalar-tooltip-background: #1a1a1ae6;
-    --scalar-tooltip-color: #ffffffd9;
+    --scalar-tooltip-background: var(--scalar-background-1);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .light-mode {
+      --scalar-tooltip-background: color-mix(in srgb, var(--scalar-background-1), transparent 10%);
+    }
+  }
+
+  .light-mode {
+    --scalar-tooltip-color: var(--scalar-color-1);
     --scalar-color-alert: var(--scalar-color-orange);
   }
 
@@ -1662,39 +1679,44 @@
 }
 
 :where(body) > .scalar-tooltip {
-  --scalar-tooltip-padding: 8px;
-  padding: var(--scalar-tooltip-padding);
+  --scalar-tooltip-padding-x: 8px;
+  --scalar-tooltip-padding-y: 6px;
+  padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);
   z-index: 99999;
   max-width: 320px;
   font-size: var(--scalar-font-size-5);
-  --tw-font-weight: var(--scalar-semibold);
+  --tw-font-weight: var(--scalar-regular);
   line-height: 16px;
-  font-weight: var(--scalar-semibold);
+  font-weight: var(--scalar-regular);
   overflow-wrap: break-word;
   color: var(--scalar-tooltip-color);
 }
 
 :where(body) > .scalar-tooltip[data-side="top"] {
-  padding-bottom: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding-bottom: calc(var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset));
 }
 
 :where(body) > .scalar-tooltip[data-side="bottom"] {
-  padding-top: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding-top: calc(var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset));
 }
 
 :where(body) > .scalar-tooltip[data-side="left"] {
-  padding-right: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding-right: calc(var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset));
 }
 
 :where(body) > .scalar-tooltip[data-side="right"] {
-  padding-left: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding-left: calc(var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset));
 }
 
 :where(body) > .scalar-tooltip:before {
   content: "";
   z-index: calc(1 * -1);
-  border-radius: var(--scalar-radius-md);
+  border-radius: var(--scalar-radius-lg);
+  border-style: var(--tw-border-style);
+  border-width: var(--scalar-border-width);
   background-color: var(--scalar-tooltip-background);
+  --tw-shadow: var(--scalar-shadow-1);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   --tw-backdrop-blur: blur(8px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -1718,59 +1740,15 @@
   left: var(--scalar-tooltip-offset);
 }
 
-:where(body.dark-mode) > .scalar-tooltip:before {
-  --tw-shadow: inset 0 0 0 var(--tw-shadow-color, var(--scalar-border-width)) var(--scalar-border-color);
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-}
-
 @property --tw-font-weight {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-backdrop-sepia {
+@property --tw-border-style {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: solid;
 }
 
 @property --tw-shadow {
@@ -1852,6 +1830,51 @@
   initial-value: 0 0 #0000;
 }
 
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false
+}
+
 .scalar-virtual-text-search-input[data-v-95edadbb]::-webkit-search-cancel-button {
   display: none;
 }
@@ -2439,6 +2462,10 @@
   margin-right: calc(20px - var(--scalar-sidebar-indent));
 }
 
+.scalar-app .mr-auto {
+  margin-right: auto;
+}
+
 .scalar-app .-mb-1 {
   margin-bottom: -4px;
 }
@@ -4721,14 +4748,8 @@
   border-top-width: var(--scalar-border-width);
 }
 
-:is(.scalar-app .\*\:border-border-tooltip > *) {
-  border-color: var(--scalar-tooltip-color);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  :is(.scalar-app .\*\:border-border-tooltip > *) {
-    border-color: color-mix(in srgb, var(--scalar-tooltip-color), var(--scalar-tooltip-background));
-  }
+:is(.scalar-app .\*\:border-border > *) {
+  border-color: var(--scalar-border-color);
 }
 
 :is(.scalar-app .\*\:px-1 > *) {
@@ -5683,12 +5704,6 @@
   initial-value: 0;
 }
 
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-
 @property --tw-gradient-position {
   syntax: "*";
   inherits: false
@@ -6488,7 +6503,7 @@ to {
   );
 }
 
-[data-v-aff33ea6] .cm-content {
+[data-v-dcc3af8c] .cm-content {
   font-size: var(--scalar-small);
 }
 

package/dist/v2/blocks/request-block/RequestBlock.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"RequestBlock.vue.script.js","names":[],"sources":["../../../../src/v2/blocks/request-block/RequestBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ClientOptionGroup } from '@scalar/blocks/code-example'\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { canMethodHaveBody } from '@scalar/helpers/http/can-method-have-body'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { REGEX } from '@scalar/helpers/regex/regex-helpers'\nimport { replaceEnvVariables } from '@scalar/helpers/regex/replace-variables'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { SelectedSecurity } from '@scalar/workspace-store/entities/auth'\nimport type {\n  ApiReferenceEvents,\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport {\n  filterGlobalCookie,\n  getEnvironmentVariables,\n  getResolvedUrl,\n  type MergedSecuritySchemes,\n  type SecuritySchemeObjectSecret,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n  OpenApiDocument,\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, useId, watch } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport RequestBody from '@/v2/blocks/request-block/components/RequestBody.vue'\nimport RequestCodeSnippet from '@/v2/blocks/request-block/components/RequestCodeSnippet.vue'\nimport RequestParams from '@/v2/blocks/request-block/components/RequestParams.vue'\nimport type { TableRow } from '@/v2/blocks/request-block/components/RequestTableRow.vue'\nimport { createParameterHandlers } from '@/v2/blocks/request-block/helpers/create-parameter-handlers'\nimport { createParameterRows } from '@/v2/blocks/request-block/helpers/create-parameter-rows'\nimport { groupBy } from '@/v2/blocks/request-block/helpers/group-by'\nimport { AuthSelector } from '@/v2/blocks/scalar-auth-selector-block'\nimport type { OAuth2Options } from '@/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\ntype Filter =\n  | 'All'\n  | 'Auth'\n  | 'Variables'\n  | 'Cookies'\n  | 'Headers'\n  | 'Query'\n  | 'Body'\n\nexport type RequestBlockProps = {\n  authMeta: AuthMeta\n  clientOptions: ClientOptionGroup[]\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n  exampleKey: string\n  workspaceCookies: XScalarCookie[]\n  documentCookies: XScalarCookie[]\n  layout: ClientLayout\n  method: HttpMethod\n  operation: OperationObject\n  path: string\n  plugins: ClientPlugin[]\n  proxyUrl: string\n  securityRequirements: OpenApiDocument['security']\n  securitySchemes: MergedSecuritySchemes\n  requestBodyCompositionSelection?: Record<string, number>\n  selectedClient: WorkspaceStore['workspace']['x-scalar-default-client']\n  selectedSecurity: SelectedSecurity\n  selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n  server: ServerObject | null\n  defaultHeaders: Record<string, string>\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n}\n\nconst {\n  authMeta = { type: 'document' },\n  clientOptions,\n  environment,\n  eventBus,\n  exampleKey,\n  workspaceCookies,\n  documentCookies,\n  layout,\n  method,\n  operation,\n  path,\n  plugins,\n  proxyUrl,\n  requestBodyCompositionSelection,\n  securityRequirements,\n  securitySchemes,\n  selectedClient,\n  selectedSecurity,\n  selectedSecuritySchemes,\n  server,\n  defaultHeaders: autoGeneratedHeaders,\n} = defineProps<RequestBlockProps>()\n\n/** Operation metadata used across event emissions */\nconst meta = computed(() => ({\n  method,\n  path,\n  exampleKey,\n}))\n\nconst deletedExpandedParameterPaths = ref<Record<string, string[][]>>({})\n\n/** Renamed expanded rows, tracked as old-schema-path -> typed-value-path per parameter. */\nconst renamedExpandedParameterPaths = ref<\n  Record<string, { from: string[]; to: string[] }[]>\n>({})\n\nconst getExpandedParameterKey = (parameter: {\n  in: string\n  name: string\n}): string => `${parameter.in}:${parameter.name}`\n\nconst getHiddenValuePaths = (parameter: {\n  in: string\n  name: string\n}): string[][] =>\n  deletedExpandedParameterPaths.value[getExpandedParameterKey(parameter)] ?? []\n\nconst getRenamedValuePaths = (parameter: {\n  in: string\n  name: string\n}): { from: string[]; to: string[] }[] =>\n  renamedExpandedParameterPaths.value[getExpandedParameterKey(parameter)] ?? []\n\nconst pathsEqual = (a: string[], b: string[]): boolean =>\n  a.length === b.length && a.every((segment, index) => segment === b[index])\n\n/**\n * Hides the schema path of an expanded row so it does not reappear as an empty suggestion. Used\n * both when a row is deleted and when its key is renamed (the old key should not pop back up).\n */\nconst hideExpandedRowPath = (row: TableRow): void => {\n  if (!row.originalParameter || !row.sourceParameterValuePath) {\n    return\n  }\n\n  const key = getExpandedParameterKey(row.originalParameter)\n  deletedExpandedParameterPaths.value = {\n    ...deletedExpandedParameterPaths.value,\n    [key]: [\n      ...(deletedExpandedParameterPaths.value[key] ?? []),\n      row.sourceParameterValuePath,\n    ],\n  }\n}\n\n/**\n * Records that an expanded row was renamed from its current value path to the typed one, so the\n * read side can render the renamed key in the original property's slot instead of appending it to\n * the end of the table. Repeated renames of the same row stay anchored to the original schema path.\n */\nconst recordExpandedRowRename = (\n  row: TableRow,\n  newValuePath: string[],\n): void => {\n  if (!row.originalParameter || !row.sourceParameterValuePath) {\n    return\n  }\n\n  const from = row.sourceParameterValuePath\n  const key = getExpandedParameterKey(row.originalParameter)\n  const existing = renamedExpandedParameterPaths.value[key] ?? []\n\n  // If this row was already renamed, the row's current path is the previous target. Re-anchor that\n  // entry to the new target so a second rename does not create an orphaned mapping.\n  const chained = existing.find((entry) => pathsEqual(entry.to, from))\n  const next = chained\n    ? existing.map((entry) =>\n        entry === chained ? { from: entry.from, to: newValuePath } : entry,\n      )\n    : [...existing, { from, to: newValuePath }]\n\n  renamedExpandedParameterPaths.value = {\n    ...renamedExpandedParameterPaths.value,\n    [key]: next,\n  }\n}\n\n/** Parameters grouped by type (path, query, header, cookie) */\nconst sections = computed(() =>\n  groupBy(\n    operation.parameters\n      ?.map((param) => getResolvedRef(param))\n      .flatMap((param) =>\n        createParameterRows(param, exampleKey, {\n          hiddenValuePaths:\n            param.in === 'query' ? getHiddenValuePaths(param) : [],\n          renamedValuePaths:\n            param.in === 'query' ? getRenamedValuePaths(param) : [],\n        }).map((row) => ({\n          ...row,\n          in: param.in,\n        })),\n      ) ?? [],\n    'in',\n    ({ in: _in, ...row }) => {\n      return row as TableRow\n    },\n  ),\n)\n\n// Generate a reverse map for fast lookup of headers by the name\nconst headersMap = computed(() =>\n  groupBy(\n    sections.value.header?.map((it) => ({\n      ...it,\n      name: it.name.toLowerCase(),\n    })) ?? [],\n    'name',\n  ),\n)\n\nconst defaultHeaders = computed(() => {\n  const disableParameters =\n    operation['x-scalar-disable-parameters']?.['default-headers']?.[\n      exampleKey\n    ] ?? {}\n\n  const isOverridden = (name: string) => {\n    const header = headersMap.value[name.toLowerCase()]?.[0]\n\n    if (!header) {\n      return false\n    }\n\n    return !header.isDisabled\n  }\n\n  return Object.entries(autoGeneratedHeaders).map(([name, value]) => {\n    return {\n      name,\n      value,\n      schema: undefined,\n      isOverridden: isOverridden(name),\n      isReadonly: true,\n      isDisabled: disableParameters[name.toLowerCase()] ?? false,\n    } satisfies TableRow\n  })\n})\n\nconst headers = computed(() => [\n  ...defaultHeaders.value,\n  ...(sections.value.header ?? []),\n])\n\nconst defaultCookies = computed(() => {\n  const environmentVariables = getEnvironmentVariables(environment)\n  const resolvedUrl = getResolvedUrl({\n    server,\n    path,\n  })\n  const url = replaceEnvVariables(resolvedUrl, environmentVariables)\n\n  const disabledGlobalCookies =\n    operation['x-scalar-disable-parameters']?.['global-cookies']?.[\n      exampleKey\n    ] ?? {}\n\n  const transform = (\n    cookie: XScalarCookie,\n    location: 'document' | 'workspace',\n  ) => {\n    return {\n      name: cookie.name,\n      value: cookie.value,\n      globalRoute: { page: location, path: 'cookies' } as const,\n      isReadonly: true,\n      isDisabled: disabledGlobalCookies[cookie.name.toLowerCase()] ?? false,\n    } satisfies TableRow\n  }\n\n  const globalCookies = [\n    {\n      location: 'workspace',\n      cookies: workspaceCookies,\n    },\n    {\n      location: 'document',\n      cookies: documentCookies,\n    },\n  ] as const\n\n  return globalCookies.flatMap(({ location, cookies }) => {\n    return cookies\n      .filter((cookie) =>\n        filterGlobalCookie({\n          cookie,\n          url,\n          disabledGlobalCookies: {},\n        }),\n      )\n      .map((cookie) => transform(cookie, location))\n  })\n})\n\nconst cookies = computed(() => [\n  ...(defaultCookies.value ?? []),\n  ...(sections.value.cookie ?? []),\n])\n\n/** Currently selected filter for the request sections */\nconst selectedFilter = ref<Filter>('All')\n\n/** Available operation sections */\nconst OPERATION_SECTIONS: readonly Filter[] = [\n  'Auth',\n  'Variables',\n  'Cookies',\n  'Headers',\n  'Query',\n  'Body',\n] as const\n\n/**\n * Pre-generated stable IDs for all possible filter sections.\n * These are created once at setup time to avoid regenerating IDs on re-render.\n */\nconst sectionIds: Record<Filter, string> = {\n  All: useId(),\n  Auth: useId(),\n  Variables: useId(),\n  Cookies: useId(),\n  Headers: useId(),\n  Query: useId(),\n  Body: useId(),\n}\n\n/** Filters available based on operation state */\nconst filters = computed<Filter[]>(() => {\n  const availableFilters = new Set<Filter>(['All', ...OPERATION_SECTIONS])\n\n  if (!sections.value.path?.length) {\n    availableFilters.delete('Variables')\n  }\n  if (!canMethodHaveBody(method)) {\n    availableFilters.delete('Body')\n  }\n  if (isAuthHidden.value) {\n    availableFilters.delete('Auth')\n  }\n\n  return [...availableFilters]\n})\n\n/**\n * Map available filters to their pre-generated stable IDs.\n * Only includes IDs for filters that are currently available.\n */\nconst filterIds = computed(\n  () =>\n    Object.fromEntries(\n      filters.value.map((section) => [section, sectionIds[section]]),\n    ) as Record<Filter, string>,\n)\n\n/**\n * Hide auth selector in readonly mode when no security schemes are defined.\n * This keeps the UI clean when there are no authentication options available.\n */\nconst isAuthHidden = computed(\n  () => layout === 'modal' && !Object.keys(securitySchemes ?? {}).length,\n)\n\n/**\n * Keep auth available for unauthenticated operations, but collapse it by default\n * in readonly modal layouts unless a requirement or manual selection exists.\n */\nconst isAuthDefaultOpen = computed(\n  () =>\n    layout !== 'modal' ||\n    Boolean(\n      securityRequirements?.length || selectedSecurity.selectedSchemes.length,\n    ),\n)\n\n/** Get a sensible placeholder for the request name input */\nconst requestNamePlaceholder = computed(() => {\n  if (operation.summary) {\n    return operation.summary\n  }\n  const cleanPath = path.replace(REGEX.PROTOCOL, '')\n  return cleanPath || 'Request Name'\n})\n\n/** Check if the section should be shown based on the selected filter */\nconst isSectionVisible = (section: Filter): boolean => {\n  return selectedFilter.value === 'All' || selectedFilter.value === section\n}\n\n/**\n * Reset filter to 'All' if Body filter is selected but method changes to one that cannot have a body.\n * This prevents showing an empty Body section when switching methods.\n */\nwatch(\n  () => method,\n  (newMethod) => {\n    if (selectedFilter.value === 'Body' && !canMethodHaveBody(newMethod)) {\n      selectedFilter.value = 'All'\n    }\n  },\n)\n\n// Expanded-row bookkeeping is keyed by `in:name`, which is not unique across operations or\n// examples. Reset both maps when the operation or example changes so stale delete/rename mappings\n// do not leak onto another request that happens to share a query parameter name.\nwatch(\n  () => [method, path, exampleKey],\n  () => {\n    deletedExpandedParameterPaths.value = {}\n    renamedExpandedParameterPaths.value = {}\n  },\n)\n\n/** Handle operation summary updates */\nconst handleSummaryUpdate = (event: Event): void => {\n  const summary = (event.target as HTMLInputElement).value\n  eventBus.emit('operation:update:meta', {\n    meta: meta.value,\n    payload: { summary: summary.trim() },\n  })\n}\n\n/** Parameter handlers */\nconst parameterHandlers = computed(() => ({\n  path: createParameterHandlers('path', eventBus, meta.value, {\n    context: sections.value.path ?? [],\n  }),\n  cookie: createParameterHandlers('cookie', eventBus, meta.value, {\n    context: cookies.value ?? [],\n    globalParameters: defaultCookies.value.length,\n  }),\n  header: createParameterHandlers('header', eventBus, meta.value, {\n    context: headers.value,\n    defaultParameters: defaultHeaders.value.length,\n  }),\n  query: createParameterHandlers('query', eventBus, meta.value, {\n    context: sections.value.query ?? [],\n    onDeleteExpandedRow: hideExpandedRowPath,\n    onRenameExpandedRow: recordExpandedRowRename,\n  }),\n}))\n\n/** Handle request body content type update */\nconst handleUpdateContentType = (payload: { value: string }): void =>\n  eventBus.emit('operation:update:requestBody:contentType', {\n    payload: { contentType: payload.value },\n    meta: meta.value,\n  })\n\n/** Handle request body value update */\nconst handleUpdateBodyValue = ({\n  payload,\n  contentType,\n}: Pick<\n  ApiReferenceEvents['operation:update:requestBody:value'],\n  'payload' | 'contentType'\n>): void => {\n  const debounceKey =\n    typeof payload === 'string'\n      ? `update:requestBody:value-${contentType}`\n      : undefined\n\n  eventBus.emit(\n    'operation:update:requestBody:value',\n    {\n      payload,\n      contentType,\n      meta: meta.value,\n    },\n    {\n      debounceKey,\n    },\n  )\n}\n\n/** Handle request body value update */\nconst handleUpdateBodyFormValue = ({\n  payload,\n  contentType,\n}: Pick<\n  ApiReferenceEvents['operation:update:requestBody:formValue'],\n  'payload' | 'contentType'\n>): void => {\n  const debounceKey = `update:requestBody:${contentType}-form-value`\n\n  eventBus.emit(\n    'operation:update:requestBody:formValue',\n    {\n      payload: payload.map((row) => unpackProxyObject(row, { depth: 1 })),\n      contentType,\n      meta: meta.value,\n    },\n    {\n      debounceKey,\n    },\n  )\n}\n\nconst labelRequestNameId = useId()\n\nconst globalCookies = computed(() => [...workspaceCookies, ...documentCookies])\n\n/** Allow updating the operation extensions for the plugins */\nconst updateOperationExtension = (\n  payload: ApiReferenceEvents['operation:update:extension']['payload'],\n): void =>\n  eventBus.emit('operation:update:extension', { payload, meta: meta.value })\n</script>\n<template>\n  <ViewLayoutSection :aria-label=\"`Request: ${operation.summary}`\">\n    <template #title>\n      <div\n        class=\"group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24\">\n        <label\n          v-if=\"layout !== 'modal'\"\n          class=\"pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0\"\n          :for=\"labelRequestNameId\" />\n        <input\n          v-if=\"layout !== 'modal'\"\n          :id=\"labelRequestNameId\"\n          class=\"text-c-1 group-hover-input pointer-events-auto relative z-10 -ml-0.5 h-8 w-full rounded pl-1.25 has-[:focus-visible]:outline md:-ml-1.25\"\n          :placeholder=\"requestNamePlaceholder\"\n          :value=\"operation.summary\"\n          @blur=\"handleSummaryUpdate\" />\n        <span\n          v-else\n          class=\"text-c-1 flex h-8 items-center\">\n          {{ operation.summary }}\n        </span>\n      </div>\n      <SectionFilter\n        v-model=\"selectedFilter\"\n        :filterIds=\"filterIds\"\n        :filters=\"filters\" />\n    </template>\n\n    <div\n      :id=\"filterIds.All\"\n      class=\"request-section-content custom-scroll relative flex flex-1 flex-col\"\n      :role=\"selectedFilter === 'All' ? 'tabpanel' : 'none'\">\n      <!-- Auth Selector -->\n      <AuthSelector\n        v-show=\"isSectionVisible('Auth') && !isAuthHidden\"\n        :id=\"filterIds.Auth\"\n        :createAnySecurityScheme=\"layout !== 'modal'\"\n        :defaultOpen=\"isAuthDefaultOpen\"\n        :environment\n        :eventBus\n        :meta=\"authMeta\"\n        :options\n        :proxyUrl\n        :securityRequirements\n        :securitySchemes\n        :selectedSecurity\n        :selectedSecuritySchemes\n        :server\n        title=\"Authentication\" />\n\n      <!-- Variables (Path Parameters) -->\n      <RequestParams\n        v-show=\"isSectionVisible('Variables') && sections.path?.length\"\n        :id=\"filterIds.Variables\"\n        :environment\n        :eventBus\n        :exampleKey\n        :rows=\"sections.path ?? []\"\n        :showAddRowPlaceholder=\"false\"\n        title=\"Variables\"\n        v-on=\"parameterHandlers.path\" />\n\n      <!-- Cookies -->\n      <RequestParams\n        v-show=\"isSectionVisible('Cookies')\"\n        :id=\"filterIds.Cookies\"\n        :environment\n        :eventBus\n        :exampleKey\n        :rows=\"cookies ?? []\"\n        :showAddRowPlaceholder=\"true\"\n        title=\"Cookies\"\n        v-on=\"parameterHandlers.cookie\" />\n\n      <!-- Headers -->\n      <RequestParams\n        v-show=\"isSectionVisible('Headers')\"\n        :id=\"filterIds.Headers\"\n        :environment\n        :eventBus\n        :exampleKey\n        :rows=\"headers ?? []\"\n        title=\"Headers\"\n        v-on=\"parameterHandlers.header\" />\n\n      <!-- Query Parameters -->\n      <RequestParams\n        v-show=\"isSectionVisible('Query')\"\n        :id=\"filterIds.Query\"\n        :environment\n        :eventBus\n        :exampleKey\n        :rows=\"sections.query ?? []\"\n        title=\"Query Parameters\"\n        v-on=\"parameterHandlers.query\" />\n\n      <!-- Request Body -->\n      <RequestBody\n        v-show=\"isSectionVisible('Body') && canMethodHaveBody(method)\"\n        :id=\"filterIds.Body\"\n        :environment\n        :exampleKey\n        :requestBody=\"getResolvedRef(operation.requestBody)\"\n        :requestBodyCompositionSelection\n        title=\"Request Body\"\n        @update:contentType=\"handleUpdateContentType\"\n        @update:formValue=\"handleUpdateBodyFormValue\"\n        @update:value=\"handleUpdateBodyValue\" />\n\n      <!-- Inject request section plugin components -->\n      <ScalarErrorBoundary\n        v-for=\"(plugin, index) in plugins\"\n        :key=\"index\">\n        <component\n          :is=\"plugin.components.request.component\"\n          v-if=\"plugin?.components?.request\"\n          v-show=\"selectedFilter === 'All'\"\n          :operation\n          v-bind=\"plugin.components.request.additionalProps\"\n          @operation:update:extension=\"updateOperationExtension\" />\n      </ScalarErrorBoundary>\n\n      <!-- Spacer -->\n      <div class=\"flex grow\" />\n      <!-- Code Snippet -->\n      <RequestCodeSnippet\n        v-show=\"selectedFilter === 'All'\"\n        :clientOptions\n        :eventBus\n        :globalCookies\n        integration=\"client\"\n        :method\n        :operation\n        :path\n        :securitySchemes=\"selectedSecuritySchemes\"\n        :selectedClient\n        :selectedContentType=\"\n          getResolvedRef(operation.requestBody)?.[\n            'x-scalar-selected-content-type'\n          ]?.[exampleKey]\n        \"\n        :selectedServer=\"server ?? undefined\" />\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.request-section-content {\n  --scalar-border-width: 0.5px;\n}\n.request-section-content-filter {\n  box-shadow: 0 -10px 0 10px var(--scalar-background-1);\n}\n.request-item:focus-within .request-meta-buttons {\n  opacity: 1;\n}\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"RequestBlock.vue.script.js","names":[],"sources":["../../../../src/v2/blocks/request-block/RequestBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ClientOptionGroup } from '@scalar/blocks/code-example'\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { canMethodHaveBody } from '@scalar/helpers/http/can-method-have-body'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { REGEX } from '@scalar/helpers/regex/regex-helpers'\nimport { replaceEnvVariables } from '@scalar/helpers/regex/replace-variables'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { SelectedSecurity } from '@scalar/workspace-store/entities/auth'\nimport type {\n  ApiReferenceEvents,\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport {\n  filterGlobalCookie,\n  getEnvironmentVariables,\n  getResolvedUrl,\n  type MergedSecuritySchemes,\n  type SecuritySchemeObjectSecret,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type {\n  OpenApiDocument,\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, useId, watch } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport RequestBody from '@/v2/blocks/request-block/components/RequestBody.vue'\nimport RequestCodeSnippet from '@/v2/blocks/request-block/components/RequestCodeSnippet.vue'\nimport RequestParams from '@/v2/blocks/request-block/components/RequestParams.vue'\nimport type { TableRow } from '@/v2/blocks/request-block/components/RequestTableRow.vue'\nimport { createParameterHandlers } from '@/v2/blocks/request-block/helpers/create-parameter-handlers'\nimport { createParameterRows } from '@/v2/blocks/request-block/helpers/create-parameter-rows'\nimport { groupBy } from '@/v2/blocks/request-block/helpers/group-by'\nimport { AuthSelector } from '@/v2/blocks/scalar-auth-selector-block'\nimport type { OAuth2Options } from '@/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\ntype Filter =\n  | 'All'\n  | 'Auth'\n  | 'Variables'\n  | 'Cookies'\n  | 'Headers'\n  | 'Query'\n  | 'Body'\n\nexport type RequestBlockProps = {\n  authMeta: AuthMeta\n  clientOptions: ClientOptionGroup[]\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n  exampleKey: string\n  workspaceCookies: XScalarCookie[]\n  documentCookies: XScalarCookie[]\n  layout: ClientLayout\n  method: HttpMethod\n  operation: OperationObject\n  path: string\n  plugins: ClientPlugin[]\n  proxyUrl: string\n  securityRequirements: OpenApiDocument['security']\n  securitySchemes: MergedSecuritySchemes\n  requestBodyCompositionSelection?: Record<string, number>\n  selectedClient: WorkspaceStore['workspace']['x-scalar-default-client']\n  selectedSecurity: SelectedSecurity\n  selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n  server: ServerObject | null\n  defaultHeaders: Record<string, string>\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n}\n\nconst {\n  authMeta = { type: 'document' },\n  clientOptions,\n  environment,\n  eventBus,\n  exampleKey,\n  workspaceCookies,\n  documentCookies,\n  layout,\n  method,\n  operation,\n  path,\n  plugins,\n  proxyUrl,\n  requestBodyCompositionSelection,\n  securityRequirements,\n  securitySchemes,\n  selectedClient,\n  selectedSecurity,\n  selectedSecuritySchemes,\n  server,\n  defaultHeaders: autoGeneratedHeaders,\n} = defineProps<RequestBlockProps>()\n\n/** Operation metadata used across event emissions */\nconst meta = computed(() => ({\n  method,\n  path,\n  exampleKey,\n}))\n\nconst deletedExpandedParameterPaths = ref<Record<string, string[][]>>({})\n\n/** Renamed expanded rows, tracked as old-schema-path -> typed-value-path per parameter. */\nconst renamedExpandedParameterPaths = ref<\n  Record<string, { from: string[]; to: string[] }[]>\n>({})\n\nconst getExpandedParameterKey = (parameter: {\n  in: string\n  name: string\n}): string => `${parameter.in}:${parameter.name}`\n\nconst getHiddenValuePaths = (parameter: {\n  in: string\n  name: string\n}): string[][] =>\n  deletedExpandedParameterPaths.value[getExpandedParameterKey(parameter)] ?? []\n\nconst getRenamedValuePaths = (parameter: {\n  in: string\n  name: string\n}): { from: string[]; to: string[] }[] =>\n  renamedExpandedParameterPaths.value[getExpandedParameterKey(parameter)] ?? []\n\nconst pathsEqual = (a: string[], b: string[]): boolean =>\n  a.length === b.length && a.every((segment, index) => segment === b[index])\n\n/**\n * Hides the schema path of an expanded row so it does not reappear as an empty suggestion. Used\n * both when a row is deleted and when its key is renamed (the old key should not pop back up).\n */\nconst hideExpandedRowPath = (row: TableRow): void => {\n  if (!row.originalParameter || !row.sourceParameterValuePath) {\n    return\n  }\n\n  const key = getExpandedParameterKey(row.originalParameter)\n  deletedExpandedParameterPaths.value = {\n    ...deletedExpandedParameterPaths.value,\n    [key]: [\n      ...(deletedExpandedParameterPaths.value[key] ?? []),\n      row.sourceParameterValuePath,\n    ],\n  }\n}\n\n/**\n * Records that an expanded row was renamed from its current value path to the typed one, so the\n * read side can render the renamed key in the original property's slot instead of appending it to\n * the end of the table. Repeated renames of the same row stay anchored to the original schema path.\n */\nconst recordExpandedRowRename = (\n  row: TableRow,\n  newValuePath: string[],\n): void => {\n  if (!row.originalParameter || !row.sourceParameterValuePath) {\n    return\n  }\n\n  const from = row.sourceParameterValuePath\n  const key = getExpandedParameterKey(row.originalParameter)\n  const existing = renamedExpandedParameterPaths.value[key] ?? []\n\n  // If this row was already renamed, the row's current path is the previous target. Re-anchor that\n  // entry to the new target so a second rename does not create an orphaned mapping.\n  const chained = existing.find((entry) => pathsEqual(entry.to, from))\n  const next = chained\n    ? existing.map((entry) =>\n        entry === chained ? { from: entry.from, to: newValuePath } : entry,\n      )\n    : [...existing, { from, to: newValuePath }]\n\n  renamedExpandedParameterPaths.value = {\n    ...renamedExpandedParameterPaths.value,\n    [key]: next,\n  }\n}\n\n/** Parameters grouped by type (path, query, header, cookie) */\nconst sections = computed(() =>\n  groupBy(\n    operation.parameters\n      ?.map((param) => getResolvedRef(param))\n      .flatMap((param) =>\n        createParameterRows(param, exampleKey, {\n          hiddenValuePaths:\n            param.in === 'query' ? getHiddenValuePaths(param) : [],\n          renamedValuePaths:\n            param.in === 'query' ? getRenamedValuePaths(param) : [],\n        }).map((row) => ({\n          ...row,\n          in: param.in,\n        })),\n      ) ?? [],\n    'in',\n    ({ in: _in, ...row }) => {\n      return row as TableRow\n    },\n  ),\n)\n\n// Generate a reverse map for fast lookup of headers by the name\nconst headersMap = computed(() =>\n  groupBy(\n    sections.value.header?.map((it) => ({\n      ...it,\n      name: it.name.toLowerCase(),\n    })) ?? [],\n    'name',\n  ),\n)\n\nconst defaultHeaders = computed(() => {\n  const disableParameters =\n    operation['x-scalar-disable-parameters']?.['default-headers']?.[\n      exampleKey\n    ] ?? {}\n\n  const isOverridden = (name: string) => {\n    const header = headersMap.value[name.toLowerCase()]?.[0]\n\n    if (!header) {\n      return false\n    }\n\n    return !header.isDisabled\n  }\n\n  return Object.entries(autoGeneratedHeaders).map(([name, value]) => {\n    return {\n      name,\n      value,\n      schema: undefined,\n      isOverridden: isOverridden(name),\n      isReadonly: true,\n      isDisabled: disableParameters[name.toLowerCase()] ?? false,\n    } satisfies TableRow\n  })\n})\n\nconst headers = computed(() => [\n  ...defaultHeaders.value,\n  ...(sections.value.header ?? []),\n])\n\nconst defaultCookies = computed(() => {\n  const environmentVariables = getEnvironmentVariables(environment)\n  const resolvedUrl = getResolvedUrl({\n    server,\n    path,\n  })\n  const url = replaceEnvVariables(resolvedUrl, environmentVariables)\n\n  const disabledGlobalCookies =\n    operation['x-scalar-disable-parameters']?.['global-cookies']?.[\n      exampleKey\n    ] ?? {}\n\n  const transform = (\n    cookie: XScalarCookie,\n    location: 'document' | 'workspace',\n  ) => {\n    return {\n      name: cookie.name,\n      value: cookie.value,\n      globalRoute: { page: location, path: 'cookies' } as const,\n      isReadonly: true,\n      isDisabled: disabledGlobalCookies[cookie.name.toLowerCase()] ?? false,\n    } satisfies TableRow\n  }\n\n  const globalCookies = [\n    {\n      location: 'workspace',\n      cookies: workspaceCookies,\n    },\n    {\n      location: 'document',\n      cookies: documentCookies,\n    },\n  ] as const\n\n  return globalCookies.flatMap(({ location, cookies }) => {\n    return cookies\n      .filter((cookie) =>\n        filterGlobalCookie({\n          cookie,\n          url,\n          disabledGlobalCookies: {},\n        }),\n      )\n      .map((cookie) => transform(cookie, location))\n  })\n})\n\nconst cookies = computed(() => [\n  ...(defaultCookies.value ?? []),\n  ...(sections.value.cookie ?? []),\n])\n\n/** Currently selected filter for the request sections */\nconst selectedFilter = ref<Filter>('All')\n\n/** Available operation sections */\nconst OPERATION_SECTIONS: readonly Filter[] = [\n  'Auth',\n  'Variables',\n  'Cookies',\n  'Headers',\n  'Query',\n  'Body',\n] as const\n\n/**\n * Pre-generated stable IDs for all possible filter sections.\n * These are created once at setup time to avoid regenerating IDs on re-render.\n */\nconst sectionIds: Record<Filter, string> = {\n  All: useId(),\n  Auth: useId(),\n  Variables: useId(),\n  Cookies: useId(),\n  Headers: useId(),\n  Query: useId(),\n  Body: useId(),\n}\n\n/** Filters available based on operation state */\nconst filters = computed<Filter[]>(() => {\n  const availableFilters = new Set<Filter>(['All', ...OPERATION_SECTIONS])\n\n  if (!sections.value.path?.length) {\n    availableFilters.delete('Variables')\n  }\n  if (!canMethodHaveBody(method)) {\n    availableFilters.delete('Body')\n  }\n  if (isAuthHidden.value) {\n    availableFilters.delete('Auth')\n  }\n\n  return [...availableFilters]\n})\n\n/**\n * Map available filters to their pre-generated stable IDs.\n * Only includes IDs for filters that are currently available.\n */\nconst filterIds = computed(\n  () =>\n    Object.fromEntries(\n      filters.value.map((section) => [section, sectionIds[section]]),\n    ) as Record<Filter, string>,\n)\n\n/**\n * Hide auth selector in readonly mode when no security schemes are defined.\n * This keeps the UI clean when there are no authentication options available.\n */\nconst isAuthHidden = computed(\n  () => layout === 'modal' && !Object.keys(securitySchemes ?? {}).length,\n)\n\n/**\n * Keep auth available for unauthenticated operations, but collapse it by default\n * in readonly modal layouts unless a requirement or manual selection exists.\n */\nconst isAuthDefaultOpen = computed(\n  () =>\n    layout !== 'modal' ||\n    Boolean(\n      securityRequirements?.length || selectedSecurity.selectedSchemes.length,\n    ),\n)\n\n/** Get a sensible placeholder for the request name input */\nconst requestNamePlaceholder = computed(() => {\n  if (operation.summary) {\n    return operation.summary\n  }\n  const cleanPath = path.replace(REGEX.PROTOCOL, '')\n  return cleanPath || 'Request Name'\n})\n\n/** Check if the section should be shown based on the selected filter */\nconst isSectionVisible = (section: Filter): boolean => {\n  return selectedFilter.value === 'All' || selectedFilter.value === section\n}\n\n/**\n * Reset filter to 'All' if Body filter is selected but method changes to one that cannot have a body.\n * This prevents showing an empty Body section when switching methods.\n */\nwatch(\n  () => method,\n  (newMethod) => {\n    if (selectedFilter.value === 'Body' && !canMethodHaveBody(newMethod)) {\n      selectedFilter.value = 'All'\n    }\n  },\n)\n\n// Expanded-row bookkeeping is keyed by `in:name`, which is not unique across operations or\n// examples. Reset both maps when the operation or example changes so stale delete/rename mappings\n// do not leak onto another request that happens to share a query parameter name.\nwatch(\n  () => [method, path, exampleKey],\n  () => {\n    deletedExpandedParameterPaths.value = {}\n    renamedExpandedParameterPaths.value = {}\n  },\n)\n\n/** Handle operation summary updates */\nconst handleSummaryUpdate = (event: Event): void => {\n  const summary = (event.target as HTMLInputElement).value\n  eventBus.emit('operation:update:meta', {\n    meta: meta.value,\n    payload: { summary: summary.trim() },\n  })\n}\n\n/** Parameter handlers */\nconst parameterHandlers = computed(() => ({\n  path: createParameterHandlers('path', eventBus, meta.value, {\n    context: sections.value.path ?? [],\n  }),\n  cookie: createParameterHandlers('cookie', eventBus, meta.value, {\n    context: cookies.value ?? [],\n    globalParameters: defaultCookies.value.length,\n  }),\n  header: createParameterHandlers('header', eventBus, meta.value, {\n    context: headers.value,\n    defaultParameters: defaultHeaders.value.length,\n  }),\n  query: createParameterHandlers('query', eventBus, meta.value, {\n    context: sections.value.query ?? [],\n    onDeleteExpandedRow: hideExpandedRowPath,\n    onRenameExpandedRow: recordExpandedRowRename,\n  }),\n}))\n\n/** Handle request body content type update */\nconst handleUpdateContentType = (payload: { value: string }): void =>\n  eventBus.emit('operation:update:requestBody:contentType', {\n    payload: { contentType: payload.value },\n    meta: meta.value,\n  })\n\n/** Handle request body value update */\nconst handleUpdateBodyValue = ({\n  payload,\n  contentType,\n}: Pick<\n  ApiReferenceEvents['operation:update:requestBody:value'],\n  'payload' | 'contentType'\n>): void => {\n  const debounceKey =\n    typeof payload === 'string'\n      ? `update:requestBody:value-${contentType}`\n      : undefined\n\n  eventBus.emit(\n    'operation:update:requestBody:value',\n    {\n      payload,\n      contentType,\n      meta: meta.value,\n    },\n    {\n      debounceKey,\n    },\n  )\n}\n\n/** Handle request body value update */\nconst handleUpdateBodyFormValue = ({\n  payload,\n  contentType,\n}: Pick<\n  ApiReferenceEvents['operation:update:requestBody:formValue'],\n  'payload' | 'contentType'\n>): void => {\n  const debounceKey = `update:requestBody:${contentType}-form-value`\n\n  eventBus.emit(\n    'operation:update:requestBody:formValue',\n    {\n      payload: payload.map((row) => unpackProxyObject(row, { depth: 1 })),\n      contentType,\n      meta: meta.value,\n    },\n    {\n      debounceKey,\n    },\n  )\n}\n\nconst labelRequestNameId = useId()\n\nconst globalCookies = computed(() => [...workspaceCookies, ...documentCookies])\n\n/** Allow updating the operation extensions for the plugins */\nconst updateOperationExtension = (\n  payload: ApiReferenceEvents['operation:update:extension']['payload'],\n): void =>\n  eventBus.emit('operation:update:extension', { payload, meta: meta.value })\n</script>\n<template>\n  <ViewLayoutSection :aria-label=\"`Request: ${operation.summary}`\">\n    <template #title>\n      <div\n        class=\"group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24\">\n        <label\n          v-if=\"layout !== 'modal'\"\n          class=\"pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0\"\n          :for=\"labelRequestNameId\" />\n        <input\n          v-if=\"layout !== 'modal'\"\n          :id=\"labelRequestNameId\"\n          class=\"text-c-1 group-hover-input pointer-events-auto relative z-10 -ml-0.5 h-8 w-full rounded pl-1.25 has-[:focus-visible]:outline md:-ml-1.25\"\n          :placeholder=\"requestNamePlaceholder\"\n          :value=\"operation.summary\"\n          @blur=\"handleSummaryUpdate\" />\n        <span\n          v-else\n          class=\"text-c-1 flex h-8 items-center\">\n          {{ operation.summary }}\n        </span>\n      </div>\n      <SectionFilter\n        v-model=\"selectedFilter\"\n        :filterIds=\"filterIds\"\n        :filters=\"filters\" />\n    </template>\n\n    <div\n      :id=\"filterIds.All\"\n      class=\"request-section-content custom-scroll relative flex flex-1 flex-col\"\n      :role=\"selectedFilter === 'All' ? 'tabpanel' : 'none'\">\n      <!-- Auth Selector -->\n      <AuthSelector\n        v-show=\"isSectionVisible('Auth') && !isAuthHidden\"\n        :id=\"filterIds.Auth\"\n        :createAnySecurityScheme=\"layout !== 'modal'\"\n        :defaultOpen=\"isAuthDefaultOpen\"\n        :environment\n        :eventBus\n        :meta=\"authMeta\"\n        :options\n        :proxyUrl\n        :securityRequirements\n        :securitySchemes\n        :selectedSecurity\n        :selectedSecuritySchemes\n        :server\n        title=\"Authentication\" />\n\n      <!-- Variables (Path Parameters) -->\n      <RequestParams\n        v-show=\"isSectionVisible('Variables') && sections.path?.length\"\n        :id=\"filterIds.Variables\"\n        :environment\n        :eventBus\n        :exampleKey\n        :rows=\"sections.path ?? []\"\n        :showAddRowPlaceholder=\"false\"\n        title=\"Variables\"\n        v-on=\"parameterHandlers.path\" />\n\n      <!-- Cookies -->\n      <RequestParams\n        v-show=\"isSectionVisible('Cookies')\"\n        :id=\"filterIds.Cookies\"\n        :environment\n        :eventBus\n        :exampleKey\n        :rows=\"cookies ?? []\"\n        :showAddRowPlaceholder=\"true\"\n        title=\"Cookies\"\n        v-on=\"parameterHandlers.cookie\" />\n\n      <!-- Headers -->\n      <RequestParams\n        v-show=\"isSectionVisible('Headers')\"\n        :id=\"filterIds.Headers\"\n        :environment\n        :eventBus\n        :exampleKey\n        :rows=\"headers ?? []\"\n        title=\"Headers\"\n        v-on=\"parameterHandlers.header\" />\n\n      <!-- Query Parameters -->\n      <RequestParams\n        v-show=\"isSectionVisible('Query')\"\n        :id=\"filterIds.Query\"\n        :environment\n        :eventBus\n        :exampleKey\n        :rows=\"sections.query ?? []\"\n        title=\"Query Parameters\"\n        v-on=\"parameterHandlers.query\" />\n\n      <!-- Request Body -->\n      <RequestBody\n        v-show=\"isSectionVisible('Body') && canMethodHaveBody(method)\"\n        :id=\"filterIds.Body\"\n        :environment\n        :exampleKey\n        :requestBody=\"getResolvedRef(operation.requestBody)\"\n        :requestBodyCompositionSelection\n        title=\"Request Body\"\n        @update:contentType=\"handleUpdateContentType\"\n        @update:formValue=\"handleUpdateBodyFormValue\"\n        @update:value=\"handleUpdateBodyValue\" />\n\n      <!-- Inject request section plugin components -->\n      <ScalarErrorBoundary\n        v-for=\"(plugin, index) in plugins\"\n        :key=\"index\">\n        <component\n          :is=\"plugin.components.request.component\"\n          v-if=\"plugin?.components?.request\"\n          v-show=\"selectedFilter === 'All'\"\n          :operation\n          v-bind=\"plugin.components.request.additionalProps\"\n          @operation:update:extension=\"updateOperationExtension\" />\n      </ScalarErrorBoundary>\n\n      <!-- Spacer -->\n      <div class=\"flex grow\" />\n      <!-- Code Snippet -->\n      <RequestCodeSnippet\n        v-show=\"selectedFilter === 'All'\"\n        :clientOptions\n        :eventBus\n        :globalCookies\n        integration=\"client\"\n        :method\n        :operation\n        :path\n        :securitySchemes=\"selectedSecuritySchemes\"\n        :selectedClient\n        :selectedContentType=\"\n          getResolvedRef(operation.requestBody)?.[\n            'x-scalar-selected-content-type'\n          ]?.[exampleKey]\n        \"\n        :selectedServer=\"server ?? undefined\" />\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.request-section-content {\n  --scalar-border-width: 0.5px;\n}\n.request-section-content-filter {\n  box-shadow: 0 -10px 0 10px var(--scalar-background-1);\n}\n.request-item:focus-within .request-meta-buttons {\n  opacity: 1;\n}\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/v2/blocks/request-block/components/RequestBody.vue.d.ts

@@ -22,14 +22,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         contentType: string;
         meta: import("@scalar/workspace-store/events").OperationExampleMeta;
     }, "payload" | "contentType">) => any;
-    "update:contentType": (payload: {
-        value: string;
-    }) => any;
     "update:value": (payload: Pick<{
         payload: string | File | undefined;
         contentType: string;
         meta: import("@scalar/workspace-store/events").OperationExampleMeta;
     }, "payload" | "contentType">) => any;
+    "update:contentType": (payload: {
+        value: string;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:formValue"?: ((payload: Pick<{
         payload: {
@@ -40,14 +40,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         contentType: string;
         meta: import("@scalar/workspace-store/events").OperationExampleMeta;
     }, "payload" | "contentType">) => any) | undefined;
-    "onUpdate:contentType"?: ((payload: {
-        value: string;
-    }) => any) | undefined;
     "onUpdate:value"?: ((payload: Pick<{
         payload: string | File | undefined;
         contentType: string;
         meta: import("@scalar/workspace-store/events").OperationExampleMeta;
     }, "payload" | "contentType">) => any) | undefined;
+    "onUpdate:contentType"?: ((payload: {
+        value: string;
+    }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/v2/blocks/request-block/components/RequestBody.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequestBody.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/request-block/components/RequestBody.vue"],"names":[],"mappings":"AAoVA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EACV,iBAAiB,EAElB,MAAM,8DAA8D,CAAA;AAcrE,KAAK,WAAW,GAAG;IACjB,mBAAmB;IACnB,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAA;IAClB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,WAAW,EAAE,kBAAkB,CAAA;IAC/B,sEAAsE;IACtE,+BAA+B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzD,CAAC;AAuiBF,QAAA,MAAM,YAAY;;;;;;;;;;;eA5hB4B,MAAM;;;;;;;;;;;;;;;;;;eAAN,MAAM;;;;;;;kFA+hBlD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"RequestBody.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/request-block/components/RequestBody.vue"],"names":[],"mappings":"AAuaA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EACV,iBAAiB,EAElB,MAAM,8DAA8D,CAAA;AAkBrE,KAAK,WAAW,GAAG;IACjB,mBAAmB;IACnB,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAA;IAClB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,WAAW,EAAE,kBAAkB,CAAA;IAC/B,sEAAsE;IACtE,+BAA+B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzD,CAAC;AAwpBF,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;eA7oB4B,MAAM;;;;;;;;;;;;;;;;;;eAAN,MAAM;;kFAgpBlD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/request-block/components/RequestBody.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import RequestBody_vue_vue_type_script_setup_true_lang_default from "./RequestBody.vue.script.js";
 /* empty css                          */
 //#region src/v2/blocks/request-block/components/RequestBody.vue
-var RequestBody_default = /* @__PURE__ */ _plugin_vue_export_helper_default(RequestBody_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-aff33ea6"]]);
+var RequestBody_default = /* @__PURE__ */ _plugin_vue_export_helper_default(RequestBody_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-dcc3af8c"]]);
 //#endregion
 export { RequestBody_default as default };
 

package/dist/v2/blocks/request-block/components/RequestBody.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RequestBody.vue.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestBody.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport { CONTENT_TYPES } from '@scalar/helpers/http/content-types'\nimport { parseMimeType } from '@scalar/helpers/http/mime-type'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport {\n  getExampleFromBody,\n  getSelectedBodyContentType,\n} from '@scalar/workspace-store/request-example'\nimport { resolve } from '@scalar/workspace-store/resolve'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type {\n  RequestBodyObject,\n  SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport { useFileDialog } from '@/hooks/use-file-dialog'\nimport RequestBodyForm from '@/v2/blocks/request-block/components/RequestBodyForm.vue'\nimport { getFileName } from '@/v2/blocks/request-block/helpers/files'\nimport { CodeInput } from '@/v2/components/code-input'\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nconst {\n  requestBody,\n  exampleKey,\n  environment,\n  requestBodyCompositionSelection,\n  title,\n} = defineProps<{\n  /** Request body */\n  requestBody?: RequestBodyObject\n  /** Currently selected example key for the current operation */\n  exampleKey: string\n  /** Display title */\n  title: string\n  /** Selected environment */\n  environment: XScalarEnvironment\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection?: Record<string, number>\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:contentType', payload: { value: string }): void\n  /** We use this event to update raw values */\n  (\n    e: 'update:value',\n    payload: Pick<\n      ApiReferenceEvents['operation:update:requestBody:value'],\n      'payload' | 'contentType'\n    >,\n  ): void\n  /** We use this event when updating form data only */\n  (\n    e: 'update:formValue',\n    payload: Pick<\n      ApiReferenceEvents['operation:update:requestBody:formValue'],\n      'payload' | 'contentType'\n    >,\n  ): void\n}>()\n\n// Map a content type to a language for the code editor\nconst contentTypeToLanguageMap = {\n  'application/json': 'json',\n  'application/xml': 'xml',\n  'application/yaml': 'yaml',\n} as const\n\n/** Selected content type with default */\nconst selectedContentType = computed(\n  () => getSelectedBodyContentType(requestBody, exampleKey) ?? 'none',\n)\n\n/**\n * Strips MIME parameters (such as `charset=utf-8`) for dropdown labels, aligned with how we treat\n * media types elsewhere (see api-reference `normalizeMimeType` / WHATWG essence).\n */\nconst contentTypeLabel = (raw: string): string => parseMimeType(raw).essence\n\n/**\n * Build the dropdown options for the content type selector.\n *\n * The list is composed of two groups:\n *   1. The built-in content types we ship friendly labels for (JSON, XML, Multipart Form, etc.).\n *   2. Any additional content types defined on the OpenAPI request body that are not in the built-in list\n *      (for example `text/csv`, `application/pdf`, vendor types like `application/vnd.api+json`, ...).\n *\n * The OpenAPI-defined extras are appended at the bottom so the well-known options stay on top, and\n * users can always pick the exact content type the operation actually accepts.\n */\nconst contentTypeOptions = computed<{ id: string; label: string }[]>(() => {\n  const builtIn = objectEntries(CONTENT_TYPES).map(([id, label]) => ({\n    id,\n    label,\n  }))\n\n  const extras = Object.keys(requestBody?.content ?? {})\n    .filter((type) => {\n      if (type in CONTENT_TYPES) {\n        return false\n      }\n      // Same essence as a built-in (e.g. `application/json; charset=utf-8`) — do not duplicate the row.\n      return !(contentTypeLabel(type) in CONTENT_TYPES)\n    })\n    .map((type) => ({ id: type, label: contentTypeLabel(type) }))\n\n  return [...builtIn, ...extras]\n})\n\nconst selectedContentTypeModel = computed<{ id: string; label: string }>({\n  get: () => {\n    const found = contentTypeOptions.value.find(\n      (it) => it.id === selectedContentType.value,\n    )\n    if (found) {\n      return found\n    }\n\n    const essence = contentTypeLabel(selectedContentType.value)\n    const friendly =\n      CONTENT_TYPES[essence as keyof typeof CONTENT_TYPES] ?? essence\n\n    return {\n      id: selectedContentType.value,\n      label: friendly,\n    }\n  },\n  set: (v) => {\n    emits('update:contentType', { value: v.id })\n  },\n})\n\nfunction handleFileUpload(callback: (file: File) => void) {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        callback(file)\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\n/** Dereferenced example */\nconst example = computed(\n  () =>\n    requestBody &&\n    getExampleFromBody(\n      requestBody,\n      selectedContentType.value,\n      exampleKey,\n      requestBodyCompositionSelection,\n    ),\n)\n\n/** Convert the example value to a string for the code editor */\nconst bodyValue = computed(() => {\n  if (!example.value) {\n    return ''\n  }\n\n  const value = example.value.value\n  if (typeof value === 'string') {\n    return value\n  }\n\n  return JSON.stringify(value, null, 2)\n})\n\n/** Resolved schema for the request body */\nconst bodySchema = computed<SchemaObject | undefined>(() => {\n  return resolve.schema(\n    requestBody?.content?.[selectedContentType.value]?.schema,\n  )\n})\n</script>\n<template>\n  <CollapsibleSection>\n    <template #title>{{ title }}</template>\n    <DataTable\n      :columns=\"['']\"\n      presentational>\n      <DataTableHeader\n        class=\"relative col-span-full flex h-8 cursor-pointer items-center justify-between border-r-0 !p-0\">\n        <ScalarListbox\n          v-model=\"selectedContentTypeModel\"\n          :options=\"contentTypeOptions\"\n          teleport>\n          <ScalarButton\n            class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-3 font-normal\"\n            fullWidth\n            variant=\"ghost\">\n            <span>{{ selectedContentTypeModel.label }}</span>\n            <ScalarIcon\n              icon=\"ChevronDown\"\n              size=\"md\" />\n          </ScalarButton>\n        </ScalarListbox>\n      </DataTableHeader>\n      <DataTableRow>\n        <!-- No Body -->\n        <template v-if=\"selectedContentType === 'none'\">\n          <div\n            class=\"text-c-3 flex min-h-10 w-full items-center justify-center border-t p-2 text-sm\">\n            <span>No Body</span>\n          </div>\n        </template>\n\n        <!-- Binary File -->\n        <template\n          v-else-if=\"selectedContentType === 'application/octet-stream'\">\n          <div\n            class=\"flex items-center justify-center overflow-hidden border-t p-1.5\">\n            <template\n              v-if=\"\n                getFileName(unpackProxyObject(example?.value)) !== undefined\n              \">\n              <span\n                class=\"text-c-2 w-full max-w-full overflow-hidden rounded border px-1.5 py-1 text-xs whitespace-nowrap\">\n                {{ getFileName(unpackProxyObject(example?.value)) }}\n              </span>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 ml-1 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"\n                  emits('update:value', {\n                    payload: undefined,\n                    contentType: selectedContentType,\n                  })\n                \">\n                Delete\n              </ScalarButton>\n            </template>\n            <template v-else>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"\n                  () =>\n                    handleFileUpload((file) =>\n                      emits('update:value', {\n                        payload: file,\n                        contentType: selectedContentType,\n                      }),\n                    )\n                \">\n                <span>Select File</span>\n                <ScalarIcon\n                  class=\"ml-1\"\n                  icon=\"Upload\"\n                  size=\"xs\"\n                  thickness=\"2.5\" />\n              </ScalarButton>\n            </template>\n          </div>\n        </template>\n\n        <!-- Form Data / URL Encoded -->\n        <template\n          v-else-if=\"\n            selectedContentType === 'multipart/form-data' ||\n            selectedContentType === 'application/x-www-form-urlencoded'\n          \">\n          <RequestBodyForm\n            :bodySchema\n            :environment\n            :example\n            :selectedContentType\n            @update:formValue=\"\n              (payload) =>\n                emits('update:formValue', {\n                  payload,\n                  contentType: selectedContentType,\n                })\n            \" />\n        </template>\n\n        <!-- Code/Other -->\n        <template v-else>\n          <CodeInput\n            class=\"border-t px-3\"\n            content=\"\"\n            :environment=\"environment\"\n            :language=\"\n              contentTypeToLanguageMap[\n                selectedContentType as keyof typeof contentTypeToLanguageMap\n              ] ?? 'plaintext'\n            \"\n            lineNumbers\n            lint\n            :modelValue=\"bodyValue\"\n            withFakeData\n            @update:modelValue=\"\n              (value) =>\n                emits('update:value', {\n                  payload: value,\n                  contentType: selectedContentType,\n                })\n            \" />\n        </template>\n      </DataTableRow>\n    </DataTable>\n  </CollapsibleSection>\n</template>\n<style scoped>\n:deep(.cm-content) {\n  font-size: var(--scalar-small);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"RequestBody.vue.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestBody.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport { CONTENT_TYPES } from '@scalar/helpers/http/content-types'\nimport { parseMimeType } from '@scalar/helpers/http/mime-type'\nimport { isObject } from '@scalar/helpers/object/is-object'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport {\n  getExampleFromBody,\n  getSelectedBodyContentType,\n} from '@scalar/workspace-store/request-example'\nimport { resolve } from '@scalar/workspace-store/resolve'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type {\n  RequestBodyObject,\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'\nimport { computed, ref, watch } from 'vue'\n\nimport { useFileDialog } from '@/hooks/use-file-dialog'\nimport RequestBodyForm from '@/v2/blocks/request-block/components/RequestBodyForm.vue'\nimport RequestBodyStructured from '@/v2/blocks/request-block/components/RequestBodyStructured.vue'\nimport RequestBodyViewToggle from '@/v2/blocks/request-block/components/RequestBodyViewToggle.vue'\nimport { getFileName } from '@/v2/blocks/request-block/helpers/files'\nimport { getStructuredBodyCodec } from '@/v2/blocks/request-block/helpers/structured-body-codec'\nimport { CodeInput } from '@/v2/components/code-input'\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nconst {\n  requestBody,\n  exampleKey,\n  environment,\n  requestBodyCompositionSelection,\n  title,\n} = defineProps<{\n  /** Request body */\n  requestBody?: RequestBodyObject\n  /** Currently selected example key for the current operation */\n  exampleKey: string\n  /** Display title */\n  title: string\n  /** Selected environment */\n  environment: XScalarEnvironment\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection?: Record<string, number>\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:contentType', payload: { value: string }): void\n  /** We use this event to update raw values */\n  (\n    e: 'update:value',\n    payload: Pick<\n      ApiReferenceEvents['operation:update:requestBody:value'],\n      'payload' | 'contentType'\n    >,\n  ): void\n  /** We use this event when updating form data only */\n  (\n    e: 'update:formValue',\n    payload: Pick<\n      ApiReferenceEvents['operation:update:requestBody:formValue'],\n      'payload' | 'contentType'\n    >,\n  ): void\n}>()\n\n// Map a content type to a language for the code editor\nconst contentTypeToLanguageMap = {\n  'application/json': 'json',\n  'application/xml': 'xml',\n  'application/yaml': 'yaml',\n} as const\n\n/** Selected content type with default */\nconst selectedContentType = computed(\n  () => getSelectedBodyContentType(requestBody, exampleKey) ?? 'none',\n)\n\n/**\n * Strips MIME parameters (such as `charset=utf-8`) for dropdown labels, aligned with how we treat\n * media types elsewhere (see api-reference `normalizeMimeType` / WHATWG essence).\n */\nconst contentTypeLabel = (raw: string): string => parseMimeType(raw).essence\n\n/**\n * Build the dropdown options for the content type selector.\n *\n * The list is composed of two groups:\n *   1. The built-in content types we ship friendly labels for (JSON, XML, Multipart Form, etc.).\n *   2. Any additional content types defined on the OpenAPI request body that are not in the built-in list\n *      (for example `text/csv`, `application/pdf`, vendor types like `application/vnd.api+json`, ...).\n *\n * The OpenAPI-defined extras are appended at the bottom so the well-known options stay on top, and\n * users can always pick the exact content type the operation actually accepts.\n */\nconst contentTypeOptions = computed<{ id: string; label: string }[]>(() => {\n  const builtIn = objectEntries(CONTENT_TYPES).map(([id, label]) => ({\n    id,\n    label,\n  }))\n\n  const extras = Object.keys(requestBody?.content ?? {})\n    .filter((type) => {\n      if (type in CONTENT_TYPES) {\n        return false\n      }\n      // Same essence as a built-in (e.g. `application/json; charset=utf-8`) — do not duplicate the row.\n      return !(contentTypeLabel(type) in CONTENT_TYPES)\n    })\n    .map((type) => ({ id: type, label: contentTypeLabel(type) }))\n\n  return [...builtIn, ...extras]\n})\n\nconst selectedContentTypeModel = computed<{ id: string; label: string }>({\n  get: () => {\n    const found = contentTypeOptions.value.find(\n      (it) => it.id === selectedContentType.value,\n    )\n    if (found) {\n      return found\n    }\n\n    const essence = contentTypeLabel(selectedContentType.value)\n    const friendly =\n      CONTENT_TYPES[essence as keyof typeof CONTENT_TYPES] ?? essence\n\n    return {\n      id: selectedContentType.value,\n      label: friendly,\n    }\n  },\n  set: (v) => {\n    emits('update:contentType', { value: v.id })\n  },\n})\n\nfunction handleFileUpload(callback: (file: File) => void) {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        callback(file)\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\n/** Dereferenced example */\nconst example = computed(\n  () =>\n    requestBody &&\n    getExampleFromBody(\n      requestBody,\n      selectedContentType.value,\n      exampleKey,\n      requestBodyCompositionSelection,\n    ),\n)\n\n/** Convert the example value to a string for the code editor */\nconst bodyValue = computed(() => {\n  if (!example.value) {\n    return ''\n  }\n\n  const value = example.value.value\n  if (typeof value === 'string') {\n    return value\n  }\n\n  return JSON.stringify(value, null, 2)\n})\n\n/** Resolved schema for the request body */\nconst bodySchema = computed<SchemaObject | undefined>(() => {\n  return resolve.schema(\n    requestBody?.content?.[selectedContentType.value]?.schema,\n  )\n})\n\n/** Codec for structured (JSON/YAML) bodies, undefined for everything else */\nconst structuredCodec = computed(() =>\n  selectedContentType.value === 'none'\n    ? undefined\n    : getStructuredBodyCodec(selectedContentType.value),\n)\n\n/** Parsed body value for the form view — `ok: false` when the raw text is not parseable */\nconst parsedBody = computed<{ ok: boolean; value?: unknown }>(() => {\n  const codec = structuredCodec.value\n  if (!codec) {\n    return { ok: false }\n  }\n\n  const raw = example.value?.value\n  // An empty body is still form-editable: rows come from the schema.\n  if (raw === undefined || raw === null || raw === '') {\n    return { ok: true, value: {} }\n  }\n  if (typeof raw === 'string') {\n    try {\n      return { ok: true, value: codec.parse(raw) }\n    } catch {\n      return { ok: false }\n    }\n  }\n  // Spec-provided examples can be stored as objects directly.\n  return { ok: true, value: raw }\n})\n\n/** The form view only works on an object-shaped body root */\nconst isFormViewAvailable = computed(\n  () => parsedBody.value.ok && isObject(parsedBody.value.value),\n)\n\n/**\n * Show the Form/Raw toggle for structured bodies that are (or per schema should be)\n * an object at the root. Non-object roots (arrays, primitives) stay raw-only.\n */\nconst showBodyViewToggle = computed(\n  () =>\n    Boolean(structuredCodec.value) &&\n    (isFormViewAvailable.value ||\n      Boolean(bodySchema.value && isObjectSchema(bodySchema.value))),\n)\n\n/** Selected body view, raw by default so existing behavior is unchanged */\nconst bodyView = ref<'form' | 'raw'>('raw')\n\n// Fall back to raw when the form view stops being available (e.g. the content type\n// changed to a non-structured one, or an external edit made the body unparseable).\nwatch(isFormViewAvailable, (ok) => {\n  if (!ok) {\n    bodyView.value = 'raw'\n  }\n})\n</script>\n<template>\n  <CollapsibleSection>\n    <template #title>{{ title }}</template>\n    <DataTable\n      :columns=\"['']\"\n      presentational>\n      <DataTableHeader\n        class=\"relative col-span-full flex h-8 cursor-pointer items-center justify-between border-r-0 !p-0\">\n        <ScalarListbox\n          v-model=\"selectedContentTypeModel\"\n          :options=\"contentTypeOptions\"\n          teleport>\n          <ScalarButton\n            class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-3 font-normal\"\n            fullWidth\n            variant=\"ghost\">\n            <span>{{ selectedContentTypeModel.label }}</span>\n            <ScalarIcon\n              icon=\"ChevronDown\"\n              size=\"md\" />\n          </ScalarButton>\n        </ScalarListbox>\n        <RequestBodyViewToggle\n          v-if=\"showBodyViewToggle\"\n          :disabled=\"!isFormViewAvailable\"\n          :modelValue=\"bodyView\"\n          @update:modelValue=\"(v) => (bodyView = v)\" />\n      </DataTableHeader>\n      <DataTableRow>\n        <!-- No Body -->\n        <template v-if=\"selectedContentType === 'none'\">\n          <div\n            class=\"text-c-3 flex min-h-10 w-full items-center justify-center border-t p-2 text-sm\">\n            <span>No Body</span>\n          </div>\n        </template>\n\n        <!-- Binary File -->\n        <template\n          v-else-if=\"selectedContentType === 'application/octet-stream'\">\n          <div\n            class=\"flex items-center justify-center overflow-hidden border-t p-1.5\">\n            <template\n              v-if=\"\n                getFileName(unpackProxyObject(example?.value)) !== undefined\n              \">\n              <span\n                class=\"text-c-2 w-full max-w-full overflow-hidden rounded border px-1.5 py-1 text-xs whitespace-nowrap\">\n                {{ getFileName(unpackProxyObject(example?.value)) }}\n              </span>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 ml-1 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"\n                  emits('update:value', {\n                    payload: undefined,\n                    contentType: selectedContentType,\n                  })\n                \">\n                Delete\n              </ScalarButton>\n            </template>\n            <template v-else>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"\n                  () =>\n                    handleFileUpload((file) =>\n                      emits('update:value', {\n                        payload: file,\n                        contentType: selectedContentType,\n                      }),\n                    )\n                \">\n                <span>Select File</span>\n                <ScalarIcon\n                  class=\"ml-1\"\n                  icon=\"Upload\"\n                  size=\"xs\"\n                  thickness=\"2.5\" />\n              </ScalarButton>\n            </template>\n          </div>\n        </template>\n\n        <!-- Form Data / URL Encoded -->\n        <template\n          v-else-if=\"\n            selectedContentType === 'multipart/form-data' ||\n            selectedContentType === 'application/x-www-form-urlencoded'\n          \">\n          <RequestBodyForm\n            :bodySchema\n            :environment\n            :example\n            :selectedContentType\n            @update:formValue=\"\n              (payload) =>\n                emits('update:formValue', {\n                  payload,\n                  contentType: selectedContentType,\n                })\n            \" />\n        </template>\n\n        <!-- Code/Other -->\n        <template v-else>\n          <!-- Schema-driven form view for structured (JSON/YAML) bodies -->\n          <RequestBodyStructured\n            v-if=\"bodyView === 'form' && isFormViewAvailable\"\n            :bodySchema\n            :contentType=\"selectedContentType\"\n            :environment\n            :parsedValue=\"parsedBody.value\"\n            @update:value=\"\n              (value) =>\n                emits('update:value', {\n                  payload: value,\n                  contentType: selectedContentType,\n                })\n            \" />\n          <CodeInput\n            v-else\n            class=\"border-t px-3\"\n            content=\"\"\n            :environment=\"environment\"\n            :language=\"\n              contentTypeToLanguageMap[\n                selectedContentType as keyof typeof contentTypeToLanguageMap\n              ] ?? 'plaintext'\n            \"\n            lineNumbers\n            lint\n            :modelValue=\"bodyValue\"\n            withFakeData\n            @update:modelValue=\"\n              (value) =>\n                emits('update:value', {\n                  payload: value,\n                  contentType: selectedContentType,\n                })\n            \" />\n        </template>\n      </DataTableRow>\n    </DataTable>\n  </CollapsibleSection>\n</template>\n<style scoped>\n:deep(.cm-content) {\n  font-size: var(--scalar-small);\n}\n</style>\n"],"mappings":""}