npm - @scalar/api-reference - Versions diffs - 1.57.5 → 1.58.0 - Mend

@scalar/api-reference 1.57.5 → 1.58.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (192) hide show

package/dist/components/ApiReference.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ApiReference.vue.d.ts","sourceRoot":"","sources":["../../src/components/ApiReference.vue"],"names":[],"mappings":"~~AA84CA~~,OAAO,~~EACL~~,KAAK,4BAA4B,EAGlC,MAAM,6BAA6B,CAAA;AAWpC,OAAO,KAAK,EACV,cAAc,EAEf,MAAM,4CAA4C,CAAA;~~wBAkE9B~~,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEhB;;;OAGG;oBACa,4BAA4B;;;;;;IAJ5C;;;OAGG;oBACa,4BAA4B;;wBAKxB;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE;sBACxB;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE;wBACpB;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE;sBACxB;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE;6BACf;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE;eACpC;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE;~~EAi+C~~/B,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"ApiReference.vue.d.ts","sourceRoot":"","sources":["../../src/components/ApiReference.vue"],"names":[],"mappings":"AAg9CA,OAAO,EAEL,KAAK,4BAA4B,EAGlC,MAAM,6BAA6B,CAAA;AAWpC,OAAO,KAAK,EACV,cAAc,EAEf,MAAM,4CAA4C,CAAA;wBAmE9B,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEhB;;;OAGG;oBACa,4BAA4B;;;;;;IAJ5C;;;OAGG;oBACa,4BAA4B;;wBAKxB;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE;sBACxB;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE;wBACpB;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE;sBACxB;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE;6BACf;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE;eACpC;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE;EAwiD/B,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/ApiReference.vue.js CHANGED Viewed

@@ -5,7 +5,7 @@ import ApiReference_vue_vue_type_script_setup_true_lang_default from "./ApiRefer
 /* empty css                             */
 /* empty css                             */
 //#region src/components/ApiReference.vue
-var ApiReference_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ApiReference_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-69b8e2f9"]]);
+var ApiReference_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ApiReference_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-22c2988a"]]);
 //#endregion
 export { ApiReference_default as default };

