@deot/docs-playground 1.1.3 → 1.1.5

package/dist/index.js

@@ -1,16 +1,35 @@
-import { a as DEFAULT_CDN_URL, i as normalizeCdnURL, n as createBuiltinImports, o as DEFAULT_ENTRY, r as createBuiltinStyles, s as NEW_SFC_CODE } from "./cdn-DEvdGJu2.js";
-import { A as PREVIEW_SCROLLER_USE_CODE, C as toErrorText, D as resolveSandboxMessageSource, E as resolveSandboxContainer, M as PREVIEW_SCROLL_HTML_CLASS, N as PREVIEW_SCROLL_RESET_CODE, O as useSandboxAutoHeight, S as formatSandboxRuntimeError, T as isSandboxMessage, _ as removePlaygroundStyleOverride, a as createRuntimeStore, b as setPlaygroundSiteStyles, c as applyPlaygroundImportMapOverride, d as getPlaygroundImportMapOverrides, f as getPlaygroundSiteModules, g as removePlaygroundImportMapOverride, h as isSafePlaygroundHref, i as createRuntimePreviewOptions, j as PREVIEW_SCROLL_CONTENT_CLASS, k as PREVIEW_SCROLLER_IMPORT_CODE, l as applyPlaygroundStyleOverride, m as getPlaygroundStyleOverrides, n as createReplFile, o as toReplFilename, p as getPlaygroundSiteStyles, s as PlaygroundService, t as PLAYGROUND_RUNTIME_CANVAS_BACKGROUND, u as clearPlaygroundMaps, v as setPlaygroundImportMapOverrides, w as useSandboxRuntimeErrorGuard, x as setPlaygroundStyleOverrides, y as setPlaygroundSiteModules } from "./store-D8vwi-HV.js";
-import { r as whenSassReady } from "./scss-Co2it4vB.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineAsyncComponent, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { C as normalizeCdnURL, D as NEW_SFC_CODE, E as DEFAULT_ENTRY, S as createBuiltinStyles, T as DEFAULT_CDN_URL, _ as bindPlaygroundScss, a as transformScript, b as whenSassReady, c as createFileIndex, d as isIgnoredFilename, f as isInsideRoot, g as resolveModulePath, i as rewriteImportMeta, l as getCommonRoot, m as normalizeVirtualPath, n as injectStyle, o as collectBareSpecifiers, p as isRelativeSpecifier, r as removeStyle, s as collectReachableFilenames, w as resolveNpmImport, x as createBuiltinImports } from "./css-DleINdoA.js";
+import * as Vue from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineAsyncComponent, defineComponent, h, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onErrorCaptured, onMounted, openBlock, provide, ref, renderList, shallowRef, toDisplayString, unref, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import * as Vc from "@deot/vc";
 import { Clipboard, Dropdown, DropdownItem, DropdownMenu, Message, Popconfirm, Portal, Scroller, TransitionFade } from "@deot/vc";
 import { provideLocale, useLocale } from "@deot/docs-locale";
 import hljs from "highlight.js";
-import { Sandbox } from "@vue/repl";
+import { File, Sandbox, useStore } from "@vue/repl";
 import { EditorView, basicSetup } from "codemirror";
 import { css } from "@codemirror/lang-css";
 import { javascript } from "@codemirror/lang-javascript";
 import { vue } from "@codemirror/lang-vue";
 import { highlightActiveLine } from "@codemirror/view";
+import { init, parse } from "es-module-lexer";
+import { transform } from "sucrase";
+import * as VueCompiler from "@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js";
+import * as VueRouter from "vue-router";
+import * as Pinia from "pinia";
+import * as VcComponents from "@deot/vc-components";
+import * as VcHooks from "@deot/vc-hooks";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
 //#region packages/playground/src/highlight.ts
 var vueHighlight = (api) => ({
 	subLanguage: "xml",
@@ -118,7 +137,7 @@ var PLAYGROUND_ICONS = {
 };
 //#endregion
 //#region packages/playground/src/icon/icon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$7 = ["fill", "stroke"];
+var _hoisted_1$8 = ["fill", "stroke"];
 var _hoisted_2$7 = ["d"];
 //#endregion
 //#region packages/playground/src/icon/icon.vue
@@ -150,7 +169,7 @@ var icon_default = /* @__PURE__ */ defineComponent({
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round",
 				"aria-hidden": "true"
-			}, [createElementVNode("path", { d: icon.value.path }, null, 8, _hoisted_2$7)], 12, _hoisted_1$7);
+			}, [createElementVNode("path", { d: icon.value.path }, null, 8, _hoisted_2$7)], 12, _hoisted_1$8);
 		};
 	}
 });
@@ -159,7 +178,7 @@ var icon_default = /* @__PURE__ */ defineComponent({
 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__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}";
+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;transition:opacity .15s}.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,background-color .15s;transition:opacity .15s,background-color .15s}.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";
@@ -176,7 +195,7 @@ var ensureCodePreviewStyle = () => {
 };
 //#endregion
 //#region packages/playground/src/core/code-preview/code-preview.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$6 = { class: "docs-code-preview" };
+var _hoisted_1$7 = { class: "docs-code-preview" };
 var _hoisted_2$6 = ["title"];
 var _hoisted_3$6 = { class: "docs-code-preview__code" };
 var _hoisted_4$6 = ["innerHTML"];
