@deot/docs-playground 1.0.10 → 1.1.1

package/dist/index.cjs

@@ -140,7 +140,7 @@ var PLAYGROUND_ICONS = {
 //#endregion
 //#region packages/playground/src/icon/icon.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$7 = ["fill", "stroke"];
-var _hoisted_2$6 = ["d"];
+var _hoisted_2$7 = ["d"];
 //#endregion
 //#region packages/playground/src/icon/icon.vue
 var icon_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -171,16 +171,16 @@ 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$6)], 12, _hoisted_1$7);
+			}, [(0, vue.createElementVNode)("path", { d: icon.value.path }, null, 8, _hoisted_2$7)], 12, _hoisted_1$7);
 		};
 	}
 });
 //#endregion
 //#region packages/playground/src/core/code-preview/github.css?inline
-var github_default = "pre code.hljs{display:block;padding:1em;overflow-x:auto}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{font-weight:700;color:#005cc5}.hljs-bullet{color:#735c0f}.hljs-emphasis{font-style:italic;color:#24292e}.hljs-strong{font-weight:700;color:#24292e}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}[data-doc-theme=dark] .hljs,[data-vc-theme=dark] .hljs{color:#c9d1d9;background:#0d1117}[data-doc-theme=dark] .hljs-doctag,[data-doc-theme=dark] .hljs-keyword,[data-doc-theme=dark] .hljs-meta .hljs-keyword,[data-doc-theme=dark] .hljs-template-tag,[data-doc-theme=dark] .hljs-template-variable,[data-doc-theme=dark] .hljs-type,[data-doc-theme=dark] .hljs-variable.language_,[data-vc-theme=dark] .hljs-doctag,[data-vc-theme=dark] .hljs-keyword,[data-vc-theme=dark] .hljs-meta .hljs-keyword,[data-vc-theme=dark] .hljs-template-tag,[data-vc-theme=dark] .hljs-template-variable,[data-vc-theme=dark] .hljs-type,[data-vc-theme=dark] .hljs-variable.language_{color:#ff7b72}[data-doc-theme=dark] .hljs-title,[data-doc-theme=dark] .hljs-title.class_,[data-doc-theme=dark] .hljs-title.function_,[data-vc-theme=dark] .hljs-title,[data-vc-theme=dark] .hljs-title.class_,[data-vc-theme=dark] .hljs-title.function_{color:#d2a8ff}[data-doc-theme=dark] .hljs-attr,[data-doc-theme=dark] .hljs-literal,[data-doc-theme=dark] .hljs-number,[data-doc-theme=dark] .hljs-variable,[data-vc-theme=dark] .hljs-attr,[data-vc-theme=dark] .hljs-literal,[data-vc-theme=dark] .hljs-number,[data-vc-theme=dark] .hljs-variable{color:#79c0ff}[data-doc-theme=dark] .hljs-regexp,[data-doc-theme=dark] .hljs-string,[data-vc-theme=dark] .hljs-regexp,[data-vc-theme=dark] .hljs-string{color:#a5d6ff}[data-doc-theme=dark] .hljs-code,[data-doc-theme=dark] .hljs-comment,[data-vc-theme=dark] .hljs-code,[data-vc-theme=dark] .hljs-comment{color:#8b949e}[data-doc-theme=dark] .hljs-name,[data-doc-theme=dark] .hljs-selector-tag,[data-vc-theme=dark] .hljs-name,[data-vc-theme=dark] .hljs-selector-tag{color:#7ee787}";
+var github_default = "pre code.hljs{display:block;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{font-weight:700;color:#005cc5}.hljs-bullet{color:#735c0f}.hljs-emphasis{font-style:italic;color:#24292e}.hljs-strong{font-weight:700;color:#24292e}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}[data-doc-theme=dark] .hljs,[data-vc-theme=dark] .hljs{color:#c9d1d9;background:#0d1117}[data-doc-theme=dark] .hljs-doctag,[data-doc-theme=dark] .hljs-keyword,[data-doc-theme=dark] .hljs-meta .hljs-keyword,[data-doc-theme=dark] .hljs-template-tag,[data-doc-theme=dark] .hljs-template-variable,[data-doc-theme=dark] .hljs-type,[data-doc-theme=dark] .hljs-variable.language_,[data-vc-theme=dark] .hljs-doctag,[data-vc-theme=dark] .hljs-keyword,[data-vc-theme=dark] .hljs-meta .hljs-keyword,[data-vc-theme=dark] .hljs-template-tag,[data-vc-theme=dark] .hljs-template-variable,[data-vc-theme=dark] .hljs-type,[data-vc-theme=dark] .hljs-variable.language_{color:#ff7b72}[data-doc-theme=dark] .hljs-title,[data-doc-theme=dark] .hljs-title.class_,[data-doc-theme=dark] .hljs-title.function_,[data-vc-theme=dark] .hljs-title,[data-vc-theme=dark] .hljs-title.class_,[data-vc-theme=dark] .hljs-title.function_{color:#d2a8ff}[data-doc-theme=dark] .hljs-attr,[data-doc-theme=dark] .hljs-literal,[data-doc-theme=dark] .hljs-number,[data-doc-theme=dark] .hljs-variable,[data-vc-theme=dark] .hljs-attr,[data-vc-theme=dark] .hljs-literal,[data-vc-theme=dark] .hljs-number,[data-vc-theme=dark] .hljs-variable{color:#79c0ff}[data-doc-theme=dark] .hljs-regexp,[data-doc-theme=dark] .hljs-string,[data-vc-theme=dark] .hljs-regexp,[data-vc-theme=dark] .hljs-string{color:#a5d6ff}[data-doc-theme=dark] .hljs-code,[data-doc-theme=dark] .hljs-comment,[data-vc-theme=dark] .hljs-code,[data-vc-theme=dark] .hljs-comment{color:#8b949e}[data-doc-theme=dark] .hljs-name,[data-doc-theme=dark] .hljs-selector-tag,[data-vc-theme=dark] .hljs-name,[data-vc-theme=dark] .hljs-selector-tag{color:#7ee787}";
 //#endregion
 //#region packages/playground/src/core/code-preview/code-preview.scss?inline
