@deot/docs-playground 1.0.9 → 1.0.10

package/dist/index.cjs

@@ -133,12 +133,14 @@ var PLAYGROUND_ICONS = {
 		"c.43-.63.66-1.08.92-1.81h2.37c.25.8.51 1.26.97 1.77l.03.05zM8.12 8.4H2.9",
 		"c-.64 0-1.17.53-1.17 1.19v10.75c0 .66.53 1.19 1.17 1.19h5.21c.65 0 1.18-.53 1.18-1.19V9.6",
 		"a1.16 1.16 0 0 0-1.17-1.19M8.1 20.36H2.94V9.64h5.15z"
-	].join(""))
+	].join("")),
+	expand: strokeIcon("M6 9l6 6 6-6"),
+	popup: strokeIcon(["M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3", "M3 16v3a2 2 0 0 0 2 2h3"].join(""))
 };
 //#endregion
 //#region packages/playground/src/icon/icon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$5 = ["fill", "stroke"];
-var _hoisted_2$4 = ["d"];
+var _hoisted_1$7 = ["fill", "stroke"];
+var _hoisted_2$6 = ["d"];
 //#endregion
 //#region packages/playground/src/icon/icon.vue
 var icon_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -169,7 +171,7 @@ var icon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round",
 				"aria-hidden": "true"
-			}, [(0, vue.createElementVNode)("path", { d: icon.value.path }, null, 8, _hoisted_2$4)], 12, _hoisted_1$5);
+			}, [(0, vue.createElementVNode)("path", { d: icon.value.path }, null, 8, _hoisted_2$6)], 12, _hoisted_1$7);
 		};
 	}
 });
@@ -178,7 +180,7 @@ var icon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var github_default = "pre code.hljs{display:block;padding:1em;overflow-x:auto}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{font-weight:700;color:#005cc5}.hljs-bullet{color:#735c0f}.hljs-emphasis{font-style:italic;color:#24292e}.hljs-strong{font-weight:700;color:#24292e}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}[data-doc-theme=dark] .hljs,[data-vc-theme=dark] .hljs{color:#c9d1d9;background:#0d1117}[data-doc-theme=dark] .hljs-doctag,[data-doc-theme=dark] .hljs-keyword,[data-doc-theme=dark] .hljs-meta .hljs-keyword,[data-doc-theme=dark] .hljs-template-tag,[data-doc-theme=dark] .hljs-template-variable,[data-doc-theme=dark] .hljs-type,[data-doc-theme=dark] .hljs-variable.language_,[data-vc-theme=dark] .hljs-doctag,[data-vc-theme=dark] .hljs-keyword,[data-vc-theme=dark] .hljs-meta .hljs-keyword,[data-vc-theme=dark] .hljs-template-tag,[data-vc-theme=dark] .hljs-template-variable,[data-vc-theme=dark] .hljs-type,[data-vc-theme=dark] .hljs-variable.language_{color:#ff7b72}[data-doc-theme=dark] .hljs-title,[data-doc-theme=dark] .hljs-title.class_,[data-doc-theme=dark] .hljs-title.function_,[data-vc-theme=dark] .hljs-title,[data-vc-theme=dark] .hljs-title.class_,[data-vc-theme=dark] .hljs-title.function_{color:#d2a8ff}[data-doc-theme=dark] .hljs-attr,[data-doc-theme=dark] .hljs-literal,[data-doc-theme=dark] .hljs-number,[data-doc-theme=dark] .hljs-variable,[data-vc-theme=dark] .hljs-attr,[data-vc-theme=dark] .hljs-literal,[data-vc-theme=dark] .hljs-number,[data-vc-theme=dark] .hljs-variable{color:#79c0ff}[data-doc-theme=dark] .hljs-regexp,[data-doc-theme=dark] .hljs-string,[data-vc-theme=dark] .hljs-regexp,[data-vc-theme=dark] .hljs-string{color:#a5d6ff}[data-doc-theme=dark] .hljs-code,[data-doc-theme=dark] .hljs-comment,[data-vc-theme=dark] .hljs-code,[data-vc-theme=dark] .hljs-comment{color:#8b949e}[data-doc-theme=dark] .hljs-name,[data-doc-theme=dark] .hljs-selector-tag,[data-vc-theme=dark] .hljs-name,[data-vc-theme=dark] .hljs-selector-tag{color:#7ee787}";
 //#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;overflow:hidden;font-size:12px;line-height:18px;text-overflow:ellipsis;white-space:nowrap}.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;width:28px;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;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:hover .docs-code-preview__copy{pointer-events:auto;opacity:1}.docs-code-preview__code{width:100%;min-height:0;margin:0;overflow:auto;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-code-preview__code,.docs-code-preview__code code.hljs{background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa))}.docs-code-preview__code code.hljs{min-height:100%;padding:12px 56px 12px 24px;-webkit-box-sizing:border-box;box-sizing:border-box}";
+var code_preview_default$1 = ".docs-code-preview{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:0;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border-radius:8px}.docs-code-preview__language{z-index:1;min-width:28px;padding:0 8px;font-size:12px;line-height:18px;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .15s ease;transition:opacity .15s ease}.docs-code-preview__copy,.docs-code-preview__language{position:absolute;top:6px;right:12px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:28px;color:var(--docs-foreground-color-mute,var(--vc-color-dark-extralight,#71717a));-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-code-preview__copy{z-index:2;width:28px;padding:0;pointer-events:none;cursor:pointer;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border:1px solid var(--docs-border-color,var(--vc-color-light-deeper,#d4d4d8));border-radius:8px;opacity:0;-webkit-transition:opacity .15s ease,background-color .15s ease;transition:opacity .15s ease,background-color .15s ease}.docs-code-preview__copy:hover{background:var(--docs-background-color,var(--vc-background-color-light,#fff))}.docs-code-preview__copy:focus-visible{pointer-events:auto;opacity:1}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__language,.docs-code-preview:hover .docs-code-preview__language{opacity:0}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__copy,.docs-code-preview:hover .docs-code-preview__copy{pointer-events:auto;opacity:1}.docs-code-preview__code{width:100%;min-height:0;margin:0;overflow:auto;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-code-preview__code,.docs-code-preview__code code.hljs{background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa))}.docs-code-preview__code code.hljs{min-height:100%;padding:12px 96px 12px 24px;-webkit-box-sizing:border-box;box-sizing:border-box}";
 //#endregion
 //#region packages/playground/src/core/code-preview/style.ts
 var CODE_PREVIEW_STYLE_ID = "docs-code-preview-style";
@@ -195,10 +197,10 @@ var ensureCodePreviewStyle = () => {
 };
 //#endregion
 //#region packages/playground/src/core/code-preview/code-preview.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$4 = { class: "docs-code-preview" };
-var _hoisted_2$3 = ["title"];
-var _hoisted_3$3 = { class: "docs-code-preview__code" };
-var _hoisted_4$3 = ["innerHTML"];
+var _hoisted_1$6 = { class: "docs-code-preview" };
+var _hoisted_2$5 = ["title"];
+var _hoisted_3$5 = { class: "docs-code-preview__code" };
+var _hoisted_4$5 = ["innerHTML"];
 //#endregion
 //#region packages/playground/src/core/code-preview/code-preview.vue
 var code_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -229,12 +231,12 @@ var code_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const highlightLanguage = (0, vue.computed)(() => props.language || resolveHighlightLanguage(props.filename));
 		const highlightedCode = (0, vue.computed)(() => highlightCodeByLanguage(props.code, highlightLanguage.value));
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$4, [
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$6, [
 				languageLabel.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
 					class: "docs-code-preview__language",
 					title: languageLabel.value
-				}, (0, vue.toDisplayString)(languageLabel.value), 9, _hoisted_2$3)) : (0, vue.createCommentVNode)("v-if", true),
+				}, (0, vue.toDisplayString)(languageLabel.value), 9, _hoisted_2$5)) : (0, vue.createCommentVNode)("v-if", true),
 				(0, vue.createVNode)((0, vue.unref)(_deot_vc.Clipboard), {
 					class: "docs-code-preview__copy",
 					value: __props.code,
@@ -251,10 +253,10 @@ var code_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"aria-label"
 				]),
 				(0, vue.createCommentVNode)(" eslint-disable-next-line vue/no-v-html "),