package/dist/components/ApiReference.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ApiReference.vue.js","names":[],"sources":["../../src/components/ApiReference.vue"],"sourcesContent":["<script lang=\"ts\">\n// Injected by Vite at build time (see vite.config.ts and vite.standalone.config.ts).\n// Read via process.env so the constant is replaced inline without pulling package.json\n// into the TypeScript program — that would expand rootDir and emit declarations under dist/src/.\nconst version = PACKAGE_VERSION\n\nif (version && typeof window !== 'undefined') {\n console.info(`@scalar/api-reference@${version}`)\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { provideUseId } from '@headlessui/vue'\nimport { OpenApiClientButton } from '@scalar/api-client/blocks/operation-block'\nimport {\n createApiClientModal,\n type ApiClientModal,\n} from '@scalar/api-client/modal'\nimport {\n ScalarColorModeToggleButton,\n ScalarColorModeToggleIcon,\n} from '@scalar/components/color-mode-toggle'\nimport { addScalarClassesToHeadless } from '@scalar/components/helpers'\nimport { ScalarSidebarFooter } from '@scalar/components/sidebar'\nimport { isLocalUrl } from '@scalar/helpers/url/is-local-url'\nimport { apiReferenceConfigurationSchema } from '@scalar/schemas/api-reference'\nimport {\n createSidebarState,\n ScalarSidebar,\n scrollSidebarToTop,\n} from '@scalar/sidebar'\nimport { getThemeStyles, hasObtrusiveScrollbars } from '@scalar/themes'\nimport {\n type AnyApiReferenceConfiguration,\n type ApiReferenceConfiguration,\n type ApiReferenceConfigurationRaw,\n} from '@scalar/types/api-reference'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport { coerce } from '@scalar/validation'\nimport { createWorkspaceStore } from '@scalar/workspace-store/client'\nimport { createWorkspaceEventBus } from '@scalar/workspace-store/events'\nimport {\n getActiveEnvironment,\n getServers,\n} from '@scalar/workspace-store/request-example'\nimport type {\n TraversedEntry,\n TraversedTag,\n} from '@scalar/workspace-store/schemas/navigation'\nimport { isOpenApiDocument } from '@scalar/workspace-store/schemas/type-guards'\nimport { useScrollLock } from '@vueuse/core'\nimport diff from 'microdiff'\nimport {\n computed,\n onBeforeMount,\n onBeforeUnmount,\n onMounted,\n onServerPrefetch,\n provide,\n ref,\n useId,\n useTemplateRef,\n watch,\n} from 'vue'\n\nimport {\n AgentScalarButton,\n AgentScalarDrawer,\n OpenMCPButton,\n} from '@/components/AgentScalar'\nimport ClassicHeader from '@/components/ClassicHeader.vue'\nimport Content from '@/components/Content/Content.vue'\nimport MobileHeader from '@/components/MobileHeader.vue'\nimport { DeveloperTools } from '@/features/developer-tools'\nimport DocumentSelector from '@/features/multiple-documents/DocumentSelector.vue'\nimport SearchButton from '@/features/Search/components/SearchButton.vue'\nimport { getSystemModePreference } from '@/helpers/color-mode'\nimport { downloadDocument } from '@/helpers/download'\nimport {\n getIdFromUrl,\n makeUrlFromId,\n matchesBasePath,\n} from '@/helpers/id-routing'\nimport {\n scrollToLazy as _scrollToLazy,\n addToPriorityQueue,\n blockIntersection,\n intersectionEnabled,\n} from '@/helpers/lazy-bus'\nimport {\n loadAuthFromStorage,\n loadClientFromStorage,\n} from '@/helpers/load-from-perssistance'\nimport { mapConfigPlugins } from '@/helpers/map-config-plugins'\nimport { mapConfigToWorkspaceStore } from '@/helpers/map-config-to-workspace-store'\nimport {\n normalizeConfigurations,\n type NormalizedConfiguration,\n} from '@/helpers/normalize-configurations'\nimport { safeDeepClone } from '@/helpers/safe-deep-clone'\nimport { AGENT_CONTEXT_SYMBOL, useAgent } from '@/hooks/use-agent'\nimport { useIntersection } from '@/hooks/use-intersection'\nimport { createPluginManager, PLUGIN_MANAGER_SYMBOL } from '@/plugins'\nimport { persistencePlugin } from '@/plugins/persistance-plugin'\n\nconst props = defineProps<{\n /*\n Configuration for the API reference.\n * Can be a single configuration or an array of configurations for multiple documents.\n /\n configuration?: AnyApiReferenceConfiguration\n}>()\n\ndefineSlots<{\n 'content-start'?(): { breadcrumb: string }\n 'content-end'?(): { breadcrumb: string }\n 'sidebar-start'?(): { breadcrumb: string }\n 'sidebar-end'?(): { breadcrumb: string }\n 'editor-placeholder'?(): { breadcrumb: string }\n footer?(): { breadcrumb: string }\n}>()\n\nconst { copyToClipboard } = useClipboard()\n\n/\n Used to inject the environment into built packages\n \n Primary use case is the open-in-client button\n /\nconst isDevelopment = import.meta.env.DEV\n\nconst obtrusiveScrollbars = computed(hasObtrusiveScrollbars)\n\nconst eventBus = createWorkspaceEventBus({ debug: isDevelopment })\nconst isSidebarOpen = ref(false)\n\n/\n Due to a bug in headless UI, we need to set an ID here that can be shared across server/client\n * TODO remove this once the bug is fixed\n \n @see https://github.com/tailwindlabs/headlessui/issues/2979\n /\nprovideUseId(() => useId())\n\n// ---------------------------------------------------------------------------\n/\n Configuration Handling\n \n We will normalize the configurations and store them in a computed property.\n * The active configuration will be associated with the active document.\n /\nconst configList = computed(() => normalizeConfigurations(props.configuration))\n\nconst isMultiDocument = computed(() => Object.keys(configList.value).length > 1)\n\n/* Search for the source with a default attribute or use the first one /\nconst activeSlug = ref<string>(\n Object.values(configList.value).find((c) => c.default)?.slug ??\n configList.value[Object.keys(configList.value)?.[0] ?? '']?.slug ??\n '',\n)\n\n/\n On initial page load we need to determine if there is a valid document slug in the URL\n \n If there is we set the active slug to the document slug\n /\nif (typeof window !== 'undefined') {\n const url = new URL(window.location.href)\n\n // To handle legacy query parameter multi-document support we redirect\n // to the new path routing format\n const apiParam = url.searchParams.get('api')\n if (apiParam && configList.value[apiParam]) {\n activeSlug.value = apiParam\n const idFromUrl = getIdFromUrl(\n url,\n configList.value[apiParam].config.pathRouting?.basePath,\n apiParam,\n )\n const newUrl = makeUrlFromId(\n idFromUrl,\n configList.value[apiParam].config.pathRouting?.basePath,\n isMultiDocument.value,\n )\n if (newUrl) {\n newUrl.searchParams.delete('api')\n window.history.replaceState({}, '', newUrl.toString())\n }\n }\n\n /\n For path routing on initial load we do not know which basePath to check for\n * we need to search the configs to see if any of the base paths match the URL\n * and then use that basePath to get the initial id\n \n With this approach we cannot support multi-document mode with one of configs having\n * an empty basePath\n \n Other conflicts are possible.\n /\n const basePaths = Object.values(configList.value).map(\n (c) => c.config.pathRouting?.basePath,\n )\n\n const initialId = getIdFromUrl(\n url,\n basePaths.find((p) => (p ? matchesBasePath(url, p) : false)),\n isMultiDocument.value ? undefined : activeSlug.value,\n )\n const documentSlug = initialId.split('/')[0]\n\n if (documentSlug && configList.value[documentSlug]) {\n activeSlug.value = documentSlug\n }\n}\n\n/* Computed document options list for the selector logic /\nconst documentOptionList = computed(() =>\n Object.values(configList.value).map((c) => ({\n label: c.title,\n id: c.slug,\n })),\n)\n\n/* Configuration overrides to apply to the selected document (from the localhost toolbar) /\nconst configurationOverrides = ref<\n Partial<Omit<ApiReferenceConfiguration, 'slug' \| 'title' \| ''>>\n>({})\n\n/* Any dev toolbar modifications are merged with the active configuration /\nconst mergedConfig = computed<ApiReferenceConfiguration>(() => ({\n // Provides a default set of values when the lookup fails\n ...coerce(apiReferenceConfigurationSchema, {}),\n // The active configuration based on the slug\n ...configList.value[activeSlug.value]?.config,\n // Any overrides from the localhost toolbar\n ...configurationOverrides.value,\n}))\n\n/* Convenience break out var to determine which routing mode we are using /\nconst basePath = computed(() => mergedConfig.value.pathRouting?.basePath)\n\nconst themeStyle = computed(() =>\n getThemeStyles(mergedConfig.value.theme, {\n fonts: mergedConfig.value.withDefaultFonts,\n }),\n)\n\n/* Plugin injection is not reactive. All plugins must be provided at first render /\nconst pluginManager = createPluginManager({\n plugins: Object.values(configList.value).flatMap(\n (c) => c.config.plugins ?? [],\n ),\n})\nprovide(PLUGIN_MANAGER_SYMBOL, pluginManager)\n\npluginManager.notifyInit(mergedConfig.value)\n\nwatch(mergedConfig, (config) => pluginManager.notifyConfigChange(config))\n// ---------------------------------------------------------------------------\n/* Navigation State Handling /\n\n// Front-end redirect\nif (mergedConfig.value.redirect && typeof window !== 'undefined') {\n const newPath = mergedConfig.value.redirect(\n (mergedConfig.value.pathRouting ? window.location.pathname : '') +\n window.location.hash,\n )\n if (newPath) {\n window.history.replaceState({}, '', newPath)\n }\n}\n\n/\n Sets the active slug and updates the URL with the selected document slug\n \n If an element ID is passed in we will configure the path or hash routing\n /\nfunction syncSlugAndUrlWithDocument(\n slug: string,\n elementId: string \| undefined,\n config: ApiReferenceConfigurationRaw,\n) {\n // We create a new URL and go to the root element if an ID is not provided\n const url = makeUrlFromId(\n elementId \|\| slug,\n config.pathRouting?.basePath,\n isMultiDocument.value,\n )\n\n if (url) {\n window.history.replaceState({}, '', url.toString())\n }\n\n // Update the active slug\n activeSlug.value = slug\n}\n\n// ---------------------------------------------------------------------------\n/* Workspace Store Initialization /\n\n/\n Initializes the new client workspace store.\n /\nconst workspaceStore = createWorkspaceStore({\n verbose: isDevelopment,\n})\n\n/\n We need to keep the client store separate from the workspace store\n * This is because we want the client store to be a playground where users can test out their requests without affecting the references store\n /\nconst clientStore = createWorkspaceStore({\n verbose: isDevelopment,\n plugins: [\n persistencePlugin({\n prefix: () => activeSlug.value,\n persistAuth: () => mergedConfig.value.persistAuth ?? false,\n }),\n ],\n})\n\n// TODO: persistence should be hoisted into standalone\n// Client side integrations will want to handle dark mode externally\nconst { toggleColorMode, isDarkMode } = useColorMode({\n initialColorMode: {\n true: 'dark' as const,\n false: 'light' as const,\n undefined: 'system' as const,\n }[String(mergedConfig.value.darkMode)],\n overrideColorMode: mergedConfig.value.forceDarkModeState,\n})\n\n/\n The active document narrowed to an OpenAPI document.\n \n api-reference is OpenAPI-native, so AsyncAPI documents are surfaced as\n * undefined to downstream components.\n /\nconst activeOpenApiDocument = computed(() => {\n const doc = workspaceStore.workspace.activeDocument\n return isOpenApiDocument(doc) ? doc : undefined\n})\n\n/\n Create top level sidebar entries for each document\n * This allows sharing a single sidebar state for across the workspace\n /\nconst itemsFromWorkspace = computed<TraversedEntry[]>(() => {\n return Object.entries(workspaceStore.workspace.documents).map(\n ([slug, document]) => ({\n id: slug,\n type: 'document',\n description: document.info.description,\n name: document.info.title ?? slug,\n title: document.info.title ?? slug,\n children: isOpenApiDocument(document)\n ? (document['x-scalar-navigation']?.children ?? [])\n : [],\n }),\n )\n})\n\n/* Initialize the sidebar /\nconst sidebarState = createSidebarState<TraversedEntry>(itemsFromWorkspace, {\n hooks: {},\n})\n\n/* Recursively set all children of the given items to open /\nconst setChildrenOpen = (items: TraversedEntry[]): void => {\n items.forEach((item) => {\n if (item.type === 'tag' \|\| item.type === 'models') {\n sidebarState.setExpanded(item.id, true)\n }\n if ('children' in item && item.children) {\n setChildrenOpen(item.children)\n }\n })\n}\n\n/* We get the sub items for the sidebar based on the configuration/document slug /\nconst sidebarItems = computed<TraversedEntry[]>(() => {\n const config = mergedConfig.value\n\n if (!config) {\n return []\n }\n\n const docItems =\n sidebarState.items.value.find(\n (item): item is TraversedTag => item.id === activeSlug.value,\n )?.children ?? []\n\n // When the default open all tags configuration is enabled we open all the children of the document\n if (config.defaultOpenAllTags) {\n setChildrenOpen(docItems)\n }\n\n // When the expand all model sections configuration is enabled we open all the children of the models tag\n if (config.expandAllModelSections) {\n const models = docItems.find(\n (item): item is TraversedTag => item.type === 'models',\n )\n if (models) {\n sidebarState.setExpanded(models.id, true)\n models.children?.forEach((child) => {\n sidebarState.setExpanded(child.id, true)\n })\n }\n }\n\n return docItems\n})\n\n/* Find the sidebar entry that represents the introduction section /\nconst infoSectionId = computed(\n () =>\n sidebarItems.value.find(\n (item) => item.type === 'text' && item.title === 'Introduction',\n )?.id ?? `${activeSlug.value}/description/introduction`,\n)\n\n/* User for mobile navigation /\nconst breadcrumb = ref('')\n\nconst slotProps = computed(() => ({\n breadcrumb: breadcrumb.value,\n}))\n\nconst setBreadcrumb = (id: string) => {\n const item = sidebarState.getEntryById(id)\n\n if (!item \|\| item.type === 'document') {\n breadcrumb.value = ''\n } else {\n breadcrumb.value = item.title\n }\n}\n\nconst scrollToLazyElement = (id: string) => {\n setBreadcrumb(id)\n sidebarState.setSelected(id)\n _scrollToLazy(id, sidebarState.setExpanded, sidebarState.getEntryById)\n}\n\n/* Maps some config values to the workspace store to keep it reactive /\nmapConfigToWorkspaceStore({\n config: () => mergedConfig.value,\n store: workspaceStore,\n isDarkMode,\n})\n\nmapConfigToWorkspaceStore({\n config: () => mergedConfig.value,\n store: clientStore,\n isDarkMode,\n})\n\n/* Merged environment variables from workspace and document levels /\nconst environment = computed(\n () =>\n getActiveEnvironment(\n workspaceStore,\n workspaceStore.workspace.activeDocument ?? null,\n ).environment,\n)\n\nif (typeof window !== 'undefined') {\n // @ts-expect-error - For debugging purposes expose the store\n window.dataDumpWorkspace = () => workspaceStore\n}\n\n// For testing\ndefineExpose({\n eventBus,\n workspaceStore,\n sidebarItems,\n})\n\n/\n Computes a mapping from model names to their sidebar entry IDs.\n * This is used for quick lookups and navigation within the sidebar.\n /\nconst modelsIndex = computed(() => {\n return sidebarItems.value\n .filter((item) => item.type === 'models')\n .flatMap((item) => item.children ?? [])\n .filter((item) => item.type === 'model')\n .reduce(\n (acc, item) => {\n acc[item.name] = item.id\n return acc\n },\n {} as Record<string, string>,\n )\n})\n\neventBus.on('scroll-to:model-by-name', ({ name }) => {\n /* Find the model in the models index /\n const model = modelsIndex.value[name]\n\n if (model) {\n scrollToLazyElement(model)\n }\n})\n\nconst addDocument: typeof workspaceStore.addDocument = async (\n input,\n navigationOptions,\n) => {\n const result = await workspaceStore.addDocument(input, navigationOptions)\n // Now add it to the client store\n const state = workspaceStore.exportWorkspace()\n clientStore.loadWorkspace({\n auth: {},\n documents: {\n [input.name]: safeDeepClone(state.documents[input.name]) ?? {\n 'openapi': '3.1.0',\n 'info': {\n title: '',\n version: '',\n },\n 'x-scalar-original-document-hash': '',\n },\n },\n intermediateDocuments: {},\n originalDocuments: {},\n overrides: {},\n history: {},\n meta: {},\n })\n return result\n}\n\n// ---------------------------------------------------------------------------\n// Document Management\n\n/\n Handle changing the active document\n \n 1. If the document has not be loaded to the workspace store we set it to empty and asynchronously load it\n * 2. If the document has been loaded to the workspace store we just set it to active\n * 3. If the content from the configuration has changes we need to update the document in the workspace store\n /\nconst changeSelectedDocument = async (\n slug: string,\n elementId?: string \| undefined,\n) => {\n const normalized = configList.value[slug]\n\n if (!normalized) {\n console.warn(`Document ${slug} not found in configList`)\n return\n }\n\n const config = {\n ...normalized.config,\n ...configurationOverrides.value,\n }\n\n // Store `onDocumentSelect` result to await its execution later, before calling `onLoaded`\n const onDocumentSelectPromise = config.onDocumentSelect?.()\n\n // Set the active slug and update any routing\n syncSlugAndUrlWithDocument(slug, elementId, config)\n\n // Update the document on the route as well, the method and path don't matter as we update them before opening\n apiClient.value?.route({\n documentSlug: slug,\n method: 'get',\n path: '/',\n })\n\n const isFirstLoad = !workspaceStore.workspace.documents[slug]\n\n // If the document is not in the store, we asynchronously load it\n if (isFirstLoad) {\n const result = await addDocument(\n normalized.source.url\n ? {\n name: slug,\n url: normalized.source.url,\n fetch: config.customFetch,\n }\n : {\n name: slug,\n document: normalized.source.content ?? {},\n },\n config,\n )\n\n const document = clientStore.workspace.documents[slug]\n\n // If the document does not have a selected server we set it to the first server\n if (\n result === true &&\n isOpenApiDocument(document) &&\n document['x-scalar-selected-server'] === undefined\n ) {\n // Set the active server if the document is loaded successfully\n const servers = getServers(\n normalized.config.servers ?? document.servers,\n {\n baseServerUrl: mergedConfig.value.baseServerURL,\n documentUrl: normalized.source.url,\n },\n )\n if (servers.length > 0) {\n clientStore.updateDocument(\n slug,\n 'x-scalar-selected-server',\n servers[0]!.url,\n )\n }\n }\n }\n\n // Always set it to active; if the document is null we show a loading state\n workspaceStore.update('x-scalar-active-document', slug)\n clientStore.update('x-scalar-active-document', slug)\n\n // If the document has persistence enabled we load the auth schemes from storage\n if (config.persistAuth) {\n loadAuthFromStorage(clientStore, slug)\n }\n\n // ensure that `onLoaded` hook doesn't block execution but is executed after `onDocumentSelect`\n void (async () => {\n await onDocumentSelectPromise\n void config.onLoaded?.(slug)\n })()\n\n // When loading to a specified element we need to freeze and scroll\n if (elementId && elementId !== slug) {\n scrollToLazyElement(elementId)\n }\n // If there is no child element of the document specified and defaultOpenFirstTag is enabled, we expand the first tag\n else if (config.defaultOpenFirstTag) {\n const firstTag = sidebarItems.value.find((item) => item.type === 'tag')\n if (firstTag) {\n sidebarState.setExpanded(firstTag.id, true)\n }\n }\n}\n\n/\n TODO:Move this to a dedicated updateDocument function in the future and\n * away from vue-reactivity based updates\n /\nwatch(\n () => Object.values(configList.value),\n async (newConfigList, oldConfigList) => {\n /\n Handles replacing and updating documents within the workspace store\n * when we detect configuration changes.\n /\n const updateSource = async (\n updated: NormalizedConfiguration,\n previous: NormalizedConfiguration \| undefined,\n ) => {\n /* If we have not loaded the document previously we don't need to handle any updates to store /\n if (!workspaceStore.workspace.documents[updated.slug]) {\n return\n }\n /* If the URL has changed we fetch and rebase /\n if (updated.source.url && updated.source.url !== previous?.source.url) {\n await addDocument(\n {\n name: updated.slug,\n url: updated.source.url,\n fetch: updated.config.customFetch,\n },\n updated.config,\n )\n\n return\n }\n\n // If the was not a URL change then we require a document to continue\n if (!updated.source.content) {\n return\n }\n\n /\n We need to deeply check for document changes. Parse documents and then only rebase\n * if we detect deep changes in the two sources\n /\n if (\n diff(\n updated.source.content,\n previous && 'content' in previous.source\n ? (previous.source.content ?? {})\n : {},\n ).length\n ) {\n await addDocument(\n {\n name: updated.slug,\n document: updated.source.content,\n },\n updated.config,\n )\n }\n }\n\n newConfigList.forEach((newConfig, index) =>\n updateSource(newConfig, oldConfigList[index]),\n )\n\n const newSlugs = newConfigList.map((c) => c.slug)\n const oldSlugs = oldConfigList.map((c) => c.slug)\n\n // If the slugs have changed, we need to update the active document and the URL query param\n if (\n newSlugs.length !== oldSlugs.length \|\|\n !newSlugs.every((slug, index) => slug === oldSlugs[index])\n ) {\n await changeSelectedDocument(newSlugs[0] ?? '')\n }\n },\n {\n deep: true,\n },\n)\n\n/* Preload the first document during SSR /\nonServerPrefetch(() => changeSelectedDocument(activeSlug.value))\n\n/* Load the first document on page load /\nonBeforeMount(async () => {\n // We read the client from the client store so we need to set it to the client store\n loadClientFromStorage(clientStore)\n\n await changeSelectedDocument(\n activeSlug.value,\n getIdFromUrl(\n window.location.href,\n configList.value[activeSlug.value]?.config.pathRouting?.basePath,\n isMultiDocument.value ? undefined : activeSlug.value,\n ),\n )\n})\n\nconst documentUrl = computed(() => {\n return configList.value[activeSlug.value]?.source?.url\n})\n\n// --------------------------------------------------------------------------- /\n// Agent Scalar\n\n/*\n Determines if Agent Scalar should be enabled based on the configuration and the current URL\n \n - If the agent is disabled in the configuration, it should not be enabled\n * - If the current URL is a local URL, it should be enabled\n * - If the agent key is set, it should be enabled\n /\nconst agent = useAgent({\n agentEnabled: computed(() => {\n const currentConfiguration = configList.value[activeSlug.value]\n\n if (currentConfiguration?.agent?.disabled) {\n return false\n }\n\n if (typeof window !== 'undefined' && isLocalUrl(window.location.href)) {\n return true\n }\n\n return Boolean(configList.value[activeSlug.value]?.agent?.key)\n }),\n})\nprovide(AGENT_CONTEXT_SYMBOL, agent)\n\n// --------------------------------------------------------------------------- /\n// Api Client Modal\n\n// Setup the ApiClient on mount\nconst modal = useTemplateRef<HTMLElement>('modal')\nconst apiClient = ref<ApiClientModal \| null>(null)\nonMounted(() => {\n if (!modal.value) {\n return\n }\n\n apiClient.value = createApiClientModal({\n el: modal.value,\n eventBus,\n workspaceStore: clientStore,\n options: mergedConfig,\n plugins: [\n ...pluginManager.getApiClientPlugins(),\n ...mapConfigPlugins(mergedConfig, environment),\n ],\n })\n})\nonBeforeUnmount(() => {\n pluginManager.notifyDestroy()\n apiClient.value?.app.unmount()\n})\n\n// ---------------------------------------------------------------------------\n// Top level event handlers and user specified callbacks\n\n/** Ensure we call the onServerChange callback /\neventBus.on('server:update:selected', ({ url }) =>\n mergedConfig.value.onServerChange?.(url),\n)\n\n/* Download the document from the store /\neventBus.on('ui:download:document', ({ format }) => {\n const document = workspaceStore.exportActiveDocument(format)\n\n if (!document) {\n console.error('No document found to download')\n return\n }\n\n void downloadDocument(document, activeSlug.value ?? 'openapi', format)\n})\n\n// ---------------------------------------------------------------------------\n// Local event and scroll handling\n\n/\n Handler for a direct navigation event such as a sidebar or search click\n \n Depending on the item type we handle a selection event differently:\n \n - Tag: If a tag is closed we open it and all its parents and scroll to it\n * If a tag is open we just close the tag\n * - Operation:\n * Open all parents and scroll to the operation\n /\nconst handleSelectSidebarEntry = (id: string, caller?: 'sidebar') => {\n const item = sidebarState.getEntryById(id)\n\n if (\n (item?.type === 'tag' \|\|\n item?.type === 'models' \|\|\n item?.type === 'text') &&\n sidebarState.isExpanded(id) && // Only close if the item is expanded\n sidebarState.selectedItem.value === id // Only close if the item is not the currently selected item\n ) {\n // hack until we fix intersection logic\n const unblock = blockIntersection()\n\n sidebarState.setExpanded(id, false)\n\n unblock()\n\n return\n }\n\n // Close the mobile menu upon selecting any item that's not a tag or model\n if (item?.type !== 'tag' && item?.type !== 'models') {\n isSidebarOpen.value = false\n }\n\n scrollToLazyElement(id)\n\n const url = makeUrlFromId(id, basePath.value, isMultiDocument.value)\n if (url) {\n window.history.pushState({}, '', url)\n\n // Trigger the onSidebarClick callback if the caller is sidebar\n if (caller === 'sidebar') {\n mergedConfig.value.onSidebarClick?.(url.toString())\n }\n }\n\n if (agent.showAgent.value) {\n agent.closeAgent()\n }\n}\n\n/* Handle a navigation item selection event /\neventBus.on('select:nav-item', ({ id }) => handleSelectSidebarEntry(id))\n\n/* Handle a scroll to navigation item event /\neventBus.on('scroll-to:nav-item', ({ id }) => handleSelectSidebarEntry(id))\n\n/* Handle an intersecting navigation item event /\neventBus.on('intersecting:nav-item', ({ id }) => {\n if (!intersectionEnabled.value) {\n return\n }\n\n sidebarState.setSelected(id)\n setBreadcrumb(id)\n\n // Scroll the sidebar to keep the selected element near the top\n scrollSidebarToTop(id)\n\n const url = makeUrlFromId(id, basePath.value, isMultiDocument.value)\n if (url && workspaceStore.workspace.activeDocument) {\n window.history.replaceState({}, '', url.toString())\n }\n})\n\neventBus.on('toggle:nav-item', ({ id, open }) => {\n if (open) {\n mergedConfig.value.onShowMore?.(id)\n\n // Pre-queue first child so it renders immediately when the tag expands\n const entry = sidebarState.getEntryById(id)\n if (entry && 'children' in entry && entry.children) {\n const first = entry.children[0]\n\n if (first) {\n addToPriorityQueue(first.id)\n }\n }\n }\n sidebarState.setExpanded(id, open ?? !sidebarState.isExpanded(id))\n})\n\neventBus.on('copy-url:nav-item', ({ id }) => {\n const url = makeUrlFromId(\n id,\n basePath.value,\n isMultiDocument.value,\n )?.toString()\n return url && copyToClipboard(url)\n})\n\n// ---------------------------------------------------------------------------\n// History and scroll restoration\n\nonBeforeMount(() => {\n window.history.scrollRestoration = 'manual'\n // Ensure we add our scalar wrapper class to the headless ui root, mounted is too late\n addScalarClassesToHeadless()\n\n // When we detect a back button press we scroll to the new id\n window.addEventListener('popstate', () => {\n const id = getIdFromUrl(\n window.location.href,\n mergedConfig.value.pathRouting?.basePath,\n isMultiDocument.value ? undefined : activeSlug.value,\n )\n if (id) {\n scrollToLazyElement(id)\n }\n })\n})\n\n// ---------------------------------------------------------------------------\n// Document start intersection observer\n\nconst documentStartRef = useTemplateRef<HTMLElement>('documentStartRef')\n\n/\n Uses `immediate` so the sentinel fires as soon as it enters the viewport (not just at the center strip).\n * When the user scrolls away from the top, both this observer and the first section's center-strip\n * observer are intersecting simultaneously, so the section observer does not re-fire on its own.\n * The `onExit` callback bridges that gap by finding whichever section is at the viewport center\n * and re-emitting the nav event for it.\n /\nuseIntersection(\n documentStartRef,\n () => {\n eventBus.emit('intersecting:nav-item', { id: activeSlug.value })\n },\n {\n onExit: () => {\n const centerY = window.innerHeight / 2\n const section = document\n .elementsFromPoint(window.innerWidth / 2, centerY)\n .find((el) => el.tagName === 'SECTION' && el.id)\n\n if (section?.id) {\n eventBus.emit('intersecting:nav-item', { id: section.id })\n }\n },\n immediate: true,\n },\n)\n\nconst colorMode = computed(() => {\n const mode = workspaceStore.workspace['x-scalar-color-mode']\n\n if (mode === 'system') {\n return getSystemModePreference()\n }\n\n return mode\n})\n\nconst bodyScrollLocked = useScrollLock(\n typeof document !== 'undefined' ? document.body : null,\n)\n\nwatch(agent.showAgent, () => (bodyScrollLocked.value = agent.showAgent.value))\n\nconst showMCPButton = computed(() => {\n if (mergedConfig.value.mcp?.disabled) {\n return false\n }\n\n if (typeof window !== 'undefined' && isLocalUrl(window.location.href)) {\n return true\n }\n\n if (mergedConfig.value.mcp) {\n return true\n }\n\n return false\n})\n</script>\n\n<template>\n <!-- SingleApiReference -->\n <div>\n <!-- Inject any custom CSS directly into a style tag -->\n <component :is=\"'style'\">\n {{ mergedConfig.customCss }}\n {{ themeStyle }}\n </component>\n <div\n ref=\"documentEl\"\n class=\"scalar-app scalar-api-reference references-layout\"\n :class=\"[\n {\n 'scalar-api-references-standalone-mobile': mergedConfig.showSidebar,\n 'scalar-scrollbars-obtrusive': obtrusiveScrollbars,\n 'references-editable': mergedConfig.isEditable,\n 'references-sidebar': mergedConfig.showSidebar,\n 'references-sidebar-mobile-open': isSidebarOpen,\n 'references-classic': mergedConfig.layout === 'classic',\n },\n $attrs.class,\n ]\">\n <!-- Agent Scalar -->\n <AgentScalarDrawer\n v-if=\"agent.agentEnabled.value\"\n :agentScalarConfiguration=\"configList[activeSlug]?.agent\"\n :externalUrls=\"mergedConfig.externalUrls\"\n :workspaceStore />\n\n <!-- Mobile Header and Sidebar when in modern layout -->\n\n <MobileHeader\n v-if=\"mergedConfig.layout === 'modern'\"\n :breadcrumb=\"breadcrumb\"\n :isSidebarOpen=\"isSidebarOpen\"\n :showSidebar=\"mergedConfig.showSidebar\"\n @toggleSidebar=\"() => (isSidebarOpen = !isSidebarOpen)\">\n <template #search>\n <SearchButton\n v-if=\"!mergedConfig.hideSearch\"\n class=\"my-2\"\n :document=\"activeOpenApiDocument\"\n :eventBus=\"eventBus\"\n :hideModels=\"mergedConfig.hideModels\"\n :searchHotKey=\"mergedConfig.searchHotKey\"\n :showSidebar=\"mergedConfig.showSidebar\" />\n </template>\n <template #sidebar=\"{ sidebarClasses }\">\n <ScalarSidebar\n v-if=\"mergedConfig.showSidebar && mergedConfig.layout === 'modern'\"\n :aria-label=\"`Sidebar for ${workspaceStore.workspace.activeDocument?.info?.title}`\"\n class=\"t-doc__sidebar\"\n :class=\"sidebarClasses\"\n :isExpanded=\"sidebarState.isExpanded\"\n :isSelected=\"sidebarState.isSelected\"\n :items=\"sidebarItems\"\n layout=\"reference\"\n :options=\"mergedConfig\"\n role=\"navigation\"\n @selectItem=\"(id) => handleSelectSidebarEntry(id, 'sidebar')\"\n @toggleGroup=\"\n (id: string) =>\n sidebarState.setExpanded(id, !sidebarState.isExpanded(id))\n \">\n <template #header>\n <!-- Wrap in a div when slot is filled -->\n <DocumentSelector\n v-if=\"documentOptionList.length > 1\"\n :modelValue=\"activeSlug\"\n :options=\"documentOptionList\"\n @update:modelValue=\"changeSelectedDocument\" />\n\n <!-- Search -->\n <div\n v-if=\"!mergedConfig.hideSearch\"\n class=\"flex gap-1.5 px-3 pt-3\">\n <SearchButton\n :document=\"activeOpenApiDocument\"\n :eventBus=\"eventBus\"\n :hideModels=\"mergedConfig.hideModels\"\n :searchHotKey=\"mergedConfig.searchHotKey\" />\n\n <AgentScalarButton v-if=\"agent.agentEnabled.value\" />\n </div>\n <!-- Sidebar Start -->\n <slot\n name=\"sidebar-start\"\n v-bind=\"slotProps\" />\n </template>\n <template #footer>\n <slot\n name=\"sidebar-end\"\n v-bind=\"slotProps\">\n <!-- We default the sidebar footer to the standard scalar elements -->\n <ScalarSidebarFooter class=\"darklight-reference\">\n <OpenApiClientButton\n v-if=\"!mergedConfig.hideClientButton && !showMCPButton\"\n buttonSource=\"sidebar\"\n :integration=\"mergedConfig._integration\"\n :isDevelopment=\"isDevelopment\"\n :url=\"documentUrl\" />\n <OpenMCPButton\n v-if=\"showMCPButton\"\n :config=\"mergedConfig.mcp\"\n :externalUrls=\"mergedConfig.externalUrls\"\n :isDevelopment=\"isDevelopment\"\n :url=\"documentUrl\"\n :workspace=\"workspaceStore\" />\n <!-- Override the dark mode toggle slot to hide it -->\n <template #toggle>\n <ScalarColorModeToggleButton\n v-if=\"\n !mergedConfig.hideDarkModeToggle &&\n !mergedConfig.forceDarkModeState\n \"\n :modelValue=\"colorMode === 'dark'\"\n @update:modelValue=\"() => toggleColorMode()\" />\n <span v-else />\n </template>\n </ScalarSidebarFooter>\n </slot>\n </template>\n </ScalarSidebar>\n </template>\n </MobileHeader>\n\n <!-- Primary Content -->\n <main\n :aria-label=\"`Open API Documentation for ${workspaceStore.workspace.activeDocument?.info?.title}`\"\n class=\"references-rendered\"\n :inert=\"agent.showAgent.value\">\n <Content\n :authStore=\"clientStore.auth\"\n :clientDocument=\"clientStore.workspace.activeDocument\"\n :document=\"workspaceStore.workspace.activeDocument\"\n :environment\n :eventBus\n :expandedItems=\"sidebarState.expandedItems.value\"\n :headingSlugGenerator=\"\n mergedConfig.generateHeadingSlug ??\n ((heading) => `${activeSlug}/description/${heading.slug}`)\n \"\n :infoSectionId\n :items=\"sidebarItems\"\n :options=\"mergedConfig\"\n :xScalarDefaultClient=\"\n clientStore.workspace['x-scalar-default-client']\n \">\n <template #start>\n <!-- Placeholder intersection observer that emits an empty string to clear the hash when scrolled to the top -->\n <div ref=\"documentStartRef\" />\n\n <DeveloperTools\n v-if=\"workspaceStore.workspace.activeDocument\"\n v-model:overrides=\"configurationOverrides\"\n class=\"references-developer-tools\"\n :configuration=\"mergedConfig\"\n :externalUrls=\"mergedConfig.externalUrls\"\n :workspace=\"workspaceStore\" />\n\n <ClassicHeader v-if=\"mergedConfig.layout === 'classic'\">\n <div class=\"w-64 empty:hidden\">\n <DocumentSelector\n v-if=\"documentOptionList.length > 1\"\n :modelValue=\"activeSlug\"\n :options=\"documentOptionList\"\n @update:modelValue=\"changeSelectedDocument\" />\n </div>\n <SearchButton\n v-if=\"!mergedConfig.hideSearch\"\n class=\"t-doc__sidebar max-w-64\"\n :document=\"activeOpenApiDocument\"\n :eventBus=\"eventBus\"\n :hideModels=\"mergedConfig.hideModels\"\n :searchHotKey=\"mergedConfig.searchHotKey\" />\n <template #dark-mode-toggle>\n <ScalarColorModeToggleIcon\n v-if=\"\n !mergedConfig.hideDarkModeToggle &&\n !mergedConfig.forceDarkModeState\n \"\n class=\"text-c-2 hover:text-c-1\"\n :mode=\"colorMode\"\n style=\"transform: scale(1.4)\"\n variant=\"icon\"\n @click=\"() => toggleColorMode()\" />\n </template>\n </ClassicHeader>\n <slot\n name=\"content-start\"\n v-bind=\"slotProps\" />\n </template>\n <!-- TODO: Remove this; we no longer directly support an inline editor -->\n <template\n v-if=\"mergedConfig.isEditable\"\n #empty-state>\n <slot\n name=\"editor-placeholder\"\n v-bind=\"slotProps\" />\n </template>\n <template #end>\n <slot\n name=\"content-end\"\n v-bind=\"slotProps\" />\n </template>\n </Content>\n </main>\n <!-- Optional Footer -->\n <div\n v-if=\"$slots.footer\"\n class=\"references-footer\">\n <slot\n name=\"footer\"\n v-bind=\"slotProps\" />\n </div>\n <!-- Client Modal mount point -->\n <div ref=\"modal\" />\n </div>\n <ScalarToasts />\n </div>\n</template>\n\n<style>\n/ Add base styles to the body. Removed browser default margins for a better experience. /\n@layer scalar-base {\n body {\n margin: 0;\n background-color: var(--scalar-background-1);\n }\n}\n/* Used to check if css is loaded /\n:root {\n --scalar-loaded-api-reference: true;\n}\n</style>\n<style scoped>\n/ Configurable Layout Variables /\n@layer scalar-config {\n .scalar-api-reference {\n / The header height /\n --refs-header-height: calc(\n var(--scalar-custom-header-height, 0px) + var(--scalar-header-height, 0px)\n );\n / The offset of visible references content (minus headers) /\n --refs-viewport-offset: calc(\n var(--refs-header-height, 0px) + var(--refs-content-offset, 0px)\n );\n / The calculated height of visible references content (minus headers) /\n --refs-viewport-height: calc(\n var(--full-height, 100dvh) - var(--refs-viewport-offset, 0px)\n );\n / The width of the sidebar /\n --refs-sidebar-width: var(--scalar-sidebar-width, 0px);\n / The height of the sidebar /\n --refs-sidebar-height: calc(\n var(--full-height, 100dvh) - var(--refs-header-height, 0px)\n );\n / The maximum width of the content column /\n --refs-content-max-width: var(--scalar-content-max-width, 1540px);\n }\n\n .scalar-api-reference.references-classic {\n / Classic layout is wider /\n --refs-content-max-width: var(--scalar-content-max-width, 1420px);\n min-height: 100dvh;\n --refs-sidebar-width: 0;\n }\n}\n.t-doc__sidebar {\n z-index: 10;\n}\n\n/ ----------------------------------------------------- /\n/ References Layout /\n.references-layout {\n / Try to fill the container /\n min-height: 100dvh;\n min-width: 100%;\n max-width: 100%;\n flex: 1;\n\n /\n Calculated by a resize observer and set in the style attribute\n Falls back to the viewport height\n /\n --full-height: 100dvh;\n\n / Grid layout /\n display: grid;\n grid-template-rows: var(--scalar-header-height, 0px) repeat(2, auto);\n grid-template-columns: auto 1fr;\n grid-template-areas:\n 'header header'\n 'navigation rendered'\n 'footer footer';\n\n background: var(--scalar-background-1);\n}\n\n.references-editor {\n grid-area: editor;\n display: flex;\n min-width: 0;\n background: var(--scalar-background-1);\n}\n\n.references-rendered {\n position: relative;\n grid-area: rendered;\n min-width: 0;\n background: var(--scalar-background-1);\n}\n.scalar-api-reference.references-classic,\n.references-classic .references-rendered {\n height: initial !important;\n max-height: initial !important;\n}\n\n@layer scalar-config {\n .references-sidebar {\n / Set a default width if references are enabled /\n --refs-sidebar-width: var(--scalar-sidebar-width, 288px);\n }\n}\n\n/ Footer /\n.references-footer {\n grid-area: footer;\n}\n/ ----------------------------------------------------- /\n/ Responsive / Mobile Layout /\n\n@media (max-width: 1000px) {\n / Keep toolbar hidden on mobile without forcing desktop display mode. /\n .references-developer-tools {\n display: none;\n }\n\n / Stack view on mobile /\n .references-layout {\n / Adjust the sidebar height to the viewport height minus the header height /\n --refs-sidebar-height: calc(\n var(--full-height, 100dvh) - var(--scalar-custom-header-height, 0px)\n );\n\n grid-template-columns: 100%;\n grid-template-rows: var(--scalar-header-height, 0px) 0px auto auto;\n\n grid-template-areas:\n 'header'\n 'navigation'\n 'rendered'\n 'footer';\n }\n .references-editable {\n grid-template-areas:\n 'header'\n 'navigation'\n 'editor';\n }\n\n .references-rendered {\n position: static;\n }\n}\n</style>\n<style scoped>\n/\n Sidebar CSS for standalone\n* TODO: @brynn move this to the sidebar block OR the ApiReferenceStandalone component\n* when the new elements are available\n*/\n@media (max-width: 1000px) {\n .scalar-api-references-standalone-mobile:not(.references-classic) {\n --scalar-header-height: 50px;\n }\n}\n</style>\n<style scoped>\n.darklight-reference {\n width: 100%;\n margin-top: auto;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"ApiReference.vue.js","names":[],"sources":["../../src/components/ApiReference.vue"],"sourcesContent":["<script lang=\"ts\">\n// Injected by Vite at build time (see vite.config.ts and vite.standalone.config.ts).\n// Read via process.env so the constant is replaced inline without pulling package.json\n// into the TypeScript program — that would expand rootDir and emit declarations under dist/src/.\nconst version = PACKAGE_VERSION\n\nif (version && typeof window !== 'undefined') {\n console.info(`@scalar/api-reference@${version}`)\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { provideUseId } from '@headlessui/vue'\nimport { OpenApiClientButton } from '@scalar/api-client/blocks/operation-block'\nimport type { ApiClientModal } from '@scalar/api-client/modal'\nimport {\n ScalarColorModeToggleButton,\n ScalarColorModeToggleIcon,\n} from '@scalar/components/color-mode-toggle'\nimport { addScalarClassesToHeadless } from '@scalar/components/helpers'\nimport { ScalarSidebarFooter } from '@scalar/components/sidebar'\nimport { slugify } from '@scalar/helpers/string/slugify'\nimport { isLocalUrl } from '@scalar/helpers/url/is-local-url'\nimport { apiReferenceConfigurationSchema } from '@scalar/schemas/api-reference'\nimport {\n createSidebarState,\n ScalarSidebar,\n scrollSidebarToTop,\n} from '@scalar/sidebar'\nimport { getThemeStyles, hasObtrusiveScrollbars } from '@scalar/themes'\nimport {\n DEFAULT_MODELS_SECTION_LABEL,\n type AnyApiReferenceConfiguration,\n type ApiReferenceConfiguration,\n type ApiReferenceConfigurationRaw,\n} from '@scalar/types/api-reference'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport { coerce } from '@scalar/validation'\nimport { createWorkspaceStore } from '@scalar/workspace-store/client'\nimport { createWorkspaceEventBus } from '@scalar/workspace-store/events'\nimport {\n getActiveEnvironment,\n getServers,\n} from '@scalar/workspace-store/request-example'\nimport type {\n TraversedEntry,\n TraversedTag,\n} from '@scalar/workspace-store/schemas/navigation'\nimport { isOpenApiDocument } from '@scalar/workspace-store/schemas/type-guards'\nimport { useScrollLock } from '@vueuse/core'\nimport diff from 'microdiff'\nimport {\n computed,\n onBeforeMount,\n onBeforeUnmount,\n onMounted,\n onServerPrefetch,\n provide,\n ref,\n useId,\n useTemplateRef,\n watch,\n} from 'vue'\n\nimport {\n AgentScalarButton,\n AgentScalarDrawer,\n OpenMCPButton,\n} from '@/components/AgentScalar'\nimport ClassicHeader from '@/components/ClassicHeader.vue'\nimport Content from '@/components/Content/Content.vue'\nimport MobileHeader from '@/components/MobileHeader.vue'\nimport { DeveloperTools } from '@/features/developer-tools'\nimport DocumentSelector from '@/features/multiple-documents/DocumentSelector.vue'\nimport SearchButton from '@/features/Search/components/SearchButton.vue'\nimport { getSystemModePreference } from '@/helpers/color-mode'\nimport { downloadDocument } from '@/helpers/download'\nimport {\n getIdFromUrl,\n makeUrlFromId,\n matchesBasePath,\n redirectLegacyModelUrl,\n} from '@/helpers/id-routing'\nimport {\n scrollToLazy as _scrollToLazy,\n addToPriorityQueue,\n blockIntersection,\n intersectionEnabled,\n} from '@/helpers/lazy-bus'\nimport {\n loadAuthFromStorage,\n loadClientFromStorage,\n} from '@/helpers/load-from-perssistance'\nimport { mapConfigPlugins } from '@/helpers/map-config-plugins'\nimport { mapConfigToWorkspaceStore } from '@/helpers/map-config-to-workspace-store'\nimport {\n normalizeConfigurations,\n type NormalizedConfiguration,\n} from '@/helpers/normalize-configurations'\nimport { safeDeepClone } from '@/helpers/safe-deep-clone'\nimport { AGENT_CONTEXT_SYMBOL, useAgent } from '@/hooks/use-agent'\nimport { useIntersection } from '@/hooks/use-intersection'\nimport { createPluginManager, PLUGIN_MANAGER_SYMBOL } from '@/plugins'\nimport { persistencePlugin } from '@/plugins/persistence-plugin'\n\nconst props = defineProps<{\n /*\n Configuration for the API reference.\n * Can be a single configuration or an array of configurations for multiple documents.\n /\n configuration?: AnyApiReferenceConfiguration\n}>()\n\ndefineSlots<{\n 'content-start'?(): { breadcrumb: string }\n 'content-end'?(): { breadcrumb: string }\n 'sidebar-start'?(): { breadcrumb: string }\n 'sidebar-end'?(): { breadcrumb: string }\n 'editor-placeholder'?(): { breadcrumb: string }\n footer?(): { breadcrumb: string }\n}>()\n\nconst { copyToClipboard } = useClipboard()\n\n/\n Used to inject the environment into built packages\n \n Primary use case is the open-in-client button\n /\nconst isDevelopment = import.meta.env.DEV\n\nconst obtrusiveScrollbars = computed(hasObtrusiveScrollbars)\n\nconst eventBus = createWorkspaceEventBus({ debug: isDevelopment })\nconst isSidebarOpen = ref(false)\n\n/\n Due to a bug in headless UI, we need to set an ID here that can be shared across server/client\n * TODO remove this once the bug is fixed\n \n @see https://github.com/tailwindlabs/headlessui/issues/2979\n /\nprovideUseId(() => useId())\n\n// ---------------------------------------------------------------------------\n/\n Configuration Handling\n \n We will normalize the configurations and store them in a computed property.\n * The active configuration will be associated with the active document.\n /\nconst configList = computed(() => normalizeConfigurations(props.configuration))\n\nconst isMultiDocument = computed(() => Object.keys(configList.value).length > 1)\n\n/* Search for the source with a default attribute or use the first one /\nconst activeSlug = ref<string>(\n Object.values(configList.value).find((c) => c.default)?.slug ??\n configList.value[Object.keys(configList.value)?.[0] ?? '']?.slug ??\n '',\n)\n\n/\n On initial page load we need to determine if there is a valid document slug in the URL\n \n If there is we set the active slug to the document slug\n /\nif (typeof window !== 'undefined') {\n const url = new URL(window.location.href)\n\n // To handle legacy query parameter multi-document support we redirect\n // to the new path routing format\n const apiParam = url.searchParams.get('api')\n if (apiParam && configList.value[apiParam]) {\n activeSlug.value = apiParam\n const idFromUrl = getIdFromUrl(\n url,\n configList.value[apiParam].config.pathRouting?.basePath,\n apiParam,\n )\n const newUrl = makeUrlFromId(\n idFromUrl,\n configList.value[apiParam].config.pathRouting?.basePath,\n isMultiDocument.value,\n )\n if (newUrl) {\n newUrl.searchParams.delete('api')\n window.history.replaceState({}, '', newUrl.toString())\n }\n }\n\n /\n For path routing on initial load we do not know which basePath to check for\n * we need to search the configs to see if any of the base paths match the URL\n * and then use that basePath to get the initial id\n \n With this approach we cannot support multi-document mode with one of configs having\n * an empty basePath\n \n Other conflicts are possible.\n /\n const basePaths = Object.values(configList.value).map(\n (c) => c.config.pathRouting?.basePath,\n )\n\n const initialId = getIdFromUrl(\n url,\n basePaths.find((p) => (p ? matchesBasePath(url, p) : false)),\n isMultiDocument.value ? undefined : activeSlug.value,\n )\n const documentSlug = initialId.split('/')[0]\n\n if (documentSlug && configList.value[documentSlug]) {\n activeSlug.value = documentSlug\n }\n}\n\n/* Computed document options list for the selector logic /\nconst documentOptionList = computed(() =>\n Object.values(configList.value).map((c) => ({\n label: c.title,\n id: c.slug,\n })),\n)\n\n/* Configuration overrides to apply to the selected document (from the localhost toolbar) /\nconst configurationOverrides = ref<\n Partial<Omit<ApiReferenceConfiguration, 'slug' \| 'title' \| ''>>\n>({})\n\n/* Any dev toolbar modifications are merged with the active configuration /\nconst mergedConfig = computed<ApiReferenceConfiguration>(() => {\n const merged = {\n // Provides a default set of values when the lookup fails\n ...coerce(apiReferenceConfigurationSchema, {}),\n // The active configuration based on the slug\n ...configList.value[activeSlug.value]?.config,\n // Any overrides from the localhost toolbar\n ...configurationOverrides.value,\n }\n\n return {\n ...merged,\n modelsSectionLabel:\n merged.modelsSectionLabel ?? DEFAULT_MODELS_SECTION_LABEL,\n }\n})\n\n/* Convenience break out var to determine which routing mode we are using /\nconst basePath = computed(() => mergedConfig.value.pathRouting?.basePath)\n\nconst themeStyle = computed(() =>\n getThemeStyles(mergedConfig.value.theme, {\n fonts: mergedConfig.value.withDefaultFonts,\n }),\n)\n\n/* Plugin injection is not reactive. All plugins must be provided at first render /\nconst pluginManager = createPluginManager({\n plugins: Object.values(configList.value).flatMap(\n (c) => c.config.plugins ?? [],\n ),\n})\nprovide(PLUGIN_MANAGER_SYMBOL, pluginManager)\n\npluginManager.notifyInit(mergedConfig.value)\n\nwatch(mergedConfig, (config) => pluginManager.notifyConfigChange(config))\n// ---------------------------------------------------------------------------\n/* Navigation State Handling /\n\n// Redirect legacy `/model/<name>` URLs to the current section's plural slug\n// so bookmarks from before the slug streamline keep resolving.\nif (typeof window !== 'undefined') {\n const canonical = redirectLegacyModelUrl(\n window.location.href,\n slugify(\n mergedConfig.value.modelsSectionLabel ?? DEFAULT_MODELS_SECTION_LABEL,\n ),\n activeSlug.value,\n isMultiDocument.value,\n mergedConfig.value.pathRouting?.basePath,\n )\n if (canonical) {\n window.history.replaceState({}, '', canonical.toString())\n }\n}\n\n// Front-end redirect\nif (mergedConfig.value.redirect && typeof window !== 'undefined') {\n const newPath = mergedConfig.value.redirect(\n (mergedConfig.value.pathRouting ? window.location.pathname : '') +\n window.location.hash,\n )\n if (newPath) {\n window.history.replaceState({}, '', newPath)\n }\n}\n\n/\n Sets the active slug and updates the URL with the selected document slug\n \n If an element ID is passed in we will configure the path or hash routing\n /\nfunction syncSlugAndUrlWithDocument(\n slug: string,\n elementId: string \| undefined,\n config: ApiReferenceConfigurationRaw,\n) {\n // We create a new URL and go to the root element if an ID is not provided\n const url = makeUrlFromId(\n elementId \|\| slug,\n config.pathRouting?.basePath,\n isMultiDocument.value,\n )\n\n if (url) {\n window.history.replaceState({}, '', url.toString())\n }\n\n // Update the active slug\n activeSlug.value = slug\n}\n\n// ---------------------------------------------------------------------------\n/* Workspace Store Initialization /\n\n/\n Initializes the new client workspace store.\n /\nconst workspaceStore = createWorkspaceStore({\n verbose: isDevelopment,\n})\n\n/\n We need to keep the client store separate from the workspace store\n * This is because we want the client store to be a playground where users can test out their requests without affecting the references store\n /\nconst clientStore = createWorkspaceStore({\n verbose: isDevelopment,\n plugins: [\n persistencePlugin({\n persistAuth: () => mergedConfig.value.persistAuth ?? false,\n }),\n ],\n})\n\n// TODO: persistence should be hoisted into standalone\n// Client side integrations will want to handle dark mode externally\nconst { toggleColorMode, isDarkMode } = useColorMode({\n initialColorMode: {\n true: 'dark' as const,\n false: 'light' as const,\n undefined: 'system' as const,\n }[String(mergedConfig.value.darkMode)],\n overrideColorMode: mergedConfig.value.forceDarkModeState,\n})\n\n/\n The active document passed to the search modal. Both OpenAPI and AsyncAPI\n * documents are surfaced so the search index can pick up info.description\n * headings from either spec; AsyncAPI-specific entries (channels, operations,\n * messages) are not indexed yet.\n /\nconst activeSearchableDocument = computed(\n () => workspaceStore.workspace.activeDocument,\n)\n\n/\n Create top level sidebar entries for each document\n * This allows sharing a single sidebar state for across the workspace\n /\nconst itemsFromWorkspace = computed<TraversedEntry[]>(() => {\n return Object.entries(workspaceStore.workspace.documents).map(\n ([slug, document]) => ({\n id: slug,\n type: 'document',\n description: document.info.description,\n name: document.info.title ?? slug,\n title: document.info.title ?? slug,\n // Both OpenAPI and AsyncAPI documents carry an `x-scalar-navigation` tree.\n children: document['x-scalar-navigation']?.children ?? [],\n }),\n )\n})\n\n/* Initialize the sidebar /\nconst sidebarState = createSidebarState<TraversedEntry>(itemsFromWorkspace, {\n hooks: {},\n})\n\n/* Recursively set all children of the given items to open /\nconst setChildrenOpen = (items: TraversedEntry[]): void => {\n items.forEach((item) => {\n if (item.type === 'tag' \|\| item.type === 'models') {\n sidebarState.setExpanded(item.id, true)\n }\n if ('children' in item && item.children) {\n setChildrenOpen(item.children)\n }\n })\n}\n\n/* We get the sub items for the sidebar based on the configuration/document slug /\nconst sidebarItems = computed<TraversedEntry[]>(() => {\n const config = mergedConfig.value\n\n if (!config) {\n return []\n }\n\n const docItems =\n sidebarState.items.value.find(\n (item): item is TraversedTag => item.id === activeSlug.value,\n )?.children ?? []\n\n // When the default open all tags configuration is enabled we open all the children of the document\n if (config.defaultOpenAllTags) {\n setChildrenOpen(docItems)\n }\n\n // When the expand all model sections configuration is enabled we open all the children of the models tag\n if (config.expandAllModelSections) {\n const models = docItems.find(\n (item): item is TraversedTag => item.type === 'models',\n )\n if (models) {\n sidebarState.setExpanded(models.id, true)\n models.children?.forEach((child) => {\n sidebarState.setExpanded(child.id, true)\n })\n }\n }\n\n return docItems\n})\n\n/* Find the sidebar entry that represents the introduction section /\nconst infoSectionId = computed(\n () =>\n sidebarItems.value.find(\n (item) => item.type === 'text' && item.title === 'Introduction',\n )?.id ?? `${activeSlug.value}/description/introduction`,\n)\n\n/* User for mobile navigation /\nconst breadcrumb = ref('')\n\nconst slotProps = computed(() => ({\n breadcrumb: breadcrumb.value,\n}))\n\nconst setBreadcrumb = (id: string) => {\n const item = sidebarState.getEntryById(id)\n\n if (!item \|\| item.type === 'document') {\n breadcrumb.value = ''\n } else {\n breadcrumb.value = item.title\n }\n}\n\nconst scrollToLazyElement = (id: string) => {\n setBreadcrumb(id)\n sidebarState.setSelected(id)\n _scrollToLazy(id, sidebarState.setExpanded, sidebarState.getEntryById)\n}\n\n/\n Updates the browser tab title via the user-provided `setPageTitle` callback.\n \n Called whenever the section in view changes — on sidebar clicks, on scroll, and\n * when switching documents — so the tab title always reflects what the reader sees.\n /\nconst updatePageTitle = (id: string) => {\n const setPageTitle = mergedConfig.value?.setPageTitle\n const entry = sidebarState.getEntryById(id)\n\n if (!setPageTitle \|\| typeof document === 'undefined' \|\| !entry?.title) {\n return\n }\n\n const activeDocument = workspaceStore.workspace.activeDocument\n\n document.title = setPageTitle({\n title: entry.title,\n document: {\n title: activeDocument?.info?.title ?? activeSlug.value,\n slug: activeSlug.value,\n },\n })\n}\n\n/* Maps some config values to the workspace store to keep it reactive /\nmapConfigToWorkspaceStore({\n config: () => mergedConfig.value,\n store: workspaceStore,\n isDarkMode,\n})\n\nmapConfigToWorkspaceStore({\n config: () => mergedConfig.value,\n store: clientStore,\n isDarkMode,\n})\n\n/* Merged environment variables from workspace and document levels /\nconst environment = computed(\n () =>\n getActiveEnvironment(\n workspaceStore,\n workspaceStore.workspace.activeDocument ?? null,\n ).environment,\n)\n\nif (typeof window !== 'undefined') {\n // @ts-expect-error - For debugging purposes expose the store\n window.dataDumpWorkspace = () => workspaceStore\n}\n\n// For testing\ndefineExpose({\n eventBus,\n workspaceStore,\n sidebarItems,\n})\n\n/\n Computes a mapping from model names to their sidebar entry IDs.\n * This is used for quick lookups and navigation within the sidebar.\n /\nconst modelsIndex = computed(() => {\n return sidebarItems.value\n .filter((item) => item.type === 'models')\n .flatMap((item) => item.children ?? [])\n .filter((item) => item.type === 'model')\n .reduce(\n (acc, item) => {\n acc[item.name] = item.id\n return acc\n },\n {} as Record<string, string>,\n )\n})\n\neventBus.on('scroll-to:model-by-name', ({ name }) => {\n /* Find the model in the models index /\n const model = modelsIndex.value[name]\n\n if (model) {\n scrollToLazyElement(model)\n }\n})\n\nconst addDocument: typeof workspaceStore.addDocument = async (\n input,\n navigationOptions,\n) => {\n const result = await workspaceStore.addDocument(input, navigationOptions)\n // Now add it to the client store\n const state = workspaceStore.exportWorkspace()\n clientStore.loadWorkspace({\n auth: {},\n documents: {\n [input.name]: safeDeepClone(state.documents[input.name]) ?? {\n 'openapi': '3.1.0',\n 'info': {\n title: '',\n version: '',\n },\n 'x-scalar-original-document-hash': '',\n },\n },\n intermediateDocuments: {},\n originalDocuments: {},\n overrides: {},\n history: {},\n meta: {},\n })\n return result\n}\n\n// ---------------------------------------------------------------------------\n// Document Management\n\n/\n Handle changing the active document\n \n 1. If the document has not be loaded to the workspace store we set it to empty and asynchronously load it\n * 2. If the document has been loaded to the workspace store we just set it to active\n * 3. If the content from the configuration has changes we need to update the document in the workspace store\n /\nconst changeSelectedDocument = async (\n slug: string,\n elementId?: string \| undefined,\n) => {\n const normalized = configList.value[slug]\n\n if (!normalized) {\n console.warn(`Document ${slug} not found in configList`)\n return\n }\n\n const config = {\n ...normalized.config,\n ...configurationOverrides.value,\n }\n\n // Store `onDocumentSelect` result to await its execution later, before calling `onLoaded`\n const onDocumentSelectPromise = config.onDocumentSelect?.()\n\n // Set the active slug and update any routing\n syncSlugAndUrlWithDocument(slug, elementId, config)\n\n // Update the document on the route as well, the method and path don't matter as we update them before opening\n apiClient.value?.route({\n documentSlug: slug,\n method: 'get',\n path: '/',\n })\n\n const isFirstLoad = !workspaceStore.workspace.documents[slug]\n\n // If the document is not in the store, we asynchronously load it\n if (isFirstLoad) {\n const result = await addDocument(\n normalized.source.url\n ? {\n name: slug,\n url: normalized.source.url,\n fetch: config.customFetch,\n }\n : {\n name: slug,\n document: normalized.source.content ?? {},\n },\n config,\n )\n\n const document = clientStore.workspace.documents[slug]\n\n // If the document does not have a selected server we set it to the first server\n if (\n result === true &&\n isOpenApiDocument(document) &&\n document['x-scalar-selected-server'] === undefined\n ) {\n // Set the active server if the document is loaded successfully\n const servers = getServers(\n normalized.config.servers ?? document.servers,\n {\n baseServerUrl: mergedConfig.value.baseServerURL,\n documentUrl: normalized.source.url,\n },\n )\n if (servers.length > 0) {\n clientStore.updateDocument(\n slug,\n 'x-scalar-selected-server',\n servers[0]!.url,\n )\n }\n }\n }\n\n // Always set it to active; if the document is null we show a loading state\n workspaceStore.update('x-scalar-active-document', slug)\n clientStore.update('x-scalar-active-document', slug)\n\n // If the document has persistence enabled we load the auth schemes from storage\n if (config.persistAuth) {\n loadAuthFromStorage(clientStore, slug)\n }\n\n // ensure that `onLoaded` hook doesn't block execution but is executed after `onDocumentSelect`\n void (async () => {\n await onDocumentSelectPromise\n void config.onLoaded?.(slug)\n })()\n\n // When loading to a specified element we need to freeze and scroll\n if (elementId && elementId !== slug) {\n scrollToLazyElement(elementId)\n }\n // If there is no child element of the document specified and defaultOpenFirstTag is enabled, we expand the first tag\n else if (config.defaultOpenFirstTag) {\n const firstTag = sidebarItems.value.find((item) => item.type === 'tag')\n if (firstTag) {\n sidebarState.setExpanded(firstTag.id, true)\n }\n }\n\n // Reflect the freshly selected document in the browser tab title\n updatePageTitle(elementId && elementId !== slug ? elementId : slug)\n}\n\n/\n TODO:Move this to a dedicated updateDocument function in the future and\n * away from vue-reactivity based updates\n /\nwatch(\n () => Object.values(configList.value),\n async (newConfigList, oldConfigList) => {\n /\n Handles replacing and updating documents within the workspace store\n * when we detect configuration changes.\n /\n const updateSource = async (\n updated: NormalizedConfiguration,\n previous: NormalizedConfiguration \| undefined,\n ) => {\n /* If we have not loaded the document previously we don't need to handle any updates to store /\n if (!workspaceStore.workspace.documents[updated.slug]) {\n return\n }\n /* If the URL has changed we fetch and rebase /\n if (updated.source.url && updated.source.url !== previous?.source.url) {\n await addDocument(\n {\n name: updated.slug,\n url: updated.source.url,\n fetch: updated.config.customFetch,\n },\n updated.config,\n )\n\n return\n }\n\n // If the was not a URL change then we require a document to continue\n if (!updated.source.content) {\n return\n }\n\n /\n We need to deeply check for document changes. Parse documents and then only rebase\n * if we detect deep changes in the two sources\n /\n if (\n diff(\n updated.source.content,\n previous && 'content' in previous.source\n ? (previous.source.content ?? {})\n : {},\n ).length\n ) {\n await addDocument(\n {\n name: updated.slug,\n document: updated.source.content,\n },\n updated.config,\n )\n }\n }\n\n newConfigList.forEach((newConfig, index) =>\n updateSource(newConfig, oldConfigList[index]),\n )\n\n const newSlugs = newConfigList.map((c) => c.slug)\n const oldSlugs = oldConfigList.map((c) => c.slug)\n\n // If the slugs have changed, we need to update the active document and the URL query param\n if (\n newSlugs.length !== oldSlugs.length \|\|\n !newSlugs.every((slug, index) => slug === oldSlugs[index])\n ) {\n await changeSelectedDocument(newSlugs[0] ?? '')\n }\n },\n {\n deep: true,\n },\n)\n\n/* Preload the first document during SSR /\nonServerPrefetch(() => changeSelectedDocument(activeSlug.value))\n\n/* Load the first document on page load /\nonBeforeMount(async () => {\n // We read the client from the client store so we need to set it to the client store\n loadClientFromStorage(clientStore)\n\n await changeSelectedDocument(\n activeSlug.value,\n getIdFromUrl(\n window.location.href,\n configList.value[activeSlug.value]?.config.pathRouting?.basePath,\n isMultiDocument.value ? undefined : activeSlug.value,\n ),\n )\n})\n\nconst documentUrl = computed(() => {\n return configList.value[activeSlug.value]?.source?.url\n})\n\n// --------------------------------------------------------------------------- /\n// Agent Scalar\n\n/*\n Determines if Agent Scalar should be enabled based on the configuration and the current URL\n \n - If the agent is disabled in the configuration, it should not be enabled\n * - If the current URL is a local URL, it should be enabled\n * - If the agent key is set, it should be enabled\n /\nconst agent = useAgent({\n agentEnabled: computed(() => {\n const currentConfiguration = configList.value[activeSlug.value]\n\n if (currentConfiguration?.agent?.disabled) {\n return false\n }\n\n if (typeof window !== 'undefined' && isLocalUrl(window.location.href)) {\n return true\n }\n\n return Boolean(configList.value[activeSlug.value]?.agent?.key)\n }),\n})\nprovide(AGENT_CONTEXT_SYMBOL, agent)\n\n// --------------------------------------------------------------------------- /\n// Api Client Modal\n\n// Setup the ApiClient on mount.\n// The modal is dynamic-imported so its dependency graph (CodeMirror, the request\n// editor, the response viewer, etc.) becomes a separate chunk that loads\n// asynchronously after the API reference paints.\nconst modal = useTemplateRef<HTMLElement>('modal')\nconst apiClient = ref<ApiClientModal \| null>(null)\nonMounted(async () => {\n if (!modal.value) {\n return\n }\n\n const { createApiClientModal } = await import('@scalar/api-client/modal')\n\n // Bail if the component unmounted while the chunk was loading.\n if (!modal.value) {\n return\n }\n\n apiClient.value = createApiClientModal({\n el: modal.value,\n eventBus,\n workspaceStore: clientStore,\n options: mergedConfig,\n plugins: [\n ...pluginManager.getApiClientPlugins(),\n ...mapConfigPlugins(mergedConfig, environment),\n ],\n })\n})\nonBeforeUnmount(() => {\n pluginManager.notifyDestroy()\n apiClient.value?.app.unmount()\n})\n\n// ---------------------------------------------------------------------------\n// Top level event handlers and user specified callbacks\n\n/** Ensure we call the onServerChange callback /\neventBus.on('server:update:selected', ({ url }) =>\n mergedConfig.value.onServerChange?.(url),\n)\n\n/* Download the document from the store /\neventBus.on('ui:download:document', ({ format }) => {\n const document = workspaceStore.exportActiveDocument(format)\n\n if (!document) {\n console.error('No document found to download')\n return\n }\n\n void downloadDocument(document, activeSlug.value ?? 'openapi', format)\n})\n\n// ---------------------------------------------------------------------------\n// Local event and scroll handling\n\n/\n Handler for a direct navigation event such as a sidebar or search click\n \n Depending on the item type we handle a selection event differently:\n \n - Tag: If a tag is closed we open it and all its parents and scroll to it\n * If a tag is open we just close the tag\n * - Operation:\n * Open all parents and scroll to the operation\n /\nconst handleSelectSidebarEntry = (id: string, caller?: 'sidebar') => {\n const item = sidebarState.getEntryById(id)\n\n updatePageTitle(id)\n\n if (\n (item?.type === 'tag' \|\|\n item?.type === 'models' \|\|\n item?.type === 'text') &&\n sidebarState.isExpanded(id) && // Only close if the item is expanded\n sidebarState.selectedItem.value === id // Only close if the item is not the currently selected item\n ) {\n // hack until we fix intersection logic\n const unblock = blockIntersection()\n\n sidebarState.setExpanded(id, false)\n\n unblock()\n\n return\n }\n\n // Close the mobile menu upon selecting any item that's not a tag or model\n if (item?.type !== 'tag' && item?.type !== 'models') {\n isSidebarOpen.value = false\n }\n\n scrollToLazyElement(id)\n\n const url = makeUrlFromId(id, basePath.value, isMultiDocument.value)\n if (url) {\n window.history.pushState({}, '', url)\n\n // Trigger the onSidebarClick callback if the caller is sidebar\n if (caller === 'sidebar') {\n mergedConfig.value.onSidebarClick?.(url.toString())\n }\n }\n\n if (agent.showAgent.value) {\n agent.closeAgent()\n }\n}\n\n/* Handle a navigation item selection event /\neventBus.on('select:nav-item', ({ id }) => handleSelectSidebarEntry(id))\n\n/* Handle a scroll to navigation item event /\neventBus.on('scroll-to:nav-item', ({ id }) => handleSelectSidebarEntry(id))\n\n/* Handle an intersecting navigation item event /\neventBus.on('intersecting:nav-item', ({ id }) => {\n if (!intersectionEnabled.value) {\n return\n }\n\n sidebarState.setSelected(id)\n setBreadcrumb(id)\n\n // Keep the browser tab title in sync with the section scrolled into view\n updatePageTitle(id)\n\n // Scroll the sidebar to keep the selected element near the top\n scrollSidebarToTop(id)\n\n const url = makeUrlFromId(id, basePath.value, isMultiDocument.value)\n if (url && workspaceStore.workspace.activeDocument) {\n window.history.replaceState({}, '', url.toString())\n }\n})\n\neventBus.on('toggle:nav-item', ({ id, open }) => {\n if (open) {\n mergedConfig.value.onShowMore?.(id)\n\n // Pre-queue first child so it renders immediately when the tag expands\n const entry = sidebarState.getEntryById(id)\n if (entry && 'children' in entry && entry.children) {\n const first = entry.children[0]\n\n if (first) {\n addToPriorityQueue(first.id)\n }\n }\n }\n sidebarState.setExpanded(id, open ?? !sidebarState.isExpanded(id))\n})\n\neventBus.on('copy-url:nav-item', ({ id }) => {\n const url = makeUrlFromId(\n id,\n basePath.value,\n isMultiDocument.value,\n )?.toString()\n return url && copyToClipboard(url)\n})\n\n// ---------------------------------------------------------------------------\n// History and scroll restoration\n\nonBeforeMount(() => {\n window.history.scrollRestoration = 'manual'\n // Ensure we add our scalar wrapper class to the headless ui root, mounted is too late\n addScalarClassesToHeadless()\n\n // When we detect a back button press we scroll to the new id\n window.addEventListener('popstate', () => {\n const id = getIdFromUrl(\n window.location.href,\n mergedConfig.value.pathRouting?.basePath,\n isMultiDocument.value ? undefined : activeSlug.value,\n )\n if (id) {\n scrollToLazyElement(id)\n }\n })\n})\n\n// ---------------------------------------------------------------------------\n// Document start intersection observer\n\nconst documentStartRef = useTemplateRef<HTMLElement>('documentStartRef')\n\n/\n Uses `immediate` so the sentinel fires as soon as it enters the viewport (not just at the center strip).\n * When the user scrolls away from the top, both this observer and the first section's center-strip\n * observer are intersecting simultaneously, so the section observer does not re-fire on its own.\n * The `onExit` callback bridges that gap by finding whichever section is at the viewport center\n * and re-emitting the nav event for it.\n /\nuseIntersection(\n documentStartRef,\n () => {\n eventBus.emit('intersecting:nav-item', { id: activeSlug.value })\n },\n {\n onExit: () => {\n const centerY = window.innerHeight / 2\n const section = document\n .elementsFromPoint(window.innerWidth / 2, centerY)\n .find((el) => el.tagName === 'SECTION' && el.id)\n\n if (section?.id) {\n eventBus.emit('intersecting:nav-item', { id: section.id })\n }\n },\n immediate: true,\n },\n)\n\nconst colorMode = computed(() => {\n const mode = workspaceStore.workspace['x-scalar-color-mode']\n\n if (mode === 'system') {\n return getSystemModePreference()\n }\n\n return mode\n})\n\nconst bodyScrollLocked = useScrollLock(\n typeof document !== 'undefined' ? document.body : null,\n)\n\nwatch(agent.showAgent, () => (bodyScrollLocked.value = agent.showAgent.value))\n\nconst showMCPButton = computed(() => {\n if (mergedConfig.value.mcp?.disabled) {\n return false\n }\n\n if (typeof window !== 'undefined' && isLocalUrl(window.location.href)) {\n return true\n }\n\n if (mergedConfig.value.mcp) {\n return true\n }\n\n return false\n})\n</script>\n\n<template>\n <!-- SingleApiReference -->\n <div>\n <!-- Inject any custom CSS directly into a style tag -->\n <component :is=\"'style'\">\n {{ mergedConfig.customCss }}\n {{ themeStyle }}\n </component>\n <div\n ref=\"documentEl\"\n class=\"scalar-app scalar-api-reference references-layout\"\n :class=\"[\n {\n 'scalar-api-references-standalone-mobile': mergedConfig.showSidebar,\n 'scalar-scrollbars-obtrusive': obtrusiveScrollbars,\n 'references-editable': mergedConfig.isEditable,\n 'references-sidebar': mergedConfig.showSidebar,\n 'references-sidebar-mobile-open': isSidebarOpen,\n 'references-classic': mergedConfig.layout === 'classic',\n },\n $attrs.class,\n ]\">\n <!-- Agent Scalar -->\n <AgentScalarDrawer\n v-if=\"agent.agentEnabled.value\"\n :agentScalarConfiguration=\"configList[activeSlug]?.agent\"\n :externalUrls=\"mergedConfig.externalUrls\"\n :workspaceStore />\n\n <!-- Mobile Header and Sidebar when in modern layout -->\n\n <MobileHeader\n v-if=\"mergedConfig.layout === 'modern'\"\n :breadcrumb=\"breadcrumb\"\n :isSidebarOpen=\"isSidebarOpen\"\n :showSidebar=\"mergedConfig.showSidebar\"\n @toggleSidebar=\"() => (isSidebarOpen = !isSidebarOpen)\">\n <template #search>\n <SearchButton\n v-if=\"!mergedConfig.hideSearch\"\n class=\"my-2\"\n :document=\"activeSearchableDocument\"\n :eventBus=\"eventBus\"\n :hideModels=\"mergedConfig.hideModels\"\n :modelsSectionLabel=\"mergedConfig.modelsSectionLabel\"\n :searchHotKey=\"mergedConfig.searchHotKey\"\n :showSidebar=\"mergedConfig.showSidebar\" />\n </template>\n <template #sidebar=\"{ sidebarClasses }\">\n <ScalarSidebar\n v-if=\"mergedConfig.showSidebar && mergedConfig.layout === 'modern'\"\n :aria-label=\"`Sidebar for ${workspaceStore.workspace.activeDocument?.info?.title}`\"\n class=\"t-doc__sidebar\"\n :class=\"sidebarClasses\"\n :isExpanded=\"sidebarState.isExpanded\"\n :isSelected=\"sidebarState.isSelected\"\n :items=\"sidebarItems\"\n layout=\"reference\"\n :options=\"mergedConfig\"\n role=\"navigation\"\n @selectItem=\"(id) => handleSelectSidebarEntry(id, 'sidebar')\"\n @toggleGroup=\"\n (id: string) =>\n sidebarState.setExpanded(id, !sidebarState.isExpanded(id))\n \">\n <template #header>\n <!-- Wrap in a div when slot is filled -->\n <DocumentSelector\n v-if=\"documentOptionList.length > 1\"\n :modelValue=\"activeSlug\"\n :options=\"documentOptionList\"\n @update:modelValue=\"changeSelectedDocument\" />\n\n <!-- Search -->\n <div\n v-if=\"!mergedConfig.hideSearch\"\n class=\"flex gap-1.5 px-3 pt-3\">\n <SearchButton\n :document=\"activeSearchableDocument\"\n :eventBus=\"eventBus\"\n :hideModels=\"mergedConfig.hideModels\"\n :modelsSectionLabel=\"mergedConfig.modelsSectionLabel\"\n :searchHotKey=\"mergedConfig.searchHotKey\" />\n\n <AgentScalarButton v-if=\"agent.agentEnabled.value\" />\n </div>\n <!-- Sidebar Start -->\n <slot\n name=\"sidebar-start\"\n v-bind=\"slotProps\" />\n </template>\n <template #footer>\n <slot\n name=\"sidebar-end\"\n v-bind=\"slotProps\">\n <!-- We default the sidebar footer to the standard scalar elements -->\n <ScalarSidebarFooter class=\"darklight-reference\">\n <OpenApiClientButton\n v-if=\"!mergedConfig.hideClientButton && !showMCPButton\"\n buttonSource=\"sidebar\"\n :integration=\"mergedConfig._integration\"\n :isDevelopment=\"isDevelopment\"\n :url=\"documentUrl\" />\n <OpenMCPButton\n v-if=\"showMCPButton\"\n :config=\"mergedConfig.mcp\"\n :externalUrls=\"mergedConfig.externalUrls\"\n :isDevelopment=\"isDevelopment\"\n :url=\"documentUrl\"\n :workspace=\"workspaceStore\" />\n <!-- Override the dark mode toggle slot to hide it -->\n <template #toggle>\n <ScalarColorModeToggleButton\n v-if=\"\n !mergedConfig.hideDarkModeToggle &&\n !mergedConfig.forceDarkModeState\n \"\n :modelValue=\"colorMode === 'dark'\"\n @update:modelValue=\"() => toggleColorMode()\" />\n <span v-else />\n </template>\n </ScalarSidebarFooter>\n </slot>\n </template>\n </ScalarSidebar>\n </template>\n </MobileHeader>\n\n <!-- Primary Content -->\n <main\n :aria-label=\"`Open API Documentation for ${workspaceStore.workspace.activeDocument?.info?.title}`\"\n class=\"references-rendered\"\n :inert=\"agent.showAgent.value\">\n <Content\n :authStore=\"clientStore.auth\"\n :clientDocument=\"clientStore.workspace.activeDocument\"\n :document=\"workspaceStore.workspace.activeDocument\"\n :environment\n :eventBus\n :expandedItems=\"sidebarState.expandedItems.value\"\n :headingSlugGenerator=\"\n mergedConfig.generateHeadingSlug ??\n ((heading) => `${activeSlug}/description/${heading.slug}`)\n \"\n :infoSectionId\n :items=\"sidebarItems\"\n :options=\"mergedConfig\"\n :xScalarDefaultClient=\"\n clientStore.workspace['x-scalar-default-client']\n \">\n <template #start>\n <!-- Placeholder intersection observer that emits an empty string to clear the hash when scrolled to the top -->\n <div ref=\"documentStartRef\" />\n\n <DeveloperTools\n v-if=\"workspaceStore.workspace.activeDocument\"\n v-model:overrides=\"configurationOverrides\"\n class=\"references-developer-tools\"\n :configuration=\"mergedConfig\"\n :externalUrls=\"mergedConfig.externalUrls\"\n :workspace=\"workspaceStore\" />\n\n <ClassicHeader v-if=\"mergedConfig.layout === 'classic'\">\n <div class=\"w-64 empty:hidden\">\n <DocumentSelector\n v-if=\"documentOptionList.length > 1\"\n :modelValue=\"activeSlug\"\n :options=\"documentOptionList\"\n @update:modelValue=\"changeSelectedDocument\" />\n </div>\n <SearchButton\n v-if=\"!mergedConfig.hideSearch\"\n class=\"t-doc__sidebar max-w-64\"\n :document=\"activeSearchableDocument\"\n :eventBus=\"eventBus\"\n :hideModels=\"mergedConfig.hideModels\"\n :modelsSectionLabel=\"mergedConfig.modelsSectionLabel\"\n :searchHotKey=\"mergedConfig.searchHotKey\" />\n <template #dark-mode-toggle>\n <ScalarColorModeToggleIcon\n v-if=\"\n !mergedConfig.hideDarkModeToggle &&\n !mergedConfig.forceDarkModeState\n \"\n class=\"text-c-2 hover:text-c-1\"\n :mode=\"colorMode\"\n style=\"transform: scale(1.4)\"\n variant=\"icon\"\n @click=\"() => toggleColorMode()\" />\n </template>\n </ClassicHeader>\n <slot\n name=\"content-start\"\n v-bind=\"slotProps\" />\n </template>\n <!-- TODO: Remove this; we no longer directly support an inline editor -->\n <template\n v-if=\"mergedConfig.isEditable\"\n #empty-state>\n <slot\n name=\"editor-placeholder\"\n v-bind=\"slotProps\" />\n </template>\n <template #end>\n <slot\n name=\"content-end\"\n v-bind=\"slotProps\" />\n </template>\n </Content>\n </main>\n <!-- Optional Footer -->\n <div\n v-if=\"$slots.footer\"\n class=\"references-footer\">\n <slot\n name=\"footer\"\n v-bind=\"slotProps\" />\n </div>\n <!-- Client Modal mount point -->\n <div ref=\"modal\" />\n </div>\n <ScalarToasts />\n </div>\n</template>\n\n<style>\n/ Add base styles to the body. Removed browser default margins for a better experience. /\n@layer scalar-base {\n body {\n margin: 0;\n background-color: var(--scalar-background-1);\n }\n}\n/* Used to check if css is loaded /\n:root {\n --scalar-loaded-api-reference: true;\n}\n</style>\n<style scoped>\n/ Configurable Layout Variables /\n@layer scalar-config {\n .scalar-api-reference {\n / The header height /\n --refs-header-height: calc(\n var(--scalar-custom-header-height, 0px) + var(--scalar-header-height, 0px)\n );\n / The offset of visible references content (minus headers) /\n --refs-viewport-offset: calc(\n var(--refs-header-height, 0px) + var(--refs-content-offset, 0px)\n );\n / The calculated height of visible references content (minus headers) /\n --refs-viewport-height: calc(\n var(--full-height, 100dvh) - var(--refs-viewport-offset, 0px)\n );\n / The width of the sidebar /\n --refs-sidebar-width: var(--scalar-sidebar-width, 0px);\n / The height of the sidebar /\n --refs-sidebar-height: calc(\n var(--full-height, 100dvh) - var(--refs-header-height, 0px)\n );\n / The maximum width of the content column /\n --refs-content-max-width: var(--scalar-content-max-width, 1540px);\n }\n\n .scalar-api-reference.references-classic {\n / Classic layout is wider /\n --refs-content-max-width: var(--scalar-content-max-width, 1420px);\n min-height: 100dvh;\n --refs-sidebar-width: 0;\n }\n}\n.t-doc__sidebar {\n z-index: 10;\n}\n\n/ ----------------------------------------------------- /\n/ References Layout /\n.references-layout {\n / Try to fill the container /\n min-height: 100dvh;\n min-width: 100%;\n max-width: 100%;\n flex: 1;\n\n /\n Calculated by a resize observer and set in the style attribute\n Falls back to the viewport height\n /\n --full-height: 100dvh;\n\n / Grid layout /\n display: grid;\n grid-template-rows: var(--scalar-header-height, 0px) repeat(2, auto);\n grid-template-columns: auto 1fr;\n grid-template-areas:\n 'header header'\n 'navigation rendered'\n 'footer footer';\n\n background: var(--scalar-background-1);\n}\n\n.references-editor {\n grid-area: editor;\n display: flex;\n min-width: 0;\n background: var(--scalar-background-1);\n}\n\n.references-rendered {\n position: relative;\n grid-area: rendered;\n min-width: 0;\n background: var(--scalar-background-1);\n}\n.scalar-api-reference.references-classic,\n.references-classic .references-rendered {\n height: initial !important;\n max-height: initial !important;\n}\n\n@layer scalar-config {\n .references-sidebar {\n / Set a default width if references are enabled /\n --refs-sidebar-width: var(--scalar-sidebar-width, 288px);\n }\n}\n\n/ Footer /\n.references-footer {\n grid-area: footer;\n}\n/ ----------------------------------------------------- /\n/ Responsive / Mobile Layout /\n\n@media (max-width: 1000px) {\n / Keep toolbar hidden on mobile without forcing desktop display mode. /\n .references-developer-tools {\n display: none;\n }\n\n / Stack view on mobile /\n .references-layout {\n / Adjust the sidebar height to the viewport height minus the header height /\n --refs-sidebar-height: calc(\n var(--full-height, 100dvh) - var(--scalar-custom-header-height, 0px)\n );\n\n grid-template-columns: 100%;\n grid-template-rows: var(--scalar-header-height, 0px) 0px auto auto;\n\n grid-template-areas:\n 'header'\n 'navigation'\n 'rendered'\n 'footer';\n }\n .references-editable {\n grid-template-areas:\n 'header'\n 'navigation'\n 'editor';\n }\n\n .references-rendered {\n position: static;\n }\n}\n</style>\n<style scoped>\n/\n Sidebar CSS for standalone\n* TODO: @brynn move this to the sidebar block OR the ApiReferenceStandalone component\n* when the new elements are available\n*/\n@media (max-width: 1000px) {\n .scalar-api-references-standalone-mobile:not(.references-classic) {\n --scalar-header-height: 50px;\n }\n}\n</style>\n<style scoped>\n.darklight-reference {\n width: 100%;\n margin-top: auto;\n}\n</style>\n"],"mappings":""}

