@scalar/api-reference 1.59.3 → 1.60.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @scalar/api-reference
 
+## 1.60.0
+
+### Minor Changes
+
+- [#9478](https://github.com/scalar/scalar/pull/9478): Add `content.start` plugin view slot and `sidebar` visibility option for plugin view components.
+  - **`content.start`**: A new view slot that renders custom plugin components **before** the Introduction/Info section (at the top of the content area).
+  - **`sidebar` option on `ViewComponent`**: Plugins can now opt-in to display a sidebar entry for their custom views by providing `sidebar: { show: true, label: 'My Page' }`. Omitting `sidebar` or setting `show: false` hides the entry from the sidebar. The entry hooks into the existing navigation, so clicking it scrolls to the plugin view and it highlights as it scrolls into view.
+
+### Patch Changes
+
+- [#9504](https://github.com/scalar/scalar/pull/9504): Fix extra nesting and duplicated description when array items are wrapped in a single-item composition (`allOf`, `oneOf`, or `anyOf`)
+- [#9526](https://github.com/scalar/scalar/pull/9526): Fix anchor links to schema properties that are hidden inside collapsed sections. Deep links now expand the disclosures on the path to the target property and scroll to it, so links work without enabling `expandAllSchemaProperties`.
+- [#9484](https://github.com/scalar/scalar/pull/9484): Fix the schema description being hidden for responses when `expandAllResponses` is enabled. A response's own description and its content schema's description are now both shown.
+- [#9531](https://github.com/scalar/scalar/pull/9531): fix: the introduction loading skeleton now mirrors the actual layout (badges, title, links, description and selector cards) instead of generic stacked bars, so the page no longer jumps once the document loads
+- [#9524](https://github.com/scalar/scalar/pull/9524): Fix sidebar overlapping the content at exactly 1000px wide. The layout grid switched to the mobile (stacked) layout at `max-width: 1000px` while the sidebar visibility is driven by Tailwind's `lg:` variant (`min-width: 1000px`), so both fired at 1000px. The mobile breakpoint now uses `width < 1000px`, the exact complement of `lg:`, so 1000px is treated as desktop.
+
 ## 1.59.3
 
 ### Patch Changes

package/dist/blocks/scalar-info-block/components/IntroductionLayout.vue.d.ts

@@ -13,13 +13,13 @@ type __VLS_Props = {
     headingSlugGenerator: (heading: Heading) => string;
     eventBus: WorkspaceEventBus | null;
 };
-declare var __VLS_62: {}, __VLS_75: {}, __VLS_87: {};
+declare var __VLS_67: {}, __VLS_80: {}, __VLS_92: {};
 type __VLS_Slots = {} & {
-    'download-link'?: (props: typeof __VLS_62) => any;
+    'download-link'?: (props: typeof __VLS_67) => any;
 } & {
-    aside?: (props: typeof __VLS_75) => any;
+    aside?: (props: typeof __VLS_80) => any;
 } & {
-    after?: (props: typeof __VLS_87) => any;
+    after?: (props: typeof __VLS_92) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/blocks/scalar-info-block/components/IntroductionLayout.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLayout.vue"],"names":[],"mappings":"AAuGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EACV,2BAA2B,EAC3B,UAAU,EACX,MAAM,8DAA8D,CAAA;AAkBrE,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAA;IACtB,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IACrC,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAA;IACxC,IAAI,EAAE,UAAU,GAAG,kBAAkB,GAAG,SAAS,CAAA;IACjD,YAAY,CAAC,EAAE,2BAA2B,CAAA;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAA;IAClD,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;CACnC,CAAC;AAgPF,QAAA,IAAI,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACpE,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GACrD;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAK9C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"IntroductionLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLayout.vue"],"names":[],"mappings":"AA0GA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EACV,2BAA2B,EAC3B,UAAU,EACX,MAAM,8DAA8D,CAAA;AAmBrE,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAA;IACtB,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IACrC,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAA;IACxC,IAAI,EAAE,UAAU,GAAG,kBAAkB,GAAG,SAAS,CAAA;IACjD,YAAY,CAAC,EAAE,2BAA2B,CAAA;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAA;IAClD,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;CACnC,CAAC;AAoPF,QAAA,IAAI,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACpE,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GACrD;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAK9C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/blocks/scalar-info-block/components/IntroductionLayout.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import IntroductionLayout_vue_vue_type_script_setup_true_lang_default from "./IntroductionLayout.vue.script.js";
 /* empty css                                 */
 //#region src/blocks/scalar-info-block/components/IntroductionLayout.vue
-var IntroductionLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(IntroductionLayout_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bd137508"]]);
+var IntroductionLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(IntroductionLayout_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4e3a9e30"]]);
 //#endregion
 export { IntroductionLayout_default as default };
 

package/dist/blocks/scalar-info-block/components/IntroductionLayout.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionLayout.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport type { Heading } from '@scalar/types/legacy'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContainer,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nimport InfoDescription from './InfoDescription.vue'\nimport InfoLinks from './InfoLinks.vue'\nimport InfoVersion from './InfoVersion.vue'\nimport SpecificationVersion from './SpecificationVersion.vue'\n\ndefineProps<{\n  id: string | undefined\n  documentType?: 'openapi' | 'asyncapi'\n  specificationVersion: string | undefined\n  info: InfoObject | AsyncApiInfoObject | undefined\n  externalDocs?: ExternalDocumentationObject\n  documentExtensions?: Record<string, unknown>\n  infoExtensions?: Record<string, unknown>\n  headingSlugGenerator: (heading: Heading) => string\n  eventBus: WorkspaceEventBus | null\n}>()\n</script>\n\n<template>\n  <SectionContainer>\n    <!-- If the #after slot is used, we need to add a gap to the section. -->\n    <Section\n      :id=\"id\"\n      aria-label=\"Introduction\"\n      class=\"introduction-section z-1 gap-12\"\n      @intersecting=\"\n        () => id && eventBus?.emit('intersecting:nav-item', { id })\n      \">\n      <SectionContent :loading=\"!info\">\n        <div class=\"flex gap-1.5\">\n          <InfoVersion\n            v-if=\"info\"\n            :version=\"info?.version\" />\n          <SpecificationVersion\n            :documentType\n            :version=\"specificationVersion\" />\n        </div>\n        <SectionHeader\n          :loading=\"!info?.title\"\n          tight>\n          <SectionHeaderTag :level=\"1\">\n            {{ info?.title }}\n          </SectionHeaderTag>\n          <template #links>\n            <InfoLinks\n              v-if=\"info\"\n              :externalDocs=\"externalDocs\"\n              :info=\"info\" />\n          </template>\n        </SectionHeader>\n        <SectionColumns>\n          <SectionColumn>\n            <slot name=\"download-link\" />\n            <InfoDescription\n              :description=\"info?.description\"\n              :eventBus=\"eventBus\"\n              :headingSlugGenerator=\"headingSlugGenerator\" />\n          </SectionColumn>\n          <SectionColumn v-if=\"$slots.aside\">\n            <div class=\"sticky-cards\">\n              <slot name=\"aside\" />\n            </div>\n          </SectionColumn>\n        </SectionColumns>\n        <SpecificationExtension :value=\"documentExtensions\" />\n        <SpecificationExtension :value=\"infoExtensions\" />\n      </SectionContent>\n      <slot name=\"after\" />\n    </Section>\n  </SectionContainer>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"IntroductionLayout.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport type { Heading } from '@scalar/types/legacy'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContainer,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nimport InfoDescription from './InfoDescription.vue'\nimport InfoLinks from './InfoLinks.vue'\nimport InfoVersion from './InfoVersion.vue'\nimport IntroductionLoading from './IntroductionLoading.vue'\nimport SpecificationVersion from './SpecificationVersion.vue'\n\ndefineProps<{\n  id: string | undefined\n  documentType?: 'openapi' | 'asyncapi'\n  specificationVersion: string | undefined\n  info: InfoObject | AsyncApiInfoObject | undefined\n  externalDocs?: ExternalDocumentationObject\n  documentExtensions?: Record<string, unknown>\n  infoExtensions?: Record<string, unknown>\n  headingSlugGenerator: (heading: Heading) => string\n  eventBus: WorkspaceEventBus | null\n}>()\n</script>\n\n<template>\n  <SectionContainer>\n    <!-- If the #after slot is used, we need to add a gap to the section. -->\n    <Section\n      :id=\"id\"\n      aria-label=\"Introduction\"\n      class=\"introduction-section z-1 gap-12\"\n      @intersecting=\"\n        () => id && eventBus?.emit('intersecting:nav-item', { id })\n      \">\n      <SectionContent>\n        <!-- While the document loads we show a skeleton that mirrors this layout. -->\n        <IntroductionLoading\n          v-if=\"!info\"\n          :hasAside=\"Boolean($slots.aside)\" />\n\n        <template v-else>\n          <div class=\"flex gap-1.5\">\n            <InfoVersion :version=\"info?.version\" />\n            <SpecificationVersion\n              :documentType\n              :version=\"specificationVersion\" />\n          </div>\n          <SectionHeader tight>\n            <SectionHeaderTag :level=\"1\">\n              {{ info?.title }}\n            </SectionHeaderTag>\n            <template #links>\n              <InfoLinks\n                :externalDocs=\"externalDocs\"\n                :info=\"info\" />\n            </template>\n          </SectionHeader>\n          <SectionColumns>\n            <SectionColumn>\n              <slot name=\"download-link\" />\n              <InfoDescription\n                :description=\"info?.description\"\n                :eventBus=\"eventBus\"\n                :headingSlugGenerator=\"headingSlugGenerator\" />\n            </SectionColumn>\n            <SectionColumn v-if=\"$slots.aside\">\n              <div class=\"sticky-cards\">\n                <slot name=\"aside\" />\n              </div>\n            </SectionColumn>\n          </SectionColumns>\n          <SpecificationExtension :value=\"documentExtensions\" />\n          <SpecificationExtension :value=\"infoExtensions\" />\n        </template>\n      </SectionContent>\n      <slot name=\"after\" />\n    </Section>\n  </SectionContainer>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n</style>\n"],"mappings":""}

package/dist/blocks/scalar-info-block/components/IntroductionLayout.vue.script.js

@@ -9,8 +9,9 @@ import SpecificationExtension_default from "../../../features/specification-exte
 import InfoDescription_default from "./InfoDescription.vue.js";
 import InfoLinks_default from "./InfoLinks.vue.js";
 import InfoVersion_default from "./InfoVersion.vue.js";
+import IntroductionLoading_default from "./IntroductionLoading.vue.js";
 import SpecificationVersion_default from "./SpecificationVersion.vue.js";
-import { createBlock, createCommentVNode, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 //#region src/blocks/scalar-info-block/components/IntroductionLayout.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex gap-1.5" };
 var _hoisted_2 = { class: "sticky-cards" };
@@ -36,30 +37,26 @@ var IntroductionLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 					class: "introduction-section z-1 gap-12",
 					onIntersecting: _cache[0] || (_cache[0] = () => __props.id && __props.eventBus?.emit("intersecting:nav-item", { id: __props.id }))
 				}, {
-					default: withCtx(() => [createVNode(unref(SectionContent_default), { loading: !__props.info }, {
-						default: withCtx(() => [
-							createElementVNode("div", _hoisted_1, [__props.info ? (openBlock(), createBlock(InfoVersion_default, {
-								key: 0,
-								version: __props.info?.version
-							}, null, 8, ["version"])) : createCommentVNode("", true), createVNode(SpecificationVersion_default, {
+					default: withCtx(() => [createVNode(unref(SectionContent_default), null, {
+						default: withCtx(() => [!__props.info ? (openBlock(), createBlock(IntroductionLoading_default, {
+							key: 0,
+							hasAside: Boolean(_ctx.$slots.aside)
+						}, null, 8, ["hasAside"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+							createElementVNode("div", _hoisted_1, [createVNode(InfoVersion_default, { version: __props.info?.version }, null, 8, ["version"]), createVNode(SpecificationVersion_default, {
 								documentType: __props.documentType,
 								version: __props.specificationVersion
 							}, null, 8, ["documentType", "version"])]),
-							createVNode(unref(SectionHeader_default), {
-								loading: !__props.info?.title,
-								tight: ""
-							}, {
-								links: withCtx(() => [__props.info ? (openBlock(), createBlock(InfoLinks_default, {
-									key: 0,
+							createVNode(unref(SectionHeader_default), { tight: "" }, {
+								links: withCtx(() => [createVNode(InfoLinks_default, {
 									externalDocs: __props.externalDocs,
 									info: __props.info
-								}, null, 8, ["externalDocs", "info"])) : createCommentVNode("", true)]),
+								}, null, 8, ["externalDocs", "info"])]),
 								default: withCtx(() => [createVNode(unref(SectionHeaderTag_default), { level: 1 }, {
 									default: withCtx(() => [createTextVNode(toDisplayString(__props.info?.title), 1)]),
 									_: 1
 								})]),
 								_: 1
-							}, 8, ["loading"]),
+							}),
 							createVNode(unref(SectionColumns_default), null, {
 								default: withCtx(() => [createVNode(unref(SectionColumn_default), null, {
 									default: withCtx(() => [renderSlot(_ctx.$slots, "download-link", {}, void 0, true), createVNode(InfoDescription_default, {
@@ -80,9 +77,9 @@ var IntroductionLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 							}),
 							createVNode(unref(SpecificationExtension_default), { value: __props.documentExtensions }, null, 8, ["value"]),
 							createVNode(unref(SpecificationExtension_default), { value: __props.infoExtensions }, null, 8, ["value"])
-						]),
+						], 64))]),
 						_: 3
-					}, 8, ["loading"]), renderSlot(_ctx.$slots, "after", {}, void 0, true)]),
+					}), renderSlot(_ctx.$slots, "after", {}, void 0, true)]),
 					_: 3
 				}, 8, ["id"])]),
 				_: 3

package/dist/blocks/scalar-info-block/components/IntroductionLayout.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntroductionLayout.vue.script.js","names":["$slots"],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport type { Heading } from '@scalar/types/legacy'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContainer,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nimport InfoDescription from './InfoDescription.vue'\nimport InfoLinks from './InfoLinks.vue'\nimport InfoVersion from './InfoVersion.vue'\nimport SpecificationVersion from './SpecificationVersion.vue'\n\ndefineProps<{\n  id: string | undefined\n  documentType?: 'openapi' | 'asyncapi'\n  specificationVersion: string | undefined\n  info: InfoObject | AsyncApiInfoObject | undefined\n  externalDocs?: ExternalDocumentationObject\n  documentExtensions?: Record<string, unknown>\n  infoExtensions?: Record<string, unknown>\n  headingSlugGenerator: (heading: Heading) => string\n  eventBus: WorkspaceEventBus | null\n}>()\n</script>\n\n<template>\n  <SectionContainer>\n    <!-- If the #after slot is used, we need to add a gap to the section. -->\n    <Section\n      :id=\"id\"\n      aria-label=\"Introduction\"\n      class=\"introduction-section z-1 gap-12\"\n      @intersecting=\"\n        () => id && eventBus?.emit('intersecting:nav-item', { id })\n      \">\n      <SectionContent :loading=\"!info\">\n        <div class=\"flex gap-1.5\">\n          <InfoVersion\n            v-if=\"info\"\n            :version=\"info?.version\" />\n          <SpecificationVersion\n            :documentType\n            :version=\"specificationVersion\" />\n        </div>\n        <SectionHeader\n          :loading=\"!info?.title\"\n          tight>\n          <SectionHeaderTag :level=\"1\">\n            {{ info?.title }}\n          </SectionHeaderTag>\n          <template #links>\n            <InfoLinks\n              v-if=\"info\"\n              :externalDocs=\"externalDocs\"\n              :info=\"info\" />\n          </template>\n        </SectionHeader>\n        <SectionColumns>\n          <SectionColumn>\n            <slot name=\"download-link\" />\n            <InfoDescription\n              :description=\"info?.description\"\n              :eventBus=\"eventBus\"\n              :headingSlugGenerator=\"headingSlugGenerator\" />\n          </SectionColumn>\n          <SectionColumn v-if=\"$slots.aside\">\n            <div class=\"sticky-cards\">\n              <slot name=\"aside\" />\n            </div>\n          </SectionColumn>\n        </SectionColumns>\n        <SpecificationExtension :value=\"documentExtensions\" />\n        <SpecificationExtension :value=\"infoExtensions\" />\n      </SectionContent>\n      <slot name=\"after\" />\n    </Section>\n  </SectionContainer>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuCE,YAkDmB,MAAA,yBAAA,EAAA,MAAA;2BADP,CA/CV,YA+CU,MAAA,gBAAA,EAAA;KA9CP,IAAI,QAAA;KACL,cAAW;KACX,OAAM;KACL,gBAAY,OAAA,OAAA,OAAA,WAAiB,QAAA,MAAM,QAAA,UAAU,KAAI,yBAAA,EAAA,IAA4B,QAAA,IAAE,CAAA;;4BAyC/D,CAtCjB,YAsCiB,MAAA,uBAAA,EAAA,EAtCA,SAAO,CAAG,QAAA,MAAA,EAAA;6BAQnB;OAPN,mBAOM,OAPN,YAOM,CALI,QAAA,QAAA,WAAA,EADR,YAE6B,qBAAA;;QAA1B,SAAS,QAAA,MAAM;iEAClB,YAEoC,8BAAA;QADjC,cAAA,QAAA;QACA,SAAS,QAAA;;OAEd,YAYgB,MAAA,sBAAA,EAAA;QAXb,SAAO,CAAG,QAAA,MAAM;QACjB,OAAA;;QAIW,OAAK,cAIG,CAFT,QAAA,QAAA,WAAA,EADR,YAGiB,mBAAA;;SADd,cAAc,QAAA;SACd,MAAM,QAAA;;+BALQ,CAFnB,YAEmB,MAAA,yBAAA,EAAA,EAFA,OAAO,GAAC,EAAA;gCACR,CAAA,gBAAA,gBAAd,QAAA,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;OASlB,YAaiB,MAAA,uBAAA,EAAA,MAAA;+BANC,CANhB,YAMgB,MAAA,sBAAA,EAAA,MAAA;gCALe,CAA7B,WAA6B,KAAA,QAAA,iBAAA,EAAA,EAAA,KAAA,GAAA,KAAA,EAC7B,YAGiD,yBAAA;UAF9C,aAAa,QAAA,MAAM;UACnB,UAAU,QAAA;UACV,sBAAsB,QAAA;;;;;;;YAENA,KAAAA,OAAO,SAAA,WAAA,EAA5B,YAIgB,MAAA,sBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;gCADR,CAFN,mBAEM,OAFN,YAEM,CADJ,WAAqB,KAAA,QAAA,SAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA,CAAA,CAAA;;;;;OAI3B,YAAsD,MAAA,+BAAA,EAAA,EAA7B,OAAO,QAAA,oBAAkB,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA;OAClD,YAAkD,MAAA,+BAAA,EAAA,EAAzB,OAAO,QAAA,gBAAc,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA;;;yBAEhD,WAAqB,KAAA,QAAA,SAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA"}
+{"version":3,"file":"IntroductionLayout.vue.script.js","names":["$slots"],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AsyncApiInfoObject } from '@scalar/types/asyncapi/3.1'\nimport type { Heading } from '@scalar/types/legacy'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type {\n  ExternalDocumentationObject,\n  InfoObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContainer,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nimport InfoDescription from './InfoDescription.vue'\nimport InfoLinks from './InfoLinks.vue'\nimport InfoVersion from './InfoVersion.vue'\nimport IntroductionLoading from './IntroductionLoading.vue'\nimport SpecificationVersion from './SpecificationVersion.vue'\n\ndefineProps<{\n  id: string | undefined\n  documentType?: 'openapi' | 'asyncapi'\n  specificationVersion: string | undefined\n  info: InfoObject | AsyncApiInfoObject | undefined\n  externalDocs?: ExternalDocumentationObject\n  documentExtensions?: Record<string, unknown>\n  infoExtensions?: Record<string, unknown>\n  headingSlugGenerator: (heading: Heading) => string\n  eventBus: WorkspaceEventBus | null\n}>()\n</script>\n\n<template>\n  <SectionContainer>\n    <!-- If the #after slot is used, we need to add a gap to the section. -->\n    <Section\n      :id=\"id\"\n      aria-label=\"Introduction\"\n      class=\"introduction-section z-1 gap-12\"\n      @intersecting=\"\n        () => id && eventBus?.emit('intersecting:nav-item', { id })\n      \">\n      <SectionContent>\n        <!-- While the document loads we show a skeleton that mirrors this layout. -->\n        <IntroductionLoading\n          v-if=\"!info\"\n          :hasAside=\"Boolean($slots.aside)\" />\n\n        <template v-else>\n          <div class=\"flex gap-1.5\">\n            <InfoVersion :version=\"info?.version\" />\n            <SpecificationVersion\n              :documentType\n              :version=\"specificationVersion\" />\n          </div>\n          <SectionHeader tight>\n            <SectionHeaderTag :level=\"1\">\n              {{ info?.title }}\n            </SectionHeaderTag>\n            <template #links>\n              <InfoLinks\n                :externalDocs=\"externalDocs\"\n                :info=\"info\" />\n            </template>\n          </SectionHeader>\n          <SectionColumns>\n            <SectionColumn>\n              <slot name=\"download-link\" />\n              <InfoDescription\n                :description=\"info?.description\"\n                :eventBus=\"eventBus\"\n                :headingSlugGenerator=\"headingSlugGenerator\" />\n            </SectionColumn>\n            <SectionColumn v-if=\"$slots.aside\">\n              <div class=\"sticky-cards\">\n                <slot name=\"aside\" />\n              </div>\n            </SectionColumn>\n          </SectionColumns>\n          <SpecificationExtension :value=\"documentExtensions\" />\n          <SpecificationExtension :value=\"infoExtensions\" />\n        </template>\n      </SectionContent>\n      <slot name=\"after\" />\n    </Section>\n  </SectionContainer>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAwCE,YAoDmB,MAAA,yBAAA,EAAA,MAAA;2BADP,CAjDV,YAiDU,MAAA,gBAAA,EAAA;KAhDP,IAAI,QAAA;KACL,cAAW;KACX,OAAM;KACL,gBAAY,OAAA,OAAA,OAAA,WAAiB,QAAA,MAAM,QAAA,UAAU,KAAI,yBAAA,EAAA,IAA4B,QAAA,IAAE,CAAA;;4BA2C/D,CAxCjB,YAwCiB,MAAA,uBAAA,EAAA,MAAA;6BApCuB,CAAA,CAD7B,QAAA,QAAA,WAAA,EADT,YAEsC,6BAAA;;OAAnC,UAAU,QAAQA,KAAAA,OAAO,MAAK;iDAEjC,mBAiCW,UAAA,EAAA,KAAA,GAAA,EAAA;OAhCT,mBAKM,OALN,YAKM,CAJJ,YAAwC,qBAAA,EAA1B,SAAS,QAAA,MAAM,SAAA,EAAA,MAAA,GAAA,CAAA,UAAA,CAAA,EAC7B,YAEoC,8BAAA;QADjC,cAAA,QAAA;QACA,SAAS,QAAA;;OAEd,YASgB,MAAA,sBAAA,EAAA,EATD,OAAA,IAAK,EAAA;QAIP,OAAK,cAGG,CAFjB,YAEiB,mBAAA;SADd,cAAc,QAAA;SACd,MAAM,QAAA;;+BAJQ,CAFnB,YAEmB,MAAA,yBAAA,EAAA,EAFA,OAAO,GAAC,EAAA;gCACR,CAAA,gBAAA,gBAAd,QAAA,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;OAQlB,YAaiB,MAAA,uBAAA,EAAA,MAAA;+BANC,CANhB,YAMgB,MAAA,sBAAA,EAAA,MAAA;gCALe,CAA7B,WAA6B,KAAA,QAAA,iBAAA,EAAA,EAAA,KAAA,GAAA,KAAA,EAC7B,YAGiD,yBAAA;UAF9C,aAAa,QAAA,MAAM;UACnB,UAAU,QAAA;UACV,sBAAsB,QAAA;;;;;;;YAENA,KAAAA,OAAO,SAAA,WAAA,EAA5B,YAIgB,MAAA,sBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;gCADR,CAFN,mBAEM,OAFN,YAEM,CADJ,WAAqB,KAAA,QAAA,SAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA,CAAA,CAAA;;;;;OAI3B,YAAsD,MAAA,+BAAA,EAAA,EAA7B,OAAO,QAAA,oBAAkB,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA;OAClD,YAAkD,MAAA,+BAAA,EAAA,EAAzB,OAAO,QAAA,gBAAc,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA;;;SAGlD,WAAqB,KAAA,QAAA,SAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA"}

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    /**
+     * Whether the selector cards live in a sticky aside column (modern layout)
+     * or in a row below the description (classic layout). Mirrors the
+     * `$slots.aside` check in the loaded layout.
+     */
+    hasAside?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=IntroductionLoading.vue.d.ts.map

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntroductionLoading.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"names":[],"mappings":"AAyGA,KAAK,WAAW,GAAG;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA8PF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import IntroductionLoading_vue_vue_type_script_setup_true_lang_default from "./IntroductionLoading.vue.script.js";
+/* empty css                                  */
+//#region src/blocks/scalar-info-block/components/IntroductionLoading.vue
+var IntroductionLoading_default = /* @__PURE__ */ _plugin_vue_export_helper_default(IntroductionLoading_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1bd6e256"]]);
+//#endregion
+export { IntroductionLoading_default as default };
+
+//# sourceMappingURL=IntroductionLoading.vue.js.map

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntroductionLoading.vue.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Loading skeleton for the introduction block. It mirrors the real layout\n * (badges, title, links, description and selector cards) so the page does not\n * jump once the document has loaded.\n */\nimport { SectionColumn, SectionColumns } from '@/components/Section'\n\nconst { hasAside = true } = defineProps<{\n  /**\n   * Whether the selector cards live in a sticky aside column (modern layout)\n   * or in a row below the description (classic layout). Mirrors the\n   * `$slots.aside` check in the loaded layout.\n   */\n  hasAside?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    class=\"introduction-loading flex flex-col gap-5\"\n    aria-hidden=\"true\">\n    <!-- Version and specification badges -->\n    <div class=\"flex gap-1.5\">\n      <div class=\"introduction-skeleton h-6 w-14 rounded-full\" />\n      <div class=\"introduction-skeleton h-6 w-24 rounded-full\" />\n    </div>\n    <!-- Title and links (mirrors SectionHeader's two-column grid at xl) -->\n    <div class=\"grid grid-cols-1 gap-3 xl:grid-cols-2 xl:gap-12\">\n      <div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" />\n      <div class=\"flex flex-wrap items-center gap-2 xl:justify-end\">\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-12 rounded\" />\n      </div>\n    </div>\n    <SectionColumns>\n      <SectionColumn>\n        <div class=\"flex flex-col gap-3\">\n          <!-- Download link -->\n          <div class=\"introduction-skeleton mb-2 h-5 w-56 rounded\" />\n          <!-- Description -->\n          <div class=\"introduction-skeleton h-4 w-full rounded\" />\n          <div class=\"introduction-skeleton h-4 w-11/12 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-4/5 rounded\" />\n          <!-- Section heading -->\n          <div class=\"introduction-skeleton mt-4 h-6 w-40 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-3/4 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-2/3 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-1/2 rounded\" />\n        </div>\n      </SectionColumn>\n      <!-- Modern layout: selector cards in a sticky aside column -->\n      <SectionColumn v-if=\"hasAside\">\n        <div class=\"sticky-cards gap-3\">\n          <div class=\"introduction-skeleton h-20 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n        </div>\n      </SectionColumn>\n    </SectionColumns>\n    <!-- Classic layout: selector cards in a row below the description -->\n    <div\n      v-if=\"!hasAside\"\n      class=\"flex flex-col gap-3 sm:flex-row sm:gap-6\">\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n/* Pulsing placeholder, matching the look of the rest of the loading states. */\n.introduction-skeleton {\n  background: var(--scalar-background-3);\n  animation: introduction-skeleton-pulse 1.5s infinite alternate;\n}\n\n@keyframes introduction-skeleton-pulse {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0.33;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.script.js

@@ -0,0 +1,63 @@
+import SectionColumn_default from "../../../components/Section/SectionColumn.vue.js";
+import SectionColumns_default from "../../../components/Section/SectionColumns.vue.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
+//#region src/blocks/scalar-info-block/components/IntroductionLoading.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "introduction-loading flex flex-col gap-5",
+	"aria-hidden": "true"
+};
+var _hoisted_2 = {
+	key: 0,
+	class: "flex flex-col gap-3 sm:flex-row sm:gap-6"
+};
+var IntroductionLoading_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "IntroductionLoading",
+	props: { hasAside: {
+		type: Boolean,
+		default: true
+	} },
+	setup(__props) {
+		/**
+		* Loading skeleton for the introduction block. It mirrors the real layout
+		* (badges, title, links, description and selector cards) so the page does not
+		* jump once the document has loaded.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				_cache[3] || (_cache[3] = createStaticVNode("<div class=\"flex gap-1.5\" data-v-1bd6e256><div class=\"introduction-skeleton h-6 w-14 rounded-full\" data-v-1bd6e256></div><div class=\"introduction-skeleton h-6 w-24 rounded-full\" data-v-1bd6e256></div></div><div class=\"grid grid-cols-1 gap-3 xl:grid-cols-2 xl:gap-12\" data-v-1bd6e256><div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" data-v-1bd6e256></div><div class=\"flex flex-wrap items-center gap-2 xl:justify-end\" data-v-1bd6e256><div class=\"introduction-skeleton h-5 w-28 rounded\" data-v-1bd6e256></div><div class=\"introduction-skeleton h-5 w-28 rounded\" data-v-1bd6e256></div><div class=\"introduction-skeleton h-5 w-12 rounded\" data-v-1bd6e256></div></div></div>", 2)),
+				createVNode(unref(SectionColumns_default), null, {
+					default: withCtx(() => [createVNode(unref(SectionColumn_default), null, {
+						default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "flex flex-col gap-3" }, [
+							createElementVNode("div", { class: "introduction-skeleton mb-2 h-5 w-56 rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton h-4 w-full rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton h-4 w-11/12 rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton h-4 w-4/5 rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton mt-4 h-6 w-40 rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton h-4 w-3/4 rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton h-4 w-2/3 rounded" }),
+							createElementVNode("div", { class: "introduction-skeleton h-4 w-1/2 rounded" })
+						], -1)])]),
+						_: 1
+					}), __props.hasAside ? (openBlock(), createBlock(unref(SectionColumn_default), { key: 0 }, {
+						default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("div", { class: "sticky-cards gap-3" }, [
+							createElementVNode("div", { class: "introduction-skeleton h-20 w-full rounded-lg" }),
+							createElementVNode("div", { class: "introduction-skeleton h-28 w-full rounded-lg" }),
+							createElementVNode("div", { class: "introduction-skeleton h-28 w-full rounded-lg" })
+						], -1)])]),
+						_: 1
+					})) : createCommentVNode("", true)]),
+					_: 1
+				}),
+				!__props.hasAside ? (openBlock(), createElementBlock("div", _hoisted_2, [..._cache[2] || (_cache[2] = [
+					createElementVNode("div", { class: "introduction-skeleton h-28 w-full flex-1 rounded-lg" }, null, -1),
+					createElementVNode("div", { class: "introduction-skeleton h-28 w-full flex-1 rounded-lg" }, null, -1),
+					createElementVNode("div", { class: "introduction-skeleton h-28 w-full flex-1 rounded-lg" }, null, -1)
+				])])) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { IntroductionLoading_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=IntroductionLoading.vue.script.js.map

package/dist/blocks/scalar-info-block/components/IntroductionLoading.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntroductionLoading.vue.script.js","names":[],"sources":["../../../../src/blocks/scalar-info-block/components/IntroductionLoading.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Loading skeleton for the introduction block. It mirrors the real layout\n * (badges, title, links, description and selector cards) so the page does not\n * jump once the document has loaded.\n */\nimport { SectionColumn, SectionColumns } from '@/components/Section'\n\nconst { hasAside = true } = defineProps<{\n  /**\n   * Whether the selector cards live in a sticky aside column (modern layout)\n   * or in a row below the description (classic layout). Mirrors the\n   * `$slots.aside` check in the loaded layout.\n   */\n  hasAside?: boolean\n}>()\n</script>\n\n<template>\n  <div\n    class=\"introduction-loading flex flex-col gap-5\"\n    aria-hidden=\"true\">\n    <!-- Version and specification badges -->\n    <div class=\"flex gap-1.5\">\n      <div class=\"introduction-skeleton h-6 w-14 rounded-full\" />\n      <div class=\"introduction-skeleton h-6 w-24 rounded-full\" />\n    </div>\n    <!-- Title and links (mirrors SectionHeader's two-column grid at xl) -->\n    <div class=\"grid grid-cols-1 gap-3 xl:grid-cols-2 xl:gap-12\">\n      <div class=\"introduction-skeleton h-9 w-3/5 rounded-lg\" />\n      <div class=\"flex flex-wrap items-center gap-2 xl:justify-end\">\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-28 rounded\" />\n        <div class=\"introduction-skeleton h-5 w-12 rounded\" />\n      </div>\n    </div>\n    <SectionColumns>\n      <SectionColumn>\n        <div class=\"flex flex-col gap-3\">\n          <!-- Download link -->\n          <div class=\"introduction-skeleton mb-2 h-5 w-56 rounded\" />\n          <!-- Description -->\n          <div class=\"introduction-skeleton h-4 w-full rounded\" />\n          <div class=\"introduction-skeleton h-4 w-11/12 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-4/5 rounded\" />\n          <!-- Section heading -->\n          <div class=\"introduction-skeleton mt-4 h-6 w-40 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-3/4 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-2/3 rounded\" />\n          <div class=\"introduction-skeleton h-4 w-1/2 rounded\" />\n        </div>\n      </SectionColumn>\n      <!-- Modern layout: selector cards in a sticky aside column -->\n      <SectionColumn v-if=\"hasAside\">\n        <div class=\"sticky-cards gap-3\">\n          <div class=\"introduction-skeleton h-20 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n          <div class=\"introduction-skeleton h-28 w-full rounded-lg\" />\n        </div>\n      </SectionColumn>\n    </SectionColumns>\n    <!-- Classic layout: selector cards in a row below the description -->\n    <div\n      v-if=\"!hasAside\"\n      class=\"flex flex-col gap-3 sm:flex-row sm:gap-6\">\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n      <div class=\"introduction-skeleton h-28 w-full flex-1 rounded-lg\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.sticky-cards {\n  display: flex;\n  flex-direction: column;\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n/* Pulsing placeholder, matching the look of the rest of the loading states. */\n.introduction-skeleton {\n  background: var(--scalar-background-3);\n  animation: introduction-skeleton-pulse 1.5s infinite alternate;\n}\n\n@keyframes introduction-skeleton-pulse {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0.33;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;uBAmBE,mBAkDM,OAlDN,YAkDM;;IAjCJ,YAwBiB,MAAA,uBAAA,EAAA,MAAA;4BATC,CAdhB,YAcgB,MAAA,sBAAA,EAAA,MAAA;6BADR,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAZN,mBAYM,OAAA,EAZD,OAAM,uBAAqB,EAAA;OAE9B,mBAA2D,OAAA,EAAtD,OAAM,+CAA6C,CAAA;OAExD,mBAAwD,OAAA,EAAnD,OAAM,4CAA0C,CAAA;OACrD,mBAAyD,OAAA,EAApD,OAAM,6CAA2C,CAAA;OACtD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;OAEpD,mBAA2D,OAAA,EAAtD,OAAM,+CAA6C,CAAA;OACxD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;OACpD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;OACpD,mBAAuD,OAAA,EAAlD,OAAM,2CAAyC,CAAA;;;SAInC,QAAA,YAAA,WAAA,EAArB,YAMgB,MAAA,sBAAA,EAAA,EAAA,KAAA,GAAA,EAAA;6BADR,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAJN,mBAIM,OAAA,EAJD,OAAM,sBAAoB,EAAA;OAC7B,mBAA4D,OAAA,EAAvD,OAAM,gDAA8C,CAAA;OACzD,mBAA4D,OAAA,EAAvD,OAAM,gDAA8C,CAAA;OACzD,mBAA4D,OAAA,EAAvD,OAAM,gDAA8C,CAAA;;;;;;KAMtD,QAAA,YAAA,WAAA,EADT,mBAMM,OANN,YAMM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA;KAHJ,mBAAmE,OAAA,EAA9D,OAAM,uDAAqD,EAAA,MAAA,GAAA;KAChE,mBAAmE,OAAA,EAA9D,OAAM,uDAAqD,EAAA,MAAA,GAAA;KAChE,mBAAmE,OAAA,EAA9D,OAAM,uDAAqD,EAAA,MAAA,GAAA"}