-				(0, vue.createElementVNode)("pre", _hoisted_3$3, [(0, vue.createElementVNode)("code", {
+				(0, vue.createElementVNode)("pre", _hoisted_3$5, [(0, vue.createElementVNode)("code", {
 					class: "hljs",
 					innerHTML: highlightedCode.value
-				}, null, 8, _hoisted_4$3)])
+				}, null, 8, _hoisted_4$5)])
 			]);
 		};
 	}
@@ -280,15 +282,15 @@ var filesEqual = (left, right) => {
 var playgroundViewMessage = (view) => view === "runtime" ? "playground.runtime.preview" : "playground.runtime.files";
 //#endregion
 //#region packages/playground/src/core/files-preview/files-preview.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$3 = { class: "docs-playground-files" };
-var _hoisted_2$2 = { class: "docs-playground-files__toolbar" };
-var _hoisted_3$2 = ["data-filename", "onClick"];
-var _hoisted_4$2 = {
+var _hoisted_1$5 = { class: "docs-playground-files" };
+var _hoisted_2$4 = { class: "docs-playground-files__toolbar" };
+var _hoisted_3$4 = ["data-filename", "onClick"];
+var _hoisted_4$4 = {
 	key: 0,
 	class: "docs-playground-files__entry"
 };
-var _hoisted_5$2 = { class: "docs-playground-files__actions" };
-var _hoisted_6$2 = {
+var _hoisted_5$4 = { class: "docs-playground-files__actions" };
+var _hoisted_6$3 = {
 	key: 0,
 	class: "docs-playground__views docs-playground__views--files"
 };
@@ -322,7 +324,7 @@ var files_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		};
 		const handleView = (view) => emit("view-change", view);
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$3, [(0, vue.createElementVNode)("div", _hoisted_2$2, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.Scroller), {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$5, [(0, vue.createElementVNode)("div", _hoisted_2$4, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.Scroller), {
 				class: "docs-playground-files__scroller",
 				"auto-resize": true,
 				native: false,
@@ -339,10 +341,10 @@ var files_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						class: (0, vue.normalizeClass)(["docs-playground-files__tab", { "is-active": filename === __props.activeFilename }]),
 						"data-filename": filename,
 						onClick: ($event) => handleActive(filename)
-					}, [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(filename), 1), filename === __props.entry ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("small", _hoisted_4$2, (0, vue.toDisplayString)((0, vue.unref)(t)("playground.files.entry")), 1)) : (0, vue.createCommentVNode)("v-if", true)], 10, _hoisted_3$2);
+					}, [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(filename), 1), filename === __props.entry ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("small", _hoisted_4$4, (0, vue.toDisplayString)((0, vue.unref)(t)("playground.files.entry")), 1)) : (0, vue.createCommentVNode)("v-if", true)], 10, _hoisted_3$4);
 				}), 128))]),
 				_: 1
-			}), (0, vue.createElementVNode)("div", _hoisted_5$2, [__props.views.length > 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6$2, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.views, (item) => {
+			}), (0, vue.createElementVNode)("div", _hoisted_5$4, [__props.views.length > 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6$3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.views, (item) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: item,
 					type: "button",
@@ -483,25 +485,26 @@ var Drag = class {
 };
 //#endregion
 //#region packages/playground/src/editor/editor.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = { class: "docs-playground-editor" };
-var _hoisted_2$1 = ["title"];
-var _hoisted_3$1 = { class: "docs-playground-editor__files" };
-var _hoisted_4$1 = [
+var _hoisted_1$4 = { class: "docs-playground-editor" };
+var _hoisted_2$3 = ["title"];
+var _hoisted_3$3 = { class: "docs-playground-editor__files" };
+var _hoisted_4$3 = [
 	"data-filename",
 	"onClick",
 	"onDblclick"
 ];
-var _hoisted_5$1 = ["onKeydown"];
-var _hoisted_6$1 = ["title"];
+var _hoisted_5$3 = ["onKeydown"];
+var _hoisted_6$2 = ["title"];
 var _hoisted_7$1 = ["title", "aria-label"];
 var _hoisted_8$1 = ["title", "aria-label"];
-var _hoisted_9$1 = { class: "docs-playground-editor__actions" };
-var _hoisted_10$1 = ["title"];
-var _hoisted_11$1 = ["title", "disabled"];
+var _hoisted_9 = { class: "docs-playground-editor__actions" };
+var _hoisted_10 = ["title"];
+var _hoisted_11 = ["title", "disabled"];
 var _hoisted_12 = {
 	key: 0,
 	class: "docs-playground-editor__error"
 };
+var EDITOR_SCROLLER_MAX_HEIGHT = "calc(100vh - 110px)";
 //#endregion
 //#region packages/playground/src/editor/editor.vue
 var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -530,6 +533,7 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	},
 	setup(__props) {
 		const SUPPORTED_FILE_RE = /\.(vue|js|ts|jsx|tsx|css|s[ac]ss|json|html)$/i;
+		/** 浮层留白 20px + 标题栏 44px + 文件栏 46px，避免大文件把标签栏挤扁。 */
 		const props = __props;
 		const { t } = (0, _deot_docs_locale.useLocale)((0, vue.computed)(() => props.locale));
 		const initialFiles = Object.keys(props.files).length ? props.files : { "App.vue": props.value };
@@ -541,6 +545,7 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const textarea = (0, vue.ref)(null);
 		const filenameInput = (0, vue.ref)(null);
 		const scroller = (0, vue.ref)(null);
+		const editorScroller = (0, vue.ref)(null);
 		const editor = (0, vue.ref)(null);
 		const bar = (0, vue.ref)(null);
 		const wrapper = (0, vue.ref)(null);
@@ -548,6 +553,10 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const renamingFilename = (0, vue.ref)("");
 		const filenameDraft = (0, vue.ref)("");
 		const codeErrorText = (0, vue.computed)(() => props.getCodeErrors().map((item) => item instanceof Error ? item.message : item).join("\n"));
+		let editorResize;
+		const refreshEditorScroller = () => {
+			editorScroller.value?.refresh();
+		};
 		const setFilenameInput = (el) => {
 			filenameInput.value = el instanceof HTMLInputElement ? el : null;
 		};
@@ -585,11 +594,13 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							filename
 						});
 						if (filename === currentEntry.value) props.onChange(code);
+						(0, vue.nextTick)(refreshEditorScroller);
 					})
 				],
 				parent: textarea.value
 			});
 			editor.value.focus();
+			(0, vue.nextTick)(refreshEditorScroller);
 		};
 		const handleActive = (filename) => {
 			if (filename === activeFilename.value || editorFiles.value[filename] === void 0) return;
@@ -713,13 +724,18 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				wrapper: wrapper.value,
 				container: window
 			});
