@scalar/api-reference 1.57.2 → 1.57.3

package/dist/features/example-responses/ExampleResponses.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleResponses.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponses.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ExamplePicker } from '@scalar/api-client/blocks/operation-code-sample'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardSection,\n  ScalarIcon,\n  ScalarMarkdown,\n} from '@scalar/components'\nimport { objectKeys } from '@scalar/helpers/object/object-keys'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { getExample } from '@scalar/workspace-store/request-example'\nimport type {\n  MediaTypeObject,\n  ResponsesObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, toValue, useId, watch } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport ExampleSchema from '@/features/example-responses/ExampleSchema.vue'\n\nimport ExampleResponse from './ExampleResponse.vue'\nimport ExampleResponseTab from './ExampleResponseTab.vue'\nimport ExampleResponseTabList from './ExampleResponseTabList.vue'\nimport { hasResponseContent } from './helpers/has-response-content'\nimport { normalizeMimeTypeObject } from './helpers/normalize-mime-type-object'\n\n/**\n * TODO: copyToClipboard isn't using the right content if there are multiple examples\n */\n\nconst { responses } = defineProps<{\n  responses: ResponsesObject\n}>()\n\nconst id = useId()\nconst { copyToClipboard } = useClipboard()\n\n// Bring the status codes in the right order.\nconst orderedStatusCodes = computed<string[]>(() =>\n  Object.keys(responses ?? {}).sort(),\n)\n\n// Filter to only valid response keys that should render in the example responses panel\nconst statusCodesWithContent = computed<string[]>(() =>\n  orderedStatusCodes.value.filter((statusCode) =>\n    hasResponseContent(getResolvedRef(responses?.[statusCode]), statusCode),\n  ),\n)\n\n// Keep track of the current selected tab\nconst selectedResponseIndex = ref<number>(0)\n\n/**\n * Clamp the selected index when the filtered list shrinks.\n * Without this, the index can become out of bounds and cause a mismatch\n * between the visible tabs and the displayed content.\n *\n * We also reset `selectedExampleKey` to match the behavior of `changeTab`,\n * since the new response may not have the same example keys.\n */\nwatch(statusCodesWithContent, (codes) => {\n  if (codes.length === 0) {\n    selectedResponseIndex.value = 0\n    selectedExampleKey.value = ''\n  } else if (selectedResponseIndex.value >= codes.length) {\n    selectedResponseIndex.value = codes.length - 1\n    selectedExampleKey.value = ''\n  }\n})\n\n// Return the whole response object\nconst currentResponse = computed(() => {\n  const currentStatusCode =\n    toValue(statusCodesWithContent)[toValue(selectedResponseIndex)] ?? ''\n\n  return getResolvedRef(responses?.[currentStatusCode])\n})\n\nconst currentResponseContent = computed<MediaTypeObject | undefined>(() => {\n  const normalizedContent = normalizeMimeTypeObject(\n    currentResponse.value?.content,\n  )\n\n  /** All the keys of the normalized content */\n  const keys = objectKeys(normalizedContent ?? {})\n  return normalizedContent?.[keys[0] ?? '']\n})\n\nconst hasMultipleExamples = computed<boolean>(\n  () =>\n    !!currentResponseContent.value?.examples &&\n    Object.keys(currentResponseContent.value?.examples ?? {}).length > 1,\n)\n\nconst selectedExampleKey = ref<string>(\n  Object.keys(currentResponseContent.value?.examples ?? {})[0] ?? '',\n)\n\n/** Get the current example to display */\nconst currentExample = computed(() => {\n  if (!currentResponseContent.value) {\n    return undefined\n  }\n\n  // When multiple examples exist and one is selected, we access it directly\n  if (hasMultipleExamples.value && selectedExampleKey.value) {\n    return currentResponseContent.value.examples?.[selectedExampleKey.value]\n  }\n\n  // Otherwise, we use getExample with an undefined exampleKey to handle fallbacks\n  return getExample(currentResponseContent.value, undefined, undefined)\n})\n\nconst changeTab = (index: number) => {\n  selectedResponseIndex.value = index\n  selectedExampleKey.value = ''\n}\n\nconst showSchema = ref(false)\n</script>\n<template>\n  <ScalarCard\n    v-if=\"statusCodesWithContent.length\"\n    aria-label=\"Example Responses\"\n    class=\"response-card\"\n    role=\"region\">\n    <ExampleResponseTabList @change=\"changeTab\">\n      <ExampleResponseTab\n        v-for=\"statusCode in statusCodesWithContent\"\n        :key=\"statusCode\"\n        :aria-controls=\"id\">\n        <ScreenReader>Status:</ScreenReader>\n        {{ statusCode }}\n      </ExampleResponseTab>\n\n      <template #actions>\n        <button\n          v-if=\"currentResponseContent?.example\"\n          class=\"code-copy\"\n          type=\"button\"\n          @click=\"() => copyToClipboard(currentResponseContent?.example)\">\n          <ScalarIcon\n            icon=\"Clipboard\"\n            width=\"12px\" />\n        </button>\n        <label\n          v-if=\"currentResponseContent?.schema\"\n          class=\"scalar-card-checkbox\">\n          Show Schema\n          <input\n            v-model=\"showSchema\"\n            :aria-controls=\"id\"\n            class=\"scalar-card-checkbox-input\"\n            type=\"checkbox\" />\n          <span class=\"scalar-card-checkbox-checkmark\" />\n        </label>\n      </template>\n    </ExampleResponseTabList>\n    <ScalarCardSection class=\"grid flex-1\">\n      <!-- Schema -->\n      <ExampleSchema\n        v-if=\"currentResponseContent?.schema && showSchema\"\n        :id=\"id\"\n        :schema=\"currentResponseContent?.schema\" />\n\n      <!-- Example -->\n      <ExampleResponse\n        v-else\n        :id=\"id\"\n        :example=\"currentExample\"\n        :response=\"currentResponseContent\" />\n    </ScalarCardSection>\n    <ScalarCardFooter\n      v-if=\"currentResponse?.description || hasMultipleExamples\"\n      class=\"response-card-footer\">\n      <ExamplePicker\n        v-if=\"hasMultipleExamples\"\n        v-model=\"selectedExampleKey\"\n        class=\"response-example-selector px-0\"\n        :examples=\"currentResponseContent?.examples\" />\n      <div class=\"response-description\">\n        <ScalarMarkdown\n          v-if=\"currentResponse?.description\"\n          class=\"response-description-markdown\"\n          :value=\"currentResponse.description\" />\n      </div>\n    </ScalarCardFooter>\n  </ScalarCard>\n</template>\n\n<style scoped>\n.response-card {\n  font-size: var(--scalar-font-size-3);\n}\n\n.code-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  outline: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--scalar-color-3);\n  border: none;\n  padding: 0;\n  margin-right: 12px;\n}\n.code-copy:hover {\n  color: var(--scalar-color-1);\n}\n.code-copy svg {\n  width: 13px;\n  height: 13px;\n}\n.response-card-footer {\n  display: flex;\n  flex-direction: row-reverse;\n  flex-wrap: wrap;\n  justify-content: start;\n  flex-shrink: 0;\n  padding: 7px 12px;\n  column-gap: 8px;\n}\n.response-example-selector {\n  flex-shrink: 0;\n  margin: -4px;\n}\n.response-description {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-small);\n  color: var(--scalar-color--1);\n\n  box-sizing: border-box;\n\n  flex-grow: 1;\n}\n.response-description-markdown {\n  max-height: 3lh;\n}\n\n.response-description-markdown :deep(*) {\n  margin: 0;\n}\n.schema-type {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n  background: var(--scalar-background-3);\n  padding: 2px 4px;\n  border-radius: 4px;\n  margin-right: 4px;\n}\n.schema-example {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n}\n\n.example-response-tab {\n  display: block;\n  margin: 6px;\n}\n\n.scalar-card-checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  min-height: 17px;\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-normal);\n  color: var(--scalar-color-2);\n  width: fit-content;\n  white-space: nowrap;\n  gap: 6px;\n  padding: 7px 6px;\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:focus-visible)\n  .scalar-card-checkbox-checkmark {\n  outline: 1px solid var(--scalar-color-accent);\n}\n.scalar-card-checkbox:hover {\n  color: var(--scalar-color--1);\n}\n.scalar-card-checkbox .scalar-card-checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n.scalar-card-checkbox-checkmark {\n  height: 16px;\n  width: 16px;\n  border-radius: var(--scalar-radius);\n  background-color: transparent;\n  background-color: var(--scalar-background-3);\n  box-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:checked) {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark {\n  background-color: var(--scalar-button-1);\n  box-shadow: none;\n}\n\n.scalar-card-checkbox-checkmark:after {\n  content: '';\n  position: absolute;\n  display: none;\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark:after {\n  display: block;\n}\n\n.scalar-card-checkbox .scalar-card-checkbox-checkmark:after {\n  right: 11.5px;\n  top: 12.5px;\n  width: 5px;\n  height: 9px;\n  border: solid 1px var(--scalar-button-1-color);\n  border-width: 0 1.5px 1.5px 0;\n  transform: rotate(45deg);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ExampleResponses.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponses.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ExamplePicker } from '@scalar/api-client/blocks/operation-code-sample'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { objectKeys } from '@scalar/helpers/object/object-keys'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { getExample } from '@scalar/workspace-store/request-example'\nimport type {\n  MediaTypeObject,\n  ResponsesObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, toValue, useId, watch } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport ExampleSchema from '@/features/example-responses/ExampleSchema.vue'\n\nimport ExampleResponse from './ExampleResponse.vue'\nimport ExampleResponseTab from './ExampleResponseTab.vue'\nimport ExampleResponseTabList from './ExampleResponseTabList.vue'\nimport { hasResponseContent } from './helpers/has-response-content'\nimport { normalizeMimeTypeObject } from './helpers/normalize-mime-type-object'\n\n/**\n * TODO: copyToClipboard isn't using the right content if there are multiple examples\n */\n\nconst { responses } = defineProps<{\n  responses: ResponsesObject\n}>()\n\nconst id = useId()\nconst { copyToClipboard } = useClipboard()\n\n// Bring the status codes in the right order.\nconst orderedStatusCodes = computed<string[]>(() =>\n  Object.keys(responses ?? {}).sort(),\n)\n\n// Filter to only valid response keys that should render in the example responses panel\nconst statusCodesWithContent = computed<string[]>(() =>\n  orderedStatusCodes.value.filter((statusCode) =>\n    hasResponseContent(getResolvedRef(responses?.[statusCode]), statusCode),\n  ),\n)\n\n// Keep track of the current selected tab\nconst selectedResponseIndex = ref<number>(0)\n\n/**\n * Clamp the selected index when the filtered list shrinks.\n * Without this, the index can become out of bounds and cause a mismatch\n * between the visible tabs and the displayed content.\n *\n * We also reset `selectedExampleKey` to match the behavior of `changeTab`,\n * since the new response may not have the same example keys.\n */\nwatch(statusCodesWithContent, (codes) => {\n  if (codes.length === 0) {\n    selectedResponseIndex.value = 0\n    selectedExampleKey.value = ''\n  } else if (selectedResponseIndex.value >= codes.length) {\n    selectedResponseIndex.value = codes.length - 1\n    selectedExampleKey.value = ''\n  }\n})\n\n// Return the whole response object\nconst currentResponse = computed(() => {\n  const currentStatusCode =\n    toValue(statusCodesWithContent)[toValue(selectedResponseIndex)] ?? ''\n\n  return getResolvedRef(responses?.[currentStatusCode])\n})\n\nconst currentResponseContent = computed<MediaTypeObject | undefined>(() => {\n  const normalizedContent = normalizeMimeTypeObject(\n    currentResponse.value?.content,\n  )\n\n  /** All the keys of the normalized content */\n  const keys = objectKeys(normalizedContent ?? {})\n  return normalizedContent?.[keys[0] ?? '']\n})\n\nconst hasMultipleExamples = computed<boolean>(\n  () =>\n    !!currentResponseContent.value?.examples &&\n    Object.keys(currentResponseContent.value?.examples ?? {}).length > 1,\n)\n\nconst selectedExampleKey = ref<string>(\n  Object.keys(currentResponseContent.value?.examples ?? {})[0] ?? '',\n)\n\n/** Get the current example to display */\nconst currentExample = computed(() => {\n  if (!currentResponseContent.value) {\n    return undefined\n  }\n\n  // When multiple examples exist and one is selected, we access it directly\n  if (hasMultipleExamples.value && selectedExampleKey.value) {\n    return currentResponseContent.value.examples?.[selectedExampleKey.value]\n  }\n\n  // Otherwise, we use getExample with an undefined exampleKey to handle fallbacks\n  return getExample(currentResponseContent.value, undefined, undefined)\n})\n\nconst changeTab = (index: number) => {\n  selectedResponseIndex.value = index\n  selectedExampleKey.value = ''\n}\n\nconst showSchema = ref(false)\n</script>\n<template>\n  <ScalarCard\n    v-if=\"statusCodesWithContent.length\"\n    aria-label=\"Example Responses\"\n    class=\"response-card\"\n    role=\"region\">\n    <ExampleResponseTabList @change=\"changeTab\">\n      <ExampleResponseTab\n        v-for=\"statusCode in statusCodesWithContent\"\n        :key=\"statusCode\"\n        :aria-controls=\"id\">\n        <ScreenReader>Status:</ScreenReader>\n        {{ statusCode }}\n      </ExampleResponseTab>\n\n      <template #actions>\n        <button\n          v-if=\"currentResponseContent?.example\"\n          class=\"code-copy\"\n          type=\"button\"\n          @click=\"() => copyToClipboard(currentResponseContent?.example)\">\n          <ScalarIcon\n            icon=\"Clipboard\"\n            width=\"12px\" />\n        </button>\n        <label\n          v-if=\"currentResponseContent?.schema\"\n          class=\"scalar-card-checkbox\">\n          Show Schema\n          <input\n            v-model=\"showSchema\"\n            :aria-controls=\"id\"\n            class=\"scalar-card-checkbox-input\"\n            type=\"checkbox\" />\n          <span class=\"scalar-card-checkbox-checkmark\" />\n        </label>\n      </template>\n    </ExampleResponseTabList>\n    <ScalarCardSection class=\"grid flex-1\">\n      <!-- Schema -->\n      <ExampleSchema\n        v-if=\"currentResponseContent?.schema && showSchema\"\n        :id=\"id\"\n        :schema=\"currentResponseContent?.schema\" />\n\n      <!-- Example -->\n      <ExampleResponse\n        v-else\n        :id=\"id\"\n        :example=\"currentExample\"\n        :response=\"currentResponseContent\" />\n    </ScalarCardSection>\n    <ScalarCardFooter\n      v-if=\"currentResponse?.description || hasMultipleExamples\"\n      class=\"response-card-footer\">\n      <ExamplePicker\n        v-if=\"hasMultipleExamples\"\n        v-model=\"selectedExampleKey\"\n        class=\"response-example-selector px-0\"\n        :examples=\"currentResponseContent?.examples\" />\n      <div class=\"response-description\">\n        <ScalarMarkdown\n          v-if=\"currentResponse?.description\"\n          class=\"response-description-markdown\"\n          :value=\"currentResponse.description\" />\n      </div>\n    </ScalarCardFooter>\n  </ScalarCard>\n</template>\n\n<style scoped>\n.response-card {\n  font-size: var(--scalar-font-size-3);\n}\n\n.code-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  outline: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--scalar-color-3);\n  border: none;\n  padding: 0;\n  margin-right: 12px;\n}\n.code-copy:hover {\n  color: var(--scalar-color-1);\n}\n.code-copy svg {\n  width: 13px;\n  height: 13px;\n}\n.response-card-footer {\n  display: flex;\n  flex-direction: row-reverse;\n  flex-wrap: wrap;\n  justify-content: start;\n  flex-shrink: 0;\n  padding: 7px 12px;\n  column-gap: 8px;\n}\n.response-example-selector {\n  flex-shrink: 0;\n  margin: -4px;\n}\n.response-description {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-small);\n  color: var(--scalar-color--1);\n\n  box-sizing: border-box;\n\n  flex-grow: 1;\n}\n.response-description-markdown {\n  max-height: 3lh;\n}\n\n.response-description-markdown :deep(*) {\n  margin: 0;\n}\n.schema-type {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n  background: var(--scalar-background-3);\n  padding: 2px 4px;\n  border-radius: 4px;\n  margin-right: 4px;\n}\n.schema-example {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n}\n\n.example-response-tab {\n  display: block;\n  margin: 6px;\n}\n\n.scalar-card-checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  min-height: 17px;\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-normal);\n  color: var(--scalar-color-2);\n  width: fit-content;\n  white-space: nowrap;\n  gap: 6px;\n  padding: 7px 6px;\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:focus-visible)\n  .scalar-card-checkbox-checkmark {\n  outline: 1px solid var(--scalar-color-accent);\n}\n.scalar-card-checkbox:hover {\n  color: var(--scalar-color--1);\n}\n.scalar-card-checkbox .scalar-card-checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n.scalar-card-checkbox-checkmark {\n  height: 16px;\n  width: 16px;\n  border-radius: var(--scalar-radius);\n  background-color: transparent;\n  background-color: var(--scalar-background-3);\n  box-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:checked) {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark {\n  background-color: var(--scalar-button-1);\n  box-shadow: none;\n}\n\n.scalar-card-checkbox-checkmark:after {\n  content: '';\n  position: absolute;\n  display: none;\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark:after {\n  display: block;\n}\n\n.scalar-card-checkbox .scalar-card-checkbox-checkmark:after {\n  right: 11.5px;\n  top: 12.5px;\n  width: 5px;\n  height: 9px;\n  border: solid 1px var(--scalar-button-1-color);\n  border-width: 0 1.5px 1.5px 0;\n  transform: rotate(45deg);\n}\n</style>\n"],"mappings":""}

