@deot/docs-playground 1.0.9 → 1.1.0

package/dist/index.js

@@ -109,12 +109,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$7 = ["d"];
 //#endregion
 //#region packages/playground/src/icon/icon.vue
 var icon_default = /* @__PURE__ */ defineComponent({
@@ -145,7 +147,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$4)], 12, _hoisted_1$5);
+			}, [createElementVNode("path", { d: icon.value.path }, null, 8, _hoisted_2$7)], 12, _hoisted_1$7);
 		};
 	}
 });
@@ -154,7 +156,7 @@ var icon_default = /* @__PURE__ */ 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";
@@ -171,10 +173,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$6 = ["title"];
+var _hoisted_3$6 = { class: "docs-code-preview__code" };
+var _hoisted_4$6 = ["innerHTML"];
 //#endregion
 //#region packages/playground/src/core/code-preview/code-preview.vue
 var code_preview_default = /* @__PURE__ */ defineComponent({
@@ -205,12 +207,12 @@ 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$4, [
+			return openBlock(), createElementBlock("div", _hoisted_1$6, [
 				languageLabel.value ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					class: "docs-code-preview__language",
 					title: languageLabel.value
-				}, toDisplayString(languageLabel.value), 9, _hoisted_2$3)) : createCommentVNode("v-if", true),
+				}, toDisplayString(languageLabel.value), 9, _hoisted_2$6)) : createCommentVNode("v-if", true),
 				createVNode(unref(Clipboard), {
 					class: "docs-code-preview__copy",
 					value: __props.code,
@@ -227,53 +229,23 @@ var code_preview_default = /* @__PURE__ */ defineComponent({
 					"aria-label"
 				]),
 				createCommentVNode(" eslint-disable-next-line vue/no-v-html "),
-				createElementVNode("pre", _hoisted_3$3, [createElementVNode("code", {
+				createElementVNode("pre", _hoisted_3$6, [createElementVNode("code", {
 					class: "hljs",
 					innerHTML: highlightedCode.value
-				}, null, 8, _hoisted_4$3)])
+				}, null, 8, _hoisted_4$6)])
 			]);
 		};
 	}
 });
 //#endregion
-//#region packages/playground/src/utils.ts
-/**
-* 比较两组 playground 文件是否完全一致。
-* @param left 左侧文件表。
-* @param right 右侧文件表。
-* @returns 键集合与各文件内容是否都相同。
-*/
-var filesEqual = (left, right) => {
-	const leftKeys = Object.keys(left);
-	const rightKeys = Object.keys(right);
-	return leftKeys.length === rightKeys.length && leftKeys.every((key) => left[key] === right[key]);
-};
-/**
-* 视图切换条使用的文案键。
-* @param view 当前预览视图。
-* @returns locale 消息键。
-*/
-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$5 = { class: "docs-playground-files__tabs-row" };
+var _hoisted_3$5 = ["data-filename", "onClick"];
+var _hoisted_4$5 = {
 	key: 0,
 	class: "docs-playground-files__entry"
 };
-var _hoisted_5$2 = { class: "docs-playground-files__actions" };
-var _hoisted_6$2 = {
-	key: 0,
-	class: "docs-playground__views docs-playground__views--files"
-};
-var _hoisted_7$2 = [
-	"title",
-	"aria-label",
-	"aria-pressed",
-	"onClick"
-];
 //#endregion
 //#region packages/playground/src/core/files-preview/files-preview.vue
 var files_preview_default = /* @__PURE__ */ defineComponent({
@@ -285,28 +257,26 @@ var files_preview_default = /* @__PURE__ */ defineComponent({
 		activeView: {},
 		activeFilename: {}
 	},
-	emits: ["active-change", "view-change"],
+	emits: ["active-change"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const { t } = useLocale();
-		const getViewText = (view) => t(playgroundViewMessage(view));
 		const emit = __emit;
 		const filenames = computed(() => Object.keys(props.files));
 		const activeCode = computed(() => props.files[props.activeFilename] || "");
 		const handleActive = (filename) => {
 			if (filename !== props.activeFilename) emit("active-change", filename);
 		};
-		const handleView = (view) => emit("view-change", view);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$3, [createElementVNode("div", _hoisted_2$2, [createVNode(unref(Scroller), {
+			return openBlock(), createElementBlock("div", _hoisted_1$5, [createElementVNode("div", _hoisted_2$5, [createVNode(unref(Scroller), {
 				class: "docs-playground-files__scroller",
 				"auto-resize": true,
 				native: false,
 				"show-bar": true,
-				height: "44",
+				height: "40",
 				"content-class": "docs-playground-files__tabs",
-				"content-style": "height: 44px; overflow: hidden;",
-				"wrapper-style": "height: 44px; overflow-x: auto; overflow-y: hidden;"
+				"content-style": "height: 40px; overflow: hidden;",
+				"wrapper-style": "height: 40px; overflow-x: auto; overflow-y: hidden;"
 			}, {
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filenames.value, (filename) => {
 					return openBlock(), createElementBlock("button", {
@@ -315,20 +285,10 @@ var files_preview_default = /* @__PURE__ */ defineComponent({
 						class: normalizeClass(["docs-playground-files__tab", { "is-active": filename === __props.activeFilename }]),
 						"data-filename": filename,
 						onClick: ($event) => handleActive(filename)
-					}, [createElementVNode("span", null, toDisplayString(filename), 1), filename === __props.entry ? (openBlock(), createElementBlock("small", _hoisted_4$2, toDisplayString(unref(t)("playground.files.entry")), 1)) : createCommentVNode("v-if", true)], 10, _hoisted_3$2);
+					}, [createElementVNode("span", null, toDisplayString(filename), 1), filename === __props.entry ? (openBlock(), createElementBlock("small", _hoisted_4$5, toDisplayString(unref(t)("playground.files.entry")), 1)) : createCommentVNode("v-if", true)], 10, _hoisted_3$5);
 				}), 128))]),
 				_: 1
-			}), createElementVNode("div", _hoisted_5$2, [__props.views.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_6$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.views, (item) => {
-				return openBlock(), createElementBlock("button", {
-					key: item,
-					type: "button",
-					class: normalizeClass(["docs-playground__view", { "is-active": item === __props.activeView }]),
-					title: getViewText(item),
-					"aria-label": getViewText(item),
-					"aria-pressed": item === __props.activeView,
-					onClick: ($event) => handleView(item)
-				}, [createVNode(unref(icon_default), { name: item }, null, 8, ["name"])], 10, _hoisted_7$2);
-			}), 128))])) : createCommentVNode("v-if", true)])]), createVNode(unref(code_preview_default), {
+			})]), createVNode(unref(code_preview_default), {
 				class: "docs-playground-files__body",
 				code: activeCode.value,
 				filename: __props.activeFilename,
@@ -459,25 +419,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$4 = ["title"];
+var _hoisted_3$4 = { class: "docs-playground-editor__files" };
+var _hoisted_4$4 = [
 	"data-filename",
 	"onClick",
 	"onDblclick"
 ];
-var _hoisted_5$1 = ["onKeydown"];
-var _hoisted_6$1 = ["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_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_10$1 = ["title"];
 var _hoisted_11$1 = ["title", "disabled"];
-var _hoisted_12 = {
+var _hoisted_12$1 = {
 	key: 0,
 	class: "docs-playground-editor__error"
 };
+var EDITOR_SCROLLER_MAX_HEIGHT = "calc(100vh - 110px)";
 //#endregion
 //#region packages/playground/src/editor/index.ts
 var Editor = new Portal(/* @__PURE__ */ defineComponent({
@@ -506,6 +467,7 @@ var Editor = new Portal(/* @__PURE__ */ 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 } = useLocale(computed(() => props.locale));
 		const initialFiles = Object.keys(props.files).length ? props.files : { "App.vue": props.value };
@@ -517,6 +479,7 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 		const textarea = ref(null);
 		const filenameInput = ref(null);
 		const scroller = ref(null);
+		const editorScroller = ref(null);
 		const editor = ref(null);
 		const bar = ref(null);
 		const wrapper = ref(null);
@@ -524,6 +487,10 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 		const renamingFilename = ref("");
 		const filenameDraft = ref("");
 		const codeErrorText = 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;
 		};
@@ -561,11 +528,13 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 							filename
 						});
 						if (filename === currentEntry.value) props.onChange(code);
+						nextTick(refreshEditorScroller);
 					})
 				],
 				parent: textarea.value
 			});
 			editor.value.focus();