package/dist/components/ApiReference.vue.script.js CHANGED Viewed

@@ -6,8 +6,8 @@ import ClassicHeader_default from "./ClassicHeader.vue.js";
 import { useIntersection } from "../hooks/use-intersection.js";
 import { createPluginManager } from "../plugins/plugin-manager.js";
 import { PLUGIN_MANAGER_SYMBOL } from "../plugins/hooks/usePluginManager.js";
-import { persistencePlugin } from "../plugins/persistance-plugin.js";
-import { getIdFromUrl, makeUrlFromId, matchesBasePath } from "../helpers/id-routing.js";
+import { persistencePlugin } from "../plugins/persistence-plugin.js";
+import { getIdFromUrl, makeUrlFromId, matchesBasePath, redirectLegacyModelUrl } from "../helpers/id-routing.js";
 import { addToPriorityQueue, blockIntersection, intersectionEnabled, scrollToLazy } from "../helpers/lazy-bus.js";
 import Content_default from "./Content/Content.vue.js";
 import MobileHeader_default from "./MobileHeader.vue.js";
@@ -24,14 +24,15 @@ import { safeDeepClone } from "../helpers/safe-deep-clone.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, onBeforeMount, onBeforeUnmount, onMounted, onServerPrefetch, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useTemplateRef, watch, withCtx } from "vue";
 import { provideUseId } from "@headlessui/vue";
 import { OpenApiClientButton } from "@scalar/api-client/blocks/operation-block";
