@scalar/api-client 2.38.1 → 2.38.2

package/dist/ResponseSection-DMJ0tw8E.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponseSection-DMJ0tw8E.js","names":["$emit"],"sources":["../src/views/Request/ResponseSection/ResponseBodyDownload.vue","../src/views/Request/ResponseSection/ResponseBodyDownload.vue","../src/views/Request/ResponseSection/ResponseBodyInfo.vue","../src/views/Request/ResponseSection/ResponseBodyPreview.vue","../src/views/Request/ResponseSection/ResponseBodyPreview.vue","../src/views/Request/ResponseSection/ResponseBodyRaw.vue","../src/views/Request/ResponseSection/ResponseBodyRaw.vue","../src/views/Request/ResponseSection/ResponseBodyToggle.vue","../src/views/Request/ResponseSection/ResponseBodyToggle.vue","../src/views/Request/ResponseSection/ResponseBody.vue","../src/views/Request/ResponseSection/ResponseBody.vue","../src/views/Request/ResponseSection/RequestHeaders.vue","../src/views/Request/ResponseSection/RequestHeaders.vue","../src/views/Request/ResponseSection/ResponseBodyStreaming.vue","../src/views/Request/ResponseSection/ResponseBodyStreaming.vue","../src/views/Request/ResponseSection/ResponseBodyVirtual.vue","../src/views/Request/ResponseSection/ResponseBodyVirtual.vue","../src/views/Request/ResponseSection/ResponseCookies.vue","../src/views/Request/ResponseSection/ResponseCookies.vue","../src/views/Request/ResponseSection/ResponseEmpty.vue","../src/views/Request/ResponseSection/ResponseEmpty.vue","../src/views/Request/ResponseSection/ResponseHeaders.vue","../src/views/Request/ResponseSection/ResponseHeaders.vue","../src/views/Request/ResponseSection/ResponseLoadingOverlay.vue","../src/views/Request/ResponseSection/ResponseLoadingOverlay.vue","../src/views/Request/ResponseSection/ResponseMetaInformation.vue","../src/views/Request/ResponseSection/ResponseMetaInformation.vue","../src/views/Request/ResponseSection/ResponseSection.vue","../src/views/Request/ResponseSection/ResponseSection.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIcon } from '@scalar/components'\nimport { computed } from 'vue'\n\nimport { getMediaTypeConfig } from '@/views/Request/consts'\n\nconst props = defineProps<{\n  href: string\n  type?: string\n  filename?: string\n}>()\n\nconst filenameExtension = computed(() => {\n  const extension =\n    getMediaTypeConfig(props.type ?? '')?.extension ?? '.unknown'\n  return props.filename ? props.filename : `response${extension}`\n})\n</script>\n<template>\n  <a\n    class=\"text-c-3 text-xxs hover:bg-b-3 flex items-center gap-1 rounded px-1.5 py-0.5 no-underline\"\n    :download=\"`${filenameExtension}`\"\n    :href=\"href\"\n    @click.stop>\n    <ScalarIcon\n      icon=\"Download\"\n      size=\"xs\" />\n    <span>\n      <span>Download</span>\n      <span class=\"sr-only\">Response Body</span>\n    </span>\n  </a>\n</template>\n","<script lang=\"ts\" setup>\nimport { ScalarIcon } from '@scalar/components'\nimport { computed } from 'vue'\n\nimport { getMediaTypeConfig } from '@/views/Request/consts'\n\nconst props = defineProps<{\n  href: string\n  type?: string\n  filename?: string\n}>()\n\nconst filenameExtension = computed(() => {\n  const extension =\n    getMediaTypeConfig(props.type ?? '')?.extension ?? '.unknown'\n  return props.filename ? props.filename : `response${extension}`\n})\n</script>\n<template>\n  <a\n    class=\"text-c-3 text-xxs hover:bg-b-3 flex items-center gap-1 rounded px-1.5 py-0.5 no-underline\"\n    :download=\"`${filenameExtension}`\"\n    :href=\"href\"\n    @click.stop>\n    <ScalarIcon\n      icon=\"Download\"\n      size=\"xs\" />\n    <span>\n      <span>Download</span>\n      <span class=\"sr-only\">Response Body</span>\n    </span>\n  </a>\n</template>\n","<template>\n  <div class=\"flex justify-center px-2 py-3\">\n    <div class=\"text-c-3 p-2 text-sm\"><slot /></div>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, watch } from 'vue'\n\nimport type { MediaPreview } from '@/views/Request/consts'\n\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\n\nconst {\n  src,\n  type,\n  mode,\n  alpha = false,\n} = defineProps<{\n  src: string\n  type: string\n  mode: MediaPreview\n  alpha?: boolean | undefined\n}>()\n\nconst error = ref(false)\n\nwatch(\n  () => src,\n  () => (error.value = false),\n)\n</script>\n<template>\n  <div\n    v-if=\"!error && src\"\n    class=\"flex justify-center overflow-auto rounded-b\"\n    :class=\"{ 'bg-preview p-2': alpha }\">\n    <img\n      v-if=\"mode === 'image'\"\n      class=\"h-full max-w-full\"\n      :class=\"{ rounded: alpha }\"\n      :src=\"src\"\n      @error=\"error = true\" />\n    <video\n      v-else-if=\"mode === 'video'\"\n      autoplay\n      controls\n      width=\"100%\"\n      @error=\"error = true\">\n      <source\n        :src=\"src\"\n        :type=\"type\" />\n    </video>\n    <audio\n      v-else-if=\"mode === 'audio'\"\n      class=\"my-12\"\n      controls\n      @error=\"error = true\">\n      <source\n        :src=\"src\"\n        :type=\"type\" />\n    </audio>\n    <object\n      v-else\n      class=\"aspect-[4/3] w-full\"\n      :data=\"src\"\n      :type=\"type\"\n      @error=\"error = true\" />\n  </div>\n  <ResponseBodyInfo v-else>Preview unavailable</ResponseBodyInfo>\n</template>\n<style scoped>\n.light-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n.dark-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFF' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { ref, watch } from 'vue'\n\nimport type { MediaPreview } from '@/views/Request/consts'\n\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\n\nconst {\n  src,\n  type,\n  mode,\n  alpha = false,\n} = defineProps<{\n  src: string\n  type: string\n  mode: MediaPreview\n  alpha?: boolean | undefined\n}>()\n\nconst error = ref(false)\n\nwatch(\n  () => src,\n  () => (error.value = false),\n)\n</script>\n<template>\n  <div\n    v-if=\"!error && src\"\n    class=\"flex justify-center overflow-auto rounded-b\"\n    :class=\"{ 'bg-preview p-2': alpha }\">\n    <img\n      v-if=\"mode === 'image'\"\n      class=\"h-full max-w-full\"\n      :class=\"{ rounded: alpha }\"\n      :src=\"src\"\n      @error=\"error = true\" />\n    <video\n      v-else-if=\"mode === 'video'\"\n      autoplay\n      controls\n      width=\"100%\"\n      @error=\"error = true\">\n      <source\n        :src=\"src\"\n        :type=\"type\" />\n    </video>\n    <audio\n      v-else-if=\"mode === 'audio'\"\n      class=\"my-12\"\n      controls\n      @error=\"error = true\">\n      <source\n        :src=\"src\"\n        :type=\"type\" />\n    </audio>\n    <object\n      v-else\n      class=\"aspect-[4/3] w-full\"\n      :data=\"src\"\n      :type=\"type\"\n      @error=\"error = true\" />\n  </div>\n  <ResponseBodyInfo v-else>Preview unavailable</ResponseBodyInfo>\n</template>\n<style scoped>\n.light-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n.dark-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFF' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { ScalarCodeBlockCopy } from '@scalar/components'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { useCodeMirror, type CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport { ref, toRef, useId } from 'vue'\n\nconst props = defineProps<{\n  content: any\n  language: CodeMirrorLanguage | undefined\n}>()\n\nconst codeMirrorRef = ref<HTMLDivElement | null>(null)\n/** Base id for the code block */\nconst id = useId()\n\nconst { codeMirror } = useCodeMirror({\n  codeMirrorRef,\n  readOnly: true,\n  lineNumbers: true,\n  content: toRef(() => prettyPrintJson(props.content)),\n  language: toRef(() => props.language),\n  forceFoldGutter: true,\n})\n\n// Function to get current content\nconst getCurrentContent = () => {\n  return codeMirror.value?.state.doc.toString() || ''\n}\n</script>\n<template>\n  <div\n    class=\"scalar-code-block group/code-block body-raw flex min-h-0 flex-col overflow-hidden p-px outline-none has-focus-visible:outline\">\n    <div\n      class=\"body-raw-scroller custom-scroll relative pr-1\"\n      tabindex=\"0\">\n      <!-- CodeMirror container -->\n      <div ref=\"codeMirrorRef\" />\n    </div>\n    <!-- Copy button -->\n    <ScalarCodeBlockCopy\n      v-if=\"getCurrentContent()\"\n      :content=\"getCurrentContent()\"\n      :aria-controls=\"id\"\n      :lang=\"language\"\n      class=\"absolute top-2 right-2\" />\n  </div>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  background-color: transparent;\n  font-size: var(--scalar-small);\n  outline: none;\n}\n\n:deep(.cm-gutters) {\n  background-color: var(--scalar-background-1);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n}\n\n.body-raw :deep(.cm-scroller) {\n  overflow: auto;\n  min-width: 100%;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { ScalarCodeBlockCopy } from '@scalar/components'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { useCodeMirror, type CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport { ref, toRef, useId } from 'vue'\n\nconst props = defineProps<{\n  content: any\n  language: CodeMirrorLanguage | undefined\n}>()\n\nconst codeMirrorRef = ref<HTMLDivElement | null>(null)\n/** Base id for the code block */\nconst id = useId()\n\nconst { codeMirror } = useCodeMirror({\n  codeMirrorRef,\n  readOnly: true,\n  lineNumbers: true,\n  content: toRef(() => prettyPrintJson(props.content)),\n  language: toRef(() => props.language),\n  forceFoldGutter: true,\n})\n\n// Function to get current content\nconst getCurrentContent = () => {\n  return codeMirror.value?.state.doc.toString() || ''\n}\n</script>\n<template>\n  <div\n    class=\"scalar-code-block group/code-block body-raw flex min-h-0 flex-col overflow-hidden p-px outline-none has-focus-visible:outline\">\n    <div\n      class=\"body-raw-scroller custom-scroll relative pr-1\"\n      tabindex=\"0\">\n      <!-- CodeMirror container -->\n      <div ref=\"codeMirrorRef\" />\n    </div>\n    <!-- Copy button -->\n    <ScalarCodeBlockCopy\n      v-if=\"getCurrentContent()\"\n      :content=\"getCurrentContent()\"\n      :aria-controls=\"id\"\n      :lang=\"language\"\n      class=\"absolute top-2 right-2\" />\n  </div>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  background-color: transparent;\n  font-size: var(--scalar-small);\n  outline: none;\n}\n\n:deep(.cm-gutters) {\n  background-color: var(--scalar-background-1);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n}\n\n.body-raw :deep(.cm-scroller) {\n  overflow: auto;\n  min-width: 100%;\n}\n</style>\n","<script lang=\"ts\" setup>\ndefineProps<{\n  modelValue: boolean\n}>()\ndefineEmits<{\n  (e: 'update:modelValue', v: boolean): void\n}>()\n</script>\n<template>\n  <div\n    class=\"text-c-3 text-xxs -my-1 flex justify-center gap-0.5 rounded p-0.5\">\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': modelValue }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', true)\">\n      Preview\n    </button>\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': !modelValue }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', false)\">\n      Raw\n    </button>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\ndefineProps<{\n  modelValue: boolean\n}>()\ndefineEmits<{\n  (e: 'update:modelValue', v: boolean): void\n}>()\n</script>\n<template>\n  <div\n    class=\"text-c-3 text-xxs -my-1 flex justify-center gap-0.5 rounded p-0.5\">\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': modelValue }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', true)\">\n      Preview\n    </button>\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': !modelValue }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', false)\">\n      Raw\n    </button>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { computed, ref, toRef } from 'vue'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useResponseBody } from '@/hooks/useResponseBody'\nimport { getMediaTypeConfig } from '@/views/Request/consts'\n\nimport ResponseBodyDownload from './ResponseBodyDownload.vue'\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\nimport ResponseBodyPreview from './ResponseBodyPreview.vue'\nimport ResponseBodyRaw from './ResponseBodyRaw.vue'\nimport ResponseBodyToggle from './ResponseBodyToggle.vue'\n\nconst props = defineProps<{\n  title: string\n  layout: 'client' | 'reference'\n  data: unknown\n  headers: { name: string; value: string; required: boolean }[]\n}>()\n\n/** Preview / Raw toggle */\nconst toggle = ref(true)\n\nconst showToggle = computed(\n  () => !!(mediaConfig.value?.raw && mediaConfig.value.preview),\n)\n\nconst showPreview = computed(() => toggle.value || !showToggle.value)\nconst showRaw = computed(() => !toggle.value || !showToggle.value)\n\nconst { mimeType, attachmentFilename, dataUrl } = useResponseBody({\n  data: toRef(props, 'data'),\n  headers: toRef(props, 'headers'),\n})\n\nconst mediaConfig = computed(() => getMediaTypeConfig(mimeType.value.essence))\n</script>\n<template>\n  <ViewLayoutCollapse\n    class=\"max-h-content overflow-y-hidden\"\n    :layout=\"layout\">\n    <template #title>{{ title }}</template>\n    <template\n      v-if=\"data && dataUrl\"\n      #actions>\n      <ResponseBodyDownload\n        :filename=\"attachmentFilename\"\n        :href=\"dataUrl\"\n        :type=\"mimeType.essence\" />\n    </template>\n    <div\n      v-if=\"data\"\n      class=\"bg-b-1 flex max-h-[calc(100%-32px)] flex-col overflow-hidden\">\n      <div\n        class=\"box-content flex min-h-8 items-center justify-between border-y px-3\">\n        <span class=\"text-xxs font-code leading-5\">\n          {{ mimeType.essence }}\n        </span>\n        <ResponseBodyToggle\n          v-if=\"showToggle\"\n          v-model=\"toggle\" />\n      </div>\n      <ResponseBodyRaw\n        v-if=\"mediaConfig?.raw && showRaw\"\n        :key=\"dataUrl\"\n        :content=\"data\"\n        :language=\"mediaConfig.language\" />\n      <ResponseBodyPreview\n        v-if=\"mediaConfig?.preview && showPreview\"\n        :key=\"dataUrl\"\n        :alpha=\"mediaConfig.alpha\"\n        :mode=\"mediaConfig.preview\"\n        :src=\"dataUrl\"\n        :type=\"mimeType.essence\" />\n      <ResponseBodyInfo v-if=\"!mediaConfig?.raw && !mediaConfig?.preview\">\n        Binary file\n      </ResponseBodyInfo>\n    </div>\n  </ViewLayoutCollapse>\n</template>\n<style scoped>\n.scalar-code-block:deep(.hljs *) {\n  font-size: var(--scalar-small);\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { computed, ref, toRef } from 'vue'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useResponseBody } from '@/hooks/useResponseBody'\nimport { getMediaTypeConfig } from '@/views/Request/consts'\n\nimport ResponseBodyDownload from './ResponseBodyDownload.vue'\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\nimport ResponseBodyPreview from './ResponseBodyPreview.vue'\nimport ResponseBodyRaw from './ResponseBodyRaw.vue'\nimport ResponseBodyToggle from './ResponseBodyToggle.vue'\n\nconst props = defineProps<{\n  title: string\n  layout: 'client' | 'reference'\n  data: unknown\n  headers: { name: string; value: string; required: boolean }[]\n}>()\n\n/** Preview / Raw toggle */\nconst toggle = ref(true)\n\nconst showToggle = computed(\n  () => !!(mediaConfig.value?.raw && mediaConfig.value.preview),\n)\n\nconst showPreview = computed(() => toggle.value || !showToggle.value)\nconst showRaw = computed(() => !toggle.value || !showToggle.value)\n\nconst { mimeType, attachmentFilename, dataUrl } = useResponseBody({\n  data: toRef(props, 'data'),\n  headers: toRef(props, 'headers'),\n})\n\nconst mediaConfig = computed(() => getMediaTypeConfig(mimeType.value.essence))\n</script>\n<template>\n  <ViewLayoutCollapse\n    class=\"max-h-content overflow-y-hidden\"\n    :layout=\"layout\">\n    <template #title>{{ title }}</template>\n    <template\n      v-if=\"data && dataUrl\"\n      #actions>\n      <ResponseBodyDownload\n        :filename=\"attachmentFilename\"\n        :href=\"dataUrl\"\n        :type=\"mimeType.essence\" />\n    </template>\n    <div\n      v-if=\"data\"\n      class=\"bg-b-1 flex max-h-[calc(100%-32px)] flex-col overflow-hidden\">\n      <div\n        class=\"box-content flex min-h-8 items-center justify-between border-y px-3\">\n        <span class=\"text-xxs font-code leading-5\">\n          {{ mimeType.essence }}\n        </span>\n        <ResponseBodyToggle\n          v-if=\"showToggle\"\n          v-model=\"toggle\" />\n      </div>\n      <ResponseBodyRaw\n        v-if=\"mediaConfig?.raw && showRaw\"\n        :key=\"dataUrl\"\n        :content=\"data\"\n        :language=\"mediaConfig.language\" />\n      <ResponseBodyPreview\n        v-if=\"mediaConfig?.preview && showPreview\"\n        :key=\"dataUrl\"\n        :alpha=\"mediaConfig.alpha\"\n        :mode=\"mediaConfig.preview\"\n        :src=\"dataUrl\"\n        :type=\"mimeType.essence\" />\n      <ResponseBodyInfo v-if=\"!mediaConfig?.raw && !mediaConfig?.preview\">\n        Binary file\n      </ResponseBodyInfo>\n    </div>\n  </ViewLayoutCollapse>\n</template>\n<style scoped>\n.scalar-code-block:deep(.hljs *) {\n  font-size: var(--scalar-small);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { DataTableHeader } from '@/components/DataTable'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport DataTableText from '@/components/DataTable/DataTableText.vue'\nimport HelpfulLink from '@/components/HelpfulLink.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { httpHeaders } from '@/data/httpHeaders'\n\ntype Header = { name: string; value: string; required: boolean }\n\ndefineProps<{\n  headers: Header[]\n}>()\n\nconst findHeaderInfo = (name: string) => {\n  return httpHeaders.find(\n    (header) => header.name.toLowerCase() === name.toLowerCase(),\n  )\n}\n</script>\n<template>\n  <ViewLayoutCollapse\n    class=\"overflow-auto\"\n    :defaultOpen=\"false\"\n    :itemCount=\"headers.length\">\n    <template #title>Request Headers</template>\n    <div\n      v-if=\"headers.length\"\n      class=\"max-h-[calc(100%-32px)] overflow-y-auto\">\n      <DataTable\n        :columns=\"['minmax(auto, min-content)', 'minmax(50%, 1fr)']\"\n        scroll>\n        <DataTableRow class=\"sr-only !block\">\n          <DataTableHeader>Header Key</DataTableHeader>\n          <DataTableHeader>Header Value</DataTableHeader>\n        </DataTableRow>\n        <DataTableRow\n          v-for=\"item in headers\"\n          :key=\"item.name\"\n          class=\"group/row text-c-1\">\n          <DataTableText\n            class=\"bg-b-1 sticky left-0 z-1 max-w-full group-first/row:border-t-0\">\n            <template v-if=\"typeof findHeaderInfo(item.name)?.url === 'string'\">\n              <HelpfulLink\n                class=\"decoration-c-3\"\n                :href=\"findHeaderInfo(item.name)!.url\">\n                {{ item.name }}\n              </HelpfulLink>\n            </template>\n            <template v-else>\n              {{ item.name }}\n            </template>\n          </DataTableText>\n          <DataTableText\n            class=\"z-0 group-first/row:border-t-0\"\n            :text=\"item.value\" />\n        </DataTableRow>\n      </DataTable>\n    </div>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"text-c-3 bg-b-1 flex min-h-12 items-center justify-center rounded border px-4 text-base\">\n      No Headers\n    </div>\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport { DataTableHeader } from '@/components/DataTable'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport DataTableText from '@/components/DataTable/DataTableText.vue'\nimport HelpfulLink from '@/components/HelpfulLink.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { httpHeaders } from '@/data/httpHeaders'\n\ntype Header = { name: string; value: string; required: boolean }\n\ndefineProps<{\n  headers: Header[]\n}>()\n\nconst findHeaderInfo = (name: string) => {\n  return httpHeaders.find(\n    (header) => header.name.toLowerCase() === name.toLowerCase(),\n  )\n}\n</script>\n<template>\n  <ViewLayoutCollapse\n    class=\"overflow-auto\"\n    :defaultOpen=\"false\"\n    :itemCount=\"headers.length\">\n    <template #title>Request Headers</template>\n    <div\n      v-if=\"headers.length\"\n      class=\"max-h-[calc(100%-32px)] overflow-y-auto\">\n      <DataTable\n        :columns=\"['minmax(auto, min-content)', 'minmax(50%, 1fr)']\"\n        scroll>\n        <DataTableRow class=\"sr-only !block\">\n          <DataTableHeader>Header Key</DataTableHeader>\n          <DataTableHeader>Header Value</DataTableHeader>\n        </DataTableRow>\n        <DataTableRow\n          v-for=\"item in headers\"\n          :key=\"item.name\"\n          class=\"group/row text-c-1\">\n          <DataTableText\n            class=\"bg-b-1 sticky left-0 z-1 max-w-full group-first/row:border-t-0\">\n            <template v-if=\"typeof findHeaderInfo(item.name)?.url === 'string'\">\n              <HelpfulLink\n                class=\"decoration-c-3\"\n                :href=\"findHeaderInfo(item.name)!.url\">\n                {{ item.name }}\n              </HelpfulLink>\n            </template>\n            <template v-else>\n              {{ item.name }}\n            </template>\n          </DataTableText>\n          <DataTableText\n            class=\"z-0 group-first/row:border-t-0\"\n            :text=\"item.value\" />\n        </DataTableRow>\n      </DataTable>\n    </div>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"text-c-3 bg-b-1 flex min-h-12 items-center justify-center rounded border px-4 text-base\">\n      No Headers\n    </div>\n  </ViewLayoutCollapse>\n</template>\n","<script lang=\"ts\" setup>\nimport { ScalarLoading, useLoadingState } from '@scalar/components'\nimport { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\n\nconst { reader } = defineProps<{\n  reader: ReadableStreamDefaultReader<Uint8Array>\n}>()\n\nconst loader = useLoadingState()\n\nconst textContent = ref('')\nconst errorRef = ref<Error | null>(null)\nconst decoder = new TextDecoder()\nconst contentContainer = ref<HTMLElement | null>(null)\n\n/**\n * Scrolls the content container to the bottom\n */\nconst scrollToBottom = () => {\n  if (contentContainer.value) {\n    contentContainer.value.scrollTop = contentContainer.value.scrollHeight\n  }\n}\n\n// Watch for changes in textContent and scroll to bottom\nwatch(textContent, () => {\n  // Use nextTick to ensure the DOM has updated\n  nextTick(scrollToBottom)\n})\n\n/**\n * Reads the stream and appends the content\n */\nasync function readStream() {\n  try {\n    while (loader.isLoading) {\n      const { done, value } = await reader.read()\n\n      if (done) {\n        loader.clear()\n        break\n      }\n\n      // Decode the Uint8Array to string and append to content\n      if (value) {\n        textContent.value += decoder.decode(value, { stream: true })\n      }\n    }\n  } catch (error) {\n    console.error('Error reading stream:', error)\n    loader.clear()\n    errorRef.value = error as Error\n  } finally {\n    // Make sure to decode any remaining bytes\n    textContent.value += decoder.decode()\n  }\n}\n\nonMounted(() => {\n  loader.start()\n  readStream()\n  errorRef.value = null\n})\n\nonBeforeUnmount(() => {\n  reader.cancel()\n  loader.clear()\n})\n</script>\n\n<template>\n  <ViewLayoutCollapse class=\"max-h-content overflow-y-hidden\">\n    <template #title>\n      <div class=\"flex w-full items-center justify-between\">\n        <div>Body</div>\n        <div\n          v-if=\"loader.isActive\"\n          class=\"mr-2 flex items-center gap-2\">\n          <ScalarLoading\n            :loader\n            size=\"xs\" />\n          <span class=\"text-c-2\"> Listening… </span>\n        </div>\n      </div>\n    </template>\n\n    <div\n      ref=\"contentContainer\"\n      class=\"text-xxs font-code h-full overflow-auto leading-6 whitespace-pre-wrap\">\n      <template v-if=\"errorRef\">\n        <div class=\"text-red bg-b-danger sticky top-0 border-b p-2\">\n          {{ errorRef.message }}\n        </div>\n      </template>\n      <template v-if=\"textContent\">\n        <div class=\"p-2\">\n          {{ textContent }}\n        </div>\n      </template>\n    </div>\n  </ViewLayoutCollapse>\n</template>\n","<script lang=\"ts\" setup>\nimport { ScalarLoading, useLoadingState } from '@scalar/components'\nimport { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\n\nconst { reader } = defineProps<{\n  reader: ReadableStreamDefaultReader<Uint8Array>\n}>()\n\nconst loader = useLoadingState()\n\nconst textContent = ref('')\nconst errorRef = ref<Error | null>(null)\nconst decoder = new TextDecoder()\nconst contentContainer = ref<HTMLElement | null>(null)\n\n/**\n * Scrolls the content container to the bottom\n */\nconst scrollToBottom = () => {\n  if (contentContainer.value) {\n    contentContainer.value.scrollTop = contentContainer.value.scrollHeight\n  }\n}\n\n// Watch for changes in textContent and scroll to bottom\nwatch(textContent, () => {\n  // Use nextTick to ensure the DOM has updated\n  nextTick(scrollToBottom)\n})\n\n/**\n * Reads the stream and appends the content\n */\nasync function readStream() {\n  try {\n    while (loader.isLoading) {\n      const { done, value } = await reader.read()\n\n      if (done) {\n        loader.clear()\n        break\n      }\n\n      // Decode the Uint8Array to string and append to content\n      if (value) {\n        textContent.value += decoder.decode(value, { stream: true })\n      }\n    }\n  } catch (error) {\n    console.error('Error reading stream:', error)\n    loader.clear()\n    errorRef.value = error as Error\n  } finally {\n    // Make sure to decode any remaining bytes\n    textContent.value += decoder.decode()\n  }\n}\n\nonMounted(() => {\n  loader.start()\n  readStream()\n  errorRef.value = null\n})\n\nonBeforeUnmount(() => {\n  reader.cancel()\n  loader.clear()\n})\n</script>\n\n<template>\n  <ViewLayoutCollapse class=\"max-h-content overflow-y-hidden\">\n    <template #title>\n      <div class=\"flex w-full items-center justify-between\">\n        <div>Body</div>\n        <div\n          v-if=\"loader.isActive\"\n          class=\"mr-2 flex items-center gap-2\">\n          <ScalarLoading\n            :loader\n            size=\"xs\" />\n          <span class=\"text-c-2\"> Listening… </span>\n        </div>\n      </div>\n    </template>\n\n    <div\n      ref=\"contentContainer\"\n      class=\"text-xxs font-code h-full overflow-auto leading-6 whitespace-pre-wrap\">\n      <template v-if=\"errorRef\">\n        <div class=\"text-red bg-b-danger sticky top-0 border-b p-2\">\n          {{ errorRef.message }}\n        </div>\n      </template>\n      <template v-if=\"textContent\">\n        <div class=\"p-2\">\n          {{ textContent }}\n        </div>\n      </template>\n    </div>\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarVirtualText } from '@scalar/components'\nimport { formatJsonOrYamlString } from '@scalar/oas-utils/helpers'\nimport { computed, toRef } from 'vue'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useResponseBody } from '@/hooks/useResponseBody'\n\nimport ResponseBodyDownload from './ResponseBodyDownload.vue'\n\nconst props = defineProps<{\n  content: string\n  data: unknown\n  headers: { name: string; value: string; required: boolean }[]\n}>()\n\nconst textContent = computed(() => formatJsonOrYamlString(props.content))\n\nconst { mimeType, attachmentFilename, dataUrl } = useResponseBody({\n  data: toRef(props, 'data'),\n  headers: toRef(props, 'headers'),\n})\n</script>\n\n<template>\n  <ViewLayoutCollapse class=\"!max-h-100% response-body-virtual overflow-x-auto\">\n    <template #title>Body</template>\n    <template\n      v-if=\"dataUrl\"\n      #actions>\n      <ResponseBodyDownload\n        :filename=\"attachmentFilename\"\n        :href=\"dataUrl\"\n        :type=\"mimeType.essence\" />\n    </template>\n    <div class=\"font-code text-xxs rounded-t border border-b-0 px-2.5 py-1.5\">\n      This response body is massive! Syntax highlighting won't work here.\n    </div>\n    <ScalarVirtualText\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=\"textContent\" />\n  </ViewLayoutCollapse>\n</template>\n\n<style>\n.response-body-virtual[data-headlessui-state='open'],\n.response-body-virtual[data-headlessui-state='open'] .diclosure-panel {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarVirtualText } from '@scalar/components'\nimport { formatJsonOrYamlString } from '@scalar/oas-utils/helpers'\nimport { computed, toRef } from 'vue'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useResponseBody } from '@/hooks/useResponseBody'\n\nimport ResponseBodyDownload from './ResponseBodyDownload.vue'\n\nconst props = defineProps<{\n  content: string\n  data: unknown\n  headers: { name: string; value: string; required: boolean }[]\n}>()\n\nconst textContent = computed(() => formatJsonOrYamlString(props.content))\n\nconst { mimeType, attachmentFilename, dataUrl } = useResponseBody({\n  data: toRef(props, 'data'),\n  headers: toRef(props, 'headers'),\n})\n</script>\n\n<template>\n  <ViewLayoutCollapse class=\"!max-h-100% response-body-virtual overflow-x-auto\">\n    <template #title>Body</template>\n    <template\n      v-if=\"dataUrl\"\n      #actions>\n      <ResponseBodyDownload\n        :filename=\"attachmentFilename\"\n        :href=\"dataUrl\"\n        :type=\"mimeType.essence\" />\n    </template>\n    <div class=\"font-code text-xxs rounded-t border border-b-0 px-2.5 py-1.5\">\n      This response body is massive! Syntax highlighting won't work here.\n    </div>\n    <ScalarVirtualText\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=\"textContent\" />\n  </ViewLayoutCollapse>\n</template>\n\n<style>\n.response-body-virtual[data-headlessui-state='open'],\n.response-body-virtual[data-headlessui-state='open'] .diclosure-panel {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n</style>\n","<script setup lang=\"ts\">\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport DataTableText from '@/components/DataTable/DataTableText.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\n\ndefineProps<{\n  cookies: { name: string; value: string; required: boolean }[]\n}>()\n</script>\n<template>\n  <ViewLayoutCollapse :defaultOpen=\"false\">\n    <template #title>Cookies</template>\n    <template v-if=\"true\">\n      <DataTable\n        v-if=\"cookies.length\"\n        class=\"flex-1\"\n        :columns=\"['', '']\">\n        <DataTableRow\n          v-for=\"item in cookies\"\n          :key=\"item.name\">\n          <DataTableText :text=\"item.name\" />\n          <DataTableText :text=\"item.value\" />\n        </DataTableRow>\n      </DataTable>\n      <!-- Empty state -->\n      <div\n        v-else\n        class=\"text-c-3 bg-b-1 flex min-h-[65px] items-center justify-center border-t px-4 text-sm\">\n        No cookies\n      </div>\n    </template>\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport DataTableText from '@/components/DataTable/DataTableText.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\n\ndefineProps<{\n  cookies: { name: string; value: string; required: boolean }[]\n}>()\n</script>\n<template>\n  <ViewLayoutCollapse :defaultOpen=\"false\">\n    <template #title>Cookies</template>\n    <template v-if=\"true\">\n      <DataTable\n        v-if=\"cookies.length\"\n        class=\"flex-1\"\n        :columns=\"['', '']\">\n        <DataTableRow\n          v-for=\"item in cookies\"\n          :key=\"item.name\">\n          <DataTableText :text=\"item.name\" />\n          <DataTableText :text=\"item.value\" />\n        </DataTableRow>\n      </DataTable>\n      <!-- Empty state -->\n      <div\n        v-else\n        class=\"text-c-3 bg-b-1 flex min-h-[65px] items-center justify-center border-t px-4 text-sm\">\n        No cookies\n      </div>\n    </template>\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarHotkey } from '@scalar/components'\nimport type { Collection, Operation } from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { nextTick, onBeforeUnmount, onMounted } from 'vue'\nimport { useRoute, useRouter } from 'vue-router'\n\nimport Computer from '@/assets/computer.ascii?raw'\nimport EmptyState from '@/components/EmptyState.vue'\nimport ScalarAsciiArt from '@/components/ScalarAsciiArt.vue'\nimport { useLayout } from '@/hooks'\nimport type { HotKeyEvent } from '@/libs'\nimport { useWorkspace } from '@/store'\n\nconst { numWorkspaceRequests, collection, operation, workspace } = defineProps<{\n  collection: Collection\n  operation: Operation\n  workspace: Workspace\n  numWorkspaceRequests: number\n}>()\n\nconst { events, requestMutators } = useWorkspace()\nconst route = useRoute()\nconst router = useRouter()\nconst { layout } = useLayout()\n\nconst addRequest = () => {\n  // If the request has tags, add the first tag to the new request\n  const requestData = operation.tags?.length\n    ? { tags: operation.tags[0] ? [operation.tags[0]] : [] }\n    : {}\n\n  const newRequest = requestMutators.add(requestData, collection.uid)\n\n  if (newRequest) {\n    router.push({\n      name: 'request',\n      params: {\n        workspace: workspace.uid,\n        request: newRequest.uid,\n      },\n    })\n\n    nextTick(() => {\n      events.hotKeys.emit({\n        focusAddressBar: new KeyboardEvent('keydown', { key: 'l' }),\n      })\n    })\n  }\n}\n\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (event?.createNew && route.name === 'request') {\n    addRequest()\n  }\n}\n\nconst packageVersion = PACKAGE_VERSION\n\nonMounted(() => events.hotKeys.on(handleHotKey))\nonBeforeUnmount(() => events.hotKeys.off(handleHotKey))\n</script>\n<template>\n  <div class=\"flex-center relative flex flex-1 flex-col gap-6 p-2 capitalize\">\n    <div\n      class=\"flex h-[calc(100%_-_50px)] flex-col items-center justify-center\"\n      :class=\"{\n        'hidden opacity-0': numWorkspaceRequests <= 1 && layout !== 'modal',\n      }\">\n      <div\n        v-if=\"layout !== 'modal'\"\n        class=\"scalar-version-number\">\n        Scalar App V{{ packageVersion }} Beta\n        <div class=\"mt-2\">\n          <a\n            href=\"https://github.com/scalar/scalar/issues/2669\"\n            target=\"_blank\">\n            Roadmap\n          </a>\n        </div>\n      </div>\n      <a\n        class=\"gitbook-show scalar-version-number\"\n        href=\"https://www.scalar.com\"\n        target=\"_blank\">\n        Powered By Scalar.com\n      </a>\n      <ScalarAsciiArt\n        :art=\"Computer\"\n        class=\"text-c-3\" />\n    </div>\n    <div\n      v-if=\"layout !== 'modal'\"\n      class=\"hidden h-[calc(100%_-_50px)] items-center justify-center pb-5\"\n      :class=\"{\n        '!flex opacity-100': numWorkspaceRequests == 1,\n      }\">\n      <EmptyState />\n    </div>\n    <div\n      class=\"text-c-3 right-4 mt-auto flex w-full flex-col items-end gap-2 text-sm\">\n      <button\n        v-if=\"layout !== 'modal'\"\n        class=\"flex items-center gap-1.5\"\n        type=\"button\"\n        @click=\"events.commandPalette.emit()\">\n        Get Started\n        <ScalarHotkey hotkey=\"k\" />\n      </button>\n      <button\n        v-if=\"layout === 'desktop'\"\n        class=\"flex items-center gap-1.5\"\n        type=\"button\"\n        @click=\"addRequest()\">\n        New Request\n        <ScalarHotkey hotkey=\"N\" />\n      </button>\n      <button\n        class=\"flex items-center gap-1.5\"\n        type=\"button\"\n        @click=\"events.executeRequest.emit()\">\n        Send Request\n        <ScalarHotkey hotkey=\"↵\" />\n      </button>\n    </div>\n  </div>\n</template>\n<style scoped>\n.scalar-version-number {\n  transform: skew(0deg, 13deg);\n  width: 76px;\n  height: 76px;\n  position: absolute;\n  margin-left: -36px;\n  font-size: 8px;\n  font-family: var(--scalar-font-code);\n  line-height: 11px;\n  margin-top: -113px;\n  border-radius: 9px 9px 16px 12px;\n  box-shadow: inset 2px 0px 0 2px var(--scalar-background-2);\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-transform: initial;\n  text-decoration-color: var(--scalar-color-3);\n}\n.scalar-version-number a {\n  font-weight: bold;\n  font-weight: bold;\n  background: var(--scalar-background-2);\n  padding: 2px 4px;\n  border-radius: 3px;\n  text-decoration: none;\n  border: 0.5px solid var(--scalar-border-color);\n}\n\n.gitbook-show {\n  display: none;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarHotkey } from '@scalar/components'\nimport type { Collection, Operation } from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { nextTick, onBeforeUnmount, onMounted } from 'vue'\nimport { useRoute, useRouter } from 'vue-router'\n\nimport Computer from '@/assets/computer.ascii?raw'\nimport EmptyState from '@/components/EmptyState.vue'\nimport ScalarAsciiArt from '@/components/ScalarAsciiArt.vue'\nimport { useLayout } from '@/hooks'\nimport type { HotKeyEvent } from '@/libs'\nimport { useWorkspace } from '@/store'\n\nconst { numWorkspaceRequests, collection, operation, workspace } = defineProps<{\n  collection: Collection\n  operation: Operation\n  workspace: Workspace\n  numWorkspaceRequests: number\n}>()\n\nconst { events, requestMutators } = useWorkspace()\nconst route = useRoute()\nconst router = useRouter()\nconst { layout } = useLayout()\n\nconst addRequest = () => {\n  // If the request has tags, add the first tag to the new request\n  const requestData = operation.tags?.length\n    ? { tags: operation.tags[0] ? [operation.tags[0]] : [] }\n    : {}\n\n  const newRequest = requestMutators.add(requestData, collection.uid)\n\n  if (newRequest) {\n    router.push({\n      name: 'request',\n      params: {\n        workspace: workspace.uid,\n        request: newRequest.uid,\n      },\n    })\n\n    nextTick(() => {\n      events.hotKeys.emit({\n        focusAddressBar: new KeyboardEvent('keydown', { key: 'l' }),\n      })\n    })\n  }\n}\n\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (event?.createNew && route.name === 'request') {\n    addRequest()\n  }\n}\n\nconst packageVersion = PACKAGE_VERSION\n\nonMounted(() => events.hotKeys.on(handleHotKey))\nonBeforeUnmount(() => events.hotKeys.off(handleHotKey))\n</script>\n<template>\n  <div class=\"flex-center relative flex flex-1 flex-col gap-6 p-2 capitalize\">\n    <div\n      class=\"flex h-[calc(100%_-_50px)] flex-col items-center justify-center\"\n      :class=\"{\n        'hidden opacity-0': numWorkspaceRequests <= 1 && layout !== 'modal',\n      }\">\n      <div\n        v-if=\"layout !== 'modal'\"\n        class=\"scalar-version-number\">\n        Scalar App V{{ packageVersion }} Beta\n        <div class=\"mt-2\">\n          <a\n            href=\"https://github.com/scalar/scalar/issues/2669\"\n            target=\"_blank\">\n            Roadmap\n          </a>\n        </div>\n      </div>\n      <a\n        class=\"gitbook-show scalar-version-number\"\n        href=\"https://www.scalar.com\"\n        target=\"_blank\">\n        Powered By Scalar.com\n      </a>\n      <ScalarAsciiArt\n        :art=\"Computer\"\n        class=\"text-c-3\" />\n    </div>\n    <div\n      v-if=\"layout !== 'modal'\"\n      class=\"hidden h-[calc(100%_-_50px)] items-center justify-center pb-5\"\n      :class=\"{\n        '!flex opacity-100': numWorkspaceRequests == 1,\n      }\">\n      <EmptyState />\n    </div>\n    <div\n      class=\"text-c-3 right-4 mt-auto flex w-full flex-col items-end gap-2 text-sm\">\n      <button\n        v-if=\"layout !== 'modal'\"\n        class=\"flex items-center gap-1.5\"\n        type=\"button\"\n        @click=\"events.commandPalette.emit()\">\n        Get Started\n        <ScalarHotkey hotkey=\"k\" />\n      </button>\n      <button\n        v-if=\"layout === 'desktop'\"\n        class=\"flex items-center gap-1.5\"\n        type=\"button\"\n        @click=\"addRequest()\">\n        New Request\n        <ScalarHotkey hotkey=\"N\" />\n      </button>\n      <button\n        class=\"flex items-center gap-1.5\"\n        type=\"button\"\n        @click=\"events.executeRequest.emit()\">\n        Send Request\n        <ScalarHotkey hotkey=\"↵\" />\n      </button>\n    </div>\n  </div>\n</template>\n<style scoped>\n.scalar-version-number {\n  transform: skew(0deg, 13deg);\n  width: 76px;\n  height: 76px;\n  position: absolute;\n  margin-left: -36px;\n  font-size: 8px;\n  font-family: var(--scalar-font-code);\n  line-height: 11px;\n  margin-top: -113px;\n  border-radius: 9px 9px 16px 12px;\n  box-shadow: inset 2px 0px 0 2px var(--scalar-background-2);\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-transform: initial;\n  text-decoration-color: var(--scalar-color-3);\n}\n.scalar-version-number a {\n  font-weight: bold;\n  font-weight: bold;\n  background: var(--scalar-background-2);\n  padding: 2px 4px;\n  border-radius: 3px;\n  text-decoration: none;\n  border: 0.5px solid var(--scalar-border-color);\n}\n\n.gitbook-show {\n  display: none;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { DataTableHeader } from '@/components/DataTable'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport DataTableText from '@/components/DataTable/DataTableText.vue'\nimport HelpfulLink from '@/components/HelpfulLink.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { httpHeaders } from '@/data/httpHeaders'\n\ntype Header = { name: string; value: string; required: boolean }\n\ndefineProps<{\n  headers: Header[]\n}>()\n\nconst findHeaderInfo = (name: string) => {\n  return httpHeaders.find(\n    (header) => header.name.toLowerCase() === name.toLowerCase(),\n  )\n}\n</script>\n<template>\n  <ViewLayoutCollapse\n    class=\"overflow-auto\"\n    :defaultOpen=\"false\"\n    :itemCount=\"headers.length\">\n    <template #title>Response Headers</template>\n    <div\n      v-if=\"headers.length\"\n      class=\"max-h-[calc(100%-32px)] overflow-y-auto\">\n      <DataTable\n        :columns=\"['minmax(auto, min-content)', 'minmax(50%, 1fr)']\"\n        scroll>\n        <DataTableRow class=\"sr-only !block\">\n          <DataTableHeader>Header Key</DataTableHeader>\n          <DataTableHeader>Header Value</DataTableHeader>\n        </DataTableRow>\n        <DataTableRow\n          v-for=\"item in headers\"\n          :key=\"item.name\"\n          class=\"group/row text-c-1\">\n          <DataTableText\n            class=\"bg-b-1 sticky left-0 z-1 max-w-full group-first/row:border-t-0\">\n            <template v-if=\"typeof findHeaderInfo(item.name)?.url === 'string'\">\n              <HelpfulLink\n                class=\"decoration-c-3\"\n                :href=\"findHeaderInfo(item.name)!.url\">\n                {{ item.name }}\n              </HelpfulLink>\n            </template>\n            <template v-else>\n              {{ item.name }}\n            </template>\n          </DataTableText>\n          <DataTableText\n            class=\"z-0 group-first/row:border-t-0\"\n            :text=\"item.value\" />\n        </DataTableRow>\n      </DataTable>\n    </div>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"text-c-3 bg-b-1 flex min-h-12 items-center justify-center rounded border px-4 text-base\">\n      No Headers\n    </div>\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport { DataTableHeader } from '@/components/DataTable'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport DataTableText from '@/components/DataTable/DataTableText.vue'\nimport HelpfulLink from '@/components/HelpfulLink.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { httpHeaders } from '@/data/httpHeaders'\n\ntype Header = { name: string; value: string; required: boolean }\n\ndefineProps<{\n  headers: Header[]\n}>()\n\nconst findHeaderInfo = (name: string) => {\n  return httpHeaders.find(\n    (header) => header.name.toLowerCase() === name.toLowerCase(),\n  )\n}\n</script>\n<template>\n  <ViewLayoutCollapse\n    class=\"overflow-auto\"\n    :defaultOpen=\"false\"\n    :itemCount=\"headers.length\">\n    <template #title>Response Headers</template>\n    <div\n      v-if=\"headers.length\"\n      class=\"max-h-[calc(100%-32px)] overflow-y-auto\">\n      <DataTable\n        :columns=\"['minmax(auto, min-content)', 'minmax(50%, 1fr)']\"\n        scroll>\n        <DataTableRow class=\"sr-only !block\">\n          <DataTableHeader>Header Key</DataTableHeader>\n          <DataTableHeader>Header Value</DataTableHeader>\n        </DataTableRow>\n        <DataTableRow\n          v-for=\"item in headers\"\n          :key=\"item.name\"\n          class=\"group/row text-c-1\">\n          <DataTableText\n            class=\"bg-b-1 sticky left-0 z-1 max-w-full group-first/row:border-t-0\">\n            <template v-if=\"typeof findHeaderInfo(item.name)?.url === 'string'\">\n              <HelpfulLink\n                class=\"decoration-c-3\"\n                :href=\"findHeaderInfo(item.name)!.url\">\n                {{ item.name }}\n              </HelpfulLink>\n            </template>\n            <template v-else>\n              {{ item.name }}\n            </template>\n          </DataTableText>\n          <DataTableText\n            class=\"z-0 group-first/row:border-t-0\"\n            :text=\"item.value\" />\n        </DataTableRow>\n      </DataTable>\n    </div>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"text-c-3 bg-b-1 flex min-h-12 items-center justify-center rounded border px-4 text-base\">\n      No Headers\n    </div>\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarLoading,\n  useLoadingState,\n} from '@scalar/components'\nimport { ref } from 'vue'\n\nimport { useWorkspace } from '@/store'\n\nconst { events } = useWorkspace()\nconst loader = useLoadingState()\n\nconst timeout = ref<ReturnType<typeof setTimeout>>()\n\nevents.requestStatus.on(async (status) => {\n  if (status === 'start') {\n    timeout.value = setTimeout(() => loader.start(), 1000)\n  } else {\n    clearTimeout(timeout.value)\n    timeout.value = undefined\n    await loader.clear()\n  }\n})\n</script>\n<template>\n  <Transition>\n    <div\n      v-if=\"loader.isActive\"\n      class=\"bg-b-1 z-overlay absolute inset-0 flex flex-col items-center justify-center gap-6\">\n      <ScalarLoading\n        class=\"text-c-3\"\n        :loader\n        size=\"3xl\" />\n      <ScalarButton\n        variant=\"ghost\"\n        @click=\"events.cancelRequest.emit()\">\n        Cancel\n      </ScalarButton>\n    </div>\n  </Transition>\n</template>\n<style scoped>\n.v-enter-active {\n  transition: opacity 0.5s ease;\n}\n\n.v-enter-from {\n  opacity: 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarLoading,\n  useLoadingState,\n} from '@scalar/components'\nimport { ref } from 'vue'\n\nimport { useWorkspace } from '@/store'\n\nconst { events } = useWorkspace()\nconst loader = useLoadingState()\n\nconst timeout = ref<ReturnType<typeof setTimeout>>()\n\nevents.requestStatus.on(async (status) => {\n  if (status === 'start') {\n    timeout.value = setTimeout(() => loader.start(), 1000)\n  } else {\n    clearTimeout(timeout.value)\n    timeout.value = undefined\n    await loader.clear()\n  }\n})\n</script>\n<template>\n  <Transition>\n    <div\n      v-if=\"loader.isActive\"\n      class=\"bg-b-1 z-overlay absolute inset-0 flex flex-col items-center justify-center gap-6\">\n      <ScalarLoading\n        class=\"text-c-3\"\n        :loader\n        size=\"3xl\" />\n      <ScalarButton\n        variant=\"ghost\"\n        @click=\"events.cancelRequest.emit()\">\n        Cancel\n      </ScalarButton>\n    </div>\n  </Transition>\n</template>\n<style scoped>\n.v-enter-active {\n  transition: opacity 0.5s ease;\n}\n\n.v-enter-from {\n  opacity: 0;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport type { ResponseInstance } from '@scalar/oas-utils/entities/spec'\nimport { httpStatusCodes, type HttpStatusCode } from '@scalar/oas-utils/helpers'\nimport prettyBytes from 'pretty-bytes'\nimport prettyMilliseconds from 'pretty-ms'\nimport { computed, ref } from 'vue'\n\nimport HelpfulLink from '@/components/HelpfulLink.vue'\nimport { useWorkspace } from '@/store'\n\nconst props = defineProps<{ response: ResponseInstance }>()\n\nconst { events } = useWorkspace()\nconst interval = ref<ReturnType<typeof setInterval>>()\nconst stopwatch = ref(0)\n\nevents.requestStatus.on((status) => {\n  if (status === 'start') {\n    interval.value = setInterval(() => (stopwatch.value += 1000), 1000)\n  } else {\n    clearInterval(interval.value)\n    interval.value = undefined\n    stopwatch.value = 0\n  }\n})\n\n/** Size of the response */\nconst getContentLength = (response: ResponseInstance) => {\n  const contentLength = Number.parseInt(\n    response.headers?.['Content-Length'] ||\n      response.headers?.['content-length'] ||\n      '0',\n    10,\n  )\n\n  return contentLength ? prettyBytes(contentLength) : undefined\n}\n\n/** Status text for the response */\nconst statusCodeInformation = computed((): HttpStatusCode | undefined => {\n  const responseStatusCode = props.response.status\n\n  if (!responseStatusCode) {\n    return undefined\n  }\n\n  return httpStatusCodes[responseStatusCode] ?? undefined\n})\n</script>\n<template>\n  <div class=\"text-c-1 flex gap-1.5\">\n    <span v-if=\"interval && stopwatch\">{{\n      prettyMilliseconds(stopwatch)\n    }}</span>\n    <template v-else>\n      <span>\n        <span class=\"sr-only\">Response Information, Duration:</span>\n        {{ prettyMilliseconds(response.duration) }}\n      </span>\n      <span v-if=\"getContentLength(response)\">\n        <span class=\"sr-only\">, Size:</span>\n        {{ getContentLength(response) }}\n      </span>\n      <template v-if=\"statusCodeInformation\">\n        <span class=\"sr-only\">, Status:</span>\n        <HelpfulLink\n          v-if=\"statusCodeInformation.url\"\n          class=\"flex items-center gap-1.5\"\n          :href=\"statusCodeInformation.url\">\n          {{ response.status }} {{ statusCodeInformation.name }}\n          <span\n            class=\"block h-1.5 w-1.5 rounded-full\"\n            :style=\"{ backgroundColor: statusCodeInformation.color }\" />\n        </HelpfulLink>\n        <span v-else>\n          {{ response.status }} {{ statusCodeInformation.name }}\n          <span\n            class=\"block h-1.5 w-1.5 rounded-full\"\n            :style=\"{ backgroundColor: statusCodeInformation.color }\" />\n        </span>\n      </template>\n    </template>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport type { ResponseInstance } from '@scalar/oas-utils/entities/spec'\nimport { httpStatusCodes, type HttpStatusCode } from '@scalar/oas-utils/helpers'\nimport prettyBytes from 'pretty-bytes'\nimport prettyMilliseconds from 'pretty-ms'\nimport { computed, ref } from 'vue'\n\nimport HelpfulLink from '@/components/HelpfulLink.vue'\nimport { useWorkspace } from '@/store'\n\nconst props = defineProps<{ response: ResponseInstance }>()\n\nconst { events } = useWorkspace()\nconst interval = ref<ReturnType<typeof setInterval>>()\nconst stopwatch = ref(0)\n\nevents.requestStatus.on((status) => {\n  if (status === 'start') {\n    interval.value = setInterval(() => (stopwatch.value += 1000), 1000)\n  } else {\n    clearInterval(interval.value)\n    interval.value = undefined\n    stopwatch.value = 0\n  }\n})\n\n/** Size of the response */\nconst getContentLength = (response: ResponseInstance) => {\n  const contentLength = Number.parseInt(\n    response.headers?.['Content-Length'] ||\n      response.headers?.['content-length'] ||\n      '0',\n    10,\n  )\n\n  return contentLength ? prettyBytes(contentLength) : undefined\n}\n\n/** Status text for the response */\nconst statusCodeInformation = computed((): HttpStatusCode | undefined => {\n  const responseStatusCode = props.response.status\n\n  if (!responseStatusCode) {\n    return undefined\n  }\n\n  return httpStatusCodes[responseStatusCode] ?? undefined\n})\n</script>\n<template>\n  <div class=\"text-c-1 flex gap-1.5\">\n    <span v-if=\"interval && stopwatch\">{{\n      prettyMilliseconds(stopwatch)\n    }}</span>\n    <template v-else>\n      <span>\n        <span class=\"sr-only\">Response Information, Duration:</span>\n        {{ prettyMilliseconds(response.duration) }}\n      </span>\n      <span v-if=\"getContentLength(response)\">\n        <span class=\"sr-only\">, Size:</span>\n        {{ getContentLength(response) }}\n      </span>\n      <template v-if=\"statusCodeInformation\">\n        <span class=\"sr-only\">, Status:</span>\n        <HelpfulLink\n          v-if=\"statusCodeInformation.url\"\n          class=\"flex items-center gap-1.5\"\n          :href=\"statusCodeInformation.url\">\n          {{ response.status }} {{ statusCodeInformation.name }}\n          <span\n            class=\"block h-1.5 w-1.5 rounded-full\"\n            :style=\"{ backgroundColor: statusCodeInformation.color }\" />\n        </HelpfulLink>\n        <span v-else>\n          {{ response.status }} {{ statusCodeInformation.name }}\n          <span\n            class=\"block h-1.5 w-1.5 rounded-full\"\n            :style=\"{ backgroundColor: statusCodeInformation.color }\" />\n        </span>\n      </template>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components'\nimport type {\n  Collection,\n  Operation,\n  ResponseInstance,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { computed, ref, useId } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport type { SendRequestResult } from '@/libs/send-request/create-request-operation'\nimport { usePluginManager } from '@/plugins'\n\nimport RequestHeaders from './RequestHeaders.vue'\nimport ResponseBody from './ResponseBody.vue'\nimport ResponseBodyStreaming from './ResponseBodyStreaming.vue'\nimport ResponseBodyVirtual from './ResponseBodyVirtual.vue'\nimport ResponseCookies from './ResponseCookies.vue'\nimport ResponseEmpty from './ResponseEmpty.vue'\nimport ResponseHeaders from './ResponseHeaders.vue'\nimport ResponseLoadingOverlay from './ResponseLoadingOverlay.vue'\nimport ResponseMetaInformation from './ResponseMetaInformation.vue'\n\nconst { numWorkspaceRequests, response, requestResult } = defineProps<{\n  collection: Collection\n  operation: Operation\n  workspace: Workspace\n  numWorkspaceRequests: number\n  response: ResponseInstance | undefined\n  requestResult: SendRequestResult | null | undefined\n}>()\n\nconst pluginManager = usePluginManager()\nconst responseSectionViews = pluginManager.getViewComponents('response.section')\n\n// Headers\nconst responseHeaders = computed(() => {\n  const headers = response?.headers\n\n  return headers\n    ? Object.keys(headers).map((key) => ({\n        name: key,\n        value: headers[key] ?? '',\n        required: false,\n      }))\n    : []\n})\n\n// Cookies\nconst responseCookies = computed(\n  () =>\n    response?.cookieHeaderKeys.flatMap((key) => {\n      const value = response?.headers?.[key]\n\n      return value\n        ? {\n            name: key,\n            value,\n            required: false,\n          }\n        : []\n    }) ?? [],\n)\n\nconst responseSections = ['Cookies', 'Headers', 'Body'] as const\ntype Filter = 'All' | (typeof responseSections)[number]\nconst activeFilter = ref<Filter>('All')\n\nconst filters = computed<Filter[]>(() => ['All', ...responseSections])\n\nconst filterIds = computed(\n  () =>\n    Object.fromEntries(\n      filters.value.map((section) => [section, useId()]),\n    ) as Record<Filter, string>,\n)\n\n/** Threshold for virtualizing response bodies in bytes */\nconst VIRTUALIZATION_THRESHOLD = 200_000\nconst shouldVirtualize = computed(() => {\n  if (!response || !('size' in response)) {\n    return false\n  }\n\n  // Get content type from headers\n  const contentType =\n    response.headers?.['content-type'] || response.headers?.['Content-Type']\n\n  // If no content type or response size is small, don't virtualize\n  if (!contentType || (response.size ?? 0) <= VIRTUALIZATION_THRESHOLD) {\n    return false\n  }\n\n  // Do not virtualize html\n  if (contentType.includes('text/html')) {\n    return false\n  }\n\n  // Common text-based content types\n  const textBasedTypes = [\n    // Text types\n    'text/',\n    // JSON types\n    'application/json',\n    'application/ld+json',\n    'application/problem+json',\n    'application/vnd.api+json',\n    // XML types\n    'application/xml',\n    'application/atom+xml',\n    'application/rss+xml',\n    'application/problem+xml',\n    // Other structured text\n    'application/javascript',\n    'application/ecmascript',\n    'application/x-yaml',\n    'application/yaml',\n    // Source code\n    'application/x-httpd-php',\n    'application/x-sh',\n    'application/x-perl',\n    'application/x-python',\n    'application/x-ruby',\n    'application/x-java-source',\n    // Form data\n    'application/x-www-form-urlencoded',\n  ]\n\n  // Check if content type matches any text-based type\n  const isTextBased = textBasedTypes.some((type) => contentType.includes(type))\n\n  return isTextBased && (response.size ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n\nconst requestHeaders = computed(\n  () =>\n    requestResult?.request.parameters.headers\n      .filter((h) => h.enabled)\n      .map((h) => ({\n        name: h.key,\n        value: h.value,\n        required: true,\n      })) ?? [],\n)\n</script>\n<template>\n  <ViewLayoutSection aria-label=\"Response\">\n    <template #title>\n      <div class=\"flex h-8 flex-1 items-center\">\n        <div\n          aria-live=\"polite\"\n          class=\"flex items-center\"\n          :class=\"{ 'animate-response-heading': response }\">\n          <span class=\"response-heading pointer-events-none absolute\">\n            Response\n          </span>\n          <ResponseMetaInformation\n            v-if=\"response\"\n            class=\"animate-response-children\"\n            :response=\"response\" />\n        </div>\n        <SectionFilter\n          v-model=\"activeFilter\"\n          :filterIds=\"filterIds\"\n          :filters=\"filters\" />\n      </div>\n    </template>\n    <div\n      :id=\"filterIds.All\"\n      class=\"custom-scroll response-section-content relative grid h-full justify-stretch\"\n      :class=\"{\n        'content-start': response,\n      }\"\n      :role=\"activeFilter === 'All' && response ? 'tabpanel' : 'none'\">\n      <template v-if=\"!response\">\n        <ResponseEmpty\n          :collection=\"collection\"\n          :operation=\"operation\"\n          :workspace=\"workspace\"\n          :numWorkspaceRequests=\"numWorkspaceRequests\" />\n      </template>\n      <template v-else>\n        <ResponseCookies\n          class=\"response-section-content-cookies\"\n          v-if=\"activeFilter === 'All' || activeFilter === 'Cookies'\"\n          :id=\"filterIds.Cookies\"\n          :cookies=\"responseCookies\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n        <RequestHeaders\n          class=\"response-section-content-headers\"\n          v-if=\"activeFilter === 'All' || activeFilter === 'Headers'\"\n          :id=\"filterIds.Headers\"\n          :headers=\"requestHeaders\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n        <ResponseHeaders\n          class=\"response-section-content-headers\"\n          v-if=\"activeFilter === 'All' || activeFilter === 'Headers'\"\n          :id=\"filterIds.Headers\"\n          :headers=\"responseHeaders\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n\n        <template\n          v-for=\"(view, index) in responseSectionViews\"\n          :key=\"view.title ?? index\">\n          <ScalarErrorBoundary>\n            <component\n              :is=\"view.component\"\n              v-show=\"activeFilter === 'All' || activeFilter === view.title\"\n              v-bind=\"view.props ?? {}\" />\n          </ScalarErrorBoundary>\n        </template>\n\n        <template v-if=\"activeFilter === 'All' || activeFilter === 'Body'\">\n          <!-- Streaming response body -->\n          <ResponseBodyStreaming\n            v-if=\"'reader' in response\"\n            class=\"response-section-content-body\"\n            :id=\"filterIds.Body\"\n            :reader=\"response.reader\" />\n\n          <!-- Virtualized Text for massive responses -->\n          <ResponseBodyVirtual\n            v-else-if=\"shouldVirtualize && typeof response?.data === 'string'\"\n            :id=\"filterIds.Body\"\n            :content=\"response!.data\"\n            :data=\"response?.data\"\n            :headers=\"responseHeaders\"\n            :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n\n          <!-- Regular response body -->\n          <ResponseBody\n            class=\"response-section-content-body\"\n            v-else\n            :id=\"filterIds.Body\"\n            layout=\"client\"\n            :active=\"true\"\n            :data=\"response?.data\"\n            :headers=\"responseHeaders\"\n            :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\"\n            title=\"Body\" />\n        </template>\n      </template>\n      <ResponseLoadingOverlay />\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.animate-response-heading .response-heading {\n  animation: push-response 0.2s ease-in-out forwards;\n  opacity: 1;\n}\n@keyframes push-response {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n.animate-response-heading .animate-response-children {\n  animation: response-spans 0.2s ease-in-out forwards 0.05s;\n  opacity: 0;\n}\n\n@keyframes response-spans {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components'\nimport type {\n  Collection,\n  Operation,\n  ResponseInstance,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { computed, ref, useId } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport type { SendRequestResult } from '@/libs/send-request/create-request-operation'\nimport { usePluginManager } from '@/plugins'\n\nimport RequestHeaders from './RequestHeaders.vue'\nimport ResponseBody from './ResponseBody.vue'\nimport ResponseBodyStreaming from './ResponseBodyStreaming.vue'\nimport ResponseBodyVirtual from './ResponseBodyVirtual.vue'\nimport ResponseCookies from './ResponseCookies.vue'\nimport ResponseEmpty from './ResponseEmpty.vue'\nimport ResponseHeaders from './ResponseHeaders.vue'\nimport ResponseLoadingOverlay from './ResponseLoadingOverlay.vue'\nimport ResponseMetaInformation from './ResponseMetaInformation.vue'\n\nconst { numWorkspaceRequests, response, requestResult } = defineProps<{\n  collection: Collection\n  operation: Operation\n  workspace: Workspace\n  numWorkspaceRequests: number\n  response: ResponseInstance | undefined\n  requestResult: SendRequestResult | null | undefined\n}>()\n\nconst pluginManager = usePluginManager()\nconst responseSectionViews = pluginManager.getViewComponents('response.section')\n\n// Headers\nconst responseHeaders = computed(() => {\n  const headers = response?.headers\n\n  return headers\n    ? Object.keys(headers).map((key) => ({\n        name: key,\n        value: headers[key] ?? '',\n        required: false,\n      }))\n    : []\n})\n\n// Cookies\nconst responseCookies = computed(\n  () =>\n    response?.cookieHeaderKeys.flatMap((key) => {\n      const value = response?.headers?.[key]\n\n      return value\n        ? {\n            name: key,\n            value,\n            required: false,\n          }\n        : []\n    }) ?? [],\n)\n\nconst responseSections = ['Cookies', 'Headers', 'Body'] as const\ntype Filter = 'All' | (typeof responseSections)[number]\nconst activeFilter = ref<Filter>('All')\n\nconst filters = computed<Filter[]>(() => ['All', ...responseSections])\n\nconst filterIds = computed(\n  () =>\n    Object.fromEntries(\n      filters.value.map((section) => [section, useId()]),\n    ) as Record<Filter, string>,\n)\n\n/** Threshold for virtualizing response bodies in bytes */\nconst VIRTUALIZATION_THRESHOLD = 200_000\nconst shouldVirtualize = computed(() => {\n  if (!response || !('size' in response)) {\n    return false\n  }\n\n  // Get content type from headers\n  const contentType =\n    response.headers?.['content-type'] || response.headers?.['Content-Type']\n\n  // If no content type or response size is small, don't virtualize\n  if (!contentType || (response.size ?? 0) <= VIRTUALIZATION_THRESHOLD) {\n    return false\n  }\n\n  // Do not virtualize html\n  if (contentType.includes('text/html')) {\n    return false\n  }\n\n  // Common text-based content types\n  const textBasedTypes = [\n    // Text types\n    'text/',\n    // JSON types\n    'application/json',\n    'application/ld+json',\n    'application/problem+json',\n    'application/vnd.api+json',\n    // XML types\n    'application/xml',\n    'application/atom+xml',\n    'application/rss+xml',\n    'application/problem+xml',\n    // Other structured text\n    'application/javascript',\n    'application/ecmascript',\n    'application/x-yaml',\n    'application/yaml',\n    // Source code\n    'application/x-httpd-php',\n    'application/x-sh',\n    'application/x-perl',\n    'application/x-python',\n    'application/x-ruby',\n    'application/x-java-source',\n    // Form data\n    'application/x-www-form-urlencoded',\n  ]\n\n  // Check if content type matches any text-based type\n  const isTextBased = textBasedTypes.some((type) => contentType.includes(type))\n\n  return isTextBased && (response.size ?? 0) > VIRTUALIZATION_THRESHOLD\n})\n\nconst requestHeaders = computed(\n  () =>\n    requestResult?.request.parameters.headers\n      .filter((h) => h.enabled)\n      .map((h) => ({\n        name: h.key,\n        value: h.value,\n        required: true,\n      })) ?? [],\n)\n</script>\n<template>\n  <ViewLayoutSection aria-label=\"Response\">\n    <template #title>\n      <div class=\"flex h-8 flex-1 items-center\">\n        <div\n          aria-live=\"polite\"\n          class=\"flex items-center\"\n          :class=\"{ 'animate-response-heading': response }\">\n          <span class=\"response-heading pointer-events-none absolute\">\n            Response\n          </span>\n          <ResponseMetaInformation\n            v-if=\"response\"\n            class=\"animate-response-children\"\n            :response=\"response\" />\n        </div>\n        <SectionFilter\n          v-model=\"activeFilter\"\n          :filterIds=\"filterIds\"\n          :filters=\"filters\" />\n      </div>\n    </template>\n    <div\n      :id=\"filterIds.All\"\n      class=\"custom-scroll response-section-content relative grid h-full justify-stretch\"\n      :class=\"{\n        'content-start': response,\n      }\"\n      :role=\"activeFilter === 'All' && response ? 'tabpanel' : 'none'\">\n      <template v-if=\"!response\">\n        <ResponseEmpty\n          :collection=\"collection\"\n          :operation=\"operation\"\n          :workspace=\"workspace\"\n          :numWorkspaceRequests=\"numWorkspaceRequests\" />\n      </template>\n      <template v-else>\n        <ResponseCookies\n          class=\"response-section-content-cookies\"\n          v-if=\"activeFilter === 'All' || activeFilter === 'Cookies'\"\n          :id=\"filterIds.Cookies\"\n          :cookies=\"responseCookies\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n        <RequestHeaders\n          class=\"response-section-content-headers\"\n          v-if=\"activeFilter === 'All' || activeFilter === 'Headers'\"\n          :id=\"filterIds.Headers\"\n          :headers=\"requestHeaders\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n        <ResponseHeaders\n          class=\"response-section-content-headers\"\n          v-if=\"activeFilter === 'All' || activeFilter === 'Headers'\"\n          :id=\"filterIds.Headers\"\n          :headers=\"responseHeaders\"\n          :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n\n        <template\n          v-for=\"(view, index) in responseSectionViews\"\n          :key=\"view.title ?? index\">\n          <ScalarErrorBoundary>\n            <component\n              :is=\"view.component\"\n              v-show=\"activeFilter === 'All' || activeFilter === view.title\"\n              v-bind=\"view.props ?? {}\" />\n          </ScalarErrorBoundary>\n        </template>\n\n        <template v-if=\"activeFilter === 'All' || activeFilter === 'Body'\">\n          <!-- Streaming response body -->\n          <ResponseBodyStreaming\n            v-if=\"'reader' in response\"\n            class=\"response-section-content-body\"\n            :id=\"filterIds.Body\"\n            :reader=\"response.reader\" />\n\n          <!-- Virtualized Text for massive responses -->\n          <ResponseBodyVirtual\n            v-else-if=\"shouldVirtualize && typeof response?.data === 'string'\"\n            :id=\"filterIds.Body\"\n            :content=\"response!.data\"\n            :data=\"response?.data\"\n            :headers=\"responseHeaders\"\n            :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\" />\n\n          <!-- Regular response body -->\n          <ResponseBody\n            class=\"response-section-content-body\"\n            v-else\n            :id=\"filterIds.Body\"\n            layout=\"client\"\n            :active=\"true\"\n            :data=\"response?.data\"\n            :headers=\"responseHeaders\"\n            :role=\"activeFilter === 'All' ? 'none' : 'tabpanel'\"\n            title=\"Body\" />\n        </template>\n      </template>\n      <ResponseLoadingOverlay />\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.animate-response-heading .response-heading {\n  animation: push-response 0.2s ease-in-out forwards;\n  opacity: 1;\n}\n@keyframes push-response {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n.animate-response-heading .animate-response-children {\n  animation: response-spans 0.2s ease-in-out forwards 0.05s;\n  opacity: 0;\n}\n\n@keyframes response-spans {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECMA,MAAM,QAAQ;EAMd,MAAM,oBAAoB,eAAe;GACvC,MAAM,YACJ,mBAAmB,MAAM,QAAQ,GAAG,EAAE,aAAa;AACrD,UAAO,MAAM,WAAW,MAAM,WAAW,WAAW;IACrD;;uBAGC,mBAYI,KAAA;IAXF,OAAM;IACL,UAAQ,GAAK,kBAAA;IACb,MAAM,QAAA;IACN,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;OACX,YAEc,MAAA,WAAA,EAAA;IADZ,MAAK;IACL,MAAK;iCACP,mBAGO,QAAA,MAAA,CAFL,mBAAqB,QAAA,MAAf,WAAQ,EACd,mBAA0C,QAAA,EAApC,OAAM,WAAS,EAAC,gBAAa,CAAA,EAAA,GAAA,EAAA,EAAA,GAAA,cAAA;;;;;;;sBC5BlC,OAAM,iCAA+B;qBACnC,OAAM,wBAAsB;;qBADnC,mBAEM,OAFN,eAEM,CADJ,mBAAgD,OAAhD,cAAgD,CAAd,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;EEiB9C,MAAM,QAAQ,IAAI,MAAK;AAEvB,cACQ,QAAA,WACC,MAAM,QAAQ,MACvB;;WAIW,MAAA,SAAS,QAAA,OAAA,WAAA,EADlB,mBAmCM,OAAA;;IAjCJ,OAAK,eAAA,CAAC,+CAA6C,EAAA,kBACvB,QAAA,OAAK,CAAA,CAAA;OAEzB,QAAA,SAAI,WAAA,WAAA,EADZ,mBAK0B,OAAA;;IAHxB,OAAK,eAAA,CAAC,qBAAmB,EAAA,SACN,QAAA,OAAK,CAAA,CAAA;IACvB,KAAK,QAAA;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;kCAEF,QAAA,SAAI,WAAA,WAAA,EADjB,mBASQ,SAAA;;IAPN,UAAA;IACA,UAAA;IACA,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;OACb,mBAEiB,UAAA;IADd,KAAK,QAAA;IACL,MAAM,QAAA;sCAGE,QAAA,SAAI,WAAA,WAAA,EADjB,mBAQQ,SAAA;;IANN,OAAM;IACN,UAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;OACb,mBAEiB,UAAA;IADd,KAAK,QAAA;IACL,MAAM,QAAA;oDAEX,mBAK0B,UAAA;;IAHxB,OAAM;IACL,MAAM,QAAA;IACN,MAAM,QAAA;IACN,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;qDAEjB,YAA+D,0BAAA,EAAA,KAAA,GAAA,EAAA;2BAAnB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAnB,uBAAmB,GAAA,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;EEzD9C,MAAM,QAAQ;EAKd,MAAM,gBAAgB,IAA2B,KAAI;;EAErD,MAAM,KAAK,OAAM;EAEjB,MAAM,EAAE,eAAe,cAAc;GACnC;GACA,UAAU;GACV,aAAa;GACb,SAAS,YAAY,gBAAgB,MAAM,QAAQ,CAAC;GACpD,UAAU,YAAY,MAAM,SAAS;GACrC,iBAAiB;GAClB,CAAA;EAGD,MAAM,0BAA0B;AAC9B,UAAO,WAAW,OAAO,MAAM,IAAI,UAAU,IAAI;;;uBAIjD,mBAeM,OAfN,eAeM,CAbJ,mBAKM,OALN,cAKM,CADJ,mBAA2B,OAAA;aAAlB;IAAJ,KAAI;oBAIH,mBAAiB,IAAA,WAAA,EADzB,YAKmC,MAAA,oBAAA,EAAA;;IAHhC,SAAS,mBAAiB;IAC1B,iBAAe,MAAA,GAAE;IACjB,MAAM,QAAA;IACP,OAAM;;;;;;;;;;;;;;;;;;;;uBEnCV,mBAgBM,OAhBN,cAgBM,CAdJ,mBAMS,UAAA;IALP,OAAK,eAAA,CAAC,6BAA2B,EAAA,kCACW,QAAA,YAAU,CAAA,CAAA;IACtD,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAOA,KAAAA,MAAK,qBAAA,KAAA,EAAA,CAAA,OAAA,CAAA;MAA6B,aAEjD,EAAA,EACA,mBAMS,UAAA;IALP,OAAK,eAAA,CAAC,6BAA2B,EAAA,kCAAA,CACY,QAAA,YAAU,CAAA,CAAA;IACvD,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAOA,KAAAA,MAAK,qBAAA,MAAA,EAAA,CAAA,OAAA,CAAA;MAA8B,SAElD,EAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;EEXJ,MAAM,QAAQ;;EAQd,MAAM,SAAS,IAAI,KAAI;EAEvB,MAAM,aAAa,eACX,CAAC,EAAE,YAAY,OAAO,OAAO,YAAY,MAAM,SACvD;EAEA,MAAM,cAAc,eAAe,OAAO,SAAS,CAAC,WAAW,MAAK;EACpE,MAAM,UAAU,eAAe,CAAC,OAAO,SAAS,CAAC,WAAW,MAAK;EAEjE,MAAM,EAAE,UAAU,oBAAoB,YAAY,gBAAgB;GAChE,MAAM,MAAM,OAAO,OAAO;GAC1B,SAAS,MAAM,OAAO,UAAU;GACjC,CAAA;EAED,MAAM,cAAc,eAAe,mBAAmB,SAAS,MAAM,QAAQ,CAAA;;uBAG3E,YAwCqB,4BAAA;IAvCnB,OAAM;IACL,QAAQ,QAAA;;IACE,OAAK,cAAY,CAAA,gBAAA,gBAAR,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA;2BAoCnB,CA1BE,QAAA,QAAA,WAAA,EADR,mBA2BM,OA3BN,cA2BM;KAxBJ,mBAQM,OARN,cAQM,CANJ,mBAEO,QAFP,cAEO,gBADF,MAAA,SAAQ,CAAC,QAAO,EAAA,EAAA,EAGb,WAAA,SAAA,WAAA,EADR,YAEqB,4BAAA;;kBAAV,OAAA;0EAAM,QAAA;;KAGX,YAAA,OAAa,OAAO,QAAA,SAAA,WAAA,EAD5B,YAIqC,yBAAA;MAFlC,KAAK,MAAA,QAAO;MACZ,SAAS,QAAA;MACT,UAAU,YAAA,MAAY;;KAEjB,YAAA,OAAa,WAAW,YAAA,SAAA,WAAA,EADhC,YAM6B,6BAAA;MAJ1B,KAAK,MAAA,QAAO;MACZ,OAAO,YAAA,MAAY;MACnB,MAAM,YAAA,MAAY;MAClB,KAAK,MAAA,QAAO;MACZ,MAAM,MAAA,SAAQ,CAAC;;;;;;;MACO,YAAA,OAAa,OAAG,CAAK,YAAA,OAAa,WAAA,WAAA,EAA3D,YAEmB,0BAAA,EAAA,KAAA,GAAA,EAAA;6BAAnB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFoE,iBAEpE,GAAA,CAAA,EAAA,CAAA;;;;;OAjCM,QAAA,QAAQ,MAAA,QAAO,GAAA;UACpB;sBAI4B,CAH7B,YAG6B,8BAAA;KAF1B,UAAU,MAAA,mBAAkB;KAC5B,MAAM,MAAA,QAAO;KACb,MAAM,MAAA,SAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;EEjCxB,MAAM,kBAAkB,SAAiB;AACvC,UAAO,YAAY,MAChB,WAAW,OAAO,KAAK,aAAa,KAAK,KAAK,aAAa,CAC9D;;;uBAIA,YA4CqB,4BAAA;IA3CnB,OAAM;IACL,aAAa;IACb,WAAW,QAAA,QAAQ;;IACT,OAAK,cAAgB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAf,mBAAe,GAAA,CAAA,EAAA,CAAA;2BAiC1B,CA/BE,QAAA,QAAQ,UAAA,WAAA,EADhB,mBAgCM,OAhCN,cAgCM,CA7BJ,YA4BY,mBAAA;KA3BT,SAAS,CAAA,6BAAA,mBAAiD;KAC3D,QAAA;;4BAIe,CAHf,YAGe,sBAAA,EAHD,OAAM,kBAAgB,EAAA;6BACW,CAA7C,YAA6C,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAV,cAAU,GAAA,CAAA,EAAA,CAAA;;UAC3B,YAA+C,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAZ,gBAAY,GAAA,CAAA,EAAA,CAAA;;;;2BAE/B,mBAoBe,UAAA,MAAA,WAnBE,QAAA,UAAR,SAAI;0BADb,YAoBe,sBAAA;OAlBZ,KAAK,KAAK;OACX,OAAM;;8BAaU,CAZhB,YAYgB,uBAAA,EAXd,OAAM,kEAAgE,EAAA;+BAO3D,CAAA,OANY,eAAe,KAAK,KAAI,EAAG,QAAG,YAAA,WAAA,EACnD,YAIc,qBAAA;;SAHZ,OAAM;SACL,MAAM,eAAe,KAAK,KAAI,CAAG;;gCACnB,CAAA,gBAAA,gBAAZ,KAAK,KAAI,EAAA,EAAA,CAAA,CAAA;;4CAGhB,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,KAAK,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA;;iBAGhB,YAEuB,uBAAA;QADrB,OAAM;QACL,MAAM,KAAK;;;;;;0BAKpB,mBAIM,OAJN,cAEkG,eAElG,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;EEvDJ,MAAM,SAAS,iBAAgB;EAE/B,MAAM,cAAc,IAAI,GAAE;EAC1B,MAAM,WAAW,IAAkB,KAAI;EACvC,MAAM,UAAU,IAAI,aAAY;EAChC,MAAM,mBAAmB,IAAwB,KAAI;;;;EAKrD,MAAM,uBAAuB;AAC3B,OAAI,iBAAiB,MACnB,kBAAiB,MAAM,YAAY,iBAAiB,MAAM;;AAK9D,QAAM,mBAAmB;AAEvB,YAAS,eAAc;IACxB;;;;EAKD,eAAe,aAAa;AAC1B,OAAI;AACF,WAAO,OAAO,WAAW;KACvB,MAAM,EAAE,MAAM,UAAU,MAAM,QAAA,OAAO,MAAK;AAE1C,SAAI,MAAM;AACR,aAAO,OAAM;AACb;;AAIF,SAAI,MACF,aAAY,SAAS,QAAQ,OAAO,OAAO,EAAE,QAAQ,MAAM,CAAA;;YAGxD,OAAO;AACd,YAAQ,MAAM,yBAAyB,MAAK;AAC5C,WAAO,OAAM;AACb,aAAS,QAAQ;aACT;AAER,gBAAY,SAAS,QAAQ,QAAO;;;AAIxC,kBAAgB;AACd,UAAO,OAAM;AACb,eAAW;AACX,YAAS,QAAQ;IAClB;AAED,wBAAsB;AACpB,WAAA,OAAO,QAAO;AACd,UAAO,OAAM;IACd;;uBAIC,YA6BqB,4BAAA,EA7BD,OAAM,mCAAiC,EAAA;IAC9C,OAAK,cAWR,CAVN,mBAUM,OAVN,cAUM,CAAA,OAAA,OAAA,OAAA,KATJ,mBAAe,OAAA,MAAV,QAAI,GAAA,GAED,MAAA,OAAM,CAAC,YAAA,WAAA,EADf,mBAOM,OAPN,cAOM,CAJJ,YAEc,MAAA,cAAA,EAAA;KADX,QAAA,MAAA,OAAM;KACP,MAAK;uDACP,mBAA0C,QAAA,EAApC,OAAM,YAAU,EAAC,gBAAY,GAAA,EAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,CAAA,CAAA;2BAkBnC,CAbN,mBAaM,OAAA;cAZA;KAAJ,KAAI;KACJ,OAAM;QACU,SAAA,SAAA,WAAA,EACd,mBAEM,OAFN,cAEM,gBADD,SAAA,MAAS,QAAO,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAGP,YAAA,SAAA,WAAA,EACd,mBAEM,OAFN,cAEM,gBADD,YAAA,MAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,CAAA,CAAA;;;;;;;;;;;;;;;;EExFxB,MAAM,QAAQ;EAMd,MAAM,cAAc,eAAe,uBAAuB,MAAM,QAAQ,CAAA;EAExE,MAAM,EAAE,UAAU,oBAAoB,YAAY,gBAAgB;GAChE,MAAM,MAAM,OAAO,OAAO;GAC1B,SAAS,MAAM,OAAO,UAAU;GACjC,CAAA;;uBAIC,YAkBqB,4BAAA,EAlBD,OAAM,qDAAmD,EAAA,YAAA;IAChE,OAAK,cAAK,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAJ,QAAI,GAAA,EAAA,CAAA;2BAWf,CAAA,OAAA,OAAA,OAAA,KAFN,mBAEM,OAAA,EAFD,OAAM,gEAA8D,EAAC,yEAE1E,GAAA,GACA,YAIwB,MAAA,kBAAA,EAAA;KAHtB,gBAAe;KACf,cAAa;KACZ,YAAY;KACZ,MAAM,YAAA;;;OAdD,MAAA,QAAO,GAAA;UACZ;sBAI4B,CAH7B,YAG6B,8BAAA;KAF1B,UAAU,MAAA,mBAAkB;KAC5B,MAAM,MAAA,QAAO;KACb,MAAM,MAAA,SAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;uBEtBtB,YAqBqB,4BAAA,EArBA,aAAa,OAAK,EAAA;IAC1B,OAAK,cAAQ,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAP,WAAO,GAAA,CAAA,EAAA,CAAA;2BAmBb,EAAA,WAAA,EAlBX,mBAkBW,UAAA,EAAA,KAAA,GAAA,EAAA,CAhBD,QAAA,QAAQ,UAAA,WAAA,EADhB,YAUY,mBAAA;;KARV,OAAM;KACL,SAAS,CAAA,IAAA,GAAQ;;4BAEO,EAAA,UAAA,KAAA,EADzB,mBAKe,UAAA,MAAA,WAJE,QAAA,UAAR,SAAI;0BADb,YAKe,sBAAA,EAHZ,KAAK,KAAK,MAAA,EAAA;8BACwB,CAAnC,YAAmC,uBAAA,EAAnB,MAAM,KAAK,MAAA,EAAA,MAAA,GAAA,CAAA,OAAA,CAAA,EAC3B,YAAoC,uBAAA,EAApB,MAAM,KAAK,OAAA,EAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA;;;;;wBAI/B,mBAIM,OAJN,cAE8F,eAE9F,EAAA,EAAA,GAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EETN,MAAM,EAAE,QAAQ,oBAAoB,cAAa;EACjD,MAAM,QAAQ,UAAS;EACvB,MAAM,SAAS,WAAU;EACzB,MAAM,EAAE,WAAW,WAAU;EAE7B,MAAM,mBAAmB;GAEvB,MAAM,cAAc,QAAA,UAAU,MAAM,SAChC,EAAE,MAAM,QAAA,UAAU,KAAK,KAAK,CAAC,QAAA,UAAU,KAAK,GAAG,GAAG,EAAE,EAAC,GACrD,EAAC;GAEL,MAAM,aAAa,gBAAgB,IAAI,aAAa,QAAA,WAAW,IAAG;AAElE,OAAI,YAAY;AACd,WAAO,KAAK;KACV,MAAM;KACN,QAAQ;MACN,WAAW,QAAA,UAAU;MACrB,SAAS,WAAW;MACrB;KACF,CAAA;AAED,mBAAe;AACb,YAAO,QAAQ,KAAK,EAClB,iBAAiB,IAAI,cAAc,WAAW,EAAE,KAAK,KAAK,CAAC,EAC5D,CAAA;MACF;;;EAIL,MAAM,gBAAgB,UAAwB;AAC5C,OAAI,OAAO,aAAa,MAAM,SAAS,UACrC,aAAW;;EAIf,MAAM,iBAAA;AAEN,kBAAgB,OAAO,QAAQ,GAAG,aAAa,CAAA;AAC/C,wBAAsB,OAAO,QAAQ,IAAI,aAAa,CAAA;;uBAGpD,mBA8DM,OA9DN,cA8DM;IA7DJ,mBA0BM,OAAA,EAzBJ,OAAK,eAAA,CAAC,mEAAiE,EAAA,oBACjC,QAAA,wBAAoB,KAAS,MAAA,OAAM,KAAA,SAAA,CAAA,CAAA,EAAA,EAAA;KAIjE,MAAA,OAAM,KAAA,WAAA,WAAA,EADd,mBAWM,OAXN,cAWM,CAAA,gBAT0B,kBAClB,gBAAG,MAAA,eAAc,CAAA,GAAG,UAChC,EAAA,EAAA,OAAA,OAAA,OAAA,KAAA,mBAMM,OAAA,EAND,OAAM,QAAM,EAAA,CACf,mBAII,KAAA;MAHF,MAAK;MACL,QAAO;QAAS,YAElB,CAAA,EAAA,GAAA,EAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;+BAGJ,mBAKI,KAAA;MAJF,OAAM;MACN,MAAK;MACL,QAAO;QAAS,2BAElB,GAAA;KACA,YAEqB,wBAAA;MADlB,KAAK,MAAA,iBAAQ;MACd,OAAM;;;IAGF,MAAA,OAAM,KAAA,WAAA,WAAA,EADd,mBAOM,OAAA;;KALJ,OAAK,eAAA,CAAC,iEAA+D,EAAA,qBAC9B,QAAA,wBAAoB,GAAA,CAAA,CAAA;QAG3D,YAAc,mBAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAEhB,mBAyBM,OAzBN,cAyBM;KAtBI,MAAA,OAAM,KAAA,WAAA,WAAA,EADd,mBAOS,UAAA;;MALP,OAAM;MACN,MAAK;MACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,OAAM,CAAC,eAAe,MAAI;mDAAI,iBAEtC,GAAA,GAAA,YAA2B,MAAA,aAAA,EAAA,EAAb,QAAO,KAAG,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;KAGlB,MAAA,OAAM,KAAA,aAAA,WAAA,EADd,mBAOS,UAAA;;MALP,OAAM;MACN,MAAK;MACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,YAAU;mDAAI,iBAEtB,GAAA,GAAA,YAA2B,MAAA,aAAA,EAAA,EAAb,QAAO,KAAG,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;KAE1B,mBAMS,UAAA;MALP,OAAM;MACN,MAAK;MACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,OAAM,CAAC,eAAe,MAAI;mDAAI,kBAEtC,GAAA,GAAA,YAA2B,MAAA,aAAA,EAAA,EAAb,QAAO,KAAG,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;EE3GhC,MAAM,kBAAkB,SAAiB;AACvC,UAAO,YAAY,MAChB,WAAW,OAAO,KAAK,aAAa,KAAK,KAAK,aAAa,CAC9D;;;uBAIA,YA4CqB,4BAAA;IA3CnB,OAAM;IACL,aAAa;IACb,WAAW,QAAA,QAAQ;;IACT,OAAK,cAAiB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAhB,oBAAgB,GAAA,CAAA,EAAA,CAAA;2BAiC3B,CA/BE,QAAA,QAAQ,UAAA,WAAA,EADhB,mBAgCM,OAhCN,cAgCM,CA7BJ,YA4BY,mBAAA;KA3BT,SAAS,CAAA,6BAAA,mBAAiD;KAC3D,QAAA;;4BAIe,CAHf,YAGe,sBAAA,EAHD,OAAM,kBAAgB,EAAA;6BACW,CAA7C,YAA6C,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAV,cAAU,GAAA,CAAA,EAAA,CAAA;;UAC3B,YAA+C,MAAA,wBAAA,EAAA,MAAA;8BAAlB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAZ,gBAAY,GAAA,CAAA,EAAA,CAAA;;;;2BAE/B,mBAoBe,UAAA,MAAA,WAnBE,QAAA,UAAR,SAAI;0BADb,YAoBe,sBAAA;OAlBZ,KAAK,KAAK;OACX,OAAM;;8BAaU,CAZhB,YAYgB,uBAAA,EAXd,OAAM,kEAAgE,EAAA;+BAO3D,CAAA,OANY,eAAe,KAAK,KAAI,EAAG,QAAG,YAAA,WAAA,EACnD,YAIc,qBAAA;;SAHZ,OAAM;SACL,MAAM,eAAe,KAAK,KAAI,CAAG;;gCACnB,CAAA,gBAAA,gBAAZ,KAAK,KAAI,EAAA,EAAA,CAAA,CAAA;;4CAGhB,mBAEW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,gBAAA,gBADN,KAAK,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,CAAA;;iBAGhB,YAEuB,uBAAA;QADrB,OAAM;QACL,MAAM,KAAK;;;;;;0BAKpB,mBAIM,OAJN,cAEkG,eAElG,EAAA,CAAA;;;;;;;;;;;;;;;;;EEvDJ,MAAM,EAAE,WAAW,cAAa;EAChC,MAAM,SAAS,iBAAgB;EAE/B,MAAM,UAAU,KAAmC;AAEnD,SAAO,cAAc,GAAG,OAAO,WAAW;AACxC,OAAI,WAAW,QACb,SAAQ,QAAQ,iBAAiB,OAAO,OAAO,EAAE,IAAI;QAChD;AACL,iBAAa,QAAQ,MAAK;AAC1B,YAAQ,QAAQ,KAAA;AAChB,UAAM,OAAO,OAAM;;IAEtB;;uBAGC,YAca,YAAA,MAAA;2BADL,CAXE,MAAA,OAAM,CAAC,YAAA,WAAA,EADf,mBAYM,OAZN,cAYM,CATJ,YAGe,MAAA,cAAA,EAAA;KAFb,OAAM;KACL,QAAA,MAAA,OAAM;KACP,MAAK;6BACP,YAIe,MAAA,aAAA,EAAA;KAHb,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,OAAM,CAAC,cAAc,MAAI;;4BAEnC,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFuC,YAEvC,GAAA,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;EE5BN,MAAM,QAAQ;EAEd,MAAM,EAAE,WAAW,cAAa;EAChC,MAAM,WAAW,KAAoC;EACrD,MAAM,YAAY,IAAI,EAAC;AAEvB,SAAO,cAAc,IAAI,WAAW;AAClC,OAAI,WAAW,QACb,UAAS,QAAQ,kBAAmB,UAAU,SAAS,KAAO,IAAI;QAC7D;AACL,kBAAc,SAAS,MAAK;AAC5B,aAAS,QAAQ,KAAA;AACjB,cAAU,QAAQ;;IAErB;;EAGD,MAAM,oBAAoB,aAA+B;GACvD,MAAM,gBAAgB,OAAO,SAC3B,SAAS,UAAU,qBACjB,SAAS,UAAU,qBACnB,KACF,GACF;AAEA,UAAO,gBAAgB,YAAY,cAAc,GAAG,KAAA;;;EAItD,MAAM,wBAAwB,eAA2C;GACvE,MAAM,qBAAqB,MAAM,SAAS;AAE1C,OAAI,CAAC,mBACH;AAGF,UAAO,gBAAgB,uBAAuB,KAAA;IAC/C;;uBAGC,mBAgCM,OAhCN,cAgCM,CA/BQ,SAAA,SAAY,UAAA,SAAA,WAAA,EAAxB,mBAES,QAAA,cAAA,gBADP,MAAA,mBAAkB,CAAC,UAAA,MAAS,CAAA,EAAA,EAAA,KAAA,WAAA,EAE9B,mBA2BW,UAAA,EAAA,KAAA,GAAA,EAAA;IA1BT,mBAGO,QAAA,MAAA,CAAA,OAAA,OAAA,OAAA,KAFL,mBAA4D,QAAA,EAAtD,OAAM,WAAS,EAAC,mCAA+B,GAAA,GAAA,gBAAO,MAC5D,gBAAG,MAAA,mBAAkB,CAAC,QAAA,SAAS,SAAQ,CAAA,EAAA,EAAA,CAAA,CAAA;IAE7B,iBAAiB,QAAA,SAAQ,IAAA,WAAA,EAArC,mBAGO,QAAA,YAAA,CAAA,OAAA,OAAA,OAAA,KAFL,mBAAoC,QAAA,EAA9B,OAAM,WAAS,EAAC,WAAO,GAAA,GAAA,gBAAO,MACpC,gBAAG,iBAAiB,QAAA,SAAQ,CAAA,EAAA,EAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;IAEd,sBAAA,SAAA,WAAA,EAAhB,mBAiBW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAhBT,mBAAsC,QAAA,EAAhC,OAAM,WAAS,EAAC,aAAS,GAAA,GAEvB,sBAAA,MAAsB,OAAA,WAAA,EAD9B,YAQc,qBAAA;;KANZ,OAAM;KACL,MAAM,sBAAA,MAAsB;;4BACR,CAAA,gBAAA,gBAAlB,QAAA,SAAS,OAAM,GAAG,MAAC,gBAAG,sBAAA,MAAsB,KAAI,GAAG,KACtD,EAAA,EAAA,mBAE8D,QAAA;MAD5D,OAAM;MACL,OAAK,eAAA,EAAA,iBAAqB,sBAAA,MAAsB,OAAK,CAAA;;;qCAE1D,mBAKO,QAAA,YAAA,CAAA,gBAAA,gBAJF,QAAA,SAAS,OAAM,GAAG,MAAC,gBAAG,sBAAA,MAAsB,KAAI,GAAG,KACtD,EAAA,EAAA,mBAE8D,QAAA;KAD5D,OAAM;KACL,OAAK,eAAA,EAAA,iBAAqB,sBAAA,MAAsB,OAAK,CAAA;;;;;;;;;;AEElE,IAAM,2BAA2B;;;;;;;;;;;;;;EA7CjC,MAAM,uBADgB,kBAAiB,CACI,kBAAkB,mBAAkB;EAG/E,MAAM,kBAAkB,eAAe;GACrC,MAAM,UAAU,QAAA,UAAU;AAE1B,UAAO,UACH,OAAO,KAAK,QAAQ,CAAC,KAAK,SAAS;IACjC,MAAM;IACN,OAAO,QAAQ,QAAQ;IACvB,UAAU;IACX,EAAC,GACF,EAAC;IACN;EAGD,MAAM,kBAAkB,eAEpB,QAAA,UAAU,iBAAiB,SAAS,QAAQ;GAC1C,MAAM,QAAQ,QAAA,UAAU,UAAU;AAElC,UAAO,QACH;IACE,MAAM;IACN;IACA,UAAU;IACZ,GACA,EAAC;IACL,IAAI,EAAE,CACZ;EAEA,MAAM,mBAAmB;GAAC;GAAW;GAAW;GAAO;EAEvD,MAAM,eAAe,IAAY,MAAK;EAEtC,MAAM,UAAU,eAAyB,CAAC,OAAO,GAAG,iBAAiB,CAAA;EAErE,MAAM,YAAY,eAEd,OAAO,YACL,QAAQ,MAAM,KAAK,YAAY,CAAC,SAAS,OAAO,CAAC,CAAC,CACnD,CACL;;EAIA,MAAM,mBAAmB,eAAe;AACtC,OAAI,CAAC,QAAA,YAAY,EAAE,UAAU,QAAA,UAC3B,QAAO;GAIT,MAAM,cACJ,QAAA,SAAS,UAAU,mBAAmB,QAAA,SAAS,UAAU;AAG3D,OAAI,CAAC,gBAAgB,QAAA,SAAS,QAAQ,MAAM,yBAC1C,QAAO;AAIT,OAAI,YAAY,SAAS,YAAY,CACnC,QAAO;AAoCT,UAhCuB;IAErB;IAEA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IAEA;IACF,CAGmC,MAAM,SAAS,YAAY,SAAS,KAAK,CAAA,KAErD,QAAA,SAAS,QAAQ,KAAK;IAC9C;EAED,MAAM,iBAAiB,eAEnB,QAAA,eAAe,QAAQ,WAAW,QAC/B,QAAQ,MAAM,EAAE,QAAO,CACvB,KAAK,OAAO;GACX,MAAM,EAAE;GACR,OAAO,EAAE;GACT,UAAU;GACX,EAAE,IAAI,EAAE,CACf;;uBAGE,YAkGoB,2BAAA,EAlGD,cAAW,YAAU,EAAA;IAC3B,OAAK,cAkBR,CAjBN,mBAiBM,OAjBN,YAiBM,CAhBJ,mBAWM,OAAA;KAVJ,aAAU;KACV,OAAK,eAAA,CAAC,qBAAmB,EAAA,4BACa,QAAA,UAAQ,CAAA,CAAA;kCAC9C,mBAEO,QAAA,EAFD,OAAM,iDAA+C,EAAC,cAE5D,GAAA,GAEQ,QAAA,YAAA,WAAA,EADR,YAGyB,iCAAA;;KADvB,OAAM;KACL,UAAU,QAAA;oEAEf,YAGuB,uBAAA;iBAFZ,aAAA;+EAAY,QAAA;KACpB,WAAW,UAAA;KACX,SAAS,QAAA;;;;;;2BA+EV,CA5EN,mBA4EM,OAAA;KA3EH,IAAI,UAAA,MAAU;KACf,OAAK,eAAA,CAAC,+EAA6E,EAAA,iBAChD,QAAA,UAAA,CAAA,CAAA;KAGlC,MAAM,aAAA,UAAY,SAAc,QAAA,WAAQ,aAAA;SACxB,QAAA,YAAA,WAAA,EACf,YAIiD,uBAAA;;KAH9C,YAAY,QAAA;KACZ,WAAW,QAAA;KACX,WAAW,QAAA;KACX,sBAAsB,QAAA;;;;;;wBAE3B,mBA4DW,UAAA,EAAA,KAAA,GAAA,EAAA;KAzDD,aAAA,UAAY,SAAc,aAAA,UAAY,aAAA,WAAA,EAF9C,YAKyD,yBAAA;;MAJvD,OAAM;MAEL,IAAI,UAAA,MAAU;MACd,SAAS,gBAAA;MACT,MAAM,aAAA,UAAY,QAAA,SAAA;;;;;;KAGb,aAAA,UAAY,SAAc,aAAA,UAAY,aAAA,WAAA,EAF9C,YAKyD,wBAAA;;MAJvD,OAAM;MAEL,IAAI,UAAA,MAAU;MACd,SAAS,eAAA;MACT,MAAM,aAAA,UAAY,QAAA,SAAA;;;;;;KAGb,aAAA,UAAY,SAAc,aAAA,UAAY,aAAA,WAAA,EAF9C,YAKyD,yBAAA;;MAJvD,OAAM;MAEL,IAAI,UAAA,MAAU;MACd,SAAS,gBAAA;MACT,MAAM,aAAA,UAAY,QAAA,SAAA;;;;;;uBAErB,mBASW,UAAA,MAAA,WARe,MAAA,qBAAoB,GAApC,MAAM,UAAK;0BAEnB,YAKsB,MAAA,oBAAA,EAAA,EAAA,KANhB,KAAK,SAAS,OAAA,EAAA;8BAKY,CAAA,gBAAA,WAAA,EAH9B,YAG8B,wBAFvB,KAAK,UAAS,EADrB,WAG8B,EAAA,SAAA,MAAA,EAApB,KAAK,SAAK,EAAA,CAAA,EAAA,MAAA,GAAA,GAAA,CAAA,CAAA,OADV,aAAA,UAAY,SAAc,aAAA,UAAiB,KAAK,MAAK,CAAA,CAAA,CAAA,CAAA;;;;KAKnD,aAAA,UAAY,SAAc,aAAA,UAAY,UAAA,WAAA,EAAtD,mBA4BW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,YAzBW,QAAA,YAAA,WAAA,EADpB,YAI8B,+BAAA;;MAF5B,OAAM;MACL,IAAI,UAAA,MAAU;MACd,QAAQ,QAAA,SAAS;sCAIP,iBAAA,SAAgB,OAAW,QAAA,UAAU,SAAI,YAAA,WAAA,EADtD,YAMyD,6BAAA;;MAJtD,IAAI,UAAA,MAAU;MACd,SAAS,QAAA,SAAU;MACnB,MAAM,QAAA,UAAU;MAChB,SAAS,gBAAA;MACT,MAAM,aAAA,UAAY,QAAA,SAAA;;;;;;;yBAGrB,YASiB,sBAAA;;MARf,OAAM;MAEL,IAAI,UAAA,MAAU;MACf,QAAO;MACN,QAAQ;MACR,MAAM,QAAA,UAAU;MAChB,SAAS,gBAAA;MACT,MAAM,aAAA,UAAY,QAAA,SAAA;MACnB,OAAM;;;;;;;aAGZ,YAA0B,+BAAA,CAAA,EAAA,IAAA,WAAA,CAAA,CAAA"}