package/dist/features/example-responses/ExampleResponses.vue.script.js

@@ -6,12 +6,14 @@ import ExampleResponseTabList_default from "./ExampleResponseTabList.vue.js";
 import { normalizeMimeTypeObject } from "./helpers/normalize-mime-type-object.js";
 import { hasResponseContent } from "./helpers/has-response-content.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, toDisplayString, toValue, unref, useId, vModelCheckbox, watch, withCtx, withDirectives } from "vue";
-import { ScalarCard, ScalarCardFooter, ScalarCardSection, ScalarIcon, ScalarMarkdown } from "@scalar/components";
 import { useClipboard } from "@scalar/use-hooks/useClipboard";
 import { getExample } from "@scalar/workspace-store/request-example";
 import { ExamplePicker } from "@scalar/api-client/blocks/operation-code-sample";
+import { ScalarMarkdown } from "@scalar/components/markdown";
+import { ScalarIcon } from "@scalar/components/icon";
 import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
 import { objectKeys } from "@scalar/helpers/object/object-keys";
+import { ScalarCard, ScalarCardFooter, ScalarCardSection } from "@scalar/components/card";
 //#region src/features/example-responses/ExampleResponses.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 1,

package/dist/features/example-responses/ExampleResponses.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleResponses.vue.script.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponses.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ExamplePicker } from '@scalar/api-client/blocks/operation-code-sample'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardSection,\n  ScalarIcon,\n  ScalarMarkdown,\n} from '@scalar/components'\nimport { objectKeys } from '@scalar/helpers/object/object-keys'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { getExample } from '@scalar/workspace-store/request-example'\nimport type {\n  MediaTypeObject,\n  ResponsesObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, toValue, useId, watch } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport ExampleSchema from '@/features/example-responses/ExampleSchema.vue'\n\nimport ExampleResponse from './ExampleResponse.vue'\nimport ExampleResponseTab from './ExampleResponseTab.vue'\nimport ExampleResponseTabList from './ExampleResponseTabList.vue'\nimport { hasResponseContent } from './helpers/has-response-content'\nimport { normalizeMimeTypeObject } from './helpers/normalize-mime-type-object'\n\n/**\n * TODO: copyToClipboard isn't using the right content if there are multiple examples\n */\n\nconst { responses } = defineProps<{\n  responses: ResponsesObject\n}>()\n\nconst id = useId()\nconst { copyToClipboard } = useClipboard()\n\n// Bring the status codes in the right order.\nconst orderedStatusCodes = computed<string[]>(() =>\n  Object.keys(responses ?? {}).sort(),\n)\n\n// Filter to only valid response keys that should render in the example responses panel\nconst statusCodesWithContent = computed<string[]>(() =>\n  orderedStatusCodes.value.filter((statusCode) =>\n    hasResponseContent(getResolvedRef(responses?.[statusCode]), statusCode),\n  ),\n)\n\n// Keep track of the current selected tab\nconst selectedResponseIndex = ref<number>(0)\n\n/**\n * Clamp the selected index when the filtered list shrinks.\n * Without this, the index can become out of bounds and cause a mismatch\n * between the visible tabs and the displayed content.\n *\n * We also reset `selectedExampleKey` to match the behavior of `changeTab`,\n * since the new response may not have the same example keys.\n */\nwatch(statusCodesWithContent, (codes) => {\n  if (codes.length === 0) {\n    selectedResponseIndex.value = 0\n    selectedExampleKey.value = ''\n  } else if (selectedResponseIndex.value >= codes.length) {\n    selectedResponseIndex.value = codes.length - 1\n    selectedExampleKey.value = ''\n  }\n})\n\n// Return the whole response object\nconst currentResponse = computed(() => {\n  const currentStatusCode =\n    toValue(statusCodesWithContent)[toValue(selectedResponseIndex)] ?? ''\n\n  return getResolvedRef(responses?.[currentStatusCode])\n})\n\nconst currentResponseContent = computed<MediaTypeObject | undefined>(() => {\n  const normalizedContent = normalizeMimeTypeObject(\n    currentResponse.value?.content,\n  )\n\n  /** All the keys of the normalized content */\n  const keys = objectKeys(normalizedContent ?? {})\n  return normalizedContent?.[keys[0] ?? '']\n})\n\nconst hasMultipleExamples = computed<boolean>(\n  () =>\n    !!currentResponseContent.value?.examples &&\n    Object.keys(currentResponseContent.value?.examples ?? {}).length > 1,\n)\n\nconst selectedExampleKey = ref<string>(\n  Object.keys(currentResponseContent.value?.examples ?? {})[0] ?? '',\n)\n\n/** Get the current example to display */\nconst currentExample = computed(() => {\n  if (!currentResponseContent.value) {\n    return undefined\n  }\n\n  // When multiple examples exist and one is selected, we access it directly\n  if (hasMultipleExamples.value && selectedExampleKey.value) {\n    return currentResponseContent.value.examples?.[selectedExampleKey.value]\n  }\n\n  // Otherwise, we use getExample with an undefined exampleKey to handle fallbacks\n  return getExample(currentResponseContent.value, undefined, undefined)\n})\n\nconst changeTab = (index: number) => {\n  selectedResponseIndex.value = index\n  selectedExampleKey.value = ''\n}\n\nconst showSchema = ref(false)\n</script>\n<template>\n  <ScalarCard\n    v-if=\"statusCodesWithContent.length\"\n    aria-label=\"Example Responses\"\n    class=\"response-card\"\n    role=\"region\">\n    <ExampleResponseTabList @change=\"changeTab\">\n      <ExampleResponseTab\n        v-for=\"statusCode in statusCodesWithContent\"\n        :key=\"statusCode\"\n        :aria-controls=\"id\">\n        <ScreenReader>Status:</ScreenReader>\n        {{ statusCode }}\n      </ExampleResponseTab>\n\n      <template #actions>\n        <button\n          v-if=\"currentResponseContent?.example\"\n          class=\"code-copy\"\n          type=\"button\"\n          @click=\"() => copyToClipboard(currentResponseContent?.example)\">\n          <ScalarIcon\n            icon=\"Clipboard\"\n            width=\"12px\" />\n        </button>\n        <label\n          v-if=\"currentResponseContent?.schema\"\n          class=\"scalar-card-checkbox\">\n          Show Schema\n          <input\n            v-model=\"showSchema\"\n            :aria-controls=\"id\"\n            class=\"scalar-card-checkbox-input\"\n            type=\"checkbox\" />\n          <span class=\"scalar-card-checkbox-checkmark\" />\n        </label>\n      </template>\n    </ExampleResponseTabList>\n    <ScalarCardSection class=\"grid flex-1\">\n      <!-- Schema -->\n      <ExampleSchema\n        v-if=\"currentResponseContent?.schema && showSchema\"\n        :id=\"id\"\n        :schema=\"currentResponseContent?.schema\" />\n\n      <!-- Example -->\n      <ExampleResponse\n        v-else\n        :id=\"id\"\n        :example=\"currentExample\"\n        :response=\"currentResponseContent\" />\n    </ScalarCardSection>\n    <ScalarCardFooter\n      v-if=\"currentResponse?.description || hasMultipleExamples\"\n      class=\"response-card-footer\">\n      <ExamplePicker\n        v-if=\"hasMultipleExamples\"\n        v-model=\"selectedExampleKey\"\n        class=\"response-example-selector px-0\"\n        :examples=\"currentResponseContent?.examples\" />\n      <div class=\"response-description\">\n        <ScalarMarkdown\n          v-if=\"currentResponse?.description\"\n          class=\"response-description-markdown\"\n          :value=\"currentResponse.description\" />\n      </div>\n    </ScalarCardFooter>\n  </ScalarCard>\n</template>\n\n<style scoped>\n.response-card {\n  font-size: var(--scalar-font-size-3);\n}\n\n.code-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  outline: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--scalar-color-3);\n  border: none;\n  padding: 0;\n  margin-right: 12px;\n}\n.code-copy:hover {\n  color: var(--scalar-color-1);\n}\n.code-copy svg {\n  width: 13px;\n  height: 13px;\n}\n.response-card-footer {\n  display: flex;\n  flex-direction: row-reverse;\n  flex-wrap: wrap;\n  justify-content: start;\n  flex-shrink: 0;\n  padding: 7px 12px;\n  column-gap: 8px;\n}\n.response-example-selector {\n  flex-shrink: 0;\n  margin: -4px;\n}\n.response-description {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-small);\n  color: var(--scalar-color--1);\n\n  box-sizing: border-box;\n\n  flex-grow: 1;\n}\n.response-description-markdown {\n  max-height: 3lh;\n}\n\n.response-description-markdown :deep(*) {\n  margin: 0;\n}\n.schema-type {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n  background: var(--scalar-background-3);\n  padding: 2px 4px;\n  border-radius: 4px;\n  margin-right: 4px;\n}\n.schema-example {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n}\n\n.example-response-tab {\n  display: block;\n  margin: 6px;\n}\n\n.scalar-card-checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  min-height: 17px;\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-normal);\n  color: var(--scalar-color-2);\n  width: fit-content;\n  white-space: nowrap;\n  gap: 6px;\n  padding: 7px 6px;\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:focus-visible)\n  .scalar-card-checkbox-checkmark {\n  outline: 1px solid var(--scalar-color-accent);\n}\n.scalar-card-checkbox:hover {\n  color: var(--scalar-color--1);\n}\n.scalar-card-checkbox .scalar-card-checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n.scalar-card-checkbox-checkmark {\n  height: 16px;\n  width: 16px;\n  border-radius: var(--scalar-radius);\n  background-color: transparent;\n  background-color: var(--scalar-background-3);\n  box-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:checked) {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark {\n  background-color: var(--scalar-button-1);\n  box-shadow: none;\n}\n\n.scalar-card-checkbox-checkmark:after {\n  content: '';\n  position: absolute;\n  display: none;\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark:after {\n  display: block;\n}\n\n.scalar-card-checkbox .scalar-card-checkbox-checkmark:after {\n  right: 11.5px;\n  top: 12.5px;\n  width: 5px;\n  height: 9px;\n  border: solid 1px var(--scalar-button-1-color);\n  border-width: 0 1.5px 1.5px 0;\n  transform: rotate(45deg);\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ExampleResponses.vue.script.js","names":[],"sources":["../../../src/features/example-responses/ExampleResponses.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ExamplePicker } from '@scalar/api-client/blocks/operation-code-sample'\nimport {\n  ScalarCard,\n  ScalarCardFooter,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport { objectKeys } from '@scalar/helpers/object/object-keys'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { getExample } from '@scalar/workspace-store/request-example'\nimport type {\n  MediaTypeObject,\n  ResponsesObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, toValue, useId, watch } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport ExampleSchema from '@/features/example-responses/ExampleSchema.vue'\n\nimport ExampleResponse from './ExampleResponse.vue'\nimport ExampleResponseTab from './ExampleResponseTab.vue'\nimport ExampleResponseTabList from './ExampleResponseTabList.vue'\nimport { hasResponseContent } from './helpers/has-response-content'\nimport { normalizeMimeTypeObject } from './helpers/normalize-mime-type-object'\n\n/**\n * TODO: copyToClipboard isn't using the right content if there are multiple examples\n */\n\nconst { responses } = defineProps<{\n  responses: ResponsesObject\n}>()\n\nconst id = useId()\nconst { copyToClipboard } = useClipboard()\n\n// Bring the status codes in the right order.\nconst orderedStatusCodes = computed<string[]>(() =>\n  Object.keys(responses ?? {}).sort(),\n)\n\n// Filter to only valid response keys that should render in the example responses panel\nconst statusCodesWithContent = computed<string[]>(() =>\n  orderedStatusCodes.value.filter((statusCode) =>\n    hasResponseContent(getResolvedRef(responses?.[statusCode]), statusCode),\n  ),\n)\n\n// Keep track of the current selected tab\nconst selectedResponseIndex = ref<number>(0)\n\n/**\n * Clamp the selected index when the filtered list shrinks.\n * Without this, the index can become out of bounds and cause a mismatch\n * between the visible tabs and the displayed content.\n *\n * We also reset `selectedExampleKey` to match the behavior of `changeTab`,\n * since the new response may not have the same example keys.\n */\nwatch(statusCodesWithContent, (codes) => {\n  if (codes.length === 0) {\n    selectedResponseIndex.value = 0\n    selectedExampleKey.value = ''\n  } else if (selectedResponseIndex.value >= codes.length) {\n    selectedResponseIndex.value = codes.length - 1\n    selectedExampleKey.value = ''\n  }\n})\n\n// Return the whole response object\nconst currentResponse = computed(() => {\n  const currentStatusCode =\n    toValue(statusCodesWithContent)[toValue(selectedResponseIndex)] ?? ''\n\n  return getResolvedRef(responses?.[currentStatusCode])\n})\n\nconst currentResponseContent = computed<MediaTypeObject | undefined>(() => {\n  const normalizedContent = normalizeMimeTypeObject(\n    currentResponse.value?.content,\n  )\n\n  /** All the keys of the normalized content */\n  const keys = objectKeys(normalizedContent ?? {})\n  return normalizedContent?.[keys[0] ?? '']\n})\n\nconst hasMultipleExamples = computed<boolean>(\n  () =>\n    !!currentResponseContent.value?.examples &&\n    Object.keys(currentResponseContent.value?.examples ?? {}).length > 1,\n)\n\nconst selectedExampleKey = ref<string>(\n  Object.keys(currentResponseContent.value?.examples ?? {})[0] ?? '',\n)\n\n/** Get the current example to display */\nconst currentExample = computed(() => {\n  if (!currentResponseContent.value) {\n    return undefined\n  }\n\n  // When multiple examples exist and one is selected, we access it directly\n  if (hasMultipleExamples.value && selectedExampleKey.value) {\n    return currentResponseContent.value.examples?.[selectedExampleKey.value]\n  }\n\n  // Otherwise, we use getExample with an undefined exampleKey to handle fallbacks\n  return getExample(currentResponseContent.value, undefined, undefined)\n})\n\nconst changeTab = (index: number) => {\n  selectedResponseIndex.value = index\n  selectedExampleKey.value = ''\n}\n\nconst showSchema = ref(false)\n</script>\n<template>\n  <ScalarCard\n    v-if=\"statusCodesWithContent.length\"\n    aria-label=\"Example Responses\"\n    class=\"response-card\"\n    role=\"region\">\n    <ExampleResponseTabList @change=\"changeTab\">\n      <ExampleResponseTab\n        v-for=\"statusCode in statusCodesWithContent\"\n        :key=\"statusCode\"\n        :aria-controls=\"id\">\n        <ScreenReader>Status:</ScreenReader>\n        {{ statusCode }}\n      </ExampleResponseTab>\n\n      <template #actions>\n        <button\n          v-if=\"currentResponseContent?.example\"\n          class=\"code-copy\"\n          type=\"button\"\n          @click=\"() => copyToClipboard(currentResponseContent?.example)\">\n          <ScalarIcon\n            icon=\"Clipboard\"\n            width=\"12px\" />\n        </button>\n        <label\n          v-if=\"currentResponseContent?.schema\"\n          class=\"scalar-card-checkbox\">\n          Show Schema\n          <input\n            v-model=\"showSchema\"\n            :aria-controls=\"id\"\n            class=\"scalar-card-checkbox-input\"\n            type=\"checkbox\" />\n          <span class=\"scalar-card-checkbox-checkmark\" />\n        </label>\n      </template>\n    </ExampleResponseTabList>\n    <ScalarCardSection class=\"grid flex-1\">\n      <!-- Schema -->\n      <ExampleSchema\n        v-if=\"currentResponseContent?.schema && showSchema\"\n        :id=\"id\"\n        :schema=\"currentResponseContent?.schema\" />\n\n      <!-- Example -->\n      <ExampleResponse\n        v-else\n        :id=\"id\"\n        :example=\"currentExample\"\n        :response=\"currentResponseContent\" />\n    </ScalarCardSection>\n    <ScalarCardFooter\n      v-if=\"currentResponse?.description || hasMultipleExamples\"\n      class=\"response-card-footer\">\n      <ExamplePicker\n        v-if=\"hasMultipleExamples\"\n        v-model=\"selectedExampleKey\"\n        class=\"response-example-selector px-0\"\n        :examples=\"currentResponseContent?.examples\" />\n      <div class=\"response-description\">\n        <ScalarMarkdown\n          v-if=\"currentResponse?.description\"\n          class=\"response-description-markdown\"\n          :value=\"currentResponse.description\" />\n      </div>\n    </ScalarCardFooter>\n  </ScalarCard>\n</template>\n\n<style scoped>\n.response-card {\n  font-size: var(--scalar-font-size-3);\n}\n\n.code-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  outline: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--scalar-color-3);\n  border: none;\n  padding: 0;\n  margin-right: 12px;\n}\n.code-copy:hover {\n  color: var(--scalar-color-1);\n}\n.code-copy svg {\n  width: 13px;\n  height: 13px;\n}\n.response-card-footer {\n  display: flex;\n  flex-direction: row-reverse;\n  flex-wrap: wrap;\n  justify-content: start;\n  flex-shrink: 0;\n  padding: 7px 12px;\n  column-gap: 8px;\n}\n.response-example-selector {\n  flex-shrink: 0;\n  margin: -4px;\n}\n.response-description {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-small);\n  color: var(--scalar-color--1);\n\n  box-sizing: border-box;\n\n  flex-grow: 1;\n}\n.response-description-markdown {\n  max-height: 3lh;\n}\n\n.response-description-markdown :deep(*) {\n  margin: 0;\n}\n.schema-type {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n  background: var(--scalar-background-3);\n  padding: 2px 4px;\n  border-radius: 4px;\n  margin-right: 4px;\n}\n.schema-example {\n  font-size: var(--scalar-micro);\n  color: var(--scalar-color-2);\n  font-weight: var(--scalar-semibold);\n}\n\n.example-response-tab {\n  display: block;\n  margin: 6px;\n}\n\n.scalar-card-checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  min-height: 17px;\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--scalar-small);\n  font-weight: var(--scalar-font-normal);\n  color: var(--scalar-color-2);\n  width: fit-content;\n  white-space: nowrap;\n  gap: 6px;\n  padding: 7px 6px;\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:focus-visible)\n  .scalar-card-checkbox-checkmark {\n  outline: 1px solid var(--scalar-color-accent);\n}\n.scalar-card-checkbox:hover {\n  color: var(--scalar-color--1);\n}\n.scalar-card-checkbox .scalar-card-checkbox-input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n.scalar-card-checkbox-checkmark {\n  height: 16px;\n  width: 16px;\n  border-radius: var(--scalar-radius);\n  background-color: transparent;\n  background-color: var(--scalar-background-3);\n  box-shadow: inset 0 0 0 var(--scalar-border-width) var(--scalar-border-color);\n}\n.scalar-card-checkbox:has(.scalar-card-checkbox-input:checked) {\n  color: var(--scalar-color-1);\n  font-weight: var(--scalar-semibold);\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark {\n  background-color: var(--scalar-button-1);\n  box-shadow: none;\n}\n\n.scalar-card-checkbox-checkmark:after {\n  content: '';\n  position: absolute;\n  display: none;\n}\n\n.scalar-card-checkbox\n  .scalar-card-checkbox-input:checked\n  ~ .scalar-card-checkbox-checkmark:after {\n  display: block;\n}\n\n.scalar-card-checkbox .scalar-card-checkbox-checkmark:after {\n  right: 11.5px;\n  top: 12.5px;\n  width: 5px;\n  height: 9px;\n  border: solid 1px var(--scalar-button-1-color);\n  border-width: 0 1.5px 1.5px 0;\n  transform: rotate(45deg);\n}\n</style>\n"],"mappings":"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"}