+			if (typeof ResizeObserver !== "undefined") {
+				editorResize = new ResizeObserver(refreshEditorScroller);
+				editorResize.observe(textarea.value);
+			}
 		});
 		(0, vue.onBeforeUnmount)(() => {
+			editorResize?.disconnect();
 			drag.value?.off();
 			editor.value?.destroy();
 		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$2, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.TransitionFade), { onAfterLeave: handleHide }, {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$4, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.TransitionFade), { onAfterLeave: handleHide }, {
 				default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createElementVNode)("div", {
 					ref_key: "wrapper",
 					ref: wrapper,
@@ -736,8 +752,8 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						title: (0, vue.unref)(t)("playground.common.close"),
 						style: { "cursor": "pointer" },
 						onClick: handleHide
-					}, "✕", 8, _hoisted_2$1)], 512),
-					(0, vue.createElementVNode)("div", _hoisted_3$1, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.Scroller), {
+					}, "✕", 8, _hoisted_2$3)], 512),
+					(0, vue.createElementVNode)("div", _hoisted_3$3, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.Scroller), {
 						ref_key: "scroller",
 						ref: scroller,
 						class: "docs-playground-editor__scroller",
@@ -765,11 +781,11 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								onDblclick: _cache[2] || (_cache[2] = (0, vue.withModifiers)(() => {}, ["stop"])),
 								onBlur: handleRenameSubmit,
 								onKeydown: [(0, vue.withKeys)((0, vue.withModifiers)(handleRenameSubmit, ["prevent"]), ["enter"]), (0, vue.withKeys)((0, vue.withModifiers)(handleRenameCancel, ["prevent"]), ["esc"])]
-							}, null, 40, _hoisted_5$1)), [[vue.vModelText, filenameDraft.value]]) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
+							}, null, 40, _hoisted_5$3)), [[vue.vModelText, filenameDraft.value]]) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
 								filename === currentEntry.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 									key: 0,
 									title: (0, vue.unref)(t)("playground.editor.entry")
-								}, "●", 8, _hoisted_6$1)) : (0, vue.createCommentVNode)("v-if", true),
+								}, "●", 8, _hoisted_6$2)) : (0, vue.createCommentVNode)("v-if", true),
 								(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(filename), 1),
 								filename === currentEntry.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 									key: 1,
@@ -794,25 +810,37 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									}, null, 8, _hoisted_8$1)]),
 									_: 2
 								}, 1032, ["title", "onOk"]))
-							], 64))], 42, _hoisted_4$1);
+							], 64))], 42, _hoisted_4$3);
 						}), 128))]),
 						_: 1
-					}, 512), (0, vue.createElementVNode)("div", _hoisted_9$1, [(0, vue.createElementVNode)("button", {
+					}, 512), (0, vue.createElementVNode)("div", _hoisted_9, [(0, vue.createElementVNode)("button", {
 						type: "button",
 						title: (0, vue.unref)(t)("playground.editor.createFile"),
 						onClick: handleCreate
-					}, "＋", 8, _hoisted_10$1), (0, vue.createElementVNode)("button", {
+					}, "＋", 8, _hoisted_10), (0, vue.createElementVNode)("button", {
 						type: "button",
 						title: (0, vue.unref)(t)("playground.editor.setEntry"),
 						disabled: activeFilename.value === currentEntry.value,
 						onClick: handleEntry
-					}, (0, vue.toDisplayString)((0, vue.unref)(t)("playground.editor.setEntry")), 9, _hoisted_11$1)])]),
+					}, (0, vue.toDisplayString)((0, vue.unref)(t)("playground.editor.setEntry")), 9, _hoisted_11)])]),
 					codeErrorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_12, (0, vue.toDisplayString)(codeErrorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
-					(0, vue.createElementVNode)("div", {
-						ref_key: "textarea",
-						ref: textarea,
-						class: "docs-playground-editor__editor"
-					}, null, 512)
+					(0, vue.createVNode)((0, vue.unref)(_deot_vc.Scroller), {
+						ref_key: "editorScroller",
+						ref: editorScroller,
+						class: "docs-playground-editor__body",
+						"auto-resize": true,
+						native: false,
+						"show-bar": true,
+						always: true,
+						"max-height": EDITOR_SCROLLER_MAX_HEIGHT
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
+							ref_key: "textarea",
+							ref: textarea,
+							class: "docs-playground-editor__editor"
+						}, null, 512)]),
+						_: 1
+					}, 512)
 				], 512), [[vue.vShow, isActive.value]])]),
 				_: 1
 			})]);
@@ -931,6 +959,77 @@ var useSandboxAutoHeight = (sandboxRef) => {
 	});
 	return height;
 };
+var CLIPPING_OVERFLOW = /* @__PURE__ */ new Set([
+	"auto",
+	"scroll",
+	"hidden",
+	"overlay"
+]);
+var SCROLLABLE_OVERFLOW = /* @__PURE__ */ new Set([
+	"auto",
+	"scroll",
+	"overlay"
+]);
+var getWindowInnerHeight = () => typeof window === "undefined" ? 0 : window.innerHeight;
+var getPlaygroundHost = (el) => el?.closest(".docs-playground") ?? el;
+var isPlaygroundExpandEnabled = (expand) => {
+	if (expand === true) return true;
+	return typeof expand === "number" && Number.isFinite(expand) && expand > 0;
+};
+var resolveRemainingPreviewHeight = ({ viewportHeight, chromeHeight, gap = 16 }) => Math.max(0, Math.round((Number.isFinite(viewportHeight) ? viewportHeight : 0) - (Number.isFinite(chromeHeight) ? Math.max(0, chromeHeight) : 0) - (Number.isFinite(gap) ? gap : 16)));
+var resolveExpandedPreviewHeight = (expand, availableHeight) => {
+	if (expand === true) return Math.max(24, Math.round(Number.isFinite(availableHeight) ? availableHeight : 0));
+	return Math.max(24, Math.round(expand));
+};
+var getVisibleViewportRect = (el) => {
+	const viewportHeight = getWindowInnerHeight();
+	let top = 0;
+	let bottom = viewportHeight;
+	if (typeof window === "undefined" || !el) return {
+		top,
+		bottom,
+		height: Math.max(0, Math.round(bottom - top))
+	};
+	let node = getPlaygroundHost(el)?.parentElement ?? null;
+	while (node && node !== document.documentElement) {
+		const overflowY = getComputedStyle(node).overflowY;
+		if (CLIPPING_OVERFLOW.has(overflowY)) {
+			const rect = node.getBoundingClientRect();
+			if (Number.isFinite(rect.top)) top = Math.max(top, rect.top);
+			if (Number.isFinite(rect.bottom)) bottom = Math.min(bottom, rect.bottom);
+		}
+		node = node.parentElement;
+	}
+	return {
+		top,
+		bottom,
+		height: Math.max(0, Math.round(bottom - top))
+	};
+};
+var findScrollableAncestor = (el) => {
+	if (!el || typeof window === "undefined") return null;
+	let node = getPlaygroundHost(el)?.parentElement ?? null;
+	while (node && node !== document.documentElement) {
+		const overflowY = getComputedStyle(node).overflowY;
+		if (SCROLLABLE_OVERFLOW.has(overflowY) && node.scrollHeight > node.clientHeight + 1) return node;
+		node = node.parentElement;
+	}
+	return null;
+};
+var scrollPlaygroundToViewportStart = (el) => {
+	if (!el) return;
+	const host = getPlaygroundHost(el) ?? el;
+	const scroller = findScrollableAncestor(host);
+	if (scroller) {
+		const delta = host.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+		scroller.scrollTop = Math.max(0, scroller.scrollTop + delta);
+		return;
+	}
+	if (typeof host.scrollIntoView === "function") host.scrollIntoView({
+		block: "start",
+		behavior: "auto"
+	});
+};
 //#endregion
 //#region packages/playground/src/core/runtime/error-guard.ts
 var UNKNOWN_RUNTIME_ERROR = "运行时发生未知错误";