-var code_preview_default$1 = ".docs-code-preview{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:0;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border-radius:8px}.docs-code-preview__language{z-index:1;min-width:28px;padding:0 8px;font-size:12px;line-height:18px;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .15s ease;transition:opacity .15s ease}.docs-code-preview__copy,.docs-code-preview__language{position:absolute;top:6px;right:12px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:28px;color:var(--docs-foreground-color-mute,var(--vc-color-dark-extralight,#71717a));-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-code-preview__copy{z-index:2;width:28px;padding:0;pointer-events:none;cursor:pointer;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border:1px solid var(--docs-border-color,var(--vc-color-light-deeper,#d4d4d8));border-radius:8px;opacity:0;-webkit-transition:opacity .15s ease,background-color .15s ease;transition:opacity .15s ease,background-color .15s ease}.docs-code-preview__copy:hover{background:var(--docs-background-color,var(--vc-background-color-light,#fff))}.docs-code-preview__copy:focus-visible{pointer-events:auto;opacity:1}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__language,.docs-code-preview:hover .docs-code-preview__language{opacity:0}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__copy,.docs-code-preview:hover .docs-code-preview__copy{pointer-events:auto;opacity:1}.docs-code-preview__code{width:100%;min-height:0;margin:0;overflow:auto;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-code-preview__code,.docs-code-preview__code code.hljs{background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa))}.docs-code-preview__code code.hljs{min-height:100%;padding:12px 96px 12px 24px;-webkit-box-sizing:border-box;box-sizing:border-box}";
+var code_preview_default$1 = ".docs-code-preview{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:0;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border-radius:8px}.docs-code-preview__language{z-index:1;min-width:28px;padding:0 8px;font-size:12px;line-height:18px;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .15s ease;transition:opacity .15s ease}.docs-code-preview__copy,.docs-code-preview__language{position:absolute;top:6px;right:12px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:28px;color:var(--docs-foreground-color-mute,var(--vc-color-dark-extralight,#71717a));-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-code-preview__copy{z-index:2;width:28px;padding:0;pointer-events:none;cursor:pointer;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border:1px solid var(--docs-border-color,var(--vc-color-light-deeper,#d4d4d8));border-radius:8px;opacity:0;-webkit-transition:opacity .15s ease,background-color .15s ease;transition:opacity .15s ease,background-color .15s ease}.docs-code-preview__copy:hover{background:var(--docs-background-color,var(--vc-background-color-light,#fff))}.docs-code-preview__copy:focus-visible{pointer-events:auto;opacity:1}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__language,.docs-code-preview:hover .docs-code-preview__language{opacity:0}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__copy,.docs-code-preview:hover .docs-code-preview__copy{pointer-events:auto;opacity:1}.docs-code-preview__scroller{width:100%;height:100%;min-width:0;min-height:0;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-code-preview__code{width:-webkit-max-content;width:-moz-max-content;width:max-content;margin:0}.docs-code-preview__code,.docs-code-preview__code code.hljs{min-width:100%;min-height:100%;overflow:visible;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa))}.docs-code-preview__code code.hljs{display:block;padding:12px 96px 12px 24px;-webkit-box-sizing:border-box;box-sizing:border-box}";
 //#endregion
 //#region packages/playground/src/core/code-preview/style.ts
 var CODE_PREVIEW_STYLE_ID = "docs-code-preview-style";
@@ -198,9 +198,9 @@ var ensureCodePreviewStyle = () => {
 //#endregion
 //#region packages/playground/src/core/code-preview/code-preview.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$6 = { class: "docs-code-preview" };
-var _hoisted_2$5 = ["title"];
-var _hoisted_3$5 = { class: "docs-code-preview__code" };
-var _hoisted_4$5 = ["innerHTML"];
+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__ */ (0, vue.defineComponent)({
@@ -236,7 +236,7 @@ var code_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					key: 0,
 					class: "docs-code-preview__language",
 					title: languageLabel.value
-				}, (0, vue.toDisplayString)(languageLabel.value), 9, _hoisted_2$5)) : (0, vue.createCommentVNode)("v-if", true),
+				}, (0, vue.toDisplayString)(languageLabel.value), 9, _hoisted_2$6)) : (0, vue.createCommentVNode)("v-if", true),
 				(0, vue.createVNode)((0, vue.unref)(_deot_vc.Clipboard), {
 					class: "docs-code-preview__copy",
 					value: __props.code,
@@ -252,54 +252,32 @@ var code_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"title",
 					"aria-label"
 				]),
-				(0, vue.createCommentVNode)(" eslint-disable-next-line vue/no-v-html "),
-				(0, vue.createElementVNode)("pre", _hoisted_3$5, [(0, vue.createElementVNode)("code", {
-					class: "hljs",
-					innerHTML: highlightedCode.value
-				}, null, 8, _hoisted_4$5)])
+				(0, vue.createVNode)((0, vue.unref)(_deot_vc.Scroller), {
+					class: "docs-code-preview__scroller",
+					"auto-resize": true,
+					native: false,
+					"show-bar": true,
+					height: "100%"
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createCommentVNode)(" eslint-disable-next-line vue/no-v-html "), (0, vue.createElementVNode)("pre", _hoisted_3$6, [(0, vue.createElementVNode)("code", {
+						class: "hljs",
+						innerHTML: highlightedCode.value
+					}, null, 8, _hoisted_4$6)])]),
+					_: 1
+				})
 			]);
 		};
 	}
 });
 //#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$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 = {
+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$4 = { class: "docs-playground-files__actions" };
-var _hoisted_6$3 = {
-	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__ */ (0, vue.defineComponent)({
@@ -311,28 +289,26 @@ var files_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		activeView: {},
 		activeFilename: {}
 	},
-	emits: ["active-change", "view-change"],
+	emits: ["active-change"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const { t } = (0, _deot_docs_locale.useLocale)();
-		const getViewText = (view) => t(playgroundViewMessage(view));
 		const emit = __emit;
 		const filenames = (0, vue.computed)(() => Object.keys(props.files));
 		const activeCode = (0, vue.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 (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), {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$5, [(0, vue.createElementVNode)("div", _hoisted_2$5, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.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: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(filenames.value, (filename) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
@@ -341,20 +317,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$4, (0, vue.toDisplayString)((0, vue.unref)(t)("playground.files.entry")), 1)) : (0, vue.createCommentVNode)("v-if", true)], 10, _hoisted_3$4);
+					}, [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(filename), 1), filename === __props.entry ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("small", _hoisted_4$5, (0, vue.toDisplayString)((0, vue.unref)(t)("playground.files.entry")), 1)) : (0, vue.createCommentVNode)("v-if", true)], 10, _hoisted_3$5);
 				}), 128))]),
 				_: 1
