@deot/docs-playground 1.1.1 → 1.1.2

package/README.md

@@ -70,6 +70,66 @@ const files = ref({
 
 Playground 只接受来自自身 iframe 的导航消息。宿主应用应监听 `navigate` 并交给自己的 Router 处理。
 
+## 预览内的临时高度
+
+Playground 会在预览应用中注入 `docs:playground`，也可通过 iframe 内的 `window.$docsPlayground` 访问同一服务。适用于 ActionSheet、Modal、Drawer、Message 等依赖视口高度的示例，无需自行撑高 DOM 或轮询 `window.innerHeight`。
+
+```ts
+import { inject, ref } from 'vue';
+import type { PlaygroundService } from '@deot/docs-playground';
+
+const playground = inject<PlaygroundService>('docs:playground')!;
+const visible = ref(false);
+
+// 定义时不执行，点击后先等待高度就绪，再打开弹层；visible 关闭时恢复。
+// visible 是 ref 且省略 handler 时，默认执行 visible.value = true。
+const handleOpen = playground.run(560, { visible });
+
+// 也可生成 boolean 状态处理函数：true 扩展高度，false 恢复高度。
+const handleVisibleChange = playground.run(560);
+
+// 支持 getter 和 computed；不能传入普通 boolean 快照。
+const openDrawer = playground.run(560, { visible: () => state.drawerVisible }, () => {
+	state.drawerVisible = true;
+});
+
+// 回调返回的 Promise 表示弹层关闭时，可省略 options。
+const openActionSheet = playground.run(560, async () => {
+	await MActionSheet.open({ title: '请选择操作' });
+});
+```
+
+`run(height)`、`run(height, handler)` 和 `run(height, options, handler)` 均返回事件处理函数。传入 handler 时会透传调用参数和回调结果，最后一个参数始终为 handler。`options` 当前只包含 `visible?: Ref<boolean> | (() => boolean)`；传入可写 `Ref<boolean>` 时可以省略 handler，默认将其设为 `true`。getter 和只读 computed 需要显式 handler。示例中的 `state`、`MActionSheet` 由业务代码提供。
+
+| 接口 | 行为 |
+| --- | --- |
+| `enable(height): Promise<boolean>` | 设置手动临时高度，等待 iframe 实际高度达到要求后返回 `true`。连续调用替换旧的手动请求。 |
+| `disable(): void` | 释放手动请求；重复调用无副作用，不影响 `run` 的请求。 |
+| `run(height)` | 返回 boolean 事件处理函数；收到 `true` 时调用 `enable(height)`，收到 `false` 时调用 `disable()`。 |
+| `run(height, handler)` | 等待高度后执行；同步返回或 Promise 完成时恢复高度，异常也恢复并继续抛出。 |
+| `run(height, { visible: ref })` | 等待高度后默认执行 `visible.value = true`，并在状态关闭时恢复高度。 |
+| `run(height, { visible }, handler)` | 执行前监听状态，关闭时恢复；回调完成后未打开或回调抛错时也释放。异步打开流程应由回调返回的 Promise 覆盖。 |
+
+同一个 `run` 返回函数在回调与弹层均结束前会复用当前 Promise，避免重复点击打开；不同函数的请求独立管理并取最大高度。Message / Toast 等立即返回的 API 应通过 `visible` 或关闭回调恢复高度，不能把函数返回当成弹层关闭。
+
+```ts
+const handleMessage = async () => {
+	if (!await playground.enable(240)) return;
+	try {
+		Message.info({ content: '已保存', onClose: () => playground.disable() });
+	} catch (error) {
+		playground.disable();
+		throw error;
+	}
+};
+```
+
+高度为正有限 CSS px，表示 iframe 内部可视高度，不包含 `previewInset` 与边框。普通预览取原有高度与临时请求的最大值，释放后恢复当前视口规则；独立窗口受可用屏幕空间限制。等待超时（2 秒）、取消或空间不足时返回 `false`；`run` 在这些情况下不执行回调并返回 `undefined`。
+
+在 `setup` 中创建的 `run` 会随当前 Vue scope 自动取消等待、移除监听并释放高度；其他位置创建时绑定预览应用。手动 `enable/disable` 绑定整个预览应用，子组件单独卸载时按需自行 `disable()`。刷新、重新运行及应用卸载会统一释放请求。服务不取消已经启动的业务任务，也不调用组件的 `destroy()`；示例保留必要的业务 `onUnmounted`，只需删除高度等待使用的 `disposed` 标记。
+
+类型导出为 `PlaygroundService`、`PlaygroundRunOptions` 和 `PlaygroundWindow`。Window 类型可通过 `(window as PlaygroundWindow).$docsPlayground` 显式使用；服务仅存在于 Playground 预览应用，不向普通页面声明必然存在的全局变量。接入项目需使用包含该接口的新版 Playground。
+
 ## 其他公共导出
 
 | 导出 | 说明 |

package/dist/index.cjs

@@ -896,6 +896,8 @@ var PREVIEW_SCROLLER_USE_CODE = [
 	"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}");`,
@@ -942,6 +944,7 @@ var useSandboxAutoHeight = (sandboxRef) => {
 		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);
@@ -962,9 +965,14 @@ var useSandboxAutoHeight = (sandboxRef) => {
 		}
 		return Math.ceil(Math.max(scrollContent.scrollHeight + margins, scrollContent.offsetHeight + margins, childrenBottom + margins));
 	};
-	const isEmptyPreviewApp = (iframeDocument) => {
+	const isPendingPreviewApp = (iframeDocument) => {
 		const app = iframeDocument.getElementById("app");
-		return !!app && app.childElementCount === 0;
+		return app ? app.childElementCount === 0 : !!iframe?.srcdoc;
+	};
+	const releaseBootstrapHeight = (target) => {
+		(0, vue.nextTick)(() => {
+			if (iframe === target) target.style.height = "100%";
+		});
 	};
 	const measure = () => {
 		frameId = 0;
@@ -974,10 +982,11 @@ var useSandboxAutoHeight = (sandboxRef) => {
 			const iframeDocument = iframe.contentDocument;
 			if (!iframeWindow || !iframeDocument?.body) return;
 			const scrollContent = resolveScrollContent(iframeDocument);
-			if (!scrollContent && isEmptyPreviewApp(iframeDocument)) return;
+			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;
 		}
@@ -1046,7 +1055,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);
@@ -1396,6 +1405,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 = (0, vue.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 (0, vue.nextTick)();
+		if (disposed || source !== receiver || session !== data.session) return;
+		receiver?.postMessage({
+			action: "docs:height:applied",
+			session,
+			id: data.id,
+			accepted
+		}, "*");
+	};
+	(0, vue.watch)(() => resolveSandboxContainer(sandbox.value), reset, { flush: "sync" });
+	if (typeof window !== "undefined") window.addEventListener("message", handleMessage);
+	(0, vue.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 = {
@@ -1640,7 +1716,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";
@@ -1651,9 +1729,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
@@ -1733,6 +1809,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"];
@@ -1990,8 +2287,8 @@ var createRuntimePreviewOptions = (cdnURL = DEFAULT_CDN_URL, options = {}) => {
 			"</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}`
 		}
 	};
 };