@@ -994,6 +1093,89 @@ var useSandboxRuntimeErrorGuard = (sandboxRef) => {
 	return error;
 };
 //#endregion
+//#region packages/playground/src/core/runtime/viewport.ts
+var DEFAULT_VIEWPORT_OPTIONS = ["auto", 375];
+var isValidViewport = (viewport) => {
+	if (viewport === "auto") return true;
+	if (typeof viewport === "number") return Number.isFinite(viewport) && viewport > 0;
+	return Array.isArray(viewport) && viewport.length === 2 && viewport.every((value) => typeof value === "number" && Number.isFinite(value) && value > 0);
+};
+var getViewportKey = (viewport) => Array.isArray(viewport) ? `${viewport[0]}x${viewport[1]}` : String(viewport);
+var viewportEquals = (left, right) => getViewportKey(left) === getViewportKey(right);
+var cloneViewport = (viewport) => Array.isArray(viewport) ? [viewport[0], viewport[1]] : viewport;
+var normalizeViewportOptions = (options) => {
+	const source = options === void 0 ? DEFAULT_VIEWPORT_OPTIONS : options;
+	const normalized = [];
+	for (const viewport of source) {
+		if (!isValidViewport(viewport)) continue;
+		if (normalized.some((item) => viewportEquals(item, viewport))) continue;
+		normalized.push(cloneViewport(viewport));
+	}
+	return normalized;
+};
+var resolveInitialViewport = (viewport, options) => isValidViewport(viewport) ? cloneViewport(viewport) : cloneViewport(options[0] || "auto");
+var includeActiveViewport = (options, viewport) => {
+	if (!options.length || options.some((item) => viewportEquals(item, viewport))) return options;
+	return [...options, cloneViewport(viewport)];
+};
+var getViewportWidth = (viewport) => {
+	if (viewport === "auto") return null;
+	return Array.isArray(viewport) ? viewport[0] : viewport;
+};
+var getViewportHeight = (viewport) => Array.isArray(viewport) ? viewport[1] : null;
+var formatViewportLabel = (viewport, autoLabel = "Auto") => {
+	if (viewport === "auto") return autoLabel;
+	return Array.isArray(viewport) ? `${viewport[0]} × ${viewport[1]}px` : `${viewport}px`;
+};
+var getWindowInnerSize = () => {
+	if (typeof window === "undefined") return {
+		width: 0,
+		height: 0
+	};
+	return {
+		width: window.innerWidth,
+		height: window.innerHeight
+	};
+};
+var resolvePopupRequestedSize = (viewport, screen = getWindowInnerSize(), gap = 40) => {
+	const safeGap = Number.isFinite(gap) ? Math.max(0, gap) : 40;
+	const maxWidth = Math.max(0, Math.round((Number.isFinite(screen.width) ? screen.width : 0) - safeGap));
+	const maxHeight = Math.max(0, Math.round((Number.isFinite(screen.height) ? screen.height : 0) - safeGap));
+	const viewportWidth = getViewportWidth(viewport);
+	const viewportHeight = getViewportHeight(viewport);
+	return {
+		width: viewportWidth ?? maxWidth,
+		height: viewportHeight ?? maxHeight,
+		maxWidth,
+		maxHeight
+	};
+};
+/**
+* 壳层封顶到 `screen - gap`。未设 viewport 边时，画布铺满工具栏以下区域；
+* 请求尺寸大于可用区域时由 Scroller 处理溢出。
+* @param viewport 当前 playground 视口配置。
+* @param screen 屏幕可用宽高，默认取 `window.inner*`.
+* @param gap 相对屏幕边缘的留白。
+* @returns 壳层、内容区与画布尺寸，以及是否需要滚动。
+*/
+var resolvePopupLayout = (viewport, screen = getWindowInnerSize(), gap = 40) => {
+	const requested = resolvePopupRequestedSize(viewport, screen, gap);
+	const shellWidth = Math.min(requested.width, requested.maxWidth);
+	const shellHeight = Math.min(requested.height, requested.maxHeight);
+	const bodyHeight = Math.max(0, shellHeight - 44);
+	const canvasWidth = getViewportWidth(viewport) ?? shellWidth;
+	const canvasHeight = getViewportHeight(viewport) ?? bodyHeight;
+	return {
+		shellWidth,
+		shellHeight,
+		bodyHeight,
+		canvasWidth,
+		canvasHeight,
+		needsScrollX: canvasWidth > shellWidth,
+		needsScrollY: canvasHeight > bodyHeight
+	};
+};
+//#endregion
 //#region packages/playground/src/core/runtime/theme.ts
 var resolveElementTheme = (element) => {
 	const vcTheme = element?.getAttribute("data-vc-theme");
@@ -1086,40 +1268,157 @@ var useSandboxTheme = (sandboxRef) => {
 	});
 };
 //#endregion
