@scalar/api-reference 1.59.3 → 1.61.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @scalar/api-reference
 
+## 1.61.0
+
+### Minor Changes
+
+- [#9520](https://github.com/scalar/scalar/pull/9520): Render AsyncAPI operations and their messages (with payload and header schemas) nested inside each channel, in both the modern and classic layouts
+- [#9569](https://github.com/scalar/scalar/pull/9569): Show server and protocol labels when rendering AsyncAPI channels and messages: each channel header lists the servers it's available on and their protocols, and each message surfaces every protocol it's carried over (its channel's server protocols unioned with its own binding protocols)
+- [#9515](https://github.com/scalar/scalar/pull/9515): feat: add `requestBuilt` client plugin hook and `onRequestBuilt` configuration callback that receive the exact fetch `Request` that is sent over the wire
+
+  The hook runs after the request has been built, right before it is sent. Header mutations apply to the outgoing request and the body bytes match what the server receives, which makes request signing possible: hashing the body of a rebuilt `multipart/form-data` request would produce a different multipart boundary than the request that is actually sent.
+
+### Patch Changes
+
+- [#9559](https://github.com/scalar/scalar/pull/9559): Render an object's own properties when they are factored out alongside a composition keyword (`anyOf`/`oneOf`/`allOf`/`not`)
+- [#9542](https://github.com/scalar/scalar/pull/9542): Fix an SSR hydration mismatch in the injected `<style>` tag: the CSS is now rendered verbatim instead of being HTML-escaped on the server (`"` became `&quot;`), which broke font styles and caused a hydration mismatch.
+- [#9546](https://github.com/scalar/scalar/pull/9546): fix: let a later `allOf` member override the `description` and `title` of an earlier one
+- [#9557](https://github.com/scalar/scalar/pull/9557): Fix `oneOf`/`anyOf` being dropped when nested inside an `allOf`. The composition is now preserved so its variants keep rendering alongside the merged base properties, instead of only the first `allOf` member showing up.
+
+## 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"}