package/dist/features/example-responses/ExampleSchema.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleSchema.vue.d.ts","sourceRoot":"","sources":["../../../src/features/example-responses/ExampleSchema.vue"],"names":[],"mappings":"AAiDA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAA;AAC1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oDAAoD,CAAA;AAGtF,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,aAAa,CAAC,YAAY,CAAC,CAAA;CACpC,CAAC;AAsFF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ExampleSchema.vue.d.ts","sourceRoot":"","sources":["../../../src/features/example-responses/ExampleSchema.vue"],"names":[],"mappings":"AAmDA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAA;AAC1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oDAAoD,CAAA;AAGtF,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,aAAa,CAAC,YAAY,CAAC,CAAA;CACpC,CAAC;AAsFF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/example-responses/ExampleSchema.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleSchema.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleSchema.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getResolvedRefDeep } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarCodeBlock, ScalarVirtualText } from '@scalar/components'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport type { ReferenceType } from '@scalar/workspace-store/schemas/v3.1/strict/reference'\nimport type { SchemaObject } from '@scalar/workspace-store/schemas/v3.1/strict/schema'\nimport { computed } from 'vue'\n\nconst { id, schema } = defineProps<{\n  id: string\n  schema: ReferenceType<SchemaObject>\n}>()\n\nconst schemaContent = computed(() => {\n  if (!schema) {\n    return undefined\n  }\n\n  return prettyPrintJson(getResolvedRefDeep(schema))\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualizeSchema = computed(() => {\n  return (schemaContent.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n</script>\n\n<template>\n  <ScalarCodeBlock\n    v-if=\"!shouldVirtualizeSchema\"\n    :id=\"id\"\n    class=\"bg-b-2\"\n    lang=\"json\"\n    :prettyPrintedContent=\"schemaContent ?? ''\" />\n  <ScalarVirtualText\n    v-else\n    :id=\"id\"\n    containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n    contentClass=\"language-plaintext whitespace-pre font-code text-base\"\n    :lineHeight=\"20\"\n    :text=\"schemaContent ?? ''\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"ExampleSchema.vue.js","names":[],"sources":["../../../src/features/example-responses/ExampleSchema.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getResolvedRefDeep } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport type { ReferenceType } from '@scalar/workspace-store/schemas/v3.1/strict/reference'\nimport type { SchemaObject } from '@scalar/workspace-store/schemas/v3.1/strict/schema'\nimport { computed } from 'vue'\n\nconst { id, schema } = defineProps<{\n  id: string\n  schema: ReferenceType<SchemaObject>\n}>()\n\nconst schemaContent = computed(() => {\n  if (!schema) {\n    return undefined\n  }\n\n  return prettyPrintJson(getResolvedRefDeep(schema))\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualizeSchema = computed(() => {\n  return (schemaContent.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n</script>\n\n<template>\n  <ScalarCodeBlock\n    v-if=\"!shouldVirtualizeSchema\"\n    :id=\"id\"\n    class=\"bg-b-2\"\n    lang=\"json\"\n    :prettyPrintedContent=\"schemaContent ?? ''\" />\n  <ScalarVirtualText\n    v-else\n    :id=\"id\"\n    containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n    contentClass=\"language-plaintext whitespace-pre font-code text-base\"\n    :lineHeight=\"20\"\n    :text=\"schemaContent ?? ''\" />\n</template>\n"],"mappings":""}

package/dist/features/example-responses/ExampleSchema.vue.script.js

@@ -1,6 +1,7 @@
 import { computed, createBlock, defineComponent, openBlock, unref } from "vue";
-import { ScalarCodeBlock, ScalarVirtualText } from "@scalar/components";
 import { getResolvedRefDeep } from "@scalar/api-client/blocks/operation-code-sample";
+import { ScalarCodeBlock } from "@scalar/components/code-block";
+import { ScalarVirtualText } from "@scalar/components/virtual-text";
 import { prettyPrintJson } from "@scalar/helpers/json/pretty-print-json";
 //#region src/features/example-responses/ExampleSchema.vue?vue&type=script&setup=true&lang.ts
 var VIRTUALIZATION_THRESHOLD = 2e4;

package/dist/features/example-responses/ExampleSchema.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleSchema.vue.script.js","names":[],"sources":["../../../src/features/example-responses/ExampleSchema.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getResolvedRefDeep } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarCodeBlock, ScalarVirtualText } from '@scalar/components'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport type { ReferenceType } from '@scalar/workspace-store/schemas/v3.1/strict/reference'\nimport type { SchemaObject } from '@scalar/workspace-store/schemas/v3.1/strict/schema'\nimport { computed } from 'vue'\n\nconst { id, schema } = defineProps<{\n  id: string\n  schema: ReferenceType<SchemaObject>\n}>()\n\nconst schemaContent = computed(() => {\n  if (!schema) {\n    return undefined\n  }\n\n  return prettyPrintJson(getResolvedRefDeep(schema))\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualizeSchema = computed(() => {\n  return (schemaContent.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n</script>\n\n<template>\n  <ScalarCodeBlock\n    v-if=\"!shouldVirtualizeSchema\"\n    :id=\"id\"\n    class=\"bg-b-2\"\n    lang=\"json\"\n    :prettyPrintedContent=\"schemaContent ?? ''\" />\n  <ScalarVirtualText\n    v-else\n    :id=\"id\"\n    containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n    contentClass=\"language-plaintext whitespace-pre font-code text-base\"\n    :lineHeight=\"20\"\n    :text=\"schemaContent ?? ''\" />\n</template>\n"],"mappings":";;;;;AAqBA,IAAM,2BAA2B;;;;;;;;EARjC,MAAM,gBAAgB,eAAe;AACnC,OAAI,CAAC,QAAA,OACH;AAGF,UAAO,gBAAgB,mBAAmB,QAAA,OAAO,CAAA;IAClD;EAID,MAAM,yBAAyB,eAAe;AAC5C,WAAQ,cAAc,OAAO,UAAU,KAAK;IAC7C;;WAKU,uBAAA,SAAA,WAAA,EADT,YAKgD,MAAA,gBAAA,EAAA;;IAH7C,IAAI,QAAA;IACL,OAAM;IACN,MAAK;IACJ,sBAAsB,cAAA,SAAa;gEACtC,YAMgC,MAAA,kBAAA,EAAA;;IAJ7B,IAAI,QAAA;IACL,gBAAe;IACf,cAAa;IACZ,YAAY;IACZ,MAAM,cAAA,SAAa"}
+{"version":3,"file":"ExampleSchema.vue.script.js","names":[],"sources":["../../../src/features/example-responses/ExampleSchema.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getResolvedRefDeep } from '@scalar/api-client/blocks/operation-code-sample'\nimport { ScalarCodeBlock } from '@scalar/components/code-block'\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport type { ReferenceType } from '@scalar/workspace-store/schemas/v3.1/strict/reference'\nimport type { SchemaObject } from '@scalar/workspace-store/schemas/v3.1/strict/schema'\nimport { computed } from 'vue'\n\nconst { id, schema } = defineProps<{\n  id: string\n  schema: ReferenceType<SchemaObject>\n}>()\n\nconst schemaContent = computed(() => {\n  if (!schema) {\n    return undefined\n  }\n\n  return prettyPrintJson(getResolvedRefDeep(schema))\n})\n\nconst VIRTUALIZATION_THRESHOLD = 20_000\n\nconst shouldVirtualizeSchema = computed(() => {\n  return (schemaContent.value?.length ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n</script>\n\n<template>\n  <ScalarCodeBlock\n    v-if=\"!shouldVirtualizeSchema\"\n    :id=\"id\"\n    class=\"bg-b-2\"\n    lang=\"json\"\n    :prettyPrintedContent=\"schemaContent ?? ''\" />\n  <ScalarVirtualText\n    v-else\n    :id=\"id\"\n    containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n    contentClass=\"language-plaintext whitespace-pre font-code text-base\"\n    :lineHeight=\"20\"\n    :text=\"schemaContent ?? ''\" />\n</template>\n"],"mappings":";;;;;;AAsBA,IAAM,2BAA2B;;;;;;;;EARjC,MAAM,gBAAgB,eAAe;AACnC,OAAI,CAAC,QAAA,OACH;AAGF,UAAO,gBAAgB,mBAAmB,QAAA,OAAO,CAAA;IAClD;EAID,MAAM,yBAAyB,eAAe;AAC5C,WAAQ,cAAc,OAAO,UAAU,KAAK;IAC7C;;WAKU,uBAAA,SAAA,WAAA,EADT,YAKgD,MAAA,gBAAA,EAAA;;IAH7C,IAAI,QAAA;IACL,OAAM;IACN,MAAK;IACJ,sBAAsB,cAAA,SAAa;gEACtC,YAMgC,MAAA,kBAAA,EAAA;;IAJ7B,IAAI,QAAA;IACL,gBAAe;IACf,cAAa;IACZ,YAAY;IACZ,MAAM,cAAA,SAAa"}

package/dist/features/info-object/Contact.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Contact.vue.js","names":[],"sources":["../../../src/features/info-object/Contact.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva } from '@scalar/components'\nimport { ScalarIconEnvelopeSimple } from '@scalar/icons'\nimport type { ContactObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nconst variants = cva({\n  base: 'text-c-1 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 group-last:mr-0 xl:border-none',\n  variants: {\n    link: {\n      true: 'no-underline hover:bg-b-2',\n    },\n  },\n})\n\ndefineProps<{\n  value?: ContactObject\n}>()\n</script>\n\n<template>\n  <template v-if=\"value\">\n    <div\n      class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n      <a\n        v-if=\"value?.email\"\n        :class=\"variants({ link: true })\"\n        :href=\"`mailto:${value?.email}`\">\n        <ScalarIconEnvelopeSimple\n          weight=\"bold\"\n          class=\"size-3 text-current\" />\n        <span class=\"ml-1 empty:hidden\">{{ value.name }}</span>\n      </a>\n      <span\n        v-else-if=\"value?.name\"\n        :class=\"variants({ link: false })\">\n        {{ value.name }}\n      </span>\n    </div>\n  </template>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Contact.vue.js","names":[],"sources":["../../../src/features/info-object/Contact.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconEnvelopeSimple } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\nimport type { ContactObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nconst variants = cva({\n  base: 'text-c-1 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 group-last:mr-0 xl:border-none',\n  variants: {\n    link: {\n      true: 'no-underline hover:bg-b-2',\n    },\n  },\n})\n\ndefineProps<{\n  value?: ContactObject\n}>()\n</script>\n\n<template>\n  <template v-if=\"value\">\n    <div\n      class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n      <a\n        v-if=\"value?.email\"\n        :class=\"variants({ link: true })\"\n        :href=\"`mailto:${value?.email}`\">\n        <ScalarIconEnvelopeSimple\n          weight=\"bold\"\n          class=\"size-3 text-current\" />\n        <span class=\"ml-1 empty:hidden\">{{ value.name }}</span>\n      </a>\n      <span\n        v-else-if=\"value?.name\"\n        :class=\"variants({ link: false })\">\n        {{ value.name }}\n      </span>\n    </div>\n  </template>\n</template>\n"],"mappings":""}

package/dist/features/info-object/Contact.vue.script.js

@@ -1,6 +1,6 @@
 import { createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
-import { cva } from "@scalar/components";
 import { ScalarIconEnvelopeSimple } from "@scalar/icons";
+import { cva } from "@scalar/use-hooks/useBindCx";
 //#region src/features/info-object/Contact.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,

package/dist/features/info-object/Contact.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"Contact.vue.script.js","names":[],"sources":["../../../src/features/info-object/Contact.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva } from '@scalar/components'\nimport { ScalarIconEnvelopeSimple } from '@scalar/icons'\nimport type { ContactObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nconst variants = cva({\n  base: 'text-c-1 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 group-last:mr-0 xl:border-none',\n  variants: {\n    link: {\n      true: 'no-underline hover:bg-b-2',\n    },\n  },\n})\n\ndefineProps<{\n  value?: ContactObject\n}>()\n</script>\n\n<template>\n  <template v-if=\"value\">\n    <div\n      class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n      <a\n        v-if=\"value?.email\"\n        :class=\"variants({ link: true })\"\n        :href=\"`mailto:${value?.email}`\">\n        <ScalarIconEnvelopeSimple\n          weight=\"bold\"\n          class=\"size-3 text-current\" />\n        <span class=\"ml-1 empty:hidden\">{{ value.name }}</span>\n      </a>\n      <span\n        v-else-if=\"value?.name\"\n        :class=\"variants({ link: false })\">\n        {{ value.name }}\n      </span>\n    </div>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAKA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,MAAM,EACJ,MAAM,6BACP,EACF;GACF,CAAA;;UAQiB,QAAA,SAAA,WAAA,EACd,mBAgBM,OAhBN,YAgBM,CAbI,QAAA,OAAO,SAAA,WAAA,EADf,mBAQI,KAAA;;IAND,OAAK,eAAE,MAAA,SAAQ,CAAA,EAAA,MAAA,MAAA,CAAA,CAAA;IACf,MAAI,UAAY,QAAA,OAAO;OACxB,YAEgC,MAAA,yBAAA,EAAA;IAD9B,QAAO;IACP,OAAM;OACR,mBAAuD,QAAvD,YAAuD,gBAApB,QAAA,MAAM,KAAI,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA,IAGlC,QAAA,OAAO,QAAA,WAAA,EADpB,mBAIO,QAAA;;IAFJ,OAAK,eAAE,MAAA,SAAQ,CAAA,EAAA,MAAA,OAAA,CAAA,CAAA;sBACb,QAAA,MAAM,KAAI,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"Contact.vue.script.js","names":[],"sources":["../../../src/features/info-object/Contact.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconEnvelopeSimple } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\nimport type { ContactObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nconst variants = cva({\n  base: 'text-c-1 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 group-last:mr-0 xl:border-none',\n  variants: {\n    link: {\n      true: 'no-underline hover:bg-b-2',\n    },\n  },\n})\n\ndefineProps<{\n  value?: ContactObject\n}>()\n</script>\n\n<template>\n  <template v-if=\"value\">\n    <div\n      class=\"group flex items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n      <a\n        v-if=\"value?.email\"\n        :class=\"variants({ link: true })\"\n        :href=\"`mailto:${value?.email}`\">\n        <ScalarIconEnvelopeSimple\n          weight=\"bold\"\n          class=\"size-3 text-current\" />\n        <span class=\"ml-1 empty:hidden\">{{ value.name }}</span>\n      </a>\n      <span\n        v-else-if=\"value?.name\"\n        :class=\"variants({ link: false })\">\n        {{ value.name }}\n      </span>\n    </div>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAKA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,MAAM,EACJ,MAAM,6BACP,EACF;GACF,CAAA;;UAQiB,QAAA,SAAA,WAAA,EACd,mBAgBM,OAhBN,YAgBM,CAbI,QAAA,OAAO,SAAA,WAAA,EADf,mBAQI,KAAA;;IAND,OAAK,eAAE,MAAA,SAAQ,CAAA,EAAA,MAAA,MAAA,CAAA,CAAA;IACf,MAAI,UAAY,QAAA,OAAO;OACxB,YAEgC,MAAA,yBAAA,EAAA;IAD9B,QAAO;IACP,OAAM;OACR,mBAAuD,QAAvD,YAAuD,gBAApB,QAAA,MAAM,KAAI,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA,IAGlC,QAAA,OAAO,QAAA,WAAA,EADpB,mBAIO,QAAA;;IAFJ,OAAK,eAAE,MAAA,SAAQ,CAAA,EAAA,MAAA,OAAA,CAAA,CAAA;sBACb,QAAA,MAAM,KAAI,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/features/info-object/License.vue.d.ts

@@ -1,6 +1,7 @@
+import type { AsyncApiLicenseObject } from '@scalar/types/asyncapi/3.1';
 import type { LicenseObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
 type __VLS_Props = {
-    value?: LicenseObject;
+    value?: LicenseObject | AsyncApiLicenseObject;
 };
 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/info-object/License.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"License.vue.d.ts","sourceRoot":"","sources":["../../../src/features/info-object/License.vue"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8DAA8D,CAAA;AAEjG,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAC;AAoGF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"License.vue.d.ts","sourceRoot":"","sources":["../../../src/features/info-object/License.vue"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AACvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8DAA8D,CAAA;AAEjG,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,aAAa,GAAG,qBAAqB,CAAA;CAC9C,CAAC;AAoGF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/info-object/License.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"License.vue.js","names":[],"sources":["../../../src/features/info-object/License.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconGavel } from '@scalar/icons'\nimport type { LicenseObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\ndefineProps<{\n  value?: LicenseObject\n}>()\n</script>\n\n<template>\n  <div\n    class=\"group flex h-fit items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n    <a\n      class=\"text-c-1 hover:bg-b-2 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 no-underline group-last:mr-0 xl:border-none\"\n      v-if=\"value?.url\"\n      :href=\"value.url\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\">\n      <ScalarIconGavel\n        weight=\"bold\"\n        class=\"size-3 text-current\" />\n      <span class=\"ml-1 empty:hidden\">{{\n        value?.name || value.identifier || value.url\n      }}</span>\n    </a>\n    <template v-else>\n      <ScalarIconGavel\n        weight=\"bold\"\n        class=\"size-3 text-current\" />\n      <span class=\"ml-1 empty:hidden\">{{ value?.name }}</span>\n    </template>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"License.vue.js","names":[],"sources":["../../../src/features/info-object/License.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconGavel } from '@scalar/icons'\nimport type { AsyncApiLicenseObject } from '@scalar/types/asyncapi/3.1'\nimport type { LicenseObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\ndefineProps<{\n  value?: LicenseObject | AsyncApiLicenseObject\n}>()\n</script>\n\n<template>\n  <div\n    class=\"group flex h-fit items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n    <a\n      v-if=\"value?.url\"\n      class=\"text-c-1 hover:bg-b-2 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 no-underline group-last:mr-0 xl:border-none\"\n      :href=\"value.url\"\n      rel=\"noopener noreferrer\"\n      target=\"_blank\">\n      <ScalarIconGavel\n        class=\"size-3 text-current\"\n        weight=\"bold\" />\n      <span class=\"ml-1 empty:hidden\">{{\n        value?.name || ('identifier' in value && value.identifier) || value.url\n      }}</span>\n    </a>\n    <template v-else>\n      <ScalarIconGavel\n        class=\"size-3 text-current\"\n        weight=\"bold\" />\n      <span class=\"ml-1 empty:hidden\">{{ value?.name }}</span>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/features/info-object/License.vue.script.js

@@ -14,14 +14,14 @@ var License_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				key: 0,
 				class: "text-c-1 hover:bg-b-2 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 no-underline group-last:mr-0 xl:border-none",
 				href: __props.value.url,
-				target: "_blank",
-				rel: "noopener noreferrer"
+				rel: "noopener noreferrer",
+				target: "_blank"
 			}, [createVNode(unref(ScalarIconGavel), {
-				weight: "bold",
-				class: "size-3 text-current"
-			}), createElementVNode("span", _hoisted_3, toDisplayString(__props.value?.name || __props.value.identifier || __props.value.url), 1)], 8, _hoisted_2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(ScalarIconGavel), {
-				weight: "bold",
-				class: "size-3 text-current"
+				class: "size-3 text-current",
+				weight: "bold"
+			}), createElementVNode("span", _hoisted_3, toDisplayString(__props.value?.name || "identifier" in __props.value && __props.value.identifier || __props.value.url), 1)], 8, _hoisted_2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(ScalarIconGavel), {
+				class: "size-3 text-current",
+				weight: "bold"
 			}), createElementVNode("span", _hoisted_4, toDisplayString(__props.value?.name), 1)], 64))]);
 		};
 	}

package/dist/features/info-object/License.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"License.vue.script.js","names":[],"sources":["../../../src/features/info-object/License.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconGavel } from '@scalar/icons'\nimport type { LicenseObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\ndefineProps<{\n  value?: LicenseObject\n}>()\n</script>\n\n<template>\n  <div\n    class=\"group flex h-fit items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n    <a\n      class=\"text-c-1 hover:bg-b-2 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 no-underline group-last:mr-0 xl:border-none\"\n      v-if=\"value?.url\"\n      :href=\"value.url\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\">\n      <ScalarIconGavel\n        weight=\"bold\"\n        class=\"size-3 text-current\" />\n      <span class=\"ml-1 empty:hidden\">{{\n        value?.name || value.identifier || value.url\n      }}</span>\n    </a>\n    <template v-else>\n      <ScalarIconGavel\n        weight=\"bold\"\n        class=\"size-3 text-current\" />\n      <span class=\"ml-1 empty:hidden\">{{ value?.name }}</span>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;uBAUE,mBAqBM,OArBN,YAqBM,CAjBI,QAAA,OAAO,OAAA,WAAA,EAFf,mBAYI,KAAA;;IAXF,OAAM;IAEL,MAAM,QAAA,MAAM;IACb,QAAO;IACP,KAAI;OACJ,YAEgC,MAAA,gBAAA,EAAA;IAD9B,QAAO;IACP,OAAM;OACR,mBAES,QAFT,YAES,gBADP,QAAA,OAAO,QAAQ,QAAA,MAAM,cAAc,QAAA,MAAM,IAAG,EAAA,EAAA,CAAA,EAAA,GAAA,WAAA,KAAA,WAAA,EAGhD,mBAKW,UAAA,EAAA,KAAA,GAAA,EAAA,CAJT,YAEgC,MAAA,gBAAA,EAAA;IAD9B,QAAO;IACP,OAAM;OACR,mBAAwD,QAAxD,YAAwD,gBAArB,QAAA,OAAO,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA"}
+{"version":3,"file":"License.vue.script.js","names":[],"sources":["../../../src/features/info-object/License.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconGavel } from '@scalar/icons'\nimport type { AsyncApiLicenseObject } from '@scalar/types/asyncapi/3.1'\nimport type { LicenseObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\ndefineProps<{\n  value?: LicenseObject | AsyncApiLicenseObject\n}>()\n</script>\n\n<template>\n  <div\n    class=\"group flex h-fit items-center last:border-r-0 xl:border-r xl:first:ml-auto\">\n    <a\n      v-if=\"value?.url\"\n      class=\"text-c-1 hover:bg-b-2 mr-2 flex min-h-7 min-w-7 items-center rounded-lg border px-2 py-1 no-underline group-last:mr-0 xl:border-none\"\n      :href=\"value.url\"\n      rel=\"noopener noreferrer\"\n      target=\"_blank\">\n      <ScalarIconGavel\n        class=\"size-3 text-current\"\n        weight=\"bold\" />\n      <span class=\"ml-1 empty:hidden\">{{\n        value?.name || ('identifier' in value && value.identifier) || value.url\n      }}</span>\n    </a>\n    <template v-else>\n      <ScalarIconGavel\n        class=\"size-3 text-current\"\n        weight=\"bold\" />\n      <span class=\"ml-1 empty:hidden\">{{ value?.name }}</span>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;uBAWE,mBAqBM,OArBN,YAqBM,CAlBI,QAAA,OAAO,OAAA,WAAA,EADf,mBAYI,KAAA;;IAVF,OAAM;IACL,MAAM,QAAA,MAAM;IACb,KAAI;IACJ,QAAO;OACP,YAEkB,MAAA,gBAAA,EAAA;IADhB,OAAM;IACN,QAAO;OACT,mBAES,QAFT,YAES,gBADP,QAAA,OAAO,QAAI,gBAAqB,QAAA,SAAS,QAAA,MAAM,cAAe,QAAA,MAAM,IAAG,EAAA,EAAA,CAAA,EAAA,GAAA,WAAA,KAAA,WAAA,EAG3E,mBAKW,UAAA,EAAA,KAAA,GAAA,EAAA,CAJT,YAEkB,MAAA,gBAAA,EAAA;IADhB,OAAM;IACN,QAAO;OACT,mBAAwD,QAAxD,YAAwD,gBAArB,QAAA,OAAO,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA"}

package/dist/features/multiple-documents/DocumentSelector.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentSelector.vue.js","names":[],"sources":["../../../src/features/multiple-documents/DocumentSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListbox } from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  options: { label: string; id: string }[]\n  modelValue?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', id: string): void\n}>()\n\nconst formattedOptions = computed(() =>\n  props.options.map((o) => ({ id: o.id, label: o.label })),\n)\n\nconst selected = computed(() =>\n  formattedOptions.value.find((o) => o.id === props.modelValue),\n)\n</script>\n\n<template>\n  <div\n    v-if=\"options.length > 1\"\n    class=\"document-selector px-3 pt-3\">\n    <ScalarListbox\n      v-slot=\"{ open }\"\n      :modelValue=\"selected\"\n      :options=\"formattedOptions\"\n      resize\n      @update:modelValue=\"(e) => emit('update:modelValue', e.id)\">\n      <button\n        class=\"group/dropdown-label text-c-2 hover:text-c-1 flex w-full cursor-pointer items-center gap-1 font-medium\"\n        type=\"button\">\n        <span class=\"overflow-hidden text-base text-ellipsis\">\n          {{ selected?.label || 'Select API' }}\n        </span>\n        <ScalarIconCaretDown\n          class=\"size-3 text-current transition-transform\"\n          :class=\"{ 'rotate-180': open }\"\n          weight=\"bold\" />\n      </button>\n    </ScalarListbox>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DocumentSelector.vue.js","names":[],"sources":["../../../src/features/multiple-documents/DocumentSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  options: { label: string; id: string }[]\n  modelValue?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', id: string): void\n}>()\n\nconst formattedOptions = computed(() =>\n  props.options.map((o) => ({ id: o.id, label: o.label })),\n)\n\nconst selected = computed(() =>\n  formattedOptions.value.find((o) => o.id === props.modelValue),\n)\n</script>\n\n<template>\n  <div\n    v-if=\"options.length > 1\"\n    class=\"document-selector px-3 pt-3\">\n    <ScalarListbox\n      v-slot=\"{ open }\"\n      :modelValue=\"selected\"\n      :options=\"formattedOptions\"\n      resize\n      @update:modelValue=\"(e) => emit('update:modelValue', e.id)\">\n      <button\n        class=\"group/dropdown-label text-c-2 hover:text-c-1 flex w-full cursor-pointer items-center gap-1 font-medium\"\n        type=\"button\">\n        <span class=\"overflow-hidden text-base text-ellipsis\">\n          {{ selected?.label || 'Select API' }}\n        </span>\n        <ScalarIconCaretDown\n          class=\"size-3 text-current transition-transform\"\n          :class=\"{ 'rotate-180': open }\"\n          weight=\"bold\" />\n      </button>\n    </ScalarListbox>\n  </div>\n</template>\n"],"mappings":""}