-			}), (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",
-					class: (0, vue.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)
-				}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: item }, null, 8, ["name"])], 10, _hoisted_7$2);
-			}), 128))])) : (0, vue.createCommentVNode)("v-if", true)])]), (0, vue.createVNode)((0, vue.unref)(code_preview_default), {
+			})]), (0, vue.createVNode)((0, vue.unref)(code_preview_default), {
 				class: "docs-playground-files__body",
 				code: activeCode.value,
 				filename: __props.activeFilename,
@@ -486,21 +452,21 @@ var Drag = class {
 //#endregion
 //#region packages/playground/src/editor/editor.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$4 = { class: "docs-playground-editor" };
-var _hoisted_2$3 = ["title"];
-var _hoisted_3$3 = { class: "docs-playground-editor__files" };
-var _hoisted_4$3 = [
+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$3 = ["onKeydown"];
-var _hoisted_6$2 = ["title"];
-var _hoisted_7$1 = ["title", "aria-label"];
-var _hoisted_8$1 = ["title", "aria-label"];
-var _hoisted_9 = { class: "docs-playground-editor__actions" };
-var _hoisted_10 = ["title"];
-var _hoisted_11 = ["title", "disabled"];
-var _hoisted_12 = {
+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$1 = {
 	key: 0,
 	class: "docs-playground-editor__error"
 };
@@ -752,8 +718,8 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						title: (0, vue.unref)(t)("playground.common.close"),
 						style: { "cursor": "pointer" },
 						onClick: handleHide
-					}, "✕", 8, _hoisted_2$3)], 512),
-					(0, vue.createElementVNode)("div", _hoisted_3$3, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.Scroller), {
+					}, "✕", 8, _hoisted_2$4)], 512),
+					(0, vue.createElementVNode)("div", _hoisted_3$4, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.Scroller), {
 						ref_key: "scroller",
 						ref: scroller,
 						class: "docs-playground-editor__scroller",
@@ -781,11 +747,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$3)), [[vue.vModelText, filenameDraft.value]]) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
+							}, null, 40, _hoisted_5$4)), [[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$2)) : (0, vue.createCommentVNode)("v-if", true),
+								}, "●", 8, _hoisted_6$3)) : (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,7 +760,7 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									title: (0, vue.unref)(t)("playground.editor.entryCannotDelete"),
 									"aria-label": (0, vue.unref)(t)("playground.editor.entryCannotDelete"),
 									disabled: ""
-								}, null, 8, _hoisted_7$1)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_deot_vc.Popconfirm), {
+								}, null, 8, _hoisted_7$3)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_deot_vc.Popconfirm), {
 									key: 2,
 									class: "docs-playground-editor__delete",
 									title: (0, vue.unref)(t)("playground.editor.confirmDelete", { filename }),
@@ -807,23 +773,23 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 										class: "docs-playground-editor__close",
 										title: (0, vue.unref)(t)("playground.editor.deleteFile"),
 										"aria-label": (0, vue.unref)(t)("playground.editor.confirmDelete", { filename })
-									}, null, 8, _hoisted_8$1)]),
+									}, null, 8, _hoisted_8$2)]),
 									_: 2
 								}, 1032, ["title", "onOk"]))
-							], 64))], 42, _hoisted_4$3);
+							], 64))], 42, _hoisted_4$4);
 						}), 128))]),
 						_: 1
