@deot/docs-playground 1.0.10 → 1.1.0

package/dist/index.js

@@ -116,7 +116,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__ */ defineComponent({
@@ -147,7 +147,7 @@ var icon_default = /* @__PURE__ */ defineComponent({
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round",
 				"aria-hidden": "true"
-			}, [createElementVNode("path", { d: icon.value.path }, null, 8, _hoisted_2$6)], 12, _hoisted_1$7);
+			}, [createElementVNode("path", { d: icon.value.path }, null, 8, _hoisted_2$7)], 12, _hoisted_1$7);
 		};
 	}
 });
@@ -174,9 +174,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__ */ defineComponent({
@@ -212,7 +212,7 @@ var code_preview_default = /* @__PURE__ */ defineComponent({
 					key: 0,
 					class: "docs-code-preview__language",
 					title: languageLabel.value
-				}, toDisplayString(languageLabel.value), 9, _hoisted_2$5)) : createCommentVNode("v-if", true),
+				}, toDisplayString(languageLabel.value), 9, _hoisted_2$6)) : createCommentVNode("v-if", true),
 				createVNode(unref(Clipboard), {
 					class: "docs-code-preview__copy",
 					value: __props.code,
@@ -229,53 +229,23 @@ var code_preview_default = /* @__PURE__ */ defineComponent({
 					"aria-label"
 				]),
 				createCommentVNode(" eslint-disable-next-line vue/no-v-html "),
-				createElementVNode("pre", _hoisted_3$5, [createElementVNode("code", {
+				createElementVNode("pre", _hoisted_3$6, [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__ */ defineComponent({
@@ -287,28 +257,26 @@ var files_preview_default = /* @__PURE__ */ defineComponent({
 		activeView: {},
 		activeFilename: {}
 	},
-	emits: ["active-change", "view-change"],
+	emits: ["active-change"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const { t } = useLocale();
-		const getViewText = (view) => t(playgroundViewMessage(view));
 		const emit = __emit;
 		const filenames = computed(() => Object.keys(props.files));
 		const activeCode = computed(() => props.files[props.activeFilename] || "");
 		const handleActive = (filename) => {
 			if (filename !== props.activeFilename) emit("active-change", filename);
 		};
-		const handleView = (view) => emit("view-change", view);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$5, [createElementVNode("div", _hoisted_2$4, [createVNode(unref(Scroller), {
+			return openBlock(), createElementBlock("div", _hoisted_1$5, [createElementVNode("div", _hoisted_2$5, [createVNode(unref(Scroller), {
 				class: "docs-playground-files__scroller",
 				"auto-resize": true,
 				native: false,
 				"show-bar": true,
-				height: "44",
+				height: "40",
 				"content-class": "docs-playground-files__tabs",
-				"content-style": "height: 44px; overflow: hidden;",
-				"wrapper-style": "height: 44px; overflow-x: auto; overflow-y: hidden;"
+				"content-style": "height: 40px; overflow: hidden;",
+				"wrapper-style": "height: 40px; overflow-x: auto; overflow-y: hidden;"
 			}, {
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filenames.value, (filename) => {
 					return openBlock(), createElementBlock("button", {
@@ -317,20 +285,10 @@ var files_preview_default = /* @__PURE__ */ defineComponent({
 						class: normalizeClass(["docs-playground-files__tab", { "is-active": filename === __props.activeFilename }]),
 						"data-filename": filename,
 						onClick: ($event) => handleActive(filename)
-					}, [createElementVNode("span", null, toDisplayString(filename), 1), filename === __props.entry ? (openBlock(), createElementBlock("small", _hoisted_4$4, toDisplayString(unref(t)("playground.files.entry")), 1)) : createCommentVNode("v-if", true)], 10, _hoisted_3$4);
+					}, [createElementVNode("span", null, toDisplayString(filename), 1), filename === __props.entry ? (openBlock(), createElementBlock("small", _hoisted_4$5, toDisplayString(unref(t)("playground.files.entry")), 1)) : createCommentVNode("v-if", true)], 10, _hoisted_3$5);
 				}), 128))]),
 				_: 1
-			}), createElementVNode("div", _hoisted_5$4, [__props.views.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_6$3, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.views, (item) => {
-				return openBlock(), createElementBlock("button", {
-					key: item,
-					type: "button",
-					class: normalizeClass(["docs-playground__view", { "is-active": item === __props.activeView }]),
-					title: getViewText(item),
-					"aria-label": getViewText(item),
-					"aria-pressed": item === __props.activeView,
-					onClick: ($event) => handleView(item)
-				}, [createVNode(unref(icon_default), { name: item }, null, 8, ["name"])], 10, _hoisted_7$2);
-			}), 128))])) : createCommentVNode("v-if", true)])]), createVNode(unref(code_preview_default), {
+			})]), createVNode(unref(code_preview_default), {
 				class: "docs-playground-files__body",
 				code: activeCode.value,
 				filename: __props.activeFilename,
@@ -462,21 +420,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"
 };
@@ -728,8 +686,8 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 						title: unref(t)("playground.common.close"),
 						style: { "cursor": "pointer" },
 						onClick: handleHide
-					}, "✕", 8, _hoisted_2$3)], 512),
-					createElementVNode("div", _hoisted_3$3, [createVNode(unref(Scroller), {
+					}, "✕", 8, _hoisted_2$4)], 512),
+					createElementVNode("div", _hoisted_3$4, [createVNode(unref(Scroller), {
 						ref_key: "scroller",
 						ref: scroller,
 						class: "docs-playground-editor__scroller",
@@ -757,11 +715,11 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 								onDblclick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
 								onBlur: handleRenameSubmit,
 								onKeydown: [withKeys(withModifiers(handleRenameSubmit, ["prevent"]), ["enter"]), withKeys(withModifiers(handleRenameCancel, ["prevent"]), ["esc"])]
-							}, null, 40, _hoisted_5$3)), [[vModelText, filenameDraft.value]]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+							}, null, 40, _hoisted_5$4)), [[vModelText, filenameDraft.value]]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
 								filename === currentEntry.value ? (openBlock(), createElementBlock("span", {
 									key: 0,
 									title: unref(t)("playground.editor.entry")
-								}, "●", 8, _hoisted_6$2)) : createCommentVNode("v-if", true),
+								}, "●", 8, _hoisted_6$3)) : createCommentVNode("v-if", true),
 								createElementVNode("span", null, toDisplayString(filename), 1),
 								filename === currentEntry.value ? (openBlock(), createElementBlock("button", {
 									key: 1,
@@ -770,7 +728,7 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 									title: unref(t)("playground.editor.entryCannotDelete"),
 									"aria-label": unref(t)("playground.editor.entryCannotDelete"),
 									disabled: ""
-								}, null, 8, _hoisted_7$1)) : (openBlock(), createBlock(unref(Popconfirm), {
+								}, null, 8, _hoisted_7$3)) : (openBlock(), createBlock(unref(Popconfirm), {
 									key: 2,
 									class: "docs-playground-editor__delete",
 									title: unref(t)("playground.editor.confirmDelete", { filename }),
@@ -783,23 +741,23 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 										class: "docs-playground-editor__close",
 										title: unref(t)("playground.editor.deleteFile"),
 										"aria-label": unref(t)("playground.editor.confirmDelete", { filename })
-									}, null, 8, _hoisted_8$1)]),
+									}, null, 8, _hoisted_8$2)]),
 									_: 2
 								}, 1032, ["title", "onOk"]))
