@deot/docs-playground 1.1.0 → 1.1.2

package/dist/index.js

@@ -153,10 +153,10 @@ var icon_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region packages/playground/src/core/code-preview/github.css?inline
-var github_default = "pre code.hljs{display:block;padding:1em;overflow-x:auto}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{font-weight:700;color:#005cc5}.hljs-bullet{color:#735c0f}.hljs-emphasis{font-style:italic;color:#24292e}.hljs-strong{font-weight:700;color:#24292e}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}[data-doc-theme=dark] .hljs,[data-vc-theme=dark] .hljs{color:#c9d1d9;background:#0d1117}[data-doc-theme=dark] .hljs-doctag,[data-doc-theme=dark] .hljs-keyword,[data-doc-theme=dark] .hljs-meta .hljs-keyword,[data-doc-theme=dark] .hljs-template-tag,[data-doc-theme=dark] .hljs-template-variable,[data-doc-theme=dark] .hljs-type,[data-doc-theme=dark] .hljs-variable.language_,[data-vc-theme=dark] .hljs-doctag,[data-vc-theme=dark] .hljs-keyword,[data-vc-theme=dark] .hljs-meta .hljs-keyword,[data-vc-theme=dark] .hljs-template-tag,[data-vc-theme=dark] .hljs-template-variable,[data-vc-theme=dark] .hljs-type,[data-vc-theme=dark] .hljs-variable.language_{color:#ff7b72}[data-doc-theme=dark] .hljs-title,[data-doc-theme=dark] .hljs-title.class_,[data-doc-theme=dark] .hljs-title.function_,[data-vc-theme=dark] .hljs-title,[data-vc-theme=dark] .hljs-title.class_,[data-vc-theme=dark] .hljs-title.function_{color:#d2a8ff}[data-doc-theme=dark] .hljs-attr,[data-doc-theme=dark] .hljs-literal,[data-doc-theme=dark] .hljs-number,[data-doc-theme=dark] .hljs-variable,[data-vc-theme=dark] .hljs-attr,[data-vc-theme=dark] .hljs-literal,[data-vc-theme=dark] .hljs-number,[data-vc-theme=dark] .hljs-variable{color:#79c0ff}[data-doc-theme=dark] .hljs-regexp,[data-doc-theme=dark] .hljs-string,[data-vc-theme=dark] .hljs-regexp,[data-vc-theme=dark] .hljs-string{color:#a5d6ff}[data-doc-theme=dark] .hljs-code,[data-doc-theme=dark] .hljs-comment,[data-vc-theme=dark] .hljs-code,[data-vc-theme=dark] .hljs-comment{color:#8b949e}[data-doc-theme=dark] .hljs-name,[data-doc-theme=dark] .hljs-selector-tag,[data-vc-theme=dark] .hljs-name,[data-vc-theme=dark] .hljs-selector-tag{color:#7ee787}";
+var github_default = "pre code.hljs{display:block;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{font-weight:700;color:#005cc5}.hljs-bullet{color:#735c0f}.hljs-emphasis{font-style:italic;color:#24292e}.hljs-strong{font-weight:700;color:#24292e}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}[data-doc-theme=dark] .hljs,[data-vc-theme=dark] .hljs{color:#c9d1d9;background:#0d1117}[data-doc-theme=dark] .hljs-doctag,[data-doc-theme=dark] .hljs-keyword,[data-doc-theme=dark] .hljs-meta .hljs-keyword,[data-doc-theme=dark] .hljs-template-tag,[data-doc-theme=dark] .hljs-template-variable,[data-doc-theme=dark] .hljs-type,[data-doc-theme=dark] .hljs-variable.language_,[data-vc-theme=dark] .hljs-doctag,[data-vc-theme=dark] .hljs-keyword,[data-vc-theme=dark] .hljs-meta .hljs-keyword,[data-vc-theme=dark] .hljs-template-tag,[data-vc-theme=dark] .hljs-template-variable,[data-vc-theme=dark] .hljs-type,[data-vc-theme=dark] .hljs-variable.language_{color:#ff7b72}[data-doc-theme=dark] .hljs-title,[data-doc-theme=dark] .hljs-title.class_,[data-doc-theme=dark] .hljs-title.function_,[data-vc-theme=dark] .hljs-title,[data-vc-theme=dark] .hljs-title.class_,[data-vc-theme=dark] .hljs-title.function_{color:#d2a8ff}[data-doc-theme=dark] .hljs-attr,[data-doc-theme=dark] .hljs-literal,[data-doc-theme=dark] .hljs-number,[data-doc-theme=dark] .hljs-variable,[data-vc-theme=dark] .hljs-attr,[data-vc-theme=dark] .hljs-literal,[data-vc-theme=dark] .hljs-number,[data-vc-theme=dark] .hljs-variable{color:#79c0ff}[data-doc-theme=dark] .hljs-regexp,[data-doc-theme=dark] .hljs-string,[data-vc-theme=dark] .hljs-regexp,[data-vc-theme=dark] .hljs-string{color:#a5d6ff}[data-doc-theme=dark] .hljs-code,[data-doc-theme=dark] .hljs-comment,[data-vc-theme=dark] .hljs-code,[data-vc-theme=dark] .hljs-comment{color:#8b949e}[data-doc-theme=dark] .hljs-name,[data-doc-theme=dark] .hljs-selector-tag,[data-vc-theme=dark] .hljs-name,[data-vc-theme=dark] .hljs-selector-tag{color:#7ee787}";
 //#endregion
 //#region packages/playground/src/core/code-preview/code-preview.scss?inline
