@deot/docs-playground 1.1.3 → 1.1.4

package/README.md

@@ -156,6 +156,7 @@ const handleMessage = async () => {
 - Playground 运行时通过公共 CDN 加载 Vue 和默认 import map 中的依赖，手工预览需要网络访问。
 - 默认 CDN 为 `https://cdn.jsdelivr.net/npm`，可通过 `options.cdnURL` 换成 unpkg 等兼容 `/{package}/{file}` 路径的镜像；该地址用于预览样式和内置 import map。
 - `lodash-es` 和在线 Sass 编译器使用 jsDelivr 的 `/+esm` 入口；unpkg 等 CDN 不支持该路径。
+- 直接渲染时，未配置的 npm 模块（含作用域包和子路径）自动从 jsDelivr 的 `/+esm` 入口加载；组件包的传递依赖也适用，`import()` 在调用时加载。`@deot/vc` 的组件、hooks 和 locale 走远程模块加载器，Vue 保持与宿主共用。可用 `options.builtinImportMap.imports` 指定依赖的版本和 URL。
 - Vue SFC 的 `<style lang="scss">` / `lang="sass"` 以及独立 `.scss` / `.sass` 文件会在浏览器里编译；`_partial.scss` 只作为 `@use` 依赖。
 - `options.builtinImportMap.imports` 可以覆盖默认模块 URL。Vue 运行时仍从 `play.vuejs.org` 加载。
 - 每个 Playground 实例都使用自己的 preview 配置和 iframe 消息来源校验。

package/dist/{cdn-Czve5_9b.cjs → cdn-BoYKnGD3.cjs}

@@ -49,6 +49,7 @@ var createBuiltinImports = (cdnURL = DEFAULT_CDN_URL) => ({
 	"lodash-es": jsdelivrEsmURL("lodash-es/+esm")
 });
 var createBuiltinStyles = (cdnURL = DEFAULT_CDN_URL) => Object.fromEntries(PREVIEW_STYLE_ASSETS.map((asset) => [asset, cdnAsset(cdnURL, asset)]));
+var resolveNpmImport = (specifier) => /^https?:\/\//.test(specifier) ? specifier : jsdelivrEsmURL(`${specifier}/+esm`);
 //#endregion
 Object.defineProperty(exports, "DEFAULT_CDN_URL", {
 	enumerable: true,
@@ -92,3 +93,9 @@ Object.defineProperty(exports, "normalizeCdnURL", {
 		return normalizeCdnURL;
 	}
 });
+Object.defineProperty(exports, "resolveNpmImport", {
+	enumerable: true,
+	get: function() {
+		return resolveNpmImport;
+	}
+});

package/dist/{cdn-DEvdGJu2.js → cdn-DQoETju_.js}

@@ -49,5 +49,6 @@ var createBuiltinImports = (cdnURL = DEFAULT_CDN_URL) => ({
 	"lodash-es": jsdelivrEsmURL("lodash-es/+esm")
 });
 var createBuiltinStyles = (cdnURL = DEFAULT_CDN_URL) => Object.fromEntries(PREVIEW_STYLE_ASSETS.map((asset) => [asset, cdnAsset(cdnURL, asset)]));
+var resolveNpmImport = (specifier) => /^https?:\/\//.test(specifier) ? specifier : jsdelivrEsmURL(`${specifier}/+esm`);
 //#endregion
-export { DEFAULT_CDN_URL as a, normalizeCdnURL as i, createBuiltinImports as n, DEFAULT_ENTRY as o, createBuiltinStyles as r, NEW_SFC_CODE as s, SASS_CDN_URL as t };
+export { resolveNpmImport as a, NEW_SFC_CODE as c, normalizeCdnURL as i, createBuiltinImports as n, DEFAULT_CDN_URL as o, createBuiltinStyles as r, DEFAULT_ENTRY as s, SASS_CDN_URL as t };

package/dist/{compile-Bw7v7QE-.js → compile-BHD98Ttf.js}

@@ -1,7 +1,7 @@
-import { n as compileScssSource } from "./scss-Co2it4vB.js";
-import { collectReachableFilenames, createFileIndex, getExtension, normalizeVirtualPath, resolveEntry } from "./files-C5UMzYxA.js";
-import { n as transformScript } from "./script-xKUjE8pf.js";
-import { n as collectCss } from "./local-sandbox-B8IJ5jWb.js";
+import { d as resolveEntry, n as collectReachableFilenames, o as getExtension, r as createFileIndex, u as normalizeVirtualPath } from "./files-BqucFldk.js";
+import { n as compileScssSource, r as extractScssExports } from "./scss-DIh6971q.js";
+import { n as transformScript } from "./script-DjUf9uWK.js";
+import { n as collectCss } from "./local-sandbox-DvcgaBOa.js";
 import { compileString } from "sass";
 //#region packages/playground/src/core/runtime/local/compile/scss.ts
 /**
@@ -216,10 +216,10 @@ var compileOne = async (filename, code, files) => {
 		errors
 	};
 	if (ext === ".scss" || ext === ".sass") try {
-		const css = compileLocalScss(code, filename, files);
+		const { css, exports: styleExports } = extractScssExports(compileLocalScss(code, filename, files), filename);
 		return {
 			filename,
-			js: `exports.default = {};\n//# sourceURL=playground://${filename}`,
+			js: `exports.__esModule = true; exports.default = ${JSON.stringify(styleExports)};\n//# sourceURL=playground://${filename}`,
 			css,
 			errors
 		};
@@ -248,32 +248,24 @@ var compileOne = async (filename, code, files) => {
 			errors
 		};
 	}
-	if (ext === ".js" || ext === ".ts" || ext === ".jsx" || ext === ".tsx") {
-		if (ext === ".jsx" || ext === ".tsx") {
-			errors.push(`[Playground] JSX/TSX 暂不支持: ${filename}`);
-			return {
-				filename,
-				js: "exports.default = {};",
-				css: "",
-				errors
-			};
-		}
-		try {
-			return {
-				filename,
-				js: transformScript(code, filename, { typescript: ext === ".ts" }),
-				css: "",
-				errors
-			};
-		} catch (error) {
-			errors.push(messageOf(error));
-			return {
-				filename,
-				js: "exports.default = {};",
-				css: "",
-				errors
-			};
-		}
+	if (ext === ".js" || ext === ".ts" || ext === ".jsx" || ext === ".tsx") try {
+		return {
+			filename,
+			js: transformScript(code, filename, {
+				typescript: ext === ".ts" || ext === ".tsx",
+				jsx: ext === ".jsx" || ext === ".tsx"
+			}),
+			css: "",
+			errors
+		};
+	} catch (error) {
+		errors.push(messageOf(error));
+		return {
+			filename,
+			js: "exports.default = {};",
+			css: "",
+			errors
+		};
 	}
 	errors.push(`[Playground] 不支持的文件类型: ${filename}`);
 	return {

package/dist/{compile-DSMuM8zl.cjs → compile-Da095AyM.cjs}

@@ -1,7 +1,7 @@
-const require_scss = require("./scss-DaIqB_qT.cjs");
-const require_files = require("./files-D5LNOtjp.cjs");
-const require_script = require("./script-5Xzzx7u5.cjs");
-const require_local_sandbox = require("./local-sandbox-DnkKrBhf.cjs");
+const require_scss = require("./scss-B8OFbz1k.cjs");
+const require_files = require("./files-BsAOZiPN.cjs");
+const require_script = require("./script-BiCcpu3G.cjs");
+const require_local_sandbox = require("./local-sandbox-0ojvBQPO.cjs");
 let sass = require("sass");
 //#region packages/playground/src/core/runtime/local/compile/scss.ts
 /**
@@ -216,10 +216,10 @@ var compileOne = async (filename, code, files) => {
 		errors
 	};
 	if (ext === ".scss" || ext === ".sass") try {
-		const css = compileLocalScss(code, filename, files);
+		const { css, exports: styleExports } = require_scss.extractScssExports(compileLocalScss(code, filename, files), filename);
 		return {
 			filename,
-			js: `exports.default = {};\n//# sourceURL=playground://${filename}`,
+			js: `exports.__esModule = true; exports.default = ${JSON.stringify(styleExports)};\n//# sourceURL=playground://${filename}`,
 			css,
 			errors
 		};
@@ -248,32 +248,24 @@ var compileOne = async (filename, code, files) => {
 			errors
 		};
 	}
-	if (ext === ".js" || ext === ".ts" || ext === ".jsx" || ext === ".tsx") {
-		if (ext === ".jsx" || ext === ".tsx") {
-			errors.push(`[Playground] JSX/TSX 暂不支持: ${filename}`);
-			return {
-				filename,
-				js: "exports.default = {};",
-				css: "",
-				errors
-			};
-		}
-		try {
-			return {
-				filename,
-				js: require_script.transformScript(code, filename, { typescript: ext === ".ts" }),
-				css: "",
-				errors
-			};
-		} catch (error) {
-			errors.push(messageOf(error));
-			return {
-				filename,
-				js: "exports.default = {};",
-				css: "",
-				errors
-			};
-		}
+	if (ext === ".js" || ext === ".ts" || ext === ".jsx" || ext === ".tsx") try {
+		return {
+			filename,
+			js: require_script.transformScript(code, filename, {
+				typescript: ext === ".ts" || ext === ".tsx",
+				jsx: ext === ".jsx" || ext === ".tsx"
+			}),
+			css: "",
+			errors
+		};
+	} catch (error) {
+		errors.push(messageOf(error));
+		return {
+			filename,
+			js: "exports.default = {};",
+			css: "",
+			errors
+		};
 	}
 	errors.push(`[Playground] 不支持的文件类型: ${filename}`);
 	return {

package/dist/{files-C5UMzYxA.js → files-BqucFldk.js}

@@ -1,7 +1,36 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
 //#region packages/playground/src/core/runtime/local/compile/types.ts
 var IGNORED_FILENAMES = /* @__PURE__ */ new Set(["import-map.json", "tsconfig.json"]);
 //#endregion
 //#region packages/playground/src/core/runtime/local/compile/files.ts
+var files_exports = /* @__PURE__ */ __exportAll({
+	basename: () => basename,
+	collectBareSpecifiers: () => collectBareSpecifiers,
+	collectReachableFilenames: () => collectReachableFilenames,
+	createFileIndex: () => createFileIndex,
+	dirname: () => dirname,
+	getCommonRoot: () => getCommonRoot,
+	getExtension: () => getExtension,
+	isIgnoredFilename: () => isIgnoredFilename,
+	isInsideRoot: () => isInsideRoot,
+	isRelativeSpecifier: () => isRelativeSpecifier,
+	joinVirtualPath: () => joinVirtualPath,
+	listImportSpecifiers: () => listImportSpecifiers,
+	normalizeVirtualPath: () => normalizeVirtualPath,
+	resolveEntry: () => resolveEntry,
+	resolveModulePath: () => resolveModulePath
+});
 /**
 * 统一成以 `/` 开头的 POSIX 绝对虚拟路径。
 * `App.vue` 与 `/App.vue` 是同一文件，和 iframe 预览使用的 files 键一致。
@@ -91,7 +120,7 @@ var CANDIDATE_EXTENSIONS = [
 * @returns 解析后的 files 键；找不到时返回 null。
 */
 var resolveModulePath = (fromFilename, specifier, fileIndex) => {
-	if (!specifier || !(specifier.startsWith("./") || specifier.startsWith("../") || specifier.startsWith("/"))) return null;
+	if (!specifier || !(specifier === "." || specifier === ".." || specifier.startsWith("./") || specifier.startsWith("../") || specifier.startsWith("/"))) return null;
 	const target = joinVirtualPath(dirname(fromFilename), specifier);
 	if (fileIndex.has(target)) return target;
 	for (const ext of CANDIDATE_EXTENSIONS) {
@@ -137,7 +166,7 @@ var listImportSpecifiers = (code) => {
 	for (const match of source.matchAll(/(?:\bfrom\s+|import\s*\(\s*|import\s+)['"]([^'"]+)['"]/gu)) if (match[1]) result.push(match[1]);
 	return result;
 };
-var isRelativeSpecifier = (id) => id.startsWith("./") || id.startsWith("../") || id.startsWith("/");
+var isRelativeSpecifier = (id) => id === "." || id === ".." || id.startsWith("./") || id.startsWith("../") || id.startsWith("/");
 /**
 * 从入口出发只编译静态 import 能走到的文件。
 * @param files 当前 Playground 文件表。
@@ -167,7 +196,7 @@ var collectBareSpecifiers = (files, filenames) => {
 	const seen = /* @__PURE__ */ new Set();
 	filenames.forEach((filename) => {
 		listImportSpecifiers(index.get(normalizeVirtualPath(filename)) || "").forEach((specifier) => {
-			if (!specifier || isRelativeSpecifier(specifier) || seen.has(specifier)) return;
+			if (!specifier || isRelativeSpecifier(specifier) || seen.has(specifier) || /\.(?:css|scss|sass)(?:[?#]|$)/.test(specifier)) return;
 			seen.add(specifier);
 			result.push(specifier);
 		});
@@ -175,4 +204,4 @@ var collectBareSpecifiers = (files, filenames) => {
 	return result;
 };
 //#endregion
-export { basename, collectBareSpecifiers, collectReachableFilenames, createFileIndex, dirname, getCommonRoot, getExtension, isIgnoredFilename, isInsideRoot, isRelativeSpecifier, joinVirtualPath, listImportSpecifiers, normalizeVirtualPath, resolveEntry, resolveModulePath };
+export { getCommonRoot as a, isInsideRoot as c, resolveEntry as d, resolveModulePath as f, files_exports as i, isRelativeSpecifier as l, collectReachableFilenames as n, getExtension as o, __exportAll as p, createFileIndex as r, isIgnoredFilename as s, collectBareSpecifiers as t, normalizeVirtualPath as u };

package/dist/{files-D5LNOtjp.cjs → files-BsAOZiPN.cjs}

@@ -1,7 +1,25 @@
+const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.cjs");
 //#region packages/playground/src/core/runtime/local/compile/types.ts
 var IGNORED_FILENAMES = /* @__PURE__ */ new Set(["import-map.json", "tsconfig.json"]);
 //#endregion
 //#region packages/playground/src/core/runtime/local/compile/files.ts
+var files_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	basename: () => basename,
+	collectBareSpecifiers: () => collectBareSpecifiers,
+	collectReachableFilenames: () => collectReachableFilenames,
+	createFileIndex: () => createFileIndex,
+	dirname: () => dirname,
+	getCommonRoot: () => getCommonRoot,
+	getExtension: () => getExtension,
+	isIgnoredFilename: () => isIgnoredFilename,
+	isInsideRoot: () => isInsideRoot,
+	isRelativeSpecifier: () => isRelativeSpecifier,
+	joinVirtualPath: () => joinVirtualPath,
+	listImportSpecifiers: () => listImportSpecifiers,
+	normalizeVirtualPath: () => normalizeVirtualPath,
+	resolveEntry: () => resolveEntry,
+	resolveModulePath: () => resolveModulePath
+});
 /**
 * 统一成以 `/` 开头的 POSIX 绝对虚拟路径。
 * `App.vue` 与 `/App.vue` 是同一文件，和 iframe 预览使用的 files 键一致。
@@ -91,7 +109,7 @@ var CANDIDATE_EXTENSIONS = [
 * @returns 解析后的 files 键；找不到时返回 null。
 */
 var resolveModulePath = (fromFilename, specifier, fileIndex) => {
-	if (!specifier || !(specifier.startsWith("./") || specifier.startsWith("../") || specifier.startsWith("/"))) return null;
+	if (!specifier || !(specifier === "." || specifier === ".." || specifier.startsWith("./") || specifier.startsWith("../") || specifier.startsWith("/"))) return null;
 	const target = joinVirtualPath(dirname(fromFilename), specifier);
 	if (fileIndex.has(target)) return target;
 	for (const ext of CANDIDATE_EXTENSIONS) {
@@ -137,7 +155,7 @@ var listImportSpecifiers = (code) => {
 	for (const match of source.matchAll(/(?:\bfrom\s+|import\s*\(\s*|import\s+)['"]([^'"]+)['"]/gu)) if (match[1]) result.push(match[1]);
 	return result;
 };
-var isRelativeSpecifier = (id) => id.startsWith("./") || id.startsWith("../") || id.startsWith("/");
+var isRelativeSpecifier = (id) => id === "." || id === ".." || id.startsWith("./") || id.startsWith("../") || id.startsWith("/");
 /**
 * 从入口出发只编译静态 import 能走到的文件。
 * @param files 当前 Playground 文件表。
@@ -167,7 +185,7 @@ var collectBareSpecifiers = (files, filenames) => {
 	const seen = /* @__PURE__ */ new Set();
 	filenames.forEach((filename) => {
 		listImportSpecifiers(index.get(normalizeVirtualPath(filename)) || "").forEach((specifier) => {
-			if (!specifier || isRelativeSpecifier(specifier) || seen.has(specifier)) return;
+			if (!specifier || isRelativeSpecifier(specifier) || seen.has(specifier) || /\.(?:css|scss|sass)(?:[?#]|$)/.test(specifier)) return;
 			seen.add(specifier);
 			result.push(specifier);
 		});
@@ -175,18 +193,75 @@ var collectBareSpecifiers = (files, filenames) => {
 	return result;
 };
 //#endregion
-exports.basename = basename;
-exports.collectBareSpecifiers = collectBareSpecifiers;
-exports.collectReachableFilenames = collectReachableFilenames;
-exports.createFileIndex = createFileIndex;
-exports.dirname = dirname;
-exports.getCommonRoot = getCommonRoot;
-exports.getExtension = getExtension;
-exports.isIgnoredFilename = isIgnoredFilename;
-exports.isInsideRoot = isInsideRoot;
-exports.isRelativeSpecifier = isRelativeSpecifier;
-exports.joinVirtualPath = joinVirtualPath;
-exports.listImportSpecifiers = listImportSpecifiers;
-exports.normalizeVirtualPath = normalizeVirtualPath;
-exports.resolveEntry = resolveEntry;
-exports.resolveModulePath = resolveModulePath;
+Object.defineProperty(exports, "collectBareSpecifiers", {
+	enumerable: true,
+	get: function() {
+		return collectBareSpecifiers;
+	}
+});
+Object.defineProperty(exports, "collectReachableFilenames", {
+	enumerable: true,
+	get: function() {
+		return collectReachableFilenames;
+	}
+});
+Object.defineProperty(exports, "createFileIndex", {
+	enumerable: true,
+	get: function() {
+		return createFileIndex;
+	}
+});
+Object.defineProperty(exports, "files_exports", {
+	enumerable: true,
+	get: function() {
+		return files_exports;
+	}
+});
+Object.defineProperty(exports, "getCommonRoot", {
+	enumerable: true,
+	get: function() {
+		return getCommonRoot;
+	}
+});
+Object.defineProperty(exports, "getExtension", {
+	enumerable: true,
+	get: function() {
+		return getExtension;
+	}
+});
+Object.defineProperty(exports, "isIgnoredFilename", {
+	enumerable: true,
+	get: function() {
+		return isIgnoredFilename;
+	}
+});
+Object.defineProperty(exports, "isInsideRoot", {
+	enumerable: true,
+	get: function() {
+		return isInsideRoot;
+	}
+});
+Object.defineProperty(exports, "isRelativeSpecifier", {
+	enumerable: true,
+	get: function() {
+		return isRelativeSpecifier;
+	}
+});
+Object.defineProperty(exports, "normalizeVirtualPath", {
+	enumerable: true,
+	get: function() {
+		return normalizeVirtualPath;
+	}
+});
+Object.defineProperty(exports, "resolveEntry", {
+	enumerable: true,
+	get: function() {
+		return resolveEntry;
+	}
+});
+Object.defineProperty(exports, "resolveModulePath", {
+	enumerable: true,
+	get: function() {
+		return resolveModulePath;
+	}
+});

package/dist/index.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.cjs");
-const require_cdn = require("./cdn-Czve5_9b.cjs");
-const require_store = require("./store-BF7z-oaO.cjs");
-const require_scss = require("./scss-DaIqB_qT.cjs");
+const require_cdn = require("./cdn-BoYKnGD3.cjs");
+const require_store = require("./store-DKawhFZu.cjs");
+const require_scss = require("./scss-B8OFbz1k.cjs");
+const require_files = require("./files-BsAOZiPN.cjs");
 let vue = require("vue");
 let _deot_vc = require("@deot/vc");
 let _deot_docs_locale = require("@deot/docs-locale");
@@ -439,7 +440,7 @@ 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_9$1 = { class: "docs-playground-editor__actions" };
 var _hoisted_10$1 = ["title"];
 var _hoisted_11$1 = ["title", "disabled"];
 var _hoisted_12$1 = {
@@ -755,7 +756,7 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							], 64))], 42, _hoisted_4$4);
 						}), 128))]),
 						_: 1
-					}, 512), (0, vue.createElementVNode)("div", _hoisted_9$2, [(0, vue.createElementVNode)("button", {
+					}, 512), (0, vue.createElementVNode)("div", _hoisted_9$1, [(0, vue.createElementVNode)("button", {
 						type: "button",
 						title: (0, vue.unref)(t)("playground.editor.createFile"),
 						onClick: handleCreate
@@ -1187,7 +1188,7 @@ var _hoisted_8$1 = {
 	class: "docs-playground__tool-divider",
 	"aria-hidden": "true"
 };
-var _hoisted_9$1 = ["aria-label"];
+var _hoisted_9 = ["aria-label"];
 var _hoisted_10 = [
 	"title",
 	"aria-label",
@@ -1360,7 +1361,7 @@ var toolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"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),
+				}), 128))], 8, _hoisted_9)) : (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: 3,
@@ -1425,7 +1426,7 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		"portal-fulfilled"
 	],
 	setup(__props, { emit: __emit }) {
-		const LocalSandbox = (0, vue.defineAsyncComponent)(() => Promise.resolve().then(() => require("./local-sandbox-DnkKrBhf.cjs")).then((n) => n.local_sandbox_exports));
+		const LocalSandbox = (0, vue.defineAsyncComponent)(() => Promise.resolve().then(() => require("./local-sandbox-0ojvBQPO.cjs")).then((n) => n.local_sandbox_exports));
 		const props = __props;
 		const emit = __emit;
 		const { t } = (0, _deot_docs_locale.useLocale)();
@@ -1607,26 +1608,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$1 = {
+var _hoisted_1$1 = {
 	key: 0,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
-var _hoisted_3$1 = {
+var _hoisted_2$1 = {
 	key: 0,
 	class: "docs-playground__header"
 };
-var _hoisted_4$1 = ["id", "title"];
-var _hoisted_5$1 = ["href"];
-var _hoisted_6 = { class: "docs-playground__title-text" };
-var _hoisted_7 = {
+var _hoisted_3$1 = ["id", "title"];
+var _hoisted_4$1 = ["href"];
+var _hoisted_5$1 = { class: "docs-playground__title-text" };
+var _hoisted_6 = {
 	key: 1,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
-var _hoisted_8 = { class: "docs-playground-runtime__viewport-stage" };
-var _hoisted_9 = [
+var _hoisted_7 = { class: "docs-playground-runtime__viewport-stage" };
+var _hoisted_8 = [
 	"aria-expanded",
 	"title",
 	"aria-label"
@@ -1672,7 +1672,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		"navigate"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
-		const LocalSandbox = (0, vue.defineAsyncComponent)(() => Promise.resolve().then(() => require("./local-sandbox-DnkKrBhf.cjs")).then((n) => n.local_sandbox_exports));
+		const LocalSandbox = (0, vue.defineAsyncComponent)(() => Promise.resolve().then(() => require("./local-sandbox-0ojvBQPO.cjs")).then((n) => n.local_sandbox_exports));
 		const props = __props;
 		const { locale, t } = (0, _deot_docs_locale.useLocale)();
 		const displayTitle = (0, vue.computed)(() => props.title.trim());
@@ -1711,6 +1711,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}.MODE !== "development";
 		const copyValue = (0, vue.computed)(() => props.files[props.entry] || "");
 		const store = props.local ? null : require_store.createRuntimeStore(props.files, props.entry, props.options);
+		const storeReady = (0, vue.computed)(() => store && !store.loading && Object.values(store.files).every((file) => require_files.isIgnoredFilename(file.filename) || !/\.(?:vue|[jt]sx?|json|s[ac]ss)$/.test(file.filename) || !file.code.trim() || !!file.compiled.js));
 		const sandboxRef = (0, vue.ref)(null);
 		const localError = (0, vue.ref)({
 			compile: "",
@@ -1937,13 +1938,13 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			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", {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)(["docs-playground-runtime-host", { "docs-playground-runtime-host--direct": __props.local && __props.styleless }]) }, [__props.styleless ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				ref_key: "runtimeRoot",
 				ref: runtimeRoot,
 				class: "docs-playground-runtime--styleless",
 				style: (0, vue.normalizeStyle)(stylelessStyle.value)
-			}, [errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_2$1, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("div", {
+			}, [errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_1$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)
 			}, [__props.local ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LocalSandbox), {
@@ -1955,13 +1956,15 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				options: __props.options,
 				"preview-scroller": __props.previewScroller,
 				"clear-console": clearConsole,
+				"auto-height": !(0, vue.unref)(getViewportHeight)(__props.viewport),
 				onError: handleLocalError
 			}, null, 8, [
 				"files",
 				"entry",
 				"options",
-				"preview-scroller"
-			])) : (0, vue.unref)(store) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
+				"preview-scroller",
+				"auto-height"
+			])) : (0, vue.unref)(store) && storeReady.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
 				key: 1,
 				ref_key: "sandboxRef",
 				ref: sandboxRef,
@@ -1974,7 +1977,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				ref: runtimeRoot,
 				class: "docs-playground-runtime"
 			}, [
-				!__props.hideChrome ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$1, [displayTitle.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				!__props.hideChrome ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$1, [displayTitle.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
 					ref_key: "titleEl",
 					ref: titleEl,
@@ -1985,7 +1988,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, [(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, {
+				}, "#", 8, _hoisted_4$1), (0, vue.createElementVNode)("span", _hoisted_5$1, (0, vue.toDisplayString)(displayTitle.value), 1)], 8, _hoisted_3$1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)(toolbar_default, {
 					"copy-value": copyValue.value,
 					viewport: __props.viewport,
 					"viewport-options": __props.viewportOptions,
@@ -1999,11 +2002,11 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"viewport",
 					"viewport-options"
 				])])) : (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),
+				errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_6, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
 				(0, vue.createElementVNode)("section", {
 					class: (0, vue.normalizeClass)(["docs-playground__preview", { "is-expanded": previewExpanded.value }]),
 					style: (0, vue.normalizeStyle)(previewStyle.value)
-				}, [(0, vue.createElementVNode)("div", _hoisted_8, [(0, vue.createElementVNode)("div", {
+				}, [(0, vue.createElementVNode)("div", _hoisted_7, [(0, vue.createElementVNode)("div", {
 					class: "docs-playground-runtime__viewport",
 					style: (0, vue.normalizeStyle)(viewportStyle.value)
 				}, [__props.local ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LocalSandbox), {
@@ -2015,13 +2018,15 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					options: __props.options,
 					"preview-scroller": __props.previewScroller,
 					"clear-console": clearConsole,
+					"auto-height": !(0, vue.unref)(getViewportHeight)(__props.viewport),
 					onError: handleLocalError
 				}, null, 8, [
 					"files",
 					"entry",
 					"options",
-					"preview-scroller"
-				])) : (0, vue.unref)(store) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
+					"preview-scroller",
+					"auto-height"
+				])) : (0, vue.unref)(store) && storeReady.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
 					key: sandboxKey.value,
 					ref_key: "sandboxRef",
 					ref: sandboxRef,
@@ -2038,8 +2043,8 @@ 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_9)) : (0, vue.createCommentVNode)("v-if", true)], 6)
-			], 512))]);
+				}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "expand" })], 10, _hoisted_8)) : (0, vue.createCommentVNode)("v-if", true)], 6)
+			], 512))], 2);
 		};
 	}
 });