-//#region packages/playground/src/core/runtime/viewport.ts
-var DEFAULT_VIEWPORT_OPTIONS = ["auto", 375];
-var isValidViewport = (viewport) => {
-	if (viewport === "auto") return true;
-	if (typeof viewport === "number") return Number.isFinite(viewport) && viewport > 0;
-	return Array.isArray(viewport) && viewport.length === 2 && viewport.every((value) => typeof value === "number" && Number.isFinite(value) && value > 0);
-};
-var getViewportKey = (viewport) => Array.isArray(viewport) ? `${viewport[0]}x${viewport[1]}` : String(viewport);
-var viewportEquals = (left, right) => getViewportKey(left) === getViewportKey(right);
-var cloneViewport = (viewport) => Array.isArray(viewport) ? [viewport[0], viewport[1]] : viewport;
-var normalizeViewportOptions = (options) => {
-	const source = options === void 0 ? DEFAULT_VIEWPORT_OPTIONS : options;
-	const normalized = [];
-	for (const viewport of source) {
-		if (!isValidViewport(viewport)) continue;
-		if (normalized.some((item) => viewportEquals(item, viewport))) continue;
-		normalized.push(cloneViewport(viewport));
+//#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$2 = ["title", "aria-label"];
+var _hoisted_3$2 = [
+	"title",
+	"aria-label",
+	"aria-expanded"
+];
+var _hoisted_4$2 = ["title", "aria-label"];
+var _hoisted_5$2 = ["title", "aria-label"];
+var _hoisted_6$1 = ["title", "aria-label"];
+//#endregion
+//#region packages/playground/src/core/runtime/toolbar.vue
+var toolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "toolbar",
+	props: {
+		copyValue: {},
+		viewport: { default: "auto" },
+		viewportOptions: { default: () => ["auto", 375] },
+		showOpenPopup: {
+			type: Boolean,
+			default: false
+		},
+		showClose: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"refresh",
+		"edit",
+		"open-popup",
+		"close-popup",
+		"viewport-change"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = (0, _deot_docs_locale.useLocale)();
+		const viewportMenuVisible = (0, vue.ref)(false);
+		const viewportLabel = (0, vue.computed)(() => formatViewportLabel(props.viewport, t("playground.runtime.auto")));
+		const handleViewport = (index) => {
+			const viewport = props.viewportOptions[index];
+			if (viewport && !viewportEquals(viewport, props.viewport)) emit("viewport-change", viewport);
+		};
+		(0, vue.watch)(() => props.viewportOptions.length, (length) => {
+			if (length <= 1) viewportMenuVisible.value = false;
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$3, [
+				(0, vue.createElementVNode)("button", {
+					type: "button",
+					class: "docs-playground__tool docs-playground__refresh",
+					"data-action": "refresh",
+					title: (0, vue.unref)(t)("playground.runtime.refresh"),
+					"aria-label": (0, vue.unref)(t)("playground.runtime.refresh"),
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("refresh"))
+				}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "refresh" })], 8, _hoisted_2$2),
+				__props.viewportOptions.length > 1 ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_deot_vc.Dropdown), {
+					key: 0,
+					modelValue: viewportMenuVisible.value,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => viewportMenuVisible.value = $event),
+					class: "docs-playground__viewport-menu",
+					portal: true,
+					trigger: "click",
+					placement: "bottom-right"
+				}, {
+					content: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_deot_vc.DropdownMenu), {
+						class: "docs-playground__viewport-options",
+						role: "menu",
+						"aria-label": (0, vue.unref)(t)("playground.runtime.viewportMenu")
+					}, {
+						default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.viewportOptions, (item, index) => {
+							return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_deot_vc.DropdownItem), {
+								key: (0, vue.unref)(getViewportKey)(item),
+								class: "docs-playground__viewport-option",
+								value: index,
+								selected: (0, vue.unref)(viewportEquals)(item, __props.viewport),
+								role: "menuitemradio",
+								"aria-checked": (0, vue.unref)(viewportEquals)(item, __props.viewport),
+								onClick: ($event) => handleViewport(index)
+							}, {
+								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(formatViewportLabel)(item, (0, vue.unref)(t)("playground.runtime.auto"))), 1)]),
+								_: 2
+							}, 1032, [
+								"value",
+								"selected",
+								"aria-checked",
+								"onClick"
+							]);
+						}), 128))]),
+						_: 1
+					}, 8, ["aria-label"])]),
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("button", {
+						type: "button",
+						class: (0, vue.normalizeClass)(["docs-playground__tool docs-playground__viewport-trigger", { "is-active": __props.viewport !== "auto" }]),
+						title: (0, vue.unref)(t)("playground.runtime.viewport", { value: viewportLabel.value }),
+						"aria-label": (0, vue.unref)(t)("playground.runtime.viewport", { value: viewportLabel.value }),
+						"aria-expanded": viewportMenuVisible.value,
+						"aria-haspopup": "menu"
+					}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "viewport" })], 10, _hoisted_3$2)]),
+					_: 1
+				}, 8, ["modelValue"])) : (0, vue.createCommentVNode)("v-if", true),
+				(0, vue.createVNode)((0, vue.unref)(_deot_vc.Clipboard), {
+					class: "docs-playground__tool",
+					value: __props.copyValue,
+					tag: "button",
+					type: "button",
+					title: (0, vue.unref)(t)("playground.common.copy"),
+					"aria-label": (0, vue.unref)(t)("playground.common.copy")
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "copy" })]),
+					_: 1
+				}, 8, [
+					"value",
+					"title",
+					"aria-label"
+				]),
+				(0, vue.createElementVNode)("button", {
+					type: "button",
+					class: "docs-playground__tool docs-playground__editor",
+					"data-action": "edit",
+					title: (0, vue.unref)(t)("playground.runtime.editFiles"),
+					"aria-label": (0, vue.unref)(t)("playground.runtime.editFiles"),
+					onClick: _cache[2] || (_cache[2] = ($event) => emit("edit"))
+				}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "editor" })], 8, _hoisted_4$2),
+				__props.showOpenPopup ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+					key: 1,
+					type: "button",
+					class: "docs-playground__tool docs-playground__popup",
+					"data-action": "open-popup",
+					title: (0, vue.unref)(t)("playground.runtime.openPopup"),
+					"aria-label": (0, vue.unref)(t)("playground.runtime.openPopup"),
+					onClick: _cache[3] || (_cache[3] = ($event) => emit("open-popup"))
+				}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "popup" })], 8, _hoisted_5$2)) : (0, vue.createCommentVNode)("v-if", true),
+				__props.showClose ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+					key: 2,
+					type: "button",
+					class: "docs-playground__tool docs-playground__popup-close",
+					"data-action": "close-popup",
+					title: (0, vue.unref)(t)("playground.runtime.closePopup"),
+					"aria-label": (0, vue.unref)(t)("playground.runtime.closePopup"),
+					onClick: _cache[4] || (_cache[4] = ($event) => emit("close-popup"))
+				}, [..._cache[5] || (_cache[5] = [(0, vue.createElementVNode)("span", {
+					class: "docs-playground__popup-close-mark",
+					"aria-hidden": "true"
+				}, "✕", -1)])], 8, _hoisted_6$1)) : (0, vue.createCommentVNode)("v-if", true)
+			]);
+		};
 	}