-							], 64))], 42, _hoisted_4$3);
+							], 64))], 42, _hoisted_4$4);
 						}), 128))]),
 						_: 1
-					}, 512), createElementVNode("div", _hoisted_9, [createElementVNode("button", {
+					}, 512), createElementVNode("div", _hoisted_9$2, [createElementVNode("button", {
 						type: "button",
 						title: unref(t)("playground.editor.createFile"),
 						onClick: handleCreate
-					}, "＋", 8, _hoisted_10), createElementVNode("button", {
+					}, "＋", 8, _hoisted_10$1), createElementVNode("button", {
 						type: "button",
 						title: unref(t)("playground.editor.setEntry"),
 						disabled: activeFilename.value === currentEntry.value,
 						onClick: handleEntry
-					}, toDisplayString(unref(t)("playground.editor.setEntry")), 9, _hoisted_11)])]),
-					codeErrorText.value ? (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(codeErrorText.value), 1)) : createCommentVNode("v-if", true),
+					}, toDisplayString(unref(t)("playground.editor.setEntry")), 9, _hoisted_11$1)])]),
+					codeErrorText.value ? (openBlock(), createElementBlock("div", _hoisted_12$1, toDisplayString(codeErrorText.value), 1)) : createCommentVNode("v-if", true),
 					createVNode(unref(Scroller), {
 						ref_key: "editorScroller",
 						ref: editorScroller,
@@ -823,6 +781,50 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 		};
 	}
 }), { aliveRegExp: { className: /(PORTAL_TAG_DISABLE)/ } });