-import { createApiClientModal } from "@scalar/api-client/modal";
 import { ScalarColorModeToggleButton, ScalarColorModeToggleIcon } from "@scalar/components/color-mode-toggle";
 import { addScalarClassesToHeadless } from "@scalar/components/helpers";
 import { ScalarSidebarFooter } from "@scalar/components/sidebar";
+import { slugify } from "@scalar/helpers/string/slugify";
 import { isLocalUrl } from "@scalar/helpers/url/is-local-url";
 import { apiReferenceConfigurationSchema } from "@scalar/schemas/api-reference";
 import { ScalarSidebar, createSidebarState, scrollSidebarToTop } from "@scalar/sidebar";
 import { getThemeStyles, hasObtrusiveScrollbars } from "@scalar/themes";
+import { DEFAULT_MODELS_SECTION_LABEL } from "@scalar/types/api-reference";
 import { useClipboard } from "@scalar/use-hooks/useClipboard";
 import { useColorMode } from "@scalar/use-hooks/useColorMode";
 import { ScalarToasts } from "@scalar/use-toasts";
@@ -54,7 +55,7 @@ var _hoisted_5 = {
 	key: 2,
 	class: "references-footer"
 };
-var version = "1.57.5";
+var version = "1.58.0";
 if (typeof window !== "undefined") console.info(`@scalar/api-reference@${version}`);
 var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ApiReference",