-	return normalized;
-};
-var resolveInitialViewport = (viewport, options) => isValidViewport(viewport) ? cloneViewport(viewport) : cloneViewport(options[0] || "auto");
-var includeActiveViewport = (options, viewport) => {
-	if (!options.length || options.some((item) => viewportEquals(item, viewport))) return options;
-	return [...options, cloneViewport(viewport)];
-};
-var getViewportWidth = (viewport) => {
-	if (viewport === "auto") return null;
-	return Array.isArray(viewport) ? viewport[0] : viewport;
-};
-var getViewportHeight = (viewport) => Array.isArray(viewport) ? viewport[1] : null;
-var formatViewportLabel = (viewport, autoLabel = "Auto") => {
-	if (viewport === "auto") return autoLabel;
-	return Array.isArray(viewport) ? `${viewport[0]} × ${viewport[1]}px` : `${viewport}px`;
-};
+});
 //#endregion
 //#region packages/playground/src/cdn.ts
 var PREVIEW_STYLE_ASSETS = [
@@ -1468,6 +1767,12 @@ var DOCS_LINK_USE_CODE = [
 	"})"
 ].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) => {
 	return {
 		showRuntimeError: false,
@@ -1481,8 +1786,8 @@ var createRuntimePreviewOptions = (cdnURL = DEFAULT_CDN_URL) => {
 				...getPlaygroundStyleOverrides()
 			}).map((href) => `<link rel="stylesheet" href="${escapeHtmlAttr(href)}">`),
 			"<style>",
-			"html,body{height:auto;min-height:0}",
-			"body{color:var(--vc-foreground-color,#080f20);background:var(--vc-background-color-light,#fff)}",
+			`html,body{height:auto;min-height:0;background:${PLAYGROUND_RUNTIME_CANVAS_BACKGROUND}}`,
+			"body{color:var(--vc-foreground-color,#080f20)}",
 			"</style>"
 		].join("\n"),
 		customCode: {
@@ -1528,41 +1833,206 @@ var createRuntimeStore = (files, entry, options) => {
 	return store;
 };
 //#endregion
-//#region packages/playground/src/core/runtime/runtime.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = {
+//#region packages/playground/src/core/runtime/alone/wrapper.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = ["aria-label"];
+var _hoisted_2$1 = { class: "docs-playground-popup__frame" };
+var _hoisted_3$1 = { class: "docs-playground-popup__header" };
+var _hoisted_4$1 = {
 	key: 0,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
+var _hoisted_5$1 = { class: "docs-playground-popup__body" };
+//#endregion
+//#region packages/playground/src/core/runtime/alone/wrapper.vue
+var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "wrapper",
+	props: {
+		store: {},
+		copyValue: {},
+		viewport: { default: "auto" },
+		viewportOptions: { default: () => ["auto", 375] },
+		previewOptions: {},
+		clearConsole: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"edit",
+		"navigate",
+		"viewport-change",
+		"portal-fulfilled"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = (0, _deot_docs_locale.useLocale)();
+		const currentViewport = (0, vue.ref)(props.viewport);
+		const sandboxRef = (0, vue.ref)(null);
+		const sandboxKey = (0, vue.ref)(0);
+		const layoutTick = (0, vue.ref)(0);
+		const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
+		useSandboxTheme(sandboxRef);
+		const storeErrors = (0, vue.computed)(() => (props.store.errors || []).map(toErrorText).filter(Boolean).join("\n"));
+		const errorText = (0, vue.computed)(() => {
+			const runtime = runtimeError.value ? formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip")) : "";
+			return [storeErrors.value, runtime].filter(Boolean).join("\n\n");
+		});
+		const layout = (0, vue.computed)(() => {
+			layoutTick.value;
+			return resolvePopupLayout(currentViewport.value);
+		});
+		const shellStyle = (0, vue.computed)(() => ({
+			width: `${layout.value.shellWidth}px`,
+			height: `${layout.value.shellHeight}px`
+		}));
+		const canvasStyle = (0, vue.computed)(() => ({
+			width: `${layout.value.canvasWidth}px`,
+			height: `${layout.value.canvasHeight}px`,
+			background: PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
+		}));
+		const handleRefresh = () => {
+			runtimeError.value = "";
+			sandboxKey.value++;
+		};
+		const handleViewportChange = (viewport) => {
+			currentViewport.value = viewport;
+			emit("viewport-change", viewport);
+		};
+		const handleClose = () => emit("portal-fulfilled");
+		const isPlaygroundEditorOpen = () => {
+			if (typeof document === "undefined") return false;
+			const editor = document.querySelector(".docs-playground-editor__wrapper");
+			if (!(editor instanceof HTMLElement)) return false;
+			const style = getComputedStyle(editor);
+			return style.display !== "none" && style.visibility !== "hidden";
+		};
+		const handleKeydown = (event) => {
+			if (event.key !== "Escape") return;
+			if (isPlaygroundEditorOpen()) return;
+			event.preventDefault();
+			handleClose();
+		};
+		const handleResize = () => {
+			layoutTick.value++;
+		};
+		const handleBridgeMessage = (event) => {
+			const iframe = resolveSandboxContainer(sandboxRef.value)?.querySelector("iframe");
+			if (!iframe || event.source !== iframe.contentWindow) return;
+			const data = event.data;
+			if (!data || data.action !== "docs:navigate" || typeof data.to !== "string") return;
+			emit("navigate", data.to);
+		};
+		(0, vue.watch)(() => props.viewport, (viewport) => {
+			currentViewport.value = viewport;
+		});
+		if (typeof window !== "undefined") {
+			window.addEventListener("keydown", handleKeydown);
+			window.addEventListener("resize", handleResize);
+			window.addEventListener("message", handleBridgeMessage);
+		}
+		(0, vue.onBeforeUnmount)(() => {
+			window.removeEventListener("keydown", handleKeydown);
+			window.removeEventListener("resize", handleResize);
+			window.removeEventListener("message", handleBridgeMessage);
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: "docs-playground-popup",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": (0, vue.unref)(t)("playground.runtime.openPopup")
+			}, [(0, vue.createElementVNode)("div", {
+				class: "docs-playground-popup__mask",
+				"data-action": "popup-mask",
+				onClick: handleClose
+			}), (0, vue.createElementVNode)("div", {
+				class: "docs-playground-popup__shell",
+				style: (0, vue.normalizeStyle)(shellStyle.value)
+			}, [(0, vue.createElementVNode)("div", _hoisted_2$1, [
+				(0, vue.createElementVNode)("div", _hoisted_3$1, [(0, vue.createVNode)(toolbar_default, {
+					"copy-value": __props.copyValue,
+					viewport: currentViewport.value,
+					"viewport-options": __props.viewportOptions,
+					"show-close": true,
+					onRefresh: handleRefresh,
+					onEdit: _cache[0] || (_cache[0] = ($event) => emit("edit")),
+					onClosePopup: handleClose,
+					onViewportChange: handleViewportChange
+				}, null, 8, [
+					"copy-value",
+					"viewport",
+					"viewport-options"
+				])]),
+				errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_4$1, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
+				(0, vue.createElementVNode)("div", _hoisted_5$1, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.Scroller), {
+					class: "docs-playground-popup__scroller",
+					"content-class": "docs-playground-popup__scroller-content",
+					"auto-resize": true,
+					native: false,
+					"show-bar": true,
+					height: "100%"
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
+						class: "docs-playground-popup__canvas",
+						style: (0, vue.normalizeStyle)(canvasStyle.value)
+					}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
+						key: sandboxKey.value,
+						ref_key: "sandboxRef",
+						ref: sandboxRef,
+						store: __props.store,
+						"auto-store-init": false,
+						"clear-console": __props.clearConsole,
+						"preview-options": __props.previewOptions
+					}, null, 8, [
+						"store",
+						"clear-console",
+						"preview-options"
+					]))], 4)]),
+					_: 1
+				})])
+			])], 4)], 8, _hoisted_1$2);
+		};
+	}
+});
+//#endregion
+//#region packages/playground/src/core/runtime/alone/index.ts
+var Alone = new _deot_vc.Portal(wrapper_default, {
+	name: "docs-playground-alone",
+	leaveDelay: 0,
+	multiple: false
+});
+//#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 = {
-	key: 1,
-	class: "docs-playground-runtime"
+	key: 0,
+	class: "docs-playground__runtime-error",
+	role: "alert"
 };
 var _hoisted_3 = { class: "docs-playground__header" };