+//#endregion
+//#region packages/playground/src/utils.ts
+/**
+* 比较两组 playground 文件是否完全一致。
+* @param left 左侧文件表。
+* @param right 右侧文件表。
+* @returns 键集合与各文件内容是否都相同。
+*/
+var filesEqual = (left, right) => {
+	const leftKeys = Object.keys(left);
+	const rightKeys = Object.keys(right);
+	return leftKeys.length === rightKeys.length && leftKeys.every((key) => left[key] === right[key]);
+};
+/**
+* 视图切换条使用的文案键。
+* @param view 当前预览视图。
+* @returns locale 消息键。
+*/
+var playgroundViewMessage = (view) => view === "runtime" ? "playground.runtime.preview" : "playground.runtime.files";
+/**
+* 与 markdown-it-anchor 默认 `slugify` 对齐，用于标题锚点 id。
+* @param title 标题文本。
+* @returns 可用作元素 id / hash 的字符串；空标题返回空串。
+*/
+var slugifyPlaygroundTitle = (title) => {
+	const normalized = String(title).trim().toLowerCase().replace(/\s+/g, "-");
+	return normalized ? encodeURIComponent(normalized) : "";
+};
+/**
+* 解析标题锚点 id：显式 id 优先，否则从标题 slugify；必要时避开已占用 id。
+* @param title 标题文本。
+* @param explicitId 可选显式 id。
+* @param isOccupied 返回该 id 是否已被其他元素占用。
+* @returns 锚点 id；无标题时为空串。
+*/
+var resolvePlaygroundTitleId = (title, explicitId = "", isOccupied) => {
+	if (!String(title).trim()) return "";
+	const base = String(explicitId).trim() || slugifyPlaygroundTitle(title);
+	if (!base) return "";
+	if (!isOccupied || !isOccupied(base)) return base;
+	let index = 1;
+	while (isOccupied(`${base}-${index}`)) index += 1;
+	return `${base}-${index}`;
+};
 var resolveSandboxContainer = (sandbox) => sandbox?.container ? unref(sandbox.container) : null;
 var useSandboxAutoHeight = (sandboxRef) => {
 	const height = ref(24);
@@ -945,14 +947,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();
@@ -1100,6 +1102,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,
@@ -1111,9 +1120,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 {
@@ -1124,11 +1133,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) => {
@@ -1243,23 +1252,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__ */ 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
@@ -1274,14 +1316,20 @@ var toolbar_default = /* @__PURE__ */ defineComponent({
 		"edit",
 		"open-popup",
 		"close-popup",
-		"viewport-change"
+		"viewport-change",
+		"view-change"
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const { t } = useLocale();
+		const VIEW_ORDER = ["runtime", "files"];
 		const viewportMenuVisible = ref(false);
+		const orderedViews = computed(() => VIEW_ORDER.filter((view) => props.views.includes(view)));
+		const showViews = computed(() => orderedViews.value.length > 1);
 		const viewportLabel = computed(() => formatViewportLabel(props.viewport, t("playground.runtime.auto")));
+		const getViewAriaLabel = (view) => t(playgroundViewMessage(view));
+		const getViewLabel = (view) => view === "runtime" ? t("playground.runtime.previewLabel") : t("playground.runtime.codeLabel");
 		const handleViewport = (index) => {
 			const viewport = props.viewportOptions[index];
 			if (viewport && !viewportEquals(viewport, props.viewport)) emit("viewport-change", viewport);
@@ -1289,95 +1337,120 @@ var toolbar_default = /* @__PURE__ */ defineComponent({
 		watch(() => props.viewportOptions.length, (length) => {
 			if (length <= 1) viewportMenuVisible.value = false;
 		});
+		watch(() => props.showRuntimeActions, (enabled) => {
+			if (!enabled) viewportMenuVisible.value = false;
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$3, [
-				createElementVNode("button", {
-					type: "button",
-					class: "docs-playground__tool docs-playground__refresh",
-					"data-action": "refresh",
-					title: unref(t)("playground.runtime.refresh"),
-					"aria-label": unref(t)("playground.runtime.refresh"),
-					onClick: _cache[0] || (_cache[0] = ($event) => emit("refresh"))
-				}, [createVNode(unref(icon_default), { name: "refresh" })], 8, _hoisted_2$2),
-				__props.viewportOptions.length > 1 ? (openBlock(), createBlock(unref(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: withCtx(() => [createVNode(unref(DropdownMenu), {
-						class: "docs-playground__viewport-options",
-						role: "menu",
-						"aria-label": unref(t)("playground.runtime.viewportMenu")
+				__props.showRuntimeActions ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+					__props.viewportOptions.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_2$3, [createVNode(unref(Dropdown), {
+						modelValue: viewportMenuVisible.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => viewportMenuVisible.value = $event),
+						class: "docs-playground__viewport-menu",
+						portal: true,
+						trigger: "click",
+						placement: "bottom-right"
 					}, {
-						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.viewportOptions, (item, index) => {
-							return openBlock(), createBlock(unref(DropdownItem), {
-								key: unref(getViewportKey)(item),
-								class: "docs-playground__viewport-option",
-								value: index,
-								selected: unref(viewportEquals)(item, __props.viewport),
-								role: "menuitemradio",
-								"aria-checked": unref(viewportEquals)(item, __props.viewport),
-								onClick: ($event) => handleViewport(index)
-							}, {
-								default: withCtx(() => [createTextVNode(toDisplayString(unref(formatViewportLabel)(item, unref(t)("playground.runtime.auto"))), 1)]),
-								_: 2
-							}, 1032, [
-								"value",
-								"selected",
-								"aria-checked",
-								"onClick"
-							]);
-						}), 128))]),
+						content: withCtx(() => [createVNode(unref(DropdownMenu), {
+							class: "docs-playground__viewport-options",
+							role: "menu",
+							"aria-label": unref(t)("playground.runtime.viewportMenu")
+						}, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.viewportOptions, (item, index) => {
+								return openBlock(), createBlock(unref(DropdownItem), {
+									key: unref(getViewportKey)(item),
+									class: "docs-playground__viewport-option",
+									value: index,
+									selected: unref(viewportEquals)(item, __props.viewport),
+									role: "menuitemradio",
+									"aria-checked": unref(viewportEquals)(item, __props.viewport),
+									onClick: ($event) => handleViewport(index)
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(unref(formatViewportLabel)(item, unref(t)("playground.runtime.auto"))), 1)]),
+									_: 2
+								}, 1032, [
+									"value",
+									"selected",
+									"aria-checked",
+									"onClick"
+								]);
+							}), 128))]),
+							_: 1
+						}, 8, ["aria-label"])]),
+						default: withCtx(() => [createElementVNode("button", {
+							type: "button",
+							class: normalizeClass(["docs-playground__tool docs-playground__viewport-trigger", { "is-active": __props.viewport !== "auto" }]),
+							title: unref(t)("playground.runtime.viewport", { value: viewportLabel.value }),
+							"aria-label": unref(t)("playground.runtime.viewport", { value: viewportLabel.value }),
+							"aria-expanded": viewportMenuVisible.value,
+							"aria-haspopup": "menu"
+						}, [createVNode(unref(icon_default), { name: "viewport" })], 10, _hoisted_3$3)]),
 						_: 1
-					}, 8, ["aria-label"])]),
-					default: withCtx(() => [createElementVNode("button", {
+					}, 8, ["modelValue"])])) : createCommentVNode("v-if", true),
+					__props.viewportOptions.length > 1 ? (openBlock(), createElementBlock("span", _hoisted_4$3)) : createCommentVNode("v-if", true),
+					createElementVNode("button", {
 						type: "button",
-						class: normalizeClass(["docs-playground__tool docs-playground__viewport-trigger", { "is-active": __props.viewport !== "auto" }]),
-						title: unref(t)("playground.runtime.viewport", { value: viewportLabel.value }),
-						"aria-label": unref(t)("playground.runtime.viewport", { value: viewportLabel.value }),
-						"aria-expanded": viewportMenuVisible.value,
-						"aria-haspopup": "menu"
-					}, [createVNode(unref(icon_default), { name: "viewport" })], 10, _hoisted_3$2)]),
-					_: 1
-				}, 8, ["modelValue"])) : createCommentVNode("v-if", true),
-				createVNode(unref(Clipboard), {
-					class: "docs-playground__tool",
-					value: __props.copyValue,
-					tag: "button",
-					type: "button",
-					title: unref(t)("playground.common.copy"),
-					"aria-label": unref(t)("playground.common.copy")
-				}, {
-					default: withCtx(() => [createVNode(unref(icon_default), { name: "copy" })]),
-					_: 1
-				}, 8, [
-					"value",
-					"title",
-					"aria-label"
-				]),
-				createElementVNode("button", {
-					type: "button",
-					class: "docs-playground__tool docs-playground__editor",
-					"data-action": "edit",
-					title: unref(t)("playground.runtime.editFiles"),
-					"aria-label": unref(t)("playground.runtime.editFiles"),
-					onClick: _cache[2] || (_cache[2] = ($event) => emit("edit"))
-				}, [createVNode(unref(icon_default), { name: "editor" })], 8, _hoisted_4$2),
-				__props.showOpenPopup ? (openBlock(), createElementBlock("button", {
+						class: "docs-playground__tool docs-playground__refresh",
+						"data-action": "refresh",
+						title: unref(t)("playground.runtime.refresh"),
+						"aria-label": unref(t)("playground.runtime.refresh"),
+						onClick: _cache[1] || (_cache[1] = ($event) => emit("refresh"))
+					}, [createVNode(unref(icon_default), { name: "refresh" })], 8, _hoisted_5$3),
+					createElementVNode("button", {
+						type: "button",
+						class: "docs-playground__tool docs-playground__editor",
+						"data-action": "edit",
+						title: unref(t)("playground.runtime.editFiles"),
+						"aria-label": unref(t)("playground.runtime.editFiles"),
+						onClick: _cache[2] || (_cache[2] = ($event) => emit("edit"))
+					}, [createVNode(unref(icon_default), { name: "editor" })], 8, _hoisted_6$2),
+					__props.showOpenPopup ? (openBlock(), createElementBlock("button", {
+						key: 2,
+						type: "button",
+						class: "docs-playground__tool docs-playground__popup",
+						"data-action": "open-popup",
+						title: unref(t)("playground.runtime.openPopup"),
+						"aria-label": unref(t)("playground.runtime.openPopup"),
+						onClick: _cache[3] || (_cache[3] = ($event) => emit("open-popup"))
+					}, [createVNode(unref(icon_default), { name: "popup" })], 8, _hoisted_7$2)) : createCommentVNode("v-if", true),
+					createVNode(unref(Clipboard), {
+						class: "docs-playground__tool",
+						value: __props.copyValue,
+						tag: "button",
+						type: "button",
+						title: unref(t)("playground.common.copy"),
+						"aria-label": unref(t)("playground.common.copy")
+					}, {
+						default: withCtx(() => [createVNode(unref(icon_default), { name: "copy" })]),
+						_: 1
+					}, 8, [
+						"value",
+						"title",
+						"aria-label"
+					]),
+					showViews.value ? (openBlock(), createElementBlock("span", _hoisted_8$1)) : createCommentVNode("v-if", true)
+				], 64)) : createCommentVNode("v-if", true),
+				showViews.value ? (openBlock(), createElementBlock("div", {
 					key: 1,
-					type: "button",
-					class: "docs-playground__tool docs-playground__popup",
-					"data-action": "open-popup",
-					title: unref(t)("playground.runtime.openPopup"),
-					"aria-label": unref(t)("playground.runtime.openPopup"),
-					onClick: _cache[3] || (_cache[3] = ($event) => emit("open-popup"))
-				}, [createVNode(unref(icon_default), { name: "popup" })], 8, _hoisted_5$2)) : createCommentVNode("v-if", true),
+					class: "docs-playground__views",
+					role: "tablist",
+					"aria-label": unref(t)("playground.runtime.views")
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(orderedViews.value, (item) => {
+					return openBlock(), createElementBlock("button", {
+						key: item,
+						type: "button",
+						class: normalizeClass(["docs-playground__view", { "is-active": item === __props.activeView }]),
+						role: "tab",
+						title: getViewAriaLabel(item),
+						"aria-label": getViewAriaLabel(item),
+						"aria-selected": item === __props.activeView,
+						"aria-pressed": item === __props.activeView,
+						onClick: ($event) => emit("view-change", item)
+					}, toDisplayString(getViewLabel(item)), 11, _hoisted_10);
+				}), 128))], 8, _hoisted_9$1)) : createCommentVNode("v-if", true),
+				__props.showClose && (__props.showRuntimeActions || showViews.value) ? (openBlock(), createElementBlock("span", _hoisted_11)) : createCommentVNode("v-if", true),
 				__props.showClose ? (openBlock(), createElementBlock("button", {
-					key: 2,
+					key: 3,
 					type: "button",
 					class: "docs-playground__tool docs-playground__popup-close",
 					"data-action": "close-popup",
@@ -1387,7 +1460,7 @@ var toolbar_default = /* @__PURE__ */ defineComponent({
 				}, [..._cache[5] || (_cache[5] = [createElementVNode("span", {
 					class: "docs-playground__popup-close-mark",
 					"aria-hidden": "true"
-				}, "✕", -1)])], 8, _hoisted_6$1)) : createCommentVNode("v-if", true)
+				}, "✕", -1)])], 8, _hoisted_12)) : createCommentVNode("v-if", true)
 			]);
 		};
 	}