-					}, 512), (0, vue.createElementVNode)("div", _hoisted_9, [(0, vue.createElementVNode)("button", {
+					}, 512), (0, vue.createElementVNode)("div", _hoisted_9$2, [(0, vue.createElementVNode)("button", {
 						type: "button",
 						title: (0, vue.unref)(t)("playground.editor.createFile"),
 						onClick: handleCreate
-					}, "＋", 8, _hoisted_10), (0, vue.createElementVNode)("button", {
+					}, "＋", 8, _hoisted_10$1), (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)])]),
-					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.toDisplayString)((0, vue.unref)(t)("playground.editor.setEntry")), 9, _hoisted_11$1)])]),
+					codeErrorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_12$1, (0, vue.toDisplayString)(codeErrorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
 					(0, vue.createVNode)((0, vue.unref)(_deot_vc.Scroller), {
 						ref_key: "editorScroller",
 						ref: editorScroller,
@@ -850,19 +816,156 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#endregion
 //#region packages/playground/src/editor/index.ts
 var Editor = new _deot_vc.Portal(editor_default, { 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}`;
+};
+//#endregion
+//#region packages/playground/src/core/preview-scroll.ts
+/** iframe 包装成功后挂在 `html` 上，供样式与 auto-height 识别。 */
+var PREVIEW_SCROLL_HTML_CLASS = "docs-playground-preview-scroll";
+/** Scroller 内容节点 class，auto-height 优先测量该节点。 */
+var PREVIEW_SCROLL_CONTENT_CLASS = "docs-playground-preview-scroll__content";
+/** 重评时先清掉 html class，避免 `await import` 期间仍套用 `height:100%`。 */
+var PREVIEW_SCROLL_RESET_CODE = `document.documentElement.classList.remove("${PREVIEW_SCROLL_HTML_CLASS}");`;
+/** 动态探测 `@deot/vc`；失败时为空对象，不阻断 DocsLink / 预览挂载。 */
+var PREVIEW_SCROLLER_IMPORT_CODE = "const __docsVc=await import(\"@deot/vc\").catch(()=>({}))";
+/**
+* Vue 的 `mount` 闭包的是 `createApp(root)` 时的根组件，改 `app._component` 不会生效。
+* 因此劫持 `app.mount`：等全部 useCode 注册完后，再 `createApp` 包一层 Scroller。
+* 前导分号避免接在 `app.component(...)` 后被 ASI 解析成调用返回值。
+*/
+var PREVIEW_SCROLLER_USE_CODE = [
+	";(()=>{",
+	PREVIEW_SCROLL_RESET_CODE,
+	"const __DocsScroller=__docsVc&&__docsVc.Scroller;",
+	"if(!__DocsScroller)return;",
+	"const UserApp=app._component;",
+	"app.mount=(container,...rest)=>{",
+	"const next=_createApp({",
+	"name:\"DocsPreviewRoot\",",
+	"setup(){return()=>__docsH(__DocsScroller,{",
+	"height:\"100%\",",
+	"native:false,",
+	"autoResize:true,",
+	"showBar:true,",
+	`contentClass:"${PREVIEW_SCROLL_CONTENT_CLASS}"`,
+	"},{default:()=>__docsH(UserApp)})}",
+	"});",
+	"next.config.errorHandler=app.config.errorHandler;",
+	"if(app._context&&next._context){",
+	"if(app._context.components)Object.assign(next._context.components,app._context.components);",
+	"if(app._context.directives)Object.assign(next._context.directives,app._context.directives);",
+	"}",
+	"window.__app__=next;",
+	`document.documentElement.classList.add("${PREVIEW_SCROLL_HTML_CLASS}");`,
+	"return next.mount(container,...rest)",
+	"}",
+	"})()"
+].join("");
+var PREVIEW_SCROLLER_STYLE = [
+	`html.${PREVIEW_SCROLL_HTML_CLASS},`,
+	`html.${PREVIEW_SCROLL_HTML_CLASS} body,`,
+	`html.${PREVIEW_SCROLL_HTML_CLASS} #app{`,
+	"height:100%;min-height:100%;margin:0;overflow:hidden",
+	"}",
+	`html.${PREVIEW_SCROLL_HTML_CLASS} #app>.vc-scroller,`,
+	`html.${PREVIEW_SCROLL_HTML_CLASS} #app>.vc-scroller>.vc-scroller__wrapper{`,
+	"height:100%;max-height:100%;box-sizing:border-box",
+	"}"
+].join("");
 var resolveSandboxContainer = (sandbox) => sandbox?.container ? (0, vue.unref)(sandbox.container) : null;
+var resolveScrollContent = (iframeDocument) => {
+	if (!iframeDocument.documentElement.classList.contains("docs-playground-preview-scroll")) return null;
+	return iframeDocument.querySelector(`.${PREVIEW_SCROLL_CONTENT_CLASS}`);
+};
 var useSandboxAutoHeight = (sandboxRef) => {
 	const height = (0, vue.ref)(24);
 	let container = null;
 	let iframe = null;
 	let containerObserver = null;
 	let contentObserver = null;
+	let scrollMountObserver = null;
+	let observedScrollNode = null;
 	let frameId = 0;
 	const cancelMeasure = () => {
 		if (!frameId) return;
 		cancelAnimationFrame(frameId);
 		frameId = 0;
 	};
+	const measureDocumentContent = (iframeWindow, iframeDocument) => {
+		const { body, documentElement } = iframeDocument;
+		const bodyStyle = iframeWindow.getComputedStyle(body);
+		const bodyMargins = (Number.parseFloat(bodyStyle.marginTop) || 0) + (Number.parseFloat(bodyStyle.marginBottom) || 0);
+		const rootTop = documentElement.getBoundingClientRect().top;
+		const bodyRect = body.getBoundingClientRect();
+		const collapsedTop = Math.max(0, bodyRect.top - rootTop);
+		let childrenBottom = 0;
+		for (const child of body.children) {
+			const rect = child.getBoundingClientRect();
+			const marginBottom = Number.parseFloat(iframeWindow.getComputedStyle(child).marginBottom) || 0;
+			childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
+		}
+		const scrollHeight = Math.max(body.scrollHeight, documentElement.scrollHeight);
+		const overflowingHeight = scrollHeight > (iframe?.clientHeight || 0) + 1 ? scrollHeight : 0;
+		return Math.ceil(Math.max(body.offsetHeight + bodyMargins + collapsedTop, bodyRect.height + bodyMargins + collapsedTop, childrenBottom, overflowingHeight));
+	};
+	const measureScrollContent = (scrollContent) => {
+		const contentStyle = scrollContent.ownerDocument.defaultView?.getComputedStyle(scrollContent);
+		const margins = contentStyle ? (Number.parseFloat(contentStyle.marginTop) || 0) + (Number.parseFloat(contentStyle.marginBottom) || 0) : 0;
+		let childrenBottom = 0;
+		const rootTop = scrollContent.getBoundingClientRect().top;
+		for (const child of scrollContent.children) {
+			const rect = child.getBoundingClientRect();
+			const marginBottom = Number.parseFloat(scrollContent.ownerDocument.defaultView?.getComputedStyle(child).marginBottom || "0") || 0;
+			childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
+		}
+		return Math.ceil(Math.max(scrollContent.scrollHeight + margins, scrollContent.offsetHeight + margins, childrenBottom + margins));
+	};
+	const isEmptyPreviewApp = (iframeDocument) => {
+		const app = iframeDocument.getElementById("app");
+		return !!app && app.childElementCount === 0;
+	};
 	const measure = () => {
 		frameId = 0;
 		if (!iframe) return;
@@ -870,21 +973,9 @@ var useSandboxAutoHeight = (sandboxRef) => {
 			const iframeWindow = iframe.contentWindow;
 			const iframeDocument = iframe.contentDocument;
 			if (!iframeWindow || !iframeDocument?.body) return;
-			const { body, documentElement } = iframeDocument;
-			const bodyStyle = iframeWindow.getComputedStyle(body);
-			const bodyMargins = (Number.parseFloat(bodyStyle.marginTop) || 0) + (Number.parseFloat(bodyStyle.marginBottom) || 0);
-			const rootTop = documentElement.getBoundingClientRect().top;
-			const bodyRect = body.getBoundingClientRect();
-			const collapsedTop = Math.max(0, bodyRect.top - rootTop);
-			let childrenBottom = 0;
-			for (const child of body.children) {
-				const rect = child.getBoundingClientRect();
-				const marginBottom = Number.parseFloat(iframeWindow.getComputedStyle(child).marginBottom) || 0;
-				childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
-			}
-			const scrollHeight = Math.max(body.scrollHeight, documentElement.scrollHeight);
-			const overflowingHeight = scrollHeight > iframe.clientHeight + 1 ? scrollHeight : 0;
-			const contentHeight = Math.ceil(Math.max(body.offsetHeight + bodyMargins + collapsedTop, bodyRect.height + bodyMargins + collapsedTop, childrenBottom, overflowingHeight));
+			const scrollContent = resolveScrollContent(iframeDocument);
+			if (!scrollContent && isEmptyPreviewApp(iframeDocument)) return;
+			const contentHeight = scrollContent ? measureScrollContent(scrollContent) : measureDocumentContent(iframeWindow, iframeDocument);
 			const nextHeight = Math.max(contentHeight, 24);
 			if (height.value !== nextHeight) height.value = nextHeight;
 		} catch {
@@ -898,6 +989,9 @@ var useSandboxAutoHeight = (sandboxRef) => {
 	const disconnectContent = () => {
 		contentObserver?.disconnect();
 		contentObserver = null;
+		scrollMountObserver?.disconnect();
+		scrollMountObserver = null;
+		observedScrollNode = null;
 		cancelMeasure();
 	};
 	const observeContent = () => {
@@ -915,7 +1009,28 @@ var useSandboxAutoHeight = (sandboxRef) => {
 			observer.observe(iframeDocument.documentElement);
 			observer.observe(iframeDocument.body);
 			contentObserver = observer;
-			scheduleMeasure();
+			const attachScrollContent = (node) => {
+				if (!node || !contentObserver) return false;
+				if (observedScrollNode === node) return true;
+				if (observedScrollNode) contentObserver.unobserve(observedScrollNode);
+				observedScrollNode = node;
+				contentObserver.observe(node);
+				return true;
+			};
+			const syncScrollContent = () => {
+				attachScrollContent(resolveScrollContent(iframeDocument));
+				scheduleMeasure();
+			};
+			scrollMountObserver = new MutationObserver(syncScrollContent);
+			scrollMountObserver.observe(iframeDocument.documentElement, {
+				attributes: true,
+				attributeFilter: ["class"]
+			});
+			scrollMountObserver.observe(iframeDocument.body, {
+				childList: true,
+				subtree: true
+			});
+			syncScrollContent();
 		} catch {
 			if (height.value !== 24) height.value = 24;
 		}
@@ -959,6 +1074,12 @@ var useSandboxAutoHeight = (sandboxRef) => {
 	});
 	return height;
 };
+var resolvePreviewBoxHeight = (contentHeight, verticalInset = 0, borderWidth = 1) => {
+	const content = Number.isFinite(contentHeight) ? Math.max(0, contentHeight) : 0;
+	const inset = Number.isFinite(verticalInset) ? Math.max(0, verticalInset) : 0;
+	const border = Number.isFinite(borderWidth) ? Math.max(0, borderWidth) : 1;
+	return content + inset * 2 + border * 2;
+};
 var CLIPPING_OVERFLOW = /* @__PURE__ */ new Set([
 	"auto",
 	"scroll",
@@ -972,14 +1093,14 @@ var SCROLLABLE_OVERFLOW = /* @__PURE__ */ new Set([
 ]);
 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 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 = (expand, availableHeight) => {
-	if (expand === true) return Math.max(24, Math.round(Number.isFinite(availableHeight) ? availableHeight : 0));
-	return Math.max(24, Math.round(expand));
+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();
@@ -1127,6 +1248,13 @@ 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,
@@ -1138,9 +1266,9 @@ var getWindowInnerSize = () => {
 	};
 };
 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 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 {
@@ -1151,11 +1279,11 @@ var resolvePopupRequestedSize = (viewport, screen = getWindowInnerSize(), gap =
 	};
 };
 /**
-* 壳层封顶到 `screen - gap`。未设 viewport 边时，画布铺满工具栏以下区域；
-* 请求尺寸大于可用区域时由 Scroller 处理溢出。
+* 壳层封顶到 `screen.width - gap * 2`、`screen.height - gap`。
+* 未设 viewport 边时，画布铺满工具栏以下区域；请求尺寸大于可用区域时由 Scroller 处理溢出。
 * @param viewport 当前 playground 视口配置。
-* @param screen 屏幕可用宽高，默认取 `window.inner*`.
-* @param gap 相对屏幕边缘的留白。
+* @param screen 屏幕可用宽高，默认取 `window.inner*`。
+* @param gap 相对屏幕上下边缘的留白；左右为该值的 2 倍。
 * @returns 壳层、内容区与画布尺寸，以及是否需要滚动。
 */
 var resolvePopupLayout = (viewport, screen = getWindowInnerSize(), gap = 40) => {
@@ -1270,23 +1398,56 @@ var useSandboxTheme = (sandboxRef) => {
 //#endregion
 //#region packages/playground/src/core/runtime/toolbar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$3 = { class: "docs-playground__tools" };
-var _hoisted_2$2 = ["title", "aria-label"];
-var _hoisted_3$2 = [
+var _hoisted_2$3 = {
+	key: 0,
+	class: "docs-playground__tool-group"
+};
+var _hoisted_3$3 = [
 	"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"];
+var _hoisted_4$3 = {
+	key: 1,
+	class: "docs-playground__tool-divider",
+	"aria-hidden": "true"
+};
+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 _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__ */ (0, vue.defineComponent)({
 	__name: "toolbar",
 	props: {
-		copyValue: {},
+		copyValue: { default: "" },
 		viewport: { default: "auto" },
 		viewportOptions: { default: () => ["auto", 375] },
+		views: { default: () => [] },
+		activeView: { default: "runtime" },
+		showRuntimeActions: {
+			type: Boolean,
+			default: true
+		},
 		showOpenPopup: {
 			type: Boolean,
 			default: false
@@ -1301,14 +1462,20 @@ var toolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		"edit",
 		"open-popup",
 		"close-popup",
-		"viewport-change"
+		"viewport-change",
+		"view-change"
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const { t } = (0, _deot_docs_locale.useLocale)();
+		const VIEW_ORDER = ["runtime", "files"];
 		const viewportMenuVisible = (0, vue.ref)(false);
+		const orderedViews = (0, vue.computed)(() => VIEW_ORDER.filter((view) => props.views.includes(view)));
+		const showViews = (0, vue.computed)(() => orderedViews.value.length > 1);
 		const viewportLabel = (0, vue.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);
@@ -1316,95 +1483,120 @@ var toolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		(0, vue.watch)(() => props.viewportOptions.length, (length) => {
 			if (length <= 1) viewportMenuVisible.value = false;
 		});
+		(0, vue.watch)(() => props.showRuntimeActions, (enabled) => {
+			if (!enabled) 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")
+				__props.showRuntimeActions ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [
+					__props.viewportOptions.length > 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$3, [(0, vue.createVNode)((0, vue.unref)(_deot_vc.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"
 					}, {
-						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))]),
+						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$3)]),
 						_: 1
-					}, 8, ["aria-label"])]),
-					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("button", {
+					}, 8, ["modelValue"])])) : (0, vue.createCommentVNode)("v-if", true),
+					__props.viewportOptions.length > 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$3)) : (0, vue.createCommentVNode)("v-if", true),
+					(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", {
+						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[1] || (_cache[1] = ($event) => emit("refresh"))
+					}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "refresh" })], 8, _hoisted_5$3),
+					(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_6$2),
+					__props.showOpenPopup ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+						key: 2,
+						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_7$2)) : (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"
+					]),
+					showViews.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_8$1)) : (0, vue.createCommentVNode)("v-if", true)
+				], 64)) : (0, vue.createCommentVNode)("v-if", true),
+				showViews.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 					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),
+					class: "docs-playground__views",
+					role: "tablist",
+					"aria-label": (0, vue.unref)(t)("playground.runtime.views")
+				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(orderedViews.value, (item) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+						key: item,
+						type: "button",
+						class: (0, vue.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)
+					}, (0, vue.toDisplayString)(getViewLabel(item)), 11, _hoisted_10);
+				}), 128))], 8, _hoisted_9$1)) : (0, vue.createCommentVNode)("v-if", true),
+				__props.showClose && (__props.showRuntimeActions || showViews.value) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_11)) : (0, vue.createCommentVNode)("v-if", true),
 				__props.showClose ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