-var _hoisted_4 = { class: "docs-playground__tools" };
-var _hoisted_5 = ["title", "aria-label"];
-var _hoisted_6 = [
-	"title",
-	"aria-label",
-	"aria-expanded"
-];
-var _hoisted_7 = ["title", "aria-label"];
-var _hoisted_8 = {
+var _hoisted_4 = {
 	key: 0,
 	class: "docs-playground__views"
 };
-var _hoisted_9 = [
+var _hoisted_5 = [
 	"title",
 	"aria-label",
 	"aria-pressed",
 	"onClick"
 ];
-var _hoisted_10 = {
+var _hoisted_6 = {
 	key: 0,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
-var _hoisted_11 = { class: "docs-playground-runtime__viewport-stage" };
+var _hoisted_7 = { class: "docs-playground-runtime__viewport-stage" };
+var _hoisted_8 = [
+	"aria-expanded",
+	"title",
+	"aria-label"
+];
 //#endregion
 //#region packages/playground/src/core/runtime/runtime.vue
 var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1579,6 +2049,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
+		expand: { type: [Boolean, Number] },
 		viewport: { default: "auto" },
 		viewportOptions: { default: () => ["auto", 375] }
 	},
@@ -1594,18 +2065,24 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const getViewText = (view) => t(playgroundViewMessage(view));
 		const emit = __emit;
 		const joinCode = (...values) => values.filter(Boolean).join("\n");
-		const mergedPreviewOptions = (0, vue.computed)(() => {
+		const mergePreviewOptions = (extraHeadHTML) => {
 			const runtimePreviewOptions = createRuntimePreviewOptions(props.options.cdnURL);
 			return {
 				...runtimePreviewOptions,
 				...props.previewOptions,
-				headHTML: [runtimePreviewOptions.headHTML, props.previewOptions?.headHTML].filter(Boolean).join("\n"),
+				headHTML: [
+					runtimePreviewOptions.headHTML,
+					props.previewOptions?.headHTML,
+					extraHeadHTML
+				].filter(Boolean).join("\n"),
 				customCode: {
 					importCode: joinCode(runtimePreviewOptions.customCode?.importCode, props.previewOptions?.customCode?.importCode),
 					useCode: joinCode(runtimePreviewOptions.customCode?.useCode, props.previewOptions?.customCode?.useCode)
 				}
 			};
-		});
+		};
+		const mergedPreviewOptions = (0, vue.computed)(() => mergePreviewOptions());
+		const popupPreviewOptions = (0, vue.computed)(() => mergePreviewOptions("<style>html,body{height:100%;min-height:100%}</style>"));
 		const clearConsole = {
 			"BASE_URL": "/",
 			"DEV": false,
@@ -1632,11 +2109,63 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (!data || data.action !== "docs:navigate" || typeof data.to !== "string") return;
 			emit("navigate", data.to);
 		};
-		if (typeof window !== "undefined") window.addEventListener("message", handleBridgeMessage);
-		(0, vue.onBeforeUnmount)(() => window.removeEventListener("message", handleBridgeMessage));
-		const viewportMenuVisible = (0, vue.ref)(false);
-		const viewportLabel = (0, vue.computed)(() => formatViewportLabel(props.viewport, t("playground.runtime.auto")));
-		const desiredViewportHeight = (0, vue.computed)(() => getViewportHeight(props.viewport) || runtimeHeight.value);
+		const runtimeRoot = (0, vue.ref)(null);
+		const previewExpanded = (0, vue.ref)(false);
+		/** `expand: true` 时在展开瞬间冻结，避免滚动重算高度造成抖动。 */
+		const frozenExpandedHeight = (0, vue.ref)(0);
+		const measurePreviewChromeHeight = () => {
+			const root = runtimeRoot.value;
+			if (!root) return 0;
+			const header = root.querySelector(".docs-playground__header");
+			const error = root.querySelector(".docs-playground__runtime-error");
+			return (header instanceof HTMLElement ? header.offsetHeight : 0) + (error instanceof HTMLElement ? error.offsetHeight : 0);
+		};
+		const measureExpandedPreviewHeight = () => {
+			if (typeof window === "undefined") return runtimeHeight.value;
+			const chromeHeight = measurePreviewChromeHeight();
+			return resolveExpandedPreviewHeight(true, resolveRemainingPreviewHeight({
+				viewportHeight: getVisibleViewportRect(runtimeRoot.value).height,
+				chromeHeight
+			}));
+		};
+		const syncFrozenExpandedHeight = () => {
+			if (!previewExpanded.value || props.expand !== true) return;
+			frozenExpandedHeight.value = measureExpandedPreviewHeight();
+		};
+		if (typeof window !== "undefined") {
+			window.addEventListener("message", handleBridgeMessage);
+			window.addEventListener("resize", syncFrozenExpandedHeight);
+		}
+		const canExpandPreview = (0, vue.computed)(() => !props.styleless && isPlaygroundExpandEnabled(props.expand));
+		const expandLabel = (0, vue.computed)(() => t(previewExpanded.value ? "playground.runtime.collapsePreview" : "playground.runtime.expandPreview"));
+		const desiredViewportHeight = (0, vue.computed)(() => {
+			if (previewExpanded.value && props.expand === true) return frozenExpandedHeight.value;
+			if (previewExpanded.value && isPlaygroundExpandEnabled(props.expand)) return resolveExpandedPreviewHeight(props.expand, 0);
+			const fixedHeight = getViewportHeight(props.viewport);
+			if (fixedHeight) return fixedHeight;
+			return runtimeHeight.value;
+		});
+		const scrollExpandedPreviewIntoView = () => {
+			scrollPlaygroundToViewportStart(runtimeRoot.value);
+		};
+		const handleTogglePreviewExpand = () => {
+			if (!canExpandPreview.value) return;
+			if (!previewExpanded.value) {
+				if (props.expand === true) frozenExpandedHeight.value = measureExpandedPreviewHeight();
+				else frozenExpandedHeight.value = 0;
+				previewExpanded.value = true;
+				(0, vue.nextTick)(scrollExpandedPreviewIntoView);
+				return;
+			}
+			previewExpanded.value = false;
+			frozenExpandedHeight.value = 0;
+		};
+		(0, vue.watch)(canExpandPreview, (enabled) => {
+			if (!enabled) {
+				previewExpanded.value = false;
+				frozenExpandedHeight.value = 0;
+			}
+		});
 		const normalizedPreviewInset = (0, vue.computed)(() => {
 			const value = props.previewInset;
 			if (typeof value === "number") return Number.isFinite(value) && value >= 0 ? [value, value] : [10, 10];
@@ -1647,7 +2176,8 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const [vertical, horizontal] = normalizedPreviewInset.value;
 			return {
 				height: `${desiredViewportHeight.value + vertical * 2}px`,
-				padding: vertical === horizontal ? `${vertical}px` : `${vertical}px ${horizontal}px`
+				padding: vertical === horizontal ? `${vertical}px` : `${vertical}px ${horizontal}px`,
+				background: PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
 			};
 		});
 		const stylelessStyle = (0, vue.computed)(() => errorText.value ? void 0 : { height: `${desiredViewportHeight.value}px` });
@@ -1699,18 +2229,30 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				onActiveChange: (filename) => store.setActive(toReplFilename(filename))
 			});
 		};