package/dist/ScalarAsciiArt-BjuSnj8e.js

@@ -0,0 +1,45 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString } from "vue";
+//#region src/components/ScalarAsciiArt.vue?vue&type=script&setup=true&lang.ts
+var BLINK = 500;
+var PRINT = 100;
+//#endregion
+//#region src/components/ScalarAsciiArt.vue
+var ScalarAsciiArt_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "ScalarAsciiArt",
+	props: {
+		art: {},
+		animate: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const lines = computed(() => props.art.split("\n"));
+		const getLineAnimation = (chars, row) => ({
+			animationDuration: `${chars * PRINT}ms, ${BLINK}ms`,
+			animationTimingFunction: `steps(${chars}), step-end`,
+			animationDelay: `${row * PRINT}ms, 0ms`,
+			animationIterationCount: `1, ${((lines.value?.length ?? 0) + (lines.value?.[lines.value?.length - 1]?.length ?? 0) + 5) * PRINT / BLINK}`
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"aria-hidden": "true",
+				class: normalizeClass(["ascii-art font-code flex flex-col items-start text-[6px] leading-[7px]", { "ascii-art-animate": __props.animate }]),
+				role: "presentation",
+				inert: ""
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (line, i) => {
+				return openBlock(), createElementBlock("span", {
+					key: i,
+					class: "inline-block",
+					style: normalizeStyle({ width: `calc(${line.length + 1}ch)` })
+				}, [createElementVNode("span", {
+					class: "inline-block whitespace-pre overflow-hidden",
+					style: normalizeStyle(getLineAnimation(line.length, i))
+				}, toDisplayString(line), 5)], 4);
+			}), 128))], 2);
+		};
+	}
+}), [["__scopeId", "data-v-69ebd973"]]);
+//#endregion
+export { ScalarAsciiArt_default as t };
+
+//# sourceMappingURL=ScalarAsciiArt-BjuSnj8e.js.map

