@deot/docs-playground 1.0.10 → 1.1.0

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,7 +171,7 @@ var icon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round",
 				"aria-hidden": "true"
-			}, [(0, vue.createElementVNode)("path", { d: icon.value.path }, null, 8, _hoisted_2$6)], 12, _hoisted_1$7);
+			}, [(0, vue.createElementVNode)("path", { d: icon.value.path }, null, 8, _hoisted_2$7)], 12, _hoisted_1$7);
 		};
 	}
 });
@@ -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,
@@ -253,53 +253,23 @@ var code_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"aria-label"
 				]),
 				(0, vue.createCommentVNode)(" eslint-disable-next-line vue/no-v-html "),
-				(0, vue.createElementVNode)("pre", _hoisted_3$5, [(0, vue.createElementVNode)("code", {
+				(0, vue.createElementVNode)("pre", _hoisted_3$6, [(0, vue.createElementVNode)("code", {
 					class: "hljs",
 					innerHTML: highlightedCode.value
-				}, null, 8, _hoisted_4$5)])
+				}, 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$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 +281,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 +309,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 +444,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 +710,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 +739,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 +752,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 +765,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,6 +808,50 @@ 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}`;
+};
 var resolveSandboxContainer = (sandbox) => sandbox?.container ? (0, vue.unref)(sandbox.container) : null;
 var useSandboxAutoHeight = (sandboxRef) => {
 	const height = (0, vue.ref)(24);
@@ -972,14 +974,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 +1129,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 +1147,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 +1160,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 +1279,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 +1343,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 +1364,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 +1487,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)
 			]);
 		};
 	}
@@ -1835,14 +1908,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 +1925,7 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		store: {},
 		copyValue: {},
+		title: { default: "" },
 		viewport: { default: "auto" },
 		viewportOptions: { default: () => ["auto", 375] },
 		previewOptions: {},
@@ -1950,8 +2026,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 +2045,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 +2086,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"
@@ -2049,7 +2125,13 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			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,10 +2141,16 @@ 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) => {
@@ -2111,12 +2199,12 @@ 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);
 		};
@@ -2129,18 +2217,18 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}));
 		};
 		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 +2239,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);
@@ -2240,6 +2328,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 +2338,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 +2362,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 +2374,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 +2389,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 +2413,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 +2438,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 +2449,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 +2473,9 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		},
 		options: { default: () => ({}) },
 		previewInset: { default: 0 },
-		expand: { type: [Boolean, Number] },
+		expandable: { type: [Boolean, Number] },
+		title: { default: "" },
+		id: { default: "" },
 		previewOptions: {},
 		locale: {}
 	},
@@ -2396,6 +2499,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 +2511,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 +2543,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 +2633,10 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				options: __props.options,
 				"preview-options": __props.previewOptions,
 				"preview-inset": __props.previewInset,
-				expand: __props.expand,
+				expandable: __props.expandable,
 				styleless: true,
+				title: __props.title,
+				id: __props.id,
 				viewport: activeViewport.value,
 				"viewport-options": selectableViewportOptions.value,
 				onFilesChange: handleFilesChange,
@@ -2519,29 +2648,68 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"options",
 				"preview-options",
 				"preview-inset",
-				"expand",
+				"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,
+					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 +2717,30 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"options",
 					"preview-options",
 					"preview-inset",
-					"expand",
+					"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));
 		};
 	}
 });
@@ -2598,8 +2767,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;