package/dist/features/multiple-documents/DocumentSelector.vue.script.js

@@ -1,6 +1,6 @@
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
-import { ScalarListbox } from "@scalar/components";
 import { ScalarIconCaretDown } from "@scalar/icons";
+import { ScalarListbox } from "@scalar/components/listbox";
 //#region src/features/multiple-documents/DocumentSelector.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,

package/dist/features/multiple-documents/DocumentSelector.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentSelector.vue.script.js","names":[],"sources":["../../../src/features/multiple-documents/DocumentSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListbox } from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  options: { label: string; id: string }[]\n  modelValue?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', id: string): void\n}>()\n\nconst formattedOptions = computed(() =>\n  props.options.map((o) => ({ id: o.id, label: o.label })),\n)\n\nconst selected = computed(() =>\n  formattedOptions.value.find((o) => o.id === props.modelValue),\n)\n</script>\n\n<template>\n  <div\n    v-if=\"options.length > 1\"\n    class=\"document-selector px-3 pt-3\">\n    <ScalarListbox\n      v-slot=\"{ open }\"\n      :modelValue=\"selected\"\n      :options=\"formattedOptions\"\n      resize\n      @update:modelValue=\"(e) => emit('update:modelValue', e.id)\">\n      <button\n        class=\"group/dropdown-label text-c-2 hover:text-c-1 flex w-full cursor-pointer items-center gap-1 font-medium\"\n        type=\"button\">\n        <span class=\"overflow-hidden text-base text-ellipsis\">\n          {{ selected?.label || 'Select API' }}\n        </span>\n        <ScalarIconCaretDown\n          class=\"size-3 text-current transition-transform\"\n          :class=\"{ 'rotate-180': open }\"\n          weight=\"bold\" />\n      </button>\n    </ScalarListbox>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAIb,MAAM,mBAAmB,eACvB,MAAM,QAAQ,KAAK,OAAO;GAAE,IAAI,EAAE;GAAI,OAAO,EAAE;GAAO,EAAE,CAC1D;EAEA,MAAM,WAAW,eACf,iBAAiB,MAAM,MAAM,MAAM,EAAE,OAAO,MAAM,WAAW,CAC/D;;UAKU,QAAA,QAAQ,SAAM,KAAA,WAAA,EADtB,mBAqBM,OArBN,YAqBM,CAlBJ,YAiBgB,MAAA,cAAA,EAAA;IAfb,YAAY,SAAA;IACZ,SAAS,iBAAA;IACV,QAAA;IACC,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAM,KAAI,qBAAsB,EAAE,GAAE;;sBAWhD,EAfC,WAAI,CAKd,mBAUS,UAVT,YAUS,CAPP,mBAEO,QAFP,YAEO,gBADF,SAAA,OAAU,SAAK,aAAA,EAAA,EAAA,EAEpB,YAGkB,MAAA,oBAAA,EAAA;KAFhB,OAAK,eAAA,CAAC,4CAA0C,EAAA,cACxB,MAAI,CAAA,CAAA;KAC5B,QAAO"}
+{"version":3,"file":"DocumentSelector.vue.script.js","names":[],"sources":["../../../src/features/multiple-documents/DocumentSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  options: { label: string; id: string }[]\n  modelValue?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', id: string): void\n}>()\n\nconst formattedOptions = computed(() =>\n  props.options.map((o) => ({ id: o.id, label: o.label })),\n)\n\nconst selected = computed(() =>\n  formattedOptions.value.find((o) => o.id === props.modelValue),\n)\n</script>\n\n<template>\n  <div\n    v-if=\"options.length > 1\"\n    class=\"document-selector px-3 pt-3\">\n    <ScalarListbox\n      v-slot=\"{ open }\"\n      :modelValue=\"selected\"\n      :options=\"formattedOptions\"\n      resize\n      @update:modelValue=\"(e) => emit('update:modelValue', e.id)\">\n      <button\n        class=\"group/dropdown-label text-c-2 hover:text-c-1 flex w-full cursor-pointer items-center gap-1 font-medium\"\n        type=\"button\">\n        <span class=\"overflow-hidden text-base text-ellipsis\">\n          {{ selected?.label || 'Select API' }}\n        </span>\n        <ScalarIconCaretDown\n          class=\"size-3 text-current transition-transform\"\n          :class=\"{ 'rotate-180': open }\"\n          weight=\"bold\" />\n      </button>\n    </ScalarListbox>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAIb,MAAM,mBAAmB,eACvB,MAAM,QAAQ,KAAK,OAAO;GAAE,IAAI,EAAE;GAAI,OAAO,EAAE;GAAO,EAAE,CAC1D;EAEA,MAAM,WAAW,eACf,iBAAiB,MAAM,MAAM,MAAM,EAAE,OAAO,MAAM,WAAW,CAC/D;;UAKU,QAAA,QAAQ,SAAM,KAAA,WAAA,EADtB,mBAqBM,OArBN,YAqBM,CAlBJ,YAiBgB,MAAA,cAAA,EAAA;IAfb,YAAY,SAAA;IACZ,SAAS,iBAAA;IACV,QAAA;IACC,uBAAiB,OAAA,OAAA,OAAA,MAAG,MAAM,KAAI,qBAAsB,EAAE,GAAE;;sBAWhD,EAfC,WAAI,CAKd,mBAUS,UAVT,YAUS,CAPP,mBAEO,QAFP,YAEO,gBADF,SAAA,OAAU,SAAK,aAAA,EAAA,EAAA,EAEpB,YAGkB,MAAA,oBAAA,EAAA;KAFhB,OAAK,eAAA,CAAC,4CAA0C,EAAA,cACxB,MAAI,CAAA,CAAA;KAC5B,QAAO"}

package/dist/features/specification-extension/SpecificationExtension.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpecificationExtension.vue.js","names":[],"sources":["../../../src/features/specification-extension/SpecificationExtension.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components'\nimport { computed } from 'vue'\n\nimport { usePluginManager } from '@/plugins'\n\nconst { value } = defineProps<{\n  /**\n   * Any value that can contain OpenAPI specification extensions.\n   */\n  value: Record<string, unknown> | undefined\n}>()\n\nconst { getSpecificationExtensions } = usePluginManager()\n\n/**\n * Extract registered OpenAPI extension names\n */\nfunction getCustomExtensionNames(\n  value: Record<string, any> | undefined,\n): `x-${string}`[] {\n  return Object.keys(value ?? {}).filter((item) =>\n    item.startsWith('x-'),\n  ) as `x-${string}`[]\n}\n\n/**\n * Get the components for the specification extensions\n */\nfunction getCustomOpenApiExtensionComponents(extensionNames: `x-${string}`[]) {\n  return extensionNames\n    .flatMap((name) => getSpecificationExtensions(name))\n    .filter((extension) => extension.component)\n}\n\n/**\n * Get the names of custom extensions from the provided value.\n */\nconst customExtensionNames = computed(() => getCustomExtensionNames(value))\n\n/**\n * Get the components for the custom extensions.\n */\nconst customExtensions = computed(() =>\n  getCustomOpenApiExtensionComponents(customExtensionNames.value),\n)\n</script>\n\n<template>\n  <template v-if=\"typeof value === 'object' && customExtensions.length\">\n    <div class=\"text-base\">\n      <template v-for=\"extension in customExtensions\">\n        <ScalarErrorBoundary>\n          <template v-if=\"extension.renderer\">\n            <!-- Custom rendering -->\n            <component\n              :is=\"extension.renderer\"\n              v-bind=\"{\n                [extension.name]: value?.[extension.name],\n                component: extension.component,\n              }\" />\n          </template>\n          <template v-else>\n            <!-- Vue rendering -->\n            <component\n              :is=\"extension.component\"\n              v-bind=\"{ [extension.name]: value?.[extension.name] }\" />\n          </template>\n        </ScalarErrorBoundary>\n      </template>\n    </div>\n  </template>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SpecificationExtension.vue.js","names":[],"sources":["../../../src/features/specification-extension/SpecificationExtension.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { computed } from 'vue'\n\nimport { usePluginManager } from '@/plugins'\n\nconst { value } = defineProps<{\n  /**\n   * Any value that can contain OpenAPI specification extensions.\n   */\n  value: Record<string, unknown> | undefined\n}>()\n\nconst { getSpecificationExtensions } = usePluginManager()\n\n/**\n * Extract registered OpenAPI extension names\n */\nfunction getCustomExtensionNames(\n  value: Record<string, any> | undefined,\n): `x-${string}`[] {\n  return Object.keys(value ?? {}).filter((item) =>\n    item.startsWith('x-'),\n  ) as `x-${string}`[]\n}\n\n/**\n * Get the components for the specification extensions\n */\nfunction getCustomOpenApiExtensionComponents(extensionNames: `x-${string}`[]) {\n  return extensionNames\n    .flatMap((name) => getSpecificationExtensions(name))\n    .filter((extension) => extension.component)\n}\n\n/**\n * Get the names of custom extensions from the provided value.\n */\nconst customExtensionNames = computed(() => getCustomExtensionNames(value))\n\n/**\n * Get the components for the custom extensions.\n */\nconst customExtensions = computed(() =>\n  getCustomOpenApiExtensionComponents(customExtensionNames.value),\n)\n</script>\n\n<template>\n  <template v-if=\"typeof value === 'object' && customExtensions.length\">\n    <div class=\"text-base\">\n      <template v-for=\"extension in customExtensions\">\n        <ScalarErrorBoundary>\n          <template v-if=\"extension.renderer\">\n            <!-- Custom rendering -->\n            <component\n              :is=\"extension.renderer\"\n              v-bind=\"{\n                [extension.name]: value?.[extension.name],\n                component: extension.component,\n              }\" />\n          </template>\n          <template v-else>\n            <!-- Vue rendering -->\n            <component\n              :is=\"extension.component\"\n              v-bind=\"{ [extension.name]: value?.[extension.name] }\" />\n          </template>\n        </ScalarErrorBoundary>\n      </template>\n    </div>\n  </template>\n</template>\n"],"mappings":""}

package/dist/features/specification-extension/SpecificationExtension.vue.script.js

@@ -1,6 +1,6 @@
 import { usePluginManager } from "../../plugins/hooks/usePluginManager.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeProps, openBlock, renderList, resolveDynamicComponent, unref, withCtx } from "vue";
-import { ScalarErrorBoundary } from "@scalar/components";
+import { ScalarErrorBoundary } from "@scalar/components/error-boundary";
 //#region src/features/specification-extension/SpecificationExtension.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,

package/dist/features/specification-extension/SpecificationExtension.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpecificationExtension.vue.script.js","names":[],"sources":["../../../src/features/specification-extension/SpecificationExtension.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components'\nimport { computed } from 'vue'\n\nimport { usePluginManager } from '@/plugins'\n\nconst { value } = defineProps<{\n  /**\n   * Any value that can contain OpenAPI specification extensions.\n   */\n  value: Record<string, unknown> | undefined\n}>()\n\nconst { getSpecificationExtensions } = usePluginManager()\n\n/**\n * Extract registered OpenAPI extension names\n */\nfunction getCustomExtensionNames(\n  value: Record<string, any> | undefined,\n): `x-${string}`[] {\n  return Object.keys(value ?? {}).filter((item) =>\n    item.startsWith('x-'),\n  ) as `x-${string}`[]\n}\n\n/**\n * Get the components for the specification extensions\n */\nfunction getCustomOpenApiExtensionComponents(extensionNames: `x-${string}`[]) {\n  return extensionNames\n    .flatMap((name) => getSpecificationExtensions(name))\n    .filter((extension) => extension.component)\n}\n\n/**\n * Get the names of custom extensions from the provided value.\n */\nconst customExtensionNames = computed(() => getCustomExtensionNames(value))\n\n/**\n * Get the components for the custom extensions.\n */\nconst customExtensions = computed(() =>\n  getCustomOpenApiExtensionComponents(customExtensionNames.value),\n)\n</script>\n\n<template>\n  <template v-if=\"typeof value === 'object' && customExtensions.length\">\n    <div class=\"text-base\">\n      <template v-for=\"extension in customExtensions\">\n        <ScalarErrorBoundary>\n          <template v-if=\"extension.renderer\">\n            <!-- Custom rendering -->\n            <component\n              :is=\"extension.renderer\"\n              v-bind=\"{\n                [extension.name]: value?.[extension.name],\n                component: extension.component,\n              }\" />\n          </template>\n          <template v-else>\n            <!-- Vue rendering -->\n            <component\n              :is=\"extension.component\"\n              v-bind=\"{ [extension.name]: value?.[extension.name] }\" />\n          </template>\n        </ScalarErrorBoundary>\n      </template>\n    </div>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;EAaA,MAAM,EAAE,+BAA+B,kBAAiB;;;;EAKxD,SAAS,wBACP,OACiB;AACjB,UAAO,OAAO,KAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,SACtC,KAAK,WAAW,KAAK,CACtB;;;;;EAMH,SAAS,oCAAoC,gBAAiC;AAC5E,UAAO,eACJ,SAAS,SAAS,2BAA2B,KAAK,CAAA,CAClD,QAAQ,cAAc,UAAU,UAAS;;;;;EAM9C,MAAM,uBAAuB,eAAe,wBAAwB,QAAA,MAAM,CAAA;;;;EAK1E,MAAM,mBAAmB,eACvB,oCAAoC,qBAAqB,MAAM,CACjE;;iBAIyB,QAAA,UAAK,YAAiB,iBAAA,MAAiB,UAAA,WAAA,EAC5D,mBAoBM,OApBN,YAoBM,EAAA,UAAA,KAAA,EAnBJ,mBAkBW,UAAA,MAAA,WAlBmB,iBAAA,QAAb,cAAS;wBACxB,YAgBsB,MAAA,oBAAA,EAAA,MAAA;4BAPT,CARK,UAAU,YAAA,WAAA,EAExB,YAKO,wBAJA,UAAU,SAAQ,EADzB,WAKO;;;;OAHsB,UAAU,OAAO,QAAA,QAAQ,UAAU;iBAAkC,UAAU;oCAO5G,YAE2D,wBADpD,UAAU,UAAS,EAD1B,WAE2D;;;WAA9C,UAAU,OAAO,QAAA,QAAQ,UAAU,OAAI,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA"}
+{"version":3,"file":"SpecificationExtension.vue.script.js","names":[],"sources":["../../../src/features/specification-extension/SpecificationExtension.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\nimport { computed } from 'vue'\n\nimport { usePluginManager } from '@/plugins'\n\nconst { value } = defineProps<{\n  /**\n   * Any value that can contain OpenAPI specification extensions.\n   */\n  value: Record<string, unknown> | undefined\n}>()\n\nconst { getSpecificationExtensions } = usePluginManager()\n\n/**\n * Extract registered OpenAPI extension names\n */\nfunction getCustomExtensionNames(\n  value: Record<string, any> | undefined,\n): `x-${string}`[] {\n  return Object.keys(value ?? {}).filter((item) =>\n    item.startsWith('x-'),\n  ) as `x-${string}`[]\n}\n\n/**\n * Get the components for the specification extensions\n */\nfunction getCustomOpenApiExtensionComponents(extensionNames: `x-${string}`[]) {\n  return extensionNames\n    .flatMap((name) => getSpecificationExtensions(name))\n    .filter((extension) => extension.component)\n}\n\n/**\n * Get the names of custom extensions from the provided value.\n */\nconst customExtensionNames = computed(() => getCustomExtensionNames(value))\n\n/**\n * Get the components for the custom extensions.\n */\nconst customExtensions = computed(() =>\n  getCustomOpenApiExtensionComponents(customExtensionNames.value),\n)\n</script>\n\n<template>\n  <template v-if=\"typeof value === 'object' && customExtensions.length\">\n    <div class=\"text-base\">\n      <template v-for=\"extension in customExtensions\">\n        <ScalarErrorBoundary>\n          <template v-if=\"extension.renderer\">\n            <!-- Custom rendering -->\n            <component\n              :is=\"extension.renderer\"\n              v-bind=\"{\n                [extension.name]: value?.[extension.name],\n                component: extension.component,\n              }\" />\n          </template>\n          <template v-else>\n            <!-- Vue rendering -->\n            <component\n              :is=\"extension.component\"\n              v-bind=\"{ [extension.name]: value?.[extension.name] }\" />\n          </template>\n        </ScalarErrorBoundary>\n      </template>\n    </div>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;EAaA,MAAM,EAAE,+BAA+B,kBAAiB;;;;EAKxD,SAAS,wBACP,OACiB;AACjB,UAAO,OAAO,KAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,SACtC,KAAK,WAAW,KAAK,CACtB;;;;;EAMH,SAAS,oCAAoC,gBAAiC;AAC5E,UAAO,eACJ,SAAS,SAAS,2BAA2B,KAAK,CAAA,CAClD,QAAQ,cAAc,UAAU,UAAS;;;;;EAM9C,MAAM,uBAAuB,eAAe,wBAAwB,QAAA,MAAM,CAAA;;;;EAK1E,MAAM,mBAAmB,eACvB,oCAAoC,qBAAqB,MAAM,CACjE;;iBAIyB,QAAA,UAAK,YAAiB,iBAAA,MAAiB,UAAA,WAAA,EAC5D,mBAoBM,OApBN,YAoBM,EAAA,UAAA,KAAA,EAnBJ,mBAkBW,UAAA,MAAA,WAlBmB,iBAAA,QAAb,cAAS;wBACxB,YAgBsB,MAAA,oBAAA,EAAA,MAAA;4BAPT,CARK,UAAU,YAAA,WAAA,EAExB,YAKO,wBAJA,UAAU,SAAQ,EADzB,WAKO;;;;OAHsB,UAAU,OAAO,QAAA,QAAQ,UAAU;iBAAkC,UAAU;oCAO5G,YAE2D,wBADpD,UAAU,UAAS,EAD1B,WAE2D;;;WAA9C,UAAU,OAAO,QAAA,QAAQ,UAAU,OAAI,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA"}