package/dist/ScalarAsciiArt-BjuSnj8e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarAsciiArt-BjuSnj8e.js","names":[],"sources":["../src/components/ScalarAsciiArt.vue","../src/components/ScalarAsciiArt.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type StyleValue } from 'vue'\n\nconst props = defineProps<{ art: string; animate?: boolean }>()\n\nconst BLINK = 500 // ms - Cursor blink speed\nconst PRINT = 100 // ms - Text print speed\n\nconst lines = computed<string[]>(() => props.art.split('\\n'))\n\nconst getLineAnimation = (chars: number, row: number): StyleValue => ({\n  animationDuration: `${chars * PRINT}ms, ${BLINK}ms`,\n  animationTimingFunction: `steps(${chars}), step-end`,\n  animationDelay: `${row * PRINT}ms, 0ms`,\n  animationIterationCount: `1, ${(((lines.value?.length ?? 0) + (lines.value?.[lines.value?.length - 1]?.length ?? 0) + 5) * PRINT) / BLINK}`,\n})\n</script>\n<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"ascii-art font-code flex flex-col items-start text-[6px] leading-[7px]\"\n    :class=\"{ 'ascii-art-animate': animate }\"\n    role=\"presentation\"\n    inert>\n    <span\n      v-for=\"(line, i) in lines\"\n      :key=\"i\"\n      class=\"inline-block\"\n      :style=\"{ width: `calc(${line.length + 1}ch)` }\">\n      <!-- prettier-ignore -->\n      <span\nclass=\"inline-block whitespace-pre overflow-hidden\"\n:style=\"getLineAnimation(line.length, i)\">{{\n       line\n      }}</span>\n    </span>\n  </div>\n</template>\n<style scoped>\n.ascii-art-animate .ascii-art-line {\n  border-right: 1ch solid transparent;\n  animation:\n    typewriter 4s steps(1) 1s 1 normal both,\n    blinkTextCursor 500ms steps(1) infinite normal;\n}\n\n@keyframes typewriter {\n  from {\n    width: 0;\n  }\n  to {\n    width: 100%;\n  }\n}\n@keyframes blinkTextCursor {\n  0% {\n    border-right-color: currentColor;\n  }\n  50% {\n    border-right-color: transparent;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, type StyleValue } from 'vue'\n\nconst props = defineProps<{ art: string; animate?: boolean }>()\n\nconst BLINK = 500 // ms - Cursor blink speed\nconst PRINT = 100 // ms - Text print speed\n\nconst lines = computed<string[]>(() => props.art.split('\\n'))\n\nconst getLineAnimation = (chars: number, row: number): StyleValue => ({\n  animationDuration: `${chars * PRINT}ms, ${BLINK}ms`,\n  animationTimingFunction: `steps(${chars}), step-end`,\n  animationDelay: `${row * PRINT}ms, 0ms`,\n  animationIterationCount: `1, ${(((lines.value?.length ?? 0) + (lines.value?.[lines.value?.length - 1]?.length ?? 0) + 5) * PRINT) / BLINK}`,\n})\n</script>\n<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"ascii-art font-code flex flex-col items-start text-[6px] leading-[7px]\"\n    :class=\"{ 'ascii-art-animate': animate }\"\n    role=\"presentation\"\n    inert>\n    <span\n      v-for=\"(line, i) in lines\"\n      :key=\"i\"\n      class=\"inline-block\"\n      :style=\"{ width: `calc(${line.length + 1}ch)` }\">\n      <!-- prettier-ignore -->\n      <span\nclass=\"inline-block whitespace-pre overflow-hidden\"\n:style=\"getLineAnimation(line.length, i)\">{{\n       line\n      }}</span>\n    </span>\n  </div>\n</template>\n<style scoped>\n.ascii-art-animate .ascii-art-line {\n  border-right: 1ch solid transparent;\n  animation:\n    typewriter 4s steps(1) 1s 1 normal both,\n    blinkTextCursor 500ms steps(1) infinite normal;\n}\n\n@keyframes typewriter {\n  from {\n    width: 0;\n  }\n  to {\n    width: 100%;\n  }\n}\n@keyframes blinkTextCursor {\n  0% {\n    border-right-color: currentColor;\n  }\n  50% {\n    border-right-color: transparent;\n  }\n}\n</style>\n"],"mappings":";;;ACKA,IAAM,QAAQ;AACd,IAAM,QAAQ;;;;;;;;;;EAHd,MAAM,QAAQ;EAKd,MAAM,QAAQ,eAAyB,MAAM,IAAI,MAAM,KAAK,CAAA;EAE5D,MAAM,oBAAoB,OAAe,SAA6B;GACpE,mBAAmB,GAAG,QAAQ,MAAM,MAAM,MAAM;GAChD,yBAAyB,SAAS,MAAM;GACxC,gBAAgB,GAAG,MAAM,MAAM;GAC/B,yBAAyB,QAAS,MAAM,OAAO,UAAU,MAAM,MAAM,QAAQ,MAAM,OAAO,SAAS,IAAI,UAAU,KAAK,KAAK,QAAS;GACrI;;uBAGC,mBAkBM,OAAA;IAjBJ,eAAY;IACZ,OAAK,eAAA,CAAC,0EAAwE,EAAA,qBAC/C,QAAA,SAAO,CAAA,CAAA;IACtC,MAAK;IACL,OAAA;yBACA,mBAWO,UAAA,MAAA,WAVe,MAAA,QAAZ,MAAM,MAAC;wBADjB,mBAWO,QAAA;KATJ,KAAK;KACN,OAAM;KACL,OAAK,eAAA,EAAA,OAAA,QAAmB,KAAK,SAAM,EAAA,MAAA,CAAA;QAEpC,mBAIS,QAAA;KAHf,OAAM;KACL,OAAK,eAAE,iBAAiB,KAAK,QAAQ,EAAC,CAAA;uBAChC,KAAI,EAAA,EAAA,CAAA,EAAA,EAAA"}