@@ -115,11 +116,17 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		/** Configuration overrides to apply to the selected document (from the localhost toolbar) */
 		const configurationOverrides = ref({});
 		/** Any dev toolbar modifications are merged with the active configuration */
-		const mergedConfig = computed(() => ({
-			...coerce(apiReferenceConfigurationSchema, {}),
-			...configList.value[activeSlug.value]?.config,
-			...configurationOverrides.value
-		}));
+		const mergedConfig = computed(() => {
+			const merged = {
+				...coerce(apiReferenceConfigurationSchema, {}),
+				...configList.value[activeSlug.value]?.config,
+				...configurationOverrides.value
+			};
+			return {
+				...merged,
+				modelsSectionLabel: merged.modelsSectionLabel ?? DEFAULT_MODELS_SECTION_LABEL
+			};
+		});
 		/** Convenience break out var to determine which routing mode we are using */
 		const basePath = computed(() => mergedConfig.value.pathRouting?.basePath);
 		const themeStyle = computed(() => getThemeStyles(mergedConfig.value.theme, { fonts: mergedConfig.value.withDefaultFonts }));
@@ -129,6 +136,10 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		pluginManager.notifyInit(mergedConfig.value);
 		watch(mergedConfig, (config) => pluginManager.notifyConfigChange(config));
 		/** Navigation State Handling */
