@scalar/api-reference 1.52.1 → 1.52.2

package/dist/features/Operation/components/ParameterListItem.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParameterListItem.vue.script.js","names":[],"sources":["../../../../src/features/Operation/components/ParameterListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport {\n  ScalarMarkdown,\n  ScalarMarkdownSummary,\n  ScalarWrappingText,\n} from '@scalar/components'\nimport { ScalarIconCaretRight } from '@scalar/icons'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  ParameterObject,\n  ResponseObject,\n  SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref } from 'vue'\n\nimport { getRefName } from '@/components/Content/Schema/helpers/get-ref-name'\nimport SchemaProperty from '@/components/Content/Schema/SchemaProperty.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\n\nimport ContentTypeSelect from './ContentTypeSelect.vue'\nimport Headers from './Headers.vue'\n\nconst { name, parameter, options, collapsableItems } = defineProps<{\n  parameter: ParameterObject | ResponseObject\n  name: string\n  breadcrumb?: string[]\n  eventBus: WorkspaceEventBus | null\n  collapsableItems?: boolean\n  options: Pick<\n    OperationProps['options'],\n    'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'\n  >\n}>()\n\n/** Whether the markdown summary is being truncated */\nconst truncated = ref(false)\n\n/** Responses and params may both have a schema */\nconst schema = computed<SchemaObject | null>(() =>\n  'schema' in parameter && parameter.schema\n    ? getResolvedRef(parameter.schema)\n    : null,\n)\n\n/** Response and params may both have content */\nconst content = computed(() => {\n  if (!('content' in parameter) || !parameter.content) {\n    return null\n  }\n  const keys = Object.keys(parameter.content)\n  if (keys.length === 0) {\n    return null\n  }\n  return parameter.content\n})\n\nconst selectedContentType = ref<string>(\n  Object.keys(content.value || {})[0] ?? '',\n)\n\n/** Response headers */\nconst headers = computed<ResponseObject['headers'] | null>(() =>\n  'headers' in parameter && parameter.headers ? parameter.headers : null,\n)\n\n/** Raw schema (possibly with $ref) for the selected content type or param. */\nconst baseSchema = computed(() =>\n  content.value\n    ? content.value?.[selectedContentType.value]?.schema\n    : 'schema' in parameter && parameter.schema\n      ? parameter.schema\n      : null,\n)\n\n/** When the schema is a $ref, preserve its name so the UI can show the ref name instead of just the type. */\nconst schemaModelName = computed(() => {\n  const raw = baseSchema.value\n  if (!raw) {\n    return null\n  }\n\n  if ('$ref' in raw) {\n    return getRefName(raw.$ref)\n  }\n\n  return null\n})\n\n/** Computed value from the combined schema param and content param */\nconst value = computed(() => {\n  const base = baseSchema.value\n  const resolvedBase = content.value ? getResolvedRef(base) : schema.value\n\n  const deprecated =\n    'deprecated' in parameter ? parameter.deprecated : schema.value?.deprecated\n\n  // Convert examples to schema examples which is an array\n  const paramExamples = 'examples' in parameter ? parameter.examples : {}\n  const recordExamples = Object.values({\n    ...paramExamples,\n    ...content.value?.[selectedContentType.value]?.examples,\n  })\n\n  // Only use parameter.example as fallback if no other examples exist\n  const arrayExamples =\n    schema.value?.examples ??\n    (recordExamples.length === 0 && 'example' in parameter\n      ? [parameter.example]\n      : [])\n\n  /** Combine param examples with content ones */\n  const examples = [...recordExamples, ...arrayExamples]\n\n  return {\n    ...resolvedBase,\n    deprecated: deprecated,\n    examples,\n  } as SchemaObject\n})\n\n/**\n * Determines whether this parameter item should be rendered as a collapsible disclosure.\n * Only collapses when collapsableItems is enabled and the parameter has additional\n * content to display (content types, headers, or schema details).\n */\nconst shouldCollapse = computed<boolean>(() =>\n  Boolean(content.value || headers.value || schema.value || truncated.value),\n)\n</script>\n<template>\n  <li class=\"parameter-item group/parameter-item\">\n    <Disclosure v-slot=\"{ open }\">\n      <component\n        :is=\"shouldCollapse ? DisclosureButton : 'div'\"\n        v-if=\"collapsableItems\"\n        class=\"parameter-item-trigger\"\n        :class=\"{ 'parameter-item-trigger-open': open }\">\n        <div class=\"parameter-item-name min-w-0\">\n          <ScalarIconCaretRight\n            v-if=\"shouldCollapse\"\n            class=\"parameter-item-icon size-3 transition-transform duration-100\"\n            :class=\"{ 'rotate-90': open }\"\n            weight=\"bold\" />\n          <div>\n            <ScalarWrappingText\n              preset=\"property\"\n              :text=\"name\" />\n          </div>\n        </div>\n        <ScalarMarkdownSummary\n          v-if=\"!open && parameter.description\"\n          v-model:truncated=\"truncated\"\n          class=\"parameter-item-description-summary min-w-0 flex-1\"\n          controlled\n          :value=\"parameter.description\" />\n        <div\n          v-else\n          class=\"flex-1\" />\n      </component>\n      <div\n        v-if=\"shouldCollapse && content\"\n        class=\"absolute top-[calc(10px+0.5lh)] right-0 z-0 flex -translate-y-1/2 items-center text-base\"\n        :class=\"{\n          'opacity-0 group-focus-within/parameter-item:opacity-100 group-hover/parameter-item:opacity-100':\n            !open,\n        }\">\n        <div\n          class=\"from-b-1 absolute inset-y-0 -left-6 -z-1 w-8 bg-linear-to-l from-40% to-transparent\" />\n        <ContentTypeSelect\n          v-model=\"selectedContentType\"\n          :content=\"content\" />\n      </div>\n      <DisclosurePanel\n        class=\"parameter-item-container parameter-item-container-markdown\"\n        :static=\"!collapsableItems\">\n        <ScalarMarkdown\n          v-if=\"collapsableItems && parameter.description\"\n          class=\"parameter-item-description\"\n          :value=\"parameter.description\" />\n        <!-- Headers -->\n        <Headers\n          v-if=\"headers\"\n          :breadcrumb=\"breadcrumb\"\n          :eventBus=\"eventBus\"\n          :headers=\"headers\"\n          :orderRequiredPropertiesFirst=\"options.orderRequiredPropertiesFirst\"\n          :orderSchemaPropertiesBy=\"options.orderSchemaPropertiesBy\" />\n\n        <!-- Schema -->\n        <SchemaProperty\n          is=\"div\"\n          :breadcrumb=\"breadcrumb\"\n          compact\n          :description=\"collapsableItems ? '' : parameter.description\"\n          :eventBus=\"eventBus\"\n          :hideWriteOnly=\"true\"\n          :modelName=\"schemaModelName\"\n          :name=\"collapsableItems ? '' : name\"\n          :noncollapsible=\"true\"\n          :options=\"{\n            hideWriteOnly: true,\n            orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n            orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n          }\"\n          :required=\"'required' in parameter && parameter.required\"\n          :schema=\"value\" />\n      </DisclosurePanel>\n    </Disclosure>\n  </li>\n</template>\n\n<style scoped>\n.parameter-item {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.parameter-item:last-of-type .parameter-schema {\n  padding-bottom: 0;\n}\n\n.parameter-item-container {\n  padding: 0;\n}\n\n.parameter-item-headers {\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.parameter-item-name {\n  position: relative;\n  font-weight: var(--scalar-bold);\n  font-size: var(--scalar-font-size-4);\n  font-family: var(--scalar-font-code);\n  color: var(--scalar-color-1);\n  overflow-wrap: break-word;\n}\n\n.parameter-item-description,\n.parameter-item-description-summary {\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n}\n\n.parameter-item-description-summary.parameter-item-description-summary > * {\n  --markdown-line-height: var(--scalar-line-height-5);\n}\n\n/* Match font size of markdown for property-detail-value since first child within accordian is displayed as if it were in the markdown section */\n.parameter-item-trigger\n  ~ .parameter-item-container\n  :deep(.property--level-0 > .property-heading .property-detail-value) {\n  font-size: var(--scalar-micro);\n}\n\n.parameter-item-required-optional {\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n  margin-right: 6px;\n  position: relative;\n}\n\n.parameter-item--required {\n  text-transform: uppercase;\n  font-size: var(--scalar-micro);\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color-orange);\n}\n\n.parameter-item-description {\n  margin-top: 6px;\n  font-size: var(--scalar-small);\n  color: var(--scalar-color-2);\n  line-height: 1.4;\n}\n\n.parameter-item-description :deep(p) {\n  margin-top: 4px;\n  font-size: var(--scalar-small);\n  color: var(--scalar-color-2);\n  line-height: 1.4;\n}\n\n.parameter-schema {\n  padding-bottom: 9px;\n  margin-top: 3px;\n}\n\n.parameter-item-trigger {\n  display: flex;\n  align-items: baseline;\n  line-height: var(--scalar-line-height-5);\n  gap: 6px;\n  flex-wrap: wrap;\n  padding: 10px 0;\n  outline: none;\n}\n\n.parameter-item-trigger-open {\n  padding-bottom: 0;\n}\n\n.parameter-item-icon {\n  color: var(--scalar-color-3);\n  left: -19px;\n  top: 0.5lh;\n  translate: 0 -50%;\n  position: absolute;\n}\n\n.parameter-item-trigger:hover .parameter-item-icon,\n.parameter-item-trigger:focus-visible .parameter-item-icon {\n  color: var(--scalar-color-1);\n}\n\n.parameter-item-trigger:focus-visible .parameter-item-icon {\n  outline: 1px solid var(--scalar-color-accent);\n  outline-offset: 2px;\n  border-radius: var(--scalar-radius);\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ParameterListItem.vue.script.js","names":[],"sources":["../../../../src/features/Operation/components/ParameterListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport {\n  ScalarMarkdown,\n  ScalarMarkdownSummary,\n  ScalarWrappingText,\n} from '@scalar/components'\nimport { ScalarIconCaretRight } from '@scalar/icons'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  ParameterObject,\n  ResponseObject,\n  SchemaObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref } from 'vue'\n\nimport { getRefName } from '@/components/Content/Schema/helpers/get-ref-name'\nimport SchemaProperty from '@/components/Content/Schema/SchemaProperty.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\n\nimport ContentTypeSelect from './ContentTypeSelect.vue'\nimport Headers from './Headers.vue'\n\nconst { name, parameter, options, collapsableItems } = defineProps<{\n  parameter: ParameterObject | ResponseObject\n  name: string\n  breadcrumb?: string[]\n  eventBus: WorkspaceEventBus | null\n  collapsableItems?: boolean\n  options: Pick<\n    OperationProps['options'],\n    'hideModels' | 'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'\n  >\n}>()\n\n/** Whether the markdown summary is being truncated */\nconst truncated = ref(false)\n\n/** Responses and params may both have a schema */\nconst schema = computed<SchemaObject | null>(() =>\n  'schema' in parameter && parameter.schema\n    ? getResolvedRef(parameter.schema)\n    : null,\n)\n\n/** Response and params may both have content */\nconst content = computed(() => {\n  if (!('content' in parameter) || !parameter.content) {\n    return null\n  }\n  const keys = Object.keys(parameter.content)\n  if (keys.length === 0) {\n    return null\n  }\n  return parameter.content\n})\n\nconst selectedContentType = ref<string>(\n  Object.keys(content.value || {})[0] ?? '',\n)\n\n/** Response headers */\nconst headers = computed<ResponseObject['headers'] | null>(() =>\n  'headers' in parameter && parameter.headers ? parameter.headers : null,\n)\n\n/** Raw schema (possibly with $ref) for the selected content type or param. */\nconst baseSchema = computed(() =>\n  content.value\n    ? content.value?.[selectedContentType.value]?.schema\n    : 'schema' in parameter && parameter.schema\n      ? parameter.schema\n      : null,\n)\n\n/** When the schema is a $ref, preserve its name so the UI can show the ref name instead of just the type. */\nconst schemaModelName = computed(() => {\n  const raw = baseSchema.value\n  if (!raw) {\n    return null\n  }\n\n  if ('$ref' in raw) {\n    return getRefName(raw.$ref)\n  }\n\n  return null\n})\n\n/** Computed value from the combined schema param and content param */\nconst value = computed(() => {\n  const base = baseSchema.value\n  const resolvedBase = content.value ? getResolvedRef(base) : schema.value\n\n  const deprecated =\n    'deprecated' in parameter ? parameter.deprecated : schema.value?.deprecated\n\n  // Convert examples to schema examples which is an array\n  const paramExamples = 'examples' in parameter ? parameter.examples : {}\n  const recordExamples = Object.values({\n    ...paramExamples,\n    ...content.value?.[selectedContentType.value]?.examples,\n  })\n\n  // Only use parameter.example as fallback if no other examples exist\n  const arrayExamples =\n    schema.value?.examples ??\n    (recordExamples.length === 0 && 'example' in parameter\n      ? [parameter.example]\n      : [])\n\n  /** Combine param examples with content ones */\n  const examples = [...recordExamples, ...arrayExamples]\n\n  return {\n    ...resolvedBase,\n    deprecated: deprecated,\n    examples,\n  } as SchemaObject\n})\n\n/**\n * Determines whether this parameter item should be rendered as a collapsible disclosure.\n * Only collapses when collapsableItems is enabled and the parameter has additional\n * content to display (content types, headers, or schema details).\n */\nconst shouldCollapse = computed<boolean>(() =>\n  Boolean(content.value || headers.value || schema.value || truncated.value),\n)\n</script>\n<template>\n  <li class=\"parameter-item group/parameter-item\">\n    <Disclosure v-slot=\"{ open }\">\n      <component\n        :is=\"shouldCollapse ? DisclosureButton : 'div'\"\n        v-if=\"collapsableItems\"\n        class=\"parameter-item-trigger\"\n        :class=\"{ 'parameter-item-trigger-open': open }\">\n        <div class=\"parameter-item-name min-w-0\">\n          <ScalarIconCaretRight\n            v-if=\"shouldCollapse\"\n            class=\"parameter-item-icon size-3 transition-transform duration-100\"\n            :class=\"{ 'rotate-90': open }\"\n            weight=\"bold\" />\n          <div>\n            <ScalarWrappingText\n              preset=\"property\"\n              :text=\"name\" />\n          </div>\n        </div>\n        <ScalarMarkdownSummary\n          v-if=\"!open && parameter.description\"\n          v-model:truncated=\"truncated\"\n          class=\"parameter-item-description-summary min-w-0 flex-1\"\n          controlled\n          :value=\"parameter.description\" />\n        <div\n          v-else\n          class=\"flex-1\" />\n      </component>\n      <div\n        v-if=\"shouldCollapse && content\"\n        class=\"absolute top-[calc(10px+0.5lh)] right-0 z-0 flex -translate-y-1/2 items-center text-base\"\n        :class=\"{\n          'opacity-0 group-focus-within/parameter-item:opacity-100 group-hover/parameter-item:opacity-100':\n            !open,\n        }\">\n        <div\n          class=\"from-b-1 absolute inset-y-0 -left-6 -z-1 w-8 bg-linear-to-l from-40% to-transparent\" />\n        <ContentTypeSelect\n          v-model=\"selectedContentType\"\n          :content=\"content\" />\n      </div>\n      <DisclosurePanel\n        class=\"parameter-item-container parameter-item-container-markdown\"\n        :static=\"!collapsableItems\">\n        <ScalarMarkdown\n          v-if=\"collapsableItems && parameter.description\"\n          class=\"parameter-item-description\"\n          :value=\"parameter.description\" />\n        <!-- Headers -->\n        <Headers\n          v-if=\"headers\"\n          :breadcrumb=\"breadcrumb\"\n          :eventBus=\"eventBus\"\n          :headers=\"headers\"\n          :orderRequiredPropertiesFirst=\"options.orderRequiredPropertiesFirst\"\n          :orderSchemaPropertiesBy=\"options.orderSchemaPropertiesBy\" />\n\n        <!-- Schema -->\n        <SchemaProperty\n          is=\"div\"\n          :breadcrumb=\"breadcrumb\"\n          compact\n          :description=\"collapsableItems ? '' : parameter.description\"\n          :eventBus=\"eventBus\"\n          :hideWriteOnly=\"true\"\n          :modelName=\"schemaModelName\"\n          :name=\"collapsableItems ? '' : name\"\n          :noncollapsible=\"true\"\n          :options=\"{\n            hideWriteOnly: true,\n            orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n            orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n          }\"\n          :required=\"'required' in parameter && parameter.required\"\n          :schema=\"value\" />\n      </DisclosurePanel>\n    </Disclosure>\n  </li>\n</template>\n\n<style scoped>\n.parameter-item {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.parameter-item:last-of-type .parameter-schema {\n  padding-bottom: 0;\n}\n\n.parameter-item-container {\n  padding: 0;\n}\n\n.parameter-item-headers {\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.parameter-item-name {\n  position: relative;\n  font-weight: var(--scalar-bold);\n  font-size: var(--scalar-font-size-4);\n  font-family: var(--scalar-font-code);\n  color: var(--scalar-color-1);\n  overflow-wrap: break-word;\n}\n\n.parameter-item-description,\n.parameter-item-description-summary {\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n}\n\n.parameter-item-description-summary.parameter-item-description-summary > * {\n  --markdown-line-height: var(--scalar-line-height-5);\n}\n\n/* Match font size of markdown for property-detail-value since first child within accordian is displayed as if it were in the markdown section */\n.parameter-item-trigger\n  ~ .parameter-item-container\n  :deep(.property--level-0 > .property-heading .property-detail-value) {\n  font-size: var(--scalar-micro);\n}\n\n.parameter-item-required-optional {\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n  margin-right: 6px;\n  position: relative;\n}\n\n.parameter-item--required {\n  text-transform: uppercase;\n  font-size: var(--scalar-micro);\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color-orange);\n}\n\n.parameter-item-description {\n  margin-top: 6px;\n  font-size: var(--scalar-small);\n  color: var(--scalar-color-2);\n  line-height: 1.4;\n}\n\n.parameter-item-description :deep(p) {\n  margin-top: 4px;\n  font-size: var(--scalar-small);\n  color: var(--scalar-color-2);\n  line-height: 1.4;\n}\n\n.parameter-schema {\n  padding-bottom: 9px;\n  margin-top: 3px;\n}\n\n.parameter-item-trigger {\n  display: flex;\n  align-items: baseline;\n  line-height: var(--scalar-line-height-5);\n  gap: 6px;\n  flex-wrap: wrap;\n  padding: 10px 0;\n  outline: none;\n}\n\n.parameter-item-trigger-open {\n  padding-bottom: 0;\n}\n\n.parameter-item-icon {\n  color: var(--scalar-color-3);\n  left: -19px;\n  top: 0.5lh;\n  translate: 0 -50%;\n  position: absolute;\n}\n\n.parameter-item-trigger:hover .parameter-item-icon,\n.parameter-item-trigger:focus-visible .parameter-item-icon {\n  color: var(--scalar-color-1);\n}\n\n.parameter-item-trigger:focus-visible .parameter-item-icon {\n  outline: 1px solid var(--scalar-color-accent);\n  outline-offset: 2px;\n  border-radius: var(--scalar-radius);\n}\n</style>\n"],"mappings":"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"}

package/dist/features/Operation/components/RequestBody.vue.d.ts

@@ -7,6 +7,7 @@ type __VLS_Props = {
     options: {
         orderRequiredPropertiesFirst: boolean | undefined;
         orderSchemaPropertiesBy: 'alpha' | 'preserve' | undefined;
+        hideModels: boolean | undefined;
     };
 };
 declare var __VLS_1: {};

package/dist/features/Operation/components/RequestBody.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequestBody.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/components/RequestBody.vue"],"names":[],"mappings":"AAsQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8DAA8D,CAAA;AAarG,KAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAClC,OAAO,EAAE;QACP,4BAA4B,EAAE,OAAO,GAAG,SAAS,CAAA;QACjD,uBAAuB,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAA;KAC1D,CAAA;CACF,CAAC;AAqUF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK7C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"RequestBody.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/components/RequestBody.vue"],"names":[],"mappings":"AAuQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8DAA8D,CAAA;AAarG,KAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAClC,OAAO,EAAE;QACP,4BAA4B,EAAE,OAAO,GAAG,SAAS,CAAA;QACjD,uBAAuB,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAA;QACzD,UAAU,EAAE,OAAO,GAAG,SAAS,CAAA;KAChC,CAAA;CACF,CAAC;AAqUF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK7C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/features/Operation/components/RequestBody.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RequestBody_vue_vue_type_script_setup_true_lang_default from "./RequestBody.vue.script.js";
 /* empty css                          */
 //#region src/features/Operation/components/RequestBody.vue
-var RequestBody_default = /* @__PURE__ */ _plugin_vue_export_helper_default(RequestBody_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f323f401"]]);
+var RequestBody_default = /* @__PURE__ */ _plugin_vue_export_helper_default(RequestBody_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a02b9001"]]);
 //#endregion
 export { RequestBody_default as default };
 

package/dist/features/Operation/components/RequestBody.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RequestBody.vue.js","names":[],"sources":["../../../../src/features/Operation/components/RequestBody.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { RequestBodyObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref } from 'vue'\n\nimport { Schema } from '@/components/Content/Schema'\nimport { isTypeObject } from '@/components/Content/Schema/helpers/is-type-object'\nimport { getModelNameFromSchema } from '@/components/Content/Schema/helpers/schema-name'\nimport {\n  reduceNamesToObject,\n  sortPropertyNames,\n} from '@/components/Content/Schema/helpers/sort-property-names'\n\nimport ContentTypeSelect from './ContentTypeSelect.vue'\n\nconst { requestBody, options } = defineProps<{\n  breadcrumb?: string[]\n  requestBody?: RequestBodyObject\n  eventBus: WorkspaceEventBus | null\n  options: {\n    orderRequiredPropertiesFirst: boolean | undefined\n    orderSchemaPropertiesBy: 'alpha' | 'preserve' | undefined\n  }\n}>()\n\n/**\n * The maximum number of properties to show in the request body schema.\n */\nconst MAX_VISIBLE_PROPERTIES = 12\n\nconst availableContentTypes = computed(() =>\n  Object.keys(requestBody?.content ?? {}),\n)\n\nconst selectedContentType = ref<string>('application/json')\n\nif (requestBody?.content) {\n  if (availableContentTypes.value[0]) {\n    selectedContentType.value = availableContentTypes.value[0]\n  }\n}\n\n/** Raw schema (possibly with $ref) for the selected content type */\nconst rawSchema = computed(\n  () => requestBody?.content?.[selectedContentType.value]?.schema,\n)\n\nconst schema = computed(() => getResolvedRef(rawSchema.value))\n\n/** When the schema is a $ref, preserve its name so the UI can show the ref name instead of just the type. */\nconst schemaModelName = computed(\n  () => (rawSchema.value && getModelNameFromSchema(rawSchema.value)) ?? null,\n)\n\n/**\n * Splits schema properties into visible and collapsed sections when there are more than 12 properties.\n * Returns null for schemas with fewer properties or non-object schemas.\n */\nconst partitionedSchema = computed(() => {\n  // Early return if not an object schema\n  if (!schema.value || !isTypeObject(schema.value)) {\n    return null\n  }\n\n  // Lets sort the names first\n  const sortedNames = sortPropertyNames(\n    schema.value,\n    schema.value.discriminator,\n    {\n      hideReadOnly: true,\n      orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n      orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n    },\n  )\n\n  if (sortedNames.length <= MAX_VISIBLE_PROPERTIES) {\n    return null\n  }\n\n  // Destructure everything except properties\n  const { properties, ...schemaMetadata } = schema.value\n  if (!properties) {\n    return null\n  }\n\n  return {\n    visibleProperties: {\n      ...schemaMetadata,\n      properties: reduceNamesToObject(\n        sortedNames.slice(0, MAX_VISIBLE_PROPERTIES),\n        properties,\n      ),\n    },\n    collapsedProperties: {\n      ...schemaMetadata,\n      properties: reduceNamesToObject(\n        sortedNames.slice(MAX_VISIBLE_PROPERTIES),\n        properties,\n      ),\n    },\n  }\n})\n\n/**\n * We don't want to render the request body if its completely empty\n * @example\n * {\n *   \"content\": {},\n * }\n */\nconst shouldRenderRequestBody = computed(\n  () =>\n    Object.keys(requestBody?.content ?? {}).length > 0 ||\n    requestBody?.description ||\n    requestBody?.required,\n)\n</script>\n<template>\n  <div\n    v-if=\"requestBody && shouldRenderRequestBody\"\n    aria-label=\"Request Body\"\n    class=\"request-body\"\n    role=\"group\">\n    <div class=\"request-body-header\">\n      <div class=\"request-body-title\">\n        <slot name=\"title\" />\n        <span\n          v-if=\"schemaModelName\"\n          class=\"text-c-2 text-xs leading-none font-normal\"\n          data-testid=\"request-body-schema-name\">\n          <span class=\"text-c-3 mx-1.5\">·</span>{{ schemaModelName }}\n        </span>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <div\n          v-if=\"requestBody.required\"\n          class=\"request-body-required\">\n          required\n        </div>\n        <ContentTypeSelect\n          v-model=\"selectedContentType\"\n          :content=\"requestBody.content\" />\n      </div>\n      <div\n        v-if=\"requestBody.description\"\n        class=\"request-body-description\">\n        <ScalarMarkdown :value=\"requestBody.description\" />\n      </div>\n    </div>\n\n    <!-- For over 12 properties we want to show 12 and collapse the rest -->\n    <div\n      v-if=\"partitionedSchema\"\n      class=\"request-body-schema\">\n      <Schema\n        :breadcrumb\n        compact\n        :compositionPath=\"['requestBody']\"\n        :eventBus=\"eventBus\"\n        name=\"Request Body\"\n        noncollapsible\n        :options=\"{\n          hideReadOnly: true,\n          orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n          orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n        }\"\n        :schema=\"partitionedSchema.visibleProperties\"\n        schemaContext=\"requestBody\" />\n\n      <Schema\n        additionalProperties\n        :breadcrumb\n        compact\n        :compositionPath=\"['requestBody']\"\n        :eventBus=\"eventBus\"\n        name=\"Request Body\"\n        :options=\"{\n          hideReadOnly: true,\n          orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n          orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n        }\"\n        :schema=\"partitionedSchema.collapsedProperties\"\n        schemaContext=\"requestBody\" />\n    </div>\n\n    <!-- Show em all 12 and under -->\n    <div\n      v-else-if=\"schema\"\n      class=\"request-body-schema\">\n      <Schema\n        :breadcrumb\n        compact\n        :compositionPath=\"['requestBody']\"\n        :eventBus=\"eventBus\"\n        :hideReadOnly=\"true\"\n        name=\"Request Body\"\n        noncollapsible\n        :options=\"{\n          hideReadOnly: true,\n          orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n          orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n        }\"\n        :schema=\"schema\"\n        schemaContext=\"requestBody\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.request-body {\n  margin-top: 24px;\n}\n.request-body-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 12px;\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n  flex-flow: wrap;\n}\n.request-body-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--scalar-font-size-2);\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color-1);\n}\n.request-body-required {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-orange);\n  font-weight: normal;\n  border-radius: 16px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  padding: 2px 8px;\n  height: 20px;\n}\n.request-body-description {\n  margin-top: 6px;\n  font-size: var(--scalar-small);\n  width: 100%;\n}\n\n.request-body-header\n  + .request-body-schema:has(> .schema-card > .schema-card-description),\n.request-body-header\n  + .request-body-schema:has(\n    > .schema-card > .schema-properties > * > .property--level-0\n  ) {\n  /** Add a bit of space between the heading border and the schema description or properties */\n  padding-top: 8px;\n}\n.request-body-description :deep(.markdown) * {\n  color: var(--scalar-color-2) !important;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"RequestBody.vue.js","names":[],"sources":["../../../../src/features/Operation/components/RequestBody.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { RequestBodyObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref } from 'vue'\n\nimport { Schema } from '@/components/Content/Schema'\nimport { isTypeObject } from '@/components/Content/Schema/helpers/is-type-object'\nimport { getModelNameFromSchema } from '@/components/Content/Schema/helpers/schema-name'\nimport {\n  reduceNamesToObject,\n  sortPropertyNames,\n} from '@/components/Content/Schema/helpers/sort-property-names'\n\nimport ContentTypeSelect from './ContentTypeSelect.vue'\n\nconst { requestBody, options } = defineProps<{\n  breadcrumb?: string[]\n  requestBody?: RequestBodyObject\n  eventBus: WorkspaceEventBus | null\n  options: {\n    orderRequiredPropertiesFirst: boolean | undefined\n    orderSchemaPropertiesBy: 'alpha' | 'preserve' | undefined\n    hideModels: boolean | undefined\n  }\n}>()\n\n/**\n * The maximum number of properties to show in the request body schema.\n */\nconst MAX_VISIBLE_PROPERTIES = 12\n\nconst availableContentTypes = computed(() =>\n  Object.keys(requestBody?.content ?? {}),\n)\n\nconst selectedContentType = ref<string>('application/json')\n\nif (requestBody?.content) {\n  if (availableContentTypes.value[0]) {\n    selectedContentType.value = availableContentTypes.value[0]\n  }\n}\n\n/** Raw schema (possibly with $ref) for the selected content type */\nconst rawSchema = computed(\n  () => requestBody?.content?.[selectedContentType.value]?.schema,\n)\n\nconst schema = computed(() => getResolvedRef(rawSchema.value))\n\n/** When the schema is a $ref, preserve its name so the UI can show the ref name instead of just the type. */\nconst schemaModelName = computed(\n  () => (rawSchema.value && getModelNameFromSchema(rawSchema.value)) ?? null,\n)\n\n/**\n * Splits schema properties into visible and collapsed sections when there are more than 12 properties.\n * Returns null for schemas with fewer properties or non-object schemas.\n */\nconst partitionedSchema = computed(() => {\n  // Early return if not an object schema\n  if (!schema.value || !isTypeObject(schema.value)) {\n    return null\n  }\n\n  // Lets sort the names first\n  const sortedNames = sortPropertyNames(\n    schema.value,\n    schema.value.discriminator,\n    {\n      hideReadOnly: true,\n      orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n      orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n    },\n  )\n\n  if (sortedNames.length <= MAX_VISIBLE_PROPERTIES) {\n    return null\n  }\n\n  // Destructure everything except properties\n  const { properties, ...schemaMetadata } = schema.value\n  if (!properties) {\n    return null\n  }\n\n  return {\n    visibleProperties: {\n      ...schemaMetadata,\n      properties: reduceNamesToObject(\n        sortedNames.slice(0, MAX_VISIBLE_PROPERTIES),\n        properties,\n      ),\n    },\n    collapsedProperties: {\n      ...schemaMetadata,\n      properties: reduceNamesToObject(\n        sortedNames.slice(MAX_VISIBLE_PROPERTIES),\n        properties,\n      ),\n    },\n  }\n})\n\n/**\n * We don't want to render the request body if its completely empty\n * @example\n * {\n *   \"content\": {},\n * }\n */\nconst shouldRenderRequestBody = computed(\n  () =>\n    Object.keys(requestBody?.content ?? {}).length > 0 ||\n    requestBody?.description ||\n    requestBody?.required,\n)\n</script>\n<template>\n  <div\n    v-if=\"requestBody && shouldRenderRequestBody\"\n    aria-label=\"Request Body\"\n    class=\"request-body\"\n    role=\"group\">\n    <div class=\"request-body-header\">\n      <div class=\"request-body-title\">\n        <slot name=\"title\" />\n        <span\n          v-if=\"schemaModelName\"\n          class=\"text-c-2 text-xs leading-none font-normal\"\n          data-testid=\"request-body-schema-name\">\n          <span class=\"text-c-3 mx-1.5\">·</span>{{ schemaModelName }}\n        </span>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <div\n          v-if=\"requestBody.required\"\n          class=\"request-body-required\">\n          required\n        </div>\n        <ContentTypeSelect\n          v-model=\"selectedContentType\"\n          :content=\"requestBody.content\" />\n      </div>\n      <div\n        v-if=\"requestBody.description\"\n        class=\"request-body-description\">\n        <ScalarMarkdown :value=\"requestBody.description\" />\n      </div>\n    </div>\n\n    <!-- For over 12 properties we want to show 12 and collapse the rest -->\n    <div\n      v-if=\"partitionedSchema\"\n      class=\"request-body-schema\">\n      <Schema\n        :breadcrumb\n        compact\n        :compositionPath=\"['requestBody']\"\n        :eventBus=\"eventBus\"\n        name=\"Request Body\"\n        noncollapsible\n        :options=\"{\n          hideReadOnly: true,\n          orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n          orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n        }\"\n        :schema=\"partitionedSchema.visibleProperties\"\n        schemaContext=\"requestBody\" />\n\n      <Schema\n        additionalProperties\n        :breadcrumb\n        compact\n        :compositionPath=\"['requestBody']\"\n        :eventBus=\"eventBus\"\n        name=\"Request Body\"\n        :options=\"{\n          hideReadOnly: true,\n          orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n          orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n        }\"\n        :schema=\"partitionedSchema.collapsedProperties\"\n        schemaContext=\"requestBody\" />\n    </div>\n\n    <!-- Show em all 12 and under -->\n    <div\n      v-else-if=\"schema\"\n      class=\"request-body-schema\">\n      <Schema\n        :breadcrumb\n        compact\n        :compositionPath=\"['requestBody']\"\n        :eventBus=\"eventBus\"\n        :hideReadOnly=\"true\"\n        name=\"Request Body\"\n        noncollapsible\n        :options=\"{\n          hideReadOnly: true,\n          orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n          orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n        }\"\n        :schema=\"schema\"\n        schemaContext=\"requestBody\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.request-body {\n  margin-top: 24px;\n}\n.request-body-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 12px;\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n  flex-flow: wrap;\n}\n.request-body-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--scalar-font-size-2);\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color-1);\n}\n.request-body-required {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-orange);\n  font-weight: normal;\n  border-radius: 16px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  padding: 2px 8px;\n  height: 20px;\n}\n.request-body-description {\n  margin-top: 6px;\n  font-size: var(--scalar-small);\n  width: 100%;\n}\n\n.request-body-header\n  + .request-body-schema:has(> .schema-card > .schema-card-description),\n.request-body-header\n  + .request-body-schema:has(\n    > .schema-card > .schema-properties > * > .property--level-0\n  ) {\n  /** Add a bit of space between the heading border and the schema description or properties */\n  padding-top: 8px;\n}\n.request-body-description :deep(.markdown) * {\n  color: var(--scalar-color-2) !important;\n}\n</style>\n"],"mappings":""}

package/dist/features/Operation/components/RequestBody.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"RequestBody.vue.script.js","names":[],"sources":["../../../../src/features/Operation/components/RequestBody.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { RequestBodyObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref } from 'vue'\n\nimport { Schema } from '@/components/Content/Schema'\nimport { isTypeObject } from '@/components/Content/Schema/helpers/is-type-object'\nimport { getModelNameFromSchema } from '@/components/Content/Schema/helpers/schema-name'\nimport {\n  reduceNamesToObject,\n  sortPropertyNames,\n} from '@/components/Content/Schema/helpers/sort-property-names'\n\nimport ContentTypeSelect from './ContentTypeSelect.vue'\n\nconst { requestBody, options } = defineProps<{\n  breadcrumb?: string[]\n  requestBody?: RequestBodyObject\n  eventBus: WorkspaceEventBus | null\n  options: {\n    orderRequiredPropertiesFirst: boolean | undefined\n    orderSchemaPropertiesBy: 'alpha' | 'preserve' | undefined\n  }\n}>()\n\n/**\n * The maximum number of properties to show in the request body schema.\n */\nconst MAX_VISIBLE_PROPERTIES = 12\n\nconst availableContentTypes = computed(() =>\n  Object.keys(requestBody?.content ?? {}),\n)\n\nconst selectedContentType = ref<string>('application/json')\n\nif (requestBody?.content) {\n  if (availableContentTypes.value[0]) {\n    selectedContentType.value = availableContentTypes.value[0]\n  }\n}\n\n/** Raw schema (possibly with $ref) for the selected content type */\nconst rawSchema = computed(\n  () => requestBody?.content?.[selectedContentType.value]?.schema,\n)\n\nconst schema = computed(() => getResolvedRef(rawSchema.value))\n\n/** When the schema is a $ref, preserve its name so the UI can show the ref name instead of just the type. */\nconst schemaModelName = computed(\n  () => (rawSchema.value && getModelNameFromSchema(rawSchema.value)) ?? null,\n)\n\n/**\n * Splits schema properties into visible and collapsed sections when there are more than 12 properties.\n * Returns null for schemas with fewer properties or non-object schemas.\n */\nconst partitionedSchema = computed(() => {\n  // Early return if not an object schema\n  if (!schema.value || !isTypeObject(schema.value)) {\n    return null\n  }\n\n  // Lets sort the names first\n  const sortedNames = sortPropertyNames(\n    schema.value,\n    schema.value.discriminator,\n    {\n      hideReadOnly: true,\n      orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n      orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n    },\n  )\n\n  if (sortedNames.length <= MAX_VISIBLE_PROPERTIES) {\n    return null\n  }\n\n  // Destructure everything except properties\n  const { properties, ...schemaMetadata } = schema.value\n  if (!properties) {\n    return null\n  }\n\n  return {\n    visibleProperties: {\n      ...schemaMetadata,\n      properties: reduceNamesToObject(\n        sortedNames.slice(0, MAX_VISIBLE_PROPERTIES),\n        properties,\n      ),\n    },\n    collapsedProperties: {\n      ...schemaMetadata,\n      properties: reduceNamesToObject(\n        sortedNames.slice(MAX_VISIBLE_PROPERTIES),\n        properties,\n      ),\n    },\n  }\n})\n\n/**\n * We don't want to render the request body if its completely empty\n * @example\n * {\n *   \"content\": {},\n * }\n */\nconst shouldRenderRequestBody = computed(\n  () =>\n    Object.keys(requestBody?.content ?? {}).length > 0 ||\n    requestBody?.description ||\n    requestBody?.required,\n)\n</script>\n<template>\n  <div\n    v-if=\"requestBody && shouldRenderRequestBody\"\n    aria-label=\"Request Body\"\n    class=\"request-body\"\n    role=\"group\">\n    <div class=\"request-body-header\">\n      <div class=\"request-body-title\">\n        <slot name=\"title\" />\n        <span\n          v-if=\"schemaModelName\"\n          class=\"text-c-2 text-xs leading-none font-normal\"\n          data-testid=\"request-body-schema-name\">\n          <span class=\"text-c-3 mx-1.5\">·</span>{{ schemaModelName }}\n        </span>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <div\n          v-if=\"requestBody.required\"\n          class=\"request-body-required\">\n          required\n        </div>\n        <ContentTypeSelect\n          v-model=\"selectedContentType\"\n          :content=\"requestBody.content\" />\n      </div>\n      <div\n        v-if=\"requestBody.description\"\n        class=\"request-body-description\">\n        <ScalarMarkdown :value=\"requestBody.description\" />\n      </div>\n    </div>\n\n    <!-- For over 12 properties we want to show 12 and collapse the rest -->\n    <div\n      v-if=\"partitionedSchema\"\n      class=\"request-body-schema\">\n      <Schema\n        :breadcrumb\n        compact\n        :compositionPath=\"['requestBody']\"\n        :eventBus=\"eventBus\"\n        name=\"Request Body\"\n        noncollapsible\n        :options=\"{\n          hideReadOnly: true,\n          orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n          orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n        }\"\n        :schema=\"partitionedSchema.visibleProperties\"\n        schemaContext=\"requestBody\" />\n\n      <Schema\n        additionalProperties\n        :breadcrumb\n        compact\n        :compositionPath=\"['requestBody']\"\n        :eventBus=\"eventBus\"\n        name=\"Request Body\"\n        :options=\"{\n          hideReadOnly: true,\n          orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n          orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n        }\"\n        :schema=\"partitionedSchema.collapsedProperties\"\n        schemaContext=\"requestBody\" />\n    </div>\n\n    <!-- Show em all 12 and under -->\n    <div\n      v-else-if=\"schema\"\n      class=\"request-body-schema\">\n      <Schema\n        :breadcrumb\n        compact\n        :compositionPath=\"['requestBody']\"\n        :eventBus=\"eventBus\"\n        :hideReadOnly=\"true\"\n        name=\"Request Body\"\n        noncollapsible\n        :options=\"{\n          hideReadOnly: true,\n          orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n          orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n        }\"\n        :schema=\"schema\"\n        schemaContext=\"requestBody\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.request-body {\n  margin-top: 24px;\n}\n.request-body-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 12px;\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n  flex-flow: wrap;\n}\n.request-body-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--scalar-font-size-2);\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color-1);\n}\n.request-body-required {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-orange);\n  font-weight: normal;\n  border-radius: 16px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  padding: 2px 8px;\n  height: 20px;\n}\n.request-body-description {\n  margin-top: 6px;\n  font-size: var(--scalar-small);\n  width: 100%;\n}\n\n.request-body-header\n  + .request-body-schema:has(> .schema-card > .schema-card-description),\n.request-body-header\n  + .request-body-schema:has(\n    > .schema-card > .schema-properties > * > .property--level-0\n  ) {\n  /** Add a bit of space between the heading border and the schema description or properties */\n  padding-top: 8px;\n}\n.request-body-description :deep(.markdown) * {\n  color: var(--scalar-color-2) !important;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"RequestBody.vue.script.js","names":[],"sources":["../../../../src/features/Operation/components/RequestBody.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { RequestBodyObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref } from 'vue'\n\nimport { Schema } from '@/components/Content/Schema'\nimport { isTypeObject } from '@/components/Content/Schema/helpers/is-type-object'\nimport { getModelNameFromSchema } from '@/components/Content/Schema/helpers/schema-name'\nimport {\n  reduceNamesToObject,\n  sortPropertyNames,\n} from '@/components/Content/Schema/helpers/sort-property-names'\n\nimport ContentTypeSelect from './ContentTypeSelect.vue'\n\nconst { requestBody, options } = defineProps<{\n  breadcrumb?: string[]\n  requestBody?: RequestBodyObject\n  eventBus: WorkspaceEventBus | null\n  options: {\n    orderRequiredPropertiesFirst: boolean | undefined\n    orderSchemaPropertiesBy: 'alpha' | 'preserve' | undefined\n    hideModels: boolean | undefined\n  }\n}>()\n\n/**\n * The maximum number of properties to show in the request body schema.\n */\nconst MAX_VISIBLE_PROPERTIES = 12\n\nconst availableContentTypes = computed(() =>\n  Object.keys(requestBody?.content ?? {}),\n)\n\nconst selectedContentType = ref<string>('application/json')\n\nif (requestBody?.content) {\n  if (availableContentTypes.value[0]) {\n    selectedContentType.value = availableContentTypes.value[0]\n  }\n}\n\n/** Raw schema (possibly with $ref) for the selected content type */\nconst rawSchema = computed(\n  () => requestBody?.content?.[selectedContentType.value]?.schema,\n)\n\nconst schema = computed(() => getResolvedRef(rawSchema.value))\n\n/** When the schema is a $ref, preserve its name so the UI can show the ref name instead of just the type. */\nconst schemaModelName = computed(\n  () => (rawSchema.value && getModelNameFromSchema(rawSchema.value)) ?? null,\n)\n\n/**\n * Splits schema properties into visible and collapsed sections when there are more than 12 properties.\n * Returns null for schemas with fewer properties or non-object schemas.\n */\nconst partitionedSchema = computed(() => {\n  // Early return if not an object schema\n  if (!schema.value || !isTypeObject(schema.value)) {\n    return null\n  }\n\n  // Lets sort the names first\n  const sortedNames = sortPropertyNames(\n    schema.value,\n    schema.value.discriminator,\n    {\n      hideReadOnly: true,\n      orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n      orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n    },\n  )\n\n  if (sortedNames.length <= MAX_VISIBLE_PROPERTIES) {\n    return null\n  }\n\n  // Destructure everything except properties\n  const { properties, ...schemaMetadata } = schema.value\n  if (!properties) {\n    return null\n  }\n\n  return {\n    visibleProperties: {\n      ...schemaMetadata,\n      properties: reduceNamesToObject(\n        sortedNames.slice(0, MAX_VISIBLE_PROPERTIES),\n        properties,\n      ),\n    },\n    collapsedProperties: {\n      ...schemaMetadata,\n      properties: reduceNamesToObject(\n        sortedNames.slice(MAX_VISIBLE_PROPERTIES),\n        properties,\n      ),\n    },\n  }\n})\n\n/**\n * We don't want to render the request body if its completely empty\n * @example\n * {\n *   \"content\": {},\n * }\n */\nconst shouldRenderRequestBody = computed(\n  () =>\n    Object.keys(requestBody?.content ?? {}).length > 0 ||\n    requestBody?.description ||\n    requestBody?.required,\n)\n</script>\n<template>\n  <div\n    v-if=\"requestBody && shouldRenderRequestBody\"\n    aria-label=\"Request Body\"\n    class=\"request-body\"\n    role=\"group\">\n    <div class=\"request-body-header\">\n      <div class=\"request-body-title\">\n        <slot name=\"title\" />\n        <span\n          v-if=\"schemaModelName\"\n          class=\"text-c-2 text-xs leading-none font-normal\"\n          data-testid=\"request-body-schema-name\">\n          <span class=\"text-c-3 mx-1.5\">·</span>{{ schemaModelName }}\n        </span>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <div\n          v-if=\"requestBody.required\"\n          class=\"request-body-required\">\n          required\n        </div>\n        <ContentTypeSelect\n          v-model=\"selectedContentType\"\n          :content=\"requestBody.content\" />\n      </div>\n      <div\n        v-if=\"requestBody.description\"\n        class=\"request-body-description\">\n        <ScalarMarkdown :value=\"requestBody.description\" />\n      </div>\n    </div>\n\n    <!-- For over 12 properties we want to show 12 and collapse the rest -->\n    <div\n      v-if=\"partitionedSchema\"\n      class=\"request-body-schema\">\n      <Schema\n        :breadcrumb\n        compact\n        :compositionPath=\"['requestBody']\"\n        :eventBus=\"eventBus\"\n        name=\"Request Body\"\n        noncollapsible\n        :options=\"{\n          hideReadOnly: true,\n          orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n          orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n        }\"\n        :schema=\"partitionedSchema.visibleProperties\"\n        schemaContext=\"requestBody\" />\n\n      <Schema\n        additionalProperties\n        :breadcrumb\n        compact\n        :compositionPath=\"['requestBody']\"\n        :eventBus=\"eventBus\"\n        name=\"Request Body\"\n        :options=\"{\n          hideReadOnly: true,\n          orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n          orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n        }\"\n        :schema=\"partitionedSchema.collapsedProperties\"\n        schemaContext=\"requestBody\" />\n    </div>\n\n    <!-- Show em all 12 and under -->\n    <div\n      v-else-if=\"schema\"\n      class=\"request-body-schema\">\n      <Schema\n        :breadcrumb\n        compact\n        :compositionPath=\"['requestBody']\"\n        :eventBus=\"eventBus\"\n        :hideReadOnly=\"true\"\n        name=\"Request Body\"\n        noncollapsible\n        :options=\"{\n          hideReadOnly: true,\n          orderRequiredPropertiesFirst: options.orderRequiredPropertiesFirst,\n          orderSchemaPropertiesBy: options.orderSchemaPropertiesBy,\n        }\"\n        :schema=\"schema\"\n        schemaContext=\"requestBody\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.request-body {\n  margin-top: 24px;\n}\n.request-body-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 12px;\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n  flex-flow: wrap;\n}\n.request-body-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--scalar-font-size-2);\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color-1);\n}\n.request-body-required {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-orange);\n  font-weight: normal;\n  border-radius: 16px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  padding: 2px 8px;\n  height: 20px;\n}\n.request-body-description {\n  margin-top: 6px;\n  font-size: var(--scalar-small);\n  width: 100%;\n}\n\n.request-body-header\n  + .request-body-schema:has(> .schema-card > .schema-card-description),\n.request-body-header\n  + .request-body-schema:has(\n    > .schema-card > .schema-properties > * > .property--level-0\n  ) {\n  /** Add a bit of space between the heading border and the schema description or properties */\n  padding-top: 8px;\n}\n.request-body-description :deep(.markdown) * {\n  color: var(--scalar-color-2) !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/features/Operation/components/callbacks/Callback.vue.d.ts

@@ -8,7 +8,7 @@ type __VLS_Props = {
     name: string;
     url: string;
     eventBus: WorkspaceEventBus | null;
-    options: Pick<OperationProps['options'], 'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'>;
+    options: Pick<OperationProps['options'], 'hideModels' | 'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'>;
 };
 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/features/Operation/components/callbacks/Callback.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callback.vue.d.ts","sourceRoot":"","sources":["../../../../../src/features/Operation/components/callbacks/Callback.vue"],"names":[],"mappings":"AA4HA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAErF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,8DAA8D,CAAA;AAKnG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAExE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,eAAe,CAAA;IACzB,MAAM,EAAE,cAAc,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAClC,OAAO,EAAE,IAAI,CACX,cAAc,CAAC,SAAS,CAAC,EACzB,8BAA8B,GAAG,yBAAyB,CAC3D,CAAA;CACF,CAAC;AA8KF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Callback.vue.d.ts","sourceRoot":"","sources":["../../../../../src/features/Operation/components/callbacks/Callback.vue"],"names":[],"mappings":"AA4HA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAErF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,8DAA8D,CAAA;AAKnG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAExE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,eAAe,CAAA;IACzB,MAAM,EAAE,cAAc,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAClC,OAAO,EAAE,IAAI,CACX,cAAc,CAAC,SAAS,CAAC,EACzB,YAAY,GAAG,8BAA8B,GAAG,yBAAyB,CAC1E,CAAA;CACF,CAAC;AA8KF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/Operation/components/callbacks/Callback.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import Callback_vue_vue_type_script_setup_true_lang_default from "./Callback.vue.script.js";
 /* empty css                       */
 //#region src/features/Operation/components/callbacks/Callback.vue
-var Callback_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Callback_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-df994c31"]]);
+var Callback_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Callback_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-12fe1373"]]);
 //#endregion
 export { Callback_default as default };
 

package/dist/features/Operation/components/callbacks/Callback.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callback.vue.js","names":[],"sources":["../../../../../src/features/Operation/components/callbacks/Callback.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconCaretRight } from '@scalar/icons'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { type OperationObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\n\nconst { method, name, url, options } = defineProps<{\n  callback: OperationObject\n  method: HttpMethodType\n  name: string\n  url: string\n  eventBus: WorkspaceEventBus | null\n  options: Pick<\n    OperationProps['options'],\n    'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'\n  >\n}>()\n</script>\n\n<template>\n  <details class=\"group callback-list-item\">\n    <!-- Title -->\n    <summary\n      class=\"font-code bg-b-1 callback-sticky-offset callback-list-item-title sticky flex cursor-pointer flex-row items-start gap-2 border-t py-2.5 text-sm group-open:flex-wrap\">\n      <ScalarIconCaretRight\n        class=\"callback-list-item-icon text-c-3 group-hover:text-c-1 absolute top-3.5 -left-5 size-3 transition-transform duration-100 group-open:rotate-90\"\n        weight=\"bold\" />\n      <HttpMethod\n        as=\"span\"\n        class=\"request-method py-0.75 font-bold\"\n        :method=\"method\" />\n      <div\n        class=\"text-c-1 min-w-0 flex-1 truncate text-sm leading-5 font-bold group-open:whitespace-normal\">\n        {{ name }}\n        <span class=\"text-c-2 font-normal\">\n          {{ url }}\n        </span>\n      </div>\n    </summary>\n\n    <!-- Body -->\n    <div class=\"callback-operation-container flex flex-col gap-2\">\n      <OperationParameters\n        :eventBus=\"eventBus\"\n        :options=\"options\"\n        :parameters=\"\n          callback.parameters?.map((param) => getResolvedRef(param)) ?? []\n        \"\n        :requestBody=\"getResolvedRef(callback.requestBody)\" />\n\n      <!-- Responses -->\n      <OperationResponses\n        :collapsableItems=\"false\"\n        :eventBus\n        :options\n        :responses=\"callback.responses\" />\n    </div>\n  </details>\n</template>\n<style scoped>\n.callback-sticky-offset {\n  top: var(--refs-viewport-offset, 0px);\n  z-index: 1;\n}\n.callback-operation-container :deep(.request-body),\n.callback-operation-container :deep(.request-body-description),\n.callback-operation-container :deep(.request-body-header) {\n  margin-top: 0;\n}\n.callback-operation-container :deep(.request-body-header) {\n  --scalar-font-size-2: var(--scalar-font-size-4);\n  padding: 10px;\n  border-bottom: none;\n  border: 0.5px solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg) var(--scalar-radius-lg) 0 0;\n  background: color-mix(in srgb, var(--scalar-background-2) 50%, transparent);\n}\n.callback-operation-container\n  :deep(.request-body-schema > .schema-card > .schema-card-description) {\n  padding-inline: 8px;\n}\n.callback-operation-container :deep(ul li.property.property--level-1) {\n  padding: 10px;\n}\n.callback-operation-container :deep(.request-body-schema) {\n  background-color: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top: none;\n  overflow: hidden;\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.callback-operation-container :deep(.parameter-list) {\n  margin-top: 0;\n}\n.callback-operation-container :deep(.parameter-list-title) {\n  background: color-mix(in srgb, var(--scalar-background-2) 50%, transparent);\n  border-radius: var(--scalar-radius-lg) var(--scalar-radius-lg) 0 0;\n  padding: 10px;\n  margin-bottom: 0;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom: none;\n  --scalar-font-size-2: var(--scalar-font-size-4);\n}\n.callback-operation-container :deep(.parameter-list-items) {\n  /* background: pink; */\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.callback-operation-container :deep(.parameter-list-items > li:first-of-type) {\n  border-top: none;\n}\n.callback-operation-container :deep(.parameter-list-items > li) {\n  padding: 0 8px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"Callback.vue.js","names":[],"sources":["../../../../../src/features/Operation/components/callbacks/Callback.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconCaretRight } from '@scalar/icons'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { type OperationObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\n\nconst { method, name, url, options } = defineProps<{\n  callback: OperationObject\n  method: HttpMethodType\n  name: string\n  url: string\n  eventBus: WorkspaceEventBus | null\n  options: Pick<\n    OperationProps['options'],\n    'hideModels' | 'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'\n  >\n}>()\n</script>\n\n<template>\n  <details class=\"group callback-list-item\">\n    <!-- Title -->\n    <summary\n      class=\"font-code bg-b-1 callback-sticky-offset callback-list-item-title sticky flex cursor-pointer flex-row items-start gap-2 border-t py-2.5 text-sm group-open:flex-wrap\">\n      <ScalarIconCaretRight\n        class=\"callback-list-item-icon text-c-3 group-hover:text-c-1 absolute top-3.5 -left-5 size-3 transition-transform duration-100 group-open:rotate-90\"\n        weight=\"bold\" />\n      <HttpMethod\n        as=\"span\"\n        class=\"request-method py-0.75 font-bold\"\n        :method=\"method\" />\n      <div\n        class=\"text-c-1 min-w-0 flex-1 truncate text-sm leading-5 font-bold group-open:whitespace-normal\">\n        {{ name }}\n        <span class=\"text-c-2 font-normal\">\n          {{ url }}\n        </span>\n      </div>\n    </summary>\n\n    <!-- Body -->\n    <div class=\"callback-operation-container flex flex-col gap-2\">\n      <OperationParameters\n        :eventBus=\"eventBus\"\n        :options=\"options\"\n        :parameters=\"\n          callback.parameters?.map((param) => getResolvedRef(param)) ?? []\n        \"\n        :requestBody=\"getResolvedRef(callback.requestBody)\" />\n\n      <!-- Responses -->\n      <OperationResponses\n        :collapsableItems=\"false\"\n        :eventBus\n        :options\n        :responses=\"callback.responses\" />\n    </div>\n  </details>\n</template>\n<style scoped>\n.callback-sticky-offset {\n  top: var(--refs-viewport-offset, 0px);\n  z-index: 1;\n}\n.callback-operation-container :deep(.request-body),\n.callback-operation-container :deep(.request-body-description),\n.callback-operation-container :deep(.request-body-header) {\n  margin-top: 0;\n}\n.callback-operation-container :deep(.request-body-header) {\n  --scalar-font-size-2: var(--scalar-font-size-4);\n  padding: 10px;\n  border-bottom: none;\n  border: 0.5px solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg) var(--scalar-radius-lg) 0 0;\n  background: color-mix(in srgb, var(--scalar-background-2) 50%, transparent);\n}\n.callback-operation-container\n  :deep(.request-body-schema > .schema-card > .schema-card-description) {\n  padding-inline: 8px;\n}\n.callback-operation-container :deep(ul li.property.property--level-1) {\n  padding: 10px;\n}\n.callback-operation-container :deep(.request-body-schema) {\n  background-color: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top: none;\n  overflow: hidden;\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.callback-operation-container :deep(.parameter-list) {\n  margin-top: 0;\n}\n.callback-operation-container :deep(.parameter-list-title) {\n  background: color-mix(in srgb, var(--scalar-background-2) 50%, transparent);\n  border-radius: var(--scalar-radius-lg) var(--scalar-radius-lg) 0 0;\n  padding: 10px;\n  margin-bottom: 0;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom: none;\n  --scalar-font-size-2: var(--scalar-font-size-4);\n}\n.callback-operation-container :deep(.parameter-list-items) {\n  /* background: pink; */\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.callback-operation-container :deep(.parameter-list-items > li:first-of-type) {\n  border-top: none;\n}\n.callback-operation-container :deep(.parameter-list-items > li) {\n  padding: 0 8px;\n}\n</style>\n"],"mappings":""}

package/dist/features/Operation/components/callbacks/Callback.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callback.vue.script.js","names":[],"sources":["../../../../../src/features/Operation/components/callbacks/Callback.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconCaretRight } from '@scalar/icons'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { type OperationObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\n\nconst { method, name, url, options } = defineProps<{\n  callback: OperationObject\n  method: HttpMethodType\n  name: string\n  url: string\n  eventBus: WorkspaceEventBus | null\n  options: Pick<\n    OperationProps['options'],\n    'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'\n  >\n}>()\n</script>\n\n<template>\n  <details class=\"group callback-list-item\">\n    <!-- Title -->\n    <summary\n      class=\"font-code bg-b-1 callback-sticky-offset callback-list-item-title sticky flex cursor-pointer flex-row items-start gap-2 border-t py-2.5 text-sm group-open:flex-wrap\">\n      <ScalarIconCaretRight\n        class=\"callback-list-item-icon text-c-3 group-hover:text-c-1 absolute top-3.5 -left-5 size-3 transition-transform duration-100 group-open:rotate-90\"\n        weight=\"bold\" />\n      <HttpMethod\n        as=\"span\"\n        class=\"request-method py-0.75 font-bold\"\n        :method=\"method\" />\n      <div\n        class=\"text-c-1 min-w-0 flex-1 truncate text-sm leading-5 font-bold group-open:whitespace-normal\">\n        {{ name }}\n        <span class=\"text-c-2 font-normal\">\n          {{ url }}\n        </span>\n      </div>\n    </summary>\n\n    <!-- Body -->\n    <div class=\"callback-operation-container flex flex-col gap-2\">\n      <OperationParameters\n        :eventBus=\"eventBus\"\n        :options=\"options\"\n        :parameters=\"\n          callback.parameters?.map((param) => getResolvedRef(param)) ?? []\n        \"\n        :requestBody=\"getResolvedRef(callback.requestBody)\" />\n\n      <!-- Responses -->\n      <OperationResponses\n        :collapsableItems=\"false\"\n        :eventBus\n        :options\n        :responses=\"callback.responses\" />\n    </div>\n  </details>\n</template>\n<style scoped>\n.callback-sticky-offset {\n  top: var(--refs-viewport-offset, 0px);\n  z-index: 1;\n}\n.callback-operation-container :deep(.request-body),\n.callback-operation-container :deep(.request-body-description),\n.callback-operation-container :deep(.request-body-header) {\n  margin-top: 0;\n}\n.callback-operation-container :deep(.request-body-header) {\n  --scalar-font-size-2: var(--scalar-font-size-4);\n  padding: 10px;\n  border-bottom: none;\n  border: 0.5px solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg) var(--scalar-radius-lg) 0 0;\n  background: color-mix(in srgb, var(--scalar-background-2) 50%, transparent);\n}\n.callback-operation-container\n  :deep(.request-body-schema > .schema-card > .schema-card-description) {\n  padding-inline: 8px;\n}\n.callback-operation-container :deep(ul li.property.property--level-1) {\n  padding: 10px;\n}\n.callback-operation-container :deep(.request-body-schema) {\n  background-color: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top: none;\n  overflow: hidden;\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.callback-operation-container :deep(.parameter-list) {\n  margin-top: 0;\n}\n.callback-operation-container :deep(.parameter-list-title) {\n  background: color-mix(in srgb, var(--scalar-background-2) 50%, transparent);\n  border-radius: var(--scalar-radius-lg) var(--scalar-radius-lg) 0 0;\n  padding: 10px;\n  margin-bottom: 0;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom: none;\n  --scalar-font-size-2: var(--scalar-font-size-4);\n}\n.callback-operation-container :deep(.parameter-list-items) {\n  /* background: pink; */\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.callback-operation-container :deep(.parameter-list-items > li:first-of-type) {\n  border-top: none;\n}\n.callback-operation-container :deep(.parameter-list-items > li) {\n  padding: 0 8px;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;uBA0BE,mBAqCU,WArCV,YAqCU,CAnCR,mBAgBU,WAhBV,YAgBU;IAdR,YAEkB,MAAA,qBAAA,EAAA;KADhB,OAAM;KACN,QAAO;;IACT,YAGqB,MAAA,mBAAA,EAAA;KAFnB,IAAG;KACH,OAAM;KACL,QAAQ,QAAA;;IACX,mBAMM,OANN,YAMM,CAAA,gBAAA,gBAJD,QAAA,KAAI,GAAG,KACV,EAAA,EAAA,mBAEO,QAFP,YAEO,gBADF,QAAA,IAAG,EAAA,EAAA,CAAA,CAAA;OAMZ,mBAeM,OAfN,YAeM,CAdJ,YAMwD,6BAAA;IALrD,UAAU,QAAA;IACV,SAAS,QAAA;IACT,YAAuB,QAAA,SAAS,YAAY,KAAK,UAAU,MAAA,eAAc,CAAC,MAAK,CAAA,IAAA,EAAA;IAG/E,aAAa,MAAA,eAAc,CAAC,QAAA,SAAS,YAAW;;;;;;OAGnD,YAIoC,4BAAA;IAHjC,kBAAkB;IAClB,UAAA,QAAA;IACA,SAAA,QAAA;IACA,WAAW,QAAA,SAAS"}
+{"version":3,"file":"Callback.vue.script.js","names":[],"sources":["../../../../../src/features/Operation/components/callbacks/Callback.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { ScalarIconCaretRight } from '@scalar/icons'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { type OperationObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\n\nconst { method, name, url, options } = defineProps<{\n  callback: OperationObject\n  method: HttpMethodType\n  name: string\n  url: string\n  eventBus: WorkspaceEventBus | null\n  options: Pick<\n    OperationProps['options'],\n    'hideModels' | 'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'\n  >\n}>()\n</script>\n\n<template>\n  <details class=\"group callback-list-item\">\n    <!-- Title -->\n    <summary\n      class=\"font-code bg-b-1 callback-sticky-offset callback-list-item-title sticky flex cursor-pointer flex-row items-start gap-2 border-t py-2.5 text-sm group-open:flex-wrap\">\n      <ScalarIconCaretRight\n        class=\"callback-list-item-icon text-c-3 group-hover:text-c-1 absolute top-3.5 -left-5 size-3 transition-transform duration-100 group-open:rotate-90\"\n        weight=\"bold\" />\n      <HttpMethod\n        as=\"span\"\n        class=\"request-method py-0.75 font-bold\"\n        :method=\"method\" />\n      <div\n        class=\"text-c-1 min-w-0 flex-1 truncate text-sm leading-5 font-bold group-open:whitespace-normal\">\n        {{ name }}\n        <span class=\"text-c-2 font-normal\">\n          {{ url }}\n        </span>\n      </div>\n    </summary>\n\n    <!-- Body -->\n    <div class=\"callback-operation-container flex flex-col gap-2\">\n      <OperationParameters\n        :eventBus=\"eventBus\"\n        :options=\"options\"\n        :parameters=\"\n          callback.parameters?.map((param) => getResolvedRef(param)) ?? []\n        \"\n        :requestBody=\"getResolvedRef(callback.requestBody)\" />\n\n      <!-- Responses -->\n      <OperationResponses\n        :collapsableItems=\"false\"\n        :eventBus\n        :options\n        :responses=\"callback.responses\" />\n    </div>\n  </details>\n</template>\n<style scoped>\n.callback-sticky-offset {\n  top: var(--refs-viewport-offset, 0px);\n  z-index: 1;\n}\n.callback-operation-container :deep(.request-body),\n.callback-operation-container :deep(.request-body-description),\n.callback-operation-container :deep(.request-body-header) {\n  margin-top: 0;\n}\n.callback-operation-container :deep(.request-body-header) {\n  --scalar-font-size-2: var(--scalar-font-size-4);\n  padding: 10px;\n  border-bottom: none;\n  border: 0.5px solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg) var(--scalar-radius-lg) 0 0;\n  background: color-mix(in srgb, var(--scalar-background-2) 50%, transparent);\n}\n.callback-operation-container\n  :deep(.request-body-schema > .schema-card > .schema-card-description) {\n  padding-inline: 8px;\n}\n.callback-operation-container :deep(ul li.property.property--level-1) {\n  padding: 10px;\n}\n.callback-operation-container :deep(.request-body-schema) {\n  background-color: var(--scalar-background-1);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-top: none;\n  overflow: hidden;\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.callback-operation-container :deep(.parameter-list) {\n  margin-top: 0;\n}\n.callback-operation-container :deep(.parameter-list-title) {\n  background: color-mix(in srgb, var(--scalar-background-2) 50%, transparent);\n  border-radius: var(--scalar-radius-lg) var(--scalar-radius-lg) 0 0;\n  padding: 10px;\n  margin-bottom: 0;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-bottom: none;\n  --scalar-font-size-2: var(--scalar-font-size-4);\n}\n.callback-operation-container :deep(.parameter-list-items) {\n  /* background: pink; */\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.callback-operation-container :deep(.parameter-list-items > li:first-of-type) {\n  border-top: none;\n}\n.callback-operation-container :deep(.parameter-list-items > li) {\n  padding: 0 8px;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;uBA0BE,mBAqCU,WArCV,YAqCU,CAnCR,mBAgBU,WAhBV,YAgBU;IAdR,YAEkB,MAAA,qBAAA,EAAA;KADhB,OAAM;KACN,QAAO;;IACT,YAGqB,MAAA,mBAAA,EAAA;KAFnB,IAAG;KACH,OAAM;KACL,QAAQ,QAAA;;IACX,mBAMM,OANN,YAMM,CAAA,gBAAA,gBAJD,QAAA,KAAI,GAAG,KACV,EAAA,EAAA,mBAEO,QAFP,YAEO,gBADF,QAAA,IAAG,EAAA,EAAA,CAAA,CAAA;OAMZ,mBAeM,OAfN,YAeM,CAdJ,YAMwD,6BAAA;IALrD,UAAU,QAAA;IACV,SAAS,QAAA;IACT,YAAuB,QAAA,SAAS,YAAY,KAAK,UAAU,MAAA,eAAc,CAAC,MAAK,CAAA,IAAA,EAAA;IAG/E,aAAa,MAAA,eAAc,CAAC,QAAA,SAAS,YAAW;;;;;;OAGnD,YAIoC,4BAAA;IAHjC,kBAAkB;IAClB,UAAA,QAAA;IACA,SAAA,QAAA;IACA,WAAW,QAAA,SAAS"}

package/dist/features/Operation/components/callbacks/Callbacks.vue.d.ts

@@ -5,7 +5,7 @@ type __VLS_Props = {
     path: string;
     callbacks: CallbackObject;
     eventBus: WorkspaceEventBus | null;
-    options: Pick<OperationProps['options'], 'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'>;
+    options: Pick<OperationProps['options'], 'hideModels' | 'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'>;
 };
 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/features/Operation/components/callbacks/Callbacks.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callbacks.vue.d.ts","sourceRoot":"","sources":["../../../../../src/features/Operation/components/callbacks/Callbacks.vue"],"names":[],"mappings":"AA2FA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EACV,cAAc,EAEf,MAAM,8DAA8D,CAAA;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAIxE,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,cAAc,CAAA;IACzB,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAClC,OAAO,EAAE,IAAI,CACX,cAAc,CAAC,SAAS,CAAC,EACzB,8BAA8B,GAAG,yBAAyB,CAC3D,CAAA;CACF,CAAC;AAwGF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Callbacks.vue.d.ts","sourceRoot":"","sources":["../../../../../src/features/Operation/components/callbacks/Callbacks.vue"],"names":[],"mappings":"AA2FA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EACV,cAAc,EAEf,MAAM,8DAA8D,CAAA;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAIxE,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,cAAc,CAAA;IACzB,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAClC,OAAO,EAAE,IAAI,CACX,cAAc,CAAC,SAAS,CAAC,EACzB,YAAY,GAAG,8BAA8B,GAAG,yBAAyB,CAC1E,CAAA;CACF,CAAC;AAwGF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/Operation/components/callbacks/Callbacks.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callbacks.vue.js","names":[],"sources":["../../../../../src/features/Operation/components/callbacks/Callbacks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { isHttpMethod } from '@scalar/helpers/http/is-http-method'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  CallbackObject,\n  OperationObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\n\nimport Callback from './Callback.vue'\n\nconst { path, callbacks, options } = defineProps<{\n  path: string\n  callbacks: CallbackObject\n  eventBus: WorkspaceEventBus | null\n  options: Pick<\n    OperationProps['options'],\n    'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'\n  >\n}>()\n\ntype CallbackType = {\n  name: string\n  url: string\n  method: HttpMethod\n  callback: OperationObject\n}\n\n/** Extract the callbacks with method, url, and name */\nconst flattenedCallbacks = computed<CallbackType[]>(() => {\n  const _callbacks: CallbackType[] = []\n\n  // Loop over the name level\n  objectEntries(callbacks).forEach(([name, pathItem]) => {\n    // Loop over the url level\n    objectEntries(getResolvedRef(pathItem)).forEach(([url, methods]) => {\n      if (typeof methods !== 'object' || !methods) {\n        return\n      }\n\n      // Loop over the method level\n      objectEntries(methods).forEach(([callbackMethod, callback]) => {\n        if (!isHttpMethod(callbackMethod)) {\n          return\n        }\n\n        _callbacks.push({\n          name,\n          url,\n          method: callbackMethod,\n          callback: callback,\n        })\n      })\n    })\n  })\n\n  return _callbacks\n})\n</script>\n\n<template>\n  <div\n    aria-label=\"Callbacks\"\n    class=\"callbacks-list gap-3\"\n    role=\"group\">\n    <div class=\"callbacks-title text-c-1 my-3 text-lg font-medium\">\n      Callbacks\n    </div>\n    <Callback\n      v-for=\"{ callback, method, name, url } in flattenedCallbacks\"\n      :key=\"`${name}-${url}-${method}`\"\n      :callback\n      :eventBus\n      :method\n      :name\n      :options\n      :path\n      :url />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Callbacks.vue.js","names":[],"sources":["../../../../../src/features/Operation/components/callbacks/Callbacks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { isHttpMethod } from '@scalar/helpers/http/is-http-method'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  CallbackObject,\n  OperationObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\n\nimport Callback from './Callback.vue'\n\nconst { path, callbacks, options } = defineProps<{\n  path: string\n  callbacks: CallbackObject\n  eventBus: WorkspaceEventBus | null\n  options: Pick<\n    OperationProps['options'],\n    'hideModels' | 'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'\n  >\n}>()\n\ntype CallbackType = {\n  name: string\n  url: string\n  method: HttpMethod\n  callback: OperationObject\n}\n\n/** Extract the callbacks with method, url, and name */\nconst flattenedCallbacks = computed<CallbackType[]>(() => {\n  const _callbacks: CallbackType[] = []\n\n  // Loop over the name level\n  objectEntries(callbacks).forEach(([name, pathItem]) => {\n    // Loop over the url level\n    objectEntries(getResolvedRef(pathItem)).forEach(([url, methods]) => {\n      if (typeof methods !== 'object' || !methods) {\n        return\n      }\n\n      // Loop over the method level\n      objectEntries(methods).forEach(([callbackMethod, callback]) => {\n        if (!isHttpMethod(callbackMethod)) {\n          return\n        }\n\n        _callbacks.push({\n          name,\n          url,\n          method: callbackMethod,\n          callback: callback,\n        })\n      })\n    })\n  })\n\n  return _callbacks\n})\n</script>\n\n<template>\n  <div\n    aria-label=\"Callbacks\"\n    class=\"callbacks-list gap-3\"\n    role=\"group\">\n    <div class=\"callbacks-title text-c-1 my-3 text-lg font-medium\">\n      Callbacks\n    </div>\n    <Callback\n      v-for=\"{ callback, method, name, url } in flattenedCallbacks\"\n      :key=\"`${name}-${url}-${method}`\"\n      :callback\n      :eventBus\n      :method\n      :name\n      :options\n      :path\n      :url />\n  </div>\n</template>\n"],"mappings":""}

package/dist/features/Operation/components/callbacks/Callbacks.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callbacks.vue.script.js","names":[],"sources":["../../../../../src/features/Operation/components/callbacks/Callbacks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { isHttpMethod } from '@scalar/helpers/http/is-http-method'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  CallbackObject,\n  OperationObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\n\nimport Callback from './Callback.vue'\n\nconst { path, callbacks, options } = defineProps<{\n  path: string\n  callbacks: CallbackObject\n  eventBus: WorkspaceEventBus | null\n  options: Pick<\n    OperationProps['options'],\n    'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'\n  >\n}>()\n\ntype CallbackType = {\n  name: string\n  url: string\n  method: HttpMethod\n  callback: OperationObject\n}\n\n/** Extract the callbacks with method, url, and name */\nconst flattenedCallbacks = computed<CallbackType[]>(() => {\n  const _callbacks: CallbackType[] = []\n\n  // Loop over the name level\n  objectEntries(callbacks).forEach(([name, pathItem]) => {\n    // Loop over the url level\n    objectEntries(getResolvedRef(pathItem)).forEach(([url, methods]) => {\n      if (typeof methods !== 'object' || !methods) {\n        return\n      }\n\n      // Loop over the method level\n      objectEntries(methods).forEach(([callbackMethod, callback]) => {\n        if (!isHttpMethod(callbackMethod)) {\n          return\n        }\n\n        _callbacks.push({\n          name,\n          url,\n          method: callbackMethod,\n          callback: callback,\n        })\n      })\n    })\n  })\n\n  return _callbacks\n})\n</script>\n\n<template>\n  <div\n    aria-label=\"Callbacks\"\n    class=\"callbacks-list gap-3\"\n    role=\"group\">\n    <div class=\"callbacks-title text-c-1 my-3 text-lg font-medium\">\n      Callbacks\n    </div>\n    <Callback\n      v-for=\"{ callback, method, name, url } in flattenedCallbacks\"\n      :key=\"`${name}-${url}-${method}`\"\n      :callback\n      :eventBus\n      :method\n      :name\n      :options\n      :path\n      :url />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAkCA,MAAM,qBAAqB,eAA+B;GACxD,MAAM,aAA6B,EAAC;AAGpC,iBAAc,QAAA,UAAU,CAAC,SAAS,CAAC,MAAM,cAAc;AAErD,kBAAc,eAAe,SAAS,CAAC,CAAC,SAAS,CAAC,KAAK,aAAa;AAClE,SAAI,OAAO,YAAY,YAAY,CAAC,QAClC;AAIF,mBAAc,QAAQ,CAAC,SAAS,CAAC,gBAAgB,cAAc;AAC7D,UAAI,CAAC,aAAa,eAAe,CAC/B;AAGF,iBAAW,KAAK;OACd;OACA;OACA,QAAQ;OACE;OACX,CAAA;OACF;MACF;KACF;AAED,UAAO;IACR;;uBAIC,mBAiBM,OAjBN,YAiBM,CAAA,OAAA,OAAA,OAAA,KAbJ,mBAEM,OAAA,EAFD,OAAM,qDAAmD,EAAC,eAE/D,GAAA,IAAA,UAAA,KAAA,EACA,mBASS,UAAA,MAAA,WARmC,mBAAA,QAAkB,EAAnD,UAAU,QAAQ,MAAM,UAAG;wBADtC,YASS,kBAAA;KAPN,KAAG,GAAK,KAAI,GAAI,IAAG,GAAI;KACvB;KACA,UAAA,QAAA;KACA;KACA;KACA,SAAA,QAAA;KACA,MAAA,QAAA;KACA"}
+{"version":3,"file":"Callbacks.vue.script.js","names":[],"sources":["../../../../../src/features/Operation/components/callbacks/Callbacks.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { isHttpMethod } from '@scalar/helpers/http/is-http-method'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  CallbackObject,\n  OperationObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\n\nimport Callback from './Callback.vue'\n\nconst { path, callbacks, options } = defineProps<{\n  path: string\n  callbacks: CallbackObject\n  eventBus: WorkspaceEventBus | null\n  options: Pick<\n    OperationProps['options'],\n    'hideModels' | 'orderRequiredPropertiesFirst' | 'orderSchemaPropertiesBy'\n  >\n}>()\n\ntype CallbackType = {\n  name: string\n  url: string\n  method: HttpMethod\n  callback: OperationObject\n}\n\n/** Extract the callbacks with method, url, and name */\nconst flattenedCallbacks = computed<CallbackType[]>(() => {\n  const _callbacks: CallbackType[] = []\n\n  // Loop over the name level\n  objectEntries(callbacks).forEach(([name, pathItem]) => {\n    // Loop over the url level\n    objectEntries(getResolvedRef(pathItem)).forEach(([url, methods]) => {\n      if (typeof methods !== 'object' || !methods) {\n        return\n      }\n\n      // Loop over the method level\n      objectEntries(methods).forEach(([callbackMethod, callback]) => {\n        if (!isHttpMethod(callbackMethod)) {\n          return\n        }\n\n        _callbacks.push({\n          name,\n          url,\n          method: callbackMethod,\n          callback: callback,\n        })\n      })\n    })\n  })\n\n  return _callbacks\n})\n</script>\n\n<template>\n  <div\n    aria-label=\"Callbacks\"\n    class=\"callbacks-list gap-3\"\n    role=\"group\">\n    <div class=\"callbacks-title text-c-1 my-3 text-lg font-medium\">\n      Callbacks\n    </div>\n    <Callback\n      v-for=\"{ callback, method, name, url } in flattenedCallbacks\"\n      :key=\"`${name}-${url}-${method}`\"\n      :callback\n      :eventBus\n      :method\n      :name\n      :options\n      :path\n      :url />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAkCA,MAAM,qBAAqB,eAA+B;GACxD,MAAM,aAA6B,EAAC;AAGpC,iBAAc,QAAA,UAAU,CAAC,SAAS,CAAC,MAAM,cAAc;AAErD,kBAAc,eAAe,SAAS,CAAC,CAAC,SAAS,CAAC,KAAK,aAAa;AAClE,SAAI,OAAO,YAAY,YAAY,CAAC,QAClC;AAIF,mBAAc,QAAQ,CAAC,SAAS,CAAC,gBAAgB,cAAc;AAC7D,UAAI,CAAC,aAAa,eAAe,CAC/B;AAGF,iBAAW,KAAK;OACd;OACA;OACA,QAAQ;OACE;OACX,CAAA;OACF;MACF;KACF;AAED,UAAO;IACR;;uBAIC,mBAiBM,OAjBN,YAiBM,CAAA,OAAA,OAAA,OAAA,KAbJ,mBAEM,OAAA,EAFD,OAAM,qDAAmD,EAAC,eAE/D,GAAA,IAAA,UAAA,KAAA,EACA,mBASS,UAAA,MAAA,WARmC,mBAAA,QAAkB,EAAnD,UAAU,QAAQ,MAAM,UAAG;wBADtC,YASS,kBAAA;KAPN,KAAG,GAAK,KAAI,GAAI,IAAG,GAAI;KACvB;KACA,UAAA,QAAA;KACA;KACA;KACA,SAAA,QAAA;KACA,MAAA,QAAA;KACA"}

package/dist/features/Operation/helpers/operation-stability.d.ts

@@ -0,0 +1,19 @@
+import { XScalarStability } from '@scalar/types/legacy';
+type OperationStability = {
+    deprecated?: boolean;
+    'x-scalar-stability'?: unknown;
+};
+/**
+ * Returns true if an operation is considered deprecated.
+ */
+export declare const isOperationDeprecated: (operation: OperationStability) => boolean;
+/**
+ * Get operation stability from deprecated or x-scalar-stability
+ */
+export declare const getOperationStability: (operation: OperationStability) => XScalarStability | undefined;
+/**
+ * Get Operation stability tailwind color class
+ */
+export declare const getOperationStabilityColor: (operation: OperationStability) => string;
+export {};
+//# sourceMappingURL=operation-stability.d.ts.map

package/dist/features/Operation/helpers/operation-stability.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"operation-stability.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/helpers/operation-stability.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAEvD,KAAK,kBAAkB,GAAG;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,WAAW,kBAAkB,KAAG,OACmB,CAAA;AAEzF;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,WAAW,kBAAkB,KAAG,gBAAgB,GAAG,SAC+B,CAAA;AAExH;;GAEG;AACH,eAAO,MAAM,0BAA0B,GAAI,WAAW,kBAAkB,KAAG,MAW1E,CAAA"}

package/dist/features/Operation/helpers/operation-stability.js

@@ -0,0 +1,25 @@
+import { XScalarStability } from "@scalar/types/legacy";
+//#region src/features/Operation/helpers/operation-stability.ts
+/**
+* Returns true if an operation is considered deprecated.
+*/
+var isOperationDeprecated = (operation) => operation.deprecated || operation["x-scalar-stability"] === XScalarStability.Deprecated;
+/**
+* Get operation stability from deprecated or x-scalar-stability
+*/
+var getOperationStability = (operation) => operation.deprecated ? XScalarStability.Deprecated : operation["x-scalar-stability"];
+/**
+* Get Operation stability tailwind color class
+*/
+var getOperationStabilityColor = (operation) => {
+	switch (getOperationStability(operation)) {
+		case XScalarStability.Deprecated: return "text-red";
+		case XScalarStability.Experimental: return "text-orange";
+		case XScalarStability.Stable: return "text-green";
+		default: return "";
+	}
+};
+//#endregion
+export { getOperationStability, getOperationStabilityColor, isOperationDeprecated };
+
+//# sourceMappingURL=operation-stability.js.map

package/dist/features/Operation/helpers/operation-stability.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"operation-stability.js","names":[],"sources":["../../../../src/features/Operation/helpers/operation-stability.ts"],"sourcesContent":["import { XScalarStability } from '@scalar/types/legacy'\n\ntype OperationStability = {\n  deprecated?: boolean\n  'x-scalar-stability'?: unknown\n}\n\n/**\n * Returns true if an operation is considered deprecated.\n */\nexport const isOperationDeprecated = (operation: OperationStability): boolean =>\n  operation.deprecated || operation['x-scalar-stability'] === XScalarStability.Deprecated\n\n/**\n * Get operation stability from deprecated or x-scalar-stability\n */\nexport const getOperationStability = (operation: OperationStability): XScalarStability | undefined =>\n  operation.deprecated ? XScalarStability.Deprecated : (operation['x-scalar-stability'] as XScalarStability | undefined)\n\n/**\n * Get Operation stability tailwind color class\n */\nexport const getOperationStabilityColor = (operation: OperationStability): string => {\n  switch (getOperationStability(operation)) {\n    case XScalarStability.Deprecated:\n      return 'text-red'\n    case XScalarStability.Experimental:\n      return 'text-orange'\n    case XScalarStability.Stable:\n      return 'text-green'\n    default:\n      return ''\n  }\n}\n"],"mappings":";;;;;AAUA,IAAa,yBAAyB,cACpC,UAAU,cAAc,UAAU,0BAA0B,iBAAiB;;;;AAK/E,IAAa,yBAAyB,cACpC,UAAU,aAAa,iBAAiB,aAAc,UAAU;;;;AAKlE,IAAa,8BAA8B,cAA0C;AACnF,SAAQ,sBAAsB,UAAU,EAAxC;EACE,KAAK,iBAAiB,WACpB,QAAO;EACT,KAAK,iBAAiB,aACpB,QAAO;EACT,KAAK,iBAAiB,OACpB,QAAO;EACT,QACE,QAAO"}

package/dist/features/Operation/helpers/should-ignore-entity.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Check if an entity should be ignored
+ */
+export declare const shouldIgnoreEntity: (data: {
+    "x-internal"?: boolean;
+    "x-scalar-ignore"?: boolean;
+}) => boolean;
+//# sourceMappingURL=should-ignore-entity.d.ts.map

package/dist/features/Operation/helpers/should-ignore-entity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"should-ignore-entity.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/helpers/should-ignore-entity.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAAE,YACpC,CAAA"}

package/dist/features/Operation/helpers/should-ignore-entity.js

@@ -0,0 +1,9 @@
+//#region src/features/Operation/helpers/should-ignore-entity.ts
+/**
+* Check if an entity should be ignored
+*/
+var shouldIgnoreEntity = (data) => Boolean(data?.["x-internal"] || data?.["x-scalar-ignore"]);
+//#endregion
+export { shouldIgnoreEntity };
+
+//# sourceMappingURL=should-ignore-entity.js.map

package/dist/features/Operation/helpers/should-ignore-entity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"should-ignore-entity.js","names":[],"sources":["../../../../src/features/Operation/helpers/should-ignore-entity.ts"],"sourcesContent":["/**\n * Check if an entity should be ignored\n */\nexport const shouldIgnoreEntity = (data: { 'x-internal'?: boolean; 'x-scalar-ignore'?: boolean }) =>\n  Boolean(data?.['x-internal'] || data?.['x-scalar-ignore'])\n"],"mappings":";;;;AAGA,IAAa,sBAAsB,SACjC,QAAQ,OAAO,iBAAiB,OAAO,mBAAmB"}

package/dist/features/Operation/layouts/ClassicLayout.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClassicLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/layouts/ClassicLayout.vue"],"names":[],"mappings":"AA4hBA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAcrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAUxE,KAAK,WAAW,GAAG,IAAI,CACnB,cAAc,EACd,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,iBAAiB,GAAG,WAAW,CACtE,GAAG;IACF,wCAAwC;IACxC,SAAS,EAAE,eAAe,CAAA;IAC1B,4CAA4C;IAC5C,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,sDAAsD;IACtD,uBAAuB,EAAE,0BAA0B,EAAE,CAAA;CACtD,CAAC;AAooBJ,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ClassicLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/layouts/ClassicLayout.vue"],"names":[],"mappings":"AAuhBA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACb,MAAM,8DAA8D,CAAA;AAmBrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAUxE,KAAK,WAAW,GAAG,IAAI,CACnB,cAAc,EACd,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,iBAAiB,GAAG,WAAW,CACtE,GAAG;IACF,wCAAwC;IACxC,SAAS,EAAE,eAAe,CAAA;IAC1B,4CAA4C;IAC5C,cAAc,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC,sDAAsD;IACtD,uBAAuB,EAAE,0BAA0B,EAAE,CAAA;CACtD,CAAC;AAooBJ,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/Operation/layouts/ClassicLayout.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import ClassicLayout_vue_vue_type_script_setup_true_lang_default from "./ClassicLayout.vue.script.js";
 /* empty css                            */
 //#region src/features/Operation/layouts/ClassicLayout.vue
-var ClassicLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ClassicLayout_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1f81471a"]]);
+var ClassicLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ClassicLayout_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9cf53505"]]);
 //#endregion
 export { ClassicLayout_default as default };
 

package/dist/features/Operation/layouts/ClassicLayout.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClassicLayout.vue.js","names":[],"sources":["../../../../src/features/Operation/layouts/ClassicLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/v2/blocks/operation-code-sample'\nimport {\n  ScalarErrorBoundary,\n  ScalarIconButton,\n  ScalarMarkdown,\n} from '@scalar/components'\nimport {\n  ScalarIconCopy,\n  ScalarIconPlay,\n  ScalarIconWebhooksLogo,\n} from '@scalar/icons'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@scalar/oas-utils/helpers'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport { SectionAccordion } from '@/components/Section'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n  REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n  type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n  clientOptions,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n} = defineProps<\n  Omit<\n    OperationProps,\n    'document' | 'pathValue' | 'server' | 'securitySchemes' | 'authStore'\n  > & {\n    /** Operation object with path params */\n    operation: OperationObject\n    /** The selected server for the operation */\n    selectedServer: ServerObject | null\n    /** The selected security schemes for the operation */\n    selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n  }\n>()\n\nconst operationTitle = computed(() => operation.summary || path || '')\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Track the currently selected example for passing to the modal */\nconst selectedExampleKey = ref<string>('')\n\n/** Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample */\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n  (): RequestBodyCompositionSelection => ({\n    ...requestBodyCompositionSelection.value,\n  }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n  JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n\nconst { copyToClipboard } = useClipboard()\n</script>\n<template>\n  <SectionAccordion\n    :id=\"id\"\n    :aria-label=\"operationTitle\"\n    class=\"reference-endpoint\"\n    :modelValue=\"!isCollapsed\"\n    transparent\n    @update:modelValue=\"\n      (value) => eventBus?.emit('toggle:nav-item', { id, open: value })\n    \">\n    <template #title>\n      <div class=\"operation-title\">\n        <div class=\"operation-details\">\n          <HttpMethod\n            class=\"endpoint-type\"\n            :method=\"method\"\n            short />\n          <Anchor\n            class=\"endpoint-anchor\"\n            @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n            <h3 class=\"endpoint-label\">\n              <div class=\"endpoint-label-path\">\n                <OperationPath\n                  :deprecated=\"isOperationDeprecated(operation)\"\n                  :path=\"path\" />\n              </div>\n              <div class=\"endpoint-label-name\">\n                {{ operationTitle }}\n              </div>\n              <!-- Stability badge -->\n              <Badge\n                v-if=\"getOperationStability(operation)\"\n                class=\"capitalize\"\n                :class=\"getOperationStabilityColor(operation)\">\n                {{ getOperationStability(operation) }}\n              </Badge>\n\n              <!-- Webhook badge -->\n              <Badge\n                v-if=\"isWebhook\"\n                class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n                <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n              </Badge>\n\n              <!-- x-badges before -->\n              <XBadges\n                :badges=\"operation['x-badges']\"\n                position=\"before\" />\n            </h3>\n          </Anchor>\n        </div>\n      </div>\n    </template>\n    <template #actions=\"{ active }\">\n      <!-- x-badges after -->\n      <XBadges\n        :badges=\"operation['x-badges']\"\n        position=\"after\" />\n      <template v-if=\"!options.hideTestRequestButton\">\n        <TestRequestButton\n          v-if=\"active && !isWebhook\"\n          :id\n          :eventBus\n          :exampleName=\"selectedExampleKey\"\n          :method\n          :path\n          :requestBodyCompositionSelection=\"\n            requestBodyCompositionSelectionForCodeSample\n          \" />\n        <ScalarIconPlay\n          v-else\n          class=\"endpoint-try-hint size-4.5\" />\n      </template>\n      <span\n        v-if=\"options.showOperationId && operation.operationId\"\n        class=\"font-code text-sm\">\n        {{ operation.operationId }}\n      </span>\n      <ScalarIconButton\n        class=\"endpoint-copy p-0.5\"\n        :icon=\"ScalarIconCopy\"\n        label=\"Copy endpoint URL\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click.stop=\"copyToClipboard(path)\" />\n    </template>\n    <template\n      v-if=\"operation.description\"\n      #description>\n      <ScalarMarkdown\n        :anchorPrefix=\"id\"\n        aria-label=\"Operation Description\"\n        role=\"group\"\n        transformType=\"heading\"\n        :value=\"operation.description\"\n        withAnchors\n        withImages />\n    </template>\n    <div class=\"endpoint-content\">\n      <div class=\"operation-details-card\">\n        <div\n          v-if=\"Object.keys(operationExtensions).length > 0\"\n          class=\"operation-details-card-item\">\n          <SpecificationExtension :value=\"operationExtensions\" />\n        </div>\n        <div class=\"operation-details-card-item\">\n          <OperationParameters\n            :eventBus\n            :options\n            :parameters=\"operation.parameters\"\n            :requestBody=\"getResolvedRef(operation.requestBody)\" />\n        </div>\n        <div class=\"operation-details-card-item\">\n          <OperationResponses\n            :eventBus\n            :options\n            :responses=\"operation.responses\" />\n        </div>\n\n        <!-- Callbacks -->\n        <div\n          v-if=\"operation?.callbacks\"\n          class=\"operation-details-card-item\">\n          <Callbacks\n            :callbacks=\"operation.callbacks\"\n            :eventBus\n            :options\n            :path />\n        </div>\n      </div>\n\n      <ExampleResponses\n        v-if=\"operation.responses\"\n        class=\"operation-example-card\"\n        :responses=\"operation.responses\" />\n\n      <!-- New Example Request -->\n      <div>\n        <!-- External Docs -->\n        <LinkList v-if=\"operation.externalDocs\">\n          <ExternalDocs :value=\"operation.externalDocs\" />\n        </LinkList>\n        <!-- Request Example -->\n        <ScalarErrorBoundary>\n          <OperationCodeSample\n            v-model:selectedExample=\"selectedExampleKey\"\n            :key=\"requestBodyCompositionSelectionKey\"\n            class=\"operation-example-card\"\n            :clientOptions\n            :eventBus\n            fallback\n            :isWebhook\n            :method\n            :operation\n            :path\n            :requestBodyCompositionSelection=\"\n              requestBodyCompositionSelectionForCodeSample\n            \"\n            :securitySchemes=\"selectedSecuritySchemes\"\n            :selectedClient\n            :selectedServer />\n        </ScalarErrorBoundary>\n      </div>\n    </div>\n  </SectionAccordion>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.operation-title {\n  display: flex;\n  justify-content: space-between;\n}\n.operation-details {\n  display: flex;\n  align-items: center;\n  margin-top: 0;\n  gap: 9px;\n\n  min-width: 0;\n  flex-shrink: 1;\n}\n.operation-details :deep(.endpoint-anchor .scalar-button svg) {\n  width: 16px;\n  height: 16px;\n}\n.endpoint-type {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n\n  position: relative;\n  z-index: 0;\n\n  width: 60px;\n  padding: 6px;\n  flex-shrink: 0;\n\n  font-size: var(--scalar-small);\n\n  text-transform: uppercase;\n  font-weight: var(--scalar-bold);\n  font-family: var(--scalar-font);\n}\n.endpoint-type::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n\n  background: currentColor;\n  opacity: 0.15;\n\n  border-radius: var(--scalar-radius);\n}\n\n.endpoint-anchor {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  flex-shrink: 1;\n}\n.endpoint-anchor.label {\n  display: flex;\n}\n.endpoint-label {\n  display: flex;\n  align-items: baseline;\n  gap: 9px;\n\n  min-width: 0;\n  flex-shrink: 1;\n\n  color: var(--scalar-color-1);\n}\n\n.endpoint-label-path {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-mini);\n\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.endpoint-label-path :deep(em) {\n  color: var(--scalar-color-2);\n}\n.endpoint-label-name {\n  color: var(--scalar-color-2);\n  font-size: var(--scalar-small);\n\n  /* Concatenate the name before we shrink the path */\n  flex-shrink: 1000000000;\n\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.endpoint-try-hint {\n  padding: 2px;\n  flex-shrink: 0;\n}\n.endpoint-copy {\n  color: currentColor;\n}\n.endpoint-copy :deep(svg) {\n  stroke-width: 2px;\n}\n\n.endpoint-content {\n  display: grid;\n  grid-auto-columns: 1fr;\n  grid-auto-flow: row;\n  gap: 9px;\n  padding: 9px;\n}\n\n@variant lg {\n  .endpoint-content {\n    grid-auto-flow: column;\n  }\n}\n\n@container (max-width: 900px) {\n  .endpoint-content {\n    grid-template-columns: 1fr;\n  }\n}\n\n.endpoint-content > * {\n  min-width: 0;\n}\n\n.operation-details-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-width: 0;\n}\n.operation-details-card-item :deep(.parameter-list),\n.operation-details-card-item :deep(.callbacks-list) {\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg);\n  margin-top: 0;\n}\n\n.operation-details-card-item {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.operation-details-card-item :deep(.parameter-list-items) {\n  margin-bottom: 0;\n}\n.operation-details-card :deep(.parameter-item:last-of-type .parameter-schema) {\n  padding-bottom: 12px;\n}\n.operation-details-card :deep(.parameter-list .parameter-list) {\n  margin-bottom: 12px;\n}\n.operation-details-card :deep(.parameter-item) {\n  margin: 0;\n  padding: 0;\n}\n.operation-details-card :deep(.property) {\n  padding: 9px;\n  margin: 0;\n}\n.operation-details-card :deep(.parameter-list-title),\n.operation-details-card :deep(.request-body-title),\n.operation-details-card :deep(.callbacks-title) {\n  text-transform: uppercase;\n  font-weight: var(--scalar-bold);\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n  line-height: 1.33;\n  padding: 9px;\n  margin: 0;\n}\n\n.operation-details-card :deep(.callback-list-item-title) {\n  padding-left: 28px;\n  padding-right: 12px;\n}\n\n.operation-details-card :deep(.callback-list-item-icon) {\n  left: 6px;\n}\n\n.operation-details-card :deep(.callback-operation-container) {\n  padding-inline: 9px;\n  padding-bottom: 9px;\n}\n\n.operation-details-card :deep(.callback-operation-container > .request-body),\n.operation-details-card :deep(.callback-operation-container > .parameter-list) {\n  border: none;\n}\n\n.operation-details-card\n  :deep(.callback-operation-container > .request-body > .request-body-header) {\n  padding: 0;\n  padding-bottom: 9px;\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.operation-details-card :deep(.request-body-description) {\n  margin-top: 0;\n  padding: 9px 9px 0 9px;\n  border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.operation-details-card :deep(.request-body) {\n  margin-top: 0;\n  border-radius: var(--scalar-radius-lg);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n.operation-details-card\n  :deep(.request-body .schema-card--level-0 > .schema-card-description) {\n  padding-inline: 9px;\n}\n\n.operation-details-card :deep(.request-body-header) {\n  padding-bottom: 0;\n  border-bottom: 0;\n}\n\n.operation-details-card :deep(.contents button) {\n  margin-right: 9px;\n}\n\n.operation-details-card\n  :deep(.schema-card--open + .schema-card:not(.schema-card--open)) {\n  margin-inline: 9px;\n  margin-bottom: 9px;\n}\n.operation-details-card :deep(.request-body-schema .property--level-0) {\n  padding: 0;\n}\n.operation-details-card :deep(.request-body-schema .property--level-0) {\n  padding: 0;\n}\n\n.operation-details-card :deep(.selected-content-type) {\n  margin-right: 9px;\n}\n\n.operation-example-card {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n  max-height: calc(var(--refs-viewport-height) - 48px);\n}\n\n@media (max-width: 600px) {\n  .operation-example-card {\n    max-height: unset;\n    position: static;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ClassicLayout.vue.js","names":[],"sources":["../../../../src/features/Operation/layouts/ClassicLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/blocks/operation-code-sample'\nimport {\n  ScalarErrorBoundary,\n  ScalarIconButton,\n  ScalarMarkdown,\n} from '@scalar/components'\nimport {\n  ScalarIconCopy,\n  ScalarIconPlay,\n  ScalarIconWebhooksLogo,\n} from '@scalar/icons'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, provide, ref } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport { SectionAccordion } from '@/components/Section'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@/features/Operation/helpers/operation-stability'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport {\n  REQUEST_BODY_COMPOSITION_INDEX_SYMBOL,\n  type RequestBodyCompositionSelection,\n} from '@/features/Operation/request-body-composition-index'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n  clientOptions,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n} = defineProps<\n  Omit<\n    OperationProps,\n    'document' | 'pathValue' | 'server' | 'securitySchemes' | 'authStore'\n  > & {\n    /** Operation object with path params */\n    operation: OperationObject\n    /** The selected server for the operation */\n    selectedServer: ServerObject | null\n    /** The selected security schemes for the operation */\n    selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n  }\n>()\n\nconst operationTitle = computed(() => operation.summary || path || '')\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n\n/** Track the currently selected example for passing to the modal */\nconst selectedExampleKey = ref<string>('')\n\n/** Selected request body oneOf/anyOf variants; synced with schema dropdowns and code sample */\nconst requestBodyCompositionSelection = ref<RequestBodyCompositionSelection>({})\n\nconst requestBodyCompositionSelectionForCodeSample = computed(\n  (): RequestBodyCompositionSelection => ({\n    ...requestBodyCompositionSelection.value,\n  }),\n)\n\nconst requestBodyCompositionSelectionKey = computed(() =>\n  JSON.stringify(requestBodyCompositionSelectionForCodeSample.value),\n)\n\nprovide(REQUEST_BODY_COMPOSITION_INDEX_SYMBOL, requestBodyCompositionSelection)\n\nconst { copyToClipboard } = useClipboard()\n</script>\n<template>\n  <SectionAccordion\n    :id=\"id\"\n    :aria-label=\"operationTitle\"\n    class=\"reference-endpoint\"\n    :modelValue=\"!isCollapsed\"\n    transparent\n    @update:modelValue=\"\n      (value) => eventBus?.emit('toggle:nav-item', { id, open: value })\n    \">\n    <template #title>\n      <div class=\"operation-title\">\n        <div class=\"operation-details\">\n          <HttpMethod\n            class=\"endpoint-type\"\n            :method=\"method\"\n            short />\n          <Anchor\n            class=\"endpoint-anchor\"\n            @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n            <h3 class=\"endpoint-label\">\n              <div class=\"endpoint-label-path\">\n                <OperationPath\n                  :deprecated=\"isOperationDeprecated(operation)\"\n                  :path=\"path\" />\n              </div>\n              <div class=\"endpoint-label-name\">\n                {{ operationTitle }}\n              </div>\n              <!-- Stability badge -->\n              <Badge\n                v-if=\"getOperationStability(operation)\"\n                class=\"capitalize\"\n                :class=\"getOperationStabilityColor(operation)\">\n                {{ getOperationStability(operation) }}\n              </Badge>\n\n              <!-- Webhook badge -->\n              <Badge\n                v-if=\"isWebhook\"\n                class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n                <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n              </Badge>\n\n              <!-- x-badges before -->\n              <XBadges\n                :badges=\"operation['x-badges']\"\n                position=\"before\" />\n            </h3>\n          </Anchor>\n        </div>\n      </div>\n    </template>\n    <template #actions=\"{ active }\">\n      <!-- x-badges after -->\n      <XBadges\n        :badges=\"operation['x-badges']\"\n        position=\"after\" />\n      <template v-if=\"!options.hideTestRequestButton\">\n        <TestRequestButton\n          v-if=\"active && !isWebhook\"\n          :id\n          :eventBus\n          :exampleName=\"selectedExampleKey\"\n          :method\n          :path\n          :requestBodyCompositionSelection=\"\n            requestBodyCompositionSelectionForCodeSample\n          \" />\n        <ScalarIconPlay\n          v-else\n          class=\"endpoint-try-hint size-4.5\" />\n      </template>\n      <span\n        v-if=\"options.showOperationId && operation.operationId\"\n        class=\"font-code text-sm\">\n        {{ operation.operationId }}\n      </span>\n      <ScalarIconButton\n        class=\"endpoint-copy p-0.5\"\n        :icon=\"ScalarIconCopy\"\n        label=\"Copy endpoint URL\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click.stop=\"copyToClipboard(path)\" />\n    </template>\n    <template\n      v-if=\"operation.description\"\n      #description>\n      <ScalarMarkdown\n        :anchorPrefix=\"id\"\n        aria-label=\"Operation Description\"\n        role=\"group\"\n        transformType=\"heading\"\n        :value=\"operation.description\"\n        withAnchors\n        withImages />\n    </template>\n    <div class=\"endpoint-content\">\n      <div class=\"operation-details-card\">\n        <div\n          v-if=\"Object.keys(operationExtensions).length > 0\"\n          class=\"operation-details-card-item\">\n          <SpecificationExtension :value=\"operationExtensions\" />\n        </div>\n        <div class=\"operation-details-card-item\">\n          <OperationParameters\n            :eventBus\n            :options\n            :parameters=\"operation.parameters\"\n            :requestBody=\"getResolvedRef(operation.requestBody)\" />\n        </div>\n        <div class=\"operation-details-card-item\">\n          <OperationResponses\n            :eventBus\n            :options\n            :responses=\"operation.responses\" />\n        </div>\n\n        <!-- Callbacks -->\n        <div\n          v-if=\"operation?.callbacks\"\n          class=\"operation-details-card-item\">\n          <Callbacks\n            :callbacks=\"operation.callbacks\"\n            :eventBus\n            :options\n            :path />\n        </div>\n      </div>\n\n      <ExampleResponses\n        v-if=\"operation.responses\"\n        class=\"operation-example-card\"\n        :responses=\"operation.responses\" />\n\n      <!-- New Example Request -->\n      <div>\n        <!-- External Docs -->\n        <LinkList v-if=\"operation.externalDocs\">\n          <ExternalDocs :value=\"operation.externalDocs\" />\n        </LinkList>\n        <!-- Request Example -->\n        <ScalarErrorBoundary>\n          <OperationCodeSample\n            :key=\"requestBodyCompositionSelectionKey\"\n            v-model:selectedExample=\"selectedExampleKey\"\n            class=\"operation-example-card\"\n            :clientOptions\n            :eventBus\n            fallback\n            :isWebhook\n            :method\n            :operation\n            :path\n            :requestBodyCompositionSelection=\"\n              requestBodyCompositionSelectionForCodeSample\n            \"\n            :securitySchemes=\"selectedSecuritySchemes\"\n            :selectedClient\n            :selectedServer />\n        </ScalarErrorBoundary>\n      </div>\n    </div>\n  </SectionAccordion>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.operation-title {\n  display: flex;\n  justify-content: space-between;\n}\n.operation-details {\n  display: flex;\n  align-items: center;\n  margin-top: 0;\n  gap: 9px;\n\n  min-width: 0;\n  flex-shrink: 1;\n}\n.operation-details :deep(.endpoint-anchor .scalar-button svg) {\n  width: 16px;\n  height: 16px;\n}\n.endpoint-type {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n\n  position: relative;\n  z-index: 0;\n\n  width: 60px;\n  padding: 6px;\n  flex-shrink: 0;\n\n  font-size: var(--scalar-small);\n\n  text-transform: uppercase;\n  font-weight: var(--scalar-bold);\n  font-family: var(--scalar-font);\n}\n.endpoint-type::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n\n  background: currentColor;\n  opacity: 0.15;\n\n  border-radius: var(--scalar-radius);\n}\n\n.endpoint-anchor {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  flex-shrink: 1;\n}\n.endpoint-anchor.label {\n  display: flex;\n}\n.endpoint-label {\n  display: flex;\n  align-items: baseline;\n  gap: 9px;\n\n  min-width: 0;\n  flex-shrink: 1;\n\n  color: var(--scalar-color-1);\n}\n\n.endpoint-label-path {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-mini);\n\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.endpoint-label-path :deep(em) {\n  color: var(--scalar-color-2);\n}\n.endpoint-label-name {\n  color: var(--scalar-color-2);\n  font-size: var(--scalar-small);\n\n  /* Concatenate the name before we shrink the path */\n  flex-shrink: 1000000000;\n\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.endpoint-try-hint {\n  padding: 2px;\n  flex-shrink: 0;\n}\n.endpoint-copy {\n  color: currentColor;\n}\n.endpoint-copy :deep(svg) {\n  stroke-width: 2px;\n}\n\n.endpoint-content {\n  display: grid;\n  grid-auto-columns: 1fr;\n  grid-auto-flow: row;\n  gap: 9px;\n  padding: 9px;\n}\n\n@variant lg {\n  .endpoint-content {\n    grid-auto-flow: column;\n  }\n}\n\n@container (max-width: 900px) {\n  .endpoint-content {\n    grid-template-columns: 1fr;\n  }\n}\n\n.endpoint-content > * {\n  min-width: 0;\n}\n\n.operation-details-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-width: 0;\n}\n.operation-details-card-item :deep(.parameter-list),\n.operation-details-card-item :deep(.callbacks-list) {\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  border-radius: var(--scalar-radius-lg);\n  margin-top: 0;\n}\n\n.operation-details-card-item {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.operation-details-card-item :deep(.parameter-list-items) {\n  margin-bottom: 0;\n}\n.operation-details-card :deep(.parameter-item:last-of-type .parameter-schema) {\n  padding-bottom: 12px;\n}\n.operation-details-card :deep(.parameter-list .parameter-list) {\n  margin-bottom: 12px;\n}\n.operation-details-card :deep(.parameter-item) {\n  margin: 0;\n  padding: 0;\n}\n.operation-details-card :deep(.property) {\n  padding: 9px;\n  margin: 0;\n}\n.operation-details-card :deep(.parameter-list-title),\n.operation-details-card :deep(.request-body-title),\n.operation-details-card :deep(.callbacks-title) {\n  text-transform: uppercase;\n  font-weight: var(--scalar-bold);\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n  line-height: 1.33;\n  padding: 9px;\n  margin: 0;\n}\n\n.operation-details-card :deep(.callback-list-item-title) {\n  padding-left: 28px;\n  padding-right: 12px;\n}\n\n.operation-details-card :deep(.callback-list-item-icon) {\n  left: 6px;\n}\n\n.operation-details-card :deep(.callback-operation-container) {\n  padding-inline: 9px;\n  padding-bottom: 9px;\n}\n\n.operation-details-card :deep(.callback-operation-container > .request-body),\n.operation-details-card :deep(.callback-operation-container > .parameter-list) {\n  border: none;\n}\n\n.operation-details-card\n  :deep(.callback-operation-container > .request-body > .request-body-header) {\n  padding: 0;\n  padding-bottom: 9px;\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.operation-details-card :deep(.request-body-description) {\n  margin-top: 0;\n  padding: 9px 9px 0 9px;\n  border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n\n.operation-details-card :deep(.request-body) {\n  margin-top: 0;\n  border-radius: var(--scalar-radius-lg);\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n.operation-details-card\n  :deep(.request-body .schema-card--level-0 > .schema-card-description) {\n  padding-inline: 9px;\n}\n\n.operation-details-card :deep(.request-body-header) {\n  padding-bottom: 0;\n  border-bottom: 0;\n}\n\n.operation-details-card :deep(.contents button) {\n  margin-right: 9px;\n}\n\n.operation-details-card\n  :deep(.schema-card--open + .schema-card:not(.schema-card--open)) {\n  margin-inline: 9px;\n  margin-bottom: 9px;\n}\n.operation-details-card :deep(.request-body-schema .property--level-0) {\n  padding: 0;\n}\n.operation-details-card :deep(.request-body-schema .property--level-0) {\n  padding: 0;\n}\n\n.operation-details-card :deep(.selected-content-type) {\n  margin-right: 9px;\n}\n\n.operation-example-card {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n  max-height: calc(var(--refs-viewport-height) - 48px);\n}\n\n@media (max-width: 600px) {\n  .operation-example-card {\n    max-height: unset;\n    position: static;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/features/Operation/layouts/ClassicLayout.vue.script.js

@@ -12,14 +12,14 @@ import ExampleResponses_default from "../../example-responses/ExampleResponses.v
 import OperationParameters_default from "../components/OperationParameters.vue.js";
 import OperationResponses_default from "../components/OperationResponses.vue.js";
 import Callbacks_default from "../components/callbacks/Callbacks.vue.js";
+import { getOperationStability, getOperationStabilityColor, isOperationDeprecated } from "../helpers/operation-stability.js";
 import TestRequestButton_default from "../../test-request-button/TestRequestButton.vue.js";
 import XBadges_default from "../../x-badges/XBadges.vue.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, provide, ref, toDisplayString, unref, withCtx, withModifiers } from "vue";
 import { ScalarErrorBoundary, ScalarIconButton, ScalarMarkdown } from "@scalar/components";
 import { useClipboard } from "@scalar/use-hooks/useClipboard";
 import { ScalarIconCopy, ScalarIconPlay, ScalarIconWebhooksLogo } from "@scalar/icons";
-import { getOperationStability, getOperationStabilityColor, isOperationDeprecated } from "@scalar/oas-utils/helpers";
-import { OperationCodeSample } from "@scalar/api-client/v2/blocks/operation-code-sample";
+import { OperationCodeSample } from "@scalar/api-client/blocks/operation-code-sample";
 import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
 //#region src/features/Operation/layouts/ClassicLayout.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "operation-title" };
@@ -196,9 +196,9 @@ var ClassicLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						_: 1
 					})) : createCommentVNode("", true), createVNode(unref(ScalarErrorBoundary), null, {
 						default: withCtx(() => [(openBlock(), createBlock(unref(OperationCodeSample), {
+							key: requestBodyCompositionSelectionKey.value,
 							selectedExample: selectedExampleKey.value,
 							"onUpdate:selectedExample": _cache[2] || (_cache[2] = ($event) => selectedExampleKey.value = $event),
-							key: requestBodyCompositionSelectionKey.value,
 							class: "operation-example-card",
 							clientOptions: __props.clientOptions,
 							eventBus: __props.eventBus,