-		const handleRefresh = () => {
+		const handleInlineRefresh = () => {
 			runtimeError.value = "";
 			sandboxKey.value++;
 		};
+		const handleClosePopup = () => {
+			Alone.destroy();
+		};
+		const handleOpenPopup = () => {
+			Alone.popup({
+				store,
+				copyValue: copyValue.value,
+				viewport: props.viewport,
+				viewportOptions: props.viewportOptions,
+				previewOptions: popupPreviewOptions.value,
+				clearConsole,
+				onEdit: handleEditor,
+				onViewportChange: handleViewportChange,
+				onNavigate: (to) => emit("navigate", to)
+			});
+		};
 		const handleView = (view) => emit("view-change", view);
-		const handleViewport = (index) => {
-			const viewport = props.viewportOptions[index];
-			if (viewport && !viewportEquals(viewport, props.viewport)) emit("viewport-change", viewport);
+		const handleViewportChange = (viewport) => {
+			emit("viewport-change", viewport);
 		};
-		(0, vue.watch)(() => props.viewportOptions.length, (length) => {
-			if (length <= 1) viewportMenuVisible.value = false;
-		});
 		(0, vue.watch)(() => props.files, (files) => {
 			if (filesEqual(files, syncedFiles)) return;
 			syncedFiles = { ...files };
@@ -1724,12 +2266,22 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			store.mainFile = toReplFilename(entry);
 			store.setActive(toReplFilename(entry));
 		});
+		(0, vue.watch)(() => props.activeView, (view) => {
+			if (view !== "runtime") handleClosePopup();
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			window.removeEventListener("message", handleBridgeMessage);
+			window.removeEventListener("resize", syncFrozenExpandedHeight);
+			handleClosePopup();
+		});
 		return (_ctx, _cache) => {
-			return __props.styleless ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [__props.styleless ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
+				ref_key: "runtimeRoot",
+				ref: runtimeRoot,
 				class: "docs-playground-runtime--styleless",
 				style: (0, vue.normalizeStyle)(stylelessStyle.value)
-			}, [errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_1$1, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("div", {
+			}, [errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_2, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("div", {
 				class: "docs-playground-runtime__viewport",
 				style: (0, vue.normalizeStyle)(viewportStyle.value)
 			}, [(0, vue.createVNode)((0, vue.unref)(_vue_repl.Sandbox), {
@@ -1738,85 +2290,26 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				store: (0, vue.unref)(store),
 				"auto-store-init": false,
 				"preview-options": mergedPreviewOptions.value
-			}, null, 8, ["store", "preview-options"])], 4)], 4)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, [
-				(0, vue.createElementVNode)("div", _hoisted_3, [(0, vue.createElementVNode)("div", _hoisted_4, [
-					(0, vue.createElementVNode)("button", {
-						type: "button",
-						class: "docs-playground__tool docs-playground__refresh",
-						"data-action": "refresh",
-						title: (0, vue.unref)(t)("playground.runtime.refresh"),
-						"aria-label": (0, vue.unref)(t)("playground.runtime.refresh"),
-						onClick: handleRefresh
-					}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "refresh" })], 8, _hoisted_5),
-					__props.viewportOptions.length > 1 ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_deot_vc.Dropdown), {
-						key: 0,
-						modelValue: viewportMenuVisible.value,
-						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => viewportMenuVisible.value = $event),
-						class: "docs-playground__viewport-menu",
-						portal: true,
-						trigger: "click",
-						placement: "bottom-right"
-					}, {
-						content: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_deot_vc.DropdownMenu), {
-							class: "docs-playground__viewport-options",
-							role: "menu",
-							"aria-label": (0, vue.unref)(t)("playground.runtime.viewportMenu")
-						}, {
-							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.viewportOptions, (item, index) => {
-								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_deot_vc.DropdownItem), {
-									key: (0, vue.unref)(getViewportKey)(item),
-									class: "docs-playground__viewport-option",
-									value: index,
-									selected: (0, vue.unref)(viewportEquals)(item, __props.viewport),
-									role: "menuitemradio",
-									"aria-checked": (0, vue.unref)(viewportEquals)(item, __props.viewport),
-									onClick: ($event) => handleViewport(index)
-								}, {
-									default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(formatViewportLabel)(item, (0, vue.unref)(t)("playground.runtime.auto"))), 1)]),
-									_: 2
-								}, 1032, [
-									"value",
-									"selected",
-									"aria-checked",
-									"onClick"
-								]);
-							}), 128))]),
-							_: 1
-						}, 8, ["aria-label"])]),
-						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("button", {
-							type: "button",
-							class: (0, vue.normalizeClass)(["docs-playground__tool docs-playground__viewport-trigger", { "is-active": __props.viewport !== "auto" }]),
-							title: (0, vue.unref)(t)("playground.runtime.viewport", { value: viewportLabel.value }),
-							"aria-label": (0, vue.unref)(t)("playground.runtime.viewport", { value: viewportLabel.value }),
-							"aria-expanded": viewportMenuVisible.value,
-							"aria-haspopup": "menu"
-						}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "viewport" })], 10, _hoisted_6)]),
-						_: 1
-					}, 8, ["modelValue"])) : (0, vue.createCommentVNode)("v-if", true),
-					(0, vue.createVNode)((0, vue.unref)(_deot_vc.Clipboard), {
-						class: "docs-playground__tool",
-						value: copyValue.value,
-						tag: "button",
-						type: "button",
-						title: (0, vue.unref)(t)("playground.common.copy"),
-						"aria-label": (0, vue.unref)(t)("playground.common.copy")
-					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "copy" })]),
-						_: 1
-					}, 8, [
-						"value",
-						"title",
-						"aria-label"
-					]),
-					(0, vue.createElementVNode)("button", {
-						type: "button",
-						class: "docs-playground__tool docs-playground__editor",
-						"data-action": "edit",
-						title: (0, vue.unref)(t)("playground.runtime.editFiles"),
-						"aria-label": (0, vue.unref)(t)("playground.runtime.editFiles"),
-						onClick: handleEditor
-					}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "editor" })], 8, _hoisted_7)
-				]), __props.views.length > 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_8, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.views, (item) => {
+			}, null, 8, ["store", "preview-options"])], 4)], 4)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 1,
+				ref_key: "runtimeRoot",
+				ref: runtimeRoot,
+				class: "docs-playground-runtime"
+			}, [
+				(0, vue.createElementVNode)("div", _hoisted_3, [(0, vue.createVNode)(toolbar_default, {
+					"copy-value": copyValue.value,
+					viewport: __props.viewport,
+					"viewport-options": __props.viewportOptions,
+					"show-open-popup": true,
+					onRefresh: handleInlineRefresh,
+					onEdit: handleEditor,
+					onOpenPopup: handleOpenPopup,
+					onViewportChange: handleViewportChange
+				}, null, 8, [
+					"copy-value",
+					"viewport",
+					"viewport-options"
+				]), __props.views.length > 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.views, (item) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 						key: item,
 						type: "button",
@@ -1825,13 +2318,13 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"aria-label": getViewText(item),
 						"aria-pressed": item === __props.activeView,
 						onClick: ($event) => handleView(item)
-					}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: item }, null, 8, ["name"])], 10, _hoisted_9);
+					}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: item }, null, 8, ["name"])], 10, _hoisted_5);
 				}), 128))])) : (0, vue.createCommentVNode)("v-if", true)]),
-				errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_10, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
+				errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_6, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
 				(0, vue.createElementVNode)("section", {
-					class: "docs-playground__preview",
+					class: (0, vue.normalizeClass)(["docs-playground__preview", { "is-expanded": previewExpanded.value }]),
 					style: (0, vue.normalizeStyle)(previewStyle.value)
-				}, [(0, vue.createElementVNode)("div", _hoisted_11, [(0, vue.createElementVNode)("div", {
+				}, [(0, vue.createElementVNode)("div", _hoisted_7, [(0, vue.createElementVNode)("div", {
 					class: "docs-playground-runtime__viewport",
 					style: (0, vue.normalizeStyle)(viewportStyle.value)
 				}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
@@ -1842,8 +2335,17 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"auto-store-init": false,
 					"clear-console": clearConsole,
 					"preview-options": mergedPreviewOptions.value
-				}, null, 8, ["store", "preview-options"]))], 4)])], 4)
-			]));
+				}, null, 8, ["store", "preview-options"]))], 4)]), canExpandPreview.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+					key: 0,
+					type: "button",
+					class: (0, vue.normalizeClass)(["docs-playground__expand", { "is-expanded": previewExpanded.value }]),
+					"data-action": "expand-preview",
+					"aria-expanded": previewExpanded.value,
+					title: expandLabel.value,
+					"aria-label": expandLabel.value,
+					onClick: handleTogglePreviewExpand
+				}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "expand" })], 10, _hoisted_8)) : (0, vue.createCommentVNode)("v-if", true)], 6)
+			], 512))]);
 		};
 	}
 });
@@ -1870,6 +2372,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		options: { default: () => ({}) },
 		previewInset: { default: 0 },
+		expand: { type: [Boolean, Number] },
 		previewOptions: {},
 		locale: {}
 	},
@@ -2003,6 +2506,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				options: __props.options,
 				"preview-options": __props.previewOptions,
 				"preview-inset": __props.previewInset,
+				expand: __props.expand,
 				styleless: true,
 				viewport: activeViewport.value,
 				"viewport-options": selectableViewportOptions.value,
@@ -2015,6 +2519,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"options",
 				"preview-options",
 				"preview-inset",
+				"expand",
 				"viewport",
 				"viewport-options"
 			])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -2029,6 +2534,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					options: __props.options,
 					"preview-options": __props.previewOptions,
 					"preview-inset": __props.previewInset,
+					expand: __props.expand,
 					"active-view": activeView.value,
 					views: normalizedViews.value,
 					viewport: activeViewport.value,
@@ -2043,6 +2549,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"options",
 					"preview-options",
 					"preview-inset",
+					"expand",
 					"active-view",
 					"views",
 					"viewport",