-var code_preview_default$1 = ".docs-code-preview{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:0;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border-radius:8px}.docs-code-preview__language{z-index:1;min-width:28px;padding:0 8px;font-size:12px;line-height:18px;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .15s ease;transition:opacity .15s ease}.docs-code-preview__copy,.docs-code-preview__language{position:absolute;top:6px;right:12px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:28px;color:var(--docs-foreground-color-mute,var(--vc-color-dark-extralight,#71717a));-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-code-preview__copy{z-index:2;width:28px;padding:0;pointer-events:none;cursor:pointer;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border:1px solid var(--docs-border-color,var(--vc-color-light-deeper,#d4d4d8));border-radius:8px;opacity:0;-webkit-transition:opacity .15s ease,background-color .15s ease;transition:opacity .15s ease,background-color .15s ease}.docs-code-preview__copy:hover{background:var(--docs-background-color,var(--vc-background-color-light,#fff))}.docs-code-preview__copy:focus-visible{pointer-events:auto;opacity:1}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__language,.docs-code-preview:hover .docs-code-preview__language{opacity:0}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__copy,.docs-code-preview:hover .docs-code-preview__copy{pointer-events:auto;opacity:1}.docs-code-preview__code{width:100%;min-height:0;margin:0;overflow:auto;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-code-preview__code,.docs-code-preview__code code.hljs{background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa))}.docs-code-preview__code code.hljs{min-height:100%;padding:12px 96px 12px 24px;-webkit-box-sizing:border-box;box-sizing:border-box}";
+var code_preview_default$1 = ".docs-code-preview{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:0;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border-radius:8px}.docs-code-preview__language{z-index:1;min-width:28px;padding:0 8px;font-size:12px;line-height:18px;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .15s ease;transition:opacity .15s ease}.docs-code-preview__copy,.docs-code-preview__language{position:absolute;top:6px;right:12px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:28px;color:var(--docs-foreground-color-mute,var(--vc-color-dark-extralight,#71717a));-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-code-preview__copy{z-index:2;width:28px;padding:0;pointer-events:none;cursor:pointer;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border:1px solid var(--docs-border-color,var(--vc-color-light-deeper,#d4d4d8));border-radius:8px;opacity:0;-webkit-transition:opacity .15s ease,background-color .15s ease;transition:opacity .15s ease,background-color .15s ease}.docs-code-preview__copy:hover{background:var(--docs-background-color,var(--vc-background-color-light,#fff))}.docs-code-preview__copy:focus-visible{pointer-events:auto;opacity:1}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__language,.docs-code-preview:hover .docs-code-preview__language{opacity:0}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__copy,.docs-code-preview:hover .docs-code-preview__copy{pointer-events:auto;opacity:1}.docs-code-preview__scroller{width:100%;height:100%;min-width:0;min-height:0;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-code-preview__code{width:-webkit-max-content;width:-moz-max-content;width:max-content;margin:0}.docs-code-preview__code,.docs-code-preview__code code.hljs{min-width:100%;min-height:100%;overflow:visible;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa))}.docs-code-preview__code code.hljs{display:block;padding:12px 96px 12px 24px;-webkit-box-sizing:border-box;box-sizing:border-box}";
 //#endregion
 //#region packages/playground/src/core/code-preview/style.ts
 var CODE_PREVIEW_STYLE_ID = "docs-code-preview-style";
@@ -228,11 +228,19 @@ var code_preview_default = /* @__PURE__ */ defineComponent({
 					"title",
 					"aria-label"
 				]),
-				createCommentVNode(" eslint-disable-next-line vue/no-v-html "),
-				createElementVNode("pre", _hoisted_3$6, [createElementVNode("code", {
-					class: "hljs",
-					innerHTML: highlightedCode.value
-				}, null, 8, _hoisted_4$6)])
+				createVNode(unref(Scroller), {
+					class: "docs-code-preview__scroller",
+					"auto-resize": true,
+					native: false,
+					"show-bar": true,
+					height: "100%"
+				}, {
+					default: withCtx(() => [createCommentVNode(" eslint-disable-next-line vue/no-v-html "), createElementVNode("pre", _hoisted_3$6, [createElementVNode("code", {
+						class: "hljs",
+						innerHTML: highlightedCode.value
+					}, null, 8, _hoisted_4$6)])]),
+					_: 1
+				})
 			]);
 		};
 	}
@@ -825,19 +833,120 @@ var resolvePlaygroundTitleId = (title, explicitId = "", isOccupied) => {
 	while (isOccupied(`${base}-${index}`)) index += 1;
 	return `${base}-${index}`;
 };