+		if (typeof window !== "undefined") {
+			const canonical = redirectLegacyModelUrl(window.location.href, slugify(mergedConfig.value.modelsSectionLabel ?? DEFAULT_MODELS_SECTION_LABEL), activeSlug.value, isMultiDocument.value, mergedConfig.value.pathRouting?.basePath);
+			if (canonical) window.history.replaceState({}, "", canonical.toString());
+		}
 		if (mergedConfig.value.redirect && typeof window !== "undefined") {
 			const newPath = mergedConfig.value.redirect((mergedConfig.value.pathRouting ? window.location.pathname : "") + window.location.hash);
 			if (newPath) window.history.replaceState({}, "", newPath);
@@ -154,10 +165,7 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		*/
 		const clientStore = createWorkspaceStore({
 			verbose: isDevelopment,
-			plugins: [persistencePlugin({
-				prefix: () => activeSlug.value,
-				persistAuth: () => mergedConfig.value.persistAuth ?? false
-			})]
+			plugins: [persistencePlugin({ persistAuth: () => mergedConfig.value.persistAuth ?? false })]
 		});
 		const { toggleColorMode, isDarkMode } = useColorMode({
 			initialColorMode: {
@@ -168,15 +176,12 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			overrideColorMode: mergedConfig.value.forceDarkModeState
 		});
 		/**
-		* The active document narrowed to an OpenAPI document.
-		*
-		* api-reference is OpenAPI-native, so AsyncAPI documents are surfaced as
-		* undefined to downstream components.
+		* The active document passed to the search modal. Both OpenAPI and AsyncAPI
+		* documents are surfaced so the search index can pick up info.description
+		* headings from either spec; AsyncAPI-specific entries (channels, operations,
+		* messages) are not indexed yet.
 		*/
-		const activeOpenApiDocument = computed(() => {
-			const doc = workspaceStore.workspace.activeDocument;
-			return isOpenApiDocument(doc) ? doc : void 0;
-		});
+		const activeSearchableDocument = computed(() => workspaceStore.workspace.activeDocument);
 		/** Initialize the sidebar */
 		const sidebarState = createSidebarState(computed(() => {
 			return Object.entries(workspaceStore.workspace.documents).map(([slug, document]) => ({
@@ -185,7 +190,7 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				description: document.info.description,
 				name: document.info.title ?? slug,
 				title: document.info.title ?? slug,
-				children: isOpenApiDocument(document) ? document["x-scalar-navigation"]?.children ?? [] : []
+				children: document["x-scalar-navigation"]?.children ?? []
 			}));
 		}), { hooks: {} });
 		/** Recursively set all children of the given items to open */
@@ -227,6 +232,25 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			sidebarState.setSelected(id);
 			scrollToLazy(id, sidebarState.setExpanded, sidebarState.getEntryById);
 		};
+		/**
+		* Updates the browser tab title via the user-provided `setPageTitle` callback.
+		*
+		* Called whenever the section in view changes — on sidebar clicks, on scroll, and
+		* when switching documents — so the tab title always reflects what the reader sees.
+		*/
+		const updatePageTitle = (id) => {
+			const setPageTitle = mergedConfig.value?.setPageTitle;
+			const entry = sidebarState.getEntryById(id);
+			if (!setPageTitle || typeof document === "undefined" || !entry?.title) return;
+			const activeDocument = workspaceStore.workspace.activeDocument;
+			document.title = setPageTitle({
+				title: entry.title,
+				document: {
+					title: activeDocument?.info?.title ?? activeSlug.value,
+					slug: activeSlug.value
+				}
+			});
+		};
 		/** Maps some config values to the workspace store to keep it reactive */
 		mapConfigToWorkspaceStore({
 			config: () => mergedConfig.value,
@@ -336,6 +360,7 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				const firstTag = sidebarItems.value.find((item) => item.type === "tag");
 				if (firstTag) sidebarState.setExpanded(firstTag.id, true);
 			}
+			updatePageTitle(elementId && elementId !== slug ? elementId : slug);
 		};
 		/**
 		* TODO:Move this to a dedicated updateDocument function in the future and
@@ -398,7 +423,9 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		provide(AGENT_CONTEXT_SYMBOL, agent);
 		const modal = useTemplateRef("modal");
 		const apiClient = ref(null);
-		onMounted(() => {
+		onMounted(async () => {
+			if (!modal.value) return;
+			const { createApiClientModal } = await import("@scalar/api-client/modal");
 			if (!modal.value) return;
 			apiClient.value = createApiClientModal({
 				el: modal.value,
@@ -435,6 +462,7 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		*/
 		const handleSelectSidebarEntry = (id, caller) => {
 			const item = sidebarState.getEntryById(id);
+			updatePageTitle(id);
 			if ((item?.type === "tag" || item?.type === "models" || item?.type === "text") && sidebarState.isExpanded(id) && sidebarState.selectedItem.value === id) {
 				const unblock = blockIntersection();
 				sidebarState.setExpanded(id, false);
@@ -459,6 +487,7 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			if (!intersectionEnabled.value) return;
 			sidebarState.setSelected(id);
 			setBreadcrumb(id);
+			updatePageTitle(id);
 			scrollSidebarToTop(id);
 			const url = makeUrlFromId(id, basePath.value, isMultiDocument.value);
 			if (url && workspaceStore.workspace.activeDocument) window.history.replaceState({}, "", url.toString());
@@ -554,15 +583,17 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 						search: withCtx(() => [!mergedConfig.value.hideSearch ? (openBlock(), createBlock(SearchButton_default, {
 							key: 0,
 							class: "my-2",
-							document: activeOpenApiDocument.value,
+							document: activeSearchableDocument.value,
 							eventBus: unref(eventBus),
 							hideModels: mergedConfig.value.hideModels,
+							modelsSectionLabel: mergedConfig.value.modelsSectionLabel,
 							searchHotKey: mergedConfig.value.searchHotKey,
 							showSidebar: mergedConfig.value.showSidebar
 						}, null, 8, [
 							"document",
 							"eventBus",
 							"hideModels",
+							"modelsSectionLabel",
 							"searchHotKey",
 							"showSidebar"
 						])) : createCommentVNode("", true)]),
@@ -587,14 +618,16 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 									"onUpdate:modelValue": changeSelectedDocument
 								}, null, 8, ["modelValue", "options"])) : createCommentVNode("", true),
 								!mergedConfig.value.hideSearch ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(SearchButton_default, {
-									document: activeOpenApiDocument.value,
+									document: activeSearchableDocument.value,
 									eventBus: unref(eventBus),
 									hideModels: mergedConfig.value.hideModels,
+									modelsSectionLabel: mergedConfig.value.modelsSectionLabel,
 									searchHotKey: mergedConfig.value.searchHotKey
 								}, null, 8, [
 									"document",
 									"eventBus",
 									"hideModels",
+									"modelsSectionLabel",
 									"searchHotKey"
 								]), unref(agent).agentEnabled.value ? (openBlock(), createBlock(unref(AgentScalarButton_default), { key: 0 })) : createCommentVNode("", true)])) : createCommentVNode("", true),
 								renderSlot(_ctx.$slots, "sidebar-start", normalizeProps(guardReactiveProps(slotProps.value)), void 0, true)
@@ -699,14 +732,16 @@ var ApiReference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 								}, null, 8, ["modelValue", "options"])) : createCommentVNode("", true)]), !mergedConfig.value.hideSearch ? (openBlock(), createBlock(SearchButton_default, {
 									key: 0,
 									class: "t-doc__sidebar max-w-64",
-									document: activeOpenApiDocument.value,
+									document: activeSearchableDocument.value,
 									eventBus: unref(eventBus),
 									hideModels: mergedConfig.value.hideModels,
+									modelsSectionLabel: mergedConfig.value.modelsSectionLabel,
 									searchHotKey: mergedConfig.value.searchHotKey
 								}, null, 8, [
 									"document",
 									"eventBus",
 									"hideModels",
+									"modelsSectionLabel",
 									"searchHotKey"
 								])) : createCommentVNode("", true)]),
 								_: 1