@@ -2072,6 +2369,8 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const { t } = (0, _deot_docs_locale.useLocale)();
 		const currentViewport = (0, vue.ref)(props.viewport);
 		const sandboxRef = (0, vue.ref)(null);
+		const availableHeight = () => Math.max(0, getWindowInnerSize().height - 40 - 44);
+		const temporaryHeight = usePreviewHeightBridge(sandboxRef, availableHeight);
 		const sandboxKey = (0, vue.ref)(0);
 		const layoutTick = (0, vue.ref)(0);
 		const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
@@ -2083,7 +2382,16 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		const layout = (0, vue.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 = (0, vue.computed)(() => ({
 			width: `${layout.value.shellWidth}px`,
@@ -2294,7 +2602,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					extraHeadHTML
 				].filter(Boolean).join("\n"),
 				customCode: {
-					importCode: joinCode(DOCS_LINK_IMPORT_CODE, props.previewOptions?.customCode?.importCode, props.previewScroller ? PREVIEW_SCROLL_RESET_CODE : void 0, props.previewScroller ? PREVIEW_SCROLLER_IMPORT_CODE : void 0),
+					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)
 				}
 			};
@@ -2311,6 +2619,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const copyValue = (0, vue.computed)(() => props.files[props.entry] || "");
 		const store = createRuntimeStore(props.files, props.entry, props.options);
 		const sandboxRef = (0, vue.ref)(null);
+		const temporaryHeight = usePreviewHeightBridge(sandboxRef);
 		const sandboxKey = (0, vue.ref)(0);
 		const runtimeHeight = useSandboxAutoHeight(sandboxRef);
 		const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
@@ -2364,13 +2673,14 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}
 		const canExpandPreview = (0, vue.computed)(() => !props.styleless && isPlaygroundExpandable(props.expandable));
 		const expandLabel = (0, vue.computed)(() => t(previewExpanded.value ? "playground.runtime.collapsePreview" : "playground.runtime.expandPreview"));