+//#endregion
+//#region packages/playground/src/core/preview-scroll.ts
+/** iframe 包装成功后挂在 `html` 上，供样式与 auto-height 识别。 */
+var PREVIEW_SCROLL_HTML_CLASS = "docs-playground-preview-scroll";
+/** Scroller 内容节点 class，auto-height 优先测量该节点。 */
+var PREVIEW_SCROLL_CONTENT_CLASS = "docs-playground-preview-scroll__content";
+/** 重评时先清掉 html class，避免 `await import` 期间仍套用 `height:100%`。 */
+var PREVIEW_SCROLL_RESET_CODE = `document.documentElement.classList.remove("${PREVIEW_SCROLL_HTML_CLASS}");`;
+/** 动态探测 `@deot/vc`；失败时为空对象，不阻断 DocsLink / 预览挂载。 */
+var PREVIEW_SCROLLER_IMPORT_CODE = "const __docsVc=await import(\"@deot/vc\").catch(()=>({}))";
+/**
+* Vue 的 `mount` 闭包的是 `createApp(root)` 时的根组件，改 `app._component` 不会生效。
+* 因此劫持 `app.mount`：等全部 useCode 注册完后，再 `createApp` 包一层 Scroller。
+* 前导分号避免接在 `app.component(...)` 后被 ASI 解析成调用返回值。
+*/
+var PREVIEW_SCROLLER_USE_CODE = [
+	";(()=>{",
+	PREVIEW_SCROLL_RESET_CODE,
+	"const __DocsScroller=__docsVc&&__docsVc.Scroller;",
+	"if(!__DocsScroller)return;",
+	"const UserApp=app._component;",
+	"app.mount=(container,...rest)=>{",
+	"const next=_createApp({",
+	"name:\"DocsPreviewRoot\",",
+	"setup(){return()=>__docsH(__DocsScroller,{",
+	"height:\"100%\",",
+	"native:false,",
+	"autoResize:true,",
+	"showBar:true,",
+	`contentClass:"${PREVIEW_SCROLL_CONTENT_CLASS}"`,
+	"},{default:()=>__docsH(UserApp)})}",
+	"});",
+	"next.config.errorHandler=app.config.errorHandler;",
+	"if(app._context&&next._context){",
+	"if(app._context.components)Object.assign(next._context.components,app._context.components);",
+	"if(app._context.directives)Object.assign(next._context.directives,app._context.directives);",
+	"Object.assign(next._context.provides,app._context.provides);",
+	"next._context.mixins.push(...app._context.mixins);",
+	"}",
+	"window.__app__=next;",
+	`document.documentElement.classList.add("${PREVIEW_SCROLL_HTML_CLASS}");`,
+	"return next.mount(container,...rest)",
+	"}",
+	"})()"
+].join("");
+var PREVIEW_SCROLLER_STYLE = [
+	`html.${PREVIEW_SCROLL_HTML_CLASS},`,
+	`html.${PREVIEW_SCROLL_HTML_CLASS} body,`,
+	`html.${PREVIEW_SCROLL_HTML_CLASS} #app{`,
+	"height:100%;min-height:100%;margin:0;overflow:hidden",
+	"}",
+	`html.${PREVIEW_SCROLL_HTML_CLASS} #app>.vc-scroller,`,
+	`html.${PREVIEW_SCROLL_HTML_CLASS} #app>.vc-scroller>.vc-scroller__wrapper{`,
+	"height:100%;max-height:100%;box-sizing:border-box",
+	"}"
+].join("");
 var resolveSandboxContainer = (sandbox) => sandbox?.container ? unref(sandbox.container) : null;