package/dist/SectionFilter-hrtoRLwj.js

@@ -0,0 +1,99 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, withCtx, withKeys } from "vue";
+import { ScalarIcon } from "@scalar/components";
+//#region src/components/SectionFilterButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = [
+	"aria-controls",
+	"aria-selected",
+	"tabindex"
+];
+//#endregion
+//#region src/components/SectionFilterButton.vue
+var SectionFilterButton_default = /* @__PURE__ */ defineComponent({
+	__name: "SectionFilterButton",
+	props: {
+		selected: { type: Boolean },
+		controls: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				"aria-controls": __props.controls ?? "",
+				"aria-selected": !!__props.selected,
+				class: normalizeClass(["hover:bg-b-2 flex w-fit cursor-pointer items-center rounded p-1 px-2 text-center font-medium whitespace-nowrap has-[:focus-visible]:outline", { "text-c-1 pointer-events-none": __props.selected }]),
+				role: "tab",
+				tabindex: __props.selected ? 0 : -1,
+				type: "button"
+			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/components/SectionFilter.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex" };
+var _hoisted_2 = { class: "filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center" };
+var _hoisted_3 = { class: "context-bar-group-hover:hidden mr-1.5" };
+//#endregion
+//#region src/components/SectionFilter.vue
+var SectionFilter_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "SectionFilter",
+	props: /* @__PURE__ */ mergeModels({
+		filters: { default: () => [] },
+		filterIds: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const tablist = ref();
+		/** Keyboard navigation */
+		const navigateSection = (direction) => {
+			const offset = direction === "prev" ? -1 : 1;
+			const index = model.value ? __props.filters.indexOf(model.value) : 0;
+			const length = __props.filters.length;
+			const newIndex = (index + offset + length) % length;
+			model.value = __props.filters[newIndex];
+			nextTick(() => {
+				if (tablist.value) {
+					const selectedButton = tablist.value.querySelector(`button[aria-selected="true"]`);
+					if (selectedButton) selectedButton.focus();
+				}
+			});
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "tablist",
+				ref: tablist,
+				class: "filter-hover context-bar-group ml-auto hidden lg:flex",
+				role: "tablist",
+				onKeydown: [_cache[0] || (_cache[0] = withKeys(($event) => navigateSection("prev"), ["left"])), _cache[1] || (_cache[1] = withKeys(($event) => navigateSection("next"), ["right"]))]
+			}, [createElementVNode("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.filters, (filter) => {
+				return openBlock(), createBlock(SectionFilterButton_default, {
+					key: filter,
+					class: "filter-hover-item",
+					controls: __props.filterIds?.[filter],
+					role: "tab",
+					selected: model.value === filter,
+					onClick: ($event) => model.value = filter
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(filter), 1)]),
+					_: 2
+				}, 1032, [
+					"controls",
+					"selected",
+					"onClick"
+				]);
+			}), 128)), createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(model.value), 1), createVNode(unref(ScalarIcon), {
+				icon: "FilterList",
+				size: "md",
+				thickness: "2"
+			})])])], 544);
+		};
+	}
+}), [["__scopeId", "data-v-f97cc68c"]]);
+//#endregion
+export { SectionFilter_default as t };
+
+//# sourceMappingURL=SectionFilter-hrtoRLwj.js.map