@@ -210,7 +229,7 @@ var code_preview_default = /* @__PURE__ */ defineComponent({
 		const highlightLanguage = computed(() => props.language || resolveHighlightLanguage(props.filename));
 		const highlightedCode = computed(() => highlightCodeByLanguage(props.code, highlightLanguage.value));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$6, [
+			return openBlock(), createElementBlock("div", _hoisted_1$7, [
 				languageLabel.value ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					class: "docs-code-preview__language",
@@ -250,7 +269,7 @@ var code_preview_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region packages/playground/src/core/files-preview/files-preview.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$5 = { class: "docs-playground-files" };
+var _hoisted_1$6 = { class: "docs-playground-files" };
 var _hoisted_2$5 = { class: "docs-playground-files__tabs-row" };
 var _hoisted_3$5 = ["data-filename", "onClick"];
 var _hoisted_4$5 = {
@@ -279,7 +298,7 @@ var files_preview_default = /* @__PURE__ */ defineComponent({
 			if (filename !== props.activeFilename) emit("active-change", filename);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$5, [createElementVNode("div", _hoisted_2$5, [createVNode(unref(Scroller), {
+			return openBlock(), createElementBlock("div", _hoisted_1$6, [createElementVNode("div", _hoisted_2$5, [createVNode(unref(Scroller), {
 				class: "docs-playground-files__scroller",
 				"auto-resize": true,
 				native: false,
@@ -424,7 +443,7 @@ var Drag = class {
 };
 //#endregion
 //#region packages/playground/src/editor/editor.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$4 = { class: "docs-playground-editor" };
+var _hoisted_1$5 = { class: "docs-playground-editor" };
 var _hoisted_2$4 = ["title"];
 var _hoisted_3$4 = { class: "docs-playground-editor__files" };
 var _hoisted_4$4 = [
@@ -436,7 +455,7 @@ var _hoisted_5$4 = ["onKeydown"];
 var _hoisted_6$3 = ["title"];
 var _hoisted_7$3 = ["title", "aria-label"];
 var _hoisted_8$2 = ["title", "aria-label"];
-var _hoisted_9$2 = { class: "docs-playground-editor__actions" };
+var _hoisted_9$1 = { class: "docs-playground-editor__actions" };
 var _hoisted_10$1 = ["title"];
 var _hoisted_11$1 = ["title", "disabled"];
 var _hoisted_12$1 = {
@@ -674,7 +693,7 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 			editor.value?.destroy();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$4, [createVNode(unref(TransitionFade), { onAfterLeave: handleHide }, {
+			return openBlock(), createElementBlock("div", _hoisted_1$5, [createVNode(unref(TransitionFade), { onAfterLeave: handleHide }, {
 				default: withCtx(() => [withDirectives(createElementVNode("div", {
 					ref_key: "wrapper",
 					ref: wrapper,
@@ -752,7 +771,7 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 							], 64))], 42, _hoisted_4$4);
 						}), 128))]),
 						_: 1
-					}, 512), createElementVNode("div", _hoisted_9$2, [createElementVNode("button", {
+					}, 512), createElementVNode("div", _hoisted_9$1, [createElementVNode("button", {
 						type: "button",
 						title: unref(t)("playground.editor.createFile"),
 						onClick: handleCreate
@@ -830,6 +849,316 @@ 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{`,
+	"height:100%;max-height:100%;box-sizing:border-box",
+	"}"
+].join("");
+var resolveSandboxContainer = (sandbox) => sandbox?.container ? unref(sandbox.container) : null;
+var resolveSandboxMessageSource = (sandbox) => {
+	const exposed = sandbox?.messageSource ? unref(sandbox.messageSource) : null;
+	if (exposed && typeof exposed.postMessage === "function") return exposed;
+	return (resolveSandboxContainer(sandbox)?.querySelector("iframe"))?.contentWindow ?? null;
+};
+/**
+* iframe 的 contentWindow 在 jsdom 里可能是 null，仍要和旧的元素校验一致。
+* 直接渲染会暴露真实的 messageSource。
+* @param sandbox
+* @param event
+*/
+var isSandboxMessage = (sandbox, event) => {
+	const explicit = sandbox?.messageSource ? unref(sandbox.messageSource) : null;
+	if (explicit && typeof explicit.postMessage === "function") return event.source === explicit;
+	const iframe = resolveSandboxContainer(sandbox)?.querySelector("iframe");
+	return !!iframe && event.source === iframe.contentWindow;
+};
+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 measureElementChildren = (root) => {
+		const view = root.ownerDocument.defaultView || window;
+		const rootTop = root.getBoundingClientRect().top;
+		let childrenBottom = 0;
+		for (const child of root.children) {
+			if (view.getComputedStyle(child).position === "fixed") continue;
+			const rect = child.getBoundingClientRect();
+			const marginBottom = Number.parseFloat(view.getComputedStyle(child).marginBottom) || 0;
+			childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
+		}
+		const overflowingHeight = root.scrollHeight > root.clientHeight + 1 ? root.scrollHeight : 0;
+		const naturalHeight = root.classList.contains("docs-playground-local__mount--auto") ? root.offsetHeight : 0;
+		return Math.ceil(Math.max(childrenBottom, overflowingHeight, naturalHeight));
+	};
+	const measureLocalContainer = () => {
+		if (!container) return;
+		const scrollContent = container.querySelector(`.${PREVIEW_SCROLL_CONTENT_CLASS}`);
+		const mount = container.querySelector(".docs-playground-local__mount");
+		const target = scrollContent || mount;
+		if (!target || !scrollContent && target.childElementCount === 0) return;
+		const contentHeight = scrollContent ? measureScrollContent(scrollContent) : measureElementChildren(target);
+		const nextHeight = Math.max(contentHeight, 24);
+		if (height.value !== nextHeight) height.value = nextHeight;
+	};
+	const isLocalContainer = (element) => element?.classList.contains("docs-playground-local") === true;
+	const measure = () => {
+		frameId = 0;
+		if (isLocalContainer(container)) {
+			measureLocalContainer();
+			return;
+		}
+		if (!iframe) return;
+		try {
+			const iframeWindow = iframe.contentWindow;
+			const iframeDocument = iframe.contentDocument;
+			if (!iframeWindow || !iframeDocument?.body) return;
+			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;
+		}
+	};
+	const scheduleMeasure = () => {
+		if (frameId) return;
+		frameId = requestAnimationFrame(measure);
+	};
+	const disconnectContent = () => {
+		contentObserver?.disconnect();
+		contentObserver = null;
+		scrollMountObserver?.disconnect();
+		scrollMountObserver = null;
+		observedScrollNode = null;
+		cancelMeasure();
+	};
+	const observeContent = () => {
+		disconnectContent();
+		if (!iframe) return;
+		try {
+			const iframeWindow = iframe.contentWindow;
+			const iframeDocument = iframe.contentDocument;
+			const Observer = iframeWindow?.ResizeObserver;
+			if (!iframeWindow || !iframeDocument?.body || !Observer) {
+				scheduleMeasure();
+				return;
+			}
+			const observer = new Observer(scheduleMeasure);
+			observer.observe(iframeDocument.documentElement);
+			observer.observe(iframeDocument.body);
+			contentObserver = observer;
+			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;
+		}
+	};
+	const handleIframeLoad = () => observeContent();
+	const setIframe = (nextIframe) => {
+		if (iframe === nextIframe) return;
+		iframe?.removeEventListener("load", handleIframeLoad);
+		disconnectContent();
+		iframe = nextIframe;
+		if (!iframe) {
+			height.value = 24;
+			return;
+		}
+		iframe.addEventListener("load", handleIframeLoad);
+		iframe.style.height = `${Math.max(window.innerHeight, 24)}px`;
+		observeContent();
+	};
+	const observeLocal = () => {
+		disconnectContent();
+		if (!container || typeof ResizeObserver === "undefined") {
+			scheduleMeasure();
+			return;
+		}
+		const observer = new ResizeObserver(scheduleMeasure);
+		observer.observe(container);
+		const mount = container.querySelector(".docs-playground-local__mount");
+		if (mount) observer.observe(mount);
+		contentObserver = observer;
+		scrollMountObserver = new MutationObserver(() => {
+			const nextMount = container?.querySelector(".docs-playground-local__mount");
+			if (nextMount && contentObserver) {
+				contentObserver.observe(nextMount);
+				for (const child of nextMount.children) contentObserver.observe(child);
+			}
+			scheduleMeasure();
+		});
+		scrollMountObserver.observe(container, {
+			childList: true,
+			subtree: true
+		});
+		scheduleMeasure();
+	};
+	const syncIframe = () => {
+		if (isLocalContainer(container)) {
+			iframe?.removeEventListener("load", handleIframeLoad);
+			iframe = null;
+			observeLocal();
+			return;
+		}
+		setIframe(container?.querySelector("iframe") || null);
+	};
+	const setContainer = (nextContainer) => {
+		if (container === nextContainer) return;
+		containerObserver?.disconnect();
+		containerObserver = null;
+		disconnectContent();
+		iframe?.removeEventListener("load", handleIframeLoad);
+		iframe = null;
+		container = nextContainer;
+		if (!container) {
+			height.value = 24;
+			return;
+		}
+		if (isLocalContainer(container)) {
+			observeLocal();
+			return;
+		}
+		containerObserver = new MutationObserver(syncIframe);
+		containerObserver.observe(container, {
+			childList: true,
+			subtree: true
+		});
+		syncIframe();
+	};
+	watch(() => resolveSandboxContainer(sandboxRef.value), setContainer, {
+		flush: "post",
+		immediate: true
+	});
+	onBeforeUnmount(() => {
+		setContainer(null);
+		cancelMeasure();
+	});
+	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;
@@ -908,6 +1237,68 @@ var scrollPlaygroundToViewportStart = (el) => {
 	});
 };
 //#endregion
+//#region packages/playground/src/core/runtime/error-guard.ts
+var UNKNOWN_RUNTIME_ERROR = "运行时发生未知错误";
+var MODULE_SPECIFIER_RE = /Failed to resolve module specifier|Error resolving module specifier/u;
+var forwardSandboxRuntimeError = (event) => {
+	if (!(event instanceof ErrorEvent) || event.error != null || !event.message) return;
+	event.stopImmediatePropagation();
+	if (event.message === "ResizeObserver loop limit exceeded" || event.message === "ResizeObserver loop completed with undelivered notifications.") return;
+	window.parent.postMessage({
+		action: "error",
+		value: event.message
+	}, "*");
+};
+var SANDBOX_RUNTIME_ERROR_CAPTURE_HTML = [
+	"<script>",
+	`window.addEventListener('error', ${forwardSandboxRuntimeError.toString()}, true);`,
+	"<\/script>"
+].join("\n");
+var toRuntimeErrorMessage = (value, message) => {
+	if (typeof value === "string" && value) return value;
+	if (value instanceof Error && value.message) return value.message;
+	if (value && typeof value === "object" && "message" in value) {
+		const valueMessage = value.message;
+		if (typeof valueMessage === "string" && valueMessage) return valueMessage;
+	}
+	if (typeof message === "string" && message) return message;
+	if (value !== null && value !== void 0) try {
+		return String(value);
+	} catch {
+		return UNKNOWN_RUNTIME_ERROR;
+	}
+	return UNKNOWN_RUNTIME_ERROR;
+};
+var normalizeRuntimeErrorMessage = (data) => {
+	if (!data || typeof data !== "object") return false;
+	const message = data;
+	if (message.action !== "error") return false;
+	message.value = toRuntimeErrorMessage(message.value, message.message);
+	return true;
+};
+var toErrorText = (value) => {
+	if (typeof value === "string" && value) return value;
+	if (value instanceof Error && value.message) return value.message;
+	return "";
+};
+var formatSandboxRuntimeError = (message, importMapTip) => {
+	if (!MODULE_SPECIFIER_RE.test(message)) return message;
+	return `${message.replace(/\. Relative references must.*$/u, "").replace(/\.$/u, "")}.\n${importMapTip}`;
+};
+var useSandboxRuntimeErrorGuard = (sandboxRef) => {
+	const error = ref("");
+	if (typeof window === "undefined") return error;
+	const handleMessage = (event) => {
+		const source = resolveSandboxMessageSource(sandboxRef.value);
+		if (!source || event.source !== source) return;
+		if (!normalizeRuntimeErrorMessage(event.data)) return;
+		error.value = event.data.value;
+	};
+	window.addEventListener("message", handleMessage, true);
+	onBeforeUnmount(() => window.removeEventListener("message", handleMessage, true));
+	return error;
+};
+//#endregion
 //#region packages/playground/src/core/runtime/viewport.ts
 var DEFAULT_VIEWPORT_OPTIONS = ["auto", 375];
 var isValidViewport = (viewport) => {
@@ -1158,7 +1549,7 @@ function usePreviewHeightBridge(sandbox, maxHeight = () => Infinity) {
 }
 //#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_1$4 = { class: "docs-playground__tools" };
 var _hoisted_2$3 = {
 	key: 0,
 	class: "docs-playground__tool-group"
@@ -1181,7 +1572,7 @@ var _hoisted_8$1 = {
 	class: "docs-playground__tool-divider",
 	"aria-hidden": "true"
 };
-var _hoisted_9$1 = ["aria-label"];
+var _hoisted_9 = ["aria-label"];
 var _hoisted_10 = [
 	"title",
 	"aria-label",
@@ -1248,7 +1639,7 @@ var toolbar_default = /* @__PURE__ */ defineComponent({
 			if (!enabled) viewportMenuVisible.value = false;
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$3, [
+			return openBlock(), createElementBlock("div", _hoisted_1$4, [
 				__props.showRuntimeActions ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
 					__props.viewportOptions.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_2$3, [createVNode(unref(Dropdown), {
 						modelValue: viewportMenuVisible.value,
@@ -1354,7 +1745,7 @@ var toolbar_default = /* @__PURE__ */ defineComponent({
 						"aria-pressed": item === __props.activeView,
 						onClick: ($event) => emit("view-change", item)
 					}, toDisplayString(getViewLabel(item)), 11, _hoisted_10);
-				}), 128))], 8, _hoisted_9$1)) : createCommentVNode("v-if", true),
+				}), 128))], 8, _hoisted_9)) : createCommentVNode("v-if", true),
 				__props.showClose && (__props.showRuntimeActions || showViews.value) ? (openBlock(), createElementBlock("span", _hoisted_11)) : createCommentVNode("v-if", true),
 				__props.showClose ? (openBlock(), createElementBlock("button", {
 					key: 3,
@@ -1373,8 +1764,540 @@ var toolbar_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region packages/playground/src/import-map.ts
+/**
+* 站点级同步内存：`$docs.modules` / `$docs.styles` 与管理页 import、CSS 覆盖。
+*/
+var normalize = (value) => value.trim();
+var isSafePlaygroundHref = (href) => {
+	const next = href.trim();
+	if (!next) return false;
+	if (/^https?:\/\//iu.test(next)) return true;
+	return next.startsWith("/") && !next.startsWith("//");
+};
+var filterSafeHrefs = (value = {}) => Object.fromEntries(Object.entries(value).filter((entry) => typeof entry[1] === "string" && isSafePlaygroundHref(entry[1])));
+var sanitizeMap = (value = {}) => filterSafeHrefs(Object.fromEntries(Object.entries(value).map(([alias, url]) => [normalize(alias), normalize(url)]).filter(([alias]) => Boolean(alias))));
+var createMapStore = () => {
+	let data = {};
+	const snapshot = () => ({ ...data });
+	const drop = (alias) => {
+		if (data[alias] === void 0) return snapshot();
+		const next = { ...data };
+		delete next[alias];
+		data = next;
+		return snapshot();
+	};
+	return {
+		get: snapshot,
+		set: (value = {}) => {
+			data = sanitizeMap(value);
+		},
+		apply: (alias, url) => {
+			const nextAlias = normalize(alias);
+			const nextUrl = normalize(url);
+			if (!nextAlias) return snapshot();
+			if (!isSafePlaygroundHref(nextUrl)) return drop(nextAlias);
+			data = {
+				...data,
+				[nextAlias]: nextUrl
+			};
+			return snapshot();
+		},
+		remove: (alias) => {
+			const nextAlias = normalize(alias);
+			return nextAlias ? drop(nextAlias) : snapshot();
+		}
+	};
+};
+var siteModules = createMapStore();
+var siteStyles = createMapStore();
+var importOverrides = createMapStore();
+var styleOverrides = createMapStore();
+/**
+* 站点默认 import。合并时夹在内置 CDN 与实例 `builtinImportMap` 之间。
+*/
+var getPlaygroundSiteModules = siteModules.get;
+var setPlaygroundSiteModules = siteModules.set;
+/**
+* 站点默认预览 CSS。合并时夹在内置样式表与管理页覆盖之间。
+*/
+var getPlaygroundSiteStyles = siteStyles.get;
+var setPlaygroundSiteStyles = siteStyles.set;
+var getPlaygroundImportMapOverrides = importOverrides.get;
+var setPlaygroundImportMapOverrides = importOverrides.set;
+var applyPlaygroundImportMapOverride = importOverrides.apply;
+var removePlaygroundImportMapOverride = importOverrides.remove;
+var getPlaygroundStyleOverrides = styleOverrides.get;
+var setPlaygroundStyleOverrides = styleOverrides.set;
+var applyPlaygroundStyleOverride = styleOverrides.apply;
+var removePlaygroundStyleOverride = styleOverrides.remove;
+var clearPlaygroundMaps = () => {
+	[
+		siteModules,
+		siteStyles,
+		importOverrides,
+		styleOverrides
+	].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/repl-modules.ts
+var { babelParse, MagicString, walkIdentifiers } = VueCompiler;
+var moduleSpecifier = (item) => item.type === "import-meta" || !item.specifier || item.type === "dynamic" && item.glob ? void 0 : item.specifier;
+/**
+* 发现自定义 ESM 的传递引用；缺失的 npm 包映射到 CDN，动态依赖只登记地址。
+* @param imports 当前预览的模块覆盖。
+* @param specifiers 源文件实际引用的模块。
+* @returns 补齐后的 import map。
+*/
+var resolveReplImports = async (imports, specifiers) => {
+	const resolved = { ...imports };
+	const visited = /* @__PURE__ */ new Set();
+	const visit = async (specifier, importer) => {
+		const url = isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier) ? new URL(specifier, importer || location.href).href : resolved[specifier] ||= resolveNpmImport(specifier);
+		if (visited.has(url) || /\/\+esm(?:[?#]|$)/.test(url)) return;
+		visited.add(url);
+		const response = await fetch(url);
+		if (!response.ok) throw new Error(`${response.status} ${url}`);
+		const modules = parse(await response.text())[0];
+		await Promise.all(modules.flatMap((item) => {
+			const dependency = moduleSpecifier(item);
+			return dependency ? [visit(dependency, url)] : [];
+		}));
+	};
+	await Promise.all(specifiers.map((specifier) => visit(specifier)));
+	return resolved;
+};
+var rewriteImportedExports = (code) => {
+	const statements = babelParse(code, { sourceType: "module" }).program.body;
+	const bindings = /* @__PURE__ */ new Map();
+	const source = new MagicString(code);
+	for (const statement of statements) {
+		if (statement.type !== "ImportDeclaration") continue;
+		for (const spec of statement.specifiers) {
+			if (spec.type === "ImportNamespaceSpecifier") continue;
+			const imported = spec.type === "ImportDefaultSpecifier" ? "default" : spec.imported.type === "Identifier" ? spec.imported.name : JSON.stringify(spec.imported.value);
+			bindings.set(spec.local.name, {
+				imported,
+				source: statement.source.value,
+				rename: (name) => source.overwrite(spec.local.start, spec.local.end, spec.type === "ImportSpecifier" && spec.imported.start === spec.local.start ? `${imported} as ${name}` : name)
+			});
+		}
+	}
+	const aliases = /* @__PURE__ */ new Map();
+	const rewritten = /* @__PURE__ */ new Set();
+	for (const statement of statements) {
+		if (statement.type !== "ExportNamedDeclaration" || statement.source || statement.declaration) continue;
+		const exports = statement.specifiers.map((spec) => {
+			if (spec.type !== "ExportSpecifier") return "";
+			const local = spec.local.name;
+			const exported = spec.exported.type === "Identifier" ? spec.exported.name : JSON.stringify(spec.exported.value);
+			const binding = bindings.get(local);
+			if (!binding) return `export { ${local} as ${exported} };`;
+			if (!aliases.has(local)) {
+				const alias = `__docs_reexport_${aliases.size}__`;
+				aliases.set(local, alias);
+				binding.rename(alias);
+			}
+			return `export { ${binding.imported} as ${exported} } from ${JSON.stringify(binding.source)};`;
+		});
+		if (statement.specifiers.some((spec) => spec.type === "ExportSpecifier" && bindings.has(spec.local.name))) {
+			source.overwrite(statement.start, statement.end, exports.join("\n"));
+			rewritten.add(statement);
+		}
+	}
+	for (const statement of statements) {
+		if (statement.type === "ImportDeclaration" || rewritten.has(statement)) continue;
+		walkIdentifiers(statement, (id, parent) => {
+			const alias = aliases.get(id.name);
+			if (!alias) return;
+			if (parent?.type === "ObjectProperty" && parent.shorthand) source.appendLeft(id.end, `: ${alias}`);
+			else source.overwrite(id.start, id.end, alias);
+		});
+	}
+	return source.toString();
+};
+/**
+* REPL 将 ./ 引用按 src 根目录解析，编译结果需要先转成文件表中的完整路径。
+* @param store iframe 预览的文件和编译结果。
+*/
+var bindReplModules = (store) => {
+	watch(() => Object.values(store.files).map((file) => [
+		file.filename,
+		file.code,
+		file.compiled.js,
+		file.compiled.ssr
+	]), () => {
+		const files = createFileIndex(Object.fromEntries(Object.entries(store.files).map(([name, file]) => [name, file.code])));
+		const importMap = store.getImportMap();
+		const imports = { ...importMap.imports };
+		let importsChanged = false;
+		for (const file of Object.values(store.files)) for (const output of ["js", "ssr"]) {
+			if (!file.compiled[output]) continue;
+			try {
+				let code = /\.[jt]sx?$/.test(file.filename) ? transformScript(file.code, file.filename, {
+					esm: true,
+					jsx: /\.[jt]sx$/.test(file.filename)
+				}) : rewriteImportMeta(file.compiled[output], file.filename);
+				code = rewriteImportedExports(code);
+				for (const item of [...parse(code)[0]].reverse()) {
+					const specifier = moduleSpecifier(item);
+					if (!specifier) continue;
+					if (isRelativeSpecifier(specifier)) {
+						const resolved = resolveModulePath(file.filename, specifier, files);
+						if (!resolved) continue;
+						const target = `./${resolved.replace(/^\/?src\//, "")}`;
+						const text = item.type === "dynamic" ? JSON.stringify(target) : target;
+						code = code.slice(0, item.start) + text + code.slice(item.end);
+					} else if (!/^https?:\/\//.test(specifier) && !imports[specifier]) {
+						imports[specifier] = resolveNpmImport(specifier);
+						importsChanged = true;
+					}
+				}
+				if (file.compiled[output] !== code) file.compiled[output] = code;
+			} catch (error) {
+				store.errors.push(error instanceof Error ? error : String(error));
+			}
+		}
+		if (importsChanged) store.setImportMap({
+			...importMap,
+			imports
+		});
+	}, { immediate: true });
+};
+//#endregion
+//#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\",{",
+	"href:props.to,",
+	"style:{color:\"inherit\",textDecoration:\"none\"},",
+	"onClick(event){event.preventDefault();window.parent.postMessage({action:\"docs:navigate\",to:props.to},\"*\")}",
+	"},slots.default?.())}",
+	"})"
+].join("");
+var escapeHtmlAttr = (value) => value.replace(/&/gu, "&amp;").replace(/"/gu, "&quot;").replace(/'/gu, "&#39;").replace(/</gu, "&lt;").replace(/>/gu, "&gt;");
+/**
+* runtime 画布色。`previewInset` 露出的 padding、iframe chrome 和 sandbox
+* `html`/`body` 必须共用这一变量，暗色下 `--docs-background-color` 与
+* `--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, 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\">",
+			...hrefs.map((href) => `<link rel="stylesheet" href="${escapeHtmlAttr(href)}">`),
+			"<style>",
+			...styleBlocks,
+			"</style>"
+		].join("\n"),
+		customCode: {
+			importCode: `${DOCS_LINK_IMPORT_CODE}\n${PREVIEW_SERVICE_IMPORT_CODE}`,
+			useCode: `${DOCS_LINK_USE_CODE}\n${PREVIEW_SERVICE_USE_CODE}`
+		}
+	};
+};
+var toReplFilename = (filename) => filename.startsWith("src/") ? filename : `src/${filename}`;
+var createReplFile = (filename, code) => {
+	const replFilename = toReplFilename(filename);
+	return new File(replFilename, code);
+};
+/**
+* 默认 CDN → 站点 modules → 实例 builtinImportMap → 管理页覆盖。
+* iframe import map 与直接渲染加载的是同一份地址表。
+* @param cdnURL
+* @param builtinImportMap
+*/
+var createRuntimeImports = (cdnURL = DEFAULT_CDN_URL, builtinImportMap) => ({
+	...createBuiltinImports(cdnURL),
+	...getPlaygroundSiteModules(),
+	...filterSafeHrefs(builtinImportMap?.imports),
+	...getPlaygroundImportMapOverrides()
+});
+var createRuntimeStore = (files, entry, options) => {
+	const { cdnURL, builtinImportMap, ...storeOptions } = options;
+	const replFiles = ref(Object.fromEntries(Object.entries(files).map(([filename, code]) => {
+		const file = createReplFile(filename, code);
+		return [file.filename, file];
+	})));
+	const mainFile = ref(toReplFilename(entry));
+	const activeFilename = ref(toReplFilename(entry));
+	const imports = createRuntimeImports(cdnURL, builtinImportMap);
+	const store = useStore({
+		...storeOptions,
+		files: replFiles,
+		mainFile,
+		activeFilename,
+		builtinImportMap: ref({
+			...builtinImportMap,
+			imports
+		}),
+		template: ref({
+			welcomeSFC: files[entry],
+			newSFC: NEW_SFC_CODE
+		})
+	});
+	bindPlaygroundScss(store);
+	bindReplModules(store);
+	whenSassReady(files, () => {
+		const specifiers = collectBareSpecifiers(files, Object.keys(files));
+		if (!specifiers.length) {
+			store.init();
+			return;
+		}
+		store.loading = true;
+		resolveReplImports(imports, specifiers).then((resolved) => {
+			if (Object.keys(resolved).length !== Object.keys(imports).length) store.setImportMap({ imports: resolved }, true);
+			store.init();
+		}).catch((error) => {
+			store.errors.push(error);
+		}).finally(() => {
+			store.loading = false;
+		});
+	});
+	return store;
+};
+//#endregion
 //#region packages/playground/src/core/runtime/alone/wrapper.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = ["aria-label"];
+var _hoisted_1$3 = ["aria-label"];
 var _hoisted_2$2 = { class: "docs-playground-popup__frame" };
 var _hoisted_3$2 = { class: "docs-playground-popup__header" };
 var _hoisted_4$2 = ["title"];
@@ -1419,7 +2342,7 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 		"portal-fulfilled"
 	],
 	setup(__props, { emit: __emit }) {
-		const LocalSandbox = defineAsyncComponent(() => import("./local-sandbox-B8IJ5jWb.js").then((n) => n.t));
+		const LocalSandbox = defineAsyncComponent(() => Promise.resolve().then(() => local_sandbox_exports));
 		const props = __props;
 		const emit = __emit;
 		const { t } = useLocale();
@@ -1588,7 +2511,7 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 					])) : createCommentVNode("v-if", true)], 4)]),
 					_: 1
 				})])
-			])], 4)], 8, _hoisted_1$2);
+			])], 4)], 8, _hoisted_1$3);
 		};
 	}
 }), {
@@ -1597,27 +2520,932 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 	multiple: false
 });
 //#endregion