+var resolveScrollContent = (iframeDocument) => {
+	if (!iframeDocument.documentElement.classList.contains("docs-playground-preview-scroll")) return null;
+	return iframeDocument.querySelector(`.${PREVIEW_SCROLL_CONTENT_CLASS}`);
+};
 var useSandboxAutoHeight = (sandboxRef) => {
 	const height = ref(24);
 	let container = null;
 	let iframe = null;
 	let containerObserver = null;
 	let contentObserver = null;
+	let scrollMountObserver = null;
+	let observedScrollNode = null;
 	let frameId = 0;
 	const cancelMeasure = () => {
 		if (!frameId) return;
 		cancelAnimationFrame(frameId);
 		frameId = 0;
 	};
+	const measureDocumentContent = (iframeWindow, iframeDocument) => {
+		const { body, documentElement } = iframeDocument;
+		const bodyStyle = iframeWindow.getComputedStyle(body);
+		const bodyMargins = (Number.parseFloat(bodyStyle.marginTop) || 0) + (Number.parseFloat(bodyStyle.marginBottom) || 0);
+		const rootTop = documentElement.getBoundingClientRect().top;
+		const bodyRect = body.getBoundingClientRect();
+		const collapsedTop = Math.max(0, bodyRect.top - rootTop);
+		let childrenBottom = 0;
+		for (const child of body.children) {
+			if (iframeWindow.getComputedStyle(child).position === "fixed") continue;
+			const rect = child.getBoundingClientRect();
+			const marginBottom = Number.parseFloat(iframeWindow.getComputedStyle(child).marginBottom) || 0;
+			childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
+		}
+		const scrollHeight = Math.max(body.scrollHeight, documentElement.scrollHeight);
+		const overflowingHeight = scrollHeight > (iframe?.clientHeight || 0) + 1 ? scrollHeight : 0;
+		return Math.ceil(Math.max(body.offsetHeight + bodyMargins + collapsedTop, bodyRect.height + bodyMargins + collapsedTop, childrenBottom, overflowingHeight));
+	};
+	const measureScrollContent = (scrollContent) => {
+		const contentStyle = scrollContent.ownerDocument.defaultView?.getComputedStyle(scrollContent);
+		const margins = contentStyle ? (Number.parseFloat(contentStyle.marginTop) || 0) + (Number.parseFloat(contentStyle.marginBottom) || 0) : 0;
+		let childrenBottom = 0;
+		const rootTop = scrollContent.getBoundingClientRect().top;
+		for (const child of scrollContent.children) {
+			const rect = child.getBoundingClientRect();
+			const marginBottom = Number.parseFloat(scrollContent.ownerDocument.defaultView?.getComputedStyle(child).marginBottom || "0") || 0;
+			childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
+		}
+		return Math.ceil(Math.max(scrollContent.scrollHeight + margins, scrollContent.offsetHeight + margins, childrenBottom + margins));
+	};
+	const isPendingPreviewApp = (iframeDocument) => {
+		const app = iframeDocument.getElementById("app");
+		return app ? app.childElementCount === 0 : !!iframe?.srcdoc;
+	};
+	const releaseBootstrapHeight = (target) => {
+		nextTick(() => {
+			if (iframe === target) target.style.height = "100%";
+		});
+	};
 	const measure = () => {
 		frameId = 0;
 		if (!iframe) return;
@@ -845,23 +954,12 @@ var useSandboxAutoHeight = (sandboxRef) => {
 			const iframeWindow = iframe.contentWindow;
 			const iframeDocument = iframe.contentDocument;
 			if (!iframeWindow || !iframeDocument?.body) return;
-			const { body, documentElement } = iframeDocument;
-			const bodyStyle = iframeWindow.getComputedStyle(body);
-			const bodyMargins = (Number.parseFloat(bodyStyle.marginTop) || 0) + (Number.parseFloat(bodyStyle.marginBottom) || 0);
-			const rootTop = documentElement.getBoundingClientRect().top;
-			const bodyRect = body.getBoundingClientRect();
-			const collapsedTop = Math.max(0, bodyRect.top - rootTop);
-			let childrenBottom = 0;
-			for (const child of body.children) {
-				const rect = child.getBoundingClientRect();
-				const marginBottom = Number.parseFloat(iframeWindow.getComputedStyle(child).marginBottom) || 0;
-				childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
-			}
-			const scrollHeight = Math.max(body.scrollHeight, documentElement.scrollHeight);
-			const overflowingHeight = scrollHeight > iframe.clientHeight + 1 ? scrollHeight : 0;
-			const contentHeight = Math.ceil(Math.max(body.offsetHeight + bodyMargins + collapsedTop, bodyRect.height + bodyMargins + collapsedTop, childrenBottom, overflowingHeight));
+			const scrollContent = resolveScrollContent(iframeDocument);
+			if (!scrollContent && isPendingPreviewApp(iframeDocument)) return;
+			const contentHeight = scrollContent ? measureScrollContent(scrollContent) : measureDocumentContent(iframeWindow, iframeDocument);
 			const nextHeight = Math.max(contentHeight, 24);
 			if (height.value !== nextHeight) height.value = nextHeight;
+			releaseBootstrapHeight(iframe);
 		} catch {
 			if (height.value !== 24) height.value = 24;
 		}
@@ -873,6 +971,9 @@ var useSandboxAutoHeight = (sandboxRef) => {
 	const disconnectContent = () => {
 		contentObserver?.disconnect();
 		contentObserver = null;
+		scrollMountObserver?.disconnect();
+		scrollMountObserver = null;
+		observedScrollNode = null;
 		cancelMeasure();
 	};
 	const observeContent = () => {
@@ -890,7 +991,28 @@ var useSandboxAutoHeight = (sandboxRef) => {
 			observer.observe(iframeDocument.documentElement);
 			observer.observe(iframeDocument.body);
 			contentObserver = observer;
-			scheduleMeasure();
+			const attachScrollContent = (node) => {
+				if (!node || !contentObserver) return false;
+				if (observedScrollNode === node) return true;
+				if (observedScrollNode) contentObserver.unobserve(observedScrollNode);
+				observedScrollNode = node;
+				contentObserver.observe(node);
+				return true;
+			};
+			const syncScrollContent = () => {
+				attachScrollContent(resolveScrollContent(iframeDocument));
+				scheduleMeasure();
+			};
+			scrollMountObserver = new MutationObserver(syncScrollContent);
+			scrollMountObserver.observe(iframeDocument.documentElement, {
+				attributes: true,
+				attributeFilter: ["class"]
+			});
+			scrollMountObserver.observe(iframeDocument.body, {
+				childList: true,
+				subtree: true
+			});
+			syncScrollContent();
 		} catch {
 			if (height.value !== 24) height.value = 24;
 		}
@@ -906,7 +1028,7 @@ var useSandboxAutoHeight = (sandboxRef) => {
 			return;
 		}
 		iframe.addEventListener("load", handleIframeLoad);
-		iframe.style.height = "100%";
+		iframe.style.height = `${Math.max(window.innerHeight, 24)}px`;
 		observeContent();
 	};
 	const syncIframe = () => setIframe(container?.querySelector("iframe") || null);
@@ -934,6 +1056,12 @@ var useSandboxAutoHeight = (sandboxRef) => {
 	});
 	return height;
 };
+var resolvePreviewBoxHeight = (contentHeight, verticalInset = 0, borderWidth = 1) => {
+	const content = Number.isFinite(contentHeight) ? Math.max(0, contentHeight) : 0;
+	const inset = Number.isFinite(verticalInset) ? Math.max(0, verticalInset) : 0;
+	const border = Number.isFinite(borderWidth) ? Math.max(0, borderWidth) : 1;
+	return content + inset * 2 + border * 2;
+};
 var CLIPPING_OVERFLOW = /* @__PURE__ */ new Set([
 	"auto",
 	"scroll",
@@ -1250,6 +1378,73 @@ var useSandboxTheme = (sandboxRef) => {
 	});
 };
 //#endregion
+//#region packages/playground/src/core/runtime/height-bridge.ts
+/**
+* 只接收本宿主当前 iframe 的高度请求，应用重评时切换会话。
+* @param sandbox 预览容器。
+* @param maxHeight 当前可用高度，普通预览默认不限制。
+* @returns 所有有效请求的最大高度。
+*/
+function usePreviewHeightBridge(sandbox, maxHeight = () => Infinity) {
+	const height = ref(0);
+	const requests = /* @__PURE__ */ new Map();
+	let source = null;
+	let session = "";
+	let disposed = false;
+	const sync = () => {
+		height.value = Math.max(0, ...requests.values());
+	};
+	const reset = () => {
+		requests.clear();
+		session = "";
+		source = null;
+		sync();
+	};
+	const handleMessage = async (event) => {
+		const iframe = resolveSandboxContainer(sandbox.value)?.querySelector("iframe");
+		const data = event.data;
+		if (!iframe?.contentWindow || event.source !== iframe.contentWindow || data?.action !== "docs:height" || typeof data.session !== "string") return;
+		if (data.operation === "start") {
+			reset();
+			source = iframe.contentWindow;
+			session = data.session;
+			return;
+		}
+		if (source !== iframe.contentWindow || session !== data.session) return;
+		if (data.operation === "stop") {
+			reset();
+			return;
+		}
+		if (!Number.isSafeInteger(data.id) || data.id <= 0) return;
+		if (data.operation === "release") {
+			requests.delete(data.id);
+			sync();
+			return;
+		}
+		if (data.operation !== "enable" || !Number.isFinite(data.height) || data.height <= 0) return;
+		const accepted = data.height <= maxHeight();
+		if (accepted) requests.set(data.id, data.height);
+		sync();
+		const receiver = source;
+		await nextTick();
+		if (disposed || source !== receiver || session !== data.session) return;
+		receiver?.postMessage({
+			action: "docs:height:applied",
+			session,
+			id: data.id,
+			accepted
+		}, "*");
+	};
+	watch(() => resolveSandboxContainer(sandbox.value), reset, { flush: "sync" });
+	if (typeof window !== "undefined") window.addEventListener("message", handleMessage);
+	onBeforeUnmount(() => {
+		disposed = true;
+		if (typeof window !== "undefined") window.removeEventListener("message", handleMessage);
+		reset();
+	});
+	return height;
+}
+//#endregion
 //#region packages/playground/src/core/runtime/toolbar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$3 = { class: "docs-playground__tools" };
 var _hoisted_2$3 = {
@@ -1494,7 +1689,9 @@ var BUILTIN_IMPORT_ASSETS = {
 	"@deot/helper": "@deot/helper/dist/index.js",
 	"normalize-wheel": "normalize-wheel-es/dist/index.mjs",
 	"photoswipe": "photoswipe/dist/photoswipe.esm.js",
-	"photoswipe/lightbox": "photoswipe/dist/photoswipe-lightbox.esm.js"
+	"photoswipe/lightbox": "photoswipe/dist/photoswipe-lightbox.esm.js",
+	"vue": "vue/dist/vue.runtime.esm-browser.js",
+	"vue/server-renderer": "vue/dist/server-renderer.esm-browser.js"
 };
 var normalizeCdnURL = (cdnURL = DEFAULT_CDN_URL) => {
 	return cdnURL.trim().replace(/\/+$/u, "") || "https://cdn.jsdelivr.net/npm";
@@ -1505,9 +1702,7 @@ var SASS_CDN_URL = jsdelivrEsmURL("sass/+esm");
 var cdnAsset = (cdnURL, asset) => cdnJoin(normalizeCdnURL(cdnURL), asset);
 var createBuiltinImports = (cdnURL = DEFAULT_CDN_URL) => ({
 	...Object.fromEntries(Object.entries(BUILTIN_IMPORT_ASSETS).map(([specifier, asset]) => [specifier, cdnAsset(cdnURL, asset)])),
-	"lodash-es": jsdelivrEsmURL("lodash-es/+esm"),
-	"vue": "https://play.vuejs.org/vue.runtime.esm-browser.js",
-	"vue/server-renderer": "https://play.vuejs.org/server-renderer.esm-browser.js"
+	"lodash-es": jsdelivrEsmURL("lodash-es/+esm")
 });
 var createBuiltinStyles = (cdnURL = DEFAULT_CDN_URL) => Object.fromEntries(PREVIEW_STYLE_ASSETS.map((asset) => [asset, cdnAsset(cdnURL, asset)]));
 //#endregion
@@ -1587,6 +1782,227 @@ var clearPlaygroundMaps = () => {
 	].forEach((store) => store.set());
 };
 //#endregion
+//#region packages/playground/src/preview-service.ts
+/** Preview iframe 内的高度服务；class 会被序列化到 iframe 执行。 */
+var PlaygroundService = class {
+	target;
+	vue;
+	session;
+	/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
+	sequence = 0;
+	/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
+	disposed = false;
+	manual;
+	/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
+	requests = /* @__PURE__ */ new Set();
+	/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
+	owners = /* @__PURE__ */ new Set();
+	/**
+	* @param target 当前预览窗口。
+	* @param vue 与预览应用共用的 Vue 实例。
+	*/
+	/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
+	constructor(target, vue) {
+		this.target = target;
+		this.vue = vue;
+		this.session = `${Date.now()}-${Math.random()}`;
+		this.dispose = this.dispose.bind(this);
+		this.post("start");
+		this.target.addEventListener("pagehide", this.dispose);
+	}
+	/**
+	* 申请手动临时高度；新请求会替换上一个手动请求。
+	* @param height iframe 最小高度。
+	* @returns iframe 是否在超时前应用目标高度。
+	*/
+	enable(height) {
+		this.validateHeight(height);
+		this.manual?.release();
+		this.manual = this.createRequest(height);
+		return this.manual.ready;
+	}
+	/** 释放手动临时高度，不影响 `run` 创建的请求。 */
+	disable() {
+		this.manual?.release();
+		this.manual = void 0;
+	}
+	/**
+	* 创建等待高度后执行的事件处理函数。
+	* @param height iframe 最小高度。
+	* @param optionsOrHandler 可见状态配置，或最后一个 handler。
+	* @param lastHandler 使用配置时的最后一个 handler。
+	* @returns 保留 handler 参数和结果的异步事件处理函数。
+	*/
+	run(height, optionsOrHandler, lastHandler) {
+		this.validateHeight(height);
+		if (optionsOrHandler === void 0) return (visible) => {
+			if (visible) return this.enable(height);
+			this.disable();
+			return Promise.resolve(void 0);
+		};
+		const visible = (typeof optionsOrHandler === "function" ? {} : optionsOrHandler).visible;
+		if (visible !== void 0 && !this.vue.isRef(visible) && typeof visible !== "function") throw new TypeError("Playground visible must be a ref or getter");
+		const handler = typeof optionsOrHandler === "function" ? optionsOrHandler : lastHandler ?? (this.vue.isRef(visible) ? () => {
+			visible.value = true;
+		} : void 0);
+		if (typeof handler !== "function") throw new TypeError("Playground run requires a handler");
+		let ownerDisposed = false;
+		let current;
+		let pending;
+		const disposeOwner = () => {
+			ownerDisposed = true;
+			current?.release();
+			this.owners.delete(disposeOwner);
+		};
+		this.owners.add(disposeOwner);
+		if (this.vue.getCurrentScope()) this.vue.onScopeDispose(disposeOwner);
+		return (...args) => {
+			if (this.disposed || ownerDisposed) return Promise.resolve(void 0);
+			if (pending) return pending;
+			const request = current = this.createRequest(height);
+			let executionFinished = false;
+			const unlock = () => {
+				if (executionFinished && request.released && current === request) {
+					pending = void 0;
+					current = void 0;
+				}
+			};
+			request.closed.then(unlock);
+			const execution = (async () => {
+				try {
+					if (!await request.ready || ownerDisposed || this.disposed) return void 0;
+					if (visible) request.watch(visible);
+					const result = await handler(...args);
+					if (!visible || !this.vue.toValue(visible)) request.release();
+					return result;
+				} catch (error) {
+					request.release();
+					throw error;
+				} finally {
+					executionFinished = true;
+					unlock();
+				}
+			})();
+			pending = execution;
+			return execution;
+		};
+	}
+	/** 释放当前预览应用持有的全部高度和监听。 */
+	/* istanbul ignore next -- 注入测试会从序列化后的 iframe class 调用该方法。 */
+	dispose() {
+		if (this.disposed) return;
+		this.disposed = true;
+		for (const disposeOwner of this.owners) disposeOwner();
+		for (const request of this.requests) request.release();
+		this.post("stop");
+		this.target.removeEventListener("pagehide", this.dispose);
+		if (this.target.$docsPlayground === this) delete this.target.$docsPlayground;
+	}
+	/** @param height iframe 最小高度。 */
+	validateHeight(height) {
+		if (!Number.isFinite(height) || height <= 0) throw new TypeError("Playground height must be a positive finite number");
+	}
+	/**
+	* @param operation 请求操作。
+	* @param id 请求标识。
+	* @param height iframe 最小高度。
+	*/
+	/* istanbul ignore next -- 构造和销毁时会从序列化后的 iframe class 调用该方法。 */
+	post(operation, id = 0, height = 0) {
+		this.target.parent.postMessage({
+			action: "docs:height",
+			session: this.session,
+			operation,
+			id,
+			height
+		}, "*");
+	}
+	/**
+	* @param height iframe 最小高度。
+	* @returns 内部等待与释放句柄。
+	*/
+	createRequest(height) {
+		this.validateHeight(height);
+		const id = ++this.sequence;
+		let released = false;
+		let settled = false;
+		let frame = 0;
+		let timer = 0;
+		let stopWatch;
+		let resolveReady;
+		let resolveClosed;
+		const ready = new Promise((resolve) => {
+			resolveReady = resolve;
+		});
+		const closed = new Promise((resolve) => {
+			resolveClosed = resolve;
+		});
+		const stopWaiting = () => {
+			this.target.cancelAnimationFrame(frame);
+			if (timer) {
+				this.target.clearTimeout(timer);
+				timer = 0;
+			}
+			this.target.removeEventListener("message", onMessage);
+		};
+		const release = () => {
+			if (released) return;
+			released = true;
+			stopWaiting();
+			stopWatch?.();
+			resolveReady(false);
+			resolveClosed();
+			this.requests.delete(request);
+			this.post("release", id);
+		};
+		const check = () => {
+			if (released) return;
+			if (this.target.innerHeight >= height) {
+				settled = true;
+				stopWaiting();
+				resolveReady(true);
+			} else frame = this.target.requestAnimationFrame(check);
+		};
+		const onMessage = (event) => {
+			const data = event.data;
+			if (event.source !== this.target.parent || data?.action !== "docs:height:applied" || data.session !== this.session || data.id !== id || settled) return;
+			if (!data.accepted) release();
+			else check();
+		};
+		const request = {
+			ready,
+			closed,
+			get released() {
+				return released;
+			},
+			release,
+			watch: (visible) => {
+				stopWatch = this.vue.watch(() => this.vue.toValue(visible), (value) => {
+					if (!value) release();
+				}, { flush: "sync" });
+			}
+		};
+		this.requests.add(request);
+		if (this.disposed) release();
+		else {
+			this.target.addEventListener("message", onMessage);
+			timer = this.target.setTimeout(() => {
+				timer = 0;
+				release();
+			}, 2e3);
+			this.post("enable", id, height);
+		}
+		return request;
+	}
+};
+var PREVIEW_SERVICE_IMPORT_CODE = "import * as __docsPreviewVue from \"vue\"";
+var PREVIEW_SERVICE_USE_CODE = [
+	`;const __docsPlayground=new (${PlaygroundService.toString()})(window,__docsPreviewVue);`,
+	"app.provide(\"docs:playground\",__docsPlayground);",
+	"window.$docsPlayground=__docsPlayground;",
+	"app.mixin({beforeUnmount(){if(this===this.$root)__docsPlayground.dispose()}});"
+].join("");
+//#endregion
 //#region packages/playground/src/core/scss.ts
 var SCHEME = "docs-playground";
 var STYLE_EXTS = [".scss", ".sass"];
@@ -1803,6 +2219,7 @@ var bindPlaygroundScss = (store) => {
 //#region packages/playground/src/core/store.ts
 var DOCS_LINK_IMPORT_CODE = "import { h as __docsH } from \"vue\"";
 var DOCS_LINK_USE_CODE = [
+	PREVIEW_SCROLL_RESET_CODE,
 	"app.component(\"DocsLink\",{",
 	"props:{to:{type:String,default:\"\"}},",
 	"setup(props,{slots}){return()=>__docsH(\"a\",{",
@@ -1819,26 +2236,32 @@ var escapeHtmlAttr = (value) => value.replace(/&/gu, "&amp;").replace(/"/gu, "&q
 * `--vc-background-color-light` 不同，否则会出现色带割裂。
 */
 var PLAYGROUND_RUNTIME_CANVAS_BACKGROUND = "var(--vc-background-color-light, var(--docs-background-color, #fff))";
-var createRuntimePreviewOptions = (cdnURL = DEFAULT_CDN_URL) => {
+var createRuntimePreviewOptions = (cdnURL = DEFAULT_CDN_URL, options = {}) => {
+	const previewScroller = options.previewScroller === true;
+	const hrefs = Object.values({
+		...createBuiltinStyles(cdnURL),
+		...getPlaygroundSiteStyles(),
+		...getPlaygroundStyleOverrides()
+	});
+	const styleBlocks = [
+		`html,body{height:auto;min-height:0;background:${PLAYGROUND_RUNTIME_CANVAS_BACKGROUND}}`,
+		"body{color:var(--vc-foreground-color,#080f20)}",
+		...previewScroller ? [PREVIEW_SCROLLER_STYLE] : []
+	];
 	return {
 		showRuntimeError: false,
 		showRuntimeWarning: false,
 		headHTML: [
 			SANDBOX_RUNTIME_ERROR_CAPTURE_HTML,
 			"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
-			...Object.values({
-				...createBuiltinStyles(cdnURL),
-				...getPlaygroundSiteStyles(),
-				...getPlaygroundStyleOverrides()
-			}).map((href) => `<link rel="stylesheet" href="${escapeHtmlAttr(href)}">`),
+			...hrefs.map((href) => `<link rel="stylesheet" href="${escapeHtmlAttr(href)}">`),
 			"<style>",
-			`html,body{height:auto;min-height:0;background:${PLAYGROUND_RUNTIME_CANVAS_BACKGROUND}}`,
-			"body{color:var(--vc-foreground-color,#080f20)}",
+			...styleBlocks,
 			"</style>"
 		].join("\n"),
 		customCode: {
-			importCode: DOCS_LINK_IMPORT_CODE,
-			useCode: DOCS_LINK_USE_CODE
+			importCode: `${DOCS_LINK_IMPORT_CODE}\n${PREVIEW_SERVICE_IMPORT_CODE}`,
+			useCode: `${DOCS_LINK_USE_CODE}\n${PREVIEW_SERVICE_USE_CODE}`
 		}
 	};
 };
@@ -1919,6 +2342,8 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 		const { t } = useLocale();
 		const currentViewport = ref(props.viewport);
 		const sandboxRef = ref(null);
+		const availableHeight = () => Math.max(0, getWindowInnerSize().height - 40 - 44);
+		const temporaryHeight = usePreviewHeightBridge(sandboxRef, availableHeight);
 		const sandboxKey = ref(0);
 		const layoutTick = ref(0);
 		const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
@@ -1930,7 +2355,16 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 		});
 		const layout = computed(() => {
 			layoutTick.value;
-			return resolvePopupLayout(currentViewport.value);
+			const base = resolvePopupLayout(currentViewport.value);
+			if (!temporaryHeight.value) return base;
+			const canvasHeight = Math.min(availableHeight(), Math.max(base.canvasHeight, temporaryHeight.value));
+			const shellHeight = Math.max(base.shellHeight, canvasHeight + 44);
+			return {
+				...base,
+				canvasHeight,
+				shellHeight,
+				bodyHeight: shellHeight - 44
+			};
 		});
 		const shellStyle = computed(() => ({
 			width: `${layout.value.shellWidth}px`,
@@ -2091,6 +2525,10 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		options: {},
 		previewInset: { default: 10 },
 		previewOptions: {},
+		previewScroller: {
+			type: Boolean,
+			default: false
+		},
 		styleless: {
 			type: Boolean,
 			default: false
@@ -2124,7 +2562,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const joinCode = (...values) => values.filter(Boolean).join("\n");
 		const mergePreviewOptions = (extraHeadHTML) => {
-			const runtimePreviewOptions = createRuntimePreviewOptions(props.options.cdnURL);
+			const runtimePreviewOptions = createRuntimePreviewOptions(props.options.cdnURL, { previewScroller: props.previewScroller });
 			return {
 				...runtimePreviewOptions,
 				...props.previewOptions,
@@ -2134,8 +2572,8 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 					extraHeadHTML
 				].filter(Boolean).join("\n"),
 				customCode: {
-					importCode: joinCode(runtimePreviewOptions.customCode?.importCode, props.previewOptions?.customCode?.importCode),
-					useCode: joinCode(runtimePreviewOptions.customCode?.useCode, props.previewOptions?.customCode?.useCode)
+					importCode: joinCode(runtimePreviewOptions.customCode?.importCode, props.previewOptions?.customCode?.importCode, props.previewScroller ? PREVIEW_SCROLL_RESET_CODE : void 0, props.previewScroller ? PREVIEW_SCROLLER_IMPORT_CODE : void 0),
+					useCode: joinCode(runtimePreviewOptions.customCode?.useCode, props.previewOptions?.customCode?.useCode, props.previewScroller ? PREVIEW_SCROLLER_USE_CODE : void 0)
 				}
 			};
 		};
@@ -2151,6 +2589,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		const copyValue = computed(() => props.files[props.entry] || "");
 		const store = createRuntimeStore(props.files, props.entry, props.options);
 		const sandboxRef = ref(null);
+		const temporaryHeight = usePreviewHeightBridge(sandboxRef);
 		const sandboxKey = ref(0);
 		const runtimeHeight = useSandboxAutoHeight(sandboxRef);
 		const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
@@ -2178,13 +2617,21 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 			const error = root.querySelector(".docs-playground__runtime-error");
 			return (header instanceof HTMLElement ? header.offsetHeight : 0) + (error instanceof HTMLElement ? error.offsetHeight : 0);
 		};
+		const normalizedPreviewInset = computed(() => {
+			const value = props.previewInset;
+			if (typeof value === "number") return Number.isFinite(value) && value >= 0 ? [value, value] : [10, 10];
+			if (Array.isArray(value) && value.length === 2 && value.every((item) => typeof item === "number" && Number.isFinite(item) && item >= 0)) return [value[0], value[1]];
+			return [10, 10];
+		});
 		const measureExpandedPreviewHeight = () => {
 			if (typeof window === "undefined") return runtimeHeight.value;
 			const chromeHeight = measurePreviewChromeHeight();
+			const viewport = getVisibleViewportRect(runtimeRoot.value);
+			const [vertical] = normalizedPreviewInset.value;
 			return resolveExpandedPreviewHeight(true, resolveRemainingPreviewHeight({
-				viewportHeight: getVisibleViewportRect(runtimeRoot.value).height,
+				viewportHeight: viewport.height,
 				chromeHeight
-			}));
+			}) - vertical * 2 - 2);
 		};
 		const syncFrozenExpandedHeight = () => {
 			if (!previewExpanded.value || props.expandable !== true) return;
@@ -2196,13 +2643,14 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		}
 		const canExpandPreview = computed(() => !props.styleless && isPlaygroundExpandable(props.expandable));
 		const expandLabel = computed(() => t(previewExpanded.value ? "playground.runtime.collapsePreview" : "playground.runtime.expandPreview"));
-		const desiredViewportHeight = computed(() => {
+		const baseViewportHeight = computed(() => {
 			if (previewExpanded.value && props.expandable === true) return frozenExpandedHeight.value;
 			if (previewExpanded.value && isPlaygroundExpandable(props.expandable)) return resolveExpandedPreviewHeight(props.expandable, 0);
 			const fixedHeight = getViewportHeight(props.viewport);
 			if (fixedHeight) return fixedHeight;
 			return runtimeHeight.value;
 		});
+		const desiredViewportHeight = computed(() => Math.max(baseViewportHeight.value, temporaryHeight.value));
 		const scrollExpandedPreviewIntoView = () => {
 			scrollPlaygroundToViewportStart(runtimeRoot.value);
 		};
@@ -2224,16 +2672,10 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				frozenExpandedHeight.value = 0;
 			}
 		});
-		const normalizedPreviewInset = computed(() => {
-			const value = props.previewInset;
-			if (typeof value === "number") return Number.isFinite(value) && value >= 0 ? [value, value] : [10, 10];
-			if (Array.isArray(value) && value.length === 2 && value.every((item) => typeof item === "number" && Number.isFinite(item) && item >= 0)) return [value[0], value[1]];
-			return [10, 10];
-		});
 		const previewStyle = computed(() => {
 			const [vertical, horizontal] = normalizedPreviewInset.value;
 			return {
-				height: `${desiredViewportHeight.value + vertical * 2}px`,
+				height: `${resolvePreviewBoxHeight(desiredViewportHeight.value, vertical)}px`,
 				padding: vertical === horizontal ? `${vertical}px` : `${vertical}px ${horizontal}px`,
 				background: PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
 			};
@@ -2446,6 +2888,10 @@ var playground_default = /* @__PURE__ */ defineComponent({
 		expandable: { type: [Boolean, Number] },
 		title: { default: "" },
 		id: { default: "" },
+		previewScroller: {
+			type: Boolean,
+			default: false
+		},
 		previewOptions: {},
 		locale: {}
 	},
@@ -2603,6 +3049,7 @@ var playground_default = /* @__PURE__ */ defineComponent({
 				options: __props.options,
 				"preview-options": __props.previewOptions,
 				"preview-inset": __props.previewInset,
+				"preview-scroller": __props.previewScroller,
 				expandable: __props.expandable,
 				styleless: true,
 				title: __props.title,
@@ -2618,6 +3065,7 @@ var playground_default = /* @__PURE__ */ defineComponent({
 				"options",
 				"preview-options",
 				"preview-inset",
+				"preview-scroller",
 				"expandable",
 				"title",
 				"id",
@@ -2670,6 +3118,7 @@ var playground_default = /* @__PURE__ */ defineComponent({
 					options: __props.options,
 					"preview-options": __props.previewOptions,
 					"preview-inset": __props.previewInset,
+					"preview-scroller": __props.previewScroller,
 					expandable: __props.expandable,
 					"hide-chrome": true,
 					title: __props.title,
@@ -2687,6 +3136,7 @@ var playground_default = /* @__PURE__ */ defineComponent({
 					"options",
 					"preview-options",
 					"preview-inset",
+					"preview-scroller",
 					"expandable",
 					"title",
 					"id",
@@ -2715,4 +3165,4 @@ var playground_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { code_preview_default as CodePreview, DEFAULT_CDN_URL, Editor, playground_default as Playground, applyPlaygroundImportMapOverride, applyPlaygroundStyleOverride, clearPlaygroundMaps, createBuiltinImports, createBuiltinStyles, createRuntimePreviewOptions, getPlaygroundImportMapOverrides, getPlaygroundSiteModules, getPlaygroundSiteStyles, getPlaygroundStyleOverrides, highlightCode, highlightCodeByLanguage, isSafePlaygroundHref, normalizeCdnURL, registerVueHighlight, removePlaygroundImportMapOverride, removePlaygroundStyleOverride, resolveHighlightLanguage, resolvePlaygroundTitleId, setPlaygroundImportMapOverrides, setPlaygroundSiteModules, setPlaygroundSiteStyles, setPlaygroundStyleOverrides, slugifyPlaygroundTitle, vueHighlight };
+export { code_preview_default as CodePreview, DEFAULT_CDN_URL, Editor, PREVIEW_SCROLLER_USE_CODE, PREVIEW_SCROLL_CONTENT_CLASS, PREVIEW_SCROLL_HTML_CLASS, playground_default as Playground, PlaygroundService, applyPlaygroundImportMapOverride, applyPlaygroundStyleOverride, clearPlaygroundMaps, createBuiltinImports, createBuiltinStyles, createRuntimePreviewOptions, getPlaygroundImportMapOverrides, getPlaygroundSiteModules, getPlaygroundSiteStyles, getPlaygroundStyleOverrides, highlightCode, highlightCodeByLanguage, isSafePlaygroundHref, normalizeCdnURL, registerVueHighlight, removePlaygroundImportMapOverride, removePlaygroundStyleOverride, resolveHighlightLanguage, resolvePlaygroundTitleId, setPlaygroundImportMapOverrides, setPlaygroundSiteModules, setPlaygroundSiteStyles, setPlaygroundStyleOverrides, slugifyPlaygroundTitle, vueHighlight };