+			nextTick(refreshEditorScroller);
 		};
 		const handleActive = (filename) => {
 			if (filename === activeFilename.value || editorFiles.value[filename] === void 0) return;
@@ -689,13 +658,18 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 				wrapper: wrapper.value,
 				container: window
 			});
+			if (typeof ResizeObserver !== "undefined") {
+				editorResize = new ResizeObserver(refreshEditorScroller);
+				editorResize.observe(textarea.value);
+			}
 		});
 		onBeforeUnmount(() => {
+			editorResize?.disconnect();
 			drag.value?.off();
 			editor.value?.destroy();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$2, [createVNode(unref(TransitionFade), { onAfterLeave: handleHide }, {
+			return openBlock(), createElementBlock("div", _hoisted_1$4, [createVNode(unref(TransitionFade), { onAfterLeave: handleHide }, {
 				default: withCtx(() => [withDirectives(createElementVNode("div", {
 					ref_key: "wrapper",
 					ref: wrapper,
@@ -712,8 +686,8 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 						title: unref(t)("playground.common.close"),
 						style: { "cursor": "pointer" },
 						onClick: handleHide
-					}, "✕", 8, _hoisted_2$1)], 512),
-					createElementVNode("div", _hoisted_3$1, [createVNode(unref(Scroller), {
+					}, "✕", 8, _hoisted_2$4)], 512),
+					createElementVNode("div", _hoisted_3$4, [createVNode(unref(Scroller), {
 						ref_key: "scroller",
 						ref: scroller,
 						class: "docs-playground-editor__scroller",
@@ -741,11 +715,11 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 								onDblclick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
 								onBlur: handleRenameSubmit,
 								onKeydown: [withKeys(withModifiers(handleRenameSubmit, ["prevent"]), ["enter"]), withKeys(withModifiers(handleRenameCancel, ["prevent"]), ["esc"])]
-							}, null, 40, _hoisted_5$1)), [[vModelText, filenameDraft.value]]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+							}, null, 40, _hoisted_5$4)), [[vModelText, filenameDraft.value]]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
 								filename === currentEntry.value ? (openBlock(), createElementBlock("span", {
 									key: 0,
 									title: unref(t)("playground.editor.entry")
-								}, "●", 8, _hoisted_6$1)) : createCommentVNode("v-if", true),
+								}, "●", 8, _hoisted_6$3)) : createCommentVNode("v-if", true),
 								createElementVNode("span", null, toDisplayString(filename), 1),
 								filename === currentEntry.value ? (openBlock(), createElementBlock("button", {
 									key: 1,
@@ -754,7 +728,7 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 									title: unref(t)("playground.editor.entryCannotDelete"),
 									"aria-label": unref(t)("playground.editor.entryCannotDelete"),
 									disabled: ""
-								}, null, 8, _hoisted_7$1)) : (openBlock(), createBlock(unref(Popconfirm), {
+								}, null, 8, _hoisted_7$3)) : (openBlock(), createBlock(unref(Popconfirm), {
 									key: 2,
 									class: "docs-playground-editor__delete",
 									title: unref(t)("playground.editor.confirmDelete", { filename }),
@@ -767,13 +741,13 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 										class: "docs-playground-editor__close",
 										title: unref(t)("playground.editor.deleteFile"),
 										"aria-label": unref(t)("playground.editor.confirmDelete", { filename })
-									}, null, 8, _hoisted_8$1)]),
+									}, null, 8, _hoisted_8$2)]),
 									_: 2
 								}, 1032, ["title", "onOk"]))
-							], 64))], 42, _hoisted_4$1);
+							], 64))], 42, _hoisted_4$4);
 						}), 128))]),
 						_: 1
-					}, 512), createElementVNode("div", _hoisted_9$1, [createElementVNode("button", {
+					}, 512), createElementVNode("div", _hoisted_9$2, [createElementVNode("button", {
 						type: "button",
 						title: unref(t)("playground.editor.createFile"),
 						onClick: handleCreate
@@ -783,18 +757,74 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 						disabled: activeFilename.value === currentEntry.value,
 						onClick: handleEntry
 					}, toDisplayString(unref(t)("playground.editor.setEntry")), 9, _hoisted_11$1)])]),
-					codeErrorText.value ? (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(codeErrorText.value), 1)) : createCommentVNode("v-if", true),
-					createElementVNode("div", {
-						ref_key: "textarea",
-						ref: textarea,
-						class: "docs-playground-editor__editor"
-					}, null, 512)
+					codeErrorText.value ? (openBlock(), createElementBlock("div", _hoisted_12$1, toDisplayString(codeErrorText.value), 1)) : createCommentVNode("v-if", true),
+					createVNode(unref(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: withCtx(() => [createElementVNode("div", {
+							ref_key: "textarea",
+							ref: textarea,
+							class: "docs-playground-editor__editor"
+						}, null, 512)]),
+						_: 1
+					}, 512)
 				], 512), [[vShow, isActive.value]])]),
 				_: 1
 			})]);
 		};
 	}
 }), { aliveRegExp: { className: /(PORTAL_TAG_DISABLE)/ } });