+//#region packages/playground/src/core/runtime/local/playground.ts
+/**
+* 直接渲染与页面同文档，弹层不需要临时撑高。
+* `run` 仍返回可调用函数，但不会申请高度，也不会改动预览尺寸。
+* @param vue 宿主 Vue，只用其中的 `isRef`。
+* @returns 注入给预览的 `docs:playground`。
+*/
+var createLocalPlayground = (vue) => {
+	const run = (_height, optionsOrHandler, lastHandler) => {
+		const visible = (typeof optionsOrHandler === "function" || optionsOrHandler == null ? {} : optionsOrHandler).visible;
+		const handler = typeof optionsOrHandler === "function" ? optionsOrHandler : typeof lastHandler === "function" ? lastHandler : vue.isRef(visible) ? () => {
+			visible.value = true;
+		} : void 0;
+		return (...args) => {
+			if (typeof handler !== "function") return void 0;
+			return handler(...args);
+		};
+	};
+	return {
+		enable: () => Promise.resolve(true),
+		disable() {},
+		dispose() {},
+		run
+	};
+};
+//#endregion
+//#region packages/playground/src/core/runtime/local/port.ts
+/** 只在桥接 iframe 内部转发，保证父页面收到的 source 是该 iframe。 */
+var LOCAL_BRIDGE_CHANNEL = "docs:local-out";
+var BRIDGE_INSTALLER = `
+if (!window.__docsLocalBridge) {
+	window.__docsLocalBridge = true;
+	window.addEventListener('message', function (event) {
+		var data = event.data;
+		if (!data || data.channel !== ${JSON.stringify(LOCAL_BRIDGE_CHANNEL)}) return;
+		window.parent.postMessage(data.payload, '*');
+	});
+}
+`;
+var LOCAL_BRIDGE_SRCDOC = `<!doctype html><html><head></head><body><script>${BRIDGE_INSTALLER}<\/script></body></html>`;
+/**
+* 在同源空白 iframe 里安装转发脚本。调用发生在 iframe realm，父页面看到的 source 才是它。
+* @param iframe 用作消息身份的空白 iframe。
+* @returns 脚本是否已经装上。
+*/
+var installLocalBridge = (iframe) => {
+	const win = iframe.contentWindow;
+	if (!win || win.__docsLocalBridge) return Boolean(win?.__docsLocalBridge);
+	win.eval(BRIDGE_INSTALLER);
+	return Boolean(win.__docsLocalBridge);
+};
+/**
+* 满足 PlaygroundService 现有 Window 调用的预览窗口。
+* 出站消息经 iframe 转发，入站回复再交回服务，协议仍是 docs:height / docs:navigate。
+*/
+var LocalPreviewPort = class {
+	iframe;
+	parent;
+	listeners = /* @__PURE__ */ new Map();
+	constructor(iframe) {
+		this.iframe = iframe;
+		this.parent = { postMessage: (data) => {
+			this.iframe.contentWindow?.postMessage({
+				channel: LOCAL_BRIDGE_CHANNEL,
+				payload: data
+			}, "*");
+		} };
+	}
+	get contentWindow() {
+		return this.iframe.contentWindow;
+	}
+	get innerHeight() {
+		const fromWindow = this.iframe.contentWindow?.innerHeight ?? 0;
+		if (fromWindow > 0) return fromWindow;
+		return this.iframe.clientHeight || this.iframe.parentElement?.clientHeight || 0;
+	}
+	addEventListener(type, listener) {
+		const win = this.iframe.contentWindow;
+		if (!win) return;
+		if (type !== "message") {
+			win.addEventListener(type, listener);
+			return;
+		}
+		const wrapped = (event) => {
+			const message = event;
+			const data = message.data;
+			if (data && data.channel === "docs:local-out") return;
+			listener({
+				data: message.data,
+				source: this.parent
+			});
+		};
+		this.listeners.set(listener, wrapped);
+		win.addEventListener("message", wrapped);
+	}
+	removeEventListener(type, listener) {
+		const win = this.iframe.contentWindow;
+		if (!win) return;
+		const wrapped = this.listeners.get(listener);
+		if (wrapped) {
+			this.listeners.delete(listener);
+			win.removeEventListener(type, wrapped);
+			return;
+		}
+		win.removeEventListener(type, listener);
+	}
+	requestAnimationFrame(callback) {
+		return window.requestAnimationFrame(callback);
+	}
+	cancelAnimationFrame(handle) {
+		window.cancelAnimationFrame(handle);
+	}
+	setTimeout(handler, timeout, ...args) {
+		return window.setTimeout(handler, timeout, ...args);
+	}
+	clearTimeout(handle) {
+		window.clearTimeout(handle);
+	}
+};
+//#endregion
+//#region packages/playground/src/core/runtime/local/format-error.ts
+/**
+* 空 reject（例如弹层取消）不要渲染成红条。
+* @param error 运行时抛出的值。
+* @returns 可展示的错误文本；空取消返回空字符串。
+*/
+var formatPlaygroundRuntimeError = (error) => {
+	if (error == null) return "";
+	const raw = typeof error === "object" && "message" in error ? error.message : error;
+	if (raw == null || raw === "") return "";
+	const text = String(raw);
+	if (text === "undefined" || text === "null") return "";
+	return text;
+};
+//#endregion
+//#region packages/playground/src/core/runtime/local/builtins.ts
+var loaders = {
+	"vue": () => import("vue"),
+	"vue-router": () => import("vue-router"),
+	"pinia": async () => Pinia,
+	"@deot/helper": () => import("@deot/helper"),
+	"@deot/helper-cache": () => import("@deot/helper-cache"),
+	"@deot/helper-device": () => import("@deot/helper-device"),
+	"@deot/helper-dom": () => import("@deot/helper-dom"),
+	"@deot/helper-emitter": () => import("@deot/helper-emitter"),
+	"@deot/helper-fp": () => import("@deot/helper-fp"),
+	"@deot/helper-is": () => import("@deot/helper-is"),
+	"@deot/helper-load": () => import("@deot/helper-load"),
+	"@deot/helper-resize": () => import("@deot/helper-resize"),
+	"@deot/helper-route": () => import("@deot/helper-route"),
+	"@deot/helper-scheduler": () => import("@deot/helper-scheduler"),
+	"@deot/helper-shared": () => import("@deot/helper-shared"),
+	"@deot/helper-unicode": () => import("@deot/helper-unicode"),
+	"@deot/helper-utils": () => import("@deot/helper-utils"),
+	"@deot/helper-validator": () => import("@deot/helper-validator"),
+	"@deot/helper-wheel": () => import("@deot/helper-wheel"),
+	"@deot/http-client": () => import("@deot/http-client"),
+	"@deot/http-core": () => import("@deot/http-core"),
+	"@deot/http-hooks": () => import("@deot/http-hooks"),
+	"@deot/http": () => import("@deot/http"),
+	"@deot/vc": async () => Vc,
+	"@deot/vc-components": async () => VcComponents,
+	"@deot/vc-hooks": async () => VcHooks,
+	"@deot/vc-locale": () => import("@deot/vc-locale"),
+	"lodash-es": () => import("lodash-es"),
+	"echarts": () => import("echarts"),
+	"photoswipe": () => import("photoswipe"),
+	"jszip": () => import("jszip"),
+	"jspdf": () => import("jspdf"),
+	"dayjs": async () => (await import("dayjs")).default
+};
+var cache = /* @__PURE__ */ new Map();
+/** 直接渲染可从宿主包注入的说明符；与 Vue 无关的大型依赖按需加载。 */
+var localBuiltinIds = new Set(Object.keys(loaders));
+var ensureLocalBuiltin = (id) => {
+	const loader = loaders[id];
+	if (!loader) return Promise.reject(/* @__PURE__ */ new Error(`[Playground] 没有本地模块 "${id}"`));
+	let pending = cache.get(id);
+	if (!pending) {
+		pending = loader();
+		cache.set(id, pending);
+	}
+	return pending;
+};
+//#endregion
+//#region packages/playground/src/core/runtime/local/modules.ts
+var SKIP_COPY_KEYS = /* @__PURE__ */ new Set([
+	"prototype",
+	"caller",
+	"arguments"
+]);
+var toHostModule = (ns) => {
+	if (ns == null || typeof ns !== "object" && typeof ns !== "function") return {
+		__esModule: true,
+		default: ns
+	};
+	const source = ns;
+	const mod = { __esModule: true };
+	const assignKey = (key) => {
+		if (SKIP_COPY_KEYS.has(key) || key === "__esModule") return;
+		try {
+			mod[key] = source[key];
+		} catch {}
+	};
+	try {
+		Object.keys(source).forEach(assignKey);
+	} catch {}
+	try {
+		Object.getOwnPropertyNames(source).forEach(assignKey);
+	} catch {}
+	if (!("default" in mod) || mod.default === void 0) mod.default = source.default !== void 0 ? source.default : source;
+	return mod;
+};
+var lookupHostModule = (id, modules) => {
+	if (Object.prototype.hasOwnProperty.call(modules, id)) return toHostModule(modules[id]);
+	return null;
+};
+var pickNestedExport = (rootMod, rest) => {
+	if (!rest) return void 0;
+	const parts = rest.split("/").filter(Boolean);
+	let current = rootMod;
+	for (const part of parts) {
+		if (current == null || typeof current !== "object" && typeof current !== "function") return;
+		const record = current;
+		if (!(part in record)) return void 0;
+		current = record[part];
+	}
+	return current;
+};
+/**
+* 先精确匹配，再从右往左剥路径，把剩余段当成导出属性。
+* 模块表只来自当前 Playground，不写入全局注册表。
+* @param id 裸模块说明符。
+* @param modules 当前 Playground 的模块表。
+* @returns 可被 `require` 使用的模块；找不到时返回 null。
+*/
+var resolveHostModule = (id, modules) => {
+	const exact = lookupHostModule(id, modules);
+	if (exact) return exact;
+	let cursor = id;
+	while (true) {
+		const slash = cursor.lastIndexOf("/");
+		if (slash <= 0) break;
+		const parent = cursor.slice(0, slash);
+		const rest = id.slice(parent.length + 1);
+		const rootMod = lookupHostModule(parent, modules);
+		if (rootMod) {
+			const nested = pickNestedExport(rootMod, rest);
+			if (nested !== void 0) return toHostModule(nested);
+		}
+		cursor = parent;
+	}
+	return null;
+};
+var HOST_VUE_SPECIFIERS = /* @__PURE__ */ new Set(["vue", "vue/server-renderer"]);
+var messageOf = (error) => error instanceof Error ? error.message : String(error);
+/**
+* 找到 import map 里能覆盖该说明符的键。子路径没有独立 URL 时回退到父包。
+* @param id 裸模块说明符。
+* @param imports 合并后的 import map。
+* @returns 命中的 import map 键；没有地址时返回 null。
+*/
+var resolveImportTarget = (id, imports) => {
+	if (imports[id]) return id;
+	let cursor = id;
+	while (true) {
+		const slash = cursor.lastIndexOf("/");
+		if (slash <= 0) return null;
+		const parent = cursor.slice(0, slash);
+		if (imports[parent]) return parent;
+		cursor = parent;
+	}
+};
+var prefersLocalBuiltin = (id, imports, cdnURL) => {
+	if (!localBuiltinIds.has(id) && !HOST_VUE_SPECIFIERS.has(id)) return false;
+	const url = imports[id];
+	if (!url) return true;
+	return url === createBuiltinImports(cdnURL)[id];
+};
+/**
+* 内置依赖先注入宿主副本。import map 里与默认 CDN 不同的地址会覆盖，包括 `vue`。
+* @param specifiers 本次预览用到的裸模块说明符。
+* @param imports 合并后的 import map。
+* @param builtins 宿主 Vue 与 vue-router。
+* @param builtins.vue 当前页面的 Vue 模块。
+* @param builtins.vueRouter 打包进来的 vue-router，可被 import map 覆盖。
+* @param loader 按 URL 加载远程模块。
+* @param cdnURL 当前 CDN 根，用来识别默认地址。
+* @returns 模块表和加载错误。
+*/
+var loadLocalModules = async (specifiers, imports, builtins, loader, cdnURL) => {
+	const modules = {
+		"vue": builtins.vue,
+		"vue-router": builtins.vueRouter
+	};
+	const errors = [];
+	const targets = /* @__PURE__ */ new Set();
+	const localIds = /* @__PURE__ */ new Set();
+	specifiers.forEach((specifier) => {
+		let local = false;
+		if (prefersLocalBuiltin(specifier, imports, cdnURL)) localIds.add(specifier);
+		else {
+			let cursor = specifier;
+			while (true) {
+				const slash = cursor.lastIndexOf("/");
+				if (slash <= 0) break;
+				const parent = cursor.slice(0, slash);
+				if (prefersLocalBuiltin(parent, imports, cdnURL)) {
+					localIds.add(parent);
+					local = true;
+					break;
+				}
+				cursor = parent;
+			}
+		}
+		if (specifier === "vue-router") {
+			if (imports["vue-router"]) targets.add("vue-router");
+			return;
+		}
+		const target = resolveImportTarget(specifier, imports);
+		if (target && prefersLocalBuiltin(target, imports, cdnURL)) localIds.add(target);
+		else if (target) targets.add(target);
+		else if (!local && !localIds.has(specifier)) {
+			imports[specifier] = resolveNpmImport(specifier);
+			targets.add(specifier);
+		}
+	});
+	await Promise.all([...localIds].map(async (id) => {
+		if (id === "vue" || id === "vue-router") return;
+		if (id === "vue/server-renderer") {
+			modules[id] = builtins.vue;
+			return;
+		}
+		modules[id] = await ensureLocalBuiltin(id);
+	}));
+	for (const id of targets) {
+		const url = imports[id];
+		if (!url || prefersLocalBuiltin(id, imports, cdnURL)) continue;
+		try {
+			modules[id] = await loader(url);
+		} catch (error) {
+			errors.push(`[Playground] 无法加载模块 "${id}" (${url}): ${messageOf(error)}`);
+		}
+	}
+	return {
+		modules,
+		errors
+	};
+};
+//#endregion
+//#region packages/playground/src/core/runtime/local/vue-guard.ts
+/**
+* 给 files 注入的 vue：同一份宿主 Vue，但 `createApp().mount` 不会卸掉页面。
+* 防护按本次 link 创建，多个 Playground 互不覆盖。
+* @param capture 本次链接收集到的根组件、局部组件和 provide。
+* @returns 带防护的 Vue 模块。
+*/
+var createGuardedVue = (capture) => {
+	const createApp = (rootComponent, rootProps) => {
+		const fakeApp = {
+			_component: rootComponent,
+			_props: rootProps,
+			config: {
+				errorHandler: null,
+				warnHandler: null,
+				globalProperties: {}
+			},
+			_context: {
+				provides: Object.create(null),
+				components: Object.create(null),
+				directives: Object.create(null),
+				mixins: []
+			},
+			use() {
+				return fakeApp;
+			},
+			mixin(mixin) {
+				fakeApp._context.mixins.push(mixin);
+				return fakeApp;
+			},
+			component(name, component) {
+				if (component) {
+					fakeApp._context.components[name] = component;
+					return fakeApp;
+				}
+				return fakeApp._context.components[name];
+			},
+			directive() {
+				return fakeApp;
+			},
+			provide(key, value) {
+				fakeApp._context.provides[key] = value;
+				return fakeApp;
+			},
+			mount() {
+				capture.components = { ...fakeApp._context.components };
+				capture.provides = { ...fakeApp._context.provides };
+				capture.mountedComponent = defineComponent({
+					name: "PlaygroundCapturedApp",
+					components: fakeApp._context.components,
+					setup() {
+						Reflect.ownKeys(fakeApp._context.provides).forEach((key) => {
+							provide(key, fakeApp._context.provides[key]);
+						});
+						return () => h(rootComponent, rootProps || null);
+					}
+				});
+				return capture.mountedComponent;
+			},
+			unmount() {},
+			onUnmount() {
+				return fakeApp;
+			}
+		};
+		return fakeApp;
+	};
+	return new Proxy(Vue, { get(target, prop, receiver) {
+		if (prop === "createApp" || prop === "createSSRApp") return createApp;
+		if (prop === "default") return receiver;
+		return Reflect.get(target, prop, receiver);
+	} });
+};
+//#endregion
+//#region packages/playground/src/core/runtime/local/linker.ts
+/**
+* 在当前页面链接编译结果，返回入口组件。
+* 未覆盖 `vue` 时换成带防护的宿主实例，避免 `mount` 卸掉页面。
+* @param compiled 浏览器编译结果。
+* @param files 当前 Playground 文件表。
+* @param options 可选的宿主模块表。
+* @returns 入口组件、样式和链接错误。
+*/
+var linkPlayground = (compiled, files, options = {}) => {
+	const errors = [...compiled.errors || []];
+	if (!compiled.entry || errors.length) return {
+		component: null,
+		css: compiled.css || [],
+		errors
+	};
+	const capture = {
+		mountedComponent: null,
+		components: {},
+		provides: {}
+	};
+	const modules = { ...options.modules || {} };
+	if (modules.vue == null || modules.vue === Vue) modules.vue = createGuardedVue(capture);
+	const fileIndex = createFileIndex(files);
+	const root = getCommonRoot([...fileIndex.keys()]);
+	const cache = /* @__PURE__ */ new Map();
+	const visiting = /* @__PURE__ */ new Set();
+	const requireFn = (fromFilename) => (id) => {
+		if (isRelativeSpecifier(id)) {
+			const resolved = resolveModulePath(fromFilename, id, fileIndex);
+			if (!resolved) throw new Error(`[Playground] 无法解析相对模块 "${id}"（来自 ${fromFilename}）`);
+			/* istanbul ignore if -- 公共根已包含全部 files，正常解析不会逃出 */
+			if (!isInsideRoot(resolved, root)) throw new Error(`[Playground] 模块逃出虚拟根: ${resolved}`);
+			return loadModule(resolved);
+		}
+		const host = resolveHostModule(id, modules);
+		if (host) return host;
+		throw new Error(`[Playground] 未注册的模块 "${id}"。请在 import map 中提供可加载的地址。`);
+	};
+	const loadModule = (filename) => {
+		const key = normalizeVirtualPath(filename);
+		if (cache.has(key)) return cache.get(key);
+		if (visiting.has(key)) return cache.get(key);
+		const mod = compiled.modules[key];
+		if (!mod) throw new Error(`[Playground] 缺少编译模块: ${key}`);
+		const module = { exports: {} };
+		cache.set(key, module.exports);
+		visiting.add(key);
+		try {
+			new Function("require", "module", "exports", mod.js)(requireFn(key), module, module.exports);
+			cache.set(key, module.exports);
+			return module.exports;
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			errors.push(`[Playground] 执行失败 ${key}: ${message}`);
+			throw error;
+		} finally {
+			visiting.delete(key);
+		}
+	};
+	try {
+		const entryExports = loadModule(compiled.entry);
+		let component = entryExports?.default ?? entryExports;
+		if (capture.mountedComponent) component = capture.mountedComponent;
+		/* istanbul ignore if -- 空入口在编译阶段已经报错 */
+		if (!component) {
+			errors.push("[Playground] 入口必须 export default 组件，或调用 createApp(App).mount()");
+			return {
+				component: null,
+				css: compiled.css || [],
+				errors
+			};
+		}
+		return {
+			component,
+			css: compiled.css || [],
+			errors
+		};
+	} catch (error) {
+		if (!errors.length) errors.push(error instanceof Error ? error.message : String(error));
+		return {
+			component: null,
+			css: compiled.css || [],
+			errors
+		};
+	}
+};
+//#endregion
+//#region packages/playground/src/core/runtime/local/remote.ts
+var HOST_VUE = /* @__PURE__ */ new Set(["vue", "vue/server-renderer"]);
+/**
+* 把 CDN 上的 ESM 先拉完整张依赖图，再在当前页面里执行。
+* 裸导入优先走 import map，缺失的 npm 依赖回退到 CDN ESM；import() 按需加载。
+* @param imports 合并后的 import map。
+* @param builtins 宿主 Vue 与 vue-router。
+* @param cdnURL 当前 CDN 根，用来识别默认地址。
+* @param importModule 浏览器原生 ESM 加载器。
+* @returns 按 URL 加载并执行远程模块的加载器。
+*/
+var createRemoteLoader = (imports, builtins, cdnURL, importModule = (url) => import(
+	/* @vite-ignore */
+	url
+)) => {
+	const hostModules = {
+		"vue": builtins.vue,
+		"vue-router": builtins.vueRouter
+	};
+	const pendingBuiltins = /* @__PURE__ */ new Set();
+	const texts = /* @__PURE__ */ new Map();
+	const evaluated = /* @__PURE__ */ new Map();
+	const crawled = /* @__PURE__ */ new Set();
+	const nativeModules = /* @__PURE__ */ new Map();
+	const loadNative = (url) => {
+		let pending = nativeModules.get(url);
+		if (!pending) {
+			pending = importModule(url).then((module) => {
+				const exports = toHostModule(module);
+				evaluated.set(url, exports);
+				return exports;
+			});
+			nativeModules.set(url, pending);
+		}
+		return pending;
+	};
+	const localBuiltinId = (id) => {
+		if (imports[id] && !prefersLocalBuiltin(id, imports, cdnURL)) return null;
+		if (prefersLocalBuiltin(id, imports, cdnURL)) return id;
+		let cursor = id;
+		while (true) {
+			const slash = cursor.lastIndexOf("/");
+			if (slash <= 0) return null;
+			const parent = cursor.slice(0, slash);
+			if (prefersLocalBuiltin(parent, imports, cdnURL)) return parent;
+			cursor = parent;
+		}
+	};
+	const dependencyUrl = (from, specifier) => {
+		if (isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier)) return new URL(specifier, from).href;
+		if (imports[specifier] && !prefersLocalBuiltin(specifier, imports, cdnURL)) return imports[specifier];
+		if (HOST_VUE.has(specifier) && prefersLocalBuiltin(specifier, imports, cdnURL)) return null;
+		let cursor = specifier;
+		while (cursor) {
+			if (localBuiltinIds.has(cursor) && prefersLocalBuiltin(cursor, imports, cdnURL)) {
+				pendingBuiltins.add(cursor);
+				return null;
+			}
+			const slash = cursor.lastIndexOf("/");
+			if (slash <= 0) break;
+			cursor = cursor.slice(0, slash);
+		}
+		const target = imports[specifier] ? specifier : resolveImportTarget(specifier, imports);
+		if (!target) {
+			imports[specifier] = resolveNpmImport(specifier);
+			return imports[specifier];
+		}
+		return imports[target];
+	};
+	const crawl = async (url) => {
+		if (/\/\+esm(?:[?#]|$)/.test(url)) {
+			await loadNative(url);
+			return;
+		}
+		if (crawled.has(url)) return;
+		crawled.add(url);
+		const response = await fetch(url);
+		if (!response.ok) throw new Error(`${response.status} ${url}`);
+		const text = await response.text();
+		await init();
+		const [specifiers] = parse(text);
+		let source = text;
+		for (const item of [...specifiers].reverse()) if (item.type === "dynamic") source = source.slice(0, item.importStart) + "__import" + source.slice(item.importStart + 6);
+		texts.set(url, source);
+		await Promise.all(specifiers.map(async (item) => {
+			if (item.type !== "static" && item.type !== "reexport-star") return;
+			const next = dependencyUrl(url, item.specifier);
+			if (next) await crawl(next);
+		}));
+	};
+	const requireFrom = (from) => (id) => {
+		if (HOST_VUE.has(id) && prefersLocalBuiltin(id, imports, cdnURL)) return toHostModule(builtins.vue);
+		const builtinId = localBuiltinId(id);
+		if (builtinId) return toHostModule(hostModules[builtinId]);
+		if (isRelativeSpecifier(id) || /^https?:\/\//.test(id)) return evaluate(new URL(id, from).href);
+		const target = imports[id] ? id : resolveImportTarget(id, imports);
+		if (!target || !imports[target]) throw new Error(`[Playground] 未注册的模块 "${id}"`);
+		const loaded = evaluate(imports[target]);
+		if (target === id) return loaded;
+		if (!resolveHostModule(id, { [target]: loaded }))
+ /* istanbul ignore next -- 父包没有对应导出时才拒绝 */
+		throw new Error(`[Playground] 未注册的模块 "${id}"`);
+		return loaded;
+	};
+	const evaluate = (url) => {
+		if (evaluated.has(url)) return evaluated.get(url);
+		const text = texts.get(url);
+		if (text == null) throw new Error(`[Playground] 远程模块尚未下载: ${url}`);
+		const cjs = transform(rewriteImportMeta(text, url), {
+			transforms: ["imports"],
+			disableESTransforms: true,
+			production: true,
+			filePath: url
+		}).code;
+		const module = { exports: {} };
+		evaluated.set(url, module.exports);
+		new Function("require", "module", "exports", "__import", cjs)(requireFrom(url), module, module.exports, async (id) => {
+			const next = dependencyUrl(url, id);
+			if (next) await load(next);
+			else {
+				const builtinId = localBuiltinId(id);
+				if (builtinId && !(builtinId in hostModules)) hostModules[builtinId] = await ensureLocalBuiltin(builtinId);
+			}
+			return requireFrom(url)(id);
+		});
+		evaluated.set(url, module.exports);
+		return module.exports;
+	};
+	const loading = /* @__PURE__ */ new Map();
+	const load = (url) => {
+		const pending = loading.get(url);
+		if (pending) return pending;
+		const task = (async () => {
+			await crawl(url);
+			await Promise.all([...pendingBuiltins].map(async (id) => {
+				if (id === "vue" || id === "vue-router") return;
+				hostModules[id] = await ensureLocalBuiltin(id);
+			}));
+			return evaluate(url);
+		})();
+		loading.set(url, task);
+		return task;
+	};
+	return { load };
+};
+//#endregion
+//#region packages/playground/src/core/runtime/local/local-sandbox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = ["srcdoc"];
+var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "local-sandbox",
+	props: {
+		files: {},
+		entry: {},
+		options: {},
+		previewScroller: {
+			type: Boolean,
+			default: false
+		},
+		clearConsole: {
+			type: Boolean,
+			default: false
+		},
+		autoHeight: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["error"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bridgeSrcdoc = LOCAL_BRIDGE_SRCDOC;
+		const containerEl = ref(null);
+		const bridgeEl = ref(null);
+		const mountEl = ref(null);
+		const compileError = ref("");
+		const runtimeError = ref("");
+		const messageSource = shallowRef(null);
+		let port = null;
+		let previewApp = null;
+		let version = 0;
+		let pendingMount = null;
+		const styleId = `docs-local-${Math.random().toString(36).slice(2, 10)}`;
+		const publishError = () => {
+			emit("error", {
+				compile: compileError.value,
+				runtime: runtimeError.value
+			});
+		};
+		watch([compileError, runtimeError], publishError);
+		const createDocsLink = (preview) => defineComponent({
+			name: "DocsLink",
+			props: { to: {
+				type: String,
+				default: ""
+			} },
+			setup(linkProps, { slots }) {
+				return () => h("a", {
+					href: linkProps.to,
+					style: {
+						color: "inherit",
+						textDecoration: "none"
+					},
+					onClick(event) {
+						event.preventDefault();
+						preview.parent.postMessage({
+							action: "docs:navigate",
+							to: linkProps.to
+						});
+					}
+				}, slots.default?.());
+			}
+		});
+		const destroyPreview = () => {
+			previewApp?.unmount();
+			previewApp = null;
+			removeStyle(styleId);
+		};
+		const mountPreview = (component, preview, css) => {
+			if (!mountEl.value) return;
+			destroyPreview();
+			injectStyle(styleId, css);
+			if (props.clearConsole) console.clear();
+			const useScroller = props.previewScroller === true;
+			const app = Vue.createApp({
+				name: "LocalSandboxRoot",
+				setup() {
+					const service = createLocalPlayground(Vue);
+					provide("docs:playground", service);
+					onErrorCaptured((error) => {
+						const message = formatPlaygroundRuntimeError(error);
+						if (message) runtimeError.value = message;
+						return false;
+					});
+					onBeforeUnmount(() => service.dispose());
+					return () => {
+						const content = h(component);
+						if (!useScroller) return content;
+						return h(Scroller, {
+							height: "100%",
+							native: false,
+							autoResize: true,
+							showBar: true,
+							contentClass: PREVIEW_SCROLL_CONTENT_CLASS
+						}, { default: () => content });
+					};
+				}
+			});
+			app.component("DocsLink", createDocsLink(preview));
+			app.config.errorHandler = (error) => {
+				const message = formatPlaygroundRuntimeError(error);
+				if (message) runtimeError.value = message;
+			};
+			app.mount(mountEl.value);
+			previewApp = app;
+		};
+		const ensurePort = () => {
+			const iframe = bridgeEl.value;
+			if (!iframe?.contentWindow) return null;
+			try {
+				if (!installLocalBridge(iframe)) return null;
+			} catch {
+				return null;
+			}
+			port ??= new LocalPreviewPort(iframe);
+			messageSource.value = iframe.contentWindow;
+			return port;
+		};
+		const tryMount = async () => {
+			const job = pendingMount;
+			/* istanbul ignore if -- 桥接 iframe 尚未就绪或编译已被取代 */
+			if (!job || job.version !== version) return;
+			const preview = ensurePort();
+			/* istanbul ignore if -- 挂载点在编译完成时已经存在 */
+			if (!preview || !mountEl.value) return;
+			await nextTick();
+			/* istanbul ignore if -- 桥接 iframe 尚未就绪或编译已被取代 */
+			if (pendingMount !== job || !mountEl.value) return;
+			pendingMount = null;
+			mountPreview(job.component, preview, job.css);
+		};
+		const run = async () => {
+			const current = ++version;
+			pendingMount = null;
+			compileError.value = "";
+			runtimeError.value = "";
+			publishError();
+			destroyPreview();
+			try {
+				const { compilePlayground } = await import("./compile-CM_OyqYN.js");
+				/* istanbul ignore if -- 并发编译时只保留最后一次 */
+				if (current !== version) return;
+				const compiled = await compilePlayground(props.files, { entry: props.entry });
+				/* istanbul ignore if -- 并发编译时只保留最后一次 */
+				if (current !== version) return;
+				if (compiled.errors.length || !compiled.entry) {
+					compileError.value = compiled.errors.join("\n") || "[Playground] 未能确定入口";
+					publishError();
+					return;
+				}
+				const imports = createRuntimeImports(props.options.cdnURL, props.options.builtinImportMap);
+				const specifiers = collectBareSpecifiers(props.files, collectReachableFilenames(props.files, compiled.entry));
+				const remote = createRemoteLoader(imports, {
+					vue: Vue,
+					vueRouter: VueRouter
+				}, props.options.cdnURL);
+				const loaded = await loadLocalModules(specifiers, imports, {
+					vue: Vue,
+					vueRouter: VueRouter
+				}, (url) => remote.load(url), props.options.cdnURL);
+				/* istanbul ignore if -- 并发编译时只保留最后一次 */
+				if (current !== version) return;
+				if (loaded.errors.length) {
+					compileError.value = loaded.errors.join("\n");
+					publishError();
+					return;
+				}
+				const linked = linkPlayground(compiled, props.files, { modules: loaded.modules });
+				/* istanbul ignore if -- 并发编译时只保留最后一次 */
+				if (current !== version) return;
+				if (linked.errors.length || !linked.component) {
+					compileError.value = (linked.errors.length ? linked.errors : ["[Playground] 未能解析入口组件"]).join("\n");
+					publishError();
+					return;
+				}
+				pendingMount = {
+					component: linked.component,
+					css: linked.css,
+					version: current
+				};
+				await tryMount();
+			} catch (error) {
+				/* istanbul ignore next -- 编译器自身异常才进入，普通错误走结果里的 errors */
+				if (current !== version) return;
+				/* istanbul ignore next -- 同上，只兜底编译器抛错 */
+				compileError.value = error instanceof Error ? error.message : String(error);
+				/* istanbul ignore next -- 同上，只兜底编译器抛错 */
+				publishError();
+			}
+		};
+		const handleBridgeLoad = () => {
+			tryMount();
+		};
+		onMounted(() => {
+			run();
+		});
+		watch(() => [
+			props.files,
+			props.entry,
+			props.options,
+			props.previewScroller
+		], () => {
+			if (!containerEl.value) return;
+			run();
+		}, { deep: true });
+		onBeforeUnmount(() => {
+			version += 1;
+			pendingMount = null;
+			destroyPreview();
+		});
+		__expose({
+			container: containerEl,
+			messageSource,
+			local: true,
+			refresh: () => {
+				run();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerEl",
+				ref: containerEl,
+				class: "docs-playground-local"
+			}, [createElementVNode("iframe", {
+				ref_key: "bridgeEl",
+				ref: bridgeEl,
+				class: "docs-playground-local__bridge",
+				tabindex: "-1",
+				"aria-hidden": "true",
+				title: "",
+				srcdoc: unref(bridgeSrcdoc),
+				onLoad: handleBridgeLoad
+			}, null, 40, _hoisted_1$2), createElementVNode("div", {
+				ref_key: "mountEl",
+				ref: mountEl,
+				class: normalizeClass(["docs-playground-local__mount", { "docs-playground-local__mount--auto": __props.autoHeight }])
+			}, null, 2)], 512);
+		};
+	}
+});
+//#endregion
+//#region packages/playground/src/core/runtime/local/local-sandbox.vue
+var local_sandbox_exports = /* @__PURE__ */ __exportAll({ default: () => local_sandbox_default });
+var local_sandbox_default = local_sandbox_vue_vue_type_script_setup_true_lang_default;
+//#endregion
 //#region packages/playground/src/core/runtime/runtime.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = { class: "docs-playground-runtime-host" };
-var _hoisted_2$1 = {
+var _hoisted_1$1 = {
 	key: 0,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
-var _hoisted_3$1 = {
+var _hoisted_2$1 = {
 	key: 0,
 	class: "docs-playground__header"
 };
-var _hoisted_4$1 = ["id", "title"];
-var _hoisted_5$1 = ["href"];
-var _hoisted_6 = { class: "docs-playground__title-text" };
-var _hoisted_7 = {
+var _hoisted_3$1 = ["id", "title"];
+var _hoisted_4$1 = ["href"];
+var _hoisted_5$1 = { class: "docs-playground__title-text" };
+var _hoisted_6 = {
 	key: 1,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
-var _hoisted_8 = { class: "docs-playground-runtime__viewport-stage" };
-var _hoisted_9 = [
+var _hoisted_7 = { class: "docs-playground-runtime__viewport-stage" };
+var _hoisted_8 = [
 	"aria-expanded",
 	"title",
 	"aria-label"
@@ -1663,7 +3491,6 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		"navigate"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
-		const LocalSandbox = defineAsyncComponent(() => import("./local-sandbox-B8IJ5jWb.js").then((n) => n.t));
 		const props = __props;
 		const { locale, t } = useLocale();
 		const displayTitle = computed(() => props.title.trim());
@@ -1702,6 +3529,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		}.MODE !== "development";
 		const copyValue = computed(() => props.files[props.entry] || "");
 		const store = props.local ? null : createRuntimeStore(props.files, props.entry, props.options);
+		const storeReady = computed(() => store && !store.loading && Object.values(store.files).every((file) => isIgnoredFilename(file.filename) || !/\.(?:vue|[jt]sx?|json|s[ac]ss)$/.test(file.filename) || !file.code.trim() || !!file.compiled.js));
 		const sandboxRef = ref(null);
 		const localError = ref({
 			compile: "",
@@ -1928,16 +3756,16 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 			openPopup: handleOpenPopup
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$1, [__props.styleless ? (openBlock(), createElementBlock("div", {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["docs-playground-runtime-host", { "docs-playground-runtime-host--direct": __props.local && __props.styleless }]) }, [__props.styleless ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				ref_key: "runtimeRoot",
 				ref: runtimeRoot,
 				class: "docs-playground-runtime--styleless",
 				style: normalizeStyle(stylelessStyle.value)
-			}, [errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_2$1, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true), createElementVNode("div", {
+			}, [errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_1$1, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true), createElementVNode("div", {
 				class: "docs-playground-runtime__viewport",
 				style: normalizeStyle(viewportStyle.value)
-			}, [__props.local ? (openBlock(), createBlock(unref(LocalSandbox), {
+			}, [__props.local ? (openBlock(), createBlock(local_sandbox_default, {
 				key: 0,
 				ref_key: "sandboxRef",
 				ref: sandboxRef,
@@ -1946,13 +3774,15 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				options: __props.options,
 				"preview-scroller": __props.previewScroller,
 				"clear-console": clearConsole,
+				"auto-height": !unref(getViewportHeight)(__props.viewport),
 				onError: handleLocalError
 			}, null, 8, [
 				"files",
 				"entry",
 				"options",
-				"preview-scroller"
-			])) : unref(store) ? (openBlock(), createBlock(unref(Sandbox), {
+				"preview-scroller",
+				"auto-height"
+			])) : unref(store) && storeReady.value ? (openBlock(), createBlock(unref(Sandbox), {
 				key: 1,
 				ref_key: "sandboxRef",
 				ref: sandboxRef,
@@ -1965,7 +3795,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				ref: runtimeRoot,
 				class: "docs-playground-runtime"
 			}, [
-				!__props.hideChrome ? (openBlock(), createElementBlock("div", _hoisted_3$1, [displayTitle.value ? (openBlock(), createElementBlock("span", {
+				!__props.hideChrome ? (openBlock(), createElementBlock("div", _hoisted_2$1, [displayTitle.value ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					ref_key: "titleEl",
 					ref: titleEl,
@@ -1976,7 +3806,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				}, [createElementVNode("a", {
 					class: "docs-playground__title-anchor",
 					href: `#${titleId.value}`
-				}, "#", 8, _hoisted_5$1), createElementVNode("span", _hoisted_6, toDisplayString(displayTitle.value), 1)], 8, _hoisted_4$1)) : createCommentVNode("v-if", true), createVNode(toolbar_default, {
+				}, "#", 8, _hoisted_4$1), createElementVNode("span", _hoisted_5$1, toDisplayString(displayTitle.value), 1)], 8, _hoisted_3$1)) : createCommentVNode("v-if", true), createVNode(toolbar_default, {
 					"copy-value": copyValue.value,
 					viewport: __props.viewport,
 					"viewport-options": __props.viewportOptions,
@@ -1990,14 +3820,14 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 					"viewport",
 					"viewport-options"
 				])])) : createCommentVNode("v-if", true),
-				errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_7, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true),
+				errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_6, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true),
 				createElementVNode("section", {
 					class: normalizeClass(["docs-playground__preview", { "is-expanded": previewExpanded.value }]),
 					style: normalizeStyle(previewStyle.value)
-				}, [createElementVNode("div", _hoisted_8, [createElementVNode("div", {
+				}, [createElementVNode("div", _hoisted_7, [createElementVNode("div", {
 					class: "docs-playground-runtime__viewport",
 					style: normalizeStyle(viewportStyle.value)
-				}, [__props.local ? (openBlock(), createBlock(unref(LocalSandbox), {
+				}, [__props.local ? (openBlock(), createBlock(local_sandbox_default, {
 					key: sandboxKey.value,
 					ref_key: "sandboxRef",
 					ref: sandboxRef,
@@ -2006,13 +3836,15 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 					options: __props.options,
 					"preview-scroller": __props.previewScroller,
 					"clear-console": clearConsole,
+					"auto-height": !unref(getViewportHeight)(__props.viewport),
 					onError: handleLocalError
 				}, null, 8, [
 					"files",
 					"entry",
 					"options",
-					"preview-scroller"
-				])) : unref(store) ? (openBlock(), createBlock(unref(Sandbox), {
+					"preview-scroller",
+					"auto-height"
+				])) : unref(store) && storeReady.value ? (openBlock(), createBlock(unref(Sandbox), {
 					key: sandboxKey.value,
 					ref_key: "sandboxRef",
 					ref: sandboxRef,
@@ -2029,8 +3861,8 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 					title: expandLabel.value,
 					"aria-label": expandLabel.value,
 					onClick: handleTogglePreviewExpand
-				}, [createVNode(unref(icon_default), { name: "expand" })], 10, _hoisted_9)) : createCommentVNode("v-if", true)], 6)
-			], 512))]);
+				}, [createVNode(unref(icon_default), { name: "expand" })], 10, _hoisted_8)) : createCommentVNode("v-if", true)], 6)
+			], 512))], 2);
 		};
 	}
 });