-					key: 2,
+					key: 3,
 					type: "button",
 					class: "docs-playground__tool docs-playground__popup-close",
 					"data-action": "close-popup",
@@ -1414,7 +1606,7 @@ var toolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, [..._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)
+				}, "✕", -1)])], 8, _hoisted_12)) : (0, vue.createCommentVNode)("v-if", true)
 			]);
 		};
 	}
@@ -1757,6 +1949,7 @@ var bindPlaygroundScss = (store) => {
 //#region packages/playground/src/core/store.ts
 var DOCS_LINK_IMPORT_CODE = "import { h as __docsH } from \"vue\"";
 var DOCS_LINK_USE_CODE = [
+	PREVIEW_SCROLL_RESET_CODE,
 	"app.component(\"DocsLink\",{",
 	"props:{to:{type:String,default:\"\"}},",
 	"setup(props,{slots}){return()=>__docsH(\"a\",{",
@@ -1773,21 +1966,27 @@ var escapeHtmlAttr = (value) => value.replace(/&/gu, "&amp;").replace(/"/gu, "&q
 * `--vc-background-color-light` 不同，否则会出现色带割裂。
 */
 var PLAYGROUND_RUNTIME_CANVAS_BACKGROUND = "var(--vc-background-color-light, var(--docs-background-color, #fff))";
-var createRuntimePreviewOptions = (cdnURL = DEFAULT_CDN_URL) => {
+var createRuntimePreviewOptions = (cdnURL = DEFAULT_CDN_URL, options = {}) => {
+	const previewScroller = options.previewScroller === true;
+	const hrefs = Object.values({
+		...createBuiltinStyles(cdnURL),
+		...getPlaygroundSiteStyles(),
+		...getPlaygroundStyleOverrides()
+	});
+	const styleBlocks = [
+		`html,body{height:auto;min-height:0;background:${PLAYGROUND_RUNTIME_CANVAS_BACKGROUND}}`,
+		"body{color:var(--vc-foreground-color,#080f20)}",
+		...previewScroller ? [PREVIEW_SCROLLER_STYLE] : []
+	];
 	return {
 		showRuntimeError: false,
 		showRuntimeWarning: false,
 		headHTML: [
 			SANDBOX_RUNTIME_ERROR_CAPTURE_HTML,
 			"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
-			...Object.values({
-				...createBuiltinStyles(cdnURL),
-				...getPlaygroundSiteStyles(),
-				...getPlaygroundStyleOverrides()
-			}).map((href) => `<link rel="stylesheet" href="${escapeHtmlAttr(href)}">`),
+			...hrefs.map((href) => `<link rel="stylesheet" href="${escapeHtmlAttr(href)}">`),
 			"<style>",
-			`html,body{height:auto;min-height:0;background:${PLAYGROUND_RUNTIME_CANVAS_BACKGROUND}}`,
-			"body{color:var(--vc-foreground-color,#080f20)}",
+			...styleBlocks,
 			"</style>"
 		].join("\n"),
 		customCode: {
@@ -1835,14 +2034,16 @@ var createRuntimeStore = (files, entry, options) => {
 //#endregion
 //#region packages/playground/src/core/runtime/alone/wrapper.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$2 = ["aria-label"];
-var _hoisted_2$1 = { class: "docs-playground-popup__frame" };
-var _hoisted_3$1 = { class: "docs-playground-popup__header" };
-var _hoisted_4$1 = {
+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_5$1 = { class: "docs-playground-popup__body" };
+var _hoisted_7$1 = { class: "docs-playground-popup__body" };
 //#endregion
 //#region packages/playground/src/core/runtime/alone/wrapper.vue
 var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1850,6 +2051,7 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		store: {},
 		copyValue: {},
+		title: { default: "" },
 		viewport: { default: "auto" },
 		viewportOptions: { default: () => ["auto", 375] },
 		previewOptions: {},
@@ -1950,8 +2152,12 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}), (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, {
+			}, [(0, vue.createElementVNode)("div", _hoisted_2$2, [
+				(0, vue.createElementVNode)("div", _hoisted_3$2, [__props.title.trim() ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 0,
+					class: "docs-playground__title",
+					title: __props.title.trim()
+				}, [(0, vue.createElementVNode)("span", _hoisted_5$2, (0, vue.toDisplayString)(__props.title.trim()), 1)], 8, _hoisted_4$2)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)(toolbar_default, {
 					"copy-value": __props.copyValue,
 					viewport: currentViewport.value,
 					"viewport-options": __props.viewportOptions,
@@ -1965,8 +2171,8 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"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), {
+				errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_6$1, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
+				(0, vue.createElementVNode)("div", _hoisted_7$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,
@@ -2006,29 +2212,25 @@ var Alone = new _deot_vc.Portal(wrapper_default, {
 //#endregion
 //#region packages/playground/src/core/runtime/runtime.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = { class: "docs-playground-runtime-host" };
-var _hoisted_2 = {
+var _hoisted_2$1 = {
 	key: 0,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
-var _hoisted_3 = { class: "docs-playground__header" };
-var _hoisted_4 = {
+var _hoisted_3$1 = {
 	key: 0,
-	class: "docs-playground__views"
+	class: "docs-playground__header"
 };
-var _hoisted_5 = [
-	"title",
-	"aria-label",
-	"aria-pressed",
-	"onClick"
-];
-var _hoisted_6 = {
-	key: 0,
+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_7 = { class: "docs-playground-runtime__viewport-stage" };
-var _hoisted_8 = [
+var _hoisted_8 = { class: "docs-playground-runtime__viewport-stage" };
+var _hoisted_9 = [
 	"aria-expanded",
 	"title",
 	"aria-label"
@@ -2045,11 +2247,21 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		options: {},
 		previewInset: { default: 10 },
 		previewOptions: {},
+		previewScroller: {
+			type: Boolean,
+			default: false
+		},
 		styleless: {
 			type: Boolean,
 			default: false
 		},
-		expand: { type: [Boolean, Number] },
+		hideChrome: {
+			type: Boolean,
+			default: false
+		},
+		expandable: { type: [Boolean, Number] },
+		title: { default: "" },
+		id: { default: "" },
 		viewport: { default: "auto" },
 		viewportOptions: { default: () => ["auto", 375] }
 	},
@@ -2059,14 +2271,20 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		"viewport-change",
 		"navigate"
 	],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const { locale, t } = (0, _deot_docs_locale.useLocale)();
-		const getViewText = (view) => t(playgroundViewMessage(view));
+		const displayTitle = (0, vue.computed)(() => props.title.trim());
+		const titleEl = (0, vue.ref)(null);
+		const titleId = (0, vue.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 mergePreviewOptions = (extraHeadHTML) => {
-			const runtimePreviewOptions = createRuntimePreviewOptions(props.options.cdnURL);
+			const runtimePreviewOptions = createRuntimePreviewOptions(props.options.cdnURL, { previewScroller: props.previewScroller });
 			return {
 				...runtimePreviewOptions,
 				...props.previewOptions,
@@ -2076,8 +2294,8 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					extraHeadHTML
 				].filter(Boolean).join("\n"),
 				customCode: {
-					importCode: joinCode(runtimePreviewOptions.customCode?.importCode, props.previewOptions?.customCode?.importCode),
-					useCode: joinCode(runtimePreviewOptions.customCode?.useCode, props.previewOptions?.customCode?.useCode)
+					importCode: joinCode(DOCS_LINK_IMPORT_CODE, props.previewOptions?.customCode?.importCode, props.previewScroller ? PREVIEW_SCROLL_RESET_CODE : void 0, props.previewScroller ? PREVIEW_SCROLLER_IMPORT_CODE : void 0),
+					useCode: joinCode(runtimePreviewOptions.customCode?.useCode, props.previewOptions?.customCode?.useCode, props.previewScroller ? PREVIEW_SCROLLER_USE_CODE : void 0)
 				}
 			};
 		};
@@ -2111,36 +2329,44 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		};
 		const runtimeRoot = (0, vue.ref)(null);
 		const previewExpanded = (0, vue.ref)(false);
-		/** `expand: true` 时在展开瞬间冻结，避免滚动重算高度造成抖动。 */
+		/** `expandable: 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 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 normalizedPreviewInset = (0, vue.computed)(() => {
+			const value = props.previewInset;
+			if (typeof value === "number") return Number.isFinite(value) && value >= 0 ? [value, value] : [10, 10];
+			if (Array.isArray(value) && value.length === 2 && value.every((item) => typeof item === "number" && Number.isFinite(item) && item >= 0)) return [value[0], value[1]];
+			return [10, 10];
+		});
 		const measureExpandedPreviewHeight = () => {
 			if (typeof window === "undefined") return runtimeHeight.value;
 			const chromeHeight = measurePreviewChromeHeight();
+			const viewport = getVisibleViewportRect(runtimeRoot.value);
+			const [vertical] = normalizedPreviewInset.value;
 			return resolveExpandedPreviewHeight(true, resolveRemainingPreviewHeight({
-				viewportHeight: getVisibleViewportRect(runtimeRoot.value).height,
+				viewportHeight: viewport.height,
 				chromeHeight
-			}));
+			}) - vertical * 2 - 2);
 		};
 		const syncFrozenExpandedHeight = () => {
-			if (!previewExpanded.value || props.expand !== true) return;
+			if (!previewExpanded.value || props.expandable !== 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 canExpandPreview = (0, vue.computed)(() => !props.styleless && isPlaygroundExpandable(props.expandable));
 		const expandLabel = (0, vue.computed)(() => t(previewExpanded.value ? "playground.runtime.collapsePreview" : "playground.runtime.expandPreview"));
 		const desiredViewportHeight = (0, vue.computed)(() => {
-			if (previewExpanded.value && props.expand === true) return frozenExpandedHeight.value;
-			if (previewExpanded.value && isPlaygroundExpandEnabled(props.expand)) return resolveExpandedPreviewHeight(props.expand, 0);
+			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;
@@ -2151,7 +2377,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const handleTogglePreviewExpand = () => {
 			if (!canExpandPreview.value) return;
 			if (!previewExpanded.value) {
-				if (props.expand === true) frozenExpandedHeight.value = measureExpandedPreviewHeight();
+				if (props.expandable === true) frozenExpandedHeight.value = measureExpandedPreviewHeight();
 				else frozenExpandedHeight.value = 0;
 				previewExpanded.value = true;
 				(0, vue.nextTick)(scrollExpandedPreviewIntoView);
@@ -2166,16 +2392,10 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				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];
-			if (Array.isArray(value) && value.length === 2 && value.every((item) => typeof item === "number" && Number.isFinite(item) && item >= 0)) return [value[0], value[1]];
-			return [10, 10];
-		});
 		const previewStyle = (0, vue.computed)(() => {
 			const [vertical, horizontal] = normalizedPreviewInset.value;
 			return {
-				height: `${desiredViewportHeight.value + vertical * 2}px`,
+				height: `${resolvePreviewBoxHeight(desiredViewportHeight.value, vertical)}px`,
 				padding: vertical === horizontal ? `${vertical}px` : `${vertical}px ${horizontal}px`,
 				background: PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
 			};
@@ -2240,6 +2460,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			Alone.popup({
 				store,
 				copyValue: copyValue.value,
+				title: props.title,
 				viewport: props.viewport,
 				viewportOptions: props.viewportOptions,
 				previewOptions: popupPreviewOptions.value,
@@ -2249,7 +2470,6 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				onNavigate: (to) => emit("navigate", to)
 			});
 		};
-		const handleView = (view) => emit("view-change", view);
 		const handleViewportChange = (viewport) => {
 			emit("viewport-change", viewport);
 		};
@@ -2274,6 +2494,11 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			window.removeEventListener("resize", syncFrozenExpandedHeight);
 			handleClosePopup();
 		});
+		__expose({
+			refresh: handleInlineRefresh,
+			edit: handleEditor,
+			openPopup: handleOpenPopup
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [__props.styleless ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
@@ -2281,7 +2506,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				ref: runtimeRoot,
 				class: "docs-playground-runtime--styleless",
 				style: (0, vue.normalizeStyle)(stylelessStyle.value)
-			}, [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", {
+			}, [errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_2$1, (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), {
@@ -2296,7 +2521,18 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				ref: runtimeRoot,
 				class: "docs-playground-runtime"
 			}, [
-				(0, vue.createElementVNode)("div", _hoisted_3, [(0, vue.createVNode)(toolbar_default, {
+				!__props.hideChrome ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$1, [displayTitle.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 0,
+					ref_key: "titleEl",
+					ref: titleEl,
+					class: "docs-playground__title",
+					id: titleId.value,
+					tabindex: "-1",
+					title: displayTitle.value
+				}, [(0, vue.createElementVNode)("a", {
+					class: "docs-playground__title-anchor",
+					href: `#${titleId.value}`
+				}, "#", 8, _hoisted_5$1), (0, vue.createElementVNode)("span", _hoisted_6, (0, vue.toDisplayString)(displayTitle.value), 1)], 8, _hoisted_4$1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)(toolbar_default, {
 					"copy-value": copyValue.value,
 					viewport: __props.viewport,
 					"viewport-options": __props.viewportOptions,
@@ -2309,22 +2545,12 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"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",
-						class: (0, vue.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)
-					}, [(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_6, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
+				])])) : (0, vue.createCommentVNode)("v-if", true),
+				errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_7, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
 				(0, vue.createElementVNode)("section", {
 					class: (0, vue.normalizeClass)(["docs-playground__preview", { "is-expanded": previewExpanded.value }]),
 					style: (0, vue.normalizeStyle)(previewStyle.value)
-				}, [(0, vue.createElementVNode)("div", _hoisted_7, [(0, vue.createElementVNode)("div", {
+				}, [(0, vue.createElementVNode)("div", _hoisted_8, [(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), {
@@ -2344,7 +2570,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					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)
+				}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "expand" })], 10, _hoisted_9)) : (0, vue.createCommentVNode)("v-if", true)], 6)
 			], 512))]);
 		};
 	}
@@ -2355,6 +2581,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__ */ (0, vue.defineComponent)({
@@ -2372,7 +2605,13 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		options: { default: () => ({}) },
 		previewInset: { default: 0 },
-		expand: { type: [Boolean, Number] },
+		expandable: { type: [Boolean, Number] },
+		title: { default: "" },
+		id: { default: "" },
+		previewScroller: {
+			type: Boolean,
+			default: false
+		},
 		previewOptions: {},
 		locale: {}
 	},
@@ -2396,6 +2635,8 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const sourceFiles = (0, vue.ref)(initialFiles);
 		const currentEntry = (0, vue.ref)(initialEntry);
 		const fileActiveFilename = (0, vue.ref)(initialEntry);
+		const runtimeRef = (0, vue.ref)(null);
+		const titleEl = (0, vue.ref)(null);
 		const normalizeViews = (views) => {
 			const normalized = [];
 			for (const view of views) {
@@ -2406,12 +2647,25 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return normalized.length ? normalized : ["runtime"];
 		};
 		const normalizedViews = (0, vue.computed)(() => normalizeViews(props.views));
+		const hasRuntimeView = (0, vue.computed)(() => normalizedViews.value.includes("runtime"));
+		const hasFilesView = (0, vue.computed)(() => normalizedViews.value.includes("files"));
 		const activeView = (0, vue.ref)(normalizedViews.value[0]);
 		const runtimeActivated = (0, vue.ref)(props.styleless || activeView.value === "runtime");
 		const normalizedViewportOptions = (0, vue.computed)(() => normalizeViewportOptions(props.viewportOptions));
 		const activeViewport = (0, vue.ref)(resolveInitialViewport(props.viewport, normalizedViewportOptions.value));
 		const selectableViewportOptions = (0, vue.computed)(() => includeActiveViewport(normalizedViewportOptions.value, activeViewport.value));
 		const error = (0, vue.ref)(props.entry && initialFiles[props.entry] === void 0 ? t("playground.validation.entryMissing", { filename: props.entry }) : "");
+		const displayTitle = (0, vue.computed)(() => props.title.trim());
+		const titleId = (0, vue.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 = (0, vue.computed)(() => sourceFiles.value[currentEntry.value] || "");
+		/** runtime / 双视图始终有顶栏；files-only 仅有标题时渲染。 */
+		const showHeader = (0, vue.computed)(() => hasRuntimeView.value || !!displayTitle.value);
+		const showToolbar = (0, vue.computed)(() => hasRuntimeView.value);
+		const showRuntimeActions = (0, vue.computed)(() => activeView.value === "runtime");
 		(0, vue.watch)(locale, () => {
 			if (props.entry && sourceFiles.value[props.entry] === void 0) error.value = t("playground.validation.entryMissing", { filename: props.entry });
 		});
@@ -2425,6 +2679,15 @@ var playground_default = /* @__PURE__ */ (0, vue.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;
 		};
@@ -2506,8 +2769,11 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				options: __props.options,
 				"preview-options": __props.previewOptions,
 				"preview-inset": __props.previewInset,
-				expand: __props.expand,
+				"preview-scroller": __props.previewScroller,
+				expandable: __props.expandable,
 				styleless: true,
+				title: __props.title,
+				id: __props.id,
 				viewport: activeViewport.value,
 				"viewport-options": selectableViewportOptions.value,
 				onFilesChange: handleFilesChange,
@@ -2519,29 +2785,70 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"options",
 				"preview-options",
 				"preview-inset",
-				"expand",
+				"preview-scroller",
+				"expandable",
+				"title",
+				"id",
 				"viewport",
 				"viewport-options"
 			])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				class: (0, vue.normalizeClass)(["docs-playground", { "docs-playground--files": activeView.value === "files" }])
-			}, [
-				error.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, (0, vue.toDisplayString)(error.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
-				runtimeActivated.value && normalizedViews.value.includes("runtime") ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(runtime_default), {
+			}, [error.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, (0, vue.toDisplayString)(error.value), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
+				showHeader.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, [displayTitle.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 0,
+					ref_key: "titleEl",
+					ref: titleEl,
+					class: "docs-playground__title",
+					id: titleId.value,
+					tabindex: "-1",
+					title: displayTitle.value
+				}, [(0, vue.createElementVNode)("a", {
+					class: "docs-playground__title-anchor",
+					href: `#${titleId.value}`
+				}, "#", 8, _hoisted_4), (0, vue.createElementVNode)("span", _hoisted_5, (0, vue.toDisplayString)(displayTitle.value), 1)], 8, _hoisted_3)) : (0, vue.createCommentVNode)("v-if", true), showToolbar.value ? ((0, vue.openBlock)(), (0, vue.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"
+				])) : (0, vue.createCommentVNode)("v-if", true)])) : (0, vue.createCommentVNode)("v-if", true),
+				runtimeActivated.value && hasRuntimeView.value ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.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,
-					expand: __props.expand,
+					"preview-scroller": __props.previewScroller,
+					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",
@@ -2549,29 +2856,31 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"options",
 					"preview-options",
 					"preview-inset",
-					"expand",
+					"preview-scroller",
+					"expandable",
+					"title",
+					"id",
 					"active-view",
 					"views",
 					"viewport",
 					"viewport-options"
-				])), [[vue.vShow, !error.value && activeView.value === "runtime"]]) : (0, vue.createCommentVNode)("v-if", true),
-				normalizedViews.value.includes("files") ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(files_preview_default), {
+				])), [[vue.vShow, activeView.value === "runtime"]]) : (0, vue.createCommentVNode)("v-if", true),
+				hasFilesView.value ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.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"
-				])), [[vue.vShow, !error.value && activeView.value === "files"]]) : (0, vue.createCommentVNode)("v-if", true)
-			], 2));
+				])), [[vue.vShow, activeView.value === "files"]]) : (0, vue.createCommentVNode)("v-if", true)
+			], 64))], 2));
 		};
 	}
 });