package/dist/SectionFilter-hrtoRLwj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionFilter-hrtoRLwj.js","names":[],"sources":["../src/components/SectionFilterButton.vue","../src/components/SectionFilterButton.vue","../src/components/SectionFilter.vue","../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { selected, controls } = defineProps<{\n  selected?: boolean\n  controls?: string | undefined\n}>()\n</script>\n<template>\n  <button\n    :aria-controls=\"controls ?? ''\"\n    :aria-selected=\"!!selected\"\n    class=\"hover:bg-b-2 flex w-fit cursor-pointer items-center rounded p-1 px-2 text-center font-medium whitespace-nowrap has-[:focus-visible]:outline\"\n    :class=\"{ 'text-c-1 pointer-events-none': selected }\"\n    role=\"tab\"\n    :tabindex=\"selected ? 0 : -1\"\n    type=\"button\">\n    <slot />\n  </button>\n</template>\n","<script setup lang=\"ts\">\nconst { selected, controls } = defineProps<{\n  selected?: boolean\n  controls?: string | undefined\n}>()\n</script>\n<template>\n  <button\n    :aria-controls=\"controls ?? ''\"\n    :aria-selected=\"!!selected\"\n    class=\"hover:bg-b-2 flex w-fit cursor-pointer items-center rounded p-1 px-2 text-center font-medium whitespace-nowrap has-[:focus-visible]:outline\"\n    :class=\"{ 'text-c-1 pointer-events-none': selected }\"\n    role=\"tab\"\n    :tabindex=\"selected ? 0 : -1\"\n    type=\"button\">\n    <slot />\n  </button>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  filterIds?: Record<T, string>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  filterIds?: Record<T, string>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;uBCOE,mBASS,UAAA;IARN,iBAAe,QAAA,YAAQ;IACvB,iBAAa,CAAA,CAAI,QAAA;IAClB,OAAK,eAAA,CAAC,+IAA6I,EAAA,gCACzG,QAAA,UAAQ,CAAA,CAAA;IAClD,MAAK;IACJ,UAAU,QAAA,WAAQ,IAAA;IACnB,MAAK;OACL,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,aAAA;;;;;;;;;;;;;;;;;;;;;;EEJZ,MAAM,QAAQ,SAAc,SAAA,aAAC;EAE7B,MAAM,UAAU,KAAoB;;EAGpC,MAAM,mBAAmB,cAA+B;GACtD,MAAM,SAAS,cAAc,SAAS,KAAK;GAC3C,MAAM,QAAQ,MAAM,QAAQ,QAAA,QAAQ,QAAQ,MAAM,MAAM,GAAG;GAC3D,MAAM,SAAS,QAAA,QAAQ;GAGvB,MAAM,YAAY,QAAQ,SAAS,UAAU;AAC7C,SAAM,QAAQ,QAAA,QAAQ;AAGtB,kBAAe;AACb,QAAI,QAAQ,OAAO;KACjB,MAAM,iBAAiB,QAAQ,MAAM,cACnC,+BACD;AACD,SAAI,eACF,gBAAe,OAAM;;KAG1B;;;uBAID,mBA2BM,OAAA;aA1BA;IAAJ,KAAI;IACJ,OAAM;IACN,MAAK;IACJ,WAAO,CAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WAAO,gBAAe,OAAA,EAAA,CAAA,OAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WACd,gBAAe,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA;OAC/B,mBAoBM,OApBN,YAoBM,EAAA,UAAA,KAAA,EAlBJ,mBASsB,UAAA,MAAA,WARH,QAAA,UAAV,WAAM;wBADf,YASsB,6BAAA;KAPnB,KAAK;KACN,OAAM;KACL,UAAU,QAAA,YAAY;KACvB,MAAK;KACJ,UAAU,MAAA,UAAU;KACpB,UAAK,WAAE,MAAA,QAAQ;;4BACJ,CAAA,gBAAA,gBAAT,OAAM,EAAA,EAAA,CAAA,CAAA;;;;;;;cAEX,mBAOM,OAPN,YAOM,CALJ,mBAAsE,QAAtE,YAAsE,gBAAf,MAAA,MAAK,EAAA,EAAA,EAC5D,YAGkB,MAAA,WAAA,EAAA;IAFhB,MAAK;IACL,MAAK;IACL,WAAU"}