@@ -1808,14 +1881,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/index.ts
 var Alone = new Portal(/* @__PURE__ */ defineComponent({
@@ -1823,6 +1898,7 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 	props: {
 		store: {},
 		copyValue: {},
+		title: { default: "" },
 		viewport: { default: "auto" },
 		viewportOptions: { default: () => ["auto", 375] },
 		previewOptions: {},
@@ -1923,8 +1999,12 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 			}), createElementVNode("div", {
 				class: "docs-playground-popup__shell",
 				style: normalizeStyle(shellStyle.value)
-			}, [createElementVNode("div", _hoisted_2$1, [
-				createElementVNode("div", _hoisted_3$1, [createVNode(toolbar_default, {
+			}, [createElementVNode("div", _hoisted_2$2, [
+				createElementVNode("div", _hoisted_3$2, [__props.title.trim() ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "docs-playground__title",
+					title: __props.title.trim()
+				}, [createElementVNode("span", _hoisted_5$2, toDisplayString(__props.title.trim()), 1)], 8, _hoisted_4$2)) : createCommentVNode("v-if", true), createVNode(toolbar_default, {
 					"copy-value": __props.copyValue,
 					viewport: currentViewport.value,
 					"viewport-options": __props.viewportOptions,
@@ -1938,8 +2018,8 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 					"viewport",
 					"viewport-options"
 				])]),
-				errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_4$1, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true),
-				createElementVNode("div", _hoisted_5$1, [createVNode(unref(Scroller), {
+				errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_6$1, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true),
+				createElementVNode("div", _hoisted_7$1, [createVNode(unref(Scroller), {
 					class: "docs-playground-popup__scroller",
 					"content-class": "docs-playground-popup__scroller-content",
 					"auto-resize": true,
@@ -1976,29 +2056,25 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 //#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"
@@ -2019,7 +2095,13 @@ var runtime_default = /* @__PURE__ */ 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] }
 	},
@@ -2029,10 +2111,16 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		"viewport-change",
 		"navigate"
 	],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const { locale, t } = useLocale();
-		const getViewText = (view) => t(playgroundViewMessage(view));
+		const displayTitle = computed(() => props.title.trim());
+		const titleEl = ref(null);
+		const titleId = computed(() => resolvePlaygroundTitleId(displayTitle.value, props.id, (candidate) => {
+			if (typeof document === "undefined") return false;
+			const existing = document.getElementById(candidate);
+			return !!existing && existing !== titleEl.value;
+		}));
 		const emit = __emit;
 		const joinCode = (...values) => values.filter(Boolean).join("\n");
 		const mergePreviewOptions = (extraHeadHTML) => {
@@ -2081,12 +2169,12 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		};
 		const runtimeRoot = ref(null);
 		const previewExpanded = ref(false);
-		/** `expand: true` 时在展开瞬间冻结，避免滚动重算高度造成抖动。 */
+		/** `expandable: true` 时在展开瞬间冻结，避免滚动重算高度造成抖动。 */
 		const frozenExpandedHeight = 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);
 		};
@@ -2099,18 +2187,18 @@ var runtime_default = /* @__PURE__ */ 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 = computed(() => !props.styleless && isPlaygroundExpandEnabled(props.expand));
+		const canExpandPreview = computed(() => !props.styleless && isPlaygroundExpandable(props.expandable));
 		const expandLabel = computed(() => t(previewExpanded.value ? "playground.runtime.collapsePreview" : "playground.runtime.expandPreview"));
 		const desiredViewportHeight = computed(() => {
-			if (previewExpanded.value && props.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;
@@ -2121,7 +2209,7 @@ var runtime_default = /* @__PURE__ */ 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;
 				nextTick(scrollExpandedPreviewIntoView);
@@ -2210,6 +2298,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 			Alone.popup({
 				store,
 				copyValue: copyValue.value,
+				title: props.title,
 				viewport: props.viewport,
 				viewportOptions: props.viewportOptions,
 				previewOptions: popupPreviewOptions.value,
@@ -2219,7 +2308,6 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				onNavigate: (to) => emit("navigate", to)
 			});
 		};
-		const handleView = (view) => emit("view-change", view);
 		const handleViewportChange = (viewport) => {
 			emit("viewport-change", viewport);
 		};
@@ -2244,6 +2332,11 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 			window.removeEventListener("resize", syncFrozenExpandedHeight);
 			handleClosePopup();
 		});
+		__expose({
+			refresh: handleInlineRefresh,
+			edit: handleEditor,
+			openPopup: handleOpenPopup
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$1, [__props.styleless ? (openBlock(), createElementBlock("div", {
 				key: 0,
@@ -2251,7 +2344,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				ref: runtimeRoot,
 				class: "docs-playground-runtime--styleless",
 				style: normalizeStyle(stylelessStyle.value)
-			}, [errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_2, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true), createElementVNode("div", {
+			}, [errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_2$1, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true), createElementVNode("div", {
 				class: "docs-playground-runtime__viewport",
 				style: normalizeStyle(viewportStyle.value)
 			}, [createVNode(unref(Sandbox), {
@@ -2266,7 +2359,18 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				ref: runtimeRoot,
 				class: "docs-playground-runtime"
 			}, [
-				createElementVNode("div", _hoisted_3, [createVNode(toolbar_default, {
+				!__props.hideChrome ? (openBlock(), createElementBlock("div", _hoisted_3$1, [displayTitle.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					ref_key: "titleEl",
+					ref: titleEl,
+					class: "docs-playground__title",
+					id: titleId.value,
+					tabindex: "-1",
+					title: displayTitle.value
+				}, [createElementVNode("a", {
+					class: "docs-playground__title-anchor",
+					href: `#${titleId.value}`
+				}, "#", 8, _hoisted_5$1), createElementVNode("span", _hoisted_6, toDisplayString(displayTitle.value), 1)], 8, _hoisted_4$1)) : createCommentVNode("v-if", true), createVNode(toolbar_default, {
 					"copy-value": copyValue.value,
 					viewport: __props.viewport,
 					"viewport-options": __props.viewportOptions,
@@ -2279,22 +2383,12 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 					"copy-value",
 					"viewport",
 					"viewport-options"
-				]), __props.views.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.views, (item) => {
-					return openBlock(), createElementBlock("button", {
-						key: item,
-						type: "button",
-						class: normalizeClass(["docs-playground__view", { "is-active": item === __props.activeView }]),
-						title: getViewText(item),
-						"aria-label": getViewText(item),
-						"aria-pressed": item === __props.activeView,
-						onClick: ($event) => handleView(item)
-					}, [createVNode(unref(icon_default), { name: item }, null, 8, ["name"])], 10, _hoisted_5);
-				}), 128))])) : createCommentVNode("v-if", true)]),
-				errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_6, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true),
+				])])) : createCommentVNode("v-if", true),
+				errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_7, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true),
 				createElementVNode("section", {
 					class: normalizeClass(["docs-playground__preview", { "is-expanded": previewExpanded.value }]),
 					style: normalizeStyle(previewStyle.value)
-				}, [createElementVNode("div", _hoisted_7, [createElementVNode("div", {
+				}, [createElementVNode("div", _hoisted_8, [createElementVNode("div", {
 					class: "docs-playground-runtime__viewport",
 					style: normalizeStyle(viewportStyle.value)
 				}, [(openBlock(), createBlock(unref(Sandbox), {
@@ -2314,7 +2408,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 					title: expandLabel.value,
 					"aria-label": expandLabel.value,
 					onClick: handleTogglePreviewExpand
-				}, [createVNode(unref(icon_default), { name: "expand" })], 10, _hoisted_8)) : createCommentVNode("v-if", true)], 6)
+				}, [createVNode(unref(icon_default), { name: "expand" })], 10, _hoisted_9)) : createCommentVNode("v-if", true)], 6)
 			], 512))]);
 		};
 	}
@@ -2325,6 +2419,13 @@ var _hoisted_1 = {
 	key: 0,
 	class: "docs-playground__error"
 };
+var _hoisted_2 = {
+	key: 0,
+	class: "docs-playground__header"
+};
+var _hoisted_3 = ["id", "title"];
+var _hoisted_4 = ["href"];
+var _hoisted_5 = { class: "docs-playground__title-text" };
 //#endregion
 //#region packages/playground/src/playground.vue
 var playground_default = /* @__PURE__ */ defineComponent({
@@ -2342,7 +2443,9 @@ var playground_default = /* @__PURE__ */ defineComponent({
 		},
 		options: { default: () => ({}) },
 		previewInset: { default: 0 },
-		expand: { type: [Boolean, Number] },
+		expandable: { type: [Boolean, Number] },
+		title: { default: "" },
+		id: { default: "" },
 		previewOptions: {},
 		locale: {}
 	},
@@ -2366,6 +2469,8 @@ var playground_default = /* @__PURE__ */ defineComponent({
 		const sourceFiles = ref(initialFiles);
 		const currentEntry = ref(initialEntry);
 		const fileActiveFilename = ref(initialEntry);
+		const runtimeRef = ref(null);
+		const titleEl = ref(null);
 		const normalizeViews = (views) => {
 			const normalized = [];
 			for (const view of views) {
@@ -2376,12 +2481,25 @@ var playground_default = /* @__PURE__ */ defineComponent({
 			return normalized.length ? normalized : ["runtime"];
 		};
 		const normalizedViews = computed(() => normalizeViews(props.views));
+		const hasRuntimeView = computed(() => normalizedViews.value.includes("runtime"));
+		const hasFilesView = computed(() => normalizedViews.value.includes("files"));
 		const activeView = ref(normalizedViews.value[0]);
 		const runtimeActivated = ref(props.styleless || activeView.value === "runtime");
 		const normalizedViewportOptions = computed(() => normalizeViewportOptions(props.viewportOptions));
 		const activeViewport = ref(resolveInitialViewport(props.viewport, normalizedViewportOptions.value));
 		const selectableViewportOptions = computed(() => includeActiveViewport(normalizedViewportOptions.value, activeViewport.value));
 		const error = ref(props.entry && initialFiles[props.entry] === void 0 ? t("playground.validation.entryMissing", { filename: props.entry }) : "");
+		const displayTitle = computed(() => props.title.trim());
+		const titleId = computed(() => resolvePlaygroundTitleId(displayTitle.value, props.id, (candidate) => {
+			if (typeof document === "undefined") return false;
+			const existing = document.getElementById(candidate);
+			return !!existing && existing !== titleEl.value;
+		}));
+		const copyValue = computed(() => sourceFiles.value[currentEntry.value] || "");
+		/** runtime / 双视图始终有顶栏；files-only 仅有标题时渲染。 */
+		const showHeader = computed(() => hasRuntimeView.value || !!displayTitle.value);
+		const showToolbar = computed(() => hasRuntimeView.value);
+		const showRuntimeActions = computed(() => activeView.value === "runtime");
 		watch(locale, () => {
 			if (props.entry && sourceFiles.value[props.entry] === void 0) error.value = t("playground.validation.entryMissing", { filename: props.entry });
 		});
@@ -2395,6 +2513,15 @@ var playground_default = /* @__PURE__ */ defineComponent({
 			activeViewport.value = cloneViewport(viewport);
 			emit("update:viewport", cloneViewport(viewport));
 		};
+		const handleRefresh = () => {
+			runtimeRef.value?.refresh();
+		};
+		const handleEdit = () => {
+			runtimeRef.value?.edit();
+		};
+		const handleOpenPopup = () => {
+			runtimeRef.value?.openPopup();
+		};
 		const handleFileActive = (filename) => {
 			if (sourceFiles.value[filename] !== void 0) fileActiveFilename.value = filename;
 		};
@@ -2476,8 +2603,10 @@ var playground_default = /* @__PURE__ */ 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,
@@ -2489,29 +2618,68 @@ var playground_default = /* @__PURE__ */ defineComponent({
 				"options",
 				"preview-options",
 				"preview-inset",
-				"expand",
+				"expandable",
+				"title",
+				"id",
 				"viewport",
 				"viewport-options"
 			])) : (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: normalizeClass(["docs-playground", { "docs-playground--files": activeView.value === "files" }])
-			}, [
-				error.value ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(error.value), 1)) : createCommentVNode("v-if", true),
-				runtimeActivated.value && normalizedViews.value.includes("runtime") ? withDirectives((openBlock(), createBlock(unref(runtime_default), {
+			}, [error.value ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(error.value), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+				showHeader.value ? (openBlock(), createElementBlock("div", _hoisted_2, [displayTitle.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					ref_key: "titleEl",
+					ref: titleEl,
+					class: "docs-playground__title",
+					id: titleId.value,
+					tabindex: "-1",
+					title: displayTitle.value
+				}, [createElementVNode("a", {
+					class: "docs-playground__title-anchor",
+					href: `#${titleId.value}`
+				}, "#", 8, _hoisted_4), createElementVNode("span", _hoisted_5, toDisplayString(displayTitle.value), 1)], 8, _hoisted_3)) : createCommentVNode("v-if", true), showToolbar.value ? (openBlock(), createBlock(toolbar_default, {
 					key: 1,
+					"copy-value": copyValue.value,
+					viewport: activeViewport.value,
+					"viewport-options": selectableViewportOptions.value,
+					views: normalizedViews.value,
+					"active-view": activeView.value,
+					"show-runtime-actions": showRuntimeActions.value,
+					"show-open-popup": hasRuntimeView.value,
+					onRefresh: handleRefresh,
+					onEdit: handleEdit,
+					onOpenPopup: handleOpenPopup,
+					onViewportChange: handleViewport,
+					onViewChange: handleView
+				}, null, 8, [
+					"copy-value",
+					"viewport",
+					"viewport-options",
+					"views",
+					"active-view",
+					"show-runtime-actions",
+					"show-open-popup"
+				])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
+				runtimeActivated.value && hasRuntimeView.value ? withDirectives((openBlock(), createBlock(unref(runtime_default), {
+					key: 1,
+					ref_key: "runtimeRef",
+					ref: runtimeRef,
 					files: sourceFiles.value,
 					entry: currentEntry.value,
 					options: __props.options,
 					"preview-options": __props.previewOptions,
 					"preview-inset": __props.previewInset,
-					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",
@@ -2519,31 +2687,32 @@ var playground_default = /* @__PURE__ */ defineComponent({
 					"options",
 					"preview-options",
 					"preview-inset",
-					"expand",
+					"expandable",
+					"title",
+					"id",
 					"active-view",
 					"views",
 					"viewport",
 					"viewport-options"
-				])), [[vShow, !error.value && activeView.value === "runtime"]]) : createCommentVNode("v-if", true),
-				normalizedViews.value.includes("files") ? withDirectives((openBlock(), createBlock(unref(files_preview_default), {
+				])), [[vShow, activeView.value === "runtime"]]) : createCommentVNode("v-if", true),
+				hasFilesView.value ? withDirectives((openBlock(), createBlock(unref(files_preview_default), {
 					key: 2,
 					files: sourceFiles.value,
 					entry: currentEntry.value,
 					"active-filename": fileActiveFilename.value,
 					"active-view": activeView.value,
 					views: normalizedViews.value,
-					onActiveChange: handleFileActive,
-					onViewChange: handleView
+					onActiveChange: handleFileActive
 				}, null, 8, [
 					"files",
 					"entry",
 					"active-filename",
 					"active-view",
 					"views"
-				])), [[vShow, !error.value && activeView.value === "files"]]) : createCommentVNode("v-if", true)
-			], 2));
+				])), [[vShow, activeView.value === "files"]]) : createCommentVNode("v-if", true)
+			], 64))], 2));
 		};
 	}
 });
 //#endregion
-export { code_preview_default as CodePreview, DEFAULT_CDN_URL, Editor, playground_default as Playground, applyPlaygroundImportMapOverride, applyPlaygroundStyleOverride, clearPlaygroundMaps, createBuiltinImports, createBuiltinStyles, createRuntimePreviewOptions, getPlaygroundImportMapOverrides, getPlaygroundSiteModules, getPlaygroundSiteStyles, getPlaygroundStyleOverrides, highlightCode, highlightCodeByLanguage, isSafePlaygroundHref, normalizeCdnURL, registerVueHighlight, removePlaygroundImportMapOverride, removePlaygroundStyleOverride, resolveHighlightLanguage, setPlaygroundImportMapOverrides, setPlaygroundSiteModules, setPlaygroundSiteStyles, setPlaygroundStyleOverrides, vueHighlight };
+export { code_preview_default as CodePreview, DEFAULT_CDN_URL, Editor, playground_default as Playground, applyPlaygroundImportMapOverride, applyPlaygroundStyleOverride, clearPlaygroundMaps, createBuiltinImports, createBuiltinStyles, createRuntimePreviewOptions, getPlaygroundImportMapOverrides, getPlaygroundSiteModules, getPlaygroundSiteStyles, getPlaygroundStyleOverrides, highlightCode, highlightCodeByLanguage, isSafePlaygroundHref, normalizeCdnURL, registerVueHighlight, removePlaygroundImportMapOverride, removePlaygroundStyleOverride, resolveHighlightLanguage, resolvePlaygroundTitleId, setPlaygroundImportMapOverrides, setPlaygroundSiteModules, setPlaygroundSiteStyles, setPlaygroundStyleOverrides, slugifyPlaygroundTitle, vueHighlight };