@@ -2579,6 +2888,9 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 exports.CodePreview = code_preview_default;
 exports.DEFAULT_CDN_URL = DEFAULT_CDN_URL;
 exports.Editor = Editor;
+exports.PREVIEW_SCROLLER_USE_CODE = PREVIEW_SCROLLER_USE_CODE;
+exports.PREVIEW_SCROLL_CONTENT_CLASS = PREVIEW_SCROLL_CONTENT_CLASS;
+exports.PREVIEW_SCROLL_HTML_CLASS = PREVIEW_SCROLL_HTML_CLASS;
 exports.Playground = playground_default;
 exports.applyPlaygroundImportMapOverride = applyPlaygroundImportMapOverride;
 exports.applyPlaygroundStyleOverride = applyPlaygroundStyleOverride;
@@ -2598,8 +2910,10 @@ exports.registerVueHighlight = registerVueHighlight;
 exports.removePlaygroundImportMapOverride = removePlaygroundImportMapOverride;
 exports.removePlaygroundStyleOverride = removePlaygroundStyleOverride;
 exports.resolveHighlightLanguage = resolveHighlightLanguage;
+exports.resolvePlaygroundTitleId = resolvePlaygroundTitleId;
 exports.setPlaygroundImportMapOverrides = setPlaygroundImportMapOverrides;
 exports.setPlaygroundSiteModules = setPlaygroundSiteModules;
 exports.setPlaygroundSiteStyles = setPlaygroundSiteStyles;
 exports.setPlaygroundStyleOverrides = setPlaygroundStyleOverrides;
+exports.slugifyPlaygroundTitle = slugifyPlaygroundTitle;
 exports.vueHighlight = vueHighlight;