+//#endregion
+//#region packages/playground/src/utils.ts
+/**
+* 比较两组 playground 文件是否完全一致。
+* @param left 左侧文件表。
+* @param right 右侧文件表。
+* @returns 键集合与各文件内容是否都相同。
+*/
+var filesEqual = (left, right) => {
+	const leftKeys = Object.keys(left);
+	const rightKeys = Object.keys(right);
+	return leftKeys.length === rightKeys.length && leftKeys.every((key) => left[key] === right[key]);
+};
+/**
+* 视图切换条使用的文案键。
+* @param view 当前预览视图。
+* @returns locale 消息键。
+*/
+var playgroundViewMessage = (view) => view === "runtime" ? "playground.runtime.preview" : "playground.runtime.files";
+/**
+* 与 markdown-it-anchor 默认 `slugify` 对齐，用于标题锚点 id。
+* @param title 标题文本。
+* @returns 可用作元素 id / hash 的字符串；空标题返回空串。
+*/
+var slugifyPlaygroundTitle = (title) => {
+	const normalized = String(title).trim().toLowerCase().replace(/\s+/g, "-");
+	return normalized ? encodeURIComponent(normalized) : "";
+};
+/**
+* 解析标题锚点 id：显式 id 优先，否则从标题 slugify；必要时避开已占用 id。
+* @param title 标题文本。
+* @param explicitId 可选显式 id。
+* @param isOccupied 返回该 id 是否已被其他元素占用。
+* @returns 锚点 id；无标题时为空串。
+*/
+var resolvePlaygroundTitleId = (title, explicitId = "", isOccupied) => {
+	if (!String(title).trim()) return "";
+	const base = String(explicitId).trim() || slugifyPlaygroundTitle(title);
+	if (!base) return "";
+	if (!isOccupied || !isOccupied(base)) return base;
+	let index = 1;
+	while (isOccupied(`${base}-${index}`)) index += 1;
+	return `${base}-${index}`;
+};
 var resolveSandboxContainer = (sandbox) => sandbox?.container ? unref(sandbox.container) : null;
 var useSandboxAutoHeight = (sandboxRef) => {
 	const height = ref(24);
@@ -904,6 +934,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 isPlaygroundExpandable = (value) => {
+	if (value === true) return true;
+	return typeof value === "number" && Number.isFinite(value) && value > 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 = (expandable, availableHeight) => {
+	if (expandable === true) return Math.max(24, Math.round(Number.isFinite(availableHeight) ? availableHeight : 0));
+	return Math.max(24, Math.round(expandable));
+};
+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 = "运行时发生未知错误";
@@ -967,6 +1068,96 @@ 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 resolvePopupScreenInset = (gap = 40) => {
+	const safeGap = Number.isFinite(gap) ? Math.max(0, gap) : 40;
+	return {
+		x: safeGap * 2,
+		y: safeGap
+	};
+};
+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 inset = resolvePopupScreenInset(gap);
+	const maxWidth = Math.max(0, Math.round((Number.isFinite(screen.width) ? screen.width : 0) - inset.x));
+	const maxHeight = Math.max(0, Math.round((Number.isFinite(screen.height) ? screen.height : 0) - inset.y));
+	const viewportWidth = getViewportWidth(viewport);
+	const viewportHeight = getViewportHeight(viewport);
+	return {
+		width: viewportWidth ?? maxWidth,
+		height: viewportHeight ?? maxHeight,
+		maxWidth,
+		maxHeight
+	};
+};
+/**
+* 壳层封顶到 `screen.width - gap * 2`、`screen.height - gap`。
+* 未设 viewport 边时，画布铺满工具栏以下区域；请求尺寸大于可用区域时由 Scroller 处理溢出。
+* @param viewport 当前 playground 视口配置。
+* @param screen 屏幕可用宽高，默认取 `window.inner*`。
+* @param gap 相对屏幕上下边缘的留白；左右为该值的 2 倍。
+* @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");
@@ -1059,40 +1250,221 @@ 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);
+//#region packages/playground/src/core/runtime/toolbar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = { class: "docs-playground__tools" };
+var _hoisted_2$3 = {
+	key: 0,
+	class: "docs-playground__tool-group"
 };
-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 _hoisted_3$3 = [
+	"title",
+	"aria-label",
+	"aria-expanded"
+];
+var _hoisted_4$3 = {
+	key: 1,
+	class: "docs-playground__tool-divider",
+	"aria-hidden": "true"
 };
-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 _hoisted_5$3 = ["title", "aria-label"];
+var _hoisted_6$2 = ["title", "aria-label"];
+var _hoisted_7$2 = ["title", "aria-label"];
+var _hoisted_8$1 = {
+	key: 3,
+	class: "docs-playground__tool-divider",
+	"aria-hidden": "true"
 };
-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 _hoisted_9$1 = ["aria-label"];
+var _hoisted_10 = [
+	"title",
+	"aria-label",
+	"aria-selected",
+	"aria-pressed",
+	"onClick"
+];
+var _hoisted_11 = {
+	key: 2,
+	class: "docs-playground__tool-divider",
+	"aria-hidden": "true"
 };
+var _hoisted_12 = ["title", "aria-label"];
+//#endregion
+//#region packages/playground/src/core/runtime/toolbar.vue
+var toolbar_default = /* @__PURE__ */ defineComponent({
+	__name: "toolbar",
+	props: {
+		copyValue: { default: "" },
+		viewport: { default: "auto" },
+		viewportOptions: { default: () => ["auto", 375] },
+		views: { default: () => [] },
+		activeView: { default: "runtime" },
+		showRuntimeActions: {
+			type: Boolean,
+			default: true
+		},
+		showOpenPopup: {
+			type: Boolean,
+			default: false
+		},
+		showClose: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"refresh",
+		"edit",
+		"open-popup",
+		"close-popup",
+		"viewport-change",
+		"view-change"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useLocale();
+		const VIEW_ORDER = ["runtime", "files"];
+		const viewportMenuVisible = ref(false);
+		const orderedViews = computed(() => VIEW_ORDER.filter((view) => props.views.includes(view)));
+		const showViews = computed(() => orderedViews.value.length > 1);
+		const viewportLabel = computed(() => formatViewportLabel(props.viewport, t("playground.runtime.auto")));
+		const getViewAriaLabel = (view) => t(playgroundViewMessage(view));
+		const getViewLabel = (view) => view === "runtime" ? t("playground.runtime.previewLabel") : t("playground.runtime.codeLabel");
+		const handleViewport = (index) => {
+			const viewport = props.viewportOptions[index];
+			if (viewport && !viewportEquals(viewport, props.viewport)) emit("viewport-change", viewport);
+		};
+		watch(() => props.viewportOptions.length, (length) => {
+			if (length <= 1) viewportMenuVisible.value = false;
+		});
+		watch(() => props.showRuntimeActions, (enabled) => {
+			if (!enabled) viewportMenuVisible.value = false;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$3, [
+				__props.showRuntimeActions ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+					__props.viewportOptions.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_2$3, [createVNode(unref(Dropdown), {
+						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: withCtx(() => [createVNode(unref(DropdownMenu), {
+							class: "docs-playground__viewport-options",
+							role: "menu",
+							"aria-label": unref(t)("playground.runtime.viewportMenu")
+						}, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.viewportOptions, (item, index) => {
+								return openBlock(), createBlock(unref(DropdownItem), {
+									key: unref(getViewportKey)(item),
+									class: "docs-playground__viewport-option",
+									value: index,
+									selected: unref(viewportEquals)(item, __props.viewport),
+									role: "menuitemradio",
+									"aria-checked": unref(viewportEquals)(item, __props.viewport),
+									onClick: ($event) => handleViewport(index)
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(unref(formatViewportLabel)(item, unref(t)("playground.runtime.auto"))), 1)]),
+									_: 2
+								}, 1032, [
+									"value",
+									"selected",
+									"aria-checked",
+									"onClick"
+								]);
+							}), 128))]),
+							_: 1
+						}, 8, ["aria-label"])]),
+						default: withCtx(() => [createElementVNode("button", {
+							type: "button",
+							class: normalizeClass(["docs-playground__tool docs-playground__viewport-trigger", { "is-active": __props.viewport !== "auto" }]),
+							title: unref(t)("playground.runtime.viewport", { value: viewportLabel.value }),
+							"aria-label": unref(t)("playground.runtime.viewport", { value: viewportLabel.value }),
+							"aria-expanded": viewportMenuVisible.value,
+							"aria-haspopup": "menu"
+						}, [createVNode(unref(icon_default), { name: "viewport" })], 10, _hoisted_3$3)]),
+						_: 1
+					}, 8, ["modelValue"])])) : createCommentVNode("v-if", true),
+					__props.viewportOptions.length > 1 ? (openBlock(), createElementBlock("span", _hoisted_4$3)) : createCommentVNode("v-if", true),
+					createElementVNode("button", {
+						type: "button",
+						class: "docs-playground__tool docs-playground__refresh",
+						"data-action": "refresh",
+						title: unref(t)("playground.runtime.refresh"),
+						"aria-label": unref(t)("playground.runtime.refresh"),
+						onClick: _cache[1] || (_cache[1] = ($event) => emit("refresh"))
+					}, [createVNode(unref(icon_default), { name: "refresh" })], 8, _hoisted_5$3),
+					createElementVNode("button", {
+						type: "button",
+						class: "docs-playground__tool docs-playground__editor",
+						"data-action": "edit",
+						title: unref(t)("playground.runtime.editFiles"),
+						"aria-label": unref(t)("playground.runtime.editFiles"),
+						onClick: _cache[2] || (_cache[2] = ($event) => emit("edit"))
+					}, [createVNode(unref(icon_default), { name: "editor" })], 8, _hoisted_6$2),
+					__props.showOpenPopup ? (openBlock(), createElementBlock("button", {
+						key: 2,
+						type: "button",
+						class: "docs-playground__tool docs-playground__popup",
+						"data-action": "open-popup",
+						title: unref(t)("playground.runtime.openPopup"),
+						"aria-label": unref(t)("playground.runtime.openPopup"),
+						onClick: _cache[3] || (_cache[3] = ($event) => emit("open-popup"))
+					}, [createVNode(unref(icon_default), { name: "popup" })], 8, _hoisted_7$2)) : createCommentVNode("v-if", true),
+					createVNode(unref(Clipboard), {
+						class: "docs-playground__tool",
+						value: __props.copyValue,
+						tag: "button",
+						type: "button",
+						title: unref(t)("playground.common.copy"),
+						"aria-label": unref(t)("playground.common.copy")
+					}, {
+						default: withCtx(() => [createVNode(unref(icon_default), { name: "copy" })]),
+						_: 1
+					}, 8, [
+						"value",
+						"title",
+						"aria-label"
+					]),
+					showViews.value ? (openBlock(), createElementBlock("span", _hoisted_8$1)) : createCommentVNode("v-if", true)
+				], 64)) : createCommentVNode("v-if", true),
+				showViews.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: "docs-playground__views",
+					role: "tablist",
+					"aria-label": unref(t)("playground.runtime.views")
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(orderedViews.value, (item) => {
+					return openBlock(), createElementBlock("button", {
+						key: item,
+						type: "button",
+						class: normalizeClass(["docs-playground__view", { "is-active": item === __props.activeView }]),
+						role: "tab",
+						title: getViewAriaLabel(item),
+						"aria-label": getViewAriaLabel(item),
+						"aria-selected": item === __props.activeView,
+						"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),
+				__props.showClose && (__props.showRuntimeActions || showViews.value) ? (openBlock(), createElementBlock("span", _hoisted_11)) : createCommentVNode("v-if", true),
+				__props.showClose ? (openBlock(), createElementBlock("button", {
+					key: 3,
+					type: "button",
+					class: "docs-playground__tool docs-playground__popup-close",
+					"data-action": "close-popup",
+					title: unref(t)("playground.runtime.closePopup"),
+					"aria-label": unref(t)("playground.runtime.closePopup"),
+					onClick: _cache[4] || (_cache[4] = ($event) => emit("close-popup"))
+				}, [..._cache[5] || (_cache[5] = [createElementVNode("span", {
+					class: "docs-playground__popup-close-mark",
+					"aria-hidden": "true"
+				}, "✕", -1)])], 8, _hoisted_12)) : createCommentVNode("v-if", true)
+			]);
+		};
+	}
+});
 //#endregion
 //#region packages/playground/src/cdn.ts
 var PREVIEW_STYLE_ASSETS = [
@@ -1441,6 +1813,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,
@@ -1454,8 +1832,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: {
@@ -1501,41 +1879,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$2 = { class: "docs-playground-popup__frame" };
+var _hoisted_3$2 = { class: "docs-playground-popup__header" };
+var _hoisted_4$2 = ["title"];
+var _hoisted_5$2 = { class: "docs-playground__title-text" };
+var _hoisted_6$1 = {
 	key: 0,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
-var _hoisted_2 = {
-	key: 1,
-	class: "docs-playground-runtime"
-};
-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_7$1 = { class: "docs-playground-popup__body" };
+//#endregion
+//#region packages/playground/src/core/runtime/alone/index.ts
+var Alone = new Portal(/* @__PURE__ */ defineComponent({
+	__name: "wrapper",
+	props: {
+		store: {},
+		copyValue: {},
+		title: { default: "" },
+		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 } = useLocale();
+		const currentViewport = ref(props.viewport);
+		const sandboxRef = ref(null);
+		const sandboxKey = ref(0);
+		const layoutTick = ref(0);
+		const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
+		useSandboxTheme(sandboxRef);
+		const storeErrors = computed(() => (props.store.errors || []).map(toErrorText).filter(Boolean).join("\n"));
+		const errorText = computed(() => {
+			const runtime = runtimeError.value ? formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip")) : "";
+			return [storeErrors.value, runtime].filter(Boolean).join("\n\n");
+		});
+		const layout = computed(() => {
+			layoutTick.value;
+			return resolvePopupLayout(currentViewport.value);
+		});
+		const shellStyle = computed(() => ({
+			width: `${layout.value.shellWidth}px`,
+			height: `${layout.value.shellHeight}px`
+		}));
+		const canvasStyle = 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);
+		};
+		watch(() => props.viewport, (viewport) => {
+			currentViewport.value = viewport;
+		});
+		if (typeof window !== "undefined") {
+			window.addEventListener("keydown", handleKeydown);
+			window.addEventListener("resize", handleResize);
+			window.addEventListener("message", handleBridgeMessage);
+		}
+		onBeforeUnmount(() => {
+			window.removeEventListener("keydown", handleKeydown);
+			window.removeEventListener("resize", handleResize);
+			window.removeEventListener("message", handleBridgeMessage);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "docs-playground-popup",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": unref(t)("playground.runtime.openPopup")
+			}, [createElementVNode("div", {
+				class: "docs-playground-popup__mask",
+				"data-action": "popup-mask",
+				onClick: handleClose
+			}), createElementVNode("div", {
+				class: "docs-playground-popup__shell",
+				style: normalizeStyle(shellStyle.value)
+			}, [createElementVNode("div", _hoisted_2$2, [
+				createElementVNode("div", _hoisted_3$2, [__props.title.trim() ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "docs-playground__title",
+					title: __props.title.trim()
+				}, [createElementVNode("span", _hoisted_5$2, toDisplayString(__props.title.trim()), 1)], 8, _hoisted_4$2)) : createCommentVNode("v-if", true), 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 ? (openBlock(), createElementBlock("pre", _hoisted_6$1, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true),
+				createElementVNode("div", _hoisted_7$1, [createVNode(unref(Scroller), {
+					class: "docs-playground-popup__scroller",
+					"content-class": "docs-playground-popup__scroller-content",
+					"auto-resize": true,
+					native: false,
+					"show-bar": true,
+					height: "100%"
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						class: "docs-playground-popup__canvas",
+						style: normalizeStyle(canvasStyle.value)
+					}, [(openBlock(), createBlock(unref(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);
+		};
+	}
+}), {
+	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$1 = {
 	key: 0,
-	class: "docs-playground__views"
+	class: "docs-playground__runtime-error",
+	role: "alert"
 };
-var _hoisted_9 = [
-	"title",
-	"aria-label",
-	"aria-pressed",
-	"onClick"
-];
-var _hoisted_10 = {
+var _hoisted_3$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 = {
+	key: 1,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
-var _hoisted_11 = { class: "docs-playground-runtime__viewport-stage" };
+var _hoisted_8 = { class: "docs-playground-runtime__viewport-stage" };
+var _hoisted_9 = [
+	"aria-expanded",
+	"title",
+	"aria-label"
+];
 //#endregion
 //#region packages/playground/src/core/runtime/runtime.vue
 var runtime_default = /* @__PURE__ */ defineComponent({
@@ -1552,6 +2095,13 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		hideChrome: {
+			type: Boolean,
+			default: false
+		},
+		expandable: { type: [Boolean, Number] },
+		title: { default: "" },
+		id: { default: "" },
 		viewport: { default: "auto" },
 		viewportOptions: { default: () => ["auto", 375] }
 	},
@@ -1561,24 +2111,36 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		"viewport-change",
 		"navigate"
 	],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const { locale, t } = useLocale();
-		const getViewText = (view) => t(playgroundViewMessage(view));
+		const displayTitle = computed(() => props.title.trim());
+		const titleEl = ref(null);
+		const titleId = computed(() => resolvePlaygroundTitleId(displayTitle.value, props.id, (candidate) => {
+			if (typeof document === "undefined") return false;
+			const existing = document.getElementById(candidate);
+			return !!existing && existing !== titleEl.value;
+		}));
 		const emit = __emit;
 		const joinCode = (...values) => values.filter(Boolean).join("\n");
-		const mergedPreviewOptions = 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 = computed(() => mergePreviewOptions());
+		const popupPreviewOptions = computed(() => mergePreviewOptions("<style>html,body{height:100%;min-height:100%}</style>"));
 		const clearConsole = {
 			"BASE_URL": "/",
 			"DEV": false,
@@ -1605,11 +2167,63 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 			if (!data || data.action !== "docs:navigate" || typeof data.to !== "string") return;
 			emit("navigate", data.to);
 		};
-		if (typeof window !== "undefined") window.addEventListener("message", handleBridgeMessage);
-		onBeforeUnmount(() => window.removeEventListener("message", handleBridgeMessage));
-		const viewportMenuVisible = ref(false);
-		const viewportLabel = computed(() => formatViewportLabel(props.viewport, t("playground.runtime.auto")));
-		const desiredViewportHeight = computed(() => getViewportHeight(props.viewport) || runtimeHeight.value);
+		const runtimeRoot = ref(null);
+		const previewExpanded = ref(false);
+		/** `expandable: true` 时在展开瞬间冻结，避免滚动重算高度造成抖动。 */
+		const frozenExpandedHeight = ref(0);
+		const measurePreviewChromeHeight = () => {
+			const root = runtimeRoot.value;
+			if (!root) return 0;
+			const header = (root.closest(".docs-playground") ?? 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.expandable !== true) return;
+			frozenExpandedHeight.value = measureExpandedPreviewHeight();
+		};
+		if (typeof window !== "undefined") {
+			window.addEventListener("message", handleBridgeMessage);
+			window.addEventListener("resize", syncFrozenExpandedHeight);
+		}
+		const canExpandPreview = computed(() => !props.styleless && isPlaygroundExpandable(props.expandable));
+		const expandLabel = computed(() => t(previewExpanded.value ? "playground.runtime.collapsePreview" : "playground.runtime.expandPreview"));
+		const desiredViewportHeight = computed(() => {
+			if (previewExpanded.value && props.expandable === true) return frozenExpandedHeight.value;
+			if (previewExpanded.value && isPlaygroundExpandable(props.expandable)) return resolveExpandedPreviewHeight(props.expandable, 0);
+			const fixedHeight = getViewportHeight(props.viewport);
+			if (fixedHeight) return fixedHeight;
+			return runtimeHeight.value;
+		});
+		const scrollExpandedPreviewIntoView = () => {
+			scrollPlaygroundToViewportStart(runtimeRoot.value);
+		};
+		const handleTogglePreviewExpand = () => {
+			if (!canExpandPreview.value) return;
+			if (!previewExpanded.value) {
+				if (props.expandable === true) frozenExpandedHeight.value = measureExpandedPreviewHeight();
+				else frozenExpandedHeight.value = 0;
+				previewExpanded.value = true;
+				nextTick(scrollExpandedPreviewIntoView);
+				return;
+			}
+			previewExpanded.value = false;
+			frozenExpandedHeight.value = 0;
+		};
+		watch(canExpandPreview, (enabled) => {
+			if (!enabled) {
+				previewExpanded.value = false;
+				frozenExpandedHeight.value = 0;
+			}
+		});
 		const normalizedPreviewInset = computed(() => {
 			const value = props.previewInset;
 			if (typeof value === "number") return Number.isFinite(value) && value >= 0 ? [value, value] : [10, 10];
@@ -1620,7 +2234,8 @@ var runtime_default = /* @__PURE__ */ 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 = computed(() => errorText.value ? void 0 : { height: `${desiredViewportHeight.value}px` });
@@ -1672,18 +2287,30 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				onActiveChange: (filename) => store.setActive(toReplFilename(filename))
 			});
 		};
-		const handleRefresh = () => {
+		const handleInlineRefresh = () => {
 			runtimeError.value = "";
 			sandboxKey.value++;
 		};
-		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 handleClosePopup = () => {
+			Alone.destroy();
+		};
+		const handleOpenPopup = () => {
+			Alone.popup({
+				store,
+				copyValue: copyValue.value,
+				title: props.title,
+				viewport: props.viewport,
+				viewportOptions: props.viewportOptions,
+				previewOptions: popupPreviewOptions.value,
+				clearConsole,
+				onEdit: handleEditor,
+				onViewportChange: handleViewportChange,
+				onNavigate: (to) => emit("navigate", to)
+			});
+		};
+		const handleViewportChange = (viewport) => {
+			emit("viewport-change", viewport);
 		};
-		watch(() => props.viewportOptions.length, (length) => {
-			if (length <= 1) viewportMenuVisible.value = false;
-		});
 		watch(() => props.files, (files) => {
 			if (filesEqual(files, syncedFiles)) return;
 			syncedFiles = { ...files };
@@ -1697,12 +2324,27 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 			store.mainFile = toReplFilename(entry);
 			store.setActive(toReplFilename(entry));
 		});
+		watch(() => props.activeView, (view) => {
+			if (view !== "runtime") handleClosePopup();
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("message", handleBridgeMessage);
+			window.removeEventListener("resize", syncFrozenExpandedHeight);
+			handleClosePopup();
+		});
+		__expose({
+			refresh: handleInlineRefresh,
+			edit: handleEditor,
+			openPopup: handleOpenPopup
+		});
 		return (_ctx, _cache) => {
-			return __props.styleless ? (openBlock(), createElementBlock("div", {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [__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_1$1, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true), createElementVNode("div", {
+			}, [errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_2$1, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true), createElementVNode("div", {
 				class: "docs-playground-runtime__viewport",
 				style: normalizeStyle(viewportStyle.value)
 			}, [createVNode(unref(Sandbox), {
@@ -1711,100 +2353,42 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				store: unref(store),
 				"auto-store-init": false,
 				"preview-options": mergedPreviewOptions.value
-			}, null, 8, ["store", "preview-options"])], 4)], 4)) : (openBlock(), createElementBlock("div", _hoisted_2, [
-				createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [
-					createElementVNode("button", {
-						type: "button",
-						class: "docs-playground__tool docs-playground__refresh",
-						"data-action": "refresh",
-						title: unref(t)("playground.runtime.refresh"),
-						"aria-label": unref(t)("playground.runtime.refresh"),
-						onClick: handleRefresh
-					}, [createVNode(unref(icon_default), { name: "refresh" })], 8, _hoisted_5),
-					__props.viewportOptions.length > 1 ? (openBlock(), createBlock(unref(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: withCtx(() => [createVNode(unref(DropdownMenu), {
-							class: "docs-playground__viewport-options",
-							role: "menu",
-							"aria-label": unref(t)("playground.runtime.viewportMenu")
-						}, {
-							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.viewportOptions, (item, index) => {
-								return openBlock(), createBlock(unref(DropdownItem), {
-									key: unref(getViewportKey)(item),
-									class: "docs-playground__viewport-option",
-									value: index,
-									selected: unref(viewportEquals)(item, __props.viewport),
-									role: "menuitemradio",
-									"aria-checked": unref(viewportEquals)(item, __props.viewport),
-									onClick: ($event) => handleViewport(index)
-								}, {
-									default: withCtx(() => [createTextVNode(toDisplayString(unref(formatViewportLabel)(item, unref(t)("playground.runtime.auto"))), 1)]),
-									_: 2
-								}, 1032, [
-									"value",
-									"selected",
-									"aria-checked",
-									"onClick"
-								]);
-							}), 128))]),
-							_: 1
-						}, 8, ["aria-label"])]),
-						default: withCtx(() => [createElementVNode("button", {
-							type: "button",
-							class: normalizeClass(["docs-playground__tool docs-playground__viewport-trigger", { "is-active": __props.viewport !== "auto" }]),
-							title: unref(t)("playground.runtime.viewport", { value: viewportLabel.value }),
-							"aria-label": unref(t)("playground.runtime.viewport", { value: viewportLabel.value }),
-							"aria-expanded": viewportMenuVisible.value,
-							"aria-haspopup": "menu"
-						}, [createVNode(unref(icon_default), { name: "viewport" })], 10, _hoisted_6)]),
-						_: 1
-					}, 8, ["modelValue"])) : createCommentVNode("v-if", true),
-					createVNode(unref(Clipboard), {
-						class: "docs-playground__tool",
-						value: copyValue.value,
-						tag: "button",
-						type: "button",
-						title: unref(t)("playground.common.copy"),
-						"aria-label": unref(t)("playground.common.copy")
-					}, {
-						default: withCtx(() => [createVNode(unref(icon_default), { name: "copy" })]),
-						_: 1
-					}, 8, [
-						"value",
-						"title",
-						"aria-label"
-					]),
-					createElementVNode("button", {
-						type: "button",
-						class: "docs-playground__tool docs-playground__editor",
-						"data-action": "edit",
-						title: unref(t)("playground.runtime.editFiles"),
-						"aria-label": unref(t)("playground.runtime.editFiles"),
-						onClick: handleEditor
-					}, [createVNode(unref(icon_default), { name: "editor" })], 8, _hoisted_7)
-				]), __props.views.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_8, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.views, (item) => {
-					return openBlock(), createElementBlock("button", {
-						key: item,
-						type: "button",
-						class: normalizeClass(["docs-playground__view", { "is-active": item === __props.activeView }]),
-						title: getViewText(item),
-						"aria-label": getViewText(item),
-						"aria-pressed": item === __props.activeView,
-						onClick: ($event) => handleView(item)
-					}, [createVNode(unref(icon_default), { name: item }, null, 8, ["name"])], 10, _hoisted_9);
-				}), 128))])) : createCommentVNode("v-if", true)]),
-				errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_10, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true),
+			}, null, 8, ["store", "preview-options"])], 4)], 4)) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				ref_key: "runtimeRoot",
+				ref: runtimeRoot,
+				class: "docs-playground-runtime"
+			}, [
+				!__props.hideChrome ? (openBlock(), createElementBlock("div", _hoisted_3$1, [displayTitle.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					ref_key: "titleEl",
+					ref: titleEl,
+					class: "docs-playground__title",
+					id: titleId.value,
+					tabindex: "-1",
+					title: displayTitle.value
+				}, [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, {
+					"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"
+				])])) : createCommentVNode("v-if", true),
+				errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_7, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true),
 				createElementVNode("section", {
-					class: "docs-playground__preview",
+					class: normalizeClass(["docs-playground__preview", { "is-expanded": previewExpanded.value }]),
 					style: normalizeStyle(previewStyle.value)
-				}, [createElementVNode("div", _hoisted_11, [createElementVNode("div", {
+				}, [createElementVNode("div", _hoisted_8, [createElementVNode("div", {
 					class: "docs-playground-runtime__viewport",
 					style: normalizeStyle(viewportStyle.value)
 				}, [(openBlock(), createBlock(unref(Sandbox), {
@@ -1815,8 +2399,17 @@ var runtime_default = /* @__PURE__ */ 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 ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: 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
+				}, [createVNode(unref(icon_default), { name: "expand" })], 10, _hoisted_9)) : createCommentVNode("v-if", true)], 6)
+			], 512))]);
 		};
 	}
 });
@@ -1826,6 +2419,13 @@ var _hoisted_1 = {
 	key: 0,
 	class: "docs-playground__error"
 };
+var _hoisted_2 = {
+	key: 0,
+	class: "docs-playground__header"
+};
+var _hoisted_3 = ["id", "title"];
+var _hoisted_4 = ["href"];
+var _hoisted_5 = { class: "docs-playground__title-text" };
 //#endregion
 //#region packages/playground/src/playground.vue
 var playground_default = /* @__PURE__ */ defineComponent({
@@ -1843,6 +2443,9 @@ var playground_default = /* @__PURE__ */ defineComponent({
 		},
 		options: { default: () => ({}) },
 		previewInset: { default: 0 },
+		expandable: { type: [Boolean, Number] },
+		title: { default: "" },
+		id: { default: "" },
 		previewOptions: {},
 		locale: {}
 	},
@@ -1866,6 +2469,8 @@ var playground_default = /* @__PURE__ */ defineComponent({
 		const sourceFiles = ref(initialFiles);
 		const currentEntry = ref(initialEntry);
 		const fileActiveFilename = ref(initialEntry);
+		const runtimeRef = ref(null);
+		const titleEl = ref(null);
 		const normalizeViews = (views) => {
 			const normalized = [];
 			for (const view of views) {
@@ -1876,12 +2481,25 @@ var playground_default = /* @__PURE__ */ defineComponent({
 			return normalized.length ? normalized : ["runtime"];
 		};
 		const normalizedViews = computed(() => normalizeViews(props.views));
+		const hasRuntimeView = computed(() => normalizedViews.value.includes("runtime"));
+		const hasFilesView = computed(() => normalizedViews.value.includes("files"));
 		const activeView = ref(normalizedViews.value[0]);
 		const runtimeActivated = ref(props.styleless || activeView.value === "runtime");
 		const normalizedViewportOptions = computed(() => normalizeViewportOptions(props.viewportOptions));
 		const activeViewport = ref(resolveInitialViewport(props.viewport, normalizedViewportOptions.value));
 		const selectableViewportOptions = computed(() => includeActiveViewport(normalizedViewportOptions.value, activeViewport.value));
 		const error = ref(props.entry && initialFiles[props.entry] === void 0 ? t("playground.validation.entryMissing", { filename: props.entry }) : "");
+		const displayTitle = computed(() => props.title.trim());
+		const titleId = computed(() => resolvePlaygroundTitleId(displayTitle.value, props.id, (candidate) => {
+			if (typeof document === "undefined") return false;
+			const existing = document.getElementById(candidate);
+			return !!existing && existing !== titleEl.value;
+		}));
+		const copyValue = computed(() => sourceFiles.value[currentEntry.value] || "");
+		/** runtime / 双视图始终有顶栏；files-only 仅有标题时渲染。 */
+		const showHeader = computed(() => hasRuntimeView.value || !!displayTitle.value);
+		const showToolbar = computed(() => hasRuntimeView.value);
+		const showRuntimeActions = computed(() => activeView.value === "runtime");
 		watch(locale, () => {
 			if (props.entry && sourceFiles.value[props.entry] === void 0) error.value = t("playground.validation.entryMissing", { filename: props.entry });
 		});
@@ -1895,6 +2513,15 @@ var playground_default = /* @__PURE__ */ defineComponent({
 			activeViewport.value = cloneViewport(viewport);
 			emit("update:viewport", cloneViewport(viewport));
 		};
+		const handleRefresh = () => {
+			runtimeRef.value?.refresh();
+		};
+		const handleEdit = () => {
+			runtimeRef.value?.edit();
+		};
+		const handleOpenPopup = () => {
+			runtimeRef.value?.openPopup();
+		};
 		const handleFileActive = (filename) => {
 			if (sourceFiles.value[filename] !== void 0) fileActiveFilename.value = filename;
 		};
@@ -1976,7 +2603,10 @@ var playground_default = /* @__PURE__ */ defineComponent({
 				options: __props.options,
 				"preview-options": __props.previewOptions,
 				"preview-inset": __props.previewInset,
+				expandable: __props.expandable,
 				styleless: true,
+				title: __props.title,
+				id: __props.id,
 				viewport: activeViewport.value,
 				"viewport-options": selectableViewportOptions.value,
 				onFilesChange: handleFilesChange,
@@ -1988,27 +2618,68 @@ var playground_default = /* @__PURE__ */ defineComponent({
 				"options",
 				"preview-options",
 				"preview-inset",
+				"expandable",
+				"title",
+				"id",
 				"viewport",
 				"viewport-options"
 			])) : (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: normalizeClass(["docs-playground", { "docs-playground--files": activeView.value === "files" }])
-			}, [
-				error.value ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(error.value), 1)) : createCommentVNode("v-if", true),
-				runtimeActivated.value && normalizedViews.value.includes("runtime") ? withDirectives((openBlock(), createBlock(unref(runtime_default), {
+			}, [error.value ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(error.value), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+				showHeader.value ? (openBlock(), createElementBlock("div", _hoisted_2, [displayTitle.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					ref_key: "titleEl",
+					ref: titleEl,
+					class: "docs-playground__title",
+					id: titleId.value,
+					tabindex: "-1",
+					title: displayTitle.value
+				}, [createElementVNode("a", {
+					class: "docs-playground__title-anchor",
+					href: `#${titleId.value}`
+				}, "#", 8, _hoisted_4), createElementVNode("span", _hoisted_5, toDisplayString(displayTitle.value), 1)], 8, _hoisted_3)) : createCommentVNode("v-if", true), showToolbar.value ? (openBlock(), createBlock(toolbar_default, {
 					key: 1,
+					"copy-value": copyValue.value,
+					viewport: activeViewport.value,
+					"viewport-options": selectableViewportOptions.value,
+					views: normalizedViews.value,
+					"active-view": activeView.value,
+					"show-runtime-actions": showRuntimeActions.value,
+					"show-open-popup": hasRuntimeView.value,
+					onRefresh: handleRefresh,
+					onEdit: handleEdit,
+					onOpenPopup: handleOpenPopup,
+					onViewportChange: handleViewport,
+					onViewChange: handleView
+				}, null, 8, [
+					"copy-value",
+					"viewport",
+					"viewport-options",
+					"views",
+					"active-view",
+					"show-runtime-actions",
+					"show-open-popup"
+				])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
+				runtimeActivated.value && hasRuntimeView.value ? withDirectives((openBlock(), createBlock(unref(runtime_default), {
+					key: 1,
+					ref_key: "runtimeRef",
+					ref: runtimeRef,
 					files: sourceFiles.value,
 					entry: currentEntry.value,
 					options: __props.options,
 					"preview-options": __props.previewOptions,
 					"preview-inset": __props.previewInset,
+					expandable: __props.expandable,
+					"hide-chrome": true,
+					title: __props.title,
+					id: __props.id,
 					"active-view": activeView.value,
 					views: normalizedViews.value,
 					viewport: activeViewport.value,
 					"viewport-options": selectableViewportOptions.value,
 					onFilesChange: handleFilesChange,
 					onNavigate: _cache[1] || (_cache[1] = ($event) => emit("navigate", $event)),
-					onViewChange: handleView,
 					onViewportChange: handleViewport
 				}, null, 8, [
 					"files",
@@ -2016,30 +2687,32 @@ var playground_default = /* @__PURE__ */ defineComponent({
 					"options",
 					"preview-options",
 					"preview-inset",
+					"expandable",
+					"title",
+					"id",
 					"active-view",
 					"views",
 					"viewport",
 					"viewport-options"
-				])), [[vShow, !error.value && activeView.value === "runtime"]]) : createCommentVNode("v-if", true),
-				normalizedViews.value.includes("files") ? withDirectives((openBlock(), createBlock(unref(files_preview_default), {
+				])), [[vShow, activeView.value === "runtime"]]) : createCommentVNode("v-if", true),
+				hasFilesView.value ? withDirectives((openBlock(), createBlock(unref(files_preview_default), {
 					key: 2,
 					files: sourceFiles.value,
 					entry: currentEntry.value,
 					"active-filename": fileActiveFilename.value,
 					"active-view": activeView.value,
 					views: normalizedViews.value,
-					onActiveChange: handleFileActive,
-					onViewChange: handleView
+					onActiveChange: handleFileActive
 				}, null, 8, [
 					"files",
 					"entry",
 					"active-filename",
 					"active-view",
 					"views"
-				])), [[vShow, !error.value && activeView.value === "files"]]) : createCommentVNode("v-if", true)
-			], 2));
+				])), [[vShow, activeView.value === "files"]]) : createCommentVNode("v-if", true)
+			], 64))], 2));
 		};
 	}
 });
 //#endregion
-export { code_preview_default as CodePreview, DEFAULT_CDN_URL, Editor, playground_default as Playground, applyPlaygroundImportMapOverride, applyPlaygroundStyleOverride, clearPlaygroundMaps, createBuiltinImports, createBuiltinStyles, createRuntimePreviewOptions, getPlaygroundImportMapOverrides, getPlaygroundSiteModules, getPlaygroundSiteStyles, getPlaygroundStyleOverrides, highlightCode, highlightCodeByLanguage, isSafePlaygroundHref, normalizeCdnURL, registerVueHighlight, removePlaygroundImportMapOverride, removePlaygroundStyleOverride, resolveHighlightLanguage, setPlaygroundImportMapOverrides, setPlaygroundSiteModules, setPlaygroundSiteStyles, setPlaygroundStyleOverrides, vueHighlight };
+export { code_preview_default as CodePreview, DEFAULT_CDN_URL, Editor, playground_default as Playground, applyPlaygroundImportMapOverride, applyPlaygroundStyleOverride, clearPlaygroundMaps, createBuiltinImports, createBuiltinStyles, createRuntimePreviewOptions, getPlaygroundImportMapOverrides, getPlaygroundSiteModules, getPlaygroundSiteStyles, getPlaygroundStyleOverrides, highlightCode, highlightCodeByLanguage, isSafePlaygroundHref, normalizeCdnURL, registerVueHighlight, removePlaygroundImportMapOverride, removePlaygroundStyleOverride, resolveHighlightLanguage, resolvePlaygroundTitleId, setPlaygroundImportMapOverrides, setPlaygroundSiteModules, setPlaygroundSiteStyles, setPlaygroundStyleOverrides, slugifyPlaygroundTitle, vueHighlight };