-		const desiredViewportHeight = (0, vue.computed)(() => {
+		const baseViewportHeight = (0, vue.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 = (0, vue.computed)(() => Math.max(baseViewportHeight.value, temporaryHeight.value));
 		const scrollExpandedPreviewIntoView = () => {
 			scrollPlaygroundToViewportStart(runtimeRoot.value);
 		};
@@ -2892,6 +3202,7 @@ exports.PREVIEW_SCROLLER_USE_CODE = PREVIEW_SCROLLER_USE_CODE;
 exports.PREVIEW_SCROLL_CONTENT_CLASS = PREVIEW_SCROLL_CONTENT_CLASS;
 exports.PREVIEW_SCROLL_HTML_CLASS = PREVIEW_SCROLL_HTML_CLASS;
 exports.Playground = playground_default;
+exports.PlaygroundService = PlaygroundService;
 exports.applyPlaygroundImportMapOverride = applyPlaygroundImportMapOverride;
 exports.applyPlaygroundStyleOverride = applyPlaygroundStyleOverride;
 exports.clearPlaygroundMaps = clearPlaygroundMaps;

package/dist/index.d.ts

@@ -7,8 +7,10 @@ import { Language } from '@deot/docs-locale';
 import type { LanguageFn } from 'highlight.js';
 import { Portal } from '@deot/vc';
 import { PublicProps } from 'vue';
+import type { Ref } from 'vue';
 import type { SandboxProps } from '@vue/repl';
 import type { StoreState } from '@vue/repl';
+import { vue } from 'vue';
 
 declare const __VLS_export: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
 language: string;
@@ -187,6 +189,34 @@ export declare type PlaygroundPreviewOptions = SandboxProps['previewOptions'];
 
 export declare type PlaygroundPreviewScroller = boolean;
 
+export declare interface PlaygroundRunOptions {
+    visible?: Ref<boolean> | (() => boolean);
+}
+
+export declare class PlaygroundService {
+    private readonly target;
+    private readonly vue;
+    private readonly session;
+    private sequence;
+    private disposed;
+    private manual?;
+    private readonly requests;
+    private readonly owners;
+    constructor(target: Window, vue: PreviewVue);
+    enable(height: number): Promise<boolean>;
+    disable(): void;
+    run(height: number): (visible: boolean) => Promise<boolean | undefined>;
+    run<Args extends unknown[], Result>(height: number, handler: (...args: Args) => Result): (...args: Args) => Promise<Awaited<Result> | undefined>;
+    run<Args extends unknown[], Result>(height: number, options: PlaygroundRunOptions, handler: (...args: Args) => Result): (...args: Args) => Promise<Awaited<Result> | undefined>;
+    run(height: number, options: PlaygroundRunOptions & {
+        visible: Ref<boolean>;
+    }): () => Promise<void | undefined>;
+    dispose(): void;
+    private validateHeight;
+    private post;
+    private createRequest;
+}
+
 export declare type PlaygroundView = 'runtime' | 'files';
 
 export declare type PlaygroundViewport = 'auto' | number | [width: number, height: number];
@@ -196,12 +226,18 @@ export declare interface PlaygroundViewsProps {
     activeView: PlaygroundView;
 }
 
+export declare interface PlaygroundWindow extends Window {
+    $docsPlayground: PlaygroundService;
+}
+
 export declare const PREVIEW_SCROLL_CONTENT_CLASS = "docs-playground-preview-scroll__content";
 
 export declare const PREVIEW_SCROLL_HTML_CLASS = "docs-playground-preview-scroll";
 
 export declare const PREVIEW_SCROLLER_USE_CODE: string;
 
+declare type PreviewVue = Pick<vue, 'getCurrentScope' | 'onScopeDispose' | 'watch' | 'toValue' | 'isRef'>;
+
 export declare const registerVueHighlight: (api?: HLJSApi) => HLJSApi;
 
 export declare const removePlaygroundImportMapOverride: (alias: string) => {

package/dist/index.js

@@ -869,6 +869,8 @@ var PREVIEW_SCROLLER_USE_CODE = [
 	"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}");`,
@@ -915,6 +917,7 @@ var useSandboxAutoHeight = (sandboxRef) => {
 		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);
@@ -935,9 +938,14 @@ var useSandboxAutoHeight = (sandboxRef) => {
 		}
 		return Math.ceil(Math.max(scrollContent.scrollHeight + margins, scrollContent.offsetHeight + margins, childrenBottom + margins));
 	};
-	const isEmptyPreviewApp = (iframeDocument) => {
+	const isPendingPreviewApp = (iframeDocument) => {
 		const app = iframeDocument.getElementById("app");
-		return !!app && app.childElementCount === 0;
+		return app ? app.childElementCount === 0 : !!iframe?.srcdoc;
+	};
+	const releaseBootstrapHeight = (target) => {
+		nextTick(() => {
+			if (iframe === target) target.style.height = "100%";
+		});
 	};
 	const measure = () => {
 		frameId = 0;
@@ -947,10 +955,11 @@ var useSandboxAutoHeight = (sandboxRef) => {
 			const iframeDocument = iframe.contentDocument;
 			if (!iframeWindow || !iframeDocument?.body) return;
 			const scrollContent = resolveScrollContent(iframeDocument);
-			if (!scrollContent && isEmptyPreviewApp(iframeDocument)) return;
+			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;
 		}
@@ -1019,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);
@@ -1369,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 = {
@@ -1613,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";
@@ -1624,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
@@ -1706,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"];
@@ -1963,8 +2260,8 @@ var createRuntimePreviewOptions = (cdnURL = DEFAULT_CDN_URL, options = {}) => {
 			"</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}`
 		}
 	};
 };
@@ -2045,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);
@@ -2056,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`,
@@ -2264,7 +2572,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 					extraHeadHTML
 				].filter(Boolean).join("\n"),
 				customCode: {
-					importCode: joinCode(DOCS_LINK_IMPORT_CODE, props.previewOptions?.customCode?.importCode, props.previewScroller ? PREVIEW_SCROLL_RESET_CODE : void 0, props.previewScroller ? PREVIEW_SCROLLER_IMPORT_CODE : void 0),
+					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)
 				}
 			};
@@ -2281,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);
@@ -2334,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);
 		};
@@ -2855,4 +3165,4 @@ var playground_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/docs-playground",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {